/* ==========================================================================
   Sections: hero, figures, intro, practices, 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__title,
.hero__body {
  grid-column: 1 / -1;
}

.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;
}

@media (min-width: 64em) {
  .hero__title { grid-column: 1 / span 11; }
  .hero__body { grid-column: 1 / span 5; padding-top: 0.5rem; }
}

/* --- 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-note {
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  font-size: 0.9375rem;
  color: var(--fg-muted);
  text-wrap: balance;  /* one line on desktop, two even lines below */
}

.lenses-note a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-fast);
}

.lenses-note a:hover {
  text-decoration-color: var(--gold-line);
}

/* --- Selected work (home): a list of the three cases ----------------------
   Label, title and one line per case on hairlines; the title is the link,
   stretched over the row. No exhibit: at this size it could not be read. */
.case-list {
  border-top: 1px solid var(--line-strong);
}

.case-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.25rem;
  padding-block: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
  border-bottom: 1px solid var(--line);
}

.case-row[hidden] {
  display: none;
}

.case-row__meta {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-row__title {
  font-family: var(--font-display);
  font-size: calc(var(--step-3) * var(--display-scale));
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.1;
  transition: transform var(--dur) var(--ease-out), color var(--dur);
}

.case-row__title a {
  text-decoration: none;
}

.case-row__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.case-row__text {
  grid-column: 1;
  max-width: 40em;
  color: var(--fg-muted);
}

.case-row__arrow {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  align-self: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur), color var(--dur);
}

.case-row:hover .case-row__title {
  transform: translateX(0.4rem);
  color: var(--accent);
}

.case-row:hover .case-row__arrow {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}

@supports selector(:has(*)) {
  .case-row:has(.case-row__title a:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .case-row__title a:focus-visible {
    outline: none;
  }
}

@media (min-width: 64em) {
  .case-row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 3rem;
    column-gap: var(--col-gap);
    align-items: baseline;
  }

  .case-row__meta {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 0.6rem;
  }

  .case-row__title,
  .case-row__text {
    grid-column: 2;
  }

  .case-row__arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

.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; }
  .founder__intro--solo { grid-column: 1 / span 8; }   /* no career list beside it (8 Nov) */
  .ledger { grid-column: 7 / -1; align-self: center; }
}