/* --- Dedicated Fonts Initialization --- */
@font-face {
  font-family: "BritanicaCondensedLight";
  src: url('../fonts/MyWebfontsKit/webFonts/BritanicaCondensedLight/font.woff2') format('woff2'), 
       url('../fonts/MyWebfontsKit/webFonts/BritanicaCondensedLight/font.woff') format('woff'),
       url('../fonts/Britanica-CondLight.otf') format('opentype');
}
@font-face {
  font-family: "BritanicaCondensedExtraBold";
  src: url('../fonts/MyWebfontsKit/webFonts/BritanicaCondensedExtraBold/font.woff2') format('woff2'), 
       url('../fonts/MyWebfontsKit/webFonts/BritanicaCondensedExtraBold/font.woff') format('woff'),
       url('../fonts/Britanica-CondXBold.otf') format('opentype');
}
@font-face {
  font-family: "BritanicaRegular";
  src: url('../fonts/MyWebfontsKit/webFonts/BritanicaRegular/font.woff2') format('woff2'), 
       url('../fonts/MyWebfontsKit/webFonts/BritanicaRegular/font.woff') format('woff'),
       url('../fonts/Britanica-Regular.otf') format('opentype');
}
@font-face {
  font-family: "BritanicaCondensedBold";
  src: url('../fonts/MyWebfontsKit/webFonts/BritanicaCondensedBold/font.woff2') format('woff2'), 
       url('../fonts/MyWebfontsKit/webFonts/BritanicaCondensedBold/font.woff') format('woff'),
       url('../fonts/Britanica-CondBold.otf') format('opentype');
}
@font-face {
  font-family: "BritanicaCondensedRegular";
  src: url('../fonts/MyWebfontsKit/webFonts/BritanicaCondensedRegular/font.woff2') format('woff2'), 
       url('../fonts/MyWebfontsKit/webFonts/BritanicaCondensedRegular/font.woff') format('woff'),
       url('../fonts/Britanica-CondRegular.otf') format('opentype');
}
@font-face {
  font-family: "BritanicaThin";
  src: url('../fonts/MyWebfontsKit/webFonts/BritanicaThin/font.woff2') format('woff2'), 
       url('../fonts/MyWebfontsKit/webFonts/BritanicaThin/font.woff') format('woff'),
       url('../fonts/Britanica-Thin.otf') format('opentype');
}
@font-face {
  font-family: "BritanicaLight";
  src: url('../fonts/MyWebfontsKit/webFonts/BritanicaLight/font.woff2') format('woff2'), 
       url('../fonts/MyWebfontsKit/webFonts/BritanicaLight/font.woff') format('woff'),
       url('../fonts/Britanica-Light.otf') format('opentype');
}

/* --- Global Reset & Canvas Box --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #000725;
    color: #FFFFFF;
    font-family: sans-serif;
    overflow-x: hidden;
}

.hero-container {
    position: relative;
    width: 100%;
    /* min-height: 1080px; */
    background: #000725;
    opacity: 1;
    height: 115vh;
}

/* --- Logo Component Style --- */
.header-navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10;
}

.logo {
    position: relative;
    width: 271.01px;
    height: auto;
    left: 95px;
    top: 77px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #000725;
}

.logo-v {
    position: relative;
    width: 70px;
    height: 90px;
}

.v-left {
    position: absolute;
    width: 24px;
    height: 100%;
    background: #C9A97F;
    transform: skewX(-20deg);
    left: 10px;
}

.v-right {
    position: absolute;
    width: 28px;
    height: 100%;
    background: #2E4272;
    transform: skewX(20deg);
    left: 32px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-title {
    font-family: "BritanicaCondensedBold", sans-serif;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

.brand-sub {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 18px;
    color: #A0A5B5;
}

/* --- Menu Bar Style --- */
.menu {
    position: fixed;
    width: max-content;
    top: 114px;
    opacity: 1;
    background: #000725;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 25px;
    gap: 35px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.menu-item {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 20px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.menu-item:hover, .menu-item.active {
    opacity: 1;
}

/* --- Hero Typography Layout --- */
.hero-content {
    position: absolute;
    top: 338px;
    left: 200px;
    z-index: 5;
}

.sub-heading {
    font-family: "BritanicaCondensedLight", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0.02em;
    color: #BAB8B8;
    margin-bottom: 28px;
}

.main-heading {
    font-family: "BritanicaThin", sans-serif;
    font-weight: 400;
    font-size: 105px;
    line-height: 89px;
    letter-spacing: 0%;
    color: #C9A97F;
    margin-bottom: 70px;
}

/* --- Call To Action Button Style --- */
.button {
    position: absolute;
    height: 77px;
    margin-top: 10px;
    border-radius: 50px;
    padding: 10px 33px;
    background: #C9A97F;
    border: none;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 36px;
    color: #000725;
    text-decoration: none;
    cursor: pointer;
    transition: all 300ms linear;
    padding-top: 0;
}

.button .arrow {
    font-size: 40px;
    transition: transform 0.3s ease;
}

.button:hover {
    background: #d9b98f;
    box-shadow: 0px 8px 24px rgba(201, 169, 127, 0.2);
}

.button:hover .arrow {
    transform: translateX(4px);
}

/* --- Decorative Field Overlay --- */
.vector-graphic-bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 432px;
    height: 100%;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cline x1='10' y1='10' x2='40' y2='30' stroke='%23C9A97F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); */
    background-repeat: repeat;
    opacity: 1;
    pointer-events: none;
    height: 100vh;
}

/* --- Target Anchor Box Section --- */
.target-section {
    width: 100%;
    height: 100vh;
    background: #000c3a;
}



/* --- About Section Canvas Layout --- */
.about-container {
    width: 100%;
    /* min-height: 900px; */ /* Provides sufficient canvas runtime space based on Figma Y-coordinate offsets */
    background: #000725;
    padding: 70px 0 0; /* Keeps spacing structurally proportional to vertical grid targets */
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.about-grid {
    width: 100%;
    max-width: 1523px;
    display: grid;
    grid-template-columns: 655px 1fr; /* First column explicitly set to Figma vector width asset */
    gap: 24px;
     /* Matches absolute 'left: 195px' layout alignment rule */
    position: relative;
    display: flex;
    justify-content: space-between;
}

/* --- Left Column: Kinetic Text Component --- */
.kinetic-wrapper {
    position: relative;
    width: 655px;
    height: 507px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kinetic-heading {
    font-family: "BritanicaThin", sans-serif;
    font-weight: 400;
    font-size: 105px;
    line-height: 89px;
    letter-spacing: 0%;
    color: #FFFFFF;
    position: relative;
    z-index: 2;
}

/* Procedural grid vector background container locked behind typography layer */
.kinetic-vector-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cline x1='15' y1='5' x2='15' y2='55' stroke='%232E4272' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    animation: kineticShift 12s linear infinite;
}

@keyframes kineticShift {
    0%   { background-position: 0 0; }
    100% { background-position: 0 120px; }
}

/* --- Right Column: Mission Content Copy --- */
.mission-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 765px;
     /* Counter-aligns text blocks into balanced row baselines */
}

.mission-text {
    margin-bottom: 79px;
}

.mission-paragraph {
    letter-spacing: 0.02em; /* 2% */
    margin-bottom: 36px;
}

.mission-paragraph:last-child {
    margin-bottom: 0;
}

/* Typography styles matching designated font definitions */
.body-light {
    font-family: "BritanicaCondensedLight", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 36px;
    color: #BAB8B8;
}

.body-bold {
    font-family: "BritanicaCondensedExtraBold", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 36px;
    color: #BAB8B8;
}

/* --- Brand Partner Logos Architecture --- */
.partners-logos {
    display: flex;
    align-items: center;
    gap: 44px;
    margin-top: 0; /* Pushes brand alignment directly to bottom bounds */
}

.logo-box {
    opacity: 0.5;
    transition: opacity 300ms linear;
}

.logo-box img{
    max-width: 100%;
    height: auto;
}

.logo-box:hover {
    opacity: 0.9;
}

.logo-technion {
    width: 186px;
    height: 74px;
}

.logo-t3 {
    width: 128.58px;
    height: 58px;
}




/* --- Cards Section Main Canvas Container --- */
.cards-container {
    width: 100%;
    background: #000725;
    padding: 140px 0 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

/* --- Content Header Block --- */
.cards-header {
    width: 100%;
    max-width: 1522px; /* Set directly from your top text block width specs */
    text-align: center;
    margin-bottom: 15px;
}

.cards-main-heading {
    font-family: "BritanicaThin", sans-serif;
    font-weight: 400;
    font-size: 105px;
    line-height: 89px;
    letter-spacing: 0%;
    color: #C9A97F;
    margin-bottom: 32px;
}

.cards-sub-paragraph {
    font-family: "BritanicaCondensedLight", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0.02em; /* 2% */
    color: #BAB8B8;
    max-width: 1530px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.cards-sub-paragraph .highlight-bold {
    font-family: "BritanicaCondensedExtraBold", sans-serif;
    color: #BAB8B8;
}

/* --- Card Deck Deck Layout Configuration --- */
.cards-deck {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px; /* Seamless uniform column gap across blocks */
    width: 100%;
    max-width: 1525px;
    margin-bottom: 46px;
    min-height: 339px; /* Anchors block heights layout cleanly to support taller active state card */
}

/* --- Standard Base Vector Card Component --- */
.vector-card {
    width: 297px;
    height: 299px;
    background: #9094A6; /* Matches the desaturated baseline card gray tone seen in screenshot */
    padding: 36px 28px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vector-card .card-title {
    font-family: "BritanicaRegular", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 58px;
    letter-spacing: 0%;
    color: #0A102F;
    margin-bottom: 12px;
}

.vector-card .card-body {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: 0.02em; /* 2% */
    color: #0A102F;
}

/* --- Active Vector Card Component Specific State Override --- */
.vector-card.active, .vector-card:hover {
    height: 339px;
    background: #C9A97F;
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.35);
}

.vector-card.active .card-title, .vector-card:hover .card-title {
    color: #0A102F;
}

.vector-card.active .card-body, .vector-card:hover .card-body {
    color: #0A102F;
}

/* --- Apply Now Custom CTA Component Button --- */
.cards-footer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.button-apply {
    width: 239px;
    height: 77px;
    border-radius: 50px;
    padding: 10px 33px;
    background: #C9A97F;
    color: #0A102F;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 36px;
    font-weight: 500;
    transition: all 300ms linear;
    padding-top: 0;
    text-decoration: none;
}

.button-apply .arrow {
    font-size: 40px;
    transition: transform 0.25s linear;
}

.button-apply:hover {
    background: #d9b98f;
    box-shadow: 0px 8px 24px rgba(201, 169, 127, 0.25);
}

.button-apply:hover .arrow {
    transform: translateX(4px);
}



/* --- Events Outer Layout Structure --- */
.events-container {
    width: 100%;
    background: #000725;
    padding: 80px 0 0px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* --- Controls Header Line Component --- */
.events-main-header {
    width: 100%;
    max-width: 1527px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.events-title {
    font-family: "BritanicaThin", sans-serif;
    font-weight: 400;
    font-size: 105px;
    line-height: 89px;
    letter-spacing: 0%;
    color: #4251B7;
    text-align: center;
}

.nav-event-btn {
    font-family: "BritanicaCondensedBold", sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 100%;
    color: #C9A97F;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.2s linear;
}

.nav-event-btn:hover {
    opacity: 0.7;
}

.nav-event-btn .arrow {
    display: inline-flex;
    transition: transform 0.25s linear;
}
.nav-event-btn:hover .arrow {
    transform: translateX(5px);
}
.nav-event-btn:first-child:hover .arrow {
    transform: translateX(-5px);
}

.button-submit .arrow {
    transition: transform 0.25s linear;
}
.button-submit.form-valid-ready:hover .arrow {
    transform: translateX(4px);
}

/* --- Inner Visual Display Card --- */
.event-inner-box {
    width: 1527px;
    background: #00021d;
    opacity: 1;
    display: grid;
    grid-template-columns: 880px 1fr;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* --- Left Sided Content Layout Flow --- */
.event-details-panel {
    padding: 100px 0 70px 107px; /* Aligns content inside matching original left margin baseline */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event-meta {
    font-family: "BritanicaCondensedBold", sans-serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 40px;
    color: #BAB8B8;
    margin-bottom: 24px;
}

.event-heading {
    font-family: "BritanicaLight", sans-serif;
    font-weight: 400;
    font-size: 63px;
    line-height: 60px;
    letter-spacing: 0%;
    color: #C9A97F;
    margin-bottom: 28px;
}

.event-heading .light-sub {
    font-family: "BritanicaThin", sans-serif;
    color: #C9A97F;
}

.event-description {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.02em; /* 2% */
    color: #C9A97F;
    max-width: 826px;
    margin-bottom: 40px;
}

/* --- Timeline Layout Configuration --- */
.event-itinerary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 50px;
}

.timeline-row {
    font-family: "BritanicaCondensedLight", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #DFDFDF;
}

.timeline-row .time {
    font-family: "BritanicaCondensedBold", sans-serif;
}

.timeline-row .sub-desc {
    font-size: 20px;
    color: #BAB8B8;
    display: inline-block;
    margin-left: 62px;
    margin-top: 4px;
}

/* --- Speakers Blueprint System --- */
.speakers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 30px;
    column-gap: 40px;
    margin-bottom: 55px;
    max-width: 826px;
}

.speaker-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.speaker-img {
    width: 98.68px;
    height: 99.32px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #1e1e1e; /* Mock fill layer color */
    mix-blend-mode: luminosity; /* High fidelity design specification mapping */
}

.speaker-info {
    display: flex;
    flex-direction: column;
}

.speaker-name {
    font-family: "BritanicaCondensedExtraBold", sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.speaker-topic {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #DFDFDF;
    margin-bottom: 6px;
}

.speaker-links, .speaker-links a {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #BAB8B8;
}

.speaker-links a {
    /* text-decoration: none; */
}

/* --- Registration Dynamic CTA System --- */
.button-register {
    width: 211px;
    height: 77px;
    border-radius: 50px;
    padding: 10px 33px;
    background: #C9A97F;
    color: #0A102F;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-family: "BritanicaCondensedBold", sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 0%;
    transition: all 300ms linear;
    padding-top: 0;
}

.button-register .arrow {
    font-size: 40px;
    transition: transform 0.25s linear;
}

.button-register:hover {
    background: #d9b98f;
    box-shadow: 0px 8px 24px rgba(201, 169, 127, 0.3);
}

.button-register:hover .arrow {
    transform: translateX(5px);
}


/* --- Master Parent Wrapper for the Speaker Cards Array --- */
.speakers-system-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 390px); /* Strict fixed column width allocation */
    row-gap: 36px;
    column-gap: 46px;
    width: 100%;
    max-width: 826px; /* Exactly as specified by your maximum layout boundary rules */
    margin-bottom: 55px;
    box-sizing: border-box;
}

/* --- Fixed Width Card Architecture --- */
.speaker-card {
    width: 390px; /* Locks execution dimension */
    display: flex;
    align-items: flex-start;
    gap: 18px;
    box-sizing: border-box;
}

/* --- Fixed Dimension Image Shell Elements --- */
.speaker-img {
    width: 98.68px;
    height: 99.32px;
    flex-shrink: 0; /* Prevents text overflow mechanics from squishing the circles */
    border-radius: 50%;
    object-fit: cover;
    background-color: #1e1e1e;
    mix-blend-mode: luminosity;
}

/* --- Flexible Content Compartment --- */
.speaker-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


/* --- Right Panel Base Canvas Layer --- */
.event-graphic-panel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Encapsulates asset bleed-out profiles */
    z-index: 0;
}

/* --- Asset: Group 15.png (3D Robot Head Specs) --- */
.cyborg-head-layer {
    position: absolute;
    width: 563px;
    height: 100%;
    
    /* Absolute Positioning Calculations relative to inner box container */
    /* top: 2991px - parent offset 2847px = 144px */
    top: 0;
    /* left: 1156px - parent offset 196px = 960px */
    opacity: 1;
    mix-blend-mode: plus-lighter;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    right: 0;
}

/* --- Asset: Rectangle.png (Vector Field Line Screen Overlay Specs) --- */
.vector-field-overlay {
    position: absolute;
    
    
    
    /* Absolute Positioning Calculations relative to inner box container */
    /* top: 2826px - parent offset 2847px = -21px */
    /* left: 1378px - parent offset 196px = 1182px */
    opacity: 1;
    mix-blend-mode: screen;
    object-fit: cover; /* Allows the vector pattern matrix fields to stretch precisely as drawn */
    z-index: 3; /* Placed cleanly on top of the face layer */
    pointer-events: none;
    right: 0;
    height: auto;
}



/* --- Screen Reader Visibility Helper --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Structural Input Container Groups --- */
.input-group {
    display: flex;
    flex-direction: column;
    width: 483px;
    position: relative;
    width: 100%;
}

.split-input-wrapper {
    display: flex;
    gap: 20px;
    width: 483px;
}
.split-input-wrapper .input-group.split-half {
    width: 50%;
}
.split-input-wrapper .vector-input.split-half {
    width: 100%;
}


/* --- Form Section Canvas Layout Architecture --- */
.form-container {
    width: 100%;
    min-height: 1500px;
    background: #000725;
    padding: 0px 0 140px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.form-header {
    width: 100%;
    max-width: 1525px;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 5;
    margin-top: 120px;
}

.form-title {
    font-family: "BritanicaThin", sans-serif;
    font-weight: 400;
    font-size: 105px;
    line-height: 89px;
    letter-spacing: 0%;
    color: #C9A97F;
    margin-bottom: 24px;
}

.form-subtext {
    font-family: "BritanicaCondensedLight", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
}

.form-subtext .weight-bold {
    font-family: "BritanicaCondensedBold", sans-serif;
}

/* --- Core Form Array Mechanics --- */
.vector-data-form {
    width: 100%;
    max-width: 986px; /* Exactly width equivalent to 2 standard input units plus layout gaps */
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
}

.mandatory-notice {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0.02em;
    color: #C9A97F; /* Tone changed out of native blue layout baseline for readability against canvas */
    margin-bottom: 8px;
    text-transform: uppercase;
}

.form-grid {
    display: grid;
    grid-template-columns: 483px 483px;
    gap: 10px;
    width: 100%;
}

/* --- Input Blocks Base Rendering Specs --- */
.vector-input {
    width: 483px;
    height: 71px;
    background: #C9A97F;
    border: none;
    outline: none;
    padding: 0 24px;
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.02em;
    color: #0A102F;
    box-sizing: border-box;
    width: 100%;
}

.vector-input::placeholder {
    color: rgba(10, 16, 47, 0.65);
}

/* --- Row 3 Split Execution Layout --- */
.split-input-wrapper {
    width: 483px;
    /* height: 71px; */
    display: flex;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}

.vector-input.split-half {
    width: 231.5px;
}

/* --- High Fidelity Dropdown Core Architecture Component --- */
.custom-dropdown {
    width: 483px;
    position: relative;
    user-select: none;
    width: 100%;
}

.dropdown-trigger {
    width: 483px;
    height: 71px;
    background: #C9A97F;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
}

.trigger-label {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 24px;
    color: #0A102F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Up/Down Floating Caret Dynamic Keying Component */
.trigger-arrow {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A102F' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s linear;
}

/* --- Floating Options Expansion Panel --- */
.custom-dropdown.expanded .dropdown-panel {
    display: block;
}

.custom-dropdown.expanded .trigger-arrow {
    transform: rotate(180deg);
}

.dropdown-panel {
    display: none;
    position: absolute;
    top: 71px;
    left: 0;
    width: 483px;
    max-height: 427px;
    background: #C9A97F;
    border-top: 1px solid rgba(11, 17, 44, 0.15);
    padding: 16px 24px 24px 24px;
    box-sizing: border-box;
    z-index: 100;
    box-shadow: 0px 20px 40px rgba(0,0,0,0.4);
}

.panel-hint {
    display: block;
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0.02em;
    color: rgba(11, 17, 44, 0.5);
    margin-bottom: 8px;
}

.panel-options-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Custom Scrollbar for Dropdown Component Option Panels */
.panel-options-list::-webkit-scrollbar {
    width: 6px;
}
.panel-options-list::-webkit-scrollbar-thumb {
    background: rgba(11, 17, 44, 0.2);
    border-radius: 3px;
}

/* --- Checkbox Item Rows Mapping Rules --- */
.option-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
    cursor: pointer;
    position: relative;
}

.option-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-box {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2); /* #FFFFFF33 Overlay Value Specifications */
    border-radius: 4px;
    margin-right: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    border-radius: 50%;
}

.option-row input[type="checkbox"]:checked ~ .checkbox-box {
    background: #0A102F;
}

.option-row input[type="checkbox"]:checked ~ .checkbox-box::after {
    content: "";
    width: 6px;
    height: 12px;
    border: solid #C9A97F;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.option-text {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 41px;
    letter-spacing: 0.02em;
    color: #0B112C;
}

/* --- Submit Section Action Footer --- */
.form-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 55px;
}

.button-submit {
    width: 197px;
    height: 77px;
    border-radius: 50px;
    padding: 10px 33px;
    background: rgba(186, 184, 184, 0.3); /* Default #BAB8B84D Inactive State Value */
    color: rgba(10, 16, 47, 0.4);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: not-allowed;
    font-family: "BritanicaCondensedBold", sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 100%;
    transition: all 250ms linear;
    padding-top: 0;
}

.button-submit .arrow {
    font-size: 40px;
}

/* Dynamic Active State Trigger Class controlled by JavaScript Validation loop engine */
.button-submit.form-valid-ready {
    background: #C9A97F;
    color: #0A102F;
    cursor: pointer;
}

.button-submit.form-valid-ready:hover {
    background: #d9b98f;
    box-shadow: 0px 8px 24px rgba(201, 169, 127, 0.3);
}

/* --- Refined Button/Trigger for Dropdowns --- */
button.dropdown-trigger {
    width: 100%;
    height: 71px;
    background: #C9A97F;
    border: none;
    outline: none;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
}

/* --- Accessibility Focus Indicators --- */
.vector-input:focus, button.dropdown-trigger:focus-visible {
    outline: 3px solid #4251B7;
    outline-offset: 1px;
}

/* --- Inline Error Messages Layout --- */
.error-message {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 14px;
    color: #FF4D4D; /* Clean legible danger alert red */
    margin-top: 4px;
    min-height: 18px;
    display: none;
}

/* --- Input Field Error Visual State --- */
.vector-input.field-invalid, button.dropdown-trigger.field-invalid {
    box-shadow: inset 0 0 0 2px #FF4D4D;
}

/* --- Disclaimer Section Styling --- */
.disclaimer-group {
    width: 100%;
    max-width: 986px;
    margin-top: 0; /* מרווח פרופורציונלי מתחת לגריד השדות — per Figma */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

.disclaimer-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
}

/* הסתרת ה-Checkbox המקורי של הדפדפן */
.disclaimer-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* התיבה המותאמת אישית על פי מידות פיגמה (~32px) */
.custom-disclaimer-box {
    width: 32px;
    height: 32px;
    background: #BAB8B8; /* תואם לקו העיצובי של שאר האינפוטים */
    border-radius: 4px;
    margin-right: 16px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    border-radius: 50%;
}

/* מיקום מדויק של ה-Checkmark בתוך התיבה על פי הפיגמה */
.custom-disclaimer-box .checkmark-icon {
    position: absolute;
    top: 9.96px;
    left: 9.52px;
    width: 14.6px;
    height: 12.1px;
    opacity: 0; /* מוסתר כברירת מחדל */
    transition: opacity 0.15s ease;
}

/* מצב סימון (Checked) - הצגת האייקון */
.disclaimer-label input[type="checkbox"]:checked ~ .custom-disclaimer-box .checkmark-icon {
    opacity: 1;
}

/* פוקוס נגישות לתיבה */
.disclaimer-label input[type="checkbox"]:focus-visible ~ .custom-disclaimer-box {
    outline: 3px solid #4251B7;
    outline-offset: 1px;
}

/* טקסט הדיסקליימר */
.disclaimer-text {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
}

/* התאמת אינדיקציית שגיאה אדומה במקרה שלא סומן */
.custom-disclaimer-box.field-invalid {
    box-shadow: inset 0 0 0 2px #FF4D4D;
}

/* --- Form Section Left-Side Background Asset Layout --- */
.form-canvas-vector-bg {
    position: absolute;
    /* width: 1807px; */
    left: -9%;
    opacity: 1;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
    bottom: 0;
    top: auto;
}

/* --- Success Confirmation Screen Overlay --- */
.success-screen-wrapper {
    width: 100%;
    max-width: 1525px;
    text-align: center;
    padding: 160px 0;
    animation: fadeIn 0.4s cubic-bezier(0.1, 1, 0.1, 1) forwards;
    z-index: 9;
    /* max-width: 310px; */
}
.success-title {
    font-family: "BritanicaThin", sans-serif;
    font-size: 106px;
    /* line-height: 40px; */
    color: #C9A97F;
    margin-bottom: 30px;
}
.success-subtext {
    font-family: "BritanicaCondensedLight", sans-serif;
    font-size: 30px;
    /* line-height: 22px; */
    color: #FFFFFF;
}

/* --- Dynamic Field Gaps and Gray Tones --- */
.dropdown-trigger.target-light {
    background: #9094A6;
    color: #0A102F;
}
.dropdown-trigger.target-light .trigger-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A102F' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.conditional-group {
    display: none; /* Controlled by script engine toggling */
    width: 483px;
    width: 100%;
    margin-bottom: 10px;
}
.dynamic-conditional-row {
    margin-top: 20px;
    row-gap: 0;
}

/* --- Block Textarea & Upload Items --- */
.universal-tail-row {
    /* margin-top: 20px; */
}
.vector-textarea {
    width: 483px;
    height: 240px;
    background: #9094A6;
    border: none;
    outline: none;
    padding: 24px;
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 22px;
    line-height: 26px;
    color: #0A102F;
    resize: none;
    box-sizing: border-box;
}
.vector-textarea::placeholder { color: rgba(10, 16, 47, 0.7); }

/* File Upload Core Area Dropzone Layout */
.file-upload-trigger {
    width: 483px;
    height: 71px;
    background: #9094A6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 24px;
    color: #0A102F;
    cursor: pointer;
    box-sizing: border-box;
}
.file-upload-trigger input[type="file"] { display: none; }
.upload-arrow { font-size: 28px; font-weight: bold; }

/* Radio Shape Transformation helper rule */
.checkbox-box.radio { border-radius: 50%; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.option-row.single-select {
    display: flex;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    position: relative;
}

/* Hide native radio button while preserving keyboard accessibility */
.option-row.single-select input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* Base custom radio circle container */
.checkbox-box.radio {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    margin-right: 16px;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checked background state */
.option-row.single-select input[type="radio"]:checked ~ .checkbox-box.radio {
    background: #0A102F;
}

/* Precision centered inner dot indicator */
.option-row.single-select input[type="radio"]:checked ~ .checkbox-box.radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C9A97F;
}

/* Keyboard navigation focus rings */
.option-row.single-select input[type="radio"]:focus-visible ~ .checkbox-box.radio {
    outline: 3px solid #4251B7;
    outline-offset: 2px;
}



/* --- Global Footer Canvas Core Layout --- */
.global-footer {
    width: 100%;
    background: #00021B;
    padding: 80px 0; /* Creates balanced breathing room baseline */
    display: flex;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Clean desaturated edge definition */
}

.footer-inner {
    width: 100%;
    max-width: 1527px; /* Matches the maximum content grid alignment rule */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
}

/* --- Brand Module Formatting Resets --- */
.footer-logo {
    width: 184.24px;
    height: 81.97px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-v.smaller-v {
    width: 50px;
    height: 64px;
}

.logo-v.smaller-v .v-left {
    width: 16px;
    left: 8px;
}

.logo-v.smaller-v .v-right {
    width: 20px;
    left: 22px;
}

.brand-title.smaller-text {
    font-family: "BritanicaCondensedBold", sans-serif;
    font-size: 18px;
}

.brand-sub.smaller-sub-text {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 14px;
}

/* --- Central Navigation Box --- */
.footer-menu {
    width: 718px;
    height: 97px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.footer-menu-item {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 20px;
    letter-spacing: 0.02em; /* 2% */
    color: #FFFFFF;
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 200ms linear;
}

.footer-menu-item:hover {
    opacity: 1;
}

/* --- Right Side Studio Attribution Panel --- */
.footer-attribution {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.02em; /* 2% */
    color: #FFFFFF;
    opacity: 1;
    text-align: right;
    white-space: nowrap;
}


/* --- Hamburger Action Icon Base Styling --- */
.hamburger-toggle-btn {
    display: none; /* Kept completely out of desktop canvas viewports */
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    /* Strict Figma specification mappings */
    width: 25px;
    height: 22px;
    padding: 0;
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background-color: #C9A97F; /* Figma Border Color Value */
    display: block;
    transition: all 0.2s ease;
}

/* --- Mobile Menu Drawer Base Canvas Styling --- */
.mobile-menu-drawer-overlay {
    position: fixed;
    top: 0;
    left: -100%; /* Hidden off-canvas natively to execute standard left side slide-in */
    width: 100%;
    height: 100vh;
    background: #000725;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 40px 24px;
    box-sizing: border-box;
    overflow: hidden;
    
    /* Figma Prototyping Transition Configuration */
    transition: left 300ms ease-out;
}

/* Toggle expansion helper execution class */
.mobile-menu-drawer-overlay.is-active {
    left: 0;
}

.drawer-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 80px;
    position: relative;
    z-index: 10;
}

.drawer-logo-box {
    /* Strict Figma dimension parsing */
    width: 128.5px;
    height: 57.17px;
}
.drawer-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.drawer-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    /* Strict Figma close element boundaries */
    width: 24px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Menu Typography Links Stack Layout --- */
.mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    position: relative;
    z-index: 10;
}

.mobile-nav-link {
    /* Strict Figma Typography specifications mapping */
    font-family: "BritanicaLight", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 41px;
    line-height: 40px;
    letter-spacing: 0%;
    color: #C9A97F;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mobile-nav-link:hover, .mobile-nav-link.active {
    opacity: 0.7;
}

/* Decorative backdrop asset locked underneath active text list */
.drawer-matrix-bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: auto;
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
    left: 0;
    right: 0;
}


#bioTextAreaGroup,
#cvUploadGroup {
    /* grid-column: 1 / -1; */
    /* width: 100%; */
}

#bioTextAreaGroup .vector-textarea,
#cvUploadGroup .file-upload-trigger {
    width: 100%;
}


/* ==========================================================================
   Technion Vector Club - Mobile Responsive Layout Core (Max-Width: 768px)
   ========================================================================== */

@media screen and (max-width: 992px) {
    .floating-nav {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    
    /* --- Global Elements Override --- */
    body {
        overflow-x: hidden;
    }

    /* --- Hero Layout Remapping --- */
    .hero-container {
        min-height: auto;
        padding: 20px 0px 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header-navigation {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: auto;
        padding: 0;
        max-width: 310px;
        margin: 0 auto;
    }

    .logo {
        position: relative;
        left: 0 !important;
        top: 0 !important;
        width: 160px;
        height: auto;
    }

    /* Collapse horizontal menu bar into hidden or vertical stack flow per screenshot */
    .menu {
        display: none; /* Can be paired with a mobile hamburger toggle script if required */
    }

    .hero-content {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        margin-top: 60px;
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        max-width: 310px;
    }

    .sub-heading {
        font-size: 18px;
        line-height: 18px;
        margin-bottom: 10px;
        width: 100%;
        font-family: "Britanica-LightCondensed", sans-serif;
    }

    .main-heading {
        font-size: 41px;
        line-height: 41px;
        margin-bottom: 25px;
    }

    .main-heading br {
        display: none;
    }

    .button {
        position: relative;
        margin-top: 0;
        width: 100%;
        font-size: 18px;
        height: 42px;
        max-width: max-content;
        padding-inline: 0;
        max-width: 160px;
        margin-top: 10px;
    }

    .button .arrow svg {
        width: 24px;
    }

    /* Reposition background asset behind mobile title grid neatly */
    .vector-graphic-bg {
        width: 100%;
        height: 283px;
        position: relative;
        margin-top: -40px;
        opacity: 0.7;
    }

    /* --- About Section Flow Remapping --- */
    .about-container {
        padding: 40px 20px;
    }

    .about-grid {
        flex-direction: column;
        align-items: center;
        gap: 9px;
        justify-content: flex-start;
        gap: 20px;
    }

    .kinetic-wrapper {
        width: 100%;
        max-width: 310px;
        height: 233px;
        aspect-ratio: 1 / 1;
    }

    .kinetic-heading {
        font-size: 41px;
        line-height: 41px;
    }

    .mission-wrapper {
        max-width: 100%;
        text-align: center;
    }

    .mission-text {
        margin-bottom: 0;
    }

    .body-light, .body-bold {
        font-size: 20px;
        line-height: 26px;
        text-align: start;
        max-width: 300px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .partners-logos {
        justify-content: flex-start;
        gap: 24px;
        margin-top: 30px;
        gap: 20px;
    }

    .logo-t3,
    .logo-technion {
        width: auto;
        height: auto;
        opacity: 1;
    }
    .logo-box img {
        height: 44px;
        width: auto;
    }

    /* --- Card Deck Section Flow Remapping --- */
    .cards-container {
        padding: 60px 0px;
        max-width: 310px;
        margin: 0 auto;
    }

    .cards-header {
        margin-bottom: 40px;
    }

    .cards-main-heading {
        font-size: 41px;
        line-height: 41px;
        margin-bottom: 20px;
    }

    .cards-sub-paragraph {
        font-size: 20px;
        line-height: 22px;
        display: block;
        color: #BAB8B8;
    }

    .cards-sub-paragraph .highlight-bold {
        display: b
    }

    /* Transform row structure into a vertical column scroll */
    .cards-deck {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 16px;
    }

    .vector-card {
        /* width: 100% !important; */
        /* max-width: 340px; */
        height: auto !important;
        /* min-height: 240px; */
    }

    .vector-card .card-title {
        font-size: 28px;
        line-height: 36px;
    }

    /* --- Events Container Panel Flow Remapping --- */
    .events-container {
        padding: 60px 0px 0;
    }

    .events-main-header {
        flex-direction: column;
        align-items: anchor-center;
        gap: 0;
        display: flex;
        flex-flow: row;
        padding-inline: 20px;
        margin-bottom: 30px;
    }

    .events-title {
        font-size: 41px;
        line-height: 41px;
        order: 0; /* Placed cleanly above side buttons control matrix on mobile viewport screen heights */
    }

    .nav-event-btn {
        font-size: 22px;
        font-size: 0;
    }

    .nav-event-btn svg {
        width: 30px;
    }

    .event-inner-box {
        width: 100%;
        height: auto;
        grid-template-columns: 1fr; /* Single column breakdown */
    }

    .event-details-panel {
        padding: 40px;
        margin: 0 auto;
    }

    .event-meta {
        font-size: 20px;
        line-height: 22px;
    }

    .event-heading {
        font-size: 41px;
        line-height: 41px;
    }

    .event-heading br {
        display: none;
    }

    .event-description {
        font-size: 18px;
        line-height: 24px;
    }

    .timeline-row {
        font-size: 18px;
        line-height: 24px;
    }

    .timeline-row .sub-desc {
        margin-left: 0;
        display: block;
        margin-top: 6px;
    }

    /* Speakers Container Fixed Adjustments */
    .speakers-system-wrapper {
        grid-template-columns: 1fr; /* Strip down to single slot column array */
        width: 100%;
        gap: 24px;
    }

    .speaker-card {
        width: 100% !important;
    }

    .button-register {
        width: 100%;
        max-width: 211px;
        margin: 0 auto;
        height: 42px;
        font-size: 20px;
        line-height: 2;
        width: max-content;
        max-width: 100%;
        padding-inline: 15px;
        padding-bottom: 5px;
        margin: 0;
    }

    .button-register .arrow svg {
        width: 20px;
    }

    /* Hide background elements to keep layout legible on mobile devices */
    .event-graphic-panel {
        display: none;
    }

    /* --- Interactive Registration Form Flow Remapping --- */
    .form-container {
        padding: 0 0 60px 0;
        max-width: 310px;
        margin: 0 auto;
        min-height: 1px;
        margin-top: 0;
        max-width: 100%;
    }

    .form-title {
        font-size: 46px;
        line-height: 52px;
        width: 310px;
        max-width: 100%;
        margin: 20px auto;
    }

    .form-subtext {
        font-size: 20px;
        line-height: 26px;
        width: 310px;
        max-width: 100%;
        margin: 0 auto;
    }

    .vector-data-form {
        max-width: 100%;
    }

    .form-grid {
        grid-template-columns: 1fr; /* Grid item conversion down to basic unified flow stack */
        gap: 16px;
    }

    .input-group, .split-input-wrapper, .custom-dropdown, button.dropdown-trigger, .dropdown-panel {
        width: 100% !important;
    }

    .split-input-wrapper {
        flex-direction: column;
        gap: 16px;
        height: auto;
    }

    .split-input-wrapper .input-group.split-half {
        width: 100%;
    }

    .vector-textarea {
        width: 100%;
    }

    .file-upload-trigger {
        width: 100%;
    }

    .disclaimer-text {
        font-size: 20px;
        line-height: 22px;
    }

    .form-footer {
        justify-content: center;
        margin-top: 20px;
    }

    .button-submit {
        width: 100%;
        max-width: 280px;
        width: 147px;
        height: 45px;
        font-size: 20px;
    }

    .custom-disclaimer-box {
        width: 26px;
        height: 26px;
    }

    .custom-disclaimer-box .checkmark-icon {
        top: 5.96px;
        left: 5.52px;
    }

    .button-submit .arrow {
        font-size: 50px;
    }

    .button-submit .arrow svg {
        width: 24px;
    }

    .form-canvas-vector-bg {
        display: none; /* Clear backdrop artifact clipping on skinny device panels */
        display: block;
        top: -7%;
        left: -85%;
    }

    /* --- Global Footer Area Flow Remapping --- */
    .global-footer {
        padding: 80px 20px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
        width: 128px;
        height: 58px;
        margin-bottom: 20px;
    }

    .footer-logo img{
        width: auto;
        height: 100%;
    }

    .footer-menu {
        /* flex-direction: column; */
        /* height: auto; */
        /* width: 100%; */
        /* gap: 20px; */
        gap: 0;
        max-width: 100%;
        gap: 0 20px;
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        gap: 20px;
        margin: 20px;
    }

    .footer-menu-item {
        font-size: 20px;
    }

    .footer-attribution {
        text-align: center;
        opacity: 0.65;
    }

    .speaker-img {
        width: 70px;
        height: 70px;
    }

    .speaker-name {
        font-size: 16px;
        line-height: 18px;
    }

    .speaker-topic {
        font-size: 16px;
        line-height: 18px;
    }

    .speaker-links, .speaker-links a {
        font-size: 16px;
        line-height: 18px;
    }

}

@media screen and (max-width: 768px) {
    /* Reveal Hamburger element trigger on mobile devices */
    .hamburger-toggle-btn {
        display: flex;
    }

    /* Strict mobile resizing configuration override */
    .nav-logo-asset {
        width: 128.5px;
        height: 57.17px;
    }

    .header-navigation {
        padding: 24px 0px;
    }
}


@media screen and (max-width: 768px) {
    
    /* 1. Master Container Window Frame */
    .cards-slider-container.swiper {
        width: 100% !important;
        max-width: 340px !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 auto !important;
        display: block !important; /* Forces layout tracking visibility */
    }

    /* 2. Swiper Layout Track Flex Engine */
    .cards-deck.swiper-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: unset !important;  /* ← זה החסר */
        width: 100% !important;
    }

    /* 3. Slide Element Specific Layout Overrides */
    .vector-card.swiper-slide {
        /* width: 100% !important; */
        /* flex-shrink: 0 !important; */
        /* height: auto !important; */
        /* min-height: 240px; */
        /* display: flex !important; */
        /* flex-direction: column !important; */
        /* justify-content: flex-start !important; */
        /* box-sizing: border-box !important; */
        /* visibility: visible !important; */
        /* opacity: 1 !important; */
    }

    /* Force Active Slide color state manually if needed */
    .vector-card.swiper-slide-active {
        /* background: #C9A97F !important; */
    }

    /* --- Pagination Control Matrix Realignment --- */
    .cards-dots-wrapper.swiper-pagination {
        position: relative !important;
        bottom: 0 !important;
        margin: 32px 0 40px 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        z-index: 50 !important;
    }

    .cards-dots-wrapper .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        opacity: 1 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }

    .cards-dots-wrapper .swiper-pagination-bullet-active {
        background: #C9A97F !important;
        transform: scale(1.2) !important;
    }
}

@media screen and (max-width: 768px) {
    
    /* 1. מיכל הסליידר הראשי - קובע את מסגרת הצפייה הכללית */
    .cards-slider-container.swiper {
        width: 100%;
        max-width: 340px; /* רוחב המסגרת שבה יראו את הכרטיס */
        overflow: hidden;
        position: relative;
        margin: 0 auto;
    }

    /* 2. מסילת הכרטיסים של סוויפר (מנקים הגדרות CSS ידניות קשיחות) */
    .cards-deck.swiper-wrapper {
        display: flex;
        gap: 0; /* הרווח מנוהל כעת ישירות מה-JS בעזרת spaceBetween */
        padding: 0;
        margin: 0;
    }

    /* 3. עיצוב הכרטיס הבודד */
    .vector-card.swiper-slide {
        /* display: flex; */
        /* flex-direction: column; */
        /* justify-content: flex-start; */
        /* height: 339px; */
        /* background: #9094A6; */
        /* opacity: 1; */
        /* box-sizing: border-box; */
        
        /* הסרת מיקומים אבסולוטיים שעלולים לשבש את הגלילה */
        /* position: relative; */
        /* top: auto; */
        /* left: auto; */
    }

    /* צבע רקע לכרטיס הפעיל הנוכחי */
    .vector-card.swiper-slide-active {
        /* background: #C9A97F; */
    }

    /* --- נקודות הניווט (Pagination) --- */
    .cards-dots-wrapper.swiper-pagination {
        position: relative;
        bottom: 0;
        margin: 32px 0 40px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .cards-dots-wrapper .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.3);
        opacity: 1;
        margin: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .cards-dots-wrapper .swiper-pagination-bullet-active {
        background: #C9A97F;
        transform: scale(1.2);
    }
}

@media screen and (max-width: 768px) {

    .cards-slider-container.swiper {
        height: auto !important;
    }

    .vector-card.swiper-slide {
        /* height: auto !important; */
        /* height: 226px !important; */
    }


    .button-apply {
        font-size: 20px;
        max-width: 100%;
        height: 42px;
        width: max-content;
        padding-inline: 20px;
    }

    .button-apply .arrow svg {
        width: 24px;
    }

    .vector-input {
        height: 60px;
        font-size: 20px;
        line-height: 20px;
    }

}


.events-swiper {
    width: 1527px;
    overflow: hidden;
}

.events-swiper .swiper-slide {
    width: 100%;
}

.events-swiper .event-inner-box {
    width: 100%;
}

.events-swiper {
    height: auto;
}

.events-swiper .swiper-wrapper {
    align-items: stretch;
}

.events-swiper .swiper-slide {
    height: auto;
}

.events-swiper .event-inner-box {
    height: 100%;
}

/* ==========================================================================
   Breakpoint: 1440px
   ========================================================================== */
@media screen and (max-width: 1440px) {

    .logo {
        left: clamp(20px, 3vw, 94px);
    }

    .menu {
        left: clamp(300px, 40vw, 601px);
        width: clamp(500px, 50vw, 718px);
    }

    .hero-content {
        left: clamp(80px, 10vw, 197px);
    }

    .event-inner-box {
        width: 100%;
    }

    .events-swiper {
        width: 100%;
    }

    .events-main-header {
        padding-inline: clamp(20px, 2vw, 0px);
    }

    .about-grid {
        padding-inline: clamp(20px, 3vw, 0px);
    }

    .cards-header {
        padding-inline: 0;
    }

    .cards-deck {
        padding-inline: clamp(20px, 3vw, 0px);
    }

    .speakers-system-wrapper {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .speaker-card {
        width: 100%;
    }

    .body-light br {
        display: none;
    }
}


/* ==========================================================================
   Breakpoint: 1280px
   ========================================================================== */
@media screen and (max-width: 1280px) {

    .menu {
        left: clamp(280px, 35vw, 500px);
        width: clamp(460px, 55vw, 650px);
    }

    .menu-item {
        font-size: clamp(18px, 1.6vw, 24px);
    }

    .event-inner-box {
        grid-template-columns: 1fr 1fr;
    }

    .event-details-panel {
        padding: clamp(40px, 3.5vw, 70px)  clamp(40px, 3.5vw, 70px) clamp(30px, 4vw, 80px);
    }

    .cyborg-head-layer {
        width: 100%;
    }

    .vector-field-overlay {
        width: 60%;
    }

    .vector-card {
        width: clamp(200px, 18vw, 297px);
    }

    .about-grid {
        gap: clamp(16px, 2vw, 24px);
        padding-inline: 40px;
    }

    .kinetic-wrapper {
        width: clamp(400px, 45vw, 655px);
    }

    .form-grid {
        grid-template-columns: 1fr 1fr;
        /* max-width: 90vw; */
    }

    .vector-data-form {
        max-width: 90vw;
    }
}


/* ==========================================================================
   Breakpoint: 1024px
   ========================================================================== */
@media screen and (max-width: 1024px) {

    .hero-container {
        /* min-height: clamp(700px, 55vh, 1080px); */
    }

    .hero-content {
        left: clamp(40px, 5vw, 120px);
        top: clamp(200px, 25vh, 360px);
    }

    .menu {
        display: none;
    }

    .hamburger-toggle-btn {
        display: flex;
        position: absolute;
        right: 0;
        /* top: 100px; */
    }

    .event-inner-box {
        grid-template-columns: 1fr;
    }

    .event-graphic-panel {
        display: none;
    }

    .about-grid {
        flex-direction: column;
        align-items: center;
        padding-inline: 40px;
        gap: 40px;
    }

    .kinetic-wrapper {
        width: 100%;
        max-width: 500px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .mission-wrapper {
        max-width: 100%;
    }

    .cards-deck {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .vector-card {
        width: clamp(200px, 44%, 297px);
        height: auto;
    }

    .vector-card.active,
    .vector-card:hover {
        height: auto;
    }

    .form-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 90vw;
        gap: 16px;
        display: flex;
        flex-wrap: wrap;
        display: flex !important;
        margin-bottom: 20px;
    }

    .vector-data-form {
        max-width: 100%;
        width: 310px;
        margin: 0 auto;
    }

    .input-group,
    .custom-dropdown,
    .dropdown-trigger,
    .dropdown-panel {
        width: 100%;
    }

    .speakers-system-wrapper {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .speaker-card {
        width: 100%;
    }

    .footer-menu {
        width: auto;
        flex-wrap: wrap;
        gap: 16px 24px;
        justify-content: center;
        height: auto;
    }

    .footer-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }
}

/* ==========================================================================
   Event Registration Popup
   ========================================================================== */

.vc-event-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 7, 37, 0.85);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.vc-event-overlay.is-open {
    display: flex;
}

.vc-event-popup {
    position: relative;
    background: #00021B;
    width: 100%;
    max-width: 560px;
    padding: 60px 50px;
    box-sizing: border-box;
    animation: fadeIn 0.3s ease forwards;
}

.vc-popup-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    transition: opacity 0.2s linear;
}

.vc-popup-close:hover {
    opacity: 0.6;
}

/* שם האירוע — Britanica Light 41px */
.vc-popup-event-title {
    font-family: "BritanicaLight", sans-serif;
    font-weight: 400;
    font-size: 41px;
    line-height: 40px;
    letter-spacing: 0%;
    color: #C9A97F;
    margin-bottom: 8px;
}

/* subtitle האירוע — CondensedRegular 20px */
.vc-popup-event-subtitle {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.02em;
    color: #C9A97F;
    margin-bottom: 8px;
}

/* מטא האירוע (תאריך | שעה | מיקום) */
.vc-popup-event-meta {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0.02em;
    color: #BAB8B8;
    margin-bottom: 24px;
}

/* הוראה למילוי */
.vc-popup-instruction {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: #BAB8B8;
    margin-bottom: 20px;
}

/* Thank You label */
.vc-popup-thankyou-label {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #BAB8B8;
    margin-bottom: 8px;
}

/* Sorry title */
.vc-popup-title {
    font-family: "BritanicaLight", sans-serif;
    font-size: 41px;
    line-height: 40px;
    color: #C9A97F;
    margin-bottom: 12px;
}

/* Sorry sub-label */
.vc-popup-sorry-label {
    font-family: "BritanicaCondensedBold", sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #FFFFFF;
    margin-bottom: 12px;
}

/* Body text */
.vc-popup-subtitle {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #BAB8B8;
    margin-bottom: 28px;
}

.vc-popup-field {
    margin-bottom: 16px;
}

.vc-popup-input {
    width: 100%;
    height: 60px;
    background: #C9A97F;
    border: none;
    outline: none;
    padding: 0 20px;
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 20px;
    color: #0A102F;
    box-sizing: border-box;
}

.vc-popup-input::placeholder {
    color: rgba(10, 16, 47, 0.6);
}

.vc-popup-input.field-invalid {
    box-shadow: inset 0 0 0 2px #FF4D4D;
}

.vc-popup-error {
    display: block;
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 13px;
    color: #FF4D4D;
    margin-top: 4px;
    min-height: 18px;
}

.vc-popup-submit,
.vc-popup-close-btn {
    height: 60px;
    border-radius: 50px;
    padding: 0 28px;
    background: #C9A97F;
    color: #0A102F;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: "BritanicaCondensedBold", sans-serif;
    font-size: 24px;
    margin-top: 8px;
    transition: all 300ms linear;
}

.vc-popup-submit .arrow,
.vc-popup-close-btn .arrow {
    display: inline-flex;
    transition: transform 0.25s linear;
}

.vc-popup-submit:hover,
.vc-popup-close-btn:hover {
    background: #d9b98f;
}

.vc-popup-submit:hover .arrow,
.vc-popup-close-btn:hover .arrow {
    transform: translateX(4px);
}

/* Join the Vector link בפופאפ Sorry */
.vc-popup-join-link {
    display: inline-flex;
    align-items: center;
    height: 60px;
    border-radius: 50px;
    padding: 0 28px;
    background: #C9A97F;
    color: #0A102F;
    text-decoration: none;
    font-family: "BritanicaCondensedBold", sans-serif;
    font-size: 24px;
    transition: background 300ms linear;
    cursor: pointer;
}

.vc-popup-join-link:hover {
    background: #d9b98f;
}

.nav-event-btn--hidden {
    visibility: hidden;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .vc-event-popup {
        padding: 40px 24px;
        margin: 20px;
    }

    .vc-popup-event-title,
    .vc-popup-title {
        font-size: 28px;
        line-height: 32px;
    }
}

/* ============================================================
   Duplicate Registration Screen
   ============================================================ */
.duplicate-screen-wrapper {
    /* Inherits .success-screen-wrapper layout */
    /* max-width: 640px !important; */
}
.duplicate-message {
    font-family: "BritanicaCondensedLight", sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #FFFFFF;
    white-space: normal;
}
.duplicate-message a {
    color: #C9A97F;
    text-decoration: underline;
}

/* ============================================================
   Success screen — force sentence onto one line on desktop
   ============================================================ */
.success-subtext {
    white-space: nowrap;
    overflow: visible;
}

/* ============================================================
   Fix: background image bleed / smearing (form-canvas-vector-bg)
   ============================================================ */
.form-canvas-vector-bg {
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    width: auto;
}
.form-container {
    position: relative;
    overflow: hidden;
}


/* ============================================================
   Server Error Banner — shown when the AJAX submit fails
   ============================================================ */
.server-error-banner {
    width: 100%;
    max-width: 986px;
    margin-top: 24px;
    padding: 16px 20px;
    border-radius: 8px;
    background: rgba(255, 77, 77, 0.12);
    border: 1px solid #FF4D4D;
}
.server-error-text {
    font-family: "BritanicaCondensedRegular", sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #FF4D4D;
}

/* ============================================================
   Scroll Anchor Offset — prevents floating nav / header from
   covering section titles when scrolling/clicking nav links
   ============================================================ */
#about-section,
#cards-section,
#events-section,
#join-the-vector {
    scroll-margin-top: 120px;
}

@media screen and (max-width: 768px) {
    #about-section,
    #cards-section,
    #events-section,
    #join-the-vector {
        scroll-margin-top: 90px;
    }
}