/* Generic section rhythm — Section.tsx: "scroll-mt-24 px-5 py-20 sm:px-8 sm:py-28"
   on the <section>, with a SEPARATE inner "mx-auto max-w-7xl" div carrying NO
   padding of its own. Splitting these into two classes (.section for the
   outer padding, .section-inner for the plain max-width cap) matters: combining
   them into one (as an earlier pass did) shrinks the actual content width by
   2x the horizontal padding at every breakpoint. */
.section {
  scroll-margin-top: 96px;
  padding-block: 80px;
  padding-inline: 20px;
}
@media (min-width: 640px) {
  .section { padding-block: 112px; padding-inline: 32px; }
}
.section-inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}
.section-tint {
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 94%, black 6%);
}
.section-tint + .section-tint { border-top: none; }

/* Day mode: section tints lighten instead of darken (styles.css:193-195) —
   this overrides ALL the "background 9x%, black y%" tint formulas above
   (footer included) with one shared light-mode mix, regardless of the
   original dark-mode percentage. */
html.light .section-tint,
html.light .site-footer {
  background: color-mix(in oklab, var(--surface) 70%, var(--background) 30%) !important;
}

/* SectionHeading — "max-w-2xl", h2 "text-3xl leading-[1.1] font-semibold sm:text-4xl md:text-[2.75rem]" */
.section-heading { max-width: 42rem; }
.section-heading.is-center { margin-inline: auto; text-align: center; }
.section-heading h2 {
  margin-top: 12px;
  font-size: 1.875rem;
  line-height: 1.1;
  font-weight: 600;
}
@media (min-width: 640px) {
  .section-heading h2 { font-size: 2.25rem; }
}
@media (min-width: 768px) {
  .section-heading h2 { font-size: 2.75rem; }
}
.section-heading p:not(.eyebrow) {
  margin-top: 16px;
  color: var(--muted-foreground);
  font-size: 1rem;
  line-height: 1.625;
}
@media (min-width: 640px) {
  .section-heading p:not(.eyebrow) { font-size: 1.125rem; }
}

/* ===== HERO ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-veil);
}
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-block: 64px 64px;
}
@media (min-width: 640px) {
  .hero-grid { padding-block: 96px 80px; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero-h1 {
  margin-top: 20px;
  font-size: 2.25rem;
  line-height: 1.05;
  font-weight: 600;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .hero-h1 { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
  .hero-h1 { font-size: 4.25rem; }
}

.hero-sub {
  margin-top: 24px;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .hero-sub { font-size: 1.125rem; }
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.mode-list {
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 24px;
  max-width: 32rem;
  list-style: none;
}
@media (min-width: 640px) {
  .mode-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mode-list > div {
  border-inline-start: 2px solid color-mix(in oklab, var(--primary) 60%, transparent);
  padding-inline-start: 12px;
}
.mode-list dt {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}
.mode-list dd {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.hero-globe-wrap {
  position: relative;
  margin-inline: auto;
  aspect-ratio: 1;
  width: 100%;
  max-width: 34rem;
}
.hero-globe-caption {
  margin: -24px auto 0;
  width: fit-content;
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ===== STATS BAND ======================================================= */
.stats-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .stats-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stats-band > div {
  padding: 28px 20px;
  text-align: center;
  border-color: var(--border);
}
@media (min-width: 640px) {
  .stats-band > div { padding-block: 36px; }
}
.stats-band > div:not(:first-child) {
  border-inline-start: 1px solid var(--border);
}
@media (max-width: 639px) {
  .stats-band > div:nth-child(2n) { border-inline-start: 1px solid var(--border); }
  .stats-band > div:nth-child(1),
  .stats-band > div:nth-child(2) { border-bottom: 1px solid var(--border); }
}
.stats-band dd {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 640px) {
  .stats-band dd { font-size: 2.25rem; }
}
.stats-band dt {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .stats-band dt { font-size: 0.875rem; }
}

/* ===== SERVICES GRID ==================================================== */
.services-grid {
  margin-top: 56px;
  display: grid;
  gap: 20px;
}
@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-card {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}
.service-card-media {
  position: relative;
  height: 13rem;
  overflow: hidden;
}
@media (min-width: 640px) {
  .service-card-media { height: 15rem; }
}
.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: transform 1.2s var(--ease-premium), opacity 1.2s var(--ease-premium);
}
.service-card:hover .service-card-media img {
  transform: scale(1.07);
  opacity: 0.9;
}
.service-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-veil);
}
.service-card-body {
  position: relative;
  margin-top: -56px;
  padding: 24px;
}
@media (min-width: 640px) {
  .service-card-body { padding: 28px; }
}
.service-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}
.service-card-body p {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}
.service-card-link {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}
.service-card-link svg { width: 16px; height: 16px; transition: transform 0.2s; }
.service-card:hover .service-card-link svg { transform: translateX(4px); }

/* ===== ICON CARD GRIDS (value-added / advantages) ====================== */
.vas-grid {
  margin-top: 40px;
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) { .vas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vas-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.vas-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  transition: transform 0.3s var(--ease-premium);
}
.vas-card:hover { transform: translateY(-4px); }
.vas-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
}
.vas-icon svg { width: 24px; height: 24px; }
.vas-card h3 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}
.vas-card p {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.why-grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: 0.9fr 1.1fr; }
}
.advantages-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) { .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.advantage-card {
  height: 100%;
  padding: 24px;
  transition: transform 0.5s;
}
.advantage-card:hover { transform: translateY(-4px); }
.advantage-card svg { width: 24px; height: 24px; color: var(--primary); }
.advantage-card h3 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}
.advantage-card p {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}

/* ===== PROCESS =========================================================== */
.process-grid {
  position: relative;
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  list-style: none;
}
@media (min-width: 768px) {
  .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.process-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 24px;
}
.process-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: color-mix(in oklab, var(--primary) 25%, transparent);
  transition: color 0.5s;
}
.process-card:hover .process-number { color: color-mix(in oklab, var(--primary) 50%, transparent); }
.process-card h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}
.process-card p {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}
.process-sweep {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  transform: scaleX(0);
  background: var(--gradient-brand);
  transition: transform 0.7s var(--ease-premium);
}
.process-card:hover .process-sweep { transform: scaleX(1); }

/* ===== NEWS ============================================================== */
.news-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.news-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary);
}
.news-grid {
  margin-top: 48px;
  display: grid;
  gap: 24px;
}
@media (min-width: 640px) {
  .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.news-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}
.news-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--muted);
}
.news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-premium);
}
.news-card:hover .news-card-media img { transform: scale(1.05); }
/* Source's placeholder is "bg-[var(--gradient-brand)] opacity-25" — same
   Tailwind arbitrary-value bug seen elsewhere (bg-[var(...)] silently
   produces no background-image on the real site), so it actually just
   shows flat bg-muted (confirmed via computed style on localhost:8080/news).
   Matched here rather than "fixed", since it's purely decorative. */
.news-card-media .placeholder {
  width: 100%;
  height: 100%;
}
.news-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}
.news-card-body .cat { font-size: 0.75rem; color: var(--primary); }
.news-card-body h3 {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
}
.news-card-body p {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== QUOTE ============================================================= */
.quote-grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 1024px) {
  .quote-grid { grid-template-columns: 0.85fr 1.15fr; }
}

/* ===== Form fields — shared by tracking bar + quote form =============== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.field {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background: color-mix(in oklab, var(--background) 60%, transparent);
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--foreground);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.field:focus {
  border-color: color-mix(in oklab, var(--primary) 70%, transparent);
  box-shadow: 0 0 0 2px var(--ring);
}
select.field { appearance: none; }

/* ===== TRACKING BAR ====================================================== */
.tracking-panel {
  position: relative;
  overflow: hidden;
  padding: 24px;
}
@media (min-width: 640px) { .tracking-panel { padding: 32px; } }
/* This accent line's bg-[var(--gradient-brand)] silently fails to apply on
   the actual live source too (computed background-image: none there — a
   Tailwind arbitrary-value quirk) — matching Lovable means leaving this
   invisible, not "fixing" it to actually render. */
.tracking-sweep {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: none;
}
.tracking-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .tracking-row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.tracking-intro { display: flex; align-items: flex-start; gap: 16px; }
.tracking-badge {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
}
.tracking-badge svg { width: 20px; height: 20px; }
.tracking-intro h2 {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}
.tracking-intro p:not(.eyebrow) { margin-top: 8px; max-width: 28rem; font-size: 0.875rem; color: var(--muted-foreground); }
.tracking-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 32rem;
}
@media (min-width: 640px) { .tracking-form { flex-direction: row; } }
.tracking-form .btn { flex-shrink: 0; justify-content: center; padding-block: 12px; } /* py-3, not the usual py-3.5 */

/* ===== QUOTE FORM ========================================================= */
.quote-form { padding: 24px; }
@media (min-width: 640px) { .quote-form { padding: 32px; } }
.quote-form .eyebrow { display: block; }
.quote-form-grid {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) { .quote-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.quote-form-message { margin-top: 16px; resize: vertical; }
.quote-form-submit { margin-top: 24px; width: 100%; justify-content: center; }
@media (min-width: 640px) { .quote-form-submit { width: auto; } }
.quote-form-note { margin-top: 16px; font-size: 0.75rem; color: var(--muted-foreground); }
.quote-form-note a { color: var(--primary); }
.quote-form-note a:hover { text-decoration: underline; }

/* ===== Gravity Forms quote form — reskin GF's default markup to match
   the site's .field/.btn design system (site CSS, not GF's own theme). === */
.quote-form-wrap { padding: 24px; }
@media (min-width: 640px) { .quote-form-wrap { padding: 32px; } }

.quote-form-wrap .gform_wrapper { margin: 0; }
.quote-form-wrap .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.quote-form-wrap .gfield { grid-column: span 2; }
.quote-form-wrap .gfield--width-half { grid-column: span 2; }
@media (min-width: 640px) {
  .quote-form-wrap .gfield--width-half { grid-column: span 1; }
}
.quote-form-wrap .gfield_label { display: none; } /* placeholders carry the labeling, matches source form */

.quote-form-wrap .ginput_container input,
.quote-form-wrap .ginput_container select,
.quote-form-wrap .ginput_container textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background: color-mix(in oklab, var(--background) 60%, transparent);
  padding: 12px 16px;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.quote-form-wrap .ginput_container select { appearance: none; }
.quote-form-wrap .ginput_container textarea { resize: vertical; min-height: 110px; }
.quote-form-wrap .ginput_container input:focus,
.quote-form-wrap .ginput_container select:focus,
.quote-form-wrap .ginput_container textarea:focus {
  border-color: color-mix(in oklab, var(--primary) 70%, transparent);
  box-shadow: 0 0 0 2px var(--ring);
}
.quote-form-wrap ::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }

.quote-form-wrap .gform_footer {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 0;
  border: 0;
}
.quote-form-wrap .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow-brand);
  transition: transform 0.3s var(--ease-premium);
}
.quote-form-wrap .gform_button:hover { transform: translateY(-2px); }
@media (min-width: 640px) { .quote-form-wrap .gform_button { width: auto; } }

.quote-form-wrap .gform_validation_errors,
.quote-form-wrap .gfield_description,
.quote-form-wrap .validation_message { font-size: 0.8rem; margin-top: 4px; }
.quote-form-wrap .gfield_validation_message,
.quote-form-wrap .validation_message { color: var(--destructive); }
.quote-form-wrap .gfield_error input,
.quote-form-wrap .gfield_error select,
.quote-form-wrap .gfield_error textarea { border-color: var(--destructive); }
.quote-form-wrap .gform_confirmation_message { font-size: 0.95rem; }

/* ===== ABOUT PAGE — ported 1:1 from AboutPage.tsx =================== */
.about-intro-section { padding-top: 64px; }
@media (min-width: 640px) { .about-intro-section { padding-top: 96px; } }

.about-intro-grid {
  display: grid;
  align-items: center;
  gap: 48px; /* gap-12 */
}
@media (min-width: 1024px) {
  .about-intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.about-photo { overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

.mv-grid {
  display: grid;
  gap: 20px; /* gap-5 */
}
@media (min-width: 768px) {
  .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mv-card { height: 100%; padding: 28px; } /* p-7 */
@media (min-width: 640px) { .mv-card { padding: 36px; } } /* sm:p-9 */
svg.about-glyph { width: 48px; height: 48px; color: var(--primary); } /* size-12 — svg. prefix needed to beat the global svg[aria-hidden] size reset */
.mv-card h2 {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}
.mv-card p {
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .mv-card p { font-size: 1rem; } }

/* Mission/Vision glyph micro-animations — AnimatedGlyph.tsx's inline
   [animation:...] arbitrary values, ported as named classes. */
@keyframes glyph-ping {
  0% { transform: scale(0.72); opacity: 0.55; }
  70%, 100% { transform: scale(1.18); opacity: 0; }
}
@keyframes glyph-dart {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, -3px); }
}
@keyframes glyph-spin { to { transform: rotate(360deg); } }
@keyframes glyph-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.25); }
}
.glyph-ping { transform-origin: center; animation: glyph-ping 2.8s var(--ease-premium) infinite; }
.glyph-dart { transform-origin: center; animation: glyph-dart 3.2s var(--ease-premium) infinite; }
.glyph-spin { transform-origin: center; animation: glyph-spin 9s linear infinite; }
.glyph-pulse { animation: glyph-pulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .glyph-ping, .glyph-dart, .glyph-spin, .glyph-pulse { display: none; }
}

.way-grid {
  margin-top: 56px; /* mt-14 */
  display: grid;
  gap: 20px;
}
@media (min-width: 640px) { .way-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .way-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.way-card { height: 100%; padding: 24px; }
.way-card h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}
.way-card p {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}
.way-cta { margin-top: 56px; text-align: center; }

/* ===== SERVICES PAGE =================================================== */
/* Intro — Section.tsx default overridden to "pt-16 pb-8 sm:pt-24" */
.services-intro-section { padding-top: 64px; padding-bottom: 32px; }
@media (min-width: 640px) { .services-intro-section { padding-top: 96px; } }

/* "flex flex-wrap gap-2", mt-8 by default; the lanes row reuses this class
   with an inline mt-3 (12px) override to match source's tighter spacing. */
.services-mode-pills {
  margin-top: 32px;
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}
.services-lanes-block { margin-top: 40px; }

.services-pill {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: color 0.2s, border-color 0.2s;
}
.services-pill:hover {
  border-color: color-mix(in oklab, var(--primary) 60%, transparent);
  color: var(--foreground);
}
/* Lane pills only get the border-hover (text-foreground/90 always, no hover recolor) */
.services-pill-lane,
.services-pill-lane:hover {
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
}

/* Per-service detail block — "grid items-center gap-10 lg:grid-cols-2",
   odd blocks reverse via "lg:[&>*:first-child]:order-2" */
.services-detail-grid {
  display: grid;
  align-items: center;
  gap: 40px;
}
@media (min-width: 1024px) {
  .services-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-detail-grid.is-reversed > *:first-child { order: 2; }
}

/* Tilt3D port (src/components/site/Tilt3D.tsx) — pointer-driven rotate +
   glare via assets/js/tilt3d.js writing --rx/--ry/--gx/--gy custom props.
   aspect-ratio 4/3 comes straight from the source img's width=1024 height=768,
   used instead of the source's fragile 100%-height chain for robustness. */
.tilt3d { perspective: 1200px; }
.tilt3d-stage {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease-premium);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--tz, 1));
}
.tilt3d-stage:hover { --tz: 1.02; }
.tilt3d-clip {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  transform: translateZ(0);
  aspect-ratio: 4 / 3;
}
.tilt3d-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tilt3d-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-xl);
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in oklab, var(--primary) 30%, transparent), transparent 60%);
  mix-blend-mode: screen;
}

.services-detail-title { margin-top: 12px; font-size: 1.875rem; font-weight: 600; }
@media (min-width: 640px) { .services-detail-title { font-size: 2.25rem; } }

.services-detail-body {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.services-detail-points { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.services-detail-points li {
  display: flex;
  gap: 12px;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
}
svg.services-point-check { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); }

/* Value-added services grid — "mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3" */
.services-vas-section { border-top: 1px solid var(--border); background: color-mix(in oklab, var(--background) 94%, black 6%); }
html.light .services-vas-section { background: color-mix(in oklab, var(--surface) 70%, var(--background) 30%) !important; }

.services-vas-grid { margin-top: 40px; display: grid; gap: 20px; }
@media (min-width: 640px) { .services-vas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .services-vas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.services-vas-card { height: 100%; padding: 28px; transition: transform 0.3s; }
.services-vas-card:hover { transform: translateY(-4px); }
.services-vas-card h3 { margin-top: 20px; font-size: 1.25rem; font-weight: 600; }
.services-vas-card p { margin-top: 12px; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

.services-vas-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
}
.services-vas-icon svg { width: 24px; height: 24px; }

/* CTA card overrides the flat .panel/.services-vas-card look with solid bg-primary */
.services-vas-cta {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-foreground);
}
.services-vas-cta p { color: color-mix(in oklab, var(--primary-foreground) 85%, transparent); }
.services-vas-cta-btn {
  margin-top: 24px;
  padding: 12px 20px;
  background: var(--primary-foreground);
  color: var(--primary);
  box-shadow: var(--shadow-brand);
}

/* ===== LANE PAGES (Air/Ocean/Customs) ================================= */
/* Section.tsx default overridden to "pt-16 sm:pt-24" (bottom padding kept) */
.lane-intro-section { padding-top: 64px; }
@media (min-width: 640px) { .lane-intro-section { padding-top: 96px; } }
/* Second Section overridden to "pt-0" (top padding removed, bottom kept) */
.lane-body-section { padding-top: 0; }

.lane-body { max-width: 48rem; margin-inline: auto; display: grid; gap: 40px; }

.lane-section-title { font-size: 1.5rem; font-weight: 600; }
@media (min-width: 640px) { .lane-section-title { font-size: 1.875rem; } }
.lane-section-body { margin-top: 12px; font-size: 1rem; line-height: 1.625; color: var(--muted-foreground); }

.lane-points { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.lane-points li { display: flex; gap: 12px; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 90%, transparent); }
svg.lane-point-check { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); }

/* CTA panel — same panel-gradient-masks-bg-primary source bug as the
   Services VAS CTA card; fixed the same way (solid primary, legible text). */
.lane-cta { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: var(--primary); color: var(--primary-foreground); }
.lane-cta h2 { font-size: 1.25rem; font-weight: 600; }
.lane-cta p { margin-top: 12px; font-size: 0.875rem; line-height: 1.625; color: color-mix(in oklab, var(--primary-foreground) 85%, transparent); }
.lane-cta-btn { margin-top: 24px; padding: 12px 20px; background: var(--primary-foreground); color: var(--primary); }

/* ===== GLOBAL NETWORK PAGE ============================================= */
.network-section { padding-top: 64px; }
@media (min-width: 640px) { .network-section { padding-top: 96px; } }

.network-hero-grid { display: grid; align-items: center; gap: 40px; }
@media (min-width: 1024px) { .network-hero-grid { grid-template-columns: 1fr 1fr; } }

/* Globe deliberately left empty for now — same box the [freight_globe]
   shortcode will fill once re-added, so the layout won't shift later. */
.network-globe-slot { position: relative; margin-inline: auto; aspect-ratio: 1 / 1; width: 100%; max-width: 36rem; }

.network-stat-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
}
@media (min-width: 640px) {
  .network-stat-panel { flex-direction: row; justify-content: space-between; text-align: start; }
}
.network-stat-left { display: flex; align-items: center; gap: 16px; }
svg.network-stat-icon { width: 40px; height: 40px; stroke-width: 1.5; color: var(--primary); }
/* Source's "bg-brand-gradient" class matches no real utility (no such
   @utility exists in styles.css) — Tailwind silently drops it, so the stat
   number renders in plain foreground color on the real site, not a
   gradient. Confirmed via computed style on localhost:8080/network. */
.network-stat-value { font-size: 1.875rem; font-weight: 700; }
@media (min-width: 640px) { .network-stat-value { font-size: 2.25rem; } }
.network-stat-label { font-size: 1.25rem; font-weight: 600; }
@media (min-width: 640px) { .network-stat-label { font-size: 1.5rem; } }
.network-stat-body { max-width: 28rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

.network-tiers-grid { margin-top: 64px; display: grid; gap: 20px; }
@media (min-width: 768px) { .network-tiers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.network-tier-card { height: 100%; padding: 28px; }
.network-tier-k { font-size: 2.25rem; font-weight: 700; color: color-mix(in oklab, var(--primary) 30%, transparent); }
.network-tier-title { margin-top: 12px; font-size: 1.25rem; font-weight: 600; }
.network-tier-body { margin-top: 8px; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

.network-note { font-size: 0.75rem; line-height: 1.625; color: var(--muted-foreground); }

/* ===== TOOLS HUB ======================================================== */
.tools-intro-section { padding-top: 96px; }
@media (min-width: 640px) { .tools-intro-section { padding-top: 128px; } }

.tools-grid { margin-top: 56px; display: grid; gap: 20px; }
@media (min-width: 640px) { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tools-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  transition: transform 0.3s;
}
.tools-card:hover { transform: translateY(-4px); }
svg.tools-card-icon { width: 24px; height: 24px; color: var(--primary); }
.tools-card h2 { margin-top: 20px; font-size: 1.125rem; font-weight: 600; color: var(--foreground); }
.tools-card p { margin-top: 8px; flex: 1; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.tools-card-footer {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}
.tools-card-footer svg { width: 16px; height: 16px; transition: transform 0.3s; }
.tools-card:hover .tools-card-footer svg { transform: translateX(4px); }

/* ===== NEWS INDEX ("Newsletters") ====================================== */
.news-index-section { padding-top: 64px; }
@media (min-width: 640px) { .news-index-section { padding-top: 96px; } }

.news-filter-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.news-filter-chip {
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: transparent;
  padding: 6px 14px;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.news-filter-chip:hover { color: var(--foreground); }
.news-filter-chip.is-active {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
}

.news-index-grid { margin-top: 40px; display: grid; gap: 24px; }
@media (min-width: 640px) { .news-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .news-index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.news-index-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.news-index-card-meta { display: flex; align-items: center; gap: 12px; font-size: 0.75rem; color: var(--muted-foreground); }
.news-index-card-category { border-radius: 9999px; border: 1px solid var(--border); padding: 2px 8px; color: var(--primary); }
.news-index-card-date { display: inline-flex; align-items: center; gap: 4px; }
.news-index-card-date svg { width: 14px; height: 14px; }

.news-index-card-title { margin-top: 12px; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.375; font-weight: 600; }
.news-index-card-excerpt {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-index-card-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: var(--primary); }
.news-index-card-more svg { width: 16px; height: 16px; transition: transform 0.3s; }
.news-card:hover .news-index-card-more svg { transform: translateX(4px); }

/* ===== NEWS SINGLE ====================================================== */
.news-single-section { padding-top: 64px; }
@media (min-width: 640px) { .news-single-section { padding-top: 96px; } }
.news-single-body { max-width: 48rem; margin-inline: auto; }

.news-single-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.2s; }
.news-single-back:hover { color: var(--foreground); }
.news-single-back svg { width: 16px; height: 16px; }

.news-single-title { margin-top: 12px; font-family: var(--font-display); font-size: 1.875rem; line-height: 1.15; font-weight: 600; }
@media (min-width: 640px) { .news-single-title { font-size: 2.25rem; } }
.news-single-date { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--muted-foreground); }
.news-single-date svg { width: 16px; height: 16px; }

.news-single-media { overflow: hidden; }
.news-single-media img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; }

.entry-content { color: var(--muted-foreground); line-height: 1.625; }
.entry-content > * + * { margin-top: 20px; }
.entry-content strong { color: var(--foreground); font-family: var(--font-display); font-weight: 600; }
.entry-content h2 { margin-top: 8px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--foreground); }
@media (min-width: 640px) { .entry-content h2 { font-size: 1.5rem; } }
.entry-content ol, .entry-content ul { padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.entry-content ol { list-style: decimal; }
.entry-content ul { list-style: disc; }
.entry-content a { color: var(--primary); text-decoration: underline; }

.news-related { margin: 64px auto 0; max-width: 64rem; border-top: 1px solid var(--border); padding-top: 40px; }
.news-related-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.news-related-grid { margin-top: 24px; display: grid; gap: 20px; }
@media (min-width: 640px) { .news-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news-related-card { display: block; padding: 16px; }
.news-related-card-cat { font-size: 0.75rem; color: var(--primary); }
.news-related-card-title { margin-top: 8px; font-family: var(--font-display); font-size: 1rem; line-height: 1.375; font-weight: 600; }

/* ===== CONTACT PAGE ===================================================== */
.contact-section { padding-top: 64px; }
@media (min-width: 640px) { .contact-section { padding-top: 96px; } }

.contact-grid { margin-top: 56px; display: grid; gap: 24px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; } }

.contact-cards { display: grid; align-content: start; gap: 16px; }
.contact-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  transition: transform 0.5s;
}
.contact-card:hover { transform: translateY(-4px); }
svg.contact-card-icon { margin-top: 4px; width: 20px; height: 20px; flex-shrink: 0; color: var(--primary); }
.contact-card-value {
  margin-top: 8px;
  display: block;
  font-size: 0.875rem;
  white-space: pre-line;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
}

.contact-map { overflow: hidden; }
.contact-map iframe { display: block; height: 256px; width: 100%; border: 0; filter: grayscale(35%); }