/* =========================================================================
   about.css  —  THE ABOUT PAGE ONLY
   =========================================================================
   A layer on top of main.css, loaded by about.html alone. Everything here
   is prefixed .ab- so nothing leaks onto other pages.

   The look: brushed-steel on charcoal. Headlines are set in Archivo at its
   narrowest width with a silver gradient, panels are soft glass plates with
   a hairline, and the site's marigold is kept for the few things you can
   press. Colours come from the tokens in main.css; the only new values are
   the steel tones below.
   ========================================================================= */

.ab{
  --steel-hi:   #F4F2EE;
  --steel-mid:  #BDB8B0;
  --steel-lo:   #6F6A63;
  --steel-text: linear-gradient(180deg, var(--steel-hi) 0%, #D9D5CF 45%, #8C877F 100%);
  --glass:      rgb(var(--ink-rgb) / .035);
  --glass-line: rgb(var(--ink-rgb) / .11);
  --ab-r:       14px;

  background:
    radial-gradient(90% 60% at 80% 0%, rgb(var(--ink-rgb) / .06), transparent 60%),
    linear-gradient(180deg, #121212 0%, var(--paper) 40%);
  padding-bottom: var(--section-pad);
}

.ab svg{ fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Silver text: the gradient is clipped to the letters. */
.ab-display span,
.ab-available-big,
.ab-stats b,
.ab-cta-title h2{
  background: var(--steel-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Small uppercase labels, the page's section headings */
.ab-kicker,
.ab-label{
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ab-label-sm{ font-size: .7rem; color: var(--ink-faint); }

.ab-block{ margin-top: clamp(3.5rem, 7vw, 6rem); }


/* ---------- Buttons ---------- */
.ab-btn{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 6px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.ab-btn svg{ width: 16px; height: 16px; stroke-width: 2; }
/* brushed metal: a light sweep across a pale steel plate */
.ab-btn-metal{
  color: #151515;
  background: linear-gradient(100deg, #9E9A93 0%, #F3F1ED 38%, #C9C5BE 62%, #EDEBE7 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px -12px rgba(0,0,0,.8);
}
.ab-btn-metal:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.ab-btn:focus-visible, .ab-link:focus-visible, .ab-card:focus-within{ outline: 2px solid var(--rust); outline-offset: 3px; }

.ab-link{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .2s var(--ease);
}
.ab-link svg{ width: 16px; height: 16px; transition: transform .25s var(--ease); }
.ab-link:hover{ color: var(--ink); }
.ab-link:hover svg{ transform: translateX(4px); }


/* ---------- Hero ---------- */
.ab-hero{ padding-top: clamp(6.5rem, 11vw, 8.5rem); overflow: hidden; }
.ab-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  position: relative;
  min-height: min(78vh, 720px);
}
.ab-hero-copy{ position: relative; z-index: 2; padding-bottom: clamp(2rem, 5vw, 4rem); }

.ab-display{
  margin: 1.1rem 0 1.6rem;
  font-family: var(--font-display);
  font-stretch: 62%;                       /* Archivo's narrowest cut */
  font-weight: 800;
  font-size: clamp(4.2rem, 13vw, 11.5rem);
  line-height: .84;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.ab-display span{ display: block; width: max-content; max-width: none; padding-bottom: .04em; }
/* width: max-content matters — the silver gradient only paints inside the
   span's own box, so letters that ran past a narrower box came out invisible */
/* the second line runs under the photograph, the way the reference does */
.ab-display span + span{ white-space: nowrap; }

.ab-lede{ max-width: 34rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }
.ab-hero-actions{ display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2rem; }

.ab-hero-figure{
  position: relative; z-index: 1;
  align-self: stretch;
  margin-left: -18%;                       /* tuck under the headline */
}
.ab-hero-figure img{
  width: 100%; height: 100%; max-height: 720px;
  object-fit: cover; object-position: 50% 60%;
  /* Tuned to the photograph that is actually in the hero. The previous
     values — grayscale(.9) brightness(.62) — were set for a pale, misty
     shot of the Thar Roxx, where heavy desaturation still left something
     to see. The Jimny picture is a dark forest at dusk, and the same
     treatment crushed it to a black rectangle. Softened until the vehicle
     reads, with enough grey left that it still sits on the charcoal page.
     Checked again 2026-09-30 against the photo now in the hero (the red
     Jimny in the misty forest, about/about-hero-jimny.jpg): still right.
     If you swap this photograph again, look at it here before shipping —
     this line is specific to the picture, not to the layout. */
  filter: grayscale(.3) contrast(1.05) brightness(1.04);
  /* fade the photo into the page on the left; the bottom fade is ::after */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 22%, #000 42%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 22%, #000 42%, #000 88%, transparent 100%);
}
.ab-hero-figure::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22%; z-index: 1;
  background: linear-gradient(180deg, #121212 0%, transparent 100%);
  pointer-events: none;
}
.ab-hero-figure::after{
  content: ""; position: absolute; inset: auto 0 0 0; height: 35%;
  background: linear-gradient(0deg, var(--paper) 0%, transparent 100%);
  pointer-events: none;
}
.ab-arc{
  position: absolute; right: -14%; top: 8%;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid transparent;
  border-right-color: rgb(var(--ink-rgb) / .35);
  border-top-color: rgb(var(--ink-rgb) / .12);
  pointer-events: none;
}
.ab-spark{ width: 22px; height: 22px; fill: var(--steel-hi) !important; stroke: none !important; }
.ab-hero-figure .ab-spark{ position: absolute; right: 9%; top: 40%; opacity: .85; }

.ab-available{
  position: absolute; right: var(--gutter); bottom: clamp(2rem, 5vw, 4rem); z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
  text-align: right;
}
.ab-available-top,
.ab-available-foot{
  font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ab-available-big{
  font-family: var(--font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; text-transform: uppercase;
}
.ab-available-foot{ display: inline-flex; align-items: center; gap: .35rem; color: var(--rust-text); }
.ab-available-foot svg{ width: 14px; height: 14px; stroke-width: 2; transition: transform .25s var(--ease); }
.ab-available:hover .ab-available-foot svg{ transform: translate(2px, -2px); }


/* ---------- Glass plates (stats, panels, cta) ---------- */
.ab-stats,
.ab-panel,
.ab-cta{
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / .05), rgb(var(--ink-rgb) / .02));
  border: 1px solid var(--glass-line);
  border-radius: var(--ab-r);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 30px 60px -40px rgba(0,0,0,.9);
}


/* ---------- Stats ---------- */
.ab-stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
}
.ab-stats li{
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  text-align: center; padding: 0 1rem;
}
.ab-stats li + li{ border-left: 1px solid var(--glass-line); }
.ab-stats svg{ width: 24px; height: 24px; color: var(--steel-mid); }
.ab-stats b{
  font-family: var(--font-display); font-stretch: 80%; font-weight: 300;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -.02em;
}
.ab-stats b small{ font-size: .42em; margin-left: .15em; letter-spacing: 0; }
.ab-stats span{ font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }


/* ---------- Crew ---------- */
.ab-row-head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.ab-label-link{
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ab-label-link svg{ width: 16px; height: 16px; transition: transform .25s var(--ease); }
.ab-label-link:hover{ color: var(--ink); }
.ab-label-link:hover svg{ transform: translateX(4px); }

.ab-crew{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.6vw, 1.2rem); }

.ab-card{
  position: relative; isolation: isolate;
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--ab-r); overflow: hidden;
  border: 1px solid var(--glass-line);
  background: var(--surface);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.ab-card img{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  filter: contrast(1.03) brightness(.82);
  transition: transform .8s var(--ease), filter .6s var(--ease);
}
.ab-card::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,.05) 20%, rgba(10,10,10,.6) 55%, rgba(10,10,10,.96) 100%);
}
.ab-card:hover{ transform: translateY(-4px); border-color: rgb(var(--ink-rgb) / .28); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.ab-card:hover img{ transform: scale(1.05); filter: contrast(1.03) brightness(.95); }

/* the initials disc, top-right — the reference's arrow button */
.ab-card-mark{
  position: absolute; top: 1rem; right: 1rem;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgb(var(--ink-rgb) / .45);
  background: rgb(10 10 10 / .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--steel-hi);
}

.ab-card-body{ padding: clamp(1rem, 1.8vw, 1.4rem); }
.ab-card h3{
  font-family: var(--font-display); font-stretch: 100%; font-weight: 700;
  font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.1; color: var(--steel-hi);
  margin: .35rem 0 .6rem;
}
.ab-role{ font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rust-text); }
.ab-bio{ font-size: .86rem; line-height: 1.55; color: rgb(var(--ink-rgb) / .72); }


/* ---------- The support team (medical, mechanical, media) ---------- */
.ab-support{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.6vw, 1.2rem); }
.ab-team{
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / .05), rgb(var(--ink-rgb) / .02));
  border: 1px solid var(--glass-line);
  border-radius: var(--ab-r); overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease);
}
.ab-team:hover{
  border-color: rgb(var(--ink-rgb) / .26); transform: translateY(-3px);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.85);
}

/* the photograph, with the team and the heading laid over its foot —
   the same treatment as a crew card, in a square instead of a 3/4 */
.ab-team-shot{
  position: relative; isolation: isolate; margin: 0;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ab-team-shot img{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%;
  filter: contrast(1.03) brightness(.84);
  transition: transform .8s var(--ease), filter .6s var(--ease);
}
.ab-team-shot::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,.05) 30%, rgba(10,10,10,.58) 62%, rgba(10,10,10,.96) 100%);
}
.ab-team:hover .ab-team-shot img{ transform: scale(1.05); filter: contrast(1.03) brightness(.95); }
.ab-team-shot figcaption{ padding: clamp(1rem, 1.8vw, 1.4rem); }
.ab-team-shot figcaption h3{ margin-bottom: 0; }

.ab-team-body{ padding: clamp(1.2rem, 2.2vw, 1.6rem); }

.ab-team h3{
  font-family: var(--font-display); font-stretch: 100%; font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.2; color: var(--steel-hi);
  margin: .35rem 0 .5rem;
}
.ab-team-lede{ font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }
/* Who leads each team: the same initials disc the crew cards carry, then a
   "Team head" label over the name, ruled off from the description below. */
.ab-team-head{
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-line);
}
.ab-team-initials{
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgb(var(--ink-rgb) / .45);
  background: rgb(10 10 10 / .35);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--steel-hi);
}
.ab-team-who{ display: grid; gap: .2rem; line-height: 1.2; }
.ab-team-k{
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rust-text);
}
.ab-team-who b{
  font-family: var(--font-display); font-stretch: 100%; font-weight: 700;
  font-size: 1.02rem; color: var(--steel-hi);
}
.ab-team-list{ margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--glass-line); display: grid; gap: .6rem; }
.ab-team-list li{ position: relative; padding-left: 1.2rem; font-size: .84rem; line-height: 1.5; color: var(--ink-faint); }
.ab-team-list li::before{
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rust);
}

/* ---------- The fleet + on every convoy ---------- */
/* Used to be the right-hand column of a two-column split, beside the
   capability grid that moved to the homepage. Now the section's only
   content, so it runs as a plain row of two panels instead. */
.ab-side{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.6rem); }
.ab-panel{ padding: 1.3rem; }
.ab-panel .ab-label{ margin-bottom: 1.1rem; }

.ab-chips{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem .8rem; }
.ab-chips li{ display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--ink-soft); }
.ab-chip-ico{
  flex: none; width: 34px; height: 34px; border-radius: 7px;
  display: grid; place-items: center;
  border: 1px solid var(--glass-line); background: rgb(var(--ink-rgb) / .05);
  font-size: .6rem; font-weight: 800; letter-spacing: .04em; color: var(--steel-hi);
}

.ab-list li{
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 0; border-top: 1px solid var(--glass-line);
}
.ab-list-ico{
  flex: none; width: 34px; height: 34px; border-radius: 7px;
  display: grid; place-items: center; background: rgb(var(--ink-rgb) / .08);
}
.ab-list-ico svg{ width: 18px; height: 18px; color: var(--steel-hi); }
.ab-list b{ display: block; font-size: .86rem; font-weight: 600; color: var(--ink); }
.ab-list small{ display: block; font-size: .74rem; color: var(--ink-faint); margin-top: .15rem; }





/* ---------- Closing band ---------- */
.ab-cta{
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
}
/* the silver light sweep across the band */
.ab-cta::before{
  content: ""; position: absolute; inset: -40% auto -40% 18%; width: 34%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .16) 45%, rgb(255 255 255 / .05) 60%, transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.ab-cta > *{ position: relative; z-index: 1; }
.ab-cta-title{ display: flex; align-items: center; gap: 1rem; }
.ab-cta-title h2{
  font-family: var(--font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: .92; text-transform: uppercase;
}
.ab-cta-mid p{ color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin-bottom: 1.2rem; max-width: 26rem; }
.ab-cta-contact{
  display: flex; flex-direction: column; gap: .9rem;
  padding-left: clamp(1rem, 2.4vw, 2rem); border-left: 1px solid var(--glass-line);
}
.ab-cta-contact li{ display: flex; align-items: center; gap: .7rem; font-size: .85rem; color: var(--ink-soft); }
.ab-cta-contact svg{ width: 18px; height: 18px; flex: none; color: var(--steel-mid); }
.ab-cta-contact a:hover{ color: var(--ink); }


/* ---------- Tablet ---------- */
@media (max-width: 1080px){
  .ab-crew{ grid-template-columns: repeat(2, 1fr); }
  /* three cards in two columns: the last would sit alone at half width, so
     it takes the whole row instead of leaving a hole beside it */
  .ab-crew > .ab-card:last-child:nth-child(odd){ grid-column: 1 / -1; aspect-ratio: 8 / 4.4; }
  .ab-support{ grid-template-columns: 1fr; }
  .ab-card{ aspect-ratio: 4 / 4.4; }
  .ab-cta{ grid-template-columns: 1fr 1fr; }
  .ab-cta-contact{ grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: .9rem 2rem;
                   border-left: 0; padding-left: 0; border-top: 1px solid var(--glass-line); padding-top: 1.2rem; }
}


/* ---------- Phones ---------- */
@media (max-width: 768px){
  .ab-hero{ padding-top: 5.5rem; }
  .ab-hero-grid{ grid-template-columns: 1fr; min-height: 0; }
  /* the photo sits behind the headline instead of beside it */
  .ab-hero-figure{
    position: absolute; top: -1rem; right: calc(var(--gutter) * -1); width: 78%;
    margin: 0; height: 30rem; opacity: .75;
  }
  .ab-hero-figure .ab-spark{ display: none; }
  .ab-hero-copy{ padding-top: 11rem; padding-bottom: 1.5rem; }
  .ab-display{ font-size: clamp(3rem, 17vw, 5.2rem); }
  .ab-available{ position: static; align-items: flex-start; text-align: left; margin-bottom: 2rem; }

  /* The four numbers stay in ONE row on a phone, small. They were a 2 x 2
     block of 24px icons and 2.4rem figures — about 250px of screen for four
     facts. Without the icons and at this size the row is a strip under the
     hero, and it still reads left to right like the desktop one.
     `li span` (not `span`) is deliberate: css/mobile.css loads after this
     file and sets `.ab-stats span` to .7rem, which at four across wraps
     every label to four lines; the extra element outranks it. */
  .ab-stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
  .ab-stats li{ gap: .28rem; padding: .8rem .25rem .85rem; }
  .ab-stats li + li{ border-left: 1px solid var(--glass-line); }
  .ab-stats svg{ display: none; }
  .ab-stats b{ font-size: 1.45rem; }
  .ab-stats li span{ font-size: .5625rem; letter-spacing: .03em; line-height: 1.25; }

  .ab-crew{ grid-template-columns: 1fr; }
  .ab-card,
  .ab-crew > .ab-card:last-child:nth-child(odd){ aspect-ratio: 4 / 3.6; }

  .ab-side{ grid-template-columns: 1fr; }
  .ab-chips{ grid-template-columns: 1fr 1fr; }


  .ab-cta{ grid-template-columns: 1fr; }
  .ab-cta-contact{ flex-direction: column; }
}

/* ---------- Short laptop screens ----------
   At 1280 × 720 the two buttons sat under the fold: the 13vw headline was
   166px a line, and the photo beside it, up to 720px tall, set the height
   of the whole hero. Both are capped by the screen's height as well, so
   the photo ends at the bottom of the screen and the words sit above it. */
@media (min-width: 769px) and (max-height: 820px){
  .ab-hero{ padding-top: clamp(6rem, 9vw, 7rem); }
  .ab-hero-figure img{ max-height: calc(100svh - 7rem); }
  .ab-display{ font-size: clamp(4.2rem, min(13vw, 17vh), 11.5rem); }
}