/* ---------------------------------------------------------
   kalvinyoung.com
   Visual language adapted from the Whitespace template
   (Envato licence certificate CA6JNZHGRQ), rebuilt by hand.
   Raleway headings, Open Sans body, amber #f5af0c accent.
   --------------------------------------------------------- */

:root {
  --ink:        #303238;   /* headings */
  --body:       #515359;   /* body text */
  --muted:      #9da1ad;   /* meta, captions */
  --accent:     #f5af0c;   /* amber */
  --accent-dk:  #d8980a;
  --line:       #e5e5e5;
  --tint:       #f7f7f9;
  --white:      #ffffff;
  --maxw:       760px;
  --wide:       1140px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */

header {
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
}

.head-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.wordmark span { color: var(--accent); }

nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

nav a {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: #23252a center/cover no-repeat;
  color: var(--white);
  padding: 120px 0 128px;
  text-align: center;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,21,24,0.62), rgba(20,21,24,0.78));
}

.hero .wrap {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.kicker {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.hero h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 0 0 22px;
}

.hero p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
  margin: 0 auto 14px;
  max-width: 640px;
}

.hero .meta {
  color: rgba(255,255,255,0.58);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-img { display: none; }   /* photo is now the hero background */

/* ---------- typography ---------- */

main {
  padding: 72px 0 40px;
}

h1, h2, h3, h4 {
  font-family: 'Raleway', sans-serif;
  color: var(--ink);
  letter-spacing: 0.01em;
}

main h1 {
  font-size: 38px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 20px;
}

h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 64px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 3px;
  background: var(--accent);
}

h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  margin: 40px 0 12px;
}

p { margin: 0 0 20px; }

a {
  color: var(--accent-dk);
  text-decoration: none;
  border-bottom: 1px solid rgba(245,175,12,0.45);
}

a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

strong { color: var(--ink); font-weight: 600; }

/* ---------- feature row ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 8px 0 8px;
}

.feature h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.feature p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.feature .num {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ---------- cards ---------- */

.card {
  display: block;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--white);
  padding: 30px 32px;
  margin: 0 0 20px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}

.card:hover {
  box-shadow: 0 10px 26px rgba(48,50,56,0.09);
  transform: translateY(-2px);
  border-bottom-color: var(--line);
}

.card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--body);
}

.card .meta { margin-top: 12px; }

/* ---------- images & figures ---------- */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 36px 0;
}

figure img {
  width: 100%;
  border: 1px solid var(--line);
}

figure .diagram {
  background: var(--tint);
  padding: 24px;
  border: 1px solid var(--line);
}

figcaption {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

/* ---------- answer block ---------- */

.answer {
  background: var(--tint);
  border-left: 3px solid var(--accent);
  padding: 22px 26px;
  margin: 28px 0;
}

.answer strong {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: 8px;
}

.answer p { margin: 0; }

/* ---------- callout ---------- */

.callout {
  border: 1px solid var(--line);
  background: var(--tint);
  padding: 24px 28px;
  margin: 40px 0;
  font-size: 15px;
  line-height: 1.7;
}

.callout p:last-child { margin-bottom: 0; }

/* ---------- tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 15px;
}

th, td {
  border: 1px solid var(--line);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--tint);
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- code ---------- */

code {
  background: var(--tint);
  border: 1px solid var(--line);
  padding: 1px 6px;
  font-size: 14px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

pre {
  background: var(--tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}

pre code { background: none; border: 0; padding: 0; }

/* ---------- lists ---------- */

ul, ol { padding-left: 22px; margin: 0 0 20px; }
li { margin-bottom: 9px; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 48px 0;
}

.meta {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- video ---------- */

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 32px 0;
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .features { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 84px 0 88px; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 16px; }
  main { padding: 52px 0 28px; }
  main h1 { font-size: 28px; }
  h2 { margin-top: 48px; }
  .head-inner { padding: 16px 20px; gap: 14px; }
  nav { gap: 18px; }
  .card { padding: 24px; }
}

/* ---------- hero avatar & sign-off ---------- */

.avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 26px;
  border: 4px solid rgba(255,255,255,0.9);
  box-shadow: 0 6px 22px rgba(0,0,0,0.3);
}

.signoff { margin-top: 34px; }

.signoff .rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
  margin: 0 auto 20px;
}

.signoff .name {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 6px;
}

.signoff .role {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.62);
  margin: 0;
}

@media (max-width: 640px) {
  .avatar { width: 104px; height: 104px; margin-bottom: 20px; }
}

/* ---------- call to action band ---------- */

.band {
  background: var(--tint);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  padding: 34px 36px;
  margin: 64px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.band-text { flex: 1 1 340px; }

.band .band-h {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: none;
  border: 0;
  padding: 0;
  margin: 0 0 10px;
}

.band .band-h::after { display: none; }

.band p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: #2b2206;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 0;
  white-space: nowrap;
  transition: background .18s ease;
}

.btn:hover {
  background: var(--accent-dk);
  color: #2b2206;
  border: 0;
}

@media (max-width: 640px) {
  .band { padding: 26px 24px; }
  .band .band-h { font-size: 21px; }
  .btn { width: 100%; text-align: center; }
}

/* ---------- on-site photo grid ---------- */

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 8px 0 28px;
}

.tile {
  margin: 0;
}

.tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  transition: filter .25s ease;
}

.tile:hover img { filter: brightness(1.06) saturate(1.05); }

.tile figcaption {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

.tile figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- dark footer ---------- */

footer {
  margin-top: 88px;
  background: #303238;
  color: #9da1ad;
  font-size: 14px;
}

footer .wrap { max-width: var(--wide); }

.foot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 52px;
}

.foot-col h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6f737d;
  margin: 0 0 22px;
}

.foot-col p { margin: 0 0 14px; }

footer a {
  color: #cfd2d8;
  border-bottom: 1px solid #484a52;
}

footer a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* contact list */

.foot-col dl {
  margin: 0;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 6px 10px;
  font-size: 14px;
}

.foot-col dt {
  font-style: italic;
  color: #6f737d;
}

.foot-col dd {
  margin: 0;
  color: #cfd2d8;
  line-height: 1.6;
}

/* follow */

footer .social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

footer .social a {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.foot-note {
  font-size: 13px;
  line-height: 1.6;
  color: #6f737d;
}

/* topic chips */

.tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags li {
  font-size: 12.5px;
  font-style: italic;
  color: #9da1ad;
  background: #3a3c43;
  border: 1px solid #45474c;
  padding: 4px 11px;
  margin: 0;
}

/* latest post */

.foot-post {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 0;
  margin-bottom: 14px;
}

.foot-post:hover { border: 0; }

.foot-post img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex: 0 0 64px;
}

.foot-post strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #cfd2d8;
}

.foot-post:hover strong { color: var(--accent); }

.foot-post em {
  display: block;
  font-size: 12.5px;
  color: #6f737d;
  margin-top: 4px;
}

/* bottom bar */

.foot-bar {
  background: #292b30;
  border-top: 1px solid #3a3c43;
  padding: 26px 0 30px;
}

.footnote {
  font-size: 12.5px;
  line-height: 1.65;
  color: #696d76;
  margin: 0 0 10px;
}

.foot-bar p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 44px; }
}

/* =========================================================
   MOTION
   Hero layers animate in on load, everything else fades up
   as it enters the viewport. No library, no jQuery.
   Fully disabled for anyone who asks for reduced motion.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ----- hero, animates in on load, layer by layer ----- */

  .hero .avatar,
  .hero .kicker,
  .hero h1,
  .hero p,
  .hero .signoff {
    opacity: 0;
    transform: translateY(18px);
    animation: layerIn .85s cubic-bezier(.22,.61,.36,1) forwards;
  }

  .hero .avatar   { animation-delay: .10s; transform: translateY(0) scale(.9); }
  .hero .kicker   { animation-delay: .30s; }
  .hero h1        { animation-delay: .42s; }
  .hero p         { animation-delay: .58s; }
  .hero .signoff  { animation-delay: .74s; }

  @keyframes layerIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ----- scroll reveal ----- */

  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }

  .reveal.seen {
    opacity: 1;
    transform: none;
  }

  /* stagger children inside a grid */
  .grid .reveal:nth-child(2),
  .features .reveal:nth-child(2) { transition-delay: .09s; }
  .grid .reveal:nth-child(3),
  .features .reveal:nth-child(3) { transition-delay: .18s; }
  .grid .reveal:nth-child(4)     { transition-delay: .27s; }

  /* ----- richer hovers ----- */

  .tile img {
    transform: scale(1);
    transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .35s ease;
  }

  .tile:hover img { transform: scale(1.05); }

  .tile { overflow: hidden; }
  .tile figure, .tile > img { overflow: hidden; }

  .btn { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(245,175,12,0.32); }

  .foot-post img { transition: transform .5s ease; }
  .foot-post:hover img { transform: scale(1.06); }

  .wordmark, nav a, .social a, .tags li { transition: color .22s ease, border-color .22s ease, background .22s ease; }
  .tags li:hover { background: #45474c; color: #cfd2d8; }
}

/* the image must not escape its square on hover */
.tile { position: relative; }
.tile img { display: block; }

/* ---------- inner page banner ---------- */

.page-hero {
  position: relative;
  background: #23252a center/cover no-repeat;
  color: var(--white);
  padding: 74px 0 78px;
  text-align: center;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,21,24,0.58), rgba(20,21,24,0.80));
}

.page-hero .wrap {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.page-hero h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 16px;
}

.page-hero p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.84);
  margin: 0 auto;
  max-width: 600px;
}

@media (prefers-reduced-motion: no-preference) {
  .page-hero .kicker,
  .page-hero h1,
  .page-hero p {
    opacity: 0;
    transform: translateY(16px);
    animation: layerIn .8s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .page-hero .kicker { animation-delay: .08s; }
  .page-hero h1      { animation-delay: .20s; }
  .page-hero p       { animation-delay: .34s; }
}

@media (max-width: 640px) {
  .page-hero { padding: 54px 0 58px; }
  .page-hero h1 { font-size: 29px; }
  .page-hero p { font-size: 16px; }
}

.page-hero--slim { padding: 62px 0 66px; }
.page-hero--slim h1 { font-size: 34px; margin-bottom: 0; }

@media (max-width: 640px) {
  .page-hero--slim { padding: 44px 0 48px; }
  .page-hero--slim h1 { font-size: 25px; }
}

.page-hero .byline {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 18px 0 0;
}

.page-hero--slim h1 { margin-bottom: 0; }

.diagram svg { width: 100%; height: auto; display: block; }

/* ---------- article card with thumbnail ---------- */

.card--thumb {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 26px;
  align-items: center;
  padding: 22px 26px 22px 22px;
}

.card--thumb img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.card-body { display: block; }

.card--thumb h3 { margin: 0 0 8px; }
.card--thumb p  { margin: 0 0 12px; }

.card-meta {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 10px;
}

.card-cta {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dk);
}

@media (prefers-reduced-motion: no-preference) {
  .card--thumb img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .card--thumb:hover img { transform: scale(1.04); }
  .card-cta { transition: transform .2s ease; }
  .card--thumb:hover .card-cta { transform: translateX(4px); }
}

.card--thumb { overflow: hidden; }

@media (max-width: 620px) {
  .card--thumb { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .card--thumb img { width: 100%; height: 190px; }
}

/* ---------- hero pacing, softened ----------
   The headline was arriving too abruptly after the kicker.
   More air above and below it, a slightly calmer size, and a
   longer gentler entrance so it settles rather than snaps.     */

.hero .avatar { margin-bottom: 34px; }

.kicker { margin-bottom: 30px; }

.hero h1 {
  font-size: 44px;
  line-height: 1.24;
  margin: 0 0 30px;
}

.hero p { font-size: 17.5px; }

.hero .signoff { margin-top: 44px; }

@media (prefers-reduced-motion: no-preference) {
  .hero .avatar,
  .hero .kicker,
  .hero h1,
  .hero p,
  .hero .signoff {
    animation-duration: 1.15s;
    animation-timing-function: cubic-bezier(.16,.68,.32,1);
  }
  .hero .avatar   { animation-delay: .12s; }
  .hero .kicker   { animation-delay: .42s; }
  .hero h1        { animation-delay: .66s; }
  .hero p         { animation-delay: .94s; }
  .hero .signoff  { animation-delay: 1.20s; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 31px; margin-bottom: 24px; }
  .kicker { margin-bottom: 22px; }
  .hero .avatar { margin-bottom: 24px; }
  .hero .signoff { margin-top: 34px; }
}

/* guard: nothing should ever push the page wider than the screen */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---------- headline lead-in ----------
   The punchline needs a setup. Without it a first-time visitor
   reads "I go and look at the building" and asks: which building? */

.hero h1 .lead-in {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: rgba(255,255,255,0.62);
  margin-bottom: 16px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .hero h1 .lead-in { font-size: 16px; margin-bottom: 12px; }
}

/* ---------- letter-spacing centring fix ----------
   Letter-spacing adds space AFTER the final character too, so any
   centred line with wide tracking sits visibly left of true centre.
   Compensating with a matching text-indent puts it back.          */

.signoff .name  { text-indent: 0.24em; }
.signoff .role  { text-indent: 0.04em; }
.kicker         { text-indent: 0.24em; }
.hero .meta     { text-indent: 0.06em; }
.page-hero .byline { text-indent: 0.18em; }

/* ---------- hero strap line ---------- */

.hero .strap {
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255,255,255,0.80);
  max-width: 600px;
  margin: 0 auto 26px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero .strap {
    opacity: 0;
    transform: translateY(18px);
    animation: layerIn 1.15s cubic-bezier(.16,.68,.32,1) .82s forwards;
  }
  .hero p:not(.strap) { animation-delay: 1.06s; }
  .hero .signoff      { animation-delay: 1.32s; }
}

@media (max-width: 640px) {
  .hero .strap { font-size: 17px; margin-bottom: 20px; }
}

/* ---------- hero call to action ---------- */

.hero-cta { margin: 6px 0 0; }

.hero .btn {
  border: 0;
  color: #2b2206;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-cta {
    opacity: 0;
    transform: translateY(18px);
    animation: layerIn 1.15s cubic-bezier(.16,.68,.32,1) 1.06s forwards;
  }
  .hero .signoff { animation-delay: 1.34s; }
}

/* ---------- background timeline ---------- */

.timeline {
  border-left: 2px solid var(--line);
  margin: 30px 0 8px;
  padding-left: 0;
}

.tl-item {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  padding: 0 0 34px 28px;
  position: relative;
}

.tl-item:last-child { padding-bottom: 6px; }

.tl-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 3px solid var(--white);
  border-radius: 50%;
}

.tl-when {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}

.tl-what h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.tl-what p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 620px) {
  .tl-item { grid-template-columns: 1fr; gap: 6px; padding-left: 22px; }
  .tl-when { padding-top: 0; }
}

/* ---------- footer closing quote ---------- */

.foot-quote {
  background: #303238;
  border-top: 1px solid #3a3c43;
  padding: 52px 0 56px;
  text-align: center;
}

.foot-quote p {
  font-family: 'Raleway', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  color: #cfd2d8;
  margin: 0 auto;
  max-width: 700px;
  position: relative;
}

.foot-quote p::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
  margin: 24px auto 0;
}

@media (max-width: 640px) {
  .foot-quote { padding: 38px 0 42px; }
  .foot-quote p { font-size: 22px; }
}

/* ---------- logo mark ----------
   Inline SVG, so it costs no extra request, stays crisp at any size
   and takes its colour from the text around it.                     */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: block;
  overflow: visible;
}

.wm-text {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.wm-text i { font-style: normal; color: var(--accent); }

.wordmark:hover .mark { color: var(--accent-dk); }

/* footer mark, sitting above the closing quote */

.mark--foot {
  width: 46px;
  height: 46px;
  flex: none;
  margin: 0 auto 24px;
  color: #cfd2d8;
}

@media (max-width: 640px) {
  .mark { width: 22px; height: 22px; flex-basis: 22px; }
  .wordmark { gap: 9px; }
  .mark--foot { width: 38px; height: 38px; margin-bottom: 18px; }
}

/* header is the wordmark alone, the mark would repeat its own K */
.wordmark { gap: 0; }

/* ---------- the mark IS the K of KALVIN ----------
   viewBox is trimmed to the glyph, so the SVG box equals the letter.
   Sized to cap height and sat on the baseline, it reads as type.     */

.wordmark {
  display: inline;
  gap: 0;
  white-space: nowrap;
}

.wordmark .mark {
  display: inline-block;
  height: 0.72em;          /* Raleway bold cap height */
  width: auto;
  vertical-align: baseline;
  margin-right: 0.14em;    /* matches the wordmark letter-spacing */
  overflow: visible;
  color: var(--ink);
  transition: color .22s ease;
}

.wordmark:hover .mark { color: var(--accent-dk); }

@media (max-width: 640px) {
  .wordmark .mark { height: 0.70em; }
}

/* ---------- centring fix, hero sign-off and CTA ----------
   .hero p sets max-width 640px AND margin:0 auto. Later rules for
   .name, .role and .hero-cta re-declared margin without the auto,
   so they kept the 640px box but lost the centring. The box sat
   hard left inside the 772px hero, and the text centred inside the
   box, which is why it read about 65px left of true centre.
   The amber rule was unaffected because it keeps margin:0 auto.   */

.hero .signoff .name,
.hero .signoff .role,
.hero .hero-cta {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}