/* ==========================================================================
   Pearl IMS — reusable components (buttons, cards, badges, nav, modal, footer)
   ========================================================================== */

/* Buttons -------------------------------------------------------------- */
.pim-btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:600; font-size:16px; padding:15px 26px; border-radius:12px;
  border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pim-btn svg{ flex:none; }
.pim-btn--primary{ background:var(--pim-blue); color:#fff; box-shadow:0 2px 4px rgba(12,19,49,.1),0 12px 28px rgba(27,63,224,.22); }
.pim-btn--primary:hover{ background:var(--pim-blue-dark); }
.pim-btn--ghost{ background:#fff; color:var(--pim-text); border-color:var(--pim-border-2); }
.pim-btn--ghost:hover{ border-color:var(--pim-blue); color:var(--pim-blue); }
.pim-btn--on-dark{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }
.pim-btn--on-dark:hover{ background:rgba(255,255,255,.12); }
.pim-btn--on-blue{ background:#fff; color:var(--pim-blue); font-weight:700; box-shadow:0 12px 30px rgba(8,20,80,.3); }
.pim-btn--on-blue:hover{ background:var(--pim-blue-light); }
.pim-btn--on-blue-outline{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); color:#fff; }
.pim-btn--on-blue-outline:hover{ background:rgba(255,255,255,.2); }
.pim-btn--sm{ font-size:14.5px; padding:10px 18px; border-radius:10px; }
.pim-btn--dark{ background:var(--pim-navy); color:#fff; }
.pim-btn--dark:hover{ background:#162055; }
.pim-btn-block{ width:100%; justify-content:center; }

.pim-link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--pim-blue); text-decoration:none; transition:gap .18s ease; }
.pim-link-arrow:hover{ gap:12px; }

/* Badges / pills --------------------------------------------------------- */
.pim-pill{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--pim-border-2); border-radius:999px; padding:6px 14px 6px 8px; box-shadow:var(--pim-shadow-sm); }
.pim-pill__tag{ display:inline-flex; align-items:center; gap:6px; background:var(--pim-blue-light); color:var(--pim-blue); font:600 11px/1 var(--pim-font-mono); letter-spacing:.08em; padding:5px 9px; border-radius:999px; }
.pim-pill__label{ font-size:13px; font-weight:600; color:#4A5169; }
.pim-tag-mono{ font:600 11px/1 var(--pim-font-mono); letter-spacing:.06em; }

/* Cards ------------------------------------------------------------------ */
.pim-card{ background:#fff; border:1px solid var(--pim-border); border-radius:16px; padding:28px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pim-card:hover{ transform:translateY(-3px); box-shadow:var(--pim-shadow-md); border-color:var(--pim-border-strong); }
.pim-card__icon{ width:48px; height:48px; border-radius:12px; background:var(--pim-blue-light); color:var(--pim-blue); display:flex; align-items:center; justify-content:center; }
.pim-card__icon--sm{ width:40px; height:40px; border-radius:10px; }
.pim-card__title{ margin:20px 0 0; font-weight:700; font-size:18.5px; color:var(--pim-text); }
.pim-card__body{ margin:9px 0 0; font-size:15px; line-height:1.55; color:var(--pim-text-muted-2); }

.pim-stat-tile{ border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:24px; background:rgba(255,255,255,.03); }
.pim-stat-tile__num{ font-weight:800; font-size:34px; letter-spacing:-.02em; color:#fff; }
.pim-stat-tile__label{ margin-top:6px; font-size:14.5px; color:var(--pim-on-dark-muted); }

/* Screenshot / media placeholders ---------------------------------------- */
.pim-shot{ background:repeating-linear-gradient(135deg,#EEF1FE 0,#EEF1FE 11px,#F6F8FE 11px,#F6F8FE 22px); display:flex; align-items:center; justify-content:center; }
.pim-shot--purple{ background:repeating-linear-gradient(135deg,#E6ECFb,#E6ECFb 12px,#EEF2FC 12px,#EEF2FC 24px); }
.pim-shot--dark{ background:repeating-linear-gradient(135deg,#141C44,#141C44 12px,#1A2350 12px,#1A2350 24px); }
.pim-shot__label{ font:600 12px/1.4 var(--pim-font-mono); color:var(--pim-text-faint); background:#fff; border:1px dashed #C3CBE6; border-radius:8px; padding:9px 14px; text-align:center; }
.pim-shot img{ width:100%; height:100%; object-fit:cover; }

.pim-dot-grid{ position:absolute; inset:0; background-image:linear-gradient(var(--pim-surface-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pim-surface-grid) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(120% 80% at 70% 0%,#000 0%,transparent 70%); mask-image:radial-gradient(120% 80% at 70% 0%,#000 0%,transparent 70%); opacity:.6; pointer-events:none; }
.pim-dot-grid--dark{ background-image:linear-gradient(rgba(127,160,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,160,255,.06) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 75%); mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 75%); opacity:1; }

/* Header / nav ------------------------------------------------------------ */
.pim-header{ position:fixed; top:0; left:0; right:0; z-index:900; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--pim-border-3); transition:box-shadow .2s ease; }
.pim-header.is-scrolled{ box-shadow:0 6px 24px -12px rgba(12,19,49,.18); }
.pim-header__row{ max-width:var(--pim-container); margin:0 auto; padding:0 var(--pim-gutter); height:var(--pim-header-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.pim-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.pim-brand img{ width:32px; height:32px; object-fit:contain; }
.pim-brand span{ font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--pim-text); }
.pim-brand span em{ font-style:normal; color:var(--pim-blue); }
.pim-nav-wrap{ display:flex; justify-content:center; flex:1 1 auto; min-width:0; }
.pim-nav{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center; list-style:none; margin:0; padding:0; }
/* wp_nav_menu() emits <li> — never let a list marker show through. */
.pim-nav li{ list-style:none; display:block; margin:0; padding:0; }
.pim-nav li::marker{ content:none; }
/* position/z-index keep the links above any decorative sibling, and
   pointer-events guards against an inherited `none` further up the tree. */
.pim-nav a{ display:inline-block; font-size:14.5px; font-weight:500; color:#4A5169; text-decoration:none; transition:color .15s ease; position:relative; z-index:1; pointer-events:auto; white-space:nowrap; }
.pim-nav a:hover{ color:var(--pim-blue); }
.pim-nav a.is-active,
.pim-nav .current-menu-item > a,
.pim-nav .current_page_item > a{ color:var(--pim-blue); font-weight:700; }
/* Dropdown (Insights → Video Center / Media Gallery) ----------------------- */
/* Those two are full pages with nothing linking to them from the header. They
   hang off Insights rather than joining the top row, which already needs
   ~1140px for nine items. CSS-only on purpose: :hover opens it for a mouse,
   :focus-within for the keyboard, and below the drawer breakpoint the panel is
   simply always expanded — so there is no state for a script to get wrong. */
.pim-nav .menu-item-has-children{ position:relative; }
.pim-nav .sub-menu{ list-style:none; margin:0; padding:0; }
.pim-nav .sub-menu li{ position:relative; z-index:1; }

/* Desktop only. The hidden state is scoped to this breakpoint rather than
   undone further down, because `visibility` is inherited: a `visibility:visible`
   override inside the drawer would also override the *closed drawer's*
   visibility:hidden, leaving these two links hit-testable on top of the hero
   while the menu is shut — invisible, since the drawer's opacity:0 applies to
   the whole subtree and a child cannot escape it, but still clickable. */
@media (min-width: 1101px){
  .pim-nav .menu-item-has-children > a::after{
    content:""; display:inline-block; vertical-align:middle;
    width:5px; height:5px; margin-left:7px; margin-top:-3px;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(45deg); opacity:.55; transition:opacity .15s ease;
  }
  .pim-nav .menu-item-has-children:hover > a::after,
  .pim-nav .menu-item-has-children:focus-within > a::after{ opacity:1; }

  .pim-nav .sub-menu{
    position:absolute; top:100%; left:50%; z-index:10;
    min-width:200px;
    /* The link is only ~21px tall inside a 70px bar, so top:100% leaves a gap
       the pointer would cross with nothing under it — the menu would close on
       the way down. This transparent strip bridges it. */
    border-top:22px solid transparent; background-clip:padding-box;
    opacity:0; visibility:hidden;
    transform:translate(-50%,-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .pim-nav .sub-menu::before{
    content:""; position:absolute; inset:0;
    background:#fff; border:1px solid var(--pim-border-3); border-radius:12px;
    box-shadow:0 22px 44px -24px rgba(12,19,49,.38);
  }
  .pim-nav .menu-item-has-children:hover > .sub-menu,
  .pim-nav .menu-item-has-children:focus-within > .sub-menu{
    opacity:1; visibility:visible; transform:translate(-50%,0);
  }
  .pim-nav .sub-menu a{
    display:block; width:100%; padding:11px 16px; font-size:14px; font-weight:500;
    white-space:nowrap; border-radius:8px;
  }
  .pim-nav .sub-menu li:first-child a{ margin-top:6px; }
  .pim-nav .sub-menu li:last-child a{ margin-bottom:6px; }
  .pim-nav .sub-menu a:hover,
  .pim-nav .sub-menu a:focus-visible{ background:var(--pim-blue-light); color:var(--pim-blue); }
}

.pim-header__actions{ display:flex; align-items:center; gap:14px; flex:none; }
.pim-signin-btn{ background:none; border:none; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--pim-text); padding:0; }
.pim-header-spacer{ height:var(--pim-header-h); }
.pim-nav-toggle{ display:none; background:none; border:1px solid var(--pim-border-2); border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; flex:none; }

/* The nav needs ~1140px to keep nine items, the brand and the Login button on
   one line. Between the drawer breakpoint and that width, tighten the spacing
   rather than let the links wrap into a second row inside a 70px-tall bar. */
@media (min-width: 1101px) and (max-width: 1260px){
  .pim-header__row{ gap:16px; }
  .pim-nav{ gap:18px; }
  .pim-nav a{ font-size:14px; }
}

@media (max-width: 1100px){
  /* The drawer is the <nav> wrapper, positioned against the header itself.
     Deliberately `absolute` and not `fixed`: .pim-header sets backdrop-filter,
     which makes it the containing block for any fixed-position descendant, so
     `position:fixed; inset:var(--pim-header-h) 0 0 0` resolved against the
     70px-tall header instead of the viewport and collapsed the panel to zero
     height. Anchoring to the header via top:100% is what we actually want and
     is correct either way. */
  .pim-nav-wrap{
    position:absolute; top:100%; left:0; right:0; z-index:80;
    display:block; flex:none;
    padding:10px var(--pim-gutter) 18px;
    background:#fff;
    border-bottom:1px solid var(--pim-border-3);
    box-shadow:0 20px 40px -24px rgba(12,19,49,.3);
    max-height:calc(100vh - var(--pim-header-h));
    max-height:calc(100dvh - var(--pim-header-h));
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    transform:translateY(-10px); opacity:0; visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  }
  .pim-nav-wrap.is-open{ opacity:1; transform:translateY(0); visibility:visible; }
  /* One link per line. flex-wrap is reset explicitly — the desktop rule sets
     `wrap`, which in a column container caps the height and spills links into
     a second column instead of scrolling. */
  .pim-nav{ display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; gap:0; }
  .pim-nav li{ width:100%; }
  .pim-nav a{ display:block; width:100%; padding:14px 2px; border-bottom:1px solid var(--pim-border-4); font-size:16px; white-space:normal; }
  .pim-nav li:last-child a{ border-bottom:0; }
  /* In the drawer there is room to list the sub-pages outright, so the
     dropdown becomes a plain indented group — no toggle to tap, nothing behind
     a hover a touchscreen can't perform. Nothing here resets `visibility` or
     `opacity`: those belong to the drawer, and the desktop rules that set them
     are scoped above this breakpoint precisely so they don't need undoing. */
  .pim-nav .sub-menu{
    padding-left:14px; border-left:2px solid var(--pim-border-3); margin:0 0 0 2px;
  }
  .pim-nav .sub-menu a{ padding:12px 2px; font-size:15px; }
  .pim-nav .sub-menu li:last-child a{ border-bottom:0; }
  /* `.pim-nav li:last-child a` above is a descendant selector, so it strips the
     divider from the last sub-item — wanted — but leaves Insights' own divider
     alone. Restore the top-level rule explicitly. */
  .pim-nav > li:last-child > a{ border-bottom:0; }
  .pim-nav-toggle{ display:flex; }
  .pim-header__actions .pim-signin-btn{ display:none; }
  /* With the nav absolutely positioned it leaves the flex flow, so
     space-between would strand Login halfway across the bar. Group it with the
     toggle on the right instead. */
  .pim-header__row{ justify-content:flex-start; }
  .pim-header__actions{ margin-left:auto; }
}

/* Narrow phones: the row is brand + Login + toggle, all flex:none, so the
   desktop 24px gap and 32px gutter overflow a 360px screen. */
@media (max-width: 480px){
  .pim-header__row{ gap:10px; }
  .pim-brand span{ font-size:17px; }
  .pim-brand img{ width:28px; height:28px; }
  .pim-header__actions{ gap:8px; }
  .pim-nav-toggle{ width:38px; height:38px; }
}

/* Auth modal --------------------------------------------------------------- */
.pim-modal-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(7,12,38,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease; }
.pim-modal-overlay.is-open{ opacity:1; visibility:visible; animation:pim-fade .25s ease; }
.pim-modal-card{ display:flex; flex-wrap:wrap; width:min(900px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:20px; box-shadow:0 40px 90px -30px rgba(7,12,38,.6); transform:translateY(16px) scale(.97); opacity:0; transition:transform .36s cubic-bezier(.16,1,.3,1), opacity .26s ease; }
.pim-modal-overlay.is-open .pim-modal-card{ transform:translateY(0) scale(1); opacity:1; animation:pim-pop .36s cubic-bezier(.16,1,.3,1); }
.pim-modal-brand{ flex:1 1 320px; min-width:min(280px,100%); background:linear-gradient(155deg,var(--pim-blue) 0%,var(--pim-navy-2) 100%); color:#fff; padding:44px 40px; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.pim-modal-brand__head{ position:relative; display:flex; align-items:center; gap:11px; }
.pim-modal-brand__logo{ width:38px; height:38px; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; }
.pim-modal-brand__logo img{ width:26px; height:26px; object-fit:contain; }
.pim-modal-brand__title{ position:relative; margin:auto 0 0; font-weight:800; font-size:26px; line-height:1.2; letter-spacing:-.02em; }
.pim-modal-brand__sub{ position:relative; margin:12px 0 22px; font-size:14.5px; line-height:1.6; color:#C3CEFF; }
.pim-modal-brand__list{ position:relative; display:flex; flex-direction:column; gap:12px; }
.pim-modal-brand__list li{ display:flex; align-items:center; gap:10px; font-size:14px; color:#E4E9FF; }
.pim-modal-form{ flex:1.1 1 360px; min-width:min(300px,100%); padding:40px; position:relative; }
.pim-modal-close{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:9px; border:1px solid var(--pim-border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--pim-text-muted-2); transition:background-color .15s ease, color .15s ease; }
.pim-modal-close:hover{ background:var(--pim-surface-tint-2); color:var(--pim-text); }
.pim-modal-tabs{ display:inline-flex; background:#F2F4FA; border-radius:11px; padding:4px; gap:4px; }
.pim-modal-tab{ border:none; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:600; padding:8px 16px; border-radius:8px; background:transparent; color:#6B7396; transition:all .2s ease; }
.pim-modal-tab.is-active{ background:#fff; color:var(--pim-text); box-shadow:0 1px 2px rgba(12,19,49,.1); }
.pim-modal-form h3{ margin:24px 0 4px; font-weight:800; font-size:23px; letter-spacing:-.02em; color:var(--pim-text); }
.pim-modal-form > p{ margin:0 0 22px; font-size:14.5px; color:var(--pim-text-muted-2); }
.pim-field-row{ display:flex; gap:12px; flex-wrap:wrap; }
/* `flex:1 1 140px` was meant to size these side by side inside .pim-field-row.
   On a field that is a direct child of the form — which is a *column* flex
   container — flex-grow applies to height instead, so each field stretched to
   fill the card and left a large gap under every input. Growth is now scoped to
   the row, where it was intended. */
.pim-field{ font-size:13px; font-weight:600; color:#3A415A; display:flex; flex-direction:column; gap:6px; }
.pim-field-row .pim-field{ flex:1 1 140px; min-width:0; }
.pim-modal-form form > .pim-field{ flex:0 0 auto; }
.pim-field input{ width:100%; padding:11px 13px; border:1px solid var(--pim-border-2); border-radius:10px; font-size:14.5px; font-family:inherit; color:var(--pim-text); outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.pim-field input:focus{ border-color:var(--pim-blue); box-shadow:0 0 0 3px rgba(27,63,224,.12); }
.pim-field-check{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--pim-text-muted-2); cursor:pointer; }
.pim-field-check input{ accent-color:var(--pim-blue); width:15px; height:15px; }
.pim-modal-form form{ display:flex; flex-direction:column; gap:15px; }
.pim-modal-row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pim-modal-divider{ display:flex; align-items:center; gap:12px; margin:20px 0; }
.pim-modal-divider span:not(.pim-modal-divider__text){ flex:1; height:1px; background:var(--pim-border); }
.pim-modal-divider__text{ font-size:12px; color:var(--pim-text-faint-2); font-weight:500; }
.pim-google-btn{ width:100%; border:1px solid var(--pim-border-2); background:#fff; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:14.5px; color:var(--pim-text); padding:11px; border-radius:11px; transition:background-color .15s ease; }
.pim-google-btn:hover{ background:var(--pim-surface-tint-2); }
.pim-modal-legal{ margin:20px 0 0; font-size:12px; line-height:1.5; color:var(--pim-text-faint-2); text-align:center; }
body.pim-modal-locked{ overflow:hidden; }

/* Footer -------------------------------------------------------------------- */
.pim-footer{ background:var(--pim-navy-3); color:#fff; }
.pim-footer__grid{ max-width:var(--pim-container); margin:0 auto; padding:72px var(--pim-gutter) 0; display:flex; flex-wrap:wrap; gap:48px; }
/* Wider than the link columns — it carries the description, office address
   and contact details from the client's footer design. */
.pim-footer__brand{ flex:1.6 1 340px; min-width:min(280px,100%); }
.pim-footer__brand-row{ display:flex; align-items:center; gap:11px; }
.pim-footer__logo{ width:38px; height:38px; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; }
.pim-footer__logo img{ width:26px; height:26px; object-fit:contain; }
.pim-footer__brand-name{ font-weight:800; font-size:19px; letter-spacing:-.02em; }
.pim-footer__brand-name em{ font-style:normal; color:var(--pim-blue-soft); }
.pim-footer__desc{ margin:18px 0 0; font-size:14.5px; line-height:1.6; color:var(--pim-on-dark-faint); max-width:340px; }
.pim-footer__block{ margin-top:24px; max-width:360px; }
.pim-footer__block-title{ margin:0 0 6px; font-weight:700; font-size:14px; color:#fff; letter-spacing:0; text-transform:none; font-family:var(--pim-font); }
.pim-footer__block-text{ margin:0 0 6px; font-size:14px; line-height:1.6; color:var(--pim-on-dark-faint); }
.pim-footer__block-text a{ color:var(--pim-on-dark-faint); text-decoration:none; transition:color .15s ease; }
.pim-footer__block-text a:hover{ color:#fff; }
.pim-footer__dot{ margin:0 5px; color:var(--pim-on-dark-faint-2); }
.pim-footer__social{ margin-top:20px; display:flex; gap:10px; }
.pim-footer__social a{ width:38px; height:38px; border-radius:9px; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:var(--pim-on-dark-faint); text-decoration:none; transition:border-color .15s ease, color .15s ease; }
.pim-footer__social a:hover{ border-color:var(--pim-blue-soft); color:#fff; }
.pim-footer__col{ flex:1 1 150px; min-width:140px; }
.pim-footer__col h4{ margin:0 0 16px; font:600 11px/1 var(--pim-font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--pim-on-dark-faint-2); }
.pim-footer__col-links{ display:flex; flex-direction:column; gap:11px; }
.pim-footer__col-links a{ text-decoration:none; font-size:14.5px; color:#B4BAD4; transition:color .15s ease; }
.pim-footer__col-links a:hover{ color:#fff; }
.pim-footer__bottom{ max-width:var(--pim-container); margin:48px auto 0; padding:24px var(--pim-gutter); border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.pim-footer__bottom span{ font-size:13.5px; color:var(--pim-on-dark-faint-2); }
.pim-footer__legal{ display:flex; flex-wrap:wrap; gap:18px; }
.pim-footer__legal a{ font-size:13.5px; color:var(--pim-on-dark-faint); text-decoration:none; transition:color .15s ease; }
.pim-footer__legal a:hover{ color:#fff; text-decoration:underline; }
/* The copyright, the legal links and the socials are three items in a
   space-between row. On a phone that strands the legal pair in the middle —
   stack the lot instead. */
@media (max-width: 720px){
  .pim-footer__bottom{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* Forms (contact page etc.) -------------------------------------------------- */
.pim-form-field{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:#3A415A; }
.pim-form-field input, .pim-form-field textarea, .pim-form-field select{ font-family:inherit; width:100%; padding:12px 14px; border:1px solid var(--pim-border-2); border-radius:10px; font-size:14.5px; color:var(--pim-text); outline:none; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
.pim-form-field input:focus, .pim-form-field textarea:focus, .pim-form-field select:focus{ border-color:var(--pim-blue); box-shadow:0 0 0 3px rgba(27,63,224,.12); }
.pim-hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Shared AJAX-form feedback classes — set directly by assets/js/forms.js on
   the [data-form-status] element (contact / newsletter / event-registration
   forms all reuse the same script), so these must stay global, not per-page. */
.pim-form-status{ margin:4px 0 0; min-height:18px; font-size:13.5px; font-weight:600; }
.pim-form-status--ok{ color:var(--pim-green); }
.pim-form-status--error{ color:#C0392B; }
.pim-field-error{ margin:4px 0 0; font-size:12.5px; font-weight:600; color:#C0392B; }

/* Shared inner-page hero (template-parts/page-hero.php) ------------------------
   Every page below the homepage uses this, so the breadcrumb → eyebrow → title
   → lede rhythm is identical site-wide. The generous gap under the breadcrumbs
   is deliberate: without it the trail and the H1 read as one block. */
.pim-page-hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--pim-surface-tint) 0%,#fff 100%); border-bottom:1px solid var(--pim-border-4); }
.pim-page-hero__inner{ position:relative; padding-top:36px; padding-bottom:clamp(48px,6vw,72px); }
.pim-page-hero__crumbs{ margin-bottom:32px; }
.pim-page-hero__eyebrow{ display:block; }
.pim-page-hero__title{ margin:16px 0 0; max-width:820px; font-weight:800; font-size:clamp(32px,4.6vw,52px); line-height:1.07; letter-spacing:-.032em; color:var(--pim-text); text-wrap:balance; }
.pim-page-hero__lede{ margin:20px 0 0; max-width:640px; font-size:18px; line-height:1.6; color:var(--pim-text-muted); }
.pim-page-hero__after{ margin-top:28px; }

.pim-page-hero--narrow .pim-page-hero__title{ max-width:720px; }

.pim-page-hero--center{ text-align:center; }
.pim-page-hero--center .pim-page-hero__title,
.pim-page-hero--center .pim-page-hero__lede{ margin-left:auto; margin-right:auto; }
.pim-page-hero--center .pim-page-hero__crumbs{ display:flex; justify-content:center; }

.pim-page-hero--dark{ background:var(--pim-navy-2); border-bottom-color:transparent; }
.pim-page-hero--dark .pim-page-hero__title{ color:#fff; }
.pim-page-hero--dark .pim-page-hero__lede{ color:var(--pim-on-dark-muted); }

@media (max-width: 640px){
	.pim-page-hero__inner{ padding-top:24px; padding-bottom:40px; }
	.pim-page-hero__crumbs{ margin-bottom:22px; }
}

/* Breadcrumbs ----------------------------------------------------------------- */
.pim-breadcrumbs{ font-size:12.5px; line-height:1; }
.pim-breadcrumbs__list{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; list-style:none; margin:0; padding:0; }
.pim-breadcrumbs__list li{ list-style:none; display:flex; align-items:center; margin:0; padding:0; }
.pim-breadcrumbs__sep{ color:#C2C8DA; }
.pim-breadcrumbs__link,
.pim-breadcrumbs__current{ display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:7px; text-decoration:none; letter-spacing:.005em; transition:background-color .15s ease, color .15s ease; }
.pim-breadcrumbs__link{ color:var(--pim-text-faint); font-weight:500; }
.pim-breadcrumbs__link:hover{ color:var(--pim-blue); background:var(--pim-blue-light); }
.pim-breadcrumbs__current{ color:var(--pim-text); font-weight:600; background:var(--pim-surface-tint-2); max-width:min(52ch, 60vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pim-breadcrumbs svg{ flex:none; opacity:.85; }

/* Dark hero bands — scoped so templates never have to pass a variant. */
.pim-cs-hero .pim-breadcrumbs__sep,
.pim-event-banner .pim-breadcrumbs__sep,
.pim-page-hero--dark .pim-breadcrumbs__sep{ color:rgba(255,255,255,.3); }
.pim-cs-hero .pim-breadcrumbs__link,
.pim-event-banner .pim-breadcrumbs__link,
.pim-page-hero--dark .pim-breadcrumbs__link{ color:var(--pim-on-dark-muted); }
.pim-cs-hero .pim-breadcrumbs__link:hover,
.pim-event-banner .pim-breadcrumbs__link:hover,
.pim-page-hero--dark .pim-breadcrumbs__link:hover{ color:#fff; background:rgba(255,255,255,.1); }
.pim-cs-hero .pim-breadcrumbs__current,
.pim-event-banner .pim-breadcrumbs__current,
.pim-page-hero--dark .pim-breadcrumbs__current{ color:#fff; background:rgba(255,255,255,.08); }

@media (max-width: 560px){
	/* Long post titles dominate the trail on a phone — drop the current crumb
	   and let the parent link carry the context. */
	.pim-breadcrumbs__list > li:nth-last-child(-n+2){ display:none; }
	.pim-breadcrumbs__list > li:only-child{ display:flex; }
}

/* Search form ---------------------------------------------------------------- */
.pim-search-form{ display:flex; align-items:center; gap:10px; border:1px solid var(--pim-border-2); border-radius:12px; padding:10px 16px; background:#fff; }
.pim-search-form svg{ color:var(--pim-text-faint-2); flex:none; }
.pim-search-form input{ flex:1; border:none; outline:none; font:inherit; font-size:15px; color:var(--pim-text); background:transparent; }
.pim-search-form button{ border:none; background:var(--pim-blue); color:#fff; font-weight:600; font-size:13.5px; padding:8px 14px; border-radius:8px; cursor:pointer; }

/* Prose (rich text / the_content) --------------------------------------------- */
.pim-prose{ font-size:17px; line-height:1.75; color:#2A3147; }
.pim-prose h2{ margin:40px 0 14px; font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--pim-text); scroll-margin-top:96px; }
.pim-prose h3{ margin:30px 0 12px; font-weight:700; font-size:21px; color:var(--pim-text); }
.pim-prose p{ margin:0 0 20px; }
.pim-prose ul, .pim-prose ol{ margin:0 0 20px; padding-left:22px; list-style:revert; }
.pim-prose img{ border-radius:14px; border:1px solid var(--pim-border); margin:24px 0; }
.pim-prose blockquote{ margin:28px 0; padding:20px 24px; border-left:4px solid var(--pim-blue); background:var(--pim-surface-tint-2); font-weight:700; font-size:18px; border-radius:0 12px 12px 0; }
.pim-prose a{ color:var(--pim-blue); text-decoration:underline; }

/* Pagination ------------------------------------------------------------------- */
.pim-pagination{ margin-top:40px; display:flex; justify-content:center; gap:8px; }
.pim-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:9px; border:1px solid var(--pim-border-2); text-decoration:none; color:var(--pim-text); font-size:14px; font-weight:600; }
.pim-pagination .page-numbers.current{ background:var(--pim-blue); border-color:var(--pim-blue); color:#fff; }
.pim-pagination .page-numbers.dots{ border:none; }

/* Comments ----------------------------------------------------------------------- */
.pim-comments{ margin-top:56px; padding-top:40px; border-top:1px solid var(--pim-border-4); }
.pim-comments__title{ font-weight:800; font-size:21px; color:var(--pim-text); margin:0 0 20px; }
.pim-comments__list{ list-style:none; margin:0 0 32px; padding:0; }
.pim-comment-form p{ margin:0 0 14px; }
.pim-comment-form label{ display:block; font-size:13px; font-weight:600; color:#3A415A; margin-bottom:6px; }
.pim-comment-form input, .pim-comment-form textarea{ width:100%; padding:11px 13px; border:1px solid var(--pim-border-2); border-radius:10px; font-family:inherit; font-size:14.5px; }
.pim-comment-form .form-submit input{ width:auto; background:var(--pim-blue); color:#fff; font-weight:600; border:none; padding:12px 22px; cursor:pointer; }
.pim-comments__closed{ font-size:14.5px; color:var(--pim-text-faint); }

/* Widget area (optional News sidebar, registered in inc/widgets.php) ---------- */
.pim-widget{ border:1px solid var(--pim-border); border-radius:var(--pim-radius-md); padding:20px; background:#fff; margin-bottom:16px; }
.pim-widget__title{ margin:0 0 12px; font:600 11px/1 var(--pim-font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--pim-text-faint-2); }
.pim-widget ul{ display:flex; flex-direction:column; gap:9px; }
.pim-widget a{ font-size:14.5px; color:var(--pim-text-muted-2); text-decoration:none; }
.pim-widget a:hover{ color:var(--pim-blue); }

/* Utility grid ------------------------------------------------------------------ */
.pim-grid{ display:grid; gap:18px; }
.pim-grid--auto-260{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pim-grid--auto-280{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.pim-grid--auto-300{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.pim-grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 900px){ .pim-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .pim-grid--4{ grid-template-columns:1fr; } }

/* Success modal + filled media frames + admin media field ------------------ */
.pim-success-modal .pim-modal-card{ width:min(460px,100%); }
.pim-success-modal__card{ position:relative; }
.pim-success-modal__body{ padding:44px 36px 36px; text-align:center; width:100%; }
.pim-success-modal__icon{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--pim-green-bg); color:var(--pim-green); margin-bottom:20px; }
.pim-success-modal__title{ margin:0; font-weight:800; font-size:23px; line-height:1.25; letter-spacing:-.02em; color:var(--pim-text); }
.pim-success-modal__text{ margin:12px 0 0; font-size:15.5px; line-height:1.6; color:var(--pim-text-muted); }
.pim-success-modal__btn{ margin-top:26px; min-width:150px; justify-content:center; }
.pim-success-modal__note{ margin:16px 0 0; font-size:12.5px; color:var(--pim-text-faint-2); }
@media (max-width: 480px){ .pim-success-modal__body{ padding:36px 22px 28px; } }

/* An image slot that has been filled: the image replaces the dashed hatch. */
.pim-shot--filled{ background:var(--pim-surface-tint-2); overflow:hidden; position:relative; }
.pim-shot__img{ width:100%; height:100%; object-fit:cover; display:block; }
.pim-shot__img--contain{ object-fit:contain; }

/* Image fit modes ----------------------------------------------------------
   'cover' is the default above: the slot holds a fixed shape and the image
   fills it. These two are what "don't crop it" means in the two places it
   gets asked. */

/* Fit inside: the slot keeps its shape so a grid still lines up, but the whole
   image is visible. A plain tint behind it, because a diagram letterboxed over
   the dashed placeholder pattern looks like something failed to load. */
.pim-shot--contain{ background:var(--pim-surface-tint-2); padding:10px; }
.pim-shot--contain .pim-shot__img{ object-fit:contain; }

/* Free size: no box at all. The image fills the width it is given and is as
   tall as its own proportions make it, so a workflow diagram is readable
   instead of being squeezed into someone else's rectangle. */
.pim-free-shot{ display:block; }
.pim-free-shot__img{ width:100%; height:auto; display:block; border-radius:inherit; }
.pim-map-frame{ width:100%; height:100%; border:0; display:block; }

/* "See Pearl IMS in Action" play button ------------------------------------
   Sits where the hero's floating labels do, so it reads as part of the image
   rather than another button in the stack below the copy. */
.pim-playcta{
  display:inline-flex; align-items:center; gap:13px;
  padding:13px 22px 13px 14px;
  background:#fff; border:1px solid var(--pim-border); border-radius:999px;
  box-shadow:0 14px 34px -14px rgba(12,19,49,.34);
  cursor:pointer; font-family:inherit; text-align:left;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
}
.pim-playcta:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -16px rgba(12,19,49,.42); }
.pim-playcta:focus-visible{ outline:2px solid var(--pim-blue); outline-offset:3px; }
.pim-playcta__icon{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--pim-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
/* A single slow pulse ring — enough to draw the eye without nagging. */
.pim-playcta__icon::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--pim-blue);
  animation:pim-play-pulse 2.6s ease-out infinite;
}
@keyframes pim-play-pulse{
  0%   { transform:scale(1); opacity:.55; }
  70%  { transform:scale(1.65); opacity:0; }
  100% { transform:scale(1.65); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .pim-playcta__icon::before{ animation:none; opacity:0; }
  .pim-playcta:hover{ transform:none; }
}
.pim-playcta__text{ display:flex; flex-direction:column; gap:1px; }
.pim-playcta__title{ font-size:15px; font-weight:800; color:var(--pim-text); letter-spacing:-.01em; }
.pim-playcta__sub{ font-size:12px; color:var(--pim-text-faint); font-weight:500; }

/* Video lightbox ----------------------------------------------------------- */
.pim-no-scroll{ overflow:hidden; }
.pim-videobox{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px; }
.pim-videobox[hidden]{ display:none; }
.pim-videobox__backdrop{
  position:absolute; inset:0; background:rgba(7,12,38,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s ease;
}
.pim-videobox.is-open .pim-videobox__backdrop{ opacity:1; }
.pim-videobox__dialog{
  position:relative; width:min(1040px,100%);
  opacity:0; transform:translateY(12px) scale(.98);
  transition:opacity .22s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.pim-videobox.is-open .pim-videobox__dialog{ opacity:1; transform:none; }
.pim-videobox__frame{
  position:relative; aspect-ratio:16/9; width:100%;
  background:#000; border-radius:14px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
}
.pim-videobox__media{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.pim-videobox__close{
  position:absolute; top:-46px; right:0;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease;
}
.pim-videobox__close:hover{ background:rgba(255,255,255,.26); }
.pim-videobox__close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width: 600px){
  .pim-videobox{ padding:16px; }
  .pim-videobox__close{ top:-44px; }
}