/*
Theme Name: RAWK — Digital Frontiers
Template: hello-elementor
Version: 1.0
Text Domain: panacuda-design
*/
.wpf-media{overflow:hidden}
.wpf-media,.wpf-media>.elementor-widget-container,.wpf-media .elementor-image{height:100%}
.wpf-media img{width:100%;height:100%;object-fit:cover;display:block}
.wpf-ar-16x9{aspect-ratio:16/9}
.elementor-posts .elementor-post__card{background:#060c12;border:1px solid rgba(57,255,158,0.16);border-radius:14px;overflow:hidden}.elementor-posts .elementor-post__text{color:#e6f2ec}.elementor-posts .elementor-post__title a{color:#e6f2ec;text-decoration:none}.elementor-posts .elementor-post__title a:hover{color:#39ff9e}.elementor-posts .elementor-post__excerpt,.elementor-posts .elementor-post__excerpt p,.elementor-posts .elementor-post__meta-data{color:#6f8a82}.elementor-posts .elementor-post__read-more{color:#39ff9e}
#contact{background-color:#03060a!important;background-image:radial-gradient(circle at 50% 42%,rgba(57,255,158,0.18) 0%,transparent 60%)!important}
/* ============================================================
   RAWK — Digital Frontiers · WP-Forge import stylesheet (enriched)
   Reconciled with _example/rawk_new/rawk-final.html.
   Token vars mirror design.config.json -> tokens; the importer maps
   :root vars to Global Kit globals. Selectors target both the design's
   own classes (.rawk-*) AND Elementor's emitted wrappers (#<anchor>,
   .elementor-element-populated, the wpf-* media helpers).
   ============================================================ */
:root{
  /* color */
  --color-bg:#03060a;
  --color-panel:#060c12;
  --color-ink:#e6f2ec;
  --color-muted:#6f8a82;
  --color-accent:#39ff9e;
  --color-accent-2:#5fd4ff;
  --color-accent-dim:#1da06a;
  --color-steel:#5fd4ff;
  --color-glass:rgba(10,20,18,0.42);
  --color-hairline:rgba(57,255,158,0.16);
  --color-hairline-dim:rgba(57,255,158,0.08);
  /* font */
  --font-display:'Michroma',sans-serif;
  --font-body:'Chakra Petch',sans-serif;
  --display-tracking:-0.03em;
  /* radius */
  --radius-card:4px;
  --radius-panel:6px;
  --radius-pill:999px;
  /* space */
  --space-section-y:120px;
  --space-gutter:6vw;
  --space-stack:22px;
  /* shadow */
  --shadow-card:0 20px 50px rgba(0,0,0,0.5),0 0 30px rgba(57,255,158,0.08);
  --shadow-glow:0 0 30px rgba(57,255,158,0.3);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;}

/* ============================================================
   CONTENT WIDTH FIX (GAP #5)
   The reference is full-bleed: sections are 100% wide, capped ONLY by
   6vw side padding (88vw effective, no max-width). Elementor caps every
   "boxed" inner column to the kit container_width. We widen that to the
   reference feel and let sections breathe edge-to-edge. tokens.space.content
   (1600px) drives the kit cap; here we also relax Elementor's own boxed
   width so content reaches near the gutters instead of a narrow 1320px box.
   ============================================================ */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-boxed > .e-con-inner,
.elementor-widget-wrap > .elementor-element.e-con-boxed > .e-con-inner{
  max-width:1600px;
}
/* Section bands keep the reference's 6vw gutter + 120px vertical rhythm. */
.elementor-element[data-element_type="container"] > .e-con-inner{padding-inline:0;}

/* --- global FX overlays (background layer) --- */
#rawk-bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
.rawk-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 18%,rgba(2,4,7,0.92) 100%);}
.rawk-scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(57,255,158,.5) 3px,transparent 4px);}
/* GAP #8: grain overlay restored (SVG fractalNoise, opacity .04) */
.rawk-grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* content sits above the four fixed FX layers */
#hero,#about-intro,#services,#work,#about,#contact,#nav,.rawk-footer{position:relative;z-index:3;}

/* ============================================================
   STICKY NAV FIX (GAP #3, #9)
   The bar carries _element_id "nav". Reference nav is position:fixed;top:0
   with a constant blur + downward gradient + bottom hairline. We pin it and
   restore the logo glow, blinking status dot, and link underline-on-hover.
   ============================================================ */
#nav{position:fixed!important;top:0;left:0;right:0;z-index:50;
  padding:20px var(--space-gutter)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,rgba(3,6,10,0.7),transparent);
  border-bottom:1px solid rgba(57,255,158,0.06);}
.rawk-nav{display:flex;align-items:center;justify-content:space-between;width:100%;}
.rawk-logo{font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:.1em;
  color:var(--color-accent);text-shadow:0 0 20px rgba(57,255,158,.5);
  display:flex;align-items:center;gap:10px;text-decoration:none;background:none;border:none;cursor:pointer;}
.rawk-logo .stat-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);
  box-shadow:0 0 12px var(--color-accent);animation:rawk-blink 2.2s infinite;}
.rawk-navlinks{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
.rawk-navlinks a{background:none;border:none;color:var(--color-muted);font-family:var(--font-body);
  cursor:pointer;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  transition:color .3s;position:relative;display:inline-block;}
.rawk-navlinks a:hover,.rawk-navlinks a.active{color:var(--color-accent);}
.rawk-navlinks a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--color-accent);box-shadow:0 0 8px var(--color-accent);transition:width .3s;}
.rawk-navlinks a:hover::after,.rawk-navlinks a.active::after{width:100%;}
/* fixed nav overlays the hero (hero is min-height:100vh, starts at top:0) */
@media(max-width:760px){.rawk-navlinks{gap:16px;}.rawk-navlinks a{font-size:.62rem;}}
/* the auto-injected wpf mobile drawer already hides #nav <=900px */

/* --- typography helpers --- */
.display{font-family:var(--font-display);font-weight:400;letter-spacing:var(--display-tracking);}
.eyebrow,.sec-label{font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;color:var(--color-accent);margin-bottom:16px;opacity:.9;display:flex;align-items:center;gap:12px;}
.eyebrow::before,.sec-label::before{content:'';width:30px;height:1px;background:var(--color-accent);box-shadow:0 0 8px var(--color-accent);}
.accent{font-style:normal;background:linear-gradient(100deg,var(--color-accent),var(--color-steel));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 60px rgba(57,255,158,.3);}
.sec-title{font-family:var(--font-display);font-weight:400;letter-spacing:var(--display-tracking);font-size:clamp(1.3rem,2.8vw,2.1rem);line-height:1.2;max-width:22ch;margin-bottom:50px;}

/* --- buttons --- */
.btn,.elementor-button{padding:15px 34px;border-radius:3px;font-family:var(--font-body);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:all .3s;border:1px solid transparent;display:inline-block;}
.btn-primary{background:var(--color-accent);color:var(--color-bg);box-shadow:var(--shadow-glow);}
.btn-primary:hover{box-shadow:0 0 50px rgba(57,255,158,.6);transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--color-hairline);color:var(--color-ink);background:var(--color-glass);backdrop-filter:blur(10px);}
.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent);}

/* --- hero (GAP #10 sizes, scroll hint) --- */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:var(--display-tracking);max-width:16ch;}
#hero .eyebrow{letter-spacing:.4em;}
.hero p{margin-top:30px;max-width:48ch;color:var(--color-muted);font-size:1.05rem;line-height:1.7;}
.cta-row{margin-top:42px;display:flex;gap:18px;flex-wrap:wrap;}
.scroll-hint{position:absolute;bottom:36px;left:var(--space-gutter);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--color-muted);display:flex;align-items:center;gap:10px;}
.scroll-hint .bar{width:40px;height:1px;background:var(--color-accent);box-shadow:0 0 8px var(--color-accent);animation:rawk-pulse 2s infinite;}

/* --- stat trio / about intro --- */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;}
.about-grid p{color:var(--color-muted);line-height:1.8;font-size:1.02rem;margin-bottom:22px;}
.stat-stack{display:flex;flex-direction:column;gap:1px;}
.stat{background:var(--color-glass);border:1px solid var(--color-hairline);backdrop-filter:blur(14px);padding:26px 30px;position:relative;overflow:hidden;}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--color-accent);box-shadow:0 0 12px var(--color-accent);}
.stat .num{font-family:var(--font-display);font-weight:400;font-size:1.7rem;letter-spacing:-.02em;color:var(--color-accent);text-shadow:0 0 20px rgba(57,255,158,.4);}
.stat .lbl{color:var(--color-muted);font-size:.82rem;letter-spacing:.08em;margin-top:4px;}

/* ============================================================
   SERVICE GRID (GAP #4)
   Reference = glass cards w/ blur, hairline border, 4px radius, top accent
   line on hover, index number (.idx green-dim Michroma), hidden "Learn more"
   reveal, tag pills. The importer renders a shared lattice of text-only cells;
   we re-skin each cell to look like an individual glass card and style the
   eyebrow as the index number + the bottom-pinned tag pills.
   ============================================================ */
.svc-grid,.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card{background:var(--color-glass);border:1px solid var(--color-hairline);backdrop-filter:blur(16px);border-radius:var(--radius-card);padding:34px 30px;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;cursor:pointer;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);opacity:0;transition:opacity .4s;}
.card:hover{transform:translateY(-8px);border-color:rgba(57,255,158,.45);box-shadow:var(--shadow-card);}
.card:hover::before{opacity:1;}
.card .idx{font-family:var(--font-display);font-weight:400;font-size:.9rem;color:var(--color-accent-dim);}
.card h3{font-family:var(--font-display);font-weight:400;font-size:.98rem;letter-spacing:-.02em;line-height:1.3;margin:18px 0 14px;}
.card p{color:var(--color-muted);line-height:1.65;font-size:.92rem;}
.card .more{margin-top:18px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);opacity:0;transition:opacity .3s;}
.card:hover .more{opacity:1;}
/* re-skin importer service-grid lattice cells into individual glass cards */
#services .e-con.e-grid > .e-con-inner > .elementor-element,
#services [class*="grid"] > .elementor-element{
  background:var(--color-glass);border:1px solid var(--color-hairline)!important;
  backdrop-filter:blur(16px);border-radius:var(--radius-card);overflow:hidden;
  transition:transform .4s,border-color .4s,box-shadow .4s;}
#services [class*="grid"] > .elementor-element:hover{transform:translateY(-8px);border-color:rgba(57,255,158,.45)!important;box-shadow:var(--shadow-card);}
/* service icon (added by importer change — per-item item.icon) */
#services .elementor-widget-icon,.svc-icon{color:var(--color-accent);font-size:1.4rem;margin-bottom:10px;}
#services .elementor-widget-icon i,.svc-icon i{color:var(--color-accent);}

/* dedicated /services page numbered rows (cap-row) */
.cap-row{display:grid;grid-template-columns:80px 1fr;gap:30px;padding:36px 0;border-bottom:1px solid var(--color-hairline-dim);align-items:start;}
.cap-row .n{font-family:var(--font-display);font-weight:400;font-size:1.6rem;color:var(--color-accent-dim);}
.cap-row h3{font-family:var(--font-display);font-weight:400;font-size:1.15rem;letter-spacing:-.02em;margin-bottom:14px;line-height:1.25;}
.cap-row p{color:var(--color-muted);line-height:1.75;max-width:60ch;}
.cap-row .tags{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;}
.cap-row .tags span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);border:1px solid var(--color-hairline);padding:5px 12px;border-radius:20px;}
@media(max-width:600px){.cap-row{grid-template-columns:1fr;gap:8px;}}
/* tag pills emitted by _pill_tags -> tint to accent + hairline ring */
#services .elementor-widget-text-editor span[style*="border-radius:999px"]{color:var(--color-accent)!important;border-color:var(--color-hairline)!important;}

/* ============================================================
   WORK GALLERY — dark image cards (GAP #6) + dynamic Posts theming
   ============================================================ */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.proj{position:relative;border:1px solid var(--color-hairline);border-radius:var(--radius-card);overflow:hidden;aspect-ratio:16/9;display:block;text-decoration:none;transition:transform .4s,box-shadow .4s,border-color .4s;}
.proj img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.5) contrast(1.1);transition:all .5s;}
.proj:hover img{filter:grayscale(0) brightness(.7);transform:scale(1.05);}
.proj:hover{box-shadow:0 20px 60px rgba(57,255,158,.12);transform:translateY(-4px);border-color:rgba(57,255,158,.4);}
.proj .meta{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:linear-gradient(to top,rgba(3,6,10,.92),transparent 70%);}
.proj .meta .tag{font-size:.66rem;letter-spacing:.25em;text-transform:uppercase;color:var(--color-accent);margin-bottom:8px;}
.proj .meta h4{font-family:var(--font-display);font-weight:400;font-size:1.2rem;letter-spacing:-.02em;line-height:1.3;color:var(--color-ink);}
/* dynamic Pro Posts (cards skin) -> dark image tile w/ overlay caption */
.elementor-posts .elementor-post__card{background:transparent;border:1px solid var(--color-hairline);border-radius:var(--radius-card);overflow:hidden;position:relative;aspect-ratio:16/9;transition:transform .4s,box-shadow .4s,border-color .4s;}
.elementor-posts .elementor-post__card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(57,255,158,.12);border-color:rgba(57,255,158,.4);}
.elementor-posts .elementor-post__thumbnail{aspect-ratio:16/9;height:100%;}
.elementor-posts .elementor-post__thumbnail img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.5) contrast(1.1);transition:all .5s;}
.elementor-posts .elementor-post__card:hover .elementor-post__thumbnail img{filter:grayscale(0) brightness(.7);transform:scale(1.05);}
.elementor-posts .elementor-post__text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:linear-gradient(to top,rgba(3,6,10,.92),transparent 70%);}
.elementor-posts .elementor-post__title a{font-family:var(--font-display);font-weight:400;font-size:1.2rem;color:var(--color-ink);text-decoration:none;}
.elementor-posts .elementor-post__title a:hover{color:var(--color-accent);}
.elementor-posts .elementor-post__excerpt{display:none;}

/* ============================================================
   PROJECT DETAIL / SINGLE-POST (GAP #1, #2)
   Reference proj-hero (21:9 cinematic) + detail-grid (1.6fr|1fr) + sticky
   spec-box + Highlights ▸ list. These selectors style the Theme-Builder
   single template (build_single_tree) AND the standalone case-study markup.
   ============================================================ */
.proj-hero{position:relative;border-radius:var(--radius-panel);overflow:hidden;aspect-ratio:21/9;margin-bottom:50px;border:1px solid var(--color-hairline);}
.proj-hero img,.single .elementor-widget-theme-post-featured-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) contrast(1.1);}
.single .elementor-widget-theme-post-featured-image{border-radius:var(--radius-panel);overflow:hidden;border:1px solid var(--color-hairline);}
.proj-hero .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(3,6,10,.95),transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:46px;}
.proj-hero .tag{font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;color:var(--color-accent);margin-bottom:12px;}
.proj-hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.03em;color:var(--color-ink);}
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:60px;align-items:start;}
.detail-body p,.single .elementor-widget-theme-post-content p{color:var(--color-muted);line-height:1.85;font-size:1.04rem;margin-bottom:24px;}
.detail-body p.lede,.single .elementor-widget-theme-post-content p:first-of-type{color:var(--color-ink);font-size:1.18rem;line-height:1.6;}
.detail-body h3,.single .elementor-widget-theme-post-content h3{font-family:var(--font-display);font-weight:400;font-size:1.1rem;letter-spacing:-.02em;margin:36px 0 16px;color:var(--color-ink);}
.detail-body ul,.single .elementor-widget-theme-post-content ul{list-style:none;margin-bottom:24px;}
.detail-body li,.single .elementor-widget-theme-post-content ul li{color:var(--color-muted);line-height:1.7;padding-left:24px;position:relative;margin-bottom:10px;}
.detail-body li::before,.single .elementor-widget-theme-post-content ul li::before{content:'▸';position:absolute;left:0;color:var(--color-accent);}
.spec-box{background:var(--color-glass);border:1px solid var(--color-hairline);backdrop-filter:blur(14px);border-radius:var(--radius-panel);padding:30px;position:sticky;top:110px;}
.spec-box::before{content:'';display:block;width:40px;height:2px;background:var(--color-accent);box-shadow:0 0 12px var(--color-accent);margin-bottom:20px;}
.spec-row{padding:14px 0;border-bottom:1px solid var(--color-hairline-dim);}
.spec-row:last-child{border:none;}
.spec-row .k{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-muted);margin-bottom:5px;}
.spec-row .v{color:var(--color-ink);font-size:.95rem;}
.spec-row .v.green{color:var(--color-accent);}
.backlink{background:none;border:none;color:var(--color-muted);font-family:var(--font-body);cursor:pointer;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:30px;transition:color .3s;text-decoration:none;display:inline-block;}
.backlink:hover{color:var(--color-accent);}
@media(max-width:820px){.detail-grid{grid-template-columns:1fr;gap:36px;}.spec-box{position:static;}}

/* ============================================================
   CONTACT (GAP #8 conic sweep, #10 mail size)
   ============================================================ */
#contact > .e-con-inner,#contact .elementor-element-populated{max-width:760px;margin:0 auto;}
.contact-box,#contact .e-con-inner{background:var(--color-glass);border:1px solid var(--color-hairline);backdrop-filter:blur(18px);border-radius:var(--radius-panel);padding:60px;text-align:center;max-width:760px;margin:0 auto;position:relative;overflow:hidden;}
.contact-box::after,#contact .e-con-inner::after{content:'';position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,rgba(57,255,158,.07),transparent 30%);animation:rawk-spin 14s linear infinite;pointer-events:none;}
.contact-box > *,#contact .e-con-inner > *{position:relative;z-index:1;}
.contact-box h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.03em;line-height:1.2;margin-bottom:20px;}
.contact-box p{color:var(--color-muted);line-height:1.7;margin-bottom:30px;max-width:50ch;margin-inline:auto;}
.mail{font-family:var(--font-display);font-size:1.3rem;color:var(--color-accent);text-decoration:none;text-shadow:0 0 20px rgba(57,255,158,.3);}
.mail:hover{text-shadow:0 0 30px rgba(57,255,158,.7);}
/* email = the primary cta button in the cta-band; make it read as the .mail link */
#contact .elementor-button{background:transparent;box-shadow:none;color:var(--color-accent);font-family:var(--font-display);font-size:1.3rem;text-transform:none;letter-spacing:-.02em;padding:0;border:none;text-shadow:0 0 20px rgba(57,255,158,.3);}
#contact .elementor-button:hover{transform:none;text-shadow:0 0 30px rgba(57,255,158,.7);}
.rawk-socials,.socials{margin-top:34px;display:flex;gap:24px;justify-content:center;flex-wrap:wrap;}
.rawk-socials a,.socials a{color:var(--color-muted);text-decoration:none;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;transition:color .3s;}
.rawk-socials a:hover,.socials a:hover{color:var(--color-accent);}

/* --- footer --- */
.rawk-footer,footer{padding:40px var(--space-gutter);text-align:center;color:var(--color-muted);font-size:.74rem;letter-spacing:.1em;border-top:1px solid var(--color-hairline-dim);position:relative;z-index:3;}

/* --- reveal-on-scroll (motion.js) --- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s;}
.reveal.in{opacity:1;transform:translateY(0);}
.pagefade{animation:rawk-rise .7s ease both;}

/* --- keyframes (GAP #8) --- */
@keyframes rawk-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rawk-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rawk-spin{to{transform:rotate(360deg)}}
@keyframes rawk-rise{to{opacity:1;transform:translateY(0)}}

/* --- responsive (reference breakpoints) --- */
@media(max-width:900px){.svc-grid,.grid-3{grid-template-columns:1fr 1fr;}}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:40px;}}
@media(max-width:760px){.grid-2{grid-template-columns:1fr;}}
@media(max-width:600px){.svc-grid,.grid-3{grid-template-columns:1fr;}}