/* ==========================================================================
   Perry Offer, mobile build.
   Loaded only below 720px, through the media attribute on its <link>, so this
   file contains no media query of its own and the desktop stylesheet keeps
   none either. The breakpoint is declared in exactly one place.
   Governed by the mobile build specification v1.0.
   ========================================================================== */

/* ------------------------------------------------- The two build switch --- */
.page{display:none !important;}
.m-page{display:block;}
.m-bar{display:flex;}

/* Ink on the canvas, the body and the theme colour alike.
   iOS tints the status bar and the bottom bar from the body background rather
   than the canvas, and does not reliably follow theme-color, so setting only
   the canvas left both bars grey on a real handset. All three agree now, so
   whichever Safari reads, it reads ink, and the page ends match it.
   The specification's #DDE0E4 field was there to frame a phone column for
   review on a desktop. It cost a grey band top and bottom on every phone,
   which is a poor trade for a backdrop only a wide screen ever sees. */
html{background:var(--ink);}
body{background:var(--ink);}

/* Mobile tokens layered on the shared palette in styles.css. */
.m-page,.m-bar{
  --m-gutter:16px;
  --m-move:cubic-bezier(.2,.7,.2,1);
  --m-hair-d1:rgba(255,255,255,.13);
  --m-hair-d2:rgba(255,255,255,.16);
  --m-hair-d3:rgba(255,255,255,.22);
  --m-hair-d4:rgba(255,255,255,.34);
}

/* The column fills the phone, and caps at 440px beyond it.
   The specification frames this build at exactly 375px on the grounds that
   "on a phone it fills the screen". That has not been true for years: an
   iPhone 14 Pro is 393pt, a Pixel 412, a Pro Max 430 and an iPhone 16 Pro Max
   440, so a fixed 375 leaves a grey bar down both edges of every current
   handset. The cap keeps the frame from stretching on tablets and desktop,
   which is what the rule was protecting. */
.m-page{
  width:100%;max-width:440px;margin:0 auto;position:relative;
  background:var(--white);overflow-x:clip;padding-bottom:76px;
  box-shadow:0 0 0 1px rgba(11,11,12,.08);
  font-family:Archivo,Helvetica,Arial,sans-serif;color:var(--ink);
}
/* Without this a bare button renders black on navy. Specification section 5. */
.m-page button,.m-bar button{color:inherit;}
.m-page a{text-decoration:none;}
.m-page section{position:relative;}
.m-page [id]{scroll-margin-top:72px;}
.m-page :focus-visible,.m-bar :focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* Rails bleed to the column edge so a card runs off screen as a swipe cue. */
.m-rail{
  display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
  padding:0 var(--m-gutter) 2px;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
}
/* Only a rail inside an already padded container pulls back out to the edge. */
.m-hero__titles{margin:0 calc(var(--m-gutter) * -1);}
.m-rail::-webkit-scrollbar{display:none;}
.m-rail--snap{scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;}
.m-rail--snap > *{flex:0 0 84%;scroll-snap-align:center;}

/* Evidence carousel controls. The rail already takes a swipe; these exist so a
   swipe is never the only way through it. mobile.js reveals them once a fourth
   card is there, so three cards look exactly as they always have. */
.m-ev-nav[hidden]{display:none;}
.m-ev-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px var(--m-gutter) 0;}
.m-ev-nav__count{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-500);margin:0;min-width:7ch;text-align:center;}
.m-ev-nav__btn{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);
  font-size:20px;line-height:1;cursor:pointer;
}
.m-ev-nav__btn:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.m-ev-nav__btn:disabled{opacity:.35;cursor:default;}

/* Track record era selector. The rail is swipeable and stays so; this names the
   era you are on and steps to the one either side, so the section can be read
   without a gesture. It is on whenever there is more than one era, not only
   when the list grows. */
.m-era-nav[hidden]{display:none;}
.m-era-nav{display:flex;align-items:center;gap:10px;padding:12px var(--m-gutter) 0;}
.m-era-nav__now{
  flex:1 1 auto;min-width:0;margin:0;text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.m-era-nav__btn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border:1px solid var(--line-dark-4);border-radius:999px;
  background:transparent;color:var(--white);font-size:20px;line-height:1;cursor:pointer;
}
.m-era-nav__btn:focus-visible{outline:2px solid var(--red-on-dark);outline-offset:3px;}
.m-era-nav__btn:disabled{opacity:.35;cursor:default;}

/* The shared reveal. Animating grid rows reaches the real content height, so
   no panel can be clipped by a fixed max-height that guessed too low. */
.m-sit__panel,.m-layer__panel,.m-case__panel,.m-stage__panel{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .4s var(--m-move),opacity .3s ease;
}
.m-sit__panel > *,.m-layer__panel > *,.m-case__panel > *,.m-stage__panel > *{overflow:hidden;min-height:0;}
.m-sit__panel.is-open,.m-layer__panel.is-open,.m-case__panel.is-open,.m-stage__panel.is-open{grid-template-rows:1fr;opacity:1;}

.m-chev{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;background:var(--red);border-radius:50%;
  color:var(--white);font-size:14px;line-height:1;padding-left:1px;
  transform:rotate(0deg);transition:transform .35s var(--m-move);
}
.m-chev--lg{width:30px;height:30px;font-size:15px;}
[aria-expanded="true"] .m-chev{transform:rotate(90deg);}

.m-pill{
  display:inline-block;background:var(--red);color:var(--white);
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 12px;border-radius:var(--r-pill);
}
.m-label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-500);margin-bottom:11px;}
.m-label--red{color:var(--red);}
.m-label--ink{color:var(--ink);}
.m-label--soft{color:var(--red-on-dark-soft);}
.m-h2{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:27px;line-height:1.06;letter-spacing:-.028em;margin:0;text-wrap:balance;}
.m-h2--light{font-weight:300;font-size:28px;line-height:1.04;letter-spacing:-.03em;}
.m-sub{font-size:12.5px;color:var(--grey-500);margin:6px 0 16px;}
.m-sub--dark{color:var(--on-dark-5);margin-bottom:18px;}
.m-cue{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-500);margin-top:12px;}
.m-head{padding:0 var(--m-gutter) 16px;}
.m-arw{color:var(--red);}
.m-chip{
  flex:none;display:inline-block;font-size:11px;font-weight:600;letter-spacing:.03em;
  color:var(--on-dark-1);border:1px solid rgba(255,255,255,.26);
  padding:8px 13px;border-radius:var(--r-pill);white-space:nowrap;
}
.m-chip--light{color:var(--ink);border-color:var(--line-strong);background:var(--white);padding:6px 11px;white-space:normal;}
.m-chip--dark{font-size:11.5px;border-color:var(--line-dark-4);color:var(--white);padding:7px 12px;white-space:normal;}
.m-chip--strip{font-size:12.5px;color:var(--grey-700);border-color:var(--line);padding:8px 14px;}

/* Buttons. Height is set with min-height, never with padding alone. */
.m-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--r-card);padding:0 14px;text-align:center;
}
.m-btn--primary{background:var(--red);color:var(--white);transition:background .25s ease;}
.m-btn--secondary{color:var(--white);border:1px solid var(--m-hair-d4);letter-spacing:.08em;}
.m-btn--link{min-height:48px;color:var(--red-on-dark);font-size:11.5px;letter-spacing:.14em;}
.m-btn__chev{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border:1px solid currentColor;border-radius:var(--r-chevron);font-size:11px;line-height:1;padding-left:1px;flex:none;}

/* ------------------------------------------- 01 Progress and the header --- */
.m-progress{position:absolute;top:0;left:0;height:2px;background:var(--red);z-index:60;width:0;transition:width .08s linear;}
/* Two states, reading like the desktop header: ink at the top of the page,
   white once the reader is past the threshold. The desktop bar is fixed and
   floats over its hero, so transparent works there. This one is sticky and in
   flow, with the hero below it, so transparent would just show white page and
   swallow the white wordmark. Ink gives the same result the desktop does, and
   settles what iOS tints the status bar, since the top of the page is now ink. */
.m-nav{position:sticky;top:0;z-index:50;background-color:var(--ink);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-dark-1);box-shadow:none;
  transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease;}
.m-nav.is-scrolled{background-color:rgba(255,255,255,.95);border-bottom-color:var(--line);box-shadow:var(--shadow-nav);}
/* The sheet is white, so the bar goes solid with it even at the top. */
.m-nav:has(.m-menu.is-open){background-color:rgba(255,255,255,.95);border-bottom-color:var(--line);}
.m-nav__bar{display:flex;align-items:center;gap:10px;padding:11px var(--m-gutter);}
.m-burger{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;margin-left:-10px;background:none;border:0;cursor:pointer;}
.m-burger span{width:20px;height:2px;background-color:var(--white);
  transition:transform .3s var(--m-move),opacity .2s ease,background-color .35s ease;}
.m-nav.is-scrolled .m-burger span,.m-nav:has(.m-menu.is-open) .m-burger span{background-color:var(--ink);}
.m-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.m-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.m-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.m-nav__mark{flex:1 1 auto;display:flex;align-items:center;min-height:44px;gap:8px;min-width:0;
  color:var(--white);transition:color .35s ease;}
.m-nav.is-scrolled .m-nav__mark,.m-nav:has(.m-menu.is-open) .m-nav__mark{color:var(--ink);}
.m-nav__mark span:first-child{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;}
.m-nav__dot{flex:none;width:4px;height:4px;background:var(--red);border-radius:50%;}
.m-nav__cta{flex:none;display:flex;align-items:center;min-height:44px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white);background:var(--red);padding:0 13px;border-radius:var(--r-card);transition:background .25s ease;}

.m-menu{display:grid;grid-template-rows:0fr;opacity:0;background:var(--white);
  transition:grid-template-rows .38s var(--m-move),opacity .3s ease;}
.m-menu > *{overflow:hidden;min-height:0;}
.m-menu.is-open{grid-template-rows:1fr;opacity:1;border-top:1px solid var(--line);}
.m-menu__nav{display:grid;padding:4px var(--m-gutter) 14px;}
.m-menu__link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;
  border-bottom:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  transition:padding-left .3s var(--m-move);}
.m-menu__link:active{padding-left:6px;color:var(--red);}
.m-menu__n{font-size:9.5px;font-weight:700;letter-spacing:.18em;color:var(--grey-500);}

/* ---------------------------------------------------------- 02 Hero ------ */
.m-hero{background:var(--ink);color:var(--white);}
/* The band is wider than the portrait is tall, so cover scales to the width
   and Perry ends up small, low in the frame, with dead ceiling above him.
   The scale zooms in on his head and the origin is the head itself, so it
   grows in place instead of drifting. The lift is a percentage, not pixels,
   because the band height varies with the viewport: a fixed pixel lift that
   frames him at 390 cuts the top of his head at 320. At 1.55 and -8% the
   whole head clears the eyebrow pill at every width the build supports.
   overflow hides what the zoom pushes outside the band. */
.m-hero__band{position:relative;height:50svh;min-height:321px;overflow:hidden;}
.m-hero__band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 16%;
  transform:translateY(-8%) scale(1.55);transform-origin:41% 42%;}
.m-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.58) 0%,rgba(11,11,12,.08) 30%,rgba(11,11,12,.80) 72%,#0B0B0C 100%);}
.m-hero__copy{position:absolute;left:var(--m-gutter);right:var(--m-gutter);bottom:18px;display:grid;gap:14px;
  animation:rise .8s .1s var(--m-move) both;}
.m-hero__copy .m-pill{justify-self:start;}
.m-hero__h1{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:35px;line-height:1.01;letter-spacing:-.032em;margin:0;text-wrap:balance;text-shadow:0 2px 22px rgba(11,11,12,.5);}
.m-hero__h1 em{font-style:italic;color:var(--red-on-dark);}
.m-hero__below{padding:2px var(--m-gutter) 26px;display:grid;gap:16px;}
.m-hero__lead{font-size:15.5px;line-height:1.58;color:var(--on-dark-3);text-wrap:pretty;}
.m-hero__interim{font-size:12px;line-height:1.5;color:var(--on-dark-5);margin:-6px 0 0;}
.m-hero__ctas{display:grid;gap:9px;}
.m-hero__specialisms{display:grid;gap:9px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14);}
.m-hero__specialisms-label{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-5);}
.m-hero__spec-list{margin:0 calc(var(--m-gutter) * -1);}

/* -------------------------------------------------------- 03 Evidence ---- */
.m-proof{padding:28px 0 30px;border-bottom:1px solid var(--line);background:var(--white);}
.m-ev{border-radius:3px;padding:20px 18px;display:grid;gap:14px;align-content:start;background:var(--white);border:1px solid var(--line);color:var(--ink);}
.m-ev--navy{background:var(--navy);border-color:var(--m-hair-d2);color:var(--white);}
.m-ev__tag{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);}
/* At 9px the lightest band of the navy gradient needs the softer red. */
.m-ev--navy .m-ev__tag{color:var(--red-on-dark-soft);}
.m-ev--navy .m-arw{color:var(--red-on-dark);}
.m-ev__co{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:24px;line-height:1.1;letter-spacing:-.02em;margin:0;}
.m-ev__meta{font-size:11.5px;color:var(--grey-500);margin-top:6px;text-wrap:pretty;}
.m-ev--navy .m-ev__meta,.m-ev--navy .m-ev__k,.m-ev--navy .m-ev__body{color:var(--on-dark-5);}
.m-ev__rows{display:grid;gap:0;}
.m-ev__rows li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #F0F1F3;}
.m-ev--navy .m-ev__rows li{border-bottom-color:var(--m-hair-d1);}
.m-ev__k{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-500);}
.m-ev__v{font-family:Newsreader,Georgia,serif;font-size:19px;letter-spacing:-.02em;text-align:right;white-space:nowrap;}
.m-ev__body{font-size:13px;line-height:1.55;color:var(--grey-500);}

/* ------------------------------------------------------ 04 Situations ---- */
.m-situations{padding:28px var(--m-gutter);border-bottom:1px solid var(--line);
  background-color:var(--off-white);
  background-image:linear-gradient(rgba(246,247,248,.94),rgba(246,247,248,.97)),url("../img/city-aerial.jpg");
  background-size:cover;background-position:50% 30%;}
.m-sit__list{display:grid;gap:0;border-top:1px solid var(--line-strong);}
.m-sit{border-bottom:1px solid var(--line-strong);}
.m-sit__btn{width:100%;text-align:left;cursor:pointer;background:none;border:0;padding:14px 0;min-height:48px;display:flex;gap:12px;align-items:center;}
.m-sit__n{flex:none;font-family:Newsreader,Georgia,serif;font-size:20px;line-height:1;color:var(--red);width:26px;}
.m-sit__title{flex:1 1 auto;min-width:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;text-wrap:balance;}
.m-sit__inner{padding:0 0 0 38px;display:grid;gap:11px;}
.m-sit__body{font-size:13.5px;line-height:1.58;color:var(--grey-500);}
.m-sit__chips{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;}

/* ------------------------------------------------ 05 Operating system ---- */
.m-approach{background:var(--ink);color:var(--white);padding:26px var(--m-gutter) 32px;}
.m-symptom{background:var(--red);border-radius:3px;padding:14px;display:grid;gap:7px;margin:16px 0 6px;}
.m-symptom__k{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}
.m-symptom__v{font-family:Newsreader,Georgia,serif;font-size:21px;line-height:1.14;letter-spacing:-.025em;}
.m-up{display:flex;justify-content:center;margin:0 0 6px;font-size:15px;color:var(--red-on-dark);}
.m-up--muted{margin:6px 0 0;color:var(--on-dark-11);}
.m-layers{display:grid;gap:5px;}
.m-layer{border:1px solid var(--m-hair-d2);border-left:3px solid rgba(255,255,255,.24);border-radius:var(--r-card);
  background-color:rgba(255,255,255,.04);transition:background-color .3s ease,border-color .3s ease;}
.m-layer:has(.m-layer__btn[aria-expanded="true"]){background-color:rgba(21,53,126,.55);border-color:var(--m-hair-d4);border-left-color:var(--red);}
.m-layer__btn{width:100%;text-align:left;cursor:pointer;background:none;border:0;min-height:48px;
  display:flex;align-items:center;gap:11px;padding:12px 13px;}
.m-layer__n{flex:none;font-family:Newsreader,Georgia,serif;font-size:15px;color:var(--red-on-dark);transition:color .3s ease;}
.m-layer__btn[aria-expanded="true"] .m-layer__n{color:var(--white);}
.m-layer__title{flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;}
.m-layer__kind{flex:none;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-11);}
.m-layer__panel p{padding:0 13px 0 39px;font-size:13.5px;line-height:1.5;color:var(--on-dark-5);}
.m-layer__panel p::after{content:"";display:block;height:13px;}
.m-buys{border:1px solid var(--m-hair-d3);border-radius:3px;padding:13px;margin-top:6px;display:grid;gap:6px;}
.m-buys__k{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-5);}
.m-buys__v{font-size:13.5px;line-height:1.5;}

/* --------------------------------------------- 06 and the sectors rail --- */
.m-strip{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;}
.m-strip .m-label{padding:0 var(--m-gutter) 10px;margin:0;}
.m-strip .m-rail{gap:7px;padding:0 var(--m-gutter);}

/* -------------------------------------------------- 07 Flagship cases ---- */
.m-cases{background:linear-gradient(168deg,var(--navy-1) 0%,var(--navy-2) 46%,var(--navy-3) 100%);color:var(--white);padding:26px var(--m-gutter) 28px;}
.m-cases__list{display:grid;gap:10px;}
.m-case{border:1px solid rgba(255,255,255,.18);border-radius:3px;background:rgba(255,255,255,.05);transition:background-color .3s ease,border-color .3s ease;}
.m-case:has(.m-case__btn[aria-expanded="true"]){background:rgba(11,11,12,.30);border-color:rgba(255,255,255,.30);}
.m-case__btn{width:100%;text-align:left;cursor:pointer;background:none;border:0;padding:16px 15px;display:grid;gap:10px;min-height:48px;}
.m-case__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.m-case__id{min-width:0;}
.m-case__name{display:block;font-family:Newsreader,Georgia,serif;font-size:22px;line-height:1.1;letter-spacing:-.025em;}
.m-case__meta{display:block;font-size:11px;color:var(--on-dark-5);margin-top:5px;}
.m-case__head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.m-case__fig{font-family:Newsreader,Georgia,serif;font-size:22px;line-height:1;letter-spacing:-.025em;white-space:nowrap;}
.m-case__fig .m-arw{color:var(--red-on-dark);}
.m-case__figk{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-5);}
.m-case__stages{padding:0 15px;display:grid;gap:0;border-top:1px solid var(--m-hair-d2);}
.m-case__stages > .m-stage:last-child{padding-bottom:15px;}
.m-stage{border-bottom:1px solid var(--m-hair-d1);}
.m-stage__btn{width:100%;text-align:left;cursor:pointer;background:none;border:0;padding:13px 0;min-height:48px;display:flex;align-items:center;gap:11px;}
.m-stage__rail{flex:none;width:3px;height:26px;background-color:rgba(255,255,255,.22);transition:background-color .3s ease;}
.m-stage__btn[aria-expanded="true"] .m-stage__rail{background-color:var(--red);}
.m-stage__n{flex:none;font-family:Newsreader,Georgia,serif;font-size:15px;color:var(--on-dark-5);transition:color .3s ease;}
.m-stage__btn[aria-expanded="true"] .m-stage__n{color:var(--red-on-dark);}
.m-stage__label{flex:1 1 auto;min-width:0;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.m-stage__chev{flex:none;font-size:13px;line-height:1;color:var(--white);transform:rotate(0deg);transition:transform .3s var(--m-move);}
.m-stage__btn[aria-expanded="true"] .m-stage__chev{transform:rotate(90deg);}
.m-stage__inner{padding:0 0 0 17px;display:grid;gap:10px;}
.m-stage__body{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:17.5px;line-height:1.34;letter-spacing:-.02em;}
.m-stage__points{display:grid;gap:7px;padding-bottom:14px;}
.m-stage__points li{display:flex;gap:9px;font-size:12.5px;line-height:1.5;color:var(--on-dark-2);}
.m-stage__points li::before{content:"";flex:none;width:4px;height:4px;margin-top:7px;background:var(--red);}

/* ------------------------------------------------- 08 Portfolio dial ----- */
.m-portfolio{padding:26px 0 34px;border-bottom:1px solid var(--line);background:var(--white);}
.m-portfolio .m-head{padding-bottom:12px;}
.m-years{gap:7px;padding:0 var(--m-gutter) 14px;}
.m-year{flex:none;min-width:66px;min-height:52px;cursor:pointer;border-radius:var(--r-card);padding:8px 10px;
  display:grid;gap:4px;text-align:center;background-color:var(--white);border:1px solid var(--line-strong);color:var(--grey-700);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;}
.m-year[aria-selected="true"]{background-color:var(--ink);border-color:var(--ink);color:var(--white);}
.m-year__y{font-family:Newsreader,Georgia,serif;font-size:15px;line-height:1;}
.m-year__s{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-500);}
.m-year[aria-selected="true"] .m-year__s{color:var(--red-on-dark);}
.m-tile__wrap{margin:0 var(--m-gutter);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:grid;}
.m-tile{grid-area:1/1;visibility:hidden;}
.m-tile.is-active{visibility:visible;}
.m-tile__head{background:var(--ink);color:var(--white);padding:13px 15px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.m-tile__co{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:21px;line-height:1.06;letter-spacing:-.025em;margin:0;}
.m-tile__yr{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-on-dark);}
.m-tile__body{padding:14px 15px;display:grid;gap:12px;min-height:230px;align-content:start;}
.m-tile__meta{font-size:11.5px;color:var(--grey-500);}
.m-tile__fig{display:flex;align-items:baseline;gap:9px;}
.m-tile__fig b{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--red);}
.m-tile__fig span{font-size:11.5px;line-height:1.4;color:var(--grey-500);}
.m-tile__row{display:grid;gap:4px;padding-top:10px;border-top:1px solid var(--line);}
.m-tile__k{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-500);}
.m-tile__v{font-size:13px;line-height:1.5;}

/* ------------------------------------------------- 09 Private capital ---- */
.m-capital{background:var(--ink);color:var(--white);padding:0 0 34px;}
.m-capital__band{position:relative;height:260px;}
.m-capital__band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 42%;}
.m-capital__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.14) 0%,rgba(11,11,12,.02) 30%,rgba(11,11,12,.55) 70%,#0B0B0C 100%);}
.m-capital__copy{position:absolute;left:var(--m-gutter);right:var(--m-gutter);bottom:12px;}
.m-capital__copy .m-pill{margin-bottom:9px;}
.m-capital__line{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:23px;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;}
.m-captabs{gap:7px;padding:14px var(--m-gutter) 12px;}
.m-captab{flex:none;cursor:pointer;font-size:11.5px;font-weight:600;min-height:44px;padding:10px 14px;border-radius:var(--r-pill);
  white-space:nowrap;border:1px solid var(--m-hair-d4);background-color:rgba(255,255,255,.08);color:var(--white);
  transition:background-color .25s ease,border-color .25s ease;}
.m-captab[aria-selected="true"]{background-color:var(--red);border-color:var(--red);}
.m-cap__wrap{padding:0 var(--m-gutter);display:grid;min-height:150px;}
.m-cap{grid-area:1/1;display:grid;gap:11px;align-content:start;visibility:hidden;}
.m-cap.is-active{visibility:visible;}
.m-cap__theme{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red-on-dark);}
.m-cap__note{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:19px;line-height:1.32;letter-spacing:-.02em;}
.m-cap__chips{display:flex;flex-wrap:wrap;gap:6px;}
.m-notclaimed{margin:12px var(--m-gutter) 0;font-size:12px;line-height:1.5;color:var(--on-dark-5);border-left:2px solid var(--red);padding-left:11px;}

/* --------------------------------------------- 10 Perry at a glance ------ */
.m-glance{padding:0 0 26px;border-bottom:1px solid var(--line);background:var(--white);}
.m-glance__band{position:relative;}
/* 35 percent, not the specification's 15. In a 250px band that high a window
   showed mostly the room behind him and cut his face at the mouth, with the
   pill sitting on his chin. This centres the head with clear headroom. */
.m-glance__band img{display:block;width:100%;height:250px;object-fit:cover;object-position:38% 35%;}
.m-glance__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.06) 0%,rgba(11,11,12,.02) 40%,rgba(11,11,12,.72) 100%);}
.m-glance__pill{position:absolute;left:var(--m-gutter);right:var(--m-gutter);bottom:12px;}
.m-glance__card{margin:-1px var(--m-gutter) 0;background:var(--ink);color:var(--white);padding:16px 15px;display:grid;gap:12px;}
.m-glance__line{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:21px;line-height:1.14;letter-spacing:-.025em;}
.m-glance__facts{gap:16px;border-top:1px solid rgba(255,255,255,.2);padding:12px 0 0;}
.m-fact{flex:none;display:grid;gap:5px;}
.m-fact__v{font-family:Newsreader,Georgia,serif;font-size:22px;line-height:1;letter-spacing:-.025em;color:var(--red-on-dark);white-space:nowrap;}
.m-fact__v .m-arw{color:var(--red-on-dark);}
.m-fact__k{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-5);white-space:nowrap;}
.m-glance__body{padding:14px var(--m-gutter) 0;}
/* Reaches the page only once glance:cv.url holds an asset; until then the
   renderer drops it rather than ship a dead link. */
.m-glance__cv{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:16px var(--m-gutter) 0;min-height:44px;padding:12px 18px;
  border:1px solid var(--line);border-radius:var(--r-card);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);
}
.m-glance__cv:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.m-gtabs{display:flex;gap:6px;margin-bottom:12px;}
.m-gtab{flex:1 1 auto;cursor:pointer;min-height:44px;font-size:11.5px;font-weight:700;letter-spacing:.06em;border-radius:var(--r-card);
  padding:0 8px;background-color:var(--white);border:1px solid var(--line-strong);color:var(--grey-700);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;}
.m-gtab[aria-selected="true"]{background-color:var(--ink);border-color:var(--ink);color:var(--white);}
.m-gp__wrap{display:grid;min-height:230px;}
.m-gp{grid-area:1/1;display:grid;gap:0;align-content:start;visibility:hidden;}
.m-gp.is-active{visibility:visible;}
.m-gp__row{display:grid;gap:6px;padding:13px 0;border-top:1px solid var(--line);}
.m-gp__k{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);}
.m-gp__v{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3;}
.m-gp__d{font-size:12.5px;line-height:1.5;color:var(--grey-500);text-wrap:pretty;}

/* ------------------------------------------------- 11 Track record ------- */
.m-track{color:var(--white);}
.m-track__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;}
.m-track__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.56) 46%,rgba(11,11,12,.80) 100%);}
.m-track__inner{position:relative;padding:26px 0 28px;}
.m-track .m-head{padding-bottom:14px;}
.m-era{background:rgba(11,11,12,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--m-hair-d3);border-radius:3px;padding:16px 15px;display:grid;gap:11px;align-content:start;}
.m-era__years{font-family:Newsreader,Georgia,serif;font-size:15px;color:var(--red-on-dark);}
.m-era__label{font-size:15px;font-weight:600;}
.m-era__meta{font-size:11.5px;color:var(--on-dark-5);}
.m-era__points{display:grid;gap:7px;border-top:1px solid var(--m-hair-d2);padding-top:10px;}
.m-era__points li{display:flex;gap:9px;font-size:12.5px;line-height:1.5;color:var(--on-dark-1);}
.m-era__points li::before{content:"";flex:none;width:4px;height:4px;margin-top:7px;background:var(--red);}

/* ------------------------------------------- 12 Quote strip, required ---- */
.m-quote{background:var(--white);padding:26px var(--m-gutter) 28px;display:flex;gap:13px;}
.m-quote__spine{flex:none;width:3px;background:var(--red);}
.m-quote__body{flex:1 1 auto;min-width:0;}
.m-quote__text{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:23px;line-height:1.24;letter-spacing:-.025em;margin:0 0 16px;}
.m-quote__text em{font-style:normal;color:var(--red);}
.m-seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid var(--line);padding-top:14px;}
.m-seat{display:grid;gap:5px;}
.m-seat__v{font-family:Newsreader,Georgia,serif;font-size:23px;line-height:1;letter-spacing:-.025em;}
.m-seat__k{font-size:8.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-500);}

/* ------------------------------------------------------- 13 Contact ------ */
.m-contact{color:var(--white);background:var(--ink);}
.m-contact__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;}
.m-contact__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.90) 0%,rgba(11,11,12,.78) 62%,rgba(11,11,12,.82) 100%);}
.m-contact__inner{position:relative;padding:30px var(--m-gutter) 34px;}
.m-contact__lead{font-size:14.5px;line-height:1.58;color:var(--on-dark-2);margin:0 0 20px;}
.m-contact__actions{display:grid;gap:9px;}
.m-contact__foot{font-size:11.5px;line-height:1.5;color:var(--on-dark-5);margin:20px 0 0;text-wrap:pretty;}
.m-contact .m-h2{margin-bottom:12px;font-size:29px;}

/* -------------------------------------------------- 14 Fixed bottom bar -- */
/* max, not calc. The specification adds the safe area inset to the base
   padding, which on a handset reporting 34px leaves the buttons floating 44px
   above the bottom of the bar. Worse, when Safari's own action bar is on
   screen the viewport already excludes it, so that padding is dead space.
   max takes whichever clearance is actually needed and never both. */
.m-bar{
  position:fixed;left:50%;bottom:0;z-index:55;width:100%;max-width:440px;
  transform:translateX(-50%) translateY(130%);
  transition:transform .35s var(--m-move);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(11,11,12,.10);
  padding:10px 14px max(10px, env(safe-area-inset-bottom));gap:10px;align-items:center;
  font-family:Archivo,Helvetica,Arial,sans-serif;
}
.m-bar.is-visible{transform:translateX(-50%) translateY(0);}
.m-bar a{text-decoration:none;}
.m-bar__cta{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  background:var(--red);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-card);}
.m-bar__cta .m-btn__chev{width:20px;height:20px;}
.m-bar__top{flex:none;display:flex;align-items:center;justify-content:center;width:48px;min-height:48px;
  border:1px solid var(--line-strong);border-radius:var(--r-card);color:var(--ink);font-size:15px;line-height:1;}