/* =====================================================
   Base — Typography + Layout primitives
   ===================================================== */
html{font-size:16px}
body{
  font-family:var(--f-body);
  font-size:var(--t-base);
  color:var(--c-ink);
  background:var(--c-bg);
  line-height:1.55;
  overflow-x:hidden;
  position:relative;
}
body.no-scroll{overflow:hidden}

h1,h2,h3,h4,h5,h6{font-family:var(--f-display);font-weight:500;line-height:1.1;letter-spacing:-.02em;color:var(--c-ink)}
h1{font-size:var(--t-4xl);font-weight:400;font-variation-settings:"opsz" 144}
h2{font-size:var(--t-3xl);font-weight:400;font-variation-settings:"opsz" 96}
h3{font-size:var(--t-2xl)}
h4{font-size:var(--t-xl)}
h5{font-size:var(--t-lg)}
h6{font-size:var(--t-md)}

p{color:var(--c-ink-2)}
.lead{font-size:var(--t-lg);color:var(--c-muted);max-width:60ch;line-height:1.55}
.eyebrow{
  font-family:var(--f-body);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-teal-deep);
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:34px;height:1.5px;background:currentColor;display:block}
.text-muted{color:var(--c-muted)}
.text-center{text-align:center}

/* Container */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s-4)}
.container--narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--s-4)}
.container--wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--s-4)}
@media(min-width:780px){.container,.container--narrow,.container--wide{padding-inline:var(--s-5)}}

/* Section */
.section{padding-block:var(--s-9);position:relative}
.section--sm{padding-block:var(--s-7)}
.section--lg{padding-block:var(--s-10)}
.section--alt{background:var(--c-bg-alt)}
.section--ink{background:var(--c-ink);color:var(--c-bg)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4,.section--ink h5,.section--ink h6,.section--ink p{color:var(--c-bg)}
.section--ink .lead{color:rgba(249,249,249,.7)}
.section-head{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-7);max-width:780px}
.section-head--center{margin-inline:auto;text-align:center;align-items:center}

/* Grid utilities */
.grid{display:grid;gap:var(--s-5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.grid--services{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

/* Flex helpers */
.row{display:flex;gap:var(--s-3);flex-wrap:wrap}
.row--center{justify-content:center;align-items:center}
.row--between{justify-content:space-between;align-items:center}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}
.stack--lg{gap:var(--s-5)}
.stack--xl{gap:var(--s-7)}

/* Visually hidden */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Decorative background blobs */
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none;z-index:0}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--c-ink);color:var(--c-bg);
  padding:.8rem 1.2rem;border-radius:var(--r-sm);
  font-weight:600;
}
.skip-link:focus{left:var(--s-3);top:var(--s-3)}

/* Loading progress bar */
.progress-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--c-teal),var(--c-purple));
  z-index:10000;pointer-events:none;
  transition:width .2s var(--ease-out),opacity .3s var(--ease-out);
  box-shadow:0 0 12px rgba(30,183,191,.5);
}