:root {
  --bg: #07090d;
  --bg2: #0b0e13;
  --panel: #0d1117;
  --panel2: #10151c;
  --text: #f4f5f7;
  --muted: #9aa3ae;
  --soft: #c7ccd3;
  --red: #ef2028;
  --red2: #ff3038;
  --line: #222934;
  --line2: #303844;
  --max: 1180px;
  --header: 76px;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 18px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
}
.container {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  background: #fff;
  color: #000;
  border-radius: 8px;
}
.skip-link:focus {
  top: 16px;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 9, 13, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-wrap {
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  flex: none;
}
.brand img,
.footer-logo img {
  display: block;
  width: 178px;
  height: auto;
  max-width: 100%;
  image-rendering: auto;
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.primary-nav > a:not(.nav-cta) {
  position: relative;
  padding: 10px 13px;
  color: #aeb5bf;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.primary-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.primary-nav > a:not(.nav-cta):hover,
.primary-nav > a:not(.nav-cta).active {
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
}
.primary-nav > a:not(.nav-cta):hover::after,
.primary-nav > a:not(.nav-cta).active::after {
  transform: scaleX(1);
}
.nav-cta {
  margin-left: 7px;
  padding: 11px 17px;
  border: 1px solid rgba(239, 32, 40, 0.75);
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}
.nav-cta:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-1px);
}
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--line2);
  background: var(--panel);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
}
.hero {
  min-height: calc(100svh - var(--header));
  display: flex;
  align-items: center;
  background:
    radial-gradient(
      circle at 92% 15%,
      rgba(239, 32, 40, 0.09),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 80%,
      rgba(239, 32, 40, 0.045),
      transparent 30%
    );
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 48px;
  align-items: center;
  padding-block: 38px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.eyebrow > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(239, 32, 40, 0.08);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  max-width: 780px;
  margin: 18px 0 18px;
  font-size: clamp(3.1rem, 5.3vw, 5.35rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
  font-weight: 800;
}
h1 em,
h2 em {
  font-style: normal;
  color: var(--red);
}
.hero-lead {
  max-width: 690px;
  color: #b4bbc4;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid transparent;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.btn span {
  font-size: 14px;
}
.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 24px rgba(239, 32, 40, 0.16);
}
.btn-primary:hover {
  background: var(--red2);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(239, 32, 40, 0.22);
}
.btn-secondary {
  background: transparent;
  color: #f3f4f6;
  border-color: var(--line2);
}
.btn-secondary:hover {
  border-color: #555e6b;
  background: rgba(255, 255, 255, 0.035);
  transform: translateY(-2px);
}
.hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
  max-width: 730px;
}
.hero-points > div {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 9px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: rgba(13, 17, 23, 0.72);
  border-radius: 11px;
}
.point-icon {
  grid-row: 1 / span 2;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 32, 40, 0.55);
  border-radius: 50%;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
}
.hero-points strong {
  font-size: 11px;
  line-height: 1.2;
}
.hero-points small {
  color: #737d89;
  font-size: 10px;
  line-height: 1.3;
  margin-top: 2px;
}
.hero-visual {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
}
.visual-frame {
  position: relative;
  width: min(100%, 510px);
  aspect-ratio: 1.25;
  border: 1px solid #252d38;
  border-radius: 18px;
  background: linear-gradient(150deg, #10151c, #080b10);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: perspective(900px) rotateY(-5deg);
}
.visual-frame::before {
  content: "";
  position: absolute;
  inset: 14% 9%;
  border: 1px solid rgba(239, 32, 40, 0.16);
  border-radius: 13px;
}
.visual-top {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 15px;
  border-bottom: 1px solid var(--line);
  color: #5c6672;
  font-size: 10px;
}
.visual-top span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a424d;
}
.visual-top b {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
}
.visual-code {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 38%;
  display: grid;
  gap: 14px;
}
.visual-code i {
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--red) 0 45%, #27303b 45% 100%);
  display: block;
}
.visual-code i:nth-child(2) {
  width: 86%;
}
.visual-code i:nth-child(3) {
  width: 72%;
}
.visual-code i:nth-child(4) {
  width: 94%;
}
.visual-code i:nth-child(5) {
  width: 62%;
}
.visual-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #303846;
  background: #10151d;
  border-radius: 11px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  font-size: 15px;
  color: var(--red);
  font-weight: 800;
}
.visual-chip span {
  color: #d4d8de;
  font-size: 11px;
  font-weight: 700;
}
.chip-one {
  left: 0;
  top: 21%;
}
.chip-two {
  right: 0;
  top: 34%;
}
.chip-three {
  left: 9%;
  bottom: 10%;
}
.quick-bar {
  padding: 0 0 8px;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0b0f15;
  overflow: hidden;
}
.quick-grid div {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-right: 1px solid var(--line);
}
.quick-grid div:last-child {
  border-right: 0;
}
.quick-grid strong {
  font-size: 20px;
  letter-spacing: -0.04em;
}
.quick-grid span {
  color: #7f8995;
  font-size: 11px;
}
.section {
  padding-block: clamp(76px, 8vw, 112px);
  scroll-margin-top: calc(var(--header) + 12px);
}
.section-alt {
  background: #090c11;
  border-block: 1px solid rgba(255, 255, 255, 0.025);
}
.section-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 80px;
  align-items: start;
}
.section-title h2,
.section-heading h2,
.contact-grid h2,
.cta-panel h2 {
  margin: 16px 0 0;
  font-size: clamp(2.2rem, 3.8vw, 3.8rem);
  line-height: 1.03;
  letter-spacing: -0.055em;
}
.section-content {
  padding-top: 2px;
}
.section-content p,
.section-heading > p,
.contact-intro,
.cta-panel p {
  color: #9da6b1;
  font-size: 15px;
  line-height: 1.8;
}
.section-content p {
  max-width: 700px;
}
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 22px;
}
.feature-list span {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0c1016;
  color: #d5d9df;
  font-size: 12px;
  font-weight: 600;
}
.feature-list span::first-letter {
  color: var(--red);
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 32px;
}
.section-heading > p {
  margin: 0;
  max-width: 430px;
  justify-self: end;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.service-card {
  min-height: 218px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #0d1117, #0a0e13);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: #3b4654;
  background: #0f141b;
}
.service-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(239, 32, 40, 0.35);
  background: rgba(239, 32, 40, 0.06);
  color: var(--red);
}
.service-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-number {
  color: #4f5965;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.service-card h3 {
  font-size: 17px;
  line-height: 1.25;
  margin: 24px 0 8px;
  letter-spacing: -0.02em;
}
.service-card p {
  margin: 0;
  color: #858f9b;
  font-size: 12px;
  line-height: 1.7;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.process-card {
  min-height: 205px;
  padding: 22px 24px;
  background: #0b0f14;
  border-right: 1px solid var(--line);
}
.process-card:last-child {
  border-right: 0;
}
.process-card > span,
.value-grid > article > span {
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.process-card h3 {
  margin: 32px 0 8px;
  font-size: 19px;
}
.process-card p,
.value-grid p {
  margin: 0;
  color: #858f9b;
  font-size: 12px;
  line-height: 1.7;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.value-grid article {
  min-height: 170px;
  padding: 22px 24px;
  background: #0b0f14;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease;
}
.value-grid article:hover {
  background: #0f141b;
}
.value-grid h3 {
  font-size: 17px;
  margin: 17px 0 7px;
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.tech-card {
  min-height: 96px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #0d1117;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: end;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}
.tech-card:hover {
  border-color: #3b4654;
  transform: translateY(-2px);
}
.tech-card > span {
  grid-row: 1 / span 2;
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  align-self: start;
}
.tech-card strong {
  font-size: 15px;
}
.tech-card small {
  color: #69737f;
  font-size: 10px;
}
.cta-section {
  padding-top: 0;
}
.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 36px 42px;
  border: 1px solid rgba(239, 32, 40, 0.25);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(239, 32, 40, 0.12),
      transparent 32%
    ),
    #0c1016;
}
.cta-panel h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  margin-top: 12px;
}
.cta-panel p {
  margin: 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: start;
}
.contact-intro {
  max-width: 570px;
  margin: 18px 0 0;
}
.contact-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}
.contact-details a,
.contact-details div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0c1016;
}
.contact-details small {
  display: block;
  color: #68727e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  margin-bottom: 4px;
}
.contact-details strong {
  font-size: 13px;
}
.contact-form {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #0c1016;
}
.contact-form label {
  display: block;
  color: #d3d7dd;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 15px;
}
.contact-form label span {
  color: #66707c;
  font-weight: 500;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: 7px;
  border: 1px solid #29313c;
  background: #080b10;
  color: #fff;
  border-radius: 9px;
  padding: 12px 13px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(239, 32, 40, 0.75);
  box-shadow: 0 0 0 3px rgba(239, 32, 40, 0.1);
}
.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}
.contact-form .btn {
  width: 100%;
}
.form-note {
  margin: 10px 0 0;
  color: #626d79;
  font-size: 10px;
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.site-footer {
  padding-top: 56px;
  background: #06080b;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.75fr 1fr;
  gap: 60px;
  padding-bottom: 46px;
}
.footer-logo img {
  width: 165px;
}
.footer-grid > div > p {
  max-width: 310px;
  margin: 16px 0 0;
  color: #7d8792;
  font-size: 12px;
  line-height: 1.7;
}
.footer-grid h3 {
  margin: 0 0 14px;
  color: #68727e;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.footer-grid > div > a {
  display: block;
  color: #aab2bc;
  font-size: 12px;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}
.footer-grid > div > a:hover {
  color: #fff;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 17px;
  border-top: 1px solid var(--line);
  color: #5f6874;
  font-size: 10px;
}
.footer-bottom a {
  color: #929aa5;
}
.reveal {
  opacity: 1;
}
.section:target {
  outline: none;
}
@media (max-width: 1050px) {
  :root {
    --header: 72px;
  }
  .container {
    width: min(calc(100% - 40px), var(--max));
  }
  .primary-nav > a:not(.nav-cta) {
    padding-inline: 9px;
  }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
    gap: 30px;
    padding-block: 30px;
  }
  .hero-visual {
    min-height: 300px;
  }
  .hero h1 {
    font-size: clamp(2.9rem, 5.6vw, 4.4rem);
  }
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .process-card:nth-child(2) {
    border-right: 0;
  }
  .process-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .value-grid article:nth-child(2n) {
    border-right: 0;
  }
  .tech-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .section-row {
    gap: 50px;
  }
  .contact-grid {
    gap: 50px;
  }
  .footer-grid {
    gap: 35px;
  }
}
@media (max-width: 900px) {
  .menu-toggle {
    display: block;
  }
  .primary-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    padding: 8px;
    border: 1px solid var(--line2);
    border-radius: 13px;
    background: rgba(9, 12, 17, 0.99);
    box-shadow: var(--shadow);
  }
  .primary-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .primary-nav > a:not(.nav-cta) {
    padding: 12px 13px;
  }
  .primary-nav > a:not(.nav-cta)::after {
    left: 13px;
    right: auto;
    width: 28px;
    bottom: 5px;
  }
  .nav-cta {
    margin: 4px 0 0;
    text-align: center;
  }
  .hero {
    min-height: auto;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    padding-block: 52px 30px;
  }
  .hero h1 {
    max-width: 760px;
  }
  .hero-visual {
    display: none;
  }
  .quick-grid {
    margin-bottom: 8px;
  }
  .section-row,
  .section-heading,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .section-heading {
    margin-bottom: 28px;
  }
  .section-heading > p {
    justify-self: start;
    max-width: 650px;
  }
  .section-title h2,
  .section-heading h2,
  .contact-grid h2 {
    max-width: 780px;
  }
  .footer-grid {
    grid-template-columns: 1.3fr 0.8fr 0.9fr;
  }
}
@media (max-width: 640px) {
  :root {
    --header: 66px;
  }
  .container {
    width: min(calc(100% - 28px), var(--max));
  }
  .nav-wrap {
    height: 66px;
  }
  .brand img {
    width: 154px;
  }
  .hero-inner {
    padding-block: 32px 22px;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: 0.15em;
  }
  .hero h1 {
    font-size: clamp(2.25rem, 10vw, 3.3rem);
    line-height: 1;
    letter-spacing: -0.06em;
    margin: 15px 0;
  }
  .hero-lead {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .btn {
    min-height: 45px;
    padding: 10px 12px;
    font-size: 12px;
  }
  .hero-points {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 17px;
  }
  .hero-points > div {
    grid-template-columns: 28px 1fr;
    padding: 10px;
  }
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 12px;
  }
  .quick-grid div {
    min-height: 64px;
    border-bottom: 1px solid var(--line);
  }
  .quick-grid div:nth-child(2) {
    border-right: 0;
  }
  .quick-grid div:nth-child(3),
  .quick-grid div:nth-child(4) {
    border-bottom: 0;
  }
  .quick-grid strong {
    font-size: 18px;
  }
  .quick-grid span {
    font-size: 9px;
  }
  .section {
    padding-block: 70px;
  }
  .section-title h2,
  .section-heading h2,
  .contact-grid h2 {
    font-size: clamp(2rem, 9vw, 2.7rem);
  }
  .section-content p,
  .section-heading > p,
  .contact-intro,
  .cta-panel p {
    font-size: 14px;
    line-height: 1.7;
  }
  .feature-list {
    grid-template-columns: 1fr;
  }
  .service-grid,
  .process-grid,
  .value-grid,
  .tech-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    min-height: 190px;
  }
  .process-card {
    min-height: 165px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .process-card:last-child {
    border-bottom: 0 !important;
  }
  .value-grid {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .value-grid article {
    min-height: 145px;
    border-right: 0;
  }
  .tech-card {
    min-height: 82px;
  }
  .cta-panel {
    align-items: flex-start;
    flex-direction: column;
    padding: 28px 22px;
  }
  .cta-panel .btn {
    width: 100%;
  }
  .contact-details {
    grid-template-columns: 1fr;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .contact-form {
    padding: 19px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-bottom {
    flex-direction: column;
  }
  .footer-logo img {
    width: 154px;
  }
}
@media (max-width: 390px) {
  .hero-inner {
    padding-block: 24px 16px;
  }
  .hero h1 {
    font-size: clamp(2rem, 9.2vw, 2.35rem);
    margin: 12px 0;
  }
  .hero-lead {
    font-size: 12.5px;
    line-height: 1.42;
    margin-bottom: 14px;
  }
  .hero-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .btn {
    min-height: 42px;
    padding: 9px 8px;
    font-size: 11px;
  }
  .hero-points {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 13px;
  }
  .hero-points > div {
    padding: 8px;
  }
  .hero-points > div:last-child {
    grid-column: 1/-1;
  }
  .hero-points small {
    font-size: 8px;
  }
  .container {
    width: min(calc(100% - 24px), var(--max));
  }
}
@media (max-height: 720px) and (min-width: 641px) {
  .hero-inner {
    padding-block: 24px;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 5vw, 4.3rem);
    margin: 14px 0;
  }
  .hero-lead {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .hero-points {
    margin-top: 16px;
  }
  .hero-visual {
    min-height: 280px;
  }
  .visual-frame {
    max-width: 440px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .primary-nav > a,
  .btn,
  .service-card,
  .tech-card {
    transition: none;
  }
}

/* =========================================================
   TECHIRAY PRECISION REFINEMENT — preserves approved design
   ========================================================= */
:root {
  --header: 76px;
  --section-gap: clamp(82px, 8vw, 116px);
}
html {
  scroll-padding-top: var(--header);
}
body {
  min-width: 320px;
}

/* First-load experience */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: #07090d;
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-mark {
  position: relative;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
}
.loader-mark::before,
.loader-mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  border: 1px solid rgba(239, 32, 40, 0.24);
}
.loader-mark::after {
  inset: 7px;
  border-color: rgba(255, 255, 255, 0.08);
  border-top-color: var(--red);
  animation: loader-spin 1.1s linear infinite;
}
.loader-mark span {
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  border: 1px solid rgba(239, 32, 40, 0.12);
}
.loader-mark img {
  position: relative;
  width: 82px;
  height: auto;
}
@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Navigation: one clear active state */
.primary-nav > a:not(.nav-cta) {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.primary-nav > a:not(.nav-cta):focus-visible,
.nav-cta:focus-visible,
.btn:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Home: content stays within the first viewport */
.hero {
  min-height: calc(100dvh - var(--header));
  overflow: hidden;
}
.hero-inner {
  min-height: calc(100dvh - var(--header));
  padding-block: clamp(24px, 4vh, 42px);
  position: relative;
}
.hero-copy {
  min-width: 0;
}
.hero h1 {
  max-width: 720px;
}
.hero-lead {
  max-width: 650px;
}
.hero-visual {
  min-width: 0;
}

/* Anchor targets align exactly below sticky header */
.section {
  scroll-margin-top: var(--header);
}

/* Standard section introduction: label -> heading -> description -> cards */
.section-heading {
  display: block;
  margin: 0 0 30px;
  max-width: 900px;
}
.section-heading > div {
  max-width: 900px;
}
.section-heading .eyebrow {
  margin-bottom: 12px;
}
.section-heading h2 {
  margin: 0;
  max-width: 900px;
}
.section-heading > div > p,
.section-heading > p {
  margin: 14px 0 0;
  max-width: 720px;
}
.section-heading > p {
  justify-self: auto;
}

/* One shared card language across the page */
.standard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.standard-card {
  min-height: 214px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #0d1117, #0a0e13);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}
.standard-card:hover {
  transform: translateY(-3px);
  border-color: #3b4654;
  background: #0f141b;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(239, 32, 40, 0.35);
  background: rgba(239, 32, 40, 0.06);
  color: var(--red);
  flex: none;
}
.card-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-number {
  color: #4f5965;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.standard-card h3 {
  font-size: 17px;
  line-height: 1.25;
  margin: 24px 0 8px;
  letter-spacing: -0.02em;
}
.standard-card p {
  margin: 0;
  color: #858f9b;
  font-size: 12px;
  line-height: 1.7;
}

/* About / service / process / why / technology grids keep the same visual rhythm */
.about-grid,
.service-grid,
.process-grid,
.value-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.value-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tech-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.about-grid .standard-card {
  min-height: 205px;
}
.process-grid .standard-card {
  min-height: 205px;
}
.value-grid .standard-card {
  min-height: 198px;
}
.tech-grid .standard-card {
  min-height: 170px;
}
.tech-grid .standard-card p {
  color: #69737f;
}

/* CTA has its own breathing room; it never touches a divider */
.cta-section {
  padding-block: var(--section-gap);
}
.cta-panel {
  min-height: 164px;
  align-items: center;
}

/* Footer remains intentionally lean */
.footer-grid {
  grid-template-columns: 1.45fr 0.75fr 1fr;
}

/* Short laptop screens: compress without clipping the hero */
@media (max-height: 760px) and (min-width: 901px) {
  .hero-inner {
    padding-block: 20px;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 5vw, 4.45rem);
    margin: 14px 0;
  }
  .hero-lead {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 17px;
  }
  .hero-points {
    margin-top: 16px;
  }
  .hero-visual {
    min-height: 300px;
  }
  .visual-frame {
    max-width: 455px;
  }
}

@media (max-width: 1050px) {
  .standard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tech-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --header: 66px;
  }
  .hero {
    min-height: calc(100dvh - var(--header));
  }
  .hero-inner {
    min-height: calc(100dvh - var(--header));
    padding-block: 28px 24px;
  }
  .hero-visual {
    display: none;
  }
  .hero h1 {
    max-width: 760px;
  }
  .hero-lead {
    max-width: 700px;
  }
  .section {
    padding-block: var(--section-gap);
  }
  .standard-grid,
  .about-grid,
  .service-grid,
  .process-grid,
  .value-grid,
  .tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .section-heading {
    max-width: 760px;
    margin-bottom: 28px;
  }
  .footer-grid {
    grid-template-columns: 1.25fr 0.85fr 0.95fr;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }
  .hero-inner {
    padding-block: 24px 18px;
  }
  .hero h1 {
    font-size: clamp(2.18rem, 9.8vw, 3.2rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
    margin: 13px 0 14px;
  }
  .hero-lead {
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 17px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hero-points {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 16px;
  }
  .hero-points > div {
    padding: 9px 10px;
  }
  .hero-points > div:last-child {
    grid-column: 1/-1;
  }
  .quick-grid {
    margin-bottom: 0;
  }
  .section-heading .eyebrow {
    margin-bottom: 10px;
  }
  .section-heading h2 {
    font-size: clamp(2rem, 8.8vw, 2.7rem);
    line-height: 1.02;
  }
  .section-heading > div > p,
  .section-heading > p {
    font-size: 13.5px;
    line-height: 1.65;
    margin-top: 12px;
  }
  .standard-grid,
  .about-grid,
  .service-grid,
  .process-grid,
  .value-grid,
  .tech-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .standard-card,
  .about-grid .standard-card,
  .service-grid .standard-card,
  .process-grid .standard-card,
  .value-grid .standard-card,
  .tech-grid .standard-card {
    min-height: 0;
    padding: 18px;
  }
  .standard-card h3 {
    margin-top: 20px;
  }
  .cta-panel {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
    gap: 22px;
  }
  .cta-panel .btn {
    width: 100%;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 390px) {
  .container {
    width: min(calc(100% - 24px), var(--max));
  }
  .hero-inner {
    padding-block: 20px 14px;
  }
  .hero h1 {
    font-size: clamp(2rem, 9.5vw, 2.28rem);
    margin: 11px 0 12px;
  }
  .hero-lead {
    font-size: 12.2px;
    line-height: 1.42;
    margin-bottom: 13px;
  }
  .hero-actions {
    gap: 6px;
  }
  .btn {
    min-height: 42px;
    padding: 9px 8px;
    font-size: 11px;
  }
  .hero-points {
    margin-top: 12px;
    gap: 6px;
  }
  .hero-points > div {
    padding: 8px;
  }
  .hero-points strong {
    font-size: 10px;
  }
  .hero-points small {
    font-size: 8px;
  }
  .section-heading h2 {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    transition: none;
  }
  .loader-mark::after {
    animation: none;
  }
  .standard-card,
  .primary-nav > a,
  .btn {
    transition: none;
  }
}

/* =========================================================
   PRECISION PASS 2 — preserve approved visual language
   ========================================================= */
/* Keep the page visually continuous: section backgrounds vary only subtly. */
.section,
.section-alt {
  background: var(--bg);
  position: relative;
}
.section-alt {
  border-block: 1px solid rgba(255, 255, 255, 0.035);
}
.section:not(#about):not(#services)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 92% 10%,
    rgba(239, 32, 40, 0.035),
    transparent 28%
  );
}
.section-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 8% 18%,
    rgba(239, 32, 40, 0.028),
    transparent 25%
  );
}
.section > .container {
  position: relative;
  z-index: 1;
}

/* Section introductions: compact, single-line-friendly, then a short supporting line. */
.section-heading {
  margin-bottom: 26px;
  max-width: 100%;
}
.section-heading .eyebrow {
  margin-bottom: 9px;
}
.section-heading h2 {
  font-size: clamp(1.72rem, 2.45vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-heading > div > p,
.section-heading > p {
  margin-top: 9px;
  max-width: 760px;
  color: #8f99a5;
  font-size: 13px;
  line-height: 1.55;
}

/* Every thumbnail follows the service-card language: icon/number -> title -> text. */
.standard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.standard-card,
.process-grid .standard-card,
.value-grid .standard-card {
  min-height: 214px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #0d1117, #0a0e13);
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}
.standard-card:hover {
  transform: translateY(-3px);
  border-color: #3b4654;
  background: #0f141b;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}
.card-top {
  position: relative;
  z-index: 2;
}
.standard-card h3 {
  margin: 20px 0 8px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.standard-card p {
  margin: 0;
  color: #858f9b;
  font-size: 12px;
  line-height: 1.65;
}

/* Remove nested outer boxes that were visually covering process/why cards. */
.process-grid,
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.process-grid .standard-card,
.value-grid .standard-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 214px;
}
.process-grid .standard-card:last-child,
.value-grid .standard-card:last-child {
  border-right: 1px solid var(--line);
}

/* About/service/why/technology grids share the same compact rhythm. */
.about-grid,
.service-grid,
.process-grid,
.value-grid,
.tech-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.about-grid .standard-card,
.service-grid .standard-card,
.process-grid .standard-card,
.value-grid .standard-card,
.tech-grid .standard-card {
  min-height: 214px;
}

/* CTA is centered within its own section, with generous but controlled breathing room. */
.cta-section {
  padding-block: clamp(68px, 7vw, 96px);
}
.cta-panel {
  min-height: 164px;
}

/* Make the stats strip feel connected to the hero instead of a separate page band. */
.quick-bar {
  padding-block: 8px 0;
  background: var(--bg);
}
.quick-grid {
  background: #0a0e13;
}

/* Mobile: headings may wrap only when the viewport genuinely requires it. */
@media (max-width: 900px) {
  .section-heading h2 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(1.75rem, 4.2vw, 2.35rem);
  }
  .standard-grid,
  .about-grid,
  .service-grid,
  .process-grid,
  .value-grid,
  .tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .section-heading h2 {
    font-size: clamp(1.7rem, 7.6vw, 2.25rem);
    line-height: 1.08;
  }
  .section-heading > div > p,
  .section-heading > p {
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 100%;
  }
  .standard-grid,
  .about-grid,
  .service-grid,
  .process-grid,
  .value-grid,
  .tech-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .standard-card,
  .process-grid .standard-card,
  .value-grid .standard-card {
    min-height: 0;
    padding: 18px;
  }
  .standard-card h3 {
    margin-top: 18px;
  }
}

/* Hero links follow the same hierarchy as the header: service is a simple link; contact is outlined. */
.hero-service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 0;
  color: #aeb5bf;
  font-size: 13px;
  font-weight: 700;
  position: relative;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.hero-service-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 18px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.hero-service-link:hover {
  color: #fff;
  transform: translateY(-1px);
}
.hero-service-link:hover::after {
  transform: scaleX(1);
}
.btn-outline-contact {
  background: transparent;
  color: #f3f4f6;
  border-color: rgba(239, 32, 40, 0.75);
  box-shadow: none;
}
.btn-outline-contact:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(239, 32, 40, 0.16);
}
@media (max-width: 640px) {
  .hero-service-link,
  .btn-outline-contact {
    min-height: 44px;
  }
  .hero-service-link {
    justify-content: center;
  }
}

/* Controlled section rhythm: enough separation without creating unexplained dead space. */
:root {
  --section-gap: clamp(64px, 6vw, 88px);
}

/* FINAL PRECISION PASS: independent cards, clean grids, correct hero links and continuous background */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.process-grid .standard-card {
  min-height: 214px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.value-grid .standard-card {
  min-height: 214px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.about-grid .standard-card,
.service-grid .standard-card,
.process-grid .standard-card,
.value-grid .standard-card,
.tech-grid .standard-card {
  border: 1px solid var(--line);
  border-radius: 14px;
}
.quick-bar {
  padding: 0;
  background: transparent;
  border: 0;
}
.quick-grid {
  margin-top: -1px;
  background: rgba(10, 14, 19, 0.72);
  box-shadow: none;
}
.hero-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 13px;
  color: #aeb5bf;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.hero-nav-link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.hero-nav-link:hover,
.hero-nav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
}
.hero-nav-link:hover::after,
.hero-nav-link:focus-visible::after {
  transform: scaleX(1);
}
.hero-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 17px;
  border: 1px solid rgba(239, 32, 40, 0.75);
  border-radius: 11px;
  color: #f3f4f6;
  font-size: 12px;
  font-weight: 800;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}
.hero-contact-link:hover,
.hero-contact-link:focus-visible {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-1px);
}
.section-alt {
  background: var(--bg);
  border-block: 1px solid rgba(255, 255, 255, 0.025);
}
@media (max-width: 1050px) {
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .process-grid,
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .process-grid,
  .value-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-nav-link,
  .hero-contact-link {
    min-height: 44px;
  }
}

/* FINAL PRECISION PASS: independent cards, clean grids, correct hero links and continuous background */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.process-grid .standard-card {
  min-height: 214px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.value-grid .standard-card {
  min-height: 214px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.about-grid .standard-card,
.service-grid .standard-card,
.process-grid .standard-card,
.value-grid .standard-card,
.tech-grid .standard-card {
  border: 1px solid var(--line);
  border-radius: 14px;
}
.quick-bar {
  padding: 0;
  background: transparent;
  border: 0;
}
.quick-grid {
  margin-top: -1px;
  background: rgba(10, 14, 19, 0.72);
  box-shadow: none;
}
.hero-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 13px;
  color: #aeb5bf;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.hero-nav-link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.hero-nav-link:hover,
.hero-nav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
}
.hero-nav-link:hover::after,
.hero-nav-link:focus-visible::after {
  transform: scaleX(1);
}
.hero-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 17px;
  border: 1px solid rgba(239, 32, 40, 0.75);
  border-radius: 11px;
  color: #f3f4f6;
  font-size: 12px;
  font-weight: 800;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}
.hero-contact-link:hover,
.hero-contact-link:focus-visible {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-1px);
}
.section-alt {
  background: var(--bg);
  border-block: 1px solid rgba(255, 255, 255, 0.025);
}
@media (max-width: 1050px) {
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .process-grid,
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .process-grid,
  .value-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-nav-link,
  .hero-contact-link {
    min-height: 44px;
  }
}

/* Stats are a continuation of Home, not a separate section: no panel background or rounded outer box. */
.quick-bar {
  padding: 0;
  border: 0;
  background: var(--bg);
}
.quick-grid {
  border: 0;
  border-block: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.quick-grid div {
  min-height: 68px;
}
.quick-grid div:last-child {
  border-right: 0;
}

/* Keep desktop section titles compact and single-line where the viewport permits. */
.section-heading h2 {
  font-size: clamp(1.72rem, 2.15vw, 2.25rem);
  line-height: 1.08;
}
.section-heading > div > p,
.section-heading > p {
  max-width: 680px;
}
@media (max-width: 1050px) and (min-width: 901px) {
  .section-heading h2 {
    font-size: 2rem;
  }
}

/* v4 precision fixes: mobile first-screen height, compact technology cards, clearer active navigation */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    display: block;
  }
  .hero-inner {
    min-height: auto;
    padding-block: 26px 20px;
  }
}
@media (max-width: 640px) {
  .hero-inner {
    padding-block: 24px 16px;
  }
  .hero-points {
    margin-top: 14px;
  }
  .quick-bar {
    padding: 0;
  }
  .quick-grid {
    margin: 0;
  }
}

/* Technology cards contain only a title + category, so they should not reserve service-card height. */
.tech-grid .standard-card {
  min-height: 150px;
}
.tech-grid .standard-card h3 {
  margin-top: 18px;
}
.tech-grid .standard-card p {
  margin-top: 0;
}
@media (max-width: 900px) {
  .tech-grid .standard-card {
    min-height: 140px;
  }
}
@media (max-width: 640px) {
  .tech-grid .standard-card {
    min-height: 0;
    padding: 18px;
  }
  .tech-grid .standard-card h3 {
    margin-top: 16px;
  }
}

/* Mobile active navigation: make the current section unmistakable without the desktop underline crowding the menu. */
@media (max-width: 900px) {
  .primary-nav > a:not(.nav-cta).active {
    color: #fff;
    background: transparent;
  }
  .primary-nav > a:not(.nav-cta).active::after {
    left: 13px;
    right: auto;
    width: 18px;
    bottom: 5px;
    transform: scaleX(1);
  }
  .primary-nav > a:not(.nav-cta):hover {
    background: rgba(255, 255, 255, 0.025);
  }
  .primary-nav > a:not(.nav-cta):hover::after {
    left: 13px;
    right: auto;
    width: 18px;
    transform: scaleX(1);
  }
}

/* FINAL HYBRID REFINEMENT: cards only where they add meaning. */
.about-editorial {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  column-gap: 72px;
  row-gap: 28px;
  align-items: start;
}
.about-intro h2 {
  margin: 14px 0 0;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
}
.about-copy {
  padding-top: 2px;
  color: #a1aab5;
  font-size: 14px;
  line-height: 1.8;
  max-width: 720px;
}
.about-copy p {
  margin: 0 0 14px;
}
.about-copy p:last-child {
  margin-bottom: 0;
}
.principle-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 6px;
}
.principle-row span {
  padding: 16px 18px;
  color: #d7dbe0;
  font-size: 12px;
  font-weight: 700;
  border-right: 1px solid var(--line);
}
.principle-row span:last-child {
  border-right: 0;
}
.principle-row span::first-letter {
  color: var(--red);
}
.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.process-steps::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 38px;
  height: 1px;
  background: rgba(239, 32, 40, 0.35);
  z-index: 0;
}
.process-steps article {
  position: relative;
  padding: 20px 24px 24px;
  border-right: 1px solid var(--line);
  min-height: 190px;
  background: transparent;
  z-index: 1;
}
.process-steps article:last-child {
  border-right: 0;
}
.step-no {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 32, 40, 0.7);
  border-radius: 50%;
  background: var(--bg);
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  position: relative;
  z-index: 2;
}
.process-steps h3 {
  margin: 26px 0 7px;
  font-size: 18px;
}
.process-steps p {
  margin: 0;
  color: #858f9b;
  font-size: 12px;
  line-height: 1.7;
  max-width: 210px;
}
.why-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-principles article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-principles article:nth-child(2n) {
  border-right: 0;
}
.why-principles article:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.why-principles > article > span {
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding-top: 3px;
}
.why-principles h3 {
  margin: 0 0 6px;
  font-size: 17px;
}
.why-principles p {
  margin: 0;
  color: #858f9b;
  font-size: 12px;
  line-height: 1.65;
}
.tech-groups {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.7fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tech-groups > div {
  padding: 22px 26px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.tech-groups > div:last-child {
  border-right: 0;
}
.tech-groups span {
  width: 100%;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}
.tech-groups strong {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1016;
  color: #dce0e5;
  font-size: 12px;
  font-weight: 700;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}
.tech-groups strong:hover {
  border-color: #4a5564;
  transform: translateY(-1px);
}
.floating-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.floating-whatsapp i {
  font-size: 34px;
  line-height: 1;
}
.floating-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
  .floating-whatsapp {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 16px;
  }

  .floating-whatsapp i {
    font-size: 30px;
  }

}
@media (max-width: 900px) {
  .about-editorial {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .principle-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .principle-row span:nth-child(2) {
    border-right: 0;
  }
  .principle-row span {
    border-bottom: 1px solid var(--line);
  }
  .principle-row span:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-steps::before {
    display: none;
  }
  .process-steps article:nth-child(2) {
    border-right: 0;
  }
  .process-steps article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .why-principles {
    grid-template-columns: 1fr;
  }
  .why-principles article,
  .why-principles article:nth-child(2n) {
    border-right: 0;
  }
  .why-principles article:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .why-principles article:last-child {
    border-bottom: 0;
  }
  .tech-groups {
    grid-template-columns: 1fr;
  }
  .tech-groups > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .tech-groups > div:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 640px) {
  .about-intro h2 {
    font-size: 2rem;
  }
  .principle-row {
    grid-template-columns: 1fr;
  }
  .principle-row span,
  .principle-row span:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .principle-row span:last-child {
    border-bottom: 0;
  }
  .process-steps {
    grid-template-columns: 1fr;
  }
  .process-steps article {
    border-right: 0;
    border-bottom: 1px solid var(--line) !important;
    min-height: 0;
    padding: 18px 18px 22px;
  }
  .process-steps article:last-child {
    border-bottom: 0 !important;
  }
  .process-steps h3 {
    margin-top: 18px;
  }
  .why-principles article {
    padding: 18px;
  }
  .tech-groups > div {
    padding: 18px;
  }
  .tech-groups strong {
    font-size: 11px;
    padding: 8px 10px;
  }
}

/* MOBILE FINAL FIX — hero trust points remain equal-sized; mobile nav active is a simple marker. */
@media (max-width: 640px) {
  .hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
  }
  .hero-points > div {
    min-width: 0;
    min-height: 64px;
    grid-template-columns: 22px 1fr;
    column-gap: 6px;
    padding: 8px 7px;
    border-radius: 9px;
  }
  .hero-points > div:last-child {
    grid-column: auto;
  }
  .point-icon {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  .hero-points strong {
    font-size: 9px;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .hero-points small {
    font-size: 7.5px;
    line-height: 1.2;
  }
}
@media (max-width: 390px) {
  .hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .hero-points > div {
    min-height: 60px;
    padding: 7px 5px;
    grid-template-columns: 20px 1fr;
    column-gap: 5px;
  }
  .point-icon {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }
  .hero-points strong {
    font-size: 8px;
  }
  .hero-points small {
    font-size: 7px;
  }
}

/* On touch/mobile navigation, active is intentionally understated: text + tiny red marker only. */
@media (max-width: 900px) {
  .primary-nav > a:not(.nav-cta) {
    position: relative;
    background: transparent !important;
    color: #aeb5bf;
    border-radius: 8px;
    justify-content: center;
  }
  .primary-nav > a:not(.nav-cta)::after {
    display: none !important;
  }
  .primary-nav > a:not(.nav-cta).active {
    color: #fff;
    background: transparent !important;
  }
  .primary-nav > a:not(.nav-cta).active::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px rgba(239, 32, 40, 0.08);
  }
  .primary-nav > a:not(.nav-cta):hover {
    background: rgba(255, 255, 255, 0.025) !important;
    color: #fff;
  }
  .primary-nav > a:not(.nav-cta):hover::before {
    display: none;
  }
  .primary-nav > a:not(.nav-cta):active {
    background: rgba(255, 255, 255, 0.035) !important;
  }
}

/* Precision pass: hero trust points and About principles */
.hero-points > div {
  align-items: start;
}
.hero-points .point-icon {
  grid-row: 1;
  align-self: start;
  margin-top: 1px;
}
.principle-row span {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: start;
}
.principle-icon {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1 / span 2;
  flex: 0 0 25px;
  border: 1px solid rgba(239, 32, 40, 0.55);
  border-radius: 50%;
  color: var(--red);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.principle-row b {
  grid-column: 2;
  grid-row: 1;
  color: #e1e4e8;
  font-size: 12px;
  line-height: 1.3;
}
.principle-row small {
  grid-column: 2;
  grid-row: 2;
  margin-top: 3px;
  color: #737d89;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 400;
}
@media (max-width: 640px) {
  .hero-points > div {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
  }
  .hero-points .point-icon {
    grid-row: 1;
    align-self: start;
  }
  .hero-points strong {
    white-space: normal;
    line-height: 1.15;
  }
  .hero-points small {
    display: block;
    grid-column: 2;
    min-width: 0;
  }
  .principle-row span {
    padding: 13px 14px;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 8px;
  }
  .principle-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 9px;
  }
  .principle-row b {
    font-size: 11px;
  }
  .principle-row small {
    font-size: 9px;
  }
}

/* =========================================================
   FINAL POLISH — restrained, responsive, section-specific
   ========================================================= */
.hero-points {
  gap: 18px;
  max-width: 760px;
  margin-top: 22px;
}
.hero-point {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.hero-point .point-icon {
  grid-row: 1 !important;
  align-self: start !important;
  margin-top: 1px !important;
  width: 24px;
  height: 24px;
}
.point-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero-point strong {
  font-size: 11px;
  line-height: 1.25;
}
.hero-point small {
  color: #737d89;
  font-size: 9px;
  line-height: 1.35;
  margin-top: 2px;
}
.hero-point + .hero-point {
  border-left: 1px solid var(--line) !important;
  padding-left: 18px !important;
}

/* About: keep the principle row light and editorial rather than card-like. */
.principle-row {
  background: transparent;
}
.principle-row span {
  font-size: 12px;
}

/* Why: one open, restrained 4-item information row — not thumbnails. */
.why-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-list article {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 13px;
  padding: 22px 20px;
  min-height: 132px;
  border-right: 1px solid var(--line);
}
.why-list article:last-child {
  border-right: 0;
}
.why-no {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding-top: 3px;
}
.why-list h3 {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.25;
}
.why-list p {
  margin: 0;
  color: #858f9b;
  font-size: 11.5px;
  line-height: 1.6;
}

/* =========================================================
   TECHNOLOGIES
   Responsive technology catalogue
   ========================================================= */

.tech-index {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.tech-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.tech-row:last-child {
  border-bottom: 0;
}

.tech-row > span {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding-top: 8px;
}

.tech-row > div {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tech-item {
  min-width: 0;
  min-height: 40px;

  display: flex;
  align-items: center;

  padding: 8px 12px;

  border: 1px solid var(--line2);
  border-radius: 6px;

  color: #d9dde3;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #0d1117, #0a0e13);
}

.tech-item:hover {
  transform: translateY(-1px);
  border-color: #3b4654;
  background: #0f141b;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

@media (max-width: 1050px) {
  .tech-row {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 18px;
  }

  .tech-row > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tech-row {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 16px 0;
  }

  .tech-row > span {
    padding-top: 0;
  }

  .tech-row > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .tech-item {
    min-height: 38px;
    padding: 8px 9px;
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  .tech-row > div {
    gap: 6px;
  }

  .tech-item {
    min-height: 36px;
    padding-inline: 8px;
    font-size: 10.5px;
  }
}

/* Section rhythm stays spacious but never creates a detached band. */
.section {
  padding-block: clamp(68px, 7vw, 98px);
}
.section-heading {
  margin-bottom: 24px;
}
.section-heading h2 {
  font-size: clamp(1.65rem, 2.3vw, 2.35rem);
  line-height: 1.08;
}
.section-heading > div > p,
.section-heading > p {
  font-size: 12.5px;
}

/* Mobile: keep the hero trust points equal, compact and top-aligned. */
@media (max-width: 900px) {
  .hero-points {
    gap: 10px;
  }
  .hero-point + .hero-point {
    padding-left: 10px !important;
  }
  .why-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .why-list article:nth-child(2) {
    border-right: 0;
  }
  .why-list article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .tech-row {
    grid-template-columns: 100px 1fr;
    gap: 18px;
  }
}
@media (max-width: 640px) {
  .hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 15px;
  }
  .hero-point {
    grid-template-columns: 21px minmax(0, 1fr) !important;
    column-gap: 5px !important;
  }
  .hero-point + .hero-point {
    padding-left: 6px !important;
  }
  .hero-point .point-icon {
    width: 21px;
    height: 21px;
    font-size: 9px;
  }
  .hero-point strong {
    font-size: 8.5px;
    line-height: 1.15;
  }
  .hero-point small {
    font-size: 7px;
    line-height: 1.2;
  }
  .why-list {
    grid-template-columns: 1fr;
  }
  .why-list article,
  .why-list article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .why-list article:last-child {
    border-bottom: 0;
  }
  .why-list article {
    min-height: 0;
    padding: 17px 14px;
  }
  .tech-row {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 16px 0;
  }
  .tech-row > div {
    row-gap: 8px;
  }
  .tech-row b {
    font-size: 11px;
    padding: 0 11px;
  }
  .tech-row b:first-child {
    padding-left: 0;
  }
  .section {
    padding-block: 58px;
  }
}
@media (max-width: 390px) {
  .hero-points {
    gap: 4px;
  }
  .hero-point + .hero-point {
    padding-left: 4px !important;
  }
  .hero-point strong {
    font-size: 8px;
  }
  .hero-point small {
    font-size: 6.6px;
  }
}

/* =========================================================
   REQUESTED UPDATES — hero, loader visibility, social links,
   Let's Talk placement and technology accordion.
   ========================================================= */

/* WhatsApp appears only after the first-load screen has finished. */
.floating-whatsapp {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
html.page-ready .floating-whatsapp {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Home/launch screen: use the supplied office image with a readable standard overlay. */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header));
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 12, 0.86) 0%,
      rgba(5, 8, 12, 0.7) 44%,
      rgba(5, 8, 12, 0.42) 100%
    ),
    linear-gradient(180deg, rgba(5, 8, 12, 0.28), rgba(5, 8, 12, 0.58)),
    url("../images/hero-bg.jpg") center center / cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle at 18% 40%,
    rgba(239, 32, 40, 0.1),
    transparent 34%
  );
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: block;
  min-height: calc(100svh - var(--header));
  padding-block: clamp(48px, 7vh, 82px);
}
.hero-copy {
  max-width: 900px;
  padding-block: 2vh;
}
.hero h1 {
  max-width: 900px;
  margin: 18px 0 18px;
  font-size: clamp(2.65rem, 4.6vw, 4.45rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.3);
}
.hero-lead {
  max-width: 720px;
  color: rgba(244, 245, 247, 0.86);
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.7;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
}
.hero-points > div {
  background: rgba(8, 11, 16, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}
.hero-point + .hero-point {
  border-left-color: rgba(255, 255, 255, 0.15) !important;
}
.hero-actions .hero-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.hero-actions .hero-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(8, 11, 16, 0.34);
  color: #f3f4f6;
  font-size: 13px;
  font-weight: 800;
}

/* Let's Talk is intentionally button-free and sits directly before Technologies. */
#lets-talk .cta-panel {
  min-height: 164px;
}
#lets-talk .cta-panel h2 {
  max-width: 760px;
}
#lets-talk .cta-panel p {
  max-width: 760px;
}

/* Contact social media */
.social-block {
  margin-top: 22px;
}
.social-block > small {
  display: block;
  margin-bottom: 9px;
  color: #68727e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0c1016;
  color: #aeb5bf;
  font-size: 11px;
  font-weight: 700;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.social-links a i {
  color: var(--red);
  font-size: 15px;
}
.social-links a:hover {
  color: #fff;
  border-color: #3b4654;
  transform: translateY(-1px);
}

/* Technology accordion: same content and rows, only an accessible control is added. */
.tech-row {
  position: relative;
}
.tech-toggle {
  position: absolute;
  top: 17px;
  right: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: #0c1016;
  color: #d9dde3;
  cursor: pointer;
  z-index: 2;
}
.tech-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.tech-icon-close {
  opacity: 0;
  transform: scale(0.82);
}
.tech-toggle[aria-expanded="true"] .tech-icon-plus {
  opacity: 0;
  transform: scale(0.82);
}
.tech-toggle[aria-expanded="true"] .tech-icon-close {
  opacity: 1;
  transform: scale(1);
}
.tech-toggle:hover {
  border-color: #4a5564;
  color: #fff;
}
.tech-row > div {
  padding-right: 48px;
  max-height: 1000px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    margin 0.28s ease;
}
.tech-row.is-collapsed > div {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.tech-row.is-collapsed {
  padding-bottom: 14px;
}

@media (max-width: 900px) {
  .hero {
    min-height: calc(100dvh - var(--header));
    background-position: 58% center;
  }
  .hero-inner {
    min-height: calc(100dvh - var(--header));
    padding-block: 38px 30px;
  }
  .hero-copy {
    max-width: 760px;
  }
  .hero h1 {
    font-size: clamp(2.5rem, 7vw, 4rem);
  }
  .tech-toggle {
    top: 15px;
  }
  .tech-row > div {
    padding-right: 46px;
  }
}

@media (max-width: 640px) {
  .hero {
    background:
      linear-gradient(
        90deg,
        rgba(5, 8, 12, 0.88) 0%,
        rgba(5, 8, 12, 0.72) 100%
      ),
      linear-gradient(180deg, rgba(5, 8, 12, 0.25), rgba(5, 8, 12, 0.6)),
      url("../images/hero-bg.jpg") 62% center / cover no-repeat;
  }
  .hero-inner {
    padding-block: 32px 24px;
  }
  .hero h1 {
    font-size: clamp(2.15rem, 10vw, 3.25rem);
    line-height: 1.01;
  }
  .hero-lead {
    font-size: 13.5px;
    line-height: 1.58;
  }
  .hero-actions {
    grid-template-columns: 1fr 1fr;
  }
  .hero-actions .hero-contact-link,
  .hero-actions .hero-nav-link {
    min-height: 44px;
    padding-inline: 12px;
    font-size: 11px;
  }
  .hero-points > div {
    padding: 8px !important;
  }
  .social-links a {
    flex: 1 1 calc(33.333% - 8px);
    justify-content: center;
    min-width: 0;
    padding-inline: 7px;
  }
  .social-links a span {
    font-size: 9px;
  }
  .tech-toggle {
    width: 32px;
    height: 32px;
    top: 14px;
  }
  .tech-row > div {
    padding-right: 42px;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: 2.05rem;
  }
  .hero-actions .hero-contact-link,
  .hero-actions .hero-nav-link {
    padding-inline: 8px;
    font-size: 10px;
  }
  .social-links a {
    flex-basis: 100%;
  }
}

/* =========================================================
   FINAL RESPONSIVE PASS — focused first viewport + accordion
   ========================================================= */

/* The landing viewport is intentionally minimal: only the primary message is shown. */
.hero {
  height: calc(100dvh - var(--header));
  min-height: calc(100dvh - var(--header));
  max-height: calc(100dvh - var(--header));
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 12, 0.78) 0%,
      rgba(5, 8, 12, 0.58) 48%,
      rgba(5, 8, 12, 0.38) 100%
    ),
    linear-gradient(180deg, rgba(5, 8, 12, 0.2), rgba(5, 8, 12, 0.56)),
    url("../images/hero-bg.jpg") center center / cover no-repeat;
}
.hero-inner {
  width: min(calc(100% - 48px), var(--max));
  min-height: 0;
  padding-block: 0;
  display: flex;
  align-items: center;
}
.hero-copy {
  max-width: 900px;
  padding: 0;
}
.hero h1 {
  max-width: 900px;
  margin: 18px 0 18px;
  font-size: clamp(2.7rem, 5.1vw, 5rem);
  line-height: 1.01;
  text-wrap: balance;
  text-shadow: 0 5px 30px rgba(0, 0, 0, 0.42);
}
.hero-lead {
  max-width: 720px;
  margin-bottom: 0;
  color: rgba(244, 245, 247, 0.88);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.7;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}
.hero::after {
  background: radial-gradient(
    circle at 18% 48%,
    rgba(239, 32, 40, 0.09),
    transparent 34%
  );
}

/* Technologies remain structurally unchanged; hover does not move technology items. */
.tech-item:hover,
.tech-groups strong:hover {
  transform: none;
}

/* Mobile navigation: use a full active item instead of a tiny dot marker. */
@media (max-width: 900px) {
  .primary-nav > a:not(.nav-cta) {
    min-height: 44px;
    padding: 11px 14px;
    justify-content: flex-start;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 9px;
  }
  .primary-nav > a:not(.nav-cta)::before,
  .primary-nav > a:not(.nav-cta).active::before,
  .primary-nav > a:not(.nav-cta).active::after {
    display: none !important;
  }
  .primary-nav > a:not(.nav-cta).active {
    color: #fff;
    background: rgba(239, 32, 40, 0.1) !important;
    border-color: rgba(239, 32, 40, 0.3);
    box-shadow: inset 3px 0 0 var(--red);
  }
  .primary-nav > a:not(.nav-cta):hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.035) !important;
  }
}

@media (max-width: 640px) {
  .hero {
    height: calc(100dvh - var(--header));
    min-height: calc(100dvh - var(--header));
    max-height: calc(100dvh - var(--header));
    background:
      linear-gradient(
        90deg,
        rgba(5, 8, 12, 0.78) 0%,
        rgba(5, 8, 12, 0.54) 100%
      ),
      linear-gradient(180deg, rgba(5, 8, 12, 0.18), rgba(5, 8, 12, 0.58)),
      url("../images/hero-bg.jpg") 62% center / cover no-repeat;
  }
  .hero-inner {
    width: min(calc(100% - 28px), var(--max));
  }
  .hero h1 {
    font-size: clamp(2.2rem, 10vw, 3.35rem);
    line-height: 1.02;
    margin: 14px 0 16px;
  }
  .hero-lead {
    max-width: 650px;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.6;
  }
  .hero-copy .eyebrow {
    font-size: 9px;
  }
}

@media (max-height: 680px) and (min-width: 641px) {
  .hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
  }
  .hero-lead {
    font-size: 14px;
  }
}

@media (max-height: 600px) and (max-width: 640px) {
  .hero h1 {
    font-size: clamp(1.95rem, 9vw, 2.7rem);
    margin-block: 10px 12px;
  }
  .hero-lead {
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* =========================================================
   FINAL REQUESTED PASS — hero CTAs, stable/smooth accordion,
   X social link, and Why/Let's Talk separator
   ========================================================= */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}
.hero-actions .hero-contact-link,
.hero-actions .hero-nav-link {
  flex: 0 0 auto;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.hero-actions .hero-contact-link {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.hero-actions .hero-contact-link:hover,
.hero-actions .hero-contact-link:focus-visible {
  background: var(--red2);
}
.hero-actions .hero-nav-link {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 11, 16, 0.34);
  color: #f3f4f6;
}
.hero-actions .hero-nav-link:hover,
.hero-actions .hero-nav-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(8, 11, 16, 0.54);
}

/* Keep a consistent header footprint for every technology row. The content
   expands inside the row; collapsed rows do not alter separator spacing. */
.tech-row {
  min-height: 72px;
  padding-block: 18px;
  transition: background-color 0.2s ease;
}
.tech-row.is-collapsed {
  padding-bottom: 18px;
}
.tech-row > div {
  max-height: 1200px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease;
  will-change: max-height, opacity;
}
.tech-row.is-collapsed > div {
  max-height: 0;
  opacity: 0;
}
.tech-toggle {
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

/* A clear section divider between Why TECHIRAY and Let's Talk. */
#lets-talk {
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .hero-actions {
    width: 100%;
    gap: 8px;
    margin-top: 20px;
  }
  .hero-actions .hero-contact-link,
  .hero-actions .hero-nav-link {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding-inline: 10px;
    font-size: 11px;
  }
  .tech-row {
    min-height: 68px;
    padding-block: 16px;
  }
  .tech-row.is-collapsed {
    padding-bottom: 16px;
  }
}

@media (max-width: 390px) {
  .hero-actions .hero-contact-link,
  .hero-actions .hero-nav-link {
    font-size: 10px;
    padding-inline: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-row > div,
  .tech-toggle,
  .hero-actions .hero-contact-link,
  .hero-actions .hero-nav-link {
    transition: none;
  }
}

/* =========================================================
   MOBILE HERO REFINEMENT — intentional mobile composition
   ========================================================= */
@media (max-width: 640px) {
  :root {
    --header: 64px;
  }

  .nav-wrap {
    height: var(--header);
    gap: 12px;
  }

  .brand img {
    width: clamp(132px, 38vw, 160px);
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
    padding: 8px;
  }

  .hero {
    height: calc(100dvh - var(--header));
    min-height: calc(100dvh - var(--header));
    max-height: calc(100dvh - var(--header));
    background:
      linear-gradient(90deg, rgba(5, 8, 12, 0.9) 0%, rgba(5, 8, 12, 0.74) 100%),
      linear-gradient(180deg, rgba(5, 8, 12, 0.24), rgba(5, 8, 12, 0.62)),
      url("../images/hero-bg.jpg") 62% center / cover no-repeat;
  }

  .hero-inner {
    width: min(calc(100% - 32px), 520px);
    min-height: calc(100dvh - var(--header));
    padding: 24px 0;
    display: flex;
    align-items: center;
  }

  .hero-copy {
    width: 100%;
    max-width: 520px;
    padding: 0;
  }

  .hero-copy .eyebrow {
    font-size: clamp(8px, 2.2vw, 10px);
    letter-spacing: 0.15em;
    gap: 8px;
  }

  .hero-copy .eyebrow > span {
    width: 6px;
    height: 6px;
  }

  .hero h1 {
    max-width: 510px;
    margin: 15px 0 17px;
    font-size: clamp(2.35rem, 10.8vw, 3.35rem);
    line-height: 0.99;
    letter-spacing: -0.058em;
  }

  .hero-lead {
    max-width: 510px;
    margin-bottom: 0;
    font-size: clamp(13.5px, 3.45vw, 15px);
    line-height: 1.55;
  }

  .hero-actions {
    width: 100%;
    margin-top: 22px;
    gap: 10px;
  }

  .hero-actions .hero-contact-link,
  .hero-actions .hero-nav-link {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: clamp(11px, 2.9vw, 13px);
    white-space: nowrap;
  }

  /* The landing screen contains only the intended hero content. */
  .hero-points,
  .hero-visual {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .hero-inner {
    width: min(calc(100% - 26px), 520px);
    padding-block: 20px;
  }

  .hero h1 {
    font-size: clamp(2.05rem, 10.7vw, 2.65rem);
    margin-block: 13px 14px;
  }

  .hero-lead {
    font-size: 13px;
    line-height: 1.5;
  }

  .hero-actions {
    gap: 7px;
    margin-top: 18px;
  }

  .hero-actions .hero-contact-link,
  .hero-actions .hero-nav-link {
    min-height: 46px;
    padding-inline: 8px;
    font-size: 10.5px;
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  .hero-inner {
    padding-block: 16px;
  }

  .hero h1 {
    font-size: clamp(2rem, 9.8vw, 2.85rem);
    margin-block: 11px 13px;
  }

  .hero-lead {
    font-size: 12.5px;
    line-height: 1.48;
  }

  .hero-actions {
    margin-top: 16px;
  }
}

/* =========================================================
   V5 REQUESTED REFINEMENT — overlay, about image, unified
   section separators, improved stats, CTA, and responsive polish
   ========================================================= */

/* One consistent separator strategy across every content section. */
main > section {
  border-top: 1px solid rgba(255, 255, 255, 0.085);
  border-bottom: 0 !important;
}
main > .hero {
  border-top: 0;
}
main > .section-alt {
  border-block: 0 !important;
}

/* Stronger landing-screen readability without hiding the supplied image. */
.hero {
  background:
    linear-gradient(
      90deg,
      rgba(3, 5, 8, 0.94) 0%,
      rgba(3, 5, 8, 0.88) 46%,
      rgba(3, 5, 8, 0.76) 100%
    ),
    linear-gradient(180deg, rgba(3, 5, 8, 0.6) 0%, rgba(3, 5, 8, 0.78) 100%),
    url("../images/hero-bg.jpg") center center / cover no-repeat;
}
.hero::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.24));
}

/* About visual replaces the old headline treatment. */
.about-image {
  margin: 22px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b0f14;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
  aspect-ratio: 600 / 402;
}
.about-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Better structured stats strip while preserving the requested four metrics. */
.quick-bar {
  padding: clamp(34px, 4vw, 54px) 0 0;
  background: var(--bg);
}
.quick-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.quick-heading p {
  margin: 0;
  max-width: 500px;
  color: #89939f;
  font-size: 13px;
  line-height: 1.6;
  text-align: right;
}
.quick-grid {
  margin: 0 !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.quick-grid .stat-item {
  min-height: 148px;
  padding: 24px 22px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quick-grid .stat-item:last-child {
  border-right: 0;
}
.quick-grid strong {
  display: block;
  color: #f4f5f7;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.quick-grid span {
  display: block;
  margin-top: 10px;
  color: #d8dde3;
  font-size: 13px;
  font-weight: 800;
}
.quick-grid small {
  display: block;
  margin-top: 7px;
  max-width: 210px;
  color: #68727e;
  font-size: 10.5px;
  line-height: 1.55;
}

/* CTA keeps the requested Let's Talk action inside the section. */
.cta-panel {
  align-items: center;
}
.cta-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Social label requested by the user: platform name only. */
.social-links a span {
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .quick-grid .stat-item {
    padding-inline: 18px;
  }
  .quick-grid small {
    max-width: 180px;
  }
}

@media (max-width: 900px) {
  .quick-heading {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .quick-heading p {
    text-align: left;
    max-width: 620px;
  }
  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-grid .stat-item:nth-child(2) {
    border-right: 0;
  }
  .quick-grid .stat-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .quick-grid .stat-item {
    min-height: 132px;
  }
  .cta-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .hero {
    background-position: center center;
    min-height: calc(100svh - var(--header));
  }
  .about-image {
    margin-top: 18px;
    border-radius: 12px;
  }
  .quick-bar {
    padding-top: 30px;
  }
  .quick-grid .stat-item {
    min-height: 118px;
    padding: 18px 14px;
  }
  .quick-grid strong {
    font-size: 1.8rem;
  }
  .quick-grid span {
    font-size: 11.5px;
    margin-top: 8px;
  }
  .quick-grid small {
    font-size: 9.5px;
    line-height: 1.45;
  }
  .cta-panel {
    padding: 26px 22px;
  }
  .cta-action {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .quick-grid .stat-item {
    min-height: 110px;
    padding: 16px 12px;
  }
  .quick-grid strong {
    font-size: 1.65rem;
  }
  .quick-grid small {
    font-size: 9px;
  }
}

/* =========================================================
   FINAL SECTION RHYTHM + ABOUT ALIGNMENT REFINEMENT
   ========================================================= */

/* One separator treatment for every top-level content section. */
main > section {
  border-top: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-bottom: 0 !important;
}
main > section.hero {
  border-top: 0 !important;
}
main > section.section-alt,
main > section.quick-bar {
  border-block: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.085) !important;
}

/* About: label sits above a two-column row; image and copy start on the same line. */
.about-editorial {
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 26px;
}
.about-section-label {
  grid-column: 1 / -1;
}
.about-image {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  width: 100%;
  align-self: start;
}
.about-copy {
  grid-column: 2;
  grid-row: 2;
  padding-top: 0;
  align-self: start;
}

@media (max-width: 760px) {
  .about-editorial {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .about-section-label,
  .about-image,
  .about-copy {
    grid-column: 1;
    grid-row: auto;
  }
  .about-image {
    margin: 0;
  }
  .about-copy {
    padding-top: 0;
  }
}

/* =========================================================
   RESPONSIVE POLISH — preserve existing desktop composition
   ========================================================= */
@media (max-width: 900px) {
  .container {
    width: min(calc(100% - 40px), var(--max));
  }
  .site-header {
    background: rgba(7, 9, 13, 0.97);
  }
  .primary-nav {
    left: 20px;
    right: 20px;
  }
  .primary-nav > a:not(.nav-cta) {
    font-size: 13px;
  }
  .section {
    padding-block: clamp(64px, 9vw, 88px);
  }
  .section-heading {
    gap: 14px;
    margin-bottom: 26px;
  }
  .service-grid {
    gap: 12px;
  }
  .standard-card {
    min-height: 180px;
  }
  .why-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-grid {
    gap: 36px;
  }
}

@media (max-width: 640px) {
  :root {
    --header: 64px;
  }
  .container {
    width: min(calc(100% - 28px), var(--max));
  }
  .nav-wrap {
    height: var(--header);
  }
  .brand img {
    width: clamp(128px, 37vw, 154px);
  }
  .menu-toggle {
    width: 40px;
    height: 40px;
  }

  /* Keep the hero full-screen without making the content tiny. */
  .hero,
  .hero-inner {
    height: calc(100dvh - var(--header));
    min-height: calc(100dvh - var(--header));
    max-height: none;
  }
  .hero {
    background-position: 62% center;
  }
  .hero-inner {
    width: min(calc(100% - 28px), 560px);
    padding: 18px 0 22px;
  }
  .hero-copy {
    max-width: 560px;
  }
  .hero-copy .eyebrow {
    font-size: clamp(8px, 2.2vw, 10px);
  }
  .hero h1 {
    font-size: clamp(2.35rem, 10.6vw, 3.45rem);
    line-height: 0.99;
    margin: 14px 0 16px;
  }
  .hero-lead {
    font-size: clamp(13.5px, 3.5vw, 15px);
    line-height: 1.52;
    max-width: 540px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 20px;
  }
  .hero-actions .hero-contact-link,
  .hero-actions .hero-nav-link {
    min-height: 48px;
    padding: 11px 10px;
    font-size: clamp(11px, 3vw, 13px);
  }

  .section {
    padding-block: 64px;
  }
  .section-heading {
    margin-bottom: 22px;
  }
  .section-heading h2,
  .contact-grid h2,
  .cta-panel h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.55rem);
    line-height: 1.04;
  }
  .section-heading > p,
  .section-content p,
  .contact-intro,
  .cta-panel p {
    font-size: 13.5px;
    line-height: 1.65;
  }

  .about-editorial {
    row-gap: 18px;
  }
  .about-image {
    border-radius: 12px;
  }
  .about-copy p {
    margin-bottom: 13px;
  }
  .principle-row {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .principle-row > span {
    min-width: 0;
    padding: 12px 9px;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .standard-card {
    min-height: 0;
    padding: 18px;
  }
  .standard-card h3 {
    font-size: 16px;
    margin-top: 18px;
  }
  .standard-card p {
    font-size: 11.5px;
    line-height: 1.6;
  }

  .why-list {
    grid-template-columns: 1fr;
  }
  .why-list article {
    padding: 15px 0;
  }
  .why-list article h3 {
    font-size: 14px;
  }
  .why-list article p {
    font-size: 11px;
    line-height: 1.6;
  }

  .cta-panel {
    padding: 24px 18px;
    gap: 18px;
  }
  .cta-action {
    width: 100%;
    min-height: 46px;
  }

  .tech-row {
    min-height: 64px;
    padding-block: 15px;
  }
  .tech-row > div {
    padding-right: 40px;
    gap: 7px;
  }
  .tech-item {
    min-height: 30px;
    padding: 7px 9px;
    font-size: 9.5px;
  }
  .tech-toggle {
    width: 32px;
    height: 32px;
    top: 15px;
  }

  .contact-grid {
    gap: 30px;
  }
  .contact-details {
    gap: 8px;
    margin-top: 20px;
  }
  .contact-details a,
  .contact-details div {
    padding: 12px;
  }
  .social-links {
    gap: 6px;
  }
  .social-links a {
    flex: 1 1 calc(50% - 6px);
    min-height: 40px;
    font-size: 10px;
  }
  .social-links a span {
    font-size: 10px;
  }
  .contact-form {
    padding: 16px;
    border-radius: 12px;
  }
  .contact-form input,
  .contact-form textarea {
    padding: 11px 12px;
  }
  .contact-form textarea {
    min-height: 120px;
  }

  .site-footer {
    padding-top: 44px;
  }
  .footer-grid {
    gap: 24px;
  }
  .footer-grid > div > a {
    font-size: 11px;
    margin-bottom: 7px;
  }
  .footer-grid > div > p {
    font-size: 11px;
  }
  .footer-bottom {
    gap: 10px;
    padding-block: 15px;
  }
}

@media (max-width: 380px) {
  .hero-inner {
    width: min(calc(100% - 24px), 560px);
  }
  .hero h1 {
    font-size: clamp(2.05rem, 10.4vw, 2.55rem);
    margin-block: 12px 14px;
  }
  .hero-lead {
    font-size: 12.5px;
    line-height: 1.48;
  }
  .hero-actions {
    gap: 7px;
    margin-top: 17px;
  }
  .hero-actions .hero-contact-link,
  .hero-actions .hero-nav-link {
    min-height: 46px;
    padding-inline: 7px;
    font-size: 10.5px;
  }
  .section {
    padding-block: 56px;
  }
  .principle-row {
    grid-template-columns: 1fr;
  }
  .social-links a {
    flex-basis: calc(50% - 6px);
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  .hero-inner {
    padding-block: 12px 16px;
  }
  .hero h1 {
    font-size: clamp(2rem, 9.8vw, 2.8rem);
    margin-block: 10px 12px;
  }
  .hero-lead {
    font-size: 12px;
    line-height: 1.45;
  }
  .hero-actions {
    margin-top: 14px;
  }
}

/* =========================================================
   V8 — WHY TECHIRAY EDITORIAL IMAGE + MOBILE HERO BALANCE
   ========================================================= */
.why-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.why-copy {
  color: #a1aab5;
  font-size: 14px;
  line-height: 1.8;
  max-width: 720px;
}
.why-copy p {
  margin: 0 0 15px;
}
.why-copy p:last-child {
  margin-bottom: 0;
}
.why-image {
  margin: 0;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b0f14;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
}
.why-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Keep the hero screen-fit while using the available vertical space more deliberately. */
@media (max-width: 640px) {
  .hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: clamp(12px, 2.5vh, 24px);
    padding-bottom: clamp(28px, 7vh, 64px);
  }
  .hero-copy {
    width: 100%;
  }
  .why-editorial {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 30px;
  }
  .why-image {
    order: 2;
    justify-self: stretch;
    max-width: none;
  }
  .why-copy {
    font-size: 13px;
    line-height: 1.68;
  }
}

/* =========================================================
   FINAL RESPONSIVE PASS — About / Why image consistency
   and mobile first-screen scroll affordance
   ========================================================= */
.about-editorial {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 64px);
  row-gap: clamp(20px, 3vw, 28px);
}

.about-image,
.why-image {
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b0f14;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
}

.about-image img,
.why-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.about-image {
  align-self: start;
}

.why-editorial {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.why-copy {
  max-width: 680px;
}

.mobile-scroll-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  position: absolute;
  left: 0;
  bottom: clamp(34px, 6vh, 52px);
  padding: 0;
  color: rgba(225, 230, 236, 0.72);
  background: transparent;
  border: 0;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.045em;
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.mobile-scroll-more span {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  font-style: normal;
  transform: translateY(1px);
  transition: transform 0.2s ease;
}
.mobile-scroll-more:hover,
.mobile-scroll-more:focus-visible {
  color: #fff;
}
.mobile-scroll-more:hover span,
.mobile-scroll-more:focus-visible span {
  transform: translateY(4px);
}

@media (max-width: 900px) {
  .about-editorial,
  .why-editorial {
    column-gap: 28px;
  }

  .about-image,
  .why-image {
    border-radius: 14px;
  }
}

.about-editorial,
.why-editorial {
  grid-template-columns: 1fr;
  gap: 18px;
}

.about-image,
.why-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: none;
  border-radius: 12px;
}

.about-copy,
.why-copy {
  font-size: 13px;
  line-height: 1.68;
}

.about-copy p,
.why-copy p {
  margin-bottom: 11px;
}

.why-editorial {
  margin-bottom: 24px;
}

/* =========================================================
   ABOUT + WHY — unified editorial structure
   ========================================================= */
.editorial-section .section-heading {
  margin-bottom: clamp(24px, 3vw, 34px);
}

.editorial-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.editorial-image {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b0f14;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
}

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

.editorial-copy {
  align-self: start;
  padding-top: 2px;
  color: #a1aab5;
  font-size: 14px;
  line-height: 1.72;
  max-width: 680px;
}

.editorial-copy p {
  margin: 0 0 14px;
}

.editorial-copy p:last-child {
  margin-bottom: 0;
}

.editorial-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.editorial-points article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 17px 18px;
  border-right: 1px solid var(--line);
}

.editorial-points article:last-child {
  border-right: 0;
}

.editorial-points .point-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 32, 40, 0.55);
  border-radius: 50%;
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.editorial-points h3 {
  margin: 1px 0 5px;
  color: #e1e4e8;
  font-size: 12px;
  line-height: 1.3;
}

.editorial-points p {
  margin: 0;
  color: #737d89;
  font-size: 10.5px;
  line-height: 1.5;
}

.about-layout .editorial-row .editorial-image {
  order: 1;
}
.about-layout .editorial-row .editorial-copy {
  order: 2;
}
.why-layout .editorial-row .editorial-copy {
  order: 1;
}
.why-layout .editorial-row .editorial-image {
  order: 2;
}

@media (max-width: 900px) {
  .editorial-row {
    gap: 28px;
  }

  .editorial-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorial-points article:nth-child(2) {
    border-right: 0;
  }

  .editorial-points article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 640px) {
  .editorial-section .section-heading {
    margin-bottom: 20px;
  }

  .editorial-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-layout .editorial-row .editorial-image,
  .about-layout .editorial-row .editorial-copy,
  .why-layout .editorial-row .editorial-copy,
  .why-layout .editorial-row .editorial-image {
    order: initial;
  }

  .about-layout .editorial-row .editorial-image,
  .why-layout .editorial-row .editorial-image {
    order: 1;
  }

  .about-layout .editorial-row .editorial-copy,
  .why-layout .editorial-row .editorial-copy {
    order: 2;
  }

  .why-layout .editorial-row .editorial-image {
    order: 1;
  }

  .editorial-image {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  .editorial-copy {
    font-size: 13px;
    line-height: 1.68;
    padding-top: 0;
  }

  .editorial-copy p {
    margin-bottom: 11px;
  }

  .editorial-points {
    grid-template-columns: 1fr;
    margin-top: 22px;
  }

  .editorial-points article,
  .editorial-points article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px;
  }

  .editorial-points article:last-child {
    border-bottom: 0;
  }
}

/* Keep the About and Why markup identical; only the desktop visual order is reversed. */
.about-layout .editorial-row .editorial-image {
  order: 1;
}
.about-layout .editorial-row .editorial-copy {
  order: 2;
}
.why-layout .editorial-row .editorial-image {
  order: 2;
}
.why-layout .editorial-row .editorial-copy {
  order: 1;
}

@media (max-width: 640px) {
  .about-layout .editorial-row .editorial-image,
  .about-layout .editorial-row .editorial-copy,
  .why-layout .editorial-row .editorial-image,
  .why-layout .editorial-row .editorial-copy {
    order: initial;
  }
}

/* =========================================================
   ABOUT + WHY — compact text-and-points layout refinement
   Points belong directly beneath the paragraph and the copy
   column stretches to the same height as its image.
   ========================================================= */
.editorial-row {
  align-items: stretch;
}

.editorial-image {
  aspect-ratio: 16 / 9;
  height: auto;
}

.editorial-copy {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: none;
  padding-top: 0;
}

.editorial-text {
  flex: 0 0 auto;
}

.editorial-copy .editorial-points {
  margin-top: clamp(18px, 2.2vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.editorial-copy .editorial-points article {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.editorial-copy .editorial-points article:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.editorial-copy .editorial-points article:nth-child(even) {
  border-right: 0;
}

.editorial-copy .editorial-points article:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.editorial-copy .editorial-points article:nth-child(n + 3) {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .editorial-row {
    gap: 28px;
  }

  .editorial-copy .editorial-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .editorial-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .editorial-image {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .editorial-copy {
    min-height: 0;
  }

  .editorial-copy .editorial-points {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .editorial-copy .editorial-points article,
  .editorial-copy .editorial-points article:nth-child(odd),
  .editorial-copy .editorial-points article:nth-child(even) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 13px 14px;
  }

  .editorial-copy .editorial-points article:last-child {
    border-bottom: 0;
  }
}

/* HOME-ONLY SCROLL HINT
   Positioned inside the Home section, never against the viewport.
   It remains visible while Home is on screen and scrolls away with Home. */
.hero {
  position: relative;
}

.mobile-scroll-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  position: absolute;
  left: max(24px, calc((100% - var(--max)) / 2));
  bottom: 24px;
  z-index: 5;
  margin: 0;
  padding: 0;
  color: rgba(225, 230, 236, 0.72);
  background: transparent;
  border: 0;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.045em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}

.mobile-scroll-more span {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  font-style: normal;
  transform: translateY(1px);
  transition: transform 0.2s ease;
}

.mobile-scroll-more:hover,
.mobile-scroll-more:focus-visible {
  color: #fff;
}

.mobile-scroll-more:hover span,
.mobile-scroll-more:focus-visible span {
  transform: translateY(4px);
}

@media (max-width: 900px) {
  .hero {
    padding-bottom: 62px;
  }

  .mobile-scroll-more {
    left: max(14px, calc((100% - 560px) / 2));
    bottom: 20px;
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .hero {
    padding-bottom: 58px;
  }

  .mobile-scroll-more {
    left: 12px;
    bottom: 18px;
    font-size: 10px;
  }
}


/* =========================================================
   SERVICE DETAIL PAGES
   Uses the existing TECHIRAY visual system: dark surfaces,
   thin borders, red accents, compact typography and editorial spacing.
   ========================================================= */
.service-detail-page {
  background: #07090d;
}

.service-detail-page .site-header .primary-nav > a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
}
.service-detail-page .site-header .primary-nav > a.active::after {
  transform: scaleX(1);
}

.service-hero {
  position: relative;
  min-height: calc(100svh - var(--header));
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(239,32,40,.10), transparent 32%),
    radial-gradient(circle at 8% 82%, rgba(239,32,40,.045), transparent 30%);
  border-bottom: 1px solid rgba(255,255,255,.025);
}
.service-hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -260px;
  bottom: -300px;
  border: 1px solid rgba(239,32,40,.08);
  border-radius: 50%;
  pointer-events: none;
}
.service-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 28px;
  color: #68727e;
  font-size: 10px;
  line-height: 1.4;
}
.service-breadcrumb a {
  color: #9aa3ae;
}
.service-breadcrumb a:hover {
  color: #fff;
}
.service-breadcrumb strong {
  color: #d7dbe0;
  font-weight: 600;
}
.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(40px, 6vw, 82px);
  align-items: center;
  padding-block: clamp(58px, 8vw, 100px) clamp(76px, 10vw, 120px);
}
.service-hero-copy h1 {
  max-width: 790px;
  margin: 18px 0;
  font-size: clamp(2.9rem, 5.2vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 800;
}
.service-lead {
  max-width: 700px;
  margin: 0 0 26px;
  color: #b4bbc4;
  font-size: 16px;
  line-height: 1.75;
}
.service-visual {
  min-height: 390px;
  display: grid;
  place-items: center;
}
.service-visual-frame {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1.14;
  border: 1px solid #252d38;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 45%, rgba(239,32,40,.08), transparent 35%),
    linear-gradient(150deg, #10151c, #080b10);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: perspective(900px) rotateY(-5deg);
}
.service-visual-frame::before,
.service-visual-frame::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(239,32,40,.10);
  border-radius: 14px;
  pointer-events: none;
}
.service-visual-frame::before { inset: 13% 9%; }
.service-visual-frame::after { inset: 25% 18%; border-color: rgba(255,255,255,.045); }
.service-visual-top {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 15px;
  border-bottom: 1px solid var(--line);
  color: #56616d;
  font-size: 9px;
}
.service-visual-top > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a424d;
}
.service-visual-top b {
  margin-left: auto;
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #59636f;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .08em;
}
.service-visual-icon {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(239,32,40,.42);
  border-radius: 18px;
  background: rgba(239,32,40,.055);
  color: var(--red);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.service-visual-icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-visual-lines {
  position: absolute;
  left: 21%;
  right: 21%;
  bottom: 20%;
  display: grid;
  gap: 9px;
}
.service-visual-lines i {
  display: block;
  height: 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(239,32,40,.8) 0 38%, #28313c 38% 100%);
}
.service-visual-lines i:nth-child(2) { width: 82%; }
.service-visual-lines i:nth-child(3) { width: 92%; }
.service-visual-lines i:nth-child(4) { width: 66%; }
.service-visual-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border: 1px solid #303846;
  border-radius: 11px;
  background: #10151d;
  color: #d4d8de;
  box-shadow: 0 12px 25px rgba(0,0,0,.25);
  font-size: 11px;
  font-weight: 700;
}
.service-visual-chip span {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
}
.service-visual-chip.chip-one { left: 1%; top: 26%; }
.service-visual-chip.chip-two { right: 1%; bottom: 18%; }

.service-intro-section {
  background: #090c11;
  border-bottom: 1px solid rgba(255,255,255,.025);
}
.service-intro-grid {
  align-items: center;
}
.service-feature-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  margin-top: 24px;
}
.service-feature-list div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0c1016;
  color: #d5d9df;
  font-size: 11px;
  line-height: 1.5;
}
.service-feature-list span {
  flex: none;
  color: var(--red);
  font-weight: 800;
}

.service-section-heading {
  margin-bottom: 32px;
}
.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.service-detail-card {
  min-height: 205px;
  padding: 22px 20px;
  background: #0b0f14;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service-detail-card > span {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.service-detail-card h3 {
  margin: 31px 0 8px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.service-detail-card p {
  margin: 0;
  color: #737d89;
  font-size: 11px;
  line-height: 1.65;
}

.service-process {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.service-process article {
  min-height: 190px;
  padding: 22px 23px;
  background: #0b0f14;
  border-right: 1px solid var(--line);
}
.service-process article:last-child { border-right: 0; }
.service-process article > span {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.service-process h3 {
  margin: 30px 0 8px;
  font-size: 16px;
}
.service-process p {
  margin: 0;
  color: #858f9b;
  font-size: 11px;
  line-height: 1.7;
}

.service-faq {
  border-top: 1px solid var(--line);
}
.service-faq details {
  border-bottom: 1px solid var(--line);
}
.service-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 0;
  color: #e4e7eb;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.service-faq summary::-webkit-details-marker { display: none; }
.service-faq summary span {
  flex: none;
  color: var(--red);
  font-size: 20px;
  font-weight: 400;
  transition: transform .2s ease;
}
.service-faq details[open] summary span { transform: rotate(45deg); }
.service-faq details p {
  max-width: 850px;
  margin: -2px 0 19px;
  color: #8e98a4;
  font-size: 13px;
  line-height: 1.75;
}

.service-cta-section {
  padding-block: var(--section-gap);
}
.service-cta-section .cta-panel {
  border-color: rgba(239,32,40,.18);
}
.related-services .service-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.service-link {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.service-link-arrow {
  margin-top: auto;
  padding-top: 18px;
  color: #c5cbd2;
  font-size: 10px;
  font-weight: 700;
}
.service-link:hover .service-link-arrow { color: var(--red); }

@media (max-width: 1050px) {
  .service-hero-grid {
    grid-template-columns: minmax(0,1fr) minmax(300px,.8fr);
    gap: 32px;
  }
  .service-visual { min-height: 330px; }
  .service-detail-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .service-detail-card:nth-child(3n) { border-right: 0; }
  .service-process { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-process article:nth-child(2) { border-right: 0; }
  .service-process article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .related-services .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .service-hero { min-height: auto; }
  .service-hero-grid {
    grid-template-columns: 1fr;
    padding-block: 48px 70px;
  }
  .service-hero-copy { order: 1; }
  .service-visual {
    order: 2;
    min-height: 320px;
  }
  .service-visual-frame { transform: none; }
  .service-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-detail-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .service-detail-card:nth-child(2n) { border-right: 0; }
  .service-detail-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .service-process article:nth-child(2n) { border-right: 0; }
  .service-process article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .service-breadcrumb {
    padding-top: 18px;
    font-size: 9px;
  }
  .service-hero-grid {
    padding-block: 40px 54px;
  }
  .service-hero-copy h1 {
    font-size: clamp(2.25rem, 11vw, 3.35rem);
    margin-block: 13px 15px;
  }
  .service-lead {
    font-size: 13px;
    line-height: 1.65;
  }
  .service-visual {
    min-height: 250px;
  }
  .service-visual-frame {
    width: 100%;
    border-radius: 14px;
  }
  .service-visual-icon {
    width: 68px;
    height: 68px;
  }
  .service-visual-icon svg {
    width: 34px;
    height: 34px;
  }
  .service-visual-chip {
    padding: 8px 9px;
    font-size: 9px;
  }
  .service-visual-chip.chip-one { left: 0; top: 24%; }
  .service-visual-chip.chip-two { right: 0; bottom: 16%; }
  .service-feature-list {
    grid-template-columns: 1fr;
  }
  .service-detail-grid {
    grid-template-columns: 1fr;
  }
  .service-detail-card,
  .service-detail-card:nth-child(2n),
  .service-detail-card:nth-child(3n) {
    min-height: 150px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .service-detail-card:last-child { border-bottom: 0; }
  .service-process {
    grid-template-columns: 1fr;
  }
  .service-process article,
  .service-process article:nth-child(2n) {
    min-height: 155px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .service-process article:last-child { border-bottom: 0; }
  .related-services .service-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SERVICE DETAIL PAGES — SIMPLE THEME-MATCHED LAYOUT
   ========================================================= */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 13px; border: 0; background: transparent; color: #aeb5bf;
  font: inherit; font-size: 13px; font-weight: 700; border-radius: 9px; cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.nav-dropdown-toggle::after { content:""; position:absolute; left:13px; right:13px; bottom:5px; height:2px; border-radius:2px; background:var(--red); transform:scaleX(0); transition:transform .2s ease; }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active, .nav-dropdown.open .nav-dropdown-toggle { color:#fff; background:rgba(255,255,255,.035); }
.nav-dropdown-toggle:hover::after, .nav-dropdown-toggle.active::after, .nav-dropdown.open .nav-dropdown-toggle::after { transform:scaleX(1); }
.nav-chevron { font-size: 15px; line-height: 1; transform: translateY(-1px); transition: transform .2s ease; }
.nav-dropdown.open .nav-chevron { transform: rotate(180deg) translateY(1px); }
.nav-dropdown-menu {
  position:absolute; z-index:100; top:calc(100% + 10px); left:50%; min-width:235px; padding:8px;
  transform:translate(-50%, -8px); opacity:0; visibility:hidden; pointer-events:none;
  border:1px solid var(--line2); border-radius:12px; background:rgba(10,14,19,.98);
  box-shadow:0 18px 45px rgba(0,0,0,.4); backdrop-filter:blur(12px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.nav-dropdown-menu a { display:block; padding:10px 12px; border-radius:8px; color:#aeb5bf; font-size:12px; font-weight:600; text-decoration:none; transition:color .16s ease, background .16s ease, padding-left .16s ease; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible, .nav-dropdown-menu a.current { color:#fff; background:rgba(239,32,40,.08); padding-left:16px; }
.nav-dropdown-menu a.current { box-shadow:inset 2px 0 var(--red); }

.service-detail-page .site-header { z-index:200; }
.service-banner { position:relative; min-height:390px; display:flex; align-items:center; overflow:hidden; background:#090c11 url('../images/hero-bg.jpg') center center/cover no-repeat; border-bottom:1px solid rgba(255,255,255,.04); }
.service-banner-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,9,13,.94) 0%, rgba(7,9,13,.76) 52%, rgba(7,9,13,.68) 100%), linear-gradient(180deg, rgba(7,9,13,.25), rgba(7,9,13,.82)); }
.service-banner-inner { position:relative; z-index:1; width:100%; padding-block:55px 65px; }
.service-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:72px; color:#68727e; font-size:10px; line-height:1.4; }
.service-breadcrumb a { color:#b0b7c0; text-decoration:none; }
.service-breadcrumb a:hover { color:#fff; }
.service-breadcrumb strong { color:#e1e4e8; font-weight:600; }
.service-banner-content { max-width:900px; }
.service-banner-content h1 { margin:14px 0 0; color:#fff; font-size:clamp(2.8rem,6vw,5.4rem); line-height:.98; letter-spacing:-.065em; font-weight:800; }
.service-banner-content .eyebrow span { display:inline-block; width:22px; height:2px; margin-right:7px; vertical-align:middle; background:var(--red); }
.service-simple-content { background:#090c11; }
.service-copy-wrap { display:grid; grid-template-columns:minmax(160px,.3fr) minmax(0,1fr); gap:clamp(40px,8vw,110px); align-items:start; }
.service-copy-label { padding-top:5px; color:#59636f; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.service-copy-label span { color:var(--red); }
.service-copy { max-width:850px; }
.service-copy p { margin:0 0 22px; color:#aeb6c0; font-size:16px; line-height:1.85; }
.service-copy p:last-child { margin-bottom:0; }
.service-simple-cta { padding-top:0; background:#090c11; }
.service-talk-panel { border-color:rgba(239,32,40,.2); }
.service-talk-panel h2 { max-width:760px; }

@media (max-width:1050px) {
  .primary-nav > a:not(.nav-cta), .nav-dropdown-toggle { padding-inline:9px; }
  .service-banner { min-height:360px; }
  .service-breadcrumb { margin-bottom:58px; }
}
@media (max-width:900px) {
  .nav-dropdown { display:block; width:100%; }
  .nav-dropdown-toggle { width:100%; justify-content:space-between; padding:13px 14px; border-radius:8px; }
  .nav-dropdown-toggle::after { display:none; }
  .nav-dropdown-menu { position:static; min-width:0; width:100%; margin:0; padding:0 7px; transform:none; opacity:1; visibility:visible; pointer-events:auto; display:none; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
  .nav-dropdown.open .nav-dropdown-menu { display:block; transform:none; }
  .nav-dropdown-menu a { padding:10px 12px; }
  .service-banner-inner { padding-block:45px 55px; }
  .service-breadcrumb { margin-bottom:55px; }
  .service-copy-wrap { grid-template-columns:1fr; gap:20px; }
  .service-copy-label { padding-top:0; }
}
@media (max-width:640px) {
  .service-banner { min-height:330px; }
  .service-banner-inner { padding-block:28px 42px; }
  .service-breadcrumb { margin-bottom:55px; font-size:9px; }
  .service-banner-content h1 { font-size:clamp(2.35rem,12vw,3.6rem); }
  .service-copy p { font-size:14px; line-height:1.8; }
  .service-talk-panel { align-items:flex-start; }
  .service-talk-panel .cta-action { width:100%; justify-content:center; }
}

/* =========================================================
   SERVICE DETAIL REFINEMENTS — THEME / RESPONSIVE POLISH
   ========================================================= */
.service-detail-page .site-header { z-index: 300; }

/* Keep the service navigation visually consistent with the homepage. */
.nav-dropdown { position: relative; }
.nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}
.nav-dropdown-toggle {
  min-height: 40px;
  white-space: nowrap;
}
.nav-chevron {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease, border-color .2s ease;
}
.nav-dropdown.open .nav-chevron { transform: rotate(225deg) translateY(-1px); }
.nav-dropdown-menu {
  top: calc(100% + 6px);
  min-width: 270px;
  padding: 8px;
}
.nav-dropdown-menu a {
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* The banner follows the same horizontal container alignment as the homepage. */
.service-banner-inner {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
  padding-block: 48px 58px;
}
.service-breadcrumb {
  margin-bottom: 64px;
}
.service-banner-content h1 {
  max-width: 980px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* More intentional but still simple service content treatment. */
.service-copy-wrap {
  grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr);
  gap: clamp(45px, 7vw, 95px);
  padding-top: 4px;
}
.service-copy-label {
  padding-top: 2px;
}
.service-copy-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
  border: 1px solid rgba(239,32,40,.30);
  border-radius: 13px;
  background: rgba(239,32,40,.055);
  color: var(--red);
}
.service-copy-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-copy-accent {
  width: 42px;
  height: 2px;
  margin: 2px 0 18px;
  border-radius: 2px;
  background: var(--red);
}
.service-copy p {
  max-width: 850px;
  font-size: 16px;
  line-height: 1.85;
}
.service-simple-cta {
  padding-top: 28px;
  padding-bottom: clamp(78px, 8vw, 108px);
  border-top: 1px solid rgba(255,255,255,.025);
}
.service-talk-panel {
  position: relative;
  overflow: hidden;
  min-height: 142px;
}
.service-talk-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--red);
  opacity: .8;
}
.service-talk-panel > * { position: relative; z-index: 1; }
.service-talk-panel h2 { line-height: 1.08; }

@media (max-width: 1050px) {
  .service-banner-inner { width: min(calc(100% - 40px), var(--max)); }
  .service-breadcrumb { margin-bottom: 56px; }
  .service-copy-wrap { gap: 50px; }
}

@media (max-width: 900px) {
  .nav-dropdown::after { display: none; }
  .nav-dropdown-toggle { min-height: 44px; }
  .nav-dropdown-menu { min-width: 0; }
  .service-banner-inner { width: min(calc(100% - 40px), var(--max)); padding-block: 42px 52px; }
  .service-breadcrumb { margin-bottom: 48px; }
  .service-copy-wrap { grid-template-columns: 1fr; gap: 22px; }
  .service-copy-label { display: flex; align-items: center; gap: 14px; }
  .service-copy-icon { width: 46px; height: 46px; margin: 0; flex: none; }
  .service-copy-icon svg { width: 21px; height: 21px; }
  .service-copy-accent { margin-top: 0; }
}

@media (max-width: 640px) {
  .service-banner-inner { width: min(calc(100% - 28px), var(--max)); padding-block: 28px 38px; }
  .service-breadcrumb { margin-bottom: 42px; font-size: 9px; gap: 6px; }
  .service-banner-content h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); line-height: 1; }
  .service-copy-wrap { gap: 18px; }
  .service-copy-label { font-size: 9px; letter-spacing: .11em; }
  .service-copy p { font-size: 14px; line-height: 1.8; }
  .service-simple-cta { padding-top: 22px; padding-bottom: 72px; }
  .service-talk-panel { min-height: 0; padding: 27px 21px; }
  .service-talk-panel::before { top: 16px; bottom: 16px; }
  .service-talk-panel h2 { font-size: clamp(1.8rem, 8.5vw, 2.45rem); }
}

/* =========================================================
   FINAL SERVICE-PAGE / NAV POLISH
   ========================================================= */
/* Use the same font stack as the homepage everywhere on service pages. */
.service-detail-page,
.service-detail-page button,
.service-detail-page a,
.service-detail-page input,
.service-detail-page textarea,
.service-detail-page select {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* One chevron only: CSS draws it; no text glyph is used. */
.nav-dropdown-toggle .nav-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin: -2px 0 0 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.nav-dropdown.open .nav-dropdown-toggle .nav-chevron {
  transform: rotate(225deg);
}
.nav-dropdown-toggle:focus-visible {
  outline: 2px solid rgba(239,32,40,.9);
  outline-offset: 2px;
}

/* Keep the dropdown easy to enter with the pointer. */
.nav-dropdown::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 12px;
}
.nav-dropdown-menu {
  top: calc(100% + 8px);
}

/* Service banner content shares the homepage container alignment. */
.service-banner-inner {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}
.service-breadcrumb {
  margin-bottom: clamp(42px, 5vw, 64px);
}

/* The service CTA intentionally uses the exact homepage CTA spacing/component. */
.service-simple-cta {
  padding-top: 0;
  padding-bottom: clamp(76px, 8vw, 112px);
  border-top: 0;
}
.service-simple-cta .cta-panel h2 {
  max-width: 760px;
}

@media (max-width: 900px) {
  .nav-dropdown::after { display: none; }
  .nav-dropdown-toggle .nav-chevron { margin-left: 4px; }
  .service-banner-inner {
    width: min(calc(100% - 40px), var(--max));
  }
}

@media (max-width: 640px) {
  .service-banner-inner {
    width: min(calc(100% - 28px), var(--max));
  }
  .service-breadcrumb {
    margin-bottom: 40px;
  }
  .service-simple-cta {
    padding-bottom: clamp(76px, 8vw, 96px);
  }
}

/* Neutralize service-only CTA decoration so it is identical to the homepage CTA. */
.service-talk-panel,
.service-talk-panel::before {
  min-height: 0;
}
.service-talk-panel::before { display: none; }


/* =========================================================
   FINAL NAV + SERVICE CTA BEHAVIOUR
   ========================================================= */
/* Services is a real homepage-section link. The submenu opens by hover/focus,
   while clicking Services itself always follows the link to #services. */
.nav-dropdown-toggle {
  text-decoration: none;
  cursor: pointer;
}
.nav-dropdown-toggle .nav-chevron { display: none !important; }
.nav-dropdown-toggle::after { display: block; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown-menu {
  pointer-events: none;
}
.nav-dropdown.open .nav-dropdown-menu { /* JS no longer opens the menu; retained only for legacy markup safety. */ }

/* Service detail CTA uses exactly the homepage CTA component. */
.service-detail-page .cta-section {
  padding-top: 0;
  padding-bottom: clamp(68px, 7vw, 96px);
}
.service-detail-page .cta-section .cta-panel {
  min-height: 164px;
  padding: 36px 42px;
  border: 1px solid rgba(239, 32, 40, 0.25);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 20%, rgba(239, 32, 40, 0.12), transparent 32%),
    #0c1016;
}
.service-detail-page .cta-section .cta-panel h2 {
  max-width: 760px;
  font-size: clamp(2rem, 3vw, 3rem);
  margin-top: 12px;
}
.service-detail-page .cta-section .cta-panel p { max-width: none; }

/* Mobile: first tap on Services opens the submenu; a second tap follows
   the Services link to the homepage Services section. */
@media (max-width: 900px) {
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu {
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    margin: 2px 0 4px;
    padding: 4px 0 4px 10px;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: 0;
    border-left: 1px solid rgba(239,32,40,.28);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
  }
  .nav-dropdown-toggle { width: 100%; }
  .service-detail-page .cta-section .cta-panel { padding: 30px 26px; }
}
@media (max-width: 900px) {
  /* Final mobile dropdown behavior: visible only when JS adds .open. */
  .nav-dropdown-menu { display: none !important; }
  .nav-dropdown.open .nav-dropdown-menu {
    display: block !important;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    width: 100%;
    min-width: 0;
    margin: 2px 0 4px;
    padding: 4px 0 4px 10px;
    border: 0;
    border-left: 1px solid rgba(239,32,40,.28);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .nav-dropdown-menu a { display: block; width: 100%; padding: 10px 12px; }
}

@media (max-width: 640px) {
  .service-detail-page .cta-section { padding-bottom: clamp(68px, 8vw, 96px); }
  .service-detail-page .cta-section .cta-panel { padding: 26px 22px; }
  .service-detail-page .cta-section .cta-panel h2 { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
  .service-detail-page .cta-section .cta-action { width: 100%; justify-content: center; }
}

/* =========================================================
   FINAL REQUEST — SERVICE CTA SPACING + NAV SCROLL LOADER
   ========================================================= */
/* Match the homepage CTA's vertical rhythm exactly. The section separator
   remains at the section boundary, while the panel sits inside the section
   with the same breathing room as the homepage. */
.service-detail-page .cta-section {
  padding-top: clamp(68px, 7vw, 96px) !important;
  padding-bottom: clamp(68px, 7vw, 96px) !important;
  border-top: 1px solid rgba(255,255,255,.085) !important;
}
.service-detail-page .cta-section .cta-panel {
  min-height: 164px;
  padding: 36px 42px;
  border: 1px solid rgba(239, 32, 40, 0.25);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 20%, rgba(239, 32, 40, 0.12), transparent 32%),
    #0c1016;
}
.service-detail-page .cta-section .cta-panel h2 {
  max-width: 760px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.04;
  margin-top: 12px;
}
.service-detail-page .cta-section .cta-panel p {
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .service-detail-page .cta-section {
    padding-top: clamp(64px, 8vw, 84px) !important;
    padding-bottom: clamp(64px, 8vw, 84px) !important;
  }
  .service-detail-page .cta-section .cta-panel {
    padding: 30px 26px;
  }
}

@media (max-width: 640px) {
  .service-detail-page .cta-section {
    padding-top: 64px !important;
    padding-bottom: 72px !important;
  }
  .service-detail-page .cta-section .cta-panel {
    min-height: 0;
    padding: 24px 18px;
    gap: 18px;
  }
  .service-detail-page .cta-section .cta-panel h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.55rem);
    line-height: 1.04;
  }
  .service-detail-page .cta-section .cta-action {
    width: 100%;
  }
}

/* =========================================================
   FINAL NAVIGATION LOADER PAINT + SERVICE CTA GAP
   ========================================================= */
/* Navigation loader is fully visible before a same-page smooth scroll starts. */
.page-loader.nav-loading {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  transition: none !important;
}

/* Keep the service-page CTA physically separated from the preceding divider.
   The margin is intentional in addition to section padding so older/conflicting
   .cta-section rules cannot make the panel touch the divider. */
.service-detail-page .cta-section .cta-panel {
  margin-top: clamp(48px, 6vw, 76px);
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .service-detail-page .cta-section .cta-panel {
    margin-top: clamp(42px, 7vw, 60px);
  }
}

@media (max-width: 640px) {
  .service-detail-page .cta-section .cta-panel {
    margin-top: 40px;
  }
}

/* =========================================================
   SERVICE DETAIL — FINAL SPACING ALIGNMENT
   ========================================================= */
/* The service banner must begin immediately after the shared sticky header.
   Do not introduce an extra top band on service-detail pages. */
.service-detail-page main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.service-detail-page main > section.service-banner {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Match the homepage CTA's section rhythm: the panel sits inside the CTA
   section's normal padding. No additional service-only panel margin. */
.service-detail-page .cta-section {
  padding-top: clamp(68px, 7vw, 96px) !important;
  padding-bottom: clamp(68px, 7vw, 96px) !important;
  margin-top: 0 !important;
}
.service-detail-page .cta-section .cta-panel {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .service-detail-page .cta-section {
    padding-top: clamp(68px, 7vw, 96px) !important;
    padding-bottom: clamp(68px, 7vw, 96px) !important;
  }
}

@media (max-width: 640px) {
  .service-detail-page .cta-section {
    padding-top: 68px !important;
    padding-bottom: 72px !important;
  }
  .service-detail-page .cta-section .cta-panel {
    margin-top: 0 !important;
  }
}

/* =========================================================
   FINAL HOME HERO OVERLAY — MATCH SERVICE BANNER
   ========================================================= */
.hero {
  background:
    linear-gradient(90deg, rgba(7,9,13,.94) 0%, rgba(7,9,13,.76) 52%, rgba(7,9,13,.68) 100%),
    linear-gradient(180deg, rgba(7,9,13,.25), rgba(7,9,13,.82)),
    url("../images/hero-bg.jpg") center center / cover no-repeat;
}

/* =========================================================
   FINAL SERVICES DROPDOWN — HOVER + CLICK, RESPONSIVE
   ========================================================= */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
}
.nav-dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 10px 13px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #aeb5bf;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.nav-dropdown-label {
  display: inline-block;
  line-height: 20px;
}
.nav-dropdown-toggle::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.nav-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
  transition: transform .22s ease, color .2s ease;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown-toggle.active,
.nav-dropdown.open .nav-dropdown-toggle {
  color: #fff;
  background: rgba(255,255,255,.035);
}
.nav-dropdown-toggle:hover::before,
.nav-dropdown-toggle:focus-visible::before,
.nav-dropdown-toggle.active::before,
.nav-dropdown.open .nav-dropdown-toggle::before {
  transform: scaleX(1);
}
.nav-dropdown-toggle:hover .nav-chevron,
.nav-dropdown-toggle:focus-visible .nav-chevron,
.nav-dropdown.open .nav-chevron {
  transform: rotate(225deg) translateY(-1px);
}
.nav-dropdown-toggle:focus-visible {
  outline: 2px solid rgba(239,32,40,.9);
  outline-offset: 2px;
}

/* Desktop: hover OR click opens the menu. */
@media (min-width: 901px) {
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .nav-dropdown:hover .nav-chevron,
  .nav-dropdown:focus-within .nav-chevron {
    transform: rotate(225deg) translateY(-1px);
  }
}

@media (max-width: 1050px) and (min-width: 901px) {
  .nav-dropdown-toggle {
    padding-inline: 9px;
  }
  .nav-dropdown-toggle::before {
    left: 9px;
    right: 9px;
  }
}

@media (max-width: 900px) {
  .nav-dropdown {
    display: block;
    width: 100%;
    height: auto;
  }
  .nav-dropdown-toggle {
    width: 100%;
    min-height: 44px;
    height: 44px;
    justify-content: space-between;
    padding: 12px 13px;
    text-align: left;
    border-radius: 8px;
  }
  .nav-dropdown-toggle::before {
    left: 13px;
    right: auto;
    width: 28px;
    bottom: 5px;
  }
  .nav-dropdown-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin: 2px 0 4px;
    padding: 4px 0 4px 10px;
    border: 0;
    border-left: 1px solid rgba(239,32,40,.28);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-dropdown-menu a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
  }
}


/* =========================================================
   FINAL SERVICES DROPDOWN — VISIBLE CHEVRON + OUTSIDE CLICK
   ========================================================= */
/* The Services control is intentionally a button. Keep its label aligned
   with the other primary navigation items and show one clear chevron. */
.nav-dropdown-toggle .nav-chevron {
  display: inline-block !important;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin: 0 0 2px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .22s ease, color .2s ease;
}

.nav-dropdown.open .nav-dropdown-toggle .nav-chevron,
.nav-dropdown:hover .nav-dropdown-toggle .nav-chevron,
.nav-dropdown:focus-within .nav-dropdown-toggle .nav-chevron {
  transform: rotate(225deg);
}

/* On desktop, the dropdown can be opened by hover or click. */
@media (min-width: 901px) {
  .nav-dropdown-menu {
    z-index: 1200;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

/* On mobile/tablet the menu is click-controlled; do not let hover state
   accidentally expose the submenu on touch devices. */
@media (max-width: 900px) {
  .nav-dropdown .nav-chevron {
    display: inline-block !important;
  }
  .nav-dropdown:not(.open) .nav-dropdown-menu {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* =========================================================
   SERVICE DETAIL EXPERIENCE — CONTENT REDESIGN
   Banner / breadcrumb / H1 intentionally untouched.
   ========================================================= */
.service-detail-page .section { position: relative; }
.service-detail-page .section-alt { background: #090c11; }
.service-detail-page .service-overview { padding-block: clamp(72px, 8vw, 112px); background: #07090d; }
.service-overview-grid {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:clamp(36px,7vw,96px); align-items:stretch;
}
.service-overview-copy { min-width:0; align-self:center; }
.service-overview-copy h2,
.service-deliverables h2,
.service-faq-grid h2 { margin:14px 0 18px; max-width:760px; font-size:clamp(2.25rem,4.5vw,4.25rem); line-height:1.02; letter-spacing:-.055em; }
.service-lead { max-width:760px; margin:0; color:#aeb6c0; font-size:17px; line-height:1.8; }
.service-trust-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:32px; max-width:760px; }
.service-trust-row div { padding:14px 15px; border:1px solid var(--line); border-radius:12px; background:#0b0f14; }
.service-trust-row strong { display:block; color:var(--red); font-size:10px; letter-spacing:.12em; }
.service-trust-row span { display:block; margin-top:5px; color:#c4cad1; font-size:11px; line-height:1.45; }
.service-overview-card { position:relative; min-height:330px; padding:30px; border:1px solid #29313b; border-radius:18px; background:linear-gradient(145deg,#11161d 0%,#0b0f14 72%); box-shadow:0 24px 55px rgba(0,0,0,.24); overflow:hidden; }
.service-overview-card::after { content:""; position:absolute; width:180px; height:180px; right:-70px; top:-70px; border-radius:50%; background:rgba(239,32,40,.08); filter:blur(2px); }
.service-card-number { position:absolute; right:24px; top:22px; color:#343d48; font-size:11px; font-weight:800; letter-spacing:.16em; }
.service-overview-card .service-copy-icon { width:58px; height:58px; margin:0 0 25px; }
.service-card-kicker { color:#69737f; font-size:9px; font-weight:800; letter-spacing:.15em; }
.service-overview-card h3 { margin:9px 0 8px; font-size:24px; line-height:1.15; letter-spacing:-.03em; }
.service-overview-card p { max-width:360px; margin:0; color:#858f9b; font-size:12px; line-height:1.75; }
.service-inline-link { display:inline-flex; align-items:center; gap:8px; margin-top:26px; color:#f1f3f5; font-size:11px; font-weight:800; }
.service-inline-link span { color:var(--red); font-size:15px; transition:transform .2s ease; }
.service-inline-link:hover span { transform:translate(3px,3px); }

.service-capabilities { padding-block:clamp(78px,8vw,116px); background:#0a0e13; border-top:1px solid rgba(255,255,255,.035); }
.service-detail-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); gap:40px; align-items:end; margin-bottom:38px; }
.service-detail-heading h2 { margin:14px 0 0; font-size:clamp(2.2rem,4.2vw,3.8rem); line-height:1.03; letter-spacing:-.055em; }
.service-detail-heading > p { margin:0; max-width:500px; color:#7f8995; font-size:13px; line-height:1.75; justify-self:end; }
.service-capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.service-capability-card { position:relative; min-height:280px; padding:25px; border:1px solid var(--line); border-radius:15px; background:#0c1117; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.service-capability-card:hover { transform:translateY(-3px); border-color:#3b4654; box-shadow:0 15px 35px rgba(0,0,0,.2); }
.capability-top { display:flex; align-items:center; justify-content:space-between; color:var(--red); font-size:10px; font-weight:800; letter-spacing:.12em; }
.capability-top i { width:36px; height:1px; background:var(--red); opacity:.65; }
.service-capability-card h3 { margin:32px 0 20px; font-size:21px; line-height:1.2; letter-spacing:-.03em; }
.service-capability-card ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; margin:0; padding:0; list-style:none; }
.service-capability-card li { display:flex; gap:8px; color:#aeb6c0; font-size:11px; line-height:1.55; }
.service-capability-card li span { color:var(--red); font-weight:900; flex:none; }

.service-deliverables { padding-block:clamp(78px,8vw,116px); }
.service-deliverables-grid { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(45px,8vw,110px); align-items:start; }
.service-deliverables-grid > div:first-child { position:sticky; top:calc(var(--header) + 28px); }
.service-deliverables-grid > div:first-child p { max-width:470px; margin:0; color:#7f8995; font-size:13px; line-height:1.75; }
.service-deliverable-list { border-top:1px solid var(--line); }
.service-deliverable-item { display:grid; grid-template-columns:42px 1fr 24px; gap:18px; align-items:center; min-height:74px; border-bottom:1px solid var(--line); }
.service-deliverable-item > span { color:var(--red); font-size:10px; font-weight:800; letter-spacing:.1em; }
.service-deliverable-item strong { color:#e1e5e9; font-size:13px; font-weight:600; }
.service-deliverable-item i { color:#59636f; font-style:normal; text-align:right; transition:color .2s ease,transform .2s ease; }
.service-deliverable-item:hover i { color:var(--red); transform:translate(2px,-2px); }

.service-process-section { padding-block:clamp(78px,8vw,116px); background:#07090d; }

.service-faq-section { padding-block:clamp(78px,8vw,116px); }
.service-faq-grid { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); gap:clamp(45px,8vw,110px); align-items:start; }
.service-faq-grid > div:first-child p { max-width:440px; margin:0; color:#7f8995; font-size:13px; line-height:1.75; }
.service-faq { border-top:1px solid var(--line); }
.service-faq summary { min-height:66px; padding:19px 0; font-size:13px; }
.service-faq details p { margin-bottom:22px; font-size:12px; }
.service-final-cta { padding-block:clamp(78px,8vw,110px); }
.service-final-cta .cta-panel { min-height:190px; padding:40px 44px; }

@media (max-width:1050px) {
  .service-overview-grid { grid-template-columns:minmax(0,1fr) minmax(280px,.72fr); gap:42px; }
  .service-capability-card li { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .service-overview-grid,.service-deliverables-grid,.service-faq-grid { grid-template-columns:1fr; }
  .service-overview-card { min-height:280px; max-width:620px; }
  .service-deliverables-grid > div:first-child { position:static; }
  .service-detail-heading { grid-template-columns:1fr; gap:12px; align-items:start; }
  .service-detail-heading > p { justify-self:start; }
  .service-capability-grid { grid-template-columns:1fr; }
  .service-final-cta .cta-panel { padding:32px 28px; }
}
@media (max-width:640px) {
  .service-detail-page .service-overview { padding-block:64px 72px; }
  .service-overview-copy h2,.service-deliverables h2,.service-faq-grid h2 { font-size:clamp(2rem,9vw,2.8rem); }
  .service-lead { font-size:14px; line-height:1.75; }
  .service-trust-row { grid-template-columns:1fr; margin-top:24px; }
  .service-overview-card { min-height:0; padding:23px; }
  .service-capabilities,.service-deliverables,.service-process-section,.service-faq-section { padding-block:68px; }
  .service-capability-card { min-height:0; padding:21px; }
  .service-capability-card h3 { margin-top:27px; font-size:19px; }
  .service-capability-card ul { grid-template-columns:1fr; gap:8px; }
  .service-deliverable-item { grid-template-columns:32px 1fr 18px; gap:11px; min-height:68px; }
  .service-deliverable-item strong { font-size:12px; }
  .service-final-cta { padding-block:68px 76px; }
  .service-final-cta .cta-panel { min-height:0; padding:25px 19px; }
}
@media (prefers-reduced-motion:reduce) {
  
}

/* =========================================================
   NEW STANDALONE CONTENT PAGES
   Uses the existing TECHIRAY visual system without changing
   the established service-detail design.
   ========================================================= */
.content-page .content-page-banner .service-banner-inner { padding-bottom: 70px; }
.content-page .content-page-banner .service-breadcrumb { margin-bottom: 64px; }
.content-banner-subtitle {
  max-width: 700px;
  margin: 18px 0 0;
  color: #aeb6c0;
  font-size: 15px;
  line-height: 1.7;
}
.content-section,
.about-mission-section,
.about-strength-section,
.why-intro-section,
.why-values-section,
.why-page-cta,
.technology-intro-section,
.technology-stack-section,
.technology-talk-section,
.contact-page-section,
.contact-connect-section,
.social-follow-section { padding-block: clamp(72px, 8vw, 112px); }
.content-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: end;
  margin-bottom: 46px;
}
.content-intro-row h2,
.content-image-copy h2,
.content-centered-heading h2,
.content-cta-panel h2,
.social-follow-panel h2,
.contact-connect-panel h2 {
  margin: 14px 0 0;
  color: #f4f5f7;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.055em;
}
.content-intro-row > p,
.content-centered-heading > p {
  margin: 0;
  color: #7f8995;
  font-size: 13px;
  line-height: 1.8;
}
.content-image-copy {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.content-feature-image,
.technology-wordcloud {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #29313b;
  border-radius: 18px;
  background: #0b0f14;
  box-shadow: 0 24px 55px rgba(0,0,0,.22);
}
.content-feature-image img,
.technology-wordcloud img {
  display: block;
  width: 100%;
  height: clamp(330px, 36vw, 500px);
  object-fit: cover;
}
.about-story-grid .content-feature-image img { object-position: center center; }
.why-page-grid .content-feature-image img { object-position: center center; }
.content-rich-copy { min-width: 0; }
.content-rich-copy .eyebrow { margin-bottom: 4px; }
.content-rich-copy h2 { margin-bottom: 22px; }
.content-rich-copy p {
  margin: 0 0 18px;
  color: #aeb6c0;
  font-size: 15px;
  line-height: 1.85;
}
.content-rich-copy p:last-child { margin-bottom: 0; }
.content-centered-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}
.content-centered-heading > p { justify-self: end; max-width: 500px; }
.mission-vision-grid,
.strength-grid,
.why-values-grid {
  display: grid;
  gap: 12px;
}
.mission-vision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mission-vision-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 22px;
  min-height: 250px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b0f14;
}
.content-card-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239,32,40,.35);
  border-radius: 14px;
  color: var(--red);
  background: rgba(239,32,40,.05);
}
.mission-vision-card small {
  color: #69737f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}
.mission-vision-card h3 {
  margin: 9px 0 11px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.mission-vision-card p,
.strength-grid p,
.why-values-grid p {
  margin: 0;
  color: #7f8995;
  font-size: 12px;
  line-height: 1.75;
}
.strength-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strength-grid article,
.why-values-grid article {
  min-height: 190px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #0b0f14;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.strength-grid article:hover,
.why-values-grid article:hover {
  transform: translateY(-3px);
  border-color: #3b4654;
  background: #0f141b;
}
.strength-grid article > span,
.why-values-grid article > span {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.strength-grid h3,
.why-values-grid h3 {
  margin: 27px 0 8px;
  font-size: 17px;
  line-height: 1.25;
}
.content-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
  min-height: 210px;
  padding: 38px 42px;
  border: 1px solid rgba(239,32,40,.22);
  border-radius: 17px;
  background:
    radial-gradient(circle at 88% 18%, rgba(239,32,40,.08), transparent 30%),
    #0b0f14;
}
.content-cta-panel h2 { max-width: 780px; font-size: clamp(2rem, 4vw, 3.3rem); }
.content-cta-panel p { max-width: 680px; margin: 13px 0 0; color: #858f9b; font-size: 13px; line-height: 1.75; }
.social-follow-section { padding-top: 36px; }
.social-follow-panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 42px;
  align-items: center;
  padding: 34px;
  border: 1px solid #29313b;
  border-radius: 18px;
  background: linear-gradient(135deg, #0c1117, #090c11);
}
.social-follow-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.social-follow-copy p { max-width: 480px; margin: 12px 0 0; color: #7f8995; font-size: 12px; line-height: 1.75; }
.social-follow-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}
.social-follow-links a {
  min-height: 92px;
  display: grid;
  grid-template-columns: 34px 1fr 18px;
  gap: 10px;
  align-items: center;
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  color: #c7ccd3;
  transition: background .2s ease, color .2s ease;
}
.social-follow-links a:last-child { border-right: 0; }
.social-follow-links a:hover { background: rgba(255,255,255,.03); color: #fff; }
.social-follow-links i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #35404d;
  border-radius: 50%;
  color: #f4f5f7;
}
.social-follow-links span { font-size: 11px; font-weight: 700; }
.social-follow-links b { color: var(--red); font-size: 14px; font-weight: 500; }
.technology-intro-grid { grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr); }
.technology-wordcloud { align-self: stretch; }
.technology-wordcloud img { height: 100%; min-height: 390px; object-fit: cover; }
.technology-page-index { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.technology-talk-section { padding-top: 36px; }
.contact-page-section { background: #07090d; }
.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(360px, 1.18fr);
  gap: clamp(45px, 8vw, 110px);
  align-items: start;
}
.contact-page-copy h2 { margin: 14px 0 17px; max-width: 650px; font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.02; letter-spacing: -.055em; }
.contact-page-copy .contact-intro { max-width: 560px; }
.contact-page-details { margin-top: 30px; }
.contact-note-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #0b0f14;
}
.contact-note-card > span { width: 40px; height: 40px; display:grid; place-items:center; border-radius:50%; color:var(--red); background:rgba(239,32,40,.07); }
.contact-note-card strong { display:block; color:#dce0e5; font-size:12px; }
.contact-note-card p { margin:4px 0 0; color:#7f8995; font-size:11px; line-height:1.65; }
.contact-page-form { margin: 0; }
.contact-form-title { padding-bottom: 17px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.contact-form-title small { color:#69737f; font-size:9px; font-weight:800; letter-spacing:.15em; }
.contact-form-title h3 { margin:7px 0 0; font-size:23px; }
.contact-connect-section { padding-top: 36px; }
.contact-connect-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  gap: 45px;
  align-items: center;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #0b0f14;
}
.contact-connect-panel h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.contact-connect-panel p { margin: 11px 0 0; color:#7f8995; font-size:12px; }
.contact-connect-links { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.contact-connect-links a { display:flex; align-items:center; gap:10px; min-height:58px; padding:14px 15px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:#c7ccd3; font-size:11px; font-weight:700; }
.contact-connect-links a i { width:28px; height:28px; display:grid; place-items:center; border:1px solid #35404d; border-radius:50%; }
.contact-connect-links a span { margin-left:auto; color:var(--red); }
.footer-social-links { display:flex; gap:8px; }
.footer-social-links a { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line2); border-radius:8px; color:#aab2bc; }
.footer-social-links a:hover { color:#fff; border-color:#59636f; }

@media (max-width: 900px) {
  .content-intro-row,
  .content-image-copy,
  .content-centered-heading,
  .content-cta-panel,
  .social-follow-panel,
  .contact-page-grid,
  .contact-connect-panel { grid-template-columns: 1fr; }
  .content-intro-row { gap: 15px; }
  .content-centered-heading > p { justify-self: start; }
  .content-image-copy { align-items: start; }
  .content-feature-image img { height: clamp(300px, 56vw, 460px); }
  .mission-vision-grid { grid-template-columns: 1fr; }
  .strength-grid, .why-values-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .social-follow-links { border-left: 0; border-top: 1px solid var(--line); }
  .social-follow-links a { border-top: 0; }
  .technology-wordcloud img { min-height: 330px; }
}
@media (max-width: 640px) {
  .content-page .content-page-banner .service-breadcrumb { margin-bottom: 42px; }
  .content-banner-subtitle { font-size: 13px; }
  .content-section,
  .about-mission-section,
  .about-strength-section,
  .why-intro-section,
  .why-values-section,
  .why-page-cta,
  .technology-intro-section,
  .technology-stack-section,
  .technology-talk-section,
  .contact-page-section,
  .contact-connect-section,
  .social-follow-section { padding-block: 64px; }
  .content-intro-row { margin-bottom: 32px; }
  .content-intro-row h2,
  .content-image-copy h2,
  .contact-page-copy h2 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .content-rich-copy p { font-size: 13px; line-height: 1.78; }
  .content-feature-image { border-radius: 14px; }
  .content-feature-image img { height: 300px; }
  .mission-vision-card { grid-template-columns: 1fr; gap: 15px; min-height: 0; padding: 23px; }
  .mission-vision-card h3 { font-size: 19px; }
  .strength-grid, .why-values-grid { grid-template-columns: 1fr; }
  .strength-grid article, .why-values-grid article { min-height: 0; }
  .content-cta-panel { padding: 26px 21px; gap: 23px; }
  .content-cta-panel h2 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .content-cta-panel .btn { justify-self: start; }
  .social-follow-panel { padding: 24px 19px; gap: 24px; }
  .social-follow-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .social-follow-links a:nth-child(2) { border-right: 0; }
  .social-follow-links a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .technology-wordcloud img { min-height: 260px; }
  .contact-page-grid { gap: 38px; }
  .contact-connect-panel { padding: 25px 20px; }
  .contact-connect-links { grid-template-columns: 1fr; }
  .contact-connect-links a { border-right: 1px solid var(--line); }
  .contact-connect-links a:last-child { border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .strength-grid article, .why-values-grid article, .social-follow-links a { transition: none; }
}
.home-section-action { margin-top: 34px; display: flex; }
.home-section-action-left { justify-content: flex-start; }
.home-section-action-center { justify-content: center; }
@media (max-width: 640px) {
  .home-section-action { margin-top: 28px; }
  .home-section-action .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   PAGE POLISH — 2026-09-06
   Keep the existing TECHIRAY visual system; refine only the
   new content pages and home-page CTA requested.
   ========================================================= */
.content-page .content-page-banner .content-banner-subtitle { display:none; }

/* Use the exact source proportions of the home-page editorial images
   so the new About and Why pages do not crop or distort them. */
.about-story-grid .content-feature-image img {
  height: auto;
  aspect-ratio: 600 / 402;
  object-fit: cover;
}
.why-page-grid .content-feature-image img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.about-story-grid .content-feature-image,
.why-page-grid .content-feature-image {
  align-self: start;
}

/* Why-page value cards: structured icon + content cards instead of
   thumbnail-like rows. */
.why-values-grid article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
  padding: 24px;
}
.why-values-grid .value-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239,32,40,.30);
  border-radius: 12px;
  background: rgba(239,32,40,.05);
  color: var(--red);
  font-size: 14px;
}
.why-values-grid article small {
  color: #69737f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.why-values-grid article h3 { margin: 7px 0 8px; }
.why-values-grid article p { margin: 0; }

/* The footer remains the original three-column footer; there is no
   social-media column in the footer. */
.footer-social-column { display:none !important; }
.footer-grid { grid-template-columns: 1.45fr 0.75fr 1fr; }

/* Requested home-page Why CTA alignment. */
.home-section-action-right { justify-content: flex-end; }
@media (max-width: 640px) {
  .home-section-action-right { justify-content: stretch; }
  .home-section-action-right .btn { width: 100%; justify-content: center; }
  .why-values-grid article { grid-template-columns: 42px minmax(0,1fr); padding: 20px; }
}


/* =========================================================
   FINAL CONTENT-PAGE VISUAL FIX — 2026-09-06
   Keep the Home-page source image proportions intact and make
   the new page sections independent of older legacy overrides.
   ========================================================= */
.content-page .content-page-banner .service-banner-inner { padding-block: 55px 65px; }
.content-page .content-page-banner .service-breadcrumb { margin-bottom: 72px; }
.content-page .content-page-banner .service-banner-content h1 { margin-top: 14px; }

/* About: use the exact 600x402 source proportion used on Home. */
.about-story-grid .content-feature-image {
  width: 100%;
  aspect-ratio: 600 / 402;
  align-self: start;
}
.about-story-grid .content-feature-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 402;
  object-fit: cover;
  object-position: center center;
}

/* Why: use the exact square 612x612 source proportion used on Home. */
.why-page-grid .content-feature-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  align-self: start;
}
.why-page-grid .content-feature-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
}

/* Technologies: show the complete word-cloud artwork without cropping. */
.technology-wordcloud {
  width: 100%;
  aspect-ratio: 1000 / 650;
  align-self: start;
}
.technology-wordcloud img {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1000 / 650;
  object-fit: contain !important;
  object-position: center center;
}

/* Why-page value cards: no thumbnail column; each item is a complete
   editorial card with its icon integrated into the content area. */
.why-values-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.why-values-grid article {
  display: block;
  min-height: 205px;
  padding: 25px 24px 23px;
}
.why-values-grid .value-icon {
  margin-bottom: 18px;
}
.why-values-grid article small {
  display: block;
  margin-bottom: 7px;
}
.why-values-grid article h3 {
  margin: 0 0 9px;
  font-size: 17px;
  line-height: 1.3;
}
.why-values-grid article p {
  max-width: 34rem;
  margin: 0;
}

/* Follow-us panel: keep the content and link area vertically centered,
   matching the balanced alignment used by service-detail talk panels. */
.social-follow-panel {
  align-items: center;
}
.social-follow-links {
  align-self: center;
  min-height: 92px;
}
.social-follow-links a {
  align-self: stretch;
}

@media (max-width: 900px) {
  .why-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .technology-wordcloud { aspect-ratio: 1000 / 650; }
}
@media (max-width: 640px) {
  .content-page .content-page-banner .service-banner-inner { padding-block: 28px 42px; }
  .content-page .content-page-banner .service-breadcrumb { margin-bottom: 42px; }
  .about-story-grid .content-feature-image,
  .about-story-grid .content-feature-image img { aspect-ratio: 600 / 402; }
  .why-page-grid .content-feature-image,
  .why-page-grid .content-feature-image img { aspect-ratio: 1 / 1; }
  .technology-wordcloud,
  .technology-wordcloud img { aspect-ratio: 1000 / 650; }
  .why-values-grid { grid-template-columns: 1fr; }
  .why-values-grid article { min-height: 0; padding: 21px 19px; }
  .social-follow-links { min-height: 0; }
}


/* =========================================================
   FINAL IMAGE + FOLLOW-US BALANCE FIX — 2026-09-06
   ========================================================= */
.about-story-grid .content-feature-image,
.about-story-grid .content-feature-image img { aspect-ratio: 1535 / 1024; }
.about-story-grid .content-feature-image img { width:100%; height:auto !important; object-fit:cover; }
.why-page-grid .content-feature-image,
.why-page-grid .content-feature-image img { aspect-ratio: 1537 / 1023; }
.why-page-grid .content-feature-image img { width:100%; height:auto !important; object-fit:cover; }
.technology-intro-grid .technology-wordcloud { aspect-ratio: 1100 / 700; }
.technology-intro-grid .technology-wordcloud img { width:100%; height:auto !important; min-height:0 !important; aspect-ratio:1100 / 700; object-fit:contain !important; }
.social-follow-section { padding-block: clamp(72px, 8vw, 104px); }
.social-follow-panel { min-height:190px; align-items:center; }
.social-follow-copy, .social-follow-links { align-self:center; }
.social-follow-links { min-height:92px; align-self:center; }
.social-follow-links a { min-height:92px; align-self:stretch; }
@media (max-width:900px) {
  .social-follow-panel { min-height:0; }
  .social-follow-links, .social-follow-links a { min-height:78px; }
}
@media (max-width:640px) {
  .about-story-grid .content-feature-image, .about-story-grid .content-feature-image img { aspect-ratio:1535 / 1024; }
  .why-page-grid .content-feature-image, .why-page-grid .content-feature-image img { aspect-ratio:1537 / 1023; }
  .technology-intro-grid .technology-wordcloud, .technology-intro-grid .technology-wordcloud img { aspect-ratio:1100 / 700; }
  .social-follow-section { padding-block:64px; }
  .social-follow-panel { min-height:0; }
}

/* =========================================================
   CONTENT PAGE IMAGE STRUCTURE — MATCH HOME EDITORIAL SECTIONS
   The standalone About and Why image blocks use the same 16:9
   editorial presentation as their corresponding Home sections.
   Technologies follows the same image-left / copy-right pattern.
   ========================================================= */
.about-story-grid,
.why-page-grid,
.technology-intro-grid {
  align-items: stretch;
}

.about-story-grid .content-feature-image,
.why-page-grid .content-feature-image,
.technology-intro-grid .technology-wordcloud {
  width: 100%;
  aspect-ratio: 16 / 9;
  align-self: stretch;
}

.about-story-grid .content-feature-image img,
.why-page-grid .content-feature-image img {
  width: 100%;
  height: 100% !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
}

/* Technology artwork must remain completely visible; the container
   keeps the same editorial dimensions while the artwork uses contain. */
.technology-intro-grid .technology-wordcloud img {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  object-fit: contain !important;
  object-position: center center;
}

@media (max-width: 640px) {
  .about-story-grid .content-feature-image,
  .why-page-grid .content-feature-image,
  .technology-intro-grid .technology-wordcloud {
    aspect-ratio: 16 / 9;
  }

  .about-story-grid .content-feature-image img,
  .why-page-grid .content-feature-image img,
  .technology-intro-grid .technology-wordcloud img {
    height: 100% !important;
  }
}


/* =========================================================
   V8 — unified standalone page image sections
   The image source keeps its native aspect ratio, matching the
   corresponding Home-page artwork instead of forcing/cropping it.
   About + Technologies: image left / copy right.
   Why: copy left / image right.
   ========================================================= */
.page-image-section {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.page-image-section .page-image-natural {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  align-self: center;
}
.page-image-section .page-image-natural img {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center;
}
.page-image-section-reverse .content-rich-copy { order: 1; }
.page-image-section-reverse .page-image-natural { order: 2; }
@media (max-width: 900px) {
  .page-image-section,
  .page-image-section-reverse {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .page-image-section .content-rich-copy,
  .page-image-section-reverse .content-rich-copy,
  .page-image-section .page-image-natural,
  .page-image-section-reverse .page-image-natural {
    order: initial;
  }
  .page-image-section .page-image-natural img {
    height: auto !important;
  }
}


/* =========================================================
   REQUESTED POLISH — 2026-09-07
   About strength cards use the same number + right-side line
   treatment as service-detail CAPABILITIES cards.
   Why TECHIRAY value cards use Home's thumbnail/card-top rhythm.
   ========================================================= */
.strength-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.strength-top i {
  display: block;
  width: 36px;
  height: 1px;
  flex: 0 0 36px;
  background: var(--red);
  opacity: .75;
}
.strength-grid h3 { margin-top: 32px; }

.why-value-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.why-values-grid .value-icon {
  margin-bottom: 0;
}
.why-values-grid .value-number {
  color: #4f5965;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.why-values-grid article > div:last-child { min-width: 0; }
.why-values-grid article small { display: none; }
.why-values-grid article h3 { margin-top: 24px; }

@media (max-width: 640px) {
  .strength-top i { width: 32px; flex-basis: 32px; }
  .strength-grid h3 { margin-top: 27px; }
  .why-values-grid article h3 { margin-top: 20px; }
}

/* Mobile mission / vision: keep the thumbnail/icon beside its respective text. */
@media (max-width: 640px) {
  .mission-vision-card {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
  }
  .mission-vision-card .content-card-icon {
    width: 50px;
    height: 50px;
  }
}



/* Multi-page navigation and heading hardening (2026-09-07) */
/* Active state now represents the current page only; scrolling no longer changes header links. */
.primary-nav > a:not(.nav-cta).active,
.primary-nav > a:not(.nav-cta).active:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
}

/* Prevent long section headings from being clipped by parent grids or animated layout wrappers. */
.service-detail-page,
.service-detail-page main,
.content-page,
.content-page main {
  min-width: 0;
  overflow-x: clip;
}

.section-heading,
.section-heading > div,
.content-intro-row,
.content-intro-row > div,
.service-overview-copy,
.service-section-heading,
.service-section-heading > div,
.cta-panel,
.social-follow-copy {
  min-width: 0;
}

.section-heading h2,
.section-title h2,
.content-intro-row h2,
.service-detail-page h2,
.content-page h2,
.service-detail-page h3,
.content-page h3 {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}

/* Dedicated technology benefits section, matching the about/why point-card language. */
.technology-benefits-section {
  background: #07090d;
}
.technology-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.technology-benefits-grid article {
  min-width: 0;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.012);
}
.technology-benefit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}
.technology-benefits-grid .value-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--red);
}
.technology-benefits-grid .value-icon i { font-size: 17px; }
.technology-benefits-grid .value-number {
  color: #697380;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.technology-benefits-grid h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.technology-benefits-grid p {
  margin: 0;
  color: #9da6b1;
  font-size: 13px;
  line-height: 1.75;
}
@media (max-width: 900px) {
  .technology-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .technology-benefits-grid { grid-template-columns: 1fr; }
  .technology-benefits-grid article { padding: 22px 18px; }
  .technology-benefit-top { margin-bottom: 20px; }
  .section-heading h2,
  .section-title h2,
  .content-intro-row h2,
  .service-detail-page h2,
  .content-page h2 { text-wrap: pretty; }
}


/* =========================================================
   HOME CTA HIERARCHY — 2026-09-07
   Primary actions remain solid red. Informational navigation
   uses a lighter tertiary treatment so it does not compete.
   ========================================================= */
.btn-tertiary {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #eef1f4;
  font-size: 12px;
  font-weight: 800;
  justify-content: flex-start;
  gap: 8px;
  box-shadow: none;
  position: relative;
}
.btn-tertiary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: calc(100% - 20px);
  height: 1px;
  background: rgba(239, 32, 40, 0.75);
  transform: scaleX(0.45);
  transform-origin: left center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn-tertiary span {
  color: var(--red);
  transition: transform 0.2s ease;
}
.btn-tertiary:hover,
.btn-tertiary:focus-visible {
  background: transparent;
  border-color: transparent;
  color: #fff;
  transform: none;
  box-shadow: none;
}
.btn-tertiary:hover::after,
.btn-tertiary:focus-visible::after {
  transform: scaleX(1);
  background: var(--red);
}
.btn-tertiary:hover span,
.btn-tertiary:focus-visible span {
  transform: translateX(4px);
}
.section-inline-action {
  margin-top: 24px;
}
.home-section-action .btn-tertiary {
  width: auto;
}
@media (max-width: 640px) {
  .section-inline-action {
    margin-top: 22px;
  }
  .home-section-action .btn-tertiary {
    width: auto;
    justify-content: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-tertiary,
  .btn-tertiary::after,
  .btn-tertiary span {
    transition: none;
  }
}


/* Final section-heading clipping fix (2026-09-08) */
.section-heading h2 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* =========================================================
   FINAL MOBILE FOOTER + FOLLOW-US RESPONSIVE HARDENING
   =========================================================
   These rules intentionally come last so late desktop footer overrides
   cannot win on tablet/mobile breakpoints.
*/
@media (max-width: 900px) {
  .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }
  .site-footer .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-top: 42px;
  }
  .site-footer .footer-grid {
    gap: 26px 20px;
    padding-bottom: 34px;
  }
  .site-footer .footer-logo img {
    width: min(154px, 100%);
    height: auto;
  }
  .site-footer .footer-grid > div {
    min-width: 0;
  }
  .site-footer .footer-grid h3 {
    margin-bottom: 12px;
  }
  .site-footer .footer-grid > div > a {
    overflow-wrap: anywhere;
  }

  /* Follow-us remains a clean two-column link grid on phone widths. */
  .social-follow-panel {
    padding: 24px 18px;
    gap: 22px;
  }
  .social-follow-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .social-follow-links a {
    min-width: 0;
    min-height: 70px;
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    gap: 8px;
    padding: 13px 11px;
  }
  .social-follow-links i {
    width: 28px;
    height: 28px;
  }
  .social-follow-links span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }
  .site-footer .footer-grid > :first-child {
    grid-column: auto;
  }
  .social-follow-links a {
    min-height: 64px;
    padding-inline: 10px;
  }
}

/* =========================================================
   FINAL FOLLOW-US RESPONSIVE PASS — PRODUCTION
   The component is shared by the five main pages, so these rules
   intentionally live at the end of the stylesheet to make its layout
   predictable at every supported viewport size.
   ========================================================= */
.social-follow-section,
.social-follow-section .container,
.social-follow-panel,
.social-follow-copy,
.social-follow-links,
.social-follow-links a,
.social-follow-links span {
  min-width: 0;
  max-width: 100%;
}

.social-follow-panel {
  width: 100%;
}

.social-follow-copy p {
  overflow-wrap: anywhere;
}

.social-follow-links a {
  overflow: hidden;
}

.social-follow-links span {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Tablet and compact desktop: avoid four squeezed social columns. */
@media (max-width: 900px) {
  .social-follow-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .social-follow-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .social-follow-links a {
    min-width: 0;
    min-height: 74px;
    grid-template-columns: 32px minmax(0, 1fr) 14px;
    gap: 9px;
  }

  .social-follow-links a:nth-child(2n) {
    border-right: 0;
  }

  .social-follow-links a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

/* Phone widths: two columns remain readable while there is enough room. */
@media (max-width: 640px) {
  .social-follow-section {
    padding-inline: 0;
  }

  .social-follow-panel {
    padding: 24px 18px;
    gap: 22px;
  }

  .social-follow-copy h2 {
    font-size: clamp(1.8rem, 9vw, 2.35rem);
    line-height: 1.08;
  }

  .social-follow-copy p {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.7;
  }

  .social-follow-links a {
    min-height: 70px;
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    gap: 8px;
    padding: 13px 11px;
  }

  .social-follow-links i {
    width: 28px;
    height: 28px;
  }

  .social-follow-links span {
    font-size: 11px;
  }
}

/* Narrow phones: use one full-width link per row instead of squeezing labels. */
@media (max-width: 480px) {
  .social-follow-panel {
    padding: 22px 16px;
    gap: 20px;
  }

  .social-follow-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .social-follow-links a,
  .social-follow-links a:nth-child(2n) {
    border-right: 0;
  }

  .social-follow-links a {
    min-height: 58px;
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
  }

  .social-follow-links a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .social-follow-links a:last-child {
    border-bottom: 0;
  }

  .social-follow-links span {
    font-size: 12px;
  }
}

/* Extra-narrow devices retain touch-friendly spacing without horizontal overflow. */
@media (max-width: 360px) {
  .social-follow-panel {
    padding-inline: 14px;
  }

  .social-follow-links a {
    min-height: 56px;
    padding-inline: 9px;
  }
}

/* =========================================================
   FINAL MOBILE FOOTER COLUMN LAYOUT — OPTION A
   On phone-sized screens, stack Quick Links and Services vertically.
   This avoids narrow columns and keeps footer navigation easy to scan/tap.
   ========================================================= */
@media (max-width: 640px) {
  .site-footer .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .site-footer .footer-grid > :first-child {
    grid-column: auto;
  }
}

/* =========================================================
   FINAL RESPONSIVE HARDENING — viewport-tested fixes
   ========================================================= */

/* The home-page About editorial layout must not stay in two narrow
   columns on tablet portrait widths.  Stack it before either column
   becomes too small and crops the image/text composition. */
@media (max-width: 900px) {
  .about-layout .editorial-row,
  .why-layout .editorial-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .about-layout .editorial-row .editorial-image,
  .about-layout .editorial-row .editorial-copy,
  .why-layout .editorial-row .editorial-image,
  .why-layout .editorial-row .editorial-copy {
    width: 100%;
    min-width: 0;
  }

  .about-layout .editorial-row .editorial-image,
  .why-layout .editorial-row .editorial-image {
    aspect-ratio: 600 / 402;
    height: auto;
  }
}

/* Social links: keep the label and outbound arrow on the same line on
   wide layouts, then use a true 2×2 layout before individual columns
   become too narrow. */
@media (min-width: 1281px) {
  .social-follow-links a {
    grid-template-columns: 32px minmax(0, 1fr) max-content;
    overflow: visible;
  }

  .social-follow-links span {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  .social-follow-links b {
    justify-self: end;
    white-space: nowrap;
  }
}

@media (max-width: 1280px) and (min-width: 901px) {
  .social-follow-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .social-follow-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .social-follow-links a {
    min-width: 0;
    min-height: 74px;
    grid-template-columns: 32px minmax(0, 1fr) max-content;
    gap: 10px;
    overflow: visible;
  }

  .social-follow-links a:nth-child(2n) {
    border-right: 0;
  }

  .social-follow-links a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .social-follow-links span,
  .social-follow-links b {
    white-space: nowrap;
  }

  .social-follow-links b {
    justify-self: end;
  }
}

/* =========================================================
   TABLET WHY SECTION ORDER — 2026-09-08
   Keep desktop unchanged. On tablet widths, the Home-page Why
   TECHIRAY section stacks with the image first, matching mobile.
   ========================================================= */
@media (min-width: 641px) and (max-width: 900px) {
  .why-layout .editorial-row .editorial-image {
    order: 1;
  }

  .why-layout .editorial-row .editorial-copy {
    order: 2;
  }
}

/* =========================================================
   SERVICE DETAIL — HOW WE WORK CARD COUNT
   Keep the separate point-card design, with all four process
   thumbnails on one row at desktop widths.
   ========================================================= */
@media (min-width: 901px) {
  .service-process-points {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}