/* ==== /assets/css/service/shared/service-faq.css ==== */
/* Yuvau Digital v0.10.156 — unified inner-page FAQ component */
.yu-faq-unified{position:relative;padding:112px 0 120px;background:#f7f9fc;color:#0d1730;overflow:hidden}
.yu-faq-unified__container{width:min(var(--yu-content-max),calc(100% - 48px));margin:0 auto}
.yu-faq-unified__layout{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);gap:76px;align-items:start}
.yu-faq-unified__intro{padding-top:8px;max-width:520px}
.yu-faq-unified__eyebrow{margin:0 0 22px;font-size:13px;line-height:1;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#2868ed}
.yu-faq-unified__intro h2{margin:0;font-size:clamp(3.2rem,5.2vw,5.2rem);line-height:1.08;letter-spacing:-.02em;font-weight:800;color:#0d1730;max-width:600px}
.yu-faq-unified__intro>p:last-child{margin:24px 0 0;max-width:500px;font-size:17px;line-height:1.7;color:#65728a}
.yu-faq-unified__list{min-width:0;border-top:1px solid #d9e1ed}
.yu-faq-unified__item{margin:0;border-bottom:1px solid #d9e1ed;background:transparent}
.yu-faq-unified__item::marker,.yu-faq-unified__question::marker{display:none}
.yu-faq-unified__question{display:grid;grid-template-columns:42px minmax(0,1fr) 28px;align-items:center;gap:18px;min-height:92px;padding:18px 0;cursor:pointer;list-style:none}
.yu-faq-unified__question::-webkit-details-marker{display:none}
.yu-faq-unified__number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e8f1ff;color:#2167ec;font-size:12px;font-weight:800;letter-spacing:.02em}
.yu-faq-unified__question-text{font-size:18px;line-height:1.35;font-weight:700;color:#111b31}
.yu-faq-unified__icon{display:grid;place-items:center;width:28px;height:28px;color:#2167ec;font-size:25px;line-height:1;font-weight:500;transition:transform .22s ease}
.yu-faq-unified__item[open] .yu-faq-unified__icon{transform:rotate(45deg)}
.yu-faq-unified__answer{padding:0 46px 24px 60px}
.yu-faq-unified__answer p{margin:0;max-width:760px;font-size:15px;line-height:1.72;color:#68758c}
@media(max-width:900px){
.yu-faq-unified{padding:84px 0 88px}
.yu-faq-unified__container{width:min(100% - 32px,760px)}
.yu-faq-unified__layout{grid-template-columns:1fr;gap:34px}
.yu-faq-unified__intro{max-width:720px;padding-top:0}
.yu-faq-unified__intro h2{font-size:clamp(2.65rem,9vw,4.3rem);max-width:680px}
.yu-faq-unified__intro>p:last-child{margin-top:18px;font-size:15px;line-height:1.65}
}
@media(max-width:560px){
.yu-faq-unified{padding:66px 0 72px}
.yu-faq-unified__container{width:calc(100% - 32px)}
.yu-faq-unified__layout{gap:25px}
.yu-faq-unified__eyebrow{margin-bottom:15px;font-size:11px;letter-spacing:.16em}
.yu-faq-unified__intro h2{font-size:clamp(2.35rem,10.5vw,3.35rem);line-height:1.08;letter-spacing:-.02em}
.yu-faq-unified__intro>p:last-child{font-size:14px;line-height:1.65}
.yu-faq-unified__question{grid-template-columns:34px minmax(0,1fr) 24px;gap:11px;min-height:68px;padding:13px 0}
.yu-faq-unified__number{width:30px;height:30px;font-size:10px}
.yu-faq-unified__question-text{font-size:15px;line-height:1.34}
.yu-faq-unified__icon{width:24px;height:24px;font-size:22px}
.yu-faq-unified__answer{padding:0 4px 20px 45px}
.yu-faq-unified__answer p{font-size:13.5px;line-height:1.68}
}
@media(max-width:380px){
.yu-faq-unified__container{width:calc(100% - 28px)}
.yu-faq-unified__question{grid-template-columns:30px minmax(0,1fr) 22px;gap:9px}
.yu-faq-unified__number{width:28px;height:28px}
.yu-faq-unified__question-text{font-size:14px}
.yu-faq-unified__answer{padding-left:39px}
}
@media(prefers-reduced-motion:reduce){
.yu-faq-unified__icon{transition:none}
}
/* ==== /assets/css/typography-fix.css ==== */
/*
 * Yuvau Digital — Global Display Heading System v1
 * Purpose: keep the site's oversized editorial headings while preventing
 * awkward one/two-word stacking, over-wide lines and mobile overflow.
 * Loaded last by enqueue.php so this layer normalizes page-specific display rules.
 */
:root{
  --yu-heading-xl: clamp(2.75rem, 5.2vw, 5.6rem);
  --yu-heading-lg: clamp(2.3rem, 4.25vw, 4.55rem);
  --yu-heading-md: clamp(1.85rem, 3.2vw, 3.35rem);
  --yu-heading-line: 1.04;
  --yu-heading-tight: -0.027em;
}
/* Baseline safety. Do not add artificial word spacing: it makes large
 * display headings look fragmented and worsens wrapping at narrow widths. */
h1,h2,h3,h4,h5,h6{
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
/* Shared major-display targets across the site's custom page systems. */
.yu-homepage .yu-home-hero__title--live,
.yu-homepage .yu-home-why-v2__top h2,
.yu-homepage .yu-home-services__header h2,
.yu-homepage .yu-home-results__intro h2,
.yu-homepage .yu-home-faq__intro h2,
.yu-homepage .yu-home-final-cta__copy h2,
.yu-google-page .yg-hero__copy h1,
.yu-google-page .yg-head h2,
.yu-google-page .yg-editorial h2,
.yu-google-page .yg-signature__copy h2,
.yu-google-page .yg-measurement h2,
.yu-google-page .yg-why h2,
.yu-google-page .yg-final__card h2,
.yu-meta-page .yu-meta-hero h1,
.yu-meta-page .yu-meta-copy-block h2,
.yu-meta-page .yu-meta-section-head h2,
.yu-meta-page .yu-meta-final h2,
.yu-meta-page .yu-meta-proof h2,
.ywd-page .ywd-hero h1,
.ywd-page .ywd-heading h2,
.ywd-page .ywd-two-col h2,
.ywd-page .ywd-proof-card h2,
.ywd-page .ywd-final-card h2,
.yseo-page .yseo-hero__copy h1,
.yseo-page .yseo-heading h2,
.yseo-page .yseo-simple h2,
.yseo-page .yseo-why__grid h2,
.yseo-page .yseo-final-card h2,
.yff-page .yff-hero__copy h1,
.yff-page .yff-heading h2,
.yff-page .yff-final-card h2,
.yu-sm-page .ys-hero__copy h1,
.yu-sm-page .ys-section-head h2,
.yu-sm-page .ys-two-col h2,
.yu-sm-page .ys-final-card h2,
.ywm27-page .ywm-hero__copy h1,
.ywm27-page .ywm-section-head h2,
.ywm27-page .ywm-story__copy h2,
.ywm27-page .ywm-final h2,
.yu-wa-page .yw-wa-hero__copy h1,
.yu-wa-page .yw-headline h2,
.yu-wa-page .yw-final h2,
.yu-tm-page .yt-hero h1,
.yu-tm-page .yt-section-head h2,
.yu-tm-page .yt-results__head h2,
.yu-tm-page .yt-trust__head h2,
.yu-tm-page .yt-flow__copy h2,
.yu-tm-page .yt-cta h2,
.ydm-page .ydm-hero h1,
.ydm-page .ydm-section-head h2,
.ydm-page .ydm-story h2,
.ydm-page .ydm-final h2,
.yc-course-page h1,
.yc-course-page h2{
  text-wrap: balance;
  max-inline-size: 100%;
  min-inline-size: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  line-height: var(--yu-heading-line);
  letter-spacing: var(--yu-heading-tight);
}
/* Keep the display scale intentionally bold, but cap the largest systems. */
.yu-homepage .yu-home-hero__title--live,
.yu-google-page .yg-hero__copy h1,
.yu-meta-page .yu-meta-hero h1,
.ywd-page .ywd-hero h1,
.yseo-page .yseo-hero__copy h1,
.yff-page .yff-hero__copy h1,
.yu-sm-page .ys-hero__copy h1,
.ywm27-page .ywm-hero__copy h1,
.yu-wa-page .yw-wa-hero__copy h1,
.yu-tm-page .yt-hero h1,
.ydm-page .ydm-hero h1,
.yc-course-page h1{
  font-size: var(--yu-heading-xl);
}
.yu-homepage .yu-home-why-v2__top h2,
.yu-homepage .yu-home-services__header h2,
.yu-homepage .yu-home-results__intro h2,
.yu-homepage .yu-home-faq__intro h2,
.yu-homepage .yu-home-final-cta__copy h2,
.yu-google-page .yg-head h2,
.yu-google-page .yg-editorial h2,
.yu-google-page .yg-signature__copy h2,
.yu-google-page .yg-measurement h2,
.yu-google-page .yg-why h2,
.yu-google-page .yg-final__card h2,
.yu-meta-page .yu-meta-copy-block h2,
.yu-meta-page .yu-meta-section-head h2,
.yu-meta-page .yu-meta-final h2,
.ywd-page .ywd-heading h2,
.ywd-page .ywd-two-col h2,
.ywd-page .ywd-proof-card h2,
.ywd-page .ywd-final-card h2,
.yseo-page .yseo-heading h2,
.yseo-page .yseo-simple h2,
.yseo-page .yseo-why__grid h2,
.yseo-page .yseo-final-card h2,
.yff-page .yff-heading h2,
.yff-page .yff-final-card h2,
.yu-sm-page .ys-section-head h2,
.yu-sm-page .ys-two-col h2,
.yu-sm-page .ys-final-card h2,
.ywm27-page .ywm-section-head h2,
.ywm27-page .ywm-story__copy h2,
.ywm27-page .ywm-final h2,
.yu-wa-page .yw-headline h2,
.yu-wa-page .yw-final h2,
.yu-tm-page .yt-section-head h2,
.yu-tm-page .yt-results__head h2,
.yu-tm-page .yt-trust__head h2,
.yu-tm-page .yt-flow__copy h2,
.yu-tm-page .yt-cta h2,
.ydm-page .ydm-section-head h2,
.ydm-page .ydm-story h2,
.ydm-page .ydm-final h2,
.yc-course-page h2{
  font-size: var(--yu-heading-lg);
}
/* Respect component-specific dark backgrounds without changing color. */
.yu-google-page .yg-final__card h2,
.yu-tm-page .yt-flow__copy h2,
.yu-tm-page .yt-cta h2,
.yu-wa-page .yw-final h2,
.ydm-page .ydm-final h2{
  line-height: 1.035;
}
/* Section-head text blocks should not become ultra-wide just because the
 * viewport is wide. A moderate measure improves hierarchy and readability. */
.yu-homepage .yu-home-services__header h2,
.yu-homepage .yu-home-results__intro h2,
.yu-homepage .yu-home-faq__intro h2,
.yu-google-page .yg-head h2,
.yu-google-page .yg-editorial h2,
.yu-google-page .yg-signature__copy h2,
.yu-google-page .yg-measurement h2,
.yu-google-page .yg-why h2,
.yu-meta-page .yu-meta-copy-block h2,
.yu-meta-page .yu-meta-section-head h2,
.ywd-page .ywd-heading h2,
.ywd-page .ywd-two-col h2,
.yseo-page .yseo-heading h2,
.yseo-page .yseo-simple h2,
.yseo-page .yseo-why__grid h2,
.yff-page .yff-heading h2,
.yu-tm-page .yt-section-head h2,
.yu-tm-page .yt-flow__copy h2,
.ydm-page .ydm-section-head h2,
.ydm-page .ydm-story h2{
  max-width: 22ch;
}
/* Homepage display H2 can use a wider measure because its composition has a
 * two-column layout on larger screens. */
.yu-homepage .yu-home-why-v2__top h2{max-width: 15.5ch;}
/* Course pages use a slightly calmer display rhythm than marketing heroes. */
.yc-course-page h1{max-width: 16ch;}
.yc-course-page h2{max-width: 18ch;}
/* Mobile: preserve impact without turning every heading into a vertical
 * poster. The 360–430px range gets the most important correction. */
@media (max-width: 767px){
:root{
    --yu-heading-xl: clamp(2.15rem, 8.5vw, 3rem);
    --yu-heading-lg: clamp(1.95rem, 7.4vw, 2.65rem);
    --yu-heading-md: clamp(1.65rem, 6vw, 2.15rem);
    --yu-heading-line: 1.045;
  }
.yu-homepage .yu-home-hero__title--live,
  .yu-google-page .yg-hero__copy h1,
  .yu-meta-page .yu-meta-hero h1,
  .ywd-page .ywd-hero h1,
  .yseo-page .yseo-hero__copy h1,
  .yff-page .yff-hero__copy h1,
  .yu-sm-page .ys-hero__copy h1,
  .ywm27-page .ywm-hero__copy h1,
  .yu-wa-page .yw-wa-hero__copy h1,
  .yu-tm-page .yt-hero h1,
  .ydm-page .ydm-hero h1,
  .yc-course-page h1{
    max-width: 18ch;
    margin-inline: 0;
  }
.yu-homepage .yu-home-why-v2__top h2,
  .yu-homepage .yu-home-services__header h2,
  .yu-homepage .yu-home-results__intro h2,
  .yu-homepage .yu-home-faq__intro h2,
  .yu-homepage .yu-home-final-cta__copy h2,
  .yu-google-page .yg-head h2,
  .yu-google-page .yg-editorial h2,
  .yu-google-page .yg-signature__copy h2,
  .yu-google-page .yg-measurement h2,
  .yu-google-page .yg-why h2,
  .yu-google-page .yg-final__card h2,
  .yu-meta-page .yu-meta-copy-block h2,
  .yu-meta-page .yu-meta-section-head h2,
  .yu-meta-page .yu-meta-final h2,
  .ywd-page .ywd-heading h2,
  .ywd-page .ywd-two-col h2,
  .ywd-page .ywd-proof-card h2,
  .ywd-page .ywd-final-card h2,
  .yseo-page .yseo-heading h2,
  .yseo-page .yseo-simple h2,
  .yseo-page .yseo-why__grid h2,
  .yseo-page .yseo-final-card h2,
  .yff-page .yff-heading h2,
  .yff-page .yff-final-card h2,
  .yu-sm-page .ys-section-head h2,
  .yu-sm-page .ys-two-col h2,
  .yu-sm-page .ys-final-card h2,
  .ywm27-page .ywm-section-head h2,
  .ywm27-page .ywm-story__copy h2,
  .ywm27-page .ywm-final h2,
  .yu-wa-page .yw-headline h2,
  .yu-wa-page .yw-final h2,
  .yu-tm-page .yt-section-head h2,
  .yu-tm-page .yt-results__head h2,
  .yu-tm-page .yt-trust__head h2,
  .yu-tm-page .yt-flow__copy h2,
  .yu-tm-page .yt-cta h2,
  .ydm-page .ydm-section-head h2,
  .ydm-page .ydm-story h2,
  .ydm-page .ydm-final h2,
  .yc-course-page h2{
    max-width: 20ch;
    margin-inline: 0;
  }
/* The home Why section is intentionally narrower to stop single-word
   * lines such as “Digital / Marketing / Agency?”. */
.yu-homepage .yu-home-why-v2__top h2{max-width: 16ch;}
/* Let centered components remain centered while retaining the same measure. */
.yff-heading--center h2,
  .ywd-heading--center h2,
  .yu-google-page .yg-head h2,
  .yu-google-page .yg-editorial h2{
    margin-inline: auto;
  }
}
@media (max-width: 420px){
:root{
    --yu-heading-xl: clamp(2rem, 7.9vw, 2.7rem);
    --yu-heading-lg: clamp(1.85rem, 7vw, 2.45rem);
  }
.yu-homepage .yu-home-hero__title--live,
  .yu-google-page .yg-hero__copy h1,
  .yu-meta-page .yu-meta-hero h1,
  .ywd-page .ywd-hero h1,
  .yseo-page .yseo-hero__copy h1,
  .yff-page .yff-hero__copy h1,
  .yu-sm-page .ys-hero__copy h1,
  .ywm27-page .ywm-hero__copy h1,
  .yu-wa-page .yw-wa-hero__copy h1,
  .yu-tm-page .yt-hero h1,
  .ydm-page .ydm-hero h1,
  .yc-course-page h1{max-width: 17.5ch;}
}
/* Small, functional card headings should stay compact rather than inheriting
 * the large editorial display scale. */
.yu-homepage .yu-home-services__card h3,
.yu-homepage .yu-home-faq__question-text,
.yu-google-page .yg-case-card strong,
.yu-google-page .yg-process-panel h3,
.yu-meta-page .yu-meta-funnel-row strong,
.yu-meta-page .yu-meta-case strong,
.yff-page .yff-price-card h3,
.yff-page .yff-benefit-grid h3,
.yff-page .yff-process-grid h3,
.yu-sm-page .ys-service-grid strong,
.yu-tm-page .yt-process__list strong,
.yc-course-page .yc-reason-card h3,
.yc-course-page .yc-learning-grid h3,
.yc-course-page .yc-placement-grid h3{
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Founder decorative annotation was intentionally removed in v0.1.22. */
.yu-homepage .yu-home-founder__content::after,
.yu-home-founder__content::after,
.yu-home-founder__visual-note{
  display:none !important;
  content:none !important;
}
/* v0.1.27 — HOMEPAGE HERO ONLY: restore the desktop live-hero display scale.
 * The global display-heading safety net intentionally scales H1s, but the
 * homepage video hero has its own measured composition. Keep this override
 * scoped strictly to the homepage hero so service pages and all other sections
 * remain untouched. */
@media (min-width:1025px){
.yu-homepage .yu-home-hero--video .yu-home-hero__copy{
    width:min(720px,62%);
  }
.yu-homepage .yu-home-hero--video .yu-home-hero__title--live{
    max-width:650px;
    font-size:clamp(3.15rem,4.55vw,4.25rem);
    line-height:1.01;
    letter-spacing:-.02em;
  }
.yu-homepage .yu-home-hero--video .yu-home-mobile-line{
    white-space:normal;
  }
}
/* ==== /assets/css/service/shared/service-hero-unified.css ==== */
/* Yuvau Digital v0.1.17 — Unified service-page hero system
 * One consistent hero layout for Meta Ads, Google Ads, Website, SEO, Facebook
 * Followers, Social Media, WhatsApp, Telemarketing and Direct Marketing.
 *
 * Fixes: oversized headlines squeezed into narrow columns (6–7 lines), 160px of
 * empty space above the content, copy/visual not sharing a vertical centre line,
 * headlines running underneath the visual, and heroes taller than the viewport.
 * Loads last, so it wins over the per-page hero stylesheets.
 */
:root{
  --yu-hero-top:124px;         /* clears the fixed header (~72px + 14px offset) */
  --yu-hero-bottom:64px;
  --yu-hero-gap:clamp(36px,4.2vw,72px);
  --yu-hero-h1:clamp(2.35rem,3.7vw,3.5rem);
}
/* ---------- 1. Section shell ---------- */
.yu-meta-v40-hero,.yu-google-v40-hero,.ywd-hero,.yseo-hero,.yff-hero,
.ysm-v2-hero,.ywm-v2-hero,.tm-v2-hero,.dm-v2-hero{
  padding-top:var(--yu-hero-top) !important;
  padding-bottom:var(--yu-hero-bottom) !important;
  min-height:0 !important;
  height:auto !important;
}
/* ---------- 2. Two-column grid, shared centre line ---------- */
.yu-meta-v40-hero__grid,.yu-google-v40-grid,.ywd-v41-grid,.yseo-hero__grid,
.yff-v2-hero__grid,.ysm-v2-hero__grid,.ywm-v2-hero__grid,.tm-v2-hero__grid,.dm-v2-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr) !important;
  gap:var(--yu-hero-gap) !important;
  align-items:center !important;
  width:min(var(--yu-content-max),calc(100% - 64px)) !important;
  max-width:none !important;
  min-height:0 !important;
  height:auto !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}
/* ---------- 3. Copy column ---------- */
.yu-meta-v41-hero__copy,.yu-google-v40-copy,.ywd-v41-copy,.yseo-hero__copy,
.yff-v2-hero__copy,.ysm-v2-hero__copy,.ywm-v2-hero__copy,.tm-v2-hero__copy,.dm-v2-copy{
  min-width:0 !important;
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding-top:0 !important;
  align-self:center !important;
  position:relative;
  z-index:2;
}
/* Headline: same scale everywhere, 3–5 lines instead of 6–7 */
.yu-meta-v40-hero h1,.yu-google-v40-hero h1,.ywd-hero h1,.yseo-hero h1,.yff-hero h1,
.ysm-v2-hero h1,.ywm-v2-hero h1,.tm-v2-hero h1,.dm-v2-hero h1{
  font-size:var(--yu-hero-h1) !important;
  line-height:1.1 !important;
  letter-spacing:-.015em !important;
  font-weight:800 !important;
  max-width:100% !important;
  margin:14px 0 18px !important;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:manual;
  text-wrap:balance;
}
.yu-meta-v40-hero h1 span,.yu-google-v40-hero h1 span,.yseo-hero h1 span,.tm-v2-hero h1 span{
  display:inline;
}
/* Small label above the headline / breadcrumb: tight, aligned to the headline edge */
.yu-meta-v41-breadcrumb{margin:0 0 14px !important;}
.yu-google-v40-eyebrow,.ywd-v41-eyebrow,.yseo-hero .yseo-eyebrow,.yff-hero [class*="eyebrow"],
.ysm-v2-hero [class*="eyebrow"],.ywm-v2-hero [class*="eyebrow"],.tm-v2-hero [class*="eyebrow"],
.dm-v2-eyebrow{margin:0 !important;}
/* Supporting copy */
.yu-meta-v40-hero [class*="lead"],.yu-google-v40-lead,.ywd-v41-lead,.yseo-hero__copy > p,
.yff-v2-hero__copy > p,.ysm-v2-hero__copy > p,.ywm-v2-hero__copy > p,.tm-v2-hero__copy > p,.dm-v2-lead{
  max-width:60ch;
}
/* ---------- 4. Visual column ---------- */
.yu-meta-growth-visual,.yu-google-v40-demo,.ywd-v41-visual,.yseo-hero__visual,
.yff-v2-hero__visual,.ysm-v2-hero__visual,.ywm-v2-hero__visual,.tm-v2-hero__visual,.dm-v2-visual{
  min-width:0 !important;
  max-width:100% !important;
  align-self:center !important;
  margin-block:0 !important;
}
/* ---------- 5. Tablet + phone: stacked, compact ---------- */
@media (max-width:980px){
:root{--yu-hero-top:96px;--yu-hero-bottom:40px;--yu-hero-h1:clamp(2rem,8.2vw,2.75rem);}
.yu-meta-v40-hero__grid,.yu-google-v40-grid,.ywd-v41-grid,.yseo-hero__grid,
  .yff-v2-hero__grid,.ysm-v2-hero__grid,.ywm-v2-hero__grid,.tm-v2-hero__grid,.dm-v2-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:32px !important;
    align-items:start !important;
    width:calc(100% - 32px) !important;
  }
.yu-meta-v40-hero h1,.yu-google-v40-hero h1,.ywd-hero h1,.yseo-hero h1,.yff-hero h1,
  .ysm-v2-hero h1,.ywm-v2-hero h1,.tm-v2-hero h1,.dm-v2-hero h1{
    margin:12px 0 14px !important;
    line-height:1.12 !important;
  }
}
@media (max-width:430px){
:root{--yu-hero-top:92px;--yu-hero-h1:clamp(1.9rem,8.6vw,2.35rem);}
}
/* The hero section already clears the fixed header; remove the duplicate offset on <main>. */
.yu-meta-page,.yu-google-page{padding-top:0 !important;}
/* Direct Marketing form submit button had no styles (rendered as a plain white button). */
.dm-v2-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:800;}
.dm-v2-button--primary,.ydm-live-form .dm-v2-button{
  width:100%;min-height:48px;padding:0 20px;border-radius:12px;
  background:linear-gradient(135deg,#3775ff,#7052f4) !important;color:#fff !important;
  font-size:13px;box-shadow:0 12px 26px rgba(48,91,220,.25);
}
.dm-v2-button--primary:hover{filter:brightness(1.06);}
/* Tablet: keep every hero left-aligned (Website Design was centred). */
@media (max-width:980px){
.ywd-v41-copy,.ywd-v41-copy h1,.ywd-v41-lead,.ywd-v41-eyebrow{text-align:left !important;}
.ywd-v41-copy [class*="actions"],.ywd-v41-eyebrow,.ywd-v41-proof-row{justify-content:flex-start !important;}
.ywd-v41-lead{margin-inline:0 !important;}
}
/* Stage 1 migration: global responsive safety for the service hero remains owned here. */
/* 02 — service hero desktop contract */
@media (min-width: 1025px){
.yu-meta-v40-hero__grid,
  .yu-google-v40-grid,
  .ywd-v41-grid,
  .yseo-hero__grid,
  .yff-v2-hero__grid,
  .ysm-v2-hero__grid,
  .ywm-v2-hero__grid,
  .tm-v2-hero__grid,
  .dm-v2-grid{
    width: min(var(--yu-content-max), calc(100% - 64px)) !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(28px, 3.6vw, 54px) !important;
    align-items: center !important;
  }
.yff-v2-hero__visual,
  .ywm-v2-hero__visual,
  .tm-v2-hero__visual,
  .dm-v2-visual{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    align-self: center !important;
  }
.yff-v2-dashboard,
  .ywm-v2-engine,
  .tm-v2-call-ops,
  .dm-v2-direct-ops{
    width: 100%;
    max-width: 100%;
  }
.yff-v2-hero__copy h1,
  .ywm-v2-hero h1,
  .tm-v2-hero h1,
  .dm-v2-hero h1{
    max-width: 680px !important;
  }
}
/* 03 — medium desktop / small laptop: preserve two columns without squeeze. */
@media (min-width: 1025px) and (max-width: 1180px){
.yu-meta-v40-hero__grid,
  .yu-google-v40-grid,
  .ywd-v41-grid,
  .yseo-hero__grid,
  .yff-v2-hero__grid,
  .ysm-v2-hero__grid,
  .ywm-v2-hero__grid,
  .tm-v2-hero__grid,
  .dm-v2-grid{
    width: calc(100% - 40px) !important;
    gap: 28px !important;
  }
.yff-v2-hero__copy h1,
  .ywm-v2-hero h1,
  .tm-v2-hero h1,
  .dm-v2-hero h1{
    font-size: clamp(2.45rem, 4.4vw, 3.35rem) !important;
  }
}
/* 04 — tablet: stack the hero deliberately rather than allowing partial columns. */
@media (max-width: 1024px){
.yu-meta-v40-hero__grid,
  .yu-google-v40-grid,
  .ywd-v41-grid,
  .yseo-hero__grid,
  .yff-v2-hero__grid,
  .ysm-v2-hero__grid,
  .ywm-v2-hero__grid,
  .tm-v2-hero__grid,
  .dm-v2-grid{
    width: min(100% - 32px, 760px) !important;
    max-width: 760px !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    align-items: start !important;
  }
.yff-v2-hero__copy,
  .ywm-v2-hero__copy,
  .tm-v2-hero__copy,
  .dm-v2-copy{
    width: 100% !important;
    max-width: 760px !important;
  }
.yff-v2-hero__visual,
  .ywm-v2-hero__visual,
  .tm-v2-hero__visual,
  .dm-v2-visual{
    width: 100% !important;
    max-width: 760px !important;
    margin-inline: auto !important;
  }
.yff-v2-dashboard,
  .ywm-v2-engine,
  .tm-v2-call-ops,
  .dm-v2-direct-ops{
    width: 100%;
    max-width: 100%;
  }
}
/* 05 — phone layout: keep copy and visual readable, eliminate accidental overflow. */
@media (max-width: 640px){
.yu-meta-v40-hero__grid,
  .yu-google-v40-grid,
  .ywd-v41-grid,
  .yseo-hero__grid,
  .yff-v2-hero__grid,
  .ysm-v2-hero__grid,
  .ywm-v2-hero__grid,
  .tm-v2-hero__grid,
  .dm-v2-grid{
    width: calc(100% - 28px) !important;
    max-width: 560px !important;
    gap: 26px !important;
  }
.yff-v2-hero__copy h1,
  .ywm-v2-hero h1,
  .tm-v2-hero h1,
  .dm-v2-hero h1{
    max-width: 100% !important;
    overflow-wrap: normal;
    word-break: normal;
  }
.yff-v2-actions,
  .ywm-v2-actions,
  .tm-v2-actions,
  .dm-v2-actions{
    max-width: 100%;
  }
.yff-v2-actions > *,
  .ywm-v2-actions > *,
  .tm-v2-actions > *,
  .dm-v2-actions > *{
    max-width: 100%;
  }
.yff-v2-dashboard,
  .ywm-v2-engine,
  .tm-v2-call-ops,
  .dm-v2-direct-ops{
    border-radius: 18px;
  }
}
/* ==== /assets/css/header-footer-compact.css ==== */
/*
 * Yuvau Digital — Compact floating header + organised footer legal bar (v1)
 *
 * This file is the single authority for header/footer responsive geometry.
 * Global viewport primitives are owned by the responsive section of assets/css/theme.css; page-specific
 * geometry remains in the corresponding page/component stylesheet.
 */
/* =========================================================
   1. HEADER — compact, content-width floating pill (desktop)
   ========================================================= */
@media (min-width: 1025px){
.yu-site-header{
    position: fixed;
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* max-content, not fit-content: with left:50% the available width is only half the viewport,
       and header children carry min-width:0, so fit-content shrank the pill below its content and
       pushed the YouTube icon out of it. */
    width: max-content;
    min-width: 0;
    max-width: calc(100% - 32px);
    border-radius: 999px;         /* true floating pill */
  }
.yu-site-header::before{ border-radius: inherit; }
/* Scoped (body .yu-site-header ...) so an unscoped .yu-container{width;margin-inline:auto} printed
     later by a page template can never narrow the contents inside the pill. */
.yu-brand{ flex: 0 0 auto; margin: 0; }
.yu-brand-logo{ max-height: 38px; max-width: 124px; width: auto; height: auto; }
.yu-nav{
    flex: 0 0 auto;               /* never stretch to fill the pill */
    width: auto;
    min-width: max-content;       /* never let the menu shrink below its content */
    margin: 0;
    justify-content: flex-start;
  }
/* Logo and social icons keep their full width so the last icon always sits inside the pill. */
.yu-brand,
  .yu-social-nav{ flex-shrink: 0; min-width: max-content; }
.yu-primary-menu{
    gap: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
.yu-primary-menu a{
    min-height: 38px;
    padding: 6px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
.yu-social-nav{
    flex: 0 0 auto;
    margin: 0 0 0 4px;
    padding-left: 12px;
    gap: 5px;
    border-left: 1px solid rgba(48, 104, 232, .14);  /* quiet divider before the icons */
  }
.yu-social-link{ width: 30px; height: 30px; font-size: 10px; }
.yu-social-link svg{ width: 15px; height: 15px; }
}
/* Slightly tighter at the desktop / tablet boundary so nothing wraps. */
@media (min-width: 1025px) and (max-width: 1180px){
.yu-header-inner{ gap: 8px; padding-inline: 12px 8px; }
.yu-brand-logo{ max-width: 108px; }
.yu-primary-menu a{ padding-inline: 9px; font-size: 12.5px; }
.yu-social-nav{ padding-left: 8px; }
}
/* Once the page scrolls, tuck the pill a little closer to the top edge. */
@media (min-width: 1025px){
.yu-site-header.is-scrolled{ top: 8px; }
}
/* Hero sections were padded for the old taller header — reclaim that space. */
@media (min-width: 1025px){
.yu-page-hero{ padding-top: 120px; }
.yu-hero{ padding-top: 104px; }
}
/* =========================================================
   2. FOOTER — organised legal / policy bar
   ========================================================= */
.yu-site-footer .yu-footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  min-height: 0;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(48, 104, 232, .10);
}
.yu-site-footer .yu-footer-bottom > p{
  margin: 0;
  flex: 0 0 auto;
  color: #7a8495;
  font-size: 13px;
}
/* Policy links: one tidy row, dot-separated, wraps cleanly when narrow. */
.yu-site-footer .yu-footer-legal{ flex: 1 1 auto; min-width: 0; }
.yu-site-footer .yu-footer-legal ul,
.yu-site-footer .yu-footer-menu{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.yu-site-footer .yu-footer-legal li,
.yu-site-footer .yu-footer-menu li{
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.yu-site-footer .yu-footer-legal li::marker,
.yu-site-footer .yu-footer-menu li::marker{ content: ""; }
.yu-site-footer .yu-footer-legal li + li::before,
.yu-site-footer .yu-footer-menu li + li::before{
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 12px;
  border-radius: 50%;
  background: rgba(48, 104, 232, .35);
  flex: 0 0 auto;
}
.yu-site-footer .yu-footer-legal a,
.yu-site-footer .yu-footer-menu a{
  color: #4b5870;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: color .2s ease;
}
.yu-site-footer .yu-footer-legal a:hover,
.yu-site-footer .yu-footer-legal a:focus-visible,
.yu-site-footer .yu-footer-menu a:hover,
.yu-site-footer .yu-footer-menu a:focus-visible{ color: #3068e8; }
/* Keep the last link clear of the floating WhatsApp button (desktop). */
@media (min-width: 1025px){
.yu-site-footer .yu-footer-bottom{ padding-right: 84px; }
}
/* Tablet / mobile: copyright under the links, everything left-aligned. */
@media (max-width: 1024px){
.yu-site-footer .yu-footer-bottom{
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 88px;         /* room for the WhatsApp button */
  }
.yu-site-footer .yu-footer-legal{ width: 100%; }
.yu-site-footer .yu-footer-legal ul,
  .yu-site-footer .yu-footer-menu{ justify-content: flex-start; }
}
/* Where the row can wrap, drop the dot separators (a wrapped line would start with a dot)
 * and use plain spacing instead. */
@media (max-width: 1180px){
.yu-site-footer .yu-footer-legal ul,
  .yu-site-footer .yu-footer-menu{ gap: 8px 20px; }
.yu-site-footer .yu-footer-legal li + li::before,
  .yu-site-footer .yu-footer-menu li + li::before{ display: none; }
}
@media (max-width: 520px){
.yu-site-footer .yu-footer-legal ul,
  .yu-site-footer .yu-footer-menu{ font-size: 12.5px; gap: 8px 18px; }
}
/* =========================================================
   3. Logged-in admin bar — keep the floating header below it
   (the WordPress admin bar is 32px desktop / 46px mobile and was
   covering the top of the header for logged-in users).
   ========================================================= */
@media (min-width: 783px){
.admin-bar .yu-site-header{ top: 44px; }
.admin-bar .yu-site-header.is-scrolled{ top: 40px; }
}
@media (max-width: 782px){
.admin-bar .yu-site-header{ top: 56px; }
}
/* Stage 1 — header responsive contract. Header geometry is owned exclusively by this file. */
@media (min-width: 1025px){
/* Compact floating pill: sized by its content (never a full-width bar), always inside the viewport. */
.yu-site-header{ width: max-content; max-width: calc(100% - 32px); }
.yu-header-inner{ min-width: 0; }
}
@media (min-width: 1025px) and (max-width: 1180px){
.yu-site-header{ width: max-content; max-width: calc(100% - 32px); }
.yu-header-inner{ gap: 10px; padding-inline: 10px; }
.yu-brand-logo{ max-width: 136px; max-height: 42px; }
.yu-primary-menu a{ padding-inline: 7px; font-size: 12px; }
}
/* ==== /assets/css/pages/content/page-fixes.css ==== */
/* Yuvau Digital 1.0 — page fixes. Loaded last (see inc/enqueue.php). No .min sibling on purpose. */
/* Course: "Get Brochure on Whatsapp" CTAs rendered as empty white boxes.
 * Give the button a solid, variable-free background and visible text so no earlier rule can blank it. */
main.yc-course-live .yc-button.yc-button--orange{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:14px;border:1px solid transparent;
  background-color:#ff7a1a !important;
  background-image:linear-gradient(135deg,#ff7a1a,#ff902a) !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
  font-size:13px;font-weight:800;line-height:1.2;text-decoration:none;
  opacity:1 !important;visibility:visible !important;
  box-shadow:0 12px 30px rgba(255,122,26,.28);
}
main.yc-course-live .yc-button.yc-button--orange span{color:#fff !important;-webkit-text-fill-color:#fff !important;font-size:15px}
main.yc-course-live .yc-button.yc-button--orange:hover,
main.yc-course-live .yc-button.yc-button--orange:focus-visible{background-image:linear-gradient(135deg,#ff6a00,#ff8a1f) !important;transform:translateY(-2px)}
/* Contact: consent checkbox was oversized and sat apart from its label. */
.yc-form .yc-consent{display:flex !important;flex-direction:row !important;align-items:flex-start;gap:10px;margin:16px 0 0;color:#5b6679;font-size:12px;line-height:1.5;cursor:pointer}
.yc-form .yc-consent input[type="checkbox"]{
  -webkit-appearance:checkbox;appearance:auto;
  flex:0 0 18px;width:18px !important;height:18px !important;min-width:18px;min-height:0 !important;max-width:18px;
  margin:1px 0 0 !important;padding:0 !important;border-radius:4px;accent-color:#2563eb;cursor:pointer;
}
.yc-form .yc-consent span{display:block !important;flex:1 1 auto;margin:0 !important;font-size:12px;font-weight:600;line-height:1.5;color:#5b6679}
/* Header: one compact pill on EVERY page (home included), desktop.
 * The home template prints an unscoped inline `.yu-container{width:min(100% - 48px,var(--yu-content-max));margin-inline:auto}`
 * after all stylesheets. The header's inner wrapper is also a .yu-container, so that rule beat the
 * compact pill's `width:auto` and spread logo / menu / icons across a wide bar on the home page only.
 * These selectors are more specific than any .yu-container / .yu-header-inner rule, so order no longer matters. */
@media (min-width: 1025px){
body .yu-site-header{
    position: fixed;
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* max-content, not fit-content: with left:50% the available width is only half the viewport, and
       home-page CSS gives header children min-width:0, so fit-content shrank the pill below its content
       and pushed the YouTube icon out of it. */
    width: max-content;
    min-width: 0;
    max-width: calc(100% - 32px);
    border-radius: 999px;
  }
body .yu-site-header.is-scrolled{ top: 8px; }
body .yu-site-header .yu-header-inner{
    width: auto;
    max-width: none;
    margin: 0;
    min-height: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 5px 12px 5px 18px;
  }
body .yu-site-header .yu-nav{ flex: 0 0 auto; width: auto; min-width: max-content; margin: 0; justify-content: flex-start; }
body .yu-site-header .yu-brand,
  body .yu-site-header .yu-social-nav{ flex-shrink: 0; min-width: max-content; }
body .yu-site-header .yu-primary-menu{ gap: 0; justify-content: flex-start; flex-wrap: nowrap; }
body .yu-site-header .yu-social-nav{ flex: 0 0 auto; margin: 0 0 0 4px; padding-left: 12px; gap: 5px; }
}
@media (min-width: 1025px) and (max-width: 1180px){
body .yu-site-header .yu-header-inner{ gap: 8px; padding-inline: 12px 8px; }
body .yu-site-header .yu-social-nav{ padding-left: 8px; }
}
/* Narrow desktops (1025–1280): keep the pill inside the viewport by tightening, never by overflowing. */
@media (min-width: 1025px) and (max-width: 1280px){
body .yu-site-header .yu-primary-menu a{ padding-inline: 9px; font-size: 13px; }
body .yu-site-header .yu-brand-logo{ max-width: 108px; }
}
/* ==== /assets/css/service/shared/service-mobile.css ==== */
/* ==========================================================================
   Yuvau Digital — Service pages: phone layout v1.3
   Loaded LAST on every service family. Everything is inside max-width queries,
   so desktop and tablet-landscape are untouched.
   Problem it solves: hero visuals are built from absolutely-positioned floating
   badges/orbits sized for desktop; on a 360px screen they overflow the viewport
   and cover the text. On phones the visuals become a tidy stacked grid instead.
   ========================================================================== */
/* ---------- 1. Safety net, every service page ---------- */
@media (max-width:900px){
main,
  main > section{max-width:100%;overflow-x:clip}
/* clip, not hidden: keeps sticky headers working */
main img,main svg,main video{max-width:100%}
}
/* ---------- 2. META ADS hero ---------- */
@media (max-width:760px){
/* trust pills: full text, wrapping, no ellipsis */
.yu-meta-v41-proof{flex-direction:column;align-items:stretch;gap:8px;margin-top:20px}
.yu-meta-v41-proof span{display:block;width:100%;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;
    padding:10px 14px;border-radius:14px;font-size:12px;line-height:1.45}
/* visual: stacked grid, nothing floats outside the screen */
.yu-meta-v40-hero .yu-meta-growth-visual{
    display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;
    min-height:0;height:auto;margin-top:22px;overflow:visible;
  }
.yu-meta-growth-visual__orbit,
  .yu-meta-growth-visual__orbit--outer,
  .yu-meta-fx__orbit-dot{display:none!important}
.yu-meta-v40-hero .yu-meta-growth-visual__social{
    position:static!important;inset:auto!important;width:46px;height:52px;border-radius:13px;margin:0;
  }
.yu-meta-v40-hero .yu-meta-growth-visual__social svg{width:26px;height:26px}
.yu-meta-v40-hero .yu-meta-fx__chip--roas{position:static!important;inset:auto!important;justify-self:end;margin:0}
.yu-meta-v40-hero .yu-meta-growth-dashboard{
    grid-column:1 / -1;margin:0!important;width:100%!important;max-width:100%;justify-self:stretch;
  }
.yu-meta-v40-hero .yu-meta-fx__chip--cpl{position:static!important;inset:auto!important;grid-column:1 / -1;justify-self:start;margin:0}
.yu-meta-v40-hero .yu-meta-growth-result{
    position:static!important;inset:auto!important;grid-column:1 / -1;width:100%!important;max-width:100%;margin:0;
  }
.yu-meta-growth-result__bars i{width:auto;flex:1 1 0}
}
/* ---------- 3. GOOGLE ADS hero ---------- */
@media (max-width:760px){
.yu-google-v40-demo{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;
    min-height:0!important;height:auto!important;margin-top:20px;position:relative;
  }
.yu-google-fx__orbit{display:none!important}
/* every floating piece becomes a normal grid item */
.yu-google-v40-demo > .yu-google-v40-step,
  .yu-google-v40-demo > .yu-google-v40-browser,
  .yu-google-v40-demo > .yu-google-v40-enquiry,
  .yu-google-v40-demo > .yu-google-fx__chip{
    position:static!important;inset:auto!important;transform:none!important;margin:0!important;
    width:auto!important;max-width:100%;min-width:0;
  }
.yu-google-v40-demo > .yu-google-v40-step--search{order:1;grid-column:1 / -1}
.yu-google-v40-demo > .yu-google-v40-browser{order:2;grid-column:1 / -1;overflow:hidden}
.yu-google-v40-demo > .yu-google-v40-step--click{order:3;grid-column:1 / -1}
.yu-google-v40-demo > .yu-google-v40-enquiry{order:4;grid-column:1 / -1}
.yu-google-v40-demo > .yu-google-fx__chip--ctr{order:5;justify-self:start}
.yu-google-v40-demo > .yu-google-fx__chip--cpl{order:6;justify-self:end}
.yu-google-v40-step{display:flex!important;align-items:center;gap:12px;text-align:left}
.yu-google-v40-enquiry{display:flex!important;align-items:center;gap:12px}
/* the ad card itself: no overlap, no clipping */
.yu-google-v40-sponsored__thumb{display:none!important}
.yu-google-v40-sponsored h2{font-size:1.05rem;line-height:1.25}
.yu-google-v40-sponsored p{font-size:13px;line-height:1.5}
.yu-google-v40-chips{display:flex;flex-wrap:wrap;gap:6px}
.yu-google-v40-tabs{display:flex;gap:14px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.yu-google-v40-tabs::-webkit-scrollbar{display:none}
.yu-google-v40-search{min-width:0}
.yu-google-v40-query{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* ---------- 4. Small phones ---------- */
@media (max-width:380px){
.yu-meta-v40-hero .yu-meta-growth-visual{grid-template-columns:auto auto minmax(0,1fr);gap:10px}
.yu-meta-v40-hero .yu-meta-growth-dashboard{font-size:.94em}
.yu-google-v40-sponsored h2{font-size:1rem}
}