/*
Theme Name: Digilistan
Theme URI: https://digilistan.com
Author: Muzammil Ali
Author URI: https://digilistan.com/about/
Description: A bespoke, hand-built WordPress theme for Digilistan, a web development and AI automation agency. Designed for speed and search: semantic templates for services, work, blog and a live product demo, a dark design system in Space Grotesk and Inter, scroll-driven motion with GSAP and Lenis, and full Rank Math schema support. Built and maintained in-house by Digilistan.
Version: 1.2.30
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary. Copyright Digilistan. All rights reserved.
Text Domain: digilistan
Tags: custom-logo, custom-menu, featured-images, translation-ready, full-width-template
*/

/* ============================================================
   0. SELF-HOSTED FONTS (v1.2.30)
   Space Grotesk + Inter as local variable WOFF2 (latin subset),
   declared before everything else. These replace the Google Fonts
   delivery, whose server-combined form shipped ~976 KB of TTF and
   dropped Space Grotesk entirely. Two files, ~70 KB in total,
   every weight a real instance of the variable font, swap display.
   ============================================================ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/wp-content/themes/digilistan-theme/assets/fonts/inter-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/wp-content/themes/digilistan-theme/assets/fonts/spacegrotesk-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Dark scheme declared up front so native UI (the open option list
     of a select, scrollbars, form controls) renders dark with light
     text instead of falling back to the visitor's OS light theme. */
  color-scheme: dark;
  --bg: #0B0B0D;
  --bg-deep: #08080A;
  --bg-step: #111114;
  --surface: #121215;
  --surface-2: #151518;
  --line: rgba(255, 255, 255, .08);
  --line-hover: rgba(255, 255, 255, .2);
  --text: #F4F4F2;
  --text-2: #A7A7AD;
  /* Muted small text. Raised from #6E6E76 (3.9:1 on the page
     background, under the 4.5:1 floor for body sizes) to #82828C,
     which holds about 5.2:1 on --bg and about 4.9:1 on the lighter
     --surface steps, so labels, meta lines and placeholders stay
     legible everywhere this token is used. */
  --text-3: #82828C;
  --accent: #00E5A0;
  --accent-ink: #04120C;
  --accent-dim: rgba(0, 229, 160, .12);
  --error: #FF6B6B;

  --font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --display: clamp(4rem, 10.5vw, 8.5rem);
  --h1: clamp(2.75rem, 6vw, 5rem);
  --h2: clamp(2.25rem, 4.5vw, 4rem);
  --h3: clamp(1.5rem, 2.5vw, 2rem);
  --lead: 1.25rem;
  --body: 1.0625rem;
  --small: .875rem;
  --eyebrow-size: .75rem;

  --space-section: clamp(6rem, 12vw, 10rem);
  --gutter: clamp(20px, 4vw, 64px);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --utility-h: 38px;
  --header-h: 76px;
  --header-h-scrolled: 62px;
  /* Full overlay height at the top of the page: utility bar plus main
     bar. Page top offsets use this so content never slides under the
     fixed header; on mobile the utility bar is hidden and --utility-h
     drops to 0 (see the 900px breakpoint). */
  --header-total: calc(var(--utility-h) + var(--header-h));
  /* Right offset of the fixed WhatsApp pill. At desktop widths
     (1200px and up) the side ruler occupies the outermost ~34px of
     the right edge, so the pill moves inward to 48px there (set in
     the side ruler media query below); below that the ruler is
     hidden and the pill keeps its standard 22px offset. */
  --float-right: 22px;
}

/* ============================================================
   2. RESET AND BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}
p { max-width: 62ch; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Anchor targets must clear the fixed header. --header-total is
   the full overlay height at the top of the page (utility bar plus
   main bar on desktop; it collapses automatically at the mobile
   breakpoint where the utility bar is hidden), so one rule lands
   targets correctly in both header states with a small breathing
   gap. Lenis-driven anchor clicks use their own offset in
   motion.js; this covers native jumps, the skip link and any
   browser-driven scroll to an element id. */
[id] { scroll-margin-top: calc(var(--header-total) + 24px); }

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }
.section--alt { background: var(--bg-step); }
/* First content section under a page hero: the hero already carries
   its own bottom padding, so the section top tightens up. */
.section--tight-top { padding-top: clamp(48px, 6vw, 80px); }
/* Sections carrying a top hairline (Why on Home, Principles on
   About): the rule is a real element so motion.js can grow it on
   entry (scaleX from 0, transform-origin left). Without JS, or
   under reduced motion, it simply rests as a static divider along
   the section's top edge. */
.section--ruled { position: relative; }
.section-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
  pointer-events: none;
}
.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 900px; }
.section-head h2 {
  font-size: var(--h2);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-top: 18px;
}
.section-head .lead { margin-top: 20px; }

.lead {
  font-size: var(--lead);
  line-height: 1.55;
  color: var(--text-2);
}
.muted { color: var(--text-2); }
.small { font-size: var(--small); color: var(--text-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.eyebrow--plain { color: var(--text-3); }
.eyebrow--plain::before { background: var(--text-3); }

.accent { color: var(--accent); }

/* Word-mask reveal wrappers (created by JS only; harmless without JS) */
.w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.w-inner { display: inline-block; }

/* ============================================================
   4. BUTTONS AND LINKS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform .25s var(--ease-out), background .25s ease, border-color .25s ease, color .25s ease, filter .25s ease;
  white-space: nowrap;
}
.btn .btn-arrow { transition: transform .25s var(--ease-out); }
.btn:hover .btn-arrow { transform: translate(3px, -3px); }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost { background: transparent; border-color: var(--line-hover); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.btn--whatsapp { background: transparent; border-color: var(--line-hover); color: var(--text); }
.btn--whatsapp:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--whatsapp svg { flex: none; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--text);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s var(--ease-out), color .2s ease;
  padding-bottom: 2px;
}
.text-link:hover { background-size: 100% 1px; color: var(--accent); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
  background: var(--surface);
}
.chip strong { color: var(--accent); font-family: var(--font-head); letter-spacing: .08em; }

/* ============================================================
   5. HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-total);
  transition: height .35s var(--ease-out), background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
/* Utility bar: a slim contact strip above the main bar (desktop only).
   When the scrolled state takes over it collapses to zero height and
   fades, so the slim bar replaces it with no jump: the header is a
   fixed overlay and page offsets keep the at-rest total. */
.utility-bar {
  height: var(--utility-h);
  overflow: hidden;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  transition: height .35s var(--ease-out), opacity .25s ease, border-color .3s ease;
}
.utility-inner {
  height: var(--utility-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: .8125rem;
}
.utility-loc {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
.utility-loc::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.utility-links { display: flex; align-items: center; gap: 28px; }
.utility-links a {
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s ease;
}
.utility-links a:hover { color: var(--accent); }
.utility-links a strong { color: var(--text); font-weight: 600; transition: color .2s ease; }
.utility-links a:hover strong { color: var(--accent); }
.site-header.is-scrolled .utility-bar {
  height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}
/* Scrolled state: slimmer bar, blurred background, hairline. The header
   is a fixed overlay, so the height change never reflows page content
   and cannot jump; hero and page offsets keep the full-height value. */
.site-header.is-scrolled {
  height: var(--header-h-scrolled);
  background: rgba(11, 11, 13, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: height .35s var(--ease-out);
}
.site-header.is-scrolled .header-inner { height: var(--header-h-scrolled); }
.brand { display: inline-flex; align-items: center; gap: 13px; flex: none; }
.brand img {
  width: 44px; height: 44px;
  border-radius: 11px;
  transition: width .35s var(--ease-out), height .35s var(--ease-out);
}
.site-header.is-scrolled .brand img { width: 36px; height: 36px; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.4375rem;
  letter-spacing: -.015em;
  color: var(--text);
  transition: font-size .35s var(--ease-out);
}
.site-header.is-scrolled .brand-name { font-size: 1.3125rem; }
.brand-name span { color: var(--accent); }
.brand:hover .brand-name { color: #fff; }

.main-nav > ul { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.main-nav a {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-2);
  padding: 10px 0;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s var(--ease-out), color .2s ease;
}
.main-nav a:hover { color: var(--text); background-size: 100% 2px; }
/* Active page: full teal underline at rest, including ancestor states
   (a service child page lights up Services). */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current-page-ancestor > a { color: var(--text); background-size: 100% 2px; }
.header-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.header-cta { padding: 12px 24px; font-size: .9375rem; min-height: 44px; }

/* Mega menu (panel injected under the Services item by the walker) */
.main-nav li.has-mega { position: relative; }
.main-nav li.has-mega > a { display: inline-flex; align-items: center; gap: 7px; }
.main-nav li.has-mega > a::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease-out);
}
.main-nav li.has-mega:hover > a::after,
.main-nav li.has-mega:focus-within > a::after { transform: rotate(225deg) translate(-1px, -1px); }
.mega {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translate(-50%, 10px);
  width: min(780px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .3s var(--ease-out), visibility .25s;
  box-shadow: 0 32px 64px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .4);
}
/* Invisible bridge across the gap so the panel never closes while the
   pointer travels from the link down into it. */
.mega::before {
  content: "";
  position: absolute;
  top: -18px; left: 0; right: 0;
  height: 18px;
}
/* Teal accent bar on the panel's top edge. */
.mega::after {
  content: "";
  position: absolute;
  top: -1px; left: 30px; right: 30px;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 4px 4px;
}
.main-nav li.has-mega:hover .mega,
.main-nav li.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega-group h4 {
  font-size: var(--eyebrow-size);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 14px;
  padding-inline: 10px;
}
.mega-group ul { display: grid; gap: 2px; }
.main-nav .mega a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-weight: 500;
  font-size: .9375rem;
  transition: background .2s ease, color .2s ease;
}
.main-nav .mega a small { display: block; color: var(--text-2); font-size: .8125rem; font-weight: 400; line-height: 1.45; margin-top: 2px; }
.main-nav .mega a:hover, .main-nav .mega a:focus-visible { background: var(--surface-2); color: var(--accent); }

/* Mobile navigation */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  transition: border-color .2s ease, background .2s ease;
}
.nav-toggle:hover { border-color: var(--line-hover); }
.mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg-deep);
  padding: calc(var(--header-total) + 24px) var(--gutter) calc(40px + env(safe-area-inset-bottom));
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.mobile-panel.is-open { opacity: 1; visibility: visible; }
/* Staggered entrance for the panel's blocks when it opens. */
.mobile-panel nav > ul > li,
.mobile-panel .mobile-services,
.mobile-panel .mobile-actions {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s var(--ease-out);
}
.mobile-panel.is-open nav > ul > li,
.mobile-panel.is-open .mobile-services,
.mobile-panel.is-open .mobile-actions { opacity: 1; transform: none; }
.mobile-panel.is-open nav > ul > li:nth-child(1) { transition-delay: .05s; }
.mobile-panel.is-open nav > ul > li:nth-child(2) { transition-delay: .1s; }
.mobile-panel.is-open nav > ul > li:nth-child(3) { transition-delay: .15s; }
.mobile-panel.is-open nav > ul > li:nth-child(4) { transition-delay: .2s; }
.mobile-panel.is-open nav > ul > li:nth-child(5) { transition-delay: .25s; }
.mobile-panel.is-open nav > ul > li:nth-child(6) { transition-delay: .3s; }
.mobile-panel.is-open .mobile-services { transition-delay: .36s; }
.mobile-panel.is-open .mobile-actions { transition-delay: .42s; }
.mobile-panel nav > ul { display: grid; gap: 4px; }
.mobile-panel nav a {
  display: block;
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  transition: color .2s ease;
}
.mobile-panel nav a:hover, .mobile-panel nav a:active { color: var(--accent); }
.mobile-panel .mobile-services { margin-top: 28px; }
.mobile-panel .mobile-services h4 {
  font-size: var(--eyebrow-size);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 10px;
}
.mobile-panel .mobile-services a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 0;
  padding: 9px 0;
  color: var(--text-2);
  display: block;
}
.mobile-panel .mobile-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
body.menu-open { overflow: hidden; }

/* ============================================================
   6. HERO (front page)
   ============================================================ */
.hero {
  position: relative;
  padding-top: calc(var(--header-total) + clamp(52px, 7.5vw, 104px));
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
}
/* Teal atmosphere: a primary glow top right and a softer counter-glow
   low left, so the dark field feels lit rather than flat. Both sit
   inside the overflow-hidden hero and never affect layout. */
.hero::before {
  content: "";
  position: absolute;
  top: -22%;
  right: -10%;
  width: 62vw;
  height: 62vw;
  max-width: 860px;
  max-height: 860px;
  background: radial-gradient(circle, rgba(0, 229, 160, .1) 0%, rgba(0, 229, 160, 0) 62%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -34%;
  left: -12%;
  width: 52vw;
  height: 52vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgba(0, 229, 160, .05) 0%, rgba(0, 229, 160, 0) 62%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-eyebrow { margin-bottom: 30px; }
.hero-title {
  font-size: var(--display);
  line-height: .98;
  letter-spacing: -.035em;
  max-width: 13.5ch;
  position: relative;
}
.hero-title .accent { color: var(--accent); }
.hero-bottom {
  display: grid;
  grid-template-columns: minmax(0, 52ch) 1fr;
  gap: 32px 64px;
  align-items: end;
  margin-top: clamp(36px, 4.5vw, 56px);
}
.hero-sub { font-size: var(--lead); line-height: 1.55; color: var(--text-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.hero-media {
  margin-top: clamp(52px, 6.5vw, 88px);
  height: clamp(340px, 54vw, 640px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  background: var(--surface);
}
/* Cinematic finish: a soft falloff at the base of the frame and a
   short teal keyline at its top left corner. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(8, 8, 10, .38), rgba(8, 8, 10, 0));
  pointer-events: none;
}
.hero-media::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 72px;
  height: 3px;
  background: var(--accent);
  z-index: 2;
}
.hero-media img {
  /* The hero photo's four faces run from about 24% to 58% of the
     frame height; anchoring the crop band at 35% keeps every face
     inside the wide hero slice at both parallax extremes, with the
     laptop and table still in view below. */
  object-position: center 35%;
  filter: saturate(.9) brightness(.94);
}
.hero-media figcaption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(8, 8, 10, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: .8125rem;
  color: var(--text);
  z-index: 2;
}
/* Scroll cue under the hero media: a hairline track with a teal pulse
   travelling down it. Pure decoration (aria-hidden in the markup); the
   keyframes are disabled by the reduced-motion rules in section 22. */
.hero-scroll {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero-scroll .hs-track {
  position: relative;
  width: 64px;
  height: 1px;
  background: var(--line-hover);
  overflow: hidden;
}
.hero-scroll .hs-track::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 22px;
  height: 1px;
  background: var(--accent);
  animation: dg-scroll-cue 2.4s var(--ease-out) infinite;
}
@keyframes dg-scroll-cue {
  0% { transform: translateX(-24px); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateX(66px); opacity: 0; }
}

/* ============================================================
   7. TRUST STRIP AND CREDENTIALS
   ============================================================ */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-list li {
  padding: 26px 28px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  border-left: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-list li:first-child { border-left: 0; padding-left: 0; }
.trust-list li svg { flex: none; }

.credentials { padding-block: clamp(48px, 6vw, 72px); }
.credentials-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 44px;
}
.credentials-row .cred-label {
  font-size: var(--eyebrow-size);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  max-width: 180px;
  line-height: 1.6;
}
.credentials-row img {
  height: 54px;
  width: auto;
  border-radius: 8px;
  background: #fff;
  padding: 6px 10px;
}
.credentials-row img.badge-hostinger {
  background: var(--surface);
  border: 1px solid var(--line);
}
/* Linked partner badge (Hostinger): the anchor hugs its image
   exactly, so a linked badge aligns like the plain badges beside
   it in the credentials row, the offer panels and the footer. */
.badge-link { display: inline-flex; line-height: 0; }
/* Text-only credential (no badge image exists for it): the Google
   Business Profile listing, in the same row language. */
.credentials-row .cred-link {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-hover);
}
.credentials-row .cred-link:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ============================================================
   8. STATEMENT AND WHY
   ============================================================ */
.statement-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}
.why-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 2;
  max-height: 560px;
  border: 1px solid var(--line);
  background: var(--surface);
  /* Normal flow since v1.2.16: no sticky parking. The card sits at
     the top of its grid column, level with the first point, and
     motion.js glides the whole card down the column on a scrubbed
     follower transform (v1.2.17), tracking the points list;
     will-change keeps that on the compositor, no layout is touched.
     position: relative (above) keeps the .plx image anchored to
     this frame at every width. */
  will-change: transform;
}
.why-media img { object-position: center 35%; filter: saturate(.88) brightness(.94); }
.why-list { display: grid; }
.why-list li {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.why-list li:first-child { border-top: 0; padding-top: 0; }
.why-list h3 { font-size: 1.375rem; line-height: 1.2; margin-bottom: 8px; display: flex; gap: 14px; align-items: baseline; }
.why-list h3 .why-num { color: var(--accent); font-size: .9375rem; }
.why-list p { color: var(--text-2); }

/* ============================================================
   9. SERVICES · HAIRLINE ROWS
   ============================================================ */
.service-group { margin-top: clamp(40px, 4vw, 56px); }
.service-group:first-of-type { margin-top: 0; }
.service-group-label {
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.service-rows { border-bottom: 1px solid var(--line); }
.service-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 26px 16px;
  border-top: 1px solid var(--line);
  transition: background .3s ease;
  position: relative;
}
.service-row:hover { background: var(--surface); }
.service-row .row-num {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--accent);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.service-row .row-main { transition: transform .3s var(--ease-out); }
.service-row:hover .row-main { transform: translateX(10px); }
.service-row h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.12; letter-spacing: -.015em; }
.service-row .row-desc { display: block; color: var(--text-2); font-size: .9375rem; margin-top: 6px; max-width: 58ch; }
.service-row .row-arrow {
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--text-3);
  transition: transform .3s var(--ease-out), color .2s ease;
}
.service-row:hover .row-arrow { transform: translate(4px, -4px); color: var(--accent); }
.services-foot { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }

/* ============================================================
   10. WORK CARDS
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 48px);
}
.work-card--featured { grid-column: 1 / -1; }
.work-card-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface);
}
.work-card--featured .work-card-media { aspect-ratio: 16 / 8.5; }
.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) brightness(.95);
  /* The hover zoom uses the standalone scale property, not transform:
     GSAP owns the transform on parallax images, and the two compose
     instead of fighting. */
  transition: scale .8s var(--ease-out), filter .4s ease;
}
a.work-card:hover .work-card-media img, .work-card:hover .work-card-media img { scale: 1.05; filter: saturate(1) brightness(1); }
.work-card-body { padding-top: 22px; }
.work-card-body h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.15; transition: color .2s ease; }
.work-card:hover .work-card-body h3 { color: var(--accent); }
.work-card-body p { color: var(--text-2); margin-top: 8px; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.work-tags li {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.work-offset { margin-top: clamp(0px, 6vw, 96px); }

/* ============================================================
   11. PROCESS
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.process-step { border-top: 1px solid var(--line-hover); padding-top: 24px; }
.process-step .step-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.process-step h3 { font-size: 1.375rem; margin: 16px 0 8px; }
.process-step p { color: var(--text-2); font-size: .9375rem; }

/* Service page buyer questions (content expansion, v1.2.25): the
   process-step top-border treatment in a two-column grid. */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.qa-item { border-top: 1px solid var(--line-hover); padding-top: 20px; }
.qa-item h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 8px; }
.qa-item p { color: var(--text-2); font-size: .9375rem; }

/* ============================================================
   12. PARTNER OFFER
   ============================================================ */
.offer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.offer h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; margin-top: 16px; }
.offer p { color: var(--text-2); margin-top: 16px; }
.offer-side { display: grid; gap: 20px; justify-items: start; }
.offer-side img { height: 64px; width: auto; border-radius: 8px; border: 1px solid var(--line); }
.offer-code {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed rgba(0, 229, 160, .45);
  background: var(--accent-dim);
  border-radius: var(--r-md);
  padding: 14px 20px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  font-size: 1.125rem;
}
.offer-code small { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; color: var(--text-2); font-size: .8125rem; }
.offer-code-inline { color: var(--text); }
/* Click-to-copy code chip: every offer placement renders this one
   button via dg_copy_chip() in functions.php. A click copies the
   code only, never the referral URL, and ui.js swaps the hint to
   "Copied" on success. Sizing comes from the context class: the
   full coupon treatment from .offer-code on the homepage, or the
   compact variant below in the service panel and the footer strip. */
.copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed rgba(0, 229, 160, .45);
  background: var(--accent-dim);
  border-radius: var(--r-md);
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease, transform .15s var(--ease-out);
}
.copy-chip:hover { border-color: var(--accent); }
.copy-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.copy-chip:active { transform: scale(.98); }
.copy-chip svg { flex: none; }
.copy-chip-code { white-space: nowrap; }
.copy-chip-hint {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  font-size: .75rem;
  color: var(--text-2);
  white-space: nowrap;
}
.copy-chip.is-copied { border-style: solid; border-color: var(--accent); }
.copy-chip.is-copied .copy-chip-hint { color: var(--accent); }
.copy-chip--sm {
  padding: 9px 14px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .8125rem;
}
/* Homepage partner offer as a coupon card (v1.2.27). Scoped to
   .offer--coupon so the .offer strips on the Services hub and the
   Contact pitch panel, which share the base classes, are untouched.
   The panel takes the demo panel's faint teal top light; the side
   column becomes one elevated card: badge and the saving as a
   price-sized figure on top, a dashed ticket rule, then the copy
   chip and the visit button at full width over the fine print. */
.offer--coupon {
  background-image: radial-gradient(640px 320px at 50% -80px, rgba(0, 229, 160, .055), rgba(0, 229, 160, 0) 70%);
}
.offer--coupon .text-link { margin-top: 24px; }
.offer--coupon .offer-side {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 30px);
  gap: 18px;
  justify-items: stretch;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}
.offer-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.offer--coupon .offer-side img { height: 56px; }
.offer-card-off {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--accent);
  white-space: nowrap;
}
.offer-card-rule { border-top: 1px dashed var(--line-hover); }
.offer-chip-wrap { display: flex; }
.offer-chip-wrap .copy-chip { flex: 1 1 auto; justify-content: center; }
.offer--coupon .offer-side .btn { width: 100%; justify-content: center; }
.offer--coupon .offer-fineprint {
  margin-top: 0;
  font-size: .8125rem;
  color: var(--text-3);
  text-align: center;
}
/* The Contact page's pitch panel reuses .offer as a strip. */
.pitch-section { padding-top: 0; }
/* The offer as a strip on inner pages (Services hub): the section
   keeps normal rhythm, without the homepage's tightened top. */
.offer-section { padding-top: 0; }

/* ============================================================
   13. FINAL CTA AND ENQUIRY FORM
   ============================================================ */
.cta { position: relative; overflow: hidden; }
.cta::before {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -8%;
  width: 50vw; height: 50vw;
  max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(0, 229, 160, .06) 0%, rgba(0, 229, 160, 0) 62%);
  pointer-events: none;
}
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  position: relative;
}
.cta h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.02; letter-spacing: -.025em; margin-top: 18px; }
.cta .lead { margin-top: 20px; }
.cta-points { margin-top: 28px; display: grid; gap: 12px; }
.cta-points li { display: flex; gap: 12px; align-items: baseline; color: var(--text-2); }
.cta-points li svg { flex: none; transform: translateY(2px); }
.cta-direct { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

.enquiry-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  gap: 18px;
  align-content: start;
}
.field label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 8px;
  color: var(--text);
}
.field label .optional { color: var(--text-3); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
/* The service select is a first-class control, identical in box,
   height and behavior to the text inputs above (the shared rule
   gives it the same background, border, radius, padding and 16px
   font size, so iOS never zooms on focus). The native arrow is
   replaced (appearance: none in the shared rule) with a larger,
   clearer chevron drawn as a background SVG, so the closed control
   unmistakably reads as a dropdown. It turns accent green on focus,
   alongside the accent border and focus ring. */
.field select {
  font-family: inherit;
  line-height: 1.5;
  color-scheme: dark;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5L7 7l5.5-5.5' fill='none' stroke='%23A7A7AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5L7 7l5.5-5.5' fill='none' stroke='%2300E5A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* The open option list: color-scheme: dark (above and on :root)
   makes supporting browsers paint it dark natively; these explicit
   colors are the fallback for engines that take the popup colors
   from the option elements instead. */
.field select option {
  background-color: var(--surface-2);
  color: var(--text);
}
.field select option:checked {
  background-color: var(--accent-dim);
  color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.form-note { font-size: .8125rem; color: var(--text-3); }
.form-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Submission status notice, rendered above the form after the
   handler redirects back with ?dg_enquiry=sent or =error. The form
   sits inside a section, so the notice carries its own spacing. */
.form-status {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-bottom: 18px;
  font-size: .9375rem;
  line-height: 1.55;
}
.form-status p { margin: 0; }
.form-status--success { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }
.form-status--error { background: var(--surface); border-color: var(--error); color: var(--text); }
.form-status--error a { color: var(--accent); }

/* Honeypot field: present in the markup for bots, never visible or
   reachable for humans (the handler also drops it from the tab
   order and the accessibility tree in the template). */
.dg-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Service dropdown (ui.js enhancement). The native select remains
   the submitted control; ui.js adds .is-enhanced to the wrapper,
   visually hides the select (clip pattern, never display:none, so
   it stays the form's source of truth) and drives the button +
   listbox below. Without JavaScript none of these rules engage and
   the grouped native select from the template is what renders. */
.dg-select { position: relative; }
.dg-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.dg-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dg-select-btn:hover { border-color: var(--line-hover); }
.dg-select-btn.is-placeholder .dg-select-value { color: var(--text-3); }
.dg-select-btn:focus-visible, .dg-select-btn.is-open {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.dg-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-select-chevron {
  flex: none;
  color: var(--text-2);
  transition: transform .25s var(--ease-out), color .2s ease;
}
.dg-select-btn.is-open .dg-select-chevron { transform: rotate(180deg); color: var(--accent); }
.dg-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-2);
  border: 1px solid var(--line-hover);
  border-radius: var(--r-md);
  box-shadow: 0 32px 64px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .4);
  padding: 8px;
  max-height: min(320px, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dg-select-panel.is-open { animation: dg-select-in .18s var(--ease-out); }
@keyframes dg-select-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.dg-select-group-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 12px 5px 28px;
  max-width: none;
}
.dg-select-panel [role="group"]:first-child .dg-select-group-label { padding-top: 4px; }
.dg-select-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  /* Left padding clears the ruler track (14px at the panel's
     left edge) with room to spare, so text never overlaps it. */
  padding: 10px 12px 10px 28px;
  border-radius: 8px;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  transform-origin: left center;
  transition: background-color .14s ease, transform .14s ease;
}
/* Highlight micro-interaction: the active row swells very
   slightly from its left edge. Transform only, so nothing
   reflows and neighbouring rows never shift. */
.dg-select-option.is-highlighted { background: var(--accent-dim); transform: scale(1.015); }
.dg-select-label { margin-right: auto; }
.dg-select-num {
  flex: none;
  min-width: 1.55em;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.dg-select-option.is-selected .dg-select-num { color: var(--accent); }
.dg-select-option .dg-select-check {
  flex: none;
  display: inline-flex;
  color: var(--accent);
  opacity: 0;
  transition: opacity .15s ease;
}
.dg-select-option.is-selected .dg-select-check { opacity: 1; }
.dg-select-option.is-selected { color: var(--accent); }

/* Ruler track (decorative, built by ui.js): a slim strip of
   tick lines down the panel's left edge, like the scale on a
   ruler. Short ticks every 8px, a longer one every 40px. The
   strip is as tall as the panel's full scrollable content
   (ui.js sets its height on open) and scrolls with it. The
   segment beside the active option is a separate element
   that ui.js positions; it washes accent-dim, redraws its
   ticks in the accent and adds a solid accent edge, so the
   active stretch of the scale visibly lights up. */
.dg-select-ruler {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  pointer-events: none;
}
.dg-select-ruler::before,
.dg-select-ruler::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.dg-select-ruler::before {
  width: 5px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .13) 0 1px, transparent 1px 8px);
}
.dg-select-ruler::after {
  width: 10px;
  background: repeating-linear-gradient(to bottom, var(--line-hover) 0 1px, transparent 1px 40px);
}
.dg-select-ruler-active {
  position: absolute;
  left: 0;
  width: 100%;
  background: var(--accent-dim);
  border-left: 2px solid var(--accent);
  opacity: 0;
  transition: top .16s var(--ease-out), height .16s var(--ease-out), opacity .16s ease;
}
.dg-select-ruler-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: repeating-linear-gradient(to bottom, var(--accent) 0 1px, transparent 1px 8px);
}
.dg-select-ruler-active.is-on { opacity: 1; }

/* Reduced motion: the highlight is color only, no scaling,
   and the ruler segment snaps instead of gliding. */
@media (prefers-reduced-motion: reduce) {
  .dg-select-option.is-highlighted { transform: none; }
  .dg-select-ruler-active { transition: none; }
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line); }
.footer-top { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(36px, 4.5vw, 56px); }
/* Giant wordmark: a full-width design feature at the top of the
   footer. The critical size treatment is also inlined on the element
   in footer.php, so it renders at full scale even if this stylesheet
   is ever delayed or cached stale. Resting state is a solid fill;
   where text-stroke is supported it becomes an outline that fills
   with the teal accent on hover (fine pointers only). */
.footer-word {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3rem, 13.5vw, 12.75rem);
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--text);
  max-width: none;
  width: 100%;
  white-space: nowrap;
  transition: color .45s ease;
}
.footer-word .fw-dot { color: var(--accent); }
@supports (-webkit-text-stroke: 1px black) {
  .footer-word {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(244, 244, 242, .75);
    -webkit-text-fill-color: transparent;
    transition: -webkit-text-fill-color .45s ease, -webkit-text-stroke-color .45s ease, color .45s ease;
  }
  .footer-word .fw-dot {
    -webkit-text-stroke: 0;
    -webkit-text-fill-color: var(--accent);
  }
  @media (hover: hover) and (pointer: fine) {
    .footer-word:hover {
      -webkit-text-fill-color: var(--accent);
      -webkit-text-stroke-color: var(--accent);
    }
  }
}
.footer-tagline { margin-top: 18px; color: var(--text-2); max-width: 52ch; }
/* Partner credentials: one clean full-width row under the wordmark. */
.footer-credentials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.footer-credentials .fc-row-label {
  font-size: var(--eyebrow-size);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 56px);
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.footer-col h4 {
  font-size: var(--eyebrow-size);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-col h4::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.footer-col ul { display: grid; gap: 0; }
.footer-col a {
  display: block;
  color: var(--text-2);
  font-size: .9375rem;
  line-height: 1.45;
  padding-block: 11px;
  transition: color .2s ease, transform .25s var(--ease-out);
}
.footer-col a:hover { color: var(--accent); transform: translateX(4px); }
.footer-col p { color: var(--text-2); font-size: .9375rem; }
.footer-socials { margin-top: 10px; }
.footer-contact li { display: grid; gap: 2px; margin-bottom: 2px; }
.footer-contact .fc-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.footer-contact a { color: var(--text); font-weight: 500; }
.footer-contact a:hover { transform: none; color: var(--accent); }
.footer-badges { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.footer-badges img { height: 48px; width: auto; border-radius: 6px; background: #fff; padding: 5px 8px; }
.footer-badges img.badge-hostinger { background: var(--surface); border: 1px solid var(--line); }
.footer-legal {
  border-top: 1px solid var(--line);
  padding-block: 22px;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--text-3);
}
.footer-legal ul { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-legal ul a { display: inline-block; padding: 12px 8px; color: var(--text-2); }
.footer-legal a:hover { color: var(--accent); }
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .8125rem;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  min-height: 44px;
  transition: color .2s ease, border-color .2s ease, transform .25s var(--ease-out);
}
.to-top svg { transition: transform .25s var(--ease-out); }
.to-top:hover { color: var(--accent); border-color: var(--accent); }
.to-top:hover svg { transform: translateY(-2px); }

/* WhatsApp float. Critical positioning is also inlined on the element
   in footer.php; these rules add the refined skin (shadow, hover) and
   keep it clear of the mobile panel (z 99) and header (z 100). */
.wa-float {
  position: fixed;
  right: max(var(--float-right, 22px), env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .9375rem;
  padding: 14px 20px 14px 16px;
  border-radius: var(--r-pill);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
  transition: transform .25s var(--ease-out), filter .25s ease;
}
.wa-float:hover { transform: translateY(-2px); filter: brightness(1.06); }
.wa-float:focus-visible { outline-offset: 4px; }

/* ============================================================
   15. INNER PAGE PATTERNS
   ============================================================ */
.page-hero {
  padding-top: calc(var(--header-total) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -6%;
  width: 44vw; height: 44vw;
  max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(0, 229, 160, .06) 0%, rgba(0, 229, 160, 0) 62%);
  pointer-events: none;
}
.breadcrumb { font-size: .8125rem; color: var(--text-3); margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--text-3); }
.page-hero h1 {
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: 16ch;
  margin-top: 16px;
}
.page-hero .lead { margin-top: 22px; max-width: 56ch; }
.page-hero .hero-actions { justify-content: flex-start; margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Split page heroes (v1.2.5): two columns on desktop, stacking on
   small screens. The Services hub carries the parallax photo in the
   right column; service pages carry the service index panel, so no
   inner-page hero is a text-only band with an empty right half. */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.page-hero-grid--index { align-items: start; }
.hub-hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.hub-hero-media img { filter: saturate(.9) brightness(.95); }

/* Service index panel (service page heroes): the group, the
   service's number within that group, and anchor links to the
   page's own sections. Real navigation, not decoration. */
.svc-index {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 36px);
}
.svc-index-group {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}
.svc-index-group span { color: var(--text-3); font-weight: 500; }
.svc-index-num {
  margin-top: 8px;
  color: var(--accent);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.svc-index-links { margin-top: 22px; border-top: 1px solid var(--line); }
.svc-index-links li { border-bottom: 1px solid var(--line); }
.svc-index-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 2px;
  color: var(--text-2);
  font-weight: 500;
  transition: color .2s ease;
}
.svc-index-links a::after { content: "\2193"; color: var(--text-3); transition: color .2s ease; }
.svc-index-links a:hover { color: var(--accent); }
.svc-index-links a:hover::after { color: var(--accent); }

/* Search boxes placed inside hero bands (search results hero, 404). */
.hero-search { margin-top: 28px; max-width: 560px; }
.error-search { margin-top: 30px; max-width: 560px; }

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.prose { max-width: 68ch; }
.prose p { color: var(--text-2); margin-bottom: 20px; max-width: none; }
.prose p strong, .prose strong { color: var(--text); }
.prose h2 { font-size: var(--h3); margin: 40px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.note-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 36px);
}
.note-panel h2, .note-panel h3 { font-size: 1.375rem; margin-bottom: 12px; }
.note-panel p { color: var(--text-2); }
.note-panel p:last-child { margin-bottom: 0; }

.checklist { display: grid; gap: 0; }
.checklist li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  color: var(--text-2);
}
.checklist li:first-child { border-top: 0; padding-top: 0; }
.checklist li svg { flex: none; margin-top: 4px; }
.checklist li span { color: var(--text); font-weight: 500; }

/* Service page composition (page-service.php) */
.two-col--one { grid-template-columns: minmax(0, 8fr); }
.included-title { font-size: var(--h3); margin: 14px 0 22px; }
.service-side { display: grid; gap: 20px; align-content: start; }
.note-panel strong { color: var(--text); }
.panel-more { margin-top: 14px; }
.related-item { margin-bottom: 12px; }

/* Entry content (blog posts and generic pages) */
.entry-content { max-width: 68ch; }
.entry-content p { color: var(--text-2); margin-bottom: 22px; }
.entry-content h2 { font-size: var(--h3); margin: 44px 0 14px; }
.entry-content h3 { font-size: 1.375rem; margin: 34px 0 12px; }
.entry-content ul, .entry-content ol { margin: 0 0 22px; padding-left: 22px; color: var(--text-2); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 8px; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { border-radius: var(--r-md); margin-block: 28px; }
.entry-content blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  margin: 32px 0;
  font-family: var(--font-head);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--text);
}
.entry-content strong { color: var(--text); }

/* ============================================================
   16. ABOUT · TEAM
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 48px);
}
/* Slim team cards: a square visual tile (the founder's portrait, or
   the designed MW monogram where no photo exists) beside the text,
   so both cards carry equal visual weight. */
.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
}
.team-tile { position: relative; overflow: hidden; background: var(--bg-step); margin: 0; }
.team-tile picture { display: block; width: 100%; height: 100%; }
.team-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: saturate(.92); }
.team-mono {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.75rem, 4.5vw, 3.75rem);
  letter-spacing: -.02em;
  color: var(--accent);
  background: radial-gradient(circle at 30% 20%, rgba(0, 229, 160, .14), rgba(0, 229, 160, 0) 60%), var(--bg-step);
}
.team-body { padding: clamp(24px, 3vw, 36px); }
.team-body h3 { font-size: 1.625rem; }
.team-role { color: var(--accent); font-weight: 600; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; margin: 6px 0 14px; }
.team-body p { color: var(--text-2); font-size: .9375rem; }
.remit-list { display: grid; gap: 8px; margin-top: 16px; }
.remit-list li { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: .875rem; font-weight: 500; }
.remit-list li svg { flex: none; }

/* About: facts panel beside the story */
.facts-list { display: grid; }
.facts-list li { padding: 13px 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: .9375rem; }
.facts-list li:first-child { border-top: 0; padding-top: 2px; }
.facts-list li:last-child { padding-bottom: 2px; }
.facts-list strong { color: var(--text); }

/* About: principles as service-style rows beside the Why media. The
   rows are not links, so the row-main slide stays off. */
.principle-row { cursor: default; }
.principle-row:hover .row-main { transform: none; }

/* About: founder feature. The portrait sits in a dedicated 4/5
   frame (no .plx parallax crop), tuned to keep the face in frame. */
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.founder-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  margin: 0;
}
.founder-media picture { display: block; width: 100%; height: 100%; }
.founder-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: saturate(.92); }
.founder-body > p { color: var(--text-2); max-width: 62ch; }
.path-steps { display: grid; margin-top: 30px; }
.path-steps li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.path-steps .path-num {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.path-steps h3 { font-size: 1.125rem; margin-bottom: 4px; }
.path-steps p { color: var(--text-2); font-size: .9375rem; }
.founder-tools { margin-top: 26px; }
.founder-certs { margin-top: 20px; }

/* About: founder social links. A labelled row of pill chips in the
   site palette (surface fill, hairline border) with the same teal
   border-and-text hover as the ghost buttons; wraps on mobile. */
.founder-socials { margin-top: 28px; }
.founder-socials-label {
  display: block;
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.social-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1;
  transition: transform .25s var(--ease-out), border-color .25s ease, color .25s ease;
}
.social-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.social-chip svg { width: 18px; height: 18px; flex: none; }
/* Fiverr has no simple glyph; a bold lowercase f in the heading
   font stands in as its mark, sized to the icon box. */
.social-chip-mark {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  width: 18px;
  text-align: center;
  flex: none;
}

.credentials-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 64px); }
.credentials-list li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.0625rem;
}
.credentials-list li svg { flex: none; transform: translateY(1px); }

/* ============================================================
   17. WORK · SYSTEMS
   ============================================================ */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}
.system-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(24px, 2.6vw, 32px);
  transition: border-color .25s ease, transform .25s var(--ease-out);
}
.system-card:hover { border-color: var(--line-hover); transform: translateY(-3px); }
.system-card .sys-tag {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  margin-bottom: 16px;
}
.system-card h3 { font-size: 1.375rem; line-height: 1.2; margin-bottom: 10px; }
.system-card p { color: var(--text-2); font-size: .9375rem; }
.case-list { display: grid; gap: clamp(48px, 6vw, 88px); }
.case-item {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.case-item:nth-child(even) .case-media { order: 2; }
/* Featured case with a portrait source image (AI Munshi on the Work
   page): a narrower media column and a 4/5 portrait frame, so the
   portrait photograph is presented at its natural shape instead of
   being squeezed into the standard landscape crop. */
.case-item--portrait { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.case-item--portrait .case-media { aspect-ratio: 4 / 5; max-height: 680px; }
.case-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; }
.case-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.95); transition: scale .8s var(--ease-out); }
.case-item:hover .case-media img { scale: 1.05; }
.case-body h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; margin-bottom: 14px; }
.case-body p { color: var(--text-2); }

/* ============================================================
   18. CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.contact-rail { display: grid; gap: 20px; }
.detail-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 28px;
}
.detail-card .dc-label { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.detail-card .dc-value { font-family: var(--font-head); font-weight: 500; font-size: 1.25rem; color: var(--text); }
.detail-card a.dc-value:hover { color: var(--accent); }
.detail-card p { color: var(--text-2); font-size: .9375rem; margin-top: 6px; }

/* ============================================================
   19. BLOG
   ============================================================ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.post-card { display: flex; flex-direction: column; }
.post-card-media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); margin-bottom: 20px; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .8s var(--ease-out); }
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-meta { font-size: .8125rem; color: var(--text-3); display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.post-meta .post-cat { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; }
.post-card h3 { font-size: 1.375rem; line-height: 1.25; }
.post-card:hover h3 { color: var(--accent); }
.post-card p { color: var(--text-2); font-size: .9375rem; margin-top: 8px; }
.pagination { margin-top: clamp(48px, 6vw, 72px); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pagination .page-numbers, .pagination .post-page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--text-2);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pagination .page-numbers:hover, .pagination .post-page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current, .pagination .post-page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pagination .screen-reader-text { position: absolute !important; }
/* In-article page links (wp_link_pages on posts and pages) sit
   directly under the entry content, not at grid distance. */
.entry-content + .pagination, .post-page-links { margin-top: 40px; }
.post-page-links .post-page-label { font-family: var(--font-head); font-weight: 500; color: var(--text-2); margin-right: 6px; }
.article-head { max-width: 820px; }
.article-head h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.08; letter-spacing: -.02em; margin-top: 16px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--text-3); font-size: .875rem; margin-top: 20px; }
.article-hero-img { border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(32px, 4vw, 52px); }
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.article-nav a { color: var(--text-2); font-size: .9375rem; }
.article-nav a span { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1.125rem; color: var(--text); margin-top: 6px; }
.article-nav a:hover span { color: var(--accent); }
.article-nav .nav-next { text-align: right; }

/* Search: the themed search form (searchform.php) and the results
   view (search.php) reuse the blog's card grid and meta styles. */
.search-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 640px;
}
.search-form .search-field {
  flex: 1 1 260px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 14px 22px;
  font-size: 1rem;
  color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-form .search-field::placeholder { color: var(--text-3); }
.search-form .search-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.search-count { color: var(--text-2); margin-top: 18px; }
.search-empty { max-width: 640px; }
.search-suggestions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* 404 */
.error-hero { text-align: left; }
.error-code {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(5rem, 16vw, 13rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--text);
}
.error-code span { color: var(--accent); }

/* ============================================================
   20. PARALLAX MEDIA
   ============================================================ */
/* One pattern for every scrolling image (hero, work cards, case
   media, team photo). The wrapper clips; the image is laid out at
   120% of the wrapper height, offset up by 10%, so it always covers
   the frame with travel headroom on both sides. motion.js scrubs the
   image between yPercent -7 and 7 (about 8.4% of the frame height,
   inside the 10% headroom), transform only.
   With JS off or reduced motion on, nothing moves and the image is
   simply a complete, slightly tighter cover crop: no gaps, no layout
   shift, because the wrapper owns the height (aspect-ratio or a fixed
   clamp) in every context that uses this class. */
.plx { overflow: hidden; }
.work-card-media, .case-media { position: relative; }
/* Descendant selector, not child: since v1.2.2 the image may sit
   inside a <picture> element (the WebP pattern in dg_img), and the
   absolutely positioned image must keep anchoring to the .plx
   wrapper, which is the nearest positioned ancestor. The static
   <picture> wrapper contributes no height of its own; every .plx
   context owns its frame height (fixed clamp or aspect-ratio). */
.plx img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  max-width: none;
  object-fit: cover;
}
/* Why and Principles media only (the .why-media frames on Home and
   About): the image no longer scrubs inside its frame. Since v1.2.14
   motion.js moves the whole card on a scrubbed lag instead, so the
   image rests as a plain full-frame cover here: no oversized layout,
   no headroom, exactly the frame's own crop at every scroll depth. */
.why-media.plx img {
  top: 0;
  height: 100%;
}

/* ============================================================
   SIDE RULER (desktop only)
   ============================================================ */
/* A slim fixed track at the right edge of the viewport echoing a
   ruler: short ticks every 44px, longer ticks at every fifth
   interval (220px), drawn with two repeating gradients anchored to
   the right so the ticks grow inward from the edge. The teal fill
   segment rides the outer (right) edge of the track and tracks
   overall page scroll progress (ui.js updates its height inside
   the rAF-throttled scroll handler; there is no transition on it,
   so under reduced motion it simply follows the scroll position).
   The percentage readout sits at the TOP of the track, just below
   the fixed header, so it can never collide with the WhatsApp
   float at the bottom right; the rotated Scroll label hangs under
   it, reading bottom to top. Shown only at 1200px and up, where
   the centered container (max 1440px with wide gutters) always
   leaves a margin for the track at right: 20px; z-index sits below
   the header (100) and the WhatsApp float (95). Pure decoration:
   pointer-events none, aria-hidden in the markup. */
.side-ruler { display: none; }
@media (min-width: 1200px) {
  /* The ruler track occupies roughly the outermost 20px to 34px of
     the right edge at these widths; move the fixed WhatsApp pill
     inward so it always clears the track. */
  :root { --float-right: 48px; }
  /* With the ruler visible it is the only right-edge scroll
     indicator, so the native scrollbar is hidden at these widths:
     Firefox via scrollbar-width on html, Chromium/Safari via the
     root element's scrollbar pseudo-element (which targets the
     viewport scrollbar). Scrolling itself is fully unaffected:
     wheel, touch, keyboard and Lenis all still work, and the ruler
     keeps showing scroll progress and its percentage. */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; }
  .side-ruler {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 14px;
    z-index: 90;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(to bottom, var(--line-hover) 0, var(--line-hover) 1px, transparent 1px, transparent 220px),
      repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 44px);
    background-size: 14px 100%, 8px 100%;
    background-repeat: repeat-y;
    background-position: right top;
  }
  .side-ruler-fill {
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 0%;
    background: var(--accent);
  }
  .side-ruler-pct {
    position: absolute;
    right: 0;
    top: calc(var(--header-total) + 14px);
    font-size: .625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--text-3);
    white-space: nowrap;
  }
  .side-ruler-label {
    position: absolute;
    right: -3px;
    top: calc(var(--header-total) + 46px);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--text-3);
  }
}

/* Motion safety net: motion.js adds .dg-motion-fallback to <html>
   when GSAP or ScrollTrigger failed to load, or when its reveal
   batch never registered (its watchdog checks on window load). In
   that case the JS-set hidden states on [data-reveal] elements are
   forced back to their natural visible state, so a single motion
   failure can never leave page content sitting invisible. When the
   motion system is healthy the class is never added and this rule
   never fires. */
html.dg-motion-fallback [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   21. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .systems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Keep the mega panel inside the viewport on small laptops/tablets. */
  .mega { width: min(680px, 88vw); gap: 22px; padding: 24px; }
}
@media (max-width: 900px) {
  /* The utility bar is desktop only: on mobile the panel carries the
     contact actions, and --utility-h drops out of every offset. */
  :root { --utility-h: 0px; }
  .utility-bar { display: none; }
  .main-nav, .header-actions .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-inner { gap: 16px; }
  .brand-name { font-size: 1.3125rem; }
  .brand img { width: 40px; height: 40px; }
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-actions { justify-content: flex-start; }
  .trust-list { grid-template-columns: repeat(2, 1fr); }
  .trust-list li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .trust-list li:nth-child(-n+2) { border-top: 0; }
  .why-grid, .two-col, .contact-grid, .case-item, .founder-grid { grid-template-columns: 1fr; }
  .case-item--portrait { grid-template-columns: 1fr; }
  .case-item--portrait .case-media { aspect-ratio: 1 / 1; max-height: none; }
  .founder-media { max-width: 420px; }
  .case-item:nth-child(even) .case-media { order: 0; }
  .work-grid { grid-template-columns: 1fr; }
  .work-offset { margin-top: 0; }
  .offer, .cta-grid { grid-template-columns: 1fr; }
  .page-hero-grid { grid-template-columns: 1fr; }
  .hub-hero-media { max-width: 560px; }
  .team-grid, .credentials-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .process-grid, .systems-grid, .post-grid, .footer-grid, .qa-grid { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 104px minmax(0, 1fr); }
  .team-body { padding: 20px; }
  .service-row { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 22px 8px; }
  .trust-list { grid-template-columns: 1fr; }
  .trust-list li { border-top: 1px solid var(--line); }
  .trust-list li:first-child { border-top: 0; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav .nav-next { text-align: left; }
  .wa-float .wa-label { display: none; }
  .wa-float { padding: 15px; border-radius: 50%; }
  .hero-media figcaption { display: none; }
  .footer-legal { justify-content: flex-start; }
}
@media (max-width: 480px) {
  /* Full-width stacked calls to action: no side-by-side squeeze, every
     target comfortably over 44px tall. */
  .hero-actions, .cta-direct, .page-hero .hero-actions { width: 100%; }
  .hero-actions .btn, .cta-direct .btn, .page-hero .hero-actions .btn,
  .mobile-actions .btn { flex: 1 1 100%; justify-content: center; }
  .enquiry-form { padding: 22px 18px; }
  .enquiry-form .btn { width: 100%; justify-content: center; }
  .offer { padding: 26px 20px; }
  .offer-code { font-size: .9375rem; letter-spacing: .1em; padding: 12px 16px; }
  .offer--coupon .offer-side { padding: 20px; }
  .offer--coupon .offer-side img { height: 44px; }
  .offer--coupon .offer-card-off { font-size: 1.625rem; }
  .credentials-row img, .footer-badges img { height: 42px; }
  .service-row { padding: 20px 4px; gap: 12px; }
  .footer-credentials { gap: 12px 18px; }
  .btn { padding: 15px 24px; }
}

/* ============================================================
   22. REDUCED MOTION AND PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-scroll .hs-track::after { animation: none; }
}
@media print {
  .site-header, .site-footer, .wa-float, .mobile-panel { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   23. AI MUNSHI DEMO PAGE
   The /ai-munshi-demo/ page (page-ai-munshi-demo.php): three
   check points, the "Try these" sample chips, the @n8n/chat
   mount and the WhatsApp hand-off. The widget is themed through
   the full variable set of the stylesheet it loads, plus scoped
   overrides for the surfaces its variables do not reach, all of
   it hung on the mount so nothing here can leak into the rest
   of the site.
   ============================================================ */
.demo-points { margin-bottom: clamp(30px, 4vw, 44px); }

.demo-try { margin-bottom: 18px; }
.demo-try-label {
  font-family: var(--font-head);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.demo-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-chip {
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s var(--ease-out);
}
.demo-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.demo-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#ai-munshi-chat {
  height: 600px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 4px 16px rgba(0, 0, 0, .35);

  /* @n8n/chat theming, taken from the variable list of the exact
     stylesheet the widget loads (@n8n/chat 1.x, dist/style.css).
     Every painted surface of the widget is set here in the site
     system: the teal leads, surfaces step up from the page
     background, and the visitor's own messages take the accent
     with the dark ink the primary buttons use. Names are the
     widget's own, spelled exactly as its stylesheet defines
     them; its primary family really does carry a double dash. */

  /* Base palette. The widget's internals derive from these: its
     markdown rules, table borders, code fallbacks and disabled
     states read the light shades and the disabled token, so on
     this dark stage they carry dark steps instead. */
  --chat--color--primary: var(--accent);
  --chat--color--primary-shade-50: #00CC8F;
  --chat--color--primary--shade-100: #00AD75;
  --chat--color--secondary: var(--accent);
  --chat--color-secondary-shade-50: #00CC8F;
  --chat--color-white: #FFFFFF;
  --chat--color-light: var(--bg);
  --chat--color-light-shade-50: #202025;
  --chat--color-light-shade-100: #2C2C33;
  --chat--color-medium: #3A3A41;
  --chat--color-dark: var(--text);
  --chat--color-disabled: #63636C;
  --chat--color-typing: var(--text-2);

  /* Type and shape. */
  --chat--font-family: var(--font-body);
  --chat--font-family--monospace: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --chat--spacing: 1rem;
  --chat--border-radius: var(--r-sm);
  --chat--transition-duration: .15s;

  /* Header band: a lifted surface over a hairline. */
  --chat--header--padding: 1rem 1.25rem;
  --chat--header--background: var(--surface-2);
  --chat--header--color: var(--text);
  --chat--header--border-bottom: 1px solid var(--line);
  --chat--heading--font-size: 1.375rem;
  --chat--subtitle--font-size: var(--small);
  --chat--subtitle--line-height: 1.45;

  /* Message stage and bubbles. Bot replies sit a step above the
     stage as bordered cards; the flat tail corner on each side
     is the widget's own. */
  --chat--body--background: var(--bg);
  --chat--messages-list--padding: 1.25rem;
  --chat--message--font-size: 1rem;
  --chat--message--padding: .75rem 1rem;
  --chat--message--border-radius: var(--r-md);
  --chat--message-line-height: 1.55;
  --chat--message--margin-bottom: .5rem;
  --chat--message--bot--background: var(--surface-2);
  --chat--message--bot--color: var(--text);
  --chat--message--bot--border: 1px solid var(--line);
  --chat--message--user--background: var(--accent);
  --chat--message--user--color: var(--accent-ink);
  --chat--message--user--border: none;
  --chat--message--pre--background: var(--bg-deep);
  --chat--message--actions--color: var(--accent);
  --chat--message--actions--gap: .75rem;
  --chat--message--actions--hover: #00CC8F;

  /* Buttons inside the widget: the get-started action and any
     option buttons a reply offers, in the site's pill shape. */
  --chat--button--padding: .7rem 1.5rem;
  --chat--button--border-radius: var(--r-pill);
  --chat--button--font-size: .9375rem;
  --chat--button--line-height: 1;
  --chat--button--color--primary: var(--accent-ink);
  --chat--button--background--primary: var(--accent);
  --chat--button--border--primary: none;
  --chat--button--color--primary--hover: var(--accent-ink);
  --chat--button--background--primary--hover: #00CC8F;
  --chat--button--border--primary--hover: none;
  --chat--button--color--primary--disabled: #8A8A92;
  --chat--button--background--primary--disabled: #26262C;
  --chat--button--border--primary--disabled: none;
  --chat--button--color--secondary: var(--text);
  --chat--button--background--secondary: #26262C;
  --chat--button--border--secondary: none;
  --chat--button--color--secondary--hover: var(--text);
  --chat--button--background--secondary--hover: #2F2F37;
  --chat--button--border--secondary--hover: none;
  --chat--button--color--secondary--disabled: #6B6B73;
  --chat--button--background--secondary--disabled: #1B1B1F;
  --chat--button--border--secondary--disabled: none;

  /* Composer. The footer strip blends into the stage under a
     hairline, and the input container reads as one rounded
     field on it: transparent textarea, the send action filled
     with the accent, the file action quiet (it only renders
     when a workflow enables uploads). */
  --chat--footer--background: var(--bg);
  --chat--footer--color: var(--text-3);
  --chat--footer--padding: .85rem 1rem 1rem;
  --chat--footer--border-top: 1px solid var(--line);
  --chat--input--container--background: var(--surface);
  --chat--input--container--border: 1px solid var(--line);
  --chat--input--container--border-radius: var(--r-md);
  --chat--input--container--padding: 6px;
  --chat--input--width: 100%;
  --chat--input--font-size: 1rem;
  --chat--input--background: transparent;
  --chat--input--text-color: var(--text);
  --chat--input--line-height: 1.5;
  --chat--input--padding: .75rem .9rem;
  --chat--input--border: 0;
  --chat--input--border-active: 0;
  --chat--input--border-radius: var(--r-md);
  --chat--input--placeholder--font-size: 1rem;
  --chat--input--left--panel--width: 2rem;
  --chat--input--button--border-radius: 11px;
  --chat--textarea--height: 48px;
  --chat--textarea--max-height: 10rem;
  --chat--input--send--button--background: var(--accent);
  --chat--input--send--button--color: var(--accent-ink);
  --chat--input--send--button--background-hover: #00CC8F;
  --chat--input--send--button--color-hover: var(--accent-ink);
  --chat--input--file--button--background: transparent;
  --chat--input--file--button--color: var(--text-2);
  --chat--input--file--button--background-hover: rgba(255, 255, 255, .06);
  --chat--input--file--button--color-hover: var(--accent);
  --chat--files-spacing: .25rem;
}

/* Widget surfaces its variables do not reach, and the polish on
   top, all scoped to the mount. Class names are the ones the
   loaded stylesheet defines: header typography, the muted
   subtitle, a faint top light on the stage so an empty panel
   reads as a lit product surface rather than a void, the
   composer focus ring and placeholder, the disabled send
   state, thin scrollbars, message links, the file chip, and a
   gentle rise as each message lands. */
#ai-munshi-chat .chat-header { gap: .25rem; }
#ai-munshi-chat .chat-header h1 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -.01em;
}
#ai-munshi-chat .chat-header p { color: var(--text-2); }

#ai-munshi-chat .chat-body {
  background-image: radial-gradient(640px 320px at 50% -80px, rgba(0, 229, 160, .055), rgba(0, 229, 160, 0) 70%);
}

#ai-munshi-chat .chat-inputs:focus-within {
  border-color: rgba(0, 229, 160, .55);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
#ai-munshi-chat .chat-inputs textarea::placeholder { color: var(--text-3); opacity: 1; }
#ai-munshi-chat .chat-input-send-button[disabled] { background: #232329; color: #63636C; }
#ai-munshi-chat .chat-input-send-button:focus-visible,
#ai-munshi-chat .chat-input-file-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#ai-munshi-chat .chat-button:focus { box-shadow: 0 0 0 .2rem rgba(0, 229, 160, .35); }

#ai-munshi-chat .chat-body,
#ai-munshi-chat .chat-layout,
#ai-munshi-chat .chat-inputs textarea {
  scrollbar-width: thin;
  scrollbar-color: #2E2E35 transparent;
}
#ai-munshi-chat .chat-body::-webkit-scrollbar,
#ai-munshi-chat .chat-layout::-webkit-scrollbar,
#ai-munshi-chat .chat-inputs textarea::-webkit-scrollbar { width: 8px; height: 8px; }
#ai-munshi-chat .chat-body::-webkit-scrollbar-thumb,
#ai-munshi-chat .chat-layout::-webkit-scrollbar-thumb,
#ai-munshi-chat .chat-inputs textarea::-webkit-scrollbar-thumb {
  background: #2E2E35;
  border-radius: var(--r-pill);
}
#ai-munshi-chat .chat-body::-webkit-scrollbar-thumb:hover,
#ai-munshi-chat .chat-layout::-webkit-scrollbar-thumb:hover { background: #3A3A42; }
#ai-munshi-chat .chat-body::-webkit-scrollbar-track,
#ai-munshi-chat .chat-layout::-webkit-scrollbar-track,
#ai-munshi-chat .chat-inputs textarea::-webkit-scrollbar-track { background: transparent; }

#ai-munshi-chat .chat-message-from-bot .n8n-markdown a { color: var(--accent); }
#ai-munshi-chat .chat-message-from-user .n8n-markdown a:hover { color: var(--accent-ink); }

#ai-munshi-chat .chat-powered-by { font-size: var(--eyebrow-size); padding-top: .5rem; }
#ai-munshi-chat .chat-file {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line-hover);
}
#ai-munshi-chat ::selection { background: var(--accent-dim); }

@keyframes dg-chat-msg-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
#ai-munshi-chat .chat-message { animation: dg-chat-msg-in .35s var(--ease-out) both; }

/* Code inside messages. The widget ships a light syntax palette
   with a white block behind it; its dark variant only applies
   when a data-theme attribute the embed never sets is present.
   This is the widget's own dark palette, applied directly. */
#ai-munshi-chat .hljs { background: transparent; color: #ADBAC7; }
#ai-munshi-chat .hljs-doctag,
#ai-munshi-chat .hljs-keyword,
#ai-munshi-chat .hljs-meta .hljs-keyword,
#ai-munshi-chat .hljs-template-tag,
#ai-munshi-chat .hljs-template-variable,
#ai-munshi-chat .hljs-type,
#ai-munshi-chat .hljs-variable.language_ { color: #F47067; }
#ai-munshi-chat .hljs-title,
#ai-munshi-chat .hljs-title.class_,
#ai-munshi-chat .hljs-title.class_.inherited__,
#ai-munshi-chat .hljs-title.function_ { color: #DCBDFB; }
#ai-munshi-chat .hljs-attr,
#ai-munshi-chat .hljs-attribute,
#ai-munshi-chat .hljs-literal,
#ai-munshi-chat .hljs-meta,
#ai-munshi-chat .hljs-number,
#ai-munshi-chat .hljs-operator,
#ai-munshi-chat .hljs-variable,
#ai-munshi-chat .hljs-selector-attr,
#ai-munshi-chat .hljs-selector-class,
#ai-munshi-chat .hljs-selector-id { color: #6CB6FF; }
#ai-munshi-chat .hljs-regexp,
#ai-munshi-chat .hljs-string,
#ai-munshi-chat .hljs-meta .hljs-string { color: #96D0FF; }
#ai-munshi-chat .hljs-built_in,
#ai-munshi-chat .hljs-symbol { color: #F69D50; }
#ai-munshi-chat .hljs-comment,
#ai-munshi-chat .hljs-code,
#ai-munshi-chat .hljs-formula { color: #768390; }
#ai-munshi-chat .hljs-name,
#ai-munshi-chat .hljs-quote,
#ai-munshi-chat .hljs-selector-tag,
#ai-munshi-chat .hljs-selector-pseudo { color: #8DDB8C; }
#ai-munshi-chat .hljs-section { color: #316DCA; font-weight: 700; }
#ai-munshi-chat .hljs-bullet { color: #EAC55F; }
#ai-munshi-chat .hljs-addition { color: #B4F1B4; background-color: #1B4721; }
#ai-munshi-chat .hljs-deletion { color: #FFD8D3; background-color: #78191B; }
.demo-noscript { padding: 24px; color: var(--text-2); }

.demo-actions { margin-top: 26px; }
.demo-fineprint { margin-top: 16px; font-size: var(--small); }

@media (max-width: 640px) {
  #ai-munshi-chat { height: 540px; }
  .demo-actions .btn { width: 100%; justify-content: center; }
}