/* ==========================================================================
   Sections: hero, figures, intro, practices, spotlight, cases, steps, founder
   ========================================================================== */

/* --- Hero (home) --------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(2.25rem, 0.8rem + 5.5vw, 6rem);
  padding-bottom: clamp(2rem, 1rem + 2.5vw, 3.25rem);
  overflow: hidden;
}

.hero__lines {
  position: absolute;
  inset: 0;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 25% 100%;
  border-right: 1px solid var(--line);
  opacity: 0.6;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
}

.hero__top,
.hero__title,
.hero__body,
.hero__plate {
  grid-column: 1 / -1;
}

.hero__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.hero__est {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.hero__title {
  position: relative;
  z-index: 2;
  font-weight: var(--display-weight);
}

.hero__title .line {
  display: block;
}

.hero__body {
  display: grid;
  gap: 2rem;
  align-content: start;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.hero__plate {
  position: relative;
  min-height: 19rem;
  margin-inline: calc(-1 * var(--gutter));
  background: var(--plate);
  overflow: hidden;
  border-radius: 0;
}

.hero__mark {
  position: absolute;
  width: 128%;
  max-width: none;
  left: -6%;
  top: -14%;
}

.hero__mark .blade {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@media (min-width: 64em) {
  .hero__title { grid-column: 1 / span 11; }
  .hero__body { grid-column: 1 / span 5; padding-top: 0.5rem; }
  .hero__plate {
    grid-column: 7 / -1;
    min-height: clamp(22rem, 29vw, 30rem);
    margin-inline: 0 calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2));
    border-radius: var(--radius-l) 0 0 var(--radius-l);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__mark .blade {
    animation: blade-in 1.5s var(--ease-out) both;
  }
  .hero__mark .blade--2 { animation-delay: 0.14s; }
  .hero__mark .blade--3 { animation-delay: 0.28s; }
  .hero__mark {
    animation: drift 16s var(--ease-in-out) 1.7s infinite alternate;
  }
}

@keyframes blade-in {
  from { opacity: 0; transform: translate3d(0, 2.5rem, 0) rotate(-5deg); }
  to { opacity: 1; transform: none; }
}

@keyframes drift {
  to { transform: translate3d(-0.4rem, -0.7rem, 0) rotate(0.7deg); }
}

/* --- Intro statement ----------------------------------------------------- */
.intro__grid {
  row-gap: 2rem;
}

/* The statement leads straight into the expertise list on the same ground:
   one tight gap between them, not two full section paddings. */
.intro { padding-bottom: var(--section-y-tight); }
.intro + .expertise-home { padding-top: 0; }

.intro__label,
.intro__body {
  grid-column: 1 / -1;
}

.intro__lead {
  font-size: calc(var(--step-4) * var(--display-scale));
  line-height: 1.1;
}

.intro__cols {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
  color: var(--fg-muted);
}

@media (min-width: 64em) {
  .intro__label { grid-column: 1 / span 3; }
  .intro__body { grid-column: 5 / -1; }
  .intro__cols { grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); }
}

/* --- Practice list (expertise on home) -----------------------------------
   Each row carries one brand colour (--p). When a row is pointed at, or reached
   with the keyboard, --on goes to 1: the colour sweeps in from the left, a rule
   draws under the row, the brand blade swings in behind the arrow, the number
   and title take the colour and the arrow loops through its circle. Touch
   screens keep the resting state, so a tap never leaves a row stuck "on".   */
.practice-list {
  border-top: 1px solid var(--line-strong);
}

.practice {
  --p: var(--mark-2);
  --p-text: var(--p);
  border-bottom: 1px solid var(--line);
}

.practice:nth-child(4n + 2) { --p: var(--mark-1); }
/* The deep teal is a graphic colour; lifted towards the text colour for type. */
.practice:nth-child(4n + 3) { --p: var(--mark-3); --p-text: color-mix(in srgb, var(--mark-3) 62%, var(--fg)); }

.practice__link {
  --on: 0;
  --num: var(--gold);
  --title: var(--fg);
  --desc: var(--fg-muted);
  --arrow-bg: transparent;
  --arrow-line: var(--line-strong);
  --arrow-fg: var(--fg);
  --arrow-loop: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 0.6rem 1rem;
  align-items: baseline;
  /* The row's box reaches 1rem into the gutter so the wash has room around
     the text; the text itself stays aligned with the rest of the page. */
  margin-inline: -1rem;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.35rem) 1rem;
  color: var(--fg);
  text-decoration: none;
}

.practice__link:focus-visible {
  --on: 1;
  --num: var(--p-text);
  --title: var(--p-text);
  --desc: var(--fg);
  --arrow-bg: var(--p);
  --arrow-line: var(--p);
  --arrow-fg: var(--bg);
  --arrow-loop: practice-arrow;
}

@media (hover: hover) {
  .practice__link:hover {
    --on: 1;
    --num: var(--p-text);
    --title: var(--p-text);
    --desc: var(--fg);
    --arrow-bg: var(--p);
    --arrow-line: var(--p);
    --arrow-fg: var(--bg);
    --arrow-loop: practice-arrow;
  }
}

/* The colour wash, swept in from the left. */
.practice__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--p), transparent 82%);
  opacity: calc(var(--on) * 0.17);
  clip-path: inset(0 calc(100% - var(--on) * 100%) 0 0);
  transition: clip-path 0.75s var(--ease-out), opacity 0.45s var(--ease-out);
}

/* The rule under the row, on the hairline's width. */
.practice__link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 2px;
  background: var(--p);
  transform: scaleX(var(--on));
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* The brand blade, swung in behind the arrow and cropped by the row. */
.practice__blade {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -1.25rem;
  width: clamp(5.5rem, 3.5rem + 5vw, 9rem);
  height: auto;
  fill: var(--p);
  opacity: calc(var(--on) * 0.34);
  transform: translate3d(calc((1 - var(--on)) * 3rem), -50%, 0) rotate(calc((1 - var(--on)) * 24deg));
  transition: opacity 0.5s var(--ease-out), transform 0.9s var(--ease-out);
  pointer-events: none;
}

.practice__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--num);
  font-variant-numeric: tabular-nums lining-nums;
  transform: scale(calc(1 + var(--on) * 0.2));
  transform-origin: 0 50%;
  transition: color var(--dur), transform var(--dur) var(--ease-out);
}

.practice__title {
  font-size: calc(var(--step-4) * var(--display-scale));
  color: var(--title);
  transform: translateX(calc(var(--on) * 0.75rem));
  transition: transform var(--dur) var(--ease-out), color var(--dur);
}

.practice__desc {
  grid-column: 2 / -1;
  color: var(--desc);
  max-width: 34em;
  transition: color var(--dur);
}

.practice__arrow {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  background: var(--arrow-bg);
  border: 1px solid var(--arrow-line);
  border-radius: 50%;
  color: var(--arrow-fg);
  align-self: center;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur), color var(--dur);
}

.practice__arrow .icon-arrow {
  animation: var(--arrow-loop) 0.7s var(--ease-out);
}

/* Out through the right of the circle, back in from the left. */
@keyframes practice-arrow {
  0% { transform: none; }
  40% { transform: translateX(170%); }
  40.01% { transform: translateX(-170%); }
  100% { transform: none; }
}

@media (min-width: 64em) {
  .practice__link {
    grid-template-columns: 5rem minmax(0, 5fr) minmax(0, 6fr) 3rem;
    align-items: center;
  }
  .practice__desc { grid-column: 3; }
  .practice__arrow { grid-column: 4; }
}

.lenses {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tag-list li {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  font-size: 0.875rem;
  font-weight: 500;
}

@media (min-width: 64em) {
  .lenses { grid-template-columns: auto 1fr; column-gap: 2rem; align-items: center; }
}

/* --- Spotlight (AI) ------------------------------------------------------ */
.spotlight {
  overflow: hidden;
}

.spotlight__grid {
  position: relative;
  row-gap: 3rem;
}

.spotlight__copy,
.spotlight__list {
  grid-column: 1 / -1;
}

.spotlight__copy {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.spotlight__lede {
  font-family: var(--font-display);
  font-size: calc(var(--step-2) * var(--display-scale));
  line-height: 1.3;
  max-width: 24em;
}

.spotlight__copy .muted {
  max-width: 34em;
}

.spotlight__list {
  border-top: 1px solid var(--line-strong);
  counter-reset: none;
}

.spotlight__list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding-block: 1.2rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-1);
  line-height: 1.45;
}

.spotlight__list .num {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1rem;
  padding-top: 0.2rem;
}

@media (min-width: 64em) {
  .spotlight__copy { grid-column: 1 / span 5; }
  .spotlight__list { grid-column: 7 / -1; }
}

/* --- Case cards (home) --------------------------------------------------- */
.cases {
  display: grid;
  gap: var(--col-gap);
}

.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  isolation: isolate;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.case-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.case-card__visual {
  padding: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  background: var(--plate);
  border-bottom: 1px solid var(--line);
}

.case-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(1.4rem, 1rem + 1vw, 1.9rem);
}

.case-card__title {
  font-size: calc(clamp(1.5rem, 1.2rem + 0.9vw, 2rem) * var(--display-scale));
  line-height: 1.12;
}

.case-card__text {
  color: var(--fg-muted);
}

@media (min-width: 64em) {
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.section-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2rem;
  font-size: var(--step--1);
  color: var(--fg-muted);
}

/* --- Statement (why YellowRock) ----------------------------------------- */
.statement {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(3.5rem, 2rem + 5vw, 7rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--line-strong);
}

.statement__text {
  font-size: calc(var(--step-4) * var(--display-scale));
  line-height: 1.1;
  max-width: 20em;
}

.principles {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.principles h3 {
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gold-line);
  font-size: 0.9375rem;
  font-weight: 600;
}

.principles p {
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

@media (min-width: 48em) {
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
}

@media (min-width: 64em) {
  .statement { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col-gap); }
}

/* --- Founder (home) & ledger --------------------------------------------- */
.founder__grid {
  row-gap: 3rem;
}

.founder__intro,
.ledger {
  grid-column: 1 / -1;
}

.founder__name {
  margin: 1.4rem 0 0.6rem;
  font-size: calc(var(--step-5) * var(--display-scale));
}

.founder__role {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.founder__bio {
  margin: 1.75rem 0 2.25rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 30em;
}

.ledger {
  border-top: 1px solid var(--line-strong);
}

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1.5rem;
  padding-block: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.ledger__org {
  font-family: var(--font-display);
  font-size: calc(var(--step-2) * var(--display-scale));
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
}

.ledger__role {
  grid-column: 1;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.ledger__year {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums lining-nums;
}

@media (min-width: 64em) {
  .founder__intro { grid-column: 1 / span 5; }
  .ledger { grid-column: 7 / -1; align-self: center; }
}

/* --- Phone refinements ------------------------------------------------------ */
@media (max-width: 63.99em) {
  .hero__plate {
    min-height: clamp(19rem, 72vw, 26rem);
  }

  .hero__mark {
    width: 84%;
    left: 8%;
    top: 7%;
  }
}