/* Astraea site. Full-width bands that alternate cream and green-black, one 1200px column,
   large Outfit type, gold for the second line of a heading, pink for PEC-1 and for accents. */
:root{
  --ink:#111111; --body:#2a2a2a; --muted:#6b665b;
  --gold:#A8862B; --gold-dark:#8A6B1E; --pink:#C2187A; --pink-bright:#E04A9A;
  --cream:#FBF9F4; --panel:#F5F1E8; --white:#ffffff; --gold-fill:#FBF3DC; --pink-fill:#FBE3EF;
  --line:#d8d0bf; --dash:#9a9588;
  --dark:#0E1210; --dark-2:#161b18; --on-dark:#ffffff; --on-dark-soft:#cfc8b8; --dark-line:#3d4039;
  --font:'Outfit','Trebuchet MS',Arial,sans-serif;
  --gutter:clamp(20px,5vw,64px); --max:1200px; --band:clamp(56px,7.5vw,104px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--body);font-family:var(--font);font-weight:300;font-size:18px;line-height:1.55}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--pink-bright);outline-offset:3px}
[id]{scroll-margin-top:84px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.band.panel{background:var(--panel)}
.band.dark{background:var(--dark);color:var(--on-dark-soft)}
.gold{color:var(--gold)}
.pink{color:var(--pink)}
.dark .pink{color:var(--pink-bright)}

/* type */
.eyebrow{display:flex;align-items:center;justify-content:space-between;gap:24px;font-weight:500;font-size:13px;letter-spacing:.26em;line-height:1.4;text-transform:uppercase;color:var(--gold)}
.eyebrow::after{content:"";flex:none;width:36px;height:4px;background:var(--pink)}
.dark .eyebrow::after,.subhero .eyebrow::after{background:var(--pink-bright)}
h2{font-weight:600;font-size:clamp(32px,4.7vw,58px);line-height:1.06;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
h2 span{display:block}
.dark h2{color:var(--on-dark)}
h3{font-weight:600;font-size:24px;line-height:1.2;color:var(--pink)}
.dark h3{color:var(--pink-bright)}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.5;max-width:40em}
.label{font-weight:600;font-size:12.5px;letter-spacing:.22em;line-height:1.4;text-transform:uppercase;color:var(--gold-dark)}
.head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(36px,5vw,64px)}

/* buttons */
.btn,form button{display:inline-block;font:inherit;font-weight:500;font-size:17px;line-height:1.2;padding:15px 26px;border-radius:2px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-pink,form button{background:var(--pink);color:#fff}
.btn-pink:hover,form button:hover{background:#a01365}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--dark);border-bottom:1px solid var(--dark-line)}
.top .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.brand img{width:142px}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.nav a{color:var(--on-dark-soft);text-decoration:none;font-weight:400;font-size:15.5px;white-space:nowrap}
.nav a:hover{color:var(--on-dark)}
.nav a.btn{color:#fff;padding:10px 18px;font-size:15.5px}
.menu-btn{display:none;font:inherit;font-weight:500;font-size:15px;color:var(--on-dark);background:none;border:1px solid var(--dark-line);border-radius:2px;padding:9px 14px;cursor:pointer}
@media (max-width:980px){
  /* a menu button that opens the links */
  .js .menu-btn{display:block}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--dark);border-bottom:1px solid var(--dark-line);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gutter) 22px}
  .js .nav.open{display:flex}
  .js .nav a{padding:12px 0;font-size:18px;width:100%}
  .js .nav a.btn{width:auto;margin-top:10px;padding:13px 22px}
  /* if the script does not run, the links sit in rows under the wordmark instead */
  html:not(.js) .top{position:static}
  html:not(.js) [id]{scroll-margin-top:16px}
  html:not(.js) .top .wrap{display:block;min-height:0;padding-top:20px}
  html:not(.js) .nav{flex-wrap:wrap;gap:6px 28px;margin-top:16px;padding-bottom:14px}
  html:not(.js) .nav a.btn{position:absolute;right:var(--gutter);top:10px;padding:8px 14px;font-size:14.5px}
}
@media (max-width:480px){
  html:not(.js) .nav{justify-content:space-between;gap:6px 10px}
  html:not(.js) .nav a{font-size:clamp(12px,3.3vw,15px)}
}

/* hero */
.hero{position:relative;background:var(--dark);color:var(--on-dark-soft);overflow:hidden}
.hero-img{position:absolute;right:0;top:0;height:100%;width:50%;object-fit:cover;object-position:30% 50%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%);mask-image:linear-gradient(to right,transparent 0,#000 22%)}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(56px,8vw,104px) clamp(72px,9vw,112px)}
.hero-copy{max-width:540px;display:flex;flex-direction:column;gap:6px}
.hero h1,.hero .kick{font-weight:600;font-size:clamp(34px,4.2vw,54px);line-height:1.06;letter-spacing:-.02em;color:var(--on-dark)}
.hero h1 span{display:block}
.hero h1 .pec{font-size:clamp(96px,15vw,196px);line-height:.94;letter-spacing:-.045em;color:var(--pink-bright);margin-left:-.03em}
.hero h1 .gold{color:var(--gold)}
.hero h1 em{font-style:normal}
.hero .lede{margin-top:22px;max-width:30em}
.hero .herotag{margin-top:8px;font-size:16px;max-width:32em}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-cap{position:absolute;right:var(--gutter);bottom:26px;z-index:1;font-weight:500;font-size:12px;letter-spacing:.22em;line-height:1.5;text-transform:uppercase;color:#fff;text-align:right}
@media (max-width:900px){
  .hero{display:flex;flex-direction:column}
  .hero .wrap{order:1;width:100%;padding-bottom:8px}
  .hero-img{order:2;position:relative;width:100%;height:auto;aspect-ratio:1/1;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
  .hero-cap{order:3;position:static;padding:14px var(--gutter) 22px;text-align:left}
}

/* scrolling strip */
.ticker{background:var(--dark);color:var(--on-dark-soft);border-top:1px solid var(--dark-line);overflow:hidden;white-space:nowrap;font-weight:500;font-size:13px;letter-spacing:.24em;line-height:1.4;padding-block:17px}
.tk{display:flex;width:max-content;animation:tk 90s linear infinite}
.tk span{flex:none;white-space:pre}
.ticker b{font-weight:600;color:var(--pink-bright)}
@keyframes tk{to{transform:translateX(-50%)}}

/* photos with a caption laid over the bottom edge */
.photo{position:relative;overflow:hidden;background:var(--dark)}
.photo img{width:100%}
.photo figcaption,.contact-photo figcaption{font-weight:500;font-size:12px;letter-spacing:.2em;line-height:1.5;text-transform:uppercase;color:#fff}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;background:linear-gradient(to bottom,rgba(14,18,16,0),rgba(14,18,16,.86))}

/* why hardware */
.why-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.why-grid .head{margin-bottom:0}
.big{font-weight:600;font-size:clamp(32px,4.7vw,58px);line-height:1.06;letter-spacing:-.02em;color:var(--ink)}
.big strong{display:block;font-weight:600;color:var(--gold)}
.big small{display:block;margin-top:24px;font-weight:300;font-size:clamp(19px,1.6vw,22px);line-height:1.5;letter-spacing:0;color:var(--body);max-width:26em}
@media (max-width:820px){.why-grid{grid-template-columns:minmax(0,1fr)}}

/* how it works: a panel-coloured heading block, then three steps on a timeline */
.split{padding-top:0}
.splithead{padding-block:var(--band) clamp(40px,5vw,64px);background:var(--panel);box-shadow:0 0 0 100vmax var(--panel);clip-path:inset(0 -100vmax)}
.ctxblock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(32px,5vw,72px);align-items:start}
.ctx1{grid-column:1;font-size:clamp(19px,1.6vw,22px);line-height:1.5}
.ctx2{grid-column:2;grid-row:1/3;padding:26px 28px 28px;background:var(--gold-fill);font-weight:500;font-size:clamp(19px,1.7vw,23px);line-height:1.4;color:var(--ink)}
.ctx2 span{color:var(--pink)}
.stages{--sp:clamp(20px,3vw,44px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,64px)}
.stage{display:flex;flex-direction:column;gap:14px;min-width:0;padding-right:var(--sp)}
.stage:last-child{padding-right:0}
.stage .num{position:relative;margin-right:calc(-1 * var(--sp));padding-bottom:26px;border-bottom:2px solid var(--gold);font-weight:600;font-size:clamp(80px,9vw,124px);line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.stage:last-child .num{margin-right:0}
.stage .num::after{content:"";position:absolute;left:0;bottom:-7px;width:12px;height:12px;border-radius:50%;background:var(--pink)}
.stage b{min-height:2.4em;margin-top:8px;font-weight:600;font-size:24px;line-height:1.2;color:var(--pink)}
.stage p{font-size:17px}
@media (max-width:900px){
  .ctxblock{grid-template-columns:minmax(0,1fr)}
  .ctx2{grid-column:1;grid-row:auto;margin-top:8px}
  .stages{grid-template-columns:minmax(0,1fr);gap:44px}
  .stage{padding-right:0}
  .stage .num{margin-right:0}
  .stage b{min-height:0}
}

/* the architecture */
.archhead{display:flex;flex-direction:column;gap:.14em}
.archhead p{font-weight:600;font-size:clamp(28px,4vw,50px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.archhead .archline2{color:var(--gold)}
.swipehint{display:none}
.diagram{background:var(--white);border:1px solid var(--line);padding:clamp(12px,2.4vw,36px)}
.diagram svg{display:block;width:100%;max-width:900px;height:auto;margin-inline:auto}
.diagram svg.dmobile{display:none}
.notdo{margin-top:28px;padding:26px 28px 28px;background:var(--gold-fill)}
.notdo h3{margin-bottom:10px}
.notdo p{font-weight:400;font-size:17px;line-height:1.5;color:var(--ink)}
.notdo p + p{margin-top:6px}
@media (max-width:760px){
  /* phones get the tall version of the diagram, fitted to the screen width */
  .diagram{margin-inline:calc(8px - var(--gutter));padding:12px 4px}
  .diagram svg:not(.dmobile){display:none}
  .diagram svg.dmobile{display:block}
}

/* the interlock: dark, with the photo running off the right edge */
.interlock{position:relative;overflow:hidden}
.interlock-copy{position:relative;z-index:1;max-width:min(600px,58%)}
.interlock .chip{width:124px;margin-bottom:30px}
.interlock h2{font-size:clamp(30px,3.4vw,48px)}
.interlock .eyebrow::after{display:none}
.interlock .head{margin-bottom:28px}
.interlock .lede{font-size:19px}
.interlock .lede + .lede{margin-top:16px}
.pull{margin-top:36px;font-weight:600;font-size:clamp(24px,2.7vw,36px);line-height:1.15;letter-spacing:-.012em;color:var(--on-dark);text-wrap:balance}
.pull::before{content:"";display:block;width:96px;height:6px;margin-bottom:24px;background:var(--pink-bright)}
.pull>span{display:block;text-wrap:balance}
.pull .pink{white-space:nowrap}
.interlock .photo{position:absolute;top:0;right:0;bottom:0;width:46%;background:none}
.interlock .photo img{height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%);mask-image:linear-gradient(to right,transparent 0,#000 34%)}
.interlock .photo figcaption{left:auto;right:var(--gutter);bottom:26px;padding:0;background:none;letter-spacing:.22em;text-align:right}
@media (max-width:820px){
  .interlock{display:flex;flex-direction:column;padding-bottom:0}
  .interlock-copy{max-width:none}
  .interlock .photo{order:2;position:relative;width:auto;aspect-ratio:4/3;margin-top:40px}
  .interlock .photo img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%)}
  .interlock .photo figcaption{right:auto;left:var(--gutter);bottom:18px;text-align:left}
}

/* platform. Cards on small screens; on wide screens a flow: three cards down the left,
   the chip in the middle, two cards on the right, joined by arrows. */
.flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.flow>div{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:22px 24px 22px;background:var(--white);border:1px solid var(--line);border-radius:10px}
.flow b{font-weight:600;font-size:24px;line-height:1.2;color:var(--pink)}
.flow>div.pec{background:var(--pink-fill);border-color:var(--pink)}
.flow p{font-size:17px;color:var(--ink)}
.platform .photo{margin-top:clamp(36px,5vw,56px)}
@media (max-width:700px){.flow{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1200px){
  .flow{--row:196px;--rgap:52px;--cy:262px;--stroke:linear-gradient(var(--gold),var(--gold));
    grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(0,1fr);grid-template-rows:repeat(3,var(--row));gap:var(--rgap) 72px}
  .flow>div:nth-child(1){grid-area:1/1}
  .flow>div:nth-child(2){grid-area:2/1}
  .flow>div:nth-child(3){grid-area:3/1;z-index:2}
  .flow>div:nth-child(5){grid-area:1/3;z-index:2}
  .flow>div:nth-child(6){grid-area:2/3}
  /* arrows between stacked cards */
  .flow>div:nth-child(1)::after,.flow>div:nth-child(2)::after,.flow>div:nth-child(5)::after{content:"";position:absolute;left:calc(50% - 6px);top:calc(100% + 5px);width:12px;height:calc(var(--rgap) - 8px);
    background:var(--stroke) 50% 0/2px calc(100% - 9px) no-repeat,conic-gradient(from -30deg at 50% 100%,var(--gold) 0 60deg,transparent 60deg) 50% 100%/12px 11px no-repeat}
  /* PEC-1 in the middle: chip on a pink disc, name and description beneath */
  .flow>div.pec{grid-area:1/2/4/3;align-items:center;text-align:center;background:none;border:0;border-radius:0;padding:calc(var(--cy) + 50% + 20px) 0 0}
  .flow>div.pec::before{content:"";position:absolute;left:0;top:var(--cy);width:100%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:var(--pink-fill)}
  .flow>div.pec::after{content:"";position:absolute;left:50%;top:var(--cy);width:68%;aspect-ratio:560/565;transform:translate(-50%,-50%);border-radius:14px;background:url(images/chipface.jpg) center/cover;box-shadow:0 12px 40px rgba(14,18,16,.28)}
  .flow>div.pec b{font-size:44px;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
  /* Trust Authority to the chip: right, up, right */
  .flow>div:nth-child(3)::after{content:"";position:absolute;left:calc(100% + 1px);bottom:calc(50% - 1px);width:calc(66px + 15.2%);height:calc(2 * (var(--row) + var(--rgap)) + var(--row) / 2 - var(--cy) + 7px);
    background:var(--stroke) left 0 bottom 0/37px 2px no-repeat,var(--stroke) left 35px bottom 0/2px calc(100% - 5px) no-repeat,var(--stroke) left 35px top 5px/calc(100% - 44px) 2px no-repeat,
      conic-gradient(from 240deg at 100% 50%,var(--gold) 0 60deg,transparent 60deg) right 0 top 0/11px 12px no-repeat}
  /* the chip to Trust Ledger: right, up, right */
  .flow>div:nth-child(5)::before{content:"";position:absolute;right:calc(100% + 1px);top:calc(50% - 6px);width:calc(66px + 15.2%);height:calc(var(--cy) - var(--row) / 2 + 7px);
    background:var(--stroke) left 0 bottom 0/calc(100% - 35px) 2px no-repeat,var(--stroke) right 35px bottom 0/2px calc(100% - 5px) no-repeat,var(--stroke) right 9px top 5px/28px 2px no-repeat,
      conic-gradient(from 240deg at 100% 50%,var(--gold) 0 60deg,transparent 60deg) right 0 top 0/11px 12px no-repeat}
}

/* where it lands */
@media (min-width:901px){#industries .head{margin-bottom:28px}}
.lands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.lands a{display:block;text-decoration:none;min-width:0}
.lands a.wide{grid-column:span 2}
.lands .tile-img{display:block;height:clamp(150px,13.5vw,176px);border-bottom:6px solid var(--gold)}
.lands a.wide .tile-img{border-bottom-color:var(--pink)}
.lands img{width:100%;height:100%;object-fit:cover}
.lands .label,.lands .line{display:block}
.lands .label{color:var(--pink);margin-top:14px;letter-spacing:.16em;text-wrap:balance}
.lands .line{color:var(--ink);font-weight:400;font-size:18px;line-height:1.35;margin-top:4px}
.lands a:hover .line{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:4px}
@media (max-width:1000px){.lands{grid-template-columns:repeat(2,minmax(0,1fr))}.lands .tile-img{height:clamp(150px,26vw,230px)}}
/* one column on phones: each picture at its own proportions, nothing cropped */
@media (max-width:560px){.lands{grid-template-columns:minmax(0,1fr)}.lands a.wide{grid-column:auto}.lands .tile-img,.lands img{height:auto}}

/* early access */
.contact{position:relative;background:var(--dark);color:var(--on-dark-soft);overflow:hidden}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.contact::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(14,18,16,.35) 0%,rgba(14,18,16,.8) 60%,var(--dark) 100%)}
.contact-photo figcaption{position:absolute;z-index:2;right:var(--gutter);top:26px;letter-spacing:.22em;text-align:right}
.contact .wrap{position:relative;z-index:2;padding-block:var(--band)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:end}
.contact .eyebrow::after{display:none}
.contact h2{margin-top:18px;font-size:clamp(34px,5.2vw,68px);color:var(--on-dark)}
.contact .lede{margin-top:24px}
.contact .lede + p{margin-top:12px;font-size:17px}
.rule{width:96px;height:6px;background:var(--pink-bright);margin-bottom:26px}
.formbox{background:rgba(14,18,16,.86);border:1px solid var(--dark-line);padding:clamp(22px,3vw,34px)}
form{display:flex;flex-direction:column;gap:14px}
form div{display:flex;flex-direction:column;gap:6px}
label{font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}
input,textarea{width:100%;font:inherit;font-size:17px;color:var(--on-dark);background:var(--dark);border:1px solid var(--dark-line);border-radius:2px;padding:12px 14px;color-scheme:dark}
textarea{resize:vertical;min-height:110px}
input:focus,textarea:focus{border-color:var(--pink-bright)}
form button{align-self:flex-start}
@media (max-width:900px){
  .contact-grid{grid-template-columns:minmax(0,1fr);align-items:start}
  .contact-photo figcaption{left:var(--gutter);top:24px;text-align:left}
  .contact .wrap{padding-top:calc(var(--band) + 40px)}
}

/* footer */
.foot{background:var(--dark);color:var(--on-dark-soft);border-top:1px solid var(--dark-line);font-size:15px}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding-block:26px 32px}
.foot a{color:var(--gold)}
/* the home page footer is one block with a line break; lay it out like the two-part footer elsewhere */
.foot .row>div:first-child{flex:1;display:flex;flex-wrap:wrap;gap:8px .3em}
.foot .row br,.foot .row>div:empty{display:none}
.foot .sov{margin-left:auto}
@media (max-width:700px){.foot .row>div:first-child{display:block}.foot .sov{display:block;margin-top:6px}}

/* inner pages */
.subhero{position:relative;background:var(--dark);color:var(--on-dark-soft);overflow:hidden}
.subhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.subhero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,18,16,.25) 0%,rgba(14,18,16,.9) 100%)}
.subhero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;min-height:clamp(340px,44vw,520px);padding-block:56px clamp(36px,5vw,60px)}
.subhero h1{font-weight:600;font-size:clamp(32px,4.6vw,58px);line-height:1.06;letter-spacing:-.02em;color:var(--on-dark);max-width:17em;text-wrap:balance}
.subhero .eyebrow{color:var(--pink-bright)}
.article{display:flex;flex-direction:column;gap:22px}
.article>p{max-width:38em;font-size:19px}
.enf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:18px}
.enf h2{grid-column:1/-1;font-weight:600;font-size:12.5px;letter-spacing:.22em;line-height:1.4;color:var(--gold-dark)}
.enf p{background:var(--gold-fill);padding:20px 22px 22px;font-size:17px}
.enf strong{display:block;font-weight:600;font-size:20px;line-height:1.25;color:var(--pink);margin-bottom:6px}
.subgal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-block:18px}
.subgal figure{display:flex;flex-direction:column;gap:10px;min-width:0}
.subgal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.subgal.square img{aspect-ratio:1/1}
.subgal figcaption{font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.back{margin-top:16px}
@media (max-width:900px){.enf{grid-template-columns:minmax(0,1fr)}.subgal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.thanks .wrap{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px}
.thanks h1{font-weight:600;font-size:clamp(40px,6vw,76px);line-height:1.04;letter-spacing:-.02em;color:var(--on-dark)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tk{animation:none}}
.subhero.plain .wrap{min-height:clamp(240px,30vw,360px)}
.article h2{font-weight:600;font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.01em;margin-top:18px;max-width:24em}
.article ul{display:flex;flex-direction:column;gap:10px;max-width:38em}
.article ul li{position:relative;padding-left:28px;font-size:19px}
.article ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;background:var(--pink)}
.article .lead{font-size:clamp(20px,1.9vw,24px);line-height:1.45;color:var(--ink);max-width:34em}
.sf{display:flex;flex-direction:column;max-width:900px;border:1px solid var(--line);margin-block:10px}
.sf img{width:100%}
.sf figcaption{padding:12px 16px;font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);background:var(--panel)}
.orbit{max-width:900px;border:1px solid var(--line)}
.orbit svg{display:block;width:100%;height:auto}
.canonline{font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--pink);margin-top:14px}
.subhero .eyebrow{text-transform:uppercase}

/* about: the founder story in four bands */
.ab-hero{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark-soft)}
.ab-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 clamp(24px,4vw,56px);align-items:center;padding-block:var(--band)}
.ab-hero .ab-copy{display:flex;flex-direction:column;gap:22px}
.ab-hero .eyebrow::after{display:none}
.ab-hero h1{font-weight:600;font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.025em;color:var(--on-dark);text-wrap:balance}
.ab-open{font-weight:600;font-size:clamp(24px,2.7vw,36px);line-height:1.12;letter-spacing:-.015em;color:var(--gold);text-wrap:balance}
.ab-hero .ab-copy p:last-child{font-size:19px;max-width:30em}
/* the pin photo dissolves into the band on three sides and runs off the right edge */
.ab-pin{margin-right:calc(-1 * var(--gutter) - max(0px,(100vw - var(--max)) / 2))}
.ab-pin img{width:100%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%),linear-gradient(to bottom,transparent 0,#000 11%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 12%),linear-gradient(to bottom,transparent 0,#000 11%,#000 88%,transparent 100%);
  mask-composite:intersect}
.ab-pin figcaption{margin-top:-4px;padding-right:calc(var(--gutter) + max(0px,(100vw - var(--max)) / 2));font-weight:500;font-size:12px;letter-spacing:.22em;line-height:1.5;text-transform:uppercase;color:#fff;text-align:right}
@media (max-width:900px){
  .ab-hero .wrap{grid-template-columns:minmax(0,1fr);padding-bottom:28px}
  .ab-pin{margin:20px calc(-1 * var(--gutter)) 0}
  .ab-pin img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .ab-pin figcaption{padding-inline:var(--gutter);text-align:left}
}
.ab-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center}
.ab-detail img{width:100%}
.ab-two p{font-size:clamp(19px,1.6vw,22px);line-height:1.5}
.ab-line{display:block;margin-top:30px;font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ab-line::before{content:"";display:block;width:96px;height:6px;margin-bottom:24px;background:var(--pink)}
/* the career paragraph, with its last sentence set large beside it */
.ab-career{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;font-size:19px}
.ab-lesson{font-weight:600;font-size:clamp(30px,3.9vw,52px);line-height:1.06;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ab-lesson span{display:block}
.ab-close{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:end}
.ab-close p{font-size:clamp(19px,1.6vw,22px);line-height:1.5}
.ab-close .ab-line{color:var(--on-dark);font-size:clamp(26px,3vw,40px);line-height:1.12}
.ab-close .ab-line::before{background:var(--pink-bright)}
.ab-close .pink{white-space:nowrap}
.ab-sign{display:flex;flex-direction:column;gap:22px}
.ab-close .ab-sign p{font-size:19px}
.ab-close .ab-sign .ab-name{margin-top:6px;padding-top:18px;border-top:2px solid var(--gold);font-weight:500;font-size:13px;letter-spacing:.22em;line-height:1.5;text-transform:uppercase;color:var(--gold)}
.ab-name b{display:block;margin-bottom:4px;font-weight:600;font-size:28px;letter-spacing:-.01em;line-height:1.2;text-transform:none;color:var(--on-dark)}
@media (max-width:820px){.ab-two,.ab-career,.ab-close{grid-template-columns:minmax(0,1fr)}.ab-detail img{max-width:420px}}