@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/plus-jakarta-sans-latin-300-600.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:block}
@font-face{font-family:Zodiak;src:url(fonts/zodiak-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block}
:root{--deep:#040A43;--navy:#0D0D4B;--blue:#1745CE;--blue2:#0047BB;--tint:#DAE3ED;--white:#FFFFFF;--gray:#50555B;--dim:#9E9EB7;--rail:#3D3D6F;
--gut:20px;--max:1280px;--hdr:72px;--logo-h:35px;--logo-w:250.2px}
@media (min-width:600px){:root{--gut:40px;--hdr:88px;--logo-h:36px;--logo-w:257.4px}}
@media (min-width:1180px){:root{--gut:80px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--deep);font:400 17px/1.5 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@media (min-width:1180px){body{font-size:18px}}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.on-dark :focus-visible,.hdr--dark :focus-visible,.menu :focus-visible{outline-color:var(--white)}
main:focus{outline:none}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.lbl{font-weight:600;font-size:13px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}

/* the button: electric blue, white label, SemiBold, sentence case (guidelines 3.2; plan 5.2); hover Blue 2728 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:4px;background:var(--blue);color:var(--white);font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--blue2)}
.btn--lg{min-height:52px;padding:0 28px;font-size:17px}
.btn--wide{display:flex;width:100%}

/* the skip link: off screen until focused */
.skip{position:absolute;left:var(--gut);top:-100px;z-index:20;padding:10px 16px;border-radius:4px;background:var(--white);color:var(--deep);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- header (plan 1.1) */
.hdr{position:relative;z-index:5;background:var(--white);color:var(--deep)}
.hdr--dark{background:var(--deep);color:var(--white)}
.hdr--tint{background:var(--tint)}
.hdr__in{display:flex;align-items:center;gap:24px;min-height:var(--hdr)}
.hdr__logo{display:block;flex:none;padding:calc(var(--logo-h) / 2) 0;margin:calc(var(--logo-h) / -2) 0}
.logo{width:var(--logo-w);height:var(--logo-h)}
.hdr__nav,.hdr__actions{display:none}
.hdr__nav ul{display:flex;gap:32px}
.hdr__link,.hdr__signin,.ftr a{text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1px}
.hdr__link{font-size:16px;line-height:1.2;padding:8px 0;white-space:nowrap}
.hdr__link:hover,.hdr__link[aria-current],.hdr__signin:hover,.ftr a:hover,.ftr a[aria-current]{text-decoration-line:underline}
.hdr__link:hover,.hdr__signin:hover,.ftr a:hover{text-decoration-thickness:2px}
.hdr__actions{align-items:center;gap:28px;margin-left:auto}
.hdr__signin{font-size:15px;line-height:1.2;padding:8px 0;white-space:nowrap}
.hdr__menu{margin-left:auto;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid currentColor;border-radius:4px;font-weight:600;font-size:15px;line-height:1;text-decoration:none}
@media (min-width:1180px){
  .hdr__nav{display:block;margin-left:24px}
  .hdr__actions{display:flex}
  .hdr__menu{display:none}
}

/* the phone menu: a full-screen deep navy panel (plan 1.1). Opens without a script through :target; the script adds
   the button behaviour (aria-expanded, Escape, focus) */
.menu{display:none;position:fixed;inset:0;z-index:30;overflow-y:auto;background:var(--deep);color:var(--white)}
.menu:target,.menu.is-open{display:block}
.js .menu:target:not(.is-open){display:none}
.menu__body{padding-top:24px;padding-bottom:48px}
.menu__list{display:flex;flex-direction:column;margin-bottom:32px}
.menu__link{display:block;padding:12px 0;font-size:24px;line-height:1.25;text-decoration:none}
.menu__link[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.menu__signin{display:inline-block;margin-top:24px;padding:8px 0;font-size:17px;text-underline-offset:5px}
@media (min-width:1180px){.menu,.menu:target,.menu.is-open{display:none}}
body.menu-open{overflow:hidden}

/* ---------------------------------------------------------------- footer (plan 1.2): white, a navy hairline on top */
.ftr{border-top:1px solid var(--navy);background:var(--white);color:var(--deep)}
/* the groups take their own widths (the email is the widest line), spread across the row */
.ftr__in{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:40px 48px;padding-top:56px;padding-bottom:48px}
.ftr__brand{grid-column:1/-1}
.ftr__logo{display:inline-block;padding:18px 0;margin:-18px 0}
.ftr__logo .logo{height:36px;width:257.4px}
.ftr__bp{margin-top:24px;max-width:30em;font-size:16px;line-height:1.5}
.ftr__nav{display:contents}
.ftr__group .lbl{margin-bottom:14px}
.ftr__group li{font-size:16px;line-height:1.3;white-space:nowrap}
.ftr__group li+li{margin-top:10px}
.ftr__group a,.ftr__soon{display:inline-block;padding:2px 0}
.ftr__soon{color:var(--gray)}
.ftr__legal{padding-bottom:40px}
.ftr__legal p{color:var(--gray);font-size:14px;line-height:1.5}
@media (min-width:600px){
  .ftr__in{grid-template-columns:repeat(4,auto);justify-content:space-between;column-gap:32px;padding-top:72px;padding-bottom:64px}
}
@media (min-width:1180px){
  .ftr__in{grid-template-columns:minmax(0,1fr) repeat(4,auto);justify-content:stretch;column-gap:64px}
  .ftr__brand{grid-column:auto;padding-right:24px}
}

/* ---------------------------------------------------------------- placeholder pages (steps 1 and 2 only) */
.band{min-height:360px;padding:96px 0}
.band--dark{background:var(--deep);color:var(--white)}
.band--tint{background:var(--tint)}
.band__title{font-weight:300;font-size:40px;line-height:1.2}
@media (min-width:1180px){.band{min-height:420px;padding:120px 0}.band__title{font-size:56px}}

/* ---------------------------------------------------------------- Home: the hero (plan 3) */
.home .hdr{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom:1px solid var(--rail)}
.hero{position:relative;overflow:hidden;background:var(--deep);color:var(--white)}
.hero__clip{position:absolute;left:0;right:0;top:var(--hdr);bottom:0;overflow:hidden;pointer-events:none}
.hero__glass{position:absolute}
.hero__glass svg{width:100%;height:auto}
.hero__glass{width:calc(210px * 1.0238);left:calc(100% - 150px - 210px * 0.0119);top:calc(150px - 210px * 1.0119)}
@media (min-width:600px){.hero__glass{width:calc(39vw * 1.0238);left:calc(100% - 27vw - 39vw * 0.0119);top:calc(23vw - 39vw * 1.0119)}}
@media (min-width:1180px){.hero__glass{width:calc(62.5vw * 1.0238);left:calc(100% - 26vw - 62.5vw * 0.0119);top:calc(100% - 300px - 62.5vw * 1.0119)}}
/* the promise: Zodiak Bold, white, set solid (plan 3.1). Four lines on narrow screens (the posts' setting), two from
   760 px; the size follows the width so the lines never wrap again: two lines measure 14.25 em, "coachable agents."
   9.14 em (measured in the served font) */
.hero__in{position:relative;padding-top:calc(var(--hdr) + 178px);padding-bottom:48px}
.hero__promise{font-family:Zodiak,Georgia;font-weight:700;font-size:min(56px,calc((100vw - 2 * var(--gut)) / 9.3));line-height:1;letter-spacing:0}
.hero__sub{margin-top:20px;max-width:32em;color:var(--tint);font-size:17px;line-height:1.5}
.hero__actions{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:28px}
.hero__how{align-self:flex-start;padding:6px 0;font-weight:600;font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.hero__how:hover{text-decoration-thickness:2px}
@media (min-width:600px){
  .hero__in{padding-top:calc(var(--hdr) + 23vw + 40px);padding-bottom:56px}
  .hero__sub{font-size:19px}
  .hero__actions{flex-direction:row;align-items:center;gap:32px}
  .hero__how{align-self:auto}
}
@media (min-width:760px){
  .hero__promise{font-size:min(72px,calc((100vw - 2 * var(--gut)) / 14.4))}
  .hero__promise .br-ph{display:none}
}
@media (min-width:1180px){
  .hero__in{display:flex;flex-direction:column;min-height:min(max(720px,100vh),880px);padding-top:calc(var(--hdr) + 80px);padding-bottom:56px}
  .hero__promise{font-size:min(72px,calc((74vw - 144px) / 14.4))}
  .hero__sub{margin-top:28px;font-size:20px;max-width:30em}
  .hero__actions{margin-top:40px}
}
@media (min-width:1440px){
  .hero__promise{font-size:min(72px,calc((24vw + 576px) / 14.4))}
}

/* the four steps (plan 3.2 to 3.4). Without the script: all four lit, each with its line, four columns from 900 px, a
   numbered list below it. With the script, with or without reduced motion: one step lit at a time; at rest (after three
   rounds) all four lit together, as without the script. */
.steps{margin-top:48px}
.steps__list{display:grid;gap:24px}
.step{position:relative;color:var(--white)}
.step__label{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px}
.step__rail{display:none;grid-column:1/-1;height:2px;margin-bottom:20px;background:var(--rail)}
.step__n{font-weight:300;font-size:15px;line-height:1.2;font-variant-numeric:lining-nums tabular-nums}
.step__name{font-weight:600;font-size:13px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.step__line{display:block;margin-top:8px;font-size:17px;line-height:1.45;text-wrap:pretty}
.hero__sub{text-wrap:pretty}
@media (min-width:900px){
  .steps{margin-top:auto;padding-top:64px}
  .steps__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .step__rail{display:block}
  .step__line{margin-top:12px;font-size:16px;line-height:1.5}
}

/* the player: only with the script (which marks the row data-ready), the same with or without reduced motion; with
   reduced motion it is lighter (below) */
.js .steps[data-ready] .step{color:var(--dim);transition:color .4s ease}
.js .steps[data-ready] .step.is-lit,.js .steps[data-ready].is-rest .step{color:var(--white)}
.js .steps[data-ready] .step__fill{display:block;height:100%;background:var(--white);transform:scaleX(0);transform-origin:0 50%}
.js .steps[data-ready].is-rest .step__fill{transform:none}
.js .steps[data-ready] .step__hit{position:absolute;inset:-8px;z-index:1;margin:0;padding:0;border:0;border-radius:4px;background:none;color:inherit;font:inherit;cursor:pointer}
@media (min-width:900px){
  /* the row keeps the width it had beside the old button (32 px gap + 76 px), so the four columns stay where they were */
  .js .steps{padding-right:108px}
}
@media (max-width:899px){
  /* the names in one row; under them only the lit step's line, in a box the height of the longest (plan 3.3) */
  .js .steps[data-ready]:not(.is-rest) .steps__list{grid-template-columns:repeat(4,auto);justify-content:space-between;gap:16px 8px}
  .js .steps[data-ready]:not(.is-rest) .step{display:contents}
  .js .steps[data-ready]:not(.is-rest) .step__label{grid-row:1;position:relative;grid-template-columns:auto;row-gap:4px;color:var(--dim);transition:color .4s ease}
  .js .steps[data-ready]:not(.is-rest) .is-lit .step__label{color:var(--white)}
  .js .steps[data-ready]:not(.is-rest) .step__rail{display:block;margin-bottom:8px}
  .js .steps[data-ready]:not(.is-rest) .step__line{grid-row:2;grid-column:1/-1;margin:0;color:var(--white);opacity:0;transition:opacity .4s ease}
  .js .steps[data-ready]:not(.is-rest) .is-lit .step__line{opacity:1}
  .js .steps[data-ready].is-rest .step__hit{display:none}
}
/* with reduced motion (the client's choice, 12 Oct): the same layout and the same four steps on the same timing, but each
   step changes by a slower fade only (0.8 s); the lit step's line shows whole and fades in with it, never growing; nothing
   slides, scales or travels */
@media (prefers-reduced-motion:reduce){
  .js .steps[data-ready] .step{transition:color .8s ease}
  .js .steps[data-ready] .step__fill{transform:none;opacity:0;transition:opacity .8s ease}
  .js .steps[data-ready] .step.is-lit .step__fill,.js .steps[data-ready].is-rest .step__fill{opacity:1}
  @media (max-width:899px){
    .js .steps[data-ready]:not(.is-rest) .step__label{transition:color .8s ease}
    .js .steps[data-ready]:not(.is-rest) .step__line{transition:opacity .8s ease}
  }
}
/* ---------------------------------------------------------------- Home, sections 2 to 6 (plan 2.1) */
.sec{position:relative;padding:72px 0}
.sec--tint{background:var(--tint)}
.sec--dark{background:var(--deep);color:var(--white)}
.sec--ruled{padding-top:0}
.rule{display:block;height:1px;margin:0 0 72px;border:0;background:var(--navy)}
@media (min-width:600px){.sec{padding:96px 0}.sec--ruled{padding-top:0}.rule{margin-bottom:96px}}
@media (min-width:1180px){.sec{padding:144px 0}.sec--ruled{padding-top:0}.rule{margin-bottom:144px}}
/* a link on a light ground: electric blue, underlined (plan 5.2) */
.link{display:inline-block;padding:6px 0;color:var(--blue);font-weight:600;font-size:16px;line-height:1.3;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.link:hover{text-decoration-thickness:2px}
/* Zodiak Bold, one statement per section at most, set solid (plan 5.4): 32 px on a phone, 48 px on a laptop */
.stmt{font-family:Zodiak,Georgia;font-weight:700;font-size:32px;line-height:1;letter-spacing:0;text-wrap:balance}
@media (min-width:1180px){.stmt{font-size:48px}}
.copy{font-size:17px;line-height:1.5;text-wrap:pretty}
@media (min-width:1180px){.copy{font-size:20px}}

/* 2. the proof band: white; each figure is its sentence, in Light at title size (plan 2.1) */
/* the pillars follow on the same white: the band ends at its last line and the pillars' own top space parts them */
.proof{padding-bottom:0}
.proof__list{display:grid;gap:32px}
.proof__item{padding-top:20px;border-top:1px solid var(--navy)}
.proof__fig{font-weight:300;font-size:30px;line-height:1.2;text-wrap:balance}
.proof__imo{margin-top:48px;max-width:36em}
@media (min-width:600px){.proof__fig{font-size:36px}}
@media (min-width:900px){.proof__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.proof__fig{font-size:30px}}
@media (min-width:1180px){.proof__list{gap:48px}.proof__item{padding-top:28px}.proof__fig{font-size:34px}.proof__imo{margin-top:64px}}

/* 3. the three pillars: white; the outline device enters from the lower right (the book's body pages), its square's
   centre on the section's corner; the text never sits on it: above it on a phone and a tablet, beside it on a laptop */
.pillars{--q:150px;overflow:hidden;padding-bottom:calc(var(--q) + 32px)}
.pillars__device{position:absolute;right:0;bottom:0;width:calc(var(--q) + 1px);height:calc(var(--q) + 1px);overflow:hidden;pointer-events:none}
.pillars__device .outline{position:absolute;left:1px;top:1px;width:calc(2 * var(--q));height:calc(2 * var(--q));overflow:visible}
.outline polygon{vector-effect:non-scaling-stroke;stroke-width:1.5px}
.pillar{padding:24px 0 32px;border-top:1px solid var(--navy)}
.pillar__name{font-weight:300;font-size:26px;line-height:1.2;text-wrap:balance}
.pillar__body{margin-top:12px}
.pillar__body p{max-width:34em}
.pillar__body p+p{margin-top:8px}
.pillars__foot{padding-top:8px}
@media (min-width:600px){.pillars{--q:240px}.pillar__name{font-size:30px}}
@media (min-width:1180px){
  .pillars{--q:min(37.5vw,600px);padding-bottom:144px}
  .pillars__list,.pillars__foot{max-width:min(800px,calc(50vw + 50% - var(--q) - 80px))}
  .pillar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;padding:32px 0 40px}
  .pillar__name{font-size:36px}
  .pillar__body{margin-top:4px}
}

/* 4. who it's for: the tint is the room's wall; the scene is cut out of its own room, one flat shadow in a darker tint
   under the chair and the desk. The section spacing above and below. On a phone and a tablet the text, then the scene,
   centred under it; on a laptop the text on the left and the scene on the right, both centred on one line */
.who{--shade:#CCD4E2;padding:72px 0}
.who__in{display:grid;row-gap:28px}
.who__body{margin-top:24px;max-width:34em}
.who__how{margin-top:12px;max-width:34em}
.who__scene{position:relative;justify-self:center}
.who__floor{position:absolute;left:0;top:0;width:100%;height:100%;fill:var(--shade)}
.who__pic,.who__pic img{display:block}
.who__pic{position:relative}
.who__pic img{width:auto;height:248px}
@media (min-width:600px){
  .who{padding:96px 0}
  .who__in{row-gap:32px}
  .who__pic img{height:300px}
}
@media (min-width:1180px){
  .who{padding:144px 0}
  .who__in{grid-template-columns:minmax(0,640px) auto;justify-content:space-between;align-items:center;column-gap:48px}
  .who__body{margin-top:32px}
  .who__how{margin-top:16px}
  .who__pic img{height:352px}
}

/* 5. the client portal: the tint, a navy hairline above it (the section before is the tint too); phone screens only
   until the portal is rebranded and recaptured: two phones, or on a phone the appointment alone, larger (R2) */
.portal__in{display:grid;gap:48px}
.portal__line{font-weight:300;font-size:30px;line-height:1.2;text-wrap:balance;max-width:16em}
.portal__body{margin-top:20px;max-width:30em}
.portal__text .link{margin-top:20px}
.portal__phones{display:flex;justify-content:center;align-items:flex-start;gap:32px}
.phone{position:relative;flex:none;width:min(300px,100%);margin:0}
.phone__frame{display:block;width:100%;height:100%}
.phone__shot{position:absolute;display:block;max-width:none}
.portal__phones .phone--dash{display:none}
@media (min-width:600px){.portal__phones .phone--dash{display:block}.portal__phones .phone{width:calc((100% - 32px) / 2);max-width:300px}.portal__line{font-size:34px}}
@media (min-width:1180px){
  .portal__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:center}
  .portal__line{font-size:40px}
  .portal__body{margin-top:24px}
  .portal__text .link{margin-top:28px}
  .portal__phones{justify-content:flex-end;gap:40px}
  .portal__phones .phone{width:calc((100% - 40px) / 2)}
}

/* 6. the closing band: deep navy, the glass from the lower-right corner; the button and the FAQ link */
.closing{overflow:hidden;padding-bottom:calc(150px + 56px)}
.closing__clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.closing__glass{position:absolute}
.closing__glass svg{width:100%;height:auto}
.closing__glass{width:calc(210px * 1.0238);left:calc(100% - 150px - 210px * 0.0119);top:calc(100% - 150px - 210px * 0.0119)}
@media (min-width:600px){.closing__glass{width:calc(39vw * 1.0238);left:calc(100% - 27vw - 39vw * 0.0119);top:calc(100% - 23vw - 39vw * 0.0119)}}
@media (min-width:1180px){.closing__glass{width:calc(62.5vw * 1.0238);left:calc(100% - 26vw - 62.5vw * 0.0119);top:calc(100% - 360px - 62.5vw * 0.0119)}}
.closing__in{position:relative}
.closing__line{font-size:36px}
.cta{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:32px}
.cta__link{align-self:flex-start;padding:6px 0;font-weight:600;font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.cta__link:hover{text-decoration-thickness:2px}
@media (min-width:600px){
  .closing{padding-bottom:calc(23vw + 72px)}
  .closing__line{font-size:44px;max-width:12em}
  .cta{flex-direction:row;align-items:center;gap:32px;margin-top:40px}
  .cta__link{align-self:auto}
}
@media (min-width:1180px){
  .closing{padding:144px 0 152px}
  .closing__line{font-size:64px;max-width:calc(100% - 26vw - 40px)}
  .cta{margin-top:48px}
}

/* sections fade in as they come into view (decision 117; plan 4): opacity only, 0.6 s, once per visit; with reduced
   motion the same plain fade (nothing ever rises or moves). Only with the script; the script marks only sections still
   below the first screen */
.js [data-fade].is-waiting{opacity:0}
.js [data-fade].is-shown{opacity:1;transition:opacity .6s ease}

/* ---------------------------------------------------------------- How it works and FAQ (plan 2.2, 2.5) */
/* the page hero: white, the outline device entering from the lower right, its square's centre on the section's corner
   (the book's body pages, as Home's pillars); the text never sits on it: above it on a phone and a tablet, beside it on a
   laptop. One Zodiak line (64 and 36 px, plan 5.4) */
.phero{--q:150px;overflow:hidden;padding:72px 0 calc(var(--q) + 40px)}
.phero__device{position:absolute;right:0;bottom:0;width:calc(var(--q) + 1px);height:calc(var(--q) + 1px);overflow:hidden;pointer-events:none}
.phero__device .outline{position:absolute;left:1px;top:1px;width:calc(2 * var(--q));height:calc(2 * var(--q));overflow:visible}
.phero__in{position:relative}
.phero__line{font-family:Zodiak,Georgia;font-weight:700;font-size:36px;line-height:1;letter-spacing:0;text-wrap:balance;max-width:13em}
.phero__sub{margin-top:24px;max-width:34em}
.phero__btn{margin-top:32px}
@media (min-width:600px){
  .phero{--q:240px;padding:96px 0 calc(var(--q) + 48px)}
  .phero__line{font-size:48px}
}
@media (min-width:1180px){
  .phero{--q:min(37.5vw,600px);padding:144px 0}
  .phero__in>*{max-width:min(720px,calc(50vw + 50% - var(--q) - 64px))}
  .phero__line{font-size:64px}
  .phero__sub{margin-top:32px}
  .phero__btn{margin-top:40px}
}

/* a cut-out scene on its section's ground, one flat shadow a step darker under its feet (as Home's who-it's-for) */
.scene{position:relative;justify-self:center}
.scene__floor{position:absolute;left:0;top:0;width:100%;height:100%}
.scene--tint .scene__floor{fill:#CCD4E2}
.scene--white .scene__floor{fill:#EEEEF2}
.scene__pic,.scene__pic img{display:block}
.scene__pic{position:relative}
.scene{width:100%}
.scene__pic img{width:100%;height:auto}

/* the four steps: one section each, the grounds alternating (tint, white, tint, white). The step number large in Light,
   the name in SemiBold capitals, the message house's line in Light at title size, then the body. On a phone and a tablet
   the text, then the picture centred under it; on a laptop the text and the picture side by side on one centre line,
   the picture on the right, then on the left (plan 2.2), centred in its half so the room around it is even */
.hstep__in{display:grid;row-gap:40px}
.hstep__media{display:flex;justify-content:center}
.hstep__label{display:flex;align-items:baseline;gap:14px}
.hstep__n{font-weight:300;font-size:48px;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.hstep__name{font-weight:600;font-size:14px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.hstep__lead{margin-top:20px;font-weight:300;font-size:28px;line-height:1.2;text-wrap:balance;max-width:18em}
.hstep__body{margin-top:20px;max-width:34em}
.hstep__body p+p{margin-top:12px}
.hstep__proof{margin-top:28px;padding-top:16px;border-top:1px solid var(--navy);max-width:22em;font-size:16px;line-height:1.4}
.hstep__cta{margin-top:32px}
.hstep .phone{width:250px;justify-self:center}
.hstep--find .scene{width:min(266px,100%)}.hstep--book .scene{width:min(283px,100%)}.hstep--confirm .scene{width:min(247px,100%)}
@media (min-width:600px){
  .hstep__in{row-gap:48px}
  .hstep__n{font-size:56px}
  .hstep__lead{font-size:32px}
  .hstep .phone{width:270px}
  .hstep--find .scene{width:min(351px,100%)}.hstep--book .scene{width:min(374px,100%)}.hstep--confirm .scene{width:min(326px,100%)}
}
@media (min-width:1180px){
  .hstep__in{grid-template-columns:minmax(0,600px) minmax(0,1fr);align-items:center;column-gap:64px}
  .hstep--rev .hstep__in{grid-template-columns:minmax(0,1fr) minmax(0,600px)}
  .hstep--rev .hstep__media{order:-1}
  .hstep__n{font-size:64px}
  .hstep__lead{margin-top:24px;font-size:36px}
  .hstep__body{margin-top:24px}
  .hstep__proof{margin-top:32px}
  .hstep__cta{margin-top:40px}
  .hstep .phone{width:240px}
  .hstep--find .scene{width:min(404px,100%)}.hstep--book .scene{width:min(521px,100%)}.hstep--confirm .scene{width:min(326px,100%)}
}

/* on a phone the buttons take the full width, as Home's */
@media (max-width:599px){.phero__btn .btn,.hstep__cta .btn,.pkg__foot .btn,.faq__cta .btn{display:flex;width:100%}}

/* exclusivity: the one dark band in the middle of the page, the glass from the top-right corner (the Home hero's
   recipe); the statement in Zodiak, the lines in the tint */
.excl{overflow:hidden;padding:calc(150px + 56px) 0 72px}
.excl__clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.excl__glass{position:absolute}
.excl__glass svg{width:100%;height:auto}
.excl__glass{width:calc(210px * 1.0238);left:calc(100% - 150px - 210px * 0.0119);top:calc(150px - 210px * 1.0119)}
@media (min-width:600px){.excl__glass{width:calc(39vw * 1.0238);left:calc(100% - 27vw - 39vw * 0.0119);top:calc(23vw - 39vw * 1.0119)}}
@media (min-width:1180px){.excl__glass{width:calc(62.5vw * 1.0238);left:calc(100% - 26vw - 62.5vw * 0.0119);top:calc(360px - 62.5vw * 1.0119)}}
.excl__in{position:relative}
.excl__line{max-width:14em}
.excl__body{margin-top:28px;max-width:34em;color:var(--tint)}
.excl__body p+p{margin-top:12px}
@media (min-width:600px){
  .excl{padding:calc(23vw + 72px) 0 96px}
  .excl__line{font-size:44px}
}
@media (min-width:1180px){
  .excl{padding:144px 0}
  .excl__in>*{max-width:min(700px,calc(100% - 26vw - 40px))}
  .excl__line{font-size:48px}
  .excl__body{margin-top:32px}
}

/* packages and getting started: white, a name on the left and the lines on the right on a laptop (as Home's pillars);
   the four tiles plain, a navy hairline round each, sizes only (no prices, no buy buttons); one button under the row */
.split{display:grid;row-gap:16px}
.split__name{font-weight:300;font-size:30px;line-height:1.2;text-wrap:balance}
.split__body p{max-width:34em}
.split__body p+p{margin-top:12px}
.pkg__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.pkg__tile{display:flex;flex-direction:column;min-height:148px;padding:22px 20px;border:1px solid var(--navy)}
.pkg__n{font-weight:300;font-size:52px;line-height:1;font-variant-numeric:lining-nums}
.pkg__unit{margin-top:12px;font-size:15px;line-height:1.3}
.pkg__tile--more .pkg__n{font-size:26px;line-height:1.15}
.pkg__foot{margin-top:40px}
@media (min-width:600px){
  .split__name{font-size:34px}
  .pkg__tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
  .pkg__tile{min-height:168px;padding:24px}
}
@media (min-width:1180px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;row-gap:0}
  .split__name{font-size:36px}
  .pkg__tiles{gap:24px;margin-top:64px}
  .pkg__tile{min-height:200px;padding:28px}
  .pkg__n{font-size:64px}
  .pkg__unit{font-size:16px}
  .pkg__tile--more .pkg__n{font-size:32px}
  .pkg__foot{margin-top:48px}
}

/* the FAQ: the tint, one group per row under a navy hairline (its label on the left on a laptop, as Home's pillars),
   a hairline under the last, so the list reads the same space from the section's top and foot;
   one question per row; the question is the disclosure's button and the answer opens under it (<details>, so it works
   without the script). The open and shut mark is drawn, a plus that loses its upright when open; no motion */
.faq__group{padding:24px 0 16px;border-top:1px solid var(--navy)}
.faq__group:last-child{border-bottom:1px solid var(--navy)}
.faq__label{font-weight:300;font-size:26px;line-height:1.2;text-wrap:balance}
.faq__list{margin-top:12px}
.faq__item+.faq__item{border-top:1px solid var(--dim)}
.faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:16px 0;cursor:pointer;list-style:none;font-weight:600;font-size:17px;line-height:1.4}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__q:hover .faq__qt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.faq__mark{position:relative;flex:none;width:16px;height:16px;margin-top:4px}
.faq__mark::before,.faq__mark::after{content:"";position:absolute;background:var(--navy)}
.faq__mark::before{left:0;top:7.25px;width:16px;height:1.5px}
.faq__mark::after{left:7.25px;top:0;width:1.5px;height:16px}
.faq__item[open] .faq__mark::after{display:none}
.faq__a{padding:0 40px 20px 0;max-width:38em}
.faq__cta{padding:24px 0 48px}
@media (min-width:600px){
  .faq__label{font-size:30px}
  .faq__q{font-size:18px}
}
@media (min-width:1180px){
  .faq__group,.faq__cta{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px}
  .faq__group{padding:32px 0 24px}
  .faq__label{font-size:34px}
  .faq__list{margin-top:-14px}
  .faq__q{font-size:19px;padding:18px 0}
  .faq__cta>*{grid-column:2;justify-self:start}
  .faq__cta{padding:32px 0 56px}
}

/* ---------------------------------------------------------------- Client portal and About (plan 2.3, 2.6) */
/* a page's own hero line: Zodiak Bold, set solid, one per page (plan 5.4: 64 px on a laptop, 36 px on a phone) */
.pa-title{font-family:Zodiak,Georgia;font-weight:700;font-size:36px;line-height:1;letter-spacing:0;text-wrap:balance}
/* a large line in Light (the book's titles; Home's client portal line) */
.pa-big{font-weight:300;font-size:30px;line-height:1.2;text-wrap:balance}
/* one item of a list: a navy hairline above, the line in Light at title size (Home's proof band and pillars) */
.pa-item{padding:20px 0 24px;border-top:1px solid var(--navy)}
.pa-item__text{font-weight:300;font-size:24px;line-height:1.25;text-wrap:pretty}
/* a list that ends its column ends at its last line, so the section's own spacing is the space below it */
.pa-item:last-child,.cp-team .pa-item{padding-bottom:0}
/* one sentence of the closing band's line, on a line of its own (components/portal-about/ClosingBand.astro) */
.pa-sent{display:block;text-wrap:balance}
/* a word that never breaks at its hyphen ("No-show") */
.pa-nb{white-space:nowrap}
.pa-caption{margin-top:16px;color:var(--gray);font-size:14px;line-height:1.5;text-align:center;text-wrap:balance}
.pa-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:28px}
.pa-actions .btn{align-self:stretch}
@media (min-width:600px){
  .pa-title{font-size:48px}
  .pa-big{font-size:34px}
  .pa-item__text{font-size:28px}
  .pa-actions{flex-direction:row;align-items:center;gap:32px}
  .pa-actions .btn{align-self:auto}
}
@media (min-width:1180px){
  .pa-title{font-size:64px}
  .pa-big{font-size:40px}
  .pa-item{padding:24px 0 28px}
  .pa-item__text{font-size:30px}
  .pa-actions{margin-top:40px}
}

/* ---- Client portal 1. the hero: the tint; the line, the daily email and the two actions, and the Dashboard in THE phone
   with the caption under it. Stacked on a phone and a tablet (the phone centred under the text), side by side on a laptop
   (the phone centred in its column, so no wide empty band opens between the two),
   both columns on one vertical centre */
.cp-hero__in{display:grid;row-gap:48px}
.cp-hero__body{margin-top:20px;max-width:30em}
.cp-hero__shot{justify-self:center;width:min(300px,100%)}
.cp-hero__shot .phone{width:100%}
@media (min-width:600px){.cp-hero__in{row-gap:56px}.cp-hero__body{margin-top:24px}}
@media (min-width:1180px){
  .cp-hero__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;column-gap:64px}
  .cp-hero__text{max-width:600px}
  .cp-hero__shot{width:280px}
  .cp-hero__body{margin-top:28px}
}

/* ---- 2. checked before it reaches you: white, text only; the check in Light, the line under it (beside it on a laptop,
   on one vertical centre) */
/* the room above the large line's letters reads as extra space at the top (measured: 154 px above the first pixel and 143
   below the last on a laptop), so the foot takes that much more padding, as Home's closing band does (8 px there) */
.cp-checked{padding-bottom:77px}
.cp-checked__in{display:grid;row-gap:20px}
.cp-checked__body{max-width:30em}
@media (min-width:600px){.cp-checked{padding-bottom:100px}}
@media (min-width:1180px){
  .cp-checked{padding-bottom:155px}
  .cp-checked__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:center}
}

/* ---- 3. every appointment, its result, the figures: the tint; the three lines as a list, and one appointment and
   Performance in two phones (on a phone, the appointment alone, larger: R2); side by side on a laptop, on one centre */
.cp-feat__in{display:grid;row-gap:48px}
.cp-feat__phones{display:flex;justify-content:center;align-items:flex-start;gap:32px}
.cp-feat__phones .phone{width:min(300px,100%)}
.cp-feat__phones .phone--perf{display:none}
@media (min-width:600px){
  .cp-feat__in{row-gap:56px}
  .cp-feat__list{max-width:640px}
  .cp-feat__phones .phone--perf{display:block}
  .cp-feat__phones .phone{width:calc((100% - 32px) / 2);max-width:300px}
}
@media (min-width:1180px){
  .cp-feat__in{grid-template-columns:minmax(0,520px) auto;justify-content:space-between;align-items:center;column-gap:64px}
  .cp-feat__phones{gap:40px}
  .cp-feat__phones .phone{width:260px}
}

/* ---- 4. your team and Requests: white, text only; two lines in Light under their hairlines, side by side from a tablet
   up, top-aligned under the hairlines (as Home's proof band) */
.cp-team__list{display:grid;gap:32px}
@media (min-width:600px){
  .cp-team__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .cp-team .pa-item__text{font-size:30px}
}
@media (min-width:1180px){
  .cp-team__list{gap:48px}
  .cp-team .pa-item__text{font-size:34px}
}

/* ---- About 1. the hero: white, the vision statement, then the mosaic edge to edge (the openers' device, decorative;
   no text across its cuts). The section spacing above the statement and again between the statement and the mosaic; the
   mosaic ends the section */
.ab-hero{padding-bottom:0}
/* the vision is the longest page line: at 36 px on a phone "hours" stands alone on its line (measured), so 32 px there,
   as Home's statements */
.ab-hero .pa-title{max-width:18em;font-size:32px}
@media (min-width:600px){.ab-hero .pa-title{font-size:48px}}
@media (min-width:1180px){.ab-hero .pa-title{font-size:64px}}
.ab-mosaic{margin-top:72px;overflow:hidden}
.ab-mosaic svg{display:block;width:100%;height:auto}
.ab-mosaic .ab-mosaic__tablet,.ab-mosaic .ab-mosaic__laptop{display:none}
@media (min-width:600px){
  .ab-mosaic{margin-top:96px}
  .ab-mosaic .ab-mosaic__phone{display:none}
  .ab-mosaic .ab-mosaic__tablet{display:block}
}
@media (min-width:1180px){
  .ab-mosaic{margin-top:144px}
  .ab-mosaic .ab-mosaic__tablet{display:none}
  .ab-mosaic .ab-mosaic__laptop{display:block}
}

/* ---- 2. who we are: white; the 100-word boilerplate, and the two figures beside it (under it on a phone and a tablet),
   both columns on one vertical centre */
/* the room above the boilerplate's first line reads as extra space at the top (measured: 152 px above the first pixel and
   146 below the last on a laptop, 103 and 95 on a tablet, 78 and 71 on a phone), so the foot takes that much more */
.ab-who{padding-bottom:79px}
@media (min-width:600px){.ab-who{padding-bottom:104px}}
@media (min-width:1180px){.ab-who{padding-bottom:150px}}
.ab-who__in{display:grid;row-gap:40px}
.ab-who__bp{max-width:36em}
.ab-who__figs{display:grid;gap:32px}
.ab-who__figs .pa-item{padding-bottom:0}
@media (min-width:600px){
  .ab-who__in{row-gap:48px}
  .ab-who__figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
}
@media (min-width:1180px){
  .ab-who__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:96px;align-items:center}
  .ab-who__figs{grid-template-columns:none;gap:32px}
}

/* ---------------------------------------------------------------- the client videos (plan 2.4, 9) */
.vid{min-width:0}
.vid__player{display:block;width:100%;height:auto;border-radius:4px;background:var(--deep)}
.vid__player::cue{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans";line-height:1.3}
.vid__foot{padding-top:14px}
.vid__role{font-weight:600;font-size:16px;line-height:21px}
.vid__tx{margin-top:4px}
.vid__txbtn{display:inline-block;padding:6px 0;color:var(--blue);font-weight:600;font-size:16px;line-height:21px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer;list-style:none}
.vid__txbtn::-webkit-details-marker{display:none}
.vid__txbtn:hover{text-decoration-thickness:2px}
.vid__txbody{margin-top:8px;font-size:16px;line-height:1.5;max-width:34em}
.vid__txbody p+p{margin-top:12px}

/* Home: the client video, between the client portal and the closing band. White; the line, then the video under it, both
   centred, at every width: one video and one line read as one piece (beside each other on a laptop they left a wide empty
   gap between them). The role and the transcript sit under the video, on its left edge */
.tsm__in{display:grid;justify-items:center;row-gap:32px}
.tsm__line{font-weight:300;font-size:30px;line-height:1.2;text-align:center;text-wrap:balance;max-width:16em}
.tsm__vid{width:min(297px,100%)}
@media (min-width:600px){
  .tsm__in{row-gap:40px}
  .tsm__line{font-size:35px}
  .tsm__vid{width:342px}
}
@media (min-width:1180px){
  .tsm__in{row-gap:48px}
  .tsm__line{font-size:40px}
  .tsm__vid{width:342px}
}

/* ---------------------------------------------------------------- Results (plan 2.4) */
/* 1. hero: deep navy, a hairline at its top (as under Home's header), the glass from the top-right corner */
.rhero{position:relative;overflow:hidden;background:var(--deep);color:var(--white);border-top:1px solid var(--rail)}
.rhero__clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rhero__glass{position:absolute}
.rhero__glass svg{width:100%;height:auto}
.rhero__glass{width:calc(210px * 1.0238);left:calc(100% - 150px - 210px * 0.0119);top:calc(150px - 210px * 1.0119)}
@media (min-width:600px){.rhero__glass{width:calc(39vw * 1.0238);left:calc(100% - 27vw - 39vw * 0.0119);top:calc(23vw - 39vw * 1.0119)}}
@media (min-width:1180px){.rhero__glass{width:calc(62.5vw * 1.0238);left:calc(100% - 26vw - 62.5vw * 0.0119);top:calc(380px - 62.5vw * 1.0119)}}
.rhero__in{position:relative;padding-top:calc(150px + 28px);padding-bottom:72px}
.rhero__line{font-family:Zodiak,Georgia;font-weight:700;font-size:36px;line-height:1;letter-spacing:0;text-wrap:balance}
.rhero__sub{margin-top:20px;color:var(--tint);font-size:17px;line-height:1.5}
.rhero__actions{margin-top:28px}
.rhero__actions .btn{display:flex;width:100%}
@media (min-width:600px){
  .rhero__in{padding-top:calc(23vw + 40px);padding-bottom:96px}
  .rhero__line{font-size:48px;max-width:14em}
  .rhero__sub{font-size:19px}
  .rhero__actions{margin-top:32px}
  .rhero__actions .btn{display:inline-flex;width:auto}
}
@media (min-width:1180px){
  .rhero__in{padding-top:144px;padding-bottom:144px}
  .rhero__line{font-size:64px;max-width:min(14em,calc(100vw - 26vw - var(--gut) - 48px))}
  .rhero__sub{margin-top:28px;font-size:20px}
  .rhero__actions{margin-top:40px}
}

/* 2. proof band: the tint; the two sentences large in Light, volume first; side by side from 900 px, the longer one in the
   wider column so the two read as one band */
.rproof__list{display:grid;gap:32px}
.rproof .proof__fig{font-size:30px}
@media (min-width:600px){.rproof .proof__fig{font-size:36px}}
@media (min-width:900px){.rproof__list{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px}}
@media (min-width:1180px){.rproof__list{gap:64px}.rproof .proof__item{padding-top:28px}.rproof .proof__fig{font-size:40px}}

/* 3. who we've worked with: white; the sentence, then the six names as text in a row, SemiBold, navy */
.rimo__line{font-weight:300;font-size:26px;line-height:1.25;max-width:26em;text-wrap:balance}
.rimo__names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:40px;padding-top:28px;border-top:1px solid var(--navy);color:var(--navy);font-weight:600;font-size:20px;line-height:1.25}
@media (min-width:600px){.rimo__line{font-size:30px}.rimo__names{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;margin-top:48px}}
@media (min-width:1180px){.rimo__line{font-size:34px;max-width:38em}.rimo__names{display:flex;justify-content:space-between;gap:32px;margin-top:64px;padding-top:32px;font-size:24px}}

/* 4. the recordings: the tint; the statement and its line, and the phone with one appointment's recording (R1, R2): the
   text, then the phone centred under it; on a laptop the text on the left and the phone on the right, centred on one line */
.rrec__in{display:grid;row-gap:48px}
.rrec__body{margin-top:24px;max-width:30em}
.rrec__phone{display:flex;justify-content:center}
@media (min-width:1180px){
  .rrec__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:center}
  .rrec__text .stmt{max-width:12em}
  .rrec__body{margin-top:32px}
}

/* 5. client videos: white; the heading, then the videos: stacked and centred on a phone and a tablet, each at its own
   proportions; in one row on a laptop */
.rvids__title{font-weight:300;font-size:30px;line-height:1.2;margin-bottom:40px}
.rvids__row{display:grid;row-gap:56px;justify-items:center}
.rvids__row .vid--portrait{width:min(297px,100%)}
.rvids__row .vid--landscape{width:min(568px,100%)}
@media (min-width:600px){
  .rvids__title{font-size:34px;margin-bottom:48px}
  .rvids__row{row-gap:72px}
  .rvids__row .vid--portrait{width:342px}
}
@media (min-width:1180px){
  .rvids__title{font-size:40px;margin-bottom:64px}
  .rvids__row{grid-template-columns:minmax(0,300fr) minmax(0,568fr) minmax(0,300fr);column-gap:48px;align-items:start;justify-items:stretch}
  .rvids__row .vid--portrait,.rvids__row .vid--landscape{width:auto}
  .rvids__row .vid--landscape{margin-top:18.7793%}
}

/* ---------------------------------------------------------------- build step 5 */
/* hidden from the eye, read by screen readers */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[tabindex="-1"]:focus{outline:none}
/* the footer's one long legal link wraps (plan 1.2) */
.ftr__group li.ftr__wrap{max-width:13em;white-space:normal;line-height:1.35}

/* ---- Book a call (plan 2.7): white, the outline device from the lower right (its square's centre on the section's corner,
   as the body pages' heroes), away from the fields: the form keeps to the left column, the device to the right. On a
   laptop "Already a client?" sits at the top of the right column, on one vertical centre with the page's line beside it
   (the client's rule for side-by-side columns), so the first screen carries both and a client finds the sign-in at once;
   on a phone and a tablet it comes under the form and the section's foot holds the device (as .phero) */
.bk{--q:150px;overflow:hidden;padding:72px 0 calc(var(--q) + 40px)}
.bk__device{position:absolute;right:0;bottom:0;width:calc(var(--q) + 1px);height:calc(var(--q) + 1px);overflow:hidden;pointer-events:none}
.bk__device .outline{position:absolute;left:1px;top:1px;width:calc(2 * var(--q));height:calc(2 * var(--q));overflow:visible}
.bk__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "form" "aside";row-gap:48px}
.bk__head{grid-area:head}
.bk__main{grid-area:form;max-width:640px}
.bk__aside{grid-area:aside;max-width:640px;padding-top:20px;border-top:1px solid var(--navy)}
.bk__line{font-family:Zodiak,Georgia;font-weight:700;font-size:36px;line-height:1;letter-spacing:0}
.bk__sub{margin-top:20px;max-width:30em}
.bk__q{font-weight:300;font-size:26px;line-height:1.2}
.bk__signin{margin-top:8px}
@media (min-width:600px){
  .bk{--q:240px;padding:96px 0 calc(var(--q) + 48px)}
  .bk__in{row-gap:56px}
  .bk__line{font-size:48px}
  .bk__sub{margin-top:24px}
  .bk__q{font-size:30px}
}
@media (min-width:1180px){
  .bk{--q:min(37.5vw,600px);padding:144px 0}
  .bk__in{grid-template-columns:minmax(0,640px) minmax(0,1fr);grid-template-areas:"head aside" "form .";column-gap:96px;row-gap:64px}
  .bk__aside{align-self:center;justify-self:end;width:min(100%,320px)}
  /* the column keeps this much height when the confirmation replaces the form, so the section stays tall enough for the
     device to stay below "Already a client?" (the device's top: the section's foot less q; the note ends about 168 px
     above the column's top at most) */
  .bk__main{min-height:calc(var(--q) - 168px)}
  .bk__line{font-size:64px}
  .bk__sub{margin-top:28px}
  .bk__q{font-size:30px}
}

/* ---- the form (plan 6): one column; labels above the fields in SemiBold, always shown; the hint under its label in Cool
   Gray 11; boxes with a navy edge (3:1 and more against white), the focus ring electric blue as everywhere on the site */
.fm{display:grid;row-gap:32px}
.fm[hidden],.fm-done[hidden],.fm__alert[hidden]{display:none}
.fm__demo{padding:12px 16px;border-radius:4px;background:var(--tint);font-size:14px;line-height:1.4}
.fld{display:grid;row-gap:8px;min-width:0;margin:0;padding:0;border:0}
fieldset.fld{display:block}
.fld__label{display:block;padding:0;font-weight:600;font-size:16px;line-height:1.35}
legend.fld__label{margin-bottom:12px}
.fld__opt{font-weight:400;color:var(--gray)}
.fld__hint{margin-top:-2px;color:var(--gray);font-size:15px;line-height:1.4}
.fld__input{display:block;width:100%;min-height:52px;margin:0;padding:12px 14px;border:1px solid var(--navy);border-radius:4px;background:var(--white);color:var(--deep);font:inherit;font-size:17px;line-height:1.4}
.fld__area{min-height:148px;resize:vertical}
.fld__input:focus{outline:2px solid var(--blue);outline-offset:2px}
/* the choices: one box per answer, the whole box a target; the chosen one on the tint */
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 14px;border:1px solid var(--navy);border-radius:4px;cursor:pointer;font-size:16px;line-height:1.3}
.opt:has(input:checked){background:var(--tint)}
.opt input,.fld--consent input{flex:none;display:grid;place-content:center;margin:0;appearance:none;-webkit-appearance:none;background:var(--white);border:1.5px solid var(--navy);cursor:pointer}
.opt input{width:22px;height:22px;border-radius:50%}
.opt input::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--deep);opacity:0}
.opt input:checked::before{opacity:1}
.opt input:focus-visible,.fld--consent input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* the texting box: optional and not ticked (legal/consent-line.md); its label is the whole wording */
.fld--consent{grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-items:start}
.fld--consent input{width:24px;height:24px;margin-top:1px;border-radius:3px}
.fld--consent input::before{content:"";width:12px;height:6px;margin-top:-3px;border-left:2px solid var(--white);border-bottom:2px solid var(--white);transform:rotate(-45deg);opacity:0}
.fld--consent input:checked{background:var(--deep);border-color:var(--deep)}
.fld--consent input:checked::before{opacity:1}
.fld--consent label{font-size:15px;line-height:1.5;cursor:pointer}
.fld--consent a,.fm__note a,.fm__alert a,.fm-done a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fld--consent a:hover,.fm__note a:hover,.fm__alert a:hover,.fm-done a:hover{text-decoration-thickness:2px}
.fm__send{padding-top:8px}
.fm__send .btn{border:0;cursor:pointer;font-family:inherit}
.fm__send .btn[aria-disabled="true"]{cursor:progress}
.fm__note{margin-top:-12px;color:var(--gray);font-size:15px;line-height:1.5;max-width:34em}
.fm__trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* a wrong answer (plan 6.5): no red; deep navy words in SemiBold under the field, a navy marker down its left, the word
   "Error" for screen readers; the list of problems at the top, each linking to its field */
.fld--err{padding-left:16px;border-left:4px solid var(--navy)}
.fld--err .fld__input{border-width:2px;padding:11px 13px}
.fld__err{color:var(--deep);font-weight:600;font-size:15px;line-height:1.4}
fieldset.fld .fld__err{margin-top:10px}
.fm__alert{padding:20px 22px;border:2px solid var(--navy);border-left-width:6px;border-radius:4px;color:var(--deep)}
.fm__alert-title{font-weight:600;font-size:18px;line-height:1.3}
.fm__alert-list{margin-top:10px;display:grid;gap:6px}
.fm__alert-list a{font-weight:600;font-size:16px;line-height:1.4}
.fm__fail{font-weight:600;font-size:16px;line-height:1.5}
/* the confirmation, in place of the form */
.fm-done__title{font-weight:300;font-size:30px;line-height:1.2;text-wrap:balance}
.fm-done__s{display:block}
.fm-done__line{margin-top:16px;max-width:30em}
.fm-done__title+.fm-done__line{margin-top:24px}
@media (min-width:600px){
  .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-done__title{font-size:34px}
}
@media (min-width:1180px){
  .fld__label{font-size:17px}
  .fm-done__title{font-size:40px}
}
@media (max-width:599px){.fm__send .btn{display:flex;width:100%}}

/* ---- Sent and Not sent: the body pages' hero (.phero) as it is; the confirmation's second line under the first. Their
   words are short, so on a laptop the section is kept as tall as the outline device plus the room the How it works and FAQ
   heroes leave above it (64 px), and the words sit in its middle: the device shows whole, never cut by the section's top,
   and the space above and below the words stays equal */
.snt__more{margin-top:12px;max-width:34em}
.snt .copy a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.snt .copy a:hover{text-decoration-thickness:2px}
@media (min-width:1180px){.snt{display:flex;flex-direction:column;justify-content:center;min-height:calc(var(--q) + 64px)}}

/* ---- the 404 (plan 1.3): deep navy, a hairline at its top (as under Home's header), the glass from the top-right corner
   (the Home hero's recipe, placed as the Results hero); the line in Zodiak, the line under it in the tint, three white
   underlined links (plan 5.2: links on deep navy) */
.nf{position:relative;overflow:hidden;background:var(--deep);color:var(--white);border-top:1px solid var(--rail)}
.nf__clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.nf__glass{position:absolute}
.nf__glass svg{width:100%;height:auto}
.nf__glass{width:calc(210px * 1.0238);left:calc(100% - 150px - 210px * 0.0119);top:calc(150px - 210px * 1.0119)}
@media (min-width:600px){.nf__glass{width:calc(39vw * 1.0238);left:calc(100% - 27vw - 39vw * 0.0119);top:calc(23vw - 39vw * 1.0119)}}
@media (min-width:1180px){.nf__glass{width:calc(62.5vw * 1.0238);left:calc(100% - 26vw - 62.5vw * 0.0119);top:calc(380px - 62.5vw * 1.0119)}}
.nf__in{position:relative;padding-top:calc(150px + 28px);padding-bottom:72px}
.nf__line{font-family:Zodiak,Georgia;font-weight:700;font-size:36px;line-height:1;letter-spacing:0;text-wrap:balance}
.nf__sub{margin-top:20px;max-width:30em;color:var(--tint);font-size:17px;line-height:1.5}
.nf__links{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:28px}
.nf__links a{display:inline-block;padding:6px 0;font-weight:600;font-size:17px;line-height:1.3;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.nf__links a:hover{text-decoration-thickness:2px}
@media (min-width:600px){
  .nf__in{padding-top:calc(23vw + 40px);padding-bottom:96px}
  .nf__line{font-size:48px;max-width:14em}
  .nf__sub{font-size:19px}
  .nf__links{margin-top:32px}
}
@media (min-width:1180px){
  .nf__in{padding-top:144px;padding-bottom:144px}
  .nf__line{font-size:64px;max-width:min(14em,calc(100vw - 26vw - var(--gut) - 48px))}
  .nf__sub{margin-top:28px;font-size:20px;max-width:min(30em,calc(100vw - 26vw - var(--gut) - 48px))}
  .nf__links{margin-top:40px;font-size:18px}
}

/* ---- the legal pages (plan 2.8): white, Home's section spacing, the title in Light, the headings in SemiBold, a reading
   measure of about 70 characters; on a laptop the headings in the left column beside their text (the FAQ's columns) */
.lg__row+.lg__row{margin-top:48px;padding-top:24px;border-top:1px solid var(--navy)}
.lg__title{font-weight:300;font-size:36px;line-height:1.15;text-wrap:balance}
.lg__dates{margin-top:16px;color:var(--gray);font-size:15px;line-height:1.6}
.lg__dates strong{font-weight:600;color:var(--deep)}
.lg__row--head .lg__body{margin-top:32px}
.lg__h2{font-weight:600;font-size:21px;line-height:1.3;text-wrap:balance}
.lg__side+.lg__body{margin-top:16px}
.lg__row--head .lg__side+.lg__body{margin-top:32px}
.lg__body{max-width:40em}
.lg__body>*+*{margin-top:16px}
.lg__body p,.lg__body li{max-width:36em}
.lg__body strong{font-weight:600}
.lg__h3{font-weight:600;font-size:17px;line-height:1.35}
.lg__body>*+.lg__h3{margin-top:32px}
.lg__list{padding-left:1.2em;list-style:disc}
.lg__list li::marker{color:var(--navy)}
.lg__list li+li{margin-top:8px}
.lg__body a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lg__body a:hover{text-decoration-thickness:2px}
.lg__body a[href^="tel:"]{white-space:nowrap}
.ph{border-radius:2px;background:var(--tint);box-shadow:0 0 0 2px var(--tint);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lg__table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.lg__table th{padding:0 16px 10px 0;border-bottom:1px solid var(--navy);font-weight:600;text-align:left;vertical-align:bottom}
.lg__table td{padding:12px 16px 12px 0;border-bottom:1px solid var(--dim);vertical-align:top}
.lg__table th:last-child,.lg__table td:last-child{padding-right:0}
/* on a phone each row of a table is a card: each cell under its column's name */
@media (max-width:599px){
  .lg__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lg__table table,.lg__table tbody,.lg__table tr,.lg__table td{display:block}
  .lg__table tr{padding:14px 0;border-top:1px solid var(--dim)}
  .lg__table tr:first-child{border-top:1px solid var(--navy)}
  .lg__table tr:last-child{border-bottom:1px solid var(--navy)}
  .lg__table td{padding:0;border:0}
  .lg__table td+td{margin-top:8px}
  .lg__table td::before{content:attr(data-label);display:block;font-weight:600;font-size:13px;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;margin-bottom:2px}
}
/* the opt-out switch: its status line, and a plain button with a navy edge (not the blue "Book a call" button) */
.lg__switch{display:grid;justify-items:start;gap:16px;max-width:36em;padding:20px 22px;border:1px solid var(--navy);border-radius:4px}
.lg__status{font-weight:600}
.lg__btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1.5px solid var(--navy);border-radius:4px;background:var(--white);color:var(--deep);font:inherit;font-weight:600;font-size:16px;line-height:1.2;cursor:pointer}
.lg__btn:hover{background:var(--tint)}
.lg__btn[hidden]{display:none}
@media (min-width:600px){
  .lg__table th{white-space:nowrap}
  .lg__title{font-size:44px}
  .lg__row+.lg__row{margin-top:56px;padding-top:28px}
  .lg__h2{font-size:23px}
}
@media (min-width:1180px){
  .lg__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px}
  .lg__row+.lg__row{margin-top:64px;padding-top:32px}
  .lg__side+.lg__body,.lg__row--head .lg__side+.lg__body{margin-top:0}
  .lg__title{font-size:52px;padding-right:24px}
  .lg__h2{font-size:24px;padding-right:24px}
  .lg__table table{font-size:16px}
}

/* ---------------------------------------------------------------- website v2: shared pieces (spec 1) */
.link--light{color:var(--white)}

/* 1.1 the laptop: an SVG frame and the capture inside it, edge to edge, scaling as one piece with its width */
.laptop{position:relative;width:100%;margin:0}
.laptop--col{max-width:760px}
.laptop--wide{max-width:1280px;margin-inline:auto}
.laptop__frame{display:block;width:100%;height:100%}
.laptop__shot{position:absolute;display:block;max-width:none}

/* 1.2 a panel: a portal card whole, on the section's ground, with the flat floor shadow a step darker than the ground */
.panel{position:relative;width:100%;margin:0;--floor:#EEEEF2}
.sec--tint .panel{--floor:#CCD4E2}
.panel__floor{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;fill:var(--floor)}
.panel picture{display:block;position:relative}
.panel__shot{display:block;width:100%;height:auto}

/* 1.3 the week: Monday to Friday, nine to four, hairlines on the ground (18% on the tint, 12% on white), no hours column.
   Our interviews are blue blocks (data-seq) that fade in one after another, 0.3 s then 0.22 s each (the motion standard, end of this file); the owner's own time is the shade */
.week{--row:36px;--line:rgb(13 13 75 / .12);--shade:#CCD4E2;width:100%;color:var(--deep);font-variant-numeric:lining-nums tabular-nums}
.sec--tint .week{--line:rgb(13 13 75 / .18)}
.week--dark{--line:rgb(255 255 255 / .12);color:var(--white)}
.week__head{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:10px;border-bottom:1px solid var(--line)}
.week__head span{text-align:center}
.week__head b{font-weight:600}
.week__d{display:none}
.week__body{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.week__day{position:relative;height:calc(7 * var(--row));border-left:1px solid var(--line);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--row) - 1px),var(--line) calc(var(--row) - 1px),var(--line) var(--row))}
.week__day:last-child{border-right:1px solid var(--line)}
.week__ev{position:absolute;left:4px;right:4px;top:calc(var(--s) * var(--row) + 4px);height:calc(var(--l) * var(--row) - 8px);border-radius:4px;overflow:hidden}
.week__ev--own{display:flex;align-items:flex-start;padding:5px 4px 0;background:var(--shade);color:var(--navy);font-size:11px;line-height:1.2;white-space:nowrap}
.week--dark .week__ev--own{color:var(--white)}
.week__ev--us{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 6px;background:var(--blue);color:var(--white);font-size:11px;line-height:1.15;white-space:nowrap}
.week__t{font-size:11px;letter-spacing:.02em}
.week__legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;color:var(--gray);font-size:13px;line-height:1.3}
.week__legend span{display:inline-flex;align-items:center;gap:8px}
.week__legend i{flex:none;width:12px;height:12px;border-radius:2px;background:var(--blue)}
.week__legend .is-own{background:var(--shade)}
.week{--sb:.3s;--ss:.22s}
@media (min-width:600px){
  .week{--row:40px}
  .week__d{display:inline}.week__s{display:none}
  .week__ev--own{padding:6px 8px 0;font-size:13px}
  .week__ev--us{padding:0 8px;font-size:12px}
  .week__t{font-size:12px}
}
@media (min-width:1180px){
  .week{--row:46px}
  .week__ev--us{padding:0 10px;font-size:13px}
  .week__t{font-size:13px}
}

/* the week at the size of Home's Who it's for column (round 3, spec 15: about 660 px at 1440, rows 52 px, the type scaled with the rows) */
@media (min-width:1180px){
  .week--lg{--row:52px}
  .week--lg .week__ev--own{padding:7px 10px 0;font-size:15px}
  .week--lg .week__ev--us{padding:0 12px;font-size:15px}
  .week--lg .week__t{font-size:15px}
  .week--lg .week__legend{margin-top:20px;font-size:15px}
}

/* 1.4 the client card: deep navy, 4 px corners, the words left and the portrait video right rising past the card's edges.
   The section (.cc-sec) grows by the measured rise (60 px at 1440, 90 at tablet), so nothing is clipped. Below 900 px it stacks, the video inside the card */
.cc{display:grid;gap:32px;padding:28px;border-radius:4px;background:var(--deep);color:var(--white)}
.cc>*{min-width:0}
.cc__eyebrow{color:rgb(255 255 255 / .7)}
.cc__q{margin:0}
.cc__quote{margin-top:16px;color:var(--white)}
.cc__by{margin-top:20px;color:rgb(255 255 255 / .8);font-size:17px;line-height:1.5}
.cc__body{margin-top:20px;max-width:24em}
.cc__links{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:12px}
.cc__vid{width:100%;max-width:342px;margin:0 auto}
/* the card names the speaker itself: the video's role line stays for screen readers, and the transcript opens from the link */
.vid--card .vid__role{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vid--card .vid__foot{padding-top:0}
.vid--card .vid__txbtn{display:none}
.vid--card .vid__tx{margin-top:0}
.vid--card .vid__txbody{margin-top:16px;color:var(--white)}
.vid--card .vid__txbody .link{color:var(--white)}
@media (min-width:600px){.cc{padding:40px}}
@media (min-width:900px){
  .cc{grid-template-columns:minmax(0,1fr) 340px;column-gap:64px;align-items:center}
  .cc__vid{width:340px;max-width:none;margin:-130px 0;justify-self:end}
  .cc-sec{padding-top:186px;padding-bottom:186px}
}
@media (min-width:1180px){
  .cc{grid-template-columns:minmax(0,1fr) 360px;column-gap:96px;padding:64px}
  .cc__vid{width:360px;margin:-130px 0}
  .cc-sec{padding-top:204px;padding-bottom:204px}
}

/* the card's mirrored and landscape forms (round 5, spec 17; Results): side="left" puts the video at the left from 900 px; wide is the
   landscape video (560 px at 1440). It sits inside the card, flush with the card's padding on its side, vertically centred on the
   card's content (the grid centres it); it does not overhang in any direction. The portrait cards keep rising past the card's edges.
   Home's card is unchanged. */
@media (min-width:900px){
  .cc--left{grid-template-columns:340px minmax(0,1fr)}
  .cc--left .cc__vid{grid-column:1;grid-row:1;justify-self:start}
  .cc--left .cc__text{grid-column:2;grid-row:1}
  .cc--wide{--vw:min(560px,44vw);grid-template-columns:minmax(0,1fr) var(--vw)}
  .cc--wide.cc--left{grid-template-columns:var(--vw) minmax(0,1fr)}
  .cc--wide .cc__vid{width:var(--vw);margin:0;justify-self:start}
}
@media (min-width:1180px){
  .cc--left{grid-template-columns:360px minmax(0,1fr)}
}

/* 1.5 the sample screening call: the portal's own recording card, inert until the recording exists */
.player{padding:32px;border-radius:4px;background:var(--deep);color:var(--white);cursor:default}
.player__row{display:flex;align-items:center;gap:20px}
.player__play{flex:none;width:56px;height:56px}
.player__play svg{width:56px;height:56px}
.player__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.player__chip{padding:4px 8px;border-radius:4px;background:var(--rail);color:var(--white)}
.player__line{margin-top:10px;max-width:40em;color:rgb(255 255 255 / .8);font-size:17px;line-height:1.5}
.player__bar{height:2px;margin-top:24px;background:rgb(255 255 255 / .3)}
.player__audio{width:100%;margin-top:24px}
.player__tx{margin-top:16px}
.player__tx summary{cursor:pointer}
.player__txbody{margin-top:12px;max-width:40em;color:var(--white)}
.player__txbody p+p{margin-top:12px}

/* 1.6 big figures: a navy hairline above, the figure in Light (the step numeral's style), the text in body size under it */
.figs{display:grid;gap:32px}
.fig{padding-top:20px;border-top:1px solid var(--navy)}
.fig__big{font-weight:300;font-size:48px;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.fig__text{margin-top:12px;max-width:16em}
.figs--dark .fig{border-top-color:var(--rail);color:var(--white)}
@media (min-width:600px){.fig__big{font-size:56px}}
@media (min-width:900px){.figs--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.figs--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}.figs--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}}
@media (min-width:1180px){.figs{gap:48px}.fig{padding-top:28px}.fig__big{font-size:64px}.figs--md .fig__big{font-size:56px}}

/* 1.7 a numbered row, in its light form: number, title in 20 px SemiBold, text in body size */
.steps2{display:grid;gap:32px}
.steps2__item{padding-top:20px;border-top:1px solid var(--navy)}
.steps2__n{font-weight:300;font-size:24px;line-height:1.2;font-variant-numeric:lining-nums tabular-nums}
.steps2__title{margin-top:12px;font-weight:600;font-size:20px;line-height:1.25}
.steps2__text{margin-top:8px;font-size:17px}
@media (min-width:900px){.steps2{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}

/* ---------------------------------------------------------------- website v2: Home (spec 2) */
/* 2. figures (round 3): the band is two-thirds of the section space above (48 / 64 / 96) and runs into the pillars on the same white,
   so the pillars' own top space parts them; the owners' sentence and the six names have moved to the foot of Who it's for */
.sec.proof--v2{padding-top:48px}
@media (min-width:600px){.sec.proof--v2{padding-top:64px}}
@media (min-width:1180px){.sec.proof--v2{padding-top:96px}}
.proof__names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:32px;padding-top:28px;border-top:1px solid var(--navy);color:var(--navy);font-weight:600;font-size:20px;line-height:1.25}
@media (min-width:600px){.proof__names{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;margin-top:40px}}
@media (min-width:1180px){.proof__names{display:flex;justify-content:space-between;gap:32px;margin-top:40px;padding-top:32px;font-size:24px}}

/* 4. who it's for (round 3): the text left (560 px at most), the week right filling its column (about 660 px at 1440), the columns
   centred on each other; under both, full width, the owners' sentence and the six names on a hairline; under 900 px all stacked */
.who2__in{display:grid;row-gap:40px}
.who2__body{margin-top:24px;max-width:560px}
.who2__week{width:100%;max-width:660px}
.who2__foot{grid-column:1/-1}
.who2__imo{max-width:none}
@media (min-width:900px){.who2__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:center;row-gap:56px}}
@media (min-width:1180px){.who2__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;row-gap:72px}.who2__body{margin-top:32px}.who2__week{justify-self:end}}

/* 5. the client portal: the laptop with the Appointments list and the phone with one appointment in front of its lower right
   corner, overlapping it by a quarter of the phone's width; below 900 px the phone alone */
.pv2{display:flex;justify-content:center}
.pv2__laptop{display:none}
.pv2 .pv2__phone{width:min(300px,100%)}
@media (min-width:900px){
  /* the laptop is the column's width less three quarters of the phone's; the phone, at the column's right edge, rises over the
     laptop's lower right corner (its top sits 45% of the laptop's height above the laptop's foot), so the rows above it, and
     the recording on each, stay in view */
  .pv2{--pw:170px;display:block;max-width:720px;margin-inline:auto;width:100%}
  .pv2__laptop{display:block;width:calc(100% - var(--pw) * .75);max-width:none;margin:0}
  .pv2 .pv2__phone{width:var(--pw);margin:calc((100% - var(--pw) * .75) * -.275) 0 0 auto}
}
@media (min-width:1180px){.pv2{max-width:none;margin:0}}

/* 5b. the portal tour on Home (round 5, spec 16, R6): two tiers on white. Tier one is the site's split (as the pillars, 5 / 7): the
   headline alone in the light title style left (the right column empty; round 6: the body line and link are gone, the button "See the client portal" sits 32 px under the list). Tier two, 56 px below: the list (400 px)
   left, top-aligned with the laptop, which is the Client portal hero's fluid col size ((content - 64) x 6/11), right-aligned.
   The head is Home's own markup outside the Tour; the Tour keeps its markup and behaviour. Below 1180 the Tour stacks as it does. */
.pv2t .tour__head{max-width:none;margin:0}
.pv2t .tour__cta{margin-top:0}
.pv2t .tour__cta .btn{display:flex;width:100%}
@media (min-width:600px){.pv2t .tour__cta .btn{display:inline-flex;width:auto}}
.pv2t .tour-host{padding-top:0}
.pv2t .tour__item .tour__b{font-size:16px}
@media (min-width:1180px){
  .pv2t .tour__head{font-size:40px;grid-column:1;grid-row:1}
  .pv2t .tour--col .tour__grid{grid-template-rows:auto auto auto;row-gap:0}
  .pv2t .tour--col .tour__list{grid-column:1;grid-row:2;margin-top:40px}
  .pv2t .tour--col .tour__stage{grid-column:2;grid-row:1 / span 3;align-self:center}
  .pv2t .tour__cta{grid-column:1;grid-row:3;align-self:start;margin-top:32px}
  .pv2t .tour__cta .btn{display:inline-flex;width:auto}
  .pv2t .tour--col .tour__grid{grid-template-columns:min(400px,33vw) calc((100% - 64px) * 6 / 11);justify-content:space-between;column-gap:24px;align-items:start}
  .pv2t .tour--col .tour__stage{width:100%;max-width:none;margin:0 0 0 auto;justify-self:end}
  .pv2t .tour .tour__item,.pv2t .tour .tour__item+.tour__item{padding-top:14px;padding-bottom:14px}
  .pv2t .tour .tour__item .tour__b{transition:grid-template-rows .25s ease,opacity .25s ease}
}
@media (min-width:1180px) and (prefers-reduced-motion:reduce){.pv2t .tour .tour__item .tour__b{transition:none}}

/* ---------------------------------------------------------------- the motion standard (spec 12, amended by spec 15), driven by public/assets/v2.js
   Grade 0 (data-fade, site.css): opacity. Grade 1 [data-arrive]: opacity and a 32 px travel over 900 ms. Grade 2 [data-seq]: the
   parts fade in one after another (--i set by the script; --sb the first delay, --ss the step: 0 and 120 ms, the week 0.3 s and 0.22 s);
   [data-draw] draws a line over 1.2 s; [data-count] figures count in the script. Only a piece inside a section moves, never the
   section or its text. Each piece waits (.mv-wait) until its own trigger box is 50% in view, then .mv-go plays it, once. */
[data-arrive]{--mx:0px;--my:32px}
[data-arrive="left"]{--mx:-32px;--my:0px}
[data-arrive="right"]{--mx:32px;--my:0px}
.js .mv-wait[data-seq],.js .mv-wait[data-arrive]{opacity:0}
.js .mv-wait[data-arrive]{transform:translate(var(--mx),var(--my))}
.js .mv-wait[data-draw]{clip-path:inset(0 100% 0 0)}
.js .mv-go[data-seq]{animation:mv-fade .6s ease both}
.js .mv-go[data-draw]{animation:mv-draw 1.2s cubic-bezier(.2,.7,.2,1) both}
.js .mv-go[data-arrive]{animation:mv-arrive .9s cubic-bezier(.2,.7,.2,1) both}
.js .mv-go[data-seq],.js .mv-go[data-arrive]{animation-delay:calc(var(--sb,0s) + var(--i,0) * var(--ss,.12s))}
@keyframes mv-fade{from{opacity:0}to{opacity:1}}
@keyframes mv-arrive{from{opacity:0;transform:translate(var(--mx),var(--my))}to{opacity:1;transform:none}}
@keyframes mv-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .js .tour:not(.is-in) .tour__stage.tour__stage{transform:none}
  .js .mv-wait[data-arrive]{transform:none}
  .js .mv-wait[data-draw]{clip-path:none;opacity:0}
  .js .mv-go[data-seq],.js .mv-go[data-arrive],.js .mv-go[data-draw]{animation:mv-fade .6s ease both;animation-delay:0s}
}

/* ---------------------------------------------------------------- website v2: Client portal (spec 3) */
.cpv-body{margin-top:20px;max-width:30em}
.cpv-body p+p{margin-top:16px}
@media (min-width:1180px){.cpv-body{margin-top:28px}}

/* 1. hero: the text left, the Dashboard in a laptop right, centred on each other; stacked below 900 px */
.cpv-hero__in{display:grid;row-gap:48px}
.cpv-hero__body{margin-top:20px;max-width:30em}
.cpv-quote{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--navy);max-width:24em}
.cpv-quote__text{margin:0;font-weight:300;font-size:22px;line-height:1.3;text-wrap:balance}
.cpv-quote__by{margin-top:14px;color:var(--gray)}
.cpv-hero__shot{width:100%}
.cpv-caption{margin-top:16px;color:var(--gray);font-size:13px;line-height:1.4;text-align:center}
@media (min-width:600px){.cpv-quote__text{font-size:26px}.cpv-hero__body{margin-top:24px}}
@media (min-width:900px){
  .cpv-hero__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;column-gap:48px}
}
@media (min-width:1180px){.cpv-hero__in{column-gap:64px}.cpv-hero__body{margin-top:28px}}

/* 2 and 4. text above, a wide laptop 48 px under it */
.cpv-stack__text{max-width:640px}
.cpv-stack__laptop{margin-top:48px}

/* 3. checked by a person: the cut-out on the tint with its floor shadow left, the text right */
.cpv-checked__in{display:grid;row-gap:40px}
.cpv-checked__pic{justify-self:center;width:min(260px,100%)}
.cpv-checked__text{max-width:30em}
@media (min-width:600px){.cpv-checked__pic{width:min(340px,100%)}}
@media (min-width:900px){
  .cpv-checked__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:64px}
}
@media (min-width:1180px){.cpv-checked__in{column-gap:96px}}

/* 5 to 8. a portal object beside the text: columns centred on each other, the object about the text's height */
.cpv-side__in{display:grid;row-gap:40px}
.cpv-side__vis{width:100%;justify-self:center}
.cpv-side .cpv-phone{width:min(260px,100%);margin-inline:auto}
@media (min-width:900px){
  .cpv-side__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:64px}
  .cpv-side--rev .cpv-side__vis{order:-1}
}
@media (min-width:1180px){
  .cpv-side__in{grid-template-columns:minmax(0,560px) minmax(0,600px);justify-content:space-between;column-gap:64px}
  .cpv-side--rev .cpv-side__in{grid-template-columns:minmax(0,600px) minmax(0,560px)}
  .cpv-side__text{max-width:560px}
  .cpv-side--phone .cpv-side__vis{justify-self:center}
  .cpv-side--rev.cpv-side--result .cpv-side__in{grid-template-columns:minmax(0,760px) minmax(0,456px)}
}
/* the portal tour (spec 13; page/Tour.astro, behaviour in assets/v2.js): the site's tokens only, 4 px corners, hairlines.
   Below 1180 a row of tabs above the stage with the active line under it; 1180+ a vertical list beside the stage. */
.tour__grid{display:grid;gap:28px}
.tour__list{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);border-top:1px solid var(--navy);border-bottom:1px solid var(--navy)}
.tour__list::-webkit-scrollbar{display:none}
.tour__item{all:unset;box-sizing:border-box;position:relative;flex:0 0 auto;min-width:150px;padding:14px 14px 16px 0;cursor:pointer;color:var(--gray);display:block}
.tour__item:hover,.tour__item[aria-selected="true"]{color:var(--deep)}
.tour__item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tour__n{display:block}
.tour__s{display:block;margin-top:6px;font-weight:600;font-size:15px;line-height:1.25}
.tour__t,.tour__b{display:none}
.tour__bar{position:absolute;left:0;right:14px;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.tour.is-run .tour__item[aria-selected="true"] .tour__bar{animation:tour-x var(--dwell,5s) linear forwards}
.tour.is-held .tour__item[aria-selected="true"] .tour__bar{animation-play-state:paused}
.tour.is-still .tour__item[aria-selected="true"] .tour__bar{transform:scaleX(1);animation:none}
@keyframes tour-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tour-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.tour__cap{min-height:0}
.tour__ct{font-weight:600;font-size:20px;line-height:1.3}
.tour__cb{margin-top:8px;max-width:34em}
.tour__cap.is-swap{animation:tour-cap .3s cubic-bezier(.2,.7,.2,1)}
@keyframes tour-cap{from{opacity:0}to{opacity:1}}
/* the stage: every screen in the same grid cell, so it is as tall as the tallest and the others centre in it */
.tour__stage{position:relative;display:grid;width:100%;max-width:800px;margin-inline:auto}
.tour--col .tour__stage{max-width:700px}
.tour__scr{grid-area:1/1;align-self:center;opacity:0;z-index:0}
.tour__scr.is-prev{opacity:1;z-index:1}
.tour__scr.is-on{opacity:1;z-index:2;transition:opacity .3s cubic-bezier(.2,.7,.2,1)}
.tour .laptop{max-width:none}
.tour .laptop__shot{background:var(--white)}
.tour .tour__ph{display:none;width:min(300px,100%);margin-inline:auto}
.tour__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* entrance: the list fades 600 ms, the stage arrives 16 px from the right over 700 ms, then the first screen fades in */
.js .tour:not(.is-in) .tour__list,.js .tour:not(.is-in) .tour__cap{opacity:0}
.js .tour .tour__list,.js .tour .tour__cap{transition:opacity .6s ease}
.js .tour:not(.is-in) .tour__stage{opacity:0;transform:translateX(16px)}
.js .tour .tour__stage{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .tour:not(.is-shot) .tour__scr.is-on{opacity:0}
.tour-host{padding-top:48px}
.tour__foot{margin-top:40px;max-width:30em}
@media (max-width:899px){
  .tour__item{min-width:148px;scroll-snap-align:start}
  .tour__list{scroll-snap-type:x proximity;scroll-padding-inline:var(--gut)}
  .tour .tour__scr--p .tour__lap{display:none}
  .tour .tour__scr--p .tour__ph{display:block}
}
@media (min-width:900px){
  .tour__list{margin-inline:0;padding-inline:0;overflow:visible}
  .tour__item{flex:1 1 0;min-width:0;padding-right:12px}
  .tour__item+.tour__item{padding-left:12px}
  .tour__bar{left:0;right:0}
  .tour__item+.tour__item .tour__bar{left:12px}
  .tour__item:not(:first-child) .tour__bar{right:12px}
  .tour__item:last-child .tour__bar{right:0}
  .tour__item:first-child .tour__bar{right:12px}
}
@media (min-width:1180px){
  .tour__grid{grid-template-columns:minmax(300px,420px) minmax(0,800px);justify-content:center;column-gap:56px;align-items:center}
  .tour--col .tour__grid{grid-template-columns:minmax(300px,420px) minmax(0,700px)}
  .tour__list{display:block;border:0;overflow:visible}
  .tour__item{display:grid;grid-template-columns:36px minmax(0,1fr);padding:18px 0 18px 20px;border-top:1px solid var(--navy)}
  .tour__item+.tour__item{padding-left:20px}
  .tour__item:last-child{border-bottom:1px solid var(--navy)}
  .tour__n{padding-top:6px}
  .tour__s{display:none}
  .tour__t{display:block;grid-column:2;font-weight:600;font-size:20px;line-height:1.3}
  .tour__b{display:grid;grid-column:2;grid-template-rows:0fr;opacity:0;color:var(--deep);font-weight:400;font-size:18px;line-height:1.5;transition:grid-template-rows .25s cubic-bezier(.2,.7,.2,1),opacity .25s cubic-bezier(.2,.7,.2,1)}
  .tour__b>span{display:block;overflow:hidden;min-height:0;padding-top:0}
  .tour__item[aria-selected="true"] .tour__b{grid-template-rows:1fr;opacity:1}
  .tour__item[aria-selected="true"] .tour__b>span{padding-top:10px}
  .tour.is-measuring .tour__b{transition:none}
  .tour__cap{display:none}
  .tour__bar,.tour__item:not(:first-child) .tour__bar,.tour__item:last-child .tour__bar,.tour__item:first-child .tour__bar{left:0;right:auto;top:-1px;bottom:-1px;width:2px;height:auto;transform:scaleY(0);transform-origin:center top}
  .tour.is-run .tour__item[aria-selected="true"] .tour__bar{animation-name:tour-y}
  .tour.is-still .tour__item[aria-selected="true"] .tour__bar{transform:scaleY(1)}
}
/* a panel cut out along its card: the shadow right and below, as if lit from the top left (spec 15's visual rule), following the alpha shape */
.panel--cut{filter:drop-shadow(10px 14px 28px rgb(13 13 75 / .14))}
/* scroll mode (Client portal, 1180+, motion allowed; spec 15): the track is the box plus six steps of 70 vh; the box sticks at the
   viewport's centre (its top at 50vh less half its own height, --box, measured by the script); assets/v2.js reads the scroll through the track,
   picks the item and sets --p, the share of the step done, which fills the active bar (no timer) */
@media (min-width:1180px) and (prefers-reduced-motion:no-preference){
  .tour[data-mode="scroll"] .tour__track{height:calc(var(--box,640px) + 6 * 70vh)}
  .tour[data-mode="scroll"] .tour__grid{position:sticky;top:calc(50vh - var(--box,640px) / 2)}
  .tour[data-mode="scroll"]{overflow-anchor:none}
  .tour[data-mode="scroll"].is-collapsed .tour__track{height:auto}
  .tour[data-mode="scroll"].is-collapsed .tour__grid{position:static}
  .tour[data-mode="scroll"].is-scroll .tour__item[aria-selected="true"] .tour__bar{animation:none;transform:scaleY(var(--p,0))}
}
@media (prefers-reduced-motion:reduce){
  .tour__scr.is-on,.tour__b,.tour__cap.is-swap{transition:none;animation:none}
  .js .tour .tour__list,.js .tour .tour__cap,.js .tour .tour__stage{transition:none}
}

/* ---------------------------------------------------------------- How it works, website v2 (spec 4) */
/* 1. hero: "Book a call" and the link to 01 Find side by side (the link under the button on a phone) */
.hv2__btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px}

/* lists with hairlines: the criteria under 02 Qualify and the five items of "What counts as an appointment" */
.hl li{padding:12px 0;border-top:1px solid var(--dim);font-size:17px;line-height:1.4}
.hl--n{border-top:1px solid var(--navy)}
.hl--n li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;column-gap:16px;padding:16px 0}
.hl--n li:first-child{border-top:0}
.hl--n li:last-child{border-bottom:1px solid var(--dim)}
.hl__n{color:var(--navy)}
@media (min-width:1180px){.hl li{font-size:20px}.hl--n li{grid-template-columns:48px minmax(0,1fr);padding:20px 0}}

/* 02 Qualify: the phone on the left, the text on the right; the criteria box under the text with a hairline above it, and the
   sample call 48 px under the step */
.hv2__link{margin-top:12px}
.hv2__box{margin-top:32px;padding-top:20px;border-top:1px solid var(--navy);max-width:34em}
.hv2__boxt{margin-bottom:8px}
.hv2__player{margin-top:48px}
.hv2__player .player{max-width:none}

/* 03 Book: the quote in the light 26 px style under a hairline, then the week on the right, centred on the text */
.hv2__q{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--navy);max-width:24em}
.hv2__quote{font-weight:300;font-size:26px;line-height:1.25;text-wrap:balance}
.hv2__by{margin-top:16px}
.hv2__week{width:100%;max-width:640px;margin-inline:auto}
.hv2--book .hstep__media{display:block}
.hv2__right{width:100%}
@media (min-width:1180px){
  .hv2--book .hstep__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px}
  .hv2--book .hstep__media{display:flex;justify-content:flex-end}
  .hv2__right{width:100%;max-width:660px}
  .hv2--book .hv2__week{max-width:none;margin:0}
  .hv2--book .hv2__q{margin-top:32px;padding-top:24px}
}

/* the pictures beside the text, about the text's height: the Qualify phone and the Confirm scene a little larger than step 4's */
@media (min-width:600px){.hv2--qualify .phone{width:300px}}
@media (min-width:1180px){.hv2--qualify .phone{width:340px}.hv2--confirm .scene{width:min(420px,100%)}}

/* What counts as an appointment: the page's split (name left, list right) with a little more air above the list on a phone */
.hv2--counts .split{row-gap:32px}
@media (min-width:1180px){.hv2--counts .split{row-gap:0}.hv2--counts .split__name{max-width:8em}}

/* 04 Confirm: the proof line in the light 26 px style under a hairline */
.hv2__proof{margin-top:32px;padding-top:20px;border-top:1px solid var(--navy);max-width:16em;font-weight:300;font-size:26px;line-height:1.25;text-wrap:balance}

/* Packages: the statement and its body on the left, four outlined tiles with the big number, the label and the deck's line */
.hv2__pkghead .stmt{max-width:13em}
.hv2__pkgbody{margin-top:20px;max-width:34em}
.hv2--pkg .pkg__tiles{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px}
.hv2--pkg .pkg__tile{min-height:0}
.hv2__unit{margin-top:12px}
.hv2__tt{margin-top:16px;font-size:17px;line-height:1.5}
.hv2__after{margin-top:20px}
@media (min-width:600px){.hv2--pkg .pkg__tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:48px}}
@media (min-width:1180px){.hv2--pkg .pkg__tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px}.hv2__pkgbody{margin-top:28px}.hv2__after{margin-top:24px}}

/* Getting started: the title in the light title style, then the numbered row */
.hv2__title{margin-bottom:40px;font-weight:300;font-size:30px;line-height:1.2;text-wrap:balance;max-width:16em}
@media (min-width:600px){.hv2__title{margin-bottom:48px;font-size:34px}}
@media (min-width:1180px){.hv2__title{margin-bottom:64px;font-size:40px}}

/* ---------------------------------------------------------------- Results, website v2 (spec 5) */
/* 1. hero: the figures under the line, on the deep navy, in the on-dark form */
.rhero--v2 .rhero__figs{margin-top:48px}
.rhero--v2 .fig__text{color:var(--white)}
@media (min-width:1180px){.rhero--v2 .rhero__figs{margin-top:96px}}

/* the section titles in the light title style (as Getting started on How it works) */
.rv2__title{font-weight:300;font-size:30px;line-height:1.2;text-wrap:balance;max-width:16em}
@media (min-width:600px){.rv2__title{font-size:34px}}
@media (min-width:1180px){.rv2__title{font-size:40px}}

/* 2. who we book for: the title, the line, the six names under a hairline */
.rv2who__line{margin-top:20px;max-width:34em}

/* 3. hear it from them (round 5, spec 17): three Home client cards (page/ClientCard.astro) on tint / white / tint, the second mirrored.
   The first section carries the heading, 56 px above its card. The sections take .cc-sec's padding (the card's rise added). */
.rv2__head{margin-bottom:56px}
.rv2vids__line{margin-top:16px;max-width:34em}
.rv2cl--first{padding-top:72px}
@media (min-width:600px){.rv2cl--first{padding-top:96px}}
@media (min-width:1180px){.rv2cl--first{padding-top:144px}}

/* the names section: the compact band padding (48 / 64 / 96), the names row 32 px under the sentence */
.rv2who{padding:48px 0}
.rv2who .rimo__names{margin-top:32px}
@media (min-width:600px){.rv2who{padding:64px 0}.rv2who .rimo__names{margin-top:32px}}
@media (min-width:1180px){.rv2who{padding:96px 0}.rv2who .rimo__names{margin-top:32px}}

/* 4. the proof you can check: the text on the left, the sample call on the right, centred on each other */
.rv2chk__in{display:grid;row-gap:48px}
.rv2chk__body{margin-top:24px;max-width:30em}
.rv2chk__link{margin-top:12px}
@media (min-width:900px){.rv2chk__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:center}}
@media (min-width:1180px){.rv2chk__in{column-gap:96px}.rv2chk__body{margin-top:32px}}

/* ---------------------------------------------------------------- website v2: FAQ (spec 6) */
/* the hero's second part: a hairline, the light title and its text (560 px at most), under the body line */
.fq-box{margin-top:40px;padding-top:24px;border-top:1px solid var(--navy);max-width:560px}
.fq-box__title{font-weight:300;font-size:26px;line-height:1.2;text-wrap:balance}
.fq-box__text{margin-top:12px}
@media (min-width:600px){.fq-box{margin-top:48px}.fq-box__title{font-size:30px}}
@media (min-width:1180px){.fq-box{margin-top:56px;padding-top:28px}.fq-box__title{font-size:34px}.fq-box__text{margin-top:16px}}

/* ---------------------------------------------------------------- website v2: About (spec 7) */
/* a cut-out on white: the scene's width is the picture's, centred in its column; the floor shadow is a step darker than white */
.ab2-pic{display:flex;justify-content:center}
.ab2-pic--owner .scene{width:min(300px,100%)}
.ab2-pic--team .scene{width:min(350px,100%)}
@media (min-width:600px){
  .ab2-pic--owner .scene{width:min(380px,100%)}
  .ab2-pic--team .scene{width:min(520px,100%)}
}
@media (min-width:1180px){
  .ab2-pic--owner .scene{width:min(460px,100%)}
  .ab2-pic--team .scene{width:min(700px,100%)}
}

/* 1. the hero: the statement and the body left, the owner right; the picture below the text on a phone and a tablet.
   The mosaic (the five-tile band) follows inside the section, as before */
.ab2-hero__in{display:grid;row-gap:40px}
.ab2-hero__line{font-family:Zodiak,Georgia;font-weight:700;font-size:32px;line-height:1;letter-spacing:0;text-wrap:balance}
.ab2-hero__body{margin-top:24px;max-width:34em}
@media (min-width:600px){.ab2-hero__in{row-gap:48px}.ab2-hero__line{font-size:48px}}
@media (min-width:1180px){
  .ab2-hero__in{grid-template-columns:minmax(0,1fr) 460px;column-gap:64px;align-items:center}
  .ab2-hero__line{font-size:60px;max-width:11em}
  .ab2-hero__body{margin-top:32px}
}

/* the band under the hero (spec 14, direction A of mockups/look-v2/about-band.html): deep navy, full width, 260 px at 390 and
   288 px at 1440 (between, by width); one diagonal sweep of the filled pattern masked at 55 degrees (the mask's stops are
   percentages of its gradient line, so the sweep scales with the width from 390 up; at most 1440 wide, centred), the glass at the
   right as on the closing bands */
.ab-band{position:relative;overflow:hidden;background:var(--deep);height:clamp(260px,calc(260px + (100vw - 390px) * .02667),288px);margin-top:72px;pointer-events:none}
.ab-band__v{position:absolute;inset:0}
.ab-band__lap{display:none}
.ab-band__sweep{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;width:min(100%,1440px);overflow:hidden;
  -webkit-mask-image:linear-gradient(125deg,transparent 9.84%,#000 26.55%,#000 50.75%,transparent 67.46%);
  mask-image:linear-gradient(125deg,transparent 9.84%,#000 26.55%,#000 50.75%,transparent 67.46%)}
.ab-band__lap .ab-band__sweep{-webkit-mask-image:linear-gradient(125deg,transparent 20.59%,#000 34.82%,#000 55.43%,transparent 69.67%);
  mask-image:linear-gradient(125deg,transparent 20.59%,#000 34.82%,#000 55.43%,transparent 69.67%)}
.ab-band__sweep svg{position:absolute!important;left:0!important;top:0!important;display:block}
.ab-band__glass{position:absolute;pointer-events:none;width:calc(210px * 1.0238);left:calc(100% - 130px - 210px * .0119);top:calc(100% - 128px - 210px * .0119)}
.ab-band__glass svg{display:block;width:100%;height:auto}
@media (min-width:600px){.ab-band{margin-top:96px}.ab-band__pho{display:none}.ab-band__lap{display:block}}
@media (min-width:1180px){
  .ab-band{margin-top:144px}
  .ab-band__glass{width:calc(380px * 1.0238);left:calc(100% - 300px - 380px * .0119);top:calc(100% - 150px - 380px * .0119)}
}

/* 3. what we stand for: the title, then the four values as the pillar split (name left in the pillar size, line right),
   a navy hairline above each */
.ab2-vals{margin-top:32px}
.ab2-val{padding:24px 0 32px;border-top:1px solid var(--navy)}
.ab2-val__name{font-weight:300;font-size:26px;line-height:1.2;text-wrap:balance}
.ab2-val__line{margin-top:12px;max-width:34em}
@media (min-width:600px){.ab2-vals{margin-top:40px}.ab2-val__name{font-size:30px}}
@media (min-width:1180px){
  .ab2-vals{margin-top:64px}
  .ab2-val{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;align-items:center;padding:32px 0 40px}
  .ab2-val__name{font-size:36px}
  .ab2-val__line{margin-top:0}
}

/* 4. who we are: the title, three paragraphs (the trade-name line last, gray 15 px) and the figures left, the team right;
   the picture below the text on a phone and a tablet. The two columns share one centre line */
.ab2-who__in{display:grid;row-gap:48px}
.ab2-who__body{display:grid;gap:16px;margin-top:24px;max-width:34em}
.ab2-trade{color:var(--gray);font-size:15px;line-height:1.5}
.ab2-who__figs{margin-top:40px}
@media (min-width:1180px){
  .ab2-who__in{grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:64px;align-items:center}
  .ab2-who__body{margin-top:32px}
  .ab2-who__figs{margin-top:48px}
}

/* 5. what we won't do: the title left, the four lines right in the light 26 px style, a hairline above each */
.ab2-wont__list{margin-top:32px}
.ab2-wont__item{padding:20px 0 24px;border-top:1px solid var(--navy);font-weight:300;font-size:26px;line-height:1.25;text-wrap:pretty}
@media (min-width:600px){.ab2-wont__list{margin-top:40px}}
@media (min-width:1180px){
  .ab2-wont__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;align-items:center}
  .ab2-wont__list{margin-top:0}
  .ab2-wont__item{padding:24px 0 28px}
}

/* ---------------------------------------------------------------- website v2: Book a call (spec 10) */
/* the right column: a hairline, the light title "What we'll cover", the three items as a hairline list, then "Already a client?".
   Below a laptop it follows the form and its note (the form is the point of the page; the DOM order is the same) */
.bk--v2{padding-bottom:72px}
.bk--v2 .bk__in{grid-template-areas:"head" "form" "side"}
.bk__side{grid-area:side;max-width:640px}
.bk__cover{padding-top:20px;border-top:1px solid var(--navy)}
.bk__cover-title{font-weight:300;font-size:26px;line-height:1.2;text-wrap:balance}
.bk__cover-list{margin-top:16px}
.bk__cover-list li{padding:14px 0;border-top:1px solid var(--navy)}
.bk__client{margin-top:40px}
.bk__direct{margin-top:40px;padding-top:20px;border-top:1px solid var(--navy)}
@media (min-width:600px){.bk__cover-title{font-size:30px}.bk--v2{padding-bottom:96px}}
@media (min-width:1180px){
  .bk--v2{padding-bottom:144px}
  /* two columns: the headline, the line and the side blocks left; the form right, its top level with the headline's top. The
     page has no outline device at step 6, so the section keeps the standard section padding top and bottom */
  .bk--v2 .bk__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head form" "side form";grid-template-rows:auto 1fr;column-gap:64px;row-gap:56px}
  .bk--v2 .bk__line{font-size:48px}
  .bk--v2 .bk__sub{margin-top:24px}
  .bk--v2 .bk__main{align-self:start;max-width:none;min-height:0}
  .bk__side{align-self:start;max-width:none}
}
@media (min-width:1440px){.bk--v2 .bk__line{font-size:64px}.bk--v2 .bk__sub{margin-top:28px}}

/* the compact form (spec 14): fields 48 px tall; name and phone on one row, email and agency on one row (two equal fields, 24 px
   between); the note is the one optional question and always visible (round 4: no fold) */
.bk--v2 .fm{row-gap:24px}
.bk--v2 .fld{align-content:start}
.bk--v2 .fld__input{min-height:48px;padding:10px 14px}
.bk--v2 .fld--err .fld__input{padding:9px 13px}
.bk--v2 .fld__area{min-height:112px}
.fm__row{display:grid;row-gap:24px;min-width:0}
@media (min-width:600px){.fm__row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}