/* Industries hub, sector and project pages in townloom's light theme. Townloom has no
   page like these, so they borrow its solution page (src/styles.css .clay-feature,
   .clay-sol-help, .clay-sol-list, .clay-ind-card): a pastel hero card in the
   industry's tone, a warm panel for the story, pastel project cards. Load after clay.css. */
[data-tone="blue"], [data-industries="road-safety"], [data-industries="smart-surveillance"], .sector-filters [data-industry="road-safety"], .sector-filters [data-industry="smart-surveillance"] { --bg: #eef6ff; --tone: #3a5af9; --deep: #0f1c4d; }
[data-tone="peach"], [data-industries="sports-fitness"], .sector-filters [data-industry="sports-fitness"] { --bg: #fcf1ea; --tone: #b8430f; --deep: #3a1405; }
[data-tone="lime"], [data-industries="manufacturing"], .sector-filters [data-industry="manufacturing"] { --bg: #f4f7e2; --tone: #55720b; --deep: #1f2a05; }
[data-tone="pink"], [data-industries="education"], .sector-filters [data-industry="education"] { --bg: #fcf0f4; --tone: #c0306a; --deep: #3d0a20; }

.applications-page h1 { font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.applications-page .container { max-width: none; padding-inline: var(--gut); }

/* breadcrumb sits quietly above the hero card */
.sector-breadcrumb { padding-top: 104px; color: var(--muted); font-size: 0.875rem; }
.sector-breadcrumb a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.sector-breadcrumb a:hover { text-decoration-color: currentColor; }

/* Hero: pastel card, tag pill, copy left, media right (clay-feature). */
.sector-detail .sector-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  width: auto;
  max-width: none;
  margin: 20px var(--gut) 0;
  padding: 24px;
  padding-left: 48px;
  border-radius: var(--r-xl);
  background: var(--bg, var(--c-warm));
  color: var(--deep, var(--ink));
}
.sector-detail .sector-hero > div { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 0; }
.sector-detail .sector-hero .section-eyebrow {
  margin: 0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--tone, var(--ink));
  box-shadow: 10px 0 0 -2px color-mix(in srgb, var(--tone, var(--ink)) 30%, var(--bg, #fff));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sector-detail .sector-hero h1 { margin-top: 1.4rem; color: inherit; font-size: clamp(2.5rem, 4.4vw, 4rem); }
.sector-detail .sector-hero h1 + p { max-width: 30rem; margin-top: 1.25rem; color: inherit; font-size: 1.0625rem; line-height: 1.55; opacity: 0.85; }
.sector-detail .sector-hero .btn { margin-top: 2.5rem; }
.sector-detail .sector-hero .btn-primary { background: var(--tone, var(--ink)); border-color: var(--tone, var(--ink)); }
.sector-detail .sector-hero .btn-primary:hover { background: color-mix(in srgb, var(--tone, var(--ink)) 85%, #000); border-color: transparent; }
.sector-detail .sector-hero-media { margin: 0; overflow: hidden; border: 0; border-radius: var(--r-md); box-shadow: none; }
.sector-detail .sector-hero-media :is(img, video, .video-frame) { display: block; width: 100%; border: 0; border-radius: 0; }

/* Story: one warm panel, the challenge large on the left, what we built on the right (clay-sol-help). */
.sector-detail > .container:has(> .application-group) { display: grid; grid-template-columns: 0.9fr 1.1fr; column-gap: 0; }
.sector-detail .application-group {
  display: block;
  margin: clamp(72px, 8vw, 120px) 0 0;
  padding: var(--pad);
  border: 0;
  background: var(--c-warm);
}
.sector-detail .application-group:first-child { border-radius: var(--r-xl) 0 0 var(--r-xl); }
.sector-detail .application-group:nth-child(2) { border-radius: 0 var(--r-xl) var(--r-xl) 0; padding-left: clamp(16px, 2.5vw, 48px); }
.sector-detail .application-group:first-child .application-heading h2 { color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sector-detail .application-group:first-child .application-body p { margin-top: 1rem; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
.sector-detail .application-group:nth-child(2) .application-heading h2 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); letter-spacing: -0.035em; line-height: 1.04; }
.sector-detail .application-group .application-body { margin-top: 1.5rem; padding: 0; border: 0; color: var(--ink); font-size: 1.0625rem; }
.sector-detail .application-group:first-child .application-body { margin-top: 0; }
.sector-detail .project-story { margin-top: 0; padding-top: 0; border: 0; }
.sector-detail .project-story > p:first-child { color: var(--ink); }
/* outcomes as the check list */
.sector-detail .project-outcomes { display: grid; gap: 0.85rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.sector-detail .project-outcomes li { position: relative; margin: 0; padding-left: 1.9rem; font-size: 1.0625rem; line-height: 1.45; }
.sector-detail .project-outcomes li::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--tone, #c0306a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sector-detail details { margin-top: 2rem; padding: 0; border: 0; border-radius: 16px; background: #fff; }
.sector-detail details summary { padding: 16px 20px; color: var(--ink); font-weight: 500; cursor: pointer; }
.sector-detail details .technical-copy { padding: 0 20px 20px; color: var(--muted); }
.sector-detail .project-story .text-link { display: inline-block; margin-top: 1.5rem; }

/* Project cards: pastel tone cards with a tag pill (clay-sol-card / clay-ind-card). */
.sector-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sector-filters button {
  min-height: 0;
  padding: 0.5em 1em 0.55em;
  border: 1px solid color-mix(in srgb, var(--tone, var(--ink)) 22%, transparent);
  border-radius: 999px;
  background: var(--bg, #fff);
  color: var(--tone, var(--ink));
  font: 700 1rem/1 "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.02em;
  transition: background 0.18s, color 0.18s;
}
.sector-filters button:hover { background: color-mix(in srgb, var(--bg, #fff) 85%, var(--tone, var(--ink))); }
.sector-filters button[aria-pressed="true"] { border-color: var(--tone, var(--ink)); background: var(--tone, var(--ink)); color: #fff; }
.sector-result-count { color: var(--muted); }
.sector-browser { margin-top: clamp(40px, 4vw, 64px); }
.sector-browser .sector-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.sector-directory .sector-link {
  grid-template-columns: 1fr;
  gap: 0;
  height: 100%;
  position: relative;
  display: grid;
  align-content: start;
  padding: 12px 12px 24px;
  overflow: visible;
  border: 0;
  border-radius: 28px;
  background: var(--bg, var(--c-warm));
  color: var(--deep, var(--ink));
  box-shadow: none;
  transition: background 0.18s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
.sector-browser .sector-link-media { aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border-radius: 18px; }
.sector-directory .sector-card-copy { padding: 18px 12px 0; background: none; }
.sector-directory .sector-industry-label {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #fff;
  color: var(--tone, var(--ink));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.sector-browser .sector-link h2 { margin-top: 0.75rem; color: inherit; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; }
.sector-browser .sector-link p { margin-top: 0.5rem; color: inherit; font-size: 0.9375rem; line-height: 1.5; opacity: 0.8; }
.sector-browser .sector-link:hover h2 { color: inherit; text-decoration: none; }
.sector-browser .sector-link-action { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 20px 12px 0; color: var(--tone, var(--ink)); font-weight: 500; }
.sector-browser .sector-link-action svg { transition: transform 0.18s; }
@media (hover: hover) and (pointer: fine) {
  .sector-directory .sector-link:hover .sector-link-action svg { transform: translateX(3px); }
  .sector-directory .sector-link:hover { background: color-mix(in srgb, var(--bg, var(--c-warm)) 90%, var(--tone, #000)); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.35); }
}

/* Related links: white pills on warm, arrow nudges on hover. */
.sector-related { grid-column: 1 / -1; margin-top: clamp(72px, 8vw, 120px); padding: 0; border: 0; }
.sector-related h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
.sector-related > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.25rem; }
.sector-related a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 0.75rem 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--c-warm);
  color: var(--ink);
  font-weight: 500;
}
.sector-related a svg { width: 20px; height: 20px; transition: transform 0.18s; }
.sector-related a:hover { background: #e9e7e0; color: var(--ink); }
.sector-related a:hover svg { transform: translateX(3px); }

/* Closing call: big heading and the dark + soft button pair (clay-final head). */
.application-contact { grid-column: 1 / -1; margin-top: clamp(96px, 10vw, 150px); padding: 0; border: 0; background: none; }
.application-contact h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: -0.04em; line-height: 1; }
.application-contact p { max-width: 40rem; margin: 1.5rem 0 2rem; color: var(--muted); font-size: 1.125rem; }

/* Hub intro */
.applications-intro { padding-top: 132px; }
.applications-intro h1 { font-size: clamp(3.25rem, 6.5vw, 6.5rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.92; }
.applications-intro p { max-width: 40rem; margin-top: 1.5rem; color: var(--muted); font-size: 1.125rem; }

@media (max-width: 1100px) { .sector-browser .sector-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sector-browser .sector-directory { grid-template-columns: 1fr; }
  .sector-detail .sector-hero { grid-template-columns: 1fr; padding: 16px 16px 20px; }
  .sector-detail .sector-hero > div { padding: 16px 8px 0; }
  .sector-detail > .container:has(> .application-group) { grid-template-columns: 1fr; }
  .sector-detail .application-group:first-child { border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: 0; }
  .sector-detail .application-group:nth-child(2) { margin-top: 0; border-radius: 0 0 var(--r-xl) var(--r-xl); padding-left: var(--pad); }
  .sector-breadcrumb { padding-top: 88px; }
  .applications-intro { padding-top: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .sector-directory .sector-link, .sector-related a svg, .sector-filters button { transition: none; }
}