/* ==========================================================================
   nikolakristanova.cz
   Single-page static site. No build step, no framework, no third-party requests.

   Radius system: cards 22px, pills 999px, media 28px. One accent family:
   --blue (primary) and --blue-2 (lighter, gradients only, never a solo text color).
   Glass is a web frosted-glass approximation (backdrop-filter), not Apple's
   Liquid Glass material. Solid fallback under prefers-reduced-transparency.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --navy:        #00315a;
  --navy-deep:   #002744;
  --blue:        #2673bb;
  --blue-2:      #4f9bd9;   /* second blue, gradients only */
  --blue-strong: #1c5d9c;

  --bg:          #ffffff;
  --bg-sunken:   #f4f7fb;
  --surface:     #ffffff;
  --line:        #dde3ea;

  --text:        #101822;
  --text-soft:   #4d5a6a;  /* 7.0:1 on white */
  --text-faint:  #5f6b7a;  /* 5.4:1 on white. Anything lighter fails AA at 13-14px. */
  --on-dark:     #eef3f8;
  --on-dark-soft:#b7cadd;  /* 7.2:1 on --navy */

  --glass-bg:     rgba(255, 255, 255, .62);
  --glass-line:   rgba(255, 255, 255, .75);
  --glass-edge:   rgba(0, 49, 90, .09);
  --glass-blur:   18px;

  --shell:       1180px;
  --r-card:      22px;
  --r-media:     28px;
  --r-pill:      999px;

  --ease:        cubic-bezier(.16, 1, .3, 1);
  --shadow:      0 1px 2px rgba(0, 49, 90, .05), 0 18px 40px -18px rgba(0, 49, 90, .22);
  --shadow-lift: 0 2px 4px rgba(0, 49, 90, .06), 0 30px 60px -24px rgba(0, 49, 90, .32);
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy:        #0d2237;
    --navy-deep:   #091a2a;
    --blue:        #6aa9e0;
    --blue-2:      #8fc4f0;
    --blue-strong: #8cbdea;

    --bg:          #0a1420;
    --bg-sunken:   #0f1b29;
    --surface:     #121f2e;
    --line:        #22344a;

    --text:        #e9eff6;
    --text-soft:   #a7b6c6;
    --text-faint:  #94a5b6;
    --on-dark:     #e9eff6;
    --on-dark-soft:#a9bed3;

    --glass-bg:    rgba(21, 35, 51, .58);
    --glass-line:  rgba(255, 255, 255, .10);
    --glass-edge:  rgba(0, 0, 0, .5);

    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -18px rgba(0, 0, 0, .7);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 34px 70px -26px rgba(0, 0, 0, .8);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 600;
}

p { margin: 0; }
a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  text-decoration: none;
}
.skip-link:focus { left: 24px; }

:where(a, button):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Glass surface ----------
   Frosted-glass approximation: blurred backdrop, bright top edge, soft outer edge. */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  border: 1px solid var(--glass-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 18px 44px -22px var(--glass-edge);
}
.glass--dark {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 18px 40px -24px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass--dark { background: rgba(255, 255, 255, .12); }
}

/* ---------- Custom cursor ----------
   Replaces the native cursor: a precise dot plus a ring that lags behind it.
   `cursor-active` is set by JS only after the replacement is actually running,
   so the native cursor is never hidden without something drawn in its place. */
.cursor-active,
.cursor-active * { cursor: none !important; }

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 95;
  opacity: 0;
  will-change: transform;
  transition: opacity .25s var(--ease);
}

.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--navy);
  transition: opacity .25s var(--ease), transform .18s var(--ease), background-color .25s var(--ease);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--navy) 45%, transparent);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  transition: opacity .25s var(--ease), width .3s var(--ease), height .3s var(--ease),
              margin .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}

.is-on { opacity: 1; }

/* Over anything clickable the ring opens up and the dot recedes. */
.cursor-ring.is-hot {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: color-mix(in srgb, var(--blue) 75%, transparent);
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}
.cursor-dot.is-hot {
  transform: scale(0);
}

/* Over dark panels the cursor inverts so it stays visible. */
.cursor-ring.is-inverse {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .14);
}
.cursor-dot.is-inverse { background: #fff; }

/* ---------- Icons (Phosphor, tinted via mask so they follow currentColor) ---------- */
.ico {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  vertical-align: -0.22em;
}
.ico--phone     { -webkit-mask-image: url(../icons/phone.svg);               mask-image: url(../icons/phone.svg); }
.ico--mail      { -webkit-mask-image: url(../icons/envelope-simple.svg);     mask-image: url(../icons/envelope-simple.svg); }
.ico--id        { -webkit-mask-image: url(../icons/identification-card.svg); mask-image: url(../icons/identification-card.svg); }
.ico--seal      { -webkit-mask-image: url(../icons/seal-check.svg);          mask-image: url(../icons/seal-check.svg); }
.ico--cap       { -webkit-mask-image: url(../icons/graduation-cap.svg);      mask-image: url(../icons/graduation-cap.svg); }
.ico--receipt   { -webkit-mask-image: url(../icons/receipt.svg);             mask-image: url(../icons/receipt.svg); }
.ico--file      { -webkit-mask-image: url(../icons/file-text.svg);           mask-image: url(../icons/file-text.svg); }
.ico--scales    { -webkit-mask-image: url(../icons/scales.svg);              mask-image: url(../icons/scales.svg); }
.ico--handshake { -webkit-mask-image: url(../icons/handshake.svg);           mask-image: url(../icons/handshake.svg); }
.ico--calc      { -webkit-mask-image: url(../icons/calculator.svg);          mask-image: url(../icons/calculator.svg); }
.ico--arrow     { -webkit-mask-image: url(../icons/arrow-right.svg);         mask-image: url(../icons/arrow-right.svg); }

/* ---------- Header ----------
   Fixed, not sticky: the hero gradient runs underneath it to the top of the page. */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding-block: 14px;
}
.site-head__bar {
  position: relative;          /* anchors the collapsed nav panel */
  height: 68px;
  border-radius: var(--r-pill);
  padding-inline: 14px 14px;
  padding-left: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* White liquid glass. */
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  border: 1px solid var(--glass-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 16px 40px -26px var(--glass-edge);
  transition: box-shadow .3s var(--ease);
}
.is-scrolled .site-head__bar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 22px 50px -26px var(--glass-edge);
}

.brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.2;
}
.brand__name {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
  white-space: nowrap;
  color: var(--text);
}
.brand__sep {
  width: 1px;
  height: 16px;
  background: var(--line);
  flex: none;
}
.brand__role {
  font-size: 0.8125rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
}
.site-nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--text-soft);
  transition: color .2s var(--ease);
}
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav a:hover { color: var(--blue); }
.site-nav a:not(.btn):hover::after { transform: scaleX(1); }

/* Header CTA: navy pill on the white bar.
   Scoped to `.site-nav` so it outranks the `.site-nav a` link color above,
   which would otherwise repaint the label. */
.site-nav .btn--head {
  padding: 11px 14px 11px 20px;
  font-size: 0.9375rem;
  background: linear-gradient(120deg, var(--navy), var(--blue));
  background-size: 160% 160%;
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(0, 49, 90, .8);
}
.site-nav .btn--head .ico { font-size: 1rem; transition: transform .25s var(--ease); }
.site-nav .btn--head:hover {
  color: #fff;
  background-position: 100% 0;
  transform: translateY(-1px);
}
.site-nav .btn--head:hover .ico { transform: translateX(3px); }

/* ---------- Burger toggle ---------- */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  place-items: center;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav-toggle:hover { border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); }

/* Three bars from one element: the middle is the box, the outer two pseudos. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -5.5px; }
.nav-toggle__bars::after  { top:  5.5px; }

/* Open: the outer bars meet in the middle and cross, the middle one goes
   transparent. Fading the parent would take its ::before/::after with it. */
[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5.5px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }

.btn--primary {
  background: linear-gradient(120deg, var(--navy), var(--blue));
  background-size: 160% 160%;
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(0, 49, 90, .75);
}
.btn--primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -16px rgba(0, 49, 90, .75);
}

.btn--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  border-color: var(--glass-line);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn--glass:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 50%, transparent);
  color: var(--blue);
}

@media (prefers-color-scheme: dark) {
  .btn--primary {
    background: linear-gradient(120deg, var(--blue), var(--blue-2));
    color: #06111c;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .9);
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Clears the fixed header. The background begins at y=0, the content below it. */
  padding-top: 88px;
  background: var(--bg);
}

/* Light office photo, washed almost to white, plus a drifting aurora over it. */
.hero__aurora {
  position: absolute;
  inset: 0 -10% 0 -10%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--blue) 6%, transparent) 0%,
      color-mix(in srgb, var(--bg) 88%, transparent) 62%,
      var(--bg) 100%),
    url(../img/hero-bg.webp);
  background-size: cover, cover;
  background-position: center, 62% 30%;
  background-repeat: no-repeat, no-repeat;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .34;
}
.blob--a {
  width: 44vw; height: 44vw;
  top: -10%; right: 2%;
  background: radial-gradient(circle, var(--blue-2), transparent 68%);
  animation: drift-a 22s var(--ease) infinite alternate;
}
.blob--b {
  width: 36vw; height: 36vw;
  top: 28%; left: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 72%, #7fd4e8), transparent 68%);
  opacity: .26;
  animation: drift-b 26s var(--ease) infinite alternate;
}
.blob--c {
  width: 28vw; height: 28vw;
  bottom: -4%; left: 36%;
  background: radial-gradient(circle, color-mix(in srgb, var(--navy) 45%, var(--blue-2)), transparent 70%);
  opacity: .18;
  animation: drift-c 30s var(--ease) infinite alternate;
}

@media (prefers-color-scheme: dark) {
  /* The photo is a white-on-white office scene, so in dark mode it is knocked
     back to a faint texture by the gradient itself. Do not add a covering
     pseudo-element here: an ::after on this layer paints over the hero copy. */
  .hero__aurora {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 88%, transparent) 0%,
        color-mix(in srgb, var(--bg) 96%, transparent) 55%,
        var(--bg) 100%),
      url(../img/hero-bg.webp);
  }
}

@keyframes drift-a { to { transform: translate3d(-6%, 8%, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(8%, -6%, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(-5%, -8%, 0) scale(1.14); } }

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 40px;
  align-items: end;              /* portrait sits on the section floor */
  /* Taller than the portrait on purpose. The portrait is bottom-anchored, so the
     surplus is what pushes the top of her head below the eyebrow badge. A fixed
     value rather than vh, so short viewports keep the same relationship. */
  min-height: 580px;
}

.hero__copy {
  /* Centred, but with extra padding on the bottom so the visible text sits a
     little above the true centre of the row. */
  align-self: center;
  padding-block: 0 56px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  font-size: 0.875rem;
  color: var(--text-soft);
}
.hero__eyebrow .ico { color: var(--blue); }
.hero__mark { display: none; width: 22px; height: auto; }

.hero__title {
  margin-top: 24px;
  font-size: clamp(2.25rem, 4.4vw, 3.35rem);
  letter-spacing: -0.032em;
}

.hero__lead {
  margin-top: 22px;
  max-width: 44ch;
  font-size: 1.125rem;
  color: var(--text-soft);
}

.hero__actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__figure {
  position: relative;
  justify-self: end;
  align-self: end;
  width: 100%;
  /* Sized so the top of her head sits below the eyebrow badge. The portrait is
     bottom-anchored and cropped to the artwork, so the top of the image is the
     top of her head. Cut just below the elbows, which is wide enough (0.805)
     to render her large while 382px still holds the height at 475px, the
     figure that keeps her head clear of the badge. */
  max-width: 382px;
}
.hero__halo {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 138%;
  aspect-ratio: 1.15;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side at 50% 58%,
              color-mix(in srgb, var(--blue-2) 34%, transparent),
              color-mix(in srgb, var(--blue-2) 12%, transparent) 55%,
              transparent 76%);
  filter: blur(40px);
  z-index: -1;
}
.hero__figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  filter:
    drop-shadow(0 26px 34px rgba(0, 24, 45, .16))
    drop-shadow(0 4px 10px rgba(0, 24, 45, .10));
}

/* Grounding shadow. A flattened ellipse low behind her, so she sits in the
   section instead of floating above it. */
.hero__figure::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 82%;
  height: 22%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(0, 24, 45, .22), rgba(0, 24, 45, .08) 58%, transparent 72%);
  filter: blur(22px);
  z-index: 0;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .hero__figure::after {
    background: radial-gradient(closest-side,
                rgba(0, 0, 0, .55), rgba(0, 0, 0, .22) 58%, transparent 72%);
  }
}

/* ---------- Credentials strip ---------- */
.creds {
  position: relative;
  margin-top: -64px;
  z-index: 2;
}
.creds__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 28px;
  border-radius: var(--r-card);
}
.creds__mark {
  width: 44px;
  height: auto;
  flex: none;
}
.creds__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
}
.creds__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text-soft);
}
.creds__item .ico { color: var(--blue); }

/* ---------- Section headings ---------- */
.section-title {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
}
.section-title--invert { color: var(--on-dark); }

/* Label variant: small, bold, uppercase. Used where the quote below carries the weight. */
.section-title--label {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue-2);
}

/* ---------- Services: asymmetric grid ---------- */
.services { padding-block: 104px; }

.bento {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

/* Row 1: feature(7) + b(5). Row 2: feature continues + c(5). Row 3: d(6) + e(6). */
.card:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.card:nth-child(2) { grid-column: span 5; }
.card:nth-child(3) { grid-column: span 5; }
.card:nth-child(4) { grid-column: span 6; }
.card:nth-child(5) { grid-column: span 6; }

.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 30px 28px;
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Cursor spotlight. --mx/--my are set by the pointer handler in main.js. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--blue) 15%, transparent), transparent 70%);
  transition: opacity .35s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
}
.card:hover::after { opacity: 1; }

.card--feature {
  display: flex;
  flex-direction: column;
  /* Icon anchors the top, copy sits on the floor: the gap between them is the composition. */
  justify-content: space-between;
  min-height: 240px;
  background: linear-gradient(145deg, var(--navy), var(--navy-deep) 55%, color-mix(in srgb, var(--navy-deep) 70%, var(--blue)) 100%);
  border-color: transparent;
  color: var(--on-dark);
}
.card--feature::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .14), transparent 70%);
}
/* Photo underlay: faint enough that the copy keeps full contrast. */
.card--feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(160deg, transparent 0%, color-mix(in srgb, var(--navy-deep) 80%, transparent) 62%, var(--navy-deep) 100%),
    url(../img/card-desk.webp);
  background-size: cover, cover;
  background-position: center, 50% 42%;
  opacity: .3;
}
.card--feature .card__ico { color: var(--blue-2); font-size: 2rem; margin-bottom: 0; }
.card--feature .card__body { margin-top: auto; padding-top: 32px; }
.card--feature h3 { font-size: 1.65rem; }
.card--feature p  { color: var(--on-dark-soft); max-width: 46ch; }

.card__ico {
  font-size: 1.6rem;
  color: var(--blue);
  margin-bottom: 16px;
}

.card h3 {
  font-size: 1.1875rem;
  margin-bottom: 10px;
}

.card p {
  color: var(--text-soft);
  font-size: 0.9688rem;
}
/* Must follow `.card p`: equal specificity, source order decides. */
.card--feature p { color: var(--on-dark-soft); }

/* ---------- About ---------- */
.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 58%, #061a2e 100%);
  color: var(--on-dark);
  padding-block: 112px;
}
.about__glow {
  position: absolute;
  top: -18%; right: -12%;
  width: 58vw; height: 58vw;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 55%, transparent), transparent 66%);
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
}

.about__inner {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: center;
}

/* The radius lives on the <img>, not on a wrapper, so frame and artwork always agree. */
.about__media {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 380px;
}
.about__ring {
  position: absolute;
  inset: -8% -10% -10% -8%;
  z-index: -1;
  border-radius: var(--r-media);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--blue-2) 70%, transparent), color-mix(in srgb, var(--blue) 30%, transparent));
  filter: blur(40px);
  opacity: .55;
}
.about__media img {
  width: 100%;
  border-radius: var(--r-media);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, .6);
}

.about__quote {
  position: relative;
  margin: 22px 0 0;
  padding-left: 24px;
  border-left: 2px solid color-mix(in srgb, var(--blue-2) 70%, transparent);
  max-width: 38ch;
}
.about__quote p {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}
/* No quote glyph: the rule plus the type shift already reads as a quote. */
.about__copy > p {
  margin-top: 20px;
  color: var(--on-dark-soft);
  max-width: 62ch;
}

.principles {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.principles li {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  color: var(--on-dark);
}

/* ---------- Contact ---------- */
.contact { padding-block: 104px; }

.contact__inner {
  display: grid;
  grid-template-columns: 1.32fr 0.68fr;
  gap: 18px;
  align-items: stretch;
}

.contact__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 40px;
  border-radius: var(--r-media);
  background: linear-gradient(145deg, var(--navy), var(--navy-deep) 60%, color-mix(in srgb, var(--navy-deep) 60%, var(--blue)) 100%);
  color: var(--on-dark);
  box-shadow: var(--shadow-lift);
}
.contact__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .12), transparent 70%);
  transition: opacity .35s var(--ease);
}
.contact__panel:hover::after { opacity: 1; }

.contact__lead {
  margin-top: 16px;
  max-width: 48ch;
  color: var(--on-dark-soft);
}

.channels {
  margin-top: 32px;
  display: grid;
  gap: 12px;
}
.channel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--on-dark);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.channel:hover { transform: translateX(6px); background: rgba(255, 255, 255, .13); }
.channel__ico { font-size: 1.4rem; color: var(--blue-2); }
.channel__text { display: flex; flex-direction: column; min-width: 0; }
.channel__label { font-size: 0.8125rem; color: var(--on-dark-soft); }
.channel__value {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.channel__value--mail { font-size: 1rem; word-break: break-word; }
.channel__go {
  margin-left: auto;
  font-size: 1.05rem;
  color: var(--on-dark-soft);
  transition: transform .3s var(--ease);
}
.channel:hover .channel__go { transform: translateX(4px); }

.contact__aside {
  padding: 40px 34px;
  border-radius: var(--r-media);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.contact__aside-ico {
  font-size: 1.6rem;
  color: var(--blue);
  margin-bottom: 16px;
}
.contact__aside h3 { font-size: 1.1875rem; }

.facts { margin: 20px 0 0; }
.facts__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}
.facts__row + .facts__row { border-top: 1px solid var(--line); }
.facts dt {
  font-size: 0.875rem;
  color: var(--text-faint);
}
.facts dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

/* ---------- Footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  padding-block: 28px;
}
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.875rem;
  color: var(--text-faint);
}

/* ---------- Entry animation ----------
   Default state is VISIBLE. The hidden start state is opt-in via the `js` class
   set by an inline script in <head>, so with JS off nothing ever hides. */
.js .anim {
  opacity: 0;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .anim[data-anim="up"]    { transform: translateY(26px); }
.js .anim[data-anim="left"]  { transform: translateX(-40px); }
.js .anim[data-anim="right"] { transform: translateX(40px); }

.js .anim.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
  }
  .hero__copy { padding-block: 40px 32px; }
  .hero__figure {
    justify-self: center;
    max-width: 320px;
  }

  .bento { grid-template-columns: repeat(6, 1fr); }
  .card:nth-child(1) { grid-column: span 6; grid-row: auto; min-height: 0; }
  .card:nth-child(2),
  .card:nth-child(3),
  .card:nth-child(4),
  .card:nth-child(5) { grid-column: span 3; }

  .about__inner { grid-template-columns: 1fr; gap: 40px; }
  .about__media { max-width: 300px; }
  .hero { padding-top: 96px; }

  .contact__inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .shell { padding-inline: 20px; }

  .site-head { padding-block: 10px; }
  .site-head__bar { height: 58px; padding-inline: 10px; padding-left: 18px; }

  .nav-toggle { display: grid; }

  /* The links move into a panel below the bar. Closed, it is inert and
     unreachable by keyboard; `visibility` is what takes it out of the tab order. */
  .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border-radius: var(--r-card);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .6),
      0 24px 50px -20px rgba(0, 49, 90, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transform-origin: top right;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .site-head__bar.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-nav a:not(.btn) {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 1rem;
  }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav a:not(.btn):hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }

  /* The CTA comes back, now as the last item in the panel. */
  .site-nav .btn--head {
    display: inline-flex;
    justify-content: center;
    margin-top: 6px;
    padding: 14px 20px;
  }

  /* Mobile hero is centred and tighter. */
  .hero { padding-top: 80px; }
  .hero__copy {
    padding-block: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__lead { margin-top: 16px; }
  .hero__title { margin-top: 18px; }
  .hero__actions { margin-top: 26px; justify-content: center; width: 100%; }
  /* Straight edge under her instead of a fade. The portrait's own bottom is a
     clean cut, and this rule closes it off. */
  .hero__figure {
    max-width: 320px;
    border-bottom: 1px solid var(--line);
  }
  /* The grounding shadow would bleed past a hard edge, so it goes on mobile. */
  .hero__figure::after { display: none; }

  /* The strip is desktop only. Its two lines never fit the width without
     wrapping, and the qualification is already stated in the hero badge. */
  .creds { display: none; }
  .hero__mark { display: block; }
  .hero__eyebrow .ico--seal { display: none; }

  /* The portrait's own alpha fades out at the bottom, so the hero ends
     smoothly without a mask. The mask used to live here and clipped the
     drop-shadow square against the image bounds. */
  .hero { padding-bottom: 4px; }

  .services, .contact { padding-block: 72px; }
  .about { padding-block: 80px; }

  .bento { grid-template-columns: 1fr; gap: 14px; }
  .card:nth-child(n) { grid-column: auto; }
  .card--feature { min-height: 0; }

  .contact__panel { padding: 32px 24px; }
  .contact__aside { padding: 30px 24px; }
  .channel { padding: 16px 18px; gap: 14px; }

  .brand__role, .brand__sep { display: none; }
  .brand__name { font-size: 0.9688rem; }

  .blob { filter: blur(60px); }
}

@media (max-width: 560px) {
  /* Narrow phones: the arrow costs room the address needs, so drop it and let the
     address use the full row instead of breaking mid-word. */
  .channel__go { display: none; }
  .channel__value--mail { font-size: 0.875rem; }

  .creds__item { align-items: flex-start; }
}

@media (max-width: 420px) {
  .hero__actions .btn { width: 100%; justify-content: center; }
  .facts__row { flex-direction: column; gap: 2px; }
  .facts dd { text-align: left; }
}

/* Touch devices get no custom cursor. */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .anim { opacity: 1; transform: none; transition: none; }
  .cursor-dot, .cursor-ring { display: none; }
  .cursor-active, .cursor-active * { cursor: auto !important; }
  .blob { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}