/* =====================================================================
   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>");
  /* Pin the artwork to its design size instead of stretching it to the box.
     At the design height these are the same value, so this is a no-op today -
     but once the page grows, stretching would drag the bright centre of the
     radial all the way down the page. */
  background-size:100% 1878px; background-repeat:no-repeat;
  /* shows only where the artwork no longer reaches; identical at design height */
  background-color:#203148;
}

/* THE BUG THIS FIXES: .pv-rad was a fixed 1878px and nothing ever grew it,
   while #stage did grow with the body copy. Past roughly 1,900 characters the
   page ended in bare #stage white - and .pv-body is white text, so it became
   invisible. Measured on acud-data-center: a 697px band of unreadable copy.

   The class is added by the page's fit() ONLY once the page has actually
   grown, so a short project page still renders exactly as it did before.
   The overlay carries the radial's uneven bottom edge into the flat #203148
   the footer plate already uses, so there is no seam where it hands over. */
.pv-rad--grown::after{
  content:''; position:absolute; left:0; right:0; top:1660px; bottom:0;
  background:linear-gradient(180deg, rgba(32,49,72,0) 0, #203148 218px);
  pointer-events:none;
}

/* =====================================================================
   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:'Inter',sans-serif; font-weight:500; font-size:16px; text-transform:uppercase; color:#80121d; letter-spacing:0.6px;}
.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 0 16px 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:39.2px; }
.sec-footer .ftr-col-item--2{ top:70.4px; }
.sec-footer .ftr-col-item--3{ top:101.6px; }
.sec-footer .ftr-col-item--4{ top:132.8px; }

/* 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{
  /* height was a hard 139px - two lines. Your own "ACUD Containment Data
     Center" already needs three and overflowed it by 62px, spilling past the
     blurred plate behind it. The glyphs are unaffected by this change (the box
     never clipped, so the text was already painting where it does now); the
     box simply stops lying about its size, and the clamp keeps a very long
     title clear of .pv-overview at y=685. */
  position:absolute; left:397px; top:371px; width:486px;
  min-height:139px; height:auto; margin:0;
  /* No clamp. line-height is 1 at 64px, so glyph ink runs taller than the line
     boxes and every clamp I measured cut a real title off mid-letter - worse
     than the overflow it was meant to prevent. Letting the box grow is safe
     here: the title starts at y=371 and the next element, .pv-overview, is at
     685, so it would take about five 64px lines to reach it, and even then it
     would overlap rather than clip, which is the behaviour that already
     existed. Nothing is positioned relative to this box - it is absolute. */
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:64px;
  line-height:1; text-align:center; color:#ffffff; text-transform:uppercase;
  /* A title typed without spaces is one token, and a token with no break
     opportunity does not wrap - it runs off the side of the canvas and is
     clipped by the stage. Same reason the body copy carries these. */
  overflow-wrap:break-word; word-break:break-word;
  /* Breaking it fixes the sideways escape but lets an absurd title grow
     downwards instead: 120 characters with no spaces came to ten lines and
     reached y=1011, straight over the panel and its copy. The box starts at
     371 and .pv-overview is at 685, so 276px is the most it can take without
     touching it - a little over four lines at this 64px/1 type, which leaves
     the ink of a genuine four-line title uncut. Measured: the longest real
     title here, "ACUD Containment Data Center", is three lines / 192px, well
     inside it. A no-clamp box was the previous behaviour and is what let this
     happen; a tighter clamp cut real titles mid-letter, because line-height 1
     makes the ink taller than the line boxes. */
  /* padding-bottom, because line-height 1 makes the ink of EVERY title run
     past its last line box - about 9px at this size - so overflow:hidden
     alone shaved the descenders off three-line titles that fit perfectly
     well. The padding gives the box its own ink room; the cap is raised by
     the same amount so the ceiling is unchanged. The box is absolute and
     nothing follows it, so the extra height is invisible. */
  padding-bottom:14px; max-height:290px; overflow:hidden;
  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. */
/* Everything under the heading flows in one auto-height wrapper: the short
   description, the full body behind "see more", and the toggle. fit() measures
   THIS, and the grey card grows to whatever it comes to. */
.pv-body{ position:absolute; left:0; top:34px; width:592px; height:143px; }

/* ---- CMS-driven project pages (project-view.php) ----
   The hand-built project-view.html still uses the original 592px column with
   .pv-body placed absolutely inside .pv-text, and projects.html links to it.
   So the wider flow layout is scoped to a modifier rather than changed out
   from under it. 1096 = the 1226px card less the same 65px inset on both
   sides, so the copy runs the full width of the translucent slab. */
.pv-text--cms{ width:1096px; }
.pv-text--cms .pv-copy{ position:absolute; left:0; top:34px; width:1096px; }
.pv-text--cms .pv-body{ position:static; width:1096px; height:auto; }
.pv-text--cms .pv-body[hidden]{ display:none; }
.pv-text--cms .pv-desc{ width:1096px; }
.pv-text--cms .pv-desc p{ margin:0 0 10px; }
.pv-text--cms .pv-desc p:last-child{ margin-bottom:0; }

/* "See more" - a text button, deliberately quiet, sitting under the copy. */
.pv-more{
  display:inline-block; margin:14px 0 0; padding:0; border:0; background:none;
  font-family:'Inter',sans-serif; font-weight:500; font-size:17px; line-height:1.2;
  color:#ffffff; text-decoration:underline; text-underline-offset:4px; cursor:pointer;
  opacity:0.86; transition:opacity .18s ease;
}
.pv-more:hover{ opacity:1; }
.pv-more:focus-visible{ outline:2px solid #ffffff; outline-offset:3px; }
.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{
  /* nowrap: "Contact us" is 111px in Inter against 114px of room before the
     icon - it fits on one line, but the box is declared narrower and
     has a fixed height, so without this it wrapped and overflowed. */
  white-space: nowrap;
  position:absolute; left:18px; top:13px; width:104px; height:19px; line-height:19px; margin:0;
  font-family:'Inter',sans-serif; font-weight:500; font-size:16px;
  text-transform:uppercase; color:#ffffff; letter-spacing:0.6px;}
.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; }