:root{
    --green: #2f8f1f;      /* replace with exact */
    --text: #111;
    --muted: #666;
    --bg: #fff;
    --panel: #f1f1f1;

    --container: 1100px;
    --pad: 20px;

    --r-xl: 28px;
    --r-lg: 22px;
    --shadow: 0 18px 40px rgba(0,0,0,.16);
}

*{ box-sizing:border-box; }
body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: "Fira Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.nove {
    font-family: "nove", "Fira Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

.container{
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
}

.topbar{
    position: absolute;
    left:0; right:0;
    top: -14px;
    z-index: 10;
}
.topbar__inner{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* icons stay right */
}

/* center nav group */
.topbar__nav{
    --item-w: 100px;         /* tweak later if needed */
    --gap: 15px;
    --dot: 9px;
    --dot-r: 1px;
    --dot-rot: 8deg;

    --track-y: 8px;          /* vertical position of the track */
    --text-offset: 18px;      /* text down by default */
    --text-hover: 15px;       /* closer to dots on hover */

    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: var(--gap);
    align-items: flex-start;
    padding-top: 0;

    font-weight: 800;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* the line only BETWEEN the first and last dot centers */
.topbar__nav::before{
    content:"";
    position:absolute;
    top: var(--track-y);
    left: calc(var(--item-w) / 2);
    right: calc(var(--item-w) / 2);
    height: 2px;
    background: rgba(255,255,255,.35);
    border-radius: 999px;
}

/* links with a predictable width so the line can be clipped correctly */
.topbar__link{
    width: var(--item-w);
    text-align: center;
    position: relative;

    color: rgba(255,255,255,.70);
    text-decoration: none;
}
.topbar__label{
    display: inline-block;
    transform: translateY(var(--text-offset));
    transition: transform .15s ease, color .15s ease;
}


/* dot (rotated square) whose center intersects the line */
.topbar__link::before{
    content:"";
    position:absolute;
    left: 50%;
    top: calc(var(--track-y) - (var(--dot) / 2));
    transform: translateX(-50%) rotate(var(--dot-rot));

    width: var(--dot);
    height: var(--dot);
    border-radius: var(--dot-r);
    background: rgba(255,255,255,.35);

    transition: background .15s ease;
}

/* hover/focus: dot + text to #fff, text moves up closer to dot */
.topbar__link:hover,
.topbar__link:focus-visible{
    color: #ffffff;
}

.topbar__link:hover::before,
.topbar__link:focus-visible::before{
    background: #ffffff;
}
.topbar__link:hover .topbar__label,
.topbar__link:focus-visible .topbar__label{
    transform: translateY(var(--text-hover));
}

/* SOCIAL ICONS */
.topbar__icons{
    display: flex;
    padding-top: 30px;
    gap: 12px;
    align-items: center;
}

/* SOCIAL ICONS — no extra background container */
.topbar__icons{
    display: flex;
    gap: 12px;
    align-items: center;
}

.topbar__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    width: auto;
    height: auto;
    padding: 0;
    text-decoration: none;
}

.topbar__icon img{
    display: block;
    width: 20px;   /* adjust if your pngs are different size */
    height: 20px;
}

.topbar__icon:hover img,
.topbar__icon:focus-visible img{
    filter: drop-shadow(0 0 4px rgba(255,255,255,.65));
}


/* common */
.section{ padding: 56px 0; }
.card{
    border-radius: var(--r-xl);
    overflow:hidden;
    box-shadow: var(--shadow);
    background:#fff;
}
.card--tilt-left{ transform: rotate(-3.5deg); }
.card--tilt-right{ transform: rotate(3.5deg); }

.panel{
    background: var(--panel);
    border-radius: var(--r-xl);
    padding: 50px;
}
/* hero (full-bleed, no rounding, dark overlay) */
.hero{
    padding-top: 0;        /* keep simple for now; we’ll tune later */
}
/* visually hidden but accessible */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border:0;
}

/* logo in hero */
.hero__title{
    margin: -36px 0 -36px; /* .75rem; */
    line-height: 1;
}

.hero__logo{
    display:block;
    width: min(520px, 80vw);  /* we can fine-tune later */
    height: auto;
    transform: scale(.7); transform-origin: center;
}

/* hero height + crop */
.hero__media{
    position: relative;
    width: 100%;
    border-radius: 0;
    overflow: hidden;              /* crops the image */
    height: clamp(420px, 62vh, 640px); /* smaller hero; tweak later */
}

.hero__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;             /* crop instead of shrinking */
    object-position: center top;   /* keeps top content visible */
    display: block;
}

/* dark overlay layer */
.hero__media::after{
    content:"";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.40); /* #000 at 40% */
    pointer-events: none;
}

/* text stays above overlay */
.hero__overlay{
    position:absolute;
    inset: 0;
    z-index: 1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    text-shadow: 0 4px 20px rgba(0,0,0,.55);
    padding: 24px;
}

.hero__kicker{ margin:0; font-size: 35px; font-weight: 700; }
/*.hero__title{ margin:0; font-size: clamp(32px, 6vw, 64px); letter-spacing: .04em; }*/
.hero__date{ margin:6px 0 0; font-size: 46px; font-weight: 800; }
/* create a reliable stacking context for the angled background */
.band{
    position: relative;
    isolation: isolate;
}

/* GREEN BAND: content starts at the top, background overlaps hero */
.band--green{
    margin-top: 0;                 /* don't pull the whole section up */
    padding: 36px 0 70px;          /* small, normal padding (tweak 36px) */
    z-index: 2;                    /* above hero */
    position: relative; /* ensure absolute children anchor here */
}

.band__top-slice{
    position: absolute;

    /* center a fixed-width card */
    left: 10%;
    width: auto;
    /*width: min(1200px, calc(100vw - 400px)); !* keeps margin on sides *!*/
    height: 340px;

    top: 120px;

    transform: translateX(-50%) rotate(3.5deg);
    transform-origin: center;

    border-radius: 16px;
    overflow: hidden;

    /* floating feel */
    box-shadow: 0 28px 70px rgba(0,0,0,.28);
    background: #111;

    /* above green bg, below content */
    z-index: 0;
    pointer-events: none;
}

/* Ensure the generic .card radius doesn't override your 16px.
   (Your .card uses --r-xl = 28px.) */
.band__top-slice.card{
    border-radius: 16px;
}

.band__top-slice img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ONLY the background overlaps hero */
.band--green::before{
    content:"";
    position:absolute;
    left: -140px;
    right: -140px;

    top: -58px;                   /* this is the overlap into hero */
    bottom: 40px;

    background: var(--green);
    transform: rotate(3.5deg);
    transform-origin: center;

    z-index: -1;                   /* behind content, stays within .band because of isolation */
}

/* layout: keep photo left, push text to the right side */
.band__grid{
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
    align-items: start;      /* <-- THIS is the key */
    position: relative;
    z-index: 1;
}
.band__text > :first-child{
    margin-top: 0;
}

.band__text{
    grid-column: 2;     /* force right column even if column 1 is empty */
    justify-self: end;  /* keep it to the right edge */
    margin-top: -30px;
    color: #fff;
    max-width: 520px;
    justify-self: end;             /* moves the text block to the right edge */
    /* text-align: left; */        /* keep as-is */
    /* text-align: right; */       /* uncomment if Figma has right-aligned text */
}
.band__heading{
    margin:0 0 12px;
    letter-spacing:.04em;
}
.band__text p {
    font-size: 16px;
    line-height: 22px;
    font-weight: 300;
}
/* details */
.details{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    margin-top: 100px;
    align-items:start;
}
.details p {
    color: #4D4D4D;
    font-size: 16px;
    line-height: 23px;
}
h2 {
    font-size: 46px;
}
h3 {
    font-size: 36px;
}
h4 {
    font-size: 26px;
}
.details h2, .details h3 {
    color: #262626;
}
.pricing__note{
    margin: 6px 0 14px;
    color: #4D4D4D;
    font-size: 14px;
    line-height: 1.4;
}

/*.pricing{*/
/*    border-top: 1px solid rgba(0,0,0,.18);*/
/*}*/

.pricing__row{
    display: grid;
    grid-template-columns: 1fr 290px; /* right column width like Figma */
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid rgba(0,0,0,.18);
    align-items: start;
}

.pricing__title{
    font-size: 18px;
    line-height: 1.2;
    color: #262626;
}

.pricing__muted{
    font-weight: 400;
    color: rgba(0,0,0,.55);
}

.pricing__right{
    display: grid;
    gap: 8px;
}

.pricing__line{
    display: grid;
    grid-template-columns: 90px 1fr; /* price column + label column */
    gap: 18px;
    align-items: baseline;
}

.pricing__price{
    font-weight: 800;
    color: #262626;
}

.pricing__who{
    color: #4D4D4D;
}

/* mobile: stack */
@media (max-width: 720px){
    .pricing__row{
        grid-template-columns: 1fr;
    }
    .pricing__line{
        grid-template-columns: 90px 1fr;
    }
}
.details__photo img{ width:100%; height:auto; }

.section__title{ text-align:center; margin-bottom: 18px; }
.section__subtitle{ margin: 6px 0 0; color: var(--green); font-weight: 800; }

.tabs__list{
    display:flex;
    justify-content:center;
    gap: 18px;
    margin: 18px 0 14px;
    flex-wrap: wrap;
    font-weight: 900;
    letter-spacing:.06em;
}
.tabs__tab{
    background: transparent;
    border: 0;
    padding: 10px 6px;
    cursor:pointer;
    color: #444;
}
.tabs__tab[aria-selected="true"]{ color: var(--text); }

/* map band */
.mapgrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items:center;
}
.mapgrid__text{ color:#fff; }
.mapgrid__map iframe{
    width:100%;
    height: 320px;
    border: 0;
}

/* partners */
.partners__row{
    display:flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items:center;
    opacity: .95;
}

/* footer */
.footer{
    background: #e9e9e9;
    padding: 26px 0;
    margin-top: 30px;
}

/* mobile simplification */
@media (max-width: 900px){
    .band__grid, .details, .mapgrid{ grid-template-columns: 1fr; }
    .topbar{ position: static; background: #111; padding: 10px 0; }
    .topbar__nav{ flex-wrap: wrap; }
    .card--tilt-left, .card--tilt-right{ transform:none; }
}








.freeplay{
    padding: 70px 0 90px;
    /*background: #fff;*/
}

.freeplay__head{
    text-align: center;
    max-width: 860px;
    margin: 0 auto 18px;
}

.freeplay__title{
    margin: 0;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
}

.freeplay__subtitle{
    margin: 10px 0 0;
    color: var(--green);
    font-weight: 900;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.1;
}

.freeplay__text{
    max-width: 860px;
    margin: 22px auto 44px;
    text-align: center;
    color: rgba(0,0,0,.68);
    line-height: 1.7;
    font-size: 16px;
}

.freeplay__text p{
    margin: 0 0 18px;
}

.freeplay__photos{
    display: grid;
    width: 56%;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    align-items: start;
}

.freeplay__photo{
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    transform: rotate(var(--r, 3deg));
    box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

.freeplay__photo img{
    width: 100%;
    aspect-ratio: 1 / 1; /* square */
    object-fit: cover;
    display: block;
}

/* responsive */
@media (max-width: 900px){
    .freeplay__photos{
        grid-template-columns: 1fr;
        gap: 22px;
        max-width: 520px;
        margin: 0 auto;
    }
}














/* =========================
   PROGRAM / SCHEDULE
========================= */

:root{
    --program-panel: #e6e6e6;
    --program-line: rgba(0,0,0,.10);
    --program-tab: #e6e6e6;
    --program-tab-inactive: #dcdcdc;
}
.program {
    margin: 0 200px 10px;
}
.program__head{
    text-align: center;
    margin: 12px auto 18px;
}

.program__title{
    margin: 0;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
}

.program__subtitle{
    margin: 10px 0 0;
    color: var(--green);
    font-weight: 900;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.1;
}

.program__frame{
    margin-top: 24px;
}

/* Tabs row */
.program__tabs{
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.program__tabs--top{ margin-bottom: -14px; }
.program__tabs--bottom{ margin-top: -14px; }

/* Tab button base */
.program__tab{
    position: relative;
    border: 0;
    cursor: pointer;

    padding: 14px 22px;
    border-radius: 14px;
    background: var(--program-tab-inactive);
    color: rgba(0,0,0,.45);

    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 18px;

    /*box-shadow: 0 10px 26px rgba(0,0,0,.12);*/
}

.program__tab:focus-visible{
    outline: 3px solid rgba(47,143,31,.35);
    outline-offset: 3px;
}

/* Active tab (matches panel) */
.program__tab[aria-selected="true"]{
    background: var(--program-tab);
    color: rgba(0,0,0,.70);
}

/* “Folder ear” — top tabs */
.program__tabs--top .program__tab[aria-selected="true"]::after{
    content:"";
    position:absolute;
    left: 18px;
    bottom: -12px;
    width: 42px;
    height: 20px;
    background: var(--program-panel);
    border-radius: 0 0 14px 14px;
    /*box-shadow: 0 10px 20px rgba(0,0,0,.10);*/
}

/* “Folder ear” — bottom tabs */
.program__tabs--bottom .program__tab[aria-selected="true"]::after{
    content:"";
    position:absolute;
    left: 18px;
    top: -12px;
    width: 42px;
    height: 20px;
    background: var(--program-panel);
    border-radius: 14px 14px 0 0;
    /*box-shadow: 0 -10px 20px rgba(0,0,0,.08);*/
}

/* Panel */
.program__panel{
    background: var(--program-panel);
    border-radius: 13px;
    padding: 30px;
    /*box-shadow: 0 18px 40px rgba(0,0,0,.16);*/
    position: relative;
    z-index: 1;
}

/* Schedule list */
.schedule{
    list-style: none;
    padding: 0;
    margin: 0;
}

.schedule__item{
    display: grid;
    grid-template-columns: 84px 1fr 180px;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-top: 1px solid var(--program-line);
}
.schedule__item:first-child{ border-top: 0; }

.schedule__media{
    width: 74px;
    height: 74px;
    border-radius: 14px;
    overflow: hidden;
    /*box-shadow: 0 12px 26px rgba(0,0,0,.18);*/
    background: #fff;
    display: grid;
    place-items: center;
}
.schedule__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icon tile (dice look) */
.schedule__media--icon{
    background: #1f1f1f;
}
.schedule__dice{
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #2fd11f;
    position: relative;
    /*box-shadow: inset 0 0 0 8px rgba(0,0,0,.35);*/
}
.schedule__dice::before{
    content:"";
    position:absolute;
    inset: 10px;
    background:
            radial-gradient(circle at 20% 20%, #0e0e0e 3px, transparent 4px),
            radial-gradient(circle at 80% 20%, #0e0e0e 3px, transparent 4px),
            radial-gradient(circle at 20% 80%, #0e0e0e 3px, transparent 4px),
            radial-gradient(circle at 80% 80%, #0e0e0e 3px, transparent 4px),
            radial-gradient(circle at 50% 50%, #0e0e0e 3px, transparent 4px);
}

/* Time */
.schedule__time{
    font-weight: 900;
    font-size: 28px;
    color: rgba(0,0,0,.55);
}

/* Title + meta */
.schedule__title{
    font-weight: 800;
    font-size: 20px;
    color: rgba(0,0,0,.72);
    line-height: 1.15;
}
.schedule__meta{
    margin-top: 8px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: rgba(0,0,0,.45);
    font-weight: 700;
    font-size: 14px;
}
.schedule__clock{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(47,143,31,.8);
    position: relative;
}
.schedule__clock::before{
    content:"";
    position:absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 6px;
    background: rgba(47,143,31,.85);
    transform: translate(-50%, -90%);
    border-radius: 2px;
}
.schedule__clock::after{
    content:"";
    position:absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 2px;
    background: rgba(47,143,31,.85);
    transform: translate(-10%, -50%);
    border-radius: 2px;
}

/* Place (right column) */
.schedule__place{
    text-align: right;
    color: rgba(0,0,0,.45);
    font-weight: 700;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 900px){
    .program__panel{ padding: 18px; }
    .schedule__item{
        grid-template-columns: 64px 80px 1fr;
        grid-template-areas:
      "media time main"
      "media place place";
        align-items: start;
    }
    .schedule__media{ width: 58px; height: 58px; }
    .schedule__time{ font-size: 22px; }
    .schedule__place{
        grid-column: 2 / -1;
        text-align: left;
        margin-top: 6px;
    }
}









/* =========================
   PROGRAM TABS (folder style)
========================= */

:root{
    --program-panel: #e6e6e6;
    --tab-inactive: rgba(0,0,0,.35);
    --tab-active: rgba(0,0,0,.60);
}

/* row */
.programTabs{
    display: flex;
    justify-content: center;
    gap: 44px;                 /* big gaps like screenshot */
    align-items: flex-end;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

.programTabs--top{ margin-bottom: -10px; }
.programTabs--bottom{
    margin-top: -5px;
    align-items: flex-start;
}

/* item base = looks like text label by default */
.programTabs__item{
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tab-inactive);
    font-size: 20px;
    line-height: 1;
    position: relative;
}

.programTabs__item:focus-visible{
    outline: 3px solid rgba(47,143,31,.35);
    outline-offset: 6px;
    border-radius: 12px;
}

/* ACTIVE = “folder tab” */
.programTabs__item.is-active{
    color: var(--tab-active);
    background: var(--program-panel);
    padding: 14px 26px;
    border-radius: 5px;
    /*box-shadow: 0 16px 34px rgba(0,0,0,.16);*/
}

/* Ear - top (hangs down into panel) */
.programTabs--top .programTabs__item.is-active::after{
    content:"";
    position:absolute;
    left: 16px;
    bottom: -14px;

    width: 58px;
    height: 26px;
    background: var(--program-panel);

    border-radius: 0 0 16px 16px;
    /*box-shadow: 0 14px 26px rgba(0,0,0,.12);*/
}

/* Ear - bottom (hangs up into panel) */
.programTabs--bottom .programTabs__item.is-active::after{
    content:"";
    position:absolute;
    left: 16px;
    top: -14px;

    width: 58px;
    height: 26px;
    background: var(--program-panel);

    border-radius: 16px 16px 0 0;
    /*box-shadow: 0 -14px 26px rgba(0,0,0,.10);*/
}

/* keep inactive labels from shifting layout when active changes */
.programTabs__item:not(.is-active){
    padding: 14px 0; /* gives same baseline height feel */
}

/* mobile */
@media (max-width: 900px){
    .programTabs{ gap: 22px; }
    .programTabs__item{ font-size: 16px; }
    .programTabs__item.is-active{ padding: 12px 18px; }
    .programTabs--top .programTabs__item.is-active::after,
    .programTabs--bottom .programTabs__item.is-active::after{
        width: 44px;
        height: 22px;
    }
}



















/* =========================
   KUDY K NÁM (green card + map)
========================= */

.kudy{
    padding: 90px 0 110px;
}

.kudy__grid{
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Green card */
.kudy__card{
    background: var(--green);
    color: #fff;
    border-radius: var(--r-xl);
    padding: 56px 54px;
    position: relative;
    overflow: hidden; /* needed for the “cut” */
    box-shadow: var(--shadow);
}

/* create the angled/cut bottom edge (white wedge) */
.kudy__card::after{ display: none; }

/* keep text above wedge */
.kudy__card > *{
    position: relative;
    z-index: 1;
}

.kudy__title{
    margin: 0 0 18px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.05;
    font-size: clamp(34px, 3.2vw, 54px);
    text-transform: uppercase;
}

.kudy__lead{
    margin: 0 0 12px;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.4;
    opacity: .98;
}

.kudy__text{
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    max-width: 52ch;
    opacity: .95;
}

.kudy__subhead{
    margin: 26px 0 10px;
    font-weight: 900;
    letter-spacing: .02em;
    font-size: clamp(20px, 2vw, 32px);
    text-transform: uppercase;
}

/* Map */
.kudy__map{
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #fff;
    min-height: 420px;
}

.kudy__map iframe{
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    display: block;
}

/* Responsive */
@media (max-width: 900px){
    .kudy__grid{
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .kudy__card{
        padding: 34px 26px;
    }
    .kudy__card::after{
        width: 70%;
        height: 34%;
    }
    .kudy__map{
        min-height: 320px;
    }
    .kudy__map iframe{
        min-height: 320px;
    }
}
















/* =========================
   WHO / KDO JSME
========================= */

.who{
    padding: 70px 0 90px;
}

.who__grid{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: start;
}

.who__photo{
    /* uses .card + .card--tilt-right already */
    border-radius: var(--r-xl);
}

.who__photo img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Right content */
.who__title{
    margin: 0 0 14px;
    color: #262626;
}

.who__p{
    margin: 0 0 14px;
    color: #4D4D4D;
    font-size: 16px;
    line-height: 23px;
}

.who__link{
    color: var(--green);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.who__logo{
    margin-top: 28px;
    max-width: 320px;
}

.who__logo img{
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive */
@media (max-width: 900px){
    .who__grid{
        grid-template-columns: 1fr;
        gap: 26px;
    }
}


















/* =========================
   PARTNERS (logo marquee)
========================= */

.partners{
    padding: 70px 0 90px;
}

.partners__head{
    text-align: center;
    margin-bottom: 34px;
}

.partners__title{
    margin: 0;
    font-weight: 900;
    line-height: 1;
}

.partners__subtitle{
    margin: 10px auto 0;
    max-width: 70ch;
    color: rgba(0,0,0,.55);
    font-weight: 600;
    line-height: 1.5;
}

/* viewport */
.partners__marquee{
    position: relative;
    overflow: hidden;
    padding: 18px 0;
    user-select: none;
}

 subtle fade edges (optional, matches clean look)
.partners__marquee::before,
.partners__marquee::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width: 70px;
    z-index: 2;
    pointer-events:none;
    background: linear-gradient(to right, var(--bg), rgba(255,255,255,0));
}
.partners__marquee::after{
    right: 0;
    transform: scaleX(-1);
}
.partners__marquee::before{ left: 0; }

 track
.partners__track{
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    will-change: transform;
}

 each logo item
.partners__logo{
    display: grid;
    place-items: center;
    height: 52px;        /* same baseline height */
    min-width: 140px;    /* keeps nice spacing */
    padding: 10px 6px;
    text-decoration: none;
    opacity: .95;
    transition: opacity .2s ease, transform .2s ease;
}
.partners__logo:hover{
    opacity: 1;
    transform: translateY(-1px);
}

.partners__logo img{
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    filter: saturate(1.02);
}

/* pause when user interacts */
.partners__marquee.is-paused .partners__track{
    animation-play-state: paused !important;
}

@media (max-width: 700px){
    .partners__track{ gap: 38px; }
    .partners__logo{ min-width: 110px; height: 44px; }
    .partners__marquee::before,
    .partners__marquee::after{ width: 40px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
    .partners__track{
        animation: none !important;
        transform: none !important;
    }
    .partners__marquee{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* track that moves */
.partners__track{
    display: flex;
    align-items: center;
    gap: clamp(26px, 3.2vw, 54px);
    width: max-content;

    /* animation */
    animation: partners-marquee var(--marquee-duration, 56s) linear infinite;
    will-change: transform;
}

/* pause on hover */
.partners__marquee:hover .partners__track{
    animation-play-state: paused;
}

/* each logo */
.partners__logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* give each slot consistent height */
    height: clamp(60px, 8vw, 88px);
    padding: 6px 4px;
    flex: 0 0 auto;
}

.partners__logo img{
    height: 100%;
    width: auto;
    display: block;

    /* prevent huge logos */
    max-width: clamp(120px, 16vw, 190px);
    object-fit: contain;
    filter: saturate(1.02);
}

/* keyframes: move by exactly half track width (because we duplicate content) */
@keyframes partners-marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(calc(-1 * var(--marquee-distance, 1000px))); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
    .partners__track{ animation: none; }
    .partners__marquee{
        overflow: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.partners__marquee{
    overflow: hidden;
    position: relative;
    width: 100%;

    /* optional nice fade edges */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.partners__track{
    display: flex;
    align-items: center;
    gap: clamp(26px, 3.2vw, 54px);
    width: max-content;

    animation: partners-marquee var(--marquee-duration, 60s) linear infinite;
    will-change: transform;
}

.partners__marquee:hover .partners__track{
    animation-play-state: paused;
}

@keyframes partners-marquee{
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--marquee-distance, 1000px))); }
}






.footer{
    position: relative;
    padding: 120px 0 90px;
    overflow: hidden;
    isolation: isolate; /* keeps z-index sane with the rotated bg */
}

.footer__bg{
    position: absolute;

    /* make it wide enough so rotation doesn't reveal gaps */
    left: -140px;
    right: -140px;

    top: 0;
    bottom: -140px;

    background: #e9e9e9;
    transform: rotate(-3.5deg);
    transform-origin: center;

    /* big rounded top-right corner like figma */
    border-top-right-radius: 90px;

    z-index: -1;
}

.footer__inner{
    text-align: center;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.footer__lead{
    margin: 0;
    color: rgba(0,0,0,.62);
}

.footer__mail{
    color: var(--green);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.footer__social{
    display: inline-flex;
    gap: 16px;
    margin-top: 6px;
}

.footer__socialLink{
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--green);
    display: grid;
    place-items: center;
    color: #fff;
    text-decoration: none;
    transform: translateZ(0);
}

.footer__socialLink:hover{
    filter: brightness(.95);
}

.footer__icon{
    font-weight: 900;
    line-height: 1;
    font-size: 16px;
    transform: translateY(-1px);
}

.footer__fineprint{
    margin: 34px 0 0;
    font-size: 12px;
    color: rgba(0,0,0,.45);
}


















/* =========================
   FLOATING NAV
========================= */

.floatingNav{
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1000;
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
}

.floatingNav.is-visible{
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.floatingNav__panel{
    background: #ececec;
    border-radius: 0 0 26px 26px;
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
    padding: 12px 26px 18px;
}

/* reuse the exact same nav geometry as the static one */
.floatingNav__nav{
    position: relative;
    top: -9px;
    left: auto;
    transform: none;

    --track-y: 8px;
    --text-offset: 18px;
    --text-hover: 15px;
}

/* only colors change */
.floatingNav__nav::before{
    background: rgba(0,0,0,.18);
}

.floatingNav__nav .topbar__link{
    color: rgba(0,0,0,.55);
}

.floatingNav__nav .topbar__link::before{
    background: rgba(0,0,0,.22);
}

.floatingNav__nav .topbar__link:hover,
.floatingNav__nav .topbar__link:focus-visible{
    color: rgba(0,0,0,.82);
}

.floatingNav__nav .topbar__link:hover::before,
.floatingNav__nav .topbar__link:focus-visible::before{
    background: rgba(0,0,0,.82);
}

@media (max-width: 900px){
    .floatingNav{
        display: none;
    }
}











.pageDecor{
    position: relative;
    overflow: clip;
}

.pageDecor__bg{
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.pageDecor__bg--left{
    top: 1620px;
    left: 0;
    width: 150px;
    height: 3000px;
    background-image: url("./assets/background-left.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 120px auto;
}

.pageDecor__bg--right{
    top: 1420px;
    right: 0;
    width: 150px;
    height: 3000px;
    background-image: url("./assets/background-right.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 200px auto;
}

/* keep actual content above decorative layers */
.pageDecor > main,
.pageDecor > footer{
    position: relative;
    z-index: 1;
/*}*/

/*.pageDecor > header {*/
/*    position: relative;*/
/*    z-index: 2;*/
/*}*/















.fira-sans-thin {
    font-family: "Fira Sans", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.fira-sans-extralight {
    font-family: "Fira Sans", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.fira-sans-light {
    font-family: "Fira Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.fira-sans-regular {
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.fira-sans-medium {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.fira-sans-semibold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.fira-sans-bold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.fira-sans-extrabold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.fira-sans-black {
    font-family: "Fira Sans", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.fira-sans-thin-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.fira-sans-extralight-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.fira-sans-light-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.fira-sans-regular-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.fira-sans-medium-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.fira-sans-semibold-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.fira-sans-bold-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.fira-sans-extrabold-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.fira-sans-black-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 900;
    font-style: italic;
}