/* ==========================================================================
   Lahore City College - Experience Layer
   Design system built to the approved LCC x DPU creative playbook.
   Palette: LCC dark green base / warm off-white / rust accent / electric lime 5-10%
   ========================================================================== */

@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("../fonts/archivo.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Order set by the college: green leads, the logo red is the secondary,
     white is the ground, blue appears only in the smallest details. */

  /* GREEN, primary */
  --ink:#0C2A1E;
  --ink-soft:#123726;
  --green:#14543C;
  --green-lift:#1F7A55;
  --mint:#7FE0AE;

  /* RED, from the Lahore City College mark (#8E0612), lifted so it reads on green */
  --crimson:#C8202B;
  --crimson-deep:#9E1119;
  --crimson-ink:#8E0612;

  /* WHITE and warm paper */
  --paper:#FBFAF7;
  --paper-2:#F0EEE7;
  --paper-3:#E4E0D4;

  /* BLUE, used sparingly, smallest details only */
  --blue:#1B3A6B;

  --text:#13241C;
  --muted:#55665D;
  --faint:#8A9A90;
  --line:#DEDACE;
  --line-dark:#1E4433;
  --on-dark:#EDF2EE;
  --on-dark-muted:#A9C3B5;

  /* aliases kept so older rules keep resolving */
  --gold:var(--mint);
  --gold-deep:var(--green-lift);
  --rust:var(--crimson);
  --rust-deep:var(--crimson-deep);
  --forest:var(--green);

  --f:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --wide:1280px;
  --gut:clamp(20px,4vw,48px);
  --r:3px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- scoped reset ---------- */
.lccx *,.lccx *::before,.lccx *::after{box-sizing:border-box;}
.lccx{
  font-family:var(--f);
  color:var(--text);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.lccx img{max-width:100%;height:auto;display:block;}
.lccx p{margin:0 0 1em;}
.lccx a{color:inherit;}
.lccx ul{margin:0;padding:0;list-style:none;}
.lccx :focus-visible{outline:3px solid var(--gold);outline-offset:3px;}

/* ---------- layout ---------- */
.lccx .wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--gut);}
.lccx .wrap-narrow{max-width:820px;margin:0 auto;padding-inline:var(--gut);}
.lccx section{position:relative;}
.lccx .pad{padding-block:clamp(64px,9vw,140px);}
.lccx .pad-sm{padding-block:clamp(44px,6vw,84px);}
.lccx .dark{background:var(--ink);color:var(--on-dark);}
.lccx .dark h2,.lccx .dark h3,.lccx .dark h4{color:#fff;}
.lccx .dark .lead{color:var(--on-dark-muted);}

/* ---------- type ---------- */
.lccx .eyebrow{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;font-variation-settings:"wdth" 88;
  color:var(--rust);margin:0 0 18px;display:flex;align-items:center;gap:11px;
}
.lccx .eyebrow::before{content:"";width:26px;height:2px;background:var(--rust);flex:none;}
.lccx .dark .eyebrow{color:var(--gold);}
.lccx .dark .eyebrow::before{background:var(--gold);}

.lccx h1,.lccx h2,.lccx h3,.lccx h4{
  margin:0 0 .5em;line-height:1.02;letter-spacing:-.03em;
  font-weight:800;font-variation-settings:"wdth" 78;
  text-wrap:balance;
}
.lccx .display{
  font-size:clamp(46px,8.2vw,108px);
  line-height:.94;letter-spacing:-.04em;font-weight:900;
  font-variation-settings:"wdth" 74;
  text-transform:uppercase;
}
.lccx h2{font-size:clamp(32px,5vw,60px);}
.lccx h3{font-size:clamp(21px,2.5vw,30px);font-variation-settings:"wdth" 86;letter-spacing:-.02em;}
.lccx h4{font-size:19px;font-variation-settings:"wdth" 92;letter-spacing:-.012em;font-weight:700;}
.lccx .lead{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--muted);max-width:62ch;}
.lccx .tiny{font-size:12.5px;letter-spacing:.05em;color:var(--faint);}

/* ---------- buttons ---------- */
.lccx .btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:16px 30px;border-radius:100px;border:2px solid transparent;
  font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s;
}
.lccx .btn:hover{transform:translateY(-3px);}
.lccx .btn-gold{background:var(--gold);color:var(--ink);}
.lccx .btn-gold:hover{background:#E0B855;}
.lccx .btn-rust{background:var(--rust);color:#fff;}
.lccx .btn-rust:hover{background:var(--rust-deep);}
.lccx .btn-ghost{border-color:currentColor;background:transparent;}
.lccx .btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.lccx .dark .btn-ghost:hover,.lccx .hero .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.lccx .btn .ar{transition:transform .35s var(--ease);}
.lccx .btn:hover .ar{transform:translateX(5px);}

/* ---------- scroll reveal ---------- */
.lccx [data-rise]{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);}
.lccx [data-rise].in{opacity:1;transform:none;}
.lccx [data-rise][data-d="1"]{transition-delay:.09s;}
.lccx [data-rise][data-d="2"]{transition-delay:.18s;}
.lccx [data-rise][data-d="3"]{transition-delay:.27s;}
.lccx [data-rise][data-d="4"]{transition-delay:.36s;}
.lccx [data-rise][data-d="5"]{transition-delay:.45s;}

.lccx [data-mask]{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--ease-out);}
.lccx [data-mask].in{clip-path:inset(0 0 0 0);}

.lccx [data-zoom]{overflow:hidden;}
.lccx [data-zoom] img{transform:scale(1.14);transition:transform 1.5s var(--ease-out);}
.lccx [data-zoom].in img{transform:scale(1);}

/* ---------- HERO ---------- */
.lccx .hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--ink);color:var(--on-dark);overflow:hidden;
  padding-bottom:clamp(40px,7vw,88px);padding-top:130px;
}
.lccx .hero-bg{position:absolute;inset:0;z-index:0;}
.lccx .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.44;
  transform:scale(1.09);animation:heroDrift 24s var(--ease-out) forwards;}
@keyframes heroDrift{to{transform:scale(1);}}
.lccx .hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,42,30,.60) 0%,rgba(12,42,30,.52) 38%,rgba(12,42,30,.95) 100%);
}
.lccx .hero-in{position:relative;z-index:2;width:100%;}
.lccx .hero .display{color:#fff;}
.lccx .hero .display .go{color:var(--gold);display:block;}
.lccx .hero-sub{font-size:clamp(17px,1.9vw,21px);color:var(--on-dark-muted);max-width:52ch;margin:22px 0 34px;}
.lccx .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* route ribbon */
.lccx .ribbon{
  display:flex;align-items:center;flex-wrap:wrap;
  margin-top:clamp(40px,6vw,72px);padding-top:26px;
  border-top:1px solid rgba(244,236,230,.2);
}
.lccx .ribbon .stop{
  display:flex;align-items:center;gap:12px;
  font-weight:800;font-size:clamp(15px,1.6vw,19px);letter-spacing:.14em;
  font-variation-settings:"wdth" 84;text-transform:uppercase;color:#fff;
}
.lccx .ribbon .stop .pip{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;}
.lccx .ribbon .stop.dim{color:var(--on-dark-muted);}
.lccx .ribbon .stop.dim .pip{background:var(--on-dark-muted);}
.lccx .ribbon .seg{
  flex:1 1 40px;min-width:34px;height:2px;margin:0 16px;
  background:linear-gradient(90deg,var(--gold),rgba(244,236,230,.28));
  transform-origin:left;transform:scaleX(0);
  transition:transform 1.1s var(--ease-out);
}
.lccx .ribbon.in .seg{transform:scaleX(1);}
.lccx .ribbon.in .seg.s2{transition-delay:.35s;}
@media(max-width:640px){
  .lccx .ribbon{flex-direction:column;align-items:flex-start;gap:12px;}
  .lccx .ribbon .seg{width:2px;height:26px;flex:none;margin:0 0 0 4px;
    background:linear-gradient(180deg,var(--gold),rgba(244,236,230,.28));transform:scaleY(0);}
  .lccx .ribbon.in .seg{transform:scaleY(1);}
}

/* ---------- TWO CITIES / ONE FRAME ---------- */
.lccx .tc-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
.lccx .tc-side figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);}
.lccx .tc-side img{aspect-ratio:4/5;object-fit:cover;width:100%;}
.lccx .tc-cap{
  position:absolute;left:12px;bottom:12px;z-index:2;
  background:rgba(12,42,30,.85);backdrop-filter:blur(6px);
  color:var(--on-dark);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;padding:6px 11px;border-radius:2px;
}
.lccx .tc-label{
  font-size:clamp(13px,1.4vw,15px);letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;font-variation-settings:"wdth" 84;margin-bottom:14px;color:var(--gold);
}
.lccx .tc-mid{padding:0 clamp(14px,3vw,40px);text-align:center;}
.lccx .tc-line{width:2px;height:clamp(60px,12vw,150px);margin:0 auto;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  transform:scaleY(0);transform-origin:center;transition:transform 1.2s var(--ease-out);}
.lccx .tc-grid.in .tc-line{transform:scaleY(1);}
.lccx .tc-dot{width:11px;height:11px;border-radius:50%;background:var(--gold);margin:14px auto;}
@media(max-width:820px){
  .lccx .tc-grid{grid-template-columns:1fr;gap:26px;}
  .lccx .tc-line{width:clamp(60px,30vw,140px);height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    transform:scaleX(0);}
  .lccx .tc-grid.in .tc-line{transform:scaleX(1);}
}

/* ---------- PILLARS ---------- */
.lccx .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);}
@media(max-width:900px){.lccx .pillars{grid-template-columns:1fr;}}
.lccx .pillar{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--ink);color:var(--on-dark);min-height:clamp(380px,44vw,520px);
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;isolation:isolate;
  transition:transform .5s var(--ease);
}
.lccx .pillar:hover{transform:translateY(-8px);}
.lccx .pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease-out);opacity:.72;}
.lccx .pillar:hover img{transform:scale(1.07);}
.lccx .pillar::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,42,30,.12) 0%,rgba(12,42,30,.55) 45%,rgba(12,42,30,.95) 100%);}
.lccx .pillar-in{padding:clamp(22px,3vw,34px);}
.lccx .pillar .n{font-size:11.5px;letter-spacing:.2em;font-weight:800;color:var(--gold);
  text-transform:uppercase;display:block;margin-bottom:12px;}
.lccx .pillar h3{color:#fff;margin-bottom:10px;}
.lccx .pillar p{color:var(--on-dark-muted);font-size:15.5px;margin:0 0 16px;}
.lccx .pillar .skills{display:flex;flex-wrap:wrap;gap:7px;}
.lccx .pillar .skills span{
  font-size:11.5px;letter-spacing:.05em;padding:5px 11px;border-radius:100px;
  border:1px solid rgba(244,236,230,.3);color:var(--on-dark);
}

/* ---------- STATS ---------- */
.lccx .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);}
@media(max-width:860px){.lccx .stats{grid-template-columns:repeat(2,1fr);}}
.lccx .stat{border-top:2px solid var(--line);padding-top:20px;}
.lccx .dark .stat{border-top-color:var(--line-dark);}
.lccx .stat .v{
  font-size:clamp(38px,5.6vw,68px);line-height:.95;font-weight:900;
  font-variation-settings:"wdth" 76;letter-spacing:-.035em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.lccx .dark .stat .v{color:#fff;}
.lccx .stat .k{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.35;}
.lccx .dark .stat .k{color:var(--on-dark-muted);}

/* ---------- PROOF ---------- */
.lccx .proof-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;}
@media(max-width:900px){.lccx .proof-grid{grid-template-columns:1fr;}}
.lccx .proof-grid figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;}
.lccx .proof-grid figure img{aspect-ratio:3/2;object-fit:cover;width:100%;}

/* ---------- RAIL ---------- */
.lccx .rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:16px;scroll-snap-type:x mandatory;}
.lccx .rail::-webkit-scrollbar{height:6px;}
.lccx .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
.lccx .rail figure{margin:0;flex:0 0 clamp(240px,32vw,380px);scroll-snap-align:start;position:relative;
  border-radius:var(--r);overflow:hidden;}
.lccx .rail img{aspect-ratio:4/3;object-fit:cover;width:100%;}

/* ---------- STEPS ---------- */
.lccx .steps{counter-reset:s;}
.lccx .step{
  counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,38px);
  padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--line);align-items:start;
}
.lccx .dark .step{border-top-color:var(--line-dark);}
.lccx .step:last-child{border-bottom:1px solid var(--line);}
.lccx .dark .step:last-child{border-bottom-color:var(--line-dark);}
.lccx .step::before{
  content:counter(s,decimal-leading-zero);
  font-size:clamp(28px,4vw,46px);font-weight:900;font-variation-settings:"wdth" 74;
  color:var(--rust);line-height:1;letter-spacing:-.03em;
}
.lccx .dark .step::before{color:var(--gold);}
.lccx .step h4{margin-bottom:6px;}
.lccx .step p{margin:0;color:var(--muted);max-width:62ch;}
.lccx .dark .step p{color:var(--on-dark-muted);}

/* ---------- FAQ ---------- */
.lccx .faq{border-top:1px solid var(--line);}
.lccx .faq details{border-bottom:1px solid var(--line);}
.lccx .faq summary{
  cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative;
  font-weight:700;font-size:clamp(16.5px,1.9vw,20px);letter-spacing:-.015em;
  font-variation-settings:"wdth" 92;
}
.lccx .faq summary::-webkit-details-marker{display:none;}
.lccx .faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:2.5px solid var(--rust);border-bottom:2.5px solid var(--rust);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.lccx .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.lccx .faq .a{padding:0 0 24px;color:var(--muted);max-width:74ch;}
.lccx .faq .a p:last-child{margin-bottom:0;}

/* ---------- CTA ---------- */
.lccx .cta{background:var(--rust);color:#fff;text-align:center;}
.lccx .cta h2{color:#fff;}
.lccx .cta .lead{color:rgba(255,255,255,.88);margin-inline:auto;}

/* ---------- NOTE ---------- */
.lccx .note{
  border-left:3px solid var(--rust);background:var(--paper-2);
  padding:18px 22px;border-radius:2px;margin:26px 0;
}
.lccx .dark .note{background:rgba(244,236,230,.07);border-left-color:var(--gold);}
.lccx .note p:last-child{margin-bottom:0;}
.lccx .note .lb{
  display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:var(--rust);margin-bottom:7px;
}
.lccx .dark .note .lb{color:var(--gold);}

/* ---------- SPLIT FEATURE ---------- */
.lccx .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
@media(max-width:900px){.lccx .split{grid-template-columns:1fr;}}
.lccx .split figure{margin:0;border-radius:var(--r);overflow:hidden;position:relative;}
.lccx .split figure img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.lccx .split.flip .txt{order:2;}

/* ---------- HEADER ---------- */
.lccx-head{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:16px 0;transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s;
  font-family:var(--f);
}
.lccx-head .row{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.lccx-head .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;}
.lccx-head .brand img{height:46px;width:auto;transition:height .4s var(--ease);}
.lccx-head nav{display:flex;gap:28px;align-items:center;}
.lccx-head nav a{
  color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  opacity:.88;transition:opacity .25s;position:relative;padding:4px 0;
}
.lccx-head nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.lccx-head nav a:hover{opacity:1;}
.lccx-head nav a:hover::after{transform:scaleX(1);}
.lccx-head nav a.btn::after{display:none;}
.lccx-head.stuck{background:rgba(12,42,30,.94);backdrop-filter:blur(14px);padding:10px 0;
  box-shadow:0 1px 0 rgba(255,255,255,.08);}
.lccx-head.stuck .brand img{height:38px;}
.lccx-head .burger{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:2;}
.lccx-head .burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;
  transition:transform .3s var(--ease),opacity .3s;}
.lccx-head.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.lccx-head.open .burger span:nth-child(2){opacity:0;}
.lccx-head.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:1024px){
  .lccx-head .burger{display:block;}
  .lccx-head nav{
    position:fixed;inset:0 0 0 auto;width:min(86vw,380px);
    background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;
    padding:40px var(--gut);gap:6px;transform:translateX(100%);
    transition:transform .45s var(--ease);
  }
  /* translateX(0), not none: a transition whose end state is none can stall,
     which left the drawer frozen off screen at translateX(100%). */
  .lccx-head.open nav{transform:translateX(0);}
  .lccx-head nav a{font-size:23px;font-weight:800;padding:12px 0;font-variation-settings:"wdth" 86;}
  .lccx-head nav a.btn{font-size:16px;margin-top:18px;}
}

/* ---------- FOOTER ---------- */
.lccx-foot{background:var(--ink);color:var(--on-dark);padding-block:clamp(52px,7vw,88px) 30px;font-family:var(--f);}
.lccx-foot a{color:var(--on-dark);text-decoration:none;opacity:.82;transition:opacity .25s,color .25s;}
.lccx-foot a:hover{opacity:1;color:var(--gold);}
.lccx-foot .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,54px);}
@media(max-width:900px){.lccx-foot .fgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.lccx-foot .fgrid{grid-template-columns:1fr;}}
.lccx-foot h5{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  font-weight:800;margin:0 0 16px;}
.lccx-foot ul{list-style:none;margin:0;padding:0;}
.lccx-foot li{margin-bottom:10px;font-size:15px;}
.lccx-foot .bottom{margin-top:clamp(36px,5vw,60px);padding-top:24px;
  border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13px;color:var(--on-dark-muted);}
.lccx-foot .callnow{font-size:clamp(21px,2.6vw,30px);font-weight:900;letter-spacing:-.02em;
  font-variation-settings:"wdth" 80;color:#fff;display:inline-block;margin-bottom:8px;}
.lccx-foot p{margin:0 0 1em;}

/* ---------- STICKY MOBILE BAR ---------- */
.lccx-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;
  background:var(--ink);border-top:1px solid var(--line-dark);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:9px;font-family:var(--f);
}
.lccx-bar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 8px;border-radius:100px;text-decoration:none;font-weight:700;font-size:14.5px;
}
.lccx-bar .c{background:rgba(244,236,230,.12);color:#fff;}
.lccx-bar .w{background:var(--gold);color:var(--ink);}
@media(max-width:768px){
  .lccx-bar{display:flex;}
  body.lccx-page{padding-bottom:72px;}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .lccx *,.lccx *::before,.lccx *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .lccx [data-rise]{opacity:1;transform:none;}
  .lccx [data-mask]{clip-path:none;}
  .lccx [data-zoom] img{transform:none;}
}

/* ==========================================================================
   CONSULTATION FORM
   ========================================================================== */
.lccx .lccx-form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.4vw,42px);
}
.lccx .dark .lccx-form{background:rgba(244,236,230,.06);border-color:var(--line-dark);}
.lccx .lccx-form h3{margin-bottom:8px;}
.lccx .lccx-form .fsub{color:var(--muted);margin-bottom:22px;font-size:15.5px;}
.lccx .dark .lccx-form .fsub{color:var(--on-dark-muted);}
.lccx .fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
@media(max-width:620px){.lccx .fgrid2{grid-template-columns:1fr;}}
.lccx .fld{display:flex;flex-direction:column;gap:7px;}
.lccx .fld > span{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--muted);
}
.lccx .dark .fld > span{color:var(--on-dark-muted);}
.lccx .fld input,.lccx .fld select{
  font-family:var(--f);font-size:16px;color:var(--text);
  background:#fff;border:1.5px solid var(--line);border-radius:2px;
  padding:14px 15px;width:100%;transition:border-color .25s,box-shadow .25s;
  min-height:50px;
}
.lccx .dark .fld input,.lccx .dark .fld select{
  background:rgba(12,42,30,.55);color:var(--on-dark);border-color:var(--line-dark);
}
.lccx .fld input:focus,.lccx .fld select:focus{
  outline:none;border-color:var(--rust);box-shadow:0 0 0 3px rgba(192,67,42,.16);
}
.lccx .dark .fld input:focus,.lccx .dark .fld select:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,166,60,.24);
}
.lccx .fld input.err,.lccx .fld select.err{border-color:var(--rust);background:#FFF4F1;}
.lccx .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.lccx .fsubmit{width:100%;justify-content:center;margin-top:6px;min-height:56px;}
.lccx .fnote{font-size:12.5px;color:var(--faint);margin:16px 0 0;line-height:1.5;}
.lccx .dark .fnote{color:var(--on-dark-muted);}
.lccx .fnote a{color:var(--rust);}
.lccx .dark .fnote a{color:var(--gold);}
.lccx .fstatus{margin-top:14px;font-size:15px;font-weight:600;}
.lccx .fstatus.ok{color:var(--good,#2C6B4A);}
.lccx .dark .fstatus.ok{color:var(--gold);}
.lccx .fstatus.bad{color:var(--rust);}
.lccx .dark .fstatus.bad{color:#F09A88;}
.lccx .lccx-form.sent form > *:not(.fstatus){display:none;}
.lccx .lccx-form.sent .fstatus{
  font-size:18px;font-weight:700;padding:18px 0 6px;
}
.lccx .fdone-wa{display:inline-flex;margin-top:14px;}

/* ==========================================================================
   FIT TOOL
   ========================================================================== */
.lccx .lccx-fit{}
.lccx .fit-head{max-width:60ch;margin-bottom:clamp(26px,3.4vw,40px);}
.lccx .fit-box{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.6vw,46px);position:relative;
}
.lccx .dark .fit-box{background:rgba(244,236,230,.06);border-color:var(--line-dark);}
.lccx .fit-bar{display:flex;gap:6px;margin-bottom:26px;}
.lccx .fit-bar .fb{
  height:4px;flex:1;background:var(--line);border-radius:99px;
  transition:background .4s var(--ease);
}
.lccx .dark .fit-bar .fb{background:var(--line-dark);}
.lccx .fit-bar .fb.on{background:var(--rust);}
.lccx .dark .fit-bar .fb.on{background:var(--gold);}
.lccx .fit-q{border:0;margin:0;padding:0;}
.lccx .fit-q legend{
  font-size:clamp(20px,2.7vw,30px);font-weight:800;letter-spacing:-.025em;
  font-variation-settings:"wdth" 84;line-height:1.14;margin-bottom:22px;padding:0;
  text-wrap:balance;
}
.lccx .fit-q legend .qn{
  display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);font-weight:800;margin-bottom:10px;font-variation-settings:"wdth" 88;
}
.lccx .dark .fit-q legend .qn{color:var(--gold);}
.lccx .fit-opts{display:grid;gap:11px;}
.lccx .fit-opt{
  text-align:left;font-family:var(--f);cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  padding:18px 20px;display:grid;gap:5px;
  transition:border-color .25s,transform .25s var(--ease),background .25s;
}
.lccx .dark .fit-opt{background:rgba(12,42,30,.5);border-color:var(--line-dark);}
.lccx .fit-opt:hover{border-color:var(--rust);transform:translateX(4px);}
.lccx .dark .fit-opt:hover{border-color:var(--gold);}
.lccx .fit-opt strong{font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--text);}
.lccx .dark .fit-opt strong{color:#fff;}
.lccx .fit-opt span{font-size:14.5px;color:var(--muted);line-height:1.45;}
.lccx .dark .fit-opt span{color:var(--on-dark-muted);}
.lccx .fit-result h3{
  font-size:clamp(26px,4vw,42px);margin-bottom:12px;color:var(--rust);
  font-variation-settings:"wdth" 78;
}
.lccx .dark .fit-result h3{color:var(--gold);}
.lccx .fit-why{font-size:17.5px;line-height:1.55;margin-bottom:18px;max-width:62ch;}
.lccx .fit-skills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.lccx .fit-skills span{
  font-size:12.5px;letter-spacing:.04em;padding:6px 13px;border-radius:100px;
  border:1px solid var(--line);color:var(--muted);
}
.lccx .dark .fit-skills span{border-color:var(--line-dark);color:var(--on-dark-muted);}
.lccx .fit-actions{display:flex;gap:11px;flex-wrap:wrap;align-items:center;}
.lccx .fit-again{cursor:pointer;font-family:var(--f);}
.lccx .fit-caveat{font-size:13.5px;color:var(--faint);margin:18px 0 0;max-width:60ch;}
.lccx .dark .fit-caveat{color:var(--on-dark-muted);}

/* ==========================================================================
   ANNOUNCEMENT BAR (slot kept empty until dates are reconciled)
   ========================================================================== */
.lccx-alert{
  background:var(--gold);color:var(--ink);text-align:center;
  padding:10px 16px;font-size:14.5px;font-weight:700;position:relative;z-index:901;
}
.lccx-alert a{color:var(--ink);text-decoration:underline;}

/* ==========================================================================
   SKIP LINK
   ========================================================================== */
.lccx-skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--gold);color:var(--ink);padding:12px 20px;font-weight:700;
  font-family:var(--f);border-radius:0 0 3px 0;
}
.lccx-skip:focus{left:0;}

/* ==========================================================================
   HERO CINEMA. Crossfading stills read as motion without a video payload.
   ========================================================================== */
.lccx .hero-bg .frame{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.6s var(--ease-out);
}
.lccx .hero-bg .frame.on{opacity:1;}
.lccx .hero-bg .frame img{
  width:100%;height:100%;object-fit:cover;opacity:.46;
  transform:scale(1.10);
  animation:heroPush 9s linear forwards;
}
@keyframes heroPush{to{transform:scale(1);}}

/* film grain, very subtle, sells the cinema feel */
.lccx .hero-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* progress pips for the hero sequence */
.lccx .hero-pips{
  position:absolute;right:var(--gut);bottom:clamp(40px,7vw,88px);z-index:3;
  display:flex;flex-direction:column;gap:9px;
}
@media(max-width:820px){.lccx .hero-pips{display:none;}}
.lccx .hero-pips button{
  width:3px;height:26px;border:0;padding:0;cursor:pointer;border-radius:99px;
  background:rgba(244,236,230,.28);transition:background .4s,height .4s;
}
.lccx .hero-pips button.on{background:var(--gold);height:40px;}

/* ==========================================================================
   KINETIC HEADLINE. Words rise from a mask.
   ========================================================================== */
.lccx .kin{display:inline-block;overflow:hidden;vertical-align:bottom;}
.lccx .kin > i{
  display:inline-block;font-style:inherit;
  transform:translateY(110%);
  transition:transform .95s var(--ease-out);
}
.lccx .kin.in > i{transform:translateY(0);}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.lccx .marq{
  overflow:hidden;border-block:1px solid var(--line-dark);
  background:var(--ink);padding:16px 0;
}
.lccx .marq-track{
  display:flex;gap:0;width:max-content;
  animation:marq 42s linear infinite;
}
.lccx .marq:hover .marq-track{animation-play-state:paused;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.lccx .marq span{
  display:inline-flex;align-items:center;gap:18px;padding:0 26px;white-space:nowrap;
  font-weight:800;font-size:clamp(14px,1.6vw,18px);letter-spacing:.06em;
  text-transform:uppercase;font-variation-settings:"wdth" 82;color:var(--on-dark);
}
.lccx .marq span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);}
@media(prefers-reduced-motion:reduce){.lccx .marq-track{animation:none;}}

/* ==========================================================================
   PARALLAX
   ========================================================================== */
.lccx [data-par]{will-change:transform;}

/* ==========================================================================
   HORIZONTAL SCROLL STRIP
   ========================================================================== */
.lccx .hstrip{overflow:hidden;}
.lccx .hstrip-track{display:flex;gap:16px;will-change:transform;}
.lccx .hstrip figure{
  margin:0;flex:0 0 clamp(260px,30vw,420px);border-radius:var(--r);overflow:hidden;position:relative;
}
.lccx .hstrip img{aspect-ratio:3/4;object-fit:cover;width:100%;}

/* ==========================================================================
   PAGE LOAD
   ========================================================================== */
.lccx-boot{
  position:fixed;inset:0;z-index:2000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s var(--ease-out),visibility .7s;
}
.lccx-boot.gone{opacity:0;visibility:hidden;}
.lccx-boot .bl{
  width:0;height:2px;background:var(--gold);
  animation:bootline 1.1s var(--ease-out) forwards;max-width:220px;
}
@keyframes bootline{to{width:220px;}}
@media(prefers-reduced-motion:reduce){.lccx-boot{display:none;}}

/* logo lockup */
.lccx-head .brand img{height:46px;width:auto;max-width:none;}
.lccx-head.stuck .brand img{height:38px;}
.lccx-head .brand .bn{font-weight:800;font-size:16px;letter-spacing:-.02em;line-height:1.08;
  font-variation-settings:"wdth" 86;color:#fff;}
@media(max-width:520px){.lccx-head .brand img{height:38px;}}

/* ==========================================================================
   MOBILE HARDENING
   ch based max widths can exceed a narrow viewport, which was clipping copy.
   ========================================================================== */
html,body{max-width:100%;overflow-x:hidden;}
.lccx .lead,
.lccx .hero-sub,
.lccx p,
.lccx ul,
.lccx ol{max-width:min(62ch,100%);}
.lccx .hero-sub{max-width:min(52ch,100%);}
.lccx .faq .a{max-width:min(74ch,100%);}
.lccx .fit-why{max-width:min(62ch,100%);}
.lccx .step p{max-width:min(62ch,100%);}
.lccx .wrap,.lccx .wrap-narrow{width:100%;}

/* route ribbon on small screens: min-width was forcing the connector into a block */
@media(max-width:640px){
  .lccx .ribbon .seg{
    width:2px;min-width:0;height:26px;flex:0 0 auto;margin:0 0 0 4px;
    background:linear-gradient(180deg,var(--gold),rgba(244,236,230,.28));
    transform:scaleY(0);transform-origin:top;
  }
  .lccx .ribbon.in .seg{transform:scaleY(1);}
  .lccx .ribbon .stop{font-size:15px;letter-spacing:.12em;}
}

/* header breathing room so the lockup is never clipped */
@media(max-width:640px){
  .lccx-head{padding:12px 0;}
  .lccx-head.stuck{padding:9px 0;}
  .lccx .hero{padding-top:104px;}
}

/* sticky bar: keep both labels fully visible */
.lccx-bar a{min-width:0;padding-inline:6px;font-size:14px;}
@media(max-width:360px){.lccx-bar a{font-size:13px;}}

/* long words should never punch out of a container */
.lccx h1,.lccx h2,.lccx h3,.lccx h4,.lccx p,.lccx li,.lccx .fit-opt strong{
  overflow-wrap:break-word;
}

/* tap targets */
.lccx .btn{min-height:48px;}
.lccx .faq summary{min-height:48px;display:flex;align-items:center;}

/* ==========================================================================
   PROGRAMME GRID
   One flagship card beside a stacked list of the rest.
   ========================================================================== */
.lccx .progrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(14px,2vw,22px);}
@media(max-width:940px){.lccx .progrid{grid-template-columns:1fr;}}

.lccx .prog{
  position:relative;display:block;text-decoration:none;border-radius:var(--r);
  background:rgba(244,236,230,.055);border:1px solid var(--line-dark);
  overflow:hidden;transition:transform .45s var(--ease),border-color .3s,background .3s;
}
.lccx .prog:hover{transform:translateY(-5px);border-color:var(--gold);background:rgba(244,236,230,.09);}

.lccx .prog.feature{
  min-height:clamp(420px,46vw,560px);display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;border-color:transparent;
}
.lccx .prog.feature img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.78;
  transition:transform 1.1s var(--ease-out);
}
.lccx .prog.feature:hover img{transform:scale(1.06);}
.lccx .prog.feature::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,42,30,.10) 0%,rgba(12,42,30,.62) 48%,rgba(12,42,30,.95) 100%);
}
.lccx .prog-in{padding:clamp(20px,2.6vw,32px);}
.lccx .prog-in h3{color:#fff;margin-bottom:9px;}
.lccx .prog-in p{color:var(--on-dark-muted);font-size:15.5px;margin:0 0 14px;max-width:46ch;}
.lccx .prog .tagline{
  display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--gold);margin-bottom:12px;
}
.lccx .go-link{
  display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;
  color:var(--gold);
}
.lccx .go-link .ar{transition:transform .35s var(--ease);}
.lccx .prog:hover .go-link .ar{transform:translateX(5px);}

.lccx .prog-col{display:grid;grid-template-rows:repeat(4,1fr);gap:clamp(14px,2vw,22px);}
.lccx .prog-col .prog-in{padding:clamp(16px,2vw,24px);}
.lccx .prog-col h3{font-size:clamp(19px,2vw,24px);}
.lccx .prog-col p{font-size:14.5px;margin-bottom:10px;}

/* ==========================================================================
   PEOPLE
   ========================================================================== */
.lccx .people{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);}
@media(max-width:820px){.lccx .people{grid-template-columns:repeat(2,1fr);}}
.lccx .person{margin:0;}
.lccx .person img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);
  filter:grayscale(1) contrast(1.02);transition:filter .5s var(--ease),transform .5s var(--ease);
}
.lccx .person:hover img{filter:grayscale(0);transform:translateY(-4px);}
.lccx .person figcaption{margin-top:12px;display:grid;gap:2px;}
.lccx .person strong{font-size:16.5px;font-weight:700;letter-spacing:-.015em;}
.lccx .person span{font-size:13.5px;color:var(--muted);}
.lccx .dark .person span{color:var(--on-dark-muted);}

/* accent button reads as the primary action */
.lccx .btn-gold{background:var(--gold);color:var(--ink);}
.lccx .btn-gold:hover{background:#E0B855;}
.lccx .btn-rust{background:var(--crimson);color:#fff;}
.lccx .btn-rust:hover{background:var(--crimson-deep);}

/* ==========================================================================
   SHORT HERO for interior pages
   ========================================================================== */
.lccx .hero-short{min-height:min(78svh,720px);padding-top:clamp(120px,16vw,170px);}
.lccx .hero-short .display{font-size:clamp(42px,7vw,88px);}

/* ==========================================================================
   DEFINITION LIST
   ========================================================================== */
.lccx .deflist{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2.2vw,26px);}
@media(max-width:760px){.lccx .deflist{grid-template-columns:1fr;}}
.lccx .def{
  border-top:2px solid var(--line-dark);padding-top:18px;
}
.lccx .def h4{margin-bottom:7px;color:#fff;}
.lccx .def p{margin:0;color:var(--on-dark-muted);font-size:15.5px;}

/* ==========================================================================
   HERO LEGIBILITY
   The LCC duotone images are already dark, so the stacked overlay was burying
   the campus. Lift the image and shape the scrim so the photograph reads.
   ========================================================================== */
.lccx .hero-bg .frame img{opacity:.82;}
.lccx .hero-bg::after{
  background:
    linear-gradient(180deg, rgba(12,42,30,.30) 0%, rgba(12,42,30,.22) 30%, rgba(12,42,30,.88) 100%),
    linear-gradient(90deg, rgba(12,42,30,.82) 0%, rgba(12,42,30,.55) 42%, rgba(12,42,30,.12) 78%);
}
@media(max-width:820px){
  .lccx .hero-bg::after{
    background:linear-gradient(180deg, rgba(12,42,30,.40) 0%, rgba(12,42,30,.42) 32%, rgba(12,42,30,.92) 100%);
  }
}
/* keep the copy readable over the lifted image */
.lccx .hero .display{text-shadow:0 2px 28px rgba(12,42,30,.55);}
.lccx .hero-sub{color:#EFE4DE;text-shadow:0 1px 14px rgba(12,42,30,.7);}
.lccx .hero .eyebrow{text-shadow:0 1px 10px rgba(12,42,30,.7);}
.lccx .ribbon .stop{text-shadow:0 1px 10px rgba(12,42,30,.7);}


/* ==========================================================================
   COLOUR ORDER: green ground, red action, white surface, blue in the details
   ========================================================================== */

/* the primary action is the logo red, which reads strongly on green */
.lccx .btn-gold{background:var(--crimson);color:#fff;}
.lccx .btn-gold:hover{background:var(--crimson-deep);}
.lccx .btn-rust{background:var(--crimson);color:#fff;}
.lccx .btn-rust:hover{background:var(--crimson-deep);}

/* small accent text on dark green uses mint so it stays legible */
.lccx .dark .eyebrow,
.lccx .hero .eyebrow{color:var(--mint) !important;}
.lccx .dark .eyebrow::before,
.lccx .hero .eyebrow::before{background:var(--mint);}
.lccx .tc-label,
.lccx .prog .tagline,
.lccx .pillar .n,
.lccx .go-link,
.lccx-foot h5,
.lccx .dark .fit-q legend .qn{color:var(--mint);}
.lccx .dark .step::before{color:var(--mint);}
.lccx .dark .note{border-left-color:var(--mint);}
.lccx .dark .note .lb{color:var(--mint);}

/* the hero accent word is the logo red at display size */
.lccx .hero .display .go{color:var(--crimson);}

/* route device and pips in mint on the dark ground */
.lccx .ribbon .stop .pip{background:var(--mint);}
.lccx .ribbon .seg{background:linear-gradient(90deg,var(--mint),rgba(237,242,238,.28));}
@media(max-width:640px){
  .lccx .ribbon .seg{background:linear-gradient(180deg,var(--mint),rgba(237,242,238,.28));}
}
.lccx .hero-pips button.on{background:var(--mint);}
.lccx .tc-line{background:linear-gradient(180deg,transparent,var(--mint),transparent);}
@media(max-width:820px){
  .lccx .tc-line{background:linear-gradient(90deg,transparent,var(--mint),transparent);}
}
.lccx .tc-dot{background:var(--mint);}
.lccx .marq span::after{background:var(--crimson);}

/* light surfaces: red is the accent, green is the structure */
.lccx .eyebrow{color:var(--crimson);}
.lccx .eyebrow::before{background:var(--crimson);}
.lccx .step::before{color:var(--crimson);}
.lccx .faq summary::after{border-color:var(--crimson);}
.lccx .note{border-left-color:var(--crimson);}
.lccx .note .lb{color:var(--crimson);}
.lccx .fit-q legend .qn{color:var(--crimson);}
.lccx .fit-result h3{color:var(--green);}
.lccx .dark .fit-result h3{color:var(--mint);}
.lccx .fit-opt:hover{border-color:var(--crimson);}
.lccx .dark .fit-opt:hover{border-color:var(--mint);}
.lccx .fld input:focus,.lccx .fld select:focus{
  border-color:var(--green-lift);box-shadow:0 0 0 3px rgba(31,122,85,.18);
}
.lccx .stat .v{color:var(--green);}
.lccx .dark .stat .v{color:#fff;}

/* blue: the smallest details only */
.lccx .tiny a{color:var(--blue);}
.lccx-foot .bottom{border-top-color:var(--line-dark);}
.lccx ::selection{background:var(--mint);color:var(--ink);}

/* sticky bar */
.lccx-bar .w{background:var(--crimson);color:#fff;}
.lccx-bar .c{background:rgba(237,242,238,.14);color:#fff;}

/* ==========================================================================
   VIDEO
   ========================================================================== */
.lccx .lccx-video{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);
  aspect-ratio:16/9;}
.lccx .lccx-video-el{width:100%;height:100%;display:block;object-fit:cover;background:var(--ink);}
.lccx .lccx-play{
  position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(12,42,30,.25),rgba(12,42,30,.72));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  font-family:var(--f);color:#fff;transition:opacity .45s var(--ease),background .45s;
}
.lccx .lccx-play:hover{background:linear-gradient(180deg,rgba(12,42,30,.18),rgba(12,42,30,.62));}
.lccx .lccx-video.playing .lccx-play{opacity:0;pointer-events:none;}
.lccx .lccx-play .tri{
  width:76px;height:76px;border-radius:50%;background:var(--crimson);
  display:grid;place-items:center;transition:transform .4s var(--ease),background .3s;
  box-shadow:0 10px 40px rgba(12,42,30,.5);
}
.lccx .lccx-play .tri::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;
}
.lccx .lccx-play:hover .tri{transform:scale(1.08);background:var(--crimson-deep);}
.lccx .lccx-play .lbl{
  font-weight:800;font-size:clamp(17px,2.2vw,24px);letter-spacing:-.02em;
  font-variation-settings:"wdth" 86;text-shadow:0 2px 14px rgba(12,42,30,.6);
}
.lccx .lccx-play .dur{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--mint);
}
@media(prefers-reduced-motion:reduce){.lccx .lccx-play .tri{transition:none;}}

/* ==========================================================================
   STRUCTURAL FIXES
   The utilities are scoped to .lccx, which now sits on <body>, so the header
   and footer resolve them too. Also kills the default body margin that was
   showing as a few pixels of dead space down both edges.
   ========================================================================== */
html{margin:0;padding:0;}
body.lccx{margin:0;padding:0;}
body.lccx .lccx-main{display:block;}

/* header and footer are inside the scope now, so .wrap gutters apply */
.lccx .lccx-head .wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut);width:100%;}
.lccx .lccx-foot .wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut);width:100%;}

/* nothing should ever push the document sideways */
body.lccx{overflow-x:clip;}

/* ==========================================================================
   HEADER: reveal on scroll up, tuck away on scroll down
   ========================================================================== */
/* Retract on scroll using top, never transform. A transformed ancestor becomes
   the containing block for its position:fixed children, which trapped the
   mobile drawer inside the 66px header. top costs a little more to animate
   on one element and keeps the drawer anchored to the viewport. */
.lccx-head{transition:top .45s var(--ease),background .4s var(--ease),padding .4s var(--ease),box-shadow .4s;}
.lccx-head.hide{top:-140px;}
.lccx-head.stuck{background:rgba(12,42,30,.95);backdrop-filter:blur(14px) saturate(1.2);}

/* ==========================================================================
   FLOATING CONTACT (desktop and mobile)
   ========================================================================== */
.lccx-float{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:890;
  display:flex;flex-direction:column;gap:10px;font-family:var(--f);
}
.lccx-float a{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:13px 18px;border-radius:100px;font-weight:700;font-size:14.5px;
  box-shadow:0 8px 30px rgba(12,42,30,.32);
  transition:transform .35s var(--ease),box-shadow .35s;
  white-space:nowrap;
}
.lccx-float a:hover{transform:translateY(-3px);box-shadow:0 12px 38px rgba(12,42,30,.42);}
.lccx-float .wa{background:#25D366;color:#08301B;}
.lccx-float .ph{background:var(--crimson);color:#fff;}
.lccx-float .ico{width:19px;height:19px;flex:none;}
@media(max-width:768px){ .lccx-float{display:none;} }

/* ==========================================================================
   AMBIENT HERO VIDEO
   ========================================================================== */
.lccx .hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;opacity:0;transition:opacity 1.6s var(--ease-out);
  pointer-events:none;
}
.lccx .hero-video.ready{opacity:.62;}
.lccx .hero.has-video .hero-bg .frame{transition:opacity 1.2s var(--ease-out);}
.lccx .hero.video-live .hero-bg{opacity:0;transition:opacity 1.4s var(--ease-out);}
.lccx .hero.video-live .hero-pips{opacity:0;pointer-events:none;transition:opacity .6s;}
@media(max-width:820px){ .lccx .hero-video{display:none;} }
@media(prefers-reduced-motion:reduce){ .lccx .hero-video{display:none;} }

/* ==========================================================================
   PROSE  (rendered page and post content)
   ========================================================================== */
.lccx .prose{font-size:17.5px;line-height:1.72;color:var(--text);}
.lccx .prose > *:first-child{margin-top:0;}
.lccx .prose h1,.lccx .prose h2{font-size:clamp(26px,3.6vw,40px);margin:1.5em 0 .5em;}
.lccx .prose h3{font-size:clamp(20px,2.4vw,27px);margin:1.5em 0 .45em;}
.lccx .prose h4,.lccx .prose h5,.lccx .prose h6{font-size:18px;margin:1.4em 0 .4em;}
.lccx .prose p{margin:0 0 1.15em;}
.lccx .prose a{color:var(--crimson);text-underline-offset:3px;}
.lccx .prose a:hover{color:var(--crimson-deep);}
.lccx .prose ul,.lccx .prose ol{margin:0 0 1.2em;padding-left:1.3em;list-style:revert;}
.lccx .prose li{margin-bottom:.5em;}
.lccx .prose img{border-radius:var(--r);margin:1.4em 0;}
.lccx .prose blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--crimson);
  font-size:1.1em;line-height:1.5;color:var(--muted);
}
.lccx .prose hr{border:0;border-top:1px solid var(--line);margin:2em 0;}
.lccx .prose table{
  width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15.5px;
  display:block;overflow-x:auto;white-space:nowrap;
}
.lccx .prose th,.lccx .prose td{border:1px solid var(--line);padding:10px 13px;text-align:left;}
.lccx .prose th{background:var(--paper-2);font-weight:700;}
.lccx .prose iframe,.lccx .prose video{max-width:100%;border-radius:var(--r);}
/* strip the old builder wrappers that survive inside content */
.lccx .prose .elementor,.lccx .prose [class*="elementor-"]{all:unset;display:block;}

/* ==========================================================================
   POST CARDS
   ========================================================================== */
.lccx .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);}
@media(max-width:940px){.lccx .cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.lccx .cards{grid-template-columns:1fr;}}
.lccx .card{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.lccx .card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(12,42,30,.13);border-color:var(--crimson);}
.lccx .card-img{overflow:hidden;aspect-ratio:16/10;background:var(--paper-2);}
.lccx .card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out);}
.lccx .card:hover .card-img img{transform:scale(1.06);}
.lccx .card-in{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1;}
.lccx .card-date{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--crimson);}
.lccx .card h3{font-size:20px;margin:0;line-height:1.22;}
.lccx .card p{font-size:15px;color:var(--muted);margin:0;flex:1;}
.lccx .card .go-link{color:var(--green);}

/* ==========================================================================
   PAGER
   ========================================================================== */
.lccx .pager{display:flex;gap:8px;flex-wrap:wrap;margin-top:38px;justify-content:center;}
.lccx .pager .page-numbers{
  min-width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border:1px solid var(--line);border-radius:100px;text-decoration:none;
  font-weight:700;font-size:15px;color:var(--text);background:#fff;transition:all .25s var(--ease);
}
.lccx .pager .page-numbers:hover{border-color:var(--crimson);color:var(--crimson);}
.lccx .pager .page-numbers.current{background:var(--green);border-color:var(--green);color:#fff;}

/* ==========================================================================
   COLOUR RHYTHM
   Green is the frame, not the whole room. White carries most of the reading,
   green punctuates, red marks the actions, and one crimson band per page
   breaks the run so nothing reads as a wall of green.
   ========================================================================== */
.lccx .tint{background:linear-gradient(180deg,var(--paper) 0%,#EDF3EE 100%);}
.lccx .band{background:var(--crimson);color:#fff;}
.lccx .band h2,.lccx .band h3{color:#fff;}
.lccx .band .lead{color:rgba(255,255,255,.9);}
.lccx .band .eyebrow{color:#fff;}
.lccx .band .eyebrow::before{background:#fff;}
.lccx .band .btn-ghost{border-color:#fff;color:#fff;}
.lccx .band .btn-ghost:hover{background:#fff;color:var(--crimson);}

/* softer dark: less saturated so long green stretches breathe */
.lccx .dark{background:linear-gradient(180deg,var(--ink) 0%,#0E3324 100%);}

/* white surfaces get a hairline so sections separate without more colour */
.lccx section + section{border-top:1px solid transparent;}
.lccx .pad + .pad{border-top:1px solid var(--line);}
.lccx .dark + .dark,.lccx .dark + .pad,.lccx .pad + .dark{border-top:0;}

/* ==========================================================================
   AMBIENT MOTION
   Slow, low amplitude, and switched off for reduced motion.
   ========================================================================== */
@keyframes lccxFloat{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-9px,0);}
}
@keyframes lccxDrift{
  0%{transform:scale(1) translate3d(0,0,0);}
  100%{transform:scale(1.06) translate3d(0,-1.5%,0);}
}
@keyframes lccxSheen{
  0%{transform:translateX(-120%);}
  100%{transform:translateX(220%);}
}
.lccx .float-slow{animation:lccxFloat 7s ease-in-out infinite;}
.lccx .drift-slow img{animation:lccxDrift 26s ease-in-out infinite alternate;}

/* a slow highlight passing over the accent band, once it comes into view */
.lccx .band{position:relative;overflow:hidden;}
.lccx .band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
  transform:translateX(-120%);
}
.lccx .band.in::after{animation:lccxSheen 2.6s var(--ease-out) .3s 1 forwards;}

/* section headings get a slow rule that draws itself */
.lccx .ruled{position:relative;padding-bottom:16px;}
.lccx .ruled::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--crimson);
  transition:width 1.4s var(--ease-out);
}
.lccx .ruled.in::after{width:88px;}

@media(prefers-reduced-motion:reduce){
  .lccx .float-slow,.lccx .drift-slow img,.lccx .band.in::after{animation:none;}
  .lccx .ruled::after{transition:none;width:88px;}
}

/* programme cards on a light ground */
.lccx .progrid.on-light .prog{background:#fff;border-color:var(--line);}
.lccx .progrid.on-light .prog:hover{border-color:var(--crimson);box-shadow:0 18px 44px rgba(12,42,30,.12);background:#fff;}
.lccx .progrid.on-light .prog-in h3{color:var(--text);}
.lccx .progrid.on-light .prog-in p{color:var(--muted);}
.lccx .progrid.on-light .go-link{color:var(--crimson);}
/* the flagship card keeps its photographic treatment */
.lccx .progrid.on-light .prog.feature .prog-in h3{color:#fff;}
.lccx .progrid.on-light .prog.feature .prog-in p{color:var(--on-dark-muted);}
.lccx .progrid.on-light .prog.feature .go-link{color:var(--mint);}
.lccx .progrid.on-light .prog.feature .tagline{color:var(--mint);}
.lccx .progrid.on-light .prog.feature{border-color:transparent;background:var(--ink);}

/* people on the crimson band */
.lccx .band .person figcaption strong{color:#fff;}
.lccx .band .person figcaption span{color:rgba(255,255,255,.82);}
.lccx .band .person img{filter:grayscale(1) contrast(1.05);}
.lccx .band .person:hover img{filter:grayscale(0);}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.lccx .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;}
@media(max-width:900px){.lccx .contact-grid{grid-template-columns:1fr;}}
.lccx .contact-list{display:grid;gap:22px;margin:0;}
.lccx .contact-list > div{border-top:1px solid var(--line);padding-top:16px;}
.lccx .contact-list dt{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--crimson);margin-bottom:7px;
}
.lccx .contact-list dd{margin:0;font-size:16.5px;line-height:1.55;}
.lccx .contact-list a{color:var(--text);text-decoration:underline;text-underline-offset:3px;}
.lccx .contact-list a:hover{color:var(--crimson);}
.lccx .mapwrap{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/7;background:var(--paper-2);
}
@media(max-width:700px){.lccx .mapwrap{aspect-ratio:4/3;}}
.lccx .mapwrap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9);}

/* ==========================================================================
   NAV DROPDOWN
   ========================================================================== */
.lccx-head .has-sub{position:relative;}
.lccx-head .subtoggle{
  background:none;border:0;cursor:pointer;font-family:var(--f);
  color:#fff;font-size:14.5px;font-weight:600;letter-spacing:-.01em;opacity:.88;
  display:inline-flex;align-items:center;gap:7px;padding:4px 0;
}
.lccx-head .subtoggle:hover{opacity:1;}
.lccx-head .subtoggle .cv{
  width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
.lccx-head .has-sub.open .subtoggle .cv{transform:rotate(-135deg) translateY(1px);}
.lccx-head .sub{
  position:absolute;top:calc(100% + 14px);left:-18px;min-width:320px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 20px 54px rgba(12,42,30,.20);
  padding:8px;display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.lccx-head .has-sub.open .sub{opacity:1;visibility:visible;transform:translateY(0);}
.lccx-head .sub a{display:grid;gap:2px;padding:11px 14px;border-radius:2px;color:var(--text);opacity:1;}
.lccx-head .sub a::after{display:none;}
.lccx-head .sub a:hover{background:var(--paper-2);}
.lccx-head .sub a strong{font-size:15.5px;font-weight:700;letter-spacing:-.015em;}
.lccx-head .sub a span{font-size:13px;color:var(--muted);}
@media(max-width:1024px){
  .lccx-head .has-sub{width:100%;}
  .lccx-head .subtoggle{font-size:23px;font-weight:800;padding:12px 0;font-variation-settings:"wdth" 86;}
  .lccx-head .sub{
    position:static;min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 6px 14px;
    opacity:1;visibility:visible;transform:none;display:none;
  }
  .lccx-head .has-sub.open .sub{display:grid;}
  .lccx-head .sub a{color:#fff;padding:9px 0;}
  .lccx-head .sub a:hover{background:transparent;}
  .lccx-head .sub a strong{font-size:16.5px;font-weight:600;}
  .lccx-head .sub a span{color:var(--on-dark-muted);font-size:12.5px;}
  .lccx-head nav{overflow-y:auto;justify-content:flex-start;padding-top:96px;}
}

/* five column footer */
.lccx-foot .fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr 1.15fr;}
@media(max-width:1100px){.lccx-foot .fgrid{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:820px){.lccx-foot .fgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.lccx-foot .fgrid{grid-template-columns:1fr;}}

/* ==========================================================================
   MOBILE NAV: CONTAINING BLOCK RELEASE
   .lccx-head carries a transform so it can slide out of the way on scroll.
   A transformed ancestor becomes the containing block for its position:fixed
   descendants, which clamped the open drawer to the height of the header
   (measured 136px instead of the full 812px viewport). Dropping the transform
   while the menu is open hands the drawer back to the viewport. The header is
   pinned open anyway in that state, so it loses nothing.
   ========================================================================== */
.lccx-head.open,
.lccx-head.open.hide{top:0;}

/* Sticky mobile bar clearance. Re-asserted here because body.lccx{padding:0}
   further up the sheet has equal specificity and would otherwise win on order,
   letting the fixed bar sit on top of the last 67px of the footer. */
@media(max-width:768px){
  body.lccx{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
}