/*
Theme Name:   Sai Building Services
Theme URI:    https://goodbuddyai.com
Description:  GeneratePress child theme for Sai Building Services Ltd (Hamilton, Waikato).
              Self-contained: no page builder, no ACF, no SEO plugin. Landing page
              templates, schema and meta are handled by the theme itself.
              To clone for another trade client, edit inc/client-config.php and
              replace the files in images/.
Author:       Service Gecko
Template:     generatepress
Version:      1.13.0
Text Domain:  sai-building-services
*/

/* ============================================================
   DESIGN TOKENS
   Palette from Avi's business card (burnt orange) and the job
   photos: stained timber, paddock green, overcast plaster white.
   ============================================================ */
:root{
  --sai-ink:#1A1714;
  --sai-ink-2:#574E45;
  --sai-ink-3:#8A8078;
  --sai-surface:#FBFAF8;
  --sai-surface-2:#F1EDE7;
  --sai-line:#DED8CF;
  --sai-rust:#B4491A;
  --sai-rust-dk:#8E3712;
  --sai-paddock:#31463A;

  --sai-display:"Barlow Condensed","Avenir Next Condensed","Archivo Narrow","Arial Narrow","Helvetica Neue",sans-serif;
  --sai-body:"Avenir Next","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sai-mono:"SFMono-Regular","SF Mono",Menlo,Consolas,monospace;

  --sai-wrap:1180px;
}

/* ============================================================
   SAI BUILDING SERVICES — Kitchen LP
   Palette from Avi's business card (burnt orange) + job photos
   (stained timber, paddock green, overcast plaster white)
   ============================================================ */
.sai-lp, .sai-lp *{box-sizing:border-box}
.sai-lp{-webkit-text-size-adjust:100%}
.sai-lp{margin:0;background:var(--sai-surface);color:var(--sai-ink);
  font-family:var(--sai-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;}
.sai-lp img{max-width:100%;display:block}
.sai-lp a{color:inherit}
.sai-lp .wrap{max-width:var(--sai-wrap);margin:0 auto;padding:0 22px}
.sai-lp h1,.sai-lp h2,.sai-lp h3,.sai-lp .dsp{font-family:var(--sai-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.005em;line-height:.95;
  text-wrap:balance;
  margin:0;}
.sai-lp h1{font-size:clamp(2.6rem,6.2vw,4.5rem)}
.sai-lp h2{font-size:clamp(2rem,4.3vw,3.1rem)}
.sai-lp h3{font-size:1.35rem;letter-spacing:.01em}
.sai-lp p{margin:0 0 1em}
.sai-lp .lede{font-size:1.19rem;line-height:1.52;color:var(--sai-ink-2)}
.sai-lp .eyebrow{font-family:var(--sai-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sai-rust);margin:0 0 18px;font-weight:600;}
.sai-lp .eyebrow--pale{color:rgba(255,255,255,.62)}

/* ---- tape-measure rule (signature element) ---- */
.sai-lp .tape{height:20px;border-top:2px solid var(--sai-ink);position:relative;overflow:hidden}
.sai-lp .tape::after{content:"";position:absolute;inset:0 0 auto 0;height:9px;
  background-image:repeating-linear-gradient(to right,var(--sai-ink) 0 1px,transparent 1px 20px);}
.sai-lp .tape--lg::after{height:15px;background-image:repeating-linear-gradient(to right,var(--sai-ink) 0 1.5px,transparent 1.5px 40px)}
.sai-lp .tape--pale{border-top-color:rgba(255,255,255,.4)}
.sai-lp .tape--pale::after{background-image:repeating-linear-gradient(to right,rgba(255,255,255,.4) 0 1px,transparent 1px 20px)}

/* ---- buttons ---- */
.sai-lp .btn{display:inline-block;background:var(--sai-rust);color:#fff;text-decoration:none;
  font-family:var(--sai-display);text-transform:uppercase;font-weight:700;
  font-size:1.16rem;letter-spacing:.03em;
  padding:17px 30px;border:0;cursor:pointer;width:100%;
  transition:background .15s ease;}
.sai-lp .btn:hover{background:var(--sai-rust-dk)}
.sai-lp .btn--wide{max-width:380px}

/* ============ HEADER ============ */
.sai-lp header{position:sticky;top:0;z-index:60;background:var(--sai-surface);
  border-bottom:1px solid var(--sai-line);}
.sai-lp .hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:13px;padding-bottom:13px}
.sai-lp .logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.sai-lp .logo .mark{width:30px;height:30px;background:var(--sai-rust);flex:none;
  clip-path:polygon(0 22%,58% 22%,58% 0,100% 50%,58% 100%,58% 78%,0 78%);}
.sai-lp .logo b{font-family:var(--sai-display);font-size:1.16rem;letter-spacing:.02em;line-height:1;display:block}
.sai-lp .logo span{font-family:var(--sai-mono);font-size:.6rem;letter-spacing:.15em;color:var(--sai-ink-3);text-transform:uppercase}
.sai-lp .hd-r{display:flex;align-items:center;gap:22px}
.sai-lp .tel{font-family:var(--sai-mono);font-weight:600;font-size:1.02rem;text-decoration:none;white-space:nowrap}
.sai-lp .tel small{display:block;font-size:.6rem;letter-spacing:.14em;color:var(--sai-ink-3);text-transform:uppercase;font-weight:400}
.sai-lp .hd .btn{width:auto;padding:12px 22px;font-size:1rem}
@media(max-width:860px){
.sai-lp .hd .btn{display:none}
}

/* ============ HERO ============ */
.sai-lp .hero{padding:56px 0 60px;border-bottom:1px solid var(--sai-line)}
.sai-lp .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:0 56px;align-items:start}
.sai-lp .hero-copy{grid-column:1;grid-row:1}
.sai-lp .formblock{grid-column:2;grid-row:1 / span 2}
.sai-lp .hero-ticks{grid-column:1;grid-row:2;margin-top:26px}
.sai-lp .hero h1{margin-bottom:22px}
.sai-lp .hero h1 em{font-style:normal;color:var(--sai-rust);display:block}
.sai-lp .ticks{list-style:none;margin:26px 0 0;padding:0}
.sai-lp .ticks li{position:relative;padding:11px 0 11px 34px;border-top:1px solid var(--sai-line);
  font-size:1.02rem;color:var(--sai-ink-2);}
.sai-lp .ticks li:last-child{border-bottom:1px solid var(--sai-line)}
.sai-lp .ticks li::before{content:"";position:absolute;left:2px;top:19px;width:15px;height:8px;
  border-left:2.5px solid var(--sai-rust);border-bottom:2.5px solid var(--sai-rust);
  transform:rotate(-45deg);}
.sai-lp .ticks b{color:var(--sai-ink);font-weight:700}

/* ---- form card ---- */
.sai-lp .formcard{background:#fff;border:2px solid var(--sai-ink);padding:0}
.sai-lp .formblock h2{font-size:1.85rem;margin-bottom:6px}
.sai-lp .formblock .sub{font-size:.94rem;color:var(--sai-ink-2);margin-bottom:16px}
.sai-lp label{display:block;font-family:var(--sai-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sai-ink-2);margin:0 0 6px;font-weight:600}
.sai-lp input[type=text],.sai-lp input[type=tel],.sai-lp input[type=email],.sai-lp select,.sai-lp textarea{width:100%;padding:12px 13px;border:1.5px solid var(--sai-line);background:var(--sai-surface);
  font-family:var(--sai-body);font-size:1rem;color:var(--sai-ink);border-radius:0;}
.sai-lp input:focus,.sai-lp select:focus,.sai-lp textarea:focus{outline:2px solid var(--sai-rust);outline-offset:-2px;border-color:var(--sai-rust)}
.sai-lp .field{margin-bottom:15px}
.sai-lp .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* single-click choices instead of a dropdown */
.sai-lp .chips{display:flex;flex-wrap:wrap;gap:8px}
.sai-lp .chip{position:relative}
.sai-lp .chip input{position:absolute;opacity:0;width:0;height:0}
.sai-lp .chip span{display:block;padding:9px 14px;border:1.5px solid var(--sai-line);background:var(--sai-surface);
  font-size:.9rem;cursor:pointer;transition:.13s;}
.sai-lp .chip input:checked+span{background:var(--sai-ink);color:#fff;border-color:var(--sai-ink)}
.sai-lp .chip input:focus-visible+span{outline:2px solid var(--sai-rust);outline-offset:2px}
.sai-lp .formnote{font-family:var(--sai-mono);font-size:.7rem;color:var(--sai-ink-3);margin:12px 0 0;text-align:center;letter-spacing:.04em}

/* ============ TRUST STRIP ============ */
.sai-lp .trust{background:var(--sai-ink);color:#fff;padding:26px 0}
.sai-lp .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.sai-lp .trust b{font-family:var(--sai-mono);font-size:1.5rem;font-weight:600;display:block;line-height:1.1;color:#fff}
.sai-lp .trust p{margin:5px 0 0;font-size:.86rem;color:rgba(255,255,255,.66);line-height:1.35}

/* ============ generic section ============ */
.sai-lp section{padding:74px 0}
.sai-lp .sec-head{max-width:660px;margin-bottom:44px}
.sai-lp .sec-head p{margin-top:14px}

/* ---- promises: asymmetric, ruled — not 3 identical cards ---- */
.sai-lp .promises{border-top:2px solid var(--sai-ink)}
.sai-lp .promise{display:grid;grid-template-columns:56px 1fr 1.15fr;gap:30px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--sai-line);}
.sai-lp .promise .num{font-family:var(--sai-mono);font-size:.9rem;color:var(--sai-rust);font-weight:600;padding-top:5px}
.sai-lp .promise h3{margin-bottom:0}
.sai-lp .promise p{margin:0;color:var(--sai-ink-2)}

/* ---- steps ---- */
.sai-lp .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--sai-ink)}
.sai-lp .step{padding:28px 26px 30px;border-right:1px solid var(--sai-line)}
.sai-lp .step:last-child{border-right:0}
.sai-lp .step .n{font-family:var(--sai-mono);font-size:2.5rem;font-weight:600;color:var(--sai-surface-2);line-height:1;display:block;margin-bottom:14px}
.sai-lp .step h3{margin-bottom:9px}
.sai-lp .step p{margin:0;color:var(--sai-ink-2);font-size:.98rem}

/* ---- proof grid ---- */
.sai-lp .proof{background:var(--sai-surface-2)}
.sai-lp .pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.sai-lp .shot{position:relative;overflow:hidden;background:var(--sai-ink)}
.sai-lp .shot img{width:100%;height:100%;object-fit:cover}
.sai-lp .shot figcaption{font-family:var(--sai-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(26,23,20,.86);padding:8px 11px;
  position:absolute;left:0;bottom:0;right:0;}
.sai-lp .s-a{grid-column:span 7;aspect-ratio:3/2}
.sai-lp .s-b{grid-column:span 5;aspect-ratio:3/2}
.sai-lp .s-c{grid-column:span 4;aspect-ratio:4/5}
.sai-lp .s-d{grid-column:span 4;aspect-ratio:4/5}
.sai-lp .s-e{grid-column:span 4;aspect-ratio:4/5}
.sai-lp .s-4{grid-column:span 4;aspect-ratio:3/2}
.sai-lp .s-6{grid-column:span 6;aspect-ratio:3/2}
.sai-lp .s-12{grid-column:span 12;aspect-ratio:21/9}
.sai-lp .ba{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sai-lp .ba .shot{aspect-ratio:4/3}

/* ---- contrast (dark) ---- */
.sai-lp .contrast{background:var(--sai-paddock);color:#fff}
.sai-lp .contrast h2{max-width:14ch}
.sai-lp .contrast .lede{color:rgba(255,255,255,.8)}
.sai-lp .contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sai-lp .kicker{font-family:var(--sai-display);text-transform:uppercase;font-size:1.6rem;
  border-top:2px solid rgba(255,255,255,.35);padding-top:20px;margin-top:26px;display:block}

/* ---- testimonials ---- */
.sai-lp .quotes{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--sai-ink)}
.sai-lp .q{padding:34px 34px 30px;border-right:1px solid var(--sai-line)}
.sai-lp .q:last-child{border-right:0}
.sai-lp .q blockquote{margin:0 0 20px;font-size:1.13rem;line-height:1.55;color:var(--sai-ink)}
.sai-lp .q blockquote b{background:linear-gradient(transparent 62%,rgba(180,73,26,.22) 0)}
.sai-lp .q cite{font-style:normal;font-family:var(--sai-mono);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sai-ink-2)}

/* ---- guarantee docket (signature) ---- */
.sai-lp .stamp{background:var(--sai-ink);color:#fff}
.sai-lp .docket{border:2px solid rgba(255,255,255,.5);padding:40px;max-width:760px;position:relative;}
.sai-lp .docket::before{content:var(--sai-stamp,"12");position:absolute;top:-1px;right:-1px;background:var(--sai-rust);color:#fff;
  font-family:var(--sai-mono);font-weight:600;font-size:1.5rem;padding:9px 15px;line-height:1;}
.sai-lp .docket h2{margin-bottom:18px;max-width:16ch}
.sai-lp .docket p{color:rgba(255,255,255,.82)}
.sai-lp .docket .sig{font-family:var(--sai-display);font-size:1.5rem;text-transform:uppercase;
  border-top:1px solid rgba(255,255,255,.35);padding-top:16px;margin-top:26px;display:inline-block;}
.sai-lp .docket .sig small{display:block;font-family:var(--sai-mono);font-size:.68rem;letter-spacing:.13em;
  color:rgba(255,255,255,.55);text-transform:uppercase;margin-top:5px;font-weight:400}

/* ---- FAQ ---- */
.sai-lp .faq{border-top:2px solid var(--sai-ink)}
.sai-lp details{border-bottom:1px solid var(--sai-line);padding:20px 0}
.sai-lp summary{font-family:var(--sai-display);text-transform:uppercase;font-size:1.28rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;}
.sai-lp summary::-webkit-details-marker{display:none}
.sai-lp summary::after{content:"+";font-family:var(--sai-mono);color:var(--sai-rust);font-size:1.5rem;line-height:1}
.sai-lp details[open] summary::after{content:"–"}
.sai-lp details p{margin:14px 0 0;color:var(--sai-ink-2);max-width:70ch}

/* ---- final CTA ---- */
.sai-lp .final{background:var(--sai-surface-2);border-top:1px solid var(--sai-line)}
.sai-lp .final-grid{display:grid;grid-template-columns:1fr .9fr;gap:56px;align-items:start}

/* ---- footer ---- */
.sai-lp footer{background:var(--sai-ink);color:rgba(255,255,255,.6);padding:44px 0 96px;font-size:.87rem}
.sai-lp footer a{color:#fff;text-decoration:none}
.sai-lp .foot{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between}
.sai-lp footer h4{font-family:var(--sai-display);text-transform:uppercase;color:#fff;font-size:1rem;margin:0 0 9px}

/* ---- sticky mobile call bar ---- */
.sai-lp .callbar{display:none}
@media(max-width:860px){
.sai-lp .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:80;
    border-top:2px solid var(--sai-ink);}
.sai-lp .callbar a{padding:16px 8px;text-align:center;text-decoration:none;font-family:var(--sai-display);
    text-transform:uppercase;font-size:1.06rem;letter-spacing:.03em;}
.sai-lp .callbar .c1{background:var(--sai-ink);color:#fff}
.sai-lp .callbar .c2{background:var(--sai-rust);color:#fff}
}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
.sai-lp .contrast-grid,.sai-lp .final-grid{grid-template-columns:1fr;gap:38px}
.sai-lp .hero-grid{grid-template-columns:1fr;gap:0}
.sai-lp .hero-copy,.sai-lp .formblock,.sai-lp .hero-ticks{grid-column:1}
.sai-lp .hero-copy{grid-row:1}
.sai-lp .formblock{grid-row:2;margin-top:30px}
.sai-lp .hero-ticks{grid-row:3;margin-top:30px}
.sai-lp .trust-grid{grid-template-columns:1fr 1fr;gap:20px}
.sai-lp .steps{grid-template-columns:1fr}
.sai-lp .step{border-right:0;border-bottom:1px solid var(--sai-line)}
.sai-lp .quotes{grid-template-columns:1fr}
.sai-lp .q{border-right:0;border-bottom:1px solid var(--sai-line)}
.sai-lp .promise{grid-template-columns:38px 1fr;gap:16px}
.sai-lp .promise p{grid-column:2}
.sai-lp .s-a,.sai-lp .s-b,.sai-lp .s-c,.sai-lp .s-d,.sai-lp .s-e,.sai-lp .s-4,.sai-lp .s-6,.sai-lp .s-12{grid-column:span 12;aspect-ratio:3/2}
.sai-lp .ba{grid-template-columns:1fr}
.sai-lp .docket{padding:30px 24px}
}
@media(max-width:560px){
.sai-lp{font-size:16px}
.sai-lp section{padding:52px 0}
.sai-lp .hero{padding:38px 0 44px}

.sai-lp .row2{grid-template-columns:1fr}
}

/* ============================================================
   SITE PAGES (home + contact) — nav, service cards, contact list
   Landing pages deliberately do not use these.
   ============================================================ */
.sai-lp .site-hd .hd{flex-wrap:wrap;gap:10px 26px}
.sai-lp .nav{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto}
.sai-lp .nav a{font-family:var(--sai-display);text-transform:uppercase;font-size:1.02rem;
  letter-spacing:.02em;text-decoration:none;color:var(--sai-ink);padding:4px 0;
  border-bottom:2px solid transparent}
.sai-lp .nav a:hover{border-bottom-color:var(--sai-rust)}
.sai-lp .site-hd .hd-r{margin-left:0}

.sai-lp .hero--home{border-bottom:1px solid var(--sai-line)}
.sai-lp .hero--home h1{max-width:none;margin-bottom:22px}
.sai-lp .hero--home .lede{max-width:60ch}
.sai-lp .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:30px}
.sai-lp .tel--big{font-size:1.35rem}

/* service cards — four peer items, so a grid is honest here */
.sai-lp .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--sai-ink)}
.sai-lp .card{display:block;padding:26px 24px 28px;border-right:1px solid var(--sai-line);
  border-bottom:1px solid var(--sai-line);text-decoration:none;transition:background .15s ease}
.sai-lp .card:last-child{border-right:0}
.sai-lp .card:hover{background:var(--sai-surface-2)}
.sai-lp .card h3{margin-bottom:10px}
.sai-lp .card p{color:var(--sai-ink-2);font-size:.98rem;margin-bottom:14px}
.sai-lp .card-go{font-family:var(--sai-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sai-rust);font-weight:600}

.sai-lp .contrast-grid--plain{align-items:start}

/* contact details */
.sai-lp .contact-list{margin:30px 0 0;border-top:1px solid var(--sai-line)}
.sai-lp .contact-list dt{font-family:var(--sai-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sai-ink-3);padding-top:14px}
.sai-lp .contact-list dd{margin:3px 0 14px;font-size:1.05rem;border-bottom:1px solid var(--sai-line);
  padding-bottom:14px;color:var(--sai-ink-2)}
.sai-lp .contact-list dd a{color:var(--sai-rust);font-weight:600;text-decoration:none}

@media(max-width:960px){
  .sai-lp .cards{grid-template-columns:1fr 1fr}
  .sai-lp .card:nth-child(2n){border-right:0}
}
@media(max-width:640px){
  .sai-lp .nav{gap:14px;width:100%;margin-left:0;order:3}
  .sai-lp .nav a{font-size:.94rem}
  .sai-lp .cards{grid-template-columns:1fr}
  .sai-lp .card{border-right:0}
  .sai-lp .hero-cta{gap:18px}
}