/*
Theme Name: GeneratePress Child (WGXL)
Theme URI: https://wiseguyxl.eu
Description: WGXL child theme — units.gr-inspired design tokens, component CSS, fonts and reveal JS for wiseguyxl.eu. Header/footer are provided as GeneratePress Block Elements.
Author: WiseGuy XL
Template: generatepress
Version: 1.0.0
*/

:root{
  --cream:#FFFFFF; --paper-2:#F8FAFC; --ink:#0F172A; --slate:#64748B; --line:#E5E7EB;
  --blue:#C2410C; --blue-bright:#F97316; --amber:#F97316; --purple:#C2410C; --green:#16A34A; --green-bright:#16A34A;
  --navy:#0F172A; --cta:#F97316; --cta-hover:#EA580C; --success:#16A34A; --danger:#DC2626;
  --display:"Space Grotesk",-apple-system,"Segoe UI",sans-serif;
  --body:"Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-hero:clamp(2.9rem,8vw,6rem); --fs-h2:clamp(2rem,5vw,3.4rem); --fs-h3:1.5rem;
  --container:1200px; --gutter:clamp(20px,5vw,44px); --section-y:clamp(64px,9vw,120px);
  --radius:14px; --radius-lg:24px; --pill:999px;
  --dur:.22s; --dur-slow:.55s; --ease:cubic-bezier(.16,1,.3,1);
  /* Material-style elevation */
  --shadow-1:0 1px 3px rgba(26,26,26,.10),0 1px 2px rgba(26,26,26,.06);
  --shadow-2:0 4px 10px -2px rgba(26,26,26,.12),0 2px 6px -3px rgba(26,26,26,.10);
  --shadow-4:0 14px 30px -8px rgba(26,26,26,.20),0 6px 12px -6px rgba(26,26,26,.12);
  --shadow-lg:0 20px 44px -10px rgba(26,26,26,.26);
  --amber-ink:#9A3412;
}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.02em;text-transform:lowercase}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:4px}
.wgxl .wrap,.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.eyebrow{font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:var(--pill);border:2px solid var(--ink);cursor:pointer;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
/* Primary = ink (contained), Material elevation on hover */
.btn--primary{background:var(--cta);border-color:var(--cta);color:#fff;box-shadow:var(--shadow-1)}
.btn--primary:hover{transform:translateY(-2px);background:var(--cta-hover);border-color:var(--cta-hover);color:#fff;box-shadow:var(--shadow-2)}
.btn--dark{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--shadow-1)}
.btn--dark:hover{transform:translateY(-2px);color:#fff;box-shadow:var(--shadow-2)}
/* Secondary = outlined ink (text), subtle fill on hover — no elevation */
.btn--ghost{background:transparent;color:var(--ink);box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:#fff}
/* CTA icons removed per brand direction */
.btn .ar{display:none!important}

.wgxl-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color var(--dur)}
.wgxl-header.scrolled{border-color:var(--line)}
.wgxl-header .nav{display:flex;align-items:center;gap:24px;height:74px}
.brand{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-.04em;text-transform:lowercase}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font-weight:600;font-size:.96rem;color:var(--slate)}
.nav-links a:hover{color:var(--ink)}
.wgxl-header .nav .btn{padding:10px 20px;font-size:.95rem}
.menu-btn{display:none;background:none;border:0;cursor:pointer}
.wgxl-drawer{display:none}
.wgxl-drawer.open{display:block;position:fixed;inset:0;z-index:60;background:var(--cream);padding:28px}
.wgxl-drawer a{display:block;font-family:var(--display);font-weight:700;font-size:1.6rem;text-transform:lowercase;padding:12px 0;border-bottom:1px solid var(--line)}
.wgxl-drawer .close{position:absolute;top:22px;right:22px;background:none;border:0;font-size:2rem;cursor:pointer}

.hero{position:relative;overflow:hidden}
.hero .wrap{padding-top:clamp(40px,6vw,72px);padding-bottom:var(--section-y)}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero .kick{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:7px 14px;border-radius:var(--pill);margin-bottom:22px}
.hero .kick .dot{width:8px;height:8px;border-radius:50%;background:var(--green-bright)}
.hero h1{font-size:var(--fs-hero)}
.hero .lead{margin-top:22px;font-size:clamp(1.1rem,1.6vw,1.28rem);max-width:44ch;color:var(--slate)}
.hero .cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.hero-visual{position:relative;aspect-ratio:1/1;background:var(--amber);border:3px solid var(--ink);border-radius:var(--radius-lg);display:grid;place-items:center}
.hero-visual .arrow{width:52%;height:52%;color:var(--ink)}
.hero-visual .sticker{position:absolute;left:-18px;bottom:26px;background:var(--green-bright);border:3px solid var(--ink);border-radius:12px;padding:10px 16px;transform:rotate(-4deg)}
.hero-visual .sticker small{display:block;font-family:var(--body);font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.hero-visual .sticker b{font-family:var(--display);font-size:1.5rem}

.marquee{border-block:3px solid var(--ink);background:var(--paper-2);overflow:hidden;white-space:nowrap}
.marquee .track{display:inline-flex;gap:38px;padding-block:16px;font-family:var(--display);font-weight:700;font-size:1.4rem;text-transform:lowercase;animation:wgxl-scroll 26s linear infinite}
.marquee .track span{display:inline-flex;align-items:center;gap:38px}
.marquee .track .em{color:var(--purple)}
@keyframes wgxl-scroll{to{transform:translateX(-50%)}}

.svc{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* Cards: light surface + Material elevation (rest -> hover), consistent ink text.
   Colour survives only as a top accent bar, the icon and the "go" link. */
.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--ink);border-radius:var(--radius);
  padding:26px;min-height:230px;display:flex;flex-direction:column;gap:12px;color:var(--ink);
  box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-4)}
.card .ic{width:44px;height:44px}
.card h3{font-size:1.35rem;margin-top:auto;color:var(--ink)}
.card p{font-size:.95rem;color:var(--slate)}
.card .go{font-weight:700;font-family:var(--body)}
.card--blue,.card--amber,.card--purple,.card--green{border-top-color:var(--cta)}
.card .ic{color:var(--cta)} .card .go{color:#C2410C}

.pillars{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar{border-top:3px solid var(--ink);padding-top:20px}
.pillar .n{font-family:var(--display);font-weight:700;font-size:2rem}
.pillar h4{font-size:1.3rem;margin-top:8px}
.pillar p{margin-top:8px;color:var(--slate)}

.steps{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-1);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.step .num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700}
.step h4{font-size:1.2rem;margin-top:16px}
.step p{margin-top:8px;color:var(--slate);font-size:.95rem}

.work{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-4)}
.tile .thumb{aspect-ratio:16/11;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:1.3rem;text-transform:lowercase}
.tile .cap{display:flex;justify-content:space-between;gap:10px;padding:14px 18px;background:var(--cream);border-top:3px solid var(--ink);font-weight:600;font-size:.9rem}
.tile .cap .c{color:var(--slate);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}

.faq{margin-top:40px;max-width:820px}
.faq details{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:16px;font-family:var(--display);font-weight:700;font-size:1.2rem;text-transform:lowercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-family:var(--body);color:var(--purple);transition:transform var(--dur)}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding-bottom:22px;color:var(--slate);max-width:70ch}

.band{background:var(--navy);color:#fff}
.band .wrap{padding-block:clamp(60px,8vw,110px);text-align:center}
.band h2{font-size:clamp(2.4rem,6vw,4.5rem)}
.band .cta{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.band .btn--onp{background:var(--cta);border-color:var(--cta);color:#fff}
.band .btn--onp:hover{transform:translateY(-2px)}
.band .em{margin-top:20px;color:rgba(255,255,255,.85)}
.band .em a{color:#fff;text-decoration:underline}

.wgxl-footer{background:var(--ink);color:#fff}
.wgxl-footer .foot{padding-block:64px 28px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:36px}
.wgxl-footer .big{font-family:var(--display);font-weight:700;font-size:2.4rem;letter-spacing:-.04em;text-transform:lowercase}
.wgxl-footer p{color:#94A3B8;font-size:.95rem;margin-top:10px;max-width:32ch}
.wgxl-footer h5{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#94A3B8;margin:0 0 14px}
.wgxl-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wgxl-footer ul a{color:#fff;font-size:.96rem}.wgxl-footer ul a:hover{color:var(--cta)}
.wgxl-footer .data{color:#94A3B8;font-size:.82rem;margin-top:12px}
.wgxl-footer .foot-bottom{border-top:1px solid #333;padding-block:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#94A3B8;font-size:.85rem}

.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.vis{opacity:1;transform:none}

@media(max-width:900px){
  .nav-links{display:none} .menu-btn{display:block}
  .hero-inner{grid-template-columns:1fr} .hero-visual{max-width:380px}
  .svc,.work{grid-template-columns:1fr 1fr} .pillars,.steps{grid-template-columns:1fr}
  .wgxl-footer .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){.svc,.work,.wgxl-footer .foot{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

.wgxl-skip:focus{position:fixed!important;left:16px!important;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}

/* WGXL full-bleed pages */
.wgxl-page #page.grid-container{max-width:100%;padding-left:0;padding-right:0}
.wgxl-page .site-content{padding:0}
.wgxl-page #primary{padding:0;width:100%;max-width:100%}
.wgxl-page .inside-article,.wgxl-page .entry-content{padding:0;margin:0}
.wgxl-page .entry-header,.wgxl-page .page-header{display:none}
.wgxl-page article,.wgxl-page .inside-article{border:0}

/* ---- Mobile menu + button spacing fixes ---- */
@media(max-width:900px){
  .wgxl-header .nav{gap:14px}
  .wgxl-header .nav .btn--primary{padding:10px 18px;font-size:.9rem}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:50px;min-height:50px;border:2px solid var(--ink);border-radius:14px;background:var(--ink);box-shadow:var(--shadow-2)}
  .menu-btn svg,.menu-btn svg path{width:24px;height:24px;stroke:#fff}
  .menu-btn:hover{background:#000;transform:translateY(-1px)}
  .menu-btn:active{transform:translateY(0)}
}
@media(max-width:560px){
  .wgxl-header .nav{height:64px}
  .wgxl-header .nav .btn--primary{display:none}
  .hero .cta,.band .cta,.wg-two .cta{flex-direction:column;align-items:stretch;gap:14px}
  .hero .cta .btn,.band .cta .btn,.wg-two .cta .btn{width:100%;justify-content:center}
  .btn{padding:16px 22px}
  .card,.step,.wg-formwrap,.wg-proof .t,.wg-proof .b{padding:22px}
  .wgxl-drawer{padding:24px 22px}
  .wgxl-drawer a{font-size:1.5rem;padding:14px 0}
  .wgxl-drawer .btn{width:100%;justify-content:center;margin-top:20px}
  .section{padding-block:56px}
  .svc,.work,.cs-grid,.wg-deliver,.pillars,.steps{gap:16px}
}
.menu-btn{min-width:44px;min-height:44px}

/* ---- Cookie consent banner ---- */
.wgxl-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 22px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow-lg);max-width:820px;margin-inline:auto}
/* Fix: honour the [hidden] attribute so Accept/Reject actually dismisses it */
.wgxl-cookie[hidden]{display:none!important}
.wgxl-cookie p{margin:0;font-size:.92rem;max-width:56ch;color:var(--ink)}
.wgxl-cookie a{color:var(--blue);font-weight:700}
.wgxl-cookie-btns{display:flex;gap:10px}
.wgxl-cookie .btn{padding:10px 22px}
@media(max-width:560px){.wgxl-cookie{flex-direction:column;align-items:stretch;left:10px;right:10px;bottom:10px}.wgxl-cookie-btns{justify-content:stretch}.wgxl-cookie .btn{flex:1;justify-content:center}}


/* ---- Task1: button polish + Task2: animation helpers ---- */
.btn{min-height:48px}
@media(max-width:560px){
  .wg-formwrap .fluentform .ff-btn-submit{width:100%}
  .btn{min-height:50px;font-size:1.02rem}
}
.wg-stats .wg-conf,.cs-metric{font-variant-numeric:tabular-nums}

/* ---- Material elevation for page-level cards (overrides inline thick borders) ---- */
.wgxl-page .tc{
  border:1px solid var(--line)!important;box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.wgxl-page .tc:hover{transform:translateY(-4px);box-shadow:var(--shadow-4)}
@media(prefers-reduced-motion:reduce){.wgxl-page .tc:hover{transform:none}}

/* ---- Client trust wall -> cards ---- */
.wgxl-page .wg-names{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.wgxl-page .wg-names span{flex:1 1 150px;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-height:62px;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.wgxl-page .wg-names span:hover{transform:translateY(-3px);box-shadow:var(--shadow-4)}
@media(prefers-reduced-motion:reduce){.wgxl-page .wg-names span:hover{transform:none}}

/* ---- Hero: pull metric band up (kill the blank gap) ---- */
.wgxl-page .hero-inner{padding-bottom:40px}
.wgxl-page .hero .wrap:has(.wg-hrow){padding-top:0;padding-bottom:64px}

/* ---- Metric cards: colourful, gapless band ---- */
.wgxl-page .wg-hrow{gap:0;margin-top:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-2)}
.wgxl-page .wg-hrow>div{border:0!important;border-radius:0!important;box-shadow:none!important;padding:22px 18px;transition:none}
.wgxl-page .wg-hrow>div+div{box-shadow:inset 1px 0 0 rgba(255,255,255,.28)!important}
.wgxl-page .wg-hrow>div{background:var(--navy)!important}
.wgxl-page .wg-hrow>div b{color:#fff}
.wgxl-page .wg-hrow>div span{color:#94A3B8}
@media(max-width:560px){.wgxl-page .wg-hrow{grid-template-columns:1fr 1fr}.wgxl-page .wg-hrow>div:nth-child(3){box-shadow:inset 0 1px 0 rgba(255,255,255,.28)!important}}

/* ---- Mobile drawer button: centre the label ---- */
.wgxl-drawer .btn{display:flex;align-items:center;justify-content:center;text-align:center;gap:.4em}

/* ---- Header language switcher (moved out of the floating box) ---- */
.wgxl-lang{display:inline-flex;align-items:center}
.wgxl-header .nav .wgxl-lang{margin-left:2px}
.wgxl-lang .trp-language-switcher{margin:0}
.wgxl-lang--drawer{display:flex;margin-top:22px}
@media(max-width:900px){.wgxl-header .nav .wgxl-lang:not(.wgxl-lang--drawer){display:none}}

/* ---- Services dropdown (desktop) ---- */
.nav-links .nav-item{position:relative;display:inline-flex;align-items:center}
.nav-links .has-sub{align-self:stretch}
.nav-links .has-sub>a::after{content:"\25BE";font-size:.7em;margin-left:5px;color:var(--slate)}
.nav-links .subnav{position:absolute;top:100%;left:-10px;min-width:252px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-4);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60}
.nav-links .has-sub:hover .subnav,.nav-links .has-sub:focus-within .subnav{display:flex}
.nav-links .subnav a{display:block;padding:9px 12px;border-radius:8px;font-size:.9rem;color:var(--slate);white-space:nowrap}
.nav-links .subnav a:hover{background:var(--paper-2);color:var(--ink)}
.wgxl-drawer .subdrawer{font-family:var(--display);font-weight:500;font-size:1.15rem;text-transform:lowercase;padding:8px 0 8px 16px;color:var(--slate);border-bottom:1px solid var(--line)}

/* ---- Founder block with real photos ---- */
.wgxl-page .wg-founder3{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start;margin-top:22px}
.wgxl-page .wg-founder3 .fphoto{width:100%;height:400px;object-fit:cover;object-position:center top;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-2)}
.wgxl-page .wg-founder3 .fphoto2{width:100%;max-width:560px;height:230px;object-fit:cover;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-1);margin-top:20px}
@media(max-width:760px){.wgxl-page .wg-founder3{grid-template-columns:1fr}.wgxl-page .wg-founder3 .fphoto{height:360px}}

/* ---- Client logo card in trust wall ---- */
.wgxl-page .wg-names .wg-logocard{padding:10px 18px}
.wgxl-page .wg-names .wg-logocard img{max-height:40px;width:auto;object-fit:contain;display:block}

/* ==== Navy + White + Orange palette overrides ==== */
/* Logo wall becomes a navy trust section with white logos */
.wgxl-page section:has(.wgxl-logowall){background:var(--navy)!important}
.wgxl-page section:has(.wgxl-logowall) h2{color:#fff}
.wgxl-page section:has(.wgxl-logowall) .eyebrow{color:var(--cta)}
.wgxl-page .wgxl-logowall img{filter:brightness(0) invert(1)!important}
/* Eyebrows on dark bands read bright orange */
.band .eyebrow,.wgxl-page [style*="--ink"] .eyebrow,.wgxl-page [style*="0F172A"] .eyebrow{color:var(--cta)}
/* Testimonial badge = success green, quote mark = orange (tokens now defined) */
.wgxl-page .tbadge{background:var(--success);color:#fff}
.wgxl-page .tcard .tq::before{color:var(--cta)}