/* ===========================================================
   SNL Solutions — Studio Setup landing page
   Apple-style minimal design, implemented from
   "Studio Setup Wireframe.dc.html"
   =========================================================== */

:root {
  --font-display: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --ink: #111111;
  --ink-soft: rgba(0, 0, 0, 0.6);
  --ink-mute: rgba(0, 0, 0, 0.58);
  --border: rgba(0, 0, 0, 0.08);
  --border-soft: rgba(0, 0, 0, 0.06);
  --surface: #fafaf9;
  --white: #ffffff;
  --brand-blue: #70b0dc;
  --brand-blue-dark: #5a9cc7;
  --accent: var(--brand-blue);
  --accent-soft: rgba(112, 176, 220, 0.14);
  --accent-dark: #1a1a1a;
  --accent-text: #2473a8;
  /* Card/panel border on hover — the lift-plus-blue-edge treatment that
     satish_sir/signage.php's .hardware-card:hover establishes. One value,
     so every card family hovers identically. */
  --border-accent: rgba(112, 176, 220, 0.4);
  /* Image placeholder wash. Brand-blue tinted, NOT the lavender it replaced
     — nothing on the site should introduce a hue outside the blue family. */
  --placeholder-bg: linear-gradient(155deg, rgba(112, 176, 220, 0.1) 0%, var(--surface) 55%, var(--white) 100%);
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 20px 40px rgba(0, 0, 0, 0.08);
  --container: none;
  --header-h: 68px;

  /* ---- Type scale ----
     Anchored on satish_sir/signage.php so headings and body copy read at the
     same size as the rest of snlsolution.com: h1 3rem / h2 2.25rem /
     h3 1.5rem / body 1rem. The steps below fill in between those anchors.
     Every font-size in this file references one of these — change the scale
     here, not at the call site. Mobile re-declares --fs-h1/--fs-h2 further
     down (see the 960px and 680px blocks), mirroring the reference page's
     own 991.98px step-down. */
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 18px;
  --fs-lede: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-2xs: 12px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* Clears the real production header (position: absolute until scrolled,
   so it overlays whatever is at the top of <main> rather than pushing it
   down) — see inc/header.php. */
#main {
  padding-top: 24px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

.eyebrow {
  font-weight: 600;
  font-size: var(--fs-2xs);
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--fs-xs);
  z-index: 100;
  transition: top 0.15s ease;
}

.skip-link:focus-visible {
  top: 12px;
}

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--fs-body);
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--brand-blue);
  color: #fff;
  border: 2px solid var(--brand-blue);
}

.btn-primary:hover {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  color: #fff;
}

.btn-pill-sm {
  padding: 8px 20px;
  border-radius: 50px;
  background-color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-xs);
  transition: all 0.3s ease;
}

.btn-pill-sm:hover {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--brand-blue);
  color: var(--accent-text);
}

.btn-outline:hover {
  background-color: var(--brand-blue);
  color: #fff;
}

/* ---------- Photo placeholder ---------- */

.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--placeholder-bg);
  border: 1px solid var(--border);
  color: var(--ink-mute);
  text-align: center;
  overflow: hidden;
}

.ph svg {
  width: 30px;
  height: 30px;
  color: var(--accent);
  opacity: 0.55;
}

.ph span {
  font-weight: 500;
  font-size: var(--fs-2xs);
  line-height: 1.4;
  color: var(--ink-mute);
  padding: 0 14px;
  max-width: 220px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: -0.02em;
  color: var(--ink);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 30px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.nav-links a {
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.header-cta {
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 26px;
  height: 20px;
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle span {
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: #fff;
  z-index: 49;
  display: none;
  flex-direction: column;
  padding: 28px 40px;
  gap: 4px;
  overflow-y: auto;
}

.mobile-panel.is-open {
  display: flex;
}

.mobile-panel a {
  padding: 14px 4px;
  font-size: var(--fs-body);
  color: var(--ink);
  border-bottom: 1px solid var(--border-soft);
}

.mobile-panel .btn {
  margin-top: 18px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 100px 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--container);
  width: 100%;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  text-align: left;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Weight/leading/tracking taken from satish_sir/signage.php's #main-content h1
   (700 / 1.2 / -0.02em) so the hero reads identically to the rest of the site. */
.hero h1 {
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero-copy p {
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 440px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.detail-hero {
  min-height: 100vh;
  padding-bottom: 100px;
}

.detail-hero .hero-grid {
  grid-template-columns: 1fr;
  justify-items: center;
}

.detail-hero .hero-copy {
  align-items: center;
  text-align: center;
}

.detail-hero .hero-copy p {
  max-width: 1000px;
}

.detail-hero .hero-actions {
  justify-content: center;
}

.hero-photo .ph {
  width: 100%;
  height: 480px;
  border-radius: var(--radius-lg);
}

.hero-image-wrap {
  width: 100%;
  padding: 0 40px;
}

.hero-slider {
  position: relative;
}

.hero-slider-viewport {
  overflow: hidden;
  width: 100%;
}

.hero-slider-track {
  display: flex;
  align-items: stretch;
}

.hero-slider--single .hero-slider-track {
  justify-content: center;
}

/* A single banner slide has its own baked-in aspect ratio, so let it size
   to its natural height instead of the fixed multi-photo carousel height
   — cropping would cut off text/icons that are part of the image itself. */
.hero-slider--single .hero-slide,
.hero-slider--single .hero-slide img {
  height: auto;
}

.hero-slide {
  position: relative;
  flex: 0 0 auto;
  width: 78%;
  aspect-ratio: 1857 / 847;
  margin: 0 3px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  opacity: 0.55;
  transform: scale(0.94);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--shadow-lift);
}

.hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-slider-arrow svg {
  width: 20px;
  height: 20px;
}

.hero-slider-arrow:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-50%) scale(1.08);
}

.hero-slider-arrow--prev {
  left: 16px;
}

.hero-slider-arrow--next {
  right: 16px;
}

.hero-slider-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 18px;
}

.hero-slider-dots button {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.hero-slider-dots button[aria-current="true"] {
  background: var(--ink);
  width: 16px;
}

.hero-video {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: #fff;
}

.hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb-nav {
  width: 100%;
  padding: 20px 40px 0;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
  color: var(--ink-mute);
}

.breadcrumb-list li:not(:last-child)::after {
  content: "/";
  color: var(--border);
  margin: 0 8px;
}

.breadcrumb-list a {
  color: var(--ink-mute);
  text-decoration: none;
}

.breadcrumb-list a:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

.breadcrumb-list li[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 680px) {
  .breadcrumb-nav {
    padding: 16px 20px 0;
  }
}

/* ---------- Section shells ---------- */

.section {
  padding: 90px 40px;
}

.section-surface {
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}

/* Studio setup solutions — dark, moody vignette backdrop for a cards-on-dark
   section. Structure: symmetric 5-stop diagonal vignette (dark -> navy ->
   accent lift -> navy -> dark) so the centered heading + card grid "breathe"
   in the middle, plus two depth layers (dot-grid texture, then a soft
   radial glow) stacked above it. Every stop is drawn from the SAME
   monochromatic blue ramp already used for the gallery tag-chips in
   data/studio-details.php (#123f5e/#1c5d8a/#2473a8/#5a9cc7) — no new hue,
   per the one-hue-palette rule below. Near-black bookends still carry a
   faint blue tint rather than true #000, so it reads as designed, not
   generic dark-mode gray. */
#solutions {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    #030910 0%,
    #071b30 35%,
    #123f5e 65%,
    #071b30 85%,
    #030910 100%
  );
  border-top: none;
}

#solutions::before,
#solutions::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Layer 1: faint dot-grid texture for tactile depth. */
#solutions::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.07;
  z-index: 0;
}

/* Layer 2: soft off-center glow, two shades of the same brand blue. */
#solutions::after {
  background: radial-gradient(
    ellipse 60% 55% at 72% 18%,
    rgba(36, 115, 168, 0.22) 0%,
    rgba(90, 156, 199, 0.11) 44%,
    transparent 70%
  );
  filter: blur(30px);
  z-index: 1;
}

#solutions .section-head,
#solutions .solutions-grid,
#solutions .carousel-dots {
  position: relative;
  z-index: 2;
}

#solutions .section-head h2 {
  color: #fff;
}

#solutions .section-sub {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 680px) {
  /* Dot-grid adds noise without value at small viewport sizes. */
  #solutions::before {
    display: none;
  }
}

.section-head {
  text-align: center;
  margin-bottom: 48px;
}

.section-head h2 {
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.section-sub {
  font-size: var(--fs-body);
  color: var(--ink-mute);
  margin-top: 8px;
}

.section-lede {
  font-size: var(--fs-body);
  color: var(--ink-mute);
  margin-top: 10px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Solutions grid ---------- */

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: var(--container);
  margin: 0 auto;
}

.related-grid {
  grid-template-columns: repeat(5, 1fr);
}

.related-card .solution-body {
  padding: 16px 18px 20px;
  gap: 0;
}

.related-card .solution-body h3 {
  margin-bottom: 0;
  font-size: var(--fs-h6);
}

.variants-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: var(--container);
  margin: 0 auto;
}

.card-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  z-index: 1;
}

.card-ribbon--accent {
  background: var(--accent);
}

.solution-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.solution-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-6px);
  border-color: var(--border-accent);
}

.solution-media {
  padding: 14px 14px 0;
  overflow: hidden;
}

.solution-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.solution-card:hover .solution-media img {
  transform: scale(1.06);
}

.related-card:hover .solution-media img {
  transform: none;
}

#solutionsGrid .solution-card:hover .solution-media img {
  transform: none;
}

.solution-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
}

.solution-body h3 {
  font-weight: 600;
  font-size: var(--fs-h5);
  color: var(--ink);
  margin-bottom: 8px;
}

.solution-body p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

.solution-card {
  cursor: pointer;
}

/* Pins the CTA button to the bottom of the card, full width. */
.solution-body > a.btn {
  width: 100%;
  margin-top: auto;
}

/* Makes the whole card clickable via the CTA button's stretched hit area */
.solution-cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---------- Liquid glass cards — #solutions and #related ----------
   Scoped to the dark-gradient sections ("Studio setup solutions" hub cards,
   and the "More Related Products" section on studio-detail pages, which now
   shares the same dark-blue backdrop — see #related below). Frosted panels
   over the section's existing dark-blue gradient: a diagonal sheen fakes
   light catching curved glass, backdrop-filter frosts the gradient behind
   it, and a hover-triggered glint sweep sells the "liquid" part. Card
   layout/sizing is untouched — only the material changes. */
#solutions .solution-card,
#related .solution-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.09) 100%);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 20px 44px rgba(6, 22, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#solutions .solution-card:hover,
#related .solution-card:hover {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 28px 56px rgba(6, 22, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Diagonal glint — swept across the glass on hover to read as light moving
   over a curved surface. Sits above the tint, below the real content. */
#solutions .solution-card::before,
#related .solution-card::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.32) 48%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.32) 52%, transparent 65%);
  transform: translateX(-45%);
  transition: transform 0.65s ease;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

#solutions .solution-card:hover::before,
#related .solution-card:hover::before {
  transform: translateX(45%);
}

#solutions .solution-media,
#solutions .solution-body,
#related .solution-media,
#related .solution-body {
  position: relative;
  z-index: 2;
}

#solutions .solution-body h3,
#related .solution-body h3 {
  color: #fff;
  text-shadow: 0 1px 3px rgba(4, 16, 30, 0.35);
}

#solutions .solution-body p,
#related .solution-body p {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(4, 16, 30, 0.3);
}

.carousel-dots {
  display: none;
  gap: 5px;
  justify-content: center;
  margin-top: 14px;
}

.carousel-dots button {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  padding: 0;
  transition: background 0.2s ease, width 0.2s ease;
}

.carousel-dots button[aria-current="true"] {
  background: var(--ink);
  width: 16px;
}

/* #solutions has a dark blue gradient backdrop — flip the dots light so they
   stay visible against it, same override reason as the heading/subhead above. */
#solutions .carousel-dots button {
  background: rgba(255, 255, 255, 0.35);
}

#solutions .carousel-dots button[aria-current="true"] {
  background: #fff;
}

/* ---------- About ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
}

.about-grid .ph {
  border-radius: var(--radius-lg);
}

.about-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
  justify-self: center;
}

.about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.about-photo-wrap {
  max-width: 524px;
  width: 100%;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.about-carousel {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* No arrows to flank it, so keep the lone frame centred like the multi-photo case. */
.about-carousel--single {
  justify-content: center;
}

.about-carousel-frame {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.about-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s ease;
}

.about-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.about-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-carousel-arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.about-carousel-arrow svg {
  width: 18px;
  height: 18px;
}

.about-carousel-arrow:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

.about-carousel-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.about-carousel-dots button {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.about-carousel-dots button[aria-current="true"] {
  background: var(--ink);
  width: 16px;
}

.about-copy h2 {
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}

.about-copy p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-mute);
  margin-bottom: 28px;
  max-width: 480px;
}

.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -8px;
  margin-bottom: 8px;
  max-width: 480px;
}

.about-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.about-subblock {
  max-width: var(--container);
  margin: 48px auto 0;
  text-align: center;
}

.about-subhead {
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 440px;
}

.stat-num {
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--ink);
}

.stat-label {
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  margin-top: 4px;
}

/* ---------- Why us ---------- */

.why-section {
  text-align: center;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
}

.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.why-icon svg {
  width: 22px;
  height: 22px;
}

.why-item p {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* ---------- Components ---------- */

.components-inner {
  max-width: none;
  margin: 0 auto;
}

.component-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.component-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: rgba(0, 0, 0, 0.7);
}

.component-list svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ---------- Process ---------- */

.process-rail {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}

.process-line {
  position: absolute;
  top: 24px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--border);
}

.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-step {
  text-align: center;
}

.process-num {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-body);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.process-step h3 {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  margin-bottom: 6px;
}

.process-step p {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* ---------- Process (horizontal scroll-pin, desktop + mobile) ----------
   JS toggles .is-pinned on #process once matchMedia (>=1100px or
   <=680px) + reduced-motion checks pass, and sets an inline height on
   the section covering the scroll distance needed to sweep
   .process-steps across .process-rail. The 681-1099px tablet band and
   no-JS/reduced-motion fallback render the static grid rules above. */

.process-pin.is-pinned {
  padding: 0;
}

.process-pin.is-pinned .process-pin-sticky {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 60px 40px;
  overflow: hidden;
}

.process-pin.is-pinned .process-rail {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}

.process-pin.is-pinned .process-line {
  display: none;
}

.process-pin.is-pinned .process-steps {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.process-pin.is-pinned .process-step {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
}

.process-pin.is-pinned .process-num {
  width: 64px;
  height: 64px;
  font-size: var(--fs-h5);
  margin-bottom: 24px;
}

.process-pin.is-pinned .process-step h3 {
  font-size: var(--fs-h3);
  margin-bottom: 12px;
}

.process-pin.is-pinned .process-step p {
  font-size: var(--fs-body);
  max-width: 440px;
  margin: 0 auto;
}

.process-pin-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.process-pin.is-pinned .process-pin-dots {
  display: flex;
}

.process-pin-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.process-pin-dots span.is-active {
  background: var(--ink);
  transform: scale(1.3);
}

/* ---------- Portfolio ---------- */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 20px;
}

.portfolio-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  grid-column: span 6;
  min-height: 300px;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform 0.5s ease;
}

.portfolio-card.ph {
  background: none;
}

.portfolio-card.ph::before {
  background: var(--placeholder-bg);
}

.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.portfolio-card:hover::before {
  transform: scale(1.08);
}

/* Top row (cards 1-3) reads taller than the bottom row; the first card
   ("hero") is also wider, matching the bento layout in the design reference. */
.portfolio-card:nth-child(-n + 3) {
  min-height: 380px;
}

.portfolio-card:first-child {
  grid-column: span 8;
}

.portfolio-card:nth-child(2),
.portfolio-card:nth-child(3) {
  grid-column: span 5;
}

.portfolio-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 36px 16px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s ease;
}

.portfolio-card:hover .portfolio-caption {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.05));
}

.portfolio-card:first-child .portfolio-caption {
  padding: 36px 20px 18px;
}

.tag-chip {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-2xs);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.portfolio-card:hover .tag-chip {
  transform: scale(1.1) rotate(-4deg);
}

.portfolio-caption h3 {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: #fff;
}

.portfolio-caption .loc {
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.7);
}

.portfolio-card:first-child .portfolio-caption h3 {
  font-size: var(--fs-body);
}

.portfolio-card:first-child .portfolio-caption .loc {
  font-size: var(--fs-xs);
}

.portfolio-more {
  text-align: center;
  margin-top: 28px;
  font-size: var(--fs-sm);
  color: var(--accent-text);
}

/* ---------- Testimonials ---------- */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-accent);
}

.testimonial-quote {
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
}

.avatar-ph {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.testimonial-card:hover .avatar-ph {
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

.avatar-ph svg {
  width: 18px;
  height: 18px;
}

.testimonial-person strong {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.testimonial-person span {
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}

/* ---------- FAQ ---------- */

.faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
}

.faq-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.faq-intro h2 {
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.faq-intro p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 380px;
}

.faq-cta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.faq-cta-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-cta strong {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  margin-bottom: 2px;
}

.faq-cta a {
  font-size: var(--fs-sm);
  color: var(--accent-text);
}

.faq-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 14px;
  background: #fff;
  transition: border-color 0.2s ease;
}

.faq-search:focus-within {
  border-color: var(--border-accent);
}

.faq-search-icon {
  width: 16px;
  height: 16px;
  color: var(--ink-mute);
  flex-shrink: 0;
}

.faq-search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.faq-search input:focus {
  outline: none;
}

.faq-search input::placeholder {
  color: var(--ink-mute);
}

.faq-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faq-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.faq-cat-btn:hover {
  border-color: var(--border-accent);
  color: var(--ink);
}

.faq-cat-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.faq-cat-count {
  font-size: var(--fs-2xs);
  font-weight: 600;
  opacity: 0.75;
}

.faq-empty {
  text-align: center;
  padding: 40px 24px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--ink-mute);
  font-size: var(--fs-sm);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-q-heading {
  font: inherit;
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px;
  text-align: left;
}

.faq-q-text {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
}

.faq-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.faq-icon svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.faq-q[aria-expanded="true"] .faq-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.faq-q[aria-expanded="true"] .faq-icon svg {
  transform: rotate(180deg);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.faq-a > div {
  overflow: hidden;
}

.faq-a p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-mute);
  padding: 0 24px 24px;
  border-top: 1px solid var(--border-soft);
  margin-top: -1px;
  padding-top: 14px;
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

/* ---------- Final CTA ---------- */

.final-cta {
  padding: 28px 40px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.final-cta-copy {
  max-width: 360px;
}

.final-cta-copy h2 {
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 4px;
}

.final-cta-copy p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.55);
}

.survey-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  max-width: 640px;
  min-width: 320px;
}

.survey-form .field {
  flex: 1;
  min-width: 110px;
}

.survey-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.survey-form input {
  width: 100%;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: var(--fs-sm);
}

.survey-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.survey-form input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.survey-form button {
  height: 38px;
  padding: 0 22px;
  border-radius: 50px;
  background-color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: all 0.3s ease;
}

.survey-form button:hover {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}

.form-note {
  width: 100%;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

/* ---------- Footer ---------- */

.site-footer {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}

.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Studio Detail Page ---------- */

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.benefit-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-accent);
}

.benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.benefit-card:hover .benefit-icon {
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

.benefit-icon svg {
  width: 20px;
  height: 20px;
}

.benefit-card h3 {
  font-weight: 600;
  font-size: var(--fs-h6);
  color: var(--ink);
  margin-bottom: 8px;
}

.benefit-card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-mute);
}

.benefit-card--media {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.benefit-media {
  flex: 0 0 155px;
  width: 155px;
  height: 155px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.benefit-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.benefit-media .ph {
  width: 100%;
  height: 100%;
  gap: 0;
}

.benefit-media .ph svg {
  width: 36px;
  height: 36px;
}

.benefit-card--media .benefit-copy h3 {
  font-weight: 600;
  font-size: var(--fs-h6);
  color: var(--ink);
  margin-bottom: 8px;
}

.benefit-card--media .benefit-copy p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-mute);
}

/* ---------- Liquid glass — Benefits section, all 6 studio detail pages ----------
   Same dark-blue gradient as #solutions on the hub, and the same frosted
   glass card material — reused verbatim (not just similar values) so both
   live on one visual system. Scoped to #benefits so the plain icon .benefit-card
   used in the "About this studio" section above it is untouched. Layout
   (photo-left, copy-right) is unchanged — only the material changes. */
#benefits {
  background: linear-gradient(135deg, #123f5e 0%, #1c5d8a 55%, #2473a8 100%);
  border-top: none;
}

#benefits .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

#benefits .section-head h2 {
  color: #fff;
}

#benefits .benefit-card--media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.09) 100%);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 20px 44px rgba(6, 22, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#benefits .benefit-card--media:hover {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 28px 56px rgba(6, 22, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Diagonal glint — same hover-triggered light sweep as the hub's solution cards. */
#benefits .benefit-card--media::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.32) 48%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.32) 52%, transparent 65%);
  transform: translateX(-45%);
  transition: transform 0.65s ease;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

#benefits .benefit-card--media:hover::before {
  transform: translateX(45%);
}

#benefits .benefit-media,
#benefits .benefit-copy {
  position: relative;
  z-index: 2;
}

#benefits .benefit-card--media .benefit-copy h3 {
  color: #fff;
  text-shadow: 0 1px 3px rgba(4, 16, 30, 0.35);
}

#benefits .benefit-card--media .benefit-copy p {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(4, 16, 30, 0.3);
}

/* ---------- Dark gradient — "More Related Products" section, all 6 studio
   detail pages ----------
   Same dark-blue gradient + liquid glass card material as #benefits above
   and #solutions on the hub, reused verbatim so the page's dark sections
   read as one system. Card/grid layout (.related-grid, 5-up) is unchanged —
   only the material and text colors change. */
#related {
  background: linear-gradient(135deg, #123f5e 0%, #1c5d8a 55%, #2473a8 100%);
  border-top: none;
}

#related .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

#related .section-head h2 {
  color: #fff;
}

#related .section-lede {
  color: rgba(255, 255, 255, 0.75);
}

/* #related has a dark blue gradient backdrop — flip the dots light so they
   stay visible against it, same override reason as #solutions' dots. */
#related .carousel-dots button {
  background: rgba(255, 255, 255, 0.35);
}

#related .carousel-dots button[aria-current="true"] {
  background: #fff;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: var(--container);
  margin: 0 auto;
}

.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-accent);
}

.feature-badge {
  /* Short badges ("Cam", "Rec") stay circular on the 48px minimum; full
     component names ("Interactive Flat Panel") widen into a pill instead
     of overflowing the circle. */
  box-sizing: border-box;
  width: max-content;
  min-width: 48px;
  max-width: 100%;
  height: 48px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--fs-xs);
  margin-bottom: 16px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.feature-card:hover .feature-badge {
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

.feature-card h3 {
  font-weight: 600;
  font-size: var(--fs-h6);
  color: var(--ink);
  margin-bottom: 12px;
}

.feature-card .component-list {
  margin-bottom: 0;
}

.feature-card .component-list li {
  font-size: var(--fs-sm);
  color: rgba(0, 0, 0, 0.7);
}

.included-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
}

.included-label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.included-col .component-list {
  gap: 10px;
  margin-bottom: 0;
}

.included-col .component-list li {
  font-size: var(--fs-body);
  color: rgba(0, 0, 0, 0.7);
}

.applications-section {
  text-align: center;
}

.applications-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.application-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.application-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-accent);
}

.application-card .why-icon {
  margin: 0 auto 14px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.application-card:hover .why-icon {
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

.application-label {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
}

.application-desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 6px;
}

/* Six-tile use-case grids (e.g. signage.php) read better as 2 even rows of 3
   than the default 4-column grid's lopsided 4+2 wrap. Scoped to min-width so
   it never fights the existing max-width responsive collapse below. */
@media (min-width: 1100px) {
  #use-cases .applications-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.spec-table {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-soft);
}

.spec-row:last-child {
  border-bottom: none;
}

/* Hold the label on one line up to 45% of the row, so the value column is the
   one that wraps on long content. Without this the label shrinks first and
   short labels ("Live URL Play") break across two lines at --fs-sm. */
.spec-label {
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  flex-shrink: 0;
  max-width: 45%;
}

.spec-value {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: right;
}

.spec-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.spec-groups--simple {
  grid-template-columns: repeat(4, 1fr);
}

.spec-groups--cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.spec-groups--simple .spec-group-title {
  padding-bottom: 0;
  border-bottom: none;
}

.spec-group-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-mute);
}

.spec-group {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.spec-group:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-accent);
}

.spec-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--fs-h6);
  color: var(--ink);
  margin-bottom: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.spec-group-icon {
  font-size: var(--fs-h6);
  line-height: 1;
}

.spec-photo {
  position: relative;
  height: 200px;
  margin-bottom: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(45deg, rgba(112, 176, 220, 0.18) 0, rgba(112, 176, 220, 0.18) 1px, transparent 1px, transparent 9px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.spec-photo--img {
  background-image: none;
  background-color: #fff;
  padding: 10px;
}

.spec-photo--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.spec-photo-caption {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--ink-mute);
  text-align: center;
  padding: 0 18px;
}

.spec-photo-caption .k {
  color: var(--accent-text);
}

.spec-photo-caption .v {
  color: var(--ink-soft);
}

.spec-group .spec-row {
  padding: 10px 0;
}

.spec-group .component-list {
  margin-top: 4px;
}

.spec-group--box {
  grid-column: 1 / -1;
}

.spec-group--box .spec-group-title {
  justify-content: center;
}

.spec-group--box .component-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
}

.spec-group--box .component-list li {
  justify-content: center;
}

/* ===========================================================
   Responsive breakpoints
   =========================================================== */

@media (max-width: 1099px) {
  .solutions-grid,
  .variants-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 32px;
  }

  .process-line {
    display: none;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .faq-intro {
    position: static;
  }

  .benefit-grid,
  .feature-grid,
  .spec-groups {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-group--box .component-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .included-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .applications-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  /* Mirrors satish_sir/signage.php's own 991.98px step-down (h1 2.25rem /
     h2 1.75rem). Re-declaring the tokens here re-sizes every heading that
     references them — no per-selector overrides needed below. */
  :root {
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 24px;
  }

  .nav-links,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .hero-grid,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-copy {
    align-items: center;
    text-align: center;
  }

  .hero-copy p,
  .detail-hero .hero-copy p {
    max-width: 560px;
  }

  .hero-actions {
    justify-content: center;
  }

  .about-grid {
    text-align: left;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-card,
  .portfolio-card:first-child,
  .portfolio-card:nth-child(2),
  .portfolio-card:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  /* One step below the 960px scale — phones only. */
  :root {
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 22px;
    --fs-h4: 20px;
  }

  .container,
  .section {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hero {
    padding: 56px 40px 0;
  }

  .detail-hero {
    padding-bottom: 56px;
  }

  .hero-copy p {
    font-size: var(--fs-body);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-photo .ph {
    height: 220px;
    margin-top: 20px;
  }

  .hero-slide {
    width: 90%;
    margin: 0 2px;
  }

  .hero-slider-arrow {
    width: 36px;
    height: 36px;
  }

  .hero-slider-arrow svg {
    width: 16px;
    height: 16px;
  }

  .section {
    padding: 56px 40px;
  }

  .solutions-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -40px;
    padding: 0 40px 8px;
    -webkit-overflow-scrolling: touch;
  }

  .solution-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }

  .solution-body {
    padding: 16px;
    gap: 8px;
  }

  /* Not display:none: .solution-cta::after (above) is the whole card's only
     tap target — the visible "View Details" pill is what's hidden here, not
     the link itself, or the card stops navigating anywhere on mobile.
     Two things this rule must NOT do, both tried and reverted:
       - set `position` on .solution-cta — ::after would then anchor to this
         collapsed box instead of .solution-body (its real positioned
         ancestor in the #solutions/#related scope above), shrinking the
         tap target to nothing.
       - set `overflow: hidden` on .solution-cta — ::after is still a
         rendered/paint-tree child of .solution-cta even though it's SIZED
         relative to .solution-body; overflow:hidden on a 0-height box
         clips ::after's hit-testable area down to that same 0 height
         regardless of its own inset:0 math. (This is exactly what broke
         the first attempt at this fix — looked identical in the HTML/CSS
         diff, silently clipped the whole tap target to nothing anyway.)
     Text is hidden via font-size/color instead of overflow, so nothing
     needs clipping in the first place. */
  .solution-cta {
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  .solution-desc {
    display: none;
  }

  .carousel-dots {
    display: flex;
  }

  #about .about-photo-wrap,
  #about .about-photo {
    order: 1;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 28px;
  }

  .why-icon {
    width: 44px;
    height: 44px;
  }

  .stat-row {
    gap: 12px;
  }

  .stat-num {
    font-size: var(--fs-h5);
  }

  .process-steps {
    grid-template-columns: 1fr;
    row-gap: 22px;
    text-align: left;
  }

  .process-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
  }

  .process-num {
    width: 36px;
    height: 36px;
    font-size: var(--fs-sm);
    margin: 0;
    flex-shrink: 0;
  }

  .process-pin.is-pinned .process-pin-sticky {
    gap: 28px;
    padding: 48px 24px;
  }

  .process-pin.is-pinned .process-num {
    width: 48px;
    height: 48px;
    font-size: var(--fs-body);
    margin: 0 auto 16px;
  }

  .process-pin.is-pinned .process-step h3 {
    font-size: var(--fs-h5);
  }

  .process-pin.is-pinned .process-step p {
    font-size: var(--fs-sm);
  }

  .portfolio-card,
  .portfolio-card:nth-child(-n + 3) {
    min-height: 260px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .final-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 24px 40px;
  }

  .final-cta-copy {
    max-width: none;
  }

  .survey-form {
    flex-direction: column;
    max-width: none;
    min-width: 0;
  }

  .site-footer {
    flex-direction: column;
    text-align: center;
  }

  .benefit-grid,
  .feature-grid,
  .applications-grid,
  .variants-grid,
  .spec-groups {
    grid-template-columns: 1fr;
  }

  .hero-video {
    max-width: 260px;
  }

  .spec-group--box .component-list {
    grid-template-columns: 1fr;
  }

  .included-panel {
    padding: 24px;
  }

  .spec-row,
  .spec-group .spec-row {
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
  }

  /* The row stacks here, so the 45% label cap from the desktop rule would
     squeeze the label against its own column instead of the value. */
  .spec-label {
    max-width: none;
  }

  .spec-value {
    text-align: left;
  }
}