/* ============================================================
   PBS BRAND COLOURS - single definition, used by every page.
   Source: PBS Visual Identity Guidelines v1.5 (core palette).
   Tint values are sampled from the tint swatches on page 17 of the guidelines,
   which show the swatches without hex values.
   Pages reference these with var(--name). Do not redefine them in a page.
   ============================================================ */
:root{
  --azure:#005fff;
  --teal:#59d1c7;
  --raspberry:#d91c59;
  --midnight:#132662;
  --midnight-dark:#05142b;
  --white:#ffffff;
  /* Paper: a tint of white (very pale cool white). Permitted neutral for section backgrounds; not a brand colour. */
  --paper:#f4f7fd;
  --azure-75:#669fff;
  --azure-50:#99bfff;
  --azure-25:#ccdfff;
  --teal-75:#9be3dd;
  --teal-50:#bdede9;
  --teal-25:#def6f4;
  --raspberry-75:#ed729a;
  --raspberry-50:#f3a1bc;
  --raspberry-25:#f9d0dd;
  /* Raspberry-webdark: deep raspberry for web use only (Recruitment hero/closing grounds). Not an official brand colour; never use in print. */
  --raspberry-webdark:#4a0820;
  --azure-rgb:0,95,255;
  --teal-rgb:89,209,199;
  --raspberry-rgb:217,28,89;
  --raspberry-webdark-rgb:74,8,32;
  --midnight-rgb:19,38,98;
  --midnight-dark-rgb:5,20,43;
}

/* ============================================================
   SHARED LAYOUT AND TYPE TOKENS - single definition, used by every page and module.
   Pages must not redeclare these in :root. A page that genuinely needs a different value
   overrides it inside its own .pbs-page rule, not :root.
   ============================================================ */
:root{
  --f-display:'Outfit',Arial,sans-serif;    /* headlines, subheads */
  --f-body:'Montserrat',Arial,sans-serif;   /* body text */
  --max:1240px;                             /* standard content width */
  --wrap:min(1540px,90vw);                  /* wide content width (case-study pages) */
  --ease:cubic-bezier(.22,.8,.24,1);        /* standard transition curve */
  --ink:var(--midnight);                    /* default text colour */
  --h1-l:clamp(52px,9vw,120px);             /* hero headline: large (hubs, Home, Contact) */
  --h1-m:clamp(4.4rem,7vw,8rem);            /* hero headline: medium (case studies) */
  --h1-s:clamp(40px,5.4vw,76px);
  --h2:clamp(29px,3.7vw,48px);
  --h2-s:clamp(24px,2.6vw,32px);
  --h2-cta:clamp(34px,5vw,62px);
  --h3:20px;
  --h3-l:clamp(1.5rem,2vw,2.15rem);            /* hero headline: small (articles) */
}

/* Base reset, defined once: border-box sizing and no default margin or padding.
   The nav and footer modules rely on this. */
*{margin:0;padding:0;box-sizing:border-box}

/* FOOTER LINK HOVER - no underline, solo cambio colore */
footer a,
.footer a,
footer a span,
.footer a span {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
footer a:hover,
.footer a:hover,
footer a:hover span,
.footer a:hover span {
    color: var(--teal) !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
footer a::before,
footer a::after,
.footer a::before,
.footer a::after {
    display: none !important;
    content: none !important;
}

/* PBS sector pages - make all hero layouts match Retail */
.pbs-page .hero .wrap{
    max-width:1200px !important;
    width:100% !important;
    margin:0 auto !important;
    padding:96px 24px 104px !important;
    text-align:left !important;
    display:block !important;
}
.pbs-page .hero .crumb,
.pbs-page .hero h1{
    text-align:left !important;
    margin-left:0 !important;
}
  /* Rimuove sottolineatura link attivo footer */
footer a::after,
footer a:hover::after,
.footer a::after,
.footer a:hover::after {
    display: none !important;
    content: none !important;
}
footer a,
.footer a {
    text-decoration: none !important;
    border-bottom: none !important;
}

footer a:hover,
.footer a:hover {
    color: var(--teal) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}
/* SEARCH PAGE - trasforma il bottone blu in una X semplice */
.hs-search-field__button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  color: var(--midnight-dark) !important;
  font-size: 0 !important;
}
.hs-search-field__button::before {
  content: "×" !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--midnight-dark) !important;
}
.hs-search-field__button svg {
  display: none !important;
}

  


/* KEYBOARD FOCUS (site-wide default). Azure ring with a white gap: the white gap keeps it visible on dark and Azure/Raspberry grounds,
   the Azure ring shows on light grounds. Zero specificity (:where) so any page or module that sets its own ring (e.g. Teal in the closing sections) wins. */
:where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:3px solid var(--azure);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff;
}

/* Eyebrow: the small uppercase label above a heading. One style site-wide; pages may override colour and spacing only. */
.pbs-page .eyebrow{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}

/* H1: the hero headline, one per page. Pages may set the size token (--h1-l large, --h1-m medium, --h1-s small) and layout only. */
.pbs-page h1{font-family:var(--f-display);font-weight:800;font-size:var(--h1-l);line-height:.98;letter-spacing:0;text-transform:none}

/* H2: section heading. Size comes from --h2; colour and margin are set by context. CTA and case-chapter headings keep their own rules. */
.pbs-page h2{font-family:var(--f-display);font-weight:800;font-size:var(--h2);line-height:1.15}

/* H2, small: subheadings inside long-form text (articles, policy pages). Class art-h. */
.pbs-page .art-h{font-family:var(--f-display);font-weight:800;font-size:var(--h2-s);line-height:1.2}

/* H2, closing call to action: large centred or statement heading ending a page or block. Class cta-h2. */
.pbs-page .cta-h2{font-family:var(--f-display);font-weight:800;font-size:var(--h2-cta);line-height:1.08;letter-spacing:0}

/* Mosaic tiles: the tiles are native <button> elements and the theme's Brand Kit gives every <button> a 50px radius. Keep them square. */
.pbs-page button.pos-mosaic-tile{border-radius:0 !important}

/* H3, item title: card and list-item titles (case cards, snapshot cards, location cards, offices). Feature and display H3s keep their own rules. */
.pbs-page .card h3,.pbs-page .snap-body h3,.pbs-page .loc-card h3,.pbs-page .office h3{font-family:var(--f-display);font-weight:800;font-size:var(--h3);line-height:1.25}

/* H3, feature title: case-study step titles and related-card titles and the closing form panel title. */
.pbs-page .step h3,.pbs-page .case-copy h3,.pbs-page .close-form-title{font-family:var(--f-display);font-weight:800;font-size:var(--h3-l);line-height:1.1;letter-spacing:0}

/* Mosaic tiles (widget): structure, tile behaviour, hover wash, numeral, title, copy and mobile stacking. Backdrop: the page sets its photo with --mosaic-photo on .pos-mosaic; the lift and dark gradient are standard. Pages keep only that, plus any wash colours. Title size is the mosaic title style: 18.4 to 25.6px. */
.pbs-page .pos-mosaic{--mosaic-title:clamp(1.15rem,1.5vw,1.6rem);position:relative;overflow:hidden;isolation:isolate;background:var(--midnight) !important}
.pbs-page .pos-mosaic::before{content:"";position:absolute;inset:0;z-index:0;background:var(--mosaic-photo) center/cover no-repeat;filter:brightness(1.15) saturate(1.05)}
.pbs-page .pos-mosaic::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(var(--midnight-rgb),.45),rgba(var(--midnight-dark-rgb),.88))}
.pbs-page .pos-mosaic-grid{z-index:1}
.pbs-page .pos-mosaic-tile{--wash:var(--azure);position:relative;isolation:isolate;border:0;border-right:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25);background:rgba(var(--midnight-dark-rgb),.18) !important;color:#fff;text-align:left;padding:clamp(24px,2.4vw,38px);cursor:pointer;overflow:hidden}
.pbs-page .pos-mosaic-tile::after{background:rgba(var(--midnight-dark-rgb),.45) !important}
.pbs-page .pos-mosaic-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}
.pbs-page .pos-mosaic-tile:nth-child(4n){border-right:0}
.pbs-page .pos-mosaic-tile:nth-child(n+5){border-bottom:0}
.pbs-page .pos-mosaic-tile::after{content:'';position:absolute;inset:0;z-index:0;background:rgba(var(--midnight-dark-rgb),.45);pointer-events:none;transition:opacity 900ms ease-in-out}
.pbs-page .pos-mosaic-wash{position:absolute;inset:-1px;z-index:1;background:var(--wash);clip-path:circle(0% at 14% 86%);transition:clip-path 1300ms ease-in-out;pointer-events:none}
.pbs-page .pos-mosaic-tile:hover .pos-mosaic-wash,.pbs-page .pos-mosaic-tile:focus-visible .pos-mosaic-wash{clip-path:circle(145% at 14% 86%)}
.pbs-page .pos-mosaic-tile:hover::after,.pbs-page .pos-mosaic-tile:focus-visible::after{opacity:0}
.pbs-page .pos-mosaic-big{position:absolute;top:-15%;left:50%;z-index:2;transform:translateX(-50%) rotate(-9deg);font-family:var(--f-display);font-weight:900;font-size:clamp(180px,23vw,350px);line-height:1;letter-spacing:-.08em;color:#fff;opacity:0;white-space:nowrap;pointer-events:none;user-select:none;transition:opacity 1300ms ease-in-out,transform 1300ms ease-in-out}
.pbs-page .pos-mosaic-tile:nth-child(even) .pos-mosaic-big{transform:translateX(-50%) rotate(7deg)}
.pbs-page .pos-mosaic-tile:hover .pos-mosaic-big,.pbs-page .pos-mosaic-tile:focus-visible .pos-mosaic-big{opacity:.22;transform:translateX(-50%) translateY(7%) rotate(-9deg)}
.pbs-page .pos-mosaic-tile:nth-child(even):hover .pos-mosaic-big,.pbs-page .pos-mosaic-tile:nth-child(even):focus-visible .pos-mosaic-big{transform:translateX(-50%) translateY(7%) rotate(7deg)}
.pbs-page .pos-mosaic-content{position:absolute;left:clamp(24px,2.4vw,38px);right:clamp(24px,2.4vw,38px);z-index:3;top:calc(100% - clamp(24px,2.4vw,38px) - 67.4px - 1.1*var(--mosaic-title))}
.pbs-page .pos-mosaic-tile:hover .pos-mosaic-content,.pbs-page .pos-mosaic-tile:focus-visible .pos-mosaic-content{position:relative;left:auto;right:auto;top:auto;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.pbs-page .pos-mosaic-num{font-family:var(--f-display);font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--teal);margin-bottom:10px;transition:color .35s ease}
.pbs-page .pos-mosaic-title{font-family:var(--f-display);font-weight:800;line-height:1.1;letter-spacing:0}
.pbs-page .pos-mosaic-copy{max-width:31ch;margin-top:16px;font-family:var(--f-body);font-size:clamp(.82rem,.92vw,.98rem);line-height:1.55;color:rgba(255,255,255,.92);opacity:0;transform:translateY(12px);max-height:0;overflow:hidden;transition:opacity 300ms ease 650ms,transform 380ms var(--ease) 600ms,max-height 550ms var(--ease) 520ms}
.pbs-page .pos-mosaic-tile:hover .pos-mosaic-copy,.pbs-page .pos-mosaic-tile:focus-visible .pos-mosaic-copy{opacity:1;transform:none;max-height:12em}
.pbs-page .pos-mosaic-tile:hover .pos-mosaic-num,.pbs-page .pos-mosaic-tile:focus-visible .pos-mosaic-num{color:rgba(255,255,255,.78)}
.pbs-page .pos-mosaic-tile:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.pbs-page .content-mosaic-shell .pos-mosaic{width:100%}
@media(max-width:620px){
  .pbs-page .pos-mosaic-grid{grid-template-columns:1fr;grid-template-rows:none}
  .pbs-page .pos-mosaic-tile{min-height:270px;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.24)!important}
  .pbs-page .pos-mosaic-tile:last-child{border-bottom:0!important}
  .pbs-page .pos-mosaic-copy{opacity:1;transform:none;max-height:none;transition:none}
  .pbs-page .pos-mosaic-wash,.pbs-page .pos-mosaic-big{display:none}
  .pbs-page .pos-mosaic-content{position:relative;left:auto;right:auto;top:auto;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
}
@media(min-width:621px) and (max-width:900px){
  .pbs-page .pos-mosaic-content{position:relative;left:auto;right:auto;top:auto;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
}
.pbs-page .pos-mosaic-tile:nth-child(1):hover,.pbs-page .pos-mosaic-tile:nth-child(1):focus-visible{color:#fff}
.pbs-page .pos-mosaic-tile:nth-child(4):hover,.pbs-page .pos-mosaic-tile:nth-child(4):focus-visible, .pbs-page .pos-mosaic-tile:nth-child(5):hover,.pbs-page .pos-mosaic-tile:nth-child(5):focus-visible{color:var(--midnight)}
.pbs-page .pos-mosaic-tile:nth-child(4):hover .pos-mosaic-num,.pbs-page .pos-mosaic-tile:nth-child(5):hover .pos-mosaic-num{color:var(--midnight)}
.pbs-page .pos-mosaic{max-width:1200px !important;width:calc(100% - 48px) !important;margin:0 auto !important;border-radius:0 !important}
.pbs-page .pos-mosaic{height:auto !important;min-height:0 !important}
.pbs-page .pos-mosaic-grid{position:relative !important;inset:auto !important}
.pbs-page .pos-mosaic-tile{aspect-ratio:1/1;height:auto;min-height:0 !important}
@media(max-width:620px){
  .pbs-page .pos-mosaic-tile{aspect-ratio:auto;min-height:270px !important}
}
.pbs-page button.pos-mosaic-tile,.pbs-page button.pos-mosaic-tile *{cursor:default !important}
.pbs-page .pos-mosaic{height:clamp(500px,64vh,680px);min-height:0;max-width:calc(var(--max) - 48px);width:calc(100% - 48px); margin:0 auto;border-radius:0}
.pbs-page .pos-mosaic-title{font-size:var(--mosaic-title)}
.pbs-page .pos-mosaic-big{font-size:clamp(140px,16vw,240px)}
@media(max-width:620px){
  .pbs-page .pos-mosaic{height:auto}
  .pbs-page .pos-mosaic-grid{position:relative;inset:auto}
}
/* Values cards (widget): heading inside a values card (About, Recruitment). Uppercase and tracked by default; class title-case switches both off for longer words. */
.pbs-page .value h3{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.pbs-page .value h3 span{color:var(--teal)}
.pbs-page .value h3.title-case{text-transform:none;letter-spacing:0}
/* H3, sub-heading: a standalone heading inside running content, not tied to a widget. Class sub-h3. */
.pbs-page .sub-h3{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.25;margin-bottom:14px}

/* Benefit tiles (widget): square tile with icon, heading, lead line, rule and body copy, in a three-up grid (two-up below 1000px, one-up below 600px). The page sets each tile colour with --bx and the tile class. Heading: 20 to 24px, weight 800. */
.pbs-page .bx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(28px,3.5vw,44px)}
.pbs-page .bx{background:var(--midnight);border-radius:10px;padding:30px 28px 28px;color:#fff;display:flex;flex-direction:column}
.pbs-page .bx-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.pbs-page .bx-icon{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:var(--bx);display:grid;place-items:center;color:var(--midnight)}
.pbs-page .bx-teal .bx-icon,.pbs-page .bx-raspberry .bx-icon,.pbs-page .bx-azure .bx-icon{color:#fff}
.pbs-page .bx-icon svg{width:26px;height:26px}
.pbs-page .bx h3{font-family:var(--f-display);font-weight:800;font-size:clamp(20px,1.7vw,24px);line-height:1.1;margin:0;color:var(--bx)}
.pbs-page .bx-lead{font-family:var(--f-body);font-weight:300;font-size:clamp(17px,1.35vw,20px);line-height:1.35;color:#fff;margin:0 0 16px;min-height:calc(1.35em * 3)}
.pbs-page .bx-rule{display:block;height:2px;background:var(--bx);margin:0 0 16px;opacity:.9}
.pbs-page .bx-body{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.85);margin:0}
@media(max-width:1000px){
  .pbs-page .bx-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .pbs-page .bx-grid{grid-template-columns:1fr}
}

/* WHO WE ARE - non-clickable dropdown label */
@media (min-width: 1021px) {
  header.nav #menu > li:first-child > a {
    cursor: default !important;
  }

/* Match Who We Are and What We Do dropdown widths */
@media (min-width: 1021px) {
  header.nav #menu > li:first-child > ul.drop,
  header.nav #menu > li:nth-child(2) > ul.drop {
    width: 310px !important;
    min-width: 310px !important;
    max-width: 310px !important;
    box-sizing: border-box;
  }
}