/* ═══════════════════════════════════════════════════════════════════════════
   TF SEALS USA — facility hero background
   Drop-in stylesheet. Load AFTER your existing site CSS.

   Palette is sampled from the facility photograph itself:
     ember #F2A038  sun core          (photo x16% y34%)
     clay  #8F2B24  the TF logo as the sunset actually lit it
     tan   #90745F  building band
     apron #C9C6C0  concrete

   The photo carries three responsibilities and one constraint:
     - the signed building face sits at x33-48%, y47-59% -> never cover it
     - the sun sits at x16% y34%                         -> never crop it out
     - hero copy lives in the lower-left, over the darkest ground in the frame
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted faces (no CDN: works on an air-gapped IIS box) ──────────── */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

/* ── Tokens. Namespaced --tfh-* so they cannot collide with existing vars ── */
:root{
  --tfh-ink:#0B131C; --tfh-ink-rgb:11,19,28;
  --tfh-ember:#F2A038;
  --tfh-paper:#F5F6F7;
  --tfh-accent:#B3221E; --tfh-accent-lit:#D3342C;
  --tfh-tint:#B3221E;   --tfh-tint-a:.10;
  --tfh-display:'Archivo','Arial Narrow','Helvetica Neue',Helvetica,sans-serif;
  --tfh-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --tfh-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tfh-gut:clamp(1.25rem,4vw,4.5rem);
}
/* Hook into the site's existing theme switcher */
[data-theme="patriot"]{ --tfh-accent:#1F3A93; --tfh-accent-lit:#2E4FC4;
                        --tfh-tint:#1F3A93; --tfh-tint-a:.16; }
[data-theme="midnight"]{ --tfh-accent:#3B7EA1; --tfh-accent-lit:#4E9BC2;
                         --tfh-tint:#0B131C; --tfh-tint-a:.26; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.tfh{position:relative;isolation:isolate;overflow:hidden;
     min-height:clamp(560px,88svh,880px);
     display:flex;flex-direction:column;justify-content:flex-end;
     background:var(--tfh-ink);color:var(--tfh-paper);font-family:var(--tfh-body)}
.tfh *,.tfh *::before,.tfh *::after{box-sizing:border-box}

.tfh-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.tfh-media img{width:100%;height:100%;object-fit:cover;object-position:50% 54%;
  transform:scale(1.055);
  animation:tfh-settle 1.5s cubic-bezier(.16,.84,.3,1) .1s forwards}
@keyframes tfh-settle{to{transform:scale(1)}}

/* Three stacked washes, each doing exactly one job */
.tfh-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(var(--tfh-ink-rgb),.96) 0%,  rgba(var(--tfh-ink-rgb),.88) 14%,
      rgba(var(--tfh-ink-rgb),.55) 32%, rgba(var(--tfh-ink-rgb),.22) 52%,
      rgba(var(--tfh-ink-rgb),.10) 68%, transparent 82%),
    linear-gradient(to right,
      rgba(var(--tfh-ink-rgb),.82) 0%,  rgba(var(--tfh-ink-rgb),.56) 16%,
      rgba(var(--tfh-ink-rgb),.24) 30%, transparent 47%),
    linear-gradient(to bottom, rgba(var(--tfh-ink-rgb),.55) 0%, transparent 22%)}

/* Marries the sunset to whichever theme is active */
.tfh-tint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--tfh-tint);opacity:var(--tfh-tint-a);mix-blend-mode:soft-light}

/* ── Copy ───────────────────────────────────────────────────────────────── */
.tfh-copy{position:relative;z-index:3;padding:0 var(--tfh-gut) 2.25rem;max-width:34rem}
.tfh .tfh-eyebrow{font-family:var(--tfh-mono);font-size:.76rem;letter-spacing:.18em;font-weight:400;text-align:left;
  text-transform:uppercase;color:var(--tfh-ember);margin:0 0 1rem;
  text-shadow:0 1px 12px rgba(11,19,28,.9);display:flex;align-items:center;gap:.7rem}
.tfh-eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--tfh-ember);flex:none}
/* Specificity raised and every inheritable property declared: a bare `h1 {}`
   rule in the host stylesheet beats an *inherited* colour, which is how this
   headline first rendered in the site's navy with uppercase forced on. */
.tfh .tfh-copy h1{font-family:var(--tfh-display);font-weight:800;margin:0 0 1.1rem;
  color:var(--tfh-paper);
  font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.02;letter-spacing:-.02em;
  text-transform:none;font-style:normal;text-align:left;
  text-wrap:balance;text-shadow:0 2px 28px rgba(0,0,0,.5)}
.tfh .tfh-copy h1 em{font-style:normal;font-weight:inherit;color:var(--tfh-ember)}
.tfh .tfh-lede{margin:0 0 1.9rem;text-transform:none;font-weight:400;text-align:left;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.6;
  color:rgba(245,246,247,.9);max-width:33rem;text-shadow:0 1px 16px rgba(0,0,0,.55)}

.tfh-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.tfh .tfh-cta a{font-weight:600;text-transform:none;letter-spacing:normal;font-size:.95rem;text-decoration:none;padding:.85rem 1.5rem;
  border-radius:2px;transition:background .2s,transform .2s,border-color .2s,color .2s}
.tfh-cta a.tfh-solid{background:var(--tfh-accent);color:#fff}
.tfh-cta a.tfh-solid:hover,.tfh-cta a.tfh-solid:focus-visible{
  background:var(--tfh-accent-lit);transform:translateY(-2px)}
.tfh-cta a.tfh-ghost{border:1px solid rgba(245,246,247,.45);color:var(--tfh-paper)}
.tfh-cta a.tfh-ghost:hover,.tfh-cta a.tfh-ghost:focus-visible{
  border-color:var(--tfh-ember);color:var(--tfh-ember)}

/* ── Signature: engineering-drawing title block ─────────────────────────── */
.tfh-titleblock{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);
  font-family:var(--tfh-mono);font-size:.72rem;
  border-top:1px solid rgba(245,246,247,.22);
  background:linear-gradient(to right,rgba(var(--tfh-ink-rgb),.72),rgba(var(--tfh-ink-rgb),.38))}
.tfh-titleblock div{padding:.85rem 1.15rem .95rem;border-left:1px solid rgba(245,246,247,.14)}
.tfh-titleblock div:first-child{border-left:0;padding-left:var(--tfh-gut)}
.tfh .tfh-titleblock dt{color:var(--tfh-ember);font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  font-size:.63rem;margin:0 0 .35rem}
.tfh .tfh-titleblock dd{margin:0;font-weight:400;text-transform:none;color:rgba(245,246,247,.94);line-height:1.35}
.tfh .tfh-titleblock a{color:inherit;text-decoration:none;text-transform:none;letter-spacing:inherit;font-weight:inherit;border-bottom:1px solid transparent}
.tfh .tfh-titleblock a:hover,.tfh .tfh-titleblock a:focus-visible{border-bottom-color:var(--tfh-ember)}

/* ── Load sequence ──────────────────────────────────────────────────────── */
.tfh-rise{opacity:0;transform:translateY(18px);
  animation:tfh-rise .85s cubic-bezier(.2,.7,.3,1) forwards}
.tfh-d1{animation-delay:.20s}.tfh-d2{animation-delay:.32s}
.tfh-d3{animation-delay:.44s}.tfh-d4{animation-delay:.56s}
@keyframes tfh-rise{to{opacity:1;transform:none}}

.tfh :focus-visible{outline:2px solid var(--tfh-ember);outline-offset:3px}

/* ── Phone + tablet portrait ────────────────────────────────────────────────
   Below 860px the copy would sit on the lit roof, so the photo stops being a
   backdrop and becomes a clean plate; copy continues on solid ink underneath.
   The facility reads sharply instead of being dimmed into mud. */
@media (max-width:860px){
  .tfh{min-height:0;display:block}
  .tfh-media{position:relative;height:min(54svh,430px);min-height:290px}
  .tfh-media img{object-position:50% 42%}
  .tfh-media::after{
    background:
      linear-gradient(to top, var(--tfh-ink) 2%, rgba(var(--tfh-ink-rgb),.55) 26%,
                      rgba(var(--tfh-ink-rgb),.10) 52%, transparent 68%),
      linear-gradient(to bottom, rgba(var(--tfh-ink-rgb),.62) 0%, transparent 20%)}
  .tfh-tint{display:none}
  .tfh-copy{position:relative;margin-top:-2.75rem;padding-bottom:2rem;max-width:none}
  .tfh .tfh-copy h1{text-shadow:none}
  .tfh .tfh-lede{text-shadow:none;max-width:none}
  .tfh .tfh-eyebrow{font-size:.64rem;letter-spacing:.1em;flex-wrap:wrap}
  .tfh-eyebrow::before{width:1.4rem}
  .tfh .tfh-cta a{flex:1 1 100%;text-align:center}
  .tfh-titleblock{grid-template-columns:repeat(2,1fr);background:rgba(255,255,255,.04)}
  .tfh-titleblock div:nth-child(3){border-left:0}
  .tfh-titleblock div:nth-child(-n+2){border-bottom:1px solid rgba(245,246,247,.14)}
  .tfh-titleblock div:nth-child(odd){padding-left:var(--tfh-gut)}
}

@media (prefers-reduced-motion:reduce){
  .tfh-rise{animation:none;opacity:1;transform:none}
  .tfh-media img{animation:none;transform:none}
  .tfh *{transition-duration:.01ms !important}
}