:root{--ink:#20201e;--tan:#b17b3e;--cream:#f6f3ed;--muted:#625f59;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{font-size:14px}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.08;margin:0}
p{color:var(--muted);line-height:1.45;margin:8px 0}

/* ONE CONSISTENT, SMALL HEADER */
.header{height:56px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:2px 4vw;border-bottom:1px solid #eee}
.logo{width:150px;height:48px;object-fit:contain;object-position:left center}
.nav{display:flex;align-items:center;gap:22px;font-size:10px;font-weight:700;letter-spacing:.5px}
.nav a{padding:5px 0}.nav a.active{color:var(--tan);border-bottom:2px solid var(--tan)}

/* HOME */
.hero{height:285px;position:relative;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.08) 55%,rgba(0,0,0,0) 78%)}
.hero-content{position:absolute;z-index:2;left:5.5%;top:8%;color:#fff;max-width:430px}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--tan);margin-bottom:9px}
.hero .eyebrow{color:#ead0aa}
.hero h1{font-size:39px;text-shadow:0 2px 7px rgba(0,0,0,.3)}
.hero-services{font-size:10px;font-weight:700;line-height:1.45;margin-top:10px}
.hero-services span{color:#c78e4d;margin:0 6px}
.btn{display:inline-block;background:var(--tan);color:#fff;padding:8px 16px;margin-top:10px;font-weight:700;letter-spacing:1px;font-size:9px}
.split{display:block;min-height:0}
.copy{padding:15px 5.5vw;background:#f9f8f5}
.copy h2{font-size:22px}
.copy p{font-size:11px;max-width:690px}
.signature{font-family:cursive;font-size:18px;color:#222;margin-top:6px}
.work-strip{padding:12px 4vw;background:var(--cream)}
.work-strip .eyebrow{text-align:center;margin-bottom:6px}
.work-strip .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:0}
.work-strip .thumbs img{width:100%;height:105px;object-fit:cover}
.work-strip .center{text-align:center}.work-strip .btn{margin-top:7px}

/* INTERIOR PAGE HEROES */
.page-hero{padding:17px 5vw;text-align:center;background:var(--cream)}
.page-hero h1{font-size:31px}
.page-hero p{max-width:720px;margin:7px auto;font-size:11px}

/* OUR WORK */
.portfolio{padding:15px 4vw}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{min-width:0}.card img{width:100%;height:118px;object-fit:cover;display:block}
.card h3{font-size:16px;margin-top:6px}.card p{font-size:10px;margin-top:4px;line-height:1.3}

/* ABOUT */
.section{padding:16px 5vw}
.about-grid,.contact-grid{display:grid;grid-template-columns:42% 58%;gap:30px;align-items:center}
.section img{width:100%;height:205px;object-fit:cover}
.section h2{font-size:30px}
.section p{font-size:11px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.value{padding:9px;background:var(--cream)}
.value h3{font-size:15px}.value p{font-size:9px;margin:3px 0}

/* SERVICES */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:18px 8vw}
.service{padding:12px;background:var(--cream);border-top:2px solid var(--tan);min-height:115px}
.service h2{font-size:19px}.service p{font-size:11px;line-height:1.35}

/* CONTACT */
.contact-box{background:var(--cream);padding:15px}
.field{margin-bottom:8px}.field label{display:block;font-weight:700;font-size:9px;letter-spacing:1px;margin-bottom:3px}
.field input,.field textarea{width:100%;border:1px solid #ddd6ca;padding:7px;font:inherit;background:#fff}
.field textarea{min-height:65px;resize:none}.form-note{font-size:9px}
.contact-grid h2{font-size:29px}

/* FOOTER */
footer{background:#1d1e1c;color:#fff;padding:10px 5vw;display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer-logo{width:125px;filter:none}.footer-links{display:flex;gap:14px;font-size:8px;letter-spacing:1px}.small{color:#aaa;font-size:8px}

/* DESKTOP: keep the complete composition comfortably inside a typical 1366x768 viewport */
@media(min-width:901px){
  .header{height:56px}
  .hero{height:285px}
}

/* MOBILE remains readable rather than forcing desktop fit */
@media(max-width:900px){
  .header{height:auto;min-height:58px;padding:5px 4vw}.logo{width:145px;height:45px}.nav{gap:12px;font-size:9px;flex-wrap:wrap;justify-content:flex-end}
  .hero{height:390px}.hero h1{font-size:42px}.hero-content{top:8%;left:6%;right:6%}
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .section img{height:250px}
  footer{flex-wrap:wrap}
}
@media(max-width:600px){
  .nav{gap:8px;font-size:8px}.logo{width:130px}.hero{height:420px}.hero h1{font-size:37px}
  .portfolio-grid,.services{grid-template-columns:1fr}.work-strip .thumbs{grid-template-columns:1fr 1fr}
  .page-hero h1{font-size:27px}.section h2,.contact-grid h2{font-size:27px}
}

/* FINAL DESKTOP SIZE — phone styling is untouched */
@media (min-width:901px){
  .header{height:58px!important;padding:3px 4.5vw!important}
  .logo{width:150px!important;height:48px!important}
  .nav{gap:21px!important;font-size:9.5px!important}

  .hero{height:300px!important}
  .hero-content{left:5.2%!important;top:7.5%!important;max-width:420px!important}
  .hero h1{font-size:37px!important}
  .hero-services{font-size:9.5px!important;line-height:1.35!important;margin-top:9px!important}
  .btn{padding:8px 16px!important;margin-top:9px!important;font-size:9.5px!important}

  .copy{padding:18px 5.5vw!important}
  .copy h2{font-size:24px!important}
  .copy p{font-size:12px!important;line-height:1.45!important}

  .page-hero{padding:20px 5.5vw!important}
  .page-hero h1{font-size:32px!important}
  .page-hero p{font-size:12px!important;margin:7px auto!important}

  .portfolio{padding:19px 4.5vw!important}
  .portfolio-grid{gap:12px!important}
  .card img{height:125px!important}
  .card h3{font-size:16px!important;margin-top:6px!important}
  .card p{font-size:10px!important;line-height:1.35!important}

  .services{padding:21px 8vw!important;gap:11px!important}
  .service{padding:14px!important;min-height:125px!important}
  .service h2{font-size:20px!important}
  .service p{font-size:11px!important}

  .section{padding:20px 5.5vw!important}
  .about-grid,.contact-grid{gap:25px!important}
  .section img{height:205px!important}
  .section h2,.contact-grid h2{font-size:29px!important}
  .section p{font-size:11.5px!important;line-height:1.4!important}
  .values{gap:8px!important;margin-top:11px!important}
  .value{padding:10px!important}
  .value h3{font-size:16px!important}
  .value p{font-size:9.5px!important}

  .contact-box{padding:15px!important}
  .field{margin-bottom:8px!important}
  .field input,.field textarea{padding:7px!important}
  .field textarea{min-height:65px!important}

  footer{padding:10px 5.5vw!important}
  .footer-logo{width:115px!important}
  .footer-links{gap:13px!important;font-size:7.5px!important}
  .small{font-size:8px!important}
}

/* FINAL DESKTOP POLISH */
.phone{font-size:14px!important;margin:8px 0 12px!important}.phone a{font-weight:700;color:var(--tan)}
@media (min-width:901px){
  /* Home: show substantially more of the kitchen without making the page enormous */
  .hero{height:380px!important}
  .hero img{object-fit:cover!important;object-position:center 48%!important}

  /* Our Work: preserve full photo proportions instead of cropping */
  .portfolio-grid{align-items:start!important}
  .portfolio .card img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    background:#f6f3ed!important;
  }

  /* About: prevent heading from getting squeezed/cut off */
  .about-grid{
    grid-template-columns:minmax(0,44%) minmax(0,56%)!important;
    gap:30px!important;
    align-items:start!important;
  }
  .about-grid>div{min-width:0!important}
  .about-grid h2{
    font-size:28px!important;
    line-height:1.12!important;
    max-width:560px!important;
    overflow-wrap:normal!important;
  }
  .section img{
    height:auto!important;
    max-height:250px!important;
    object-fit:contain!important;
    background:#f6f3ed!important;
  }

  /* Services: make the page feel substantial, not like four tiny boxes */
  .services{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-width:1050px!important;
    margin:0 auto!important;
    padding:28px 5vw 34px!important;
    gap:16px!important;
  }
  .service{
    min-height:160px!important;
    padding:20px!important;
  }
  .service h2{font-size:22px!important;margin-bottom:5px!important}
  .service p{font-size:12px!important;line-height:1.5!important}

  /* Contact */
  .contact-grid{align-items:start!important}
}

/* Our Work photos: clickable full-size viewing */
.work-image{display:block;line-height:0;cursor:zoom-in}
.work-image img{width:100%;height:auto;display:block}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;padding:24px;z-index:9999}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;max-height:90vh;width:auto;height:auto;object-fit:contain}
.lightbox-close{position:absolute;top:14px;right:18px;border:0;background:none;color:#fff;font-size:40px;line-height:1;cursor:pointer}
.tap-call{font-size:11px;color:var(--muted)}
.phone strong{color:var(--muted)}
@media(max-width:600px){.portfolio .card img{height:auto!important;object-fit:contain!important}.lightbox{padding:16px}.lightbox img{max-width:96vw;max-height:86vh}.lightbox-close{top:8px;right:12px;font-size:36px}.phone{line-height:1.25}}