/* =========================================================
   PARTNERS — For Builders & Architects (partners.html)
   Page-only styles. Built on the tokens in css/style.css.
   Signature moments:
   · Two tracks: hovering one track pushes the other back,
     its checklist draws itself in as it scrolls into view.
   · How it works: a copper rail fills node by node, then a
     "data packet" keeps travelling along it.
   · What partners get: each card is a blueprint wireframe
     that renders (scan line + fills) on hover; on touch
     screens it renders itself once it scrolls into view.
   ========================================================= */

/* anchors clear the floating nav */
#tracks, #how, #benefits, #enquiry { scroll-margin-top: 96px; }
/* the track cards start right at their own edge (sections have big top padding), so leave more room under the nav */
#builders, #architects { scroll-margin-top: 112px; }

/* ---------- Hero ---------- */
/* WhatsApp glyph on the ghost hero button (same treatment as the services hero) */
.pt-wa-ico { width: 18px; height: 18px; fill: var(--green); flex-shrink: 0; transition: transform .45s var(--spring); }
.pt-hero .btn:hover .pt-wa-ico { transform: rotate(-12deg) scale(1.12); }
/* "on this page" links: same pattern on work, services and partners (keep the three copies
   in sync, or promote to css/style.css as `.page-hero__aside a`) */
.pt-hero .page-hero__aside a { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(27,42,58,.14); transition: color .3s, transform .45s var(--spring); }
.pt-hero .page-hero__aside li:last-child a { border-bottom: 0; padding-bottom: 0; }
.pt-hero .page-hero__aside a .mono { color: var(--muted); font-size: 11px; transition: color .3s; }
.pt-hero .page-hero__aside a:hover { color: var(--copper-d); transform: translateX(5px); }
.pt-hero .page-hero__aside a:hover .mono { color: var(--copper); }

/* content sits above the blueprint grid / blobs on navy bands */
.tracks > .container, .enquiry > .container { position: relative; z-index: 1; }
.tracks .blob, .enquiry .blob { opacity: .2; }

/* =========================================================
   01 · TWO TRACKS
   ========================================================= */
.tracks .section-head--split .lead { max-width: 430px; }
.tracks__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); align-items: stretch; }
.track-wrap { display: flex; }

.track {
  position: relative; flex: 1; display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 46px); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02) 62%);
  transition: transform .7s var(--spring), background .4s, box-shadow .4s, opacity .5s var(--ease), filter .5s var(--ease);
}
.track:hover { background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.035) 62%); }

/* giant outlined initial behind the content */
.track__letter {
  position: absolute; z-index: -1; right: -.03em; bottom: -.27em;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(220px, 26vw, 380px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(226,176,119,.13);
  pointer-events: none; user-select: none;
  transition: transform 1s var(--spring), -webkit-text-stroke-color .5s;
}
.track:hover .track__letter { transform: translate(-18px, -12px) rotate(-5deg); -webkit-text-stroke-color: rgba(226,176,119,.42); }

.track__top { display: flex; align-items: center; gap: 16px; }
.track__ico {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 22px; display: grid; place-items: center;
  background: rgba(226,176,119,.1); box-shadow: inset 0 0 0 1px rgba(226,176,119,.3);
  transition: transform .6s var(--spring), background .4s, box-shadow .4s;
}
.track__ico svg { width: 32px; height: 32px; fill: none; stroke: var(--copper-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.track:hover .track__ico { transform: rotate(-10deg) scale(1.08); background: linear-gradient(145deg, var(--copper-2), var(--copper)); box-shadow: var(--shadow-copper); }
.track:hover .track__ico svg { stroke: #fff; }
.track .p-card__tag { font-size: 11.5px; }
.track h3 { font-size: clamp(27px, 2.7vw, 36px); line-height: 1.1; letter-spacing: -.015em; margin: 28px 0 12px; max-width: 17ch; }
.track > p { font-size: 16.5px; max-width: 46ch; margin: 0 0 24px; }

/* checklist — ticks draw in once the card is revealed */
.ticks { list-style: none; margin: 0 0 28px; padding: 22px 0 0; display: grid; gap: 14px; border-top: 1px dashed rgba(250,246,238,.14); }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font-size: 15.5px; line-height: 1.5; color: rgba(250,246,238,.84); transition: transform .45s var(--spring); }
.ticks svg { width: 26px; height: 26px; overflow: visible; }
.ticks circle { fill: rgba(226,176,119,.12); stroke: rgba(226,176,119,.45); stroke-width: 1; transition: fill .35s, stroke .35s; }
.ticks path { fill: none; stroke: var(--copper-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke .3s; }
.track-wrap.is-in .ticks path { animation: ptDraw .7s var(--ease) forwards; }
.ticks li:nth-child(1) path { animation-delay: .55s; }
.ticks li:nth-child(2) path { animation-delay: .7s; }
.ticks li:nth-child(3) path { animation-delay: .85s; }
.ticks li:nth-child(4) path { animation-delay: 1s; }
.ticks li:nth-child(5) path { animation-delay: 1.15s; }
.ticks li:hover { transform: translateX(6px); }
.ticks li:hover circle { fill: var(--copper); stroke: var(--copper); }
.ticks li:hover path { stroke: #fff; }

.track__pipe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 26px;
  padding: 14px 16px; border-radius: 20px; background: rgba(8,16,26,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.track__pipe > .mono { color: rgba(250,246,238,.45); font-size: 10px; }
.track__cta { margin-top: auto; align-self: flex-start; }

/* focus: hovering one track pushes the other back */
@media (hover: hover) and (pointer: fine) {
  .tracks__grid:has(.track-wrap:hover) .track-wrap:not(:hover) .track { opacity: .5; filter: saturate(.45); transform: scale(.975); }
}

/* =========================================================
   02 · HOW COLLABORATION WORKS
   ========================================================= */
.collab .section-head--split .lead { max-width: 360px; }
.steps { --node: 72px; --sg: clamp(16px, 2vw, 26px); position: relative; }
.steps__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sg); }

/* rail runs from the first node's centre to the last node's centre */
.steps__rail {
  position: absolute; top: calc(var(--node) / 2 - 2px); height: 4px;
  left: calc(var(--node) / 2); right: calc(25% - var(--sg) * .75 - var(--node) / 2);
  border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(27,42,58,.2) 0 8px, transparent 8px 16px);
}
.steps__rail.reveal { opacity: 1; transform: none; }
.steps__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--copper-2), var(--copper) 60%, var(--copper-d)); transform: scaleX(0); transform-origin: left center; transition: transform 2s linear .3s; }
.steps__rail.is-in .steps__fill { transform: scaleX(1); }
.steps__packet { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.steps__packet b { position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--copper), 0 0 22px 6px rgba(226,176,119,.75); }
.steps__rail.is-in .steps__packet { animation: ptPacket 3.6s cubic-bezier(.65, 0, .35, 1) 2.6s infinite; }

.step { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.step__node {
  position: relative; z-index: 1; width: var(--node); height: var(--node); flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper);
  box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--cream-3); transition: transform .6s var(--spring);
}
.step__node::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, var(--copper-2), var(--copper) 55%, var(--copper-d)); box-shadow: var(--shadow-copper); transform: scale(0); }
.step__node::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px dashed rgba(194,133,63,.55); opacity: 0; }
.step__node b { position: relative; z-index: 1; font-size: 14px; color: var(--navy); }
/* nodes light up in sync with the rail fill (node n at (n-1)/3 of the rail) */
.step.is-in .step__node::before { animation: ptNode .8s var(--spring) forwards; animation-delay: calc(.3s + (var(--d, 1) - 1) * .66s); }
.step.is-in .step__node b { animation: ptNodeTxt .3s linear forwards; animation-delay: calc(.4s + (var(--d, 1) - 1) * .66s); }
.step.is-in .step__node::after { animation: ptRing .6s var(--ease) forwards, ptSpin 14s linear infinite; animation-delay: calc(.5s + (var(--d, 1) - 1) * .66s), 0s; }
.step:hover .step__node { transform: scale(1.1) rotate(-8deg); }

.step__card {
  position: relative; width: 100%; flex: 1; margin-top: 30px; padding: 28px 26px 26px;
  border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow), var(--inset);
  transition: transform .6s var(--spring), box-shadow .4s;
}
/* dashed lead-line from node to card */
.step__card::before { content: ""; position: absolute; top: -30px; left: calc(var(--node) / 2 - 1px); width: 2px; height: 30px; background: repeating-linear-gradient(to bottom, rgba(194,133,63,.6) 0 4px, transparent 4px 8px); }
/* crop-mark frame appears on hover */
.step__card::after { content: ""; position: absolute; inset: 10px; border-radius: calc(var(--r-lg) - 10px); border: 1px dashed transparent; pointer-events: none; transition: border-color .4s; }
.step:hover .step__card { transform: translateY(-8px); box-shadow: 0 40px 70px -30px rgba(27,42,58,.45), var(--inset); }
.step:hover .step__card::after { border-color: rgba(194,133,63,.35); }
.step__meta { display: inline-block; padding: 5px 10px; border-radius: 8px; background: var(--cream); color: var(--copper-d); font-size: 10.5px; }
.step__card h3 { font-family: var(--f-display); font-weight: 500; font-size: 23px; line-height: 1.15; margin: 16px 0 10px; }
.step__card p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* =========================================================
   03 · WHAT PARTNERS GET — wireframe → render cards
   ========================================================= */
.perks__side { display: grid; gap: 18px; justify-items: start; max-width: 440px; }
.perks__hint { margin: 0; }
.perks__hint-touch { display: none; }
.perks__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 24px); }
.perk-wrap { display: flex; grid-column: span 6; }
.perk-wrap:nth-child(1), .perk-wrap:nth-child(4) { grid-column: span 7; }
.perk-wrap:nth-child(2), .perk-wrap:nth-child(3) { grid-column: span 5; }
.perk.card { flex: 1; display: flex; flex-direction: column; padding: 12px; border-radius: var(--r-xl); }
.perk__body { padding: 22px 16px 14px; }
.perk.card h3 { margin: 0 0 10px; font-size: clamp(21px, 1.9vw, 25px); }
.perk.card p { max-width: 46ch; }

.viz {
  position: relative; overflow: hidden; isolation: isolate; height: clamp(210px, 20vw, 250px);
  border-radius: calc(var(--r-xl) - 12px); background-color: var(--navy);
  background-image:
    linear-gradient(rgba(158,195,230,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158,195,230,.1) 1px, transparent 1px),
    linear-gradient(rgba(158,195,230,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158,195,230,.045) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px; background-position: center;
  transition: background-color .6s var(--ease);
}
.viz svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 38px 20px 32px; overflow: visible; }
.viz .wf { fill: none; stroke: var(--blueprint); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; transition: stroke .5s var(--ease); }
.viz .wf--dash { stroke-dasharray: 1.2 1.6; }
.viz .wf--dim { stroke-width: .9; stroke: rgba(226,176,119,.75); }
.viz .sp { fill: none; stroke: var(--blueprint); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 3 4; opacity: .8; transition: stroke .5s var(--ease); }
.viz .fl { opacity: 0; transition: opacity .55s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.vz-t { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .08em; fill: var(--blueprint); transition: fill .5s var(--ease); }
.vz-t--node { font-size: 6.6px; }

.perk-wrap.is-in .viz .wf { animation: ptDrawIn 1.6s var(--ease) .25s both; }

.viz__scan {
  position: absolute; inset: 0 0 auto; z-index: 2; height: 45%; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(226,176,119,.14) 70%, rgba(226,176,119,.45));
  border-bottom: 1.5px solid var(--copper-2); transform: translateY(-110%);
}
.viz__num, .viz__view { position: absolute; z-index: 3; font-size: 10px; color: rgba(158,195,230,.75); }
.viz__num { top: 18px; left: 20px; }
.viz__view { bottom: 14px; left: 20px; }
.viz__state {
  position: absolute; z-index: 3; top: 12px; right: 12px; height: 26px; overflow: hidden; border-radius: 999px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(158,195,230,.25); font-size: 10px;
  transition: background .4s, box-shadow .4s;
}
.viz__state span { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; color: var(--blueprint); transition: transform .6s var(--spring); }
.viz__state span:last-child { color: var(--copper-2); }
.viz__state span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* the render moment — hover on pointer devices */
@media (hover: hover) {
  .perk:hover .viz { background-color: var(--navy-2); }
  .perk:hover .viz .fl { opacity: 1; transition-delay: calc(.15s + var(--i, 0) * 110ms); }
  .perk:hover .viz .wf { stroke: rgba(27,42,58,.5); }
  .perk:hover .viz .wf--keep, .perk:hover .viz .sp { stroke: var(--copper-2); }
  .perk:hover .viz .wf--dash { animation: ptOrbit 2.4s linear infinite; }
  .perk:hover .viz .sp { animation: ptFlow .9s linear infinite; }
  .perk:hover .vz-t { fill: var(--copper-2); }
  .perk:hover .vz-t--node { fill: var(--navy); }
  .perk:hover .viz__scan { animation: ptScan 1.1s var(--ease) forwards; }
  .perk:hover .viz__state span { transform: translateY(-100%); }
  .perk:hover .viz__state { background: rgba(226,176,119,.12); box-shadow: inset 0 0 0 1px rgba(226,176,119,.45); }
}
/* …and on touch screens the drawing renders itself once it is on screen */
@media (hover: none) {
  .perks__hint-hover { display: none; }
  .perks__hint-touch { display: inline; }
  .perk-wrap.is-in .viz { background-color: var(--navy-2); transition-delay: 1.3s; }
  .perk-wrap.is-in .viz .fl { opacity: 1; transition-delay: calc(1.4s + var(--i, 0) * 110ms); }
  .perk-wrap.is-in .viz .wf { stroke: rgba(27,42,58,.5); transition-delay: 1.4s; }
  .perk-wrap.is-in .viz .wf--keep, .perk-wrap.is-in .viz .sp { stroke: var(--copper-2); transition-delay: 1.4s; }
  .perk-wrap.is-in .viz .sp { animation: ptFlow .9s linear infinite; }
  .perk-wrap.is-in .vz-t { fill: var(--copper-2); transition-delay: 1.4s; }
  .perk-wrap.is-in .vz-t--node { fill: var(--navy); }
  .perk-wrap.is-in .viz__scan { animation: ptScan 1.2s var(--ease) 1.1s forwards; }
  .perk-wrap.is-in .viz__state span { transform: translateY(-100%); transition-delay: 1.5s; }
}

/* =========================================================
   04 · COLLABORATION ENQUIRY
   ========================================================= */
.enquiry__wrap { display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: clamp(40px, 6vw, 90px); align-items: center; }
.enquiry__copy .lead { max-width: 500px; }
.enquiry__label { display: block; margin: 40px 0 16px; color: var(--copper-2); font-size: 11px; }

.after { list-style: none; counter-reset: after; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.after li {
  counter-increment: after; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center;
  padding: 14px 18px 14px 14px; border-radius: 24px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  color: rgba(250,246,238,.66); font-size: 15px; line-height: 1.45;
}
.after li::before { content: "0" counter(after); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; color: var(--copper-2); box-shadow: inset 0 0 0 1.5px rgba(226,176,119,.4); }
.after b { display: block; margin-bottom: 2px; color: var(--cream); font-family: var(--f-display); font-weight: 500; font-size: 18px; }

.direct-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.direct {
  display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px; border-radius: 26px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--cream);
  transition: transform .5s var(--spring), background .3s, box-shadow .3s;
}
.direct:hover { transform: translateY(-5px); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(226,176,119,.55), 0 24px 40px -24px #000; }
.direct__ico { width: 50px; height: 50px; flex-shrink: 0; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--copper-2), var(--copper) 55%, var(--copper-d)); box-shadow: var(--shadow-copper); transition: transform .6s var(--spring); }
.direct__ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.direct--wa .direct__ico { background: var(--green); box-shadow: 0 16px 30px -12px rgba(37,211,102,.6); }
.direct--wa .direct__ico svg { width: 26px; height: 26px; fill: #fff; stroke: none; }
.direct:hover .direct__ico { transform: rotate(-10deg) scale(1.08); }
.direct__txt { min-width: 0; }
.direct__txt small { display: block; margin-bottom: 2px; color: var(--copper-2); font-size: 10.5px; }
.direct__txt b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 17px; line-height: 1.2; white-space: nowrap; }
.direct__go { margin-left: auto; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: rgba(255,255,255,.08); transition: transform .5s var(--spring), background .3s; }
.direct:hover .direct__go { transform: rotate(45deg); background: var(--copper); }

/* form card: stacked-paper backing, copper edge and a rotating seal */
.form-stage { position: relative; }
.form-stage::before {
  content: ""; position: absolute; inset: 18px -14px -14px 18px; z-index: 0; border-radius: var(--r-xl);
  background: rgba(226,176,119,.12); box-shadow: inset 0 0 0 1px rgba(226,176,119,.22);
  transform: rotate(3deg); transition: transform .8s var(--spring);
}
.form-stage:hover::before { transform: rotate(5deg) translate(6px, 4px); }
.enquiry .partner-form { position: relative; z-index: 1; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-xl); }
.enquiry .partner-form::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(140deg, rgba(226,176,119,.9), rgba(226,176,119,0) 38%, rgba(226,176,119,0) 62%, rgba(194,133,63,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.enquiry .partner-form h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; margin-bottom: 8px; padding-right: 84px; }
.enquiry .partner-form > p { padding-right: 60px; }

.seal {
  position: absolute; z-index: 3; top: -46px; right: -26px; width: 118px; height: 118px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper);
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(194,133,63,.25);
}
.seal.reveal { transform: scale(.4) rotate(-40deg); }
.seal.reveal.is-in { transform: none; }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ptSpin 22s linear infinite; }
.seal text { font-family: var(--f-mono); font-size: 8.6px; letter-spacing: .12em; fill: var(--navy); }
.seal img { position: relative; width: 52px; height: auto; transition: transform .8s var(--spring); }
.form-stage:hover .seal img { transform: rotate(-12deg) scale(1.1); }

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes ptDraw { to { stroke-dashoffset: 0; } }
@keyframes ptDrawIn { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ptOrbit { to { stroke-dashoffset: -28; } }
@keyframes ptFlow { to { stroke-dashoffset: -14; } }
@keyframes ptScan { 0% { transform: translateY(-110%); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(240%); opacity: 0; } }
@keyframes ptPacket { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes ptNode { to { transform: scale(1); } }
@keyframes ptNodeTxt { to { color: #fff; } }
@keyframes ptRing { to { opacity: 1; } }
@keyframes ptSpin { to { rotate: 360deg; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1120px) {
  .perk-wrap:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 980px) {
  .tracks__grid { grid-template-columns: 1fr; }
  .track h3 { max-width: none; }

  /* steps go vertical: per-step connectors fill as each step arrives */
  .steps { --node: 60px; }
  .steps__rail { display: none; }
  .steps__list { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 20px; align-items: start; padding-bottom: 22px; }
  .step:last-child { padding-bottom: 0; }
  .step:not(:last-child)::before,
  .step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--node) / 2 - 1.5px); top: var(--node); bottom: 0; width: 3px; border-radius: 3px; }
  .step:not(:last-child)::before { background: repeating-linear-gradient(to bottom, rgba(27,42,58,.2) 0 6px, transparent 6px 12px); }
  .step:not(:last-child)::after { background: linear-gradient(var(--copper-2), var(--copper)); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease) .7s; }
  .step.is-in:not(:last-child)::after { transform: scaleY(1); }
  .step.is-in .step__node::before { animation-delay: .3s; }
  .step.is-in .step__node b { animation-delay: .4s; }
  .step.is-in .step__node::after { animation-delay: .5s, 0s; }
  .step__card { margin-top: 0; }
  .step__card::before { top: calc(var(--node) / 2 - 1px); left: -20px; width: 20px; height: 2px; background: repeating-linear-gradient(90deg, rgba(194,133,63,.6) 0 4px, transparent 4px 8px); }

  .enquiry__wrap { grid-template-columns: 1fr; }
  .form-stage { width: 100%; max-width: 560px; margin-top: 34px; }
}

@media (max-width: 680px) {
  .pt-hero .page-hero__actions .btn { flex: 1 1 100%; }

  .track { padding: 26px 22px 24px; border-radius: var(--r-lg); }
  .track__letter { font-size: 200px; }
  .track__ico { width: 54px; height: 54px; border-radius: 18px; }
  .track__ico svg { width: 28px; height: 28px; }
  .track h3 { margin-top: 22px; }
  .track > p { font-size: 15.5px; }
  .ticks li { font-size: 15px; gap: 12px; }
  .track__cta { align-self: stretch; }

  .steps { --node: 52px; }
  .step { column-gap: 16px; }
  .step__card { padding: 22px 20px; }
  .step__card::before { left: -16px; width: 16px; }
  .step__node b { font-size: 12px; }

  .perks__grid { grid-template-columns: 1fr; }
  .perk-wrap:nth-child(n) { grid-column: auto; }
  .perk.card { padding: 10px; border-radius: var(--r-lg); }
  .viz { height: 210px; border-radius: calc(var(--r-lg) - 8px); }
  .viz svg { padding: 38px 8px 30px; }
  .perk__body { padding: 18px 12px 12px; }

  .after li { grid-template-columns: 38px 1fr; gap: 12px; padding: 12px 14px 12px 12px; }
  .after li::before { width: 38px; height: 38px; }
  .after b { font-size: 17px; }
  .direct-row { grid-template-columns: 1fr; }

  .form-stage::before { inset: 14px -6px -10px 10px; }
  .enquiry .partner-form { padding: 26px 20px 22px; border-radius: var(--r-lg); }
  .enquiry .partner-form h3 { padding-right: 76px; }
  .enquiry .partner-form > p { padding-right: 0; }
  .seal { width: 92px; height: 92px; top: -38px; right: -4px; }
  .seal img { width: 40px; }
}