/* The preview favours explanation and clear links over decorative cards. */
.clarity-home .clarity-hero.shell{width:100%;max-width:none;min-height:100svh;align-items:center;margin:-70px 0 0;padding:155px max(28px,calc((100vw - 1200px)/2)) 95px;border:0;border-radius:0;box-shadow:none}
.clarity-home .clarity-hero .network-hero-content{padding-top:0}
.clarity-home .clarity-hero .network-hero-image{animation:clarity-hero-zoom 13s ease-in-out infinite alternate;transform-origin:66% 50%;will-change:transform}
@keyframes clarity-hero-zoom{from{transform:scale(1.01) translateX(0)}to{transform:scale(1.11) translateX(-1%)}}
.clarity-home .clarity-hero h1{max-width:980px;font-size:clamp(52px,6.45vw,91px);line-height:1.01}
.clarity-home .clarity-hero .lead{max-width:760px;color:#d1d3d1}
.clarity-audiences{padding:clamp(105px,11vw,165px) 0 clamp(100px,10vw,155px)}
.clarity-heading{max-width:790px;margin-bottom:clamp(46px,6vw,80px)}
.clarity-heading h2,.clarity-work h2,.clarity-example h2{margin:22px 0;font-size:clamp(42px,5.2vw,72px);line-height:1.06}
.clarity-heading p{max-width:650px;color:#b7bdbc;font-size:19px;line-height:1.62}
.clarity-routes{border-top:1px solid rgba(255,255,255,.23)}
.clarity-route{display:grid;grid-template-columns:minmax(175px,.43fr) minmax(0,1fr);gap:clamp(35px,7vw,110px);padding:clamp(38px,4.4vw,64px) 5px;border-bottom:1px solid rgba(255,255,255,.23);color:#f7f4ed;text-decoration:none;transition:padding .3s ease,background .3s ease}
.clarity-route:hover,.clarity-route:focus-visible{padding-left:19px;background:none}
.clarity-route:hover h3,.clarity-route:focus-visible h3{color:#ffae83}
.clarity-route-index{padding-top:9px;color:#f39361;font:800 11px Montserrat,Arial,sans-serif;letter-spacing:.11em}
.clarity-route h3{margin:0 0 19px;font-size:clamp(30px,3.5vw,48px);line-height:1.12;letter-spacing:-.05em}
.clarity-route p{max-width:740px;color:#b7bdbc;font-size:clamp(16px,1.47vw,19px);line-height:1.65}
.clarity-route-action{display:inline-flex;align-items:center;gap:17px;margin-top:29px;color:#ff9d69;font-size:15px;font-weight:800}
.clarity-route-action b{font-size:20px;font-weight:500;transition:transform .25s ease}
.clarity-route:hover .clarity-route-action b{transform:translate(4px,-4px)}
.clarity-work{padding:clamp(110px,11vw,170px) 0;background:#efece5;color:#181b1c}
.clarity-work .network-kicker{color:#b75022}
.clarity-work-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(50px,10vw,160px);align-items:start}
.clarity-work-intro>p{max-width:590px;color:#535a5b;font-size:19px;line-height:1.64}
.clarity-work .network-text-link{display:inline-block;margin-top:35px;color:#aa481d;border-color:#aa481d}
.clarity-work-list{margin:9px 0 0;padding:0;list-style:none;border-top:1px solid rgba(20,25,26,.2)}
.clarity-work-list li{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:28px 0 31px;border-bottom:1px solid rgba(20,25,26,.2)}
.clarity-work-list li>span{padding-top:5px;color:#b75022;font:800 11px Montserrat,Arial,sans-serif}
.clarity-work-list h3{margin:0 0 10px;font-size:clamp(21px,2vw,28px);line-height:1.2}
.clarity-work-list p{max-width:450px;color:#596061;font-size:16px;line-height:1.55}
.clarity-example{padding:clamp(110px,11vw,165px) 0}
.clarity-example-label{display:flex;justify-content:space-between;gap:20px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.2)}
.clarity-example-label>span:last-child{color:#8c9494;font-size:13px}
.clarity-example-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(45px,8vw,120px);padding-top:48px}
.clarity-example h2{max-width:650px;margin:0}
.clarity-example-body p{max-width:590px;margin:0 0 24px;color:#b4bbbb;font-size:18px;line-height:1.65}
.clarity-example-body a{display:inline-block;margin-top:10px;color:#ff9c68;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:5px}
.clarity-home .network-closing h2{font-size:clamp(48px,6vw,82px)}

/* Capital and company pages use open editorial lists, not inert tiles. */
.clarity-subpage .capital-hero h1,.clarity-subpage .company-hero h1{max-width:1000px;font-size:clamp(51px,6.8vw,90px);line-height:1.03}
.clarity-subpage .audience-head h2{font-size:clamp(38px,5vw,66px);line-height:1.08}
.clarity-subpage .capital-hero>p,.clarity-subpage .company-hero .lead{max-width:800px;font-size:20px;line-height:1.62}
.clarity-subpage .capital-statement{border-top-color:rgba(255,255,255,.17)}
.clarity-subpage .capital-statement p{font-size:clamp(20px,2vw,28px);line-height:1.5;font-weight:500}
.clarity-subpage .audience-steps{display:block;margin-top:57px;border-top:1px solid currentColor}
.clarity-subpage .audience-step,.clarity-subpage .audience-section.light .audience-step{display:grid;grid-template-columns:minmax(130px,.35fr) minmax(180px,.75fr) minmax(0,1fr);gap:26px;min-height:0;margin:0;padding:25px 0;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none}
.clarity-subpage .audience-section.light .audience-step{border-color:rgba(19,22,23,.2)}
.clarity-subpage .audience-section.dark .audience-step{border-color:rgba(255,255,255,.18)}
.clarity-subpage .audience-step h3{margin:0;font-size:clamp(21px,2vw,29px)}
.clarity-subpage .audience-step p{max-width:520px}
.clarity-subpage .audience-step span{padding-top:5px}
.clarity-subpage .company-pillar-grid{display:block;border-top:1px solid rgba(255,255,255,.2)}
.clarity-subpage .company-pillar{display:grid;grid-template-columns:minmax(140px,.32fr) minmax(200px,.7fr) minmax(0,1fr);gap:22px;min-height:0;margin:0;padding:26px 0;border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;background:none;transform:none}
.clarity-subpage .company-pillar:hover{border-color:rgba(255,255,255,.2);background:none;transform:none}
.clarity-subpage .company-pillar h3{margin:0}
.clarity-subpage .company-pillar p{max-width:550px;font-size:16px}
.clarity-subpage .company-pillar span{padding-top:5px}
.clarity-subpage .koda-stage-card{min-height:0}
.clarity-subpage .koda-stage-grid{display:block;border-top:1px solid rgba(255,255,255,.2)}
.clarity-subpage .koda-stage-card{display:grid;grid-template-columns:minmax(130px,.35fr) minmax(0,1fr) auto;gap:15px 25px;align-items:start;margin:0;padding:32px 0;border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;background:none;box-shadow:none}
.clarity-subpage .koda-stage-card:before{display:none}
.clarity-subpage .koda-stage-card:hover,.clarity-subpage .koda-stage-card:focus-visible{transform:none;border-color:rgba(255,255,255,.2);box-shadow:none}
.clarity-subpage .koda-stage-card h3{margin:0;max-width:650px}
.clarity-subpage .koda-stage-card p{grid-column:2;max-width:680px;margin:0}
.clarity-subpage .koda-stage-link{grid-column:3;grid-row:1/3;align-self:center;white-space:nowrap}
.clarity-subpage .collection.active{display:block;border-top:1px solid rgba(255,255,255,.19)}
.clarity-subpage .product.glass{display:grid;grid-template-columns:100px minmax(190px,.6fr) minmax(0,1fr) auto;gap:22px;align-items:center;min-height:0;margin:0;padding:29px 0;border:0;border-bottom:1px solid rgba(255,255,255,.19);border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
html[data-theme="dark"] body.clarity-subpage .product.glass{background:none;box-shadow:none}
.clarity-subpage .product.is-open,.clarity-subpage .product.is-open:hover{border-color:rgba(255,255,255,.19)!important;background:linear-gradient(90deg,rgba(255,132,73,.08),transparent 60%)!important;color:#f7f4ed!important;box-shadow:none!important}
.clarity-subpage .product.is-open h3{color:#f7f4ed!important}
.clarity-subpage .product.is-open p{color:#b5bbbb!important}
.clarity-subpage .product:hover,.clarity-subpage .product.is-open{background:linear-gradient(90deg,rgba(255,132,73,.07),transparent 55%);box-shadow:none}
.clarity-subpage .product-top{display:block}
.clarity-subpage .product-action{display:none}
.clarity-subpage .product h3{margin:0;font-size:clamp(21px,2vw,29px)}
.clarity-subpage .product p{max-width:500px}
.clarity-subpage .product .link{margin:0;white-space:nowrap}
.clarity-subpage .service-detail{margin:20px 0 38px}
.clarity-subpage .capital-loop{display:none}
.clarity-subpage .seo-guides{margin-top:70px}
.clarity-subpage .guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.clarity-subpage .guide-link{min-height:0;margin:0;padding:23px 0;border:0;border-top:1px solid rgba(255,255,255,.19);border-radius:0;background:none;box-shadow:none}
.clarity-subpage .guide-link:hover{background:none;color:#ff9c68}
.clarity-about .hero h1{max-width:960px;font-size:clamp(54px,7vw,96px);line-height:1.03}
.clarity-about .hero .lead{max-width:850px}
.clarity-about .about-structure{padding:clamp(100px,10vw,150px) 0}
.clarity-about .structure-intro{align-items:start}
.clarity-about .structure-intro h2{font-size:clamp(43px,5vw,70px);line-height:1.08}
.clarity-about .structure-intro>p{max-width:580px;padding:0;font-size:clamp(18px,1.7vw,23px)}
.clarity-about .leadership-intro h2{font-size:clamp(39px,4.5vw,65px)}

@media(max-width:850px){
  .clarity-work-layout,.clarity-example-body{grid-template-columns:1fr;gap:43px}
  .clarity-about .structure-intro{grid-template-columns:1fr;gap:25px}
  .clarity-route{grid-template-columns:1fr;gap:15px}
  .clarity-subpage .audience-step,.clarity-subpage .audience-section.light .audience-step,.clarity-subpage .company-pillar{grid-template-columns:80px 1fr;gap:10px 20px}
  .clarity-subpage .audience-step p,.clarity-subpage .company-pillar p{grid-column:2}
  .clarity-subpage .koda-stage-card{grid-template-columns:75px 1fr}
  .clarity-subpage .koda-stage-num{grid-column:1/3}
  .clarity-subpage .koda-stage-card h3,.clarity-subpage .koda-stage-card p,.clarity-subpage .koda-stage-link{grid-column:2}
  .clarity-subpage .koda-stage-link{grid-row:auto;justify-self:start}
  .clarity-subpage .product.glass{grid-template-columns:60px 1fr;gap:12px 20px}
  .clarity-subpage .product p,.clarity-subpage .product .link{grid-column:2}
}
@media(max-width:760px){
  .clarity-home .clarity-hero.shell{min-height:100svh;margin-top:-68px;padding:138px 25px 80px}
  .clarity-home .clarity-hero h1{font-size:clamp(47px,10.3vw,67px)}
  .clarity-home .clarity-hero .lead{font-size:17px}
  .clarity-audiences,.clarity-work,.clarity-example{padding-top:95px;padding-bottom:100px}
  .clarity-heading h2,.clarity-work h2,.clarity-example h2{font-size:clamp(38px,9vw,54px)}
  .clarity-route{padding:39px 0}
  .clarity-route:hover{padding-left:0}
  .clarity-route h3{font-size:30px}
  .clarity-route p,.clarity-example-body p{font-size:16px}
  .clarity-work-intro>p{font-size:17px}
  .clarity-example-label{align-items:start;flex-direction:column;gap:10px}
  .clarity-subpage .capital-hero>p,.clarity-subpage .company-hero .lead{font-size:17px}
  .clarity-subpage .audience-step,.clarity-subpage .audience-section.light .audience-step,.clarity-subpage .company-pillar{grid-template-columns:1fr;gap:10px;padding:25px 0}
  .clarity-subpage .audience-step p,.clarity-subpage .company-pillar p{grid-column:1}
  .clarity-subpage .koda-stage-card{grid-template-columns:1fr;gap:12px}
  .clarity-subpage .koda-stage-num,.clarity-subpage .koda-stage-card h3,.clarity-subpage .koda-stage-card p,.clarity-subpage .koda-stage-link{grid-column:1}
  .clarity-subpage .product.glass{grid-template-columns:1fr;gap:11px;padding:25px 0}
  .clarity-subpage .product p,.clarity-subpage .product .link{grid-column:1}
  .clarity-subpage .guide-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.clarity-route,.clarity-route-action b{transition:none}.clarity-home .clarity-hero .network-hero-image{animation:none;will-change:auto}}

/* The two audience entrances have their own full-bleed visual language. */
.clarity-subpage .capital-hero.shell,.clarity-subpage .company-hero.shell{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;max-width:none;min-height:min(800px,100svh);margin:-68px 0 0;padding:clamp(150px,13vw,210px) clamp(28px,7vw,120px) clamp(90px,9vw,140px);overflow:hidden;border:0;border-radius:0;box-shadow:none;background:#060809}
.clarity-subpage .capital-hero.shell>* ,.clarity-subpage .company-hero.shell>*{position:relative;z-index:2}
.clarity-subpage .capital-hero.shell:before,.clarity-subpage .company-hero.shell:before{content:"";position:absolute;z-index:0;inset:-3%;background-repeat:no-repeat;background-size:cover;background-position:center;animation:koda-entrance-drift 23s ease-in-out infinite alternate;pointer-events:none}
.clarity-subpage .capital-hero.shell:after,.clarity-subpage .company-hero.shell:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none}
.clarity-subpage .capital-hero.shell{background:radial-gradient(circle at 79% 48%,rgba(144,64,31,.14),transparent 32%),#050708}
.clarity-subpage .capital-hero.shell:before{background-image:url("koda-capital-orbits.svg");background-position:right center}
.clarity-subpage .capital-hero.shell:after{background:linear-gradient(90deg,#050708 2%,rgba(5,7,8,.96) 28%,rgba(5,7,8,.62) 52%,rgba(5,7,8,.08) 100%)}
.clarity-subpage .capital-hero h1{max-width:880px;font-size:clamp(54px,5.5vw,80px);text-wrap:balance}
.clarity-subpage .capital-hero>p{max-width:700px}
.clarity-subpage .company-hero.shell{background:radial-gradient(circle at 84% 52%,rgba(131,76,45,.16),transparent 34%),#060809}
.clarity-subpage .company-hero.shell:before{background-image:url("koda-company-structure.svg");background-position:right center}
.clarity-subpage .company-hero.shell:after{background:linear-gradient(90deg,#060809 2%,rgba(6,8,9,.96) 30%,rgba(6,8,9,.67) 56%,rgba(6,8,9,.03) 100%)}
.clarity-subpage .company-hero h1{max-width:850px;text-wrap:balance}
.clarity-subpage .company-hero .lead{max-width:700px}
@keyframes koda-entrance-drift{from{transform:scale(1) translateX(0)}to{transform:scale(1.045) translateX(-.6%)}}
@media(max-width:760px){
  .clarity-subpage .capital-hero.shell,.clarity-subpage .company-hero.shell{min-height:100svh;margin-top:-66px;padding:135px 18px 88px}
  .clarity-subpage .capital-hero.shell:before,.clarity-subpage .company-hero.shell:before{inset:0;background-size:auto 100%;background-position:58% center;opacity:.62}
  .clarity-subpage .company-hero.shell:before{background-position:62% center}
  .clarity-subpage .capital-hero.shell:after,.clarity-subpage .company-hero.shell:after{background:linear-gradient(90deg,rgba(5,7,8,.94),rgba(5,7,8,.69)),linear-gradient(0deg,#050708,transparent 35%)}
  .clarity-subpage .capital-hero h1,.clarity-subpage .company-hero h1{max-width:100%;text-wrap:initial}
  .clarity-subpage .capital-hero h1{font-size:clamp(44px,10vw,58px)}
}
@media(prefers-reduced-motion:reduce){.clarity-subpage .capital-hero.shell:before,.clarity-subpage .company-hero.shell:before{animation:none}}

/* A soft cursor light follows the routes that actually open another page. */
.clarity-route,.clarity-subpage .koda-stage-card{position:relative;isolation:isolate;--light-x:72%;--light-y:40%}
.clarity-route:before,.clarity-subpage .koda-stage-card:after{content:"";position:absolute;z-index:0;inset:0;display:block;border-radius:0;opacity:0;background:radial-gradient(360px circle at var(--light-x) var(--light-y),rgba(255,132,73,.21),rgba(255,132,73,.055) 34%,transparent 66%);pointer-events:none;transition:opacity .28s ease}
.clarity-route>* ,.clarity-subpage .koda-stage-card>*{position:relative;z-index:1}
.clarity-route:hover:before,.clarity-route:focus-visible:before,.clarity-subpage .koda-stage-card:hover:after,.clarity-subpage .koda-stage-card:focus-visible:after{opacity:1}
@media(hover:none),(pointer:coarse){.clarity-route.is-lit:before,.clarity-subpage .koda-stage-card.is-lit:after{opacity:.8}.clarity-route:before,.clarity-subpage .koda-stage-card:after{background:radial-gradient(230px circle at var(--light-x) var(--light-y),rgba(255,132,73,.17),rgba(255,132,73,.04) 32%,transparent 65%)}}
@media(max-width:760px){.clarity-route:before,.clarity-subpage .koda-stage-card:after{background:radial-gradient(230px circle at var(--light-x) var(--light-y),rgba(255,132,73,.17),rgba(255,132,73,.04) 32%,transparent 65%)}}

/* A quiet travelling highlight ties the open editorial lists together. */
.clarity-routes,.clarity-subpage .koda-stage-grid,.clarity-subpage .company-pillar-grid,.clarity-subpage .audience-steps{position:relative}
.clarity-routes:after,.clarity-subpage .koda-stage-grid:after,.clarity-subpage .company-pillar-grid:after,.clarity-subpage .audience-steps:after{content:"";position:absolute;z-index:1;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--network-orange),transparent) no-repeat;background-size:130px 2px;background-position:-20% 0;pointer-events:none;animation:koda-line-travel 11s linear infinite}
@keyframes koda-line-travel{to{background-position:120% 0}}
.clarity-subpage .capital-hero.shell:before{animation:koda-orbit-roll 18s ease-in-out infinite alternate}
.clarity-subpage .company-hero.shell:before{animation:koda-structure-drift 16s ease-in-out infinite alternate}
@keyframes koda-orbit-roll{from{transform:scale(1.03) rotate(-5deg)}to{transform:scale(1.06) rotate(8deg)}}
@keyframes koda-structure-drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.05) translate(-1%,-1.2%)}}
@media(prefers-reduced-motion:reduce){.clarity-route:before,.clarity-subpage .koda-stage-card:after{transition:none}.clarity-routes:after,.clarity-subpage .koda-stage-grid:after,.clarity-subpage .company-pillar-grid:after,.clarity-subpage .audience-steps:after{animation:none;display:none}.clarity-subpage .capital-hero.shell:before,.clarity-subpage .company-hero.shell:before{animation:none}}