/* =====================================================================
   services-page.css — Elsewedy Digital SERVICES page
   1:1 carbon copy of Figma frame 1:2029 ("about us" / services), 1280x2443.
   Fixed-px, frame-relative coordinates on a position:relative 1280-wide
   #stage of height 2443. The whole canvas scales via a width-fit script.
   ===================================================================== */

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

/* ---- The fixed design canvas (1:2029) ---- */
#stage{
  position:relative;
  width:1280px;
  height:2443px;
  transform-origin:top left;
  overflow:hidden;
  box-shadow:0px 4px 4px 0px rgba(0,0,0,0.25);
  background-image:linear-gradient(174.59063257836684deg, rgb(217,228,235) 23.085%, rgb(78,99,128) 113.18%);
  background-repeat:no-repeat;
  background-color:#d9e4eb;
}

img{ display:block; max-width:none; }

/* =====================================================================
   BACKGROUND LAYERS
   ===================================================================== */

/* 1:2030 — dark cyan->navy->black radial hero backdrop, rounded bottom.
   Design places it at x=1 / w=1278; extended to 0/1280 to kill the 1px sliver. */
.sv-hero-bg{
  position:absolute;
  left:0; top:-222px;
  width:1280px; height:942px;
  border-radius:0 0 25px 25px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1278 942' 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 57.229 -38.707 -37.65 566 651.23)'><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:2031 — top-right cube render, 30% opacity (mostly above the canvas) */
.sv-topglow{
  position:absolute;
  left:1015px; top:-195px;          /* right:-253 => 1280+253-518 */
  width:518px; height:498px;
  /* the exported PNG already has the node's 30% opacity baked into its alpha */
  pointer-events:none;
}
.sv-topglow img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }

/* --- rotated radial-glow ellipses (1:2032 / 1:2033 / 1:2034) --- */
.sv-glow{ position:absolute; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.sv-glow > .r{ flex:none; }
.sv-glow .b{ position:relative; }
.sv-glow .b img{ position:absolute; width:100%; height:100%; }

/* 1:2032 Ellipse 24 */
.sv-e24{ left:482.04px; top:916px; width:1038.96px; height:889.135px; }
.sv-e24 > .r{ transform:rotate(88.53deg); }
.sv-e24 .b{ width:863.345px; height:1017.163px; }
.sv-e24 .b img{ top:-10.73%; left:-12.64%; width:125.28%; height:121.46%; }

/* 1:2033 Ellipse 20 */
.sv-e20{ left:725.964px; top:1049.0925px; width:888.086px; height:1031.655px; }
.sv-e20 > .r{ transform:rotate(-87.57deg); }
.sv-e20 .b{ width:996.634px; height:846.562px; }
.sv-e20 .b img{ top:-12.89%; left:-10.95%; width:121.9%; height:125.78%; }

/* 1:2034 Ellipse 36 */
.sv-e36{ left:-275px; top:585.45px; width:795.742px; height:1046.524px; }
.sv-e36 > .r{ transform:rotate(74.14deg) scaleY(-1); }
.sv-e36 .b{ width:927.813px; height:563.691px; }
.sv-e36 .b img{ top:-19.35%; left:-11.76%; width:123.52%; height:138.7%; }

/* 1:2035 Vector — hero topology wireframe, screen blend.
   Design: x=1 / w=1279; extended to 0/1280 (sliver fix). */
.sv-topology{
  position:absolute;
  left:0; top:166px;
  width:1280px; height:596px;
  mix-blend-mode:screen;
  pointer-events:none;
}
.sv-topology img{ position:absolute; inset:0; width:100%; height:100%; }

/* 1:2036 Ellipse 35 — the thin ring behind the cube sphere */
.sv-ring{
  position:absolute;
  left:425px; top:192px;            /* centred on 640.5 / 407.5 */
  width:431px; height:431px;
  pointer-events:none;
}
.sv-ring img{ position:absolute; inset:0; width:100%; height:100%; }

/* =====================================================================
   HERO CONTENT
   ===================================================================== */

/* 1:2103 OUR CORE / SERVICES */
.sv-title{
  position:absolute;
  left:81px; top:313px;
  width:579px; height:208px;
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:64px;
  line-height:1.03;
  text-transform:uppercase;
  color:#ffffff;
}

/* 1:2104 blue-cubes sphere render */
.sv-sphere{
  position:absolute;
  left:333px; top:123px;            /* centred on 639.5 */
  width:613px; height:589px;
  pointer-events:none;
}
.sv-sphere img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;                  /* size-full with NO object-cover in the design code */
}

/* 1:2106 translucent glass panel */
.sv-glass{
  position:absolute;
  left:807px; top:436px;            /* right:81 => 1280-81-392 */
  width:392px; height:215px;
  border-radius:11px;
  background:rgba(255,255,255,0.10);
}

/* 1:2112 glass-panel paragraph */
.sv-glass-text{
  position:absolute;
  left:841px; top:464px;
  width:334px;
  margin:0;
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.105;
  color:#ffffff;
}

/* =====================================================================
   CONTACT US buttons
   ===================================================================== */
.sv-contact{ position:absolute; display:block; text-decoration:none; }
.sv-btn-sq{ position:absolute; top:7px; width:34px; height:31px; display:flex; align-items:center; justify-content:center; }
.sv-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;
}
.sv-kite{ transform:rotate(-45deg); }

/* red variant — 1:2108/2109/2110/2111 */
.sv-contact--red{ width:174px; height:46px; background:#80121d; }
.sv-contact--red .sv-btn-sq{ left:132px; background:#ffffff; }
.sv-contact--red .sv-btn-label{ left:18px; color:#ffffff; }
.sv-contact--red .sv-kite path{ fill:#80121d; }
.sv-contact--hero{ left:841px; top:578px; }

/* white variant — 1:2228.. / 1:2237.. */
.sv-contact--white{ width:170px; height:46px; background:#ffffff; }
.sv-contact--white .sv-btn-sq{ left:128px; background:#80121d; }
.sv-contact--white .sv-btn-label{ left:15px; color:#80121d; }
.sv-contact--white .sv-kite path{ fill:#ffffff; }
.sv-contact--managed{ left:77px; top:1011px; }
.sv-contact--noc{ left:1029px; top:1420px; }

/* =====================================================================
   LIGHT SECTION — imagery
   ===================================================================== */

/* 1:2115 corridor photo (managed services) */
.sv-photo-managed{
  position:absolute;
  left:557px; top:891px;
  width:644px; height:241px;
  overflow:hidden;
}
.sv-photo-managed img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* 1:2116 EL SEWEDY DIGITAL (right aligned) */
.sv-eyebrow{
  position:absolute;
  margin:0;
  height:57px;
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:32px;
  line-height:1.03;
  text-transform:uppercase;
  color:#213a5d;
}
.sv-eyebrow--right{ left:827px; top:825px; width:375px; text-align:right; }
.sv-eyebrow--left{ left:77px; top:1229px; width:375px; }

/* 1:2119 NOC photo */
.sv-photo-noc{
  position:absolute;
  left:81px; top:1296px;
  width:641px; height:249px;
  overflow:hidden;
  pointer-events:none;
}
.sv-photo-noc img{
  position:absolute;
  left:-20.77%; top:-74.05%;
  width:132.7%; height:246.1%;
}

/* =====================================================================
   1:2121 faint engineering-grid background (opacity 0.06)
   ===================================================================== */
.sv-bg-pattern{
  position:absolute;
  left:59px; top:604px;             /* centred: 2443/2-28 - 1179/2 */
  width:1179px; height:1179px;
  opacity:0.06;
  overflow:hidden;
  pointer-events:none;
}
.sv-bg-mask{
  position:absolute; inset:0;
  -webkit-mask-image:url("../assets/services/Vector1.svg");
          mask-image:url("../assets/services/Vector1.svg");
  -webkit-mask-size:1024.29px 682.55px;
          mask-size:1024.29px 682.55px;
  -webkit-mask-position:77.353px 248.223px;
          mask-position:77.353px 248.223px;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
.sv-bg-mask img{ position:absolute; inset:0; width:100%; height:100%; }
.sv-bgi{ position:absolute; }

/* =====================================================================
   LIGHT SECTION — copy blocks
   ===================================================================== */

/* 1:2225 MANAGED SERVICES */
.sv-h2{
  position:absolute;
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:48px;
  line-height:1.03;
  text-transform:uppercase;
  color:#003159;
}
.sv-h2--managed{ left:84px; top:812px; width:454px; }
.sv-h2--noc{ left:879px; top:1226px; width:348px; }

/* 1:2226 / 1:2235 body copy */
.sv-body{
  position:absolute;
  margin:0;
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.105;
  color:#010101;
}
.sv-body--managed{ left:80px; top:898px; width:333px; }
.sv-body--noc{ left:840px; top:1304px; width:361px; text-align:right; }

/* =====================================================================
   FOOTER  (cloned from home partials/footer.html — the home instance top
   is 5895; this design's footer top is 2443 + 17 - 827 = 1633.
   Delta = 1633 - 5895 = -4262.)
   ===================================================================== */
.sv-footer-shift{
  position:absolute;
  left:0; top:-4262px;
  pointer-events:none;
  z-index:7;
}

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

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

.sec-footer .ftr-servers{ position:absolute; left:124px; 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:702px; 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:707px; top:6150px; width:356px; margin:0; font-family:'Inter',sans-serif; font-size:16px; line-height:normal; 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:707px; 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:598px; 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:107px; top:6348px; width:154px; height:67px; object-fit:contain; z-index:1; }
.sec-footer .ftr-tagline{ position:absolute; left:104px; 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:104px; 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:451px; top:6348px; }
.sec-footer .ftr-col--support{ left:708px; top:6348px; }
.sec-footer .ftr-col-header{ margin:0 0 23.8px 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{ 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:964px; top:6348px; margin:0; z-index:1; }
.sec-footer .ftr-contact{ position:absolute; left:964px; z-index:1; }
.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',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:51px; top:6612px; width:1180px; height:1px; background:#ffffff; z-index:1; }
.sec-footer .ftr-copyright{ position:absolute; left:455px; 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; text-align:center; z-index:1; }

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

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