/* The American Logo, full-site mockup: shared header + footer.
   Scoped to .sh / .sf so it sits safely on top of any page's own design system
   (the homepage, the service pages and the journey pages all load it). */
.sh,.sf{--ink:#001B27;--ink2:#1D3945;--ink3:#3E5763;--p:#EEF1F3;--p3:#D3DADF;--w:#fff;--red:#F54529;--amber:#F2A33A;
  --line:rgba(0,27,39,.14);--line2:rgba(0,27,39,.28);
  --sg:"Space Grotesk",system-ui,sans-serif;--mono:"Space Mono",ui-monospace,monospace;--dot:"Doto","Space Mono",monospace;
  box-sizing:border-box;font-family:var(--sg);-webkit-font-smoothing:antialiased}
.sh *,.sf *{box-sizing:border-box;margin:0;padding:0}
.sh a,.sf a{color:inherit;text-decoration:none}
.sh .led,.sf .led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--p3);flex:none}

/* ---------- header ---------- */
.sh{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line);color:var(--ink)}
.sh-in{max-width:1320px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:16px;height:74px}
.sh-brand{display:flex;align-items:center;flex:none}
/* the live wordmark, rebuilt as type + an inline flag glyph (the "E" of AMERICAN). Red matches logo.png (#AF2627);
   the white parts follow currentColor, so it reads ink on the white header and white in the dark footer */
.tal-wm{display:inline-flex;align-items:baseline;gap:.34em;font:700 19px/1 'Montserrat',var(--sg);letter-spacing:.03em;white-space:nowrap;color:var(--ink)}
.tal-wm .r{color:#AF2627}
.tal-wm .w{display:inline-flex;align-items:baseline}
.tal-flag{display:inline-block;height:.7em;width:1.05em;margin:0 .05em;vertical-align:baseline;flex:none}
.tal-flag .c{fill:currentColor}
.tal-flag .s{fill:#AF2627}
.sf .tal-wm{color:#fff}
.sh-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.sh-nav>a,.sh-dd>button{font:500 14.5px/1 var(--sg);white-space:nowrap;padding:10px 9px;border-radius:3px;position:relative;background:none;border:0;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.sh-nav>a:hover,.sh-dd>button:hover,.sh-dd.open>button{background:var(--p)}
.sh-nav>a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--red)}
.sh-dd>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.sh-nav a.sh-create{border:1px solid var(--line2);margin-left:6px;gap:8px}
.sh-nav a.sh-create .led{background:var(--red);box-shadow:0 0 0 3px rgba(245,69,41,.16)}
.sh-btn{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:3px;background:var(--ink);color:#fff!important;font:600 15px/1 var(--sg);white-space:nowrap;box-shadow:0 2px 0 var(--ink2);flex:none}
.sh-btn .led{background:var(--red)}
.sh-btn:hover{background:#0B2A38}
.sh-menu{display:none;margin-left:auto;height:42px;padding:0 14px;border:1px solid var(--line2);background:#fff;border-radius:3px;cursor:pointer;align-items:center;gap:9px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sh-menu .led{background:var(--red)}

/* mega panels */
.sh-dd{position:relative}
.sh-pan{display:none;position:absolute;top:calc(100% + 13px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line2);box-shadow:0 22px 50px rgba(0,27,39,.16);padding:22px;gap:26px;z-index:70}
.sh-dd.open .sh-pan{display:flex}
@media (hover:hover) and (min-width:1241px){.sh-dd:hover .sh-pan,.sh-dd:focus-within .sh-pan{display:flex}}
.sh-dd::before{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.sh-pan h5{font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sh-pan h5::after{content:"";flex:1;height:1px;background:var(--line)}
.sh-pan ul{list-style:none;display:grid;gap:2px}
.sh-pan>div{flex:none}
.sh-pan .two{grid-template-columns:repeat(2,max-content);column-gap:14px}
.sh-pan li a{display:flex;align-items:center;gap:9px;padding:7px 8px;font:500 14.5px/1.2 var(--sg);border-radius:3px;white-space:nowrap}
.sh-pan li a:hover{background:var(--p)}
.sh-pan li a:hover .led{background:var(--red)}
.sh-pan .promo{width:250px;background:var(--ink);color:#DCE4E8;padding:18px;display:flex;flex-direction:column;gap:10px;
  background-image:radial-gradient(circle,rgba(140,190,215,.16) 1px,transparent 1.5px);background-size:9px 9px}
.sh-pan .promo .dot{font:800 30px/1 var(--dot);color:var(--red)}
.sh-pan .promo b{font:700 19px/1.15 var(--sg);color:#fff;letter-spacing:-.01em}
.sh-pan .promo p{font-size:14px;line-height:1.45}
.sh-pan .promo a{margin-top:auto;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:var(--red);color:var(--ink);font:600 14px/1 var(--sg);padding:11px 14px;border-radius:3px}
.sh-pan .promo a .led{background:var(--ink)}

/* ---------- footer ---------- */
.sf{background:var(--ink);color:#DCE4E8;padding:56px 0 96px}
.sf-in{max-width:1320px;margin:0 auto;padding:0 32px}
.sf-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.14)}
.sf-grid img{width:200px;height:auto;margin-bottom:18px;display:block}
.sf-grid p{font-size:15px;line-height:1.55;max-width:34ch}
.sf-grid h4{font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.sf-grid ul{list-style:none;display:grid;gap:9px;font-size:15px;line-height:1.35}
.sf a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sf-grid .hl a{color:#fff;display:inline-flex;align-items:center;gap:8px}
.sf-grid .hl .led{background:var(--red)}
.sf-base{display:flex;justify-content:space-between;align-items:center;gap:16px 20px;flex-wrap:wrap;padding-top:24px;font-size:14px}
.sf-base .legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.sf .starvto{font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.sf .starvto b{color:#fff;letter-spacing:.2em}

/* rail: link on the right */
#rail.rail .rt a{border:1px solid rgba(242,163,58,.5);color:var(--amber)}
#rail.rail .rt a:hover{color:#fff;border-color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1320px){.sh-in{gap:12px}.sh-nav>a,.sh-dd>button{padding:10px 7px;font-size:14px}}
@media (max-width:1240px){
  .sh-nav{display:none}
  .sh-menu{display:inline-flex}
  .sh-btn{margin-left:0}
  .sh.open .sh-nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line2);
    padding:8px 32px 18px;gap:0;max-height:calc(100vh - 74px);overflow:auto;box-shadow:0 20px 40px rgba(0,27,39,.14)}
  .sh.open .sh-nav>a,.sh.open .sh-dd>button{width:100%;justify-content:space-between;padding:15px 4px;border-bottom:1px solid var(--line);font-size:17px;border-radius:0}
  .sh.open .sh-nav a.sh-create{margin:14px 0 0;border:1px solid var(--line2);justify-content:flex-start;padding:14px 12px}
  .sh-pan{position:static;transform:none;box-shadow:none;border:0;padding:6px 0 14px;flex-direction:column;gap:16px}
  .sh-pan .promo{width:auto}
  .sh-dd::before{display:none}
  .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .sh-in,.sf-in{padding:0 16px}
  .sh-in{height:64px;gap:10px}
  .sh.open .sh-nav{padding:6px 16px 18px;max-height:calc(100vh - 64px)}
  .tal-wm{font-size:15px}
  .sh-btn{display:none}
  .sf-grid{grid-template-columns:minmax(0,1fr)}
  .sh-pan .two{grid-template-columns:minmax(0,1fr)}
}
.sh-nav>a.sh-btn-m{display:none;margin-top:10px;justify-content:center;align-items:center;gap:10px;height:50px;padding:0 16px;border:0;background:var(--ink);color:#fff;border-radius:3px;font:600 16px/1 var(--sg)}
.sh-nav>a.sh-btn-m .led{background:var(--red)}
@media (prefers-reduced-motion:reduce){.sh *,.sf *{transition:none!important;animation:none!important}}
@media (max-width:720px){.sh.open .sh-nav>a.sh-btn-m{display:flex}}
/* laptop widths: 11 links + CTA do not fit. Home (the logo links home) and Blog (in the footer + phone menu) step out */
@media (min-width:1241px) and (max-width:1600px){.sh-nav>a[href="/"],.sh-nav>a[href="blog"]{display:none}}
@media (min-width:1241px) and (max-width:1380px){.sh-in{gap:10px;padding:0 24px}.sh-nav>a,.sh-dd>button{padding:10px 6px;font-size:13.5px}.sh-nav a.sh-create{margin-left:2px}.sh-btn{padding:0 13px;font-size:14px}.tal-wm{font-size:17px}}
@media (min-width:1601px){.sh-in{max-width:1440px}}
p,li,h1,h2,h3,h4,dd,td{overflow-wrap:break-word}