.mc{--header-bg:#0b1f33;--header-text:#fff;--footer-bg:#071525;--a:#3ddc97;--surface:#fff} .mc .brand-row{padding-top:18px;padding-bottom:18px}.mc .main-nav{border-top:1px solid rgba(255,255,255,.08);padding-top:12px}.mc .hero{min-height:540px}.mc .hero-overlay{--hero-overlay:linear-gradient(90deg,rgba(5,22,38,.88),rgba(5,22,38,.12))}.mc .intro-grid{margin-top:-55px;position:relative;z-index:2;box-shadow:0 20px 45px rgba(15,23,42,.12)}
*{box-sizing:border-box}.xe-template{--p:var(--xe-primary,#063970);--s:var(--xe-secondary,#087f5b);--a:var(--xe-accent,#d9a441);--bg:var(--xe-background,#f5f6f7);--tx:var(--xe-text,#17384d);font-family:Arial,Helvetica,sans-serif;color:var(--tx);background:var(--bg)}.xe-template a{text-decoration:none;color:inherit}.site-header{background:var(--header-bg,#fff);color:var(--header-text,var(--tx));border-bottom:1px solid rgba(100,116,139,.18);position:relative;z-index:5}.brand-row{max-width:1320px;margin:auto;padding:15px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}.school-brand{display:flex;align-items:center;gap:12px;min-width:0}.logo-shell,.footer-logo{width:66px;height:66px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:rgba(255,255,255,.1)}.logo-shell img,.footer-logo img{max-width:100%;max-height:100%;object-fit:contain}.logo-placeholder{font-size:22px;font-weight:900}.brand-copy strong,.brand-copy small{display:block}.brand-copy strong{font-size:22px;letter-spacing:-.02em}.brand-copy small{font-size:10px;margin-top:3px;opacity:.75}.header-actions{display:flex;gap:8px;flex-wrap:wrap}.action,.hero-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 14px;border:1px solid currentColor;font-size:10px;font-weight:900;letter-spacing:.03em}.action.primary,.hero-btn.primary{background:var(--a);border-color:var(--a);color:#111}.main-nav{max-width:1320px;margin:auto;padding:0 28px 13px;display:flex;gap:28px;font-size:10px;font-weight:900;text-transform:uppercase}.hero{min-height:500px;position:relative;background-color:var(--p);background-image:var(--hero-image);background-size:cover;background-position:center;display:flex;align-items:center;overflow:hidden}.hero-overlay{position:absolute;inset:0;background:var(--hero-overlay,linear-gradient(90deg,rgba(2,12,20,.88),rgba(2,12,20,.18)))}.hero-content{position:relative;z-index:1;width:min(1320px,calc(100% - 56px));margin:auto;color:#fff;max-width:1320px}.hero-content>*{max-width:650px}.eyebrow,.section-kicker{display:inline-block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--a)}.hero h1{font-family:Georgia,serif;font-size:clamp(38px,5.8vw,76px);line-height:1.02;margin:14px 0 16px;letter-spacing:-.035em}.hero p{font-size:15px;line-height:1.7;margin:0 0 24px;max-width:570px}.hero-actions{display:flex;gap:9px;flex-wrap:wrap}.hero-btn{color:#fff;background:rgba(0,0,0,.18);backdrop-filter:blur(8px)}.announcement{background:var(--announcement-bg,#fff);border-bottom:1px solid rgba(100,116,139,.18);padding:13px max(28px,calc((100vw - 1320px)/2));display:flex;gap:18px;align-items:center;font-size:11px}.announcement strong{text-transform:uppercase;color:var(--p)}main{max-width:1320px;margin:auto}.intro-grid{display:grid;grid-template-columns:1.35fr .85fr .85fr;border-left:1px solid rgba(100,116,139,.18);border-right:1px solid rgba(100,116,139,.18)}.principal-card,.feature-card{min-height:310px;padding:24px;border-right:1px solid rgba(100,116,139,.18);background:var(--surface,#fff)}.principal-card{display:grid;grid-template-columns:180px 1fr;gap:22px}.principal-photo{min-height:260px;background:linear-gradient(135deg,var(--p),var(--s));background-image:var(--principal-image);background-size:cover;background-position:center}.principal-card h2,.feature-card h2,.about-band h2{font-family:Georgia,serif;margin:8px 0 12px;font-size:28px}.principal-card p,.feature-card p,.about-band p{font-family:Georgia,serif;line-height:1.65;font-size:13px}.feature-card a{display:inline-flex;margin-top:18px;padding:11px 16px;background:var(--p);color:#fff;font-size:10px;font-weight:900}.feature-card ul{padding-left:18px;line-height:2}.about-band{margin:24px 0;display:grid;grid-template-columns:1fr 1.2fr;gap:24px;background:var(--surface,#fff);padding:30px;border:1px solid rgba(100,116,139,.18)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.service-grid a{padding:20px;background:color-mix(in srgb,var(--p) 7%,white);border:1px solid color-mix(in srgb,var(--p) 18%,white)}.service-grid strong,.service-grid span{display:block}.service-grid span{font-size:10px;line-height:1.5;margin-top:7px;opacity:.75}.content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}.content-panel{background:var(--surface,#fff);padding:18px;border:1px solid rgba(100,116,139,.18);min-height:330px}.section-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(100,116,139,.18);padding-bottom:10px;margin-bottom:12px}.section-head h3{font-family:Georgia,serif;margin:0;font-size:18px}.section-head a{font-size:9px;font-weight:900;text-transform:uppercase}.news-item{display:grid;grid-template-columns:76px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid rgba(100,116,139,.15)}.news-item img{width:76px;height:58px;object-fit:cover}.news-item small,.event-item p{font-size:8px;opacity:.65}.news-item h4,.event-item h4{font-family:Georgia,serif;font-size:12px;margin:3px 0}.news-item p{font-size:9px;margin:0;line-height:1.45}.event-item{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid rgba(100,116,139,.15)}.event-date{border:1px solid var(--a);display:grid;place-items:center;padding:5px}.event-date strong,.event-date span{display:block}.event-date strong{font-size:18px}.event-date span{font-size:8px}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.gallery-grid figure{margin:0;position:relative}.gallery-grid img{width:100%;height:95px;object-fit:cover}.gallery-grid figcaption{display:none}.gallery-placeholder{min-height:220px;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 13%,white),color-mix(in srgb,var(--s) 13%,white));font-size:11px;font-weight:900}.testimonial-panel blockquote{margin:14px 0;padding:0}.testimonial-panel blockquote p{font-family:Georgia,serif;font-style:italic;line-height:1.65}.testimonial-panel footer strong,.testimonial-panel footer span{display:block}.testimonial-panel footer span{font-size:9px;opacity:.65;margin-top:3px}footer{background:var(--footer-bg,#071015);color:var(--footer-text,#fff);padding:36px max(28px,calc((100vw - 1320px)/2)) 16px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}.footer-grid h4{color:var(--a);margin:0 0 12px}.footer-grid a,.footer-grid p{display:block;font-size:10px;line-height:1.9;opacity:.86;margin:0}.footer-brand h3{font-family:Georgia,serif;font-size:22px;margin:10px 0 6px}.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:25px;padding-top:14px;display:flex;justify-content:space-between;gap:15px;font-size:9px;opacity:.7}@media(max-width:1000px){.intro-grid{grid-template-columns:1fr 1fr}.principal-card{grid-column:1/-1}.content-grid{grid-template-columns:1fr 1fr}.about-band{grid-template-columns:1fr}.brand-row{align-items:flex-start}.header-actions{justify-content:flex-end}.main-nav{overflow:auto;white-space:nowrap}}@media(max-width:680px){.brand-row{padding:11px 15px}.logo-shell{width:50px;height:50px}.brand-copy strong{font-size:16px}.brand-copy small{display:none}.header-actions .action:not(.primary){display:none}.main-nav{padding:0 15px 10px;gap:18px}.hero{min-height:590px}.hero-content{width:calc(100% - 30px)}.hero h1{font-size:44px}.announcement{padding:11px 15px;display:block}.announcement strong{display:block;margin-bottom:4px}.intro-grid{grid-template-columns:1fr}.principal-card{grid-template-columns:1fr}.principal-photo{min-height:300px}.content-grid{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr}.about-band{margin:15px;padding:20px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column}.header-actions{gap:5px}.action{padding:8px 10px}.hero-actions{display:grid}.hero-btn{width:100%}}

.logo-shell img[src=""],.footer-logo img[src=""]{display:none}.logo-shell:has(img[src=""])::after,.footer-logo:has(img[src=""])::after{content:"XE";font-weight:900;font-size:18px}
.hero[style*="url('')"],.hero[style*="url("")"]{background-image:linear-gradient(135deg,var(--p),var(--s))!important}
.principal-photo[style*="url('')"],.principal-photo[style*="url("")"]{background-image:linear-gradient(135deg,var(--p),var(--s))!important}
/* Stage 24N-H: explicit editable logo and hero behavior */
.school-brand{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:5px!important;min-width:150px}
.school-brand .brand-copy{display:block!important}
.school-brand .brand-copy strong{display:block!important}
.school-brand .brand-copy small{display:block!important}
.logo-shell{flex:none!important}
.hero{background-image:var(--hero-image)!important}
@media(max-width:680px){
  .hero{background-image:var(--hero-mobile-image,var(--hero-image))!important}
  .school-brand{min-width:110px}
}

/* Stage 24N-M: explicit saved asset rendering */
.logo-shell img,.footer-logo img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.hero{background-image:var(--hero-image)!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
@media(max-width:680px){.hero{background-image:var(--hero-mobile-image,var(--hero-image))!important}}

/* Stage 24N-N: mid-page media and illustrative icons */
.principal-photo{
    position:relative;
    overflow:hidden;
    min-height:260px;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
}
.principal-photo:empty::after{
    content:"CLICK IMAGE / LOGO THEN THIS AREA TO UPLOAD PRINCIPAL PHOTO";
    position:absolute;
    inset:auto 10px 10px 10px;
    padding:9px 10px;
    background:rgba(0,0,0,.62);
    color:#fff;
    font:700 9px/1.35 Arial,sans-serif;
    text-align:center;
    border-radius:6px;
}
.editable-media-slot{
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(135deg,color-mix(in srgb,var(--p) 18%,white),color-mix(in srgb,var(--s) 18%,white));
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
}
.editable-media-slot>span{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    padding:6px 8px;
    background:rgba(0,0,0,.58);
    color:#fff;
    font:800 8px/1 Arial,sans-serif;
    letter-spacing:.05em;
    white-space:nowrap;
    border-radius:4px;
}
.news-thumb{
    width:76px;
    height:58px;
}
.news-item .news-thumb{
    align-self:start;
}
.gallery-upload-slot{
    min-height:95px;
    margin:0;
}
.feature-icon,.service-icon{
    width:42px;
    height:42px;
    color:var(--a);
    margin-bottom:10px;
}
.feature-icon svg,.service-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.service-icon{
    width:34px;
    height:34px;
    color:var(--p);
}
@media(max-width:680px){
    .principal-photo{min-height:320px}
    .gallery-upload-slot{min-height:120px}
}

/* XectorEdu mobile layout v2: portrait access and content flow */
@media(max-width:900px){
.xe-template .brand-row{flex-wrap:wrap!important;gap:14px!important;min-width:0}
.xe-template .school-brand{flex:1 1 100%;width:100%;min-width:0!important}
.xe-template .logo-shell{flex:0 0 56px;width:56px;height:56px}
.xe-template .brand-copy{flex:1;min-width:0;overflow-wrap:anywhere}
.xe-template .brand-copy strong{font-size:clamp(17px,4.5vw,24px)!important;line-height:1.25;white-space:normal!important}
.xe-template .brand-copy small{display:block!important;white-space:normal;line-height:1.4}
.xe-template .header-actions{display:flex!important;width:100%;justify-content:flex-start!important;gap:8px!important;flex-wrap:wrap!important}
.xe-template .header-actions .action,.xe-template .header-actions .action:not(.primary){display:inline-flex!important;flex:1 1 130px;min-height:44px;font-size:13px!important;white-space:normal;text-align:center;padding:10px!important}
.xe-template .main-nav{display:flex!important;position:static!important;flex-wrap:wrap!important;white-space:normal!important;overflow:visible!important;gap:8px 16px!important;padding:8px 16px 14px!important;transform:none!important;height:auto!important;max-height:none!important}
.xe-template .main-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;white-space:normal}
.xe-template .hero{height:auto!important;min-height:480px;padding-top:40px!important;padding-bottom:40px!important}
.xe-template .hero-content{width:calc(100% - 32px)!important;min-width:0}
.xe-template .hero-content>*{max-width:100%!important;overflow-wrap:anywhere}
.xe-template .hero h1{font-size:clamp(30px,8vw,52px)!important;line-height:1.12!important}
.xe-template .hero-actions{display:flex!important;flex-wrap:wrap!important;gap:10px}
.xe-template .hero-btn{flex:1 1 160px;min-height:44px;font-size:13px!important;white-space:normal}
.xe-template .intro-grid,.xe-template .content-grid,.xe-template .about-band,.xe-template .principal-card,.xe-template .footer-grid{grid-template-columns:minmax(0,1fr)!important}
.xe-template .principal-card,.xe-template .feature-card,.xe-template .panel{min-width:0;grid-column:auto!important}
.xe-template .about-band{margin:16px!important;padding:20px!important}
.xe-template p{font-size:15px!important;line-height:1.65!important;overflow-wrap:anywhere}
.xe-template .footer-grid a{min-height:44px;display:flex;align-items:center;font-size:14px}
.xe-template .footer-bottom{flex-wrap:wrap;white-space:normal}
.xe-template img{max-width:100%}
}