/* Proflo Painters — Concept 7 "Signwritten".
   Built 15 Sep 2026 from the 11 Sep Google Meet with Gianni Contebardo.

   Concept 06 answered "rustic" with a refined Victorian didone on aged paper.
   He asked for something MORE rustic and with more personality, so 07 goes
   somewhere else entirely: a hand painted trade signboard. The page is built
   as a run of painted boards, deep ink with chalk lettering, alternating with
   raw canvas drop sheet. Heavy Clarendon wood type, double keylines, torn
   edges, a ghost sign faded into the brickwork, and a real brush stroke drawn
   under the headline.

   His brief, in his own words:
     "I don't want so colorful ... I want to go sort of back to time with the
      way it looks. Little bit rustic as well."
     "I'm more of a country than a city sort of guy."
     "My logo is very black and white ... maybe with like army greens."
     "I don't like the reds."
     "I just want something different ... there's no personality."

   So: black and white off his badge, army green as the ONE accent, zero reds,
   zero gold, zero gradients, zero rounded modern cards. Square corners are the
   whole point, which also keeps the house concentric corner rule trivially
   satisfied. Lato is kept from his real stylesheet as the quiet face, so one
   thing of his own survives into the new direction. */

:root{
  /* the spine, black and white off his badge */
  --ink:#17160E; --ink-2:#22211A; --ink-3:#2E2C22; --ink-4:#3A382B;
  --chalk:#F5F0E1; --chalk-2:#E9E2CE;

  /* raw canvas, a painter's drop sheet, not screen white */
  --canvas:#E6DDC8; --canvas-2:#DCD2B9; --canvas-3:#F0E9D8;

  /* the one accent he offered, army green */
  --olive:#4C5A38; --olive-d:#39442A; --olive-l:#6E7F52; --olive-p:#A7B586;

  --muted:#5B5442; --muted-ink:#B3AC96;
  --line:#C2B694; --line-2:#A99B75;
  --line-ink:rgba(245,240,225,.20); --line-ink-2:rgba(245,240,225,.36);

  --disp:'Bevan',Clarendon,'Roboto Slab',Georgia,serif;
  --body:'Lato','Helvetica Neue',Helvetica,Arial,sans-serif;
  --wrap:1180px;

  /* hand cut edges for the signboard and the chat button */
  --cut-fab:polygon(0.00% 3.83%,8.33% 8.46%,16.67% 6.83%,25.00% 7.29%,33.33% 7.08%,41.67% 4.24%,50.00% 8.01%,58.33% 3.56%,66.67% 3.92%,75.00% 3.83%,83.33% 8.78%,91.67% 6.28%,100.00% 8.70%,98.50% 25.00%,98.24% 50.00%,99.37% 75.00%,99.15% 100.00%,91.67% 92.63%,83.33% 97.60%,75.00% 95.37%,66.67% 93.94%,58.33% 91.85%,50.00% 92.04%,41.67% 95.61%,33.33% 94.98%,25.00% 97.35%,16.67% 95.35%,8.33% 91.90%,0.00% 91.33%,0.64% 75.00%,1.30% 50.00%,1.56% 25.00%);
  --cut-board:polygon(0.00% 1.17%,4.55% 0.81%,9.09% 0.86%,13.64% 1.95%,18.18% 2.11%,22.73% 1.16%,27.27% 1.03%,31.82% 1.04%,36.36% 1.62%,40.91% 1.95%,45.45% 2.40%,50.00% 0.70%,54.55% 1.44%,59.09% 1.33%,63.64% 0.86%,68.18% 1.09%,72.73% 2.36%,77.27% 0.88%,81.82% 1.07%,86.36% 1.98%,90.91% 0.95%,95.45% 1.41%,100.00% 2.57%,99.58% 8.33%,99.36% 16.67%,98.82% 25.00%,98.74% 33.33%,99.32% 41.67%,99.19% 50.00%,98.62% 58.33%,99.06% 66.67%,99.35% 75.00%,99.13% 83.33%,99.02% 91.67%,99.58% 100.00%,95.45% 98.25%,90.91% 99.35%,86.36% 97.82%,81.82% 98.12%,77.27% 98.68%,72.73% 99.27%,68.18% 98.88%,63.64% 98.84%,59.09% 98.71%,54.55% 99.18%,50.00% 99.12%,45.45% 99.09%,40.91% 97.78%,36.36% 99.20%,31.82% 98.77%,27.27% 98.67%,22.73% 97.84%,18.18% 98.16%,13.64% 97.53%,9.09% 99.26%,4.55% 98.52%,0.00% 98.17%,0.84% 91.67%,0.64% 83.33%,1.17% 75.00%,0.90% 66.67%,0.91% 58.33%,0.51% 50.00%,1.19% 41.67%,1.17% 33.33%,0.55% 25.00%,1.32% 16.67%,1.51% 8.33%);

  /* shared chat widget tokens, named exactly as chat.css reads them */
  --scq-sheet:#F0E9D8; --scq-ink:#17160E; --scq-accent:#4C5A38;
  --scq-accent-ink:#F5F0E1; --scq-radius:0px;
  --scq-font-body:'Lato',Helvetica,Arial,sans-serif;
  --scq-font-display:'Bevan',Georgia,serif;
  --scq-muted:#5B5442; --scq-line:#C2B694;
  --scq-bot:#E0D6BC; --scq-you:#4C5A38; --scq-you-ink:#F5F0E1;

  /* shared dock tokens */
  --dk-sheet:rgba(23,22,14,.94); --dk-line:rgba(245,240,225,.18);
  --dk-ink:#B3AC96; --dk-ink-on:#F5F0E1; --dk-accent:#A7B586; --dk-accent-ink:#17160E;
  --dk-pill:rgba(245,240,225,.10); --dk-radius:0px;
  --dk-font:'Lato',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:92px}

body{
  margin:0;color:var(--ink-2);font:400 17px/1.75 var(--body);overflow-x:hidden;
  background-color:var(--canvas);
  /* canvas weave plus a paper grain, two passes so it reads as cloth not noise */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='6' fill='none'/%3E%3Cpath d='M0 0h6M0 3h6' stroke='%23000' stroke-opacity='.035' stroke-width='1'/%3E%3Cpath d='M0 0v6M3 0v6' stroke='%23000' stroke-opacity='.022' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block;height:auto}
a{color:var(--olive-d);text-decoration:none}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);line-height:1.08;font-weight:400}
h1,h2{font-family:var(--disp);letter-spacing:.005em}
h3,h4,h5{font-family:var(--body);font-weight:700;line-height:1.2;letter-spacing:-.005em}
p{margin:0}
.wrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto;position:relative;z-index:2}

/* ---------- the letterpress trade label ---------- */
.eyebrow{
  font-family:var(--body);font-weight:900;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--olive);margin:0 0 20px;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:26px;height:5px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);flex:none}
.eyebrow::after{content:"";flex:1;height:5px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.on-ink .eyebrow,.eyebrow.lt{color:var(--olive-p)}
.on-ink .eyebrow::before,.on-ink .eyebrow::after,.eyebrow.lt::before,.eyebrow.lt::after{border-color:var(--line-ink-2)}


/* ---------- the hero signboard, 15 Sep 2026 ----------
   Tim's actual ask: his badge's own words ARE the headline, set on a hand cut
   sign board rather than as floating type. Light paper on the dark hero, so it
   reads as a real painted sign nailed to a wall. The keyline sits on an inner
   element, because a clip path would slice a border off the outer one. */
.board-sign{position:relative;display:inline-block;margin:0 0 26px;
  background:var(--canvas-3);clip-path:var(--cut-board);padding:5px;
  filter:drop-shadow(9px 9px 0 rgba(0,0,0,.42))}
.bs-in{display:block;position:relative;border:1px solid var(--line-2);padding:30px 44px 28px;text-align:center}
.bs-in::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.bs-a{display:block;font-family:var(--disp);font-size:clamp(33px,4.5vw,58px);line-height:.98;
  color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
.bs-r{display:flex;align-items:center;justify-content:center;gap:11px;margin:15px 0 13px}
.bs-r::before,.bs-r::after{content:"";height:3px;flex:1;max-width:74px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.bs-r i{width:6px;height:6px;background:var(--olive);transform:rotate(45deg);display:block;flex:none}
.bs-b{display:block;font:900 13px/1.3 var(--body);letter-spacing:.28em;
  text-transform:uppercase;color:var(--olive)}
.bs-c{display:block;font-family:var(--disp);font-size:clamp(18px,2.1vw,26px);line-height:1.1;
  color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin-top:13px}

/* ---------- torn edge between boards ---------- */
.tear{position:absolute;left:0;width:100%;height:20px;display:block;pointer-events:none;z-index:3}
.tear-b{bottom:-1px}
.tear-t{top:-1px}

/* ---------- ghost sign, faded paint on brick ---------- */
.ghost{
  position:absolute;font-family:var(--disp);text-transform:uppercase;
  line-height:.78;white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
  color:rgba(245,240,225,.05);
}
.ghost.dk{color:rgba(23,22,14,.045)}
.board .ghost{right:-2%;bottom:-9%;font-size:clamp(150px,19vw,290px)}

/* ---------- scroll progress ---------- */

/* ---------- header, a painted signboard ---------- */
.hd{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid var(--line-ink-2);
  box-shadow:0 1px 0 rgba(23,22,14,.9),0 3px 0 var(--ink)}
.hd-in{display:flex;align-items:center;gap:20px;height:80px;justify-content:space-between}
.hd-logo{display:flex;align-items:center;gap:13px;flex:0 1 auto;min-width:0;margin-right:auto}
.hd-logo img{height:48px;width:48px;flex:none}
.hd-name{font-family:var(--disp);font-size:19px;color:var(--chalk);line-height:1;letter-spacing:.01em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-cluster{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none}
.nav{display:flex;gap:26px}
.nav a{font:700 14px/1 var(--body);color:var(--muted-ink);letter-spacing:.04em;text-transform:uppercase;
  padding:15px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--chalk);border-bottom-color:var(--olive-p)}
.hd-cta{display:inline-flex;align-items:center;min-height:46px;background:var(--olive);color:var(--chalk);
  font:900 13px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;padding:0 20px;
  border:1px solid var(--olive-l);box-shadow:3px 3px 0 rgba(0,0,0,.4)}
.hd-cta:hover{background:var(--olive-l);color:#fff}
.hd-tel{display:none;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--line-ink-2);color:var(--chalk)}
.hd-tel svg{width:20px;height:20px}
.burger{display:none;width:46px;height:46px;background:none;border:1px solid var(--line-ink-2);
  color:var(--chalk);font-size:19px;line-height:1;cursor:pointer}

/* mobile drawer */
.drawer{position:fixed;inset:80px 0 auto 0;background:var(--ink);border-bottom:3px solid var(--olive);
  display:none;flex-direction:column;padding:10px 22px 24px;z-index:59;max-height:calc(100vh - 80px);overflow-y:auto}
.drawer.on{display:flex}
.drawer a{font:700 16px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--chalk);
  padding:17px 0;border-bottom:1px solid var(--line-ink);min-height:46px;display:flex;align-items:center}
.drawer .dcall{margin-top:18px;border:0;background:var(--olive);color:var(--chalk);justify-content:center;
  font-weight:900;letter-spacing:.1em;min-height:54px}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
body.noanim .rv{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- boards ---------- */
.board{position:relative;background:var(--ink);color:var(--chalk-2);overflow:hidden}
.board h1,.board h2,.board h3,.board h4,
.hero h1,.hero .h1,.cta-band h2{color:var(--chalk)}
.sec{position:relative;padding:104px 0}
.board.sec{padding:112px 0}
.sec.canvas-2{background:var(--canvas-2)}

/* ---------- hero, the big painted board ---------- */
.hero{position:relative;background:var(--ink);color:var(--chalk-2);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:84px 0 96px}
.hero .ghost{font-size:clamp(190px,25vw,380px);left:-3%;bottom:-6%}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}

/* the double keyline the whole board sits inside, like an enamel sign */
.keyline{position:absolute;inset:26px;border:1px solid var(--line-ink);pointer-events:none;z-index:1}
.keyline::after{content:"";position:absolute;inset:6px;border:3px double var(--line-ink)}

.h1{font-size:clamp(46px,7.4vw,96px);text-transform:uppercase;letter-spacing:.004em;line-height:.94}
.h1 em{font-style:normal;color:var(--olive-p);display:block}
.brush{display:block;width:min(340px,86%);height:22px;margin:22px 0 26px;color:var(--olive-p)}
.lede{font-size:19px;line-height:1.72;color:var(--chalk-2);max-width:54ch;margin:0}
.hero-meta{display:flex;flex-wrap:wrap;gap:0;margin:34px 0 0;border-top:1px solid var(--line-ink-2)}
.hm{flex:1 1 180px;min-width:0;padding:20px 20px 20px 0;border-right:1px solid var(--line-ink)}
.hm:last-child{border-right:0}
.hm b{display:block;font:900 12px/1.35 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--olive-p);min-height:1.35em;margin-bottom:6px}
.hm span{display:block;font-size:14px;line-height:1.5;color:var(--muted-ink)}

/* ---------- the job docket, the hero enquiry card ---------- */
.hero-fig{min-height:520px;display:flex;align-items:stretch}
.docket{background:var(--canvas-3);border:1px solid var(--ink);width:100%;
  box-shadow:9px 9px 0 rgba(0,0,0,.45);position:relative;display:flex;flex-direction:column}
.docket::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-2);pointer-events:none}
.dk-hd{padding:22px 26px 18px;border-bottom:3px double var(--ink);text-align:center;position:relative;z-index:1}
.dk-hd img{height:74px;width:74px;margin:0 auto 12px}
.dk-hd img.dk-mark{height:118px;width:118px;margin-bottom:14px}
.dk-hd b{display:block;font-family:var(--disp);font-size:21px;text-transform:uppercase;color:var(--ink);line-height:1.1}
.dk-hd span{display:block;font-size:13px;color:var(--muted);margin-top:7px;letter-spacing:.04em}
.qz{padding:24px 26px 26px;position:relative;z-index:1;flex:1;display:flex;flex-direction:column}
.qz-step{display:none}
.qz-step.on{display:block}
.qz-q{font-family:var(--disp);font-size:20px;color:var(--ink);line-height:1.18;margin:0 0 4px}
.qz-h{font-size:13px;color:var(--muted);margin:0 0 16px;letter-spacing:.03em}
.qz-opts{display:flex;flex-direction:column;gap:9px}
.qz-opt{display:flex;align-items:center;width:100%;min-height:52px;padding:12px 16px;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);color:var(--ink-2);
  font:700 15px/1.35 var(--body);text-align:left;transition:background .16s,color .16s,border-color .16s}
.qz-opt:hover{border-color:var(--olive);background:rgba(76,90,56,.08)}
.qz-opt.sel{background:var(--olive);border-color:var(--olive);color:var(--chalk)}
.qz-f{display:flex;flex-direction:column;gap:10px}
.qz-f input{width:100%;min-height:54px;padding:14px 16px;border:1px solid var(--line-2);background:#fff;
  color:var(--ink);font:400 16px/1.4 var(--body)}
.qz-f input::placeholder{color:#8B836C}
.qz-f input:focus{outline:2px solid var(--olive);outline-offset:-2px;border-color:var(--olive)}
.qz-go{min-height:56px;background:var(--ink);color:var(--chalk);border:1px solid var(--ink);cursor:pointer;
  font:900 14px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.qz-go:hover{background:var(--olive);border-color:var(--olive)}
.qz-back{min-height:44px;background:none;border:0;color:var(--muted);cursor:pointer;
  font:700 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.qz-done h4{font-family:var(--disp);font-weight:400;font-size:22px;color:var(--ink);margin:0 0 10px;line-height:1.2}
.qz-done p{font-size:15px;color:var(--muted);line-height:1.65}
.qz-dots{display:flex;gap:7px;margin-top:auto;padding-top:20px}
.qz-dots i{width:100%;height:4px;background:var(--line);display:block}
.qz-dots i.on{background:var(--olive)}
.qz-note{font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.5}

/* ---------- the character work ledger ---------- */
.char-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.lead-p{font-size:18.5px;line-height:1.78;color:var(--ink-2);margin:22px 0 0}
.lead-p::first-letter{float:left;font-family:var(--disp);font-size:68px;line-height:.78;
  margin:6px 12px 0 0;color:var(--olive)}
.char-list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line-2)}
.char-list li{padding:20px 0;border-bottom:1px solid var(--line-2);font-size:15.5px;line-height:1.65;color:var(--muted)}
.char-list li b{display:block;font:700 16px/1.35 var(--body);color:var(--ink);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:5px}

/* job plates, framed like boards on a workshop wall */
.plates{display:grid;gap:16px}
.char-grid .plate-in{aspect-ratio:16/10}
.plate{background:var(--canvas-3);border:1px solid var(--ink);padding:9px;box-shadow:6px 6px 0 rgba(23,22,14,.16)}
.plate-in{border:1px solid var(--line-2);aspect-ratio:4/3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;background:var(--canvas-2);padding:18px;text-align:center}
.plate-in{position:relative;overflow:hidden}
/* HIS OWN badge as the placeholder ground, so an empty slot still reads as Proflo */
.plate-wm{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:66%;max-width:210px;opacity:.09;pointer-events:none}
.plate-in > b,.plate-in > span{position:relative;z-index:1}
.plate-play{position:relative;z-index:1;width:42px;height:42px;border:1px solid var(--olive);
  display:block;margin:0 auto 4px}
.plate-play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  border-left:12px solid var(--olive);border-top:8px solid transparent;border-bottom:8px solid transparent}
.plate svg{width:28px;height:28px;color:var(--olive);flex:none}
.plate b{font:900 12px/1.3 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
.plate span{font-size:12.5px;color:var(--muted);line-height:1.45}

/* ---------- the job book, services ---------- */
.sec-hd{max-width:760px;margin:0 0 54px}
.sec-hd h2{font-size:clamp(33px,4.4vw,56px);text-transform:uppercase;line-height:.98}
.sec-hd p{margin:20px 0 0;font-size:17.5px;line-height:1.72;color:var(--muted)}
.board .sec-hd p{color:var(--muted-ink)}
.book{border-top:3px double var(--ink)}
.entry{display:grid;grid-template-columns:96px 1fr 1.05fr;gap:34px;padding:38px 0;
  border-bottom:1px solid var(--line-2);align-items:start}
.entry-n{font-family:var(--disp);font-size:54px;line-height:.82;color:var(--canvas);
  -webkit-text-stroke:1px var(--olive);text-stroke:1px var(--olive)}
.entry h3{font-family:var(--disp);font-weight:400;font-size:26px;text-transform:uppercase;
  color:var(--ink);line-height:1.1;letter-spacing:.005em}
.entry h3 + p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--muted)}
.entry ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-2);padding-left:26px}
.entry ul li{position:relative;padding:8px 0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.entry ul li + li{border-top:1px dotted var(--line-2)}

/* ---------- the prep board ---------- */
.sec-hd p.q-lead,.q-lead{font-family:var(--disp);font-size:clamp(30px,4.4vw,54px);line-height:1.1;color:var(--chalk);
  text-transform:uppercase;margin:0;max-width:20ch}
.q-lead i{font-style:normal;color:var(--olive-p)}
.plist{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line-ink-2)}
.pitem{padding:32px 26px 30px 0;border-right:1px solid var(--line-ink)}
.pitem:last-child{border-right:0}
.pnum{display:block;font-family:var(--disp);font-size:44px;line-height:.9;color:transparent;
  -webkit-text-stroke:1px var(--olive-p);text-stroke:1px var(--olive-p);margin-bottom:16px}
.pitem h4{font:900 13px/1.4 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--olive-p);
  min-height:2.8em;margin-bottom:10px}
.pitem p{font-size:14.5px;line-height:1.65;color:var(--muted-ink)}

/* ---------- gallery + crew ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tm{text-align:center}
.tm-ph{border:1px solid var(--ink);background:var(--canvas-2);padding:9px;box-shadow:6px 6px 0 rgba(23,22,14,.16)}
.tm-ph-in{border:1px solid var(--line-2);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.tm-ph svg{width:44px;height:44px;color:var(--olive)}
.tm b{display:block;font-family:var(--disp);font-size:19px;text-transform:uppercase;color:var(--ink);margin-top:16px;line-height:1.1}
.tm span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;letter-spacing:.05em}

/* ---------- reviews, labelled ---------- */
.mocktag{display:inline-block;font:900 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--olive-d);border:1px solid var(--olive);padding:9px 13px;margin-bottom:22px}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{border:1px solid var(--line-2);background:var(--canvas-3);padding:28px 26px}
.rev p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0 0 18px}
.rev b{display:block;font:900 12px/1.3 var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
.rev span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---------- questions ---------- */
.faq{max-width:900px}
.fq{border-bottom:1px solid var(--line-2)}
.fq:first-of-type{border-top:3px double var(--ink)}
.fq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font:700 17px/1.45 var(--body);color:var(--ink);min-height:46px}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--disp);font-size:24px;color:var(--olive);line-height:1}
.fq[open] summary::after{content:"\2212"}
.fq p{padding:0 44px 26px 0;font-size:16px;line-height:1.75;color:var(--muted)}

/* ---------- closing board ---------- */

/* ---------- the closing enquiry form, 15 Sep 2026 ----------
   A second place to enquire without scrolling back to the hero. Paper docket on
   the dark closing board, matching the hero card, with his badge on top because
   every form we ask a visitor to fill carries the client's own mark. */
.enq{max-width:720px;margin:44px auto 0;background:var(--canvas-3);border:1px solid var(--ink);
  box-shadow:9px 9px 0 rgba(0,0,0,.42);padding:5px;text-align:left;position:relative}
.enq::before{content:"";position:absolute;inset:11px;border:1px solid var(--line-2);pointer-events:none}
.enq-hd{padding:24px 26px 18px;border-bottom:3px double var(--ink);text-align:center;position:relative;z-index:1}
.enq-hd img{height:104px;width:104px;margin:0 auto 12px}
.enq-hd b{display:block;font-family:var(--disp);font-size:21px;text-transform:uppercase;color:var(--ink);line-height:1.1}
.enq-hd span{display:block;font-size:13.5px;color:var(--muted);margin-top:7px;letter-spacing:.03em}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px 26px 6px;position:relative;z-index:1}
.enq-wide{grid-column:1 / -1}
.enq-f{display:block;min-width:0}
.enq-f > span{display:block;font:900 12px/1.3 var(--body);letter-spacing:.15em;text-transform:uppercase;
  color:var(--olive);margin-bottom:7px}
.enq-f input,.enq-f select,.enq-f textarea{width:100%;min-height:54px;padding:14px 16px;
  border:1px solid var(--line-2);background:#fff;color:var(--ink);font:400 16px/1.45 var(--body)}
.enq-f textarea{min-height:92px;resize:vertical}
.enq-f input::placeholder,.enq-f textarea::placeholder{color:#8B836C}
.enq-f input:focus,.enq-f select:focus,.enq-f textarea:focus{outline:2px solid var(--olive);outline-offset:-2px;border-color:var(--olive)}
.enq-go{display:block;width:calc(100% - 52px);margin:18px 26px 26px;min-height:58px;cursor:pointer;
  background:var(--ink);color:var(--chalk);border:1px solid var(--ink);position:relative;z-index:1;
  font:900 14px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.enq-go:hover{background:var(--olive);border-color:var(--olive)}
.enq-ok{margin:0 26px 26px;font-size:15px;line-height:1.65;color:var(--ink-2);position:relative;z-index:1}
.enq-ok[hidden]{display:none}

.cta-band{position:relative;background:var(--ink);color:var(--chalk-2);padding:104px 0;overflow:hidden;text-align:center}
.cta-band .ghost{font-size:clamp(150px,20vw,300px);left:50%;top:50%;transform:translate(-50%,-50%)}
.seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,86vw);opacity:.055;pointer-events:none;z-index:0}
.cta-band h2{font-size:clamp(33px,4.8vw,60px);text-transform:uppercase;line-height:1}
.cta-band p{max-width:58ch;margin:22px auto 0;font-size:17.5px;line-height:1.7;color:var(--muted-ink)}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.btn-solid,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 30px;
  font:900 14px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;border:1px solid}
.btn-solid{background:var(--olive);border-color:var(--olive-l);color:var(--chalk);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.btn-solid:hover{background:var(--olive-l);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line-ink-2);color:var(--chalk)}
.btn-ghost:hover{border-color:var(--chalk);background:rgba(245,240,225,.07)}

/* ---------- footer ---------- */
.ft{background:var(--ink-2);color:var(--muted-ink);padding:72px 0 30px;border-top:3px double var(--line-ink-2)}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
.ft .mark{height:72px;width:72px;margin-bottom:20px}
.ft p{font-size:14.5px;line-height:1.7;max-width:46ch}
.ft h5{font:900 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--olive-p);margin:0 0 18px}
.ft-grid a{display:block;color:var(--muted-ink);font-size:14.5px;padding:9px 0;min-height:42px;display:flex;align-items:center}
.ft-grid a:hover{color:var(--chalk)}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:52px;padding-top:24px;border-top:1px solid var(--line-ink)}
.ft-bot small{font-size:12.5px;color:var(--muted-ink)}
.byscalus{font:400 12.5px/1 var(--body);color:var(--muted-ink);display:inline-flex;align-items:center;min-height:44px}
.byscalus a{color:var(--olive-p);font-weight:700;display:inline-flex;align-items:center;min-height:44px;padding-left:4px}
.byscalus a:hover{color:var(--chalk)}

/* ---------- concept disclosure ---------- */
.disc{background:var(--canvas-2);border-top:1px solid var(--line-2);padding:26px 0 30px}
.disc .wrap{font-size:12.5px;line-height:1.7;color:var(--muted);max-width:940px}
.disc b{color:var(--ink);font-weight:900;letter-spacing:.04em}


/* the shared chat.css hardcodes a 999px pill and tight padding, and ignores
   --scq-radius for the fab. This block is emitted after it in the document, so
   it wins on source order. Styled to MATCH THE DOCK rather than as a cut plate,
   so the two pieces of floating furniture read as a pair. */
.scq-fab{border-radius:0!important;clip-path:none!important;
  background:var(--dk-sheet)!important;color:var(--dk-ink-on)!important;
  border:1px solid var(--dk-line)!important;
  backdrop-filter:blur(10px);
  padding:0 24px!important;min-height:52px!important;gap:12px!important;
  font-family:var(--body)!important;font-weight:700!important;font-size:14px!important;
  letter-spacing:.06em!important;text-transform:none!important;
  box-shadow:0 12px 30px rgba(0,0,0,.40)!important}
.scq-fab svg{width:19px!important;height:19px!important;color:var(--dk-accent)}

body.has-dock{padding-bottom:86px}
.dk-i.dk-chat{display:none}

/* =======================================================================
   PHONE STANDARD. Last block in the file so it wins the cascade.
   ======================================================================= */
@media(max-width:1023px){
  .scq-fab{display:none}
  .dk-i.dk-chat{display:inline-flex}
}

@media(max-width:1200px){
  .hm b{min-height:2.7em}
}

@media(max-width:1080px){
  .plist{grid-template-columns:repeat(2,1fr)}
  .pitem:nth-child(2){border-right:0}
  .pitem{border-bottom:1px solid var(--line-ink)}
  .entry{grid-template-columns:74px 1fr;gap:24px}
  .entry ul{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line-2);padding-left:0;padding-top:6px}
}

@media(max-width:960px){
  .nav{display:none}
  .hd-tel{display:inline-flex}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .hd-cta{display:none}
  .hero-grid,.char-grid{grid-template-columns:1fr;gap:40px}
  .hero-fig{min-height:0}
  .ft-grid{grid-template-columns:1fr 1fr;gap:34px}
  .ft-grid > :first-child{grid-column:1 / -1}
}

@media(max-width:820px){
  .grid3,.revs{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 34px)}
  .sec,.board.sec{padding:66px 0}
  .hero{padding:52px 0 64px}
  .cta-band{padding:70px 0}
  /* the double keyline is desktop jewellery. On a phone it landed 3px from the
     copy, which reads as a rule running through the text, so it comes off. The
     torn edges and the texture carry the character at this width. */
  .keyline{display:none}
  .h1{font-size:clamp(38px,11vw,50px)}
  .lede{font-size:17px}
  .sec-hd{margin-bottom:38px}
  .sec-hd p{font-size:16.5px}
  .hero-meta{display:block}
  .hm{padding:16px 0;border-right:0;border-bottom:1px solid var(--line-ink)}
  .hm:last-child{border-bottom:0}
  .hm b{min-height:0}
  .plist{grid-template-columns:1fr}
  .pitem{padding:26px 0;border-right:0;border-bottom:1px solid var(--line-ink)}
  .pitem:last-child{border-bottom:0}
  .pitem h4{min-height:0}
  .entry{grid-template-columns:1fr;gap:16px;padding:30px 0}
  .entry-n{font-size:40px}
  .grid3,.revs{grid-template-columns:1fr}
  .enq-grid{grid-template-columns:1fr;padding:20px 18px 4px}
  .enq-hd{padding:20px 18px 16px}
  .enq-hd img{height:88px;width:88px}
  .enq-go{width:calc(100% - 36px);margin:16px 18px 20px}
  .enq-ok{margin:0 18px 20px}
  .enq::before{inset:9px}
  .grid3 .plate-in{aspect-ratio:16/10}
  .plates{gap:14px}
  .ft-grid{grid-template-columns:1fr}
  .ft-grid > :first-child{grid-column:auto}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:6px}
  .lead-p::first-letter{font-size:56px}
  .docket{box-shadow:6px 6px 0 rgba(0,0,0,.45)}
  .dk-hd img{height:64px;width:64px}
  .dk-hd img.dk-mark{height:96px;width:96px}
  .board-sign{margin-bottom:22px;padding:4px}
  .bs-in{padding:22px 20px 20px}
  .bs-in::before{inset:9px}
  .bs-b{font-size:12px;letter-spacing:.2em}
  .hd-in{height:72px}
  .hd-logo{gap:10px}
  .hd-logo img{height:40px;width:40px}
  .hd-name{font-size:14.5px}
  .hd-cluster{gap:10px}
  .drawer{top:72px}
}

/* the 12px visible text floor and the 16px field rule, restated last */
@media(max-width:640px){
  .eyebrow,.mocktag,.plate b,.hm b,.pitem h4,.ft h5,.rev b{font-size:12px;letter-spacing:.14em}
  .qz-note,.disc .wrap,.ft-bot small,.byscalus,.tm span,.plate span,.rev span,.qz-h,.dk-hd span{font-size:12.5px}
  .qz-f input,.scq-f input,.scq-f textarea{font-size:16px}
}

/* =======================================================================
   TABLET AND FOLDABLE. Measured 15 Sep 2026 across iPad Pro 11 and 13 in both
   orientations and the iPhone Duo at 466 folded and 626 and 669 open.
   ======================================================================= */

/* The hero keyline sits at inset 26px while .wrap only takes a 22px gutter, so
   from 641px all the way to about 1224px the FRAME WAS DRAWN INSIDE THE TEXT
   COLUMN, four pixels in. It read as a rule running through the copy on every
   iPad width and on the Duo at 669. Give the hero its own wider gutter so the
   frame always has the text inside it, never across it. */
@media(min-width:641px){
  .hero .wrap{width:min(var(--wrap),calc(100% - 104px))}
}

/* The iPhone Duo open at 669 is a PHONE, not a tablet, but it sits above the
   640 phone block, so the hero meta stayed as three columns about 200px wide.
   Stack it anywhere the row would be cramped. */
@media(max-width:760px){
  .hero-meta{display:block}
  .hm{flex:none;padding:16px 0;border-right:0;border-bottom:1px solid var(--line-ink)}
  .hm:last-child{border-bottom:0}
  .hm b{min-height:0}
}
/* At 961 to about 1180 the nav, the Free Quote button and the wordmark all want
   the same bar, and the wordmark lost: it truncated to "PROFLO PAINT...".
   Tighten the cluster rather than letting the business name get cut. */
@media(min-width:961px) and (max-width:1180px){
  .hd-in{gap:14px}
  .hd-logo{gap:10px}
  .hd-name{font-size:16px}
  .nav{gap:16px}
  .nav a{font-size:13px;letter-spacing:.02em}
  .hd-cta{padding:0 15px;font-size:12px;letter-spacing:.08em}
}

/* Three meta columns need about 540px. The hero column is narrower than that on
   every iPad, so the row wrapped two plus one and read as a mistake. Stack it
   until there is genuinely room, which is the Apple spec row rule: a label that
   has to wrap is a label in the wrong place. */
@media(max-width:1240px){
  .hero-meta{display:block}
  .hm{flex:none;padding:16px 0;border-right:0;border-bottom:1px solid var(--line-ink)}
  .hm:last-child{border-bottom:0}
  .hm b{min-height:0}
}


/* real job photos from the client, 28 Sep 2026. A photo plate keeps the board
   frame and drops the badge placeholder; the caption sits under it like a label */
.plate.ph{margin:0}
.plate.ph .plate-in{padding:0;background:var(--canvas-2)}
.plate.ph picture,.plate.ph img{display:block;width:100%;height:100%}
.plate.ph img{object-fit:cover}
.plate.ph figcaption{font:900 12px/1.3 var(--body);text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink);padding:11px 2px 2px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.gallery .plate-in{aspect-ratio:3/4}
@media(max-width:960px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.gallery{gap:14px}.gallery .plate-in{aspect-ratio:4/5}}