/* Bloomhouse Labs — architectural project-book.
   Type: Libre Caslon Display (display) · IBM Plex Sans (body) · IBM Plex Mono (technical).
   Signature: hairline drafting plates with terracotta registration ticks. */

:root{
  --paper:#F4F1EA; --raised:#FFFFFF; --ink:#1A1A17; --muted:#5C5C54;
  --accent:#1F3D2B; --accent-ink:#F4F1EA; --tick:#B5502E;
  --rule:color-mix(in srgb, var(--ink) 14%, transparent);
  --rule-strong:color-mix(in srgb, var(--ink) 24%, transparent);

  --serif:"Libre Caslon Display", Georgia, "Times New Roman", serif;
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --f-13:0.8125rem; --f-16:1rem; --f-20:1.25rem; --f-28:1.75rem;
  --f-44:clamp(2.1rem,4.5vw,2.75rem); --f-72:clamp(2.9rem,7vw,4.5rem); --f-112:clamp(3.4rem,10vw,7rem);

  --maxw:72rem; --pad:clamp(1.15rem,4vw,2.5rem);
  --bp: 52rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#14140F; --raised:#1C1C16; --ink:#F4F1EA; --muted:#A7A79C;
    --accent:#8FBF9F; --accent-ink:#12160F; --tick:#C9744F;
    --rule:color-mix(in srgb, var(--ink) 16%, transparent);
    --rule-strong:color-mix(in srgb, var(--ink) 28%, transparent);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--f-16); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.is-hidden{display:none !important}

/* ---- shared type ---- */
.eyebrow{
  font-family:var(--mono); font-size:var(--f-13); letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 1rem;
}
.eyebrow::before{content:"— "; opacity:.7}
.section-title{
  font-family:var(--serif); font-weight:400; font-size:var(--f-44);
  line-height:1.06; letter-spacing:-0.01em; max-width:20ch;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 1.4rem; border:1px solid transparent;
  font-family:var(--sans); font-weight:600; font-size:var(--f-16);
  text-decoration:none; border-radius:2px; transition:background .15s, color .15s;
}
.btn--call{background:var(--accent); color:var(--accent-ink)}
.btn--call:hover{background:color-mix(in srgb, var(--accent) 86%, var(--ink))}
.btn--email{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--email:hover{background:var(--ink); color:var(--paper)}
.btn--paper{background:var(--paper); color:var(--ink)}
.btn--paper:hover{background:color-mix(in srgb, var(--paper) 88%, #000)}
.btn--ghost{background:transparent; color:var(--paper); border-color:color-mix(in srgb, var(--paper) 55%, transparent)}
.btn--ghost:hover{background:color-mix(in srgb, var(--paper) 14%, transparent)}
.cta-row{display:flex; gap:.75rem; flex-wrap:wrap}

/* ---- header ---- */
.site-head{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-head__row{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.wordmark{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-weight:600; letter-spacing:.01em}
.wordmark__mark{width:26px; height:26px; stroke:var(--accent); fill:none}
.site-head__call{display:none; min-height:42px}

/* ---- sheet motif: continuous hairline at the left content margin ---- */
.sheet{position:relative}
/* sits only in the real outer gutter on wide screens; never over content */
.sheet::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc((100vw - var(--maxw)) / 2);
  width:1px; background:var(--rule); display:none; pointer-events:none;
}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden}
.hero__grid{padding-block:clamp(2.5rem,7vw,5.5rem)}
.hero__copy{max-width:34rem}
.hero__title{
  font-family:var(--serif); font-weight:400; font-size:var(--f-72);
  line-height:1.03; letter-spacing:-0.015em; margin:.15em 0 .5em;
}
.hero__sub{font-size:var(--f-20); color:var(--muted); max-width:42ch; margin:0 0 1.75rem}
.hero__media{margin:0}
.hero__media img{width:100%; aspect-ratio:4/3; object-fit:cover}

/* ---- trust strip ---- */
.trust{background:var(--raised); border-block:1px solid var(--rule)}
.trust__list{list-style:none; margin:0; padding-block:1.75rem; display:grid; gap:1.25rem}
.trust__list li{color:var(--muted); padding-left:2.6rem; position:relative}
.trust__list strong{color:var(--ink); font-weight:600}
.trust__tag{
  position:absolute; left:0; top:.05rem; font-family:var(--mono);
  font-size:var(--f-13); color:var(--accent); letter-spacing:.08em;
}

/* ---- services: drafting plates ---- */
.services{padding-block:clamp(3rem,9vw,6rem)}
.services .section-title{margin-bottom:2.5rem}
.plates{display:grid; gap:clamp(2.5rem,6vw,4rem)}
.service{display:grid; gap:1.25rem}
.plate{display:grid; grid-template-columns:1fr 1fr; gap:clamp(.6rem,2vw,1.1rem)}
.plate__fig{
  position:relative; margin:0; border:1px solid var(--rule-strong);
  background:var(--raised);
}
.plate__fig img{width:100%; aspect-ratio:4/3; object-fit:cover; padding:6px}
.plate__cap{
  position:absolute; left:.6rem; bottom:.6rem; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); background:color-mix(in srgb, var(--ink) 80%, transparent);
  padding:.2rem .5rem; border-radius:1px;
}
.plate__cap--after{background:color-mix(in srgb, var(--accent) 88%, transparent); color:var(--accent-ink)}
.plate__cap{white-space:nowrap; max-width:calc(100% - 1.2rem); overflow:hidden; text-overflow:ellipsis}
.cap-lg{display:none} .cap-sm{display:inline}
/* registration ticks */
.tick{position:absolute; width:11px; height:11px; z-index:3; pointer-events:none}
.tick::before,.tick::after{content:""; position:absolute; background:var(--tick)}
.tick::before{left:0; top:5px; width:11px; height:1.5px}
.tick::after{left:5px; top:0; width:1.5px; height:11px}
.tick--tl{left:-1px; top:-1px} .tick--tr{right:-1px; top:-1px}
.tick--bl{left:-1px; bottom:-1px} .tick--br{right:-1px; bottom:-1px}
.service__title{font-family:var(--serif); font-weight:400; font-size:var(--f-28); margin-bottom:.25rem}
.service__body p{color:var(--muted); margin:0; max-width:52ch}

/* ---- how we work: mono spec sheet ---- */
.how{background:var(--raised); border-block:1px solid var(--rule); padding-block:clamp(3rem,9vw,6rem)}
.how .section-title{margin-bottom:2.5rem}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:0}
.step{
  display:grid; grid-template-columns:auto 1fr; column-gap:1.5rem; row-gap:.3rem;
  padding:1.75rem 0; border-top:1px solid var(--rule);
}
.step:last-child{border-bottom:1px solid var(--rule)}
.step__num{
  grid-row:span 2; font-family:var(--mono); font-size:var(--f-20); color:var(--accent);
  letter-spacing:.05em; padding-top:.2rem;
}
.step__title{font-family:var(--serif); font-weight:400; font-size:var(--f-28); line-height:1.1}
.step p{color:var(--muted); margin:0; max-width:56ch}

/* ---- founder ---- */
.founder{padding-block:clamp(3rem,9vw,6rem)}
.founder__grid{display:grid; gap:2rem}
.founder__photo{margin:0; position:relative; border:1px solid var(--rule-strong); background:var(--raised)}
.founder__photo img{width:100%; aspect-ratio:5/6; object-fit:cover; padding:6px}
.founder__note .section-title{max-width:16ch; margin-bottom:1rem}
.founder__note p{color:var(--muted); font-size:var(--f-20); max-width:48ch}

/* ---- service area ---- */
.area{background:var(--raised); border-block:1px solid var(--rule); padding-block:clamp(2.5rem,7vw,4.5rem)}
.area__list{font-family:var(--serif); font-size:var(--f-28); line-height:1.4; max-width:34ch; margin:.5rem 0}
.area__list i{font-family:var(--mono); color:var(--tick); font-style:normal; font-size:.7em; padding:0 .2em; vertical-align:.12em}
.area__note{color:var(--muted); margin:0}

/* ---- reviews (disabled by default) ---- */
.reviews{padding-block:clamp(3rem,9vw,6rem)}
.reviews__list{list-style:none; padding:0; margin:2rem 0; display:grid; gap:1.5rem}
.review p{font-size:var(--f-20); margin:0 0 .6rem}
.review cite{font-family:var(--mono); font-size:var(--f-13); color:var(--muted); font-style:normal; letter-spacing:.04em}

/* ---- footer: solid green plate ---- */
.foot{background:var(--accent); color:var(--accent-ink)}
.foot .eyebrow--on-green{color:color-mix(in srgb, var(--accent-ink) 78%, transparent)}
.foot__grid{display:grid; gap:2.5rem; padding-block:clamp(3rem,8vw,5rem)}
.foot__title{font-family:var(--serif); font-weight:400; font-size:var(--f-44); line-height:1.06; max-width:16ch; margin:0 0 1.75rem}
.foot__facts{display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.25rem; margin:0; align-content:start}
.foot__facts dt{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.8; align-self:center}
.foot__facts dd{margin:0}
.foot__facts a{text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent-ink) 40%, transparent)}
.foot__legal{
  font-family:var(--mono); font-size:var(--f-13); letter-spacing:.04em;
  opacity:.75; padding-block:1.5rem; border-top:1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
}

/* ---- sticky mobile contact bar ---- */
.mobile-bar{
  position:fixed; inset:auto 0 0 0; z-index:30;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule-strong);
  box-shadow:0 -1px 0 var(--rule-strong);
}
.mobile-bar__btn{
  min-height:58px; display:flex; align-items:center; justify-content:center;
  font-weight:600; text-decoration:none; letter-spacing:.02em;
}
.mobile-bar__call{background:var(--accent); color:var(--accent-ink)}
.mobile-bar__email{background:var(--raised); color:var(--ink)}

/* ================= responsive ================= */
@media (min-width:52rem){
  .site-head__call{display:inline-flex}

  .hero__grid{padding-block:clamp(4rem,9vw,7rem); padding-right:44%}
  .hero__media{position:absolute; top:0; right:0; width:46%; height:100%}
  .hero__media img{height:100%; aspect-ratio:auto}

  .trust__list{grid-template-columns:repeat(3,1fr); gap:2rem}
  .trust__list li{padding-left:0; padding-top:2.2rem}
  .trust__tag{top:0}

  .plate__cap{font-size:12px}
  .cap-lg{display:inline} .cap-sm{display:none}
  .service{grid-template-columns:1.35fr 1fr; gap:clamp(1.5rem,3vw,2.75rem); align-items:center}
  .service__body{padding-right:1rem}

  .steps{grid-template-columns:1fr 1fr; column-gap:3.5rem}
  .step{border-top:1px solid var(--rule)}
  .step:nth-last-child(2){border-bottom:1px solid var(--rule)}

  .founder__grid{grid-template-columns:.8fr 1.2fr; gap:3.5rem; align-items:center}

  .reviews__list{grid-template-columns:repeat(3,1fr)}

  .foot__grid{grid-template-columns:1.3fr 1fr; gap:4rem; align-items:start}

  .mobile-bar{display:none}
}

/* sheet-edge rule only where a genuine margin gutter exists */
@media (min-width:74rem){
  .sheet::before{display:block}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}