/* == MCE Home Gateway =================================================
   One screen: a full-bleed photograph, screened, with the logo, the
   tagline and three five-sided doors on top.

   EVERY value below is a token the Design panel's Gateway section moves,
   so appearance is controlled from the panel, not from this file.

   The hover gradient is sampled from the MCE logo itself:
   #303078 -> #3030C0 -> #4890D8 -> #60C0F0.                             */

:root{
 /* ── background screen ── */
 --gate-screen-col:#0A1430;
 --gate-screen:0;              /* tint comes from her baked I3 shade   */
 --gate-screen-bottom:.22;     /* slightly deeper at the foot          */

 /* ── door 1, Data Centers: the logo's own blue ── */
 --gate-g1:#303078;
 --gate-g2:#3030C0;
 --gate-g3:#4890D8;
 --gate-g4:#60C0F0;
 /* ── door 2, Energy Storage: the same blue pushed to violet ── */
 --gate-p1:#2A2178;
 --gate-p2:#4B32C8;
 --gate-p3:#7B63E4;
 --gate-p4:#A794F7;
 /* ── door 3, Forensic Engineering: gold ── */
 --gate-gold1:#8A6415;
 --gate-gold2:#D9A63C;
 --gate-gold3:#F7DDA1;

 /* ── type ── */
 --gate-h1:#FFFFFF;
 --gate-name:#FFFFFF;
 --gate-fs-h1:45px;          /* baked: export 2                     */
 --gate-fs-name:30px;
 --gate-h1-drop-rgb:0,2,10;    /* baked: export 5                      */
 --gate-h1-drop:.7;            /* baked: export 5                      */

 /* ── doors ── */
 --gate-shot-w:355px;         /* baked: export 2 */
 --gate-ratio:1.064;           /* width:height — doors keep this shape  */
 --gate-peak:25%;              /* baked: export 2                      */
 --gate-edge:3px;              /* baked: export 4                      */
 --gate-gap:80px;             /* baked: export 4 */
 --gate-veil:.78;              /* baked: export 5                      */
 --gate-wave:5s;               /* gradient wave speed on hover          */

 /* ── logo — matched to the live page ── */
 --gate-logo-w:69px;         /* baked: Alicia export               */
 --gate-logo-top:31px;
 --gate-logo-x:0px;
 --gate-logo-col:996px;
 --gate-stack-gap:55px;       /* baked: export 2                      */
 --gate-row:1240px;           /* width the three doors may occupy     */
 --gate-pad-x:30px;           /* section side padding = logo min inset */
}

body.mce-gate-page{margin:0;background:var(--gate-screen-col)}

/* dvh so a mobile URL bar cannot leave a strip below the background.
   container-type makes #edWrap a size container, so the layout below responds
   to the WIDTH OF THIS ELEMENT rather than the viewport. That matters: the
   Design panel previews phone and iPad by setting max-width on #edWrap, which
   viewport media queries cannot see — the doors stayed in a row and the labels
   clipped. Container queries make the panel preview tell the truth. */
#edWrap{min-height:100vh;min-height:100dvh;display:block;font-family:var(--font);
  container-type:inline-size;container-name:gate}

/* min-height rather than flex:1 so the section GROWS with its content — the
   background is 100% of this box, so it can never come up short on a tall
   stacked layout. */
/* The section must never carry its own background: it would paint OVER the
   photograph, because .gate-bg sits at z-index -2 and a negative-z-index child
   renders behind its parent.s background. A panel colour set here once hid the
   image completely. Tint with the Gateway "Screen strength" instead. */
#edWrap .gate{background:none !important;background-color:transparent !important}
#edWrap .gate{position:relative;min-height:100vh;min-height:100dvh;
  box-sizing:border-box;display:flex;
  align-items:center;justify-content:center;padding:104px var(--gate-pad-x) 58px;
  overflow:visible}

/* ── full-bleed background ──
   Pinned to the VIEWPORT, not the section. Sized to the section it could come
   up short whenever the content ran taller than one screen — which is every
   phone, where the three doors stack — leaving a bare strip at the foot. Fixed
   means it always fills the screen no matter how far the page scrolls. */
#edWrap .gate-bg{position:absolute;top:-1px;left:-1px;
  width:calc(100% + 2px);height:calc(100% + 2px);display:block;z-index:0}
/* The background is structural. The panel's per-image shade / fit / height
   controls would paint over it and distort it — one saved experiment turned
   the photograph into a flat blue wash — so they are locked out here with a
   higher-specificity rule. Tint the background with the Gateway section's
   "Screen strength", which is the control meant for it. Swapping the photo
   from the panel still works. */
/* Sizing locked (full-bleed is the job); CROP is free — the panel emits
   object-fit with !important and nothing here may beat it. */
#edWrap .gate-bg.imgbox img{width:100% !important;height:100% !important;
  max-width:none !important;object-fit:cover;display:block;
  margin:0 !important}
#edWrap .gate-bg.imgbox{width:calc(100% + 2px) !important;max-width:none !important;
  margin:0 !important;border-radius:0 !important}
/* The shade stays yours to set from the panel — it is a real design control
   and it was taken away by mistake. Only the SIZING is locked above, because
   a full-bleed background has to cover the screen to do its job. */
#edWrap .gate-bg.imgbox .imgsc{position:absolute;inset:0;pointer-events:none;
  background:rgba(28,36,75,0)}
/* The screen tints, it does not black out.
   DELIBERATELY plain CSS: a solid colour at an opacity. The previous version
   used color-mix() with calc() percentages, which Chrome accepts and Safari
   rejects — so the screen was simply absent in Safari and its panel controls
   looked dead there, while every Chrome-based test passed. Nothing newer than
   2013-era CSS is allowed in this rule again. */
#edWrap .gate-screen{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--gate-screen-col);opacity:var(--gate-screen)}

/* content column is its own height and gets centred by .gate — no height:100%
   and no flex:1 below it, which inflated the section past one screen. */
#edWrap .gate .wrap{position:relative;z-index:2;box-sizing:border-box;width:100%;
  max-width:var(--gate-row);display:flex;flex-direction:column;align-items:center;
  gap:var(--gate-stack-gap)}

/* ── logo ── */
/* never closer to the edge than the section padding, whatever the width */
#edWrap .gate-logo{position:absolute;z-index:3;top:var(--gate-logo-top);
  left:max(var(--gate-pad-x), calc(50% - var(--gate-logo-col) / 2 + var(--gate-logo-x)));
  display:block;line-height:0}
#edWrap .gate-logo{width:var(--gate-logo-w)}
#edWrap .gate-logo img{width:100%;height:auto;display:block}

/* ── tagline ──
   Layered dark drop so the white type holds against a bright photograph:
   a tight shadow for edge definition, a wide one that pools behind the
   whole line. Strength is --gate-h1-drop. */
#edWrap h1{margin:0;text-align:center;white-space:nowrap;
  font-size:var(--gate-fs-h1);font-weight:600;line-height:1.2;
  letter-spacing:-.012em;color:var(--gate-h1);
  /* rgba with a calc'd alpha — plain CSS, works in Safari. No color-mix. */
  text-shadow:
    0 1px 3px rgba(var(--gate-h1-drop-rgb),calc(var(--gate-h1-drop) * .95)),
    0 3px 16px rgba(var(--gate-h1-drop-rgb),calc(var(--gate-h1-drop) * .85)),
    0 6px 46px rgba(var(--gate-h1-drop-rgb),calc(var(--gate-h1-drop) * .75))}

/* ── the doors ──
   They SHRINK to fit rather than wrap. Three fixed-width doors plus gaps
   overflowed the content column at 1024px and dropped the third onto a
   second row, which is what made the page tall on small screens. */
#edWrap .gate-doors{display:flex;align-items:center;justify-content:center;
  gap:var(--gate-gap);flex-wrap:nowrap;width:100%}
#edWrap .gate-door{display:block;text-decoration:none;
  flex:1 1 0;min-width:0;max-width:var(--gate-shot-w);
  container-type:inline-size}

/* five sides: flat bottom, two verticals, a low crown.
   The lit frame is the parent's background showing through a --gate-edge
   inset; both layers carry the same clip so the frame follows every facet. */
/* Doors keep their proportion at every size: width flexes, height follows
   from the ratio. Never set width and height independently here. */
#edWrap .gate-shot{position:relative;display:block;box-sizing:border-box;
  width:100%;aspect-ratio:var(--gate-ratio);padding:var(--gate-edge);
  clip-path:polygon(50% 0,100% var(--gate-peak),100% 100%,0 100%,0 var(--gate-peak));
  background:linear-gradient(150deg,var(--gate-g4) 0%,var(--gate-g3) 32%,var(--gate-g2) 66%,var(--gate-g1) 100%);
  background-size:100% 100%;
  transition:transform .42s cubic-bezier(.22,1,.36,1),filter .42s ease}
#edWrap .gate-door-violet .gate-shot{
  background:linear-gradient(150deg,var(--gate-p4) 0%,var(--gate-p3) 32%,var(--gate-p2) 66%,var(--gate-p1) 100%)}
#edWrap .gate-door-gold .gate-shot{
  background:linear-gradient(150deg,var(--gate-gold3) 0%,var(--gate-gold2) 42%,var(--gate-gold1) 100%)}

/* The photograph lives in its OWN clipped, overflow-hidden box inset by the
   frame width. That box never scales — only the image inside it does — so a
   growing image can no longer cover the lit frame. */
/* Geometry locked: a saved per-image height/width override must never
   distort the polygon. Shade and object-fit remain free.*/
#edWrap .gate-pic{position:absolute !important;inset:var(--gate-edge) !important;
  width:auto !important;max-width:none !important;margin:0 !important;
  display:block;overflow:hidden;
  clip-path:polygon(50% 0,100% var(--gate-peak),100% 100%,0 100%,0 var(--gate-peak))}
#edWrap .gate-pic img{width:100% !important;height:100% !important;
  max-width:none !important;margin:0 !important;object-fit:cover;display:block;
  transition:transform .75s cubic-bezier(.22,1,.36,1)}
/* panel shade layer, clear by default */
#edWrap .gate-pic .imgsc{position:absolute;inset:0;background:rgba(28,36,75,0);
  pointer-events:none}
/* darkening at the foot so the label always reads */
#edWrap .gate-veil{position:absolute;inset:var(--gate-edge);pointer-events:none;
  clip-path:polygon(50% 0,100% var(--gate-peak),100% 100%,0 100%,0 var(--gate-peak));
  background:linear-gradient(180deg,rgba(5,12,36,0) 0%,rgba(5,12,36,.06) 40%,
    rgba(5,12,36,var(--gate-veil)) 100%);
  transition:opacity .35s ease}

/* ── label, overlaid ── */
#edWrap .gate-name{position:absolute;left:0;right:0;bottom:30px;z-index:2;
  padding:0 18px;text-align:center;white-space:nowrap;
  /* never wider than its own door: 7.6% of the door width caps it */
  font-size:min(var(--gate-fs-name), 7.6cqw);font-weight:600;line-height:1.14;
  letter-spacing:-.015em;color:var(--gate-name);
  text-shadow:0 2px 20px rgba(4,9,26,.7)}

/* ── hover: the frame and the label wave through the brand gradient ── */
@keyframes gateWave{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

#edWrap .gate-door:hover .gate-shot{transform:translateY(-9px);
  background:linear-gradient(100deg,var(--gate-g1),var(--gate-g2),var(--gate-g3),var(--gate-g4),var(--gate-g3),var(--gate-g2),var(--gate-g1));
  background-size:300% 100%;
  animation:gateWave var(--gate-wave) linear infinite;
  filter:drop-shadow(0 0 26px rgba(96,192,240,.55))}
#edWrap .gate-door-violet:hover .gate-shot{
  background:linear-gradient(100deg,var(--gate-p1),var(--gate-p2),var(--gate-p3),var(--gate-p4),var(--gate-p3),var(--gate-p2),var(--gate-p1));
  background-size:300% 100%;
  filter:drop-shadow(0 0 26px rgba(167,148,247,.55))}
#edWrap .gate-door-gold:hover .gate-shot{
  background:linear-gradient(100deg,var(--gate-gold1),var(--gate-gold2),var(--gate-gold3),var(--gate-gold2),var(--gate-gold1));
  background-size:300% 100%;
  filter:drop-shadow(0 0 26px rgba(217,166,60,.5))}

#edWrap .gate-door:hover .gate-name{
  background:linear-gradient(100deg,var(--gate-g4),#FFFFFF,var(--gate-g3),var(--gate-g4),#FFFFFF,var(--gate-g4));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  animation:gateWave var(--gate-wave) linear infinite}
#edWrap .gate-door-violet:hover .gate-name{
  background:linear-gradient(100deg,var(--gate-p4),#FFFFFF,var(--gate-p3),var(--gate-p4),#FFFFFF,var(--gate-p4));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
#edWrap .gate-door-gold:hover .gate-name{
  background:linear-gradient(100deg,var(--gate-gold2),#FFFFFF,var(--gate-gold3),var(--gate-gold2),#FFFFFF,var(--gate-gold2));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}

#edWrap .gate-door:hover .gate-pic img{transform:scale(1.08)}
#edWrap .gate-door:hover .gate-veil{opacity:.88}

/* ── entrance ── */
@keyframes gateRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
#edWrap .gate-logo,#edWrap h1,#edWrap .gate-door{
  animation:gateRise .6s cubic-bezier(.22,1,.36,1) both}
#edWrap h1{animation-delay:.06s}
#edWrap .gate-door:nth-of-type(1){animation-delay:.14s}
#edWrap .gate-door:nth-of-type(2){animation-delay:.22s}
#edWrap .gate-door:nth-of-type(3){animation-delay:.30s}
@media(prefers-reduced-motion:reduce){
  #edWrap .gate-logo,#edWrap h1,#edWrap .gate-door{animation:none}
  #edWrap .gate-shot,#edWrap .gate-shot img{transition:none}
  #edWrap .gate-door:hover .gate-shot,#edWrap .gate-door:hover .gate-name{animation:none}
}

/* ── narrower CONTAINER (not viewport) ──
   Keyed to #edWrap's own width so the panel's phone/iPad preview, which sets
   max-width on that element, gets the same layout a real device gets. */
/* NOTE: these set the tokens on .gate, not :root. A container query can only
   style DESCENDANTS of its container, and html is an ancestor of #edWrap — so
   :root inside @container silently does nothing. */
@container gate (max-width:1280px){
  #edWrap .gate{--gate-shot-w:310px;--gate-gap:30px;--gate-fs-name:25px;
        --gate-fs-h1:39px;--gate-logo-col:94%;--gate-pad-x:26px}
}
@container gate (max-width:1000px){
  #edWrap .gate{--gate-fs-h1:39px;--gate-shot-w:270px;--gate-fs-name:21px;
        --gate-gap:22px;--gate-pad-x:22px;--gate-stack-gap:44px;
        padding:96px var(--gate-pad-x) 50px}
}

/* ── the doors stack once three of them stop fitting side by side ── */
@container gate (max-width:760px){
  #edWrap .gate{--gate-fs-h1:33px;--gate-shot-w:300px;--gate-fs-name:23px;
        --gate-logo-w:50px;--gate-logo-top:26px;--gate-logo-col:96%;
        --gate-pad-x:20px;--gate-stack-gap:30px;
        padding:80px var(--gate-pad-x) 40px;align-items:flex-start}
  #edWrap .gate-doors{flex-direction:column;gap:20px;align-items:center}
  #edWrap .gate-door{flex:0 0 auto;width:100%;max-width:var(--gate-shot-w)}
}
@container gate (max-width:430px){
  #edWrap .gate{--gate-fs-h1:33px;--gate-shot-w:250px;--gate-fs-name:20px;
        --gate-stack-gap:24px;padding:70px var(--gate-pad-x) 30px}
  /* narrow phones: the tagline may wrap rather than overflow the screen */
  #edWrap h1{white-space:normal}
}

/* ── short viewports: keep a laptop to one view (height has no container
      equivalent, so this stays a media query) ── */
@media(max-height:820px){
  #edWrap .gate{--gate-fs-h1:30px;--gate-stack-gap:40px;
        padding:88px var(--gate-pad-x) 44px}
}
@media(max-height:700px){
  #edWrap .gate{--gate-fs-h1:25px;--gate-fs-name:19px;--gate-stack-gap:30px;
        padding:74px var(--gate-pad-x) 36px}
}

/* No container-query support: fall back to viewport rules so the visitor
   still gets a stacked phone layout. */
@supports not (container-type: inline-size){
  @media(max-width:760px){
    :root{--gate-fs-h1:21px;--gate-shot-w:300px;--gate-fs-name:23px;
          --gate-logo-w:50px;--gate-logo-top:26px;--gate-pad-x:20px}
    #edWrap .gate-doors{flex-direction:column;gap:20px;align-items:center}
    #edWrap .gate-door{flex:0 0 auto;width:100%;max-width:var(--gate-shot-w)}
  }
}

/* == BAKED DESIGN — Alicia's export, 2026-08-25 ========================
   Her approved look, baked as the default so Reset all returns here.
   The panel still edits all of it live. */
#edWrap [data-imbox="I3"] .imgsc{background:rgba(200,207,244,0.55)}

/* == BAKED DESIGN — Alicia export #3, 2026-08-25 =======================
   Every export becomes the new default: Reset all returns HERE, and panel
   edits sit on top (the panel rules carry !important, these do not). */
#edWrap [data-ed="e1"]{font-size:45px;padding-bottom:0;margin-top:0;margin-bottom:9px}
#edWrap .gate-door{margin-bottom:100px}
/* door shades: forensic warm gold, energy soft violet */
#edWrap [data-imbox="I2"] .imgsc{background:rgba(245,176,25,0.13)}
#edWrap [data-imbox="I1"] .imgsc{background:rgba(171,46,229,0.09)}
@media(max-width:1024px){
#edWrap [data-ed="lg1"]{width:59px;margin-left:59px}
#edWrap [data-ed="e1"]{font-size:40px;margin-top:0}
}
@media(max-width:767px){
#edWrap [data-ed="lg1"]{width:55px;top:37px;margin-left:33px}
#edWrap [data-ed="e1"]{font-size:30px;margin-top:20px;margin-bottom:7px}
#edWrap .gate-door{margin-bottom:20px}
#edWrap [data-imbox="I3"]{width:100%;max-width:100%;margin-left:0;margin-right:0}
}