/* ---- GLAT / glat.io -------------------------------------------------------
   Single-theme by design: a dark "schematic sheet". Every color is painted
   explicitly so the page holds on any host background.
   Brand: #009966 green, #1177ee blue.
--------------------------------------------------------------------------- */
:root{
  color-scheme: dark;

  --ground:      #060f14;
  --ground-2:    #0a1720;
  --ground-3:    #0e2029;
  --hair:        rgba(126,178,201,.16);
  --hair-strong: rgba(126,178,201,.30);

  --text:   #e6eff3;
  --muted:  #93abb6;
  --dim:    #6e8794;

  --green:       #009966;
  --green-lift:  #16c98c;
  --blue:        #1177ee;
  --blue-lift:   #6db4ff;

  --sans:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --display: "Archivo", var(--sans);
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pad:  clamp(1.25rem, 5vw, 4rem);
  --max:  76rem;
  --rule: 1px solid var(--hair);
}

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

html{ background:var(--ground); }

body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* ambient wash, anchored to the top of the document */
  background-image:
    radial-gradient(115ch 60ch at 12% -12%, rgba(17,119,238,.14), transparent 60%),
    radial-gradient(80ch 46ch at 92% 2%, rgba(0,153,102,.10), transparent 62%);
  background-repeat:no-repeat;
}

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.02em; text-wrap:balance; margin:0; }
p{ margin:0; }
a{ color:var(--green-lift); text-decoration-thickness:1px; text-underline-offset:.22em; }
a:hover{ color:var(--text); }
:focus-visible{ outline:2px solid var(--green-lift); outline-offset:3px; border-radius:2px; }
::selection{ background:rgba(0,153,102,.35); color:#fff; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }

/* mono utility label ----------------------------------------------------- */
.tag{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.tag--green{ color:var(--green-lift); }

/* skip link -------------------------------------------------------------- */
.skip{ position:absolute; left:1rem; top:1rem; z-index:60; transform:translateY(-160%); transition:transform .18s ease; }
.skip:focus-visible{ transform:none; }

/* logo ------------------------------------------------------------------- */
.mark{ display:block; height:auto; }

/* header ----------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:20;
  border-bottom:var(--rule);
  background:rgba(6,15,20,.90);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px);
}
.site-head__in{ display:flex; align-items:center; gap:1.5rem; min-height:4.25rem; }
.brand{ margin-right:auto; display:inline-flex; align-items:center; gap:.75rem; color:var(--text); text-decoration:none; }
.brand .mark{ width:6.5rem; color:var(--text); transition:color .2s ease; }
.brand:hover .mark{ color:var(--green-lift); }
.brand__sub{ display:none; white-space:nowrap; font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); border-left:var(--rule); padding-left:.75rem; }
.site-nav{ display:none; gap:1.75rem; }
.site-nav a{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.site-nav a:hover{ color:var(--text); }

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.8125rem; font-weight:500; letter-spacing:.06em;
  padding:.7rem 1.05rem; border-radius:2px; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--primary{ background:var(--green); color:#03130d; }
.btn--primary:hover{ background:var(--green-lift); color:#03130d; transform:translateY(-1px); }
.btn--ghost{ border-color:var(--hair-strong); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--blue-lift); color:var(--blue-lift); background:rgba(17,119,238,.08); }
.btn__dot{ width:.4rem; height:.4rem; border-radius:50%; background:currentColor; opacity:.7; flex:none; }
.head-cta__short{ display:inline; }
.head-cta__long{ display:none; }

/* sections --------------------------------------------------------------- */
.section{ border-bottom:var(--rule); padding-block:clamp(3.5rem, 8vw, 6.5rem); }
.section__head{ display:flex; flex-direction:column; gap:1rem; margin-bottom:clamp(2rem,4vw,3rem); }
.section__head h2{ font-size:clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
.section__head p{ color:var(--muted); max-width:56ch; }
.rule-label{ display:flex; align-items:center; gap:1rem; }
.rule-label::after{ content:""; flex:1; height:1px; background:var(--hair); }

/* hero ------------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3.5rem, 9vw, 7.5rem) clamp(3rem, 7vw, 5.5rem); border-bottom:var(--rule); }
.hero::before{ /* drafting grid, faded out toward the fold */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size:96px 96px; background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg, #000 0, transparent 86%);
  mask-image:linear-gradient(180deg, #000 0, transparent 86%);
}
.hero > .wrap{ position:relative; }
.hero__mark{ position:relative; width:min(30rem, 78%); margin-bottom:clamp(2rem,4vw,3rem); }
.hero__mark .mark{ position:relative; z-index:1; width:100%; color:var(--green); }
.hero__mark .mark--reg{ position:absolute; inset:0; z-index:0; color:var(--blue); opacity:.5; transform:translate(7px,7px); }
.hero h1{ font-size:clamp(2.1rem, 1.2rem + 3.6vw, 4rem); max-width:19ch; }
.hero h1 em{ font-style:normal; color:var(--green-lift); }
.hero__lede{ margin-top:1.5rem; color:var(--muted); font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); max-width:58ch; }
.hero__cta{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.75rem; }

/* facts strip ------------------------------------------------------------ */
.facts-band{ border-bottom:var(--rule); padding-block:clamp(2.5rem,5vw,3.5rem); }
.facts{ margin:0; display:grid; gap:1px; background:var(--hair); border:var(--rule); }
.facts > div{ background:var(--ground-2); padding:1.5rem; }
.facts dt{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-lift); }
.facts dd{ margin:.55rem 0 0; color:var(--muted); font-size:.9375rem; }
.facts dd b{ color:var(--text); font-weight:500; }

/* service cards ---------------------------------------------------------- */
.cards{ display:grid; gap:1px; background:var(--hair); border:var(--rule); }
.card{ background:var(--ground-2); padding:clamp(1.5rem,3vw,2.25rem); display:flex; flex-direction:column; gap:.85rem; transition:background-color .2s ease; }
.card:hover{ background:var(--ground-3); }
.card h3{ font-size:1.1875rem; letter-spacing:-.01em; }
.card p{ color:var(--muted); font-size:.9375rem; }
.card__key{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-lift); }

/* stack ------------------------------------------------------------------ */
.stack{ display:grid; gap:2.5rem; }
.stack__group h3{ font-size:1.25rem; margin-bottom:.6rem; }
.stack__group > p{ color:var(--muted); font-size:.9375rem; max-width:52ch; }
.chips{ list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.chips li{
  font-family:var(--mono); font-size:.8125rem; color:var(--text);
  border:1px solid var(--hair-strong); border-radius:2px; padding:.4rem .7rem;
  background:var(--ground-2);
}
.stack__note{ margin-top:2.5rem; padding-top:1.5rem; border-top:var(--rule); color:var(--dim); font-size:.9375rem; max-width:62ch; }

/* engagement steps (a real sequence — hence the numbers) ------------------ */
.steps{ counter-reset:step; display:grid; gap:1px; background:var(--hair); border:var(--rule); }
.step{ background:var(--ground-2); padding:clamp(1.5rem,3vw,2.25rem); display:flex; flex-direction:column; gap:.8rem; }
.step__n{ font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; color:var(--blue-lift); display:flex; align-items:center; gap:.7rem; }
.step__n::after{ content:""; flex:1; height:1px; background:var(--hair); }
.step h3{ font-size:1.1875rem; }
.step p{ color:var(--muted); font-size:.9375rem; }

/* audience --------------------------------------------------------------- */
.who{ display:grid; gap:2rem; }
.who__item{ padding-top:1.25rem; border-top:2px solid var(--green); }
.who__item h3{ font-size:1.0625rem; margin-bottom:.5rem; }
.who__item p{ color:var(--muted); font-size:.9375rem; }

/* principles band -------------------------------------------------------- */
.band{ background:var(--ground-2); border-bottom:var(--rule); padding-block:clamp(3rem,6vw,4.5rem); }
.band__grid{ display:grid; gap:2rem; margin-top:2rem; }
.band h3{ font-size:1.0625rem; margin-bottom:.5rem; }
.band p{ color:var(--muted); font-size:.9375rem; }

/* contact ---------------------------------------------------------------- */
.contact{ padding-block:clamp(4rem,9vw,7rem); border-bottom:var(--rule); }
.contact h2{ margin-top:1.5rem; font-size:clamp(1.8rem,1.2rem + 2.6vw,3rem); max-width:16ch; }
.contact p{ margin-top:1.25rem; color:var(--muted); max-width:52ch; }
.contact__mail{
  margin-top:2rem; display:inline-flex; align-items:baseline; gap:.5rem;
  font-family:var(--mono); font-size:clamp(1.05rem,.9rem + .9vw,1.65rem);
  color:var(--text); text-decoration:none; border-bottom:2px solid var(--green); padding-bottom:.3rem;
  transition:color .2s ease, border-color .2s ease;
}
.contact__mail:hover{ color:var(--green-lift); border-color:var(--green-lift); }

/* footer (title block) --------------------------------------------------- */
.site-foot{ padding-block:2.25rem 3rem; }
.site-foot__in{ display:grid; gap:1.5rem; }
.site-foot .mark{ width:5.5rem; color:var(--dim); }
.site-foot__meta{ display:grid; gap:.4rem; font-family:var(--mono); font-size:.75rem; color:var(--dim); letter-spacing:.04em; }
.site-foot__meta a{ color:var(--muted); text-decoration:none; }
.site-foot__meta a:hover{ color:var(--green-lift); }

/* responsive ------------------------------------------------------------- */
@media (min-width:40rem){
  .facts{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .who{ grid-template-columns:repeat(3,1fr); }
  .band__grid{ grid-template-columns:repeat(3,1fr); }

  .site-foot__in{ grid-template-columns:auto 1fr; align-items:end; }
  .site-foot__meta{ justify-items:end; text-align:right; }
}
@media (min-width:64rem){
  .facts{ grid-template-columns:repeat(4,1fr); }
  .cards{ grid-template-columns:repeat(4,1fr); }
  .stack{ grid-template-columns:repeat(2,1fr); gap:3.5rem; }
  .site-nav{ display:flex; }
  .brand__sub{ display:block; }
  .head-cta__short{ display:none; }
  .head-cta__long{ display:inline; }
}

/* one orchestrated entrance, then the page sits still --------------------- */
@media (prefers-reduced-motion:no-preference){
  .rise{ animation:rise .7s cubic-bezier(.2,.7,.3,1) both; }
  .rise:nth-child(1){ animation-delay:.02s }
  .rise:nth-child(2){ animation-delay:.1s }
  .rise:nth-child(3){ animation-delay:.18s }
  .rise:nth-child(4){ animation-delay:.26s }
  @keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
}