/* CB Construction Group - one stylesheet, no framework, no build step.
   Charcoal and the brand's own gold on warm off-white: readable outdoors on a
   phone. --accent is the gold of the client's pack, #fec001, used for fills and
   buttons; --accent-2 is that hue taken down until it passes contrast as text,
   because gold on paper cannot be read. Keep both in step with the gold the
   mark carries in assets/img/logo.svg. */
:root{
  --ink:#15181c;--ink-2:#22262c;--paper:#faf9f7;--white:#fff;--line:#ded9d1;
  --muted:#5c636e;--accent:#fec001;--accent-2:#9d5b12;--r:10px;--wrap:1120px;
  --shadow:0 1px 2px rgba(21,24,28,.06),0 10px 30px rgba(21,24,28,.07);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.3rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.15rem;margin-bottom:.35em}
p{margin:0 0 1em}
a{color:var(--accent-2);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0 0 1em;padding-left:1.2rem}
li{margin:.25em 0}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:.6rem 1rem}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:800px}
.eyebrow{display:inline-block;margin:0 0 .6rem;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.lead{font-size:1.12rem;color:var(--muted);max-width:62ch}
/* The monogram on its own, for a page that has no tile of its own. */
.mark-lg{width:150px;height:auto;margin:0 0 1.4rem}
.muted{color:var(--muted)}
.center{text-align:center}
section{padding:4rem 0}
section.tight{padding:2.5rem 0}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,249,247,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);font-weight:700}
.brand img{width:40px;height:40px}
.brand b{display:block;font-size:1rem;letter-spacing:-.01em}
.brand small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a{color:var(--ink);font-weight:600;font-size:.95rem}
.nav a[aria-current="page"]{color:var(--accent-2)}
.nav-cta{display:flex;align-items:center;gap:.7rem}
.tel{font-weight:700;white-space:nowrap;color:var(--ink)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;
  padding:.45rem .6rem;font:inherit;font-weight:700;cursor:pointer}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.25rem;border:1px solid transparent;border-radius:var(--r);
  font-weight:700;font-size:.98rem;cursor:pointer;transition:transform .12s,background .12s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#1b1305}
.btn-primary:hover{background:#ffd402}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;
  background-color:var(--ink);
  background-image:linear-gradient(160deg,#12151a 0%,#1d232b 60%,#243040 100%)}
.hero::after{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;z-index:1;padding:4.5rem 20px 4rem}
.hero h1{color:#fff;max-width:22ch}
.hero p{color:#d7dae0;max-width:60ch}
.hero .eyebrow{color:#fec001}
.badges{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1.75rem 0 0;padding:0;list-style:none;
  font-size:.9rem;font-weight:600;color:#e7e9ee}
.badges li{display:flex;align-items:center;gap:.45rem}
.badges li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* ---------- layout blocks ---------- */
.grid{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.split{display:grid;gap:2rem;grid-template-columns:1.05fr .95fr;align-items:start}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;box-shadow:var(--shadow)}
.card h3{display:flex;align-items:center;gap:.6rem}
.card p{margin-bottom:0;color:var(--muted)}
/* A service's glyph: cut from the client's own tile, so it is their drawing on
   the site's ink, rounded like the tile in the header. */
.chip{flex:none;width:36px;height:36px}
.band{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding-left:1.7rem;margin:.6em 0}
.checks li::before{content:"";position:absolute;left:0;top:.5em;width:.72rem;height:.4rem;
  border-left:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);transform:rotate(-45deg)}
.step{display:flex;gap:1rem;align-items:flex-start}
.step b{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:.95rem}
.step h3{margin-bottom:.2em}
.step p{margin:0;color:var(--muted)}
/* ---------- the supplied pictures ----------
   What we do, as pictures: the pack's own three cards, the four drawn to match
   in brand/cards, and the two statements. A card is close to 5:3 whichever way
   it was cut, so the frame fixes the shape and the crop takes the difference. */
.scope{margin:0;aspect-ratio:491/292;background:var(--ink);border:1px solid rgba(21,24,28,.28);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.scope a{display:block;height:100%}
.scope img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.scope a:hover img{transform:scale(1.02)}
/* A brand statement, at its own size on the brand's own ink, so nothing is
   stretched to fill a column it was not cut for - only shrunk, and only by a
   phone narrower than the picture. */
.statement{margin:0;display:grid;place-items:center;background:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.statement img{margin:0 auto;max-width:100%;height:auto}
.banner-wide{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* ---------- projects ---------- */
.shot{margin:0}
.shot .frame{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:linear-gradient(135deg,#eae6df,#d8d2c8)}
.shot .frame img{width:100%;height:100%;object-fit:cover}
.shot figcaption{padding:.7rem .2rem 0;font-size:.92rem;color:var(--muted)}
/* The projects page: pictures chosen in the office, laid out by the site. */
.gallery .shot figcaption strong{color:var(--ink);font-weight:700}
.gallery .shot figcaption{padding-top:.8rem}
/* Four frames the office can choose per picture, all drawn from the tokens above, so a
   change of brand reaches them without anybody editing a page. `shot` alone is the
   bordered picture the gallery has always had. */
.shot-plain .frame{border:0;border-radius:0}
.shot-shadow .frame{border:0;box-shadow:0 10px 24px rgba(20,18,16,.16)}
.shot-boxed{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .7rem 1rem;box-shadow:0 2px 10px rgba(20,18,16,.06)}
.shot-boxed .frame{border:0}
.shot-boxed figcaption{padding-left:.2rem;padding-right:.2rem}
.holder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  gap:.2rem;padding:1rem;font-size:.85rem;font-weight:600;color:#6d6a63}
.holder small{font-weight:500;opacity:.75}
/* ---------- faq ---------- */
details.faq{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.15rem;margin:0 0 .7rem}
details.faq summary{font-weight:700;cursor:pointer}
details.faq p{margin:.6rem 0 0;color:var(--muted)}
/* ---------- contact ---------- */
.band-ink{background:var(--ink);color:#fff;border-radius:var(--r);padding:2.25rem;
  display:grid;gap:1.5rem;grid-template-columns:1.2fr auto;align-items:center}
.band-ink h2{color:#fff;margin-bottom:.3rem}
.band-ink p{color:#cfd3da;margin:0}
form{display:grid;gap:1rem;max-width:640px}
label{font-weight:600;font-size:.92rem;display:block;margin-bottom:.3rem}
input,select,textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:8px;font:inherit;background:var(--white);color:var(--ink)}
textarea{min-height:140px;resize:vertical}
.req{color:#b3261e}
.hp{position:absolute;left:-9999px}
.note{font-size:.88rem;color:var(--muted)}
/* ---------- footer ---------- */
.site-footer{background:var(--ink-2);color:#c9ccd2;padding:3rem 0 2rem;font-size:.92rem}
.site-footer a{color:#e6c79a}
.site-footer h3{color:#fff;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:.8rem}
.site-footer .grid{gap:2rem}
.site-footer ul{list-style:none;padding:0;margin:0}
/* The client's tagline, under the wordmark in the footer's brand column. Set in the
   footer's gold at reading size rather than as a second tracked-out uppercase line:
   it is the brand's sign-off, not another label. balance evens the lines out when the
   column is narrow. On the desktop grid the column is about 250px wide, so the line
   breaks after "Our craft. Your trust." - the non-breaking space in the markup is what
   stops it stranding the article "A" at the end of a line. */
.site-footer .slogan{color:#e6c79a;font-size:.98rem;font-weight:600;margin:0 0 .7rem;
  text-wrap:balance}
.legal{margin-top:2rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.85rem}
/* ---------- responsive ---------- */
@media (max-width:860px){
  .split,.band-ink{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--line);
    padding:.25rem 20px .75rem}
  .nav.open{display:flex}
  .nav a{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .nav-cta{display:none}
  .hero .wrap{padding:3rem 20px}
  section{padding:3rem 0}
}
@media print{.site-header,.site-footer,.band-ink,.btn{display:none}body{background:#fff}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}