/* ═══════════════════════════════════════════════════════════
   PAPIK · RL-SYSTEM
   Shared UI primitives extracted from the home page so they
   can be reused across the site (pressupost, projectes, articles…).
   Imported AFTER tokens.css, base.css, components.css.
═══════════════════════════════════════════════════════════ */
/* PAPIK home — Relats-inspired structure with PAPIK branding */
    body.is-home { background: #fff; overflow-x: hidden; }
    body.is-home main { display: block; }

    /* ============ HEADER (floating · solid corporate green · minimalist) ============ */
    .rl-header {
      position: fixed;
      top: 16px;
      left: 24px;
      right: 24px;
      z-index: 1000;
      height: 64px;
      background: var(--green);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      box-shadow:
        0 12px 36px -8px rgba(0,40,25,0.28),
        0 2px 6px rgba(0,40,25,0.05);
      /* Default (return path): slow, progressive fade back to dark */
      transition:
        top 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.7s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.7s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    }
    /* Entry to contrast mode: faster, reactive */
    .rl-header.on-similar {
      transition:
        top 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.25s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .rl-header.is-scrolled {
      top: 12px;
      background: var(--green);
      box-shadow:
        0 18px 48px -8px rgba(0,40,25,0.42),
        0 2px 6px rgba(0,40,25,0.08);
    }

    /* Contrast mode: triggered by JS when header overlaps similar-color elements.
       Always keeps the corporate dark green so the bar stays on-brand. */
    .rl-header.on-similar {
      background: var(--green);
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow:
        0 14px 38px -10px rgba(0,40,25,0.42),
        0 2px 6px rgba(0,40,25,0.08);
    }
    .rl-header.on-similar.is-scrolled {
      background: var(--green);
    }
    /* Smooth fade for the SVG fill + text colors when toggling */
    .rl-header__logo svg path,
    .rl-header__logo svg polygon {
      transition: fill 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .rl-header__container {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 24px;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
    }

    /* Logo (left) */
    .rl-header__logo {
      display: inline-flex;
      align-items: center;
      height: 100%;
      justify-self: start;
      transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .rl-header__logo:hover { transform: scale(1.03); }
    .rl-header__logo svg { height: 22px; width: auto; display: block; }
    .rl-header__logo svg path,
    .rl-header__logo svg polygon { fill: #fff; }

    /* Menu (center) */
    .rl-header__menu { justify-self: center; }
    .rl-header__menu ul {
      display: flex; gap: 32px; align-items: center;
      list-style: none; margin: 0; padding: 0;
    }
    .rl-header__menu a {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 8px 0;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: #fff;
      transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .rl-header__menu a::after,
    .rl-header__menu-trigger::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 4px;
      transform: translateX(-50%);
      width: 0;
      height: 1px;
      background: rgba(255, 255, 255, 0.9);
      transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .rl-header__menu a:hover { color: #fff; }
    .rl-header__menu a:hover::after,
    .rl-header__menu-trigger:hover::after {
      width: 100%;
    }

    /* Navegació del header amb la mateixa tipografia que la barra .rl-trust__item
       (12px · medium · uppercase · 0.04em) però en BLANC PUR (header sobre verd). */
    .rl-header__menu > ul > li > a,
    .rl-header .rl-header__menu-trigger {
      text-transform: uppercase;
      font-size: 12px;
      font-weight: var(--fw-medium);
      letter-spacing: 0.04em;
      color: #fff;
    }

    /* ─── Mega menu (Serveis dropdown, 4 columns × 4 apartats) ─── */
    .rl-header__has-mega { position: static; }
    .rl-header__menu-trigger {
      position: relative;
      display: inline-flex; align-items: center; gap: 6px;
      background: transparent; border: 0; padding: 8px 0; margin: 0;
      /* Neutralize the global button rule (components.css) that forces
         height: 42px + border-radius: 21px on every <button>. */
      height: auto;
      border-radius: 0;
      font-family: inherit;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: #fff;
      cursor: pointer;
      outline: none;
      box-shadow: none;
      transform: none;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }
    /* Nullify the global button:hover (components.css) for this header trigger */
    .rl-header__menu-trigger:hover,
    .rl-header__menu-trigger:focus,
    .rl-header__menu-trigger:focus-visible,
    .rl-header__menu-trigger:active,
    .rl-header__menu-trigger[aria-expanded="true"] {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      transform: none !important;
      outline: none !important;
    }
    .rl-header__menu-trigger:hover { color: #fff; }
    .rl-header__menu-chevron {
      transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
      flex-shrink: 0;
      opacity: 1;
    }
    .rl-header__menu-trigger[aria-expanded="true"] .rl-header__menu-chevron {
      transform: rotate(180deg);
      opacity: 1;
    }

    .rl-mega {
      position: absolute;
      top: calc(100% + 8px);
      left: 0; right: 0;
      background: #fff;
      border: 1px solid rgba(0, 40, 25, 0.08);
      border-radius: 16px;
      box-shadow: 0 24px 48px -8px rgba(0, 40, 25, 0.18);
      z-index: 999;
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition:
        opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .rl-mega[hidden] { display: none; }
    .rl-mega.is-open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .rl-mega__inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 40px 32px 48px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      text-align: left;
    }
    .rl-mega__col {
      text-align: left;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    /* Override the inherited dark-glass-header link color INSIDE the mega panel */
    .rl-mega .rl-mega__col-title {
      display: block;
      width: 100%;
      text-align: left;
      padding: 0 0 14px;
      margin: 0 0 14px;
      font-size: 18px;
      font-weight: 500;
      color: var(--green);
      letter-spacing: -0.005em;
      border-bottom: 1px solid rgba(0, 40, 25, 0.12);
      transition: color var(--t-base);
    }
    .rl-mega .rl-mega__col-title:hover { color: var(--green); }
    /* Suppress the white underline animation inherited from .rl-header__menu a::after */
    .rl-mega .rl-mega__col-title::after,
    .rl-mega .rl-mega__col li a::after {
      display: none;
    }
    .rl-mega__col ul {
      list-style: none; margin: 0; padding: 0;
      width: 100%;
      text-align: left;
      display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    }
    .rl-mega__col li {
      width: 100%;
      text-align: left;
    }
    .rl-mega .rl-mega__col li a {
      display: inline-flex;
      text-align: left;
      padding: 0;
      font-size: 13.5px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.4;
      color: rgba(0, 40, 25, 0.72);
      transition: color var(--t-base), transform var(--t-base);
    }
    .rl-mega .rl-mega__col li a:hover {
      color: var(--green);
      transform: translateX(2px);
    }

    @media (max-width: 980px) {
      .rl-mega__inner { grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 32px 24px; }
    }
    @media (max-width: 600px) {
      .rl-mega__inner { grid-template-columns: 1fr; gap: 24px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .rl-mega, .rl-header__menu-chevron, .rl-mega__col li a { transition: none; }
    }

    /* Right side · pill CTA */
    .rl-header__right {
      display: flex; align-items: center; gap: 12px;
      justify-self: end;
    }
    .rl-header__cta {
      display: inline-flex;
      align-items: center;
      padding: 6px 22px;
      border: 0;
      background: #fff;
      color: var(--green) !important;
      font-size: 12px;
      font-weight: var(--fw-medium);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: 10px;
      text-decoration: none;
      transition:
        transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.25s cubic-bezier(0.25, 1, 0.5, 1),
        color 0.25s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .rl-header__cta:hover {
      transform: translateY(-1px);
      background: var(--green-accent, #d9e4e0);
      color: var(--green) !important;
      box-shadow: 0 8px 20px -6px rgba(0, 40, 25, 0.5);
    }
    .rl-header__cta:active { transform: translateY(0); }

    /* Floating header responsive */
    @media (max-width: 980px) {
      .rl-header { left: 12px; right: 12px; }
      .rl-header__menu ul { gap: 22px; }
    }
    @media (max-width: 720px) {
      .rl-header { top: 12px; left: 12px; right: 12px; height: 56px; border-radius: 14px; }
      .rl-header__menu { display: none; }
      .rl-header__container { grid-template-columns: 1fr auto; }
    }
    @media (prefers-reduced-motion: reduce) {
      .rl-header,
      .rl-header__logo,
      .rl-header__menu a,
      .rl-header__menu a::after,
      .rl-header__menu-trigger,
      .rl-header__menu-trigger::after,
      .rl-header__menu-chevron,
      .rl-header__cta {
        transition: none;
      }
    }

    /* ============ HERO ============ */
    .rl-hero {
      position: relative;
      height: 100vh; min-height: 640px;
      background: var(--green-dark);
      overflow: hidden;
    }
    .rl-hero__bg {
      position: absolute; inset: 0;
      overflow: hidden;
      /* El zoom Ken Burns escala des de DALT: el marge superior de la imatge
         queda sempre ancorat al top (mai deriva avall). */
      transform-origin: center top;
    }
    /* Real <img> media · former CSS-background containers converted to <img>
       for alt text / image SEO, lazy-loading and responsive decode. The image
       fills its container exactly like the previous background did. */
    /* Descendant (not >) so it still matches after <img> was wrapped in <picture>
       for WebP. <picture> is display:contents (below) so it adds no box. */
    .rl-hero__bg img,
    .rl-featured__img img,
    .rl-combo__bg img,
    .rl-cta__bg img,
    .rl-featured__card-visual img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      display: block;
    }
    /* Foto pegada arriba: mostramos el borde superior de la imagen (cel + carener). */
    .rl-hero__bg img { object-position: center top; }
    /* K-Argentona (featured hero · massa cel a dalt): vista ancorada a baix, pujada un 10%. */
    .rl-featured__img img[src*="projecte-k-argentona/hero"] { object-position: center 90%; }
    @media (max-width: 600px) {
      .rl-hero__bg img { object-position: center top; }
    }
    .rl-featured__img, .rl-combo__bg, .rl-cta__bg { position: relative; overflow: hidden; }
    /* Contrast scrim · authorized black (#000000) only. Ramps from ~28% so the
       full text block (title + sub + CTAs) always clears WCAG over any photo. */
    .rl-hero__bg::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0) 26%, rgba(0,0,0,0.30) 58%, rgba(0,0,0,0.68) 100%);
    }
    .rl-hero__bottomleft {
      position: absolute; bottom: 64px; left: 56px; z-index: 2;
      max-width: 640px; color: #fff;
      text-shadow: 0 1px 24px rgba(0,0,0,0.28);
    }
    .rl-hero__title {
      font-size: clamp(48px, 6.4vw, 88px);
      font-weight: var(--fw-light);
      line-height: 1.02;
      letter-spacing: -0.02em;
      color: #fff;
      margin-bottom: 32px;
      text-wrap: balance; /* responsive, language-robust wrapping (no hardcoded <br>) */
    }
    .rl-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
    .rl-hero__btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 26px;
      background: #fff; color: var(--green) !important;
      border-radius: 10px;
      font-size: 14px; font-weight: var(--fw-medium);
      transition: background var(--t-base), transform var(--t-base);
    }
    .rl-hero__btn:hover { background: #d9e4e0; transform: translateY(-2px); }
    /* Secondary CTA · dark frosted pill (palette green) so white text stays
       legible over any part of the hero photo. */
    /* Secondary CTA · solid corporate green (authorized palette only: #002819) */
    .rl-hero__btn--blur {
      background: var(--green); color: #fff !important;
      border: 1px solid transparent;
    }
    .rl-hero__btn--blur:hover { background: var(--green); transform: translateY(-2px); box-shadow: var(--sh-btn-hover); }
    .rl-hero__topright { position: absolute; top: 96px; right: 56px; z-index: 2; }
    .rl-hero__notch {
      display: flex; align-items: center; gap: 14px;
      background: #fff;
      padding: 14px 22px 14px 14px;
      border-radius: 14px;
      box-shadow: 0 12px 36px rgba(0,40,25,0.25);
      max-width: 280px;
      transition: transform var(--t-base);
      text-decoration: none;
    }
    .rl-hero__notch:hover { transform: translateY(-3px); }
    .rl-hero__notch-img {
      width: 56px; height: 56px; border-radius: var(--r-xl);
      background: var(--accent-soft) center/cover no-repeat;
      flex-shrink: 0;
    }
    .rl-hero__notch-tag {
      display: inline-block;
      font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
      color: var(--green); font-weight: var(--fw-medium);
      margin-bottom: 4px;
    }
    .rl-hero__notch-title {
      font-size: 13px; color: var(--text);
      font-weight: var(--fw-medium); line-height: 1.3;
      margin-bottom: 6px;
    }
    .rl-hero__notch-link {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; color: var(--green);
      font-weight: var(--fw-medium);
    }

    /* ============ HERO-BLOCK (subsection contained hero, single column) ============ */
    .rl-hero-block { background: #fff; padding: 8px 56px 0; }
    .rl-hero-block__container { max-width: 1440px; margin: 0 auto; }
    .rl-hero-block__card {
      position: relative;
      border-radius: var(--r-xl);
      padding: 56px;
      min-height: calc(100vh - 128px);
      overflow: hidden;
      display: flex; flex-direction: column; justify-content: center;
      background: var(--green-dark);
      color: #fff;
    }
    .rl-hero-block__bg {
      position: absolute; inset: 0; z-index: 0;
      background-position: center 25%;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .rl-hero-block__bg::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
      pointer-events: none;
    }
    .rl-hero-block__content { position: relative; z-index: 1; max-width: 720px; }
    .rl-hero-block__eyebrow {font-weight: var(--fw-regular);
      display: inline-block;
      font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
      color: #d9e4e0;
      margin-bottom: 20px;
    }
    .rl-hero-block__title {
      font-size: clamp(36px, 4.4vw, 60px);
      font-weight: var(--fw-light);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: #fff;
      margin-bottom: 22px;
    }
    .rl-hero-block__subtitle {
      font-size: 17px; line-height: 1.5;
      color: #d9e4e0;
      max-width: 560px;
      margin-bottom: 32px;
    }
    .rl-hero-block__actions { display: flex; gap: 12px; flex-wrap: wrap; }

    /* ============ ANIMATION (jumbo typography) ============ */
    /* Animated gradient backdrop · the 2 corporate greens. A rounded arc (dome) of
       light mint rises from the bottom of the dark-green band, so the section reads
       dark at the top and curves to light at the bottom, dissolving into the light
       section that follows. The dome lives in the bottom padding, BELOW the white
       headline, so the type always sits on solid dark green. The arc "breathes"
       (its radius gently expands/contracts) via an animated @property
       (reduced-motion safe). */
    @property --rl-arc {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 40%;
    }
    .rl-anim {
      position: relative;
      background: var(--green);
      padding: 160px 56px;
      overflow: hidden;
    }
    @keyframes rlAnimBreathe {
      from { --rl-arc: 36%; }
      to   { --rl-arc: 46%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .rl-anim { animation: none; }
    }
    .rl-anim__container {
      position: relative; z-index: 2;
      max-width: 1440px; margin: 0 auto;
    }
    .rl-anim__title {
      font-size: clamp(72px, 13vw, 200px);
      font-weight: 500;
      line-height: 1.04;
      letter-spacing: -0.045em;
      color: #fff;
    }
    .rl-anim__title > div { margin: 0; }
    .rl-anim__title > div { display: block; }
    .rl-anim__line--right { text-align: right; }
    .rl-anim__title strong {
      font-weight: 500;
      color: var(--accent);
    }

    /* ============ SECTORS ============ */
    .rl-sectors { background: #fff; padding: 120px 56px; }
    .rl-sectors__container { max-width: 1440px; margin: 0 auto; }
    .rl-sectors__label {
      font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
      color: #002819; margin-bottom: 48px;
      font-weight: var(--fw-regular);
    }
    .rl-sectors__list { list-style: none; padding: 0; margin: 0; }
    .rl-sectors__item { border-top: 1px solid var(--border); }
    .rl-sectors__item:last-child { border-bottom: 1px solid var(--border); }
    .rl-sectors__link {
      display: flex; justify-content: space-between; align-items: center;
      padding: 36px 0;
      text-decoration: none;
      transition: padding var(--t-base);
    }
    .rl-sectors__item:hover .rl-sectors__link { padding-left: 24px; }
    .rl-sectors__title {
      font-size: clamp(36px, 5vw, 72px);
      font-weight: var(--fw-light);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--text);
      transition: color var(--t-base);
    }
    .rl-sectors__item:hover .rl-sectors__title { color: var(--green); }
    .rl-sectors__count {
      font-size: 15px; color: var(--muted);
      font-weight: var(--fw-regular);
      flex-shrink: 0; margin-left: 24px;
    }

    /* ============ FEATURED ============ */
    .rl-featured { background: radial-gradient(125% 120% at 78% 12%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 52%), radial-gradient(120% 120% at 12% 100%, rgba(0,40,25,0.12) 0%, rgba(0,40,25,0) 55%), #d9e4e0; padding: 120px 56px; }
    /* #projectes · mateix verd clar salvia, però amb el degradat REFLECTIT en vertical
       (espejat dalt-baix, "com passar un full") respecte de #garanties: a la junta
       horitzontal els dos degradats es reflecteixen i queden en harmonia. */
    #projectes.rl-featured { background: radial-gradient(125% 120% at 78% 88%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 52%), radial-gradient(120% 120% at 12% 0%, rgba(0,40,25,0.12) 0%, rgba(0,40,25,0) 55%), #d9e4e0; }
    .rl-featured__container { max-width: 1440px; margin: 0 auto; }
    .rl-featured__img {
      width: 100%; height: var(--hero-band-h);
      border-radius: var(--r-xl);
      background: url('../img/projects/projecte-k-llavaneres/hero.jpg') center/cover no-repeat;
    }
    .rl-featured__inner {
      /* Unified panel width · every rl-featured white-card shell shares ONE
         width + padding site-wide. Reference: home "porta dins" section.
         Do not override max-width/padding per page or per section — that is
         exactly what caused panels to diverge (1180 vs 1240 vs 1280). */
      max-width: 1180px; margin: -100px auto 0;
      background: #fff;
      border-radius: var(--r-xl);
      padding: clamp(40px, 4.4vw, 64px) clamp(28px, 3vw, 44px) clamp(48px, 5vw, 72px);
      box-shadow: 0 16px 48px rgba(0,40,25,0.08);
      position: relative; z-index: 2;
    }
    .rl-featured__title {
      font-size: clamp(28px, 3vw, 42px);
      font-weight: var(--fw-light);
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: var(--text);
      margin-bottom: 48px;
      max-width: 720px;
      text-wrap: balance;
    }
    .rl-featured__title strong { font-weight: var(--fw-medium); color: var(--green); }
    .rl-featured__title--center {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .rl-featured__cards {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
    }
    .rl-featured__card {
      display: block;
      background: #fff;
      border: 1px solid var(--border-soft);
      border-radius: var(--r-md);
      padding: 0; overflow: hidden;
      transition: transform var(--t-base) ease, border-color var(--t-base) ease, box-shadow var(--t-base) ease;
      text-decoration: none;
    }
    .rl-featured__card:hover {
      transform: translateY(-4px);
      border-color: transparent;
      box-shadow: var(--sh-card-hover-sm);
    }
    /* Keyboard focus · crisp brand-green ring that escapes the card's
       overflow:hidden (outline is not clipped) and meets AAA contrast.
       Shape change, not colour-only, per the accessibility commitment. */
    .rl-featured__card:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: 3px;
    }
    .rl-featured__card-visual {
      height: 100px;
      background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg-light) 100%);
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }

    /* Passivhaus certification badge — top-right label over certified project photos */
    .rl-cert-badge {
      position: absolute;
      top: 12px; right: 12px;
      display: inline-flex; align-items: center; justify-content: center;
      width: 46px; height: 46px;
      padding: 7px;
      background: #d9e4e0;
      border-radius: var(--r-md, 12px);
      box-shadow: 0 2px 10px rgba(0,40,25,0.16);
      z-index: 2;
    }
    .rl-cert-badge img { width: 100%; height: 100%; display: block; object-fit: contain; }
    @media (max-width: 600px) {
      .rl-cert-badge { width: 38px; height: 38px; padding: 6px; top: 10px; right: 10px; }
    }

    /* Year pill — top-left label (mirrors the Passivhaus badge), corporate green */
    .rl-year-badge, .rl-cat-badge {
      position: absolute;
      top: 12px; left: 12px;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 5px 11px;
      background: #002819;
      color: #fff;
      font-size: 12px; font-weight: var(--fw-medium); letter-spacing: 0.02em;
      line-height: 1;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,40,25,0.16);
      z-index: 2;
    }
    /* Category badge: uppercase label, mirroring the .blog-landing__kicker treatment */
    .rl-cat-badge { text-transform: uppercase; letter-spacing: 0.04em; }
    @media (max-width: 600px) {
      .rl-year-badge, .rl-cat-badge { top: 10px; left: 10px; padding: 4px 9px; font-size: 11px; }
    }
    .rl-featured__card-visual svg { width: 28px; height: 28px; color: var(--green); }
    .rl-featured__card-visual i { font-size: 28px; line-height: 1; color: var(--green); display: inline-flex; }

    /* Icon cards (no photo) get a single, coherent corporate-green field with a
       white icon. Palette-pure: #002819 base + a subtle mint bloom (#d9e4e0) and
       a soft black vignette for depth. Identical on every card — the icon is the
       only differentiator. Scoped with :has() so photo cards are untouched. */
    .rl-featured__card-visual:has(> svg),
    .rl-featured__card-visual:has(> i) {
      background:
        radial-gradient(125% 120% at 78% 12%, rgba(217,228,224,0.20) 0%, rgba(217,228,224,0) 52%),
        radial-gradient(120% 120% at 12% 100%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 55%),
        #002819;
    }
    .rl-featured__card-visual:has(> svg) svg,
    .rl-featured__card-visual:has(> i) i { color: #fff; }
    .rl-featured__card-body { padding: 16px 18px 20px; }
    .rl-featured__card-title {
      font-size: 13px; color: var(--text);
      font-weight: var(--fw-medium); line-height: 1.3;
    }

    /* ============ COMBO ============ */
    .rl-combo { background: #fff; padding: 120px 56px; }
    .rl-combo__container { max-width: 1440px; margin: 0 auto; }
    .rl-combo__row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
      margin-bottom: 24px;
    }
    .rl-combo__row:last-child { margin-bottom: 0; }
    .rl-combo__box {
      border-radius: var(--r-xl);
      padding: 48px;
      min-height: 480px;
      display: flex; flex-direction: column; justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    .rl-combo__box--dark { background: var(--green-dark); color: #fff; padding: 0; }
    .rl-combo__box--main { background: radial-gradient(125% 120% at 78% 12%, rgba(217,228,224,0.20) 0%, rgba(217,228,224,0) 52%), radial-gradient(120% 120% at 12% 100%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 55%), #002819; color: #fff; }
    .rl-combo__box--white { background: radial-gradient(125% 120% at 78% 12%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 52%), radial-gradient(120% 120% at 12% 100%, rgba(0,40,25,0.12) 0%, rgba(0,40,25,0) 55%), #d9e4e0; color: var(--text); }
    .rl-combo__box--image { padding: 0; background: #000; }

    /* ===== TEST · CARD FILLS flattened to solid corporate color (no gradient), SITE-WIDE =====
       Prova reversible: esborra aquest bloc sencer per recuperar els degradats radials
       originals. `background-image: none` treu NOMÉS les capes de degradat i manté el color
       base de cada targeta (#002819 fosc / #d9e4e0 clar), així el fosc queda fosc i el clar clar.
       NO es toquen: overlays/scrims sobre FOTO (::after, __bg, __img), fons de SECCIÓ
       (.rl-featured, .atelier-stage, .pvh-stage) ni heros/covers. Només RELLENOS de targeta. */
    .rl-combo__box--main,
    .rl-combo__box--white,
    .rl-cta__box--main,
    .rl-featured__card-visual:has(> svg),
    .rl-featured__card-visual:has(> i),
    .rl-featured__cards--filled .rl-featured__card-visual,
    #fases .phase-card__icon,
    .phase-modal__visual,
    .phase-modal__visual--filled,
    .rl-pillar-modal__visual,
    .pvh-panel,
    body.article-page .article-prose blockquote {
      background-image: none !important;
    }
    /* ===== /TEST ===== */
    .rl-combo__bg {
      position: absolute; inset: 0;
      background: url('../img/home/llinars-2.jpg') center/cover no-repeat;
      opacity: 0.85;
    }
    .rl-combo__bg::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%);
    }
    .rl-combo__floating {
      position: absolute; bottom: 48px; left: 48px; right: 48px; z-index: 2;
      color: #fff;
    }
    .rl-combo__label {
      font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
      font-weight: var(--fw-regular);
      margin-bottom: 24px;
      /* Sense opacity: el text queda en color sòlid autoritzat (blanc sobre caixa
         fosca, verd fosc sobre caixa clara), mai un blanc grisós per transparència. */
    }
    .rl-combo__text {
      font-size: clamp(18px, 1.6vw, 22px);
      font-weight: var(--fw-light);
      line-height: 1.5;
      margin-bottom: 24px;
    }
    .rl-combo__title-large {
      font-size: clamp(28px, 3vw, 44px);
      font-weight: var(--fw-light);
      line-height: 1.1;
      letter-spacing: -0.01em;
      text-wrap: balance;
      max-width: 13em;
    }
    .rl-combo__btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 0;
      background: transparent;
      color: inherit;
      border-radius: 0;
      font-size: 15px; font-weight: var(--fw-regular);
      letter-spacing: 0;
      text-transform: none;
      transition: gap var(--t-base) ease;
      align-self: flex-start;
      text-decoration: none;
    }
    .rl-combo__btn:hover { background: transparent; transform: none; gap: 14px; }
    .rl-combo__btn i.fi { font-size: 16px; line-height: 1; transition: transform .25s ease; }
    .rl-combo__btn:hover i.fi { transform: translateX(4px); }
    /* Authorized underline accent — the signature of the /index button
       ("Coneix l'empresa"): a short bar under the text that grows on hover.
       It lived only in home-premium.css (index-only), so every other page had a
       plain, "unauthorized"-looking rl-combo__btn. Defined here in rl-system.css
       (loaded on EVERY page type: services, product, about, projects, articles),
       so all rl-combo__btn now match the home. Vars fall back for non-index. */
    .rl-combo__btn { position: relative; padding-bottom: 4px; }
    .rl-combo__btn::after {
      content: ""; position: absolute; left: 0; bottom: -2px;
      width: 24px; height: 1px; background: currentColor; opacity: 0.4;
      transition: width var(--t-cozy, 0.32s) var(--ease-out-quart, cubic-bezier(0.22, 1, 0.36, 1)),
                  opacity var(--t-cozy, 0.32s) var(--ease-out-quart, cubic-bezier(0.22, 1, 0.36, 1));
    }
    .rl-combo__btn:hover::after { width: 100%; opacity: 1; }
    /* Inside dark boxes, force white text */
    .rl-combo__box--main .rl-combo__btn,
    .rl-combo__box--dark .rl-combo__btn { color: #fff !important; }

    /* ============ COMBO · STATS (numeric mini-grid) ============ */
    /* Used inside rl-combo__box--main (dark green) and rl-combo__box--white (cream) */
    .rl-combo__stats {
      list-style: none;
      margin: 24px 0 0;
      padding: 24px 0 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px 32px;
      border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    .rl-combo__stats li {
      display: flex;
      flex-direction: column;
      gap: 4px;
      line-height: 1.25;
      min-width: 0;
    }
    .rl-combo__stats strong {
      font-size: clamp(17px, 1.4vw, 20px);
      font-weight: var(--fw-medium);
      color: #fff;
      letter-spacing: -0.005em;
      font-style: normal;
    }
    .rl-combo__stats span {
      font-size: 13px;
      font-weight: var(--fw-light);
      color: #d9e4e0;
      letter-spacing: 0.01em;
      line-height: 1.4;
    }
    .rl-combo__stats--light {
      border-top-color: rgba(0, 40, 25, 0.10);
    }
    .rl-combo__stats--light strong { color: var(--green); }
    .rl-combo__stats--light span { color: var(--muted); }
    /* Stats boxes condensats per compartir l'alçada estàndard de 480px
       (homogeneïtat amb la resta de cards combo · sense canviar mida de text) */
    .rl-combo__box:has(.rl-combo__stats) {
      min-height: 480px;
    }
    .rl-combo__box:has(.rl-combo__stats) .rl-combo__label {font-size: 11.5px;font-weight: var(--fw-regular); margin-bottom: 10px; }
    .rl-combo__box:has(.rl-combo__stats) .rl-combo__text { line-height: 1.38; margin-bottom: 10px; }
    .rl-combo__box:has(.rl-combo__stats) .rl-combo__stats {
      margin-top: 12px;
      padding-top: 12px;
      gap: 12px 28px;
    }
    .rl-combo__box:has(.rl-combo__stats) .rl-combo__stats li { gap: 2px; }
    .rl-combo__box:has(.rl-combo__stats) .rl-combo__btn { margin-top: 12px; }
    @media (max-width: 700px) {
      .rl-combo__stats { grid-template-columns: 1fr; gap: 14px; }
    }

    /* ============ CS-BLOCK · horizontal premium service panel ============ */
    .cs-services {
      background: #fff;
      padding: 120px 56px;
      /* allow descendants to use position:sticky relative to the page scroll */
      overflow: visible;
    }
    .cs-services__container { max-width: 1340px; margin: 0 auto; }
    .cs-block {
      display: grid;
      grid-template-columns: minmax(0, 39%) minmax(0, 61%);
      gap: 32px;
      background: #fff;
      border: 1px solid var(--border-soft);
      border-radius: 28px;
      padding: 30px 42px;
      margin-bottom: 24px;
      min-height: 400px;
      /* Sticky stack effect: each card pins to the top and the next one slides over it */
      position: sticky;
      top: 96px;
      will-change: transform;
      transition: box-shadow .35s ease, border-color .35s ease, transform .45s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .cs-block:last-child { margin-bottom: 0; }
    /* Incremental top + z-index → "deck of cards" stacking, later cards sit on top */
    .cs-block:nth-child(1) { top: 96px;  z-index: 1; }
    .cs-block:nth-child(2) { top: 116px; z-index: 2; }
    .cs-block:nth-child(3) { top: 136px; z-index: 3; }
    .cs-block:nth-child(4) { top: 156px; z-index: 4; }
    /* Reverse variant: image on left, text on right (desktop only — mobile stacks normally) */
    @media (min-width: 901px) {
      .cs-block--reverse {
        grid-template-columns: minmax(0, 61%) minmax(0, 39%);
      }
      .cs-block--reverse .cs-block__content { order: 2; }
      .cs-block--reverse .cs-block__media { order: 1; }
    }
    .cs-block:hover {
      border-color: rgba(0,40,25,0.22);
      box-shadow: 0 22px 56px rgba(0,40,25,0.06);
    }
    .cs-block__content {
      display: flex;
      flex-direction: column;
      padding: 0;
    }
    .cs-block__icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--bg-light);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0 24px;
      flex-shrink: 0;
    }
    .cs-block__icon i {
      font-size: 24px;
      color: var(--green);
      line-height: 1;
    }
    .cs-block__label {
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #002819;
      font-weight: var(--fw-regular);
      margin-bottom: 12px;
    }
    .cs-block__title {
      font-size: clamp(19px, 1.4vw, 22px);
      font-weight: var(--fw-regular);
      letter-spacing: -0.005em;
      line-height: 1.25;
      margin: 0;
      color: var(--text);
      max-width: 500px;
    }
    .cs-block__text {
      font-size: 14px;
      line-height: 1.5;
      color: var(--muted);
      font-weight: var(--fw-light);
      margin: 14px 0 0;
      max-width: 470px;
    }
    .cs-block__btn {
      margin-top: auto;
      padding-top: 28px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--accent-soft);
      color: var(--green);
      font-size: 14px;
      font-weight: var(--fw-medium);
      text-decoration: none;
      transition: gap var(--t-base) ease;
      align-self: flex-start;
    }
    .cs-block__btn:hover { background: transparent; gap: 14px; }
    .cs-block__btn i.fi {
      font-size: 16px;
      line-height: 1;
      transition: transform .25s ease;
    }
    .cs-block__btn:hover i.fi { transform: translateX(4px); }
    .cs-block__media {
      position: relative;
      border-radius: 22px;
      overflow: hidden;
      background: #000;
      min-height: 345px;
    }
    .cs-block__media-bg {
      position: absolute;
      inset: 0;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: transform;
    }
    .cs-block:hover .cs-block__media-bg { transform: scale(1.04); }
    @media (max-width: 1100px) {
      .cs-block {
        grid-template-columns: minmax(0, 42%) minmax(0, 58%);
        gap: 24px;
        padding: 24px 28px;
        border-radius: 22px;
        min-height: 322px;
      }
      .cs-block__media { min-height: 276px; border-radius: 18px; }
    }
    @media (max-width: 900px) {
      .cs-services { padding: 80px 24px; }
      .cs-block {
        grid-template-columns: 1fr;
        gap: 20px;
        border-radius: 22px;
        padding: 24px;
        min-height: 0;
        position: static;
        margin-bottom: 16px;
      }
      .cs-block:nth-child(1),
      .cs-block:nth-child(2),
      .cs-block:nth-child(3),
      .cs-block:nth-child(4) { top: auto; z-index: auto; }
      .cs-block__icon { margin: 0 0 24px; }
      .cs-block__btn { margin-top: 32px; }
      .cs-block__media { min-height: 280px; border-radius: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cs-block { position: static; transition: none; }
      .cs-block:nth-child(n) { top: auto; }
    }

    /* ============ MOTION ============ */
    /* Hero entrance choreography (uses motion.js [data-anim]) */
    .js-ready .rl-hero__title[data-anim] { transition-delay: 0.15s; }
    .js-ready .rl-hero__actions[data-anim] { transition-delay: 0.35s; }
    .js-ready .rl-hero__topright [data-anim] { transition-delay: 0.55s; }

    /* Anim section: stagger the 3 jumbo lines */
    .js-ready .rl-anim__title > div[data-anim]:nth-child(2) { transition-delay: 0.18s; }
    .js-ready .rl-anim__title > div[data-anim]:nth-child(3) { transition-delay: 0.36s; }

    /* Featured cards stagger */
    .js-ready .rl-featured__card[data-anim]:nth-child(2) { transition-delay: 0.08s; }
    .js-ready .rl-featured__card[data-anim]:nth-child(3) { transition-delay: 0.16s; }
    .js-ready .rl-featured__card[data-anim]:nth-child(4) { transition-delay: 0.24s; }
    .js-ready .rl-featured__card[data-anim]:nth-child(5) { transition-delay: 0.32s; }

    /* Posts cards stagger */
    .js-ready .rl-posts__card[data-anim]:nth-child(2) { transition-delay: 0.10s; }
    .js-ready .rl-posts__card[data-anim]:nth-child(3) { transition-delay: 0.20s; }

    /* Ken Burns on hero bg — slow, infinite alternate */
    .rl-hero__bg { animation: kenBurns 28s ease-in-out infinite alternate; }
    @keyframes kenBurns {
      from { transform: scale(1); }
      to   { transform: scale(1.06); }
    }

    /* Hover sobre rl-posts__card · ZERO animació · el card és estàtic.
       Es manté el zoom subtil per altres patrons (rl-cta i rl-combo image boxes). */
    .rl-cta__bg,
    .rl-combo__bg {
      transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: transform;
    }
    .rl-posts__card-img,
    .rl-posts__card-img img { transform: none !important; transition: none !important; }
    .rl-cta__box--image:hover .rl-cta__bg { transform: scale(1.04); }
    .rl-combo__box--image:hover .rl-combo__bg { transform: scale(1.04); }

    /* Featured img subtle parallax-style scale on hover of inner card */
    .rl-featured__img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
    .rl-featured:hover .rl-featured__img { transform: scale(1.02); }

    /* ============ REDUCED MOTION ============ */
    @media (prefers-reduced-motion: reduce) {
      .rl-sectors__item:hover .rl-sectors__link,
      .rl-featured__card:hover,
      .rl-posts__card:hover,
      .rl-combo__btn:hover,
      .rl-hero__btn:hover,
      .rl-hero__notch:hover,
      .rl-header__cta:hover {
        transform: none !important;
      }
      .rl-hero__bg { animation: none !important; }
      .rl-posts__card-img,
      .rl-posts__card-img img,
      .rl-cta__bg,
      .rl-combo__bg,
      .rl-featured__img {
        transition: none !important;
        transform: none !important;
      }
    }

    /* ─── Button dynamism policy · SITE-WIDE ──────────────────────────────
       Only the home (/index) button motion is authorized: a subtle gap widen
       plus arrow slide on the child icon (i.fi / svg). NOTHING else moves —
       no cursor-magnetic (disabled in motion-system.js), no LIFT (translateY),
       no SCALE, no SHADOW growth on hover. rl-system.css is loaded on every
       page type (home, services, projects, articles, hubs), so this reset is
       global. Child-icon arrow micro-motions live on separate selectors
       (`:hover i.fi`, `:hover svg`, `:hover::after`) and are NOT affected.
       NOTE: `button:hover` (the bare element) is included because components.css
       lifts EVERY <button> (`button:hover,.btn:hover{translateY(-2px)}`); without
       it, any <button> without one of the classes below still lifted. */
    button:hover,
    .rl-hero__btn:hover,
    .rl-hero__btn--blur:hover,
    .rl-hero__notch:hover,
    .rl-header__cta:hover,
    .rl-combo__btn:hover,
    .cs-block__btn:hover,
    .blog-landing__btn:hover,
    .is-home .rl-hero__btn:hover,
    .is-home .rl-combo__btn:hover,
    .btn:hover,
    .btn-accent:hover,
    .btn-white:hover,
    .btn-outline:hover,
    .btn-dark:hover,
    .btn-up:hover,
    .nav-cta:hover,
    .atelier-cta:hover,
    .atelier-cta--outline:hover,
    .atelier-cta--ghost:hover,
    .atelier-nudge__cta:hover,
    .atelier-reveal__pdf-stale-btn:hover,
    .phases-rail__nav-btn:hover,
    .audience-flow__nav-btn:hover,
    .load-more-btn:hover {
      transform: none !important;
      box-shadow: none !important;
    }

    /* ============ POSTS ============ */
    .rl-posts { background: #fff; padding: 120px 56px; }
    .rl-posts__container { max-width: 1440px; margin: 0 auto; }
    .rl-posts__label {
      font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
      color: #002819; margin-bottom: 16px;
      font-weight: var(--fw-regular);
    }
    .rl-posts__title {
      font-size: clamp(36px, 4.2vw, 56px);
      font-weight: var(--fw-light);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--text);
      margin-bottom: 56px;
    }
    .rl-posts__grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }
    .rl-posts__card {
      display: block; text-decoration: none;
    }
    /* Marc del card estàtic en hover · només la <img> interior fa zoom (vegeu regla a línia 873) */
    .rl-posts__card-img {
      width: 100%; height: 280px;
      border-radius: var(--r-lg);
      background: var(--bg-light) center/cover no-repeat;
      margin-bottom: 20px;
      overflow: hidden;
    }
    .rl-posts__card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--r-lg);
      display: block;
    }
    .rl-posts__card-title {
      font-size: 18px; color: var(--text);
      font-weight: var(--fw-medium); line-height: 1.4;
      margin-bottom: 12px;
    }
    .rl-posts__card-link {
      font-size: 13px; color: var(--green);
      display: inline-flex; align-items: center; gap: 6px;
      font-weight: var(--fw-medium);
    }

    /* ============ CTA ============ */
    .rl-cta { background: #fff; padding: 0 56px 120px; }
    .rl-cta__container { max-width: 1440px; margin: 0 auto; }
    .rl-cta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .rl-cta__box {
      border-radius: var(--r-xl);
      /* Espaiat governat per la tarjeta rl-combo (referència): 48px + min-height 480. */
      padding: 48px;
      min-height: 480px;
      display: flex; flex-direction: column; justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    /* Image box shares the SAME padding + flex layout as the main box, so both
       cards are homogeneous (identical interior spacing + margins) at every
       breakpoint. The photo lives in the absolute .rl-cta__bg behind. */
    .rl-cta__box--image { background: #000; }
    .rl-cta__bg {
      position: absolute; inset: 0;
      background: url('../img/fotos/dms2026.jpg') center 68%/cover no-repeat;
      background-image: image-set(url('../img/fotos/dms2026.webp') type('image/webp'), url('../img/fotos/dms2026.jpg') type('image/jpeg'));
      opacity: 0.7;
    }
    .rl-cta__bg::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%);
    }
    .rl-cta__top {
      position: relative; z-index: 2;
      color: #fff;
    }
    .rl-cta__bottom {
      position: relative; z-index: 2;
    }
    .rl-cta__box--main { background: radial-gradient(125% 120% at 78% 12%, rgba(217,228,224,0.20) 0%, rgba(217,228,224,0) 52%), radial-gradient(120% 120% at 12% 100%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 55%), #002819; color: #fff; }
    .rl-cta__box--main::after {
      content: ""; position: absolute;
      bottom: 0; right: 0;
      width: 320px; height: 320px;
      background: radial-gradient(circle at bottom right, rgba(0,40,25,0.25), transparent 70%);
      pointer-events: none;
    }
    .rl-cta__title {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: var(--fw-light);
      line-height: 1.1;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }

    /* ── GEO landing · verified-facts stats strip (dark green band), jul 2026 ── */
    .geo-stats-sec { background: #fff; padding: 0 56px 24px; }
    .geo-stats {
      max-width: 1180px; margin: 0 auto;
      background: radial-gradient(120% 120% at 12% 100%, rgba(0,40,25,0.22) 0%, rgba(0,40,25,0) 55%), #002819;
      color: #fff; border-radius: var(--r-xl);
      padding: clamp(28px, 3vw, 44px) clamp(28px, 3.5vw, 56px);
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 40px;
    }
    .geo-stats__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .geo-stats__value { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-medium); letter-spacing: -0.01em; color: #fff; line-height: 1.1; }
    .geo-stats__label { font-size: 13px; line-height: 1.4; color: #d9e4e0; font-weight: var(--fw-light); }
    @media (max-width: 900px) { .geo-stats { grid-template-columns: repeat(2, 1fr); } .geo-stats-sec { padding: 0 24px 20px; } }
    @media (max-width: 520px) { .geo-stats { grid-template-columns: 1fr 1fr; gap: 20px 24px; } }
    /* GEO featured panel · intro lead above the icon-cards */
    .rl-featured__lead-text { font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 760px; margin: 0 0 32px; }
    /* GEO · one shared 1180px rail so every block aligns to the featured panel */
    .geo-rail { max-width: 1180px; margin: 0 auto; }
    .geo-rail > .section-header { max-width: 760px; }
    /* GEO card grids · symmetric column count set inline per section; keep index card size/gap.
       Cards stretch to equal height within a row. Responsive collapse for narrow screens. */
    .geo-cards { display: grid; gap: 14px; }
    @media (max-width: 900px) { .geo-cards { grid-template-columns: repeat(2, 1fr) !important; } }
    @media (max-width: 560px) { .geo-cards { grid-template-columns: 1fr !important; } }
    /* GEO · town cards are a direct child of the white article card, so they fill its
       content width exactly (the card's 64px side padding are the lateral margins),
       all towns in one row. */
    /* GEO · town chips · rounded pills (pin + name) that wrap inside the article column */
    .geo-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 34px; }
    .geo-chip {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 16px; border: 1px solid rgba(0,40,25,0.14); border-radius: 999px;
      color: var(--text); font-size: 14px; font-weight: var(--fw-medium); line-height: 1;
      transition: border-color var(--t-base), background var(--t-base);
    }
    .geo-chip:hover { border-color: rgba(0,40,25,0.30); background: rgba(0,40,25,0.03); }
    .geo-chip i { color: var(--green); font-size: 13px; line-height: 1; }
    /* GEO · closing CTA sits outside the prose so the article link styling can't override it */
    .geo-cta { margin: 28px 0 4px; }
    .geo-cta .rl-combo__btn { color: var(--green); font-size: 15px; font-weight: var(--fw-medium); }
    /* GEO · compact place chips for the "towns we serve" list (card-based, no big tile) */
    .geo-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .geo-place { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-md); transition: border-color var(--t-base), box-shadow var(--t-base); }
    .geo-place:hover { border-color: rgba(0,40,25,0.22); box-shadow: 0 8px 22px rgba(0,40,25,0.06); }
    .geo-place i { color: var(--green); font-size: 18px; line-height: 1; flex-shrink: 0; }
    .geo-place span { font-size: 14.5px; color: var(--text); font-weight: var(--fw-medium); line-height: 1.3; }
    @media (max-width: 700px) { .geo-places { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 460px) { .geo-places { grid-template-columns: 1fr; } }

    /* ── CTA · integrated internal-linking block ("Zones de servei"), jul 2026 ──
       Local-SEO internal links integrated into the closing CTA as a soft card
       that lives inside .rl-cta__container, right after the two-box row. */
    .rl-cta__zones {
      margin-top: 24px;
      background: #d9e4e0;
      border: 1px solid #d9e4e0;
      border-radius: var(--r-xl);
      padding: clamp(28px, 3vw, 48px);
    }
    /* On the salvia panel a light pill would vanish (same colour as the bg):
       give it a white fill + green ink, like the .rl-zones pill. */
    .rl-cta__zones .tag-pill {
      background: #fff;
      color: var(--green);
      border: 1px solid var(--border-soft);
    }
    .rl-cta__zones-head { max-width: 760px; margin-bottom: 28px; }
    .rl-cta__zones-lead {
      font-size: 15px; line-height: 1.6; color: var(--text);
      margin: 14px 0 0;
    }
    .rl-cta__zones-grid {
      display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px;
    }
    .rl-cta__zones-col h3 {
      font-size: 16px; font-weight: var(--fw-medium); color: var(--green);
      letter-spacing: -0.005em; margin: 0 0 16px;
    }
    .rl-cta__zones ul {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .rl-cta__zones-col--muni ul {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
    }
    .rl-cta__zones a {
      color: var(--text); font-size: 14.5px; line-height: 1.4;
      text-decoration: none; transition: color var(--t-base);
    }
    .rl-cta__zones a:hover { color: var(--green); }
    @media (max-width: 760px) {
      .rl-cta__zones-grid { grid-template-columns: 1fr; gap: 28px; }
      .rl-cta__zones-col--muni ul { grid-template-columns: 1fr; }
    }

    /* ============ FOOTER ============ */
    .rl-footer {
      background: #fff;
      padding: 56px;
      border-top: 1px solid var(--border-soft);
    }
    .rl-footer__container {
      max-width: 1440px; margin: 0 auto;
      display: flex; align-items: center; flex-wrap: wrap;
      gap: 40px;
    }
    .rl-footer__logo svg { height: 26px; width: auto; display: block; }
    .rl-footer__logo svg path,
    .rl-footer__logo svg polygon { fill: var(--green); }
    .rl-footer__menu {
      display: flex; gap: 24px; list-style: none; padding: 0; margin: 0;
    }
    .rl-footer__menu a {
      font-size: 13px; color: var(--muted);
      transition: color var(--t-base);
    }
    .rl-footer__menu a:hover { color: var(--green); }
    .rl-footer__contact { display: flex; gap: 20px; margin-left: auto; }
    .rl-footer__contact-link {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none;
    }
    .rl-footer__contact-circle {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--bg-light);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: var(--green);
      font-weight: var(--fw-medium);
    }
    .rl-footer__contact-text { font-size: 13px; color: var(--text); white-space: nowrap; }
    .rl-footer__copy { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
    /* social + address on the light footer variant */
    .rl-footer__extra { display: inline-flex; align-items: center; gap: 10px; }
    .rl-footer__social { display: inline-flex; align-items: center; gap: 10px; }
    .rl-footer__social a { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 10px; background: var(--accent-soft); color: var(--green); font-size: 13px; letter-spacing: 0.01em; text-decoration: none; transition: background var(--t-base); }
    .rl-footer__social a:hover, .rl-footer__social a:focus-visible { background: var(--accent-soft-hover); }
    .rl-footer__address { font-style: normal; color: var(--muted-light); font-size: 12.5px; line-height: 1.5; }
    .rl-footer__top {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--green); color: #fff;
      display: flex; align-items: center; justify-content: center;
      transition: background var(--t-base);
    }
    .rl-footer__top:hover { background: var(--green-light); }

    /* Responsive */
    @media (max-width: 1024px) {
      .rl-header__menu ul { gap: 18px; }
      .rl-header__notch { display: none; }
    }
    @media (max-width: 900px) {
      .rl-header__container { padding: 0 20px; }
      .rl-header__menu { display: none; }
      .rl-hero__bottomleft { left: 24px; right: 24px; bottom: 32px; max-width: none; }
      .rl-hero__topright { right: 16px; top: 86px; }
      .rl-hero__notch { padding: 10px 16px 10px 10px; max-width: 240px; }
      .rl-anim { padding: 100px 24px; }
      .rl-hero-block { padding: 0 16px 0; }
      .rl-hero-block__card { padding: 32px 24px; min-height: calc(100vh - 120px); }
      .rl-hero-block__title { font-size: clamp(32px, 8vw, 44px); }
      .rl-sectors, .rl-featured, .rl-combo, .rl-posts, .rl-cta { padding-left: 24px; padding-right: 24px; }
      .rl-sectors__count { display: none; }
      .rl-sectors__link { justify-content: flex-start; padding: 28px 0; }
      .rl-sectors__item:hover .rl-sectors__link { padding-left: 0; }
      /* !important beats per-page inline grid-template-columns on service pages */
      .rl-featured__cards { grid-template-columns: repeat(2, 1fr) !important; }
      /* Mai una targeta sola: si el total és imparell, l'última ocupa tota la fila */
      .rl-featured__cards > .rl-featured__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
      .rl-combo__row, .rl-cta__row { grid-template-columns: 1fr; }
      /* Photo card always before the text card when stacked */
      .rl-combo__box--image, .rl-cta__box--image { order: -1; }
      .rl-combo__box, .rl-cta__box { min-height: 360px; padding: 32px; }
      .rl-combo__box--dark, .rl-combo__box--image { min-height: 320px; }
      .rl-posts__grid { grid-template-columns: 1fr; }
      .rl-footer__container { flex-direction: column; gap: 24px; align-items: flex-start; }
      .rl-footer__contact { margin-left: 0; }
    }

    /* ============ MOBILE NAV · hamburger + drawer ============ */
    /* Hidden on desktop; the toggle lives inside .rl-header__right (order last) */
    .rl-mobile-nav__toggle {
      display: none;
      align-items: center; justify-content: center;
      width: 44px; height: 44px; flex: 0 0 auto;
      padding: 0; margin: 0; order: 4;
      background: transparent; border: 0; cursor: pointer;
      color: #fff; border-radius: 10px;
      transition: background 0.25s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .rl-mobile-nav__toggle:hover { background: rgba(255, 255, 255, 0.10); }
    .rl-mobile-nav__bars { position: relative; display: block; width: 20px; height: 12px; }
    .rl-mobile-nav__bars span {
      position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px;
      background: currentColor;
      transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), opacity 0.2s ease, top 0.3s ease;
    }
    .rl-mobile-nav__bars span:nth-child(1) { top: 0; }
    .rl-mobile-nav__bars span:nth-child(2) { top: 5px; }
    .rl-mobile-nav__bars span:nth-child(3) { top: 10px; }
    .rl-mobile-nav__toggle[aria-expanded="true"] .rl-mobile-nav__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
    .rl-mobile-nav__toggle[aria-expanded="true"] .rl-mobile-nav__bars span:nth-child(2) { opacity: 0; }
    .rl-mobile-nav__toggle[aria-expanded="true"] .rl-mobile-nav__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

    .rl-mobile-nav { position: fixed; inset: 0; z-index: 990; }
    .rl-mobile-nav[hidden] { display: none; }
    .rl-mobile-nav__backdrop {
      position: absolute; inset: 0;
      background: rgba(0, 40, 25, 0.42);
      opacity: 0; transition: opacity 0.3s ease;
    }
    .rl-mobile-nav.is-open .rl-mobile-nav__backdrop { opacity: 1; }
    .rl-mobile-nav__panel {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(86vw, 360px);
      background: #fff;
      padding: 92px 28px 32px;
      display: flex; flex-direction: column;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transform: translateX(100%);
      transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1);
      box-shadow: -18px 0 52px rgba(0, 40, 25, 0.20);
    }
    .rl-mobile-nav.is-open .rl-mobile-nav__panel { transform: translateX(0); }
    .rl-mnav__group {
      padding: 16px 0;
      border-bottom: 1px solid var(--border-soft);
    }
    .rl-mnav__group:first-child { padding-top: 0; }
    .rl-mnav__group-title {
      font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
      color: var(--muted); font-weight: var(--fw-medium);
      margin: 0 0 10px;
    }
    .rl-mnav__sublist { list-style: none; margin: 0; padding: 0; }
    .rl-mnav a {
      display: block; text-decoration: none; color: var(--text);
      font-size: 20px; font-weight: var(--fw-light); line-height: 1.25;
      letter-spacing: -0.01em; padding: 7px 0;
      transition: color 0.2s ease;
    }
    .rl-mnav a:hover { color: var(--green); }
    .rl-mnav__link { font-weight: var(--fw-regular); padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
    .rl-mobile-nav__foot {
      margin-top: auto; padding-top: 28px;
      display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
    }
    .rl-mobile-nav__foot .rl-lang-switch { margin: 0; }
    .rl-mnav__login {
      display: inline-flex; align-items: center; gap: 10px;
      background: transparent; border: 0; cursor: pointer; padding: 0;
      font: inherit; color: var(--muted); font-size: 14px;
      transition: color 0.2s ease;
    }
    .rl-mnav__login:hover { color: var(--green); }
    .rl-mnav__login i { font-size: 19px; line-height: 1; }
    html.rl-mnav-open, body.rl-mnav-open { overflow: hidden; }

    @media (max-width: 900px) {
      .rl-mobile-nav__toggle { display: inline-flex; }
      /* Collapse the language switcher and login icon into the drawer
         (specificity raised to beat home-premium.css, which loads later) */
      .rl-header__right .rl-lang-switch,
      .rl-header__right .rl-header__login { display: none; }
      .rl-header__right { gap: 10px; }
    }

    /* ============ CARD GRIDS · single column on phones ============ */
    @media (max-width: 600px) {
      /* Tighter section gutters so cards breathe on narrow screens */
      .rl-sectors, .rl-featured, .rl-combo, .rl-posts, .rl-cta {
        padding-left: 16px; padding-right: 16px;
      }
      .rl-featured { padding-top: 72px; padding-bottom: 72px; }
      .rl-featured__img { height: var(--hero-band-h-sm); }
      .rl-featured__inner { padding: 36px 22px; margin-top: -64px; }
      .rl-featured__title { margin-bottom: 32px; }
      /* Stack every card grid one after another on phones (beats inline styles) */
      .rl-featured__cards { grid-template-columns: 1fr !important; }
      /* NOTE · the sub-cards (icon/explanatory tiles + photo posts) intentionally
         keep the white panel's horizontal padding on phones, so they stay inset
         and aligned with the section title. Only the section, the hero photo and
         the white panel share the full width — never the individual sub-cards. */
      /* Combo / CTA: lighter inner padding on phones */
      .rl-combo__box, .rl-cta__box { padding: 28px 22px; min-height: 300px; }
      .rl-combo__box--dark, .rl-combo__box--image { min-height: 280px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .rl-mobile-nav__panel, .rl-mobile-nav__backdrop, .rl-mobile-nav__bars span { transition: none; }
    }

.rl-featured__card-meta{font-size:12.5px;line-height:1.4;color:var(--muted);margin:6px 0 2px;letter-spacing:0.01em;}

/* ── Footer nav (Ola 3 · malla interna site-wide) ── */
.rl-footer__nav {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap;
  gap: 12px 24px; list-style: none; padding: 0; margin: 0;
}
.rl-footer__nav a {
  font-size: 13px; color: var(--muted);
  transition: color var(--t-base);
}
.rl-footer__nav a:hover { color: var(--green); }

/* ── Enlace secundario del bloque CTA de cierre ── */
.rl-cta__alt {
  display: inline-block; margin-top: 14px;
  font-size: 13px; color: #d9e4e0;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--t-base);
}
.rl-cta__alt:hover { color: #fff; }

/* ── Banda "Zones de servei" de construccio (antes bloque sr-only) ── */
.rl-zones { background: var(--bg-light); padding: 88px 56px; }
.rl-zones .container { max-width: 1180px; margin: 0 auto; }
.rl-zones .tag-pill {
  display: inline-block; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--green);
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 6px 12px;
}
.rl-zones .section-header__title { color: var(--green); font-weight: 500; margin: 0 0 10px; }
.rl-zones .section-header__lead { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 640px; margin: 0; }
.rl-zones a { transition: color var(--t-base); }
.rl-zones a:hover { color: var(--green); }
@media (max-width: 768px) {
  .rl-zones { padding: 64px 24px; }
  .rl-zones .container > div[style*="grid"] { grid-template-columns: 1fr !important; }
}

/* ── Nota legal (patrimonis · disclaimer regulatorio) ── */
.legal-note {
  font-size: 12px; line-height: 1.6;
  opacity: 0.6; max-width: 680px;
  margin: 22px auto 0;
}

/* ── CTA de tancament repensada (jul 2026): copy a la caixa verda + doble accés a la caixa imatge ── */
.rl-cta__lead { font-size: 16px; line-height: 1.6; color: #d9e4e0; max-width: 440px; margin: 16px 0 0; }
.rl-cta__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.rl-cta__alt--onimage { color: #ffffff; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.rl-cta__alt--onimage:hover { color: #fff; }

    /* ════════════════════════════════════════════════════════════════
       FIELD ALTERNATION · two consecutive mint-field sections
       (.rl-featured / .phases-rail) would merge into one seamed band;
       the follower flips to a white field so surfaces always alternate.
       Its floating panel keeps definition via a hairline border on top
       of the existing shadow. Site-wide, all languages; the home keeps
       its own choreography (body.is-home excluded). Max run today is 2
       (audited site-wide), so no third-in-a-row rule is needed.
       ════════════════════════════════════════════════════════════════ */
    body:not(.is-home) :is(.rl-featured, .phases-rail) + :is(#projectes, .rl-featured, .phases-rail) {
      /* Dark corporate field · same textured treatment as .rl-cta__box--main
         so the white floating panels pop with maximum contrast. */
      background:
        radial-gradient(125% 120% at 78% 12%, rgba(217,228,224,0.20) 0%, rgba(217,228,224,0) 52%),
        radial-gradient(120% 120% at 12% 100%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 55%),
        #002819;
    }