/* Buildwell & Co — Concept A */
:root{
    color-scheme: light only;
    --base:#FFFFFF; --paper:#FFFFFF; --field:#FAFAF8; --ink:#272526; --muted:#6B6A62;
    --green:#3C4331; --green-ink:#F3F1EA; --sage:#92927A; --cream:#E6DBC9; --line:#ECEAE4; --line-strong:#D6D3CA;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}
  body{margin:0; background:var(--base); color:var(--ink); font-family:Figtree,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
  h1,h2,h3,p,figure{margin:0}
  a{color:inherit}
  img{max-width:100%; display:block}
  :focus-visible{outline:2px solid var(--sage); outline-offset:3px}
  .serif{font-family:"DM Serif Display",Georgia,"Times New Roman",serif; font-weight:400; line-height:1.05; letter-spacing:-.01em; text-wrap:balance}
  .eyebrow{font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
  .wrap{max-width:1200px; margin:0 auto; padding-inline:clamp(16px,5vw,48px)}
  section{padding-block:clamp(72px,9vw,136px)}
  .lede{font-size:clamp(17px,1.4vw,19px); color:var(--muted); max-width:34em}

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 24px; font:600 14px/1 Figtree,sans-serif; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; border:1px solid var(--green); border-radius:2px; cursor:pointer; transition:background .15s,color .15s,border-color .15s}
  .btn-solid{background:var(--green); color:var(--green-ink)}
  .btn-solid:hover{background:var(--ink); border-color:var(--ink); color:var(--base)}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
  .btn-ghost:hover{border-color:var(--ink)}

  /* Nav */
  .nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--base) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px}
  .brand img{height:44px; width:auto}
  .nav ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:30px; font-size:14px; font-weight:500}
  .nav ul a:not(.btn){text-decoration:none; color:var(--muted)}
  .nav ul a:not(.btn):hover{color:var(--ink)}
  .nav .btn{padding:11px 18px; font-size:12px; white-space:nowrap}
  @media (max-width:480px){.nav .btn{padding:10px 14px; font-size:11px; letter-spacing:.04em}}
  @media (max-width:800px){.nav ul li:not(.keep){display:none}}

  /* Hero */
  .hero{padding-block:0}
  .hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:center; padding-block:clamp(48px,7vw,104px)}
  .hero h1{font-size:clamp(44px,5.6vw,78px); margin-block:20px 24px}
  .hero h1 em{font-style:italic; color:var(--sage)}
  .hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
  .hero .facts{display:flex; flex-wrap:wrap; gap:10px 36px; margin-top:48px; padding-top:22px; border-top:1px solid var(--line)}
  .hero .facts div{display:grid; gap:2px}
  .hero .facts b{font-family:"DM Serif Display",serif; font-weight:400; font-size:24px; line-height:1}
  .hero .facts span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
  .hero figure{position:relative}
  .hero figure img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px}
  .hero figcaption{position:absolute; left:16px; bottom:16px; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(6px); padding:10px 14px; border-radius:3px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
  @media (max-width:820px){.hero .wrap{grid-template-columns:1fr} .hero figure img{aspect-ratio:4/3}}

  /* Statement */
  .statement{border-top:1px solid var(--line)}
  .statement .wrap{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px,6vw,96px); align-items:center}
  .statement p.big{font-family:"DM Serif Display",serif; font-size:clamp(26px,3vw,40px); line-height:1.25; text-wrap:balance}
  .statement p.big em{color:var(--sage)}
  .statement .side{display:grid; gap:18px; color:var(--muted); font-size:16px}
  .statement .side strong{color:var(--ink); font-weight:600}
  @media (max-width:820px){.statement .wrap{grid-template-columns:1fr}}

  /* Section headings */
  .head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 48px; align-items:end; margin-bottom:clamp(36px,4vw,56px)}
  .head h2{font-size:clamp(36px,4.2vw,56px); margin-top:14px}
  .head p{color:var(--muted); max-width:34em}
  @media (max-width:760px){.head{grid-template-columns:1fr}}

  /* Projects */
  .project{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr); gap:clamp(24px,4vw,64px); padding-block:clamp(36px,4vw,56px); border-top:1px solid var(--line)}
  .project:last-child{border-bottom:1px solid var(--line)}
  .project .info{position:sticky; top:100px; align-self:start; display:grid; gap:14px}
  .project h3{font-size:clamp(26px,2.6vw,34px)}
  .project .info p{color:var(--muted); font-size:16px; max-width:30em}
  .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
  .tags span{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-strong); padding:6px 10px; border-radius:999px}
  .grid{display:grid; gap:12px}
  .grid img{width:100%; height:100%; object-fit:cover; border-radius:3px}
  .g-three{grid-template-columns:repeat(3,minmax(0,1fr))} .g-three img{aspect-ratio:4/5}
  .g-feature{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-feature img{aspect-ratio:4/3}
  .g-feature .wide{grid-column:span 3} .g-feature .wide img{aspect-ratio:16/8}
  .g-bath{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-bath .wide{grid-column:span 2} .g-bath .wide img{aspect-ratio:16/8}
  .g-bath img{aspect-ratio:3/4}
  @media (max-width:820px){.project{grid-template-columns:1fr} .project .info{position:static} .g-three{grid-template-columns:repeat(3,minmax(0,1fr))} .g-feature{grid-template-columns:repeat(2,minmax(0,1fr))} .g-feature .wide{grid-column:span 2}}
  @media (max-width:480px){.g-three{grid-template-columns:1fr} .g-three img{aspect-ratio:4/3}}

  /* Services */
  .services{}
  .svc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
  .svc{position:relative; display:grid; border-radius:4px; overflow:hidden; text-decoration:none; color:#fff; min-height:380px}
  .svc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
  .svc:hover img{transform:scale(1.03)}
  .svc .txt{position:relative; align-self:end; padding:28px; background:linear-gradient(to top, rgba(28,29,26,.78), rgba(28,29,26,0)); display:grid; gap:8px}
  .svc h3{font-size:30px; color:#fff}
  .svc p{font-size:15px; color:rgba(255,255,255,.85); max-width:30em}
  .svc-more{margin-top:28px; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:16px}
  .svc-more b{color:var(--ink); font-weight:600; white-space:nowrap}
  @media (max-width:760px){.svc-grid{grid-template-columns:1fr} .svc{min-height:300px} .svc-more{grid-template-columns:1fr; gap:6px}}

  /* Philosophy */
  .philosophy{border-top:1px solid var(--line)}
  .philosophy .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,6vw,96px)}
  .philosophy h2{font-size:clamp(48px,6.5vw,92px); margin-top:14px; color:var(--green)}
  .philosophy blockquote{margin:28px 0 0; font-size:clamp(17px,1.5vw,20px); line-height:1.6; max-width:30em; color:var(--muted)}
  .philosophy blockquote footer{margin-top:14px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
  .values{list-style:none; margin:0; padding:0; display:grid}
  .values li{padding:26px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(140px,180px) minmax(0,1fr); gap:16px}
  .values li:last-child{border-bottom:1px solid var(--line)}
  .values h3{font-size:26px}
  .values p{color:var(--muted); font-size:16px}
  @media (max-width:820px){.philosophy .wrap{grid-template-columns:1fr} .values li{grid-template-columns:1fr; gap:6px}}

  /* Process */
  .steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
  .step{padding-top:20px; border-top:2px solid var(--line-strong); display:grid; gap:10px; align-content:start}
  .step .n{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sage)}
  .step h3{font-size:26px}
  .step p{color:var(--muted); font-size:16px}
  @media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:480px){.steps{grid-template-columns:1fr}}

  /* About */
  .about{border-top:1px solid var(--line)}
  .about .wrap{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(32px,6vw,96px); align-items:center}
  .about-badge{display:flex; justify-content:center}
  .about-badge img{width:min(100%,300px)}
  .about h2{font-size:clamp(34px,4vw,52px); margin-top:14px}
  .about .body{display:grid; gap:16px; margin-top:22px; max-width:38em; color:var(--muted); font-size:17px}
  .about .sig{margin-top:12px; display:grid; gap:2px}
  .about .sig b{font-family:"DM Serif Display",serif; font-weight:400; font-size:22px; color:var(--ink)}
  .about .sig span{font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600}
  @media (max-width:820px){.about .wrap{grid-template-columns:1fr} .about-badge img{width:200px}}

  /* Contact */
  .contact .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,6vw,96px)}
  .contact h2{font-size:clamp(40px,5vw,68px); margin-top:14px}
  .contact .info{display:grid; gap:22px; margin-top:34px}
  .contact .info .k{display:block; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
  .contact .info .v{font-size:19px}
  .contact .info a{text-decoration:none; border-bottom:1px solid var(--line-strong)}
  .contact .info a:hover{border-color:var(--ink)}
  form{display:grid; gap:16px; background:var(--paper); border:1px solid var(--line-strong); border-radius:4px; padding:clamp(20px,3vw,36px)}
  .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  @media (max-width:520px){.row{grid-template-columns:1fr}}
  label{display:grid; gap:7px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
  input,select,textarea{width:100%; background:var(--field); color:var(--ink); border:1px solid var(--line-strong); border-radius:3px; padding:13px 14px; font:400 16px/1.4 Figtree,sans-serif}
  input:focus,select:focus,textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--sage) 30%, transparent)}
  textarea{min-height:130px; resize:vertical}
  form .btn{width:100%}
  form small{color:var(--muted); font-size:14px; line-height:1.5}
  @media (max-width:820px){.contact .wrap{grid-template-columns:1fr}}

  /* Footer */
  footer{border-top:1px solid var(--line)}
  footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px 32px; padding-block:30px; font-size:14px; color:var(--muted)}
  footer .fb{display:inline-flex; align-items:center; gap:8px; text-decoration:none}
  footer .fb svg{width:18px;height:18px; fill:currentColor}
  footer .icon{height:36px; width:auto; opacity:.9}