
/* Compatibility layer: keeps the existing dynamic hero slider, forms and menus working with the v16 design */
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
.hero-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,16,.97) 0%,rgba(4,10,16,.83) 42%,rgba(4,10,16,.25) 100%)}
.hero{background:#071018!important}
.lead-form .success{display:block}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:32px auto 0;background:#fff;padding:32px;border:1px solid #e1e5e8;color:var(--ink)}
.contact-form input,.contact-form textarea{border:1px solid #d5dbe0;padding:14px;font:inherit;background:#fbfcfd;outline:none;width:100%;color:var(--ink)}
.contact-form textarea{min-height:120px;resize:vertical;grid-column:1/-1}
.contact-form .full{grid-column:1/-1}
.contact-success{grid-column:1/-1;background:#eaf6ee;color:#17683a;padding:13px;font-size:13px;text-align:center}
@media(max-width:600px){.contact-form{grid-template-columns:1fr}}

/* Navigation fit: 8 menu links + language buttons + CTA */
.navin{flex-wrap:nowrap;gap:14px}
.brand{white-space:nowrap}
.links{font-size:15px!important;gap:20px!important}
@media(max-width:1320px){.links{font-size:14px!important;gap:15px!important}.brand{font-size:17px!important}}
@media(min-width:901px) and (max-width:1180px){
  .links{display:none!important}
  .lang-controls{margin-left:auto}
  .mobile-menu-btn{display:flex;width:44px;height:40px;flex:0 0 44px;border:1px solid rgba(255,255,255,.35);background:transparent;border-radius:4px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
  .mobile-menu-btn span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;transition:.2s}
  .mobile-menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mobile-menu-btn.open span:nth-child(2){opacity:0}
  .mobile-menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{position:absolute;left:10px;right:10px;top:84px;padding:8px;background:rgba(8,16,24,.98);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 18px 45px rgba(0,0,0,.28)}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:flex;align-items:center;min-height:46px;padding:12px 14px;color:#fff;border-radius:7px;font-size:13px;font-weight:700}
  .mobile-menu a+a{border-top:1px solid rgba(255,255,255,.08)}
  .mobile-menu .mobile-start{margin-top:7px;justify-content:center;background:#c9a45d;color:#101820;border-top:0!important}
}

/* ===== Larger desktop header, single line =====
   Logo, menu, language buttons and CTA scale together with --ns and always stay on ONE line.
   --ns is stepped by screen width so everything fits. Below 1321px the original sizes are kept
   (1180px and below: mobile menu). */
@media(min-width:1321px){
  :root{--ns:1}
  .nav .navin{max-width:none!important;width:100%;height:auto!important;min-height:calc(88px*var(--ns)*.8)!important;padding:0 20px!important;gap:calc(10px*var(--ns))!important;flex-wrap:nowrap!important}
  .nav .brand{font-size:calc(20px*var(--ns))!important;white-space:nowrap}
  .nav .brand small{font-size:calc(9px*var(--ns))!important;letter-spacing:.1em!important}
  .nav .links{display:flex!important;flex-wrap:nowrap!important;margin-left:auto!important;gap:calc(16px*var(--ns))!important;font-size:calc(15px*var(--ns))!important}
  .nav .links a{white-space:nowrap}
  .nav .lang-btn{font-size:calc(11px*var(--ns))!important;padding:calc(8px*var(--ns)) calc(11px*var(--ns))!important}
  .nav .btn{font-size:calc(11px*var(--ns))!important;padding:calc(15px*var(--ns)) calc(22px*var(--ns))!important;white-space:nowrap}
}
@media(min-width:1450px){:root{--ns:1.1}}
@media(min-width:1600px){:root{--ns:1.2}}
@media(min-width:1750px){:root{--ns:1.35}}
@media(min-width:1880px){:root{--ns:1.5}}

/* ===== Hero text sizes (desktop / tablet, 901px and wider) =====
   Headline 0.6x, tagline line + paragraph 1.5x, signature strip 2x */
@media(min-width:901px){
  .hero h1{font-size:clamp(27.6px,3.66vw,55.2px)!important}
  .hero .eyebrow{font-size:16.5px!important;gap:18px!important}
  .hero .eyebrow:before{width:72px!important}
  .hero p{font-size:25.5px!important;max-width:975px!important}
  .premium-signature{flex-wrap:wrap;gap:28px!important;font-size:18px!important}
  .premium-signature span:first-child{font-size:22px!important}
  .premium-signature span:nth-child(3){padding-left:28px!important}
}

/* ===== Readability: larger text in the discipline strip, "technical coordination" panels and sector chips ===== */
.hg-trust>div{padding:30px 24px!important}
.hg-trust b{font-size:17px!important;letter-spacing:.1em!important;margin-bottom:10px!important}
.hg-trust span{font-size:18px!important;line-height:1.55!important;color:#b4bec8!important}

.about-panel h3{font-size:30px!important}
.about-panel p{font-size:19px!important;line-height:1.75!important}
.about-panel:not(.darkpanel) p.muted{color:#44515c!important}
.about-list{gap:12px!important}
.about-list div{font-size:17px!important;padding:16px 18px!important;color:#14202b}
.about-panel.darkpanel p{font-size:20px!important;line-height:1.7!important}

.sector-badges{gap:12px!important}
.sector-badges span{font-size:16px!important;padding:11px 20px!important;color:#243039!important}

@media(max-width:620px){
  .hg-trust>div{padding:20px 16px!important}
  .hg-trust b{font-size:14px!important}
  .hg-trust span{font-size:15px!important}
  .about-panel h3{font-size:24px!important}
  .about-panel p,.about-panel.darkpanel p{font-size:16px!important}
  .about-list div{font-size:15px!important;padding:13px 14px!important}
  .sector-badges{gap:8px!important}
  .sector-badges span{font-size:14px!important;padding:9px 14px!important}
}

/* ===== Site-wide readability pass: small text made larger everywhere ===== */
/* Section intros, cards, expertise, industrial points */
.head p{font-size:17px!important;line-height:1.75!important}
.card p{font-size:16px!important;line-height:1.75!important}
#expertise .expert>div{font-size:17px!important}
.industrial-points div{font-size:16px!important}
.industrial-note{font-size:15px!important}
.eyebrow{font-size:14px!important}
.num,#services .num{font-size:14px!important}

/* Gallery / showcase / portfolio cards */
.showcase-copy p{font-size:16px!important;line-height:1.7!important}
.showcase-kicker{font-size:13px!important}
.showcase-number{font-size:14px!important}
.showcase-open{font-size:13px!important}
.pc-meta span,.uploaded-gallery .user-gallery-card .pc-meta span,#visuals .new-uploaded-feature .pc-meta span{font-size:13px!important}
.pc-meta p,.uploaded-gallery .user-gallery-card .pc-meta p,#visuals>.wrap>.portfolio-grid .user-gallery-card .pc-meta p{font-size:15px!important;line-height:1.65!important}
.visual-card .vlabel small{font-size:13px!important}
.gallery-story-heading p,.gallery-note{font-size:15px!important}
.archive-note b{font-size:13px!important}
.archive-note span{font-size:15px!important}
.pf{font-size:13px!important}
.count-badge{font-size:13px!important}
.portfolio-stats strong{font-size:15px!important}
.portfolio-stats span{font-size:15px!important}
.hg-lb-hint{font-size:14px!important}
.hg-lb-caption{font-size:16px!important}

/* Buttons and forms */
.btn{font-size:14px!important}
.submit-btn{font-size:15px!important}
.field label{font-size:14px!important}
.file-list,.lead-status,.privacy{font-size:14px!important}
.success{font-size:15px!important}
.contact-direct a{font-size:16px!important}
.whatsapp-float{font-size:15px!important}
.mobile-menu a{font-size:15px!important}

/* Chat widget */
.hgc-msg small{font-size:12px!important}
.hgc-note{font-size:13px!important}
.hgc-head small{font-size:13px!important}
.hgc-info input{font-size:15px!important}
.hgc-form input{font-size:16px!important}
.hgc-msg{font-size:15px!important}

/* About Us / Company Credentials pages */
.legal small{font-size:13px!important}
.cred .auth{font-size:14px!important}
.cred summary{font-size:14px!important}
.cred .more,.cred dl div{font-size:16px!important}
.note{font-size:15px!important}

/* Mobile: slightly smaller, still clearly readable */
@media(max-width:620px){
  .hero .eyebrow{font-size:13px!important}
  .premium-signature{font-size:13px!important}
  .premium-signature span:first-child{font-size:15px!important}
  .head p{font-size:16px!important}
  .card p,.showcase-copy p{font-size:15px!important}
  #expertise .expert>div{font-size:16px!important}
  .industrial-points div{font-size:15px!important}
  .btn{font-size:13px!important}
  .sector-badges span{font-size:14px!important}
}

/* ===== Contrast fixes: dark sections overridden by the global cream background ===== */
/* "Have a project in mind?" contact section: white text needs its dark background back */
section.cta{background:linear-gradient(120deg,#14222e,#273846)!important;color:#fff!important}
section.cta h2,section.cta .head h2{color:#fff!important}
section.cta .head p{color:#d8e0e7!important}
section.cta .head .eyebrow{color:#d7b56d!important}
/* Dark intro panel inside the light Industrial section */
.industrial-intro .muted{color:#b9c4cd!important}
.industrial-intro h2,.industrial-intro .eyebrow+h2{color:#fff!important}
.industrial-intro .industrial-points div{color:#fff!important;border-color:rgba(255,255,255,.28)!important}
.industrial-intro .industrial-note{color:#aebac4!important}

/* Office address in footer */
.footer .footer-address{margin-top:14px;font-size:16px;line-height:1.6;color:#d8e0e7}
.footer .footer-address a{color:#d8e0e7;text-decoration:none}
.footer .footer-address a:hover{color:var(--hg-gold2,#f0d89a)}
.footer .footer-maplink{display:inline-block;margin-top:6px;font-size:15px;font-weight:700;color:var(--hg-gold,#d7b56d)}
.footer .footer-maplink:hover{color:var(--hg-gold2,#f0d89a)}
.footer .footer-map{display:block;width:100%;max-width:520px;height:220px;margin-top:14px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0b1118}

/* ===== Interior Stories section ===== */
.story-sec .head{max-width:820px}
.story-block{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(48px,6vw,84px)}
.story-block:nth-of-type(even) .story-photo{order:2}
.story-photo{position:relative;margin:0;overflow:hidden;border-radius:16px;box-shadow:0 24px 60px rgba(20,30,40,.18);background:#e8e1d3}
.story-photo img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .6s ease}
.story-photo:hover img{transform:scale(1.03)}
.story-photo.wide{aspect-ratio:4/3.3}
.story-photo.tall{aspect-ratio:4/5;max-height:680px;margin-inline:auto;width:100%}
.story-no{position:absolute;left:16px;top:14px;font-size:14px;font-weight:800;letter-spacing:.12em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.story-kicker{font-size:14px;font-weight:800;letter-spacing:.16em;color:#8a6a24;margin-bottom:12px}
.story-text h3{font-size:clamp(26px,2.6vw,38px)!important;line-height:1.2;margin:0 0 18px;color:#14202b}
.story-text p{font-size:18px!important;line-height:1.85!important;color:#44515c;margin:0 0 22px}
.story-notes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.story-notes li{font-size:15px;padding:8px 16px;border:1px solid #c9a45d;border-radius:999px;color:#2b3944;background:rgba(201,164,93,.1)}
.story-cta{margin-top:clamp(56px,7vw,92px);padding:clamp(28px,4vw,44px);text-align:center;border-radius:16px;background:linear-gradient(120deg,#14222e,#273846);display:flex;flex-direction:column;align-items:center;gap:18px}
.story-cta p{margin:0;font-size:clamp(20px,2.2vw,28px);color:#fff;font-weight:700}
@media(max-width:900px){
  .story-block{grid-template-columns:1fr}
  .story-block:nth-of-type(even) .story-photo{order:0}
  .story-photo.tall{max-height:560px}
  .story-text p{font-size:16px!important}
  .story-notes li{font-size:14px}
}
.story-loc{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px;font-weight:600;color:#44515c}
.story-loc svg{flex:0 0 auto;color:#8a6a24}

/* Footer social links */
.footer .footer-social{display:flex;gap:12px;margin-top:14px}
.footer .footer-social a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font-size:15px;font-weight:700;text-decoration:none;transition:.2s}
.footer .footer-social a:hover{background:var(--hg-gold,#d7b56d);border-color:var(--hg-gold,#d7b56d);color:#101820}

/* ===== Gallery groups: TV walls (inside Interior Work) and Building Designs ===== */
.gal-block{margin-top:clamp(56px,7vw,92px)}
.gal-block .story-kicker{margin-bottom:12px}
.gal-block h3{font-size:clamp(26px,2.6vw,38px)!important;line-height:1.2;margin:0 0 18px;color:#14202b}
.gal-block>p{font-size:18px!important;line-height:1.85!important;color:#44515c;max-width:860px;margin:0 0 32px}
.gal-cols{column-count:2;column-gap:24px}
.gal-card{break-inside:avoid;margin:0 0 24px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 18px 48px rgba(20,30,40,.14)}
.gal-photo{overflow:hidden;background:#e8e1d3}
.gal-photo img{display:block;width:100%;height:auto;cursor:zoom-in;transition:transform .6s ease}
.gal-card:hover .gal-photo img{transform:scale(1.03)}
.gal-card figcaption{padding:20px 22px 24px}
.gal-tag{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:#8a6a24;margin-bottom:8px}
.gal-card h4{margin:0 0 8px;font-size:21px;line-height:1.3;color:#14202b}
.gal-card p{margin:0;font-size:16px;line-height:1.75;color:#44515c}
/* dark Building Designs section */
.build-sec .head{max-width:820px}
.build-sec .head h2{color:#fff!important}
.build-sec .head p{color:#c9d3db!important}
.build-sec .gal-card{background:#121c27;box-shadow:0 18px 48px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
.build-sec .gal-card h4{color:#fff}
.build-sec .gal-card p{color:#c2ccd5}
.build-sec .gal-tag{color:#d7b56d}
.build-sec .gal-cols{margin-top:34px}
@media(max-width:820px){
  .gal-cols{column-count:1}
  .gal-block>p{font-size:16px!important}
  .gal-card h4{font-size:19px}
}

/* ===== Story blocks: extra photo shapes and dark Building Designs variant ===== */
.story-photo.pano{aspect-ratio:16/9}
.story-photo.sq{aspect-ratio:1/1;max-height:640px;margin-inline:auto;width:100%}
.build-sec .story-block:first-of-type{margin-top:clamp(36px,5vw,60px)}
.build-sec .story-photo{background:#0f1822;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.build-sec .story-kicker{color:#d7b56d}
.build-sec .story-text h3{color:#fff!important}
.build-sec .story-text p{color:#c9d3db}
.build-sec .story-notes li{color:#e6ebef;border-color:#c9a45d;background:rgba(201,164,93,.14)}


/* Footer service links */
.footer p a{color:inherit;text-decoration:none}
.footer p a:hover{color:var(--hg-gold2,#f0d89a);text-decoration:underline}
/* picture elements inside story photos */
.story-photo picture{display:block;width:100%;height:100%}
/* Homepage: explore service pages */
.svc-explore{margin-top:clamp(44px,6vw,72px)}
.svc-explore h3{font-size:clamp(24px,2.4vw,32px)!important;margin:0 0 18px;color:#14202b}
.svc-explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-explore-grid a{display:block;padding:22px;border:1px solid #e3e7ea;border-top:3px solid #c9a45d;border-radius:10px;background:#fff;text-decoration:none;box-shadow:0 10px 26px rgba(20,30,40,.05);transition:transform .2s}
.svc-explore-grid a:hover{transform:translateY(-3px)}
.svc-explore-grid strong{display:block;font-size:19px;color:#14202b;margin-bottom:6px}
.svc-explore-grid span.d{display:block;font-size:15.5px;line-height:1.65;color:#44515c}
.svc-explore-grid em{display:inline-block;margin-top:10px;font-style:normal;font-weight:700;font-size:15px;color:#8a6a24}
@media(max-width:900px){.svc-explore-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-explore-grid{grid-template-columns:1fr}}


/* Footer: areas and guides row */
.footer-extra{max-width:1320px;margin:28px auto 0;padding:20px 22px 0;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:12px 40px;font-size:15.5px;line-height:1.6;color:#c9d3db}
.footer-extra strong{color:#fff;margin-right:8px}
.footer-extra a{color:#c9d3db;text-decoration:none;margin-right:14px}
.footer-extra a:hover{color:var(--hg-gold2,#f0d89a);text-decoration:underline}

.build-sec .story-loc{color:#c9d3db}
.build-sec .story-loc svg{color:#d7b56d}


/* ===== Ask a question box ===== */
.ask-box{max-width:860px;margin:0 auto;padding:clamp(24px,4vw,40px);border:1px solid #e3e7ea;border-top:3px solid #c9a45d;border-radius:14px;background:#fff;box-shadow:0 14px 40px rgba(20,30,40,.08)}
.ask-box h2{margin:6px 0 10px;font-size:clamp(24px,2.6vw,34px);color:#14202b}
.ask-box .muted{color:#44515c!important;font-size:16.5px;line-height:1.7;margin:0 0 18px}
.ask-row{display:flex;gap:10px;flex-wrap:wrap}
.ask-row input{flex:1 1 320px;padding:15px 18px;font-size:17px;border:1px solid #c9a45d;border-radius:10px;background:#fbfcfd;color:#14202b;outline:none}
.ask-row input:focus{box-shadow:0 0 0 3px rgba(201,164,93,.3)}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ask-chips button{padding:9px 16px;font:inherit;font-size:15px;border:1px solid #d9c9a3;border-radius:999px;background:rgba(201,164,93,.1);color:#2b3944;cursor:pointer}
.ask-chips button:hover{background:#c9a45d;color:#101820}
.ask-out{margin-top:20px}
.ask-q{margin:0 0 10px auto;max-width:90%;width:fit-content;padding:12px 18px;border-radius:14px 14px 4px 14px;background:#14222e;color:#fff;font-size:16px;line-height:1.5}
.ask-a{padding:16px 20px;border-radius:14px 14px 14px 4px;background:#f4f0e8;color:#14202b;font-size:17px;line-height:1.75}
.ask-a a{color:#8a6a24;font-weight:700}
.ask-a p{margin:0 0 12px}
.ask-actions{display:flex;flex-wrap:wrap;gap:10px}
.ask-actions .btn{color:#14202b}
.ask-more{margin:10px 4px 0;font-size:15px;color:#44515c}
.ask-more a{color:#8a6a24;font-weight:700}
