/* ==========================================================================
   YOUR DIRECTION / lane chapters
   --------------------------------------------------------------------------
   GROW, AUTHORITY and PROFILE each get their own editorial territory instead
   of three lines in one column. Palette, type and rules stay inside the
   established CLUTCHwx language: pine grounds, paper type, one gold accent.
   Loaded last so it settles above the earlier lane patches.
   ========================================================================== */

/* ---- Heading and primer ------------------------------------------------- */
.direction-heading{align-items:end}
.direction-section .direction-lead{
  color:var(--white);
  font-size:clamp(1.75rem,6vw,2.625rem);
  font-weight:600;
  letter-spacing:-.05em;
  line-height:1.05;
  max-width:13ch;
}

.lane-primer{
  display:grid;
  gap:22px;
  border-top:1px solid var(--line-dark);
  padding-top:28px;
  margin-bottom:12px;
}
.lane-primer-main{display:grid;gap:18px}
.lane-primer-lead{
  color:var(--gold);
  font-size:clamp(1.625rem,5.4vw,2.5rem);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.1;
  max-width:24ch;
}
.lane-primer-strong{
  color:var(--white);
  font-size:clamp(1.1875rem,3vw,1.5rem);
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.02em;
  max-width:40ch;
}
.lane-primer-note{
  color:var(--muted-dark);
  font-size:clamp(1rem,2.2vw,1.125rem);
  line-height:1.6;
  max-width:34ch;
  align-self:end;
}

/* ---- Chapter shell ----------------------------------------------------- */
.lane-chapters{display:grid;margin-top:14px}
.lane-chapter{
  position:relative;
  border-top:1px solid var(--line-dark);
  padding-block:clamp(34px,7vw,74px);
  /* The lane name grows until its own column runs out. Long names cap sooner,
     so AUTHORITY never breaks mid-word on any platform's system font. */
  --lane-name-cap:25cqw;
}
.lane-chapter[data-lane-chapter="authority"]{--lane-name-cap:14cqw}
.lane-chapter[data-lane-chapter="profile"]{--lane-name-cap:19cqw}
@supports not (width:1cqw){.lane-chapter{--lane-name-cap:999px}}
.lane-chapter:last-child{border-bottom:1px solid var(--line-dark)}
.lane-chapter-inner{display:grid;gap:clamp(22px,4vw,34px);align-items:center}
.lane-chapter-copy{display:grid;gap:0;min-width:0;container-type:inline-size}

.lane-chapter-index{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,22px);
  margin-bottom:6px;
}
.lane-chapter-index .bespoke-number{
  width:auto;
  height:clamp(62px,9.6vw,104px);
  aspect-ratio:62/96;
  stroke-width:4.5;
  color:rgba(233,240,228,.42);
  flex:none;
}

.lane-chapter-name{
  font-size:min(clamp(2.9rem,12.4vw,4.75rem),var(--lane-name-cap,999px));
  overflow-wrap:normal;
  word-break:keep-all;
  font-weight:600;
  letter-spacing:-.055em;
  line-height:.94;
  color:var(--white);
}
.lane-chapter-outcome{
  font-size:clamp(1.375rem,4.6vw,2.125rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.18;
  color:#eaf2e6;
  margin-top:16px;
  max-width:22ch;
}
.lane-chapter-body{
  color:#cbdccf;
  font-size:clamp(1.0625rem,2.4vw,1.25rem);
  line-height:1.6;
  margin-top:18px;
  max-width:40ch;
}

.lane-chapter-cue{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  gap:12px;
  margin-top:24px;
  min-height:48px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--gold);
  cursor:pointer;
  font:inherit;
  font-size:clamp(1rem,2.2vw,1.125rem);
  font-weight:600;
  letter-spacing:.005em;
  text-align:left;
}
.lane-chapter-cue>svg{
  width:21px;
  height:21px;
  flex:none;
  stroke:currentColor;
  stroke-width:1.6;
  transition:transform .35s var(--ease);
}
.lane-chapter-cue:hover>svg,.lane-chapter-cue:focus-visible>svg{transform:translateX(7px)}
.lane-chapter-cue>span{
  border-bottom:1px solid rgba(213,175,89,.34);
  padding-bottom:3px;
  transition:border-color .3s var(--ease);
}
.lane-chapter-cue:hover>span{border-bottom-color:var(--gold)}

/* ---- Imagery ----------------------------------------------------------- */
.lane-chapter-figure{position:relative;margin:0;min-width:0}
.lane-chapter-frame{
  position:relative;
  overflow:hidden;
  background:var(--deep);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.lane-chapter-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.lane-chapter-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,31,25,0) 52%,rgba(4,31,25,.5));
}
/* Native ratios, so no face, racquet, paddle or hand is cropped away. */
.lane-chapter[data-lane-chapter="grow"] .lane-chapter-frame{aspect-ratio:1358/1159}
.lane-chapter[data-lane-chapter="grow"] .lane-chapter-frame img{object-position:50% 0%}
.lane-chapter[data-lane-chapter="authority"] .lane-chapter-frame{aspect-ratio:1672/941}
.lane-chapter[data-lane-chapter="authority"] .lane-chapter-frame img{object-position:50% 40%}
.lane-chapter[data-lane-chapter="profile"] .lane-chapter-frame{aspect-ratio:1672/941}
.lane-chapter[data-lane-chapter="profile"] .lane-chapter-frame img{object-position:50% 50%}

.lane-chapter-logo{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(16px,2.4vw,26px)}
.lane-chapter-logo .exact-lockup{width:clamp(132px,15vw,190px);max-width:100%;height:auto;display:block}


/* ---- Lane identity: tone, not new colour ------------------------------- */
/* GROW: the most open treatment. A light wash, thin rules, room to breathe. */
.lane-chapter[data-lane-chapter="grow"]{
  background:linear-gradient(180deg,rgba(244,242,234,.055),rgba(244,242,234,0) 72%);
}
.lane-chapter[data-lane-chapter="grow"] .lane-chapter-frame::after{
  background:linear-gradient(180deg,rgba(4,31,25,0) 62%,rgba(4,31,25,.38));
}

/* AUTHORITY: deeper and more editorial. The panel recedes, the type carries. */
.lane-chapter[data-lane-chapter="authority"]{
  /* Bleeds to the page gutter, so the deeper panel reads wider than the
     surrounding type without ever pushing the page sideways. */
  --lane-inset:min(var(--gutter),46px);
  background:#04211a;
  padding-inline:var(--lane-inset);
  margin-inline:calc(var(--lane-inset) * -1);
}
.lane-chapter[data-lane-chapter="authority"] .lane-chapter-index .bespoke-number{color:rgba(233,240,228,.34)}
.lane-chapter[data-lane-chapter="authority"] .lane-chapter-frame::after{
  background:linear-gradient(196deg,rgba(4,31,25,.08),rgba(3,26,21,.7));
}
.lane-chapter[data-lane-chapter="authority"] .lane-chapter-body{color:#c2d5c7}

/* PROFILE: the strongest gold accent on the page stays here. */
.lane-chapter[data-lane-chapter="profile"]{
  border-top-color:rgba(213,175,89,.4);
  background:linear-gradient(180deg,rgba(213,175,89,.07),rgba(213,175,89,0) 68%);
}
.lane-chapter[data-lane-chapter="profile"]:last-child{border-bottom-color:rgba(213,175,89,.4)}
.lane-chapter[data-lane-chapter="profile"] .lane-chapter-index .bespoke-number{color:rgba(213,175,89,.72)}
.lane-chapter[data-lane-chapter="profile"] .lane-chapter-name{color:var(--gold)}
.lane-chapter[data-lane-chapter="profile"] .lane-chapter-outcome{color:#f2e6cc}
.lane-chapter[data-lane-chapter="profile"] .lane-chapter-frame{box-shadow:inset 0 0 0 1px rgba(213,175,89,.34)}

/* Chosen lane keeps a quiet marker after the visitor commits to one. */
.lane-chapter.is-chosen::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:clamp(54px,9vw,104px);
  height:3px;
  background:var(--gold);
}
.lane-chapter.is-chosen .lane-chapter-cue>span{border-bottom-color:var(--gold)}

/* ---- Tablet ------------------------------------------------------------ */
@media(min-width:700px){
  .lane-primer{grid-template-columns:1.15fr .85fr;column-gap:clamp(36px,5vw,64px)}
}

/* ---- Desktop: three separated horizontal territories ------------------- */
@media(min-width:900px){
  .lane-primer{
    grid-template-columns:1.2fr .8fr;
    column-gap:clamp(48px,6vw,96px);
    padding-top:32px;
    margin-bottom:26px;
  }
  .lane-chapter{padding-block:clamp(56px,6vw,92px)}
  .lane-chapter-inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(44px,5.5vw,92px);
  }
  /* Alternating compositions: type left, type right, type left. */
  .lane-chapter[data-lane-chapter="authority"] .lane-chapter-copy{order:2}
  .lane-chapter[data-lane-chapter="authority"] .lane-chapter-figure{order:1}
  .lane-chapter-name{font-size:min(clamp(3.75rem,6.2vw,5.75rem),var(--lane-name-cap,999px))}
  .lane-chapter-index{margin-bottom:14px}
}

/* ---- Heading below the two-column threshold ---------------------------- */
@media(max-width:1023px){
  .direction-heading{grid-template-columns:1fr}
  .direction-section .direction-lead{max-width:none;margin-left:0}
}

/* ---- Mobile refinements ------------------------------------------------ */
@media(max-width:699px){
  .lane-primer{gap:22px;padding-top:22px}
  .lane-chapter-index{gap:16px;margin-bottom:6px}
}

/* ---- Hover and focus: the photograph answers --------------------------- */
/* Each territory is one live surface. Pointing at the panel, the photograph or
   the cue moves the same picture, so the whole chapter reads as interactive. */
.lane-chapter{--lane-drift:-1.6%}
.lane-chapter[data-lane-chapter="authority"]{--lane-drift:1.6%}
.lane-chapter-figure{cursor:pointer}
.lane-chapter-frame{transition:box-shadow .55s var(--ease),transform .7s var(--ease)}
.lane-chapter-frame::after{transition:opacity .55s var(--ease)}
.lane-chapter-index .bespoke-number{transition:color .45s var(--ease)}

@media(hover:hover){
  .lane-chapter:hover .lane-chapter-frame,
  .lane-chapter:focus-within .lane-chapter-frame{box-shadow:inset 0 0 0 1px rgba(213,175,89,.5)}
  .lane-chapter[data-lane-chapter="profile"]:hover .lane-chapter-frame,
  .lane-chapter[data-lane-chapter="profile"]:focus-within .lane-chapter-frame{box-shadow:inset 0 0 0 1px rgba(213,175,89,.8)}
  .lane-chapter:hover .lane-chapter-frame::after,
  .lane-chapter:focus-within .lane-chapter-frame::after{opacity:.55}
  .lane-chapter:hover .lane-chapter-index .bespoke-number,
  .lane-chapter:focus-within .lane-chapter-index .bespoke-number{color:rgba(233,240,228,.68)}
  .lane-chapter[data-lane-chapter="profile"]:hover .lane-chapter-index .bespoke-number,
  .lane-chapter[data-lane-chapter="profile"]:focus-within .lane-chapter-index .bespoke-number{color:var(--gold)}
  .lane-chapter:hover .lane-chapter-cue>svg,
  .lane-chapter:focus-within .lane-chapter-cue>svg{transform:translateX(7px)}
  .lane-chapter:hover .lane-chapter-cue>span,
  .lane-chapter:focus-within .lane-chapter-cue>span{border-bottom-color:var(--gold)}

  /* The frame itself lifts, so the whole territory reads as one live surface. */
  html.has-motion .lane-chapter:hover .lane-chapter-frame,
  html.has-motion .lane-chapter:focus-within .lane-chapter-frame{transform:translate3d(0,-6px,0)}

  /* The move itself: a slow push in and a drift towards the type. */
  html.lanes-ready.has-motion .lane-chapter.is-revealed:hover .lane-chapter-frame img,
  html.lanes-ready.has-motion .lane-chapter.is-revealed:focus-within .lane-chapter-frame img{
    transform:scale(1.075) translate3d(var(--lane-drift),0,0);
    transition-duration:1.1s;
  }
  html.lanes-ready.has-motion .lane-chapter.is-revealed:active .lane-chapter-frame img{
    transform:scale(1.045) translate3d(calc(var(--lane-drift) / 2),0,0);
    transition-duration:.35s;
  }
}

/* ---- Restrained reveal: number, name, copy, then the image ------------- */
html.lanes-ready.has-motion .lane-chapter [data-lane-step]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
html.lanes-ready.has-motion .lane-chapter [data-lane-step="1"]{transform:translate3d(0,10px,0)}
html.lanes-ready.has-motion .lane-chapter.is-revealed [data-lane-step]{opacity:1;transform:none}
html.lanes-ready.has-motion .lane-chapter [data-lane-step="2"]{transition-delay:.1s}
html.lanes-ready.has-motion .lane-chapter [data-lane-step="3"]{transition-delay:.18s}
html.lanes-ready.has-motion .lane-chapter [data-lane-step="4"]{transition-delay:.26s}
html.lanes-ready.has-motion .lane-chapter [data-lane-step="5"]{transition-delay:.34s}

html.lanes-ready.has-motion .lane-chapter-frame img{
  transform:scale(1.055);
  transition:transform 1.5s var(--ease),opacity .9s var(--ease);
  opacity:.55;
}
html.lanes-ready.has-motion .lane-chapter.is-revealed .lane-chapter-frame img{
  transform:scale(1);
  opacity:1;
}
html.lanes-ready.has-motion .lane-chapter-frame img{translate:0 var(--lane-shift,0px)}

@media(prefers-reduced-motion:reduce){
  html.lanes-ready.has-motion .lane-chapter [data-lane-step]{opacity:1;transform:none;transition:none}
  html.lanes-ready.has-motion .lane-chapter-frame img{opacity:1;transform:none;translate:none;transition:none}
  html.lanes-ready.has-motion .lane-chapter.is-revealed:hover .lane-chapter-frame img,
  html.lanes-ready.has-motion .lane-chapter.is-revealed:focus-within .lane-chapter-frame img,
  html.lanes-ready.has-motion .lane-chapter.is-revealed:active .lane-chapter-frame img{transform:none}
  html.has-motion .lane-chapter:hover .lane-chapter-frame,
  html.has-motion .lane-chapter:focus-within .lane-chapter-frame{transform:none}
  .lane-chapter-frame{transition:box-shadow .55s var(--ease)}
  .lane-chapter-cue>svg{transition:none}
}