/* =========================================================
   Golden Gates Solutions — Homepage
   Ties into the header's "automatic gate" language (door-split CTAs,
   gradient accents) and the footer's luxury language (glass, glow,
   3D tilt) so the whole page reads as one system: light sections with
   crisp accents alternating with dark, glow-lit sections.
   ========================================================= */

/* ---- Shared button system (reused header CTA's gradient-sweep +
   sliding-arrow language so every primary CTA on the page feels like
   the same button family) ---- */
/* Elementor/Hello Elementor ship their own `button`/`a.button` reset
   that otherwise wins over plain author rules here (same root cause as
   the header burger/nav-dot fixes) — !important on every button family
   below forces the intended design to actually render. */
.ggs-btn{
	position:relative !important;overflow:hidden !important;isolation:isolate;
	display:inline-flex !important;align-items:center !important;gap:10px !important;
	padding:16px 30px !important;border-radius:12px !important;
	font-family:var(--font-body) !important;font-weight:800 !important;font-size:15px !important;line-height:1.3 !important;
	text-decoration:none !important;white-space:nowrap;cursor:pointer !important;border:none !important;
	margin:0 !important;
	transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.ggs-btn:hover{transform:translateY(-3px) !important;}
.ggs-btn-arrow{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease);}
html[dir="rtl"] .ggs-btn-arrow{transform:scaleX(-1);}
.ggs-btn:hover .ggs-btn-arrow{transform:translateX(4px);}
html[dir="rtl"] .ggs-btn:hover .ggs-btn-arrow{transform:scaleX(-1) translateX(4px);}

.ggs-btn-primary{
	background:var(--navy) !important;color:#fff !important;
	box-shadow:0 14px 30px -12px rgba(5,38,153,.55);
}
a.ggs-btn.ggs-btn-primary span{text-wrap:wrap;}
.ggs-btn-primary::before{
	content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(135deg,var(--gold),var(--gold-light));
	opacity:0;transition:opacity .35s var(--ease);
}
.ggs-btn-primary:hover::before{opacity:1;}
.ggs-btn-primary:hover{box-shadow:0 20px 40px -12px rgba(var(--gold-rgb),.55);color:#fff !important;}

.ggs-btn-ghost{
	background:transparent !important;color:var(--navy) !important;
	border:1.5px solid var(--border) !important;
}
.ggs-btn-ghost:hover{border-color:var(--gold) !important;color:var(--gold-deep) !important;background:var(--bg-alt) !important;}

.ggs-btn-outline{
	background:transparent !important;color:var(--navy) !important;
	border:1.5px solid rgba(5,38,153,.2) !important;
	padding:15px 34px !important;
}
.ggs-btn-outline:hover{border-color:var(--gold) !important;background:linear-gradient(135deg,rgba(var(--gold-rgb),.08),rgba(32,188,237,.08)) !important;color:var(--gold-deep) !important;}

/* ---- Section scaffolding ---- */
.ggs-section{position:relative;padding-block:96px;overflow:hidden;}
.ggs-section-dark{background:var(--navy-dark);color:rgba(255,255,255,.72);}
/* !important: style.css's `body.ggs-body h2` global heading rule is
   (0,1,2) specificity — more specific than this two-class-free
   `.ggs-section-dark h2` (0,1,1) — so without it the heading rendered
   navy-on-navy (invisible) on dark sections. */
.ggs-section-dark h2,.ggs-section-dark h3{color:#fff !important;}

.ggs-section-head{max-width:680px;margin-inline:auto;text-align:center;margin-bottom:56px;}
.ggs-section-head .ggs-eyebrow{margin-bottom:14px;}
.ggs-section-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.25;margin:0 0 16px;}
.ggs-section-head p{font-size:16px;line-height:1.85;color:var(--text-muted);margin:0;}
.ggs-section-head-light{color:rgba(255,255,255,.62) !important;}

.ggs-eyebrow{
	display:inline-flex;align-items:center;gap:8px;
	padding:8px 18px;border-radius:100px;
	background:rgba(var(--gold-rgb),.08);color:var(--gold-deep);
	font-family:var(--font-body);font-weight:800;font-size:13px;letter-spacing:.3px;
}
.ggs-eyebrow-light{background:rgba(255,255,255,.08);color:var(--gold-light);}

/* ===== Generic light/dark background support =====
   Lets any section widget's `dark_bg` control toggle .ggs-section-dark
   on/off without every widget needing its own light/dark markup swap —
   these descendant rules re-color the handful of element types that sit
   directly on the section background (not inside their own var(--surface)
   card, which is already background-agnostic). */
.ggs-section-dark .ggs-section-head p{color:rgba(255,255,255,.62);}
.ggs-section-dark .ggs-eyebrow{background:rgba(255,255,255,.08);color:var(--gold-light);}
.ggs-section-dark .ggs-why-grid li{color:rgba(255,255,255,.75);}
.ggs-section-dark .ggs-checklist-tag{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;}
.ggs-section-dark .ggs-checklist-tag-icon{stroke:var(--gold-light);}
.ggs-section-dark .ggs-checklist-outro{color:rgba(255,255,255,.62);}
.ggs-section-dark .ggs-expertise-inner h2{color:#fff;}
.ggs-section-dark .ggs-expertise-inner p{color:rgba(255,255,255,.65);}
.ggs-section-dark .ggs-cp-empty{color:rgba(255,255,255,.62);}
.ggs-section-dark .ggs-blog-empty p{color:rgba(255,255,255,.62);}
.ggs-section-dark .ggs-contact-follow-label{color:#fff;}
.ggs-section-dark .ggs-projects-filter-empty,.ggs-section-dark .ggs-projects-filter-hint{color:rgba(255,255,255,.62);}
.ggs-section-dark .ggs-legal-body,.ggs-section-dark .ggs-legal-body strong{color:rgba(255,255,255,.72);}
.ggs-section-dark .ggs-legal-body h2,.ggs-section-dark .ggs-legal-body h3{color:#fff;}

.ggs-section-foot{text-align:center;margin-top:52px;}

/* --ggs-i (set inline per item, e.g. style="--ggs-i:2") staggers the
   reveal within whatever list/grid it's in; --ggs-stagger (set on the
   parent grid) controls the gap between items — both optional, so a
   lone [data-reveal] block with neither still reveals cleanly. */
[data-reveal]{
	opacity:0;transform:translateY(28px) scale(.98);
	transition:opacity .7s var(--ease),transform .7s var(--ease);
	transition-delay:calc(var(--ggs-i,0) * var(--ggs-stagger,.08s));
}
[data-reveal].is-visible{opacity:1;transform:translateY(0) scale(1);}
/* Inside the Elementor editor's preview iframe, show every section at
   rest immediately instead of waiting on scroll — an editor needs to
   see what they're building, not a live simulation of a visitor
   scrolling down. `elementor-editor-active` only ever lands on the
   editor's OUTER window, never on this iframe's <body>, so the canvas
   is matched via `ggs-el-preview` (added by functions.php's body_class
   filter); neither class is present on a real visitor's page. The
   editor also inserts/re-renders widgets AFTER page load, which home.js
   (one scan at load) never sees — so anything JS would normally
   "open" or "reveal" has to already be in its finished state here:
   scroll-reveal blocks, the site-wide page-loader panels, and the
   hero's sliding doors. */
body.elementor-editor-active [data-reveal],
body.ggs-el-preview [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;}
body.ggs-el-preview .ggs-page-loader{display:none !important;}
html.ggs-loading:has(body.ggs-el-preview){overflow:visible !important;}
body.ggs-el-preview .ggs-hero-door{display:none !important;}

/* =========================================================
   1. HERO — content start / 3D sliding-door media reveal end
   ========================================================= */
.ggs-hero{padding-block:40px 100px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);}
.ggs-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}

.ggs-hero-content .ggs-eyebrow{margin-bottom:20px;}
.ggs-hero-content h1{font-size:clamp(34px,4.6vw,58px);line-height:1.15;margin:0 0 22px;color:var(--navy-dark);}
.ggs-hero-content p{font-size:17px;line-height:1.9;color:var(--text-muted);margin:0 0 34px;max-width:560px;}
.ggs-hero-actions{display:flex;flex-wrap:wrap;gap:16px;}

.ggs-hero-media-wrap{position:relative;}
.ggs-hero-media{
	position:relative;overflow:hidden;border-radius:32px;
	aspect-ratio:4/4.7;perspective:1600px;
	box-shadow:0 50px 90px -30px rgba(5,23,84,.35);
}
.ggs-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* The two "door" panels sit ON TOP of the image, fully covering it at
   rest, then slide apart on load with a slight 3D rotation — a literal
   automatic-door reveal rather than a generic fade/slider (the brief
   explicitly rules out a slider; this runs once on load, not on a loop). */
.ggs-hero-door{
	position:absolute;top:0;bottom:0;width:50%;z-index:2;
	background:linear-gradient(160deg,var(--navy),var(--navy-dark));
}
.ggs-hero-door-l{left:0;transform-origin:right center;}
.ggs-hero-door-r{right:0;transform-origin:left center;}
.ggs-hero-media.is-open .ggs-hero-door-l{animation:ggsDoorSlideL 1.1s .3s cubic-bezier(.65,0,.35,1) forwards;}
.ggs-hero-media.is-open .ggs-hero-door-r{animation:ggsDoorSlideR 1.1s .3s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes ggsDoorSlideL{
	0%{transform:translateX(0) rotateY(0);}
	45%{transform:translateX(0) rotateY(-8deg);}
	100%{transform:translateX(-102%) rotateY(0);}
}
@keyframes ggsDoorSlideR{
	0%{transform:translateX(0) rotateY(0);}
	45%{transform:translateX(0) rotateY(8deg);}
	100%{transform:translateX(102%) rotateY(0);}
}

.ggs-hero-badge{
	position:absolute;bottom:-22px;inset-inline-start:-22px;z-index:3;
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	width:104px;height:104px;border-radius:26px;
	background:rgba(255,255,255,.85);backdrop-filter:blur(14px);
	border:1px solid rgba(255,255,255,.6);
	box-shadow:0 20px 40px -16px rgba(5,23,84,.4);
	animation:ggsBadgeFloat 4s ease-in-out infinite;
}
.ggs-hero-badge strong{font-family:var(--font-head);font-size:26px;font-weight:900;
	background:linear-gradient(135deg,var(--navy),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ggs-hero-badge span{font-size:10.5px;font-weight:700;color:var(--text-muted);text-align:center;line-height:1.3;margin-top:2px;}
@keyframes ggsBadgeFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

@media (max-width:960px){
	.ggs-hero-inner{grid-template-columns:1fr;gap:40px;}
	.ggs-hero-content{order:1;text-align:center;}
	.ggs-hero-content p{margin-inline:auto;}
	.ggs-hero-actions{justify-content:center;}
	.ggs-hero-actions .ggs-btn{flex:1 1 auto;justify-content:center;}
	.ggs-hero-media-wrap{order:2;}
	.ggs-hero-media{aspect-ratio:4/3.4;}
}

/* =========================================================
   1b. HERO — VIDEO VARIANT (comparison build; flip
   $ggs_hero_variant in front-page.php to switch back to the
   classic sliding-door hero above — both stay fully intact).
   112px = the fixed header's own reserved height (body's
   padding-top in header.css), so this fills exactly the rest
   of the first viewport rather than the header eating into it.
   ========================================================= */
.ggs-hero-video{
	position:relative;overflow:hidden;isolation:isolate;
	min-height:calc(100vh - 112px);
	display:flex;align-items:center;
}
.ggs-hero-video-media{
	position:absolute;inset:0;z-index:0;
	background-position:center;background-size:cover;
}
.ggs-hero-video-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ggs-hero-video-overlay{
	position:absolute;inset:0;z-index:1;
	background:linear-gradient(180deg,rgba(3,10,35,.7) 0%,rgba(3,23,84,.5) 45%,rgba(3,10,35,.85) 100%);
}
.ggs-hero-video-inner{position:relative;z-index:2;padding-block:80px;display:flex;justify-content:center;}
.ggs-hero-video-content{max-width:720px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.ggs-hero-video-content .ggs-eyebrow{margin-bottom:20px;}
/* !important: style.css's `body.ggs-body h1` global heading rule
   (0,1,2 specificity) otherwise wins over this (0,1,1) and paints the
   text opaque navy instead of white — same cause as the dark-section
   h2 fix earlier. Plain white (not a gradient) for maximum legibility
   over the video. */
.ggs-hero-video-content h1{
	font-size:clamp(34px,4.8vw,60px);line-height:1.15;margin:0 0 22px;
	color:#fff !important;
	text-shadow:0 4px 24px rgba(0,0,0,.4);
}
.ggs-hero-video-content p{font-size:17px;line-height:1.9;color:rgba(255,255,255,.8);margin:0 0 36px;max-width:560px;}
.ggs-hero-video-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}

.ggs-btn-ghost-light{
	background:rgba(255,255,255,.08) !important;color:#fff !important;
	border:1.5px solid rgba(255,255,255,.4) !important;
	backdrop-filter:blur(6px);
}
.ggs-btn-ghost-light:hover{background:rgba(255,255,255,.2) !important;border-color:#fff !important;}

.ggs-hero-video-scroll{
	position:absolute;bottom:26px;inset-inline-start:50%;z-index:2;
	transform:translateX(-50%);
	display:flex;flex-direction:column;align-items:center;gap:6px;
	color:rgba(255,255,255,.75);text-decoration:none !important;
	font-size:11px;font-weight:700;letter-spacing:.3px;
	animation:ggsScrollBounce 2.2s ease-in-out infinite;
}
.ggs-hero-video-scroll svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@keyframes ggsScrollBounce{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

@media (max-width:960px){
	.ggs-hero-video{min-height:calc(100vh - 104px);}
	.ggs-hero-video-content{text-align:center;max-width:100%;}
	.ggs-hero-video-content p{margin-inline:auto;}
	.ggs-hero-video-actions{justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
	.ggs-hero-video-el{display:none;}
	.ggs-hero-video-scroll{animation:none;}
}

/* =========================================================
   2. PRODUCTS GRID — 4 / 2 / 1, 3D tilt on hover
   ========================================================= */
.ggs-products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;perspective:1600px;--ggs-stagger:.08s;}
.ggs-product-card{
	position:relative;
	display:flex;flex-direction:column;
	background:var(--surface);border-radius:20px;overflow:hidden;
	border:1.5px solid var(--border);
	box-shadow:0 16px 34px -20px rgba(5,23,84,.2);
	text-decoration:none;color:inherit;
	transition:box-shadow .45s var(--ease),border-color .45s var(--ease),transform .35s var(--ease);
	will-change:transform;
}
/* Gold sweep bar (top) + warm glow-lift on hover — the same light
   language as the footer's rail/orbs, brought up into the card grid
   instead of a plain shadow bump, and layered on top of the JS 3D
   tilt in home.js rather than fighting it. */
.ggs-product-card::after{
	content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
	background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
	transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease);
}
.ggs-product-card:hover::after{transform:scaleX(1);}
.ggs-product-card:hover{box-shadow:0 34px 64px -22px rgba(var(--gold-rgb),.4);border-color:rgba(var(--gold-rgb),.4);}
.ggs-product-card-media{display:block;aspect-ratio:4/3;overflow:hidden;}
.ggs-product-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.ggs-product-card:hover .ggs-product-card-media img{transform:scale(1.08);}
.ggs-product-card-body{display:flex;flex-direction:column;flex:1;padding:22px;gap:8px;}
.ggs-product-card-body strong{font-family:var(--font-head);font-size:16.5px;color:var(--navy-dark);}
.ggs-product-card-desc{font-size:13px;line-height:1.7;color:var(--text-muted);flex:1;}
.ggs-product-card-cta{
	display:inline-flex;align-items:center;gap:6px;margin-top:8px;
	font-size:13px;font-weight:800;color:var(--gold-deep);
}
.ggs-product-card-cta .ggs-btn-arrow{width:14px;height:14px;}

@media (max-width:960px){.ggs-products-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.ggs-products-grid{grid-template-columns:1fr;}}

/* =========================================================
   3. SERVICES — 3 large equal cards, image + overlay + number
   ========================================================= */
.ggs-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;--ggs-stagger:.12s;}
.ggs-service-card{
	position:relative;display:block;overflow:hidden;border-radius:24px;
	aspect-ratio:3/3.6;text-decoration:none;color:#fff;
	box-shadow:0 24px 50px -22px rgba(0,0,0,.55);
	border:1.5px solid transparent;
	transition:box-shadow .5s var(--ease),border-color .5s var(--ease),transform .35s var(--ease);
	will-change:transform;
}
.ggs-service-card::after{
	content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
	background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
	transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease);
}
.ggs-service-card:hover::after{transform:scaleX(1);}
.ggs-service-card:hover{box-shadow:0 40px 76px -24px rgba(var(--gold-rgb),.5);border-color:rgba(var(--gold-rgb),.45);}
/* !important on width/height: Elementor ships a global `.elementor
   img{height:auto;max-width:100%;...}` reset (specificity 0,1,1,
   beating this rule's plain 0,1,0) on every Elementor-built page —
   confirmed directly via the deployed stylesheet's matched rules that
   this is what was actually sizing the image off its own intrinsic
   ratio instead of the card, regardless of layering technique. */
.ggs-service-card-img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;transition:transform .7s var(--ease);}
.ggs-service-card:hover .ggs-service-card-img{transform:scale(1.1);}
.ggs-service-card-overlay{
	position:absolute;inset:0;
	background:none;
}
.ggs-service-card-num{
	position:absolute;top:22px;inset-inline-end:22px;z-index:1;
	font-family:var(--font-head);font-size:15px;font-weight:900;
	color:rgba(255,255,255,.8);
	padding:8px 14px;border-radius:100px;
	background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
	border:1px solid rgba(255,255,255,.18);
}
/* position:relative (not absolute, per the request) — needed so
   z-index:1 still has any effect at all: z-index is a no-op on a
   position:static element, and without it this normal-flow block
   would paint BEHIND the absolutely-positioned image/overlay (CSS's
   stacking order always paints in-flow static content before
   positioned z-index:auto content), making the text invisible. */
.ggs-service-card-body{position:relative;z-index:1;padding:70px 28px 28px;display:flex;flex-direction:column;gap:10px;}
/* Explicit + !important rather than relying on inheritance from
   .ggs-service-card's own color:#fff — this card renders inside an
   Elementor widget container on pages other than the homepage
   (class-ggs-page-services-widget.php), and Elementor's own Kit/
   container text-color defaults can otherwise win over a plain
   inherited value. */
.ggs-service-card-body strong,
.ggs-service-card:hover .ggs-service-card-body strong{
	font-family:var(--font-head);font-size:20px;line-height:1.3;color:#fff !important;
}
.ggs-service-card-desc{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.72);}
.ggs-service-card-cta{
	display:inline-flex;align-items:center;gap:6px;margin-top:6px;
	font-size:13.5px;font-weight:800;color:var(--gold-light);
	transition:color .35s var(--ease),gap .35s var(--ease);
}
.ggs-service-card-cta .ggs-btn-arrow{width:14px;height:14px;}
/* .ggs-btn-arrow's stroke:currentColor follows this automatically. */
.ggs-service-card:hover .ggs-service-card-cta{color:#fff;gap:10px;}

@media (max-width:900px){
	.ggs-services-grid{grid-template-columns:1fr;}
	/* Was a fixed aspect-ratio (3/2.4) on the WHOLE card — but the text
	   body sits absolutely-positioned on top of the image (see
	   .ggs-service-card-body above), so it never contributed to the
	   card's own height. Any card whose heading+description needed more
	   vertical room than that fixed ratio allowed simply got its text
	   clipped/cut off at the card's bottom edge. Fix: let the body sit
	   in NORMAL flow on mobile instead (min-height as a floor only, not
	   a hard cap), so the card grows to fit whatever content it holds.
	   .ggs-service-card-img-wrap (the plain, non-replaced <span> the
	   image now lives in — see its own comment above) stays absolute/
	   inset:0 from the base rule unchanged, and correctly stretches to
	   match this now-variable card height on its own — no extra rule
	   needed here for it. */
	.ggs-service-card{aspect-ratio:auto;min-height:280px;}
	.ggs-service-card-body{position:relative;inset-inline:auto;bottom:auto;}
}

/* =========================================================
   4. ABOUT — split, image | content, 6-feature grid
   ========================================================= */
.ggs-about-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;}
.ggs-about-media{border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(5,23,84,.3);}
.ggs-about-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/4.6;}
.ggs-about-content h2{font-size:clamp(26px,3vw,38px);margin:14px 0 20px;color:var(--navy-dark);}
.ggs-about-content p{font-size:15.5px;line-height:1.9;color:var(--text-muted);margin:0 0 16px;}
.ggs-why-title{font-size:18px;font-family:var(--font-head);color:var(--navy-dark);margin:24px 0 16px;}
.ggs-why-grid{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;--ggs-stagger:.07s;}
.ggs-why-grid li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.6;color:var(--text);}
.ggs-why-check{width:19px;height:19px;flex-shrink:0;margin-top:1px;border-radius:50%;padding:3px;
	background:linear-gradient(135deg,var(--navy),var(--gold));color:#fff;
	stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}

@media (max-width:960px){
	.ggs-about-inner{grid-template-columns:1fr;gap:32px;}
	.ggs-why-grid{grid-template-columns:1fr;}
}

/* =========================================================
   5. PROJECTS
   ========================================================= */
.ggs-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;--ggs-stagger:.1s;}
.ggs-project-card{
	position:relative;
	display:block;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;
	background:var(--surface);border:1.5px solid var(--border);
	box-shadow:0 16px 34px -20px rgba(5,23,84,.2);
	transition:box-shadow .45s var(--ease),border-color .45s var(--ease),transform .35s var(--ease);
	will-change:transform;
}
.ggs-project-card::after{
	content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
	background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
	transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease);
}
.ggs-project-card:hover::after{transform:scaleX(1);}
.ggs-project-card:hover{box-shadow:0 34px 64px -22px rgba(var(--gold-rgb),.4);border-color:rgba(var(--gold-rgb),.4);}
.ggs-project-card-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;}
.ggs-project-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.ggs-project-card:hover .ggs-project-card-media img{transform:scale(1.08);}
.ggs-project-card-overlay{
	position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;
	background:none;
	opacity:0;transition:opacity .35s var(--ease);
}
.ggs-project-card:hover .ggs-project-card-overlay{opacity:1;}
.ggs-project-card-meta{display:flex;flex-direction:column;gap:2px;color:#fff;font-size:12.5px;font-weight:700;}
.ggs-project-card-body{padding:20px 22px;display:flex;flex-direction:column;gap:6px;}
.ggs-project-card-body strong{font-family:var(--font-head);font-size:16px;color:var(--navy-dark);}
.ggs-project-card-body span{font-size:13px;color:var(--text-muted);}

@media (max-width:960px){.ggs-projects-grid{grid-template-columns:1fr;}}

/* ---- Filterable projects grid (/projects/ page) ----
   Each card is a <button> (opens the lightbox, no navigation), so it
   reuses .ggs-project-card-media/-overlay/-meta/-body as-is but needs
   its own button-reset base instead of .ggs-project-card's <a> base. */
.ggs-projects-filter-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:48px;}
/* NOT `all:unset` — that resets opacity/transform to their initial
   values too, at the SAME specificity as the [data-reveal] base rule,
   and (being declared later in this file) silently wins the cascade —
   so these cards never actually fade+rise in like every other
   [data-reveal] element, they just snap straight to visible. Reset
   only the actual button-chrome properties instead, and leave
   opacity/transform to the [data-reveal]/.is-visible rules. The
   [data-reveal] combinator below forces it past any doubt. */
.ggs-project-filter-card{
	appearance:none;-webkit-appearance:none;margin:0;padding:0;
	box-sizing:border-box;display:block;width:100%;cursor:pointer;font:inherit;text-align:start;color:inherit;
	position:relative;border-radius:22px;overflow:hidden;
	background:var(--surface);border:1.5px solid var(--border);
	box-shadow:0 16px 34px -20px rgba(5,23,84,.2);
	transition:box-shadow .45s var(--ease),border-color .45s var(--ease);
}
/* No !important here on purpose: the 3D pointer-tilt (home.js,
   [data-tilt]) sets transform via inline style on hover, and
   !important on a stylesheet rule would permanently pin it and break
   the tilt. Dropping `all:unset` above is what actually fixes the
   reveal — it stops fighting [data-reveal]'s own opacity/transform at
   equal specificity, so the normal .is-visible rule now wins cleanly. */
.ggs-project-filter-card::after{
	content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
	background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
	transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease);
}
.ggs-project-filter-card:hover::after{transform:scaleX(1);}
.ggs-project-filter-card:hover{box-shadow:0 34px 64px -22px rgba(var(--gold-rgb),.4);border-color:rgba(var(--gold-rgb),.4);}
.ggs-project-filter-card:hover .ggs-project-card-media img{transform:scale(1.08);}
.ggs-project-filter-card:hover .ggs-project-card-overlay{opacity:1;}
.ggs-project-filter-card.is-filtered-out{display:none;}
.ggs-project-card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none;}
.ggs-project-card-play svg{width:52px;height:52px;fill:rgba(255,255,255,.92);filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));transition:transform .4s var(--ease);}
.ggs-project-filter-card:hover .ggs-project-card-play svg{transform:scale(1.12);}

/* Forced overrides, per explicit request — guarantees the card's look
   in BOTH its normal (.is-visible, at rest) and :hover state even if
   something else on the page (an Elementor global widget/button
   default, a Kit-level style, a UA default) still wins at equal or
   higher specificity. `transform` is deliberately left OUT of these
   !important rules: the 3D pointer-tilt (home.js, [data-tilt]) sets
   transform via inline style on hover, and !important on a stylesheet
   rule always beats a plain inline style — forcing it here would
   permanently kill the tilt on every card. Everything else about the
   card's appearance is safe to force. */
.ggs-project-filter-card,
.ggs-project-filter-card.is-visible{
	appearance:none !important;-webkit-appearance:none !important;
	margin:0 !important;padding:0 !important;box-sizing:border-box !important;
	display:block !important;width:100% !important;cursor:pointer !important;
	font:inherit !important;text-align:start !important;color:inherit !important;
	position:relative !important;border-radius:22px !important;overflow:hidden !important;
	background:var(--surface) !important;border:1.5px solid var(--border) !important;
	box-shadow:0 16px 34px -20px rgba(5,23,84,.2) !important;
}
.ggs-project-filter-card.is-visible{opacity:1 !important;}
.ggs-project-filter-card:hover,
.ggs-project-filter-card.is-visible:hover{
	box-shadow:0 34px 64px -22px rgba(var(--gold-rgb),.4) !important;
	border-color:rgba(var(--gold-rgb),.4) !important;
}
.ggs-project-filter-card:hover .ggs-project-card-media img,
.ggs-project-filter-card.is-visible:hover .ggs-project-card-media img{
	transform:scale(1.08) !important;
}
.ggs-project-filter-card:hover .ggs-project-card-overlay,
.ggs-project-filter-card.is-visible:hover .ggs-project-card-overlay{
	opacity:1 !important;
}
.ggs-project-filter-card.is-filtered-out{display:none !important;}

.ggs-projects-filter-empty{text-align:center;font-size:15px;color:var(--text-muted);padding:40px 20px;}
.ggs-projects-filter-hint{text-align:center;font-size:13.5px;color:var(--text-muted);margin:32px 0 0;}

/* ---- Project lightbox: shared modal populated from each card's
   data-project JSON attribute (see class-ggs-projects-filter-widget.php
   and the ggsProjectLightbox block in home.js). ---- */
.ggs-project-lightbox{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s;}
.ggs-project-lightbox.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--ease);}
.ggs-project-lightbox-backdrop{position:absolute;inset:0;background:rgba(5,10,30,.82);backdrop-filter:blur(6px);}
.ggs-project-lightbox-inner{
	position:relative;z-index:1;width:100%;max-width:1080px;max-height:90vh;
	display:grid;grid-template-columns:1.4fr 1fr;background:var(--surface);border-radius:26px;overflow:hidden;
	box-shadow:0 60px 120px -40px rgba(0,0,0,.6);transform:scale(.92) translateY(20px);transition:transform .4s var(--ease);
}
.ggs-project-lightbox.is-open .ggs-project-lightbox-inner{transform:scale(1) translateY(0);}
/* Forced — same reasoning as .ggs-project-filter-card above: a plain
   <button> carries browser-default padding/margin/font that this rule
   didn't reset before, and nothing here conflicts with an inline-JS
   transform (unlike the tilt cards), so !important is safe on every
   property including transform/rotate on hover.

   Solid navy, not translucent white: this button is a direct child of
   .ggs-project-lightbox-inner (positioned via inset-inline-end), which
   in RTL puts its top-end corner over the DETAILS column — white
   background (var(--surface)) — not over the dark media column it was
   originally designed to float on. A translucent-white pill on a white
   background is nearly invisible. Solid navy + white icon reads
   clearly against both the white details panel and any photo/video in
   the media column, so it no longer matters which side it lands on. */
.ggs-project-lightbox-close{
	all:unset !important;
	position:absolute !important;top:16px !important;inset-inline-end:16px !important;z-index:3 !important;
	width:38px !important;height:38px !important;border-radius:50% !important;box-sizing:border-box !important;
	background:var(--navy) !important;color:#fff !important;border:0 !important;
	box-shadow:0 6px 18px -4px rgba(5,23,84,.55) !important;
	display:flex !important;align-items:center !important;justify-content:center !important;
	margin:0 !important;padding:0 !important;cursor:pointer !important;
	transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease) !important;
}
.ggs-project-lightbox-close:hover{
	background:var(--gold) !important;transform:rotate(90deg) !important;
	box-shadow:0 8px 22px -4px rgba(var(--gold-rgb),.55) !important;
}
.ggs-project-lightbox-close svg{
	width:18px !important;height:18px !important;stroke:currentColor !important;fill:none !important;stroke-width:2.3 !important;stroke-linecap:round !important;
}
.ggs-project-lightbox-media{position:relative;background:#000;aspect-ratio:4/3;}
.ggs-project-lightbox-slides{position:relative;width:100%;height:100%;}
.ggs-project-lightbox-slide{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease);}
.ggs-project-lightbox-slide.is-active{opacity:1;}
.ggs-project-lightbox-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.ggs-project-lightbox-slide iframe,.ggs-project-lightbox-slide video{width:100%;height:100%;display:block;border:0;background:#000;}
.ggs-project-lightbox-nav{
	position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
	background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;z-index:2;
	transition:background .3s var(--ease);
}
.ggs-project-lightbox-prev{inset-inline-start:14px;}
.ggs-project-lightbox-next{inset-inline-end:14px;}
.ggs-project-lightbox-nav:hover{background:var(--gold);}
.ggs-project-lightbox-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.ggs-project-lightbox-nav[hidden]{display:none;}
.ggs-project-lightbox-dots{position:absolute;bottom:14px;inset-inline:0;display:flex;justify-content:center;gap:6px;z-index:2;}
.ggs-project-lightbox-dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);border:0;padding:0;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease);}
.ggs-project-lightbox-dots button.is-active{background:var(--gold);transform:scale(1.3);}
.ggs-project-lightbox-details{padding:32px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;}
.ggs-project-lightbox-details strong{font-family:var(--font-head);font-size:20px;line-height:1.4;color:var(--navy-dark);}
.ggs-project-lightbox-badges{display:flex;flex-wrap:wrap;gap:8px;}
.ggs-project-lightbox-badges span{padding:6px 12px;border-radius:999px;background:var(--bg-alt);color:var(--navy);font-size:12.5px;font-weight:700;}
.ggs-project-lightbox-badges span:empty{display:none;}
.ggs-project-lightbox-details p{font-size:14.5px;line-height:1.85;color:var(--text-muted);margin:0;}
.ggs-project-lightbox-details .ggs-btn{align-self:flex-start;margin-top:auto;}
body.ggs-lightbox-open{overflow:hidden;}
@media (max-width:760px){
	.ggs-project-lightbox{padding:0;}
	.ggs-project-lightbox-inner{grid-template-columns:1fr;max-height:100vh;border-radius:0;overflow-y:auto;}
	.ggs-project-lightbox-media{aspect-ratio:4/3;}
}

/* =========================================================
   6. PROCESS — horizontal track / vertical on mobile
   ========================================================= */
.ggs-process-track{
	position:relative;display:grid;grid-template-columns:repeat(var(--ggs-steps,4),1fr);gap:30px;
	margin-bottom:52px;--ggs-stagger:.1s;
}
.ggs-process-track::before{
	content:"";position:absolute;top:26px;left:12%;right:12%;height:2px;z-index:0;
	background:linear-gradient(90deg,rgba(var(--gold-rgb),.5),rgba(32,188,237,.5));
}
.ggs-process-step{position:relative;z-index:1;text-align:center;padding-inline:8px;transition:transform .4s var(--ease);}
.ggs-process-step:hover{transform:translateY(-8px);}
.ggs-process-num{
	display:flex;align-items:center;justify-content:center;
	width:52px;height:52px;border-radius:50%;margin:0 auto 20px;
	background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy-dark);
	font-family:var(--font-head);font-weight:900;font-size:19px;
	box-shadow:0 12px 26px -8px rgba(var(--gold-rgb),.6);
	transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.ggs-process-step:hover .ggs-process-num{transform:scale(1.12) rotate(-8deg);box-shadow:0 18px 38px -8px rgba(var(--gold-rgb),.85);}
.ggs-process-step strong{display:block;font-family:var(--font-head);font-size:16.5px;color:#fff;margin-bottom:10px;}
.ggs-process-step p{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.6);margin:0;}
/* process defaults to dark (dark_bg control default 'yes'); this is the
   light-section counterpart for pages where it's toggled off. */
.ggs-section:not(.ggs-section-dark) .ggs-process-step strong{color:var(--navy-dark);}
.ggs-section:not(.ggs-section-dark) .ggs-process-step p{color:var(--text-muted);}

@media (max-width:860px){
	.ggs-process-track{grid-template-columns:1fr;gap:36px;}
	.ggs-process-track::before{display:none;}
}

/* =========================================================
   7. CLIENTS & PARTNERS — two tabs, each an infinite logo
   marquee (duplicated track, seamless translateX loop, pauses
   on hover so a visitor can actually click a logo).
   ========================================================= */
.ggs-cp-tabs{
	display:flex;justify-content:center;gap:10px;margin:-16px auto 44px;
}
/* Forced — same reasoning as .ggs-project-lightbox-close/.ggs-scrolltop-fab
   above: all:unset wipes any browser-default <button> chrome (or a
   stray external style) first, then every property is re-declared
   with !important right after, in base/:hover/.is-active. Safe to
   force transform too: nothing sets an inline style on this element
   (home.js only toggles classList/aria-selected on it). */
.ggs-cp-tab{
	all:unset !important;
	appearance:none !important;-webkit-appearance:none !important;
	box-sizing:border-box !important;display:inline-block !important;
	border:1.5px solid var(--border) !important;background:var(--surface) !important;
	color:var(--text-muted) !important;font-family:var(--font-body) !important;font-weight:700 !important;font-size:14.5px !important;
	padding:10px 28px !important;border-radius:100px !important;cursor:pointer !important;margin:0 !important;
	transform:translateY(0) !important;
	transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease) !important;
}
.ggs-cp-tab:hover{border-color:rgba(var(--gold-rgb),.4) !important;color:var(--gold-deep) !important;}
.ggs-cp-tab.is-active{
	background:var(--navy) !important;border-color:var(--navy) !important;color:#fff !important;
	box-shadow:0 12px 26px -10px rgba(var(--navy-rgb),.5) !important;transform:translateY(-2px) !important;
}

.ggs-cp-panel{display:none;}
.ggs-cp-panel.is-active{display:block;}
.ggs-cp-empty{text-align:center;color:var(--text-muted);font-size:14.5px;padding:30px 0;}

.ggs-cp-marquee{
	position:relative;overflow:hidden;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ggs-cp-marquee-track{
	display:flex;align-items:center;gap:56px;width:max-content;
	animation:ggsCpMarquee 32s linear infinite;
	will-change:transform;
}
.ggs-cp-marquee:hover .ggs-cp-marquee-track{animation-play-state:paused;}
@keyframes ggsCpMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
html[dir="rtl"] .ggs-cp-marquee-track{animation-name:ggsCpMarqueeRtl;}
@keyframes ggsCpMarqueeRtl{from{transform:translateX(0);}to{transform:translateX(50%);}}

.ggs-cp-logo{
	flex:none;display:flex;align-items:center;justify-content:center;
	width:150px;height:76px;
}
a.ggs-cp-logo:hover{transform:translateY(-3px);}
.ggs-cp-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}

@media (max-width:640px){
	.ggs-cp-tabs{margin-bottom:32px;}
	/* !important needed here too — the base rule above now forces
	   these same properties. */
	.ggs-cp-tab{padding:9px 20px !important;font-size:13.5px !important;}
	.ggs-cp-marquee-track{gap:36px;}
	.ggs-cp-logo{width:110px;height:56px;}
}

@media (prefers-reduced-motion:reduce){
	.ggs-cp-marquee-track{animation:none;}
}

/* =========================================================
   8. FAQ — accordion
   ========================================================= */
.ggs-faq-layout{max-width:820px;}
.ggs-accordion{display:flex;flex-direction:column;gap:14px;--ggs-stagger:.07s;}
.ggs-accordion-item{
	border:1px solid var(--border);border-radius:16px;overflow:hidden;
	background:var(--surface);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.ggs-accordion-item:hover{transform:translateY(-2px);border-color:rgba(var(--gold-rgb),.3);}
.ggs-accordion-item.is-open{border-color:rgba(var(--gold-rgb),.35);box-shadow:0 16px 30px -20px rgba(5,23,84,.3);}
.ggs-accordion-trigger{
	display:flex !important;align-items:center !important;justify-content:space-between !important;width:100% !important;gap:16px !important;
	padding:20px 24px !important;background:none !important;border:none !important;border-radius:0 !important;
	margin:0 !important;cursor:pointer !important;text-align:start !important;
	font-family:var(--font-body) !important;font-weight:700 !important;font-size:15.5px !important;line-height:1.5 !important;color:var(--navy-dark) !important;
	transition:color .3s var(--ease);
}
.ggs-accordion-item.is-open .ggs-accordion-trigger{color:var(--gold-deep) !important;}
button.ggs-accordion-trigger span{text-wrap:wrap;}
.ggs-accordion-chev{width:18px;height:18px;flex-shrink:0;stroke:var(--gold-deep);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease);}
.ggs-accordion-item.is-open .ggs-accordion-chev{transform:rotate(180deg);}
.ggs-accordion-panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.ggs-accordion-panel-inner{padding:0 24px 22px;font-size:14.5px;line-height:1.85;color:var(--text-muted);}

.ggs-faq-more{text-align:center;margin:36px 0 0;font-size:14.5px;color:var(--text-muted);}
.ggs-faq-more a{color:var(--gold-deep);font-weight:800;text-decoration:none;}
.ggs-faq-more a:hover{text-decoration:underline;}

/* =========================================================
   9. QUOTE FORM
   ========================================================= */
.ggs-quote-section{background:linear-gradient(180deg,var(--bg-alt) 0%,var(--bg) 100%);}
.ggs-quote-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:flex-start;}
.ggs-quote-intro h2{font-size:clamp(26px,3vw,36px);margin:16px 0 18px;color:var(--navy-dark);}
.ggs-quote-intro p{font-size:15.5px;line-height:1.85;color:var(--text-muted);}
.ggs-qf-info-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.ggs-qf-info-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.6;color:var(--text);}

.ggs-quote-form-wrap{
	background:var(--surface);border-radius:26px;padding:36px;
	border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(5,23,84,.3);
}
.ggs-qf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.ggs-qf-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.ggs-qf-row .ggs-qf-field{margin-bottom:0;}
.ggs-qf-field label{font-size:13.5px !important;font-weight:700 !important;color:var(--navy-dark) !important;font-family:var(--font-body) !important;}
/* !important throughout: Elementor/Hello Elementor ship their own form
   -field reset (border, padding, box-shadow, radius) that otherwise
   wins over these plain rules — same recurring cause as the button
   and accordion fixes above. */
.ggs-qf-field input,.ggs-qf-field select,.ggs-qf-field textarea{
	width:100% !important;
	padding:13px 16px !important;border-radius:10px !important;border:1.5px solid var(--border) !important;
	font-family:var(--font-body) !important;font-size:14.5px !important;line-height:1.5 !important;
	color:var(--text) !important;background:var(--bg) !important;
	box-shadow:none !important;margin:0 !important;
	transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.ggs-qf-field input:focus,.ggs-qf-field select:focus,.ggs-qf-field textarea:focus{
	outline:none !important;border-color:var(--gold) !important;box-shadow:0 0 0 4px rgba(var(--gold-rgb),.12) !important;
}
.ggs-qf-field textarea{resize:vertical;min-height:100px !important;}
select#ggs_q_type{margin-bottom:18px !important;}
.ggs-qf-field input::placeholder,.ggs-qf-field textarea::placeholder{color:var(--text-muted);opacity:.65;}
.ggs-qf-error{font-size:12px;color:#dc2626;min-height:16px;}
.has-error input,.has-error select{border-color:#dc2626 !important;}

.ggs-qf-hp{position:absolute;left:-9999px;opacity:0;pointer-events:none;}

.ggs-qf-submit-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.ggs-qf-submit{width:100% !important;justify-content:center !important;margin-top:0 !important;}
.ggs-qf-submit-row .ggs-qf-submit{flex:1 1 auto;}
.ggs-qf-submit-row a.ggs-btn{flex:1 1 auto;justify-content:center !important;}
@media (max-width:480px){.ggs-qf-submit-row{flex-direction:column;}}
.ggs-qf-spinner{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:ggsSpin .7s linear infinite;}
.ggs-qf-submit.is-loading .ggs-qf-spinner{display:inline-block;}
.ggs-qf-submit.is-loading .ggs-qf-submit-label{opacity:.6;}
@keyframes ggsSpin{to{transform:rotate(360deg);}}

.ggs-qf-consent{font-size:12px;line-height:1.7;color:var(--text-muted);margin:16px 0 0;text-align:center;}

.ggs-qf-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px 10px 4px;}
.ggs-qf-state svg{width:44px;height:44px;padding:10px;border-radius:50%;background:rgba(34,197,94,.12);stroke:#16a34a;fill:none;stroke-width:2.4;}
.ggs-qf-state strong{font-family:var(--font-head);font-size:17px;color:var(--navy-dark);}
.ggs-qf-state p{font-size:13.5px;color:var(--text-muted);margin:0;}
.ggs-qf-state-error p{color:#dc2626;}

@media (max-width:900px){
	.ggs-quote-layout{grid-template-columns:1fr;gap:32px;}
	.ggs-quote-form-wrap{padding:26px;}
}
@media (max-width:640px){
	.ggs-qf-row{grid-template-columns:1fr;gap:0;margin-bottom:0px;}
	.ggs-section{padding-block:64px;}
}

/* =========================================================
   INNER-PAGE SECTIONS — page intro/breadcrumb, expertise block,
   pillars (vision/mission/commitment), feature grid, CTA banner.
   Used on /about/ and any future inner page built the same way.
   ========================================================= */
.ggs-page-intro{position:relative;isolation:isolate;overflow:hidden;padding-block:90px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);}
.ggs-page-intro .ggs-container{position:relative;z-index:2;}
.ggs-page-intro-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;}
.ggs-page-intro-overlay{
	position:absolute;inset:0;z-index:1;
	background:none;
}
.ggs-page-intro::after{
	content:"";position:absolute;top:-120px;inset-inline-end:-100px;z-index:1;
	width:380px;height:380px;border-radius:50%;pointer-events:none;
	background:radial-gradient(circle,rgba(var(--gold-rgb),.16),transparent 70%);
}
.ggs-breadcrumb{position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:13.5px;font-weight:700;}
.ggs-breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color .3s var(--ease);}
.ggs-breadcrumb a:hover{color:var(--gold-deep);}
.ggs-breadcrumb-sep{color:rgba(5,38,153,.3);}
.ggs-breadcrumb-current{color:var(--gold-deep);}
.ggs-page-intro h1{font-size:clamp(30px,4vw,46px);line-height:1.2;margin:0 0 18px;color:var(--navy-dark);max-width:760px;}
.ggs-page-intro p{font-size:16.5px;line-height:1.85;color:var(--text-muted);margin:0 0 30px;max-width:640px;}

/* Luxury background-image variant: dark navy overlay + light text,
   same visual family as the video hero, instead of the plain
   light-gradient fallback used when no image is set. */
.ggs-page-intro.has-bg .ggs-breadcrumb a{color:rgba(255,255,255,.65);}
.ggs-page-intro.has-bg .ggs-breadcrumb a:hover{color:var(--gold-light);}
.ggs-page-intro.has-bg .ggs-breadcrumb-sep{color:rgba(255,255,255,.3);}
.ggs-page-intro.has-bg .ggs-breadcrumb-current{color:var(--gold-light);}
.ggs-page-intro.has-bg h1{color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.35);}
.ggs-page-intro.has-bg p{color:rgba(255,255,255,.8);}

@media (max-width:960px){.ggs-page-intro{padding-block:70px 70px;}}

.ggs-expertise-inner{max-width:820px;margin-inline:auto;text-align:center;}
.ggs-expertise-inner h2{font-size:clamp(26px,3.2vw,38px);margin:0 0 24px;color:var(--navy-dark);}
.ggs-expertise-inner p{font-size:15.5px;line-height:1.9;color:var(--text-muted);margin:0 0 16px;text-align:start;}
.ggs-expertise-grid{grid-template-columns:1fr 1fr;margin:36px 0;text-align:start;}
@media (max-width:900px){.ggs-expertise-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.ggs-expertise-grid{grid-template-columns:1fr;}}

.ggs-pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.ggs-pillar-card{
	position:relative;padding:36px 30px;border-radius:22px;
	background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
	transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.ggs-pillar-card:hover{transform:translateY(-8px);border-color:rgba(var(--gold-rgb),.4);background:rgba(255,255,255,.06);}
.ggs-pillar-num{
	display:flex;align-items:center;justify-content:center;
	width:46px;height:46px;border-radius:14px;margin-bottom:20px;
	background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy-dark);
	font-family:var(--font-head);font-weight:900;font-size:17px;
}
.ggs-pillar-card strong{display:block;font-family:var(--font-head);font-size:19px;color:#fff;margin-bottom:12px;}
.ggs-pillar-card p{font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.65);margin:0;}
@media (max-width:900px){.ggs-pillars-grid{grid-template-columns:1fr;}}

/* Column count is set per-instance via --ggs-fg-cols (see
   class-ggs-feature-grid-widget.php — √(item count), clamped 2–4), so
   the grid self-scales with however many items an editor adds: 4
   items reads as 2×2, 9 as 3×3, 16 as 4×4, etc. */
.ggs-feature-grid{display:grid;grid-template-columns:repeat(var(--ggs-fg-cols,3),1fr);gap:26px;}
.ggs-feature-card{
	padding:30px 26px;border-radius:20px;
	background:var(--surface);border:1px solid var(--border);
	box-shadow:0 16px 34px -22px rgba(5,23,84,.18);
	transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.ggs-feature-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(var(--gold-rgb),.3);border-color:rgba(var(--gold-rgb),.35);}
.ggs-feature-num{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;border-radius:50%;margin-bottom:16px;
	background:rgba(var(--gold-rgb),.1);color:var(--gold-deep);
	font-family:var(--font-head);font-weight:900;font-size:14px;
}
.ggs-feature-card strong{display:block;font-family:var(--font-head);font-size:17px;color:var(--navy-dark);margin-bottom:10px;}
.ggs-feature-card p{font-size:14px;line-height:1.75;color:var(--text-muted);margin:0;}
@media (max-width:900px){.ggs-feature-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.ggs-feature-grid{grid-template-columns:1fr;}}

.ggs-cta-banner-inner{text-align:center;}
.ggs-cta-banner-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}

/* Contained "luxury card" layout — a rounded panel floating on the
   page's normal background, instead of a flat full-width color block
   behind the whole section. Light by default; .is-dark switches it to
   the navy gradient (needs the e-no-lazyload class on the Elementor
   container — see build/patch scripts — because Elementor's own
   container background lazy-load strips any background-image,
   gradients included, until its own IntersectionObserver fires). */
.ggs-cta-banner-card-layout{background:var(--bg);}
.ggs-cta-banner-card{
	position:relative;overflow:hidden;isolation:isolate;
	max-width:940px;margin-inline:auto;padding:64px 48px;border-radius:32px;
	background-color:var(--surface);
	box-shadow:0 30px 70px -30px rgba(5,23,84,.22);
	border:1px solid rgba(var(--gold-rgb),.18);
}
.ggs-cta-banner-card::before{
	content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:1;
	background-color:var(--gold);
}
.ggs-cta-banner-card.is-dark{
	background-color:var(--navy-dark);
	background-image:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);
	box-shadow:0 40px 90px -30px rgba(5,23,84,.45);
	border-color:rgba(255,255,255,.08);
}
.ggs-cta-banner-card.is-dark::after{
	content:"";position:absolute;top:-140px;inset-inline-end:-100px;z-index:0;
	width:360px;height:360px;border-radius:50%;pointer-events:none;
	background:radial-gradient(circle,rgba(var(--gold-rgb),.22),transparent 70%);
}
.ggs-cta-banner-card.is-dark .ggs-section-head,.ggs-cta-banner-card.is-dark .ggs-cta-banner-actions{position:relative;z-index:1;}
.ggs-cta-banner-card.is-dark h2{color:#fff;}

/* This card's primary button only: keep the exact same gradient on
   hover as at rest (no gold-swap via ::before like the shared
   .ggs-btn-primary) — hover changes only lift/shadow. */
.ggs-cta-banner-card .ggs-btn-primary{
	background:linear-gradient(135deg,var(--navy),var(--gold-light)) !important;
}
.ggs-cta-banner-card .ggs-btn-primary::before{content:none;}
.ggs-cta-banner-card .ggs-btn-primary:hover{
	background:linear-gradient(135deg,var(--navy),var(--gold-light)) !important;
	box-shadow:0 24px 46px -16px rgba(var(--gold-rgb),.55);
	transform:translateY(-4px) scale(1.02);
}
@media (max-width:640px){.ggs-cta-banner-card{padding:44px 26px;border-radius:24px;}}

.ggs-page-intro-actions{display:flex;flex-wrap:wrap;gap:16px;}

.ggs-checklist-inner{max-width:900px;margin-inline:auto;}
.ggs-checklist-inner .ggs-section-head p{margin-top:14px;}
.ggs-checklist-grid{grid-template-columns:1fr 1fr;}
@media (max-width:640px){.ggs-checklist-grid{grid-template-columns:1fr;}}
.ggs-checklist-outro{margin:32px 0 0;font-size:15px;line-height:1.85;color:var(--text-muted);text-align:center;}
.ggs-checklist-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}

/* "tags" style — a flowing cloud of pill chips instead of a bulleted
   or numbered-card list, for sections (like pricing factors) that
   read better as a set of loose variables than a sequence. */
.ggs-checklist-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:920px;margin-inline:auto;}
.ggs-checklist-tag{
	display:inline-flex;align-items:center;gap:8px;
	padding:12px 20px;border-radius:100px;
	background:linear-gradient(135deg,rgba(var(--gold-rgb),.07),rgba(32,188,237,.07));
	border:1px solid rgba(var(--gold-rgb),.22);
	font-size:14px;font-weight:700;color:var(--navy-dark);
	transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.ggs-checklist-tag:hover{
	transform:translateY(-4px);
	border-color:rgba(var(--gold-rgb),.5);
	background:linear-gradient(135deg,rgba(var(--gold-rgb),.14),rgba(32,188,237,.14));
	box-shadow:0 16px 30px -18px rgba(var(--gold-rgb),.6);
}
.ggs-checklist-tag-icon{width:15px;height:15px;flex-shrink:0;stroke:var(--gold-deep);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}

/* Quote-callout box — replaces the plain centered outro+buttons for
   "tags" style sections, giving the closing pricing pitch its own
   framed, elevated moment instead of trailing off as plain text. */
.ggs-checklist-callout{
	position:relative;overflow:hidden;isolation:isolate;
	max-width:760px;margin:48px auto 0;padding:44px 40px;border-radius:26px;
	text-align:center;
	background:linear-gradient(160deg,var(--bg-alt) 0%,var(--surface) 100%);
	border:1px solid rgba(var(--gold-rgb),.2);
	box-shadow:0 30px 60px -30px rgba(5,23,84,.25);
}
.ggs-checklist-callout::before{
	content:"";position:absolute;top:0;left:0;right:0;height:4px;
	background-color:var(--gold);
}
.ggs-checklist-callout-icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:52px;height:52px;border-radius:16px;margin-bottom:18px;
	background:linear-gradient(135deg,var(--navy),var(--gold));
}
.ggs-checklist-callout-icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ggs-checklist-callout p{margin:0 0 26px;font-size:15.5px;line-height:1.85;color:var(--text-muted);}
.ggs-checklist-callout .ggs-checklist-actions{margin:0;}
@media (max-width:640px){.ggs-checklist-callout{padding:32px 22px;}}

.ggs-checklist-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.ggs-checklist-card{
	display:flex;flex-direction:column;align-items:flex-start;gap:14px;
	padding:24px 22px;border-radius:18px;
	background:var(--surface);border:1px solid var(--border);
	box-shadow:0 14px 30px -22px rgba(5,23,84,.2);
	font-size:14px;line-height:1.65;color:var(--text);
	transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.ggs-checklist-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -20px rgba(var(--gold-rgb),.3);border-color:rgba(var(--gold-rgb),.35);}
.ggs-checklist-card-num{
	display:flex;align-items:center;justify-content:center;flex-shrink:0;
	width:34px;height:34px;border-radius:50%;
	background:linear-gradient(135deg,var(--navy),var(--gold));color:#fff;
	font-family:var(--font-head);font-weight:900;font-size:13px;
}
@media (max-width:960px){.ggs-checklist-cards{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.ggs-checklist-cards{grid-template-columns:1fr;}}

/* ---- "ما المنتجات التي تشملها خدماتنا؟" — luxury refresh ---- */
.ggs-section:has(.ggs-product-mini-grid){position:relative;isolation:isolate;overflow:hidden;}
.ggs-section:has(.ggs-product-mini-grid)::before{
	content:"";position:absolute;top:-160px;inset-inline-start:-120px;z-index:0;
	width:420px;height:420px;border-radius:50%;pointer-events:none;
	background:radial-gradient(circle,rgba(var(--gold-rgb),.1),transparent 70%);
}
.ggs-section:has(.ggs-product-mini-grid) .ggs-container{position:relative;z-index:1;}
.ggs-container:has(>.ggs-product-mini-grid) .ggs-section-head h2{position:relative;display:inline-block;padding-bottom:20px;}
.ggs-container:has(>.ggs-product-mini-grid) .ggs-section-head h2::after{
	content:"";position:absolute;bottom:0;inset-inline-start:50%;transform:translateX(-50%);
	width:64px;height:3px;border-radius:3px;
	background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
}

.ggs-product-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.ggs-product-mini-card{
	position:relative;display:flex;flex-direction:column;text-align:center;
	border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;
	background:var(--surface);border:1px solid var(--border);
	/* !important: Elementor ships a global `.elementor a{box-shadow:none}`
	   reset (specificity 0,1,1, beating this rule's plain 0,1,0) on every
	   Elementor-built page — same fight as the .ggs-service-card-img
	   sizing above, same fix. */
	box-shadow:0 16px 36px -24px rgba(5,23,84,.25) !important;
	transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.ggs-product-mini-card::after{
	content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
	background:linear-gradient(90deg,var(--gold-deep),var(--gold-light),var(--gold-deep));
	transform:scaleX(0);transform-origin:center;transition:transform .5s var(--ease);
}
.ggs-product-mini-card:hover::after{transform:scaleX(1);}
.ggs-product-mini-card:hover{
	transform:translateY(-8px);
	box-shadow:0 30px 54px -26px rgba(var(--gold-rgb),.35);
	border-color:rgba(var(--gold-rgb),.4);
}
.ggs-product-mini-card strong{
	order:2;padding:20px 18px 22px;font-family:var(--font-head);
	font-size:15.5px;font-weight:800;letter-spacing:.1px;line-height:1.4;
	color:var(--navy-dark);transition:color .35s var(--ease);
}
.ggs-product-mini-card:hover strong{color:var(--gold-deep);}
.ggs-product-mini-media{order:1;position:relative;display:block;width:100%;aspect-ratio:4/3.1;overflow:hidden;}
.ggs-product-mini-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s var(--ease);}
.ggs-product-mini-card:hover .ggs-product-mini-media img{transform:scale(1.1);filter:saturate(1.1);}
@media (max-width:960px){.ggs-product-mini-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.ggs-product-mini-grid{grid-template-columns:1fr;gap:16px;}}

/* ---- Product gallery (single-product pages, "نماذج من مشاريعنا") —
   a small fixed set (typically 4) of real sample photos, so this
   variant trades the mini-grid's dense 4-across layout for two large,
   full-bleed showcase tiles per row instead — plain photography, no
   title/CTA text, so the image itself has to carry the whole "luxury"
   read: big, sharp-cornered, a slow reveal on hover rather than the
   mini-grid's quick nav-card lift. ---- */
.ggs-product-gallery-grid{grid-template-columns:repeat(2,1fr) !important;gap:32px;}
.ggs-product-gallery-grid .ggs-product-mini-card{
	border-radius:28px;
	box-shadow:0 24px 54px -28px rgba(5,23,84,.35) !important;
}
.ggs-product-gallery-grid .ggs-product-mini-card::after{height:4px;}
.ggs-product-gallery-grid .ggs-product-mini-card:hover{
	transform:translateY(-10px);
	box-shadow:0 40px 74px -30px rgba(var(--gold-rgb),.45) !important;
}
.ggs-product-gallery-grid .ggs-product-mini-media{aspect-ratio:4/3;}
.ggs-product-gallery-grid .ggs-product-mini-media img{transition:transform 1.1s var(--ease),filter .6s var(--ease);}
.ggs-product-gallery-grid .ggs-product-mini-card:hover .ggs-product-mini-media img{transform:scale(1.14);filter:saturate(1.15) brightness(1.02);}
/* Gilded frame: a hairline gold ring that fades in just inside the
   card edge on hover — reads as a picture-frame moulding rather than a
   flat border, since it sits inset from (not flush with) the radius. */
.ggs-product-gallery-grid .ggs-product-mini-card::before{
	content:"";position:absolute;inset:10px;z-index:2;border-radius:20px;
	border:1px solid rgba(var(--gold-rgb),0);
	box-shadow:0 0 0 1px rgba(255,255,255,0) inset;
	opacity:0;transition:opacity .6s var(--ease),border-color .6s var(--ease);
	pointer-events:none;
}
.ggs-product-gallery-grid .ggs-product-mini-card:hover::before{
	opacity:1;border-color:rgba(var(--gold-rgb),.55);
}
/* Diagonal light sweep across the photo — a single pass on hover-in,
   the classic premium-catalogue "glint," not a looping animation. */
.ggs-product-gallery-grid .ggs-product-mini-media{position:relative;}
.ggs-product-gallery-grid .ggs-product-mini-media::after{
	content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
	background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);
	transform:translateX(-120%);
}
.ggs-product-gallery-grid .ggs-product-mini-card:hover .ggs-product-mini-media::after{
	transform:translateX(120%);
	transition:transform 1.1s var(--ease);
}
@media (max-width:720px){
	.ggs-product-gallery-grid{grid-template-columns:1fr !important;gap:22px;}
}

.ggs-selector-grid{display:grid;grid-template-columns:repeat(var(--ggs-groups,3),1fr);gap:26px;}
.ggs-selector-card{
	padding:30px 26px;border-radius:20px;
	background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
	transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.ggs-selector-card:hover{transform:translateY(-6px);border-color:rgba(var(--gold-rgb),.35);background:rgba(255,255,255,.06);}
.ggs-selector-card strong{display:block;font-family:var(--font-head);font-size:17px;color:#fff;margin-bottom:16px;}
.ggs-selector-card-intro{font-size:14px;line-height:1.75;color:rgba(255,255,255,.55);margin:-8px 0 18px;}
.ggs-selector-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.ggs-selector-card li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.65);}
.ggs-selector-card .ggs-why-check{background:rgba(var(--gold-rgb),.16);color:var(--gold-light);}
.ggs-selector-outro{max-width:760px;margin:40px auto 0;font-size:14.5px;line-height:1.85;color:rgba(255,255,255,.55);text-align:center;}
@media (max-width:900px){.ggs-selector-grid{grid-template-columns:1fr;}}

.ggs-qf-note{display:block;margin-top:6px;font-size:12px;color:var(--text-muted);}

.ggs-contact-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.ggs-contact-info-card{
	display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
	padding:36px 28px;border-radius:22px;
	background:var(--surface);border:1px solid var(--border);
	box-shadow:0 16px 34px -22px rgba(5,23,84,.18);
	transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.ggs-contact-info-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(var(--gold-rgb),.3);border-color:rgba(var(--gold-rgb),.35);}
.ggs-contact-info-icon{
	display:flex;align-items:center;justify-content:center;
	width:52px;height:52px;border-radius:16px;margin-bottom:6px;
	background:linear-gradient(135deg,var(--navy),var(--gold));
}
.ggs-contact-info-icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ggs-contact-info-card strong{font-family:var(--font-head);font-size:16px;color:var(--navy-dark);}
.ggs-contact-info-value{font-size:14.5px;color:var(--text-muted);margin-bottom:10px;}
@media (max-width:900px){.ggs-contact-info-grid{grid-template-columns:1fr;}}

.ggs-contact-follow{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:56px;}
.ggs-contact-follow-label{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--navy-dark);letter-spacing:.2px;}
/* .ggs-social-glass / .ggs-social-icon squircle styling already lives in
   footer.css (unconditionally enqueued on every page) — reused as-is
   here for one consistent social-icon language across the site. */

@media (prefers-reduced-motion:reduce){
	.ggs-hero-door-l,.ggs-hero-door-r,.ggs-product-card,.ggs-service-card,.ggs-project-card,.ggs-project-filter-card,.ggs-hero-badge{
		animation:none !important;opacity:1;transform:none !important;
	}
	[data-reveal]{opacity:1;transform:none;}
}

/* =========================================================
   Blog — search, category filters, editorial card grid,
   pagination, empty state, and the single-post reading view.
   ========================================================= */

.ggs-blog-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:48px;}

.ggs-blog-search{position:relative;max-width:420px;display:flex;align-items:center;}
.ggs-blog-search-icon{position:absolute;inset-inline-start:18px;width:17px;height:17px;stroke:var(--text-muted);fill:none;stroke-width:2.2;stroke-linecap:round;pointer-events:none;}
.ggs-blog-search input[type="search"]{
	width:100%;padding:14px 18px 14px 46px;border-radius:999px;border:1.5px solid var(--border);
	background:var(--surface);font-family:var(--font-body);font-size:14.5px;color:var(--navy-dark);
	transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
html[dir="rtl"] .ggs-blog-search input[type="search"]{padding:14px 46px 14px 18px;}
.ggs-blog-search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
.ggs-blog-search input[type="search"]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.12);}
/* !important throughout: Elementor/Hello Elementor's own button/input
   reset otherwise wins over these plain author rules (same root cause
   documented on .ggs-btn above) — without it the search button loses
   its circular shape, centering, and hover state. */
.ggs-blog-search-btn{
	position:absolute !important;inset-inline-end:6px !important;width:32px !important;height:32px !important;
	border-radius:50% !important;border:none !important;background:transparent !important;color:var(--text-muted) !important;
	cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;
	padding:0 !important;margin:0 !important;line-height:1 !important;
	transition:background .3s var(--ease),color .3s var(--ease);
}
.ggs-blog-search-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;pointer-events:none;}
.ggs-blog-search-btn:hover{background:var(--bg-alt) !important;color:var(--gold-deep) !important;}

.ggs-blog-filters{display:flex;flex-wrap:wrap;gap:10px;}
.ggs-blog-filter-pill{
	display:inline-flex !important;align-items:center !important;padding:10px 22px !important;border-radius:999px !important;
	border:1.5px solid var(--border) !important;background:var(--surface) !important;
	font-family:var(--font-body) !important;font-weight:700 !important;font-size:13.5px !important;color:var(--text-muted) !important;
	text-decoration:none !important;white-space:nowrap;margin:0 !important;
	transition:all .3s var(--ease);
}
.ggs-blog-filter-pill:hover{border-color:var(--gold) !important;color:var(--gold-deep) !important;}
.ggs-blog-filter-pill.is-active{background:var(--navy) !important;border-color:var(--navy) !important;color:#fff !important;box-shadow:0 10px 22px -10px rgba(var(--navy-rgb),.5);}

.ggs-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}

.ggs-blog-card{
	display:flex;flex-direction:column;text-decoration:none;border-radius:22px;overflow:hidden;
	background:var(--surface);border:1px solid var(--border);
	box-shadow:0 16px 34px -26px rgba(5,23,84,.25);
	transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.ggs-blog-card:hover{transform:translateY(-8px);box-shadow:0 30px 54px -24px rgba(var(--gold-rgb),.3);border-color:rgba(var(--gold-rgb),.35);}

.ggs-blog-card-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);}
.ggs-blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.ggs-blog-card:hover .ggs-blog-card-media img{transform:scale(1.08);}
.ggs-blog-card-cat{
	position:absolute;bottom:14px;inset-inline-start:14px;z-index:1;
	padding:7px 16px;border-radius:999px;
	background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff;
	font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:.02em;
	box-shadow:0 10px 20px -8px rgba(var(--gold-rgb),.55);
}

.ggs-blog-card-body{display:flex;flex-direction:column;padding:24px 24px 26px;flex:1;}
.ggs-blog-card-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);margin-bottom:10px;}
.ggs-blog-card-dot{opacity:.6;}
.ggs-blog-card-title{
	font-family:var(--font-head);font-size:19px;line-height:1.4;color:var(--navy-dark);
	margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ggs-blog-card-excerpt{
	font-size:14px;line-height:1.8;color:var(--text-muted);margin-bottom:18px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;
}
.ggs-blog-card-cta{
	display:inline-flex;align-items:center;gap:8px;margin-top:auto;
	font-family:var(--font-body);font-weight:800;font-size:13.5px;color:var(--gold-deep);
}
.ggs-blog-card-cta .ggs-btn-arrow{width:15px;height:15px;transition:transform .35s var(--ease);}
.ggs-blog-card:hover .ggs-blog-card-cta .ggs-btn-arrow{transform:translateX(4px);}
html[dir="rtl"] .ggs-blog-card-cta .ggs-btn-arrow{transform:scaleX(-1);}
html[dir="rtl"] .ggs-blog-card:hover .ggs-blog-card-cta .ggs-btn-arrow{transform:scaleX(-1) translateX(4px);}

/* The lead post on an unfiltered page 1 gets the editorial treatment —
   full-width, image beside text — so the grid opens with a clear
   "start here" moment instead of nine identical cards. */
.ggs-blog-card-featured{grid-column:1 / -1;flex-direction:row;}
.ggs-blog-card-featured .ggs-blog-card-media{flex:1 1 52%;aspect-ratio:auto;}
.ggs-blog-card-featured .ggs-blog-card-body{flex:1 1 48%;justify-content:center;padding:40px 44px;}
.ggs-blog-card-featured .ggs-blog-card-title{font-size:clamp(22px,2.4vw,30px);-webkit-line-clamp:3;}
.ggs-blog-card-featured .ggs-blog-card-excerpt{-webkit-line-clamp:3;font-size:15px;}
@media (max-width:900px){
	.ggs-blog-card-featured{flex-direction:column;}
	.ggs-blog-card-featured .ggs-blog-card-media{aspect-ratio:16/10;}
}

@media (max-width:1100px){.ggs-blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.ggs-blog-grid{grid-template-columns:1fr;}.ggs-blog-controls{flex-direction:column;align-items:stretch;}.ggs-blog-search{max-width:none;}}

.ggs-blog-pagination{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:56px;}
.ggs-blog-page-numbers{display:flex;gap:8px;flex-wrap:wrap;}
.ggs-blog-page-num{
	display:inline-flex !important;align-items:center !important;justify-content:center !important;
	width:42px !important;height:42px !important;border-radius:50% !important;margin:0 !important;padding:0 !important;
	border:1.5px solid var(--border) !important;color:var(--navy-dark) !important;background:var(--surface) !important;
	font-family:var(--font-body) !important;font-weight:800 !important;font-size:14px !important;text-decoration:none !important;
	transition:all .3s var(--ease);
}
.ggs-blog-page-num:hover{border-color:var(--gold) !important;color:var(--gold-deep) !important;}
.ggs-blog-page-num.is-active{background:var(--navy) !important;border-color:var(--navy) !important;color:#fff !important;box-shadow:0 10px 22px -10px rgba(var(--navy-rgb),.5);}
/* flex-direction pinned explicitly (not left to implicit RTL bidi
   reversal, which Elementor's own anchor reset was overriding) so the
   arrow always lands on the same side as the reading direction: the
   icon after the label in DOM order + row (not row-reverse) puts it
   at the trailing edge — the left in RTL, the right in LTR. */
.ggs-blog-page-btn{
	display:inline-flex !important;flex-direction:row !important;align-items:center !important;gap:8px !important;
	padding:11px 20px !important;border-radius:999px !important;margin:0 !important;
	border:1.5px solid var(--border) !important;background:var(--surface) !important;color:var(--navy-dark) !important;
	font-family:var(--font-body) !important;font-weight:800 !important;font-size:13.5px !important;text-decoration:none !important;
	transition:all .3s var(--ease);
}
.ggs-blog-page-btn:hover{border-color:var(--gold) !important;color:var(--gold-deep) !important;}
.ggs-blog-page-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;flex:none;}

.ggs-blog-empty{max-width:440px;margin:0 auto;text-align:center;padding:60px 20px;}
.ggs-blog-empty-icon{width:44px;height:44px;stroke:var(--gold);fill:none;stroke-width:1.6;margin-bottom:20px;}
.ggs-blog-empty p{font-size:15.5px;line-height:1.85;color:var(--text-muted);margin:0 0 26px;}

.ggs-blog-results{transition:opacity .25s var(--ease);}
.ggs-blog-results.is-loading{opacity:.45;pointer-events:none;}

/* ---- Single post ---- */
/* Wraps the ENTIRE 60/40 grid (not just the title block) now that the
   breadcrumb/title/image live in the same content column as the body —
   fixed px stops (not %) so the fade always finishes near the top
   regardless of how tall the overall article is, instead of smearing
   across the whole scroll length. */
.ggs-blog-single-hero{padding-block:70px;background:linear-gradient(180deg,var(--bg-alt) 0,var(--bg) 480px);}
.ggs-blog-single-cat{
	display:inline-flex;text-decoration:none;margin-bottom:18px;
}
.ggs-blog-single-title{font-size:clamp(28px,4vw,44px);line-height:1.25;color:var(--navy-dark);max-width:820px;margin:0 0 20px;}
.ggs-blog-single-meta{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-muted);font-weight:700;margin-bottom:40px;}
.ggs-blog-single-media{border-radius:26px;overflow:hidden;aspect-ratio:21/9;margin-bottom:8px;box-shadow:0 30px 60px -30px rgba(5,23,84,.35);}
.ggs-blog-single-media img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:700px){.ggs-blog-single-media{aspect-ratio:4/3;}}

.ggs-blog-single-body{margin:36px 0 40px;font-size:16.5px;line-height:1.95;color:var(--text-muted);}
.ggs-blog-single-body h2{font-family:var(--font-head);font-size:26px;line-height:1.4;color:var(--navy-dark);margin:44px 0 18px;}
.ggs-blog-single-body h3{font-family:var(--font-head);font-size:21px;line-height:1.4;color:var(--navy-dark);margin:36px 0 14px;}
.ggs-blog-single-body p{margin:0 0 22px;}
.ggs-blog-single-body ul,.ggs-blog-single-body ol{margin:0 0 22px;padding-inline-start:22px;display:flex;flex-direction:column;gap:10px;}
.ggs-blog-single-body li{line-height:1.85;}
.ggs-blog-single-body a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;}
.ggs-blog-single-body strong{color:var(--navy-dark);}
.ggs-blog-single-body blockquote{
	margin:32px 0;padding:22px 26px;border-inline-start:4px solid var(--gold);
	background:var(--bg-alt);border-radius:0 14px 14px 0;font-style:normal;color:var(--navy-dark);font-size:16px;
}
.ggs-blog-single-body img{max-width:100%;height:auto;border-radius:16px;margin:8px 0 22px;}

/* Thin gold progress bar pinned above the fixed header, filled by
   home.js as the visitor scrolls through the article body — only
   activated on posts using .ggs-blog-single (see JS gate). */
.ggs-reading-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:150;background:transparent;pointer-events:none;}
.ggs-reading-progress-bar{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .12s linear;}

/* 60/40 article + sticky "related articles" layout, matching the
   sister Tareeq site's single-post template in GGS's own brand
   colors/motion language. */
.ggs-blog-single-layout{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start;}
.ggs-blog-single-content-col{min-width:0;}

.ggs-blog-single-share{
	display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
	padding:24px 28px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);margin-bottom:8px;
}
.ggs-blog-single-share strong{font-size:14.5px;color:var(--navy-dark);}
.ggs-blog-single-share-links{display:flex;gap:10px;}
.ggs-blog-single-share-links a{
	position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
	background:var(--bg-alt);color:var(--navy);transition:transform .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
.ggs-blog-single-share-links a::before{
	content:"";position:absolute;inset:-3px;border-radius:50%;z-index:-1;opacity:0;
	background:linear-gradient(135deg,var(--gold),var(--gold-light));transition:opacity .4s var(--ease);
}
.ggs-blog-single-share-links a:hover{color:#fff;transform:translateY(-4px) scale(1.06);box-shadow:0 14px 26px -10px rgba(var(--gold-rgb),.55);}
.ggs-blog-single-share-links a:hover::before{opacity:1;}
.ggs-blog-single-share-links svg{width:18px;height:18px;fill:currentColor;position:relative;z-index:1;}

/* Outside the 60/40 grid entirely now — its own full-container-width
   row, not a column inside .ggs-blog-single-layout. */
.ggs-blog-single-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0 4px;}
.ggs-blog-single-nav-link{
	display:flex;align-items:center;gap:14px;padding:20px 22px;border:1px solid var(--border);border-radius:var(--radius-md);
	background:var(--surface);text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.ggs-blog-single-nav-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:rgba(var(--gold-rgb),.35);}
.ggs-blog-single-nav-link.is-disabled{opacity:.42;cursor:not-allowed;pointer-events:none;}
.ggs-blog-single-nav-link.is-disabled .ggs-blog-single-nav-icon{background:var(--bg-alt);color:var(--text-muted);}
/* No row-reverse here: the "next" card's markup already puts its
   icon last (text, then icon), so a plain row in RTL naturally lands
   the icon on the card's OUTER edge (the page's far left) — matching
   the "prev" card's icon-first markup landing ITS icon on ITS outer
   edge (the page's far right). Both arrows then point outward, away
   from each other, framing the pair. */
.ggs-blog-single-nav-next{grid-column:2;}
.ggs-blog-single-nav-icon{
	flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	background:var(--bg-alt);color:var(--navy);transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.ggs-blog-single-nav-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;}
.ggs-blog-single-nav-link:hover .ggs-blog-single-nav-icon{background:var(--gold);color:#fff;}
/* Nudge each arrow further OUTWARD on hover, in its actual pointing
   direction — prev's chevron points right (translateX is a physical,
   not logical, property, so RTL doesn't flip its sign), next's points
   left. */
.ggs-blog-single-nav-prev:hover .ggs-blog-single-nav-icon{transform:translateX(4px);}
.ggs-blog-single-nav-next:hover .ggs-blog-single-nav-icon{transform:translateX(-4px);}
.ggs-blog-single-nav-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ggs-blog-single-nav-text em{font-style:normal;font-size:12px;font-weight:700;color:var(--text-muted);}
.ggs-blog-single-nav-text strong{
	font-size:14.5px;color:var(--navy-dark);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:700px){.ggs-blog-single-nav{grid-template-columns:1fr;}.ggs-blog-single-nav-next{grid-column:1;}}

.ggs-blog-single-aside{position:sticky;top:118px;display:flex;flex-direction:column;gap:20px;}
.ggs-blog-single-aside-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-soft);transition:box-shadow .4s var(--ease);}
.ggs-blog-single-aside-card:hover{box-shadow:var(--shadow-lift);}
.ggs-blog-single-aside-card h3{font-family:var(--font-head);font-size:17px;color:var(--navy-dark);margin:0 0 18px;}
.ggs-blog-single-related-list{display:flex;flex-direction:column;gap:16px;}
.ggs-blog-single-related-item{
	display:flex;align-items:center;gap:14px;text-decoration:none;padding:8px;margin:-8px;border-radius:var(--radius-sm);
	transition:background .35s var(--ease);
}
.ggs-blog-single-related-item:hover{background:var(--bg-alt);}
.ggs-blog-single-related-thumb{flex:none;width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--bg-alt);}
.ggs-blog-single-related-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.ggs-blog-single-related-item:hover .ggs-blog-single-related-thumb img{transform:scale(1.12);}
.ggs-blog-single-related-text{min-width:0;display:flex;flex-direction:column;gap:6px;}
.ggs-blog-single-related-text strong{
	font-size:13.5px;line-height:1.5;color:var(--navy-dark);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
	overflow:hidden;transition:color .35s var(--ease);
}
.ggs-blog-single-related-item:hover .ggs-blog-single-related-text strong{color:var(--gold-deep);}
.ggs-blog-single-related-text time{font-size:11.5px;color:var(--text-muted);}
.ggs-blog-single-all-link{width:100%;justify-content:center;}

@media (max-width:980px){
	.ggs-blog-single-layout{grid-template-columns:1fr;gap:36px;}
	.ggs-blog-single-aside{position:static;}
}

.ggs-container-narrow{max-width:820px;}
.ggs-legal-content{padding:70px 0 100px;}
.ggs-legal-updated{font-size:13.5px;font-weight:700;color:var(--gold-deep);margin:0 0 28px;}
.ggs-legal-body{font-size:16.5px;line-height:1.95;color:var(--text-muted);}
.ggs-legal-body h2{font-family:var(--font-head);font-size:24px;line-height:1.4;color:var(--navy-dark);margin:40px 0 16px;}
.ggs-legal-body h2:first-child{margin-top:0;}
.ggs-legal-body h3{font-family:var(--font-head);font-size:19px;line-height:1.4;color:var(--navy-dark);margin:32px 0 12px;}
.ggs-legal-body p{margin:0 0 20px;}
.ggs-legal-body ul,.ggs-legal-body ol{margin:0 0 20px;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;}
.ggs-legal-body li{line-height:1.85;}
.ggs-legal-body a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;}
.ggs-legal-body strong{color:var(--navy-dark);}

/* ENGLISH ONLY — luxury hero overlays for text contrast (WCAG AA: white
   text over a ≥ ~72% deep-navy scrim). Arabic keeps its overlay-free
   look. Scoped to html[lang^="en"] so the no-reload language swap
   toggles it automatically. Heavier on the text side (left, LTR). */
html[lang^="en"] .ggs-page-intro.has-bg .ggs-page-intro-overlay{
	background:
		radial-gradient(120% 90% at 0% 100%,rgba(var(--gold-rgb),.14),transparent 55%),
		linear-gradient(90deg,rgba(3,10,35,.92) 0%,rgba(3,18,66,.80) 48%,rgba(3,10,35,.55) 100%),
		linear-gradient(180deg,rgba(3,10,35,.35) 0%,rgba(3,10,35,.55) 100%);
}
html[lang^="en"] .ggs-page-intro.has-bg h1{color:#fff !important;text-shadow:0 2px 18px rgba(0,0,0,.55);}
html[lang^="en"] .ggs-page-intro.has-bg p{color:rgba(255,255,255,.92);}
html[lang^="en"] .ggs-page-intro.has-bg .ggs-breadcrumb a{color:rgba(255,255,255,.85);}
html[lang^="en"] .ggs-hero-video-overlay{
	background:
		radial-gradient(90% 70% at 50% 50%,rgba(3,10,35,.35),transparent 70%),
		linear-gradient(180deg,rgba(3,10,35,.80) 0%,rgba(3,18,66,.68) 45%,rgba(3,10,35,.90) 100%);
}
html[lang^="en"] .ggs-hero-video-content p{color:rgba(255,255,255,.92);}
html[lang^="en"] .ggs-hero-video-content h1{text-shadow:0 2px 20px rgba(0,0,0,.6);}
@media (max-width:760px){
	html[lang^="en"] .ggs-page-intro.has-bg .ggs-page-intro-overlay{
		background:linear-gradient(180deg,rgba(3,10,35,.88) 0%,rgba(3,18,66,.82) 100%);
	}
}

/* ENGLISH hero overlay v2 — a directional, eased gradient that follows
   the image instead of blanketing it: solid-enough behind the text
   (white text stays AA-readable), fading out across the picture so
   its detail and colour show through; soft bottom vignette blends the
   hero into the next section. */
html[lang^="en"] .ggs-page-intro.has-bg .ggs-page-intro-overlay{
	background:
		linear-gradient(0deg,rgba(3,10,35,.5) 0%,rgba(3,10,35,.18) 28%,transparent 55%),
		linear-gradient(90deg,
			rgba(3,10,35,.90) 0%,rgba(3,12,42,.86) 22%,rgba(3,16,58,.74) 40%,
			rgba(3,18,66,.48) 62%,rgba(3,18,66,.20) 82%,rgba(3,10,35,.08) 100%);
}
html[lang^="en"] .ggs-page-intro.has-bg .ggs-page-intro-bg{filter:saturate(1.08) contrast(1.04);}
html[lang^="en"] .ggs-hero-video-overlay{
	background:
		linear-gradient(180deg,rgba(3,10,35,.55) 0%,transparent 26%,transparent 62%,rgba(3,10,35,.7) 100%),
		radial-gradient(75% 70% at 50% 50%,rgba(3,10,35,.66) 0%,rgba(3,14,50,.46) 55%,rgba(3,10,35,.14) 100%);
}
@media (max-width:760px){
	html[lang^="en"] .ggs-page-intro.has-bg .ggs-page-intro-overlay{
		background:linear-gradient(180deg,rgba(3,10,35,.80) 0%,rgba(3,14,50,.66) 45%,rgba(3,10,35,.84) 100%);
	}
}
@media (max-width:760px){
	html[lang^="en"] .ggs-page-intro.has-bg .ggs-page-intro-overlay{
		background:
			linear-gradient(0deg,rgba(3,10,35,.4) 0%,transparent 45%),
			linear-gradient(90deg,rgba(3,10,35,.9) 0%,rgba(3,14,50,.82) 50%,rgba(3,18,66,.68) 100%);
	}
}

/* ENGLISH hero gradient — single source of truth. Some pages (about,
   contact, blog) don't print the .ggs-page-intro-overlay element, so the
   gradient lives on the section's ::before instead, guaranteeing the
   identical services-page gradient on every inner hero. */
html[lang^="en"] .ggs-page-intro.has-bg .ggs-page-intro-overlay{background:none !important;}
html[lang^="en"] .ggs-page-intro.has-bg::before{
	content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
	background:
		linear-gradient(0deg,rgba(3,10,35,.5) 0%,rgba(3,10,35,.18) 28%,transparent 55%),
		linear-gradient(90deg,
			rgba(3,10,35,.90) 0%,rgba(3,12,42,.86) 22%,rgba(3,16,58,.74) 40%,
			rgba(3,18,66,.48) 62%,rgba(3,18,66,.20) 82%,rgba(3,10,35,.08) 100%);
}
@media (max-width:760px){
	html[lang^="en"] .ggs-page-intro.has-bg::before{
		background:
			linear-gradient(0deg,rgba(3,10,35,.4) 0%,transparent 45%),
			linear-gradient(90deg,rgba(3,10,35,.9) 0%,rgba(3,14,50,.82) 50%,rgba(3,18,66,.68) 100%);
	}
}

/* =========================================================
   404 — luxury conversion page
   ========================================================= */
.ggs-404{background:var(--bg);}
.ggs-404-hero{
	position:relative;isolation:isolate;overflow:hidden;
	padding-block:90px 110px;color:#fff;
	background:
		radial-gradient(60% 80% at 80% 20%,rgba(var(--gold-rgb),.28),transparent 60%),
		linear-gradient(160deg,#020b2b 0%,var(--navy-dark) 55%,#041a63 100%);
}
.ggs-404-hero::before{
	content:"";position:absolute;inset:0;z-index:0;opacity:.35;pointer-events:none;
	background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
	background-size:56px 56px;
	-webkit-mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent);
}
.ggs-404-glow{position:absolute;z-index:0;width:520px;height:520px;border-radius:50%;inset-block-end:-220px;inset-inline-start:-120px;background:radial-gradient(circle,rgba(32,188,237,.22),transparent 70%);pointer-events:none;}
.ggs-404-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;}

/* door: two leaves slide apart to reveal a glowing 404 */
.ggs-404-door{
	position:relative;aspect-ratio:1/1.05;max-width:440px;width:100%;margin-inline:auto;overflow:hidden;direction:ltr;
	border-radius:220px 220px 22px 22px;
	background:radial-gradient(circle at 50% 55%,rgba(var(--gold-rgb),.45),rgba(3,10,35,.9) 70%);
	border:1px solid rgba(255,255,255,.16);
	box-shadow:0 40px 90px -30px rgba(0,0,0,.6),inset 0 0 60px rgba(var(--gold-rgb),.25);
}
.ggs-404-num{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-family:var(--font-head);font-weight:900;font-size:clamp(84px,13vw,150px);letter-spacing:-.02em;line-height:1;
	background:linear-gradient(180deg,#fff 0%,var(--gold-light) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
	filter:drop-shadow(0 0 28px rgba(32,188,237,.55));
	animation:ggs404Pulse 3.2s ease-in-out 1.6s infinite;
}
.ggs-404-leaf{
	position:absolute;top:0;bottom:0;width:50%;z-index:2;
	background:linear-gradient(180deg,#0a1f6b,#031754);
	border:1px solid rgba(255,255,255,.14);
	box-shadow:inset 0 0 40px rgba(255,255,255,.05);
}
.ggs-404-leaf::after{content:"";position:absolute;top:50%;width:4px;height:70px;transform:translateY(-50%);border-radius:4px;background:linear-gradient(180deg,var(--gold-light),var(--gold));}
.ggs-404-leaf-l{left:0;animation:ggs404L 1.6s .5s cubic-bezier(.65,0,.35,1) forwards;}
.ggs-404-leaf-l::after{right:14px;}
.ggs-404-leaf-r{right:0;animation:ggs404R 1.6s .5s cubic-bezier(.65,0,.35,1) forwards;}
.ggs-404-leaf-r::after{left:14px;}
.ggs-404-beam{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);z-index:1;background:linear-gradient(180deg,transparent,rgba(255,255,255,.9),transparent);opacity:0;animation:ggs404Beam 1.6s .5s ease-out forwards;}
@keyframes ggs404L{to{transform:translateX(-102%);}}
@keyframes ggs404R{to{transform:translateX(102%);}}
@keyframes ggs404Beam{0%{opacity:.9;width:2px}100%{opacity:0;width:60%}}
@keyframes ggs404Pulse{0%,100%{filter:drop-shadow(0 0 22px rgba(32,188,237,.45));}50%{filter:drop-shadow(0 0 40px rgba(32,188,237,.85));}}

.ggs-404-eyebrow{
	display:inline-block;padding:8px 16px;border-radius:999px;margin-bottom:22px;
	font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--gold-light);
	background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
}
.ggs-404-copy h1{font-size:clamp(30px,4.2vw,52px);line-height:1.18;margin:0 0 20px;color:#fff !important;text-shadow:0 2px 20px rgba(0,0,0,.4);}
.ggs-404-copy p{font-size:17px;line-height:1.9;color:rgba(255,255,255,.86);margin:0 0 34px;max-width:560px;}
.ggs-404-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px;}
.ggs-404-home{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-weight:700;font-size:14.5px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px;transition:color .3s var(--ease),gap .3s var(--ease);}
.ggs-404-home:hover{color:#fff;gap:12px;}
.ggs-404 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}
[dir="rtl"] .ggs-404 svg{transform:scaleX(-1);}

.ggs-404-routes{padding-block:90px 40px;}
.ggs-404-head{text-align:center;margin-bottom:44px;}
.ggs-404-head h2{font-size:clamp(26px,3.2vw,38px);margin:0 0 12px;color:var(--navy-dark);}
.ggs-404-head p{margin:0;color:var(--text-muted);font-size:16px;}
.ggs-404-services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:28px;}
.ggs-404-svc{
	position:relative;display:flex;flex-direction:column;gap:8px;padding:32px 28px 30px;border-radius:24px;text-decoration:none;
	background:var(--surface);border:1px solid var(--border);box-shadow:0 18px 40px -26px rgba(5,23,84,.25);
	transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.ggs-404-svc:hover{transform:translateY(-8px);border-color:rgba(var(--gold-rgb),.45);box-shadow:0 30px 60px -26px rgba(var(--gold-rgb),.4);}
.ggs-404-svc-n{font-family:var(--font-head);font-weight:900;font-size:13px;color:var(--gold-deep);letter-spacing:.1em;}
.ggs-404-svc strong{font-family:var(--font-head);font-size:21px;color:var(--navy-dark);}
.ggs-404-svc p{margin:0;padding-inline-end:52px;font-size:14.5px;line-height:1.7;color:var(--text-muted);}
.ggs-404-svc-go{position:absolute;inset-block-end:24px;inset-inline-end:24px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-light));transition:transform .4s var(--ease);}
.ggs-404-svc:hover .ggs-404-svc-go{transform:scale(1.12);}
.ggs-404-products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.ggs-404-chip{
	display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-radius:16px;text-decoration:none;
	font-weight:700;font-size:14.5px;color:var(--navy-dark);background:var(--surface);border:1px solid var(--border);
	transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.ggs-404-chip:hover{background:var(--navy-dark);color:#fff;border-color:var(--navy-dark);transform:translateY(-3px);}

.ggs-404-cta{padding-block:50px 100px;}
.ggs-404-cta-card{
	position:relative;overflow:hidden;isolation:isolate;
	display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
	padding:48px 52px;border-radius:30px;color:#fff;
	background:radial-gradient(70% 120% at 100% 0%,rgba(var(--gold-rgb),.35),transparent 60%),linear-gradient(135deg,#020b2b,var(--navy-dark));
	box-shadow:0 34px 70px -30px rgba(5,23,84,.55);
}
.ggs-404-cta-card h2{margin:0 0 8px;font-size:clamp(24px,2.8vw,34px);color:#fff !important;}
.ggs-404-cta-card p{margin:0;color:rgba(255,255,255,.85);max-width:520px;line-height:1.8;}
.ggs-404-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;}
.ggs-404-mail{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;}
.ggs-404-mail:hover{border-color:#fff;}

@media (max-width:960px){
	.ggs-404-inner{grid-template-columns:1fr;gap:36px;text-align:center;}
	.ggs-404-door{max-width:300px;}
	.ggs-404-copy p{margin-inline:auto;}
	.ggs-404-actions{justify-content:center;}
	.ggs-404-services{grid-template-columns:1fr;}
	.ggs-404-products{grid-template-columns:1fr 1fr;}
	.ggs-404-cta-card{padding:36px 26px;text-align:center;justify-content:center;}
	.ggs-404-cta-actions{justify-content:center;}
}
@media (max-width:520px){.ggs-404-products{grid-template-columns:1fr;}.ggs-404-hero{padding-block:60px 80px;}}
@media (prefers-reduced-motion:reduce){
	.ggs-404-leaf-l,.ggs-404-leaf-r{animation:none;}
	.ggs-404-leaf-l{transform:translateX(-102%);}.ggs-404-leaf-r{transform:translateX(102%);}
	.ggs-404-num,.ggs-404-beam{animation:none;}
}