/* ---- GLAT LLC / glatllc.com -----------------------------------------------
   Sibling of glat.io: same tokens, same dark identity, less surface.
   One flat ground across the whole page — every division is a 1px rule, not a
   second surface. This is a holding-company page: one screen of facts.
--------------------------------------------------------------------------- */
:root{
  color-scheme: dark;

  --ground:      #060f14;
  --ground-2:    #0a1720;   /* unused here now — kept for token parity with glat.io */
  --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:  68rem;
  --rule: 1px solid var(--hair);
  --head: 4.5rem;              /* header height, for the sticky section labels */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ground); }

/* one background, painted once and never layered over */
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.1; letter-spacing:-.022em; 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; }
::selection{ background:rgba(0,153,102,.35); color:#fff; }

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

.tag{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.tag--green{ color:var(--green-lift); }
.rule-label{ display:flex; align-items:center; gap:1rem; }
.rule-label::after{ content:""; flex:1; height:1px; background:var(--hair); }

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

.mark{ display:block; height:auto; }

/* header ----------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:20;
  background:var(--ground);            /* opaque: same ground, no tint, no blur */
  border-top:2px solid var(--green);
  border-bottom:var(--rule);
}
.site-head__in{ display:flex; align-items:center; gap:1.5rem; min-height:var(--head); }
.brand{ margin-right:auto; display:inline-flex; align-items:center; gap:.85rem; 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{
  white-space:nowrap; font-family:var(--mono); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); border-left:var(--rule); padding-left:.85rem;
}

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.72rem 1.15rem; border:1px solid transparent; border-radius:0;
  text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{ background:var(--green); color:#03130d; }
.btn--primary:hover{ background:var(--green-lift); color:#03130d; }
.btn--ghost{ border-color:var(--hair-strong); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--blue-lift); color:var(--blue-lift); }
.btn__dot{ width:.375rem; height:.375rem; background:currentColor; opacity:.75; flex:none; }

/* hero ------------------------------------------------------------------- */
.hero{
  border-bottom:var(--rule);
  padding-block:clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem);
}
.hero h1{ margin-top:1.5rem; font-size:clamp(2rem, 1.15rem + 3.2vw, 3.4rem); max-width:19ch; }
.hero h1 em{ font-style:normal; color:var(--green-lift); }
.hero__lede{ margin-top:1.75rem; color:var(--muted); font-size:clamp(1.0625rem,1rem + .35vw,1.175rem); max-width:58ch; }
.hero__cta{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }

/* sections --------------------------------------------------------------- */
.section{ border-bottom:var(--rule); padding-block:clamp(3rem, 7vw, 5rem); }
.section__head{ display:flex; flex-direction:column; gap:1rem; margin-bottom:clamp(2rem,4vw,2.75rem); }
.section__head h2{ font-size:clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); }
.section__head p{ color:var(--muted); max-width:52ch; }

/* holdings --------------------------------------------------------------- */
.cards{ display:grid; gap:0; grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.card{
  border:var(--rule); border-radius:0; background:transparent;
  padding:clamp(1.4rem, 3vw, 1.9rem);
  display:flex; flex-direction:column; gap:.9rem;
  margin:0 -1px -1px 0;                  /* neighbours share one rule, never two */
  transition:border-color .2s ease;
}
.card:hover{ border-color:var(--hair-strong); }
.card h3{ font-size:1.3rem; }
.card__body{ color:var(--muted); }

/* contact ---------------------------------------------------------------- */
.contact{ font-family:var(--display); font-size:clamp(1.35rem, 1rem + 1.8vw, 1.95rem); letter-spacing:-.015em; }
.contact__note{ margin-top:1.1rem; color:var(--muted); max-width:52ch; }

/* footer ----------------------------------------------------------------- */
.site-foot{ padding-block:2.5rem; }
.site-foot__in{
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; color:var(--dim);
}

@media (min-width:48rem){
  .brand .mark{ width:8rem; }
}

/* Wide: label column left, content right — the whole page lines up on one
   internal column edge instead of stacking. The label is taken out of flow so
   its height never pushes the content column's own rows apart. */
@media (min-width:62rem){
  .section > .wrap{
    position:relative;
    padding-left:calc(var(--pad) + 15rem + clamp(2rem,5vw,4rem));
  }
  .section__head{
    position:absolute; left:var(--pad); top:0; width:15rem;
    margin-bottom:0;
  }
  .section__head .rule-label::after{ display:none; }
  .section__head h2{ font-size:clamp(1.35rem, 1.1rem + .7vw, 1.6rem); }
  .section__head p{ font-size:.9375rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}