/* ---------------------------------------------------------------------------
   industry.css: the /industries/ hub and the seven sector pages.

   These pages load service.css first and this second (see includes/head.php,
   which accepts a list). Almost everything below the hero is the service
   pages' own partials and needs nothing here; this sheet is the hero, the
   service links, the honest note and the hub grid.
   --------------------------------------------------------------------- */

/* ---------- hero ----------
   Copy left, the sector photograph right. Service pages each have a bespoke
   hero image; an industry has its card photo, so this is the one layout all
   seven can share without art direction per page. */

.ap-indpage-hero,
.ap-indhub-hero{
  padding:calc(var(--header-h, 84px) + 84px) 0 72px;
  min-height:0;              /* service.css sizes its heroes to the viewport */
}
.ap-indpage-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  align-items:center;
  gap:clamp(32px, 5vw, 72px);
}
.ap-indpage-hero .ap-svc-hero-copy{ max-width:none }
.ap-indpage-hero h1{
  font-size:clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1.05;
}
.ap-indpage-hero .ap-lead{ max-width:52ch }

.ap-indpage-hero-art{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  /* the photo sits on a dark page, so it is dimmed slightly and lit from
     the same side as the rest of the site's art */
  position:relative;
}
.ap-indpage-hero-art::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(255,90,20,0.14), rgba(3,3,5,0.55));
  pointer-events:none;
}
.ap-indpage-hero-art img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
}

.ap-indpage-sub{
  margin:18px 0 0;
  max-width:56ch;
  color:var(--muted);
}

/* ---------- the services this sector buys ----------
   Rows that open on hover to show the artwork, the number of published
   cases behind that service and a line about it. The first rests open so
   the section reads as content rather than as a row of buttons, and it
   closes as soon as the pointer enters the list.

   The expansion is a grid-template-rows 0fr -> 1fr transition, which
   animates to the panel's real height without anybody measuring it, and
   it works from the keyboard through :focus-within. No script: a menu
   that needs one is a menu that does nothing while it downloads. */

.ap-indpage-svcs{
  border-top:1px solid var(--line);
}
.ap-indpage-svc{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:start;
  gap:0 clamp(20px, 3vw, 54px);
  padding:26px clamp(14px, 2vw, 26px);
  border-bottom:1px solid var(--line);
  text-decoration:none;
  background:transparent;
  transition:background .3s ease;
}
.ap-indpage-svc-num{
  font-family:'Space Mono',monospace;
  font-size:11px; letter-spacing:.2em;
  color:var(--muted);
  padding-top:.55em;
  font-variant-numeric:tabular-nums;
  transition:color .3s ease;
}
.ap-indpage-svc-main{ display:block; min-width:0 }
.ap-indpage-svc-eyebrow{
  display:block;
  font-size:.8rem; letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:6px;
}
.ap-indpage-svc-title{
  display:block;
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(20px, 2.1vw, 28px); line-height:1.12; letter-spacing:.005em;
  color:#f2f3f8;
}
.ap-indpage-svc-cta{
  justify-self:end;
  align-self:start;
  padding:11px 20px;
  border-radius:9px;
  border:1px solid var(--line);
  background:rgba(238,240,246,0.04);
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper);
  white-space:nowrap;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}

/* ---- the panel ---- */

.ap-indpage-svc-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.ap-indpage-svc-panel-in{
  overflow:hidden; min-height:0;
  display:grid;
  grid-template-columns:minmax(0, 260px) minmax(0, 1fr);
  align-items:center;
  gap:clamp(20px, 3vw, 44px);
}
/* The gap above the panel is a margin on its children, not padding on the
   panel: an element does not clip its own padding, so as padding it left
   every collapsed row 22px tall. */
.ap-indpage-svc-panel-in > *{ margin-top:22px }
.ap-indpage-svc-art{
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
}
.ap-indpage-svc-art img{
  display:block; width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
}
.ap-indpage-svc-facts{ display:block }
.ap-indpage-svc-stat{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:12px;
}
.ap-indpage-svc-stat b{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(34px, 4.4vw, 54px); line-height:1;
  color:#f2f3f8;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;          /* a figure never breaks across lines */
}
.ap-indpage-svc-stat i{
  font-style:normal;
  font-size:.86rem; letter-spacing:.02em;
  color:var(--muted);
}
.ap-indpage-svc-blurb{
  display:block;
  max-width:52ch;
  font-size:.96rem; line-height:1.65;
  color:var(--muted);
}

/* ---- which row is open ----
   Every row rests condensed; only the one under the pointer opens. One
   state, no row privileged over another, and the list reads as a list
   until somebody asks it a question. */

.ap-indpage-svc:hover .ap-indpage-svc-panel,
.ap-indpage-svc:focus-visible .ap-indpage-svc-panel{ grid-template-rows:1fr; opacity:1 }

.ap-indpage-svc:hover,
.ap-indpage-svc:focus-visible{ background:rgba(238,240,246,0.03) }

.ap-indpage-svc:hover .ap-indpage-svc-cta,
.ap-indpage-svc:focus-visible .ap-indpage-svc-cta{
  background:var(--orange); border-color:var(--orange); color:#0b0d12;
}

.ap-indpage-svc:hover .ap-indpage-svc-num,
.ap-indpage-svc:focus-visible .ap-indpage-svc-num{ color:var(--orange) }

/* A touch screen has no hover, so there the panel would be content nobody
   can ever reach. It is simply open on those devices. */
@media (hover: none){
  .ap-indpage-svc-panel{ grid-template-rows:1fr; opacity:1 }
}

@media (prefers-reduced-motion:reduce){
  .ap-indpage-svc,
  .ap-indpage-svc-panel,
  .ap-indpage-svc-cta,
  .ap-indpage-svc-num{ transition:none }
}

/* ---------- "no case here yet" ----------
   Deliberately plain. It sits where the case map would be, and dressing it
   up would undercut the one thing it is for. */

.ap-indpage-note{
  max-width:74ch;
  padding:clamp(28px, 4vw, 44px);
  border:1px solid var(--line);
  border-left:2px solid var(--orange);
  border-radius:14px;
  background:rgba(238,240,246,0.02);
}
.ap-indpage-note h2{
  font-size:clamp(1.5rem, 2.6vw, 2.2rem);
  line-height:1.12;
  margin:14px 0 18px;
}
.ap-indpage-note p{
  color:var(--muted);
  line-height:1.72;
  margin:0 0 26px;
  max-width:66ch;
}

/* ---------- the hub grid ---------- */

.ap-indhub-hero .ap-svc-hero-copy{ max-width:62ch }
.ap-indhub-hero h1{
  font-size:clamp(2.2rem, 4.6vw, 3.8rem);
  line-height:1.05;
}

.ap-indhub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
}
.ap-indhub-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(238,240,246,0.02);
  text-decoration:none;
  transition:border-color .25s ease, translate .25s ease;
}
.ap-indhub-card:hover,
.ap-indhub-card:focus-visible{
  border-color:rgba(255,90,20,0.55);
  translate:0 -3px;
}
.ap-indhub-media{
  display:block;
  position:relative;
  overflow:hidden;
}
.ap-indhub-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(255,90,20,0.12), rgba(3,3,5,0.6));
}
.ap-indhub-media img{
  display:block;
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  transition:scale .4s ease;
}
.ap-indhub-card:hover .ap-indhub-media img{ scale:1.04 }

.ap-indhub-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:22px 22px 20px;
  flex:1;
}
.ap-indhub-body strong{
  font-size:1.06rem;
  color:var(--paper);
}
.ap-indhub-desc{
  color:var(--muted);
  font-size:.94rem;
  line-height:1.6;
}
.ap-indhub-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:16px;
}
.ap-indhub-count{
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.ap-indhub-foot i{
  color:var(--orange);
  transition:translate .25s ease;
}
.ap-indhub-card:hover .ap-indhub-foot i{ translate:3px -3px }

@media (prefers-reduced-motion:reduce){
  .ap-indhub-card,
  .ap-indhub-media img,
  .ap-indhub-foot i,
  .ap-indpage-svc{ transition:none }
}

@media (max-width:900px){
  .ap-indpage-hero-grid{ grid-template-columns:1fr }
  /* the photograph leads on a phone: it is the fastest way to say which
     sector this page is about */
  .ap-indpage-hero-art{ order:-1 }
  /* Stacked: the number moves above the title and the panel's picture
     goes over its text rather than beside it. */
  .ap-indpage-svc{
    grid-template-columns:minmax(0, 1fr) auto;
    gap:8px 16px;
    padding:22px 0;
  }
  .ap-indpage-svc-num{ display:none }
  .ap-indpage-svc-panel-in{ grid-template-columns:1fr; gap:18px }
}

@media (max-width:640px){
  .ap-indpage-hero,
  .ap-indhub-hero{ padding-top:calc(var(--header-h, 84px) + 48px); padding-bottom:48px }
  .ap-indpage-svc{ padding:20px 0 }
}

/* ---------- icon cards ----------
   The industry pages' two card grids are sets, not sequences, so they carry
   an icon instead of the 01/02/03 the service pages use. A number that does
   not encode an order is decoration, and three of them stacked beside each
   other read as a template rather than as content. The process section keeps
   its numbers, because those ARE an order. */

.ap-svc-card--ico .ap-svc-card-ico{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  margin-bottom:18px;
  border-radius:11px;
  color:var(--orange);
  border:1px solid rgba(255,90,20,0.28);
  background:
    radial-gradient(120% 120% at 30% 15%, rgba(255,90,20,0.16), rgba(255,90,20,0.03) 70%),
    rgba(238,240,246,0.02);
  transition:border-color .25s ease, background .25s ease, translate .25s ease;
}
.ap-svc-card--ico .ap-ico{ width:21px; height:21px }
.ap-svc-card--ico:hover .ap-svc-card-ico{
  border-color:rgba(255,90,20,0.6);
  translate:0 -1px;
}

@media (prefers-reduced-motion:reduce){
  .ap-svc-card--ico .ap-svc-card-ico{ transition:none }
}

/* ---------- what we build: the photograph, then the three cards ----------
   The picture used to be a band of its own between two sections, which is
   decoration. Beside the three things we ship it is doing a job, so it sits
   in the same grid and is cropped 3:4 to stand the full height of them. */

.ap-indpage-build{
  display:grid;
  grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  gap:clamp(24px, 3.4vw, 48px);
  align-items:stretch;
}
.ap-indpage-build-art{
  margin:0;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
}
.ap-indpage-build-art img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
}
.ap-indpage-build-art::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(to top, rgba(3,3,5,0.93), rgba(3,3,5,0));
  pointer-events:none;
}
.ap-indpage-build-art figcaption{
  position:absolute;
  left:22px; right:22px; bottom:20px;
  z-index:1;
  font-size:.9rem;
  line-height:1.5;
  color:var(--paper);
  text-shadow:0 1px 14px rgba(3,3,5,0.8);
}

.ap-indpage-build-list{
  display:grid;
  gap:clamp(14px, 1.6vw, 20px);
  align-content:stretch;
}
/* Beside a picture the cards are wide rows, so the icon sits next to the
   heading instead of stacking above it and stretching the column. */
.ap-indpage-build-list .ap-svc-card{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-content:start;
  gap:4px 18px;
}
.ap-indpage-build-list .ap-svc-card-ico{
  grid-row:1 / span 2;
  margin-bottom:0;
}
.ap-indpage-build-list .ap-svc-card h3{ align-self:center; margin-bottom:6px }

/* ---------- the pattern, as one line ----------
   Three nodes on a single rule that crosses the whole viewport at the exact
   height of the icon centres. The rail is drawn by the list, so it tracks
   the icons at any width with nothing measured in JS, and the icon boxes
   are opaque so the line stops at each node instead of showing through. */

.ap-indpage-pattern{ overflow-x:clip }   /* the 100vw rail must not scroll the page */

.ap-indpage-steps{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(24px, 3.2vw, 56px);
}
.ap-indpage-steps::before{
  content:"";
  position:absolute;
  top:23px;                        /* half of the 46px node, so it is centred */
  left:calc(50% - 50vw);
  width:100vw;
  height:1px;
  background:linear-gradient(to right,
    rgba(238,240,246,0) 0%,
    var(--line) 12%,
    rgba(255,90,20,0.45) 50%,
    var(--line) 88%,
    rgba(238,240,246,0) 100%);
}
.ap-indpage-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.ap-indpage-step-ico{
  display:grid;
  place-items:center;
  width:46px; height:46px;
  margin-bottom:20px;
  border-radius:50%;
  color:var(--orange);
  border:1px solid rgba(255,90,20,0.4);
  /* opaque on purpose: this is what interrupts the rail at each node */
  background:
    radial-gradient(120% 120% at 30% 15%, rgba(255,90,20,0.2), rgba(255,90,20,0.04) 70%),
    var(--ink);
  transition:border-color .25s ease;
}
.ap-indpage-step:hover .ap-indpage-step-ico{ border-color:rgba(255,90,20,0.85) }
.ap-indpage-step .ap-ico{ width:21px; height:21px }
.ap-indpage-step h3{
  font-family:'Anton',sans-serif; font-weight:400;
  margin:0 0 10px;
  font-size:20px; line-height:1.15; letter-spacing:.005em;
  color:#f2f3f8;
}
.ap-indpage-step p{
  margin:0;
  font-size:14.5px; line-height:1.65;
  color:var(--muted);
  text-wrap:pretty;
}

@media (prefers-reduced-motion:reduce){
  .ap-indpage-step-ico{ transition:none }
}

@media (max-width:900px){
  .ap-indpage-build{ grid-template-columns:1fr }
  .ap-indpage-build-art img{ aspect-ratio:16 / 10 }
  /* Stacked, the rail would run down the page rather than across it, and a
     vertical timeline is a different idea. It simply goes. */
  .ap-indpage-steps{ grid-template-columns:1fr; gap:34px }
  .ap-indpage-steps::before{ display:none }
  .ap-indpage-step{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:4px 18px;
  }
  .ap-indpage-step-ico{ grid-row:1 / span 2; margin-bottom:0 }
  .ap-indpage-step h3{ align-self:center }
}