:root{
  --ytp-ink: #141414;
  --ytp-muted: rgba(20,20,20,0.68);
  --ytp-border: rgba(20,20,20,0.10);
  --ytp-shadow: 0 28px 70px rgba(20,20,20,0.08);

  --ytp-body-bg: #efe9e2;
  --ytp-frame-bg: #fbf7f2;
  --ytp-card-bg: rgba(255,255,255,0.92);

  --ytp-accent: #0B3A2A;

  --ytp-radius: 14px;
  --ytp-radius-card: 12px;

  --ytp-max: 1120px;
}.ytp-brandline{
  margin: 2 0 10px 0;
  color: var(--ytp-muted);
  font-size: 14px;
  line-height: 1.45;
}
/* Background */
body{
  color: var(--ytp-ink);
  background-color: var(--ytp-body-bg);
  background-image:
    linear-gradient(45deg, rgba(20,20,20,0.035) 25%, transparent 25%, transparent 75%, rgba(20,20,20,0.035) 75%, rgba(20,20,20,0.035)),
    linear-gradient(45deg, rgba(20,20,20,0.035) 25%, transparent 25%, transparent 75%, rgba(20,20,20,0.035) 75%, rgba(20,20,20,0.035));
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
}

html{ scroll-behavior: smooth; }

/* Wrapper */.ytp-shell{ padding: 0 0 42px; }

/* Frame */.ytp-frame{
  max-width: var(--ytp-max);
  margin: 0 auto;
  background: var(--ytp-frame-bg);
  border: 1px solid var(--ytp-border);
  border-top: none;
  border-radius: 0 0 var(--ytp-radius) var(--ytp-radius);
  overflow: hidden;
  box-shadow: var(--ytp-shadow);
}

/* Squarespace header styled as the top of the frame */
header .Header{
  max-width: var(--ytp-max);
  margin: 42px auto 0;
  background: var(--ytp-frame-bg);
  border: 1px solid var(--ytp-border);
  border-bottom: none;
  border-radius: var(--ytp-radius) var(--ytp-radius) 0 0;
  box-shadow: var(--ytp-shadow);
}

header .Header .header-inner{ padding: 22px 28px; }

header .Header a{
  color: var(--ytp-muted);
  text-decoration: none;
  font-size: 14px;
}

header .Header a:hover{ color: var(--ytp-ink); }

/* In-page wordmark */.ytp-wordmark{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ytp-ink);
  white-space: nowrap;
}

/* Sections */.ytp-section{
  padding: 40px 28px;
  border-top: 1px solid rgba(20,20,20,0.08);
}.ytp-section h2{
  margin: 0 0 12px 0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.15;
}

/* HERO */.ytp-hero{
  padding: 28px 28px 18px 28px;
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(11,58,42,0.08), transparent 60%),
    radial-gradient(900px 520px at 10% 0%, rgba(20,20,20,0.06), transparent 60%);
}.ytp-hero h1{
  margin: 0 0 10px 0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-size: 48px;
  max-width: none;
}.ytp-subhead{
  margin: 0 0 14px 0;
  color: var(--ytp-muted);
  font-size: 18px;
  line-height: 1.55;
  max-width: 78ch;
}.ytp-hero-bullets{
  margin: 0 0 14px 0;
  padding-left: 18px;
  color: var(--ytp-muted);
  max-width: 82ch;
}.ytp-hero-bullets li{ margin: 10px 0; line-height: 1.45; }.ytp-cta-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Buttons */.ytp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid rgba(20,20,20,0.12);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--ytp-ink);
  background: rgba(255,255,255,0.60);
}.ytp-btn:hover{ background: rgba(255,255,255,0.90); }.ytp-btn--primary{
  background: var(--ytp-accent);
  color: #ffffff;
  border-color: rgba(11,58,42,0.28);
}.ytp-btn--primary:hover{ background: rgba(11,58,42,0.92); }

/* Text blocks */.ytp-lede{
  margin: 0 0 14px 0;
  color: var(--ytp-muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 90ch;
}.ytp-bottom__right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}.ytp-footnote{
  margin: 0;
  color: var(--ytp-muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Grids */.ytp-grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}.ytp-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

/* Cards */.ytp-card{
  background: var(--ytp-card-bg);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: var(--ytp-radius-card);
  padding: 18px;
  box-shadow: 0 16px 38px rgba(20,20,20,0.06);
}.ytp-card h3{
  margin: 0 0 10px 0;
  font-weight: 700;
  font-size: 16px;
}.ytp-card p{
  margin: 0;
  color: var(--ytp-muted);
  line-height: 1.55;
  font-size: 15px;
}.ytp-divider{ height: 1px; background: rgba(20,20,20,0.08); margin: 14px 0; }.ytp-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(20,20,20,0.60);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 14px 0 10px 0;
}.ytp-list{
  margin: 0;
  padding-left: 18px;
  color: var(--ytp-muted);
  font-size: 15px;
  line-height: 1.55;
}.ytp-list li{ margin: 10px 0; }

/* Callout */.ytp-callout{
  margin-top: 18px;
  border-left: 3px solid rgba(20,20,20,0.12);
  padding: 12px 0 12px 14px;
  color: var(--ytp-muted);
  line-height: 1.55;
}

/* How I work */.ytp-step{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}.ytp-stepnum{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(20,20,20,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--ytp-ink);
  background: rgba(255,255,255,0.75);
  flex: 0 0 auto;
}

/* Work page */.ytp-sector{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(20,20,20,0.08);
}.ytp-sector h2{
  margin: 0 0 10px 0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  font-size: 26px;
}.ytp-situation{
  background: var(--ytp-card-bg);
  border: 1px solid rgba(20,20,20,0.10);
  border-radius: var(--ytp-radius-card);
  padding: 18px;
  margin-top: 14px;
}.ytp-situation h3{
  margin: 0 0 10px 0;
  font-weight: 700;
  font-size: 16px;
}.ytp-situation p .ytp-situation li{
  color: var(--ytp-muted);
  font-size: 14px;
  line-height: 1.55;
}.ytp-details{
  margin: 8px 0 0 0;
}.ytp-details__summary{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 0;
  font-weight: 500;
  color: var(--ytp-muted);
  border-bottom: 1px solid rgba(20,20,20,0.18);
  padding-bottom: 2px;
  list-style: none;
  user-select: none;
  margin-left: 18px;
}.ytp-details__summary:hover{
  color: var(--ytp-ink);
  border-bottom-color: rgba(20,20,20,0.35);
}.ytp-details__summary::-webkit-details-marker{ display: none; }.ytp-details__summary::before{
  content: "+";
  font-size: 15px;
  line-height: 1;
}.ytp-details__summary::after{
  content: "more";
  font-size: 15px;
  line-height: 1;
  margin-left: 6px;
}.ytp-details[open] >.ytp-details__summary::after{ content: "less"; }.ytp-link{
  color: var(--ytp-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(20,20,20,0.18);
}.ytp-link:hover{ color: var(--ytp-ink); }.ytp-toc{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 10px;
}.ytp-toc a{ font-size: 15px; }

/* Bottom CTA */.ytp-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 32px 28px;
  border-top: 1px solid rgba(20,20,20,0.08);
  background: radial-gradient(900px 480px at 85% 50%, rgba(11,58,42,0.08), transparent 60%);
  margin-top: 0;
}.ytp-bottom h2{
  margin: 0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
  font-size: clamp(22px, 2.7vw, 34px);
  max-width: 36ch;
}

/* Contact */.ytp-contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}.ytp-calendly{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(20,20,20,0.10);
}

body[data-page-slug="contact"] .ytp-card,
body[data-page-slug="contact"] .ytp-card *{ box-sizing: border-box; }
body[data-page-slug="contact"] .ytp-card input,
body[data-page-slug="contact"] .ytp-card textarea,
body[data-page-slug="contact"] .ytp-card select{
  width: 100% !important;
  max-width: 100% !important;
}

/* Responsive */
@media (max-width: 980px){.ytp-grid-2{ grid-template-columns: 1fr; }.ytp-grid-3{ grid-template-columns: 1fr; }.ytp-bottom{ flex-direction: column; align-items: flex-start; }.ytp-contact-grid{ grid-template-columns: 1fr; }}

@media (max-width: 680px){
  header .Header{ margin-top: 24px; }}

@media (max-width: 520px){
  header .Header .header-inner{ padding: 18px 16px; }.ytp-hero{ padding: 22px 16px 16px 16px; }.ytp-hero h1{ font-size: 40px; }.ytp-section{ padding: 34px 16px; }.ytp-bottom{ padding: 26px 16px; }}

/* Site-wide footer */.ytp-footer{ width: 100%; }.ytp-footer-nav{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 6px;
}.ytp-footer-col{ min-width: 0; }.ytp-footer-title{
  font-size: 12px;
  font-weight: 800;
  color: rgba(20,20,20,0.60);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px 0;
}.ytp-footer-link{
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ytp-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(20,20,20,0.18);
  width: fit-content;
  margin: 0 0 10px 0;
}.ytp-footer-link:hover{
  color: var(--ytp-ink);
  border-bottom-color: rgba(20,20,20,0.35);
}.ytp-sitefooter{
  max-width: var(--ytp-max);
  margin: 0 auto 42px;
}.ytp-sitefooter__frame{
  background: var(--ytp-frame-bg);
  border: 1px solid var(--ytp-border);
  border-radius: var(--ytp-radius);
  box-shadow: var(--ytp-shadow);
  padding: 22px 28px;
}.ytp-sitefooter__cta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(20,20,20,0.08);
  margin-bottom: 18px;
}.ytp-sitefooter__cta-left{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 28px;
  line-height: 1.12;
}

a[href="#top"]{ display: inline-block; margin-bottom: 10px; }
a[href="#top"]::after{ content: ""; display: block; height: 0; }

@media (max-width: 980px){.ytp-footer-nav{ grid-template-columns: 1fr; }.ytp-sitefooter__cta{ flex-direction: column; align-items: flex-start; }}

/* ─── PORTFOLIO PAGE ─── */

@keyframes ytp-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }}.ytp-marquee{
  position: relative;
  padding: 28px 0;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(20,20,20,0.06);
}.ytp-marquee__fade{
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}.ytp-marquee__fade--left{
  left: 0;
  background: linear-gradient(to right, var(--ytp-bg, #f8f7f5) 0%, transparent 100%);
}.ytp-marquee__fade--right{
  right: 0;
  background: linear-gradient(to left, var(--ytp-bg, #f8f7f5) 0%, transparent 100%);
}.ytp-marquee__track{
  display: flex;
  width: max-content;
  animation: ytp-scroll 40s linear infinite;
}.ytp-marquee:hover .ytp-marquee__track{ animation-play-state: paused; }.ytp-marquee__set{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}.ytp-mlogo{
  color: rgba(20,20,20,0.28);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  transition: color 0.3s ease;
  padding: 0 28px;
}.ytp-mlogo--img{
  display: block;
  height: 22px;
  width: auto;
  padding: 0 28px;
  flex-shrink: 0;
  opacity: 0.22;
  filter: grayscale(1);
  transition: opacity 0.3s ease;
  user-select: none;
  -webkit-user-drag: none;
}.ytp-marquee:hover .ytp-mlogo{ color: rgba(20,20,20,0.42); }.ytp-marquee:hover .ytp-mlogo--img{ opacity: 0.38; }.ytp-mlogo__dot{
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(20,20,20,0.15);
  flex-shrink: 0;
}.ytp-metrics{
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 38px 0 34px 0;
  border-top: 1px solid rgba(20,20,20,0.06);
  border-bottom: 1px solid rgba(20,20,20,0.06);
}.ytp-metric{
  flex: 1;
  text-align: center;
  padding: 0 20px;
  position: relative;
}.ytp-metric +.ytp-metric::before{
  content: '';
  position: absolute;
  left: 0; top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(20,20,20,0.08);
}.ytp-metric__number{
  display: block;
  font-family: ui-serif, Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(20,20,20,0.85);
  line-height: 1.1;
}.ytp-metric__label{
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.40);
  margin-top: 8px;
  line-height: 1.4;
}.ytp-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 32px 0 8px 0;
  justify-content: center;
}.ytp-pill{
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid rgba(20,20,20,0.12);
  border-radius: 100px;
  background: transparent;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(20,20,20,0.50);
  cursor: pointer;
  transition: all 0.2s ease;
}.ytp-pill:hover{
  border-color: rgba(20,20,20,0.30);
  color: rgba(20,20,20,0.75);
}.ytp-pill--active{
  background: rgba(20,20,20,0.07);
  border-color: rgba(20,20,20,0.20);
  color: rgba(20,20,20,0.80);
}.ytp-section-label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.30);
  padding: 32px 0 16px 0;
  border-bottom: 1px solid rgba(20,20,20,0.06);
  margin-bottom: 24px;
}.ytp-quote{
  margin: 48px auto;
  padding: 0 24px;
  max-width: 640px;
  text-align: center;
  border: none;
}.ytp-quote p{
  font-family: ui-serif, Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.55;
  color: rgba(20,20,20,0.65);
  margin: 0 0 14px 0;
}.ytp-quote cite{
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.35);
}.ytp-card__meta{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}.ytp-duration{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(20,20,20,0.35);
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: 100px;
  flex-shrink: 0;
}.ytp-duration--operated{
  border-color: rgba(20,20,20,0.12);
  color: rgba(20,20,20,0.45);
  background: rgba(20,20,20,0.025);
}.ytp-card--operated{ border-left: 2px solid rgba(20,20,20,0.10); }.ytp-howwework{
  margin: 16px 0 32px 0;
  padding: 36px 0;
  border-top: 1px solid rgba(20,20,20,0.06);
  border-bottom: 1px solid rgba(20,20,20,0.06);
}.ytp-hww-h2{
  font-family: ui-serif, Georgia, serif !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.35 !important;
  color: rgba(20,20,20,0.85) !important;
  margin: 8px 0 12px 0 !important;
}.ytp-hww-p{
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(20,20,20,0.50) !important;
  margin: 0 0 24px 0 !important;
  max-width: 640px;
}.ytp-steps{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
}.ytp-step{
  display: flex;
  align-items: baseline;
  gap: 12px;
}.ytp-step__num{
  font-family: ui-serif, Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: rgba(20,20,20,0.12);
  line-height: 1;
  flex-shrink: 0;
}.ytp-step__text{
  font-size: 13px;
  font-weight: 500;
  color: rgba(20,20,20,0.55);
  line-height: 1.35;
}.ytp-card[data-sector]{ transition: opacity 0.3s ease, transform 0.3s ease; }

@media (max-width: 680px){.ytp-metrics{ flex-wrap: wrap; gap: 20px 0; padding: 28px 0; }.ytp-metric{ flex: 0 0 50%; padding: 8px 16px; }.ytp-metric +.ytp-metric::before{ display: none; }.ytp-metric__number{ font-size: 26px; }.ytp-filters{ gap: 6px; padding: 24px 0 4px 0; }.ytp-pill{ padding: 6px 14px; font-size: 11px; }.ytp-quote{ margin: 32px auto; }.ytp-quote p{ font-size: 17px; }.ytp-steps{ grid-template-columns: 1fr; gap: 10px; }.ytp-card__meta{ flex-direction: column; gap: 6px; }.ytp-marquee{ padding: 20px 0; }.ytp-marquee__fade{ width: 40px; }.ytp-mlogo{ padding: 0 20px; }.ytp-mlogo--img{ padding: 0 20px; height: 18px; }.ytp-marquee__track{ animation-duration: 30s; }}

@media (max-width: 520px){.ytp-metric__number{ font-size: 22px; }.ytp-metric__label{ font-size: 10px; }.ytp-hww-h2{ font-size: 18px !important; }}

/* ------------------------------------------------------------------ base
   Squarespace supplied Roboto as the body font and the authored stylesheet never
   declares one, so without this the build falls back to a browser default.
   margin:0 belongs here too. Dropping it once left the UA default 8px live sitewide,
   which inset the frame and let content scroll through two strips of page texture.
   Set font and margin here. Never background: the framework owns --ytp-body-bg and
   its gradient, and an equal-specificity body rule later in the file wipes both. */
body{font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;margin:0}

/* ------------------------------------------------------------------ navigation
   Squarespace rendered the original header; this replaces it, matching the live
   layout: oversized wordmark on the left with the links beside it, not opposite.
   The horizontal padding tracks whatever the content column actually starts at, so the
   wordmark sits on the same optical line as the text it heads. That total is the shell
   gutter plus the frame border plus .ytp-section padding, and all three change at
   different breakpoints, so it is a variable rather than a number:
     above 520px   16 + 1 + 28 = 45
     to 520px      16 + 1 + 16 = 33
     to 420px       0 + 0 + 16 = 16   (shell gutter and frame border both drop)
   Hard-coding one value here is what left the wordmark hanging outside the column. */
:root{--ytp-gutter:45px}
/* A page that sets its own --ytp-max moves the nav with it. See resume.html. */
.ytp-nav{position:sticky;top:0;z-index:100;background:var(--ytp-body-bg,#efe9e2);
  backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(20,20,20,.08)}
/* The frame is capped at --ytp-max INSIDE .ytp-shell's 16px gutter, so the nav's own cap
   has to include that gutter or the two centre on different boxes and drift apart on wide
   screens while matching on narrow ones. The +34 is the shell's two 16px gutters plus the
   frame's two 1px borders. box-sizing matters here: without it the padding sits outside
   the cap and the centring is off by the padding again. */
.ytp-nav__inner{box-sizing:border-box;max-width:calc(var(--ytp-max,1120px) + 34px);margin:0 auto;
  padding:14px var(--ytp-gutter);display:flex;align-items:baseline;gap:34px;flex-wrap:wrap}
.ytp-nav__brand{font-size:40px;font-weight:400;letter-spacing:-.02em;line-height:1;
  text-decoration:none;color:#111}
.ytp-nav__links{display:flex;gap:26px;flex-wrap:wrap}
/* No opacity on text anywhere. It makes the real colour unknowable and is how most of
   the contrast failures below got in. */
.ytp-nav__link{text-decoration:none;color:#323130;font-size:15px;padding:6px 2px}
.ytp-nav__link:hover{color:#111;text-decoration:underline}
/* The nav button is injected into every page, including pages that carry their own complete
   stylesheet and define .ytp-btn--primary differently. On one of them that resolved to a
   transparent background behind white text. This component owns its own appearance. */
.ytp-nav .ytp-nav__cta{margin-left:auto;font-size:14px;padding:8px 16px;white-space:nowrap;
  background:#1b3a2b !important;color:#fff !important;border:1px solid #1b3a2b !important;
  border-radius:999px;text-decoration:none;opacity:1 !important}
.ytp-nav .ytp-nav__cta:hover{background:#163022 !important;border-color:#163022 !important}
@media (max-width:760px){.ytp-nav__cta{margin-left:0}}
@media (max-width:640px){
  .ytp-nav__inner{padding:12px var(--ytp-gutter);gap:8px}
  .ytp-nav__brand{font-size:28px}
  .ytp-nav__links{gap:14px}
  .ytp-nav__link{font-size:14px}
}
@media (max-width:520px){:root{--ytp-gutter:33px}}
@media (max-width:420px){:root{--ytp-gutter:16px}}

.ytp-skip{position:absolute;left:-9999px;top:0;background:#1b3a2b;color:#fff;padding:10px 16px;
  z-index:200;text-decoration:none}
.ytp-skip:focus{left:0}

/* ------------------------------------------------------------------ measure
   The authored CSS set no max-width on body copy, so case-study prose ran to about
   143 characters a line. Capped in em, not px: one px cap across a 13px to 18px size
   range leaves the smaller sizes long. Roboto averages 0.45em a character in this
   corpus, so 34em is roughly 75 characters at every size. `ch` is not a character
   count here: Roboto's zero is 25 percent wider than its mean prose advance. */
.ytp-shell p,.ytp-shell li,.ytp-lede,.ytp-subhead,
.ytp-situation p,.ytp-situation li,.ytp-footnote,.ytp-hww-p{max-width:34em}
.ytp-shell .ytp-grid-2 p,.ytp-shell .ytp-grid-3 p,.ytp-card p,
.ytp-shell .ytp-grid-2 li,.ytp-shell .ytp-grid-3 li,.ytp-card li{max-width:none}

/* ------------------------------------------------------------------ contrast
   WCAG 2.1 AA wants 4.5:1 for body text. Every value below was measured against the
   surface it actually renders on: frame #fbf7f2, card #fffefe. The two replacements
   are both already in the palette: #5e5d5b is --ytp-muted flattened (6.19:1 on the
   frame) and #706f6d is the lightest tone that still passes (4.71:1). */
.ytp-step__num,.ytp-step__text,.ytp-section-label,.ytp-duration,.ytp-quote cite,
.ytp-metric__label,.ytp-pill,.ytp-duration--operated{color:#5e5d5b}
.ytp-hww-p{color:#5e5d5b !important}
/* Page-level blocks dim these with opacity on top of an already light colour.
   Raised specificity rather than editing the same rule in 32 copies of the block. */
:root #top .ytp-hero .ytp-subhead,:root #top .ytp-hero .ytp-callout,
:root #top .ytp-hero .ytp-hero-bullets,:root #top .ytp-card .ytp-lede,
:root #top .ytp-meta-inline,:root #top .ytp-tag-note,:root #top .ytp-backed-by,
:root #top .ytp-muted,:root #top .ytp-sep,
:root #top .ytp-brandline,:root #top .ytp-wordmark,:root #top .ytp-label,
:root #top .ytp-duration,:root #top .ytp-meta-label,:root #top .ytp-section-label,
:root #top .ytp-metric__label,:root #top .ytp-pill,:root #top .ytp-pill:hover,
:root #top .ytp-pill--active,:root #top .ytp-step__num,:root #top .ytp-step__text,
:root #top .ytp-quote cite,:root #top .ytp-duration--operated,
:root #top .ytp-img-caption,:root #top .ytp-stat-label{opacity:1;color:#5e5d5b}

/* Non-text contrast, WCAG 1.4.11, 3:1. Control edges were at 1.28:1, which is to say
   invisible. The form's focus ring was fainter still, on the only form on the site. */
.ytp-input,.ytp-btn:not(.ytp-btn--primary),.ytp-pill{border-color:rgba(20,20,20,.42)}
.ytp-input:focus{outline:2px solid #1b3a2b;outline-offset:2px;border-color:#1b3a2b;box-shadow:none}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #1b3a2b;outline-offset:3px;border-radius:2px}

/* ------------------------------------------------------------------ motion
   The client marquee runs a 40s loop that starts on its own and pauses only on hover,
   which a keyboard or touch visitor cannot reach. WCAG 2.2.2. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ytp-marquee__track{animation:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
.ytp-marquee:focus-within .ytp-marquee__track{animation-play-state:paused}
/* The fade referenced --ytp-bg, which is only ever defined on one page, so elsewhere it
   fell back to a colour the frame does not use and showed a visible edge. */
.ytp-marquee__fade--left{background:linear-gradient(to right,var(--ytp-frame-bg,#fbf7f2),transparent)}
.ytp-marquee__fade--right{background:linear-gradient(to left,var(--ytp-frame-bg,#fbf7f2),transparent)}

/* ------------------------------------------------------------------ rhythm
   .ytp-section h2 has margin-top:0, so a heading in the middle of a section gets less
   space above it than below, and reads as belonging to the paragraph it follows.
   Scoped to headings that actually follow content, so section-opening headings and
   label-then-heading pairs are untouched. */
.ytp-section :is(p,ul,ol,table,blockquote,.ytp-table-wrap,.ytp-quote) + :is(h2,h3,h4){margin-top:44px}
/* Unitless 2 invalidates the whole shorthand, so this fell back to the UA default
   1em 0. It is the first element on every case study. */
.ytp-brandline{margin:0 0 10px 0}

/* ------------------------------------------------------------------ layout
   The frame ran to the window edge between 421px and 1119px, clipping its own radius
   and shadow. Phones keep the edge-to-edge treatment. */
.ytp-shell{padding:0 16px 42px}
/* max-width without overflow-x:hidden. Hiding overflow at the root would silently clip
   a future regression instead of letting it show up. */
html,body{max-width:100%}
img,svg,video,table,pre{max-width:100%;height:auto}
@media (max-width:420px){
  .ytp-shell{padding:0 0 42px}
  .ytp-shell p,.ytp-shell li,.ytp-lede,.ytp-subhead{max-width:none}
  .ytp-frame{border-radius:0;border-left:none;border-right:none}
}

/* ================================================================== PREMIUM PASS
   2026-10-08. See ops/engagements/premium-repositioning_v1.md.

   The page carried eleven type sizes at phone width, seven of them between 12 and 17px,
   and a single spacing band of 12 to 34px for every relationship on it. No level of
   hierarchy resolved in half a second, so it read as a template filled in. Five sizes,
   four spacing steps, three ink tones.

   This block is last in the file on purpose: it is the system, and it outranks the
   per-page styles the pages carry themselves. */

/* ------------------------------------------------------------ ink
   Nine paragraph styles rendered as a grey. There was no black prose anywhere on the
   site, which on its own reads as a draft. Opacity is never used on text: it makes the
   real colour unknowable, which is how the old contrast failures got in. */
.ytp-shell p,.ytp-shell li,.ytp-lede,.ytp-subhead,
.ytp-shell h1,.ytp-shell h2,.ytp-shell h3,.ytp-shell h4{color:#141414}
.ytp-card h4,.ytp-situation h4{margin:0 0 10px 0;font-weight:700;font-size:16px}

/* The hero's bottom padding and the first section's top padding both come off the same
   spacing scale and then stack, so the gap under the hero was 112px on a phone against a
   28px rhythm inside it: four steps of nothing, which reads as a hole rather than a break.
   The section gives up its top padding, not the hero: the hero's own padding is what holds
   its tinted band clear of the headline's descenders, and zeroing that cropped the band. */
.ytp-hero + .ytp-section{padding-top:0}
.ytp-card p,.ytp-card li,.ytp-list li,.ytp-outcome p,.ytp-situation p{color:#3a3a38}
.ytp-footnote,.ytp-label,.ytp-footer-title,.ytp-duration,.ytp-section-label{color:#5e5d5b}
/* The accessibility pass above pinned these to #5e5d5b at (1,3,0) to defeat the
   page-level opacity dimming. That was right then and is wrong now: it is why there was
   no black prose anywhere. Same specificity, later in the file, so these win. Only the
   genuine metadata stays grey. */
:root #top .ytp-hero .ytp-subhead,:root #top .ytp-hero .ytp-callout,
:root #top .ytp-hero .ytp-hero-bullets,:root #top .ytp-wordmark,
:root #top .ytp-muted{opacity:1;color:#141414}
:root #top .ytp-card .ytp-lede,:root #top .ytp-meta-inline,
:root #top .ytp-tag-note,:root #top .ytp-backed-by{opacity:1;color:#3a3a38}
#top .ytp-outcome p,#top .ytp-hero .ytp-callout,
#top .ytp-hero .ytp-subhead,#top .ytp-hero .ytp-hero-bullets{opacity:1}
.ytp-section > .ytp-lede,.ytp-section > .ytp-subhead,.ytp-hero-record{color:#3a3a38}
.ytp-section > .ytp-subhead{color:#141414}
/* An in-prose link was set lighter than the prose around it. Backwards: the link is the
   emphasis, so it carries the darkest ink and the underline does the signalling. */
.ytp-link{color:#141414;border-bottom-color:rgba(20,20,20,.40)}
.ytp-section{border-top:none}

/* ------------------------------------------------------------ measure
   The standfirst is set LARGER than body here, not smaller, so it needs the narrower
   column to stay distinct. Sharing body's 34em is why it read as another paragraph
   rather than as an introduction. */
.ytp-subhead,.ytp-section > .ytp-lede{max-width:28em}

/* ------------------------------------------------------------ hero
   Weight was the loudest thing on the page. A 600-weight serif resolves to Georgia Bold
   on Android and reads as shouting, not as scale. 400 at a larger size is the trade.
   The 15em cap is the whole desktop answer: it leaves roughly 224px of deliberate empty
   column beside the largest element on the page, and nothing else on the site does that. */
#top .ytp-hero h1,.ytp-hero h1{font-weight:400;letter-spacing:-.015em;text-wrap:balance}
#top .ytp-hero .ytp-hero-record{font-size:16px;line-height:1.6;color:#3a3a38;
  max-width:34em;margin:28px 0 0}
#top .ytp-hero .ytp-hero-route,.ytp-shell .ytp-hero-route{font-size:20px;line-height:1.5;
  color:#141414;margin:36px 0 0}
/* The single route out of the first viewport. A plain text link is not a weaker button,
   it is the register a single-partner practice actually uses. 10px block padding takes
   the tap target to 46px without drawing a box. */
.ytp-hero-route .ytp-link,.ytp-closing-alt .ytp-link{display:inline;padding:12px 0;
  border-bottom:none;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em}
.ytp-closing-alt{margin-top:24px}

/* ------------------------------------------------------------ wordmark
   The practice's own name was set in two typefaces on one page: sans in the nav, serif
   bold at -0.03em in prose, where it read as a font-loading failure rather than a logo.
   One setting, matching the nav, which is the instance a visitor sees first. */
.ytp-wordmark{font-family:inherit;font-weight:500;letter-spacing:0}

/* ------------------------------------------------------------ footer frame
   It was a sibling of .ytp-shell with no gutter, so from 421 to 1152px it ran 16px wider
   on each side than the panel above it, and its text column started 12px further in.
   Three different left edges stacked vertically. The +34 is the shell's two 16px gutters
   plus the frame's two 1px borders, the same arithmetic .ytp-nav__inner uses. */
.ytp-sitefooter{box-sizing:border-box;max-width:calc(var(--ytp-max,1120px) + 34px);
  padding:0 16px;margin:0 auto 42px}
.ytp-footer-nav{display:flex;flex-wrap:wrap;gap:28px;grid-template-columns:none}
.ytp-footer-link{display:inline-block;border-bottom:none;width:auto;margin:0}
.ytp-footer-link:hover,.ytp-footer-link:focus-visible{text-decoration:underline;
  text-underline-offset:.2em}

/* ------------------------------------------------------------ desktop
   Space above a heading becomes several times the space below it, so the heading
   unambiguously belongs to what follows. That ratio is the mechanism, not the values. */
@media (min-width:600px){
  .ytp-hero{padding:72px var(--ytp-gutter) 88px}
  #top .ytp-hero h1,.ytp-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;
    margin:0 0 32px;max-width:15em}
  #top .ytp-hero .ytp-subhead,.ytp-hero .ytp-subhead{font-size:22px;line-height:1.5;
    margin:0 0 32px}
  #top .ytp-hero .ytp-hero-record,.ytp-hero .ytp-hero-record{font-size:18px;max-width:38em}
  #top .ytp-hero .ytp-hero-route,.ytp-shell .ytp-hero-route{font-size:20px}
  .ytp-section{padding-block:72px}
  .ytp-section h2{font-size:30px;font-weight:400;letter-spacing:-.01em;line-height:1.2;
    margin:0 0 10px}
  .ytp-section > .ytp-lede,.ytp-section > .ytp-subhead{font-size:20px;line-height:1.5}
}

/* ------------------------------------------------------------ phone
   600 replaces the old 520 breakpoint: 520 corresponds to no device, and 600 pulls phone
   landscape and small foldables onto the phone scale instead of leaving them on desktop
   padding. Sizes are 13 / 16 / 20 / 25 / 32, a 1.25 ratio with the display size
   deliberately off the scale. */
@media (max-width:599px){
  :root{--ytp-gutter:20px}

  /* The nav was 132px tall at 390 and 175px at 320, sticky, carrying no information, and
     nothing in it was a valid tap target: links measured 29px against the 24px WCAG 2.5.8
     floor only because of their line box, with 18px between adjacent targets. At 320 it
     broke into four rows with the button orphaned. 60px, three targets, 46px each.
     Not a hamburger: six destinations do not justify hiding six destinations, and it is
     the most templated control on the mobile web. */
  .ytp-nav__inner{padding:7px var(--ytp-gutter);gap:20px;flex-wrap:nowrap;align-items:center}
  .ytp-nav__brand{font-size:20px;font-weight:500;letter-spacing:-.02em}
  .ytp-nav__links{gap:20px;margin-left:auto;flex-wrap:nowrap}
  .ytp-nav__link{font-size:16px;line-height:1.5;padding:11px 0}
  .ytp-nav__link--wide{display:none}

  /* Two 42px bands of body texture sat between the panels. At phone widths the panels are
     edge to edge, so each band rendered as a full-width strip of a 22px two-tone check,
     indistinguishable from a transparency checkerboard, and one of them was the last
     thing on the page. */
  body{background-image:none}

  .ytp-hero{padding:32px var(--ytp-gutter) 56px}
  #top .ytp-hero h1,.ytp-hero h1{font-size:32px;line-height:1.08;margin:0 0 28px}
  #top .ytp-hero .ytp-subhead,.ytp-hero .ytp-subhead{font-size:20px;line-height:1.5;
    margin:0 0 28px;max-width:none}
  #top .ytp-hero .ytp-hero-record,.ytp-hero .ytp-hero-record{font-size:16px;margin-top:28px}
  #top .ytp-hero .ytp-hero-route,.ytp-shell .ytp-hero-route{font-size:20px;margin-top:36px}

  /* 56px of padding gives 112px between sections, up from 69. With that much space the
     hairline rule is redundant, and a 1px line across a full-bleed phone screen every
     500px is the clearest template signal on the page. */
  .ytp-section{padding:56px var(--ytp-gutter);border-top:none}
  .ytp-section h2{font-size:25px;font-weight:400;letter-spacing:-.01em;line-height:1.2;
    margin:0 0 8px}
  .ytp-section > .ytp-lede,.ytp-section > .ytp-subhead{font-size:20px;line-height:1.5;
    margin:0 0 28px}
  .ytp-shell p,.ytp-shell li{font-size:16px;line-height:1.6}
  .ytp-shell p{margin:0 0 20px}
  .ytp-card h3,.ytp-outcome h3,.ytp-situation h3,
  .ytp-card h4,.ytp-outcome h4,.ytp-situation h4{font-family:ui-serif,Georgia,serif;
    font-size:20px;font-weight:400;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px}
  .ytp-card,.ytp-grid-2,.ytp-grid-3{gap:20px}
  .ytp-card{padding:20px}
  .ytp-list li{margin:0 0 8px}

  /* Three ornament signals on a 12px label: uppercase, 800 weight, and 0.08em tracking,
     at 4.9:1. Space already separates the groups. */
  .ytp-shell .ytp-footnote,.ytp-shell .ytp-label,.ytp-shell .ytp-footer-title,
  .ytp-shell .ytp-duration,.ytp-shell .ytp-section-label,
  .ytp-footnote,.ytp-label,.ytp-footer-title,.ytp-duration,.ytp-section-label{
    font-size:13px;line-height:1.45;font-weight:500;text-transform:none;letter-spacing:0}
  .ytp-shell .ytp-footnote{color:#5e5d5b}

  .ytp-btn{font-size:16px;line-height:1.5;padding:12px 20px}
  .ytp-footer-link{font-size:16px;line-height:1.6;padding:10px 0}
  .ytp-sitefooter__frame{padding:40px var(--ytp-gutter)}
  .ytp-footer-nav{gap:4px 28px}
}

/* Two inline diagrams are authored on a 920-unit canvas with 12px labels, and the svg carries
   style="width:100%", so the labels shrink with the column: 6px at 600 wide, 8px at 768, 4px
   on a phone. That is not small type, it is no type. Below the width where the figure can
   hold the canvas at 1:1 the diagram keeps its authored size and the figure scrolls, which is
   what wide tables on this site already do. Measured: 1:1 and zero page overflow at 320, 390
   and 599; 1.09 scale unaided at 1280. */
@media (max-width:1060px){
  .ytp-figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
  :root #top .ytp-figure > svg{width:920px !important;max-width:none;height:auto}
}

@media (max-width:420px){
  :root{--ytp-gutter:16px}
  /* Panels butt together and the footer runs to the bottom of the screen, which is the
     correct reading of a full-bleed layout. */
  .ytp-shell{padding:0 0 0}
  .ytp-sitefooter{padding:0;margin-bottom:0}
  .ytp-sitefooter__frame{border-radius:0;border-left:none;border-right:none}
}

/* ------------------------------------------------------------ targets and floor
   Audited by rendering all 33 pages at four widths, not by reading the CSS.
   WCAG 2.5.8 AA wants 24px on a target; 44px is the comfortable figure and costs
   nothing here because these are all inline-block already. In-prose links are exempt
   and keep their natural line box. */
/* Grid and flex children default to min-width:auto, so a long unbreakable word or a
   wide child sizes the track and pushes the page sideways. Found by rendering at 320,
   not by reading the CSS. */
.ytp-grid-2 > *,.ytp-grid-3 > *,.ytp-method-col > *,.ytp-method-grid > *,
.ytp-outcomes-strip > *,.ytp-steps > *,.ytp-footer-nav > *,
.ytp-card > *,.ytp-step > *,.ytp-situation > *{min-width:0}
.ytp-card.ytp-step{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px 14px;
  align-items:start}
.ytp-card.ytp-step > .ytp-stepnum{grid-column:1;grid-row:1}
.ytp-card.ytp-step > h3{grid-column:2;grid-row:1;align-self:center;margin:0}
.ytp-card.ytp-step > p{grid-column:2;grid-row:2;margin:0}
/* The portfolio page's own step is a different component: a number and one line of text.
   It keeps its flex row and only needs to be allowed to shrink. */
.ytp-steps .ytp-step > .ytp-step__text{min-width:0}
.ytp-shell p,.ytp-shell li,.ytp-shell h1,.ytp-shell h2,.ytp-shell h3,.ytp-shell h4{overflow-wrap:break-word}
.ytp-press-item{display:inline}
.ytp-press-outlet{font-size:13px;font-weight:500;color:#5e5d5b;white-space:nowrap}

.ytp-nav__brand{display:inline-block;padding:10px 0}
.ytp-footer-link{padding:10px 0}
.ytp-details__summary{padding:12px 0}
.ytp-input{min-height:44px;padding:10px 12px;box-sizing:border-box}
.ytp-textarea{min-height:110px}
.ytp-pill{min-height:34px;padding:8px 18px}

/* Nothing on this site is small enough to need to be under 13px. Ten and eleven px
   labels were the ornament the page used instead of hierarchy, and the space steps
   above now do that job. */
:root #top .ytp-metric__label,:root #top .ytp-pill,:root #top .ytp-duration,
:root #top .ytp-label,:root #top .ytp-footnote,:root #top .ytp-footer-title,
:root #top .ytp-section-label,:root #top .ytp-brandline,:root #top .ytp-img-caption,
:root #top .ytp-stat-label,:root #top .ytp-meta-label,:root #top .ytp-snapshot-k,
:root #top .ytp-cardbox-k,:root #top .ytp-thesis-title,:root #top .ytp-quote cite,
:root #top .ytp-outcome-k,
:root #top .ytp-wordmark,
/* Second pass, 2026-10-08: the allowlist above was built from the pages that were open at
   the time, so nine classes kept their 10 to 12px. Four of them are links, which made them
   undersized tap targets as well as unreadable. Table headers and flow-step labels are the
   two that carry meaning a reader has to parse. */
:root #top .ytp-table th,:root #top .ytp-table td,
:root #top .ytp-flowk,:root #top .ytp-figure-title,
:root #top .ytp-badge,:root #top .ytp-investor-tag,:root #top .ytp-press-logo,
:root #top .ytp-role,:root #top .ytp-tag-note,:root #top .ytp-backed-by,
.ytp-table th,.ytp-table td,.ytp-flowk,.ytp-figure-title,.ytp-badge,.ytp-investor-tag,
.ytp-press-logo,.ytp-role,.ytp-tag-note,.ytp-backed-by,
.ytp-metric__label,.ytp-pill,.ytp-duration,.ytp-label,.ytp-footnote,
.ytp-footer-title,.ytp-section-label,.ytp-brandline,.ytp-img-caption,
.ytp-stat-label,.ytp-meta-label,.ytp-snapshot-k,.ytp-cardbox-k,
.ytp-thesis-title,.ytp-quote cite,.ytp-outcome-k{font-size:13px;letter-spacing:0}
:root #top .ytp-metric__label,:root #top .ytp-section-label,
:root #top .ytp-footer-title,:root #top .ytp-label,
.ytp-metric__label,.ytp-section-label,.ytp-footer-title,.ytp-label{
  text-transform:none;font-weight:500}

@media (max-width:359px){
  .ytp-nav__inner{padding:7px var(--ytp-gutter);gap:16px}
  #top .ytp-hero h1,.ytp-hero h1{font-size:32px}
  #top .ytp-hero .ytp-subhead,.ytp-hero .ytp-subhead{font-size:18px}
  .ytp-section{padding:48px var(--ytp-gutter)}
  .ytp-section h2{font-size:23px}
  .ytp-section > .ytp-lede,.ytp-section > .ytp-subhead{font-size:18px}
  .ytp-shell p,.ytp-shell li{font-size:15px}
  .ytp-card h3,.ytp-outcome h3,.ytp-situation h3,
  .ytp-card h4,.ytp-outcome h4,.ytp-situation h4{font-size:18px}
}