/* ============ Self-hosted fonts (variable) ============ */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-var.ttf") format("truetype-variations");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var.ttf") format("truetype-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ============ Reset (low-specificity via :where) ============ */
*,*::before,*::after{box-sizing:border-box}
:where(html){-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
:where(body){margin:0}
:where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd){margin:0}
:where(ul,ol){margin:0;padding:0;list-style:none}
:where(a){color:inherit;text-decoration:none}
:where(img,svg,video){display:block;max-width:100%;height:auto}
:where(button,input,textarea,select){font:inherit;color:inherit}
:where(button){cursor:pointer;background:none;border:none;padding:0}

/* ============ Body ============ */
body{
  font-family:var(--tlg-sans);
  font-size:17px;
  line-height:1.65;
  color:var(--tlg-ink);
  background:var(--tlg-white);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============ Type scale ============ */
h1,h2,h3,h4{font-family:var(--tlg-serif);font-weight:600;line-height:1.08;letter-spacing:.005em;color:var(--tlg-ink)}
.tlg-display{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.04}
h1{font-size:clamp(2.4rem,4.6vw,3.8rem)}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:clamp(1.25rem,1.7vw,1.5rem)}
h4{font-size:1.15rem}
.tlg-lead{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.6;color:var(--tlg-slate)}
p{max-width:68ch}

/* ============ Shared container ============ */
.tlg-container{width:100%;max-width:var(--tlg-container);margin-inline:auto;padding-inline:var(--tlg-container-pad)}
.tlg-section{padding-block:var(--tlg-section)}

/* ============ Ground utilities ============ */
.g-navy{background:var(--tlg-navy);color:var(--tlg-on-navy)}
.g-navy h1,.g-navy h2,.g-navy h3,.g-navy h4{color:#fff}
.g-navy p{color:var(--tlg-on-navy-dim)}
.g-tint{background:var(--tlg-bg-tint);color:var(--tlg-ink)}
.g-white{background:var(--tlg-white);color:var(--tlg-ink)}

/* ============ Eyebrow + section heading ============ */
.tlg-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--tlg-sans);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tlg-accent);margin-bottom:18px}
.tlg-eyebrow::before{content:"";width:28px;height:1px;background:var(--tlg-accent);display:inline-block}
.tlg-shead{margin-bottom:var(--tlg-lg)}
.tlg-shead .tlg-lead{margin-top:18px}

/* ============ Buttons ============ */
.tlg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--tlg-sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;padding:15px 30px;border-radius:var(--tlg-r-sm);transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.tlg-btn:active{transform:translateY(1px)}
.tlg-btn--primary{background:var(--tlg-accent);color:var(--tlg-navy)}
.tlg-btn--primary:hover{background:var(--tlg-accent-hover)}
.tlg-btn--ghost{background:transparent;border:1px solid var(--tlg-line-dark);color:#fff}
.tlg-btn--ghost:hover{border-color:var(--tlg-accent);color:var(--tlg-accent)}
.tlg-btn--ghost-ink{background:transparent;border:1px solid var(--tlg-line);color:var(--tlg-ink)}
.tlg-btn--ghost-ink:hover{border-color:var(--tlg-accent);color:var(--tlg-accent)}
.tlg-btn__arrow{transition:transform .2s ease}
.tlg-btn:hover .tlg-btn__arrow{transform:translateX(3px)}

/* text link with arrow */
.tlg-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--tlg-sans);font-weight:600;font-size:.9rem;letter-spacing:.03em;text-transform:uppercase;color:var(--tlg-accent)}
.tlg-link svg{transition:transform .2s ease}
.tlg-link:hover svg{transform:translateX(4px)}

/* ============ Reveal (degrade to visible w/o JS) ============ */
.js .tlg-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .tlg-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .tlg-reveal{opacity:1!important;transform:none!important;transition:none}
  :where(html){scroll-behavior:auto}
}