:root{
    --paper:#faf9f6;
    --paper-deep:#f2f0ea;
    --ink:#16181d;
    --ink-mid:#3d424c;
    --ink-light:#4d525c;
    --rule:#d4cfc2;
    --rule-soft:#e9e6de;
    --blue:#2b54ff;
    --blue-deep:#1c3ad4;

    --measure:34rem;
    --page:70rem;

    --step--1:clamp(0.83rem,0.81rem + 0.11vw,0.89rem);
    --step-0:clamp(1.0625rem,1.02rem + 0.19vw,1.1875rem);
    --step-1:clamp(1.2rem,1.14rem + 0.3vw,1.39rem);
    --step-2:clamp(1.44rem,1.34rem + 0.48vw,1.74rem);
    --step-3:clamp(1.73rem,1.58rem + 0.74vw,2.18rem);
    --step-4:clamp(2.07rem,1.85rem + 1.11vw,2.72rem);
    --step-5:clamp(2.49rem,2.15rem + 1.66vw,3.4rem);

    --s-1:0.5rem; --s-2:0.875rem; --s-3:1.5rem; --s-4:2.5rem;
    --s-5:3.25rem; --s-6:4.5rem;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    font-size:var(--step-0); line-height:1.62; -webkit-font-smoothing:antialiased;
    position:relative;
  }

  body > *{position:relative; z-index:2;}

  .page{max-width:var(--page); margin:0 auto; padding:0 var(--s-3);}
  h1,h2,h3{
    font-family:"Newsreader",Georgia,"Times New Roman",serif;
    font-weight:400; line-height:1.08; letter-spacing:-.012em; margin:0;
    text-wrap:balance;
  }
  h1{font-size:var(--step-5);}
  h2{font-size:var(--step-4);}
  h3{font-size:var(--step-2);}
  p{margin:0;}
  a{color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px;}
  a:hover{color:var(--blue-deep);}
  .meas{max-width:var(--measure);}
  :focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
  @media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto;}}

  header.top{border-bottom:1px solid var(--rule); background:var(--paper);}
  header.top .page{display:flex; align-items:baseline; justify-content:space-between; padding-block:var(--s-2); gap:var(--s-3);}
  .word{font-family:"Newsreader",Georgia,serif; font-size:var(--step-1); letter-spacing:.01em;}
  .top nav{display:flex; gap:var(--s-3); align-items:baseline; font-size:var(--step--1);}
  .top nav a{color:var(--ink-mid); text-decoration:none;}
  .top nav a:hover{color:var(--ink); text-decoration:underline;}
  .top .tel{color:var(--ink); font-weight:600; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center;}
  @media(max-width:44rem){ .top nav{gap:var(--s-2); font-size:.8rem; flex-wrap:wrap; justify-content:flex-end;} }

  .hero{padding-block:var(--s-5) var(--s-4);}
  .hero h1{max-width:20ch;}
  .hero h1{margin-bottom:var(--s-3);}
  .hero .sub{font-size:var(--step-1); color:var(--ink-mid); max-width:30rem; line-height:1.5;}
  .hero .act{margin-top:var(--s-4); display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;}
  .ask{
    display:inline-block; background:var(--ink); color:var(--paper);
    font-family:"Work Sans",sans-serif; font-size:var(--step-0); font-weight:500;
    padding:1rem 1.75rem; min-height:48px; border-radius:2px; text-decoration:none;
    transition:background .15s ease;
  }
  .ask:hover{background:var(--blue); color:#fff;}
  .act .qual{font-size:var(--step-0); color:var(--ink-mid);}

  .standing{margin-top:var(--s-5); border-top:1px solid var(--rule); padding-top:var(--s-3);}
  .standing dl{margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3);}
  @media(max-width:44rem){ .standing dl{grid-template-columns:1fr; gap:var(--s-2);} }
  .standing dt{color:var(--ink-light); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;}
  .standing dd{margin:.3rem 0 0; color:var(--ink); font-size:var(--step-0);}

  .band{padding-block:var(--s-5); border-top:1px solid var(--rule);}
  .band.deep,.band.alt{background:var(--paper-deep);}
  .top nav a[aria-current="page"]{color:var(--ink);font-weight:500}
  @media (max-width:40rem){ .hide-sm{display:none} }
  .lede{margin-top:var(--s-3); color:var(--ink-mid); max-width:var(--measure); font-size:var(--step-1); line-height:1.5;}
  .kicker{
    font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink-light); margin-bottom:var(--s-2); display:block; font-weight:500;
  }

  .steps{margin-top:var(--s-5); display:grid; gap:0;}
  .step{
    display:grid; grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.1fr);
    gap:var(--s-3); padding-block:var(--s-4); border-top:1px solid var(--rule-soft);
    align-items:start;
  }
  .step:last-child{border-bottom:1px solid var(--rule-soft);}
  @media(max-width:52rem){ .step{grid-template-columns:2.5rem 1fr;} .step .body{grid-column:2;} }
  .step .num{
    font-family:"Newsreader",Georgia,serif; font-size:var(--step-2);
    color:var(--ink-light); font-style:italic; line-height:1;
  }
  .step h3{margin-bottom:.4rem;}
  .step .when{font-size:var(--step--1); color:var(--ink-light); margin-top:.35rem; font-variant-numeric:tabular-nums;}
  .step .body{color:var(--ink-mid);}

  .facts{
    margin-top:var(--s-4); border-top:1px solid var(--rule);
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  @media(max-width:52rem){ .facts{grid-template-columns:1fr 1fr;} }
  .fact{padding:var(--s-3) var(--s-3) var(--s-3) 0; border-bottom:1px solid var(--rule-soft);}
  .fact .n{
    font-family:"Newsreader",Georgia,serif; font-size:var(--step-3);
    line-height:1; font-variant-numeric:tabular-nums;
  }
  .fact .l{font-size:var(--step--1); color:var(--ink-mid); margin-top:.5rem; line-height:1.45;}
  .chain{
    margin-top:var(--s-4); font-size:var(--step--1); color:var(--ink-mid);
    letter-spacing:.02em; overflow-x:auto; white-space:nowrap; padding-bottom:.5rem;
  }

  .fit{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); margin-top:var(--s-4);}
  @media(max-width:52rem){ .fit{grid-template-columns:1fr; gap:var(--s-4);} }
  .fit h3{font-size:var(--step-1); margin-bottom:var(--s-2);}
  .fit ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2);}
  .fit li{padding-left:1.1rem; position:relative; color:var(--ink-mid);}
  .fit li::before{content:"·"; position:absolute; left:0; color:var(--ink-light);}
  .fit .no li{color:var(--ink-light);}

  form{margin-top:var(--s-4); display:grid; gap:var(--s-3); max-width:var(--measure);}
  .pair{display:grid; grid-template-columns:1fr; gap:var(--s-3);}
  label{display:block; font-size:var(--step--1); color:var(--ink-mid); margin-bottom:.35rem;}
  input,textarea{
    width:100%; font:inherit; font-size:var(--step-0); color:var(--ink);
    background:transparent; border:0; border-bottom:1px solid var(--rule);
    padding:.5rem 0; border-radius:0;
  }
  input:focus,textarea:focus{outline:none; border-bottom-color:var(--blue);}
  textarea{min-height:5.5rem; resize:vertical;}
  button{
    justify-self:start; background:var(--ink); color:var(--paper); border:0;
    font:inherit; font-size:var(--step-0); font-weight:500; padding:1rem 1.75rem;
    min-height:48px; border-radius:2px; cursor:pointer; transition:background .15s ease;
  }
  button:hover{background:var(--blue);}
  .aside{margin-top:var(--s-3); font-size:var(--step--1); color:var(--ink-light);}

  .sig p{color:var(--ink-mid); max-width:var(--measure);}
  .sig p + p{margin-top:var(--s-3);}
  .sig .name{
    font-family:"Newsreader",Georgia,serif; font-style:italic;
    font-size:var(--step-1); color:var(--ink); margin-top:var(--s-4);
  }

  footer{
    border-top:1px solid var(--rule); padding-block:var(--s-4);
    font-size:var(--step--1); color:var(--ink-light);
  }
  footer .page{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3); flex-wrap:wrap;}
  .fcontact{display:flex; gap:var(--s-4); flex-wrap:wrap;}
  .fcontact a{color:var(--ink); font-weight:500; text-decoration:none; min-height:44px; display:inline-flex; align-items:center;}
  .fcontact a:hover{color:var(--blue); text-decoration:underline;}
  footer a{color:var(--ink-light); text-decoration:none;}
  footer a:hover{color:var(--ink-mid); text-decoration:underline;}

  /* Sticky tap-to-call — mobile only, thumb zone. Phone converts 25-40% vs 2-5% for forms. */
  .callbar{display:none;}
  @media(max-width:52rem){
    .callbar{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
      background:var(--ink); border-top:1px solid var(--ink);
    }
    .callbar a{
      flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
      min-height:56px; color:var(--paper); text-decoration:none;
      font-size:var(--step-0); font-weight:600; letter-spacing:.01em;
    }
    .callbar a + a{border-left:1px solid rgba(250,249,246,.22);}
    .callbar a.alt{background:transparent; font-weight:500;}
    body{padding-bottom:56px;}
  }

  /* trust markers sit AT the decision point, not in a separate row (Baymard) */
  .atcta{margin-top:var(--s-3); display:grid; gap:.45rem; font-size:var(--step--1); color:var(--ink-mid);}
  .atcta span{padding-left:1.1rem; position:relative;}
  .atcta span::before{content:"✓"; position:absolute; left:0; color:var(--ink); font-weight:600;}

  .capacity{
    margin-top:var(--s-4); padding:var(--s-3); border:1px solid var(--rule);
    background:var(--paper); font-size:var(--step-0); color:var(--ink-mid); max-width:var(--measure);
  }
  .capacity b{color:var(--ink);}

  .soon{
    margin-top:var(--s-4); padding-top:var(--s-3);
    border-top:1px solid var(--rule-soft);
    max-width:var(--measure); color:var(--ink-mid); font-size:var(--step--1);
  }
  .soon::before{
    content:"Coming soon"; display:block; margin-bottom:var(--s-1);
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    font-weight:600; color:var(--blue);
  }
  .caseshot{width:100%; height:auto; display:block; border:1px solid var(--rule); margin-top:var(--s-4);}
  .caption{font-size:var(--step--1); color:var(--ink-light); margin-top:.6rem;}
  .quoteslot{
    margin-top:var(--s-4); padding-left:var(--s-3); border-left:2px solid var(--rule);
    color:var(--ink-mid); font-size:var(--step-1); line-height:1.5; font-family:"Newsreader",Georgia,serif;
  }


/* ================= Proof page =================
   The first two passes put screenshots in a 1.35fr column ~591px wide. A
   1440px-wide app rendered at 591px is 41% scale, so its 14px UI text landed
   at ~6px and nothing was readable. Every measurement passed and the page was
   still useless. So: the caption goes ABOVE, the screenshot runs the full
   column width, and the shots are cropped to 1440x620 of actual content
   instead of a full window with an empty bottom third. At ~1080px wide that
   is 0.75 scale - the app's own text reads.
   ============================================== */

.proof{padding:var(--s-5) 0;border-top:1px solid var(--rule-soft)}
.proof:first-of-type{border-top:0;padding-top:var(--s-4)}

.proofhead{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.35rem}
.claim{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-light);margin:0;
}
.proof h3{margin:0 0 .5rem;max-width:30ch}
.proof .say{color:var(--ink-mid);margin:0 0 var(--s-3);max-width:var(--measure)}

.shotwrap{position:relative}
.shot{
  width:100%;height:auto;display:block;aspect-ratio:1160/620;
  object-fit:cover;object-position:top left;
  border-radius:10px;border:1px solid var(--rule);
  box-shadow:0 20px 50px -24px rgba(22,24,29,.38),0 4px 12px -5px rgba(22,24,29,.14);
}

.float{
  position:absolute;right:-.75rem;bottom:-1rem;background:var(--paper);
  border:1px solid var(--rule);border-radius:8px;padding:.6rem .85rem;
  box-shadow:0 10px 26px -12px rgba(22,24,29,.3);
}
.float .n{font-size:1.35rem;line-height:1;display:block;font-weight:500}
.float .l{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-light)}

/* Phones: one grouped block, fixed frames. Never inline with a desktop shot. */
.phones{display:flex;gap:clamp(1rem,2.5vw,2rem);flex-wrap:wrap}
.phone{
  width:210px;height:430px;flex:0 0 auto;border-radius:24px;overflow:hidden;
  border:1px solid var(--rule);background:var(--paper);
  box-shadow:0 20px 50px -24px rgba(22,24,29,.38),0 4px 12px -5px rgba(22,24,29,.14);
}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.phone-cap{font-size:.82rem;color:var(--ink-light);margin:.6rem 0 0;text-align:center}

.aigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-top:var(--s-4)}
.ai{background:var(--paper);border:1px solid var(--rule-soft);border-radius:8px;padding:1rem 1.1rem}
.ai .t{font-size:1.06rem;margin-bottom:.25rem;line-height:1.25;font-weight:500}
.ai p{font-size:.88rem;color:var(--ink-light);margin:0}

.gate{background:var(--ink);color:var(--paper);border-radius:10px;padding:1.6rem 1.8rem;margin-top:var(--s-4)}
.gate .t{font-size:1.3rem;margin-bottom:.35rem;font-weight:500}
.gate p{color:#bdb9b2;margin:0;font-size:.95rem}

.prooflink{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--s-3);
  font-weight:500;color:var(--blue);text-decoration:none;border-bottom:1px solid transparent;
}
.prooflink:hover{border-bottom-color:var(--blue)}

@media (max-width:52rem){
  .float{position:static;display:inline-block;margin-top:.7rem}
  .phones{justify-content:center}
  .phone{width:44vw;max-width:210px;height:auto;aspect-ratio:210/430}
}

/* Real-work photos: one job, several rooms, equal boxes so no single room
   dominates. Same treatment as a screenshot so the page reads as one system. */
.workshot{
  flex:1 1 0;min-width:0;width:100%;height:auto;display:block;
  aspect-ratio:1500/962;object-fit:cover;
  border-radius:10px;border:1px solid var(--rule);
  box-shadow:0 20px 50px -24px rgba(22,24,29,.38),0 4px 12px -5px rgba(22,24,29,.14);
}
@media (max-width:52rem){ .workshot{flex:1 1 100%} }

/* One documented exception to the single-ratio rule. The drafted-reply screen
   needs the recipient, the subject, the whole written reply AND the unpressed
   Send button in one frame - that IS the claim. Forcing it into the 2.32 box
   the other five use is what produced a shot cut off mid-sentence. Same border,
   radius and shadow, so it still reads as one set. */
.shot.deep{aspect-ratio:1160/838}