/* Stevensons Home Repair: "The Chalk Line"
   Type scale 1.25 on an 18px base. Spacing on a 4/8px scale.
   Palette: shingle slate (dominant), bone paper, ink, chalk blue (Call + chalk line only), light chalk (on slate), brick (tiny marks). */
:root{
  --slate:#232E3A; --bone:#EFEBE3; --paper:#F8F5EF; --ink:#1B232C; --ink2:#3D4852;
  --chalk:#2A62BC; --chalk-lt:#7FB0FF; --brick:#9C3B2E; --mute-on-slate:#B9C3CE;
  --f-head:"Archivo","Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
  --f-body:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  /* type scale 1.25 */
  --t-1:.8rem; --t0:1rem; --t1:1.25rem; --t2:1.5625rem; --t3:1.953rem; --t4:2.441rem; --t5:3.052rem; --t6:3.815rem;
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --focus:var(--chalk);
  --edge:36px;           /* left content edge on phones (rail sits at 12px) */
}
*{box-sizing:border-box}
html{font-size:112.5%;scroll-behavior:smooth;scroll-padding-top:16px;scroll-padding-bottom:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:var(--chalk);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hero,.sec-slate,.foot,.top,.mbar{--focus:var(--chalk-lt)}
.skip{position:absolute;left:8px;top:-80px;background:var(--bone);color:var(--ink);padding:12px 16px;z-index:100;font-family:var(--f-head);font-weight:600;border:3px solid var(--chalk)}
.skip:focus{top:8px}

h1,h2,h3{font-family:var(--f-head);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125;margin:0;line-height:1.08;letter-spacing:-.01em}
.label{font-family:var(--f-head);font-weight:600;font-stretch:100%;font-variation-settings:"wdth" 100;font-size:var(--t-1);text-transform:uppercase;letter-spacing:.14em;margin:0 0 var(--s3);line-height:1.4}

/* header */
.top{background:var(--slate);color:var(--bone)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 16px var(--s3) var(--edge);max-width:1280px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;color:var(--bone);text-decoration:none;min-height:44px}
.mark{flex:none}
.brand-name{font-family:var(--f-head);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:var(--t0);line-height:1.1;letter-spacing:.02em;text-transform:uppercase}
.brand-name small{display:block;font-weight:600;font-stretch:100%;font-variation-settings:"wdth" 100;font-size:var(--t-1);letter-spacing:.08em;color:var(--mute-on-slate);margin-top:2px}
.nav{display:none}
.nav a{font-family:var(--f-head);font-weight:600;font-variation-settings:"wdth" 100;font-size:var(--t-1);text-transform:uppercase;letter-spacing:.12em;color:var(--bone);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--chalk-lt)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 var(--s4);font-family:var(--f-head);font-weight:600;font-variation-settings:"wdth" 100;font-size:var(--t0);letter-spacing:.04em;text-decoration:none;border:3px solid transparent;transition:transform .15s}
.btn-call{background:var(--chalk);color:#fff}
.btn-call:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--slate);color:var(--slate)}
.btn-ghost:hover{background:var(--slate);color:var(--bone)}
.txt-link{display:inline-flex;align-items:center;min-height:44px;color:var(--chalk-lt);font-family:var(--f-head);font-weight:600;font-variation-settings:"wdth" 100;letter-spacing:.04em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}

/* HERO */
.hero{position:relative;background:var(--slate);color:var(--bone);overflow:hidden;padding:var(--s5) 0 0}
.hero-text{position:relative;z-index:2;padding:0 16px var(--s5) var(--edge);max-width:640px}
.hero .txt-link{display:none}
.hero h1{font-size:var(--t2)}
.hero h1 .u{text-decoration:underline;text-decoration-color:var(--brick);text-decoration-thickness:5px;text-underline-offset:6px}
.lede{font-size:var(--t0);margin:var(--s3) 0 var(--s4);max-width:30em;color:#E3E7EC}
.hero-photo{position:relative;height:300px;margin-top:0;clip-path:polygon(0 28px,100% 0,100% 100%,0 100%);animation:none}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 55%}
/* the chalk line across the hero */
.hero-line{position:absolute;left:12px;right:0;bottom:28px;height:3px;background:var(--chalk-lt);z-index:3;box-shadow:0 0 8px rgba(127,176,255,.45)}
.hero-line::before{content:"";position:absolute;left:0;right:0;bottom:3px;height:10px;background:repeating-linear-gradient(to right,var(--chalk-lt) 0 2px,transparent 2px 24px)}
.hero-line::after{content:"";position:absolute;left:0;top:0;width:3px;height:28px;background:var(--chalk-lt)}
.hero-line .puff{position:absolute;right:8px;top:-19px}
.js .hero-line{animation:snap 1.4s cubic-bezier(.2,.7,.2,1) .15s both;--from:inset(-24px 0 -24px 100%)}
@keyframes snap{from{clip-path:var(--from)}to{clip-path:inset(-24px -24px -24px -24px)}}

/* sections + chalk rail */
.sec{position:relative;padding:var(--s7) 0}
.sec-bone{background:var(--bone)}
.sec-paper{background:var(--paper)}
.sec-slate{background:var(--slate);color:var(--bone);--c:var(--chalk-lt)}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px 0 var(--edge)}
.rail{--c:var(--chalk);--p:1;position:absolute;left:12px;top:0;bottom:0;width:14px;pointer-events:none}
.sec-slate .rail{--c:var(--chalk-lt)}
.rail::before{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--c),var(--c)) 0 0/3px 100% no-repeat,
  repeating-linear-gradient(to bottom,var(--c) 0 1px,transparent 1px 24px) 3px 0/9px 100% no-repeat;
  clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0)}
.chalk-on .rail::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-left:2px dashed var(--c);opacity:.75}
.sec-head{margin-bottom:var(--s6);max-width:34rem}
.sec h2{font-size:var(--t2)}
.intro{margin:var(--s3) 0 0;color:var(--ink2)}
.sec-slate .intro{color:var(--mute-on-slate)}
.sec .label{color:var(--ink2)}
.sec-slate .label{color:var(--chalk-lt)}

/* services: staggered along the line */
.svc{list-style:none;margin:0;padding:0}
.svc-item{position:relative;padding:var(--s4) 0 var(--s4);}
.svc-item::before{content:"";position:absolute;left:calc(var(--edge) * -1 + 15px);width:calc(var(--edge) - 15px - 12px);top:calc(var(--s4) + 28px);height:2px;background:var(--chalk)}
.svc-item::after{content:"";position:absolute;left:-26px;top:calc(var(--s4) + 22px);width:12px;height:12px;border-radius:50%;background:var(--chalk);box-shadow:0 0 0 4px var(--bone)}
.num{display:block;font-family:var(--f-head);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:var(--t5);line-height:1;color:var(--slate);margin-bottom:var(--s2);transition:transform .25s}
.svc-item:hover .num{transform:translateX(8px)}
.svc h3{font-size:var(--t1);margin-bottom:var(--s2)}
.svc p{margin:0;max-width:26em;color:var(--ink2)}

/* collage */
.collage{display:grid;gap:var(--s5)}
.ph{margin:0;container-type:inline-size}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:polygon(0 calc(var(--k,.2) * 100cqw),100% 0,100% 100%,0 100%)}
.ph-b img,.ph-d img{clip-path:polygon(0 0,100% calc(var(--k,.2) * 100cqw),100% 100%,0 100%)}
.ph-b figcaption,.ph-d figcaption{padding-left:var(--s4)}
.ph figcaption{font-size:var(--t-1);color:var(--ink2);margin-top:var(--s2);font-family:var(--f-head);font-weight:600;font-variation-settings:"wdth" 100;letter-spacing:.06em;text-transform:uppercase}

/* reviews */
.quotes{display:grid;gap:var(--s6)}
.q{margin:0}
.q blockquote{margin:0}
.q p{margin:0;font-family:var(--f-body);font-style:italic;font-weight:400;line-height:1.3;font-size:var(--t1)}
.q1 p{font-size:var(--t2)}
.q figcaption{margin-top:var(--s3);font-family:var(--f-head);font-weight:600;font-variation-settings:"wdth" 100;letter-spacing:.06em;text-transform:uppercase;font-size:var(--t-1)}
.q .src{color:var(--mute-on-slate)}
.mk{display:inline-block;width:24px;height:4px;background:var(--brick);margin-right:12px;vertical-align:middle}

/* roofline divider */
.roofline{background:var(--paper);line-height:0}
.roofline svg{width:100%;height:56px}

/* visit */
.sec-visit{padding-top:var(--s7)}
.visit{display:grid;gap:var(--s6)}
.phone{display:block;margin:var(--s5) 0 var(--s4);font-family:var(--f-head);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:var(--t2);color:var(--ink);text-decoration:none;border-bottom:5px solid var(--brick);width:max-content;max-width:100%;line-height:1.2;padding-bottom:6px;min-height:48px}
.phone:hover{color:var(--chalk)}
.pitch{width:min(100%,360px);height:auto}

/* footer */
.foot{background:var(--slate);color:var(--bone);padding:var(--s6) 0 calc(var(--s6) + 72px)}
.foot-in{max-width:1160px;margin:0 auto;padding:0 16px 0 var(--edge)}
.foot p{margin:0 0 var(--s2)}
.foot a{color:var(--chalk-lt);display:inline-flex;align-items:center;min-height:44px}
.foot-name{font-family:var(--f-head);font-weight:800;font-variation-settings:"wdth" 125;font-stretch:125%;text-transform:uppercase;letter-spacing:.02em}
.sample{color:var(--mute-on-slate);font-size:var(--t-1)}

/* sticky bar (phones) */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--slate);border-top:3px solid var(--chalk-lt)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-family:var(--f-head);font-weight:600;font-variation-settings:"wdth" 100;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;font-size:var(--t0)}
.mb-call{background:var(--chalk);color:#fff}
.mb-fb{border:2px solid var(--bone);color:var(--bone)}

@media (min-width:380px){
  .hero h1{font-size:var(--t3)}
}
@media (min-width:600px){
  .hero h1{font-size:var(--t4)}
  .sec h2{font-size:var(--t3)}
  .collage{grid-template-columns:1fr 1fr}
  .phone{font-size:var(--t3)}
}

/* tablet and up: line runs down the centre, services and quotes alternate around it */
@media (min-width:900px){
  :root{--edge:32px}
  .top-in{padding:var(--s3) var(--edge)}
  .nav{display:flex}
  .mbar{display:none}
  .foot{padding-bottom:var(--s6)}
  html{scroll-padding-bottom:16px}
  .hero{padding:var(--s7) 0 var(--s8);min-height:680px}
  .hero-text{margin-left:max(0px,calc(50% - 580px));padding:0 var(--edge);max-width:none;width:min(100%, calc(50% + 60px))}
  .hero h1{font-size:var(--t5)}
  .hero .txt-link{display:inline-flex}
  .lede{max-width:25em}
  .hero-photo{position:absolute;right:0;bottom:0;width:min(56vw,740px);height:600px;margin:0;clip-path:polygon(0 min(28vw,370px),100% 0,100% 100%,0 100%);animation:slide .9s ease-out .1s both}
  .js .hero-photo{animation:slide .9s ease-out .1s both}
  .hero-line{left:0;right:50%;--from:inset(-24px 100% -24px 0)}
  .hero-line::after{left:auto;right:0}
  .hero-line .puff{right:auto;left:8px}
  .js .hero-line{--from:inset(-24px 100% -24px 0)}
  .rail{left:calc(50% - 1.5px)}
  .wrap{padding:0 var(--edge)}
  .sec{padding:var(--s8) 0}
  .sec-head{max-width:calc(50% - 56px);margin-bottom:var(--s7)}
  .sec h2{font-size:var(--t4)}
  .sec-head .intro{max-width:24em}
  /* services */
  .svc-item{width:calc(50% - 56px);padding:var(--s4) 0}
  .svc-item:nth-child(odd){text-align:right}
  .svc-item:nth-child(odd) p{margin-left:auto}
  .svc-item:nth-child(even){margin-left:auto}
  .svc-item:nth-child(n+2){margin-top:-24px}
  .svc-item::before{width:56px;top:calc(var(--s4) + 28px)}
  .svc-item:nth-child(odd)::before{left:auto;right:-56px}
  .svc-item:nth-child(even)::before{left:-56px}
  .svc-item:nth-child(odd)::after{left:auto;right:-62px}
  .svc-item:nth-child(even)::after{left:-62px}
  .svc-item:nth-child(odd):hover .num{transform:translateX(-8px)}
  .num{font-size:var(--t6)}
  .svc h3{font-size:var(--t2)}
  /* collage */
  .collage{grid-template-columns:repeat(12,1fr);gap:0;align-items:start}
  .ph-a{grid-column:1/8;grid-row:1;--k:.22}
  .ph-b{grid-column:8/13;grid-row:1;margin-top:96px;margin-left:-24px;position:relative;z-index:2;--k:.3}
  .ph-c{grid-column:2/7;grid-row:2;margin-top:-24px;position:relative;z-index:3;--k:.18}
  .ph-d{grid-column:7/10;grid-row:2;margin-top:40px;margin-left:-24px;--k:.3}
  .ph-e{grid-column:10/13;grid-row:2;margin-top:-8px;--k:.2}
  .ph{filter:drop-shadow(0 8px 0 var(--bone))}
  .ph{filter:none}
  /* quotes */
  .quotes{gap:var(--s4)}
  .sec-slate .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:112px;align-items:start}
  .sec-slate .sec-head{grid-column:1;grid-row:1;max-width:none;margin-bottom:var(--s6)}
  .quotes{display:contents}
  .q p{font-size:var(--t2)}
  .q1{grid-column:2;grid-row:1;padding-top:var(--s5)}
  .q1 p{font-size:var(--t3)}
  .q2{grid-column:1;grid-row:2;text-align:right}
  .q3{grid-column:2;grid-row:2;margin-top:var(--s8)}
  .q3 p{font-size:var(--t3)}
  /* visit */
  .visit{grid-template-columns:1fr 1fr;align-items:center;gap:112px}
  .phone{font-size:var(--t4)}
  .pitch{justify-self:start}
}
@media (min-width:1200px){
  .hero-text{padding-left:var(--edge)}
}

/* motion that only moves things */
.chalk-on .ph{transform:translateY(12px);transition:transform .7s ease-out}
.chalk-on .ph.in{transform:none}
@keyframes slide{from{transform:translateX(12px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rail{--p:1!important}
  .hero-line{clip-path:none!important}
}

/* captions sit on the paper so the chalk rail passes behind them */
.ph figcaption{position:relative;z-index:2;background:var(--paper);display:inline-block;padding:2px 8px 2px 0}
.ph-b figcaption,.ph-d figcaption{padding-left:var(--s4)}
/* iPad landscape and small laptops: keep the text column clear of the photo */
@media (min-width:900px) and (max-width:1199px){
  .hero-text{width:56%;padding-right:var(--s3)}
  .hero-photo{width:40vw;clip-path:polygon(0 min(20vw,260px),100% 0,100% 100%,0 100%)}
  .lede{max-width:100%}
}
@media (min-width:900px){.ph-d figcaption{padding-left:calc(var(--s4) + 8px)}}