/* TELCOSS BUILD: 20261014-K
   Telcoss - typography and tidy-up layer. Loaded last on every page so it
   settles the small inconsistencies between the three page templates.
   Copyright Digital Design NE Ltd. Author: Rob Richardson. */

/* ---------- global type quality ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-kerning:normal;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga"}
h1,h2,h3,h4,.title,.lockup .title,.cn-bleed__label,.fl-intro p,.spon-hero__txt h3,.spon-side__txt h3{text-wrap:balance}
p,li,dd,blockquote,.tl-copy{text-wrap:pretty}
blockquote,.spon-quote{hanging-punctuation:first}
strong,b{font-weight:600}

/* One heading voice: every display heading is set in capitals, as the
   rest of the site already is. The cinematic pages had two in sentence case. */
.cn-say h2,.cn-proc h2{text-transform:uppercase;line-height:1;letter-spacing:.005em}
.cn-say h2{margin-bottom:clamp(20px,2.4vw,32px)}

/* One eyebrow style everywhere: small, tracked, green. */
.head .kicker{font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:16px}

/* Media label over full-bleed images: a touch larger, never a one-word last line. */
.cn-bleed__label{max-width:20ch;font-size:clamp(1rem,1.8vw,1.6rem);line-height:1.12;letter-spacing:.03em}

/* ---------- closing call to action (was unstyled) ---------- */
.vs-cta{background:#0E1315;border-top:1px solid var(--line);padding-block:clamp(64px,7vw,112px)}
.vs-cta .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.vs-cta h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;
  font-size:clamp(1.9rem,3.4vw,3.2rem);letter-spacing:.005em;color:var(--chalk)}
.vs-cta p{max-width:52ch;color:#B9C0BF;font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.65}
.vs-cta .assist-btn{margin-top:14px}

/* ---------- fleet ---------- */
.fl-intro p{max-width:24ch;line-height:1.06}
.fl-card p{margin-bottom:26px}
.fl-card dt{color:#8D9699;font-size:.62rem}
.fl-card dd{font-variant-numeric:tabular-nums}

/* ---------- about: timeline, training, sponsorship ---------- */
/* Story photos are shown whole, never cropped. Each sits in a 4:3 frame on a
   soft, blurred, darkened copy of itself, so portraits and group shots keep
   every person in view and the cards still line up. */
.tl-media{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:#0B0F10;
  border-bottom:1px solid var(--rule);isolation:isolate}
.tl-media__bg{position:absolute;inset:-24px;background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(22px) brightness(.42) saturate(.9);transform:scale(1.08);z-index:-1}
.tl-media img{position:relative;width:100%;height:100%;object-fit:contain;display:block}
.tl-media--logo{background:#fff}
.tl-media--logo .tl-media__bg{display:none}
.tl-media--logo img{padding:12% 14%}
/* Milestones without a photo: no empty frame, a bolder headline and a green rule. */
.tl-card--plain{border-left:2px solid var(--accent)}
.tl-card--plain .tl-card__txt{padding:clamp(22px,2.4vw,32px)}
.tl-card--plain h3{font-size:clamp(1.15rem,1.6vw,1.4rem)}
.tl-card__txt{display:flex;flex-direction:column}
.tl-card h3{margin-top:2px}
.tl-copy{line-height:1.6}
.dsr-split h2 + p{margin-top:20px}
.dsr-split p{max-width:52ch}
/* The MFC panel used the page's text colour as its background, which on the
   dark About page turned it pale grey under white text. Fixed dark. */
.spon-hero__txt{background:#12181A}
.spon-hero__txt p{color:#C3CACA}
.spon-side__txt h3{line-height:1.05}

/* ---------- stats and small labels ---------- */
.cn-fig span,.dsr-key span{line-height:1.5}

@media(max-width:760px){
  .cn-bleed__label{font-size:1rem;max-width:18ch}
  .vs-cta .assist-btn{width:100%;justify-content:center}
}

/* ---------- contact ---------- */
.ct-big{white-space:nowrap;font-size:clamp(1.05rem,1.55vw,1.5rem);letter-spacing:-.005em}
@media(max-width:760px){ .ct-big{white-space:normal;overflow-wrap:anywhere} }
/* contact grid: the divider colour was painting the page gutters grey */
.wrap.ct-grid{background:transparent;border:0;gap:0}
.ct-block{border:1px solid var(--rule);margin:0 -1px -1px 0}