/* ============================================================
   SUNSHINE ADVERTISING & MEDIA — design tokens
   Palette pulled from brand deck: deep signage-navy + fabricator gold,
   with a warm amber "lit channel-letter" glow as the signature accent.
   ============================================================ */
:root{
  --navy-950:#070f21;
  --navy-900:#0d1e3d;
  --navy-850:#122649;
  --navy-800:#173058;
  --navy-700:#204074;
  --gold-500:#f6c31a;
  --gold-400:#ffd447;
  --gold-300:#ffe28a;
  --amber-glow:#ffb020;
  --ink-50:#f8f6ef;
  --ink-200:#e4eaf7;
  --ink-muted:#c2cde3;
  --ink-muted-2:#9aa8c6;

  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-body:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  --wrap:1180px;
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--navy-900);
  color:var(--ink-200);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:400; letter-spacing:0.01em;}
p{margin:0 0 1em; color:var(--ink-muted);}
p:last-child{margin-bottom:0;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}

/* film-grain overlay for texture, subtle */
.grain{
  position:fixed; top:0; right:0; bottom:0; left:0; pointer-events:none; z-index:999;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--amber-glow);
  margin:0 0 18px;
}
.eyebrow-light{color:var(--gold-400);}
.eyebrow .sep{color:var(--ink-muted-2); margin:0 2px;}

.section-title{
  font-size:clamp(30px, 4vw, 46px);
  line-height:1.06;
  color:var(--ink-50);
  margin:0 0 22px;
  text-transform:uppercase;
}
.section-title.light{color:#fff;}

/* ---------- glow signature (channel-letter look) ---------- */
.glow-text{
  font-family:var(--font-display);
  text-transform:uppercase;
  color:#fff9e8;
  font-size:clamp(40px, 7.4vw, 92px);
  line-height:1.02;
  letter-spacing:0.01em;
  margin:0 0 22px;
  text-shadow:
    0 0 6px rgba(255,212,71,0.85),
    0 0 18px rgba(255,176,32,0.75),
    0 0 46px rgba(255,176,32,0.5),
    0 0 90px rgba(246,195,26,0.35);
  animation:flicker 5.5s ease-in-out infinite;
}
.glow-text-sm{font-size:clamp(32px, 5.5vw, 58px);}
@keyframes flicker{
  0%,100%{opacity:1;}
  4%{opacity:0.92;}
  6%{opacity:1;}
  46%{opacity:1;}
  48%{opacity:0.88;}
  50%{opacity:1;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px;
  font-family:var(--font-mono);
  font-size:13.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:var(--radius);
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  border:1.5px solid transparent;
}
.btn-gold{
  background:var(--gold-500);
  color:var(--navy-950);
  font-weight:600;
  box-shadow:0 0 0 rgba(246,195,26,0);
}
.btn-gold:hover{
  background:var(--gold-400);
  box-shadow:0 0 24px rgba(246,195,26,0.45);
  transform:translateY(-1px);
}
.btn-ghost{
  border-color:rgba(255,255,255,0.35);
  color:#fff;
}
.btn-ghost:hover{
  border-color:var(--gold-400);
  color:var(--gold-400);
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(7,15,33,0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.nav-inner{
  max-width:1460px; margin:0 auto; padding:6px 32px;
  display:flex; align-items:center; gap:22px;
}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto; flex-shrink:0;}
.brand-mark{height:100px; width:auto; flex-shrink:0;}
.brand-word{display:flex; align-items:center; line-height:1.15;}
.brand-word strong{
  font-family:var(--font-display); font-size:13.5px; line-height:1.15;
  letter-spacing:0.02em; color:var(--gold-400); white-space:nowrap;
}

.nav-links{display:flex; gap:15px; flex-shrink:0;}
.nav-links a{
  font-size:12.5px; white-space:nowrap; color:var(--ink-200); position:relative; padding:4px 0;
  transition:color 0.2s ease;
}
.nav-links a:hover{color:var(--gold-400);}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--gold-400); transition:width 0.25s ease;
}
.nav-links a:hover::after{width:100%;}

.nav-cta{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; color:var(--gold-300);
  border:1px solid rgba(246,195,26,0.4); padding:8px 12px; border-radius:2px;
  white-space:nowrap;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.nav-cta:hover{border-color:var(--gold-400); background:rgba(246,195,26,0.08);}
.nav-cta .dot{
  width:7px; height:7px; border-radius:50%; background:var(--amber-glow);
  box-shadow:0 0 8px var(--amber-glow);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
.nav-toggle span{width:24px; height:2px; background:var(--ink-50);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  padding-top:90px;
}
.hero-bg{position:absolute; top:0; right:0; bottom:0; left:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 35%;}
.hero-scrim{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:
    linear-gradient(100deg, rgba(7,15,33,0.96) 0%, rgba(7,15,33,0.86) 32%, rgba(7,15,33,0.55) 62%, rgba(7,15,33,0.35) 100%),
    linear-gradient(0deg, rgba(7,15,33,0.98) 0%, rgba(7,15,33,0.2) 40%, rgba(7,15,33,0.55) 100%);
}
.hero-vignette{
  position:absolute; top:0; right:0; bottom:0; left:0;
  box-shadow:inset 0 -140px 140px -80px rgba(7,15,33,0.9);
}

.hero-content{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto; padding:60px 32px 40px;
  width:100%;
}
.hero-sub{
  max-width:560px; font-size:17px; color:var(--ink-200); margin-bottom:34px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}

.hero-meta{
  display:flex; gap:48px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.14); padding-top:26px;
}
.hero-meta > div{display:flex; flex-direction:column;}
.hero-meta .num{
  font-family:var(--font-display); font-size:30px; color:var(--gold-400);
}
.hero-meta .label{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:2px;}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; width:26px; height:42px; border:1.5px solid rgba(255,255,255,0.4); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; background:var(--gold-400); border-radius:3px;
  animation:scrollcue 1.8s ease infinite;
}
@keyframes scrollcue{0%{opacity:1; top:7px;}70%{opacity:0.2; top:22px;}100%{opacity:0; top:22px;}}

/* reveal-on-load */
.reveal{opacity:0; transform:translateY(16px); animation:reveal 0.8s ease forwards;}
.hero .eyebrow.reveal{animation-delay:0.05s;}
.hero h1.reveal{animation-delay:0.15s;}
.hero-sub.reveal{animation-delay:0.35s;}
.hero-actions.reveal{animation-delay:0.5s;}
.hero-meta.reveal{animation-delay:0.65s;}
@keyframes reveal{to{opacity:1; transform:translateY(0);}}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:120px 0; background:var(--navy-900);}
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:72px; align-items:start;}
.about-copy p{font-size:15.5px;}
.about-figure{position:relative; border-radius:var(--radius); overflow:hidden;}
.about-figure img{width:100%; height:auto; display:block;}
.about-figure-tag{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(7,15,33,0.92), rgba(7,15,33,0));
  color:var(--gold-300); font-family:var(--font-mono); font-size:12px;
  padding:36px 18px 16px; letter-spacing:0.03em;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{padding:110px 0 130px; background:var(--navy-850);}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:90px;}
.service-card{
  background:var(--navy-800); border:1px solid rgba(255,255,255,0.06);
  padding:0 0 30px; transition:transform 0.25s ease, border-color 0.25s ease;
}
.service-card:hover{transform:translateY(-6px); border-color:rgba(246,195,26,0.35);}
.service-bar{
  background:var(--gold-500); color:var(--navy-950);
  font-family:var(--font-mono); font-weight:600; font-size:14px; letter-spacing:0.03em;
  text-transform:uppercase; padding:16px 22px; margin-bottom:20px;
}
.service-desc{padding:0 22px; font-size:14.5px;}
.service-card ul{padding:0 22px; margin-top:14px;}
.service-card li{
  font-size:14.5px; color:var(--ink-200); padding:8px 0 8px 20px; position:relative;
  border-top:1px solid rgba(255,255,255,0.06);
}
.service-card li:first-child{border-top:none;}
.service-card li::before{
  content:""; position:absolute; left:0; top:16px; width:8px; height:2px; background:var(--gold-400);
}

.specialization-list{padding-top:10px;}
.spec-row{
  display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:center;
  padding:46px 0; border-top:1px solid rgba(255,255,255,0.08);
}
.spec-row:last-child{border-bottom:1px solid rgba(255,255,255,0.08);}
.spec-row.reverse{grid-template-columns:1.2fr 1fr;}
.spec-row.reverse .spec-figure{order:2;}
.spec-row.reverse .spec-copy{order:1;}
.spec-figure img{width:100%; height:260px; object-fit:cover; border-radius:var(--radius);}
.spec-copy h3{
  font-size:26px; color:var(--ink-50); text-transform:uppercase; margin-bottom:12px;
}
.spec-copy p{font-size:15px;}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.work{padding:120px 0 100px; background:var(--navy-950);}
.work-head{max-width:var(--wrap); margin:0 auto 56px; padding:0 32px;}
.work-grid{
  max-width:var(--wrap); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.work-item{
  position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:4/3.1; margin:0;
}
.work-item.span-2{grid-column:span 2;}
.work-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
  filter:saturate(0.92) brightness(0.92);
}
.work-item:hover img{transform:scale(1.06); filter:saturate(1.05) brightness(1);}
.work-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:18px 18px 16px;
  background:linear-gradient(0deg, rgba(6,12,26,0.95) 0%, rgba(6,12,26,0.55) 55%, rgba(6,12,26,0) 100%);
  display:flex; flex-direction:column; gap:2px;
}
.work-item figcaption strong{
  font-family:var(--font-display); font-size:16px; color:#fff; text-transform:uppercase; letter-spacing:0.01em;
}
.work-item figcaption span{font-family:var(--font-mono); font-size:11.5px; color:var(--gold-300);}

/* ============================================================
   WHY US
   ============================================================ */
.why{padding:120px 0; background:var(--navy-900);}
.why-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px;}
.why-lede{font-size:15px; max-width:340px;}
.why-list{display:flex; flex-direction:column;}
.why-item{
  display:grid; grid-template-columns:56px 1fr; gap:22px;
  padding:26px 0; border-top:1px solid rgba(255,255,255,0.08);
}
.why-item:last-child{border-bottom:1px solid rgba(255,255,255,0.08);}
.why-icon{
  width:56px; height:56px; border-radius:50%;
  border:1.5px solid rgba(246,195,26,0.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-400);
}
.why-icon svg{width:26px; height:26px;}
.why-item h3{font-size:18px; color:var(--ink-50); text-transform:uppercase; margin-bottom:6px;}
.why-item p{font-size:14.5px;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding:130px 0; background:var(--navy-850); position:relative; overflow:hidden;}
.contact::before{
  content:""; position:absolute; top:-30%; right:-10%; width:600px; height:600px;
  background:radial-gradient(circle, rgba(255,176,32,0.15) 0%, rgba(255,176,32,0) 65%);
  pointer-events:none;
}
.contact-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:70px; position:relative; z-index:1;}
.contact-copy{max-width:420px; font-size:15.5px; margin-bottom:30px;}
.contact-details{display:flex; flex-direction:column; gap:26px; padding-top:6px;}
.detail-item{border-top:1px solid rgba(255,255,255,0.1); padding-top:18px;}
.detail-item:first-child{border-top:none; padding-top:0;}
.detail-label{
  display:block; font-family:var(--font-mono); font-size:11.5px; color:var(--amber-glow);
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px;
}
.detail-item a{font-size:18px; color:var(--ink-50); transition:color 0.2s ease;}
.detail-item a:hover{color:var(--gold-400);}
.detail-item p{font-size:15px; color:var(--ink-200);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy-800); padding:44px 0 38px; border-top:1px solid rgba(255,255,255,0.14);}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.footer-brand{display:flex; align-items:center; gap:14px;}
.footer-brand img{height:54px;}
.footer-brand div{display:flex; flex-direction:column; gap:2px;}
.footer-brand strong{font-family:var(--font-display); font-size:13px; letter-spacing:0.03em; color:var(--gold-400);}
.footer-brand span{font-size:12.5px; color:var(--ink-200);}
.footer-copy{font-size:12px; color:var(--ink-muted); margin:0;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .about-grid, .why-grid, .contact-grid{grid-template-columns:1fr; gap:48px;}
  .spec-row, .spec-row.reverse{grid-template-columns:1fr;}
  .spec-row.reverse .spec-figure, .spec-row.reverse .spec-copy{order:initial;}
  .service-grid{grid-template-columns:1fr; gap:20px;}
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .work-item.span-2{grid-column:span 2;}
  .nav-links{
    position:fixed; top:103px; left:0; right:0; bottom:auto;
    height:calc(100vh - 103px); align-self:flex-start; overflow-y:auto;
    background:var(--navy-950); flex-direction:column; gap:0;
    padding:10px 32px; transform:translateX(100%); transition:transform 0.3s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:16px;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}

@media (max-width: 640px){
  .wrap{padding:0 20px;}
  .nav-inner{padding:14px 20px;}
  .hero-content{padding:40px 20px 30px;}
  .hero-meta{gap:30px;}
  .work-grid{grid-template-columns:1fr; padding:0 20px;}
  .work-item.span-2{grid-column:span 1;}
  .work-head{padding:0 20px;}
  .about, .services, .work, .why, .contact{padding-top:80px; padding-bottom:80px;}
  .brand-word strong{font-size:10.5px; letter-spacing:0.01em; white-space:normal; max-width:20ch;}
  .brand-mark{height:74px;}
  .brand{gap:9px;}
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* active nav state */
.nav-links a.is-active{color:var(--gold-400);}
.nav-links a.is-active::after{width:100%;}

/* ---------- inner page hero ---------- */
.page-hero{
  position:relative; padding:170px 0 90px; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.page-hero-bg{position:absolute; top:0; right:0; bottom:0; left:0; z-index:0;}
.page-hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%;}
.page-hero-scrim{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:
    linear-gradient(100deg, rgba(7,15,33,0.97) 0%, rgba(7,15,33,0.88) 42%, rgba(7,15,33,0.6) 100%),
    linear-gradient(0deg, rgba(7,15,33,0.95) 0%, rgba(7,15,33,0.3) 60%);
}
.page-hero-inner{position:relative; z-index:1;}
.page-hero h1{
  font-size:clamp(34px, 5.4vw, 64px); line-height:1.04; color:var(--ink-50);
  text-transform:uppercase; margin:0 0 18px;
}
.page-hero-sub{max-width:620px; font-size:16.5px; color:var(--ink-200); margin:0;}

/* ---------- category cards (home) ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.cat-card{
  background:var(--navy-800); border:1px solid rgba(255,255,255,0.07);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform 0.25s ease, border-color 0.25s ease;
}
.cat-card:hover{transform:translateY(-6px); border-color:rgba(246,195,26,0.4);}
.cat-card img{width:100%; height:200px; object-fit:cover;}
.cat-card-body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.cat-card-body h3{font-size:21px; color:var(--ink-50); text-transform:uppercase;}
.cat-card-body p{font-size:14.5px; flex:1;}
.cat-link{
  font-family:var(--font-mono); font-size:12.5px; color:var(--gold-400);
  letter-spacing:0.06em; text-transform:uppercase;
}

/* ---------- category page body ---------- */
.cat-body{padding:90px 0 110px; background:var(--navy-900);}
.cat-intro{max-width:720px; margin-bottom:56px;}
.cat-intro p{font-size:16.5px; color:var(--ink-200);}
.cat-h2{
  font-size:clamp(22px,2.6vw,30px); color:var(--ink-50); text-transform:uppercase;
  margin:64px 0 6px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.1);
}
.cat-h2:first-of-type{margin-top:0; padding-top:0; border-top:none;}
.cat-note{font-size:14.5px; margin-bottom:26px; max-width:640px;}

/* ---------- gallery grid ---------- */
.gal-grid{
  column-count:3; column-gap:16px; margin-bottom:8px;
}
.gal-item{
  position:relative; margin:0 0 16px; overflow:hidden; border-radius:var(--radius);
  background:var(--navy-950); border:1px solid rgba(255,255,255,.06);
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  display:inline-block; width:100%;
}
.gal-item.wide{/* natural size in masonry */}
.gal-item img{
  width:100%; height:auto; display:block;
  filter:saturate(0.95) brightness(0.94);
  transition:filter 0.4s ease;
}
.gal-item:hover img{filter:saturate(1.06) brightness(1.04);}
.gal-item{transition:border-color .25s ease;}
.gal-item:hover{border-color:rgba(246,195,26,.4);}
.gal-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 15px 13px;
  background:linear-gradient(0deg, rgba(6,12,26,0.97) 0%, rgba(6,12,26,0.88) 62%, rgba(6,12,26,0.55) 100%);
  display:flex; flex-direction:column; gap:2px;
}
.gal-item figcaption strong{
  font-family:var(--font-display); font-size:15px; color:#fff;
  text-transform:uppercase; letter-spacing:0.01em; line-height:1.15;
}
.gal-item figcaption span{font-family:var(--font-mono); font-size:11px; color:var(--gold-300); line-height:1.3;}

.center-link{text-align:center; margin-top:44px;}

/* ---------- filter bar ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px;}
.filter-btn{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  background:transparent; color:var(--ink-muted); cursor:pointer;
  border:1px solid rgba(255,255,255,0.18); padding:10px 18px; border-radius:2px;
  transition:all 0.2s ease;
}
.filter-btn:hover{color:var(--gold-400); border-color:rgba(246,195,26,0.5);}
.filter-btn.is-on{background:var(--gold-500); color:var(--navy-950); border-color:var(--gold-500); font-weight:600;}
.gal-item.is-hidden{display:none;}

/* ---------- process steps (about) ---------- */
.step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.step{
  background:var(--navy-800); border:1px solid rgba(255,255,255,0.07);
  padding:26px 22px; display:flex; flex-direction:column; gap:10px;
}
.step-n{font-family:var(--font-display); font-size:30px; color:var(--gold-400); line-height:1;}
.step h3{font-size:17px; color:var(--ink-50); text-transform:uppercase;}
.step p{font-size:14px;}

/* ---------- spec blocks ---------- */
.spec-list{display:grid; grid-template-columns:repeat(2,1fr); gap:0 46px; margin-top:70px;}
.spec-block{padding:26px 0; border-top:1px solid rgba(255,255,255,0.1);}
.spec-block h3{font-size:19px; color:var(--ink-50); text-transform:uppercase; margin-bottom:8px;}
.spec-block p{font-size:14.5px;}

/* ---------- CTA strip ---------- */
.cta-strip{
  background:var(--navy-850); padding:74px 0; position:relative; overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.08);
}
.cta-strip::before{
  content:""; position:absolute; top:-40%; right:-5%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(255,176,32,0.14) 0%, rgba(255,176,32,0) 65%);
  pointer-events:none;
}
.cta-strip-inner{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.cta-strip h2{margin-bottom:12px;}
.cta-strip p{font-size:15px; max-width:460px; margin:0;}
.cta-strip-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- footer contact block ---------- */
.footer-inner{align-items:flex-start;}
.footer-contact{display:flex; flex-direction:column; gap:5px;}
.footer-contact a{font-size:14px; color:var(--ink-50); transition:color 0.2s ease;}
.footer-contact a:hover{color:var(--gold-400);}
.footer-contact p{font-size:13px; color:var(--ink-200); margin:7px 0 0; line-height:1.55;}
.footer-copy{width:100%; padding-top:22px; margin-top:10px; border-top:1px solid rgba(255,255,255,0.14);}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .cat-grid{grid-template-columns:1fr;}
  .step-grid{grid-template-columns:repeat(2,1fr);}
  .gal-grid{column-count:2;}
  .spec-list{grid-template-columns:1fr; gap:0;}
  .page-hero{padding:140px 0 70px;}
}
@media (max-width: 640px){
  .gal-grid{column-count:1;}
  .gal-item.wide{grid-column:span 1;}
  .step-grid{grid-template-columns:1fr;}
  .cat-body{padding:60px 0 70px;}
  .cta-strip{padding:54px 0;}
  .cta-strip-inner{flex-direction:column; align-items:flex-start;}
}

/* ---------- FAQ accordion ---------- */
.faq-section{padding:100px 0; background:var(--navy-850); border-top:1px solid rgba(255,255,255,0.07);}
.faq-list{max-width:860px; margin-top:34px;}
.faq-item{border-top:1px solid rgba(255,255,255,0.12);}
.faq-item:last-child{border-bottom:1px solid rgba(255,255,255,0.12);}
.faq-item summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-size:17px; font-weight:600; color:var(--ink-50); line-height:1.4;
  transition:color 0.2s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--gold-400);}
.faq-item summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:22px; color:var(--gold-400); line-height:1;
  transition:transform 0.25s ease;
}
.faq-item[open] summary::after{content:"\2212";}
.faq-item[open] summary{color:var(--gold-400);}
.faq-item p{font-size:15px; color:var(--ink-200); padding:0 40px 24px 0; margin:0;}
.faq-item summary:focus-visible{outline:2px solid var(--gold-400); outline-offset:3px;}
@media (max-width:640px){
  .faq-section{padding:64px 0;}
  .faq-item summary{font-size:15.5px; padding:18px 34px 18px 0;}
  .faq-item p{font-size:14.5px;}
}

/* ============================================================
   AI CUSTOMER SERVICE CHAT
   ============================================================ */
.sun-chat{position:fixed; right:22px; bottom:22px; z-index:1000; font-family:var(--font-body);}
.sun-chat-fab{
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer; position:relative;
  background:var(--gold-500); color:var(--navy-950);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,0.4), 0 0 0 rgba(246,195,26,0.5);
  transition:transform .22s ease, box-shadow .22s ease;
  margin-left:auto;
}
.sun-chat-fab:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(246,195,26,.55);}
.sun-chat-fab svg{width:27px; height:27px;}
.sun-ico-close{display:none;}
.sun-chat.is-open .sun-ico-chat{display:none;}
.sun-chat.is-open .sun-ico-close{display:block;}
.sun-fab-dot{
  position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%;
  background:#25d366; border:2.5px solid var(--navy-900);
}

.sun-panel{
  position:absolute; right:0; bottom:74px; width:370px; max-width:calc(100vw - 32px);
  background:var(--navy-850); border:1px solid rgba(255,255,255,.13); border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.55); overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.sun-chat.is-open .sun-panel{opacity:1; transform:none; pointer-events:auto;}

.sun-head{display:flex; align-items:center; gap:10px; padding:14px 14px 13px; background:var(--navy-950); border-bottom:1px solid rgba(255,255,255,.1);}
.sun-head-id{display:flex; align-items:center; gap:10px; flex:1; min-width:0;}
.sun-head-logo{width:36px; height:36px; object-fit:contain; flex-shrink:0;}
.sun-head-id strong{display:block; font-size:14px; color:var(--gold-400); font-family:var(--font-display); letter-spacing:.03em;}
.sun-head-id span{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-muted);}
.sun-live{width:6px; height:6px; border-radius:50%; background:#25d366; flex-shrink:0;}
.sun-head-x{background:none; border:0; color:var(--ink-muted); cursor:pointer; padding:5px; border-radius:4px;}
.sun-head-x svg{width:18px; height:18px;}
.sun-head-x:hover{color:#fff; background:rgba(255,255,255,.08);}

.sun-log{padding:16px 14px; height:330px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; background:var(--navy-900);}
.sun-log::-webkit-scrollbar{width:7px;}
.sun-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:4px;}

.sun-msg{max-width:88%; padding:11px 13px; border-radius:12px; font-size:14px; line-height:1.5;}
.sun-msg p{margin:0 0 8px; color:inherit; font-size:14px;}
.sun-msg p:last-child{margin-bottom:0;}
.sun-bot{align-self:flex-start; background:var(--navy-800); color:var(--ink-200); border:1px solid rgba(255,255,255,.07); border-bottom-left-radius:3px;}
.sun-me{align-self:flex-end; background:var(--gold-500); color:var(--navy-950); font-weight:500; border-bottom-right-radius:3px;}
.sun-inline{color:var(--gold-400); font-family:var(--font-mono); font-size:12.5px;}
.sun-inline:hover{text-decoration:underline;}

.sun-typing{display:flex; gap:4px; align-items:center; padding:14px 15px;}
.sun-typing span{width:6px; height:6px; border-radius:50%; background:var(--ink-muted); animation:sunblink 1.3s infinite;}
.sun-typing span:nth-child(2){animation-delay:.18s;}
.sun-typing span:nth-child(3){animation-delay:.36s;}
@keyframes sunblink{0%,60%,100%{opacity:.25;}30%{opacity:1;}}

.sun-actions{display:flex; flex-direction:column; gap:7px; margin-top:10px;}
.sun-act{
  display:block; text-align:center; padding:9px 12px; border-radius:4px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid rgba(246,195,26,.45); color:var(--gold-300); transition:all .2s ease;
}
.sun-act:hover{background:rgba(246,195,26,.12); color:var(--gold-400);}
.sun-act-wa{background:#25d366; border-color:#25d366; color:#04301a; font-weight:700;}
.sun-act-wa:hover{background:#1fbe5b; border-color:#1fbe5b; color:#04301a;}

.sun-chips{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; background:var(--navy-900);}
.sun-chips:empty{padding:0;}
.sun-chip{
  background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--ink-200);
  font-size:12px; padding:7px 11px; border-radius:14px; cursor:pointer; font-family:var(--font-body);
  transition:all .18s ease;
}
.sun-chip:hover{border-color:var(--gold-400); color:var(--gold-400); background:rgba(246,195,26,.08);}

.sun-form{display:flex; gap:8px; padding:11px 12px; background:var(--navy-850); border-top:1px solid rgba(255,255,255,.1);}
.sun-form input{
  flex:1; background:var(--navy-950); border:1px solid rgba(255,255,255,.16); border-radius:6px;
  padding:11px 13px; color:var(--ink-50); font-size:14px; font-family:var(--font-body); min-width:0;
}
.sun-form input::placeholder{color:var(--ink-muted-2);}
.sun-form input:focus{outline:none; border-color:var(--gold-400);}
.sun-form button{
  width:42px; flex-shrink:0; border:0; border-radius:6px; background:var(--gold-500);
  color:var(--navy-950); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.sun-form button:hover{background:var(--gold-400);}
.sun-form button svg{width:19px; height:19px;}

.sun-foot{margin:0; padding:0 14px 11px; background:var(--navy-850); font-size:10.5px; color:var(--ink-muted-2); text-align:center;}
.sun-foot a{color:var(--gold-400);}
.sun-foot a:hover{text-decoration:underline;}

@media (max-width:640px){
  .sun-chat{right:14px; bottom:14px;}
  .sun-chat-fab{width:54px; height:54px;}
  .sun-panel{width:calc(100vw - 28px); bottom:66px;}
  .sun-log{height:min(52vh,340px);}
}

/* ============================================================
   WHATSAPP BUTTONS
   ============================================================ */
.wa-float{
  position:fixed; right:22px; bottom:94px; z-index:999;
  display:flex; align-items:center; gap:0;
  height:56px; width:56px; padding:0; overflow:hidden;
  border-radius:28px; background:#25d366; color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:width .28s cubic-bezier(.2,.8,.2,1), transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.wa-float svg{width:30px; height:30px; flex-shrink:0; margin-left:13px;}
.wa-float-label{
  white-space:nowrap; font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; padding:0 18px 0 10px; opacity:0;
  transition:opacity .2s ease .06s;
}
.wa-float:hover{
  width:194px; transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 22px rgba(37,211,102,.5);
}
.wa-float:hover .wa-float-label{opacity:1;}
.wa-float::after{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:28px;
  box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:wapulse 2.6s infinite;
}
@keyframes wapulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}
  70%{box-shadow:0 0 0 15px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
/* hide while the chat panel is open so they don't collide */
body.sun-chat-open .wa-float{opacity:0; pointer-events:none; transform:translateY(8px);}

.btn-wa{
  background:#25d366; color:#04301a; font-weight:700; gap:8px;
  border-color:#25d366;
}
.btn-wa svg{width:19px; height:19px;}
.btn-wa:hover{background:#1fbe5b; border-color:#1fbe5b; color:#04301a; transform:translateY(-1px);}

@media (max-width:640px){
  .wa-float{right:14px; bottom:80px; height:50px; width:50px;}
  .wa-float svg{width:27px; height:27px; margin-left:11.5px;}
  .wa-float:hover{width:50px;}
  .wa-float:hover .wa-float-label{opacity:0;}
}

/* ============================================================
   ONE-STOP BAND
   ============================================================ */
.onestop{padding:110px 0; background:var(--navy-950); border-top:1px solid rgba(255,255,255,.07);}
.onestop-lede{max-width:760px; font-size:16.5px; color:var(--ink-200); margin-bottom:56px;}
.onestop-flow{display:flex; align-items:stretch; gap:18px;}
.os-step{
  flex:1; background:var(--navy-850); border:1px solid rgba(255,255,255,.08);
  padding:30px 26px; position:relative; display:flex; flex-direction:column; gap:12px;
  transition:border-color .25s ease, transform .25s ease;
}
.os-step:hover{border-color:rgba(246,195,26,.4); transform:translateY(-5px);}
.os-n{
  position:absolute; top:20px; right:22px;
  font-family:var(--font-display); font-size:36px; line-height:1;
  color:rgba(246,195,26,.22);
}
.os-ico{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(246,195,26,.45); color:var(--gold-400);
}
.os-ico svg{width:27px; height:27px;}
.os-step h3{font-size:22px; color:var(--ink-50); text-transform:uppercase;}
.os-step p{font-size:14.5px; margin:0;}
.os-arrow{
  display:flex; align-items:center; font-size:26px; color:var(--gold-400);
  opacity:.65; flex-shrink:0;
}
@media (max-width:980px){
  .onestop-flow{flex-direction:column;}
  .os-arrow{transform:rotate(90deg); justify-content:center; padding:2px 0;}
}
@media (max-width:640px){
  .onestop{padding:70px 0;}
  .onestop-lede{margin-bottom:36px;}
}

/* ---------- uniform gallery (All Projects overview) ---------- */
.gal-grid--uniform{
  column-count:auto; column-gap:normal;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.gal-grid--uniform .gal-item{
  display:block; width:auto; margin:0;
  aspect-ratio:4/3; height:auto;
  break-inside:auto;
}
.gal-grid--uniform .gal-item img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}
.gal-grid--uniform .gal-item:hover img{transform:scale(1.06); filter:saturate(1.06) brightness(1.03);}
@media (max-width:980px){ .gal-grid--uniform{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .gal-grid--uniform{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .gal-grid--uniform{grid-template-columns:1fr;} }

/* collapse nav to hamburger earlier — the full company name + 7 links need room */
@media (max-width:1080px){
  .nav-links{
    position:fixed; top:112px; left:0; right:0; bottom:auto;
    height:calc(100vh - 112px); align-self:flex-start;
    background:var(--navy-950); flex-direction:column; gap:0;
    padding:10px 32px; transform:translateX(100%);
    transition:transform .3s ease; overflow-y:auto; z-index:99;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{padding:16px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:16px; white-space:normal;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
  .brand-word strong{font-size:14px;}
}

/* filter hide must win over the uniform-grid display rule */
.gal-grid--uniform .gal-item.is-hidden,
.gal-item.is-hidden{display:none !important;}

.contact-actions{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- From empty to brand up ---------- */
.empty2up{padding:110px 0; background:var(--navy-900); border-top:1px solid rgba(255,255,255,.07);}
.empty2up h2{margin-bottom:20px;}
.e2u-lede{max-width:720px; font-size:16.5px; color:var(--ink-200); margin-bottom:52px;}
.e2u-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.e2u-shot{margin:0; position:relative;}
.e2u-shot img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08); display:block;
  filter:saturate(.95) brightness(.93); transition:filter .4s ease, transform .4s ease;
}
.e2u-shot:hover img{filter:saturate(1.05) brightness(1.02); transform:translateY(-4px);}
.e2u-shot figcaption{
  display:flex; flex-direction:column; gap:5px; margin-top:14px;
  font-size:14px; color:var(--ink-muted);
}
.e2u-tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy-950); background:var(--gold-500);
  padding:4px 10px; border-radius:2px; font-weight:600;
}
.e2u-shot:last-child .e2u-tag{background:var(--amber-glow); box-shadow:0 0 16px rgba(255,176,32,.5);}
@media (max-width:980px){ .e2u-row{grid-template-columns:1fr; gap:26px;} }
@media (max-width:640px){ .empty2up{padding:70px 0;} .e2u-lede{margin-bottom:34px;} }

/* when the copyright is the only footer content, drop the orphan divider */
.footer-copy:first-child{border-top:none; padding-top:0; margin-top:0;}
.site-footer .footer-inner{gap:18px;}

/* menu panel must sit flush under the nav bar (shorter bar on small screens) */
@media (max-width:640px){
  .nav-links{top:103px; height:calc(100vh - 103px);}
}

/* 5-up category grid + film cards */
.cat-grid-5{grid-template-columns:repeat(3,1fr);}
.film-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.film-card{
  background:var(--navy-850); border:1px solid rgba(255,255,255,.08);
  padding:30px 28px; position:relative; transition:border-color .25s ease, transform .25s ease;
}
.film-card:hover{border-color:rgba(246,195,26,.4); transform:translateY(-4px);}
.film-n{position:absolute; top:22px; right:26px; font-family:var(--font-display); font-size:34px; line-height:1; color:rgba(246,195,26,.22);}
.film-card h3{font-size:22px; color:var(--ink-50); text-transform:uppercase; margin-bottom:12px; max-width:80%;}
.film-card p{font-size:14.5px; margin-bottom:16px;}
.film-card ul{display:flex; flex-direction:column;}
.film-card li{
  font-size:14px; color:var(--ink-200); padding:9px 0 9px 20px; position:relative;
  border-top:1px solid rgba(255,255,255,.07);
}
.film-card li::before{content:""; position:absolute; left:0; top:17px; width:8px; height:2px; background:var(--gold-400);}
.film-note{margin-top:40px; max-width:760px; font-size:15px; color:var(--ink-muted);}
@media (max-width:980px){ .cat-grid-5{grid-template-columns:1fr;} .film-grid{grid-template-columns:1fr;} }

/* highway gantry set — three across in one row */
.gal-stack{
  column-count:auto; column-gap:normal; max-width:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.gal-stack .gal-item{margin:0; display:block; width:auto; break-inside:auto;}
.gal-stack .gal-item img{width:100%; height:100%; object-fit:cover;}
.gal-stack .gal-item figcaption{padding:14px 15px 13px;}
.gal-stack .gal-item figcaption strong{font-size:14px;}
.gal-stack .gal-item figcaption span{font-size:10.5px;}
@media (max-width:760px){ .gal-stack{grid-template-columns:1fr;} }

/* three across, each photo shown whole at its own height */
.gal-row-natural{
  column-count:auto; column-gap:normal; max-width:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start;
}
.gal-row-natural .gal-item{
  margin:0; display:block; width:auto; height:auto; break-inside:auto;
}
.gal-row-natural .gal-item img{width:100%; height:auto; display:block; object-fit:fill;}
.gal-row-natural .gal-item figcaption{padding:14px 15px 13px;}
.gal-row-natural .gal-item figcaption strong{font-size:14px;}
.gal-row-natural .gal-item figcaption span{font-size:10.5px;}
@media (max-width:760px){ .gal-row-natural{grid-template-columns:1fr;} }

/* one wide photo, shown whole */
.gal-feature{
  column-count:auto; column-gap:normal; display:block; max-width:760px; margin-bottom:16px;
}
.gal-feature .gal-item{margin:0; display:block; width:auto; height:auto;}
.gal-feature .gal-item img{width:100%; height:auto; display:block;}
.gal-feature .gal-item figcaption{padding:14px 15px 13px;}
.gal-feature .gal-item figcaption strong{font-size:14px;}
.gal-feature .gal-item figcaption span{font-size:10.5px;}

/* two portrait photos side by side, shown whole */
.gal-row2{
  column-count:auto; column-gap:normal; max-width:760px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start;
}
.gal-row2 .gal-item{margin:0; display:block; width:auto; height:auto; break-inside:auto;}
.gal-row2 .gal-item img{width:100%; height:auto; display:block;}
.gal-row2 .gal-item figcaption{padding:14px 15px 13px;}
.gal-row2 .gal-item figcaption strong{font-size:14px;}
.gal-row2 .gal-item figcaption span{font-size:10.5px;}
@media (max-width:760px){ .gal-row2{grid-template-columns:1fr;} }

/* smart film on/off comparison pair */
.gal-onoff{max-width:900px;}
.gal-onoff .gal-item{border:1px solid rgba(246,195,26,.28);}
.gal-onoff .gal-item figcaption strong{color:var(--gold-400);}

/* panoramic photos — one per row, caption below the image (never over it) */
.gal-wide-stack{
  column-count:auto; column-gap:normal; display:block; max-width:900px;
}
.gal-wide-stack .gal-item{
  margin:0 0 22px; display:block; width:auto; height:auto;
  background:transparent; border:0; overflow:visible;
}
.gal-wide-stack .gal-item img{
  width:100%; height:auto; display:block; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
}
.gal-wide-stack .gal-item figcaption{
  position:static; background:none; padding:10px 2px 0;
  display:flex; flex-direction:column; gap:2px;
}
.gal-wide-stack .gal-item figcaption strong{font-size:14px; color:var(--ink-50);}
.gal-wide-stack .gal-item figcaption span{font-size:11.5px; color:var(--gold-300);}

/* three across, all tiles identical size */
.gal-row3-even{
  column-count:auto; column-gap:normal; max-width:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.gal-row3-even .gal-item{
  margin:0; display:block; width:auto; break-inside:auto;
  aspect-ratio:3/4; height:auto;
}
.gal-row3-even .gal-item img{width:100%; height:100%; object-fit:cover; object-position:center;}
.gal-row3-even .gal-item figcaption{padding:14px 15px 13px;}
.gal-row3-even .gal-item figcaption strong{font-size:14px;}
.gal-row3-even .gal-item figcaption span{font-size:10.5px;}
@media (max-width:760px){ .gal-row3-even{grid-template-columns:1fr;} }

/* colour chart / sample request block */
.sample-cta{
  margin-top:70px; padding:36px 34px;
  background:var(--navy-850); border:1px solid rgba(246,195,26,.35); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.sample-cta::before{
  content:""; position:absolute; top:-60%; right:-6%; width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,176,32,.16) 0%, rgba(255,176,32,0) 65%);
  pointer-events:none;
}
.sample-cta-text{flex:1; min-width:280px; position:relative; z-index:1;}
.sample-cta-text h3{
  font-family:var(--font-display); font-size:clamp(22px,2.6vw,30px);
  color:var(--ink-50); text-transform:uppercase; margin-bottom:10px;
}
.sample-cta-text p{font-size:15px; max-width:560px; margin:0;}
.sample-cta-actions{display:flex; flex-direction:column; gap:12px; position:relative; z-index:1;}
.sample-cta-actions .btn{white-space:nowrap;}
@media (max-width:760px){
  .sample-cta{padding:28px 22px; margin-top:48px;}
  .sample-cta-actions{width:100%;}
  .sample-cta-actions .btn{width:100%;}
}

/* uniform grid: ignore the wide flag so every tile matches */
.gal-grid--uniform .gal-item.wide{grid-column:auto;}

/* tiles that must show the whole photo, without breaking the grid */
.gal-item.is-contain{background:var(--navy-950);}
.gal-item.is-contain img{object-fit:contain !important; object-position:center;}

/* portrait feature photo — keep it from dominating the page */
.gal-feature-tall{max-width:420px;}

/* facade card: bias the crop down so the rope-access crew stays in frame */
.cat-card[href="facade-cleaning.html"] img{object-position:center 72%;}

/* fit-out facade block: photo floated beside the copy */
.facade-intro{max-width:none; overflow:hidden;}
.facade-float{float:left; width:270px; margin:0 30px 18px 0;}
.facade-intro p{max-width:none;}
@media (max-width:900px){
  .facade-float{float:none; width:100%; max-width:420px; margin:0 0 24px;}
}

/* ============================================================
   FOOTER — multi-column
   ============================================================ */
.site-footer{background:var(--navy-800); padding:56px 0 30px; border-top:1px solid rgba(255,255,255,.14);}
.footer-grid{
  display:grid; grid-template-columns:2.1fr 1.2fr 1fr 1.1fr; gap:44px;
  padding-bottom:36px;
}
.footer-col h4{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-glow); margin:0 0 16px; font-weight:600;
}
.footer-col ul{display:flex; flex-direction:column; gap:9px;}
.footer-col li a{font-size:14px; color:var(--ink-200); transition:color .2s ease;}
.footer-col li a:hover{color:var(--gold-400);}

.footer-logo{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.footer-logo img{height:64px; width:auto; flex-shrink:0;}
.footer-logo span{
  font-family:var(--font-display); font-size:14px; line-height:1.25;
  letter-spacing:.03em; color:var(--gold-400);
}
.footer-blurb{font-size:13.5px; color:var(--ink-muted); max-width:360px; margin:0 0 14px; line-height:1.6;}
.footer-regno{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted-2); margin:0;}

.footer-wa{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  background:#25d366; color:#04301a; font-family:var(--font-mono); font-weight:700;
  font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  padding:11px 16px; border-radius:3px; transition:background .2s ease, transform .2s ease;
}
.footer-wa svg{width:17px; height:17px;}
.footer-wa:hover{background:#1fbe5b; transform:translateY(-1px);}
.footer-loc{font-size:13px; color:var(--ink-muted); margin:0; line-height:1.6;}

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
}
.footer-copy{font-size:12px; color:var(--ink-muted-2); margin:0;}
.footer-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-muted-2); margin:0;
}

@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px 30px;}
  .footer-brand-col{grid-column:1 / -1;}
}
@media (max-width:560px){
  .site-footer{padding:44px 0 26px;}
  .footer-grid{grid-template-columns:1fr; gap:30px;}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:10px;}
  .footer-blurb{max-width:none;}
}

/* clear the legacy full-width rule so the bottom bar sits on one line */
.footer-bottom .footer-copy{width:auto; padding-top:0; margin-top:0; border-top:none;}

/* footer contact details */
.footer-contact-list{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.footer-contact-list a{font-size:14px; color:var(--ink-50); transition:color .2s ease;}
.footer-contact-list a:hover{color:var(--gold-400);}
.footer-loc{font-style:normal; font-size:12.5px; color:var(--ink-muted); margin:14px 0 0; line-height:1.65;}
.footer-loc span{color:var(--ink-muted-2);}

/* ============================================================
   MOBILE: tap targets & legible captions
   ============================================================ */
@media (max-width:1080px){
  /* footer + list links need a finger-sized hit area */
  .footer-col li a,
  .footer-contact-list a{
    display:inline-block; padding:9px 0; font-size:15px; line-height:1.3;
  }
  .footer-col ul{gap:2px;}
  .footer-contact-list{gap:2px;}
  .footer-blurb{font-size:14.5px;}
  .footer-regno{font-size:12.5px;}
  .footer-loc{font-size:13.5px;}
  .footer-copy{font-size:12.5px;}
  .footer-tag{font-size:11.5px;}
  .footer-col h4{font-size:12.5px;}

  /* gallery captions were 10.5px — too small to read on a phone */
  .gal-item figcaption strong{font-size:15px;}
  .gal-item figcaption span{font-size:12.5px; line-height:1.45;}
  .gal-stack .gal-item figcaption strong,
  .gal-row3-even .gal-item figcaption strong,
  .gal-row-natural .gal-item figcaption strong,
  .gal-row2 .gal-item figcaption strong,
  .gal-feature .gal-item figcaption strong,
  .gal-wide-stack .gal-item figcaption strong{font-size:15px;}
  .gal-stack .gal-item figcaption span,
  .gal-row3-even .gal-item figcaption span,
  .gal-row-natural .gal-item figcaption span,
  .gal-row2 .gal-item figcaption span,
  .gal-feature .gal-item figcaption span,
  .gal-wide-stack .gal-item figcaption span{font-size:12.5px;}

  /* other small type */
  .eyebrow{font-size:12.5px;}
  .cat-note{font-size:14.5px;}
  .film-note, .film-card li{font-size:14.5px;}
  .os-step p, .step p, .spec-block p, .why-item p, .cat-card-body p{font-size:14.5px;}
  .detail-label{font-size:12.5px;}
  .filter-btn{font-size:13px; padding:12px 18px;}
  .cat-link{font-size:13px; display:inline-block; padding:6px 0;}
  .btn{padding:15px 26px; font-size:14px;}
  .sun-chip{font-size:13px; padding:9px 13px;}
  .e2u-shot figcaption{font-size:14.5px;}
  .e2u-tag{font-size:12px;}
}

/* chat widget + hamburger: mobile tap targets */
@media (max-width:760px){
  .nav-toggle{padding:12px 8px;}
  .sun-head-x{padding:10px;}
  .sun-foot{font-size:11.5px; padding-bottom:14px;}
  .sun-foot a{display:inline-block; padding:6px 4px;}
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:64px; align-items:start;}
.cat-h2-sub{margin-top:46px;}

.contact-method{
  display:flex; align-items:center; gap:16px; margin-bottom:12px;
  background:var(--navy-850); border:1px solid rgba(255,255,255,.1);
  padding:18px 20px; border-radius:var(--radius);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.contact-method:hover{border-color:rgba(246,195,26,.45); transform:translateY(-2px);}
.cm-icon{
  width:46px; height:46px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(246,195,26,.12); color:var(--gold-400);
}
.cm-icon svg{width:23px; height:23px;}
.cm-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cm-text strong{font-size:16px; color:var(--ink-50);}
.cm-text span{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-muted);}

.contact-method-wa{background:rgba(37,211,102,.1); border-color:rgba(37,211,102,.45);}
.contact-method-wa:hover{background:rgba(37,211,102,.16); border-color:#25d366;}
.contact-method-wa .cm-icon{background:#25d366; color:#04301a;}

.contact-note{
  margin-top:24px; padding:20px 22px; border-left:3px solid var(--gold-500);
  background:rgba(246,195,26,.06);
}
.contact-note p{font-size:14.5px; margin:0; color:var(--ink-200);}
.contact-note strong{color:var(--gold-300); font-weight:600;}

.contact-info address{font-style:normal; font-size:15px; color:var(--ink-200); line-height:1.65;}
.contact-svc{display:flex; flex-direction:column;}
.contact-svc li{border-top:1px solid rgba(255,255,255,.1);}
.contact-svc li:last-child{border-bottom:1px solid rgba(255,255,255,.1);}
.contact-svc a{
  display:block; padding:13px 0; font-size:15px; color:var(--ink-200);
  transition:color .2s ease, padding-left .2s ease;
}
.contact-svc a:hover{color:var(--gold-400); padding-left:6px;}

@media (max-width:900px){
  .contact-page-grid{grid-template-columns:1fr; gap:46px;}
}
@media (max-width:760px){
  .cm-text strong{font-size:16px;}
  .cm-text span{font-size:13px;}
  .contact-method{padding:16px 16px;}
}

/* ============================================================
   NAV — Services dropdown
   ============================================================ */
.nav-drop{position:relative;}
.nav-drop-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:4px 0;
  font-family:var(--font-body); font-size:12.5px; color:var(--ink-200);
  white-space:nowrap; position:relative; transition:color .2s ease;
}
.nav-drop-btn svg{width:10px; height:7px; transition:transform .25s ease;}
.nav-drop-btn:hover{color:var(--gold-400);}
.nav-drop-btn::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--gold-400); transition:width .25s ease;
}
.nav-drop-btn:hover::after, .nav-drop-btn.is-active::after{width:100%;}
.nav-drop-btn.is-active{color:var(--gold-400);}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg);}

.nav-drop-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-8px);
  width:340px; background:var(--navy-950); border:1px solid rgba(255,255,255,.14);
  border-radius:4px; box-shadow:0 22px 48px rgba(0,0,0,.5); padding:8px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:120;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop.open .nav-drop-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.nav-drop-menu::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px;}
.nav-drop-menu a{
  display:flex; flex-direction:column; gap:2px; padding:11px 14px; border-radius:3px;
  transition:background .18s ease;
}
.nav-drop-menu a:hover{background:rgba(246,195,26,.1);}
.nav-drop-menu a strong{font-size:14.5px; color:var(--ink-50); font-weight:600;}
.nav-drop-menu a:hover strong, .nav-drop-menu a.is-active strong{color:var(--gold-400);}
.nav-drop-menu a span{font-size:12px; color:var(--ink-muted); line-height:1.4;}
.nav-drop-menu a.is-active{background:rgba(246,195,26,.08);}

/* mobile: menu becomes an inline list, no hover */
@media (max-width:1080px){
  .nav-drop{width:100%;}
  .nav-drop-btn{
    width:100%; justify-content:space-between; font-size:16px;
    padding:16px 0; border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav-drop-btn::after{display:none;}
  .nav-drop-menu{
    position:static; left:auto; transform:none !important; width:auto; opacity:1; visibility:visible;
    background:transparent; border:0; box-shadow:none; padding:0 0 6px 12px;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-drop:hover .nav-drop-menu{max-height:0;}
  .nav-drop.open .nav-drop-menu{max-height:640px;}
  .nav-drop-menu a{padding:13px 0; border-bottom:1px solid rgba(255,255,255,.05);}
  .nav-drop-menu a strong{font-size:15px;}
  .nav-drop-menu a span{font-size:12.5px;}
}

/* ============================================================
   SERVICES OVERVIEW PAGE
   ============================================================ */
.svc-page .cat-intro{margin-bottom:56px;}
.svc-row{
  display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center;
  padding:46px 0; border-top:1px solid rgba(255,255,255,.1);
}
.svc-row:last-of-type{border-bottom:1px solid rgba(255,255,255,.1);}
.svc-flip .svc-media{order:2;}
.svc-flip .svc-body{order:1;}
.svc-media{display:block; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.08);}
.svc-media img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  filter:saturate(.95) brightness(.94); transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}
.svc-media:hover img{transform:scale(1.05); filter:saturate(1.05) brightness(1.02);}
.svc-body{position:relative;}
.svc-n{
  font-family:var(--font-display); font-size:13px; letter-spacing:.14em;
  color:var(--amber-glow); display:block; margin-bottom:8px;
}
.svc-body h2{
  font-size:clamp(24px,2.8vw,32px); color:var(--ink-50);
  text-transform:uppercase; margin-bottom:12px;
}
.svc-body > p{font-size:15.5px; margin-bottom:20px; max-width:560px;}
.svc-jobs{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 26px; margin-bottom:20px;
}
.svc-jobs li{
  font-size:14.5px; color:var(--ink-200); padding:9px 0 9px 18px;
  position:relative; border-top:1px solid rgba(255,255,255,.07);
}
.svc-jobs li::before{
  content:""; position:absolute; left:0; top:17px; width:8px; height:2px; background:var(--gold-400);
}
@media (max-width:900px){
  .svc-row{grid-template-columns:1fr; gap:26px; padding:36px 0;}
  .svc-flip .svc-media{order:0;}
  .svc-flip .svc-body{order:0;}
}
@media (max-width:560px){
  .svc-jobs{grid-template-columns:1fr; gap:0;}
}

/* Services: label navigates, arrow opens the sub-menu */
.nav-drop-toggle{
  background:none; border:0; cursor:pointer; color:var(--ink-200);
  display:flex; align-items:center; justify-content:center; padding:4px;
  transition:color .2s ease;
}
.nav-drop-toggle svg{width:10px; height:7px; transition:transform .25s ease;}
.nav-drop-toggle:hover{color:var(--gold-400);}
.nav-drop.open .nav-drop-toggle svg{transform:rotate(180deg);}
.nav-drop{display:flex; align-items:center; gap:5px;}
.nav-drop-menu{flex:none; box-sizing:border-box; width:340px; left:auto; right:0; transform:translateY(-8px);}
.nav-drop{position:relative; flex:0 0 auto;}
.nav-drop-btn{flex:0 0 auto;}
.nav-drop:hover .nav-drop-menu,
.nav-drop.open .nav-drop-menu{transform:translateY(0);}
@media (max-width:1080px){
  .nav-drop{flex-wrap:wrap; justify-content:space-between;}
  .nav-drop-btn{flex:1;}
  .nav-drop-toggle{padding:16px 6px;}
  .nav-drop-menu{flex-basis:100%;}
}

/* Wallpaper & Film card: keep the "Grab Driver Centre" lettering in frame */
.cat-card[href="wallpaper-film.html"] img{object-position:center 22%;}

/* home "recent installations" — four across, each photo shown whole and centred */
.gal-picks{
  column-count:auto; column-gap:normal; max-width:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch;
}
.gal-picks .gal-item{
  margin:0; display:flex; flex-direction:column; width:auto; height:auto;
  break-inside:auto; background:var(--navy-950);
}
.gal-picks .gal-item img{
  width:100%; height:200px; object-fit:contain; object-position:center;
  display:block; background:var(--navy-950); padding:8px; box-sizing:border-box;
}
.gal-picks .gal-item figcaption{
  position:static; background:var(--navy-850); padding:13px 14px 14px;
  display:flex; flex-direction:column; gap:3px; flex:1;
}
.gal-picks .gal-item figcaption strong{font-size:14px;}
.gal-picks .gal-item figcaption span{font-size:11.5px; line-height:1.4;}
@media (max-width:900px){ .gal-picks{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .gal-picks{grid-template-columns:1fr;} .gal-picks .gal-item img{height:220px;} }

/* mobile: remaining tap targets to a comfortable finger size */
@media (max-width:1080px){
  .cat-link{display:inline-block; padding:11px 0; min-height:44px; line-height:1.6;}
  .svc-body .cat-link{padding:12px 0;}
  .sun-foot a{display:inline-block; padding:9px 6px;}
  .footer-col li a,
  .footer-contact-list a{display:inline-block; padding:10px 0; min-height:44px; line-height:1.5;}
  .footer-col ul{gap:2px;}
  .footer-contact-list{gap:2px;}
}
@media (max-width:1080px){
  .services .eyebrow a,
  .eyebrow a,
  .footer-col h4 a{display:inline-block; padding:11px 0; min-height:44px; line-height:1.9;}
}

/* touch devices: hamburger + chat controls */
@media (max-width:1080px){
  .nav-toggle{padding:14px 8px;}
  .sun-head-x{padding:12px;}
  .sun-foot{font-size:11.5px;}
  .sun-foot a{font-size:11.5px; padding:10px 6px;}
}