/* Home page layout. Loaded after style.css, on the home page only. */

/* Hero: outlined role pills and a scroll cue */
.hero .hm-pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:clamp(22px,2.8vw,38px) 0 clamp(24px,3vw,44px);padding:0}
.hero .hm-pills a{display:inline-block;padding:.5em 1.15em;border:1.5px solid currentColor;border-radius:999px;color:var(--hf);text-decoration:none;font:400 clamp(15px,1.5vw,21px)/1.2 var(--sans);transition:background .25s,color .25s,border-color .25s}
.hero .hm-pills a:hover,.hero .hm-pills a:focus-visible{background:var(--hf);color:var(--hb);border-color:var(--hf)}
.hero .hm-scroll{position:absolute;right:var(--gut);bottom:clamp(22px,3vw,44px);z-index:3;display:flex;align-items:flex-end;gap:14px;color:var(--hf);opacity:.75;text-decoration:none;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.hero .hm-scroll::after{content:"";width:1px;height:56px;background:currentColor;transform-origin:top;animation:hm-line 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes hm-line{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media(max-width:700px){.hero .hm-scroll{display:none}}

/* Statement: words light up as the section scrolls into view */
.hm-statement{background:var(--off);padding:clamp(88px,13vw,210px) 0}
.hm-statement .wrap{max-width:1240px}
.hm-statement .kick{margin-bottom:clamp(22px,3vw,40px)}
.hm-big{margin:0;color:var(--ink);font:400 clamp(30px,5.3vw,78px)/1.1 var(--display);letter-spacing:-.012em;text-wrap:balance;max-width:24ch}
.hm-big em{font-style:normal;color:var(--lemon)}
.hm-big .w{transition:opacity .2s linear}

/* Marquee: two rows of what the practice covers, moving in opposite directions */
.hm-marq{background:var(--ink);color:#fff;overflow:hidden;padding:clamp(30px,4.4vw,64px) 0;display:flex;flex-direction:column;gap:clamp(10px,1.8vw,26px)}
.hm-track{display:flex;width:max-content;animation:hm-run 56s linear infinite}
.hm-track.rev{animation-direction:reverse;animation-duration:68s}
.hm-set{display:flex;flex:none}
.hm-set span{display:inline-flex;align-items:center;gap:.55em;padding-right:.55em;white-space:nowrap;font:400 clamp(40px,7.2vw,108px)/1.05 var(--display)}
.hm-set span::after{content:"";flex:none;width:.26em;height:.26em;border-radius:50%;background:var(--coral)}
.hm-set span:nth-child(4n+2)::after{background:var(--acid)}
.hm-set span:nth-child(4n+3)::after{background:#92C3EA}
.hm-set span:nth-child(4n)::after{background:#529E7D}
.hm-track.out .hm-set span{color:transparent;-webkit-text-stroke:1.5px rgba(255,253,241,.8)}
.hm-marq:hover .hm-track{animation-play-state:paused}
@keyframes hm-run{to{transform:translateX(-50%)}}

/* Three ways in: a grid of tiles. Each row starts with a solid tile, then three that fill with the row colour on hover. */
.tg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);margin-top:clamp(28px,4vw,56px)}
.tg>a{--acc:var(--ink);--rf:#fff;position:relative;display:flex;flex-direction:column;aspect-ratio:1/1;padding:clamp(18px,1.9vw,28px);overflow:hidden;isolation:isolate;color:var(--ink);text-decoration:none}
.tg>a.brand{--acc:var(--coral);--rf:var(--ink)}
.tg>a.courses,.tg>a.tax{--acc:var(--blue);--rf:#fff}
.tg>a.research,.tg>a.ai{--acc:var(--green);--rf:#fff}

.tg>a.tg-cat{background:var(--acc);color:var(--rf);container-type:inline-size}
.tg-cat .n{font:600 12px/1 var(--sans);letter-spacing:.2em}
.tg-cat h3{margin:auto 0 .28em;font:400 clamp(32px,21cqw,74px)/.95 var(--display);letter-spacing:-.015em;color:inherit}
.tg-cat p{margin:0;font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.5;color:inherit}
.tg-cat .go{margin-top:16px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.tg-cat .go i{display:inline-block;font-style:normal;transition:transform .35s ease}
.tg-cat:hover .go i,.tg-cat:focus-visible .go i{transform:translateX(8px)}

.tg-tile{background:#FFF4D7;transition:color .35s ease}
.tg-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform:translateY(101%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tg-tile h4{margin:0;max-width:11ch;font:400 clamp(22px,2.1vw,32px)/1.08 var(--display);letter-spacing:-.01em;text-transform:none}
.tg-tile .ar{position:absolute;top:clamp(16px,1.7vw,26px);right:clamp(16px,1.7vw,26px);font-style:normal;font-size:22px;line-height:1;transition:transform .4s ease}
.tg-tile p{position:absolute;left:clamp(18px,1.9vw,28px);right:clamp(18px,1.9vw,28px);bottom:clamp(18px,1.9vw,28px);margin:0;font-size:clamp(13.5px,1.1vw,16px);line-height:1.5;opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.tg-tile:hover,.tg-tile:focus-visible{color:var(--rf)}
.tg-tile:hover::before,.tg-tile:focus-visible::before{transform:none}
.tg-tile:hover .ar,.tg-tile:focus-visible .ar{transform:rotate(45deg)}
.tg-tile:hover p,.tg-tile:focus-visible p{opacity:1;transform:none}
.tg>a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
@media(hover:none){.tg-tile p{opacity:1;transform:none}}
@media(max-width:1000px){
  .tg{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tg>a.tg-cat{grid-column:1/-1;aspect-ratio:auto;min-height:0;padding-block:clamp(24px,4vw,40px)}
  .tg-cat h3{margin-top:clamp(28px,6vw,60px)}
}
@media(max-width:700px){
  .tg{grid-template-columns:1fr}
  .tg>a.tg-tile{aspect-ratio:auto;min-height:150px;gap:14px}
  .tg-tile h4{max-width:none;padding-right:34px}
  .tg-tile p{position:static;opacity:1;transform:none}
}

/* Closing call to action */
.sec.hm-cta{padding:clamp(88px,13vw,210px) 0 clamp(64px,9vw,140px)}
.hm-cta .kick{color:var(--acid)}
.hm-cta h2{margin:0;color:#fff;font:400 clamp(52px,11vw,180px)/.94 var(--display);letter-spacing:-.02em;max-width:10ch;text-wrap:balance}
.hm-cta .lead{margin-top:clamp(22px,3vw,40px)}
.hm-mail{display:inline-block;margin-top:clamp(26px,4vw,52px);padding-bottom:.14em;color:var(--acid);border-bottom:2px solid currentColor;text-decoration:none;font:400 clamp(22px,4.2vw,60px)/1.1 var(--display);overflow-wrap:anywhere;transition:color .25s}
.hm-mail:hover,.hm-mail:focus-visible{color:#fff}

@media (prefers-reduced-motion:reduce){
  .hero .hm-scroll::after{animation:none}
  .hm-track{animation:none;width:auto;flex-wrap:wrap;padding:0 var(--gut)}
  .hm-track .hm-set+.hm-set{display:none}
  .hm-set{flex-wrap:wrap}
}