:root {
    --green: #02563D;
    --green-2: #009F78;
    --orange: #E56046;
    --yellow: #F8D772;
    --gold: #D6A24A;
    --cream: #F8F6F0;
    --white: #FFFFFF;
    --ink: #272727;
    --line: rgba(2, 86, 61, .14);
    --line-strong: rgba(2, 86, 61, .28);
    --maxw: 1200px;
}

body {
    font-family: "Public Sans", system-ui, sans-serif;
    color: var(--ink);
    background: var(--cream);
}

h1,
h2,
h3,
h4,
.clash {
    font-family: "Clash Grotesk", "Public Sans", sans-serif;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.01em
}

img {
    max-width: 100%;
    display: block
}

span {
    font-weight: 600;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px)
}

.eyebrow {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--green-2)
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    display: inline-block
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: "Public Sans";
    font-weight: 600;
    font-size: .95rem;
    padding: .85rem 1.5rem;
    border-radius: 2px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform .18s ease, background .18s ease, color .18s ease;
    line-height: 1;
}

.btn:active {
    transform: translateY(1px)
}

.btn-primary {
    background: var(--orange);
    color: #fff
}

.btn-primary:hover {
    background: #c9492f
}

.btn-ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--green)
}

.btn-ghost:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green)
}

.btn-light {
    background: #fff;
    color: var(--green)
}

.btn-light:hover {
    background: var(--yellow)
}

.btn-onGreen {
    background: var(--yellow);
    color: var(--green)
}

.btn-onGreen:hover {
    background: #fff
}

/* header */
header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(248, 246, 240, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line)
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 74px;
    gap: 1rem
}

.brand-logo {
    height: 58px;
    width: auto
}

.navlinks {
    display: flex;
    gap: 1.5rem;
    align-items: center
}

.navlinks a {
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
    opacity: .8;
    transition: opacity .15s
}

.navlinks a:hover {
    opacity: 1;
    color: var(--green)
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 1rem
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 6px
}

.hamburger span {
    width: 24px;
    height: 3px;
    background: var(--green);
    display: block;
    transition: .2s;
    border-radius: 4px;
}

.mobile-menu {
    display: none;
    flex-direction: column;
    padding: 1rem clamp(20px, 5vw, 56px) 1.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--cream)
}

.mobile-menu a {
    padding: .7rem 0;
    font-weight: 500;
    border-bottom: 1px solid var(--line)
}

/* hero */
.hero {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem);
    overflow: hidden
}

.hero-watermark {
    position: absolute;
    right: 13%;
    top: 4%;
    width: min(17vw, 170px);
    height: auto;
    opacity: .045;
    z-index: 0;
    pointer-events: none;
}

.hero-watermark path {
    stroke: #02563D
}

.grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 80% at 20% 40%, #000 20%, transparent 75%);
    opacity: .6
}

.hero-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center
}

.hero-eyebrow {
    margin-bottom: 1.1rem;
    color: var(--green-2)
}

.hero-pills {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1.3rem
}

.hpill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--green);
    background: #fff;
    border: 1px solid var(--line);
    padding: .5rem .9rem;
    border-radius: 100px;
    box-shadow: 0 1px 2px rgba(2, 86, 61, .04)
}

.hpill svg {
    width: 15px;
    height: 15px;
    color: var(--green-2)
}

.hero-title {
    margin-bottom: .7rem;
    line-height: .92
}

.hero-title .ht-1 {
    display: block;
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    color: var(--green);
    font-weight: 700;
}

.hero-title .ht-2 {
    display: block;
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    color: var(--ink);
    letter-spacing: -.01em;
    font-weight: 700;
}

.hero-title .ht-2::first-letter {
    color: var(--green)
}

.hero .descriptor {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 1.4rem;
    max-width: 32ch
}

.editorial-line {
    font-family: "Clash Grotesk";
    font-weight: 600;
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    line-height: 1.08;
    color: var(--ink);
    margin-bottom: 1.4rem;
    border-left: 3px solid var(--orange);
    padding-left: 1.1rem
}

.editorial-line span {
    color: var(--green-2)
}

.hero .support {
    max-width: 48ch;
    font-size: .98rem;
    opacity: .82;
    margin-bottom: 1.6rem
}

.hero-ctas {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem
}

.hero-meta {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line)
}

.hero-meta .hm {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--green);
    opacity: .9
}

.hero-meta .hm svg {
    width: 16px;
    height: 16px;
    color: var(--green-2)
}

/* hero right: vista + cards */
.hero-right {
    position: relative;
    aspect-ratio: 1/.92;
    min-height: 440px
}

.hero-right-img {
    position: absolute;
    left: -6.6667%;
    top: -7.2464%;
    width: 113.3333%;
    height: 114.4928%;
    display: block;
    pointer-events: none
}

.hero-right-hotspot {
    position: absolute;
    left: -1.0667%;
    top: 45.616%;
    width: 50.133%;
    height: 6.521%;
    display: block;
    border-radius: 2px
}

.hero-right-hotspot:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px
}

/* brand strip under hero */
.brand-strip {
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.brand-strip img {
    width: 20px;
    height: 20px;
}

.bs-in {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: .9rem;
    padding-bottom: .9rem;
    flex-wrap: wrap
}

.bs-logo {
    height: 26px;
    width: auto
}

.bs-logo-txt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "Clash Grotesk";
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--green)
}

.bs-logo-txt span {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--green);
    line-height: 1;
}

.bs-logo-txt svg {
    width: 26px;
    height: 26px
}

.bs-words {
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 600;
    opacity: .8;
    border-left: 1px solid var(--line);
    padding-left: 1.5rem
}

.bs-tag {
    margin-left: auto;
    font-family: "Clash Grotesk";
    font-size: .95rem;
    color: var(--green);
    font-weight: 500;
}

.plus {
    position: absolute;
    color: var(--line-strong);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    z-index: 3
}

/* credibility band */
.cred {
    background: var(--green);
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

.cred .wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .14);
    padding: 0;
    max-width: none
}

.cred-item {
    background: var(--green);
    padding: clamp(1.4rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
    text-align: center
}

.cred-item .cn {
    font-family: "Clash Grotesk";
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    color: var(--yellow);
    line-height: 1
}

.cred-item .cl {
    font-size: .85rem;
    opacity: .82;
    margin-top: .5rem;
    line-height: 1.3
}

.cred-strip {
    background: var(--ink);
    color: rgba(255, 255, 255, .85);
    text-align: center;
    font-size: .82rem;
    letter-spacing: .04em;
    padding: .7rem 1rem
}

.cred-strip b {
    color: var(--yellow);
    font-weight: 600
}

/* section base */
section {
    position: relative
}

.sec {
    padding: clamp(2.6rem, 5vw, 4rem) 0
}

.sec-head {
    max-width: 60ch;
    margin-bottom: 2rem
}

.sec-head h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    color: var(--green);
    margin: .7rem 0 .8rem
}

.sec-head p {
    font-size: 1.05rem;
    opacity: .82;
    max-width: 52ch
}

.hl-2 {
    display: block
}

.hl-2 em {
    font-style: normal;
    color: var(--orange)
}

.q-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line)
}

.q-card {
    background: var(--cream);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.q-card .qn {
    font-family: "Clash Grotesk";
    font-size: .8rem;
    color: var(--orange);
    letter-spacing: .1em
}

.q-card h3 {
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    color: var(--green);
    max-width: 20ch;
    margin-top: 1.5rem
}

.why-close {
    margin-top: 2.4rem;
    font-size: 1.1rem;
    max-width: 60ch;
    opacity: .85
}

.mini-cta {
    margin-top: 1.4rem
}

.get-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem
}

.get-card {
    background: #fff;
    border: 1px solid var(--line);
    padding: 1.8rem;
    border-radius: 3px;
    position: relative
}

.get-card .gic {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(0, 159, 120, .1);
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    color: var(--green)
}

.get-card .gic svg {
    width: 22px;
    height: 22px
}

.get-card .idx {
    font-family: "Clash Grotesk";
    font-size: .8rem;
    color: var(--green-2);
    letter-spacing: .1em;
    margin-bottom: 1.2rem;
    display: block
}

.get-card h3 {
    font-size: 1.25rem;
    color: var(--green);
    margin-bottom: .6rem
}

.get-card p {
    font-size: .95rem;
    opacity: .82
}

.research {
    background: var(--green);
    color: #fff;
    position: relative;
    overflow: hidden
}

.research .grid-bg {
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    mask-image: none;
    opacity: 1
}

.research .wrap {
    position: relative;
    z-index: 2
}

.research .eyebrow {
    color: var(--yellow)
}

.research h2 {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin: 1rem 0 .8rem
}

.research .subhead {
    font-size: 1.2rem;
    color: var(--yellow);
    font-weight: 500;
    max-width: 50ch;
    margin-bottom: 1rem
}

.research .rcopy {
    max-width: 56ch;
    opacity: .85;
    margin-bottom: 2.6rem
}

.rt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .14);
    margin-bottom: 2.4rem
}

.rt {
    background: var(--green);
    padding: 1.7rem;
    position: relative
}

.rt .rn {
    font-family: "Clash Grotesk";
    color: var(--yellow);
    font-size: .78rem;
    letter-spacing: .1em
}

.rt h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 1.1rem 0 .5rem
}

.rt p {
    font-size: .9rem;
    opacity: .8;
    color: #fff;
}

.research-cta {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap
}

.research-note {
    font-size: .85rem;
    opacity: .7
}

/* campaign pull-quote bands (India HR Tech Survey 2026) */
.pullquote {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem) 0
}

.pq-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px)
}

.pq-eyebrow {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--green-2);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem
}

.pq-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor
}

.pq-q {
    font-family: "Clash Grotesk";
    font-weight: 600;
    font-size: clamp(1.5rem, 3.6vw, 2.6rem);
    line-height: 1.08;
    color: var(--green);
    max-width: 20ch
}

.pq-q em {
    font-style: normal;
    color: var(--orange)
}

.pq-sub {
    margin-top: .9rem;
    font-size: 1rem;
    opacity: .72;
    max-width: 44ch
}

.pq-tag {
    margin-top: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap
}

.pq-tag .rp {
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green-2);
    font-weight: 600
}

.pullquote.on-green {
    background: var(--green)
}

.pullquote.on-green .pq-eyebrow {
    color: var(--yellow)
}

.pullquote.on-green .pq-q {
    color: #fff
}

.pullquote.on-green .pq-q em {
    color: var(--yellow)
}

.pullquote.on-green .pq-sub {
    color: rgba(255, 255, 255, .82)
}

.pullquote.on-green .pq-tag .rp {
    color: var(--yellow)
}

.pq-line {
    border-left: 3px solid var(--orange);
    padding-left: 1.2rem
}

/* merged index block inside research */
.index-block {
    margin-top: 2.2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .16)
}

.index-block .eyebrow {
    color: var(--yellow)
}

.index-h {
    font-family: "Clash Grotesk";
    font-weight: 600;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin: .9rem 0 .6rem
}

.index-p {
    max-width: 52ch;
    opacity: .85;
    margin-bottom: 1.8rem
}

.mat-flow {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 3px;
    overflow: hidden
}

.mat-step {
    flex: 1;
    min-width: 150px;
    padding: 1.2rem 1.1rem;
    border-right: 1px solid rgba(255, 255, 255, .16)
}

.mat-step:last-child {
    border-right: 0
}

.mat-step .ms-n {
    font-family: "Clash Grotesk";
    color: var(--yellow);
    font-size: .78rem
}

.mat-step h4 {
    color: #fff;
    font-size: 1rem;
    margin-top: .6rem;
    line-height: 1.15
}

.index-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin-top: 1.8rem
}

.index-score {
    display: flex;
    align-items: baseline;
    gap: .3rem
}

.index-score .big {
    font-family: "Clash Grotesk";
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 4rem);
    color: var(--yellow);
    line-height: .8
}

.index-score .slash {
    font-family: "Clash Grotesk";
    font-size: 1.6rem;
    color: rgba(255, 255, 255, .6)
}


.aud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line)
}

.aud {
    background: var(--cream);
    padding: 1.5rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500
}

.aud .dot {
    width: 8px;
    height: 8px;
    background: var(--orange);
    flex-shrink: 0
}

.aud-ic {
    width: 22px;
    height: 22px;
    color: var(--green-2);
    flex-shrink: 0
}

.aud-ic svg {
    width: 22px;
    height: 22px
}

.aud-statement {
    margin-top: 1.8rem;
    font-family: "Clash Grotesk";
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    color: var(--green);
    text-align: center;
    padding: 1.4rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-weight: 500;
}

.agenda {
    background: var(--cream)
}

.agenda-tabs {
    display: flex;
    gap: .6rem;
    margin-bottom: 2rem;
    flex-wrap: wrap
}

.atab {
    padding: 1rem 1.6rem;
    border: 1px solid var(--line-strong);
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: 2px;
    transition: .2s;
    flex: 1;
    min-width: 240px
}

.atab .day {
    font-family: "Clash Grotesk";
    font-size: .75rem;
    letter-spacing: .1em;
    color: var(--orange)
}

.atab .tt {
    font-family: "Clash Grotesk";
    font-size: 1.15rem;
    color: var(--green);
    margin-top: .3rem;
    display: block
}

.atab .win {
    font-size: .8rem;
    opacity: .65;
    margin-top: .3rem;
    display: block
}

.atab.active {
    background: var(--green);
    border-color: var(--green)
}

.atab.active .day {
    color: var(--yellow)
}

.atab.active .tt,
.atab.active .win {
    color: #fff
}

.day-panel {
    display: none
}

.day-panel.active {
    display: block;
    animation: fade .3s ease
}

@keyframes fade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.session {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1.5rem;
    padding: 1.3rem 0;
    border-top: 1px solid var(--line);
    align-items: start
}

.session:last-child {
    border-bottom: 1px solid var(--line)
}

.session .time {
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    color: var(--green);
    font-weight: 600
}

.session .kind {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 600;
    margin-bottom: .35rem
}

.session h4 {
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.2
}

.session .sq {
    font-size: .85rem;
    opacity: .6;
    margin-top: .35rem;
    max-width: 64ch;
    font-style: italic
}

.sp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem
}

.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--line);
    padding: .25rem .6rem .25rem .28rem;
    border-radius: 100px
}

.sp-chip-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green);
    color: var(--yellow);
    font-family: "Clash Grotesk";
    font-weight: 600;
    font-size: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sp-chip em {
    font-style: normal;
    color: var(--green-2);
    font-weight: 500
}

.studio .sp-chips {
    margin-top: .7rem
}

.studio .sp-chip {
    background: #fff
}

.studio-wrap {
    padding: 1.3rem 0;
    border-top: 1px dashed var(--line-strong)
}

.studio-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap
}

.studio-head .time {
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    color: var(--green);
    font-weight: 600
}

.studio-head .kind {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 600
}

.studio .ss {
    display: block;
    font-size: .74rem;
    opacity: .6;
    margin-top: .5rem;
    line-height: 1.3
}

.session.brk {
    opacity: .5
}

.session.brk h4 {
    font-weight: 400;
    font-style: italic;
    font-family: "Public Sans"
}

.studios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.studio {
    background: #fff;
    border: 1px solid var(--line);
    padding: 1.2rem;
    border-radius: 3px
}

.studio .sl {
    font-size: .72rem;
    letter-spacing: .08em;
    color: var(--green-2);
    font-weight: 700;
    text-transform: uppercase
}

.studio h5 {
    font-family: "Clash Grotesk";
    color: var(--green);
    font-size: 1rem;
    margin-top: .6rem;
    line-height: 1.2;
    font-weight: 700;
}

.agenda-cta {
    text-align: center;
    margin-top: 1.8rem
}

.spk-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line)
}

.spk {
    background: #fff;
    padding: 1.4rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    transition: background .2s
}

.spk:hover {
    background: var(--cream)
}

.spk-av {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--green);
    color: var(--yellow);
    font-family: "Clash Grotesk";
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
    flex-shrink: 0
}

.spk-n {
    font-family: "Clash Grotesk";
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1.1
}

.spk-o {
    font-size: .82rem;
    color: var(--green-2);
    font-weight: 500;
    margin-top: .2rem
}

.spk-note {
    text-align: center;
    margin-top: 1.4rem;
    font-size: .92rem;
    opacity: .7
}

.spk-note strong {
    color: var(--green)
}

.spk-cta {
    text-align: center;
    margin-top: 1.2rem
}

.spk-strip {
    background: var(--green);
    color: #fff;
    border-radius: 3px;
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem
}

.spk-strip span {
    font-size: .95rem
}

.spk-strip b {
    color: var(--yellow)
}

/* sticky register bar */
.sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--green);
    color: #fff;
    transform: translateY(110%);
    transition: transform .3s ease;
    box-shadow: 0 -6px 24px -12px rgba(0, 0, 0, .4)
}

.sticky-bar.show {
    transform: none
}

.sticky-bar .sb-in {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: .8rem clamp(20px, 5vw, 56px);
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.sticky-bar .sb-txt {
    font-size: .92rem;
    line-height: 1.2
}

.sticky-bar .sb-txt b {
    font-family: "Clash Grotesk";
    color: var(--yellow);
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.sticky-bar .sb-txt small {
    opacity: .8
}

@media(max-width:560px) {
    .sticky-bar .sb-in {
        padding: .7rem 1rem
    }
}

.spk-empty {
    border: 1px dashed var(--line-strong);
    border-radius: 3px;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    background: #fff;
    position: relative;
    overflow: hidden
}

.spk-empty .grid-bg {
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
    opacity: .5
}

.spk-empty h3 {
    position: relative;
    font-family: "Clash Grotesk";
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--green)
}

.spk-empty p {
    position: relative;
    opacity: .7;
    margin-top: .7rem;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto
}

.spk-empty .btn {
    position: relative;
    margin-top: 1.6rem
}

.buyer {
    background: var(--yellow);
    position: relative;
    overflow: hidden
}

.buyer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(2, 86, 61, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 86, 61, .06) 1px, transparent 1px);
    background-size: 56px 56px
}

.buyer .wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center
}

.buyer .eyebrow {
    color: var(--green)
}

.buyer h2 {
    color: var(--green);
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin: 1rem 0 1rem
}

.buyer p {
    color: var(--ink);
    max-width: 46ch;
    margin-bottom: 1.8rem
}

.buyer .support {
    font-family: "Clash Grotesk";
    font-size: 1.15rem;
    color: var(--green);
    margin-top: 1.4rem;
    font-weight: 500;
}

.buyer-benefits {
    display: grid;
    gap: 1px;
    background: rgba(2, 86, 61, .15);
    border: 1px solid rgba(2, 86, 61, .15)
}

.bb {
    background: var(--yellow);
    padding: 1.1rem 1.3rem;
    display: flex;
    gap: .8rem;
    align-items: center;
    font-weight: 500;
    color: var(--green)
}

.bb svg {
    flex-shrink: 0
}

.land-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line)
}

.land {
    background: var(--white);
    padding: 1.5rem 1.3rem;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background .2s
}

.land:hover {
    background: var(--cream)
}

.land .lc {
    font-variant-numeric: tabular-nums;
    font-size: .7rem;
    color: var(--green-2);
    letter-spacing: .08em
}

.land h4 {
    font-size: 1.05rem;
    color: var(--green);
    line-height: 1.15
}

.land-copy {
    text-align: center;
    margin-top: 1.6rem;
    font-family: "Clash Grotesk";
    font-size: 1.2rem;
    color: var(--green);
    font-weight: 500;
}

.teaser {
    background: var(--green);
    color: #fff;
    position: relative;
    overflow: hidden
}

.teaser .wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center
}

.teaser .eyebrow {
    color: var(--yellow)
}

.teaser h2 {
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin: 1rem 0 1rem
}

.teaser p {
    opacity: .85;
    max-width: 44ch;
    margin-bottom: 1.8rem
}

.teaser-map {
    aspect-ratio: 4/3;
    border: 1px solid rgba(255, 255, 255, .2);
    position: relative;
    background: rgba(255, 255, 255, .03)
}

.teaser-map .tg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 36px 36px
}

.teaser-map .blob {
    position: absolute;
    border: 1px solid rgba(248, 215, 114, .4)
}

.tb1 {
    left: 14%;
    top: 18%;
    width: 30%;
    height: 34%;
    background: rgba(0, 159, 120, .2)
}

.tb2 {
    left: 52%;
    top: 30%;
    width: 28%;
    height: 30%;
    background: rgba(229, 96, 70, .22)
}

.tb3 {
    left: 26%;
    top: 56%;
    width: 34%;
    height: 24%;
    background: rgba(248, 215, 114, .14)
}

.teaser-map .pin {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--yellow);
    border-radius: 50%
}

.tp1 {
    left: 28%;
    top: 34%
}

.tp2 {
    left: 64%;
    top: 44%;
    background: var(--orange)
}

.tp3 {
    left: 42%;
    top: 66%
}

.partners {
    background: var(--cream)
}

.plogo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 2.4rem
}

.plogo {
    background: #fff;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--line-strong);
    font-family: "Clash Grotesk";
    font-size: .85rem;
    letter-spacing: .05em
}

.partner-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

.commune {
    background: var(--white)
}

.commune .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center
}

.commune h2 {
    color: var(--green);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 1rem 0 1rem
}

.commune p {
    opacity: .82;
    max-width: 42ch;
    margin-bottom: 1.6rem
}

.commune-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line)
}

.cstat {
    background: var(--cream);
    padding: 1.6rem
}

.cstat .num {
    font-family: "Clash Grotesk";
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--green)
}

.cstat .lbl {
    font-size: .85rem;
    opacity: .7;
    margin-top: .3rem
}

.endorse {
    background: var(--white);
    text-align: center;
    border-top: 1px solid var(--line)
}

.endorse h2 {
    color: var(--green);
    font-size: clamp(1.6rem, 3.5vw, 2.3rem)
}

.endorse p {
    max-width: 52ch;
    margin: 1.2rem auto;
    opacity: .82
}

.endorse .ri {
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--green-2);
    font-weight: 600;
    margin-top: 1.4rem
}

.endorse .hlogo {
    font-family: "Clash Grotesk";
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--green);
    margin-top: 1.4rem
}

.final {
    background: var(--green);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden
}

.final .grid-bg {
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 70% 90% at 50% 40%, #000, transparent 80%);
    opacity: 1
}

.final .wrap {
    position: relative;
    z-index: 2
}

.final-logo {
    height: clamp(70px, 10vw, 110px);
    width: auto;
    margin: 0 auto 1.8rem;
    display: block
}

.final .final-logo {
    height: clamp(70px, 10vw, 110px);
    filter: brightness(0) invert(1);
}

.final h2 {
    font-size: clamp(2.2rem, 6vw, 4rem);
    color: #fff;
    line-height: 1.02
}

.final h2 span {
    color: var(--yellow);
    font-weight: 700;
}

.final .subhead {
    font-size: 1.2rem;
    opacity: .9;
    margin: 1.4rem 0 .4rem;
    color: #fff;
}

.final .when {
    font-size: .9rem;
    letter-spacing: .1em;
    color: var(--yellow);
    margin-bottom: 2rem
}

.final-ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap
}

.final .micro {
    margin-top: 1.2rem;
    font-size: .85rem;
    opacity: .7;
    color: #fff;
}

footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .8);
    padding: 3.5rem 0 2rem
}

.foot-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.foot-logo {
    height: 70px;
    width: auto;
    margin-bottom: 1rem
}

footer .foot-logo {
    filter: brightness(0) invert(1);
}

.foot-brand .by {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .6
}

.foot-brand p {
    margin-top: 1rem;
    max-width: 38ch;
    font-size: .9rem;
    opacity: .7;
    color: #fff;
}

.foot-col h5 {
    font-family: "Clash Grotesk";
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 1rem
}

.foot-col a,
.foot-col p {
    display: block;
    font-size: .9rem;
    opacity: .75;
    padding: .3rem 0;
    color: #fff;
}

.foot-col a:hover {
    opacity: 1;
    color: #fff
}

.foot-col .foot-when {
    font-family: "Clash Grotesk";
    color: #fff;
    opacity: 1;
    font-weight: 500;
}

.foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.6rem;
    font-size: .82rem;
    opacity: .6
}

.foot-bottom a {
    padding: 0 .6rem;
    color: #fff;
}

.cookies-text-form {
    font-size: 10px;
}

.radio-combo {
    margin-bottom: 20px;
}

input,
select,
.floating-form-input-group-text {
    border-radius: 0px !important;
}

.floating-form-input:not(:placeholder-shown).floating-form-input:not(:focus)~.floating-form-label {
    font-size: 14px;
}

.form-alert-msg-mtop {
    margin-top: 20px;
}

.atlas-form .modal h3,
.alert-msg h2 {
    font-family: 'Public Sans';
    font-size: 20px;
}


/* modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 86, 61, .55);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem
}

.modal-overlay.open {
    display: flex
}

.atlas-form .modal {
    background: var(--cream);
    max-width: 510px;
    width: 100%;
    border-radius: 4px;
    padding: clamp(1.8rem, 4vw, 2rem);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    display: unset;
    height: auto;
}

.atlas-form .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: 0;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--green);
    line-height: 1
}

.atlas-form .modal .eyebrow {
    margin-bottom: .8rem
}

.atlas-form .modal-logo {
    height: 44px;
    width: auto;
    margin-bottom: 1rem;
    display: block
}

.atlas-form .modal h3 {
    font-family: "Clash Grotesk";
    font-size: 1.6rem;
    color: var(--green);
    margin-bottom: .4rem
}

.atlas-form .modal .msub {
    opacity: .75;
    font-size: .92rem;
    margin-bottom: 1.5rem
}

.field {
    margin-bottom: 1rem
}

.field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: var(--green)
}

.field input,
.field select {
    width: 100%;
    padding: .8rem;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    font-family: inherit;
    font-size: .95rem;
    background: #fff
}

.field input:focus,
.field select:focus {
    outline: 2px solid var(--green-2);
    outline-offset: 1px
}

.atlas-form .modal .btn {
    width: 100%;
    margin-top: .6rem
}

.atlas-form .modal .consent {
    font-size: .75rem;
    opacity: .6;
    margin-top: 1rem
}

.atlas-form .modal .consent a {
    color: var(--green);
    text-decoration: underline
}

.form-radio-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #999;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}

.form-radio-input:checked::after {
    content: "✓";
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -45%);
    font-size: 14px;
    font-weight: 700;
}

.form-radio-input:checked[type=radio] {
    --bs-form-check-bg-image: unset !important;
}

.form-radio-input:focus {
    box-shadow: unset;
}

.form-radio-input:checked {
    color: #fff;
}

/* ---- Extra-large desktop (≥1440px): widen container, scale hero ---- */
@media(min-width:1440px) {

    .hero h1,
    .hero-title {
        --_scale: 1
    }

    .final h2 {
        font-size: clamp(2.6rem, 5vw, 4.4rem)
    }
}

/* ---- Small laptop / large tablet landscape (≤1024px) ---- */
@media(max-width:1024px) {
    .get-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .spk-grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .land-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .rt-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .hero-title .ht-1,
    .hero-title .ht-2 {
        font-size: clamp(2.2rem, 5vw, 3.4rem)
    }
}

/* ---- Tablet & below (≤960px): single-column hero, hamburger nav ---- */
@media(max-width:960px) {
    .navlinks {
        display: none
    }

    .hamburger {
        display: flex
    }

    .hero-wrap {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }

    .hero-right {
        order: -1;
        max-width: 460px;
        margin: 0 auto;
        width: 100%
    }

    .hero-watermark {
        width: min(38vw, 300px);
        right: 0;
        top: -4%
    }

    .get-grid,
    .rt-grid,
    .studios {
        grid-template-columns: 1fr 1fr
    }

    .spk-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .cred .wrap {
        grid-template-columns: 1fr 1fr
    }

    .land-grid {
        grid-template-columns: 1fr 1fr
    }

    .buyer .wrap,
    .teaser .wrap,
    .commune .wrap,
    .research .wrap {
        grid-template-columns: 1fr
    }

    .mat-step {
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .bs-in {
        gap: 1rem
    }

    .bs-tag {
        margin-left: 0;
        flex-basis: 100%
    }

    .index-foot {
        gap: 1rem
    }
}

@media(max-width:768px) {
    .sec {
        padding: clamp(2.2rem, 6vw, 3.2rem) 0
    }

    .studios {
        grid-template-columns: 1fr
    }

    .aud-grid {
        grid-template-columns: 1fr 1fr
    }

    .hero-title .ht-1,
    .hero-title .ht-2 {
        font-size: clamp(2rem, 8vw, 3rem)
    }

    .sec-head h2 {
        font-size: clamp(1.6rem, 5vw, 2.3rem)
    }

    .partner-ctas,
    .hero-ctas,
    .final-ctas,
    .research-cta {
        flex-direction: column;
        align-items: stretch
    }

    .hero-ctas .btn,
    .final-ctas .btn,
    .research-cta .btn,
    .research-cta a,
    .partner-ctas .btn {
        /* width: 100%; */
        text-align: center
    }

    .buyer-benefits {
        margin-top: 0
    }

    .hero-right-img {
        position: unset;
    }

    .sticky-bar .sb-txt {
        max-width: 50%;
    }

    .sticky-bar .sb-txt b {
        font-weight: 500;
    }

    .atlas-form .modal h3,
    .alert-msg h2 {
        font-size: 16px;
    }

}

/* ---- Mobile (≤560px): single column, compact cards, safe hero ---- */
@media(max-width:560px) {
    .nav {
        height: 64px
    }

    .nav-cta .btn {
        padding: .6rem 1rem;
        font-size: .82rem
    }

    .brand-logo {
        height: 44px
    }

    .hero {
        padding: 1.5rem 0 2rem
    }

    .hero-right {
        min-height: 0;
        max-width: 100%
    }

    .hero-meta {
        gap: .7rem 1.1rem
    }

    .hero-meta .hm {
        font-size: .78rem
    }

    .hpill {
        font-size: .74rem;
        padding: .42rem .75rem
    }

    .q-grid,
    .get-grid,
    .rt-grid,
    .land-grid,
    .studios,
    .aud-grid {
        grid-template-columns: 1fr
    }

    .spk-grid {
        grid-template-columns: 1fr 1fr
    }

    .commune-stats,
    .cred .wrap {
        grid-template-columns: 1fr 1fr
    }

    .foot-top {
        grid-template-columns: 1fr;
        gap: 1.6rem
    }

    .session {
        grid-template-columns: 1fr;
        gap: .4rem
    }

    .session .time {
        font-size: .8rem
    }

    .editorial-line {
        font-size: 1.35rem
    }

    .bs-words {
        border-left: 0;
        padding-left: 0
    }

    .agenda-tabs {
        flex-direction: column
    }

    .atab {
        min-width: 0
    }

    .mat-flow {
        flex-direction: column
    }

    .index-foot {
        flex-direction: column;
        align-items: flex-start
    }

    .atlas-form .modal {
        padding: 1.5rem 1.2rem
    }

    .final-logo {
        height: 64px
    }

    .sticky-bar .sb-txt small {
        display: none
    }

    .sticky-bar .sb-in {
        padding: .7rem 1rem
    }
}

/* ---- Small mobile (≤400px): tighten type, single-col stats ---- */
@media(max-width:400px) {
    /* .wrap {
        padding: 0 16px
    } */

    .hero-title .ht-1,
    .hero-title .ht-2 {
        font-size: clamp(1.8rem, 9vw, 2.4rem)
    }

    .hero-pills {
        gap: .4rem
    }

    .hpill {
        font-size: .7rem;
        padding: .38rem .65rem
    }

    .hpill svg {
        width: 13px;
        height: 13px
    }

    .spk-grid,
    .commune-stats,
    .cred .wrap {
        grid-template-columns: 1fr 1fr;
    }

    .cred-item {
        padding: 1.2rem 1rem
    }

    .sec-head h2 {
        font-size: clamp(1.5rem, 7vw, 2rem)
    }

    .aud-statement {
        font-size: 1.15rem;
        padding: 1.2rem
    }

    .final h2 {
        font-size: clamp(1.9rem, 9vw, 2.6rem)
    }
}

/* ---- Tiny screens (≤340px): last-resort compaction ---- */
@media(max-width:340px) {
    .brand-logo {
        height: 38px
    }

    .nav-cta .btn {
        padding: .55rem .8rem;
        font-size: .78rem
    }

    .hero-title .ht-1,
    .hero-title .ht-2 {
        font-size: 1.7rem
    }

    .editorial-line {
        font-size: 1.2rem;
        padding-left: .8rem
    }
}

/* ---- Landscape phones (short viewport): reduce vertical padding ---- */
@media(max-height:520px) and (orientation:landscape) {
    .hero {
        padding: 1.2rem 0
    }

    .sec {
        padding: 2rem 0
    }

    .atlas-form .modal {
        max-height: 94vh
    }

    .sticky-bar {
        display: none
    }
}

/* ---- Touch devices: larger tap targets ---- */
@media(hover:none) and (pointer:coarse) {

    .navlinks a,
    .mobile-menu a {
        display: flex;
        align-items: center;
        color: #272727;
    }

    .atlas-form .modal-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto
    }
}


@media print {

    header,
    .sticky-bar,
    .hero-watermark,
    .grid-bg,
    .modal-overlay,
    .hero-ctas,
    .final-ctas,
    .agenda-cta,
    .mini-cta,
    .spk-cta,
    .research-cta {
        display: none !important
    }

    * {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important
    }

    .sec,
    .hero {
        padding: 1rem 0 !important;
        break-inside: avoid
    }

    a[href]::after {
        content: ""
    }

    .hero-right {
        display: none
    }
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease
}

.reveal.in {
    opacity: 1;
    transform: none
}

.wave-divider {
    display: block;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
    line-height: 0;
    box-sizing: border-box;
}

.wave-divider svg {
    width: 100%;
    height: 22px;
    display: block
}

.wave-divider path {
    stroke: url(#wavegrad);
}