/* Home only: editorial AI hero. No dependencies on the interview UI. */
.skill-hero{background:#071e2b;color:#fff;position:relative;overflow:hidden}
.skill-hero .wrap{max-width:1440px;width:calc(100% - 96px);margin-inline:auto}
.skill-hero__main{display:grid;grid-template-columns:1fr 1.32fr;align-items:center;min-height:760px;gap:30px}
.skill-hero__copy{position:relative;z-index:2;padding:62px 0 48px}
.skill-hero__eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 30px;color:#b9d6df;font-size:11px;font-weight:700;letter-spacing:.15em}
.skill-hero__eyebrow>span{width:7px;height:7px;background:#70edcd;border-radius:50%;box-shadow:0 0 15px #70edcd55}
.skill-hero h1{font-size:clamp(54px,5.1vw,82px);line-height:1.06;letter-spacing:-.06em;font-weight:800;color:#fff;margin:0 0 26px;max-width:650px}
.skill-hero h1 em{font-style:normal;color:#70edcd}
.skill-hero__intro{font-size:clamp(18px,1.6vw,23px);line-height:1.55;font-weight:600;color:#e7f0f5;margin:0 0 16px}
.skill-hero__description{font-size:15px;line-height:1.85;color:#b0c5d1;max-width:490px;margin:0}
.skill-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:30px}
.skill-hero__primary,.skill-hero__secondary{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:52px;font-size:13px;font-weight:800;text-decoration:none!important;transition:background .2s,color .2s}
.skill-hero__primary{background:#70edcd;color:#062b31!important;padding:15px 22px;border-radius:4px}
.skill-hero__primary:hover{background:#a2f7e1}
.skill-hero__secondary{color:#fff!important;border-bottom:1px solid #577382;padding:12px 0}
.skill-hero__secondary:hover{color:#70edcd!important;border-color:#70edcd}
.skill-hero__actions a>span{font-size:21px;font-weight:400}
.skill-hero__formula{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:32px;font-size:11px;color:#a5bfcc;letter-spacing:.025em}
.skill-hero__formula b{font-size:18px;font-weight:400;color:#70edcd}
.skill-hero__visual{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:400px 252px;gap:12px;min-width:0;padding:42px 0;align-self:center}
.skill-hero__photo{position:relative;margin:0;min-width:0;overflow:hidden;border-radius:6px;background:#102f40;border:1px solid #ffffff18}
.skill-hero__photo--main{grid-column:1/-1}
.skill-hero__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.skill-hero__photo--main img{object-position:center 40%}
.skill-hero__photo:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#041720ed,transparent 60%)}
.skill-hero__photo figcaption{position:absolute;z-index:1;bottom:20px;left:20px;right:16px;display:flex;flex-direction:column;gap:8px}
.skill-hero__photo figcaption>span{font-size:8px;font-weight:700;letter-spacing:.16em;color:#b8f9e8}
.skill-hero__photo figcaption>strong{font-size:15px;line-height:1.4;color:#fff;font-weight:700;letter-spacing:-.02em}
.skill-hero__photo--main figcaption>strong{font-size:21px}
.skill-hero__visual-label{position:absolute;z-index:1;top:18px;left:18px;font-size:9.5px;font-weight:700;letter-spacing:.16em;display:flex;align-items:center;gap:12px;color:#e2f7fa;background:#061f2ca6;border:1px solid #d1f2ff30;padding:11px 26px;border-radius:3px}
.skill-hero__visual-label>span{font-size:17px;color:#70edcd}
.skill-hero__paths{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d1efff26;padding:25px 0 32px;gap:30px}
.skill-hero__path{display:flex;flex-direction:column;gap:10px;text-decoration:none!important;color:white;padding-right:24px}
.skill-hero__path+.skill-hero__path{border-left:1px solid #d1efff26;padding-left:28px}
.skill-hero__number{font-size:9px;letter-spacing:.15em;font-weight:700;color:#70edcd}
.skill-hero__path-title{font-size:14px;font-weight:700;line-height:1.55;color:#fff;display:flex;justify-content:space-between;gap:10px}
.skill-hero__path-title>span{color:#70edcd;transition:transform .2s}
.skill-hero__path:hover .skill-hero__path-title>span{transform:translate(3px,-3px)}
.skill-hero__path-description{font-size:11px;color:#a5bfcc;line-height:1.6}
.skill-hero a:focus-visible{outline:3px solid #fff;outline-offset:5px}
.home-offerings{padding:24px 0 6px;background:var(--bg,#f5f8fb)}
@media(max-width:1100px){.skill-hero .wrap{width:calc(100% - 56px)}.skill-hero__main{min-height:700px;grid-template-columns:1fr 1.18fr;gap:24px}.skill-hero h1{font-size:61px}.skill-hero__visual{grid-template-rows:360px 230px}.skill-hero__description{font-size:14px}.skill-hero__actions{gap:16px}.skill-hero__primary,.skill-hero__secondary{font-size:12px;gap:12px}.skill-hero__photo figcaption{left:14px;bottom:14px}.skill-hero__photo figcaption>strong{font-size:12px}.skill-hero__photo--main figcaption>strong{font-size:18px}.skill-hero__path{padding-right:0}.skill-hero__paths{gap:20px}.skill-hero__path+.skill-hero__path{padding-left:20px}}
@media(max-width:800px){.skill-hero .wrap{width:calc(100% - 40px)}.skill-hero__main{grid-template-columns:1fr;gap:0;min-height:0}.skill-hero__copy{padding:42px 0 10px}.skill-hero__eyebrow{font-size:9px;margin-bottom:24px}.skill-hero h1{font-size:clamp(50px,9vw,72px);margin-bottom:20px}.skill-hero__intro{font-size:19px}.skill-hero__description{max-width:550px}.skill-hero__actions{gap:22px;margin-top:25px}.skill-hero__formula{margin-top:24px}.skill-hero__visual{grid-template-rows:350px 242px;padding:24px 0 30px;gap:10px}.skill-hero__paths{grid-template-columns:1fr;gap:0;padding:0 0 12px}.skill-hero__path,.skill-hero__path+.skill-hero__path{padding:21px 0;border-left:0}.skill-hero__path+.skill-hero__path{border-top:1px solid #d1efff26}.skill-hero__path-title{font-size:14px}.skill-hero__path-description{font-size:12px}.home-offerings{padding-top:16px}}
@media(max-width:480px){.skill-hero__visual{grid-template-rows:290px 206px}.skill-hero__photo figcaption{left:12px;right:10px;bottom:14px}.skill-hero__photo figcaption>span{font-size:7px;letter-spacing:.08em}.skill-hero__photo figcaption>strong{font-size:11px}.skill-hero__photo--main figcaption>strong{font-size:17px}.skill-hero__visual-label{top:12px;left:12px;font-size:8.5px;letter-spacing:.12em;padding:10px 18px}.skill-hero__photo--people img{object-position:55% center}}
@media(prefers-reduced-motion:reduce){.skill-hero a,.skill-hero__path-title>span,.skill-hero__photo img{transition:none}}

/* Motion layer: soft moving light, photo depth and deliberate interaction. */
.skill-hero{isolation:isolate}
.skill-hero__main{position:relative;z-index:1}
.skill-hero__paths{z-index:1}
.skill-hero__atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background-image:radial-gradient(#83e6dc1a 1px,transparent 1px);background-size:32px 32px}
.skill-hero__atmosphere i{position:absolute;display:block;width:650px;height:650px;border-radius:50%;opacity:.6;background:radial-gradient(ellipse,#0ab89c42,transparent 66%);animation:skill-aurora 16s ease-in-out infinite alternate;animation-play-state:paused}
.skill-hero__atmosphere i:nth-child(1){left:-300px;top:-250px}
.skill-hero__atmosphere i:nth-child(2){right:-200px;top:20px;background:radial-gradient(ellipse,#5965ff3b,transparent 65%);animation-delay:-8s;animation-duration:21s}
.skill-hero__atmosphere i:nth-child(3){left:30%;bottom:-480px;background:radial-gradient(ellipse,#1acdf63b,transparent 65%);animation-delay:-5s;animation-duration:18s}
.skill-hero__spotlight{position:absolute;top:0;left:0;width:420px;height:420px;pointer-events:none;background:radial-gradient(circle,#55dfce1f,transparent 68%);opacity:0;transition:opacity .5s;z-index:0}
.skill-hero__visual{transition:transform .4s cubic-bezier(.2,.7,.2,1);transform-origin:center;position:relative}
.skill-hero__photo img{animation:skill-photo-drift 13s ease-in-out infinite alternate;animation-play-state:paused;transform:scale(1.035)}
.skill-hero__photo--practice img{animation-delay:-5s;animation-duration:15s}
.skill-hero__photo--people img{animation-delay:-9s;animation-duration:17s}
.skill-hero__photo:before{content:"";position:absolute;z-index:2;inset:-40% -90%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,#e5ffff18 49%,transparent 56%);transform:translateX(-40%);animation:skill-light-sweep 9s ease-in-out infinite;animation-play-state:paused}
.skill-hero__photo--practice:before{animation-delay:2s}
.skill-hero__photo--people:before{animation-delay:4s}
/* "AI" - the word the whole page turns on. Four layers, every one of them
   clipped to the same letters so nothing sits in a box around them:
     1. the letters themselves, carrying a colour that drifts across
     2. a blurred copy behind, breathing, which is what makes them glow
     3. a hard white beam that crosses the letters every few seconds
   A fourth, the trace under the word, belongs to the <em> rather than the
   letters. Nothing orbits it: a dot going round the word was a distraction
   from the word. All of it is paused until the hero's motion toggle is on, like
   everything else here, and reduced motion drops back to flat mint. */
.skill-hero h1 em.skill-ai{position:relative;display:inline-block;font-style:normal;isolation:isolate}
.skill-ai__text{position:relative;display:inline-block;
  background:linear-gradient(100deg,#70edcd 8%,#8bdbff 26%,#b3a4ff 42%,#ffd98a 58%,#70edcd 78%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:skill-ai-color 7s ease-in-out infinite;animation-play-state:paused}
/* the bloom: the same letters, blurred, sitting behind them */
.skill-ai__text:before{content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;
  background:linear-gradient(100deg,#70edcd,#8bdbff 40%,#b3a4ff 62%,#70edcd);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:blur(16px);opacity:.75;pointer-events:none;
  animation:skill-ai-bloom 4.5s ease-in-out infinite;animation-play-state:paused}
/* and the beam that crosses them */
.skill-ai__text:after{content:attr(data-text);position:absolute;left:0;top:0;
  background:linear-gradient(104deg,transparent 40%,#fff 50%,transparent 60%);
  background-size:260% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none;
  animation:skill-ai-beam 6.5s ease-in-out infinite;animation-play-state:paused}
/* the trace under the word, a signal running left to right */
.skill-hero h1 em.skill-ai:after{content:"";position:absolute;left:4%;right:4%;bottom:.04em;height:2px;
  border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#70edcd 45%,#b3a4ff 60%,transparent);
  background-size:220% 100%;opacity:.6;
  animation:skill-ai-trace 6.5s ease-in-out infinite;animation-play-state:paused}
.skill-hero__eyebrow>span{animation:skill-beacon 3s ease-in-out infinite;animation-play-state:paused}
.skill-hero__formula b{animation:skill-beacon 3s ease-in-out infinite;animation-play-state:paused}
.skill-hero__formula b:nth-of-type(2){animation-delay:1s}
.skill-hero__primary{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s}
.skill-hero__primary:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff80 48%,transparent 75%);transform:translateX(-120%);transition:transform .65s}
.skill-hero__primary:hover:before,.skill-hero__primary:focus-visible:before{transform:translateX(120%)}
.skill-hero__primary:hover{transform:translateY(-3px);box-shadow:0 12px 30px #32d3b530}
.skill-hero__path{position:relative;transition:transform .25s}
.skill-hero__path:after{content:"";position:absolute;bottom:-12px;left:0;right:24px;height:1px;background:linear-gradient(90deg,#70edcd,transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.skill-hero__path:hover:after,.skill-hero__path:focus-visible:after{transform:scaleX(1)}
.skill-hero__motion-toggle{border:0;border-bottom:1px solid #88aba455;border-radius:0;background:transparent;color:#b0c5d1;font:inherit;font-size:10px;line-height:1.5;margin-top:18px;padding:4px 0;cursor:pointer}
.skill-hero__motion-toggle[hidden]{display:none}
.skill-hero__motion-toggle:hover{color:#fff}
.skill-hero__motion-toggle:focus-visible{outline:2px solid #70edcd;outline-offset:5px}
.skill-hero.motion-active .skill-hero__atmosphere i,.skill-hero.motion-active .skill-hero__photo img,.skill-hero.motion-active .skill-hero__photo:before,.skill-hero.motion-active h1 em,.skill-hero.motion-active h1 em:after,.skill-hero.motion-active .skill-ai__text,.skill-hero.motion-active .skill-ai__text:before,.skill-hero.motion-active .skill-ai__text:after,.skill-hero.motion-active .skill-hero__eyebrow>span,.skill-hero.motion-active .skill-hero__formula b{animation-play-state:running}
@keyframes skill-aurora{0%{transform:translate3d(0,0,0) scale(.85)}100%{transform:translate3d(150px,90px,0) scale(1.25)}}
@keyframes skill-photo-drift{0%{transform:scale(1.035) translate3d(-.5%,0,0)}100%{transform:scale(1.10) translate3d(.8%,-.6%,0)}}
@keyframes skill-light-sweep{0%,30%{transform:translateX(-40%);opacity:0}40%{opacity:1}70%,100%{transform:translateX(40%);opacity:0}}
@keyframes skill-ai-color{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes skill-ai-bloom{0%,100%{opacity:.5;filter:blur(18px)}50%{opacity:.95;filter:blur(11px)}}
/* the beam waits off the word, crosses it quickly, then waits again */
@keyframes skill-ai-beam{0%,62%{background-position:120% 0}92%,100%{background-position:-40% 0}}
@keyframes skill-ai-trace{0%,100%{background-position:110% 0;opacity:.35}50%{background-position:-10% 0;opacity:.85}}
@keyframes skill-beacon{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:800px){.skill-hero__atmosphere i{width:420px;height:420px;opacity:.45}.skill-hero__visual{transform:none!important}.skill-hero__spotlight{display:none}.skill-hero__motion-toggle{margin-top:12px}.skill-hero__photo img{animation-duration:18s}.skill-hero__photo:before{display:none}}
@media(prefers-reduced-motion:reduce){.skill-hero *,.skill-hero *:before,.skill-hero *:after{animation:none!important;transition:none!important}.skill-hero__visual,.skill-hero__photo img,.skill-hero__primary:hover{transform:none!important}.skill-hero__spotlight,.skill-hero__photo:before{display:none}.skill-hero h1 em{color:#70edcd;background:none}.skill-ai__text{color:#70edcd;background:none}.skill-ai__text:before,.skill-ai__text:after,.skill-hero h1 em.skill-ai:after{display:none}}
/* Local Three.js canvas sits behind content and never intercepts interaction. */
/* The mesh covers the whole hero. It is only faded off at the very top and
   the very bottom, so it meets the header and the section below it without
   an edge - the old mask kept all but the bottom 5%, which is what made it
   read as a strip along the floor. */
.skill-hero__wave{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.72;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%)}
.skill-hero__wave canvas{display:block;width:100%;height:100%;pointer-events:none;object-fit:cover}
.skill-hero.motion-active .skill-hero__visual{transition:none}
.bisp-offers{padding:22px 0 28px;color:var(--ink,#062a40)}
.bisp-offers__heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:24px}
.bisp-offers__heading p{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--muted,#496878);margin:0 0 10px}
.bisp-offers__heading h2{font-size:clamp(23px,2.5vw,34px);line-height:1.25;letter-spacing:-.035em;margin:0}
.bisp-offers__controls{display:flex;gap:8px;align-items:center;flex-shrink:0}
.bisp-offers__controls[hidden]{display:none}
.bisp-offers__controls button{background:var(--surface,#fff);color:var(--ink,#062a40);border:1px solid #719cab44;border-radius:6px;min-height:40px;padding:8px 14px;cursor:pointer;font:inherit;font-size:12px}
.bisp-offers__controls button:hover{border-color:#0ba5a7}
.bisp-offers__track{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 20px;scrollbar-width:thin;scrollbar-color:#7caab3 transparent;overscroll-behavior-x:contain}
/* the rail is moved a frame at a time, so a smooth-scroll rule must never animate it;
   while it loops, the copy of the cards would make a scrollbar jump - swipe or the
   arrows move it instead - and its ends fade, since it has none */
.bisp-offers__track{scroll-behavior:auto}
.bisp-offers.is-looping .bisp-offers__track{scrollbar-width:none;padding-bottom:12px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.bisp-offers.is-looping .bisp-offers__track::-webkit-scrollbar{display:none}
.bisp-offer{flex:0 0 290px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--surface,#fff);border:1px solid #7699aa33;color:var(--ink,#062a40);text-decoration:none!important;transition:box-shadow .3s,border-color .3s}
.bisp-offer:hover{border-color:#0caaa9;box-shadow:0 8px 24px #0f47541a}
.bisp-offer__image{height:164px;position:relative;background:#ecf3f3;overflow:hidden}
.bisp-offer__image img{width:100%;height:100%;object-fit:cover;transition:transform .55s}
.bisp-offer:hover img{transform:scale(1.055)}
.bisp-offer__image>span{position:absolute;bottom:12px;left:12px;background:#fff;color:#062a40;font-size:11px;font-weight:800;padding:7px 12px;border-radius:30px;box-shadow:0 3px 12px #062a4022}
.bisp-offer__body{display:flex;flex-direction:column;padding:19px;flex:1;gap:10px}
.bisp-offer__label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted,#38707a)}
.bisp-offer h3{font-size:17px;line-height:1.45;margin:0;color:inherit}
.bisp-offer p{font-size:12px;line-height:1.7;color:var(--muted,#496878);margin:0 0 8px}
.bisp-offer__cta{display:flex;justify-content:space-between;gap:10px;margin-top:auto;font-weight:800;font-size:12px;color:var(--ink,#062a40)}
.bisp-offer:focus-visible,.bisp-offers button:focus-visible,.bisp-offers__track:focus-visible{outline:3px solid #0ba5a7;outline-offset:2px}
@media(max-width:800px){.bisp-offers__heading{align-items:start;flex-direction:column}.bisp-offer{flex-basis:265px}.skill-hero__wave{opacity:.58}}
@media(prefers-reduced-motion:reduce){.skill-hero__wave{display:none}.bisp-offer,.bisp-offer img{transition:none}.bisp-offer:hover img{transform:none}}

/* The BISP badge sits above the eyebrow, on the hero's dark ground. Its own
   partial brings the pill, the turning ring and the red "Powered By AI" label;
   all this adds is the room it needs here. */
.skill-hero__badge{margin:0 0 30px;position:relative;z-index:2}
@media(max-width:800px){.skill-hero__badge{margin-bottom:24px}}

/* ------------------------------------------------------------------ adverts
   BISP's own offers, over the main photograph. One panel is shown at a time;
   the rest are hidden, so with no JavaScript the first one is simply the
   caption. The panel sits on its own dark wash rather than straight on the
   picture, because the photographs are bright in places and the price has to
   stay readable on all of them. */
.skill-ads{position:absolute;left:0;right:0;bottom:0;display:block;padding:0;margin:0;z-index:2}
.skill-ad{
  display:grid;gap:9px;padding:22px 24px 20px;text-decoration:none!important;color:#fff;
  background:linear-gradient(0deg,#03161fef 0%,#03161fd6 58%,#03161f00 100%);
  border-top:1px solid #7ef0d51f;
}
/* display:grid would beat the [hidden] attribute, and every advert would
   show at once for a visitor with no JavaScript. */
.skill-ad[hidden],.skill-ads__dots[hidden]{display:none}
.skill-ad__eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#70edcd}
.skill-ad__title{font-size:23px;line-height:1.28;font-weight:800;letter-spacing:-.02em;color:#fff}
.skill-ad__line{font-size:13.5px;line-height:1.62;color:#c2d6de;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.skill-ad__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:3px}
.skill-ad__meta{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:#70edcd;color:#04252c;
}
.skill-ad__cta{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.03em;color:#fff;margin-left:auto;padding:8px 15px;border:1px solid #ffffff3d;border-radius:999px;transition:background .22s,color .22s,border-color .22s,transform .22s}
.skill-ad:hover .skill-ad__cta,.skill-ad:focus-visible .skill-ad__cta{color:#70edcd}
.skill-ad:focus-visible{outline:3px solid #70edcd;outline-offset:-3px}

.skill-ads__dots{display:flex;gap:6px;justify-content:flex-end;padding:0 22px 14px;
  background:linear-gradient(0deg,#03161fef,#03161fef)}
.skill-ads__dots button{
  width:22px;height:4px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:#ffffff36;transition:background .25s;
}
.skill-ads__dots button:hover{background:#ffffff70}
.skill-ads__dots button[aria-current="true"]{background:#70edcd}
.skill-ads__dots button:focus-visible{outline:2px solid #70edcd;outline-offset:2px}

@media(max-width:800px){
  .skill-ad{padding:16px 16px 14px}
  .skill-ad__title{font-size:16px}
  .skill-ad__line{-webkit-line-clamp:2}
  .skill-ads__dots{padding:0 16px 12px}
}
@media(max-width:480px){
  .skill-ad__line{display:none}
  .skill-ad__title{font-size:15px}
  .skill-ad__cta{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.skill-ads__dots button{transition:none}}

/* The two small photographs carry the same advert, with the sentence dropped:
   there is room for the offer and its badge, and nothing more. */
.skill-ads--compact .skill-ad{padding:16px 18px 15px;gap:6px}
.skill-ads--compact .skill-ad__eyebrow{font-size:10.5px;letter-spacing:.15em}
.skill-ads--compact .skill-ad__title{font-size:17.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.skill-ads--compact .skill-ad__foot{gap:9px;margin-top:1px}
.skill-ads--compact .skill-ad__meta{font-size:11px;padding:5px 12px}
.skill-ads--compact .skill-ad__cta{font-size:12px;padding:7px 13px}
@media(max-width:480px){
  .skill-ads--compact .skill-ad__title{font-size:13.5px;-webkit-line-clamp:2}
  .skill-ads--compact .skill-ad__cta{display:none}
}

/* Something to press. The whole picture is the link, so it lifts as one, the
   photograph leans in a little behind the panel, and the call to action fills
   in - a card that looks inert gets looked at and not clicked. */
.skill-hero__photo{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.skill-hero__photo:has(.skill-ad:hover),.skill-hero__photo:has(.skill-ad:focus-visible){
  transform:translateY(-5px);border-color:#70edcd5c;box-shadow:0 26px 52px -20px #000c}
.skill-hero__photo:has(.skill-ad:hover) img{transform:scale(1.045)}
.skill-ad:hover .skill-ad__cta,.skill-ad:focus-visible .skill-ad__cta{
  background:#70edcd;border-color:#70edcd;color:#04252c;transform:translateX(3px)}
.skill-ad:hover .skill-ad__title{color:#d8fff5}
.skill-ad__cta>span{transition:transform .22s}
.skill-ad:hover .skill-ad__cta>span{transform:translate(2px,-2px)}

/* the dots are a real target, not a hairline */
.skill-ads__dots button{height:5px;width:26px}
.skill-ads__dots{padding-bottom:16px}
.skill-ads__dots button:hover{background:#ffffff8c}

@media(prefers-reduced-motion:reduce){
  .skill-hero__photo,.skill-hero__photo img,.skill-ad__cta,.skill-ad__cta>span{transition:none}
  .skill-hero__photo:has(.skill-ad:hover),.skill-hero__photo:has(.skill-ad:hover) img,
  .skill-ad:hover .skill-ad__cta,.skill-ad:hover .skill-ad__cta>span{transform:none}
}

/* The picture column sits a little further right, into the space beside the
   wrap. Nothing changes size: it is moved, not grown, and it goes back on
   its own once the hero stacks into one column. */
.skill-hero__visual{left:28px}
@media(max-width:800px){.skill-hero__visual{left:0}}

/* ------------------------------------------------ "AI.", as the footer makes it
   The footer closes every page on its own "AI" (site-footer-effects.css): the
   same drifting colour, and three things this one did not have - a core that
   glows under the letters, a flare when the word finishes thinking, and the
   decode itself, the letters resolving out of glyphs with a red and cyan
   split either side of them. The home page now opens on the mark it closes
   on. The glyphs run in their own overlay (.skill-ai__glyphs) and the real
   letters are only hidden while it runs, never rewritten, so the headline
   always reads "Now with AI." to a screen reader and a crawler. */
.skill-ai__text{
  background:linear-gradient(100deg,#70edcd 0%,#8bdbff 20%,#b3a4ff 38%,#ffd98a 54%,#70edcd 72%,#8bdbff 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .12s ease}
/* the core: a pool of light under the word, breathing */
.skill-ai__core{position:absolute;left:50%;top:54%;z-index:-2;width:1.9em;height:1.9em;margin:-.95em 0 0 -.95em;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(112,237,205,.32) 0,rgba(139,219,255,.13) 40%,rgba(112,237,205,0) 70%);
  opacity:.5;transform:scale(.86);
  transition:opacity .5s ease,transform .5s ease;
  animation:skill-ai-core 4.2s ease-in-out infinite;animation-play-state:paused}
/* the flare, as the last letter locks: the core opens and the word brightens */
.skill-hero h1 em.skill-ai{transition:filter .45s ease}
.skill-hero h1 em.skill-ai.is-firing{filter:brightness(1.28);transition-duration:.1s}
.skill-ai.is-firing .skill-ai__core{animation:none;opacity:1;transform:scale(1.24);transition-duration:.12s}
/* and the "+" signs in the formula answer it, so the hero reads as one signal */
.skill-hero__formula b{transition:color .4s ease,text-shadow .4s ease}
.skill-hero:has(.skill-ai.is-firing) .skill-hero__formula b{color:#b4ffe6;text-shadow:0 0 12px #70edcd;transition-duration:.1s}
/* the decode: glyphs in the word's colours, split red and cyan either side */
.skill-ai__glyphs{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,#70edcd 0%,#8bdbff 20%,#b3a4ff 38%,#ffd98a 54%,#70edcd 72%,#8bdbff 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:-2px 0 rgba(0,229,255,.6),2px 0 rgba(255,64,160,.5);
  animation:skill-ai-color 7s ease-in-out infinite;animation-play-state:paused}
.skill-ai.is-decoding .skill-ai__glyphs{opacity:1}
.skill-ai.is-decoding .skill-ai__text{opacity:0}
.skill-hero.motion-active .skill-ai__core,.skill-hero.motion-active .skill-ai__glyphs{animation-play-state:running}
@keyframes skill-ai-core{0%,100%{opacity:.38;transform:scale(.84)}50%{opacity:.62;transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){
  /* flat mint, as before: the gradient rule above would otherwise win */
  .skill-ai__text{color:#70edcd;background:none}
  .skill-ai__glyphs{display:none}
  .skill-ai__core{opacity:.4;transform:none}
  .skill-ai.is-decoding .skill-ai__text{opacity:1}
}