/* =====================================================================
   article-page.css — Elsewedy Digital  ARTICLE (news detail)
   1:1 carbon copy of Figma frame 1:1950 ("about us"), 1280 x 1970,
   inside section 1:2027 ("/article-page").

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

   DOM order == Figma paint order:
     1:1952 hero gradient -> 1:1953 abstract render -> 1:1954 hero photo
     -> 1:1955 article panel -> 1:2021 footer -> 1:28 header
     -> 1:2022 hero headline -> 1:2023 article heading
     -> 1:2024 Ellipse 23 glow -> 1:2025 Rectangle 169 -> 1:2026 body

   OMITTED — fully off-canvas in this frame, so they paint nothing:
     1:1956 (top -1081), 1:1957 group incl. 1:1958..1:1965 (top -1242..-748,
     all bottoms above y=0), 1:2016 Line 12 (top 2263), 1:2017 headline
     (top -772.5), 1:2019 Ellipse 17 (top 2878), 1:2020 "OUR SERVICES"
     (left 100% + 13746px).
   ===================================================================== */

*{ 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:1950 frame fill) ---- */
#stage{
  position:relative;
  width:1280px;
  height:1970px;
  transform-origin:top left;
  overflow:hidden;
  background-image:linear-gradient(179.9080905710125deg, rgb(217,228,235) 20.393%, rgb(78,99,128) 99.948%);
  box-shadow:0px 4px 4px 0px rgba(0,0,0,0.25);
}

/* shared helper for the three rotated wrappers */
.ar-rot{ flex:none; position:relative; }

/* =====================================================================
   1:1952 — hero dark gradient plate
   centred, w 1302 -> left (1280-1302)/2 = -11; top -48, h 739.
   Spans -11..1291, so it fully covers 0..1280 (no edge sliver).
   ===================================================================== */
.ar-hero-grad{
  position:absolute; left:-11px; top:-48px; width:1302px; height:739px;
  background-image:linear-gradient(210.85189852664018deg, rgb(3,21,35) 30.349%, rgb(12,81,137) 83.03%);
}

/* =====================================================================
   1:1953 — "abstract digital art glowing lines…" render
   container 1308 x 736 centred -> left -14, top -47.
   Inner 736 x 1308 box rotated 90deg. PNG alpha max = 255, so the 0.62
   layer opacity is NOT baked in and is applied here in CSS.
   ===================================================================== */
.ar-hero-abstract{
  position:absolute; left:-14px; top:-47px; width:1308px; height:736px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ar-hero-abstract .ar-rot{ width:736px; height:1308px; transform:rotate(90deg); opacity:0.62; }
.ar-hero-abstract img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; max-width:none; }

/* =====================================================================
   1:1954 — "ChatGPT Image Jul 14, 2026, 01_02_06 AM 1"
   left -166 / right -226.31 -> w 1672.31; aspect 1672/941 -> h 941.17;
   top -182.  Inner box 940.62 x 1672.0 rotated 90deg. PNG alpha max = 255
   so the 0.78 layer opacity is applied in CSS.
   ===================================================================== */
.ar-hero-photo{
  position:absolute; left:-166px; top:-182px; width:1672.31px; height:941.17px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ar-hero-photo .ar-rot{ width:940.62px; height:1672px; transform:rotate(90deg); opacity:0.78; }
.ar-hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; max-width:none; }

/* =====================================================================
   1:1955 — article panel, left 0 / right 0 -> 1280 wide, top 574, h 990,
   radius 10px on the top corners only.
   ===================================================================== */
.ar-panel{
  position:absolute; left:0; top:574px; width:1280px; height:990px;
  border-radius:10px 10px 0 0;
  background-image:linear-gradient(to bottom, #a3b1c1, #203148);
}

/* =====================================================================
   FOOTER 1:2021
   The footer node is 1306 wide at x -4, bottom -17 with h 827
   -> top = 1970 + 17 - 827 = 1160 (the last 17px are clipped by #stage).
   Cloned verbatim from the verified certifications footer, which is
   expressed in the home-page coordinate system (footer top = 5895 and
   footer x = -13):  y shift = 1160 - 5895 = -4735,  x shift = -4 - -13 = +9.
   ===================================================================== */
.ar-footer-shift{
  position:absolute;
  left:9px; top:-4735px;
  pointer-events:none;      /* purely visual shell; real links re-enabled below */
}
.ar-footer-shift a{ pointer-events:auto; }

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

/* full 1306-wide plate at true x -4 (= -13 inside the shifted shell):
   spans -4..1302, so neither canvas edge gets a sliver. */
.sec-footer .ftr-bg{ position:absolute; left:-13px; top:5895px; width:1306px; height:827px; background:#203148; }

/* I1:2021;211:1250 / 211:1254 — the two rack renders.
   Exact Figma geometry: 211:1254 -> left 9.8% of 1306 = 128 (= 115 inside
   the shifted shell), w 362; 211:1250 -> +206.86. */
.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:206.86px; }
.sec-footer .ftr-rack img{ display:block; width:100%; height:100%; object-fit:contain; }

/* I1:2021;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:2021;211:1297 */
.sec-footer .ftr-paragraph{ position:absolute; left:698px; top:6150px; width:354px; 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:2021;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:2021;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:2021;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:2021;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:2021;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; 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); text-decoration:none; display:block; }
.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:2021;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:2021;211:1317 / 211:1310 */
.sec-footer .ftr-divider{ position:absolute; left:42px; top:6612px; width:1180px; height:1px; background:#ffffff; }
.sec-footer .ftr-copyright{ position:absolute; left:446px; top:6641px; 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; }

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

/* =====================================================================
   1:2022 — hero headline. Space Grotesk Bold 48 / 1.03, uppercase,
   centred, w 953 centred at 50% + 0.5px -> left 164, top 280.
   ===================================================================== */
.ar-hero-title{
  position:absolute; left:164px; top:280px; width:953px; height:109px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:48px;
  line-height:1.03; text-align:center; text-transform:uppercase; color:#ffffff;
  white-space:pre-wrap; word-break:break-word;
}

/* =====================================================================
   1:2023 — article heading. Space Grotesk Bold 36 / 1.03, uppercase.
   ===================================================================== */
.ar-article-title{
  position:absolute; left:80px; top:680px; width:437px; height:37px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:36px;
  line-height:1.03; text-align:justify; text-transform:uppercase; color:#ffffff;
  word-break:break-word;
}

/* =====================================================================
   1:2024 — Ellipse 23 soft glow.
   container right -386.78 -> left = 1280 + 386.78 - 852.78 = 814, top 602,
   852.78 x 540.883.  Inner 519.528 x 839.739 rotated 88.53deg; the SVG is
   inset -12.99% / -21% for the 54.55px Gaussian blur bleed.
   The 0.76 layer opacity is already inside the SVG — not re-applied.
   ===================================================================== */
.ar-glow{
  position:absolute; left:814px; top:602px; width:852.78px; height:540.883px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ar-glow .ar-rot{ width:519.528px; height:839.739px; transform:rotate(88.53deg); }
.ar-glow img{ position:absolute; left:-109.1px; top:-109.1px; width:737.728px; height:1057.94px; display:block; max-width:none; }

/* =====================================================================
   1:2025 — Rectangle 169, right 81 -> left = 1280 - 81 - 454 = 745,
   top 675, 454 x 394, radius 16, object-cover.
   ===================================================================== */
.ar-figure{ position:absolute; left:745px; top:675px; width:454px; height:394px; border-radius:16px; overflow:hidden; }
.ar-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; max-width:none; pointer-events:none; }

/* =====================================================================
   1:2026 — article body. Inter Light 20 / 1.03, justified, white.
   ===================================================================== */
.ar-body{
  position:absolute; left:80px; top:736px; width:590px; height:514px; margin:0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:20px;
  /* Figma reports leading 1.03, but the design render's measured line pitch
     is 21.27px (16 lines, glyph-top 739 -> 1058). Matched empirically. */
  line-height:21.27px; text-align:justify; color:#ffffff;
  white-space:pre-wrap; word-break:break-word;
}