/* Prime Pacific Air · site.css  (colours and fonts come only from tokens.css; layout sizes are typed here in rem) */
*{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text-1);font:400 var(--fs-body)/1.6 var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:80rem;margin:0 auto;padding:0 3rem}
h1,h2,h3{font-weight:var(--w-head);margin:0}
h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:var(--track-h1);max-width:12em}
h2,.h2{overflow-wrap:break-word;hyphens:auto;font-size:var(--fs-h2);line-height:1.18;letter-spacing:var(--track-h2);max-width:18em}
h3{font-size:1.25rem;line-height:1.35;letter-spacing:-.01em}
p{margin:0}
.label{font-size:1.125rem;font-weight:500;color:var(--text-2);letter-spacing:.01em;margin:0}
.muted{color:var(--text-2)}
.nw{white-space:nowrap}
.num{font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:500}

/* strip */
.strip{background:var(--warn-bg);color:var(--warn);font-size:1.125rem;line-height:1.4;padding:.45rem 0;text-align:center}

/* header: Verseva outline bar on computers */
header{padding:1rem 0 .5rem;position:sticky;top:0;z-index:20;background:var(--bg)}
.bar{display:flex;align-items:center;gap:1.5rem;border:1px solid var(--hairline);border-radius:999px;padding:.375rem .5rem .375rem .75rem;max-width:72rem;margin:0 auto;background:var(--bg)}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-weight:600;font-size:1.1875rem;letter-spacing:-.01em;min-height:3rem}
.tile{background:var(--tile);border-radius:.625rem;padding:.25rem;display:grid;place-items:center;box-shadow:0 0 0 1px var(--hairline)}
/* the icon never squashes, and stays at 47px or less (logo rule E) even with larger text */
.brand .tile{flex:none}
.brand .tile img{max-width:min(2.5rem,47px);max-height:min(2.5rem,47px)}
.brand{min-width:0}
nav.menu{margin:0 auto;display:flex;gap:.25rem}
nav.menu a{text-decoration:none;font-weight:500;min-height:3rem;min-width:3rem;padding:0 .875rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;white-space:nowrap}
.sh{display:inline-flex;align-items:center;min-height:3rem;padding:0 1.25rem;border:1px solid var(--text-1);border-radius:999px;text-decoration:none;font-weight:500;white-space:nowrap}

.lead{font-size:1.3125rem;line-height:1.55;color:var(--text-2);max-width:30em}
.btn{display:inline-flex;align-items:center;gap:.625rem;min-height:var(--tap-main);transition:transform var(--dur-1) var(--ease-standard);padding:0 1.75rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:500;text-decoration:none;font-size:1.125rem}
.btn:hover{text-decoration:underline;text-underline-offset:.2em}
.btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* sections: Verseva two-column (label left, content right), hairline between */
.s{border-top:1px solid var(--hairline);padding:var(--s-9) 0}
.s.first{border-top:0;padding-top:4.5rem}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:2rem 3rem}
.grid>.label{padding-top:.5rem}
.body>h2,.body>.h2{margin-bottom:1.5rem}
.body>p.text{max-width:34em}
.body>p.text+p.text{margin-top:1rem}
.items{display:grid;gap:2.5rem 2.5rem;margin-top:3.5rem}
.items.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.items.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.item{border-top:1px solid var(--hairline);padding-top:1.5rem}
.item h3{margin:.375rem 0 .5rem}
.item p{color:var(--text-2)}
.item .fig{border-radius:var(--r-pic);overflow:hidden;margin-bottom:1.25rem;background:var(--band-1)}
.item .fig img{width:100%;height:auto}
.ic{width:3.5rem;height:3.5rem;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;margin-bottom:1.25rem}

/* at a glance: Verseva stats row, only numbers from the fleet facts Chris approved (18 Oct) */
.glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 2.5rem}
.glance div{border-top:1px solid var(--hairline);padding-top:1.25rem}
.glance b{display:block;font-weight:var(--w-head);font-size:var(--fs-glance);line-height:1.15;letter-spacing:-.02em;margin-bottom:.5rem}
.glance span{color:var(--text-2)}

/* shareholders: the one navy band (Skyway) */
.navy{background:linear-gradient(120deg,var(--band-1),var(--band-2));color:var(--on-band);border-top:0}
.navy .label,.navy .text{color:var(--on-band)}
.pill-w{display:inline-block;max-width:100%;min-height:3rem;padding:.6875rem 1.5rem;line-height:1.4;border-radius:999px;background:var(--on-band);color:var(--on-band-pill);font-weight:500;text-decoration:none;margin-top:2rem}

/* contact */
#contact h2{font-size:var(--fs-contact);line-height:1.1;letter-spacing:-.025em}
.note{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--hairline);max-width:34em}

/* footer: Verseva light grey with columns */
footer{background:var(--surface-2);border-top:1px solid var(--hairline);padding:4rem 0 2rem}
.fgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem}
.fgrid .about{max-width:22em}
.fgrid .about p{color:var(--text-2);margin-top:1.25rem}
.fcol h3{font-size:1.125rem;color:var(--text-2);font-weight:500;margin-bottom:.5rem}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol a{display:flex;align-items:center;min-height:3rem;min-width:3rem;text-decoration:none;line-height:1.3;padding:.25rem 0}
.fcol a:hover{text-decoration:underline}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;border-top:1px solid var(--hairline);margin-top:3rem;padding-top:1.5rem;color:var(--text-2)}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.navy :focus-visible{outline-color:var(--on-band)}
section[id]{scroll-margin-top:.5rem}
/* the menu stays at the top while you scroll (Chris 21 Oct 10:35PM: "maybe the top nav board doesn't disappear?"),
   so jumps from the menu stop below it */
html{scroll-padding-top:5.25rem}
@media (max-width:63.99em){html{scroll-padding-top:7rem}}

/* tablet */
@media (max-width:63.99em){
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid>.label{padding-top:0}
  .items.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* two-row header below 64em */
@media (max-width:63.99em){
  header{padding:0}
  .bar{border:0;border-radius:0;flex-wrap:wrap;gap:0;padding:.375rem 3rem 0;max-width:none;border-bottom:1px solid var(--hairline)}
  .brand{font-size:1.125rem;min-height:3.5rem;min-width:0;line-height:1.2}
  .brand .tile img{width:2.25rem;height:2.25rem}
  .sh{margin-left:auto;padding:0 1rem}
  nav.menu{order:3;width:100%;margin:0 0 0 -.75rem;gap:0;flex-wrap:wrap}
  nav.menu a{padding:0 .75rem}
}
/* phone */
@media (max-width:47.99em){
  .wrap{padding:0 1rem}
  .bar{padding:.375rem 1rem 0}
  .brand{gap:.5rem}
  .brand .tile img{width:2rem;height:2rem}
  .sh{border:0;padding:0 .5rem;margin-right:-.5rem;text-decoration:underline;text-underline-offset:.2em}
  nav.menu{margin-left:-.5rem}
  nav.menu a{padding:0 .5rem}
  .lead{font-size:1.1875rem}
    .btn{width:100%;justify-content:center}
    .s{padding:3.5rem 0}
  .s.first{padding-top:3rem}
  .items{margin-top:2.25rem;gap:2.25rem}
  .items.c2,.items.c3,.glance{grid-template-columns:minmax(0,1fr)}
  .glance{gap:1.5rem}
  .fgrid{display:flex;flex-wrap:wrap;gap:2rem 2.5rem}
  .fgrid .about{flex:1 1 100%}
  .fcol{flex:1 1 9em;min-width:0}
  footer{padding:3rem 0 1.5rem}
}
@media (max-width:22em){
  .brand .name{max-width:6.5em}
  nav.menu a{padding:0 .375rem}
  nav.menu{margin-left:-.375rem}
  .strip{padding:.25rem 0}
  }
.contact-details{margin-top:var(--s-5)}
.logo-tile{display:inline-grid;padding:var(--s-2)}

/* fleet facts: label left, value right, thin line between rows */
.facts{margin:var(--s-3) 0 0}
.facts>div{display:flex;justify-content:space-between;gap:var(--s-4);border-top:1px solid var(--hairline);padding:var(--s-2) 0}
.facts dt{color:var(--text-2)}
.facts dd{margin:0;font-weight:var(--w-head);text-align:right;font-variant-numeric:tabular-nums}
.cap-note{margin-top:var(--s-3)}
/* fleet: how many planes of each type, in big type (Chris 21 Oct 9:58AM: "in two types") */
.item .fig picture{display:block}
.item p.count{font-size:var(--fs-glance);font-weight:var(--w-head);letter-spacing:var(--track-h2);line-height:1.1;color:var(--text-1);margin:0}
/* logo tile corners match the app (18px) */
.logo-tile{border-radius:1.125rem}

/* photo top (the photo thread's v7, Chris 20 Oct 7:32PM: "the photo captures the whole screen").
   The photo fills the first screen at every size and the words sit on it; it looks the same in light and dark.
   Phones and upright screens: navy words straight on the photo's sky, the plane big at the bottom. The section is at
   least the screen minus the strip and menu above it, and grows with bigger text so the words always end above the
   tail: .hps keeps the room from the tail tip to the label strip free, and the photo hangs from its bottom. */
.hp{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:calc(100svh - var(--hp-above));background:var(--hero-sky);--hp-above:176px}
/* strip + menu above the photo: 169 px up to 352 px, 176 px on other narrow phones (strip on two lines), 151 px from 401 px, 118 px from 1024 px */
@media (max-width:22em){.hp{--hp-above:169px}}
@media (min-width:25.0625em){.hp{--hp-above:151px}}
.hp picture{position:absolute;left:0;right:0;bottom:0;z-index:-1;transform:translateY(3.25%)}
.hp img.bg{display:block;width:100%;height:auto}
.hp .hpw{flex:1 0 auto}
.hp .txt{padding:1.75rem 0 1.5rem}
.hp h1{color:var(--hero-ink);max-width:7em;margin-bottom:var(--s-4)}
.hp .lead{color:var(--hero-lead);margin:0 0 var(--s-5)}
.hp .btn{background:var(--hero-pill);color:var(--hero-pill-ink)}
.hp :focus-visible{outline-color:var(--hero-pill)}
/* phone photo: tail tip to strip top = 75.7% of the width; 3.25% of the file hangs below, behind the strip */
.hp .hps{flex:none;position:relative;padding-top:75.7%}
.hp .credit{margin:0;background:var(--hero-ground);color:var(--hero-cap);font-size:1.125rem;line-height:1.3;padding:.25rem 1rem .6rem}
/* upright screens 600 px and wider: a wider cut with the whole plane (46% of the width from tail tip to strip) */
@media (min-width:37.5em){
 .hp .hps{padding-top:46%}
}
@media (min-width:48em){.hp .credit{padding-left:3rem;padding-right:3rem}}
@media (min-width:64em){.hp{--hp-above:126px}}
/* screens 768 px and wider that are wider than tall: the photo fills the first screen behind the words (at least 24%
   of the width tall so the tail is never cut), white words on a navy shade that fades out before the plane's nose */
@media (min-width:48em) and (min-aspect-ratio:5/4){
 .hp{min-height:max(30rem,calc(100svh - var(--hp-above)),24vw);flex-direction:row;align-items:center;background:var(--hero-deep);--edge:calc(3rem + 15rem);--fade:8rem}
 .hp picture{top:0;z-index:-2;transform:none}
 .hp img.bg{position:absolute;inset:0;height:100%;object-fit:cover;object-position:70% 82%}
 .hp::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--hero-shade) / .86) 0,rgb(var(--hero-shade) / 0.860) calc(var(--edge) + 0.0 * var(--fade)),rgb(var(--hero-shade) / 0.839) calc(var(--edge) + 0.1 * var(--fade)),rgb(var(--hero-shade) / 0.778) calc(var(--edge) + 0.2 * var(--fade)),rgb(var(--hero-shade) / 0.683) calc(var(--edge) + 0.3 * var(--fade)),rgb(var(--hero-shade) / 0.563) calc(var(--edge) + 0.4 * var(--fade)),rgb(var(--hero-shade) / 0.430) calc(var(--edge) + 0.5 * var(--fade)),rgb(var(--hero-shade) / 0.297) calc(var(--edge) + 0.6 * var(--fade)),rgb(var(--hero-shade) / 0.177) calc(var(--edge) + 0.7 * var(--fade)),rgb(var(--hero-shade) / 0.082) calc(var(--edge) + 0.8 * var(--fade)),rgb(var(--hero-shade) / 0.021) calc(var(--edge) + 0.9 * var(--fade)),rgb(var(--hero-shade) / 0.000) calc(var(--edge) + 1.0 * var(--fade)))}
 .hp .hpw{flex:1 1 auto}
 .hp .hps{position:static;padding:0}
 .hp .txt{padding:3rem 0;max-width:15rem}
 .hp h1{font-size:2.25rem;color:var(--hero-on-shade)}
 .hp .lead{font-size:1.125rem;color:var(--hero-on-shade)}
 .hp .btn{background:var(--hero-on-shade);color:var(--hero-pill)}
 .hp :focus-visible{outline-color:var(--hero-on-shade)}
 .hp .credit{position:absolute;right:1rem;bottom:1rem;background:rgb(var(--hero-shade) / .86);padding:.35rem .75rem;border-radius:var(--r-pic)}
}
@media (min-width:64em) and (min-aspect-ratio:5/4){
 .hp{--edge:calc(3rem + 20.5rem);--fade:10rem}
 .hp .txt{max-width:20.5rem}
 .hp h1{font-size:3rem}
 .hp .lead{font-size:1.375rem;max-width:19rem}
}
@media (min-width:75em) and (min-aspect-ratio:5/4){
 .hp{--edge:calc(max(0px, (100% - 80rem) / 2) + 3rem + 25.5rem);--fade:14rem}
 .hp .txt{max-width:30rem}
 .hp h1{font-size:4.25rem}
}
@media (max-width:47.99em){.hp .btn{width:100%;justify-content:center}}
/* under 320 px: smaller headline so the button stays in the first screen */
@media (max-width:22em){.hp .txt{padding-top:1.25rem}.hp h1{font-size:2.125rem}}
/* Scroll-in (reveal.js). Pack 03: one fade + rise of 32px or less, 0.6s, no parallax. */
.rv main .s .label,.rv main .s h2,.rv main .s .text,.rv main .s .note,.rv main .s .pill-w,.rv main .s .glance>div,.rv main .s .item{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-standard),transform .6s var(--ease-standard)}
.rv main .s :is(.label,h2,.text,.note,.pill-w,.item):nth-child(2),.rv main .s .glance>div:nth-child(2){transition-delay:90ms}
.rv main .s :is(.label,h2,.text,.note,.pill-w,.item):nth-child(3),.rv main .s .glance>div:nth-child(3){transition-delay:180ms}
.rv main .s :is(.label,h2,.text,.note,.pill-w,.item):nth-child(n+4),.rv main .s .glance>div:nth-child(n+4){transition-delay:270ms}
.rv main .s .in.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv main .s *{opacity:1!important;transform:none!important;transition:none!important}}
@media print{.rv main .s *{opacity:1!important;transform:none!important;transition:none!important}}

/* back to top (Chris 21 Oct 10:34PM: "a way so the person viewing it can go to the very top again").
   Shows once the first screen is scrolled past (top.js); without the script it stays hidden and the pinned menu's logo still goes to the top. */
.totop{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:30;display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tap-main);padding:0 1.25rem;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-weight:500;text-decoration:none;box-shadow:0 .25rem 1rem rgb(0 0 0 / .18);opacity:0;visibility:hidden;transform:translateY(.5rem);transition:opacity .2s var(--ease-standard),transform .2s var(--ease-standard),visibility 0s .2s}
.totop.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease-standard),transform .2s var(--ease-standard)}
.totop:hover{text-decoration:underline;text-underline-offset:.2em}
@media (prefers-reduced-motion:reduce){.totop,.totop.on{transition:none;transform:none}}
@media print{.totop{display:none}}

/* shareholders' film (demo, Chris 21 Oct 10:45PM): poster until play, no autoplay */
.film{margin-top:var(--s-5);border-radius:var(--r-pic);overflow:hidden;background:var(--band-1);max-width:100%}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9}