/* About page styles — relocated from the inline <style> in src/routes/public/about.ts (data-only pivot). */

/* ── Hero ── */
.abt-hero {
  position: relative; background: linear-gradient(135deg, #000000 0%, #0a1628 50%, #000000 100%); padding: 7rem 1.5rem 6rem;
  text-align: center; overflow: hidden;
}
.abt-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(56,189,248,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.abt-hero-inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.abt-badge {
  display: inline-block; background: rgba(56,189,248,0.12); color: #38bdf8;
  border: 1px solid rgba(56,189,248,0.3); border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 0.35rem 1rem; margin-bottom: 1.5rem;
  animation: abtFadeUp 0.7s ease-out both;
}
.abt-hero-title {
  font-family: 'Raleway', sans-serif; font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 900; line-height: 1.05; color: #fff; margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  animation: abtFadeUp 0.7s ease-out 0.15s both;
}
.abt-hero-title span { color: #38bdf8; }
.abt-hero-sub {
  font-family: 'Raleway', sans-serif; font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: rgba(255,255,255,0.65); max-width: 580px; margin: 0 auto 2.5rem;
  line-height: 1.75;
  animation: abtFadeUp 0.7s ease-out 0.3s both;
}
.abt-hero-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  animation: abtFadeUp 0.7s ease-out 0.45s both;
}
.abt-btn-primary {
  padding: 0.8rem 2rem; background: #0ea5e9; color: #fff;
  font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 0.95rem;
  border: 2px solid #0ea5e9; border-radius: 8px; text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.abt-btn-primary:hover { background: #0284c7; border-color: #0284c7; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,165,233,0.35); }
.abt-btn-secondary {
  padding: 0.8rem 2rem; background: transparent; color: #fff;
  font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 0.95rem;
  border: 2px solid rgba(255,255,255,0.4); border-radius: 8px; text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.abt-btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; transform: translateY(-2px); }

@keyframes abtFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Shared section labels & headers ── */
.abt-section-label {
  font-family: 'Raleway', sans-serif; font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: #38bdf8;
  margin-bottom: 0.75rem;
}
.abt-section-header { text-align: center; margin-bottom: 3rem; }
.abt-section-header h2 {
  font-family: 'Raleway', sans-serif; font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800; color: #0f172a; margin-bottom: 0.75rem; line-height: 1.15;
}
.abt-section-header h2 span { color: #2a8dba; }
.abt-section-header p { font-family: 'Raleway', sans-serif; font-size: 1.1rem; font-weight: 500; color: #475569; max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* ── Story ── */
.abt-story { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)), linear-gradient(225deg, #000000 0%, #1e1b4b 25%, #4c1d95 50%, #1e1b4b 75%, #000000 100%); border-top: 3px solid #38bdf8; padding: 6rem 1.5rem; }
.abt-story-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: center; }
.abt-story-text .abt-section-label { margin-bottom: 1rem; }
.abt-story-text h2 {
  font-family: 'Raleway', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800; color: #fff; margin-bottom: 1.5rem; line-height: 1.2;
}
.abt-story-text h2 span { color: #38bdf8; }
.abt-story-text p {
  font-family: 'Raleway', sans-serif; font-size: 1rem; font-weight: 500;
  color: rgba(255,255,255,0.75); line-height: 1.8; margin-bottom: 1rem;
}
.abt-story-stats { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.25rem; }
@media (max-width: 420px) {
  .abt-story-stats { gap: 0.75rem; }
  .abt-stat-card { padding: 1.25rem 0.5rem; }
  .abt-stat-num { font-size: 2rem; }
  .abt-stat-label { font-size: 0.7rem; letter-spacing: 0.04em; }
}
.abt-stat-card {
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%);
  border-radius: 16px; padding: 1.75rem 1.25rem; text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.abt-stat-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 40px rgba(3,105,161,0.4); }
.abt-stat-num { font-family: 'Raleway', sans-serif; font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 0.5rem; }
.abt-stat-label { font-family: 'Raleway', sans-serif; font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.1em; }
@media (max-width: 800px) { .abt-story-inner { grid-template-columns: 1fr; gap: 3rem; } }

/* ── Values ── */
.abt-values { background: linear-gradient(90deg, #2d0a4e 0%, #000000 15%, #0a2a3e 35%, #1a0a2e 55%, #0c1a2e 75%, #4c1d95 100%); padding: 6rem 1.5rem; }
.abt-values .abt-section-label { color: #e0f2fe; background: rgba(2,132,199,0.35); border: 1px solid rgba(56,189,248,0.4); padding: 0.3rem 1rem; border-radius: 999px; display: inline-block; }
.abt-values .abt-section-header h2 { color: #fff; }
.abt-values .abt-section-header h2 span { color: #a78bfa; }
.abt-values .abt-section-header p { color: rgba(255,255,255,0.78); }
.abt-values-inner { max-width: 1200px; margin: 0 auto; }
.abt-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 768px) { .abt-values-grid { grid-template-columns: 1fr; } }
.abt-value-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px; padding: 2rem 1.75rem; backdrop-filter: blur(8px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.abt-value-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 40px rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.5); }
.abt-value-card-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.abt-value-icon { font-size: 1.75rem; color: #a78bfa; flex-shrink: 0; }
.abt-value-card h3 { font-family: 'Raleway', sans-serif; font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; }
.abt-value-card p { font-family: 'Raleway', sans-serif; font-size: 1rem; color: rgba(255,255,255,0.78); line-height: 1.75; margin: 0; }

/* ── What Makes Us Different ── */
.abt-diff { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)), linear-gradient(225deg, #000000 0%, #1e1b4b 25%, #4c1d95 50%, #1e1b4b 75%, #000000 100%); padding: 6rem 1.5rem; }
.abt-diff-inner { max-width: 1200px; margin: 0 auto; }
.abt-diff .abt-section-header h2 { color: #fff; }
.abt-diff .abt-section-header p { color: rgba(255,255,255,0.75); }
.abt-diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .abt-diff-grid { grid-template-columns: 1fr; } }
.abt-diff-item {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px; padding: 1.75rem; backdrop-filter: blur(8px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.abt-diff-item:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.5); }
.abt-diff-icon { font-size: 1.75rem; color: #a78bfa; flex-shrink: 0; margin-top: 0.1rem; }
.abt-diff-item h3 { font-family: 'Raleway', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.abt-diff-item p { font-family: 'Raleway', sans-serif; font-size: 1rem; color: rgba(255,255,255,0.78); line-height: 1.7; margin: 0; }

/* ── Who We Build For ── */
.abt-who { background: linear-gradient(90deg, #2d0a4e 0%, #000000 15%, #0a2a3e 35%, #1a0a2e 55%, #0c1a2e 75%, #4c1d95 100%); padding: 6rem 1.5rem; }
.abt-who .abt-section-label { color: #38bdf8; }
.abt-who .abt-section-header h2 { color: #fff; }
.abt-who .abt-section-header h2 span { color: #a78bfa; }
.abt-who .abt-section-header p { color: rgba(255,255,255,0.75); }
.abt-who-inner { max-width: 1100px; margin: 0 auto; }
.abt-who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .abt-who-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .abt-who-grid { grid-template-columns: repeat(2, 1fr); } }

.abt-who-item { height: 160px; perspective: 1000px; cursor: pointer; }
.abt-who-card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover was the ONLY way to turn these over, so the back of all fifteen cards - which is
   where the actual sentence about each trade lives - was unreachable by keyboard, and
   unreliable on touch, where hover is emulated rather than real. A screen reader was never
   affected: backface-visibility hides a face visually but leaves it in the accessibility
   tree, so both sides were always being read. The missing audience is the sighted visitor
   who does not use a mouse. :focus-within rather than :focus so the rule still holds if
   anything focusable is ever put inside a card. */
.abt-who-item:hover .abt-who-card-inner,
.abt-who-item:focus-within .abt-who-card-inner { transform: rotateY(180deg); }
.abt-who-item:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; border-radius: 16px; }
/* The turn is a 0.65s 3D rotation. Honour the setting that exists to stop exactly that. */
@media (prefers-reduced-motion: reduce) { .abt-who-card-inner { transition: none; } }

.abt-who-front, .abt-who-back {
  position: absolute; inset: 0; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding: 1.25rem; overflow: hidden;
}
.abt-who-front {
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%);
  gap: 0.65rem;
  transition: box-shadow 0.25s ease;
}
.abt-who-item:hover .abt-who-front { box-shadow: 0 14px 36px rgba(3,105,161,0.4); }
.abt-who-front i { font-size: 2rem; color: #38bdf8; }
.abt-who-front span { font-family: 'Raleway', sans-serif; font-size: 0.88rem; font-weight: 700; color: #fff; text-align: center; }

.abt-who-back {
  background: linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 100%);
  transform: rotateY(180deg);
}
.abt-who-back p { font-family: 'Raleway', sans-serif; font-size: 0.82rem; font-weight: 600; color: #fff; text-align: center; line-height: 1.65; margin: 0; }

@media (max-width: 600px) {
  .abt-who-item { height: 190px; }
  .abt-who-front, .abt-who-back { padding: 0.85rem; }
  .abt-who-back p { font-size: 0.75rem; line-height: 1.55; }
  .abt-who-front i { font-size: 1.65rem; }
}

/* ── CTA ── */
.cta-banner { background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)), linear-gradient(90deg, #000000 0%, #1e1b4b 25%, #4c1d95 50%, #1e1b4b 75%, #000000 100%); padding: 5rem 1.5rem; text-align: center; border-top: 3px solid #4c1d95; }
.cta-banner-inner { max-width: 700px; margin: 0 auto; }
.cta-banner h2 { font-family: 'Raleway', sans-serif; font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 800; color: #fff; margin-bottom: 0.75rem; }
.cta-banner h2 span { color: #38bdf8; }
.cta-banner p { font-family: 'Raleway', sans-serif; font-size: 1.1rem; font-weight: 500; color: rgba(255,255,255,0.7); margin-bottom: 2rem; line-height: 1.7; }
.cta-banner-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-book-btn, .cta-email-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: #38bdf8; color: #0f172a; border: none; font-weight: 700; font-size: 1rem; padding: 0.85rem 1.75rem; border-radius: 8px; text-decoration: none; cursor: pointer; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.cta-book-btn:hover, .cta-email-btn:hover { background: #0ea5e9; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,165,233,0.4); }

/* Honest "one independent developer" disclosure callout in the Story section. */
.abt-honest { margin-top: 1.25rem; padding: 1rem 1.15rem; border-left: 3px solid var(--color-brand, #3b82f6); background: rgba(59,130,246,0.06); border-radius: 8px; font-size: 0.95rem; line-height: 1.6; }

/* ---- the header fills the first screen -------------------------------------
   Written after the .abt-hero block above so it wins on ordinary cascade. 84px
   is the sticky header, the same figure services.css already uses for its band
   scroll-margin; subtracting it means the hero ends exactly where the fold is
   rather than one navbar past it. min-height, not height: the page map inside
   makes this taller than the old hero, and a short laptop screen has to be able
   to grow rather than clip. Centred, so a tall screen does not leave the badge
   pinned to the top with a field of gradient under it. */
.abt-hero {
  min-height: calc(100vh - 84px);
  display: flex; align-items: center; justify-content: center;
  padding: 4rem 1.5rem;
}
.abt-hero-inner { width: 100%; max-width: 900px; }

/* ---- the map of the page ---------------------------------------------------
   The dot-rail on the right names these four sections in four words each, which
   is enough to navigate and not enough to decide whether to. This is the same
   four with a reason attached. */
.abt-hero-map {
  list-style: none; margin: 2.75rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
  text-align: left;
  animation: abtFadeUp 0.7s ease-out 0.6s both;
}
.abt-hero-map a {
  height: 100%;
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 1rem 1.15rem; border-radius: 14px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.abt-hero-map a:hover {
  background: rgba(56,189,248,0.10); border-color: rgba(56,189,248,0.45);
  transform: translateY(-2px);
}
.abt-hero-map > li > a > i:first-child { color: #38bdf8; font-size: 1.3rem; line-height: 1.2; flex-shrink: 0; }
.ahm-b { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.ahm-t { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 0.98rem; color: #fff; line-height: 1.3; }
.ahm-d { font-family: 'Raleway', sans-serif; font-size: 0.83rem; line-height: 1.6; color: rgba(255,255,255,0.62); }
.ahm-go { color: rgba(255,255,255,0.28); font-size: 1.1rem; flex-shrink: 0; transition: color 0.2s ease; }
.abt-hero-map a:hover .ahm-go { color: #38bdf8; }

@media (max-width: 860px) {
  .abt-hero-map { grid-template-columns: 1fr; }
  /* on a phone the map is four stacked rows, so the hero stops being one screen
     and there is nothing to be gained by pretending otherwise */
  .abt-hero { min-height: 0; padding: 3.5rem 1.25rem; }
}

/* ---- the About header is ONE screen, never a screen and a bit ---------------
   The block above set min-height only, so the header could not be SHORTER than
   the fold but nothing stopped it being taller: on a 1280x720 window the
   content came to 772px against 653px of room and the "fills the first screen"
   header had to be scrolled before the page even began. Two changes fix that.

   First the height is pinned rather than floored, and to the measured height of
   .site-header (67px) rather than the 84px above, which was services.css's
   scroll-margin figure borrowed for a job it does not do — 84 left the hero
   ending 17px short of the fold.

   Second, every vertical measurement inside is now viewport-aware, so a short
   window tightens the spacing instead of overflowing it. The title takes
   whichever of 8vw and 9vh is smaller, which is what stops a wide-but-short
   laptop screen from rendering an 88px headline it has no room for.

   Under 560px of height there is no honest way to fit this, so the pin lifts
   and the header is allowed to be as tall as it needs; .abt-hero carries
   overflow:hidden from its base rule and clipping the page map would be worse
   than scrolling it. The 860px-wide phone rule below still wins on both counts,
   which is why it is restated here rather than left to source order. */
@media (min-height: 560px) {
  .abt-hero {
    min-height: calc(100svh - 67px);
    height: calc(100svh - 67px);
    padding: clamp(1rem, 3vh, 4rem) 1.5rem;
  }
}
.abt-badge { margin-bottom: clamp(0.6rem, 1.5vh, 1.5rem); }
.abt-hero-title {
  font-size: clamp(2.4rem, min(8vw, 9vh), 5.5rem);
  margin-bottom: clamp(0.6rem, 1.8vh, 1.25rem);
}
.abt-hero-sub {
  line-height: 1.65;
  margin: 0 auto clamp(1rem, 2.6vh, 2.5rem);
}
.abt-hero-map { margin-top: clamp(1rem, 3vh, 2.75rem); gap: clamp(0.5rem, 1.2vh, 0.75rem); }
.abt-hero-map a { padding: clamp(0.6rem, 1.6vh, 1rem) 1.15rem; }

@media (max-width: 860px) {
  .abt-hero { min-height: 0; height: auto; padding: 3.5rem 1.25rem; }
}