/* Variant 02 — OBSIDIAN
   Vibe: Ethereal Glass. The whole page runs on the dark theme (Colour Manual §3),
   not just the hero band: ink-950 ground, two slow navy/teal mesh orbs, cards cut
   from near-black glass with white/10 hairlines. Layout: asymmetric bento under a
   split opener. Teal appears once per view — the icon mark and the section rail. */

body {
  background-color: var(--ink-950);
  color: rgba(255, 255, 255, .92);
  --accent: var(--teal-400);
  --ink-soft: rgba(255, 255, 255, .56);
  --ink-faint: rgba(255, 255, 255, .38);
  --hair: rgba(255, 255, 255, .1);
  --shell: rgba(255, 255, 255, .045);
  --core: rgba(9, 15, 25, .72);
  --chip: rgba(255, 255, 255, .08);
  --chip-strong: rgba(255, 255, 255, .14);
  --island-bg: rgba(14, 26, 43, .55);
  --island-bg-scrolled: rgba(14, 26, 43, .78);
  --island-line: rgba(255, 255, 255, .12);
  --island-fg: #fff; --island-fg-soft: rgba(255, 255, 255, .58);
  --sheet-bg: rgba(7, 12, 20, .84);
  --sheet-fg: #fff; --sheet-fg-soft: rgba(255, 255, 255, .5);
  --eyebrow-fg: rgba(255, 255, 255, .7);
  --eyebrow-bg: rgba(255, 255, 255, .05);
  --eyebrow-line: rgba(255, 255, 255, .1);
  --veil: var(--ink-950);
  --cta-bg: #fff; --cta-bg-hover: #fff; --cta-fg: var(--ink-900);
  --cta-knob: rgba(14, 26, 43, .09); --cta-knob-hover: rgba(14, 26, 43, .16);
  --sh: 0, 0, 0;
  --page-max: 1320px; --page-gutter: clamp(1rem, 5vw, 5rem);
}

/* two mesh orbs drifting behind everything, plus grain. Both fixed. */
body::before, body::after { content: ""; position: fixed; pointer-events: none; }
body::before {
  inset: -30%; z-index: -2;
  background-image:
    radial-gradient(40% 44% at 18% 12%, rgba(47, 142, 163, .34) 0%, rgba(47, 142, 163, 0) 70%),
    radial-gradient(46% 48% at 84% 22%, rgba(33, 50, 73, .72) 0%, rgba(33, 50, 73, 0) 72%),
    radial-gradient(52% 54% at 62% 88%, rgba(22, 36, 58, .8) 0%, rgba(22, 36, 58, 0) 74%);
  filter: blur(60px) saturate(1.15);
  animation: drift 42s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform;
}
body::after {
  inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px; opacity: .2; mix-blend-mode: overlay;
}
@keyframes drift {
  0%   { transform: translate3d(-2%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(3%, 1%, 0) scale(1.14); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; transform: scale(1.08); } }

/* ---- shell ---- */
.page, .masthead { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.page { display: flex; flex-direction: column; }
main { flex: 1 1 auto; }
section { padding-block: 0 clamp(6rem, 12vw, 10rem); }

/* the hero band is the same ink as the page here, so the seam disappears and the
   lockup simply floats at the top of one continuous dark field */
.hero { position: relative; z-index: 35; background: var(--ink-950); color: #fff; }
/* the lockup scrolls with the page, on the same line as the pinned hamburger */
.masthead {
  display: flex; justify-content: flex-start; align-items: center;
  min-block-size: var(--pill-h);
  /* pull the row up by half the lockup's overshoot so its centre keeps sitting
     on the pinned pill's centre, whatever the lockup grows to */
  padding-block: calc(clamp(1rem, 2.4vw, 1.6rem) - (var(--logo-h) - var(--pill-h)) / 2)
                 clamp(1.75rem, 3.5vw, 2.75rem);
}

/* ---- opener: editorial split ---- */
.opener {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(6rem, 12vw, 10rem);
  align-items: end;
}
.opener .eyebrow { grid-column: 1 / -1; justify-self: start; }
.display {
  font-size: clamp(3rem, 9.5vw, 8rem); font-weight: 600;
  letter-spacing: -.055em; line-height: .9; text-wrap: balance;
}
.display em { font-style: normal; color: var(--accent); }
.opener-side { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.5rem, 3vw, 2.25rem); }
.lede {
  max-width: 40ch; font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6; letter-spacing: -.01em; color: var(--ink-soft); text-wrap: pretty;
}
@media (min-width: 900px) {
  .opener { grid-template-columns: 1.15fr .85fr; }
  .opener .eyebrow { grid-column: 1 / 2; }
  .opener-side { padding-bottom: .75rem; }
}

/* ---- section heads ---- */
.sec-head { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.sec-idx {
  display: inline-block; margin-bottom: 1rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
}
h2 {
  font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 600;
  letter-spacing: -.045em; line-height: .95; text-wrap: balance;
}

/* ---- bento of black glass ---- */
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(12, 1fr); }
.card {
  grid-column: span 12; padding: .45rem;
  background: var(--shell); border: 1px solid var(--hair); border-radius: 2rem;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, .9);
  transition: transform .7s var(--glide), border-color .7s var(--glide), background .7s var(--glide);
}
.card:hover { transform: translate3d(0, -4px, 0); border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); }
.card:active { transform: translate3d(0, -1px, 0) scale(.994); }
.card .plate {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; gap: .55rem;
  min-height: 12rem; padding: clamp(1.4rem, 2.6vw, 2.1rem);
  background: var(--core); border-radius: calc(2rem - .45rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: background .7s var(--glide);
}
.card:hover .plate { background: rgba(14, 22, 36, .78); }
/* a teal glow wakes in the corner nearest the icon — opacity only */
.card .plate::before {
  content: ""; position: absolute; inset: auto -30% 40% auto; width: 18rem; height: 18rem;
  background: radial-gradient(circle, rgba(79, 169, 188, .22) 0%, rgba(79, 169, 188, 0) 68%);
  opacity: 0; transition: opacity .8s var(--glide); pointer-events: none;
}
.card:hover .plate::before { opacity: 1; }
.plate-top {
  /* margin-bottom:auto pins this row to the top of the plate and drops the copy
     to the bottom — the same reading as the old absolute placement, but the two
     can never overlap once the title or the meta line wraps */
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: auto; padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.card .ico-svc {
  width: clamp(1.7rem, 2.8vw, 2.25rem); height: clamp(1.7rem, 2.8vw, 2.25rem);
  opacity: .9; transition: opacity .7s var(--glide);
}
.card:hover .ico-svc { opacity: 1; }
.card .idx { font-size: .68rem; letter-spacing: .2em; color: var(--ink-faint); }
.card h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.card p { max-width: 36ch; font-size: clamp(.875rem, 1.1vw, .95rem); line-height: 1.55; letter-spacing: -.01em; color: var(--ink-soft); text-wrap: pretty; }
.meta { margin-top: .5rem; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
@media (min-width: 768px) {
  .card:nth-child(1) { grid-column: span 5; }
  .card:nth-child(2) { grid-column: span 7; }
  .card:nth-child(3) { grid-column: span 7; }
  .card:nth-child(4) { grid-column: span 5; }
  .card .plate { min-height: 18rem; }
  .card:nth-child(2) h3, .card:nth-child(3) h3 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
}

/* ---- partners ---- */
.plates { display: flex; flex-wrap: wrap; gap: .75rem; }
.partners a {
  display: flex; flex-direction: column; gap: .45rem; padding: .45rem;
  background: var(--shell); border: 1px solid var(--hair); border-radius: 1.75rem;
  transition: transform .7s var(--glide), border-color .7s var(--glide), background .7s var(--glide);
}
.partners a:hover { transform: translate3d(0, -4px, 0); border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); }
.partners .plate {
  display: grid; place-items: center;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: var(--core); border-radius: calc(1.75rem - .45rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* the partner marks are dark-on-light artwork, so they sit on their own light
   plate inside the dark tray rather than being inverted */
.partners img {
  width: clamp(9.5rem, 17vw, 12.5rem); min-height: 6.5rem; object-fit: contain;
  padding: .9rem 1.1rem; background: #fff; border-radius: .9rem;
}
.p-meta {
  display: flex; align-items: center; gap: .9rem; padding: .4rem .5rem .4rem 1rem;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.p-meta em:first-child { font-style: normal; color: rgba(255, 255, 255, .8); letter-spacing: .1em; }
.p-meta em { font-style: normal; }
.p-meta .knob {
  margin-left: auto; flex: none; width: 1.85rem; height: 1.85rem; border-radius: 999px;
  display: grid; place-items: center; font-style: normal; font-size: .75rem;
  background: var(--chip); color: #fff;
  transition: transform .6s var(--glide), background .6s var(--glide), color .6s var(--glide);
}
.partners a:hover .knob { transform: translate3d(3px, -3px, 0) scale(1.06); background: var(--knob-hover); color: var(--knob-hover-fg); }

/* ---- contact ---- */
.rows { display: grid; gap: .75rem; max-width: 46rem; }
.row {
  display: flex; align-items: center; gap: 1rem; padding: .4rem .4rem .4rem 1.35rem;
  background: var(--shell); border: 1px solid var(--hair); border-radius: 999px;
  transition: transform .7s var(--glide), border-color .7s var(--glide);
}
.row:hover { transform: translate3d(0, -2px, 0); border-color: rgba(255, 255, 255, .2); }
.row .ico { width: 1.15rem; height: 1.15rem; color: var(--ink-soft); }
.row a {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem .85rem 1.3rem;
  background: var(--core); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: background .7s var(--glide);
}
.row a:hover { background: rgba(255, 255, 255, .1); }
.row-label { display: flex; flex-direction: column; gap: .15rem; font-size: clamp(1rem, 1.5vw, 1.1rem); font-weight: 500; letter-spacing: -.01em; }
.row-label em { font-style: normal; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.row a::after {
  content: "↗"; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  font-size: .8rem; color: #fff; background: var(--chip); border-radius: 999px;
  transition: transform .6s var(--glide), background .6s var(--glide), color .6s var(--glide);
}
.row a:hover::after { transform: translate3d(3px, -3px, 0) scale(1.06); background: var(--knob-hover); color: var(--knob-hover-fg); }

/* ---- foot ---- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--hair);
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.foot a:hover { color: var(--accent); }

@media (max-width: 767px) { body { --page-gutter: 1rem; } }