/* Industry pages (industries/*), on the section grammar (14 Oct 2026). Loaded after usecase.css, which the services
   pages share, so every rule here is scoped to main.pg-ind and overrides it for these five pages only.
   Each page keeps its own tone: manufacturing orange, logistics heuristik, facilities harmonik, mobility kinetik,
   public sector esoterik. The hero is a tone panel with its picture beside the words; the page below is a run of
   chapter titles and trays. Feature rows sit in an oat tray as a picture and a white card side by side, swapping
   sides down the tray; the card about a product wears that product's tone. No hairlines between sections. */
main.pg-ind{background:var(--white)}
main.pg-ind .sec{padding:0}
main.pg-ind .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
main.pg-ind .chap-head p{color:var(--muted)}
main.pg-ind .chap-head p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
main.pg-ind .related{padding-top:96px}
main.pg-ind>section:last-child{padding-bottom:0}

/* hero: every industry page opens the same way, words on the left and a picture on the right */
main.pg-ind .hero-a{padding:48px 0 0}
main.pg-ind .hero-a h1>span{display:block;margin-top:10px;font-size:.62em;line-height:1.06;letter-spacing:-.03em;color:var(--t-ink)}
main.pg-ind .hero-a .art{width:100%}
main.pg-ind .hero-a .art.ph:not(:has(img)){aspect-ratio:4/3}
/* a photo still to come, on a tinted panel or tray: a deeper tint, so the frame reads against the ground behind it */
main.pg-ind :is(.tone-panel,.tray[data-tone]) .ph:not(:has(img)){background:radial-gradient(circle at 1px 1px,rgba(29,29,29,.09) 1px,transparent 1.4px) 0 0/18px 18px,color-mix(in srgb,var(--t-2) 85%,#fff)}

/* feature rows: a picture and a white card, side by side */
main.pg-ind .ind-rows{display:grid;gap:16px}
main.pg-ind .ind-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
main.pg-ind .ind-row.flip>:first-child{order:2}
main.pg-ind .ind-pic{display:flex;align-items:center;justify-content:center;min-width:0;border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--t-2,var(--oat-btn)) 55%,#fff)}
main.pg-ind .ind-pic>.ph{width:100%;aspect-ratio:4/3;border-radius:20px;box-shadow:none}
/* a photo (or a photo still to come) fills its frame when the card beside it is the taller of the two */
main.pg-ind .ind-pic>.ph:not(:has(>img.ui)){height:100%}
main.pg-ind .ind-pic>.ph>img.fit,main.pg-ind .ind-pic>.ph>img.cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
/* a product screen is never cropped: it sits whole on the tinted frame, with an even margin */
main.pg-ind .ind-pic>.ph:has(>img.ui){aspect-ratio:auto;height:auto;padding:32px;background:transparent}
main.pg-ind .ind-pic>.ph>img.ui{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:contain;padding:0;border-radius:10px;box-shadow:0 0 0 1px rgba(29,29,29,.06),0 24px 48px -32px rgba(29,29,29,.45)}
main.pg-ind .ind-copy{justify-content:center;gap:0;padding:40px 44px}
main.pg-ind .ind-copy .tt{font:500 34px/1.1 var(--sans);letter-spacing:-.9px}
main.pg-ind .ind-copy p{margin-top:14px;font-size:16px;line-height:24px;color:var(--ink);text-wrap:pretty}
main.pg-ind .ind-copy p a{text-decoration:underline;text-underline-offset:3px}
main.pg-ind .ind-copy .btn{margin-top:24px;align-self:flex-start}

/* text cards in a grid (steps, principles, uses, milestones) */
main.pg-ind .ind-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px}
main.pg-ind .ind-cards>li{display:flex}
main.pg-ind .ind-cards>li>.card,main.pg-ind .ind-cards>li.card{flex:1}
main.pg-ind .ind-cards+.ind-cards,main.pg-ind .ind-cards+.ind-rows,main.pg-ind .ind-cards+.ind-row,main.pg-ind .ind-row+.ind-cards{margin-top:16px}
/* milestones: the year (a figure) in mono, in the section's colour */
main.pg-ind .ind-years .card{gap:10px}
main.pg-ind .ind-years .yr{font:500 16px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--t-ink)}
main.pg-ind .ind-cards .tt{font-size:19px}
main.pg-ind .ind-cards .card p{font-size:15px;line-height:22px}
main.pg-ind .ind-cards .card p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* a sequence reads left to right: a small arrow in the gap between its cards */
main.pg-ind .ind-cards.seq>li{position:relative}
main.pg-ind .ind-cards.seq>li:not(:last-child)::after{content:"\2192";position:absolute;top:50%;right:-13px;z-index:1;transform:translateY(-50%);font:500 16px/1 var(--sans);color:var(--t-ink,var(--muted))}

/* the page's one ink tray: a short band with its statement and where to go next */
main.pg-ind .ind-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:36px 48px}
main.pg-ind .ind-band-t{display:flex;align-items:flex-start;gap:16px;max-width:820px}
main.pg-ind .ind-band .hi{color:var(--brand);margin-top:3px}
main.pg-ind .ind-band h2{font:500 28px/34px var(--sans);letter-spacing:-.6px;color:#fff}
main.pg-ind .ind-band p{margin-top:6px;font-size:16px;line-height:24px;color:rgba(255,255,255,.72)}
main.pg-ind .ind-band .btn-sec{border-color:transparent!important}

/* stories (tabs over a case card), inside an oat tray */
main.pg-ind .tray .ctabs{border:0;border-radius:20px;gap:8px;overflow:visible;margin-bottom:16px;background:transparent}
main.pg-ind .tray .ctab{height:64px;border:0!important;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
main.pg-ind .tray .ctab[aria-selected="true"]{background:#fff;color:var(--t-ink,var(--ink));box-shadow:inset 0 0 0 1.5px var(--t,var(--ink))}
main.pg-ind .tray .ctab:hover{background:#fff;color:var(--ink)}
main.pg-ind .tray .case{border:0;border-radius:20px;padding:16px 40px 16px 16px;gap:40px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-ind .tray .case .ph.sq{border-radius:14px}
main.pg-ind .tray .case .ph.sq:not(:has(img)){background:color-mix(in srgb,var(--t-2,var(--oat-btn)) 55%,#fff)}
main.pg-ind .tray .case h2.t-h2{font:500 36px/1.1 var(--sans);letter-spacing:-.9px;color:var(--t-ink,var(--ink))}
main.pg-ind .tray .case p.t-lead{font-size:18px;line-height:27px}

/* comparison table and notes, in a white card */
main.pg-ind .ind-tablecard{padding:8px 8px 20px}
main.pg-ind .ind-tablecard .cmp{margin:0;border:0;border-radius:14px}
main.pg-ind .ind-tablecard .uc-note{margin:16px 16px 0;font-size:14.5px;line-height:21px;color:var(--muted)}
main.pg-ind .ind-tablecard .uc-note a{color:var(--ink)}

/* who we have worked with: logo tiles (partner-logos.js fills them; the name stays as the fallback) */
main.pg-ind .names{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
main.pg-ind .names li{min-height:104px;padding:0;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-ind .names .nm{display:flex;align-items:center;justify-content:center;align-self:stretch;width:100%;padding:16px;color:var(--ink)}
main.pg-ind .names .nm img{box-sizing:border-box;padding:26px 30px!important}
main.pg-ind .tray>.uc-note{margin-top:20px;font-size:15px;line-height:22px;color:var(--muted)}
main.pg-ind .tray>.uc-note a{color:var(--ink)}

/* press: one white card per clipping, headline, outlet and year */
main.pg-ind .plist{margin:0;border:0;display:grid;gap:8px}
main.pg-ind .plist li{border:0;display:flex}
main.pg-ind .plist a.card{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 200px 64px 38px;gap:20px;align-items:center;padding:16px 16px 16px 24px}
main.pg-ind .plist b{font:500 17px/24px var(--sans);letter-spacing:-.2px;color:var(--ink)}
main.pg-ind .plist .yr{font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--t-ink)}
main.pg-ind .plist .corner{margin:0;align-self:center}
main.pg-ind .ind-more{margin-top:24px}
main.pg-ind .ind-more .more{margin-top:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* the enquiry form, in a white card beside its picture */
main.pg-ind .ind-form{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:stretch}
main.pg-ind .ind-form>.card{padding:32px}
main.pg-ind .ind-form .pf{margin:0}
main.pg-ind .ind-form .ind-pic>.ph{height:100%;aspect-ratio:auto;min-height:420px}

/* public sector: the data flow, the quote and the chart, in white cards */
main.pg-ind .ind-quote{margin:0;justify-content:center;padding:36px 40px}
main.pg-ind .ind-quote p{font:500 24px/34px var(--sans);letter-spacing:-.4px;color:var(--ink)}
main.pg-ind .ind-quote cite{display:block;margin-top:16px;font-style:normal;font-size:15px;line-height:22px;color:var(--t-ink)}
main.pg-ind .ind-chart{justify-content:center;padding:32px}
main.pg-ind .ind-chart h3{font:500 22px/28px var(--sans);letter-spacing:-.3px}
main.pg-ind .ind-chart .cap{margin-top:4px;font-size:14px;line-height:20px;color:var(--muted)}
main.pg-ind .ind-chart>svg{display:block;width:100%;height:auto;margin-top:16px}
main.pg-ind .ind-chart>svg rect:last-of-type{fill:var(--t)}
main.pg-ind .ind-chart>.dgm{margin-top:16px}
main.pg-ind .dgm+.ind-row{margin-top:16px}
main.pg-ind .ind-flow .no{display:block;margin-top:4px;font-size:14px;line-height:20px;color:var(--t-ink)}
main.pg-ind .ind-safe .ind-cards{align-content:start}
main.pg-ind .ind-safe .ind-side{display:flex;flex-direction:column;gap:16px}
main.pg-ind .ind-safe .ind-side .btn{align-self:flex-start;margin-top:8px}
main.pg-ind .arc{margin:0}
main.pg-ind .arc a{border:0!important;box-shadow:inset 0 0 0 1px var(--line);border-radius:20px;padding:22px 24px}
main.pg-ind .arc>li:not(:last-child)::after{right:-22px}

/* a tablet: the hero splits evenly, so the headline keeps its width */
@media (min-width:992px) and (max-width:1240px){
  main.pg-ind .hero-a .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  main.pg-ind .hero-a h1{font-size:50px;line-height:52px;letter-spacing:-1.8px}
}
@media (max-width:1100px){
  main.pg-ind .ind-years{grid-template-columns:minmax(0,1fr);gap:8px}
  main.pg-ind .ind-years .card{flex-direction:row;align-items:baseline;gap:16px;padding:16px 18px}
  main.pg-ind .ind-years .yr{flex:none;width:42px}
  main.pg-ind .tray .case{padding:12px 12px 28px;gap:24px}
  main.pg-ind .tray .case .copy{padding:0 16px}
  main.pg-ind .names{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  main.pg-ind .ind-row,main.pg-ind .ind-form{grid-template-columns:minmax(0,1fr)}
  main.pg-ind .ind-row>*{order:0!important}
  main.pg-ind .ind-row>.ind-pic{order:-1!important}
  main.pg-ind .ind-form .ind-pic{order:-1}
  main.pg-ind .ind-form .ind-pic>.ph{min-height:0;aspect-ratio:16/9}
}
@media (max-width:991px){
  main.pg-ind .ind-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.pg-ind .ind-cards.seq{grid-template-columns:minmax(0,1fr)}
  main.pg-ind .ind-cards.seq>li:not(:last-child)::after{content:"\2193";top:auto;right:auto;left:28px;bottom:-14px;transform:none}
  main.pg-ind .plist a.card{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:6px}
  main.pg-ind .plist a.card>b{flex:1 0 100%}
  main.pg-ind .plist a.card>.corner{margin-left:auto;align-self:center}
}
@media (max-width:760px){
  main.pg-ind .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-ind .related{padding-top:64px}
  main.pg-ind .hero-a{padding-top:24px}
  main.pg-ind .ind-copy{padding:24px 20px}
  main.pg-ind .ind-copy .tt{font-size:28px;line-height:1.12;letter-spacing:-.6px}
  main.pg-ind .ind-pic>.ph:has(>img.ui){padding:16px}
  main.pg-ind .ind-cards{grid-template-columns:minmax(0,1fr);gap:10px}
  main.pg-ind .ind-cards.seq{gap:16px}
  main.pg-ind .ind-band{padding:24px}
  main.pg-ind .ind-band h2{font-size:24px;line-height:30px}
  main.pg-ind .ind-rows{gap:28px}
  main.pg-ind .ind-row{gap:8px}
  main.pg-ind .tray .ctabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  main.pg-ind .tray .ctab{min-width:0;height:52px;padding:8px 12px}
  main.pg-ind .tray .case h2.t-h2{font-size:28px}
  main.pg-ind .tray .case p.t-lead{font-size:16px;line-height:24px}
  main.pg-ind .names{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  main.pg-ind .names li{min-height:80px}
  main.pg-ind .names .nm img{padding:18px 20px!important}
  main.pg-ind .names li:last-child:nth-child(odd){grid-column:1/-1}
  main.pg-ind .plist a.card{padding:14px 12px 14px 18px;gap:12px}
  main.pg-ind .plist b{font-size:15.5px;line-height:22px}
  main.pg-ind .ind-form>.card{padding:20px 16px}
  main.pg-ind .ind-quote{padding:24px 20px}
  main.pg-ind .ind-quote p{font-size:19px;line-height:28px}
  main.pg-ind .ind-chart{padding:20px}
}
@media (min-width:861px) and (max-width:1100px){main.pg-ind .ind-safe .ind-cards{grid-template-columns:minmax(0,1fr)}}

/* phones (owner, 14 Oct: "fix the phone gaps too"): one column stacks every card, so long runs of words open up
   between pictures. The milestones and the service arc tighten; a feature row marked .ind-mend puts its picture after
   its words, where it breaks the run that follows; short cards marked .ind-two sit two to a row. */
@media (max-width:760px){
  main.pg-ind .ind-years{gap:6px}
  main.pg-ind .ind-years .card{padding:12px 16px;gap:12px}
  main.pg-ind .ind-years .card p{font-size:14.5px;line-height:21px}
  main.pg-ind .ind-cards.seq{gap:14px}
}
@media (max-width:860px){main.pg-ind .ind-row.ind-mend>.ind-pic{order:2!important}}
@media (max-width:760px){
  /* short linked cards (a title and a line) sit two to a row, as "Keep exploring" does */
  main.pg-ind .ind-cards.ind-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  main.pg-ind .ind-cards.ind-two .card{padding:14px;gap:6px}
  main.pg-ind .ind-cards.ind-two .tt{font-size:15px;letter-spacing:-.2px;line-height:1.25}
  main.pg-ind .ind-cards.ind-two :is(.sub,p){font-size:13px;line-height:18px}
  main.pg-ind .tray:has(>.ind-cards.ind-two){padding:16px}
  /* the service arc: tighter cards and gaps */
  main.pg-ind .arc{gap:22px}
  main.pg-ind .arc>li:not(:last-child)::after{bottom:-20px}
  main.pg-ind .arc a{padding:16px 18px}
  main.pg-ind .arc>li[data-tone] a[aria-current="page"]{padding:15px 17px}
}
@media (max-width:359px){main.pg-ind .ind-cards.ind-two{grid-template-columns:minmax(0,1fr)}}
/* phones: the chart diagram runs to the card edges, so its words stay readable */
@media (max-width:760px){main.pg-ind .ind-chart>.dgm{margin:16px -20px -20px}}