/* ==========================================================================
   CLUTCHwx / tonal hierarchy + motion system
   --------------------------------------------------------------------------
   Two jobs, no redesign:

   1. TONE. British Racing Green stays the foundation, but the page stops
      being one flat green field. Every dark surface now resolves to exactly
      one of three steps - core, forest, near-black - so a visitor feels the
      chapter change instead of reading a label for it. No new hues.

   2. MOTION. Three reveal types only (typography rises, photography unmasks,
      structure draws), one timing scale, one easing pair. Motion carries
      hierarchy and progression; nothing moves because it can.

   Loaded last so it settles above every earlier patch layer. Every hidden
   starting state is gated on html.tm-ready.has-motion, so a page without
   JavaScript - or with motion switched off - is complete and readable.
   ========================================================================== */

:root{
  /* ---- The palette: three greens, sage, warm off-white, one gold -------- */
  --brg:#08362a;            /* core British Racing Green */
  --forest:#052b24;         /* one step deeper */
  --nearblack:#021e18;      /* deepest. Never pure black. */
  --sage:#abc3b3;           /* secondary and structural type */
  --offwhite:#f3f1e9;       /* primary light type. Never harsh white. */

  /* Existing tokens are remapped rather than replaced, so every rule already
     written against them inherits the new hierarchy. */
  --pine:#08362a;
  --deep:#021e18;
  --panel:#0b3c30;
  --paper:#f3f1e9;
  --white:#f3f1e9;
  --gold:#d5af59;
  --muted-dark:#c1d4c6;     /* secondary copy, lifted for real scanning */
  --line-dark:rgba(243,241,233,.17);

  /* ---- Timing ---------------------------------------------------------- */
  --ease-fine:cubic-bezier(.16,.84,.25,1);      /* content */
  --ease-editorial:cubic-bezier(.22,1,.24,1);   /* large transitions */
  --t-content:560ms;
  --t-editorial:800ms;
  --t-chapter:620ms;
  --t-stagger:110ms;
}

/* ==========================================================================
   1. CHAPTERS
   Each dark surface takes one of the three steps. The steps are picked so the
   page descends, breaks to paper, descends again - architectural, not
   decorative, and never a coloured box drawn around a section.
   ========================================================================== */
.header{background:var(--nearblack)}
html body .hero.hero-design-a{background:var(--forest)}

#brand-film.brand-intro{background-color:var(--nearblack)}
#how.workflow-section{background-color:var(--brg)}
#brand-fit.fit-premium{background-color:var(--forest)!important}
#people.people{background-color:var(--brg)}
#academy.academy{background-color:var(--forest)}
#contact.close{background-color:var(--nearblack)}

/* A single hairline marks each tonal step, so the change reads as a joint in
   the architecture rather than as a gradient nobody asked for. */
#brand-film.brand-intro,
#how.workflow-section,
#brand-fit.fit-premium,
#people.people,
#academy.academy,
#contact.close{box-shadow:inset 0 1px 0 rgba(243,241,233,.07)}

/* Intelligence keeps its own deepest environment and still hands off to the
   Brand Fit Check with no seam: the surface resolves to exactly #brand-fit. */
.intel{
  background-color:var(--nearblack);
  background-image:
    radial-gradient(112% 76% at 72% 24%,rgba(213,175,89,.07),transparent 62%),
    linear-gradient(180deg,var(--nearblack) 0%,#03211a 56%,var(--forest) 100%);
}
.ip-node{fill:var(--nearblack)}

/* Secondary type: sage carries structure, copy stays bright enough to scan. */
.dark .eyebrow,.hero .eyebrow{color:var(--sage)}
.dark .section-description{color:#cfe0d3}

/* Every heading on the page currently drifts 9px sideways, forever. The depth
   stays; the wandering is cut to a whisper so nothing competes with the copy. */
.heading-sway{animation-duration:26s!important}
@keyframes premium-drift{
  from{transform:translate3d(0,0,0) rotateY(-1.6deg) rotateX(.3deg)}
  to{transform:translate3d(3px,0,0) rotateY(.7deg) rotateX(-.2deg)}
}
@keyframes premium-drift-mobile{
  from{transform:translateX(0) rotateY(-.8deg)}
  to{transform:translateX(1.5px) rotateY(.3deg)}
}

/* ==========================================================================
   2. THE THREE REVEAL TYPES
   Typography rises. Photography unmasks. Structure draws. Nothing else.
   A group can trigger its own children, so a horizontal rail reveals in
   sequence even though its later items sit outside the viewport.
   ========================================================================== */
/* -- Typography: opacity plus 12-20px -------------------------------------- */
html.tm-ready.has-motion [data-tm="rise"]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity var(--t-content) var(--ease-fine),
             transform var(--t-content) var(--ease-fine);
  transition-delay:var(--tm-delay,0ms);
}
html.tm-ready.has-motion [data-tm="rise"].is-in,
html.tm-ready.has-motion [data-tm-group].is-in [data-tm="rise"]{
  opacity:1;
  transform:none;
}

/* -- Photography: a clean crop reveal, then an almost imperceptible push ---
   A mask rather than a clip-path: several frames on this site already own
   their clip-path for a notched corner, and a mask does not fight it. */
html.tm-ready.has-motion [data-tm="unmask"]{
  -webkit-mask-image:linear-gradient(#000,#000);
  mask-image:linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 0%;
  mask-size:100% 0%;
  transition:-webkit-mask-size var(--t-editorial) var(--ease-editorial),
             mask-size var(--t-editorial) var(--ease-editorial);
  transition-delay:var(--tm-delay,0ms);
}
html.tm-ready.has-motion [data-tm="unmask"].is-in,
html.tm-ready.has-motion [data-tm-group].is-in [data-tm="unmask"]{
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
/* A mask clips the focus ring with it. Several of these frames are buttons, so
   the mask is dropped the moment the reveal has finished and the outline can
   sit outside the box again. */
html.tm-ready [data-tm="unmask"].tm-settled{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* The push runs only while the frame is on screen, and only on covered
   imagery - contained pieces would letterbox if they moved. */
html.tm-ready.has-motion [data-tm-push]>img{
  transform:scale(1.03);
  transition:transform 1.6s var(--ease-editorial);
}
html.tm-ready.has-motion [data-tm-push].is-in>img{transform:scale(1.005)}

/* -- Structure: a line draws, a number is written ------------------------- */
html.tm-ready.has-motion [data-tm="draw"]{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-editorial) var(--ease-editorial);
  transition-delay:var(--tm-delay,0ms);
}
html.tm-ready.has-motion [data-tm="draw"].is-in,
html.tm-ready.has-motion [data-tm-group].is-in [data-tm="draw"]{transform:scaleX(1)}

html.tm-ready.has-motion [data-tm-stroke] path{
  stroke-dasharray:100 100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 1.05s var(--ease-editorial);
  transition-delay:var(--tm-delay,0ms);
}
html.tm-ready.has-motion [data-tm-stroke].is-in path,
html.tm-ready.has-motion [data-tm-group].is-in [data-tm-stroke] path{stroke-dashoffset:0}

/* ==========================================================================
   3. HERO
   The copy is stable and readable; only the photograph keeps moving, and it
   moves about as fast as a clock hand. Phones get the copy instantly.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference) and (min-width:700px){
  html body .hero-design-a .hero-copy>*{animation:tm-hero-settle 580ms var(--ease-fine) both}
  html body .hero-design-a .hero-copy>*:nth-child(2){animation-delay:90ms}
  html body .hero-design-a .hero-copy>*:nth-child(3){animation-delay:180ms}
  html body .hero-design-a .hero-copy>*:nth-child(4){animation-delay:250ms}
  html body .hero-design-a .hero-copy>*:nth-child(5){animation-delay:320ms}
}
@keyframes tm-hero-settle{
  from{opacity:0;transform:translate3d(0,15px,0)}
  to{opacity:1;transform:none}
}

/* ~2.6% over 13 seconds, tracking the side the subject sits on. */
html.has-motion body .hero-design-a .hero-picture{
  transform-origin:72% 46%;
  animation:tm-cinematic-push 13s ease-in-out infinite alternate;
}
@keyframes tm-cinematic-push{
  from{transform:scale(1)}
  to{transform:scale(1.026)}
}

/* ==========================================================================
   4. THE WORK
   Five vertical pieces, revealed as one editorial set rather than five
   separate fades. The rail triggers the sequence, so the pieces still off to
   the right are already resolved when they are scrolled to.
   ========================================================================== */
html.tm-ready.has-motion .work-rail[data-tm-group] .work-art{--tm-delay:0ms}
html.tm-ready.has-motion .work-rail .work-item:nth-child(2) .work-art{--tm-delay:110ms}
html.tm-ready.has-motion .work-rail .work-item:nth-child(3) .work-art{--tm-delay:220ms}
html.tm-ready.has-motion .work-rail .work-item:nth-child(4) .work-art{--tm-delay:330ms}
html.tm-ready.has-motion .work-rail .work-item:nth-child(5) .work-art{--tm-delay:440ms}

html.tm-ready.has-motion .brand-work-grid .brand-work-card:nth-child(2){--tm-delay:140ms}

/* ==========================================================================
   5. GROW / AUTHORITY / PROFILE
   The strongest refinement on the site. The whole field steps darker as the
   visitor moves down the three lanes, so the tone change - not a border -
   tells them they have entered a different strategic direction.
   ========================================================================== */
#direction.direction-section{background-color:var(--brg)}
html.has-motion #direction.direction-section{
  transition:background-color var(--t-chapter) var(--ease-editorial);
}

/* The primer is the instruction, not an accent. Off-white keeps it loud and
   leaves gold to PROFILE, where it still means something. */
.lane-primer-lead{color:var(--offwhite)}
.lane-primer-lead::after{
  content:"";
  display:block;
  width:74px;
  height:2px;
  margin-top:18px;
  background:var(--gold);
}
.lane-primer-strong{color:var(--offwhite)}
.lane-primer-note{color:var(--sage)}

/* Contrast: the lane name is the brightest thing in its own territory, the
   outcome line sits just under it, the body copy is lifted enough to scan. */
.lane-chapter-name{color:#f8f6ef}
.lane-chapter-outcome{color:var(--offwhite)}
.lane-chapter-body{color:#d3e2d6}
.lane-chapter[data-lane-chapter="authority"] .lane-chapter-body{color:#cdddd1}

/* GROW: primary green, sage number, the most open treatment on the page. */
.lane-chapter[data-lane-chapter="grow"]{
  background:linear-gradient(180deg,rgba(171,195,179,.07),rgba(171,195,179,0) 70%);
}
.lane-chapter[data-lane-chapter="grow"] .lane-chapter-index .bespoke-number{
  color:rgba(171,195,179,.62);
}

/* AUTHORITY: no panel, no box. One structural rule and stronger off-white
   typography carry it, against a field that has already stepped darker. The
   gutter bleed went with the panel, so all three lanes share one measure. */
.lane-chapter[data-lane-chapter="authority"]{
  background:none;
  padding-inline:0;
  margin-inline:0;
}
.lane-chapter[data-lane-chapter="authority"] .lane-chapter-index .bespoke-number{
  color:rgba(243,241,233,.46);
}
.lane-chapter[data-lane-chapter="authority"] .lane-chapter-copy{position:relative}
.lane-chapter[data-lane-chapter="authority"] .lane-chapter-name{letter-spacing:-.06em}

/* PROFILE: the deepest field, and the only place gold leads. */
.lane-chapter[data-lane-chapter="profile"]{
  border-top-color:rgba(213,175,89,.42);
  background:linear-gradient(180deg,rgba(213,175,89,.075),rgba(213,175,89,0) 66%);
}
.lane-chapter[data-lane-chapter="profile"]:last-child{border-bottom-color:rgba(213,175,89,.42)}
.lane-chapter[data-lane-chapter="profile"] .lane-chapter-index .bespoke-number{color:var(--gold)}
.lane-chapter[data-lane-chapter="profile"] .lane-chapter-name{color:var(--gold)}
.lane-chapter[data-lane-chapter="profile"] .lane-chapter-outcome{color:#f5e9d2}

@media (min-width:900px){
  /* The one thin restrained edge AUTHORITY is allowed. */
  .lane-chapter[data-lane-chapter="authority"] .lane-chapter-copy::before{
    content:"";
    position:absolute;
    top:4px;
    bottom:4px;
    left:calc(-1 * clamp(18px,2.4vw,30px));
    width:1px;
    background:linear-gradient(180deg,
      rgba(243,241,233,0),
      rgba(243,241,233,.3) 18%,
      rgba(243,241,233,.3) 82%,
      rgba(243,241,233,0));
    transform:scaleY(0);
    transform-origin:top;
    transition:transform 900ms var(--ease-editorial) 160ms;
  }
  html.lanes-ready.has-motion .lane-chapter[data-lane-chapter="authority"].is-revealed .lane-chapter-copy::before{
    transform:scaleY(1);
  }
  html:not(.has-motion) .lane-chapter[data-lane-chapter="authority"] .lane-chapter-copy::before,
  html:not(.lanes-ready) .lane-chapter[data-lane-chapter="authority"] .lane-chapter-copy::before{
    transform:scaleY(1);
  }
}

/* The lane sequence already runs number, name, outcome, copy, then the
   photograph. Only the cadence is retuned onto the shared timing scale. */
html.lanes-ready.has-motion .lane-chapter [data-lane-step]{
  transition:opacity var(--t-content) var(--ease-fine),
             transform var(--t-content) var(--ease-fine);
}
html.lanes-ready.has-motion .lane-chapter [data-lane-step="2"]{transition-delay:110ms}
html.lanes-ready.has-motion .lane-chapter [data-lane-step="3"]{transition-delay:220ms}
html.lanes-ready.has-motion .lane-chapter [data-lane-step="4"]{transition-delay:330ms}
html.lanes-ready.has-motion .lane-chapter [data-lane-step="5"]{transition-delay:440ms}
html.lanes-ready.has-motion .lane-chapter-frame img{
  transition:transform 1.5s var(--ease-editorial),opacity var(--t-editorial) var(--ease-fine);
  transition-delay:180ms;
}

/* ==========================================================================
   6. HOW CLUTCH WORKS
   A process, so the motion is sequential and the sequence is the point. Each
   step is headed by a rule that draws itself, one after the other, and the
   gold numeral is written rather than faded in. All copy is readable from the
   first frame - nothing here waits on an interaction.
   ========================================================================== */
.workflow-step{position:relative;padding-top:16px;border-top:1px solid var(--line-dark)}
.workflow-progress{
  position:absolute;
  top:-1px;
  left:0;
  width:100%;
  height:1px;
  background:var(--gold);
  opacity:.62;
  pointer-events:none;
}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(1) .workflow-progress{--tm-delay:0ms}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(2) .workflow-progress{--tm-delay:340ms}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(3) .workflow-progress{--tm-delay:680ms}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(2) .workflow-title .bespoke-number{--tm-delay:400ms}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(3) .workflow-title .bespoke-number{--tm-delay:740ms}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(2) .workflow-title h3{--tm-delay:480ms}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(3) .workflow-title h3{--tm-delay:820ms}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(1) .workflow-media{--tm-delay:240ms}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(2) .workflow-media{--tm-delay:580ms}
html.tm-ready.has-motion .workflow-grid.is-in .workflow-step:nth-child(3) .workflow-media{--tm-delay:920ms}

/* ==========================================================================
   7. PORTAL
   Dimensionality, not parallax: the screen and its controls separate by a few
   pixels as the step passes through the viewport. Nothing more.
   ========================================================================== */
html.tm-ready.has-motion #portal-preview{
  translate:0 var(--tm-portal-screen,0px);
}
html.tm-ready.has-motion .portal-switch{
  translate:0 var(--tm-portal-switch,0px);
}

/* ==========================================================================
   8. INTELLIGENCE
   Already the quietest section on the site and it keeps its own vocabulary:
   hairlines travelling through intersections, resolving at one recommendation.
   Only the gold is brought onto the new value and the closing line is given
   the last word.
   ========================================================================== */
.ip-field{stroke:var(--gold);stroke-opacity:.15}
.ip-pulse,.ip-node,.ip-tick,.ip-out{stroke:var(--gold)}
.intel-lead{color:#d6e3d8}
.intel-caption{color:var(--sage);opacity:.78}

/* ==========================================================================
   9. PRICING
   Deliberately the calmest area on the page. Tiers must be comparable, so:
   a 2px lift, a firmer border, a breath of tone. No scaling, no price motion.
   ========================================================================== */
#membership .plans .plan{
  transition:border-color 300ms var(--ease-fine),
             background-color 300ms var(--ease-fine),
             box-shadow 300ms var(--ease-fine)!important;
}
@media (hover:hover) and (pointer:fine){
  #membership .plans .plan:hover{
    border-color:rgba(17,47,38,.34)!important;
    box-shadow:0 3px 0 rgba(17,47,38,.08);
  }
  #membership .plans .plan.featured:hover{
    border-color:var(--gold)!important;
  }
}
/* Nothing in the pricing area is allowed a reveal animation. */
html.tm-ready.has-motion #membership .plans [data-tm]{
  opacity:1;
  transform:none;
  transition:none;
}

/* ==========================================================================
   10. RIGHT-SIDE RAIL
   The rail stays hardware. Inactive ticks stay subdued; the section a visitor
   has entered gets its name in off-white and the only gold marker on the rail.
   ========================================================================== */
.rail-mark{right:calc(var(--rail-x) + 11px);width:auto;justify-content:flex-end}
.rail-mark span{
  order:-1;
  margin-right:17px;
  text-decoration:none;
  white-space:nowrap;
  font-size:9px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
  color:var(--offwhite);
  opacity:0;
  transform:translate3d(6px,0,0);
  transition:opacity 220ms var(--ease-fine),
             transform 220ms var(--ease-fine),
             color 220ms var(--ease-fine);
}
/* Paper sections need the dark ink; the rail signals its own tone already. */
.rail:not([data-tone]) .rail-mark span{color:#183328}

/* On a narrower desktop the label would reach into the page, so there it only
   appears when the pointer is on the rail. Wide screens have the room to keep
   the current section named at all times. */
.rail[data-open] .rail-mark span{opacity:.55;transform:none}
.rail[data-open] .rail-mark[data-on] span,
.rail[data-open] .rail-mark:hover span{opacity:1}
@media (min-width:1280px){
  .rail-mark[data-on] span{opacity:1;transform:none}
}
/* The only gold on the rail: the marker for the section you are in. */
.rail-mark[data-on] b{background:var(--rail-gold)}

@media (prefers-reduced-motion:reduce){
  .rail-mark span{transition:none}
}

/* ==========================================================================
   11. MOBILE
   Motion gets simpler, not busier. No relative layer movement, no hero
   entrance, shorter reveals, and never a wait before the copy can be read.
   ========================================================================== */
@media (max-width:699px){
  :root{--t-content:420ms;--t-editorial:560ms;--t-chapter:520ms}
  html.tm-ready.has-motion [data-tm="rise"]{transform:translate3d(0,11px,0)}
  html.tm-ready.has-motion #portal-preview,
  html.tm-ready.has-motion .portal-switch{translate:none!important}
  html.has-motion body .hero-design-a .hero-picture{animation-duration:18s}
  /* Every stagger collapses on a phone: three steps in a column read as one. */
  html.tm-ready.has-motion .work-rail .work-item .work-art,
  html.tm-ready.has-motion .workflow-grid.is-in .workflow-step .workflow-progress,
  html.tm-ready.has-motion .workflow-grid.is-in .workflow-step .workflow-title .bespoke-number,
  html.tm-ready.has-motion .workflow-grid.is-in .workflow-step .workflow-title h3,
  html.tm-ready.has-motion .workflow-grid.is-in .workflow-step .workflow-media{--tm-delay:0ms}
}

/* ==========================================================================
   12. REDUCED MOTION
   Everything arrives in its finished state. Transforms that exist only to
   move are dropped, not merely shortened.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html.tm-ready [data-tm="rise"],
  html.tm-ready [data-tm="draw"]{opacity:1!important;transform:none!important;transition:none!important}
  html.tm-ready [data-tm="unmask"]{
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  html.tm-ready [data-tm-stroke] path{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}
  html.tm-ready [data-tm-push]>img{transform:none!important;transition:none!important}
  html body .hero-design-a .hero-copy>*{animation:none!important}
  html body .hero-design-a .hero-picture{animation:none!important;transform:none!important}
  #direction.direction-section{transition:none}
  html.tm-ready #portal-preview,html.tm-ready .portal-switch{translate:none!important}
}

@media print{
  [data-tm]{opacity:1!important;transform:none!important;mask-image:none!important;-webkit-mask-image:none!important}
  .workflow-progress{display:none}
}