/* ==========================================================================
   SEO for Education (September 2026 redesign): this page's own pictures.
   Loaded after ind-seox.css; every rule is scoped to the Education page.
   Parts: resources/views/industries/seo/education/{why,versus,visual}.blade.php
   Every picture rests complete without JS and under reduced motion; loops
   pause off screen (ind-wdp.css pauses sections that are not .is-live).
   ========================================================================== */

/* ---- WHY 03: enrolment intent through the year; content that ranks before the windows catches the peaks ---- */
main[data-seo-page="education"] .sxd-cal{--col:calc(100% / 12);display:grid;gap:8px;padding:20px 20px 16px}
main[data-seo-page="education"] .sxd-cal__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
main[data-seo-page="education"] .sxd-cal__k{font-weight:600;color:var(--text-soft)}
main[data-seo-page="education"] .sxd-cal__legend{display:flex;gap:14px;font-size:12px;color:var(--text-dim)}
main[data-seo-page="education"] .sxd-cal__legend span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
main[data-seo-page="education"] .sxd-cal__legend .is-win i{width:12px;height:12px;border-radius:3px;border:1px solid var(--gold-line);background:rgba(244,160,0,.22)}
main[data-seo-page="education"] .sxd-cal__legend .is-miss i{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--coral-soft);border:1px solid var(--coral-line);color:var(--coral);font-style:normal;font-size:9px;font-weight:800}
main[data-seo-page="education"] .sxd-cal__plot{position:relative;height:150px;margin-top:8px}
main[data-seo-page="education"] .sxd-cal__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
main[data-seo-page="education"] .sxd-cal__area{fill:url(#sxd-intent)}
main[data-seo-page="education"] .sxd-cal__line{fill:none;stroke:var(--gold);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(244,160,0,.55))}
main[data-seo-page="education"] .sxd-cal__win{position:absolute;top:0;bottom:0;left:calc(var(--col) * var(--a));width:calc(var(--col) * var(--s));border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,rgba(244,160,0,.2),rgba(244,160,0,.05));border:1px solid rgba(244,160,0,.3);border-bottom:0}
main[data-seo-page="education"] .sxd-cal__win b{position:absolute;left:50%;top:-13px;display:grid;place-items:center;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--gold);color:#111;box-shadow:0 0 16px rgba(244,160,0,.55)}
main[data-seo-page="education"] .sxd-cal__win svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="education"] .sxd-cal__now{position:absolute;top:-4px;bottom:0;left:0;width:0;border-left:1.5px solid rgba(255,255,255,.55);opacity:0}
main[data-seo-page="education"] .sxd-cal__now::after{content:"";position:absolute;left:-4.5px;bottom:-4px;width:8px;height:8px;border-radius:50%;background:#fff}
main[data-seo-page="education"] .sxd-cal__months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding-top:6px;border-top:1px solid var(--edge-2)}
main[data-seo-page="education"] .sxd-cal__months span{text-align:center;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}
main[data-seo-page="education"] .sxd-cal__lanes{display:grid;gap:7px;margin-top:4px}
main[data-seo-page="education"] .sxd-lane{position:relative;height:18px}
main[data-seo-page="education"] .sxd-lane::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(255,255,255,.08)}
main[data-seo-page="education"] .sxd-lane__bar{position:absolute;top:3px;bottom:3px;left:calc(var(--col) * var(--a) + 3px);width:calc(var(--col) * var(--s) - 6px);border-radius:100px}
main[data-seo-page="education"] .sxd-lane--own .sxd-lane__bar{background:linear-gradient(90deg,rgba(244,160,0,.55),rgba(244,160,0,.3))}
main[data-seo-page="education"] .sxd-lane--late .sxd-lane__bar{background:rgba(255,122,107,.3);border:1px solid var(--coral-line)}
main[data-seo-page="education"] .sxd-lane__bar b{position:absolute;left:-3px;top:50%;display:grid;place-items:center;width:18px;height:18px;margin-top:-9px;border-radius:5px;background:#101318;border:1px solid var(--gold-line);color:var(--gold)}
main[data-seo-page="education"] .sxd-lane--late .sxd-lane__bar b{border-color:var(--coral-line);color:var(--coral)}
main[data-seo-page="education"] .sxd-lane__bar svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="education"] .sxd-lane__mark{position:absolute;top:50%;left:calc(var(--col) * (var(--a) + var(--s) / 2));display:grid;place-items:center;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;font-size:10px;font-weight:800}
main[data-seo-page="education"] .sxd-lane__mark.is-hit{background:var(--gold);color:#111;box-shadow:0 0 12px rgba(244,160,0,.6)}
main[data-seo-page="education"] .sxd-lane__mark.is-miss{background:var(--coral-soft);border:1px solid var(--coral-line);color:var(--coral)}
/* motion: the year draws in; then "now" walks the months and each window lights as it passes */
main[data-seo-page="education"] .sxd-cal__svg{transition:clip-path 2.4s var(--ease) .3s}
html.el8-js main[data-seo-page="education"] .sx-card:not(.is-in) .sxd-cal__svg{clip-path:inset(-10px 100% -2px 0)}
main[data-seo-page="education"] .sx-card.is-in .sxd-cal__svg{clip-path:inset(-10px -10px -2px 0)}
main[data-seo-page="education"] :is(.sxd-cal__win,.sxd-lane__bar,.sxd-lane__mark){transition:opacity .5s ease,transform .6s var(--ease)}
main[data-seo-page="education"] .sxd-cal__win{transition-delay:calc(.6s + var(--a) * .16s)}
main[data-seo-page="education"] .sxd-lane__bar{transition-delay:1.6s}
main[data-seo-page="education"] .sxd-lane__mark{transition-delay:calc(2s + var(--k) * .3s)}
html.el8-js main[data-seo-page="education"] .sx-card:not(.is-in) :is(.sxd-cal__win,.sxd-lane__mark){opacity:0;transform:translateY(8px)}
html.el8-js main[data-seo-page="education"] .sx-card:not(.is-in) .sxd-lane__bar{opacity:0;transform:scaleX(.2);transform-origin:left}
main[data-seo-page="education"] .sx-card.is-in .sxd-cal__now{animation:sxdNow 9s linear 3s infinite}
@keyframes sxdNow{0%{left:0;opacity:0}4%{opacity:.9}92%{opacity:.9}100%{left:100%;opacity:0}}
/* each window's moment: 9s per year, the window's centre month sets its delay */
main[data-seo-page="education"] .sx-card.is-in .sxd-cal__win{animation:sxdWin 9s ease infinite;animation-delay:calc(3s + (var(--a) + var(--s) / 2) / 12 * 9s - .5s)}
@keyframes sxdWin{0%,100%{background:linear-gradient(180deg,rgba(244,160,0,.2),rgba(244,160,0,.05))}6%,14%{background:linear-gradient(180deg,rgba(244,160,0,.38),rgba(244,160,0,.1))}}
main[data-seo-page="education"] .sx-card.is-in .sxd-lane__mark.is-hit{animation:sxdHit 9s ease infinite;animation-delay:calc(3s + (var(--a) + var(--s) / 2) / 12 * 9s - .2s)}
@keyframes sxdHit{0%,12%,100%{transform:none}5%{transform:scale(1.35)}}
main[data-seo-page="education"] .sx-card.is-in .sxd-lane__mark.is-miss{animation:sxdMiss 9s ease infinite;animation-delay:calc(3s + (var(--a) + var(--s) / 2) / 12 * 9s - .2s)}
@keyframes sxdMiss{0%,12%,100%{transform:none}3%{transform:translateX(-3px)}6%{transform:translateX(3px)}9%{transform:translateX(-2px)}}
@media (max-width:700px){
  main[data-seo-page="education"] .sxd-cal{padding:14px 14px 12px;gap:6px}
  main[data-seo-page="education"] .sxd-cal__legend{gap:10px;font-size:11px}
  main[data-seo-page="education"] .sxd-cal__plot{height:104px;margin-top:14px}
  main[data-seo-page="education"] .sxd-cal__win b{width:22px;height:22px;margin-left:-11px;top:-11px}
  main[data-seo-page="education"] .sxd-cal__win svg{width:14px;height:14px}
  main[data-seo-page="education"] .sxd-cal__months span{font-size:9px}
  main[data-seo-page="education"] .sxd-lane__bar b{width:16px;height:16px;margin-top:-8px}
  main[data-seo-page="education"] .sxd-lane__bar svg{width:10px;height:10px}
  main[data-seo-page="education"] .sxd-lane__mark{width:16px;height:16px;margin:-8px 0 0 -8px;font-size:9px}
}

/* ---- THE TRADE OFF: six intakes, a room of seats each; SEO fills more every intake, ads only stays flat ---- */
main[data-seo-page="education"] .sxd-seats{--axis:34px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;margin-bottom:34px;padding:26px 28px 24px;border-radius:28px;border:1px solid var(--edge);
  background:radial-gradient(60% 80% at 100% 0%,rgba(244,160,0,.07),transparent 70%),#0A0C10}
main[data-seo-page="education"] .sxd-seats__tags{display:grid;grid-template-rows:minmax(0,1fr) var(--axis) minmax(0,1fr);align-items:center;justify-items:start}
main[data-seo-page="education"] .sxd-seats__tag{padding:6px 12px;border-radius:100px;font-size:12.5px;font-weight:700;white-space:nowrap}
main[data-seo-page="education"] .sxd-seats__tag--own{grid-row:1;background:var(--gold);color:#111}
main[data-seo-page="education"] .sxd-seats__tag--rent{grid-row:3;background:var(--coral-soft);color:var(--coral);border:1px solid var(--coral-line)}
main[data-seo-page="education"] .sxd-seats__rows{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 16px}
main[data-seo-page="education"] .sxd-intake{display:grid;grid-template-rows:auto var(--axis) auto;min-width:0}
main[data-seo-page="education"] .sxd-room{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:8px;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.015)}
main[data-seo-page="education"] .sxd-room.is-full{border-color:var(--gold-line);background:rgba(244,160,0,.06);box-shadow:0 0 30px -12px rgba(244,160,0,.6)}
main[data-seo-page="education"] .sxd-intake__m{position:relative;display:grid;place-items:center}
main[data-seo-page="education"] .sxd-intake__m::before{content:"";position:absolute;left:-16px;right:0;top:50%;border-top:1px solid var(--edge-2)}
main[data-seo-page="education"] .sxd-intake:first-child .sxd-intake__m::before{left:0}
main[data-seo-page="education"] .sxd-intake__m b{position:relative;padding:3px 9px;border-radius:100px;border:1px solid var(--edge-2);background:#0C0E12;font:600 10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-mid)}
/* a seat: an empty chair back, or a student in it */
main[data-seo-page="education"] .sxd-seat{position:relative;display:block;aspect-ratio:1/1}
main[data-seo-page="education"] .sxd-seat::after{content:"";position:absolute;left:14%;right:14%;bottom:4%;height:46%;border-radius:45% 45% 3px 3px;border:1.5px solid rgba(255,255,255,.13)}
main[data-seo-page="education"] .sxd-room--rent .sxd-seat:not(.is-in)::after{border-color:rgba(255,122,107,.28);border-style:dashed}
main[data-seo-page="education"] .sxd-seat.is-in::before{content:"";position:absolute;left:50%;top:6%;width:36%;aspect-ratio:1/1;margin-left:-18%;border-radius:50%;background:#AEB8C6}
main[data-seo-page="education"] .sxd-seat.is-in::after{border:0;background:#AEB8C6}
main[data-seo-page="education"] .sxd-seat.is-seo::before,main[data-seo-page="education"] .sxd-seat.is-seo::after{background:var(--gold);box-shadow:0 0 10px rgba(244,160,0,.45)}
/* motion: the rooms fill intake by intake; then a glow runs along the seats the content keeps filling */
main[data-seo-page="education"] .sxd-seat.is-in{transition:opacity .4s ease,transform .6s var(--ease);transition-delay:calc(.3s + var(--k) * .22s + var(--s) * .025s)}
html.el8-js main[data-seo-page="education"] .sxd-seats:not(.is-in) .sxd-seat.is-in{opacity:0;transform:scale(.4)}
main[data-seo-page="education"] .sxd-seats.is-in .sxd-seat.is-seo{animation:sxdSeat 7s ease infinite;animation-delay:calc(2.8s + var(--k) * .28s + var(--s) * .02s)}
@keyframes sxdSeat{0%,14%,100%{transform:none;filter:none}6%{transform:translateY(-2px);filter:brightness(1.35)}}
@media (max-width:900px){
  main[data-seo-page="education"] .sxd-seats{grid-template-columns:minmax(0,1fr);gap:16px}
  main[data-seo-page="education"] .sxd-seats__tags{display:contents}
  main[data-seo-page="education"] .sxd-seats__tag{justify-self:start}
  main[data-seo-page="education"] .sxd-seats__rows{order:1}
  main[data-seo-page="education"] .sxd-seats__tag--rent{order:2}
}
@media (max-width:700px){
  main[data-seo-page="education"] .sxd-seats{--axis:28px;padding:16px 14px 16px;border-radius:22px;margin-bottom:22px}
  main[data-seo-page="education"] .sxd-seats__tag{font-size:11px;padding:5px 10px}
  main[data-seo-page="education"] .sxd-seats__rows{gap:0 6px}
  main[data-seo-page="education"] .sxd-room{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:4px;border-radius:8px}
  main[data-seo-page="education"] .sxd-intake__m::before{left:-6px}
  main[data-seo-page="education"] .sxd-intake__m b{padding:2px 5px;font-size:9px}
  main[data-seo-page="education"] .sxd-seat::after{border-width:1px}
}

/* ---- APPROACH 3: campus visibility; three campuses on one map, each with its own profile ---- */
main[data-seo-page="education"] .sxd-map{position:relative;height:168px;overflow:hidden;border-bottom:1px solid var(--edge);background:#0E1115}
main[data-seo-page="education"] .sxd-map__streets,main[data-seo-page="education"] .sxd-map__route{position:absolute;inset:0;width:100%;height:100%}
main[data-seo-page="education"] .sxd-map__streets g path{fill:none;stroke:rgba(255,255,255,.05);stroke-width:1}
main[data-seo-page="education"] .sxd-map__park{fill:rgba(79,191,160,.08)}
main[data-seo-page="education"] .sxd-map__water{fill:rgba(120,160,220,.07)}
main[data-seo-page="education"] .sxd-map__route path{fill:none;stroke:rgba(244,160,0,.35);stroke-width:1.5;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
main[data-seo-page="education"] .sxd-site{position:absolute;left:var(--x);bottom:16px;display:grid;justify-items:center;gap:4px;width:30%;margin-left:-15%}
main[data-seo-page="education"] .sxd-site__pin{display:grid;place-items:center;width:28px;height:28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#2A2E36;color:var(--text-mid);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.9);transition:background .4s,color .4s}
main[data-seo-page="education"] .sxd-site__pin svg{width:16px;height:16px;transform:rotate(45deg);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="education"] .sxd-site__bldg{width:74px;height:56px;overflow:visible;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
main[data-seo-page="education"] .sxd-site__bldg > *{fill:#C9D0DA}
main[data-seo-page="education"] .sxd-site__bldg .r{fill:#E4E8EE}
main[data-seo-page="education"] .sxd-site__bldg .w{fill:#1A1E25}
main[data-seo-page="education"] .sxd-site__card{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:100px;border:1px solid var(--edge-2);background:#12151A;font-size:11px;white-space:nowrap;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.9)}
main[data-seo-page="education"] .sxd-site__card i{font-style:normal;color:var(--gold)}
main[data-seo-page="education"] .sxd-site__card b{color:var(--text)}
main[data-seo-page="education"] .sxd-site__card em{position:relative;padding-left:9px;font-style:normal;color:var(--teal)}
main[data-seo-page="education"] .sxd-site__card em::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--teal)}
/* rest state: every campus live, the first in the spotlight */
main[data-seo-page="education"] .sxd-site:first-of-type .sxd-site__pin{background:var(--gold);color:#111}
/* motion: the spotlight moves campus to campus (7.5s round) */
:is(.wdp-vis.is-on,.wdp-chap.is-on) .sxd-site .sxd-site__pin{animation:sxdPin 7.5s ease infinite;animation-delay:calc(var(--k) * 2.5s)}
:is(.wdp-vis.is-on,.wdp-chap.is-on) .sxd-site .sxd-site__card{animation:sxdCard 7.5s ease infinite;animation-delay:calc(var(--k) * 2.5s)}
:is(.wdp-vis.is-on,.wdp-chap.is-on) .sxd-site .sxd-site__bldg .w{animation:sxdLit 7.5s ease infinite;animation-delay:calc(var(--k) * 2.5s)}
@keyframes sxdPin{0%{background:#2A2E36;color:var(--text-mid);transform:rotate(-45deg)}6%{background:var(--gold);color:#111;transform:rotate(-45deg) translate(3px,-3px)}12%,30%{background:var(--gold);color:#111;transform:rotate(-45deg)}36%,100%{background:#2A2E36;color:var(--text-mid);transform:rotate(-45deg)}}
@keyframes sxdCard{0%,36%,100%{border-color:var(--edge-2)}8%,30%{border-color:var(--gold-line);box-shadow:0 0 18px -6px rgba(244,160,0,.7)}}
@keyframes sxdLit{0%,36%,100%{fill:#1A1E25}8%,30%{fill:#F4B43A}}
/* the rows: a pin, a page, a stack of matching listings */
main[data-seo-page="education"] .sxd-live__t{display:inline-flex;align-items:center;gap:11px;min-width:0}
main[data-seo-page="education"] .sxd-live__t i{position:relative;flex:0 0 auto;width:14px;height:14px}
main[data-seo-page="education"] .sxd-live__t i.is-pin{border-radius:50% 50% 50% 0;transform:rotate(-45deg) scale(.9);background:var(--gold)}
main[data-seo-page="education"] .sxd-live__t i.is-pin::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#0E1015}
main[data-seo-page="education"] .sxd-live__t i.is-page{width:12px;border-radius:2px;border:1.5px solid var(--gold);background:linear-gradient(var(--gold),var(--gold)) 2px 4px/5px 1.5px no-repeat,linear-gradient(var(--gold),var(--gold)) 2px 7px/5px 1.5px no-repeat}
main[data-seo-page="education"] .sxd-live__t i.is-list{border-radius:3px;border:1.5px solid var(--gold);box-shadow:3px -3px 0 -1.5px #0E1015,3px -3px 0 0 rgba(244,160,0,.6),6px -6px 0 -1.5px #0E1015,6px -6px 0 0 rgba(244,160,0,.35)}
:is(.wdp-vis.is-on,.wdp-chap.is-on) .sxd-live b{animation:sxvPop 7.5s ease infinite;animation-delay:calc(var(--i) * 2.5s + .4s)}
@media (max-width:700px){
  main[data-seo-page="education"] .sxd-map{height:150px}
  main[data-seo-page="education"] .sxd-site{bottom:12px}
  main[data-seo-page="education"] .sxd-site__bldg{width:62px;height:47px}
  main[data-seo-page="education"] .sxd-site__card{font-size:10px;padding:2px 7px;gap:4px}
}