/*
 * data2biology – Main Stylesheet
 * Palette extracted from logo: purple, warm orange, dark maroon
 * Fonts: Playfair Display (display) + Work Sans (body)
 */

:root {
    --purple:       #7B4F8A;
    --purple-light: #9B6FAA;
    --purple-pale:  #F0E6F4;
    --purple-dark:  #5A3468;
    --orange:       #D97638;
    --orange-light: #E8944F;
    --orange-pale:  #FEF0E4;
    --maroon:       #842346;
    --maroon-light: #A63A5E;

    --bg:           #FAFBFC;
    --bg-card:      #FFFFFF;
    --bg-dark:      #1A1028;
    --bg-muted:     #F3F1F5;
    --bg-warm:      #FAF5F0;

    --text:         #1A1A2E;
    --text-secondary:#4A5568;
    --text-muted:   #718096;
    --text-light:   #A0AEC0;
    --text-on-dark: #D0C8D8;

    --border:       #E2E0E8;
    --border-light: #EEEAF2;
    --radius:       8px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --shadow-sm:    0 2px 8px rgba(0,0,0,.04);
    --shadow:       0 2px 8px rgba(0,0,0,.06);
    --shadow-md:    0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:    0 12px 40px rgba(0,0,0,.12);

    --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;

    --nav-height:   72px;
    --container:    1400px;
    --ease:         cubic-bezier(.4,0,.2,1);

    /* Semantic aliases — referenced across pages/admin. Kept in sync with the brand palette above. */
    --accent:       var(--purple);
    --accent-glow:  var(--purple-light);
    --amber:        var(--orange);
    --bg-light:     var(--bg-muted);
    --font-mono:    'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--text);background:var(--bg);overflow-x:hidden}
a{color:var(--purple);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--purple-light)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--purple-pale);color:var(--purple-dark)}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 2rem}

/* Typography */
h1,h2,h3{font-family:var(--font-heading);font-weight:700;line-height:1.2;color:var(--text);letter-spacing:-.5px}
h1{font-size:clamp(2.2rem,5vw,3.5rem)}
.hero-home h1{font-size:clamp(2rem,4.2vw,3.1rem)}
.hero-home .lead{font-size:1.02rem}
h2{font-size:clamp(1.6rem,3.5vw,2.5rem)}
h3{font-size:clamp(1.1rem,2.5vw,1.5rem)}
h4,h5,h6{font-family:var(--font-body);font-weight:600}
.lead{font-size:1.1rem;color:var(--text-secondary);line-height:1.75}
.gradient-text{background:linear-gradient(135deg,var(--purple),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.section-label{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);display:flex;align-items:center;gap:10px;margin-bottom:14px;font-weight:600}
.section-label::before{content:'';width:28px;height:2px;background:linear-gradient(90deg,var(--purple),var(--orange));border-radius:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 26px;font-family:var(--font-body);font-size:.9rem;font-weight:500;border:none;border-radius:var(--radius);cursor:pointer;transition:all .25s var(--ease);text-decoration:none;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple-dark));color:#fff;box-shadow:0 2px 8px rgba(123,79,138,.25)}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(123,79,138,.3)}
.btn-secondary{background:var(--bg-card);color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{background:var(--bg-muted);border-color:var(--text-light);transform:translateY(-1px);box-shadow:var(--shadow);color:var(--text)}
.btn-orange{background:linear-gradient(135deg,var(--orange),#DA9720);color:#fff;box-shadow:0 2px 8px rgba(217,118,56,.25)}
.btn-orange:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(217,118,56,.3)}
.btn-outline{background:transparent;border:1.5px solid var(--purple);color:var(--purple)}
.btn-outline:hover{background:var(--purple);color:#fff;transform:translateY(-1px)}
.btn-sm{padding:8px 18px;font-size:.82rem}
.btn-lg{padding:14px 34px;font-size:.95rem;font-weight:600}

/* Navigation */
.site-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,224,232,.5);z-index:1000;transition:all .3s var(--ease)}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-size:1.35rem;color:var(--text)}
.nav-logo:hover{color:var(--text);opacity:.85}
.nav-logo img{height:47px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{padding:7px 16px;font-size:.9rem;font-weight:500;color:var(--text-secondary);border-radius:var(--radius);transition:all .2s var(--ease);position:relative}
.nav-links a:hover{color:var(--text);background:rgba(0,0,0,.03)}
.nav-links a.active{color:var(--purple)}
.nav-links a.active::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:2px;background:var(--orange);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-user{font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;border-radius:2px}

/* Hero */
.hero{margin-top:var(--nav-height);padding:3.25rem 2rem 2.75rem;background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);color:#fff;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="g" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23g)"/></svg>');opacity:.5}
.hero-content{max-width:var(--container);margin:0 auto;position:relative;z-index:1}
.hero h1{color:#fff;margin-bottom:1rem;animation:fadeUp .8s var(--ease)}
.hero .lead{color:rgba(255,255,255,.88);max-width:700px;animation:fadeUp .8s var(--ease) .15s backwards}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:2rem;animation:fadeUp .8s var(--ease) .3s backwards}

/* Home hero (larger, with deco) */
.hero-home{padding:6rem 2rem 5rem}
.hero-home .hero-content{max-width:680px}
/* Shift the headline block slightly left of centre so the empty gutter on the
   left is smaller and the helix on the right gets more room. */
@media(min-width:1100px){ .hero-home .hero-content{position:relative;left:-6%} }
.hero-deco{position:absolute;top:50%;right:8%;transform:translateY(-50%);opacity:.08;pointer-events:none;width:220px}

/* Page header (subpages) */
.page-header{padding:calc(var(--nav-height) + 52px) 0 52px;background:var(--bg-muted);border-bottom:1px solid var(--border-light)}
.page-header h1{margin-bottom:10px}

/* Sections */
.section{padding:4rem 0}
.section-tight{padding-top:2.5rem;padding-bottom:2.5rem}
.section-alt{background:var(--bg-muted)}
.section-dark{background:var(--bg-dark);color:var(--text-on-dark);position:relative}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark .lead{color:var(--text-on-dark)}
.section-header{max-width:640px;margin-bottom:2.25rem}
.section-header.center{margin-left:auto;margin-right:auto;text-align:center}
.section-header h2{margin-bottom:8px}
.section-subtitle{font-size:1.1rem;color:var(--text-muted)}

/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;transition:all .35s var(--ease)}
/* Equal-height cards with bottom-aligned footers — scoped to grids so the
   admin dashboard and other standalone .card uses stay untouched. */
.grid > .card{display:flex;flex-direction:column;height:100%}
.grid > .card > .card-body{flex:1 1 auto}
.grid > .card > .card-footer{margin-top:auto}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border)}
.card-img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--bg-muted)}
.card-body{padding:1.5rem}
.card-body h4{font-family:var(--font-heading);font-weight:700;font-size:1.15rem;margin-bottom:10px;line-height:1.3}
.card-meta{font-size:.84rem;color:var(--text-muted);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.card-meta i{font-size:.78rem;color:var(--text-light)}
.card-price{font-size:.85rem;color:var(--orange);font-weight:600}
.card-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-light);display:flex;gap:8px;background:rgba(0,0,0,.008)}
.card-accent{height:3px;background:linear-gradient(90deg,var(--purple),var(--orange));border-radius:0 0 3px 3px}

/* Status badges on cards */
.course-status{position:absolute;top:1rem;right:1rem;padding:.4rem .9rem;border-radius:20px;font-size:.78rem;font-weight:600;background:#fff;box-shadow:var(--shadow-md);z-index:3}
.status-open{color:var(--purple);border:2px solid var(--purple)}
.status-soon{color:var(--orange);border:2px solid var(--orange)}

/* Course card with image placeholder */
.course-image{width:100%;height:180px;background:linear-gradient(135deg,var(--purple) 0%,var(--maroon) 100%);display:flex;align-items:center;justify-content:center;font-size:3rem;color:rgba(255,255,255,.2);position:relative;overflow:hidden}
.course-image::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.08)"/></svg>');z-index:1;pointer-events:none}
.course-image img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
.course-image:has(img)::before,.course-image.has-img::before{display:none}
.course-image:has(img),.course-image.has-img{background:linear-gradient(135deg,var(--purple-pale),var(--bg-warm));padding:.5rem}
.course-category{display:inline-block;padding:.3rem .8rem;background:var(--purple-pale);color:var(--purple);border-radius:20px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem}

/* Grid */
.grid{display:grid;gap:2rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));justify-content:center}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* Filters */
.filter-card{background:#fff;padding:1.5rem 2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-end;margin:-1.5rem auto 2rem;position:relative;z-index:10;max-width:var(--container)}
.filter-group{flex:1;min-width:180px}
.filter-label{display:block;font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem}
.filter-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.filter-tag{padding:.45rem 1rem;background:var(--bg-light);border:2px solid var(--border);border-radius:20px;font-size:.85rem;cursor:pointer;font-weight:500;transition:all .2s}
.filter-tag:hover{border-color:var(--purple);background:var(--purple-pale)}
.filter-tag.active{background:var(--purple);color:#fff;border-color:var(--purple)}

/* Process steps (services) */
.process-card{background:#fff;padding:1.4rem 2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin:-1.5rem auto 2rem;position:relative;z-index:10;max-width:900px}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.process-step{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative}
.process-step::after{content:'';position:absolute;right:-.35rem;top:50%;transform:translateY(-50%);width:26px;height:12px;color:var(--orange);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 5h18V1.5a1 1 0 0 1 1.7-.7l5.6 4.5a1 1 0 0 1 0 1.4l-5.6 4.5a1 1 0 0 1-1.7-.7V7H0z'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 5h18V1.5a1 1 0 0 1 1.7-.7l5.6 4.5a1 1 0 0 1 0 1.4l-5.6 4.5a1 1 0 0 1-1.7-.7V7H0z'/%3E%3C/svg%3E") no-repeat center/contain}
.process-step:last-child::after{display:none}
.process-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--purple),var(--orange));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem}
.process-title{font-weight:600;font-size:.85rem}
.process-desc{font-size:.72rem;color:var(--text-muted)}

/* Services carousel */
.view-toggle{display:flex;gap:.5rem;justify-content:center;margin-bottom:2rem}
.view-btn{padding:.5rem 1rem;background:#fff;border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;font-weight:500;font-family:var(--font-body);font-size:.88rem;transition:all .2s}
.view-btn.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.carousel-container{position:relative;overflow:hidden}
.carousel-wrapper{position:relative}
.carousel-track{display:flex;transition:transform .5s var(--ease)}
.service-slide{min-width:100%;padding:.5rem 2rem}
.service-content{background:#fff;border-radius:var(--radius-xl);padding:2.5rem;box-shadow:var(--shadow-md)}
.service-category{display:inline-block;padding:.35rem .9rem;background:var(--purple-pale);color:var(--purple);border-radius:20px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem}
.service-title{font-family:var(--font-heading);font-size:1.6rem;margin-bottom:.75rem}
.detail-section{margin-bottom:1.2rem}
.detail-title{font-weight:600;font-size:.92rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.detail-title::before{content:'';width:4px;height:18px;background:var(--orange);border-radius:2px}
.detail-list{list-style:none;padding-left:1.5rem}
.detail-list li{padding:.35rem 0;position:relative;color:var(--text-secondary);font-size:.9rem}
.detail-list li::before{content:'•';position:absolute;left:-1.5rem;color:var(--orange);font-weight:bold}
.carousel-controls{display:flex;justify-content:center;align-items:center;gap:1.5rem;padding:.75rem 0}
.carousel-dots{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.carousel-dot{flex:0 0 10px;width:10px;height:10px;background:var(--border);border-radius:50%;cursor:pointer;transition:all .3s}
.carousel-dot.active{background:var(--purple);flex-basis:28px;width:28px;border-radius:5px}
.carousel-btn{flex:0 0 40px;width:40px;height:40px;min-width:40px;padding:0;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:50%;border:2px solid var(--border);background:#fff;cursor:pointer;font-size:1.2rem;font-family:var(--font-body);transition:all .2s}
.carousel-btn:hover{border-color:var(--purple);color:var(--purple)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}
.service-card{position:relative;overflow:hidden;background:#fff;border-radius:var(--radius-lg);padding:1.6rem 1.5rem 1.4rem;box-shadow:var(--shadow-sm);cursor:pointer;border:1px solid var(--border-light);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--acc1,var(--purple)),var(--acc2,var(--orange)))}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);background:linear-gradient(180deg,#fff 55%,var(--acc-pale,var(--purple-pale)) 100%)}
a.service-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%}
.service-card .service-category{background:var(--acc-pale,var(--purple-pale));color:var(--acc1,var(--purple))}
.service-card p{flex:1 1 auto;margin-bottom:0}
.service-card .service-more{margin-top:1rem}
.service-more{display:inline-block;margin-top:1rem;font-size:.85rem;font-weight:600;color:var(--acc1,var(--purple));transition:transform .25s var(--ease)}
.service-card:hover .service-more{transform:translateX(4px)}
a.service-card:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.is-hidden{display:none}

/* Team */
.team-member{position:relative;overflow:hidden;text-align:center;padding:2.4rem 1.5rem 1.8rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.team-member::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--orange),var(--maroon),var(--purple-dark))}
.team-member:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.team-member img{width:130px;height:130px;border-radius:50%;object-fit:cover;margin:0 auto 18px;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.10)}
.team-member .role{font-size:.78rem;color:var(--orange);font-weight:600;letter-spacing:.04em;margin-bottom:2px}
.team-member h4{font-size:.95rem;font-family:var(--font-body);font-weight:700;color:var(--maroon);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
.team-member .bio{font-size:.84rem;color:var(--text-muted);line-height:1.5}
.team-member .bio-field{margin-bottom:2px}
.team-member .email{font-size:.8rem;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text-muted);width:100%}
.team-member .email:hover{color:var(--purple)}

/* Forms */
.form-group{margin-bottom:22px}
.form-group label{display:block;font-size:.84rem;font-weight:600;margin-bottom:7px;color:var(--text)}
.form-control{width:100%;padding:11px 15px;font-family:var(--font-body);font-size:.91rem;border:1.5px solid var(--field-border);border-radius:var(--radius);background:var(--bg-card);color:var(--text);transition:all .2s var(--ease)}
.form-control:hover{border-color:var(--text-light)}
.form-control:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(123,79,138,.1)}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23718096' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
textarea.form-control{min-height:120px;resize:vertical}
.form-row{display:grid;gap:16px}
.form-row-2{grid-template-columns:1fr 1fr}
.form-row-3{grid-template-columns:1fr 1fr 1fr}
.form-row-4{grid-template-columns:.5fr 1fr .7fr 1.5fr}
.form-check{display:flex;gap:10px;align-items:flex-start}
.form-check input[type="checkbox"]{margin-top:4px;width:16px;height:16px;accent-color:var(--purple);flex-shrink:0}
.form-check label{font-size:.84rem;color:var(--text-muted);font-weight:400;line-height:1.5}
.required{color:var(--maroon)}

/* Alerts */
.alert{padding:16px 22px;border-radius:var(--radius-lg);font-size:.9rem;margin-bottom:24px}
.alert-success{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46}
.alert-error{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.alert-info{background:#EFF6FF;border:1px solid #BFDBFE;color:#1E40AF}

/* Course info box */
.course-info-box{background:linear-gradient(135deg,var(--purple-pale) 0%,var(--orange-pale) 100%);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:30px 34px;margin-bottom:36px}
.course-info-box h3{margin-bottom:18px;color:var(--purple);font-size:1.3rem}
.course-info-box .info-grid{display:flex;gap:36px;flex-wrap:wrap}
.course-info-box .info-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-light);margin-bottom:3px;font-weight:500}
.course-info-box .info-value{font-weight:600;color:var(--text)}

/* Course description */
.course-description h3{margin:28px 0 10px;font-size:1.2rem}
.course-description ul,.course-description ol{padding-left:22px;margin:10px 0 18px}
.course-description li{margin-bottom:6px;font-size:.91rem;color:var(--text-secondary);line-height:1.7}
.course-description p{margin-bottom:14px;font-size:.91rem;color:var(--text-secondary);line-height:1.7}

/* Footer */
.site-footer{background:var(--bg-dark);color:var(--text-on-dark);padding:72px 0 0;position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--orange),var(--maroon))}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.06)}
.footer-brand .nav-logo{color:#fff;margin-bottom:14px}
.footer-brand p{font-size:.88rem;color:rgba(255,255,255,.4);max-width:280px;line-height:1.6}
.site-footer h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.3);margin-bottom:18px;font-weight:600}
.site-footer ul{list-style:none}
.site-footer ul li{margin-bottom:9px}
.site-footer ul a{color:rgba(255,255,255,.55);font-size:.88rem;transition:color .2s,padding-left .2s}
.site-footer ul a:hover{color:var(--orange-light);padding-left:4px}
.footer-bottom{padding:22px 0;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:rgba(255,255,255,.55)}
.footer-socials{display:flex;gap:16px}
.footer-socials a{color:rgba(255,255,255,.7);font-size:1.5rem;transition:color .2s,transform .2s}
.footer-socials a:hover{color:var(--orange-light);transform:translateY(-2px)}

/* Admin layout */
.admin-layout{display:flex;min-height:100vh;padding-top:var(--nav-height);background:var(--admin-bg)}
.admin-sidebar{width:240px;background:var(--bg-card);border-right:1px solid var(--border);padding:24px 14px;position:sticky;top:var(--nav-height);height:calc(100vh - var(--nav-height));overflow-y:auto}
.admin-sidebar h6{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-light);margin:22px 0 8px 12px;font-weight:600}
.admin-sidebar a{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:.86rem;color:var(--text-muted);border-radius:var(--radius);margin-bottom:2px;transition:all .15s var(--ease)}
.admin-sidebar a:hover{background:var(--bg-muted);color:var(--text)}
.admin-sidebar a.active{background:var(--purple-pale);color:var(--purple);font-weight:600}
.admin-sidebar a i{font-size:.92rem;width:20px;text-align:center}
.admin-main{flex:1;padding:32px 40px 56px;max-width:calc(100% - 240px)}

/* Tables */
.table-wrapper{overflow-x:auto}
table.data-table{width:100%;border-collapse:collapse;font-size:.86rem}
table.data-table th{text-align:left;padding:11px 14px;font-weight:600;color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;border-bottom:2px solid var(--border);background:var(--bg-muted)}
table.data-table td{padding:13px 14px;border-bottom:1px solid var(--border-light);color:var(--text);vertical-align:middle}
table.data-table tr:hover td{background:#FBF9FC}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.badge-success{background:#D1FAE5;color:#065F46}
.badge-warning{background:#FEF3C7;color:#92400E}
.badge-danger{background:#FEE2E2;color:#991B1B}
.badge-info{background:var(--purple-pale);color:var(--purple)}

/* CTA section */
.cta-card{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);border-radius:var(--radius-xl);padding:4rem;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.cta-card h2{color:#fff;margin-bottom:.75rem}
.cta-card .lead{color:rgba(255,255,255,.8)}

/* Utility */
.text-center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:48px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.flex{display:flex}.flex-between{justify-content:space-between}.flex-center{align-items:center}
.gap-1{gap:8px}.gap-2{gap:16px}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media(max-width:1024px){.cta-card{grid-template-columns:1fr;padding:3rem}.process-steps{grid-template-columns:repeat(2,1fr)}.process-step:nth-child(2)::after{display:none}}
@media(max-width:768px){.container{padding:0 1.25rem}.nav-links{display:none}.nav-toggle{display:block}.nav-links.open{display:flex;flex-direction:column;position:absolute;top:var(--nav-height);left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);padding:16px 20px;box-shadow:var(--shadow-md);gap:2px}.hero{padding:3.5rem 2rem 2.5rem}.section{padding:3.5rem 0}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.process-steps{grid-template-columns:1fr}.process-step::after{display:none!important}.form-row-2,.form-row-3,.form-row-4{grid-template-columns:1fr}.admin-sidebar{display:none}.admin-main{max-width:100%;padding:20px 16px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}}

/* Language switcher */
.lang-switch{display:inline-flex;gap:1px;align-items:center;margin-right:8px}
.lang-switch a{font-size:.76rem;font-weight:600;padding:4px 7px;border-radius:6px;color:var(--text-muted);letter-spacing:.03em;transition:all .15s var(--ease)}
.lang-switch a:hover{color:var(--purple)}
.lang-switch a.active{background:var(--purple-pale);color:var(--purple-dark)}

/* Cookie notice (informational — only necessary cookies are used) */
.cookie-notice{position:fixed;left:16px;right:16px;bottom:16px;z-index:1200;max-width:520px;margin:0 auto;
    background:var(--bg-dark);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius-lg);box-shadow:0 10px 40px rgba(0,0,0,.25);padding:16px 18px;
    display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookie-notice p{margin:0;font-size:.85rem;line-height:1.55;flex:1 1 240px}
.cookie-notice a{color:var(--orange-light);text-decoration:underline}
.cookie-notice .btn{flex:0 0 auto}
@media(max-width:520px){
    /* Keep it to one compact block rather than stacking into a tall column:
       on a phone the stacked version covered roughly half the viewport. */
    .cookie-notice{left:10px;right:10px;bottom:10px;padding:11px 13px;gap:10px}
    .cookie-notice p{font-size:.76rem;line-height:1.45;flex:1 1 100%}
    .cookie-notice .btn{width:100%;padding:.5rem;font-size:.82rem}
}

/* Notify-me signup form */
.notify-form{max-width:520px;margin:0 auto;text-align:left}
.notify-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.notify-row{display:flex;gap:10px}
.notify-row .form-control{flex:1}
.notify-row .btn{flex:0 0 auto;white-space:nowrap}
.notify-consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:.82rem;color:var(--text-secondary);line-height:1.5}
.notify-consent input{margin-top:3px;flex:0 0 auto}
.notify-consent a{color:var(--purple);text-decoration:underline}
@media(max-width:480px){.notify-row{flex-direction:column}}

/* ── Service detail pages ─────────────────────────────────────────── */
.svc-crumbs{font-size:.82rem;color:var(--text-muted);padding:1rem 0 0}
.svc-crumbs a{color:var(--text-muted);text-decoration:none}
.svc-crumbs a:hover{color:var(--purple);text-decoration:underline}
.svc-crumbs span{margin:0 .45rem;color:var(--text-light)}

.svc-toc{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.5rem}
.svc-toc a{padding:.4rem .85rem;background:var(--bg-muted);border-radius:20px;font-size:.82rem;color:var(--text-secondary);text-decoration:none;transition:all .2s}
.svc-toc a:hover{background:var(--purple-pale);color:var(--purple)}

.svc-lede{font-size:1.05rem;color:var(--text-secondary);max-width:72ch;line-height:1.75}
.svc-block{margin-bottom:3rem}
.svc-block h2{font-family:var(--font-heading);font-size:1.7rem;margin-bottom:.4rem;scroll-margin-top:calc(var(--nav-height) + 16px)}
.svc-block h3{font-family:var(--font-heading);font-size:1.18rem;margin:1.8rem 0 .5rem}
.svc-block p{color:var(--text-secondary);line-height:1.75;max-width:72ch;margin-bottom:.9rem}

.note-box{display:flex;gap:1rem;background:var(--orange-pale);border-left:4px solid var(--orange);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.5rem 0;max-width:78ch}
.note-box i{color:var(--orange);font-size:1.2rem;line-height:1.5}
.note-box p{margin:0;font-size:.92rem;color:var(--text-secondary)}

/* Pipeline / data-flow diagram */
.pipeline{max-width:780px;margin:2rem auto}
.pipeline figcaption{text-align:center;font-size:.82rem;color:var(--text-muted);margin-top:1rem;font-style:italic}
.pipeline-io{background:var(--purple-pale);border:1px solid #DFCDE6;border-radius:var(--radius-lg);padding:1rem 1.3rem;text-align:center}
.pipeline-io-out{background:var(--orange-pale);border-color:#F2D9C2}
.pipeline-io-h{font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--purple);margin-bottom:.35rem}
.pipeline-io-out .pipeline-io-h{color:var(--orange)}
.pipeline-io-b{font-size:.9rem;color:var(--text-secondary)}
.pipeline-arrow{width:2px;height:26px;background:var(--border);margin:0 auto;position:relative}
.pipeline-arrow::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--border)}
.pipeline-stage{display:flex;gap:1rem;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1.1rem 1.3rem;box-shadow:var(--shadow-sm)}
.pipeline-num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--purple);color:#fff;font-size:.85rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.pipeline-title{font-weight:600;margin-bottom:.2rem}
.pipeline-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.6}
.pipeline-tools{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.pipeline-tools span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;padding:.2rem .5rem;background:var(--bg-muted);border:1px solid var(--border-light);border-radius:4px;color:var(--text-secondary)}

.file-name{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;color:var(--purple-dark);white-space:nowrap}
table.data-table td ul{margin:.3rem 0 0;padding-left:1.1rem}
table.data-table td li{padding:.12rem 0;color:var(--text-secondary)}

.req-list{list-style:none;padding:0;max-width:72ch}
.req-list li{position:relative;padding:.45rem 0 .45rem 1.7rem;color:var(--text-secondary);border-bottom:1px solid var(--border-light)}
.req-list li::before{content:'\F26E';font-family:'bootstrap-icons';position:absolute;left:0;top:.5rem;color:var(--orange);font-size:.85rem}

@media(max-width:520px){
    .pipeline-stage{flex-direction:column;gap:.6rem}
    .pipeline-num{flex:0 0 auto;width:30px}
}

/* ── Team member research panel (about.php) ───────────────────────── */
.tm-more{margin-top:14px;text-align:left;border-top:1px solid var(--border-light);padding-top:10px}
.tm-more summary{list-style:none;cursor:pointer;text-align:center;font-size:.8rem;font-weight:600;color:var(--purple);display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.2rem 0}
.tm-more summary::-webkit-details-marker{display:none}
.tm-more summary::after{content:'\F282';font-family:'bootstrap-icons';font-size:.72rem;transition:transform .2s var(--ease)}
.tm-more[open] summary::after{transform:rotate(180deg)}
.tm-more summary:hover{color:var(--purple-dark)}
.tm-more-body{padding-top:.8rem}
.tm-more-body p{font-size:.84rem;line-height:1.65;color:var(--text-secondary);margin-bottom:.9rem}
.tm-stats{list-style:none;padding:0;margin:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.4rem}
.tm-stats li{font-size:.74rem;color:var(--text-muted);background:var(--bg-muted);border-radius:20px;padding:.25rem .7rem}
.tm-stats strong{color:var(--purple);font-family:var(--font-heading);font-size:.9rem}
.tm-links{display:flex;flex-wrap:wrap;gap:.4rem}
.tm-links a{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;padding:.28rem .7rem;border:1px solid var(--border);border-radius:20px;color:var(--text-secondary);text-decoration:none;transition:all .2s}
.tm-links a:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-pale)}

/* ── Quotation block on service pages ─────────────────────────────── */
.quote-steps{counter-reset:qs;list-style:none;padding:0;margin:1.2rem 0;max-width:72ch}
.quote-steps li{counter-increment:qs;position:relative;padding:.5rem 0 .5rem 2.4rem;color:var(--text-secondary);line-height:1.65}
.quote-steps li::before{content:counter(qs);position:absolute;left:0;top:.45rem;width:24px;height:24px;border-radius:50%;background:var(--purple-pale);color:var(--purple);font-size:.78rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.price-box{background:var(--bg-warm);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.3rem 1.5rem;margin:1.5rem 0;max-width:78ch}
.price-box-h{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--orange);margin-bottom:.5rem}
.price-box p{margin:0;color:var(--text-secondary);line-height:1.7}
.price-box strong{color:var(--text);font-weight:600}

/* ── FAQ page ─────────────────────────────────────────────────────── */
.faq-wrap{max-width:820px}
.faq-h{font-family:var(--font-heading);font-size:1.5rem;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border);scroll-margin-top:calc(var(--nav-height) + 16px)}
.faq-h:first-child{margin-top:0}
.faq-item{border-bottom:1px solid var(--border-light);scroll-margin-top:calc(var(--nav-height) + 16px)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem .25rem;font-weight:500;color:var(--text);transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'\F4FE';font-family:'bootstrap-icons';flex:0 0 auto;color:var(--purple);font-size:.85rem;margin-top:.2rem;transition:transform .2s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--purple)}
.faq-answer{padding:0 .25rem 1.2rem}
.faq-answer p{margin:0;color:var(--text-secondary);line-height:1.75;max-width:70ch}
.faq-answer a{color:var(--purple)}
.faq-note{margin-top:2.5rem;font-size:.84rem;color:var(--text-muted);line-height:1.7}
.faq-note a{color:var(--text-secondary)}
.faq-cta{margin-top:2rem;background:var(--bg-warm);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.8rem}
.faq-cta h3{font-family:var(--font-heading);font-size:1.25rem;margin-bottom:.4rem}
.faq-cta p{color:var(--text-secondary);margin-bottom:1.1rem}

/* ── Showcase teaser (index.php) ──────────────────────────────────── */
.showcase-teaser{display:flex;gap:56px;align-items:center;flex-wrap:wrap}
.showcase-teaser-text{flex:1 1 380px;min-width:300px}
.showcase-teaser-fig{flex:0 1 420px;max-width:420px;min-width:0;display:block;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--border-light);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.showcase-teaser-fig:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.showcase-teaser-fig picture{display:block}
.showcase-teaser-fig img{display:block;width:100%;max-width:420px;height:auto;background:#fff}
/* Keep the prose column readable instead of letting it stretch to 1000px. */
.showcase-teaser-text{max-width:62ch}
.showcase-nums{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:1.75rem}
.showcase-nums li{display:flex;flex-direction:column}
.showcase-nums strong{font-family:var(--font-heading);font-size:1.5rem;color:var(--purple);line-height:1.1}
.showcase-nums li:nth-child(3) strong{color:var(--orange)}
.showcase-nums li:nth-child(4) strong{color:var(--purple-light)}
.showcase-nums span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);margin-top:2px}
@media(max-width:768px){
    .showcase-teaser{gap:32px}
    .showcase-nums{gap:1.25rem}
}


/* Short viewports (13–14" laptops): keep the hero from filling the whole screen
   so the stats strip below the fold is visible without scrolling. */
@media(max-height:860px){
    .hero{padding:2.5rem 2rem 2.25rem}
    .hero-home h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
    .hero-home .lead{font-size:.97rem}
    .hero .btn{padding:.7rem 1.4rem}
}


/* ── Admin panel surface ──────────────────────────────────────────────
   The panel sits on a tinted background so white panels read as cards
   rather than as one flat white sheet. */
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
    margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.admin-head h1{font-size:1.85rem;margin:0}
.admin-sub{color:var(--text-muted);font-size:.92rem;margin:6px 0 0}
.admin-head .btn{flex:0 0 auto}

/* Panels replace bare .card inside the admin area */
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:0 1px 2px rgba(26,16,40,.04);overflow:hidden}
.panel + .panel{margin-top:24px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:14px 20px;border-bottom:1px solid var(--border);background:var(--admin-head-bg)}
.panel-head h2{font-size:1rem;font-family:var(--font-body);font-weight:600;letter-spacing:.01em;margin:0}
.panel-body{padding:20px}
.panel-body > :first-child{margin-top:0}
.admin-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;align-items:start}

/* Stat tiles — no coloured left border; the number carries the emphasis */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:32px}
.stat-tile{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:18px 20px;display:flex;flex-direction:column;gap:2px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.stat-tile:hover{border-color:var(--purple-light);box-shadow:0 4px 14px rgba(123,79,138,.08)}
.stat-tile-icon{position:absolute;top:16px;right:18px;width:32px;height:32px;border-radius:9px;
    background:var(--purple-pale);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:.95rem}
.stat-tile-value{font-family:var(--font-heading);font-size:2rem;line-height:1.1;color:var(--text)}
.stat-tile-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);font-weight:600}

/* A bare table in the admin area becomes a card without any markup change */
.admin-main > .table-wrapper{background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);box-shadow:0 1px 2px rgba(26,16,40,.04);overflow:hidden}
.admin-main > .table-wrapper table.data-table th:first-child,
.admin-main > .table-wrapper table.data-table td:first-child{padding-left:20px}
.admin-main > .table-wrapper table.data-table th:last-child,
.admin-main > .table-wrapper table.data-table td:last-child{padding-right:20px}
.admin-main > .table-wrapper table.data-table tr:last-child td{border-bottom:none}
/* Forms sitting directly in the admin area get the same card treatment */
.admin-main > form{background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);box-shadow:0 1px 2px rgba(26,16,40,.04);padding:24px}
table.data-table th{background:var(--admin-head-bg);border-bottom:1px solid var(--border)}
table.data-table tr:hover td{background:var(--admin-hover)}

/* Key-value table used for "Your data" */
.panel-body table.data-table td{border-bottom:1px solid var(--border-light)}
.panel-body table.data-table tr:last-child td{border-bottom:none}

/* Empty states */
.admin-empty{padding:40px 20px;text-align:center;color:var(--text-muted)}
.admin-empty i{font-size:1.8rem;color:var(--border);display:block;margin-bottom:10px}

@media(max-width:768px){
    .admin-main{padding:20px 16px 40px}
    .admin-head h1{font-size:1.45rem}
    .stat-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
    .stat-tile-value{font-size:1.6rem}
}


/* ── Admin palette + sidebar contrast ─────────────────────────────────
   Cool neutrals only: the warm/beige tokens read as muddy at large areas. */
:root{
    --admin-bg:      #EDEEF3;  /* content surface behind white panels */
    --admin-head-bg: #F5F5F9;  /* table + panel headers */
    --admin-hover:   #F7F7FB;  /* row hover */
    --admin-rail:    #FCFCFD;  /* sidebar surface */
}

.admin-sidebar{background:var(--admin-rail);border-right:1px solid #DDDCE6;
    box-shadow:1px 0 0 rgba(26,16,40,.02)}
.admin-sidebar h6{color:var(--purple);opacity:.75;font-size:.68rem;letter-spacing:.13em;
    margin:24px 0 6px 12px}
.admin-sidebar h6:first-child{margin-top:0}
.admin-sidebar a{color:var(--text-secondary);font-weight:500;padding:10px 12px}
.admin-sidebar a i{color:var(--text-light);transition:color .15s var(--ease)}
.admin-sidebar a:hover{background:var(--purple-pale);color:var(--purple-dark)}
.admin-sidebar a:hover i{color:var(--purple)}
.admin-sidebar a.active{background:var(--purple);color:#fff;font-weight:600;
    box-shadow:0 2px 8px rgba(123,79,138,.28)}
.admin-sidebar a.active i{color:#fff}

/* Panels need a touch more separation against the deeper surface */
.panel,
.admin-main > .table-wrapper,
.admin-main > form{box-shadow:0 1px 3px rgba(26,16,40,.06)}

/* Zebra striping makes long lists easier to scan than hover alone */
.admin-main table.data-table tbody tr:nth-child(even) td{background:#FBFBFD}
.admin-main table.data-table tbody tr:hover td{background:var(--purple-pale)}

/* Table headers were 3.69:1 on the new surface — below WCAG AA for small text */
table.data-table th{color:var(--text-secondary)}

/* ── Hero helix backdrop ──────────────────────────────────────────────
   The crowd-forming-a-helix photo sits on the right of the banner. The white
   studio background is already knocked out in the asset, and the floor shadows
   were removed, so it drops straight onto the purple.
   Two variants; switch the class in index.php:
     .hero-helix-vivid — original colours, bolder
     .hero-helix-soft  — desaturated and dimmed, reads as texture (default) */
.hero-helix{position:relative;overflow:hidden}
.hero-helix::after{
    content:'';position:absolute;top:0;right:0;bottom:0;
    width:min(48%,760px);
    background:url('../img/hero-helix.webp') no-repeat right center;
    background-size:contain;
    pointer-events:none;
    /* Fade the left edge so the headline never sits on top of the crowd */
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%,#000 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 42%,#000 100%);
}
.hero-helix .container{position:relative;z-index:1}
.hero-helix-vivid::after{opacity:.85;filter:saturate(1) contrast(1.02)}
.hero-helix-soft::after {opacity:.5;filter:saturate(.3) brightness(1.25) contrast(.95)}

/* Below this width the headline would collide with the artwork */
@media(max-width:900px){ .hero-helix::after{display:none} }

/* "About" intro: wider column so the same text takes fewer lines and the team
   photos move up, instead of splitting the prose in two. */
/* Explicit two-column grid rather than CSS columns: it lets us decide which
   paragraph goes where, so the columns end up the same height and the team
   photos sit higher on the page. */
.about-intro{max-width:min(80%,1040px);margin-bottom:2.5rem;
    display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;align-items:start}
.about-intro .lead{font-size:1rem;line-height:1.7;margin-bottom:1rem}
.about-intro > div > .lead:last-child{margin-bottom:0}
@media(max-width:900px){.about-intro{grid-template-columns:1fr;max-width:100%}}

/* ── Stats strip under the hero ───────────────────────────────────────
   Needed clearer separation from both the banner above and the section below. */
.stats-strip{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);
    border-bottom:1px solid var(--border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
    padding:30px 0}
.stats-strip-inner{display:flex;justify-content:center;flex-wrap:wrap;text-align:center;gap:0}
.stats-strip-inner > div{padding:2px 48px;position:relative}
/* Hairline dividers between the four figures, not after the last one */
.stats-strip-inner > div + div::before{content:'';position:absolute;left:0;top:50%;
    transform:translateY(-50%);width:1px;height:38px;background:var(--border)}
@media(max-width:768px){
    .stats-strip-inner > div{padding:10px 22px;flex:1 1 40%}
    .stats-strip-inner > div + div::before{display:none}
}

/* Third variant: full-bleed backdrop, the way the previous site used it.
   The helix spans the whole banner instead of sitting in the right corner,
   at low opacity so it reads as texture. The base gradient is also lightened
   towards the right — the old 135deg purple→purple-dark put its darkest corner
   exactly where the artwork sits, which is what made it look muddy. */
.hero-helix-bleed{background:linear-gradient(115deg,
    var(--purple-dark) 0%, var(--purple) 48%, #8E5C9E 100%)}
.hero-helix-bleed::after{
    left:0;right:0;width:auto;
    /* "cover" cropped so hard that the helix was unreadable — size by height
       instead, slightly taller than the banner, so the whole shape shows. */
    background-position:right 4% center;
    background-size:auto 155%;   /* <<< ROZMIAR HELISY — zwiększ/zmniejsz tę wartość */
    opacity:.34;
    filter:saturate(.85) contrast(1.05);
    -webkit-mask-image:linear-gradient(to right,transparent 4%,rgba(0,0,0,.3) 30%,#000 60%);
    mask-image:linear-gradient(to right,transparent 4%,rgba(0,0,0,.3) 30%,#000 60%);
}
/* On very wide screens there is room to show it a touch larger */
@media(min-width:1500px){ .hero-helix-bleed::after{background-size:auto 175%} }  /* <<< to samo dla szerokich ekranów */
@media(max-width:900px){ .hero-helix-bleed::after{display:none} }


/* ── Form fields ──────────────────────────────────────────────────────
   The old border used --border (#E2E0E8), only 1.31:1 against white, so inputs
   were practically invisible. WCAG asks for 3:1 on interface elements. */
:root{ --field-border:#948DA8; }
.form-control{box-shadow:inset 0 1px 2px rgba(26,16,40,.04)}
.form-control::placeholder{color:#8A93A5}
.form-control:hover{border-color:var(--purple-light)}
.form-control:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(123,79,138,.15)}
.form-group label{color:var(--text-secondary)}

/* Replaces the stock "teamwork" clipart in the CTA cards: reuses the helix
   artwork we already ship, tinted to white so it reads as a watermark on the
   purple card rather than as a photo. */
.cta-figure{min-height:260px}      /* spacer only — keeps the text column off the artwork */

/* The helix now spans the whole banner, top edge to bottom edge, instead of
   sitting inside a padded grid cell. "contain" against the full card height
   means nothing is clipped: the shape is as large as the banner allows. */
.cta-card::after{
    content:'';position:absolute;top:0;right:0;bottom:0;
    width:min(46%,620px);
    background:url('../img/hero-helix.webp') no-repeat center right/contain;
    filter:brightness(0) invert(1);
    opacity:.22;
    pointer-events:none;
}
@media(max-width:1024px){ .cta-figure{display:none} .cta-card::after{width:38%;opacity:.16} }

/* Catalogue tiles: a slim brand band instead of the tall dark placeholder.
   These courses have no scheduled edition, so there is nothing to badge —
   the "Coming soon" label was shown even for courses running next month. */
.course-image-slim{height:8px;min-height:8px;padding:0;
    background:linear-gradient(90deg,var(--purple),var(--maroon),var(--orange))}

/* Table cell helpers used by admin tables (previously only defined inline
   inside showcase.php, so they had no effect anywhere else). */
table.data-table td.mono, table.data-table th.mono{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}
table.data-table td.num, table.data-table th.num{text-align:right;font-variant-numeric:tabular-nums}

/* Translucent button for use on the purple surfaces (hero, CTA cards).
   btn-outline was invisible there — a grey border on purple reads as nothing. */
.btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-glass:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.7);color:#fff}


/* ── Process bar, refined ─────────────────────────────────────────────
   Four floating icons with arrows between them read as clip-art. This gives the
   steps a connecting rail, numbered badges and a little breathing room, so it
   reads as one sequence rather than four unrelated icons. */
.process-card{padding:2rem 2.25rem 1.6rem}
.process-steps{position:relative;gap:0}
/* One continuous rail behind the icons, instead of three separate arrows */
.process-steps::before{content:'';position:absolute;top:26px;left:12.5%;right:12.5%;height:2px;
    background:linear-gradient(90deg,var(--purple),var(--maroon),var(--orange));opacity:.28;border-radius:2px}
.process-step{padding:0 .5rem;gap:.5rem}
.process-step::after{display:none}          /* arrows replaced by the rail */
.process-icon{position:relative;z-index:1;width:52px;height:52px;font-size:1.2rem;
    box-shadow:0 4px 12px rgba(123,79,138,.25);border:3px solid #fff}
/* Step number in the corner of each icon */
.process-step{counter-increment:pstep}
.process-steps{counter-reset:pstep}
.process-icon::after{content:counter(pstep);position:absolute;right:-4px;bottom:-4px;
    width:19px;height:19px;border-radius:50%;background:#fff;color:var(--purple-dark);
    border:1.5px solid var(--border);font-size:.62rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;line-height:1}
.process-title{font-size:.88rem;margin-top:.15rem}
.process-desc{font-size:.75rem;line-height:1.4;max-width:15ch;margin:0 auto}
@media(max-width:1024px){
    .process-steps::before{display:none}
    .process-desc{max-width:none}
}

/* Skip link: hidden until focused, then the first thing a keyboard user reaches.
   Lets someone tab straight past the navigation to the page content. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;
    background:var(--purple-dark);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 var(--radius) 0;
    font-size:.9rem;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

/* ── Admin filter bar + sortable headers ──────────────────────────── */
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 16px;align-items:end}
.filter-grid label{display:block;font-size:.74rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}
.filter-grid .form-control{padding:8px 12px;font-size:.88rem}
.filter-actions{display:flex;gap:8px;align-items:end}

a.th-sort{color:inherit;text-decoration:none;display:inline-block;white-space:nowrap}
a.th-sort:hover{color:var(--purple)}

/* The participants table is wider than the screen. Without a visible scrollbar
   the right-hand columns simply look truncated, so force one and fade the edge
   to show there is more to the right. */
.table-wrapper{overflow-x:auto;scrollbar-width:thin}
.table-wrapper::-webkit-scrollbar{height:10px}
.table-wrapper::-webkit-scrollbar-track{background:var(--bg-muted);border-radius:5px}
.table-wrapper::-webkit-scrollbar-thumb{background:var(--purple-light);border-radius:5px}
.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--purple)}
.admin-main > .table-wrapper,
.panel > .table-wrapper{
    background-image:linear-gradient(to right, transparent calc(100% - 28px), rgba(26,16,40,.07) 100%);
    background-attachment:local, scroll;
}

/* ── Pager ────────────────────────────────────────────────────────── */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:20px 0 4px}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;
    padding:0 10px;border:1px solid var(--border);border-radius:var(--radius);
    background:var(--bg-card);color:var(--text-secondary);text-decoration:none;font-size:.86rem;
    transition:border-color .15s var(--ease),color .15s var(--ease)}
.pager-btn:hover{border-color:var(--purple-light);color:var(--purple)}
.pager-btn.is-current{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:600}
.pager-btn.is-disabled{opacity:.4;pointer-events:none}
.pager-gap{padding:0 4px;color:var(--text-light)}

/* Visible to screen readers only — used for section headings that would be
   redundant on screen but are needed so the heading levels do not skip. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Card headings sit at h3 for correct document outline but keep their old size. */
.card-heading{font-size:1rem;margin-bottom:2px}
.team-member .card-heading{font-family:var(--font-body);font-weight:700;color:var(--maroon);
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;font-size:.95rem}

/* ── Mobile navigation ────────────────────────────────────────────────
   The hamburger sat to the right of "Sign up" and "Log in", which left it
   pinched against the screen edge and hard to hit. On phones the account
   buttons move into the collapsed menu and the hamburger goes to the far left,
   where a thumb reaches it. */
.nav-account{display:none}
@media(max-width:768px){
    .site-nav .container{gap:10px}
    .nav-cta{display:contents}          /* children become items of the nav row */
    .nav-toggle{order:-2;margin-left:-6px}
    .nav-logo{order:-1;margin-right:auto}
    .lang-switch{order:1}
    .nav-cta .btn,
    .nav-cta .nav-user{display:none}    /* now living inside the menu */

    .nav-account{display:flex;gap:8px;margin-top:10px;padding-top:12px;
        border-top:1px solid var(--border)}
    .nav-account a{flex:1;text-align:center;padding:10px 12px;border-radius:var(--radius);
        border:1.5px solid var(--border);font-weight:600}
    .nav-account a:last-child{background:var(--purple);border-color:var(--purple);color:#fff}

    /* Comfortable tap target — 44px is the usual minimum. */
    .nav-toggle{padding:11px 10px}
    .nav-toggle span{width:24px}
}

/* ── Narrow-screen hardening ──────────────────────────────────────────
   Grid tracks with a fixed minimum overflow once the minimum exceeds the
   available width; min() lets the track shrink instead of pushing the page
   sideways. On a 360px phone the admin area has ~328px of usable width. */
.admin-cols{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.filter-grid{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

@media(max-width:520px){
    /* 2rem of padding on each side leaves little room for the content itself. */
    .process-card{padding:1.2rem 1rem}
    .cta-card{padding:2rem 1.5rem}
    .panel-body{padding:16px}
    .page-header{padding-left:0;padding-right:0}
    /* Long identifiers and e-mail addresses must not push the page sideways. */
    body{overflow-wrap:break-word}
    table.data-table{font-size:.82rem}
}