/* Proflo Painters — Concept 6 "Old School". Rustic, country, character.
   Rebuilt 11 Sep 2026 from the Google Meet call with Gianni Contebardo.

   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 ... I want that sort of vibe."
     "My logo is very black and white ... I sort of want to keep that sort of
      black and white maybe with like army greens and things like that."
     "I don't like the reds. I don't like seeing anything like that."
     "I just want something different ... there's no personality."
     "Old Victorian home ... things with character."

   So: black and white spine taken straight off his badge, aged lime washed
   paper instead of screen white, ONE accent and it is army green, Victorian
   didone display type, double rules, arched panels. No reds, no gold, no
   gradients, no soft modern rounded boxes. This file replaces the warm and the
   monochrome layers entirely rather than overriding them. */

:root{
  /* the spine, off his black and white badge */
  --ink:#14140f; --ink-2:#38372e; --ink-3:#55534657;
  --grey:#6d6a59; --grey-2:#8b8776;

  /* aged paper, not screen white */
  --paper:#f3efe4; --paper-2:#e9e3d3; --paper-3:#fbf9f3; --white:#fffefb;

  /* the one accent he offered, army green */
  --olive:#4a5340; --olive-d:#333a2b; --olive-l:#6d7659; --olive-w:#9aa287;

  --line:#d5ccb7; --line-2:#c2b89f; --rule:#1d1c15;

  --disp:'Bodoni Moda',Didot,'Playfair Display',Georgia,serif;
  --body:'Lora',Georgia,'Times New Roman',serif;
  --wrap:1180px; --r:0px;

  /* shared chat widget tokens */
  --scq-sheet:#fbf9f3; --scq-ink:#14140f; --scq-accent:#4a5340; --scq-accent-ink:#fffefb;
  --scq-radius:0px; --scq-font:'Lora',Georgia,serif; --scq-font-head:'Bodoni Moda',Didot,serif;
  --scq-muted:#6d6a59; --scq-line:#d5ccb7; --scq-bubble:#eae4d4;

  /* shared dock tokens */
  --dk-sheet:rgba(20,20,15,.93); --dk-line:rgba(255,255,255,.16);
  --dk-ink:#bdb9a6; --dk-ink-on:#fffefb; --dk-accent:#9aa287; --dk-accent-ink:#14140f;
  --dk-pill:rgba(255,255,255,.10); --dk-radius:0px; --dk-font:'Lora',Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink-2);font:400 17px/1.78 var(--body);overflow-x:hidden;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:var(--olive-d);text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:600;line-height:1.12;margin:0;color:var(--ink);letter-spacing:-.005em}
.wrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto}

/* letterpressed trade label, the old school small caps rule */
.eyebrow{
  font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--olive);margin:0 0 18px;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";flex:1;height:3px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}

/* ---------- header, a painted signboard ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(243,239,228,.94);backdrop-filter:blur(12px);
  border-bottom:3px double var(--rule)}
.hd-in{display:flex;align-items:center;gap:22px;height:80px}
.hd-logo{display:flex;align-items:center;gap:13px;margin-right:auto}
.hd-logo img{height:50px}
.hd-name{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--ink);line-height:1.1;letter-spacing:.01em}
.nav{display:flex;gap:28px}
.nav a{font-family:var(--body);font-weight:500;font-size:15px;color:var(--ink-2)}
.nav a:hover{color:var(--olive-d);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.hd-cta{display:inline-flex;align-items:center;background:var(--ink);color:var(--paper-3);
  font:600 14px var(--body);letter-spacing:.06em;padding:14px 22px;border-radius:0;border:1px solid var(--ink)}
.hd-cta:hover{background:var(--olive-d);border-color:var(--olive-d)}
.hd-tel{display:none;width:48px;height:48px;border:1px solid var(--rule);border-radius:0;
  align-items:center;justify-content:center;color:var(--ink)}
.hd-tel svg{width:20px;height:20px}
.burger{display:none;width:48px;height:48px;border:1px solid var(--rule);background:none;border-radius:0;
  color:var(--ink);font-size:20px;align-items:center;justify-content:center;cursor:pointer}
.drawer{display:none;position:fixed;inset:80px 0 0;background:var(--paper);z-index:59;padding:26px 22px;overflow-y:auto}
.drawer.on{display:block}
.drawer a{display:block;font-family:var(--disp);font-weight:600;font-size:23px;color:var(--ink);
  padding:17px 0;border-bottom:1px solid var(--line)}
.drawer .dcall{margin-top:24px;background:var(--ink);color:var(--paper-3);text-align:center;
  border-radius:0;border:0;padding:18px;font-family:var(--body);font-weight:600;font-size:16px;letter-spacing:.05em}

/* ---------- hero ---------- */
.hero{padding:110px 0 96px;background:transparent;position:relative}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 520px at 84% 6%,rgba(74,83,64,.09),transparent 66%)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center;position:relative}
.hero-grid>*{min-width:0}
.h1{font-size:clamp(40px,5.4vw,70px);max-width:13em;letter-spacing:-.012em}
.h1 i{font-style:italic;color:var(--olive-d)}
.h1::after{content:"";display:block;width:210px;height:7px;margin-top:26px;
  border-top:2px solid var(--rule);border-bottom:4px solid var(--rule)}
.hero p.lede{font-size:19px;color:var(--ink-2);margin:26px 0 0;max-width:50ch}
.hero-meta{display:flex;gap:0;margin-top:36px;flex-wrap:wrap;border-top:1px solid var(--line-2)}
.hm{padding:18px 26px 0 0;margin-right:26px;border-right:1px solid var(--line-2)}
.hm:last-child{border-right:0;margin-right:0;padding-right:0}
.hm b{display:block;font-family:var(--disp);font-size:18px;color:var(--ink)}
.hm span{font-size:14px;color:var(--grey)}

/* the quote docket, a printed trade form rather than a glass card */
.hero-fig{min-height:530px;display:flex;align-items:center}
.card{width:100%;background:var(--paper-3);border:1px solid var(--rule);border-radius:0;
  box-shadow:10px 10px 0 rgba(20,20,15,.10);overflow:hidden;position:relative}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  border-top:1px solid var(--rule);background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px);opacity:.28}
.card-hd{text-align:center;padding:26px 26px 20px;background:var(--white);border-bottom:3px double var(--rule)}
.card-hd img{height:86px;margin:0 auto 12px}
.card-hd b{display:block;font-family:var(--disp);font-weight:600;font-size:21px;color:var(--ink)}
.card-hd span{font-size:13.5px;color:var(--grey)}
.qz{padding:24px 26px 26px}
.qz-step{display:none}.qz-step.on{display:block}
.qz-q{font-family:var(--disp);font-weight:600;font-size:21px;color:var(--ink);margin:0 0 4px}
.qz-h{font-size:14px;color:var(--grey);margin:0 0 16px}
.qz-opts{display:grid;gap:9px}
.qz-opt{width:100%;text-align:left;background:var(--white);border:1px solid var(--line-2);color:var(--ink-2);
  font:500 16px/1.4 var(--body);padding:15px 16px;border-radius:0;cursor:pointer;transition:.16s}
.qz-opt:hover,.qz-opt.sel{border-color:var(--olive);background:var(--paper-2);color:var(--ink);box-shadow:inset 3px 0 0 var(--olive)}
.qz-f{display:grid;gap:10px}
.qz-f input{width:100%;background:var(--white);border:1px solid var(--line-2);border-radius:0;
  color:var(--ink);font:400 16px/1.4 var(--body);padding:15px}
.qz-f input:focus{outline:2px solid var(--olive);outline-offset:1px}
.qz-go{width:100%;background:var(--ink);color:var(--paper-3);border:0;border-radius:0;
  font:600 17px var(--body);letter-spacing:.05em;padding:17px;cursor:pointer}
.qz-go:hover{background:var(--olive-d)}
.qz-back{background:none;border:0;color:var(--grey);font:500 14px var(--body);cursor:pointer;padding:12px 4px;min-height:44px}
.qz-note{font-size:12.5px;color:var(--grey);text-align:center;margin:14px 0 0;line-height:1.55}
.qz-dots{display:flex;gap:6px;justify-content:center;margin:16px 0 0}
.qz-dots i{width:24px;height:3px;border-radius:0;background:var(--line-2)}
.qz-dots i.on{background:var(--olive)}
.qz-done{text-align:center}
.qz-done h4{font-size:23px;margin:0 0 8px}
.qz-done p{font-size:15px;color:var(--grey);margin:0}

/* ---------- sections ---------- */
.sec{padding:104px 0}
.sec-hd{max-width:760px;margin:0 0 52px}
.sec-hd h2{font-size:clamp(31px,3.9vw,50px)}
.sec-hd p{color:var(--ink-2);font-size:18px;margin:20px 0 0}
.band{background:var(--paper-2)}
.dark{background:var(--ink);color:#bdb9a6}
.dark h2,.dark h3,.dark h4{color:var(--paper-3)}
.dark .eyebrow{color:var(--olive-w)}
.dark .eyebrow::after{border-color:rgba(255,255,255,.2)}
.dark .sec-hd p{color:#a19d8c}

/* ---------- character work, the section that replaced the colour tool ---------- */
.char-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.char-grid>*{min-width:0}
.arch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.arch{aspect-ratio:3/4;min-width:0;border:1px solid var(--rule);border-radius:180px 180px 0 0;
  background:var(--paper-3);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:8px;padding:24px 18px 26px;text-align:center;color:var(--grey)}
.arch svg{width:30px;height:30px;color:var(--line-2);margin-bottom:auto;margin-top:34%}
.arch b{font-family:var(--disp);font-size:16px;color:var(--ink)}
.arch span{font-size:12.5px;line-height:1.5}
.char-list{margin:26px 0 0;padding:0;list-style:none}
.char-list li{padding:16px 0 16px 30px;position:relative;border-bottom:1px solid var(--line);font-size:16.5px;color:var(--ink-2)}
.char-list li::before{content:"";position:absolute;left:0;top:26px;width:14px;height:3px;
  border-top:1px solid var(--olive);border-bottom:1px solid var(--olive)}
.char-list li b{font-family:var(--disp);font-weight:600;color:var(--ink);display:block;font-size:18px;margin-bottom:2px}

/* ---------- services, a ruled ledger ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.svc{background:var(--paper-3);padding:40px 32px 36px;border-right:1px solid var(--rule)}
.svc:last-child{border-right:0}
.svc h3{font-size:25px;margin:0 0 12px}
.svc p{margin:0;color:var(--ink-2);font-size:16px}
.svc ul{margin:18px 0 0;padding:0;list-style:none;color:var(--grey);font-size:15px}
.svc li{padding:7px 0 7px 22px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:16px;width:11px;height:1px;background:var(--olive)}
.svc-n{font-family:var(--disp);font-size:40px;color:var(--line-2);line-height:1;display:block;margin-bottom:16px}

/* ---------- the prep band ---------- */
.plist{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.pitem{padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.pitem h4{font-size:21px;margin:0 0 8px}
.pitem p{margin:0;color:#a19d8c;font-size:16px}
.pnum{font-family:var(--disp);font-size:15px;color:var(--olive-w);letter-spacing:.18em;display:block;margin-bottom:12px}
.q-lead{font-family:var(--disp);font-weight:600;font-size:clamp(28px,3.5vw,42px);line-height:1.2;
  color:var(--paper-3);max-width:18ch;margin:0}
.q-lead i{font-style:italic;color:var(--olive-w)}

/* ---------- work ---------- */
.workg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wk{aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:0;background:var(--paper-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  color:var(--grey);text-align:center;padding:22px;position:relative}
.wk::before{content:"";position:absolute;inset:9px;border:1px solid var(--line);pointer-events:none}
.wk b{font-family:var(--disp);font-size:17px;color:var(--ink)}
.wk span{font-size:13px;line-height:1.5}
.wk svg{width:32px;height:32px;color:var(--line-2)}

/* ---------- the crew ---------- */
.teamg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tm{border:1px solid var(--line-2);background:var(--paper-3);padding:0 0 24px;text-align:center}
.tm-ph{aspect-ratio:1/1;border-bottom:1px solid var(--line-2);display:flex;align-items:center;
  justify-content:center;background:var(--paper-2);color:var(--line-2)}
.tm-ph svg{width:40px;height:40px}
.tm b{display:block;font-family:var(--disp);font-size:19px;color:var(--ink);margin:22px 0 4px}
.tm span{font-size:13.5px;color:var(--grey)}

/* ---------- reviews ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{background:var(--paper-3);border:1px solid var(--line-2);border-radius:0;padding:30px 28px}
.rev p{margin:0 0 18px;color:var(--ink-2);font-size:16.5px;font-family:var(--disp);font-style:italic}
.rev b{font-size:14.5px;color:var(--ink);display:block;font-family:var(--body)}
.rev span{font-size:13px;color:var(--grey)}
.mocktag{display:inline-block;background:var(--white);border:1px solid var(--rule);color:var(--ink);
  font:600 11.5px var(--body);letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;
  border-radius:0;margin:0 0 20px}

/* ---------- questions ---------- */
.faq{max-width:880px}
.fq{border-bottom:1px solid var(--line-2)}
.fq summary{cursor:pointer;list-style:none;padding:24px 46px 24px 0;font:600 20px var(--disp);
  color:var(--ink);position:relative}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";position:absolute;right:6px;top:22px;font-size:26px;color:var(--olive);font-family:var(--body)}
.fq[open] summary::after{content:"\2212"}
.fq p{margin:0 0 26px;color:var(--ink-2);font-size:16.5px}

/* ---------- closing band ---------- */
.cta-band{background:var(--ink);padding:92px 0;border-top:3px double var(--olive-l)}
.cta-band h2{color:var(--paper-3);font-size:clamp(31px,4vw,50px)}
.cta-band p{color:#a19d8c;font-size:18.5px;margin:20px 0 34px;max-width:56ch}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-gold{display:inline-flex;align-items:center;background:var(--paper-3);color:var(--ink);
  font:600 17px var(--body);letter-spacing:.04em;padding:18px 30px;border-radius:0;border:1px solid var(--paper-3)}
.btn-gold:hover{background:var(--olive-w);border-color:var(--olive-w)}
.btn-ghost{display:inline-flex;align-items:center;border:1px solid var(--olive-w);color:var(--paper-3);
  font:600 17px var(--body);letter-spacing:.04em;padding:17px 28px;border-radius:0}
.btn-ghost:hover{background:var(--olive-w);color:var(--ink)}

/* ---------- footer ---------- */
.ft{background:#100f0b;padding:70px 0 0}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:46px;padding-bottom:46px}
.ft img.mark{height:74px;margin:0 0 18px}
.ft p{color:#8a8778;font-size:15px;margin:0}
.ft h5{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--olive-w);margin:0 0 18px}
.ft a{display:block;color:#b0ad9e;font-size:15.5px;padding:6px 0}
.ft a:hover{color:var(--paper-3)}
.ft-bot{border-top:1px solid #2b2a23;padding:24px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;align-items:center}
.ft-bot small{color:#7a776a;font-size:13.5px}
.byscalus{color:#7a776a;font-size:13.5px}
.byscalus a{display:inline;color:var(--olive-w);font-weight:700}
.disc{background:var(--paper-2);color:var(--grey);font-size:13px;line-height:1.7;padding:22px 0 32px}
.disc b{color:var(--ink)}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(20px);filter:blur(4px);transition:opacity .8s ease,transform .8s ease,filter .8s ease}
.rv.in{opacity:1;transform:none;filter:none}
.prog{position:fixed;top:0;left:0;height:3px;background:var(--olive);z-index:99;width:0}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- responsive ---------- */
@media(max-width:1023px){
  .nav,.hd-cta{display:none}.burger{display:flex}.hd-tel{display:inline-flex}
  .hero-grid,.char-grid{grid-template-columns:1fr;gap:40px}
  .svcs{grid-template-columns:1fr 1fr}
  .svc:nth-child(2){border-right:0}
  .svc:nth-child(1),.svc:nth-child(2){border-bottom:1px solid var(--rule)}
  .workg,.revs,.teamg{grid-template-columns:1fr 1fr}
  .plist,.ft-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .wrap{width:calc(100% - 34px)}
  .sec{padding:64px 0}
  .hd-in{height:66px;gap:12px}.hd-logo img{height:42px}.hd-name{font-size:17px}
  .drawer{inset:66px 0 0}
  .hero{padding:120px 0 60px}
  .hero p.lede{font-size:17.5px}
  .hero-fig{min-height:450px}
  .card-hd img{height:70px}
  .hero-meta{flex-direction:column}
  .hm{border-right:0;margin-right:0;padding:14px 0 0;border-bottom:1px solid var(--line)}
  .hm:last-child{border-bottom:0}
  .svcs,.workg,.revs,.teamg,.plist,.ft-grid{grid-template-columns:1fr}
  .svc{border-right:0;border-bottom:1px solid var(--rule)}
  .svc:last-child{border-bottom:0}
  .arch-row{grid-template-columns:1fr 1fr;gap:12px}
  .arch{aspect-ratio:3/4;border-radius:120px 120px 0 0;padding:20px 12px 22px}
  .arch svg{margin-top:26%}
  .cta-band{padding:66px 0}
  .btn-row{flex-direction:column}.btn-gold,.btn-ghost{justify-content:center}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:8px}
  .eyebrow,.qz-note,.rev span,.ft-bot small,.byscalus,.disc,.wk span,.mocktag,.arch span,.tm span{font-size:12.5px}
  .qz-f input,.qz-opt{font-size:16px}
}

/* anchored sections must clear the sticky header on a native jump */
section[id],main[id]{scroll-margin-top:88px}
@media(max-width:640px){section[id],main[id]{scroll-margin-top:72px}.wk{aspect-ratio:3/2}}

/* ---------------------------------------------------------------------------
   HIS OWN BADGE AS THE PHOTO SLOT GROUND, added 15 Sep 2026.
   Gianni uploaded five files with the onboarding form and every one of them is
   a logo variant, so his engraved badge is the ONLY real image asset we hold.
   Rather than leave the empty photo slots as grey boxes with a generic glyph,
   the badge sits behind each one as a faint watermark. An unfilled slot then
   still reads as Proflo. The vector is used, not the PNG, so it stays crisp.
   --------------------------------------------------------------------------- */
.arch,.wk,.tm-ph{position:relative;overflow:hidden}
.slot-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:70%;max-width:210px;height:auto;opacity:.09;pointer-events:none;z-index:0}
.arch .slot-wm{top:54%;width:76%}
.tm-ph .slot-wm{width:62%;opacity:.12}
.arch > b,.arch > span,.wk > b,.wk > span{position:relative;z-index:1}
.slot-play{position:relative;z-index:1;width:40px;height:40px;border:1px solid var(--olive);
  display:block;margin:0 auto 6px}
.slot-play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  border-left:11px solid var(--olive);border-top:7px solid transparent;border-bottom:7px solid transparent}
/* the marks are vector now, so pin both axes */
.hd-logo img{width:50px}
.card-hd img{width:86px}
.ft img.mark{width:74px}
@media(max-width:640px){
  .hd-logo img{width:42px;height:42px}
  .card-hd img{width:72px;height:72px}
}
body.noanim .rv{opacity:1;transform:none;transition:none}