/* ============================================================
   Melosh Enterprise Limited | style.css
   Apple-inspired: generous whitespace, big type, glass surfaces
   ============================================================ */

:root {
  --ink: #1d1d1f;
  --ink-soft: #4b4b50;
  --ink-faint: #86868b;
  --bg: #ffffff;
  --bg-grey: #f5f5f7;
  --dark: #0b0f14;
  --dark-card: #161b22;
  --dark-border: rgba(255, 255, 255, 0.08);
  /* Brand colors sampled from the Melosh logo */
  --accent: #de1f26;
  --accent-bright: #f04349;
  --accent-soft: rgba(222, 31, 38, 0.1);
  --steel: #7f8fa2;
  --steel-light: #a9b6c6;
  --radius: 20px;
  --radius-lg: 28px;
  --container: 1180px;
  --nav-h: 64px;
  /* How far the section below overlaps the hero. The hero is grown by the same
     amount so the overlap sits below the fold and is never visible on load. */
  --hero-overlap: 64px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

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

section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ============ NAVBAR ============ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
              height 0.4s var(--ease);
}

/* Compact glass bar once the visitor scrolls past the hero top */
.nav.scrolled {
  --nav-h: 52px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 36px;
  width: auto;
  transition: height 0.4s var(--ease);
}

.nav.scrolled .brand-logo { height: 30px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.9rem;
  font-weight: 500;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav.scrolled .nav-links a { color: var(--ink-soft); }
.nav.scrolled .nav-links a:hover { color: var(--ink); }

.nav-cta {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff !important;
  transition: background 0.25s var(--ease) !important;
}
.nav-cta:hover { background: var(--accent-bright); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.scrolled .nav-toggle span,
.nav.menu-open .nav-toggle span { background: var(--ink); }
.nav.menu-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.menu-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: calc(100vh + var(--hero-overlap));
  min-height: calc(100svh + var(--hero-overlap));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  /* the overlap is added to the bottom padding too, so the extra height goes
     entirely below the fold and the headline stays optically centred */
  padding: calc(var(--nav-h) + 40px) 24px calc(80px + var(--hero-overlap));
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transform: scale(1.06); /* headroom so the parallax drift never shows edges */
}

/* Darkens the photo toward the top and bottom so the headline and the
   transition into the stats strip stay clean */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 15, 20, 0.5) 0%,
    rgba(11, 15, 20, 0.22) 45%,
    rgba(11, 15, 20, 0.78) 100%
  );
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.hero-glow-1 {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(222, 31, 38, 0.4), transparent 65%);
  top: -140px;
  right: -120px;
}
.hero-glow-2 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(84, 104, 130, 0.5), transparent 65%);
  bottom: -160px;
  left: -140px;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 22px;
}

.hero-title {
  font-size: clamp(3rem, 9vw, 6.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 28px;
}

.hero-line { display: block; }

.hero-line-accent {
  background: linear-gradient(100deg, var(--accent-bright), #f58f93 55%, var(--steel-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: rgba(255, 255, 255, 0.72);
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(222, 31, 38, 0.3);
}
.btn-primary:hover {
  background: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(222, 31, 38, 0.4);
}

/* Arrow button: icon slides forward on hover */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-arrow svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}
.btn-arrow:hover svg { transform: translateX(4px); }

.btn-ghost {
  /* transparent explicitly: <button> elements carry a UA background */
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: inherit;
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
}

.btn-lg { padding: 17px 40px; font-size: 1.05rem; }

/* The first section after the hero reads as a panel sliding up over it.
   The hero recedes underneath on scroll (see main.js). */
.hero-next {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--hero-overlap));
  border-radius: 34px 34px 0 0;
  background: var(--bg);
  box-shadow: 0 -26px 60px rgba(11, 15, 20, 0.34);
}

/* ============ SECTIONS (shared) ============ */
.section { padding: 120px 0; }

.section-grey { background: var(--bg-grey); }

.section-dark {
  background: var(--dark);
  color: #fff;
}

.section-head {
  max-width: 760px;
  margin-bottom: 64px;
}

.section-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-dark .section-eyebrow { color: var(--accent-bright); }

.section-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.section-sub {
  margin-top: 18px;
  font-size: 1.1rem;
  color: var(--ink-faint);
  max-width: 620px;
}
.section-dark .section-sub { color: rgba(255, 255, 255, 0.6); }

/* ============ ABOUT ============ */
.about-photo {
  margin: 0 0 72px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14);
}

/* The banner is a composed layout with its logo hard left and the figure hard
   right, so any crop cuts one of them off. It is shown whole at every width. */
.about-photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 78%;
  display: block;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}

.about-text .lead {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 22px;
}

.about-text p:not(.lead) {
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.about-cards {
  display: grid;
  gap: 18px;
}

.value-card {
  background: var(--bg-grey);
  border-radius: var(--radius);
  padding: 30px 28px;
}

.value-card h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.value-card p {
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.values-heading {
  margin-top: 72px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.values-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.value-pill {
  display: flex;
  gap: 14px;
  padding: 24px 22px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.value-pill:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.value-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  padding-top: 3px;
}

.value-pill h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.value-pill p {
  font-size: 0.88rem;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ============ SERVICES ============ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

/* Same card as the rest. It leads the grid and carries the only accent line in
   the section, which is what marks it out rather than extra size. */
.service-sub {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.service-sub b {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent-bright);
}

/* The photo is the card: full-bleed background, tinted, text on top */
.service-card {
  position: relative;
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(222, 31, 38, 0.45);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
}

.service-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.service-card:hover .service-bg { transform: scale(1.05); }

/* Tint that keeps the photo visible up top and the text readable below */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 15, 20, 0.2) 0%,
    rgba(11, 15, 20, 0.55) 45%,
    rgba(11, 15, 20, 0.94) 100%
  );
  z-index: 1;
}

.service-content {
  position: relative;
  z-index: 2;
  padding: 120px 30px 30px;
  width: 100%;
}

.service-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.additional {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--dark-border);
}

.additional h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}

.additional-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Premium expand/collapse toggle */
.btn-expand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid var(--dark-border);
  border-radius: 999px;
  background: rgba(22, 27, 34, 0.6);
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.btn-expand:hover {
  border-color: rgba(222, 31, 38, 0.5);
  color: #fff;
  transform: translateY(-1px);
}
.btn-expand svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--ease);
}
.additional.expanded .btn-expand svg { transform: rotate(180deg); }

/* Smooth height + fade expansion, no layout jumps */
.additional-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.additional.expanded .additional-panel { grid-template-rows: 1fr; }

.additional-panel-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease) 0.05s, transform 0.4s var(--ease) 0.05s;
}
.additional.expanded .additional-panel-inner {
  opacity: 1;
  transform: translateY(0);
}

.additional-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
  padding-bottom: 4px;
}

/* Addon cards reuse .service-card; narrower columns get slightly
   tighter type so titles fit on the smaller cards */
.additional-grid .service-card h3 { font-size: 1.12rem; }
.additional-grid .service-content { padding: 100px 24px 26px; }
.additional-grid .service-card p { font-size: 0.88rem; }

/* ============ INDUSTRIES ============ */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.industry {
  position: relative;
  padding: 44px 24px;
  background: var(--bg-grey);
  border-radius: var(--radius);
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease),
              color 0.3s var(--ease);
}
.industry:hover {
  transform: translateY(-4px);
  background: var(--dark);
  color: #fff;
}
.industry span { position: relative; z-index: 1; }

/* ============ TEAM ============ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* The photo fills the card; a bottom-up gradient keeps the text legible */
.team-card {
  position: relative;
  background: var(--dark-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* fixed, not min-height: a long bio must not grow one card past the others */
  height: 520px;
  display: flex;
  align-items: flex-end;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}

.team-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transition: transform 0.6s var(--ease);
}
.team-card:hover .team-bg { transform: scale(1.04); }

.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 15, 20, 0.02) 0%,
    rgba(11, 15, 20, 0.3) 38%,
    rgba(11, 15, 20, 0.9) 66%,
    rgba(11, 15, 20, 0.97) 100%
  );
  z-index: 1;
}

.team-content {
  position: relative;
  z-index: 2;
  padding: 150px 28px 30px;
  width: 100%;
  color: #fff;
}

.team-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.team-role {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent-bright);
  margin: 6px 0 14px;
}

.team-bio {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  /* Four lines on every card. That is the depth the text block sat at before
     the long bio arrived, and it keeps the block low enough that it never
     reaches up into anyone's face. Length differences go behind the button. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-card.is-open .team-bio {
  /* capped so the text can never outgrow the card; longer profiles scroll */
  -webkit-line-clamp: unset;
  max-height: 230px;
  overflow-y: auto;
}
.team-card.is-open .team-bio::-webkit-scrollbar { width: 4px; }
.team-card.is-open .team-bio::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
}

/* the scrim deepens while a profile is open so the text stays legible */
.team-card.is-open::before {
  background: linear-gradient(
    180deg,
    rgba(11, 15, 20, 0.25) 0%,
    rgba(11, 15, 20, 0.72) 26%,
    rgba(11, 15, 20, 0.96) 52%,
    rgba(11, 15, 20, 0.98) 100%
  );
}

.team-more {
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent-bright);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.team-more:hover { border-bottom-color: var(--accent-bright); }
.team-more:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.team-note {
  margin-top: 44px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-faint);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ WHY US ============ */
/* An editorial list rather than cards: hairline rules carry the structure, so
   the numerals and the titles do the work instead of borders. */
.why-list {
  max-width: 940px;
  margin: 0 auto;
}

.why-item {
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: start;
  padding: 48px 0;
  border-top: 1px solid var(--dark-border);
  transition: transform 0.45s var(--ease);
}

.why-item:last-child {
  border-bottom: 1px solid var(--dark-border);
}

.why-num {
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.85;
  /* sits back far enough to read as structure, not as a heading */
  color: rgba(255, 255, 255, 0.17);
  font-variant-numeric: tabular-nums;
  transition: color 0.45s var(--ease);
}

.why-item h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.why-item p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.7;
  max-width: 58ch;
}

/* Restrained hover: the row eases across and the numeral steps forward.
   Pointer devices only, so touch never leaves a row stuck mid-transform. */
@media (hover: hover) {
  .why-item:hover {
    transform: translateX(10px);
  }
  .why-item:hover .why-num {
    color: var(--accent-bright);
  }
}

/* ============ TESTIMONIALS ============ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.testimonial {
  background: var(--bg-grey);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
}

.testimonial p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.testimonial cite {
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.partners {
  margin-top: 72px;
  text-align: center;
}

.partners-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 22px;
}

.partners-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 48px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}

/* ============ PRE-FOOTER CTA + CONTACT ============ */
.pre-footer {
  position: relative;
  background: var(--dark);
  color: #fff;
  padding: 160px 0 140px;
  overflow: hidden;
}

.pre-footer-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Site photograph bleeding in from the right edge. The gradient holds the
   centred copy over clean dark and lets the image resolve only at the edge,
   so it reads as depth rather than as a picture behind the text. */
.pf-photo {
  position: absolute;
  inset: 0;
}

/* Two frames crossfading on a long cycle. The halves overlap, so one is always
   arriving as the other leaves and the section never dips to bare colour. */
.pf-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  animation: pfCrossfade 18s ease-in-out infinite;
}

.pf-slide-1 { background-image: url("../assets/contact-bg.webp"); }
.pf-slide-2 {
  background-image: url("../assets/contact-bg-2.webp");
  animation-delay: 9s;
}

/* Holds to the halfway mark, then hands over exactly as the other frame rises,
   so the two fades overlap instead of leaving a gap. */
@keyframes pfCrossfade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

.pf-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--dark) 0%,
    var(--dark) 38%,
    rgba(11, 15, 20, 0.78) 58%,
    rgba(11, 15, 20, 0.34) 76%,
    rgba(11, 15, 20, 0.1) 100%
  );
}

.pf-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
}
.pf-glow-1 {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(222, 31, 38, 0.16), transparent 65%);
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
}
.pf-glow-2 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(84, 104, 130, 0.22), transparent 65%);
  bottom: -220px;
  right: -160px;
}

.pre-footer .container { position: relative; }

.contact-cta {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 96px;
}

.cta-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 22px;
}

.contact-cta h2 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 26px;
}

.contact-cta h2 span {
  background: linear-gradient(100deg, var(--accent-bright), #f58f93 55%, var(--steel-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cta-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 44px;
}

.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Trust indicators */
.trust-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid var(--dark-border);
  border-radius: 999px;
  background: rgba(22, 27, 34, 0.6);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.trust-item:hover {
  border-color: rgba(222, 31, 38, 0.45);
  color: #fff;
  transform: translateY(-2px);
}
.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--steel-light);
  flex-shrink: 0;
  transition: color 0.3s var(--ease);
}
.trust-item:hover svg { color: var(--accent-bright); }

/* ============ FOOTER ============ */
.footer {
  background: #070a0e;
  color: rgba(255, 255, 255, 0.55);
  border-top: 1px solid var(--dark-border);
  padding: 96px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.3fr;
  gap: 64px;
  padding-bottom: 80px;
}

.footer-logo {
  height: 44px;
  width: auto;
  margin-bottom: 26px;
}

.footer-mission {
  font-size: 0.93rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
  max-width: 360px;
  margin-bottom: 30px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--dark-border);
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.footer-social a:hover {
  color: #fff;
  border-color: rgba(222, 31, 38, 0.5);
  transform: translateY(-2px);
}
.footer-social svg { width: 17px; height: 17px; }

.footer-col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 0.92rem;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.footer-nav a:hover {
  color: #fff;
  padding-left: 4px;
}

.footer-contact {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.75;
}
.footer-contact p { margin-bottom: 16px; }
.footer-contact a { transition: color 0.25s var(--ease); }
.footer-contact a:hover { color: var(--accent-bright); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 28px 0 32px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
}

.footer-legal {
  display: flex;
  gap: 26px;
}
.footer-legal a { transition: color 0.25s var(--ease); }
.footer-legal a:hover { color: #fff; }

/* ============ REVEAL (JS hooks) ============ */
[data-reveal], [data-hero] {
  opacity: 0;
}

/* If JS fails or reduced motion, show everything */
.no-motion [data-reveal],
.no-motion [data-hero] {
  opacity: 1 !important;
  transform: none !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  :root { --hero-overlap: 48px; }
  .section { padding: 88px 0; }

  /* Copy runs full width on a phone, so the photo fills the section instead of
     hugging the right edge, and the scrim turns vertical and much heavier. */
  .pf-slide {
    background-size: cover;
    background-position: center;
  }
  .pf-photo::after {
    background: linear-gradient(
      180deg,
      rgba(11, 15, 20, 0.9) 0%,
      rgba(11, 15, 20, 0.83) 45%,
      rgba(11, 15, 20, 0.93) 100%
    );
  }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .values-row { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .why-item { grid-template-columns: 104px 1fr; padding: 40px 0; }
  .testimonial-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .additional-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-next { border-radius: 26px 26px 0 0; }

  .pre-footer { padding: 110px 0 100px; }
  .contact-cta { margin-bottom: 72px; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
  }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    padding: 12px 24px 24px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }

  .nav.menu-open .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    color: var(--ink) !important;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 1rem;
  }

  .nav-links .nav-cta {
    margin-top: 16px;
    text-align: center;
    border-bottom: 0;
    color: #fff !important;
  }

  /* Menu open needs a solid nav background even before scroll */
  .nav.menu-open {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }

  /* numeral moves above the title so the copy keeps full measure on a phone */
  .why-item {
    grid-template-columns: 1fr;
    padding: 32px 0;
  }
  .why-num {
    display: block;
    margin-bottom: 12px;
    line-height: 1;
  }
  .why-item p { font-size: 1rem; }

  .values-row { grid-template-columns: 1fr; }

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

  .cta-actions .btn { width: 100%; max-width: 340px; justify-content: center; }

  .additional-grid { grid-template-columns: 1fr; }
  .additional-head { flex-direction: column; align-items: flex-start; }

  /* The banner is 2.33 wide, so inside the container gutters it renders short.
     Breaking it out to the full screen is the only way to gain size without
     cropping, since its logo and figure sit hard against both edges. */
  .about-photo {
    margin: 0 calc(50% - 50vw) 48px;
    width: 100vw;
    border-radius: 0;
  }

  .footer { padding-top: 72px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ============ CONSULTATION MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}

.modal.open {
  visibility: visible;
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 9, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  background: linear-gradient(180deg, #131922, #0e1319);
  border: 1px solid var(--dark-border);
  border-radius: 24px;
  padding: 48px;
  color: #fff;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.4s var(--ease);
}

.modal.open .modal-panel {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--dark-border);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.modal-close:hover { color: #fff; border-color: rgba(222, 31, 38, 0.5); }
.modal-close svg { width: 18px; height: 18px; }

.modal-head { margin-bottom: 34px; padding-right: 40px; }

.modal-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 12px;
}

.modal-head h3 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.modal-sub {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.98rem;
  line-height: 1.6;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 18px;
}

.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field-full { grid-column: 1 / -1; }

.form-field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.form-field label span { color: var(--accent-bright); }
.form-field label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.35);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 0.95rem;
  color: #fff;
  background: #0b0f14;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  width: 100%;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255, 255, 255, 0.28); }

.form-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237f8fa2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

.form-field select option { background: #131922; color: #fff; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: rgba(222, 31, 38, 0.6);
  box-shadow: 0 0 0 3px rgba(222, 31, 38, 0.12);
}

.form-field input.invalid,
.form-field select.invalid,
.form-field textarea.invalid { border-color: rgba(222, 31, 38, 0.75); }

.form-field textarea { resize: vertical; min-height: 110px; }

.form-field input[type="datetime-local"] { color-scheme: dark; }

.form-error {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--accent-bright);
}

.form-submit {
  margin-top: 26px;
  width: 100%;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* Success state */
.consult-success { text-align: center; padding: 28px 10px 10px; }

.success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(222, 31, 38, 0.12);
  color: var(--accent-bright);
}
.success-icon svg { width: 30px; height: 30px; }

.consult-success h3 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.consult-success p {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  max-width: 440px;
  margin: 0 auto 14px;
}

.success-alt a { color: var(--accent-bright); font-weight: 600; }
.success-alt a:hover { text-decoration: underline; }

body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .modal { padding: 12px; }
  .modal-panel { padding: 32px 22px; border-radius: 20px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ============ LEGAL PAGES ============ */
.legal-hero {
  background: var(--dark);
  color: #fff;
  padding: calc(var(--nav-h) + 90px) 0 64px;
  position: relative;
  overflow: hidden;
}

.legal-hero::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 31, 38, 0.14), transparent 65%);
  top: -200px;
  right: -140px;
  filter: blur(80px);
  pointer-events: none;
}

.legal-breadcrumb {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--steel-light);
  margin-bottom: 26px;
  transition: color 0.25s var(--ease);
}
.legal-breadcrumb:hover { color: #fff; }

.legal-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.legal-meta {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
}

.legal-body { padding: 72px 0 110px; }

.legal-container { max-width: 820px; }

.legal-intro {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 500;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 52px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.legal-body p {
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-body ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}

.legal-body li {
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 8px;
}

.legal-body a {
  color: var(--accent);
  font-weight: 500;
}
.legal-body a:hover { text-decoration: underline; }

.footer-bottom-solo { border-top: 0; padding-top: 36px; }

@media (max-width: 720px) {
  .legal-hero { padding-top: calc(var(--nav-h) + 60px); }
  .legal-body { padding: 52px 0 80px; }
}

/* ============ NAV CLOCK ============ */
.nav-clock {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 22px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
              color 0.4s var(--ease);
}

/* live indicator */
.clock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: clockPulse 2.4s var(--ease) infinite;
}

@keyframes clockPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(222, 31, 38, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 0 5px rgba(222, 31, 38, 0); }
}

.clock-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.clock-sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
}

.clock-date {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.74rem;
}

/* on the light glass navbar after scroll */
.nav.scrolled .nav-clock {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.035);
  color: var(--ink-soft);
}
.nav.scrolled .clock-date { color: var(--ink-faint); }
.nav.scrolled .clock-sep { background: rgba(0, 0, 0, 0.14); }

@media (max-width: 1080px) {
  .clock-sep, .clock-date { display: none; }
  .nav-clock { margin-left: 14px; padding: 7px 13px; }
}

@media (max-width: 720px) {
  /* sits between the logo and the burger on mobile */
  .nav-clock { margin-left: auto; margin-right: 12px; }
}

@media (max-width: 380px) {
  .nav-clock { display: none; }
}

/* ---- consultation form: inline errors, sending state, success close ---- */
.field-error {
  display: block;
  margin-top: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-bright);
}

.form-error a {
  color: var(--accent-bright);
  font-weight: 600;
  text-decoration: underline;
}

/* sending state: swap the arrow for a spinner */
.submit-spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: submitSpin 0.7s linear infinite;
}

@keyframes submitSpin { to { transform: rotate(360deg); } }

.form-submit.is-sending { cursor: progress; opacity: 0.9; }
.form-submit.is-sending .submit-arrow { display: none; }
.form-submit.is-sending .submit-spinner { display: block; }
.form-submit:disabled { pointer-events: none; }

.success-close {
  margin-top: 26px;
  padding: 13px 32px;
  font-size: 0.95rem;
}