/* Triumph Construction — Signature design system (shared by every page).
   Display: Archivo, condensed (variable width axis). Body: Archivo. Accent serif: Instrument Serif.
   Green is used on purpose: buttons, small brand marks, the credentials band. Text on light uses the darker --gd. */

:root{
  --green:#00c24a;
  --green-hi:#2be26f;
  --green-soft:#55f08f;
  --gd:#006b29;
  --deep:#072b1b;
  --night:#0c0f10;
  --ink:#141618;
  --paper:#f6f5f1;
  --sand:#ebe8e0;
  --rule:#cfccc2;
  --muted:#4a4f4c;
  --focus:#006b29;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --gutter:clamp(20px,4vw,48px);
  --maxw:1392px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.on-dark{--focus:var(--green-soft)}
::selection{background:var(--green);color:#07180f}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-100px;z-index:100;background:var(--green);color:#07180f;padding:12px 18px;font-weight:600;font-size:14px}
.skip:focus{top:12px}

/* ---- type ---- */
.disp{font-family:var(--font-display);font-stretch:75%;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.9;text-wrap:balance}
.disp i{font-style:normal;color:var(--green)}
.lab{font-weight:600;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;line-height:1.5}
.lab b{color:var(--gd);font-weight:600;margin-right:12px}
.on-dark .lab b{color:var(--green-soft)}
.serif{font-family:var(--font-serif);font-weight:400}

/* ---- buttons and links ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;padding:18px 28px;background:var(--green);color:#07180f;border:1px solid var(--green);transition:background .25s ease,border-color .25s ease,color .25s ease;white-space:nowrap}
.btn:hover{background:var(--green-hi);border-color:var(--green-hi)}
.btn--line{background:transparent;color:inherit;border-color:currentColor}
.btn--line:hover{background:rgba(255,255,255,.12);border-color:currentColor}
.ar{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .ar,.tl:hover .ar,a:hover>.tl .ar{transform:translateX(6px)}
.tl{display:inline-block;font-weight:600;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:6px;line-height:1.4}

/* ---- header ---- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;color:#f6f5f1;transition:background-color .35s ease,box-shadow .35s ease,padding .35s ease;--focus:var(--green-soft)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,20,14,.62),rgba(5,20,14,0));pointer-events:none;transition:opacity .35s ease}
.hdr.is-solid{background:rgba(7,43,27,.94);box-shadow:0 1px 0 rgba(246,245,241,.12)}
@supports (backdrop-filter:blur(8px)){.hdr.is-solid{background:rgba(7,43,27,.9);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}}
.hdr.is-solid::before,.hdr.hdr--solid::before{opacity:0}
.hdr--solid{background:var(--deep);position:sticky}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px;transition:padding .35s ease}
.hdr.is-solid .hdr__in{padding-block:12px}
.hdr__logo{display:block;flex:none;position:relative;z-index:2}
.hdr__logo img{height:44px;width:auto;transition:height .35s ease}
.hdr.is-solid .hdr__logo img{height:36px}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.site-nav ul{display:flex;gap:clamp(18px,2.4vw,36px)}
.site-nav a{white-space:nowrap}
.site-nav ul a{display:block;font-weight:500;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid transparent;transition:border-color .25s ease}
.site-nav ul a:hover,.site-nav ul a[aria-current="page"]{border-bottom-color:var(--green)}
.site-nav .btn{padding:14px 22px;font-size:12.5px}
.nav-extra{display:none}
.menu-btn{display:none;align-items:center;gap:12px;border:1px solid rgba(246,245,241,.7);background:none;padding:11px 16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;cursor:pointer;position:relative;z-index:2}
.menu-btn .bars{display:inline-grid;gap:5px;width:18px}
.menu-btn .bars span{display:block;height:2px;background:currentColor;transition:transform .3s var(--ease)}
html.nav-open .menu-btn .bars span:first-child{transform:translateY(3.5px) rotate(45deg)}
html.nav-open .menu-btn .bars span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media (max-width:1080px){
  .menu-btn{display:inline-flex}
  .site-nav{position:fixed;inset:0;z-index:1;background:var(--deep);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:112px var(--gutter) 36px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  html.nav-open .site-nav{opacity:1;visibility:visible;transition:opacity .3s ease}
  html.nav-open{overflow:hidden}
  /* a blurred header would trap the fixed menu inside itself, so drop the blur while the menu is open */
  html.nav-open .hdr.is-solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--deep)}
  .site-nav ul{flex-direction:column;gap:0;border-top:1px solid rgba(246,245,241,.2)}
  .site-nav ul li{border-bottom:1px solid rgba(246,245,241,.2)}
  .site-nav ul a{font-family:var(--font-display);font-stretch:75%;font-weight:800;font-size:clamp(34px,9vw,54px);line-height:1;letter-spacing:0;padding:20px 0;border-bottom:0}
  .site-nav ul a[aria-current="page"]{color:var(--green)}
  .site-nav>.btn{display:none}
  .nav-extra{display:grid;gap:18px;margin-top:32px;font-size:18px}
  .nav-extra .btn{width:100%;justify-content:space-between}
  .nav-extra a:not(.btn){text-decoration:underline;text-decoration-color:rgba(246,245,241,.4);text-underline-offset:4px}
  .hdr.hdr--solid{position:sticky}
  /* without JavaScript the menu simply stays open under the header */
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .site-nav{position:static;opacity:1;visibility:visible;padding:0 0 18px}
  html:not(.js) .hdr__in{flex-wrap:wrap}
  html:not(.js) .site-nav{width:100%}
}

/* ---- footer ---- */
.ftr{background:var(--night);color:#dfe6e1;padding-top:clamp(56px,7vw,96px);--focus:var(--green-soft)}
.ftr a{border-bottom:1px solid transparent;transition:border-color .25s ease,color .25s ease}
.ftr a:hover{border-bottom-color:var(--green);color:#fff}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px 32px;padding-bottom:clamp(40px,5vw,64px)}
.ftr__brand img{height:56px;width:auto}
.ftr__brand p{margin-top:20px;max-width:340px;color:#c3ccc6;font-size:16px}
.ftr h2{font-weight:600;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--green-soft);margin-bottom:18px}
.ftr li+li{margin-top:10px}
.ftr__bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px 32px;flex-wrap:wrap;padding-block:26px 32px;border-top:1px solid rgba(246,245,241,.2);font-size:14px;color:#9aa5a0}
.ftr__sl{font-family:var(--font-serif);font-style:italic;font-size:clamp(19px,2vw,26px);color:#dfe6e1}
@media (max-width:900px){.ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr__brand{grid-column:1 / -1}}
@media (max-width:480px){.ftr__top{grid-template-columns:1fr}}

/* ---- print ---- */
@media print{.hdr,.menu-btn{display:none}}