/* ============================================================
   HYBASE TECHNOLOGIES
   Monochrome chrome / brushed-steel system.
   Palette · Type · Layout · Signature (specular gleam)
   ============================================================ */

:root{
  /* Palette */
  --ink:        #08090a;
  --graphite:   #101215;
  --plate:      #191c21;
  --plate-edge: #2a2e35;
  --steel:      #6e767f;
  --steel-lite: #9aa2ab;
  --chrome:     #c9ced4;
  --gleam:      #ffffff;
  --paper:      #f1f2f3;
  --paper-edge: #d8dade;
  --paper-ink:  #16181b;

  /* Type */
  --display: "Archivo Black", "Arial Black", sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Rhythm */
  --pad-y: clamp(5rem, 10vw, 9rem);
  --hair: rgba(255,255,255,.10);
  --hair-dark: rgba(0,0,0,.12);

  /* Signature: cursor-tracked specular */
  --mx: 50%;
  --my: 40%;
}

/* The logo is delivered as a single --logo image so that the same
   stylesheet works whether the PNG sits on disk or is embedded. */
.logo-art{
  display:block;
  background-image:var(--logo, url("../img/hybase-logo.png"));
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  aspect-ratio:967 / 276;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--chrome);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:inherit; text-decoration:none; }

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

:focus-visible{
  outline:2px solid var(--gleam);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gleam); color:var(--ink);
  padding:.75rem 1.25rem; font-family:var(--mono); font-size:.75rem;
}
.skip:focus{ left:1rem; top:1rem; }

/* ── Shared type devices ─────────────────────────── */

.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 1.25rem;
}
.eyebrow .dot{ color:var(--steel-lite); margin:0 .35em; }

.kerf{
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.06) 6%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.06) 94%,
    transparent 100%);
  margin:clamp(1.75rem,3vw,2.75rem) 0;
}

.sec-head{ max-width:46ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-head__title{
  font-family:var(--display);
  font-size:clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--gleam);
  margin:0;
}
.sec-head--light .sec-head__title{ color:var(--paper-ink); }
.sec-head--light .eyebrow{ color:#7c838b; }

/* ── Buttons ─────────────────────────────────────── */

.btn-plate{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.9rem 1.5rem;
  color:var(--chrome);
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  transition:color .3s, border-color .3s, background .3s, transform .3s;
  white-space:nowrap;
}
.btn-plate:hover{
  color:var(--gleam);
  border-color:rgba(255,255,255,.6);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
}
.btn-plate:active{ transform:translateY(1px); }

.btn-plate--solid{
  color:var(--ink);
  border-color:transparent;
  background:linear-gradient(180deg,#ffffff 0%,#cdd2d7 52%,#eef0f2 53%,#aeb4bb 100%);
}
.btn-plate--solid:hover{
  color:var(--ink);
  border-color:transparent;
  background:linear-gradient(180deg,#ffffff 0%,#e2e6e9 52%,#ffffff 53%,#c7ccd2 100%);
}

/* ── Nav ─────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s, border-color .4s, backdrop-filter .4s;
}
.nav.is-stuck{
  background:rgba(8,9,10,.72);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--hair);
}
.nav__inner{
  display:flex; align-items:center; gap:2rem;
  padding-block:1.1rem;
}
.nav__brand{ display:block; flex:none; }
.nav__art{ height:22px; width:auto; }

.nav__links{
  display:flex; gap:2rem; margin-left:auto;
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.nav__links a{
  color:var(--steel); padding-block:.25rem;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav__links a:hover{ color:var(--gleam); border-bottom-color:var(--gleam); }
.nav__links a.is-active{ color:var(--chrome); border-bottom-color:rgba(255,255,255,.4); }
.nav__panel a.is-active{ color:var(--gleam); }

.nav__cta{ padding:.65rem 1.1rem; }

.nav__toggle{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  background:none; border:1px solid rgba(255,255,255,.2);
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.nav__toggle span{
  display:block; width:18px; height:1px; background:var(--chrome);
  transition:transform .3s, opacity .3s;
}
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.nav__panel{
  background:rgba(8,9,10,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--hair);
  padding:1rem 0 1.5rem;
}
.nav__panel a{
  display:block; padding:.85rem 1.5rem;
  font-family:var(--mono); font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--steel-lite);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.nav__panel a:hover{ color:var(--gleam); }

.nav__links{ gap:1.6rem; }

@media (max-width:1199.98px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
}

/* ── Hero ────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:9rem 5rem;
  overflow:hidden;
  background:var(--ink);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.025) 0 1px, transparent 1px 96px);
  mask-image:radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 78%);
}
.hero__vignette{
  position:absolute; inset:0;
  background:radial-gradient(70% 55% at var(--mx) var(--my), rgba(150,163,175,.14), transparent 70%);
  transition:background .2s linear;
}
.hero__inner{ position:relative; z-index:2; width:100%; text-align:center; }
.hero__eyebrow{ margin-bottom:clamp(1.5rem,3vw,2.25rem); }

/* The mark: the real logo at scale, lit by a specular highlight
   that is masked to the letterforms and tracks the cursor.
   This is the page's signature — everything else stays quiet. */
.hero__mark{
  position:relative;
  margin:0 auto;
  width:100%;
  max-width:min(520px, 84vw);
  isolation:isolate;
  clip-path:inset(0 100% 0 0);
  animation:wipe 1.3s .2s cubic-bezier(.16,.84,.34,1) forwards;
}
.hero__art{
  width:100%;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.5));
}
.hero__gleam{
  position:absolute; inset:0;
  background:radial-gradient(circle 130px at var(--lx,42%) var(--ly,45%),
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.45) 32%,
    rgba(255,255,255,0) 72%);
  -webkit-mask-image:var(--logo, url("../img/hybase-logo.png"));
  mask-image:var(--logo, url("../img/hybase-logo.png"));
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mix-blend-mode:screen;
  pointer-events:none;
}

@keyframes wipe{ to{ clip-path:inset(0 0 0 0); } }

.hero .kerf{ margin-top:clamp(1.5rem,3vw,2.5rem); }

.hero__deck{ align-items:center; justify-content:center; text-align:center; }
.hero__slogan{
  font-family:var(--display);
  font-size:clamp(1.35rem, .9rem + 1.7vw, 2.35rem);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--gleam);
  margin:0 auto;
  max-width:18ch;
}
.hero__sub{
  color:var(--steel-lite);
  max-width:52ch;
  margin:1.5rem auto 2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

.hero__scroll{
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%);
  width:1px; height:56px; background:rgba(255,255,255,.12); overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0; background:var(--gleam);
  animation:drop 2.4s ease-in-out infinite;
}
@keyframes drop{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ── Ticker ──────────────────────────────────────── */

.ticker{
  border-block:1px solid var(--hair);
  background:linear-gradient(180deg,#0e1013,#15181c);
  padding-block:1.15rem;
  overflow:hidden;
}
.ticker__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.ticker__group{
  display:flex; align-items:center; gap:2.5rem; padding-right:2.5rem;
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
  white-space:nowrap;
}
.ticker__group i{ font-style:normal; font-size:.5rem; color:rgba(255,255,255,.28); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── Purpose ─────────────────────────────────────── */

.purpose{ padding-block:var(--pad-y); background:var(--ink); }
.statement{ padding-left:0; }
.statement--rule{ border-left:1px solid var(--hair); padding-left:clamp(1.5rem,3vw,3rem); }
.statement__body{
  font-family:var(--display);
  font-size:clamp(1.5rem, 1rem + 1.9vw, 2.5rem);
  line-height:1.16;
  letter-spacing:-.02em;
  margin:0;
  background-image:linear-gradient(175deg,#ffffff 0%,#d3d8dd 46%,#8b929a 74%,#c6ccd2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width:991.98px){
  .statement--rule{ border-left:0; border-top:1px solid var(--hair); padding-left:0; padding-top:2.5rem; }
}

/* ── Capabilities (paper) ────────────────────────── */

.caps{
  padding-block:var(--pad-y) 0;
  background:var(--paper);
  color:var(--paper-ink);
}
.caps .eyebrow{ color:#7c838b; }
.caps .sec-head__title{ color:var(--paper-ink); }

.caps__grid{ border-top:1px solid var(--paper-edge); border-left:1px solid var(--paper-edge); }
.caps__grid > [class*="col-"]{
  border-right:1px solid var(--paper-edge);
  border-bottom:1px solid var(--paper-edge);
}

.cap{
  position:relative;
  height:100%;
  padding:clamp(1.75rem,3.4vw,3rem);
  background:linear-gradient(180deg,#fafbfb,#e9eaec);
  overflow:hidden;
  transition:background .35s;
}
.cap::after{ /* specular gleam on hover */
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(28% 60% at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.95), transparent 70%);
  opacity:0; transition:opacity .4s;
  pointer-events:none;
}
.cap:hover::after{ opacity:1; }
.cap > *{ position:relative; z-index:1; }

.cap__tag{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#8a9199;
  margin:0 0 1.5rem;
}
.cap__title{
  font-family:var(--display);
  font-size:clamp(1.15rem,.95rem + .7vw,1.6rem);
  line-height:1.14; letter-spacing:-.02em;
  color:var(--paper-ink);
  margin:0 0 1rem;
}
.cap__body{ color:#4a5057; margin:0 0 1.75rem; max-width:44ch; }

.cap__list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(0,0,0,.1); }
.cap__list li{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em;
  color:#5c636a;
  padding:.7rem 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.cap__list li::before{ content:"—"; margin-right:.75rem; color:#a3a9b0; }

/* ── Scope / spec plate ──────────────────────────── */

.scope{
  padding-block:0 var(--pad-y);
  background:var(--paper);
  color:var(--paper-ink);
}
.scope .sec-head{ padding-top:var(--pad-y); }

.spec{ margin:0; border-top:1px solid var(--paper-ink); }
.spec__row{
  display:grid;
  grid-template-columns:minmax(0,15rem) 1fr;
  gap:1rem;
  padding:1.35rem 0;
  border-bottom:1px solid var(--paper-edge);
  transition:background .3s;
}
.spec__row:hover{ background:rgba(0,0,0,.035); }
.spec dt{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:#82898f;
  padding-top:.35rem;
}
.spec dd{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1rem,.9rem + .55vw,1.4rem);
  letter-spacing:-.015em;
  color:var(--paper-ink);
  line-height:1.3;
}
.spec dd i{ font-style:normal; color:#b0b5ba; margin:0 .5rem; }

@media (max-width:575.98px){
  .spec__row{ grid-template-columns:1fr; gap:.5rem; }
}

/* ── Company ─────────────────────────────────────── */

.about{
  padding-block:var(--pad-y);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(154,162,171,.10), transparent 65%),
    var(--ink);
}

.plate{
  position:relative;
  margin-top:2.5rem;
  padding:clamp(2rem,4vw,3rem);
  border:1px solid var(--plate-edge);
  background:
    repeating-linear-gradient(96deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(160deg,#20242a 0%,#14171b 48%,#272b31 100%);
  overflow:hidden;
}
.plate::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(35% 70% at var(--gx,30%) var(--gy,20%), rgba(255,255,255,.16), transparent 65%);
  opacity:.6; transition:opacity .4s;
  pointer-events:none;
}
.plate:hover::after{ opacity:1; }
.plate__art{ width:100%; position:relative; z-index:1; }

.prose p{
  color:var(--steel-lite);
  margin:0 0 1.5rem;
  max-width:66ch;
}
.prose p:first-child{
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  color:var(--chrome);
  line-height:1.55;
}
.prose p:last-child{ margin-bottom:0; }

/* ── Contact ─────────────────────────────────────── */

.contact{
  padding-block:var(--pad-y);
  background:var(--graphite);
  border-top:1px solid var(--hair);
}
.contact__title{
  font-family:var(--display);
  font-size:clamp(1.9rem,1.2rem + 2.4vw, 3.2rem);
  line-height:1.05; letter-spacing:-.025em;
  margin:0 0 1.25rem;
  background-image:linear-gradient(175deg,#ffffff 0%,#cfd4d9 50%,#8d949c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.contact__sub{ color:var(--steel); max-width:36ch; margin:0; }

.channel{
  display:grid;
  grid-template-columns:minmax(0,9rem) 1fr;
  align-items:baseline; gap:1rem;
  padding:1.5rem 0;
  border-top:1px solid var(--hair);
}
.channel:last-child{ border-bottom:1px solid var(--hair); }
.channel__label{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  margin:0;
}
.channel__value{
  font-family:var(--display);
  font-size:clamp(1.05rem,.95rem + .6vw,1.5rem);
  letter-spacing:-.015em;
  color:var(--gleam);
  border-bottom:1px solid transparent;
  transition:border-color .25s;
  justify-self:start;
  word-break:break-word;
}
a.channel__value:hover{ border-bottom-color:var(--gleam); }
.channel__value--static{ color:var(--chrome); }

.channel__reveal{
  justify-self:start;
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--chrome);
  background:none;
  border:1px dashed rgba(255,255,255,.3);
  padding:.6rem 1.1rem;
  transition:color .25s, border-color .25s, background .25s;
}
.channel__reveal:hover{
  color:var(--gleam);
  border-color:var(--gleam);
  border-style:solid;
  background:rgba(255,255,255,.05);
}

@media (max-width:575.98px){
  .channel{ grid-template-columns:1fr; gap:.65rem; }
}

/* ── Footer ──────────────────────────────────────── */

.foot{
  background:var(--ink);
  border-top:1px solid var(--hair);
  padding-block:2.5rem;
}
.foot__inner{
  display:flex; flex-wrap:wrap; gap:.75rem 2.5rem; align-items:baseline;
}
.foot__mark{
  font-family:var(--display); font-size:.95rem; letter-spacing:-.01em;
  color:var(--chrome); margin:0;
}
.foot__slogan,
.foot__copy{
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--steel);
  margin:0;
}
.foot__copy{ margin-left:auto; }

/* ── Reveal on scroll ────────────────────────────── */

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.16,.84,.34,1), transform .8s cubic-bezier(.16,.84,.34,1);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ── Reduced motion ──────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__mark{ clip-path:none; animation:none; }
  [data-reveal]{ opacity:1; transform:none; }
  .ticker__track{ animation:none; }
  .hero__scroll{ display:none; }
}

/* ============================================================
   MULTIPAGE COMPONENTS
   ============================================================ */

/* ── Inner page header ───────────────────────────── */

.page-head{
  position:relative;
  padding-block:clamp(8.5rem,14vw,12rem) clamp(3rem,6vw,5rem);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(154,162,171,.14), transparent 70%),
    var(--ink);
  overflow:hidden;
}
.page-head__grid{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 96px);
  mask-image:linear-gradient(180deg,#000,transparent 85%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.page-head__inner{ position:relative; z-index:1; }
.page-head__title{
  font-family:var(--display);
  font-size:clamp(2.1rem, 1.2rem + 3.2vw, 4.25rem);
  line-height:1.02; letter-spacing:-.03em;
  margin:0;
  max-width:18ch;
  background-image:linear-gradient(175deg,#ffffff 0%,#d5dadf 48%,#8e959d 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-head__lede{
  color:var(--steel-lite);
  max-width:60ch;
  margin:2rem 0 0;
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);
  line-height:1.6;
}

/* ── Section wrappers ────────────────────────────── */

.sheet{ padding-block:var(--pad-y); background:var(--ink); }
.sheet--paper{ background:var(--paper); color:var(--paper-ink); }
.sheet--graphite{ background:var(--graphite); border-top:1px solid var(--hair); }
.sheet--paper .eyebrow{ color:#7c838b; }
.sheet--paper .sec-head__title{ color:var(--paper-ink); }
.sheet--tight{ padding-block:clamp(3rem,6vw,5rem); }

/* ── Long-form service block ─────────────────────── */

.svc{
  padding-block:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--hair);
  scroll-margin-top:6rem;
}
.svc:first-of-type{ border-top:0; padding-top:0; }
.svc__no{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; color:var(--steel);
  margin:0 0 1.25rem;
}
.svc__title{
  font-family:var(--display);
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  line-height:1.08; letter-spacing:-.025em;
  color:var(--gleam);
  margin:0 0 1.5rem;
}
.svc__lede{ color:var(--chrome); margin:0 0 1.25rem; }
.svc__body p{ color:var(--steel-lite); margin:0 0 1.25rem; }
.svc__body p:last-child{ margin-bottom:0; }

.svc__cols{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 3rem; margin-top:2.5rem; }
@media (max-width:767.98px){ .svc__cols{ grid-template-columns:1fr; } }

.svc__label{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  margin:0 0 1rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--hair);
}
.svc__list{ list-style:none; margin:0; padding:0; }
.svc__list li{
  padding:.6rem 0 .6rem 1.5rem;
  position:relative;
  color:var(--steel-lite);
  font-size:.9375rem;
}
.svc__list li::before{
  content:""; position:absolute; left:0; top:1.15rem;
  width:6px; height:1px; background:var(--steel);
}

/* ── Process: a real sequence, so it is numbered ─── */

.steps{ counter-reset:step; border-top:1px solid var(--paper-edge); }
.steps__item{
  counter-increment:step;
  display:grid;
  grid-template-columns:5rem 1fr 1.2fr;
  gap:1rem 2.5rem;
  align-items:start;
  padding:2rem 0;
  border-bottom:1px solid var(--paper-edge);
  transition:background .3s;
}
.steps__item:hover{ background:rgba(0,0,0,.03); }
.steps__item::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono); font-size:.8125rem; font-weight:500;
  letter-spacing:.1em; color:#9aa1a8;
  padding-top:.35rem;
}
.steps__title{
  font-family:var(--display);
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  letter-spacing:-.02em; line-height:1.2;
  color:var(--paper-ink); margin:0;
}
.steps__body{ margin:0; color:#4a5057; font-size:.9375rem; }
@media (max-width:767.98px){
  .steps__item{ grid-template-columns:3.5rem 1fr; gap:.5rem 1.25rem; }
  .steps__body{ grid-column:2; }
}

/* ── Principles / value tiles ────────────────────── */

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair); border-left:1px solid var(--hair); }
@media (max-width:991.98px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px){ .tiles{ grid-template-columns:1fr; } }

.tile{
  position:relative;
  padding:clamp(1.75rem,3vw,2.5rem);
  border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.tile::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(35% 70% at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.08), transparent 68%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.tile:hover::after{ opacity:1; }
.tile > *{ position:relative; z-index:1; }
.tile__title{
  font-family:var(--display);
  font-size:1.05rem; letter-spacing:-.015em;
  color:var(--gleam); margin:0 0 .85rem;
}
.tile__body{ color:var(--steel); font-size:.9375rem; margin:0; }

/* ── Industry rows ───────────────────────────────── */

.ind{ border-top:1px solid var(--paper-edge); }
.ind__row{
  display:grid;
  grid-template-columns:minmax(0,18rem) 1fr;
  gap:1rem 3rem;
  padding:2.25rem 0;
  border-bottom:1px solid var(--paper-edge);
  transition:background .3s;
}
.ind__row:hover{ background:rgba(0,0,0,.03); }
.ind__name{
  font-family:var(--display);
  font-size:clamp(1.1rem,.95rem + .6vw,1.5rem);
  letter-spacing:-.02em; line-height:1.2;
  color:var(--paper-ink); margin:0;
}
.ind__body{ margin:0 0 1rem; color:#4a5057; }
.ind__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.ind__tags li{
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:#5c636a;
  border:1px solid var(--paper-edge);
  padding:.35rem .6rem;
}
@media (max-width:767.98px){ .ind__row{ grid-template-columns:1fr; } }

/* ── FAQ (no JS: native details) ─────────────────── */

.faq{ border-top:1px solid var(--hair); }
.faq__item{ border-bottom:1px solid var(--hair); }
.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:1.5rem 3rem 1.5rem 0;
  position:relative;
  font-family:var(--display);
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  letter-spacing:-.015em;
  color:var(--chrome);
  transition:color .25s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gleam); }
.faq__item summary::after{
  content:"+";
  position:absolute; right:0; top:1.35rem;
  font-family:var(--mono); font-size:1.25rem; font-weight:400;
  color:var(--steel);
  transition:transform .3s, color .3s;
}
.faq__item[open] summary::after{ transform:rotate(45deg); color:var(--gleam); }
.faq__answer{ color:var(--steel-lite); margin:0 0 1.75rem; max-width:70ch; font-size:.9375rem; }

/* ── CTA band ────────────────────────────────────── */

.band{
  padding-block:clamp(4rem,8vw,6.5rem);
  background:
    repeating-linear-gradient(96deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    linear-gradient(160deg,#1d2126 0%,#0e1013 55%,#22262c 100%);
  border-block:1px solid var(--plate-edge);
  text-align:center;
}
.band__title{
  font-family:var(--display);
  font-size:clamp(1.6rem,1.1rem + 2vw,2.75rem);
  line-height:1.06; letter-spacing:-.025em;
  margin:0 auto 1.25rem; max-width:20ch;
  background-image:linear-gradient(175deg,#ffffff 0%,#cfd4d9 52%,#8d949c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.band__sub{ color:var(--steel); margin:0 auto 2.25rem; max-width:48ch; }
.band__actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* ── Enquiry form ────────────────────────────────── */

.form{ margin-top:1rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:575.98px){ .form__row{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.5rem; }
.field label{
  display:block;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
  margin-bottom:.65rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  border-radius:0;
  color:var(--gleam);
  font-family:var(--body); font-size:1rem; font-weight:300;
  padding:.9rem 1rem;
  transition:border-color .25s, background .25s;
}
.field textarea{ min-height:9rem; resize:vertical; }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--graphite); color:var(--chrome); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gleam);
  background:rgba(255,255,255,.06);
}
.field input::placeholder,
.field textarea::placeholder{ color:#5b626a; }
.field__error{
  display:none;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em;
  color:#e2e6e9; margin-top:.5rem;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{ border-color:#e2e6e9; border-style:dashed; }
.field.is-invalid .field__error{ display:block; }

.form__note{
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
  margin:1.5rem 0 0;
}
.form__status{
  margin-top:1.5rem; padding:1rem 1.25rem;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);
  color:var(--chrome);
  font-size:.9375rem;
}
.form__status[hidden]{ display:none; }

/* ── Footer, expanded ────────────────────────────── */

.foot__cols{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:3rem;
  padding-bottom:3rem;
  margin-bottom:2.5rem;
  border-bottom:1px solid var(--hair);
}
@media (max-width:991.98px){ .foot__cols{ grid-template-columns:1fr 1fr; gap:2.5rem; } }
@media (max-width:575.98px){ .foot__cols{ grid-template-columns:1fr; } }

.foot__logo{ width:150px; margin-bottom:1.5rem; opacity:.9; }
.foot__blurb{ color:var(--steel); font-size:.9375rem; margin:0; max-width:34ch; }
.foot__head{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  margin:0 0 1.25rem;
}
.foot__list{ list-style:none; margin:0; padding:0; }
.foot__list li{ margin-bottom:.75rem; }
.foot__list a,
.foot__list span{ color:var(--chrome); font-size:.9375rem; transition:color .25s; }
.foot__list a:hover{ color:var(--gleam); }