/* ==========================================================================
   HSBG Partners — site.css

   One page, framed by hairlines. Dark "panels" (grid, grain, soft light and a
   generated graphic) alternate with calm light sections of plain prose.

   0. Fonts            5. Light sections
   1. Tokens           6. Card panels (what we do, contact)
   2. Base             7. Who we work with
   3. Frame            8. Footer, sub-pages
   4. Panels + hero    9. Motion, reduced motion, print
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted, latin subset, variable weight) -------- */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-tight-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  --ink: #0A0A0C;
  --paper: #F4F2ED;
  --paper-deep: #ECE9E1;
  --sand: #DCD6C8;
  --blue: #2C3FF0;
  --lime: #C9F24E;
  --panel: #08080C;

  --text: var(--ink);
  --text-body: rgba(10, 10, 12, 0.72);
  --text-meta: rgba(10, 10, 12, 0.58);
  --line: rgba(10, 10, 12, 0.11);

  --on-dark: var(--paper);
  --on-dark-body: rgba(244, 242, 237, 0.7);
  --on-dark-meta: rgba(244, 242, 237, 0.5);
  --on-dark-line: rgba(244, 242, 237, 0.12);

  --f-display: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --frame: clamp(10px, 1.7vw, 24px);     /* gap between viewport and frame */
  --pad: clamp(22px, 3.4vw, 48px);       /* text column inset inside frame */
  --maxw: 1600px;
  --sec-y: clamp(76px, 9vw, 136px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Film grain. Light: dark specks for paper. Dark: light specks for panels. */
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, never hidden: hidden makes <html> a scroll container */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper) var(--grain-light);
  color: var(--text);
  font: 400 17px/1.7 var(--f-body);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }

h1, h2 {
  font-family: var(--f-display);
  font-weight: 460;
  letter-spacing: -0.022em;
  line-height: 1.16;
  text-wrap: balance;
}

h2 { font-size: clamp(1.45rem, 1.15rem + 0.9vw, 1.85rem); }

p { text-wrap: pretty; }

a { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Underline that draws in on hover. Used for every inline link. */
.u {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.5s var(--ease);
}
.u:hover { background-size: 0 1px; background-position: 100% 100%; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
  text-decoration: none;
  transition: top 0.3s var(--ease);
}
.skip:focus { top: 12px; }

/* Smooth scroll (Lenis, js/vendor). It drives the page's native scroll
   position, so sticky, IntersectionObserver and anchors work as normal.
   CSS smooth scrolling has to be off while it runs, or the two fight. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- 3. Frame ------------------------------------------------------
   Hairlines down both sides of the page, inset from the viewport. Every
   section sits between them; dark panels fill the full frame width. */

.frame {
  position: relative;
  width: calc(100% - 2 * var(--frame));
  max-width: var(--maxw);
  margin: 0 auto;
  border-inline: 1px solid var(--line);
}

.frame > * + *,
main > * + * { border-top: 1px solid var(--line); }

.band { height: var(--frame); }      /* paper strip above the hero */

/* ---------- 4. Panels + hero ------------------------------------------- */

.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--panel);
  color: var(--on-dark);
}

/* soft light: cobalt bloom, warm edges */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(52% 60% at var(--glow-x, 26%) var(--glow-y, 50%), rgba(44, 63, 240, 0.26), transparent 72%),
    radial-gradient(42% 46% at 0% 100%, rgba(220, 214, 200, 0.11), transparent 70%),
    radial-gradient(30% 40% at 100% 0%, rgba(220, 214, 200, 0.07), transparent 70%);
}

/* grain on top of everything inside the panel */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--grain-dark);
  pointer-events: none;
}

.panel__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* --- hero --- */

.hero {
  --glow-x: 30%;
  --glow-y: 46%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  min-height: clamp(600px, calc(100svh - 2 * var(--frame) - 44px), 900px);
  padding: var(--pad);
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.lockup {
  width: clamp(124px, 15.2vw, 226px);
  height: auto;
  overflow: visible;
  color: var(--on-dark);
}
.lockup .lk-l,
.lockup .lk-p { fill: currentColor; }
.lockup .lk-partners { opacity: 0.72; }
.lockup .lk-dot { fill: var(--lime); }

.hero__mail {
  font-size: 15px;
  color: var(--on-dark);
  margin-top: 2px;
  white-space: nowrap;
}

.hero__title {
  position: relative;
  z-index: 2;
  max-width: 19em;
  font-size: clamp(1.7rem, 1.1rem + 1.85vw, 2.6rem);
  line-height: 1.14;
  color: var(--on-dark);
}

/* ---------- 5. Light sections -------------------------------------------- */

.sec {
  padding: var(--sec-y) var(--pad);
}

.sec h2 { margin-bottom: 26px; }

.prose { max-width: 37em; }
.prose p { color: var(--text-body); }
.prose p + p { margin-top: 1.15em; }
.prose--lead p:first-child {
  color: var(--text);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.62;
}

/* ---------- 6. Card panels ------------------------------------------------
   Desktop: a card on the left running from below the panel top to the panel
   bottom, the generated graphic on the right. Narrow: graphic first, card
   full width underneath. */

.split {
  --glow-x: 74%;
  --glow-y: 46%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(560px, 62vw, 760px);
}

.split__art { grid-column: 2; position: relative; min-height: 280px; }

.card {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 2;
  margin-top: clamp(96px, 10vw, 150px);
  padding: clamp(36px, 4.4vw, 64px) var(--pad) clamp(40px, 5vw, 72px);
  background: linear-gradient(180deg, #000 0%, #050507 100%);
  color: var(--on-dark);
}

.card h2 { margin-bottom: 18px; }
.card p { color: var(--on-dark-body); max-width: 31em; }

/* paper card for the contact panel (a form reads best on paper) */
.card--paper {
  background: var(--paper) var(--grain-light);
  color: var(--text);
}
.card--paper p { color: var(--text-body); }

/* --- what we do --- */

.svc { margin-top: 30px; border-top: 1px solid var(--on-dark-line); }

.svc__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 6px 28px;
  padding: 15px 0 16px;
  border-bottom: 1px solid var(--on-dark-line);
  transition: color 0.4s var(--ease);
}

.svc__item dt {
  position: relative;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.012em;
}

/* The brand dot marks the row you're on. It hangs in the margin, so the
   titles and descriptions share one left edge whether it shows or not. */
.svc__item dt::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  transform: scale(0);
  transition: transform 0.45s var(--ease);
}

.svc__item dd {
  color: var(--on-dark-meta);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
  transition: color 0.4s var(--ease);
}

.svc__item.is-on dt::before { transform: scale(1); }
.svc__item.is-on dd { color: var(--on-dark-body); }

/* --- contact --- */

.mail-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 26px;
}

.mail-row .big {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 460;
  letter-spacing: -0.018em;
}

.copy {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 6px 13px 7px;
  font-size: 13px;
  color: var(--text-meta);
  transition: border-color 0.3s, color 0.3s;
}
.copy:hover { border-color: var(--ink); color: var(--ink); }

.form {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

.field { display: grid; gap: 6px; }
.field--wide { grid-column: 1 / -1; }

.field span {
  font-size: 13px;
  color: var(--text-meta);
}

.field input,
.field textarea {
  width: 100%;
  font-size: 16px;               /* 16px+ stops iOS zooming on focus */
  padding: 8px 0 9px;
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 12, 0.22);
  border-radius: 0;
  background: transparent;
  outline: 0;
  transition: border-color 0.3s;
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.field input:focus,
.field textarea:focus { border-color: var(--ink); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(10, 10, 12, 0.36); }

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px 13px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { background: #1d1d22; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn svg { width: 14px; height: 14px; transition: transform 0.45s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.form__note { font-size: 13px; color: var(--text-meta); }

.form__status {
  grid-column: 1 / -1;
  font-size: 15px;
  min-height: 0;
}
.form__status:empty { display: none; }
.form__status.is-error { color: #A4261B; }

/* honeypot: present for bots, absent for people */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sent {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.sent h3 { font: 500 19px/1.3 var(--f-display); letter-spacing: -0.012em; margin-bottom: 6px; }

/* ---------- 7. Who we work with ------------------------------------------
   A full-width band of hairline cells, like a logo wall without the logos. */

.sec--how { padding-bottom: 0; }

.who__head {
  margin: clamp(56px, 7vw, 96px) 0 22px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.012em;
}

.who__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 calc(-1 * var(--pad));
  border-top: 1px solid var(--line);
}

.who__grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(84px, 8vw, 112px);
  padding: 18px 20px;
  font-family: var(--f-display);
  font-size: 15.5px;
  font-weight: 460;
  letter-spacing: -0.01em;
  color: rgba(10, 10, 12, 0.78);
  text-wrap: balance;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--tint-a, 135deg), rgba(220, 214, 200, var(--tint, 0.32)), rgba(220, 214, 200, 0) 72%);
}
.who__grid li:nth-child(3n) { border-right: 0; }
.who__grid li:nth-last-child(-n + 3) { border-bottom: 0; }
.who__grid li:nth-child(2) { --tint: 0.18; --tint-a: 200deg; }
.who__grid li:nth-child(3) { --tint: 0.4;  --tint-a: 300deg; }
.who__grid li:nth-child(4) { --tint: 0.24; --tint-a: 30deg; }
.who__grid li:nth-child(5) { --tint: 0.36; --tint-a: 160deg; }
.who__grid li:nth-child(6) { --tint: 0.2;  --tint-a: 250deg; }

/* ---------- 8. Footer + sub-pages --------------------------------------- */

.foot {
  padding: clamp(44px, 5vw, 64px) var(--pad) clamp(30px, 3.4vw, 40px);
  font-size: 14px;
  color: var(--text-meta);
}

.foot__logo { height: 22px; width: auto; }

.foot__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: clamp(32px, 4vw, 52px);
}

.foot__links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot__links a { color: var(--text); }

.band--end { height: var(--frame); }

/* sub-page top bar */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px var(--pad);
  font-size: 15px;
}
.bar img { height: 24px; width: auto; }

.page {
  padding: clamp(56px, 7vw, 104px) var(--pad) var(--sec-y);
}
.page h1 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.8rem); margin-bottom: 18px; }
.page .meta { font-size: 14px; color: var(--text-meta); margin-bottom: 40px; }
.page h2 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); margin: 38px 0 10px; }
.page p, .page li { color: var(--text-body); }
.page ul { margin: 10px 0 0; padding-left: 1.2em; list-style: disc; }
.page li + li { margin-top: 6px; }

/* full-panel message pages (thanks, 404) */
.notice {
  --glow-x: 50%;
  --glow-y: 60%;
  min-height: clamp(460px, 70vh, 720px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--pad);
}
.notice h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); margin-bottom: 14px; }
.notice p { color: var(--on-dark-body); max-width: 30em; margin: 0 auto; }
.notice .btn { margin-top: 30px; background: var(--paper); color: var(--ink); }

/* ---------- 9. Responsive ------------------------------------------------ */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__art { grid-column: 1; grid-row: 1; min-height: clamp(260px, 62vw, 360px); }
  .card { grid-column: 1; grid-row: 2; margin-top: 0; }
  .who__grid { grid-template-columns: repeat(2, 1fr); }
  .who__grid li:nth-child(3n) { border-right: 1px solid var(--line); }
  .who__grid li:nth-child(2n) { border-right: 0; }
  .who__grid li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .who__grid li:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { min-height: calc(100svh - 2 * var(--frame)); max-height: 820px; gap: 32px; }
  .hero__mail { font-size: 14px; }
  .svc__item { grid-template-columns: 1fr; padding: 14px 0; }
  .form { grid-template-columns: 1fr; }
  .who__grid li { font-size: 14.5px; min-height: 76px; padding: 14px 12px; }
  .foot__row { flex-direction: column; align-items: flex-start; }
}

/* ---------- 10. Motion ---------------------------------------------------
   Everything is visible by default. Hidden starting states only apply when
   the inline script has added .js to <html>, so a page without JavaScript
   (or with it blocked) still shows everything. */

/* hero lockup: HSBG rises, the dot lands, Partners opens out to full width */
.js .lockup .lk-l {
  transform: translateY(96px);
  transition: transform 1.05s var(--ease) calc(0.1s + var(--i) * 0.07s);
}
.js .lockup .lk-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.68s;
}
.js .lockup .lk-p {
  opacity: 0;
  transform: translateX(var(--dx));
  transition:
    opacity 0.9s var(--ease) calc(0.78s + var(--i) * 0.035s),
    transform 1.25s var(--ease) 0.74s;
}
.js .lockup.is-in .lk-l,
.js .lockup.is-in .lk-p { transform: none; opacity: 1; }
.js .lockup.is-in .lk-dot { transform: scale(1); }

/* headline: line by line, from behind a mask */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease) calc(0.06s + var(--n) * 0.11s);
}
.hero__title.is-in .line > span { transform: none; }

.js .hero__mail { opacity: 0; transition: opacity 1s var(--ease) 1.1s; }
.js .hero__mail.is-in { opacity: 1; }

/* the form needs JavaScript to send; without it, the email address is the way in */
html:not(.js) .form { display: none; }

/* sections drift up as they arrive */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 0.09s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .panel { background: #fff; color: #000; }
  .panel::before, .panel::after, .panel__canvas, .form { display: none; }
}