/* =====================================================================
   oil-and-gas-page.css — Elsewedy Digital  OIL & GAS AND UTILITIES
   1:1 carbon copy of Figma frame 1:200 ("solutions"), 1280 x 4671,
   inside section 1:947 ("/oil-and-gas") of file pAHjhEGqwpQkgffW1jzrlr.

   Fixed-px, frame-relative coordinates on a position:relative 1280-wide
   #stage of height 4671. The whole canvas scales via a width-fit script.

   Paint order == Figma document order; z-index 1..21 follows it exactly.
   Off-canvas nodes 1:235, 1:236 (+subtree), 1:295, 1:296 and 1:299 are
   omitted — they render nothing inside 0..1280 x 0..4671.
   ===================================================================== */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ background:#4e6380; }
body{ overflow-x:hidden; font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }

/* ---- The fixed design canvas (1:200 frame fill) ---- */
#stage{
  position:relative;
  width:1280px;
  height:4671px;
  transform-origin:top left;
  overflow:hidden;
  background-image:linear-gradient(179.78207754271352deg, rgb(217,228,235) 20.393%, rgb(78,99,128) 99.948%);
  background-repeat:no-repeat;
  background-color:#4e6380;
}

/* =====================================================================
   Shared helpers
   ===================================================================== */

/* rotated radial-glow wrapper (Figma "flex + rotate + bleed" export) */
.og-glow{ position:absolute; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.og-glow > .r{ flex:none; }
.og-glow .b{ position:relative; }
.og-glow .b img{ position:absolute; display:block; max-width:none; }

/* =====================================================================
   1:202 — Ellipse 23 glow behind the maroon statement          (z 1)
   ===================================================================== */
.og-e23{ left:34.99px; top:1309px; width:1206.35px; height:571.901px; z-index:1; }
.og-e23 > .r{ transform:rotate(88.53deg); }
.og-e23 .b{ width:541.5px; height:1192.86px; }
.og-e23 .b img{ left:-20.15%; top:-9.15%; width:140.3%; height:118.3%; }

/* =====================================================================
   1:203 / 1:204 — maroon centred statement                     (z 2)
   ===================================================================== */
.og-statement{
  position:absolute;
  left:289px; top:1652px;
  width:702px;
  margin:0;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:40px;
  line-height:1.03;
  text-align:center;
  text-transform:uppercase;
  background-image:linear-gradient(to right,#80121d,#213a5d);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  z-index:2;
}

/* =====================================================================
   1:205 — Ellipse 39 glow                                      (z 3)
   ===================================================================== */
.og-e39{ left:49.04px; top:2042px; width:1213.31px; height:843.402px; z-index:3; }
.og-e39 > .r{ transform:rotate(88.53deg); }
.og-e39 .b{ width:813.09px; height:1192.85px; }
.og-e39 .b img{ left:-13.42%; top:-9.15%; width:126.84%; height:118.3%; }

/* =====================================================================
   1:206 — hero radial vignette (design x=1 w=1278 -> full-bleed) (z 4)
   ===================================================================== */
.og-rect95{
  position:absolute;
  left:0; top:-237px;
  width:1280px; height:956px;
  border-radius:0 0 25px 25px;
  overflow:hidden;
  z-index:4;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1278 956' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-48.15 58.08 -38.707 -38.21 566 660.91)'><stop stop-color='rgba(4,236,255,1)' offset='0'/><stop stop-color='rgba(17,230,254,1)' offset='0.0062188'/><stop stop-color='rgba(30,224,252,1)' offset='0.012438'/><stop stop-color='rgba(57,213,250,1)' offset='0.024875'/><stop stop-color='rgba(83,201,247,1)' offset='0.037313'/><stop stop-color='rgba(110,189,244,1)' offset='0.049751'/><stop stop-color='rgba(88,152,200,1)' offset='0.22198'/><stop stop-color='rgba(66,114,155,1)' offset='0.3942'/><stop stop-color='rgba(44,77,110,1)' offset='0.56643'/><stop stop-color='rgba(33,59,88,1)' offset='0.65254'/><stop stop-color='rgba(22,40,66,1)' offset='0.73866'/><stop stop-color='rgba(11,20,33,1)' offset='0.86933'/><stop stop-color='rgba(6,10,17,1)' offset='0.93466'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
  background-repeat:no-repeat;
}

/* =====================================================================
   1:207 — gorodenkoff photo texture over the hero               (z 5)
   ===================================================================== */
.og-photo{
  position:absolute;
  left:-147px; top:-153px;
  width:1554px; height:874px;
  opacity:0.38;
  z-index:5;
  pointer-events:none;
}
.og-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0.16;
  max-width:none;
  display:block;
}

/* =====================================================================
   1:208 — "download" hero plate (x=1 w=1278 -> full-bleed)      (z 6)
   node opacity 53% is already baked into the PNG alpha -> no CSS opacity
   ===================================================================== */
.og-plate{
  position:absolute;
  left:0; top:-177px;
  width:1280px; height:896px;
  border-radius:22px;
  z-index:6;
  pointer-events:none;
}
.og-plate img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;          /* design: size-full with NO object-cover/contain */
  border-radius:22px;
  max-width:none;
  display:block;
}

/* =====================================================================
   1:209 — Ellipse 22 hero halo                                  (z 7)
   ===================================================================== */
.og-e22{ left:368px; top:194px; width:532.24px; height:532.24px; z-index:7; }
.og-e22 > .r{ transform:rotate(118.34deg); }
.og-e22 .b{ width:392.849px; height:392.849px; }
.og-e22 .b img{ left:-12.63%; top:-12.63%; width:125.26%; height:125.26%; }

/* =====================================================================
   1:210 — hero server-rack composite                            (z 8)
   ===================================================================== */
.og-rack{ position:absolute; left:0; top:0; width:1280px; height:4671px; z-index:8; pointer-events:none; }

/* 1:211 Ellipse 40 glow behind the cabinet */
.og-rack .rk-glow{ position:absolute; left:406.001px; top:134.8px; width:463.629px; height:463.629px; }
.og-rack .rk-glow img{ position:absolute; left:-10.7%; top:-10.7%; width:121.4%; height:121.4%; display:block; max-width:none; }

/* 1:213 dark inner bay */
.og-rack .rk-bay{ position:absolute; left:577.676px; top:220.04px; width:105.207px; height:356.537px; background:#121a24; }

/* shelf sprites — each clips a crop out of its source image */
.og-rack .rk{ position:absolute; overflow:hidden; }
.og-rack .rk img{ position:absolute; display:block; max-width:none; }
/* sprites that fill their box directly */
.og-rack .rk--fill img{ inset:0; width:100%; height:100%; object-fit:fill; }  /* size-full, no object-cover */

.og-rack .rk17{ left:570.376px; top:507.16px;  width:118.998px; height:56.410px; }
.og-rack .rk17 img{ left:-31.17%; top:-847.67%; width:444.16%; height:1028.4%; }
.og-rack .rk15{ left:566.716px; top:481.59px;  width:119.738px; height:29.542px; }
.og-rack .rk14{ left:566.716px; top:457.48px;  width:119.738px; height:29.542px; }
.og-rack .rk14 .u{ position:absolute; inset:0; overflow:hidden; }
.og-rack .rk14 .u img{ left:-31.17%; top:-1263.17%; width:444.16%; height:1975.61%; }
.og-rack .rk14 .o{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.og-rack .rk13{ left:566.716px; top:435.57px;  width:120.468px; height:29.722px; }
.og-rack .rk13 img{ left:-31.17%; top:-1138.56%; width:444.16%; height:1975.61%; }
.og-rack .rk12{ left:567.456px; top:408.53px;  width:120.458px; height:29.720px; }
.og-rack .rk12 img{ left:-31.17%; top:-1022.54%; width:444.16%; height:1975.61%; }
.og-rack .rk11{ left:567.456px; top:385.88px;  width:116.808px; height:28.819px; }
.og-rack .rk10{ left:566.716px; top:365.43px;  width:119.008px; height:29.361px; }
.og-rack .rk10 img{ left:-31.17%; top:-803.39%; width:444.16%; height:1975.61%; }
.og-rack .rk18{ left:566.716px; top:351.55px;  width:119.008px; height:29.361px; }
.og-rack .rk18 img{ left:-31.17%; top:-803.39%; width:444.16%; height:1975.61%; }
.og-rack .rk7 { left:566.716px; top:329.63px;  width:120.468px; height:29.722px; }
.og-rack .rk7 img{ left:-31.17%; top:-708.86%; width:444.16%; height:1975.61%; }
.og-rack .rk5 { left:567.456px; top:301.86px;  width:118.268px; height:30.719px; }
.og-rack .rk6 { left:566.716px; top:315.02px;  width:122.658px; height:30.665px; }
.og-rack .rk6 img{ left:-27.38%; top:-453.25%; width:407.14%; height:1787.46%; }
.og-rack .rk1 { left:566.716px; top:282.14px;  width:117.548px; height:32.130px; }
.og-rack .rk1 img{ left:-33.33%; top:-364.31%; width:456%; height:1831.05%; }
.og-rack .rk4 { left:566.716px; top:220.04px;  width:118.278px; height:71.883px; }
.og-rack .rk4 img{ left:-31.37%; top:-59.53%; width:447.06%; height:807.24%; }

/* 1:228 the cabinet render itself */
.og-rack .rk-cab{ position:absolute; left:477.285px; top:153.997px; width:286.398px; height:488.046px; }
.og-rack .rk-cab img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; max-width:none; }

/* 1:229 small dark plate */
.og-rack .rk-tab{ position:absolute; left:587.176px; top:241.22px; width:78.906px; height:16.073px; background:#050b10; }

/* =====================================================================
   1:230 — hero title                                            (z 9)
   ===================================================================== */
.og-title{
  position:absolute;
  left:85px; top:387px;
  width:356px; height:214px;
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:58px;
  line-height:1.049;
  text-transform:uppercase;
  color:#ffffff;
  z-index:9;
}

/* =====================================================================
   1:231 / 1:232 / 1:233 / 1:234 — big ambient glows          (z 10..13)
   ===================================================================== */
.og-e18{ left:-67px; top:3429px; width:1538.7px; height:1730.475px; z-index:10; }
.og-e18 > .r{ transform:rotate(88.53deg); }
.og-e18 .b{ width:1692.69px; height:1495.8px; }
.og-e18 .b img{ left:-6.45%; top:-7.29%; width:112.9%; height:114.58%; }

.og-e17{ left:-800px; top:825px; width:1271.964px; height:1224.706px; z-index:11; }
.og-e17 > .r{ transform:rotate(-94.26deg); }
.og-e17 .b{ width:1139.408px; height:1190.611px; }
.og-e17 .b img{ left:-9.58%; top:-9.16%; width:119.16%; height:118.32%; }

.og-e11{ left:-905px; top:457px; width:1682.138px; height:1682.885px; z-index:12; }
.og-e11 > .r{ transform:rotate(135.95deg); }
.og-e11 .b{ width:1173.928px; height:1205.828px; }
.og-e11 .b img{ left:-9.29%; top:-9.05%; width:118.58%; height:118.1%; }

.og-e12{ left:1052.995px; top:304px; width:1228.425px; height:1432.731px; z-index:13; }
.og-e12 > .r{ transform:rotate(88.53deg); }
.og-e12 .b{ width:1402.614px; height:1192.863px; }
.og-e12 .b img{ left:-7.78%; top:-9.15%; width:115.56%; height:118.3%; }

/* =====================================================================
   HEADER 1:28  (cloned from projects.html)                     (z 14)
   ===================================================================== */
.og-header{ position:absolute; left:21px; top:25px; width:1238px; height:88px; background:rgba(255,255,255,0.1); border-radius:19px; box-shadow:0px 4px 4px 0px rgba(0,0,0,0.25); z-index:14; }
.og-header-logo{ position:absolute; left:58px; top:24px; width:109px; height:47px; }
.og-header-nav{ position:absolute; left:0; top:0; width:100%; height:100%; }
.og-nav-link{ position:absolute; top:30px; height:23px; display:flex; align-items:center; justify-content:center; gap:6px; font-family:'Inter',sans-serif; font-weight:500; font-size:16px; line-height:1.45; letter-spacing:-0.08px; color:#ffffff; text-decoration:none; white-space:nowrap; }
.og-nav-home{ left:402px; width:45px; }
.og-nav-solutions{ left:487px; width:82px; }
.og-nav-services{ left:593px; width:66px; }
.og-nav-projects{ left:688px; width:62px; }
.og-nav-news{ left:793px; width:43px; }
.og-nav-caret{ transform:rotate(180deg); flex:none; }
.og-header-contact{ position:absolute; left:1009px; top:17px; width:169px; height:49px; background:#ffffff; text-decoration:none; overflow:hidden; }
.og-header-contact-label{ position:absolute; left:18px; top:50%; transform:translateY(-50%); font-family:'Inter',sans-serif; font-weight:500; font-size:16px; line-height:1.45; letter-spacing:-0.08px; color:#213a5d; white-space:nowrap; }
.og-header-contact-icon{ position:absolute; left:125px; top:9px; width:37px; height:35px; background:#213a5d; display:flex; align-items:center; justify-content:center; }
.og-header-contact-icon svg{ transform:rotate(-45deg); }

/* =====================================================================
   FOOTER 1:298  (cloned from projects.html / home partial)      (z 15)
   This design places the footer instance top at y=3844.
   Home instance top = 5895  ->  shift delta = 3844 - 5895 = -2051.
   ===================================================================== */
.og-footer-shift{
  position:absolute;
  left:0; top:-2051px;
  z-index:15;
  pointer-events:none;   /* footer is purely visual here (all links are #) */
}

.sec-footer{ position:relative; width:1280px; height:6722px; }

.sec-footer .ftr-bg{ position:absolute; left:0; top:5895px; width:1280px; height:827px; background:#203148; z-index:0; }

.sec-footer .ftr-servers{ position:absolute; left:128px; top:5921px; width:576px; height:362px; z-index:1; }
.sec-footer .ftr-rack{ position:absolute; top:0; width:362px; height:362px; filter:drop-shadow(6px 12px 16px rgba(0,0,0,0.45)); }
.sec-footer .ftr-rack--left{ left:0; z-index:2; }
.sec-footer .ftr-rack--right{ left:214px; z-index:1; }
.sec-footer .ftr-rack img{ display:block; width:100%; height:100%; object-fit:contain; }

.sec-footer .ftr-headline{ position:absolute; left:692px; top:6005px; width:499px; margin:0; font-family:'Space Grotesk',sans-serif; font-size:60px; line-height:1.14; letter-spacing:2.4px; text-transform:uppercase; z-index:1; }
.sec-footer .ftr-headline-a{ font-weight:500; color:#ffffff; }
.sec-footer .ftr-headline-b{ font-weight:700; background-image:linear-gradient(to right,#ffffff,#80121d); background-clip:text; -webkit-background-clip:text; color:transparent; }

.sec-footer .ftr-paragraph{ position:absolute; left:697px; top:6150px; width:356px; margin:0; font-family:'Inter',sans-serif; font-size:16px; line-height:1.3; color:#ffffff; font-weight:300; z-index:1; }
.sec-footer .ftr-paragraph .w-semi{ font-weight:600; }
.sec-footer .ftr-paragraph .w-bold{ font-weight:700; }
.sec-footer .ftr-paragraph .w-reg{ font-weight:300; }

.sec-footer .ftr-cta{ position:absolute; left:697px; top:6207px; width:170px; height:46px; background:#ffffff; border:1px solid #002444; display:block; text-decoration:none; z-index:1; }
.sec-footer .ftr-cta-label{ position:absolute; left:15px; top:13px; width:138px; margin:0; font-family:'Ailerons',sans-serif; font-weight:400; font-size:16px; line-height:normal; text-transform:uppercase; color:#80121d; }
.sec-footer .ftr-cta-icon-bg{ position:absolute; left:128px; top:7px; width:34px; height:31px; background:#80121d; display:block; }
.sec-footer .ftr-cta-icon{ position:absolute; left:50%; top:50%; width:16px; height:16px; transform:translate(-50%,-50%) rotate(-45deg); }

.sec-footer .ftr-pin{ position:absolute; left:602px; top:6530px; width:44.735px; height:44.735px; transform:rotate(-90.97deg); z-index:1; }
.sec-footer .ftr-pin img{ display:block; width:100%; height:100%; }

.sec-footer .ftr-logo{ position:absolute; left:95px; top:6348px; width:150px; height:64px; object-fit:contain; z-index:1; }
.sec-footer .ftr-tagline{ position:absolute; left:95px; top:6431px; width:210px; margin:0; font-family:'Inter',sans-serif; font-weight:500; font-size:14px; line-height:1.45; letter-spacing:-0.07px; color:rgba(255,255,255,0.76); z-index:1; }
.sec-footer .ftr-social{ position:absolute; left:95px; top:6493px; display:flex; align-items:center; gap:24px; z-index:1; }
.sec-footer .ftr-social-link{ display:block; width:24px; height:24px; }
.sec-footer .ftr-social-link img{ display:block; width:100%; height:100%; }

.sec-footer .ftr-col{ position:absolute; width:130px; z-index:1; }
.sec-footer .ftr-col--learn{ left:446px; top:6348px; }
.sec-footer .ftr-col--support{ left:698px; top:6348px; }
.sec-footer .ftr-col-header{ margin:0 0 39px 0; font-family:'Inter',sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.08px; color:#ffffff; white-space:nowrap; }
.sec-footer .ftr-col-item{ margin:0 0 8px 0; text-decoration:none; display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:16px; line-height:1.45; letter-spacing:-0.08px; color:rgba(255,255,255,0.55); }

.sec-footer .ftr-contact-header{ position:absolute; left:949px; top:6348px; margin:0; z-index:1; }
.sec-footer .ftr-contact{ position:absolute; left:949px; z-index:1; }
.sec-footer .ftr-contact--email{ top:6384px; width:167px; }
.sec-footer .ftr-contact--address{ top:6420px; width:159px; }
.sec-footer .ftr-contact-label{ margin:0; font-family:'Aileron',sans-serif; font-weight:600; font-size:14px; line-height:normal; color:rgba(255,255,255,0.79); }
.sec-footer .ftr-contact--email .ftr-contact-value{ margin:4px 0 0 0; font-family:'Aileron',sans-serif; font-weight:300; font-size:11px; line-height:normal; color:rgba(255,255,255,0.9); }
.sec-footer .ftr-contact--address .ftr-contact-value{ margin:4px 0 0 0; font-family:'Aileron',sans-serif; font-weight:300; font-size:10px; line-height:normal; color:rgba(255,255,255,0.9); }

.sec-footer .ftr-divider{ position:absolute; left:54px; top:6613px; width:1157px; height:1px; background:#ffffff; z-index:1; }
.sec-footer .ftr-copyright{ position:absolute; left:450px; top:6640px; width:379px; margin:0; font-family:'Inter',sans-serif; font-weight:300; font-size:11px; line-height:1.14; letter-spacing:0.44px; text-transform:uppercase; color:#ffffff; text-align:center; z-index:1; }

/* =====================================================================
   1:300 — OUR SOLUTIONS light band + five glass cards           (z 16)
   ===================================================================== */
/* NOTE: this wrapper must NOT get a z-index — a stacking context here would
   isolate the mix-blend-mode children so they'd blend against nothing.
   z-index lives on the children instead, so they blend against #stage. */
.og-sol{ position:absolute; left:0; top:0; width:1280px; height:4671px; }
.og-sol > *{ z-index:16; }

/* 1:301 tint (design x=0 w=1278 -> full-bleed) */
.og-sol .sol-tint{
  position:absolute; left:0; top:927px; width:1280px; height:646px;
  mix-blend-mode:multiply;
  background-image:linear-gradient(240.67411114238917deg, rgba(33,58,93,0.38) 1.8888%, rgba(84,106,136,0.38) 99.035%);
}
/* 1:302 Rectangle 74 multiply sheet */
.og-sol .sol-sheet{ position:absolute; left:-16px; top:926px; width:1308px; height:646px; mix-blend-mode:multiply; }
.og-sol .sol-sheet img{ position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none; }

/* 1:303 OUR / SOLUTIONS */
.og-sol .sol-h2{
  position:absolute; left:73px; top:790px; width:486px; height:108px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1;
  text-transform:uppercase; color:#213a5d;
}
.og-sol .sol-h2 .a{ font-weight:500; font-size:48px; color:#80121d; }
.og-sol .sol-h2 .b{ font-size:64px; }

/* ---- glass cards ---- */
.og-card{ position:absolute; width:314px; height:284px; }
.og-card .cd-bg{ position:absolute; left:0; top:0; width:314px; height:284px; background:rgba(252,252,252,0.2); border-radius:12px; }
.og-card .cd-title{
  position:absolute; margin:0;
  font-family:'Inter',sans-serif; font-weight:600; font-size:24px; line-height:1.08;
  text-align:center; text-transform:uppercase; color:#ffffff;
}
.og-card .cd-list{
  position:absolute; margin:0;
  font-family:'Inter',sans-serif; font-weight:300; line-height:1.08; color:#ffffff;
}
.og-card .cd-list p{ margin:0; }
.og-card .cd-badge{ position:absolute; }
.og-card .cd-badge img{ display:block; width:100%; height:100%; }
.og-card .cd-icon{ position:absolute; overflow:hidden; }
.og-card .cd-icon img{ position:absolute; display:block; max-width:none; }
.og-card .cd-icon--fill img{ inset:0; width:100%; height:100%; object-fit:cover; }

/* NETWORKING 1:340 */
.og-card--net{ left:136px; top:955px; }
.og-card--net .cd-title{ left:71px; top:142px; width:172px; height:29px; }
.og-card--net .cd-list{ left:79px; top:180px; width:202px; height:57px; font-size:14px; }
.og-card--net .cd-badge{ left:111px; top:42px; width:92px; height:92px; }
.og-card--net .cd-icon{ left:124px; top:50px; width:65px; height:81px; border-radius:25px; }

/* CONNECTIVITY 1:331 */
.og-card--con{ left:480.954px; top:955px; }
.og-card--con .cd-bg{ left:-1px; }
.og-card--con .cd-title{ left:57px; top:142px; width:198px; height:30px; }
.og-card--con .cd-list{ left:61px; top:180px; width:191px; height:66px; font-size:12px; }
.og-card--con .cd-badge{ left:111px; top:42px; width:90px; height:92.478px; }
.og-card--con .cd-icon{ left:123.281px; top:47.576px; width:64.357px; height:80.447px; border-radius:19px; }

/* COLLABORATION PORTFOLIO 1:323 */
.og-card--col{ left:826.046px; top:954px; }
.og-card--col .cd-title{ left:11px; top:137px; width:292px; height:34px; }
.og-card--col .cd-list{ left:72px; top:180px; width:171px; height:79px; font-size:12px; }
.og-card--col .cd-badge{ left:111px; top:40px; width:92px; height:92px; }
.og-card--col .cd-icon{ left:125px; top:46px; width:64px; height:80px; border-radius:21px; }

/* OT AND CYBER SECURITY 1:314 */
.og-card--cyb{ left:308.046px; top:1260px; width:315px; }
.og-card--cyb .cd-title{ left:59px; top:158px; width:196px; height:46px; }
.og-card--cyb .cd-list{ left:74px; top:224px; width:167px; height:57px; font-size:14px; }
.og-card--cyb .cd-badge{ left:111px; top:46px; width:92px; height:92px; }
.og-card--cyb .cd-icon{ left:129px; top:60px; width:58px; height:67px; border-radius:17px; }
.og-card--cyb .cd-icon img{ left:-119.08%; top:-118%; width:332.95%; height:360%; }

/* ELV SYSTEMS 1:306 */
.og-card--elv{ left:654px; top:1260px; }
.og-card--elv .cd-title{ left:70px; top:157px; width:175px; height:34px; }
.og-card--elv .cd-list{ left:86px; top:179px; width:143px; height:96px; font-size:12px; }
.og-card--elv .cd-badge{ left:111px; top:46px; width:92px; height:92px; }
.og-card--elv .cd-icon{ left:125px; top:60px; width:64px; height:64px; }

/* =====================================================================
   1:348 — hero glass panel + SEE MORE                           (z 17)
   ===================================================================== */
.og-glass{ position:absolute; left:807px; top:409px; width:392px; height:186px; border-radius:11px; background:rgba(255,255,255,0.1); z-index:17; }
.og-glass-text{
  position:absolute; left:841px; top:435px; width:323px; height:76px; margin:0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:14px; line-height:1.105;
  color:#ffffff; z-index:18;
}

/* ---- buttons (square corners; kite arrow) ---- */
.og-btn{ position:absolute; display:block; text-decoration:none; width:174px; height:46px; }
.og-btn .btn-sq{ position:absolute; display:flex; align-items:center; justify-content:center; width:34px; height:31px; top:7px; }
.og-btn .btn-label{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:'Ailerons','Space Grotesk',sans-serif; font-weight:400; font-size:16px;
  line-height:normal; text-transform:uppercase; white-space:nowrap;
}
.og-btn .btn-kite{ transform:rotate(-45deg); }

/* red variant: maroon box + white square + maroon arrow */
.og-btn--red{ background:#80121d; }
.og-btn--red .btn-sq{ background:#ffffff; }
.og-btn--red .btn-label{ color:#ffffff; }
.og-btn--red .btn-kite path{ fill:#80121d; }

/* 1:351 SEE MORE (hero) */
.og-btn--seemore{ left:841.046px; top:525px; z-index:18; }
.og-btn--seemore .btn-sq{ left:131.954px; }   /* 973 - 841.046 */
.og-btn--seemore .btn-label{ left:21px; }     /* 862.046 - 841.046 */

/* 1:376 CONTACT US (engineering section) */
.og-btn--contact{ left:553px; top:3270px; z-index:21; }
.og-btn--contact .btn-sq{ left:132px; }       /* 685 - 553 */
.og-btn--contact .btn-label{ left:14px; }     /* 567 - 553 */

/* =====================================================================
   1:356 — marquee strip                                         (z 19)
   ===================================================================== */
.og-marquee{ position:absolute; left:8.667px; top:657px; width:1246.667px; height:14px; z-index:19; }
.og-marquee img{ display:block; width:100%; height:100%; }

/* =====================================================================
   1:364 — PARTNER WITH ELSEWEDY DIGITAL panel                   (z 20)
   ===================================================================== */
.og-partner{ position:absolute; left:0; top:0; width:1280px; height:4671px; pointer-events:none; }
.og-partner > *{ z-index:20; }

/* 1:366 dark rounded plate */
.og-partner .pt-plate{
  position:absolute; left:138px; top:3380px; width:1005px; height:345px; border-radius:8px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1005 345' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(3.0769e-15 17.25 -50.25 1.0563e-15 502.5 172.5)'><stop stop-color='rgba(26,43,66,1)' offset='0'/><stop stop-color='rgba(57,74,96,1)' offset='0.000025'/><stop stop-color='rgba(88,105,125,1)' offset='0.00005'/><stop stop-color='rgba(118,135,155,1)' offset='0.000075'/><stop stop-color='rgba(149,166,184,1)' offset='0.0001'/><stop stop-color='rgba(103,120,140,1)' offset='0.0002'/><stop stop-color='rgba(63,79,101,1)' offset='0.47609'/><stop stop-color='rgba(42,59,82,1)' offset='0.71404'/><stop stop-color='rgba(22,39,62,1)' offset='0.95198'/></radialGradient></defs></svg>");
  background-size:100% 100%; background-repeat:no-repeat;
}
/* 1:367 Erica Anderson 3 lighten sphere */
.og-partner .pt-orb{
  position:absolute; left:364px; top:3316px; width:554px; height:549px;
  mix-blend-mode:lighten; opacity:0.48; overflow:hidden;
}
.og-partner .pt-orb img{ position:absolute; left:-10.73%; top:-23.15%; width:121.95%; height:123.15%; display:block; max-width:none; }

/* 1:368 headline */
.og-partner .pt-text{
  position:absolute; left:181.046px; top:3489px; width:920px; margin:0;
  font-family:'Inter',sans-serif; font-weight:700; font-size:40px; line-height:0.93;
  letter-spacing:1.6px; text-align:center; text-transform:uppercase;
  background-image:linear-gradient(to right,#ffffff,#e8f3ff);
  background-clip:text; -webkit-background-clip:text; color:transparent;
  filter:drop-shadow(0px 4px 20px #213a5d);
}
.og-partner .pt-text .r{ font-weight:400; }
.og-partner .pt-text .l{ font-weight:300; }
.og-partner .pt-text .s{ font-weight:600; }

/* =====================================================================
   1:369 — ENGINEERING DIGITAL / TECH. INFRASTRUCTURE            (z 20)
   ===================================================================== */
.og-eng{ position:absolute; left:175px; top:2544px; width:930px; height:681px; z-index:21; }

.og-eng .en-h2{
  position:absolute; left:112px; top:0; width:706px; height:112px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:48px; line-height:52px;
  text-align:center; text-transform:uppercase; color:#003159;
}
.og-eng .en-h2 .a{ font-weight:400; color:#80121d; }

.og-eng .en-media{ position:absolute; left:-32px; top:129px; width:1008px; height:552px; border-radius:25px; overflow:hidden; }
.og-eng .en-media img{ position:absolute; left:-9.88%; top:-35.69%; width:132.64%; height:162.22%; display:block; max-width:none; }

.og-eng .en-play{
  position:absolute; left:395px; top:335px; width:140px; height:140px;
  display:flex; align-items:center; justify-content:center;
}
.og-eng .en-play > i{ flex:none; display:block; width:140px; height:140px; position:relative; transform:rotate(90deg); }
.og-eng .en-play img{ position:absolute; left:6.7%; top:0; width:86.6%; height:75%; display:block; max-width:none; }

/* =====================================================================
   1:381 — OUR SCOPE OF SERVICE dark band + five glow cards      (z 21)
   ===================================================================== */
.og-scope{ position:absolute; left:0; top:0; width:1280px; height:4671px; }
.og-scope > *{ z-index:22; }

/* 1:382 radial band */
.og-scope .sc-bg{
  position:absolute; left:-7px; top:1851px; width:1316px; height:613px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1316 613' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(84.259 41.8 -89.738 211.07 110.85 79.097)'><stop stop-color='rgba(14,22,53,1)' offset='0.26927'/><stop stop-color='rgba(11,37,76,1)' offset='0.35147'/><stop stop-color='rgba(8,52,100,1)' offset='0.43366'/><stop stop-color='rgba(2,82,146,1)' offset='0.59805'/><stop stop-color='rgba(6,67,119,1)' offset='0.69854'/><stop stop-color='rgba(11,52,91,1)' offset='0.79902'/><stop stop-color='rgba(15,37,63,1)' offset='0.89951'/><stop stop-color='rgba(19,23,36,1)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%; background-repeat:no-repeat;
}
/* 1:383 texture (opacity 54% already baked into the PNG alpha) */
.og-scope .sc-tex{ position:absolute; left:-29px; top:1851px; width:1338px; height:613px; mix-blend-mode:multiply; }
.og-scope .sc-tex img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; max-width:none; }

/* 1:385 heading */
.og-scope .sc-h2{
  position:absolute; left:308px; top:1952.36px; width:665px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:96px; line-height:0.84;
  text-align:center; text-transform:uppercase;
  background-image:linear-gradient(102.04930541211114deg, rgb(255,255,255) 46.734%, rgb(182,225,255) 74.556%);
  background-clip:text; -webkit-background-clip:text; color:transparent;
}

/* scope cards */
.og-sc{ position:absolute; width:202.097px; height:253px; }
.og-sc .sc-panel{
  position:absolute; left:0; top:0; width:202.097px; height:253px; border-radius:12px;
  background-image:linear-gradient(to left, rgba(127,144,163,0.12), rgba(0,49,89,0.12));
}
.og-sc .sc-title{
  position:absolute; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:24px; line-height:1;
  text-align:center; text-transform:uppercase; color:#ffffff;
}
.og-sc .sc-icon{ position:absolute; overflow:hidden; }
.og-sc .sc-icon img{ display:block; width:100%; height:100%; }

/* 1:540 TESTING & COMMISSIONING */
.og-sc--test{ left:98px; top:1998px; }
.og-sc--test .sc-title{ left:4.998px; top:173px; width:192px; height:44px; }
.og-sc--test .sc-icon{ left:34px; top:36.002px; width:134px; height:122px; }
/* 1:845 SYSTEM INTEGRATION */
.og-sc--sys{ left:317px; top:2091px; }
.og-sc--sys .sc-title{ left:15.998px; top:156px; width:171px; height:73px; }
.og-sc--sys .sc-icon{ left:41.006px; top:25.002px; width:118.99px; height:152px; }
/* 1:580 SUPPLY & INSTALLATION */
.og-sc--sup{ left:536px; top:2149px; }
.og-sc--sup .sc-title{ left:16.004px; top:180px; width:170.749px; height:43.86px; }
.og-sc--sup .sc-icon{ left:24.046px; top:24.01px; width:154px; height:138px; }
/* 1:386 PROJECT MANAGEMENT */
.og-sc--prj{ left:758px; top:2090px; }
.og-sc--prj .sc-title{ left:15.996px; top:181px; width:170.749px; height:43.86px; }
.og-sc--prj .sc-icon{ left:12px; top:38px; width:177px; height:129px; }
/* 1:890 DESIGN & ENGINEERING */
.og-sc--des{ left:979px; top:1997px; }
.og-sc--des .sc-title{ left:15.996px; top:174.89px; width:170.749px; height:43.86px; }
.og-sc--des .sc-icon{ left:35px; top:47px; width:131px; height:124px; }

/* footer shell is pointer-events:none; real links must still be clickable */
.og-footer-shift a{ pointer-events:auto; }