/* Fonts and theme — copy the SAME setup as Description/Experiments */
@font-face {
    font-family: 'Blinker';
    src: url('https://static.igem.wiki/teams/5836/fonts/blinker/blinker-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}    /* Push cycle left, give MUCH more space to card */
    .cycle-row {
        grid-template-columns: minmax(400px, 1fr) minmax(620px, 2fr);
        gap: clamp(0.4rem, 1vw, 1rem);
        /* Card now gets DOUBLE the space, even smaller gap */
    }nt-face {
    font-family: 'Raleway';
    src: url('https://static.igem.wiki/teams/5836/fonts/raleway/raleway-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nixie One';
    src: url('') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('https://static.igem.wiki/teams/5836/fonts/fraunces/fraunces-72pt-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #0b1320;            /* dark blue */
    --gold: #d7af6b;          /* titles/gears */
    --blue: #afc1d0;          /* subsection titles */
    --text: #ffffff;          /* body text */
    --card-border: rgba(215, 175, 107, 0.6);
    --card-border-soft: rgba(215, 175, 107, 0.3);
}

body,
#page_content,
.main-content,
.container-fluid,
main {
    background-color: var(--bg) !important;
}

/* HERO (same proportions/feel as other pages; no nav on this page) */
.engineering-hero {
    background-color: var(--bg);
    min-height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    margin-top: -20px;
    padding-top: 20px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
}

.hero-content {
    z-index: 2;
    position: relative;
    text-align: center;
}

.hero-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.5rem, 6vw, 8rem);
    font-weight: bold;
    color: var(--gold);
    line-height: 1.1;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.05em;
    display: block;
    margin: 0;
    /* initial hidden state; JS will slide it in */
    opacity: 0 !important;
    transform: translateX(-300px) !important;
    transition: none !important;
}

.gears-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gear {
    position: absolute;
    opacity: 0.85;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
    opacity: 0;
}

.gear-left {
    left: 14%;
    top: 25%;
    width: min(25vw, 320px);
}

.gear-right {
    right: 11%;
    top: 42%;
    width: min(25vw, 320px);
}

.gear,
img.gear {
    /* tint gears gold if they are SVGs without fill */
    color: var(--gold);
}

/* MAIN */
.engineering-main-content {
    background-color: var(--bg);
    padding: 1rem 0;
    min-height: 100vh;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: -1px;
}

.content-frame {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--bg);
}

/* ENSURE CONTENT FRAME DOESN'T INTERFERE WITH FIRST CYCLE CENTERING */
.content-frame #cycle-1 {
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Typography — reuse Description/Experiments sizes/colors */
.section-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: bold;
    color: var(--gold);
    margin: 1rem 0 1.5rem 0;
    line-height: 1.2;
}

.section-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--gold);
    margin-top: 1rem;
}

.paragraph {
    font-family: 'Nixie One', serif;
    font-size: clamp(1.3rem, 1.7vw, 1.7rem);
    color: var(--text);
    line-height: 1.6;
    margin: 1rem 0 2.5rem 0;
}

.paragraph.left-align {
    text-align: left;
}

/* --- Stack each cycle vertically, centered --- */
.cycle-row {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;   /* center the donut + content horizontally */
    align-items: start;
    row-gap: clamp(0.4rem, 1.0vw, 1.0rem) !important;  /* Much closer for 1023px+ screens */
    margin-top: 10rem; /* Increased from 2rem to 4rem for bigger gap from paragraph */
}

/* ENSURE FIRST CYCLE ROW IS CENTERED - FORCE OVERRIDE */
#cycle-1 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    row-gap: clamp(1.5rem, 3vw, 3rem) !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ENSURE BOTH CHILDREN OF FIRST CYCLE ARE CENTERED */
#cycle-1 > * {
    justify-self: center !important;
    align-self: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* add a comfortable gap between the two rows, without breaking responsiveness */
#cycle-2 { 
    margin-top: clamp(2rem, 4vw, 3rem); 
}

/* Center the donut block */
.cycle-graphic {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ENSURE FIRST CYCLE IS PROPERLY CENTERED - FORCE OVERRIDE */
#cycle-1 .cycle-graphic {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
}

#cycle-1 .cycle-instruction-text {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Donut max sizes (scale with viewport) - Moderately sized for desktop */
.cycle-graphic .cycle-svg {
    max-width: clamp(350px, 28vw, 400px) !important; /* Moderately sized for 1023px+ screens */
    width: clamp(350px, 28vw, 400px) !important; /* OVERRIDE the width: 100% rule */
    margin: 0 auto !important;
}

.cycle-graphic img {
    width: 100%;
    max-width: 1350px;
    height: auto;
    display: block;
}

/* Curved instruction text above cycle - CENTERED */
.cycle-instruction-text {
    position: relative;
    width: 100%;
    margin-bottom: -2rem; /* Higher positioning for most devices */
    z-index: 5;
    display: flex;
    justify-content: center;
    text-align: center;
}

.instruction-curve-svg {
    width: 100%;
    height: auto;
    max-width: 880px;
    margin: 0 auto;
    display: block;
    pointer-events: none;
}

.instruction-text {
    font-family: 'Fraunces', serif;
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 500;
    fill: #afc1d0;
    text-anchor: middle;
    dominant-baseline: middle;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* OpenDyslexic mode - bigger instruction text */
body.accessibility-mode .instruction-text {
    font-size: clamp(15px, 1.6vw, 20px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

.cycle-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ENSURE FIRST CYCLE CONTENT IS CENTERED */
#cycle-1 .cycle-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 1rem !important;
}

.cycle-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--blue);                 /* light blue heading OUTSIDE the card */
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.75rem 0;              /* Center the title and keep it close to the card */
    text-align: center;                 /* centered under the donut */
}

/* Yellow bordered card — visually matches a protocols item but is static */
.engineering-card {
    border: 4px solid var(--card-border);
    border-radius: 12px;
    background: rgba(11, 19, 32, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    width: min(1100px, 92%);   /* wider reading column */
    margin: 0 auto;
    padding: clamp(1.25rem, 1.8vw, 1.75rem);
}

.engineering-card:hover {
    border-color: rgba(215, 175, 107, 0.8);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.card-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr; /* a bit more room for text */
    gap: clamp(1rem, 1.6vw, 1.8rem);
    align-items: center;
}

/* When no image, make text take full width */
.card-grid:has(.card-image[hidden]) {
    grid-template-columns: 1fr;
    gap: 0;
}

/* Fallback for browsers that don't support :has() */
.card-grid.text-only {
    grid-template-columns: 1fr;
    gap: 0;
}

.card-text p {
    font-family: 'Nixie One', serif;
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);      /* bigger for readability */
    color: var(--text);
    line-height: 1.65;
    margin: 0;
    text-align: left; /* left-aligned text inside */
    max-width: 80ch;                              /* readable measure */
    margin-inline: auto;                          /* center the column visually */
}

.card-image img {
    width: 100%;
    max-width: clamp(520px, 48vw, 860px);         /* larger figure width */
    height: auto;
    display: block;
    border: 1px solid var(--card-border-soft);
    border-radius: 8px;
}

/* Figure captions inside your inline HTML – ensure readable size */
.card-text p em,
.card-text p i {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
}

/* FONTS FOR ALL SCREENS 1024px+ - SLIGHTLY SMALLER */
@media (min-width: 1024px) {
    /* Main paragraph text - a bit smaller */
    .card-text p {
        font-size: clamp(1.35rem, 1.8vw, 1.8rem) !important;
        line-height: 1.6 !important;
    }
    
    /* Overview text - same size as card text */
    .paragraph {
        font-size: clamp(1.35rem, 1.8vw, 1.8rem) !important;
        line-height: 1.6 !important;
    }
    
    /* Body text class - slightly smaller */
    .body-text {
        font-size: clamp(1.1rem, 1.5vw, 1.5rem) !important;
        line-height: 1.6 !important;
    }
    
    /* Section titles - a bit smaller */
    .section-title {
        font-size: clamp(2.4rem, 4.2vw, 4.2rem) !important;
    }
    
    /* Cycle titles - a bit smaller */
    .cycle-title {
        font-size: clamp(1.6rem, 2.0vw, 2.0rem) !important;
    }
    
    /* Figure descriptions - EVEN SMALLER font size */
    .card-text p em,
    .card-text p i {
        font-size: clamp(0.5rem, 0.65vw, 0.6rem) !important;
    }
    
    /* Figure caption small class - EVEN SMALLER */
    .figure-caption-sm {
        font-size: clamp(0.45rem, 0.6vw, 0.55rem) !important;
    }
    
    /* Instruction text - MUCH SMALLER */
    .instruction-text {
        font-size: clamp(12px, 1.2vw, 14px) !important;
    }
}

/* Small laptop optimization (1024x600 and similar) */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* Adjust content frame for smaller laptop screens */
    .content-frame {
        width: 98%;
        max-width: 1250px;
    }
    
    /* Cycle already stacked vertically and centered */
    .cycle-row {
        row-gap: clamp(0.3rem, 0.7vw, 0.8rem) !important; 
    }

    /* Donut sizing for small laptops - Moderately sized */
    .cycle-graphic .cycle-svg {
        max-width: clamp(320px, 26vw, 370px) !important;
        width: clamp(320px, 26vw, 370px) !important;
    }
}

/* Specific optimization for 1024x600 screens (Nest Hub) */
@media (min-width: 1024px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 600px) {
    /* Donut sizing for 1024x600 (Nest Hub) - Moderately sized */
    .cycle-graphic .cycle-svg {
        max-width: clamp(310px, 25vw, 360px) !important;
        width: clamp(310px, 25vw, 360px) !important;
    }

    /* Card sizing for small laptops */
    .engineering-card {
        width: min(1000px, 94%);
    }

    .card-grid {
        grid-template-columns: 1.2fr 0.9fr;
        gap: clamp(0.8rem, 1.4vw, 1.6rem);
    }
    
    /* Text-only responsive for small laptops */
    .card-grid:has(.card-image[hidden]),
    .card-grid.text-only {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Keep paragraphs readable */
    .card-text p {
        font-size: clamp(1.15rem, 1.5vw, 1.5rem);
        max-width: 75ch;
        line-height: 1.6;
    }
    
    /* Tiny push right for Overview title only */
    .section-title {
        margin-left: 0.95rem;  /* Tiny push right for Overview word and line */
    }
    .paragraph {
        margin-left: 0.95rem;  /* Tiny push right for Overview word and line */
    }
}

/* Medium laptop optimization (1200px-1279px) - excludes 1280x800 */
@media (min-width: 1200px) and (max-width: 1279px) {
    /* Adjust content frame */
    .content-frame {
        width: 96%;
        max-width: 1300px;
    }
    
    /* Cycle already stacked vertically and centered */
    .cycle-row {
        row-gap: clamp(0.3rem, 0.7vw, 0.7rem)!important;
    }

    /* Donut sizing for medium laptops - Moderately sized */
    .cycle-graphic .cycle-svg {
        max-width: clamp(340px, 27vw, 390px) !important;
        width: clamp(340px, 27vw, 390px) !important;
    }

    /* Card sizing for medium laptops */
    .engineering-card {
        width: min(1050px, 92%);
    }

    .card-grid {
        grid-template-columns: 1.2fr 0.9fr;
        gap: clamp(1rem, 1.5vw, 1.7rem);
    }
    
    /* Text-only responsive for medium laptops */
    .card-grid:has(.card-image[hidden]),
    .card-grid.text-only {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .card-text p {
        font-size: clamp(1.18rem, 1.55vw, 1.55rem);
        max-width: 78ch;
        line-height: 1.62;
    }
}

/* Larger laptop optimization (1280px-1439px but not 1280x800) */
@media (min-width: 1280px) and (max-width: 1439px) and (min-height: 900px) {
    /* Adjust content frame */
    .content-frame {
        width: 94%;
        max-width: 1350px;
    }
    
    /* Cycle already stacked vertically and centered */
    .cycle-row {
        row-gap: clamp(0.3rem, 1.0vw, 1.0rem)!important;
    }

    /* Donut sizing for larger laptops - Moderately sized */
    .cycle-graphic .cycle-svg {
        max-width: clamp(350px, 28vw, 400px) !important;
        width: clamp(350px, 28vw, 400px) !important;
    }

    /* Card sizing for larger laptops */
    .engineering-card {
        width: min(1100px, 90%);
    }

    .card-grid {
        grid-template-columns: 1.2fr 0.85fr;
        gap: clamp(1.1rem, 1.6vw, 1.8rem);
    }

    .card-text p {
        font-size: clamp(1.2rem, 1.58vw, 1.58rem);
        max-width: 80ch;
        line-height: 1.65;
    }
}

/* Specific optimization for 1280x824 screens */
@media (min-width: 1280px) and (max-width: 1280px) and (min-height: 824px) and (max-height: 824px) {
    /* Adjust content frame */
    .content-frame {
        width: 92%;
        max-width: 1280px;
    }
    
    /* Cycle already stacked vertically and centered */
    .cycle-row {
        row-gap: clamp(1.3rem, 2.8vw, 2.8rem);
    }

    /* Donut sizing for 1280x824 - Moderately sized */
    .cycle-graphic .cycle-svg {
        max-width: clamp(340px, 27vw, 390px) !important;
        width: clamp(340px, 27vw, 390px) !important;
    }

    /* Card sizing for 1280x824 */
    .engineering-card {
        width: min(1050px, 92%);
    }

    .card-grid {
        grid-template-columns: 1.2fr 0.9fr;
        gap: clamp(1rem, 1.5vw, 1.7rem);
    }

    .card-text p {
        font-size: clamp(1.18rem, 1.55vw, 1.55rem);
        max-width: 78ch;
        line-height: 1.62;
    }
}

/* Specific optimization for 1280x800 screens */
@media (min-width: 1280px) and (max-width: 1280px) and (min-height: 800px) and (max-height: 800px) {
    /* Cycle already stacked vertically and centered */
    .cycle-row {
        row-gap: clamp(1.2rem, 2.5vw, 2.5rem);
    }

    /* Donut sizing for 1280x800 (Nest Hub Max) - Moderately sized */
    .cycle-graphic .cycle-svg {
        max-width: clamp(320px, 26vw, 370px) !important;
        width: clamp(320px, 26vw, 370px) !important;
    }

    /* Card sizing for 1280x800 */
    .engineering-card {
        width: min(1000px, 94%);
    }

    /* Give image inside card more space */
    .card-grid {
        grid-template-columns: 1.2fr 1.1fr;
        gap: clamp(1rem, 1.5vw, 1.7rem);
    }
    
    /* Text-only responsive for 1280x800 */
    .card-grid:has(.card-image[hidden]),
    .card-grid.text-only {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .card-text p {
        font-size: clamp(1.15rem, 1.5vw, 1.5rem);
        max-width: 75ch;
        line-height: 1.6;
    }
}

/* Large desktop optimization */
@media (min-width: 1440px) {
    /* Cycle already stacked vertically and centered */
    .cycle-row {
        row-gap: clamp(1.0rem, 1.6vw, 1.6rem);
    }
    
    /* Donut sizing for large desktops - Moderately sized */
    .cycle-graphic .cycle-svg {
        max-width: clamp(360px, 29vw, 410px) !important;
        width: clamp(360px, 29vw, 410px) !important;
    }

    /* Card sizing for large desktops */
    .engineering-card {
        width: min(1100px, 88%);
    }

    .card-grid {
        grid-template-columns: 1.15fr 0.9fr;
        gap: clamp(1.2rem, 1.7vw, 1.9rem);
    }
    
    /* Text-only responsive for large desktops */
    .card-grid:has(.card-image[hidden]),
    .card-grid.text-only {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .card-text p {
        font-size: clamp(1.22rem, 1.6vw, 1.6rem);
        max-width: 82ch;
        line-height: 1.65;
    }
    
    .card-image img { 
        max-width: clamp(560px, 50vw, 880px); 
    }
}

/* Specific adjustment for 1440x900 screens */
@media (min-width: 1440px) and (max-width: 1440px) and (min-height: 900px) and (max-height: 900px) {
    /* Adjust content frame */
    .content-frame {
        width: 88%;
        max-width: 1400px;
    }
}

/* Mobile & tablet keep stacking (no change), but ensure comfort */
@media (max-width: 900px) {
    .content-frame {
        width: 95%; /* More screen usage on mobile */
        padding: 1rem; /* Less padding for more content space */
    }
    
    .cycle-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .engineering-card { 
        width: 98%; /* Fill more of the screen */
    }
    
    .cycle-graphic img {
        max-width: 550px;
        margin: 0 auto;
    }
    
    /* Mobile sizing for both cycles - Better responsive sizing */
    .cycle-graphic .cycle-svg {
        max-width: clamp(280px, 85vw, 450px) !important;
        width: clamp(280px, 85vw, 450px) !important;
    }
    
    /* Responsive curved instruction text */
    .instruction-curve-svg {
        max-width: 360px;
    }
    
    .instruction-text {
        font-size: clamp(14px, 3.5vw, 18px);
    }
    
    /* OpenDyslexic mode - bigger for tablets */
    body.accessibility-mode .instruction-text {
        font-size: clamp(13px, 2.8vw, 18px) !important;
    }
    
    .card-grid { 
        grid-template-columns: 1fr; 
        gap: 1rem; 
    }
    
    .card-text p { 
        font-size: clamp(1.05rem, 1.2rem, 1.2rem); 
        max-width: 65ch; 
    }
    
    .card-image img { 
        max-width: 100%; 
    }
    
    .content-frame {
        width: 90%;
        padding: 1rem;
    }
}

/* Tablet and medium devices (481px to 900px) */
@media (min-width: 481px) and (max-width: 900px) {
    .cycle-instruction-text {
        margin-bottom: -2.5rem; /* Slightly higher for tablets */
        justify-content: center; /* Ensure centering on tablets */
    }
}

/* Large tablets and small laptops (901px to 1023px) */
@media (min-width: 901px) and (max-width: 1023px) {
    .cycle-instruction-text {
        margin-bottom: -2.2rem; /* Higher positioning */
        justify-content: center; /* Ensure centering */
    }
}

/* Medium laptops and up (1024px+) - keep default -2rem */
@media (min-width: 1024px) {
    .cycle-instruction-text {
        margin-bottom: -2rem; /* Higher positioning for larger screens */
        justify-content: center; /* Ensure centering on all larger screens */
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
        letter-spacing: 1px;
    }
    
    .content-frame {
        width: 98%;
        padding: 0.5rem;
    }
    
    /* Small phone card sizing - fill screen */
    .engineering-card { 
        width: 99% !important; 
        margin: 0 auto;
    }
    
    /* Small phone cycle sizing - responsive to screen */
    .cycle-graphic .cycle-svg {
        max-width: clamp(240px, 90vw, 360px) !important;
        width: clamp(240px, 90vw, 360px) !important;
    }
    
    /* Mobile curved instruction text */
    .instruction-text {
        font-size: clamp(12px, 4vw, 16px);
        font-weight: 600;
    }
    
    /* OpenDyslexic mode - bigger text for mobile */
    body.accessibility-mode .instruction-text {
        font-size: clamp(11px, 3.2vw, 15px) !important;
        font-weight: 500 !important;
    }
    
    .cycle-instruction-text {
        margin-bottom: -1.5rem;
        justify-content: center; /* Ensure centering on mobile */
    }
    
    /* Move gears more top and left on phones only */
    .gear-left {
        left: 4%;
        top: 42%;
    }
    
    .gear-right {
        right: 1%;
        top: 49%;
    }
}

/* Interactive cycle SVG (scoped) */
.cycle-svg { 
    width: 100%; 
    height: auto; 
    display: block; 
    pointer-events: auto;
}

.cycle-svg .seg { 
    cursor: pointer; 
    pointer-events: auto;
    position: relative;
    z-index: 10;
    outline: none;
    user-select: none;
}

.cycle-svg .seg path {
    transition: transform .22s ease, filter .22s ease, stroke .22s ease, opacity .22s ease;
    transform-box: fill-box;         /* needed so transforms affect the wedge only */
    transform-origin: center;
    stroke: rgba(11,19,32,0);        /* no visible stroke by default */
    stroke-width: 0;
    pointer-events: auto;
}

/* hover/focus highlight — glow only (no scale to avoid click interference) */
@media (hover:hover) {
    .cycle-svg .seg:hover path,
    .cycle-svg .seg:focus-visible path {
        stroke-width: 2;
    }
    
    /* Design segment glow */
    .cycle-svg .seg--design:hover path,
    .cycle-svg .seg--design:focus-visible path {
        filter: drop-shadow(0 0 20px rgba(28,63,96,.85));
        stroke: rgba(28,63,96,.9);
    }
    
    /* Build segment glow */
    .cycle-svg .seg--build:hover path,
    .cycle-svg .seg--build:focus-visible path {
        filter: drop-shadow(0 0 20px rgba(110,13,37,.85));
        stroke: rgba(110,13,37,.9);
    }
    
    /* Test segment glow */
    .cycle-svg .seg--test:hover path,
    .cycle-svg .seg--test:focus-visible path {
        filter: drop-shadow(0 0 14px rgba(215,175,107,.55));
        stroke: rgba(215,175,107,.8);
    }
    
    /* Learn segment glow */
    .cycle-svg .seg--learn:hover path,
    .cycle-svg .seg--learn:focus-visible path {
        filter: drop-shadow(0 0 14px rgba(177,212,224,.55));
        stroke: rgba(177,212,224,.8);
    }
}

/* label styling */
.cycle-svg .seg text {
    letter-spacing: .06em;
    text-anchor: middle;
    dominant-baseline: middle;
    font-size: clamp(30px, 1.4vw, 28px);
    pointer-events: none; /* label doesn't steal hover */
}

/* Smooth 0.75s sweep for the reveal ring */
.reveal-stroke {
    transition: stroke-dasharray .75s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cycle-svg .seg path { transition: none; }
    .reveal-stroke { transition: none; }
}

/* Ensure the cycle fits naturally where the <img> used to be */
.cycle-graphic .cycle-svg { 
    max-width: 1350px; 
    margin: 0 auto; 
    pointer-events: auto;
}

/* ========== SECOND CYCLE SVG STYLING (DUPLICATE OF FIRST) ========== */
#cycleSvg2 .seg { 
    cursor: pointer; 
    pointer-events: auto;
    position: relative;
    z-index: 10;
    outline: none;
    user-select: none;
}

#cycleSvg2 .seg path {
    transition: transform .22s ease, filter .22s ease, stroke .22s ease, opacity .22s ease;
    transform-box: fill-box;         /* needed so transforms affect the wedge only */
    transform-origin: center;
    stroke: rgba(11,19,32,0);        /* no visible stroke by default */
    stroke-width: 0;
    pointer-events: auto;
}

/* hover/focus highlight — glow only (no scale to avoid click interference) */
@media (hover:hover) {
    #cycleSvg2 .seg:hover path,
    #cycleSvg2 .seg:focus-visible path {
        stroke-width: 2;
    }
    
    /* Design segment glow */
    #cycleSvg2 .seg--design:hover path,
    #cycleSvg2 .seg--design:focus-visible path {
        filter: drop-shadow(0 0 20px rgba(28,63,96,.85));
        stroke: rgba(28,63,96,.9);
    }
    
    /* Build segment glow */
    #cycleSvg2 .seg--build:hover path,
    #cycleSvg2 .seg--build:focus-visible path {
        filter: drop-shadow(0 0 20px rgba(110,13,37,.85));
        stroke: rgba(110,13,37,.9);
    }
    
    /* Test segment glow */
    #cycleSvg2 .seg--test:hover path,
    #cycleSvg2 .seg--test:focus-visible path {
        filter: drop-shadow(0 0 14px rgba(215,175,107,.55));
        stroke: rgba(215,175,107,.8);
    }
    
    /* Learn segment glow */
    #cycleSvg2 .seg--learn:hover path,
    #cycleSvg2 .seg--learn:focus-visible path {
        filter: drop-shadow(0 0 14px rgba(177,212,224,.55));
        stroke: rgba(177,212,224,.8);
    }
}

/* label styling for second cycle */
#cycleSvg2 .seg text {
    letter-spacing: .06em;
    text-anchor: middle;
    dominant-baseline: middle;
    font-size: clamp(30px, 1.4vw, 28px);
    pointer-events: none; /* label doesn't steal hover */
}

/* Respect reduced motion for second cycle */
@media (prefers-reduced-motion: reduce) {
    #cycleSvg2 .seg path { transition: none; }
}

/* Ensure segments are clickable on all screen sizes */
@media (min-width: 900px) {
    .cycle-svg .seg {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    #cycleSvg2 .seg {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}

/* CSS hardening to prevent click interference */
.cycle-graphic { position: relative; z-index: 2; }
.cycle-content { position: relative; z-index: 1; }
.cycle-svg text { pointer-events: none; }

/* Ensure hover effects don't block clicks - FORCE pointer events */
.cycle-svg .seg {
    pointer-events: auto !important;
    cursor: pointer !important;
}
.cycle-svg .seg path {
    pointer-events: auto !important;
    cursor: pointer !important;
}
.cycle-svg .seg * {
    pointer-events: auto !important;
}
/* Keep hover glow but ensure clicks work during animation */
.cycle-svg .seg:hover,
.cycle-svg .seg:focus-visible {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
}
.cycle-svg .seg:hover path,
.cycle-svg .seg:focus-visible path {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ========== SAME CLICK HARDENING FOR SECOND CYCLE ========== */
/* CSS hardening to prevent click interference for second cycle */
#cycleSvg2 text { pointer-events: none; }

/* Ensure hover effects don't block clicks - FORCE pointer events for second cycle */
#cycleSvg2 .seg {
    pointer-events: auto !important;
    cursor: pointer !important;
}
#cycleSvg2 .seg path {
    pointer-events: auto !important;
    cursor: pointer !important;
}
#cycleSvg2 .seg * {
    pointer-events: auto !important;
}
/* Keep hover glow but ensure clicks work during animation for second cycle */
#cycleSvg2 .seg:hover,
#cycleSvg2 .seg:focus-visible {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
}
#cycleSvg2 .seg:hover path,
#cycleSvg2 .seg:focus-visible path {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Arrow controls: large, top-right of the card */
.engineering-card { position: relative; } /* keep card as positioning anchor */
.cycle-nav {
  position: absolute;
  top: -4.3rem;  /* MOVED MORE TOP - outside the card border */
  right: .25rem;
  display: flex;
  gap: .5rem;
  z-index: 5;
}
.cycle-btn {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.4rem, 3.6vw, 2.8rem); /* big */
  line-height: 1;
  background: transparent;
  color: #afc1d0;
  border: 2px solid rgba(175,193,208,.5);
  border-radius: .6rem;
  padding: .2rem .6rem;
  cursor: pointer;
}
.cycle-btn:hover { color: #d7af6b; border-color: rgba(215,175,107,.8); }

/* Cross-fade for donut + title + card (no layout shift) */
.fade-group {
  transition: opacity 2.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 2.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}
.is-fading { 
  opacity: 0; 
  transform: translateY(10px) scale(.99); 
  pointer-events: none;
  transition: opacity 2.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 2.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.fade-group:not(.is-fading) {
  transition: opacity 4s cubic-bezier(0.23, 1, 0.32, 1), transform 4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Perfect centering + responsive sizing for arc labels */
.cycle-svg .seg-label {
  font-family: 'Blinker', serif;
  font-weight: normal;
  letter-spacing: .06em;
  font-size: clamp(14px, 1.4vw, 22px);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;        /* labels never steal hover */
}
/* Contrast per quadrant (match your artwork) */
.cycle-svg .seg-label--design,
.cycle-svg .seg-label--build { 
  fill: #afc1d0;    /* light text on dark wedges */
  font-weight: 600; /* bold for DESIGN and BUILD only */
}
.cycle-svg .seg-label--test,
.cycle-svg .seg-label--learn { 
  fill: #1c3f60;    /* dark text on light wedges */
  font-weight: 700; /* make TEST and LEARN bold too */
}

/* Ensure TEST and LEARN labels don't have vertical drift - handled in SVG */

/* Color the card outline by selected cycle (no layout change) */
.engineering-card { transition: border-color .2s ease; }
.engineering-card[data-cycle="design"] { border-color: #1c3f60; }  /* DESIGN */
.engineering-card[data-cycle="build"]  { border-color: #6e0d25; }  /* BUILD  */
.engineering-card[data-cycle="test"]   { border-color: #d7af6b; }  /* TEST   */
.engineering-card[data-cycle="learn"]  { border-color: #b1d4e0; }  /* LEARN  */

/* Keep the card footprint steady while content swaps */
#cardText p { text-align: left; margin: 0; }
.card-image[hidden] { display: none !important; }
#cardImg { width: 100%; height: auto; display: block; }

/* Optional: slightly stronger top spacing for the second widget */
#cycle-2 { 
    margin-top: clamp(3rem, 5vw, 4rem); 
}

/* Small figure caption used in Wet-lab 3 / TEST */
.figure-caption-sm {
  font-style: italic;
  font-family: 'Nixie One', serif;
  line-height: 1.35;
  text-align: left;                      /* left-align (was centered) */
  font-size: clamp(0.68rem, 0.9vw, 0.8rem);
  color: #ffffff;
  margin: 0.5rem 0 0 0;
}

/* Normal body-size text block (match .card-text p size) */
.body-text {
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  line-height: 1.65;
  text-align: left;
}

/* Force top-left alignment for dry lab learn text */
.force-top-left {
  align-self: start !important;
  justify-self: start !important;
  vertical-align: top !important;
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Override card grid alignment for second cycle specifically */
#cycleCard2 .card-grid {
  align-items: start !important;
}

/* Additional override for card text in second cycle */
#cardText2 {
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Put image below text in dry lab cycle (like the rest) */
#cycleCard2 .card-grid {
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

/* Center the image in dry lab cycle */
#cycleCard2 .card-image {
  text-align: center !important;
  justify-self: center !important;
  align-self: center !important;
}

/* PHONE ONLY: Fix text size for DESIGN sections in first 3 cycles */
@media (max-width: 768px) {
  .engineering-card[data-cycle="design"] .card-text p,
  .engineering-card[data-cycle="design"] .body-text {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
    line-height: 1.4 !important;
  }
  
  .engineering-card[data-cycle="design"] .card-text p strong,
  .engineering-card[data-cycle="design"] .body-text strong {
    font-size: inherit !important;
  }
  
  /* Smaller DNA sequences on phones for design sections */
  .engineering-card[data-cycle="design"] .body-text[style*="Courier New"] {
    font-size: clamp(0.8rem, 3.2vw, 1.0rem) !important;
  }
}