/* ============================================================
   Neware Design System — tokens for child theme
   Source of truth: brand/colors_and_type.css
   Adapted for Kadence integration: paths point inside the child
   theme assets, and tokens are scoped to :root so Kadence elements
   inherit them where possible.
   ============================================================ */

/* ---- Noah font faces (WOFF2 for web, OTF as fallback) -------- */
@font-face {
  font-family: "Noah";
  src: url("../fonts/noah-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noah";
  src: url("../fonts/noah-regularitalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noah";
  src: url("../fonts/noah-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noah";
  src: url("../fonts/noah-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---- Brand tokens (CSS custom properties) -------------------- */
:root {
  /* Brand (Pantone 334 C) */
  --nw-brand:           #059c84;
  --nw-brand-60:        #80c5b6;
  --nw-brand-40:        #aad8cd;
  --nw-brand-deep:      #0c9279;
  --nw-brand-ink:       #035a4c;

  /* Neutrals */
  --nw-black:           #111111;
  --nw-ink-900:         #1a1a1a;
  --nw-ink-800:         #2a2a2a;
  --nw-ink-700:         #3d3d3d;
  --nw-ink-600:         #595959;
  --nw-ink-500:         #757575;
  --nw-ink-400:         #9a9a9a;
  --nw-ink-300:         #c4c4c4;
  --nw-ink-200:         #e4e4e4;
  --nw-ink-100:         #f1f1f0;
  --nw-ink-050:         #f8f8f7;
  --nw-white:           #ffffff;

  /* Semantic */
  --nw-success:         #059c84;
  --nw-warning:         #d39400;
  --nw-danger:          #c0392b;
  --nw-info:            #3a7ca5;

  /* Surfaces */
  --nw-bg:              var(--nw-white);
  --nw-bg-elev:         var(--nw-ink-050);
  --nw-bg-inverse:      var(--nw-black);
  --nw-bg-brand:        var(--nw-brand);
  --nw-bg-brand-soft:   #ecf7f4;

  /* Foregrounds */
  --nw-fg-1:            var(--nw-black);
  --nw-fg-2:            var(--nw-ink-700);
  --nw-fg-3:            var(--nw-ink-500);
  --nw-fg-4:            var(--nw-ink-400);
  --nw-fg-on-brand:     var(--nw-white);
  --nw-fg-on-inverse:   var(--nw-white);
  --nw-fg-brand:        var(--nw-brand);

  /* Borders */
  --nw-border-subtle:   var(--nw-ink-200);
  --nw-border-strong:   var(--nw-ink-300);
  --nw-border-focus:    var(--nw-brand);

  /* Type */
  --nw-font-sans:       "Noah", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nw-font-mono:       "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --nw-fw-regular:      400;
  --nw-fw-bold:         700;
  --nw-fs-display-xl:   5.5rem;
  --nw-fs-display-lg:   4rem;
  --nw-fs-display-md:   3rem;
  --nw-fs-h1:           2.25rem;
  --nw-fs-h2:           1.75rem;
  --nw-fs-h3:           1.375rem;
  --nw-fs-h4:           1.125rem;
  --nw-fs-body:         1rem;
  --nw-fs-small:        0.875rem;
  --nw-fs-caption:      0.75rem;
  --nw-fs-overline:     0.6875rem;
  --nw-lh-tight:        1.05;
  --nw-lh-snug:         1.2;
  --nw-lh-normal:       1.45;
  --nw-lh-loose:        1.6;
  --nw-ls-tightest:     -0.035em;
  --nw-ls-tight:        -0.015em;
  --nw-ls-normal:       0;
  --nw-ls-overline:     0.14em;

  /* Spacing (4px base) */
  --nw-space-0:  0;     --nw-space-1:  0.25rem; --nw-space-2: 0.5rem;
  --nw-space-3:  0.75rem; --nw-space-4: 1rem;     --nw-space-5: 1.25rem;
  --nw-space-6:  1.5rem;  --nw-space-8: 2rem;     --nw-space-10: 2.5rem;
  --nw-space-12: 3rem;    --nw-space-16: 4rem;    --nw-space-20: 5rem;
  --nw-space-24: 6rem;

  /* Radii */
  --nw-radius-sm:    4px;
  --nw-radius-md:    8px;
  --nw-radius-lg:    12px;
  --nw-radius-xl:    20px;
  --nw-radius-2xl:   28px;
  --nw-radius-pill:  999px;
  --nw-radius-dot:   50%;

  /* Shadows */
  --nw-shadow-xs: 0 1px 2px rgba(17,17,17,0.04);
  --nw-shadow-sm: 0 1px 2px rgba(17,17,17,0.04), 0 1px 3px rgba(17,17,17,0.06);
  --nw-shadow-md: 0 2px 4px rgba(17,17,17,0.05), 0 4px 12px rgba(17,17,17,0.08);
  --nw-shadow-lg: 0 6px 16px rgba(17,17,17,0.08), 0 16px 32px rgba(17,17,17,0.06);
  --nw-shadow-xl: 0 12px 40px rgba(17,17,17,0.12);
  --nw-focus-ring: 0 0 0 3px rgba(5,156,132,0.25);

  /* Motion */
  --nw-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --nw-ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --nw-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --nw-dur-instant:   80ms;
  --nw-dur-fast:      160ms;
  --nw-dur-base:      220ms;
  --nw-dur-slow:      360ms;

  /* Layout */
  --nw-content-max:   1240px;
  --nw-gutter:        var(--nw-space-6);
}

/* ============================================================
   Element defaults — apply Noah + Neware ink to base elements
   ============================================================ */
html, body {
  font-family: var(--nw-font-sans);
  font-size:   var(--nw-fs-body);
  line-height: var(--nw-lh-normal);
  color:       var(--nw-fg-1);
  background:  var(--nw-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nw-font-sans);
  font-weight: var(--nw-fw-bold);
  line-height: var(--nw-lh-snug);
  letter-spacing: var(--nw-ls-tight);
  color: var(--nw-fg-1);
}
h1 { font-size: var(--nw-fs-h1); }
h2 { font-size: var(--nw-fs-h2); }
h3 { font-size: var(--nw-fs-h3); }
h4 { font-size: var(--nw-fs-h4); }

p { line-height: var(--nw-lh-loose); color: var(--nw-fg-2); text-wrap: pretty; }

a { color: var(--nw-brand); text-decoration: none; transition: color var(--nw-dur-fast) var(--nw-ease-standard); }
a:hover { color: var(--nw-brand-ink); }

::selection { background: var(--nw-brand-40); color: var(--nw-fg-1); }

/* The brand dot — bullet replacement, status mark, loaders */
.nw-dot {
  /* Period character (.) coloured in brand green, sitting at the
     baseline like normal punctuation. Used at the end of headings,
     section titles and CTAs. */
  color: var(--nw-brand);
  font-weight: inherit;
  font-style: normal;
  /* Nudge optical separation from the previous glyph without
     adding a literal space character. */
  margin-left: 0.02em;
}

/* Word-level brand accents — used inside headings (last
   keyword) and inside body running text where the brand name
   "neware" appears. Both use the brand green; we keep two
   classes so we can tune them independently later. */
.nw-accent {
  color: var(--nw-brand);
}
.nw-brand-text {
  color: var(--nw-brand);
}

/* Short brand-coloured underline bar under section headings,
   replicating the visual rhythm from www.neware.cat (50×3px).
   Applied to every H1/H2 inside .entry-content, so the bar is
   consistent across home, /coneix-neware/ and /serveis/*.
   Uses descendant (not child) selector because Kadence renders
   groups with an inner .wp-block-group__inner-container
   wrapper that breaks direct-child matches. */
.entry-content h1.wp-block-heading,
.entry-content h2.wp-block-heading,
.nw-service-section h2,
.nw-enfocament h2,
.nw-cta-final h2 {
  position: relative;
}
.entry-content h1.wp-block-heading::after,
.entry-content h2.wp-block-heading::after,
.nw-service-section h2::after,
.nw-enfocament h2::after,
.nw-cta-final h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--nw-brand);
  margin-top: 18px;
  border-radius: 1px;
}
/* Don't add bars to H2/H3 inside cards or feature-grids — those
   are sub-elements, not section titles. */
.nw-card h3::after,
.nw-feature-item h3::after,
.nw-card h2::after {
  display: none;
}
/* Centered variants */
.nw-cta-final h2::after,
.entry-content h1.has-text-align-center::after,
.entry-content h2.has-text-align-center::after {
  margin-left: auto;
  margin-right: auto;
}

/* Overline — the only place we uppercase */
.nw-overline {
  font-size: var(--nw-fs-overline);
  letter-spacing: var(--nw-ls-overline);
  text-transform: uppercase;
  color: var(--nw-fg-3);
  font-weight: var(--nw-fw-bold);
}

/* ============================================================
   Kadence integration — map Kadence's CSS variables onto ours
   so its blocks (Advanced Heading, Button, Info Box, Counter,
   Tabs, Testimonials) pick up the brand without re-styling
   each one manually.
   ============================================================ */
:root {
  /* Kadence Global Colors → Neware */
  --global-palette1: var(--nw-brand);
  --global-palette2: var(--nw-brand-ink);
  --global-palette3: var(--nw-black);
  --global-palette4: var(--nw-ink-700);
  --global-palette5: var(--nw-ink-500);
  --global-palette6: var(--nw-ink-200);
  --global-palette7: var(--nw-ink-050);
  --global-palette8: var(--nw-bg-brand-soft);
  --global-palette9: var(--nw-white);

  /* Kadence body type → Noah */
  --global-body-font-family: var(--nw-font-sans);
  --global-heading-font-family: var(--nw-font-sans);
  --global-primary-nav-font-family: var(--nw-font-sans);
}

/* ============================================================
   Kadence buttons — adopt Neware shape/hover
   ============================================================ */
.wp-block-button .wp-block-button__link,
.kb-button,
.kadence-blocks-btn-link {
  font-family: var(--nw-font-sans);
  font-weight: var(--nw-fw-bold);
  border-radius: var(--nw-radius-md);
  letter-spacing: 0.005em;
  transition: background var(--nw-dur-fast) var(--nw-ease-standard),
              color var(--nw-dur-fast) var(--nw-ease-standard);
}
.wp-block-button .wp-block-button__link:hover {
  background: var(--nw-brand-ink);
}

/* ============================================================
   Brand palette utility classes
   These map the editor palette slugs (declared in functions.php
   via add_theme_support('editor-color-palette')) to actual CSS
   on the front-end. Without these declarations, blocks pick up
   the .has-{slug}-color / .has-{slug}-background-color classes
   in the markup but they would resolve to "no rule found"
   (i.e. transparent), which is what broke the dark CTA band.
   ============================================================ */
.has-nw-brand-color       { color: var(--nw-brand) !important; }
.has-nw-brand-background-color { background-color: var(--nw-brand) !important; }
.has-nw-brand-ink-color   { color: var(--nw-brand-ink) !important; }
.has-nw-brand-ink-background-color { background-color: var(--nw-brand-ink) !important; }
.has-nw-black-color       { color: var(--nw-black) !important; }
.has-nw-black-background-color { background-color: var(--nw-black) !important; }
.has-nw-ink-700-color     { color: var(--nw-ink-700) !important; }
.has-nw-ink-700-background-color { background-color: var(--nw-ink-700) !important; }
.has-nw-ink-500-color     { color: var(--nw-ink-500) !important; }
.has-nw-ink-500-background-color { background-color: var(--nw-ink-500) !important; }
.has-nw-ink-200-color     { color: var(--nw-ink-200) !important; }
.has-nw-ink-200-background-color { background-color: var(--nw-ink-200) !important; }
.has-nw-ink-050-color     { color: var(--nw-ink-050) !important; }
.has-nw-ink-050-background-color { background-color: var(--nw-ink-050) !important; }
.has-nw-brand-soft-color  { color: var(--nw-bg-brand-soft) !important; }
.has-nw-brand-soft-background-color { background-color: var(--nw-bg-brand-soft) !important; }
.has-nw-white-color       { color: var(--nw-white) !important; }
.has-nw-white-background-color { background-color: var(--nw-white) !important; }

/* ============================================================
   Brand-safe overrides — kill emoji-style elements if any
   theme/plugin tries to add them.
   ============================================================ */
img.wp-smiley, img.emoji { display: none !important; }

/* Buttons inside the wp-element-button class need explicit text color
   when placed on outline style + dark band, because wp-element-button
   inherits a default text colour from the theme JSON. */
.wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--nw-fg-1);
  background: transparent;
  border: 1px solid var(--nw-border-strong);
}
.has-nw-black-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--nw-white) !important;
  border-color: var(--nw-ink-700) !important;
}

/* ============================================================
   Dark sections — ensure text on nw-black/nw-ink-900 backgrounds
   is always white. WP's default heading/paragraph colour is black,
   which becomes invisible on dark backgrounds. We force white for
   every text element inside a black-bg group.
   ============================================================ */
.wp-block-group.has-nw-black-background-color,
.wp-block-group.has-nw-ink-900-background-color,
.wp-block-cover.has-nw-black-background-color {
  color: var(--nw-white);
}
.wp-block-group.has-nw-black-background-color :is(h1, h2, h3, h4, h5, h6),
.wp-block-group.has-nw-ink-900-background-color :is(h1, h2, h3, h4, h5, h6) {
  color: var(--nw-white);
}
.wp-block-group.has-nw-black-background-color p:not(.has-text-color),
.wp-block-group.has-nw-ink-900-background-color p:not(.has-text-color) {
  color: var(--nw-ink-300);
}

/* Ghost / outline button on dark band */
.wp-block-group.has-nw-black-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-group.has-nw-ink-900-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--nw-white) !important;
  border-color: var(--nw-ink-700);
  background: transparent;
}
.wp-block-group.has-nw-black-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-group.has-nw-ink-900-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--nw-white);
}

/* Section-heading helpers — overline + heading + lead spacing */
.nw-overline {
  display: block;
  margin-bottom: var(--nw-space-3);
}

/* ============================================================
   Content alignment — make Gutenberg sections flush with the
   header logo and footer columns.
   --------------------------------------------------------------
   Kadence wraps page content in <div class="entry-content-wrap">
   with 32 px lateral padding, then we add the section's own
   24 px padding, then the .wp-block-group__inner-container max-
   width of 1130 px (Kadence default). End result: hero text
   starts at x=104, while header logo is at x=48 and footer logo
   at x=49. To realign:
     1. Strip lateral padding from the entry-content-wrap (the
        section's own 24 px padding becomes the visible gutter).
     2. Bump the constrained inner container to 1240 px so it
        matches the footer-inner max-width.
   ============================================================ */
.entry-content-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wp-block-group__inner-container.is-layout-constrained {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
/* On desktop, top-level sections share the same gutter the parent
   .content-container already provides (24 px). Strip their own
   lateral padding so the inner content sits flush with the header
   logo (x=48) and footer logo (x=49). On mobile the container's
   own gutter shrinks, so we keep the section's padding for safety. */
@media (min-width: 800px) {
  .entry-content > .wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Tighter vertical rhythm on the homepage. */
.entry-content > .wp-block-group {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.entry-content > .wp-block-group:first-child {
  padding-top: 8px !important;  /* hug the header */
}
.entry-content > .wp-block-group.has-nw-black-background-color {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
/* Sections that contain a .nw-section-title-row don't need extra top
   padding — the title block already provides visual breathing room. */
.entry-content > .wp-block-group:has(.nw-section-title-row) {
  padding-top: 24px !important;
}
.entry-content > .wp-block-group:last-child {
  padding-top: 24px !important;
}
/* Last section with white background gets bottom padding so the page
   doesn't end abruptly. Coloured-bg last sections (e.g. the homepage's
   dark partners carousel) keep hugging the footer. */
.entry-content > .wp-block-group.has-nw-white-background-color:last-child {
  padding-bottom: 64px !important;
}
.entry-content > .wp-block-group:not(.has-nw-white-background-color):last-child {
  padding-bottom: 0 !important;
}
/* Kill any trailing space below the last section (Kadence sometimes
   leaves a divider/clearfix between content and footer). */
.entry-content-wrap { padding-bottom: 0 !important; }
.site-main { padding-bottom: 0 !important; }
.content-container { padding-bottom: 0 !important; }

/* ============================================================
   Uppercase headlines — explicit client request.
   Note: this overrides the brand book "no all-caps headlines"
   rule by direct client decision.
   ============================================================ */
.entry-content h1.wp-block-heading,
.nw-section-title-row h2 {
  text-transform: uppercase;
  letter-spacing: -0.005em;  /* slightly tighten when uppercase */
}

/* ============================================================
   Header — give the logo + menu a bit of breathing room at the top
   ============================================================ */
.site-header-row-container,
.site-main-header-wrap,
.site-header { padding-top: 12px; }

/* ============================================================
   Hide the floating reCAPTCHA badge. Google requires that we
   inform users somewhere on the site about reCAPTCHA when the
   badge is hidden — the legal-notice page covers this.
   ============================================================ */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Prevent horizontal scrollbar caused by full-bleed sections — but
   only at the outermost level. If we clip the intermediate parents
   (.content-container, .entry-content, etc.) we kill the full-bleed
   on viewports wider than the content max-width. */
html, body {
  overflow-x: clip;
}

/* Full-bleed for sections that have a background colour — break out
   of the .content-container 24px gutter to span the whole viewport
   (same as the footer). */
.entry-content > .wp-block-group.has-background:not(.has-nw-white-background-color) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0;
}
.entry-content > .wp-block-group.has-background:not(.has-nw-white-background-color) > * {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.entry-content > .wp-block-group.has-nw-white-background-color {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.entry-content > .wp-block-group.has-nw-white-background-color > * {
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   Clients / Partners carousel (Swiper.js based) — dark theme
   ============================================================ */
.nw-clients-carousel {
  background: #222222;  /* exact match with www.neware.cat bg-dark band */
  padding: 72px 0;
  overflow: hidden;
  /* Full-bleed: break out of any ancestor max-width so the dark
     band spans the entire viewport, like the footer. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}
.nw-clients-carousel__label {
  display: block;
  text-align: center;
  font-size: var(--nw-fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nw-brand-60);
  font-weight: var(--nw-fw-bold);
  margin-bottom: 48px;
}
.nw-clients-carousel .swiper {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.nw-clients-carousel .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.nw-clients-carousel .swiper-slide img {
  max-height: 64px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) grayscale(100%);
  opacity: 0.55;
  transition: filter var(--nw-dur-base) var(--nw-ease-standard),
              opacity var(--nw-dur-base) var(--nw-ease-standard);
}
.nw-clients-carousel .swiper-slide:hover img {
  filter: none;
  opacity: 1;
}

/* ============================================================
   Service grid — diamond green badge + icon + big title
   ============================================================ */
.nw-service-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 700px) { .nw-service-grid { grid-template-columns: repeat(3, 1fr); } }

.nw-service-card {
  background: var(--nw-white);
  border: 1px solid var(--nw-border-subtle);
  border-radius: var(--nw-radius-lg);
  padding: 36px 28px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 24px;
  transition: box-shadow var(--nw-dur-base) var(--nw-ease-standard),
              border-color var(--nw-dur-base) var(--nw-ease-standard);
}
.nw-service-card:hover {
  box-shadow: var(--nw-shadow-md);
  border-color: var(--nw-border-strong);
}
.nw-service-card__badge {
  position: absolute;
  top: -24px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 48px; height: 48px;
  background: var(--nw-brand);
  border-radius: var(--nw-radius-sm);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(5, 156, 132, 0.20);
}
.nw-service-card__badge svg {
  transform: rotate(-45deg);
  width: 22px; height: 22px;
  stroke: var(--nw-white);
  stroke-width: 1.8;
  fill: none;
}
.nw-service-card h3 {
  margin: 24px 0 12px;
  font-size: 1.5rem;          /* 24px */
  font-weight: var(--nw-fw-bold);
  letter-spacing: -0.01em;
  color: var(--nw-fg-1);
}
.nw-service-card__divider {
  width: 40px; height: 2px;
  background: var(--nw-brand);
  margin: 0 auto 20px;
  border: 0;
}
.nw-service-card p {
  margin: 0 0 28px;
  font-size: var(--nw-fs-small);
  color: var(--nw-fg-2);
  line-height: var(--nw-lh-loose);
  flex: 1;
}
.nw-service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--nw-brand);
  color: var(--nw-white);
  border-radius: var(--nw-radius-md);   /* 8px — Modern Corporate look */
  font-size: var(--nw-fs-caption);
  font-weight: var(--nw-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  transition: background var(--nw-dur-fast) var(--nw-ease-standard);
}
.nw-service-card__cta:hover {
  background: var(--nw-brand-ink);
  color: var(--nw-white);
}

/* Section heading used above the service grid */
.nw-section-title-row {
  text-align: center;
  margin-bottom: 80px;
  padding-top: 24px;
}
.nw-section-title-row .nw-overline {
  display: inline-block;
  font-size: var(--nw-fs-small);
  letter-spacing: 0.16em;
  color: var(--nw-fg-3);
  margin: 0 0 16px;
}
.nw-section-title-row h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);  /* 32 – 44 */
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.nw-section-title-row h2 .accent { color: var(--nw-brand); }

/* ============================================================
   Featured 3-up section with images (WiFi / Consultoria / Suport)
   ============================================================ */
.nw-featured-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 800px) { .nw-featured-grid { grid-template-columns: repeat(3, 1fr); } }
.nw-featured-card { display: flex; flex-direction: column; }
.nw-featured-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  border-radius: var(--nw-radius-lg);
  margin-bottom: 24px;
  display: block;
  background: var(--nw-ink-050);
}
.nw-featured-card h3 {
  font-size: 1.375rem;
  color: var(--nw-brand);
  margin: 0 0 16px;
  font-weight: var(--nw-fw-bold);
  text-align: center;
}
.nw-featured-card p {
  font-size: var(--nw-fs-small);
  color: var(--nw-fg-2);
  line-height: var(--nw-lh-loose);
  margin: 0 0 16px;
  text-align: justify;
  hyphens: auto;  /* nicer justified wrap */
}
.nw-featured-card p.quote {
  font-style: normal;
  font-weight: var(--nw-fw-bold);
  color: var(--nw-fg-1);
  margin-bottom: 0;
  text-align: left;
  hyphens: manual;
}

/* ============================================================
   Step card — minimalist rectangular card with number + title +
   body, left-aligned. Used for sequential lists (workflows,
   processes). Same vocabulary as the Mockup A "Modern Corporate"
   service cards, but without diamond badge.
   ============================================================ */
.nw-step-grid {
  display: grid;
  gap: 24px;
}
@media (min-width: 700px)  { .nw-step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nw-step-grid { grid-template-columns: repeat(3, 1fr); } }

.nw-step-card {
  background: var(--nw-white);
  border: 1px solid var(--nw-border-subtle);
  border-radius: var(--nw-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--nw-dur-base) var(--nw-ease-standard),
              border-color var(--nw-dur-base) var(--nw-ease-standard);
}
.nw-step-card:hover {
  box-shadow: var(--nw-shadow-md);
  border-color: var(--nw-border-strong);
}
.nw-step-card__num {
  color: var(--nw-fg-3);
  font-size: 13px;
  font-weight: var(--nw-fw-bold);
  letter-spacing: 0.08em;
}
.nw-step-card h3 {
  font-size: 1.375rem;        /* 22px */
  font-weight: var(--nw-fw-bold);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--nw-fg-1);
  line-height: 1.2;
}
.nw-step-card p {
  font-size: var(--nw-fs-small);
  color: var(--nw-fg-2);
  line-height: var(--nw-lh-loose);
  margin: 0;
}

/* ============================================================
   Feature row — minimal info block (green dot + title + body)
   Used on About / internal pages for non-service lists
   (workflow steps, values, principles). Diamond badge is
   reserved for services-only.
   ============================================================ */
.nw-feature-grid {
  display: grid;
  gap: 40px 64px;
}
@media (min-width: 800px) {
  .nw-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 800px) {
  .nw-feature-grid--3col { grid-template-columns: repeat(3, 1fr); }
}
.nw-feature-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}
.nw-feature-item__dot {
  width: 12px;
  height: 12px;
  background: var(--nw-brand);
  border-radius: 50%;
  margin-top: 10px;
  flex-shrink: 0;
}
.nw-feature-item h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;             /* 20px */
  font-weight: var(--nw-fw-bold);
  letter-spacing: -0.01em;
  color: var(--nw-fg-1);
  line-height: 1.3;
}
.nw-feature-item p {
  margin: 0;
  font-size: var(--nw-fs-small);
  color: var(--nw-fg-2);
  line-height: var(--nw-lh-loose);
}

/* Feature-grid bullet variant — single-line items, no description.
   Used on service sub-pages (consultoria, seguretat, ...) for
   short evaluación/punto-clave lists. */
.nw-feature-grid--bullets {
  gap: 14px 48px;
}
.nw-feature-grid--bullets .nw-feature-item {
  align-items: center;
}
.nw-feature-grid--bullets .nw-feature-item__dot {
  margin-top: 0;
  width: 10px;
  height: 10px;
}
.nw-feature-grid--bullets .nw-feature-item h3 {
  margin: 0;
  font-size: 1.0625rem;             /* 17px */
  font-weight: var(--nw-fw-regular);
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--nw-fg-1);
}

/* ============================================================
   Service sub-page sections — alternating image/text rows
   (consultoria, seguretat, xarxes, hosting, sistemes, software)
   ============================================================ */
.nw-service-section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.nw-service-section + .nw-service-section {
  padding-top: 0 !important;        /* avoid double padding between rows */
}
.nw-service-section--alt {
  /* hook for alternating subtle treatments later if needed */
}
.nw-service-section .wp-block-columns.nw-zigzag {
  gap: 64px;
  align-items: center;
}
@media (max-width: 781px) {
  .nw-service-section .wp-block-columns.nw-zigzag {
    gap: 24px;
  }
}
.nw-service-section .wp-block-columns.nw-zigzag.is-reversed {
  flex-direction: row-reverse;
}
@media (max-width: 781px) {
  /* on mobile keep image first regardless of zigzag direction */
  .nw-service-section .wp-block-columns.nw-zigzag.is-reversed {
    flex-direction: column;
  }
}
.nw-service-section h2,
.nw-enfocament h2,
.nw-cta-final h2 {
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

/* Image-less service section variant — used when a block doesn't
   have a vendor illustration (e.g. Apple, Adobe on /software/).
   Constrains the text/bullet block to a readable width instead
   of stretching to the full constrained container. */
.nw-service-section--noimg .wp-block-group__inner-container > *:not(.alignfull):not(.alignwide) {
  max-width: 820px;
}
.nw-service-section--noimg > .wp-block-group__inner-container > *:not(.alignfull):not(.alignwide) {
  max-width: 820px;
}
.nw-service-section--noimg .nw-feature-grid {
  max-width: 820px;
}

/* Paired image-less variant — two related sub-blocks side by side
   (e.g. Apple + Adobe on /software/). Each column keeps its own
   heading + bullet list, single-column inside. */
.nw-service-section--noimg-pair .wp-block-columns {
  gap: 64px;
}
@media (max-width: 781px) {
  .nw-service-section--noimg-pair .wp-block-columns {
    gap: 32px;
  }
}
.nw-feature-grid--single {
  /* force single column even when default media-query upgrades to 2 */
  grid-template-columns: 1fr !important;
}
.nw-service-img img,
.nw-service-section figure.wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--nw-radius-lg, 28px);
  /* Keep each image's native aspect ratio — no forced crop.
     Some illustrations are panoramic (2:1), others square; we
     don't want to clip any of them. Vertical alignment of the
     accompanying text column is centred so heights settle
     visually even when proportions differ. */
  max-height: 480px;
  object-fit: contain;
}

/* "Enfocament neware" block — narrower, no image, info-dense.
   Bottom padding halved so the Revisem CTA section underneath sits
   closer to the closing sub-text under the two cards. */
.nw-enfocament {
  padding-top: 56px !important;
  padding-bottom: 28px !important;
}
.nw-enfocament .nw-feature-grid--bullets {
  /* one column on desktop instead of two; the list reads as a
     short statement rather than a feature catalog. */
  grid-template-columns: 1fr;
  max-width: 720px;
}
.nw-enfocament .nw-lead {
  font-size: 1.375rem;              /* 22px */
  line-height: 1.4;
  font-weight: var(--nw-fw-bold);
  letter-spacing: -0.01em;
  color: var(--nw-fg-1);
  margin: 8px 0 24px;
}

/* Boxed bullet variant — wraps a bullet list inside a soft card frame
   with the bullets arranged in 2 columns. Used on service-page final
   sections (Enfocament neware, Revisem la teva ...) so the closing
   key-points read as a self-contained summary card rather than a
   loose list. Override beats the .nw-enfocament .nw-feature-grid--bullets
   single-column rule above. */
.nw-bullets-card {
  background: var(--nw-bg);
  border: 1px solid var(--nw-border-subtle);
  border-radius: var(--nw-radius-lg);
  padding: 32px 36px;
  margin: 16px 0 24px;
  max-width: 880px;
  box-shadow: var(--nw-shadow-sm);
}
.nw-bullets-card .nw-feature-grid {
  margin: 0;
}
.nw-bullets-card .nw-feature-grid--bullets,
.nw-enfocament .nw-bullets-card .nw-feature-grid--bullets {
  grid-template-columns: 1fr;
  gap: 12px 32px;
  max-width: none;
}
@media (min-width: 720px) {
  .nw-bullets-card .nw-feature-grid--bullets,
  .nw-enfocament .nw-bullets-card .nw-feature-grid--bullets {
    grid-template-columns: 1fr 1fr;
  }
}
.nw-bullets-card .nw-feature-item h3 {
  font-size: 1rem;
}
/* Small label preceding the boxed list (e.g. "Oferim:" / "Podem analitzar:") */
.nw-bullets-card-label {
  font-size: 0.875rem;
  font-weight: var(--nw-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nw-fg-3);
  margin: 0 0 16px;
}

/* 2-column layout for the Enfocament-section's closing pair of
   thoughts: left side = "No oferim només..." + card + summary;
   right side = "La teva web... estan preparats per créixer?" + card +
   summary. Both leads use .nw-lead so they share size + weight.

   Equal-height is enforced with CSS subgrid: the outer .wp-block-columns
   defines 3 grid rows (lead / card / closing-paragraph), and each
   .wp-block-column inherits those rows via grid-template-rows: subgrid.
   That guarantees row 2 (the card) is the same pixel height on both
   sides, regardless of how long each column's content is. */
.nw-enfocament-cols.wp-block-columns,
.nw-enfocament-cols.wp-block-columns.are-vertically-aligned-top {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 16px 32px;
  margin-top: 8px;
  align-items: stretch !important;
}
.nw-enfocament-cols .wp-block-column,
.nw-enfocament-cols .wp-block-column.is-vertically-aligned-top {
  min-width: 0;
  display: grid !important;
  grid-template-rows: subgrid !important;
  grid-row: span 3 !important;
  gap: 16px 0;
  align-self: stretch !important;
}
.nw-enfocament-cols .nw-bullets-card {
  max-width: none;
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.nw-enfocament-cols .nw-bullets-card .nw-feature-grid {
  /* Keep bullets pinned to the top of the (now stretched) card so
     the white space lands below the bullets, not between rows. */
  flex: 0 0 auto;
}
/* On narrower viewports the 2-col card forces 1-col bullets so each
   item stays readable inside the smaller card width. */
@media (max-width: 1024px) {
  .nw-enfocament-cols .nw-bullets-card .nw-feature-grid--bullets {
    grid-template-columns: 1fr;
  }
}
.nw-enfocament-cols .nw-lead {
  /* Match both column heads to the same .nw-lead treatment defined
     above (22px / bold / negative tracking) — no need to repeat,
     just guarantee they aren't restyled by adjacent rules. */
  max-width: none;
  margin: 0 0 16px;
}

/* CTA final block on service pages (white background, last) */
.nw-cta-final,
.entry-content > .wp-block-group.nw-cta-final,
.entry-content > .wp-block-group.nw-cta-final:last-child {
  padding-top: 14px !important;
  padding-bottom: 80px !important;
  text-align: center;
}
/* Ensure breathing room under the final CTA button row */
.nw-cta-final .wp-block-buttons {
  margin-bottom: 24px;
}
.nw-cta-final h2 {
  margin-top: 0;
}
.nw-cta-final .nw-cta-row {
  margin: 24px 0 0;
}

/* ============================================================
   Info card grid — rectangular cards with light border,
   bold title (green dot final) and short description.
   Used for hero feature blocks where each item needs more
   weight than a bullet but no image (proves Pattern B
   d'aquest projecte: no diamonds, no numbered cards).
   ============================================================ */
.nw-card-grid {
  display: grid;
  gap: 20px;
  /* breathing room above and below so the paragraph that follows
     the cards isn't optically glued to the last row */
  margin: 16px 0 40px;
}
@media (min-width: 800px) {
  .nw-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .nw-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .nw-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
  .nw-card-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .nw-card-grid--6 { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 800px) and (max-width: 1099px) {
  /* fall back to 3 columns on medium screens — 5 items in 3+2 */
  .nw-card-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .nw-card-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
/* Smaller padding for 6-col variant — narrower cards */
.nw-card-grid--6 .nw-card { padding: 22px 18px 24px; }
.nw-card-grid--6 .nw-card h3 { font-size: 0.95rem; }
.nw-card-grid--6 .nw-card p { font-size: 0.8125rem; }
/* Hero card grid set up as 2-column (3 rows × 2 cards for 5–6 items).
   Used on /serveis/xarxes/, /serveis/sistemes/, /serveis/software/ so
   the hero proposition reads as a compact 2-column matrix instead of
   a wide 5-up row. */
@media (min-width: 800px) {
  .nw-card-grid--2col { grid-template-columns: repeat(2, 1fr); }
}
/* Tighten the gap between the hero card group and the next section.
   The hero group gets .nw-hero-cards-group and the sibling rule pulls
   the following section closer (it normally has 56–96 px of top
   padding from .nw-service-section). */
.nw-hero-cards-group {
  padding-bottom: 16px !important;
}
.nw-hero-cards-group + .wp-block-group.nw-service-section {
  padding-top: 24px !important;
}
/* Same idea for the first non-hero section that follows the page's
   intro group (used on consultoria/seguretat where the intro has no
   card grid but still needs less air before the first H2 module). */
.nw-intro-tight + .wp-block-group.nw-service-section {
  padding-top: 24px !important;
}

/* Full-width bullets-card variant — used in consultoria/seguretat
   Enfocament section so the boxed list spans the same horizontal
   space as the paragraphs above and below it (from the left margin
   of the inner-container to the right). Bullets inside are forced
   to 3 columns on desktop to spread visually across the wider
   surface; 1 column on mobile. */
.nw-bullets-card--right {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100%;
}
@media (min-width: 900px) {
  .nw-bullets-card--right .nw-feature-grid--bullets {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 2-column narrative layout for the Enfocament section on pages
   that don't have a bullet list to box (xarxes / sistemes /
   software). Left = "We don't just sell X" framing; right = "Do you
   want to install or review?" question. Same CSS-Grid trick as
   .nw-enfocament-cols so columns stretch equal-height. */
.nw-narrative-cols.wp-block-columns,
.nw-narrative-cols.wp-block-columns.are-vertically-aligned-top {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px 32px !important;
  align-items: stretch !important;
  margin-top: 12px;
}
.nw-narrative-cols .wp-block-column,
.nw-narrative-cols .wp-block-column.is-vertically-aligned-top {
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}
.nw-narrative-cols .nw-lead {
  margin: 0 0 12px;
  max-width: none;
}

/* Tighter top padding for the final CTA section on hosting so the
   Revisem header sits closer to the columns above it. */
.nw-cta-final--tight {
  padding-top: 0 !important;
  margin-top: -8px;
}
/* Smaller padding for 5-col variant — narrower cards */
.nw-card-grid--5 .nw-card { padding: 24px 22px 26px; }
.nw-card-grid--5 .nw-card h3 { font-size: 1rem; }
.nw-card-grid--5 .nw-card p { font-size: 0.875rem; }
.nw-card {
  background: var(--nw-white);
  border: 1px solid var(--nw-ink-100, #e5e7eb);
  border-radius: 16px;
  padding: 28px 28px 32px;
  transition: border-color var(--nw-dur-fast) var(--nw-ease-standard),
              transform var(--nw-dur-fast) var(--nw-ease-standard);
}
.nw-card:hover {
  border-color: var(--nw-ink-200, #d1d5db);
  transform: translateY(-2px);
}
.nw-card h3 {
  margin: 0 0 12px;
  font-size: 1.0625rem;             /* 17px */
  font-weight: var(--nw-fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--nw-fg-1);
}
.nw-card p {
  margin: 0;
  font-size: var(--nw-fs-small);
  color: var(--nw-fg-2);
  line-height: var(--nw-lh-loose);
}

/* ============================================================
   Clients tabs — sector filter above the grid (UI.com style).
   Active tab gets green underline; inactive tabs are muted.
   ============================================================ */
/* Tighten gap between intro group and the tabs+grid group on /casos-exit/ */
.has-section-title-row + .nw-clients-section,
.has-section-title-row + .wp-block-group.nw-clients-section {
  margin-top: 0 !important;
}
/* Override Kadence/global block-gap and our own padding for the clients section */
.entry-content > .wp-block-group.nw-clients-section {
  padding-top: 4px !important;
  padding-bottom: 0 !important;
}
/* Tighten gap between grid and final CTA block on /casos-exit/ */
.nw-clients-section + .nw-cta-final,
.nw-clients-section + .wp-block-group.nw-cta-final {
  margin-top: 0 !important;
}
.nw-clients-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--nw-ink-100, #e5e7eb);
  padding-bottom: 0;
}
.nw-clients-tabs button {
  background: transparent;
  border: 0;
  padding: 12px 4px;
  margin: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: var(--nw-fw-regular);
  color: var(--nw-fg-2);
  cursor: pointer;
  position: relative;
  bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--nw-dur-fast) var(--nw-ease-standard),
              border-color var(--nw-dur-fast) var(--nw-ease-standard);
  white-space: nowrap;
}
.nw-clients-tabs button:hover {
  color: var(--nw-fg-1);
}
.nw-clients-tabs button.active {
  color: var(--nw-fg-1);
  border-bottom-color: var(--nw-brand);
  font-weight: var(--nw-fw-bold);
}

.nw-clients-grid__cell {
  transition: opacity var(--nw-dur-fast) var(--nw-ease-standard);
}

/* ============================================================
   Clients grid — static logo grid for /casos-exit/.
   Auto-fit columns sized 160-200px each, soft border, hover
   restores colour from default grayscale. Sober alternative to
   the home carousel for the dedicated case-studies page.
   ============================================================ */
.nw-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 12px;
  margin: 8px 0 0;
}
.nw-clients-grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  min-height: 72px;
  /* No card / border / background — logos float on the page's white
     background, UI.com style. */
}
.nw-clients-grid__cell img {
  max-width: 100%;
  max-height: 56px;
  height: auto;
  width: auto;
  /* default = greyscale "ben marcat" (UI.com style). Hover on a tab
     paints just the cells of that sector and fades the rest. */
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter var(--nw-dur-fast) var(--nw-ease-standard),
              opacity var(--nw-dur-fast) var(--nw-ease-standard);
}
/* Cells of the actively hovered/clicked sector → full colour */
.nw-clients-grid__cell.is-match img {
  filter: grayscale(0%);
  opacity: 1;
}
/* Cells outside the active sector → faded out further */
.nw-clients-grid__cell.is-other img {
  filter: grayscale(100%);
  opacity: 0.28;
}

/* ============================================================
   Contact page — /contacte/
   2-col layout: left has H2 + intro + áreas, right has the form.
   Below: address / phone / email block + tagline.
   ============================================================ */
.nw-contact-section {
  margin-top: 16px;
}
.nw-contact-cols {
  gap: 56px;
  align-items: flex-start;
}
.nw-contact-left h2 {
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.nw-contact-left p {
  color: var(--nw-fg-2, #4b5563);
  max-width: 46ch;
}
.nw-areas-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.nw-areas-list li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-weight: var(--nw-fw-medium, 500);
  font-size: 16px;
  line-height: 1.5;
}
.nw-areas-list .nw-dot-mark {
  position: absolute;
  left: 0;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nw-brand);
  display: block;
}
/* Areas as 2-column list — borderless, just dot + title */
.nw-areas-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 28px;
  margin: 24px 0 0;
}
.nw-area-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nw-area-card:hover {
  box-shadow: none;
  border-color: transparent;
  transform: none;
}
.nw-area-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nw-brand);
  flex-shrink: 0;
}
.nw-area-card__title {
  font-weight: var(--nw-fw-bold, 700);
  font-size: 15px;
  line-height: 1.35;
  color: var(--nw-fg-1, #111);
  letter-spacing: -0.005em;
}
@media (max-width: 540px) {
  .nw-areas-cards { grid-template-columns: 1fr; }
}
/* Form styling — CF7 generic but constrained to .nw-contact-right */
.nw-contact-right .wpcf7-form {
  display: grid;
  gap: 14px;
}
.nw-contact-right .wpcf7-form p {
  margin: 0;
}
.nw-contact-right .wpcf7-form-control-wrap {
  display: block;
}
.nw-contact-right .wpcf7-form input[type=text],
.nw-contact-right .wpcf7-form input[type=email],
.nw-contact-right .wpcf7-form input[type=tel],
.nw-contact-right .wpcf7-form textarea {
  width: 100%;
  border: 1px solid var(--nw-ink-100, #e5e7eb);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  background: var(--nw-white, #fff);
  transition: border-color var(--nw-dur-fast) var(--nw-ease-standard),
              box-shadow var(--nw-dur-fast) var(--nw-ease-standard);
}
.nw-contact-right .wpcf7-form input[type=text]:focus,
.nw-contact-right .wpcf7-form input[type=email]:focus,
.nw-contact-right .wpcf7-form input[type=tel]:focus,
.nw-contact-right .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--nw-brand);
  box-shadow: 0 0 0 3px rgba(5, 156, 132, 0.12);
}
.nw-contact-right .wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}
.nw-contact-right .wpcf7-form input[type=submit] {
  display: inline-block;
  background: var(--nw-brand);
  color: #fff;
  border: 0;
  padding: 14px 28px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--nw-fw-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  transition: background var(--nw-dur-fast) var(--nw-ease-standard),
              transform var(--nw-dur-fast) var(--nw-ease-standard);
}
.nw-contact-right .wpcf7-form input[type=submit]:hover {
  background: var(--nw-brand-dark, #047A66);
  transform: translateY(-1px);
}
.nw-contact-right .wpcf7-form .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--nw-fg-2, #4b5563);
}
.nw-contact-right .wpcf7-form .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.nw-contact-right .wpcf7-form .wpcf7-list-item-label {
  flex: 1;
}
.nw-contact-right .wpcf7-form .wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: 13px;
  margin-top: 4px;
}
.nw-contact-right .wpcf7 .wpcf7-response-output {
  border: 0;
  background: #f0fdf4;
  color: #166534;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 0 0;
}
.nw-contact-right .wpcf7-form.invalid .wpcf7-response-output,
.nw-contact-right .wpcf7-form.failed .wpcf7-response-output {
  background: #fef2f2;
  color: #991b1b;
}
/* Hide CF7 native labels (we use placeholders) — but show field labels via wpcf7-form-label class if present */
.nw-contact-right .wpcf7-form > p label {
  display: block;
  font-size: 12px;
  font-weight: var(--nw-fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nw-fg-2, #4b5563);
  margin-bottom: 6px;
}

/* Contact info — stacked under the areas inside the left column
   (no separate section anymore; lives inside .nw-contact-left) */
.nw-contact-stack {
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nw-contact-stack__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  border-left: 2px solid var(--nw-brand);
}
.nw-contact-stack__label {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: var(--nw-fw-bold, 700);
  color: var(--nw-fg-2, #4b5563);
  line-height: 1.2;
}
.nw-contact-stack__link {
  color: var(--nw-fg-1, #111);
  text-decoration: none;
  font-weight: var(--nw-fw-medium, 500);
  font-size: 15px;
  line-height: 1.45;
  transition: color var(--nw-dur-fast) var(--nw-ease-standard);
}
.nw-contact-stack__link:hover {
  color: var(--nw-brand);
}
.nw-contact-stack__foot {
  margin: 56px auto 0;
  max-width: 720px;
  color: var(--nw-fg-2, #4b5563);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   Support page — /suport/
   Same 2-col layout as /contacte/ but with a native form that
   posts to the WP REST bridge → Zendesk API → creates a ticket.
   ============================================================ */
.nw-support-section {
  padding-bottom: 80px !important;
}
.entry-content > .wp-block-group.nw-support-section:last-child {
  padding-bottom: 80px !important;
}
.nw-support-cols {
  gap: 56px;
  align-items: flex-start;
}
.nw-support-left h2 {
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.nw-support-left p {
  color: var(--nw-fg-2, #4b5563);
  max-width: 46ch;
}
.nw-support-perks {
  margin-top: 24px;
}
.nw-support-stack {
  margin-top: 28px;
}

/* Native form built without CF7 / Fluent Forms — direct to Zendesk API */
.nw-support-form {
  display: grid;
  gap: 16px;
}
.nw-form-row {
  display: grid;
  gap: 16px;
}
.nw-form-row--2col {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
  .nw-form-row--2col { grid-template-columns: 1fr; }
}
.nw-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nw-form-field label {
  font-size: 12px;
  font-weight: var(--nw-fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nw-fg-2, #4b5563);
}
.nw-form-field .nw-required {
  color: var(--nw-brand);
}
.nw-form-field input[type=text],
.nw-form-field input[type=email],
.nw-form-field input[type=tel],
.nw-form-field select,
.nw-form-field textarea {
  width: 100%;
  border: 1px solid var(--nw-ink-100, #e5e7eb);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  background: var(--nw-white, #fff);
  transition: border-color var(--nw-dur-fast) var(--nw-ease-standard),
              box-shadow var(--nw-dur-fast) var(--nw-ease-standard);
  appearance: none;
  -webkit-appearance: none;
}
.nw-form-field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234b5563' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 38px;
  cursor: pointer;
}
.nw-form-field input:focus,
.nw-form-field select:focus,
.nw-form-field textarea:focus {
  outline: none;
  border-color: var(--nw-brand);
  box-shadow: 0 0 0 3px rgba(5, 156, 132, 0.12);
}
.nw-form-field textarea {
  min-height: 140px;
  resize: vertical;
}
.nw-form-field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--nw-fw-medium, 500);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--nw-fg-2, #4b5563);
  cursor: pointer;
}
.nw-form-field--checkbox input[type=checkbox] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--nw-brand);
  flex-shrink: 0;
}
.nw-form-field--checkbox a {
  color: var(--nw-brand);
  text-decoration: underline;
}
.nw-form-actions {
  margin-top: 8px;
}
.nw-form-submit {
  display: inline-block;
  background: var(--nw-brand);
  color: #fff;
  border: 0;
  padding: 14px 32px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--nw-fw-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--nw-dur-fast) var(--nw-ease-standard),
              transform var(--nw-dur-fast) var(--nw-ease-standard);
}
.nw-form-submit:hover:not(:disabled) {
  background: var(--nw-brand-dark, #047a66);
  transform: translateY(-1px);
}
.nw-form-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
.nw-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
.nw-form-msg {
  margin-top: 8px;
  padding: 0;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
}
.nw-form-msg:empty {
  display: none;
}
.nw-form-msg--ok {
  background: #f0fdf4;
  color: #166534;
  padding: 16px 20px;
}
.nw-form-msg--err {
  background: #fef2f2;
  color: #991b1b;
  padding: 16px 20px;
}
.nw-form-msg--err ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* ============================================================
   Success confirmation card — shown after a ticket is created.
   Replaces the form with a centered, visually rich confirmation.
   ============================================================ */
.nw-form-success {
  background: var(--nw-white, #fff);
  border: 1px solid var(--nw-border-subtle, #e5e7eb);
  border-radius: var(--nw-radius-lg, 12px);
  padding: 48px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.nw-form-success__icon {
  margin-bottom: 20px;
  line-height: 0;
}
.nw-form-success__icon svg {
  display: block;
  filter: drop-shadow(0 4px 12px rgba(5, 156, 132, 0.25));
}
.nw-form-success__title {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: var(--nw-fw-bold, 700);
  letter-spacing: -0.01em;
  color: var(--nw-fg-1, #111);
  text-transform: uppercase;
  line-height: 1.2;
}
.nw-form-success__title .nw-dot {
  color: var(--nw-brand);
}
.nw-form-success__num {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--nw-fg-2, #4b5563);
}
.nw-form-success__num strong {
  display: inline-block;
  background: rgba(5, 156, 132, 0.08);
  color: var(--nw-brand);
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: var(--nw-fw-bold, 700);
  font-size: 17px;
  letter-spacing: 0.02em;
}
.nw-form-success__msg {
  margin: 0 0 28px;
  max-width: 48ch;
  color: var(--nw-fg-2, #4b5563);
  line-height: 1.55;
  font-size: 15px;
}
.nw-form-success__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.nw-form-success__btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--nw-fw-bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--nw-brand);
  color: #fff;
  border: 1px solid var(--nw-brand);
  transition: background var(--nw-dur-fast) var(--nw-ease-standard),
              color var(--nw-dur-fast) var(--nw-ease-standard),
              transform var(--nw-dur-fast) var(--nw-ease-standard);
}
.nw-form-success__btn:hover {
  background: var(--nw-brand-dark, #047a66);
  transform: translateY(-1px);
}
.nw-form-success__btn--secondary {
  background: transparent;
  color: var(--nw-fg-1, #111);
  border-color: var(--nw-ink-100, #e5e7eb);
}
.nw-form-success__btn--secondary:hover {
  background: var(--nw-ink-50, #f9fafb);
  color: var(--nw-fg-1, #111);
  border-color: var(--nw-ink-200, #d1d5db);
}

/* ============================================================
   Footer flush — kill the 80px gap Kadence injects between
   the last block (e.g. dark partners carousel) and the footer.
   ============================================================ */
#primary.content-area {
  margin-bottom: 0 !important;
}

/* ============================================================
   Legal pages — /condicions-generals/, /politica-de-privacitat/
   Sober, legible long-form text. No diamond badges, no card
   shells. Just typography that reads cleanly for compliance.
   ============================================================ */
.nw-legal-section {
  padding-top: 16px !important;
  padding-bottom: 96px !important;
  max-width: 820px;
  margin: 0 auto;
}
.nw-legal-meta {
  margin: 8px 0 0 !important;
  font-size: 13px;
  color: var(--nw-fg-3, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--nw-fw-bold, 700);
}
.nw-legal-section .nw-legal-h2,
.nw-legal-section h2.wp-block-heading {
  margin-top: 48px;
  margin-bottom: 16px;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  position: relative;
  padding-bottom: 12px;
}
.nw-legal-section .nw-legal-h2::after,
.nw-legal-section h2.wp-block-heading::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--nw-brand);
}
.nw-legal-section .nw-legal-h2:first-of-type,
.nw-legal-section h2.wp-block-heading:first-of-type {
  margin-top: 8px;
}
.nw-legal-section .nw-legal-h3,
.nw-legal-section h3.wp-block-heading {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-weight: var(--nw-fw-bold, 700);
  color: var(--nw-fg-1, #111);
  letter-spacing: -0.005em;
}
.nw-legal-section p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 14px;
  color: var(--nw-fg-2, #4b5563);
  text-wrap: pretty;
}
.nw-legal-section p:has(strong:only-child) {
  /* dash bullets we built from <p> starting with "–" stay visually tight */
  margin-bottom: 6px;
}
.nw-legal-section a {
  color: var(--nw-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nw-legal-section a:hover {
  color: var(--nw-brand-dark, #047a66);
}
/* Force the section to not stretch full width visually */
.entry-content > .wp-block-group.nw-legal-section:last-child {
  padding-bottom: 96px !important;
}
@media (max-width: 540px) {
  .nw-form-success {
    padding: 36px 20px;
  }
  .nw-form-success__title {
    font-size: 1.25rem;
  }
}

/* Tighten the contact section spacing now that all content lives inline */
.nw-contact-section {
  padding-bottom: 80px !important;
}
/* Override global :last-child padding-bottom: 0 rule */
.entry-content > .wp-block-group.nw-contact-section:last-child {
  padding-bottom: 80px !important;
}
@media (max-width: 768px) {
  .nw-contact-cols {
    gap: 32px;
  }
  .nw-contact-info-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ============================================================
   Single CTA pill (used at the dark CTA band)
   ============================================================ */
.nw-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: var(--nw-brand);
  color: var(--nw-white) !important;
  border-radius: var(--nw-radius-md);  /* 8px — matches the rest of the buttons */
  font-size: var(--nw-fs-body);
  font-weight: var(--nw-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  transition: background var(--nw-dur-fast) var(--nw-ease-standard),
              transform var(--nw-dur-fast) var(--nw-ease-standard);
}
.nw-cta-pill:hover {
  background: var(--nw-brand-ink);
  color: var(--nw-white) !important;
  transform: translateY(-1px);
}

/* ============================================================
   Custom site footer (footer.php override)
   Dark band with 4 columns + legal row, per Direcció A mockup.
   ============================================================ */
.nw-site-footer {
  background: var(--nw-black);
  color: var(--nw-white);
  padding: var(--nw-space-16) var(--nw-gutter) var(--nw-space-8);
  font-family: var(--nw-font-sans);
}
.nw-site-footer__inner {
  max-width: var(--nw-content-max);
  margin: 0 auto;
  display: grid;
  gap: var(--nw-space-8);
}
@media (min-width: 800px) {
  .nw-site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.nw-footer-col--brand { max-width: 360px; }
.nw-footer-logo { display: inline-block; margin-bottom: var(--nw-space-4); }
.nw-footer-logo img { display: block; height: 32px; width: auto; }
.nw-footer-tagline {
  color: var(--nw-ink-300);
  font-size: var(--nw-fs-small);
  line-height: var(--nw-lh-loose);
  margin: 0;
}
.nw-footer-dot { color: var(--nw-brand); }

.nw-footer-heading {
  color: var(--nw-white);
  font-size: var(--nw-fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--nw-fw-bold);
  margin: 0 0 var(--nw-space-4);
}
.nw-footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nw-footer-menu li {
  margin: 0;
}
.nw-footer-menu a,
.nw-site-footer a {
  display: block;
  padding: 4px 0;
  color: var(--nw-ink-300);
  font-size: var(--nw-fs-small);
  text-decoration: none;
  transition: color var(--nw-dur-fast) var(--nw-ease-standard);
  border: none;
}
.nw-footer-menu a:hover,
.nw-site-footer a:hover {
  color: var(--nw-brand-60);
  border: none;
}

.nw-footer-legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--nw-ink-800);
  padding-top: var(--nw-space-6);
  margin-top: var(--nw-space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--nw-space-4);
  color: var(--nw-ink-400);
  font-size: var(--nw-fs-caption);
}
.nw-footer-legal a {
  display: inline;
  padding: 0;
  color: var(--nw-ink-400);
}
.nw-footer-legal a:hover { color: var(--nw-white); }
.nw-footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }