/* Shared colors/fonts/ease/mx come from /tokens.css. Only this
   page's own overrides live here. */
:root {
  --sp: clamp(64px, 12vw, 160px);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--ombra);
  color: var(--luce);
  font-family: var(--text);
  padding-top: 116px;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 900px) {
  body {
    padding-top: 96px;
  }
}
.wrap {
  max-width: 2200px;
  margin: 0 auto;
  padding: 0 var(--mx);
  width: 100%;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
}
.h1 {
  font-family: var(--display-xl);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

/* ── PROJECTS TOP ROW ── */
/* One row: heading (left) / filter rail (centered) / lang switcher
   + Home (right). More top clearance than product.html's row since
   there's real heading text sharing the line now. The rail, lang
   switcher and Home all reuse the same Liquid-Glass pill recipe
   used across the header/product pages -- lang-flags/.lang-btn
   styling itself comes from site-chrome.js's shared HEADER_CSS,
   injected globally the moment that script runs. */
.projects-topnav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 32px var(--mx) 20px;
}
.projects-topnav .projects-heading {
  justify-self: start;
  min-width: 0;
}
.projects-topnav .projects-heading .eyebrow {
  font-size: 15px;
}
.projects-topnav .projects-heading .h1 {
  font-size: clamp(15.6px, 1.8vw, 20.4px);
  margin-top: 4px;
  white-space: nowrap;
}
.projects-topnav .filter-rail {
  grid-column: 2;
  justify-self: center;
}
.projects-topnav .topnav-actions {
  grid-column: 3;
  justify-self: end;
}
/* The switcher and Home are one capsule, not two surfaces that happen to
   sit beside each other: they are a single "leave this page" cluster, and
   the rail is the control the page is actually for. Same grouping the
   home page header uses down its whole right-hand side, and the same one
   the project detail row carries. */
.topnav-actions,
.filter-rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 9999px;
  font-family: var(--text);
  font-size: 16px;
  font-weight: 500;
  color: var(--luce);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px) saturate(150%) brightness(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(150%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  will-change: backdrop-filter;
}
.topnav-actions {
  gap: 4px;
  padding: 0 6px;
}
.topnav-actions::before,
.filter-rail::before {
  content: "";
  position: absolute;
  inset: 0 14px auto 14px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.5) 55%,
    transparent
  );
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topnav-actions,
  .filter-rail {
    background: rgba(32, 32, 36, 0.9);
  }
}

/* Inside the capsule both controls are flat -- the glass belongs to the
   capsule, and a surface of their own would draw a pill inside a pill. A
   hairline splits them, the way the rail below splits its two axes. */
.topnav-actions .lang-btn {
  height: 40px;
  padding: 0 16px;
  border-color: transparent;
  border-radius: 9999px;
  transition: background 200ms var(--ease);
}
@media (hover: hover) {
  .topnav-actions .lang-btn:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.08);
  }
}
.home-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 9999px;
  font-family: var(--text);
  font-size: 16px;
  font-weight: 500;
  color: var(--luce);
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms var(--ease);
}
@media (hover: hover) {
  .home-pill:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}
@media (hover: none) {
  .topnav-actions .lang-btn:hover,
  .home-pill:hover {
    background: none;
  }
}
.home-pill::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px -3px;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

/* ── FILTER RAIL ───────────────────────────────────────────────────
   Replaces the old five-category chip row. Two axes now, sector and
   country, and a chip per value of both would be a dozen pills in a
   line. Instead one glass capsule holds two triggers split by a
   hairline, and opening one drops a panel of that axis's options
   beneath it. The chosen value collapses back into its trigger as a
   gold-dotted sub-label, so the rail states the current filter itself
   and needs no separate readout.

   The options deliberately do not live on the topnav line. That line
   is shared with the heading and the Home pill, both of which have a
   prior claim on it, so anything unfolding sideways there is racing
   for a few hundred pixels that vary with the viewport and with the
   language (every Italian label is longer). Whatever lost that race
   got clipped, and a horizontal strip that has to be scrolled to
   reach the last option is not a filter anyone can see. Dropping the
   options instead gives them a surface with no competition, where
   they stack and are all visible at once. */
.filter-rail {
  align-items: stretch;
  justify-content: flex-start;
  height: 60px;
  padding: 4px;
  /* brighter than the shared pill recipe it inherits: this is the one
     control on the page, and at the old 0.07/0.16 it read as a faint
     outline against the black. The Home pill keeps the quieter values,
     being a link rather than the thing the page is for.

     Graded top-to-bottom rather than one flat tint. The rail sits over
     pure black, so its backdrop-filter has nothing to blur and cannot
     carry the glass on its own -- what reads as glass here is the lit
     top edge falling away to a darker base, plus the hairline in
     ::before below. A single rgba() left it a flat grey capsule. */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.17) 0%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.07) 100%
  );
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  /* The rail's own backdrop-filter makes it a stacking context, so the
     panel's z-index only ever sorts it against its siblings inside the
     capsule -- it cannot climb over anything outside. The rail has to
     be lifted itself. On desktop the fixed topnav already does that;
     on mobile the topnav is static, and without this the panel opened
     underneath the first row of project cards. */
  z-index: 60;
  transition: border-color 300ms var(--ease);
}
/* the shared pill's specular hairline, kept and widened rather than
   cancelled -- it is the single strongest glass cue the rail has over
   a black page */
.filter-rail::before {
  inset: 0 18px auto 18px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.62) 42%,
    rgba(255, 255, 255, 0.62) 58%,
    transparent
  );
}
.filter-rail:focus-within {
  border-color: rgba(255, 255, 255, 0.42);
}
/* hairline between the two axes, hidden while either is open so the
   capsule reads as one continuous surface mid-morph */
.rail-sep {
  align-self: center;
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.3);
  transition: opacity 240ms var(--ease);
}
.filter-rail.is-open .rail-sep {
  opacity: 0;
}
.rail-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* never shrink: the capsule is content-sized, and a long selected
     value should widen it rather than be squeezed and clipped */
  flex: 0 0 auto;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  /* champagne, not grey: the axis names are the page's own vocabulary,
     and they sat at --cenere on near-black, which is where text goes
     to be ignored */
  color: var(--oro);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 240ms var(--ease),
    background 240ms var(--ease),
    opacity 240ms var(--ease);
}
@media (hover: hover) {
  .rail-trigger:hover {
    color: #e3cea0;
  }
}
/* the idle trigger recedes rather than being shoved aside */
.filter-rail.is-open .rail-trigger:not([aria-expanded="true"]):not(.has-pick) {
  opacity: 0.45;
}
.rail-trigger[aria-expanded="true"],
.rail-trigger.has-pick {
  color: #e3cea0;
}
.rail-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
}
.rail-trigger .tick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oro);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 260ms var(--ease),
    transform 260ms var(--ease);
}
.rail-trigger.has-pick .tick {
  opacity: 1;
  transform: none;
}
/* selected value, revealed by animating the wrapper's width */
.rail-trigger .pick {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 420ms var(--ease);
}
.rail-trigger.has-pick .pick {
  grid-template-columns: 1fr;
}
/* the axis name is champagne, so the value it carries is white --
   otherwise "Sectors / Landscape" is one undifferentiated gold run
   and the answer reads as part of the question */
.rail-trigger .pick > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  color: var(--luce);
}
.rail-trigger .pick > span::before {
  content: "/ ";
  color: rgba(255, 255, 255, 0.35);
}
/* the panel drops, so the caret points down, and up once it is open */
.rail-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.6;
  transition:
    transform 300ms var(--ease),
    opacity 240ms var(--ease);
}
.rail-trigger[aria-expanded="true"] .rail-caret {
  transform: rotate(225deg);
  opacity: 1;
}

/* ── OPTION PANEL ──────────────────────────────────────────────────
   One option per row, label left, count right on a shared edge. The
   earlier version wrapped chips, which meant the last row was however
   many happened to fit -- five sectors left one chip alone under four,
   and every added country reshuffled it. A column has no wrap
   behaviour to go wrong: the block is the same shape at five options
   or twenty, in either language, and the counts stack into a figure
   you can read down.

   Centred on the capsule rather than anchored to a trigger, which is
   also why nothing here needs measuring in script: 300px centred
   under a centred capsule cannot reach a viewport edge before the
   mobile rules take over. */
.rail-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: calc(100vw - 2 * var(--mx));
  padding: 8px;
  border-radius: 18px;
  background: rgba(14, 14, 14, 0.94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  /* the -50% has to be carried in both states, so the open transition
     animates the 8px lift and not a slide in from half a panel away */
  transform: translate(-50%, -8px) scale(0.985);
  pointer-events: none;
  transition:
    opacity 240ms var(--ease),
    transform 300ms var(--ease);
}
.rail-panel.open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.rail-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cenere);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 300ms var(--ease),
    transform 300ms var(--ease),
    background 200ms var(--ease),
    color 200ms var(--ease);
}
.rail-panel.open .rail-opt {
  opacity: 1;
  transform: none;
  /* stagger, index carried as --i */
  transition-delay: calc(var(--i) * 30ms);
}
@media (hover: hover) {
  .rail-opt:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--luce);
  }
}
.rail-opt.active {
  background: rgba(201, 169, 98, 0.16);
  color: var(--luce);
}
.rail-opt .n {
  margin-left: auto;
  font-size: 10px;
  color: var(--cenere);
}
@media (hover: hover) {
  .rail-opt.active .n,
  .rail-opt:hover .n {
    color: var(--oro);
  }
}
/* "All" is a reset, not a sibling of the values under it */
.rail-rule {
  height: 1px;
  margin: 6px 14px;
  background: rgba(255, 255, 255, 0.08);
}
.rail-flag {
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 1px;
  /* a ring outside the flag, not a border: a see-through border lets the
     flag's own colours show through and smear the edge */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .rail-panel.open .rail-opt {
    transition-delay: 0ms;
  }
}

/* ── PROJECT GRID (same card visual language as the homepage
   Portfolio section's .project-card, placeholder content) ── */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(24px, 4vw, 48px);
}
@media (max-width: 900px) {
  .projects-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}
.project-card {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.project-img {
  position: relative;
  width: 100%;
  aspect-ratio: 2/1;
  overflow: hidden;
  border: 1px solid var(--grafite);
  background: var(--notte);
  border-radius: 2px;
}
.project-placeholder {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafite);
}
.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-name {
  font-family: var(--text);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--luce);
  margin-top: 32px;
}
.project-meta {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--cenere);
  margin-top: 10px;
}
.projects-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--cenere);
  padding: clamp(40px, 8vw, 96px) 0;
}

/* Has to be main.wrap, not main: .wrap sets the `padding: 0 var(--mx)`
   shorthand, which zeroes padding-bottom and outranks a bare type
   selector. As `main` this rule never applied and the last row of cards
   sat flush against the footer's contact band. */
main.wrap {
  padding-bottom: var(--sp);
}
/* ── MOBILE TOP ROW ────────────────────────────────────────────────
   The desktop bar is one fixed row: heading | rail | actions. On a
   phone the rail can't grow sideways, and a fixed bar tall enough to
   hold an open group costs a quarter of the screen while body's
   padding-top still reserves 96px, the bar would sit on top of the
   grid it filters.

   So on mobile it becomes two rows (heading + actions, then the rail)
   and stops being fixed. The rail spans the full width, its two
   triggers split that width evenly for thumb-sized targets, and the
   panel goes edge to edge beneath them. */
@media (max-width: 900px) {
  body {
    padding-top: 0;
  }
  .projects-topnav {
    position: static;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 12px;
    padding: 20px var(--mx) 4px;
  }
  .projects-topnav .projects-heading {
    grid-column: 1;
    grid-row: 1;
  }
  .projects-topnav .projects-heading .eyebrow {
    font-size: 12px;
  }
  .projects-topnav .projects-heading .h1 {
    font-size: clamp(13.2px, 3.9vw, 18px);
    white-space: normal;
  }
  .projects-topnav .topnav-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }
  /* the capsule clears its contents rather than the other way round: both
     controls keep the full 44px touch target the shared .lang-btn rule
     asks for on a phone */
  .topnav-actions {
    height: 48px;
    gap: 2px;
    padding: 0 2px;
  }
  .topnav-actions .lang-btn {
    height: 44px;
    padding: 0 12px;
  }
  .projects-topnav .filter-rail {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    max-width: 100%;
  }
  .rail-trigger {
    /* the two triggers split the width evenly instead of hugging their
       labels, so both tap targets are wide and the hairline lands in
       the middle of the capsule rather than wherever the words end */
    flex: 1 1 0;
    justify-content: center;
    height: 48px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  /* full-bleed panel: on a phone there is every reason to give the
     options the whole width, and taller rows for thumbs */
  .rail-panel {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    top: calc(100% + 8px);
    transform: translateY(-8px) scale(0.99);
  }
  .rail-panel.open {
    transform: none;
  }
  .rail-opt {
    height: 48px;
    font-size: 12px;
  }
  .home-pill {
    height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }
  .home-pill::before {
    inset: 12px auto 12px -2px;
  }
  .project-name {
    font-size: 19px;
    margin-top: 18px;
  }
  .project-meta {
    font-size: 13px;
    margin-top: 6px;
  }
  footer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
}

@media (hover: none) {
  a,
  button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .rail-opt:hover {
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--cenere);
  }
  .rail-opt:active {
    border-color: var(--nebbia);
  }
  .rail-opt.active:hover {
    border-color: var(--luce);
    color: var(--ombra);
  }
  .rail-trigger:hover {
    color: var(--cenere);
  }
  .rail-trigger[aria-expanded="true"]:hover,
  .rail-trigger.has-pick:hover {
    color: var(--luce);
  }
}

/*
 * Legibility floor: nothing below 12px on a small screen.
 *
 * These labels are set at 10-11px mono, which reads as a quiet register on a
 * desktop and as unreadable on a phone. 12px is the smallest mono size the
 * site already uses elsewhere, so this borrows a value rather than inventing
 * one. Gated on width rather than pointer: it is a typographic scale, and
 * above 900px a tablet shows the desktop composition and keeps its type.
 */
@media (max-width: 900px) {
  .project-placeholder {
    font-size: 12px;
  }
  .rail-opt {
    font-size: 12px;
  }
  .rail-opt .n {
    font-size: 12px;
  }
}

/* Big titles are wide capitals: on phones keep them to ~8% of the
   screen width so long words (MONTERIGGIONI, COLLABORAZIONI) still fit. */
@media (max-width: 600px) {
}

/* ── SECTOR CHIPS (always-visible quick filter above the grid) ── */
.sector-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-top: clamp(20px, 3vw, 36px);
}
.sector-chips:empty {
  display: none;
}
.sector-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--grafite);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: var(--mono, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.sector-chips .chip .n {
  opacity: 0.45;
  font-size: 11px;
}
@media (hover: hover) {
  .sector-chips .chip:hover {
    border-color: #c9a962;
  }
}
.sector-chips .chip[aria-pressed="true"] {
  background: #c9a962;
  border-color: #c9a962;
  color: #000;
}
.sector-chips .chip[aria-pressed="true"] .n {
  opacity: 0.7;
}
.sector-chips .chip:focus-visible {
  outline: 2px solid #c9a962;
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .sector-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
  }
  .sector-chips::-webkit-scrollbar {
    display: none;
  }
  .sector-chips .chip {
    flex: 0 0 auto;
  }
}
/* cards ease in, a few at a time, after a filter change */
.project-card.card-in {
  animation: card-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-card.card-in {
    animation: none;
  }
}

/* a sector or country with no projects under the other active filter */
.rail-opt.is-empty,
.rail-opt[disabled] {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

/* 2026-10-29: the main site header sits on top; this page's own row (tabs,
   back link, filters) is a normal row under it */
body {
  padding-top: 80px !important;
}
.projects-topnav {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  z-index: 2;
}

/* 2026-10-29: no frame lines; type and place in gold, as on the home page */
.project-img {
  border: 0;
}
.project-meta {
  color: var(--oro);
}

/* 2026-10-29: Sectors / Countries filter and its menus without drawn
   outlines; the edges fade softly like the rest of the site */
.filter-rail,
.topnav-actions {
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 22px 6px rgba(255, 255, 255, 0.035), 0 10px 34px rgba(0, 0, 0, 0.45);
}
.filter-rail::before,
.topnav-actions::before {
  display: none;
}
.rail-panel {
  border: 0;
  background: #121212;
  box-shadow: 0 0 24px 12px #121212, 0 30px 70px rgba(0, 0, 0, 0.6);
}

/* ── SECTOR PAGES (/sectors/*.html, built by scripts/prerender.mjs) ── */
.sector-top {
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 48px);
}
.sector-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cenere, #8a8a8a);
  margin-bottom: 26px;
}
.sector-crumbs a,
.sector-crumbs span {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-decoration: none;
}
.sector-crumbs a:hover {
  color: var(--oro);
}
.sector-top .h1 {
  font-size: clamp(30px, 5vw, 64px);
  margin: 10px 0 24px;
  max-width: 18ch;
}
.sector-intro {
  display: grid;
  gap: 16px;
  max-width: 760px;
}
.sector-intro p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.75;
  color: var(--nebbia);
}
.sector-h2 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 22px;
}
.sector-projects-title {
  border-top: 1px solid var(--grafite);
  padding-top: clamp(28px, 4vw, 44px);
}
.sector-how,
.sector-cta,
.sector-others {
  margin-top: clamp(56px, 8vw, 104px);
  border-top: 1px solid var(--grafite);
  padding-top: clamp(28px, 4vw, 44px);
}
.sector-how-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.sector-how-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--luce);
  margin: 0 0 10px;
}
.sector-how-item p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--nebbia);
}
.sector-cta {
  text-align: center;
}
.sector-cta p {
  max-width: 560px;
  margin: 0 auto 26px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--nebbia);
}
.sector-btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 2px;
  background: var(--oro);
  color: #0b0b0b;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.sector-btn:hover {
  filter: brightness(1.08);
}
.sector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sector-chip {
  padding: 10px 18px;
  border: 1px solid var(--grafite);
  border-radius: 99px;
  color: var(--luce);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.2s;
}
.sector-chip:hover {
  border-color: var(--oro);
  color: var(--oro);
}
/* the sector links under the Projects heading */
.sector-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  margin: 0 0 24px;
}
.sector-links a {
  color: var(--nebbia);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sector-links a:hover {
  color: var(--oro);
  border-bottom-color: var(--oro);
}
@media (max-width: 900px) {
  .sector-how-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .sector-how-grid {
    grid-template-columns: 1fr;
  }
}