/* One look for every project page, loaded after the layouts so it wins:
   the map's off-white ground, every word in black, and the "typewriter" type —
   a small slash label, the section title in uppercase typewriter type over a short rule, small body text. */
.panel[data-layout] {
  --u-ink: #111111;
  --u-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  background: radial-gradient(120% 90% at 50% 30%, #ffffff, #f5f5f4 70%) !important;
}
.panel[data-layout] .irr, .panel[data-layout] .cb, .panel[data-layout] .ms { background: transparent !important; }

/* every word in black */
.panel[data-layout] .panel-body :is(h1, h2, h3, h4, p, li, span, b, strong, em, small, figcaption, dt, dd, a, label, div) { color: var(--u-ink) !important; }

/* page title */
.panel[data-layout] :is(.irr-title, .cb-title, .ms-title, .case-title) {
  font-family: var(--u-mono) !important; font-style: normal !important; font-weight: 500 !important;
  font-size: clamp(20px, 2.2vw, 26px) !important; line-height: 1.3 !important; text-transform: uppercase; letter-spacing: 0 !important;
}

/* section titles: uppercase typewriter type over a short black rule */
.panel[data-layout] :is(.irr-chh h3, .cb-sec h3, .ms-sec h3, .stop-title, .case-awards h3) {
  font-family: var(--u-mono) !important; font-weight: 500 !important; font-style: normal !important;
  font-size: 15px !important; line-height: 1.45 !important; letter-spacing: .02em !important; text-transform: uppercase !important;
  margin: 0 0 12px !important; max-width: 30ch;
}
.panel[data-layout] :is(.irr-chh h3, .cb-sec h3, .ms-sec h3, .stop-title, .case-awards h3)::after {
  content: ""; display: block; width: 56px; margin-top: 12px; border-top: 1px solid var(--u-ink);
}
.panel[data-layout] .irr-chh { margin-bottom: 12px !important; }

/* small slash labels */
.panel[data-layout] :is(.stop-label, .cb-label, .case-meta, .cb-tags, .ms-tags) {
  font-family: var(--u-mono) !important; font-size: 10px !important; letter-spacing: .16em !important; text-transform: uppercase !important;
}
.panel[data-layout] .stop-label::before { background: var(--u-ink) !important; }

/* body text: small and calm */
.panel[data-layout] .panel-body p, .panel[data-layout] .panel-body li {
  font-family: var(--body) !important; font-size: 13px !important; line-height: 1.7 !important;
}

/* coloured cards, tickets and buttons become plain outlined boxes on the off-white, so the black text reads */
.panel[data-layout] :is(.ms-card, .ms-steps li, .cb-ticket, .cb-stub, .ms-pill, .ms-btn, .panel-link, .irr-pdf) {
  background: transparent !important; border: 1px solid rgba(17, 17, 17, 0.25) !important; box-shadow: none !important;
}
.panel[data-layout] .cb-stub { border-width: 0 0 0 1px !important; }
.panel[data-layout] :is(.panel-link, .ms-btn, .irr-pdf):hover { background: #111 !important; }
.panel[data-layout] :is(.panel-link, .ms-btn, .irr-pdf):hover, .panel[data-layout] :is(.panel-link, .ms-btn, .irr-pdf):hover * { color: #fff !important; }
.panel[data-layout] .ms-card strong { font-family: var(--u-mono); font-weight: 500 !important; font-size: 15px !important; text-transform: uppercase; }

/* The opening of every project: a soft line on where it comes from, then the tags, then the content.
   The layouts' own tag rows are hidden so the tags show once, here. */
.panel[data-layout] .p-intro, .panel .p-intro { display: grid; gap: 10px; margin: 0 0 8px; }
.panel[data-layout="irrigation"] .p-intro { margin: 22px 0 0; }
.panel[data-layout] .panel-body .p-intro p.p-origin, .panel .panel-body .p-intro p.p-origin { margin: 0; font-family: "Source Sans 3", var(--body) !important; font-style: italic; font-weight: 300 !important; font-size: 14px !important; line-height: 1.6 !important; color: #111 !important; letter-spacing: .01em; max-width: 52ch; }
.panel .p-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.panel .p-tags span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #111 !important;
  border: 1px solid rgba(17, 17, 17, 0.25); border-radius: 999px; padding: 2px 7px; }
.panel[data-layout] :is(.cb-tags, .ms-tags), .panel .case-meta .chip { display: none !important; }

/* Documents: one sentence of underlined links at the end of each project; the old buttons are hidden */
.panel .panel-body p.p-docs { margin: 36px 0 8px; font-size: 13px !important; line-height: 1.9 !important; }
.panel .p-docs a { color: #111 !important; text-decoration: none; border-bottom: 1px solid #111; padding-bottom: 1px; }
.panel .p-docs a:hover { border-bottom-style: dashed; }
.panel .p-docs a:focus-visible { outline: 1px solid #111; outline-offset: 3px; }
.panel :is(.panel-link, .irr-report) { display: none !important; }
.panel .panel-body p.p-docs--inline { margin: 6px 0 0; }

/* Mar i Muntanya's award set like Smart irrigation's: a smaller photo, a short centred caption in regular body type */
.panel .case-awards figure { width: 32%; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.panel .case-awards img { width: 100% !important; border-radius: 0; }
.panel .panel-body .case-awards figcaption { margin: 0; font-family: var(--body) !important; font-weight: 400 !important; font-size: 0.85rem !important; line-height: 1.4 !important; text-align: center; color: #111 !important; }

/* CineBus: no ticket box; the title and subtitle open the page like the others */
.panel[data-layout] .panel-body .cb-ticket { display: block !important; border: 0 !important; border-radius: 0 !important; margin-top: 20px !important; }
.panel[data-layout] .cb-ticket-main { padding: 0 !important; }
.panel[data-layout] :is(.cb-stub, .cb-admit) { display: none !important; }

/* CineBus: no extra horizontal lines; only the short rule under each section title stays */
.panel[data-layout] :is(.cb-head, .cb-facts) { border-top: 0 !important; border-bottom: 0 !important; padding-bottom: 0 !important; }

/* No numbers in front of the section titles */
.panel[data-layout] :is(.cb-num, .ms-num) { display: none !important; }

/* Only three kinds of text on every project page:
   1. body text  2. the soft inclined "where" line  3. section titles (uppercase typewriter).
   Everything else (page titles, labels, captions, numbers, tags, step names) takes one of these. */
.panel[data-layout] .panel-body :is(h1, h2, h4, h5, p, li, span, b, strong, em, small, figcaption, dt, dd, a, label, div, td, th, button):not(.ms-phone *) {
  font-family: var(--body) !important; font-size: 13px !important; line-height: 1.7 !important;
  letter-spacing: normal !important; text-transform: none !important; font-style: normal !important;
}
.panel[data-layout] .panel-body :is(h1, h2, h4, h5, b, strong):not(.ms-phone *) { font-weight: 600 !important; }
/* titles and big numbers use the section title style */
.panel[data-layout] .panel-body :is(.irr-title, .cb-title, .ms-title, .case-title, .irr-chh h3, .cb-sec h3, .ms-sec h3, .stop-title, .case-awards h3, .irr-num b, .cb-facts dt, .ms-stats dt, .ms-card strong) {
  font-family: var(--u-mono) !important; font-weight: 500 !important; font-size: 15px !important; line-height: 1.45 !important;
  letter-spacing: .02em !important; text-transform: uppercase !important; font-style: normal !important;
}
/* the "where" line keeps its own soft style */
.panel[data-layout] .panel-body .p-intro p.p-origin { font-family: "Source Sans 3", var(--body) !important; font-style: italic !important; font-weight: 300 !important; font-size: 14px !important; line-height: 1.6 !important; }
/* tags read as body text in their thin pills */
.panel[data-layout] .panel-body .p-tags span { font-size: 13px !important; line-height: 1.4 !important; padding: 1px 9px !important; }
.panel[data-layout] .panel-body :is(p, li, dd, figcaption, td):not(.ms-phone *) { font-weight: 400 !important; }

/* CineBus, tidied with the taste rules that fit this site's look:
   more air between sections than inside them, no rails, circles or divider lines,
   steps as a plain two-column list, the result figures on one flat tone step, the map square and full width. */
.panel[data-layout="cinebus"] .cb-sec { padding: 0 !important; margin-top: 72px !important; border: 0 !important; }
.panel[data-layout="cinebus"] .cb-map { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; margin: 4px 0 28px !important; }
.panel[data-layout="cinebus"] .cb-map svg, .panel[data-layout="cinebus"] .cb-map img { border-radius: 0 !important; }
.panel[data-layout="cinebus"] .cb-steps { padding: 0 !important; margin: 0 !important; gap: 0 !important; counter-reset: none; }
.panel[data-layout="cinebus"] .cb-steps::before, .panel[data-layout="cinebus"] .cb-step-n { display: none !important; }
.panel[data-layout="cinebus"] .cb-steps li { display: block !important; padding: 0 !important; margin: 0 0 18px !important; }
.panel[data-layout="cinebus"] .cb-steps li > div { display: grid !important; grid-template-columns: 9.5em 1fr; column-gap: 20px; }
.panel[data-layout="cinebus"] .cb-steps li strong { grid-row: span 2; }
.panel[data-layout="cinebus"] .cb-steps li em { color: rgba(17, 17, 17, 0.55) !important; }
.panel[data-layout="cinebus"] .cb-facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; background: #ecebe8; padding: 20px 4px !important; margin: 4px 0 18px !important; }
.panel[data-layout="cinebus"] .cb-facts > div { border: 0 !important; background: none !important; padding: 0 16px !important; }
.panel[data-layout="cinebus"] .cb-lead { font-weight: 400 !important; }
@media (max-width: 560px) {
  .panel[data-layout="cinebus"] .cb-steps li > div { grid-template-columns: 1fr; }
  .panel[data-layout="cinebus"] .cb-steps li strong { grid-row: auto; }
}

/* No horizontal lines between sections; space alone separates them */
.panel[data-layout] :is(.irr-ch, .cb-sec, .ms-sec, .stop, .case-awards, .irr-report) { border-top: 0 !important; border-bottom: 0 !important; }
.panel[data-layout] hr { display: none !important; }

/* MySónar, simpler: no striped bars, the problems as a plain list, steps as two plain columns,
   and the results as yellow bars with their text inside */
.panel[data-layout="mysonar"] .ms-hero::before, .panel[data-layout="mysonar"] .ms-steps::before, .panel[data-layout="mysonar"] .ms-step-n { display: none !important; }
.panel[data-layout="mysonar"] .ms-hero { padding-top: 12px !important; }
.panel[data-layout="mysonar"] .ms-cards { display: grid !important; gap: 14px !important; padding: 0 !important; margin: 0 0 18px !important; list-style: none; }
.panel[data-layout="mysonar"] .ms-card { border: 0 !important; background: none !important; padding: 0 !important; border-radius: 0 !important; display: grid !important; grid-template-columns: 9.5em 1fr; column-gap: 20px; }
.panel[data-layout="mysonar"] .ms-card strong { grid-row: span 2; font-family: var(--body) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 600 !important; }
.panel[data-layout="mysonar"] .ms-card-foot, .panel[data-layout="mysonar"] .ms-ico { display: none !important; }
.panel[data-layout="mysonar"] .ms-steps { padding: 0 !important; margin: 24px 0 !important; gap: 0 !important; }
.panel[data-layout="mysonar"] .ms-steps li { display: block !important; border: 0 !important; background: none !important; padding: 0 !important; margin: 0 0 16px !important; border-radius: 0 !important; }
.panel[data-layout="mysonar"] .ms-steps li > div { display: grid; grid-template-columns: 9.5em 1fr; column-gap: 20px; }
.panel[data-layout="mysonar"] .ms-stats { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin: 0 0 14px !important; }
.panel[data-layout="mysonar"] .ms-stats > div { display: flex !important; align-items: baseline; gap: 10px; background: #ffc20e !important; border: 0 !important; border-radius: 0 !important; padding: 8px 12px !important; }
.panel[data-layout="mysonar"] .ms-stats dt { font-family: var(--body) !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; }
.panel[data-layout="mysonar"] .ms-stats dd { margin: 0 !important; }
.panel[data-layout="mysonar"] .ms-models { background: none !important; padding: 0 !important; border-radius: 0 !important; gap: 8px !important; }
.panel[data-layout="mysonar"] .ms-bar { display: block !important; width: var(--v); background: #ffc20e; padding: 8px 12px; }
@media (max-width: 560px) {
  .panel[data-layout="mysonar"] :is(.ms-card, .ms-steps li > div) { grid-template-columns: 1fr; }
}
.panel[data-layout="mysonar"] .panel-body .ms-cards .ms-card { border: 0 !important; background: transparent !important; }
.panel[data-layout="mysonar"] .panel-body .ms-cards .ms-card strong { font-family: var(--body) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 600 !important; line-height: 1.7 !important; }

/* Clear step from the opening (origin + tags) into the project content */
.panel[data-layout] .panel-body .p-intro, .panel .panel-body .p-intro { margin-bottom: 56px !important; }
.panel[data-layout="irrigation"] .panel-body .p-intro { margin-top: 22px !important; }
.panel[data-layout="mysonar"] .ms-hero { align-items: flex-start !important; text-align: left !important; padding-top: 0 !important; }
/* Centred typed mark between the opening and the content */
.panel[data-layout] .panel-body .p-intro, .panel .panel-body .p-intro { margin-bottom: 30px !important; }
.panel .panel-body .p-intro::after { content: "· · ·"; justify-self: center; margin-top: 26px; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 18px; font-weight: 500; letter-spacing: .3em; line-height: 1; color: #111; }

/* Text runs the full width of the subpage, whatever its size */
.panel .panel-body :is(p, h1, h2, h3, h4, li, dd, dt, blockquote, figcaption, section, header, ul, ol, dl, article),
.panel[data-layout] .panel-body :is(p, h1, h2, h3, h4, li, dd, dt, blockquote, figcaption, section, header, ul, ol, dl, article) { max-width: none !important; }
.panel .panel-body .p-intro p.p-origin, .panel[data-layout] .panel-body .p-intro p.p-origin { max-width: none !important; }
.panel[data-layout="mysonar"] .ms-hero > * { max-width: none !important; }
/* Smart irrigation: text and images side by side (irrigation.css stacks them on narrow windows) */
/* MySónar results in rounded yellow boxes */
.panel[data-layout="mysonar"] .ms-stats > div, .panel[data-layout="mysonar"] .ms-bar { border-radius: 12px !important; }
/* Section titles: bigger, grey and bolder */
.panel[data-layout] .panel-body :is(.irr-title, .cb-title, .ms-title, .case-title, .irr-chh h3, .cb-sec h3, .ms-sec h3, .stop-title, .case-awards h3),
.panel .panel-body :is(.case-title, .case-awards h3) { font-size: 19px !important; font-weight: 700 !important; color: #6b6b6b !important; }
/* Section titles in a Swiss grotesk: big, bold, tight, sentence case, grey (after the Brut reference) */
.panel[data-layout] .panel-body :is(.irr-title, .cb-title, .ms-title, .case-title, .irr-chh h3, .cb-sec h3, .ms-sec h3, .stop-title, .case-awards h3),
.panel .panel-body :is(.case-title, .case-awards h3) {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important; line-height: 1 !important; letter-spacing: -0.035em !important;
  text-transform: none !important; color: #6b6b6b !important; }
.panel[data-layout] :is(.irr-chh h3, .cb-sec h3, .ms-sec h3, .stop-title, .case-awards h3)::after { display: none !important; }
/* Section titles black and smaller; the opening line above the introduction big and light grey, like the reference */
.panel[data-layout] .panel-body :is(.irr-chh h3, .cb-sec h3, .ms-sec h3, .stop-title, .case-awards h3),
.panel .panel-body .case-awards h3 { font-size: clamp(22px, 2.2vw, 26px) !important; color: #111 !important; }
.panel[data-layout] .panel-body :is(.cb-title, .ms-title, .case-title, .irr-cover .irr-chh h3),
.panel .panel-body .case-title { font-size: clamp(34px, 4vw, 52px) !important; color: #d6d6d6 !important; }
/* CineBus result: the demo's options as a clean list, then the figures as rounded tiles */
.panel[data-layout="cinebus"] .cb-demo { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.panel[data-layout="cinebus"] .cb-demo li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #1111111f; }
.panel[data-layout="cinebus"] .cb-demo strong { font-weight: 600; font-size: 13px; color: #111; }
.panel[data-layout="cinebus"] .cb-demo span { font-size: 13px; line-height: 1.6; color: #111; }
.panel[data-layout="cinebus"] .cb-facts { background: none !important; padding: 0 !important; gap: 8px !important; margin: 0 !important; }
.panel[data-layout="cinebus"] .cb-facts > div { background: #ecebe8 !important; border-radius: 12px !important; padding: 16px !important; border: 0 !important; }
.panel[data-layout="cinebus"] .cb-facts > div + div { border-left: 0 !important; }
@media (max-width: 520px) { .panel[data-layout="cinebus"] .cb-demo { grid-template-columns: 1fr; } }
.panel[data-layout="cinebus"] .cb-demo li { align-content: start; }
.panel[data-layout="cinebus"] .panel-body .cb-facts dt { font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 700 !important; font-size: 26px !important; letter-spacing: -0.03em !important; text-transform: none !important; line-height: 1.1 !important; color: #111 !important; }
.panel .stop-label::before, .panel[data-layout] .stop-label::before { display: none !important; }
/* CineBus result, simplest: options as plain label/text rows, figures as plain numbers */
.panel[data-layout="cinebus"] .cb-demo { grid-template-columns: 1fr !important; gap: 10px !important; }
.panel[data-layout="cinebus"] .cb-demo li { grid-template-columns: 9.5em 1fr; gap: 16px; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; }
.panel[data-layout="cinebus"] .cb-facts > div { background: none !important; padding: 0 !important; border-radius: 0 !important; }
/* A full stop in the project's colour closes each opening line */
.panel .panel-body :is(.irr-cover .irr-chh h3, .cb-title, .ms-title, .case-title)::after {
  content: "." !important; display: inline !important; width: auto !important; margin: 0 !important; border: 0 !important; color: var(--p-dot, #111); }
.panel[data-layout="irrigation"] { --p-dot: #3e917e; }
.panel[data-layout="cinebus"] { --p-dot: #c8102e; }
.panel[data-layout="mysonar"] { --p-dot: #ffc20e; }
.panel[data-layout="cupra"] { --p-dot: #c8783a; }
/* Mar i Muntanya: the central screen text beside a vertical prototype of the screen */
.panel .stop-screen { display: grid !important; grid-template-columns: minmax(0, 1fr) 190px; column-gap: 24px; row-gap: 14px; align-items: start; }
.panel .stop-screen > :not(.stop-screen-text):not(.screen-proto) { grid-column: 1 / -1; }
.panel .stop-screen-text { display: grid; gap: 8px; }
.panel .stop-screen-text p { margin: 0; }
.panel .screen-proto { grid-column: 2; grid-row: 1 / span 3; margin: 0; width: 190px; box-sizing: border-box; display: grid; gap: 3px; align-content: start; border-radius: 22px; background: #111; padding: 22px 7px; box-shadow: 0 14px 30px #1111112a; }
.panel .screen-proto img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
@media (max-width: 520px) { .panel .stop-screen { grid-template-columns: 1fr; } .panel .screen-proto { grid-column: 1; justify-self: center; } }

/* Mar i Muntanya road: an asphalt lane with a dashed centre line; each level a copper milestone with its code */
.panel[data-layout="cupra"] .road { padding-left: 52px !important; }
.panel[data-layout="cupra"] .road::before { left: 13px !important; width: 12px !important; border-radius: 6px !important;
  background: repeating-linear-gradient(#fff 0 7px, transparent 7px 15px) center / 2px 100% no-repeat, linear-gradient(#cfcfcf, #6e6e6e 12%, #6e6e6e 88%, #cfcfcf) !important; }
.panel[data-layout="cupra"] .stop::before { content: attr(data-code) !important; left: -52px !important; top: -2px !important; width: 38px !important; height: 38px !important;
  display: grid !important; place-items: center; border-radius: 50% !important; background: #c8783a !important; border: 4px solid #f5f5f4 !important; box-sizing: border-box;
  color: #fff; font: 700 12px/1 "Inter Tight", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.02em; box-shadow: 0 0 0 1px #c8783a55; }
@media (max-width: 520px) { .panel[data-layout="cupra"] .road { padding-left: 44px !important; } .panel[data-layout="cupra"] .road::before { left: 11px !important; } .panel[data-layout="cupra"] .stop::before { left: -44px !important; width: 34px !important; height: 34px !important; } }

/* The name in the same grotesk as the section titles */
.brand h1#name { font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 700 !important; letter-spacing: -0.04em !important; }
.panel .stop-screen > .stop-frames { display: none !important; }
.panel .stop-screen > .p-docs { grid-column: 1 !important; grid-row: 2; }
/* Shorter screen prototype, with room above it */
.panel .stop-screen { margin-top: 28px !important; }
.panel .stop-screen { grid-template-columns: minmax(0, 1fr) 160px !important; }
.panel .screen-proto { width: 160px !important; padding: 12px 6px !important; border-radius: 16px !important; gap: 2px !important; }
.panel .screen-proto img { aspect-ratio: 16 / 9 !important; }
/* Simpler road: one thin grey line, small plain dots */
.panel[data-layout="cupra"] .road { padding-left: 30px !important; }
.panel[data-layout="cupra"] .road::before { left: 5px !important; width: 1px !important; border-radius: 0 !important; background: #11111140 !important; }
.panel[data-layout="cupra"] .stop::before { content: "" !important; left: -30px !important; top: 9px !important; width: 11px !important; height: 11px !important;
  background: #f5f5f4 !important; border: 1.5px solid #111 !important; box-shadow: none !important; }
@media (max-width: 520px) { .panel[data-layout="cupra"] .road { padding-left: 26px !important; } .panel[data-layout="cupra"] .road::before { left: 5px !important; } .panel[data-layout="cupra"] .stop::before { left: -26px !important; width: 11px !important; height: 11px !important; } }

/* Project list: each number big and bold in the title grotesk, sitting on the box's bottom edge so the line cuts it */
.trail .sign { grid-template-columns: 34px 1fr !important; }
.trail .sign .sign-num { align-self: end; justify-self: start; font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important; font-size: 46px !important; line-height: 0.72 !important; letter-spacing: -0.06em !important; color: #111 !important;
  transform: translateY(7px); transition: transform 0.25s ease; }
.sign.has-banner:hover .sign-num, .sign.has-banner:focus-visible .sign-num { color: #fff !important; transform: translateY(5px); }
/* Smart irrigation, study of the region: big figures, each with a thin bar showing its share */
.panel[data-layout="irrigation"] .irr-nums { max-width: none !important; gap: 28px !important; margin-top: 22px; }
.panel[data-layout="irrigation"] .irr-num { border-left: 0 !important; padding-left: 0 !important; gap: 6px !important; }
.panel[data-layout="irrigation"] .panel-body .irr-num b { font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(34px, 4vw, 48px) !important; letter-spacing: -0.04em !important; line-height: 1 !important; text-transform: none !important; color: #111 !important; }
.panel[data-layout="irrigation"] .irr-num span { font-size: 13px !important; color: #111 !important; }
.panel[data-layout="irrigation"] .irr-num i { display: block; height: 4px; border-radius: 2px; margin-top: 4px;
  background: linear-gradient(90deg, #3e917e var(--v), #1111111a var(--v)); }
.panel[data-layout="irrigation"] .irr-num b { order: 0; } .panel[data-layout="irrigation"] .irr-num i { order: 1; margin: 2px 0 4px !important; } .panel[data-layout="irrigation"] .irr-num span { order: 2; }

/* The arrow that hides the project list: like the close cross, just a soft white mark, half transparent, no box */
.trail-fold { border: 0 !important; background: none !important; backdrop-filter: none !important; border-radius: 0 !important;
  color: #fff !important; opacity: 0.6; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
  transition: transform 0.35s ease, opacity 0.2s ease !important; }
.trail-fold svg { width: 18px !important; height: 18px !important; stroke-width: 2 !important; }
.trail-fold:hover, .trail-fold:focus-visible { opacity: 1; color: #fff !important; }
/* When a box opens onto its banner, its number sits whole in the middle of the taller box */
.sign.has-banner:hover .sign-num, .sign.has-banner:focus-visible .sign-num { align-self: center !important; line-height: 1 !important; transform: none !important; }
.trail .sign .sign-name { font-weight: 600 !important; }
.trail .sign, .trail .sign:hover, .trail .sign[aria-current="true"] { border-color: transparent !important; }

/* MySónar results, two looks: the study as three big figures in a row; the models as a yellow bar chart on a light track */
.panel[data-layout="mysonar"] .ms-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; margin: 6px 0 36px !important; }
.panel[data-layout="mysonar"] .ms-stats > div { display: grid !important; gap: 6px; background: none !important; border-radius: 0 !important; padding: 0 0 0 14px !important; border-left: 4px solid #ffc20e !important; }
.panel[data-layout="mysonar"] .panel-body .ms-stats dt { font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(34px, 4vw, 48px) !important; letter-spacing: -0.04em !important; line-height: 1 !important; color: #111 !important; }
.panel[data-layout="mysonar"] .ms-stats dd { font-size: 13px; line-height: 1.5; }
.panel[data-layout="mysonar"] .ms-models { display: grid !important; gap: 12px !important; }
.panel[data-layout="mysonar"] .ms-models-t { margin: 0 0 4px !important; font-weight: 600; }
.panel[data-layout="mysonar"] .ms-bar { position: relative; width: 100% !important; background: #11111110 !important; border-radius: 999px !important; padding: 0 !important; height: 34px; }
.panel[data-layout="mysonar"] .ms-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: #ffc20e; border-radius: 999px; }
.panel[data-layout="mysonar"] .ms-bar span { position: relative; display: flex; align-items: center; height: 100%; padding: 0 16px; font-size: 13px; font-weight: 600; color: #111; }
@media (max-width: 520px) { .panel[data-layout="mysonar"] .ms-stats { grid-template-columns: 1fr !important; } }
.panel[data-layout="mysonar"] .ms-models-t { font-weight: 600 !important; }
/* MySónar figures like Smart irrigation's: big number, a thin bar (filled to the share when it is a percentage), the label */
.panel[data-layout="mysonar"] .ms-stats > div { border-left: 0 !important; padding: 0 !important; gap: 6px !important; }
.panel[data-layout="mysonar"] .ms-stats i { display: block; height: 4px; border-radius: 2px; margin: 2px 0 4px; background: linear-gradient(90deg, #ffc20e var(--v), #1111111a var(--v)); }
.panel .panel-body .p-intro::after { content: none !important; display: none !important; }

/* Section titles (the black ones): a bit bigger, and running off the page's left edge so the edge cuts them */
.panel { overflow-x: hidden; }
.panel[data-layout] .panel-body :is(.irr-chh h3, .cb-sec h3, .ms-sec h3, .stop-title, .case-awards h3),
.panel .panel-body .case-awards h3 { font-size: clamp(28px, 3vw, 36px) !important; margin-left: -2.05em !important; }
.panel[data-layout] .panel-body .irr-cover .irr-chh h3 { margin-left: 0 !important; }
@media (max-width: 720px) { .panel[data-layout] .panel-body :is(.irr-chh h3, .cb-sec h3, .ms-sec h3, .stop-title, .case-awards h3), .panel .panel-body .case-awards h3 { margin-left: -0.8em !important; } }
/* The cut is the same on every page: past each layout's own side padding, then about a quarter of a letter */
.panel[data-layout] .panel-body :is(.irr-chh h3, .stop-title) { margin-left: calc(-64px - 0.28em) !important; }
.panel[data-layout] .panel-body :is(.cb-sec h3, .ms-sec h3, .case-awards h3), .panel .panel-body .case-awards h3 { margin-left: calc(-33px - 0.28em) !important; }
.panel[data-layout] .panel-body .irr-cover .irr-chh h3 { margin-left: 0 !important; }
@media (max-width: 720px) { .panel[data-layout] .panel-body :is(.irr-chh h3, .stop-title, .cb-sec h3, .ms-sec h3, .case-awards h3), .panel .panel-body .case-awards h3 { margin-left: -0.8em !important; } }
.panel .p-building { min-height: 60vh; display: grid; place-items: center start; padding: 0 8px; }
.panel .panel-body .p-building .case-title::after { content: none !important; }
/* Section titles back in line with the text (no cut); the name in the same light grey as the big opening lines */
.panel[data-layout] .panel-body :is(.irr-chh h3, .stop-title, .cb-sec h3, .ms-sec h3, .case-awards h3), .panel .panel-body .case-awards h3 { margin-left: 0 !important; }
.brand h1#name { color: #d6d6d6 !important; }
/* The photo button: bigger, no border */
.about-btn { width: 84px !important; height: 84px !important; border: 0 !important; }
@media (max-width: 720px) { .about-btn { width: 64px !important; height: 64px !important; } }
/* Copy email: a small soft icon instead of the text button */
.copy-btn { display: inline-grid !important; place-items: center; width: 28px !important; height: 28px !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: none !important; color: #11111180 !important; cursor: pointer; transition: color .2s ease, background .2s ease; }
.copy-btn:hover, .copy-btn:focus-visible { color: #111 !important; background: #1111110d !important; }
.copy-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* GitHub and LinkedIn as soft icons in the email row, like the copy icon */
.contact-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.contact-row .email { margin-right: 6px; }
.social-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #11111180 !important; text-decoration: none !important; border: 0 !important; transition: color .2s ease, background .2s ease; }
.social-ico:hover, .social-ico:focus-visible { color: #111 !important; background: #1111110d; }
.social-ico svg { width: 15px; height: 15px; fill: currentColor; }
/* "About me" floats as a small line of text right under the photo button */
.about-label { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 112px); right: var(--about-right, 28px); width: 84px; text-align: center; pointer-events: none;
  font-size: 12px; font-weight: 600; color: #111; letter-spacing: .01em; }
@media (max-width: 720px) { .about-label { top: calc(env(safe-area-inset-top, 0px) + 84px); width: 64px; right: 16px; font-size: 11px; } }
/* In the About panel, GitHub and LinkedIn sit at the right end of the email row */
.contact-row .copy-btn + .social-ico { margin-left: auto; }
/* About me drops down under the photo button as floating text; the old label is gone */
.about-label { display: none !important; }
.about-pop { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 116px); right: 28px; width: min(380px, calc(100vw - 32px));
  pointer-events: auto; padding: 14px 16px; border-radius: 14px; background: rgba(251, 251, 250, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; line-height: 1.65; color: #111; animation: about-in .25s ease; }
.about-pop[hidden] { display: none; }
.about-pop h2 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.about-pop p { margin: 0 0 8px; }
.about-pop .contact-row { margin-top: 4px; }
.about-pop .email { font-weight: 600; }
@keyframes about-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .about-pop { top: calc(env(safe-area-inset-top, 0px) + 88px); right: 16px; } }
@media (prefers-reduced-motion: reduce) { .about-pop { animation: none; } }
/* About me floats straight on the page: no box, tighter */
.about-pop { padding: 0 !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important;
  width: min(300px, calc(100vw - 32px)) !important; line-height: 1.5 !important; text-align: right; }
.about-pop p { margin: 0 0 6px !important; }
.about-pop .contact-row { justify-content: flex-end; margin-top: 2px !important; }
.about-pop .contact-row .copy-btn + .social-ico { margin-left: 0 !important; }
/* About me as one compact block: the two lines run together, the email smaller */
.about-pop p { display: inline; margin: 0 !important; }
.about-pop p + p::before { content: " "; }
.about-pop .contact-row { margin-top: 6px !important; }
.about-pop .email { font-size: 11.5px; }
/* Tags first, in grey */
.panel .panel-body .p-tags span, .panel[data-layout] .panel-body .p-tags span { color: #8a8a8a !important; border-color: #11111126 !important; }

/* The name in lowercase, with the first letter of each word bigger */
.brand h1#name { text-transform: lowercase; }
.brand h1#name .ini { font-size: 1.4em; line-height: 0; }
.panel[data-layout="irrigation"] .irr-study { grid-template-columns: 1fr; }
.panel[data-layout="irrigation"] .irr-cover > .irr-chh { grid-column: 1 / -1; }