/* ================================================================
   SENIOR-READABILITY LAYER — loaded last on every frontend page.
   Additive only: no existing rule in site.css / inner.css is edited.

   Most visitors are 60+ and read with spectacles, so:
   - Every page is set at the largest reading size: the root is 125%,
     so 1rem = 20px. Type is in rem, which also honours the reader's
     own browser font setting (the theme's px sizes ignored it).
   - Body copy is 22.5px and nothing a visitor reads is under 16px, on
     any screen (it was 8–13px); small card headings use Poppins instead of the
     hairline Playfair serif, which breaks up at small sizes.
   - The top bar and navbar keep the theme's design, enlarged as one
     piece (section 4).
   - Text colours meet WCAG AA without going harsh: the theme's own grey
     (5.9:1) stays, gold text moves from 3.5:1 to a warm 5.3:1, and the
     gold accent words in headings to at least 3.1:1. Input borders reach
     3:1 (they were 1.3:1 — practically invisible).
   - Buttons and links are at least 44–48px tall, and keyboard focus
     shows a thick ring that is visible on light and dark sections.
   ================================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --gold-text:#866719;       /* gold used as TEXT on light backgrounds: 5.3:1 on white, 4.8:1 on pale gold (was #a8842a, 3.5:1) */
  --field-border:#a8842a;    /* input outlines: 3.5:1, the brand's own dark gold */
  --read-body:1.125rem;      /* 22.5px running text */
  --read-small:1rem;         /* 20px — smallest running text */
  --read-label:.9375rem;     /* 18.75px — only uppercase labels and badges */
}
html{font-size:125%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Very large monitors: text that is right at 1920px looks small from the same
   distance on a 2560px+ screen, so the whole page steps up with it. */
@media(min-width:2400px){ html{font-size:137.5%} }
@media(min-width:3200px){
  html{font-size:162.5%}
  :root{--cap:2912px}
  .wrap,.enroll-bar-inner{max-width:min(calc(100% - 136px),var(--cap))}
}
body{font-size:var(--read-body);line-height:1.75}
::placeholder{color:#6b6455;opacity:1}              /* 5.9:1, was the browser's pale grey */
mark.hit{background:#fde68a;color:inherit;border-radius:3px;padding:0 .08em}

/* ---------- 2. KEYBOARD FOCUS ---------- */
:focus-visible{outline:3px solid #12100c;outline-offset:3px;box-shadow:0 0 0 7px rgba(212,175,55,.55)}
.site-footer :focus-visible,.page-hero :focus-visible,.hero :focus-visible,
.kn-section :focus-visible,.how-section :focus-visible,.enroll-bar :focus-visible,.lightbox :focus-visible{outline-color:#f0d97d}

/* ---------- 3. FASTER, CALMER MOTION ---------- */
/* Sections faded in over 0.8s after scrolling into view; readers waited for the words. */
.reveal{transition-duration:.45s}
.reveal[data-d="1"]{transition-delay:.04s}
.reveal[data-d="2"]{transition-delay:.08s}
.reveal[data-d="3"]{transition-delay:.12s}
.reveal[data-d="4"]{transition-delay:.16s}
/* Legal-knowledge tiles bounced non-stop under the cursor, which makes them hard to hit. */
.kn-card:hover{animation:none;transform:translateY(-6px)}
/* Return visits skip the preloader unless the page is still loading after the short threshold in the head script. */
.ls-return:not(.ls-slow-load) .se-pre-con{display:none}

/* ---------- 4. TOP BAR + NAVBAR: THE THEME'S OWN DESIGN, ENLARGED ----------
   The header keeps its exact design; `zoom` enlarges all of it — text, logo,
   spacing, buttons — by the same A++ step as the page (--hz = 125%).
   Its rules below are the theme's original values; they only stop the header
   inheriting the page's enlarged body text, so it scales as one piece. */
.topbar,.site-header{zoom:var(--z);line-height:1.7}
/* the thin top strip has room for the full step at every width; the menu row uses --hz below */
.topbar{--z:var(--tz)}
.site-header{--z:var(--hz)}
:root{--tz:1.25}
.site-header{font-size:16px}
.topbar :focus-visible,.site-header :focus-visible{outline:2px solid var(--gold);outline-offset:3px;box-shadow:none}
/* The header is at the full A++ step at every width. One row of nine links at
   that size (16px links) needs ~1545px plus room between the links, which a
   screen has from 1840px up; below that the
   header is the theme's own compact ☰ layout (see the end of this section), so
   no screen gets a shrunken menu. Very large monitors step up with the page. */
:root{--hz:1.25}
@media(min-width:2400px){ :root{--hz:1.375;--tz:1.375} }
@media(min-width:3200px){ :root{--hz:1.625;--tz:1.625} }
/* the logo in its own colours: the theme's brightness(1.5) turned its gold neon */
.nav-logo img{filter:none}
/* Menu spacing: the links were packed together in the middle of the bar with
   the free space left over on both sides of them; spread that space evenly
   between the links instead. */
@media(min-width:1840px){
  .nav-wrap > nav{flex:1 1 auto;min-width:0}
  .nav-menu{justify-content:space-evenly}
}
/* Menu hover: each dropdown opens 10px below its menu item and ignored the
   pointer the moment it left the item, so it closed while the pointer crossed
   that gap and its links (Acts, Rules, Course, Free Notes) could not be
   reached. An invisible strip on top of the dropdown bridges the gap. */
.nav-menu .has-drop .dropdown::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
/* keep the header's edges on the same line as the page content below it
   (sizes inside a zoomed box are multiplied by its --z, so divide them back) */
.topbar .wrap,.site-header .wrap{max-width:calc(1220px / var(--z))}
.site-header .wrap{padding:0 calc(18px / var(--z))}
@media(min-width:1360px){
  .topbar .wrap,.site-header .wrap{max-width:min(max(calc(1220px / var(--z)),calc(100% - 136px / var(--z))),calc(var(--cap,2240px) / var(--z)))}
}
@media(max-width:600px){ .site-header .wrap{padding:0 calc(14px / var(--z))} }
@media(max-width:480px){ .site-header .wrap{padding:0 calc(12px / var(--z))} }
/* 1025–1839px: the full-size single row does not fit (below ~1240px even the
   original row pushed the Login button off-screen), so use the theme's own
   compact ☰ header, the one it already shows on phones and tablets. */
@media(min-width:1025px) and (max-width:1839px){
  .burger{display:flex}
  .nav-menu,.btn-login{display:none}
  .mobile-menu{display:block}
}
/* Readable header text on every screen (these sizes are inside the zoomed
   header, so they show 25% larger): the top strip was 8–12px, the ☰ menu
   links shrank to 12px on phones. */
.topbar-tags,.topbar-contact a{font-size:12.8px}   /* 16px on screen */
.topbar-contact img{width:13px;height:13px}
@media(max-width:1024px){ .topbar .wrap{flex-wrap:wrap;justify-content:center;row-gap:4px} }
@media(max-width:1024px){ .topbar{max-height:230px} }
.mobile-menu a{font-size:14px}
.mobile-menu .sub a{font-size:13px}
.nav-menu > li > a,.btn-login{font-size:12.8px}   /* one-row menu and Login: 16px on screen (were 12 / 11.5px) */

/* ---------- 6. HEADINGS + RUNNING TEXT ---------- */
.page-hero h1{font-size:clamp(2.125rem,1.35rem + 3.4vw,3.5rem)}
.crumbs{font-size:1rem}
.section-title{font-size:clamp(1.875rem,1.15rem + 2.3vw,2.875rem)}
/* the accent word was a pale gold gradient (2.1:1 at its lightest); keep it gold, just deep enough (≥3.1:1) */
.section-title .accent{background:linear-gradient(135deg,#a8842a 0%,#b08a2c 50%,#a8842a 100%);-webkit-background-clip:text;background-clip:text}
.kn-section .section-title .accent,.how-section .section-title .accent{background:linear-gradient(135deg,#f0d97d,#d4af37,#f0d97d);-webkit-background-clip:text;background-clip:text}
.section-sub{font-size:1.1875rem}
.eyebrow{font-size:var(--read-label);font-weight:800;letter-spacing:.14em;color:var(--gold-text)}
.copy p,.contact-intro p,.about-card p{font-size:var(--read-body);line-height:1.8}
.copy p,.contact-intro p{max-width:75ch}             /* long lines are hard to track back across */
/* the two centred paragraphs on the home page ran ~135 and ~165 characters a line on a wide screen */
.about-card p,.testimonial-quote{max-width:72ch;margin-inline:auto}
.testimonial-quote{font-size:clamp(1.0625rem,.95rem + .45vw,1.1875rem)}   /* was a fixed 15–18.5px */
.hero-btns .btn{font-size:1rem}                        /* the theme set 12px on phones */
.check-list li{font-size:1.0625rem}
.hero-desc{font-size:1.1875rem}
.hero-tag{font-size:clamp(1.125rem,.9rem + 1vw,1.5rem)}
.form-note,.form-note p{font-size:var(--read-small)}
.form-note .disc-title{font-size:1.0625rem}

/* ---------- 7. BUTTONS ---------- */
.btn{font-size:1.0625rem;min-height:3rem;padding:.8rem 1.6rem}
.btn-line::before{
  content:'';width:1.15em;height:1.15em;margin-right:.45em;flex-shrink:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v14H6zm7 1.5V9h5.5zM8 12h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v14H6zm7 1.5V9h5.5zM8 12h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 8. FORMS ---------- */
.field label,.inner-page .form-card .field label{font-size:var(--read-small);font-weight:600}
.field input,.field select,.field textarea{
  font-size:var(--read-body);min-height:3.25rem;padding:.75rem 1rem;
  border:1.5px solid var(--field-border);background:var(--white);
}
.field textarea{min-height:8.5rem}
.field input[type=file]::file-selector-button{font-size:var(--read-small)}
.form-card h3.form-title{font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem)}
.form-card p.form-lead{font-size:1.0625rem}
.form-status{font-size:1.0625rem}
.req{color:#b42318}

/* ---------- 9. PDF FINDER (acts, rules, free notes, exams, legal knowledge, courses) ---------- */
.filter-bar{padding:1.5rem 1.5rem 1.375rem;gap:1.25rem}
.filter-field{position:relative}
.filter-field>label{font-size:var(--read-small);letter-spacing:.06em;color:var(--ink)}
.dd-btn{font-size:1.0625rem;min-height:3.25rem;padding:.75rem 1rem;border:1.5px solid var(--field-border);background:var(--white)}
.dd-btn .chev{font-size:1rem}
.dd-menu{max-height:24rem}
.dd-menu li{font-size:1.0625rem;padding:.8rem 1rem}
.dd-menu li[data-depth="1"]{font-size:1rem;padding-left:2rem}
.dd-menu li[data-depth="2"]{font-size:1rem;padding-left:3rem}
.filter-bar .field input[type="search"]{
  font-size:var(--read-body);min-height:3.25rem;padding:.75rem 5.75rem .75rem 3rem;
  border:1.5px solid var(--field-border);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23866719' d='M10 3a7 7 0 0 1 5.6 11.2l5.1 5.1-1.4 1.4-5.1-5.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E") no-repeat 1rem center/1.375rem;
}
.filter-bar input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* big "Clear" button inside the search box (added by readable.js) */
.search-clear{
  position:absolute;right:.4rem;bottom:.4rem;height:2.45rem;padding:0 .8rem;border-radius:7px;cursor:pointer;
  border:0;background:var(--gold-pale);color:var(--ink);font:700 .9375rem 'Poppins',sans-serif;
}
.search-clear:hover{background:#f3e5b3}
/* one-tap category buttons mirroring the dropdown (added by readable.js) */
.cat-chips{display:flex;flex-wrap:wrap;gap:.625rem;margin:0 0 1.25rem;position:relative;z-index:1}
.cat-chip{
  display:inline-flex;align-items:center;gap:.5rem;min-height:2.875rem;padding:.45rem 1.05rem;cursor:pointer;
  border-radius:999px;border:2px solid rgba(168,132,42,.55);background:var(--white);color:var(--ink);
  font:600 1rem 'Poppins',sans-serif;box-shadow:0 2px 8px rgba(30,26,16,.05);transition:background .2s,border-color .2s,transform .2s;
}
.cat-chip:hover{border-color:var(--gold-dark);background:var(--gold-pale);transform:translateY(-2px)}
.cat-chip .n{min-width:1.75rem;padding:0 .45rem;border-radius:999px;background:var(--gold-pale);font-size:.9375rem;font-weight:700;text-align:center}
.cat-chip[aria-pressed="true"]{background:var(--grad-gold);border-color:transparent;color:#12100c}
.cat-chip[aria-pressed="true"] .n{background:rgba(255,255,255,.6)}
/* live result count (added by readable.js) */
.finder-status{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin:0 0 1rem;position:relative;z-index:1;
  font-size:1.0625rem;font-weight:600;color:var(--ink);
}
.finder-status b{color:var(--gold-text)}
.finder-reset{
  min-height:2.75rem;padding:.4rem 1rem;border-radius:8px;cursor:pointer;border:2px solid var(--gold);
  background:var(--white);color:var(--ink);font:700 1rem 'Poppins',sans-serif;
}
.finder-reset:hover{background:var(--gold-pale)}
.finder-reset[hidden]{display:none}

/* accordion + PDF rows */
.res-cat-head{font:700 1.3125rem/1.3 'Poppins',sans-serif;min-height:4rem;padding:1rem 1.25rem}
.res-cat-head .count{font-size:var(--read-small);font-weight:600;color:var(--muted)}
.res-cat-head .chev{font-size:1rem}
.res-cat-body{padding:.25rem 1.25rem 1.25rem}
.res-cat-empty{box-shadow:none}
.res-cat-empty .res-cat-head{min-height:3.25rem;padding:.625rem 1.25rem;font-size:1.0625rem;color:var(--muted);background:var(--white)}
.res-sub h3{font-size:var(--read-small);letter-spacing:.06em;color:var(--muted)}
.list-card{gap:1rem;padding:1.125rem 1.25rem}
.list-icon{width:3.25rem;height:3.25rem;font-size:1.75rem}
.list-body h4{font-size:1.1875rem;line-height:1.45}
.list-meta{gap:.75rem;margin-top:.5rem}
.list-meta .pdf{font-size:var(--read-small);font-weight:600;color:var(--muted)}
.list-meta .go{font-size:var(--read-small);color:var(--gold-text)}
.res-actions{gap:.625rem}
.res-actions a{
  gap:.5rem;min-height:2.875rem;padding:.55rem 1.15rem;border-radius:9px;border-width:2px;
  font-size:1.0625rem;font-weight:700;
}
.res-actions a::before{
  content:'';width:1.2em;height:1.2em;flex-shrink:0;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.res-actions a.primary{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C7 5 2.7 8.1 1 12c1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7zm0 11.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-7a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E")}
.res-actions a:not(.primary){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.2l3.3-3.3 1.4 1.4L12 16l-5.7-5.7 1.4-1.4 3.3 3.3zM4 18h16v2H4z'/%3E%3C/svg%3E")}
.list-card.lc-openable .list-body h4{cursor:pointer}
.list-card.lc-openable .list-body h4:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.res-empty,.res-none{font-size:1.0625rem;color:var(--muted)}
@media(max-width:600px){
  /* phones: at this text size the nested paddings left the Download button no room */
  .res-cat-body{padding:.25rem .75rem .75rem}
  .list-card{padding:.875rem;gap:.75rem}
  .list-icon{width:2.25rem;height:2.25rem;font-size:1.25rem}
  .res-actions{width:100%}
  .res-actions a{flex:1;justify-content:center;padding:.5rem .75rem;font-size:1rem}
}

/* ---------- 10. CARDS ---------- */
/* courses */
.course-body h3{font:700 1.25rem/1.35 'Poppins',sans-serif}
/* at this size a narrow card's price + "Explore Course →" no longer fit on one line */
.course-foot{flex-wrap:wrap;row-gap:.5rem}
/* a single very long word may break rather than push a card past the screen edge */
.list-body h4,.course-body h3,.album-body h4,.team-card h3,.why-card h3,.how-card h3,.kn-card h5{overflow-wrap:anywhere}
.course-body p,.course-body p.course-note{font-size:var(--read-small);color:var(--muted)}
.course-price{font-size:1.25rem;color:var(--gold-text)}
.course-price small{font-size:.9375rem}
.course-disc{font-size:var(--read-small)}
.course-disc strong{font-size:1.125rem}
.course-link{font-size:var(--read-small)}
.course-actions .btn{font-size:1.0625rem;min-height:3rem}
.pager button{font-size:1.0625rem;min-width:3rem;min-height:3rem}
.hot-badge{font-size:.9375rem}
.tick-item{font-size:var(--read-small)}
.tick-item b{font-size:1.0625rem}
.tick-item i{color:var(--gold-text)}                  /* ticker prices were 3.2:1 */
.tick-item u{font-size:.9375rem}
/* legal knowledge tiles (home) */
.kn-card h5{font-size:clamp(1.0625rem,.85rem + .45vw,1.25rem)}
.kn-card span:not(.kn-ico){font-size:.9375rem}
/* why / how */
.why-card h3{font:700 1.3125rem/1.35 'Poppins',sans-serif}
.why-card p{font-size:1.0625rem}
.how-card h3{font:700 1.3125rem/1.35 'Poppins',sans-serif}
.how-card p{font-size:1.0625rem}
/* about */
/* About Us page: the "ABOUT US" label sat at the left edge of the text column;
   centre it at the top of its section, above both columns, like every other
   section label on the site. The column's fade-in keeps its opacity but drops
   its 30px slide (a transform there would pin the label to the text column),
   and the label is centred with auto margins because its own scale-in
   animation owns `transform`. */
#about .split{margin-top:3.75rem}
#about .copy.reveal,#about .copy.reveal.in{transform:none}
#about .copy .eyebrow{position:absolute;top:-3.75rem;left:0;right:0;width:max-content;margin:0 auto}
.exp-badge span{font-size:.9375rem}
.tabs-nav button{font-size:var(--read-small);min-height:3rem}
.tab-panel p{font-size:1.0625rem}
.tab-panel p strong{font-size:.9375rem}
.team-card h3{font:700 1.3125rem/1.3 'Poppins',sans-serif}
.team-card p{font-size:var(--read-small);color:var(--muted)}
/* gallery */
.album-body h4{font:700 1.1875rem/1.35 'Poppins',sans-serif}
.album-body span{font-size:var(--read-small);color:var(--gold-text)}
.lb-cap{font-size:1.125rem}
.lb-btn{min-width:3.5rem;min-height:3.5rem;font-size:1.75rem}
/* contact + clientele */
.contact-intro h2{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.375rem)}
.contact-item h5{font-size:var(--read-label);letter-spacing:.08em;color:var(--gold-text)}
.contact-item p{font-size:1.0625rem}
/* the e-mail address is one long word; at this size it must be allowed to wrap on phones */
.contact-item p,.contact-item a,.footer-contact-item p{overflow-wrap:anywhere}
/* home stats + testimonials + conversion widgets */
.stat-label{font-size:.9375rem}
.testimonial-stars{font-size:1.125rem;color:var(--gold-dark)}   /* 3.5:1, enough for a graphic (was 2.1:1) */
.testimonial-who{font-size:var(--read-small);color:var(--gold-text)}
.testimonial-who span{font-size:.9375rem}
/* home contact form: its WhatsApp button carries an inline #a8842a (3.5:1) */
.form-actions .btn-ghost{color:var(--gold-text)!important;border-color:var(--gold-dark)}
.enroll-bar-text{font-size:var(--read-small)}
.enroll-bar-text b{font-size:1.1875rem}
.enroll-bar .btn{font-size:var(--read-small)}
.counsel-pop p,.counsel-pop .btn{font-size:var(--read-small)}

/* ---------- 11. FOOTER ----------
   At the page's full A++ size the footer grew to ~1210px, taller than the
   screen. It now reads one step below the page body (links 18.75px, headings
   21.25px) with tighter spacing; Programs runs as one column beside Quick
   Links, because its two narrow tracks broke "LL.B. Entrance Examination"
   over two lines; and the logo is the light version made for dark
   backgrounds, without the brightness(3) that turned its gold to glare
   and left the black "Law" invisible. */
.site-footer{font-size:.9375rem;line-height:1.6}   /* so list rows do not inherit the body's 22.5px line box */
.footer-col h4{font-size:1.0625rem;margin-bottom:.75rem}
.footer-col li{margin-bottom:.2rem}
.footer-col li a{font-size:.9375rem;line-height:1.6}
.footer-contact-item{margin-bottom:.5rem;gap:.15rem}
.footer-contact-item h6{font-size:.8125rem;margin-bottom:0}
.footer-contact-item p{font-size:.9375rem;line-height:1.5}
.footer-links{font-size:.875rem}
.copyright{font-size:.875rem}
@media(min-width:1025px){
  .footer-grid:first-of-type .footer-col:nth-child(3) ul{columns:auto}
}.site-footer .footer-logo img{filter:drop-shadow(0 6px 18px rgba(212,175,55,.22)) !important}
/* Social icons: real icons on every page (readable.js), drawn crisp in gold on the
   footer's own warm dark — the theme had them on a cool grey (#3a3a3a) that clashed
   with the brown footer, blurred by a gold text-glow — and big enough to tap. */
.site-footer .social-row{gap:.625rem}
.site-footer .social-row a{
  width:2.75rem;height:2.75rem;margin:0 !important;
  background:#2a251b !important;border:2px solid #d4af37 !important;color:#f0d97d !important;
  text-shadow:none !important;box-shadow:none !important;
}
.site-footer .social-row a svg{width:1.3rem;height:1.3rem}
.site-footer .social-row a:hover,.site-footer .social-row a:focus-visible{
  background:#f0d97d !important;color:#1c1913 !important;box-shadow:0 8px 20px rgba(212,175,55,.35) !important;
}
.footer-logo picture,.media-frame picture{display:block}
.skip-link{font-size:1rem}

/* ---------- 12. LEGAL KNOWLEDGE: link from the inquiry form to the PDF library ---------- */
.library-cta{
  display:flex;align-items:center;gap:1rem;max-width:840px;margin:0 auto 1.5rem;padding:1.125rem 1.375rem;
  position:relative;z-index:1;border-radius:14px;color:var(--ink);
  background:linear-gradient(135deg,var(--white) 0%,var(--gold-pale) 100%);
  border:2px solid rgba(168,132,42,.55);box-shadow:var(--shadow-soft);transition:transform .3s,box-shadow .3s;
}
.library-cta:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(212,175,55,.22)}
.library-cta-ico{font-size:2rem;flex-shrink:0}
.library-cta-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.library-cta-text strong{font-size:1.1875rem}
.library-cta-text span{font-size:var(--read-small);color:var(--muted)}
.library-cta-go{
  flex-shrink:0;display:inline-flex;align-items:center;gap:.4rem;min-height:3rem;padding:.6rem 1.2rem;border-radius:9px;
  background:var(--grad-gold);color:#12100c;font-weight:700;font-size:1.0625rem;white-space:nowrap;
}
@media(min-width:1360px){ .library-cta{max-width:clamp(840px,58vw,1240px)} }
@media(max-width:600px){
  .library-cta{flex-wrap:wrap}
  .library-cta-go{width:100%;justify-content:center}
}
.page-hero:has(+ #library) .hero-frame{--motif-img:url(../images/hero-frame/motif-legal-knowledge.svg)}

/* ---------- 13. ATTENTION MOTION ON PDF + COURSE CARDS ----------
   The home page's course cards pull the eye with a travelling gold ring and a
   bouncing pointer. The same cues now run on every PDF list and on the course
   page — but cards never move or reshuffle under the pointer (hard for shaky
   hands), and everything pauses while the visitor hovers, touches or types. */
/* each card rises in when first shown, and again when a filter brings it back */
[data-filter] .res-grid .list-card{animation:lcRise .45s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0) * 45ms)}
[data-filter] .course-card.show{animation:lcRise .45s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes lcRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* travelling spotlight — on list cards it lives in the pseudo-elements, so the
   cards' own entrance animations (which differ per section) are never restarted */
.list-card{position:relative}
.list-card.pdf-spot::before{
  content:'';position:absolute;inset:-6px;z-index:2;pointer-events:none;border-radius:14px;
  border:3px solid var(--gold);box-shadow:0 0 0 5px rgba(212,175,55,.16),0 0 28px rgba(212,175,55,.45);
  animation:spotPulse 1.6s ease-in-out infinite;
}
@keyframes spotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.01)}}
/* course cards clip their overflow, so they take an outline instead; lcRise stays
   first in the list so adding / removing the pulse does not replay the entrance */
[data-filter] .course-card.show.pdf-spot{
  outline:3px solid var(--gold);outline-offset:4px;
  animation:lcRise .45s cubic-bezier(.22,1,.36,1) backwards,spotOutline 1.6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 45ms),0s;
}
@keyframes spotOutline{0%,100%{outline-color:rgba(212,175,55,.95)}50%{outline-color:rgba(212,175,55,.35)}}
.list-card.pdf-spot::after{
  content:'Free to read';position:absolute;top:-.85rem;right:1rem;z-index:3;pointer-events:none;
  padding:.15rem .75rem;border-radius:999px;background:var(--grad-gold);color:#12100c;
  font:800 .9375rem/1.5 'Poppins',sans-serif;box-shadow:0 6px 16px rgba(212,175,55,.4);
  animation:badgePop .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes badgePop{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
/* the spotlighted card's View button shines and a gold pointer bounces above it */
.res-actions a.primary{position:relative}
.res-actions a.primary.pdf-nudge{
  background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%),var(--grad-gold);
  background-size:250% 100%,100% 100%;background-repeat:no-repeat;animation:pdfSheen 1.6s ease-in-out infinite;
}
@keyframes pdfSheen{0%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}}
.res-actions a.primary.pdf-nudge::after{
  content:'';position:absolute;left:50%;top:-18px;width:0;height:0;pointer-events:none;
  border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--gold-dark);
  filter:drop-shadow(0 2px 4px rgba(212,175,55,.6));animation:pdfPtr .7s cubic-bezier(.22,1,.36,1) 4 both;
}
/* home page list cards: their "View All →" link underlines while spotlighted */
.list-meta .go.pdf-nudge-go{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@keyframes pdfPtr{
  0%{opacity:0;transform:translate(-50%,-10px)}
  40%{opacity:1;transform:translate(-50%,3px)}
  70%{opacity:1;transform:translate(-50%,-5px)}
  100%{opacity:1;transform:translate(-50%,0)}
}
@media(prefers-reduced-motion:reduce){
  [data-filter] .res-grid .list-card,[data-filter] .course-card.show,[data-filter] .course-card.show.pdf-spot,
  .list-card.pdf-spot::before,.list-card.pdf-spot::after,
  .res-actions a.primary.pdf-nudge,.res-actions a.primary.pdf-nudge::after{animation:none}
}

/* ---------- 14. SMALL SCREENS ---------- */
@media(max-width:600px){
  body{font-size:1.0625rem}
  .section-title{font-size:clamp(1.75rem,1.2rem + 2.4vw,2.25rem)}
  .filter-bar{padding:1.125rem}
  .cat-chips{gap:.5rem}
  .cat-chip{font-size:.9375rem;padding:.4rem .85rem}
}

/* ---------- 15. VISITORS WHO ASKED THEIR DEVICE FOR MORE CONTRAST ----------
   Browsers report `prefers-contrast: more` when the visitor has switched on
   "Increase contrast" in their operating system (macOS, iOS and others). For
   them only, text goes to the stricter AAA level (7:1); everyone else keeps
   the softer AA colours above. */
@media(prefers-contrast:more){
  :root{--muted:#4a4337;--gold-text:#634a0e}
  .section-title .accent{background:linear-gradient(135deg,#6e5210 0%,#8a6a1a 50%,#6e5210 100%);-webkit-background-clip:text;background-clip:text}
  .field input,.field select,.field textarea,.dd-btn,.filter-bar .field input[type="search"]{border-width:2px}
}

/* ---------- 16. LEGAL KNOWLEDGE TILE TITLES: wrap between words, never inside one ---------- */
.kn-card h5{word-break:normal;overflow-wrap:break-word;hyphens:none}
@media(min-width:1201px){.kn-card h5{font-size:clamp(.84375rem,1.25vw,1.5625rem)}}

/* ---------- 17. HEADER ON LAPTOP SCREENS ----------
   1200–1839px: the one-row menu does not fit beside the logo, so give it its own
   row under the logo + Login row instead of hiding it behind the ☰ button.
   1025–1199px: even the second row would wrap, so the ☰ stays, but Login shows. */
@media(min-width:1200px) and (max-width:1839px){
  .site-header .burger,.site-header .mobile-menu{display:none}
  .site-header .nav-wrap{flex-wrap:wrap;row-gap:0;padding-bottom:0}
  .site-header .btn-login{display:flex;margin-left:auto}
  .site-header .nav-wrap > nav{order:3;flex:1 0 100%;border-top:1px solid rgba(212,175,55,.22)}
  .site-header .nav-menu{display:flex;flex-wrap:wrap;justify-content:space-evenly;column-gap:4px;row-gap:0}
}
@media(min-width:1025px) and (max-width:1199px){
  .site-header .btn-login{display:flex;margin-left:auto}
}

/* ---------- 18. CLIENT PAGE CARDS: two columns only when each card has room ---------- */
.testi-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}

/* ---------- 19. HOME FORMS: validation message, sent confirmation, WhatsApp button ---------- */
.form-card .form-status{margin:0 0 16px;padding:12px 14px;border-radius:8px;background:var(--gold-pale);border-left:3px solid var(--gold);color:var(--ink);line-height:1.6}
.form-card .form-status[role="alert"]{background:#fdecea;border-left-color:#b42318}
.form-toast{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:10000;
  width:max-content;max-width:calc(100% - 32px);margin:0;padding:14px 20px;border-radius:10px;
  background:var(--ink);color:#fff;border-left:4px solid var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.25);
  font-size:1rem;line-height:1.5;animation:formToast 7s ease forwards;pointer-events:none;
}
@keyframes formToast{0%{opacity:0;transform:translate(-50%,-12px)}6%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-12px);visibility:hidden}}
@media(prefers-reduced-motion:reduce){.form-toast{animation:none}}
.btn-ghost.btn-wa-light{color:var(--gold-text);border-color:var(--gold-text)}

/* ---------- 20. GALLERY ALBUM TITLES ON PHONES: whole words, sized to the two-column tiles ---------- */
.album-body h4{overflow-wrap:break-word;word-break:normal;hyphens:none}
@media(max-width:479px){.album-body h4{font-size:clamp(.8125rem,4.4vw,1.1875rem)}}
@media(max-width:359px){.gallery-grid{grid-template-columns:1fr}.album-body h4{font-size:1.1875rem}}

/* ---------- 21. PHONES: 44px-tall tap targets for the top-strip contacts and footer links ---------- */
@media(max-width:600px){
  .topbar-contact a,.footer-col li a,.footer-links a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- 22. ☰ MENU: mark the page you are on (inner.css had this, the home page does not load it) ---------- */
.mobile-menu a[aria-current="page"]{font-weight:700;background:var(--gold-pale);color:var(--gold-text);box-shadow:inset 3px 0 0 var(--gold)}

/* ---------- 23. TESTIMONIAL RATING: solid stars (the outline icon read as an empty, zero-star rating) ---------- */
.testimonial-stars .icon-star{--site-icon:url('../images/icons/tabler/star-filled.svg')}

/* ---------- 24. INFORMATION PAGES (privacy, terms, disclaimer, refund, sitemap, announcements) ---------- */
.page-hero:has(+ #site-info){--hero-main:url(../images/hero/about-us.svg);--hero-accent:url(../images/hero/accent-laurel.svg)}
.page-hero:has(+ #site-info) .hero-frame{--motif-img:url(../images/hero-frame/motif-about.svg)}
.doc-card{
  max-width:880px;margin:0 auto;padding:clamp(22px,4vw,44px);
  background:var(--white,#fff);border:1px solid var(--line,#eee3c4);border-radius:14px;box-shadow:var(--shadow-soft,0 10px 30px rgba(0,0,0,.06));
  color:var(--ink);line-height:1.75;
}
.doc-card h2{font-family:'Playfair Display',serif;font-size:clamp(1.25rem,1rem + .8vw,1.5rem);color:var(--black,#111);margin:1.6em 0 .5em;line-height:1.3}
.doc-card h2:first-child{margin-top:0}
.doc-card p{margin:0 0 1em}
.doc-card ul{margin:0 0 1em;padding-left:1.25em;list-style:disc}
.doc-card li{margin:.35em 0}
.doc-card li::marker{color:var(--gold)}
.doc-card a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.doc-card a:hover{color:var(--ink)}
.doc-note{margin:0 0 1.2em;padding:12px 16px;border-radius:8px;background:var(--gold-pale);border-left:4px solid var(--gold);font-size:.95em}
.doc-meta{font-size:.9em;color:var(--muted)}
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;max-width:1100px;margin:0 auto}
.sitemap-grid .doc-card{max-width:none;margin:0;padding:clamp(20px,3vw,30px)}
.sitemap-grid .sitemap-wide{grid-column:1/-1}
.sitemap-wide ul{columns:3 200px;column-gap:28px}
.sitemap-col ul{list-style:none;padding:0}
.sitemap-col li{break-inside:avoid}
.sitemap-col a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none}
.sitemap-col a:hover,.sitemap-col a:focus-visible{text-decoration:underline}

/* ---------- 25. FOOTER + HOME CONTACT DETAILS ARE LINKS NOW: keep their text colour ---------- */
.footer-contact-item p a,.contact-item p a{color:inherit;text-decoration:none;overflow-wrap:anywhere}
.footer-contact-item p a:hover,.footer-contact-item p a:focus-visible,.contact-item p a:hover,.contact-item p a:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* ---------- 26. LAPTOP HEADER WHILE SCROLLING: only the menu row stays pinned ----------
   In the two-row header (section 17) the logo + Login row scrolls up out of view with
   the page and only the menu row sticks; the full header is back at the top of the page.
   A negative sticky offset keeps the header's height, so nothing below it jumps.
   71px = 10px row padding + 60px logo + the menu's 1px top rule (the zoom scales it too). */
@media(min-width:1200px) and (max-width:1839px){
  .site-header{top:-71px}
  /* home.js shrinks the logo to 46px after 80px of scroll (inline style); hold it at the
     60px the offset above is measured for — the row is scrolled out of view by then anyway */
  .site-header .nav-logo img{height:60px !important}
  /* keyboard users tabbing to the logo or Login still see them */
  .site-header:has(.nav-logo:focus-visible,.btn-login:focus-visible){top:0}
}

/* ---------- 27. HOME ENROLMENT BAR: compact and asymmetric on every screen ----------
   The weight is off-centre on purpose: a gold wedge bleeds in from the left edge and ends
   in a slanted cut, and the buttons sit hard right (on phones, below it at unequal widths).
   Desktop (1200px+): one line exactly as tall as the pinned menu row (section 26).
   1000–1199px: one 60px line, tagline on two short lines. Portrait tablets: wedge +
   tagline over the buttons. Phones: wedge, tagline under it, then the buttons (~134–155px,
   was 214–299px). Below 1200px buttons stay 44px tall for touch. */
.enroll-bar{padding:0;border-top:0}
/* the top rule carries the same asymmetry: full gold over the wedge, fading out to the right */
.enroll-bar::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#f0d97d 0%,#d4af37 28%,rgba(212,175,55,.45) 62%,rgba(212,175,55,.1) 100%);
}
.enroll-bar-text{align-self:stretch;min-width:0;flex-wrap:nowrap;gap:0;white-space:nowrap;color:#d9d0b5;letter-spacing:.01em}
.enroll-bar-text .site-icon{position:relative;z-index:1;font-size:1.125rem;color:#12100c;margin-right:.6rem}
/* the wedge: ::before paints the gold out to the left edge of the screen (overlapping the
   wedge by 2px, so no hairline shows at a fractional edge), and the clip-path keeps it to
   the bar's height and cuts the slant on the right */
.enroll-bar-text b{
  position:relative;align-self:stretch;display:flex;align-items:center;margin-right:1.1rem;padding-right:1.9rem;
  flex-shrink:0;white-space:nowrap;
  font-size:1.0625rem;letter-spacing:.015em;color:#12100c;-webkit-text-fill-color:#12100c;
  background:linear-gradient(90deg,#d4af37 0%,#e2c257 55%,#f0d97d 100%);
  -webkit-background-clip:border-box;background-clip:border-box;background-size:100% 100%;animation:none;
  clip-path:polygon(-100vmax 0,100% 0,calc(100% - 1.15rem) 100%,-100vmax 100%);
}
.enroll-bar-text b::before{content:'';position:absolute;top:0;bottom:0;right:calc(100% - 2px);width:100vmax;background:#d4af37;z-index:-1}
.enroll-bar .btn{min-height:0;padding:0 1.05rem;font-size:.8125rem;white-space:nowrap;border-radius:12px 4px 12px 4px}
.enroll-bar-close{font-size:.875rem}

/* one line: desktop, tablets and small laptops
   (768.02 / 1199.98 leave no gap at the fractional widths display scaling produces) */
@media(min-width:768.02px){
  .enroll-bar-inner{height:100%;flex-wrap:nowrap;justify-content:space-between}
  .enroll-bar-text{flex:1 1 auto}
  .enroll-bar-actions{flex:0 0 auto;flex-wrap:nowrap;gap:.6rem;margin-left:auto}
}
@media(min-width:1200px){
  .enroll-bar{height:calc(var(--hz) * 37.35px)}   /* = the pinned menu row + its gold rule */
  .enroll-bar-inner{gap:1.25rem}
  .enroll-bar-text{font-size:.8125rem}
  .enroll-bar .btn{height:1.6rem}
  .enroll-bar-close{width:1.5rem;height:1.5rem;min-width:1.5rem}
  /* safety net for very large browser font settings: a tagline too long for the line is
     cut at the buttons instead of running under them (the wedge still bleeds left) */
  .enroll-bar-text{clip-path:inset(-2px 0 -2px -100vmax)}
}
/* tablets / small laptops: the tagline wraps onto two short lines beside the wedge */
@media(min-width:768.02px) and (max-width:1199.98px){
  .enroll-bar{height:3rem}
  .enroll-bar-inner{gap:1rem}
  .enroll-bar-text{font-size:.8125rem;line-height:1.25;white-space:normal;clip-path:inset(-2px 0 -2px -100vmax)}
  .enroll-bar .btn{height:2.2rem}
  .enroll-bar-close{width:2rem;height:2rem;min-width:2rem}
}
/* portrait tablets: the buttons leave no room beside the wedge, so wedge + tagline + close
   take the first row and the buttons sit under them, flush right */
@media(min-width:768.02px) and (max-width:999.98px){
  .enroll-bar{height:auto;padding-bottom:.5rem}
  .enroll-bar-inner{height:auto;flex-wrap:wrap;justify-content:flex-end;gap:.5rem 1rem}
  .enroll-bar-actions{display:contents}
  .enroll-bar-text{order:1;flex:1 1 calc(100% - 3.5rem);min-height:2.4rem}
  .enroll-bar-close{order:2}
  .enroll-bar .btn-gold{order:3}
  .enroll-bar .btn-ghost{order:4}
}

/* phones: wedge + close on the first row with the tagline on its own line under the wedge
   (left-aligned with the icon), then the two buttons — Enroll Now at its own width, Talk
   to a Counsellor taking the rest (its label may wrap on the narrowest) */
@media(max-width:768px){
  .enroll-bar{height:auto;padding:0 0 calc(.5rem + env(safe-area-inset-bottom,0px))}
  .enroll-bar-inner{position:relative;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.5rem}
  .enroll-bar-actions{display:contents}
  .enroll-bar-text{
    order:1;flex:1 1 100%;width:auto;height:auto;flex-wrap:wrap;row-gap:0;
    justify-content:flex-start;text-align:left;font-size:.8125rem;line-height:1.25;white-space:normal;
  }
  .enroll-bar-text b{height:2.2rem;margin-right:0;order:-1}
  /* a full-width spacer after the wedge starts the tagline on a line of its own */
  .enroll-bar-text .site-icon{order:-2}
  .enroll-bar-text::after{content:'';order:-1;flex-basis:100%;height:.3rem}
  /* the close sits in the wedge row's free right end, so the tagline gets the full width */
  .enroll-bar-close{position:absolute;top:.1rem;right:18px;width:2rem;height:2rem;min-width:2rem}
  .enroll-bar .btn{height:2.2rem}
  .enroll-bar .btn-gold{order:3;flex:0 0 auto}
  .enroll-bar .btn-ghost{order:4;flex:1 1 0;min-width:0;padding:0 .6rem;white-space:normal;line-height:1.15}
}
/* the narrowest phones: a slightly smaller wedge so icon + "Admissions Open" stay on one line beside the close */
@media(max-width:359.98px){
  .enroll-bar-text .site-icon{margin-right:.45rem}
  .enroll-bar-text b{font-size:.9375rem;padding-right:1.5rem}
}

/* ---------- 28. WHATSAPP + ENROLL NOW FLOATS NEVER GO BEHIND THE ENROLMENT BAR ----------
   The bar's height changes with the screen width and the reader's font size (46px on a
   laptop, up to ~300px where it wraps on a phone), but site.css lifted the floats by fixed
   amounts, so on most screens they sat under it. readable.js publishes the bar's real
   height as --enroll-bar-h; the WhatsApp button, the progress ring / "Enroll Now" pill
   and the counsellor card now always clear it. */
body.enroll-bar-on .wa-float,
body.enroll-bar-on .progress-wrap{bottom:calc(var(--enroll-bar-h,92px) + 16px)}
body.enroll-bar-on .counsel-pop{
  bottom:calc(var(--enroll-bar-h,92px) + 80px);overflow-y:auto;
  max-height:calc(100vh - var(--enroll-bar-h,92px) - 92px);
  max-height:calc(100dvh - var(--enroll-bar-h,92px) - 92px);   /* small phones: stays on screen, scrolls inside */
}

/* ---------- 29. TOP STRIP ON PHONES + TABLETS: the three tags wrap whole, centred ----------
   Below 1025px the strip wraps and centres (section 4), but its tags line stayed left-aligned,
   ran into the screen edge and broke inside an item ("… • Legal" / "Resources"). The line may
   now break only just before a bullet (a zero-width space inside each bullet span is the one
   wrap point), so every "• Legal …" stays whole; and the strip gets the header's side padding
   (lengths inside the zoomed strip are divided by its --z). */
@media(max-width:1024px){
  .topbar .wrap{padding:0 calc(18px / var(--z))}
  .topbar-tags{text-align:center;white-space:nowrap}
  .topbar-tags span::before{content:'\200B';white-space:normal}
}
/* phones: the 44px tap targets (section 21) sit inside the zoomed strip, so they showed 55px
   tall, and stacked e-mail / phone rows had a 41px empty gap between them. Size them to 44px
   on screen and let the two rows touch — still a full 44px target each. */
@media(max-width:600px){
  .topbar .wrap{padding:0 calc(14px / var(--z))}
  .topbar-contact{row-gap:0}
  .topbar-contact a{min-height:calc(44px / var(--z))}
}
@media(max-width:480px){ .topbar .wrap{padding:0 calc(12px / var(--z))} }

/* ---------- 30. OVERLAP / OVERFLOW FIXES FOUND IN THE ALL-PAGE AUDIT ---------- */

/* a) Gallery albums (gallery page + home preview): the photo row is an auto-height grid row,
   so a one-photo album's photo took its natural height (~256px) inside the 160px frame and
   ran down over the album title and "1 Photo". Pin the row to the frame and clip it. */
.album-imgs{grid-template-rows:minmax(0,1fr);overflow:hidden}
.album-imgs img{min-height:0}

/* b) PDF-list category headers (acts, notes, exams, library): title + "N items" + chevron sat
   on one row that could not wrap, so on narrow phones the count and chevron were pushed past
   the screen edge. The row may now wrap: headers that fit are unchanged, the others drop
   "N items ▾" onto a second line, still right-aligned. */
.res-cat-head{flex-wrap:wrap;row-gap:.25rem}
.res-cat-head > span:first-child{flex:1 1 auto;min-width:0;overflow-wrap:break-word;hyphens:auto}

/* c) Information pages (privacy, refund, terms): the e-mail address is one long word and
   pushed the page 25–30px sideways on small phones. readable.js adds a break point after
   the "@"; this lets it wrap at all as a last resort. */
.doc-card a[href^="mailto:"]{overflow-wrap:anywhere}

/* d) Page banner titles: the 42.5px minimum left no room for a long single word, so
   "Announcements" ran 16px off a 320px screen. Below 375px the title scales with the screen;
   hyphenation only steps in if a word still does not fit. */
@media(max-width:374.98px){ .page-hero h1{font-size:min(2.125rem,11.5vw)} }
.page-hero h1{overflow-wrap:break-word;hyphens:auto}

/* e) Course cards whose thumbnail file is missing (readable.js marks them): show the gold
   panel with the site emblem instead of a broken-image icon and alt text. */
.course-thumb.thumb-missing img{visibility:hidden}
.course-thumb.thumb-missing{background:var(--gold-pale) url(../images/logo11.png) center/72px no-repeat}

/* f) About Us photo collage on small phones: the "10+ Years" badge kept its full 186px width
   while the photos shrank, so below 414px it ran up to 40px into the small photo. Cap it to
   the space left of that photo (which starts at 54% of the stack; 14px inset + 8px gap) and
   trim it a little; the label stays at 16px. */
@media(max-width:413.98px){
  .media-stack .exp-badge{max-width:calc(54% - 22px);padding:.6rem .7rem}
  .media-stack .exp-badge b{font-size:1.3rem}
  .media-stack .exp-badge span{font-size:.8rem;max-width:none}
}

/* g) About Us team cards.
   - The photos are 270px files (white background) that were stretched up to ~2.9x their
     size; show them no larger than the file itself, centred on the white card.
   - Phones (up to 560px): one tall card per row made the four instructors ~2,000px long,
     and the two narrow columns from 421px wrapped some names but not others, so the roles
     in a row started at different heights. Each instructor is now a compact row card:
     photo on the left, name and role beside it (~150px tall; photo ~1:1 on a 2x screen).
   - Four columns (901px+): the cards get narrow before the name size eases off, so
     "Richard Stones" wrapped at ~1024px; the name now scales with the screen there. */
.team-card img{max-width:270px;margin-inline:auto}
@media(min-width:901px){ .team-card h3{font-size:clamp(1.0625rem,2.1vw,1.3125rem)} }
@media(max-width:560px){
  .team-grid{grid-template-columns:1fr;gap:.75rem}
  .team-card{
    display:grid;grid-template-columns:clamp(96px,32vw,140px) minmax(0,1fr);grid-template-rows:auto auto;
    column-gap:1rem;align-items:center;padding:.75rem;text-align:left;
  }
  .team-card img{grid-row:1 / span 2;align-self:center;width:100%;max-width:none;margin:0;border-radius:10px}
  .team-card h3{grid-column:2;align-self:end;padding:0;font-size:1.1875rem}
  .team-card p{grid-column:2;align-self:start;padding:.25rem 0 0;line-height:1.4}
}

/* h) Contact detail cards (home page + Contact Us). On every screen the value inherited the
   intro paragraphs' 26px bottom margin (the cards live inside .contact-intro), leaving empty
   space under the text; drop it. On phones the icon also sat on its own line above the
   label, so each card was 177–254px tall: put it beside the text there. */
.contact-item p{margin-bottom:0}
@media(max-width:600px){
  .contact-item{flex-direction:row;align-items:center;gap:.875rem;padding:.8rem 1rem;min-height:0}
  .contact-item > div:last-child{flex:1 1 auto;min-width:0}
  .contact-item h5{margin-bottom:.1rem}
  .contact-item p{line-height:1.5}
}

/* i) Contact Us page on phones and tablets: the form came first, so the tap-to-call /
   WhatsApp / e-mail details sat ~2,000px down the page. When the layout stacks, the page now
   reads: heading → contact details → form → the two intro paragraphs + "Meet Our Mentors".
   The intro box is dissolved (display:contents) so its parts can be ordered around the
   form. The home page's contact section (no .inner-page) keeps its own order. */
@media(max-width:768px){
  .inner-page .contact-layout{row-gap:0}
  .inner-page .contact-intro{display:contents}
  .inner-page .contact-intro > h2{order:1}
  .inner-page .contact-intro > .contact-items{order:2;margin-bottom:1.75rem}
  .inner-page .contact-layout > .form-card{order:3;margin-bottom:1.75rem}
  .inner-page .contact-intro > p{order:4}
  .inner-page .contact-intro > .btn{order:5}
}

/* j) Gallery page.
   - Photo viewer on phones: the 70px prev/next circles sat 18px from the screen edges, right
     on top of a photo that fills the width (~40% of it covered), and the caption ran to 4px
     from the edges. The arrows now sit in a bar at the bottom, the caption just above them
     with side margins, and the photo is kept to the space between the close button and them.
   - Tablets / desktop keep the side arrows; the photo is only kept from reaching under them.
   - Album tiles on small phones: the title shrinks to fit two columns (section 20) but the
     "N Photos" count stayed 20px, bigger than the title; it now steps down to 16px. */
@media(max-width:768px){
  .lightbox{padding:4.5rem 1rem 8.5rem}
  .lightbox img{max-width:100%;max-height:calc(100vh - 13rem);max-height:calc(100dvh - 13rem)}
  .lightbox .lb-btn{min-width:3.25rem;min-height:3.25rem;font-size:1.5rem}
  .lightbox .lb-close{top:16px;right:16px}
  .lightbox .lb-prev,.lightbox .lb-next{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none}
  .lightbox .lb-prev{left:16px}
  .lightbox .lb-next{right:16px}
  .lightbox .lb-cap{left:16px;right:16px;bottom:calc(16px + 3.25rem + .75rem + env(safe-area-inset-bottom,0px));font-size:1.0625rem;line-height:1.35}
}
@media(min-width:768.02px){
  .lightbox img{max-width:min(calc(100vw - 2 * (18px + 3.5rem + 12px)),1100px)}
}
@media(max-width:479px){ .album-body span{font-size:.8rem} }

/* k) Course page + the other PDF finders (the finder parts are shared).
   - Category buttons: 17 large pills wrapped into 7–14 rows (480–975px) before the first
     course on phones and small tablets; there they now sit in one row you swipe sideways
     (the dropdown above lists the same categories). A soft fade at the right edge shows
     that the row continues.
   - Search box: 115px was always kept free for the Clear button, even while it is hidden,
     so on phones the placeholder read "Search Cou…"; the space is now kept only once
     something has been typed (i.e. when the Clear button can appear).
   - Result line: 3–4 lines (112px) on phones; slightly smaller and tighter there.
   - Course card buttons in the two-column tablet range: "Enroll Now" broke onto two lines
     (both buttons 94px tall). Labels stay on one line; if the two do not fit side by side
     they stack, each full width.
   - Pagination: five 60px buttons wrapped onto two rows at 320px; slightly narrower there. */
@media(max-width:900px){
  .cat-chips{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    padding:.35rem 2rem .6rem 0;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
  }
  .cat-chips::-webkit-scrollbar{display:none}
  .cat-chip{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}
.filter-bar .field input[type="search"]:placeholder-shown{padding-right:1rem}
@media(max-width:359.98px){ .filter-bar .field input[type="search"]::placeholder{font-size:.9375rem} }
@media(max-width:600px){ .finder-status{font-size:.875rem;line-height:1.4;gap:.4rem .75rem} }
@media(min-width:560.02px) and (max-width:1024px){
  .course-actions{flex-wrap:wrap}
  .course-actions .btn{flex:1 1 auto;white-space:nowrap;font-size:1rem}
}
@media(max-width:360px){
  .pager{gap:6px}
  .pager button{min-width:2.6rem;padding:0 8px}
}

/* l) PDF lists on phones (acts, rules, free notes, exams, library). The icon kept its own
   column down the whole row, squeezing the full-length title into ~220px (5–9 lines, rows
   400–540px tall) and leaving View / Download too narrow to sit side by side. The title now
   spans the row, the icon sits beside the "PDF 1" label, and the two buttons share one line
   wherever they fit (they still stack on the narrowest phones). The list also starts a
   little lower so the travelling "Free to read" badge clears the sub-heading above it.
   (.list-body / .list-meta become display:contents so their parts join the row's grid.) */
@media(max-width:600px){
  .res-grid .list-card{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:.75rem;row-gap:.6rem;align-items:center}
  .res-grid .list-body,.res-grid .list-meta{display:contents}
  .res-grid .list-body h4{grid-column:1 / -1;grid-row:1}
  .res-grid .list-icon{grid-column:1;grid-row:2}
  .res-grid .list-meta .pdf{grid-column:2}
  .res-grid .list-meta .res-actions{grid-column:1 / -1}
  .res-grid .res-actions{gap:.5rem}
  .res-grid .res-actions a{padding:.5rem;gap:.4rem;font-size:.9375rem}
  .res-sub .res-grid{padding-top:.6rem}
}