/* ═══════════════════════════════════════════════════════════════════
   MB Brickwork & Building
   Palette sampled directly from the logo — see docs/brand.md
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#0B0B0C;
  --ink-2:#121214;
  --ink-3:#191A1D;
  --line:#2A2B2F;
  --steel:#B8B3B0;
  --steel-2:#8A8785;
  --steel-3:#6A6A6A;
  --amber:#FF9E1C;
  --amber-2:#E8821A;
  --amber-3:#7A4408;
  --paper:#FCF2E8;
  --bad:#FF6B5A;
  --good:#5BD08A;

  /* ── Brick, sampled from MB's own job photos ──────────────────────
     The photos give muted, weathered tones (#78483C, #6C3C30) under a grey
     Manchester sky. --brick-deep comes straight from them; --brick lifts the
     same hue so it reads as brickwork rather than a generic red. */
  --brick:#A34428;
  --brick-2:#C25A38;
  --brick-deep:#6C3C30;
  --brick-wash:rgba(163,68,40,.065);

  /* ── Light surfaces ───────────────────────────────────────────────
     Warm off-whites, never a cold grey — cold white fights both the amber
     and the brick. */
  --l-bg:#F8F5F0;
  --l-bg-alt:#F1EAE1;
  --l-card:#FFFFFF;
  --l-head:#1C1714;
  --l-body:#544A42;
  --l-muted:#7C6F65;
  --l-line:#E5DBD0;

  --wrap:1180px;
  --r:14px;

  --f-display:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--steel);
  font:400 17px/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-underline-offset:3px}

h1,h2,h3{
  font-family:var(--f-display);
  color:var(--paper);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  margin:0;
}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
/* The header is sticky, so an anchor jump would otherwise land with the
   section heading hidden underneath it. */
section[id]{scroll-margin-top:90px}
@media (max-width:520px){section[id]{scroll-margin-top:74px}}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--amber);color:#241300;padding:.8rem 1.2rem;
  font:700 1rem/1 var(--f-display);border-radius:0 0 8px 0;
}
.skip:focus{left:0}

.eyebrow{
  font:700 .78rem/1 var(--f-display);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);margin:0 0 1rem;
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,var(--amber-3),transparent);
}
.lede{font-size:clamp(1.02rem,1.6vw,1.16rem);max-width:62ch;margin:1.1rem 0 0}

/* Brick-bond texture, radially masked so it fades rather than tiling out */
.brick-bg{position:relative;isolation:isolate}
.brick-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,158,28,.055) 38px 39px),
    repeating-linear-gradient(90deg,transparent 0 84px,rgba(255,158,28,.055) 84px 85px);
  -webkit-mask-image:radial-gradient(120% 85% at 50% 0,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 85% at 50% 0,#000 35%,transparent 78%);
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:9px;border:1px solid transparent;
  font:700 1rem/1 var(--f-display);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease,filter .18s ease,background .18s ease,border-color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(180deg,var(--amber),var(--amber-2));
  color:#241300;
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 10px 26px -12px rgba(255,158,28,.85);
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--steel-3);background:rgba(255,255,255,.035)}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;border-radius:6px;
}

/* ─── Header ─────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,12,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* The logo artwork ships on a black ground with no alpha; `screen` drops that
   black out against any dark surface. Only safe on dark surfaces. */
.brand img,.site-footer img{mix-blend-mode:screen}
.brand img{height:52px;width:auto}
.nav{display:flex;gap:1.9rem;margin-left:auto}
.nav a{
  color:var(--steel);text-decoration:none;
  font:600 .95rem/1 var(--f-body);padding:.4rem 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--amber);transition:right .22s ease;
}
.nav a:hover{color:var(--paper)}
.nav a:hover::after{right:0}
.header-cta{margin-left:1.6rem;white-space:nowrap;padding:.7rem 1.15rem}
@media (max-width:880px){
  .nav{display:none}
  .header-cta{margin-left:auto}
}
@media (max-width:520px){
  .site-header .wrap{min-height:64px;gap:.75rem}
  .brand img{height:38px}
  .header-cta{padding:.6rem .9rem;font-size:.92rem}
}

/* ─── Hero ───────────────────────────────────────────────────────── */
.hero{
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5rem);
  background:
    radial-gradient(90% 120% at 78% -10%,rgba(255,158,28,.13),transparent 58%),
    linear-gradient(180deg,#0E0E10,var(--ink));
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:center}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:1.08fr .92fr;gap:3.5rem}
}
.hero-shot{margin:0;position:relative}
.hero-shot img{
  width:100%;border-radius:var(--r);
  border:1px solid var(--line);
  aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
/* Warm the photo into the palette so it doesn't sit apart from the page */
.hero-shot::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.55));
  box-shadow:inset 0 0 0 1px rgba(255,158,28,.14);
}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);text-transform:uppercase;letter-spacing:-.025em}
/* Must come after the base rule above, not inside the earlier .hero-grid media
   block, or source order would override it. Once the headline shares the row
   with the photo it cannot run full-width size — at 4.6rem "BUILDING WORK OF"
   breaks mid-phrase. */
@media (min-width:1000px){
  .hero h1{font-size:clamp(2.4rem,3.1vw,3rem)}
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(180deg,#FFC06A,var(--amber) 45%,var(--amber-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{font-size:clamp(1.06rem,1.9vw,1.28rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

.tagline{
  display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;
  margin:0 0 1.5rem;padding:0;list-style:none;
  font:700 .8rem/1 var(--f-display);
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel-2);
}
.tagline li{display:flex;align-items:center;gap:1.4rem}
.tagline li:not(:last-child)::after{content:"";width:5px;height:5px;rotate:45deg;background:var(--amber)}

.trust{
  display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;
  margin-top:3.2rem;padding-top:1.9rem;border-top:1px solid var(--line);
  font:600 .92rem/1.3 var(--f-body);color:var(--steel-2);
}
.trust span{display:flex;align-items:center;gap:.6rem}
.trust svg{flex:0 0 auto;color:var(--amber)}

/* ─── Cards ──────────────────────────────────────────────────────── */
.grid-services{
  display:grid;gap:1rem;margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.card{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.5rem;position:relative;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--amber),transparent 70%);
  opacity:0;transition:opacity .25s ease;
}
.card:hover{border-color:#3A3B40;transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.5rem}
.card p{margin:0;font-size:.96rem;color:var(--steel-2)}
.ico{
  width:42px;height:42px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,158,28,.1);
  border:1px solid rgba(255,158,28,.24);
  color:var(--amber);
}
.card .ico{margin-bottom:1.05rem}

/* ─── Gallery ────────────────────────────────────────────────────── */
.gallery{
  display:grid;gap:.85rem;margin-top:2.8rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.shot{
  display:block;position:relative;overflow:hidden;
  border-radius:11px;border:1px solid var(--line);
  background:var(--ink-3);line-height:0;
  transition:border-color .2s ease,transform .2s ease;
}
.shot img{
  width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .45s ease,filter .25s ease;
  filter:saturate(.92) contrast(1.02);
}
.shot:hover{border-color:var(--amber-3);transform:translateY(-2px)}
.shot:hover img{transform:scale(1.05);filter:saturate(1.05) contrast(1.04)}

/* Lightbox — only ever shown once the script upgrades it */
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(6,6,7,.94);padding:1.5rem;
}
.lb.open{display:flex}
.lb img{
  max-width:min(100%,1400px);max-height:88vh;
  border-radius:10px;border:1px solid var(--line);
}
.lb-close{
  position:absolute;top:1rem;right:1rem;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--ink-3);border:1px solid var(--line);color:var(--paper);
  font:400 1.6rem/1 var(--f-body);
}
.lb-close:hover{border-color:var(--amber);color:var(--amber)}
.lb-nav{
  position:absolute;top:50%;translate:0 -50%;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--ink-3);border:1px solid var(--line);color:var(--paper);
  font:400 1.5rem/1 var(--f-body);
}
.lb-nav:hover{border-color:var(--amber);color:var(--amber)}
.lb-prev{left:1rem}
.lb-next{right:1rem}
@media (max-width:600px){.lb-nav{width:40px;height:40px}}

/* ─── Testimonials ───────────────────────────────────────────────── */
.section-alt{
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border-block:1px solid var(--line);
}
.grid-quotes{
  display:grid;gap:1rem;margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.quote{
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);
  padding:1.75rem 1.6rem 1.5rem;display:flex;flex-direction:column;gap:1.1rem;
}
.stars{display:flex;gap:.18rem;color:var(--amber)}
.quote blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--paper)}
.quote figcaption{
  margin-top:auto;padding-top:.4rem;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--steel-3);
}
.quote figcaption b{display:block;color:var(--steel);font-size:.96rem;font-weight:700}

/* Placeholder flagging — must stay visually unmistakable */
.is-placeholder{border-style:dashed;border-color:#4A3A18}
.placeholder-tag{
  align-self:flex-start;
  font:700 .68rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;
  color:#0B0B0C;background:var(--amber);padding:.34rem .55rem;border-radius:4px;
}
.placeholder-note{
  margin-top:1.75rem;padding:.9rem 1.1rem;
  border:1px dashed #4A3A18;border-radius:9px;
  background:rgba(255,158,28,.05);font-size:.92rem;color:var(--steel-2);
}
.placeholder-note strong{color:var(--paper)}
.placeholder-note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;color:var(--amber);
}

/* ─── Contact ────────────────────────────────────────────────────── */
.contact-layout{display:grid;gap:2.5rem;margin-top:2.8rem;grid-template-columns:1fr}
@media (min-width:940px){.contact-layout{grid-template-columns:1fr 1.15fr;gap:3.5rem}}

.contact-points{display:flex;flex-direction:column;gap:1.4rem;margin:2rem 0 0;padding:0;list-style:none}
.contact-points li{display:flex;gap:1rem;align-items:flex-start}
.contact-points .ico{flex:0 0 auto}
.contact-points b{display:block;color:var(--paper);font-size:1rem}
.contact-points a{color:var(--steel);text-decoration:none}
.contact-points a:hover{color:var(--amber)}
.contact-points .big{font:800 1.35rem/1.2 var(--f-display);color:var(--paper);letter-spacing:-.01em}
.contact-points .big:hover{color:var(--amber)}

form{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.2rem);
}
.field{margin-bottom:1.15rem}
.field-row{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
label{display:block;margin-bottom:.45rem;font:600 .88rem/1 var(--f-body);color:var(--steel)}
label .req{color:var(--amber)}
input,select,textarea{
  width:100%;padding:.82rem .9rem;
  background:#0D0D0F;color:var(--paper);
  border:1px solid #303136;border-radius:8px;
  font:400 1rem/1.4 var(--f-body);
  transition:border-color .18s ease,background .18s ease;
}
input::placeholder,textarea::placeholder{color:#5C5C60}
input:hover,select:hover,textarea:hover{border-color:#3E3F45}
input:focus,select:focus,textarea:focus{border-color:var(--amber);background:#0F0F12}
textarea{resize:vertical;min-height:130px}
select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238A8785' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem;
}
[aria-invalid="true"]{border-color:var(--bad)}
.err{margin:.45rem 0 0;font-size:.86rem;color:var(--bad)}

.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.5rem}
.form-foot .btn{flex:0 0 auto}
.form-note{font-size:.85rem;color:var(--steel-3);margin:0;flex:1 1 200px}

/* Honeypot — off-screen for people, present in the DOM for bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{
  margin:0 0 1.25rem;padding:.95rem 1.15rem;border-radius:9px;
  font-size:.96rem;border:1px solid;
}
.alert-ok{color:var(--good);border-color:rgba(91,208,138,.35);background:rgba(91,208,138,.08)}
.alert-bad{color:var(--bad);border-color:rgba(255,107,90,.35);background:rgba(255,107,90,.08)}

/* ─── Footer ─────────────────────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--line);padding:3rem 0 2.5rem;
  background:var(--ink-2);font-size:.92rem;color:var(--steel-3);
}
.footer-top{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;justify-content:space-between}
.site-footer img{height:58px;width:auto}
.footer-contact b{color:var(--paper);display:block;margin-bottom:.6rem}
.footer-contact p{margin:0 0 .35rem}
.footer-contact a{color:var(--steel);text-decoration:none}
.footer-contact a:hover{color:var(--amber)}
.socials{display:flex;gap:.7rem;margin-top:1.1rem}
.socials a{
  width:40px;height:40px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--steel-2);
  transition:color .18s ease,border-color .18s ease;
}
.socials a:hover{color:var(--amber);border-color:var(--amber-3)}
.footer-bar{
  margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
}
.footer-bar p{margin:0}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT SECTIONS
   The page is a dark frame — header, hero, contact, footer — wrapped around
   a light middle. Keeping the header and footer dark means the logo can stay
   on its black ground via mix-blend-mode; it has no transparent variant, so
   putting it on a light surface would show a black box.

   Placed after the dark rules deliberately: these override by source order,
   the same trap that bit the hero headline earlier.
   ═══════════════════════════════════════════════════════════════════ */

.section-light,
.section-light-alt{
  position:relative;
  background:var(--l-bg);
  color:var(--l-body);
  border-block:0;
}
.section-light-alt{background:var(--l-bg-alt)}

/* A single course of bricks along the top edge, marking each light section.
   Two offset gradients give the running bond its half-brick stagger. */
.section-light::before,
.section-light-alt::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:10px;
  background-color:var(--brick);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.18));
  opacity:.85;
}

.section-light h2,.section-light h3,
.section-light-alt h2,.section-light-alt h3{color:var(--l-head)}

.section-light .lede,
.section-light-alt .lede{color:var(--l-body)}

/* Eyebrow switches from amber to brick on light — amber on off-white is weak,
   and it keeps amber reserved for things you can click. */
.section-light .eyebrow,
.section-light-alt .eyebrow{color:var(--brick)}
.section-light .eyebrow::after,
.section-light-alt .eyebrow::after{
  background:linear-gradient(90deg,rgba(163,68,40,.45),transparent);
}

/* ── Cards on light ─────────────────────────────────────────────── */
.section-light .card,
.section-light-alt .card{
  background:var(--l-card);
  border:1px solid var(--l-line);
  box-shadow:0 1px 2px rgba(60,40,30,.04),0 8px 20px -14px rgba(60,40,30,.30);
}
.section-light .card::before,
.section-light-alt .card::before{
  background:linear-gradient(90deg,var(--brick),transparent 70%);
}
.section-light .card:hover,
.section-light-alt .card:hover{
  border-color:#D8C7B6;
  box-shadow:0 2px 4px rgba(60,40,30,.06),0 16px 34px -18px rgba(108,60,48,.42);
}
.section-light .card p,
.section-light-alt .card p{color:var(--l-muted)}

.section-light .ico,
.section-light-alt .ico{
  background:var(--brick-wash);
  border-color:rgba(163,68,40,.22);
  color:var(--brick);
}

/* ── Gallery on light ───────────────────────────────────────────── */
.section-light .shot,
.section-light-alt .shot{
  border-color:var(--l-line);
  background:var(--l-card);
  box-shadow:0 1px 2px rgba(60,40,30,.05);
}
.section-light .shot:hover,
.section-light-alt .shot:hover{
  border-color:var(--brick-2);
  box-shadow:0 14px 30px -16px rgba(108,60,48,.45);
}

/* ── Testimonials on light ──────────────────────────────────────── */
.section-light .quote,
.section-light-alt .quote{
  background:var(--l-card);
  border:1px solid var(--l-line);
  box-shadow:0 1px 2px rgba(60,40,30,.04),0 10px 24px -16px rgba(60,40,30,.28);
  position:relative;
}
.section-light .quote blockquote,
.section-light-alt .quote blockquote{color:var(--l-head)}
.section-light .quote figcaption,
.section-light-alt .quote figcaption{
  border-top-color:var(--l-line);
  color:var(--l-muted);
}
.section-light .quote figcaption b,
.section-light-alt .quote figcaption b{color:var(--brick)}

/* Placeholder flagging has to stay just as loud on a light background */
.section-light .is-placeholder,
.section-light-alt .is-placeholder{
  border-style:dashed;
  border-color:var(--brick-2);
  background:var(--brick-wash);
}
.section-light .placeholder-tag,
.section-light-alt .placeholder-tag{background:var(--brick);color:#fff}
.section-light .placeholder-note,
.section-light-alt .placeholder-note{
  border-color:var(--brick-2);
  background:var(--brick-wash);
  color:var(--l-body);
}
.section-light .placeholder-note strong,
.section-light-alt .placeholder-note strong{color:var(--l-head)}
.section-light .placeholder-note code,
.section-light-alt .placeholder-note code{color:var(--brick)}

/* ── Buttons on light ───────────────────────────────────────────── */
.section-light .btn-ghost,
.section-light-alt .btn-ghost{
  color:var(--l-head);
  border-color:#D9CDBF;
}
.section-light .btn-ghost:hover,
.section-light-alt .btn-ghost:hover{
  border-color:var(--brick);
  background:var(--brick-wash);
}

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