/* ============================================================
   VISIONMOST — design system
   Direction: light, bold-sans, blue-gradient — referencing Aave's
   product-marketing style (white ground, tight geometric display
   type, dark pill CTAs, gradient-circle brand motif) reworked for
   a B2B engineering firm. Palette taken directly from Logo Main.
   ============================================================ */

:root{
  /* colour ------------------------------------------------- */
  --brand:       #439EFF;   /* decorative only — gradients, accents. NOT for text: 2.8:1 on white */
  --brand-2:     #293BBB;   /* safe interactive blue — links, active states, small accents (8.6:1 on white) */
  --brand-light: #88BFFB;   /* lightest tint — gradient stop, muted text on --ink (6.1:1) */
  --ink:         #17356F;   /* headings, body text, dark surfaces (11.8:1 on white) */
  --ink-muted:   #4E5D7A;   /* secondary text (6.6:1 on white) */
  --paper:       #FFFFFF;
  --paper-2:     #F2F6FF;   /* pale blue panel */
  --paper-3:     #E8EFFC;   /* deeper pale panel / hover */
  --rule:        #DCE4F5;

  --on-dark:        #FFFFFF;
  --on-dark-muted:  #88BFFB;

  /* type --------------------------------------------------- */
  --display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* space -------------------------------------------------- */
  --gutter: 40px;
  --max:    1320px;
  --band-y: 116px;

  /* controls — one height scale ---------------------------- */
  --ctrl-h:      44px;
  --ctrl-h-hero: 54px;

  --radius: 20px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
}

::selection{ background:var(--brand-light); color:var(--ink); }
a{ color:inherit; }
img,svg{ max-width:100%; }

a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- bands ----------------------------------------- */

.band{ padding-block:var(--band-y); position:relative; overflow:hidden; }
.band--white{ background:var(--paper); color:var(--ink); }
.band--pale{ background:var(--paper-2); color:var(--ink); }
.band--ink{ background:var(--ink); color:var(--on-dark); }
.band--short{ padding-block:84px; }

/* ---------- typography ------------------------------------ */

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-0.02em;
  margin:0;
}
h1{ font-size:clamp(42px,6vw,80px); }
h2{ font-size:clamp(30px,3.6vw,48px); }
h3{ font-size:22px; line-height:1.22; letter-spacing:-0.01em; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  font-family:var(--body);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:0;
  color:var(--brand-2);
}
.band--ink .eyebrow{ color:var(--on-dark-muted); }

.lede{
  font-size:19px;
  line-height:1.58;
  max-width:56ch;
  color:var(--ink-muted);
}
.band--ink .lede{ color:var(--on-dark-muted); }

.small{ font-size:15.5px; color:var(--ink-muted); }
.band--ink .small{ color:var(--on-dark-muted); }

/* ---------- controls -------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  height:var(--ctrl-h);
  padding:0 24px;
  border-radius:100px;
  border:1px solid transparent;
  font-family:var(--body);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:0.002em;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid{ background:var(--ink); color:var(--on-dark); }
.btn--solid:hover{ background:var(--brand-2); }
.btn--line{ border-color:currentColor; color:inherit; background:transparent; }
.btn--line:hover{ background:rgba(255,255,255,.1); }
.band--white .btn--line:hover,.band--pale .btn--line:hover{ background:var(--paper-3); }
.btn--hero{ height:var(--ctrl-h-hero); padding:0 33px; font-size:16.5px; }

/* ---------- header ------------------------------------------ */

.top{
  background:var(--paper);
  color:var(--ink);
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--rule);
}
.top .btn--line:hover{ background:var(--paper-3); }
.top__in{
  display:flex;
  align-items:center;
  gap:32px;
  height:78px;
}
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  margin-right:auto;
}
.brand__logo{ display:block; height:28px; width:auto; }
.nav{ display:flex; gap:30px; align-items:center; }
.nav a{
  font-size:15.5px;
  font-weight:600;
  text-decoration:none;
  color:var(--ink-muted);
  transition:color .18s ease;
}
.nav a:hover{ color:var(--ink); }

/* ---------- hero: classic centered block -------------------- */
/* H1 -> subtitle -> CTA only. No visual element — removed per request. */

.hero{ padding-block:104px 88px; text-align:center; }
.hero__in{ max-width:640px; margin:0 auto; }
.hero h1{ margin:0; }
.hero .lede{ margin:20px auto 0; max-width:46ch; }
.hero__cta{ display:flex; justify-content:center; margin-top:32px; }

/* ---------- editorial about ------------------------------- */

.editorial{
  display:grid;
  grid-template-columns:minmax(0,0.72fr) minmax(0,0.62fr);
  gap:80px;
  align-items:center;
}
.editorial__body{ font-size:17.5px; max-width:40ch; }
.editorial__body p{ margin-bottom:1.15em; }
.pull{
  margin:0;
  padding:32px 0 0;
  border-top:2px solid var(--brand);
  font-family:var(--display);
  font-weight:500;
  font-size:24px;
  line-height:1.28;
  letter-spacing:-0.012em;
}
.pull cite{
  display:block;
  margin-top:18px;
  font-family:var(--body);
  font-size:13px;
  font-style:normal;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

/* ---------- practices (index + panel) --------------------- */

.practice{
  display:grid;
  grid-template-columns:minmax(0,0.72fr) minmax(0,1fr);
  gap:64px;
  margin-top:56px;
  align-items:start;
}
.practice__list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.practice__list li{ border-bottom:1px solid var(--rule); }
.practice__tab{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  background:transparent;
  border:0;
  margin:0;
  padding:22px 4px 22px 16px;
  line-height:1;
  text-align:left;
  color:var(--ink-muted);
  font-family:var(--display);
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.01em;
  cursor:pointer;
  position:relative;
  transition:color .18s ease;
}
.practice__tab::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:22px;
  background:var(--brand-2);
  transform:translateY(-50%) scaleY(0);
  transition:transform .18s ease;
}
.practice__tab__letter{
  display:inline-block;
  width:14px;
  font-family:var(--body);
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:0.1em;
  color:var(--ink-muted);
  opacity:.7;
}
.practice__tab__label{ display:inline-block; line-height:1; }
.practice__tab:hover{ color:var(--ink); }
.practice__tab:hover::before{ transform:translateY(-50%) scaleY(1); }
.practice__tab[aria-selected="true"]{ color:var(--brand-2); }
.practice__tab[aria-selected="true"]::before{ transform:translateY(-50%) scaleY(1); }
.practice__tab[aria-selected="true"] .practice__tab__letter{ color:var(--brand-2); }

.practice__panel{
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:40px 44px 44px;
  min-height:330px;      /* fixed slot: panels never resize the row */
}
.practice__panel[hidden]{ display:none; }
.practice__panel h3{ font-size:24px; margin-bottom:16px; }
.practice__panel p{ color:var(--ink-muted); max-width:52ch; }
.practice__panel ul{
  margin:24px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--rule);
}
.practice__panel li{
  padding:11px 0;
  border-bottom:1px solid var(--rule);
  font-size:15.5px;
  color:var(--ink);
}
.practice__panel li:last-child{ border-bottom:0; }

/* ---------- capability matrix ----------------------------- */

.matrix{ width:100%; border-collapse:collapse; margin-top:44px; }
.matrix caption{
  text-align:left;
  padding-bottom:18px;
  font-size:15.5px;
  color:var(--ink-muted);
}
.matrix th,.matrix td{
  text-align:left;
  padding:18px 20px 18px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.matrix thead th{
  font-family:var(--body);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-muted);
  border-bottom:2px solid var(--ink);
  padding-bottom:12px;
}
.matrix tbody th{
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  letter-spacing:-0.008em;
}
.matrix .col-domain{ width:22%; }
.matrix .col-assess{ width:26%; }
.matrix .col-build{ width:28%; }
.matrix .col-handover{ width:24%; }
.matrix td{ font-size:16.5px; color:var(--ink-muted); }

/* ---------- method (prose columns) ------------------------ */

.method{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:56px;
  margin-top:56px;
}
.method__item{ border-top:2px solid var(--brand); padding-top:24px; }
.method__item:nth-child(n+2){ border-top-color:var(--on-dark-muted); }
.method__item h3{ margin-bottom:14px; }
.method__item p{ color:var(--on-dark-muted); font-size:16.5px; }

/* ---------- footer: compact technical closer ---------------- */

.foot{ background:var(--paper-2); color:var(--ink); padding-block:40px 28px; }
.foot__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
}
.foot__grid ul{ list-style:none; margin:10px 0 0; padding:0; }
.foot__grid li{ line-height:1.75; font-size:14.5px; color:var(--ink-muted); }
.foot__grid a{
  font-size:14.5px;
  color:var(--ink-muted);
  text-decoration:none;
}
.foot__grid a:hover{ color:var(--ink); }
.foot__note{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-top:16px;
  font-size:13px;
  color:var(--ink-muted);
}

/* ---------- legal pages (accordion — deliberately distinct
   from sonlano.com's sidebar-TOC layout) --------------------- */

.legal{ padding-block:72px 110px; }
.legal__head{ max-width:70ch; margin-bottom:56px; }
.legal__head h1{ font-size:clamp(38px,4.6vw,58px); }
.legal__jump{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
  padding-top:28px;
  border-top:1px solid var(--rule);
}
.legal__jump a{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 16px;
  border-radius:100px;
  background:var(--paper-2);
  color:var(--ink-muted);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .16s ease, color .16s ease;
}
.legal__jump a:hover{ background:var(--paper-3); color:var(--ink); }

.legal__body{ max-width:78ch; }
.legal__item{
  border-top:1px solid var(--rule);
}
.legal__item:last-child{ border-bottom:1px solid var(--rule); }
.legal__item summary{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:26px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-size:21px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.legal__item summary::-webkit-details-marker{ display:none; }
.legal__item summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--body);
  font-size:22px;
  font-weight:400;
  color:var(--brand-2);
  transition:transform .16s ease;
}
.legal__item[open] summary::after{ content:"−"; }
.legal__item summary .no{
  font-family:var(--body);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--ink-muted);
}
.legal__item .legal__content{ padding:0 0 30px; }
.legal__content p,.legal__content li{ color:var(--ink-muted); font-size:16.5px; }
.legal__content ul{ padding-left:20px; margin:0 0 1.15em; }
.legal__content li{ margin-bottom:7px; }
.legal__content strong{ color:var(--ink); font-weight:700; }
.legal__content p:first-child{ margin-top:0; }

/* ---------- motion ---------------------------------------- */

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

/* ---------- responsive ------------------------------------ */

@media (max-width:1140px){
  .method{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .method__item:nth-child(n+2){ border-top-color:var(--on-dark-muted); }
}

@media (max-width:940px){
  :root{ --gutter:22px; --band-y:76px; }
  .nav{ display:none; }
  .hero{ padding-block:64px 56px; }
  .editorial,.practice{
    grid-template-columns:minmax(0,1fr);
    gap:40px;
  }
  .editorial__body{ max-width:none; }
  .practice__panel{ min-height:0; padding:28px 26px 32px; }

  /* Footer: compact technical closer, not a stacked full-height section.
     Brand+tagline on top, Site/Legal/Office as a compact 2-col grid
     (not each stretched into its own long column), copyright last. */
  .foot{ padding-block:28px 18px; }
  .foot__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "brand  brand"
      "site   legal"
      "office office";
    gap:18px 20px;
    padding-bottom:16px;
  }
  .foot__grid > div:nth-child(1){ grid-area:brand; }
  .foot__grid > div:nth-child(2){ grid-area:site; }
  .foot__grid > div:nth-child(3){ grid-area:legal; }
  .foot__grid > div:nth-child(4){ grid-area:office; }
  .foot__grid ul{ margin-top:6px; }
  .foot__grid li{ line-height:1.5; }
  .foot__note{ padding-top:10px; font-size:12.5px; }
  body{ font-size:16.5px; }
}

@media (max-width:640px){
  .top__in .btn{ display:none; }
}

@media (max-width:560px){

  /* Capability matrix — desktop table stays intact above this breakpoint.
     Below it, the table is fully taken out of table layout (not just its
     rows/cells) so no table-column grid — from <colgroup> or otherwise —
     can pull it back into narrow vertical strips. Each domain becomes one
     full-width block: name, then three "Label — value" lines. */
  .matrix{ display:block; width:100%; }
  .matrix colgroup{ display:none; }
  .matrix thead{ display:none; }
  .matrix caption{ display:block; margin-bottom:8px; }
  .matrix tbody{ display:block; width:100%; }
  .matrix tbody tr{
    display:block;
    width:100%;
    padding:22px 0;
    border-bottom:1px solid var(--rule);
  }
  .matrix tbody tr:first-child{ padding-top:16px; }
  .matrix tbody th,.matrix td{ display:block; width:100%; padding:0; border:0; }
  .matrix tbody th{ font-size:20px; margin-bottom:14px; }
  .matrix td{ font-size:15.5px; line-height:1.5; margin-top:10px; }
  .matrix td:first-of-type{ margin-top:0; }
  .matrix td::before{
    content:attr(data-label) " — ";
    font-family:var(--body);
    font-weight:700;
    color:var(--brand-2);
  }

  .legal__item summary{ font-size:18px; }
}

/* stacked panels when JS is unavailable — :not([hidden]) keeps this scoped
   to the no-JS fallback (all panels visible) so it can't add a stray top
   margin to whichever panel JS is currently showing, which was shifting
   the whole section's height depending on which tab was selected. */
.practice__panel:not([hidden]) + .practice__panel{ margin-top:20px; }