/* ============================================================
   LAGHBANI CONSULTING — Shared site shell
   Nav, footer, buttons, page hero, and long-form (legal) prose.
   Loaded by every subpage after colors_and_type.css so the
   chrome is identical to home.html on every route.
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font-sans);color:var(--fg1);background:var(--surface-app);-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block}
h1,h2,h3,h4{margin:0}
:focus-visible{outline:2.5px solid var(--blue-500);outline-offset:3px;border-radius:4px}

.lc-container{max-width:1180px;margin:0 auto;padding:0 24px;width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600)}
.rule-gold{height:2px;width:56px;background:var(--brand-gold);border:none;border-radius:2px;margin:0 0 18px}

/* ---- scroll reveals (fluid, organic) ---- */
.rv{transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.js .rv:not(.in){opacity:0;transform:translateY(22px)}
html.gsap-on .rv{transition:none} /* GSAP (anim.js) owns reveal timing when loaded */
.rv-2{transition-delay:.08s}.rv-3{transition-delay:.16s}.rv-4{transition-delay:.24s}.rv-5{transition-delay:.32s}

/* Failsafe: the .rv gate above hides content until the animation layer takes
   over. If GSAP is slow or blocked on its CDN, that layer never arrives and the
   page renders blank. The head snippet adds .rv-shown after ~1.4s in that case.
   !important so a late-arriving GSAP cannot re-hide what the visitor already sees. */
html.rv-shown .rv{opacity:1!important;transform:none!important;visibility:visible!important}

/* ---------- buttons ---------- */
.btn{position:relative;font-family:var(--font-sans);font-weight:600;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:1px solid transparent;white-space:nowrap;text-decoration:none;transition:transform .25s cubic-bezier(.34,1.4,.5,1),box-shadow .25s,background .2s,border-color .2s,color .2s;overflow:hidden;isolation:isolate}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-md{height:48px;padding:0 22px;font-size:15px}
.btn-lg{height:54px;padding:0 28px;font-size:16px}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--ink-800);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.18) 50%,transparent 80%);transform:translateX(-120%);transition:transform .6s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-blue{background:var(--blue-500);color:#fff;box-shadow:var(--shadow-sm)}
.btn-blue:hover{background:var(--blue-600);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-secondary{background:#fff;color:var(--fg1);border:1px solid var(--line-2);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{border-color:var(--line-3);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-soft{background:rgba(255,255,255,.7);color:var(--fg1);border-color:var(--line-2);backdrop-filter:blur(6px)}
.btn-soft:hover{border-color:var(--line-3);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--blue-600)}
.btn-ghost:hover{background:var(--blue-050)}
.btn-gold{background:transparent;color:var(--gold-700);border:1px solid var(--gold-300)}
.btn-gold:hover{background:var(--gold-050);transform:translateY(-2px)}
.btn-onink{background:#fff;color:var(--ink-800)}
.btn-onink:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* ============ AURORA (soft flowy noisy-gradient backdrop, shared) ============ */
:root{--aura-1:color-mix(in srgb,var(--brand-blue) 58%,transparent);--aura-2:color-mix(in srgb,var(--brand-gold) 46%,transparent);--aura-3:color-mix(in srgb,var(--brand-ink) 24%,transparent);--aura-4:color-mix(in srgb,var(--brand-blue) 32%,transparent)}
.aurora{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:var(--surface-app)}
.aurora__blobs{position:absolute;inset:-25%;background:radial-gradient(38% 46% at 22% 26%,var(--aura-1),transparent 70%),radial-gradient(34% 42% at 82% 20%,var(--aura-2),transparent 72%),radial-gradient(42% 48% at 68% 84%,var(--aura-3),transparent 70%),radial-gradient(30% 38% at 26% 80%,var(--aura-4),transparent 72%);filter:blur(50px) saturate(1.08);animation:auroraDrift 36s var(--ease-soft) infinite alternate;will-change:transform}
.aurora__noise{position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;background-size:200px 200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes auroraDrift{0%{transform:translate3d(-2%,-1%,0) scale(1.05) rotate(0deg)}50%{transform:translate3d(2%,2%,0) scale(1.12) rotate(4deg)}100%{transform:translate3d(-1%,1%,0) scale(1.08) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.aurora__blobs{animation:none}}
@media (prefers-reduced-transparency:reduce){.aurora__blobs,.aurora__noise{display:none}.aurora{background:var(--surface-app)}}

/* ---------- nav: full-bleed seamless glass at the top, detaches into a floating pill on scroll ---------- */
.nav{position:sticky;top:0;z-index:80;padding-top:0;background:var(--glass-bg);-webkit-backdrop-filter:saturate(150%) blur(15px);backdrop-filter:saturate(150%) blur(15px);transition:padding-top .5s var(--ease-soft),background .5s var(--ease-soft)}
.nav-inner{display:flex;align-items:center;gap:16px;padding:13px 12px 13px 22px;background:transparent;border-radius:0;box-shadow:none;transition:padding .5s var(--ease-soft),background .5s var(--ease-soft),border-radius .5s var(--ease-soft),box-shadow .5s var(--ease-soft)}
.nav.stuck{padding-top:14px;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav.stuck .nav-inner{padding:9px 12px 9px 22px;background:var(--glass-bg);-webkit-backdrop-filter:saturate(160%) blur(var(--glass-blur));backdrop-filter:saturate(160%) blur(var(--glass-blur));border-radius:var(--r-pill);box-shadow:0 18px 44px rgba(30,43,66,.13),inset 0 1px 0 rgba(255,255,255,.55)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:rgba(247,248,253,.9)}.nav.stuck{background:transparent}.nav.stuck .nav-inner{background:rgba(247,248,253,.96)}}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--surface-app);-webkit-backdrop-filter:none;backdrop-filter:none}.nav.stuck{background:transparent}.nav.stuck .nav-inner{background:var(--surface-app);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.nav,.nav-inner{transition:none}}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:32px;width:auto}
.brand .wm{font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--fg1);line-height:1;white-space:nowrap}
.brand .wm .sub{font-weight:400;color:var(--ink-500);letter-spacing:.01em}
.nav-links{display:flex;align-items:center;gap:22px;margin-inline-start:34px}
.nav-link{font-size:14px;color:var(--fg2);font-weight:500;padding:8px 0;position:relative;transition:color .15s;background:none;border:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;background:var(--blue-500);transition:right .25s var(--ease-soft)}
.nav-link:hover{color:var(--fg1)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{right:0}
.nav-link[aria-current="page"]{color:var(--fg1)}
.nav-spacer{flex:1}
.nav-cta{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.hamburger{display:none;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;cursor:pointer;color:var(--fg1);margin-inline-start:auto}
/* segmented EN / ع language toggle (desktop nav) */
.lang-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;background:rgba(255,255,255,.5);border:1px solid var(--glass-brd);border-radius:var(--r-pill);cursor:pointer;font-family:inherit;line-height:1;transition:box-shadow .15s,transform .15s}
.lang-seg:hover{box-shadow:var(--shadow-xs);transform:translateY(-1px)}
.lang-seg .lseg{padding:5px 10px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;color:var(--ink-500);transition:background .2s,color .2s}
html:not(.lang-ar) .lang-seg .lseg-en{background:var(--ink-800);color:#fff}
html.lang-ar .lang-seg .lseg-ar{background:var(--ink-800);color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-item{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px}
.nav-dd-btn .chev{width:15px;height:15px;transition:transform .2s}
.nav-dd-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);min-width:320px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:90}
.nav-dd-btn[aria-expanded="true"] + .nav-dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd a{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px;padding:11px 12px 12px;border-bottom:1px solid var(--line-1);border-radius:8px 8px 0 0;transition:background .16s var(--ease-soft)}
.nav-dd a strong{grid-column:1;font-size:14.5px;font-weight:600;color:var(--fg1)}
.nav-dd a span{grid-column:1;font-size:12.5px;color:var(--ink-500)}
.nav-dd a::after{content:"";grid-column:2;grid-row:1/-1;width:28px;height:28px;border-radius:50%;background:rgba(30,43,66,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c3a55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/15px 15px;transition:background-color .18s var(--ease-soft),transform .22s var(--ease-spring)}
.nav-dd a:hover{background:var(--blue-050)}
.nav-dd a:hover::after{background-color:var(--ink-800);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");transform:translateX(2px)}
[dir="rtl"] .nav-dd a::after{transform:scaleX(-1)}
[dir="rtl"] .nav-dd a:hover::after{transform:translateX(-2px) scaleX(-1)}
/* two-column "mega" dropdown for the Study-prep menu */
.nav-dd.mega{min-width:684px;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:14px}
.nav-dd.mega .nav-dd-col{display:flex;flex-direction:column}
.nav-dd.mega .nav-dd-h{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-400);padding:6px 14px 7px;margin:0}
.nav-dd.mega a{padding:10px 12px 11px}
.nav-dd.mega a strong{white-space:nowrap}
.nav-dd.mega .nav-dd-sub{font-size:10px;letter-spacing:.1em;color:var(--ink-300,#9aa6b8);padding:9px 14px 5px}

/* ---------- ICEF verification badge (footer) ---------- */
.icef-badge{display:inline-flex;align-items:center;gap:11px;padding:10px 15px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.04);text-decoration:none;transition:border-color .15s,background .15s}
.icef-badge:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07)}
.icef-badge .ib-mark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:#fff;color:#0b2a6b;font-family:var(--font-display),system-ui,sans-serif;font-weight:800;font-size:13.5px;letter-spacing:.01em;flex:none}
.icef-badge .ib-txt{display:flex;flex-direction:column;line-height:1.3}
.icef-badge .ib-t{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#fff}
.icef-badge .ib-t .ib-check{display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;border-radius:50%;background:#2bbf7e;color:#fff;font-size:10px;flex:none}
.icef-badge .ib-s{font-size:11.5px;color:#9fb0c7}
.footer .icef-badge{margin-top:34px}

/* ---------- accessible tab switcher (course tracks etc.) ---------- */
.tabs{margin-top:6px}
.tablist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tab{appearance:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--fg2);background:var(--surface-card);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
.tab .tk{font-family:var(--font-display);font-size:13px;line-height:1;opacity:.8}
.tab:hover{border-color:var(--line-3);color:var(--fg1)}
.tab[aria-selected="true"]{background:var(--tab-active,var(--ink-800));color:#fff;border-color:var(--tab-active,var(--ink-800));box-shadow:var(--shadow-sm)}
.tab[aria-selected="true"] .tk{opacity:1}
.tabpanel{display:none}
.tabpanel.show{display:block;animation:tabIn .4s cubic-bezier(.22,.61,.36,1)}
@keyframes tabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- shared hero-blob drift (was per-page: tfloat/dfloat/lfloat/etc.) ----------
   Convention: primary blob  -> animation:lc-float 18s ease-in-out infinite
               secondary blob -> animation:lc-float 22s ease-in-out infinite reverse
   Motion is disabled site-wide by the prefers-reduced-motion block below. */
@keyframes lc-float{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,-18px)}}

/* ---------- smooth <details> close: rotate the chevron back immediately
   (site.js animates the height; [open] stays set until the close finishes) */
details.closing summary .chev{transform:rotate(0)!important}

/* mobile drawer */
.scrim{position:fixed;inset:0;background:rgba(22,32,58,.5);z-index:95;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;height:100dvh;width:min(86vw,340px);background:#fff;z-index:96;transform:translateX(100%);transition:transform .26s;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px calc(20px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px))}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;height:52px;flex:none}
.drawer nav{display:flex;flex-direction:column;margin-top:8px}
.drawer nav a{font-size:18px;font-weight:500;padding:15px 4px;border-bottom:1px solid var(--line-1);color:var(--fg1)}
.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);cursor:pointer;color:var(--fg2);background:none;border:none}

/* ---------- page hero (subpage header) ---------- */
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding:44px 0 60px;border-bottom:1px solid var(--line-1)}
.page-hero .lc-container{position:relative;z-index:1}
.page-hero h1{font-size:var(--h1-size);font-weight:600;letter-spacing:var(--h1-spacing);line-height:var(--h1-leading);margin:16px 0 0;text-wrap:balance;max-width:18ch}
.page-hero .lede{font-size:18px;line-height:1.6;color:var(--fg2);margin:18px 0 0;max-width:60ch}
.page-hero .crumbs{font-size:13px;color:var(--ink-500)}
.page-hero .crumbs a{color:var(--blue-600)}
.page-hero .crumbs a:hover{text-decoration:underline}
.noise::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.05;mix-blend-mode:overlay}
.hero-blob{position:absolute;border-radius:50%;filter:blur(64px);z-index:-1;pointer-events:none}

/* ---------- section + prose ---------- */
.section{padding:72px 0;position:relative}
.sec-warm{background:color-mix(in srgb,var(--brand-cream) 45%,transparent)}
.sec-app{background:transparent}

/* section header (shared layout, mirrors home.html). Subpages mark headers
   .sec-head (left-aligned) or .sec-head.center (centred). Without these rules the
   "center" headers silently rendered full-width and left-aligned. */
.sec-head{max-width:660px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .rule-gold{margin-left:auto;margin-right:auto}
.prose{max-width:760px;margin:0 auto;color:var(--fg2);font-size:16.5px;line-height:1.75}
.prose h2{font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--fg1);margin:48px 0 14px;line-height:1.25}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18.5px;font-weight:600;color:var(--fg1);margin:32px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 9px;padding-left:4px}
.prose li::marker{color:var(--gold-600)}
.prose a{color:var(--blue-600);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--blue-700)}
.prose strong{color:var(--fg1);font-weight:600}
.prose hr{border:none;border-top:1px solid var(--line-1);margin:36px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.prose th,.prose td{text-align:left;padding:11px 14px;border:1px solid var(--line-2);vertical-align:top}
.prose th{background:var(--ink-050);font-weight:600;color:var(--fg1)}
.legal-meta{font-size:13.5px;color:var(--ink-500);margin:0 0 32px;padding-bottom:20px;border-bottom:1px solid var(--line-1)}
.toc{background:var(--surface-card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px 26px;margin:0 0 40px;box-shadow:var(--shadow-xs)}
.toc h2{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-500);margin:0 0 12px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.toc li{margin:0 0 8px}
.toc a{color:var(--fg1);text-decoration:none}
.toc a:hover{color:var(--blue-600)}

/* ---------- brochure geometric mosaic band (brand signature) ----------
   Crisp SVG patchwork of Bauhaus tiles in the brand palette, echoing the
   print brochure. Static (no motion), theme-safe, RTL-mirrored, decorative. */
.lc-mosaic{display:block;width:100%;height:44px;border:0;
  background:url(assets/mosaic-band-light.svg) repeat-x left center;background-size:auto 100%}
.lc-mosaic.on-dark{background-image:url(assets/mosaic-band-dark.svg)}
.lc-mosaic.slim{height:30px}
[dir="rtl"] .lc-mosaic{transform:scaleX(-1)}

/* brochure kicker: small marker dot + uppercase label (echoes the print eyebrows) */
.lc-kicker{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-gold);margin:0 0 14px}
.lc-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.lc-kicker.k-blue{color:var(--blue-600)}
.lc-kicker.k-navy{color:var(--ink-600)}
.lc-kicker.k-gold{color:var(--gold-600)}
.lc-kicker.on-ink{color:var(--gold-300)}
/* when the kicker carries its own icon, drop the dot marker to avoid a double lead */
.lc-kicker:has(> :is(i,svg,[data-lucide]))::before{display:none}
[dir="rtl"] .lc-kicker{letter-spacing:.02em}

/* ---------- footer (identical to home.html) ---------- */
.footer{position:relative;background:linear-gradient(180deg,#121b30 0%,#0a0f1b 100%);color:var(--fg-on-ink);padding:104px 0 34px}
/* signature seam: the dark mosaic runs along the very top edge of the footer */
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:52px;z-index:1;
  background:url(assets/mosaic-band-dark.svg) repeat-x left center;background-size:auto 52px}
[dir="rtl"] .footer::before{transform:scaleX(-1)}
/* faint print grain, confined to the dark footer ONLY (cannot touch light sections) */
.footer::after{content:"";position:absolute;inset:52px 0 0;pointer-events:none;z-index:0;
  background:url(assets/grain.svg) repeat;background-size:150px;opacity:.28;mix-blend-mode:screen}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:36px}
.footer .brand .wm{color:#fff}.footer .brand .wm .sub{color:#9aa7bd}
.footer .blurb{font-size:14px;line-height:1.6;color:var(--fg-on-ink-2);margin:16px 0 0;max-width:32ch}
.footer address{font-style:normal;font-size:13.5px;line-height:1.7;color:#c2ccdc;margin-top:16px}
.footer address a{color:#c2ccdc}.footer address a:hover{color:#fff}
.footer h5{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#8493ab;margin:0 0 16px;font-weight:600}
.fcol a{display:block;font-size:14px;color:#c2ccdc;padding:7px 0;transition:color .15s}
.fcol a:hover{color:#fff}
/* 14px text + 7px padding is a 36px row, under the 44px touch minimum.
   Grow it only where a finger is actually doing the tapping. */
@media (max-width:900px),(pointer:coarse){.fcol a{padding:11px 0}}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#8493ab;flex-wrap:wrap;gap:14px}
.footer-bottom .legal-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom .legal-links a{color:#8493ab}
.footer-bottom .legal-links a:hover{color:#fff}

/* ---------- responsive ---------- */
/* tighten the nav before it would overflow, then collapse to the drawer */
@media (max-width:1180px){
  .nav-inner{gap:15px}.nav-links{gap:14px}.nav-cta{gap:9px}
}
@media (max-width:1140px){
  .nav-links{display:none}.nav-cta{display:none}.hamburger{display:flex}
}
@media (max-width:980px){
  .section{padding:56px 0}
  .page-hero{padding:48px 0 40px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .toc ol{columns:1}
}
@media (max-width:560px){
  .lc-container{padding:0 20px}
  .prose{font-size:16px}
  .footer-grid{grid-template-columns:1fr}
  .footer{padding-top:78px}
  .footer::before{height:36px;background-size:auto 36px}
  .lc-mosaic{height:32px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .hero-blob{animation:none}
  .rv{opacity:1!important;transform:none!important}
}

/* ---------- cookie consent banner (injected by site.js) ---------- */
#cookie-banner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);width:min(700px,calc(100% - 32px));z-index:120;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--surface-card);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:18px 22px;opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s ease}
#cookie-banner.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
#cookie-banner .cc-text{flex:1 1 320px;margin:0;font-size:13.5px;line-height:1.55;color:var(--fg2)}
#cookie-banner .cc-text a{color:var(--blue-600);text-decoration:underline;text-underline-offset:2px}
#cookie-banner .cc-actions{flex:0 0 auto;display:flex;gap:10px}
@media (max-width:560px){
  #cookie-banner{flex-direction:column;align-items:stretch}
  #cookie-banner .cc-actions{justify-content:flex-end}
}

/* ---------- language toggle (EN / العربية) ---------- */
.lang-toggle{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;color:var(--fg2);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 11px;cursor:pointer;line-height:1;white-space:nowrap;transition:color .15s,border-color .15s,box-shadow .15s,transform .15s}
.lang-toggle:hover{color:var(--fg1);border-color:var(--line-3);box-shadow:var(--shadow-xs);transform:translateY(-1px)}
.lang-toggle .lt-globe{width:15px;height:15px;color:var(--blue-500)}
.lang-toggle [data-lang-label]{font-feature-settings:"ss01"}
.lang-toggle-mobile{width:100%;justify-content:center;font-size:15px;padding:13px}

/* ============================================================
   Interactive events calendar (home teaser + events page)
   ============================================================ */
.lce-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:4px 0 24px}
.lce-tabs{display:inline-flex;gap:5px;background:var(--surface-card,#fff);border:1px solid var(--line-2);border-radius:var(--r-pill,999px);padding:5px}
.lce-tab{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-500);background:transparent;border:0;border-radius:999px;padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .15s,background .15s}
.lce-tab:hover{color:var(--fg1)}
.lce-tab.is-on{background:var(--ink-800);color:#fff}
.lce-tab .lce-n{font-size:11.5px;font-weight:700;background:rgba(30,43,66,.09);border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums}
.lce-tab.is-on .lce-n{background:rgba(255,255,255,.22)}
.lce-summary{font-size:13px;color:var(--ink-500);font-weight:500}
.lce-grid{display:grid;grid-template-columns:1fr;gap:14px}
.lce-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.lce-grid-3{grid-template-columns:1fr}}

.lce-card{position:relative;display:flex;gap:18px;align-items:stretch;background:var(--surface-card,#fff);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px 20px 18px 24px;box-shadow:var(--shadow-xs,0 1px 2px rgba(30,43,66,.06));overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .25s}
.lce-card.is-in{opacity:1;transform:none}
.lce-card:hover,.lce-card:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--blue-300,#9db8ec)}
.lce-card:focus-visible{outline:3px solid var(--blue-400,#6f97e0);outline-offset:2px}
.lce-accent{position:absolute;inset:0 auto 0 0;width:4px;background:var(--blue-500,#4f7ad6)}
.lce-grid-3 .lce-card{flex-direction:column;gap:14px}

.lce-date{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#f7f9fe,#eef2fb);border:1px solid var(--line-2);border-radius:14px;padding:12px 6px;line-height:1}
.lce-grid-3 .lce-date{flex-direction:row;gap:8px;width:auto;align-self:flex-start;padding:9px 15px}
.lce-mo{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-600,#9a7b2e)}
.lce-dy{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--ink-800);margin:2px 0}
.lce-grid-3 .lce-dy{font-size:23px;margin:0}
.lce-yr{font-size:11px;color:var(--ink-400,#8a97ad);font-variant-numeric:tabular-nums}

.lce-main{flex:1;min-width:0;display:flex;flex-direction:column}
.lce-tagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.lce-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--blue-50,#eef3fc);color:var(--blue-700,#2c50a0)}
.lce-kind{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-500)}
.lce-kind svg{width:14px;height:14px;color:var(--blue-500,#4f7ad6)}
.lce-title{font-size:18px;font-weight:600;line-height:1.25;margin:0 0 5px;color:var(--ink-800)}
.lce-desc{font-size:13.5px;color:var(--fg2);line-height:1.55;margin:0 0 12px}
.lce-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-500);margin-bottom:14px}
.lce-meta span{display:inline-flex;align-items:center;gap:6px}
.lce-meta svg{width:14px;height:14px;color:var(--ink-400,#8a97ad)}
/* joining detail under the meta row: dial-in numbers, "no sign-up needed" */
.lce-note{font-size:12.5px;line-height:1.5;color:var(--ink-500);margin:-6px 0 14px}
.lce-actions{margin-top:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lce-link{font-size:13px;font-weight:600;color:var(--blue-600);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.lce-link svg{width:14px;height:14px}
.lce-link:hover{text-decoration:underline}
.lce-ended{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-500)}
.lce-ended svg{width:15px;height:15px;color:var(--success)}
/* downloads calendar/events.ics, which opens straight into the reader's calendar app */
.lce-cal{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-500);text-decoration:none}
.lce-cal svg{width:15px;height:15px}
.lce-cal:hover{color:var(--blue-600);text-decoration:underline}
.lce-cal:focus-visible{outline:2.5px solid var(--blue-500);outline-offset:3px;border-radius:4px}
.lce-empty{grid-column:1/-1;text-align:center;padding:26px;color:var(--ink-500);border:1px dashed var(--line-2);border-radius:var(--r-lg)}

.lce-up .lce-accent{background:linear-gradient(180deg,var(--blue-500,#4f7ad6),var(--blue-600))}
.lce-live .lce-accent{background:linear-gradient(180deg,var(--gold-300),var(--gold-500))}
.lce-live .lce-status{background:var(--gold-50,#faf3e3);color:var(--gold-700,#8a6a1e)}
.lce-live .lce-date{background:linear-gradient(180deg,#fff7e6,#fbeecb);border-color:#eeddb0}
.lce-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(47,143,99,.5);animation:lcePulse 1.8s infinite}
@keyframes lcePulse{0%{box-shadow:0 0 0 0 rgba(47,143,99,.5)}70%{box-shadow:0 0 0 7px rgba(47,143,99,0)}100%{box-shadow:0 0 0 0 rgba(47,143,99,0)}}
.lce-past .lce-accent{background:var(--line-3,#d3dae6)}
.lce-past .lce-date{background:#f3f5f9;filter:grayscale(.4)}
.lce-past .lce-mo{color:var(--ink-500)}
.lce-past .lce-status{background:#eef1f6;color:var(--ink-500)}
.lce-past .lce-title{color:var(--ink-700,#3a475e)}

[dir="rtl"] .lce-accent{inset:0 0 0 auto}
[dir="rtl"] .lce-card{padding:18px 24px 18px 20px}
@media(prefers-reduced-motion:reduce){.lce-card{opacity:1;transform:none;transition:none}.lce-dot{animation:none}}

/* ---------- seamless language switch: suppress transient transitions/animations ---------- */
html.lc-lang-switching *,html.lc-lang-switching *::before,html.lc-lang-switching *::after{transition:none !important;animation-duration:.001s !important}

/* ============================================================
   UNIFIED FILTER / CONTROL KIT  (.lcf-*)
   ------------------------------------------------------------
   One look for every filter on the site: the partner-universities
   degree browser, the per-university degree finder, and any future
   filtered list. Selects and chips share the same height, radius,
   focus ring and active state, so a filter row reads as one control
   surface instead of three unrelated widgets.
   Logical properties throughout, so RTL mirrors with no overrides.
   ============================================================ */
.lcf-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:10px 12px;margin:20px auto 0;max-width:900px}
.lcf-group{display:flex;flex-direction:column;gap:7px;min-width:0}
.lcf-legend{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);padding-inline-start:2px}

/* --- select: same pill language as the chips, with a single chevron --- */
.lcf-select{position:relative;display:inline-flex;align-items:center}
.lcf-select select{appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:600;color:var(--fg1);
  height:44px;padding-block:0;padding-inline:16px 40px;min-width:172px;
  background:var(--surface-card);border:1px solid var(--line-2);border-radius:var(--r-pill);
  box-shadow:var(--shadow-xs);cursor:pointer;transition:border-color .16s,box-shadow .16s,background-color .16s}
.lcf-select select:hover{border-color:var(--blue-300)}
.lcf-select select:focus-visible{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 4px var(--focus-ring)}
.lcf-select .lcf-chev{position:absolute;inset-inline-end:15px;width:16px;height:16px;pointer-events:none;color:var(--ink-500);display:block}
/* a filter that is actually narrowing the list reads as "on" */
.lcf-select[data-on="1"] select{background:var(--ink-800);border-color:var(--ink-800);color:#fff}
.lcf-select[data-on="1"] .lcf-chev{color:rgba(255,255,255,.72)}

/* --- chip: the toggle form of the same control --- */
.lcf-chips{display:flex;flex-wrap:wrap;gap:8px}
.lcf-chip{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13.5px;font-weight:600;line-height:1;
  min-height:38px;padding-block:0;padding-inline:15px;
  background:var(--surface-card);border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--fg2);
  cursor:pointer;transition:border-color .16s,color .16s,background-color .16s,transform .16s var(--ease-spring)}
.lcf-chip:hover{border-color:var(--blue-300);color:var(--blue-700)}
.lcf-chip:focus-visible{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 4px var(--focus-ring)}
.lcf-chip[aria-pressed="true"]{background:var(--ink-800);border-color:var(--ink-800);color:#fff}
.lcf-chip[aria-pressed="true"]:hover{color:#fff}
.lcf-chip .lcf-n{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-500);
  background:var(--ink-050);border-radius:var(--r-pill);padding:2px 7px;min-width:20px;text-align:center}
.lcf-chip[aria-pressed="true"] .lcf-n{background:rgba(255,255,255,.18);color:#fff}
.lcf-chip[disabled],.lcf-chip[aria-disabled="true"]{opacity:.42;cursor:not-allowed}

/* --- active-filter summary: says what is on, and clears it in one tap --- */
.lcf-active{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:14px;min-height:32px}
.lcf-active:empty{display:none}
.lcf-tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--blue-700);
  background:var(--blue-050);border:1px solid var(--blue-200,#c9daf6);border-radius:var(--r-pill);padding:6px 8px 6px 13px}
.lcf-tag button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;
  border:0;border-radius:50%;background:rgba(47,79,147,.10);color:var(--blue-700);cursor:pointer;padding:0;transition:background-color .15s}
.lcf-tag button:hover{background:rgba(47,79,147,.22)}
.lcf-tag button:focus-visible{outline:2px solid var(--blue-400);outline-offset:1px}
.lcf-tag svg{width:12px;height:12px}
.lcf-clear{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-500);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:6px 4px}
.lcf-clear:hover{color:var(--ink-800)}
.lcf-clear:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px;border-radius:4px}

@media(max-width:600px){
  .lcf-bar{justify-content:stretch;gap:10px}
  .lcf-group{flex:1 1 100%}
  .lcf-select,.lcf-select select{width:100%}
}
@media(prefers-reduced-motion:reduce){.lcf-chip{transition:none}}

/* ============================================================
   IMAGE PLACEHOLDERS  (.lcph)
   A visible, self-documenting slot for artwork nobody has sourced
   yet. It carries the brief for the photo it is standing in for, so
   the spec lives in the hole it fills rather than in a separate doc.
   When the real asset arrives, replace the whole <figure> with an
   <img> carrying the same width/height and a real alt.
   Modifiers set the shape: .lcph-16x9 / .lcph-4x3 / .lcph-1x1.
   ============================================================ */
.lcph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;margin:0;padding:24px 20px;min-height:190px;
  border:2px dashed var(--line-3);border-radius:var(--card-radius,18px);color:var(--ink-500);overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--ink-050) 0 10px,transparent 10px 20px)}
.lcph > i{width:26px;height:26px;color:var(--ink-400);flex:none}
.lcph-k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400)}
.lcph-t{font-size:14.5px;font-weight:600;color:var(--ink-700);line-height:1.4;max-width:34ch}
.lcph-d{font-size:12.5px;color:var(--ink-500);line-height:1.5;max-width:42ch}
.lcph-s{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-500);background:var(--surface-card,#fff);border:1px solid var(--line-2);border-radius:99px;padding:3px 11px}
.lcph-16x9{aspect-ratio:16/9;min-height:0}
.lcph-4x3{aspect-ratio:4/3;min-height:0}
.lcph-1x1{aspect-ratio:1/1;min-height:0}
@media(max-width:560px){
  .lcph{padding:20px 16px;min-height:170px;gap:6px}
  .lcph-d{display:none}          /* keep the brief off small screens, the title still says what it is */
}

/* ============================================================
   EXAM DATE TABLES (.exd)
   The table is real markup, written by scripts/update-exam-dates.mjs
   from the official GaST calendar and refreshed daily by CI.
   exam-dates.js only re-checks open/closed against the reader's today.
   ============================================================ */
.exd-wrap{margin-top:24px}
.exd-scroll{overflow-x:auto;border:var(--card-hairline);border-radius:var(--card-radius);background:var(--surface-card);box-shadow:var(--card-shadow)}
.exd{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.exd th{text-align:start;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);padding:13px 18px;background:var(--ink-050);border-bottom:1px solid var(--line-2);white-space:nowrap}
.exd td{padding:13px 18px;border-bottom:1px solid var(--line-1);color:var(--fg2);vertical-align:middle}
.exd tbody tr:last-child td{border-bottom:0}
.exd tbody tr.is-closed{color:var(--ink-400)}
.exd tbody tr.is-closed b{font-weight:500}
.exd td b{color:var(--fg1);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.exd-empty{text-align:center;color:var(--ink-400);padding:26px 18px}
.exd-pill{display:inline-block;margin-inline-start:8px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap}
.exd-open{background:var(--success-bg);color:var(--success)}
.exd-closed{background:var(--ink-100);color:var(--ink-500)}
.exd-note{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 2px 0;font-size:12.5px;color:var(--ink-500)}
.exd-dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex:none;box-shadow:0 0 0 3px var(--success-bg)}
.exd-stamp{color:var(--ink-400)}
@media(max-width:640px){
  /* stack each sitting as its own labelled block rather than a sideways scroll */
  .exd{min-width:0}
  .exd thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .exd tbody tr{display:block;padding:12px 4px;border-bottom:1px solid var(--line-1)}
  .exd tbody tr:last-child{border-bottom:0}
  .exd td{display:flex;justify-content:space-between;gap:14px;padding:5px 14px;border:0}
  .exd td::before{content:attr(data-th);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);flex:none}
  /* The stacked labels come from an attribute, so they cannot go through
     data-i18n like the rest of the page. Second attribute, swapped in CSS. */
  html.lang-ar .exd td::before{content:attr(data-th-ar);letter-spacing:0;text-transform:none}
  .exd-scroll{overflow-x:visible}
}

/* ============================================================
   SUBSCRIBE TO A CALENDAR (.calsub)
   Sits under the exam tables and on the events page. Two ways in:
   Google Calendar for the majority, a plain .ics for everyone else.
   ============================================================ */
.calsub{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;margin-top:26px;padding:20px 22px;border:var(--card-hairline);border-radius:var(--card-radius);background:var(--surface-card);box-shadow:var(--card-shadow)}
.calsub-ic{width:44px;height:44px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ink-050);color:var(--ink-700)}
.calsub-ic svg{width:22px;height:22px}
.calsub-t{flex:1 1 260px;min-width:0}
.calsub-h{font-size:15.5px;font-weight:700;color:var(--fg1);line-height:1.3}
.calsub-p{font-size:13.5px;color:var(--ink-500);margin-top:5px;line-height:1.5}
.calsub-a{display:flex;flex-wrap:wrap;gap:10px;flex:none}
.calsub-note{font-size:12px;color:var(--ink-400);margin-top:7px}
@media(max-width:640px){
  .calsub{padding:18px;gap:14px 16px}
  /* narrow enough for the icon and the heading to share a row instead of the
     icon stranding itself above a gap */
  .calsub-t{flex:1 1 170px}
  .calsub-ic{width:38px;height:38px;border-radius:11px}
  .calsub-ic svg{width:19px;height:19px}
  .calsub-a{width:100%}
  .calsub-a .btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   MOSAIC SEAM ON DARK BANDS
   The geometric mosaic means one thing on this site: you are
   crossing into a dark band. It already does that at the top of
   the footer; this extends the same rule to full-width dark
   sections so the motif reads as structure, not decoration.
   Deliberately NOT a divider between light sections, and never a
   page-wide overlay: both of those were tried and pulled.
   ============================================================ */
.sec-ink{position:relative;isolation:isolate}
.sec-ink::before{content:"";position:absolute;top:0;left:0;right:0;height:44px;z-index:0;pointer-events:none;
  background:url(assets/mosaic-band-dark.svg) repeat-x left center;background-size:auto 44px}
[dir="rtl"] .sec-ink::before{transform:scaleX(-1)}
.sec-ink > *{position:relative;z-index:1}
/* clear the band so nothing collides with it */
.section.sec-ink{padding-top:calc(72px + 30px)}
@media(max-width:700px){
  .sec-ink::before{height:32px;background-size:auto 32px}
  .section.sec-ink{padding-top:calc(72px + 20px)}
}