/* Bracey Building Contractors - concept build
   Palette taken from their own material: the heading / nav / button blue on
   braceybuilding.com (#145E9B), the pale blues and deep navy of the logo lockup.
   Design language: Soft Luxury. Display Eczar, body Fira Sans. */

:root{
  --navy:        #0a2b47;
  --navy-2:      #10395c;
  --brand:       #145e9b;
  --brand-deep:  #0f4a7c;
  --brand-lift:  #4f9fd8;
  --sky:         #c7d6ec;
  --sky-soft:    #e5ebf6;
  --paper:       #f1f4f8;
  --white:       #ffffff;
  --ink:         #17222e;
  --muted:       #4b5a69;
  --line:        #d5dee8;
  --line-dark:   rgba(199,214,236,.22);

  --font-display: 'Eczar', Georgia, serif;
  --font-body:    'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:      min(90%, 1180px);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --band:      clamp(4.5rem, 9vw, 8.5rem);
  --nav-h:     76px;
  --radius:    14px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-weight:400; font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto is load-bearing: the HTML width/height attributes are presentational
   hints, and a definite height beats aspect-ratio on every image below. */
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; line-height:1.08; margin:0; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:var(--wrap); margin-inline:auto; }

.skip{
  position:absolute; left:-999px; top:0; z-index:400;
  background:var(--navy); color:var(--white); padding:.75rem 1.1rem; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-size:.95rem; font-weight:500; letter-spacing:.005em;
  text-decoration:none; padding:.95rem 1.6rem; border-radius:999px; min-height:48px;
  border:1px solid transparent; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--sm{ padding:.6rem 1.15rem; min-height:42px; font-size:.875rem; }
.btn--solid{ background:var(--brand); color:var(--white); }
.btn--solid:hover{ background:var(--brand-deep); transform:translateY(-1px); }
.btn--quiet{ color:var(--brand); border-color:var(--line); background:transparent; }
.btn--quiet:hover{ border-color:var(--brand); background:var(--white); }
.btn--light{ background:var(--white); color:var(--brand-deep); }
.btn--light:hover{ background:var(--sky-soft); transform:translateY(-1px); }
.btn--outline{ color:var(--white); border-color:rgba(255,255,255,.5); }
.btn--outline:hover{ border-color:var(--white); background:rgba(255,255,255,.1); }
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--brand-lift); outline-offset:3px;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--nav-h);
  background:transparent; transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{ background:rgba(241,244,248,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom-color:var(--line); }
.nav__inner{
  width:var(--wrap); margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.mark{ text-decoration:none; display:flex; flex-direction:column; line-height:1; }
.mark__name{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--brand); letter-spacing:-.02em; }
.mark__sub{ font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:.32rem; }
.nav__links{ display:flex; gap:1.9rem; }
.nav__links a{
  text-decoration:none; font-size:.925rem; font-weight:400; color:var(--ink); padding-block:.4rem;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.nav__links a:hover{ color:var(--brand); border-bottom-color:var(--brand); }
.nav__end{ display:flex; align-items:center; gap:1.1rem; }
.nav__tel{ text-decoration:none; font-size:.925rem; color:var(--muted); }
.nav__tel:hover{ color:var(--brand); }

.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:999px;
  background:var(--white); cursor:pointer; padding:0; place-items:center; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); }

/* ---------- drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:200; background:var(--navy); color:var(--white);
  display:flex; flex-direction:column; padding:1.15rem var(--gutter) 2.5rem;
  opacity:0; transition:opacity .28s var(--ease);
}
.drawer[hidden]{ display:none; }
.drawer.is-open{ opacity:1; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; height:calc(var(--nav-h) - 24px); }
.drawer__mark{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--sky); }
.drawer__close{
  width:48px; height:48px; min-width:48px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-dark); border-radius:999px; color:var(--white); cursor:pointer;
}
.drawer__close:hover{ border-color:var(--sky); }
.drawer__links{ display:flex; flex-direction:column; gap:.35rem; margin-top:auto; }
.drawer__links a{
  font-family:var(--font-display); font-size:clamp(1.9rem,9vw,2.6rem); font-weight:500;
  text-decoration:none; color:var(--white); padding:.35rem 0; letter-spacing:-.02em;
}
.drawer__links a:hover{ color:var(--sky); }
.drawer__foot{ margin-top:2.5rem; display:flex; flex-direction:column; gap:.5rem; }
.drawer__foot a{ color:var(--sky); text-decoration:none; font-size:1.0625rem; min-height:44px; display:flex; align-items:center; }

/* ---------- hero ---------- */
.hero{
  background:var(--paper);
  padding-top:calc(var(--nav-h) + clamp(2rem,4vw,3.25rem));
  padding-bottom:clamp(3rem,6vw,5rem);
  min-height:100vh; min-height:100svh; display:flex; align-items:center;
}
.hero__inner{
  display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:clamp(2rem,4.5vw,4.25rem); align-items:center; width:var(--wrap);
}
.hero__title{
  font-size:clamp(2.3rem,4.3vw,3.8rem); line-height:1.08; letter-spacing:-.028em;
  color:var(--navy); max-width:13.5ch; text-wrap:balance;
}
.hero__sub{
  margin-top:clamp(1.35rem,2.4vw,1.9rem); max-width:46ch;
  font-size:clamp(1.06rem,1rem + .35vw,1.24rem); font-weight:300; color:var(--muted); line-height:1.6;
}
.hero__cta{ margin-top:clamp(1.75rem,3vw,2.4rem); display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__note{
  margin-top:clamp(2rem,3.5vw,2.9rem); padding-top:1.15rem; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--muted); display:flex; gap:.6rem; flex-wrap:wrap;
}
.hero__note span{ letter-spacing:.14em; text-transform:uppercase; font-size:.7rem; font-weight:500; align-self:center; }
.hero__note a{ color:var(--brand); text-decoration:none; font-weight:500;
  display:inline-flex; align-items:center; min-height:44px; }
.hero__note a:hover{ text-decoration:underline; }

.hero__media{ display:grid; gap:clamp(.7rem,1.2vw,1rem); }
.hero__shot{ margin:0; overflow:hidden; border-radius:var(--radius); background:var(--sky-soft); }
.hero__shot--main{ box-shadow:0 26px 54px -30px rgba(10,43,71,.55); }
.hero__shot--main img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.hero__shot--strip img{ width:100%; aspect-ratio:21/9; object-fit:cover; object-position:center 45%; }
.hero__shot--strip{ box-shadow:0 18px 40px -28px rgba(10,43,71,.5); }

/* ---------- statement ---------- */
.statement{ background:var(--navy); color:var(--white); padding-block:var(--band); }
.statement__inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.statement__title{ font-size:clamp(1.85rem,3.1vw,2.85rem); color:var(--white); max-width:17ch; font-weight:500; }
.statement__body{ color:var(--sky); font-weight:300; max-width:68ch; font-size:1.05rem; }
.statement__line{
  margin-top:1.9rem; padding-top:1.4rem; border-top:1px solid var(--line-dark);
  font-family:var(--font-display); font-size:1.25rem; font-weight:400; color:var(--white); line-height:1.4;
}

/* ---------- services ---------- */
.services{ background:var(--paper); padding-block:var(--band); }
.sec__title{
  font-size:clamp(1.75rem,2.9vw,2.6rem); color:var(--navy); max-width:20ch;
  padding-bottom:clamp(2.25rem,4vw,3.5rem);
}
.svc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(1.75rem,4vw,4rem); align-items:center;
  padding-block:clamp(2.5rem,5vw,4.25rem); border-top:1px solid var(--line);
}
.svc--flip .svc__text{ order:2; }
.svc--flip .svc__media{ order:1; }
.svc__title{ font-size:clamp(1.5rem,2.4vw,2.1rem); color:var(--brand); margin-bottom:1.1rem; font-weight:600; }
.svc__text p{ max-width:52ch; color:var(--ink); }
.svc__meta{ color:var(--muted); font-size:.965rem; font-weight:300; }
.svc__media{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:0 22px 46px -30px rgba(10,43,71,.5); }
.svc__media img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.svc:first-of-type .svc__media img{ object-position:center 46%; }

/* ---------- the list ---------- */
.list{ background:var(--navy-2); color:var(--white); padding-block:var(--band); }
.list__title{ font-size:clamp(1.75rem,2.9vw,2.6rem); color:var(--white); }
.list__sub{ margin-top:.85rem; color:var(--sky); font-weight:300; }
.pills{
  display:flex; gap:.6rem; margin-top:2rem; padding-bottom:.35rem;
  overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.pills::-webkit-scrollbar{ display:none; }
.pill{
  flex:0 0 auto; font-family:var(--font-body); font-size:.9rem; font-weight:500; color:var(--sky);
  background:transparent; border:1px solid var(--line-dark); border-radius:999px;
  padding:.7rem 1.35rem; min-height:44px; cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pill:hover{ border-color:var(--sky); }
.pill.is-on{ background:var(--sky); color:var(--navy); border-color:var(--sky); }
.list__grid{
  list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0 clamp(1.5rem,3vw,3rem);
}
.list__grid li{
  padding:.85rem 0; border-top:1px solid var(--line-dark);
  font-size:1rem; font-weight:300; color:var(--white);
}
.list__empty{ margin-top:2rem; color:var(--sky); }
.list__more{
  margin-top:2.25rem; font-family:var(--font-display); font-size:1.15rem; color:var(--sky); font-weight:400;
}

/* ---------- work ---------- */
.work{ background:var(--white); padding-block:var(--band); }
.grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(.9rem,1.6vw,1.5rem);
}
/* The figure is a flex column so the image grows into the leftover row height
   and the caption keeps its own space. `height:100%` on the image instead made
   it as tall as the whole stretched figure, and it sat on top of the caption. */
.tile{ margin:0; grid-column:span 2; display:flex; flex-direction:column; }
.tile--tall{ grid-column:span 2; grid-row:span 2; }
.tile--wide{ grid-column:span 4; }
.tile img{
  width:100%; flex:1 1 auto; min-height:0; object-fit:cover;
  border-radius:var(--radius); background:var(--sky-soft);
  aspect-ratio:4/3;
}
.tile--tall img{ aspect-ratio:1/2.1; }
.tile--wide img{ aspect-ratio:16/7; }
.tile figcaption{
  flex:none; margin-top:.85rem; font-size:.88rem; color:var(--muted);
  font-weight:300; line-height:1.5; max-width:38ch;
}
.reveal{ opacity:0; clip-path:inset(0 0 14% 0); }
html:not(.js) .reveal{ opacity:1; clip-path:none; }

/* ---------- contact ---------- */
.contact{ background:var(--brand); color:var(--white); padding-block:var(--band); }
.contact__inner{ max-width:44rem; }
.contact .wrap > .contact__inner{ margin-inline:0; }
.contact__title{ font-size:clamp(1.85rem,3.2vw,2.9rem); color:var(--white); font-weight:500; }
.contact__body{ margin-top:1.35rem; color:#e2edf7; font-weight:300; max-width:52ch; }
.contact__row{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------- footer ---------- */
.foot{ background:var(--navy); color:var(--sky); padding-top:clamp(3.25rem,6vw,5rem); }
.foot__inner{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,5vw,4rem);
}
.foot .mark__name{ color:var(--white); }
.foot .mark__sub{ color:var(--sky); display:block; margin-top:.4rem; }
.foot__brand{ display:flex; flex-direction:column; align-items:flex-start; }
.foot__line{ margin-top:1.35rem; font-weight:300; font-size:.95rem; color:var(--sky); }
.foot__nav, .foot__contact{ display:flex; flex-direction:column; gap:.15rem; }
.foot__nav a, .foot__contact a{
  color:var(--sky); text-decoration:none; font-size:.95rem; font-weight:300;
  display:inline-flex; align-items:center; min-height:44px; align-self:flex-start;
}
.foot__nav a:hover, .foot__contact a:hover{ color:var(--white); text-decoration:underline; }
.foot__base{ border-top:1px solid var(--line-dark); padding-block:1.6rem; }
.foot__base p{ font-size:.82rem; color:var(--sky); opacity:.85; }

/* ---------- 404 ---------- */
.err{
  background:var(--navy); color:var(--white); min-height:100vh; min-height:100svh;
  display:grid; place-items:center; text-align:center;
  padding:calc(var(--nav-h) + 3rem) var(--gutter) 4rem;
}
.err__code{ font-family:var(--font-display); font-size:clamp(5rem,18vw,11rem); line-height:.9; color:var(--brand-lift); font-weight:700; }
.err__title{ margin-top:1.5rem; font-size:clamp(1.7rem,4vw,2.6rem); color:var(--white); font-weight:500; }
.err__body{ margin:1.35rem auto 2.25rem; max-width:46ch; color:var(--sky); font-weight:300; }
.err .nav{ background:var(--navy); border-bottom-color:var(--line-dark); }
.page-404 .nav{ background:var(--navy); border-bottom-color:var(--line-dark); }
.page-404 .nav .mark__name{ color:var(--sky); }
.page-404 .nav .mark__sub{ color:rgba(199,214,236,.8); }
.page-404 .nav__links a{ color:var(--white); }
.page-404 .nav__links a:hover{ color:var(--sky); border-bottom-color:var(--sky); }
.page-404 .nav__tel{ color:var(--sky); }
.page-404 .burger{ background:transparent; border-color:var(--line-dark); }
.page-404 .burger span{ background:var(--white); }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .nav__links{ gap:1.3rem; }
  .nav__tel{ display:none; }
}
@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav .btn--sm{ display:none; }
  .burger{ display:flex; align-items:center; justify-content:center; }
  .nav{ background:rgba(241,244,248,.94); border-bottom-color:var(--line); }

  .hero{ min-height:0; padding-top:calc(var(--nav-h) + 2.25rem); display:block; }
  .hero__inner{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .hero__title{ max-width:none; }
  .hero__sub{ max-width:none; }

  .statement__inner{ grid-template-columns:minmax(0,1fr); }
  .statement__title{ max-width:none; }

  .svc, .svc--flip{ grid-template-columns:minmax(0,1fr); }
  .svc--flip .svc__text{ order:1; }
  .svc--flip .svc__media{ order:2; }

  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile, .tile--tall, .tile--wide{ grid-column:span 1; grid-row:auto; }
  .tile img, .tile--tall img, .tile--wide img{ aspect-ratio:4/3; }

  .foot__inner{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 560px){
  .grid{ grid-template-columns:minmax(0,1fr); }
  .hero__cta .btn, .contact__row .btn{ width:100%; justify-content:center; }
  .list__grid{ grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; clip-path:none; }
}