
:root{
  --ink:#0E1C28; --steel:#12385A; --mid:#4C84A9; --cyan:#40B7F1;
  --paper:#F4F6F8; --line:#D9E1E9; --body:#3D4F5E; --soft:#7A8B99;
  --disp:"Archivo",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--steel);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:72ch}
.ctr{text-align:center}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.04;letter-spacing:-.018em;margin:0 0 .5em}
h1{font-size:clamp(36px,5.4vw,62px)}
h2{font-size:clamp(27px,3.3vw,40px)}
h3{font-size:21px;font-weight:700}
p{margin:0 0 1.05em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;z-index:999}
.kicker{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--mid);margin:0 0 8px}

/* silhouettes */
.sil,.ladder{width:100%;height:100%;display:block}
.sil path,.sil circle,.ladder path,.ladder circle{fill:var(--steel)}
.sil .hole circle,.ladder .hole circle{fill:#fff}
.sil .accent path,.ladder .accent path{fill:var(--cyan)}

/* nav */
.nav{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap;min-height:112px}
.brand{display:flex;align-items:center;padding:10px 0}
.brand img{height:84px;width:auto}
.menu{display:flex;align-items:center;gap:20px;margin-left:auto;min-width:0}
.lvl1{display:flex;gap:19px;list-style:none;margin:0;padding:0}
.lvl1>li>a{color:var(--ink);font-weight:500;font-size:15.5px;padding:45px 0;display:block}
.lvl1>li>a:hover,.lvl1>li>a.on{color:var(--steel);text-decoration:none}
.lvl1>li>a.on{box-shadow:inset 0 -3px 0 var(--cyan)}
.has{position:relative}
.drop{position:absolute;top:100%;left:-18px;background:#fff;list-style:none;margin:0;padding:8px 0;
  min-width:250px;border:1px solid var(--line);box-shadow:0 18px 40px rgba(14,28,40,.13);display:none}
.has:hover .drop,.has:focus-within .drop{display:block}
.drop a{display:block;padding:10px 20px;color:var(--body);font-size:15px}
.drop a:hover{background:var(--paper);text-decoration:none;color:var(--steel)}
.navcta{display:flex;gap:8px;align-items:center;flex:0 0 auto;white-space:nowrap}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* buttons */
.btn{display:inline-block;background:var(--steel);color:#fff;font-weight:600;font-size:15.5px;
  font-family:var(--sans);padding:13px 24px;border:2px solid var(--steel);text-align:center;cursor:pointer}
.btn:hover{background:var(--ink);border-color:var(--ink);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--steel);border-color:var(--line)}
.btn.ghost:hover{background:var(--paper);color:var(--steel);border-color:var(--mid)}
.hero .btn.ghost,.band .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn.ghost:hover,.band .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn.sm{padding:10px 14px;font-size:14px}
.btn.lg{padding:16px 30px;font-size:17px}
.btn.full{width:100%}
.twobtn{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}
.ctrb{justify-content:center}

/* hero */
.hero{background:var(--ink);color:#fff;padding:72px 0 0;overflow:hidden}
.heroin{position:relative;isolation:isolate}
.heroin::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-2%;top:50%;transform:translateY(-52%);
  width:min(620px,62vw);aspect-ratio:1.61/1;
  background:url("/img/aph-logo-mono-white.png") no-repeat center/contain;
  opacity:.07;
}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{font-size:18.5px;color:#AFC3D4;max-width:56ch;margin:22px 0 0}
.herobtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.ladderwrap{margin-top:52px;border-top:1px solid rgba(255,255,255,.12);padding:34px 0 30px;
  background:rgba(255,255,255,.03)}
.ladder{height:auto;max-height:190px}
.ladder path,.ladder circle{fill:#dce8f2}
.ladder .hole circle{fill:var(--ink)}
.ladderscale{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6px}
.ladderscale span{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.6vw,30px);
  color:var(--cyan);text-align:center}
.laddernote{color:#7E96AB;font-size:14.5px;margin:12px 0 0;text-align:center}

/* sections */
.sec{padding:74px 0}
.sec.alt{background:var(--paper)}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:30px;
  border-bottom:2px solid var(--ink);padding-bottom:12px}
.sechead h2{margin:0}
.morelink{font-weight:600;font-size:15px;white-space:nowrap;color:var(--steel)}
.sec h2.ctr{margin-bottom:38px}

/* trust */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;background:var(--line)}
.tcard{background:#fff;padding:26px 24px}
.tcard h3{margin-bottom:7px;font-size:19px;color:var(--ink)}
.tcard p{margin:0;color:var(--body);font-size:15.5px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.cards.cat3{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.card{background:#fff;border:1px solid var(--line);color:var(--ink);display:flex;flex-direction:column}
.card:hover{text-decoration:none;border-color:var(--mid)}
.cardimg{position:relative;aspect-ratio:16/9;background:var(--paper);
  border-bottom:1px solid var(--line);padding:14px 14px 4px;display:flex;align-items:flex-end}
.card:hover .cardimg{background:#EAF1F7}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;background:#fff;padding:10px}
.cardimg .photo,.machimg .photo{border:0}
.sizetag{position:absolute;z-index:2;left:0;top:0;background:var(--ink);color:#fff;
  font-family:var(--disp);font-weight:800;font-size:15px;padding:6px 12px;letter-spacing:-.01em}
.catcard .sizetag{background:var(--steel)}
.cardbody{padding:20px;flex:1;display:flex;flex-direction:column}
.cardbody h3{margin-bottom:7px;color:var(--ink)}
.cardbody p{color:var(--body);font-size:15.5px;flex:1;margin-bottom:14px}
.cardlink{color:var(--steel);font-weight:600;font-size:15px;border-bottom:2px solid var(--cyan);
  align-self:flex-start;padding-bottom:2px}

/* fleet at a glance */
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:26px}
.glance div{background:var(--ink);padding:22px 20px}
.glance b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.2vw,36px);
  color:var(--cyan);line-height:1;letter-spacing:-.02em}
.glance span{display:block;color:#9DB3C4;font-size:14.5px;margin-top:9px;line-height:1.45}

/* whole-fleet tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.tile{background:#fff;padding:14px 14px 16px;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.tile:hover{background:var(--paper);text-decoration:none}
.tileart{aspect-ratio:2/1}
.tileart .sil{height:100%}
.tiletext b{display:block;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em}
.tiletext span{display:block;color:var(--body);font-size:14px;margin-top:2px}

/* band */
.band{background:var(--steel);color:#fff;padding:52px 0}
.bandin{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.band h2{margin:0 0 6px;color:#fff}
.band p{margin:0;color:#C4D8E8}
.bandbtns{display:flex;gap:11px;flex-wrap:wrap}

/* steps — a real sequence, so numbering earns its place */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.step{border-top:3px solid var(--cyan);padding-top:18px}
.step .num{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--mid);display:block}
.step h3{margin:8px 0 6px;color:var(--ink);font-size:19px}
.step p{margin:0;color:var(--body);font-size:15.5px}

/* page heads */
.pagehead{padding:56px 0 12px}
.pagehead.tall{padding:92px 0 80px}
.pagehead .lede,.sec .lede{color:var(--body);font-size:18.5px;max-width:64ch}
.pagehead.mach{padding-bottom:40px}
.machhead{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.machimg{aspect-ratio:16/10;background:var(--paper);border:1px solid var(--line);
  position:relative;padding:20px;display:flex;align-items:flex-end}

/* crumbs */
.crumbs{border-bottom:1px solid var(--line);padding:13px 0;font-size:14px;color:var(--soft)}
.crumbs a{color:var(--body)}
.crumbs span{color:var(--soft);margin:0 3px}

/* cols + specs */
.cols{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
.cols h2:first-child{margin-top:0}
.ticks{list-style:none;padding:0;margin:0 0 34px}
.ticks li{padding:9px 0 9px 22px;position:relative;border-bottom:1px solid var(--line);color:var(--body)}
.ticks li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:2px;background:var(--cyan)}
.specbox{background:var(--ink);color:#fff;padding:28px}
.specbox h2{font-size:21px;margin-bottom:16px;color:#fff}
.spectable{width:100%;border-collapse:collapse;font-size:15.5px}
.spectable th{text-align:left;font-weight:400;color:#93AABC;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.14);width:52%}
.spectable td{text-align:right;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);
  font-weight:600;color:#fff;font-family:var(--disp)}
.specnote{font-size:14.5px;color:#93AABC;margin:18px 0 0;line-height:1.55}
.specnote strong{color:#fff}

/* faq */
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:600;font-size:17px;color:var(--ink);
  list-style:none;position:relative;padding-right:32px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:26px;width:12px;height:2px;
  background:var(--steel)}
.faq summary::before{content:"";position:absolute;right:9px;top:21px;width:2px;height:12px;
  background:var(--steel);transition:opacity .15s}
.faq[open] summary::before{opacity:0}
.faq div{padding:0 0 20px;color:var(--body)}

/* our work */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.works.compact{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.work{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.workmedia{display:grid;gap:1px;grid-template-columns:1fr;background:var(--line)}
.workmedia:has(> :nth-child(2)){grid-template-columns:1fr 1fr}
.mediabox{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper);
  border:0;padding:0;margin:0;display:block;width:100%}
.mediabox img{width:100%;height:100%;object-fit:cover}
.mediabox video,.mediabox iframe{width:100%;height:100%;object-fit:cover;border:0}
.mediabox.shot{cursor:zoom-in}
.workphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.mediabox.empty{display:flex;align-items:center;justify-content:center;background:var(--paper)}
.mediabox.empty span{color:var(--soft);font-size:13.5px}
.workbody{padding:20px;flex:1}
.workbody h3{margin:0 0 9px;color:var(--ink)}
.workbody p{color:var(--body);font-size:15.5px;margin:0 0 8px}
.workkit{font-size:14.5px!important;border-top:1px solid var(--line);padding-top:12px;margin:14px 0 0!important}
.workkit strong{color:var(--ink)}
.lb{position:fixed;inset:0;background:rgba(14,28,40,.95);z-index:200;display:flex;
  align-items:center;justify-content:center;padding:24px}
.lb img{max-width:100%;max-height:90vh;object-fit:contain}
.lb button{position:absolute;top:18px;right:20px;background:none;border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer;padding:8px 14px}

/* contact */
.contactgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--line);margin-bottom:38px;border:1px solid var(--line)}
.ccard{background:#fff;padding:22px;color:var(--ink)}
.ccard:hover{text-decoration:none;background:var(--paper)}
.ccard h3{font-size:14px;color:var(--soft);margin-bottom:6px;font-family:var(--sans);font-weight:500}
.ccard p{margin:0;font-weight:600;color:var(--ink);font-size:17px;word-break:break-word}

/* form */
.qform{background:var(--paper);border:1px solid var(--line);padding:30px}
.qform .f{margin-bottom:16px}
.qform .f2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.qform label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px;color:var(--ink)}
.qform .opt{color:var(--soft);font-weight:400}
.qform input,.qform select,.qform textarea{width:100%;padding:13px;font-size:16px;
  border:1px solid var(--line);background:#fff;font-family:var(--sans);color:var(--ink)}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:2px solid var(--cyan);
  outline-offset:1px;border-color:transparent}
.qform textarea{resize:vertical}
.hidden{position:absolute;left:-9999px}
.formnote{font-size:14.5px;color:var(--body);margin:16px 0 0;text-align:center}
.err{background:#FBEAE7;border:1px solid #E8BFB6;color:#A03824;padding:11px 13px;
  font-size:14px;margin-bottom:14px}

/* empty */
.empty{text-align:center;padding:52px 26px;color:var(--body);background:var(--paper)}
.empty p:first-child{font-family:var(--disp);font-size:22px;font-weight:800;color:var(--ink);margin:0 0 8px}
.empty p:last-child{margin:0;font-size:15.5px}

/* footer */
.foot{background:var(--ink);color:#96A9B9;padding:58px 0 0;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:42px}
.flogo{height:72px;width:auto;margin-bottom:6px}
.ftag{color:var(--cyan);font-weight:600;margin:8px 0 16px}
.fcon a{color:#D3E0EA;display:inline-block}
.fcon{line-height:1.9}
.fig{color:var(--cyan);font-weight:600;display:inline-block;margin-top:12px}
.foot h3{color:#fff;font-size:14.5px;margin-bottom:13px;font-family:var(--sans);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;line-height:2}
.foot ul a{color:#96A9B9}
.foot ul a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:19px 0 24px;font-size:14px;color:#6C8092}
.backup{margin-top:0}

.callbar{display:none;position:fixed;left:0;right:0;bottom:0;background:var(--cyan);color:var(--ink);
  text-align:center;padding:15px;font-weight:700;z-index:60;font-size:16px}
.callbar:hover{color:var(--ink);text-decoration:none}

:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

@media (max-width:920px){
  .machhead,.cols{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .burger{display:block}
  .brand img{height:62px}
  .menu{position:fixed;inset:112px 0 auto 0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:8px 24px 24px;display:none;border-bottom:1px solid var(--line);
    max-height:calc(100vh - 112px);overflow-y:auto}
  .menu.open{display:flex}
  .lvl1{flex-direction:column;gap:0}
  .lvl1>li>a{padding:15px 0;border-bottom:1px solid var(--line)}
  .drop{position:static;display:block;border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0}
  .drop a{color:var(--soft);padding:9px 0}
  .navcta{flex-direction:column;align-items:stretch;margin-top:18px;white-space:normal}
}
@media (max-width:780px){
  body{font-size:16.5px}
  .hero{padding-top:34px}
  .heroin::before{right:-14%;top:44%;width:min(460px,86vw);opacity:.055}
  .ladderwrap{margin-top:36px;padding:24px 0 22px}
  .sec{padding:48px 0}
  .qform .f2{grid-template-columns:1fr}
  .workmedia:has(> :nth-child(2)){grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:28px}
  .callbar{display:block}
  body{padding-bottom:56px}
  .bandin{flex-direction:column;align-items:flex-start}
  .sechead{flex-direction:column;align-items:flex-start;gap:8px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  .glance div{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
