/* Subcontractor Approval Pack: the A4 pages (from the approved design) and their fill-in boxes.
   Shared by subcontractor-pack.html (office) and the subcontractor site (subcontractor.style-connect.co.uk). */
  .sp [hidden]{display:none !important}
  .sp{
    --red:#dd372d;--ink:#191a19;--mute:#5e605e;--rule:#c9cac7;--band:#f1f1f1;--field:#f6f6f5;--paper:#ffffff;
    --grad:linear-gradient(90deg,#2d2320 0%,#9e3c2e 22%,#de392c 32%,#ef4623 60%,#e78225 88%,#e78225 100%);
    --sans:"Poppins","Segoe UI","Helvetica Neue",Arial,sans-serif;
    color:var(--ink);font-family:var(--sans);
  }
  .wrap{padding:24px 16px 48px;}
  .stack{width:210mm;margin:0 auto;display:flex;flex-direction:column;gap:10mm}
  .sp .page{width:210mm;height:297mm;background:var(--paper);position:relative;overflow:hidden;box-shadow:0 2px 18px rgba(0,0,0,.35);font-size:8.4pt;line-height:1.45}
  #pdfStage .page{box-shadow:none;}
  .sp .inner{position:absolute;inset:0;padding:12mm 15mm 18mm;display:flex;flex-direction:column;gap:5mm}
  .sp .run{display:flex;justify-content:space-between;align-items:center;font-size:7pt;color:var(--mute);letter-spacing:.04em}
  .sp .run img{height:8.5mm;width:auto;display:block}
  .sp .foot{position:absolute;left:15mm;right:15mm;bottom:7mm;display:flex;justify-content:space-between;font-size:6.8pt;color:var(--mute);letter-spacing:.05em}
  .sp .foot b{color:var(--ink);font-weight:600}
  .sp .bar{position:absolute;left:0;right:0;bottom:0;height:2.2mm;background:var(--grad)}
  .sp .band{background:var(--band);margin:0 -15mm;padding:6mm 15mm 6mm;display:flex;flex-direction:column;gap:2mm}
  .sp .eyebrow{font-size:7pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
  .sp h1{margin:0;font-weight:400;font-size:24pt;line-height:1.08;color:var(--red);text-wrap:balance}
  .sp h1 b{display:block;font-weight:600;color:var(--ink)}
  .sp .lede{margin:1mm 0 0;font-size:9pt;line-height:1.55;color:var(--ink);max-width:165mm}
  .sp .sec{display:flex;flex-direction:column;gap:2.6mm}
  .sp h2{margin:0;font-weight:400;font-size:12.5pt;color:var(--red);line-height:1.2;display:flex;gap:2.5mm;align-items:baseline}
  .sp .note{margin:0;color:var(--mute);font-size:7.8pt}
  .sp .note b{color:var(--ink);font-weight:600}
  .sp .g{display:grid;gap:2.6mm 4mm}
  .sp .g4{grid-template-columns:repeat(4,1fr)}
  .sp .span3{grid-column:span 3}.sp .all{grid-column:1/-1}
  .sp .f{display:flex;flex-direction:column;gap:.9mm;min-width:0}
  .sp .f>span{font-size:6.6pt;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
  .sp .box{height:7mm;background:var(--field);border-bottom:.3mm solid var(--rule);display:flex}
  .sp .yn{display:flex;gap:3.5mm;font-size:7.6pt;font-weight:500;white-space:nowrap;padding-top:.2mm}
  .sp table{width:100%;border-collapse:collapse;font-size:7.8pt}
  .sp th{background:var(--band);font-weight:600;text-align:left;padding:1.8mm 2mm;font-size:6.8pt;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
  .sp td{border-bottom:.3mm solid var(--rule);padding:0 2mm;height:7mm}
  .sp td.l{font-weight:500;width:46%}
  .sp td.w{background:var(--field)}
  .sp .tab-nums{font-variant-numeric:tabular-nums}
  .sp .cover{background:#111 url(images/subpack/cover.jpg) center/cover no-repeat}
  .sp .cover .shade{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(25,26,25,0) 0%,rgba(25,26,25,.72) 28%,rgba(25,26,25,.86) 100%)}
  .sp .cover .logo{position:absolute;top:13mm;right:14mm;height:13mm}
  .sp .cover .copy{position:absolute;left:15mm;right:60mm;bottom:22mm;color:#fff;display:flex;flex-direction:column;gap:4mm}
  .sp .cover h1{color:#fff;font-weight:300;font-size:30pt}
  .sp .cover h1 b{color:#fff}
  .sp .cover p{margin:0;font-size:9.5pt;line-height:1.55;color:#f0efec}
  .sp .cover .url{font-weight:700;letter-spacing:.06em;font-size:9pt}
  .sp .cover .meta{font-size:7.5pt;letter-spacing:.08em;text-transform:uppercase;color:#cfcdc8}
  .sp .corner{position:absolute;right:0;bottom:0;width:42mm;height:42mm;background:var(--ink);clip-path:polygon(100% 0,100% 100%,0 100%)}
  .sp .corner img{position:absolute;right:9mm;bottom:9mm;height:11mm}
  .sp .two{display:grid;grid-template-columns:1fr 1fr;gap:8mm}
  .sp .toc{list-style:none;margin:0;padding:0;border-top:.3mm solid var(--rule)}
  .sp .toc li{display:flex;justify-content:space-between;gap:3mm;padding:1.7mm 0;border-bottom:.3mm solid var(--rule)}
  .sp .toc li.part{font-weight:600;color:var(--red);padding-top:3mm}
  .sp .toc .pg{color:var(--mute);font-variant-numeric:tabular-nums}
  .sp .check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.7mm}
  .sp .check label{display:flex;gap:2.4mm;align-items:flex-start;cursor:pointer}
  .sp .check label i{margin-top:.3mm}
  .sp .check small{display:block;color:var(--mute);font-size:7.2pt}
  .sp .steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2.2mm;counter-reset:s}
  .sp .steps li{display:grid;grid-template-columns:7mm 1fr;counter-increment:s}
  .sp .steps li::before{content:counter(s);font-weight:600;color:var(--red);font-size:10pt;line-height:1.2}
  .sp .panel{background:var(--band);padding:5mm;display:flex;flex-direction:column;gap:2.6mm}
  .sp .panel h3,.sp .h3{margin:0;font-size:9pt;font-weight:600}
  .sp .terms{column-count:2;column-gap:8mm;font-size:7.7pt;line-height:1.48;flex:1;min-height:0}
  .sp .terms h3{margin:0 0 1.2mm;font-weight:400;font-size:10.5pt;color:var(--red);break-after:avoid}
  .sp .terms h3 b{font-weight:600}
  .sp .terms .cl{break-inside:avoid-column;margin:0 0 4mm}
  .sp .terms p{margin:0 0 1.4mm}
  .sp .terms ul{margin:0 0 1.6mm;padding:0 0 0 3.2mm}
  .sp .terms li{margin:0 0 .4mm}
  .sp .terms li::marker{color:var(--red)}
  .sp .terms .k{font-weight:600}
  .sp .terms table{font-size:7.2pt;margin:1mm 0 1.6mm}
  .sp .terms td{height:auto;padding:1.1mm 1.6mm}
  .sp .terms th{padding:1.3mm 1.6mm;font-size:6.2pt}
  .sp .callout{background:var(--ink);color:#fff;padding:2.4mm 3mm;font-weight:600;letter-spacing:.04em;margin:1mm 0 1.8mm;display:inline-block}
  .sp .sig{display:grid;grid-template-columns:1fr 1fr;gap:3mm 6mm}
  .sp .sig .box{height:9mm}
  .sp .sig .box.sign{height:16mm}
  .sp .decl{border:.4mm solid var(--ink);padding:5mm;display:flex;flex-direction:column;gap:3mm}
  .sp .decl ol{margin:0;padding-left:4.5mm;display:flex;flex-direction:column;gap:1.6mm}
  .sp .decl li::marker{color:var(--red);font-weight:600}
  .sp .office{border-left:1.6mm solid var(--red)}
  .sp .tick{width:9mm;text-align:center}
  .sp .back{background:#000 url(images/subpack/back-page.jpg) no-repeat top left;background-size:210mm 297mm}
  .sp .ph{background:#d9dad7;border-radius:4mm;display:flex;align-items:center;justify-content:center;flex:none;color:#7d7f7c;font-size:7pt;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
  .sp .label-tag{font-size:6.6pt;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--paper);background:var(--red);padding:1mm 2.2mm;align-self:flex-start}
  .sp .form{display:flex;flex-direction:column;--line:#8f908e}
  .sp .fh{background:var(--red);color:#fff;font-size:7.2pt;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:1.4mm 2mm;line-height:1.3}
  .sp .fh .n{margin-right:1.6mm}
  .sp .fsub{background:#dcdcdb;color:var(--ink);font-size:6.8pt;line-height:1.4;padding:1.2mm 2mm}
  .sp .fr{display:flex;min-height:8mm;border-bottom:.25mm solid var(--line)}
  .sp .fr.end{border-bottom-width:.6mm;border-bottom-color:var(--ink)}
  .sp .fr>div{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:3mm;padding:0 2mm;border-left:.25mm solid var(--line)}
  .sp .fr>div:first-child{border-left:0}
  .sp .lb{flex:none;font-size:6.6pt;font-weight:400;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
  .sp .lb small{display:block;text-transform:none;letter-spacing:0;color:var(--mute);font-size:6.2pt;white-space:normal}
  .sp .fr.th{min-height:6mm;background:#f1f1f1}
  .sp .fr.th .lb{font-weight:600}
  .sp .fr.tall>div{align-items:flex-start;padding-top:1.9mm}
  .sp .fr.h2x{height:16mm}.sp .fr.h3x{height:24mm}
  .sp .fr.q>div{padding-top:1.6mm;padding-bottom:1.6mm;align-items:flex-start;gap:2.4mm}
  .sp .fr.q p{margin:0;font-size:7.6pt;line-height:1.4}
  .sp .fr.q em{display:block;font-style:normal;color:var(--mute);font-size:7pt;margin-top:.4mm}
  .sp .qn{flex:none;width:7mm;font-weight:600;color:var(--red);font-size:7.6pt;line-height:1.4}
  .sp .fr>div.opt{flex:none;gap:4mm;align-items:center}
  .sp .fr.q>div.opt{align-items:flex-start}
  .sp .fr>div.opt.c{justify-content:center;width:22mm;padding:0;gap:2mm}
  .sp .fr>div.opt.c>.ck,.sp .fr>div.opt.c>.lb{width:8mm;justify-content:center;text-align:center}

  /* ---- the bits you can fill in ---- */
  .sp .ck,.sp .cb{display:inline-flex;align-items:center;gap:1.5mm;font-size:6.6pt;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;line-height:1.4;cursor:pointer;position:relative}
  .sp .cb{font-size:7.6pt;font-weight:500;text-transform:none;letter-spacing:0}
  .sp .ck input,.sp .cb input,.sp .check input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
  .sp i.bx{flex:none;width:3.2mm;height:3.2mm;border:.3mm solid var(--red);border-radius:.6mm;background:var(--paper);position:relative;display:inline-block}
  .sp .cb i.bx,.sp .check i.bx{border-color:var(--ink);border-radius:.5mm}
  .sp input:checked+i.bx{background:var(--red);border-color:var(--red)}
  .sp input:checked+i.bx::after{content:"";position:absolute;left:.85mm;top:.2mm;width:.8mm;height:1.7mm;border:solid #fff;border-width:0 .45mm .45mm 0;transform:rotate(45deg)}
  .sp input:focus-visible+i.bx{outline:.5mm solid var(--amber);outline-offset:.3mm}
  .sp input.t,.sp textarea.t{flex:1 1 auto;align-self:stretch;min-width:0;width:100%;border:0;margin:0;padding:0 .5mm;background:transparent;color:var(--ink);font:400 8pt/1.35 var(--sans);outline:none;border-radius:.6mm}
  .sp textarea.t{resize:none;padding:0 .5mm 1.2mm;overflow:auto}
  .sp .fr.tall>div>textarea.t{margin-top:-.4mm}
  .sp .box input.t{padding:0 1.5mm}
  .sp td input.t{height:7mm}
  .sp input.t.yy{flex:none;width:6mm}
  .sp input.t.sigtext{font:italic 400 13pt/1 'Segoe Script','Brush Script MT',cursive}
  .sp input.t:hover,.sp textarea.t:hover{background:rgba(221,55,45,.05)}
  .sp input.t:focus,.sp textarea.t:focus{background:rgba(221,55,45,.09);box-shadow:inset 0 -.5mm 0 var(--red)}
  .sp input.t::placeholder{color:#a3a4a1;font-style:italic}
  .sp .sigstat{display:none;align-items:center;padding:0 2mm;font-size:7pt;font-weight:600;color:#1d6b3e;background:#d4efdf}
  .sp .sigstat.show{display:flex}
  .readonly .sp input,.readonly .sp textarea{pointer-events:none}

  /* PDF mode: the answers are added as real PDF form fields on top, so hide them in the picture
     (office-use answers stay printed, they aren't fillable for the subcontractor) */
  .pdfmode .sp input.t:not(.off),.pdfmode .sp textarea.t:not(.off){visibility:hidden}
  .pdfmode .sp input:not(.off):checked+i.bx{background:var(--paper);border-color:var(--red)}
  .pdfmode .sp .cb input:not(.off):checked+i.bx,.pdfmode .sp .check input:checked+i.bx{border-color:var(--ink)}
  .pdfmode .sp input:not(.off):checked+i.bx::after{display:none}
  .pdfmode .sp input.t.off::placeholder{color:transparent}
  .pdfmode .sp .sigstat{display:none}
  /* a drawn signature (signed online) */
  .sp img.sigimg{height:100%;width:auto;max-width:100%;object-fit:contain;display:block;padding:.6mm 1mm}
  .sp .box.has-sigimg input.sigtext{display:none}
  .sp .signbtn{margin:auto;font:600 8pt var(--sans);color:#fff;background:var(--red);border:0;border-radius:1mm;padding:1.6mm 3.5mm;cursor:pointer}
  .pdfmode .sp .signbtn,.printmode .sp .signbtn{display:none}
  .printmode .sp input.t::placeholder,.printmode .sp textarea.t::placeholder{color:transparent}
  .printmode .sp .sigstat{display:none}