/* =========================================================
   Udaipur Web Designer — Frontend
   Style reference: Ritovex (clean modern agency)
   Cream bg + dark ink + lime accent
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --cream:#f4f2ed;
  --cream-2:#ece9e1;
  --ink:#2a3b4c;           /* logo slate-blue — primary dark */
  --ink-soft:#3a4d62;
  --muted:#6b6b6b;
  --muted-2:#a3a3a3;
  --line:#e5e2d9;
  --line-dark:#1f2e3d;
  --accent:#d4ff3a;        /* lime — kept as accent */
  --accent-dark:#aef000;
  --white:#ffffff;
  --black:#0a0a0a;

  --radius-sm:10px;
  --radius:18px;
  --radius-lg:28px;
  --shadow-sm:0 1px 3px rgba(10,10,10,.04), 0 4px 14px rgba(10,10,10,.05);
  --shadow:0 8px 28px rgba(10,10,10,.08);
  --container:1240px;
  --gap:clamp(20px, 4vw, 40px);
  --section-y:clamp(70px, 9vw, 120px);

  --font-sans:'Manrope','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;font-family:var(--font-sans);
  color:var(--ink);background:var(--cream);
  line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Global safety net — clip any element that tries to spill past the viewport.
     `overflow-x: clip` is preferred (doesn't break position:sticky), with `hidden`
     as a fallback for older browsers via the html rule above. */
  overflow-x:clip;
  max-width:100vw;
}
/* Common offenders: any element with a negative margin or transform that pushes wider than viewport. */
section, main, header, footer, .container, .hero, .marquee, .logo-marquee, .reviews-carousel{
  max-width:100%;
}
/* Belt + braces — never let an image cause horizontal scroll. */
img,video,iframe{max-width:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none;transition:color .2s}
a:hover{color:var(--ink-soft)}

h1,h2,h3,h4,h5{font-family:var(--font-sans);color:var(--ink);font-weight:700;line-height:1.05;letter-spacing:-.025em;margin:0 0 .5em}
h1{font-size:clamp(40px,7vw,82px);font-weight:700}
h2{font-size:clamp(32px,5vw,56px)}
h3{font-size:clamp(22px,3vw,32px)}
h4{font-size:clamp(18px,2vw,22px)}
p{margin:0 0 1em}
.serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:400}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gap)}

/* ---------- Eyebrow / tag ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--ink);
  background:var(--white);
  padding:7px 14px 7px 10px;border-radius:999px;
  border:1px solid var(--line);
  text-transform:capitalize;letter-spacing:0;
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ink);display:inline-block;
}
/* Variant: no leading dot — for places where the dot crowds the text */
.eyebrow.eyebrow-plain::before{display:none}
.eyebrow.eyebrow-plain{padding-left:14px}
/* When the eyebrow contains a heading (e.g. <h1>) for SEO, neutralise the
   heading's heavy typography so the pill stays visually compact.
   !important is required because mobile media queries below use h1{...!important}
   and would otherwise re-inflate the inner heading on mobile. */
.eyebrow :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6){
  margin:0 !important;padding:0 !important;display:inline !important;
  font-size:inherit !important;font-weight:inherit !important;line-height:inherit !important;
  letter-spacing:inherit !important;color:inherit !important;
}
.eyebrow-h{padding-top:5px;padding-bottom:5px}

/* Section heads where admin types HTML in title — keep visual size identical to .h2.
   Same !important shield: mobile media queries override raw h1/h2 globally and would
   otherwise blow up these inner SEO-tagged headings. */
.h2.h2-keep, .section-head .h2.h2-keep{display:block}
.h2-keep :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6){
  margin:0 !important;padding:0 !important;display:inline !important;
  font-size:inherit !important;font-weight:inherit !important;line-height:inherit !important;
  letter-spacing:inherit !important;color:inherit !important;
}

/* About section subtitle that may contain HTML (renders like .section-head p) */
.section-head .about-sub{color:var(--muted);font-size:17px;line-height:1.7;max-width:760px;margin:0 auto}
.section-head .about-sub p{margin:0 0 .9em}
.section-head .about-sub p:last-child{margin-bottom:0}
.section-head .about-sub a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* "Read more" link below the subtitle */
.about-more-toggle{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;padding:8px 18px;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--ink);font-size:13.5px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.about-more-toggle:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.about-more-toggle i{transition:transform .25s}
.about-more-toggle.is-open i{transform:rotate(180deg)}

/* Collapsible content box (smooth max-height transition) */
.about-more{
  margin:30px 0 0;
  max-width:920px;margin-left:auto;margin-right:auto;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:0 28px;
  max-height:0;overflow:hidden;
  transition:max-height .35s ease, padding .35s ease, margin-top .35s ease;
}
.about-more[hidden]{display:block !important} /* override HTML hidden so transitions work */
.about-more.is-open{
  max-height:3000px;padding:28px;
}
.about-more-inner{color:var(--ink-soft);font-size:15.5px;line-height:1.75}
.about-more-inner :is(h2, h3, h4, .h2, .h3, .h4){margin:1.4em 0 .5em;color:var(--ink)}
.about-more-inner :is(h2, .h2):first-child,
.about-more-inner :is(h3, .h3):first-child,
.about-more-inner :is(h4, .h4):first-child{margin-top:0}
.about-more-inner p{margin:0 0 1em}
.about-more-inner a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.about-more-inner ul, .about-more-inner ol{margin:0 0 1em 1.2em}
.about-more-inner li{margin-bottom:.4em}
.eyebrow.on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.18)}
.eyebrow.on-dark::before{background:var(--accent)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;
  padding:14px 26px;border-radius:999px;
  font-size:15px;font-weight:600;line-height:1;
  border:1px solid var(--ink);cursor:pointer;
  transition:transform .2s,background .2s,color .2s;
}
.btn:hover{background:var(--accent);color:var(--ink);border-color:var(--accent);transform:translateY(-1px)}
.btn .arr{display:inline-flex;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);align-items:center;justify-content:center;font-size:13px;transition:transform .25s}
.btn:hover .arr{background:rgba(10,10,10,.12);color:var(--ink);transform:rotate(-45deg)}

.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-outline .arr{background:rgba(10,10,10,.08);color:var(--ink)}

.btn-light{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn-light:hover{background:var(--accent);border-color:var(--accent)}

.btn-ghost{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(244,242,237,.85);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;gap:24px;
}
.site-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.02em}
.site-logo .logo-img{max-height:38px;max-width:160px;width:auto;height:auto;display:block;object-fit:contain}
@media (max-width:768px){.site-logo .logo-img{max-height:30px;max-width:120px}}
.site-logo .dot{
  width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{
  padding:10px 16px;color:var(--ink);font-weight:500;font-size:15px;
  border-radius:8px;position:relative;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a:not(.btn-cta)::after{
  content:"";position:absolute;left:16px;right:16px;bottom:6px;
  height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .25s;
}
.site-nav a:hover:not(.btn-cta)::after{transform:scaleX(1)}
.site-nav .btn-cta{
  background:var(--ink);color:#fff;padding:11px 22px;border-radius:999px;margin-left:10px;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;
}
.site-nav .btn-cta:hover{background:var(--accent);color:var(--ink)}
.site-nav .btn-cta:hover::after{display:none}

/* ============ Header behaviour modifiers ============ */
/* Sticky OFF — drop the stickiness, header scrolls away with the page */
.site-header.hdr-no-sticky{position:static !important;top:auto !important}
.site-header.hdr-no-sticky.hdr-style-6{position:static !important}

/* Shrink on scroll — JS adds .is-scrolled once past 80px */
.site-header.hdr-shrink-on-scroll{transition:padding .25s,box-shadow .25s,backdrop-filter .25s}
.site-header.hdr-shrink-on-scroll .inner{transition:padding .25s}
.site-header.hdr-shrink-on-scroll.is-scrolled .inner{padding:10px 0}
.site-header.hdr-shrink-on-scroll.is-scrolled{box-shadow:0 6px 18px -8px rgba(0,0,0,.08);background:rgba(255,255,255,.92)}
.site-header.hdr-shrink-on-scroll.is-scrolled .site-logo{font-size:18px}
.site-header.hdr-shrink-on-scroll.is-scrolled .site-logo .logo-img{max-height:30px}

/* ============ Header style variants (admin → Theme Options → Header) ============ */

/* Style 2 — Centered: nav-left | logo | nav-right | side-actions */
.site-header.hdr-style-2 .inner{display:grid;grid-template-columns:1fr auto 1fr auto;gap:20px;align-items:center}
.site-header.hdr-style-2 .site-nav--left{justify-content:flex-end}
.site-header.hdr-style-2 .site-nav--right{justify-content:flex-start}
.site-header.hdr-style-2 .site-logo{justify-content:center}
.site-header.hdr-style-2 .header-side{justify-self:end}
@media (max-width:992px){
  .site-header.hdr-style-2 .inner{grid-template-columns:1fr auto auto;gap:14px}
  .site-header.hdr-style-2 .site-nav--left{display:none}
  .site-header.hdr-style-2 .site-nav--right{display:none}
}

/* Style 3 — Topbar + Main: the topbar (above the header) already comes from header_topbar_enabled.
   For style 3 we force it on visually and de-emphasize the main bar a touch. */
.site-header.hdr-style-3{background:#fff;border-bottom:1px solid var(--line)}
.site-header.hdr-style-3 .inner{padding:14px 0}

/* Style 4 — Transparent: overlap the hero. Only works well if next section is a hero with dark imagery,
   so we keep text light to preserve legibility. */
.site-header.hdr-style-4{
  position:absolute;left:0;right:0;top:0;
  background:transparent;backdrop-filter:none;border-bottom:0;
  z-index:60;
}
.site-header.hdr-style-4 + section,
.site-header.hdr-style-4 + main > section:first-child,
.site-header.hdr-style-4 ~ .hero{padding-top:120px}
.site-header.hdr-style-4 .site-logo,
.site-header.hdr-style-4 .site-nav a{color:#fff}
.site-header.hdr-style-4 .site-nav a:not(.btn-cta)::after{background:#fff}
.site-header.hdr-style-4 .nav-icon-btn,
.site-header.hdr-style-4 .nav-cart{color:#fff}
.site-header.hdr-style-4 .btn{background:#fff;color:var(--ink)}
.site-header.hdr-style-4 .btn:hover{background:var(--accent);color:var(--ink)}

/* Style 5 — Dark */
.site-header.hdr-style-5{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.06)}
.site-header.hdr-style-5 .site-logo,
.site-header.hdr-style-5 .site-nav a{color:#fff}
.site-header.hdr-style-5 .site-logo .dot{background:var(--accent);color:var(--ink)}
.site-header.hdr-style-5 .site-nav a:not(.btn-cta)::after{background:var(--accent)}
.site-header.hdr-style-5 .nav-icon-btn,
.site-header.hdr-style-5 .nav-cart{color:#fff}
.site-header.hdr-style-5 .btn{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.site-header.hdr-style-5 .btn:hover{background:#b8e600}
.site-header.hdr-style-5 .nav-toggle{color:#fff}

/* Style 6 — Floating pill */
.site-header.hdr-style-6{background:transparent;backdrop-filter:none;border-bottom:0;position:sticky;top:14px}
.site-header.hdr-style-6 .inner{
  background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 24px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.04);
  margin:0 auto;
}
.site-header.hdr-style-6 + *{margin-top:14px}

/* Style 7 — Boxed card */
.site-header.hdr-style-7{background:transparent;backdrop-filter:none;border-bottom:0;padding:18px 0 0}
.site-header.hdr-style-7 .inner{
  background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:14px 24px;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.08);
}

/* Style 8 — Spacious mega */
.site-header.hdr-style-8 .inner{padding:28px 0;gap:32px}
.site-header.hdr-style-8 .site-logo{font-size:24px}
.site-header.hdr-style-8 .site-logo .logo-img{max-height:50px;max-width:200px}
.site-header.hdr-style-8 .site-nav a{padding:12px 20px;font-size:16px}

/* ============ Mobile header style variants ============ */
@media (max-width:992px){
  /* Centered logo on mobile */
  .site-header.hdr-mobile-centered .inner{position:relative;justify-content:center}
  .site-header.hdr-mobile-centered .nav-toggle{position:absolute;left:0}
  .site-header.hdr-mobile-centered .header-side{position:absolute;right:0}
  .site-header.hdr-mobile-centered .header-side .btn,
  .site-header.hdr-mobile-centered .header-side .nav-icon-btn{display:none}
  .site-header.hdr-mobile-centered .site-logo{margin:0 auto}

  /* Fullscreen menu — the menu slides over the whole viewport with dark backdrop */
  .site-header.hdr-mobile-fullscreen .site-nav{
    width:100vw;max-width:none;
    background:var(--ink);color:#fff;
    padding:24px 18px;
  }
  .site-header.hdr-mobile-fullscreen .site-nav a{color:#fff;font-size:18px;font-weight:600}
  .site-header.hdr-mobile-fullscreen .site-nav .btn-cta{background:var(--accent);color:var(--ink)}
}

/* ============ Universal mobile responsiveness for ALL header styles ============ */
@media (max-width:992px){
  /* CTA button takes too much room on mobile across every style — move it inside the
     slide-out drawer instead. Search + cart + hamburger stay in the bar. */
  .site-header .header-side .btn{display:none}
  /* Append a CTA inside the drawer instead — see .site-nav .btn (auto-injected via existing markup). */
}
@media (max-width:768px){
  /* Tighten the base header chrome on phones — applies to every style. */
  .site-header .inner{gap:10px;padding:12px 0}
  .site-header .header-side{gap:8px}
}

/* ── Per-style mobile tweaks ─────────────────────────────────────────────── */

/* Style 4 (Transparent): if the page beneath isn't a dark hero, white text becomes
   invisible. Add a subtle dark scrim on mobile so logo+icons stay readable. */
@media (max-width:992px){
  .site-header.hdr-style-4{
    background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 70%,transparent 100%);
  }
  .site-header.hdr-style-4 .nav-toggle{color:#fff}
}

/* Style 5 (Dark): hamburger needs the dark drawer styling on mobile. */
@media (max-width:992px){
  .site-header.hdr-style-5 .site-nav{background:var(--ink);border-color:rgba(255,255,255,.08)}
  .site-header.hdr-style-5 .site-nav a{color:#fff !important}
}

/* Style 6 (Floating Pill): tighten the pill on mobile so it doesn't dominate. */
@media (max-width:768px){
  .site-header.hdr-style-6{top:8px}
  .site-header.hdr-style-6 .inner{
    padding:8px 14px;border-radius:99px;
    margin:0 12px;
  }
  .site-header.hdr-style-6 + *{margin-top:8px}
}
@media (max-width:420px){
  .site-header.hdr-style-6 .inner{padding:6px 12px;margin:0 8px}
}

/* Style 7 (Boxed Card): tighten card on mobile. */
@media (max-width:768px){
  .site-header.hdr-style-7{padding:10px 0 0}
  .site-header.hdr-style-7 .inner{padding:10px 14px;border-radius:14px;margin:0 12px}
}

/* Style 8 (Spacious Mega): too much padding on mobile — bring it back to normal. */
@media (max-width:768px){
  .site-header.hdr-style-8 .inner{padding:14px 0;gap:12px}
  .site-header.hdr-style-8 .site-logo{font-size:18px}
  .site-header.hdr-style-8 .site-logo .logo-img{max-height:34px;max-width:130px}
}

/* Style 3 (Topbar+Main): topbar itself collapses below 480px to wrap cleanly. */
@media (max-width:480px){
  .site-topbar{font-size:11.5px;padding:5px 0}
  .site-topbar > .container{justify-content:center;gap:10px}
}

/* Drawer CTA — duplicate CTA inside the slide-out menu so mobile users still get a
   primary call-to-action after we hid the header-bar copy above. */
.site-nav .btn-cta.mobile-only{display:none}
@media (max-width:992px){
  .site-nav .btn-cta.mobile-only{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--ink);color:#fff !important;
    padding:14px 22px;border-radius:99px;margin-top:14px;
    font-weight:700;font-size:14px;text-align:center;
  }
  .site-nav .btn-cta.mobile-only::after{display:none !important}
}

.header-side{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--ink-soft)}
.header-side .phone{display:none}
@media(min-width:1100px){.header-side .phone{display:flex;align-items:center;gap:8px}}
.header-side .phone .ph-ico{width:36px;height:36px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.header-side .phone small{display:block;font-size:11px;color:var(--muted)}
.header-side .phone strong{font-size:14px}

.nav-toggle{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;color:var(--ink);font-size:24px;position:relative;z-index:5;pointer-events:auto}
.nav-toggle i{pointer-events:none}

/* ---------- Section base ---------- */
.section{padding:var(--section-y) 0}
.section-dark{background:var(--ink);color:#fff}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}
.section-dark p{color:#bdbdbd}
.section-cream-2{background:var(--cream-2)}

.section-head{text-align:center;max-width:760px;margin:0 auto 56px}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{margin:0 0 14px}
.section-head p{color:var(--muted);font-size:17px;margin:0}
.section-head.left{text-align:left;margin:0 0 40px;max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}

/* ---------- Hero ---------- */
.hero{padding:60px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.05fr .9fr;gap:60px;align-items:center}
.hero h1{margin:18px 0 20px}
.hero h1 .ital{font-family:var(--font-serif);font-weight:400;font-style:italic;color:var(--ink)}
.hero p.lead{font-size:17px;color:var(--muted);max-width:520px;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-img{
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--cream-2);aspect-ratio:5/6;position:relative;
  box-shadow:var(--shadow);
}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* Soft gradient overlay so the badge stays legible no matter the photo */
.hero-img::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:55%;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.65) 100%);
}

/* Floating name + role card on the hero photo */
.hero-badge{
  position:absolute;left:18px;right:18px;bottom:18px;z-index:2;
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.45);
  animation:heroBadgeIn .6s cubic-bezier(.34,1.4,.64,1) .35s backwards;
}
.hero-badge-inner{flex:1;min-width:0}
.hero-badge-name{
  font-size:18px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;line-height:1.2;margin-bottom:2px;
}
.hero-badge-role{
  font-size:13px;color:var(--ink-soft,#555);line-height:1.4;
  font-weight:500;
}
.hero-badge-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent,#d4ff3a);
  box-shadow:0 0 0 4px rgba(212,255,58,.25);
  flex:0 0 10px;
  animation:heroBadgePulse 2.4s ease-in-out infinite;
}
@keyframes heroBadgeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroBadgePulse{
  0%,100%{box-shadow:0 0 0 4px rgba(212,255,58,.25)}
  50%{box-shadow:0 0 0 8px rgba(212,255,58,.05)}
}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-img{aspect-ratio:4/5;max-width:500px;margin:0 auto}
  .hero-badge{padding:12px 14px;border-radius:14px}
  .hero-badge-name{font-size:16px}
  .hero-badge-role{font-size:12px}
}

/* ---------- Logo strip / marquee row ---------- */
.logo-strip{
  background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;
}
.logo-strip .strip{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;color:var(--muted);font-weight:600;font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;opacity:.7;
}
.logo-strip .strip span{display:inline-flex;align-items:center;gap:14px}
.logo-strip .strip span::after{content:"●";color:var(--muted-2);font-size:6px;margin-left:14px}
.logo-strip .strip span:last-child::after{display:none}
.logo-strip .label{
  text-align:center;font-size:15px;font-weight:600;color:var(--ink-soft,#444);
  letter-spacing:.04em;text-transform:uppercase;
  margin:6px 0 22px;position:relative;display:inline-flex;align-items:center;gap:14px;
  width:100%;justify-content:center;
}
.logo-strip .label::before,
.logo-strip .label::after{
  content:"";flex:0 0 60px;height:1px;background:var(--line);
  max-width:80px;
}

/* ---------- Logo marquee (slow-scroll) ---------- */
.logo-marquee{
  overflow:hidden !important;padding:18px 0 28px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);
}
.logo-marquee-track{
  display:flex !important;flex-direction:row !important;align-items:center !important;
  flex-wrap:nowrap !important;gap:72px;
  animation:logoScroll 40s linear infinite;
  width:max-content !important;
}
.logo-marquee:hover .logo-marquee-track{animation-play-state:paused}
.logo-marquee-track > *{flex:0 0 auto !important}
.logo-marquee-track img{
  height:68px !important;width:auto !important;max-width:220px !important;
  object-fit:contain !important;display:block !important;
  filter:grayscale(100%) contrast(1.05);opacity:.78;
  transition:filter .25s,opacity .25s,transform .25s;
}
.logo-marquee-track a{display:inline-flex !important;align-items:center}
.logo-marquee-track a:hover img,
.logo-marquee-track img:hover{filter:grayscale(0) contrast(1);opacity:1;transform:scale(1.05)}
.logo-marquee-track.text-fallback .brand-text{
  font-family:var(--font-sans);font-weight:700;font-size:22px;
  color:var(--ink);opacity:.55;letter-spacing:-.01em;
  white-space:nowrap;
}
.logo-marquee-track.text-fallback .brand-text:hover{opacity:1}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Reviews marquee (auto-scroll, hover-pause) ---------- */
.reviews-marquee{
  overflow:hidden !important;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
}
.reviews-track{
  display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
  gap:24px;width:max-content !important;
  animation:reviewScroll 60s linear infinite;
  padding:6px 0;
}
.reviews-marquee:hover .reviews-track{animation-play-state:paused}
.reviews-track > .test-card{
  flex:0 0 380px !important;width:380px !important;max-width:380px !important;
  box-shadow:var(--shadow-sm);
}
@keyframes reviewScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- About row (Ritovex-style 4-stat grid + blob image) ---------- */
.about-row{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-top:40px}

/* Image with organic blob shape (notches cut from top-right + bottom-left) */
.about-img{
  position:relative;background:transparent;
  aspect-ratio:1/1.05;overflow:visible;
}
.about-img img{
  width:100%;height:100%;object-fit:cover;border-radius:0;
  -webkit-clip-path:url(#aboutBlob);
          clip-path:url(#aboutBlob);
}
/* Fallback if SVG clip-path not supported */
@supports not (clip-path: url(#aboutBlob)) {
  .about-img{aspect-ratio:5/6;border-radius:var(--radius-lg);overflow:hidden}
  .about-img img{clip-path:none}
}

/* Stats panel with 2x2 grid */
.about-stats{
  background:var(--cream-2);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,36px);
}
.stats-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:18px 30px;
}
.stat-cell{display:flex;flex-direction:column;gap:8px}
.stat-cell .stat-icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--ink);
  border:1px solid var(--line);
}
.stat-cell .stat-num{
  font-size:clamp(34px,4vw,46px);font-weight:700;
  line-height:1;letter-spacing:-.04em;color:var(--ink);
  margin-top:6px;
}
.stat-cell .stat-num span{
  font-size:.65em;color:var(--accent-dark);font-weight:600;margin-left:2px;
}
.stat-cell .stat-label{
  font-size:13px;color:var(--muted);line-height:1.45;
  border-top:1px dashed rgba(10,10,10,.15);padding-top:10px;margin-top:4px;
  min-height:36px;
}

/* Bottom CTA row */
.about-cta-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(10,10,10,.08);
}
.about-phone{display:flex;align-items:center;gap:10px}
.about-phone .phone-ico{
  width:42px;height:42px;border-radius:50%;background:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  border:1px solid var(--line);color:var(--ink);
}
.about-phone .ph-text{display:flex;flex-direction:column;line-height:1.2}
.about-phone small{font-size:11px;color:var(--muted)}
.about-phone strong{font-size:14px;color:var(--ink)}

@media(max-width:900px){.about-row{grid-template-columns:1fr;gap:36px}.about-img{max-width:540px;margin:0 auto}}
/* Keep stats 2-per-row on mobile (was 1 col before — wasted vertical space). */
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:14px 16px}
  .stat-cell .stat-icon{width:36px;height:36px;font-size:16px;border-radius:10px}
  .stat-cell .stat-num{font-size:28px}
  .stat-cell .stat-label{font-size:11.5px;min-height:32px;padding-top:8px}
}

/* ---------- Services list (DARK accordion-style) ---------- */
.svc-list{margin-top:30px;border-top:1px solid var(--line-dark)}
.svc-item{
  border-bottom:1px solid var(--line-dark);
  padding:28px 0;display:grid;grid-template-columns:60px 1fr auto;gap:24px;align-items:start;
  cursor:pointer;transition:padding .25s;
}
.svc-item:hover{padding-left:8px}
.svc-num{color:var(--muted-2);font-size:14px;font-weight:600}
.svc-body h3{margin:0;color:#fff;font-size:clamp(28px,3.5vw,42px);font-weight:700;letter-spacing:-.02em}
.svc-body p{color:#9a9a9a;font-size:15px;margin:8px 0 0;max-width:560px;display:none}
.svc-item.open p{display:block}
.svc-item.open .svc-body h3{color:var(--accent)}
.svc-toggle{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:transform .25s,background .25s;
}
.svc-item:hover .svc-toggle{background:var(--accent);color:var(--ink)}
.svc-item.open .svc-toggle{background:var(--accent);color:var(--ink);transform:rotate(45deg)}

/* ---------- Project / blog cards ---------- */
.card-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{
  background:var(--white);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);transition:transform .25s,box-shadow .25s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:4/3;background:var(--cream-2);overflow:hidden;position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.05)}
.card .thumb .meta-overlay{
  position:absolute;right:14px;top:14px;display:flex;gap:8px;
}
.card .thumb .meta-overlay .pill{
  background:rgba(255,255,255,.95);color:var(--ink);
  padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid rgba(0,0,0,.06);backdrop-filter:blur(4px);
}
.card .body{padding:22px;flex:1;display:flex;flex-direction:column}
.card .body .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:10px}
.card .body h4{margin:0 0 10px;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.card .body h4 a{color:var(--ink)}
.card .body h4 a:hover{color:var(--ink-soft)}
.card .body .excerpt{color:var(--muted);font-size:14px;flex:1;margin:0 0 14px;line-height:1.55}
.card .body .read{font-size:13px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;margin-top:auto}
.card .body .read::after{content:"→";transition:transform .2s}
.card .body .read:hover::after{transform:translateX(4px)}

/* ---------- Back-to-top floating button ---------- */
.back-to-top{
  position:fixed;right:22px;bottom:22px;z-index:998;
  width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.35);
  font-size:20px;line-height:1;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .25s,transform .25s,background .15s;
}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--accent);color:var(--ink)}
.back-to-top:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:640px){
  .back-to-top{right:16px;bottom:80px;width:42px;height:42px;font-size:18px}
}

/* ====================================================
   Floating WhatsApp chat widget (left-side)
   ==================================================== */
.wa-widget{position:fixed;left:22px;bottom:22px;z-index:999;font-family:inherit}

/* Pulsing FAB */
.wa-fab{
  position:relative;width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.55), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .2s ease, box-shadow .2s ease, background .15s;
}
.wa-fab:hover{transform:scale(1.06);background:#1ebe5d;box-shadow:0 16px 36px -10px rgba(37,211,102,.65)}
.wa-fab:focus-visible{outline:3px solid #25d366;outline-offset:4px}
.wa-fab.is-open{transform:rotate(-8deg) scale(.95)}
.wa-fab i{position:relative;z-index:2}
.wa-fab-ring{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(37,211,102,.5);
  animation:waPulse 2.2s ease-out infinite;pointer-events:none;
}
.wa-fab-badge{
  position:absolute;top:-2px;right:-2px;z-index:3;
  min-width:18px;height:18px;padding:0 5px;
  background:#ef4444;color:#fff;
  font-size:11px;font-weight:700;line-height:18px;
  border-radius:999px;border:2px solid #fff;
  display:inline-flex;align-items:center;justify-content:center;
}
.wa-fab.is-open .wa-fab-badge{display:none}
@keyframes waPulse{
  0%  {transform:scale(1);opacity:.7}
  80% {transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}

/* Chat preview panel */
.wa-panel{
  position:absolute;left:0;bottom:74px;width:330px;max-width:calc(100vw - 44px);
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 50px -14px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom left;
  transition:opacity .22s ease, transform .22s ease;
}
.wa-panel.is-open{opacity:1;transform:translateY(0) scale(1)}

/* WhatsApp-green header */
.wa-panel-head{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:14px 14px 14px 16px;
  background:linear-gradient(135deg, #128c7e 0%, #25d366 100%);
  color:#fff;
}
.wa-avatar{
  position:relative;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;flex:0 0 48px;
  border:2px solid rgba(255,255,255,.35);
}
.wa-avatar img{width:100%;height:100%;object-fit:cover}
.wa-avatar-letter{font-size:20px;font-weight:700;color:#fff;letter-spacing:.02em}
.wa-online-dot{
  position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:50%;
  background:#3ddc84;border:2px solid #128c7e;
}
.wa-who{flex:1;min-width:0;line-height:1.25}
.wa-who strong{display:block;font-size:15px;font-weight:600;color:#fff;letter-spacing:.005em}
.wa-who small{display:block;font-size:11.5px;color:rgba(255,255,255,.85);margin-top:1px}
.wa-who em{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-style:normal;color:rgba(255,255,255,.95);margin-top:3px;
}
.wa-online-pulse{
  width:7px;height:7px;border-radius:50%;background:#3ddc84;
  box-shadow:0 0 0 0 rgba(61,220,132,.7);
  animation:waOnlinePulse 1.6s ease-in-out infinite;
}
@keyframes waOnlinePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(61,220,132,.7)}
  50%{box-shadow:0 0 0 6px rgba(61,220,132,0)}
}
.wa-close{
  background:transparent;border:0;color:#fff;cursor:pointer;
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:.85;transition:opacity .15s, background .15s;
  font-size:14px;
}
.wa-close:hover{opacity:1;background:rgba(255,255,255,.18)}

/* Chat body — WhatsApp doodled background */
.wa-panel-body{
  background:#e5ddd5;
  background-image:
    radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size:18px 18px, 24px 24px;
  background-position:0 0, 9px 12px;
  padding:18px 14px;min-height:120px;
  display:flex;flex-direction:column;gap:10px;
}
.wa-typing{
  align-self:flex-start;display:none;align-items:center;gap:4px;
  background:#fff;border-radius:14px;padding:10px 12px;
  box-shadow:0 1px 1px rgba(0,0,0,.05);
}
.wa-typing span{
  width:7px;height:7px;border-radius:50%;background:#90a4ae;
  animation:waTyping 1.2s infinite ease-in-out both;
}
.wa-typing span:nth-child(2){animation-delay:.15s}
.wa-typing span:nth-child(3){animation-delay:.3s}
@keyframes waTyping{
  0%,80%,100%{transform:scale(.6);opacity:.5}
  40%{transform:scale(1);opacity:1}
}
.wa-bubble{
  align-self:flex-start;max-width:88%;position:relative;
  background:#fff;color:#1c1c1c;
  border-radius:14px 14px 14px 4px;
  padding:10px 12px 8px;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
  opacity:0;transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
  font-size:14px;line-height:1.5;
}
.wa-bubble.is-shown{opacity:1;transform:translateY(0)}
.wa-bubble::before{
  content:"";position:absolute;left:-6px;bottom:0;
  width:0;height:0;
  border-style:solid;border-width:0 8px 8px 0;
  border-color:transparent #fff transparent transparent;
}
.wa-bubble p{margin:0;color:#1c1c1c}
.wa-bubble time{
  display:block;text-align:right;font-size:10.5px;color:#8a8a8a;margin-top:4px;
  font-style:normal;
}

/* CTA button — opens WhatsApp */
.wa-cta{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;background:#25d366;color:#fff !important;
  text-decoration:none;font-weight:600;font-size:14.5px;letter-spacing:.005em;
  transition:background .15s;
}
.wa-cta:hover{background:#1ebe5d;color:#fff}
.wa-cta i{font-size:18px}
.wa-cta-arrow{margin-left:auto;font-size:14px;opacity:.85}
.wa-foot{
  margin:0;text-align:center;padding:8px 12px;
  font-size:10.5px;color:#8a8a8a;background:#f7f7f7;
}

@media (max-width:640px){
  .wa-widget{left:14px;bottom:14px}
  .wa-fab{width:54px;height:54px;font-size:26px}
  .wa-panel{width:300px;bottom:68px}
}

/* ---------- Home SEO body — collapsible read-more block ---------- */
.home-seo{padding:30px 0 50px}
.home-seo-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,40px);
  box-shadow:0 4px 20px -10px rgba(0,0,0,.06);
}
.home-seo-card .eyebrow{display:inline-flex;align-items:center;gap:8px}
.home-seo-card h2,
.home-seo-card h3{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;line-height:1.15}
.home-seo-content{
  color:var(--ink-soft);font-size:15px;line-height:1.78;
  max-height:8.2em;overflow:hidden;position:relative;
  transition:max-height .35s ease;
}
.home-seo-content h3{font-size:20px;color:var(--ink);margin:22px 0 8px;letter-spacing:-.01em}
.home-seo-content h3:first-child{margin-top:0}
.home-seo-content p{margin:0 0 14px}
.home-seo-content a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.home-seo-content a:hover{color:var(--ink)}
.home-seo-content strong{color:var(--ink)}
.home-seo-content::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5.5em;pointer-events:none;
  background:linear-gradient(transparent, var(--white) 80%);
}
.home-seo-content.is-expanded{max-height:none}
.home-seo-content.is-expanded::after{display:none}
.home-seo-toggle{
  margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;
  background:var(--ink);color:#fff;border:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;
  transition:background .15s,color .15s,transform .12s;
}
.home-seo-toggle:hover{background:var(--accent);color:var(--ink);transform:translateY(-1px)}
.home-seo-toggle i{transition:transform .25s}
.home-seo-toggle.is-open i{transform:rotate(180deg)}

/* ---------- Header icon buttons (search + cart) ---------- */
.nav-icon-btn,.nav-cart{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  color:var(--ink);background:var(--white);border:1px solid var(--line);
  font-size:18px;text-decoration:none;transition:all .2s;cursor:pointer;
}
.nav-icon-btn:hover,.nav-cart:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav-cart .count{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
  background:var(--accent);color:var(--ink);border-radius:999px;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;padding:0 5px;
}

/* ---------- Master Search Modal ---------- */
.search-modal{
  position:fixed;inset:0;display:none;z-index:9999;
  background:rgba(10,10,10,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:srFadeIn .15s ease-out;
}
.search-modal.open{display:block}
@keyframes srFadeIn{from{opacity:0}to{opacity:1}}
.search-modal .sr-card{
  position:absolute;top:8vh;left:50%;transform:translateX(-50%);
  width:min(640px,calc(100vw - 32px));
  background:#fff;border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
  overflow:hidden;animation:srSlideIn .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes srSlideIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
.search-modal .sr-input-wrap{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.search-modal .sr-input-wrap i.bi-search{font-size:18px;color:var(--muted)}
.search-modal input.sr-input{
  flex:1;border:0;outline:0;background:transparent;
  font-size:17px;font-family:inherit;color:var(--ink);padding:6px 0;
}
.search-modal input.sr-input::placeholder{color:var(--muted)}
.search-modal .sr-kbd{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border:1px solid var(--line);border-radius:6px;
  font-size:11px;font-weight:600;color:var(--muted);background:var(--cream);
  font-family:'SFMono-Regular',ui-monospace,monospace;
}
.search-modal .sr-close{
  border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer;
  padding:4px 8px;line-height:1;border-radius:6px;
}
.search-modal .sr-close:hover{color:var(--ink);background:var(--cream)}
.search-modal .sr-body{max-height:60vh;overflow-y:auto;padding:8px 0}
.search-modal .sr-empty,.search-modal .sr-hint{
  padding:36px 20px;text-align:center;color:var(--muted);font-size:14px;
}
.search-modal .sr-empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.search-modal .sr-group-label{
  display:block;padding:12px 20px 6px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);
}
.search-modal .sr-item{
  display:flex;gap:12px;align-items:center;
  padding:10px 20px;color:var(--ink);text-decoration:none;
  border-left:3px solid transparent;cursor:pointer;
  transition:background .12s,border-color .12s;
}
.search-modal .sr-item:hover,.search-modal .sr-item.is-active{
  background:var(--cream);border-left-color:var(--accent);
}
.search-modal .sr-thumb{
  flex:0 0 44px;width:44px;height:44px;border-radius:8px;overflow:hidden;
  background:var(--cream-2);display:flex;align-items:center;justify-content:center;
  color:var(--muted);
}
.search-modal .sr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-modal .sr-meta{flex:1;min-width:0}
.search-modal .sr-meta .sr-title{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 2px;display:block;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-modal .sr-meta .sr-excerpt{font-size:12px;color:var(--muted);margin:0;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.search-modal .sr-meta mark{background:var(--accent);color:var(--ink);padding:0 2px;border-radius:3px}
.search-modal .sr-pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:999px;background:var(--cream-2);color:var(--muted);
  flex-shrink:0;align-self:center;}
.search-modal .sr-footer{
  padding:10px 20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--muted);background:var(--cream);
}
.search-modal .sr-footer .sr-keys{display:flex;gap:14px}
.search-modal .sr-footer .sr-keys span{display:inline-flex;align-items:center;gap:4px}

@media (max-width:640px){
  .search-modal .sr-card{top:0;left:0;right:0;width:100%;transform:none;border-radius:0;height:100dvh;display:flex;flex-direction:column}
  .search-modal .sr-body{flex:1;max-height:none}
  .search-modal .sr-kbd{display:none}
}

/* Filter bar — collapsible categories with "Show more" toggle */
.filter-bar.is-collapsed .cat-extra{display:none}
.filter-bar .cat-more-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  background:transparent;color:var(--ink);
  border:1px dashed var(--line);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all .2s;font-family:inherit;
}
.filter-bar .cat-more-toggle:hover{background:var(--ink);color:#fff;border-color:var(--ink);border-style:solid}
.filter-bar .cat-more-toggle .more-count{
  background:rgba(10,10,10,.08);color:var(--muted);
  padding:1px 7px;border-radius:999px;font-size:11px;font-weight:500;
}
.filter-bar .cat-more-toggle:hover .more-count{background:rgba(255,255,255,.2);color:#fff}

/* Portfolio card grids (home Recent Projects + related on single) — wider aspect, top aligned */
.pf-cards .card .thumb,
.pf-recent .card .thumb{aspect-ratio:16/10}
.pf-cards .card .thumb img,
.pf-recent .card .thumb img{object-position:top center}

/* ---------- Shared portfolio-card style (used on home, portfolio listing, category page) ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.pf-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
}
.pf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pf-card .pf-thumb{
  position:relative;
  background:linear-gradient(135deg, #f4f2ed 0%, #ece9e1 100%);
  display:block;aspect-ratio:16/10;overflow:hidden;
}
.pf-card .pf-thumb img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:top center;
  transition:transform .5s ease;
}
.pf-card:hover .pf-thumb img{transform:scale(1.04)}
.pf-card .pf-thumb .pill{
  position:absolute;top:14px;right:14px;
  background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  color:var(--ink);padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:600;border:1px solid rgba(0,0,0,.06);
  z-index:2;
}
.pf-card .pf-body{padding:18px 22px 22px}
.pf-card .pf-body h4{font-size:16px;margin:0 0 6px;line-height:1.35}
.pf-card .pf-body h4 a{color:var(--ink)}
.pf-card .pf-body .client{font-size:13px;color:var(--muted);margin:0 0 8px}
.pf-card .pf-body .view{font-size:13px;color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.pf-card .pf-body .view:hover{color:var(--accent-dark)}

/* Fixed-3-column variant used on homepage Recent Projects */
.pf-grid.pf-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.pf-grid.pf-grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pf-grid.pf-grid-3{grid-template-columns:1fr}}

/* ---------- Working process ---------- */
.process{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.process-cards{display:grid;gap:14px}
.proc-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;display:grid;grid-template-columns:54px 1fr 50px;gap:18px;align-items:center;
  transition:background .25s,border-color .25s;
}
.proc-card:hover,.proc-card.open{background:var(--ink);color:#fff;border-color:var(--ink)}
.proc-card:hover h4,.proc-card.open h4{color:#fff}
.proc-card:hover p,.proc-card.open p{color:#bdbdbd}
.proc-card .ico{width:54px;height:54px;border-radius:14px;background:var(--cream-2);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink);transition:background .25s,color .25s}
.proc-card:hover .ico,.proc-card.open .ico{background:var(--accent);color:var(--ink)}
.proc-card .num{font-size:22px;font-weight:700;color:var(--muted-2);text-align:right}
.proc-card h4{margin:0 0 4px;font-size:19px}
.proc-card p{margin:0;color:var(--muted);font-size:14px}
@media(max-width:900px){.process{grid-template-columns:1fr}}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--ink);padding:24px 0;overflow:hidden;
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
}
.marquee-track{display:flex;gap:48px;white-space:nowrap;animation:marq 30s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-track span{
  color:#fff;font-size:clamp(22px,3vw,34px);font-weight:600;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:48px;
}
.marquee-track span::after{content:"✦";color:var(--accent);font-size:22px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Testimonials ---------- */
.test-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.test-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:16px;
  min-height:240px;
}
.test-card .stars{color:var(--accent-dark);font-size:14px;letter-spacing:2px}
.test-card .quote{color:var(--ink-soft);font-size:15px;line-height:1.65;margin:0;flex:1}
.test-card .quote .show-more{
  display:inline;background:transparent;border:0;cursor:pointer;
  font:inherit;color:var(--accent-dark);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;margin-left:4px;padding:0;
}
.test-card .quote .show-more:hover,
.test-card .quote .show-more:focus-visible{color:var(--ink);outline:none}
.test-card .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.test-card .who img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.test-card .who strong{display:block;font-size:14px}
.test-card .who small{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.3}

/* Review Show-More modal */
.rv-modal{
  position:fixed !important;inset:0;
  background:rgba(10,10,10,.6);
  align-items:center;justify-content:center;
  z-index:99999 !important;padding:20px;
  backdrop-filter:blur(4px);
  /* default hidden; JS toggles display:flex */
}
.rv-modal[hidden]{display:none !important}
.rv-modal-card{
  background:var(--cream);max-width:600px;width:100%;border-radius:var(--radius-lg);
  padding:36px 32px;position:relative;box-shadow:var(--shadow-lg);
  animation:rvIn .25s ease;
}
@keyframes rvIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.rv-close{
  position:absolute;top:14px;right:14px;background:transparent;border:0;
  font-size:30px;line-height:1;color:var(--muted);cursor:pointer;
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.rv-close:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.rv-stars{color:var(--accent-dark);font-size:18px;letter-spacing:3px;margin-bottom:16px}
.rv-quote{font-family:var(--font-serif);font-style:italic;font-size:21px;line-height:1.5;color:var(--ink);margin:0 0 22px}
.rv-who{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.rv-who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.rv-who strong{display:block;font-size:15px}
.rv-who small{color:var(--muted);font-size:13px}

/* ---------- Big CTA ---------- */
.cta-block{
  background:var(--ink);color:#fff;border-radius:var(--radius-lg);
  padding:clamp(50px,8vw,90px) 30px;text-align:center;
  background-image:radial-gradient(circle at 50% 0,rgba(212,255,58,.12),transparent 60%);
  position:relative;overflow:hidden;
}
.cta-block .eyebrow.on-dark{margin-bottom:18px}
.cta-block h2{font-size:clamp(40px,7vw,90px);margin:0 0 30px;letter-spacing:-.04em;color:#fff !important}
.cta-block h2 .ital{color:var(--accent) !important}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:50px 0 26px;background:var(--cream)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);margin:0 0 18px;list-style:none;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:6px}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--muted-2);margin-left:6px}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb li:last-child{color:var(--ink);font-weight:600}

/* ---------- Article (single blog/page) ---------- */
.post-meta{display:flex;flex-wrap:wrap;gap:20px;color:var(--muted);font-size:14px;margin:18px 0 28px;justify-content:center}
.post-meta span{display:inline-flex;align-items:center;gap:6px}
.cat-pill{
  display:inline-block;background:var(--accent);color:var(--ink);
  padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px;
}
.cat-pill:hover{background:var(--ink);color:var(--accent)}

.featured-img{
  margin:0 0 50px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--cream-2);aspect-ratio:16/9;
}
.featured-img img{width:100%;height:100%;object-fit:cover}

/* BLOG ONLY — featured photos + listing cards keep the original 1:1 ratio so
   the existing image library renders without re-cropping. Portfolio + pages
   stay 16:9 (set above) and are unaffected. */
.featured-img.blog-featured{aspect-ratio:1/1;max-width:780px}
.blog-card .thumb{aspect-ratio:1/1}

.article-wrap{padding:14px 0 70px}
.article{max-width:780px;margin:0 auto}
.article-content{font-size:17px;color:var(--ink-soft);line-height:1.78}

/* =====================================================
   Blog case-studies + WhatsApp CTA block (mid-article)
   Order: eyebrow → project tiles → compact CTA strip.
   ===================================================== */
.bcs-block{
  display:block;margin:38px 0;padding:24px clamp(18px,3vw,30px);
  background:linear-gradient(180deg, var(--cream-2,#f7f4ed) 0%, var(--cream,#fbf9f3) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg,18px);
  position:relative;overflow:hidden;
  font-size:initial;line-height:initial;
}
.bcs-block::before{
  content:"";position:absolute;top:-90px;right:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, rgba(212,255,58,.35) 0%, transparent 65%);
  pointer-events:none;
}
.bcs-block::after{
  content:"";position:absolute;bottom:-80px;left:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(10,10,10,.05) 0%, transparent 65%);
  pointer-events:none;
}

.bcs-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:var(--white,#fff);
  padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  margin:0 0 14px;position:relative;
}
.bcs-eyebrow i{color:var(--accent-dark,#7a9300);font-size:12px}

.bcs-intro{
  font-size:11.5px;color:var(--ink-soft,#666);
  margin:0 0 14px;line-height:1.45;font-weight:500;
  max-width:560px;letter-spacing:.005em;
}

.bcs-allprojects{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;color:var(--ink) !important;
  text-decoration:none !important;
  background-image:none !important;border-bottom:1px solid var(--ink) !important;
  padding:0 0 1px;margin:0 0 18px;
  letter-spacing:.01em;line-height:1.3;
  transition:color .15s, border-color .15s, gap .15s;
}
.bcs-allprojects:hover{
  color:var(--accent-dark,#7a9300) !important;
  border-bottom-color:var(--accent-dark,#7a9300) !important;
  gap:8px;
}
.bcs-allprojects i{font-size:11px}

/* ----- Project tiles (FIRST in the block) ----- */
.bcs-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  position:relative;margin:0 0 22px;
}
.bcs-tile{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:8px 14px 8px 8px;
  text-decoration:none !important;
  color:var(--ink) !important;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  min-width:0;
  background-image:none !important;            /* kill article-content link underline-gradient */
}
.bcs-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.18);
  border-color:var(--accent-dark,#a8c700);
  color:var(--ink) !important;
  text-decoration:none !important;
}
.bcs-thumb{
  position:relative;flex:0 0 56px;width:56px;height:56px;
  border-radius:8px;overflow:hidden;background:var(--cream-2);
  display:inline-flex;align-items:center;justify-content:center;
}
.bcs-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bcs-thumb i{font-size:22px;color:var(--muted)}
.bcs-live{
  position:absolute;left:3px;bottom:3px;
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(15,15,15,.85);color:#fff;
  font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:999px;
}
.bcs-live span{
  width:5px;height:5px;border-radius:50%;background:#3ddc84;
  box-shadow:0 0 0 0 rgba(61,220,132,.7);animation:bcsLivePulse 1.6s infinite;
}
@keyframes bcsLivePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(61,220,132,.7)}
  50%{box-shadow:0 0 0 4px rgba(61,220,132,0)}
}
.bcs-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.25}
.bcs-title{
  font-size:13.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bcs-meta small{font-size:11px;color:var(--muted);font-weight:500}
.bcs-arrow{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:var(--accent,#d4ff3a);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;transition:transform .2s;
}
.bcs-tile:hover .bcs-arrow{transform:translate(2px,-2px) rotate(8deg)}

/* ----- CTA strip (BELOW the tiles) — compact + horizontal ----- */
.bcs-cta{
  position:relative;display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;flex-wrap:wrap;
}
.bcs-cta-text{flex:1;min-width:200px;line-height:1.4}
.bcs-cta-text strong{
  display:block;font-size:15.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.005em;margin:0 0 2px;
}
.bcs-cta-text span{
  display:block;font-size:13px;color:var(--ink-soft,#555);
  line-height:1.5;font-weight:400;
}
.bcs-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#25d366 !important;
  color:#fff !important;
  text-decoration:none !important;
  background-image:none !important;             /* override article-content link underline-gradient */
  border-bottom:0 !important;
  padding:11px 18px;border-radius:999px;
  font-weight:600;font-size:14px;letter-spacing:.005em;
  box-shadow:0 10px 22px -10px rgba(37,211,102,.55);
  transition:transform .2s, box-shadow .2s, background-color .15s;
  flex:0 0 auto;
}
.bcs-cta-btn:hover{
  background:#1ebe5d !important;color:#fff !important;
  text-decoration:none !important;
  transform:translateY(-1px);
  box-shadow:0 14px 28px -12px rgba(37,211,102,.65);
}
.bcs-cta-btn i{font-size:16px}
.bcs-cta-btn-label{font-size:14px}
.bcs-cta-btn-arrow{font-size:12px;opacity:.85}

/* Belt-and-braces: nothing inside the block ever wears the article's
   yellow-accent underline-gradient. Some link-styling themes (this one) paint
   a::before/::after pseudo-elements that linger inside the block otherwise. */
.bcs-block a{
  text-decoration:none !important;
  background-image:none !important;
  border-bottom:0 !important;
}
.bcs-block a::before, .bcs-block a::after{
  content:none !important;
}

@media(max-width:640px){
  .bcs-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .bcs-thumb{flex-basis:48px;width:48px;height:48px}
  .bcs-title{font-size:12.5px}
  .bcs-meta small{font-size:10.5px}
  .bcs-cta{padding:12px 14px;gap:12px}
  .bcs-cta-text strong{font-size:14.5px}
  .bcs-cta-text span{font-size:12.5px}
  .bcs-cta-btn{width:100%;justify-content:center;padding:12px 18px}
}
@media(max-width:420px){
  .bcs-grid{grid-template-columns:1fr}
}

/* =====================================================
   Blog footer blocks: Reviews + Services
   ===================================================== */
.bfb-reviews, .bfb-services{
  margin:42px 0;padding:28px clamp(20px,3vw,32px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg,18px);
  position:relative;
}
.bfb-services{
  background:linear-gradient(180deg, var(--cream-2,#f7f4ed) 0%, var(--cream,#fbf9f3) 100%);
}
.bfb-head{margin:0 0 22px}
.bfb-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:var(--cream-2,#f7f4ed);
  padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  margin:0 0 10px;
}
.bfb-eyebrow i{color:var(--accent-dark,#7a9300);font-size:12px}
.bfb-services .bfb-eyebrow{background:#fff}
.bfb-headline{
  font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.01em;
  line-height:1.2;color:var(--ink);margin:0;
}
.bfb-sub{
  font-size:13.5px;color:var(--ink-soft,#555);
  margin:6px 0 0;line-height:1.55;max-width:640px;
}

/* ----- Reviews grid ----- */
.bfb-reviews-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.bfb-review{
  display:flex;flex-direction:column;gap:10px;
  background:var(--cream-2,#f7f4ed);border:1px solid var(--line);
  border-radius:14px;padding:18px 18px 16px;
  position:relative;transition:transform .2s, box-shadow .2s, border-color .2s;
}
.bfb-review:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.12);
  border-color:var(--accent-dark,#a8c700);
}
.bfb-review::before{
  content:"\201C";position:absolute;top:8px;right:14px;
  font-family:Georgia, serif;font-size:60px;line-height:1;color:var(--accent,#d4ff3a);
  opacity:.5;pointer-events:none;
}
.bfb-review-stars{display:flex;gap:2px;color:#fbbf24;font-size:13px;letter-spacing:1px}
.bfb-review-stars .bi-star{color:#d1d5db}
.bfb-review-text{
  font-size:14px;color:var(--ink-soft,#444);line-height:1.6;
  margin:0;flex:1;font-style:normal;
}
.bfb-review-foot{
  display:flex;align-items:center;gap:10px;
  margin-top:auto;padding-top:10px;border-top:1px solid var(--line);
}
.bfb-review-photo{
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  object-fit:cover;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.bfb-review-photo-letter{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--accent,#d4ff3a);
  font-size:14px;font-weight:700;
}
.bfb-review-who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.bfb-review-who strong{font-size:13.5px;font-weight:600;color:var(--ink)}
.bfb-review-who small{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:1px}

/* ----- Services grid — locked to 3 tiles per row on desktop ----- */
.bfb-services-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(3,1fr);
}
.bfb-service{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;
  text-decoration:none !important;
  color:var(--ink) !important;
  background-image:none !important;
  transition:transform .2s, box-shadow .2s, border-color .2s, background-color .15s;
}
.bfb-service:hover{
  transform:translateY(-2px);
  border-color:var(--ink);
  background:var(--ink);
  color:#fff !important;
  box-shadow:0 14px 28px -16px rgba(0,0,0,.25);
  text-decoration:none !important;
}
.bfb-service-ico{
  flex:0 0 36px;width:36px;height:36px;border-radius:8px;
  background:var(--cream-2,#f7f4ed);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:18px;
  transition:background .15s, color .15s;
}
.bfb-service:hover .bfb-service-ico{
  background:var(--accent,#d4ff3a);color:var(--ink);
}
.bfb-service-label{
  flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bfb-service-arrow{
  font-size:13px;opacity:.6;transition:opacity .15s, transform .2s;
}
.bfb-service:hover .bfb-service-arrow{
  opacity:1;transform:translate(2px,-2px);color:var(--accent,#d4ff3a);
}

/* Belt-and-braces: kill any inherited article-content link decoration. */
.bfb-reviews a, .bfb-services a{
  text-decoration:none !important;background-image:none !important;border-bottom:0 !important;
}
.bfb-reviews a::before, .bfb-reviews a::after,
.bfb-services a::before, .bfb-services a::after{content:none !important}

@media(max-width:640px){
  .bfb-reviews-grid{grid-template-columns:1fr 1fr;gap:10px}
  .bfb-services-grid{grid-template-columns:1fr 1fr}
  .bfb-review{padding:14px 14px 12px}
  .bfb-review-text{font-size:13px;line-height:1.5}
  .bfb-review::before{font-size:46px;top:4px;right:10px}
}
@media(max-width:420px){
  .bfb-reviews-grid, .bfb-services-grid{grid-template-columns:1fr}
}

/* Portfolio footer CTA strip — same look as the blog mid-article CTA. */
.pf-cta{
  position:relative;display:flex;align-items:center;gap:18px;
  background:linear-gradient(180deg, var(--cream-2,#f7f4ed) 0%, var(--cream,#fbf9f3) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg,18px);
  padding:18px 22px;flex-wrap:wrap;overflow:hidden;
}
.pf-cta::before{
  content:"";position:absolute;top:-60px;right:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(212,255,58,.35) 0%, transparent 65%);
  pointer-events:none;
}
.pf-cta-text{flex:1;min-width:220px;line-height:1.4;position:relative}
.pf-cta-text strong{
  display:block;font-size:16px;font-weight:700;color:var(--ink);
  letter-spacing:-.005em;margin:0 0 3px;
}
.pf-cta-text span{
  display:block;font-size:13.5px;color:var(--ink-soft,#555);
  line-height:1.55;font-weight:400;
}
.pf-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#25d366 !important;color:#fff !important;
  text-decoration:none !important;background-image:none !important;border-bottom:0 !important;
  padding:13px 22px;border-radius:999px;
  font-weight:600;font-size:14.5px;letter-spacing:.005em;
  box-shadow:0 12px 26px -10px rgba(37,211,102,.55);
  transition:transform .2s, box-shadow .2s, background-color .15s;
  flex:0 0 auto;position:relative;
}
.pf-cta-btn:hover{
  background:#1ebe5d !important;color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 16px 32px -12px rgba(37,211,102,.65);
}
.pf-cta-btn i{font-size:17px}
.pf-cta-arrow{font-size:13px;opacity:.85;margin-left:2px}
@media(max-width:640px){
  .pf-cta{padding:16px 18px;gap:12px}
  .pf-cta-text strong{font-size:15px}
  .pf-cta-text span{font-size:12.5px}
  .pf-cta-btn{width:100%;justify-content:center}
}

.article-content > * + *{margin-top:1.1em}
.article-content h2{margin-top:1.6em;font-size:34px;letter-spacing:-.02em}
.article-content h3{margin-top:1.4em;font-size:25px;letter-spacing:-.02em}
.article-content h4{margin-top:1.2em;font-size:20px}
.article-content p{line-height:1.78}
.article-content blockquote{
  border-left:3px solid var(--accent);
  background:var(--white);
  padding:20px 26px;border-radius:8px;color:var(--ink-soft);
  font-family:var(--font-serif);font-style:italic;font-size:21px;line-height:1.5;
  margin:1.6em 0;
}
.article-content img{border-radius:var(--radius);margin:1.6em auto;box-shadow:var(--shadow-sm)}
.article-content ul,.article-content ol{padding-left:1.4em;margin:1em 0}
.article-content li{margin:.4em 0}
.article-content a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:3px}
.article-content code{background:var(--cream-2);padding:2px 6px;border-radius:4px;font-size:.92em}
.article-content pre{background:var(--ink);color:#f1f5f9;padding:18px;border-radius:var(--radius);overflow:auto}
.article-content pre code{background:transparent;color:inherit;padding:0}
.article-content table{width:100%;border-collapse:collapse;margin:1.4em 0}
.article-content th,.article-content td{border:1px solid var(--line);padding:10px}
.article-content th{background:var(--cream-2);text-align:left}

/* ---------- Gallery ---------- */
.gallery-section{
  max-width:980px;margin:50px auto 0;
  padding-top:40px;border-top:1px solid var(--line);
}
.gallery-section h3{margin-bottom:22px;display:flex;align-items:center;gap:10px}
.gallery-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.gallery-grid a{
  display:block;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1/1;background:var(--cream-2);position:relative;
  box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;
}
.gallery-grid a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gallery-grid a img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-grid a:hover img{transform:scale(1.06)}
.gallery-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  color:#fff;padding:18px 14px 12px;font-size:13px;
}

/* ---------- Comments section ---------- */
.comments-section{margin-top:60px;padding-top:40px;border-top:1px solid var(--line)}
.comments-section h3{display:flex;align-items:center;gap:10px;margin-bottom:24px;font-size:24px}
.comment-list{list-style:none;padding:0;margin:0 0 40px;display:flex;flex-direction:column;gap:24px}
.comment{display:flex;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.c-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--cream-2)}
.c-body{flex:1;min-width:0}
.c-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;font-size:13px;color:var(--muted)}
.c-meta strong{font-size:15px;color:var(--ink)}
.c-meta a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:2px}
.c-text{color:var(--ink-soft);font-size:15px;line-height:1.65}

.comment-form-wrap{background:var(--cream-2);border-radius:var(--radius);padding:30px;margin-top:30px}
.comment-form-wrap h4{margin:0 0 6px;font-size:22px}
.comment-form-wrap .text-muted{color:var(--muted)}
.alert-cm{padding:12px 16px;border-radius:8px;margin:12px 0;font-size:14px}
.alert-cm.success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.alert-cm.error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}

.comment-form .cf-row{margin-top:18px}
.comment-form .cf-row.cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.comment-form label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.comment-form input,.comment-form textarea{
  width:100%;background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;
  color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
.comment-form input:focus,.comment-form textarea:focus{
  outline:none;border-color:var(--accent-dark);
  box-shadow:0 0 0 3px rgba(212,255,58,.25);
}
.comment-form button{margin-top:20px}

@media (max-width: 640px){
  .comment-form-wrap{padding:20px}
  .comment-form .cf-row.cols-3{grid-template-columns:1fr;gap:10px}
  .comment{padding:16px;gap:10px}
  .c-avatar{width:40px;height:40px}
}

/* ---------- Share ---------- */
.share{text-align:center;margin-top:50px;padding-top:28px;border-top:1px solid var(--line)}
.share .label{color:var(--muted);font-size:13px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em}
.share .btns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}

/* ---------- Related ---------- */
.related{background:var(--cream-2);padding:var(--section-y) 0;margin-top:80px}

/* ---------- Pagination ---------- */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:48px;list-style:none;padding:0}
.pagination a, .pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;border-radius:999px;font-size:14px;
  background:var(--white);color:var(--ink);border:1px solid var(--line);font-weight:600;
}
.pagination a:hover{background:var(--accent);border-color:var(--accent)}
.pagination .active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Footer CTA (in footer) — admin editable ---------- */
.footer-cta{
  background:var(--ink);color:#fff;padding:60px 0;border-bottom:1px solid var(--line-dark);
  background-image:radial-gradient(circle at 20% 50%,rgba(212,255,58,.08),transparent 50%);
}
.footer-cta .row{
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.footer-cta .eyebrow.on-dark{margin-bottom:14px}
.footer-cta h3{
  font-size:clamp(24px,3vw,38px);margin:0;color:#fff;letter-spacing:-.02em;line-height:1.15;
  max-width:680px;
}
.footer-cta .btn{
  padding:16px 28px;font-size:16px;flex-shrink:0;
  background:var(--accent);color:var(--ink);border-color:var(--accent);
}
.footer-cta .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.footer-cta .btn .arr{background:var(--ink);color:var(--accent)}
.footer-cta .btn:hover .arr{background:var(--ink);color:#fff}
@media(max-width:760px){
  .footer-cta{padding:42px 0}
  .footer-cta .btn{width:100%;justify-content:center}
}

/* Legacy newsletter (kept in case anyone re-enables) */
.newsletter{display:none}

/* =========================================================
   Heading class aliases (chrome → SEO-safe divs)
   ---------------------------------------------------------
   All hardcoded <h1>…<h6> in frontend Blade templates were
   converted to <div class="hN"> so the admin controls heading
   hierarchy via content for SEO. These rules mirror every
   visual style previously attached to the real heading tags.
   Real <hN> tags rendered from user content (article body,
   page content, SEO body block) still pick up their tag-based
   styling above — these aliases simply replicate it for divs.
   ========================================================= */
.h1, .h2, .h3, .h4, .h5, .h6{
  font-family:var(--font-sans);
  color:var(--ink);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 .5em;
  display:block;
}
.h1{font-size:clamp(40px,7vw,82px);font-weight:700}
.h2{font-size:clamp(32px,5vw,56px)}
.h3{font-size:clamp(22px,3vw,32px)}
.h4{font-size:clamp(18px,2vw,22px)}
.h5{font-size:1.1em}
.h6{font-size:1em}

/* Context-specific overrides — mirror every "[context] hN" rule above. */
.section-dark .h1, .section-dark .h2, .section-dark .h3, .section-dark .h4{color:#fff}
.section-head .h2{margin:0 0 14px}
.hero .h1 .ital{font-family:var(--font-serif);font-weight:400;font-style:italic;color:var(--ink)}
.svc-body .h3{margin:0;color:#fff;font-size:clamp(28px,3.5vw,42px);font-weight:700;letter-spacing:-.02em}
.svc-item.open .svc-body .h3{color:var(--accent)}
.card .body .h4{margin:0 0 10px;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.card .body .h4 a{color:var(--ink)}
.card .body .h4 a:hover{color:var(--ink-soft)}
.home-seo-card .h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;line-height:1.15}
.pf-card .pf-body .h4{font-size:16px;margin:0 0 6px;line-height:1.35}
.pf-card .pf-body .h4 a{color:var(--ink)}
.proc-card .h4{margin:0 0 4px;font-size:19px}
.proc-card:hover .h4, .proc-card.open .h4{color:#fff}
.cta-block .h2{font-size:clamp(40px,7vw,90px);margin:0 0 30px;letter-spacing:-.04em;color:#fff !important}
.cta-block .h2 .ital{color:var(--accent) !important}
.gallery-section .h3{margin-bottom:22px;display:flex;align-items:center;gap:10px}
.comments-section .h3{display:flex;align-items:center;gap:10px;margin-bottom:24px;font-size:24px}
.comment-form-wrap .h4{margin:0 0 6px;font-size:22px}
.footer-cta .h3{font-size:clamp(24px,3vw,38px);margin:0;color:#fff;letter-spacing:-.02em;line-height:1.15;max-width:680px}

/* Article-style page bodies — if someone uses the rendered look on a chrome block */
.article-content .h2{margin-top:1.6em;font-size:34px;letter-spacing:-.02em}
.article-content .h3{margin-top:1.4em;font-size:25px;letter-spacing:-.02em}
.article-content .h4{margin-top:1.2em;font-size:20px}

/* Responsive overrides */
@media (max-width:720px){
  .h2{font-size:clamp(26px,7vw,34px) !important}
  .svc-body .h3{font-size:24px}
  .proc-card .h4{font-size:17px}
  .cta-block .h2{font-size:clamp(34px,10vw,56px)}
  .post-card .h4{font-size:17px}
  .article-content .h2{font-size:26px}
  .article-content .h3{font-size:21px}
}
@media (max-width:420px){
  .h2{font-size:24px !important}
  .svc-body .h3{font-size:21px}
}
/* Post title used to live on <h1.post-title>; now lives on <div class="h1 post-title">.
   The inline @push('head') style in blog-single keeps the .post-title overrides intact. */

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#bdbdbd;padding:60px 0 0;margin-top:0;position:relative;overflow:hidden}
.site-footer .grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--line-dark);
}
.site-footer h5, .site-footer .h5{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 16px;font-weight:700}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:10px 0}
.site-footer a{color:#bdbdbd;font-size:14px}
.site-footer a:hover{color:var(--accent)}
.site-footer .contact-block address{font-style:normal;color:#bdbdbd;font-size:14px;line-height:1.7;margin-top:8px}

/* Footer contact block — phone / email / address with leading icons */
.footer-address{
  font-style:normal;color:#bdbdbd;font-size:14px;line-height:1.55;
  margin-top:16px;display:flex;flex-direction:column;gap:10px;
}
.footer-address .fa-row{
  display:flex;align-items:flex-start;gap:10px;
}
.footer-address .fa-row i{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--accent,#d4ff3a);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;margin-top:1px;
  transition:background .15s,color .15s;
}
.footer-address .fa-row:hover i{background:var(--accent,#d4ff3a);color:var(--ink)}
.footer-address .fa-row a{color:#cfcfcf;text-decoration:none;border-bottom:0}
.footer-address .fa-row a:hover{color:var(--accent,#d4ff3a)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;padding:22px 0;
  font-size:13px;color:#7a7a7a;border-bottom:1px solid var(--line-dark);
}
.footer-bottom a{color:#bdbdbd}
.socials{display:flex;gap:8px}
.socials a{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  transition:background .2s,color .2s;
}
.socials a:hover{background:var(--accent);color:var(--ink)}

/* Giant footer wordmark — SVG with viewBox = guaranteed fit at any viewport */
.brand-mega{
  display:block;width:100%;height:auto;
  margin:30px 0 -20px;
  user-select:none;pointer-events:none;
  /* Soft fade-in from bottom for visual balance */
  -webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.5) 100%);
          mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.5) 100%);
}

@media(max-width:900px){.site-footer .grid{grid-template-columns:1fr 1fr;gap:30px}.footer-bottom{flex-direction:column;gap:12px}}
@media(max-width:560px){.site-footer .grid{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.page-404{padding:120px 0;text-align:center}
.page-404 .num{font-size:clamp(120px,22vw,260px);font-weight:800;margin:0;color:var(--ink);letter-spacing:-.05em;line-height:.9}
.page-404 .num em{font-family:var(--font-serif);font-style:italic;color:var(--accent-dark);font-weight:400}
.page-404 p{font-size:18px;color:var(--muted);margin:14px 0 30px}

/* ---------- Mobile nav ---------- */
@media(max-width:1100px){
  .nav-toggle{display:block}
  .site-nav{
    position:fixed;top:78px;right:0;
    background:var(--cream);flex-direction:column;align-items:stretch;
    width:300px;height:calc(100vh - 78px);padding:24px;gap:6px;
    box-shadow:var(--shadow);transform:translateX(100%);
    transition:transform .25s ease;border-left:1px solid var(--line);
    z-index:70; /* above the sticky header (z-index:60) */
    overflow-y:auto;
  }
  .site-nav.open{transform:translateX(0)}
  .site-nav a{width:100%;padding:14px 18px;border-radius:12px}
  .site-nav a:not(.btn-cta)::after{display:none}
  .site-nav .btn-cta{margin-left:0;justify-content:center;margin-top:8px}
  /* Hide the split-style sub-navs entirely on mobile — they only exist for Style 2 desktop. */
  .site-nav.site-nav--left,
  .site-nav.site-nav--right{display:none !important}
}

/* ---------- Reveal animations (original behaviour; toggleable off via body class) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}
/* Master switch OFF — instantly show every element, no animation */
body.anim-off .reveal,
body.anim-off .reveal-stagger > *,
body.anim-off .reveal-stagger { opacity:1 !important; transform:none !important; transition:none !important; }
/* Specific reveal toggles OFF — same: force visible immediately */
body.anim-on:not(.anim-reveal) .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
body.anim-on:not(.anim-stagger) .reveal-stagger > * { opacity:1 !important; transform:none !important; transition:none !important; }

/* Smooth scroll for anchors when enabled */
body.anim-smooth { scroll-behavior: smooth; }
body.anim-smooth html { scroll-behavior: smooth; }

/* Image hover zoom (master gate — existing .card .thumb img already has transition) */
body:not(.anim-hover-img) .pf-card:hover .pf-thumb img,
body:not(.anim-hover-img) .card:hover .thumb img { transform: none !important; }

/* Magnetic buttons baseline transition (JS handles the translate) */
body.anim-magnetic .btn, body.anim-magnetic .btn-primary { transition: transform .25s cubic-bezier(.2,.8,.3,1), background .15s, color .15s; will-change: transform; }

/* Tilt baseline */
body.anim-tilt [data-tilt], body.anim-tilt .hero-illus { transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform; }

/* Reduced-motion always wins — fully respects OS-level a11y preference */
@media (prefers-reduced-motion:reduce){
  body.anim-on .reveal, body.anim-on .reveal-stagger > *, .marquee-track {
    animation:none!important; transition:none!important; opacity:1!important; transform:none!important;
  }
  body.anim-on { scroll-behavior: auto !important; }
}

/* =========================================================
   COMPREHENSIVE MOBILE RESPONSIVE
   Tablet ≤ 992px, Mobile ≤ 640px, Small mobile ≤ 420px
   ========================================================= */

/* TABLET (≤992px) */
@media (max-width: 992px) {
  :root{
    --section-y: clamp(50px, 8vw, 80px);
    --gap: clamp(18px, 4vw, 24px);
  }
  .site-header .inner{padding:14px 0;gap:12px}
  .header-side .phone{display:none}      /* Show only icon on tablet */
  .hero{padding:36px 0 60px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-img{aspect-ratio:5/4;max-width:560px;margin:0 auto;width:100%}
  .about-row{grid-template-columns:1fr;gap:36px}
  .about-img{aspect-ratio:1/1;max-width:560px;margin:0 auto;width:100%}
  .process{grid-template-columns:1fr;gap:30px}
  .section-head{margin-bottom:36px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
  .test-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .stats-grid{gap:14px 22px}
  .reviews-track > .test-card{flex:0 0 320px !important;width:320px !important;max-width:320px !important}
}

/* MOBILE (≤640px) */
@media (max-width: 640px) {
  body{font-size:15px}
  h1{font-size:clamp(34px, 9vw, 44px) !important}
  h2{font-size:clamp(26px, 7vw, 34px) !important}
  .container{padding:0 18px}
  .site-header .inner{padding:12px 0}
  .site-logo{font-size:17px;gap:8px}
  .site-logo .dot{width:30px;height:30px;font-size:13px}
  .hero{padding:24px 0 40px}
  .hero h1{margin:14px 0 16px}
  .hero p.lead{font-size:15px}
  .hero-actions .btn{padding:12px 22px;font-size:14px}
  .hero-img{aspect-ratio:4/3}
  .featured-img{aspect-ratio:4/3}
  .featured-img.blog-featured{aspect-ratio:1/1}
  .section-head{margin-bottom:28px}
  .section-head p{font-size:15px}
  .section-head.left{flex-direction:column;align-items:flex-start;gap:16px}
  .stat-cell .stat-num{font-size:32px}
  .stat-cell .stat-label{min-height:auto}
  .about-stats{padding:22px}
  .about-cta-row{flex-direction:column;align-items:flex-start;gap:14px}
  .svc-item{grid-template-columns:40px 1fr 36px;gap:14px;padding:20px 0}
  .svc-body h3{font-size:24px}
  .svc-body p{font-size:14px}
  .svc-toggle{width:36px;height:36px;font-size:14px}
  .proc-card{grid-template-columns:48px 1fr 40px;padding:18px;gap:14px}
  .proc-card h4{font-size:17px}
  .marquee-track span{font-size:20px;gap:30px}
  .marquee-track span::after{font-size:16px}
  .reviews-track > .test-card{flex:0 0 280px !important;width:280px !important;max-width:280px !important}
  .test-card{padding:20px}
  .test-card .quote{font-size:14px}
  .cta-block{padding:50px 22px;border-radius:18px}
  .cta-block h2{font-size:clamp(34px, 10vw, 56px)}
  .post-card .body{padding:18px}
  .post-card h4{font-size:17px}
  .archive-list,.section{padding:36px 0}
  .page-hero{padding:30px 0 18px}
  .breadcrumb{font-size:12px}
  .article-content{font-size:16px}
  .article-content h2{font-size:26px}
  .article-content h3{font-size:21px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .pagination a, .pagination span{min-width:36px;height:36px;font-size:13px}
  .newsletter{padding:36px 0}
  .newsletter h3{font-size:18px}
  .newsletter form{flex-direction:column;border-bottom:0;gap:10px}
  .newsletter input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:12px 14px}
  .newsletter button{align-self:flex-start;padding:6px 0}
  .site-footer{padding:48px 0 0}
  .site-footer .grid{grid-template-columns:1fr;gap:28px;padding-bottom:28px}
  .footer-bottom{padding:18px 0}
  .gallery-section{margin-top:36px;padding-top:28px}
  .post-meta{font-size:13px;gap:14px}
}

/* SMALL MOBILE (≤420px) */
@media (max-width: 420px) {
  .container{padding:0 14px}
  h1{font-size:30px !important}
  h2{font-size:24px !important}
  /* Stats stay 2-per-row even on small phones — tighter typography. */
  .stats-grid{grid-template-columns:1fr 1fr;gap:12px 14px}
  .stat-cell .stat-num{font-size:26px}
  .stat-cell .stat-icon{width:32px;height:32px;font-size:15px}
  .stat-cell .stat-label{font-size:11px;min-height:30px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-actions .btn{justify-content:center;width:100%}
  .svc-item{grid-template-columns:36px 1fr 32px;gap:10px}
  .svc-body h3{font-size:21px}
  .proc-card .num{font-size:16px}
  .reviews-track > .test-card{flex:0 0 260px !important;width:260px !important;max-width:260px !important}
  .test-card{padding:18px}
  .test-card .quote{font-size:13px;line-height:1.55}
  .cta-block{padding:40px 18px}
  .cat-pill{font-size:11px;padding:5px 12px}
  .header-side{gap:8px}
  .nav-toggle{width:38px;height:38px;font-size:21px}
}

/* MOBILE NAV: lower the breakpoint for the slide-in drawer */
@media (max-width: 640px) {
  .site-nav{top:64px;height:calc(100vh - 64px);width:84vw;max-width:320px}
}

/* MOBILE: keep logos prominent — still readable as a trust signal */
@media (max-width: 640px) {
  .logo-marquee{padding:14px 0 22px}
  .logo-marquee-track{gap:56px}
  .logo-marquee-track img{height:62px !important;max-width:200px !important}
  .logo-marquee-track.text-fallback .brand-text{font-size:20px}
  .logo-strip .label{font-size:13px;margin-bottom:18px}
  .logo-strip .label::before,
  .logo-strip .label::after{flex-basis:30px}
}
@media (max-width: 420px) {
  .logo-marquee-track{gap:44px}
  .logo-marquee-track img{height:56px !important;max-width:170px !important}
}

/* FOOTER WORDMARK — fit within container on mobile (SVG already scales but ensure parent doesn't overflow) */
.site-footer{overflow:hidden}
.site-footer .container{overflow:hidden}
.brand-mega{max-width:100%;display:block}
@media (max-width: 640px) {
  .brand-mega{margin:18px 0 -10px}
}

/* ---- Theme chrome (was inline in layout) ---- */

/* Compact title for inner pages (single blog, single page, single portfolio). */
.post-title, .page-title, .pf-title,
.article-hero h1, .article-wrap h1,
.article-hero .h1, .article-wrap .h1 {
  font-size: clamp(28px, 3.6vw, 46px) !important;
  line-height: 1.18 !important;
  margin: 0 0 18px !important;
}

/* ---------- Polish overrides ---------- */

/* 1) Footer mega-watermark — was taking ~220px of vertical space.
   Cap it to a tasteful strip and tighten margins. */
.brand-mega{
  max-height: 110px !important;
  margin-top: 20px !important;
  opacity: .9;
}

/* 2) About section image — remove the awkward L-shape clip-path,
   use a clean rounded rectangle that matches the rest of the cards. */
.about-img{
  clip-path: none !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow);
}
.about-img img{
  width: 100%; height: 100%; object-fit: cover;
}

/* 3) Portfolio cards on homepage — image titles inside screenshots
   can be noisy. Give cards a subtle hover lift. */
.card{ transition: transform .25s, box-shadow .25s; }
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }

/* 4) Service marquee — soften edge fade so partial text doesn't look cut. */
.marquee{
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

/* 5) Logo marquee — same edge fade. */
.logo-marquee{
  mask-image: linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
}

/* 6) Testimonial cards — soften the auto-scrolling row edges too. */
.reviews-marquee{
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

/* 7) Hero skill chips — small icon+label pills above the CTA buttons. */
.skill-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 26px;max-width:560px;
}
.skill-chips .chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:12.5px;font-weight:500;
  transition:all .2s;
}
.skill-chips .chip:hover{
  background:var(--ink);color:var(--accent);border-color:var(--ink);
  transform:translateY(-1px);
}
.skill-chips .chip i{font-size:14px;line-height:1}

/* ---- Trusted logos strip — admin-controlled height / gap (vars set inline in layout) ---- */
.logo-marquee-track{ gap: var(--logo-gap) !important; }
.logo-marquee-track img{
  height: var(--logo-h-desktop) !important;
  max-width: var(--logo-max-w) !important;
}
@media (max-width:768px){
  .logo-marquee-track img{ height: var(--logo-h-mobile) !important; }
}

/* ===== Post gallery (inserted via TinyMCE Gallery button) =====
   Renders a responsive grid of images inside blog/page/portfolio/product/category content. */
.post-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:28px 0;
}
.post-gallery.cols-2{ grid-template-columns:repeat(2,1fr); }
.post-gallery.cols-3{ grid-template-columns:repeat(3,1fr); }
.post-gallery.cols-4{ grid-template-columns:repeat(4,1fr); }
.post-gallery img{
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:10px;
    display:block;
    background:#f0f2f6;
    transition:transform .25s ease, box-shadow .25s ease;
}
.post-gallery img:hover{
    transform:scale(1.015);
    box-shadow:0 10px 24px -12px rgba(10,15,30,.25);
}
@media (max-width:760px){
    .post-gallery,
    .post-gallery.cols-3,
    .post-gallery.cols-4{ grid-template-columns:repeat(2,1fr); gap:8px; }
}
@media (max-width:420px){
    .post-gallery,
    .post-gallery.cols-2,
    .post-gallery.cols-3,
    .post-gallery.cols-4{ grid-template-columns:1fr; }
}