/* ==========================================================
   COMPONENTS
   ========================================================== */

/* ---- Buttons (no pills, no heavy rounding, restrained accent) ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  padding:15px 30px;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:var(--navy);}
.btn-primary:hover{background:#e2983a;}
.btn-primary:active{opacity:.88;}

/* Editorial arrow button: text + underline + arrow, more character
   than a filled button. Used for secondary CTAs and repeated calls. */
.btn-arrow{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:600;font-size:15px;letter-spacing:.02em;text-transform:uppercase;
  padding-bottom:6px;position:relative;
}
.btn-arrow::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:rgba(44,85,120,.3);
}
.btn-arrow::before{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);
  transition:width .4s var(--ease-soft);
  z-index:1;
}
.btn-arrow .arrow{transition:transform .35s var(--ease-soft);}
.btn-arrow:hover::before{width:100%;}
.btn-arrow:hover .arrow{transform:translate(4px,-4px);}
.btn-arrow.on-dark::after{background:var(--white-15);}
.btn-arrow.on-dark{color:var(--white);}

.btn-outline{
  background:transparent;
  border:1px solid var(--navy);
  color:var(--navy);
}
.btn-outline:hover{border-color:var(--accent);color:var(--navy);}
.btn-outline.on-dark{border-color:rgba(246,247,245,.4);color:var(--white);}
.btn-outline.on-dark:hover{border-color:var(--accent);}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:15px;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}
.link-arrow svg{transition:transform .25s var(--ease);}
.link-arrow:hover{border-color:var(--accent);}
.link-arrow:hover svg{transform:translateX(4px);}

.text-link{
  border-bottom:1px solid var(--blueprint);
  padding-bottom:2px;
  font-weight:600;
  color:var(--navy);
}
.text-link:hover{border-color:var(--accent);}

/* ---- Header / Navigation ----
   At top: near-transparent, integrated with hero.
   After scroll: opaque + blurred + thin border. JS toggles .is-scrolled. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(246,247,245,.55);
  backdrop-filter:blur(6px);
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(246,247,245,.92);
  backdrop-filter:blur(12px);
  border-bottom-color:rgba(44,85,120,.16);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;
  padding-top:14px;padding-bottom:14px;
}

.logo{display:flex;align-items:center;gap:10px;color:var(--navy);}
.logo-mark{display:flex;color:var(--accent);}
.imperium-logo-image{height:34px;width:auto;max-width:220px;display:block;object-fit:contain;}
.mobile-nav-top .imperium-logo-image,
.footer-brand .imperium-logo-image{height:30px;}
.logo-text{display:flex;flex-direction:column;line-height:1;font-family:var(--font-display);}
.logo-word{font-size:18px;font-weight:700;letter-spacing:.01em;}
.logo-sub{font-size:9.5px;letter-spacing:.18em;color:var(--muted);font-family:var(--font-mono);}

.main-nav{display:flex;gap:36px;}
.main-nav a{
  font-size:14.5px;color:var(--navy);position:relative;padding:4px 0;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);
  transition:width .25s var(--ease);
}
.main-nav a:hover::after{width:100%;}

/* ---- Mega menu (Services) ----
   Desktop only — .main-nav is already hidden ≤1024px, where the
   mobile submenu (below) takes over. Pure CSS hover/focus-within;
   no gap between trigger and panel so the hover chain never breaks. */
.nav-item{position:relative;}
.nav-trigger{
  display:flex;align-items:center;gap:7px;
  background:none;border:none;font-family:var(--font-body);
  font-size:14.5px;color:var(--navy);cursor:pointer;padding:4px 0;
}
.nav-caret{
  width:7px;height:7px;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease-soft);
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret{transform:rotate(225deg) translateY(2px);border-color:var(--accent);}
.nav-item:hover .nav-trigger,
.nav-item:focus-within .nav-trigger{color:var(--accent);}

.megamenu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(4px);
  width:min(600px, 60vw);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease-soft), transform .25s var(--ease-soft), visibility 0s linear .25s;
  z-index:110;
}
.nav-item:hover .megamenu,
.nav-item:focus-within .megamenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  transition:opacity .25s var(--ease-soft), transform .25s var(--ease-soft), visibility 0s;
}
.megamenu-inner{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--white);
  border:1px solid rgba(44,85,120,.15);
  border-top:none;
  box-shadow:0 16px 40px rgba(11,31,46,.10);
}
.megamenu-card{
  display:block;
  padding:20px;
  box-sizing:border-box;
  transition:background-color .3s var(--ease);
}
/* Padding pinned again here on both children — verified fix: the base
   .megamenu-card rule alone wasn't rendering reliably in every browser
   for grid-item children, but the higher-specificity child selectors do. */
.megamenu-card:first-child{border-right:1px solid rgba(44,85,120,.14);padding:20px;}
.megamenu-card:last-child{padding:20px;}
.megamenu-card:hover{background:var(--bg-light);}
.megamenu-card-visual{
  position:relative;
  width:100%;
  height:168px; /* fixed px height — no aspect-ratio, no padding-top percentage trick, nothing that can be miscomputed inside a transformed/hover-animated ancestor */
  margin-bottom:18px;
  overflow:hidden;
  box-sizing:border-box;
}
.megamenu-card-visual .photo{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;}
.megamenu-card-visual .photo-media::after{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(246,247,245,.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(246,247,245,.07) 0 1px, transparent 1px 26px);
}
.megamenu-card-visual .photo.on-light .photo-media::after{
  background-image:
    repeating-linear-gradient(90deg, rgba(44,85,120,.08) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(44,85,120,.08) 0 1px, transparent 1px 26px);
}
.megamenu-card:hover .photo-media{transform:scale(1.035);}
.megamenu-card-index{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.megamenu-card-index .orange-marker{width:16px;}
.megamenu-card:hover .megamenu-card-index .orange-marker{width:26px;}
.megamenu-card-copy .megamenu-card-title{
  font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.2;
  color:var(--navy);margin-bottom:6px;
}
.megamenu-card-copy p{font-size:13.5px;color:var(--muted);margin-bottom:14px;line-height:1.5;}
.megamenu-card-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--navy);
}
.megamenu-card-cta svg{transition:transform .3s var(--ease-soft);}
.megamenu-card:hover .megamenu-card-cta svg{transform:translate(4px,-4px);}

/* Backdrop dims the page behind the open megamenu, so the dropdown
   reads as a focused overlay instead of floating over visible content. */
.megamenu-backdrop{
  position:fixed;inset:0;
  background:rgba(11,31,46,.4);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease-soft), visibility 0s linear .3s;
  z-index:95;
}
.megamenu-backdrop.is-visible{
  opacity:1;visibility:visible;
  transition:opacity .3s var(--ease-soft), visibility 0s;
}

.header-actions{display:flex;align-items:center;gap:20px;}

.header-client-link{
  display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--navy);
  height:50px;
  padding:0 16px;
  box-sizing:border-box;
  border:1px solid rgba(44,85,120,.3);
  border-radius:var(--radius);
  transition:border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.header-client-link svg{flex-shrink:0;}
.header-client-link:hover{border-color:var(--accent);color:var(--accent);}
.header-actions .btn-primary{
  height:50px;
  box-sizing:border-box;
  display:inline-flex;align-items:center;
}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:32px;height:32px;
}
.nav-toggle span{display:block;width:100%;height:1.5px;background:var(--navy);transition:transform .25s var(--ease);}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg);}

.mobile-nav{
  position:fixed;inset:0;z-index:200;
  visibility:hidden;
  pointer-events:none;
}
.mobile-nav.open{visibility:visible;pointer-events:auto;}

.mobile-nav-backdrop{
  position:absolute;inset:0;
  background:rgba(11,31,46,.55);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .4s var(--ease-soft);
}
.mobile-nav.open .mobile-nav-backdrop{opacity:1;}

.mobile-nav-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px, 86vw);
  background:var(--navy);
  color:var(--white);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .45s var(--ease-soft);
  display:flex;flex-direction:column;
  padding:20px clamp(24px,6vw,40px) 32px;
  border-left:1px solid rgba(246,247,245,.1);
}
.mobile-nav.open .mobile-nav-panel{transform:translateX(0);}

.mobile-nav-top{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:32px;margin-bottom:24px;
  border-bottom:1px solid rgba(246,247,245,.14);
}
.mobile-nav-top .logo-word{color:var(--white);}
.mobile-nav-top .logo-sub{color:rgba(246,247,245,.5);}
.mobile-nav-close{
  position:relative;
  width:36px;height:36px;flex-shrink:0;
  border:1px solid rgba(246,247,245,.25);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.mobile-nav-close:hover{border-color:var(--accent);color:var(--accent);}

.mobile-nav-links{position:relative;z-index:1;display:flex;flex-direction:column;}
.mobile-nav-links > a{
  padding:18px 0;
  border-bottom:1px solid rgba(246,247,245,.14);
  font-family:var(--font-display);font-size:26px;font-weight:600;
  color:var(--white);
  transition:color .25s var(--ease);
}
.mobile-nav-links > a:hover{color:var(--accent);}
.mobile-nav-links > a[aria-current="page"]{color:var(--accent);}

.mobile-nav-bottom{
  position:relative;z-index:1;
  margin-top:auto;padding-top:32px;
}
.mobile-nav-bottom .btn{width:100%;justify-content:center;margin-bottom:18px;}
.mobile-nav-bottom p{font-size:11px;letter-spacing:.07em;color:rgba(246,247,245,.4);}

/* ---- Mobile services submenu (accordion inside the panel) ---- */
.mobile-nav-item{border-bottom:1px solid rgba(246,247,245,.14);}
.mobile-nav-trigger{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;
  font-family:var(--font-display);font-size:26px;font-weight:600;
  color:var(--white);
  background:none;border:none;
  transition:color .25s var(--ease);
}
.mobile-nav-trigger:hover{color:var(--accent);}
.mobile-nav-trigger .nav-caret{border-color:rgba(246,247,245,.4);transition:transform .3s var(--ease-soft), border-color .3s var(--ease);}
.mobile-nav-trigger[aria-expanded="true"]{color:var(--accent);}
.mobile-nav-trigger[aria-expanded="true"] .nav-caret{border-color:var(--accent);transform:rotate(225deg) translateY(2px);}

.mobile-services-menu{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease-soft);
}
.mobile-services-menu-inner{padding-bottom:16px;}
.mobile-services-menu a{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 0 14px 20px;
  border-left:1px solid var(--blueprint);
  margin-bottom:2px;
  transition:border-color .25s var(--ease);
}
.mobile-services-menu a .msm-title{
  font-family:var(--font-body);font-weight:600;font-size:15.5px;color:rgba(246,247,245,.9);
  transition:color .25s var(--ease);
}
.mobile-services-menu a .msm-desc{
  font-size:12.5px;color:rgba(246,247,245,.45);
}
.mobile-services-menu a:hover{border-color:var(--accent);}
.mobile-services-menu a:hover .msm-title{color:var(--accent);}
.mobile-services-menu a[aria-current="page"]{border-color:var(--accent);}
.mobile-services-menu a[aria-current="page"] .msm-title{color:var(--accent);}

body.nav-open{overflow:hidden;}

/* ==========================================================
   STICKY CONTACT
   Desktop: floating CTA, bottom-right, appears after scrolling past
   the hero. Mobile: a full-width bottom bar with Call + WhatsApp —
   the two fastest paths to a conversion on a phone.
   ========================================================== */
.sticky-fab{
  position:fixed;right:24px;bottom:24px;
  z-index:90;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft), visibility 0s linear .3s;
}
.sticky-fab.is-visible{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft), visibility 0s;
}
.fab-whatsapp{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;
  border-radius:50%;
  background:#25D366;
  color:var(--white);
  box-shadow:0 12px 28px rgba(11,31,46,.28);
  transition:transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.fab-whatsapp:hover{transform:scale(1.06);box-shadow:0 16px 34px rgba(11,31,46,.32);}
.fab-whatsapp svg{width:30px;height:30px;}

.sticky-contact-bar{display:none;}

body.nav-open .sticky-fab,
body.nav-open .sticky-contact-bar{opacity:0;visibility:hidden;pointer-events:none;}

/* ---- Photography placeholder ----
   Real architectural photography goes here in production.
   Kept intentionally quiet: no illustrated blueprint drawings,
   just a restrained frame + a single hairline corner detail. */
.photo{
  position:relative;
  overflow:hidden;
}
.photo-media{
  position:absolute;inset:0;
  width:100%;height:100%;
  background:linear-gradient(160deg, var(--navy-secondary) 0%, var(--navy) 100%);
  object-fit:cover; /* fills the box completely; no-op on the placeholder <div>, required once this is a real <img> */
  object-position:center;
  transform:scale(1);
  transition:transform .6s var(--ease-soft);
}
.photo::after{
  content:'';
  position:absolute;inset:0;
  border:1px solid rgba(246,247,245,.08);
  z-index:2;
  pointer-events:none;
}
.photo-overlay{
  position:absolute;inset:0;
  background:var(--navy-40);
  opacity:0;
  transition:opacity .5s var(--ease-soft);
  z-index:1;
}
.photo-corner{
  position:absolute;width:22px;height:22px;z-index:2;
  border-color:rgba(242,169,59,.7);
}
.photo-corner.tl{top:14px;left:14px;border-top:1px solid;border-left:1px solid;}
.photo-corner.br{bottom:14px;right:14px;border-bottom:1px solid;border-right:1px solid;}
.photo-caption{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  color:rgba(246,247,245,.45);
}
.photo.on-light .photo-media{background:linear-gradient(160deg, #e9ece8 0%, #dde1dc 100%);}
.photo.on-light .photo-corner{border-color:rgba(44,85,120,.5);}
.photo.on-light .photo-caption{color:rgba(16,34,46,.4);}

/* ---- Service panel (editorial, not a card) ----
   Hover: image scales 1 → 1.035, overlay deepens slightly,
   orange indicator expands, arrow shifts. ~500ms, soft ease. */
.service-panel{
  position:relative;
  display:block;
}
.service-panel .photo{
  aspect-ratio:16/10;
}
/* Hover scope is the whole article (.service), so the effect fires
   whether the pointer is over the image or the copy beside it. */
.service:hover .photo-media,
.service:focus-within .photo-media{transform:scale(1.035);}
.service:hover .photo-overlay,
.service:focus-within .photo-overlay{opacity:.3;}

.service-panel-index{
  display:flex;align-items:center;gap:14px;
  margin-bottom:16px;
}
.service-panel-index .orange-marker{width:22px;}
.service:hover .service-panel-index .orange-marker,
.service:focus-within .service-panel-index .orange-marker{width:40px;}

.service-panel-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:14.5px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--navy);
}
.service-panel-cta svg{transition:transform .4s var(--ease-soft);}
.service:hover .service-panel-cta svg,
.service-panel-cta:hover svg,
.service-panel-cta:focus-visible svg{transform:translate(6px,-6px);}

/* ---- Accordion (FAQ) — editorial, not a card ----
   Orange indicator expands, divider deepens, arrow rotates. ~350ms. */
.accordion-item{
  position:relative;
  border-bottom:1px solid rgba(44,85,120,.2);
  transition:border-color .35s var(--ease);
}
.accordion-item::before{
  content:'';
  position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--accent);
  transition:width .4s var(--ease-soft);
}
.accordion-item.is-open::before{width:100%;}
.accordion-item.is-open{border-color:transparent;}

.accordion-trigger{
  width:100%;
  display:flex;align-items:center;gap:20px;
  padding:26px 0;
  text-align:left;
  font-family:var(--font-display);
  font-size:clamp(18px,1.9vw,22px);
  font-weight:600;
  color:var(--navy);
}
.accordion-trigger .orange-marker{flex-shrink:0;width:0;}
.accordion-trigger[aria-expanded="true"] .orange-marker{width:22px;}
.accordion-question-text{flex:1;}

.accordion-icon{position:relative;flex-shrink:0;width:16px;height:16px;}
.accordion-icon::before,.accordion-icon::after{
  content:'';position:absolute;background:var(--accent);top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.accordion-icon::before{width:16px;height:1.5px;}
.accordion-icon::after{width:1.5px;height:16px;transition:transform .35s var(--ease-soft), opacity .35s var(--ease-soft);}
.accordion-trigger[aria-expanded="true"] .accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.accordion-trigger[aria-expanded="true"] .accordion-icon{transform:rotate(45deg);transition:transform .35s var(--ease-soft);}

.accordion-panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-soft);}
.accordion-panel p{padding-bottom:28px;padding-right:40px;color:var(--muted);max-width:60ch;font-size:16px;}