/* ==========================================================================
   Aeonic Engineering — Responsive Rules
   Breakpoints: 1200 (laptop) / 1024 (nav collapse) / 860 (tablet) / 640 (mobile) / 400 (small mobile)
   ========================================================================== */

/* ---------- Laptop (<=1200px) ---------- */
@media (max-width:1200px){
  .container{padding:0 24px;}
  .about-grid{gap:56px;}
  .why-grid{gap:44px;}
  .footer-grid{grid-template-columns:1.2fr .8fr .9fr 1fr;gap:32px;}
}

/* ---------- Nav collapse (<=1024px) ---------- */
@media (max-width:1024px){
  .main-nav{display:none;}
  .header-cta{display:none;}
  .menu-btn{display:flex;}
  .topbar-left{display:none;}
  .topbar-inner{justify-content:flex-end;}

  /* 5 logos visible at a time: 5 items + 4 x 16px gaps = 100vw */
  .marquee-item{--mq-size:clamp(60px,calc((100vw - 64px) / 5),120px);}

  .about-grid{grid-template-columns:1fr;gap:48px;}
  .about-media img{height:420px;}
  .why-grid{grid-template-columns:1fr;gap:48px;}
  .why-content{max-width:640px;}
  .contact-grid{grid-template-columns:1fr;gap:48px;}

  .services-grid{grid-template-columns:repeat(2,1fr);}
  .projects-track{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(3,1fr);gap:20px;}
  .blogs-grid{grid-template-columns:repeat(2,1fr);}
  .blogs-grid .blog-card:last-child{grid-column:span 2;}

  .footer-grid{grid-template-columns:1fr 1fr;gap:40px 32px;}

  /* About page */
  .profile-grid{grid-template-columns:1fr;gap:48px;}
  .profile-media img{height:440px;}
  .directors-grid{grid-template-columns:1fr;gap:28px;max-width:640px;margin:0 auto;}
  .about-team-grid{--cols:3;}
  .history-block{grid-template-columns:1fr;gap:32px;margin-bottom:64px;}
  .history-block.reverse .history-media,.history-block.reverse .history-text{order:unset;}
  .history-media img{height:360px;}
  .culture-list{grid-template-columns:repeat(3,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}

  /* Contact page */
  .quick-contact-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .contact-main-grid{grid-template-columns:1fr;gap:44px;}
  .map-panel{position:static;}
  .map-card iframe{height:380px;}

  /* Careers page */
  .benefits-grid{grid-template-columns:repeat(2,1fr);}
  .application-panel{padding:36px;}

  /* Blog pages */
  .featured-card{grid-template-columns:1fr;}
  .featured-media{min-height:280px;}
  .article-grid{grid-template-columns:1fr;gap:44px;}
  .article-sidebar{position:static;}

  /* Services page */
  .service-detail-grid{grid-template-columns:1fr;gap:36px;}
  .service-detail.reverse .service-detail-media,
  .service-detail.reverse .service-detail-content{order:unset;}
  .service-detail-media img{height:360px;}
  .services-why-grid{grid-template-columns:repeat(2,1fr);}

  /* Projects pages */
  .project-grid{grid-template-columns:1fr;gap:44px;}
  .project-sidebar{position:static;}
  .project-spec-row{row-gap:18px;}
  .project-spec-item{border-left:none;padding:0;flex:1 1 45%;}

  /* Clients page */
  .clients-grid{grid-template-columns:repeat(3,1fr);}
  .clients-stats-row{row-gap:20px;}

  /* Events pages */
  .event-folders-grid{grid-template-columns:repeat(2,1fr);}
  .clients-stat-item{flex:1 1 45%;border-left:none;}
}

/* ---------- Tablet (<=860px) ---------- */
@media (max-width:860px){
  :root{--topbar-h:36px;--nav-h:119px;--header-h:155px;}
  .container{padding:0 20px;}
  .topbar-inner{gap:14px;}
  .topbar-left,.topbar-right{gap:14px;}
  .topbar{font-size:12px;}
  .brand-logo{height:66px;}
  .header-companyline{font-size:18px;letter-spacing:.04em;}
  .header-companyrow{padding:0 20px;}
  .header-companyrow .header-social{gap:5px;}
  .header-companyrow .header-social a{width:26px;height:26px;font-size:11.5px;}

  .section-heading{margin-bottom:40px;}
  .about{padding:88px 0;}
  .services,.projects,.why-choose,.team,.blogs,.contact{padding:88px 0;}
  .showcase{padding:88px 0 0;}
  .clients{padding:72px 0;}

  .hero-stats{gap:16px 0;}
  .hero-stat{min-width:45%;padding-right:16px;margin-bottom:14px;}

  .about-media-badge{padding:16px 18px;max-width:180px;left:16px;bottom:16px;}
  .about-media img{height:340px;}

  .services-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .projects-track{grid-template-columns:1fr 1fr;gap:20px;}
  .team-grid{grid-template-columns:1fr 1fr;gap:18px;}
  .blogs-grid{grid-template-columns:1fr;gap:22px;}
  .blogs-grid .blog-card:last-child{grid-column:auto;}

  .form-row{grid-template-columns:1fr;gap:0;}
  .contact-form-wrap{padding:32px 26px;}

  .footer-grid{grid-template-columns:1fr;gap:40px;}
  .footer-brand-col{max-width:420px;}

  /* About page */
  .profile,.directors,.about-team,.history,.workflow,.working-env,.values{padding:88px 0;}
  .profile-media img{height:380px;}
  .about-team-grid{--cols:2;--gap:20px;}
  .director-body{padding:26px;}

  .workflow-track{grid-template-columns:repeat(4,1fr);row-gap:44px;}
  .workflow-line{display:none;}

  .values-grid{grid-template-columns:repeat(2,1fr);gap:18px;}

  /* Contact page */
  .quick-contact,.contact-main{padding:64px 0;}
  .contact-faq{padding:0 0 64px;}
  .contact-form-panel{padding:30px 24px;}
  .talk-directly{flex-direction:column;align-items:flex-start;}

  /* Careers page */
  .benefits,.jobs{padding:64px 0;}
  .application{padding:64px 0;}
  .application-panel{padding:30px 24px;}
  .job-card{padding:26px;}
  .job-card-head{flex-direction:column;}

  /* Blog pages */
  .featured-body{padding:30px;}
  .article-section{padding:56px 0 80px;}
  .article-body h2{font-size:21px;}
  .article-quote p{font-size:17px;}

  /* Services page */
  .service-detail{padding:72px 0;}
  .service-deliverables{grid-template-columns:1fr;}
  .services-why{padding:64px 0;}

  /* Projects pages */
  .project-gallery{grid-template-columns:repeat(2,1fr);}
  .project-scope{grid-template-columns:1fr;}

  /* Clients page */
  .clients-listing{padding:72px 0 50px;}
  .clients-cta{padding:80px 0;}
}

/* ---------- Mobile (<=640px) ---------- */
@media (max-width:640px){
  :root{--topbar-h:0px;--nav-h:106px;--header-h:106px;}
  .container{padding:0 18px;}

  /* Header — the top contact bar is dropped on small screens; the info
     still lives in the off-canvas mobile menu (.mobile-menu-contact). */
  .topbar{display:none;}
  .site-header{top:0;}
  .brand-logo{height:58px;}
  .brand-name{font-size:17px;}
  .header-companyline{font-size:13.5px;letter-spacing:.01em;padding:5px 10px 9px;}
  /* Too narrow for name + 5 icons on one line — icons move into the mobile menu */
  .header-companyrow{display:block;padding:0;}
  .header-companyrow .header-social{display:none;}

  /* 3 logos visible at a time: 3 items + 2 x 16px gaps = 100vw */
  .marquee-item{--mq-size:clamp(56px,calc((100vw - 32px) / 3),100px);}
  .brand-sub{font-size:9.5px;}

  /* Hero — top-aligned rather than centered. Mobile content is routinely
     taller than the viewport once four stats and a slider control bar are
     in the mix; centering that inside 100svh forces the tail end (stats,
     controls) to sit exactly where the fixed bottom nav lives. Flowing
     from the top means it lands wherever it naturally ends instead. */
  .hero{justify-content:flex-start;}
  .hero-content{padding-top:calc(var(--header-h) + 20px);padding-bottom:8px;}
  .hero-headline{margin-bottom:18px;}
  .hero-sub{margin-bottom:28px;}
  .hero-ctas{flex-direction:column;align-items:stretch;margin-bottom:36px;}
  .hero-ctas .btn{width:100%;}
  .hero-stats{border-top:none;padding-top:0;}
  .hero-stat{min-width:47%;}
  .scroll-indicator{display:none;}

  /* Hero video: keep the base translate(-50%,-50%) centering — overriding
     transform here pins the iframe's top-left corner to the hero's center,
     leaving the video stuck in the bottom-right quarter on mobile. */

  /* In flow (not pinned to the hero's bottom edge) so it can never land
     under the fixed app-style bottom nav — see .bottom-nav below. */
  .hero-slider-controls{
    position:static;left:auto;bottom:auto;justify-content:center;
    margin:18px auto 28px;gap:12px;
  }
  .hero-arrow{width:34px;height:34px;font-size:12px;}
  .hero-dots{gap:7px;}
  .hero-dot{width:7px;height:7px;}
  .hero-dot.active{width:20px;}

  .trust-bar-inner{flex-direction:column;align-items:flex-start;}
  .trust-bar-stats{gap:24px 28px;}
  .trust-stat strong{font-size:22px;}

  /* Section rhythm */
  .about,.services,.projects,.why-choose,.team,.blogs,.contact{padding:64px 0;}
  .showcase{padding:64px 0 0;}
  .clients{padding:56px 0;}

  .section-title{font-size:clamp(24px,7vw,32px);}
  .section-heading{margin-bottom:32px;gap:18px;}
  .section-heading:not(.center){align-items:flex-start;flex-direction:column;}
  .project-filters{width:100%;}
  .filter-btn{flex:1;}

  /* About */
  .about-media img{height:280px;}
  .about-media-badge{position:static;margin-top:16px;max-width:none;display:flex;align-items:center;gap:12px;}
  .about-badges{gap:8px;}
  .about-badge{font-size:12px;padding:8px 13px;}

  /* Services / Projects / Team / Blogs → single column stacks */
  .services-grid,.projects-track,.team-grid,.blogs-grid{grid-template-columns:1fr;}
  .service-card-media,.project-card-media{height:200px;}
  .team-card-media{height:300px;}

  /* Showcase strip */
  .showcase-item{flex:0 0 78vw;height:340px;}
  .showcase-item:nth-child(even){margin-top:0;}

  /* Why choose */
  .why-item{padding:18px;gap:16px;}

  /* Contact */
  .contact-form-wrap{padding:26px 20px;border-radius:var(--radius-md);}
  .contact-details li{gap:14px;}

  /* Footer */
  .footer-top{padding:56px 0 40px;}
  .newsletter-input input{padding:12px 14px;}

  /* Marquee item sizing */
  .marquee-item{padding:16px 22px;font-size:13.5px;}

  /* ===== About page ===== */
  .about-hero-content{padding:44px 0 40px;}
  .breadcrumb{font-size:12px;}
  .about-tabs-link{padding:8px 14px;font-size:12.5px;}

  .profile,.directors,.about-team,.history,.workflow,.working-env,.values{padding:64px 0;}

  .profile-media img{height:280px;}
  .profile-stats{gap:14px 0;}
  .profile-stat{min-width:47%;padding-right:10px;margin-bottom:10px;}

  .directors-grid{gap:20px;}

  .about-team-grid{--cols:2;--gap:14px;}
  .about-team-grid .team-card-body{padding:16px;}
  .about-team-grid .team-card-body h3{font-size:15px;}

  /* Workflow: vertical stack with a left connecting line */
  .workflow-track{grid-template-columns:1fr;row-gap:30px;}
  .workflow-line{display:none;}
  .workflow-track{position:relative;padding-left:8px;}
  .workflow-track::before{
    content:"";position:absolute;top:32px;bottom:32px;left:40px;width:2px;background:var(--line-100);
  }
  .workflow-step{display:flex;align-items:flex-start;gap:18px;text-align:left;}
  .workflow-icon{margin:0;flex-shrink:0;}

  /* Photo gallery (working environment / events): 2-column on small screens */
  .photo-gallery{grid-template-columns:1fr 1fr;gap:10px;}
  .working-env .photo-gallery{margin-bottom:40px;}
  .culture-list{grid-template-columns:1fr;gap:12px;}
  .culture-item{flex-direction:row;text-align:left;padding:18px;}

  .values-grid{grid-template-columns:1fr;gap:14px;}
  .value-card{padding:26px 22px;}

  /* ===== Contact page ===== */
  .contact-hero-content{padding:36px 0 32px;}
  .quick-contact,.contact-main{padding:48px 0;}
  .contact-faq{padding:0 0 48px;}
  .quick-contact-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .quick-card{padding:20px 16px;}
  .quick-card-icon{width:42px;height:42px;font-size:16px;margin-bottom:14px;}
  .quick-card-value{font-size:14px;}
  .contact-form-panel{padding:22px 18px;border-radius:var(--radius-md);}
  .map-card iframe{height:300px;}
  .map-address-chip{flex-direction:column;gap:6px;left:14px;right:14px;bottom:14px;padding:14px 16px;}
  .faq-question{padding:16px 18px;font-size:14.5px;}
  .faq-answer p{padding:0 18px 16px;}

  /* ===== Careers page ===== */
  .careers-hero-content{padding:36px 0 32px;}
  .benefits,.jobs{padding:48px 0;}
  .application{padding:48px 0;}
  .benefits-grid{grid-template-columns:1fr;gap:14px;}
  .benefit-card{padding:24px 20px;}
  .jobs-count{margin-bottom:4px;}
  .job-card{padding:20px;}
  .job-title-wrap h3{font-size:18px;}
  .job-badge{font-size:11px;padding:5px 10px;}
  .application-panel{padding:24px 18px;border-radius:var(--radius-md);}
  .file-upload{padding:20px 14px;}

  /* ===== Blog pages ===== */
  .blog-hero-content,.article-hero-content{padding:32px 0 28px;}
  .featured-body{padding:24px 20px;}
  .featured-body h2{font-size:21px;}
  .featured-media{min-height:200px;}
  .article-hero-meta{gap:12px;}
  .article-body p{font-size:15px;}
  .article-body h2{font-size:19px;}
  .article-quote{padding:20px 22px;}
  .article-quote p{font-size:15.5px;}
  .article-pdf-inline{padding:22px;flex-direction:column;align-items:stretch;text-align:center;}
  .article-pdf-inline-info{flex-direction:column;text-align:center;}
  .article-share{flex-direction:column;align-items:flex-start;gap:14px;}
  .sidebar-card{padding:20px;}

  /* ===== Services page ===== */
  .services-hero-content{padding:32px 0 28px;}
  .services-subnav-link{padding:8px 14px;font-size:12.5px;}
  .service-detail{padding:56px 0;}
  .service-detail-media img{height:260px;}
  .service-stat-badge{left:14px;bottom:14px;padding:14px 16px;}
  .service-detail-content h2{font-size:24px;}
  .services-why-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .services-why-card{padding:22px 16px;}
  .services-cta{padding:80px 0;text-align:left;}
  .services-cta-content{text-align:left;}
  .services-cta-actions{justify-content:flex-start;flex-direction:column;align-items:stretch;}

  /* ===== Projects pages ===== */
  .projects-hero-content,.project-hero-content{padding:32px 0 28px;}
  .projects-toolbar-row{flex-direction:column;align-items:flex-start;gap:14px;}
  .projects-listing-filters{width:100%;}
  .projects-listing-filters .filter-btn{flex:1;}
  .project-spec-bar{padding:20px 0;}
  .project-spec-row{flex-direction:column;gap:14px;}
  .project-spec-item{flex:none;}
  .project-section{padding:56px 0 80px;}
  .project-gallery{grid-template-columns:1fr;}
  .project-gallery-item{height:220px;}
  .project-map-card iframe{height:240px;}
  .gallery-lightbox{padding:16px;}
  .gallery-lightbox-nav{width:38px;height:38px;font-size:15px;}
  .gallery-lightbox-prev{left:8px;}
  .gallery-lightbox-next{right:8px;}
  .gallery-lightbox-close{top:12px;right:12px;width:38px;height:38px;}

  /* ===== Clients page ===== */
  .clients-hero-content{padding:32px 0 28px;}
  .clients-stats-row{flex-direction:column;gap:16px;}
  .clients-stat-item{border-left:none;}
  .clients-listing{padding:56px 0 40px;}
  .clients-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .client-card{padding:22px 14px;}
  .client-logo-mark{width:52px;height:52px;font-size:16px;}
  .clients-cta{padding:64px 0;}

  /* ===== Events pages ===== */
  .events-hero-content,.event-details-hero-content{padding:32px 0 28px;}
  .event-folders{padding:56px 0;}
  .event-folders-grid{grid-template-columns:1fr;gap:20px;}
  .event-details-gallery,.more-events{padding:56px 0;}
  .events-cta{padding:64px 0;}
}

/* ---------- Short mobile viewports (iPhone SE and similar) ---------- */
@media (max-width:640px) and (max-height:960px){
  .hero-content{padding-top:calc(var(--header-h) + 10px);padding-bottom:20px;}
  .hero-eyebrow{margin-bottom:10px;font-size:11.5px;}
  .hero-headline{font-size:clamp(24px,7.6vw,32px);margin-bottom:10px;line-height:1.15;}
  .hero-sub{
    font-size:13.5px;margin-bottom:16px;line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .hero-ctas{gap:10px;margin-bottom:16px;}
  .hero-ctas .btn{padding:13px 22px;font-size:14px;}
  .hero-stats{gap:10px 0;}
  .hero-stat{padding-right:10px;}
  .hero-stat p{margin-top:1px;font-size:11.5px;}
}

/* ---------- Extra-short mobile viewports (iPhone SE, small Android) ---------- */
@media (max-width:640px) and (max-height:700px){
  .hero-content{padding-top:calc(var(--header-h) + 4px);padding-bottom:10px;}
  .hero-eyebrow{margin-bottom:6px;font-size:10.5px;}
  .hero-headline{font-size:clamp(20px,6.6vw,26px);margin-bottom:6px;}
  .hero-sub{-webkit-line-clamp:2;margin-bottom:10px;font-size:12.5px;}
  .hero-ctas{margin-bottom:10px;}
  .hero-ctas .btn{padding:11px 20px;font-size:13px;}
  .hero-stats{gap:4px 0;}
  .hero-stat .counter,.hero-stat .stat-suffix{font-size:20px;}
  .hero-stat p{font-size:10px;}
}

/* ---------- Short viewports (laptops with limited height) ---------- */
@media (max-height:820px) and (min-width:641px){
  .hero-content{padding-top:calc(var(--header-h) + 18px);padding-bottom:34px;}
  .hero-eyebrow{margin-bottom:14px;}
  .hero-headline{margin-bottom:14px;font-size:clamp(32px,5vw,60px);}
  .hero-sub{margin-bottom:20px;}
  .hero-ctas{margin-bottom:24px;}
  .hero-stats{padding-top:16px;}
  .hero-stat p{margin-top:2px;}
}
@media (max-height:700px) and (min-width:641px){
  .scroll-indicator{display:none;}
}

/* ---------- Small mobile (<=400px) ---------- */
@media (max-width:400px){
  .hero-stat{min-width:100%;}
  .form-field label{font-size:12.5px;}
}
/* On short + narrow phones, prefer the 2-column stat layout over full-width
   rows so the hero doesn't grow tall enough to fight the floating actions. */
@media (max-width:400px) and (max-height:960px){
  .hero-stat{min-width:47%;}
}

/* ==========================================================================
   MOBILE APP-STYLE BOTTOM NAVIGATION + FLOATING ACTIONS
   Shown only on touch/mobile widths; desktop keeps the top nav.
   ========================================================================== */
@media (max-width:860px){
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom));}

  /* Brand-blue glass bar — distinct from the red trust bar and the navy
     call FAB so it never visually merges with the section behind it. */
  .bottom-nav{
    display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:1000;
    background:linear-gradient(135deg,rgba(11,83,155,.96) 0%,rgba(7,52,99,.97) 100%);
    backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
    border-radius:24px;padding:7px 6px;box-shadow:0 14px 34px rgba(7,40,80,.38);
    border:1px solid rgba(255,255,255,.14);
    padding-bottom:calc(7px + env(safe-area-inset-bottom));
  }
  .bottom-nav-item{
    position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    padding:8px 2px;border-radius:18px;color:rgba(255,255,255,.72);
    transition:color .3s var(--ease),background .3s var(--ease),transform .2s var(--ease);
    min-height:50px;-webkit-tap-highlight-color:transparent;
  }
  .bottom-nav-item i{font-size:19px;line-height:1;transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
  .bottom-nav-item span{font-size:10px;font-weight:600;letter-spacing:.01em;line-height:1;white-space:nowrap;}
  /* Active: white pill, brand-red icon, small indicator dot under the label */
  .bottom-nav-item.active{color:var(--gold-400);background:var(--paper-0);box-shadow:0 4px 12px rgba(0,0,0,.18);}
  .bottom-nav-item.active span{color:var(--navy-950);}
  .bottom-nav-item.active i{animation:navIconPop .45s cubic-bezier(.34,1.56,.64,1);}
  /* Hover (pointer devices) — lift the icon */
  @media (hover:hover){
    .bottom-nav-item:hover{color:var(--paper-0);}
    .bottom-nav-item.active:hover{color:var(--gold-400);}
    .bottom-nav-item:hover i{transform:translateY(-3px) scale(1.12);}
  }
  /* Press / tap — squish the whole item, then the ripple below plays */
  .bottom-nav-item:active{transform:scale(.9);}
  .bottom-nav-item::after{
    content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;
    background:rgba(255,255,255,.35);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;
  }
  .bottom-nav-item.tapped::after{animation:navRipple .5s ease-out;}
  .bottom-nav-item:focus-visible{outline:2px solid var(--paper-0);outline-offset:2px;}
  @keyframes navIconPop{0%{transform:scale(.6);}60%{transform:scale(1.2) translateY(-2px);}100%{transform:scale(1);}}
  @keyframes navRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:.9;}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0;}}
  @media (prefers-reduced-motion:reduce){
    .bottom-nav-item,.bottom-nav-item i{transition:none;animation:none !important;}
    .bottom-nav-item.tapped::after{animation:none;}
  }
  /* .bottom-nav-more is a <button>, not an <a> like its siblings — iOS
     Safari applies native form-control sizing (extra line-height/padding)
     to buttons that anchors don't get, which can throw off vertical
     centering even with identical flex rules. Force it to match exactly. */
  .bottom-nav-more{width:auto;margin:0;font-family:inherit;}

  /* Floating actions sit above the bottom nav bar */
  .floating-actions{
    right:16px;bottom:calc(100px + env(safe-area-inset-bottom));gap:12px;
  }
  .fab{width:50px;height:50px;font-size:21px;}
  .scroll-top-btn{
    left:16px;bottom:calc(100px + env(safe-area-inset-bottom));width:44px;height:44px;
  }
}

@media (min-width:861px){
  .mobile-menu,.mobile-menu-backdrop{display:none;}
}

/* ==========================================================================
   INNER-PAGE BANNERS (about, services, projects, project detail, clients,
   events, event detail, careers, blog, article, contact) — one shared set
   of rules, kept last so it wins over each page's own CSS.
   - The photo starts BELOW the fixed white header. Before, the header
     covered the photo's top 155–176px and a "40vh" banner left only a
     thin dark strip of photo visible.
   - Taller visible photo area.
   - Side gradient instead of a 60–96% all-over darkening: dark behind the
     left-aligned text, clear photo on the right. Phones (text spans the
     full width) use a bottom-up gradient instead.
   - No extra scale(1.05) zoom, which only added blur.
   ========================================================================== */
.about-hero,.services-hero,.projects-hero,.project-hero,.clients-hero,.events-hero,
.event-details-hero,.careers-hero,.blog-hero,.article-hero,.contact-hero{
  min-height:calc(var(--header-h) + clamp(360px,50vh,560px));
}
.about-hero{min-height:calc(var(--header-h) + clamp(420px,58vh,640px));}
.about-hero-media,.services-hero-media,.projects-hero-media,.project-hero-media,.clients-hero-media,.events-hero-media,
.event-details-hero-media,.careers-hero-media,.blog-hero-media,.article-hero-media,.contact-hero-media,
.about-hero-overlay,.services-hero-overlay,.projects-hero-overlay,.project-hero-overlay,.clients-hero-overlay,.events-hero-overlay,
.event-details-hero-overlay,.careers-hero-overlay,.blog-hero-overlay,.article-hero-overlay,.contact-hero-overlay{
  top:var(--header-h);
}
.services-hero-media img,.projects-hero-media img,.project-hero-media img,.clients-hero-media img,.events-hero-media img,
.event-details-hero-media img,.careers-hero-media img,.blog-hero-media img,.article-hero-media img,.contact-hero-media img{
  transform:none;object-position:center 40%;
}
.services-hero-overlay,.projects-hero-overlay,.project-hero-overlay,.clients-hero-overlay,.events-hero-overlay,
.event-details-hero-overlay,.careers-hero-overlay,.blog-hero-overlay,.article-hero-overlay,.contact-hero-overlay{
  background:
    linear-gradient(90deg,rgba(5,10,19,.82) 0%,rgba(5,10,19,.58) 38%,rgba(5,10,19,.14) 72%,rgba(5,10,19,0) 100%),
    linear-gradient(0deg,rgba(5,10,19,.5) 0%,rgba(5,10,19,0) 38%);
}
.services-hero-title,.projects-hero-title,.clients-hero-title,.events-hero-title,.careers-hero-title,
.blog-hero-title,.contact-hero-title,.about-hero-title,.article-hero h1,.project-hero h1,.event-details-hero h1{
  text-shadow:0 2px 18px rgba(5,10,19,.45);
}

@media (max-width:640px){
  .about-hero,.services-hero,.projects-hero,.project-hero,.clients-hero,.events-hero,
  .event-details-hero,.careers-hero,.blog-hero,.article-hero,.contact-hero{
    min-height:calc(var(--header-h) + clamp(320px,52svh,440px));
  }
  .services-hero-overlay,.projects-hero-overlay,.project-hero-overlay,.clients-hero-overlay,.events-hero-overlay,
  .event-details-hero-overlay,.careers-hero-overlay,.blog-hero-overlay,.article-hero-overlay,.contact-hero-overlay{
    background:linear-gradient(180deg,rgba(5,10,19,.12) 0%,rgba(5,10,19,.3) 35%,rgba(5,10,19,.86) 100%);
  }
}

/* Banner text blocks are "container X-hero-content", and each page's
   X-hero-content{padding:56px 0 48px} shorthand zeroed the container's
   side gutter — invisible on wide screens, but on phones/tablets the
   banner text sat flush against the screen edge. Restore the gutter at
   each breakpoint (same values as .container). Higher specificity than the
   page rules, so source order doesn't matter. */
.container[class*="-hero-content"]{padding-left:32px;padding-right:32px;}
@media (max-width:1200px){ .container[class*="-hero-content"]{padding-left:24px;padding-right:24px;} }
@media (max-width:860px){ .container[class*="-hero-content"]{padding-left:20px;padding-right:20px;} }
@media (max-width:640px){ .container[class*="-hero-content"]{padding-left:18px;padding-right:18px;} }
.container[class*="-hero-content"] .breadcrumb{margin-bottom:14px;}
/* Events banner photo: the group stands in the lower part of the frame. */
.events-hero-media img{object-position:center 72%;}