:root{
  --charcoal:#232323;
  --gold:#b89464;
  --cream:#f3eee4;
  --ink:#262626;
  --muted:#66625d;
}
*{box-sizing:border-box}
html,body{margin:0;background:#eee8df;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
.page-shell{width:min(1440px,calc(100% - 32px));margin:28px auto;box-shadow:0 18px 50px rgba(0,0,0,.12);background:var(--cream)}
.topbar,.footer{background:var(--charcoal);color:#fff}
.topbar{height:64px;display:flex;align-items:center;padding:0 7%}
.mini-mark,.brand-mark{font-family:Georgia,'Times New Roman',serif;color:#c7a06f;font-weight:400;letter-spacing:-.04em}
.mini-mark{font-size:42px}
.mini-mark span,.brand-mark span{display:inline-block;width:1px;background:currentColor;vertical-align:middle;margin:0 .12em}
.mini-mark span{height:38px}
.hero{display:grid;grid-template-columns:52% 48%;min-height:780px}
.content-panel{padding:58px 8% 42px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#f5f0e6 0%,#f7f2e8 100%)}
.brand-block{width:min(520px,100%);text-align:center;margin-bottom:48px}
.brand-mark{font-size:clamp(72px,7vw,118px);line-height:.9}
.brand-mark span{height:.95em}
.brand-rule{height:1px;background:var(--gold);margin:18px 0 11px}
.brand-name{font-family:Georgia,'Times New Roman',serif;color:var(--gold);font-size:24px;letter-spacing:.32em}
.copy-block h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(40px,4vw,68px);font-weight:400;line-height:1.02;margin:0 0 26px}
.intro{font-size:18px;line-height:1.55;letter-spacing:.03em;max-width:700px;margin:0;color:#3e3b37}
.services{display:grid;grid-template-columns:repeat(3,1fr);margin:48px 0 42px;border-top:1px solid rgba(184,148,100,.45);border-bottom:1px solid rgba(184,148,100,.45)}
.service{text-align:center;padding:26px 14px;letter-spacing:.18em;text-transform:uppercase;font-size:12px;line-height:1.5;color:#6b5a47;position:relative}
.service+ .service:before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(184,148,100,.5)}
.service svg{width:40px;height:40px;stroke:var(--gold);fill:none;stroke-width:1.8;margin-bottom:11px}
.contact-block{max-width:720px}
.eyebrow{text-transform:uppercase;letter-spacing:.25em;color:var(--gold);font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.eyebrow span,.tagline span{display:inline-block;height:1px;background:var(--gold)}
.eyebrow span{width:58px}
.contact-block>p{margin:0 0 22px;color:var(--muted);line-height:1.55;font-size:15px}
.contacts{display:flex;gap:38px;flex-wrap:wrap}
.contact-item{display:flex;align-items:center;gap:14px;padding:6px 0}
.contact-item svg{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.8}
.contact-item strong{display:block;font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:400}
.contact-item small{display:block;text-transform:uppercase;letter-spacing:.22em;font-size:10px;margin-top:4px;color:#6c6257}
.image-panel{background:url('architecture.jpg') center center/cover no-repeat;min-height:780px}
.footer{min-height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 7%;font-size:12px;letter-spacing:.16em;color:#d0b183;text-transform:none}
.tagline{text-transform:uppercase;display:flex;align-items:center;gap:18px;letter-spacing:.22em;font-size:11px}
.tagline span{width:90px}
@media (max-width: 700px){
  .page-shell{width:100%;margin:0;box-shadow:none}
  .topbar{height:56px;padding:0 24px}
  .mini-mark{font-size:34px}
  .hero{grid-template-columns:1fr}
  .content-panel{padding:42px 24px 38px}
  .brand-block{margin:0 auto 34px}
  .copy-block h1{font-size:clamp(38px,10vw,58px)}
  .intro{font-size:16px}
  .services{margin:36px 0 32px}
  .image-panel{min-height:56vh;background-position:center center;order:-1}
  .footer{padding:22px 24px;gap:18px;flex-direction:column;align-items:flex-start}
}
@media (max-width: 620px){
  .image-panel{min-height:44vh}
  .services{grid-template-columns:1fr;gap:0}
  .service+ .service:before{left:14%;right:14%;top:0;bottom:auto;width:auto;height:1px}
  .contacts{display:grid;grid-template-columns:1fr;gap:10px}
  .brand-name{font-size:18px;letter-spacing:.24em}
  .footer{font-size:11px}
  .tagline{font-size:9px;line-height:1.5}
  .tagline span{width:48px}
}

/* Polished short-screen fit: keep readable type, save height in the big elements,
   and NEVER trap the page if a browser window is a little shorter. */
@media (min-width: 701px) and (max-height: 900px){
  body{min-height:100vh;overflow-y:auto}
  .page-shell{
    margin:8px auto;
    min-height:calc(100vh - 16px);
    display:grid;
    grid-template-rows:46px minmax(0,1fr) 50px;
    overflow:visible;
  }
  .topbar{height:46px;padding:0 6.5%}
  .mini-mark{font-size:32px}
  .mini-mark span{height:29px}
  .hero{min-height:0;grid-template-columns:52% 48%}
  .content-panel{padding:12px 7.2% 10px;justify-content:center;min-height:0}
  .brand-block{width:min(490px,100%);margin:0 auto 12px}
  .brand-mark{font-size:clamp(62px,5.7vw,78px)}
  .brand-rule{margin:7px 0 6px}
  .brand-name{font-size:20px;letter-spacing:.30em}
  .copy-block h1{font-size:clamp(38px,3.45vw,50px);line-height:.99;margin:0 0 10px}
  .intro{font-size:16px;line-height:1.38;max-width:680px}
  .services{margin:13px 0 12px}
  .service{padding:10px 10px;font-size:11px;line-height:1.38}
  .service svg{width:30px;height:30px;margin-bottom:5px}
  .contact-block{max-width:700px}
  .eyebrow{font-size:12px;margin-bottom:7px;gap:10px}
  .eyebrow span{width:50px}
  .contact-block>p{margin:0 0 8px;line-height:1.35;font-size:14px}
  .contacts{gap:32px;flex-wrap:nowrap}
  .contact-item{gap:11px;padding:1px 0}
  .contact-item svg{width:30px;height:30px}
  .contact-item strong{font-size:18px}
  .contact-item small{font-size:9px;margin-top:2px}
  .image-panel{min-height:0;height:100%}
  .footer{min-height:50px;height:50px;padding:0 6.5%;font-size:11px}
}