/* Apex Painters: paint chips on primer white.
   Cool primer-white ground, ink text, one red action colour.
   The five logo hues appear only as paint chips. */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../assets/fonts/archivo-latin-var.woff2') format('woff2');
}

:root{
  color-scheme:light dark;

  --ground:#F1F4F6;
  --card:#FCFDFD;
  --ink:#17191B;
  --ink-2:#4A525A;
  --line:#D6DCE1;
  --line-strong:#B7BFC6;
  --action:#C92C21;
  --action-press:#A82219;
  --on-action:#FFFFFF;
  --sign:#222021;          /* the logo's own ground */
  --on-sign:#F1F4F6;
  --on-sign-2:#B7B9B7;

  --c-red:#C92C21;
  --c-orange:#EE8A1E;
  --c-yellow:#F6C51A;
  --c-blue:#28348F;
  --c-green:#1E8F55;

  --r:4px;
  --wrap:1240px;
  --gutter:clamp(16px, 4vw, 40px);
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#151718;
    --card:#212425;
    --ink:#ECEDEA;
    --ink-2:#A9AFB3;
    --line:#33383A;
    --line-strong:#4A5053;
    --sign:#222021;
    --on-action:#FFFFFF;
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Archivo', system-ui, sans-serif;
  font-size:1.0625rem;
  font-weight:420;
  font-stretch:100%;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scrollbar-color:var(--line-strong) var(--ground);
}
::selection{background:var(--c-yellow); color:#17191B;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-underline-offset:0.22em; text-decoration-thickness:1.5px;}
p{margin:0;}
h1,h2,h3{margin:0; font-weight:800; font-stretch:108%; text-wrap:balance;}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:var(--r);}
.on-sign :focus-visible{outline-color:var(--on-sign);}

.sr-only{
  position:absolute; 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;
}
.skip{
  position:absolute; left:16px; top:-64px; z-index:100;
  background:var(--ink); color:var(--ground);
  padding:12px 16px; border-radius:var(--r); font-weight:700; text-decoration:none;
}
.skip:focus{top:12px;}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);}
.ico{width:1.25em; height:1.25em; flex:none; fill:currentColor;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 22px;
  border-radius:var(--r);
  font:inherit; font-weight:800; font-stretch:104%; font-size:1.0625rem; line-height:1;
  white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:background-color 160ms ease, color 160ms ease, transform 160ms var(--ease);
}
.btn:active{transform:translateY(1px) scale(0.985);}
.btn-primary{background:var(--action); color:var(--on-action); border:2px solid var(--action);}
.btn-primary:hover{background:var(--action-press); border-color:var(--action-press);}
.btn-quiet{
  background:transparent; color:var(--ink); border:2px solid var(--line-strong);
}
.btn-quiet:hover{border-color:var(--ink);}

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:var(--ground);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:68px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand img{width:44px; height:44px; border-radius:var(--r);}
.brand span{font-weight:800; font-stretch:112%; font-size:1.125rem; letter-spacing:-0.01em;}
.head-actions{display:flex; align-items:center; gap:20px;}
.head-call{display:none; min-height:44px; padding-inline:20px;}
.head-number{display:none; font-weight:800; font-stretch:106%; font-size:1.0625rem; text-decoration:none; letter-spacing:-0.01em;}
.head-number:hover{text-decoration:underline;}
@media (min-width:720px){ .head-call{display:inline-flex;} }
@media (min-width:900px){ .head-number{display:inline;} }

/* ---------- Hero: the house photo, tinted, behind the headline ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:clamp(480px, 74dvh, 720px);
  padding-block:clamp(40px, 6vw, 88px);
  color:#fff;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:50% 62%;
}
.hero-tint{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(20,22,24,0.78) 0%, rgba(20,22,24,0.66) 100%);
}
.hero .wrap{width:100%;}
.hero h1{
  font-size:clamp(2.5rem, 1.5rem + 4.6vw, 4.5rem);
  line-height:1;
  letter-spacing:-0.028em;
  font-stretch:110%;
  max-width:11ch;
}
.lede{
  margin-top:20px; max-width:34ch;
  font-size:clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color:rgba(255,255,255,0.9);
}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px;}
.hero .btn-quiet{color:#fff; border-color:rgba(255,255,255,0.6);}
.hero .btn-quiet:hover{border-color:#fff;}
.hero :focus-visible{outline-color:#fff;}
@media (min-width:900px){
  .hero-tint{background:linear-gradient(90deg, rgba(20,22,24,0.82) 0%, rgba(20,22,24,0.72) 42%, rgba(20,22,24,0.22) 100%);}
}
@media (max-width:719px){ .cta-row .btn{flex:1 1 100%;} }

.chip-edge{position:absolute; left:0; right:0; bottom:0; display:flex; height:8px;}
.chip-edge i{flex:1;}
.chip-edge i:nth-child(1){background:var(--c-red);}
.chip-edge i:nth-child(2){background:var(--c-orange);}
.chip-edge i:nth-child(3){background:var(--c-yellow);}
.chip-edge i:nth-child(4){background:var(--c-blue);}
.chip-edge i:nth-child(5){background:var(--c-green);}

/* ---------- Proof ---------- */
.proof{border-block:1px solid var(--line);}
.proof ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:minmax(0, 1fr);
}
.proof li{
  display:flex; align-items:center; gap:14px;
  padding:18px 0;
  font-weight:700; font-stretch:104%; font-size:1.0625rem;
}
.proof li + li{border-top:1px solid var(--line);}
.proof .ico{width:28px; height:28px;}
@media (min-width:800px){
  .proof ul{grid-template-columns:repeat(3, auto); justify-content:space-between;}
  .proof li{padding:26px 0;}
  .proof li + li{border-top:0;}
}

/* ---------- Services (paint chips) ---------- */
.services{padding-block:clamp(56px, 8vw, 112px) clamp(48px, 7vw, 96px);}
.section-title{
  font-size:clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  line-height:1.04; letter-spacing:-0.022em;
  max-width:18ch;
}
.chips{
  display:grid; gap:20px; margin-top:clamp(28px, 4vw, 48px);
  grid-template-columns:minmax(0, 1fr);
}
.chip{
  display:flex; flex-direction:column;
  background:var(--card);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(23,25,27,0.08), 0 14px 26px -16px rgba(23,25,27,0.42);
}
.chip-band{
  position:relative; height:52px; background:var(--c);
  display:flex; align-items:center; padding-inline:16px;
  box-shadow:inset 0 -1px 0 rgba(23,25,27,0.14);
}
.chip-band::after{
  content:''; width:20px; height:20px; border-radius:50%;
  margin-left:auto;
  background:var(--ground); box-shadow:inset 0 2px 3px rgba(23,25,27,0.35);
}
.chip img{width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover;}
.chip-body{padding:22px 22px 26px;}
.chip h3{font-size:clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height:1.2; letter-spacing:-0.015em;}
.chip p{margin-top:10px; color:var(--ink-2); max-width:44ch;}
.chip-orange{--c:var(--c-orange);}
.chip-yellow{--c:var(--c-yellow);}
.chip-blue{--c:var(--c-blue);}


@media (min-width:800px){
  .chips{
    grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:"ext int" "ext col";
    grid-template-rows:auto auto;
  }
  .chip-ext{grid-area:ext;}
  .chip-ext img{flex:1; min-height:0; aspect-ratio:auto;}
  .chip-int{grid-area:int;}
  .chip-col{grid-area:col;}
  .chip-int,.chip-col{
    display:grid; grid-template-columns:minmax(0, 42%) minmax(0, 1fr); grid-template-rows:52px 1fr;
  }
  .chip-int .chip-band,.chip-col .chip-band{grid-column:1 / -1;}
  .chip-int img,.chip-col img{height:100%; aspect-ratio:auto;}
  .chip-int .chip-body,.chip-col .chip-body{align-self:center;}
  .chip-ext .chip-body{padding:26px 28px 30px;}
}

/* ---------- Review + about ---------- */
.review{padding-block:clamp(24px, 4vw, 48px) clamp(64px, 9vw, 128px);}
.review-grid{display:grid; gap:40px; grid-template-columns:minmax(0, 1fr); align-items:start;}
.quote{margin:0;}
.stars{display:flex; gap:4px; color:var(--ink); margin-bottom:18px;}
.stars .ico{width:22px; height:22px;}
.quote p{
  font-size:clamp(1.625rem, 1.05rem + 2.2vw, 3rem);
  font-weight:700; font-stretch:100%;
  line-height:1.15; letter-spacing:-0.02em;
  text-wrap:pretty;
}
.quote footer{margin-top:18px; color:var(--ink-2); font-weight:600; font-size:0.9375rem;}
.about{padding-top:24px; border-top:1px solid var(--line); max-width:52ch;}
.about .who{font-weight:800; font-stretch:106%; font-size:1.125rem;}
.about .role{color:var(--ink-2); font-size:0.9375rem; margin-top:2px;}
.about .role + p{margin-top:16px;}
.about p + p{margin-top:14px;}
@media (min-width:900px){
  .review-grid{grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:clamp(48px, 7vw, 112px);}
  .about{border-top:0; padding-top:0; align-self:end;}
}

/* ---------- Closing sign ---------- */
.sign{
  background:var(--sign); color:var(--on-sign);
  padding-block:clamp(56px, 8vw, 112px) clamp(96px, 9vw, 112px);
}
.sign-grid{display:grid; gap:36px; grid-template-columns:minmax(0, 1fr); align-items:center;}
.sign-logo{width:clamp(120px, 26vw, 220px); height:auto; aspect-ratio:1; border-radius:var(--r);}
.sign h2{font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height:1.05; letter-spacing:-0.02em;}
.sign .lede{color:var(--on-sign-2); margin-top:12px; max-width:none; text-wrap:balance;}
.big-number{
  display:inline-flex; align-items:center; gap:0.22em;
  margin-top:clamp(20px, 3vw, 32px);
  font-size:clamp(1.5rem, 8.2vw, 5.5rem);
  white-space:nowrap;
  font-weight:900; font-stretch:112%; line-height:1; letter-spacing:-0.03em;
  color:var(--on-sign); text-decoration:none;
  border-bottom:0.08em solid var(--action);
  padding-bottom:0.06em;
  transition:border-color 160ms ease;
}
.big-number .ico{width:0.6em; height:0.6em;}
@media (min-width:800px){ .big-number{font-size:clamp(2.5rem, 5.6vw, 5.5rem);} }
.big-number:hover{border-color:var(--on-sign);}
.sign-meta{
  display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:28px;
  font-weight:600; color:var(--on-sign);
}
.sign-meta a,.sign-meta span{display:inline-flex; align-items:center; gap:10px; text-decoration:none;}
.sign-meta a{text-decoration:underline; text-decoration-color:var(--on-sign-2);}
.sign-meta a:hover{text-decoration-color:var(--on-sign);}
.sign-meta .ico{color:var(--on-sign-2);}
.legal{margin-top:clamp(40px, 6vw, 72px); padding-top:20px; border-top:1px solid #3a3738; font-size:0.875rem; color:var(--on-sign-2);}
@media (min-width:800px){
  .sign-grid{grid-template-columns:auto minmax(0, 1fr); gap:clamp(40px, 7vw, 104px);}
}

/* ---------- Mobile call bar ---------- */
.callbar{
  position:fixed; inset:auto 0 0 0; z-index:50;
  display:flex; gap:10px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--ground);
  border-top:1px solid var(--line);
}
.callbar{transition:transform 320ms var(--ease);}
.callbar.away{transform:translateY(100%);}
.callbar .btn{min-height:50px;}
.callbar .btn-primary{flex:1 1 auto;}
.callbar .btn-quiet{flex:0 0 auto;}
body{padding-bottom:72px;}
@media (min-width:720px){
  .callbar{display:none;}
  body{padding-bottom:0;}
}

/* ---------- Motion (content stays visible without JS) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .rise{opacity:0; transform:translateY(22px);}
  .js .rise.in{
    opacity:1; transform:none;
    transition:opacity 700ms var(--ease) calc(var(--d, 0) * 80ms), transform 700ms var(--ease) calc(var(--d, 0) * 80ms);
  }
  .js .hero .wrap > *{animation:enter 800ms var(--ease) both;}
  .js .hero .wrap > :nth-child(2){animation-delay:90ms;}
  .js .hero .wrap > :nth-child(3){animation-delay:180ms;}
  @keyframes enter{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none;}
}