/* Proflo Painters — Concept 8 "Saloon". Built 15 Sep 2026.

   Tim's direction on v8: think saloon, rustic western, camping, indie. No green
   anywhere. Old browns, charcoal, white and auburn. Fine textures on every
   section and background rather than flat colour. The hero lockup becomes a hand
   cut sign plate carrying his badge's own words. No scroll progress bar. The
   owner's first name comes out of the customer facing copy.

   Gianni's own words from the 11 Sep call still hold: back in time, a bit rustic,
   country rather than city, black and white off his badge, and no reds. Auburn is
   a dark burnt leather brown rather than the bright terracotta he rejected in
   concepts 04 and 05, so it reads as rust and timber, not as a red.

   Square corners throughout, which keeps the house concentric corner rule
   trivially satisfied. Lato is kept from his real stylesheet as the quiet face. */

/* 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{
  /* charcoal, warm rather than blue black */
  --ink:#211C16; --ink-2:#2D2720; --ink-3:#3A332A; --ink-4:#4A4136;

  /* white */
  --chalk:#F7F3EA; --chalk-2:#EBE3D5;

  /* old canvas and kraft, the camping half of the brief */
  --canvas:#E3D8C4; --canvas-2:#D6C9B1; --canvas-3:#F0E9DA;

  /* old browns, the structural colour: rules, keylines, frames, numerals */
  --brown:#6B513A; --brown-d:#4A3627; --brown-l:#8A6E51; --brown-p:#A78A6A;

  /* auburn, the ONE accent. Burnt leather, not a red. */
  --aub:#963D1E; --aub-d:#742D14; --aub-l:#B45A33; --aub-p:#CF7E4F;

  --muted:#5E5240; --muted-ink:#BAAF9B;
  --line:#C2B197; --line-2:#A89273;
  --line-ink:rgba(247,243,234,.19); --line-ink-2:rgba(247,243,234,.34);

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

  /* hand cut edges, generated once so every plate is the same cut */
  --cut-plate:polygon(0.00% 2.32%,5.56% 2.48%,11.11% 2.80%,16.67% 1.61%,22.22% 4.37%,27.78% 4.93%,33.33% 1.66%,38.89% 4.38%,44.44% 1.74%,50.00% 2.21%,55.56% 4.68%,61.11% 2.45%,66.67% 2.84%,72.22% 2.82%,77.78% 3.52%,83.33% 4.05%,88.89% 2.98%,94.44% 3.35%,100.00% 4.16%,98.81% 16.67%,99.27% 33.33%,98.24% 50.00%,98.18% 66.67%,99.43% 83.33%,98.97% 100.00%,94.44% 98.17%,88.89% 96.23%,83.33% 98.49%,77.78% 97.16%,72.22% 94.74%,66.67% 95.24%,61.11% 95.58%,55.56% 94.55%,50.00% 98.51%,44.44% 97.15%,38.89% 95.38%,33.33% 98.57%,27.78% 97.79%,22.22% 95.01%,16.67% 97.95%,11.11% 97.49%,5.56% 94.96%,0.00% 95.48%,2.10% 83.33%,1.74% 66.67%,0.77% 50.00%,1.30% 33.33%,1.52% 16.67%);
  --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%);

  /* shared chat widget tokens, named exactly as chat.css reads them */
  --scq-sheet:#F0E9DA; --scq-ink:#211C16; --scq-accent:#963D1E;
  --scq-accent-ink:#F7F3EA; --scq-radius:0px;
  --scq-font-body:'Lato',Helvetica,Arial,sans-serif;
  --scq-font-display:'Bevan',Georgia,serif;
  --scq-muted:#5E5240; --scq-line:#C2B197;
  --scq-bot:#DED2BA; --scq-you:#963D1E; --scq-you-ink:#F7F3EA;

  /* shared dock tokens */
  --dk-sheet:rgba(33,28,22,.95); --dk-line:rgba(247,243,234,.18);
  --dk-ink:#BAAF9B; --dk-ink-on:#F7F3EA; --dk-accent:#CF7E4F; --dk-accent-ink:#211C16;
  --dk-pill:rgba(247,243,234,.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);
  /* fine surveyor's grid over kraft, then a heavier grid, then grain.
     Three passes so it reads as a real paper surface rather than as noise. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 .5h14M.5 0v14' stroke='%236B513A' stroke-opacity='.17' stroke-width='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpath d='M0 .5h70M.5 0v70' stroke='%236B513A' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

/* every surface carries its own weave, so a section change reads as a material change */
.sec.canvas-2{
  background-color:var(--canvas-2);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M0 .5h11M.5 0v11' stroke='%234A3627' stroke-opacity='.14' stroke-width='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55'%3E%3Cpath d='M0 .5h55M.5 0v55' stroke='%234A3627' stroke-opacity='.17' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23m)' opacity='.07'/%3E%3C/svg%3E");
}

/* the dark boards get a fine timber grain, camp table rather than flat black */
.board,.hero,.cta-band{
  background-color:var(--ink);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M0 .5h13M.5 0v13' stroke='%23F7F3EA' stroke-opacity='.045' stroke-width='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='65'%3E%3Cpath d='M0 .5h65M.5 0v65' stroke='%23F7F3EA' stroke-opacity='.05' 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='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23d)' opacity='.10'/%3E%3C/svg%3E");
}

/* the paper cards get a fine laid texture of their own */
.docket,.rev,.plate,.tm-ph{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 .5h9M.5 0v9' stroke='%236B513A' stroke-opacity='.10' stroke-width='.5'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block;height:auto}
a{color:var(--aub-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(--aub);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(--aub-p)}
.on-ink .eyebrow::before,.on-ink .eyebrow::after,.eyebrow.lt::before,.eyebrow.lt::after{border-color:var(--line-ink-2)}


/* ---------- the hero sign plate: his badge's own words, hand cut ----------
   A rectangle whose edges are an irregular clip path, so it reads as a cut
   timber sign rather than as a div. The keyline lives on an inner element,
   because a clip path would slice a border off the outer one. */
.sign{position:relative;display:inline-block;margin:0 0 28px;background:var(--aub);
  clip-path:var(--cut-plate);padding:3px}
.sign-in{border:1px solid rgba(247,243,234,.42);padding:15px 30px 14px;text-align:center}
.sign-a{display:block;font-family:var(--disp);font-size:20px;line-height:1.05;
  color:var(--chalk);text-transform:uppercase;letter-spacing:.035em}
.sign-r{display:flex;align-items:center;justify-content:center;gap:9px;margin:9px 0 8px}
.sign-r::before,.sign-r::after{content:"";height:1px;width:26px;background:rgba(247,243,234,.5)}
.sign-r i{width:5px;height:5px;background:rgba(247,243,234,.75);transform:rotate(45deg);display:block}
.sign-b{display:block;font:900 12px/1.3 var(--body);letter-spacing:.3em;
  text-transform:uppercase;color:var(--chalk)}
.sign-c{display:block;font:700 12px/1.3 var(--body);letter-spacing:.24em;
  text-transform:uppercase;color:rgba(247,243,234,.78);margin-top:6px}

/* ---------- 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(--aub-p)}
.hd-cta{display:inline-flex;align-items:center;min-height:46px;background:var(--aub);color:var(--chalk);
  font:900 13px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;padding:0 20px;
  border:1px solid var(--aub-l);box-shadow:3px 3px 0 rgba(0,0,0,.4)}
.hd-cta:hover{background:var(--aub-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(--aub);
  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(--aub);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-color: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}


/* ---------- hero, the big painted board ---------- */
.hero{position:relative;background-color: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(--aub-p);display:block}
.brush{display:block;width:min(340px,86%);height:22px;margin:22px 0 26px;color:var(--aub-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(--aub-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-color: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 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(--aub);background:rgba(76,90,56,.08)}
.qz-opt.sel{background:var(--aub);border-color:var(--aub);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(--aub);outline-offset:-2px;border-color:var(--aub)}
.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(--aub);border-color:var(--aub)}
.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(--aub)}
.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(--aub)}
.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-color: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-color: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(--aub);
  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(--aub);border-top:8px solid transparent;border-bottom:8px solid transparent}
.plate svg{width:28px;height:28px;color:var(--aub);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(--aub);text-stroke:1px var(--aub)}
.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(--aub-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(--aub-p);text-stroke:1px var(--aub-p);margin-bottom:16px}
.pitem h4{font:900 13px/1.4 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--aub-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-color: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(--aub)}
.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(--aub-d);border:1px solid var(--aub);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-color: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(--aub);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 ---------- */
.cta-band{position:relative;background-color: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(--aub);border-color:var(--aub-l);color:var(--chalk);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.btn-solid:hover{background:var(--aub-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(--aub-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(--aub-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. This block is
   emitted after it in the document, so it wins on source order. */
.scq-fab{border-radius:0!important;clip-path:var(--cut-fab);
  padding:0 26px 0 24px!important;min-height:56px!important;gap:13px!important;
  font-family:var(--body)!important;font-weight:900!important;font-size:13px!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  box-shadow:0 10px 26px rgba(0,0,0,.34)!important}
.scq-fab svg{width:20px!important;height:20px!important}

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}
  .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}
  .sign{margin-bottom:22px}
  .sign-in{padding:13px 20px 12px}
  .sign-a{font-size:17px}
  .sign-b,.sign-c{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}
}