/* =========================================================
   iTRACE Medical — stylesheet
   Palette, type and layout for the static clone.
   Recolor via the :root variables below to match brand.
   ========================================================= */

:root {
  --ink:        #0A1F33;   /* deep navy ink */
  --ink-2:      #0E2C47;
  --hero-bg:    #007B95;   /* hero background */
  --bg:         #FFFFFF;
  --bg-alt:     #F3F7FB;   /* cool off-white */
  --accent:     #ff9100;   /* detection orange */
  --accent-deep:#cc7400;
  --accent-soft:#ffe7cc;
  --line:       #E1E9F1;
  --muted:      #566B7D;
  --on-dark:    #EAF2F8;
  --on-dark-mut:#9DB4C6;

  --font-display: "Teachers", system-ui, sans-serif;
  --font-body:    "Teachers", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1160px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 13pt; }

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

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

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

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary {
  background: var(--accent);
  color: #04252a;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-block { width: 100%; }
.btn:active { transform: translateY(1px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 101px;
}
.brand-logo { height: 52px; width: auto; max-width: 60vw; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
/* Set by JS during window resize to stop the mobile menu sliding across the breakpoint. */
.site-nav.no-anim { transition: none !important; }
.site-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  transition: color .2s ease;
}
.site-nav a:hover { color: var(--accent-deep); }
.nav-cta {
  background: var(--ink);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: var(--radius);
}
.nav-cta:hover { background: var(--accent-deep); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--on-dark);
  padding: 123px 0 132px;
}
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,145,0,0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,145,0,0.30) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
}
.hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 26px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255,145,0,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,145,0,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,145,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,145,0,0); }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(clamp(2rem, 4.3vw, 3.3rem) + 2pt);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: #fff;
}

/* Rotating detection word — on its own line below the title */
.detector-word {
  display: block;
  margin-top: 0.12em;
  font-family: var(--font-display);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* Each letter swings open on its vertical axis; combined with the
   staggered delay in script.js this reads as a wave rolling left to right */
.flip-letter {
  display: inline-block;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  animation: flipIn .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes flipIn {
  0%   { transform: rotateY(-90deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: rotateY(0deg);   opacity: 1; }
}

.hero-sub {
  font-size: calc(clamp(1.15rem, 2.2vw, 1.45rem) + 3pt);
  color: #ffffff;
  max-width: none;
  margin: 0 auto 36px;
}

/* ---------- Generic section ---------- */
.section { padding: 72px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--ink); color: var(--on-dark); }
.section-tint { background: #DFE9EA; }

/* 75% section-break line */
.section-divider {
  width: 80%;
  margin: 0 auto 48px;
  border: 0;
  border-top: 1px solid rgba(10,31,51,0.25);
}

/* Centered accelerate headline */
#what { padding-bottom: 48px; }
.accelerate { padding-top: 0; }
.accelerate-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #007B95;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 14px;
}
.section-eyebrow.light { color: var(--accent); }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
}
.section-title.on-dark { color: #fff; }

.lede { font-size: calc(1.15rem + 1pt); color: var(--accent-deep); font-weight: 500; margin: 0; }
.dark-lede { font-size: calc(1.15rem + 1pt); color: var(--on-dark-mut); max-width: 560px; }

/* ---------- What grid ---------- */
.what-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: start;
}
.title-accent { color: var(--accent); }
.what-left { text-align: center; align-self: center; }
.what-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
}
.what-right p { margin: 0 0 18px; color: var(--muted); font-size: calc(1.05rem + 1pt); }
.what-right p:last-child { margin-bottom: 0; }

/* ---------- Why carousel ---------- */
.section-title.why-title {
  text-align: center;
  color: var(--accent);
}
.carousel {
  position: relative;
  overflow: visible;
  max-width: none;
  margin: 44px auto 0;
}
.carousel-stage {
  position: relative;
  overflow: hidden;
  min-height: 180px;
}
.carousel-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  max-width: 460px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .55s ease;
}
.carousel-slide p {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.3vw, 1.7rem);
  line-height: 1.32;
  color: #fff;
}
/* nav chevrons */
.carousel-arrow {
  position: absolute;
  top: calc(var(--stage-h, 200px) / 2);
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.carousel-arrow:hover { background: var(--accent); border-color: var(--accent); color: #04252a; }
.carousel-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carousel-arrow.prev { left: calc(50% - 50vw + 8px); }
.carousel-arrow.next { right: calc(50% - 50vw + 8px); }
/* dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  padding: 5px 0;
}
.carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.carousel-dots button:hover { background: rgba(255,255,255,0.5); }
.carousel-dots button.active {
  background: var(--accent);
  transform: scale(1.25);
}
@media (max-width: 560px) {
  .carousel-slide { width: 82%; }
  .carousel-arrow { width: 38px; height: 38px; }
}

/* ---------- Case study cards (image + caption) ---------- */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 44px;
}
.case-card {
  display: block;
  width: 375px;
  max-width: 100%;   /* never wider than the screen on small viewports */
  text-decoration: none;
  color: inherit;
}
/* Widen only the cards row so three 375px cards fit on one line on desktop,
   centered on the page, while the section heading stays aligned with the
   rest of the site. Collapses cleanly on smaller screens. */
#applications .cards {
  width: min(1176px, calc(100vw - 48px));
  margin-left: calc(50% - min(588px, (100vw - 48px) / 2));
}
#applications { background: #DFE9EA; }
#applicationsTitle { text-align: center; color: #007B95; }

/* 4 Pillars / Areas of Expertise — teal background, orange headers */
#testing { background: #007B95; }
#pillarsTitle, #expertiseTitle { color: #FF9100; }
#testing .pillars li, #testing .expertise li { color: #ffffff; border-top-color: rgba(255,255,255,0.28); }
#testing .pillars li:last-child, #testing .expertise li:last-child { border-bottom-color: rgba(255,255,255,0.28); }
#testing .note { color: #EAF2F8; }
.case-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  transition: transform .25s ease, box-shadow .25s ease;
}
.case-card:hover .case-thumb {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(10,31,51,0.35);
}
.case-caption {
  margin: 14px 4px 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(0.95rem + 1pt);
  line-height: 1.35;
  color: var(--ink);
  transition: color .2s ease;
}
.case-card:hover .case-caption { color: var(--accent-deep); }

/* ---------- Two column (pillars + expertise) ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.pillars { list-style: none; margin: 32px 0 24px; padding: 0; counter-reset: none; }
.pillars li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
}
.pillars li:last-child { border-bottom: 1px solid var(--line); }

.expertise {
  list-style: none;
  margin: 32px 0 24px;
  padding: 0;
}
.expertise li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
}
.expertise li:last-child { border-bottom: 1px solid var(--line); }
.note { color: var(--muted); font-size: calc(0.98rem + 5pt); margin: 0; text-align: left; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-mut);
}
.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 13px 15px;
  resize: vertical;
  transition: border-color .2s ease, background .2s ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,145,0,0.08);
}
.form-status { font-family: var(--font-mono); font-size: calc(0.85rem + 1pt); margin: 4px 0 0; color: var(--accent); min-height: 1em; }
.contact-form .btn[disabled] { opacity: 0.65; cursor: wait; }
.contact-form .hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: #061422;
  color: var(--on-dark-mut);
  padding: 14px 0;
  text-align: center;
}
.footer-admin {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--on-dark-mut);
  text-decoration: none;
  opacity: 0.65;
  transition: color .2s ease, opacity .2s ease;
}
.footer-admin:hover { color: var(--accent); opacity: 1; }
.footer-copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: calc(0.8rem + 1pt);
  letter-spacing: 0.02em;
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .what-grid, .two-col, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .case-card { width: 100%; }

  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 101px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
    transform: translateY(-140%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
    box-shadow: 0 20px 30px -20px rgba(10,31,51,0.3);
  }
  .site-nav.open { transform: translateY(0); visibility: visible; transition: transform .3s ease, visibility 0s; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-cta { text-align: center; margin-top: 12px; border: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 520px) {
  .expertise { grid-template-columns: 1fr; }
  .hero { padding: 80px 0 90px; }
  .section { padding: 52px 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Case study page ---------- */
.cs-main { padding: 70px 0 90px; }
.cs-head { max-width: 880px; margin: 0 auto 40px; padding-top: 40px; text-align: left; }
.cs-eyebrow {
  font-family: var(--font-mono); font-size: calc(0.8rem + 1pt); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0 0 14px;
}
.cs-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.1; margin: 0 0 18px; color: var(--ink);
}
.cs-summary { font-size: calc(1.1rem + 1pt); color: var(--muted); margin: 0; max-width: 880px; }
.cs-hero-img {
  width: 100%; max-width: 880px; margin: 40px auto 0; display: block;
  border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 16 / 8; object-fit: cover;
}
.cs-body { max-width: 880px; margin: 48px auto 0; }
.cs-body > * { margin: 0 0 22px; }
.cs-body h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.25; color: var(--ink); margin: 40px 0 14px;
}
.cs-body h3 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  line-height: 1.28; color: var(--ink); margin: 34px 0 12px;
}
.cs-body h4 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.3; color: var(--ink); margin: 28px 0 10px;
}
.cs-body p { font-size: calc(1rem + 1pt); line-height: 1.7; color: #33424f; }
.cs-body ul, .cs-body ol { padding-left: 22px; }
.cs-body li { font-size: calc(1rem + 1pt); line-height: 1.6; color: #33424f; margin-bottom: 8px; }
/* Hyphen-style list: swap the bullet for a dash. */
.cs-body ul.cs-list-hyphen { list-style: none; padding-left: 22px; }
.cs-body ul.cs-list-hyphen > li { position: relative; }
.cs-body ul.cs-list-hyphen > li::before {
  content: "–"; position: absolute; left: -18px; color: var(--muted);
}
/* Nested sub-bullets under a list item. */
.cs-body .cs-sublist { list-style: circle; margin: 8px 0 0; padding-left: 22px; }
.cs-body .cs-sublist > li { font-size: 1rem; color: #4a5966; margin-bottom: 6px; }
.cs-body ul.cs-list-hyphen .cs-sublist { list-style: none; }
.cs-body ul.cs-list-hyphen .cs-sublist > li { position: relative; }
.cs-body ul.cs-list-hyphen .cs-sublist > li::before {
  content: "–"; position: absolute; left: -18px; color: var(--muted);
}
/* Horizontal-line block — spans the text column. */
.cs-body .cs-hr { width: 100%; margin: 36px 0; border: 0; border-top: 1px solid var(--line); }
.cs-figure { margin: 32px 0; }
.cs-figure img { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
.cs-figure figcaption { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin-top: 8px; text-align: left; }
.cs-quote {
  border-left: 3px solid var(--accent); padding: 6px 0 6px 22px; margin: 32px 0;
  font-family: var(--font-display); font-size: calc(1.2rem + 1pt); line-height: 1.4; color: var(--ink);
}
.cs-quote cite { display: block; margin-top: 10px; font-family: var(--font-body); font-style: normal; font-size: 0.9rem; color: var(--muted); }
.cs-back { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; font-family: var(--font-display); font-weight: 500; color: var(--accent-deep); }
.cs-back:hover { color: var(--accent); }
.cs-back-wrap { max-width: 880px; margin: 56px auto 0; }
.cs-notfound { text-align: center; padding: 80px 0; }
.cs-notfound h1 { font-family: var(--font-display); color: var(--ink); }
.cs-loading { text-align: center; padding: 90px 0; color: var(--muted); font-family: var(--font-mono); }