/* =====================================================================
   project-view-page.css — Elsewedy Digital  PROJECT VIEW
   1:1 carbon copy of Figma frame 1:2507 ("Desktop"), 1280 x 1802,
   inside section 1:2525 ("/project-view").

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

   DOM order == Figma paint order:
     1:2508 radial backdrop -> 1:2509 blurred glass render -> 1:28 header
     -> 1:2511 footer -> 1:2512 content group
   ===================================================================== */

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

/* ---- The fixed design canvas (1:2507 frame fill = white) ---- */
#stage{
  position:relative;
  width:1280px;
  height:1802px;
  transform-origin:top left;
  overflow:hidden;
  background:#ffffff;
}

/* =====================================================================
   1:2508 — radial-gradient backdrop
   Figma: centred, w 1278, top -20, bottom -56  ->  h 1802+20+56 = 1878.
   A 1278-wide centred box leaves a 1px sliver at BOTH canvas edges, so the
   box is widened to the full 1280 / left:0 (the gradient is stretched by
   preserveAspectRatio="none", so the paint is unchanged).
   Radius 0 0 25 25 falls 56px below the canvas and is clipped away.
   ===================================================================== */
.pv-rad{
  position:absolute; left:0; top:-20px; width:1280px; height:1878px;
  border-radius:0 0 25px 25px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1278 1878' 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 114.09 -38.707 -75.06 566 1298.3)'><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:2509 — "Floating_glass_lenses_and_rings_202607042344 2"
   left -340, top 0, 1766 x 986, blur 7.8px, opacity 0.29, object-fit cover.
   The export is a JPEG (RGB, no alpha channel), so the 0.29 layer opacity
   is NOT baked in and IS applied in CSS.  The node hangs 340px off the
   left edge; it is built at true coordinates and clipped by #stage.
   ===================================================================== */
.pv-glass{
  position:absolute; left:-340px; top:0; width:1766px; height:986px;
  filter:blur(7.8px); opacity:0.29; pointer-events:none;
}
.pv-glass img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; max-width:none; }

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

/* =====================================================================
   FOOTER 1:2511
   1306 wide, centred -> x = -13; bottom:0 with h 827 -> top = 1802-827 = 975.
   Cloned verbatim from the verified certifications-page footer, which is
   expressed in the home-page coordinate system (footer top = 5895);
   shift = 975 - 5895 = -4920.
   ===================================================================== */
.pv-footer-shift{
  position:absolute;
  left:0; top:-4920px;
  pointer-events:none;      /* purely visual shell; real links re-enabled below */
}
.pv-footer-shift a{ pointer-events:auto; }

.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:2511;211:1250 / 211:1254 — the two rack renders.
   Exact Figma geometry: 211:1254 -> left 9.8% of 1306 - 13 = 115, w 362;
   211:1250 -> left 25.64% of 1306 - 13 = 321.86 (= 115 + 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:2511;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:2511;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:2511;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:2511;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:2511;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:2511;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:2511;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:2511;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:2511;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; }

/* =====================================================================
   1:2512 — content group (painted last)
   ===================================================================== */

/* 1:2513 — translucent card: left 27 / right 27 -> w 1226, top 168, h 733 */
.pv-card{
  position:absolute; left:27px; top:168px; width:1226px; height:733px;
  background:rgba(233,233,233,0.2); border-radius:10px;
}

/* 1:2517 — project photo: left 66 / right 66 -> w 1148, top 204, h 442.
   JPEG export (RGB, no alpha) -> the 0.89 layer opacity is applied in CSS. */
.pv-photo{ position:absolute; left:66px; top:204px; width:1148px; height:442px; border-radius:10px; }
.pv-photo img{
  position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none;
  object-fit:cover; border-radius:10px; opacity:0.89; pointer-events:none;
}

/* 1:2518 — blurred dark plate behind the title: centred w 618 -> left 331 */
.pv-plate{
  position:absolute; left:331px; top:353px; width:618px; height:225px;
  background:rgba(19,34,47,0.58); filter:blur(35.35px); pointer-events:none;
}

/* 1:2519 — title, centred w 486 -> left 397 */
.pv-title{
  position:absolute; left:397px; top:371px; width:486px; height:139px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:64px;
  line-height:1; text-align:center; color:#ffffff; text-transform:uppercase;
  word-break:break-word;
}

/* 1:2514 — text block: left 92, top 685, 592 x 177 */
.pv-text{ position:absolute; left:92px; top:685px; width:592px; height:177px; color:#ffffff; }

/* 1:2516 — "PROJECT OVERVIEW" */
.pv-overview{
  position:absolute; left:2px; top:0; width:458px; height:33px; margin:0;
  font-family:'Inter',sans-serif; font-weight:500; font-size:36px;
  line-height:1; text-transform:uppercase; color:#ffffff;
}

/* 1:2515 — body copy, top 34 inside the block, w 592, h 143.
   The Figma text begins with an empty 20px line (a zero-width space) set in
   Space Grotesk Medium; it is reproduced so the vertical spacing matches. */
.pv-body{ position:absolute; left:0; top:34px; width:592px; height:143px; }
.pv-body p{ margin:0; font-size:20px; line-height:1; color:#ffffff; }
.pv-body .pv-body-lead{ font-family:'Space Grotesk',sans-serif; font-weight:500; }
.pv-body .pv-body-copy{ font-family:'Inter',sans-serif; font-weight:300; white-space:pre-wrap; }

/* 1:2520 — red CONTACT US button */
.pv-cta{ position:absolute; left:1017px; top:804px; width:174px; height:46px; background:#80121d; display:block; text-decoration:none; }
.pv-cta-label{
  position:absolute; left:18px; top:13px; width:104px; height:19px; line-height:19px; margin:0;
  font-family:'Ailerons','Space Grotesk',sans-serif; font-weight:400; font-size:16px;
  text-transform:uppercase; color:#ffffff;
}
.pv-cta-icon-bg{ position:absolute; left:132px; top:7px; width:34px; height:31px; background:#ffffff; display:flex; align-items:center; justify-content:center; }
.pv-cta-icon-bg .btn-kite{ transform:rotate(-45deg); }
.pv-cta-icon-bg .btn-kite path{ fill:#80121d; }