/* =========================================================
   GLOBAL RESPONSIVE / OVERFLOW PROTECTION
   ========================================================= */

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

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
}

main,
section,
header,
footer,
div {
  max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

button,
a {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

:root {
  --bg: #fbfbfe;
  --surface: #ffffff;
  --ink: #111116;
  --muted: #526485;
  --line: #dedfe7;
  --purple: #6048e5;
  --purple-soft: #eeeafd;
  --max: 1280px;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.label::before {
  content: "";
  width: 35px;
  height: 1px;
  background: currentColor;
  display: block;
}
.label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #6048e5;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: #6048e5;
}
a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

/* =========================================================
   IRVING STUDIO — FIXED NAVBAR
   Always remains pinned to the top of the viewport
========================================================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 57px;

  z-index: 9999;

  box-sizing: border-box;

  display: flex;
  align-items: center;

  justify-content: space-between;

  padding: 0 max(20px, calc((100% - var(--max)) / 2));

  background: color-mix(
    in srgb,
    var(--bg) 88%,
    transparent
  );

  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


/* =========================================================
   PREVENT CONTENT FROM HIDING UNDER THE NAVBAR
========================================================= */

body {
  padding-top: 57px;
}


/* =========================================================
   NAVBAR LAYERS
========================================================= */

.site-header .brand,
.site-header .main-nav,
.site-header .header-actions {
  position: relative;
  z-index: 1;
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-header .main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 20px;
}

.site-header .main-nav a {
  position: relative;

  text-decoration: none;

  color: var(--muted);

  transition:
    color .25s ease,
    opacity .25s ease;
}

.site-header .main-nav a:hover {
  color: var(--ink);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .site-header {
    height: 57px;

    padding-left: 20px;
    padding-right: 20px;
  }

  body {
    padding-top: 57px;
  }

}

.brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 29px;
  font-size: 12px;
  font-weight: 600;
}

.main-nav a,
.header-cta,
.site-footer a {
  transition: opacity .2s ease;
}

.main-nav a:hover,
.header-cta:hover,
.site-footer a:hover {
  opacity: .55;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 13px;
}

.header-cta {
  padding: 8px 16px;
  border-radius: 999px;
  background: #f1f1f6;
  font-size: 12px;
  font-weight: 600;
}

.theme-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 5px;
}

.section {
  width: min(var(--max), calc(100% - 72px));
  margin: 0 auto;
}

.eyebrow {
  margin: 0;
  color: var(--purple);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .30em;
  line-height: 1.4;
}

.eyebrow span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 11px;
  border-radius: 50%;
  background: var(--purple);
}

.hero {
  width: 100%;
  max-width: none;
  min-height: 690px;

  position: relative;
  display: flex;
  align-items: flex-start;

  padding: 51px max(36px, calc((100% - var(--max)) / 2));

  overflow: hidden;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 660px;
}

.hero h1 {
  margin: 48px 0 30px;
  max-width: 690px;
  font-size: clamp(76px, 7.5vw, 137px);
  line-height: .95;
  letter-spacing: -.075em;
  font-weight: 700;
}

h1 em,
.contact h2 em {
  color: var(--purple);
  font-style: normal;
}

.hero-text {
  width: 550px;
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 11px;
  margin-top: 26px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 49px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}

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

.button-primary {
  color: #fff;
  background: var(--purple);
  box-shadow: 0 13px 28px rgba(96, 72, 229, .19);
}

.button-secondary {
  background: #fff;
  border: 1px solid var(--line);
}

.network-art {
  position: absolute;
  top: 30px;
  right: -100px;
  width: 690px;
  height: 650px;
  color: #7160ee;
  pointer-events: none;
}

.network-art svg {
  width: 100%;
  height: 100%;
}

/* =========================================================
   SERVICES — COMPACT WIDTH
========================================================= */

/* =========================================
   SERVICES
   Match THE STUDIO + SCOPE & INVESTMENT width
========================================= */

.services {
  width: min(var(--max), calc(100% - 72px));
  max-width: var(--max);
  margin: 0 auto;

  padding-top: 100px;
  padding-bottom: 85px;

  border-top: 1px solid var(--line);
}

/* =========================================
   SERVICES INTRO
   ========================================= */

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: 55px;
  align-items: stretch;
  padding-bottom: 55px;
  border-bottom: 1px solid var(--line);
}

.section-intro > * {
  min-width: 0;
}

/* LEFT IMAGE */

.section-intro-image {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: #f3f3f8;
}

.section-intro-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}

/* Subtle image movement */

.section-intro-image:hover img {
  transform: scale(1.035);
}

/* RIGHT CONTENT */

.section-intro-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
}

/* Eyebrow sits ABOVE the intro */

.section-intro-content .eyebrow {
  margin-bottom: 42px;
}

/* Main heading */

.section-intro-content h2 {
  margin: 0;
  max-width: 700px;
  font-size: clamp(42px, 4vw, 61px);
  line-height: 1.03;
  letter-spacing: -.055em;
}

/* Supporting text */

.section-intro-content > p:last-child {
  max-width: 650px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.section-intro h2,
.studio h2 {
  margin: 0;
  font-size: clamp(42px, 4vw, 61px);
  line-height: 1.03;
  letter-spacing: -.055em;
}

.section-intro p {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.85;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: rgba(20, 20, 25, 0.62);
  max-width: 640px;
  margin: 0;
  text-wrap: pretty;
}

/* Dark Mode */
body.dark .section-intro p {
  color: var(--muted);
}
/* =========================================
   SERVICE GRID
========================================= */

.service-grid {
  width: 100%;
  max-width: none;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;

  padding-top: 48px;
}

.service-card {
  width: 100%;
  min-width: 0;
  min-height: 350px;
  padding: 30px 32px;

  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 24px;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;

  cursor: pointer;
}
.card-number {
  color: var(--purple);
  font-size: 11px;
  letter-spacing: .22em;
}

.card-arrow {
  position: absolute;
  top: 40px;
  right: 35px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 17px;
}

.service-card h3 {
  margin: 12px 0 18px;
  font-size: 16px;
}

.service-card p {
  max-width: 500px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.card-tags {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .21em;
}

.process {
  max-width: none;
  width: 100%;
  padding: 130px max(36px, calc((100% - var(--max)) / 2)) 128px;
  background: #f8f8fc;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 40px;
}

.process-copy h2 {
  margin: 29px 0 25px;
  font-size: clamp(54px, 5vw, 76px);
  line-height: .94;
  letter-spacing: -.065em;
}

.process-copy > p:last-child {
  max-width: 440px;
  color: var(--muted);
  font-size: 19px;
}

.process-list {
  padding-top: 1px;
}

.process-row {
  min-height: 83px;
  display: grid;
  grid-template-columns: 84px 164px 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
}

.process-row:last-child {
  border-bottom: 1px solid var(--line);
}

.process-row > span {
  color: var(--purple);
  font-size: 11px;
  letter-spacing: .22em;
}

.process-row h3 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -.03em;
}

.process-row p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.studio {
  padding-top: 135px;
  padding-bottom: 115px;
}

.studio-heading {
  display: grid;
  grid-template-columns: 31% 69%;
  align-items: start;
}

.studio-columns {
  margin-left: 31%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 68px;
  margin-top: 29px;
}

.studio-columns p {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.7;
}

.scope {
  margin-top: 120px;
  padding-top: 57px;
  border-top: 1px solid var(--line);

  display: grid;
  grid-template-columns: 69% 31%;
}

/* LEFT SIDE */
.scope {
  margin-top: 120px;
  padding-top: 57px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 31% 69%;
}

.scope > div {
  display: grid;
  grid-template-columns: 1fr 365px;
  gap: 35px;
}

.scope h2 {
  font-size: 45px;
}

.scope-card {
  padding: 29px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
}

.scope-card p {
  color: var(--muted);
}
.contact {
  max-width: none;
  width: 100%;
  min-height: 590px;
  padding: 125px max(36px, calc((100% - var(--max)) / 2));
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: center;
  background:
    radial-gradient(circle at 18% 25%, rgba(100,78,232,.10), transparent 35%),
    #f9f9ff;
  border-top: 1px solid var(--line);
}

.contact h2 {
  margin: 35px 0 20px;
  font-size: clamp(65px, 7vw, 100px);
  line-height: .96;
  letter-spacing: -.075em;
}

.contact > div:first-child > p:last-child {
  max-width: 560px;
  color: var(--muted);
  font-size: 19px;
}

.contact-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.email {
  margin-top: 17px;
  color: var(--muted);
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.site-footer {
  display: flex;
  gap: 28px;
  padding: 32px 64px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--purple);
}

body.dark {
  --bg: #101014;
  --surface: #17171d;
  --ink: #f4f4f8;
  --muted: #a7aac0;
  --line: #2d2d38;
}

body.dark .site-header {
  background: rgba(16,16,20,.94);
}

body.dark .header-cta,
body.dark .button-secondary,
body.dark .scope-card,
body.dark .service-card {
  background: #17171d;
}

body.dark .process,
body.dark .contact {
  background: #15151b;
}

body.dark .card-arrow {
  border-color: var(--line);
}

/* Tablet */
@media (max-width: 900px) {
  .site-header {
    padding: 0 25px;
    gap: 20px;
  }

  .main-nav {
    gap: 15px;
  }

  .section {
    width: min(var(--max), calc(100% - 40px));
  }

  .hero {
    min-height: 710px;
  }

  .hero-copy {
    width: 100%;
  }

  .network-art {
    opacity: .45;
    right: -260px;
  }

  .section-intro,
  .process,
  .studio-heading,
  .scope,
  .contact {
    grid-template-columns: 1fr;
  }

  .section-intro {
    gap: 45px;
  }

  .process {
    padding-left: 20px;
    padding-right: 20px;
  }

  .process-copy {
    max-width: 650px;
  }

  .studio-columns {
    margin-left: 0;
  }

  .scope > div {
    grid-template-columns: 1fr;
  }

  .contact {
    padding-left: 20px;
    padding-right: 20px;
  }

  .contact-action {
    align-items: flex-start;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .site-header {
    height: 58px;
    padding: 0 18px;
  }

  .main-nav {
    display: none;
  }

  .header-cta {
    display: none;
  }

  .section {
    width: min(100% - 30px, var(--max));
  }

  .hero {
    min-height: 720px;
    padding-top: 40px;
  }

  .eyebrow {
    font-size: 9px;
    letter-spacing: .22em;
  }

  .hero h1 {
    margin-top: 40px;
    font-size: clamp(61px, 18vw, 92px);
  }

  .hero-text {
    width: 100%;
    font-size: 16px;
  }

  .hero-buttons {
    flex-wrap: wrap;
  }

  .network-art {
    width: 560px;
    height: 540px;
    right: -310px;
    top: 350px;
    opacity: .27;
  }

  .services {
    padding-top: 80px;
  }

  .section-intro h2,
  .studio h2 {
    font-size: 40px;
  }

  .service-grid {
    grid-template-columns: 1fr;
    padding-top: 35px;
  }

  .service-card {
    min-height: auto;
    padding: 28px;
  }

  .card-arrow {
    top: 28px;
    right: 28px;
  }

  .process {
    padding-top: 85px;
    padding-bottom: 80px;
  }

  .process-copy h2 {
    font-size: 55px;
  }

  .process-row {
    grid-template-columns: 40px 95px 1fr;
    gap: 8px;
  }

  .process-row h3 {
    font-size: 19px;
  }

  .process-row p {
    font-size: 13px;
  }

  .studio {
    padding-top: 85px;
  }

  .studio-columns {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .studio-columns p {
    font-size: 16px;
  }

  .scope {
    margin-top: 80px;
  }

  .contact {
    min-height: 650px;
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .contact h2 {
    font-size: 62px;
  }

  .contact > div:first-child > p:last-child {
    font-size: 16px;
  }

  .site-footer {
    padding: 26px 20px;
  }
}
#vanta-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#vanta-bg canvas {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;
}
.hero-copy {
  position: relative;
  z-index: 2;

  width: min(660px, 100%);
}
.services {
  padding-top: 115px;
  padding-bottom: 90px;
  border-top: 1px solid var(--line);
}
@media (max-width: 650px) {
  .services {
    padding-top: 90px;
  }
}
@media (max-width: 650px) {

  .hero {
    width: 100%;
    max-width: none;
    min-height: 720px;

    padding:
      40px 20px
      60px;
  }

  #vanta-bg {
    width: 100%;
    height: 100%;
  }

  #vanta-bg canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .hero-copy {
    width: 100%;
  }
}
/* =========================================
   FLOATING WHATSAPP BUTTON
   ========================================= */

.whatsapp-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 54px;
  padding: 0 20px 0 16px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;

  color: #ffffff;
  background: #25D366;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.16),
    0 4px 12px rgba(37, 211, 102, 0.25);

  font-size: 13px;
  font-weight: 700;
  text-decoration: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.whatsapp-float svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
  flex-shrink: 0;
}

.whatsapp-float:hover {
  transform: translateY(-4px);
  background: #20bd5a;

  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.20),
    0 6px 18px rgba(37, 211, 102, 0.32);
}

.whatsapp-float:active {
  transform: translateY(-1px);
}

/* =========================================
   DARK MODE
   ========================================= */

body.dark .whatsapp-float {
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.45),
    0 5px 18px rgba(37, 211, 102, 0.22);
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

  .whatsapp-float {
    right: 18px;
    bottom: 18px;

    width: 54px;
    height: 54px;
    padding: 0;

    justify-content: center;
  }

  .whatsapp-float span {
    display: none;
  }

  .whatsapp-float svg {
    width: 27px;
    height: 27px;
  }
}



.scope-image {
  width: 100%;
  margin-top: 42px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: #f7f7fb;
}

.scope-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  object-position: center;
}

body.dark .scope-image {
  background: #0b0b12;
  border-color: var(--line);
}

body.dark .scope-image img {
  mix-blend-mode: screen;
  opacity: .92;
}

@media (max-width: 650px) {
  .scope-image {
    margin-top: 30px;
    border-radius: 20px;
  }

  .scope-image img {
    min-height: 320px;
    object-fit: cover;
  }
}

/* =========================================================
   IRVING STUDIO — DIGITAL BLUEPRINT
   ========================================================= */

.studio-blueprint {
  position: relative;
  width: 100%;
  min-height: 500px;
  margin-top: 85px;
  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(96, 72, 229, .075),
      transparent 42%
    ),
    var(--surface);

  isolation: isolate;
}


/* GRID */

.blueprint-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(96, 72, 229, .055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96, 72, 229, .055) 1px,
      transparent 1px
    );

  background-size: 42px 42px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 15%,
      black 85%,
      transparent
    );

  opacity: .75;

  pointer-events: none;
}


/* TOP LABEL */

.blueprint-top {
  position: absolute;
  top: 25px;
  left: 28px;
  right: 28px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: var(--muted);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
}

.blueprint-live {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blueprint-live i {
  width: 6px;
  height: 6px;

  border-radius: 50%;
  background: var(--purple);

  box-shadow:
    0 0 0 5px rgba(96, 72, 229, .09);

  animation: blueprintBlink 2s ease-in-out infinite;
}

@keyframes blueprintBlink {

  0%,
  100% {
    opacity: .35;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

}


/* SVG */

.blueprint-svg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}


/* CONNECTION LINES */

.blueprint-line {
  fill: none;

  stroke: var(--line);
  stroke-width: 1.2;

  vector-effect: non-scaling-stroke;
}

.blueprint-data-line {
  fill: none;

  stroke: var(--purple);
  stroke-width: 2;

  stroke-linecap: round;

  stroke-dasharray: 6 14;

  opacity: .85;

  vector-effect: non-scaling-stroke;

  animation:
    blueprintFlow 5s linear infinite;
}

@keyframes blueprintFlow {

  to {
    stroke-dashoffset: -100;
  }

}


/* NODES */

.blueprint-node {
  fill: var(--surface);
  stroke: var(--purple);
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}

.blueprint-pulse {
  fill: none;
  stroke: var(--purple);
  stroke-width: 1;

  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  animation: nodePulse 3s ease-out infinite;
}

.blueprint-pulse:nth-of-type(2) {
  animation-delay: 1s;
}

.blueprint-pulse:nth-of-type(3) {
  animation-delay: 2s;
}

@keyframes nodePulse {

  0% {
    opacity: .65;
    transform: scale(.4);
  }

  70% {
    opacity: 0;
    transform: scale(1.8);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }

}


/* MODULES */

.blueprint-module {
  position: absolute;

  width: 150px;
  min-height: 110px;

  padding: 18px;

  display: flex;
  flex-direction: column;

  text-align: left;

  color: var(--ink);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.75),
      rgba(255,255,255,.32)
    );

  border: 1px solid var(--line);
  border-radius: 16px;

  cursor: pointer;

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;

  backdrop-filter: blur(12px);
}

.blueprint-module:hover,
.blueprint-module.active {
  transform: translateY(-6px);

  border-color: rgba(96,72,229,.5);

  background:
    linear-gradient(
      145deg,
      rgba(96,72,229,.12),
      rgba(255,255,255,.5)
    );

  box-shadow:
    0 18px 45px rgba(40,30,100,.10);
}

.module-number {
  color: var(--purple);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}

.module-icon {
  position: absolute;

  top: 16px;
  right: 17px;

  color: var(--purple);

  font-size: 15px;
}

.blueprint-module strong {
  margin-top: 18px;

  font-size: 13px;
  letter-spacing: .05em;
}

.blueprint-module small {
  margin-top: 5px;

  color: var(--muted);

  font-size: 8px;
  letter-spacing: .15em;
}


/* MODULE POSITIONS */

.module-design {
  left: 10%;
  top: 38%;
}

.module-build {
  left: 41%;
  top: 13%;
}

.module-connect {
  left: 41%;
  top: 62%;
}


/* CORE */

.blueprint-core {
  position: absolute;

  left: 65.8%;
  top: 50%;

  width: 125px;
  height: 125px;

  transform: translate(-50%, -50%);

  display: grid;
  place-items: center;

  border: 1px solid rgba(96,72,229,.45);
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(96,72,229,.13),
      rgba(255,255,255,.55) 65%,
      transparent 66%
    );

  box-shadow:
    0 0 0 12px rgba(96,72,229,.025),
    0 0 70px rgba(96,72,229,.12);
}

.core-ring {
  position: absolute;
  inset: 12px;

  border: 1px dashed rgba(96,72,229,.4);
  border-radius: 50%;

  animation: coreRotate 14s linear infinite;
}

@keyframes coreRotate {

  to {
    transform: rotate(360deg);
  }

}

.blueprint-core div {
  position: relative;

  display: flex;
  flex-direction: column;

  text-align: center;
}

.blueprint-core small {
  color: var(--purple);

  font-size: 8px;
  letter-spacing: .18em;
}

.blueprint-core strong {
  margin-top: 3px;

  font-size: 11px;
  letter-spacing: .04em;
}


/* OUTPUT */

.blueprint-output {
  position: absolute;

  right: 8%;
  top: 50%;

  transform: translateY(-50%);

  min-width: 155px;

  padding: 17px 18px;

  display: flex;
  align-items: center;
  gap: 12px;

  border: 1px solid var(--line);
  border-radius: 15px;

  background: rgba(255,255,255,.65);

  backdrop-filter: blur(12px);
}

.output-dot {
  width: 8px;
  height: 8px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--purple);

  box-shadow:
    0 0 0 5px rgba(96,72,229,.09);
}

.blueprint-output div {
  display: flex;
  flex-direction: column;
}

.blueprint-output small {
  color: var(--muted);

  font-size: 7px;
  letter-spacing: .18em;
}

.blueprint-output strong {
  margin-top: 3px;

  font-size: 10px;
}

.output-arrow {
  margin-left: auto;

  color: var(--purple);
}


/* FOOTER */

.blueprint-footer {
  position: absolute;

  bottom: 23px;
  left: 28px;
  right: 28px;

  display: flex;
  align-items: center;
  gap: 12px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
}

.blueprint-footer span:nth-child(even) {
  color: var(--purple);
}


/* =========================================================
   SCOPE ARCHITECTURE
   ========================================================= */

.scope-architecture {
  position: relative;

  width: 100%;

  margin-top: 20px;

  padding: 35px;

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(96,72,229,.10),
      transparent 35%
    ),
    var(--surface);

  isolation: isolate;
}

.scope-ambient {
  position: absolute;

  width: 400px;
  height: 400px;

  right: -180px;
  top: 50%;

  transform: translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(96,72,229,.11),
      transparent 65%
    );

  filter: blur(20px);

  animation: ambientFloat 8s ease-in-out infinite;
}

@keyframes ambientFloat {

  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }

  50% {
    transform: translateY(-50%) scale(1.12);
  }

}


/* HEADER */

.scope-header {
  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding-bottom: 30px;

  border-bottom: 1px solid var(--line);
}

.scope-header div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.scope-header span:first-child {
  color: var(--purple);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
}

.scope-header strong {
  font-size: 18px;
  letter-spacing: -.03em;
}

.scope-status {
  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
}

.scope-status i {
  display: inline-block;

  width: 6px;
  height: 6px;

  margin-right: 7px;

  border-radius: 50%;

  background: var(--purple);

  animation: blueprintBlink 2s ease-in-out infinite;
}


/* FLOW */

.scope-flow {
  position: relative;

  display: flex;
  align-items: center;

  margin-top: 45px;
}

.scope-step {
  position: relative;

  width: 135px;
  min-height: 105px;

  padding: 18px;

  flex-shrink: 0;

  display: flex;
  flex-direction: column;

  text-align: left;

  background: transparent;

  border: 1px solid var(--line);
  border-radius: 16px;

  color: var(--ink);

  cursor: pointer;

  transition:
    .35s ease;
}

.scope-step:hover,
.scope-step.active {
  border-color: rgba(96,72,229,.55);

  background:
    rgba(96,72,229,.07);

  transform: translateY(-5px);
}

.scope-step > span {
  color: var(--purple);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}

.scope-step strong {
  margin-top: 17px;

  font-size: 12px;
  letter-spacing: .04em;
}

.scope-step small {
  margin-top: 5px;

  color: var(--muted);

  font-size: 10px;
}


/* CONNECTORS */

/* =========================================================
   SCOPE CONNECTORS
   Compact + contained so they never overlap scope steps
========================================================= */

.scope-connector {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 1px;

  background: var(--line);

  overflow: hidden;
  isolation: isolate;
}

.scope-connector span {
  position: absolute;

  left: -10px;
  top: 50%;

  width: 10px;
  height: 2px;

  transform: translateY(-50%);

  background: var(--purple);

  border-radius: 999px;

  animation: scopeTravel 2.8s linear infinite;

  pointer-events: none;
}

@keyframes scopeTravel {
  from {
    left: -10px;
  }

  to {
    left: calc(100% - 10px);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .scope-connector {
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
  }

  .scope-connector span {
    width: 8px;
    height: 2px;
  }

  @keyframes scopeTravel {
    from {
      left: -8px;
    }

    to {
      left: calc(100% - 8px);
    }
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .scope-flow {
    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 12px;
  }

  .scope-step {
    flex: 0 0 120px;
    width: 120px;
  }

  .scope-connector {
    flex: 0 0 16px;
    width: 16px;
    min-width: 16px;

    height: 1px;

    overflow: hidden;
  }

  .scope-connector span {
    width: 6px;
    height: 2px;

    border-radius: 999px;
  }

  @keyframes scopeTravel {
    from {
      left: -6px;
    }

    to {
      left: calc(100% - 6px);
    }
  }

}


/* DETAIL */

.scope-detail {
  position: relative;

  min-height: 260px;

  margin-top: 45px;
  padding: 30px;

  display: grid;
  grid-template-columns: 80px 1fr 300px;
  gap: 35px;

  align-items: center;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.scope-detail-number {
  color: var(--purple);

  font-size: 42px;
  font-weight: 700;

  letter-spacing: -.07em;
}

.scope-detail-content > span {
  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
}

.scope-detail-content h3 {
  margin: 8px 0 10px;

  font-size: 42px;

  letter-spacing: -.06em;
}

.scope-detail-content p {
  max-width: 500px;

  margin: 0;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.7;
}

.scope-tags {
  display: flex;

  gap: 7px;

  margin-top: 20px;
}

.scope-tags span {
  padding: 6px 9px;

  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--muted);

  font-size: 7px;
  letter-spacing: .15em;
}


/* SCOPE VISUAL */

.scope-detail-visual {
  position: relative;

  width: 220px;
  height: 220px;

  margin-left: auto;

  display: grid;
  place-items: center;
}

.scope-orbit {
  position: absolute;

  border: 1px solid rgba(96,72,229,.2);
  border-radius: 50%;
}

.orbit-one {
  width: 80px;
  height: 80px;

  animation: orbitRotate 9s linear infinite;
}

.orbit-two {
  width: 145px;
  height: 145px;

  border-style: dashed;

  animation: orbitRotate 14s linear infinite reverse;
}

.orbit-three {
  width: 205px;
  height: 205px;

  animation: orbitRotate 20s linear infinite;
}

@keyframes orbitRotate {

  to {
    transform: rotate(360deg);
  }

}

.scope-orbit-core {
  position: relative;

  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--purple);

  box-shadow:
    0 0 0 10px rgba(96,72,229,.08),
    0 0 45px rgba(96,72,229,.35);
}

.scope-orbit-core span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: white;
}


/* FOOTER */

.scope-footer {
  display: grid;
  grid-template-columns: 50px 1fr auto;

  padding-top: 22px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
}

.scope-footer span:first-child {
  color: var(--purple);
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark .studio-blueprint,
body.dark .scope-architecture {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(139,92,246,.08),
      transparent 42%
    ),
    #17171d;
}

body.dark .blueprint-module {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    );
}

body.dark .blueprint-module:hover,
body.dark .blueprint-module.active {
  background:
    linear-gradient(
      145deg,
      rgba(139,92,246,.13),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.25);
}

body.dark .blueprint-output {
  background: rgba(23,23,29,.7);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .studio-blueprint {
    min-height: 560px;
  }

  .blueprint-module {
    width: 135px;
  }

  .module-design {
    left: 5%;
  }

  .module-build,
  .module-connect {
    left: 38%;
  }

  .blueprint-core {
    left: 67%;
  }

  .blueprint-output {
    right: 4%;
  }

  .scope-flow {
    overflow-x: auto;

    padding-bottom: 12px;

    scrollbar-width: thin;
  }

  .scope-step {
    width: 130px;
  }

  .scope-connector {
    min-width: 40px;
  }

  .scope-detail {
    grid-template-columns: 60px 1fr 220px;
  }

  .scope-detail-visual {
    transform: scale(.85);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .studio-blueprint {
    min-height: 620px;

    margin-top: 55px;

    border-radius: 22px;
  }

  .blueprint-top {
    left: 20px;
    right: 20px;
  }

  .blueprint-top > span:first-child {
    font-size: 7px;
  }

  .blueprint-svg {
    opacity: .7;
  }

  .blueprint-module {
    width: 125px;
    min-height: 100px;

    padding: 15px;
  }

  .module-design {
    left: 7%;
    top: 28%;
  }

  .module-build {
    left: auto;
    right: 7%;
    top: 28%;
  }

  .module-connect {
    left: 7%;
    top: 57%;
  }

  .blueprint-core {
    left: 69%;
    top: 64%;

    width: 105px;
    height: 105px;
  }

  .blueprint-output {
    right: 7%;
    top: 82%;

    min-width: 125px;

    padding: 12px;
  }

  .blueprint-footer {
    bottom: 18px;

    font-size: 6px;

    gap: 7px;
  }


  /* SCOPE */

  .scope-architecture {
    margin-top: 45px;

    padding: 22px;

    border-radius: 22px;
  }

  .scope-header {
    gap: 20px;
  }

  .scope-status {
    display: none;
  }

  .scope-flow {
    margin-top: 30px;

    overflow-x: auto;

    padding-bottom: 12px;
  }

  .scope-step {
    width: 120px;
    min-width: 120px;
  }

  .scope-detail {
    min-height: 420px;

    padding: 25px 5px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    gap: 10px;
  }

  .scope-detail-number {
    font-size: 30px;
  }

  .scope-detail-content h3 {
    font-size: 38px;
  }

  .scope-detail-visual {
    position: absolute;

    right: -45px;
    bottom: -45px;

    transform: scale(.7);

    opacity: .65;
  }

  .scope-footer {
    grid-template-columns: 35px 1fr auto;

    font-size: 6px;
  }

}





/* =========================================================
   IRVING STUDIO
   SERVICES — DIGITAL SERVICE SYSTEM
========================================================= */


/* =========================================================
   SERVICE CARD
========================================================= */

/* =========================================
   SERVICE CARD
========================================= */

.service-card {
  position: relative;
  overflow: hidden;

  min-height: 350px;
  padding: 30px 32px;

  display: flex;
  flex-direction: column;

  border: 1px solid var(--line);
  background: var(--surface);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;

  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 72, 229, 0.35);
  box-shadow: 0 18px 45px rgba(20, 15, 60, 0.08);
}
.service-card:hover,
.service-card:focus-visible,
.service-card.is-active {

  transform: translateY(-5px);

  border-color: rgba(96, 72, 229, 0.45);

  box-shadow:
    0 18px 45px rgba(96, 72, 229, 0.08);

}


.service-card:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 4px;
}


.service-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: relative;
  z-index: 3;
}


.service-arrow {
  font-size: 21px;

  color: var(--muted);

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


.service-card:hover .service-arrow,
.service-card.is-active .service-arrow {

  color: var(--purple);

  transform: translate(3px, -3px);

}



/* =========================================================
   MICRO VISUALS
========================================================= */

.service-micro {
  position: relative;
  width: 100%;
  height: 92px;
  margin: 20px 0 20px;
  overflow: hidden;
  border: 1px solid rgba(96, 72, 229, 0.16);
  background:
    linear-gradient(
      90deg,
      transparent 49%,
      rgba(96, 72, 229, 0.06) 50%,
      transparent 51%
    ),
    linear-gradient(
      transparent 49%,
      rgba(96, 72, 229, 0.06) 50%,
      transparent 51%
    );
  background-size: 20px 20px;
  border-radius: 14px;
}

.service-micro::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(96,72,229,0.09),
      transparent 60%
    );

  opacity: 0.7;

}



/* =========================================================
   MICRO — BROWSER
========================================================= */

.service-browser {

  padding: 0;

}


.micro-browser-bar {

  height: 20px;

  display: flex;
  align-items: center;

  gap: 5px;

  padding: 0 9px;

  border-bottom:
    1px solid rgba(96,72,229,0.12);

}


.micro-browser-bar span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--purple);

  opacity: 0.55;

}


.micro-browser-content {

  display: flex;

  height: calc(100% - 20px);

}


.browser-sidebar {

  width: 18%;

  border-right:
    1px solid rgba(96,72,229,0.12);

}


.browser-main {

  flex: 1;

  padding: 13px 15px;

}


.browser-heading {

  width: 55%;
  height: 8px;

  margin-bottom: 9px;

  border-radius: 4px;

  background: var(--purple);

  opacity: 0.7;

}


.browser-line {

  width: 85%;
  height: 4px;

  margin-bottom: 5px;

  border-radius: 3px;

  background: var(--muted);

  opacity: 0.2;

}


.browser-line.short {

  width: 60%;

}


.browser-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 6px;

  margin-top: 11px;

}


.browser-grid div {

  height: 28px;

  border:
    1px solid rgba(96,72,229,0.18);

  border-radius: 5px;

}


.micro-scan {

  position: absolute;

  left: 0;
  right: 0;

  top: -100%;

  height: 40%;

  background:
    linear-gradient(
      transparent,
      rgba(96,72,229,0.18),
      transparent
    );

  animation:
    microScan 4s linear infinite;

}


@keyframes microScan {

  0% {
    top: -40%;
  }

  100% {
    top: 110%;
  }

}



/* =========================================================
   MICRO — UI / UX
========================================================= */

.service-ui {

  display: flex;

  align-items: center;
  justify-content: center;

}


.ui-window {

  width: 72%;
  height: 72%;

  display: grid;

  grid-template-columns: 1fr 1.4fr;

  gap: 7px;

  padding: 8px;

  border:
    1px solid rgba(96,72,229,0.2);

  border-radius: 7px;

  background:
    rgba(255,255,255,0.25);

}


.ui-column {

  display: flex;

  flex-direction: column;

  gap: 6px;

}


.ui-box {

  height: 15px;

  border:
    1px solid rgba(96,72,229,0.18);

  border-radius: 3px;

}


.ui-box.large {

  height: 30px;

}


.ui-box.wide {

  height: 30px;

}


.ui-buttons {

  display: flex;

  gap: 5px;

}


.ui-buttons span {

  width: 28px;
  height: 8px;

  border-radius: 4px;

  background: var(--purple);

  opacity: 0.45;

}


.ui-pointer {

  position: absolute;

  width: 9px;
  height: 9px;

  border-right:
    1.5px solid var(--purple);

  border-bottom:
    1.5px solid var(--purple);

  transform:
    rotate(45deg);

  right: 19%;

  bottom: 17%;

  animation:
    uiPointer 3s ease-in-out infinite;

}


@keyframes uiPointer {

  0%,
  100% {
    transform:
      translate(0,0)
      rotate(45deg);
  }

  50% {
    transform:
      translate(-7px,-5px)
      rotate(45deg);
  }

}



/* =========================================================
   MICRO — DASHBOARD
========================================================= */

.service-dashboard {

  display: flex;

}


.dashboard-sidebar {

  width: 18%;

  padding: 13px 8px;

  border-right:
    1px solid rgba(96,72,229,0.13);

}


.dashboard-sidebar span {

  display: block;

  width: 70%;

  height: 5px;

  margin-bottom: 9px;

  border-radius: 4px;

  background: var(--muted);

  opacity: 0.22;

}


.dashboard-sidebar span:first-child {

  width: 85%;

  background: var(--purple);

  opacity: 0.6;

}


.dashboard-main {

  flex: 1;

  padding: 12px;

}


.dashboard-top {

  display: flex;

  justify-content: space-between;

}


.dashboard-top div {

  width: 32%;

  height: 8px;

  border-radius: 4px;

  background: var(--muted);

  opacity: 0.2;

}


.dashboard-top div:last-child {

  width: 17%;

  background: var(--purple);

  opacity: 0.5;

}


.dashboard-cards {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 5px;

  margin-top: 10px;

}


.dashboard-cards span {

  height: 25px;

  border:
    1px solid rgba(96,72,229,0.16);

  border-radius: 4px;

}


.dashboard-chart {

  display: flex;

  align-items: flex-end;

  gap: 6px;

  height: 37px;

  margin-top: 10px;

  padding: 0 5px;

}


.dashboard-chart i {

  flex: 1;

  height: 35%;

  border-radius: 2px 2px 0 0;

  background: var(--purple);

  opacity: 0.45;

  animation:
    chartBars 2.5s ease-in-out infinite alternate;

}


.dashboard-chart i:nth-child(2) {
  height: 55%;
  animation-delay: .15s;
}


.dashboard-chart i:nth-child(3) {
  height: 40%;
  animation-delay: .3s;
}


.dashboard-chart i:nth-child(4) {
  height: 75%;
  animation-delay: .45s;
}


.dashboard-chart i:nth-child(5) {
  height: 60%;
  animation-delay: .6s;
}


.dashboard-chart i:nth-child(6) {
  height: 90%;
  animation-delay: .75s;
}


@keyframes chartBars {

  from {
    transform: scaleY(.65);
  }

  to {
    transform: scaleY(1);
  }

}



/* =========================================================
   MICRO — NETWORK
========================================================= */

.service-network {

  overflow: hidden;

}


.network-node {

  position: absolute;

  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;

  height: 25px;

  padding: 0 9px;

  border:
    1px solid rgba(96,72,229,0.25);

  border-radius: 7px;

  background:
    var(--surface);

  color: var(--purple);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: .08em;

}


.node-one {
  left: 8%;
  top: 38%;
}


.node-two {
  left: 42%;
  top: 19%;
}


.node-three {
  right: 9%;
  top: 38%;
}


.node-four {
  left: 42%;
  bottom: 13%;
}


.network-line {

  position: absolute;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--purple),
      transparent
    );

  opacity: .35;

  transform-origin: left center;

}


.line-one {

  width: 35%;

  left: 19%;
  top: 45%;

  transform: rotate(-18deg);

}


.line-two {

  width: 35%;

  right: 18%;
  top: 45%;

  transform:
    rotate(18deg);

}


.line-three {

  width: 28%;

  left: 42%;
  top: 39%;

  transform:
    rotate(90deg);

}


.network-pulse {

  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--purple);

  left: 18%;
  top: 45%;

  box-shadow:
    0 0 0 5px rgba(96,72,229,.08);

  animation:
    networkPulse 3s linear infinite;

}


@keyframes networkPulse {

  0% {
    left: 18%;
    top: 45%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  45% {
    left: 45%;
    top: 29%;
  }

  75% {
    left: 78%;
    top: 45%;
  }

  100% {
    left: 85%;
    top: 45%;
    opacity: 0;
  }

}



/* =========================================================
   DIGITAL SERVICE ARCHITECTURE
========================================================= */

.services-system {

  position: relative;

  margin-top: 80px;

  padding: 46px;

  border:
    1px solid var(--line);

  border-radius: 28px;

  overflow: hidden;

  background:
    var(--surface);

}


.services-system::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .35;

  background-image:

    linear-gradient(
      rgba(96,72,229,.05) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(96,72,229,.05) 1px,
      transparent 1px
    );

  background-size:
    32px 32px;

}


.services-system-header {

  position: relative;
  z-index: 5;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  margin-bottom: 35px;

}


.services-system-header h3 {

  max-width: 580px;

  margin:
    10px 0 0;

  font-size:
    clamp(26px, 3vw, 42px);

  line-height: 1.05;

  letter-spacing:
    -0.04em;

}


.system-status {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .14em;

  color: var(--muted);

}


.status-dot {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--purple);

  box-shadow:
    0 0 0 5px rgba(96,72,229,.08);

  animation:
    statusPulse 2s ease-in-out infinite;

}


@keyframes statusPulse {

  50% {
    opacity: .4;
    transform: scale(.75);
  }

}



/* =========================================================
   ARCHITECTURE
========================================================= */

.service-architecture {

  position: relative;

  height: 520px;

}

/* =========================================================
   SERVICES SYSTEM — ARCHITECTURE CONNECTION LINES
   Stronger visibility in both themes
========================================================= */

.architecture-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;

  /* Keep the SVG itself fully visible */
  opacity: 1;
}

.architecture-path {
  fill: none;

  /* LIGHT MODE — darker, clearer purple */
  stroke: rgba(68, 52, 170, 0.58);

  stroke-width: 1.8;

  stroke-dasharray: 6 8;

  animation:
    architectureFlow 7s linear infinite;

  vector-effect: non-scaling-stroke;
}

@keyframes architectureFlow {
  to {
    stroke-dashoffset: -120;
  }
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark .architecture-path,
[data-theme="dark"] .architecture-path {
  /* DARK MODE — brighter against dark background */
  stroke: rgba(167, 139, 250, 0.68);

  stroke-width: 1.9;
}


/* =========================================================
   ACTIVE CONNECTION
========================================================= */

.services-system[data-active="web"] .path-web,
.services-system[data-active="design"] .path-design,
.services-system[data-active="apps"] .path-apps,
.services-system[data-active="integrations"] .path-integrations {
  stroke: var(--purple);
  stroke-width: 2.4;
  opacity: 1;
}


/* =========================================================
   MOBILE
   Keep the lines strong instead of fading the entire SVG
========================================================= */

@media (max-width: 700px) {

  .architecture-lines {
    opacity: 1;
  }

  .architecture-path {
    stroke-width: 2.2;
    stroke: rgba(68, 52, 170, 0.65);
  }

  body.dark .architecture-path,
  [data-theme="dark"] .architecture-path {
    stroke: rgba(167, 139, 250, 0.74);
    stroke-width: 2.2;
  }

  .services-system[data-active="web"] .path-web,
  .services-system[data-active="design"] .path-design,
  .services-system[data-active="apps"] .path-apps,
  .services-system[data-active="integrations"] .path-integrations {
    stroke-width: 2.7;
    opacity: 1;
  }
}


/* =========================================================
   ARCHITECTURE NODES
========================================================= */

.architecture-node {

  position: absolute;

  z-index: 4;

  width: 150px;
  height: 62px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  border:
    1px solid var(--line);

  border-radius: 12px;

  background:
    var(--surface);

  color: var(--ink);

  font-family: inherit;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .12em;

  cursor: pointer;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    color .3s ease;

}


.architecture-node:hover,
.architecture-node:focus-visible,
.architecture-node.is-active {

  transform: translateY(-4px);

  border-color:
    rgba(96,72,229,.55);

  color:
    var(--purple);

  box-shadow:
    0 15px 35px rgba(96,72,229,.10);

}


.architecture-node:focus-visible {

  outline:
    2px solid var(--purple);

  outline-offset: 4px;

}


.architecture-node-number {

  font-size: 8px;

  color: var(--purple);

}


.node-web {

  left: 7%;
  top: 14%;

}


.node-design {

  left: 7%;
  bottom: 14%;

}


.node-apps {

  right: 7%;
  top: 14%;

}


.node-integrations {

  right: 7%;
  bottom: 14%;

}



/* =========================================================
   CENTRAL CORE
========================================================= */

.architecture-core {

  position: absolute;

  z-index: 5;

  left: 50%;
  top: 50%;

  width: 210px;
  height: 210px;

  transform:
    translate(-50%, -50%);

  display: flex;

  align-items: center;
  justify-content: center;

}


.core-ring {

  position: absolute;

  inset: 0;

  border:
    1px dashed rgba(96,72,229,.35);

  border-radius: 50%;

  animation:
    coreRotate 22s linear infinite;

}


.core-ring::before,
.core-ring::after {

  content: "";

  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--purple);

}


.core-ring::before {

  top: 12px;
  left: 50%;

}


.core-ring::after {

  bottom: 12px;
  right: 50%;

}


@keyframes coreRotate {

  to {
    transform: rotate(360deg);
  }

}


.core-inner {

  width: 142px;
  height: 142px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  border:
    1px solid rgba(96,72,229,.35);

  border-radius: 50%;

  background:
    var(--surface);

  box-shadow:
    0 0 50px rgba(96,72,229,.08);

}


.core-label {

  margin-bottom: 7px;

  font-size: 8px;

  letter-spacing: .18em;

  color: var(--purple);

}


.core-inner strong {

  font-size: 15px;

  line-height: 1.05;

  letter-spacing: -.03em;

}


.core-inner small {

  margin-top: 9px;

  font-size: 6px;

  letter-spacing: .08em;

  color: var(--muted);

}



/* =========================================================
   OUTPUT
========================================================= */

.architecture-output {

  position: absolute;

  z-index: 4;

  left: 50%;
  bottom: 2%;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .2em;

  color: var(--muted);

}


.architecture-output span {

  width: 25px;
  height: 1px;

  background:
    var(--purple);

  opacity: .5;

}



/* =========================================================
   DETAIL PANEL
========================================================= */

.service-system-detail {

  position: relative;
  z-index: 5;

  display: grid;

  grid-template-columns:
    1fr 1.4fr auto;

  gap: 35px;

  align-items: center;

  padding-top: 28px;

  border-top:
    1px solid var(--line);

}


.system-detail-number {

  display: block;

  margin-bottom: 5px;

  color: var(--purple);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .15em;

}


.system-detail-number::before {

  content: "SERVICE ";

}


.service-system-detail h4 {

  margin: 0;

  font-size: 19px;

  letter-spacing: -.025em;

}


.service-system-detail p {

  max-width: 530px;

  margin: 0;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.7;

}


.system-detail-tags {

  display: flex;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;

}


.system-detail-tags span {

  padding:
    6px 9px;

  border:
    1px solid var(--line);

  border-radius: 999px;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .08em;

  color: var(--muted);

}



/* =========================================================
   ACTIVE CONNECTION
========================================================= */

.services-system[data-active="web"]
.path-web,

.services-system[data-active="design"]
.path-design,

.services-system[data-active="apps"]
.path-apps,

.services-system[data-active="integrations"]
.path-integrations {

  stroke:
    var(--purple);

  stroke-width:
    2;

  opacity: .8;

}


.services-system[data-active="web"]
.node-web,

.services-system[data-active="design"]
.node-design,

.services-system[data-active="apps"]
.node-apps,

.services-system[data-active="integrations"]
.node-integrations {

  border-color:
    rgba(96,72,229,.65);

  color:
    var(--purple);

  box-shadow:
    0 0 30px rgba(96,72,229,.1);

}



/* =========================================================
   DARK MODE
========================================================= */

[data-theme="dark"] .service-micro {

  background-color:
    rgba(255,255,255,.015);

}


[data-theme="dark"] .ui-window {

  background:
    rgba(255,255,255,.02);

}


[data-theme="dark"] .architecture-node {

  background:
    rgba(15,15,20,.85);

}


[data-theme="dark"] .core-inner {

  background:
    #111116;

}


[data-theme="dark"] .services-system {

  background:
    rgba(255,255,255,.015);

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .services-system {

    padding:
      35px 28px;

  }


  .service-architecture {

    height: 460px;

  }


  .architecture-node {

    width: 130px;

  }


  .architecture-core {

    width: 180px;
    height: 180px;

  }


  .core-inner {

    width: 125px;
    height: 125px;

  }


  .service-system-detail {

    grid-template-columns:
      1fr 1fr;

  }


  .system-detail-tags {

    grid-column:
      1 / -1;

    justify-content:
      flex-start;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .service-card {

    min-height:
      370px;

  }


  .services-system {

    margin-top:
      55px;

    padding:
      28px 18px;

    border-radius:
      20px;

  }


  .services-system-header {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      20px;

  }


  .services-system-header h3 {

    font-size:
      28px;

  }


  .service-architecture {

    height:
      560px;

    margin:
      0 -5px;

  }


  .architecture-lines {

    opacity:
      .45;

  }


  .architecture-core {

    width:
      170px;

    height:
      170px;

  }


  .core-inner {

    width:
      116px;

    height:
      116px;

  }


  .core-inner strong {

    font-size:
      12px;

  }


  .architecture-node {

    width:
      120px;

    height:
      52px;

    font-size:
      8px;

  }


  .node-web {

    left:
      0;

    top:
      7%;

  }


  .node-design {

    left:
      0;

    bottom:
      14%;

  }


  .node-apps {

    right:
      0;

    top:
      7%;

  }


  .node-integrations {

    right:
      0;

    bottom:
      14%;

  }


  .architecture-output {

    bottom:
      2%;

    font-size:
      7px;

  }


  .service-system-detail {

    display:
      block;

    padding-top:
      24px;

  }


  .service-system-detail p {

    margin-top:
      15px;

  }


  .system-detail-tags {

    margin-top:
      18px;

    justify-content:
      flex-start;

  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .service-card,
  .service-arrow,
  .architecture-node {

    transition:
      none;

  }


  .micro-scan,
  .ui-pointer,
  .dashboard-chart i,
  .network-pulse,
  .architecture-path,
  .core-ring,
  .status-dot {

    animation:
      none;

  }

}



@media (max-width: 900px) {
  .services {
    width: min(100% - 40px, 1160px);
  }
}

@media (max-width: 650px) {
  .services {
    width: calc(100% - 30px);
    padding-top: 80px;
    padding-bottom: 70px;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 35px;
  }

  .service-card {
    min-height: 340px;
    padding: 26px;
  }

  .service-micro {
    height: 90px;
    margin: 18px 0 20px;
  }
}





@media (max-width: 900px) {

  .services {
    width: calc(100% - 40px);
  }

  .service-grid {
    max-width: 100%;
  }

}


@media (max-width: 650px) {

  .services {
    width: calc(100% - 30px);
    padding-top: 80px;
    padding-bottom: 70px;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 35px;
  }

  .service-card {
    min-height: 340px;
    padding: 26px;
  }

}


/* =========================================================
   IRVING AI
========================================================= */

.irving-ai {
  --ai-purple: #8B5CF6;
  --ai-purple-2: #C4B5FD;

  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 9999;

  font-family: inherit;
}


/* ---------------------------------------------------------
   LAUNCHER
--------------------------------------------------------- */

.irving-ai-launcher {
  position: relative;

  width: 62px;
  height: 62px;

  border: 1px solid rgba(139, 92, 246, 0.45);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(196, 181, 253, 0.25),
      transparent 35%
    ),
    rgba(12, 12, 20, 0.92);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.08),
    0 12px 45px rgba(0, 0, 0, 0.3),
    0 0 35px rgba(139, 92, 246, 0.18);

  backdrop-filter: blur(18px);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.irving-ai-launcher:hover {
  transform: translateY(-3px) scale(1.03);

  box-shadow:
    0 15px 50px rgba(0, 0, 0, 0.35),
    0 0 45px rgba(139, 92, 246, 0.3);
}


.irving-ai-launcher-icon {
  position: relative;
  z-index: 2;

  width: 26px;
  height: 26px;
}


/* glowing orb */

.irving-ai-orb {
  position: absolute;

  width: 10px;
  height: 10px;

  top: 13px;
  right: 13px;

  border-radius: 50%;

  background: #C4B5FD;

  box-shadow:
    0 0 10px #8B5CF6,
    0 0 20px rgba(139, 92, 246, 0.8);

  animation: irvingAiPulse 2s infinite;
}


@keyframes irvingAiPulse {

  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }

}


/* notification */

.irving-ai-notification {
  position: absolute;

  top: -3px;
  right: -2px;

  width: 19px;
  height: 19px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #8B5CF6;

  color: #fff;

  font-size: 10px;
  font-weight: 700;

  border: 2px solid #0B0B12;
}


/* ---------------------------------------------------------
   PANEL
--------------------------------------------------------- */

.irving-ai-panel {

  position: absolute;

  right: 0;
  bottom: 78px;

  width: min(410px, calc(100vw - 32px));
  height: min(650px, calc(100vh - 120px));

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-radius: 24px;

  border: 1px solid rgba(139, 92, 246, 0.2);

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(139, 92, 246, 0.12),
      transparent 30%
    ),
    rgba(11, 11, 18, 0.97);

  box-shadow:
    0 25px 90px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(139, 92, 246, 0.08);

  backdrop-filter: blur(25px);

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(15px)
    scale(0.96);

  transform-origin: bottom right;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}


.irving-ai-panel.is-open {

  opacity: 1;
  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.irving-ai-header {

  min-height: 76px;

  padding: 16px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.07);

  background:
    rgba(255, 255, 255, 0.025);
}


.irving-ai-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}


.irving-ai-logo {

  width: 38px;
  height: 38px;

  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle,
      rgba(196, 181, 253, 0.4),
      rgba(139, 92, 246, 0.15)
    );

  border:
    1px solid rgba(139, 92, 246, 0.3);

  box-shadow:
    inset 0 0 20px rgba(139, 92, 246, 0.15);
}


.irving-ai-logo span {

  width: 13px;
  height: 13px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #C4B5FD,
      #8B5CF6
    );

  box-shadow:
    0 0 18px rgba(139, 92, 246, 0.8);
}


.irving-ai-name {

  color: #fff;

  font-size: 15px;
  font-weight: 650;

  letter-spacing: -0.01em;

  display: flex;
  align-items: center;
  gap: 7px;
}


.irving-ai-live {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #8B5CF6;

  box-shadow:
    0 0 8px #8B5CF6;
}


.irving-ai-status {

  margin-top: 3px;

  color: rgba(255,255,255,0.45);

  font-size: 11px;
}


.irving-ai-close {

  width: 32px;
  height: 32px;

  border: 0;

  border-radius: 50%;

  background:
    rgba(255,255,255,0.05);

  color:
    rgba(255,255,255,0.7);

  font-size: 22px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}


.irving-ai-close:hover {

  background:
    rgba(255,255,255,0.1);

  color: #fff;
}


/* ---------------------------------------------------------
   MESSAGES
--------------------------------------------------------- */

.irving-ai-messages {

  flex: 1;

  overflow-y: auto;

  padding: 22px 18px;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(139,92,246,.35)
    transparent;
}


.irving-ai-messages::-webkit-scrollbar {
  width: 5px;
}

.irving-ai-messages::-webkit-scrollbar-thumb {
  background:
    rgba(139,92,246,.35);

  border-radius: 10px;
}


/* welcome */

.irving-ai-welcome {

  position: relative;

  padding: 8px 3px 20px;

  overflow: hidden;
}


.irving-ai-welcome-glow {

  position: absolute;

  width: 150px;
  height: 150px;

  top: -90px;
  left: -60px;

  border-radius: 50%;

  background:
    rgba(139,92,246,.13);

  filter: blur(35px);
}


.irving-ai-welcome-icon {

  position: relative;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.3),
      rgba(196,181,253,.08)
    );

  border:
    1px solid rgba(139,92,246,.25);

  color: #C4B5FD;

  font-size: 20px;

  box-shadow:
    0 0 25px rgba(139,92,246,.1);
}


.irving-ai-welcome h3 {

  margin: 0 0 7px;

  color: #fff;

  font-size: 21px;

  letter-spacing: -0.03em;
}


.irving-ai-welcome p {

  max-width: 330px;

  margin: 0;

  color:
    rgba(255,255,255,.52);

  font-size: 13px;

  line-height: 1.65;
}


/* ---------------------------------------------------------
   QUICK ACTIONS
--------------------------------------------------------- */

.irving-ai-quick-actions {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  margin-bottom: 18px;
}


.irving-ai-quick {

  min-height: 48px;

  padding: 10px 12px;

  display: flex;
  align-items: center;

  gap: 8px;

  text-align: left;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 12px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.72);

  font-family: inherit;

  font-size: 11px;

  cursor: pointer;

  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}


.irving-ai-quick span {

  color:
    #C4B5FD;

  font-size: 14px;
}


.irving-ai-quick:hover {

  transform: translateY(-1px);

  background:
    rgba(139,92,246,.09);

  border-color:
    rgba(139,92,246,.25);
}


/* ---------------------------------------------------------
   MESSAGE BUBBLES
--------------------------------------------------------- */

.irving-ai-message {

  display: flex;

  margin: 10px 0;
}


.irving-ai-message.user {

  justify-content: flex-end;
}


.irving-ai-bubble {

  max-width: 82%;

  padding: 11px 13px;

  border-radius: 15px;

  font-size: 13px;

  line-height: 1.55;

  white-space: pre-wrap;
}


.irving-ai-message.assistant
.irving-ai-bubble {

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.06);

  color:
    rgba(255,255,255,.8);

  border-bottom-left-radius: 5px;
}


.irving-ai-message.user
.irving-ai-bubble {

  background:
    linear-gradient(
      135deg,
      #8B5CF6,
      #6D45D8
    );

  color: #fff;

  border-bottom-right-radius: 5px;

  box-shadow:
    0 7px 25px rgba(139,92,246,.16);
}


/* ---------------------------------------------------------
   TYPING
--------------------------------------------------------- */

.irving-ai-typing {

  padding:
    0 18px 9px;

  display: flex;

  gap: 4px;
}


.irving-ai-typing span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #C4B5FD;

  animation:
    irvingAiTyping
    1.2s
    infinite
    ease-in-out;
}


.irving-ai-typing span:nth-child(2) {
  animation-delay: .15s;
}

.irving-ai-typing span:nth-child(3) {
  animation-delay: .3s;
}


@keyframes irvingAiTyping {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: .35;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }

}


/* ---------------------------------------------------------
   INPUT
--------------------------------------------------------- */

.irving-ai-input-area {

  margin: 0 14px 10px;

  display: flex;
  align-items: flex-end;

  gap: 8px;

  padding: 8px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 16px;

  background:
    rgba(255,255,255,.035);
}


.irving-ai-input-area textarea {

  flex: 1;

  min-height: 38px;
  max-height: 100px;

  resize: none;

  padding:
    9px 7px;

  border: 0;
  outline: 0;

  background: transparent;

  color: #fff;

  font-family: inherit;

  font-size: 13px;

  line-height: 1.45;
}


.irving-ai-input-area textarea::placeholder {

  color:
    rgba(255,255,255,.32);
}


.irving-ai-send {

  width: 38px;
  height: 38px;

  flex-shrink: 0;

  border: 0;

  border-radius: 11px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #8B5CF6,
      #6D45D8
    );

  color: #fff;

  cursor: pointer;

  transition:
    transform .2s ease,
    opacity .2s ease;
}


.irving-ai-send:hover {

  transform:
    translateY(-1px);

}


.irving-ai-send:disabled {

  opacity: .45;

  cursor: not-allowed;

}


.irving-ai-send svg {

  width: 17px;
  height: 17px;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.irving-ai-footer {

  padding:
    0 18px 13px;

  text-align: center;

  color:
    rgba(255,255,255,.25);

  font-size: 9px;

  letter-spacing: .03em;
}


/* ---------------------------------------------------------
   LIGHT MODE
--------------------------------------------------------- */

body.light .irving-ai-panel,
.light .irving-ai-panel {

  background:
    rgba(250,250,253,.97);

  border-color:
    rgba(79,70,229,.15);

  box-shadow:
    0 25px 80px rgba(20,20,40,.15);
}


body.light .irving-ai-header,
.light .irving-ai-header {

  border-bottom-color:
    rgba(20,20,40,.08);
}


body.light .irving-ai-name,
.light .irving-ai-name {

  color: #111116;
}


body.light .irving-ai-status,
.light .irving-ai-status {

  color:
    rgba(17,17,22,.48);
}


body.light .irving-ai-close,
.light .irving-ai-close {

  color:
    rgba(17,17,22,.65);

  background:
    rgba(17,17,22,.05);
}


body.light .irving-ai-welcome h3,
.light .irving-ai-welcome h3 {

  color: #111116;
}


body.light .irving-ai-welcome p,
.light .irving-ai-welcome p {

  color:
    rgba(17,17,22,.58);
}


body.light .irving-ai-quick,
.light .irving-ai-quick {

  color:
    rgba(17,17,22,.72);

  background:
    rgba(17,17,22,.025);

  border-color:
    rgba(17,17,22,.08);
}


body.light .irving-ai-message.assistant
.irving-ai-bubble,
.light .irving-ai-message.assistant
.irving-ai-bubble {

  color:
    rgba(17,17,22,.78);

  background:
    rgba(17,17,22,.045);

  border-color:
    rgba(17,17,22,.06);
}


body.light .irving-ai-input-area,
.light .irving-ai-input-area {

  background:
    rgba(17,17,22,.035);

  border-color:
    rgba(17,17,22,.09);
}


body.light .irving-ai-input-area textarea,
.light .irving-ai-input-area textarea {

  color: #111116;
}


body.light .irving-ai-input-area textarea::placeholder,
.light .irving-ai-input-area textarea::placeholder {

  color:
    rgba(17,17,22,.4);
}


body.light .irving-ai-footer,
.light .irving-ai-footer {

  color:
    rgba(17,17,22,.3);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

  .irving-ai {

    right: 15px;
    bottom: 15px;
  }


  .irving-ai-launcher {

    width: 58px;
    height: 58px;
  }


  .irving-ai-panel {

    right: 0;
    bottom: 72px;

    width:
      min(
        calc(100vw - 20px),
        410px
      );

    height:
      min(
        calc(100vh - 95px),
        680px
      );

    border-radius: 20px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .irving-ai *,
  .irving-ai *::before,
  .irving-ai *::after {

    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

}


/* =========================================================
   IRVING AI — FORCE CHAT HEADER LAYOUT
========================================================= */

.irving-ai .irving-ai-header {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.irving-ai .irving-ai-panel {
  width: min(410px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box !important;
}

.irving-ai .irving-ai-header *,
.irving-ai .irving-ai-panel * {
  max-width: 100%;
  box-sizing: border-box;
}


/* =========================================================
   IRVING AI — FINAL LAYOUT FIX
========================================================= */

.irving-ai {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 99999;

  width: auto;
  max-width: none;
}


/* ---------------------------------------------------------
   CHAT WINDOW
--------------------------------------------------------- */

.irving-ai-panel {
  position: fixed;

  right: 28px;
  bottom: 105px;

  width: 390px;
  max-width: calc(100vw - 40px);

  height: 600px;
  max-height: calc(100vh - 140px);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  box-sizing: border-box;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(18px)
    scale(0.97);

  transform-origin:
    bottom right;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}


/* ---------------------------------------------------------
   OPEN STATE
--------------------------------------------------------- */

.irving-ai-panel.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

/*
   IMPORTANT:
   This prevents the accidental 22500px width
   that appeared in DevTools.
*/

.irving-ai-panel .irving-ai-header {
  width: 100% !important;

  min-width: 0 !important;

  max-width: 100% !important;

  flex: 0 0 auto;

  box-sizing: border-box;

  overflow: hidden;
}


/* ---------------------------------------------------------
   BRAND
--------------------------------------------------------- */

.irving-ai-brand {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 12px;

  flex: 1;
}


.irving-ai-brand > div:last-child {
  min-width: 0;
}


.irving-ai-name,
.irving-ai-status {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   MESSAGE AREA
--------------------------------------------------------- */

.irving-ai-messages {
  width: 100%;

  min-width: 0;

  flex: 1;

  box-sizing: border-box;

  overflow-y: auto;

  overflow-x: hidden;
}


/* ---------------------------------------------------------
   INPUT AREA
--------------------------------------------------------- */

.irving-ai-input-area {
  width: 95%;

  min-width: 0;

  box-sizing: border-box;

  flex: 0 0 auto;
}


/* ---------------------------------------------------------
   TEXTAREA
--------------------------------------------------------- */

.irving-ai-input-area textarea {
  min-width: 0;

  max-width: 100%;

  box-sizing: border-box;

  resize: none;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

  .irving-ai {
    right: 14px;
    bottom: 14px;
  }


  .irving-ai-panel {

    right: 14px;
    bottom: 88px;

    width:
      calc(100vw - 28px);

    max-width:
      calc(100vw - 28px);

    height:
      min(600px, calc(100vh - 110px));

    max-height:
      calc(100vh - 110px);

  }

}

/* =========================================================
   IRVING STUDIO
   VISUAL SYSTEM ENHANCEMENT
   ========================================================= */


/* =========================================================
   SVG ICON FOUNDATION
   ========================================================= */

.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.svg-icon svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;

  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   TECHNICAL SECTION
   ========================================================= */

.technical-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   SUBTLE TECHNICAL GRID
   ========================================================= */

.technical-grid {
  position: absolute;
  inset: 0;

  pointer-events: none;

  z-index: -1;

  opacity: 0.5;

  background-image:
    linear-gradient(
      rgba(100, 90, 180, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(100, 90, 180, 0.045) 1px,
      transparent 1px
    );

  background-size: 48px 48px;

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 82%,
    transparent 100%
  );

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 82%,
    transparent 100%
  );
}


/* =========================================================
   STATUS INDICATOR
   ========================================================= */

.studio-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-top: 20px;
  margin-bottom: 22px;

  font-family: "DM Sans", sans-serif;

  font-size: 0.64rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: rgba(20, 20, 25, 0.46);
}


.status-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #7c3aed;

  box-shadow:
    0 0 0 3px rgba(124, 58, 237, 0.08),
    0 0 12px rgba(124, 58, 237, 0.45);

  animation: irvingStatusPulse 2.5s ease-in-out infinite;
}


@keyframes irvingStatusPulse {

  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

}


/* =========================================================
   SERVICE NUMBER
   ========================================================= */

.service-number {
  font-family: "DM Sans", sans-serif;

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.16em;

  line-height: 1;

  color: rgba(20, 20, 25, 0.42);
}


/* =========================================================
   SERVICE TECH MARKER
   ========================================================= */

.service-tech-marker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 18px;
  margin-bottom: 8px;

  font-family: "DM Sans", sans-serif;

  font-size: 0.58rem;
  font-weight: 500;

  letter-spacing: 0.15em;

  color: rgba(20, 20, 25, 0.32);
}


.service-tech-marker span {
  width: 18px;
  height: 1px;

  display: block;

  background: currentColor;
}


/* =========================================================
   SERVICE ARROW
   CLEAN SVG — NO BORDER / NO BOX
   ========================================================= */

.service-arrow {
  width: 28px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 28px;

  padding: 0;
  margin: 0;

  color: currentColor;

  background: transparent;
  border: 0;
  border-radius: 0;

  box-shadow: none;

  line-height: 0;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    color 0.35s ease;
}


/* SVG itself */

.service-arrow svg {
  width: 22px;
  height: 22px;

  display: block;

  overflow: visible;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;

  filter: none;

  transition:
    transform 0.35s ease;
}


/* Card hover */

.service-card:hover .service-arrow {
  transform: translate(3px, -3px);
}


/* Optional subtle arrow emphasis */

.service-card:hover .service-arrow svg {
  transform: scale(1.04);
}


/* =========================================================
   DARK MODE ARROW
   ========================================================= */

body.dark .service-arrow,
[data-theme="dark"] .service-arrow {
  color: #ffffff;
}


/* =========================================================
   HERO / BUTTON ARROWS
   ========================================================= */

.button-arrow {
  width: 18px;
  height: 18px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-left: 8px;
}


.button-arrow svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform 0.25s ease;
}


.button:hover .button-arrow svg {
  transform: translate(2px, -2px);
}


.button-arrow-down svg {
  transition: transform 0.25s ease;
}


.button:hover .button-arrow-down svg {
  transform: translateY(2px);
}


/* =========================================================
   SERVICE NETWORK SYMBOL
   ========================================================= */

.service-network-symbol {
  position: absolute;

  top: 68px;
  right: 30px;

  width: 64px;
  height: 64px;

  display: flex;

  align-items: center;
  justify-content: center;

  pointer-events: none;

  opacity: 0.42;

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}


.service-card:hover .service-network-symbol {
  opacity: 0.75;

  transform:
    rotate(4deg)
    scale(1.05);
}


.service-network-symbol svg {
  width: 100%;
  height: 100%;
}


.service-network-symbol .network-line {
  fill: none;

  stroke: currentColor;

  stroke-width: 1.4;

  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: 0.55;
}


.service-network-symbol .network-node {
  fill: currentColor;

  transition:
    r 0.25s ease;
}


.service-card:hover
.service-network-symbol .network-node {
  r: 4.7;
}


/* =========================================================
   SERVICE CARD TOP
   ========================================================= */

.service-card-top {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  position: relative;

  z-index: 3;
}


/* =========================================================
   BLUEPRINT SVG ICONS
   ========================================================= */

.blueprint-module .svg-icon {
  width: 23px;
  height: 23px;

  display: inline-flex;

  align-items: center;
  justify-content: center;
}


.blueprint-module .svg-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   BLUEPRINT OUTPUT ARROW
   ========================================================= */

.output-arrow {
  width: 22px;
  height: 22px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  color: currentColor;

  background: transparent;
  border: none;
  box-shadow: none;

  padding: 0;
}


.output-arrow svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   SYSTEM STATUS
   ========================================================= */

.system-status {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  font-family: "DM Sans", sans-serif;

  font-size: 0.63rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.system-status .status-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 6px;
}


/* =========================================================
   BLUEPRINT LIVE STATUS
   ========================================================= */

.blueprint-live {
  display: inline-flex;

  align-items: center;

  gap: 8px;
}


.blueprint-live i {
  width: 6px;
  height: 6px;

  display: inline-block;

  border-radius: 50%;

  background: #7c3aed;

  box-shadow:
    0 0 10px rgba(124,58,237,0.5);

  animation:
    irvingStatusPulse 2.5s ease-in-out infinite;
}


/* =========================================================
   QUICK ACTION ICONS
   ========================================================= */

.quick-icon {
  width: 18px;
  height: 18px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 18px;
}


.quick-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   IRVING AI WELCOME ICON
   ========================================================= */

.irving-ai-welcome-icon {
  width: 24px;
  height: 24px;
}


.irving-ai-welcome-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.service-arrow,
.button-arrow,
.network-icon,
.service-network-symbol,
.svg-icon {
  -webkit-font-smoothing: antialiased;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .technical-grid {
    background-size: 34px 34px;

    opacity: 0.32;
  }


  .studio-status {
    margin-top: 16px;
    margin-bottom: 18px;

    font-size: 0.58rem;

    letter-spacing: 0.12em;
  }


  .service-network-symbol {
    width: 50px;
    height: 50px;

    top: 62px;
    right: 20px;

    opacity: 0.3;
  }


  /* Clean mobile arrow */

  .service-arrow {
    width: 26px;
    height: 26px;

    flex-basis: 26px;

    background: transparent;
    border: none;
    border-radius: 0;

    box-shadow: none;
  }


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


  .service-tech-marker {
    font-size: 0.54rem;

    margin-top: 14px;
  }


  .button-arrow {
    width: 16px;
    height: 16px;

    margin-left: 6px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  .service-network-symbol {
    width: 44px;
    height: 44px;

    right: 16px;
  }


  .service-arrow {
    width: 24px;
    height: 24px;

    flex-basis: 24px;
  }


  .service-arrow svg {
    width: 19px;
    height: 19px;
  }


  .studio-status {
    color: var(--muted);
    font-size: 0.53rem;
  }

}


/* =========================================================
   MOBILE OVERFLOW PROTECTION
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


img,
svg,
video,
canvas {
  max-width: 100%;
}


/* =========================================================
   SERVICE CARDS — SAFETY
   ========================================================= */

.service-card {
  box-sizing: border-box;

  min-width: 0;

  max-width: 100%;
}


.service-card p,
.service-card h3 {
  max-width: 100%;

  overflow-wrap: break-word;
}


/* =========================================================
   TECHNICAL MARKER ANIMATION
   ========================================================= */

.service-tech-marker span {
  transition:
    width 0.3s ease;
}


.service-card:hover .service-tech-marker span {
  width: 28px;
}


/* =========================================================
   NETWORK SYMBOL MICRO ANIMATION
   ========================================================= */

.service-network-symbol .network-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;

  animation:
    irvingNetworkDraw 2.5s ease forwards;
}


@keyframes irvingNetworkDraw {

  to {
    stroke-dashoffset: 0;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .status-dot,
  .blueprint-live i,
  .service-network-symbol .network-line {
    animation: none;
  }

  .service-arrow,
  .service-network-symbol,
  .button-arrow svg {
    transition: none;
  }

}

/* =========================================================
   MOBILE FULL-WIDTH PROCESS + CONTACT
   Edge-to-edge sections on all mobile devices
========================================================= */

@media (max-width: 650px) {

  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  .process {
    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    box-sizing: border-box;

    padding: 75px 20px 70px;

    display: block;
  }

  .process-copy {
    width: 100%;
    max-width: none;
  }

  .process-copy h2 {
    margin: 24px 0 20px;

    font-size: clamp(48px, 14vw, 68px);
    line-height: .94;
  }

  .process-copy > p:last-child {
    max-width: 100%;

    font-size: 16px;
    line-height: 1.65;
  }

  .process-list {
    width: 100%;
    margin-top: 48px;
  }

  .process-row {
    width: 100%;
    min-height: 78px;

    grid-template-columns: 45px 90px minmax(0, 1fr);

    gap: 8px;

    box-sizing: border-box;
  }

  .process-row > span {
    font-size: 10px;
  }

  .process-row h3 {
    font-size: 19px;
  }

  .process-row p {
    font-size: 12px;
    line-height: 1.45;
  }


  /* -------------------------------------------------------
     CONTACT
  ------------------------------------------------------- */

  .contact {
    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    box-sizing: border-box;

    min-height: auto;

    padding: 80px 20px;

    display: block;
  }

  .contact > div {
    width: 100%;
    max-width: none;
  }

  .contact h2 {
    margin: 25px 0 20px;

    font-size: clamp(50px, 14vw, 72px);
    line-height: .94;
  }

  .contact > div:first-child > p:last-child {
    max-width: 100%;

    font-size: 16px;
    line-height: 1.7;
  }

  .contact-action {
    width: 100%;
    margin-top: 38px;
  }

  .contact-action .button {
    width: 100%;
    max-width: none;
    box-sizing: border-box;

    justify-content: space-between;
  }

}
/* =========================================================
   IRVING STUDIO — HEADER ACTION ORDER
   WhatsApp → Theme → Start a project
========================================================= */
.site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    gap: 7px !important;
}

/* WhatsApp icon */
.site-header .header-whatsapp {
  
  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--muted);
  text-decoration: none;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: transparent;

  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;
}

.site-header .header-whatsapp svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.site-header .header-whatsapp:hover {
  color: var(--ink);
  border-color: var(--purple);
  background: rgba(96, 72, 229, .08);
  transform: translateY(-1px);
}

/* Theme button */
.site-header .theme-toggle {
      order: 1 !important;
  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--muted);
  background: transparent;

  border: 1px solid var(--line);
  border-radius: 50%;

  cursor: pointer;

  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;
}

.site-header .theme-toggle:hover {
  color: var(--ink);
  border-color: var(--purple);
  background: rgba(96, 72, 229, .08);
  transform: translateY(-1px);
}

/* Start a project — final item */
.site-header .header-cta {
  order: 3;

  margin-left: 2px;

  white-space: nowrap;
}

/* Explicit order */
.site-header .header-whatsapp {
  order: 1;
}

.site-header .theme-toggle {
  order: 2;
}

.site-header .header-cta {
  order: 3;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .site-header .header-actions {
    gap: 7px;
  }

  .site-header .header-whatsapp,
  .site-header .theme-toggle {
    width: 34px;
    height: 34px;
  }

  .site-header .header-whatsapp svg {
    display: none !important;
    width: 16px;
    height: 16px;
  }

  .site-header .header-cta {
    display: none !important;
    padding-left: 13px;
    padding-right: 13px;
    font-size: 11px;
  }
}

/* =========================================================
   IRVING STUDIO — MOBILE HAMBURGER NAVIGATION
========================================================= */

/* Desktop: hide mobile navigation */
.mobile-menu-toggle,
.mobile-navigation {
  display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .site-header {
    height: 57px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 10000;
  }


  /* -------------------------------------------------------
     HIDE DESKTOP NAVIGATION
  ------------------------------------------------------- */

  .site-header .main-nav {
    display: none;
  }


  /* -------------------------------------------------------
     HEADER ACTIONS
     WhatsApp → Theme → CTA → Hamburger
  ------------------------------------------------------- */

  .site-header .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    margin-left: auto;
  }


  /* -------------------------------------------------------
     WHATSAPP
  ------------------------------------------------------- */

  .site-header .header-whatsapp {
    
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-header .header-whatsapp svg {
    width: 16px;
    height: 16px;
  }


  /* -------------------------------------------------------
     THEME
  ------------------------------------------------------- */

  .site-header .theme-toggle {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;
  }


  /* -------------------------------------------------------
     START PROJECT
  ------------------------------------------------------- */

  .site-header .header-cta {
    height: 34px;

    padding: 0 13px;

    white-space: nowrap;

    font-size: 11px;
  }


  /* -------------------------------------------------------
     HAMBURGER BUTTON
  ------------------------------------------------------- */

  .site-header .mobile-menu-toggle {
     order: 2 !important;
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    padding: 0;

    border: 1px solid var(--line);
    border-radius: 50%;

    background: transparent;
    color: var(--ink);

    cursor: pointer;

    transition:
      border-color .25s ease,
      background .25s ease,
      transform .25s ease;
  }

  .site-header .mobile-menu-toggle span {
    display: block;

    width: 13px;
    height: 1.5px;

    background: currentColor;

    border-radius: 999px;

    transition:
      transform .3s ease,
      opacity .2s ease;
  }

  .site-header .mobile-menu-toggle:hover {
    border-color: var(--purple);
    background: rgba(96, 72, 229, .08);
  }


  /* -------------------------------------------------------
     HAMBURGER → X
  ------------------------------------------------------- */

  .site-header .mobile-menu-toggle.is-open span:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }

  .site-header .mobile-menu-toggle.is-open span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
  }


  /* -------------------------------------------------------
     MOBILE NAVIGATION PANEL
  ------------------------------------------------------- */

  .site-header .mobile-navigation {
    position: absolute;

    top: 57px;
    left: 0;
    right: 0;

    width: 100%;

    display: flex;

    flex-direction: column;

    padding: 10px 20px 18px;

    box-sizing: border-box;

    background: color-mix(
      in srgb,
      var(--bg) 96%,
      transparent
    );

    border-bottom: 1px solid var(--line);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    pointer-events: none;

    transition:
      opacity .25s ease,
      transform .25s ease,
      visibility .25s ease;
  }


  /* -------------------------------------------------------
     OPEN MENU
  ------------------------------------------------------- */

  .site-header .mobile-navigation.is-open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
  }


  /* -------------------------------------------------------
     MOBILE NAV LINKS
  ------------------------------------------------------- */

  .site-header .mobile-navigation a {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 54px;

    padding: 0 4px;

    color: var(--ink);

    text-decoration: none;

    font-size: 16px;
    font-weight: 500;

    border-bottom: 1px solid var(--line);

    transition:
      color .2s ease,
      padding-left .2s ease;
  }

  .site-header .mobile-navigation a:last-child {
    border-bottom: 0;
  }

  .site-header .mobile-navigation a:hover {
    color: var(--purple);
    padding-left: 8px;
  }

}

/* =========================================================
   IRVING STUDIO
   MOBILE APP-STYLE NAVIGATION
========================================================= */


/* ---------------------------------------------------------
   DESKTOP
--------------------------------------------------------- */

.mobile-app-bar {
  display: none;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 650px) {

  /* =======================================================
     TOP NAVBAR
  ======================================================= */

  .site-header {
    position: fixed !important;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 58px;

    z-index: 10000;

    box-sizing: border-box;

    padding: 0 14px 0 20px;
  }


  /* Brand */

  .site-header .brand {
    white-space: nowrap;
  }


  /* Hide desktop navigation */

  .site-header .main-nav {
    display: none !important;
  }


  /* Header actions */

  .site-header .header-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 7px;
  }


  /* -------------------------------------------------------
     WHATSAPP
  ------------------------------------------------------- */

  .site-header .header-whatsapp {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;
  }


  /* -------------------------------------------------------
     THEME
  ------------------------------------------------------- */

  .site-header .theme-toggle {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;
  }


  /* -------------------------------------------------------
     HIDE TOP START PROJECT ON MOBILE
  ------------------------------------------------------- */

  .site-header .header-cta {
    display: none !important;
  }


  /* -------------------------------------------------------
     HAMBURGER
  ------------------------------------------------------- */

  .site-header .mobile-menu-toggle {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    padding: 0;

    border: 1px solid var(--line);
    border-radius: 50%;

    background: transparent;

    color: var(--ink);

    cursor: pointer;
  }

  .site-header .mobile-menu-toggle span {
    width: 14px;
    height: 2px;

    display: block;

    background: currentColor;

    border-radius: 999px;

    transition: transform .3s ease;
  }

  .site-header .mobile-menu-toggle.is-open span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .site-header .mobile-menu-toggle.is-open span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }


  /* =======================================================
     MOBILE MENU DROPDOWN
  ======================================================= */

  .site-header .mobile-navigation {
    position: absolute;

    top: 58px;
    left: 0;
    right: 0;

    width: 100%;

    display: flex;

    flex-direction: column;

    padding: 8px 20px 18px;

    box-sizing: border-box;

    background: color-mix(
      in srgb,
      var(--bg) 96%,
      transparent
    );

    border-bottom: 1px solid var(--line);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    pointer-events: none;

    transition:
      opacity .25s ease,
      transform .25s ease,
      visibility .25s ease;
  }

  .site-header .mobile-navigation.is-open {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
  }

  .site-header .mobile-navigation a {
    min-height: 52px;

    display: flex;
    align-items: center;

    color: var(--ink);

    text-decoration: none;

    font-size: 15px;
    font-weight: 500;

    border-bottom: 1px solid var(--line);
  }

  .site-header .mobile-navigation a:last-child {
    border-bottom: 0;
  }


  /* =======================================================
     BOTTOM APP BAR
  ======================================================= */

  .mobile-app-bar {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    height: 72px;

    z-index: 9999;

    display: grid;

    grid-template-columns:
      repeat(4, 1fr);

    align-items: stretch;

    box-sizing: border-box;

    padding:

      7px

      max(8px, env(safe-area-inset-right))

      calc(7px + env(safe-area-inset-bottom))

      max(8px, env(safe-area-inset-left));

    background: color-mix(
      in srgb,
      var(--bg) 94%,
      transparent
    );

    border-top: 1px solid var(--line);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
      0 -10px 30px rgba(0,0,0,.08);
  }


  /* =======================================================
     BOTTOM BUTTON
  ======================================================= */

  .mobile-app-action {

    position: relative;

    min-width: 0;

    border: 0;

    background: transparent;

    color: var(--muted);

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 4px;

    padding: 5px 3px;

    font-family: inherit;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
      color .2s ease,
      transform .2s ease;
  }


  /* Icon */

  .mobile-app-icon {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;
  }

  .mobile-app-icon svg {

    width: 21px;
    height: 21px;

    fill: currentColor;
  }


  /* Active / hover */

  .mobile-app-action:active {
    transform: translateY(1px);
  }

  .mobile-app-action:hover {
    color: var(--ink);
  }


  /* =======================================================
     START PROJECT — PRIMARY ACTION
  ======================================================= */

  .mobile-app-primary {
    color: var(--purple);
  }

  .mobile-app-primary .mobile-app-icon {

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: var(--purple);

    color: white;
  }

  .mobile-app-primary .mobile-app-icon svg {
    width: 19px;
    height: 19px;
  }


  /* =======================================================
     AI ACTIVE STATE
  ======================================================= */

  .mobile-ai-action {
    color: var(--purple);
  }


  /* =======================================================
     PAGE CLEARANCE
     Prevent bottom bar covering content
  ======================================================= */

  body {
    padding-top: 58px;

    padding-bottom:
      calc(78px + env(safe-area-inset-bottom));
  }

  main {
    padding-bottom: 20px;
  }


  /* =======================================================
     CONTACT / CTA SECTIONS
  ======================================================= */

  .contact {
    padding-bottom:
      calc(100px + env(safe-area-inset-bottom));
  }

}

/* =========================================================
   IRVING AI — MOBILE LAUNCHER
   Hide the floating AI launcher on mobile.
   Mobile users use the bottom AI button instead.
========================================================= */

@media (max-width: 650px) {

  #irvingAiLauncher,
  .irving-ai-launcher {
    display: none !important;
  }

}
/* =========================================================
   IRVING STUDIO
   MOBILE MENU — FULL HEIGHT FIX
   Header → Mobile App Bar
========================================================= */

@media (max-width: 650px) {

  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: 58px !important;

    z-index: 10000 !important;

    /* IMPORTANT:
       Allows the mobile menu to extend below the header. */
    overflow: visible !important;

    /* Prevent the header from creating a clipping/containing
       context for the fixed navigation. */
    transform: none !important;
  }


  /* -------------------------------------------------------
     MOBILE NAVIGATION
     FULL HEIGHT + GLASS EFFECT
  ------------------------------------------------------- */

  .site-header .mobile-navigation {
    position: fixed !important;

    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 72px !important;

    width: 100% !important;

    /*
       Explicit height prevents the menu from collapsing.
       924px screen example:
       924 - 58 - 72 = 794px menu area.
    */
    height: calc(
      100dvh - 58px - 72px
    ) !important;

    min-height: 0 !important;
    max-height: none !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    padding:
      18px 20px 24px !important;

    margin: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;


    /* -----------------------------------------------------
       GLASS / FROSTED WHITE EFFECT
    ----------------------------------------------------- */

    background: rgba(255, 255, 255, 0.72) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.70) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.70) !important;

    backdrop-filter:
      blur(24px)
      saturate(140%) !important;

    -webkit-backdrop-filter:
      blur(24px)
      saturate(140%) !important;

    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.08) !important;


    /*
       IMPORTANT:
       The menu is below the header but above the page.
    */
    z-index: 9998 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translateY(-8px) !important;

    pointer-events: none !important;

    transition:
      opacity .25s ease,
      transform .25s ease,
      visibility .25s ease !important;
  }


  /* -------------------------------------------------------
     OPEN STATE
  ------------------------------------------------------- */

  .site-header .mobile-navigation.is-open {
    opacity: 1 !important;
    visibility: visible !important;

    transform: translateY(0) !important;

    pointer-events: auto !important;
  }


  /* -------------------------------------------------------
     MENU LINKS
  ------------------------------------------------------- */

  .site-header .mobile-navigation a {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    min-height: 58px !important;

    padding: 0 4px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    color: var(--ink) !important;

    text-decoration: none !important;

    font-size: 17px !important;
    font-weight: 600 !important;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

    flex-shrink: 0 !important;

    transition:
      color .2s ease,
      padding-left .2s ease !important;
  }


  .site-header .mobile-navigation a:last-child {
    border-bottom: 0 !important;
  }


  .site-header .mobile-navigation a:hover {
    color: var(--purple) !important;

    padding-left: 10px !important;
  }


  /* -------------------------------------------------------
     HAMBURGER / CLOSE BUTTON
  ------------------------------------------------------- */

  .site-header .mobile-menu-toggle {
    position: relative !important;

    z-index: 10002 !important;
  }


  /* -------------------------------------------------------
     MOBILE APP BAR
     ALWAYS VISIBLE ABOVE THE MENU
  ------------------------------------------------------- */

  .mobile-app-bar {
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 72px !important;

    z-index: 10001 !important;

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important;

    align-items: stretch !important;

    box-sizing: border-box !important;

    padding:
      7px
      max(8px, env(safe-area-inset-right))
      calc(7px + env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left)) !important;


    /* -----------------------------------------------------
       APP BAR GLASS
    ----------------------------------------------------- */

    background: color-mix(
      in srgb,
      var(--bg) 94%,
      transparent
    ) !important;

    border-top: 1px solid var(--line) !important;

    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;

    box-shadow:
      0 -10px 30px rgba(0, 0, 0, .08) !important;
  }


  /* -------------------------------------------------------
     SAFARI / IPHONE SAFE AREA
  ------------------------------------------------------- */

  @supports (height: 100dvh) {

    .site-header .mobile-navigation {
      height: calc(
        100dvh
        - 58px
        - 72px
        - env(safe-area-inset-bottom)
      ) !important;

      bottom: calc(
        72px
        + env(safe-area-inset-bottom)
      ) !important;
    }

  }

}

/* =========================================================
   IRVING AI
   MOBILE APP-STYLE PANEL
   TOP NAVBAR → AI → BOTTOM APP BAR
   ========================================================= */

@media (max-width: 650px) {

  /* -------------------------------------------------------
     MOBILE LAYOUT VARIABLES
  ------------------------------------------------------- */

  :root {
    --irving-mobile-top: 58px;
    --irving-mobile-bottom: 72px;
  }


  /* -------------------------------------------------------
     MOBILE VIEWPORT
     Make sure the AI can use the complete device width
  ------------------------------------------------------- */

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }


  /* -------------------------------------------------------
     AI WRAPPER
  ------------------------------------------------------- */

  .irving-ai {
    position: fixed !important;

    top: var(--irving-mobile-top) !important;
    right: 0 !important;
    bottom: var(--irving-mobile-bottom) !important;
    left: 0 !important;

    /* EXACT DEVICE WIDTH */
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    z-index: 9990 !important;

    pointer-events: none;

    overflow: hidden !important;
  }


  /* -------------------------------------------------------
     AI PANEL
     100% OF DEVICE WIDTH
     Fills exact space between navigation bars
  ------------------------------------------------------- */

  .irving-ai-panel {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    /* EXACT DEVICE WIDTH */
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;

    height: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border-radius: 0 !important;

    border-left: 0 !important;
    border-right: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    pointer-events: auto;

    transform-origin: center center !important;

    transform:
      translateY(14px)
      scale(.985) !important;

    opacity: 0;
    visibility: hidden;

    transition:
      opacity .22s ease,
      transform .22s ease,
      visibility .22s ease;

    z-index: 9991 !important;
  }


  /* -------------------------------------------------------
     OPEN STATE
  ------------------------------------------------------- */

  .irving-ai-panel.is-open {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform:
      translateY(0)
      scale(1) !important;
  }


  /* -------------------------------------------------------
     AI HEADER
  ------------------------------------------------------- */

  .irving-ai-panel .irving-ai-header {
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 64px !important;

    box-sizing: border-box !important;

    padding:
      12px
      16px !important;

    border-radius: 0 !important;

    display: flex !important;
    align-items: center !important;

    position: relative !important;

    z-index: 2 !important;
  }


  /* -------------------------------------------------------
     BRAND
  ------------------------------------------------------- */

  .irving-ai-brand {
    min-width: 0 !important;

    flex: 1 1 auto !important;
  }


  .irving-ai-name {
    font-size: 14px !important;
  }


  .irving-ai-status {
    font-size: 9px !important;
  }


  /* -------------------------------------------------------
     CLOSE BUTTON
  ------------------------------------------------------- */

  .irving-ai-close {
    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

    margin-left: 10px !important;
  }


  /* -------------------------------------------------------
     MESSAGE AREA
  ------------------------------------------------------- */

  .irving-ai-messages {
    flex: 1 1 auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    padding:
      16px
      15px
      12px !important;
  }


  /* -------------------------------------------------------
     INPUT AREA
  ------------------------------------------------------- */

  .irving-ai-input-area {
    flex: 0 0 auto !important;

    width: 90% !important;
    max-width: 90% !important;

    box-sizing: border-box !important;

    padding:
      10px
      12px
      calc(10px + env(safe-area-inset-bottom)) !important;

    position: relative !important;

    z-index: 3 !important;
  }


  .irving-ai-input-area form {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;
  }


  .irving-ai-input-area textarea {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    font-size: 14px !important;

    min-height: 42px !important;
    max-height: 110px !important;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .irving-ai-footer {
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    padding:
      0
      14px
      8px !important;

    font-size: 8px !important;
  }


  /* -------------------------------------------------------
     KEEP TOP NAVBAR ABOVE AI
  ------------------------------------------------------- */

  .site-header {
    z-index: 10000 !important;
  }


  /* -------------------------------------------------------
     KEEP MOBILE BOTTOM BAR ABOVE AI
  ------------------------------------------------------- */

  .mobile-app-bar {
    z-index: 10001 !important;
  }


  /* -------------------------------------------------------
     MAKE AI BUTTON ACTIVE IN BOTTOM BAR
  ------------------------------------------------------- */

  .mobile-ai-action {
    position: relative;

    color: var(--purple) !important;
  }


  .mobile-ai-action::before {
    content: "";

    position: absolute;

    top: 3px;
    left: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--purple);

    transform:
      translateX(-50%)
      scale(0);

    opacity: 0;

    transition:
      transform .2s ease,
      opacity .2s ease;
  }


  /* -------------------------------------------------------
     AI OPEN STATE
  ------------------------------------------------------- */

  body.irving-ai-open .mobile-ai-action::before {
    transform:
      translateX(-50%)
      scale(1);

    opacity: 1;
  }


  body.irving-ai-open .mobile-ai-action {
    color: var(--ink) !important;
  }


  /* -------------------------------------------------------
     PREVENT PAGE SCROLL WHILE AI IS OPEN
  ------------------------------------------------------- */

  body.irving-ai-open {
    overflow: hidden !important;
    touch-action: none;
  }


  /* Keep AI itself touch-scrollable */

  body.irving-ai-open .irving-ai-messages,
  body.irving-ai-open .irving-ai-input-area,
  body.irving-ai-open .irving-ai-panel {
    touch-action: auto;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  :root {
    --irving-mobile-top: 58px;
    --irving-mobile-bottom: 72px;
  }


  .irving-ai-panel .irving-ai-header {
    min-height: 60px !important;

    padding:
      10px
      13px !important;
  }


  .irving-ai-messages {
    padding:
      13px
      12px
      10px !important;
  }


  .irving-ai-input-area {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

}


/* =========================================================
   IPHONE SAFE AREA
   ========================================================= */

@supports (height: 100dvh) {

  @media (max-width: 650px) {

    .irving-ai {
      width: 100vw !important;
      max-width: 100vw !important;
      min-width: 100vw !important;

      bottom:
        calc(
          72px + env(safe-area-inset-bottom)
        ) !important;
    }


    .irving-ai-panel {
      width: 100vw !important;
      max-width: 100vw !important;
      min-width: 100vw !important;
    }


    .mobile-app-bar {
      padding-bottom:
        calc(
          7px + env(safe-area-inset-bottom)
        ) !important;
    }

  }

}

/* =========================================================
   IRVING STUDIO — UNIFIED MODAL DESIGN SYSTEM
   ---------------------------------------------------------
   Applies to:
   01  Project Intake
   02  Packages
   AI  irvingAI

   Visual language:
   VANTA / BLUEPRINT / DIGITAL SYSTEM
   ========================================================= */


/* =========================================================
   01. SHARED MODAL TOKENS
   ========================================================= */

:root {

  --irving-modal-accent: #6048e5;
  --irving-modal-accent-2: #7c3aed;
  --irving-modal-accent-bright: #8b5cf6;
  --irving-modal-accent-soft: #a78bfa;

  --irving-modal-light-bg: #f7f7fb;
  --irving-modal-light-surface: #ffffff;
  --irving-modal-light-ink: #111116;
  --irving-modal-light-muted: rgba(17,17,22,.58);
  --irving-modal-light-line: rgba(17,17,22,.10);

  --irving-modal-dark-bg: #0b0b12;
  --irving-modal-dark-surface: #101018;
  --irving-modal-dark-ink: #ffffff;
  --irving-modal-dark-muted: rgba(255,255,255,.52);
  --irving-modal-dark-line: rgba(255,255,255,.09);

  --irving-modal-radius: 24px;

  --irving-modal-grid-size: 44px;

  --irving-modal-transition:
    .35s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   02. SHARED TYPOGRAPHY
   ========================================================= */

.irving-intake-project-modal,
.irving-packages-modal,
.irving-ai {

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* =========================================================
   03. SHARED TECHNICAL GRID
   ========================================================= */

.irving-intake-project-panel,
.irving-packages-panel,
.irving-ai-panel {

  background-image:
    linear-gradient(
      rgba(96,72,229,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,72,229,.045) 1px,
      transparent 1px
    );

  background-size:
    var(--irving-modal-grid-size)
    var(--irving-modal-grid-size);

}


/* =========================================================
   04. DARK MODE BASE
   ========================================================= */

body.dark .irving-intake-project-panel,
body.dark .irving-packages-panel,
body.dark .irving-ai-panel,

[data-theme="dark"] .irving-intake-project-panel,
[data-theme="dark"] .irving-packages-panel,
[data-theme="dark"] .irving-ai-panel,

html[data-theme="dark"] .irving-intake-project-panel,
html[data-theme="dark"] .irving-packages-panel,
html[data-theme="dark"] .irving-ai-panel {

  --modal-bg: var(--irving-modal-dark-bg);
  --modal-surface: var(--irving-modal-dark-surface);
  --modal-ink: var(--irving-modal-dark-ink);
  --modal-muted: var(--irving-modal-dark-muted);
  --modal-line: var(--irving-modal-dark-line);

  color: var(--modal-ink);

  background-color:
    var(--irving-modal-dark-bg);

  background-image:
    radial-gradient(
      circle at 50% 25%,
      rgba(96,72,229,.075),
      transparent 42%
    ),
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    auto,
    var(--irving-modal-grid-size)
    var(--irving-modal-grid-size),
    var(--irving-modal-grid-size)
    var(--irving-modal-grid-size);

}


/* =========================================================
   05. LIGHT MODE BASE
   ========================================================= */

body:not(.dark):not([data-theme="dark"])
.irving-intake-project-panel,

body:not(.dark):not([data-theme="dark"])
.irving-packages-panel,

body:not(.dark):not([data-theme="dark"])
.irving-ai-panel,

body.light .irving-intake-project-panel,
body.light .irving-packages-panel,
body.light .irving-ai-panel,

[data-theme="light"] .irving-intake-project-panel,
[data-theme="light"] .irving-packages-panel,
[data-theme="light"] .irving-ai-panel,

html[data-theme="light"] .irving-intake-project-panel,
html[data-theme="light"] .irving-packages-panel,
html[data-theme="light"] .irving-ai-panel {

  --modal-bg: var(--irving-modal-light-bg);
  --modal-surface: var(--irving-modal-light-surface);
  --modal-ink: var(--irving-modal-light-ink);
  --modal-muted: var(--irving-modal-light-muted);
  --modal-line: var(--irving-modal-light-line);

  color: var(--modal-ink);

  background-color:
    var(--irving-modal-light-bg);

  background-image:
    radial-gradient(
      circle at 50% 25%,
      rgba(96,72,229,.055),
      transparent 42%
    ),
    linear-gradient(
      rgba(96,72,229,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96,72,229,.045) 1px,
      transparent 1px
    );

  background-size:
    auto,
    var(--irving-modal-grid-size)
    var(--irving-modal-grid-size),
    var(--irving-modal-grid-size)
    var(--irving-modal-grid-size);

}


/* =========================================================
   06. SHARED MODAL BACKDROP
   ========================================================= */

.irving-intake-project-modal-backdrop,
.irving-packages-backdrop {

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(96,72,229,.12),
      transparent 42%
    ),
    rgba(5,5,10,.76);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

}


/* =========================================================
   07. SHARED PANEL BORDER
   ========================================================= */

.irving-intake-project-panel,
.irving-packages-panel,
.irving-ai-panel {

  border-color:
    rgba(96,72,229,.16);

  box-shadow:
    0 35px 100px rgba(0,0,0,.28),
    0 0 80px rgba(96,72,229,.08);

}


/* DARK PANEL BORDER */

body.dark .irving-intake-project-panel,
body.dark .irving-packages-panel,
body.dark .irving-ai-panel,

[data-theme="dark"] .irving-intake-project-panel,
[data-theme="dark"] .irving-packages-panel,
[data-theme="dark"] .irving-ai-panel {

  border-color:
    rgba(167,139,250,.16);

  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    0 0 100px rgba(96,72,229,.12);

}


/* =========================================================
   08. TECHNICAL PURPLE EDGE
   ========================================================= */

.irving-intake-project-panel::before,
.irving-packages-panel::before,
.irving-ai-panel::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 180px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--irving-modal-accent-2),
      var(--irving-modal-accent),
      transparent
    );

  pointer-events: none;

}


/* =========================================================
   09. SHARED STATUS DOT
   ========================================================= */

.irving-intake-project-status-dot,
.irving-packages-status-dot,
.irving-ai-status-dot {

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background:
    var(--irving-modal-accent-bright);

  box-shadow:
    0 0 0 4px rgba(139,92,246,.08),
    0 0 16px rgba(139,92,246,.55);

}


/* =========================================================
   10. SHARED SYSTEM LABELS
   ========================================================= */

.irving-intake-project-system-id,
.irving-packages-system-id,
.irving-ai-system-id {

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .16em;

  text-transform: uppercase;

  color:
    var(--modal-muted);

}


/* SYSTEM CODES */

.irving-intake-project-system-code,
.irving-packages-system-code {

  margin-left: 10px;

  color:
    rgba(96,72,229,.65);

}


/* DARK */

body.dark .irving-intake-project-system-code,
body.dark .irving-packages-system-code,

[data-theme="dark"] .irving-intake-project-system-code,
[data-theme="dark"] .irving-packages-system-code {

  color:
    var(--irving-modal-accent-soft);

}


/* =========================================================
   11. SHARED CLOSE BUTTON LANGUAGE
   ========================================================= */

.irving-intake-project-modal-close,
.irving-packages-close {

  width: 36px;
  height: 36px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border: 1px solid var(--modal-line);

  border-radius: 50%;

  background: transparent;

  color: var(--modal-ink);

  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;

}


.irving-intake-project-modal-close:hover,
.irving-packages-close:hover {

  border-color:
    rgba(96,72,229,.55);

  background:
    rgba(96,72,229,.07);

  transform: rotate(4deg);

}


/* =========================================================
   12. PROJECT INTAKE — LIGHT MODE
   ========================================================= */

body:not(.dark) .irving-intake-project-panel-intro h2,
[data-theme="light"] .irving-intake-project-panel-intro h2 {

  color:
    var(--irving-modal-light-ink);

}


body:not(.dark) .irving-intake-project-intro-copy,
[data-theme="light"] .irving-intake-project-intro-copy {

  color:
    var(--irving-modal-light-muted);

}


body:not(.dark) .irving-intake-project-field input,
body:not(.dark) .irving-intake-project-field textarea,
body:not(.dark) .irving-intake-project-field select,

[data-theme="light"] .irving-intake-project-field input,
[data-theme="light"] .irving-intake-project-field textarea,
[data-theme="light"] .irving-intake-project-field select {

  color:
    var(--irving-modal-light-ink);

  border-color:
    rgba(17,17,22,.13);

}


body:not(.dark) .irving-intake-project-field input:focus,
body:not(.dark) .irving-intake-project-field textarea:focus,
body:not(.dark) .irving-intake-project-field select:focus,

[data-theme="light"] .irving-intake-project-field input:focus,
[data-theme="light"] .irving-intake-project-field textarea:focus,
[data-theme="light"] .irving-intake-project-field select:focus {

  border-color:
    var(--irving-modal-accent);

}


/* =========================================================
   13. PACKAGES — REMOVE CYAN
   ========================================================= */

/*
   The existing Packages modal uses #22d3ee in several places.
   That is what makes it look like a different product.

   Replace the cyan visual language with Irving purple.
*/

.irving-packages-kicker span,
.irving-package-features li span,
.irving-packages-error span {

  color:
    var(--irving-modal-accent-bright) !important;

}


.irving-packages-intro h2 em {

  background:
    linear-gradient(
      90deg,
      var(--irving-modal-accent),
      var(--irving-modal-accent-bright)
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

}


.irving-package-deliverables li span {

  color:
    var(--irving-modal-accent-bright) !important;

}


/* PACKAGE CARD */

.irving-package-card {

  border-color:
    var(--modal-line);

  background:
    var(--modal-surface);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;

}


.irving-package-card:hover {

  border-color:
    rgba(96,72,229,.42);

  box-shadow:
    0 18px 50px rgba(96,72,229,.08);

}


/* FEATURED PACKAGE */

.irving-package-card-featured,
.irving-package-card.is-featured {

  background:
    linear-gradient(
      145deg,
      rgba(96,72,229,.08),
      transparent 65%
    ),
    var(--modal-surface);

}


/* =========================================================
   14. PACKAGE DETAIL ACCENTS
   ========================================================= */

.irving-package-detail-price strong,
.irving-package-detail-main h2 em {

  color:
    var(--irving-modal-accent);

}


.irving-package-detail-view {

  color:
    var(--modal-ink);

}


.irving-package-detail-description,
.irving-package-detail-info,
.irving-package-detail-footer {

  color:
    var(--modal-muted);

}


/* =========================================================
   15. IRVING AI — SAME SYSTEM
   ========================================================= */

.irving-ai-panel {

  border-radius:
    var(--irving-modal-radius);

  background-color:
    var(--modal-bg);

}


/* AI HEADER */

.irving-ai-header {

  border-bottom:
    1px solid var(--modal-line);

  background:
    rgba(255,255,255,.018);

}


/* AI LOGO */

.irving-ai-logo {

  border-color:
    rgba(139,92,246,.40) !important;

  background:
    rgba(96,72,229,.08) !important;

  box-shadow:
    0 0 22px rgba(96,72,229,.10);

}


.irving-ai-logo span {

  background:
    var(--irving-modal-accent-bright) !important;

  box-shadow:
    0 0 12px rgba(139,92,246,.55);

}


/* AI NAME */

.irving-ai-name {

  color:
    var(--modal-ink);

}


/* AI SECONDARY LABELS */

.irving-ai-status,
.irving-ai-subtitle,
.irving-ai-footer {

  color:
    var(--modal-muted);

}


/* =========================================================
   16. AI QUICK ACTIONS
   ========================================================= */

.irving-ai-quick {

  border:
    1px solid var(--modal-line);

  background:
    rgba(96,72,229,.025);

  color:
    var(--modal-ink);

  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;

}


.irving-ai-quick:hover {

  border-color:
    rgba(96,72,229,.42);

  background:
    rgba(96,72,229,.07);

  transform:
    translateX(2px);

}


/* AI QUICK ICONS */

.irving-ai .quick-icon {

  color:
    var(--irving-modal-accent-bright);

}


.irving-ai .quick-icon svg {

  stroke:
    currentColor;

}


/* =========================================================
   17. AI MESSAGE AREA
   ========================================================= */

.irving-ai-messages {

  background:
    transparent;

}


.irving-ai-message {

  color:
    var(--modal-ink);

}


/* AI USER MESSAGE */

.irving-ai-message.user {

  background:
    rgba(96,72,229,.10);

  border:
    1px solid rgba(96,72,229,.16);

}


/* AI RESPONSE */

.irving-ai-message.assistant {

  background:
    rgba(255,255,255,.025);

  border:
    1px solid var(--modal-line);

}


/* =========================================================
   18. AI INPUT
   ========================================================= */

.irving-ai-input-area {

  border:
    1px solid var(--modal-line);

  background:
    rgba(96,72,229,.025);

}


.irving-ai-input-area:focus-within {

  border-color:
    rgba(96,72,229,.45);

  box-shadow:
    0 0 0 3px rgba(96,72,229,.06);

}


.irving-ai-input-area textarea {

  color:
    var(--modal-ink);

}


.irving-ai-input-area textarea::placeholder {

  color:
    var(--modal-muted);

}


/* SEND BUTTON */

.irving-ai-send {

  background:
    linear-gradient(
      135deg,
      var(--irving-modal-accent-bright),
      var(--irving-modal-accent)
    );

  box-shadow:
    0 8px 22px rgba(96,72,229,.20);

}


/* =========================================================
   19. AI TYPING INDICATOR
   ========================================================= */

.irving-ai-typing span {

  background:
    var(--irving-modal-accent-bright);

}


/* =========================================================
   20. MOBILE — ONE CONSISTENT MODAL SYSTEM
   ========================================================= */

@media (max-width: 650px) {

  .irving-intake-project-modal,
  .irving-packages-modal {

    top: 57px !important;
    right: 0 !important;
    bottom: 64px !important;
    left: 0 !important;

    width: 100vw !important;
    height: auto !important;

    padding: 0 !important;

  }


  .irving-intake-project-panel,
  .irving-packages-panel {

    width: 100% !important;
    height: 100% !important;

    max-height: none !important;

    border-radius: 0 !important;

    border-left: 0 !important;
    border-right: 0 !important;

  }


  .irving-intake-project-panel,
  .irving-packages-panel,
  .irving-ai-panel {

    background-size:
      32px 32px,
      32px 32px,
      32px 32px;

  }


  .irving-intake-project-panel-top,
  .irving-packages-topbar {

    min-height: 56px;

    height: 56px;

    padding:
      0 18px;

  }


  .irving-intake-project-panel-footer {

    border-color:
      var(--modal-line);

  }


  .irving-ai-panel {

    width:
      min(
        calc(100vw - 20px),
        410px
      ) !important;

    max-width:
      calc(100vw - 20px) !important;

    border-radius:
      20px !important;

  }

}


/* =========================================================
   21. SMALL PHONE
   ========================================================= */

@media (max-width: 400px) {

  .irving-intake-project-panel-top,
  .irving-packages-topbar {

    padding:
      0 15px;

  }


  .irving-intake-project-system-id,
  .irving-packages-system-id {

    font-size:
      8px;

  }


  .irving-ai-panel {

    right:
      10px !important;

    width:
      calc(100vw - 20px) !important;

  }

}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .irving-intake-project-modal *,
  .irving-packages-modal *,
  .irving-ai * {

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;

  }

}
/* =========================================================
   IRVING STUDIO — TOPBAR THEME FIX
   ---------------------------------------------------------
   IMPORTANT:
   Light mode = body WITHOUT .dark
   Dark mode  = body WITH .dark
   ========================================================= */


/* =========================================================
   LIGHT MODE
   ========================================================= */

body:not(.dark) .irving-packages-topbar,
body:not(.dark) .irving-intake-project-panel-top {

  background:
    linear-gradient(
      90deg,
      rgba(96, 72, 229, 0.045),
      rgba(124, 58, 237, 0.025),
      rgba(255, 255, 255, 0.96)
    ) !important;

  color: #111116 !important;

  border-bottom:
    1px solid rgba(17, 17, 22, 0.10) !important;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 30px rgba(17, 17, 22, 0.035) !important;
}


/* ---------------------------------------------------------
   LIGHT MODE — TOPBAR CONTENT
--------------------------------------------------------- */

body:not(.dark) .irving-packages-topbar *,
body:not(.dark) .irving-intake-project-panel-top * {

  color: inherit;
}


/* ---------------------------------------------------------
   LIGHT MODE — SYSTEM ID
--------------------------------------------------------- */

body:not(.dark) .irving-packages-system-id,
body:not(.dark) .irving-intake-project-system-id {

  color: #6048e5 !important;
}


/* ---------------------------------------------------------
   LIGHT MODE — SYSTEM CODE
--------------------------------------------------------- */

body:not(.dark) .irving-packages-system-code,
body:not(.dark) .irving-intake-project-system-code {

  color: rgba(17, 17, 22, 0.42) !important;
}


/* ---------------------------------------------------------
   LIGHT MODE — STATUS DOT
--------------------------------------------------------- */

body:not(.dark) .irving-packages-status-dot,
body:not(.dark) .irving-intake-project-status-dot {

  background: #6048e5 !important;

  box-shadow:
    0 0 0 4px rgba(96, 72, 229, 0.08),
    0 0 14px rgba(96, 72, 229, 0.30) !important;
}


/* ---------------------------------------------------------
   LIGHT MODE — CLOSE BUTTON
--------------------------------------------------------- */

body:not(.dark) .irving-packages-close,
body:not(.dark) .irving-intake-project-modal-close {

  background: rgba(17, 17, 22, 0.035) !important;

  border:
    1px solid rgba(17, 17, 22, 0.10) !important;

  color: #111116 !important;
}


body:not(.dark) .irving-packages-close:hover,
body:not(.dark) .irving-intake-project-modal-close:hover {

  background:
    rgba(96, 72, 229, 0.08) !important;

  border-color:
    rgba(96, 72, 229, 0.25) !important;

  color:
    #6048e5 !important;
}


/* =========================================================
   LIGHT MODE — PURPLE TECHNICAL EDGE
========================================================= */

body:not(.dark) .irving-packages-panel::before,
body:not(.dark) .irving-intake-project-panel::before {

  background:
    linear-gradient(
      90deg,
      #6048e5,
      #7c3aed,
      rgba(124, 58, 237, 0)
    ) !important;
}


/* =========================================================
   DARK MODE
   Keep the existing Irving technical dark appearance
========================================================= */

body.dark .irving-packages-topbar,
body.dark .irving-intake-project-panel-top {

  background:
    linear-gradient(
      90deg,
      rgba(96, 72, 229, 0.08),
      rgba(124, 58, 237, 0.035),
      rgba(11, 11, 18, 0.96)
    ),
    #0b0b12 !important;

  color: #f4f4f5 !important;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08) !important;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 12px 40px rgba(0, 0, 0, 0.22) !important;
}


/* ---------------------------------------------------------
   DARK MODE — TOPBAR CONTENT
--------------------------------------------------------- */

body.dark .irving-packages-topbar *,
body.dark .irving-intake-project-panel-top * {

  color: inherit;
}


/* ---------------------------------------------------------
   DARK MODE — SYSTEM ID
--------------------------------------------------------- */

body.dark .irving-packages-system-id,
body.dark .irving-intake-project-system-id {

  color: rgba(255, 255, 255, 0.72) !important;
}


/* ---------------------------------------------------------
   DARK MODE — SYSTEM CODE
--------------------------------------------------------- */

body.dark .irving-packages-system-code,
body.dark .irving-intake-project-system-code {

  color: rgba(255, 255, 255, 0.28) !important;
}


/* ---------------------------------------------------------
   DARK MODE — CLOSE BUTTON
--------------------------------------------------------- */

body.dark .irving-packages-close,
body.dark .irving-intake-project-modal-close {

  background: transparent !important;

  border:
    1px solid rgba(255, 255, 255, 0.08) !important;

  color: #ffffff !important;
}


/* =========================================================
   DARK MODE — PURPLE TECHNICAL EDGE
========================================================= */

body.dark .irving-packages-panel::before,
body.dark .irving-intake-project-panel::before {

  background:
    linear-gradient(
      90deg,
      #7c3aed,
      #8b5cf6,
      rgba(139, 92, 246, 0)
    ) !important;
}
/* =========================================================
   IRVING STUDIO — FINAL LIGHT MODE CONTRAST FIX
   ---------------------------------------------------------
   Fixes remaining white text/icons inside:
   PROJECT INTAKE + PACKAGES
   ========================================================= */


/* =========================================================
   01. PROJECT INTAKE — KICKER
   ========================================================= */

body:not(.dark) .irving-intake-project-kicker {
  color: #6048e5 !important;
}


/* If the kicker contains child spans */
body:not(.dark) .irving-intake-project-kicker span {
  color: inherit !important;
}


/* =========================================================
   02. PROJECT INTAKE — "SYSTEM READY"
   ========================================================= */

body:not(.dark) .irving-intake-project-submit-meta {
  color: #52525b !important;
}

body:not(.dark) .irving-intake-project-submit-meta span {
  color: inherit !important;
}


/* Keep the status dot purple */
body:not(.dark) .irving-intake-project-submit-meta
.irving-intake-project-status-dot {
  background: #7c3aed !important;

  box-shadow:
    0 0 0 3px rgba(124,58,237,.10),
    0 0 14px rgba(124,58,237,.28) !important;
}


/* =========================================================
   03. PROJECT INTAKE — CLOSE BUTTON
   ---------------------------------------------------------
   The original CSS puts white directly on the X spans.
   Changing only the button color therefore isn't enough.
   ========================================================= */

body:not(.dark) .irving-intake-project-modal-close {
  color: #18181b !important;

  background:
    rgba(17,17,22,.035) !important;

  border:
    1px solid rgba(17,17,22,.10) !important;
}


/* THE ACTUAL X LINES */
body:not(.dark) .irving-intake-project-modal-close span {
  background:
    currentColor !important;
}


/* Hover */
body:not(.dark) .irving-intake-project-modal-close:hover {
  color: #6048e5 !important;

  background:
    rgba(96,72,229,.08) !important;

  border-color:
    rgba(96,72,229,.25) !important;
}


/* =========================================================
   04. PACKAGES — PACKAGE NAME
   ========================================================= */

body:not(.dark) .irving-package-card-name {
  color: #111116 !important;
}


/* Catch nested elements if any */
body:not(.dark) .irving-package-card-name * {
  color: inherit !important;
}


/* =========================================================
   05. PACKAGES — PRICE
   ---------------------------------------------------------
   Fixes:
   <strong>R6,000</strong>
   ========================================================= */

body:not(.dark) .irving-package-card-bottom strong {
  color: #111116 !important;
}


/* =========================================================
   06. PACKAGES — CARD BOTTOM LABELS
   ========================================================= */

body:not(.dark) .irving-package-card-bottom {
  color: #66666f !important;
}

body:not(.dark) .irving-package-card-bottom span,
body:not(.dark) .irving-package-card-bottom small {
  color: inherit !important;
}


/* =========================================================
   07. PACKAGES — CLOSE BUTTON
   ---------------------------------------------------------
   The original CSS has:
   .irving-packages-close span {
     background: #fff;
   }
   So we explicitly fix the X itself.
   ========================================================= */

body:not(.dark) .irving-packages-close {
  color: #18181b !important;

  background:
    rgba(17,17,22,.035) !important;

  border:
    1px solid rgba(17,17,22,.10) !important;
}


/* THE ACTUAL X LINES */
body:not(.dark) .irving-packages-close span {
  background:
    currentColor !important;
}


/* Hover */
body:not(.dark) .irving-packages-close:hover {
  color: #6048e5 !important;

  background:
    rgba(96,72,229,.08) !important;

  border-color:
    rgba(96,72,229,.25) !important;
}


/* =========================================================
   08. PACKAGES — CARD ARROW
   ========================================================= */

body:not(.dark) .irving-package-card-arrow {
  color: #111116 !important;

  border-color:
    rgba(17,17,22,.12) !important;

  background:
    rgba(17,17,22,.025) !important;
}


/* Hover */
body:not(.dark) .irving-package-card:hover
.irving-package-card-arrow {
  color: #ffffff !important;

  background:
    #6048e5 !important;

  border-color:
    #6048e5 !important;
}


/* =========================================================
   09. PACKAGES — CARD NUMBER
   ---------------------------------------------------------
   Removes the old cyan and keeps the Irving purple system.
   ========================================================= */

body:not(.dark) .irving-package-card-number {
  color: #6048e5 !important;
}


/* =========================================================
   10. PACKAGES — BADGE
   ========================================================= */

body:not(.dark) .irving-package-card-badge {
  color: #6048e5 !important;

  border-color:
    rgba(96,72,229,.25) !important;

  background:
    rgba(96,72,229,.045) !important;
}


/* =========================================================
   11. PACKAGES — DESCRIPTION
   ========================================================= */

body:not(.dark) .irving-package-card-description {
  color: #5f6068 !important;
}


/* =========================================================
   12. PACKAGES — CATEGORY
   ========================================================= */

body:not(.dark) .irving-package-card-category {
  color: #66666f !important;
}


/* =========================================================
   13. PACKAGE CARD BORDER / SURFACE
   ---------------------------------------------------------
   Makes sure the cards themselves also behave as light cards.
   ========================================================= */

body:not(.dark) .irving-package-card {
  color: #111116 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(248,248,252,.94)
    ) !important;

  border-color:
    rgba(17,17,22,.10) !important;

  box-shadow:
    0 12px 40px rgba(17,17,22,.045) !important;
}


/* Featured card */
body:not(.dark) .irving-package-card.is-featured {
  border-color:
    rgba(96,72,229,.28) !important;
}


/* =========================================================
   14. PACKAGE CARD HOVER
   ========================================================= */

body:not(.dark) .irving-package-card:hover {
  border-color:
    rgba(96,72,229,.40) !important;

  box-shadow:
    0 20px 55px rgba(96,72,229,.10) !important;
}


/* =========================================================
   15. PACKAGE CARD GLOW
   ---------------------------------------------------------
   Remove the old cyan glow from light mode.
   ========================================================= */

body:not(.dark) .irving-package-card::before {
  background:
    linear-gradient(
      135deg,
      rgba(96,72,229,.07),
      transparent 48%,
      rgba(124,58,237,.035)
    ) !important;
}


/* =========================================================
   16. PACKAGE LIST FOOTER
   ========================================================= */

body:not(.dark) .irving-packages-list-footer {
  color: #66666f !important;
}


/* Footer status dot */
body:not(.dark) .irving-packages-list-footer i {
  background:
    #6048e5 !important;
}


/* =========================================================
   17. PACKAGE DETAIL BACK BUTTON
   ========================================================= */

body:not(.dark) .irving-package-back {
  color: #55565f !important;
}

body:not(.dark) .irving-package-back:hover {
  color: #6048e5 !important;
}


/* =========================================================
   18. PACKAGE DETAIL HEADER
   ========================================================= */

body:not(.dark) .irving-package-detail-header {
  border-bottom-color:
    rgba(17,17,22,.10) !important;
}


/* =========================================================
   19. EXTRA SAFETY — REMOVE HARD-CODED WHITE FROM
       PACKAGE CONTENT IN LIGHT MODE
   ---------------------------------------------------------
   Only targets normal text elements, NOT buttons.
   ========================================================= */

body:not(.dark) .irving-package-card h1,
body:not(.dark) .irving-package-card h2,
body:not(.dark) .irving-package-card h3,
body:not(.dark) .irving-package-card p,
body:not(.dark) .irving-package-card label {
  color: #111116;
}


/* Re-apply muted text where needed */
body:not(.dark) .irving-package-card-description,
body:not(.dark) .irving-package-card-category,
body:not(.dark) .irving-package-card-bottom {
  color: #5f6068 !important;
}


/* Price must remain strong */
body:not(.dark) .irving-package-card-bottom strong {
  color: #111116 !important;
}


/* =========================================================
   END — LIGHT MODE CONTRAST FIX
   ========================================================= */

   /* =========================================================
   IRVING AI — LIGHT MODE VISIBILITY FIX
   Close Button • Welcome • Chat Bubbles
   ========================================================= */


/* =========================================================
   01. LIGHT MODE — CLOSE BUTTON
   ========================================================= */

body:not(.dark) .irving-ai-close {
  color: #18181b !important;
  background: rgba(17, 17, 22, 0.04) !important;
  border: 1px solid rgba(17, 17, 22, 0.12) !important;
}

body:not(.dark) .irving-ai-close svg {
  color: #18181b !important;
  stroke: currentColor !important;
}

body:not(.dark) .irving-ai-close:hover {
  color: #6048e5 !important;
  background: rgba(96, 72, 229, 0.08) !important;
  border-color: rgba(96, 72, 229, 0.28) !important;
}

body:not(.dark) .irving-ai-close:hover svg {
  color: #6048e5 !important;
  stroke: currentColor !important;
}


/* =========================================================
   02. LIGHT MODE — WELCOME CONTENT
   ========================================================= */

body:not(.dark) .irving-ai-welcome {
  color: #18181b !important;
}

body:not(.dark) .irving-ai-welcome h1,
body:not(.dark) .irving-ai-welcome h2,
body:not(.dark) .irving-ai-welcome h3,
body:not(.dark) .irving-ai-welcome strong,
body:not(.dark) .irving-ai-welcome b {
  color: #18181b !important;
}

body:not(.dark) .irving-ai-welcome p {
  color: #555660 !important;
}

body:not(.dark) .irving-ai-welcome span {
  color: inherit;
}


/* =========================================================
   03. LIGHT MODE — CHAT BUBBLES
   ========================================================= */

/* Default assistant bubble */
body:not(.dark) .irving-ai-bubble {
  color: #24242b !important;
  background: #f1f1f7 !important;
  border: 1px solid rgba(17, 17, 22, 0.09) !important;
  box-shadow: 0 4px 16px rgba(17, 17, 22, 0.025) !important;
}

/* Text inside assistant bubbles */
body:not(.dark) .irving-ai-bubble p,
body:not(.dark) .irving-ai-bubble span,
body:not(.dark) .irving-ai-bubble strong,
body:not(.dark) .irving-ai-bubble b,
body:not(.dark) .irving-ai-bubble li {
  color: inherit !important;
}

/* Links inside bubbles */
body:not(.dark) .irving-ai-bubble a {
  color: #6048e5 !important;
  text-decoration-color: rgba(96, 72, 229, 0.4);
}


/* =========================================================
   04. LIGHT MODE — SVG ICONS INSIDE BUBBLES
   ========================================================= */

body:not(.dark) .irving-ai-bubble svg {
  color: inherit;
  stroke: currentColor;
}


/* =========================================================
   05. LIGHT MODE — PURPLE TECHNICAL ACCENT
   ========================================================= */

body:not(.dark) .irving-ai-welcome .irving-ai-status,
body:not(.dark) .irving-ai-welcome .irving-ai-status-dot {
  color: #6048e5 !important;
}

body:not(.dark) .irving-ai-welcome .irving-ai-status-dot {
  background: #6048e5 !important;
  box-shadow: 0 0 0 3px rgba(96, 72, 229, 0.09) !important;
}


/* =========================================================
   END — IRVING AI LIGHT MODE VISIBILITY FIX
   ========================================================= */
   /* =========================================================
   IRVING AI — REMOVE MOBILE BORDER RADIUS
   ========================================================= */

@media (max-width: 650px) {

  .irving-ai-panel {
    border-radius: 0 !important;
  }

  .irving-ai-panel,
  .irving-ai-panel::before,
  .irving-ai-panel::after {
    border-radius: 0 !important;
  }

}
/* =========================================================
   IRVING STUDIO — PREMIUM TOP ACCENT
   FINAL LAYER FIX
   ========================================================= */

.irving-intake-project-panel,
.irving-packages-panel,
.irving-ai-panel {
    position: relative !important;
}

/* Premium purple line */
.irving-intake-project-panel::before,
.irving-packages-panel::before,
.irving-ai-panel::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 180px !important;
    height: 3px !important;

    background:
        linear-gradient(
            90deg,
            #7c3aed 0%,
            #8b5cf6 45%,
            #6048e5 70%,
            transparent 100%
        ) !important;

    display: block !important;

    opacity: 1 !important;

    pointer-events: none !important;

    z-index: 9999 !important;
}

/* Dark mode — slightly brighter premium edge */
body.dark .irving-intake-project-panel::before,
body.dark .irving-packages-panel::before,
body.dark .irving-ai-panel::before,
[data-theme="dark"] .irving-intake-project-panel::before,
[data-theme="dark"] .irving-packages-panel::before,
[data-theme="dark"] .irving-ai-panel::before {
    background:
        linear-gradient(
            90deg,
            #7c3aed 0%,
            #8b5cf6 45%,
            #a78bfa 70%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 12px rgba(139, 92, 246, .35) !important;
}

/* Keep the accent above the sticky package header */
.irving-packages-topbar,
.irving-intake-project-panel-top,
.irving-ai-header {
    position: relative;
}

/* Mobile */
@media (max-width: 650px) {

    .irving-intake-project-panel::before,
    .irving-packages-panel::before,
    .irving-ai-panel::before {
        width: 140px !important;
        height: 3px !important;
    }

}
/* =========================================================
   IRVING STUDIO — PROJECT INTAKE
   CORRECT STICKY HEADER SYSTEM
   ========================================================= */

/* ---------------------------------------------------------
   MAIN PANEL
   The panel is the ONLY scrolling container.
--------------------------------------------------------- */

.irving-intake-project-panel {
    position: relative !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    max-height: calc(100vh - 60px) !important;
}


/* ---------------------------------------------------------
   TOP SYSTEM BAR
   ONLY THIS ELEMENT STAYS AT THE TOP
--------------------------------------------------------- */

.irving-intake-project-panel-top {
    position: sticky !important;

    top: 0 !important;

    z-index: 1000 !important;

    min-height: 64px !important;

    background:
        rgba(11, 11, 18, 0.96) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}


/* ---------------------------------------------------------
   PURPLE PREMIUM ACCENT
   ATTACHED TO THE TOP BAR
--------------------------------------------------------- */

.irving-intake-project-panel-top::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 180px !important;
    height: 3px !important;

    background:
        linear-gradient(
            90deg,
            #7c3aed 0%,
            #8b5cf6 45%,
            #6048e5 70%,
            transparent 100%
        ) !important;

    opacity: 1 !important;

    pointer-events: none !important;

    z-index: 1001 !important;

    box-shadow:
        0 0 12px rgba(139, 92, 246, 0.35);
}


/* ---------------------------------------------------------
   MAKE SURE CONTENT IS NOT STICKY
--------------------------------------------------------- */

.irving-intake-project-panel-content,
.irving-intake-project-panel-intro,
.irving-intake-project-panel-form {
    position: relative !important;

    top: auto !important;
    bottom: auto !important;

    z-index: 1 !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

    .irving-intake-project-panel {
        width: 100% !important;

        /* IMPORTANT:
           The parent modal already defines the available height.
           Do NOT use 100vh here.
        */
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        box-sizing: border-box !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}
/* =========================================================
   IRVING STUDIO — PACKAGE SVG ARROWS
   Prevent iOS/Safari Unicode arrow emoji conversion
========================================================= */

.irving-package-card-arrow,
.irving-package-back-arrow,
.irving-package-start-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
}

.irving-package-card-arrow svg,
.irving-package-back-arrow svg,
.irving-package-start-arrow svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: currentColor !important;
}

.irving-package-card-arrow svg path,
.irving-package-back-arrow svg path,
.irving-package-start-arrow svg path {
  vector-effect: non-scaling-stroke;
}
/* =========================================================
   IRVING STUDIO — MOBILE NAVIGATION
   Theme-aware / no glass effect
========================================================= */

.mobile-navigation.is-open {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* Light theme */
html:not([data-theme="dark"]) .mobile-navigation.is-open,
body:not(.dark-theme) .mobile-navigation.is-open {
  background: #ffffff !important;
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dark theme */
html[data-theme="dark"] .mobile-navigation.is-open,
body.dark-theme .mobile-navigation.is-open {
  background: #111111 !important;
  background-color: #111111 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* =========================================================
   MOBILE NAVIGATION — NO GLASS
========================================================= */

.mobile-navigation.is-open {
  background: #ffffff !important;
  background-color: #ffffff !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  opacity: 1 !important;
}

/* =========================================================
   DARK MODE
========================================================= */

body.dark .mobile-navigation.is-open,
body.dark-mode .mobile-navigation.is-open,
body.is-dark .mobile-navigation.is-open,
html.dark .mobile-navigation.is-open,
html.dark-mode .mobile-navigation.is-open,
html.is-dark .mobile-navigation.is-open,
html[data-theme="dark"] .mobile-navigation.is-open {
  background: #111111 !important;
  background-color: #111111 !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* =========================================================
   IRVING STUDIO — MOBILE NAVIGATION
   SOLID / THEME AWARE / NO GLASS
========================================================= */

.mobile-navigation.is-open {
  background: var(--surface) !important;
  background-color: var(--surface) !important;

  color: var(--ink) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* =========================================================
   NAVIGATION SEPARATORS / LINES
========================================================= */

.mobile-navigation.is-open *,
.mobile-navigation.is-open li,
.mobile-navigation.is-open a,
.mobile-navigation.is-open button {
  border-color: var(--line) !important;
}

/* =========================================================
   TEXT / ICONS
========================================================= */

.mobile-navigation.is-open a,
.mobile-navigation.is-open button {
  color: var(--ink) !important;
}

/* Muted elements */
.mobile-navigation.is-open .muted,
.mobile-navigation.is-open .mobile-navigation-label {
  color: var(--muted) !important;
}


/* =========================================================
   IRVING STUDIO — SERVICE CARDS
   Clean editorial layout
   Preserves service-micro and service-tech-marker styling
========================================================= */



/* Main card */
.service-card {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 283px;
  padding: 36px;
  display: flex;
  flex-direction: column;

  background: #ffffff;
  border: 1px solid #e1e2e9;
  border-radius: 25px;

  color: #141419;
  overflow: hidden;

  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}



/* Subtle card interaction */
.service-card:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 12px 32px rgba(20, 20, 35, 0.045);
}

/* Number and arrow row */
.service-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 22px;
}

/* Number */
.service-number {
  color: #6545ff;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
}

/* Circular arrow */
.service-arrow {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #d9dbe5;
  border-radius: 50%;
  color: #49465e;
  background: transparent;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.service-arrow svg {
  display: block;
  width: 14px;
  height: 14px;
}

.service-card:hover .service-arrow {
  color: #ffffff;
  background: #7652e8;
  border-color: #7652e8;
  transform: translate(2px, -2px);
}

/* Service heading */
.service-card h3 {
  margin: 0 0 16px;
  color: #141419;

  font-family: "DM Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.025em;
}

/* Description */
.service-card > p {
  margin: 16px 0 0;
  max-width: 600px;

  color: rgba(20, 20, 25, 0.68);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* =========================================================
   SERVICE TAGS
   Editorial text with divider — not pill buttons
========================================================= */

.service-card .service-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 0;

  width: 100%;
  box-sizing: border-box;
  margin-top: auto;
  padding-top: 20px;

  border-top: 1px solid #e1e2e9;
}

/* Individual tags */
.service-card .service-tags span {
  display: inline;
  padding: 0;
  margin: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  color: #55516d;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Small separators between tags */
.service-card .service-tags span:not(:last-child)::after {
  content: "·";
  display: inline-block;
  padding: 0 7px;
  color: #8b5cf6;
}

/* =========================================================
   DARK MODE
========================================================= */

body.dark .service-card {
  background: var(--surface, #17171d);
  color: var(--ink, #f4f4f8);
  border-color: var(--line, #2d2d38);
}

body.dark .service-card:hover {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

body.dark .service-card h3 {
  color: var(--ink, #f4f4f8);
}

body.dark .service-card > p {
  color: var(--muted, #a7aac0);
}

body.dark .service-card .service-arrow {
  color: var(--muted, #a7aac0);
  border-color: var(--line, #2d2d38);
}

body.dark .service-card:hover .service-arrow {
  color: #ffffff;
  background: #7652e8;
  border-color: #7652e8;
}

body.dark .service-card .service-tags {
  border-top-color: var(--line, #2d2d38);
}

body.dark .service-card .service-tags span {
  color: var(--muted, #a7aac0);
}

/* =========================================================
   RESPONSIVE LAYOUT
========================================================= */

@media (max-width: 900px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .service-card {
    padding: 28px;
    min-height: 290px;
    border-radius: 22px;
  }
}

@media (max-width: 600px) {
  .service-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .service-card {
    min-height: 270px;
    padding: 25px 22px;
    border-radius: 20px;
  }

  .service-card-top {
    margin-bottom: 20px;
  }

  .service-card h3 {
    font-size: 1rem;
  }

  .service-card > p {
    font-size: 0.94rem;
    line-height: 1.8;
  }

  .service-card .service-tags {
    padding-top: 17px;
  }

  .service-card .service-tags span {
    font-size: 0.63rem;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-arrow {
    transition: none;
  }
}


/* =========================================================
   IRVING AI — FORCE LAUNCHER TO BOTTOM-RIGHT
   Override previous positioning and visibility rules
   ========================================================= */

body #irvingAiLauncher.irving-ai-launcher {
    position: fixed !important;

    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    top: auto !important;

    margin: 0 !important;
    transform: none;

    display: flex !important;
    align-items: center;
    justify-content: center;

    z-index: 2147483647 !important;
}

/* Hide irvingAI launcher on small devices */
@media (max-width: 650px) {
    body #irvingAiLauncher.irving-ai-launcher {
        display: none !important;
    }
}

/* Fix the irvingAI widget blocking website content */
.irving-ai-panel {
  pointer-events: auto;
}

/* Keep the floating chat button clickable */
.irving-ai-launcher {
  pointer-events: auto;
}

/* Prevent the chat widget's outer wrapper from blocking the page */
.irving-ai {
  pointer-events: none;
}

/* Allow interaction with the actual chat panel and button */
.irving-ai .irving-ai-panel,
.irving-ai .irving-ai-launcher {
  pointer-events: auto;
}

/* Remove the silver lining around Start Project buttons */
.button.button-primary.open-project-modal,
.header-cta.open-project-modal,
.irving-package-start-button {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Keep the button clean when focused or clicked */
.button.button-primary.open-project-modal:focus,
.button.button-primary.open-project-modal:focus-visible,
.header-cta.open-project-modal:focus,
.header-cta.open-project-modal:focus-visible,
.irving-package-start-button:focus,
.irving-package-start-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Prevent a silver border from appearing on hover */
.button.button-primary.open-project-modal:hover,
.header-cta.open-project-modal:hover,
.irving-package-start-button:hover {
    outline: none !important;
}

/* irvingAI — Project enquiry form */

.irving-ai-contact-card {
  margin: 16px 0;
  padding: 18px;
  border: 1px solid var(--line, #2d2d38);
  border-radius: 16px;
  background: var(--surface, #17171d);
  color: var(--ink, #f4f4f8);
  box-sizing: border-box;
  width: 100%;
}

.irving-ai-contact-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--ink, #f4f4f8);
}

.irving-ai-contact-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #a7aac0);
}

.irving-ai-lead-form {
  display: grid;
  gap: 13px;
  margin-top: 16px;
}

.irving-ai-lead-form label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  color: var(--ink, #f4f4f8);
}

.irving-ai-lead-form input,
.irving-ai-lead-form select,
.irving-ai-lead-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--line, #2d2d38);
  border-radius: 9px;
  background: var(--bg, #101014);
  color: var(--ink, #f4f4f8);
  font: inherit;
  font-size: 13px;
}

.irving-ai-lead-form input:focus,
.irving-ai-lead-form select:focus,
.irving-ai-lead-form textarea:focus {
  outline: 2px solid var(--accent, #8b7cff);
  outline-offset: 2px;
}

.irving-ai-lead-form textarea {
  resize: vertical;
}

.irving-ai-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.irving-ai-lead-submit {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent, #8b7cff);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.irving-ai-lead-submit:hover {
  filter: brightness(1.08);
}

.irving-ai-lead-form :disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.irving-ai-form-note {
  margin-bottom: 0;
  font-size: 11px !important;
}

.irving-ai-lead-confirmation {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line, #2d2d38);
  border-radius: 10px;
  color: var(--ink, #f4f4f8);
  font-size: 13px;
  line-height: 1.6;
}

body.dark .irving-ai-contact-card {
  background: #17171d;
  border-color: #2d2d38;
  color: #f4f4f8;
}

body.dark .irving-ai-lead-form input,
body.dark .irving-ai-lead-form select,
body.dark .irving-ai-lead-form textarea {
  background: #101014;
  border-color: #2d2d38;
  color: #f4f4f8;
}

@media (max-width: 420px) {
  .irving-ai-contact-card {
    padding: 13px;
  }

  .irving-ai-form-row {
    grid-template-columns: 1fr;
  }
}

/* Irving AI project enquiry form */

.irving-ai-intake {
  width: 100%;
  box-sizing: border-box;
}

.irving-ai-intake h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink, inherit);
}

.irving-ai-intake > p {
  margin: 0 0 16px;
  line-height: 1.65;
  color: var(--muted, inherit);
  white-space: normal;
}

.irving-ai-contact-form {
  display: grid;
  gap: 13px;
  width: 100%;
  min-width: 0;
}

.irving-ai-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.irving-ai-field label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink, inherit);
}

.irving-ai-field input,
.irving-ai-field select,
.irving-ai-field textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line, #d8d8df);
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--ink, #222);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  outline: none;
}

.irving-ai-field input:focus,
.irving-ai-field select:focus,
.irving-ai-field textarea:focus {
  border-color: var(--accent, #7777ee);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--accent, #7777ee) 18%, transparent);
}

.irving-ai-field textarea {
  resize: vertical;
  min-height: 95px;
}

.irving-ai-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted, inherit);
}

.irving-ai-consent input {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--accent, #7777ee);
}

.irving-ai-form-submit {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--accent, #6565df);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.irving-ai-form-submit:hover {
  opacity: 0.9;
}

.irving-ai-form-submit:disabled {
  opacity: 0.55;
  cursor: wait;
}

.irving-ai-form-status {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.irving-ai-form-status:empty {
  display: none;
}

.irving-ai-form-status[data-state="warning"],
.irving-ai-form-status[data-state="error"] {
  color: #c0392b;
}

.irving-ai-form-status[data-state="sent"] {
  color: #21865b;
}

body.dark .irving-ai-intake,
body.dark .irving-ai-contact-form {
  color: var(--ink, #f4f4f8);
}

body.dark .irving-ai-field input,
body.dark .irving-ai-field select,
body.dark .irving-ai-field textarea {
  background: var(--bg, #101014);
  color: var(--ink, #f4f4f8);
  border-color: var(--line, #2d2d38);
}

body.dark .irving-ai-field input::placeholder,
body.dark .irving-ai-field textarea::placeholder {
  color: var(--muted, #a7aac0);
}

@media (max-width: 480px) {
  .irving-ai-intake {
    padding: 2px 0;
  }

  .irving-ai-contact-form {
    gap: 11px;
  }

  .irving-ai-field input,
  .irving-ai-field select,
  .irving-ai-field textarea {
    font-size: 16px;
  }
}

/* =========================================================
   IRVING STUDIO — PREMIUM SCROLL MOTION
   Lightweight CSS | No libraries | Dark/light mode friendly
========================================================= */

:root {
  --irving-motion-duration: 760ms;
  --irving-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Prevent animations from causing horizontal overflow */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------
   SCROLL REVEALS
--------------------------------------------------------- */

.irving-motion-ready .irving-reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--irving-motion-duration) var(--irving-motion-ease),
    transform var(--irving-motion-duration) var(--irving-motion-ease);
  will-change: opacity, transform;
}

.irving-motion-ready .irving-reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Directional variants */

.irving-motion-ready .irving-reveal-left {
  transform: translate3d(-28px, 0, 0);
}

.irving-motion-ready .irving-reveal-right {
  transform: translate3d(28px, 0, 0);
}

.irving-motion-ready .irving-reveal-scale {
  transform: translate3d(0, 18px, 0) scale(.975);
}

.irving-motion-ready .irving-reveal-left.is-visible,
.irving-motion-ready .irving-reveal-right.is-visible {
  transform: translate3d(0, 0, 0);
}

.irving-motion-ready .irving-reveal-scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* ---------------------------------------------------------
   STAGGERED CHILDREN
--------------------------------------------------------- */

.irving-motion-ready .irving-stagger-item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 680ms var(--irving-motion-ease),
    transform 680ms var(--irving-motion-ease);
}

.irving-motion-ready .irving-stagger-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.irving-stagger-item:nth-child(1) { transition-delay: 0ms; }
.irving-stagger-item:nth-child(2) { transition-delay: 90ms; }
.irving-stagger-item:nth-child(3) { transition-delay: 180ms; }
.irving-stagger-item:nth-child(4) { transition-delay: 270ms; }
.irving-stagger-item:nth-child(5) { transition-delay: 360ms; }

/* ---------------------------------------------------------
   HERO — CINEMATIC ENTRANCE
--------------------------------------------------------- */

.hero .hero-copy > * {
  animation: irvingHeroEnter 900ms var(--irving-motion-ease) both;
}

.hero .hero-copy > *:nth-child(1) {
  animation-delay: 100ms;
}

.hero .hero-copy > *:nth-child(2) {
  animation-delay: 220ms;
}

.hero .hero-copy > *:nth-child(3) {
  animation-delay: 360ms;
}

.hero .hero-copy > *:nth-child(4) {
  animation-delay: 480ms;
}

@keyframes irvingHeroEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* ---------------------------------------------------------
   SERVICE CARDS
--------------------------------------------------------- */

.irving-motion-ready .service-card {
  transition:
    opacity 750ms var(--irving-motion-ease),
    transform 750ms var(--irving-motion-ease);
}

.irving-motion-ready .service-card.irving-stagger-item {
  transform: translate3d(0, 28px, 0);
}

.irving-motion-ready .service-card.irving-stagger-item.is-visible {
  transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------
   PROCESS TIMELINE
--------------------------------------------------------- */

.process-row {
  position: relative;
}

.irving-motion-ready .process-row.irving-stagger-item {
  transform: translate3d(20px, 0, 0);
}

.irving-motion-ready .process-row.irving-stagger-item.is-visible {
  transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------
   BLUEPRINT / ARCHITECTURE SVG DRAW
--------------------------------------------------------- */

.irving-motion-ready .blueprint-svg .blueprint-line,
.irving-motion-ready .blueprint-svg .blueprint-data-line,
.irving-motion-ready .architecture-lines .architecture-path {
  transition:
    stroke-dashoffset 1500ms var(--irving-motion-ease),
    opacity 700ms ease;
}

.irving-motion-ready .blueprint-svg .blueprint-line,
.irving-motion-ready .blueprint-svg .blueprint-data-line,
.irving-motion-ready .architecture-lines .architecture-path {
  opacity: .25;
}

.irving-motion-ready .studio-blueprint.is-visible .blueprint-svg .blueprint-line,
.irving-motion-ready .studio-blueprint.is-visible .blueprint-svg .blueprint-data-line,
.irving-motion-ready .services-system.is-visible .architecture-lines .architecture-path {
  opacity: 1;
}

/* ---------------------------------------------------------
   SCROLL PROGRESS BAR
--------------------------------------------------------- */

.irving-scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10000;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    #7c3aed,
    #a78bfa,
    #c4b5fd
  );
}

/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .irving-motion-ready *,
  .irving-motion-ready *::before,
  .irving-motion-ready *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .irving-motion-ready .irving-reveal-on-scroll,
  .irving-motion-ready .irving-stagger-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================
   IRVING STUDIO — SCROLL MOTION SYSTEM
   Slide • Reveal • Assemble • Depth
========================================================= */

:root {
  --irving-motion-duration: 850ms;
  --irving-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Keep animations from causing horizontal overflow */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* Initial reveal states are enabled by JavaScript */
.irving-motion-ready .irving-reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition:
    opacity var(--irving-motion-duration) var(--irving-motion-ease),
    transform var(--irving-motion-duration) var(--irving-motion-ease);
  will-change: opacity, transform;
}

/* Reveal from different directions */
.irving-motion-ready .irving-from-left {
  transform: translate3d(-72px, 12px, 0);
}

.irving-motion-ready .irving-from-right {
  transform: translate3d(72px, 12px, 0);
}

.irving-motion-ready .irving-from-bottom {
  transform: translate3d(0, 65px, 0);
}

.irving-motion-ready .irving-from-top {
  transform: translate3d(0, -42px, 0);
}

/* The element has arrived */
.irving-motion-ready .irving-reveal.irving-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Staggered items: service cards, process rows, pricing */
.irving-motion-ready .irving-stagger {
  opacity: 0;
  transform: translate3d(0, 38px, 0) scale(.985);
  transition:
    opacity 750ms var(--irving-motion-ease),
    transform 850ms var(--irving-motion-ease);
}

.irving-motion-ready .irving-stagger.irving-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* A subtle lift when cards are hovered */
@media (hover: hover) and (pointer: fine) {
  .service-card,
  .investment-card {
    transition:
      transform 350ms var(--irving-motion-ease),
      border-color 350ms ease,
      box-shadow 350ms ease;
  }

  .service-card:hover,
  .investment-card:hover {
    transform: translateY(-5px);
  }
}

/* Hero entrance */
.irving-hero-enter {
  animation: irvingHeroEnter 1s var(--irving-motion-ease) both;
}

.irving-hero-delay-1 {
  animation-delay: 120ms;
}

.irving-hero-delay-2 {
  animation-delay: 260ms;
}

.irving-hero-delay-3 {
  animation-delay: 400ms;
}

@keyframes irvingHeroEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* Thin page progress indicator */
#irving-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  z-index: 99999;
  pointer-events: none;
  background: var(--ink, currentColor);
  opacity: .75;
  transition: width 80ms linear;
}

/* Never force motion on users who request less animation */
@media (prefers-reduced-motion: reduce) {
  .irving-motion-ready .irving-reveal,
  .irving-motion-ready .irving-stagger,
  .irving-motion-ready .irving-reveal.irving-visible,
  .irving-motion-ready .irving-stagger.irving-visible {
    opacity: 1;
    transform: none;
    transition: none;
    filter: none;
  }

  .irving-hero-enter {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }

  #irving-scroll-progress {
    display: none;
  }
}

.studio-intro-layout {
  display: grid;
  grid-template-columns: minmax(240px, .82fr) minmax(0, 2fr);
  align-items: center;
  gap: clamp(36px, 6vw, 100px);
  margin-bottom: clamp(60px, 9vw, 120px);
}

.studio-identity-panel {
  position: relative;
  min-height: 300px;
  padding: 22px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(var(--line, #dedee7) 1px, transparent 1px),
    linear-gradient(90deg, var(--line, #dedee7) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: var(--surface, #fff);
  border: 1px solid var(--line, #dedee7);
  border-radius: 4px;
}

.studio-identity-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(115, 85, 255, .08)
  );
  pointer-events: none;
}

.studio-identity-top,
.studio-identity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.studio-identity-top,
.studio-identity-footer,
.studio-identity-caption > span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}

.studio-identity-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted, #777);
  font-size: 8px;
}

.studio-identity-status i,
.studio-identity-index {
  color: #7558ff;
}

.studio-identity-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  animation: studioStatusPulse 2s ease-in-out infinite;
}

.studio-identity-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 0;
}

.studio-identity-symbol {
  font-size: clamp(90px, 12vw, 150px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.1em;
  color: var(--ink, #15151b);
}

.studio-identity-symbol span {
  color: #7558ff;
}

.studio-identity-caption {
  display: grid;
  gap: 7px;
}

.studio-identity-caption > span {
  color: var(--muted, #777);
}

.studio-identity-caption strong {
  font-size: 14px;
  font-weight: 600;
}

.studio-identity-rule {
  height: 1px;
  margin: 10px 0 18px;
  background: var(--line, #dedee7);
  overflow: hidden;
}

.studio-identity-rule span {
  display: block;
  width: 100%;
  height: 100%;
  background: #7558ff;
  transform: scaleX(0);
  transform-origin: left;
}

.studio-identity-panel.irving-panel-visible
.studio-identity-rule span {
  animation: studioLineDraw 1.1s .25s
    cubic-bezier(.16, 1, .3, 1) forwards;
}

.studio-identity-footer {
  justify-content: flex-start;
  gap: 16px;
  color: var(--muted, #777);
}

.studio-identity-index {
  position: absolute;
  right: 20px;
  top: 50%;
  font-size: 9px;
  writing-mode: vertical-rl;
  opacity: .7;
}

.studio-intro-copy {
  min-width: 0;
}

.studio-intro-copy .studio-heading {
  margin-bottom: 24px;
}

.studio-intro-copy .studio-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 60px);
}

.studio-intro-copy .studio-columns p {
  margin: 0;
}

/* Reveal animation */
.irving-panel-reveal {
  opacity: 0;
  transform: translate3d(-45px, 12px, 0);
  transition:
    opacity 850ms cubic-bezier(.16, 1, .3, 1),
    transform 950ms cubic-bezier(.16, 1, .3, 1);
}

.irving-panel-reveal.irving-panel-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@keyframes studioLineDraw {
  to { transform: scaleX(1); }
}

@keyframes studioStatusPulse {
  50% { opacity: .45; }
}

/* Dark mode */
body.dark .studio-identity-panel {
  background-color: var(--surface, #17171d);
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
}

/* Responsive layout */
@media (max-width: 800px) {
  .studio-intro-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .studio-identity-panel {
    min-height: 250px;
  }

  .studio-intro-copy .studio-columns {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .irving-panel-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .studio-identity-status i {
    animation: none;
  }

  .studio-identity-panel.irving-panel-visible
  .studio-identity-rule span {
    animation: none;
    transform: scaleX(1);
  }
}



/* =========================================================
   IRVING STUDIO — STUDIO INTRO LAYOUT
   FIX: Reduce the gap between H2 and studio columns
========================================================= */

.studio-intro-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, 345px) minmax(0, 1fr);
  column-gap: 48px;
  row-gap: 0 !important;
  align-items: start !important;
}

/* Identity panel */
.studio-intro-layout > .studio-identity-panel {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-top: 10px !important;
}

/* Allow the intro elements to participate in the parent grid */
.studio-intro-layout > .studio-intro-copy {
  display: contents;
}

.studio-intro-layout .studio-heading {
  display: contents;
}

/* Studio eyebrow */
.studio-intro-layout .studio-heading > .eyebrow {
  grid-column: 1;
  grid-row: 1;

  align-self: start;
  position: relative !important;
  z-index: 2;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateY(-100%);
  line-height: -0.6;
}

/* Main heading */
.studio-intro-layout .studio-heading > h2 {
  grid-column: 2;
  grid-row: 1;

  align-self: start;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.12;
}

/* Paragraph columns — place directly below the heading */
.studio-intro-layout .studio-columns {
  grid-column: 2;
  grid-row: 2;

  align-self: start;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 18px;

  margin: 12px 0 0 !important;
  padding: 0 !important;
}

/* Remove default paragraph spacing */
.studio-intro-layout .studio-columns > p {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   MOBILE LAYOUT
========================================================= */

@media (max-width: 800px) {
  .studio-intro-layout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 28px !important;
  }

  .studio-intro-layout > .studio-identity-panel {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0 !important;
  }

  .studio-intro-layout > .studio-intro-copy {
    display: block;
    min-width: 0;
  }

  .studio-intro-layout .studio-heading {
    display: block;
  }

  .studio-intro-layout .studio-heading > .eyebrow {
    position: static !important;
    transform: none;
    margin: 0 0 12px !important;
  }

  .studio-intro-layout .studio-heading > h2 {
    margin: 0 !important;
  }

  .studio-intro-layout .studio-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;

    margin-top: 12px !important;
  }
}

/* IRVING STUDIO — FORCE H2 AND COLUMNS CLOSER */

.studio-intro-layout .studio-heading > h2 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.05 !important;
}

.studio-intro-layout .studio-columns {
  margin-top: -200px !important;
  padding-top: 0 !important;
  align-self: start !important;
}

.studio-intro-layout .studio-columns > p {
  margin-top: 0 !important;
}

/* Keep mobile spacing natural */
@media (max-width: 800px) {
  .studio-intro-layout .studio-columns {
    margin-top: 12px !important;
  }
}


























/* =========================================================
   IRVING STUDIO — SCOPE & INVESTMENT
   LAYOUT CORRECTION / BLUEPRINT V2
========================================================= */

/* 01 — Reset the section's inherited layout */
#scope.scope {
  display: block !important;
  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 1280px;

  margin-inline: auto !important;
  padding: 100px 48px 90px !important;

  color: var(--ink, #111116);
  background: var(--bg, #fbfbfe);

  box-sizing: border-box;
}

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

/* Keep the technical grid subtle */
#scope.scope::before {
  opacity: 0.18;
  background-size: 40px 40px;
  pointer-events: none;
}

/* 02 — Eyebrow: anchor it above the main content */
#scope.scope > .eyebrow {
  display: flex !important;
  align-items: center;
  gap: 12px;

  width: fit-content;
  margin: 0 0 30px !important;
  padding: 0 !important;

  color: var(--scope-accent, #6048e5) !important;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  transform: none !important;
}

/* 03 — Two balanced columns */
#scope.scope > .scope-main {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(280px, 0.8fr);

  align-items: center;
  column-gap: clamp(40px, 6vw, 88px);

  width: 100%;
  margin: 0 0 44px !important;
}

/* Original HTML compatibility */
#scope.scope > div:not(.scope-main):not(.scope-spec-strip) {
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(280px, 0.8fr);

  align-items: center;
  column-gap: clamp(40px, 6vw, 88px);

  margin-bottom: 44px;
}

/* 04 — Heading */
#scope.scope .scope-heading {
  min-width: 0;
}

#scope.scope .scope-index {
  display: block;
  margin: 0 0 20px !important;

  color: var(--muted, #526485);

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* Updated HTML heading */
#scope.scope .scope-heading h2 {
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--ink, #111116);

  font-size: clamp(38px, 4.1vw, 54px) !important;
  font-weight: 500;
  line-height: 1.12 !important;
  letter-spacing: -0.055em;

  text-wrap: balance;
}

/* Retain the intended two-line break on desktop */
#scope.scope .scope-heading h2 br {
  display: block;
}

/* Small accent under the heading */
#scope.scope .scope-heading h2::after {
  content: "";
  display: block;

  width: 40px;
  height: 2px;

  margin-top: 24px;

  background: var(--scope-accent, #6048e5);
}

/* 05 — Scope card */
#scope.scope .scope-card {
  align-self: center;
  min-width: 0;

  margin: 0 !important;
  padding: 28px !important;

  border: 1px solid var(--line, #dedfe7);
  border-top: 2px solid var(--scope-accent, #6048e5);
  border-radius: 2px;

  background: var(--surface, #fff);

  box-shadow: 0 12px 35px rgba(20, 20, 40, 0.04);
}

#scope.scope .scope-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  margin: 0 0 26px !important;
  padding: 0 0 14px !important;

  border-bottom: 1px solid var(--line, #dedfe7);
}

#scope.scope .scope-card-top > span:first-child {
  color: var(--muted, #526485);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

#scope.scope .scope-card-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: var(--scope-accent, #6048e5);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

#scope.scope .scope-card-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;

  border-radius: 50%;
  background: currentColor;
}

#scope.scope .scope-card > strong {
  display: block;

  margin: 0 0 12px !important;

  color: var(--ink, #111116);
  font-size: clamp(22px, 2.2vw, 27px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.045em;
}

#scope.scope .scope-card > p {
  margin: 0 !important;

  color: var(--muted, #526485);
  font-size: 13px;
  line-height: 1.85;
}

/* 06 — Specification strip: bring it closer */
#scope.scope .scope-spec-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 48px;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid var(--line, #dedfe7);
  background: var(--surface, #fff);

  box-shadow: none;
}

#scope.scope .scope-spec-strip::before {
  content: "";

  position: absolute;
  top: -1px;
  left: 0;
  right: 0;

  height: 2px;

  background: linear-gradient(
    90deg,
    var(--scope-accent, #6048e5),
    transparent 75%
  );
}

#scope.scope .scope-spec-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  min-width: 0;
  min-height: 112px;
  gap: 14px;

  padding: 22px 24px;

  border-right: 1px solid var(--line, #dedfe7);
}

#scope.scope .scope-spec-item > span {
  color: var(--scope-accent, #6048e5);

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

#scope.scope .scope-spec-item > strong {
  color: var(--ink, #111116);

  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

#scope.scope .scope-spec-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--scope-accent, #6048e5);
  background: var(--scope-accent-soft, rgba(96, 72, 229, 0.08));
}

#scope.scope .scope-spec-mark svg {
  display: block;
  width: 21px;
  height: 21px;
}

/* 07 — Dark theme */
.dark #scope.scope,
.dark-mode #scope.scope,
body.dark #scope.scope,
body.dark-mode #scope.scope,
[data-theme="dark"] #scope.scope {
  --scope-accent: #a394ff;
  --scope-accent-soft: rgba(163, 148, 255, 0.1);
}

.dark #scope.scope .scope-card,
.dark-mode #scope.scope .scope-card,
body.dark #scope.scope .scope-card,
body.dark-mode #scope.scope .scope-card,
[data-theme="dark"] #scope.scope .scope-card {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

/* 08 — Tablet */
@media (max-width: 900px) {
  #scope.scope {
    padding: 80px 28px !important;
  }

  #scope.scope > .scope-main,
  #scope.scope > div:not(.scope-main):not(.scope-spec-strip) {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(240px, 0.9fr);

    column-gap: 30px;
  }

  #scope.scope .scope-heading h2 {
    font-size: clamp(34px, 4.5vw, 44px) !important;
  }

  #scope.scope .scope-card {
    padding: 22px !important;
  }

  #scope.scope .scope-spec-item {
    padding: 20px 15px;
  }
}

/* 09 — Mobile */
@media (max-width: 650px) {
  #scope.scope {
    padding: 64px 20px !important;
  }

  #scope.scope > .eyebrow {
    margin-bottom: 25px !important;
    font-size: 9px;
  }

  #scope.scope > .scope-main,
  #scope.scope > div:not(.scope-main):not(.scope-spec-strip) {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;

    margin-bottom: 32px !important;
  }

  #scope.scope .scope-heading h2 {
    font-size: clamp(35px, 9vw, 46px) !important;
    line-height: 1.12 !important;
  }

  #scope.scope .scope-heading h2 br {
    display: none;
  }

  #scope.scope .scope-card {
    width: 100%;
    padding: 23px !important;
  }

  #scope.scope .scope-spec-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  #scope.scope .scope-spec-item {
    min-height: auto;
    gap: 8px;

    padding: 19px 21px;

    border-right: 0;
    border-bottom: 1px solid var(--line, #dedfe7);
  }

  #scope.scope .scope-spec-mark {
    min-height: 45px;
    justify-content: flex-end;
    padding: 0 20px;
  }
}

/* 10 — Small phones */
@media (max-width: 380px) {
  #scope.scope {
    padding-inline: 16px !important;
  }

  #scope.scope .scope-card {
    padding: 19px !important;
  }

  #scope.scope .scope-heading h2 {
    font-size: 34px !important;
  }
}

/* 11 — Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #scope.scope *,
  #scope.scope *::before,
  #scope.scope *::after {
    animation: none !important;
    transition: none !important;
  }
}
#scope .scope-spec-mark {
  text-decoration: none;
  cursor: pointer;
}

#scope .scope-spec-mark:focus-visible {
  outline: 2px solid var(--scope-accent, #6048e5);
  outline-offset: 4px;
}

/* =========================================================
   IRVING AI — CHATBOT MESSAGE TYPING EFFECT
========================================================= */

/* Keep message bubbles ready for animated text */
.irving-ai-message .irving-ai-bubble {
  overflow-wrap: anywhere;
}

/* Only animate assistant messages */
.irving-ai-message.assistant .irving-ai-bubble.is-typing {
  min-width: 12px;
}

/* Blinking cursor while assistant text is appearing */
.irving-ai-message.assistant
.irving-ai-bubble.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -2px;
  border-radius: 2px;
  background: #C4B5FD;
  animation: irvingAiCursor 0.8s steps(2, start) infinite;
}

/* Cursor disappears when the message finishes */
.irving-ai-message.assistant
.irving-ai-bubble.typing-complete::after {
  content: none;
}

@keyframes irvingAiCursor {
  to {
    visibility: hidden;
  }
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .irving-ai-message.assistant
  .irving-ai-bubble.is-typing::after {
    animation: none;
  }
}
.irving-ai-message.assistant .irving-ai-bubble.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -2px;
  background: #C4B5FD;
  animation: irvingAiCursor 0.8s steps(2, start) infinite;
}

.irving-ai-message.assistant .irving-ai-bubble.typing-complete::after {
  content: none;
}

@keyframes irvingAiCursor {
  to {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .irving-ai-message.assistant .irving-ai-bubble.is-typing::after {
    animation: none;
  }
}

/* PREMIUM NAVBAR ICONS */

.theme-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.theme-toggle:hover {
  background: var(--surface);
  border-color: var(--line);
  transform: rotate(8deg);
}

.theme-icon {
  display: block;
  flex-shrink: 0;
}

.theme-icon-moon {
  display: none;
}

body.dark .theme-icon-sun {
  display: none;
}

body.dark .theme-icon-moon {
  display: block;
}

/* Clean mobile hamburger */

.mobile-menu-toggle {
  width: 42px;
  height: 42px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition:
    background .25s ease,
    border-color .25s ease;
}

.mobile-menu-toggle span {
  display: block;
  width: 17px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform .25s ease,
    width .25s ease;
}

.mobile-menu-toggle span:nth-child(2) {
  width: 12px;
  margin-left: 5px;
}

/* Match your existing mobile breakpoint */

@media (max-width: 650px) {
  .mobile-menu-toggle {
    display: flex;
  }
}

body.dark .mobile-menu-toggle {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

/* =========================================
   IRVING STUDIO — PREMIUM MOBILE DOCK
========================================= */

.mobile-app-bar {
  position: fixed;
  z-index: 999;
  left: 12px;
  right: 12px;
  bottom: max(10px, env(safe-area-inset-bottom));

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 4px;

  padding: 9px 8px;
  min-height: 78px;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 25px;

  box-shadow:
    0 8px 32px rgba(30, 28, 65, 0.08),
    0 2px 8px rgba(30, 28, 65, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Individual navigation actions */
.mobile-app-bar .mobile-app-action {
  appearance: none;
  -webkit-appearance: none;

  min-width: 0;
  min-height: 58px;
  padding: 5px 2px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  border: 0;
  border-radius: 17px;
  background: transparent;
  color: #66677c;

  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

/* Icon sizing */
.mobile-app-bar .mobile-app-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-bar .mobile-app-icon svg {
  display: block;
  width: 23px;
  height: 23px;
  max-width: 100%;
  overflow: visible;
  color: currentColor;
}

/* Refined labels */
.mobile-app-bar .mobile-app-label {
  display: block;
  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.015em;
  color: inherit;
}

/* Start action: circular purple icon */
.mobile-app-bar .mobile-app-primary {
  color: #6048e5;
  background: transparent;
}

.mobile-app-bar .mobile-start-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  color: #fff;
  background: linear-gradient(145deg, #755cff, #6048e5);
  border-radius: 50%;

  box-shadow:
    0 4px 12px rgba(96, 72, 229, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mobile-app-bar .mobile-start-icon svg {
  width: 21px;
  height: 21px;
}

.mobile-app-bar .mobile-app-primary .mobile-app-label {
  color: #6048e5;
}

/* Tap feedback */
.mobile-app-bar .mobile-app-action:active {
  transform: scale(0.96);
  background: rgba(96, 72, 229, 0.055);
}

/* Keyboard accessibility */
.mobile-app-bar .mobile-app-action:focus-visible {
  outline: 2px solid #6048e5;
  outline-offset: 2px;
}

/* =========================================
   DARK MODE
========================================= */

body.dark .mobile-app-bar {
  background: rgba(23, 23, 29, 0.84);
  border-color: rgba(255, 255, 255, 0.09);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark .mobile-app-bar .mobile-app-action:not(.mobile-app-primary) {
  color: #b7b8cb;
}

body.dark .mobile-app-bar .mobile-app-primary,
body.dark .mobile-app-bar .mobile-app-primary .mobile-app-label {
  color: #b8aaff;
}

body.dark .mobile-app-bar .mobile-start-icon {
  color: #fff;
}

/* Hover devices only */
@media (hover: hover) {
  .mobile-app-bar .mobile-app-action:not(.mobile-app-primary):hover {
    color: #6048e5;
    background: rgba(96, 72, 229, 0.055);
  }

  body.dark .mobile-app-bar
  .mobile-app-action:not(.mobile-app-primary):hover {
    color: #b8aaff;
    background: rgba(130, 111, 255, 0.1);
  }
}

/* Smaller phones */
@media (max-width: 380px) {
  .mobile-app-bar {
    left: 8px;
    right: 8px;
    gap: 1px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .mobile-app-bar .mobile-app-label {
    font-size: 8px;
  }

  .mobile-app-bar .mobile-app-icon:not(.mobile-start-icon) svg {
    width: 22px;
    height: 22px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-app-bar .mobile-app-action {
    transition: none;
  }
}


/* =========================================
   IRVING STUDIO — MOBILE SVG REPAIR
   Place at the VERY END of your CSS
========================================= */

.mobile-app-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  width: auto;
  box-sizing: border-box;
}

.mobile-app-bar .mobile-app-action {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.mobile-app-bar .mobile-app-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  line-height: 0;
  overflow: visible;
}

.mobile-app-bar .mobile-app-icon svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  max-width: none;
  flex-shrink: 0;
  overflow: visible;

  /* Keep the SVG from inheriting unwanted styling */
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Preserve each icon's own SVG path styling */
.mobile-app-bar .mobile-app-icon svg path {
  vector-effect: non-scaling-stroke;
}

/* Prevent mobile rules from stretching icons */
@media (max-width: 650px) {
  .mobile-app-bar .mobile-app-action {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .mobile-app-bar .mobile-app-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Compact screens */
@media (max-width: 380px) {
  .mobile-app-bar {
    left: 8px;
    right: 8px;
    gap: 0;
    padding-left: 4px;
    padding-right: 4px;
  }

  .mobile-app-bar .mobile-app-icon svg {
    width: 23px !important;
    height: 23px !important;
  }
}


/* =========================================
   IRVING STUDIO — REFINED MOBILE NAVIGATION
========================================= */

.mobile-app-bar {
  position: fixed;
  z-index: 1000;

  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;

  min-height: 74px;
  padding: 8px 6px;
  gap: 2px;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  border: 1px solid rgba(35, 32, 65, 0.09);
  border-radius: 20px;

  box-shadow: 0 6px 24px rgba(25, 25, 45, 0.09);
}

/* Reset inherited button and link styles */
.mobile-app-bar .mobile-app-action {
  appearance: none;
  -webkit-appearance: none;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-width: 0;
  min-height: 56px;
  padding: 5px 1px;
  gap: 5px;
  box-sizing: border-box;

  border: 0;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;

  color: #62647a;
  font-family: inherit;
  text-decoration: none;
  text-align: center;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Consistent icon containers */
.mobile-app-bar .mobile-app-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;
  flex: 0 0 30px;

  margin: 0;
  padding: 0;
  line-height: 0;
}

/* Explicit SVG sizing */
.mobile-app-bar .mobile-app-icon svg {
  display: block !important;

  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  min-height: 26px;
  max-width: none;

  margin: 0;
  padding: 0;
  overflow: visible;

  color: currentColor;
  opacity: 1;
  visibility: visible;
}

/* Keep outline icons crisp */
.mobile-app-bar .mobile-app-icon svg path {
  vector-effect: none;
}

/* WhatsApp's handset remains filled */
.mobile-app-bar .mobile-whatsapp-action
.mobile-app-icon svg path:last-child {
  fill: currentColor;
  stroke: none;
}

/* Small, readable labels */
.mobile-app-bar .mobile-app-label {
  display: block;

  width: 100%;
  margin: 0;
  padding: 0;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;

  color: inherit;
}

/* Purple accent — no oversized purple button */
.mobile-app-bar .mobile-app-primary {
  color: #6048e5;
  background: transparent;
}

.mobile-app-bar .mobile-start-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;
  flex: 0 0 30px;

  color: #6048e5;
  background: #eeeafd;
  border-radius: 11px;
  box-shadow: none;
}

.mobile-app-bar .mobile-start-icon svg {
  width: 23px !important;
  height: 23px !important;
}

.mobile-app-bar .mobile-app-primary .mobile-app-label {
  color: #6048e5;
}

/* Interaction */
.mobile-app-bar .mobile-app-action:active {
  background: rgba(96, 72, 229, 0.07);
  transform: scale(0.97);
}

.mobile-app-bar .mobile-app-action:focus-visible {
  outline: 2px solid #6048e5;
  outline-offset: 2px;
}

/* Dark mode */
body.dark .mobile-app-bar {
  background: rgba(23, 23, 29, 0.96);
  border-color: #2d2d38;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

body.dark .mobile-app-bar .mobile-app-action:not(.mobile-app-primary) {
  color: #a7aac0;
}

body.dark .mobile-app-bar .mobile-app-primary {
  color: #c0b5ff;
}

body.dark .mobile-app-bar .mobile-start-icon {
  color: #c0b5ff;
  background: rgba(96, 72, 229, 0.2);
}

body.dark .mobile-app-bar .mobile-app-primary .mobile-app-label {
  color: #c0b5ff;
}

/* Compact phones */
@media (max-width: 380px) {
  .mobile-app-bar {
    left: 8px;
    right: 8px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .mobile-app-bar .mobile-app-label {
    font-size: 8px;
  }
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .mobile-app-bar .mobile-app-action {
    transition: none;
  }
}


/* =========================================
   IRVING STUDIO — RESPONSIVE MOBILE DOCK
   Phones + tablets | Hidden on large screens
========================================= */
/* Hidden by default on large screens */
.mobile-app-bar {
  display: none !important;
}

/* =========================================
   PHONES — FLUSH WITH BOTTOM
   Rounded top corners
========================================= */

@media screen and (max-width: 650px) {
  .mobile-app-bar {
    display: grid !important;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    box-sizing: border-box;

    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;

    min-height: 76px;
    padding: 10px 8px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 2px;

    border-radius: 22px 22px 0 0;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(35, 32, 65, 0.09);
    border-bottom: 0;

    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);

    box-shadow: 0 -6px 28px rgba(25, 25, 45, 0.08);

    z-index: 1000;
  }
}

/* =========================================
   TABLETS — FLOATING DOCK
   Rounded on all sides
========================================= */

@media screen and (min-width: 651px) and (max-width: 1366px) {
  .mobile-app-bar {
    display: grid !important;

    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(20px, env(safe-area-inset-bottom));

    width: min(440px, calc(100vw - 40px));
    box-sizing: border-box;

    transform: translateX(-50%);

    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;

    min-height: 78px;
    padding: 9px 8px;
    gap: 3px;

    border-radius: 24px;
    border: 1px solid rgba(35, 32, 65, 0.09);

    background: rgba(255, 255, 255, 0.96);

    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);

    box-shadow: 0 8px 32px rgba(25, 25, 45, 0.12);

    z-index: 1000;
  }
}

/* =========================================
   DARK MODE
========================================= */

@media screen and (max-width: 1366px) {
  body.dark .mobile-app-bar {
    background: rgba(23, 23, 29, 0.96);
    border-color: #2d2d38;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  body.dark .mobile-app-bar .mobile-app-action:not(.mobile-app-primary) {
    color: #a7aac0;
  }

  body.dark .mobile-app-bar .mobile-app-primary {
    color: #c0b5ff;
  }

  body.dark .mobile-app-bar .mobile-start-icon {
    color: #c0b5ff;
    background: rgba(96, 72, 229, 0.2);
  }

  body.dark .mobile-app-bar .mobile-app-primary .mobile-app-label {
    color: #c0b5ff;
  }
}

/* =========================================
   LARGE DESKTOPS — HIDE DOCK
========================================= */

@media screen and (min-width: 1367px) {
  .mobile-app-bar {
    display: none !important;
  }
}

/* =========================================
   IRVING STUDIO — BORDERLESS HAMBURGER
========================================= */

.mobile-menu-button {
  width: 44px;
  height: 44px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* border: none !important; */
  outline: none;
  box-shadow: none !important;
  border-radius: 0;

  background: transparent !important;
  color: var(--ink);

  cursor: pointer;
  flex-shrink: 0;

  transition: transform 0.2s ease;
}

/* Three standard horizontal lines */
.hamburger-lines {
  width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.hamburger-lines span {
  display: block;
  width: 22px;
  height: 2px;

  border-radius: 2px;
  background: currentColor;

  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}

/* Subtle press effect */
.mobile-menu-button:active {
  transform: scale(0.94);
}

/* Keyboard accessibility without a permanent border */
.mobile-menu-button:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* Dark mode */
body.dark .mobile-menu-button {
  color: var(--ink);
  background: transparent !important;
}

/* Hide on large desktop screens */
@media screen and (min-width: 1025px) {
  .mobile-menu-button {
    display: none;
  }
}


/* =========================================
   IRVING STUDIO — HAMBURGER RIGHT ALIGNMENT
========================================= */

.mobile-menu-button {
  margin-left: auto;
  margin-right: 0;
  justify-self: end;
   order: 2;
}

/* Ensure the header places it on the right */
.site-header {
  display: flex;
  align-items: center;
}

.mobile-menu-button {
  flex-shrink: 0;
}


/* =========================================
   IRVING STUDIO — HAMBURGER OPEN/CLOSE ANIMATION
========================================= */

/* Hamburger button */
.mobile-menu-button {
  order: 2;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Three lines */
.hamburger-lines {
  width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.hamburger-lines span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;

  transform-origin: center;
  transition:
    transform 0.3s ease,
    opacity 0.2s ease,
    width 0.3s ease;
}

/* OPEN: transform lines into an X */
.mobile-menu-button[aria-expanded="true"] .hamburger-lines span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-button[aria-expanded="true"] .hamburger-lines span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-button[aria-expanded="true"] .hamburger-lines span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* CLOSE: return to three lines */
.mobile-menu-button[aria-expanded="false"] .hamburger-lines span {
  transform: none;
  opacity: 1;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hamburger-lines span {
    transition: none;
  }
}

/* =========================================================
   IRVING STUDIO — JAVASCRIPT-CONTROLLED DOCK VISIBILITY
   Keep this at the VERY END of the stylesheet.
========================================================= */

/* Default: hidden until JavaScript decides. */
html:not(.irving-dock-enabled) .mobile-app-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Phones and detected tablets. */
html.irving-dock-enabled .mobile-app-bar {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Explicit desktop / TV fallback. */
html.irving-dock-disabled .mobile-app-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}