/* ============================================================
   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}
}

/* ============================================================
   WHAT I DO — seven priced rows.
   Ruled background OFF: the rows draw their own hairlines.
   Layout is a job-sheet line item: what it is on the left,
   what it costs in the right-hand column, description beneath.
   ============================================================ */
.jobs{margin-top:var(--s7);border-top:1px solid var(--rule-d)}
.job{display:grid;grid-template-columns:minmax(0,1fr) 178px;
     grid-template-areas:"t p" "d p";
     column-gap:var(--s6);row-gap:var(--s2);
     padding-top:var(--s6);padding-bottom:var(--s6);
     border-bottom:1px solid var(--rule-d)}
.job h3{grid-area:t;min-width:0}
.job .jd{grid-area:d;min-width:0;max-width:62ch}
.job .jp{grid-area:p;min-width:0;text-align:right;padding-top:2px}

/* mono is allowed here: these are standalone figures, not words in a sentence */
.job .jp .fig{display:block;font-size:26px;color:var(--ink);line-height:1.08}
.job .jp .fig.sm{font-size:21px;margin-top:var(--s3)}
.job .jp small{display:block;font-size:13px;color:var(--mute);line-height:1.42;margin-top:4px}
/* "Included" and "Ask me" are words, so they stay in the sans face */
.job .jp .inc{display:block;font-size:17px;font-weight:600;color:var(--biro);line-height:1.2}
.job .jp .note{margin-top:var(--s3);max-width:20ch;margin-left:auto}
.job .jd a{color:var(--biro);font-weight:500;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 96%;background-size:100% 1.5px;padding-bottom:1px}
.job .jd a:hover{color:var(--biro-d)}

@media(max-width:820px){.job{grid-template-columns:minmax(0,1fr) 150px;column-gap:var(--s5)}}
@media(max-width:620px){
  /* stacked: title, then price, then the detail — reads like a menu line */
  .job{grid-template-columns:1fr;grid-template-areas:"t" "p" "d";row-gap:0;
       padding-top:var(--s5);padding-bottom:var(--s5)}
  .job .jp{text-align:left;padding-top:0;margin-top:var(--s2);margin-bottom:var(--s3)}
  .job .jp .fig{display:inline-block;font-size:22px}
  .job .jp small{display:inline;margin-top:0;margin-left:7px}
  .job .jp .note{display:block;margin-top:5px;margin-left:0;max-width:44ch}
}
/* "from" is a word, so it stays sans — the figure beside it stays mono */
.job .jp .pre{font-size:17px;font-weight:500;color:var(--ink-2);margin-right:6px}
.job .jp .fig.ln{display:inline}

/* section leads need air under the h2 (the hero rule is scoped to .heroin) */
.sec .lead{margin-top:var(--s4)}
/* the second price must start its own line, or the two figures run together */
@media(max-width:620px){
  .job .jp .fig.sm{display:block;margin-top:var(--s2)}
}

/* ============================================================
   PRICES — a costing table. Ruled background OFF: a table is
   nothing but horizontal rules, and two line systems fight.
   Carbon is already spent on the stub, so the Bates row is
   marked in biro instead.
   ============================================================ */
.costwrap{margin-top:var(--s7);overflow-x:auto}      /* safety net, shouldn't trigger */
.costtbl{width:100%;border-collapse:collapse;min-width:0}
.costtbl th{font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--mute);text-align:left;
  padding-top:0;padding-bottom:var(--s3);border-bottom:1px solid var(--rule-d);vertical-align:bottom}
.costtbl td{font-size:15.5px;color:var(--ink-2);padding-top:var(--s4);padding-bottom:var(--s4);
  border-bottom:1px solid var(--rule-d);vertical-align:top}
.costtbl th:not(:first-child),.costtbl td:not(:first-child){padding-left:var(--s4)}
/* ONLY the figures may refuse to wrap. Letting the last column nowrap crushed the
   description to 60px on a phone. */
.costtbl th:nth-child(2),.costtbl td:nth-child(2){white-space:nowrap}
.costtbl th:first-child{width:47%}
.costtbl th:nth-child(3){width:26%}
.costtbl td:nth-child(2){font-family:var(--fm);font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;color:var(--ink)}
/* the row that matters: ink not grey, and a biro tick in the margin */
.costtbl tr.us td{color:var(--ink);font-weight:500}
.costtbl tr.us td:first-child{box-shadow:inset 3px 0 0 var(--biro);padding-left:var(--s3)}
.costtbl tr.us strong{font-weight:600}
.costtbl tr.us em{font-style:normal;color:var(--biro);font-weight:600}
.costnote{font-size:14px;color:var(--mute);margin-top:var(--s4);max-width:60ch}

@media(max-width:560px){
  .costtbl td{font-size:14.5px;padding-top:var(--s3);padding-bottom:var(--s3)}
  .costtbl th:not(:first-child),.costtbl td:not(:first-child){padding-left:var(--s3)}
  .costtbl th{font-size:9.5px;letter-spacing:1.2px}
}

/* what the £25 does and doesn't cover — a pair, not a sequence,
   so it must NOT reuse .steps (that carries earned numbering) */
.cov{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s7)}
.cov > div{border-top:1px solid var(--rule-d);padding-top:var(--s5);min-width:0}
.cov h3{margin-bottom:var(--s2)}
.cov p{max-width:46ch}
@media(max-width:700px){.cov{grid-template-columns:1fr;gap:var(--s5)}}

/* ============================================================
   FAQ — native <details>, no JS. Ruled background OFF:
   every row draws its own hairline.
   ============================================================ */
.faq{margin-top:var(--s7);border-top:1px solid var(--rule-d);max-width:840px}
/* capped so the + marker sits near the question rather than stranded at the far
   right of a 1080px sheet. Everything else here respects a measure; so does this. */
.fq{border-bottom:1px solid var(--rule-d)}
.fq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;
  gap:var(--s4);align-items:start;
  padding-top:var(--s5);padding-bottom:var(--s5);
  font-size:17.5px;font-weight:600;letter-spacing:-.2px;line-height:1.35;color:var(--ink);
  min-height:44px}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--biro)}
/* the marker is a standalone glyph, so mono is allowed */
.fq summary::after{content:"+";font-family:var(--fm);font-weight:600;font-size:19px;
  color:var(--biro);line-height:1.2}
.fq[open] summary::after{content:"\2212"}
.fq[open] summary{padding-bottom:var(--s2)}
.fq .a{font-size:17px;color:var(--ink-2);max-width:66ch;padding-bottom:var(--s5)}
@media(max-width:560px){
  .fq summary{font-size:16.5px;gap:var(--s3);padding-top:var(--s4);padding-bottom:var(--s4)}
  .fq[open] summary{padding-bottom:var(--s2)}
}

/* ============================================================
   BEING STRAIGHT WITH YOU — prose only.
   Ruled background FADE per section 4: open, no lines of its own.
   ============================================================ */
.sec.rel{position:relative}
.straight p + p{margin-top:var(--s5)}
.straight p{max-width:62ch}
/* the guarantee. A solid ink block reads as a stamp on the sheet.
   Carbon is already spent on the stub, so this is ink, not yellow. */
.reversal{background:var(--ink);color:var(--paper);border-radius:5px;
  padding:var(--s5) var(--s6);margin-top:var(--s7);max-width:64ch;
  box-shadow:0 2px 0 var(--biro)}
.reversal b{display:block;font-size:clamp(18px,2.4vw,21px);font-weight:600;
  letter-spacing:-.4px;line-height:1.3;margin-bottom:var(--s2)}
.reversal span{display:block;font-size:16px;color:#C3CBD8;line-height:1.6}
@media(max-width:560px){.reversal{padding:var(--s5) var(--s5)}}

/* ============================================================
   THE WORK — a grid of screens. Ruled OFF: too dense for rules.
   ============================================================ */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);margin-top:var(--s7)}
@media(max-width:760px){.works{grid-template-columns:1fr;gap:var(--s7)}}
.work{display:block;text-decoration:none;color:inherit;min-width:0;
  transition:transform .13s ease}
.work:hover{transform:translateY(-2px)}
/* browser chrome - the only skeuomorphism besides the stub perforation */
.chrome{display:flex;align-items:center;gap:5px;background:#EDEEE8;
  border:1px solid var(--rule-d);border-bottom:none;border-radius:5px 5px 0 0;
  padding:8px 11px}
.chrome i{width:8px;height:8px;border-radius:50%;background:#CFD3C6;flex:none}
.chrome .bar{font-family:var(--fm);font-size:10.5px;color:var(--mute);
  margin-left:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.shot{border:1px solid var(--rule-d);border-top:none;background:#fff;overflow:hidden;
  aspect-ratio:16/10}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wm{padding-top:var(--s4)}
.wm h3{margin-top:var(--s2);margin-bottom:var(--s1)}
.wm p{font-size:15.5px;color:var(--ink-2);max-width:44ch}
.wm .lbl{font-family:var(--fm);font-size:10px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;display:block}
.wm .lbl.paid{color:var(--biro)}
.wm .lbl.build{color:var(--ink-2)}
.wm .lbl.concept,.wm .lbl.mock{color:var(--mute)}

/* ============================================================
   RIGHT THEN — the close. Ruled FADE: open, prose and buttons.
   ============================================================ */
.contact p{max-width:52ch;margin-top:var(--s4);font-size:clamp(16.5px,2.1vw,18.5px)}
.cbtns{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
@media(max-width:560px){.cbtns{flex-direction:column;gap:10px}}
.cmeta{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule-d);
  font-size:15px;color:var(--mute);line-height:1.75;max-width:60ch}
.cmeta a{color:var(--biro);font-weight:500;text-decoration:none}
.cmeta a:hover{color:var(--biro-d)}

/* first paragraph after an h2 needs air. .lead had its own rule; a plain <p> did not. */
.sec h2 + p{margin-top:var(--s4)}

/* ============================================================
   FOOTER — sits on the desk, below the sheet. Reinforces the
   "a leaf of paper on a desk" idea rather than fighting it.
   ============================================================ */
footer{background:var(--desk);color:var(--mute);font-size:15px;line-height:1.7;
  padding-top:var(--s8);padding-bottom:var(--s8)}
footer .wrap{max-width:var(--sheet)}
footer .fb{font-size:18.5px;font-weight:600;letter-spacing:-.35px;color:var(--ink);
  margin-bottom:var(--s3)}
footer a{color:var(--biro);font-weight:500;text-decoration:none}
footer a:hover{color:var(--biro-d)}
footer .sole{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule-d);
  font-size:13px}

/* ============================================================
   STICKY BAR — phones only, same as the live site.
   ============================================================ */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;
  background:var(--paper);border-top:1px solid var(--rule-d);padding:9px 10px;
  box-shadow:0 -3px 14px rgba(23,30,43,.09)}
.stickybar a{flex:1;text-align:center;padding-top:14px;padding-bottom:14px;border-radius:4px;
  font-weight:600;font-size:16px;text-decoration:none;min-height:48px;
  display:flex;align-items:center;justify-content:center;gap:7px}
.stickybar .c{background:var(--ink);color:var(--paper)}
.stickybar .w{background:var(--wa);color:#fff}
.stickybar svg{flex:none}
@media(max-width:760px){
  .stickybar{display:flex}
  body{padding-bottom:74px}
}