/* ============================================================
   BLUEPRINT. hirethecreatives.com homepage, October 2026.

   Direction taken from the Bearplus / Heron AI site she picked off the
   Awwwards winners: warm paper, a hairline drawing sheet with crop marks,
   micro-labels in ruled cells, one big technical drawing, and a single
   accent used only on small links.

   Adapted rather than copied. Heron's centrepiece is an architectural
   elevation. Ours is a dimensioned wireframe of a website, because that is
   what this studio actually draws, and the thirteen live builds are listed
   underneath as a numbered schedule rather than as cards.

   Own namespace (bp-*), so htc.css cannot reach it.
   ============================================================ */

.bp{
  --paper:#f3f1ec;
  --ink:#16160f;
  --grey:#5f5f58;
  --faint:#8d8d85;
  --rule:rgba(22,22,15,.2);
  --acc:#d8431f;
  --g:"Archivo","Helvetica Neue",Arial,sans-serif;
  --m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--paper);color:var(--ink);font-family:var(--g);
  -webkit-font-smoothing:antialiased;
}
.bp *{box-sizing:border-box}
.bp a{color:inherit;text-decoration:none}
.bp img,.bp svg{display:block;max-width:100%}

.bp-lab{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.bp-link{font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.bp-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- the sheet: a hairline frame with crop marks ---- */
.bp-sheet{position:relative;margin:clamp(.5rem,1.4vw,1rem);border:1px solid var(--rule);min-height:calc(100svh - clamp(1rem,2.8vw,2rem))}
.bp-sheet::before,.bp-sheet::after{content:"+";position:absolute;font-family:var(--m);font-size:.8rem;color:var(--faint);line-height:1}
.bp-sheet::before{top:-.52rem;left:-.35rem}
.bp-sheet::after{bottom:-.52rem;right:-.35rem}

/* ---- nav, divided into ruled cells ---- */
.bp-nav{display:flex;flex-wrap:wrap;align-items:stretch;border-bottom:1px solid var(--rule)}
.bp-nav__brand{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.15rem;font-weight:700;
  letter-spacing:-.02em;font-size:.98rem;border-right:1px solid var(--rule)}
.bp-nav__brand svg{width:18px;height:18px}
.bp-nav__sp{flex:1;border-right:1px solid var(--rule)}
.bp-nav a.bp-cell{padding:.9rem 1.15rem;display:flex;align-items:center;border-right:1px solid var(--rule);
  font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.bp-nav a.bp-cell:last-child{border-right:0;color:var(--acc)}
.bp-nav a.bp-cell:hover{background:rgba(22,22,15,.04)}

/* ---- drawing ---- */
.bp-draw{padding:clamp(1.5rem,4.5vw,3.5rem) clamp(1rem,4vw,3rem);display:flex;justify-content:center}
.bp-draw svg{width:100%;max-width:980px;height:auto}

/* ---- statement row, headline left, note right ---- */
.bp-state{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0;border-top:1px solid var(--rule)}
.bp-state__h{padding:clamp(1.1rem,2.6vw,1.9rem) clamp(1rem,3vw,1.6rem);border-right:1px solid var(--rule)}
.bp-state h1{margin:0;font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.035em;
  font-size:clamp(1.65rem,4.6vw,3.5rem)}
.bp-state__n{padding:clamp(1.1rem,2.6vw,1.9rem) clamp(1rem,3vw,1.6rem);display:flex;flex-direction:column;gap:.9rem;justify-content:space-between}
.bp-state__n p{margin:0;font-size:.92rem;line-height:1.55;color:var(--grey);max-width:44ch}

/* ---- tick row ---- */
.bp-ticks{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule)}
.bp-ticks span{flex:1 1 auto;padding:.75rem 1.15rem;border-right:1px solid var(--rule);
  font-family:var(--m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.bp-ticks span:last-child{border-right:0}
.bp-ticks b{color:var(--ink);font-weight:500}

/* ---- schedule of builds ---- */
.bp-sec{margin:clamp(.5rem,1.4vw,1rem);border:1px solid var(--rule);border-top:0}
.bp-sec__h{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:baseline;
  padding:clamp(1rem,2.4vw,1.6rem) clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--rule)}
.bp-sec__h h2{margin:0;font-size:clamp(1.1rem,2.4vw,1.7rem);font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.bp-row{display:grid;grid-template-columns:4.2rem minmax(0,1.5fr) minmax(0,1fr) 7rem 2.2rem;
  gap:1rem;align-items:center;padding:.9rem clamp(1rem,3vw,1.6rem);border-bottom:1px solid var(--rule);
  transition:background .15s ease}
.bp-row:last-child{border-bottom:0}
.bp-row:hover{background:rgba(22,22,15,.04)}
.bp-row__n{font-family:var(--m);font-size:.7rem;color:var(--faint)}
.bp-row__t{font-weight:700;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(.95rem,1.7vw,1.15rem)}
.bp-row__d{font-size:.88rem;color:var(--grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-row__y{font-family:var(--m);font-size:.7rem;color:var(--faint);text-align:right}
.bp-row__a{font-family:var(--m);font-size:.8rem;color:var(--acc);text-align:right}

/* ---- price spec ---- */
.bp-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.bp-spec > div{padding:clamp(1rem,2.4vw,1.5rem);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bp-spec > div:last-child{border-right:0}
.bp-spec h3{margin:0 0 .5rem;font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400}
.bp-spec .fig{font-size:clamp(1.3rem,2.8vw,1.9rem);font-weight:700;letter-spacing:-.025em}
.bp-spec p{margin:.5rem 0 0;font-size:.86rem;line-height:1.5;color:var(--grey)}

/* ---- close ---- */
.bp-end{padding:clamp(2rem,5vw,4rem) clamp(1rem,3vw,1.6rem);display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem 2rem;align-items:end}
.bp-end h2{margin:0;font-weight:700;text-transform:uppercase;line-height:.94;letter-spacing:-.035em;
  font-size:clamp(1.6rem,4.4vw,3.2rem)}
.bp-end p{margin:0;font-size:.92rem;color:var(--grey);line-height:1.55}
.bp-btn{display:inline-block;margin-top:.9rem;border:1px solid var(--ink);padding:.8rem 1.4rem;
  font-family:var(--m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.bp-btn:hover{background:var(--ink);color:var(--paper)}

@media (max-width:860px){
  .bp-state{grid-template-columns:1fr}
  .bp-state__h{border-right:0;border-bottom:1px solid var(--rule)}
  .bp-end{grid-template-columns:1fr}
  .bp-row{grid-template-columns:3rem 1fr 2rem;gap:.6rem}
  .bp-row__d,.bp-row__y{display:none}
  .bp-ticks span{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--rule)}
  .bp-ticks span:last-child{border-bottom:0}
  .bp-nav__sp{display:none}
  .bp-nav__brand{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--rule)}
}

/* htc.css sets font-family on h1..h6 directly, which beats inheritance from
   .bp, so every heading silently fell back to Inter Tight. Same trap as the
   previous build: set the face on each heading, not just the wrapper. */
.bp h1,.bp h2,.bp h3,.bp-state h1,.bp-sec__h h2,.bp-end h2,.bp-row__t,.bp-spec .fig{font-family:var(--g)}
.bp-spec h3{font-family:var(--m)}