/*
Theme Name: MGE Hard Chrome
Theme URI: https://mgetradingservices.in
Description: Child theme of Hello Elementor carrying the "Hard Chrome" design system for MGE Trading & Services — dark graphite ground, chrome specular highlights, signal amber accent.
Author: MGE Trading & Services
Template: hello-elementor
Version: 1.0.1
Text Domain: mge-hardchrome
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --ink-900:#090C10; --ink-850:#0B0F14; --ink-800:#0E1218; --ink-700:#141A22;
  --ink-600:#1B232C; --ink-500:#222C37;
  --line:#242E39; --line-soft:#161E27; --line-hair:#121920;
  --chrome-100:#EEF3F8; --chrome-300:#C3CFDB;
  --steel-400:#8494A3; --steel-500:#5C6875; --steel-600:#414C57;
  --amber:#F2A007; --amber-700:#A96F05;
  --sheen: linear-gradient(100deg,#5E6B78 0%,#AFBCC8 12%,#F6FAFE 24%,#8794A2 36%,#E6EDF4 48%,#6E7C8A 62%,#F4F8FC 76%,#93A1AF 88%,#5E6B78 100%);

  --font-display:"Helvetica Neue","Arial Narrow",Helvetica,Arial,sans-serif;
  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --font-quote:Georgia,"Times New Roman",serif;

  --gut:clamp(22px,5vw,80px);
  --maxw:1340px;
  --band:clamp(64px,8.4vw,128px);
}

/* ============================================================
   2. BASE
   ============================================================ */
html{color-scheme:dark}
body{
  background:var(--ink-900);
  color:var(--chrome-300);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body a{color:inherit;text-decoration:none}
body :focus-visible{outline:2px solid var(--amber);outline-offset:4px}
body p{margin:0}
img{max-width:100%;height:auto}

/* Elementor container defaults — the design does its own spacing */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con{--container-max-width:var(--maxw)}
.e-con-inner{padding-inline:0}
.elementor-widget:not(:last-child){margin-block-end:0}

/* the standard page gutter */
.mge-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.mge-full{width:100%}

/* ============================================================
   3. TYPE
   ============================================================ */
body h1,body h2,body h3,
.mge-h1,.mge-h2,.mge-h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-stretch:condensed;
  text-transform:uppercase;
  color:var(--chrome-100);
  text-wrap:balance;
}
body h1,.mge-h1{font-size:clamp(38px,6vw,88px);line-height:.9;letter-spacing:-.034em}
body h2,.mge-h2{font-size:clamp(26px,3.8vw,48px);line-height:.99;letter-spacing:-.024em}
body h3,.mge-h3{font-size:clamp(16px,1.5vw,20px);line-height:1.14;letter-spacing:.005em}

.mge-eyebrow{
  display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber);
}
.mge-eyebrow.is-cool{color:var(--steel-500)}
.mge-label{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-500);
}
.mge-lede,.mge-lede p{font-size:clamp(15.5px,1.3vw,18.5px);line-height:1.72;color:var(--chrome-300)}
.mge-lede{max-width:50ch}
.mge-body,.mge-body p{font-size:15px;line-height:1.8;color:var(--steel-400)}
.mge-body{max-width:56ch}
.mge-body.is-small,.mge-body.is-small p{font-size:14px}
.mge-quote,.mge-quote p{
  font-family:var(--font-quote);font-style:italic;
  font-size:clamp(22px,3vw,38px);line-height:1.34;color:var(--chrome-100);letter-spacing:-.01em;
}
.mge-quote{max-width:20ch}
.mge-num{font-variant-numeric:tabular-nums}

/* the chrome specular headline */
.mge-chrome{
  background:var(--sheen);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:mge-sheen 26s ease-in-out infinite alternate;
}
@keyframes mge-sheen{from{background-position:8% 50%}to{background-position:92% 50%}}

/* ============================================================
   4. BUTTONS & LINKS
   ============================================================ */
.mge-btn .elementor-button,
a.mge-btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:17px 28px;background:var(--amber);color:#120C01;border:1px solid var(--amber);
  border-radius:0;fill:#120C01;
  transition:background .25s,color .25s;
}
.mge-btn .elementor-button:hover,a.mge-btn:hover{background:transparent;color:var(--amber)}
.mge-btn-ghost .elementor-button,a.mge-btn-ghost{
  background:transparent;color:var(--chrome-300);border-color:var(--line);
}
.mge-btn-ghost .elementor-button:hover,a.mge-btn-ghost:hover{border-color:var(--chrome-300);color:var(--chrome-100)}
.elementor-button-icon{display:none}

.mge-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chrome-100);
}
.mge-arrow em{font-style:normal;transition:transform .3s cubic-bezier(.2,.7,.25,1)}
.mge-arrow:hover em{transform:translateX(7px)}

/* ============================================================
   5. SPACING BANDS
   ============================================================ */
.mge-band{padding-block:var(--band)}
.mge-band.is-tight{padding-block:clamp(46px,5.6vw,84px)}
.mge-band.is-flush-top{padding-top:0}
.mge-hair{display:block;height:1px;background:var(--line-hair);width:100%}
.mge-rule-top{border-top:1px solid var(--line-hair)}
.mge-rule-top-strong{border-top:1px solid var(--line)}

/* ============================================================
   6. PHOTO PLATES
   ============================================================ */
.mge-plate{position:relative;overflow:hidden;background:var(--ink-800)}
.mge-plate img,
.mge-plate .elementor-widget-image img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.6) contrast(1.14) brightness(.66);
  transition:transform 1.4s cubic-bezier(.2,.7,.25,1),filter .6s;
}
.mge-plate.is-warm img,
.mge-plate.is-warm .elementor-widget-image img{filter:grayscale(.22) contrast(1.08) brightness(.76)}
.mge-plate:hover img{transform:scale(1.045)}
.mge-plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,12,16,.66),transparent 56%);
}
.mge-plate .elementor-widget-image,
.mge-plate .elementor-image,
.mge-plate figure{height:100%;margin:0}
.mge-plate.r-tall{aspect-ratio:4/5}
.mge-plate.r-four{aspect-ratio:4/3}
.mge-plate.r-w16{aspect-ratio:16/9}
.mge-plate.r-sq{aspect-ratio:1/1}
.mge-plate.r-2x1{aspect-ratio:2/1}
.mge-plate.r-banner{min-height:clamp(280px,34vw,440px)}
.mge-cap{
  position:absolute;left:18px;bottom:14px;z-index:2;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel-400);
}
.mge-cap.is-right{left:auto;right:var(--gut);bottom:20px}

/* ============================================================
   7. READOUT (stat strip)
   ============================================================ */
.mge-readout{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.mge-readout-in{display:grid;grid-template-columns:repeat(4,1fr)}
.mge-stat{
  padding:clamp(20px,2.4vw,32px) 0;padding-right:20px;
  border-left:1px solid var(--line-soft);padding-left:clamp(18px,2.2vw,32px);
}
.mge-stat:first-child{border-left:0;padding-left:0}
.mge-stat b{
  display:block;font-family:var(--font-display);font-weight:800;font-stretch:condensed;
  font-size:clamp(22px,2.6vw,36px);line-height:1;color:var(--chrome-100);
  letter-spacing:-.01em;margin-bottom:9px;font-variant-numeric:tabular-nums;
}
.mge-stat span{
  display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-500);
}
@media (max-width:760px){
  .mge-readout-in{grid-template-columns:1fr 1fr}
  .mge-stat:nth-child(odd){border-left:0;padding-left:0}
  .mge-stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

/* ============================================================
   8. CAPABILITY INDEX
   ============================================================ */
.mge-idx{display:grid}
.mge-idx a{
  display:grid;grid-template-columns:96px 1fr 1.35fr auto;
  gap:clamp(16px,3vw,44px);align-items:center;
  padding-block:clamp(18px,2.2vw,26px);
  padding-inline:clamp(10px,1.2vw,18px);
  margin-inline:calc(-1 * clamp(10px,1.2vw,18px));
  border-top:1px solid var(--line-hair);transition:background .35s;
}
.mge-idx a:last-child{border-bottom:1px solid var(--line-hair)}
.mge-idx a:hover{background:rgba(196,208,220,.028)}
.mge-idx .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-800)}
.mge-idx .thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.66) contrast(1.14) brightness(.62);
  transition:transform 1s cubic-bezier(.2,.7,.25,1),filter .5s;
}
.mge-idx a:hover .thumb img{transform:scale(1.09);filter:grayscale(.2) contrast(1.1) brightness(.82)}
.mge-idx .thumb b{
  position:absolute;left:6px;top:4px;z-index:2;font-family:var(--font-mono);
  font-size:8.5px;font-weight:400;letter-spacing:.14em;color:var(--chrome-100);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.mge-idx .t{
  font-family:var(--font-display);font-weight:800;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(19px,2.2vw,28px);line-height:1.06;color:var(--chrome-100);letter-spacing:-.005em;
}
.mge-idx .d{font-size:14px;line-height:1.74;color:var(--steel-500)}
.mge-idx .s{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);white-space:nowrap;text-align:right;
  display:flex;align-items:baseline;gap:10px;justify-content:flex-end;
}
.mge-idx .s em{font-style:normal;transition:transform .3s cubic-bezier(.2,.7,.25,1)}
.mge-idx a:hover .s em{transform:translateX(7px)}
@media (max-width:900px){
  .mge-idx a{grid-template-columns:74px 1fr;gap:6px 18px;align-items:start}
  .mge-idx .d,.mge-idx .s{grid-column:2}
  .mge-idx .s{text-align:left;justify-content:flex-start}
}

/* ============================================================
   9. SPEC TABLES
   ============================================================ */
.mge-tab{width:100%;border-collapse:collapse}
.mge-tab th,.mge-tab td{text-align:left;padding:15px 0;border-top:1px solid var(--line-hair);vertical-align:top}
.mge-tab tr:last-child th,.mge-tab tr:last-child td{border-bottom:1px solid var(--line-hair)}
.mge-tab th{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-500);font-weight:400;width:54%;padding-right:20px;
}
.mge-tab td{
  font-family:var(--font-mono);font-size:13px;color:var(--chrome-100);text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.mge-tab.is-left td{
  text-align:left;font-family:var(--font-body);font-size:13.5px;color:var(--steel-400);letter-spacing:0;
}

/* ============================================================
   10. HAIRLINE LIST
   ============================================================ */
.mge-hlist{list-style:none;margin:0;padding:0;display:grid}
.mge-hlist li{
  padding-block:15px;border-top:1px solid var(--line-hair);
  font-size:14.5px;color:var(--chrome-300);display:flex;gap:15px;align-items:baseline;
}
.mge-hlist li:last-child{border-bottom:1px solid var(--line-hair)}
.mge-hlist li::before{
  content:"";display:block;width:5px;height:5px;background:var(--amber);
  flex:none;transform:translateY(-3px);
}
.mge-hlist.is-plain li::before{background:var(--steel-600)}

/* Elementor icon-list styled as the hairline list */
.mge-hlist .elementor-icon-list-items{list-style:none;margin:0;padding:0;display:grid}
.mge-hlist .elementor-icon-list-item{
  padding-block:15px;border-top:1px solid var(--line-hair);
  font-size:14.5px;color:var(--chrome-300);
}
.mge-hlist .elementor-icon-list-item:last-child{border-bottom:1px solid var(--line-hair)}
.mge-hlist .elementor-icon-list-icon{display:none}

/* uppercase mono variant used in the vertical split */
.mge-vlist{list-style:none;margin:4px 0 0;padding:0;display:grid}
.mge-vlist li{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-400);padding-block:11px;border-top:1px solid var(--line-hair);
  display:flex;gap:13px;align-items:baseline;
}
.mge-vlist li:last-child{border-bottom:1px solid var(--line-hair)}
.mge-vlist li::before{content:"";display:block;width:5px;height:5px;background:var(--steel-600);flex:none;transform:translateY(-2px)}
.mge-lift-col .mge-vlist li::before{background:var(--amber)}

/* ============================================================
   11. PROCESS STEPS
   ============================================================ */
.mge-steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-hair);
  border-block:1px solid var(--line-hair);
}
.mge-steps > div{
  background:var(--ink-900);padding:clamp(22px,2.8vw,32px) clamp(14px,1.6vw,22px);
  display:grid;gap:11px;align-content:start;
}
.mge-steps .n{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:var(--amber)}
.mge-steps b{
  font-family:var(--font-display);font-weight:800;font-stretch:condensed;text-transform:uppercase;
  font-size:15px;color:var(--chrome-100);letter-spacing:.015em;
}
.mge-steps p{font-size:12.5px;line-height:1.68;color:var(--steel-500)}
@media (max-width:900px){.mge-steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.mge-steps{grid-template-columns:1fr}}

/* ============================================================
   12. CHIPS
   ============================================================ */
.mge-chips{display:flex;flex-wrap:wrap;gap:11px}
.mge-chips span,.mge-chips a{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-400);border:1px solid var(--line);padding:11px 18px;
  transition:border-color .3s,color .3s;
}
.mge-chips span:hover,.mge-chips a:hover{border-color:var(--steel-500);color:var(--chrome-300)}
.mge-chips .is-on{color:#120C01;background:var(--amber);border-color:var(--amber)}

/* ============================================================
   13. LIFTING VERTICAL
   ============================================================ */
.mge-chev{height:10px;background:repeating-linear-gradient(-45deg,var(--amber) 0 14px,var(--ink-900) 14px 28px)}
.mge-lift-band{
  background:
    radial-gradient(880px 500px at 80% 22%, rgba(242,160,7,.1), transparent 66%),
    linear-gradient(180deg,var(--ink-850),var(--ink-900) 76%);
}
.mge-lift-col{background:linear-gradient(180deg,rgba(242,160,7,.07),transparent 58%)}
.mge-lift-col .mge-arrow{color:var(--amber)}
.mge-cap-rule{display:block;height:2px;width:56px;background:var(--sheen)}
.mge-cap-rule.is-hazard{
  background:repeating-linear-gradient(-45deg,var(--amber) 0 7px,transparent 7px 14px);
  height:8px;width:84px;
}
.mge-crane-svg{display:block;width:100%;height:auto}

/* ============================================================
   14. HERO VIEWPORT (scroll-driven cylinder)
   ============================================================ */
.mge-vp{
  position:relative;border:1px solid var(--line);background:var(--ink-850);
  aspect-ratio:1/.92;overflow:hidden;isolation:isolate;
}
@media (max-width:1000px){.mge-vp{aspect-ratio:1/.78}}
.mge-vp-photo{
  position:absolute;inset:-6% -4%;background-size:cover;background-position:52% 62%;
  filter:grayscale(.42) contrast(1.16) brightness(.5) sepia(.22);
  opacity:.62;will-change:transform;
  -webkit-mask-image:linear-gradient(0deg,#000 6%,rgba(0,0,0,.28) 62%,transparent 92%);
  mask-image:linear-gradient(0deg,#000 6%,rgba(0,0,0,.28) 62%,transparent 92%);
}
.mge-vp-veil{position:absolute;inset:0;background:linear-gradient(200deg,rgba(11,15,20,.94),rgba(11,15,20,.42) 46%,rgba(9,12,16,.86))}
.mge-vp-grid{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(196,208,220,.045) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(0deg,rgba(196,208,220,.045) 0 1px,transparent 1px 44px);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 46%,#000,transparent 78%);
  mask-image:radial-gradient(90% 80% at 50% 46%,#000,transparent 78%);
}
.mge-vp-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mge-vp-tick{position:absolute;width:16px;height:16px;border:1px solid var(--steel-600)}
.mge-vp-tick.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.mge-vp-tick.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.mge-vp-tick.bl{bottom:12px;left:12px;border-right:0;border-top:0}
.mge-vp-tick.br{bottom:12px;right:12px;border-left:0;border-top:0}
.mge-vp-tag{
  position:absolute;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-500);
}
.mge-vp-tag.a{top:15px;left:38px}
.mge-vp-tag.b{top:15px;right:38px;display:flex;align-items:center;gap:7px;color:var(--amber)}
.mge-vp-tag.b i{width:5px;height:5px;background:var(--amber);display:block;animation:mge-blip 2.6s ease-in-out infinite}
@keyframes mge-blip{0%,100%{opacity:1}50%{opacity:.25}}
.mge-vp-foot{position:absolute;left:38px;right:38px;bottom:16px;display:flex;align-items:center;gap:14px}
.mge-vp-foot .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-500)}
.mge-vp-foot .v{font-family:var(--font-mono);font-size:13px;color:var(--chrome-100);font-variant-numeric:tabular-nums;letter-spacing:.05em}
.mge-vp-foot .u{font-family:var(--font-mono);font-size:8.5px;color:var(--steel-500);letter-spacing:.14em}
.mge-vp-foot .bar{flex:1;height:1px;background:var(--line);position:relative;min-width:40px}
.mge-vp-foot .bar i{position:absolute;inset:0 auto 0 0;width:8%;background:var(--amber);display:block}
.mge-spin{transform-box:fill-box;transform-origin:center;animation:mge-spin 54s linear infinite}
@keyframes mge-spin{to{transform:rotate(360deg)}}

/* hero ambience */
.mge-hero{position:relative;overflow:hidden}
.mge-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg,rgba(196,208,220,.05) 0 1px,transparent 1px 4px);
  -webkit-mask-image:radial-gradient(110% 80% at 26% 46%,#000 0%,transparent 70%);
  mask-image:radial-gradient(110% 80% at 26% 46%,#000 0%,transparent 70%);
}
.mge-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(700px 480px at 84% 62%, rgba(242,160,7,.13), transparent 66%),
    radial-gradient(720px 500px at 2% 6%, rgba(140,180,220,.07), transparent 62%);
}
.mge-hero > *{position:relative;z-index:2}
.mge-page-hero{position:relative;overflow:hidden}
.mge-page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(620px 420px at 88% 20%, rgba(242,160,7,.085), transparent 66%),
    radial-gradient(640px 440px at 0% 0%, rgba(140,180,220,.06), transparent 62%);
}
.mge-page-hero > *{position:relative;z-index:2}

/* ============================================================
   15. MOTION
   ============================================================ */
@keyframes mge-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.mge-rise{animation:mge-rise 1s cubic-bezier(.2,.7,.25,1) both}
.mge-rv{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.25,1)}
.mge-rv.is-in{opacity:1;transform:none}

/* ============================================================
   16. BREADCRUMB + SUB NAV
   ============================================================ */
.mge-crumb{
  display:flex;align-items:center;gap:12px;padding-block:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-600);border-bottom:1px solid var(--line-hair);
}
.mge-crumb a{color:var(--steel-400)}
.mge-crumb a:hover{color:var(--chrome-100)}
.mge-crumb .now{color:var(--chrome-100)}
.mge-subnav{border-bottom:1px solid var(--line-hair);overflow-x:auto}
.mge-subnav-in{display:flex;min-width:max-content}
.mge-subnav a{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel-500);padding:16px 0;margin-right:clamp(18px,2.6vw,36px);
  border-bottom:1px solid transparent;white-space:nowrap;
  transition:color .22s,border-color .22s;
}
.mge-subnav a:hover{color:var(--chrome-300)}
.mge-subnav a.is-on{color:var(--amber);border-bottom-color:var(--amber)}

/* ============================================================
   17. CONTACT BITS
   ============================================================ */
.mge-tel{
  display:block;font-family:var(--font-display);font-weight:800;font-stretch:condensed;
  font-size:clamp(28px,4.2vw,54px);line-height:1;letter-spacing:-.02em;color:var(--chrome-100);
  font-variant-numeric:tabular-nums;transition:color .25s;
}
.mge-tel:hover{color:var(--amber)}
.mge-mail{
  display:block;font-family:var(--font-mono);font-size:clamp(12px,1.2vw,15px);
  letter-spacing:.03em;color:var(--steel-400);word-break:break-all;transition:color .25s;
}
.mge-mail:hover{color:var(--chrome-100)}
.mge-addr{display:grid;gap:22px}
.mge-addr .row{display:grid;gap:7px;border-top:1px solid var(--line-hair);padding-top:16px}
.mge-addr .row p{font-size:14px;line-height:1.68;color:var(--steel-400)}
.mge-gstin{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--chrome-300)}
.mge-map{
  height:clamp(220px,26vw,340px);border:1px solid var(--line);position:relative;overflow:hidden;
}
.mge-map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.86)}

/* ============================================================
   18. FLUENT FORMS — styled to the design
   ============================================================ */
.fluentform .ff-el-group{margin-bottom:18px}
.fluentform .ff-el-input--label label{
  font-family:var(--font-mono)!important;font-size:9.5px!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:var(--steel-500)!important;font-weight:400!important;
  margin-bottom:8px!important;
}
.fluentform .ff-el-form-control{
  background:var(--ink-850)!important;border:1px solid var(--line)!important;border-radius:0!important;
  padding:14px 15px!important;font-size:14.5px!important;color:var(--chrome-100)!important;
  font-family:var(--font-body)!important;box-shadow:none!important;transition:border-color .25s;
}
.fluentform .ff-el-form-control:focus{border-color:var(--amber)!important;outline:none!important}
.fluentform .ff-el-form-control::placeholder{color:var(--steel-600)!important}
.fluentform select.ff-el-form-control{color:var(--chrome-100)!important}
.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit{
  background:var(--amber)!important;color:#120C01!important;border:1px solid var(--amber)!important;
  border-radius:0!important;font-family:var(--font-mono)!important;font-size:10.5px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;padding:17px 28px!important;
  box-shadow:none!important;transition:background .25s,color .25s;
}
.fluentform .ff-btn-submit:hover{background:transparent!important;color:var(--amber)!important}
.fluentform .ff-el-is-error .ff-el-form-control{border-color:#B0442A!important}
.fluentform .error-text,.fluentform .text-danger{color:#D9634A!important;font-size:12px!important}
.ff-message-success{
  background:transparent!important;border:1px solid var(--amber)!important;color:var(--chrome-100)!important;
  border-radius:0!important;padding:18px 20px!important;
}

/* ============================================================
   19. HEADER / FOOTER (HFE templates)
   ============================================================ */
.mge-header{
  background:rgba(9,12,16,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.mge-header.is-stuck{border-bottom-color:var(--line-soft);background:rgba(9,12,16,.94)}
.ehf-header .elementor-sticky--effects .mge-header{background:rgba(9,12,16,.94)}
.mge-lock{display:flex;align-items:center;gap:13px}
.mge-lock .wm{
  display:block;font-family:var(--font-display);font-weight:800;font-stretch:condensed;
  font-size:23px;line-height:.84;letter-spacing:.01em;color:var(--chrome-100);
}
.mge-lock .sm{
  display:block;font-family:var(--font-mono);font-size:7px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--steel-500);margin-top:4px;
}
/* HFE navigation menu */
.hfe-nav-menu__layout-horizontal .hfe-nav-menu__toggle-icon,
.hfe-nav-menu .menu-item a.hfe-menu-item{
  font-family:var(--font-mono)!important;font-size:10px!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:var(--steel-400)!important;
  padding:5px 0!important;border-bottom:1px solid transparent!important;
  transition:color .22s,border-color .22s;
}
.hfe-nav-menu .menu-item a.hfe-menu-item:hover{color:var(--chrome-100)!important}
.hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item,
.hfe-nav-menu .menu-item.current-menu-ancestor > a.hfe-menu-item{
  color:var(--chrome-100)!important;border-bottom-color:var(--amber)!important;
}
.hfe-nav-menu li.menu-item{margin-right:clamp(15px,2.2vw,30px)}
.hfe-nav-menu .sub-menu{background:var(--ink-800)!important;border:1px solid var(--line)!important}
.hfe-nav-menu .sub-menu a.hfe-menu-item{padding:11px 16px!important;border-bottom:0!important}
.mge-hd-tel{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chrome-100);border:1px solid var(--line);padding:11px 18px;white-space:nowrap;
  transition:border-color .22s;
}
.mge-hd-tel:hover{border-color:var(--amber)}

.mge-footer{border-top:1px solid var(--line);background:var(--ink-850)}
.mge-footer .ft-col b{
  display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-600);margin-bottom:20px;
}
.mge-footer .fl{display:grid;gap:11px}
.mge-footer .fl a,.mge-footer .fl span{
  font-size:13.5px;color:var(--steel-400);line-height:1.6;transition:color .22s;
}
.mge-footer .fl a:hover{color:var(--chrome-100)}
.mge-footer .mo{
  font-family:var(--font-mono);font-size:12.5px;color:var(--chrome-300);
  letter-spacing:.03em;line-height:1.75;
}
.mge-footer-bar{display:flex;gap:22px;flex-wrap:wrap;padding-block:22px;border-top:1px solid var(--line-hair)}
.mge-footer-bar span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel-600);
}
.mge-footer-bar span:last-child{margin-left:auto}
@media (max-width:820px){.mge-footer-bar span:last-child{margin-left:0}}

/* ============================================================
   20. GALLERY GRID
   ============================================================ */
.mge-gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.3vw,16px)}
.mge-gal > *{grid-column:span 4}
.mge-gal > .w3{grid-column:span 3}
.mge-gal > .w5{grid-column:span 5}
.mge-gal > .w6{grid-column:span 6}
.mge-gal > .w7{grid-column:span 7}
.mge-gal > .w8{grid-column:span 8}
@media (max-width:820px){
  .mge-gal > *{grid-column:span 6}
  .mge-gal > .w7,.mge-gal > .w5,.mge-gal > .w8{grid-column:span 12}
}

/* ============================================================
   21. ADMIN BAR + REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .mge-rv{opacity:1!important;transform:none!important}
  .mge-chrome{background-position:50% 50%}
}

/* ============================================================
   22. LAYOUT UTILITIES
   These carry `.e-con` duplicates so they beat Elementor's own
   `display:flex` on containers without resorting to !important.
   ============================================================ */
.mge-two,.e-con.mge-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5.2vw,88px)}
.mge-two.is-lean,.e-con.mge-two.is-lean{grid-template-columns:.8fr 1.2fr}
.mge-two.is-lean-r,.e-con.mge-two.is-lean-r{grid-template-columns:1.2fr .8fr}
.mge-two.is-wide-l,.e-con.mge-two.is-wide-l{grid-template-columns:1.18fr .82fr}
.mge-two.is-fab,.e-con.mge-two.is-fab{grid-template-columns:1.3fr .7fr;gap:0}
.mge-three,.e-con.mge-three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4.2vw,64px)}
.mge-pair,.e-con.mge-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.mge-pair.is-flush,.e-con.mge-pair.is-flush{gap:0}
.mge-stack,.e-con.mge-stack{display:grid;gap:20px;align-content:start}
.mge-stack.is-lg,.e-con.mge-stack.is-lg{gap:30px}
.mge-stack.is-sm,.e-con.mge-stack.is-sm{gap:12px}
.mge-row,.e-con.mge-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mge-btns,.e-con.mge-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mge-verts,.e-con.mge-verts{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-hair);border-bottom:1px solid var(--line-hair)}
.mge-verts > *{padding:clamp(28px,3.2vw,44px) var(--gut) clamp(40px,5vw,76px)}
.mge-verts > * + *{border-left:1px solid var(--line-hair)}
.mge-hero-grid,.e-con.mge-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.4vw,72px);align-items:center}
.mge-align-center,.e-con.mge-align-center{align-items:center}
.mge-align-end,.e-con.mge-align-end{align-items:end}

@media (max-width:1000px){
  .mge-hero-grid,.e-con.mge-hero-grid{grid-template-columns:1fr;gap:38px}
}
@media (max-width:860px){
  .mge-two,.e-con.mge-two,
  .mge-two.is-lean,.e-con.mge-two.is-lean,
  .mge-two.is-lean-r,.e-con.mge-two.is-lean-r,
  .mge-two.is-wide-l,.e-con.mge-two.is-wide-l,
  .mge-two.is-fab,.e-con.mge-two.is-fab,
  .mge-three,.e-con.mge-three,
  .mge-verts,.e-con.mge-verts{grid-template-columns:1fr}
  .mge-verts > * + *{border-left:0;border-top:1px solid var(--line-hair)}
}
@media (max-width:700px){
  .mge-pair,.e-con.mge-pair{grid-template-columns:1fr}
}

/* Elementor resets so widgets sit flush inside our grids */
.e-con,.e-con-inner{--padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0}
.mge-plate .elementor-widget-container{height:100%}

/* ============================================================
   23. PLATE WITH TEXT OVERLAY (full-bleed banners)
   ============================================================ */
.mge-plate.has-overlay,.e-con.mge-plate.has-overlay{display:flex;align-items:flex-end}
.mge-plate.has-overlay > .elementor-widget-image{position:absolute;inset:0;width:100%;height:100%;margin:0}
.mge-plate.has-overlay > *:not(.elementor-widget-image){position:relative;z-index:2;width:100%}
.mge-plate.has-overlay::after{
  background:linear-gradient(90deg,rgba(9,12,16,.92),rgba(9,12,16,.3) 54%,rgba(9,12,16,.74)),
             linear-gradient(0deg,rgba(9,12,16,.82),transparent 60%);
}
.mge-overlay-copy{padding-block:clamp(76px,9.4vw,140px) clamp(36px,4.4vw,64px)}

/* ============================================================
   24. SPECIFICITY GUARDS
   Elementor writes padding on `.e-con` from CSS custom properties.
   These duplicates make sure the design's own spacing wins.
   ============================================================ */
.e-con.mge-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.e-con.mge-band{padding-block:var(--band)}
.e-con.mge-band.is-tight{padding-block:clamp(46px,5.6vw,84px)}
.e-con.mge-band.is-flush-top{padding-top:0}
.e-con.mge-verts > *{padding:clamp(28px,3.2vw,44px) var(--gut) clamp(40px,5vw,76px)}
.e-con.mge-overlay-copy{padding-block:clamp(76px,9.4vw,140px) clamp(36px,4.4vw,64px)}
.e-con.mge-plate{overflow:hidden}
.e-con.mge-gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.3vw,16px)}
.e-con.mge-gal > *{grid-column:span 4}
.e-con.mge-gal > .w3{grid-column:span 3}
.e-con.mge-gal > .w5{grid-column:span 5}
.e-con.mge-gal > .w6{grid-column:span 6}
.e-con.mge-gal > .w7{grid-column:span 7}
.e-con.mge-gal > .w4{grid-column:span 4}
@media (max-width:820px){
  .e-con.mge-gal > *{grid-column:span 6}
  .e-con.mge-gal > .w7,.e-con.mge-gal > .w5{grid-column:span 12}
}

/* ============================================================
   25. HEADING WIDGET NORMALISATION
   Elementor wraps headings; make sure the design's own scale wins
   and keep the hero headline to a deliberate measure.
   ============================================================ */
.elementor-widget-heading .elementor-heading-title{
  font-family:inherit;font-weight:inherit;font-size:inherit;
  line-height:inherit;letter-spacing:inherit;color:inherit;
}
.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(38px,6vw,88px);line-height:.9;letter-spacing:-.034em}
.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(26px,3.8vw,48px);line-height:.99;letter-spacing:-.024em}
.elementor-widget-heading h3.elementor-heading-title{font-size:clamp(16px,1.5vw,20px);line-height:1.14;letter-spacing:.005em}
.elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-display);font-weight:800;font-stretch:condensed;
  text-transform:uppercase;color:var(--chrome-100);
}
/* the eyebrow / label variants are spans, not display type */
.mge-eyebrow .elementor-heading-title,
.mge-label .elementor-heading-title{
  font-family:var(--font-mono);font-weight:400;font-stretch:normal;
  font-size:inherit;line-height:1.5;letter-spacing:inherit;
  text-transform:uppercase;color:inherit;
}
.mge-hero h1,.mge-hero .elementor-widget-heading h1{max-width:13ch}

/* The Elementor button *wrapper* must stay transparent — only the inner
   <a class="elementor-button"> carries the button skin. */
.elementor-widget-button.mge-btn{background:none;border:0;padding:0;display:inline-flex}
.elementor-widget-button.mge-btn .elementor-button-content-wrapper{gap:0}
.elementor-widget-button .elementor-button-text{font:inherit;letter-spacing:inherit}

/* ============================================================
   26. HFE HEADER / FOOTER LAYOUT
   ============================================================ */
.ehf-header{position:sticky;top:0;z-index:99}
.ehf-header .site-header,.ehf-header header{background:transparent;border:0}
.e-con.mge-header-in{display:flex;align-items:center;gap:clamp(18px,3.2vw,46px);padding-block:18px}
.mge-header-in > .elementor-widget-navigation-menu{margin-left:auto}
.mge-header-in .hfe-nav-menu__layout-horizontal .hfe-nav-menu{align-items:center}
.mge-header-in .elementor-widget-html{display:flex;align-items:center}
.e-con.mge-footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(30px,4.4vw,68px);padding-block:clamp(44px,5.6vw,80px);
}
@media (max-width:820px){.e-con.mge-footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.e-con.mge-footer-grid{grid-template-columns:1fr}}
.mge-footer .mge-lock{margin-bottom:20px}
/* HFE mobile toggle */
.hfe-nav-menu__toggle .hfe-nav-menu-icon{color:var(--chrome-100)!important}
.hfe-nav-menu .sub-menu li a.hfe-sub-menu-item{
  font-family:var(--font-mono)!important;font-size:10px!important;letter-spacing:.14em!important;
  text-transform:uppercase!important;color:var(--steel-400)!important;padding:12px 16px!important;
}
.hfe-nav-menu .sub-menu li a.hfe-sub-menu-item:hover{color:var(--chrome-100)!important;background:var(--ink-700)!important}

/* ============================================================
   27. FLEX DIRECTION GUARDS
   Elementor containers default to `flex-direction: column`, so every
   horizontal utility has to say so explicitly.
   ============================================================ */
.e-con.mge-row,.e-con.mge-btns,.e-con.mge-header-in{flex-direction:row}
.e-con.mge-btns{align-items:center;flex-wrap:wrap;gap:14px}
.e-con.mge-row{align-items:center;flex-wrap:wrap;gap:14px}
.e-con.mge-header-in{align-items:center;flex-wrap:nowrap}
.e-con.mge-btns > .elementor-widget{width:auto;flex:0 0 auto}
.e-con.mge-row > .elementor-widget{width:auto}
.e-con.mge-header-in > .elementor-widget{width:auto;flex:0 0 auto}
.e-con.mge-header-in > .elementor-widget-navigation-menu{flex:1 1 auto;margin-left:auto;display:flex;justify-content:flex-end}
@media (max-width:1080px){
  .e-con.mge-header-in > .elementor-widget-html:last-child{display:none}
}

/* ============================================================
   28. HOMEPAGE SECTION RAIL
   ============================================================ */
.mge-rail{
  position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:60;
  display:none;flex-direction:column;
}
@media (min-width:1500px){.mge-rail{display:flex}}
.mge-rail a{
  display:flex;align-items:center;gap:12px;padding:6px 0;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
  color:var(--steel-600);transition:color .3s;
}
.mge-rail a i{display:block;width:14px;height:1px;background:var(--steel-600);
  transition:width .35s cubic-bezier(.2,.7,.25,1),background .3s}
.mge-rail a span{opacity:0;transform:translateX(-4px);white-space:nowrap;
  text-transform:uppercase;transition:opacity .3s,transform .3s}
.mge-rail a:hover span,.mge-rail a.is-on span{opacity:1;transform:none}
.mge-rail a.is-on{color:var(--amber)}
.mge-rail a.is-on i{width:30px;background:var(--amber)}

/* ============================================================
   29. DESIGN FIDELITY
   Values measured directly against the approved drafts.
   Base scale = draft 05 (inner pages); the homepage runs draft 04's
   slightly larger scale, scoped with body.home.
   ============================================================ */

/* Elementor forces max-width:100% onto direct widget children, which throws
   away the measure the design depends on. Restore it at higher specificity. */
/* Elementor forces this with `.elementor.elementor .e-con > .elementor-widget`
   (specificity 0,4,0), so the override has to out-rank that deliberately
   inflated selector rather than merely match it. */
.elementor.elementor .e-con > .elementor-widget.mge-lede{max-width:50ch}
.elementor.elementor .e-con > .elementor-widget.mge-body{max-width:56ch}
.elementor.elementor .e-con > .elementor-widget.mge-quote{max-width:20ch}

/* Hero rhythm — homepage */
.e-con.mge-hero{padding-top:clamp(26px,4vw,54px)}
.e-con.mge-hero-grid{
  padding-block:clamp(28px,3.6vw,52px) clamp(34px,4.4vw,64px);
  gap:clamp(30px,4.4vw,72px);
}

/* Hero rhythm — inner pages (this was missing entirely) */
.e-con.mge-page-hero{padding-block:clamp(48px,7vw,110px) clamp(34px,4.6vw,66px)}
.e-con.mge-page-hero > .mge-wrap{padding-block:0}

/* ---------- homepage: draft 04 scale ---------- */
body.home{--band:clamp(72px,9.4vw,144px)}
body.home .e-con.mge-band.is-tight{padding-block:clamp(50px,6.2vw,92px)}

body.home h1,
body.home .elementor-widget-heading h1.elementor-heading-title{
  font-size:clamp(38px,5.4vw,80px);line-height:.92;letter-spacing:-.032em;
}
body.home h2,
body.home .elementor-widget-heading h2.elementor-heading-title{
  font-size:clamp(27px,4.1vw,52px);line-height:.98;letter-spacing:-.025em;
}
body.home h3,
body.home .elementor-widget-heading h3.elementor-heading-title{
  font-size:clamp(17px,1.6vw,21px);line-height:1.12;letter-spacing:.005em;
}

body.home .e-con.mge-two{gap:clamp(32px,5.6vw,96px)}
body.home .e-con.mge-three{gap:clamp(28px,4.4vw,68px)}

body.home .mge-stat{padding-block:clamp(18px,2.2vw,28px)}
body.home .mge-stat b{font-size:clamp(21px,2.5vw,33px);margin-bottom:8px}

body.home .mge-quote,body.home .mge-quote p{font-size:clamp(23px,3.2vw,40px)}
body.home .elementor.elementor .e-con > .elementor-widget.mge-lede{max-width:48ch}

/* `.mge-wrap` is used on containers *and* on a few HTML widgets (the stat
   readouts). Elementor's inflated selector strips max-width from widgets, so
   the widget case needs restating above it. */
.elementor.elementor .e-con > .elementor-widget.mge-wrap{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}

/* ============================================================
   30. HERO INTERNAL RHYTHM
   The drafts space hero internals with explicit margins rather than a
   uniform stack gap: eyebrow -> h1 = 20px, h1 -> lede = 20-30px,
   lede -> buttons = 24-38px. Reproduce that exactly.
   ============================================================ */
.e-con.mge-hero .e-con.mge-stack,
.e-con.mge-page-hero .e-con.mge-stack{row-gap:0}

.e-con.mge-hero .mge-eyebrow + *,
.e-con.mge-page-hero .mge-eyebrow + *{margin-top:20px}

.e-con.mge-hero .elementor-widget.mge-lede,
.e-con.mge-page-hero .elementor-widget.mge-lede{margin-top:clamp(20px,2.2vw,30px)}

.e-con.mge-hero .e-con.mge-btns{margin-top:clamp(26px,2.9vw,38px)}
.e-con.mge-page-hero .e-con.mge-btns{margin-top:clamp(24px,2.8vw,36px)}
.e-con.mge-page-hero .elementor-widget.mge-hero-chips{margin-top:clamp(24px,2.8vw,36px)}

/* Headline measures differ between the two heroes */
.mge-hero h1,.mge-hero .elementor-widget-heading h1{max-width:13ch}
.mge-page-hero h1,.mge-page-hero .elementor-widget-heading h1{max-width:15ch}

/* Fabrication page — the "typical scope" panel beside the photo.
   Draft 05: ink-850 ground, centred content, 20px gap, clamp padding. */
.e-con.mge-fab-scope{
  background:var(--ink-850);
  align-content:center;
  padding:clamp(28px,3.6vw,52px);
}
.e-con.mge-stack.mge-fab-scope{row-gap:20px}