@font-face{
  font-family:'Poppins';
  src: url('fonts/Poppins-Light.woff') format('woff');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src: url('fonts/Poppins-Medium.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src: url('fonts/Poppins-Bold.woff') format('woff');
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  --cream:#F7F5F2; --frame:#E4DFD6; --darkblue:#2F3640; --orange:#D9622B;
  --grey:#8b93a0; --greytext:#5b6270;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--cream); font-family:'Poppins',sans-serif; color:var(--darkblue); -webkit-font-smoothing:antialiased; }

/* Brand sits fixed top-left, replacing the tactical corner mark there */
.brand-corner{ position:fixed; top:28px; left:28px; display:flex; align-items:center; text-decoration:none; z-index:10; }
.brand-corner .bracket{ font-size:19px; font-weight:300; color:var(--orange); padding:0 4px; }
.brand-corner .bracket:last-of-type{ padding-left:0; }
.brand-corner .brand{ font-size:14px; font-weight:500; letter-spacing:4px; color:var(--darkblue); }

.nav{ display:flex; align-items:center; justify-content:flex-end; max-width:1200px; margin:0 auto; padding:32px 64px 32px 220px; }
.nav-links{ display:flex; list-style:none; margin:0; padding:0; }
.nav-links li{ margin-left:36px; }
.nav-links li:first-child{ margin-left:0; }
.nav-links a{ color:var(--darkblue); text-decoration:none; font-size:13px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; padding-bottom:6px; border-bottom:2px solid transparent; transition:border-color .2s ease,opacity .2s ease; }
.nav-links a:hover{ opacity:.6; }
.nav-links a.active{ border-bottom-color:var(--orange); color:var(--orange); }
@media (max-width:680px){
  .brand-corner{ position:static; margin:24px 0 0 24px; }
  .nav{ flex-direction:column; align-items:flex-start; gap:16px; padding:16px 24px 28px; }
  .nav-links{ flex-wrap:wrap; }
  .nav-links li{ margin-left:0; margin-right:22px; }
}

.site-footer{ max-width:1200px; margin:90px auto 0; padding:48px 64px 64px; display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:2px; color:var(--grey); text-transform:uppercase; border-top:1px solid var(--frame); }
@media (max-width:680px){ .site-footer{ flex-direction:column; gap:12px; padding:36px 24px 48px; text-align:center; } }

.container{ max-width:900px; margin:0 auto; padding:0 64px; }
@media (max-width:680px){ .container{ padding:0 24px; } }

.eyebrow{ font-size:13px; letter-spacing:4px; color:var(--orange); font-weight:600; text-transform:uppercase; margin-bottom:18px; }
.pagetitle{ font-size:clamp(30px,5vw,46px); font-weight:600; line-height:1.25; margin:0 0 28px; }
.pagetitle .accent{ color:var(--orange); }
.lead{ font-size:18px; line-height:1.75; color:var(--greytext); max-width:640px; margin-bottom:56px; }

.corner{ position:fixed; width:26px; height:26px; opacity:.5; pointer-events:none; }
.corner.tr{ top:28px; right:28px; border-top:2px solid var(--darkblue); border-right:2px solid var(--darkblue); }
.corner.bl{ bottom:28px; left:28px; border-bottom:2px solid var(--darkblue); border-left:2px solid var(--darkblue); }
.corner.br{ bottom:28px; right:28px; border-bottom:2px solid var(--darkblue); border-right:2px solid var(--darkblue); }

.sketch-underline{ display:block; margin-top:-6px; }