/* Shared by every page except /contact, which carries its own sheet.
   Pages link this AFTER their own <style> block: the page-specific rules sat
   near the top of the original GHL sheet, so loading them first keeps the
   cascade the design was signed off with (e.g. the mobile a.ti-opt padding
   below must beat the homepage modal's desktop padding). */
/* Base rules the design inherited from GHL's own stylesheet. */
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; }
.ti-page { box-sizing: border-box; }
button { font-family: inherit; font-size: 100%; }
img { vertical-align: middle; }
  .ti-page * { box-sizing: border-box; }
  .ti-page {
    --ink: #232329;
    --ink-soft: #45454e;
    --paper: #f6f5f2;
    --line: #d9d7d1;
    --purple: #6b2c9b;
    --teal: #297674;
    --orange: #fe8519;
    margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; background: var(--paper); color: var(--ink);
  }
  .ti-page a { color: var(--purple); text-decoration: none; }
  .ti-page a:hover { color: #501f75; }
  .ti-page .display { font-family: 'Oswald', 'IBM Plex Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }
  .ti-page .grid-wrap { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; }
  @media (max-width: 900px) {
    .ti-page .grid-wrap { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .ti-page .grid-wrap > [style*="grid-column"] { grid-column: span 4 !important; }
  }
  /* --- below 900px: keep everything inside the viewport ------------------ */
  @media (max-width: 900px) {
    /* nav: the link row and the CTA are single nowrap flex rows on the 1440
       canvas, so they ran off the side of a phone. Let them wrap instead. */
    .ti-page .grid-wrap > div { min-width: 0; }
    .ti-page .grid-wrap > div[style*="justify-content:center"],
    .ti-page .grid-wrap > div[style*="justify-content:flex-end"] {
      justify-content: flex-start !important;
      flex-wrap: wrap;
      row-gap: 10px;
    }
    /* hero: a fixed 720px letterbox with overflow:hidden, so the taller mobile
       copy was being cut off at the top. Let it grow to fit its own text. */
    .ti-page div[style*="height:720px"] { height: auto !important; min-height: 460px; }
    .ti-page div[style*="z-index:2"] { padding-top: 150px !important; max-width: none !important; }
    /* the resized photo rows stack, and the frame stops being a fixed square */
    .ti-page .ti-act {
      grid-template-columns: 1fr !important;
      justify-content: start !important;
      gap: 24px !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
    .ti-page .ti-frame {
      width: 100% !important;
      max-width: 300px;
      height: auto !important;
      aspect-ratio: 1;
    }
    /* candidate cards: avatar + text is a flex row whose text half would not
       shrink below its content, so it pushed past the screen edge */
    .ti-page .card > div { flex-wrap: wrap; }
    .ti-page .card > div > div { min-width: 0; }
    .ti-page .ti-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ti-page .ti-strip img { width: 100% !important; }
    /* nothing may exceed the screen */
    .ti-page img { max-width: 100%; }
    .ti-page { overflow-x: clip; }  /* clip, not hidden: hidden would make this
       element the scroll container and kill the sticky header */
  }

  /* --- below 900px: nav collapses behind a menu button -------------------- */
  .ti-page .ti-burger { display: none; }
  .ti-page .ti-menu { display: none; }
  @media (max-width: 900px) {
    .ti-page .ti-nav .grid-wrap { position: relative; padding: 12px 20px !important; }
    .ti-page .ti-nav .grid-wrap > div:first-child { grid-column: span 12 !important; }
    .ti-page .ti-nav .grid-wrap > div:not(:first-child) { display: none !important; }
    .ti-page .ti-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px;
      position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      width: 44px; height: 40px; padding: 0 9px; background: transparent; border: 0; cursor: pointer; }
    .ti-page .ti-burger span { display: block; height: 2px; background: var(--ink);
      transition: transform 160ms ease, opacity 120ms ease; }
    .ti-page .ti-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .ti-page .ti-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .ti-page .ti-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .ti-page .ti-menu[data-open="true"] { display: block; background: var(--paper);
      border-top: 1px solid var(--line); max-height: calc(100vh - 74px); overflow-y: auto; }
    .ti-page .ti-menu a { display: block; padding: 14px 20px; font-size: 15px; font-weight: 500;
      color: var(--ink); border-bottom: 1px solid var(--line); }
    .ti-page .ti-menu a:hover { background: #edeae4; }
    .ti-page .ti-menu a.ti-menu__cta { background: var(--ink); color: var(--paper);
      font-weight: 600; border-bottom: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ti-page .ti-burger span { transition: none; }
  }

  /* --- film grain on the seven low-resolution photos ---------------------- */
  /* Layered over the resize fix, not instead of it. Sits under the act
     gradient and label so the type on top stays clean. */
  .ti-page .ti-grain { position: relative; }
  .ti-page .ti-grain-ov { position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxODAnIGhlaWdodD0nMTgwJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9JzAuNTUnLz48L3N2Zz4="); background-size: 180px 180px;
    mix-blend-mode: overlay; opacity: 0.42; }

  /* --- scroll reveal ------------------------------------------------------ */
  /* .ti-anim is added by the script below, so if the script never runs the
     page renders normally instead of staying invisible. */
  .ti-page.ti-anim .ti-reveal { opacity: 0; transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease; }
  .ti-page.ti-anim .ti-reveal.ti-reveal-in { opacity: 1; transform: none; }

  /* --- interaction polish -------------------------------------------------- */
  .ti-page a, .ti-page button { transition: transform .25s ease, opacity .25s ease,
    box-shadow .25s ease, background-color .25s ease, color .25s ease; }
  /* the lift is for things that read as buttons. Inline links inside body copy
     are left alone: bouncing a word mid-sentence is not the effect we want. */
  @media (hover: hover) and (pointer: fine) {
    .ti-page .ti-nav a:hover,
    .ti-page a[style*="display:inline-block"]:hover,
    .ti-page a.ti-opt:hover,
    .ti-page a.ti-menu__cta:hover { transform: translateY(-2px); }
  }
  .ti-page button:active,
  .ti-page a[style*="display:inline-block"]:active,
  .ti-page a.ti-opt:active,
  .ti-page a.ti-menu__cta:active { transform: translateY(0) scale(.98); }

  @media (prefers-reduced-motion: reduce) {
    .ti-page.ti-anim .ti-reveal { opacity: 1 !important; transform: none !important;
      transition: none !important; }
    .ti-page a, .ti-page button { transition: none !important; }
  }

  /* --- phone tightening ---------------------------------------------------- */
  @media (max-width: 640px) {
    .ti-page.ti-anim .ti-reveal { transform: translateY(12px);
      transition: opacity .45s ease, transform .45s ease; }
    /* the canvas was drawn at 1440 with 56px side padding. Every inline 56px in
       these fragments is horizontal padding (checked, all 20 of them), so this
       trades it for 20px on phones and leaves desktop untouched. */
    .ti-page [style*="56px"] { padding-left: 20px !important; padding-right: 20px !important; }
    /* comfortable tap targets. min-height only: changing display here would
       collapse the burger bars and re-flow the modal options. */
    .ti-page a.ti-opt, .ti-page a.ti-menu__cta { min-height: 44px; }
    .ti-page .ti-burger { height: 44px; }
    .ti-page .ti-modal__close { width: 44px; height: 44px; }
    .ti-page .ti-modal__card { max-width: 92vw; max-height: 88vh; overflow-y: auto; }
  }

  /* === phone layout pass, September 12 ==================================== */
  @media (max-width: 700px) {
    /* --- nested grids collapse. Everything inline in these fragments keeps a
       desktop column count otherwise, which is what was shredding the card
       text into one word, or one letter, per line. --- */
    .ti-page [style*="grid-template-columns:repeat("] { grid-template-columns: 1fr !important; }
    .ti-page [style*="grid-template-columns: repeat("] { grid-template-columns: 1fr !important; }
    /* the two that genuinely want more than one column on a phone */
    .ti-page .ti-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .ti-page .ti-dob { grid-template-columns: 1fr 1fr 1.35fr !important; }
    /* a candidate card is full width now, so the avatar and the text can sit
       side by side again instead of stacking into a narrow column */
    .ti-page .card > div { flex-wrap: nowrap !important; }
    .ti-page .card { padding: 22px !important; }
    /* stacked 12-col columns had no gap between them, so a CTA could end up
       welded to the panel underneath it */
    .ti-page .grid-wrap { row-gap: 28px; }

  /* type scale: the canvas sizes are for a 1440 artboard, trimmed for a phone */
  .ti-page [style*="font-size:64px"] { font-size: 36px !important; }
  .ti-page [style*="font-size:60px"] { font-size: 34px !important; }
  .ti-page [style*="font-size:44px"] { font-size: 30px !important; }
  .ti-page [style*="font-size:42px"] { font-size: 29px !important; }
  .ti-page [style*="font-size:40px"] { font-size: 28px !important; }
  .ti-page [style*="font-size:38px"] { font-size: 27px !important; }
  .ti-page [style*="font-size:36px"] { font-size: 26px !important; }
  .ti-page [style*="font-size:34px"] { font-size: 25px !important; }
  .ti-page [style*="font-size:30px"] { font-size: 23px !important; }
  .ti-page [style*="font-size:28px"] { font-size: 22px !important; }
  .ti-page [style*="font-size:27px"] { font-size: 22px !important; }
  .ti-page [style*="font-size:26px"] { font-size: 21px !important; }
  .ti-page [style*="font-size:24px"] { font-size: 20px !important; }
  .ti-page [style*="font-size:22px"] { font-size: 17px !important; }
  .ti-page [style*="font-size:21px"] { font-size: 17px !important; }
  .ti-page [style*="font-size:19px"] { font-size: 16.5px !important; }
  .ti-page [style*="font-size:17px"] { font-size: 16px !important; }
  .ti-page [style*="font-size:16.5px"] { font-size: 15.5px !important; }

    /* long all-caps eyebrows lose their wide tracking, which is what was
       pushing them onto three lines */
    .ti-page [style*="letter-spacing:0.14em"],
    .ti-page [style*="letter-spacing:0.12em"] { letter-spacing: 0.06em !important; }

    /* hero: shorter headline means it no longer needs a 150px top pad */
    .ti-page div[style*="z-index:2"] { padding-top: 92px !important; padding-bottom: 34px !important; }
    .ti-page div[style*="height:720px"] { min-height: 0 !important; }
    /* the two hero buttons were shoulder to shoulder, with the text one
       wrapping into its own underline. Stack them. */
    .ti-page div[style*="z-index:2"] div[style*="display:flex"][style*="gap:14px"] {
      flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

    /* section rhythm: 64px of vertical padding on a phone is a lot of scrolling */
    .ti-page [style*="padding:64px 56px"],
    .ti-page [style*="padding:60px 56px"],
    .ti-page [style*="padding:56px 56px"] { padding-top: 40px !important; padding-bottom: 40px !important; }

    /* the act rows: photo and copy read better with less air between them */
    .ti-page .ti-act { gap: 18px !important; padding-top: 26px !important; padding-bottom: 26px !important; }

    /* menu rows deserve a real touch height */
    .ti-page .ti-menu a { min-height: 50px; display: flex; align-items: center; }

    /* --- the welcome modal was a full screen wall on a phone --- */
    .ti-page .ti-modal { padding: 14px; align-items: flex-end; }
    .ti-page .ti-modal__card { max-height: 76vh; overflow-y: auto; }
    .ti-page .ti-modal__body { padding: 22px 18px 18px; }
    .ti-page .ti-modal__body h2 { font-size: 21px !important; }
    .ti-page a.ti-opt { padding: 13px 15px; }
    .ti-page .ti-opt__label { font-size: 15px; }
    .ti-page .ti-opt__note { font-size: 12.5px; }
    .ti-page .ti-modal__close { top: 6px; right: 6px; }
    .ti-page .ti-modal__card:focus { outline: none; }
  }

  @media (max-width: 380px) {
  /* type scale: the canvas sizes are for a 1440 artboard, trimmed again for a small phone */
  .ti-page [style*="font-size:64px"] { font-size: 30px !important; }
  .ti-page [style*="font-size:60px"] { font-size: 28px !important; }
  .ti-page [style*="font-size:44px"] { font-size: 26px !important; }
  .ti-page [style*="font-size:42px"] { font-size: 25px !important; }
  .ti-page [style*="font-size:40px"] { font-size: 24px !important; }
  .ti-page [style*="font-size:38px"] { font-size: 24px !important; }
  .ti-page [style*="font-size:36px"] { font-size: 23px !important; }
  .ti-page [style*="font-size:34px"] { font-size: 22px !important; }
  .ti-page [style*="font-size:30px"] { font-size: 21px !important; }
  .ti-page [style*="font-size:28px"] { font-size: 20px !important; }
  .ti-page [style*="font-size:27px"] { font-size: 20px !important; }
  .ti-page [style*="font-size:26px"] { font-size: 19px !important; }
  .ti-page [style*="font-size:24px"] { font-size: 18px !important; }
  .ti-page [style*="font-size:22px"] { font-size: 16.5px !important; }
  .ti-page [style*="font-size:21px"] { font-size: 16.5px !important; }
  .ti-page [style*="font-size:19px"] { font-size: 16px !important; }
  .ti-page [style*="font-size:17px"] { font-size: 15.5px !important; }
  .ti-page [style*="font-size:16.5px"] { font-size: 15px !important; }
    /* the contact sheet stays 2-up even here: at 320 that is ~140px a tile,
       which is under the photos' native 206px, so they sharpen rather than
       blur. One per row would upscale them again. */
    .ti-page .ti-dob { grid-template-columns: 1fr 1fr 1.3fr !important; }
  }

  /* --- SME Connect watermark ---------------------------------------------- */
  .ti-page .ti-madeby { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
  .ti-page a.ti-madeby__link { display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; color: var(--ink-soft); opacity: 0.75; }
  .ti-page a.ti-madeby__link:hover { opacity: 1; color: var(--ink); }
  .ti-page .ti-madeby img { width: 18px; height: 18px; display: block; flex-shrink: 0; }

  /* Seven links do not fit the row below about 1000px at a readable size
     (measured: 950px left it 11px short), so the burger takes over from 1000
     instead of 900, and 1001 to 1150 gets slightly tighter links. */
  @media (max-width: 1150px) and (min-width: 1001px) {
    .ti-page .ti-nav .grid-wrap > div:nth-child(2) { gap: 9px !important; font-size: 11.5px !important; }
  }
  @media (max-width: 1000px) and (min-width: 901px) {
    .ti-page .ti-nav .grid-wrap { position: relative; }
    .ti-page .ti-nav .grid-wrap > div:first-child { grid-column: span 12 !important; }
    .ti-page .ti-nav .grid-wrap > div:not(:first-child) { display: none !important; }
    .ti-page .ti-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px;
      position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      width: 44px; height: 40px; padding: 0 9px; background: transparent; border: 0; cursor: pointer; }
    .ti-page .ti-burger span { display: block; height: 2px; background: var(--ink);
      transition: transform 160ms ease, opacity 120ms ease; }
    .ti-page .ti-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .ti-page .ti-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .ti-page .ti-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .ti-page .ti-menu[data-open="true"] { display: block; background: var(--paper);
      border-top: 1px solid var(--line); max-height: calc(100vh - 74px); overflow-y: auto; }
    .ti-page .ti-menu a { display: block; padding: 14px 20px; font-size: 15px; font-weight: 500;
      color: var(--ink); border-bottom: 1px solid var(--line); }
    .ti-page .ti-menu a:hover { background: #edeae4; }
    .ti-page .ti-menu a.ti-menu__cta { background: var(--ink); color: var(--paper);
      font-weight: 600; border-bottom: 0; }
  }
  @media (max-width: 640px) {
    .ti-page .ti-madeby { margin-top: 18px; }
  }

  /* --- WhatsApp Channel strip, above the nav on every page ----------------- */
  /* Ink fill, white type (15.9:1). Not teal: it ran into the ribbon above it.
     The green is WhatsApp's own, on the icon only, never on text. */
  .ti-page a.ti-wa { display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 44px; padding: 8px 20px; background: var(--ink); color: white;
    font-size: 14px; font-weight: 500; line-height: 1.3; text-align: center; }
  .ti-page a.ti-wa:hover { background: #3a3a44; color: white; }
  .ti-page a.ti-wa:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
  .ti-page .ti-wa__icon { flex-shrink: 0; color: #25d366; }
  .ti-page .ti-wa__cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 520px) { .ti-page .ti-wa__lead { display: none; } }