/* ==========================================================================
   About page — "Who We Are" intro, Our Team rotator, Meet The Team grid,
   Our Clients marquee, Contact Us (form + map). Built entirely from the
   shared tokens/components so it feels like one continuous site with the
   home page, not a bolted-on second design.
   ========================================================================== */

/* ---------- Who We Are (dark intro banner) ---------- */
.about-hero {
  position: relative;
  /* Reduced from space-5 — with the eyebrow removed below, the section
     had extra unclaimed height at the top otherwise. */
  padding-top: calc(var(--header-h) + var(--space-4));
  background: var(--navy-900);
  overflow: hidden;
  color: var(--text-on-dark);
}

/* Same decorative treatment as the home hero's background, at a lower
   intensity — keeps the two pages feeling like the same site without
   the About page needing its own full HUD-eye moment. */
.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(55% 50% at 85% 20%, rgba(0, 163, 255, 0.16) 0%, rgba(0, 163, 255, 0) 60%),
    radial-gradient(45% 40% at 10% 90%, rgba(38, 56, 128, 0.45) 0%, rgba(38, 56, 128, 0) 65%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-900) 100%);
}

.about-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 60% at 50% 0%, black 0%, transparent 75%);
}

.about-hero .container {
  position: relative;
  z-index: 1;
}

/* Reduced from space-5 now that the eyebrow line above it is gone —
   the heading alone needs less breathing room below it. */
.about-hero .section-head {
  margin-bottom: var(--space-4);
}

/* Matches the home page's "About LightBOX" heading exactly (fs-h3, not
   the larger fs-h2 the shared .section-head rule defaults to) — this
   was the biggest source of the About page reading larger than Home. */
.about-hero .section-head h1 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.who-we-are-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  /* Was "center" — that vertically centered the (shorter) text block
     against the (taller) image, so the text appeared to start lower
     than the image. "start" makes both begin at the same top point. */
  align-items: start;
  padding-bottom: var(--space-5);
}

@media (max-width: 960px) {
  .who-we-are-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.who-we-are-copy {
  margin-top: var(--space-2);
}

.who-we-are-copy p {
  /* Reduced one step from fs-body to fs-body-sm, per request — no
     longer matches the home page's about-copy size exactly. */
  font-size: var(--fs-body-sm);
  color: var(--mist);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
}

.who-we-are-copy p:last-child {
  margin-bottom: 0;
}

.who-we-are-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
  border: 1px solid var(--border-dark-strong);
  box-shadow: var(--shadow-lg), 0 0 70px rgba(0, 163, 255, 0.12);
}

.who-we-are-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.who-we-are-visual .thumb-placeholder {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-4);
}

.who-we-are-visual .thumb-placeholder svg {
  width: 36px;
  height: 36px;
  color: var(--electric-2);
}

.who-we-are-visual.img-missing img {
  display: none;
}

.who-we-are-visual.img-missing .thumb-placeholder {
  display: flex;
}

/* ---------- Our Team (compact crossfading statement) ---------- */
.team-intro {
  /* Reduced again — this section should feel like a brief pause
     between Who We Are and Meet The Team, not its own full section. */
  padding-block: var(--space-3);
}

.team-intro .section-head {
  margin-bottom: var(--space-2);
}

.text-rotator {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  /* Reduced alongside the smaller font size below. */
  min-height: 2.2em;
  text-align: center;
}

.text-rotator__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  /* Reduced again — now matches the site's base body-text size, so
     this genuinely reads as quiet supporting text. */
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--lh-snug);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out);
  pointer-events: none;
}

.text-rotator__item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .text-rotator__item {
    transition: opacity var(--dur-base) linear;
  }
}

/* ---------- Meet The Team ---------- */

/* Smaller than the shared .section-head h2 default (fs-h2) — was
   reading larger than needed for this heading specifically. */
.team-section .section-head h2 {
  font-size: var(--fs-h3);
}

/* Switched from text-decoration to a pseudo-element bar — text-decoration
   always spans the full width of the text it's applied to, so there was
   no way to make it shorter than "The" itself while still using it. This
   version can be any width, independent of the text. */
.heading-accent {
  position: relative;
  display: inline-block;
}

.heading-accent::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  border-radius: 2px;
  background: var(--electric-dim);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

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

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

.team-card {
  text-align: center;
}

.team-photo {
  position: relative;
  /* Increased from 136px — was reading a bit small for the card. */
  width: 168px;
  height: 168px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ice-100) 0%, var(--white) 100%);
  border: 3px solid var(--white);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.team-card:hover .team-photo {
  transform: scale(1.05);
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(0, 163, 255, 0.25);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-photo .thumb-placeholder {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: var(--ice-100);
  /* Was brand-mid — too pale against its own ice-100 backdrop (2.26:1,
     fails even the relaxed 3:1 UI-component threshold). electric-dim
     matches the rest of the page's icon color and passes comfortably. */
  color: var(--electric-dim);
}

.team-photo .thumb-placeholder svg {
  width: 44px;
  height: 44px;
}

.team-photo.img-missing img {
  display: none;
}

.team-photo.img-missing .thumb-placeholder {
  display: flex;
}

.team-name {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--ink);
  /* Increased from 4px — name and role text were reading cramped
     together with almost no separation. */
  margin-bottom: 8px;
}

.team-role {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
}

.team-role svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--electric-dim);
}

/* ---------- Our Clients (infinite logo marquee) ---------- */

/* Real reduction from the default .section padding (var(--space-6)) —
   this section is just a strip of logos, it doesn't need full section
   height on either side. */
.clients-section {
  padding-block: var(--space-4);
}

.clients-section .section-head--center {
  margin-bottom: var(--space-3);
}

.clients-marquee {
  overflow: hidden;
  /* Fades logos in/out at the edges instead of an abrupt cut-off. */
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.clients-track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}

.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Exactly -50% because the logo set is duplicated once below it —
       this is what makes the loop seamless with no visible jump. */
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-track {
    animation: none;
  }
  .clients-marquee {
    overflow-x: auto;
  }
}

.client-logo {
  flex-shrink: 0;
  width: 136px;
  /* Trimmed from 76px — modest reduction in line with the rest of this
     pass, still comfortably large enough for a logo to read clearly. */
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--dur-base) var(--ease-out);
}

.client-logo:hover {
  filter: grayscale(0) opacity(1);
}

.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.client-logo .thumb-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
}

.client-logo .thumb-placeholder svg {
  width: 26px;
  height: 26px;
}

.client-logo.img-missing img {
  display: none;
}

.client-logo.img-missing .thumb-placeholder {
  display: flex;
}

/* ---------- Contact Us ---------- */

/* Trimmed to a tight strip — this is the last section on the page,
   so it should read as a compact "get in touch" card, not a full
   section height. The form column and the map below both got a
   matching pass so the whole block shrinks together, not just its
   outer padding. */
.contact-section {
  padding-block: var(--space-2);
}

.contact-section .section-head--center {
  margin-bottom: var(--space-2);
}

/* Smaller, wide-tracked micro-label — scoped to this section only,
   so the shared .eyebrow style used elsewhere on the page (Our Team,
   Our Clients) is untouched. Reads as a quiet card header rather
   than a full section title. */
.contact-section .eyebrow {
  font-size: 0.8825rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: stretch;
  /* Faint card wrapper around the whole contact area — kept neutral
     (plain white, matching the section's own background) rather than
     a tinted fill, so the box doesn't compete with the rest of the
     section's colors. The shape now comes through almost entirely
     via the hairline border and a very soft, low-opacity shadow
     instead of a visible fill — a whisper of a card, not a block. */
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.04);
  padding: var(--space-3);
}

@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr;
    padding: var(--space-3);
  }
}

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

.contact-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.contact-address svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--electric-dim);
  margin-top: 2px;
}

.contact-address p {
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
  line-height: var(--lh-relaxed);
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body-sm);
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}

.contact-line:hover {
  color: var(--electric-dim);
}

.contact-line svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--electric-dim);
}

.contact-socials {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
}

.contact-socials a {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--ice-100);
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.contact-socials a:hover {
  background: var(--brand-navy);
  color: var(--white);
  transform: translateY(-2px);
}

.contact-socials svg {
  width: 15px;
  height: 15px;
}

/* ---------- Contact form ---------- */
.contact-form {
  padding-top: 10px;
  border-top: 1px solid var(--line-light);
}

/* Name + Email share a row — cuts a full field-height out of the
   form's total, which is what actually shrinks the section (and,
   via align-items: stretch on .contact-grid, the map next to it).
   Falls back to a single column once the form itself gets narrow,
   so fields never feel squeezed. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 420px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-field {
  /* Reduced again — the info block above already takes real estate,
     so the form itself needs to stay as compact as it can while
     still keeping fields from feeling stacked on top of each other. */
  margin-bottom: 8px;
}

/* Small, wide-tracked uppercase label instead of a bold sentence-case
   one — this is what actually reads as "premium": a quiet micro-label
   sitting above a clean field, the way well-designed SaaS forms do
   it, rather than a heavy heading-style word competing with the
   input below it. */
.form-field label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 9px 13px;
  background: var(--ice);
  border: 1.5px solid var(--line-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.form-field textarea {
  resize: vertical;
  min-height: 44px;
  line-height: var(--lh-snug);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--mist-dim);
  font-weight: 400;
}

.form-field input:hover,
.form-field textarea:hover {
  border-color: var(--brand-pale);
}

/* Soft glow ring on focus, on top of the border swap that was already
   there — a small touch, but it's the difference between a field
   that just "changes color" and one that feels intentionally
   designed to respond to you. */
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--electric-dim);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0, 163, 255, 0.12);
}

.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) {
  border-color: #C63636;
}

/* Honeypot spam trap — invisible to real visitors, catches bots that
   fill in every field. Not part of the visible form. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form .btn {
  /* Was width:100% — a full-width bar read heavy next to the now-
     compact fields around it. Shrunk to fit its own label and
     centered, matching the smaller, calmer scale of the rest of the
     card. */
  display: block;
  width: fit-content;
  min-width: 120px;
  margin: 6px auto 0;
}

.form-status {
  margin-top: 6px;
  font-size: 0.8125rem;
  min-height: 1.2em;
}

.form-status[data-state='success'] {
  color: #1A7A51;
}

.form-status[data-state='error'] {
  color: #C63636;
}

/* ---------- Contact map ---------- */
.contact-map {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-md);
  /* This is mostly a floor — align-items: stretch on .contact-grid
     already syncs the map's actual height to the info+form column on
     desktop. Lowered again now that the form itself is shorter (Name/
     Email share a row, labels and fields are all a size down), so the
     map settles in as a compact companion piece next to it rather
     than a tower next to a short form. */
  min-height: 160px;
}

.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 960px) {
  .contact-map {
    min-height: 200px;
  }
}