/* ===========================================================================
   iso.css · Service 01 · ISO Certification
   Structural clone of bond.krd/services/building-code-needs
   Everything is scoped under main.p-iso.

   The source drives its whole layout off a fluid root font-size
   (1.1111vw >= 1024, 16px 412-1023, 3.8835vw < 412) with --spacing:.0625rem,
   so every "px-15 / pt-180 / fs-36" utility is really 15/180/36 root units.
   styles.css owns :root, so this page carries its own unit token --u instead
   and writes every dimension as calc(N * var(--u)).
   At 1440 --u = 1px, which is the source design width.
   =========================================================================== */

main.p-iso{
  --u: 1px;
  display: block;
  background: var(--paper);
  color: var(--teal);
  overflow: clip;
}
@media (max-width: 411px){ main.p-iso{ --u: 0.242718vw; } }   /* 100vw/412*16/16 */
@media (min-width: 1024px){ main.p-iso{ --u: 0.069444vw; } }  /* 100vw/90/16     */

main.p-iso section{ padding: 0; }
.p-iso a{ color: inherit; text-decoration: none; }
.p-iso h2, .p-iso h3{ font-family: var(--sans); font-weight: 400; letter-spacing: 0; line-height: 1; }
.p-iso p{ margin: 0; }
.p-iso .u-probe{ position: absolute; width: calc(100 * var(--u)); height: 0; visibility: hidden; pointer-events: none; }
.p-iso .sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- grid + page padding (source .my-grid / px-15) ----------------------- */
.p-iso .g{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: calc(10 * var(--u));
}
@media (min-width: 640px){ .p-iso .g{ column-gap: calc(12.5 * var(--u)); } }
@media (min-width: 1024px){
  .p-iso .g{ grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(15 * var(--u)); }
}
.p-iso .px{ padding-left: calc(15 * var(--u)); padding-right: calc(15 * var(--u)); }

/* --- type roles --------------------------------------------------------- */
.p-iso .page-title{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(52 * var(--u)); line-height: 1;
  letter-spacing: -.025em;   /* Instrument Sans runs wider than PP Neue Montreal */
}
@media (min-width: 1024px){
  .p-iso .page-title{ font-size: calc(160 * var(--u)); line-height: .9375; }
}
.p-iso .my-title{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(80 * var(--u)); line-height: .9375; letter-spacing: -.025em;
}
@media (min-width: 1024px){ .p-iso .my-title{ font-size: calc(160 * var(--u)); } }
/* styles.css styles bare h2/h3; inside a type-role wrapper the role wins */
.p-iso .my-title h2,
.p-iso .page-title h2,
.p-iso .page-text h2{
  font: inherit; letter-spacing: inherit; line-height: inherit;
}

.p-iso .page-text{ font-family: var(--sans); font-weight: 400; font-size: calc(22 * var(--u)); line-height: 1; }
@media (min-width: 1024px){ .p-iso .page-text{ font-size: calc(30 * var(--u)); } }

.p-iso .m{
  font-family: var(--mono); font-weight: 400;
  font-size: calc(12 * var(--u)); line-height: 1.33;
  letter-spacing: 0; text-transform: uppercase;
}
.p-iso .m-tight{ line-height: 1; }
.p-iso .btn-label{
  font-family: var(--mono); font-weight: 400;
  font-size: calc(14 * var(--u)); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
}

/* --- eyebrow rail (shared by Approach + Numbers) ------------------------ */
.p-iso .railhost{ position: relative; }
.p-iso .rail{
  display: flex; justify-content: space-between; gap: 0;
  background: transparent; border: 0; margin: 0;
  overflow: visible; scroll-snap-type: none;
  border-top: 1px solid var(--teal);
  padding-top: calc(20 * var(--u));
}
@media (min-width: 1024px){
  .p-iso .railhost{ height: 0; }
  .p-iso .rail{ position: absolute; left: 0; right: 0; top: 0; width: 100%; }
}

/* ============================ 1 · HERO ================================== */
.p-iso .iso-hero{ padding-top: calc(180 * var(--u)); }
@media (min-width: 1024px){ .p-iso .iso-hero{ padding-top: calc(312 * var(--u)); } }

.p-iso .hero-title{ text-align: right; }
@media (min-width: 1024px){ .p-iso .hero-title{ text-align: left; } }

.p-iso .hero-stack{
  position: relative;
  margin-top: calc(32 * var(--u));
  display: grid; grid-template-areas: "stack";
}
.p-iso .hero-stack > *{ grid-area: stack; }

.p-iso .hero-plate{
  overflow: hidden; position: relative;
  aspect-ratio: 412 / 825;
  background: var(--teal-deep);
}
@media (min-width: 1024px){ .p-iso .hero-plate{ aspect-ratio: 1.3079; } }
.p-iso .hero-plate canvas{
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; image-rendering: pixelated;
}
/* the source plate is a dark duotone, which is what carries the paper-coloured
   title and lede. Our ordered dither is a 50/50 field, so it gets darkened to
   the same reading weight. APPROX for the WebGL duotone shader. */
.p-iso .hero-plate::after{
  content: ""; position: absolute; inset: 0;
  background: var(--teal-deep); opacity: .5; pointer-events: none;
}

.p-iso .hero-over{
  z-index: 1;
  margin-top: calc(20 * var(--u));
  align-content: start;
  color: var(--paper);
}
@media (min-width: 1024px){ .p-iso .hero-over{ padding-bottom: calc(400 * var(--u)); } }
.p-iso .hero-over .ht2{ grid-column: 1 / -1; }
@media (min-width: 1024px){ .p-iso .hero-over .ht2{ grid-column: span 9; } }
.p-iso .hero-lede{ grid-column: 1 / -2; margin-top: calc(200 * var(--u)); }
/* the house pattern for body copy over the dither (see index.html .promise):
   a solid teal-deep panel, pulled back by its own padding so the text keeps
   its grid position exactly. */
.p-iso .hero-lede p{
  background: var(--teal-deep);
  padding: calc(16 * var(--u));
  margin: calc(-16 * var(--u));
}
@media (min-width: 1024px){ .p-iso .hero-lede{ grid-column: 8 / -2; } }

.p-iso .hero-stairs{
  position: absolute; bottom: -1px; left: 0; width: 100%;
  pointer-events: none;
}
.p-iso .stair{
  grid-column: 1 / -1;
  width: calc(var(--f) * 100% + 30 * var(--u));
  height: calc(130 * var(--u));
  margin-left: calc(-15 * var(--u));
  background: var(--paper);
  transform-origin: 0% 50%;
}
@media (min-width: 1024px){
  .p-iso .stair{ grid-column: 1 / 10; height: calc(140 * var(--u)); }
}

/* ========================== 2 · APPROACH ================================ */
.p-iso .iso-approach{ padding-top: calc(24 * var(--u)); }
.p-iso .ap-grid{ margin-top: calc(50 * var(--u)); }
@media (min-width: 1024px){
  .p-iso .ap-grid{ margin-top: 0; align-content: start; align-items: start; }
}
.p-iso .ap-h{ grid-column: 1 / -1; }
.p-iso .ap-h h2{ font-size: calc(36 * var(--u)); line-height: 1; letter-spacing: -.012em; }
@media (min-width: 1024px){
  .p-iso .ap-h{ grid-column: 3 / span 4; margin-top: calc(120 * var(--u)); }
}
.p-iso .ap-p{ grid-column: 1 / -1; margin-top: calc(20 * var(--u)); }
@media (min-width: 1024px){
  .p-iso .ap-p{
    grid-column: 8 / span 4;
    margin-top: calc(126 * var(--u)); margin-bottom: calc(40 * var(--u));
  }
}

/* ========================== 2b · TWO TRACKS =============================
   One comparison table, stated once. Mono cells, hairline rules, no cards. */
.p-iso .iso-tracks{ padding-top: calc(90 * var(--u)); }
@media (min-width: 1024px){ .p-iso .iso-tracks{ padding-top: calc(140 * var(--u)); } }

.p-iso .tr-list{
  list-style: none; margin: calc(46 * var(--u)) 0 0; padding: 0;
  border-bottom: 1px solid var(--teal);
}
@media (min-width: 1024px){ .p-iso .tr-list{ margin-top: calc(70 * var(--u)); } }

.p-iso .tr-head{ display: none; }
@media (min-width: 1024px){
  .p-iso .tr-head{
    display: grid;
    border-top: 1px solid var(--teal);
    padding: calc(12 * var(--u)) 0;
  }
  .p-iso .tr-head span{
    font-family: var(--mono); font-weight: 400;
    font-size: calc(11 * var(--u)); line-height: 1;
    letter-spacing: .04em; text-transform: uppercase; opacity: .6;
  }
}

.p-iso .tr-row{
  border-top: 1px solid var(--teal);
  padding: calc(22 * var(--u)) 0;
  row-gap: calc(10 * var(--u)); align-items: start;
}
@media (min-width: 1024px){ .p-iso .tr-row{ padding: calc(20 * var(--u)) 0; row-gap: 0; } }

.p-iso .tr-row span{
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: calc(12 * var(--u)); line-height: 1.5;
  letter-spacing: 0; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.p-iso .tr-track,
.p-iso .tr-dur,
.p-iso .tr-get,
.p-iso .tr-fit{ grid-column: 1 / -1; }
@media (min-width: 1024px){
  .p-iso .tr-track{ grid-column: 1 / span 3; }
  .p-iso .tr-dur{ grid-column: 4 / span 2; }
  .p-iso .tr-get{ grid-column: 6 / span 4; }
  .p-iso .tr-fit{ grid-column: 10 / span 3; }
}
@media (max-width: 1023px){
  .p-iso .tr-row .tr-dur::before,
  .p-iso .tr-row .tr-get::before,
  .p-iso .tr-row .tr-fit::before{
    display: block;
    font-size: calc(11 * var(--u)); line-height: 1;
    letter-spacing: .04em; opacity: .6;
    margin-bottom: calc(6 * var(--u));
  }
  .p-iso .tr-row .tr-dur::before{ content: "Duration"; }
  .p-iso .tr-row .tr-get::before{ content: "What you get"; }
  .p-iso .tr-row .tr-fit::before{ content: "Who it fits"; }
}

/* =========================== 4 · INTEGRITY ==============================
   The page's single statistic, one hairline block. */
.p-iso .iso-integrity{ padding-top: calc(80 * var(--u)); }
@media (min-width: 1024px){ .p-iso .iso-integrity{ padding-top: calc(120 * var(--u)); } }

.p-iso .int-grid{
  margin-top: calc(46 * var(--u));
  border-bottom: 1px solid var(--teal);
  padding-bottom: calc(50 * var(--u));
  row-gap: calc(30 * var(--u));
}
@media (min-width: 1024px){
  .p-iso .int-grid{ margin-top: 0; align-items: end; padding-bottom: calc(70 * var(--u)); }
}

.p-iso .int-fig{ grid-column: 1 / -1; }
@media (min-width: 1024px){ .p-iso .int-fig{ grid-column: 3 / span 4; margin-top: calc(110 * var(--u)); } }
.p-iso .int-num{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(120 * var(--u)); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px){ .p-iso .int-num{ font-size: calc(180 * var(--u)); } }
.p-iso .int-pc{ font-size: .45em; }
.p-iso .int-lab{ margin-top: calc(14 * var(--u)); max-width: 34ch; }

.p-iso .int-p{ grid-column: 1 / -1; }
@media (min-width: 1024px){ .p-iso .int-p{ grid-column: 8 / span 4; } }
.p-iso .int-p p:first-child{
  font-family: var(--mono); font-weight: 400;
  font-size: calc(12 * var(--u)); line-height: 1.6;
  letter-spacing: 0; text-transform: uppercase;
}
.p-iso .int-src{ margin-top: calc(20 * var(--u)); opacity: .6; }

/* ========================== 3 · STANDARDS ===============================
   Standards now sits between Approach and Numbers, so the tail padding is
   trimmed: the Numbers block brings its own 100u / 135u of top space. */
.p-iso .iso-standards{ padding-top: calc(70 * var(--u)); padding-bottom: calc(30 * var(--u)); }
@media (min-width: 1024px){
  .p-iso .iso-standards{ padding-top: calc(130 * var(--u)); padding-bottom: calc(60 * var(--u)); }
}

.p-iso .st-top{ margin-top: calc(40 * var(--u)); }
@media (min-width: 1024px){ .p-iso .st-top{ margin-top: 0; align-items: start; } }

.p-iso .st-h{ grid-column: 1 / -1; }
.p-iso .st-h h2{ font-size: calc(36 * var(--u)); line-height: 1; letter-spacing: -.012em; }
@media (min-width: 1024px){
  .p-iso .st-h{ grid-column: 1 / span 5; margin-top: calc(100 * var(--u)); }
}
.p-iso .st-intro{ grid-column: 1 / -1; margin-top: calc(24 * var(--u)); }
.p-iso .st-intro p + p{ margin-top: calc(16 * var(--u)); }
@media (min-width: 1024px){
  .p-iso .st-intro{ grid-column: 7 / -1; margin-top: calc(104 * var(--u)); }
}

.p-iso .st-list{
  list-style: none; margin: calc(50 * var(--u)) 0 0; padding: 0;
  border-bottom: 1px solid var(--teal);
}
@media (min-width: 1024px){ .p-iso .st-list{ margin-top: calc(90 * var(--u)); } }

.p-iso .st-head{ display: none; }
@media (min-width: 1024px){
  .p-iso .st-head{
    display: grid;
    border-top: 1px solid var(--teal);
    padding: calc(12 * var(--u)) 0;
  }
  .p-iso .st-head span{
    font-family: var(--mono); font-weight: 400;
    font-size: calc(11 * var(--u)); line-height: 1;
    letter-spacing: .04em; text-transform: uppercase; opacity: .6;
  }
}

.p-iso .st-row{
  border-top: 1px solid var(--teal);
  padding: calc(24 * var(--u)) 0;
  row-gap: calc(12 * var(--u)); align-items: start;
  background: transparent;
  box-shadow: calc(-12 * var(--u)) 0 0 transparent, calc(12 * var(--u)) 0 0 transparent;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
@media (min-width: 1024px){
  .p-iso .st-row{ padding: calc(18 * var(--u)) 0; row-gap: 0; }
}
.p-iso .st-row:hover{
  background: var(--teal-deep); color: var(--paper);
  box-shadow: calc(-12 * var(--u)) 0 0 var(--teal-deep), calc(12 * var(--u)) 0 0 var(--teal-deep);
}
.p-iso .st-row:hover a.st-more{ color: var(--paper); }

/* --- row columns: card at 390, one dense line from 1024 ----------------- */
.p-iso .st-n{ grid-column: 1 / span 1; }
.p-iso .st-id,
.p-iso .st-what,
.p-iso .st-need,
.p-iso .st-ask,
.p-iso .st-more{ grid-column: 2 / -1; }
@media (min-width: 1024px){
  .p-iso .st-n{ grid-column: 1 / span 1; }
  .p-iso .st-id{ grid-column: 2 / span 2; }
  .p-iso .st-what{ grid-column: 4 / span 2; }
  .p-iso .st-need{ grid-column: 6 / span 3; }
  .p-iso .st-ask{ grid-column: 9 / span 3; }
  .p-iso .st-more{ grid-column: 12 / span 1; }
}

.p-iso .st-n,
.p-iso .st-code{
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: calc(12 * var(--u)); line-height: 1;
  letter-spacing: 0; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
/* reserved width so scramble intermediates cannot reflow the row */
.p-iso .st-code{ display: inline-block; min-width: 20ch; white-space: nowrap; }
@media (min-width: 1024px){
  .p-iso .st-n, .p-iso .st-code{ font-size: calc(11 * var(--u)); }
}
.p-iso .st-id{ display: block; }
.p-iso .st-name{
  display: block;
  font-family: var(--sans); font-weight: 500;
  font-size: calc(22 * var(--u)); line-height: 1.1; letter-spacing: -.015em;
  margin-top: calc(8 * var(--u));
}
@media (min-width: 1024px){ .p-iso .st-name{ font-size: calc(18 * var(--u)); } }

.p-iso .st-what,
.p-iso .st-need,
.p-iso .st-ask{
  display: block;
  font-family: var(--sans); font-weight: 400;
  font-size: calc(15 * var(--u)); line-height: 1.4; letter-spacing: 0;
}
@media (min-width: 1024px){
  .p-iso .st-what,
  .p-iso .st-need,
  .p-iso .st-ask{ font-size: calc(13 * var(--u)); line-height: 1.35; }
}

/* the column headings travel with each cell once the row becomes a card */
@media (max-width: 1023px){
  .p-iso .st-row .st-what::before,
  .p-iso .st-row .st-need::before,
  .p-iso .st-row .st-ask::before{
    display: block;
    font-family: var(--mono); font-weight: 400;
    font-size: calc(11 * var(--u)); line-height: 1;
    letter-spacing: .04em; text-transform: uppercase; opacity: .6;
    margin-bottom: calc(7 * var(--u));
  }
  .p-iso .st-row .st-what::before{ content: "What it is"; }
  .p-iso .st-row .st-need::before{ content: "Who needs it"; }
  .p-iso .st-row .st-ask::before{ content: "Who asks for it"; }
}

.p-iso .st-more{
  justify-self: start; align-self: start;
  font-family: var(--mono); font-weight: 400;
  font-size: calc(11 * var(--u)); line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: letter-spacing .3s var(--e-out), color .15s ease;
}
/* tertiary links read bracket-mono, like the header menu control */
.p-iso a.st-more::before{ content: "[ "; }
.p-iso a.st-more::after{ content: " ]"; }
.p-iso a.st-more:hover{ letter-spacing: .1em; }

/* ================= 4b · ALSO UNDER COMPLIANCE ========================== */
.p-iso .iso-records{ padding-top: calc(60 * var(--u)); padding-bottom: calc(40 * var(--u)); }
@media (min-width: 1024px){
  .p-iso .iso-records{ padding-top: calc(120 * var(--u)); padding-bottom: calc(100 * var(--u)); }
}
.p-iso .rec-grid{ margin-top: calc(50 * var(--u)); }
@media (min-width: 1024px){ .p-iso .rec-grid{ margin-top: 0; align-items: start; } }

.p-iso .rec-h{ grid-column: 1 / -1; }
.p-iso .rec-h h2{ font-size: calc(36 * var(--u)); line-height: 1; letter-spacing: -.012em; }
@media (min-width: 1024px){
  .p-iso .rec-h{ grid-column: 3 / span 4; margin-top: calc(60 * var(--u)); }
}
.p-iso .rec-p{ grid-column: 1 / -1; margin-top: calc(20 * var(--u)); }
@media (min-width: 1024px){
  .p-iso .rec-p{ grid-column: 8 / span 4; margin-top: calc(66 * var(--u)); }
}
/* primary action: solid teal, mono caps */
.p-iso .rec-link{
  display: inline-block; margin-top: calc(30 * var(--u));
  background: var(--teal); color: var(--paper);
  border: 1px solid var(--teal);
  padding: calc(18 * var(--u)) calc(34 * var(--u));
  transition: background-color .3s var(--e-out);
}
.p-iso .rec-link:hover{ background: var(--teal-deep); }

/* ====================== 5 · OTHER SERVICES ============================== */
.p-iso .iso-projects{ padding-bottom: calc(15 * var(--u)); }
.p-iso .pj-top{ border-top: 1px solid var(--teal); padding-top: calc(50 * var(--u)); }
@media (min-width: 1024px){ .p-iso .pj-top{ padding-top: calc(100 * var(--u)); } }
.p-iso .pj-h{ grid-column: 1 / -1; text-align: center; }
@media (min-width: 1024px){ .p-iso .pj-h{ grid-column: 3 / -3; } }

.p-iso .pj-grid{
  position: relative;
  margin-top: calc(130 * var(--u));
  row-gap: calc(60 * var(--u));
}
@media (min-width: 1024px){ .p-iso .pj-grid{ padding-bottom: calc(40 * var(--u)); } }

.p-iso .pj-rules{ display: none; }
@media (min-width: 1024px){
  .p-iso .pj-rules{
    display: grid; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; pointer-events: none;
  }
  .p-iso .pj-rules i{
    grid-column: span 3; width: 1px; height: 100%;
    border-left: 1px solid var(--teal); transform: translateX(.5px);
  }
}

.p-iso .pj-col{ grid-column: 1 / -1; }
@media (min-width: 1024px){
  .p-iso .pj-col{
    grid-column: span 3;
    padding: 0 calc(30 * var(--u)) 20vh calc(15 * var(--u));
  }
}
.p-iso .pj-meta{ display: flex; justify-content: space-between; }
@media (min-width: 1024px){ .p-iso .pj-meta{ padding-right: calc(12 * var(--u)); } }

.p-iso .js-project{ position: relative; z-index: 1; margin-top: calc(44 * var(--u)); }
.p-iso .pj-bleed{ display: none; }
@media (min-width: 1024px){
  .p-iso .pj-bleed{
    display: block; position: absolute; top: 0; right: 100%;
    width: 2vw; height: 100%; background: var(--paper); z-index: -1;
  }
}
.p-iso .pj-name{ font-size: calc(36 * var(--u)); line-height: 1; letter-spacing: -.012em; }

.p-iso .pj-plate{
  position: relative; overflow: hidden; width: 100%;
  margin-top: calc(24 * var(--u));
  aspect-ratio: 385 / 260;
  background: var(--teal-deep);
}
.p-iso .pj-plate img,
.p-iso .pj-plate canvas{
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover;
}
.p-iso .pj-plate canvas{ image-rendering: pixelated; transition: opacity .45s ease; }
.p-iso .pj-plate:hover canvas{ opacity: 0; }
.p-iso .pj-hit{ position: absolute; inset: 0; z-index: 3; }
.p-iso .pj-badge{
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: calc(60 * var(--u)); height: calc(60 * var(--u));
  background: var(--white); border: .5px solid var(--teal);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transform: scale(0);
}
.p-iso .pj-badge svg{ width: 40%; height: 40%; display: block; }

.p-iso .pj-btn{ grid-column: 1 / -1; position: relative; z-index: 1; margin-top: calc(100 * var(--u)); }
@media (min-width: 1024px){
  .p-iso .pj-btn{ grid-column: 5 / span 3; justify-self: start; }
}
.p-iso .pj-btn-bleed{ display: none; }
@media (min-width: 1024px){
  .p-iso .pj-btn-bleed{
    display: block; position: absolute; top: 0; right: 0;
    width: 105%; height: 100%; background: var(--paper); z-index: -1;
  }
}

/* --- buttons: label + wiping fill layer --------------------------------- */
.p-iso .btn-solid,
.p-iso .btn-out{ position: relative; display: block; overflow: hidden; }
.p-iso .btn-solid{
  width: 100%; background: var(--teal); border: 1px solid var(--teal); color: var(--paper);
}
@media (min-width: 1024px){
  .p-iso .btn-solid{ width: calc(248 * var(--u)); margin-left: calc(15 * var(--u)); }
}
.p-iso .btn-solid .bt{ display: block; padding: calc(25 * var(--u)) calc(46 * var(--u)); text-align: center; }
.p-iso .btn-solid .bf{
  position: absolute; inset: 0;
  padding: calc(25 * var(--u)) calc(46 * var(--u)); text-align: center;
  background: var(--white); color: var(--teal);
  transform: translateY(101%) scaleX(.5); transform-origin: 50% 100%;
}
.p-iso .btn-out{
  display: inline-block;
  margin-top: calc(50 * var(--u));
  background: var(--paper); border: 1px solid var(--teal); color: var(--teal);
}
@media (min-width: 1024px){ .p-iso .btn-out{ margin-top: calc(64 * var(--u)); } }
.p-iso .btn-out .bt{ display: block; padding: calc(21 * var(--u)); text-align: center; }
.p-iso .btn-out .bf{
  position: absolute; inset: 0; padding: calc(21 * var(--u)); text-align: center;
  background: var(--teal); color: var(--paper);
  transform: translateY(101%) scaleX(.5); transform-origin: 50% 100%;
}

/* ============================= 6 · CTA ================================== */
.p-iso .iso-cta{ padding-bottom: calc(20 * var(--u)); }
@media (min-width: 1024px){
  .p-iso .iso-cta{ margin-top: calc(35 * var(--u)); padding-bottom: calc(12 * var(--u)); }
}
.p-iso .iso-cta hr{
  border: 0; border-top: 1px solid var(--teal);
  transform-origin: 0% 50%;
}
.p-iso .iso-cta hr.hr-last{ margin-top: calc(50 * var(--u)); }
.p-iso .cta-mid{
  display: flex; flex-direction: column; align-items: center;
  margin: calc(50 * var(--u)) 0;
}
.p-iso .cta-h{
  font-size: calc(46 * var(--u)); line-height: 1;
  font-weight: 400; letter-spacing: -.015em; text-align: center;
}
@media (min-width: 1024px){ .p-iso .cta-h{ width: 81.25vw; } }

/* --- SplitText line masks ----------------------------------------------- */
.p-iso .iso-line{ overflow: clip; }

/* --- reduced motion: nothing hides, nothing loops ----------------------- */
@media (prefers-reduced-motion: reduce){
  .p-iso .carousel-track{ animation: none; }
  .p-iso .pj-plate canvas{ transition: none; }
}

/* legibility: substituted fonts need more leading than the source 1.0 ratio */
.p-iso .page-text{ line-height:1.3 }

@media (max-width:640px){ main .hero-plate img{object-position:50% 22%} }

/* --- shared components: re-assert the padding `main.p-iso section{padding:0}`
   strips from styles.css --------------------------------------------------- */
.p-iso .cta-band{ padding: 6rem clamp(1rem,3vw,2.5rem); }
.p-iso .osvc{ padding: 6rem clamp(1rem,3vw,2.5rem); }

/* --- rail: scramble ref cannot reflow or clip while animating ------------- */
.p-iso .rail .ref{
  display: inline-block; min-width: 11ch; text-align: right;
}

/* ---- tracks as cards: the hovered one grows, its sibling steps back ---- */
.p-iso .trk-grid{display:grid; grid-template-columns:1fr; gap:1rem}
@media (min-width:900px){ .p-iso .trk-grid{grid-template-columns:1fr 1fr; gap:1.2rem} }
.p-iso .trk{display:flex; flex-direction:column; background:var(--teal-deep); color:var(--paper); text-decoration:none;
  overflow:hidden; transition:transform .5s var(--e-out), box-shadow .5s var(--e-out)}
.p-iso .trk-img{margin:0; aspect-ratio:16/9; overflow:hidden}
.p-iso .trk-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--e-out)}
.p-iso .trk-body{padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.7rem}
.p-iso .trk-top{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
.p-iso .trk-top h3{font-size:clamp(1.3rem,2vw,1.7rem); font-weight:500; letter-spacing:-.015em}
.p-iso .trk-dur{opacity:.6}
.p-iso .trk-body > p{font-size:.98rem; line-height:1.45; max-width:44ch}
.p-iso .trk-fit{opacity:.5}
@media (hover:hover){
  .p-iso .trk-grid:hover .trk{transform:scale(.985); opacity:.85}
  .p-iso .trk-grid .trk:hover{transform:scale(1.025); opacity:1; box-shadow:0 18px 50px rgba(4,20,18,.28); z-index:1}
  .p-iso .trk:hover .trk-img img{transform:scale(1.05)}
}

/* ---- sectors instead of a sheet ---- */
.p-iso .sec-grid{display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:2.6rem}
@media (min-width:1024px){ .p-iso .sec-grid{grid-template-columns:2fr 1fr} }
.p-iso .sec{border:1px solid var(--line); padding:1.6rem 1.6rem 1.2rem}
.p-iso .sec-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.2rem; margin-bottom:1.2rem}
.p-iso .sec-head h3{font-size:clamp(1.7rem,3vw,2.6rem); font-weight:500; letter-spacing:-.02em}
.p-iso .sec-head .m{opacity:.5}
.p-iso .sec-list{list-style:none; margin:0; padding:0}
.p-iso .sec-list li{border-top:1px solid var(--line)}
.p-iso .sec-list a{display:grid; grid-template-columns:7.5rem 1fr; gap:.2rem 1.4rem; padding:1rem 0; color:inherit;
  text-decoration:none; transition:padding-left .35s var(--e-out)}
.p-iso .sec-list a:hover{padding-left:.6rem}
.p-iso .sec-list b{font-weight:500; font-size:1.05rem; color:var(--teal)}
.p-iso .sec-list span{font-size:1rem}
.p-iso .sec-list i{grid-column:2; font-style:normal; opacity:.55}
@media (max-width:640px){ .p-iso .sec-list a{grid-template-columns:1fr} .p-iso .sec-list i{grid-column:1} }

.p-iso .st-all{display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 2rem; margin-top:2.4rem}
.p-iso .st-all-h{opacity:.5; margin-bottom:.9rem}
.p-iso .st-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.p-iso .st-chips a{display:inline-block; border:1px solid var(--line); padding:.5rem .8rem; color:var(--teal);
  text-decoration:none; transition:border-color .3s, background-color .3s}
.p-iso .st-chips a:hover{border-color:var(--teal); background:rgba(11,92,88,.06)}

/* the cursor chip over the track cards */
.trk-cursor{position:fixed; left:0; top:0; z-index:70; pointer-events:none; background:var(--paper);
  color:var(--ink); padding:.45rem .7rem; opacity:0; transition:opacity .25s var(--e-out); will-change:transform}
.trk-cursor.on{opacity:1}

/* sector categories: titles only */
.p-iso .cat-grid{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2.6rem}
@media (min-width:700px){ .p-iso .cat-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .p-iso .cat-grid{grid-template-columns:repeat(3,1fr)} }
.p-iso .cat{border:1px solid var(--line); padding:1.4rem 1.5rem 1rem; display:flex; flex-direction:column}
.p-iso .cat h3{font-size:clamp(1.35rem,2.1vw,1.8rem); font-weight:500; letter-spacing:-.015em; margin-bottom:1rem}
.p-iso .cat ul{list-style:none; margin:0; padding:0}
.p-iso .cat li{border-top:1px solid var(--line)}
.p-iso .cat a{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.75rem 0;
  color:inherit; text-decoration:none; transition:padding-left .3s var(--e-out)}
.p-iso .cat a:hover{padding-left:.5rem}
.p-iso .cat b{font-weight:500; color:var(--teal); white-space:nowrap}
.p-iso .cat span{font-size:.85rem; opacity:.75; text-align:right}

.p-iso .cat-also{display:flex; flex-wrap:wrap; gap:.3rem .7rem; margin-top:auto; padding-top:1rem; opacity:.55; line-height:1.5}
.p-iso .cat-also a{color:var(--teal); text-decoration:none}
.p-iso .cat-also a:hover{text-decoration:underline; text-underline-offset:3px}

/* mobile: the "Often added" row flows as text so a separator dot can never
   orphan onto its own line (the desktop flex layout stays) */
@media (max-width:639px){
  .p-iso .cat-also{display:block}
  .p-iso .cat-also a{display:inline-block; margin-right:.7rem}
  .p-iso .cat-also span[aria-hidden]{display:none}
}