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

/* Font stack (Kaspersky-style single-family):
 *   Everything (headings + body + UI)  → Poppins (geometric humanist sans)
 *   Italic accents only                → Instrument Serif (for *emphasis* spans)
 *   Fallback stack                     → Manrope + Inter + system-sans + Playfair/Fraunces
 *                                        still preloaded via layout.php so older
 *                                        hardcoded refs degrade gracefully.
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&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:#e25604;        /* warm orange accent */
  --accent-dark:#a94b23;   /* deep terracotta for hover/shadow */
  --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);

  /* Kaspersky-style single family: Poppins for EVERYTHING (headings + body + UI).
   * --font-serif points to Poppins too so old .serif-italic / heading classes
   * still resolve — Instrument Serif kept as fallback for the italic-accent
   * spans (.ital-terra) that explicitly hardcode it.
   * Manrope + Inter kept as fallbacks in case Poppins fails to load. */
  --font-sans:'Poppins','Manrope','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-serif:'Poppins','Manrope','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;
  /* Use longhand top/bottom so .container's `padding: 0 var(--gap)`
     (left/right) is NOT wiped out by the shorthand. */
  padding-top:18px;padding-bottom:18px;gap:24px;
}
/* Mobile: container's clamp gives only 20px side padding at narrow widths,
   which makes the logo hug the viewport edge. Bump it inside the header only. */
@media (max-width:640px){
  .site-header > .container{padding-left:24px;padding-right:24px}
  .site-header .inner{gap:12px}
}
.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,#e25604);
  box-shadow:0 0 0 4px rgba(226,86,4,.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(226,86,4,.25)}
  50%{box-shadow:0 0 0 8px rgba(226,86,4,.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 — explicit right:auto so it never spans full width and eats
   clicks on the footer socials / copyright row underneath it. */
.wa-widget{position:fixed;left:22px;right:auto;bottom:22px;width:60px;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 !important;overflow:visible !important}
.home-seo-content.is-expanded::after,
.home-seo-content.no-fade::after{display:none !important}
.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(226,86,4,.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(226,86,4,.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,#e25604);
  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,#e25604);
  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,#e25604);
  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,#e25604);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,#e25604);
}

/* 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(226,86,4,.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:1px;text-underline-offset:3px}
.article-content a:hover{text-decoration-thickness:2px;color:var(--accent-dark)}
.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(226,86,4,.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(226,86,4,.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,#e25604);
  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,#e25604);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,#e25604)}
/* Legal horizontal strip — sits between trust-strip and footer-bottom */
.footer-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 14px;padding:22px 0 18px;
  border-top:1px solid var(--line-dark);
  font-family:'Inter',sans-serif;font-size:13px;
}
.footer-legal a{color:#bdbdbd;text-decoration:none;transition:color .15s}
.footer-legal a:hover{color:#e25604}
.footer-legal .sep{color:#4a4a4a;font-size:10px;line-height:1}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0 26px;
  font-size:13px;color:#7a7a7a;border-top:1px solid var(--line-dark);
}
.footer-bottom a{color:#bdbdbd}
.socials{display:flex;gap:8px;position:relative;z-index:2;pointer-events:auto}
.socials a{
  width:34px;height:34px;border-radius:50%;background:#f5efe4;color:#1a1a1a;
  border:1px solid #d9cfbc;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
  position:relative;z-index:2;pointer-events:auto;
}
.socials a:hover{background:var(--accent,#e25604);color:#fff;border-color:var(--accent,#e25604);transform:translateY(-2px)}
.socials a i{pointer-events:none}   /* click always goes to <a>, never to inner icon */
/* Make sure the whole footer-bottom row sits above any fixed FAB overlap zone */
.site-footer .footer-bottom{position:relative;z-index:3}

/* 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; }
}

/* ══════════════════════════════════════════════════════════════════
   HEADER — v1 clean override (2026-07)
   Flatten any style variant (pill / boxed / floating) to a
   single sleek glass sticky bar. Menu items, search icon,
   cart icon and CTA button all preserved.
   ══════════════════════════════════════════════════════════════════ */
.site-header,
.site-header.hdr-style-1,
.site-header.hdr-style-2,
.site-header.hdr-style-3,
.site-header.hdr-style-4,
.site-header.hdr-style-5,
.site-header.hdr-style-6,
.site-header.hdr-style-7,
.site-header.hdr-style-8 {
  position: sticky !important;
  top: 0 !important;
  z-index: 90;
  background: rgba(244, 242, 237, .82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
}
.site-header .inner,
.site-header.hdr-style-6 .inner,
.site-header.hdr-style-7 .inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Preserve .container's left/right padding (padding: 0 var(--gap)) —
     only override vertical padding via longhand. */
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
}
.site-header + * { margin-top: 0 !important; }

/* Logo — clean, tighter */
.site-header .site-logo { gap: 10px; font-size: 20px; }
.site-header .site-logo .logo-img { max-height: 40px; max-width: 200px; }

/* Nav — sleek pill inline links with underline reveal */
.site-header .site-nav {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 0;
}
.site-header .site-nav a:not(.btn-cta) {
  padding: 8px 14px;
  font-size: 14.5px; font-weight: 500;
  color: #333; letter-spacing: -0.005em;
  border-radius: 8px;
  transition: color .2s;
  position: relative;
}
.site-header .site-nav a:not(.btn-cta):hover { color: var(--ink); background: transparent; }
.site-header .site-nav a:not(.btn-cta)::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1.5px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.site-header .site-nav a:not(.btn-cta):hover::after { transform: scaleX(1); }

/* Right side — search + cart + CTA */
.site-header .header-side { gap: 10px; }
.site-header .nav-icon-btn,
.site-header .nav-cart {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.08);
  color: var(--ink);
  font-size: 16px;
  transition: all .25s ease;
}
.site-header .nav-icon-btn:hover,
.site-header .nav-cart:hover {
  background: var(--ink); color: #fff; border-color: var(--ink);
  transform: translateY(-1px);
}
.site-header .nav-cart .count {
  min-width: 18px; height: 18px;
  background: var(--accent); color: var(--ink);
  font-size: 10.5px; font-weight: 700;
  line-height: 18px; top: -3px; right: -3px;
}

/* CTA button — clean dark pill */
.site-header .header-side .btn {
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink);
  padding: 12px 22px;
  font-size: 14px; font-weight: 600;
  border-radius: 999px;
  gap: 8px;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.site-header .header-side .btn:hover {
  background: var(--accent); color: var(--ink); border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.25);
}
.site-header .header-side .btn .arr {
  width: 20px; height: 20px;
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.site-header .header-side .btn:hover .arr {
  background: rgba(0,0,0,.14); color: var(--ink);
}

/* Style-2 (centered): keep grid but with same aesthetic */
.site-header.hdr-style-2 .inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto !important;
  gap: 20px !important;
  align-items: center !important;
}
@media (max-width: 992px) {
  .site-header.hdr-style-2 .inner { grid-template-columns: 1fr auto auto !important; gap: 14px !important; }
}

/* Mobile — collapse cleanly, hide search icon + CTA text, keep cart + hamburger */
@media (max-width: 992px) {
  .site-header .site-nav {
    position: absolute; top: 100%; right: 16px; left: 16px;
    background: #fff; border: 1px solid var(--line);
    border-radius: 14px; padding: 14px; margin-top: 8px;
    flex-direction: column; align-items: stretch;
    box-shadow: 0 20px 40px -18px rgba(0,0,0,.14);
    display: none;
  }
  .site-header .site-nav.open { display: flex; }
  .site-header .site-nav a { padding: 12px 14px !important; border-radius: 10px; }
  .site-header .site-nav a::after { display: none !important; }
  .site-header .nav-toggle { display: inline-flex; }
}
@media (max-width: 700px) {
  .site-header .inner { padding-top: 12px !important; padding-bottom: 12px !important; gap: 12px !important; }
  .site-header .header-side .btn { display: none; }
  .site-header .site-logo .logo-img { max-height: 32px; max-width: 130px; }
}

/* ══════════════════════════════════════════════════════════════════
   STUDIO UPGRADE — sitewide 2026-07
   Palette: ink + grey (mono) · Font: Fraunces display + Instrument italic
   Progress bar + journal editorial cards
   ══════════════════════════════════════════════════════════════════ */

/* Scroll progress bar */
#uwdProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: #1a1a1a; z-index: 9998;
  transition: width .08s linear;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0,0,0,.15);
}

/* Sitewide type upgrade — mono palette */
body {
  color: #1a1a1a !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Poppins',sans-serif !important;
  color: #1a1a1a !important;
  font-weight: 500 !important;
  letter-spacing: -0.028em !important;
  font-variation-settings: 'SOFT' 30, 'opsz' 96;
}
h1, .h1 { font-variation-settings: 'SOFT' 40, 'opsz' 144; }

.ital, .italic-serif {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

p, li, span, small, div, label { color: inherit; }
.muted, .text-muted, small { color: #6c6255 !important; }

/* Journal (Recent Articles) editorial */
.journal-sec { background: transparent; }
.journal-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap; margin-bottom: 60px;
}
.journal-head .h2.journal-title {
  font-family: 'Poppins',sans-serif !important;
  font-size: clamp(52px, 8vw, 120px) !important;
  line-height: .95 !important;
  letter-spacing: -0.045em !important;
  font-weight: 500 !important;
  font-variation-settings: 'SOFT' 40, 'opsz' 144 !important;
  color: #1a1a1a !important;
  margin: 14px 0 0 !important;
}
.journal-head .journal-title .amp {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic; font-weight: 400;
  color: #1a1a1a;
  padding: 0 .05em;
  display: inline-block;
}
.journal-head .journal-title .ital-terra {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic; font-weight: 400;
  color: #c85c2e;
}
.journal-head .btn.journal-cta {
  border-radius: 999px;
  padding: 14px 28px;
  border: 1px solid #1a1a1a !important;
  background: transparent !important;
  color: #1a1a1a !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.journal-head .btn.journal-cta:hover {
  background: #1a1a1a !important; color: #fff !important;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px !important;
}
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr; gap: 44px !important; } }

.journal-card {
  display: flex !important; flex-direction: column;
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  padding: 0 !important;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  color: #1a1a1a !important; text-decoration: none !important;
}
.journal-card:hover { transform: translateY(-6px); }

.journal-thumb {
  aspect-ratio: 16/10;
  background: #ede4d3;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 22px;
  border: 0;
  position: relative;
}
.journal-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
  display: block;
}
.journal-card:hover .journal-thumb img { transform: scale(1.05); }

.journal-body { padding: 0 !important; }

.journal-meta {
  display: flex; align-items: center; gap: 18px;
  color: #6c6255; font-size: 13px;
  margin-bottom: 14px;
  font-family: 'Inter', sans-serif;
}
.journal-meta span { display: inline-flex; align-items: center; gap: 7px; }
.journal-meta i { opacity: .7; font-size: 13px; }

.journal-cat {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; font-weight: 700;
  color: #c85c2e;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 12px;
}

.journal-h3, .journal-card h3 {
  font-family: 'Poppins',sans-serif !important;
  font-size: clamp(22px, 2.3vw, 30px) !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: #1a1a1a !important;
  margin: 0 0 24px !important;
  font-variation-settings: 'SOFT' 30, 'opsz' 96;
  transition: color .25s;
}
.journal-card:hover .journal-h3 { color: #c85c2e !important; }

.journal-divider {
  height: 1px; background: #d9cfbc;
  margin: 0 0 18px !important; border: 0 !important;
}

.journal-read {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500;
  color: #1a1a1a !important;
  transition: gap .3s, color .25s;
  text-decoration: none;
}
.journal-read i { transition: transform .3s cubic-bezier(.22,1,.36,1); font-size: 14px; }
.journal-card:hover .journal-read { gap: 12px; color: #c85c2e !important; }
.journal-card:hover .journal-read i { transform: translate(3px, -3px); }

@media (max-width: 700px) {
  .journal-head { margin-bottom: 40px; }
  .journal-head .h2.journal-title { font-size: clamp(40px, 12vw, 68px) !important; }
}

/* ─── Work (Portfolio) cards — editorial rig
   Landscape thumb, top-anchored cover so we see the actual design (hero + nav)
   without the empty cream space. On hover we scroll to bottom, revealing the
   full length like flipping through a photo. ─── */
.work-sec { padding-top: 110px !important; }
@media (max-width: 900px) { .work-sec { padding-top: 70px !important; } }

.work-sec .work-thumb {
  aspect-ratio: 16/11 !important;
  background: #ede4d3;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 22px;
  padding: 0 !important;
  display: block;
}
.work-sec .work-thumb img {
  width: 100%; height: 100%;
  object-fit: cover !important;
  object-position: top center !important;
  transition: object-position 2.6s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1) !important;
  display: block;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* On hover the image scrolls down slowly — reveals the whole design */
.work-sec .work-card:hover .work-thumb img {
  object-position: bottom center !important;
}

/* Category tag color for portfolio — keep orange consistent */
.work-sec .journal-cat { color: #e25604 !important; }

/* ─── Related articles (blog single) — editorial style ─── */
.related-editorial { margin: 80px 0 40px; }
.related-editorial .related-head { margin-bottom: 40px; }
.related-editorial .related-head .h2.journal-title {
  font-size: clamp(38px, 5vw, 68px) !important;
  line-height: .98 !important;
  letter-spacing: -0.035em !important;
}
.related-editorial .related-grid-v2 {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px 26px !important;
}
@media (max-width: 900px) { .related-editorial .related-grid-v2 { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; } }
@media (max-width: 600px) { .related-editorial .related-grid-v2 { grid-template-columns: 1fr !important; } }
.related-editorial .journal-card .journal-h3 {
  font-size: 19px !important;
  line-height: 1.3 !important;
}
/* Related articles thumbs — FULL image, no cream padding (override .blog-idx-grid) */
.related-editorial .journal-thumb,
.related-editorial.blog-idx-grid .journal-thumb,
.related-editorial .blog-idx-grid .journal-thumb {
  padding: 0 !important;
  background: #ede4d3 !important;
  display: block !important;
}
.related-editorial .journal-thumb img,
.related-editorial.blog-idx-grid .journal-thumb img,
.related-editorial .blog-idx-grid .journal-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   MID-ARTICLE — "See it in Action" showcase (blog single)
   ══════════════════════════════════════════════════════════════════ */
.mid-showcase { margin: 40px 0; }
.mid-showcase .mid-showcase-inner {
  background: linear-gradient(155deg, #f5efe4 0%, #ede4d3 100%);
  border: 1px solid #d9cfbc;
  border-radius: 20px;
  padding: 30px;
  position: relative; overflow: hidden;
}
.mid-showcase .mid-showcase-inner::before {
  content: ""; position: absolute; top: -100px; right: -80px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(226,86,4,.08), transparent 65%);
  pointer-events: none;
}
.mid-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 12px;
  background: #fff; border: 1px solid #d9cfbc;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; color: #1a1a1a;
  font-family: 'Inter', sans-serif;
  margin-bottom: 8px;
  position: relative; z-index: 1;
}
.mid-pill i { color: #22c55e; font-size: 12px; }
.mid-sub {
  font-family: 'Inter', sans-serif;
  color: #6c6255 !important; font-size: 14px;
  margin: 6px 0 22px !important;
  position: relative; z-index: 1;
}

.mid-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 18px;
  position: relative; z-index: 1;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 1100px) { .mid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mid-grid { grid-template-columns: minmax(0, 1fr); } }
.mid-card { min-width: 0; }

.mid-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e5e3dd;
  border-radius: 12px;
  text-decoration: none !important;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .2s;
}
.mid-card:hover {
  transform: translateY(-2px);
  border-color: #1a1a1a;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.15);
}
.mid-thumb {
  width: 68px; height: 52px;
  border-radius: 8px; overflow: hidden;
  background: #f5efe4;
  position: relative; flex-shrink: 0;
}
.mid-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.mid-thumb-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #6c6255; font-size: 18px;
}
.mid-live {
  position: absolute; bottom: 4px; left: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px 2px 5px;
  background: #1a1a1a; color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  border-radius: 3px; font-family: 'Inter', sans-serif;
}
.mid-live .mid-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #22c55e;
  animation: pulse 2s infinite;
}
.mid-info { flex: 1; min-width: 0; }
.mid-name {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 600;
  color: #1a1a1a !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
  min-width: 0;
  max-width: 100%;
}
.mid-info { min-width: 0; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER — corporate wide layout (5 columns + brand)
   ══════════════════════════════════════════════════════════════════ */
.site-footer .grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1.15fr 1fr 1fr !important;
  gap: 40px 32px !important;
  padding: 60px 0 40px !important;
}
@media (max-width: 1200px) {
  .site-footer .grid { grid-template-columns: 2fr 1fr 1fr 1fr !important; }
  .site-footer .grid > *:nth-child(5), .site-footer .grid > *:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 900px)  { .site-footer .grid { grid-template-columns: 1fr 1fr !important; } .site-footer .grid > * { grid-column: auto !important; } }
@media (max-width: 500px)  { .site-footer .grid { grid-template-columns: 1fr !important; } }

.site-footer .grid .brand-block { padding-right: 20px; }
.site-footer .grid h5,
.site-footer .grid .h5 {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #6c6255 !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid #d9cfbc;
  display: inline-block;
  min-width: 100%;
}
.site-footer .grid ul { list-style: none; padding: 0; margin: 0; }
.site-footer .grid li { margin: 0 0 10px !important; }
.site-footer .grid a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  font-weight: 400 !important;
  display: inline-block;
  transition: color .2s;
  text-decoration: none !important;
  line-height: 1.5;
}
.site-footer .grid a:hover { color: #e25604 !important; }
/* NB: previous slide-in dash + text-shift hover animation removed by user request */
.site-footer .grid a::before { content: none; }

/* Brand block styling */
.site-footer .brand-block .brand-mark,
.site-footer .brand-block img.footer-logo {
  max-height: 44px !important; margin-bottom: 18px;
}
.site-footer .brand-block p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #333 !important;
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: 340px;
}

/* Footer bottom — corporate compact */
.site-footer .footer-bottom {
  border-top: 1px solid #d9cfbc !important;
  padding: 22px 0 !important;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
}
.site-footer .footer-bottom .copyright,
.site-footer .footer-bottom .credit {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #6c6255 !important;
}
.site-footer .footer-bottom a { color: #1a1a1a !important; }
.site-footer .footer-bottom a:hover { color: #e25604 !important; }

/* Certifications / badges strip (below columns, above bottom bar) */
.site-footer .trust-strip {
  border-top: 1px solid #d9cfbc;
  padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.site-footer .trust-strip .lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; font-weight: 600;
  color: #6c6255; letter-spacing: .12em; text-transform: uppercase;
}
.site-footer .trust-strip .badges {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: 'Inter', sans-serif; font-size: 12.5px; color: #333;
}
.site-footer .trust-strip .badges span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; background: #fff; border: 1px solid #d9cfbc; border-radius: 999px;
}
.site-footer .trust-strip .badges i { color: #e25604; font-size: 12px; }
.mid-cat {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; color: #6c6255 !important;
  margin-top: 2px;
}
.mid-go {
  width: 30px; height: 30px; border-radius: 50%;
  background: #1a1a1a; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.mid-card:hover .mid-go { transform: rotate(-45deg); }

.mid-more {
  display: inline-flex; align-items: center; gap: 6px;
  color: #1a1a1a !important;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 600;
  margin-bottom: 22px;
  text-decoration: none !important;
  transition: gap .25s, color .2s;
  position: relative; z-index: 1;
}
.mid-more:hover { gap: 10px; color: #e25604 !important; }

/* Bottom CTA card */
.mid-cta {
  background: #fff;
  border: 1px solid #e5e3dd;
  border-radius: 12px;
  padding: 18px 22px;
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  position: relative; z-index: 1;
}
@media (max-width: 700px) { .mid-cta { grid-template-columns: 1fr; } }

.mid-cta-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 700;
  color: #1a1a1a !important;
  margin-bottom: 4px;
  line-height: 1.35;
}
.mid-cta-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: #6c6255 !important;
  margin: 0 !important; line-height: 1.5;
}
.mid-cta-wa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  background: #25d366; color: #fff !important;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
  text-decoration: none !important;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
}
.mid-cta-wa:hover { background: #128c7e; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(37,211,102,.4); }
.mid-cta-wa i.bi-whatsapp { font-size: 17px; }
.mid-cta-wa i.bi-arrow-up-right { font-size: 13px; opacity: .8; }

/* ══════════════════════════════════════════════════════════════════
   MID-ARTICLE — "Services we offer" grid (blog single)
   ══════════════════════════════════════════════════════════════════ */
.bfb-services-v2 {
  margin: 32px 0 40px;
  background: #fff;
  border: 1px solid #e5e3dd;
  border-radius: 20px;
  padding: 30px;
}
.bfb-services-v2 .bfb-head { margin-bottom: 24px; }
.bfb-services-v2 .bfb-h {
  font-family: 'Poppins',sans-serif !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  margin: 10px 0 0 !important;
  font-variation-settings: 'SOFT' 30, 'opsz' 96;
}
.bfb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .bfb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .bfb-grid { grid-template-columns: 1fr; } }

.bfb-pill {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e3dd;
  border-radius: 14px;
  text-decoration: none !important;
  transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .2s, box-shadow .25s;
}
.bfb-pill:hover {
  transform: translateY(-2px);
  border-color: #1a1a1a;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.14);
}
.bfb-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: #f5efe4;
  color: #1a1a1a;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  border: 1px solid #d9cfbc;
  transition: all .3s;
}
.bfb-pill:hover .bfb-ico {
  background: #e25604; color: #fff; border-color: #e25604;
}
.bfb-lbl {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px; font-weight: 600;
  color: #1a1a1a !important;
  line-height: 1.3;
}
.bfb-arr {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #d9cfbc;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: #6c6255;
  flex-shrink: 0;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.bfb-pill:hover .bfb-arr {
  background: #1a1a1a; color: #fff; border-color: #1a1a1a; transform: rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════════
   SITEWIDE LIGHT-CREAM HERO CARDS (2026-07)
   Convert every dark hero/side-card across pages to warm cream —
   matches the Get-a-Quote look everywhere.
   ══════════════════════════════════════════════════════════════════ */
.contact-hero,
.tm-hero,
.careers-hero,
.sg-hero,
.md5-hero,
.qh-hero,
.hh-hero,
.tool-hero,
.recog-block,
.side-story,
.section-dark,
.section-dark.section,
.side-card.dark,
[class*="hero"][style*="var(--ink)"],
[style*="background:var(--ink)"] {
  background: #f5efe4 !important;
  color: #1a1a1a !important;
  border: 1px solid #d9cfbc !important;
  border-color: #d9cfbc !important;
}

/* About-Us hero (.ab-hero) — leave as-is, don't touch its background/photo.
   User confirmed the About page hero was already fine. */
.ab-hero { background: initial !important; color: inherit !important; border: 0 !important; }
.ab-hero .photo { background: var(--ink, #0a0a0a) !important; }
.ab-hero h1, .ab-hero h2, .ab-hero h3 { color: inherit !important; }

/* Kill the ::before glow on tool-hero (it used lime tint on navy — irrelevant on cream) */
.tool-hero::before { display: none !important; }

/* ── UNIVERSAL FORCE-BLACK — every child inside these cream cards ── */
.tool-hero, .tool-hero *,
.section-dark, .section-dark *,
.contact-hero, .contact-hero *,
.tm-hero, .tm-hero *,
.careers-hero, .careers-hero *,
.qh-hero, .qh-hero *,
.sg-hero, .sg-hero *,
.md5-hero, .md5-hero *,
.hh-hero, .hh-hero *,
.recog-block, .recog-block *,
.side-story, .side-story * {
  color: #1a1a1a !important;
}

/* But keep truly muted copy readable as grey, not pure ink */
.tool-hero p, .tool-hero .lead, .tool-hero .muted, .tool-hero small,
.section-dark p, .section-dark .lead, .section-dark .muted, .section-dark small,
.contact-hero p, .contact-hero .lead, .contact-hero .muted,
.tm-hero p, .tm-hero .lead, .tm-hero .muted, .tm-hero small,
.careers-hero p, .careers-hero .lead,
.qh-hero p, .qh-hero .lead,
.recog-block p, .side-story p {
  color: #333 !important;
}

/* Orange accent preserved for highlighted spans / numbers only */
.tool-hero .accent, .tool-hero code, .tool-hero em.accent, .tool-hero span.accent,
.section-dark .accent, .section-dark [style*="--accent"],
.tm-hero .stats .num, .qh-hero .n .accent,
.recog-block .accent, .side-story .accent {
  color: #e25604 !important;
}

/* Eyebrow pills */
.tool-hero .eyebrow, .section-dark .eyebrow,
.contact-hero .eyebrow, .tm-hero .eyebrow,
.careers-hero .eyebrow, .qh-hero .eyebrow,
.recog-block .eyebrow, .side-story .eyebrow {
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #d9cfbc !important;
}
.tool-hero .eyebrow i, .section-dark .eyebrow::before,
.contact-hero .eyebrow::before, .tm-hero .eyebrow::before {
  color: #e25604 !important;
  background: #22c55e !important;
}

/* Solid dark CTA buttons stay dark */
.tool-hero .btn, .tool-hero button:not(.eyebrow),
.section-dark .btn, .contact-hero .btn, .tm-hero .btn,
.careers-hero .btn, .qh-hero .btn {
  color: #fff !important;
}
.tool-hero .btn.btn-outline, .section-dark .btn.btn-outline,
.contact-hero .btn.btn-outline, .tm-hero .btn.btn-outline {
  color: #1a1a1a !important;
}
.tool-hero .btn.btn-outline:hover, .section-dark .btn.btn-outline:hover,
.contact-hero .btn.btn-outline:hover, .tm-hero .btn.btn-outline:hover {
  color: #fff !important;
}

/* All headings inside these cream cards */
.contact-hero h1, .contact-hero h2, .contact-hero h3, .contact-hero .h1, .contact-hero .h2, .contact-hero .h3,
.tm-hero h1, .tm-hero h2, .tm-hero h3, .tm-hero .h1, .tm-hero .h2, .tm-hero .h3,
.careers-hero h1, .careers-hero h2, .careers-hero .h1, .careers-hero .h2,
.sg-hero h1, .sg-hero h2, .sg-hero .h1, .sg-hero .h2,
.md5-hero h1, .md5-hero h2, .md5-hero .h1, .md5-hero .h2,
.qh-hero h1, .qh-hero h2, .qh-hero .h1, .qh-hero .h2,
.hh-hero h1, .hh-hero h2, .hh-hero .h1, .hh-hero .h2,
.recog-block h1, .recog-block h2, .recog-block h3, .recog-block .h1, .recog-block .h2, .recog-block .h3,
.side-story h1, .side-story h2, .side-story h3, .side-story .h1, .side-story .h2, .side-story .h3,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5,
.section-dark .h1, .section-dark .h2, .section-dark .h3, .section-dark .h4, .section-dark .h5,
.side-card.dark h1, .side-card.dark h2, .side-card.dark h3, .side-card.dark .h1, .side-card.dark .h2, .side-card.dark .h3 {
  color: #1a1a1a !important;
}

/* Body text inside these cards */
.contact-hero p, .contact-hero span, .contact-hero li, .contact-hero div,
.tm-hero p, .tm-hero span, .tm-hero li,
.careers-hero p, .careers-hero span, .careers-hero li,
.sg-hero p, .sg-hero span,
.md5-hero p, .md5-hero span,
.qh-hero p, .qh-hero span,
.hh-hero p, .hh-hero span,
.recog-block p, .recog-block span, .recog-block li,
.side-story p, .side-story span,
.section-dark p, .section-dark span, .section-dark li,
.side-card.dark p, .side-card.dark span, .side-card.dark li {
  color: #333 !important;
}

/* Muted / subtle text */
.section-dark .muted, .section-dark small,
.contact-hero small, .contact-hero .muted,
.tm-hero small, .tm-hero .muted,
.recog-block small, .side-story small {
  color: #6c6255 !important;
}

/* Eyebrow pills on cream cards — subtle ink chip */
.contact-hero .eyebrow, .tm-hero .eyebrow, .careers-hero .eyebrow,
.sg-hero .eyebrow, .md5-hero .eyebrow, .qh-hero .eyebrow, .hh-hero .eyebrow,
.recog-block .eyebrow, .side-story .eyebrow, .section-dark .eyebrow {
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #d9cfbc !important;
  padding: 6px 16px 6px 12px !important;
  border-radius: 999px !important;
}
.contact-hero .eyebrow::before, .tm-hero .eyebrow::before,
.careers-hero .eyebrow::before, .sg-hero .eyebrow::before,
.md5-hero .eyebrow::before, .qh-hero .eyebrow::before, .hh-hero .eyebrow::before,
.recog-block .eyebrow::before, .side-story .eyebrow::before, .section-dark .eyebrow::before {
  background: #22c55e !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
}

/* Big display numbers/text (hero stats) */
.contact-hero .tm-stat-n, .contact-hero .n,
.tm-hero .tm-stat-n, .tm-hero .n,
.careers-hero .n, .careers-hero .career-n,
.qh-hero .n, .qh-hero .stat-n, .qh-hero strong,
.recog-block .n, .recog-block strong,
.side-story .n, .side-story strong,
.section-dark .n, .section-dark strong {
  color: #1a1a1a !important;
}

/* Highlighted words that used to be lime/orange in dark cards — keep orange */
.contact-hero .accent, .tm-hero .accent,
.careers-hero .accent, .qh-hero .accent,
.recog-block .accent, .side-story .accent,
.section-dark .accent,
.section-dark [style*="color:var(--accent)"],
.recog-block [style*="color:var(--accent)"],
.side-story [style*="color:var(--accent)"] {
  color: #e25604 !important;
}

/* Buttons inside cream hero cards */
.contact-hero .btn, .tm-hero .btn, .careers-hero .btn,
.sg-hero .btn, .md5-hero .btn, .qh-hero .btn, .hh-hero .btn,
.recog-block .btn, .side-story .btn, .section-dark .btn,
.side-card.dark .btn {
  background: #1a1a1a !important;
  color: #fff !important;
  border-color: #1a1a1a !important;
}
.contact-hero .btn:hover, .tm-hero .btn:hover, .careers-hero .btn:hover,
.sg-hero .btn:hover, .md5-hero .btn:hover, .qh-hero .btn:hover, .hh-hero .btn:hover,
.recog-block .btn:hover, .side-story .btn:hover, .section-dark .btn:hover,
.side-card.dark .btn:hover {
  background: #e25604 !important;
  border-color: #e25604 !important;
  color: #fff !important;
}
.contact-hero .btn-outline, .tm-hero .btn-outline, .qh-hero .btn-outline {
  background: transparent !important;
  color: #1a1a1a !important;
  border-color: #1a1a1a !important;
}
.contact-hero .btn-outline:hover, .tm-hero .btn-outline:hover, .qh-hero .btn-outline:hover {
  background: #1a1a1a !important;
  color: #fff !important;
}
.contact-hero .btn-ghost, .tm-hero .btn-ghost {
  background: rgba(0,0,0,.05) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0,0,0,.1) !important;
}

/* Dividers/rules inside these cards */
.recog-block hr, .side-story hr,
.section-dark hr, .contact-hero hr, .tm-hero hr,
.careers-hero hr, .qh-hero hr {
  background: #d9cfbc !important;
  border-color: #d9cfbc !important;
}

/* Services accordion inside a now-cream .section-dark */
.section-dark .svc-item, .section-dark .svc-list { border-color: #d9cfbc !important; }
.section-dark .svc-item h4, .section-dark .svc-item .h4, .section-dark .svc-name { color: #1a1a1a !important; }
.section-dark .svc-item p, .section-dark .svc-desc { color: #6c6255 !important; }
.section-dark .svc-num, .section-dark .svc-item .num {
  color: #e25604 !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
}
.section-dark .svc-item .toggle {
  background: #fff !important; color: #1a1a1a !important;
  border: 1px solid #d9cfbc !important;
}
.section-dark .svc-item.open .toggle {
  background: #e25604 !important; color: #fff !important; border-color: #e25604 !important;
}
.section-dark .svc-item:hover .toggle { background: #f5efe4 !important; border-color: #d9cfbc !important; }
.section-dark .svc-item.open:hover .toggle { background: #e25604 !important; border-color: #e25604 !important; }

/* Footer CTA stays dark by design — user requested contrast band above footer */
.footer-cta {
  background: #1a1a1a !important;
  color: #fff !important;
  border: 0 !important;
}
.footer-cta h1, .footer-cta h2, .footer-cta h3, .footer-cta .h1, .footer-cta .h2, .footer-cta .h3 {
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════
   Mobile menu — clean, elegant, studio-style
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  /* Sticky header on mobile — allow the nav to slide down */
  .site-header { position: sticky !important; top: 0 !important; z-index: 100 !important; }

  /* Hamburger toggle always visible on mobile */
  .site-header .nav-toggle,
  .site-header .nav-toggle * {
    display: inline-flex !important;
    color: #1a1a1a !important;
  }

  /* Kill any full-screen dark drawer that leaked in from hdr-mobile-fullscreen */
  .site-header.hdr-mobile-fullscreen .site-nav,
  .site-header .site-nav {
    background: #f5efe4 !important;
    color: #1a1a1a !important;
    border: 1px solid #d9cfbc !important;
    border-radius: 20px !important;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.18) !important;
    padding: 18px 14px !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 12px !important; right: 12px !important;
    width: auto !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    display: none !important;
    animation: navSlideIn .3s cubic-bezier(.22,1,.36,1);
  }
  .site-header .site-nav.open { display: flex !important; }

  @keyframes navSlideIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Individual link styling on mobile menu */
  .site-header .site-nav a:not(.btn-cta) {
    color: #1a1a1a !important;
    font-family: 'Poppins',sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    text-align: left !important;
    background: transparent !important;
    transition: background .2s, color .2s;
  }
  .site-header .site-nav a:not(.btn-cta)::after {
    content: "→" !important;
    position: static !important;
    background: transparent !important;
    width: auto !important; height: auto !important;
    color: #6c6255 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    opacity: .5;
    transform: none !important;
    transition: opacity .2s, transform .2s;
  }
  .site-header .site-nav a:not(.btn-cta):hover,
  .site-header .site-nav a:not(.btn-cta):active {
    background: rgba(226,86,4,.06) !important;
    color: #e25604 !important;
  }
  .site-header .site-nav a:not(.btn-cta):hover::after,
  .site-header .site-nav a:not(.btn-cta):active::after {
    opacity: 1 !important;
    color: #e25604 !important;
    transform: translateX(3px) !important;
  }

  /* Start a project button inside the drawer */
  .site-header .site-nav .btn-cta.mobile-only,
  .site-header .site-nav .btn-cta {
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 16px 22px !important;
    border-radius: 999px !important;
    margin-top: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important; font-weight: 600 !important;
    text-align: center !important;
    gap: 8px !important;
  }
  .site-header .site-nav .btn-cta:hover { background: #e25604 !important; color: #fff !important; }
  .site-header .site-nav .btn-cta::after { display: none !important; }

  /* Hide the desktop side icons in the drawer when open — keep only the hamburger */
  .site-header .header-side { gap: 6px !important; }
  .site-header .header-side .btn { display: none !important; }
}

/* ─── Blog index (/blogs) thumbnails — full image, never cropped ─── */
.blog-idx-grid .journal-thumb {
  aspect-ratio: 16/10 !important;
  background: #ede4d3;
  padding: 20px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.blog-idx-grid .journal-thumb img {
  width: 100%; height: 100%;
  object-fit: contain !important;      /* NEVER crop — full image visible */
  object-position: center !important;
  transition: transform .5s cubic-bezier(.22,1,.36,1) !important;
  border-radius: 6px;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.12);
}
.blog-idx-grid .journal-card:hover .journal-thumb img { transform: scale(1.03) !important; }

@media (max-width: 700px) {
  .blog-idx-grid .journal-thumb { padding: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   ABOUT — inline stats row (no image, no box)
   ══════════════════════════════════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 60px;
  padding-top: 50px;
  border-top: 1px solid #d9cfbc;
}
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
@media (max-width: 500px) { .stats-row { grid-template-columns: 1fr; gap: 28px; } }

.stats-row-cell {
  display: flex; align-items: center; gap: 18px;
  padding-right: 20px;
  border-right: 1px solid rgba(217,207,188,.6);
}
.stats-row-cell:last-child { border-right: 0; }
@media (max-width: 900px) {
  .stats-row-cell:nth-child(2) { border-right: 0; }
}
@media (max-width: 500px) {
  .stats-row-cell { border-right: 0 !important; border-bottom: 1px solid rgba(217,207,188,.6); padding-bottom: 22px; }
  .stats-row-cell:last-child { border-bottom: 0; padding-bottom: 0; }
}

.stats-row-ico {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(226,86,4,.08);
  color: #e25604;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  border: 1px solid rgba(226,86,4,.15);
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.stats-row-cell:hover .stats-row-ico {
  background: #e25604; color: #fff; border-color: #e25604;
  transform: rotate(-6deg) scale(1.05);
}

.stats-row-num {
  font-family: 'Poppins',sans-serif !important;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #1a1a1a;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-variant-numeric: tabular-nums;
}
.stats-row-num span {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: #e25604;
  font-weight: 400;
  margin-left: 2px;
}

.stats-row-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: #6c6255;
  margin-top: 6px;
  letter-spacing: -0.005em;
  line-height: 1.35;
  max-width: 180px;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER — warm cream (studio palette), no more dark
   ══════════════════════════════════════════════════════════════════ */
.site-footer {
  background: #f5efe4 !important;
  color: #333 !important;
  border-top: 1px solid #d9cfbc !important;
  padding: 80px 0 0 !important;
}
.site-footer h5, .site-footer .h5 {
  color: #6c6255 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.site-footer .grid { border-bottom-color: #d9cfbc !important; }
.site-footer a { color: #1a1a1a !important; font-weight: 400 !important; }
.site-footer a:hover { color: #e25604 !important; }
.site-footer .contact-block address,
.site-footer address { color: #6c6255 !important; }

.footer-address { color: #333 !important; }
.footer-address .fa-row i {
  background: rgba(226,86,4,.08) !important;
  color: #e25604 !important;
  border: 1px solid rgba(226,86,4,.15);
}
.footer-address .fa-row:hover i {
  background: #e25604 !important;
  color: #fff !important;
  border-color: #e25604;
}
.footer-address .fa-row a { color: #1a1a1a !important; }
.footer-address .fa-row a:hover { color: #e25604 !important; }

.footer-bottom {
  color: #6c6255 !important;
  border-bottom-color: #d9cfbc !important;
  border-top: 1px solid #d9cfbc !important;
  margin-top: 20px;
}
.footer-bottom a { color: #1a1a1a !important; }
.footer-bottom a:hover { color: #e25604 !important; }

.site-footer .socials a {
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #d9cfbc !important;
}
.site-footer .socials a:hover {
  background: #e25604 !important;
  color: #fff !important;
  border-color: #e25604 !important;
}

/* Footer-CTA band (may sit above footer) — bring copy back to visible on cream */
.footer-cta {
  background: #1a1a1a !important;
  color: #fff !important;
}
.footer-cta h3, .footer-cta .h3 { color: #fff !important; }
.footer-cta .eyebrow.on-dark { color: rgba(255,255,255,.6) !important; }
.footer-cta .btn { background: #fff !important; color: #1a1a1a !important; border-color: #fff !important; }
.footer-cta .btn:hover { background: #e25604 !important; color: #fff !important; border-color: #e25604 !important; }
.footer-cta .btn .arr { background: #e25604 !important; color: #fff !important; }
.footer-cta .btn:hover .arr { background: #fff !important; color: #e25604 !important; }

/* ══════════════════════════════════════════════════════════════════
   DARK sections — force white text so it stays readable
   after the mono-ink palette override
   ══════════════════════════════════════════════════════════════════ */
.section-dark,
.section-dark p,
.section-dark span,
.section-dark li,
.section-dark div {
  color: #f5efe4 !important;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5,
.section-dark .h1, .section-dark .h2, .section-dark .h3, .section-dark .h4, .section-dark .h5 {
  color: #ffffff !important;
}
.section-dark .muted, .section-dark p, .section-dark small {
  color: rgba(245,239,228,.7) !important;
}

/* ── Blog Table of Contents — SEO snippet-eligible + UX (audit M8) ── */
.blog-toc {
  background: #f5efe4;
  border: 1px solid #d9cfbc;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 0 32px;
  max-width: 100%;
}
.blog-toc-head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  color: #6c6255;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 12px;
}
.blog-toc-head i { color: #e25604; font-size: 15px; }
.blog-toc-head span { flex: 1; }
.blog-toc-toggle {
  background: transparent; border: 0; cursor: pointer;
  color: #6c6255; font-size: 14px; padding: 4px 8px;
  transition: color .15s, transform .3s;
}
.blog-toc-toggle:hover { color: #e25604; }
.blog-toc.collapsed .blog-toc-toggle { transform: rotate(180deg); }
.blog-toc-list {
  list-style: none; padding: 0; margin: 0;
  counter-reset: toc;
}
.blog-toc.collapsed .blog-toc-list { display: none; }
.blog-toc-list li { margin: 0; padding: 0; counter-increment: toc; }
.blog-toc-list a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0;
  color: #1a1a1a; text-decoration: none;
  font-family: 'Inter', sans-serif; font-size: 14.5px;
  line-height: 1.5;
  transition: color .15s;
}
.blog-toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  color: #e25604; font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 15px; font-weight: 400;
  flex-shrink: 0; min-width: 24px;
}
.blog-toc-list a:hover { color: #e25604; }
.blog-toc-h3 { padding-left: 34px; }
.blog-toc-h3 a { font-size: 13.5px; color: #4a4a4a; }
.blog-toc-h3 a::before { display: none; }
/* Smooth scroll offset so H2s aren't hidden by sticky header */
.article-content h2, .article-content h3 { scroll-margin-top: 100px; }
/* "Updated" pill differentiates from "Published" */
.post-meta-line .meta-updated { color: #c2410c; font-weight: 600; }
.post-meta-line .meta-updated i { color: #e25604; }

/* ── Homepage hero trust badges — CTR + conversion boost (SEO audit H10) ── */
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid #d9cfbc;
  font-family: 'Inter', sans-serif; font-size: 12.5px; color: #4a4a4a;
  transition: border-color .18s, transform .18s;
}
.trust-badge:hover { border-color: #1a1a1a; transform: translateY(-1px); }
.trust-badge i { color: #e25604; font-size: 13.5px; }
.trust-badge strong { color: #1a1a1a; font-weight: 700; }
.trust-badge small { color: #6c6255; font-weight: 400; font-size: 11.5px; margin-left: 2px; }
.trust-badge-tm { background: #f5efe4; border-color: #d9cfbc; }
.trust-badge-tm strong { font-size: 11.5px; letter-spacing: .02em; }
@media (max-width: 640px) {
  .trust-badge { padding: 6px 11px; font-size: 11.5px; }
  .trust-badge small { display: none; }
}

/* ── Services accordion → linked service names (added when svc items link to /services/{slug}) ── */
.svc-h3-link { color: inherit !important; text-decoration: none !important; display: inline-block; transition: color .15s; }
.svc-h3-link:hover { color: #e25604 !important; }
.svc-learn-more {
  display: none;
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #e25604 !important;
  text-decoration: none !important;
  align-items: center; gap: 6px;
  transition: gap .18s;
}
.svc-learn-more i { font-size: 15px; }
.svc-learn-more:hover { gap: 10px; }
.svc-item.open .svc-learn-more { display: inline-flex; }

/* ══════════════════════════════════════════════════════════════════
   Services accordion — DARK NAVY palette (#2A3B4C bg, white text)
   NB: all selectors qualified with .section-dark.section for high enough
   specificity to beat the sitewide `.section-dark.section {cream !important}`
   override at line ~2872. Also removed border from that override.
   ══════════════════════════════════════════════════════════════════ */
section.section-dark.section.svc-section-navy,
.section-dark.section.svc-section-navy {
  background: #2A3B4C !important;
  color: #fff !important;
  border: 0 !important;
}
/* Undo the universal ".section-dark *{color:#1a1a1a!important}" inside this navy section */
.section-dark.section.svc-section-navy,
.section-dark.section.svc-section-navy * {
  color: #fff !important;
}
/* Section title + subtitle */
.section-dark.section.svc-section-navy .h2,
.section-dark.section.svc-section-navy h2 { color: #fff !important; }
.section-dark.section.svc-section-navy .section-head p {
  color: rgba(255,255,255,.72) !important;
}
/* Eyebrow pill (Services) */
.section-dark.section.svc-section-navy .eyebrow,
.section-dark.section.svc-section-navy .eyebrow.on-dark {
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
}
.section-dark.section.svc-section-navy .eyebrow::before { background: #e25604 !important; }

/* Accordion list borders */
.section-dark.section.svc-section-navy .svc-list { border-top:1px solid rgba(255,255,255,.12) !important; }
.section-dark.section.svc-section-navy .svc-item { border-bottom:1px solid rgba(255,255,255,.12) !important; }

/* Service name (real markup: .svc-body .h3) — WHITE serif */
.section-dark.section.svc-section-navy .svc-body h3,
.section-dark.section.svc-section-navy .svc-body .h3,
.section-dark.section.svc-section-navy .svc-item h4,
.section-dark.section.svc-section-navy .svc-item .h4,
.section-dark.section.svc-section-navy .svc-name {
  color: #fff !important;
  font-family: 'Poppins',sans-serif !important;
  font-weight: 500 !important;
}
/* Open item — orange highlight */
.section-dark.section.svc-section-navy .svc-item.open .svc-body h3,
.section-dark.section.svc-section-navy .svc-item.open .svc-body .h3 {
  color: #e25604 !important;
}
/* Linked service names + Learn more inside dark-navy variant */
.section-dark.section.svc-section-navy .svc-h3-link { color: #fff !important; text-decoration: none !important; }
.section-dark.section.svc-section-navy .svc-h3-link:hover { color: #e25604 !important; }
.section-dark.section.svc-section-navy .svc-item.open .svc-h3-link { color: #e25604 !important; }
.section-dark.section.svc-section-navy .svc-learn-more { color: #e25604 !important; }
.section-dark.section.svc-section-navy .svc-learn-more:hover { color: #ff7a3d !important; }
/* Descriptions — soft cream */
.section-dark.section.svc-section-navy .svc-item p,
.section-dark.section.svc-section-navy .svc-body p,
.section-dark.section.svc-section-navy .svc-desc {
  color: rgba(245,239,228,.78) !important;
}
/* Numbers 01, 02… — orange italic serif */
.section-dark.section.svc-section-navy .svc-num,
.section-dark.section.svc-section-navy .svc-item .num {
  color: #e25604 !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
}
/* Toggle circle — outlined on navy, orange when open */
.section-dark.section.svc-section-navy .svc-item .svc-toggle,
.section-dark.section.svc-section-navy .svc-item .toggle {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
.section-dark.section.svc-section-navy .svc-item:hover .svc-toggle,
.section-dark.section.svc-section-navy .svc-item:hover .toggle {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.4) !important;
}
.section-dark.section.svc-section-navy .svc-item.open .svc-toggle,
.section-dark.section.svc-section-navy .svc-item.open .toggle {
  background: #e25604 !important;
  color: #fff !important;
  border-color: #e25604 !important;
}

/* Eyebrow inside dark section — cream pill on dark bg */
.section-dark .eyebrow {
  color: rgba(245,239,228,.7) !important;
  background: rgba(255,255,255,.06);
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
}
.section-dark .eyebrow::before { background: #e25604 !important; }

/* Active/open service row toggle circle — orange with white icon */
.section-dark .svc-item .toggle,
.section-dark .svc-item.open .toggle {
  background: transparent !important;
  color: #f5efe4 !important;
  border: 1px solid rgba(255,255,255,.2) !important;
}
.section-dark .svc-item.open .toggle {
  background: #e25604 !important;
  color: #fff !important;
  border-color: #e25604 !important;
}
.section-dark .svc-item:hover .toggle {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.3) !important;
}
.section-dark .svc-item.open:hover .toggle {
  background: #e25604 !important;
  border-color: #e25604 !important;
}


/* ══════════════════════════════════════════════════════════════════
   KASPERSKY-STYLE HEADING TUNING — sleek, bold, tighter, smaller
   Applied AFTER all other rules so cascade wins without hunting each
   .h1/.h2/.h3 declaration site-wide. Uses !important sparingly on the
   properties Kaspersky's KL Gothic gets right: weight 700, tight
   letter-spacing, line-height 1.1, smaller clamp max sizes.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --heading-weight: 700;      /* Kaspersky uses ~700 bold, not 500 */
  --heading-tracking: -.03em; /* tighter than default -.025 */
  --heading-leading: 1.1;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hero h1, .hero .h1,
.section-head .h2, .section-head h2,
.svc-title, .soft-title, .pricing-h1,
.tool-related-title, .srv-title, .pricing-faqs-h2,
.journal-title, .about-title, .tm-title, .qh-h1, .sg-h1, .md5-h1 {
  font-weight: var(--heading-weight) !important;
  letter-spacing: var(--heading-tracking) !important;
  line-height: var(--heading-leading) !important;
}

/* Hero H1 — Kaspersky-style ~42-54px, not 82px */
.hero h1, .hero .h1,
.qh-h1, .sg-h1, .md5-h1, .tm-title {
  font-size: clamp(32px, 4vw, 52px) !important;
}

/* Section H2 — 30-42px, not 56px */
h2, .h2,
.section-head .h2, .section-head h2,
.svc-title, .soft-title,
.tool-related-title, .pricing-faqs-h2, .journal-title {
  font-size: clamp(26px, 3.2vw, 40px) !important;
}

/* Pricing hero H1 — same treatment */
.pricing-h1 {
  font-size: clamp(30px, 3.6vw, 46px) !important;
}

/* Service single hero H1 */
.srv-title {
  font-size: clamp(28px, 3.6vw, 44px) !important;
}

/* Sub-heads (H3) — 20-26px */
h3, .h3 {
  font-size: clamp(20px, 2.4vw, 26px) !important;
}

/* Italic accents (.ital, .ital-terra) inherit weight but keep italic + accent color */
.hero h1 .ital, .hero .h1 .ital,
.ital-terra {
  font-weight: 400 !important;
  letter-spacing: -.015em !important;
}

/* ══════════════════════════════════════════════════════════════════
   UNIVERSAL HEADING UNIFORMITY — catches every heading class variant
   sitewide (h1..h6 tags + .h1..h6 classes + brand-specific card names
   like .pricing-name, .srv-side-h, .soft-title, .pf-card h3 etc.).
   Guarantees the SAME Poppins bold + tight tracking + line-height
   everywhere — no inline weight:500 or old serif classes can leak.
   ══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
[class^="h1"], [class*=" h1"],
[class^="h2"], [class*=" h2"],
[class^="h3"], [class*=" h3"],
[class^="h4"], [class*=" h4"],
[class^="h5"], [class*=" h5"],
.pricing-name, .pricing-amount, .pricing-h1, .pricing-faqs-h2,
.srv-title, .srv-side-h,
.soft-title, .svc-title,
.tool-related-title,
.journal-title, .journal-h3, .journal-card h3,
.tm-title, .qh-h1, .sg-h1, .md5-h1,
.about-title, .section-head h2, .section-head .h2,
.pf-card h3, .card h3, .cta-block h2, .cta-block .h2,
.footer-cta h3, .footer-cta .h2, .footer-cta .h3 {
  font-family: 'Poppins','Manrope','Inter',sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
  font-style: normal;   /* kill any accidental italic on wrapper h-tags */
}

/* Italic accents keep italic + accent colour + lighter weight */
.hero h1 .ital, .hero .h1 .ital, .ital, .ital-terra,
.serif-italic, .journal-title .ital {
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: -.015em !important;
  font-family: 'Instrument Serif','Poppins',serif !important;
}

/* ══════════════════════════════════════════════════════════════════
   KASPERSKY-STYLE FOOTER — light bg, orange headings, small dark text
   Full override of dark-footer styling. Appended last so cascade wins.
   ══════════════════════════════════════════════════════════════════ */
.site-footer {
  background: #faf7ee !important;
  color: #2c2c2c !important;
  padding: 32px 0 20px !important;   /* was 60/24 with 40px margin — tightened */
  border-top: 1px solid #ece5d6 !important;
  margin-top: 0 !important;          /* flush against .footer-cta above */
}
.site-footer::before,
.site-footer::after { display: none !important; }   /* remove any dark decorations */

/* Column headings — Kaspersky green/orange accent, small, bold */
.site-footer h5,
.site-footer .h5,
.site-footer .grid .h5,
.site-footer .grid h5 {
  color: #e25604 !important;
  font-family: 'Poppins',sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  margin: 0 0 18px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  display: block !important;
  min-width: 0 !important;
}

/* Column links — dark, small, compact */
.site-footer .grid ul { list-style: none; padding: 0; margin: 0; }
.site-footer .grid li {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.site-footer a,
.site-footer .grid a {
  color: #2c2c2c !important;
  font-family: 'Poppins',sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  line-height: 1.5;
  transition: color .15s;
  display: inline-block !important;
}
.site-footer a:hover,
.site-footer .grid a:hover {
  color: #e25604 !important;
  transform: none !important;
}

/* Brand block (left column with logo + about + phone) */
.site-footer .brand-block .h5 { color: #1a1a1a !important; font-size: 16px !important; }
.site-footer .brand-block p {
  color: #4a4a4a !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  font-family: 'Poppins',sans-serif !important;
}
.site-footer .footer-address .fa-row {
  color: #2c2c2c !important;
  font-size: 13.5px !important;
}
.site-footer .footer-address .fa-row i {
  background: #fff !important;
  border: 1px solid #ece5d6 !important;
  color: #e25604 !important;
}
.site-footer .footer-address .fa-row a { color: #2c2c2c !important; }
.site-footer .footer-address .fa-row a:hover { color: #e25604 !important; }

/* Trust strip — light card */
.site-footer .trust-strip {
  background: #fff !important;
  border: 1px solid #ece5d6 !important;
  color: #4a4a4a !important;
}
.site-footer .trust-strip .lbl { color: #6c6255 !important; }
.site-footer .trust-strip .badges span {
  background: #faf7ee !important;
  border-color: #ece5d6 !important;
  color: #2c2c2c !important;
}
.site-footer .trust-strip .badges i { color: #e25604 !important; }

/* Legal strip — horizontal, small */
.site-footer .footer-legal {
  border-top: 1px solid #ece5d6 !important;
  padding: 18px 0 14px !important;
  font-size: 12.5px !important;
}
.site-footer .footer-legal a { color: #6c6255 !important; font-size: 12.5px !important; }
.site-footer .footer-legal a:hover { color: #e25604 !important; }
.site-footer .footer-legal .sep { color: #d3cbb8 !important; }

/* Footer-bottom row (copyright + socials) */
.site-footer .footer-bottom {
  background: transparent !important;
  border-top: 1px solid #ece5d6 !important;
  padding: 18px 0 6px !important;
  color: #6c6255 !important;
  font-size: 12.5px !important;
}
.site-footer .footer-bottom .copyright,
.site-footer .footer-bottom .copyright a { color: #6c6255 !important; font-size: 12.5px !important; }
.site-footer .footer-bottom .copyright a:hover { color: #e25604 !important; }
.site-footer .footer-bottom .credit { color: #6c6255 !important; }

/* Social icons — small circular buttons, cream bg → orange fill on hover */
.site-footer .socials { gap: 8px !important; }
.site-footer .socials a {
  width: 34px !important; height: 34px !important;
  background: #fff !important;
  border: 1px solid #ece5d6 !important;
  color: #2c2c2c !important;
  font-size: 14px !important;
}
.site-footer .socials a:hover {
  background: #e25604 !important;
  border-color: #e25604 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Kill giant footer wordmark if present */
.site-footer .brand-mega { display: none !important; }

@media (max-width: 900px) {
  .site-footer { padding: 40px 0 20px !important; }
  .site-footer .grid { gap: 24px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   JOURNAL "Notes & writings" heading — Kaspersky-style tune
   Override old serif italic + huge 120px display sizing.
   ══════════════════════════════════════════════════════════════════ */
.journal-head .h2.journal-title,
.related-editorial .related-head .h2.journal-title {
  font-family: 'Poppins','Manrope',sans-serif !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
  color: #1a1a1a !important;
  margin: 8px 0 0 !important;
  font-variation-settings: normal !important;
}
/* Ampersand + italic accent inside journal title — kill script serif,
   use Poppins consistent bold. Keep accent color for "writings". */
.journal-head .journal-title .amp,
.related-editorial .journal-title .amp {
  font-family: 'Poppins',sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  padding: 0 !important;
}
.journal-head .journal-title .ital-terra,
.related-editorial .journal-title .ital-terra {
  font-family: 'Poppins',sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: #e25604 !important;
}
/* Mobile — even smaller journal title */
@media (max-width: 700px) {
  .journal-head .h2.journal-title,
  .related-editorial .related-head .h2.journal-title {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER brand block — logo image instead of h5 text wordmark
   Sits at top of the "Udaipur Web Designer" column on light footer.
   ══════════════════════════════════════════════════════════════════ */
.site-footer .brand-block .footer-brand-logo {
  display: inline-block;
  margin: 0 0 16px !important;
  text-decoration: none !important;
  line-height: 1;
}
.site-footer .brand-block .footer-brand-logo img {
  height: 44px;
  width: auto;
  max-width: 200px;
  display: block;
  object-fit: contain;
  filter: none;                 /* logo is already dark-on-cream ready */
}
.site-footer .brand-block .footer-brand-logo .h5 {
  color: #1a1a1a !important;    /* fallback wordmark */
  font-family: 'Poppins',sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
/* Kill any stray h5 immediately after logo (there shouldn't be one) */
.site-footer .brand-block .footer-brand-logo + .h5 { display: none !important; }
@media (max-width: 700px) {
  .site-footer .brand-block .footer-brand-logo img { height: 38px; }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER SOCIALS — definitive Kaspersky-style alignment fix
   Consolidates positioning so "Follow Us" + 8 icons sit neatly on the
   right, wrap gracefully on narrow screens, and each icon glyph is
   perfectly centered inside its cream circle.
   ══════════════════════════════════════════════════════════════════ */

/* The wrapper that holds "Follow Us" label + .socials div */
.site-footer .footer-bottom > div:has(> .socials) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}
.site-footer .footer-bottom .credit {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #6c6255 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* The socials icon strip itself */
.site-footer .socials {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Individual social icon — 34x34 cream circle, dark glyph, orange hover */
.site-footer .socials a,
.site-footer .socials li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #ece5d6 !important;
  color: #2c2c2c !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background .18s, color .18s, border-color .18s, transform .18s !important;
  flex-shrink: 0 !important;
}
.site-footer .socials a:hover,
.site-footer .socials li a:hover {
  background: #e25604 !important;
  border-color: #e25604 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.site-footer .socials a i,
.site-footer .socials li a i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  vertical-align: middle !important;
}

/* Mobile — stack copyright above socials, right-align icons */
@media (max-width: 700px) {
  .site-footer .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .site-footer .footer-bottom > div:has(> .socials) {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }
  .site-footer .socials {
    justify-content: flex-start !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   TIGHTER SECTION SPACING — Kaspersky-style compact rhythm
   Original --section-y was clamp(70,9vw,120) — 120px is HUGE.
   New: clamp(40,5vw,72) — cuts vertical air ~40% while keeping breathing room.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --section-y: clamp(40px, 5vw, 72px) !important;
}
.section {
  padding: var(--section-y) 0 !important;
}

/* Home sections — many have hard-coded padding that overrides the token */
.clients-strip,
.home-clients,
.logos-strip,
.home-logos {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  margin: 0 !important;
}
.home-hero,
.hero,
.hero-section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.home-intro,
.intro-section,
.home-about {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
.stats,
.stats-section,
.home-stats {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  margin: 0 !important;
}
.services-section,
.svc-section-navy,
.svc-section,
.home-services {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  margin: 0 !important;
}
.testi-section,
.home-testi,
.testimonials-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.software-section,
.home-software,
.sd-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  margin: 0 !important;
}
.journal-section,
.home-journal,
.journal {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.home-seo {
  padding: 24px 0 32px !important;
}

/* Related / journal collapse the huge 80px external margin */
.related,
.related-editorial {
  padding: 60px 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Footer CTA band — was 60px, drop to 40px for compact Kaspersky feel */
.footer-cta {
  padding: 40px 0 !important;
}
.footer-cta .row {
  gap: 20px !important;
}

/* Container after CTA + before footer columns — kill accidental margin */
.footer-cta + .site-footer {
  padding-top: 44px !important;
}

/* View All / See more CTA button rows — reduce top spacing */
.svc-section + section,
.home-testi + section,
.software-section + section {
  margin-top: 0 !important;
}

/* Universal — kill any orphan margin > 60px on immediate home children */
body.home main > section,
.home-page main > section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  :root { --section-y: clamp(32px, 6vw, 56px) !important; }
  .services-section, .svc-section-navy, .svc-section,
  .home-services, .software-section, .home-software,
  .testi-section, .home-testi, .journal-section, .home-journal {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .footer-cta { padding: 32px 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER-CTA → FOOTER gap kill — flush black band into cream footer.
   ══════════════════════════════════════════════════════════════════ */
.footer-cta {
  padding: 34px 0 !important;   /* was 40px — even tighter */
  margin: 0 !important;
  border-bottom: 0 !important;
}
.footer-cta + .site-footer {
  margin-top: 0 !important;
  padding-top: 32px !important;
}
/* Any wrapper/section between them — reset */
.footer-cta + * { margin-top: 0 !important; }
/* Kill any body/layout padding that might leak between them */
main + .footer-cta,
main + footer,
.footer-cta { margin-bottom: 0 !important; }

@media (max-width: 700px) {
  .footer-cta { padding: 26px 0 !important; }
  .site-footer { padding-top: 26px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   KASPERSKY ALIGNMENT PASS — buttons + backgrounds + content font
   Adopts Kaspersky's chunky rectangular button style, subtle gradient
   hero backgrounds, and refined content typography — while preserving
   the site's orange brand palette (not switching to Kaspersky green).
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. BUTTONS — Kaspersky rectangular chunky style ─────────────
   Kaspersky uses 4-6px radius (not fully pill), bold 14-15px text,
   solid single-color fill, 14-16px vertical padding, no border.
*/
.btn,
.btn-primary,
.btn-outline,
.btn-light,
.btn-ghost,
a.btn,
button.btn,
.hero .btn,
.pricing-cta,
.srv-btn,
.footer-cta .btn,
.tm-cta,
.svc-cta-btn,
.home-hero-cta,
.wc-info a.btn,
.tool-cta {
  border-radius: 6px !important;
  padding: 14px 24px !important;
  font-family: 'Poppins', 'Manrope', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-width: 0 !important;
  line-height: 1.2 !important;
  gap: 8px !important;
  transition: background .18s, color .18s, transform .18s, box-shadow .18s !important;
}

/* Primary — solid orange, white text, subtle lift on hover */
.btn:not(.btn-outline):not(.btn-light):not(.btn-ghost):not(.btn-secondary),
.btn-primary,
.pricing-cta,
.srv-btn-primary,
.footer-cta .btn,
.hero .btn:first-of-type,
.tool-cta.primary {
  background: #e25604 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 0 0 #b83e00 !important;   /* Kaspersky-style baseline shadow */
}
.btn:not(.btn-outline):not(.btn-light):not(.btn-ghost):not(.btn-secondary):hover,
.btn-primary:hover,
.pricing-cta:hover,
.srv-btn-primary:hover,
.footer-cta .btn:hover {
  background: #c74a00 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 0 #a03600 !important;
}

/* Outline / secondary — thin border, dark text, fill on hover */
.btn-outline,
.btn-light,
.btn-secondary,
.srv-btn-ghost {
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #d9cfbc !important;
}
.btn-outline:hover,
.btn-light:hover,
.btn-secondary:hover,
.srv-btn-ghost:hover {
  background: #1a1a1a !important;
  color: #fff !important;
  border-color: #1a1a1a !important;
  transform: translateY(-1px) !important;
}

/* Ghost — for dark backgrounds (footer CTA area) */
.btn-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}
.btn-ghost:hover {
  background: #fff !important;
  color: #1a1a1a !important;
  border-color: #fff !important;
}

/* Kill the round arrow pill inside .btn .arr — Kaspersky doesn't use it */
.btn .arr {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  margin-left: 4px !important;
}
.btn:hover .arr { transform: none !important; background: transparent !important; }

/* Header "Start a project" — same chunky style */
.header-cta,
.site-nav a.btn,
a.header-project-btn {
  border-radius: 6px !important;
  padding: 11px 20px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.header-cta:hover { background: #e25604 !important; color: #fff !important; }

/* ─── 2. BACKGROUND — subtle gradient wash in hero (Kaspersky style) ─
   Kaspersky hero has a mint-green wash. We use warm cream + orange tint
   to stay on-brand, but with the same soft top gradient feel.
*/
body {
  background: #faf7ee !important;
  color: #1a1a1a !important;
}
/* Homepage hero — subtle warm gradient wash top-down */
.home-hero,
.hero,
body.home main > section:first-child {
  background: linear-gradient(180deg, #fff4ea 0%, #faf7ee 100%) !important;
  border-bottom: 0 !important;
}

/* Card sections — clean white with subtle border (Kaspersky pattern) */
.pricing-card,
.tool-related-card,
.related-editorial .journal-card,
.testi-card,
.svc-card,
.software-card {
  background: #fff !important;
  border: 1px solid #ece5d6 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color .18s, transform .18s, box-shadow .18s !important;
}
.pricing-card:hover,
.tool-related-card:hover,
.related-editorial .journal-card:hover,
.svc-card:hover,
.software-card:hover {
  border-color: #1a1a1a !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.15) !important;
}

/* Section dividers — softer, Kaspersky-clean */
.section,
main > section {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* ─── 3. CONTENT FONT — Kaspersky-clean body typography ────────────
   Body text 15.5-16px, tight -0.005em tracking, line-height 1.65
   Poppins already loaded — just refine sizing/tracking.
*/
body,
p, li, td, th, .article-content,
.hero p, .home-hero p, .srv-sub,
.pricing-tag, .tool-related-name,
.footer-address, address {
  font-family: 'Poppins', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  letter-spacing: -.005em !important;
  color: #1a1a1a !important;
}
p { margin: 0 0 14px !important; }
.article-content p,
.srv-content p { font-size: 16px !important; line-height: 1.7 !important; color: #2c2c2c !important; }

/* Small text / meta captions */
.eyebrow, .credit, .footer-address, .breadcrumb,
.pricing-period, .tool-related-eyebrow, .srv-eyebrow {
  font-size: 12.5px !important;
  letter-spacing: .02em !important;
}

/* Links inline — Kaspersky uses subtle underline + brand color */
.article-content a,
.srv-content a,
p a {
  color: #e25604 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
}
.article-content a:hover, .srv-content a:hover, p a:hover {
  color: #1a1a1a !important;
  text-decoration-thickness: 2px !important;
}

/* Small-screen button + font tweaks */
@media (max-width: 700px) {
  .btn, .btn-primary, .btn-outline, .pricing-cta, .srv-btn {
    padding: 12px 20px !important;
    font-size: 14px !important;
    width: auto !important;
  }
  body, p, li { font-size: 15px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   WHATSAPP → LEFT · BACK-TO-TOP → RIGHT (bottom corners layout)
   Ensure no other rule overrides these positions.
   ══════════════════════════════════════════════════════════════════ */
.wa-widget {
  left: 22px !important;
  right: auto !important;
  bottom: 22px !important;
}
.wa-widget .wa-panel {
  left: 0 !important;
  right: auto !important;
  transform-origin: bottom left !important;
}
/* Panel arrow points LEFT-down now instead of right-down (visual polish) */
.wa-widget .wa-bubble::before {
  left: -6px !important;
  right: auto !important;
}
.back-to-top {
  right: 22px !important;
  left: auto !important;
  bottom: 22px !important;
}
/* Mobile stacking safety */
@media (max-width: 600px) {
  .wa-widget { left: 18px !important; bottom: 18px !important; }
  .back-to-top { right: 18px !important; bottom: 18px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   DARK SECTION TEXT COLOR RESTORE
   Previous Kaspersky-alignment block set `body, p, li { color: #1a1a1a !important }`
   universally, which flattened text inside dark navy sections (about-unsplash,
   ab-award, section-dark, svc-section-navy, footer-cta, etc.). Restore white
   text descendants for these known dark backgrounds with high specificity.
   ══════════════════════════════════════════════════════════════════ */
.ab-unsplash,
.ab-unsplash *,
.ab-award,
.ab-award *,
.section-dark,
.section-dark *,
.svc-section-navy,
.svc-section-navy *,
.footer-cta,
.footer-cta *,
.srv-hero.is-dark,
.srv-hero.is-dark *,
.hero-dark,
.hero-dark *,
.page-404,
.page-404 * {
  color: #fff;
}

/* Explicit — headings + h/text elements inside dark wrappers stay white */
.ab-unsplash h1, .ab-unsplash h2, .ab-unsplash h3, .ab-unsplash h4, .ab-unsplash h5, .ab-unsplash h6,
.ab-unsplash .h1, .ab-unsplash .h2, .ab-unsplash .h3,
.ab-award h1, .ab-award h2, .ab-award h3, .ab-award h4, .ab-award h5, .ab-award h6,
.ab-award .h1, .ab-award .h2, .ab-award .h3,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6,
.section-dark .h1, .section-dark .h2, .section-dark .h3,
.svc-section-navy h1, .svc-section-navy h2, .svc-section-navy h3,
.svc-section-navy .h1, .svc-section-navy .h2, .svc-section-navy .h3,
.footer-cta h1, .footer-cta h2, .footer-cta h3, .footer-cta h4,
.footer-cta .h1, .footer-cta .h2, .footer-cta .h3 {
  color: #fff !important;
}

/* Paragraphs inside dark sections — light off-white (not pure white for readability) */
.ab-unsplash p, .ab-unsplash li, .ab-unsplash td,
.ab-award p, .ab-award li,
.section-dark p, .section-dark li,
.svc-section-navy p, .svc-section-navy li,
.footer-cta p, .footer-cta li {
  color: #d7d3cc !important;
}

/* Muted small text inside dark sections */
.ab-unsplash .lead,
.ab-unsplash .stat-label,
.ab-award .org,
.section-dark .lead,
.svc-section-navy .lead {
  color: #bdbdbd !important;
}

/* Pill/tag chips inside dark sections — dark-transparent bg, light text */
.ab-unsplash .chip,
.ab-unsplash .pill,
.ab-unsplash .tag,
.section-dark .chip,
.section-dark .pill {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

/* Stat numbers inside dark sections — bright white bold */
.ab-unsplash .stat-num,
.ab-unsplash .stat-value,
.ab-unsplash strong,
.ab-award .year,
.section-dark .stat-num,
.svc-section-navy .stat-num {
  color: #fff !important;
}

/* Orange accent text inside dark sections stays orange */
.ab-unsplash .accent,
.ab-unsplash .ital-terra,
.ab-unsplash a,
.ab-award .ribbon,
.ab-award p strong,
.section-dark .accent,
.svc-section-navy .accent {
  color: #e25604 !important;
}
/* Eyebrow pills on dark bg */
.ab-unsplash .eyebrow,
.ab-award .eyebrow,
.section-dark .eyebrow,
.svc-section-navy .eyebrow {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PORTFOLIO + BLOG CARD TITLES — smaller, sleeker
   Card titles were rendering huge (~30-44px) because .journal-h3 uses
   an outdated large clamp + universal heading pass added weight/tracking.
   Reduce to clean Kaspersky-style ~18-22px range for card grids.
   ══════════════════════════════════════════════════════════════════ */
.journal-h3,
.journal-card h3,
.journal-card .journal-h3,
.work-card .journal-h3,
.pf-card .h4, .pf-card h4,
.blog-card h3, .blog-card .h3,
.blog-idx-grid .journal-h3,
.related-editorial .journal-h3 {
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.3 !important;
  letter-spacing: -.02em !important;
  font-weight: 600 !important;
  margin: 0 0 14px !important;
  font-variation-settings: normal !important;
}

/* Card meta / client line — smaller too */
.journal-meta,
.journal-card .journal-meta,
.pf-card .client,
.blog-card .meta {
  font-size: 12.5px !important;
  color: #6c6255 !important;
  margin: 0 0 12px !important;
}

/* Category eyebrow (VILLA / ECOMMERCE / etc.) — tight small caps */
.journal-cat {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #e25604 !important;
  margin-bottom: 10px !important;
}

/* View project link — smaller inline */
.journal-read {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Card body padding tighter for smaller titles */
.journal-body,
.pf-card .pf-body {
  padding: 22px 24px 22px !important;
}

/* Journal grid gap — tighten a touch */
.journal-grid,
.work-grid,
.blog-idx-grid {
  gap: 24px !important;
}

@media (max-width: 700px) {
  .journal-h3, .journal-card h3,
  .pf-card .h4, .blog-card h3 {
    font-size: clamp(16px, 4vw, 19px) !important;
    margin: 0 0 10px !important;
  }
  .journal-body { padding: 18px 20px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   PAGE HERO / TITLE SECTIONS — center-align description text
   Portfolio / Blog / Testimonials / Contact / Careers / Quote pages
   all use a centered header block. Make sure the description <p>
   is text-centered too (not just the max-width block centered).
   ══════════════════════════════════════════════════════════════════ */

/* Any header/hero section that already has text-align:center on wrapper
   — force its direct child <p> descriptions to inherit that centering. */
section > header[style*="text-align:center"] p,
section > header[style*="text-align: center"] p,
.page-hero p,
.pf-hero p,
.blog-hero p,
.tm-hero p,
.contact-hero p,
.careers-hero p,
.quote-hero p,
.resources-hero p,
.page-title-block p,
header.centered p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Also ensure the eyebrow pill + H1 + subtitle stay visually centered */
section > header[style*="text-align:center"] .eyebrow,
section > header[style*="text-align: center"] .eyebrow,
.page-hero .eyebrow,
.pf-hero .eyebrow,
.blog-hero .eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════════
   UWD DESIGN SYSTEM — v1.0 (FINAL CASCADE LAYER)
   
   Single unified design system enforced sitewide. Every page, every
   component, every heading, every button, every card must comply.
   Appended LAST so cascade wins without hunting through legacy rules.
   
   TOKENS → COMPONENTS → PAGE PATTERNS → RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ 1. DESIGN TOKENS (CSS variables) ═══════════ */
:root {
  /* — Typography scale — */
  --ds-font-sans: 'Poppins', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-serif: 'Instrument Serif', Georgia, serif;         /* italic accents only */
  --ds-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ds-fs-h1: clamp(32px, 4vw, 52px);
  --ds-fs-h2: clamp(26px, 3.2vw, 40px);
  --ds-fs-h3: clamp(20px, 2.4vw, 26px);
  --ds-fs-h4: clamp(18px, 2vw, 22px);
  --ds-fs-h5: 16px;
  --ds-fs-h6: 14px;
  --ds-fs-body: 15.5px;
  --ds-fs-lead: 17px;
  --ds-fs-small: 13.5px;
  --ds-fs-caption: 12.5px;

  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semi: 600;
  --ds-fw-bold: 700;

  --ds-lh-heading: 1.15;
  --ds-lh-body: 1.65;
  --ds-lh-tight: 1.3;

  --ds-ls-heading: -.03em;
  --ds-ls-body: -.005em;
  --ds-ls-caps: .08em;

  /* — Colors (brand + neutrals) — */
  --ds-brand: #e25604;        /* primary orange */
  --ds-brand-dark: #b83e00;
  --ds-brand-hover: #c74a00;
  --ds-brand-tint: #fdece2;

  --ds-ink: #1a1a1a;          /* body text */
  --ds-ink-2: #2c2c2c;
  --ds-muted: #6c6255;
  --ds-muted-2: #8b8071;

  --ds-cream: #faf7ee;         /* page background */
  --ds-cream-2: #f5efe4;
  --ds-line: #ece5d6;          /* borders */
  --ds-line-2: #d9cfbc;
  --ds-white: #ffffff;

  --ds-dark: #1a1a1a;          /* dark section bg */
  --ds-dark-2: #2a3b4c;

  /* — Spacing scale — */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-space-section: clamp(40px, 5vw, 72px);
  --ds-space-section-sm: clamp(32px, 4vw, 56px);

  /* — Border radius — */
  --ds-radius-sm: 6px;
  --ds-radius: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 20px;
  --ds-radius-pill: 999px;

  /* — Shadows — */
  --ds-shadow-sm: 0 2px 4px -1px rgba(0,0,0,.05);
  --ds-shadow: 0 8px 20px -8px rgba(0,0,0,.12);
  --ds-shadow-lg: 0 16px 40px -12px rgba(0,0,0,.18);
  --ds-shadow-btn: 0 2px 0 0 var(--ds-brand-dark);

  /* — Motion — */
  --ds-transition: .18s cubic-bezier(.4,0,.2,1);
  --ds-transition-slow: .3s cubic-bezier(.4,0,.2,1);
  --ds-hover-lift: -2px;

  /* — Layout — */
  --ds-container: min(1240px, 100% - 40px);
  --ds-container-narrow: min(880px, 100% - 40px);
}

/* ═══════════ 2. TYPOGRAPHY ═══════════ */

html { -webkit-text-size-adjust: 100%; }

body,
main,
.container,
article, section, aside {
  font-family: var(--ds-font-sans) !important;
  color: var(--ds-ink);
}

/* Body text */
body, p, li, td, th, dd, dt,
address, blockquote, figcaption, .lead {
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-fs-body) !important;
  line-height: var(--ds-lh-body) !important;
  letter-spacing: var(--ds-ls-body) !important;
  color: var(--ds-ink);
}

/* Paragraphs — consistent margin */
p { margin: 0 0 var(--ds-space-4) !important; }
p:last-child { margin-bottom: 0 !important; }

/* Lead paragraph */
.lead, .hero p:first-of-type, .page-hero p:first-of-type {
  font-size: var(--ds-fs-lead) !important;
  line-height: 1.55 !important;
  color: var(--ds-ink-2) !important;
}

/* Headings — unified scale */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--ds-font-sans) !important;
  font-weight: var(--ds-fw-bold) !important;
  line-height: var(--ds-lh-heading) !important;
  letter-spacing: var(--ds-ls-heading) !important;
  color: var(--ds-ink);
  font-style: normal !important;
  margin: 0 0 var(--ds-space-4) !important;
  font-variation-settings: normal !important;
}

h1, .h1 { font-size: var(--ds-fs-h1) !important; }
h2, .h2 { font-size: var(--ds-fs-h2) !important; }
h3, .h3 { font-size: var(--ds-fs-h3) !important; }
h4, .h4 { font-size: var(--ds-fs-h4) !important; }
h5, .h5 { font-size: var(--ds-fs-h5) !important; letter-spacing: -.01em !important; }
h6, .h6 { font-size: var(--ds-fs-h6) !important; letter-spacing: .04em !important; text-transform: uppercase !important; }

/* Heading spacing rhythm — before + after */
h1 + p, .h1 + p,
h2 + p, .h2 + p,
h3 + p, .h3 + p { margin-top: var(--ds-space-3) !important; }
* + h2, * + .h2 { margin-top: var(--ds-space-6) !important; }
* + h3, * + .h3 { margin-top: var(--ds-space-5) !important; }
* + h4, * + .h4 { margin-top: var(--ds-space-4) !important; }

/* Small text / captions */
small, .small, .caption, figcaption,
.eyebrow, .credit, .breadcrumb,
.meta, .date, .stat-label {
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-fs-caption) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--ds-ls-caps) !important;
  color: var(--ds-muted);
}

/* Lists — consistent indentation + spacing */
ul, ol {
  padding-left: 24px !important;
  margin: 0 0 var(--ds-space-4) !important;
}
li { margin: 0 0 var(--ds-space-2) !important; }
li:last-child { margin-bottom: 0 !important; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
/* Reset list style inside layout structures (nav, footer, buttons, etc.) */
nav ul, nav ol,
footer .socials, footer .grid ul,
.pf-cat-block ul, .pagination,
.h1 + ul.reset, .pricing-features,
.tool-related-grid, .journal-grid,
.srv-feature-list, .filter-bar,
.sd-list, .services-list {
  list-style: none !important;
  padding-left: 0 !important;
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--ds-brand) !important;
  padding: var(--ds-space-4) var(--ds-space-5) !important;
  margin: var(--ds-space-5) 0 !important;
  background: var(--ds-cream-2) !important;
  border-radius: 0 var(--ds-radius) var(--ds-radius) 0 !important;
  font-style: normal !important;
  color: var(--ds-ink-2) !important;
}
blockquote p { margin: 0 !important; font-size: var(--ds-fs-body) !important; }

/* Inline text */
strong, b { font-weight: var(--ds-fw-bold) !important; color: inherit; }
em, i { font-style: italic; }
code, kbd, samp, pre {
  font-family: var(--ds-font-mono) !important;
  font-size: .92em !important;
}
code {
  background: var(--ds-cream-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ds-brand-dark);
}

/* Links inline */
p a, li a, td a, .article-content a {
  color: var(--ds-brand) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  transition: color var(--ds-transition), text-decoration-thickness var(--ds-transition);
}
p a:hover, li a:hover, .article-content a:hover {
  color: var(--ds-ink) !important;
  text-decoration-thickness: 2px !important;
}
/* Nav/menu/button links — no underline */
nav a, .btn, .header-cta,
.footer-legal a, .site-footer a,
.breadcrumb a, .pagination a,
.socials a, .pricing-cta,
.tool-related-card, .journal-card,
.pf-card, .journal-read {
  text-decoration: none !important;
}

/* ═══════════ 3. BUTTONS (unified system) ═══════════ */
.btn,
button.btn,
a.btn,
.btn-primary,
.btn-outline,
.btn-light,
.btn-ghost,
.btn-secondary,
.pricing-cta,
.srv-btn,
.tool-cta,
.svc-cta-btn,
.footer-cta .btn,
.hero-actions a,
.form-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ds-space-2) !important;
  height: 46px !important;
  padding: 0 var(--ds-space-5) !important;
  border-radius: var(--ds-radius-sm) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: 14.5px !important;
  font-weight: var(--ds-fw-semi) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background var(--ds-transition), color var(--ds-transition), transform var(--ds-transition), box-shadow var(--ds-transition), border-color var(--ds-transition) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Primary (solid orange) */
.btn:not(.btn-outline):not(.btn-light):not(.btn-ghost):not(.btn-secondary):not(.btn-dark),
.btn-primary,
.pricing-cta,
.srv-btn-primary,
.footer-cta .btn,
.tool-cta.primary,
button[type="submit"].btn {
  background: var(--ds-brand) !important;
  color: var(--ds-white) !important;
  box-shadow: var(--ds-shadow-btn) !important;
}
.btn:not(.btn-outline):not(.btn-light):not(.btn-ghost):not(.btn-secondary):not(.btn-dark):hover,
.btn-primary:hover,
.pricing-cta:hover,
.srv-btn-primary:hover,
.footer-cta .btn:hover,
.tool-cta.primary:hover,
button[type="submit"].btn:hover {
  background: var(--ds-brand-hover) !important;
  color: var(--ds-white) !important;
  transform: translateY(var(--ds-hover-lift)) !important;
  box-shadow: 0 3px 0 0 var(--ds-brand-dark), 0 6px 14px -6px rgba(226,86,4,.4) !important;
}

/* Secondary / Outline / Light */
.btn-outline,
.btn-light,
.btn-secondary,
.srv-btn-ghost {
  background: var(--ds-white) !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line-2) !important;
  box-shadow: none !important;
}
.btn-outline:hover,
.btn-light:hover,
.btn-secondary:hover,
.srv-btn-ghost:hover {
  background: var(--ds-ink) !important;
  color: var(--ds-white) !important;
  border-color: var(--ds-ink) !important;
  transform: translateY(var(--ds-hover-lift)) !important;
}

/* Dark (used in header) */
.btn-dark, .header-cta {
  background: var(--ds-ink) !important;
  color: var(--ds-white) !important;
  border: 0 !important;
}
.btn-dark:hover, .header-cta:hover {
  background: var(--ds-brand) !important;
  color: var(--ds-white) !important;
  transform: translateY(var(--ds-hover-lift)) !important;
}

/* Ghost (dark backgrounds) */
.btn-ghost {
  background: transparent !important;
  color: var(--ds-white) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}
.btn-ghost:hover {
  background: var(--ds-white) !important;
  color: var(--ds-ink) !important;
  border-color: var(--ds-white) !important;
}

/* Button sizes */
.btn-sm { height: 38px !important; padding: 0 var(--ds-space-4) !important; font-size: 13px !important; }
.btn-lg { height: 54px !important; padding: 0 var(--ds-space-6) !important; font-size: 16px !important; }

/* Kill legacy arrow pill inside .btn .arr */
.btn .arr, .btn i {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transform: none !important;
}
.btn:hover .arr, .btn:hover i { background: transparent !important; transform: none !important; }

/* ═══════════ 4. CARDS (unified) ═══════════ */
.pricing-card,
.tool-related-card,
.journal-card,
.pf-card,
.blog-card,
.tm-card,
.svc-card,
.software-card, .sd-card,
.tool, .ab-tools .tool,
.related-editorial .journal-card,
.card,
.rvw-card,
.faq-card,
.wc-card, .sg-tool, .sg-info, .wc-info,
.ab-info-card, .ab-side {
  background: var(--ds-white) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-lg) !important;
  padding: var(--ds-space-5) !important;
  box-shadow: none !important;
  transition: border-color var(--ds-transition), transform var(--ds-transition), box-shadow var(--ds-transition) !important;
}
.pricing-card:hover,
.tool-related-card:hover,
.journal-card:hover,
.pf-card:hover,
.blog-card:hover,
.tm-card:hover,
.svc-card:hover,
.software-card:hover, .sd-card:hover,
.tool:hover, .ab-tools .tool:hover,
.related-editorial .journal-card:hover {
  border-color: var(--ds-ink) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--ds-shadow) !important;
}

/* ═══════════ 5. FORMS ═══════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
select, textarea {
  font-family: var(--ds-font-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  height: 46px !important;
  padding: 0 var(--ds-space-4) !important;
  background: var(--ds-white) !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line-2) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition) !important;
}
textarea {
  height: auto !important;
  min-height: 120px !important;
  padding: var(--ds-space-3) var(--ds-space-4) !important;
  resize: vertical !important;
}
input:focus, select:focus, textarea:focus {
  outline: 0 !important;
  border-color: var(--ds-brand) !important;
  box-shadow: 0 0 0 3px rgba(226,86,4,.15) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--ds-muted-2) !important;
  opacity: 1 !important;
}
label {
  display: block !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-fs-caption) !important;
  font-weight: var(--ds-fw-semi) !important;
  color: var(--ds-ink) !important;
  margin-bottom: var(--ds-space-2) !important;
  letter-spacing: .02em !important;
}
.form-row, .field-row, .form-group {
  margin-bottom: var(--ds-space-4) !important;
}
input[type="checkbox"], input[type="radio"] {
  width: 16px !important; height: 16px !important;
  accent-color: var(--ds-brand) !important;
  margin-right: var(--ds-space-2) !important;
  vertical-align: middle !important;
}

/* Validation states */
input.is-invalid, textarea.is-invalid, select.is-invalid,
.error input, .error textarea {
  border-color: #dc2626 !important;
}
.field-error, .error-msg {
  color: #dc2626 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* ═══════════ 6. SPACING / SECTIONS ═══════════ */
.section,
main > section {
  padding: var(--ds-space-section) 0 !important;
}
.container {
  width: var(--ds-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.container-narrow { width: var(--ds-container-narrow) !important; margin: 0 auto !important; }

/* Row/column gap standardization */
.grid, .row, .cards, .cards-grid,
.journal-grid, .tool-related-grid,
.pricing-grid, .sd-list,
.filter-bar, .hero-actions,
.footer-legal, .socials {
  gap: var(--ds-space-5) !important;
}

/* ═══════════ 7. HEADER ═══════════ */
.site-header {
  background: var(--ds-cream) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  padding: 14px 0 !important;
}
.site-nav a,
.site-header nav a {
  font-family: var(--ds-font-sans) !important;
  font-size: 14.5px !important;
  font-weight: var(--ds-fw-medium) !important;
  color: var(--ds-ink) !important;
  padding: 8px 14px !important;
  border-radius: var(--ds-radius-sm) !important;
  transition: color var(--ds-transition), background var(--ds-transition) !important;
}
.site-nav a:hover,
.site-header nav a:hover {
  color: var(--ds-brand) !important;
  background: transparent !important;
}
.site-nav a.active,
.site-header nav a.active {
  color: var(--ds-brand) !important;
  font-weight: var(--ds-fw-semi) !important;
}
.site-logo img,
.logo-img { height: 34px !important; width: auto !important; }

/* ═══════════ 8. FOOTER ═══════════ */
.site-footer .h5,
.site-footer h5 {
  font-family: var(--ds-font-sans) !important;
  font-size: 14px !important;
  font-weight: var(--ds-fw-bold) !important;
  color: var(--ds-brand) !important;
  letter-spacing: -.005em !important;
  margin-bottom: var(--ds-space-4) !important;
  text-transform: none !important;
}
.site-footer ul { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.site-footer ul li { margin: 0 0 var(--ds-space-2) !important; }
.site-footer ul li a {
  font-family: var(--ds-font-sans) !important;
  font-size: 13.5px !important;
  color: var(--ds-ink-2) !important;
  line-height: 1.5 !important;
  transition: color var(--ds-transition) !important;
}
.site-footer ul li a:hover { color: var(--ds-brand) !important; }

/* ═══════════ 9. IMAGES ═══════════ */
img { max-width: 100%; height: auto; }
.journal-thumb img,
.pf-thumb img,
.blog-thumb img,
.tm-avatar img {
  border-radius: var(--ds-radius-lg) !important;
  transition: transform var(--ds-transition-slow) !important;
}
.journal-card:hover .journal-thumb img,
.pf-card:hover .pf-thumb img,
.blog-card:hover .blog-thumb img {
  transform: scale(1.03) !important;
}
/* Aspect ratios — enforce consistency */
.journal-thumb, .pf-thumb, .blog-thumb {
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  border-radius: var(--ds-radius-lg) !important;
  background: var(--ds-cream-2) !important;
}
.journal-thumb img, .pf-thumb img, .blog-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ═══════════ 10. ICONS ═══════════ */
[class^="bi-"], [class*=" bi-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
  line-height: 1 !important;
}
.eyebrow i, .credit i, .breadcrumb i { font-size: 12px !important; }
.btn i, .btn [class^="bi-"] { font-size: 15px !important; }

/* Icon-in-pill (colored square background — used in tool cards, sd cards, etc.) */
.tool-related-icon, .tool .ico, .sd-card .ico,
.svc-icon, .software-icon, .fa-row i {
  background: var(--ds-brand-tint) !important;
  color: var(--ds-brand-dark) !important;
  width: 40px !important; height: 40px !important;
  border-radius: var(--ds-radius) !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  transition: background var(--ds-transition), color var(--ds-transition) !important;
}
.tool-related-card:hover .tool-related-icon,
.tool:hover .ico,
.sd-card:hover .ico {
  background: var(--ds-brand) !important;
  color: var(--ds-white) !important;
}

/* ═══════════ 11. ANIMATIONS (unified motion) ═══════════ */
a, button, .btn,
.card, .pricing-card, .pf-card, .journal-card,
.blog-card, .tm-card, .tool, .sd-card,
input, select, textarea,
.socials a, .filter-bar a {
  transition-duration: .18s !important;
  transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
}

/* Hover lift standardization */
.card:hover, .pricing-card:hover, .pf-card:hover,
.journal-card:hover, .blog-card:hover, .tm-card:hover,
.tool:hover, .sd-card:hover, .btn:hover {
  transform: translateY(var(--ds-hover-lift)) !important;
}

/* ═══════════ 12. ACCESSIBILITY ═══════════ */
:focus-visible {
  outline: 2px solid var(--ds-brand) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* Skip-to-content link (if used) */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--ds-ink); color: var(--ds-white);
  padding: 8px 16px; z-index: 9999;
}
.skip-link:focus { top: 0; }

/* ═══════════ 13. PAGE HERO (unified centered pattern) ═══════════ */
section > header[style*="text-align:center"],
section > header[style*="text-align: center"],
.page-hero, .pf-hero, .blog-hero,
.tm-hero, .contact-hero, .careers-hero,
.quote-hero, .resources-hero, .pricing-hero,
.md5-hero, .qh-hero, .sg-hero, .tm-title-wrap {
  text-align: center !important;
  padding: var(--ds-space-7) 0 var(--ds-space-5) !important;
}
section > header[style*="text-align:center"] .eyebrow,
.page-hero .eyebrow, .pf-hero .eyebrow,
.blog-hero .eyebrow, .tm-hero .eyebrow,
.pricing-hero .pricing-eyebrow {
  margin: 0 auto var(--ds-space-3) !important;
  display: inline-flex !important;
}
section > header[style*="text-align:center"] p,
.page-hero p, .pf-hero p, .blog-hero p,
.tm-hero p, .contact-hero p, .careers-hero p {
  text-align: center !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: var(--ds-fs-lead) !important;
  line-height: 1.55 !important;
  color: var(--ds-ink-2) !important;
}

/* Eyebrow pills — unified */
.eyebrow, .pricing-eyebrow, .srv-eyebrow,
.tool-related-eyebrow, .tool-hero .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-white) !important;
  border: 1px solid var(--ds-line-2) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-fs-caption) !important;
  font-weight: var(--ds-fw-semi) !important;
  color: var(--ds-ink) !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}
.eyebrow::before, .eyebrow i:first-child {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ds-brand);
  flex-shrink: 0;
}
.eyebrow i:first-child { content: none; }
.eyebrow i { color: var(--ds-brand) !important; font-size: 12px !important; }

/* Breadcrumb — unified */
.breadcrumb {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ds-space-2) !important;
  padding: 0 !important;
  margin: var(--ds-space-4) 0 var(--ds-space-3) !important;
  list-style: none !important;
  font-size: var(--ds-fs-caption) !important;
  color: var(--ds-muted) !important;
}
.breadcrumb li { margin: 0 !important; }
.breadcrumb a { color: var(--ds-muted) !important; text-decoration: none !important; }
.breadcrumb a:hover { color: var(--ds-brand) !important; }

/* ═══════════ 14. RESPONSIVE SCALING ═══════════ */
@media (max-width: 900px) {
  :root {
    --ds-fs-h1: clamp(28px, 5vw, 42px);
    --ds-fs-h2: clamp(22px, 4.5vw, 32px);
    --ds-fs-h3: 20px;
    --ds-fs-body: 15px;
    --ds-fs-lead: 16px;
    --ds-space-section: clamp(32px, 6vw, 56px);
  }
  .btn, .btn-primary, .btn-outline, .pricing-cta {
    height: 44px !important;
    padding: 0 var(--ds-space-4) !important;
    font-size: 14px !important;
  }
  input, select, textarea { font-size: 15px !important; }  /* prevent iOS auto-zoom */
}
@media (max-width: 600px) {
  :root {
    --ds-fs-h1: clamp(26px, 6vw, 34px);
    --ds-fs-h2: clamp(20px, 5vw, 26px);
    --ds-space-section: 40px;
  }
  .container { width: calc(100% - 32px) !important; }
  .journal-grid, .pricing-grid,
  .tool-related-grid, .sd-list {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════ 15. UTILITY OVERRIDES (kill inconsistencies) ═══════════ */
/* Remove random shadows on random elements */
.pf-card, .journal-card, .blog-card,
.tool-related-card, .tool, .sd-card {
  filter: none !important;
}
/* Remove random text-shadows */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a { text-shadow: none !important; }

/* Remove all-caps hero shouting */
.hero h1, .hero .h1, .pf-hero h1, .blog-hero h1 {
  text-transform: none !important;
}

/* Consistent hr divider */
hr, .divider {
  border: 0 !important;
  height: 1px !important;
  background: var(--ds-line) !important;
  margin: var(--ds-space-5) 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER-CTA EYEBROW pill text visibility fix.
   The dark-section text restore rule (.footer-cta * { color:#fff })
   was ALSO whitening the .eyebrow pill's text — which sits on a
   WHITE pill background. Result: white-on-white = invisible.
   Force eyebrow inside footer-cta back to dark text on light pill.
   ══════════════════════════════════════════════════════════════════ */
.footer-cta .eyebrow,
.footer-cta .eyebrow.on-dark,
.footer-cta .eyebrow *,
.footer-cta span.eyebrow {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* The orange dot indicator (::before or first icon inside) */
.footer-cta .eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #e25604 !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   FILTER BAR (portfolio Browse-by-category) — tighten gap.
   The DS grid-standard 24px is too much for a category pill bar.
   Override back to a compact 6-10px so pills sit close together.
   ══════════════════════════════════════════════════════════════════ */
.filter-bar {
  gap: 8px !important;
  row-gap: 10px !important;
}
.filter-bar a {
  padding: 6px 14px !important;
  font-size: 13px !important;
  height: auto !important;   /* undo 46px control height from DS */
}
.pf-cat-block {
  margin-top: 20px !important;
  padding-top: 24px !important;
}

/* ══════════════════════════════════════════════════════════════════
   INPUT RESET inside CHROMED WRAPPERS
   Design-system universal input rule was drawing a bordered 46px
   rectangle inside pill/rounded wrappers (portfolio search, cart qty,
   header search, tool inputs). Reset those to seamless transparent
   fields so only the wrapper's shape is visible.
   ══════════════════════════════════════════════════════════════════ */
.pf-search input,
.pf-search input[type="search"],
.pf-search input[type="text"],
.header-search input,
.hs-input,
.cart-line .qty input,
.qty input,
.co-item input,
.search-modal input,
.uwd-search input,
.wc-card textarea,
.sg-tool input,
.sg-tool textarea,
.tool-hero input,
.tool-hero textarea,
.coupon input,
.cart-summary .coupon input,
.co-form input[type="text"],
.co-form input[type="email"],
.co-form input[type="tel"],
.co-form textarea,
.tool input,
.tool textarea {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  height: auto !important;
  box-shadow: none !important;
  padding: 12px 4px !important;
  border-radius: 0 !important;
}

/* But keep proper focus glow ONLY on the outer wrapper — not the input */
.pf-search input:focus,
.header-search input:focus,
.coupon input:focus,
.qty input:focus {
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Coupon input specifically — keep it inside its pill/rounded box with subtle bg */
.cart-summary .coupon input,
.coupon input {
  background: var(--cream, #f5efe4) !important;
  border: 1px solid var(--line, #ece5d6) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  height: 40px !important;
}
.cart-summary .coupon input:focus,
.coupon input:focus {
  border-color: var(--ds-brand, #e25604) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(226,86,4,.12) !important;
}

/* Cart qty box — small inline stepper, no border rectangle around number */
.cart-line .qty input,
.qty input {
  width: 44px !important;
  text-align: center !important;
  padding: 6px 0 !important;
  font-size: 14px !important;
  height: auto !important;
}

/* Checkout form inputs — those DO want the visible field style. Restore. */
.co-form input[type="text"],
.co-form input[type="email"],
.co-form input[type="tel"],
.co-form textarea {
  border: 1px solid var(--line, #ece5d6) !important;
  background: var(--cream, #faf9f6) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  height: auto !important;
  min-height: 44px !important;
}
.co-form textarea { min-height: 90px !important; }
.co-form input:focus, .co-form textarea:focus {
  border-color: var(--ds-brand, #e25604) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(226,86,4,.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   BLOG CATEGORY + BLOG INDEX card grid — force 3-col max desktop,
   2 tablet, 1 mobile. Override huge h2 titles (DS was pushing 40px).
   ══════════════════════════════════════════════════════════════════ */
.blog-grid,
section .blog-grid[style],
.blog-idx-grid,
.category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 30px 0 40px !important;
}
@media (max-width: 900px) {
  .blog-grid, .blog-idx-grid, .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}
@media (max-width: 560px) {
  .blog-grid, .blog-idx-grid, .category-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Blog card title — CATEGORY PAGE h2 was inheriting DS 40px, force back small */
.blog-grid .blog-card h2,
.blog-grid .blog-card .h2,
.blog-grid article h2,
.blog-idx-grid .blog-card h2,
.blog-grid .blog-card h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 8px !important;
  color: #1a1a1a !important;
}
.blog-grid .blog-card p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #6c6255 !important;
  margin: 0 0 8px !important;
}
.blog-grid .blog-card img {
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  width: 100% !important;
  display: block !important;
}
/* Blog card body padding */
.blog-grid .blog-card > a > div,
.blog-grid .blog-card > a > div[style*="padding"] {
  padding: 16px 18px !important;
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT PAGE quantity input — kill the inner rectangle.
   Same problem as cart qty: DS universal input rule was applying
   border + 46px height inside the pill-shape stepper wrapper.
   ══════════════════════════════════════════════════════════════════ */
.p-add-cart input[type="number"],
.p-add-cart input[name="qty"],
form.p-add-cart .qty input,
form[action*="/cart/add"] input[type="number"],
form[action*="/cart/add"] input[name="qty"],
.product-qty input,
.qty-stepper input,
input.qty-num,
input[name="qty"][type="number"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 52px !important;
  text-align: center !important;
  font-size: 15px !important;
  -moz-appearance: textfield !important;
}
/* Hide browser spinner arrows */
.p-add-cart input[type="number"]::-webkit-outer-spin-button,
.p-add-cart input[type="number"]::-webkit-inner-spin-button,
input[name="qty"][type="number"]::-webkit-outer-spin-button,
input[name="qty"][type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.p-add-cart input[type="number"]:focus,
input[name="qty"][type="number"]:focus {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   BLOG SINGLE ARTICLE — full container width, readable prose column.
   Heading / meta / featured image stretch to the full 1240px container.
   Body prose stays constrained to ~780px for readability but centered.
   ══════════════════════════════════════════════════════════════════ */
.blog-article-container {
  max-width: none !important;
  width: var(--ds-container, min(1240px, 100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Prose column inside — constrain paragraph width for readability
   (heading, image, video, tables stay full container width). */
.blog-article-container .article-content p,
.blog-article-container .article-content ul,
.blog-article-container .article-content ol,
.blog-article-container .article-content blockquote {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Headings + featured image + video / iframes / tables stay full-width */
.blog-article-container .article-content h2,
.blog-article-container .article-content h3,
.blog-article-container .article-content h4,
.blog-article-container .article-content img,
.blog-article-container .article-content video,
.blog-article-container .article-content iframe,
.blog-article-container .article-content table {
  max-width: none !important;
  width: 100% !important;
}
/* Post lead paragraph (grey subtitle under H1) also constrained */
.blog-article-container .post-lead {
  max-width: 780px !important;
}
/* Featured image at top — full container */
.blog-article-container .post-featured-image,
.blog-article-container .featured-image,
.blog-article-container > img:first-of-type {
  max-width: none !important;
  width: 100% !important;
  border-radius: 14px !important;
}

@media (max-width: 900px) {
  .blog-article-container .article-content p,
  .blog-article-container .article-content ul,
  .blog-article-container .article-content ol,
  .blog-article-container .post-lead {
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   BLOG SINGLE — RESET to single centered column, wider than before.
   Previous rule made paragraphs 780px + images 1240px which looked
   inconsistent. User wants old centered look, just wider (1080px).
   ══════════════════════════════════════════════════════════════════ */
.blog-article-container {
  max-width: 1080px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
/* Everything inside sits at full 1080px column — no extra constraints */
.blog-article-container .article-content p,
.blog-article-container .article-content ul,
.blog-article-container .article-content ol,
.blog-article-container .article-content blockquote,
.blog-article-container .article-content h1,
.blog-article-container .article-content h2,
.blog-article-container .article-content h3,
.blog-article-container .article-content h4,
.blog-article-container .article-content img,
.blog-article-container .article-content video,
.blog-article-container .article-content iframe,
.blog-article-container .article-content table,
.blog-article-container .post-lead {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Images and iframes take full column width */
.blog-article-container .article-content img,
.blog-article-container .article-content video,
.blog-article-container .article-content iframe {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
  border-radius: 12px !important;
}
@media (max-width: 900px) {
  .blog-article-container { max-width: 100% !important; padding: 0 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   BLOG SINGLE — restore original 920px + related articles 2-col.
   Kill earlier blog-article-container overrides (reverted approach).
   Related editorial grid: 3 col → 2 col so cards render bigger and
   don't crunch title text.
   ══════════════════════════════════════════════════════════════════ */
/* No-op the earlier blog-article-container overrides */
.blog-article-container { max-width: none !important; padding: 0 !important; }

/* Related editorial section — 2 columns instead of 3 */
.related-editorial .related-grid-v2,
.related-editorial .journal-grid,
.related-editorial .blog-idx-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
@media (max-width: 700px) {
  .related-editorial .related-grid-v2,
  .related-editorial .journal-grid,
  .related-editorial .blog-idx-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Also — if server returned 6 related cards, hide extras beyond 4 (2 rows × 2) */
.related-editorial .related-grid-v2 > *:nth-child(n+5),
.related-editorial .journal-grid > *:nth-child(n+5) {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER contact icons — no background, just clean orange glyphs.
   DS pill-icon rule was giving them a cream circle bg (like tool cards).
   Footer address row wants inline icons only, no pill/circle.
   ══════════════════════════════════════════════════════════════════ */
.site-footer .footer-address .fa-row i,
.site-footer .footer-address .fa-row [class^="bi-"],
.footer-address .fa-row i {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: var(--ds-brand, #e25604) !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.site-footer .footer-address .fa-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.site-footer .footer-address .fa-row a,
.site-footer .footer-address .fa-row span {
  color: var(--ds-ink, #1a1a1a) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}
.site-footer .footer-address .fa-row a:hover {
  color: var(--ds-brand, #e25604) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER V2 — cleaner 5-column layout (was cramped 6-column)
   Brand(2fr) + Company(1fr) + Services(1fr) + Free Tools(2fr, 2-subcol)
   + Resources(1fr). Wider tools column holds 14 links in 2 sub-columns
   so it doesn't look like a wall of text.
   ══════════════════════════════════════════════════════════════════ */
.site-footer.site-footer-v2 .footer-grid-v2 {
  display: grid !important;
  grid-template-columns: 2.1fr 1fr 1.1fr 2.2fr 1fr !important;
  gap: 36px 32px !important;
  align-items: start !important;
  padding: 8px 0 32px !important;
}

@media (max-width: 1100px) {
  .site-footer.site-footer-v2 .footer-grid-v2 {
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr 1fr !important;
    gap: 28px 24px !important;
  }
}
@media (max-width: 900px) {
  .site-footer.site-footer-v2 .footer-grid-v2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
  .site-footer.site-footer-v2 .brand-block { grid-column: 1 / -1 !important; }
  .site-footer.site-footer-v2 .footer-col-wide { grid-column: 1 / -1 !important; }
}
@media (max-width: 560px) {
  .site-footer.site-footer-v2 .footer-grid-v2 {
    grid-template-columns: 1fr !important;
  }
  .site-footer.site-footer-v2 .footer-col-wide { grid-column: auto !important; }
}

/* Column headings — consistent size, orange, bold */
.site-footer.site-footer-v2 .footer-col .h5,
.site-footer.site-footer-v2 .brand-block .h5 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ds-brand, #e25604) !important;
  letter-spacing: -.005em !important;
  margin: 0 0 16px !important;
  text-transform: none !important;
}

/* Link lists — reset + tighten */
.site-footer.site-footer-v2 .footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.site-footer.site-footer-v2 .footer-col li {
  margin: 0 0 8px !important;
}
.site-footer.site-footer-v2 .footer-col li a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  color: #2c2c2c !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}
.site-footer.site-footer-v2 .footer-col li a:hover {
  color: var(--ds-brand, #e25604) !important;
}

/* Wide "Free Tools" column — 2 sub-columns of links */
.site-footer.site-footer-v2 .footer-links-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 20px !important;
}
@media (max-width: 560px) {
  .site-footer.site-footer-v2 .footer-links-2col {
    grid-template-columns: 1fr !important;
  }
}

/* Brand block tighter */
.site-footer.site-footer-v2 .brand-block {
  max-width: 320px !important;
}
.site-footer.site-footer-v2 .brand-block > p {
  color: #6c6255 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 14px 0 20px !important;
}
.site-footer.site-footer-v2 .footer-address .fa-row {
  margin-bottom: 10px !important;
  font-size: 13px !important;
}

/* Subtle vertical divider before Resources column (visual anchor) */
@media (min-width: 1100px) {
  .site-footer.site-footer-v2 .footer-grid-v2 > .footer-col:last-child {
    padding-left: 24px !important;
    border-left: 1px solid #ece5d6 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LOGO MARQUEE V2 — Campfire-style: uniform sizes + big edge fade
   + mouse-drag scroll support.
   ══════════════════════════════════════════════════════════════════ */
.logo-marquee {
  overflow: hidden !important;
  padding: 24px 0 32px !important;
  position: relative !important;
  cursor: grab !important;
  user-select: none !important;
  /* Stronger edge fade — 180px on both sides (was 80px) */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,.15) 40px,
    #000 180px,
    #000 calc(100% - 180px),
    rgba(0,0,0,.15) calc(100% - 40px),
    transparent 100%) !important;
          mask-image: linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,.15) 40px,
    #000 180px,
    #000 calc(100% - 180px),
    rgba(0,0,0,.15) calc(100% - 40px),
    transparent 100%) !important;
}
.logo-marquee.is-dragging {
  cursor: grabbing !important;
}
.logo-marquee.is-dragging .logo-marquee-track,
.logo-marquee.is-paused .logo-marquee-track {
  animation-play-state: paused !important;
}

/* Uniform logo sizing — all images render at SAME height in SAME width slot,
   contained + centered so no logo dominates. */
.logo-marquee-track {
  gap: 56px !important;
  animation-duration: 45s !important;
}
.logo-marquee-track > * {
  flex: 0 0 auto !important;
  width: 160px !important;                 /* Fixed slot width */
  height: 60px !important;                 /* Fixed slot height */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.logo-marquee-track img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;          /* Preserves aspect ratio inside slot */
  object-position: center center !important;
  filter: grayscale(100%) contrast(1.05) !important;
  opacity: .75 !important;
  transition: filter .25s, opacity .25s, transform .25s !important;
  pointer-events: none !important;         /* Prevents drag interference */
}
.logo-marquee:not(.is-dragging) a:hover img,
.logo-marquee:not(.is-dragging) img:hover {
  filter: grayscale(0) contrast(1) !important;
  opacity: 1 !important;
  transform: scale(1.06) !important;
}
.logo-marquee-track a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Mobile — slightly smaller uniform slots */
@media (max-width: 700px) {
  .logo-marquee {
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%) !important;
            mask-image: linear-gradient(90deg,
      transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%) !important;
  }
  .logo-marquee-track {
    gap: 40px !important;
  }
  .logo-marquee-track > * {
    width: 120px !important;
    height: 48px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SAFETY — force main content visible on all pages.
   If reveal observers ever fail to fire and body.anim-off isn't set,
   this guarantees content never stays hidden.
   ══════════════════════════════════════════════════════════════════ */
main, main > section, main > div,
.reveal, .reveal-stagger, .reveal-stagger > * {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
/* Only preserve the reveal effect if explicitly opted-in via body class */
body.anim-on.anim-reveal .reveal:not(.in) {
  opacity: 0 !important;
  transform: translateY(28px) !important;
}
body.anim-on.anim-stagger .reveal-stagger:not(.in) > * {
  opacity: 0 !important;
  transform: translateY(20px) !important;
}

/* Revert logo-marquee mask to simple safe version (was multi-stop, may have
   caused rendering quirks on some browsers). */
.logo-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%) !important;
          mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%) !important;
  cursor: default !important;
  user-select: auto !important;
}

/* ══════════════════════════════════════════════════════════════════
   REVERT — kill LOGO MARQUEE V2 overrides that broke rendering.
   Restore small, sharp, uniform-ish logos with simple edge fade.
   ══════════════════════════════════════════════════════════════════ */
.logo-marquee {
  overflow: hidden !important;
  padding: 20px 0 24px !important;
  position: relative !important;
  cursor: default !important;
  user-select: auto !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%) !important;
          mask-image: linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%) !important;
}
.logo-marquee-track {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 48px !important;
  animation: logoScroll 40s linear infinite !important;
  width: max-content !important;
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused !important;
}
/* Track children — DO NOT force width/height slot. Let images size naturally
   but constrain to a sensible max so no logo becomes huge. */
.logo-marquee-track > * {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 48px !important;                 /* Uniform vertical rhythm */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.logo-marquee-track img {
  height: 48px !important;                 /* Fixed height, natural width */
  width: auto !important;
  max-width: 160px !important;             /* But cap super-wide logos */
  object-fit: contain !important;
  display: block !important;
  filter: grayscale(100%) contrast(1.05) !important;
  opacity: .78 !important;
  transition: filter .25s, opacity .25s !important;
  pointer-events: auto !important;
}
.logo-marquee-track img:hover,
.logo-marquee-track a:hover img {
  filter: grayscale(0) contrast(1) !important;
  opacity: 1 !important;
}
.logo-marquee-track a {
  display: inline-flex !important;
  align-items: center !important;
  height: 48px !important;
}
@media (max-width: 700px) {
  .logo-marquee-track { gap: 32px !important; }
  .logo-marquee-track > *, .logo-marquee-track img, .logo-marquee-track a { height: 40px !important; }
  .logo-marquee-track img { max-width: 120px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER C+ (Option C hybrid) — minimal centered hero + 4 mini cols
   + "See all" link + bottom legal/socials/copyright row.
   ══════════════════════════════════════════════════════════════════ */
.site-footer.footer-c-plus {
  background: #faf7ee !important;
  color: #1a1a1a !important;
  padding: 56px 0 24px !important;
  border-top: 1px solid #ece5d6 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}
.site-footer.footer-c-plus::before,
.site-footer.footer-c-plus::after { display: none !important; }

/* Hero — brand + tagline + CTA (centered) */
.footer-c-plus .fcp-hero {
  text-align: center !important;
  padding: 8px 0 40px !important;
  border-bottom: 1px solid #ece5d6 !important;
  margin-bottom: 40px !important;
}
.footer-c-plus .fcp-brand {
  display: inline-block !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #e25604 !important;
  letter-spacing: -.005em !important;
  text-decoration: none !important;
  margin: 0 0 14px !important;
}
.footer-c-plus .fcp-tag {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1.15 !important;
  color: #1a1a1a !important;
  max-width: 620px !important;
  margin: 0 auto 22px !important;
}
.footer-c-plus .fcp-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 26px !important;
  background: #e25604 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 0 0 #b83e00 !important;
  transition: background .18s, transform .18s, box-shadow .18s !important;
}
.footer-c-plus .fcp-cta:hover {
  background: #c74a00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 0 0 #a03600, 0 6px 14px -6px rgba(226,86,4,.4) !important;
}
.footer-c-plus .fcp-cta i { font-size: 15px !important; }

/* 4 mini columns */
.footer-c-plus .fcp-cols {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 32px !important;
  padding: 0 0 32px !important;
  border-bottom: 1px solid #ece5d6 !important;
  margin-bottom: 24px !important;
}
@media (max-width: 900px) {
  .footer-c-plus .fcp-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 24px !important;
  }
}
@media (max-width: 500px) {
  .footer-c-plus .fcp-cols {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}
.footer-c-plus .fcp-col-label {
  font-family: 'Poppins', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #6c6255 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
}
.footer-c-plus .fcp-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-c-plus .fcp-col li {
  margin: 0 0 8px !important;
}
.footer-c-plus .fcp-col li a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
  transition: color .18s ease !important;
}
.footer-c-plus .fcp-col li a:hover {
  color: #e25604 !important;
}
.footer-c-plus .fcp-more a {
  color: #6c6255 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.footer-c-plus .fcp-more a:hover {
  color: #e25604 !important;
}
.footer-c-plus .fcp-more a i { font-size: 12px !important; }

/* Centered "See all" link */
.footer-c-plus .fcp-see-all {
  text-align: center !important;
  padding: 8px 0 28px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid #ece5d6 !important;
}
.footer-c-plus .fcp-see-all a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  border: 1px solid #d9cfbc !important;
  background: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  transition: background .18s, color .18s, border-color .18s, transform .18s !important;
}
.footer-c-plus .fcp-see-all a:hover {
  background: #1a1a1a !important;
  color: #fff !important;
  border-color: #1a1a1a !important;
  transform: translateY(-1px) !important;
}
.footer-c-plus .fcp-see-all a i { font-size: 14px !important; }

/* Bottom row — legal · socials · copyright */
.footer-c-plus .fcp-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  padding-top: 6px !important;
}
@media (max-width: 800px) {
  .footer-c-plus .fcp-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }
}
.footer-c-plus .fcp-legal {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  font-size: 12px !important;
  color: #6c6255 !important;
}
.footer-c-plus .fcp-legal a {
  color: #6c6255 !important;
  text-decoration: none !important;
  transition: color .18s !important;
}
.footer-c-plus .fcp-legal a:hover { color: #e25604 !important; }
.footer-c-plus .fcp-legal .sep {
  color: #d3cbb8 !important;
  margin: 0 4px !important;
}
.footer-c-plus .socials {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.footer-c-plus .socials a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #ece5d6 !important;
  color: #2c2c2c !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background .18s, color .18s, border-color .18s, transform .18s !important;
}
.footer-c-plus .socials a:hover {
  background: #e25604 !important;
  color: #fff !important;
  border-color: #e25604 !important;
  transform: translateY(-2px) !important;
}
.footer-c-plus .fcp-copyright {
  font-size: 12px !important;
  color: #6c6255 !important;
}
.footer-c-plus .fcp-copyright a {
  color: #1a1a1a !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.footer-c-plus .fcp-copyright a:hover { color: #e25604 !important; }

@media (max-width: 600px) {
  .site-footer.footer-c-plus { padding: 40px 0 20px !important; }
  .footer-c-plus .fcp-hero { padding: 4px 0 32px !important; margin-bottom: 32px !important; }
  .footer-c-plus .fcp-cta { height: 44px !important; padding: 0 22px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER C+ — "+N more" INLINE TOGGLE (Free Tools column).
   Hidden items collapse initially; click "+N more" to expand inline.
   ══════════════════════════════════════════════════════════════════ */
.footer-c-plus .fcp-hidden {
  display: none !important;
}
.footer-c-plus .fcp-col.is-expanded .fcp-hidden {
  display: list-item !important;
  animation: fcpFadeIn .22s ease-out !important;
}
@keyframes fcpFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Toggle button — plain link-like button */
.footer-c-plus .fcp-toggle {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #6c6255 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color .18s ease !important;
  text-align: center !important;
  line-height: 1.5 !important;
}
.footer-c-plus .fcp-toggle:hover {
  color: #e25604 !important;
}
.footer-c-plus .fcp-toggle i {
  font-size: 12px !important;
  transition: transform .22s ease !important;
}
.footer-c-plus .fcp-col.is-expanded .fcp-toggle i {
  transform: rotate(180deg) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER C+ — CONTACT STRIP (phone · email · address) replaces
   the "See all N tools" pill between column grid and legal row.
   ══════════════════════════════════════════════════════════════════ */
.footer-c-plus .fcp-contact {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
  padding: 20px 0 26px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid #ece5d6 !important;
}
.footer-c-plus .fcp-contact-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #2c2c2c !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
  line-height: 1.5 !important;
}
a.fcp-contact-item:hover {
  color: #e25604 !important;
}
.footer-c-plus .fcp-contact-item i {
  color: #e25604 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}
.footer-c-plus .fcp-contact-sep {
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #d3cbb8 !important;
  flex-shrink: 0 !important;
}
@media (max-width: 700px) {
  .footer-c-plus .fcp-contact {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 20px 0 !important;
  }
  .footer-c-plus .fcp-contact-sep { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER C+ — thick separator when black CTA band is disabled.
   Provides visual "here starts the footer" cue without the loud CTA.
   ══════════════════════════════════════════════════════════════════ */
.site-footer.footer-c-plus {
  border-top: 3px solid #1a1a1a !important;
  margin-top: 0 !important;
  padding-top: 56px !important;
}
/* Small subtle secondary hairline below the thick divider for extra polish */
.site-footer.footer-c-plus::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 3px !important;
  background: #e25604 !important;
  border-radius: 2px !important;
}
.site-footer.footer-c-plus { position: relative !important; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER C+ — DARK MODE variant (matches removed CTA band aesthetic)
   Dark navy background, white text, orange accents throughout.
   Appended LAST so cascade wins over earlier light-cream C+ rules.
   ══════════════════════════════════════════════════════════════════ */
.site-footer.footer-c-plus {
  background: #1a1a1a !important;
  color: #e5e3dd !important;
  border-top: 0 !important;
  padding: 60px 0 24px !important;
  position: relative !important;
}
/* Remove the orange accent tab from the earlier light theme */
.site-footer.footer-c-plus::before {
  display: none !important;
}

/* Hero — brand + tagline + CTA on dark */
.footer-c-plus .fcp-hero {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.footer-c-plus .fcp-brand {
  color: #e25604 !important;
}
.footer-c-plus .fcp-tag {
  color: #ffffff !important;
}
.footer-c-plus .fcp-cta {
  background: #e25604 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 0 0 #a03600 !important;
}
.footer-c-plus .fcp-cta:hover {
  background: #c74a00 !important;
  box-shadow: 0 3px 0 0 #a03600, 0 6px 14px -6px rgba(226,86,4,.5) !important;
}

/* 4 mini columns on dark */
.footer-c-plus .fcp-cols {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.footer-c-plus .fcp-col-label {
  color: #e25604 !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
}
.footer-c-plus .fcp-col li a {
  color: #d7d3cc !important;
}
.footer-c-plus .fcp-col li a:hover {
  color: #ffffff !important;
}
.footer-c-plus .fcp-more a,
.footer-c-plus .fcp-toggle {
  color: #a5a09a !important;
}
.footer-c-plus .fcp-more a:hover,
.footer-c-plus .fcp-toggle:hover {
  color: #e25604 !important;
}

/* Contact strip on dark */
.footer-c-plus .fcp-contact {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.footer-c-plus .fcp-contact-item {
  color: #d7d3cc !important;
}
.footer-c-plus a.fcp-contact-item:hover {
  color: #ffffff !important;
}
.footer-c-plus .fcp-contact-item i {
  color: #e25604 !important;
}
.footer-c-plus .fcp-contact-sep {
  background: rgba(255,255,255,.15) !important;
}

/* Bottom row — legal + socials + copyright on dark */
.footer-c-plus .fcp-legal a {
  color: #a5a09a !important;
}
.footer-c-plus .fcp-legal a:hover {
  color: #ffffff !important;
}
.footer-c-plus .fcp-legal .sep {
  color: rgba(255,255,255,.2) !important;
}

/* Socials — dark bg circles with white icons, orange fill on hover */
.footer-c-plus .socials a {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #d7d3cc !important;
}
.footer-c-plus .socials a:hover {
  background: #e25604 !important;
  border-color: #e25604 !important;
  color: #ffffff !important;
}

/* Copyright */
.footer-c-plus .fcp-copyright {
  color: #a5a09a !important;
}
.footer-c-plus .fcp-copyright a {
  color: #ffffff !important;
}
.footer-c-plus .fcp-copyright a:hover {
  color: #e25604 !important;
}

/* Toggle chevron color for +N more */
.footer-c-plus .fcp-toggle i,
.footer-c-plus .fcp-more a i {
  color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════
   FONT SWAP — Poppins → Inter sitewide
   Matches the Anthropic Sans / Claude UI aesthetic exactly.
   Inter is Google's answer to Söhne (which Anthropic Sans is based on).
   Applied AFTER all previous font-family rules so cascade wins.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --ds-font-sans: 'Inter', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Poppins', sans-serif !important;
  --font-sans: 'Inter', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Body text + all default UI elements — Inter */
html, body, main, section, article, aside, nav, header, footer, div,
p, span, li, a, td, th, dd, dt, address, blockquote, figcaption,
label, small, .lead, .eyebrow, .credit, .meta, .caption, .breadcrumb,
button, input, select, textarea,
.btn, .card, .container {
  font-family: 'Inter', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-feature-settings: 'ss01', 'cv01', 'cv02', 'cv11' !important;   /* Inter's OpenType stylistic sets for cleaner rendering */
}

/* Headings — Inter with tight tracking (matches Claude UI H1/H2 exactly) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hero h1, .hero .h1,
.section-head h2, .section-head .h2,
.svc-title, .soft-title, .pricing-h1, .srv-title,
.tool-related-title, .pricing-faqs-h2,
.journal-title, .journal-h3, .journal-card h3,
.about-title, .tm-title, .qh-h1, .sg-h1, .md5-h1,
[class^="h1"], [class^="h2"], [class^="h3"], [class^="h4"], [class^="h5"],
.pricing-name, .srv-side-h,
.footer-c-plus .fcp-tag,
.footer-c-plus .fcp-col-label {
  font-family: 'Inter', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-feature-settings: 'ss01', 'cv01', 'cv02', 'cv11' !important;
  font-weight: 700 !important;
  letter-spacing: -.022em !important;   /* Slightly less tight than -.03 (Inter native tracking) */
}

/* Refined heading size scale — closer to Claude UI / Kaspersky proportions */
h1, .h1 { font-size: clamp(30px, 3.8vw, 48px) !important; line-height: 1.1 !important; }
h2, .h2 { font-size: clamp(24px, 2.8vw, 34px) !important; line-height: 1.15 !important; }
h3, .h3 { font-size: clamp(19px, 2.2vw, 24px) !important; line-height: 1.2 !important; letter-spacing: -.015em !important; }
h4, .h4 { font-size: 18px !important; line-height: 1.3 !important; letter-spacing: -.01em !important; }
h5, .h5 { font-size: 15px !important; line-height: 1.35 !important; letter-spacing: -.005em !important; }
h6, .h6 { font-size: 13px !important; line-height: 1.4 !important; letter-spacing: .04em !important; text-transform: uppercase !important; font-weight: 600 !important; }

/* Body text — Inter's ideal scale */
body, p, li, td, th, dd, dt {
  font-size: 15px !important;
  line-height: 1.6 !important;
  letter-spacing: -.003em !important;   /* Inter looks best with very slight negative tracking */
  color: #1a1a1a;
}
.lead, .hero p:first-of-type, .page-hero p:first-of-type,
.srv-sub, .pricing-lead {
  font-size: 17px !important;
  line-height: 1.55 !important;
  letter-spacing: -.005em !important;
}

/* Small text */
small, .small, .caption, figcaption,
.eyebrow, .credit, .breadcrumb, .meta, .date {
  font-size: 12.5px !important;
  letter-spacing: .01em !important;
  line-height: 1.45 !important;
}

/* Buttons — Inter, matches Claude's button aesthetic */
.btn, button.btn, a.btn,
.btn-primary, .btn-outline, .btn-light, .btn-ghost, .btn-dark, .btn-secondary,
.pricing-cta, .srv-btn, .tool-cta, .header-cta,
.fcp-cta, .footer-cta .btn {
  font-family: 'Inter', 'General Sans', sans-serif !important;
  font-weight: 500 !important;         /* Inter Medium — cleaner than Bold on buttons */
  font-size: 14px !important;
  letter-spacing: -.005em !important;
}

/* Form inputs — Inter */
input, select, textarea {
  font-family: 'Inter', 'General Sans', sans-serif !important;
  font-size: 14.5px !important;
  letter-spacing: -.003em !important;
}

/* Nav links — Inter Medium */
.site-nav a, nav a {
  font-family: 'Inter', 'General Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -.005em !important;
}

/* Footer C+ specific */
.footer-c-plus,
.footer-c-plus * {
  font-family: 'Inter', 'General Sans', sans-serif !important;
}
.footer-c-plus .fcp-tag {
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -.028em !important;
}
.footer-c-plus .fcp-brand {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}
.footer-c-plus .fcp-col-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
}
.footer-c-plus .fcp-col li a {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: -.003em !important;
}

/* Italic accents keep Instrument Serif (Anthropic uses Copernicus serif too) */
.ital, .ital-terra, .serif-italic,
.hero h1 .ital, .hero .h1 .ital,
.journal-title .ital {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* Mobile scaling */
@media (max-width: 900px) {
  h1, .h1 { font-size: clamp(26px, 5vw, 38px) !important; }
  h2, .h2 { font-size: clamp(20px, 4vw, 28px) !important; }
  h3, .h3 { font-size: clamp(17px, 3vw, 21px) !important; }
  body, p, li { font-size: 14.5px !important; }
  .lead { font-size: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE ABOUT SECTION — scrollable content area.
   3-paragraph bio wrapped in a fixed-height scrollable box so long
   content doesn't push the layout down. Custom slim scrollbar.
   ══════════════════════════════════════════════════════════════════ */
.about-scroll {
  max-width: 780px !important;
  margin: 0 auto !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  padding: 6px 20px 8px 4px !important;
  text-align: center !important;
  scroll-behavior: smooth !important;

  /* Fade-out gradient at bottom to hint "more content below" */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
}
.about-scroll p {
  margin: 0 0 14px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #2c2c2c !important;
  letter-spacing: -.003em !important;
}
.about-scroll p:last-child { margin-bottom: 0 !important; }
.about-scroll a {
  color: #e25604 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
}
.about-scroll a:hover {
  color: #1a1a1a !important;
  text-decoration-thickness: 2px !important;
}
.about-scroll strong { color: #1a1a1a !important; font-weight: 600 !important; }

/* Custom slim scrollbar */
.about-scroll::-webkit-scrollbar { width: 6px; }
.about-scroll::-webkit-scrollbar-track { background: transparent; }
.about-scroll::-webkit-scrollbar-thumb {
  background: #d9cfbc;
  border-radius: 3px;
}
.about-scroll::-webkit-scrollbar-thumb:hover { background: #e25604; }
/* Firefox scrollbar */
.about-scroll {
  scrollbar-width: thin !important;
  scrollbar-color: #d9cfbc transparent !important;
}

@media (max-width: 700px) {
  .about-scroll {
    max-height: 240px !important;
    padding-right: 12px !important;
  }
  .about-scroll p { font-size: 14.5px !important; line-height: 1.7 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE JOURNAL CARDS V2 — Full-bleed image + overlay pills
   + excerpt below title. Matches udaipurwebdesigner.com live design.
   ══════════════════════════════════════════════════════════════════ */

/* Card wrapper — clean white bordered card, no padding around image */
.journal-card.journal-card-v2 {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid #ece5d6 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease !important;
  padding: 0 !important;
}
.journal-card.journal-card-v2:hover {
  border-color: #1a1a1a !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -18px rgba(0,0,0,.18) !important;
}

/* Full-bleed thumbnail — no padding, edge-to-edge */
.journal-card-v2 .journal-thumb-full {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: #f5efe4 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.journal-card-v2 .journal-thumb-full img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .5s ease !important;
  display: block !important;
  border-radius: 0 !important;
}
.journal-card-v2:hover .journal-thumb-full img {
  transform: scale(1.04) !important;
}

/* Category pill — top-left overlay on image */
.journal-card-v2 .journal-thumb-cat {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 2 !important;
  padding: 6px 12px !important;
  background: rgba(255,255,255,.95) !important;
  color: #1a1a1a !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.15) !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

/* Date pill — top-right overlay on image */
.journal-card-v2 .journal-thumb-date {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2 !important;
  padding: 6px 12px !important;
  background: rgba(255,255,255,.95) !important;
  color: #1a1a1a !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.15) !important;
  line-height: 1.3 !important;
}

/* Card body — padded content area below image */
.journal-card-v2 .journal-body {
  padding: 22px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
}

/* Title */
.journal-card-v2 .journal-h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.02em !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  transition: color .18s ease !important;
}
.journal-card-v2:hover .journal-h3 {
  color: #e25604 !important;
}

/* Excerpt — 3-line clamped summary */
.journal-card-v2 .journal-excerpt {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: -.003em !important;
  color: #6c6255 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* "Read Article" link at bottom */
.journal-card-v2 .journal-read {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin-top: auto !important;
  padding-top: 6px !important;
  transition: color .18s ease, gap .18s ease !important;
}
.journal-card-v2 .journal-read i { font-size: 13px !important; transition: transform .18s ease !important; }
.journal-card-v2:hover .journal-read {
  color: #e25604 !important;
  gap: 10px !important;
}
.journal-card-v2:hover .journal-read i {
  transform: translateX(3px) !important;
}

/* Kill the old journal-divider hr inside v2 cards */
.journal-card-v2 .journal-divider,
.journal-card-v2 hr { display: none !important; }

/* Mobile — slightly tighter */
@media (max-width: 700px) {
  .journal-card-v2 .journal-body { padding: 18px 18px 20px !important; gap: 8px !important; }
  .journal-card-v2 .journal-h3 { font-size: 17px !important; }
  .journal-card-v2 .journal-excerpt { -webkit-line-clamp: 2 !important; font-size: 13px !important; }
  .journal-card-v2 .journal-thumb-cat,
  .journal-card-v2 .journal-thumb-date { font-size: 11px !important; padding: 5px 10px !important; top: 10px !important; }
  .journal-card-v2 .journal-thumb-cat { left: 10px !important; }
  .journal-card-v2 .journal-thumb-date { right: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE JOURNAL CARD V2 — pills moved BELOW image (in body).
   Overlay pills were cutting image content; now they sit in the
   content area as a horizontal row above the title.
   ══════════════════════════════════════════════════════════════════ */

/* Hide old overlay pills (image now clean, no overlay) */
.journal-card-v2 .journal-thumb-cat,
.journal-card-v2 .journal-thumb-date {
  display: none !important;
}

/* New pills row — sits at top of body, above title */
.journal-card-v2 .journal-pills-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 4px !important;
}
.journal-card-v2 .journal-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  line-height: 1.3 !important;
}
/* Category pill — cream bg with orange text */
.journal-card-v2 .journal-pill-cat {
  background: #fdece2 !important;
  color: #b83e00 !important;
  border: 1px solid transparent !important;
}
/* Date pill — cream bg with muted text */
.journal-card-v2 .journal-pill-date {
  background: #f5efe4 !important;
  color: #6c6255 !important;
  border: 1px solid #ece5d6 !important;
}
.journal-card-v2 .journal-pill-date i {
  font-size: 11px !important;
  color: #6c6255 !important;
}