/* Google Fonts loaded via wp_enqueue_style in inc/enqueue.php so it does
   NOT render-block main.css. The @import used to sit here. */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #1a1a1a;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
a:focus-visible { outline: 2px solid #64ceff; outline-offset: 2px; border-radius: 4px; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font-family: inherit; border: none; outline: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #64ceff;
  outline-offset: 2px;
}

.container {
  max-width: 1244px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ========== TYPOGRAPHY ========== */
.section-label {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: #1a1a1a;
}

.section-label strong {
  font-weight: 800;
}

/* "Why Realway?" — ultra-spaced mixed-weight variant */
.section-label--why {
  letter-spacing: 0.5em;
  font-weight: 400;
  font-size: 2.1rem;
}

.section-label--why strong {
  font-weight: 800;
  letter-spacing: 0.42em;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.35;
  margin-bottom: 1rem;
  color: #111827;
}

.section-subtitle {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.7;
  max-width: 780px;
}

/* Paper-plane arrow used inside CTAs (CSS mask so it follows currentColor).
 * Asset is the SVG exported from Figma node 1:4710 ("Get a Quote" icon). */
/* Paper-plane arrow used inside CTAs. Embedded as a data-URI mask so it
 * follows currentColor on any background (header, blue pill, yellow pill,
 * dark text, etc.) and can never break from external file path / cache /
 * SVG-sizing quirks. SVG path comes from Figma node 1:4710. */
.arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: -0.15em;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='black' d='M25.6641 0.0210021C25.6641 0.0151062 25.6578 0.0113759 25.6526 0.0142317L0.130307 14.1455C-0.0606511 14.2564 -0.0333714 14.5058 0.157586 14.589L7.52199 17.0925C7.66724 17.1419 7.85198 17.2209 7.95958 17.1116L19.3352 7.35388C19.5534 7.15984 19.8262 7.43704 19.6626 7.68653L12.0037 18.4015C11.9447 18.4839 11.8606 18.5626 11.8606 18.664L11.7787 25.7605C11.7787 26.01 12.0788 26.0931 12.2152 25.8714L14.9159 21.242C15.0234 21.0781 14.8219 20.8923 14.6892 20.748L13.7156 19.6896C13.5519 19.5233 13.7156 19.2184 13.9611 19.3015L15.6252 19.856L21.1084 21.7133C21.2448 21.7687 21.3812 21.6855 21.4085 21.5469L25.9915 0.285079C26.0446 0.0958888 25.8385 -0.0669507 25.6765 0.0277858C25.6711 0.0309185 25.6641 0.0272091 25.6641 0.0210021Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='black' d='M25.6641 0.0210021C25.6641 0.0151062 25.6578 0.0113759 25.6526 0.0142317L0.130307 14.1455C-0.0606511 14.2564 -0.0333714 14.5058 0.157586 14.589L7.52199 17.0925C7.66724 17.1419 7.85198 17.2209 7.95958 17.1116L19.3352 7.35388C19.5534 7.15984 19.8262 7.43704 19.6626 7.68653L12.0037 18.4015C11.9447 18.4839 11.8606 18.5626 11.8606 18.664L11.7787 25.7605C11.7787 26.01 12.0788 26.0931 12.2152 25.8714L14.9159 21.242C15.0234 21.0781 14.8219 20.8923 14.6892 20.748L13.7156 19.6896C13.5519 19.5233 13.7156 19.2184 13.9611 19.3015L15.6252 19.856L21.1084 21.7133C21.2448 21.7687 21.3812 21.6855 21.4085 21.5469L25.9915 0.285079C26.0446 0.0958888 25.8385 -0.0669507 25.6765 0.0277858C25.6711 0.0309185 25.6641 0.0272091 25.6641 0.0210021Z'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
}

/* ========== HEADER / NAV ========== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  height: 90px;
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: #1a1a1a;
}

.logo img {
  display: block;
  height: 32px;
  width: auto;
}

/* Header logo: REALWAY wordmark on desktop, compact "R" mark on
 * mobile (mobile-logo.svg). Both <img>s ship in the DOM; CSS toggles
 * which one is visible. */
.logo .logo-mobile { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-links a {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #000;
  transition: opacity 0.2s;
}

.nav-links a:hover { opacity: 0.6; }
.nav-links a.active,
.nav-links a[aria-current="page"] {
  font-weight: 800;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.nav-links a:focus-visible {
  outline: 2px solid #64ceff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* JS-injected mobile-only chrome (brand block + social row + extra
 * Portfolio/Blog links). Hidden on desktop; the mobile breakpoint
 * redefines its own layout. */
.nav-links-brand,
.nav-links-social,
.nav-links-mobile-only { display: none; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-portfolio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 1.5rem;
  background: #ffc527;
  color: #000;
  border-radius: 79px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s;
}

.btn-portfolio:hover { background: #e6b020; }

.btn-quote {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 42px;
  padding: 0 1.5rem;
  background: #64ceff;
  color: #000;
  border-radius: 79px;
  font-size: 1rem;
  font-weight: 500;
  transition: background 0.2s;
  cursor: pointer;
  border: none;
}

.btn-quote:hover { background: #4abfef; }
.btn-quote .arrow { width: 1.4em; height: 1.4em; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #1a1a1a;
  transition: 0.3s;
}

/* ========== HERO ==========
 * Per Figma (file a8PCqTK02TkaAL3EiAx49E): the homepage showreel raster
 * is 1920x796 (~2.41:1). We let it dictate hero height via aspect-ratio
 * so the bubbles + phone mock are never cropped at top or bottom. The
 * white "chat bubble" card with the H1 sits centered-left over the
 * highlighted middle bubble, exactly as in the Figma layout.
 */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 796;
  min-height: 420px;
  max-height: 820px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inner pages still need the dark overlay; the homepage hero supplies its
 * own contrast via the white card so we leave the image untouched. */
.hero-bg::after { content: none; }

.hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Homepage hero: shifted below the fixed 90px header so the showreel
 * raster shows in full without being clipped at top. Card sits centred
 * vertically, anchored to the left side per Figma. */
.hero--home {
  margin-top: 90px;
  align-items: center;
}

.hero-content {
  max-width: 660px;
  color: #000;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Hero "chat bubble" treatment - per-line white pill backgrounds
 * behind the H1 instead of a single solid white card. Same idiom as
 * .text-pill on .why-text h3 but white. The .hero-card wrapper is
 * kept as a width constraint only (no bg/shadow/padding of its own);
 * the visible blob lives on the H1 via box-decoration-break: clone. */
.hero-card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: 540px;
}

.hero h1 {
  font-size: clamp(1.35rem, 1.7vw, 1.65rem);
  font-weight: 400;
  line-height: 1.95;
  margin: 0;
  letter-spacing: -0.005em;
  color: #1a1a1a;
  display: inline;
  background: #f3f3f3;
  padding: 0.22em 0.55em;
  border-radius: 0.45em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.hero h1 strong { font-weight: 800; color: #000; }

/* === Watch Showreel ========================================================
 * Two variants per Figma file j0xMZJZvXYfSUX93gW9P0p:
 *
 *   .watch-showreel--pill    → horizontal 258×62 pink pill (portfolio,
 *                              process, video-detail). Solid #e31f55,
 *                              white 40px disc with red triangle, white
 *                              SemiBold 20px label.
 *
 *   .watch-showreel--circle  → standalone 92×92 round red disc with a
 *                              small label below (homepage hero only).
 * ========================================================================= */
.watch-showreel {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
}

.watch-showreel:focus-visible { outline: none; }

/* --- Pill variant (portfolio / process / video-detail) ------------------- */
.watch-showreel--pill { color: #fff; }

.watch-showreel--pill:focus-visible .watch-showreel-bar {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.watch-showreel-bar {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  height: 62px;
  min-width: 258px;
  max-width: 100%;
  padding: 0 24px 0 16px;
  border-radius: 999px;
  background: #e31f55;
  box-shadow: 0 8px 24px rgba(227, 31, 85, 0.32);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.watch-showreel--pill:hover .watch-showreel-bar {
  background: #c81a4b;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(227, 31, 85, 0.4);
}

.watch-showreel-play {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e31f55;
  transition: transform 0.2s;
}

.watch-showreel--pill:hover .watch-showreel-play { transform: scale(1.06); }

.watch-showreel-play-icon {
  display: block;
  width: 13px;
  height: auto;
  margin-left: 2px;
}

.watch-showreel-label {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
}

/* --- Circle variant (homepage hero) -------------------------------------- */
.watch-showreel--circle {
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  color: #000;
}

.watch-showreel--circle:focus-visible .watch-showreel-disc {
  outline: 2px solid #64ceff;
  outline-offset: 4px;
}

.watch-showreel-disc {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #e31f55;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 12px 32px rgba(227, 31, 85, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}

.watch-showreel--circle:hover .watch-showreel-disc {
  transform: scale(1.05);
  box-shadow: 0 16px 38px rgba(227, 31, 85, 0.55);
}

.watch-showreel-disc-icon {
  display: block;
  width: 26px;
  height: auto;
  margin-left: 4px;
}

.watch-showreel-text {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #000;
}

/* ========== SERVICES ========== */
.services {
  padding: 5rem 0 4rem;
  background: #fafafa;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.25rem;
}

.service-card { position: relative; transition: transform 0.25s ease; }
.service-card:hover { transform: translateY(-4px); }

.service-card .thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #e8e8e8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease;
}

.service-card:hover .thumb { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); }

.service-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .thumb img { transform: scale(1.04); }

.service-tag {
  display: inline-block;
  background: #eee;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.55rem;
}

.service-card p {
  font-size: 0.88rem;
  color: #666;
  line-height: 1.65;
}

.service-more {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========== WHY REALWAY ========== */
.why-realway { padding: 5.5rem 0; }
.why-realway > .container > .section-label { margin-bottom: 2rem; }

.why-realway-grid {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 1.5rem;
}

.why-visual {
  border-radius: 18px;
  overflow: hidden;
  background: #eee;
  aspect-ratio: 4/3;
}

.why-visual img { width: 100%; height: 100%; object-fit: cover; }

/* "Highlight pill" wrap for big headlines - matches the soft gray rounded
 * background-per-line treatment used in Figma (e.g. Why Realway h3,
 * CTA banner, process step summary). Uses box-decoration-break: clone
 * so each wrapped line becomes its own pill. The `line-height` controls
 * vertical breathing room between pills. */
.text-pill {
  background-color: #ededed;
  padding: 0.1em 0.35em;
  border-radius: 0.4em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.why-text h3 {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.55;
  margin-bottom: 1.5rem;
  color: #111827;
}

.why-text h3 strong {
  font-weight: 800;
}

.why-text p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.why-text .link {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ========== INDUSTRIES ========== */
.industries {
  padding: 5.5rem 0;
  background: #fafafa;
}

.industries-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.25rem;
  gap: 1.5rem;
}

.industries-top .right-text {
  font-size: 2rem;
  font-weight: 300;
  color: #111827;
  line-height: 1.3;
  max-width: 600px;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2rem;
  row-gap: 2.25rem;
}

.industry-card { transition: transform 0.25s ease; }
.industry-card:hover { transform: translateY(-3px); }

.industry-card .thumb {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 0.85rem;
  background: #e8e8e8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.25s ease;
}

.industry-card:hover .thumb { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); }

.industry-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.industry-card:hover .thumb img { transform: scale(1.05); }

.industry-tag {
  display: inline-block;
  background: #e8e8e8;
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
}

.industry-card p {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.6;
}

.see-more {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========== CTA BANNER ========== */
.cta-banner { padding: 5.5rem 0; }

.cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.cta-banner h2 {
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.25;
  max-width: 780px;
  color: #111827;
}

.cta-banner h2 strong { font-weight: 700; }

.btn-free-quote {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.9rem;
  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
  color: #fff;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: filter 0.2s, transform 0.2s;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.28);
}

.btn-free-quote:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-free-quote .arrow { width: 1.1em; height: 1.1em; }

/* ========== TESTIMONIALS ========== */
.testimonials {
  padding: 5rem 0 3rem;
  background: #fff;
}

.testimonials-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 2rem;
}

.testimonials-header .right-quote {
  font-size: 2.1rem;
  font-weight: 300;
  font-style: italic;
  color: #111827;
  max-width: 440px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: #f5f5f5;
  border-radius: 16px;
  padding: 1.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
}

.testimonial-card blockquote {
  font-size: 0.88rem;
  color: #444;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
}

.testimonial-author { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 1rem; }
.testimonial-author .name { font-size: 0.92rem; font-weight: 700; }
.testimonial-author .role { font-size: 0.78rem; color: #888; }

/* Small client logo at bottom of each testimonial card.
 * max-width keeps long horizontal logos (greco, fast track) from blowing
 * up the card on narrow viewports per design feedback. */
.testimonial-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: left center;
  margin-top: auto;
  align-self: flex-start;
  opacity: 0.85;
}

.client-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

/* Per design feedback: client logos at 100% so they read as clickable
 * brand marks, not ghosted decoration. */
.client-logo {
  display: block;
  height: 26px;
  width: auto;
  opacity: 1;
  transition: transform 0.2s;
}

.client-logo:hover { transform: translateY(-2px); }

.testimonial-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  justify-content: flex-end;
}

.testimonial-nav button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #1a1a1a;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.testimonial-nav button:hover { background: #1a1a1a; color: #fff; }
.testimonial-nav button:hover svg { stroke: #fff; }
.testimonial-nav button svg { width: 14px; height: 14px; }

/* ========== CONTACT / LET'S TALK ========== */
.contact { padding: 5.5rem 0; }

.contact-heading {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

.contact-heading strong { font-weight: 700; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 1.75rem;
}

.contact-left h3 {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.contact-left p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 2rem;
}

.contact-info { display: flex; flex-direction: column; gap: 1rem; }

.contact-info-item { display: flex; align-items: center; gap: 1rem; }

.contact-info-item .icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-item .icon-circle svg { width: 18px; height: 18px; fill: #fff; }

.contact-info-item .info-text .info-label {
  display: block;
  font-size: 0.78rem;
  color: #888;
  font-weight: 500;
}

.contact-info-item .info-text span { font-size: 0.92rem; font-weight: 600; }

.contact-form { display: flex; flex-direction: column; gap: 0.75rem; }
.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-group label { font-size: 0.78rem; font-weight: 600; color: #555; }

.form-group input,
.form-group textarea {
  padding: 0.9rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.88rem;
  background: #fafafa;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus { border-color: #64ceff; }
.form-group textarea { resize: vertical; min-height: 130px; }

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 2rem;
  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
  color: #fff;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: filter 0.2s, transform 0.2s;
  align-self: flex-start;
  margin-top: 0.6rem;
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.28);
}

.btn-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-submit .arrow { width: 1.1em; height: 1.1em; }

/* ========== FLUENT FORMS OVERRIDES (contact page) ========== */
/* Map Fluent Form's generated markup onto our .contact-form design. */
.contact-form-wrap .frm-fluent-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-form-wrap .ff-el-group,
.contact-form-wrap .ff-t-container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-form-wrap .ff-el-input--label label,
.contact-form-wrap .ff-el-form-check-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #555;
  margin: 0;
}
.contact-form-wrap .ff-el-form-control,
.contact-form-wrap textarea.ff-el-form-control,
.contact-form-wrap select.ff-el-form-control {
  padding: 0.9rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.contact-form-wrap .ff-el-form-control:focus,
.contact-form-wrap textarea.ff-el-form-control:focus,
.contact-form-wrap select.ff-el-form-control:focus {
  border-color: #64ceff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(100, 206, 255, 0.15);
}
.contact-form-wrap textarea.ff-el-form-control {
  resize: vertical;
  min-height: 130px;
}
.contact-form-wrap .ff-btn-submit,
.contact-form-wrap button.ff-btn.ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.9rem 1.75rem;
  border: 0;
  border-radius: 999px;
  background: #64ceff;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
.contact-form-wrap .ff-btn-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.contact-form-wrap .ff-message-success {
  background: #eafff2;
  border: 1px solid #22c55e;
  color: #14532d;
  padding: 0.9rem 1rem;
  border-radius: 8px;
}

/* ========== FOOTER ========== */
.footer {
  padding: 3.5rem 0 1.5rem;
  border-top: 1px solid #e5e5e5;
  background: #fff;
  color: #1a1a1a;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-bottom: 2.5rem;
}

.footer-brand .logo { margin-bottom: 0.5rem; }
.footer-brand .logo img { height: 22px; }

.footer-brand .tagline {
  font-size: 0.7rem;
  color: #888;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* Footer social icons: monochrome glyph set per design feedback —
 * filled YT play tile, outlined IG camera, bold "f" lockup, bold "in"
 * lockup. All glyphs sit on a 28x28 transparent canvas so the row
 * baselines line up. */
.footer-social { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.75rem; }

.footer-social a {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 1;
}

.footer-social a:hover { transform: translateY(-1px); opacity: 0.7; }
.footer-social a svg { display: none; }

/* YouTube: filled black rounded rectangle with white play triangle. */
.footer-social a[aria-label="YouTube"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'><rect width='28' height='20' rx='5' fill='%231a1a1a'/><path d='M11.5 6.2 L18 10 L11.5 13.8 Z' fill='%23fff'/></svg>");
  background-size: 28px auto;
}
/* Instagram: outlined rounded-square camera with circle lens + corner dot. */
.footer-social a[aria-label="Instagram"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><rect x='2.5' y='2.5' width='23' height='23' rx='6' fill='none' stroke='%231a1a1a' stroke-width='2.4'/><circle cx='14' cy='14' r='5.4' fill='none' stroke='%231a1a1a' stroke-width='2.4'/><circle cx='20.7' cy='7.3' r='1.5' fill='%231a1a1a'/></svg>");
}
/* Facebook: lowercase bold "f" lockup, no circle. */
.footer-social a[aria-label="Facebook"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'><text x='0' y='24' font-family='Arial, Helvetica, sans-serif' font-weight='900' font-size='28' fill='%231a1a1a'>f</text></svg>");
  width: 18px;
}
/* LinkedIn: lowercase bold "in" lockup, no circle. */
.footer-social a[aria-label="LinkedIn"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'><text x='0' y='24' font-family='Arial, Helvetica, sans-serif' font-weight='900' font-size='24' fill='%231a1a1a'>in</text></svg>");
  width: 32px;
}

.footer-email { display: flex; align-items: center; gap: 0.75rem; }

.footer-email .icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-email .icon-circle svg { width: 16px; height: 16px; fill: #fff; }
.footer-email-label { display: block; font-size: 0.72rem; color: #888; }
.footer-email span { font-size: 0.88rem; font-weight: 600; }

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.footer-links > div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-links a {
  display: block;
  font-size: 0.82rem;
  color: #444;
  line-height: 1.4;
  transition: color 0.2s;
}

.footer-links a:hover { color: #000; }

/* Per design feedback: drop the thin separator above the copyright line
 * and switch the text from light grey to solid black so it matches the
 * rest of the footer typography. */
.footer-bottom {
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.7rem;
  color: #1a1a1a;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.footer-legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.footer-legal a:hover { border-bottom-color: currentColor; }

/* ========== PAGE HERO (inner pages) ========== */
.page-hero {
  padding-top: 130px;
  padding-bottom: 2.5rem;
}

.page-hero h1 {
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.page-hero--blog h1 {
  text-transform: none;
  letter-spacing: 0.18em;
  font-weight: 400;
}

.page-hero--blog h1 strong {
  font-weight: 700;
}

/* Default body paragraph in a page-hero. The :not() filter excludes
 * the lead-in (.page-hero-heading) which has its own larger
 * typography rule below. */
.page-hero p:not(.page-hero-heading) {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: 1.5rem;
}

/* Pricing/intro lead-in. Sized like .why-text h3 so the typographic
 * scale matches across pages per design feedback. */
.page-hero-heading {
  font-size: 2.6rem;
  font-weight: 400;
  color: #111827;
  line-height: 1.25;
  max-width: 880px;
  margin-bottom: 1.25rem;
}

/* ========== PORTFOLIO PAGE ========== */
/* Custom "Change category" dropdown matching the Figma reference - a
 * pill trigger that expands into a stacked list of category pill
 * options. Implemented with role="listbox" / role="option" buttons so
 * it stays accessible without giving up the design (native <select>
 * couldn't deliver the per-row pills, big tap targets, or the active
 * yellow-highlight state from the design feedback). */

/* Native <select> styled as a pill — used by the WordPress build so filter
 * changes trigger a lightweight server-side reload (form GET submit). */
.category-pill-form { display: inline-block; margin-bottom: 1.5rem; }
.category-pill {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 2.6rem 0.7rem 1.4rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 999px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>") no-repeat right 1.1rem center;
  background-size: 12px 8px;
  font: 500 0.95rem/1.2 inherit;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  cursor: pointer;
  min-width: 220px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.category-pill:hover { background-color: #f5f5f5; }
.category-pill:focus-visible { outline: 2px solid #ffc527; outline-offset: 2px; }
@media (max-width: 700px) {
  .category-pill-form { display: block; width: 100%; }
  .category-pill { width: 100%; min-width: 0; }
}

/* Legacy .category-dropdown listbox styles removed — WP archive uses
   native <select class="category-pill"> now (see .category-pill rules
   below and .category-pill-form container). */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.portfolio-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #eee;
  aspect-ratio: 16/9;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  display: block;
}

.portfolio-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); }
.portfolio-item > img:first-of-type {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
  display: block;
}
.portfolio-item:hover > img:first-of-type { transform: scale(1.04); }

.portfolio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Per design feedback: every thumbnail needs an inline tag, a centered
 * red play button, and the client logo over the image. */
.portfolio-item-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  background: #1a1a1a;
  color: #fff;
  padding: 0.45rem 0.95rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* Red play button revealed on hover over the portfolio thumbnail. */
.portfolio-item-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e31f55;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(227, 31, 85, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.portfolio-item-play svg {
  width: 18px;
  height: auto;
  color: #fff;
  margin-left: 4px;
  display: block;
}

.portfolio-item:hover .portfolio-item-play,
.portfolio-item:focus-visible .portfolio-item-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 12px 28px rgba(227, 31, 85, 0.55);
}

.portfolio-item-client {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  height: 26px;
  width: auto;
  max-width: 110px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.portfolio-video-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  gap: 2rem;
}

.portfolio-video-info h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.portfolio-video-info p { font-size: 0.82rem; color: #666; max-width: 400px; line-height: 1.6; }

.portfolio-play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.portfolio-play-btn:hover { background: #444; }
.portfolio-play-btn svg { fill: #fff; width: 18px; height: 18px; margin-left: 3px; }

/* ========== PROCESS PAGE ========== */
.process-steps { padding: 3rem 0 5rem; }

/* Process step desktop layout: two columns with the title spanning the
 * column the visual is NOT in (so it sits above the description block).
 * The .process-step--visual-left/right modifiers swap which column
 * holds the image. Mobile reuses the same DOM but reorders to the
 * universal title -> image -> text flow per design feedback. */
.process-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 3rem;
  align-items: start;
  margin-bottom: 5rem;
}

.process-step--visual-left {
  grid-template-areas:
    "visual title"
    "visual content";
}

.process-step--visual-right {
  grid-template-areas:
    "title visual"
    "content visual";
}

.process-step .process-step-title { grid-area: title; }
.process-step .process-step-visual { grid-area: visual; }
.process-step .process-step-content { grid-area: content; }

.process-step-visual {
  border-radius: 16px;
  overflow: hidden;
  background: #eee;
  aspect-ratio: 16/9;
}

.process-step-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Step heading "1 DISCOVERY" - now its own grid item so the title sits
 * on its own row above the description block. */
.process-step-title {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  color: #1a1a1a;
}

.process-step-title .step-number {
  font-weight: 800;
  letter-spacing: 0.18em;
  margin-right: 0.4em;
  font-size: 1.1em;
}

/* Summary is the dominant text in each row. Sized to match the
 * .why-text h3 treatment used on the index page (2.25rem / 1.55 LH)
 * so the typography reads consistently across pages per design
 * feedback. */
.process-step-summary {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.55;
  margin-bottom: 1.6rem;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}

/* On mobile the per-line gray pill background reads as visual noise at
 * the smaller font - drop it and just show the plain text. */
@media (max-width: 768px) {
  .process-step-summary .text-pill {
    background-color: transparent;
    padding: 0;
  }
}

.process-step-summary strong { font-weight: 700; }

/* Description paragraphs share the same .why-text p sizing so all body
 * copy across the site lives at one rhythm. The :not() filter is
 * needed because the summary lives inside the same container - without
 * it the lower-specificity .process-step-summary rule would lose to
 * `.process-step-content p`. */
.process-step-content p:not(.process-step-summary) {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.8;
}

/* ========== PRICING PAGE ========== */
.pricing { padding: 3rem 0 5rem; }

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 2rem;
  margin-bottom: 3.5rem;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card-body {
  border: 1px solid #1a1a1a;
}

.pricing-card--advanced { margin-left: -1px; }
.pricing-card--premium { margin-left: -1px; }

/* Folder-tab heading */
.pricing-card-head {
  display: flex;
  justify-content: flex-start;
  padding: 0;
}

.pricing-card-head h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: #1a1a1a;
  margin: 0;
  border: 1px solid #1a1a1a;
  border-bottom: none;
  padding: 0.7rem 1rem;
  width: 60%;
  text-align: center;
  box-sizing: border-box;
}

.pricing-card-head--blue h3 { background: #64ceff; }

.pricing-card-head--premium { position: relative; }
/* Single yellow across the PREMIUM tier (tab, highlights, button) per
 * design feedback - the previous pale tab + bright feature pills read
 * as two separate yellows. */
.pricing-card-head--premium h3 { background: #ffc527; }

/* Badge + timer */
.pricing-badge-wrap {
  position: absolute;
  top: -22px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* 12-point starburst - matches Figma pricing badge.
 * Points calculated as outer R=50, inner R=35, 24 vertices alternating. */
.pricing-badge {
  background: #1a1a1a;
  color: #ffc527;
  font-size: 0.78rem;
  font-weight: 800;
  width: 64px;
  height: 64px;
  clip-path: polygon(
    50% 0%, 59% 16%, 75% 7%, 75% 25%, 93% 25%, 84% 41%,
    100% 50%, 84% 59%, 93% 75%, 75% 75%, 75% 93%, 59% 84%,
    50% 100%, 41% 84%, 25% 93%, 25% 75%, 7% 75%, 16% 59%,
    0% 50%, 16% 41%, 7% 25%, 25% 25%, 25% 7%, 41% 16%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  transform: rotate(8deg);
}

.pricing-badge .percent { font-size: 1.05rem; }

.pricing-timer {
  font-size: 0.6rem;
  font-weight: 800;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

/* Card body */
.pricing-card-body {
  padding: 1.5rem 1.6rem 1.85rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pricing-card .desc {
  font-size: 0.85rem;
  font-style: italic;
  color: #555;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 2rem;
  flex-grow: 1;
  list-style: none;
  padding: 0;
}

.pricing-features li {
  display: inline-block;
  width: fit-content;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  padding: 0.22rem 0.55rem;
  border-radius: 3px;
  background: #ededed;
}

.pricing-features li.highlight--blue { background: #64ceff; }
.pricing-features li.highlight--yellow { background: #ffc527; }

/* Pricing buttons */
.btn-pricing {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.2s;
  margin-top: auto;
}

.pricing-card--standard .btn-pricing,
.pricing-card--essential .btn-pricing { align-self: flex-start; }
.pricing-card--advanced .btn-pricing { align-self: center; }
.pricing-card--premium .btn-pricing { align-self: flex-end; }

.btn-pricing--outline {
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  background: transparent;
}

.btn-pricing--outline:hover { background: #1a1a1a; color: #fff; }

.btn-pricing--filled {
  background: #64ceff;
  color: #1a1a1a;
  border: 1px solid #64ceff;
}

.btn-pricing--filled:hover { background: #4abfef; border-color: #4abfef; }

.btn-pricing--yellow {
  background: #ffc527;
  color: #1a1a1a;
  border: 1px solid #ffc527;
}

.btn-pricing--yellow:hover { background: #e6b020; border-color: #e6b020; }

.pricing-report {
  background: #f5f5f5;
  border-radius: 16px;
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.pricing-report h3 { font-size: 1.45rem; font-weight: 400; line-height: 1.55; margin-bottom: 1rem; }
.pricing-report h3 strong { font-weight: 800; }
.pricing-report p { font-size: 0.9rem; color: #555; line-height: 1.7; margin-bottom: 0.6rem; }

.pricing-report-visual {
  border-radius: 14px;
  overflow: hidden;
  background: #ddd;
  aspect-ratio: 16/9;
}

.pricing-report-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ========== BLOG PAGE ========== */
.blog-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-bottom: 2rem;
}

/* Desktop: image left / text right (title sits in the right column).
 * Mobile: title -> image -> text per design feedback. CSS grid areas
 * let the same DOM (.blog-card-title + .thumb + .blog-card-content)
 * land in either layout. */
.blog-card {
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-areas:
    "thumb title"
    "thumb content";
  grid-template-rows: auto 1fr;
  gap: 0.5rem 2rem;
  align-items: start;
}

.blog-card .blog-card-title { grid-area: title; }
.blog-card .thumb { grid-area: thumb; }
.blog-card .blog-card-content { grid-area: content; }

.blog-card-title {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.3;
  color: #111827;
  margin: 0 0 0.5rem;
}

.blog-card .thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #eee;
}

.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .thumb img { transform: scale(1.04); }

/* Category badge overlaid on the image, bottom-left.
 * Dark "bubble" pill per design feedback (was a flush white bar). */
.blog-card-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: #1a1a1a;
  color: #fff;
  padding: 0.45rem 0.95rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}

.blog-card-content h3 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.3;
  color: #111827;
  margin-bottom: 0.5rem;
}

.blog-card-content p {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 0.6rem;
}

.blog-card-content .date { font-size: 0.78rem; color: #999; display: block; }

.blog-card-content .tag {
  display: inline-block;
  background: #eee;
  padding: 0.28rem 0.85rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.6rem;
}

.load-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.3rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  transition: 0.2s;
  margin-top: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.load-more:hover { background: #f5f5f5; }

/* ========== BLOG POST ========== */
.blog-post {
  padding-top: 130px;
  padding-bottom: 4rem;
  max-width: 920px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.blog-post-header { margin-bottom: 1.5rem; }
.blog-post-header .date { font-size: 0.78rem; color: #999; margin-bottom: 0.4rem; }

.blog-post-header h1 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #111827;
}

.blog-post-header .subtitle { font-size: 1.1rem; color: #1a1a1a; line-height: 1.5; max-width: 760px; }

.blog-post-featured {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2rem;
  aspect-ratio: 16/9;
  background: #eee;
}

.blog-post-featured img { width: 100%; height: 100%; object-fit: cover; }
.blog-post-body { font-size: 0.95rem; line-height: 1.8; color: #333; }
.blog-post-body p { margin-bottom: 1.5rem; }
.blog-post-body h2 {
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 2.5rem 0 1.25rem;
  color: #111827;
}

/* Embedded video block */
.blog-post-video {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  margin: 2rem 0 2.5rem;
  background: #000;
}
.blog-post-video img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-post-video:hover img { transform: scale(1.03); }
/* Red play disc on the embedded blog-post video. We keep the disc as
 * its own flex container and offset the triangle visually (4px right)
 * so its optical centre lines up with the geometric centre of the disc
 * - the previous implementation relied on asymmetric padding which
 * left the triangle visibly off in Chrome (per design feedback). */
.blog-post-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.blog-post-video-play::before {
  content: '';
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #e31f55;
  box-shadow: 0 12px 32px rgba(227, 31, 85, 0.45);
}
.blog-post-video-play svg {
  position: relative;
  width: 22px;
  height: auto;
  color: #fff;
  display: block;
  margin-left: 5px;
}

/* Social share row */
.blog-post-share {
  display: flex;
  gap: 0.85rem;
  margin: 1.5rem 0 0;
}
.blog-post-share a {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  transition: color 0.2s, transform 0.2s;
}
.blog-post-share a:hover { color: #e31f55; transform: translateY(-2px); }
.blog-post-share svg { width: 22px; height: 22px; fill: currentColor; }

.blog-post-related { margin-top: 3.5rem; }
.blog-post-related h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.related-card { border-radius: 14px; overflow: hidden; background: #f5f5f5; transition: transform 0.2s; }
.related-card:hover { transform: translateY(-3px); }
.related-card .thumb { position: relative; aspect-ratio: 16/9; }
.related-card .thumb img { width: 100%; height: 100%; object-fit: cover; }

.related-card-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: #1a1a1a;
  color: #fff;
  padding: 0.4rem 0.85rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 999px;
  text-transform: uppercase;
}

.back-to-blog {
  display: inline-block;
  padding: 0.55rem 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #1a1a1a;
  margin-top: 1.5rem;
  transition: opacity 0.2s;
}

.back-to-blog:hover { opacity: 0.65; }

/* ========== INNER PAGE HERO VARIANT ========== */
.hero--inner {
  aspect-ratio: auto;
  height: 540px;
  max-height: 540px;
  min-height: 420px;
  align-items: flex-end;
  padding: 130px 0 4rem;
}

.hero--inner .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.78) 100%
  );
}

.hero--inner .hero-content {
  color: #fff;
  max-width: 920px;
}

.hero--inner h1 {
  letter-spacing: 0;
  text-transform: none;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

.hero--inner h1 strong { font-weight: 800; }

.hero--inner .hero-subtitle {
  color: #fff;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.31;
  max-width: 680px;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.hero--process h1 {
  font-size: 2.4rem;
  font-weight: 400;
  max-width: 760px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}

.hero--process h1 strong { font-weight: 800; }

/* ========== UTILITY CLASSES ========== */
.section-filter { padding-top: 2rem; }
.section-filter .section-label { margin-bottom: 1rem; }
.section-results { padding-bottom: 4rem; }
.pricing-report .btn-free-quote { margin-top: 1.5rem; }

.blog-post-label {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: none;
  margin-bottom: 1.25rem;
  color: #1a1a1a;
}

.blog-post-label strong {
  font-weight: 800;
  letter-spacing: 0;
}

/* ========== VIDEO DETAIL (dark lightbox layout) ========== *
 * theme-dark only paints the <main> area dark; the header and footer
 * stay light so the navigation/footer chrome looks identical to every
 * other page (per design feedback "menu" = footer, keep it light). */
.theme-dark { background: #fff; }
.theme-dark main { background: #1f1f1f; }
.theme-dark .header { background: #fff; }
.theme-dark .footer { background: #fff; color: #1a1a1a; }

.video-detail {
  padding: 130px 0 4rem;
  color: #fff;
  position: relative;
}

.video-detail .container { max-width: 1100px; }

/* Lightbox close X. Anchored to the top-right corner of the visible
 * dark area (just below the fixed 90px header) so it sits in the
 * absolute top-right per design feedback. Thin white stroke, no
 * circle background. */
.video-detail-close {
  position: absolute;
  top: 110px;
  right: 24px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: transparent;
  border-radius: 0;
  transition: opacity 0.2s;
  z-index: 5;
  flex-shrink: 0;
}
.video-detail-close:hover { opacity: 0.7; }
.video-detail-close svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
  color: #fff;
}

.video-detail-player {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  margin-top: 1.5rem;
}
.video-detail-player img { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-detail-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  transition: transform 0.2s, background 0.2s;
}
.video-detail-play:hover { background: #fff; transform: scale(1.05); }
.video-detail-play svg { width: 28px; height: 32px; margin-left: 5px; }

.video-detail-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0 0.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.video-detail-meta-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.video-detail-tag {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
}

.video-detail-client {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}
.video-detail-client svg { width: 22px; height: 22px; }
.video-detail-client-logo {
  height: 24px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.video-detail-nav {
  display: inline-flex;
  gap: 0.5rem;
}

.video-detail-nav button,
.video-detail-nav a {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.video-detail-nav button:hover,
.video-detail-nav a:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.video-detail-nav button[disabled],
.video-detail-nav a[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.video-detail-nav svg { width: 16px; height: 16px; }

.video-detail-content { max-width: 720px; padding-top: 1rem; }

.video-detail-content h1 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1.25rem;
  color: #fff;
}

.video-detail-content p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.75;
}

.process-delivery-note {
  text-align: left;
}

/* ========== SKIP LINK ========== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: #1a1a1a;
  color: #fff;
  border-radius: 0 0 8px 8px;
  font-size: 0.85rem;
  font-weight: 600;
}

.skip-link:focus { top: 0; }

/* ========== SCROLL REVEAL ========== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
  .industry-card,
  .industry-card .thumb,
  .industry-card .thumb img,
  .service-card,
  .service-card .thumb,
  .service-card .thumb img,
  .portfolio-item,
  .portfolio-item img,
  .watch-showreel,
  .watch-showreel-bar,
  .watch-showreel-play,
  .watch-showreel-disc,
  .btn-portfolio,
  .btn-quote,
  .btn-free-quote,
  .btn-submit,
  .footer-social a,
  .testimonial-nav button { transition: none; animation: none; }
  .watch-showreel--pill:hover .watch-showreel-bar,
  .watch-showreel--pill:hover .watch-showreel-play,
  .watch-showreel--circle:hover .watch-showreel-disc,
  .service-card:hover,
  .industry-card:hover,
  .portfolio-item:hover,
  .footer-social a:hover,
  .btn-free-quote:hover,
  .btn-submit:hover { transform: none; }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .services-grid, .industries-grid, .testimonials-grid, .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-realway-grid, .contact-grid, .pricing-report { grid-template-columns: 1fr; }
  /* Process step collapses to title -> image -> content on tablet/mobile
   * regardless of the visual-left/right modifier (per design feedback
   * the order should be deterministic, not alternating). */
  .process-step,
  .process-step--visual-left,
  .process-step--visual-right {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "visual"
      "content";
  }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .blog-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "thumb"
      "content";
  }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
}

/* Mobile hero per design feedback:
 *  - swap to compact "R" logo
 *  - transparent header so the dark video shows behind the chrome
 *  - card centred, narrower, with the h1 sized to fit on 1 phone line
 *  - watch-showreel pill morphs into a centred red disc + label below
 *  - hero auto-heights to its content (no aspect-ratio override) */
@media (max-width: 768px) {
  .logo .logo-desktop { display: none; }
  .logo .logo-mobile { display: block; height: 32px; width: auto; }

  /* Mobile header: transparent so the hero video bg shows through on
   * pages with a hero. The video-detail page (theme-dark) keeps the
   * header solid white so it reads against the dark <main>. The "R"
   * mobile logo always stays black per design - no invert. */
  .header { background: transparent; box-shadow: none; }
  body.theme-dark .header { background: #fff; }
  .hero--home {
    margin-top: 0;
    padding-top: 90px;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    padding-bottom: 2.5rem;
  }
  .hero--home .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 100%);
  }
  .hero { padding-bottom: 1.5rem; }
  .hero-content {
    gap: 1.5rem;
    align-items: center;
    max-width: 100%;
    padding-top: 1.5rem;
  }
  /* Mobile: narrower constraint + slightly tighter pill type. The
   * per-line white pill background is inherited from the base
   * .hero h1 rule. */
  .hero-card { max-width: 300px; }
  .hero--home .hero-card h1 {
    font-size: 1.1rem;
    line-height: 1.85;
  }
  /* Hero showreel collapses to a centred red disc + lowercase label
   * below per design feedback. The .watch-showreel-label is nested
   * inside .watch-showreel-bar in the markup, so we position it
   * absolutely below the disc to keep the same DOM. */
  .hero--home .watch-showreel--pill {
    position: relative;
    align-self: center;
    padding-bottom: 2rem;
    display: inline-flex;
    justify-content: center;
  }
  .hero--home .watch-showreel-bar {
    position: relative;
    height: 64px;
    width: 64px;
    min-width: 0;
    padding: 0;
    background: #e31f55;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 22px rgba(227, 31, 85, 0.45);
    gap: 0;
  }
  .hero--home .watch-showreel-play {
    background: transparent;
    color: #fff;
    width: auto;
    height: auto;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hero--home .watch-showreel-play-icon { width: 16px; margin-left: 3px; }
  .hero--home .watch-showreel-label {
    position: absolute;
    left: 50%;
    bottom: -1.6rem;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 768px) {
  /* Mobile menu opens as a full-bleed dark overlay with the brand wordmark
   * + tagline, all primary nav links, and the social icons - matches
   * the figma reference (was previously a thin white drawer). */
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 78%;
    max-width: 360px;
    height: 100vh;
    background: #1a1a1a;
    flex-direction: column;
    padding: 2rem 1.75rem 2rem;
    border-bottom: none;
    gap: 1.25rem;
    box-shadow: -10px 0 40px rgba(0,0,0,0.25);
    z-index: 1100;
    overflow-y: auto;
  }
  .nav-links.active { display: flex; }
  .nav-links a { color: #fff; font-size: 1.05rem; font-weight: 500; }
  .nav-links a:hover { opacity: 0.7; }
  .nav-links-brand {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.4rem;
  }
  .nav-links-mobile-only { display: block; }
  .nav-links-logo {
    display: block;
    height: 22px;
    width: auto;
    filter: brightness(0) invert(1);
  }
  .nav-links-tagline {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }
  .nav-links-social {
    display: flex;
    gap: 1rem;
    margin-top: auto;
    padding-top: 2rem;
  }
  .nav-links-social a {
    width: 28px;
    height: 28px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.95;
  }
  .nav-links-social a[aria-label="YouTube"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M23.5 6.5a3 3 0 0 0-2.1-2.1C19.5 4 12 4 12 4s-7.5 0-9.4.4A3 3 0 0 0 .5 6.5C.1 8.4.1 12 .1 12s0 3.6.4 5.5a3 3 0 0 0 2.1 2.1C4.5 20 12 20 12 20s7.5 0 9.4-.4a3 3 0 0 0 2.1-2.1c.4-1.9.4-5.5.4-5.5s0-3.6-.4-5.5zM9.6 15.5V8.5l6.4 3.5-6.4 3.5z'/></svg>");
  }
  .nav-links-social a[aria-label="Instagram"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23a3.7 3.7 0 0 1-.9 1.38c-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.34 4.14.63a5.85 5.85 0 0 0-2.13 1.39A5.85 5.85 0 0 0 .62 4.15C.34 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.27 2.15.56 2.91.3.79.7 1.46 1.39 2.13.67.69 1.34 1.1 2.13 1.39.76.29 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.27 2.91-.56a5.85 5.85 0 0 0 2.13-1.39 5.85 5.85 0 0 0 1.39-2.13c.29-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.27-2.15-.56-2.91A5.85 5.85 0 0 0 21.99 2 5.85 5.85 0 0 0 19.86.62C19.1.34 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'/></svg>");
  }
  .nav-links-social a[aria-label="Facebook"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M24 12.07A12 12 0 1 0 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.68 4.53-4.68 1.31 0 2.69.23 2.69.23v2.96h-1.51c-1.49 0-1.96.93-1.96 1.88v2.27h3.33l-.53 3.49h-2.8V24A12 12 0 0 0 24 12.07z'/></svg>");
  }
  .nav-links-social a[aria-label="LinkedIn"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/></svg>");
  }
  .hamburger { display: flex; z-index: 1200; position: relative; }
  .hamburger.open span { background: #fff; }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  /* Per design feedback: keep the full REALWAY wordmark + Portfolio
   * button visible on mobile (was hidden at <=768px previously). */
  .btn-portfolio {
    display: inline-flex;
    height: 36px;
    padding: 0 0.95rem;
    font-size: 0.78rem;
  }
  .btn-quote {
    height: 36px;
    padding: 0 0.95rem;
    font-size: 0.85rem;
  }
  .nav-actions { gap: 0.4rem; }
  .logo img { height: 24px; }
  .hero h1 { font-size: 2rem; }
  .section-label { font-size: 1.4rem; letter-spacing: 0.28em; }
  .section-title { font-size: 1.3rem; }
  .services-grid, .industries-grid, .testimonials-grid,
  .pricing-cards, .portfolio-grid, .related-grid { grid-template-columns: 1fr; }
  /* Mobile pricing: per design feedback the cards need real spacing
   * between them (previously the borders touched edge-to-edge). */
  .pricing-cards { gap: 1.5rem; }
  .pricing-card--advanced,
  .pricing-card--premium { margin-left: 0; }
  .pricing-card + .pricing-card .pricing-card-body { border-top: 1px solid #1a1a1a; }
  .pricing-card--standard .btn-pricing,
  .pricing-card--essential .btn-pricing,
  .pricing-card--advanced .btn-pricing,
  .pricing-card--premium .btn-pricing { align-self: center; }
  /* CTA banner: text left-justified, button centred below per design
   * feedback. */
  .cta-banner-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 1.6rem;
  }
  .cta-banner h2 { font-size: 1.4rem; line-height: 1.35; text-align: left; }
  .cta-banner-inner .btn-free-quote { align-self: center; }
  .testimonials-header { flex-direction: column; }
  /* Keep the round desktop look on mobile too (just slightly smaller). */
  .testimonial-nav { justify-content: flex-end; gap: 0.5rem; }
  .testimonial-nav button { width: 36px; height: 36px; }
  .industries-top { flex-direction: column; align-items: flex-start; }
  .contact-heading { font-size: 1.6rem; }
  .page-hero h1 { font-size: 1.8rem; letter-spacing: 0.28em; }
  .page-hero-heading { font-size: 1.5rem; }
  .hero--inner .hero-subtitle { font-size: 1.4rem; }
  .hero--process h1 { font-size: 1.5rem; }
  .blog-post-header h1 { font-size: 1.8rem; }
  .client-logos { gap: 1.5rem; }
  /* Mobile process-step typography matches the rest of the site:
   * summary is the dominant body sentence (1.5rem) and the description
   * tracks at the standard 0.95rem body size. */
  .process-step-summary { font-size: 1.5rem; line-height: 1.4; max-width: none; }
  .process-step-content p:not(.process-step-summary) { font-size: 0.95rem; }
  .process-step { gap: 1rem; margin-bottom: 3rem; }
  .process-step-title { font-size: 1.05rem; letter-spacing: 0.22em; margin-bottom: 0.85rem; }
  .testimonials-header .right-quote { font-size: 1.3rem; }
  .why-text h3 { font-size: 1.4rem; }
  .industries-top .right-text { font-size: 1.3rem; }
  /* Blog cards: title -> image -> text on mobile (single column). */
  .blog-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "thumb"
      "content";
    gap: 0.85rem;
  }
  .blog-card-title { font-size: 1.4rem; }
  .blog-card-content h3 { font-size: 1.3rem; }
  .contact-left h3 { font-size: 1.2rem; letter-spacing: 0.22em; }
  .watch-showreel-bar {
    min-width: 0;
    height: 56px;
    padding: 0 22px 0 10px;
    gap: 12px;
  }
  .watch-showreel-play { width: 36px; height: 36px; }
  .watch-showreel-label { font-size: 1.05rem; }
  /* Watch-showreel disc capped explicitly so it never grows when its
   * parent stretches on small phones (was rendering huge per
   * mobile-1 feedback). */
  .watch-showreel-disc { width: 72px; height: 72px; flex-shrink: 0; }
  .watch-showreel-disc-icon { width: 20px; }
  .section-label--why { font-size: 1.4rem; letter-spacing: 0.34em; }
  .section-label--why strong { letter-spacing: 0.28em; }

  /* Mobile portfolio dropdown: bigger trigger and pill list per design
   * feedback ("bigger font + bigger spacing"). */
  .category-dropdown { width: 100%; display: block; }
  .category-dropdown-trigger { width: 100%; min-width: 0; }
  .category-dropdown-list { left: 0; right: 0; min-width: 0; gap: 0.85rem; }
  .category-dropdown-option { font-size: 0.95rem; padding: 0.7rem 1.1rem; }

  /* Mobile portfolio thumbnails: keep the tag + client logo visible at
   * smaller scale so each card still tells the full story. */
  .portfolio-item-tag { left: 10px; bottom: 10px; padding: 0.35rem 0.75rem; font-size: 0.65rem; }
  .portfolio-item-client { right: 10px; bottom: 10px; height: 22px; max-width: 90px; }
  .portfolio-item-play { width: 56px; height: 56px; }
  .portfolio-item-play svg { width: 16px; }

  /* Mobile video-detail: white X close button anchored in the top-right
   * of the dark area, just below the header. No circle bg per design
   * feedback ("just like in the screenshot"). Explicit svg sizing
   * prevents the giant-X fallback when container layout collapses. */
  .video-detail { padding-top: 90px; }
  .video-detail .container { padding-top: 40px; }
  .video-detail-close {
    top: 100px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: transparent;
    border-radius: 0;
    color: #fff;
  }
  .video-detail-close svg { width: 22px; height: 22px; color: #fff; }

  /* Blog post: pad the bottom so the last paragraph isn't crammed
   * against the footer (per blog-post mobile feedback). */
  .blog-post { padding-bottom: 3rem; }
  .blog-post-related { margin-top: 2.5rem; padding-bottom: 1rem; }
}

/* -----------------------------------------------------------------------
 * PRINT
 * Strip the site chrome, keep readable body copy, expand link URLs so
 * the printed page is a usable reference (e.g. blog post printouts).
 * --------------------------------------------------------------------- */
@media print {
  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  body { font: 12pt/1.5 Georgia, serif; }
  .header, .footer, .hamburger, .cta-banner, .contact-section, .testimonials, .industries-section, .why-realway, .services-section, .category-pill-form, .portfolio-filters, .video-detail-nav, .video-detail-close, .btn-portfolio, .watch-showreel, .reveal, .nav-links { display: none !important; }
  .container, main, article { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
  a { text-decoration: underline; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444 !important; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  img, svg { max-width: 100% !important; page-break-inside: avoid; break-inside: avoid; }
  .blog-post, .blog-post-body { padding: 0; }
  .blog-post-body p, .blog-post-body li { orphans: 3; widows: 3; }
}