/* Dynasty Installations Ltd — approved, static website. No external dependencies. */
:root {
  --gold:#b99755; --gold-light:#e4c98c; --gold-dark:#80612f;
  --ink:#121212; --cream:#f7f6f3; --muted:#606060;
  --site-width:1190px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:#222; background:#fff; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
button, input, textarea { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; z-index:30; top:12px; left:12px; padding:12px 18px; color:#111; background:white; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.site-header { min-height:106px; padding:8px clamp(22px,5vw,90px); display:flex; align-items:center; justify-content:space-between; gap:30px; background:#000; color:white; position:relative; z-index:10; }
.brand { flex:none; display:block; line-height:0; }
.brand img { display:block; width:250px; height:auto; aspect-ratio:960/384; object-fit:contain; }
.site-nav { display:flex; align-items:center; gap:32px; font-size:12px; letter-spacing:1.7px; text-transform:uppercase; }
.site-nav a { padding:12px 0; }
.site-nav a:hover { color:var(--gold-light); }
.site-nav .nav-contact { border:1px solid #8a7142; padding:11px 19px; }
.menu-toggle { display:none; border:1px solid #8a7142; background:transparent; color:white; padding:10px 13px; min-width:72px; min-height:44px; font-size:12px; letter-spacing:1px; }
.hero { min-height:580px; height:min(720px,76vh); position:relative; background:#323433; overflow:hidden; display:flex; align-items:center; }
.hero-photo { position:absolute; inset:0; 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,.76) 0%,rgba(0,0,0,.50) 47%,rgba(0,0,0,.10) 100%); }
.hero-content { position:relative; z-index:1; color:white; max-width:940px; margin-left:clamp(24px,8vw,150px); margin-right:24px; padding:48px 0; }
.eyebrow { margin:0; font-size:12px; letter-spacing:3px; color:var(--gold-dark); text-transform:uppercase; font-weight:700; }
.hero .eyebrow,.banner .eyebrow { color:var(--gold-light); }
.hero h1 { font-size:clamp(38px,5vw,72px); line-height:1.13; font-weight:400; margin:23px 0; letter-spacing:-1.2px; }
.hero h1 span { display:block; }
.hero p { font-size:clamp(16px,1.5vw,20px); line-height:1.7; max-width:690px; margin:0; color:#f5f5f5; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:14px; min-height:50px; margin-top:25px; padding:16px 28px; font-size:12px; letter-spacing:1.7px; text-transform:uppercase; font-weight:bold; background:var(--gold); color:#111; border:1px solid var(--gold); transition:background-color .18s; }
.button:hover { background:#c8a768; }
.wrap { max-width:var(--site-width); margin:0 auto; padding:0 25px; }
.intro { text-align:center; padding:90px 25px 80px; }
.intro h2 { font-size:clamp(29px,3vw,43px); line-height:1.23; font-weight:400; margin:15px auto; max-width:980px; letter-spacing:-.45px; }
.intro p:not(.eyebrow) { max-width:810px; margin:0 auto; color:var(--muted); line-height:1.9; font-size:16px; }
.line { width:52px; height:2px; background:var(--gold); margin:23px auto; }
.who-section { background:#faf9f6; }
.who-section p:not(.eyebrow)+p { margin-top:17px; }
.services { background:var(--cream); padding:74px 0 75px; }
.section-head { text-align:center; margin-bottom:32px; }
.section-head h2 { font-size:clamp(29px,3.5vw,42px); line-height:1.2; font-weight:400; margin:12px; letter-spacing:-.45px; }
.service-artwork { margin:0; }
.triptych-img { width:100%; height:auto; display:block; box-shadow:0 16px 42px #00000017; }
.mobile-service-panels { display:none; }
.imagery-note { display:block; margin:17px auto 0; text-align:center; max-width:760px; color:#686868; font-size:11px; line-height:1.65; }
.banner { padding:69px 25px 72px; background:#151515; color:#fff; text-align:center; }
.banner h2 { font-weight:400; font-size:clamp(28px,3.2vw,39px); line-height:1.3; letter-spacing:-.3px; margin:17px 0; }
.banner p:not(.eyebrow) { color:#d1d1d1; max-width:650px; margin:15px auto 0; line-height:1.8; font-size:16px; }
.contact { text-align:center; padding:80px 24px 85px; }
.contact h2 { font-size:clamp(30px,3.5vw,42px); line-height:1.25; font-weight:400; margin:17px 0; letter-spacing:-.4px; }
.contact p { max-width:660px; margin:14px auto; color:var(--muted); font-size:16px; }
.contact-emails { display:grid; grid-template-columns:1fr 1fr; gap:28px 44px; max-width:960px; margin:34px auto 0; }
.email-contact { min-width:0; }
.contact .email-label { margin:0 0 8px; color:var(--gold-dark); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.email-contact a { display:inline; color:#222; font-size:clamp(15px,1.55vw,19px); line-height:1.85; overflow-wrap:anywhere; border-bottom:1px solid #d0c3ab; padding-bottom:3px; }
.email-contact a:hover { color:var(--gold-dark); }
@media(max-width:800px) { .contact-emails { grid-template-columns:1fr; gap:25px; } .email-contact a { font-size:clamp(14px,3.8vw,19px); } }
.site-footer { background:#101010; color:#b7b7b7; text-align:center; padding:30px 24px; font-size:12px; line-height:1.85; }
.site-footer p { margin:5px auto; max-width:1000px; }
.site-footer .copyright { letter-spacing:.6px; color:#d9d9d9; }
.footer-links { display:flex; justify-content:center; gap:24px; align-items:center; margin-top:14px; }
.footer-links a,.footer-links button { font:inherit; color:#d2c3a3; background:none; border:0; padding:3px; text-decoration:underline; text-underline-offset:4px; }
.preview-strip { text-align:center; padding:8px 20px; background:#ece8df; color:#5a503c; font-size:11px; letter-spacing:.8px; }
dialog { max-width:min(590px,calc(100% - 32px)); max-height:85vh; border:1px solid #b99755; border-radius:0; padding:30px; color:#222; background:white; }
dialog::backdrop { background:rgba(0,0,0,.65); }
dialog h2 { font-size:25px; font-weight:400; line-height:1.25; margin:0 0 16px; }
dialog p { font-size:14px; line-height:1.8; color:#555; }
dialog a { text-decoration:underline; overflow-wrap:anywhere; }
dialog .button { margin-top:12px; }
@media(min-width:1700px) { .hero-content { max-width:1050px; } }
@media(max-width:900px) { .site-nav { gap:21px; letter-spacing:1px; } .site-header { padding-left:24px; padding-right:24px; } .brand img { width:220px; } .hero-content { margin-left:5vw; } .hero h1 { font-size:clamp(39px,5.2vw,64px); } }
@media(max-width:700px) {
  .site-header { min-height:86px; padding:8px 20px; gap:18px; flex-wrap:wrap; }
  .brand img { width:190px; }
  .site-nav { width:100%; justify-content:center; padding:8px 0 12px; gap:22px; font-size:11px; }
  .js .menu-toggle { display:block; }
  .js .site-nav { display:none; }
  .js .site-nav.is-open { display:flex; }
  .site-nav .nav-contact { padding:7px 10px; }
  .hero { height:auto; min-height:600px; }
  .hero-content { margin:0; padding:57px 25px 64px; max-width:100%; }
  .hero h1 { font-size:clamp(35px,8.4vw,52px); line-height:1.13; letter-spacing:-.7px; margin-top:22px; }
  .hero h1 span { display:inline; }
  .hero p { font-size:16px; line-height:1.7; max-width:530px; }
  .hero-photo { object-position:59% center; }
  .hero:after { background:linear-gradient(90deg,rgba(0,0,0,.79),rgba(0,0,0,.38)); }
  .eyebrow { font-size:11px; letter-spacing:2.2px; }
  .intro { padding:63px 24px; }
  .intro p:not(.eyebrow) { font-size:15px; line-height:1.85; }
  .intro h2 { font-size:31px; }
  .services { padding:58px 0; }
  .section-head { margin-bottom:26px; }
  .wrap { padding:0 24px; }
  .desktop-service-artwork { display:none; }
  .mobile-service-panels { display:grid; grid-template-columns:1fr; gap:22px; max-width:440px; margin:auto; }
  .mobile-service-panels img { display:block; width:100%; height:auto; }
  .mobile-service-panels figure { margin:0; background:#0c1013; box-shadow:0 12px 28px #00000012; }
  .mobile-tagline { padding:15px 10px 2px; margin:0; text-align:center; font-size:11px; line-height:1.8; text-transform:uppercase; letter-spacing:2.4px; color:var(--gold-dark); }
  .banner { padding:58px 24px; }
  .contact { padding:64px 24px; }
  .site-footer { font-size:11px; }
}
@media(max-width:360px) {
  .site-header { padding-left:15px; padding-right:15px; gap:8px; }
  .brand img { width:170px; }
  .hero h1 { font-size:33px; }
  .hero-content { padding-left:22px; padding-right:22px; }
  .site-nav { gap:15px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *:before, *:after { transition:none !important; } }
@media print {
  .site-header { background:white; }
  .site-nav,.menu-toggle,.preview-strip,.footer-links { display:none !important; }
  .hero { min-height:400px; height:400px; }
  .intro,.contact { padding:35px 20px; }
  .services { padding:30px 0; }
  .desktop-service-artwork { display:block !important; }
  .mobile-service-panels { display:none !important; }
  .triptych-img { width:78%; margin:auto; }
  .banner { padding:25px; }
}