/* T-Rex Art – styled to match the original Zonya-based site: charcoal top bar, maroon header, gold accents, Lato + italic serif subtitles */
:root{
  --maroon:#55060a; --maroon-d:#430407; --gold:#eec34d; --gold-d:#d9ab2f; --char:#2d2d30; --black:#000;
  --bg:#fbfbfb; --bg-grey:#f0f0f0; --text:#656565; --head:#333; --line:#e4e4e4; --teal:#78aca8;
  --sans:Lato,"Helvetica Neue",Arial,sans-serif; --serif:"Sorts Mill Goudy",Georgia,serif; --script:Lobster,cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;font:400 14px/24px var(--sans);color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-d);text-decoration:none}
a:hover{color:var(--maroon)}
.wrap{max-width:1170px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{margin:0;color:var(--head)}

/* top bar */
.topbar{background:var(--char);font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 24px;min-height:38px}
.contact-bits{display:flex;gap:26px;flex-wrap:wrap}
.contact-bits a{color:var(--gold)}
.contact-bits a:hover{color:#fff}
.ic::before{content:"";display:inline-block;width:9px;height:9px;border:1px solid var(--gold);margin-right:9px;vertical-align:0}
.social{display:flex;gap:4px}
.social a{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:2px;color:#fff;font:700 11px/1 var(--sans);text-transform:lowercase}
.social a:hover{color:#fff;opacity:.85}
.fb{background:#4864b4}.tw{background:#111;font-weight:900}.ig{background:#a2796a}.li{background:#3a8ac4}
.social.small a{width:24px;height:24px}

/* header */
.site-header{background:var(--maroon);position:sticky;top:0;z-index:50;box-shadow:0 2px 3px rgba(0,0,0,.25)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px}
.logo img{height:52px;width:auto}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.main-nav li+li::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.35);vertical-align:middle}
.main-nav li{display:flex;align-items:center}
.main-nav a{display:block;padding:24px 20px;color:#fff;text-transform:uppercase;font-weight:700;font-size:10px;letter-spacing:3px}
.main-nav a:hover,.main-nav a.active{color:var(--gold)}
.has-menu{position:relative}
.menu{display:none;position:absolute;right:-60px;top:100%;background:#111;padding:24px 28px;gap:40px;min-width:520px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.has-menu:hover .menu,.has-menu:focus-within .menu{display:flex}
.menu h3{font:900 11px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.menu ul{display:block}
.menu li::before{display:none}
.menu a{padding:5px 0;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:none;color:#ddd}
.menu a:hover{color:var(--gold)}
.nav-toggle{display:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);padding:8px 14px;font:700 10px var(--sans);text-transform:uppercase;letter-spacing:3px;cursor:pointer}

/* shared type */
.sec-title,.h-caps{font:900 13px/1.4 var(--sans);text-transform:uppercase;letter-spacing:1px}
.sec-title{text-align:center;color:var(--head)}
.sec-title.left{text-align:left;color:inherit}
.sec-sub{font:italic 400 17px/1.5 var(--serif);color:#888;text-align:center;margin:6px 0 34px}
.sec-sub.left{text-align:left}
.h-caps.big{font-size:15px;margin-bottom:12px}
h2.h-caps{margin:26px 0 8px;font-size:13px}
.btn{display:inline-block;background:var(--gold);color:#fff;text-transform:uppercase;font:900 11px/1 var(--sans);letter-spacing:1px;padding:13px 22px;border:0;border-radius:2px;cursor:pointer}
.btn:hover{background:var(--maroon);color:#fff}
.btn.white{background:#fff;color:var(--head)}
.btn.white:hover{background:var(--maroon);color:#fff}
.btn.teal{background:var(--teal)}
.btn.teal:hover{background:var(--maroon)}
.center{text-align:center}

/* hero */
.hero{background:#1b1b1b center/cover no-repeat;color:#fff;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.1))}
.hero-in{position:relative;padding:120px 20px 130px}
.hero h1{font:900 clamp(48px,9vw,96px)/1 var(--sans);color:#fff;text-transform:uppercase;letter-spacing:2px}
.hero-small{font:400 14px var(--sans);letter-spacing:4px;text-transform:uppercase;margin:14px 0 0}
.hero-lead{font:italic 400 22px/1.4 var(--serif);margin:6px 0 26px}

/* home bands */
.band{padding:56px 0}
.band.light{background:#f5f5f5}
.band.grey{background:var(--bg-grey)}
.band.dark{background:var(--char);color:#c9c9c9}
.band.dark .sec-title{color:#fff}
.band.dark .sec-sub{color:#999}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 40px}
.feat{display:block;color:var(--text)}
.feat h4{font:900 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:1px;color:var(--head);margin-bottom:8px}
.feat p{margin:0;font-size:13px;line-height:20px}
.feat:hover h4{color:var(--maroon)}
.work{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start}
.work-text p{margin:0 0 22px;font-size:13px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.thumb{display:block;aspect-ratio:1/.72;overflow:hidden;background:#111}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.thumb:hover img{transform:scale(1.06)}
.worked{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px}
.worked li{background:#fff;padding:14px 18px;font:900 11px/1.4 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--head)}
.cta{background:var(--gold);padding:46px 0;text-align:center}
.cta p{margin:0 0 20px;font:italic 400 28px/1.3 var(--serif);color:#222}

/* inner pages */
.sec-head{padding:44px 0 6px}
.sec-head .sec-sub{margin-bottom:22px}
.page-intro{padding:44px 0 18px}
.lead{margin:0;font:italic 400 clamp(20px,2.6vw,26px)/1.5 var(--serif);color:#888}
.inner{padding:30px 0 70px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.svc-list,.details{list-style:none;padding:0;margin:0}
.svc-list li{border-bottom:1px solid var(--line)}
.svc-list a{display:block;padding:10px 0;color:var(--head);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:1px}
.svc-list a:hover{color:var(--gold-d)}

/* service page */
.service{display:grid;grid-template-columns:240px 1fr;gap:34px;padding-top:20px}
.side{list-style:none;margin:0;padding:0;position:sticky;top:96px}
.side li{background:#2f2f2f;line-height:35px;padding-left:15px;font-size:12px;text-transform:uppercase;border-bottom:1px solid #444}
.side li.on{background:#e7e7e7}
.side a{display:block;color:#e7e7e7}
.side li.on a{color:#555}
.side a:hover{color:var(--gold)}
.service article{min-width:0}
.service article>p{font-size:13px;line-height:21px;margin:0 0 14px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 10px}
.gal{display:block;aspect-ratio:1/.8;overflow:hidden;background:#fff}
.gal img{width:100%;height:100%;object-fit:contain}
.more{color:var(--text)}

/* portfolio */
.portfolio{padding-bottom:70px}
.filters{display:flex;flex-wrap:wrap;gap:6px 22px;background:#fff;padding:18px 22px;margin-bottom:22px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.filters button{font:900 10px/1.6 var(--sans);text-transform:uppercase;letter-spacing:1px;color:#444;background:none;border:0;padding:2px 0;cursor:pointer}
.filters button:hover{color:var(--maroon)}
.filters button.on{color:var(--gold-d)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 20px}
.grid>button{all:unset;display:block;box-sizing:border-box;cursor:zoom-in;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.grid>button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.grid .pic{display:block;aspect-ratio:1/.72;overflow:hidden;background:#fff}
.grid img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.grid>button:hover img{transform:scale(1.04)}
.grid .cap{display:block;padding:14px 16px 16px;font:900 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:1px;color:#444}
.grid>button:hover .cap{color:var(--maroon)}
.count{display:none}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,8,6,.94);z-index:100;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:86vw;max-height:90vh;text-align:center}
.lightbox img{max-height:80vh;margin:0 auto;background:#fff}
.lightbox figcaption{color:#fff;margin-top:12px;text-transform:uppercase;letter-spacing:1px;font-size:12px}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:46px;cursor:pointer;padding:14px;line-height:1}
.lb-close{top:8px;right:14px}.lb-prev{left:10px;top:50%}.lb-next{right:10px;top:50%}

/* contact */
.contact{display:grid;grid-template-columns:1fr 2fr;gap:50px}
.contact-info p{font-size:13px;line-height:21px}
.contact-info .h-caps{margin:0 0 12px}
.contact-info .h-caps+.social{margin-top:6px}
.details{margin:16px 0 28px}
.details li{padding-left:22px;position:relative;font-size:13px;margin-bottom:4px}
.details li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border:1px solid var(--gold)}
.form input,.form textarea{display:block;width:100%;padding:11px 12px;margin-bottom:10px;font:400 13px var(--sans);color:#444;border:1px solid #ddd;background:#fff;border-radius:2px}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:0}
.note{margin-top:12px;font-size:13px}

/* footer */
.site-footer{background:var(--char);color:#bdbdbd;padding:26px 0;margin-top:0}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}

/* image fallback */
.noimg{background:repeating-linear-gradient(45deg,#ece3d0,#ece3d0 10px,#f4ecda 10px,#f4ecda 20px) !important}
.noimg>img{visibility:hidden}

@media (max-width:991px){
  .feats{grid-template-columns:repeat(2,1fr)}
  .work{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .service{grid-template-columns:1fr}
  .side{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
  .nav-toggle{display:block}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--maroon-d)}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;padding:6px 20px 14px}
  .main-nav li+li::before{display:none}
  .main-nav a{padding:12px 0}
  .menu,.has-menu:hover .menu,.has-menu:focus-within .menu{display:none}
}
@media (max-width:640px){
  .feats,.two-col,.contact,.gallery{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .side{grid-template-columns:1fr}
  .social{display:none}.topbar .social{display:none}
  .hero-in{padding:70px 20px 80px}
}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}