/* Buddy System Safety Grip: "Wire & Snap"
   Contrast (WCAG, computed): ink/paper 15.28, ink/paper-2 13.72, ink/orange 5.53,
   orange/ink 5.53, steel/paper 5.13, muted-ink/ink 8.17. Orange is never text on paper (2.76). */
:root{
  --paper:#F4F1EA;
  --paper-2:#EAE5DA;
  --ink:#1B1B1A;
  --orange:#FF5A1F;
  --steel:#6B6558;
  --muted-ink:#B8B2A6;

  --display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --gutter:20px;
  --max:1280px;
  --sec:72px;

  --fs-body:clamp(1.125rem, 1.0833rem + .1852vw, 1.25rem);
  --fs-kicker:clamp(.875rem, .8333rem + .1852vw, 1rem);
  --fs-lede:clamp(1.25rem, 1.125rem + .5556vw, 1.625rem);
  --fs-h2:clamp(2.25rem, 1.2rem + 4.5vw, 4.5rem);
  --fs-display:clamp(2.125rem, 1rem + 5vw, 5.5rem);
  --fs-num:clamp(6rem, 4.6667rem + 5.926vw, 10rem);
  --fs-contact:clamp(1.25rem, .9167rem + 1.4815vw, 2.25rem);
  --fs-nav:clamp(1rem, .9792rem + .0926vw, 1.0625rem);
}
@media (min-width:768px){
  :root{
    --gutter:clamp(32px, 7.143vw - 22.86px, 80px);
    --sec:clamp(104px, 40px + 8.333vw, 160px);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
h1,h2,p,figure,ol,ul{margin:0}
a{color:inherit}

.vh{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.wrap{
  width:100%;
  max-width:calc(var(--max) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- focus ---------- */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.band-dark :focus-visible{outline-color:var(--orange)}
.band-orange :focus-visible{outline-color:var(--ink)}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:12px;top:-200px;z-index:100;
  display:inline-flex;align-items:center;min-height:44px;
  padding:10px 18px;
  background:var(--ink);color:var(--paper);
  font-weight:600;text-decoration:none;
}
.skip-link:focus{top:12px}

/* ---------- external arrow ---------- */
.ext{display:inline-block;width:.6em;height:.6em;margin-left:.3em;vertical-align:.1em}

/* ---------- header ---------- */
.site-head{
  background:var(--paper);
  border-bottom:4px solid var(--orange);
  position:relative;z-index:20;
}
.head-inner{
  max-width:calc(var(--max) + 2 * var(--gutter));
  margin-inline:auto;
  padding:8px var(--gutter) 6px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  column-gap:24px;
}
.wordmark{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--display);
  font-size:clamp(1.125rem, 1.0417rem + .3704vw, 1.375rem);
  line-height:1.1;
  text-decoration:none;
  letter-spacing:-.005em;
}
.site-nav ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:4px 16px;
}
.site-nav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;font-size:var(--fs-nav);
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:2px;
  text-underline-offset:6px;
}
.site-nav a:hover,.site-nav a:focus-visible,
.wordmark:hover,.wordmark:focus-visible{
  text-decoration-line:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:4px;
  text-underline-offset:6px;
}
/* one row needs ~900px, so the sticky single-row header starts at 1024 */
@media (max-width:1023.98px){
  .wordmark{flex:1 0 100%}
}
@media (min-width:1024px){
  html{scroll-padding-top:84px}
  .site-head{position:sticky;top:0}
  .head-inner{height:72px;flex-wrap:nowrap;padding-block:0}
}

/* ---------- shared type ---------- */
.kicker{
  font-weight:600;font-size:var(--fs-kicker);
  text-transform:uppercase;letter-spacing:.12em;line-height:1.3;
  display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";flex:0 0 auto;width:14px;height:14px;background:var(--orange)}
h1,h2,.display{font-family:var(--display);font-weight:400}
h2{font-size:var(--fs-h2);line-height:1;letter-spacing:-.01em}
.display{font-size:var(--fs-display);line-height:1;letter-spacing:-.01em}

/* ---------- button ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:16px 28px;
  background:var(--ink);color:var(--paper);
  font-weight:600;font-size:18px;line-height:1.2;
  text-decoration:none;border-radius:0;
  box-shadow:6px 6px 0 var(--orange);
}
.btn:hover,.btn:focus-visible{box-shadow:3px 3px 0 var(--orange)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-text{
  padding:48px var(--gutter) 56px;
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
}
h1{margin-top:4px}
.h1-a{
  display:block;
  font-size:clamp(1.625rem, 1.3333rem + 1.2963vw, 2.5rem);
  line-height:1.05;
}
.h1-b{
  display:block;
  font-size:clamp(3.25rem, 1.6rem + 7.4vw, 6rem);
  line-height:.92;letter-spacing:-.01em;
  overflow-wrap:break-word;
  margin-top:.06em;
}
.lede{font-size:var(--fs-lede);line-height:1.45;max-width:30ch}
.patent{margin-top:16px;font-weight:600;font-size:var(--fs-kicker);text-transform:uppercase;letter-spacing:.12em}
.hero .btn{margin-top:8px}

.hero-art{
  background:var(--orange);
  aspect-ratio:1/1;
  display:flex;justify-content:center;align-items:flex-end;
  overflow:hidden;
}
.hero-svg{display:block;width:88%;max-width:720px;height:auto;max-height:100%;overflow:hidden}

.proof{
  position:relative;z-index:2;
  width:62%;
  margin:-64px var(--gutter) 0 auto;
  background:var(--paper);
  padding:10px;
  border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
}
.proof::before,.proof::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;
}
.proof::before{top:-10px;left:-10px;border-top:4px solid var(--orange);border-left:4px solid var(--orange)}
.proof::after{bottom:-10px;right:-10px;border-bottom:4px solid var(--orange);border-right:4px solid var(--orange)}
.tag{
  display:inline-block;margin-bottom:8px;
  background:var(--orange);color:var(--ink);
  font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 6px;
}
.proof-img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.proof-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 60%;
  filter:grayscale(1) contrast(1.08) brightness(1.02);
}
.proof figcaption{
  margin-top:8px;
  font-size:14px;line-height:1.4;color:var(--steel);
}

@media (min-width:768px){
  .hero-art{aspect-ratio:4/3}
  .proof{width:240px;margin-top:-96px}
}
@media (min-width:1200px){
  .hero{
    --straddle:clamp(64px, 16vw - 110px, 120px);
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:auto;
  }
  .hero-text{
    grid-column:1 / 7;grid-row:1;
    align-self:center;
    padding:64px calc(var(--straddle) + 32px) 64px max(var(--gutter), calc(100% - var(--max) / 2));
  }
  .hero-art{
    grid-column:7 / 13;grid-row:1;
    aspect-ratio:auto;
    min-height:max(600px, min(86vh, 820px));
  }
  .proof{
    grid-column:7 / 13;grid-row:1;
    align-self:end;justify-self:start;
    width:260px;
    margin:0 0 56px calc(-1 * var(--straddle));
  }
}

/* hero SVG: default = final seated state */
.hero-svg .grip,.hero-svg .cue{transform-box:view-box}
.hero-svg .grip{transform:none}
.hero-svg .slit{opacity:0}
.hero-svg .snap{opacity:0}
.hero-svg .cue{opacity:0}

/* ---------- sections ---------- */
.how,.about{padding-block:var(--sec)}
.how h2{margin-bottom:clamp(40px, 5vw, 72px)}

/* ---------- steps ---------- */
.steps{list-style:none;padding:0;display:grid;gap:0}
.steps li{padding-block:40px}
.steps li:first-child{padding-top:0}
.steps li + li{border-top:12px solid var(--orange)}
.tile{
  background:var(--orange);
  border:3px solid var(--ink);
  aspect-ratio:16/10;
  display:grid;place-items:center;
  overflow:hidden;
}
.tile svg{display:block;width:100%;height:100%}
.num{
  display:block;
  font-family:var(--display);
  font-size:var(--fs-num);
  line-height:.8;
  margin-top:-.45em;
  margin-left:12px;
  position:relative;
  letter-spacing:-.02em;
  -webkit-text-stroke:0;
  text-shadow:4px 0 0 var(--paper),-4px 0 0 var(--paper),0 4px 0 var(--paper),0 -4px 0 var(--paper);
}
.steps p{margin-top:16px;max-width:30ch;font-size:var(--fs-lede);line-height:1.4}

@media (min-width:768px){
  .steps li{
    display:grid;
    grid-template-columns:200px 1fr;
    grid-template-rows:auto 1fr;
    column-gap:32px;
    align-items:start;
  }
  .tile{grid-row:1 / 3;aspect-ratio:1/1}
  .num{margin:0;grid-column:2;text-shadow:none}
  .steps p{grid-column:2;margin-top:12px}
}
@media (min-width:1100px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
  .steps li{display:block;padding:0}
  .steps li + li{border-top:0}
  .tile{aspect-ratio:1/1}
  .num{margin:-.45em 0 0 12px;text-shadow:4px 0 0 var(--paper),-4px 0 0 var(--paper),0 4px 0 var(--paper),0 -4px 0 var(--paper)}
  .steps p{margin-top:16px}
}

/* ---------- bands ---------- */
.band-dark{background:var(--ink);color:var(--paper)}
.band-orange{background:var(--orange);color:var(--ink)}

/* ---------- why ---------- */
.why{border-top:8px solid var(--orange);padding-block:var(--sec)}
.why h2::before{
  content:"";display:block;
  width:72px;height:var(--fs-kicker);
  background:var(--orange);
  margin-bottom:24px;
}
.why .display{margin-top:24px;max-width:12ch}
.bleed{
  position:relative;
  margin-top:clamp(40px, 5vw, 72px);
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--ink);
}
.bleed img{
  width:100%;height:100%;
  object-fit:cover;object-position:40% 49%;
  filter:grayscale(1) contrast(1.25) brightness(.85);
}
.bleed::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, var(--ink) 0, transparent 18%, transparent 82%, var(--ink) 100%);
}
.why-copy{
  margin-top:clamp(32px, 4vw, 56px);
  font-size:var(--fs-lede);line-height:1.45;max-width:34ch;
}
@media (min-width:768px){
  .bleed{aspect-ratio:16/9}
  .bleed img{object-position:50% 49%}
}
@media (min-width:1100px){
  .bleed{aspect-ratio:21/9}
  .why-top,.why-bottom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
  .why-top > *{grid-column:1 / 7}
  .why-copy{grid-column:7 / 13}
}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:28px}
.year{
  display:block;justify-self:start;
  font-family:var(--display);
  font-size:var(--fs-num);
  line-height:.85;letter-spacing:-.02em;
  padding-bottom:20px;
  border-bottom:16px solid var(--orange);
}
.about-body{max-width:62ch}
.about-body p + p{margin-top:24px}
.text-link{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:3px;
  text-underline-offset:6px;
}
.text-link:hover,.text-link:focus-visible{text-decoration-thickness:5px}
@media (min-width:1100px){
  .about-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:32px;align-items:start}
  .year{grid-column:1 / 5;grid-row:1}
  .about-grid h2{grid-column:1 / 5;grid-row:2}
  .about-body{grid-column:5 / 12;grid-row:2;padding-top:.4em}
}

/* ---------- contact ---------- */
.contact{padding-block:var(--sec)}
.contact .display{margin-top:24px;max-width:16ch}
.contact-rows{
  list-style:none;padding:0;
  margin-top:clamp(40px, 5vw, 72px);
  display:grid;gap:24px;
}
.row{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  height:100%;
  min-height:88px;
  padding:20px 24px;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  text-decoration:none;
}
a.row:hover,a.row:focus-visible{box-shadow:4px 4px 0 var(--ink)}
.label{
  font-weight:600;font-size:14px;line-height:1.3;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--steel);
}
.value{
  font-family:var(--display);
  font-size:var(--fs-contact);
  line-height:1.1;
  font-style:normal;
}
.value-email{overflow-wrap:anywhere}
a.row .value{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:5px}
@media (min-width:1100px){
  .contact-rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .contact-rows .value{font-size:clamp(1.25rem, .35rem + 1.45vw, 2.25rem)}
  .value-addr{font-size:clamp(1.125rem, .5rem + .9vw, 1.5rem)!important;line-height:1.25}
}

/* ---------- footer ---------- */
.site-foot{font-size:16px}
.foot-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 24px;
  padding-block:32px;
}
.site-foot a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--paper);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--orange);
  text-decoration-thickness:2px;text-underline-offset:6px;
}
.site-foot a:hover,.site-foot a:focus-visible{text-decoration-thickness:4px}

/* ---------- motion (opt-in only) ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  .btn,a.row{transition:transform 120ms linear, box-shadow 120ms linear}
  .btn:hover,.btn:focus-visible{transform:translate(3px,3px)}
  a.row:hover,a.row:focus-visible{transform:translate(4px,4px)}

  .hero-svg .grip{animation:press 3.2s .4s both}
  .hero-svg .slit{animation:slit 3.2s .4s both}
  .hero-svg .snap{transform-box:view-box;transform-origin:400px 190px;animation:snap 3.2s .4s both}
  .hero-svg .cue{animation:cue 3.2s .4s both}

  @supports (animation-timeline:view()){
    .steps li,.contact-rows li,.about .year{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
    .bleed img{
      animation:settle linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 50%;
    }
  }
}

@keyframes press{
  0%,18%{transform:translateY(-170px);animation-timing-function:cubic-bezier(.55,0,.85,.35)}
  55%{transform:translateY(0);animation-timing-function:ease-out}
  62%{transform:translateY(5px)}
  70%,100%{transform:translateY(0)}
}
@keyframes slit{
  0%,58%{opacity:1;stroke-width:7}
  72%,100%{opacity:0;stroke-width:0}
}
@keyframes snap{
  0%,58%{opacity:0;transform:scale(.7)}
  66%{opacity:1;transform:scale(1)}
  84%,100%{opacity:0;transform:scale(1.25)}
}
@keyframes cue{
  0%,18%{opacity:1;transform:translateY(0)}
  45%,100%{opacity:0;transform:translateY(40px)}
}
@keyframes rise{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
@keyframes settle{
  from{transform:scale(1.08)}
  to{transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}