/* ==========================================================================
   Tickethaul for Business: shared stylesheet
   Loaded by every page. Page-specific section styles stay in each page.
   ========================================================================== */

/* ---------- Self-hosted fonts ----------
   Served from this domain. No request is made to Google Fonts, so no
   visitor IP address is disclosed to a third party on page load. This is
   what the cookie policy states. Licence: SIL OFL 1.1, see fonts/OFL.txt.
   latin-ext downloads only when a page actually uses a character from it. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/barlow-condensed-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/barlow-condensed-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/barlow-condensed-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/barlow-condensed-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url(fonts/barlow-condensed-800-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url(fonts/barlow-condensed-800-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/archivo-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/archivo-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --black:#000000;
  --yellow:#FFC917;
  --white:#FFFFFF;
  --grey:#6b6b6b;
  --light-grey:#f4f4f4;
  --border:#e4e4e4;
  --max:1240px;
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  color:var(--black);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  font-weight:800;
  line-height:0.95;
  letter-spacing:0px;
  overflow-wrap:break-word;   /* a long word must not force a sideways scroll */
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:15px;
  padding:15px 30px;
  border-radius:40px;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .15s ease,background .2s ease,color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-yellow{background:var(--yellow);color:var(--black)}
.btn-yellow:hover{background:#ffd543}
.btn-outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-outline-white:hover{background:var(--white);color:var(--black)}
.btn-black{background:var(--black);color:var(--white)}
.btn-black:hover{background:#1a1a1a}

/* ---------- Focus and skip link (WCAG 2.4.7, 2.4.1) ---------- */
:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
  border-radius:2px;
}
/* A yellow ring on a yellow button is invisible, so invert it there. */
.btn-yellow:focus-visible,
.cta-circle a:focus-visible,
.footer-social a:focus-visible{outline-color:var(--black)}
/* ...and on black surfaces the yellow ring is the visible one. */
.nav a:focus-visible,
.nav button:focus-visible,
.footer a:focus-visible{outline-color:var(--yellow)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--yellow);color:var(--black);
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;
  padding:14px 22px;border-radius:0 0 4px 0;
}
.skip-link:focus{left:0}
/* <main> takes tabindex="-1" so the skip link moves focus, not just scroll.
   It is a scripted focus target, so it should not draw a ring. */
main:focus{outline:none}

/* ---------- Links ---------- */
.discover-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:16px;
  color:var(--black);
  border-bottom:2px solid var(--yellow);
  padding-bottom:4px;
  transition:gap .2s ease;
}
.discover-link:hover{gap:16px}
.discover-link svg{width:18px;height:18px}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--black);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:104px;
}
.nav-logo img{height:72px;width:auto}
.nav-links{
  display:flex;
  gap:38px;
  list-style:none;
}
.nav-links a{
  color:var(--white);
  font-size:15px;
  font-weight:500;
  letter-spacing:.2px;
  transition:color .2s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--yellow)}
.nav-item{position:relative}
.nav-item>a{display:inline-flex;align-items:center;gap:6px}
.nav-caret{width:11px;height:11px;transition:transform .25s ease}
@media(min-width:1001px){
  .nav-item:hover .nav-caret{transform:rotate(180deg)}
}

/* Mega menu */
.mega{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  transform:translateX(-50%) translateY(10px);
  width:720px;
  background:var(--white);
  border-radius:16px;
  padding:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,transform .2s ease;
  z-index:200;
}
/* focus-within opens the panel for keyboard users. Without it the whole
   Solutions menu is unreachable without a mouse.
   Confined to desktop widths on purpose: it carries translateX(-50%), and being
   two classes deep it outranks the single-class mobile reset. On a phone, tapping
   Solutions focuses the link, :focus-within matched, and the panel was dragged
   half its width off the left of the screen. */
@media(min-width:1001px){
  .nav-item:hover .mega,
  .nav-item:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
}
.mega::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.mega-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.mega-link{
  display:flex;
  gap:14px;
  padding:14px;
  border-radius:12px;
  transition:background .18s ease;
}
.mega-link:hover{background:var(--light-grey)}
.mega-ico{
  flex:0 0 auto;
  width:40px;height:40px;
  border-radius:10px;
  background:var(--black);
  color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
}
.mega-ico svg{width:20px;height:20px}
.mega-link h4{font-size:19px;letter-spacing:.4px;color:var(--black);margin-bottom:2px}
.mega-link p{font-size:12.5px;color:var(--grey);line-height:1.45;text-transform:none;font-family:'Inter',sans-serif}
.mega-tag{
  display:inline-block;
  font-size:10px;font-weight:700;letter-spacing:.5px;
  background:var(--yellow);color:var(--black);
  padding:1px 7px;border-radius:20px;margin-left:6px;vertical-align:middle;
  text-transform:uppercase;
}
.mega-foot{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.mega-foot span{font-size:14px;color:var(--grey)}
/* The mega panel is white, but `.nav-links a` sets white text for the black bar
   above it. Without this the footer link is white on white. */
.mega .discover-link{color:var(--black)}
.mega .discover-link:hover{color:var(--black)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  /* The bars are only 26x16. The button itself has to be big enough to hit,
     which WCAG 2.2 AA puts at 24x24 minimum (2.5.8). 44 is the comfortable size. */
  width:44px;
  height:44px;
  margin-right:-10px;   /* keep the bars optically aligned with the edge */
  padding:0;
}
.nav-toggle span{width:26px;height:2px;background:var(--white);display:block}

/* ---------- Article cards (Insights grid + related) ---------- */
.insights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.article{
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
  background:var(--white);
}
.article:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.12)}
.article-img{aspect-ratio:16/10;overflow:hidden;background:var(--light-grey)}
.article-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.article:hover .article-img img{transform:scale(1.05)}
.article-body{padding:24px;display:flex;flex-direction:column;flex:1}
.article-cat{
  font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--black);background:var(--yellow);
  align-self:flex-start;padding:4px 12px;border-radius:20px;margin-bottom:16px;
}
.article-body h3{font-size:32px;line-height:0.98;margin-bottom:10px;letter-spacing:0px}
.article-body p{font-size:14.5px;color:var(--grey);margin-bottom:20px;flex:1}
.article-read{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14px;color:var(--black);
  min-height:24px;                 /* WCAG 2.2 AA 2.5.8, target size */
}
.article-read svg{width:16px;height:16px;transition:transform .2s ease}
.article:hover .article-read svg{transform:translateX(4px)}
.hidden{display:none}

/* ---------- Article reading page ---------- */
.art-hero{background:var(--black);color:var(--white);padding:70px 0 60px}
.art-hero .wrap{max-width:820px}
.art-back{
  display:inline-flex;align-items:center;gap:8px;
  color:#bdbdbd;font-size:14px;font-weight:500;margin-bottom:30px;
  min-height:24px;                 /* WCAG 2.2 AA 2.5.8, target size */
  transition:color .2s ease;
}
.art-back:hover{color:var(--yellow)}
.art-back svg{width:16px;height:16px}
.art-cat{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--black);background:var(--yellow);
  padding:4px 12px;border-radius:20px;margin-bottom:20px;
}
.art-hero h1{font-size:66px;margin-bottom:22px}
.art-meta{display:flex;gap:18px;align-items:center;color:#9a9a9a;font-size:14px}
.art-meta span{display:inline-flex;align-items:center;gap:7px}
.art-meta svg{width:15px;height:15px}
.art-feature{background:var(--light-grey)}
.art-feature .wrap{max-width:960px;padding-top:48px}
.art-feature img{width:100%;border-radius:18px}
.art-body-wrap{padding:60px 0 80px}
.art-body-wrap .wrap{max-width:760px}
.art-lead{font-size:22px;line-height:1.5;color:#222;margin-bottom:32px;font-weight:500}
.art-body h2{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  font-size:40px;letter-spacing:0px;margin:42px 0 16px;
}
.art-body h3{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  font-size:28px;letter-spacing:0px;margin:32px 0 12px;
}
.art-body p{font-size:17.5px;color:#333;margin-bottom:22px;line-height:1.7}
.art-body ul{list-style:none;margin:0 0 24px;display:flex;flex-direction:column;gap:14px}
.art-body ul li{position:relative;padding-left:34px;font-size:17px;color:#333}
.art-body ul li::before{
  content:"";position:absolute;left:0;top:8px;width:18px;height:18px;
  border-radius:50%;background:var(--yellow);
}
.art-body ul li::after{
  content:"";position:absolute;left:6px;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--black);
}
.art-body blockquote{
  border-left:4px solid var(--yellow);
  padding:6px 0 6px 26px;margin:32px 0;
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:700;
  font-size:30px;line-height:1.05;letter-spacing:0px;color:var(--black);
}
.art-cta-box{
  background:var(--black);color:var(--white);
  border-radius:20px;padding:44px 40px;margin-top:50px;
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;
}
.art-cta-box h3{font-size:32px;margin-bottom:6px}
.art-cta-box p{color:#cfcfcf;font-size:16px;max-width:420px}
.art-related{border-top:1px solid var(--border);padding:70px 0 100px}
.art-related h2{font-size:52px;margin-bottom:36px}

/* ---------- Footer ---------- */
.footer{
  background:#0a0a0a;
  color:#9a9a9a;
  padding:56px 0 34px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-top img{height:26px}
.footer-nav{display:flex;gap:28px;list-style:none;flex-wrap:wrap}
.footer-nav a{font-size:14px;color:#c4c4c4}
.footer-nav a:hover{color:var(--yellow)}
.footer-bottom{
  padding-top:26px;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

/* ---------- Shared responsive (nav, cards, article page) ---------- */
@media(max-width:768px){
  .nav-logo img{height:40px}
  .nav-inner{height:74px}
  .nav-links{
    display:none;
    position:absolute;
    top:74px;
    left:0;
    right:0;
    background:var(--black);
    flex-direction:column;
    gap:0;
    padding:12px 24px 24px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav-links.open{display:flex}
  .nav-links li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-toggle{display:flex}
  .nav-cta .btn{display:none}
  /* The caret is the only cue that Solutions expands, so it belongs on mobile
     more than on desktop, where hovering reveals the panel anyway. */
  .nav-item > a{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;gap:12px;
  }
  .nav-caret{display:block;width:14px;height:14px;flex:0 0 auto;color:var(--yellow)}
  .nav-item.open-sub > a .nav-caret{transform:rotate(180deg)}
  .nav-item.open-sub > a{color:var(--yellow)}
  .nav-item .mega,
  .nav-item:hover .mega,
  .nav-item:focus-within .mega{
    position:static;transform:none;width:100%;left:auto;right:auto;
    opacity:1;visibility:visible;box-shadow:none;
    background:transparent;padding:12px 0 0;
    display:none;
  }
  .nav-item.open-sub .mega,
  .nav-item.open-sub:hover .mega,
  .nav-item.open-sub:focus-within .mega{display:block}
  .mega-grid{grid-template-columns:minmax(0,1fr);gap:2px}
  .mega-link{padding:12px 0}
  .mega-link h4{color:var(--white)}
  .mega-foot{display:none}

  .insights-grid{grid-template-columns:minmax(0,1fr);gap:22px}

  .art-hero{padding:48px 0 44px}
  .art-hero h1{font-size:46px}
  .art-lead{font-size:19px}
  .art-body h2{font-size:32px}
  .art-cta-box{padding:32px 28px}
  .art-cta-box h3{font-size:30px}
  .art-related{padding:54px 0 64px}
  .art-related h2{font-size:38px}

  .footer-top{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   Motion system (site-wide)
   ========================================================================== */

/* Nav gains depth once scrolled */
.nav{transition:box-shadow .3s ease,height .3s ease}
.nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.30)}

/* Scroll reveals */
html.reveal-on .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
html.reveal-on .reveal.in{opacity:1;transform:none}

/* Hero entrance */
@keyframes heroRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-copy,.sol-hero .wrap>div:first-child,.phero .wrap{animation:heroRise .8s cubic-bezier(.22,.61,.36,1) both}
.hero-media,.sol-hero-media{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .15s both}

/* Device float */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-media img,.sol-hero-media img{animation:floaty 6s ease-in-out 1.1s infinite}

/* Glow pulse */
@keyframes blobPulse{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.hero-blob{animation:blobPulse 5s ease-in-out infinite}
@keyframes blobPulseC{0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
.sol-glow{animation:blobPulseC 5s ease-in-out infinite}

/* Yellow button sheen */
.btn-yellow{position:relative;overflow:hidden}
.btn-yellow::after{
  content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);opacity:0;pointer-events:none;
}
.btn-yellow:hover::after{animation:sheen .75s ease}
@keyframes sheen{0%{left:-75%;opacity:1}100%{left:130%;opacity:1}}

/* Feature-row media lift on hover */
.sol-row-media{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}
.sol-row-media:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.13)}

@media (prefers-reduced-motion: reduce){
  html.reveal-on .reveal{opacity:1;transform:none;transition:none}
  .hero-copy,.sol-hero .wrap>div:first-child,.phero .wrap,
  .hero-media,.sol-hero-media,.hero-media img,.sol-hero-media img,
  .hero-blob,.sol-glow{animation:none}
  .btn-yellow:hover::after{animation:none}
  .sol-row-media:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Get Started / form
   ========================================================================== */
.gs{padding:80px 0 100px}
.gs-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:start}
.gs-form h2{font-size:44px;margin-bottom:10px}
.gs-form .gs-sub{font-size:17px;color:var(--grey);margin-bottom:34px}

.field{margin-bottom:22px}
.field label{display:block;font-size:13px;font-weight:600;letter-spacing:.4px;margin-bottom:8px;color:#333}
.field .req{color:#c0392b}
.field input,.field select,.field textarea{
  width:100%;padding:15px 16px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--white);
  font-family:'Inter',sans-serif;font-size:15.5px;color:var(--black);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,201,23,.22);
}
.field input::placeholder,.field textarea::placeholder{color:#a0a0a0}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.field-err{display:none;color:#c0392b;font-size:13px;font-weight:500;margin-top:6px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0392b}
.field.invalid .field-err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.gs-submit{margin-top:8px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gs-legal{font-size:12.5px;color:var(--grey);margin-top:18px;line-height:1.5}
.gs-legal-inline{font-size:12.5px;color:var(--grey);margin:0;line-height:1.5}
.gs-legal a{color:#4a4a4a;text-decoration:underline;text-underline-offset:2px}
.gs-legal a:hover{color:var(--black)}

/* Marketing consent. Unticked by default: consent has to be a positive act.
   Specificity has to beat `.field label` above, hence label.gs-check. */
.field label.gs-check{display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  font-size:13.5px;font-weight:400;letter-spacing:0;color:#4a4a4a;line-height:1.55;
  margin-bottom:0;padding:16px 18px;background:var(--light-grey);
  border:1px solid var(--border);border-radius:4px}
.field label.gs-check input[type=checkbox]{flex:0 0 auto;width:24px;height:24px;
  margin:0;accent-color:var(--black);cursor:pointer}
.field label.gs-check:hover{border-color:#c9c9c9}
.field label.gs-check:focus-within{border-color:var(--black);
  box-shadow:0 0 0 3px rgba(255,201,23,.45)}
/* The WhatsApp toggle sits between two fields, so it stays quieter than the
   marketing consent box at the end of the form. */
.field label.gs-check--plain{background:none;border-color:transparent;padding:4px 0}
.field label.gs-check--plain:hover{border-color:transparent}
.field label.gs-check--plain:focus-within{border-color:transparent;box-shadow:none}
.field label.gs-check--plain:focus-within span{text-decoration:underline}

/* Phone number: dialling code and national number sit on one line. */
.tel-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px}
.tel-row select{min-width:0}
.field .opt{font-size:12px;font-weight:500;color:var(--grey);
  text-transform:none;letter-spacing:0}
.gs-hint{font-size:12.5px;color:var(--grey);margin-top:7px;line-height:1.5}
@media(max-width:560px){
  .tel-row{grid-template-columns:minmax(0,1fr);gap:10px}
}
.gs-status{display:none;font-size:14px;font-weight:600;margin-top:16px}
.gs-status.err{display:block;color:#c0392b}

.gs-done{display:none;text-align:center;padding:48px 32px;border:1.5px solid var(--border);border-radius:20px}
.gs-done.show{display:block}
.gs-done-ico{
  width:70px;height:70px;border-radius:50%;background:var(--yellow);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
}
.gs-done-ico svg{width:34px;height:34px}
.gs-done h2{font-size:44px;margin-bottom:12px}
.gs-done p{font-size:17px;color:var(--grey);max-width:420px;margin:0 auto}

/* Sidebar */
.gs-side{background:var(--light-grey);border-radius:20px;padding:36px 32px;position:sticky;top:124px}
.gs-side h3{font-size:30px;margin-bottom:22px}
.gs-steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:22px;margin-bottom:32px}
.gs-steps li{counter-increment:s;display:flex;gap:16px;align-items:flex-start}
.gs-steps li::before{
  content:counter(s);flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--black);color:var(--yellow);display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;
}
.gs-steps strong{display:block;font-weight:600;font-size:16px;margin-bottom:2px}
.gs-steps span{display:block;color:var(--grey);font-size:14.5px;line-height:1.5}
.gs-side{top:118px}
.gs-assure{border-top:1px solid var(--border);padding-top:24px;display:flex;flex-direction:column;gap:14px}
.gs-assure div{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#333}
.gs-assure .tick{
  flex:0 0 auto;width:22px;height:22px;background:var(--yellow);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.gs-assure .tick svg{width:12px;height:12px}

@media(max-width:768px){
  .gs{padding:52px 0 64px}
  .gs-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .gs-form h2{font-size:36px}
  .gs-done h2{font-size:34px}
  .field-row{grid-template-columns:minmax(0,1fr);gap:0}
  .gs-side{position:static;padding:28px 24px}
}

/* ==========================================================================
   Solution pages
   ========================================================================== */

/* Hero */
.sol-hero{background:var(--black);color:var(--white);overflow:hidden;position:relative}
.sol-hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:50px;padding:80px 0 90px}
.sol-eyebrow{
  color:var(--yellow);font-weight:600;font-size:14px;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:20px;
}
/* ---------- Product lockup (brand system 6a) ----------
   Rendered as live text, per brand/LOCKUP-GUIDELINES.md: stays crisp at any
   size, costs no image request, and remains selectable and accessible.
   Do not re-letter, restyle or change the 0.25 suffix ratio.               */
.th-lockup{
  display:inline-flex;
  align-items:baseline;
  gap:0.205em;                       /* relative to font-size */
  font-family:'Archivo',sans-serif;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  font-size:var(--th-size,44px);
}
.th-lockup__word{color:var(--th-word,#fff);font-size:1em;letter-spacing:-0.04em}
.th-lockup__suffix{color:var(--th-accent,var(--yellow));font-size:0.25em;letter-spacing:-0.005em}

/* Hero placement: sits where .sol-eyebrow used to */
.sol-hero .th-lockup{margin-bottom:22px}
.sol-hero h1{font-size:72px;margin-bottom:24px}
.sol-hero .sol-lead{font-size:19px;color:#cfcfcf;max-width:520px;margin-bottom:34px}
.sol-hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.sol-hero-media{position:relative}
.sol-hero-media img{width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));position:relative;z-index:1}
.sol-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78%;aspect-ratio:1;max-width:560px;
  background:radial-gradient(circle,rgba(255,201,23,.85) 0%,rgba(255,201,23,.55) 42%,rgba(255,201,23,.18) 62%,transparent 72%);
  border-radius:50%;z-index:0;pointer-events:none;
}
.sol-soon{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;background:var(--yellow);color:var(--black);
  padding:3px 10px;border-radius:20px;margin-left:12px;vertical-align:middle;
  font-family:'Inter',sans-serif;
}

/* Stat strip */
.sol-strip{background:var(--yellow);padding:42px 0}
.sol-strip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:center}
.sol-strip .num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:58px;line-height:.9;color:var(--black)}
.sol-strip .lbl{font-size:14px;font-weight:600;color:#3a3200;text-transform:uppercase;letter-spacing:.5px;margin-top:6px}

/* Alternating feature rows */
.sol-features{padding:100px 0}
.sol-head{max-width:640px;margin-bottom:56px}
.sol-head h2{font-size:52px;margin-bottom:16px}
.sol-head p{font-size:18px;color:var(--grey)}
.sol-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;margin-bottom:84px}
.sol-row:last-child{margin-bottom:0}
.sol-row.rev .sol-row-media{order:-1}
.sol-row h3{font-size:38px;margin-bottom:14px}
.sol-row p{font-size:17px;color:#333;margin-bottom:22px}
.sol-row-media{background:var(--light-grey);border-radius:20px;overflow:hidden}
.sol-row-media img{width:100%}
.sol-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.sol-list li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:#333}
.sol-list .tick{
  flex:0 0 auto;width:24px;height:24px;background:var(--yellow);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.sol-list .tick svg{width:13px;height:13px}

/* Benefits grid */
.sol-benefits{background:var(--light-grey);padding:100px 0}
.sol-ben-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.sol-ben{background:var(--white);border-radius:18px;padding:34px 30px;transition:transform .2s ease,box-shadow .2s ease}
.sol-ben:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.1)}
.sol-ben-ico{
  width:52px;height:52px;border-radius:12px;background:var(--black);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.sol-ben-ico svg{width:26px;height:26px}
.sol-ben h3{font-size:32px;margin-bottom:10px}
.sol-ben p{font-size:15.5px;color:var(--grey)}

/* Related solutions */
.sol-related{padding:90px 0}
.sol-related h2{font-size:52px;margin-bottom:36px}
.sol-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sol-card{
  display:flex;gap:16px;align-items:flex-start;
  border:1px solid var(--border);border-radius:16px;padding:26px;
  background:var(--white);transition:transform .2s ease,box-shadow .2s ease;
}
.sol-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.1)}
.sol-card-ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:11px;background:var(--black);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
}
.sol-card-ico svg{width:22px;height:22px}
.sol-card h3{font-size:26px;margin-bottom:6px}
.sol-card p{font-size:14px;color:var(--grey);line-height:1.5}

/* Solutions hub */
.hub{padding:90px 0 100px}
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.hub-item{min-width:0}
.hub-item > div{min-width:0}
.hub-item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:flex-start;
  border:1px solid var(--border);border-radius:18px;padding:32px;
  background:var(--white);transition:transform .2s ease,box-shadow .2s ease;
}
.hub-item:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.11)}
.hub-ico{
  width:54px;height:54px;border-radius:13px;background:var(--black);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
}
.hub-ico svg{width:27px;height:27px}
.hub-item h2{font-size:34px;margin-bottom:8px}
.hub-item p{font-size:15.5px;color:var(--grey);margin-bottom:16px}

@media(max-width:768px){
  .sol-hero-inner{grid-template-columns:minmax(0,1fr);padding:56px 0 60px;gap:36px}
  .sol-hero h1{font-size:52px}
  .sol-hero .th-lockup{--th-size:34px}
  .sol-hero-media{order:-1}
  .sol-glow{width:260px;height:260px;right:-40px}
  .sol-strip-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .sol-features{padding:64px 0}
  .sol-head h2{font-size:38px}
  .sol-row{grid-template-columns:minmax(0,1fr);gap:32px;margin-bottom:56px}
  .sol-row .sol-row-media{order:-1}
  .sol-row h3{font-size:32px}
  .sol-benefits{padding:64px 0}
  .sol-ben-grid{grid-template-columns:minmax(0,1fr)}
  .sol-related{padding:60px 0}
  .sol-related h2{font-size:38px}
  .sol-cards{grid-template-columns:minmax(0,1fr)}
  .hub{padding:60px 0 64px}
  .hub-grid{grid-template-columns:minmax(0,1fr)}
  .hub-item{padding:26px}
  .hub-item h2{font-size:30px}
}

/* ==========================================================================
   Nav: the wordmark lockup is wide, so the desktop bar needs more room than
   the 768px content breakpoint allows. Switch to the menu button at 1000px
   to stop the links colliding with the CTA between 769px and 1000px.
   ========================================================================== */
@media(max-width:1000px){
  .nav-logo img{height:44px}
  .nav-inner{height:78px}
  .nav-links{
    display:none;
    position:absolute;
    top:78px;
    left:0;
    right:0;
    background:var(--black);
    flex-direction:column;
    gap:0;
    padding:12px 24px 24px;
    border-bottom:1px solid rgba(255,255,255,.1);
    /* With Solutions expanded the panel runs to roughly 1800px. It sits inside a
       sticky header, so the page cannot scroll it into view and the lower items
       were unreachable. Cap it to the screen and let the panel scroll itself.
       dvh accounts for a phone browser's collapsing address bar; vh is the fallback. */
    max-height:calc(100vh - 78px);
    max-height:calc(100dvh - 78px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .nav-links.open{display:flex}
  .nav-links li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-toggle{display:flex}
  /* The caret is the only cue that Solutions expands, so it belongs on mobile
     more than on desktop, where hovering reveals the panel anyway. */
  .nav-item > a{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;gap:12px;
  }
  .nav-caret{display:block;width:14px;height:14px;flex:0 0 auto;color:var(--yellow)}
  .nav-item.open-sub > a .nav-caret{transform:rotate(180deg)}
  .nav-item.open-sub > a{color:var(--yellow)}
  .mega{
    position:static;transform:none;width:100%;
    opacity:1;visibility:visible;box-shadow:none;
    background:transparent;padding:12px 0 0;
    display:none;
  }
  .nav-item.open-sub .mega{display:block}
  .mega-grid{grid-template-columns:minmax(0,1fr);gap:2px}
  .mega-link{padding:12px 0}
  .mega-link h4{color:var(--white)}
  .mega-foot{display:none}
}

/* ==========================================================================
   Content pages: story, legal, support, team, careers, press
   ========================================================================== */
.doc{padding:70px 0 96px}
.doc .wrap{max-width:820px}
.doc-updated{font-size:14px;color:var(--grey);margin-bottom:26px}
.doc-notice{
  background:#fffaea;border:1.5px solid var(--yellow);border-radius:14px;
  padding:20px 24px;margin-bottom:38px;font-size:15px;line-height:1.6;color:#3a3200;
}
.doc-notice strong{display:block;margin-bottom:4px;font-weight:600}
.doc h2{font-size:36px;margin:44px 0 14px}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:24px;margin:28px 0 10px}
.doc p{font-size:16.5px;color:#333;margin-bottom:18px;line-height:1.75}
.doc ul,.doc ol{margin:0 0 22px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.doc ul li{position:relative;padding-left:30px;font-size:16.5px;color:#333;line-height:1.7}
.doc ul li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:50%;background:var(--yellow)}
.doc ol{counter-reset:d}
.doc ol li{counter-increment:d;position:relative;padding-left:34px;font-size:16.5px;color:#333;line-height:1.7}
.doc ol li::before{
  content:counter(d);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--black);color:var(--yellow);display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;
}
.doc a{border-bottom:2px solid var(--yellow);font-weight:500}
.doc table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:15.5px}
.doc th,.doc td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.doc th{font-weight:600;background:var(--light-grey)}

/* Team */
.team{padding:80px 0 90px}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.team-card{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--white);transition:transform .2s ease,box-shadow .2s ease}
.team-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.1)}
.team-photo{aspect-ratio:1/1;background:var(--light-grey);display:flex;align-items:center;justify-content:center}
/* #c9c9c9 on the light grey plate was 1.51:1. Large text still needs 3:1. */
.team-initials{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:56px;color:#8a8a8a;letter-spacing:1px}
.team-body{padding:24px}
.team-body h2{font-size:28px;margin-bottom:4px}
.team-role{font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--yellow);background:var(--black);display:inline-block;padding:4px 12px;border-radius:20px;margin-bottom:12px}
.team-body p{font-size:14.5px;color:var(--grey);line-height:1.6}

/* Careers: open roles */
.roles{display:flex;flex-direction:column;gap:16px}
.role{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:16px;padding:26px 28px;background:var(--white);
  transition:transform .2s ease,box-shadow .2s ease;
}
.role:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.09)}
.role h3{font-size:28px;margin-bottom:6px}
.role-meta{font-size:14.5px;color:var(--grey)}
.role-empty{border:1.5px dashed var(--border);border-radius:16px;padding:40px 28px;text-align:center;color:var(--grey);font-size:16px;max-width:720px;margin:0 auto}
.role-empty a{color:var(--black);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* Support / help topics */
.help{padding:80px 0 90px}
.help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.help-card{border:1px solid var(--border);border-radius:18px;padding:32px 28px;background:var(--white);transition:transform .2s ease,box-shadow .2s ease}
.help-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.1)}
.help-ico{width:50px;height:50px;border-radius:12px;background:var(--black);color:var(--yellow);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.help-ico svg{width:25px;height:25px}
.help-card h2{font-size:28px;margin-bottom:8px}
.help-card p{font-size:15px;color:var(--grey);line-height:1.6}

/* Press releases */
.press-list{display:flex;flex-direction:column;gap:18px}
.press-item{border:1px solid var(--border);border-radius:16px;padding:26px 28px;background:var(--white);transition:transform .2s ease,box-shadow .2s ease}
.press-item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.09)}
.press-date{font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.press-item h3{font-size:30px;margin-bottom:8px}
.press-item p{font-size:15.5px;color:var(--grey);line-height:1.6}

@media(max-width:768px){
  .doc{padding:52px 0 64px}
  .doc h2{font-size:30px}
  .team{padding:56px 0 64px}
  .team-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .help{padding:56px 0 64px}
  .help-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .role{padding:22px}
}

/* ==========================================================================
   Site footer: multi-column
   ========================================================================== */
.footer-main{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));
  gap:44px 32px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand img{height:46px;width:auto;margin-bottom:18px}
.footer-brand p{font-size:14px;color:#9a9a9a;max-width:270px;margin-bottom:22px;line-height:1.6}
.footer-social{display:flex;gap:10px}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;color:#c4c4c4;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.footer-social a:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.footer-social svg{width:17px;height:17px}
.footer-col h2{font-size:21px;color:var(--white);margin-bottom:16px;letter-spacing:.3px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:14px;color:#a8a8a8;transition:color .2s ease}
.footer-col a:hover{color:var(--yellow)}
.footer-tag{
  display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  background:var(--yellow);color:var(--black);padding:1px 6px;border-radius:20px;margin-left:6px;vertical-align:middle;
}
.footer-legal{
  padding-top:26px;display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;font-size:13px;color:#8a8a8a;
}
.footer-legal ul{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
.footer-legal a{transition:color .2s ease}
.footer-legal a:hover{color:var(--yellow)}

@media(max-width:1000px){
  .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:38px 28px}
  .footer-brand{grid-column:1 / -1}
  .footer-brand p{max-width:420px}
}
@media(max-width:640px){
  .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ==========================================================================
   CTA banner (used on nearly every page)
   ========================================================================== */
.cta-banner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);min-height:420px}
.cta-media{
  position:relative;background:var(--black);
  display:flex;align-items:center;padding:70px 60px;overflow:hidden;
}
.cta-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.cta-media-content{position:relative;z-index:1;color:var(--white)}
.cta-media-content h2{font-size:60px;max-width:460px;margin-bottom:18px}
.cta-media-content p{font-size:18px;color:#dcdcdc;max-width:420px}
.cta-circle{background:var(--yellow);display:flex;align-items:center;justify-content:center}
.cta-circle a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;color:var(--black);padding:40px 24px;
}
.cta-circle .circle-text{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  font-weight:800;font-size:34px;letter-spacing:0px;line-height:1;
}
.cta-circle .arrow{
  width:52px;height:52px;border-radius:50%;background:var(--black);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.cta-circle a:hover .arrow{transform:translateX(6px)}
.cta-circle .arrow svg{width:20px;height:20px;stroke-width:2.2}

@media(max-width:768px){
  .cta-banner{grid-template-columns:minmax(0,1fr)}
  .cta-media{padding:50px 30px}
  .cta-media-content h2{font-size:40px}
  .cta-circle{padding:50px 30px}
}

/* ==========================================================================
   Integrations directory
   ========================================================================== */
.int{padding:80px 0 40px}
.int:last-of-type{padding-bottom:96px}
.int-head{max-width:680px;margin-bottom:36px}
.int-head h2{font-size:44px;margin-bottom:12px}
.int-head p{font-size:17px;color:var(--grey)}
.int-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.int-card{
  border:1px solid var(--border);border-radius:16px;padding:26px 24px;background:var(--white);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.int-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(0,0,0,.1);border-color:#d6d6d6}
.int-card h3{font-size:26px;margin-bottom:8px}
.int-card p{font-size:14.5px;color:var(--grey);line-height:1.6}

/* Featured integration */
.int-feature{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;
  background:var(--light-grey);border-radius:22px;padding:48px 44px;margin-bottom:16px;
}
.int-feature .int-flag{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  background:var(--yellow);color:var(--black);padding:4px 12px;border-radius:20px;margin-bottom:16px;
}
.int-feature h2{font-size:46px;margin-bottom:14px}
.int-feature p{font-size:17px;color:#333;margin-bottom:18px}
.int-feature-media{background:var(--white);border-radius:18px;overflow:hidden}
.int-feature-media img{width:100%}

/* Service providers get a visually distinct treatment */
.int-card.is-service{background:var(--light-grey);border-style:dashed}

@media(max-width:768px){
  .int{padding:52px 0 28px}
  .int-head h2{font-size:34px}
  .int-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .int-feature{grid-template-columns:minmax(0,1fr);gap:28px;padding:30px 26px}
  .int-feature h2{font-size:34px}
  .int-feature-media{order:-1}
}

/* ==========================================================================
   Product updates / release notes
   ========================================================================== */
.updates{padding:70px 0 96px}
.updates .wrap{max-width:900px}
.update-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.update-filter{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:600;
  font-size:16px;letter-spacing:.5px;padding:8px 18px;border:none;
  background:var(--light-grey);border-radius:40px;cursor:pointer;color:var(--black);
  transition:background .2s ease,color .2s ease;
}
.update-filter:hover{background:#e9e9e9}
.update-filter.active{background:var(--black);color:var(--yellow)}
.update-list{display:flex;flex-direction:column;gap:18px}
.update{
  border:1px solid var(--border);border-radius:18px;padding:30px 32px;background:var(--white);
  transition:transform .2s ease,box-shadow .2s ease;
}
.update:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.09)}
.update-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.update-date{font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--grey)}
.update-tag{
  font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  padding:3px 11px;border-radius:20px;
}
.update-tag.new{background:var(--yellow);color:var(--black)}
.update-tag.improved{background:var(--black);color:var(--yellow)}
.update-tag.fixed{background:var(--light-grey);color:#555}
.update h2{font-size:32px;margin-bottom:10px}
.update p{font-size:16px;color:#333;line-height:1.7;margin-bottom:14px}
.update p:last-child{margin-bottom:0}
.update ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.update ul li{position:relative;padding-left:28px;font-size:15.5px;color:#333;line-height:1.6}
.update ul li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:50%;background:var(--yellow)}
.update-note{
  background:#fffaea;border:1.5px solid var(--yellow);border-radius:14px;
  padding:20px 24px;margin-bottom:34px;font-size:15px;line-height:1.6;color:#3a3200;
}
.update-note strong{display:block;margin-bottom:4px;font-weight:600}
@media(max-width:768px){
  .updates{padding:52px 0 64px}
  .update{padding:24px 22px}
  .update h2{font-size:26px}
}

/* ==========================================================================
   Mega menu: solutions + products + segments panel
   ========================================================================== */
.mega{width:920px;padding:28px}
.mega-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px}

/* Main solution items: title + short tagline, no icon */
.mega-item{display:block;padding:11px 14px;border-radius:10px;transition:background .18s ease}
.mega-item:hover{background:var(--light-grey)}
.mega-item__link{
  display:block;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  font-weight:700;font-size:22px;letter-spacing:.2px;color:var(--black);line-height:1.05;
}
.mega-item__desc{display:block;font-size:13px;color:var(--grey);margin-top:3px;line-height:1.4}

.mega-head{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:700;
  font-size:14px;letter-spacing:1.4px;color:var(--grey);margin:0 0 10px 14px;
}
.mega-divider{border-top:1px solid var(--border);margin:16px 0 14px}

/* Product list */
.mega-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px 8px}
.mega-list a{
  display:block;padding:7px 14px;border-radius:8px;
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  font-weight:600;font-size:18px;letter-spacing:.2px;color:var(--black);
  transition:background .18s ease;
}
.mega-list a:hover{background:var(--light-grey)}

/* Segments side panel */
.mega-side{background:var(--light-grey);border-radius:14px;padding:22px 20px}
.mega-side .mega-head{margin-left:0}
.mega-quick{list-style:none;display:flex;flex-direction:column;gap:2px}
.mega-quick a{
  display:block;padding:8px 0;font-size:14.5px;font-weight:500;color:var(--black);
  border-bottom:1px solid rgba(0,0,0,.06);transition:color .18s ease;
}
.mega-quick li:last-child a{border-bottom:none;font-weight:600}
.mega-quick a:hover{color:#8a6d00}

@media(max-width:1000px){
  .mega{width:100%;padding:12px 0 0}
  .mega-cols{grid-template-columns:minmax(0,1fr);gap:14px}
  .mega-item{padding:10px 0}
  .mega-item__link{color:var(--white);font-size:20px}
  .mega-item__desc{color:#8a8a8a}
  .mega-item:hover{background:transparent}
  .mega-item:hover .mega-item__link{color:var(--yellow)}
  .mega-head{color:#8a8a8a;margin-left:0}
  .mega-divider{border-color:rgba(255,255,255,.12)}
  .mega-list{grid-template-columns:minmax(0,1fr);gap:0}
  .mega-list a{color:var(--white);padding:9px 0}
  .mega-list a:hover{background:transparent;color:var(--yellow)}
  .mega-side{background:transparent;padding:0;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
  .mega-quick a{color:var(--white);border-bottom-color:rgba(255,255,255,.08)}
  .mega-quick a:hover{color:var(--yellow)}
}

/* Solutions hub: section headings */
.hub-head{max-width:660px;margin-bottom:34px}
.hub-head h2{font-size:46px;margin-bottom:12px}
.hub-head p{font-size:17px;color:var(--grey)}
.hub + .hub{padding-top:0}
@media(max-width:768px){ .hub-head h2{font-size:34px} }