/* =========================================================================
   RECRUITMENT LABS — Design System
   Structure: Tokens > Reset > Typography > Layout > Components > Utilities
   ========================================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Brand colour */
  --navy: #010A6E;
  --navy-700: #131C7A;
  --navy-600: #1F2C93;
  --navy-100: #E9EAF7;
  --cyan: #0095C9;
  --cyan-600: #007BA6;
  --cyan-100: #E3F4FA;
  --gold: #B08D4F;
  --gold-600: #96753E;
  --gold-100: #F2E9D8;

  /* Neutrals */
  --ink: #0B1030;
  --ink-soft: #4A5070;
  --ink-faint: #7B81A0;
  --white: #FFFFFF;
  --cream: #F8F6F1;
  --mist: #EFF3F8;
  --line: #E3E1DA;
  --line-mist: #DCE3EC;

  /* Type */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "Bricolage Grotesque", ui-sans-serif, sans-serif;

  /* Fluid type scale */
  --fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.1vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --fs-h4: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.92rem;

  /* Spacing */
  --space-section: clamp(4rem, 3rem + 4vw, 8rem);
  --space-section-sm: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --container: 1280px;
  --container-narrow: 860px;

  /* Motion */
  --ease: cubic-bezier(.22,.68,.16,1);
  --dur: .5s;

  /* Shadow */
  --shadow-sm: 0 2px 10px rgba(1,10,110,.06);
  --shadow-md: 0 12px 32px rgba(1,10,110,.10);
  --shadow-lg: 0 24px 64px rgba(1,10,110,.16);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{
  min-height:100svh;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,video,canvas,svg{display:block;max-width:100%;}
img{height:auto;}
input,button,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px;}

.skip-link{
  position:absolute;left:1rem;top:-60px;z-index:200;
  background:var(--navy);color:var(--white);padding:.85rem 1.25rem;
  border-radius:var(--radius-sm);font-weight:600;transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem;}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--navy);
  line-height:1.08;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);font-family:var(--font-body);font-weight:700;letter-spacing:-0.005em;}
p{color:var(--ink-soft);}
p+p{margin-top:1em;}
.lead{font-size:var(--fs-lead);color:var(--ink-soft);line-height:1.55;font-weight:400;}
em, .italic{font-style:italic;}
strong,b{font-weight:700;color:var(--ink);}
.pop-cyan{color:var(--cyan-600);}
.serif-italic{font-family:var(--font-display);font-style:italic;font-weight:500;color:inherit;}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-600);
}
.eyebrow.on-dark{color:var(--white);}
.eyebrow.centered{justify-content:center;}

.text-center{text-align:center;}
.max-prose{max-width:62ch;}
.muted{color:var(--ink-faint);}

/* Archive/CTA note lines with an inline link (e.g. insights page LinkedIn archive link) */
.archive-note{color:var(--navy);}
.archive-note a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;}
.archive-note a:hover{color:var(--cyan-600);}

/* ---------- 4. LAYOUT ---------- */
.container{
  width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter);}
/* Faint navy molecule texture on plain white sections — the white-section counterpart to
   the white molecule on .bg-navy sections, same crop/cover treatment, so the motif reads
   consistently across both light and dark sections site-wide. Any section that also carries
   .bg-navy/.bg-cream/.bg-mist/.cta-banner/.section-photo-bg overrides this completely (those
   rules use the full background shorthand and sit later in the cascade), so this only ever
   shows on genuinely plain white sections. Liam's request, 2026-07-17. */
.section{
  padding-block:var(--space-section);
  background-color:var(--white);
  background-image:url('/assets/img/photos/molecule-cyan-faint.webp');
  background-position:center top;background-size:100% auto;
  background-repeat:no-repeat;background-attachment:fixed;
}
.section-sm{
  padding-block:var(--space-section-sm);
  background-color:var(--white);
  background-image:url('/assets/img/photos/molecule-cyan-faint.webp');
  background-position:center top;background-size:100% auto;
  background-repeat:no-repeat;background-attachment:fixed;
}
.section-top-sm{padding-top:var(--space-section-sm);}
.section-bottom-sm{padding-bottom:var(--space-section-sm);}
.bg-cream{background:var(--cream);}
/* Mist sections keep the flat misty-blue fill (Liam wants these to visually break up the
   page rhythm, distinct from the plain white sections) but now also carry the same shared
   fixed-viewport molecule canvas as .section/.bg-navy, so the pattern still lines up
   continuously across a mist section sitting between two others. Starting point: same cyan
   ink/alpha as the white sections -- mist (#EFF3F8) is close enough to white that this should
   read reasonably, but Liam wants to dial in colour/faintness once he sees it live. Liam's
   request, 2026-07-17. */
.bg-mist{
  background-color:var(--mist);
  background-image:url('/assets/img/photos/molecule-cyan-faint.webp');
  background-position:center top;background-size:100% auto;
  background-repeat:no-repeat;background-attachment:fixed;
}
/* Faint white molecule texture, rolled out to every plain navy section site-wide (same
   asset/cover-fit as .cta-banner) so the motif reads as a consistent brand signature rather
   than a one-off. Sits under .navy-glow's corner-glow ::before where the two are combined.
   Liam's request, 2026-07-17. */
.bg-navy{
  background-color:var(--navy);
  background-image:url('/assets/img/photos/molecule-white-faint.webp');
  background-position:center top;background-size:100% auto;
  background-repeat:no-repeat;background-attachment:fixed;
  color:rgba(255,255,255,.88);
}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:var(--white);}
.bg-navy p{color:rgba(255,255,255,.72);}
.bg-navy .lead{color:rgba(255,255,255,.82);}
.bg-navy strong{color:var(--white);font-weight:700;}
.bg-navy .appt-item{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.16);}

.grid{display:grid;gap:var(--gutter);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}
@media (max-width: 980px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-6{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .grid-6{grid-template-columns:repeat(2,1fr);}
}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,5rem);align-items:center;}
.split.reverse{grid-template-columns:.95fr 1.05fr;}
.split.reverse > *:first-child{order:2;}
@media (max-width: 880px){
  .split,.split.reverse{grid-template-columns:1fr;}
  .split.reverse > *:first-child{order:0;}
}

/* Our Values column (home page) -- the shared .split.reverse rule sizes both tracks by an
   .95fr/1.05fr proportion of the container, which left a lot of dead space in the values track
   beyond the actual ~308px-wide value-pop-item (align-self:flex-start just parks it at the left
   edge of that much-wider track). That dead space was the real reason the column looked "far"
   from the text block, not the `gap` value itself -- repeatedly shrinking `gap` (2rem->...->.25rem)
   barely moved it for that reason. Fix (2026-07-17): size the values track to its actual content
   with max-content, so `gap` becomes the true, only, and fully controllable distance between the
   two columns. Scoped to min-width:881px (matching .split's own 880px breakpoint exactly) so it
   never fights the mobile single-column stacking rule above. */
@media (min-width:881px){
  .home-values-split{grid-template-columns:max-content 1fr;}
}

.stack{display:flex;flex-direction:column;}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:100px;
  font-weight:600;font-size:.98rem;letter-spacing:.01em;
  transition:transform .35s var(--ease),background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--navy);color:var(--white);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--cyan);color:var(--white);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.btn-cyan{background:var(--cyan);color:var(--white);box-shadow:var(--shadow-sm);}
.btn-cyan:hover{background:var(--navy);color:var(--white);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.btn-light{background:var(--white);color:var(--navy);}
.btn-light:hover{background:var(--cyan);color:var(--white);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);}
.btn-outline:hover{background:var(--navy);color:var(--white);transform:translateY(-2px);}
.btn-outline-light{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.55);}
.btn-outline-light:hover{background:var(--white);color:var(--navy);border-color:var(--white);}
/* Our Values bottom CTA only -- both buttons hover to cyan instead of the shared white default
   above (does not touch the many other .cta-banner/.btn-outline-light instances site-wide). */
.cta-actions-cyan-hover .btn-outline-light:hover{background:var(--cyan);color:var(--white);border-color:var(--cyan);}
.btn-ghost{background:transparent;color:var(--navy);padding:.5rem 0;border-radius:0;font-weight:700;}
.btn-ghost::after{content:"";display:block;height:2px;width:100%;background:var(--gold);margin-top:.3rem;transform:scaleX(.28);transform-origin:left;transition:transform .4s var(--ease);}
.btn-ghost:hover::after{transform:scaleX(1);}
/* Our Values "More on why Recruitment Labs" only -- cyan text instead of the shared navy
   default above (does not touch the other five .btn-ghost links across the site). */
.btn-ghost-cyan{color:var(--cyan);}
.btn-ghost-cyan:hover{transform:scale(1.06);}
/* Homepage "Meet Liam Hassell" and "Read our full story", and the testimonials "Read more
   testimonials" links -- stays navy at rest, turns cyan on hover (does not touch the remaining
   plain .btn-ghost links, or .btn-ghost-cyan above which is a different, always-cyan treatment
   used only on the Our Values page). */
.btn-ghost-hover-cyan:hover{color:var(--cyan);transform:scale(1.06);}
.btn-block{width:100%;}
.btn-sm{padding:.65rem 1.3rem;font-size:.88rem;}

/* ---------- 6. HEADER / NAVIGATION ---------- */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  padding-block:.85rem;
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease),border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.site-header.is-solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);
  padding-block:.5rem;
  border-color:var(--line);
}
.brand{display:flex;align-items:center;flex:none;}
.brand img{height:68px;width:auto;display:block;}
.brand .logo-light{display:block;}
.brand .logo-dark{display:none;}
.site-header.is-solid .brand .logo-light{display:none;}
.site-header.is-solid .brand .logo-dark{display:block;}
body.no-hero .brand .logo-light{display:none;}
body.no-hero .brand .logo-dark{display:block;}

.nav-desktop{display:flex;align-items:center;gap:2.4rem;}
.nav-desktop > ul{display:flex;align-items:center;gap:2.2rem;}
.nav-link{
  font-size:.95rem;font-weight:600;color:var(--white);
  display:flex;align-items:center;gap:.35rem;padding:.4rem 0;position:relative;
  transition:color .3s ease;
}
.nav-link svg{width:11px;height:11px;transition:transform .3s ease;opacity:.8;}
.site-header.is-solid .nav-link{color:var(--navy);}
.site-header.is-solid .nav-cta .btn-outline-light{color:var(--navy);border-color:var(--navy);}
.site-header.is-solid .nav-cta .btn-outline-light:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}
body.no-hero .nav-link{color:var(--navy);}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--cyan);transition:width .3s var(--ease);}
.nav-link:hover::after,.nav-item.is-open .nav-link::after{width:100%;}
.nav-item.is-open .nav-link svg{transform:rotate(180deg);}
.nav-item{position:relative;}

.mega{
  position:absolute;top:calc(100% + 1.35rem);left:50%;transform:translateX(-50%) translateY(8px);
  width:min(640px,86vw);background:var(--white);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
  padding:1.75rem;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  z-index:50;
}
.nav-item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .5rem;}
.mega-link{display:flex;gap:.9rem;align-items:flex-start;padding:.85rem;border-radius:var(--radius-sm);transition:background .25s ease;}
.mega-link:hover{background:var(--cream);}
.mega-link .ic{
  flex:none;width:38px;height:38px;border-radius:10px;background:var(--cyan-100);
  display:flex;align-items:center;justify-content:center;color:var(--cyan-600);
}
.mega-link .ic svg{width:19px;height:19px;}
.mega-link .ic img{width:19px;height:19px;object-fit:contain;}
.mega-link .ic img.ic-brand{width:23px;height:23px;}
.mega-link strong{display:block;font-size:.93rem;color:var(--navy);margin-bottom:.15rem;}
.mega-link span{font-size:.82rem;color:var(--ink-faint);line-height:1.4;display:block;}

/* Employers mega-menu "What We Recruit" flyout -- nested vertical submenu listing the six
   specialisation pages with their own icons, 2026-07-19 (Liam's request). Opens beside the
   mega panel rather than covering any of its other links (Salary Insights, FAQs, etc), which
   sit further down the same grid column. Employers menu only -- not added to the About Us
   mega menu's own "What We Recruit" link, which points to the general overview page rather
   than the six specialisation pages and stays a plain link. Side (left vs right) is decided
   at runtime in main.js, since the mega panel is centred under its own nav-item rather than
   the page and there's no way in CSS alone to know if ~300px of extra width to the right
   will fit every window size. */
.mega-link-flyout-wrap{position:relative;}
.mega-link-flyout-wrap > .mega-link{padding-right:2.1rem;}
.mega-flyout-caret{margin-left:auto;flex:none;align-self:center;width:9px;height:9px;color:var(--ink-faint);transform:rotate(-90deg);}
.mega-flyout{
  position:absolute;top:-.6rem;left:100%;margin-left:14px;width:280px;
  background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);padding:.6rem;
  display:flex;flex-direction:column;gap:.1rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),visibility .25s;
  z-index:60;
}
.mega-link-flyout-wrap.flyout-left .mega-flyout{left:auto;right:100%;margin-left:0;margin-right:14px;}
.mega-link-flyout-wrap.is-open .mega-flyout{opacity:1;visibility:visible;pointer-events:auto;}
.mega-flyout-link{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:var(--radius-sm);transition:background .2s ease;}
.mega-flyout-link:hover{background:var(--cream);}
.mega-flyout-link .ic{flex:none;width:32px;height:32px;border-radius:9px;background:var(--cyan-100);display:flex;align-items:center;justify-content:center;}
.mega-flyout-link .ic img{width:17px;height:17px;object-fit:contain;}
.mega-flyout-link span{font-size:.85rem;font-weight:600;color:var(--navy);}

.nav-cta{display:flex;align-items:center;gap:1.1rem;}
.nav-toggle{display:none;}

@media (max-width: 1080px){
  .nav-desktop{display:none;}
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;color:var(--white);
  }
  .site-header.is-solid .nav-toggle,body.no-hero .nav-toggle{color:var(--navy);}
  .nav-cta .btn-outline-light,.nav-cta .btn-outline{display:none;}
}

.mobile-nav{
  position:fixed;inset:0;z-index:150;background:var(--navy);
  transform:translateX(100%);transition:transform .5s var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav-head{display:flex;justify-content:space-between;align-items:center;padding:1.35rem var(--gutter);}
.mobile-nav-close{width:44px;height:44px;color:var(--white);display:flex;align-items:center;justify-content:center;}
.mobile-nav-body{padding:1rem var(--gutter) 3rem;}
.mobile-acc-item{border-bottom:1px solid rgba(255,255,255,.14);}
.mobile-acc-trigger{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:1.15rem 0;font-family:var(--font-display);font-size:1.35rem;color:var(--white);text-align:left;
}
.mobile-acc-trigger svg{width:16px;height:16px;transition:transform .3s ease;color:var(--cyan);}
.mobile-acc-item.is-open .mobile-acc-trigger svg{transform:rotate(45deg);}
.mobile-acc-panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.mobile-acc-panel > div{padding-bottom:1.25rem;display:flex;flex-direction:column;gap:.9rem;}
.mobile-acc-panel a{color:rgba(255,255,255,.75);font-size:1rem;}
.mobile-acc-panel a:hover{color:var(--cyan);}
.mobile-nav-direct{padding:1.15rem 0;font-family:var(--font-display);font-size:1.35rem;color:var(--white);display:block;border-bottom:1px solid rgba(255,255,255,.14);}
.mobile-nav-foot{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;}

/* ---------- 7. HERO (video) ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--navy);
}
.hero-media{position:absolute;inset:0;z-index:1;}
.hero-media video,.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(1,10,110,.4) 0%, rgba(1,10,110,.28) 38%, rgba(1,10,110,.55) 100%);
}
.hero-content{position:relative;z-index:2;text-align:center;color:var(--white);padding:8rem var(--gutter) 6rem;max-width:920px;}
.hero-kicker{
  font-size:clamp(.95rem,.85rem + .3vw,1.15rem);font-weight:600;letter-spacing:.05em;
  color:var(--white);text-transform:uppercase;margin-bottom:1.1rem;
}
.hero-content h1{
  color:var(--white);font-size:clamp(2.4rem,1.7rem + 3.6vw,4.6rem);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.08;font-weight:600;
}
.hero-content h1 .accent{color:var(--cyan);}
.hero-tagline{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);margin-top:1.6rem;color:var(--white);
}
.hero-sub{font-size:var(--fs-lead);color:rgba(255,255,255,.82);margin-top:.85rem;white-space:nowrap;}
.hero-sub b{color:var(--white);}
.hero-actions{display:flex;gap:1rem;justify-content:center;margin-top:2.5rem;flex-wrap:wrap;}
.hero-scroll{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.hero-scroll .line{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.9),transparent);animation:scrollpulse 2s ease-in-out infinite;}
@keyframes scrollpulse{0%,100%{opacity:.3;}50%{opacity:1;}}

/* Page hero (non-home, static, shorter) */
.page-hero{
  position:relative;padding:calc(var(--space-section) + 4rem) var(--gutter) var(--space-section);
  background:var(--navy);color:var(--white);overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 82% 18%, rgba(0,149,201,.35), transparent 45%),
                    radial-gradient(circle at 8% 92%, rgba(176,141,79,.25), transparent 40%);
}
.page-hero .container{position:relative;z-index:1;}
.page-hero h1{color:var(--white);max-width:820px;}
.page-hero .lead{color:rgba(255,255,255,.82);max-width:640px;margin-top:1.25rem;}

/* Page hero — photo variant (for high-impact landing pages, e.g. Salary Insights) */
.page-hero.photo{min-height:clamp(460px,58vh,620px);display:flex;align-items:center;}
.page-hero.photo::before{display:none;}
.page-hero-media{position:absolute;inset:0;z-index:0;}
.page-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;}
.page-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(1,10,110,.55) 0%, rgba(1,10,110,.5) 45%, rgba(1,10,110,.8) 100%),
             linear-gradient(90deg, rgba(1,10,110,.4) 0%, rgba(1,10,110,0) 60%);
}
.page-hero.photo .container{position:relative;z-index:1;}

/* Section with a large, low-opacity photo backdrop (e.g. Salary Insights request form) */
.section-photo-bg{position:relative;overflow:hidden;}
.section-photo-bg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg, rgba(239,243,248,.6) 0%, rgba(239,243,248,.45) 45%, rgba(239,243,248,.65) 100%),
    url('/assets/img/photos/salary-report-flatlay-bg.webp') center 35% / cover no-repeat;
}
.section-photo-bg .container{position:relative;z-index:1;}

/* Contact form backdrop — Circular Quay CBD skyline, same marketing image used on our printed materials */
.section-photo-bg.contact-photo-bg::before{
  background:
    linear-gradient(180deg, rgba(239,243,248,.93) 0%, rgba(239,243,248,.86) 45%, rgba(239,243,248,.95) 100%),
    url('/assets/img/photos/circular-quay-cbd-bg.webp') center 38% / cover no-repeat;
}

/* Testimonials page — the "grid of Liam with clients/candidates" photo behind the Select
   Testimonials / Verified on SEEK / Add Your Story content. Same low-opacity photo-backdrop
   technique as .contact-photo-bg above — the testimonial cards are fully opaque so they read
   cleanly regardless, this just adds a subtle textured backdrop in the gaps/margins around
   them. Photo is sized to 100% width / auto height (not "cover") so each grid tile stays a
   fixed, consistent size no matter how tall the merged section gets, then repeats vertically
   (repeat-y) so the same collage tiles again lower down the page instead of being stretched
   taller to force one copy to cover the whole section. */
.section-photo-bg.testimonials-photo-bg::before{
  background:
    linear-gradient(180deg, rgba(239,243,248,.93) 0%, rgba(239,243,248,.86) 45%, rgba(239,243,248,.95) 100%) center/cover no-repeat,
    url('/assets/img/photos/liam-clients-grid-v2.webp') top center / 100% auto repeat-y;
}

/* Type-forward metric pair (near-equal two-line stat, used on Salary Insights hero strip) */
.metric-item{text-align:center;}
.metric-top{font-family:var(--font-display);font-weight:600;font-size:clamp(1.75rem,1.4rem + 1.5vw,2.5rem);color:var(--cyan);line-height:1.12;}
.metric-bottom{font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,.92rem + .7vw,1.7rem);color:var(--navy);line-height:1.15;margin-top:.25rem;white-space:nowrap;}
@media (max-width:480px){.metric-bottom{white-space:normal;}}

/* Reusable navy + cyan glow section background (echoes page-hero treatment) */
.navy-glow{position:relative;overflow:hidden;}
.navy-glow::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 82% 12%, rgba(0,149,201,.38), transparent 48%),
                    radial-gradient(circle at 6% 96%, rgba(176,141,79,.22), transparent 42%);
}
.navy-glow .container{position:relative;z-index:1;}
.navy-glow .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);}
.navy-glow .card .ic{background:rgba(0,149,201,.18);color:var(--cyan);}
.navy-glow .card h3,.navy-glow .card h4{color:var(--white);}
.navy-glow .card p{color:rgba(255,255,255,.88);}
.navy-glow .card .card-link{color:var(--cyan-600);}
.navy-glow .card-num{color:var(--white);}

/* Scoped variant: drop the gold accent glow, keep the cyan one (used where gold reads off-brand) */
.navy-glow.no-gold::before{background-image:radial-gradient(circle at 82% 12%, rgba(0,149,201,.38), transparent 48%);}
.card .ic img{width:26px;height:26px;object-fit:contain;}

.breadcrumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:1.75rem;}
.breadcrumbs a{color:rgba(255,255,255,.75);}
.breadcrumbs a:hover{color:var(--cyan);}
.breadcrumbs .sep{opacity:.5;}
.breadcrumbs[data-light] {color:var(--ink-faint);}
.breadcrumbs[data-light] a{color:var(--ink-soft);}

/* ---------- 8. CARDS ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:2.1rem;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.card:hover::before{transform:scaleX(1);}
.card .ic{
  width:52px;height:52px;border-radius:14px;background:var(--navy-100);color:var(--navy);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem;
}
.card .ic svg{width:26px;height:26px;}
.card h3,.card h4{margin-bottom:.65rem;}
.card p{font-size:.97rem;}
.card .card-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1.2rem;font-weight:700;font-size:.9rem;color:var(--navy);}
.card .card-link svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.card:hover .card-link svg{transform:translateX(4px);}

/* .card-highlight (Job Seeker hub CV/Vacancies tiles) removed 2026-07-16 — those two tiles
   moved to the .discover-tile component (see the "Card invert-on-hover"/discover-tile rules
   below) as part of simplifying away the snake-border entirely. No other page ever used this
   class, so the whole block — and its matching main.js measurement routine — is now dead. */
.card-flat{background:var(--navy);border-radius:var(--radius-md);padding:2rem;}

/* Frosted-glass card — for content sitting directly on a photo backdrop (e.g. Salary Insights request form) */
.card-glass{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.75rem);
  box-shadow:var(--shadow-lg);
}
/* Softer, more transparent variant — used where more of the photo backdrop should read
   through (Testimonials page "Verified on SEEK" block, which now also holds the section
   title/text, not just the widget). The blur stays the same so the title, text and widget
   still read cleanly even with less white behind them. New modifier layered on .card-glass —
   the Contact page's form card (plain .card-glass) is unaffected. */
.card-glass.card-glass-soft{background:rgba(255,255,255,.6);}
.card-flat h4{color:var(--white);}
.card-flat p{color:rgba(255,255,255,.78);}
.card-flat a{color:var(--white);}
.card-flat a:hover{color:var(--cyan);}
.card-flat .cluster svg,.card-flat .cluster img{width:22px;height:22px;flex:none;margin-top:.2rem;object-fit:contain;}
.card-num{font-family:var(--font-display);font-size:2.75rem;color:var(--cyan);font-weight:600;line-height:1;margin-bottom:1rem;}

/* Card invert-on-hover — homepage "What We Recruit" tiles. New modifier class layered on
   top of shared .card / .navy-glow .card rules (does not touch them) so other .card grids
   (Services on this page, About/Employers/etc.) are unaffected. Icon flip: front = topic
   icon, back = RL colour mark (same idea the Job Seeker hub cards used before they moved to
   .discover-tile — see the removal note above .card-flat). */
.card-invert .ic{position:relative;background:none;perspective:600px;transition:transform .5s var(--ease);}
.card-invert .ic-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease);}
.card-invert .ic-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.card-invert .ic-face-front{background:rgba(0,149,201,.18);color:var(--cyan);}
.card-invert .ic-face-back{background:var(--white);transform:rotateY(180deg);padding:9px;}
.card-invert .ic-face-back img{width:100%;height:100%;object-fit:contain;}
.card-invert::before{content:none;}
.card-invert h4{transition:color .5s var(--ease),transform .45s var(--ease);transform-origin:left center;}
.card-invert p{transition:color .4s ease;}
/* Reverted 2026-07-17: card-level resting molecule (was here briefly) removed now that the
   whole .bg-navy section carries the ambient molecule texture (see .bg-navy above) — keeping
   these cards on the plain rgba(255,255,255,.04) glass fill from .navy-glow .card makes the
   hover-to-cyan-molecule swap read as a clear reveal (nothing -> molecule) rather than a
   dim-molecule-to-bright-molecule swap, so the section's one interactive trick stays distinct
   from the ambient site-wide texture. Liam's call. */
@media (hover:hover){
  /* Sibling recede + hovered card pops — same "one card grows, the rest shrink back" language
     as .card-invert-solid (Services) and .discover-tile (Job Seeker/Employer hub CTAs). The
     plain .navy-glow .card-invert:hover rule this replaces is superseded by the more specific
     :has() version below (kept the .ic/h4/p sub-rules as-is, they still key off :hover fine). */
  .grid:has(.card-invert):hover .card-invert{transform:scale(.95);opacity:.7;}
  .navy-glow .grid:has(.card-invert):hover .card-invert:hover{
    transform:translateY(-6px) scale(1.08);opacity:1;
    /* Changed 2026-07-17 (Liam's request): drop the white intermediate fill + molecule texture
       — go straight navy -> solid cyan on hover, same language as .discover-tile (Job Seeker/
       Employer hub CTAs) and .card-invert-solid (Our Services). No ring border needed since a
       cyan-on-cyan border would be invisible anyway; the glow alone now does the separation
       from the navy section behind it. */
    background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 50px rgba(0,149,201,.6);
  }
  .navy-glow .card-invert:hover .ic{transform:scale(1.28);}
  .navy-glow .card-invert:hover .ic-flip-inner{transform:rotateY(180deg);}
  .navy-glow .card-invert:hover h4{color:var(--white);font-weight:700;transform:scale(1.06);}
  .navy-glow .card-invert:hover p{color:rgba(255,255,255,.92);}
}

/* Card invert-on-hover (solid) — homepage "Our Services" tiles. Same icon-flip idea as
   .card-invert above (What We Recruit) but the hover fill is solid #0095C9 — matching the
   About Us hub .discover-tile treatment — rather than frosted white, since these tiles sit on
   a plain white section rather than navy. Sibling recede (via :has()) gives the row the same
   "one card pops, the rest step back" language as .discover-grid/.pill-list/.testimonial-grid
   elsewhere on the site. New modifier layered on .card — does not touch the base rule or
   .card-invert, so no other .card grid is affected. */
/* Transparent resting fill so the section's own faint cyan molecule (see .section above)
   shows through the card, same idea as the navy .card-invert tiles being near-transparent
   glass on top of their section's texture. Overrides .card's solid var(--white) fill — border
   + hover state still define the card shape. Liam's request, 2026-07-17. */
.card-invert-solid{background:transparent;border-color:var(--cyan);}

/* Employers > What We Recruit (dedicated page, 2026-07-17) -- solid navy cards on a WHITE section,
   transitioning to solid cyan on hover. Liam wanted this page separate from the About version
   specifically so the hero photo doesn't land straight on a navy block -- the first section here
   is plain white/molecule (.section, no bg-navy), so neither .card-invert (assumes a navy-glow
   ancestor for its glass tint + text-colour cascade) nor .card-invert-solid (assumes a light
   resting card with a cyan border) was the right fit -- this is a genuinely new resting look: an
   OPAQUE navy card floating on white, not glass-over-navy or transparent-over-white. Reuses the
   exact same spec-{slug}-cyan.webp/navy.webp icon pair as the About page's cards unchanged -- cyan
   already reads fine on solid navy (same hue as the glass version), and navy-on-cyan for the hover
   reveal is the same combination already proven on the About page's own hover state. */
.card-navy-pop{background:var(--navy);border-color:transparent;}
.card-navy-pop .ic{position:relative;background:none;perspective:600px;transition:transform .5s var(--ease);}
.card-navy-pop .ic-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease);}
.card-navy-pop .ic-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.card-navy-pop .ic-face-front{background:rgba(0,149,201,.18);color:var(--cyan);}
.card-navy-pop .ic-face-back{background:rgba(255,255,255,.14);transform:rotateY(180deg);padding:9px;}
.card-navy-pop .ic-face-back img{width:100%;height:100%;object-fit:contain;}
.card-navy-pop::before{content:none;}
.card-navy-pop h4{color:var(--white);transition:color .5s var(--ease),transform .45s var(--ease);transform-origin:left center;}
.card-navy-pop p{color:rgba(255,255,255,.85);transition:color .4s ease;}
@media (hover:hover){
  .grid:has(.card-navy-pop):hover .card-navy-pop{transform:scale(.86);opacity:.4;}
  .grid:has(.card-navy-pop):hover .card-navy-pop:hover{
    transform:translateY(-6px) scale(1.14);opacity:1;
    background:var(--cyan);
    box-shadow:var(--shadow-lg), 0 0 26px rgba(0,149,201,.35);
  }
  .card-navy-pop:hover .ic-flip-inner{transform:rotateY(180deg);}
  .card-navy-pop:hover h4{transform:scale(1.06);}

  /* Same 2-axis "compress together" splash push as home.html's Our Services grid, using the
     already-tightened distances from that page (17/9px horizontal decay, 17px vertical) rather
     than starting from the original looser numbers and re-tuning through the same rounds again. */
  .grid:has(.card-navy-pop:nth-child(1):hover) .card-navy-pop:nth-child(2){transform:translateX(17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(1):hover) .card-navy-pop:nth-child(3){transform:translateX(9px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(2):hover) .card-navy-pop:nth-child(1){transform:translateX(-17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(2):hover) .card-navy-pop:nth-child(3){transform:translateX(17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(3):hover) .card-navy-pop:nth-child(1){transform:translateX(-9px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(3):hover) .card-navy-pop:nth-child(2){transform:translateX(-17px) scale(.86);}

  .grid:has(.card-navy-pop:nth-child(4):hover) .card-navy-pop:nth-child(5){transform:translateX(17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(4):hover) .card-navy-pop:nth-child(6){transform:translateX(9px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(5):hover) .card-navy-pop:nth-child(4){transform:translateX(-17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(5):hover) .card-navy-pop:nth-child(6){transform:translateX(17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(6):hover) .card-navy-pop:nth-child(4){transform:translateX(-9px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(6):hover) .card-navy-pop:nth-child(5){transform:translateX(-17px) scale(.86);}

  .grid:has(.card-navy-pop:nth-child(1):hover) .card-navy-pop:nth-child(4){transform:translateY(17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(2):hover) .card-navy-pop:nth-child(5){transform:translateY(17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(3):hover) .card-navy-pop:nth-child(6){transform:translateY(17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(4):hover) .card-navy-pop:nth-child(1){transform:translateY(-17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(5):hover) .card-navy-pop:nth-child(2){transform:translateY(-17px) scale(.86);}
  .grid:has(.card-navy-pop:nth-child(6):hover) .card-navy-pop:nth-child(3){transform:translateY(-17px) scale(.86);}
}
.card-invert-solid .ic{position:relative;background:none;perspective:600px;transition:transform .5s var(--ease);}
.card-invert-solid .ic-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease);}
.card-invert-solid .ic-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.card-invert-solid .ic-face-front{background:rgba(0,149,201,.18);color:var(--cyan);}
.card-invert-solid .ic-face-back{background:none;transform:rotateY(180deg);padding:0;}
.card-invert-solid .ic-face-back img{width:150%;height:150%;object-fit:contain;}
.card-invert-solid::before{content:none;}
.card-invert-solid h3{transition:color .5s var(--ease),transform .45s var(--ease);transform-origin:left center;}
.card-invert-solid p{transition:color .4s ease;}
.card-learn-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-weight:700;font-size:.9rem;color:var(--navy);transform-origin:left center;transition:color .4s ease,transform .4s var(--ease);}
@media (hover:hover){
  .grid:has(.card-invert-solid):hover .card-invert-solid{transform:scale(.95);opacity:.7;}
  .grid:has(.card-invert-solid):hover .card-invert-solid:hover{
    transform:translateY(-6px) scale(1.05);opacity:1;
    background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 26px rgba(0,149,201,.35);
  }
  .card-invert-solid:hover .ic{transform:scale(1.12);}
  .card-invert-solid:hover .ic-flip-inner{transform:rotateY(180deg);}
  .card-invert-solid:hover h3{color:var(--white);font-weight:700;transform:scale(1.06);}
  .card-invert-solid:hover p{color:rgba(255,255,255,.92);}
  .card-invert-solid:hover .card-learn-link{color:var(--white);transform:scale(1.22);}
}
/* Amplified pop variant — scoped opt-in for grids that want stronger grow/shrink contrast than
   the base .card-invert-solid/.card-invert hover (originally built for the Services page's 6-card
   "How We Help" grid; extended 2026-07-17 to also cover .card-invert for the Employer Hub's "Our
   Services" mini-grid — genuinely reusable, not something intrinsic to the white-section variant).
   Higher-specificity override via the extra .card-pop class on the grid wrapper, doesn't touch
   either base rule, so both existing usages are unaffected by this extension. */
@media (hover:hover){
  .grid.card-pop:has(.card-invert-solid,.card-invert):hover .card-invert-solid,
  .grid.card-pop:has(.card-invert-solid,.card-invert):hover .card-invert{transform:scale(.86);opacity:.4;}
  .grid.card-pop:has(.card-invert-solid,.card-invert):hover .card-invert-solid:hover,
  .grid.card-pop:has(.card-invert-solid,.card-invert):hover .card-invert:hover{
    transform:translateY(-6px) scale(1.14);opacity:1;
    background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 26px rgba(0,149,201,.35);
  }
}

/* Home page "Our Services" horizontal splash push — same decaying-offset "compress together"
   language as the Employer Hub's .service-mini-grid (nearest same-row sibling gets pushed the
   most, the farther one less, so they compress toward each other while the hovered card gets a
   clean gap next to it). Added 2026-07-17 once Liam confirmed he wanted "more of a splash effect
   now that we've mastered it" here too. Scoped specifically to `.grid.grid-3.card-pop` (home.html's
   3-col x 2-row "Our Services" grid) rather than the generic `.card-pop` selector above — the row
   math (nth-child 1-3 = row 1, 4-6 = row 2) is only correct for a 3-column grid. services.html's
   "How We Help" grid uses `.grid-2` (2-col x 3-row) and is NOT matched by this selector, so its
   different row shape is unaffected. Uses the same .86 shrink scale as the base card-pop rule
   above so the combined translateX+scale transform doesn't visually clash with the plain-scale
   shrink still applying to the other (different-row) siblings. */
@media (hover:hover){
  /* Distances tightened 2026-07-17 (Liam: "looks a bit loose," siblings should sit closer to the
     hovered tile) -- near/far horizontal 45/25px -> 28/16px, vertical 45px -> 28px (matching the
     new near-horizontal value so the push feels consistent in every direction). */
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(1):hover) .card-invert-solid:nth-child(2){transform:translateX(17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(1):hover) .card-invert-solid:nth-child(3){transform:translateX(9px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(2):hover) .card-invert-solid:nth-child(1){transform:translateX(-17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(2):hover) .card-invert-solid:nth-child(3){transform:translateX(17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(3):hover) .card-invert-solid:nth-child(1){transform:translateX(-9px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(3):hover) .card-invert-solid:nth-child(2){transform:translateX(-17px) scale(.86);}

  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(4):hover) .card-invert-solid:nth-child(5){transform:translateX(17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(4):hover) .card-invert-solid:nth-child(6){transform:translateX(9px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(5):hover) .card-invert-solid:nth-child(4){transform:translateX(-17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(5):hover) .card-invert-solid:nth-child(6){transform:translateX(17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(6):hover) .card-invert-solid:nth-child(4){transform:translateX(-9px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(6):hover) .card-invert-solid:nth-child(5){transform:translateX(-17px) scale(.86);}

  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(1):hover) .card-invert-solid:nth-child(4){transform:translateY(17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(2):hover) .card-invert-solid:nth-child(5){transform:translateY(17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(3):hover) .card-invert-solid:nth-child(6){transform:translateY(17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(4):hover) .card-invert-solid:nth-child(1){transform:translateY(-17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(5):hover) .card-invert-solid:nth-child(2){transform:translateY(-17px) scale(.86);}
  .grid.grid-3.card-pop:has(.card-invert-solid:nth-child(6):hover) .card-invert-solid:nth-child(3){transform:translateY(-17px) scale(.86);}
}

/* services.html "How We Help" grid gets the same horizontal splash push, adapted for its 2-col x
   3-row shape (Liam: "employ more of a splash effect on the employers > our services page as
   well" -- the standalone /services/ page, distinct from the Employer Hub's mini-grid and the
   home page's 3-col teaser, both already done). Only 2 columns means each row has just ONE other
   sibling, so no decaying-offset series is needed here (unlike the 3-col grids) -- a single
   symmetric push per row is enough: hovering either card in a row pushes the other one directly
   away. Scoped to `.grid.grid-2.card-pop` so this doesn't interact with the grid-3 rules above. */
@media (hover:hover){
  .grid.grid-2.card-pop:has(.card-invert-solid:nth-child(1):hover) .card-invert-solid:nth-child(2){transform:translateX(45px) scale(.86);}
  .grid.grid-2.card-pop:has(.card-invert-solid:nth-child(2):hover) .card-invert-solid:nth-child(1){transform:translateX(-45px) scale(.86);}
  .grid.grid-2.card-pop:has(.card-invert-solid:nth-child(3):hover) .card-invert-solid:nth-child(4){transform:translateX(45px) scale(.86);}
  .grid.grid-2.card-pop:has(.card-invert-solid:nth-child(4):hover) .card-invert-solid:nth-child(3){transform:translateX(-45px) scale(.86);}
  .grid.grid-2.card-pop:has(.card-invert-solid:nth-child(5):hover) .card-invert-solid:nth-child(6){transform:translateX(45px) scale(.86);}
  .grid.grid-2.card-pop:has(.card-invert-solid:nth-child(6):hover) .card-invert-solid:nth-child(5){transform:translateX(-45px) scale(.86);}
}

/* Employer Hub "Our Services" mini-cards — icon + title only (this is a hub teaser; full
   descriptions live on /services/, not duplicated here for SEO/content-architecture reasons).
   New modifier layered on .card-invert (centres the icon+heading instead of card-invert's default
   left-aligned icon/heading/paragraph flow, and enlarges the icon slightly since it's the only
   visual besides the title) — does not touch .card-invert's base rule, so home.html's full What
   We Recruit cards (icon+h4+p, left-aligned) are unaffected. */
.card-invert.tile-compact{align-items:center;text-align:center;padding:2.75rem 2rem;}
.card-invert.tile-compact .ic{width:64px;height:64px;margin-bottom:1.6rem;}
.card-invert.tile-compact h4{margin-bottom:0;transform-origin:center;}

/* Employer Hub "Our Services" mini tiles — deliberately a fresh component, not a reuse of
   .card/.card-invert/.discover-tile (Liam: "let's make it more unique, not rely on what we've done
   elsewhere"). Shorter/smaller rounded rectangles (--radius-md, not a pill), icon shown bare with
   no colour-chip backdrop (every other icon component on the site wraps its icon in a coloured
   circle/rounded-square -- explicitly asked to drop that here), and the icon CONTENT changes on
   hover rather than its colour: generic white RL brand mark at rest -> the specific white
   per-service icon on hover. Originally built as a plain opacity crossfade (deliberately distinct
   from the rotateY 3D flip used elsewhere, since both faces were already white so a flip wouldn't
   have had the usual colour-reveal payoff) -- switched back to the rotateY flip 2026-07-18 at
   Liam's request, same .ic-flip-inner/.ic-face-front/.ic-face-back structure as
   .card-invert-solid etc., so this component is now consistent with the flip-heavy language used
   everywhere else. */
.service-mini-grid{gap:.9rem;}
.service-mini-tile{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:1rem 1.15rem;border-radius:var(--radius-md);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  transition:transform .5s var(--ease),background .4s ease,border-color .4s ease,opacity .4s ease;
}
/* icon + title share one flex wrapper (2026-07-18, replacing separate independent transforms)
   so hover growth scales them together as a single rigid group -- the gap between them stays a
   fixed proportion of the group at every zoom level, and the group's own centre (its
   transform-origin) always matches the centred row underneath, so it can never drift left or
   right regardless of how long the title is. Previously the icon and title scaled independently
   from their own separate centres (icon 1.8x, title 1.25x) which is what let Leadership Search &
   Advisory read as pinned left (via the old .service-mini-tile-wide flex-start hack) and let
   Permanent Recruitment read as drifting right -- both symptoms of the same root cause. */
.service-mini-content{position:relative;display:flex;align-items:center;gap:.9rem;transition:transform .5s var(--ease),gap .5s var(--ease);}
.service-mini-icon{position:relative;width:32px;height:32px;flex:none;perspective:600px;transition:transform .5s var(--ease);}
.service-mini-icon .ic-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease);}
.service-mini-icon .ic-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.service-mini-icon .ic-face img{width:100%;height:100%;object-fit:contain;}
.service-mini-icon .ic-face-back{transform:rotateY(180deg);}
.service-mini-title{color:var(--white);font-weight:600;font-size:.92rem;line-height:1.3;}
@media (hover:hover){
  .service-mini-grid:has(.service-mini-tile:hover) .service-mini-tile{transform:scale(.9);opacity:.55;}
  .service-mini-grid:has(.service-mini-tile:hover) .service-mini-tile:hover{
    transform:scale(1.15);opacity:1;z-index:5;
    background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 30px rgba(0,149,201,.4);
  }
  /* Icon gets its own extra scale on top of the tile's own 1.15x (Liam: wants the icon to grow
     more, confirmed the title's current size is right as-is). Safe to push this further than the
     title ever could be -- the icon is a fixed 32px box regardless of which tile it's in, so its
     growth doesn't scale with (and can't be blown out by) label length the way the title's did.
     Widening the content gap alongside it gives the now-bigger icon room to grow into without
     encroaching on the title text, the same clearance idea as the old gap widen, just sized for
     icon-only growth instead of icon+title growth. */
  .service-mini-tile:hover .service-mini-icon{transform:scale(1.7);}
  .service-mini-tile:hover .service-mini-content{gap:1.5rem;}
  .service-mini-tile:hover .service-mini-icon .ic-flip-inner{transform:rotateY(180deg);}

  /* Horizontal "compress together" push — same decaying-offset language as the vertical splash
     effects elsewhere (nearest same-row sibling gets the biggest push, creating the one clear gap
     next to the hovered tile; farther siblings get a smaller push, so they end up compressing
     closer together) but scoped per grid ROW, since this is a 3-col x 2-row grid and only same-row
     neighbours actually overlap when a tile grows (Liam: zooming Leadership Search was overlapping
     Permanent Recruitment beside it). nth-child indices are global across all 6 tiles, so row 1 is
     1/2/3 and row 2 is 4/5/6 — each row's push rules are independent of the other row's. */
  .service-mini-grid:has(.service-mini-tile:nth-child(1):hover) .service-mini-tile:nth-child(2){transform:translateX(45px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(1):hover) .service-mini-tile:nth-child(3){transform:translateX(25px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(2):hover) .service-mini-tile:nth-child(1){transform:translateX(-45px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(2):hover) .service-mini-tile:nth-child(3){transform:translateX(45px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(3):hover) .service-mini-tile:nth-child(1){transform:translateX(-25px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(3):hover) .service-mini-tile:nth-child(2){transform:translateX(-45px) scale(.9);}

  .service-mini-grid:has(.service-mini-tile:nth-child(4):hover) .service-mini-tile:nth-child(5){transform:translateX(45px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(4):hover) .service-mini-tile:nth-child(6){transform:translateX(25px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(5):hover) .service-mini-tile:nth-child(4){transform:translateX(-45px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(5):hover) .service-mini-tile:nth-child(6){transform:translateX(45px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(6):hover) .service-mini-tile:nth-child(4){transform:translateX(-25px) scale(.9);}
  .service-mini-grid:has(.service-mini-tile:nth-child(6):hover) .service-mini-tile:nth-child(5){transform:translateX(-45px) scale(.9);}

  /* Vertical axis push removed 2026-07-18 (Liam: keep it horizontal only -- side neighbours move
     out of the way, the tile directly above/below stays put). It still shrinks/dims like every
     other non-hovered tile via the base .service-mini-grid:has(...) .service-mini-tile rule
     above, just without the extra translateY. */
}

/* Testimonials — zoom + colour-transition grid (same interaction language as .value-list on Our Values) */
.testimonial-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.testimonial-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2.2rem;display:flex;flex-direction:column;height:100%;
  transition:transform .45s var(--ease),background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.testimonial-card .ic{width:52px;height:52px;position:relative;flex:none;margin-bottom:1.4rem;perspective:600px;transition:transform .5s var(--ease);}
.testimonial-card .ic-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease);}
.testimonial-card .ic-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.testimonial-card .ic-face img{width:100%;height:100%;object-fit:contain;}
.testimonial-card .ic-face-back{transform:rotateY(180deg);}
.testimonial-card .quote{
  font-family:var(--font-body);font-style:normal;font-weight:500;font-size:1.05rem;line-height:1.6;
  color:var(--ink);transition:color .4s ease;flex:1;
}
.testimonial-card .who{display:flex;align-items:baseline;gap:.6rem;margin-top:1.5rem;flex-wrap:wrap;}
.testimonial-card .who strong{color:var(--navy);font-size:.92rem;transition:color .4s ease;}
.testimonial-card .who .role{color:var(--cyan);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:600;transition:color .4s ease;}
@media (hover:hover){
  .testimonial-grid:hover .testimonial-card{transform:scale(.97);opacity:.55;}
  .testimonial-grid:hover .testimonial-card:hover{
    transform:scale(1.035);opacity:1;background:var(--navy);border-color:transparent;box-shadow:var(--shadow-md);
  }
  .testimonial-card:hover .quote{color:var(--white);}
  .testimonial-card:hover .who strong{color:var(--white);}
  .testimonial-card:hover .ic{transform:scale(1.4);}
  .testimonial-card:hover .ic-flip-inner{transform:rotateY(180deg);}
}
@media (max-width:880px){.testimonial-grid{grid-template-columns:1fr;}}
@media (max-width:620px){
  .testimonial-card{padding:1.9rem 1.7rem;}
  .testimonial-card .quote{font-size:1.02rem;}
}

/* Candidate Spotlight tiles (Employers) */
.spotlight-tile{background:var(--white);border-radius:var(--radius-md);overflow:hidden;padding:.6rem;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.spotlight-tile .frame{position:relative;border-radius:calc(var(--radius-md) - .4rem);overflow:hidden;}
.spotlight-tile img{width:100%;height:100%;display:block;cursor:zoom-in;object-fit:cover;aspect-ratio:4/5;}
.spotlight-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.spotlight-tile .frame::after{
  content:"";position:absolute;inset:0;background:rgba(1,10,110,.28);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.spotlight-tile .frame .zoom-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
.spotlight-tile .zoom-hint svg{width:20px;height:20px;}
@media (hover:hover){
  .spotlight-tile:hover .frame::after{opacity:1;}
  .spotlight-tile:hover .zoom-hint{opacity:1;transform:translate(-50%,-50%) scale(1);}
}

/* Lightbox (used for Candidate Spotlight tiles; reusable via [data-lightbox]) */
.lightbox{
  position:fixed;inset:0;background:rgba(1,10,110,.92);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:2.5rem;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.lightbox.is-open{opacity:1;visibility:visible;}
.lightbox-img{
  max-width:min(90vw,620px);max-height:88vh;border-radius:var(--radius-md);
  box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.92);
  transition:transform .35s var(--ease);
}
.lightbox.is-open .lightbox-img{transform:scale(1);}
.lightbox-close{
  position:absolute;top:1.5rem;right:1.5rem;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);color:var(--white);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,.26);}
.lightbox-close svg{width:18px;height:18px;}
@media (max-width:640px){
  .lightbox{padding:1.25rem;}
  .lightbox-close{top:.9rem;right:.9rem;width:40px;height:40px;}
}

/* Stat block */
.stat{text-align:center;}
.stat .num{font-family:var(--font-display);font-size:clamp(2.4rem,1.8rem + 2vw,3.6rem);color:var(--cyan);font-weight:600;line-height:1;}
.stat .num .accent{color:var(--cyan);}
.stat .num + .num{margin-top:.08em;}
.stat .label{margin-top:.6rem;font-size:.88rem;color:var(--navy);letter-spacing:.03em;text-transform:uppercase;font-weight:600;}
.bg-navy .stat .num{color:var(--white);}
.bg-navy .stat .label{color:rgba(255,255,255,.6);}

/* Process / timeline */
.timeline{position:relative;}
.timeline-item{display:grid;grid-template-columns:64px 1fr;gap:1.75rem;position:relative;padding-bottom:3rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";position:absolute;left:31px;top:64px;bottom:0;width:1px;
  background:repeating-linear-gradient(to bottom, var(--line-mist) 0 6px, transparent 6px 12px);
}
.timeline-item:last-child::before{display:none;}
.timeline-num{
  width:64px;height:64px;border-radius:50%;background:var(--navy);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.4rem;font-weight:600;flex:none;
}
.timeline-body h3{margin-bottom:.5rem;font-size:var(--fs-h4);}

/* Values grid (also used on the homepage — keep this simple bordered-row shape stable) */
.value-item{padding:1.9rem 0;border-bottom:1px solid var(--line-mist);display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:flex-start;}
/* On navy (Job Seeker hub's "What to Expect") that same light mist-grey line reads as a bright
   seam cutting across a dark field rather than a quiet divider — the generous padding already
   gives each row breathing room, and all four items sit on one shared navy field anyway, so
   the line isn't doing useful separating work here, just adding a visible break. */
.navy-glow .value-item{border-bottom:none;}
.value-item:first-child{padding-top:0;}
.value-item .ic{width:48px;height:48px;border-radius:12px;background:var(--cyan-100);color:var(--cyan-600);display:flex;align-items:center;justify-content:center;flex:none;}
.value-item .ic svg{width:24px;height:24px;}
.value-item .ic img{width:26px;height:26px;display:block;}

/* Large icon-feature variant of .value-item — big nested-navy icon (Founder page "What to Expect") */
.value-item.icon-feature{align-items:center;}
.value-item.icon-feature .ic{width:96px;height:96px;border-radius:22px;background:var(--navy);}
/* On a navy section (Job Seeker hub's merged "What to Expect" + Upload CV/Browse Vacancies
   block) a solid navy chip would vanish into the section's own background — these icons are
   already pre-rendered white assets, so no chip is needed at all once the backdrop stops
   being light. Scoped via .navy-glow so team-index.html and employers-process.html, which
   use this same shared component on a light bg-mist, are completely unaffected. */
.navy-glow .value-item.icon-feature .ic{background:transparent;}
.value-item.icon-feature .ic img{width:64px;height:64px;}
@media (max-width:640px){
  .value-item.icon-feature .ic{width:76px;height:76px;border-radius:18px;}
  .value-item.icon-feature .ic img{width:50px;height:50px;}
}
/* Cyan variant of icon-feature — Founder page "What to Expect from Liam" only. New modifier
   class layered on top (does not touch the shared .icon-feature rules above), so
   employers-process.html and job-seekers-index.html, which reuse the same base component,
   are unaffected. Breaks up the section's otherwise all-navy chips/titles with the site's
   cyan accent colour. */
.value-item.icon-feature-cyan .ic{background:var(--cyan);position:relative;transition:background .4s ease;}
.value-item.icon-feature-cyan h4{color:var(--cyan);}
/* Hover: the solid cyan tile fades away and the icon itself swaps from white to cyan --
   two stacked images crossfaded via opacity, growth handled separately by the .expect-grow
   container-level scale (see that rule), so this only needs to handle colour + background. */
.value-item.icon-feature-cyan .ic img{
  position:absolute;top:50%;left:50%;width:64px;height:64px;object-fit:contain;
  transition:opacity .45s ease,transform .45s var(--ease);
}
.value-item.icon-feature-cyan .ic .ic-white{transform:translate(-50%,-50%) scale(1);}
.value-item.icon-feature-cyan .ic .ic-cyan{opacity:0;transform:translate(-50%,-50%) scale(.5);}
@media (hover:hover){
  .value-item.icon-feature-cyan:hover .ic{background:transparent;}
  .value-item.icon-feature-cyan:hover .ic .ic-white{opacity:0;transform:translate(-50%,-50%) scale(1.4);}
  .value-item.icon-feature-cyan:hover .ic .ic-cyan{opacity:1;transform:translate(-50%,-50%) scale(1.2);}
}
@media (max-width:640px){
  .value-item.icon-feature-cyan .ic img{width:50px;height:50px;}
}
.value-item h4{margin-bottom:.35rem;}
/* Larger icon variant for the homepage "Why Recruitment Labs" section only (scoped, does not touch the base .value-item used elsewhere) */
.value-item.icon-pop{align-items:center;}
.value-item.icon-pop .ic{width:80px;height:80px;border-radius:18px;position:relative;perspective:600px;transition:transform .5s var(--ease),background .4s ease;}
.value-item.icon-pop .ic img{width:52px;height:52px;}
@media (max-width:640px){
  .value-item.icon-pop .ic{width:66px;height:66px;border-radius:16px;}
  .value-item.icon-pop .ic img{width:42px;height:42px;}
}
/* Home "Why Recruitment Labs" hover, 2026-07-18 -- icon flips from the resting cyan mark (on the
   cyan-100 box) to a navy version with no background, growing as it goes; title grows alongside
   it. Same flip-component shape used sitewide (.ic-flip-inner/.ic-face-front/.ic-face-back), just
   scoped to .icon-pop since that class is only ever used in this one homepage section. */
.value-item.icon-pop .ic-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease);}
.value-item.icon-pop .ic-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.value-item.icon-pop .ic-face-back{transform:rotateY(180deg);}
.value-item.icon-pop h4{transition:transform .3s var(--ease);transform-origin:left center;}
@media (hover:hover){
  .value-item.icon-pop:hover .ic{background:transparent;transform:scale(1.3);}
  .value-item.icon-pop:hover .ic-flip-inner{transform:rotateY(180deg);}
  .value-item.icon-pop:hover h4{transform:scale(1.12);}
}

.value-item p{font-size:.95rem;margin:0;}

/* "What to Expect" hover-grow -- scoped modifier on top of the shared .value-item/.icon-feature
   component, applied via .expect-grow wrapper class so home.html and employers-process.html
   (same base classes, no wrapper) are untouched. Currently on job-seekers-index.html and
   team-index.html (Founder "What to Expect from Liam"). Pure transform:scale, so it never
   affects layout -- the border-bottom divider lines between rows stay put regardless of growth. */
.expect-grow .value-item .ic{transition:transform .35s var(--ease);}
.expect-grow .value-item h4{transition:transform .3s var(--ease);transform-origin:left center;}
@media (hover:hover){
  .expect-grow .value-item:hover .ic{transform:scale(1.35);}
  .expect-grow .value-item:hover h4{transform:scale(1.14);}
  /* Job Seeker hub only -- bumped past the shared .expect-grow value above without touching
     the Founder page, which reuses .expect-grow too and is already tuned/approved. */
  .expect-grow-lg .value-item:hover .ic{transform:scale(1.65);}
}

/* Homepage Values list — pop-on-hover treatment, Bricolage Grotesque for standout word display.
   Redesigned 2026-07-17 from a 2-col x 3-row grid to a single vertical column sitting beside
   the text block (Liam's request) -- .value-pop-grid is now a plain flex column, not a CSS
   grid, since there's only one axis of items to lay out. */
.value-pop-grid{display:flex;flex-direction:column;}
/* Fixed width instead of stretching to fill the column, so the border-bottom divider reads as
   one consistent length for every row rather than the full (much wider) column width -- sized
   to comfortably fit the longest value, "Uncomplicated", plus a little breathing room.
   align-self:flex-start stops it stretching back out inside the flex column. 320px (2026-07-17)
   was overcorrected -- the resulting icon/word gap read as too big -- dialed back to 308px
   the same day once the word-wrap padding-left below was reduced to match. */
.value-pop-item{
  position:relative;padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;gap:.8rem;transform-origin:left center;
  transition:transform .5s var(--ease),border-color .4s ease;
  width:308px;align-self:flex-start;
}
.value-pop-item .dot{color:var(--cyan);flex:none;}
/* pop-icon-grow is taken out of normal flow entirely (position:absolute) so its size
   animation can never push .word sideways — the word's position only ever depends on
   word-wrap's own padding-left, not on how large the icon renders. 120px (2026-07-17) cleared
   the overlap but read as too big a gap -- dialed back to 108px the same day (icon is 96px
   wide, so this still clears it, just with a smaller ~12px gap instead of ~24px). */
.value-pop-item .word-wrap{display:inline-flex;align-items:center;position:relative;padding-left:108px;}
.value-pop-item .word{
  color:var(--white);font-family:var(--font-accent);
  font-weight:800;font-size:1.2rem;letter-spacing:-.005em;
}
/* Flip (rotateY, on the img) and grow (scale, on the wrapper span) are two separate
   elements/transitions on purpose — that's what keeps them as two readable beats
   (flip finishes, then it grows) instead of one blurred motion. Box grown from 72px to 96px
   2026-07-17 (Liam's request -- "make the white logo even larger on the zoom" now that the
   single-column layout has more open space to grow into). */
.value-pop-item .pop-icon-grow{
  position:absolute;left:6px;top:50%;z-index:2;
  width:96px;height:96px;pointer-events:none;perspective:300px;
  /* Root cause found 2026-07-17: /assets/img/logos/icon-white.png has ~23% transparent margin
     baked into all four sides of its own canvas, so every previous left:0->10->20->25px nudge was
     mostly just moving through invisible padding -- the actual visible molecule graphic barely
     shifted at all, which is why Liam kept saying "looks the same." Fixed properly by switching
     pop-icon (below) to a new tightly-cropped asset, icon-white-tight.png (new file -- the original
     icon-white.png is untouched since it's shared with several other, some locked, pages). Now that
     the box's edges match the graphic's real edges, left:6px gives a real, accurate ~6px gap to
     word-wrap's 108px padding (6+96=102). This `left` value is now trustworthy again. */
  transform-origin:right center;
  transform:translateY(-50%) scale(.2);
  /* Delay cut .25s->.05s and duration cut .5s->.3s (2026-07-17, Liam: reveal felt "stop-start" --
     the grow was waiting for the flip to basically finish before it started, reading as two
     separate beats instead of one motion). Now grow starts almost immediately alongside the
     flip and finishes quickly, so the two overlap into a single fluid reveal instead of a
     visible pause between them. */
  transition:transform .3s var(--ease) .05s;
}
.value-pop-item .pop-icon{
  display:block;width:100%;height:100%;max-width:none;object-fit:contain;
  opacity:0;
  transform:rotateY(90deg);
  /* Shortened alongside pop-icon-grow above, same reason -- .35s->.22s so the flip itself
     resolves faster and hands off into the grow with less of a gap. */
  transition:opacity .15s ease,transform .22s var(--ease);
}
@media (hover:hover){
  /* Exaggerated 2026-07-17 from 1.3 to 1.6 (Liam's request) -- origin stays left-anchored
     (see .value-pop-item above) so it grows away from the text block, not into it. */
  .value-pop-item:hover{transform:scale(1.6);z-index:5;border-color:transparent;}
  .value-pop-item:hover .pop-icon-grow{transform:translateY(-50%) scale(1);}
  .value-pop-item:hover .pop-icon{opacity:1;transform:rotateY(0deg);}
}
/* Splash push, "compress together" version (2026-07-17, refining the 2026-07-17 stick-
   together version). That version pushed each whole group (above/below the hovered item)
   as one rigid block -- same offset for every sibling -- so the ONE gap next to the
   hovered item was right, but siblings within a group kept their original spacing between
   each other instead of visibly compressing together. Liam's example: hovering "Transparent"
   should push Supportive up and Lasting down, AND pull Human/Uncomplicated/Supportive into
   a tighter cluster, and Lasting/Energetic into a tighter cluster. Fix: give each sibling an
   individual offset that decays with distance from the hovered item (70/46/30/18/10px for
   rank 1..5, rank 1 = the sibling touching the hovered item) instead of one flat value per
   group. Because the offsets shrink for siblings farther from the hover point, adjacent
   siblings end up CLOSER to each other than at rest (the decreasing gap between consecutive
   offsets closes up their spacing) while the group as a whole still moves away from the
   hovered item -- an accordion/compress effect, not even spreading (that was the rejected
   2026-07-17 "graduated" attempt) and not a rigid block shift (2026-07-17 "stick together").
   Scale-down (0.9) kept flat across all non-hovered siblings -- only the position decays.
   Scoped to .value-pop-grid (this section only). */
@media (hover:hover){
  .value-pop-grid:has(.value-pop-item:hover) .value-pop-item{border-color:transparent;}

  .value-pop-grid:has(.value-pop-item:nth-child(1):hover) .value-pop-item:nth-child(2){transform:translateY(70px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(1):hover) .value-pop-item:nth-child(3){transform:translateY(46px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(1):hover) .value-pop-item:nth-child(4){transform:translateY(30px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(1):hover) .value-pop-item:nth-child(5){transform:translateY(18px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(1):hover) .value-pop-item:nth-child(6){transform:translateY(10px) scale(.9);}

  .value-pop-grid:has(.value-pop-item:nth-child(2):hover) .value-pop-item:nth-child(1){transform:translateY(-70px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(2):hover) .value-pop-item:nth-child(3){transform:translateY(70px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(2):hover) .value-pop-item:nth-child(4){transform:translateY(46px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(2):hover) .value-pop-item:nth-child(5){transform:translateY(30px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(2):hover) .value-pop-item:nth-child(6){transform:translateY(18px) scale(.9);}

  .value-pop-grid:has(.value-pop-item:nth-child(3):hover) .value-pop-item:nth-child(1){transform:translateY(-46px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(3):hover) .value-pop-item:nth-child(2){transform:translateY(-70px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(3):hover) .value-pop-item:nth-child(4){transform:translateY(70px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(3):hover) .value-pop-item:nth-child(5){transform:translateY(46px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(3):hover) .value-pop-item:nth-child(6){transform:translateY(30px) scale(.9);}

  .value-pop-grid:has(.value-pop-item:nth-child(4):hover) .value-pop-item:nth-child(1){transform:translateY(-30px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(4):hover) .value-pop-item:nth-child(2){transform:translateY(-46px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(4):hover) .value-pop-item:nth-child(3){transform:translateY(-70px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(4):hover) .value-pop-item:nth-child(5){transform:translateY(70px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(4):hover) .value-pop-item:nth-child(6){transform:translateY(46px) scale(.9);}

  .value-pop-grid:has(.value-pop-item:nth-child(5):hover) .value-pop-item:nth-child(1){transform:translateY(-18px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(5):hover) .value-pop-item:nth-child(2){transform:translateY(-30px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(5):hover) .value-pop-item:nth-child(3){transform:translateY(-46px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(5):hover) .value-pop-item:nth-child(4){transform:translateY(-70px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(5):hover) .value-pop-item:nth-child(6){transform:translateY(70px) scale(.9);}

  .value-pop-grid:has(.value-pop-item:nth-child(6):hover) .value-pop-item:nth-child(1){transform:translateY(-10px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(6):hover) .value-pop-item:nth-child(2){transform:translateY(-18px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(6):hover) .value-pop-item:nth-child(3){transform:translateY(-30px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(6):hover) .value-pop-item:nth-child(4){transform:translateY(-46px) scale(.9);}
  .value-pop-grid:has(.value-pop-item:nth-child(6):hover) .value-pop-item:nth-child(5){transform:translateY(-70px) scale(.9);}
}

/* Value list (Our Values page — vertical list, hovered row zooms in + goes navy, others recede) */
/* Employer Hub "What We Recruit" list — same single-column splash-push mechanic as the home
   page's Our Values (.value-pop-grid, see above), adapted for a light/white section instead
   of navy: navy ink throughout (no background colour-flip on hover, unlike .value-row below),
   full-width rows + full-width divider (these are long phrases, not single words, so a
   content-hugging fixed-width line like .value-pop-item doesn't make sense here), and a true
   front/back icon FLIP (generic RL colour mark -> the custom navy per-specialisation icon)
   rather than .value-pop-item's grow-from-nothing reveal, since Liam asked for the icon to
   "flip into" a different mark, not appear from invisible. Same 6-item decaying-offset push
   table as .value-pop-grid (70/46/30/18/10px) reused as-is since the item count matches;
   retune if row height here ends up reading differently once seen live. */
.recruit-pop-grid{display:flex;flex-direction:column;}
.recruit-pop-item{
  position:relative;display:flex;align-items:center;gap:1.1rem;
  padding:1.15rem 0;border-bottom:1px solid var(--line-mist);
  transition:transform .5s var(--ease),border-color .4s ease;
  transform-origin:left center;
}
.recruit-pop-icon{position:relative;width:56px;height:56px;flex:none;perspective:600px;transition:transform .5s var(--ease);}
.recruit-pop-icon .ic-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease);}
.recruit-pop-icon .ic-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.recruit-pop-icon .ic-face img{width:100%;height:100%;object-fit:contain;}
.recruit-pop-icon .ic-face-back{transform:rotateY(180deg);}
.recruit-pop-word{color:var(--navy);font-weight:700;font-size:1.05rem;line-height:1.3;transition:transform .5s var(--ease);transform-origin:left center;}
@media (hover:hover){
  .recruit-pop-grid:has(.recruit-pop-item:hover) .recruit-pop-item{border-color:transparent;}
  /* Bumped 2026-07-17 (Liam: "text and last icon need to be large as well", the earlier 1.1/1.3
     read as barely-there) -- row 1.1->1.3, icon 1.3->1.7 (icon gets extra emphasis on top of the
     row's own growth since it's the "last icon" -- the revealed custom navy mark -- Liam
     specifically wants prominent). Word gets its own explicit scale too rather than relying only
     on the parent row's transform, so it's unmistakably growing even though this is a full-width
     row with less spare space than the home page's isolated column. */
  .recruit-pop-item:hover{transform:scale(1.3);z-index:5;}
  .recruit-pop-item:hover .recruit-pop-icon{transform:scale(1.7);}
  .recruit-pop-item:hover .recruit-pop-word{transform:scale(1.15);}
  .recruit-pop-item:hover .ic-flip-inner{transform:rotateY(180deg);}

  .recruit-pop-grid:has(.recruit-pop-item:nth-child(1):hover) .recruit-pop-item:nth-child(2){transform:translateY(70px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(1):hover) .recruit-pop-item:nth-child(3){transform:translateY(46px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(1):hover) .recruit-pop-item:nth-child(4){transform:translateY(30px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(1):hover) .recruit-pop-item:nth-child(5){transform:translateY(18px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(1):hover) .recruit-pop-item:nth-child(6){transform:translateY(10px) scale(.9);}

  .recruit-pop-grid:has(.recruit-pop-item:nth-child(2):hover) .recruit-pop-item:nth-child(1){transform:translateY(-70px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(2):hover) .recruit-pop-item:nth-child(3){transform:translateY(70px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(2):hover) .recruit-pop-item:nth-child(4){transform:translateY(46px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(2):hover) .recruit-pop-item:nth-child(5){transform:translateY(30px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(2):hover) .recruit-pop-item:nth-child(6){transform:translateY(18px) scale(.9);}

  .recruit-pop-grid:has(.recruit-pop-item:nth-child(3):hover) .recruit-pop-item:nth-child(1){transform:translateY(-46px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(3):hover) .recruit-pop-item:nth-child(2){transform:translateY(-70px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(3):hover) .recruit-pop-item:nth-child(4){transform:translateY(70px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(3):hover) .recruit-pop-item:nth-child(5){transform:translateY(46px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(3):hover) .recruit-pop-item:nth-child(6){transform:translateY(30px) scale(.9);}

  .recruit-pop-grid:has(.recruit-pop-item:nth-child(4):hover) .recruit-pop-item:nth-child(1){transform:translateY(-30px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(4):hover) .recruit-pop-item:nth-child(2){transform:translateY(-46px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(4):hover) .recruit-pop-item:nth-child(3){transform:translateY(-70px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(4):hover) .recruit-pop-item:nth-child(5){transform:translateY(70px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(4):hover) .recruit-pop-item:nth-child(6){transform:translateY(46px) scale(.9);}

  .recruit-pop-grid:has(.recruit-pop-item:nth-child(5):hover) .recruit-pop-item:nth-child(1){transform:translateY(-18px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(5):hover) .recruit-pop-item:nth-child(2){transform:translateY(-30px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(5):hover) .recruit-pop-item:nth-child(3){transform:translateY(-46px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(5):hover) .recruit-pop-item:nth-child(4){transform:translateY(-70px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(5):hover) .recruit-pop-item:nth-child(6){transform:translateY(70px) scale(.9);}

  .recruit-pop-grid:has(.recruit-pop-item:nth-child(6):hover) .recruit-pop-item:nth-child(1){transform:translateY(-10px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(6):hover) .recruit-pop-item:nth-child(2){transform:translateY(-18px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(6):hover) .recruit-pop-item:nth-child(3){transform:translateY(-30px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(6):hover) .recruit-pop-item:nth-child(4){transform:translateY(-46px) scale(.9);}
  .recruit-pop-grid:has(.recruit-pop-item:nth-child(6):hover) .recruit-pop-item:nth-child(5){transform:translateY(-70px) scale(.9);}
}

.value-list .value-row{
  display:grid;grid-template-columns:auto 1fr;gap:1.8rem;align-items:center;
  padding:2.2rem 1.75rem;margin-inline:-1.75rem;border-bottom:1px solid var(--line-mist);
  border-radius:var(--radius-md);
  transition:transform .45s var(--ease),background .4s ease,border-color .4s ease;
  transform-origin:left center;
}
.value-list .value-row:first-child{padding-top:2.2rem;}
.value-list .value-row:last-child{border-bottom:none;}
/* Same flip-into-a-large-white-mark treatment as the process-num component (Job Seekers /
   Employers process lists) — reused here since it's the same idea (small colour icon at
   rest, flips to a big white RL mark on hover). See .process-num for the tuned reference
   values (position, size) this borrows directly. */
.value-row .ic{width:56px;height:56px;position:relative;flex:none;perspective:600px;transition:transform .5s var(--ease);}
/* The grown reveal icon's left edge can reach past the card's own left boundary (it sits
   close to it at rest) — shifting both the icon and the text column right together on hover
   gives it clearance without changing their spacing to each other. */
.value-row .ic ~ div{transition:transform .5s var(--ease);}
.value-row .ic-flip{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .6s var(--ease);
}
.value-row .ic-colour{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.value-row .ic-white-reveal{
  position:absolute;top:50%;left:calc(50% + 18px);z-index:2;
  /* Box shrunk ~25% vs the .process-num version below to compensate: icon-white.png's own
     visual fill was normalized/enlarged ~33% site-wide (2026-07-18, testimonials fix), which
     over-grew the mark in this fixed-box reveal. Sized back down to its original on-screen
     size here specifically -- .process-num's reveal (Job Seekers/Employers process) wasn't
     reported as off, so left untouched. */
  width:clamp(128px,11.3vw,181px);height:clamp(128px,11.3vw,181px);max-width:none;object-fit:contain;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:translate(-50%,-50%) rotateY(180deg);
}
.value-row h4{margin-bottom:.4rem;font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);transition:color .4s ease;}
.value-row p{font-size:1rem;margin:0;max-width:58ch;transition:color .4s ease;}
.value-row p .value-lead{color:var(--cyan);transition:color .4s ease;}
@media (hover:hover){
  .value-list:hover .value-row{transform:scale(.88);}
  .value-list:hover .value-row:hover{
    transform:scale(1.18);background:var(--navy);border-color:transparent;
  }
  .value-row:hover h4{color:var(--white);}
  .value-row:hover p{color:rgba(255,255,255,.85);}
  .value-row:hover p .value-lead{color:var(--white);}
  .value-row:hover .ic-flip{transform:rotateY(180deg);}
  .value-row:hover .ic{transform:translateX(46px);}
  .value-row:hover .ic ~ div{transform:translateX(46px);}
}
@media (max-width:640px){
  .value-list .value-row{grid-template-columns:1fr;gap:.9rem;}
}

/* Process list (Job Seekers > Our Process — vertical list, hovered row zooms in + goes navy, others recede; same concept as .value-list/.value-row) */
.process-list .process-row{
  display:grid;grid-template-columns:auto 1fr;gap:1.8rem;align-items:center;
  padding:2.2rem 1.75rem;margin-inline:-1.75rem;border-bottom:1px solid var(--line-mist);
  border-radius:var(--radius-md);
  transition:transform .45s var(--ease),background .4s ease,border-color .4s ease;
  transform-origin:left center;
}
.process-list .process-row:first-child{padding-top:2.2rem;}
.process-list .process-row:last-child{border-bottom:none;}
.process-num{
  width:56px;height:56px;border-radius:50%;background:var(--navy);
  position:relative;flex:none;transition:background .4s ease;
  perspective:600px;
}
/* TRIAL (2026-07-17): flips into a large white RL mark on hover (revert available at
   backups/2026-07-17-process-icon-large-white-trial/before/ if this doesn't land). Back-face
   sits inside a rotating parent, so its position is defined via left/right insets (not
   translateX) — a plain translateX on the back face gets mirrored by the parent's own
   180deg rotation and ends up reversed on screen. Left/right insets aren't affected by that,
   which is how the position was tuned live with Liam previously. */
.process-num-flip{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .6s var(--ease);
}
.process-num .num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--white);font-family:var(--font-display);font-size:1.3rem;font-weight:600;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.process-num .ic-white-reveal{
  position:absolute;top:50%;left:calc(50% + 28px);z-index:2;
  /* Shrunk ~25% 2026-07-18 (same fix as .value-row .ic-white-reveal above) -- icon-white.png's
     own visual fill was normalized/enlarged ~33% site-wide during the testimonials fix, which
     over-grew the mark here too, closing up the gap to the text column. Wasn't reported at the
     time so was left as-is; now confirmed drifted, sized back down to its original footprint.
     Shared by both Job Seekers and Employers process pages -- same fix applies to both. */
  width:clamp(128px,11.3vw,181px);height:clamp(128px,11.3vw,181px);max-width:none;object-fit:contain;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:translate(-50%,-50%) rotateY(180deg);
}
.process-row h3{margin-bottom:.4rem;font-family:var(--font-body);font-weight:700;letter-spacing:-0.005em;font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);transition:color .4s ease;}
.process-row p{font-size:1rem;margin:0;max-width:58ch;transition:color .4s ease;}
@media (hover:hover){
  .process-list:hover .process-row{transform:scale(.88);}
  .process-list:hover .process-row:hover{
    transform:scale(1.18);background:var(--navy);border-color:transparent;
  }
  .process-row:hover h3{color:var(--white);}
  .process-row:hover p{color:rgba(255,255,255,.85);}
  .process-row:hover .process-num-flip{transform:rotateY(180deg);}
}
/* Scoped variant: Job Seeker home "Our Process" — the icon+text sat flush-left with a lot
   of empty space on the right, which became obvious once the row pops up into its navy
   "card" on hover. Sizing the columns to their content and centering the group as a whole
   (instead of the icon fixed + text stretching to fill the row) keeps it centred at rest
   and inside the popped-up card. */
.process-list-centered .process-row{grid-template-columns:auto auto;justify-content:center;}
@media (max-width:640px){
  .process-list .process-row{grid-template-columns:1fr;gap:.9rem;}
  .process-list-centered .process-row{justify-content:normal;}
}

/* Logo strip */
.logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.75rem,4vw,3.5rem);}
.logo-strip img{height:32px;width:auto;filter:grayscale(1);opacity:.55;transition:opacity .35s ease,filter .35s ease;}
.logo-strip a:hover img{filter:grayscale(0);opacity:1;}

/* Logo feature (single composite mark set, zoom on hover) */
.logo-feature{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:13%;}
.logo-feature img{width:100%;height:auto;display:block;transition:transform .6s var(--ease);}

/* Split layouts where hovering the logo side eases back the text side */
.split-text{transition:transform .5s var(--ease),opacity .5s ease;}
@media (hover:hover){
  .logo-feature:hover img{transform:scale(1.65);}
  .split-affiliate:has(.logo-feature:hover) .split-text{transform:scale(.8);opacity:.5;}
}

/* Photo grid (stylised, duotone -> colour on hover) */
.photo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;border-radius:var(--radius-md);overflow:hidden;}
.photo-grid .tile{position:relative;aspect-ratio:1;overflow:hidden;background:var(--navy);}
.photo-grid .tile img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s var(--ease),filter .6s ease;filter:grayscale(1) contrast(1.05);}
.photo-grid .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg, rgba(1,10,110,.55), rgba(0,149,201,.35));mix-blend-mode:multiply;transition:opacity .6s ease;}
.photo-grid .tile:hover img{transform:scale(1.08);filter:grayscale(0) contrast(1);}
.photo-grid .tile:hover::after{opacity:0;}
@media (max-width: 880px){.photo-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width: 560px){.photo-grid{grid-template-columns:repeat(3,1fr);}}

.photo-feature{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--shadow-md);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.photo-feature:hover{transform:scale(1.12) translateY(-6px);box-shadow:var(--shadow-lg);z-index:5;}
/* "Why Recruitment Labs" page only -- bigger outer-box zoom than the shared .photo-feature
   default above (which stays as-is for Our Values, which reuses the same component). Only the
   box grows here; .photo-feature:hover img keeps its own smaller internal zoom untouched. */
.photo-feature-lg:hover{transform:scale(1.2) translateY(-6px);}
.photo-feature img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  transition:transform .8s var(--ease),filter .8s ease;filter:grayscale(1) contrast(1.05);
}
.photo-feature::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg, rgba(1,10,110,.55), rgba(0,149,201,.35));
  mix-blend-mode:multiply;transition:opacity .6s ease;
}
.photo-feature:hover img{transform:scale(1.06);filter:grayscale(0) contrast(1);}
.photo-feature:hover::after{opacity:0;}
.photo-feature .caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2rem 1.75rem 1.5rem;
  background:linear-gradient(0deg, rgba(1,10,110,.92), transparent);
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s var(--ease);
}
.photo-feature:hover .caption{opacity:1;transform:translateY(0);}
.photo-feature .caption strong{display:block;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.1rem;color:var(--white);}
.photo-feature .caption span{display:block;font-size:.82rem;color:rgba(255,255,255,.75);margin-top:.2rem;}

/* Discover grid — About Us "Get to know how we work" tiles.
   White icon/text throughout for contrast on dark navy; zoom + solid-cyan-fill + glow aura on hover.
   Scoped (does not touch shared .card). */
.discover-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.discover-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.discover-grid.cols-2{grid-template-columns:repeat(2,1fr);}

/* Compact pill list — brief icon+label chips with crossfade + zoom (Employer hub: Services / What We Recruit overviews) */
.pill-list{display:flex;flex-wrap:wrap;gap:1rem;}
.pill{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:.6rem 1.25rem .6rem .6rem;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  transition:background .4s ease,border-color .4s ease,transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pill .ic{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:none;position:relative;transition:background .4s ease;}
.pill .ic img{position:absolute;inset:0;margin:auto;width:19px;height:19px;object-fit:contain;transition:opacity .4s ease;}
.pill .ic .ic-white{opacity:1;}
.pill .ic .ic-colour{opacity:0;}
.pill span{font-weight:600;font-size:.9rem;color:var(--white);white-space:nowrap;transition:color .4s ease;}
.pill.pill-light{background:var(--white);border-color:var(--line-mist);box-shadow:var(--shadow-sm);}
.pill.pill-light .ic{background:var(--cyan-100);}
.pill.pill-light .ic .ic-white{opacity:0;}
.pill.pill-light .ic .ic-colour{opacity:1;}
.pill.pill-light span{color:var(--navy);}

/* All hover/pop interactions guarded to real pointer devices only — prevents stuck hover states on touch/tap */
@media (hover:hover){
  /* Dark pill hover — white background, colour icon, cyan text, pronounced pop */
  .pill:hover{
    background:var(--white);border-color:transparent;z-index:5;
    box-shadow:var(--shadow-lg), 0 0 70px rgba(0,149,201,.55);
  }
  .pill:hover .ic{background:var(--cyan-100);}
  .pill:hover .ic .ic-white{opacity:0;}
  .pill:hover .ic .ic-colour{opacity:1;}
  .pill:hover span{color:var(--cyan);}

  /* Light pill (What We Recruit) — inverse hover: navy background, white icon, white text */
  .pill.pill-light:hover{
    background:var(--navy);border-color:transparent;z-index:5;
    box-shadow:var(--shadow-lg), 0 0 70px rgba(1,10,110,.4);
  }
  .pill.pill-light:hover .ic{background:rgba(255,255,255,.14);}
  .pill.pill-light:hover .ic .ic-colour{opacity:0;}
  .pill.pill-light:hover .ic .ic-white{opacity:1;}
  .pill.pill-light:hover span{color:var(--white);}

  /* Sibling recede + hovered tile pops out — hovered tile's scale/lift must win over the sibling-recede rule, so it's a more specific selector written after it */
  .pill-list:hover .pill{transform:scale(.92);opacity:.55;}
  .pill-list:hover .pill:hover{transform:scale(1.28) translateY(-12px);opacity:1;}
}

/* Fixed 4-across grid variant (Services) — wraps a 6th/5th item to a centred second row */
.pill-list.grid-4{justify-content:center;}
.pill-list.grid-4 .pill{width:calc(25% - .75rem);justify-content:center;}
@media (max-width:900px){.pill-list.grid-4 .pill{width:calc(50% - .5rem);}}
@media (max-width:560px){
  .pill-list.grid-4 .pill{width:100%;}
  .pill span{white-space:normal;}
}
.discover-tile{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);
  padding:2.6rem 1.8rem;text-align:center;display:flex;flex-direction:column;align-items:center;
  transition:transform .5s var(--ease),background .4s ease,border-color .4s ease,box-shadow .5s ease;
}
.discover-tile .ic{width:96px;height:96px;position:relative;margin-bottom:1.6rem;flex:none;display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease);}
.discover-tile .ic img{width:100%;height:100%;object-fit:contain;}
/* Custom raster icons (e.g. the Salary Insights dollar-coin badge): the outline is a thin
   ring, not a bold solid shape, so at matching height it reads smaller/lighter than the
   layers/search svg siblings despite the tight crop. 2026-07-19: bumped 50px -> 64px after
   Liam flagged it looked small live on the page; slightly taller than the svg rule's 58px
   is what actually reads as the same visual size here. */
.discover-tile .ic img.ic-custom-raster{width:auto;height:64px;}
/* Fixed height, auto width (not a fixed square box) -- a forced square box made non-square-viewBox icons like briefcase (24x20) render shorter than square ones like upload (22x22) via SVG's default preserveAspectRatio letterboxing. Height is the thing that has to match for these to read as the same size; width is allowed to vary. Affects every .discover-tile icon site-wide (About hub, Services hub, Job Seekers hub) -- a correctness fix, not a one-page tweak, so it also straightens out the same briefcase/compass mismatch on services.html. */
.discover-tile .ic svg{height:58px;width:auto;color:var(--white);}
.discover-tile h4{color:var(--white);margin-bottom:.5rem;}
.discover-tile p{color:rgba(255,255,255,.78);font-size:.94rem;margin:0;}
.discover-tile .card-link{margin-top:auto;padding-top:1.5rem;color:var(--white);display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.88rem;transition:transform .4s var(--ease);transform-origin:center;}
.discover-tile .card-link svg{width:13px;height:13px;flex:none;opacity:.85;transition:transform .4s var(--ease);}
@media (hover:hover){
  .discover-grid:hover .discover-tile{transform:scale(.94);opacity:.6;}
  .discover-grid:hover .discover-tile:hover{
    transform:scale(1.06);opacity:1;background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 55px rgba(0,149,201,.6), 0 0 100px rgba(0,149,201,.3);
  }
  .discover-tile:hover .ic{transform:scale(1.5);}
  .discover-tile:hover .card-link{transform:scale(1.2);}
  .discover-tile:hover .card-link svg{transform:translateX(5px) scale(1.2);}
}

@media (max-width:980px){.discover-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){
  .discover-grid{grid-template-columns:1fr;}
  .discover-tile{padding:2.2rem 1.6rem;}
  .discover-tile .ic{width:80px;height:80px;}
  /* .cols-2/.cols-3 have higher specificity than the plain .discover-grid rule just above
     (two classes vs one), so without this they'd silently win the cascade and stay multi-
     column right down to phone widths. Restating the 1-column collapse at matching
     specificity here is what actually makes it take effect on mobile. */
  .discover-grid.cols-2,.discover-grid.cols-3{grid-template-columns:1fr;}
}

/* ---------- 9. FOOTER ---------- */
.site-footer{
  position:relative;
  background-color:var(--navy);
  background-image:
    linear-gradient(180deg, rgba(1,10,110,.85) 0%, rgba(1,10,110,.88) 45%, rgba(1,10,110,.94) 100%),
    url('/assets/img/photos/sydney-harbour-salary-insights-hero.webp');
  background-position:center bottom;background-size:cover;background-repeat:no-repeat;
  color:rgba(255,255,255,.68);padding-top:var(--space-section-sm);
}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand img{width:220px;height:auto;margin-bottom:1.25rem;}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.92rem;max-width:30ch;}
.footer-col h5{font-family:var(--font-body);color:var(--white);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.15rem;font-weight:700;}
.footer-col h5 a{color:inherit;transition:color .25s ease;}
.footer-col h5 a:hover{color:var(--cyan);}
.footer-col ul{display:flex;flex-direction:column;gap:.75rem;}
.footer-col a{font-size:.92rem;color:rgba(255,255,255,.68);transition:color .25s ease;}
.footer-col a:hover{color:var(--cyan);}
.footer-contact li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;}
.footer-contact svg{width:16px;height:16px;flex:none;margin-top:.2rem;color:var(--cyan);}
.footer-social{display:flex;gap:.75rem;margin-top:1.5rem;}
.footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:background .25s ease,border-color .25s ease;}
.footer-social a:hover{background:var(--cyan);border-color:var(--cyan);}
.footer-social svg{width:16px;height:16px;}
.footer-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-block:1.75rem;font-size:.82rem;color:rgba(255,255,255,.5);}
.footer-easter-egg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.16);font-size:.68rem;letter-spacing:.1em;pointer-events:none;user-select:none;}
.footer-legal{display:flex;gap:1.5rem;flex-wrap:wrap;}
.footer-legal a{color:rgba(255,255,255,.5);}
.footer-legal a:hover{color:var(--cyan);}
@media (max-width: 980px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width: 560px){
  .footer-top{grid-template-columns:1fr;}
  .footer-easter-egg{position:static;transform:none;order:3;width:100%;text-align:center;margin-top:.15rem;}
}

/* CTA banner */
.cta-banner{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  /* Same shared fixed-viewport molecule canvas as .section/.bg-navy (see the comment above
     .section) so the pattern lines up continuously with whatever section this banner sits
     inside, even though this element is a rounded, inset card rather than a full section.
     White ink since this card itself is navy. Liam's request, 2026-07-17. */
  background-color:var(--navy);
  background-image:url('/assets/img/photos/molecule-white-faint.webp');
  background-position:center top;background-size:100% auto;
  background-repeat:no-repeat;background-attachment:fixed;
  padding:clamp(2.5rem,3vw,4.5rem);text-align:center;color:var(--white);
}
.cta-banner::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 15% 20%, rgba(0,149,201,.4), transparent 45%),
                    radial-gradient(circle at 88% 85%, rgba(176,141,79,.3), transparent 40%);
}
.cta-banner > *{position:relative;z-index:1;}
/* Mist-blue glow variant (swap the warm gold accent for cool misty blue — used where the page's palette should stay cool, e.g. Employers > Our Process) */
.cta-banner.glow-mist::before{
  background-image:radial-gradient(circle at 15% 20%, rgba(0,149,201,.4), transparent 45%),
                    radial-gradient(circle at 88% 85%, rgba(151,197,224,.35), transparent 40%);
}
.cta-banner h2{color:var(--white);max-width:26ch;margin-inline:auto;}
.cta-banner .lead{color:rgba(255,255,255,.78);max-width:52ch;margin-inline:auto;margin-top:1rem;}
.cta-actions{display:flex;gap:1rem;justify-content:center;margin-top:2.2rem;flex-wrap:wrap;}
.cta-banner .grid{text-align:left;}

/* ---------- 10. FORMS ---------- */
.field{display:flex;flex-direction:column;gap:.5rem;text-align:left;}
.field label{font-family:var(--font-body);font-size:.85rem;font-weight:700;color:var(--cyan-600);letter-spacing:.08em;text-transform:uppercase;}
.field input,.field textarea,.field select{
  padding:.9rem 1.05rem;border:1.5px solid var(--line-mist);border-radius:var(--radius-sm);
  background:var(--white);font-size:1rem;transition:border-color .25s ease,box-shadow .25s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-100);outline:none;}
.field textarea{resize:vertical;min-height:130px;}
.field input[type="file"]{padding:.65rem .8rem;font-size:.9rem;color:var(--ink-soft);}
.field input[type="file"]::file-selector-button{
  padding:.55rem 1rem;margin-right:.9rem;border:none;border-radius:6px;
  background:var(--cyan);color:var(--white);font-weight:600;font-size:.85rem;cursor:pointer;
  transition:background .25s ease;
}
.field input[type="file"]::file-selector-button:hover{background:var(--navy);}
.field .hint{display:block;margin-top:.4rem;font-size:.78rem;color:var(--ink-faint);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.form-note{font-size:.82rem;color:var(--ink-faint);}
.hp-field{position:absolute;left:-9999px;opacity:0;}
.form-status{margin-top:1rem;padding:.95rem 1.15rem;border-radius:var(--radius-sm);font-size:.92rem;display:none;}
.form-status.is-visible{display:block;}
.form-status.is-success{background:var(--cyan-100);color:var(--navy);border:1px solid rgba(0,149,201,.3);}
.form-status.is-error{background:#FBEAEA;color:#8A2E2E;border:1px solid rgba(138,46,46,.25);}
.btn[disabled]{opacity:.6;cursor:not-allowed;}

/* Accordion (FAQ) */
.accordion-item{border-bottom:1px solid var(--line);}
.accordion-trigger{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.5rem 0;text-align:left;font-family:var(--font-display);font-size:1.15rem;color:var(--navy);font-weight:600;
}
.accordion-trigger svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease);color:var(--cyan);}
.accordion-item.is-open .accordion-trigger svg{transform:rotate(45deg);}
.accordion-item.is-open .accordion-panel{grid-template-rows:1fr;max-height:none;}
/* Grid-rows collapse (0fr -> 1fr), not a JS-measured max-height. The old approach set
   max-height to a pixel value computed from scrollHeight at click time -- fragile, because that
   value goes stale the moment the panel's real content height changes for any reason afterward
   (most likely culprit here: the custom web fonts finishing their async load AFTER the height was
   measured, reflowing the text to a taller box than the now-fixed max-height allowed, silently
   clipping it -- matches Liam's "cuts off sometimes, not always" report exactly, since it depends
   on font-load timing/caching). Grid-rows has no fixed value to go stale -- it always tracks the
   panel's actual current content height, whatever that happens to be at any given moment. */
.accordion-panel{display:grid;grid-template-rows:0fr;max-height:0;overflow:hidden;transition:grid-template-rows .4s var(--ease);}
.accordion-panel > div{overflow:hidden;min-height:0;padding-bottom:1.5rem;}
.accordion-panel p{font-size:.98rem;}

/* FAQ group accordion — one level up from the plain accordion above (Candidate FAQ page,
   2026-07-18). Liam's brief: click a category to reveal its list of questions, click a question
   to reveal its answer -- two independently-collapsing levels, not one flat list. Deliberately
   its own component (.faq-group / .faq-group-trigger / .faq-group-panel) rather than reusing
   .accordion-item for both levels: the plain accordion's JS does an exclusive-open toggle scoped
   to `trigger.closest('.accordion-item').parentElement`, so nesting a second, differently-named
   layer around it means the two levels' open/close states can never cross-interfere, and each
   group's inner question list still gets the existing accordion component completely unmodified.
   Card-style rather than a plain bordered row (like the inner accordion) so the two levels read as
   visually distinct steps, not one continuous list.

   Hover/open treatment (added 2026-07-18, "very much in line with the Our Process transitions")
   deliberately colours only the .faq-group-trigger header bar navy, not the whole card -- the
   revealed panel underneath holds nested question accordions with their own cyan-question /
   dark-answer colour scheme, and painting the whole card navy would put that text on a navy
   background with no contrast. Keeping .faq-group's own background white and transitioning
   .faq-group-trigger's background instead gives the "tile goes navy" effect on the part that's
   always visible, while the panel stays legible whenever it's open. Same treatment fires on
   :hover AND .is-open (not just :hover) so a group doesn't flash navy on hover then revert to
   a plain white header while its own panel is still expanded underneath it -- would read as an
   inconsistent, half-finished state once the mouse moves away after clicking. */
.faq-group{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--white);overflow:hidden;transition:transform .45s var(--ease),border-color .3s ease,box-shadow .3s ease,opacity .4s ease;}
.faq-group + .faq-group{margin-top:1rem;}
.faq-group.is-open{border-color:var(--cyan);box-shadow:var(--shadow-md);}
.faq-group-trigger{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.25rem;
  padding:1.85rem 2rem;text-align:left;background:none;transition:background .4s ease;
}
.faq-group-trigger-text{display:flex;align-items:center;gap:1.25rem;}
.faq-group-icon{position:relative;width:52px;height:52px;border-radius:14px;background:var(--cyan-100);flex:none;perspective:600px;transition:transform .5s var(--ease),background .4s ease;}
.faq-group-icon .ic-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease);}
.faq-group-icon .ic-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.faq-group-icon .ic-face img{width:62%;height:62%;object-fit:contain;}
.faq-group-icon .ic-face-back{transform:rotateY(180deg);}
/* h2-scale on purpose (Liam: match "Two decades of specialist expertise..." on the Job Seekers
   hub exactly) rather than the plain h3 default -- five stacked category titles reading at full
   section-heading size, not a smaller sub-heading size. */
.faq-group-trigger h3{margin:0;font-family:var(--font-body);font-weight:700;letter-spacing:-0.005em;font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);transition:color .4s ease;}
.faq-group-count{font-size:.95rem;color:var(--ink-faint);font-weight:500;transition:color .4s ease;}
/* Direct-child selector, not a descendant one -- otherwise this would also catch the category
   icon's own svg nested two levels deeper inside .faq-group-trigger-text .faq-group-icon,
   resizing/rotating it along with the trailing plus indicator by mistake. */
.faq-group-trigger > svg{width:22px;height:22px;flex:none;transition:transform .35s var(--ease),color .4s ease;color:var(--cyan);}
.faq-group.is-open .faq-group-trigger > svg{transform:rotate(45deg);}
.faq-group.is-open .faq-group-panel{grid-template-rows:1fr;max-height:none;}
.faq-group:hover .faq-group-trigger,
.faq-group.is-open .faq-group-trigger{background:var(--navy);}
.faq-group:hover .faq-group-trigger h3,
.faq-group.is-open .faq-group-trigger h3{color:var(--white);}
.faq-group:hover .faq-group-count,
.faq-group.is-open .faq-group-count{color:rgba(255,255,255,.7);}
.faq-group:hover .faq-group-trigger > svg,
.faq-group.is-open .faq-group-trigger > svg{color:var(--white);}
/* Icon "grows and transitions to a large white icon" -- the whole chip scales up from its own
   centre (safe, symmetric transform-origin; see feedback_3d_flip_icon_gotchas for why an
   off-centre breakout element inside a rotateY parent would need mirrored positioning instead)
   while flipping to its white face, and its pale chip backdrop fades out since the white icon
   needs to sit directly on the now-navy trigger, not inside a cyan-100 tint. */
.faq-group:hover .faq-group-icon,
.faq-group.is-open .faq-group-icon{background:transparent;transform:scale(1.9);}
.faq-group:hover .faq-group-icon .ic-flip-inner,
.faq-group.is-open .faq-group-icon .ic-flip-inner{transform:rotateY(180deg);}
@media (hover:hover){
  .faq-groups:hover .faq-group{transform:scale(.97);opacity:.7;}
  .faq-groups:hover .faq-group:hover{transform:scale(1.02);opacity:1;}
}
/* Same grid-rows fix as .accordion-panel above, same reason (JS-measured max-height going
   stale) -- this was the more visible half of the bug, since a group panel's stale height also
   clips whichever question is open inside it. */
.faq-group-panel{display:grid;grid-template-rows:0fr;max-height:0;overflow:hidden;transition:grid-template-rows .45s var(--ease);}
.faq-group-panel > div{overflow:hidden;min-height:0;padding:.25rem 2rem 1.25rem;}
.faq-group-panel .accordion-item:last-child{border-bottom:none;}
/* Question/answer sizing and question colour bumped 2026-07-18 (Liam) -- scoped to this page's
   panel only, the base .accordion-trigger/.accordion-panel rules above stay untouched for
   whenever the plain single-level accordion gets reused elsewhere. */
.faq-group-panel .accordion-trigger{font-family:var(--font-body);font-size:1.25rem;padding:1.4rem 0;color:var(--cyan);}
.faq-group-panel .accordion-panel p{font-size:1.08rem;}

/* Testimonial / affiliate cards. Border switched from the generic grey .line to brand cyan
   (Liam felt grey washed out against the page's molecule background) and given the same
   invert-on-hover / sibling-recede "grow and shrink" treatment as .card-invert-solid
   (Our Services) and .discover-tile (Job Seeker/Employer hub CTAs) -- hovered card grows and
   goes solid cyan, siblings shrink back, text goes white. Logos are left in their original
   colours for now (see Liam's request, 2026-07-17) -- these are partner companies' own
   trademarks, not ours to freely recolour without checking the result/getting sign-off first. */
.affiliate-card{
  display:flex;flex-direction:column;gap:1.25rem;background:rgba(255,255,255,.3);
  border:1px solid var(--cyan);border-radius:var(--radius-md);padding:2.1rem;
  transition:transform .45s var(--ease),background .4s ease,border-color .4s ease,box-shadow .5s ease;
}
/* Colour/white logo crossfade -- same overlaid-image idea as .pill's ic-colour/ic-white,
   stacked absolutely inside the relatively-positioned .logo-box so they occupy the same spot.
   Both zoom slightly on hover (Liam's request, 2026-07-17) -- harmless that the transform
   applies to the colour one too since it's faded to opacity:0 by then. */
.affiliate-card .logo-box{height:72px;position:relative;}
.affiliate-card .logo-box img{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  max-height:100%;width:auto;max-width:210px;object-fit:contain;
  transition:opacity .4s ease,transform .45s var(--ease);
}
.affiliate-card .logo-box .logo-white{opacity:0;}
.affiliate-card p{font-size:.95rem;transition:color .4s ease;}
.affiliate-card strong{color:var(--cyan);transition:color .4s ease;}
.affiliate-card .card-link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1.2rem;
  font-weight:700;font-size:1.05rem;color:var(--cyan);
  transition:color .4s ease,transform .4s var(--ease);transform-origin:left center;
}
.affiliate-card .card-link svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease);}
@media (hover:hover){
  .grid:has(.affiliate-card):hover .affiliate-card{transform:scale(.88);opacity:.55;}
  .grid:has(.affiliate-card):hover .affiliate-card:hover{
    transform:translateY(-6px) scale(1.06);opacity:1;
    background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 40px rgba(0,149,201,.45);
  }
  .affiliate-card:hover .logo-box .logo-colour{opacity:0;}
  .affiliate-card:hover .logo-box .logo-white{opacity:1;}
  .affiliate-card:hover .logo-box img{transform:translateY(-50%) scale(1.08);}
  .affiliate-card:hover p{color:rgba(255,255,255,.92);}
  .affiliate-card:hover strong{color:var(--white);}
  .affiliate-card:hover .card-link{color:var(--white);transform:translateX(-10px) scale(1.12);}
  .affiliate-card:hover .card-link svg{transform:translateX(4px);}
}

/* Network band — shared decorative cyan/navy network texture over a misty-blue base, used
   wherever a section wants the same "connected network" motif. Two variants:
   .network-band-cover  — single band, no-repeat (fixed-size content, e.g. Affiliates grid+CTA)
   .network-band-repeat — tiled vertically (growing content, e.g. Insights articles, Candidate Spotlights) */
.network-band-cover,.network-band-repeat{position:relative;isolation:isolate;background:var(--mist);}
/* These two components wrap plain .section/.section-sm children (Candidate Spotlights,
   Insights listing, Services, Job Seeker Upload CV, Affiliates, Vacancies) rather than
   carrying content directly. Since .section/.section-sm now paint their own opaque white +
   cyan-molecule background (see .section above), that child background was fully hiding this
   wrapper'''s mist + affiliate-network texture underneath it -- reset it back to transparent
   here so these specific pages keep showing the original mist/network look, undisturbed by
   the site-wide molecule rollout. Liam's request, 2026-07-17: these should stay exactly as
   they were. */
.network-band-cover .section,.network-band-cover .section-sm,
.network-band-repeat .section,.network-band-repeat .section-sm{background:transparent;}
.network-band-cover::before,.network-band-repeat::before{
  content:"";position:absolute;inset:0;z-index:-1;
  opacity:.07;pointer-events:none;
}
.network-band-cover::before{
  background:url('/assets/img/photos/affiliate-network-cyan.webp') center 20%/100% auto no-repeat;
}
.network-band-repeat::before{
  background:url('/assets/img/photos/affiliate-network-cyan.webp') center top/100% auto repeat-y;
}

/* Team card */
.founder-card{display:grid;grid-template-columns:380px 1fr;gap:3.5rem;align-items:start;}
@media (max-width: 880px){.founder-card{grid-template-columns:1fr;}}
.founder-photo{border-radius:var(--radius-lg);overflow:hidden;background:var(--cream);}
.founder-meta{margin-top:1.5rem;display:flex;flex-direction:column;gap:.85rem;}
.founder-meta a,.founder-meta span{display:flex;align-items:center;gap:.65rem;font-size:.92rem;color:var(--ink-soft);}
.founder-meta svg{width:17px;height:17px;color:var(--cyan-600);flex:none;}
.founder-dogs{margin-top:2rem;max-width:250px;margin-inline:auto;}
.founder-dogs img{width:100%;height:auto;display:block;}
.founder-dogs span{display:block;margin-top:.6rem;font-family:var(--font-display);font-style:italic;font-size:.85rem;color:var(--ink-faint);text-align:center;}
.cap-item{display:flex;gap:.75rem;align-items:flex-start;font-size:1.15rem;padding:.5rem 0;}
.cap-item span{color:var(--ink-soft);transition:color .3s ease,font-weight .3s ease;}
.cap-icon{position:relative;width:21px;height:21px;flex:none;margin-top:.2rem;}
.cap-icon svg{position:absolute;inset:0;width:100%;height:100%;color:var(--cyan);transition:opacity .35s ease,transform .35s var(--ease);}
.cap-icon-arrow{opacity:0;transform:translateX(-4px);}
@media (hover:hover){
  .cap-item:hover span{color:var(--cyan);font-weight:700;}
  .cap-item:hover .cap-icon-tick{opacity:0;transform:translateX(4px);}
  .cap-item:hover .cap-icon-arrow{opacity:1;transform:translateX(0);}
}
@media (max-width:520px){.cap-item{font-size:1rem;gap:.65rem;}.cap-icon{width:18px;height:18px;}}

/* Appointments list */
/* Specialisation page "Understanding The Brief" intro: specialisation icon beside the copy
   block. Reworked 2026-07-19 (Liam: badge was on the wrong side, making this eyebrow sit out
   of line with "Market Perspective" below it -- and he wanted a genuinely different icon
   treatment, not just a bigger version of the same cyan box used everywhere else on the
   site). Text now comes first in the DOM (so the eyebrow lines up with Market Perspective's),
   badge sits on the right. The badge itself drops the flat solid-cyan rounded-square language
   used by .card/.value-item/.assess-item in favour of a soft cyan-tint circle with a bold
   navy mark and no hard edge -- a deliberately distinct "voice" for this one moment on the
   page. Kept beside the text at every breakpoint per Liam's earlier preference, just shrinks
   on small screens rather than stacking. */
.spec-intro-row{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;}
.spec-intro-badge{width:240px;height:240px;border-radius:50%;background:var(--cyan-100);display:flex;align-items:center;justify-content:center;flex:none;}
.spec-intro-badge img{width:168px;height:168px;object-fit:contain;}
@media (max-width:760px){
  .spec-intro-badge{width:170px;height:170px;}
  .spec-intro-badge img{width:120px;height:120px;}
}
@media (max-width:620px){
  .spec-intro-row{gap:1.25rem;}
  .spec-intro-badge{width:120px;height:120px;}
  .spec-intro-badge img{width:84px;height:84px;}
}

.appt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem 2rem;}
.appt-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){
  .appt-grid{grid-template-columns:repeat(2,1fr);}
  /* .cols-4 has higher specificity than the plain .appt-grid rule above (two classes vs
     one), so without this override it would silently win the cascade and stay 4-wide down
     to tablet width. Restating the 2-column collapse at matching specificity is what
     actually makes it take effect. */
  .appt-grid.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .appt-grid{grid-template-columns:1fr;}
  .appt-grid.cols-4{grid-template-columns:1fr;}
}
.appt-item{display:flex;gap:.85rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid var(--line-mist);font-size:.95rem;color:var(--ink);transition:border-color .15s ease-out,box-shadow .15s ease-out;}
.appt-item svg{width:16px;height:16px;color:var(--cyan);flex:none;margin-top:.25rem;}
.appt-item:hover{border-bottom-color:var(--cyan);box-shadow:inset 0 -1px 0 0 var(--cyan);}

/* Related Reading cards on specialisation pages -- 1 or 2 cards side by side,
   same "glass card + masthead icon + title link" language as the old single-card
   version but built as a reusable grid so a second genuinely related article can
   sit right beside the first instead of stacking. New dedicated classes rather
   than reusing .card-glass directly, per the shared-CSS guardrail (grep first,
   new class over mutating a shared one) -- .card-glass is used in several other
   contexts (Contact form, LinkedIn subscribe band) that shouldn't inherit any
   related-reading-specific sizing. 2026-07-19. */
.related-reading-wrap{max-width:760px;margin-inline:auto;}
.related-reading-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;margin-top:1.1rem;}
.related-reading-card{
  flex:1 1 320px;max-width:360px;display:flex;align-items:center;gap:1rem;text-align:left;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.25rem 1.5rem;
  text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.related-reading-grid-1 .related-reading-card{max-width:480px;}
@media (hover:hover){
  .related-reading-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
}
.related-reading-card img{width:64px;height:64px;flex:none;border-radius:12px;object-fit:cover;}
.related-reading-card span{font-family:var(--font-body);font-weight:700;font-size:.95rem;line-height:1.35;color:var(--navy);}
@media (max-width:560px){
  .related-reading-card{max-width:none;flex-basis:100%;}
}

/* Assess grid -- icon + heading + text rows (specialisation pages: What We Assess) */
.assess-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 2.5rem;}
@media (max-width:760px){.assess-grid{grid-template-columns:1fr;}}
.assess-item{display:flex;gap:1.4rem;align-items:center;}
/* Icon treatment matches the Founder page's "What to Expect from Liam" icon-feature-cyan
   component (team-index.html): solid cyan 96px tile with a white mark at rest, fading to
   transparent + a navy mark on hover, growing as it goes. Written fresh here rather than
   reusing .icon-feature-cyan directly (that class is shared with job-seekers-index.html and
   employers-process.html) so this styling is fully isolated to the assess grid and can never
   affect those other pages. Hover face is navy (not cyan, unlike the Founder original) --
   Liam's explicit request for this section, 2026-07-19. */
.assess-item .ic{
  flex:none;width:96px;height:96px;border-radius:22px;background:var(--cyan);
  position:relative;display:flex;align-items:center;justify-content:center;
  transition:background .4s ease,transform .35s var(--ease);
}
.assess-item .ic img{
  position:absolute;top:50%;left:50%;width:64px;height:64px;object-fit:contain;
  transition:opacity .45s ease,transform .45s var(--ease);
}
.assess-item .ic .ic-white{transform:translate(-50%,-50%) scale(1);}
.assess-item .ic .ic-navy{opacity:0;transform:translate(-50%,-50%) scale(.5);}
.assess-item h4{margin-bottom:.35rem;transition:transform .3s var(--ease);transform-origin:left center;}
@media (hover:hover){
  .assess-item:hover .ic{background:transparent;transform:scale(1.35);}
  .assess-item:hover .ic .ic-white{opacity:0;transform:translate(-50%,-50%) scale(1.4);}
  .assess-item:hover .ic .ic-navy{opacity:1;transform:translate(-50%,-50%) scale(1.2);}
  .assess-item:hover h4{transform:scale(1.14);}
}
@media (max-width:640px){
  .assess-item .ic{width:76px;height:76px;border-radius:18px;}
  .assess-item .ic img{width:50px;height:50px;}
}

/* Tag / pill */
.tag{display:inline-flex;align-items:center;padding:.35rem .85rem;border-radius:100px;background:var(--navy-100);color:var(--navy);font-size:.78rem;font-weight:700;letter-spacing:.02em;}
.tag.gold{background:var(--gold-100);color:var(--gold-600);}
.tag.navy-fill{background:var(--navy);color:var(--white);}

/* Embed frame wrapper (RecruitCRM widgets) */
.embed-frame{border-radius:var(--radius-md);overflow:hidden;}
.embed-frame iframe{width:100%;border:none;display:block;}

/* Card variant — white rounded "mat" behind the widget, since the RecruitCRM iframe itself has
   square corners. Scoped modifier (used on the Upload CV page only) so the shared .embed-frame
   base class stays untouched for the other two pages that use it (Vacancies, Contact). */
.embed-frame.embed-frame-card{
  background:var(--white);
  padding:clamp(.75rem,1.5vw,1.5rem);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
/* Narrow variant — matches the iframe's own width exactly (not the 1280px container), with
   padding only top/bottom so the card reads as a taller "frame" whose rounded corners peek out
   above and below the square widget, flush with it on the sides. Not applied to Vacancies,
   whose widget is intentionally width:100%. */
.embed-frame.embed-frame-card.embed-frame-card-narrow{
  max-width:1000px;margin-inline:auto;
  padding-inline:0;
  padding-block:clamp(1.5rem,3vw,2.5rem);
}


/* ---------- 11. UTILITIES / REVEAL ANIMATION ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal-group] > *{transition-delay:calc(var(--i,0) * 90ms);}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.divider{height:1px;background:var(--line);border:none;}
.icon-inline{width:1em;height:1em;vertical-align:-0.15em;}

::selection{background:var(--cyan);color:var(--white);}

.scroll-mt{scroll-margin-top:110px;}

/* ---------- 12. RESPONSIVE POLISH ---------- */
@media (max-width: 640px){
  .hide-sm{display:none;}
  .hero-content{padding-top:7rem;}
  .hero-sub{white-space:normal;}
  .hero-actions{flex-direction:column;width:100%;}
  .hero-actions .btn{width:100%;}
  .cta-actions{flex-direction:column;}
  .cta-actions .btn{width:100%;}
  .timeline-item{grid-template-columns:48px 1fr;gap:1.1rem;}
  .timeline-num{width:48px;height:48px;font-size:1.1rem;}
  .timeline-item::before{left:23px;}
  .value-item{grid-template-columns:1fr;gap:.9rem;}
  .founder-card{gap:2rem;}
}

/* Insights / article cards */
.article-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.article-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.article-card .thumb{aspect-ratio:16/9;background:var(--mist);position:relative;overflow:hidden;}
.article-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.article-card:hover .thumb img{transform:scale(1.06);}
.article-card .body{padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.article-card .meta{font-size:.78rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.article-card h3{font-size:1.2rem;}
.article-card .card-link{margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.9rem;color:var(--cyan-600);}
.article-card .card-link svg{width:11px;height:11px;transition:transform .3s var(--ease);}
.article-card:hover .card-link svg{transform:translateX(4px);}

.empty-state{text-align:center;padding:4rem 2rem;background:var(--cream);border-radius:var(--radius-lg);}
.empty-state .ic{width:64px;height:64px;border-radius:16px;background:var(--navy-100);color:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;}
.empty-state .ic svg{width:32px;height:32px;}

/* Policy / long-form content pages */
.prose h2{margin-top:2.75rem;margin-bottom:1rem;font-size:1.55rem;}
.prose h3{margin-top:2rem;margin-bottom:.75rem;font-size:1.2rem;font-family:var(--font-body);font-weight:700;}
.prose p{margin-bottom:1.1rem;}
.prose ul{margin-bottom:1.1rem;}
.prose li{position:relative;padding-left:1.4rem;margin-bottom:.55rem;color:var(--ink-soft);font-size:var(--fs-body);}
.prose li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--cyan);}
.prose a{color:var(--cyan-600);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.prose strong{color:var(--navy);}
.toc{position:sticky;top:120px;background:var(--mist);border-radius:var(--radius-md);padding:1.5rem;}
.toc h5{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:1rem;font-weight:700;}
.toc ul{display:flex;flex-direction:column;gap:.65rem;}
.toc a{font-size:.88rem;color:var(--ink-soft);}
.toc a:hover,.toc a.is-active{color:var(--cyan-600);}
.policy-layout{display:grid;grid-template-columns:220px 1fr;gap:3.5rem;align-items:flex-start;}
@media (max-width:880px){.policy-layout{grid-template-columns:1fr;}.toc{position:static;}}

/* 404 */
.error-page{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:8rem var(--gutter) 5rem;}
.error-code{font-family:var(--font-display);font-size:clamp(4rem,3rem + 5vw,8rem);color:var(--cyan);font-weight:600;line-height:1;}

/* Print */
@media print{
  .site-header,.site-footer,.hero-scroll,.mobile-nav{display:none;}
}

/* ---------- 13. PORTRAIT PANEL (founder photo on brand gradient) ---------- */
.portrait-panel{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-700) 58%, var(--cyan-600) 155%);
  aspect-ratio:.86;display:flex;align-items:flex-end;justify-content:center;
}
.portrait-panel .motif{
  position:absolute;top:-10%;right:-14%;width:68%;opacity:.13;pointer-events:none;z-index:0;
}
.portrait-panel .portrait{
  position:relative;z-index:1;width:92%;height:auto;display:block;
  filter:drop-shadow(0 20px 40px rgba(1,10,110,.35));
}
.portrait-panel.compact{aspect-ratio:.82;}


/* ---------- Touch-tap equivalents of the hover language above ----------
   Touch devices have no hover state, so every :hover-triggered detail above (icon flips,
   colour swaps, card glow/lift) is otherwise invisible on mobile -- tapping a card just taps
   it, there's no "cursor lingers" moment to trigger a reveal. This block mirrors the SELF-
   contained hover treatments (the card/tile/pill's own icon flip, colour swap, glow, lift)
   onto a JS-applied .is-touched class, toggled on tap (see main.js). Deliberately NOT mirrored:
   the "hovering one card shrinks its siblings" choreography above (:has()-based and the plain
   grid:hover-dims-everyone-else rules) -- that only makes sense with a mouse hovering near
   several cards at once, and would look like a random glitch on a phone where you only ever
   touch one thing. Liam's call 2026-07-19: bring over everything that translates well, skip
   what doesn't. */
@media (hover:none){
  /* card-invert (home "What We Recruit") */
  .navy-glow .card-invert.is-touched{
    transform:translateY(-6px) scale(1.08);opacity:1;
    background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 50px rgba(0,149,201,.6);
  }
  .navy-glow .card-invert.is-touched .ic{transform:scale(1.28);}
  .navy-glow .card-invert.is-touched .ic-flip-inner{transform:rotateY(180deg);}
  .navy-glow .card-invert.is-touched h4{color:var(--white);font-weight:700;transform:scale(1.06);}
  .navy-glow .card-invert.is-touched p{color:rgba(255,255,255,.92);}

  /* card-navy-pop */
  .card-navy-pop.is-touched{
    transform:translateY(-6px) scale(1.14);opacity:1;background:var(--cyan);
    box-shadow:var(--shadow-lg), 0 0 26px rgba(0,149,201,.35);
  }
  .card-navy-pop.is-touched .ic-flip-inner{transform:rotateY(180deg);}
  .card-navy-pop.is-touched h4{transform:scale(1.06);}

  /* card-invert-solid (Services / What We Recruit detail cards) */
  .card-invert-solid.is-touched{
    transform:translateY(-6px) scale(1.05);opacity:1;
    background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 26px rgba(0,149,201,.35);
  }
  .card-invert-solid.is-touched .ic{transform:scale(1.12);}
  .card-invert-solid.is-touched .ic-flip-inner{transform:rotateY(180deg);}
  .card-invert-solid.is-touched h3{color:var(--white);font-weight:700;transform:scale(1.06);}
  .card-invert-solid.is-touched p{color:rgba(255,255,255,.92);}
  .card-invert-solid.is-touched .card-learn-link{color:var(--white);transform:scale(1.22);}

  /* service-mini-tile (homepage Our Services) */
  .service-mini-tile.is-touched{
    transform:scale(1.15);opacity:1;z-index:5;
    background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 30px rgba(0,149,201,.4);
  }
  .service-mini-tile.is-touched .service-mini-icon{transform:scale(1.7);}
  .service-mini-tile.is-touched .service-mini-content{gap:1.5rem;}
  .service-mini-tile.is-touched .service-mini-icon .ic-flip-inner{transform:rotateY(180deg);}

  /* testimonial-card */
  .testimonial-card.is-touched{
    transform:scale(1.035);opacity:1;background:var(--navy);border-color:transparent;box-shadow:var(--shadow-md);
  }
  .testimonial-card.is-touched .quote{color:var(--white);}
  .testimonial-card.is-touched .who strong{color:var(--white);}
  .testimonial-card.is-touched .ic{transform:scale(1.4);}
  .testimonial-card.is-touched .ic-flip-inner{transform:rotateY(180deg);}

  /* spotlight-tile (Candidate Spotlights zoom hint) */
  .spotlight-tile.is-touched .frame::after{opacity:1;}
  .spotlight-tile.is-touched .zoom-hint{opacity:1;transform:translate(-50%,-50%) scale(1);}

  /* value-item.icon-feature-cyan (Our Values) */
  .value-item.icon-feature-cyan.is-touched .ic{background:transparent;}
  .value-item.icon-feature-cyan.is-touched .ic .ic-white{opacity:0;transform:translate(-50%,-50%) scale(1.4);}
  .value-item.icon-feature-cyan.is-touched .ic .ic-cyan{opacity:1;transform:translate(-50%,-50%) scale(1.2);}

  /* value-item.icon-pop */
  .value-item.icon-pop.is-touched .ic{background:transparent;transform:scale(1.3);}
  .value-item.icon-pop.is-touched .ic-flip-inner{transform:rotateY(180deg);}
  .value-item.icon-pop.is-touched h4{transform:scale(1.12);}

  /* .expect-grow / .expect-grow-lg modifiers (Job Seeker hub + Founder page) */
  .expect-grow .value-item.is-touched .ic{transform:scale(1.35);}
  .expect-grow .value-item.is-touched h4{transform:scale(1.14);}
  .expect-grow-lg .value-item.is-touched .ic{transform:scale(1.65);}

  /* value-pop-item (Our Values page) */
  .value-pop-item.is-touched{transform:scale(1.6);z-index:5;border-color:transparent;}
  .value-pop-item.is-touched .pop-icon-grow{transform:translateY(-50%) scale(1);}
  .value-pop-item.is-touched .pop-icon{opacity:1;transform:rotateY(0deg);}

  /* recruit-pop-item (What We Recruit landing) */
  .recruit-pop-item.is-touched{transform:scale(1.3);z-index:5;}
  .recruit-pop-item.is-touched .recruit-pop-icon{transform:scale(1.7);}
  .recruit-pop-item.is-touched .recruit-pop-word{transform:scale(1.15);}
  .recruit-pop-item.is-touched .ic-flip-inner{transform:rotateY(180deg);}

  /* value-row (horizontal list rows) */
  .value-row.is-touched{transform:scale(1.18);background:var(--navy);border-color:transparent;}
  .value-row.is-touched h4{color:var(--white);}
  .value-row.is-touched p{color:rgba(255,255,255,.85);}
  .value-row.is-touched p .value-lead{color:var(--white);}
  .value-row.is-touched .ic-flip{transform:rotateY(180deg);}
  .value-row.is-touched .ic{transform:translateX(46px);}
  .value-row.is-touched .ic ~ div{transform:translateX(46px);}

  /* process-row */
  .process-row.is-touched{transform:scale(1.18);background:var(--navy);border-color:transparent;}
  .process-row.is-touched h3{color:var(--white);}
  .process-row.is-touched p{color:rgba(255,255,255,.85);}
  .process-row.is-touched .process-num-flip{transform:rotateY(180deg);}

  /* logo-feature (affiliate network logos) */
  .logo-feature.is-touched img{transform:scale(1.65);}

  /* pill (filter/category chips) */
  .pill.is-touched{
    background:var(--white);border-color:transparent;z-index:5;
    box-shadow:var(--shadow-lg), 0 0 70px rgba(0,149,201,.55);
  }
  .pill.is-touched .ic{background:var(--cyan-100);}
  .pill.is-touched .ic .ic-white{opacity:0;}
  .pill.is-touched .ic .ic-colour{opacity:1;}
  .pill.is-touched span{color:var(--cyan);}
  .pill.pill-light.is-touched{
    background:var(--navy);border-color:transparent;z-index:5;
    box-shadow:var(--shadow-lg), 0 0 70px rgba(1,10,110,.4);
  }
  .pill.pill-light.is-touched .ic{background:rgba(255,255,255,.14);}
  .pill.pill-light.is-touched .ic .ic-colour{opacity:0;}
  .pill.pill-light.is-touched .ic .ic-white{opacity:1;}
  .pill.pill-light.is-touched span{color:var(--white);}
  .pill-list .pill.is-touched{transform:scale(1.28) translateY(-12px);opacity:1;}

  /* discover-tile (real <a> links -- Job Seeker/Employer hub CTAs) */
  .discover-tile.is-touched{
    transform:scale(1.06);opacity:1;background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 55px rgba(0,149,201,.6), 0 0 100px rgba(0,149,201,.3);
  }
  .discover-tile.is-touched .ic{transform:scale(1.5);}
  .discover-tile.is-touched .card-link{transform:scale(1.2);}
  .discover-tile.is-touched .card-link svg{transform:translateX(5px) scale(1.2);}

  /* affiliate-card */
  .affiliate-card.is-touched{
    transform:translateY(-6px) scale(1.06);opacity:1;
    background:var(--cyan);border-color:transparent;
    box-shadow:var(--shadow-lg), 0 0 40px rgba(0,149,201,.45);
  }
  .affiliate-card.is-touched .logo-box .logo-colour{opacity:0;}
  .affiliate-card.is-touched .logo-box .logo-white{opacity:1;}
  .affiliate-card.is-touched .logo-box img{transform:translateY(-50%) scale(1.08);}
  .affiliate-card.is-touched p{color:rgba(255,255,255,.92);}
  .affiliate-card.is-touched strong{color:var(--white);}
  .affiliate-card.is-touched .card-link{color:var(--white);transform:translateX(-10px) scale(1.12);}
  .affiliate-card.is-touched .card-link svg{transform:translateX(4px);}

  /* cap-item ("what to expect" checklist ticks) */
  .cap-item.is-touched span{color:var(--cyan);font-weight:700;}
  .cap-item.is-touched .cap-icon-tick{opacity:0;transform:translateX(4px);}
  .cap-item.is-touched .cap-icon-arrow{opacity:1;transform:translateX(0);}

  /* related-reading-card (real <a> links -- Insights article footer) */
  .related-reading-card.is-touched{transform:translateY(-4px);box-shadow:var(--shadow-md);}

  /* assess-item (Founder page "what to expect from Liam") */
  .assess-item.is-touched .ic{background:transparent;transform:scale(1.35);}
  .assess-item.is-touched .ic .ic-white{opacity:0;transform:translate(-50%,-50%) scale(1.4);}
  .assess-item.is-touched .ic .ic-navy{opacity:1;transform:translate(-50%,-50%) scale(1.2);}
  .assess-item.is-touched h4{transform:scale(1.14);}
}