/* =====================================================================
   data-center-page.css — Elsewedy Digital  DATA CENTER
   1:1 carbon copy of Figma frame 1:949 ("solutions"), 1280 x 4667,
   inside section 1:1675 ("/data-center").

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

   DOM order == Figma paint order (no z-index anywhere, so the
   mix-blend-mode layers keep blending against the #stage backdrop).

   Omitted because they render nothing inside 0..1280 x 0..4667:
     1:953  (empty node, no fill)
     1:957  (y -1081..-681, entirely above the canvas)
     1:959  + subtree (the "About Elsewedy Digital" block, y < -519)
     1:1018 ("Line 12" — a zero-width vertical rule at x = 1553)
     1:1019 (hero title of the previous section, y -900..-645)
     1:1023 ("network 2", x -585..-9, entirely off-canvas left)
   ===================================================================== */

*{ 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:949 frame fill) ---- */
#stage{
  position:relative;
  width:1280px;
  height:4667px;
  transform-origin:top left;
  overflow:hidden;
  background-image:linear-gradient(179.7822641583062deg, rgb(217,228,235) 20.393%, rgb(78,99,128) 99.948%);
  background-repeat:no-repeat;
  background-color:#4e6380;
}

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

/* 1:950 — Ellipse 23 */
.dc-e23{ left:55.8px; top:1505px; width:1135.297px; height:865.172px; }
.dc-e23 > .r{ transform:rotate(91.36deg); }
.dc-e23 .b{ width:839.002px; height:1115.754px; }
.dc-e23 .b img{ left:-13%; top:-9.78%; width:126%; height:119.56%; }

/* 1:951 — Ellipse 24 */
.dc-e24{ left:195px; top:2316px; width:846.642px; height:833.014px; }
.dc-e24 > .r{ transform:rotate(91.36deg); }
.dc-e24 .b{ width:813.656px; height:827.618px; }
.dc-e24 .b img{ left:-13.41%; top:-13.18%; width:126.82%; height:126.36%; }

/* 1:954 — Ellipse 18 */
.dc-e18{ left:-67px; top:3429px; width:1538.7px; height:1730.475px; }
.dc-e18 > .r{ transform:rotate(88.53deg); }
.dc-e18 .b{ width:1692.65px; height:1495.77px; }
.dc-e18 .b img{ left:-6.45%; top:-7.29%; width:112.9%; height:114.58%; }

/* 1:955 — Ellipse 11 */
.dc-e11{ left:-905px; top:725px; width:1682.138px; height:1682.885px; }
.dc-e11 > .r{ transform:rotate(135.95deg); }
.dc-e11 .b{ width:1173.928px; height:1205.828px; }
.dc-e11 .b img{ left:-9.29%; top:-9.05%; width:118.58%; height:118.1%; }

/* 1:956 — Ellipse 12 */
.dc-e12{ left:1052.995px; top:448px; width:1228.425px; height:1432.731px; }
.dc-e12 > .r{ transform:rotate(88.53deg); }
.dc-e12 .b{ width:1402.614px; height:1192.863px; }
.dc-e12 .b img{ left:-7.78%; top:-9.15%; width:115.56%; height:118.3%; }

/* 1:1025 — Ellipse 22 hero halo */
.dc-e22{ left:224px; top:-35px; width:815.601px; height:815.601px; }
.dc-e22 > .r{ transform:rotate(118.34deg); }
.dc-e22 .b{ width:602px; height:602px; }
.dc-e22 .b img{ left:-8.24%; top:-8.24%; width:116.48%; height:116.48%; }

/* =====================================================================
   1:952 — hero radial vignette (design x=1 w=1278 -> full-bleed)
   ===================================================================== */
.dc-rect952{
  position:absolute;
  /* 1px overscan on both sides so the SVG's own edge antialiasing lands
     off-canvas instead of leaving a dark sliver at x=0 / x=1279 */
  left:-1px; top:-230px;
  width:1282px; height:956px;
  border-radius:0 0 25px 25px;
  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:958 — hero light-streak plate
   node opacity 53% is already baked into the PNG alpha -> no CSS opacity
   ===================================================================== */
/* design x=1 w=1272 -> left edge pulled to 0 so no 1px sliver survives */
.dc-plate{ position:absolute; left:0; top:-166px; width:1273px; height:892px; pointer-events:none; }
.dc-plate img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:fill;              /* design: size-full with NO object-cover/contain */
  display:block; max-width:none;
}

/* =====================================================================
   HEADER 1:28
   ===================================================================== */
.dc-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); }
.dc-header-logo{ position:absolute; left:58px; top:24px; width:109px; height:47px; }
.dc-header-logo img{ display:block; width:100%; height:100%; }
.dc-header-nav{ position:absolute; left:0; top:0; width:100%; height:100%; }
.dc-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; }
.dc-nav-home{ left:402px; width:45px; }
.dc-nav-solutions{ left:487px; width:82px; }
.dc-nav-services{ left:593px; width:66px; }
.dc-nav-projects{ left:688px; width:62px; }
.dc-nav-news{ left:793px; width:43px; }
.dc-nav-caret{ transform:rotate(180deg); flex:none; }
.dc-header-contact{ position:absolute; left:1009px; top:17px; width:169px; height:49px; background:#ffffff; text-decoration:none; overflow:hidden; }
.dc-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; }
.dc-header-contact-icon{ position:absolute; left:125px; top:7px; width:37px; height:35px; background:#213a5d; display:flex; align-items:center; justify-content:center; }
.dc-header-contact-icon svg{ transform:rotate(-45deg); }

/* =====================================================================
   FOOTER 1:1021
   The footer node sits at x = -13, width 1306, y = 3840, height 827.
   Cloned from the shared design; the whole block is expressed in the
   home-page coordinate system (footer top = 5895) and shifted by
   3840 - 5895 = -2055.
   ===================================================================== */
.dc-footer-shift{
  position:absolute;
  left:0; top:-2055px;
  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; }

/* I1:1021;211:1250 / 211:1254 — the two rack renders */
.sec-footer .ftr-servers{ position:absolute; left:115px; top:5921px; width:569px; height:362px; }
.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; }
.sec-footer .ftr-rack--right{ left:207px; }
.sec-footer .ftr-rack img{ display:block; width:100%; height:100%; object-fit:contain; }

/* I1:1021;211:1298 */
.sec-footer .ftr-headline{ position:absolute; left:693px; 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; }
.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; }

/* I1:1021;211:1297 */
.sec-footer .ftr-paragraph{ position:absolute; left:698px; top:6150px; width:356px; margin:0; font-family:'Inter',sans-serif; font-size:16px; line-height:normal; color:#ffffff; font-weight:300; }
.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; }

/* I1:1021;211:1293..1296 — white CTA */
.sec-footer .ftr-cta{ position:absolute; left:698px; top:6207px; width:170px; height:46px; background:#ffffff; border:1px solid #002444; display:block; text-decoration:none; }
.sec-footer .ftr-cta-label{ position:absolute; left:15px; top:15px; height:19px; line-height:19px; width:138px; margin:0; font-family:'Ailerons','Space Grotesk',sans-serif; font-weight:400; font-size:16px; text-transform:uppercase; color:#80121d; }
.sec-footer .ftr-cta-icon-bg{ position:absolute; left:128px; top:7px; width:34px; height:31px; background:#80121d; display:flex; align-items:center; justify-content:center; }
.sec-footer .ftr-cta-icon-bg .btn-kite{ transform:rotate(-45deg); }
.sec-footer .ftr-cta-icon-bg .btn-kite path{ fill:#ffffff; }

/* I1:1021;211:1299 */
.sec-footer .ftr-pin{ position:absolute; left:589px; top:6530px; width:44.735px; height:44.735px; transform:rotate(-90.97deg); }
.sec-footer .ftr-pin img{ display:block; width:100%; height:100%; }

/* I1:1021;211:1267 — logo */
.sec-footer .ftr-logo{ position:absolute; left:98px; top:6348px; width:154px; height:67px; }
.sec-footer .ftr-logo img{ display:block; width:100%; height:100%; }

/* I1:1021;211:1255 "Content" — tagline + social links */
.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); }
.sec-footer .ftr-social{ position:absolute; left:95px; top:6493px; display:flex; align-items:center; gap:24px; }
.sec-footer .ftr-social-link{ display:block; width:24px; height:24px; }
.sec-footer .ftr-social-link img{ display:block; width:100%; height:100%; }

/* I1:1021;211:1302 / 211:1311 — link columns */
.sec-footer .ftr-col{ position:absolute; top:6348px; width:150px; }
.sec-footer .ftr-col--learn{ left:442px; }
.sec-footer .ftr-col--support{ left:699px; }
.sec-footer .ftr-col-header{ margin:0; font-family:'Inter',sans-serif; font-weight:600; font-size:16px; line-height:1.45; letter-spacing:-0.08px; color:#ffffff; white-space:nowrap; }
.sec-footer .ftr-col-item{ position:absolute; margin: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-col-item--1{ top:47px; }
.sec-footer .ftr-col-item--2{ top:78.2px; }
.sec-footer .ftr-col-item--3{ top:109.4px; }
.sec-footer .ftr-col-item--4{ top:140.6px; }

/* I1:1021;211:1308 / 211:1289 / 211:1288 — contact column */
.sec-footer .ftr-contact-header{ position:absolute; left:955px; top:6348px; margin:0; }
.sec-footer .ftr-contact{ position:absolute; left:955px; }
.sec-footer .ftr-contact--email{ top:6384px; width:170px; }
.sec-footer .ftr-contact--address{ top:6420px; width:162px; }
.sec-footer .ftr-contact-label{ margin:0; font-family:'Aileron','Inter',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:0; font-family:'Aileron','Inter',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:0; font-family:'Inter',sans-serif; font-weight:300; font-size:10px; line-height:normal; color:rgba(255,255,255,0.9); }

/* I1:1021;211:1317 / 211:1310 */
.sec-footer .ftr-divider{ position:absolute; left:42px; top:6613px; width:1180px; height:1px; background:#ffffff; }
.sec-footer .ftr-copyright{ position:absolute; left:446px; top:6640px; width:387px; 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; }

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

/* =====================================================================
   1:1024 — hero title
   ===================================================================== */
.dc-title{
  position:absolute; left:80px; top:403px; width:352px; height:131px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:64px;
  line-height:66px; text-transform:uppercase; color:#ffffff;
}

/* =====================================================================
   1:1026 / 1:1027 — hero data-centre render (two crops of one image)
   ===================================================================== */
.dc-hero-a,.dc-hero-b{ position:absolute; overflow:hidden; pointer-events:none; }
.dc-hero-a img,.dc-hero-b img{ position:absolute; display:block; max-width:none; }
.dc-hero-a{ left:386.21px; top:113px; width:507.58px; height:244px; }
.dc-hero-a img{ left:-0.05%; top:0; width:100.1%; height:312.35%; }
.dc-hero-b{ left:355px; top:313px; width:571px; height:383px; }
.dc-hero-b img{ left:-0.05%; top:-106.86%; width:100.1%; height:223.89%; }

/* =====================================================================
   1:1028 — hero glass panel + SEE MORE + paragraph
   ===================================================================== */
.dc-glass{ position:absolute; left:840px; top:412px; width:392px; height:181px; border-radius:11px; background:rgba(255,255,255,0.1); }
.dc-glass-text{
  position:absolute; left:874px; top:405.6px; width:334px; height:96.1px; margin:0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:14px; line-height:1.105;
  color:#ffffff;
}

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

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

/* 1:1031 SEE MORE (hero) */
.dc-btn--seemore{ left:874px; top:527px; }
.dc-btn--seemore .btn-sq{ left:132px; }
.dc-btn--seemore .btn-label{ left:21px; top:13px; }

/* 1:1666 CONTACT US (engineering section) */
.dc-btn--contact{ left:553px; top:3270px; }
.dc-btn--contact .btn-sq{ left:132px; }
.dc-btn--contact .btn-label{ left:14px; top:13px; }

/* =====================================================================
   1:1036 — maroon multiply band (design x=0 w=1278 -> full-bleed)
   ===================================================================== */
.dc-band{
  position:absolute; left:0; top:923px; width:1280px; height:650px;
  mix-blend-mode:multiply;
  background-image:linear-gradient(240.82489280805848deg, rgb(128,18,29) 1.8888%, rgb(253,237,237) 42.893%, rgb(128,18,29) 99.035%);
}

/* =====================================================================
   1:1037 .. 1:1079 — six glass solution cards
   ===================================================================== */
.dc-card{ position:absolute; width:314px; height:284px; }
.dc-card .cd-bg{ position:absolute; left:0; top:0; width:314px; height:284px; background:rgba(252,252,252,0.81); border-radius:12px; }
.dc-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:#213a5d;
}
.dc-card .cd-title p{ margin:0; }
.dc-card .cd-list{
  position:absolute; margin:0; list-style:disc;
  font-family:'Inter',sans-serif; font-weight:300; font-size:12px; line-height:1.08; color:#213a5d;
}
.dc-card .cd-list li{ margin-left:18px; }
.dc-card .cd-list p{ margin:0; }
.dc-card .cd-list--p{ list-style:none; }
.dc-card .cd-badge{ position:absolute; }
.dc-card .cd-badge img{ display:block; width:100%; height:100%; }
.dc-card .cd-icon{ position:absolute; mix-blend-mode:luminosity; }
.dc-card .cd-icon img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; max-width:none; }
.dc-card .cd-icon--mirror img{ transform:rotate(180deg) scaleY(-1); }

/* 1:1037 MECHANICAL SYSTEM */
.dc-card--mech{ left:137px; top:1262px; }
.dc-card--mech .cd-title{ left:19px; top:145px; width:275px; height:58px; }
.dc-card--mech .cd-list{ left:30px; top:179px; width:158px; height:53px; }
.dc-card--mech .cd-badge{ left:111px; top:35px; width:92px; height:92px; }
.dc-card--mech .cd-icon{ left:125px; top:49px; width:63px; height:63px; }

/* 1:1045 SPACE PREPARATION & CABLING SYSTEM */
.dc-card--space{ left:828px; top:957px; }
.dc-card--space .cd-title{ left:31px; top:136px; width:253px; height:55px; }
.dc-card--space .cd-list{ left:69px; top:197px; width:177px; height:58px; }
.dc-card--space .cd-badge{ left:116px; top:35px; width:90px; height:90px; }
.dc-card--space .cd-icon{ left:129.698px; top:48.7px; width:60.652px; height:60.652px; }

/* 1:1053 RACKS & CONTAINMENT */
.dc-card--racks{ left:482px; top:957px; }
.dc-card--racks .cd-title{ left:11px; top:136px; width:292px; height:58px; }
.dc-card--racks .cd-list{ left:80px; top:197px; width:154px; height:53px; }
.dc-card--racks .cd-badge{ left:114px; top:36px; width:89px; height:89px; }
.dc-card--racks .cd-icon{ left:130.45px; top:52.45px; width:55.141px; height:55.141px; }

/* 1:1061 PHYSICAL SECURITY SYSTEM */
.dc-card--sec{ left:136px; top:957px; }
.dc-card--sec .cd-title{ left:37px; top:135px; width:240px; height:52px; }
.dc-card--sec .cd-list{ left:69px; top:196px; width:176.68px; height:51.228px; }
.dc-card--sec .cd-badge{ left:113px; top:36px; width:87.671px; height:90.085px; }
.dc-card--sec .cd-icon{ left:129.77px; top:45.2px; width:56.993px; height:56.993px; }

/* 1:1069 FIRE DETECTION AND SUPPRESSION SYSTEM */
.dc-card--fire{ left:829px; top:1262px; }
.dc-card--fire .cd-title{ left:11px; top:143px; width:292px; height:58px; }
.dc-card--fire .cd-list--a{ left:50px; top:207px; width:120px; height:53px; }
.dc-card--fire .cd-list--b{ left:175px; top:207px; width:89px; height:53px; }
.dc-card--fire .cd-badge{ left:111px; top:35px; width:92px; height:92px; }
.dc-card--fire .cd-icon{ left:131px; top:50px; width:62px; height:62px; }

/* 1:1079 ELECTRICAL SYSTEM */
.dc-card--elec{ left:482px; top:1262px; }
.dc-card--elec .cd-title{ left:8px; top:145px; width:292px; height:22px; }
.dc-card--elec .cd-list--a{ left:21px; top:179px; width:114px; height:46px; }
.dc-card--elec .cd-list--b{ left:141px; top:178px; width:152px; height:47px; }
.dc-card--elec .cd-badge{ left:112px; top:36px; width:92px; height:92px; }
.dc-card--elec .cd-icon{ left:127px; top:47px; width:70px; height:70px; }

/* =====================================================================
   1:1090 / 1:1091 — maroon centred statement
   ===================================================================== */
.dc-statement{
  position:absolute;
  left:60px; top:1657.83px;
  width:1119px;
  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;
}

/* =====================================================================
   1:1092 — OUR SCOPE OF SERVICE dark band + five glow cards
   NOTE: no z-index on this wrapper — a stacking context here would
   isolate the mix-blend-mode child so it would blend against nothing.
   ===================================================================== */
.dc-scope{ position:absolute; left:0; top:0; width:1280px; height:4667px; pointer-events:none; }

/* 1:1094 radial band */
.dc-scope .sc-bg{
  position:absolute; left:-27.5px; top:1856px; 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:1095 texture (opacity 54% already baked into the PNG alpha) */
.dc-scope .sc-tex{ position:absolute; left:-49.5px; top:1856px; width:1338px; height:613px; mix-blend-mode:multiply; }
.dc-scope .sc-tex img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; max-width:none; }

/* 1:1097 heading */
.dc-scope .sc-h2{
  position:absolute; left:287.5px; top:1957.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 */
.dc-sc{ position:absolute; width:202.097px; height:253px; }
.dc-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));
  /* outer glow + 1px edge highlight — present in the design render, fitted to it */
  box-shadow:0 0 30px rgba(110,189,244,0.7), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.dc-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;
}
.dc-sc .sc-title p{ margin:0; }
.dc-sc .sc-icon{ position:absolute; overflow:hidden; }
.dc-sc .sc-icon img{ display:block; width:100%; height:100%; }

/* 1:1098 PROJECT MANAGEMENT */
.dc-sc--prj{ left:737.5px; top:2095px; }
.dc-sc--prj .sc-title{ left:15.996px; top:181px; width:170.749px; height:43.86px; }
.dc-sc--prj .sc-icon{ left:12px; top:38px; width:177px; height:129px; }
/* 1:1252 TESTING & COMMISSIONING */
.dc-sc--test{ left:77.5px; top:2003px; }
.dc-sc--test .sc-title{ left:4.998px; top:173px; width:192px; height:44px; }
.dc-sc--test .sc-icon{ left:34px; top:36.002px; width:134px; height:122px; }
/* 1:1292 SUPPLY & INSTALLATION */
.dc-sc--sup{ left:515.5px; top:2154px; }
.dc-sc--sup .sc-title{ left:16.004px; top:180px; width:170.749px; height:43.86px; }
.dc-sc--sup .sc-icon{ left:22px; top:24.01px; width:154px; height:138px; }
/* 1:1557 SYSTEM INTEGRATION */
.dc-sc--sys{ left:296.5px; top:2096px; }
.dc-sc--sys .sc-title{ left:15.998px; top:156px; width:171px; height:73px; }
.dc-sc--sys .sc-icon{ left:41.006px; top:25.002px; width:118.99px; height:152px; }
/* 1:1602 DESIGN & ENGINEERING */
.dc-sc--des{ left:958.5px; top:2002px; }
.dc-sc--des .sc-title{ left:15.996px; top:174.89px; width:170.749px; height:43.86px; }
.dc-sc--des .sc-icon{ left:35px; top:47px; width:131px; height:124px; }

/* =====================================================================
   1:1659 — ENGINEERING DIGITAL / TECH. INFRASTRUCTURE
   ===================================================================== */
.dc-eng{ position:absolute; left:175px; top:2544px; width:930px; height:853px; }

.dc-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;
}
.dc-eng .en-h2 .a{ font-weight:400; color:#80121d; }

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

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

/* =====================================================================
   1:1670 — PARTNER WITH ELSEWEDY DIGITAL panel
   ===================================================================== */
.dc-partner{ position:absolute; left:0; top:0; width:1280px; height:4667px; pointer-events:none; }

/* 1:1672 dark rounded plate */
.dc-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:1673 Erica Anderson 3 lighten sphere */
.dc-partner .pt-orb{
  position:absolute; left:364px; top:3316px; width:554px; height:549px;
  mix-blend-mode:lighten; opacity:0.48; overflow:hidden;
}
.dc-partner .pt-orb img{ position:absolute; left:-10.73%; top:-23.15%; width:121.95%; height:123.15%; display:block; max-width:none; }

/* 1:1674 headline */
.dc-partner .pt-text{
  position:absolute; left:181px; 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);
}
.dc-partner .pt-text .r{ font-weight:400; }
.dc-partner .pt-text .l{ font-weight:300; }
.dc-partner .pt-text .s{ font-weight:600; }

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