/* Production additions on top of site.css (the prototype stylesheet, kept unmodified). */

/* From the homepage's own style block in prototype/Main.dc.html. */
.anchor{position:absolute;top:0;left:0;width:1px;height:1px;scroll-margin-top:72px}
.contact{position:relative}

/* Interactive parts are server-rendered and toggled with the hidden attribute;
   class rules like .fpanel{display:grid} must not override it. */
.lx [hidden]{display:none !important}

/* Logo carries intrinsic size attributes elsewhere; keep its aspect ratio. */
.brand-mark img{height:auto}

/* Form submission states (real send). Builds on .notice from site.css. */
.notice.ok{background:#E8F5EE;border-color:#A9D8BF}
.notice.bad{background:#FDECEA;border-color:#F2B8B0}
.form .btn[aria-disabled="true"]{opacity:.7;cursor:progress}
.form .hp{position:absolute !important;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Company-form pages: hero eyebrow on the navy hero, and the "At a glance" facts grid. */
.ihero .eyebrow{color:var(--mint);margin-bottom:-6px}
.prose .facts.glance{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 1.2em}
.prose .facts.glance .fact b{color:var(--ink)}
@media (max-width: 640px){.prose .facts.glance{grid-template-columns:minmax(0,1fr)}}

/* Homepage form panels: link to each form's own page, under the Enquire button. */
.fpanel-side .lnk.page{align-self:flex-start}

/* Mega menu: each trigger shows only its own items (client request). */
.mega .mcol.hot{background:transparent}
.mega[data-show="forms"] .mega-in{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
.mega[data-show="forms"] .mcol[data-col="forms"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:2px 18px}
.mega[data-show="forms"] .mcol[data-col="forms"] > .mh,
.mega[data-show="forms"] .mcol[data-col="forms"] > .mall{grid-column:1 / -1}
.mega[data-show="svc"] .mega-in{grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width: 1240px){
  .mega[data-show="forms"] .mega-in{grid-template-columns:minmax(0,1fr)}
  .mega[data-show="svc"] .mega-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Language bar: a slim strip above the header (client request: kept apart from the menu).
   Collapses once the header turns solid on scroll. Languages without a translation of the
   current page are shown but not linked (.off). */
.hdr-top{border-bottom:1px solid rgba(255,255,255,.12);max-height:38px;overflow:hidden;transition:max-height .3s var(--ease),opacity .25s,border-color .3s}
.hdr.solid .hdr-top{max-height:0;opacity:0;border-color:transparent}
.hdr-top-in{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:37px;font-family:var(--head);font-size:13px}
.hdr-top .globe{opacity:.75;flex:none}
.lang-sw{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.lang-sw li{margin:0;padding:0;display:flex;align-items:center}
.lang-sw li + li::before{content:"";width:1px;height:12px;background:rgba(255,255,255,.3);margin:0 4px}
.lang-sw a,.lang-sw span{display:inline-flex;align-items:center;min-height:30px;padding:0 6px;border-radius:4px;font-weight:600;font-size:13px;line-height:1;text-decoration:none;color:rgba(255,255,255,.82)}
.lang-sw a:hover{color:#fff;background:rgba(255,255,255,.1)}
.lang-sw a.cur{color:#fff;text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:6px}
.lang-sw .off{opacity:.45;cursor:default}
.lang-sw [lang="ar"]{font-family:"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;font-size:14px}

/* Larger logo (client request). Page tops gain the language bar + taller header (48px). */
.brand-mark{width:72px;height:60px;border-radius:7px}
.brand-mark img{width:56px}
.brand-txt b{font-size:18px}
.brand-txt span{font-size:13px}
.hdr-in{min-height:92px}
.hdr.solid .brand-mark{width:60px;height:50px}
.hdr.solid .brand-mark img{width:46px}
.hdr.solid .hdr-in{min-height:70px}
.hero-in{padding-top:184px}
.ihero-in{padding-top:198px}
.ftr .brand-mark{width:64px;height:54px}
.ftr .brand-mark img{width:50px}
@media (max-width: 640px){
  .brand-mark{width:56px;height:48px}
  .brand-mark img{width:44px}
  .brand-txt b{font-size:16px}
  .hdr-in{min-height:74px}
  .hdr.solid .brand-mark{width:50px;height:42px}
  .hdr.solid .brand-mark img{width:38px}
  .hdr.solid .hdr-in{min-height:64px}
  .hero-in{padding-top:164px}
  .ihero-in{padding-top:162px}
  .hdr-top-in{min-height:34px}
}

/* Homepage hero = one screen, glass contact rail included (client request).
   The rail overlaps the hero bottom and keeps --railGap below it, so the hero is
   one viewport minus that gap; spacing and headline scale with the screen height. */
.hero{min-height:calc(100vh - var(--railGap));min-height:calc(100svh - var(--railGap))}
.hero-in{padding-top:clamp(124px,17vh,184px);padding-bottom:calc(var(--railH) + var(--railGap) + clamp(18px,4vh,44px))}
.hero-copy{gap:clamp(14px,2.6vh,26px)}
.hero h1{font-size:clamp(34px,min(5.6vw,7vh),82px)}
.hero-lede{font-size:clamp(15px,min(1.45vw,2.1vh),20px);line-height:1.55}
@media (max-width: 1100px){
  .hero{min-height:calc(100vh - var(--railGap));min-height:calc(100svh - var(--railGap))}
  .lx{--railH:148px}
  .rail-in{grid-auto-rows:74px}
}
@media (max-width: 640px){
  .hero{min-height:calc(100vh - var(--railGap));min-height:calc(100svh - var(--railGap))}
  .lx{--railH:148px}
  .rail-in{grid-auto-rows:74px}
  .hero-in{padding-top:116px;padding-bottom:calc(var(--railH) + var(--railGap) + 14px)}
  .hero-copy{gap:12px}
  .hero h1{font-size:clamp(28px,min(9vw,5vh),42px)}
  .hero-copy .eyebrow{font-size:13px}
  .hero-lede{font-size:14.5px;line-height:1.48}
  .hero-actions{gap:10px}
  .hero-actions .btn,.hero-actions .btn-ghost{min-height:46px;padding-top:10px;padding-bottom:10px}
}

/* Nav labels never wrap (longer French/Arabic labels). */
.nav-btn,.nav > a,.brand-txt b,.brand-txt span{white-space:nowrap}
@media (max-width: 640px) and (max-height: 700px){
  .hero-in{padding-top:112px}
  .hero-lede{font-size:14px}
  .hero-copy{gap:10px}
  .lx{--railH:132px}
  .rail-in{grid-auto-rows:66px}
}

/* Contact page map (key-free Google Maps embed). */
.map-band{padding:0 0 clamp(40px,5vw,72px)}
.map-frame{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--mist);height:clamp(300px,34vw,440px)}
.map-frame iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.85) contrast(1.05)}
.map-frame:hover iframe{filter:none;transition:filter .4s}
.map-link{margin:12px 0 0;font-family:var(--head);font-weight:600;font-size:15px}
.map-link a{color:var(--green)}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}