/* Homepage. Written mobile-first on 2026-10-14: base rules target a 360px phone,
   min-width queries scale up. Drafting language throughout: the arch elevation,
   dimension strings, sheet callouts in IBM Plex Mono, a faint blueprint grid.
   Motion is transform, opacity and stroke-dashoffset only, and every animated
   element starts hidden only inside (prefers-reduced-motion: no-preference), so
   reduced motion and no-JS both get the finished drawing. */

body.hp{
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --grid-minor:rgba(28,61,153,.045);
  --grid-major:rgba(28,61,153,.075);
}

/* ---------- first screen ---------- */
.hp-first{
  position:relative;overflow:hidden;overflow:clip;isolation:isolate;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
}
.hp-first .lf-top{position:relative;}

/* Blueprint grid. The wrapper holds the mask still; the ::before layer drifts. */
.hp-grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 52%,transparent 22%,#000 78%);
          mask-image:radial-gradient(ellipse 70% 62% at 50% 52%,transparent 22%,#000 78%);
}
.hp-grid::before{
  content:"";position:absolute;top:-120px;left:-120px;right:0;bottom:0;
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  will-change:transform;
}

.hp-hero{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px 20px 28px;
}
.hp-arch{display:block;height:clamp(118px,25svh,330px);width:auto;max-width:100%;margin-bottom:clamp(14px,3svh,32px);overflow:visible;}
.hp-arch .ln{stroke:var(--print);fill:none;}
.hp-arch .joint line{stroke:var(--print);opacity:.45;}
.hp-arch .ctr{stroke:var(--graphite-3);opacity:.5;}
.hp-arch .dim path{stroke:var(--graphite-3);fill:none;}
.hp-arch .lb{font-family:var(--mono);font-size:26px;fill:var(--graphite-2);}

.hp-h1{
  font-family:var(--serif-display);font-weight:400;letter-spacing:0;
  font-size:clamp(31px,8.6vw,72px);line-height:1.08;max-width:15ch;
}
.hp-lede{margin-top:clamp(12px,2svh,22px);font-size:17px;line-height:1.55;color:var(--graphite);max-width:34ch;}

.hp-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:360px;min-height:56px;padding:14px 24px;
  background:var(--print-deep);color:var(--vellum);
  font-family:var(--serif-display);font-size:21px;line-height:1;
  transition:background-color .15s ease-out;
}
.hp-btn:hover{background:var(--graphite);color:var(--vellum);}
.hp-btn:focus-visible{outline:2px solid var(--print);outline-offset:4px;}
.hp-hero .hp-btn{margin-top:clamp(18px,3.4svh,36px);}

/* sheet title-block callouts, desktop only */
.hp-tb{display:none;}

/* header button: desktop only; phones get the sticky bar instead */
.lf-top nav .hp-hbtn{display:none;}

/* ---------- photo band ---------- */
.hp-band{padding:56px 0 8px;border-top:1px solid var(--hair);}
.hp-strip{
  list-style:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 20px 18px;scroll-padding:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.hp-strip>li{flex:0 0 84%;scroll-snap-align:start;}
.hp-ph{margin:0;}
.hp-ph-frame{position:relative;aspect-ratio:3/2;background:#1A2C66;overflow:hidden;}
.hp-ph-frame img{display:block;width:100%;height:100%;object-fit:cover;}
/* drafting crop marks inside each frame */
.hp-ph-frame::before,.hp-ph-frame::after{
  content:"";position:absolute;width:18px;height:18px;border:1px solid rgba(244,245,242,.75);pointer-events:none;
}
.hp-ph-frame::before{top:10px;left:10px;border-right:0;border-bottom:0;}
.hp-ph-frame::after{bottom:10px;right:10px;border-left:0;border-top:0;}
.hp-ph figcaption,.hp-tag,.hp-num,.hp-tb{
  font-family:var(--mono);font-size:13px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite-2);
}
.hp-ph figcaption{display:flex;align-items:center;gap:10px;margin-top:12px;}
.hp-ph figcaption::before{content:"";flex:none;width:22px;height:1px;background:var(--print);}

/* ---------- sections ---------- */
.hp-sec{padding:64px 0;border-top:1px solid var(--hair);}
.hp-band+.hp-sec{border-top:0;}
.hp-h2{font-family:var(--serif-display);font-weight:400;letter-spacing:0;font-size:clamp(30px,7.4vw,48px);line-height:1.1;max-width:20ch;}

.hp-cards{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px;}
.hp-card{
  position:relative;padding:22px 20px 26px;border:1px solid var(--hair);
  background-color:var(--vellum);
  background-image:
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:16px 16px;background-position:-1px -1px;
}
.hp-card::after{ /* corner tick, like a sheet border */
  content:"";position:absolute;top:-1px;right:-1px;width:14px;height:14px;border-top:2px solid var(--print);border-right:2px solid var(--print);
}
.hp-tag{color:var(--graphite-2);}
.hp-card .ic{display:block;width:40px;height:40px;margin:18px 0 14px;}
.hp-card .ic path{fill:none;stroke:var(--print);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;}
.hp-card h3{font-family:var(--serif-display);font-weight:400;font-size:23px;line-height:1.2;letter-spacing:0;}
.hp-card p:last-child{margin-top:10px;font-size:17px;line-height:1.6;color:var(--graphite-2);}

/* how it works: one dimension string connects the steps */
.hp-steps{position:relative;margin-top:36px;padding-left:40px;}
.hp-steps ol{list-style:none;}
.hp-rail{position:absolute;pointer-events:none;overflow:visible;}
.hp-rail path{fill:none;stroke:var(--print);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;}
.hp-rail-v{left:11px;top:10px;bottom:10px;width:2px;height:calc(100% - 20px);}
.hp-rail-h{display:none;}
.hp-step{position:relative;padding-bottom:34px;}
.hp-step:last-child{padding-bottom:0;}
/* 45-degree tick where each step meets the line, as on a dimension string */
.hp-step::before{
  content:"";position:absolute;left:-36px;top:8px;width:16px;height:1.5px;background:var(--graphite-3);
  transform:rotate(-45deg);transition:background-color .3s ease-out;
}
.hp-step.on::before,.hp-steps:not(.drawing) .hp-step::before{background:var(--print);}
.hp-num{display:block;color:var(--print);}
.hp-step h3{margin-top:6px;font-family:var(--serif-display);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:0;}
.hp-step p{margin-top:8px;font-size:17px;line-height:1.6;color:var(--graphite-2);max-width:40ch;}

/* closing call to action */
.hp-close{padding:72px 0 88px;border-top:1px solid var(--hair);text-align:center;}
.hp-close .sheet{display:flex;flex-direction:column;align-items:center;}
.hp-close .hp-h2{max-width:22ch;}
.hp-close .hp-btn{margin-top:30px;}

/* sticky bar on phones, once the hero CTA is off screen */
.hp-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(244,245,242,.96);border-top:1px solid var(--hair);
  display:flex;justify-content:center;
  transform:translateY(110%);opacity:0;visibility:hidden;
  transition:transform .3s ease-out,opacity .3s ease-out,visibility 0s linear .3s;
}
.hp-bar.show{transform:none;opacity:1;visibility:visible;transition:transform .3s ease-out,opacity .3s ease-out,visibility 0s;}
.hp-bar .hp-btn{min-height:52px;}
.hp .lf-foot{padding-bottom:96px;}

/* ---------- motion (only for people who haven't asked for less) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hp-grid::before{animation:hp-drift 90s linear infinite;}

  .hp-arch .ln,.hp-arch .dx{stroke-dasharray:1;stroke-dashoffset:1;animation:hp-draw var(--d,.9s) cubic-bezier(.45,.05,.25,1) var(--t,0s) forwards;}
  .hp-arch .d1{--t:.05s;--d:.6s;}
  .hp-arch .d2{--t:.25s;--d:1.25s;}
  .hp-arch .d3{--t:.45s;--d:1.2s;}
  .hp-arch .d4{--t:1.35s;--d:.35s;}
  .hp-arch .joint line,.hp-arch .ctr,.hp-arch .tk,.hp-arch .lb{opacity:0;animation:hp-fade .35s ease-out var(--t,0s) forwards;}
  .hp-arch .joint line{animation-name:hp-fade-joint;}
  .hp-arch .joint line:nth-child(1),.hp-arch .joint line:nth-child(10){--t:1.25s;}
  .hp-arch .joint line:nth-child(2),.hp-arch .joint line:nth-child(9){--t:1.33s;}
  .hp-arch .joint line:nth-child(3),.hp-arch .joint line:nth-child(8){--t:1.41s;}
  .hp-arch .joint line:nth-child(4),.hp-arch .joint line:nth-child(7){--t:1.49s;}
  .hp-arch .joint line:nth-child(5),.hp-arch .joint line:nth-child(6){--t:1.57s;}
  .hp-arch .ctr{--t:1.55s;animation-name:hp-fade-ctr;}
  /* annotation: extension lines, dimension line, ticks, then the figure */
  .hp-arch .dx1{--t:1.75s;--d:.22s;}
  .hp-arch .dx2{--t:1.95s;--d:.35s;}
  .hp-arch .tk1{--t:2.25s;}
  .hp-arch .lb1{--t:2.3s;}
  .hp-arch .dx3{--t:2.05s;--d:.22s;}
  .hp-arch .dx4{--t:2.25s;--d:.3s;}
  .hp-arch .tk2{--t:2.5s;}
  .hp-arch .lb2{--t:2.55s;}

  .hp-h1,.hp-lede,.hp-hero .hp-btn{animation:hp-rise .7s ease-out both;}
  .hp-lede{animation-delay:.08s;}
  .hp-hero .hp-btn{animation-delay:.16s;}

  .js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease-out,transform .7s ease-out;}
  .js .rv.in{opacity:1;transform:none;}
  .js .hp-strip>li:nth-child(2){transition-delay:.08s;}
  .js .hp-strip>li:nth-child(3){transition-delay:.16s;}
  .js .hp-strip>li:nth-child(4){transition-delay:.24s;}

  .js .hp-card .ic path{stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.45,.05,.25,1) .25s;}
  .js .hp-card.in .ic path{stroke-dashoffset:0;}

  .hp-steps.drawing .hp-rail path{stroke-dashoffset:1;}
}
@keyframes hp-draw{to{stroke-dashoffset:0;}}
@keyframes hp-fade{to{opacity:1;}}
@keyframes hp-fade-joint{to{opacity:.45;}}
@keyframes hp-fade-ctr{to{opacity:.5;}}
@keyframes hp-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes hp-drift{from{transform:translate3d(0,0,0);}to{transform:translate3d(120px,120px,0);}}

/* ---------- scale up ---------- */
@media (min-width:400px){
  .hp-hero{padding-left:24px;padding-right:24px;}
}

@media (min-width:640px){
  .hp-strip{padding:0 34px 18px;scroll-padding:0 34px;}
  .hp-strip>li{flex-basis:56%;}
  .hp-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  .hp-lede{font-size:19px;}
}

@media (min-width:768px){
  .hp-hero{padding:32px 34px 56px;}
  .hp-arch{height:clamp(180px,30svh,330px);}
  .hp-btn{font-size:23px;min-height:62px;max-width:320px;}
  .hp-tb{display:block;position:absolute;bottom:22px;font-size:12px;color:var(--graphite-2);}
  .hp-tb-l{left:34px;}
  .hp-tb-r{right:34px;}
  .hp-band{padding-top:72px;}
  .hp-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;overflow:visible;max-width:1220px;margin:0 auto;}
  .hp-sec{padding:96px 0;}
}

@media (min-width:900px){
  .lf-top nav{align-items:center;}
  .lf-top nav .hp-hbtn{
    display:inline-flex;align-items:center;min-height:44px;padding:0 18px;margin-left:6px;
    background:var(--print-deep);color:var(--vellum);font-family:var(--serif-display);font-size:17px;
  }
  .lf-top nav .hp-hbtn:hover{background:var(--graphite);color:var(--vellum);}
  .hp-bar{display:none;}
  .hp .lf-foot{padding-bottom:30px;}

  .hp-steps{padding-left:0;padding-top:44px;}
  .hp-steps ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;}
  .hp-rail-v{display:none;}
  .hp-rail-h{display:block;top:11px;left:0;width:100%;height:2px;}
  .hp-step{padding-bottom:0;}
  .hp-step::before{left:-4px;top:-33px;}
}

@media (min-width:1100px){
  .hp-strip{grid-template-columns:repeat(4,minmax(0,1fr));}
  .hp-cards{grid-template-columns:repeat(4,minmax(0,1fr));}
  .hp-card{padding:26px 24px 30px;}
}