/* ============================================================
   Bates Design — "Job sheet" design system
   Direction: a leaf off a tradesman's duplicate pad.
   Full documentation: MyWebsite\_preview\DESIGN-SYSTEM.md
   ============================================================ */

/* ---- type: self-hosted latin subset, no third-party request ---- */
@font-face{font-family:'Plex';src:url('fonts/plex-sans-var.woff2') format('woff2-variations');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/plex-mono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/plex-mono-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  /* --- palette --- */
  --paper:#FCFCFA;          /* the sheet */
  --desk:#F2F2EE;           /* what the sheet sits on */
  --carbon:#F4E59B;         /* the yellow duplicate. RATIONED: once per page */
  --carbon-d:#DFCB76;
  --carbon-ink:#2E2910;
  --ink:#171E2B;            /* ballpoint blue-black */
  --ink-2:#3A4454;          /* body copy */
  --mute:#697384;           /* labels, meta */
  --biro:#24438C;           /* signatures are blue */
  --biro-d:#1B3572;
  --rule:#E4E7DC;           /* printed rule */
  --rule-d:#D3D7C9;         /* structural hairline */
  --marg:#E9D9D9;           /* the faint red ledger margin */
  --wa:#1B9E4B;             /* WhatsApp, tuned. See DESIGN-SYSTEM.md */
  --wa-d:#136B34;

  /* --- type --- */
  --fs:'Plex',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fm:'PlexMono',ui-monospace,'Cascadia Mono','Consolas',monospace;

  /* --- spacing: 4px base, section rhythm tied to the rule --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px;
  --s6:34px; --s7:52px; --s8:72px; --s9:96px;

  --lh:34px;                /* the ruled rhythm */
  --pad:22px;
  --sheet:1080px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%}
body{font-family:var(--fs);background:var(--desk);color:var(--ink);
     line-height:1.62;overflow-x:hidden;max-width:100%;overflow-wrap:break-word}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--biro);outline-offset:3px}

.wrap{width:100%;max-width:var(--sheet);margin-left:auto;margin-right:auto;
      padding-left:var(--pad);padding-right:var(--pad)}

/* ============================================================
   TYPE SCALE
   ============================================================ */
h1{font-size:clamp(38px,7.2vw,74px);font-weight:600;letter-spacing:-2px;line-height:1.06;max-width:15ch}
h2{font-size:clamp(27px,4.2vw,42px);font-weight:600;letter-spacing:-1.1px;line-height:1.13;max-width:20ch}
h3{font-size:20px;font-weight:600;letter-spacing:-.2px;line-height:1.3}
.lead{font-size:clamp(16.5px,2.1vw,19px);color:var(--ink-2);max-width:54ch;line-height:1.62}
p{font-size:17px;color:var(--ink-2)}
.meta{font-size:14.5px;color:var(--mute)}

/* mono: STANDALONE figures and micro-labels only.
   Never inside a sentence, never inside a button label. */
.lbl{font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:1.6px;
     text-transform:uppercase;color:var(--mute);display:block}
.fig{font-family:var(--fm);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.3px}

/* the biro gesture: a drawn line. Used on emphasis and links, nowhere else. */
.u{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
   background-position:0 92%;background-size:100% 2px;padding-bottom:2px}

/* ============================================================
   THE SHEET + THE RULED BACKGROUND
   Three states. Rule: the ruled background is OFF wherever the
   content draws its own horizontal lines. See DESIGN-SYSTEM.md
   ============================================================ */
.sheet{position:relative;background:var(--paper);max-width:var(--sheet);
       margin-left:auto;margin-right:auto;
       border-left:1px solid var(--rule-d);border-right:1px solid var(--rule-d)}
@media(max-width:1120px){.sheet{border-left:none;border-right:none}}

/* .ruled must be scoped to ONE section, never to .sheet - it will bleed. */
.hero{position:relative}
.ruled{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh))}
/* state 1 — FULL. Hero only. */
.ruled.full{-webkit-mask-image:linear-gradient(to bottom,#000 0 58%,transparent 96%);
                    mask-image:linear-gradient(to bottom,#000 0 58%,transparent 96%)}
/* state 2 — FADE. Open sections with no lines of their own. */
.ruled.fade{opacity:.45;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22% 74%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 22% 74%,transparent)}
/* state 3 — OFF is the absence of the element. Do not add .ruled at all. */

/* the ledger margin. Rules run to it, text starts after it. */
.marg{position:absolute;top:0;bottom:0;left:0;width:var(--pad);
      background:var(--paper);border-right:1px solid var(--marg);pointer-events:none}
@media(max-width:760px){.marg{display:none}}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{position:relative;z-index:1;padding-top:var(--s8);padding-bottom:var(--s8)}
@media(max-width:640px){.sec{padding-top:var(--s7);padding-bottom:var(--s7)}}
.sec + .sec{border-top:1px solid var(--rule-d)}
.kick{font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:1.7px;
      text-transform:uppercase;color:var(--mute);margin-bottom:var(--s3)}

/* ============================================================
   BUTTONS — prominence is non-negotiable
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;font-family:var(--fs);font-size:17px;font-weight:600;
  padding-left:28px;padding-right:28px;padding-top:16px;padding-bottom:16px;
  border-radius:4px;border:none;cursor:pointer;min-height:56px;
  transition:transform .13s ease, box-shadow .13s ease}
.btn.call{background:var(--ink);color:var(--paper);box-shadow:0 2px 0 var(--biro)}
.btn.call:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--biro)}
.btn.wa{background:var(--wa);color:#fff;box-shadow:0 2px 0 var(--wa-d)}
.btn.wa:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--wa-d)}
.btn svg{flex:none}
.hbtns{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
@media(max-width:560px){
  .hbtns{flex-direction:column;gap:10px}
  .btn{width:100%;font-size:17.5px}
}

/* separators must never strand. Used for "· have a look". */
.sep{white-space:nowrap}

/* ============================================================
   HEADER
   ============================================================ */
header{background:var(--paper);border-bottom:1px solid var(--rule-d);position:sticky;top:0;z-index:40}
.hw{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding-top:13px;padding-bottom:13px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.brand .bn{line-height:1.05;min-width:0}
.brand .bn b{display:block;font-size:18.5px;font-weight:600;letter-spacing:-.35px}
.brand .bn small{display:block;font-family:var(--fm);font-size:9.5px;font-weight:600;
  letter-spacing:1.9px;text-transform:uppercase;color:var(--mute);margin-top:3px}
.hn{display:flex;gap:4px;align-items:center;flex-wrap:wrap;min-width:0}
.hn a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-2);
      padding:8px 11px;border-radius:3px}
.hn a:hover{background:#F0F1EA;color:var(--ink)}
.hn a.cta{background:var(--ink);color:var(--paper);font-weight:600;
  padding-left:16px;padding-right:16px;min-height:44px;display:inline-flex;align-items:center}
.hn a.cta:hover{background:var(--biro);color:#fff}
@media(max-width:600px){.hn a.nv{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.heroin{position:relative;z-index:1;padding-top:56px;padding-bottom:56px}
h1 em{font-style:normal;display:block;color:var(--biro)}
.heroin .lead{margin-top:var(--s5)}

/* the carbon copy. Once per page. */
.stub{position:relative;z-index:1;background:var(--carbon);color:var(--carbon-ink)}
.stub::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background-image:radial-gradient(circle at 3px 1px, var(--carbon-d) 1px, transparent 1.2px);
  background-size:9px 2px;background-repeat:repeat-x}
.stubin{padding-top:26px;padding-bottom:28px}
.stub p{font-size:clamp(16px,2vw,18.5px);font-weight:500;color:var(--carbon-ink);max-width:60ch}
.stub b{font-weight:600}
.stub a{color:var(--biro-d);font-weight:600;text-decoration:none}
.stub a:hover{color:#0E2251}

/* ============================================================
   HOW IT WORKS — a genuine sequence, so numbering is earned.
   Ruled background OFF: these rows draw their own lines.
   ============================================================ */
.steps{margin-top:var(--s7);border-top:1px solid var(--rule-d)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);
      padding-top:var(--s6);padding-bottom:var(--s6);
      border-bottom:1px solid var(--rule-d);align-items:start}
.step .sn{font-family:var(--fm);font-size:13px;font-weight:600;color:var(--biro);
  letter-spacing:.5px;padding-top:4px;min-width:2.5ch}
.step .sb{min-width:0;max-width:62ch}
.step h3{margin-bottom:var(--s2)}
.step p{color:var(--ink-2)}
@media(max-width:560px){
  .step{gap:var(--s4);padding-top:var(--s5);padding-bottom:var(--s5)}
  .step .sn{font-size:12px}
}