/* =========================================================================
   EasyGuide Design System
   The public design system for EasyGuide International Limited
   — international visa, education and travel advisory.

   Derived from the MRU design system and re-tuned to the EasyGuide brand.
   One palette, one type scale, one radius scale, one spacing rhythm: every
   component below reads from the tokens, so the whole site re-tunes here
   rather than in a hundred rules.
   ========================================================================= */

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

    /* ---------------------------------------------------------------------
       Design tokens

       Colour: EasyGuide navy #012770 leads, seal-gold #C9A227 accents,
       white grounds, and a restrained pink used only as an editorial mark.
       The navy is sampled from the company's own logo artwork.

       Accents come in two forms ON PURPOSE. --gold and --pink are SURFACE
       colours (buttons, rules, marks); --gold-d and --pink-d are their
       text-safe twins. #C9A227 on white is 2.4:1 and fails WCAG for body
       copy, while #8A6D0B is 4.9:1 and passes. Never set body text in a
       surface accent.

       Verified contrast (WCAG AA needs 4.5:1 for body text):
         navy on white ......... 13.8:1   white on navy ......... 13.8:1
         --pri-l link on white ... 8.6:1   --gold-d on white ...... 4.9:1
         --gold-l on navy ........ 8.5:1   --pink-d on white ...... 6.0:1
         navy on gold button ..... 5.7:1   --tx2 muted on white ... 6.0:1

       Red is deliberately NOT a brand colour. The tagline red in the source
       artwork is #FF0000 — an office-default that vibrates against navy and
       cannot carry text. Emphasis is carried by gold; red is demoted to
       --bad, a pure status colour for refusals, errors and expiries.
       --------------------------------------------------------------------- */
    :root{
      /* Brand */
      --pri:#012770;        /* EasyGuide navy — sampled from the logo */
      --pri-d:#01193F;      /* pressed / deeper bands */
      --pri-dd:#000F28;     /* footer floor */
      --pri-l:#0A45A8;      /* links and hovers on white */
      --pri-soft:#EDF2FC;   /* tinted fills */
      --pri-soft-2:#DAE4F7;
      --gold:#C9A227;       /* accent surface — seal / stamp / passport foil */
      --gold-d:#8A6D0B;     /* accent text on white (4.9:1) */
      --gold-l:#E8C868;     /* accent text on navy (8.5:1) */
      --gold-soft:#FBF4E0;
      --pink:#D96A8F;       /* restrained editorial accent — surface only */
      --pink-d:#A63E64;     /* its text-safe twin (6.0:1) */
      --pink-soft:#FBEEF3;

      /* Ground and ink */
      --bg:#FFFFFF;
      --surface:#F6F8FB;    /* alternating band */
      --surface-2:#EDF1F7;
      --line:#E4E9F1; --line-2:#CDD7E4;
      --tx:#333333; --tx2:#5C6470; --tx3:#6E7683;

      /* Ledger — the landing page's own ground and ink (EASYGUIDE-HOMEPAGE-DESIGN.md §3).
         Warm paper instead of cool blue-grey is the single biggest tonal shift
         away from the inherited system. --gold-ink exists because --gold-d is
         4.47:1 on paper and fails; this is 5.70:1 on paper and 6.26:1 on white. */
      --paper:#F7F4EC; --paper-2:#EFEBE0; --ink:#1F2430;
      --gold-ink:#775D08;
      --rule:rgba(1,39,112,.16); --rule-on-navy:rgba(255,255,255,.14);

      /* Status — red lives here and nowhere else */
      --ok:#0F7A3D; --ok-soft:#E7F6EC; --bad:#C42B2B; --bad-soft:#FCECEC;
      --warn:#9A6205; --warn-soft:#FEF5E6;

      /* Radii */
      --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

      /* Elevation: soft and navy-tinted, never grey mush */
      --sh-1:0 1px 2px rgba(1,39,112,.05), 0 1px 3px rgba(1,39,112,.06);
      --sh-2:0 4px 10px -2px rgba(1,39,112,.07), 0 2px 6px -2px rgba(1,39,112,.05);
      --sh-3:0 14px 30px -12px rgba(1,39,112,.18), 0 6px 14px -8px rgba(1,39,112,.10);
      --sh-4:0 28px 60px -20px rgba(1,39,112,.26);

      /* Rhythm */
      --hd:66px;            /* header height */
      --wrap:1400px;        /* wide shell */
      --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px;
      --s-6:64px; --s-7:88px; --s-8:112px;

      /* Type
         --font          Plus Jakarta Sans — UI and body. Geometric, warm and
                         highly legible at small sizes on a phone, which is
                         where most of this audience arrives.
         --font-display  Playfair Display — high-contrast display serif for
                         headlines. Carries the "luxury corporate travel +
                         university credibility" register the brief asks for.
                         Display sizes only (>=24px); its thin strokes are
                         not built for body copy.
         --font-seal     Cinzel — inscriptional Roman capitals. Used ONLY for
                         small credential marks and eyebrows (IATA ACCREDITED
                         AGENT, section labels). It reads as an official seal,
                         which is exactly the association a visa consultancy
                         wants. Never for sentences. */
      --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
      --font-display:'Playfair Display','Iowan Old Style',Georgia,'Times New Roman',serif;
      --font-seal:'Cinzel','Playfair Display',Georgia,serif;
      --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    }
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
    body{font-family:var(--font);color:var(--tx);background:var(--bg);font-size:15.5px;line-height:1.7;
      -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:0;}
    a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;}
    ::selection{background:var(--pri);color:#fff;}
    .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}

    /* Fixed header */
    header.site{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hd);
      background:rgba(247,246,242,.88);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);}
    header.site .bar{display:flex;align-items:center;gap:18px;height:var(--hd);}
    .brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;letter-spacing:.01em;}
    .brand .badge{width:25px;height:25px;background:var(--pri);color:var(--gold);display:flex;align-items:center;
      justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.02em;}
    /* The university crest replaces the initials badge. Height-capped so the
       fixed 52px header never grows; width follows the artwork. */
    .brand img.crest{height:34px;width:auto;display:block;}
    .brand .brand-name{line-height:1.15;}
    .brand .brand-name small{display:block;font-size:9px;font-weight:600;letter-spacing:.12em;
      text-transform:uppercase;color:var(--gold-d);}
    .nav{display:flex;align-items:center;gap:18px;font-size:13px;font-weight:600;}
    /* The nav is now set at the same weight and ink as the body text it sits
       above, so hover needs its own colour or it reads as dead. Active keeps
       that colour plus a standing rule, which hover never draws. The two
       states have to be told apart at a glance. */
    .nav a{position:relative;color:var(--tx);transition:color .15s;padding:2px 0;}
    .nav a:hover{color:var(--gold-d);}
    .nav a.on{color:var(--gold-d);}
    .nav a.on::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--gold);}
    .nav .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-left:4px;vertical-align:middle;}
    .hd-r{margin-left:auto;display:flex;align-items:center;gap:10px;}
    .burger{display:none;width:32px;height:32px;border:1px solid var(--line-2);background:var(--surface);
      color:var(--tx2);align-items:center;justify-content:center;cursor:pointer;font-size:13.5px;}
    main{padding-top:var(--hd);}

    /* Buttons */
    /* "tap targets >= 44px": base/.lg padding+line-height sized to clear 44px total
       height (a real gap the W7 walkthrough caught, the original 36px/41px heights
       looked fine on desktop but fail the plan's own mobile tap-target requirement). */
    .btn{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:12.5px;padding:12px 16px;
      min-height:44px;border:1px solid var(--pri);background:var(--pri);color:#fff;
      transition:background .15s,border-color .15s,color .15s;white-space:nowrap;}
    .btn:hover{background:var(--pri-d);border-color:var(--pri-d);}
    .btn.gold{border-color:var(--gold);background:var(--gold);color:var(--pri-d);}
    .btn.gold:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff;}
    .btn.ghost{background:transparent;color:var(--pri);}
    .btn.ghost:hover{background:var(--pri-soft);}
    .btn.sm{padding:9px 12px;font-size:12px;min-height:38px;} /* header/inline use only, never a primary conversion CTA */
    .btn.lg{padding:14px 20px;font-size:13px;min-height:48px;}

    /* Sections */
    section{padding:52px 0;}
    .eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);}
    h1{font-size:38px;font-weight:200;letter-spacing:-.025em;line-height:1.12;}
    h1 b{font-weight:600;color:var(--pri);}
    h2{font-size:24px;font-weight:300;letter-spacing:-.02em;line-height:1.2;}
    .lead{font-size:15px;font-weight:450;color:var(--tx2);line-height:1.6;}

    /* hero (home only) */
    .hero{padding:48px 0 44px;text-align:center;position:relative;overflow:hidden;}
    .hero .eyebrow{margin-bottom:12px;}
    .hero h1{margin-bottom:14px;}
    .hero p{max-width:560px;margin:0 auto 24px;}
    .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
    .stat-row{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:36px;}
    .stat-row .stat{text-align:center;}
    .stat-row .v{font-size:23px;font-weight:600;color:var(--pri);}
    .stat-row .l{font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}

    /* compact "what I do" teaser row (home only, the full grid lives on /services) */
    .icon-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
    .icon-row a{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px 12px;
      border:1px solid var(--line);background:var(--surface);transition:border-color .15s,transform .15s;}
    .icon-row a:hover{border-color:var(--gold);transform:translateY(-2px);}
    .icon-row .ic{width:38px;height:38px;background:var(--gold-soft);color:var(--gold-d);display:flex;align-items:center;justify-content:center;font-size:15px;}
    .icon-row span{font-size:13px;font-weight:600;color:var(--tx);}

    /* page hero (every sub-page), shorter, left-aligned, no stat row */
    /* Page header
       One definition. This had fragmented into three rules in different parts
       of the sheet, and the last of them set `padding:26px 0 0`, which is why
       every page header sat with its content pressed against whatever came
       next.

       The ruled paper and the warm light are built in rather than asked for
       per page, so every header carries the pattern and none of them can be
       forgotten. Both are masked so they fade out before the section rule,
       which is what stops a texture reading as a box. */
    .page-hero{position:relative;overflow:hidden;padding:30px 0 26px;
      border-bottom:1px solid var(--line);background:var(--surface);}
    .page-hero .wrap{position:relative;z-index:1;}
    .page-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
      background-image:
        linear-gradient(var(--line) 1px,transparent 1px),
        linear-gradient(90deg,var(--line) 1px,transparent 1px),
        linear-gradient(rgba(231,227,216,.55) 1px,transparent 1px),
        linear-gradient(90deg,rgba(231,227,216,.55) 1px,transparent 1px);
      background-size:96px 96px,96px 96px,24px 24px,24px 24px;
      background-position:-1px -1px;
      -webkit-mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.35) 46%,transparent 78%);
      mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.35) 46%,transparent 78%);
      opacity:.85;}
    .page-hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
      background:
        radial-gradient(680px 260px at 88% 8%,rgba(184,147,63,.16),transparent 64%),
        radial-gradient(520px 220px at 4% 96%,rgba(11,31,58,.06),transparent 62%);}

    /* A consistent rhythm: label, title, one line of air, the sentence. */
    .page-hero .eyebrow{margin-bottom:9px;}
    .page-hero h1{font-size:30px;font-weight:300;margin-bottom:7px;letter-spacing:-.02em;}
    .page-hero p{color:var(--tx2);font-size:13.5px;font-weight:450;line-height:1.6;max-width:560px;margin-bottom:0;}
    .page-hero .subnav,.page-hero .trust-chips{margin-top:16px;}

    /* subnav, cross-links between the about-family pages */
    .subnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
    .subnav a{font-size:12px;font-weight:500;color:var(--tx2);padding:5px 12px;border:1px solid var(--line-2);background:var(--bg);transition:all .15s;}
    .subnav a:hover{border-color:var(--gold);color:var(--gold-d);}
    .subnav a.on{background:var(--pri);border-color:var(--pri);color:#fff;}

    /* module / feature grid */
    .band-surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
    .sec-head{text-align:center;max-width:620px;margin:0 auto 40px;}
    .sec-head h2{margin-bottom:10px;}
    .sec-head p{color:var(--tx2);font-size:14px;font-weight:450;}
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
    .card{padding:22px;border:1px solid var(--line);background:var(--bg);transition:border-color .15s;}
    .card:hover{border-color:var(--line-2);}
    .card .ic{width:40px;height:40px;background:var(--gold-soft);color:var(--gold-d);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:14px;}
    .card h3{font-size:14.5px;font-weight:600;margin-bottom:6px;}
    .card p{font-size:13px;color:var(--tx2);line-height:1.55;}

    /* clients strip */
    .clients-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;font-size:12.5px;color:var(--tx3);
      font-weight:500;letter-spacing:.02em;text-transform:uppercase;}

    /* projects grid */
    .proj-card{border:1px solid var(--line);background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s;}
    .proj-card:hover{border-color:var(--gold);transform:translateY(-2px);}
    .proj-card .tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
    .tag{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;background:var(--pri-soft);color:var(--pri);}
    .proj-card h3{font-size:16px;font-weight:600;}
    .proj-card .client{font-size:12px;color:var(--gold-d);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
    .proj-card p{font-size:13px;font-weight:450;color:var(--tx2);line-height:1.55;}
    .proj-card .link{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--pri);}

    /* skills */
    .skill-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
    .skill-group h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-d);margin-bottom:10px;}
    .skill-group ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;}
    .skill-group li{font-size:12px;color:var(--tx2);background:var(--surface-2);padding:5px 10px;border:1px solid var(--line);}

    /* timeline (experience/education) */
    .timeline{display:flex;flex-direction:column;gap:26px;}
    .tl-item{padding-left:22px;border-left:2px solid var(--line);position:relative;}
    .tl-item::before{content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;background:var(--gold);}
    .tl-item .period{font-size:11.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
    .tl-item h3{font-size:15px;font-weight:600;margin:4px 0 2px;}
    .tl-item .org{font-size:13px;color:var(--pri);font-weight:500;margin-bottom:6px;}
    .tl-item p{font-size:13px;color:var(--tx2);line-height:1.55;}

    /* research / products */
    .feature-box{border:1px solid var(--line);background:var(--surface);padding:30px;}
    .feature-box h3{font-size:18px;font-weight:600;margin-bottom:6px;}
    .feature-box .sub{font-size:12.5px;color:var(--gold-d);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;}
    .feature-box p{font-size:13.5px;color:var(--tx2);line-height:1.65;margin-bottom:14px;}
    .pill-row{display:flex;flex-wrap:wrap;gap:8px;}
    .pill{font-size:11.5px;padding:5px 11px;border:1px solid var(--line-2);color:var(--tx2);}

    /* contact */
    .contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;}
    .contact-info .item{margin-bottom:20px;}
    .contact-info .item h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:5px;}
    .contact-info .item a,.contact-info .item span{font-size:14px;color:var(--tx);}
    form.contact-form{display:flex;flex-direction:column;gap:14px;}
    form.contact-form input,form.contact-form textarea,form.contact-form select{
      width:100%;border:1px solid var(--line-2);background:var(--surface);padding:12px 14px;font-family:var(--font);
      font-size:13.5px;color:var(--tx);}
    form.contact-form input:focus,form.contact-form textarea:focus,form.contact-form select:focus{outline:2px solid var(--gold);outline-offset:-1px;}
    form.contact-form textarea{min-height:120px;resize:vertical;}
    form.contact-form label{font-size:12px;font-weight:600;color:var(--tx2);margin-bottom:4px;display:block;}
    form.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
    @media(max-width:520px){form.contact-form .row2{grid-template-columns:1fr;}}
    .field-error{font-size:12px;color:#b91c1c;margin-top:4px;}
    .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:26px 0 0;}
    .steps .step{border:1px solid var(--line);background:var(--surface);padding:20px;}
    .steps .step .n{width:26px;height:26px;background:var(--pri);color:var(--gold);font-size:12px;font-weight:700;
      display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
    .steps .step h4{font-size:13.5px;font-weight:600;margin-bottom:5px;}
    .steps .step p{font-size:12.5px;color:var(--tx2);line-height:1.5;}
    .alert-success{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok);padding:12px 16px;font-size:13px;margin-bottom:16px;}
    /* honeypot, hidden from real visitors, catches simple bots */
    .hp-field{position:absolute;left:-9999px;top:-9999px;}

    /* e-learning catalogue */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;border:0;}
    .filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
    .filter-bar select,.filter-bar input[type=text]{border:1px solid var(--line-2);background:var(--surface);
      padding:9px 12px;font-family:var(--font);font-size:13px;color:var(--tx);}
    .filter-bar input[type=text]{flex:1;min-width:180px;}
    .filter-bar select:focus,.filter-bar input[type=text]:focus{outline:2px solid var(--gold);outline-offset:-1px;}
    .trust-chips{display:flex;flex-wrap:wrap;gap:7px 9px;font-size:11.5px;font-weight:500;color:var(--tx2);}
    .trust-chips span{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
      padding:5px 10px;background:var(--bg);border:1px solid var(--line);}
    .trust-chips i{font-size:10.5px;color:var(--gold-d);}
    .trust-chips span{white-space:nowrap;}
    .course-cover{width:calc(100% + 48px);aspect-ratio:16/9;background:linear-gradient(135deg,var(--pri),var(--pri-d));
      display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:26px;margin:-24px -24px 14px;}
    .course-cover img{width:100%;height:100%;object-fit:cover;}
    .course-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:12px;color:var(--tx3);margin:6px 0;}
    .course-price{font-weight:700;color:var(--pri);font-size:14px;}
    .course-price .free{color:var(--gold-d);}
    .course-price .was{font-weight:400;color:var(--tx3);text-decoration:line-through;margin-right:6px;}
    .pagination{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:34px;font-size:13px;}
    .pagination a,.pagination span{color:var(--tx2);}
    .pagination a:hover{color:var(--gold-d);}

    /* course detail (sales page) */
    .course-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;}
    .course-layout .main{min-width:0;}
    .buy-box{border:1px solid var(--line);background:var(--surface);padding:22px;position:sticky;top:calc(var(--hd) + 16px);}
    .buy-box .thumb{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--pri),var(--pri-d));
      display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:30px;margin-bottom:16px;}
    .buy-box .thumb img{width:100%;height:100%;object-fit:cover;}
    .buy-box .price{font-size:26px;font-weight:700;color:var(--pri);margin-bottom:14px;}
    .buy-box .price.free{color:var(--gold-d);}
    .buy-box ul.includes{list-style:none;margin:16px 0;}
    .buy-box ul.includes li{font-size:12.5px;color:var(--tx2);padding:5px 0 5px 22px;position:relative;}
    .buy-box ul.includes li::before{content:'\2713';position:absolute;left:0;color:var(--gold-d);font-weight:700;}
    .pay-icons{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;font-size:11px;color:var(--tx3);}
    .pay-icons span{border:1px solid var(--line-2);padding:4px 8px;}
    .buy-box .coupon-field{width:100%;border:1px solid var(--line-2);padding:9px 12px;font-family:var(--font);font-size:13px;margin-bottom:10px;}
    .buy-box .money-comfort{font-size:11px;color:var(--tx3);margin-top:12px;text-align:center;}
    /* Curriculum accordion
       These opened and closed with no sign that they could. A <summary> with
       its default marker suppressed and nothing put back is a heading that
       happens to be clickable, which nobody discovers, so the chevron is
       explicit, it turns, and the whole header is obviously a control. */
    .accordion-mod{border:1px solid var(--line);margin-bottom:10px;background:var(--surface);}
    .accordion-mod summary{padding:14px 16px;font-weight:600;font-size:14px;cursor:pointer;list-style:none;
      display:flex;align-items:center;gap:12px;background:var(--surface);transition:background .14s;}
    .accordion-mod summary::-webkit-details-marker{display:none;}
    .accordion-mod summary:hover{background:var(--gold-soft);}
    .accordion-mod summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
    .mod-caret{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
      border:1px solid var(--line-2);color:var(--pri);font-size:10px;transition:transform .2s ease,
      background .14s,border-color .14s;}
    .accordion-mod[open] .mod-caret{transform:rotate(90deg);background:var(--pri);color:#fff;
      border-color:var(--pri);}
    .accordion-mod summary:hover .mod-caret{border-color:var(--gold);}
    .mod-no{flex-shrink:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
      font-weight:700;color:var(--gold-d);}
    .mod-title{flex:1;min-width:0;line-height:1.35;}
    .accordion-mod summary .n{flex-shrink:0;font-size:11.5px;color:var(--tx3);font-weight:500;
      white-space:nowrap;}
    /* Said once, on the closed header, so a visitor scanning modules can see
       where the free lesson is without opening anything. */
    .mod-free{flex-shrink:0;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
      color:var(--gold-d);background:var(--gold-soft);padding:3px 7px;}
    @media(max-width:560px){
      .accordion-mod summary{flex-wrap:wrap;gap:8px 10px;}
      .mod-title{flex:1 1 100%;order:3;}
    }

    .lesson-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
      padding:11px 16px 11px 50px;border-top:1px solid var(--line);font-size:13px;color:var(--tx2);}

    /* Expand / collapse everything, for somebody who wants the whole shape
       of the course at once rather than one module at a time. */
    .cur-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
      flex-wrap:wrap;margin-bottom:14px;}
    .cur-meta{font-size:12.5px;color:var(--tx3);}
    .cur-toggle{font-size:12.5px;font-weight:600;color:var(--pri);background:none;border:0;padding:0;
      cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
    .cur-toggle:hover{color:var(--gold-d);}
    .cur-toggle i{font-size:10px;}
    .outcomes-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 20px;}
    .outcomes-list li{padding-left:24px;position:relative;font-size:13.5px;color:var(--tx2);}
    .outcomes-list li::before{content:'\2713';position:absolute;left:0;color:var(--gold-d);font-weight:700;}
    .instructor-card{display:flex;gap:16px;align-items:flex-start;}
    .instructor-card .ph{width:56px;height:56px;border-radius:50%;background:var(--gold-soft);color:var(--gold-d);
      display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;}
    .faq-item{border-bottom:1px solid var(--line);padding:14px 0;}
    .faq-item h3{font-size:14px;font-weight:600;margin-bottom:6px;}
    .faq-item p{font-size:13px;color:var(--tx2);}
    @media(max-width:1024px){.course-layout{grid-template-columns:1fr;} .buy-box{position:static;order:-1;margin-bottom:30px;}}

    /* content/legal prose */
    .page{max-width:760px;margin:0 auto;}
    .page h1{font-size:34px;margin-bottom:8px;}
    .page .updated{font-size:12.5px;color:var(--tx3);margin-bottom:28px;}
    .page h2{font-size:18px;font-weight:500;margin:28px 0 8px;}
    .page p{color:var(--tx2);margin:10px 0;}
    .page ul{margin:10px 0;padding-left:0;list-style:none;}
    .page li{position:relative;padding-left:22px;color:var(--tx2);margin:7px 0;}
    .page li::before{content:'';position:absolute;left:4px;top:9px;width:6px;height:6px;background:var(--gold);}
    .page a.link{color:var(--pri);font-weight:500;}

    /* footer */
    footer{border-top:1px solid var(--line);background:var(--surface);padding:40px 0 26px;}
    .foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px 24px;}
    .foot .blurb{font-size:13px;font-weight:450;color:var(--tx2);max-width:290px;margin-top:12px;line-height:1.6;}
    .foot-place{font-size:12px;font-weight:500;color:var(--tx3);margin-top:10px;display:flex;align-items:center;gap:6px;}
    .foot-place i{color:var(--gold-d);font-size:11px;}
    .foot .foot-h{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);
      margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--line);}
    .foot a{display:block;font-size:13px;font-weight:500;color:var(--tx2);margin:6px 0;}
    .foot a:hover{color:var(--gold-d);}
    .foot-bar{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;font-size:12px;color:var(--tx3);
      display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}


    /* mobile menu */
    .mmenu{position:fixed;inset:var(--hd) 0 0 0;z-index:55;background:var(--bg);padding:22px 24px;display:none;flex-direction:column;gap:4px;}
    .mmenu.open{display:flex;}
    .mmenu a{font-size:18px;font-weight:300;color:var(--tx);padding:12px 0;border-bottom:1px solid var(--line);}
    .mmenu .btn{margin-top:16px;justify-content:center;}

    /*
       Navigation

       Four items, one of which opens a panel. Opening is driven by :hover and
       :focus-within, so the panel works with a mouse, with a keyboard, and
       with JavaScript switched off. Script only adds what CSS cannot express:
       Escape to close, and keeping aria-expanded truthful.
        */
    .nav{position:relative;}
    .nav-item{position:relative;display:flex;align-items:center;}
    .nav-link{position:relative;display:inline-flex;align-items:center;gap:6px;color:var(--tx);
      font-weight:600;font-size:13px;padding:2px 0;background:none;border:none;font-family:inherit;
      cursor:pointer;transition:color .15s;}
    .nav-link:hover{color:var(--gold-d);}
    .nav-link.on{color:var(--gold-d);}
    .nav-link.on::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--gold);}
    .nav-link .caret{font-size:9px;transition:transform .22s;}
    /* Rotation is tied to the panel actually being open (see the header
       rebuild section); this bare-hover rotation only serves the no-JS
       fallback, where hover IS the open state. */
    html:not(.js-nav) .nav-item:hover .caret,
    html:not(.js-nav) .nav-item:focus-within .caret{transform:rotate(180deg);}
    .nav-link .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);vertical-align:middle;}

    /* The panel is anchored to the header, not the item, so a six-entry menu
       can be wide enough to explain itself without being dragged off-screen by
       whichever nav item happens to open it. */
    .mega{position:absolute;top:calc(100% + 10px);left:0;z-index:70;width:min(560px,calc(100vw - 32px));
      background:var(--surface);border:1px solid var(--line);box-shadow:0 22px 48px -20px rgba(11,31,58,.28);
      padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);
      transition:opacity .18s,transform .18s,visibility .18s;}
    /* Without script the menu still works on hover and on keyboard focus.
   With script (html.js-nav) a single class decides, so hover-to-open and
   click-to-toggle can share one menu without fighting each other: a click
   cannot dismiss a :hover state, which is why the panel used to feel
   click-only once it had been clicked. */
html:not(.js-nav) .nav-item:hover > .mega,
html:not(.js-nav) .nav-item:focus-within > .mega{opacity:1;visibility:visible;transform:none;}
.nav-item.is-open > .mega{opacity:1;visibility:visible;transform:none;}
    /* Bridges the 10px gap so the pointer can travel from trigger to panel
       without passing over dead space and closing it. */
    .nav-item.has-menu::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px;}
    .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
    .mega-link{display:flex;gap:10px;padding:9px 11px;align-items:flex-start;transition:background .14s;min-width:0;}
    .mega-link:hover{background:var(--gold-soft);}
    .mega-link.on{background:var(--pri-soft);}
    .mega-link .mt{display:block;font-size:12.5px;font-weight:600;color:var(--tx);line-height:1.3;}
    .mega-link .md{display:block;font-size:11px;font-weight:450;color:var(--tx2);line-height:1.4;margin-top:2px;}
    .mega-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;
      padding:9px 11px;background:var(--bg);border-top:1px solid var(--line);font-size:11.5px;
      font-weight:500;color:var(--tx2);}

    /* The two-label button is gone.
       It stacked a short resting label and a longer hover label in one grid
       cell, which meant the button was always sized by the text nobody could
       see: "Apply Now" rendered 341px wide because "Apply on the E-Portal"
       was hiding underneath it, while a genuinely longer visible label sat at
       258px. Buttons now size to the words they actually show. */

    /* Account control
       Signing in used to displace the two calls to action with account links.
       That is backwards: the actions are what the header is for, and they
       still apply to someone who already has an account. A student can hire,
       a client can enrol. Account navigation is secondary, so it collapses to
       an avatar and gets out of the way.

       (Phrased without quoting the button labels: this comment ships inside
       the inline <style> block, so any label named here would appear in the
       page source for every visitor, including logged-out ones.) */
    .acct{position:relative;display:flex;align-items:center;}
    .acct-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
      font-family:inherit;padding:3px;color:var(--tx2);transition:color .15s;}
    .acct-trigger:hover{color:var(--tx);}
    .acct-av{width:28px;height:28px;flex-shrink:0;background:var(--pri);color:var(--gold);
      display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.02em;}
    .acct-trigger .caret{font-size:9px;transition:transform .2s;}
    .acct:hover .caret,.acct:focus-within .caret{transform:rotate(180deg);}
    .acct-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:70;min-width:210px;
      background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 44px -18px rgba(11,31,58,.28);
      padding:5px;opacity:0;visibility:hidden;transform:translateY(-5px);
      transition:opacity .16s,transform .16s,visibility .16s;}
    .acct:hover > .acct-menu,.acct:focus-within > .acct-menu{opacity:1;visibility:visible;transform:none;}
    /* Bridges the gap so the pointer can reach the menu without closing it. */
    .acct::after{content:'';position:absolute;top:100%;right:0;width:100%;height:11px;}
    .acct-menu a,.acct-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
      font-family:inherit;font-size:12.5px;font-weight:500;color:var(--tx);background:none;border:none;
      text-align:left;cursor:pointer;transition:background .14s;}
    .acct-menu a:hover,.acct-menu button:hover{background:var(--gold-soft);}
    .acct-menu i{width:14px;color:var(--tx3);font-size:11px;}
    .acct-menu hr{border:none;border-top:1px solid var(--line);margin:4px 0;}
    .acct-menu .danger:hover{color:var(--bad,#b91c1c);}
    .acct-who{padding:8px 10px 6px;border-bottom:1px solid var(--line);margin-bottom:4px;}
    .acct-who .nm{display:block;font-size:12.5px;font-weight:600;color:var(--tx);}
    .acct-who .rl{display:block;font-size:11px;font-weight:450;color:var(--tx2);margin-top:1px;}

    /* Mobile sheet */
    .mm-group{border-bottom:1px solid var(--line);}
    .mm-group > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
      font-size:17px;font-weight:600;color:var(--tx);padding:13px 0;cursor:pointer;list-style:none;}
    .mm-group > summary::-webkit-details-marker{display:none;}
    .mm-group > summary .chev{font-size:12px;color:var(--tx3);transition:transform .2s;}
    .mm-group[open] > summary .chev{transform:rotate(180deg);}
    .mm-sub{padding:0 0 10px 2px;display:flex;flex-direction:column;}
    .mm-sub a{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--tx2);
      padding:9px 0;border:none;}
    .mm-sub a.on{color:var(--pri);font-weight:600;}
    .mmenu .mm-actions{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
    .mmenu .mm-actions .btn{width:100%;justify-content:center;}

    /*
       Density

       Deliberately tight. Space is spent where it separates ideas and taken
       back everywhere else, so a page carries more without feeling fuller.
        */
    section{padding:40px 0;}
    .sec-head{margin-bottom:26px;}
    .grid{gap:12px;}
    .card{padding:16px 18px;}
    .card .ic{width:32px;height:32px;font-size:14px;margin-bottom:10px;}
    .card h3{font-size:14px;margin-bottom:4px;}
    .card p{font-size:13px;font-weight:450;color:var(--tx2);line-height:1.55;}
    .proj-card{padding:18px;gap:8px;}

    /* Blended bands
       Sections used to meet at a hard 1px rule, which chops the page into
       stacked boxes. They now bleed into one another: the border is replaced
       by a short gradient in the neighbouring surface colour, so the eye
       reads one continuous page with changes of light in it. */
    .band-surface{border-top:none;border-bottom:none;position:relative;}
    .band-surface::before,.band-surface::after{content:'';position:absolute;left:0;right:0;height:26px;pointer-events:none;}
    .band-surface::before{top:-26px;background:linear-gradient(to bottom,transparent,var(--surface));}
    .band-surface::after{bottom:-26px;background:linear-gradient(to top,transparent,var(--surface));}
    .band-deep{margin-top:26px;}
    .band-deep::before{}
    /* The dark band still needs a hard edge. A gradient into navy would read
       as a printing fault rather than a transition. It gets a gold hairline
       instead, which announces the change deliberately. */
    .band-deep{border-top:2px solid var(--gold);}

    /* Links that reward pointing at them */
    .link,a.link{position:relative;display:inline-flex;align-items:center;gap:6px;}
    .link::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
      transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.22,.61,.36,1);}
    a.link:hover::after,*:hover > .link::after{transform:scaleX(1);}
    .link i{transition:transform .26s cubic-bezier(.22,.61,.36,1);}
    a.link:hover i,*:hover > .link i{transform:translateX(4px);}

    /* Buttons get the same offset plate the cards use, so a call to action is
       visibly the same family of object as everything else on the page.

       Drawn with box-shadow, not a pseudo-element. A ::before at z-index:-1
       paints *above* its own element's background. That is the CSS painting
       order, negative-z-index descendants come after the background box, so
       on a transparent ghost button the plate covered the button face and the
       navy label vanished into it. A shadow is painted entirely outside the
       border box and can never touch the text.

       Each plate is the contrasting ink for the button it sits under, so the
       offset stays visible whichever variant and whichever band it is on. */
    .btn{transition:background .15s,border-color .15s,color .15s,box-shadow .2s cubic-bezier(.22,.61,.36,1);}
    .btn:hover{box-shadow:5px 5px 0 var(--gold);}
    .btn.gold:hover{box-shadow:5px 5px 0 var(--pri);}
    .btn.ghost:hover{box-shadow:5px 5px 0 var(--pri);}
    /* On the navy band a navy plate would be invisible. */
    .band-deep .btn.gold:hover{box-shadow:5px 5px 0 rgba(255,255,255,.32);}
    .btn i{transition:transform .22s;}
    .btn:hover i{transform:translateX(3px);}

    /* Segmented sub-navigation
       Seven detached grey pills were the main wayfinding for the whole
       about-family and the least designed thing on the site. One connected
       rail instead, sitting on the section rule so it belongs to the content
       below rather than floating above it. */
    .subnav{display:flex;flex-wrap:wrap;gap:0;margin:14px 0 0;border-bottom:1px solid var(--line);}
    .subnav a{position:relative;font-size:13px;font-weight:600;color:var(--tx2);padding:9px 14px;
      border:none;background:none;transition:color .16s;}
    .subnav a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);
      transform:scaleX(0);transform-origin:center;transition:transform .24s cubic-bezier(.22,.61,.36,1);}
    .subnav a:hover{color:var(--tx);}
    .subnav a:hover::after{transform:scaleX(.4);}
    .subnav a.on{color:var(--pri);font-weight:600;background:none;}
    .subnav a.on::after{transform:scaleX(1);}

    /* Page hero: asymmetric, with the section word set as a watermark */
    /* An oversized ghost of the page name, cropped by the section. Gives the
       thin repeated header a piece of typography to hang on without adding
       height, which is what a banner image would have cost. */
    .hero-mark{position:absolute;right:-10px;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;
      font-size:104px;font-weight:700;letter-spacing:-.05em;line-height:1;
      color:var(--pri);opacity:.045;white-space:nowrap;user-select:none;}
    @media(max-width:760px){.hero-mark{display:none;}}

    /* Skills: a capability matrix, not a wall of chips
       Laid out in CSS columns so the groups pack tight and fill the whole
       measure, the old grid stopped three quarters across and left the right
       edge dead. */
    .skill-cols{columns:3;column-gap:26px;}
    .skill-group{break-inside:avoid;margin:0 0 20px;display:block;}
    .skill-group h4{display:flex;align-items:baseline;gap:8px;font-size:10.5px;font-weight:700;
      text-transform:uppercase;letter-spacing:.07em;color:var(--gold-d);margin-bottom:8px;}
    .skill-group h4 .n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--tx3);font-weight:500;}
    .skill-group h4::after{content:'';flex:1;height:1px;background:var(--line-2);}
    .skill-group ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px;}
    .skill-group li{font-size:12px;font-weight:500;line-height:1.2;color:var(--tx);background:var(--surface);
      padding:5px 8px;border:1px solid var(--line);transition:border-color .15s,color .15s,background .15s;}
    .skill-group li:hover{border-color:var(--gold);color:var(--pri);background:var(--gold-soft);}
    /* The few marked Expert in the owner's own data lead their group and carry
       the accent. A skills page whose items all look identical tells a reader
       nothing about what this person is actually best at. */
    .skill-group li.core{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600;}
    .skill-group li.core .lv{color:var(--gold);font-size:9.5px;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;margin-left:5px;}
    .skill-group li.core:hover{background:var(--pri-d);border-color:var(--pri-d);color:#fff;}
    @media(max-width:900px){.skill-cols{columns:2;}}
    @media(max-width:600px){.skill-cols{columns:1;}}

    /* Numbered service cards */
    .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
    .svc{position:relative;isolation:isolate;border:1px solid var(--line);background:var(--surface);
      padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;transition:border-color .18s,transform .18s;}
    .svc:hover{border-color:var(--gold);transform:translateY(-2px);}
    .svc::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--gold-soft);border:1px solid var(--line);
      opacity:0;transition:opacity .2s,transform .2s;}
    .svc:hover::before{opacity:1;transform:translate(6px,6px);}
    .svc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
    .svc .ic{width:30px;height:30px;background:var(--gold-soft);color:var(--gold-d);display:flex;
      align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
    .svc .no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;
      color:var(--line-2);letter-spacing:.06em;}
    .svc h3{font-size:14px;font-weight:600;line-height:1.3;}
    .svc p{font-size:13px;font-weight:450;color:var(--tx2);line-height:1.55;}

    /* Timeline with a rail you can actually see */
    /* The rail position is derived from the same tokens the grid uses. Written
       as a literal it drifts the moment either column changes, which it did:
       the dots sat 17px off the line because the rail was placed at the column
       edge and the dots at the content edge, a gap away. */
    .tl{--tl-w:118px;--tl-gap:22px;
      position:relative;display:grid;grid-template-columns:var(--tl-w) 1fr;gap:0 var(--tl-gap);}
    /* Drawn once for the whole column rather than per row, so it reads as one
       continuous line instead of a stack of separate borders. */
    .tl::before{content:'';position:absolute;left:calc(var(--tl-w) + var(--tl-gap));top:6px;bottom:6px;
      width:1px;background:var(--line-2);}
    .tl-row{display:contents;}
    .tl-when{grid-column:1;text-align:right;padding:0 0 22px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
      font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--tx3);white-space:nowrap;padding-top:1px;}
    .tl-what{grid-column:2;position:relative;padding:0 0 22px 20px;}
    .tl-what::before{content:'';position:absolute;left:-4.5px;top:4px;width:9px;height:9px;background:var(--gold);
      box-shadow:0 0 0 3px var(--bg);}
    .tl-row:hover .tl-what::before{background:var(--pri);}
    .tl-what h3{font-size:14.5px;font-weight:600;line-height:1.3;}
    .tl-what .org{font-size:12.5px;color:var(--pri);font-weight:500;margin:2px 0 5px;}
    .tl-what p{font-size:13px;font-weight:450;color:var(--tx2);line-height:1.6;}
    @media(max-width:640px){
      .tl{grid-template-columns:1fr;gap:0;}
      .tl::before{left:4px;}
      .tl-when{grid-column:1;text-align:left;padding:0 0 4px 20px;}
      .tl-what{grid-column:1;padding-left:20px;}
      .tl-what::before{left:0;}
    }

    /*
       Surface system

       The site was five identical stacks of centred heading + white boxes on
       flat cream. The fix isn't ornament, it's giving each band its own
       surface, and drawing them the way an engineer draws: ruled grids,
       hairlines, indexed sections. All of it is generated in CSS, so the whole
       system costs no image requests and stays crisp at any density.
        */

    /* Ruled paper. Two hairline grids at different scales, so the texture reads
       as drafting rather than as a repeating tile. */
    .tex-grid{position:relative;isolation:isolate;}
    .tex-grid::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
      background-image:
        linear-gradient(var(--line) 1px,transparent 1px),
        linear-gradient(90deg,var(--line) 1px,transparent 1px),
        linear-gradient(rgba(231,227,216,.5) 1px,transparent 1px),
        linear-gradient(90deg,rgba(231,227,216,.5) 1px,transparent 1px);
      background-size:96px 96px,96px 96px,24px 24px,24px 24px;
      background-position:-1px -1px;
      /* Fades out at the edges so the grid never collides with the section rule. */
      -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 100%);
      mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 100%);
      opacity:.75;}

    /* A single warm light source, low and off-centre. Gives a flat band depth
       without a gradient that announces itself. */
    .tex-glow{position:relative;isolation:isolate;}
    .tex-glow::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
      background:
        radial-gradient(760px 320px at 78% 0%,rgba(184,147,63,.13),transparent 62%),
        radial-gradient(620px 280px at 8% 100%,rgba(11,31,58,.07),transparent 60%);}


    /* WhatsApp launcher
       z-index 45: below the mobile action bar (50), the menu (55) and the
       header (60), so it can never sit on top of Buy, Hire or an open menu. */
    .wa{position:fixed;right:18px;bottom:18px;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
    /* A pill, not a bare circle. The icon alone said "WhatsApp" and nothing
       about who the queue is for, which sent enrolled students to a group
       staffed by Admissions. The label is part of the control, not a tooltip,
       because a tooltip does not exist on a phone. */
    .wa-btn{min-height:54px;border-radius:var(--r-pill);border:0;cursor:pointer;
      background:#25D366;color:#fff;font-size:24px;line-height:1;
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:0 20px 0 17px;text-decoration:none;
      box-shadow:0 6px 20px rgba(37,211,102,.42);transition:transform .15s,box-shadow .15s;}
    .wa-label{font-size:14.5px;font-weight:600;letter-spacing:.005em;white-space:nowrap;}
    .wa-btn:hover{transform:scale(1.06);box-shadow:0 8px 26px rgba(37,211,102,.52);}
    .wa-btn:focus-visible{outline:3px solid var(--pri);outline-offset:3px;}
    /* Coming soon */
    .c-price.soon,.buy-box .price.soon{background:var(--pri);color:#fff;}
    .buy-box .price.soon{font-size:17px;letter-spacing:.01em;}
    .notify{margin-top:4px;}
    .notify-lead{font-size:12.5px;color:var(--tx2);line-height:1.55;margin-bottom:11px;}
    .notify-form input[type=text],.notify-form input[type=tel],.notify-form input[type=email]{
      width:100%;padding:11px 12px;margin-bottom:8px;font:inherit;font-size:13px;
      border:1px solid var(--line-2);background:var(--surface);color:var(--tx);}
    .notify-form input:focus{outline:2px solid var(--pri);outline-offset:-1px;}
    .notify-form input[aria-invalid]{border-color:#b91c1c;}
    .notify-err{display:block;font-size:11.5px;color:#b91c1c;margin:-4px 0 8px;}
    .notify-fine{font-size:11px;color:var(--tx3);text-align:center;margin-top:9px;}
    .notify-done{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;
      padding:12px;background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok);}

    @media (max-width: 900px) {
      /* Clear of the mobile action bar, which is where Buy and Hire live. */
      .wa{right:14px;bottom:calc(72px + env(safe-area-inset-bottom, 0px));}
      /* Narrower phones keep the label — that is the whole point of it — but
         give back the padding and a little type size to stay clear of the
         action bar beneath. */
      .wa-btn{min-height:48px;font-size:21px;padding:0 16px 0 14px;gap:8px;}
      .wa-label{font-size:13.5px;}
    }

    /* Deep band, used once or twice per page to break the cream monotony. */
    .band-deep{background:var(--pri);color:#fff;border-top:none;border-bottom:none;position:relative;isolation:isolate;}
    .band-deep::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
      background-size:56px 56px,56px 56px;
      -webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 20%,transparent 100%);
      mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 20%,transparent 100%);}
    .band-deep::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
      background:radial-gradient(700px 300px at 82% 10%,rgba(184,147,63,.20),transparent 60%);}
    .band-deep h2,.band-deep h3{color:#fff;}
    .band-deep .lead,.band-deep p{color:rgba(255,255,255,.68);}
    .band-deep .eyebrow{color:var(--gold);}

    /* Indexed section headers
       "01, SELECTED WORK". Numbering the sections is how a schematic or a
       syllabus is laid out, which is exactly what this person does for a
       living, and it gives the eye an anchor other than another centred
       heading. */
    .sec-head.left{text-align:left;margin-left:0;max-width:640px;}

    /* Cards: the offset-plate motif from the hero, made interactive */
    .proj-card{position:relative;isolation:isolate;}
    .proj-card::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--gold-soft);
      border:1px solid var(--line);opacity:0;transition:opacity .22s,transform .22s;}
    .proj-card:hover::before{opacity:1;transform:translate(7px,7px);}
    /* The arrow leans into the direction it points on hover, a small reward
       for pointing at the thing, and the only motion on the card that isn't
       the plate. */
    .proj-card .link i{transition:transform .22s;}
    .proj-card:hover .link i{transform:translateX(4px);}

    /* Duotone course covers
       The uploaded cover art is loud stock rendering in reds that fight the
       navy-and-gold palette and pull every eye on the page. Rather than
       discard the owner's images, they're desaturated and re-tinted into the
       brand's own light, and the full original colour returns on hover, so
       the artwork still does its job when someone is actually looking at it. */
    .course-cover{position:relative;overflow:hidden;}
    .course-cover img{transition:filter .35s ease,transform .5s ease;filter:grayscale(1) contrast(1.04) brightness(1.04);}
    .course-cover::after{content:'';position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(150deg,var(--pri) 8%,rgba(11,31,58,.5) 58%,rgba(184,147,63,.6) 100%);
      mix-blend-mode:color;transition:opacity .35s ease;}
    .course-cover::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
      background:linear-gradient(to top,rgba(6,15,31,.28),transparent 58%);}
    .proj-card:hover .course-cover img{filter:none;transform:scale(1.03);}
    .proj-card:hover .course-cover::after{opacity:0;}
    /* The catalogue reuses a handful of stock renders, so an identical tint on
       every card turns the grid into one repeated rectangle. Rotating the light
       across the row gives each card its own value without touching the files. */
    .grid > .proj-card:nth-child(3n+2) .course-cover::after{
      background:linear-gradient(150deg,rgba(184,147,63,.55) 0%,rgba(11,31,58,.5) 45%,var(--pri) 100%);}
    .grid > .proj-card:nth-child(3n+3) .course-cover::after{
      background:linear-gradient(115deg,var(--pri) 20%,rgba(125,98,40,.6) 100%);}

    /* Work cards with a visual, not just a text block */
    .work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px;}
    .work-card{position:relative;isolation:isolate;border:1px solid var(--line);background:var(--surface);
      display:flex;flex-direction:column;transition:border-color .2s,transform .2s;}
    .work-card:hover{border-color:var(--gold);transform:translateY(-3px);}
    .work-card::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--gold-soft);
      border:1px solid var(--line);opacity:0;transition:opacity .22s,transform .22s;}
    .work-card:hover::before{opacity:1;transform:translate(8px,8px);}
    .work-shot{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--surface-2);}
    .work-shot .ph{height:100%;border:none;}
    .work-shot img{width:100%;height:100%;object-fit:cover;}
    /* The project number sits on the artwork like a plate on a machine. */
    .work-no{position:absolute;z-index:2;top:0;left:0;background:var(--pri);color:var(--gold);
      font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;
      letter-spacing:.08em;padding:5px 9px;}
    .work-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1;}
    .work-body h3{font-size:15.5px;font-weight:600;line-height:1.35;}
    .work-body p{font-size:13px;font-weight:450;color:var(--tx2);line-height:1.6;}
    .work-body .link{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--pri);padding-top:4px;}
    .work-body .link i{transition:transform .22s;}
    .work-card:hover .work-body .link i{transform:translateX(4px);}

    /* Vertical section rail (the about-family)
       The horizontal tab strip only showed where you were; every other section
       was a word you had to read and click to find out about. As a rail down
       the side, all of them stay on screen beside the content. You can see
       what is next without going there, which is the whole point of a
       sub-navigation. It sticks, so it is still there after scrolling. */
    .rail-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:34px;align-items:start;}
    .rail{position:sticky;top:calc(var(--hd) + 14px);display:flex;flex-direction:column;}
    .rail-h{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);
      padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:4px;}
    .rail a{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;
      font-size:13px;font-weight:500;color:var(--tx2);border-left:2px solid transparent;transition:.15s;}
    .rail a .ri{width:16px;text-align:center;font-size:11.5px;color:var(--tx3);transition:color .15s;}
    .rail a:hover{background:var(--surface);color:var(--tx);}
    .rail a:hover .ri{color:var(--gold-d);}
    .rail a.on{background:var(--surface);border-left-color:var(--gold);color:var(--pri);font-weight:600;}
    .rail a.on .ri{color:var(--gold-d);}
    /* A one-line description of each destination, so the rail answers "what is
       in there" rather than only "what is it called". Hidden on the active
       item, where the page itself is already the answer. */
    .rail a .rd{display:block;font-size:10.5px;font-weight:450;color:var(--tx3);line-height:1.35;margin-top:1px;}
    .rail a.on .rd{display:none;}
    /* Chapter scaffolding, shared by every page in the About rail so they
       cannot drift apart the way work/ and services/ did. */
    .ch-sec{margin-top:34px;}
    .ch-sec:first-child{margin-top:0;}
    .ch-h{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:700;letter-spacing:.14em;
      text-transform:uppercase;color:var(--pri);margin-bottom:14px;}
    .ch-h::after{content:'';flex:1;height:1px;background:var(--line-2);}
    .ch-end{display:flex;gap:9px;flex-wrap:wrap;align-items:center;
      margin-top:34px;padding-top:20px;border-top:2px solid var(--pri);}
    .ch-lead{flex:1;min-width:170px;font-size:12.5px;color:var(--tx3);}

    .rail-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}

    /* The action bar
       On a phone, every page worth acting on is a long scroll, and the thing
       you would act on sits at one end of it. This pins that action to the
       bottom of the window so it is never more than a thumb away: hire and
       the next chapter on the About story, the price and the buy button on a
       course or a product, the total on a basket.

       Never on desktop, where those controls are already on screen. */
    .act-bar{display:none;}

    @media(max-width:900px){
      .rail-layout{grid-template-columns:1fr;gap:0;}

      /* The rail is gone here, not turned into a scrolling strip. A strip
         that has to be dragged sideways to reveal half its items is a control
         you have to work out before it tells you anything, and the bar below
         already answers the only question it was answering. Every chapter is
         still one tap away in the header menu and the footer. */
      .rail{display:none;}

      /* Under the menu (55) and the header (60), so an open menu covers it
         rather than having a stray pair of buttons floating over the top. */
      .act-bar{display:flex;align-items:center;gap:8px;
        position:fixed;left:0;right:0;bottom:0;z-index:50;
        padding:9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
        background:var(--surface);border-top:1px solid var(--line);
        box-shadow:0 -6px 20px rgba(11,31,58,.10);}
      .act-bar .btn{flex:1 1 0;min-width:0;justify-content:center;font-size:13px;padding:12px 10px;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      /* A POST action is a form, and a form has to stretch the way a link
         does or the buttons beside it come out different sizes. */
      .act-bar form{flex:1 1 0;min-width:0;display:flex;margin:0;}
      .act-bar form .btn{flex:1 1 auto;}
      /* A secondary action that is an icon: the CV's download, a basket. */
      .act-bar .btn.sq{flex:0 0 46px;padding:12px 0;}

      /* What the action costs, or what it is worth, beside the button that
         does it. A price a thumb away from Buy is the whole point. */
      .act-note{flex:0 0 auto;min-width:0;line-height:1.2;padding-left:2px;}
      .act-note strong{display:block;font-size:14.5px;font-weight:700;color:var(--pri);white-space:nowrap;}
      .act-note strong.free{color:var(--gold-d);}
      .act-note span{display:block;font-size:9px;font-weight:600;letter-spacing:.04em;
        text-transform:uppercase;color:var(--tx3);white-space:nowrap;}

      body.has-act-bar,body:has(.act-bar){padding-bottom:78px;}

      /* One set of buttons, not two. The line above them stays. It is the
         only place that says what the next chapter actually contains. */
      .ch-end .btn{display:none;}
      .ch-end{margin-top:26px;padding-top:14px;}
      .ch-lead{min-width:0;}

      /* The footer is a site-wide index. At the end of a chapter it buries
         the two actions that chapter was leading to under six columns of
         links, and those two are already pinned to the bottom of the
         window. Chapters only; everywhere else it still belongs. */
      body.about-chapter footer{display:none;}
    }

    /* Curriculum rows
       A previewable lesson looks openable; a locked one looks locked. That is
       the whole job of this list before someone has paid. */
    .lesson-row{gap:12px;}
    .lesson-name{display:flex;align-items:center;gap:9px;min-width:0;}
    .lesson-ico{font-size:12px;color:var(--tx3);flex-shrink:0;}
    .lesson-side{display:flex;align-items:center;gap:10px;flex-shrink:0;}
    .lesson-row.previewable{cursor:pointer;transition:background .14s;}
    .lesson-row.previewable:hover{background:var(--gold-soft);}
    .lesson-row.previewable .lesson-ico{color:var(--gold-d);}
    .preview-open{display:inline-flex;align-items:center;gap:5px;background:var(--pri);color:#fff;
      cursor:pointer;transition:background .14s;}
    .preview-open i{font-size:9px;}
    .preview-open:hover{background:var(--gold);color:#231a05;}

    /* Preview player */
    .pv{position:fixed;inset:0;z-index:200;background:rgba(6,15,31,.9);
      display:flex;align-items:center;justify-content:center;padding:24px;}
    .pv[hidden]{display:none;}
    .pv-panel{width:min(940px,100%);max-height:calc(100vh - 48px);background:var(--surface);
      border:1px solid var(--line-2);display:flex;flex-direction:column;overflow:hidden;}
    .pv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
      padding:14px 18px;border-bottom:1px solid var(--line);}
    .pv-eyebrow{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);}
    .pv-title{font-size:16px;font-weight:600;margin-top:3px;line-height:1.3;}
    .pv-x{border:none;background:none;color:var(--tx2);cursor:pointer;font-size:17px;
      width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .pv-x:hover{color:var(--pri);background:var(--surface-2);}
    .pv-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
    .pv-stage{background:#0b1f3a;aspect-ratio:16/9;width:100%;}
    .pv-stage iframe,.pv-stage video{width:100%;height:100%;border:0;display:block;}
    .pv-text{padding:18px;font-size:13.5px;font-weight:450;color:var(--tx);line-height:1.7;}
    .pv-text h2{font-size:17px;font-weight:600;margin:1.2em 0 .4em;color:var(--pri);}
    .pv-text h3{font-size:14.5px;font-weight:600;margin:1em 0 .3em;}
    .pv-text p{margin-bottom:.85em;}
    .pv-text ul,.pv-text ol{margin:0 0 .85em 1.3em;list-style:revert;}
    .pv-text code{background:var(--surface-2);padding:2px 5px;font-size:.9em;
      font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
    .pv-text pre{background:#0d2237;color:#eef1f6;padding:12px 14px;overflow-x:auto;margin-bottom:.85em;}
    .pv-text pre code{background:none;padding:0;color:inherit;}
    .pv-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
      padding:12px 18px;border-top:1px solid var(--line);background:var(--bg);}
    .pv-nav{display:flex;align-items:center;gap:10px;}
    .pv-count{font-size:11.5px;font-weight:600;color:var(--tx3);white-space:nowrap;}
    .pv-cta{display:flex;align-items:center;gap:12px;}
    .pv-price{font-size:15px;font-weight:700;color:var(--pri);}
    @media(max-width:640px){
      .pv{padding:0;}
      .pv-panel{max-height:100vh;height:100%;border:none;}
      .pv-foot{flex-direction:column;align-items:stretch;gap:10px;}
      .pv-nav{justify-content:space-between;}
      .pv-cta{justify-content:space-between;}
    }

    /* Course cards
       Level, category, length and price all sit on the cover. They are what
       people scan by, and the artwork was already occupying that space, so
       putting them there costs no height at all, where a row of chips under
       the image cost a line each. */
    .course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
    .c-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
      background:var(--surface);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;}
    .c-card:hover,.c-card:focus-within{border-color:var(--gold);transform:translateY(-3px);
      box-shadow:0 18px 34px -22px rgba(11,31,58,.4);}

    .c-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--pri);}
    /* The covers are commissioned two-ink artwork in the brand's own navy and
       gold. Desaturating them at rest and restoring colour on hover made the
       card's own art look like a rollover effect, and hid the thing the
       artwork was made to show. They now read as drawn, always. */
    .c-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease;}
    /* A scrim at the foot only, so the lesson count and price stay legible
       over a light cover. No tint over the artwork itself. */
    .c-media::before{content:'';position:absolute;inset:auto 0 0 0;height:46%;z-index:1;pointer-events:none;
      background:linear-gradient(to bottom,transparent,rgba(6,15,31,.58));}
    .c-card:hover .c-media img{transform:scale(1.04);}
    .c-media-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      color:var(--gold);font-size:30px;}

    /* Currency switch. Two states, one visibly chosen, a segmented control
       rather than a dropdown, because there are only ever two answers. */
    .cur-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
    .cur-switch{display:inline-flex;border:1px solid var(--line-2);background:var(--surface);margin:0;}
    .cur-opt{padding:7px 14px;border:0;background:none;cursor:pointer;
      font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--tx3);
      transition:background .15s,color .15s;}
    .cur-opt:hover{color:var(--tx);background:var(--surface-2,#f2f0ea);}
    .cur-opt.on{background:var(--pri);color:#fff;}
    .cur-opt.on:hover{background:var(--pri);color:#fff;}
    .cur-note{font-size:11.5px;color:var(--tx3);}

    /* Pagination that states where you are before offering to move you. */
    .pager{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:14px;}
    .pager-where{font-size:12.5px;color:var(--tx3);margin:0;}
    .pager-where b{color:var(--tx);font-weight:600;}
    .pager-sep{opacity:.5;margin:0 4px;}

    .pg{display:flex;align-items:center;gap:6px;}
    .pg-n,.pg-step{display:inline-flex;align-items:center;justify-content:center;
      min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line);background:var(--surface);
      font-size:12.5px;font-weight:600;color:var(--tx2);transition:border-color .15s,color .15s,background .15s;}
    .pg-n:hover,.pg-step:hover{border-color:var(--gold);color:var(--gold-d);}
    .pg-n.is-on{background:var(--pri);border-color:var(--pri);color:#fff;}
    .pg-n.is-on:hover{background:var(--pri);color:#fff;}
    .pg-step.is-off{opacity:.34;cursor:not-allowed;}
    .pg-step.is-off:hover{border-color:var(--line);color:var(--tx2);}
    .pg-gap{padding:0 2px;color:var(--tx3);}
    .pg-step i{font-size:11px;}

    .c-facts{position:absolute;z-index:2;left:10px;bottom:9px;display:flex;gap:11px;
      font-size:11px;font-weight:600;color:rgba(255,255,255,.94);}
    .c-facts i{font-size:10px;opacity:.8;margin-right:3px;}
    .c-price{position:absolute;z-index:2;right:9px;bottom:9px;font-size:12.5px;font-weight:700;
      padding:4px 9px;background:var(--pri);color:#fff;}
    .c-price.free{background:var(--gold);color:#231a05;}

    .c-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;}
    .c-body h3{font-size:14.5px;font-weight:600;line-height:1.35;}
    .c-body h3 a:hover{color:var(--gold-d);}
    .c-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;font-weight:500;color:var(--tx3);margin:5px 0 0;}
    .c-rating{color:var(--gold-d);font-weight:700;}
    .c-rating i{font-size:10px;}
    .c-body > p{font-size:12.5px;font-weight:450;color:var(--tx2);line-height:1.55;margin-top:7px;}

    /* 0fr to 1fr: the grid animates the row's height, so the panel opens
       smoothly without a guessed max-height that breaks when the copy changes. */
    .c-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.22,.61,.36,1);}
    .c-more-inner{overflow:hidden;min-height:0;}
    .c-card:hover .c-more,.c-card:focus-within .c-more{grid-template-rows:1fr;}
    .c-more-h{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:var(--gold-d);margin:12px 0 5px;}
    .c-outcomes{list-style:none;display:flex;flex-direction:column;gap:3px;margin-bottom:11px;}
    .c-outcomes li{position:relative;padding-left:15px;font-size:11.5px;font-weight:450;
      color:var(--tx2);line-height:1.45;}
    .c-outcomes li::before{content:'\2713';position:absolute;left:0;color:var(--gold-d);font-weight:700;font-size:10px;}
    .c-cta{width:100%;justify-content:center;}

    @media(hover:none){
      /* No hover on touch, so the panel would be unreachable. It is simply
         always open. The card is taller, but nothing is hidden behind a
         gesture the device cannot make. */
      .c-more{grid-template-rows:1fr;}
      .c-outcomes{display:none;}          /* keep the card compact; the CTA is the point */
    }
    @media(prefers-reduced-motion:reduce){
      .c-more{transition:none;}
      .c-media img{transition:none;}
    }
    @media(max-width:420px){ .course-grid{grid-template-columns:1fr;} }

    /* Source code: a terminal, answering the browser frame above
       The work section frames screenshots in browser chrome to say "this is
       running". This frames the catalogue in a terminal to say "this is what
       is behind it". Each row is a real product and a real link. The window
       is the listing itself, not a picture of one. */
    .code-band{padding:44px 0;}
    .term{border:1px solid rgba(255,255,255,.14);background:rgba(6,15,31,.55);
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;}
    .term-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;
      background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.12);}
    .term-bar i{width:9px;height:9px;border-radius:50%;display:block;background:rgba(255,255,255,.22);}
    .term-bar i:nth-child(1){background:#ff5f57;}
    .term-bar i:nth-child(2){background:#febc2e;}
    .term-bar i:nth-child(3){background:#28c840;}
    .term-bar .path{margin-left:10px;font-size:11px;color:rgba(255,255,255,.42);letter-spacing:.02em;}
    .term-body{padding:14px 6px 12px;}
    .term-line{font-size:12px;color:rgba(255,255,255,.5);padding:2px 12px;}
    .term-line .p{color:var(--gold);font-weight:700;margin-right:6px;}
    /* Named for the terminal, not for "a caret". Two other components already
       use .caret for their chevron, and a bare .caret rule captured them both. */
    .term-caret{display:inline-block;width:7px;height:13px;background:var(--gold);vertical-align:-2px;}
    @media(prefers-reduced-motion:no-preference){
      .term-caret{animation:term-blink 1.1s steps(1) infinite;}
      @keyframes term-blink{0%,50%{opacity:1;}51%,100%{opacity:0;}}
    }
    .term-list{list-style:none;margin:6px 0;}
    .term-row{display:grid;grid-template-columns:96px 62px minmax(0,1fr) auto;align-items:center;gap:14px;
      padding:8px 12px;font-size:12.5px;color:rgba(255,255,255,.82);transition:background .14s,color .14s;}
    .term-row:hover{background:rgba(184,147,63,.14);color:#fff;}
    .term-row .perm{color:rgba(255,255,255,.3);font-size:11.5px;}
    .term-row .size{color:rgba(255,255,255,.5);font-size:11.5px;text-align:right;}
    .term-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .term-row:hover .name{text-decoration:underline;text-underline-offset:3px;}
    .term-row .price{color:var(--gold);font-weight:700;white-space:nowrap;}
    .code-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;}
    .code-note{font-size:11.5px;font-weight:450;color:rgba(255,255,255,.5);}
    @media(max-width:640px){
      .term-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;}
      .term-row .perm,.term-row .size{display:none;}   /* detail nobody reads on a phone */
    }

    /* Logo marquee
       Thirteen names in a static grid is a wall; moving slowly, it reads as a
       list that continues past the edge of the screen. Two identical tracks
       scroll as one and the animation resets after exactly one track width, so
       the loop is seamless with no script and no cloned-node bookkeeping. */
    .logos-band{padding:30px 0;overflow:hidden;}
    .marquee{position:relative;display:flex;width:max-content;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
    .marquee-track{display:flex;align-items:center;list-style:none;flex-shrink:0;}
    .marquee-item{display:flex;align-items:center;justify-content:center;
      padding:0 26px;height:56px;flex-shrink:0;}
    .marquee-item img{max-height:34px;width:auto;object-fit:contain;
      filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s;}
    .marquee-item:hover img{filter:none;opacity:1;}
    .marquee-item .wordmark{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
      color:var(--tx3);white-space:nowrap;transition:color .2s;}
    .marquee-item:hover .wordmark{color:var(--pri);}
    @media(prefers-reduced-motion:no-preference){
      .marquee-track{animation:marquee 46s linear infinite;}
      /* Pausing on hover is what makes it usable rather than decorative.
         A name you want to read stops moving when you point at it. */
      .marquee:hover .marquee-track{animation-play-state:paused;}
    }
    @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}

    /* Photo mosaic
       One frame given real size so the section has a subject, the rest packed
       around it. Six equal thumbnails read as filler. */
    .mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,138px);gap:8px;}
    .mosaic-cell{position:relative;overflow:hidden;border:1px solid var(--line);
      background:var(--surface-2);display:block;}
    .mosaic-cell.lead{grid-column:span 2;grid-row:span 2;}
    .mosaic-cell img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease;}
    .mosaic-cell:hover img{transform:scale(1.05);}
    .mosaic-cap{position:absolute;left:0;right:0;bottom:0;padding:20px 11px 9px;
      background:linear-gradient(to top,rgba(6,15,31,.88),transparent);
      opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;}
    .mosaic-cell:hover .mosaic-cap,.mosaic-cell:focus-visible .mosaic-cap{opacity:1;transform:none;}
    .mosaic-cap .t{display:block;font-size:12px;font-weight:600;color:#fff;line-height:1.3;}
    .mosaic-cap .c{display:none;font-size:10.5px;font-weight:450;color:rgba(255,255,255,.72);line-height:1.4;margin-top:2px;}
    .mosaic-cell.lead .mosaic-cap .c{display:block;}
    .mosaic-cell.lead .mosaic-cap .t{font-size:14px;}
    /* The closing tile is a door, not a photograph. It says how much more
       there is and where to go, which a seventh thumbnail would not. */
    .mosaic-more{display:flex;flex-direction:column;align-items:flex-start;
      justify-content:center;gap:2px;padding:16px 18px;border:1px solid var(--line);
      background:var(--surface);transition:border-color .18s,background .18s;}
    .mosaic-more:hover{border-color:var(--gold);background:var(--gold-soft);}
    .mosaic-more .n{font-size:26px;font-weight:200;color:var(--pri);line-height:1;}
    .mosaic-more .l{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);}
    .mosaic-more .link{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--pri);}
    @media(max-width:820px){
      .mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,120px);}
      .mosaic-cell.lead{grid-column:span 2;grid-row:span 2;}
      .mosaic-more{grid-column:span 2;}
    }

    /* About, on the home page
       Two columns of prose at a comfortable measure. Long-form lives on
       /about; this is the ten-second version. */
    .about-lead{max-width:900px;}
    .about-cols{columns:2;column-gap:34px;}
    .about-cols p{font-size:14px;font-weight:450;color:var(--tx2);line-height:1.7;margin-bottom:1em;
      break-inside:avoid;}
    .about-cols p:last-child{margin-bottom:0;}
    .about-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;}
    @media(max-width:720px){.about-cols{columns:1;}}

    /* References
       Named people with links out, rather than anonymous praise. A card works
       with or without a quote: until someone's own words are in hand, who they
       are and where to check is the substance. */
    .ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
    .ref{border:1px solid var(--line);background:var(--surface);padding:18px;margin:0;
      display:flex;flex-direction:column;gap:12px;transition:border-color .18s,transform .18s;}
    .ref:hover{border-color:var(--gold);transform:translateY(-2px);}
    .ref blockquote{font-size:13.5px;font-weight:450;line-height:1.65;color:var(--tx);}
    .ref blockquote::before{content:'\201C';display:block;font-size:32px;line-height:.7;color:var(--gold);font-weight:600;margin-bottom:4px;}
    .ref figcaption{display:flex;align-items:center;gap:11px;margin-top:auto;}
    /* Two classes deep on purpose: the .ph slot sets width:100% and is defined
       later in this sheet, so a single-class rule here loses and the avatar
       stretches the whole card. */
    .ref figcaption .ref-avatar{width:42px;height:42px;flex:0 0 42px;padding:6px;gap:0;}
    /* At 42px there is no room for the slot's guidance text. The icon alone
       reads as "a photo goes here", the words just become noise. */
    .ref figcaption .ref-avatar .ph-label,
    .ref figcaption .ref-avatar .ph-size,
    .ref figcaption .ref-avatar .ph-path{display:none;}
    .ref figcaption .ref-avatar i{font-size:14px;}
    .ref-who{min-width:0;flex:1;}
    .ref-who .nm{display:block;font-size:13px;font-weight:600;color:var(--tx);line-height:1.3;}
    .ref-who .rl{display:block;font-size:11.5px;font-weight:450;color:var(--tx2);line-height:1.4;margin-top:1px;}
    .ref-who .og{display:block;font-size:11px;font-weight:500;color:var(--gold-d);line-height:1.35;margin-top:1px;}
    .ref-link{font-size:12px;font-weight:600;color:var(--pri);align-self:flex-start;}

    /* Shop */
    .shop-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px;}
    .shop-filters .tb-input{width:auto;min-width:150px;border:1px solid var(--line-2);background:var(--surface);
      padding:9px 11px;font-family:var(--font);font-size:13px;color:var(--tx);}
    .shop-filters input[type=search]{flex:1;min-width:190px;}
    .shop-filters .tb-input:focus{outline:2px solid var(--gold);outline-offset:-1px;}

    .price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px;}
    .price{font-size:16px;font-weight:700;color:var(--pri);}
    .price.free{color:var(--gold-d);}
    .price-row .was{font-size:12.5px;color:var(--tx3);text-decoration:line-through;}
    .price-row .meta{font-size:11px;color:var(--tx3);margin-left:auto;}
    .buy-row{display:flex;gap:6px;margin-top:auto;padding-top:10px;}
    .buy-row .btn{flex:1;justify-content:center;}

    .product-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start;}
    .cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start;}
    .buy-box{border:1px solid var(--line);background:var(--surface);padding:20px;position:sticky;top:calc(var(--hd) + 14px);}
    .buy-box .includes{list-style:none;margin:0 0 16px;}
    .buy-box .includes li{position:relative;font-size:12.5px;font-weight:450;color:var(--tx2);padding:5px 0 5px 20px;}
    .buy-box .includes li::before{content:'\2713';position:absolute;left:0;color:var(--gold-d);font-weight:700;}
    .pay-icons{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 8px;}
    .pay-icons span{font-size:10.5px;color:var(--tx3);border:1px solid var(--line-2);padding:4px 8px;}
    .money-comfort{font-size:11px;color:var(--tx3);text-align:center;line-height:1.5;}
    @media(max-width:900px){
      .product-layout,.cart-layout{grid-template-columns:1fr;}
      .buy-box{position:static;order:-1;}
    }

    /* Basket indicator, only shown when there is something in it, so an empty
       basket never adds noise to the header. */
    .cart-link{position:relative;display:inline-flex;align-items:center;justify-content:center;
      width:34px;height:34px;color:var(--tx2);transition:color .15s;}
    .cart-link:hover{color:var(--gold-d);}
    .cart-count{position:absolute;top:-2px;right:-3px;min-width:16px;height:16px;padding:0 4px;
      background:var(--gold);color:var(--pri-d);font-size:9.5px;font-weight:700;
      display:flex;align-items:center;justify-content:center;}

    /* Gallery
       A column masonry rather than a grid of equal boxes: these photographs
       are a mix of portrait, landscape and square, and forcing them all into
       one crop throws away the framing of every shot that is not that shape. */
    .gal-filters{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);margin-bottom:16px;}
    .gal-filters a{position:relative;font-size:12.5px;font-weight:600;color:var(--tx2);padding:9px 14px;}
    .gal-filters a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);
      transform:scaleX(0);transition:transform .24s cubic-bezier(.22,.61,.36,1);}
    .gal-filters a:hover{color:var(--tx);} .gal-filters a:hover::after{transform:scaleX(.4);}
    .gal-filters a.on{color:var(--pri);} .gal-filters a.on::after{transform:scaleX(1);}
    .gal-filters .n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--tx3);margin-left:4px;}

    .gal-grid{columns:4;column-gap:10px;}
    .gal-item{break-inside:avoid;position:relative;display:block;width:100%;margin:0 0 10px;padding:0;
      border:1px solid var(--line);background:var(--surface-2);cursor:zoom-in;overflow:hidden;font-family:inherit;
      transition:border-color .18s,transform .18s;}
    .gal-item:hover{border-color:var(--gold);transform:translateY(-2px);}
    .gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s;}
    .gal-item:hover img{transform:scale(1.04);}
    .gal-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;text-align:left;
      background:linear-gradient(to top,rgba(6,15,31,.86),transparent);
      opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;}
    .gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{opacity:1;transform:none;}
    .gal-t{display:block;font-size:12.5px;font-weight:600;color:#fff;line-height:1.3;}
    .gal-c{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:var(--gold);margin-top:2px;}
    .gal-zoom{position:absolute;top:8px;right:8px;width:26px;height:26px;display:flex;align-items:center;
      justify-content:center;background:rgba(255,255,255,.92);color:var(--pri);font-size:10px;
      opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s;}
    .gal-item:hover .gal-zoom,.gal-item:focus-visible .gal-zoom{opacity:1;transform:none;}
    @media(max-width:1000px){.gal-grid{columns:3;}}
    @media(max-width:700px){.gal-grid{columns:2;}}
    @media(max-width:420px){.gal-grid{columns:1;}}

    /* Lightbox */
    .lb{position:fixed;inset:0;z-index:200;background:rgba(6,15,31,.94);
      display:flex;align-items:center;justify-content:center;padding:40px 56px;}
    .lb[hidden]{display:none;}
    .lb-stage{max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;
      align-items:center;gap:12px;margin:0;}
    .lb-img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;
      border:1px solid rgba(255,255,255,.12);background:#0b1f3a;}
    .lb-meta{text-align:center;max-width:620px;}
    .lb-count{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
      letter-spacing:.1em;color:var(--gold);margin-bottom:4px;}
    .lb-title{display:block;font-size:15px;font-weight:600;color:#fff;}
    .lb-caption{display:block;font-size:12.5px;font-weight:450;color:rgba(255,255,255,.66);line-height:1.55;margin-top:3px;}
    .lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
      color:#fff;cursor:pointer;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
      font-size:15px;transition:background .16s,border-color .16s;}
    .lb button:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);}
    .lb button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
    .lb-close{top:18px;right:18px;}
    .lb-nav.prev{left:12px;top:50%;transform:translateY(-50%);}
    .lb-nav.next{right:12px;top:50%;transform:translateY(-50%);}
    @media(max-width:640px){
      .lb{padding:52px 10px 20px;}
      .lb-nav.prev{left:6px;} .lb-nav.next{right:6px;}
      .lb button{width:38px;height:38px;}
      .lb-img{max-height:calc(100vh - 200px);}
    }

    /* Photo strips embedded in other pages */
    .photo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;}
    .photo-strip a{position:relative;display:block;overflow:hidden;border:1px solid var(--line);aspect-ratio:1;}
    .photo-strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
    .photo-strip a:hover img{transform:scale(1.05);}
    .photo-strip a::after{content:'';position:absolute;inset:0;background:var(--pri);opacity:0;transition:opacity .2s;}
    .photo-strip a:hover::after{opacity:.12;}

    /*
       Artwork slots
       A slot renders the real image once the file exists and a labelled
       drop-target until then, so the page can be reviewed and shipped before
       a single photo has been taken.
        */
    .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;
      padding:16px;background:
        repeating-linear-gradient(-45deg,var(--surface-2) 0 10px,transparent 10px 20px),var(--surface);
      border:1px dashed var(--line-2);color:var(--tx3);width:100%;}
    .ph i{font-size:20px;opacity:.5;}
    .ph-label{font-size:11.5px;font-weight:600;color:var(--tx2);line-height:1.35;}
    .ph-size{font-size:10.5px;letter-spacing:.04em;opacity:.8;}
    .ph-path{font-size:9.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.65;word-break:break-all;}
    .ph.round{border-radius:50%;}
    .ph-img{width:100%;height:100%;object-fit:cover;}
    .ph-img.round{border-radius:50%;}
    .ph-img.contain{object-fit:contain;}

    /* Hero: portrait beside the claim */
    .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;text-align:left;}
    .hero-grid .ctas{justify-content:flex-start;}
    .hero-grid .hero-copy p{margin-left:0;margin-right:0;}
    .hero-portrait{position:relative;max-width:340px;margin-left:auto;width:100%;}
    .hero-portrait .ph,.hero-portrait .ph-img{position:relative;z-index:1;}
    /* A soft gold plate offset behind the portrait, depth without a drop shadow,
       which would read as a different design language from the flat squares. */
    .hero-portrait::after{content:'';position:absolute;inset:14px -14px -14px 14px;background:var(--gold-soft);
      border:1px solid var(--line);z-index:0;}
    .hero-badge{position:absolute;z-index:2;left:-14px;bottom:26px;background:var(--surface);border:1px solid var(--line);
      padding:9px 13px;display:flex;align-items:center;gap:9px;max-width:210px;}
    .hero-badge .n{font-size:16px;font-weight:700;color:var(--pri);line-height:1;}
    .hero-badge .t{font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;line-height:1.3;}

    /* Trusted-by logo strip */
    /* Each cell draws its own hairline instead of the grid showing a background
       through its gaps: an odd number of logos leaves a blank cell on narrow
       screens, and a background-based grid renders that blank as a tinted block
       that reads like a broken image. */
    .logo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;}
    .logo-strip .cell{background:var(--surface);display:flex;align-items:center;justify-content:center;
      padding:18px 14px;min-height:78px;box-shadow:0 0 0 1px var(--line);}
    .logo-strip .cell .ph{border:none;background:none;padding:0;gap:2px;}
    .logo-strip .cell .ph i{font-size:14px;}
    /* Until a logo file lands, the organisation's name IS the mark. A wordmark
       reads as deliberate, where an empty grey box reads as broken. */
    .logo-strip .wordmark{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
      color:var(--tx2);text-align:center;line-height:1.35;}
    .logo-strip img{max-height:40px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s;}
    .logo-strip .cell:hover img{filter:none;opacity:1;}

    /* Systems showcase */
    .shot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
    .shot{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;
      transition:border-color .18s,transform .18s;}
    .shot:hover{border-color:var(--gold);transform:translateY(-3px);}
    /* The card around each screenshot. The window chrome that used to live
       here is now drawn inside the screenshot itself, where it belongs, one
       window bar per picture instead of one drawn over another. */
    .shot-frame{border-bottom:1px solid var(--line);background:var(--surface-2);}
    .shot-shot{aspect-ratio:16/10;overflow:hidden;background:var(--bg);}
    .shot-shot .ph{height:100%;border:none;}
    .shot-shot img{width:100%;height:100%;object-fit:cover;display:block;}
    .shot-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1;}
    .shot-body h3{font-size:15px;font-weight:600;}
    .shot-body p{font-size:13px;font-weight:450;color:var(--tx2);line-height:1.55;}
    .shot-body .link{font-size:12.5px;font-weight:600;color:var(--pri);}
    .shot-shot{display:block;}
    .shot-points{list-style:none;margin:2px 0 0;display:flex;flex-direction:column;gap:3px;}
    .shot-points li{position:relative;padding-left:14px;font-size:11.5px;font-weight:450;
      color:var(--tx2);line-height:1.45;}
    .shot-points li::before{content:'';position:absolute;left:2px;top:6px;width:4px;height:4px;background:var(--gold);}
    .shot-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;
      flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);}
    .shot-live{font-size:11.5px;font-weight:600;color:var(--gold-d);white-space:nowrap;}
    .shot-live:hover{color:var(--pri);}
    .shot-body h3 a:hover{color:var(--gold-d);}

    /* Testimonials */
    .quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
    .quote{border:1px solid var(--line);background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:14px;}
    .quote blockquote{font-size:14px;line-height:1.65;color:var(--tx);font-weight:300;}
    .quote blockquote::before{content:'\201C';display:block;font-size:38px;line-height:.7;color:var(--gold);
      font-weight:600;margin-bottom:6px;}
    .quote figcaption{display:flex;align-items:center;gap:11px;margin-top:auto;}
    .quote .avatar{width:40px;height:40px;flex-shrink:0;}
    .quote .who{min-width:0;}
    .quote .who .nm{font-size:12.5px;font-weight:600;}
    .quote .who .rl{font-size:11.5px;color:var(--tx3);line-height:1.35;}

    /*
       Motion
       Content is visible by default and animation only ever *removes* an
       offset, so a failed script or a blocked observer can never leave the
       page blank. Anyone who asked their system for less motion gets none.
        */
    @media(prefers-reduced-motion:no-preference){
      .js [data-rise]{opacity:0;transform:translateY(14px);
        transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
        transition-delay:var(--d,0ms);}
      .js [data-rise].in{opacity:1;transform:none;}
      .hero-portrait::after{transition:transform .8s cubic-bezier(.22,.61,.36,1);}
      .js .hero-portrait:hover::after{transform:translate(4px,4px);}
    }
    /* Without JS nothing is ever hidden, so no fallback rule is needed. */

    @media(max-width:860px){
      .hero-grid{grid-template-columns:1fr;gap:32px;text-align:center;}
      .hero-grid .ctas{justify-content:center;}
      .hero-grid .hero-copy p{margin-left:auto;margin-right:auto;}
      .hero-portrait{margin:0 auto;max-width:300px;}
      .hero-badge{left:auto;right:-8px;}
    }
    @media(max-width:560px){
      .hero-portrait::after{inset:10px -10px -10px 10px;}
      .hero-badge{position:static;margin-top:16px;max-width:none;justify-content:center;}
    }

    @media(max-width:820px){
      .nav{display:none;} .burger{display:inline-flex;}
      .hd-r .btn.desk,.hd-r .acct.desk,.hd-r .signin.desk{display:none;}
      h1,.hero h1{font-size:30px;} h2{font-size:20px;} .page-hero h1{font-size:25px;}
      .foot{grid-template-columns:1fr 1fr;}
      .foot-brand{grid-column:1 / -1;}
      .foot .blurb{max-width:none;}
      .contact-grid{grid-template-columns:1fr;}
    }
    @media(max-width:520px){
      /* Stays two columns. A single column turned the footer into a screen and
         a half of scrolling past links nobody was looking for. A footer that
         cannot be skimmed is not doing its job. */
      .foot{grid-template-columns:1fr 1fr;gap:20px 18px;}
      .foot a{font-size:12.5px;margin:5px 0;}
      .foot .foot-h{margin-bottom:8px;}
      .foot-bar{flex-direction:column;gap:4px;margin-top:22px;}
      section{padding:40px 0;}
    }
    /* Only below this does two columns start truncating link labels. */
    @media(max-width:340px){ .foot{grid-template-columns:1fr;} }
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}


/* =========================================================================
   MRU visual system — 2026 refresh
   =========================================================================
   Everything below is the current design language and deliberately comes
   last, so it settles anything the older rules above still assert.

   The idea in one line: heritage in the typography, modernity in the
   geometry. A serif display face carries the institution's age; a
   geometric sans carries its systems. Navy anchors, amber points, white
   breathes, and every corner is rounded to the same family of radii.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Type */

/* Playfair Display carries every headline. It is a high-contrast display
   serif: it wants slightly negative tracking at size, and it must never be
   asked to set body copy — its hairlines disappear below about 20px. Its
   only variable axis is `wght` (400-900), so there is no optical-size
   setting here; the previous face had one and it is deliberately gone. */
h1,h2,.display,blockquote.pull{
  font-family:var(--font-display);
  color:var(--pri);
  font-weight:600;
  letter-spacing:-.018em;
}
h1,.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;margin:0;}
h1 b,.hero h1 b{font-weight:800;color:var(--pri);}
h2{font-size:clamp(25px,3vw,38px);line-height:1.14;letter-spacing:-.02em;}
h3{font-family:var(--font);font-size:18px;font-weight:700;line-height:1.35;color:var(--pri);letter-spacing:-.01em;}
h4{font-family:var(--font);font-size:15px;font-weight:700;color:var(--pri);}

.lead{font-size:17.5px;font-weight:400;color:var(--tx2);line-height:1.75;}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-d);}


/* ------------------------------------------------------- 2. Page rhythm */

/* The page breathes at --s-8, not --s-7: sections carry 112px of air and a
   section's heading stands 64px clear of its content. One token change each,
   so every band moves together instead of being spaced by hand. */
section{padding:var(--s-8) 0;}
.sec-head{max-width:680px;margin:0 auto var(--s-6);}
.sec-head.left{text-align:left;margin-left:0;max-width:720px;}
.sec-head h2{margin-bottom:14px;}
.sec-head p{color:var(--tx2);font-size:16.5px;line-height:1.7;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-3);}

/* Bands alternate white and a barely-there tint. The old gradient bleeds
   and hard rules are gone: whitespace separates sections now. */
.band-surface{background:var(--surface);border:none;position:relative;}
.band-surface::before,.band-surface::after{display:none;}
.band-deep{background:linear-gradient(160deg,var(--pri) 0%,var(--pri-d) 55%,var(--pri-dd) 100%);
  color:#fff;border:none;margin:0;position:relative;isolation:isolate;overflow:hidden;}
.band-deep::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 380px at 88% -10%,rgba(201,162,39,.22),transparent 62%),
             radial-gradient(600px 300px at 5% 110%,rgba(255,255,255,.07),transparent 60%);
  -webkit-mask-image:none;mask-image:none;}
.band-deep::after{display:none;}
.band-deep h1,.band-deep h2,.band-deep h3,.band-deep h4{color:#fff;}
.band-deep .lead,.band-deep p{color:rgba(255,255,255,.74);}
.band-deep .eyebrow{color:var(--gold-l);}

/* The drafting textures are dialled right down: a hint of structure, not a
   pattern competing with the content. */
.tex-grid::before{opacity:.4;background-size:120px 120px,120px 120px,30px 30px,30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 90%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 90%);}
.tex-glow::after{background:radial-gradient(900px 420px at 82% -10%,rgba(1,39,112,.05),transparent 62%),
  radial-gradient(700px 340px at 4% 108%,rgba(201,162,39,.08),transparent 60%);}

/* --------------------------------------------------------- 3. Header */

/* Sticky, not fixed: the page no longer needs a padding shim, and the bar
   can carry a utility row that folds away as you scroll. */
header.site{position:sticky;top:0;left:auto;right:auto;z-index:60;height:auto;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .25s ease,border-color .25s ease;}
html.is-scrolled header.site{box-shadow:var(--sh-2);border-bottom-color:transparent;}
main{padding-top:0;}

/* Utility row: the doors people already have keys to. */
.topbar{background:var(--pri);color:rgba(255,255,255,.9);overflow:hidden;
  max-height:36px;transition:max-height .3s cubic-bezier(.22,.61,.36,1),opacity .2s;}
html.is-scrolled .topbar{max-height:0;opacity:0;}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:36px;font-size:12.5px;font-weight:500;}
.topbar a{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.82);
  transition:color .15s;white-space:nowrap;}
.topbar a:hover{color:var(--gold-l);}
.topbar i{font-size:11px;color:var(--gold);}
.topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:20px;}
/* Below 900px the row now shows too, but only the one link a phone visitor
   is actually likely to want mid-browse — everything else (e-Learning,
   Library, MRU Scholar, the phone number, Staff Login) is a tap away in the
   main nav or the footer already, and doesn't earn a permanent line of a
   small screen's height. */
@media(max-width:900px){ .topbar .tb-desktop-only{display:none;} }

header.site .bar{display:flex;align-items:center;gap:26px;height:var(--hd);
  transition:height .25s cubic-bezier(.22,.61,.36,1);}
html.is-scrolled header.site .bar{height:56px;}

.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--pri);}
.brand img.crest{height:40px;transition:height .25s cubic-bezier(.22,.61,.36,1);}
html.is-scrolled .brand img.crest{height:34px;}
.brand .brand-name{font-family:var(--font);line-height:1.15;font-weight:700;}
.brand .brand-name small{display:block;font-family:var(--font-display);font-size:11px;font-weight:500;
  letter-spacing:.01em;text-transform:none;color:var(--gold-d);font-style:italic;margin-top:1px;}
@media(max-width:1100px){.brand .brand-name{font-size:0;}
  .brand .brand-name::after{content:'EasyGuide';font-size:17px;font-weight:800;letter-spacing:-.02em;}
  .brand .brand-name small{display:none;}}

/* --------------------------------------------------------- 4. Navigation */

.nav{display:flex;align-items:center;gap:4px;position:relative;}
.nav-item{position:relative;display:flex;align-items:center;}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font);font-size:15px;font-weight:600;color:var(--tx);
  padding:10px 14px;border-radius:var(--r-sm);background:none;border:none;cursor:pointer;
  transition:color .15s,background .15s;letter-spacing:-.005em;}
.nav-link:hover{color:var(--pri);background:var(--pri-soft);}
.nav-link.on{color:var(--pri);background:var(--pri-soft);}
.nav-link.on::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2.5px;
  border-radius:var(--r-pill);background:var(--gold);}
.nav-link .caret{font-size:9px;opacity:.65;transition:transform .22s;}
.nav-link .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}

.mega{position:absolute;top:calc(100% + 14px);left:0;z-index:70;width:min(660px,calc(100vw - 40px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-4);
  padding:14px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
  transition:opacity .2s,transform .2s,visibility .2s;transform-origin:top left;}
/* Without script the menu still works on hover and on keyboard focus.
   With script (html.js-nav) a single class decides, so hover-to-open and
   click-to-toggle can share one menu without fighting each other: a click
   cannot dismiss a :hover state, which is why the panel used to feel
   click-only once it had been clicked. */
html:not(.js-nav) .nav-item:hover > .mega,
html:not(.js-nav) .nav-item:focus-within > .mega{opacity:1;visibility:visible;transform:none;}
.nav-item.is-open > .mega{opacity:1;visibility:visible;transform:none;}
.nav-item.has-menu::after{height:16px;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start;}
.mega-link{display:block;padding:11px 13px;border-radius:0;
  border-left:2px solid transparent;transition:background .16s,border-color .16s;min-width:0;}
.mega-link:hover{background:var(--pri-soft);border-left-color:var(--gold);}
.mega-link.on{background:var(--pri-soft);border-left-color:var(--gold);}
.mega-link .mt{display:block;font-size:14px;font-weight:700;color:var(--pri);line-height:1.35;}
.mega-link .md{display:block;font-size:12.5px;font-weight:400;color:var(--tx2);line-height:1.5;margin-top:2px;}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;
  padding:13px 14px;background:var(--surface);border-radius:var(--r);border:none;
  font-size:13px;font-weight:500;color:var(--tx2);}


/* ------------------------------------------------------------ 5. Buttons */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font);font-weight:700;font-size:14.5px;letter-spacing:-.005em;
  padding:13px 24px;min-height:48px;border-radius:var(--r-pill);
  border:1.5px solid var(--pri);background:var(--pri);color:#fff;
  box-shadow:none;transition:background .18s,border-color .18s,color .18s,box-shadow .22s,transform .18s;}
.btn:hover{background:var(--pri-d);border-color:var(--pri-d);box-shadow:var(--sh-3);transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.btn.gold{border-color:var(--gold);background:var(--gold);color:#01193F;}
.btn.gold:hover{background:#B08D1C;border-color:#B08D1C;color:#01193F;box-shadow:0 12px 26px -12px rgba(201,162,39,.75);}
.btn.ghost{background:transparent;color:var(--pri);border-color:var(--line-2);}
.btn.ghost:hover{background:var(--pri-soft);border-color:var(--pri);color:var(--pri);box-shadow:var(--sh-2);}
.band-deep .btn.ghost{color:#fff;border-color:rgba(255,255,255,.42);}
.band-deep .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}
.btn.sm{padding:9px 17px;font-size:13.5px;min-height:40px;}
.btn.lg{padding:16px 30px;font-size:16px;min-height:56px;}
.btn i{transition:transform .22s;}
.btn:hover i{transform:translateX(3px);}
.ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

.hd-r{margin-left:auto;display:flex;align-items:center;gap:12px;}

/* Text links that draw their own underline. */
.link,a.link{position:relative;display:inline-flex;align-items:center;gap:7px;font-weight:600;}
.link::after{height:2px;border-radius:var(--r-pill);bottom:-3px;}

/* -------------------------------------------------------------- 6. Cards */

/* One card treatment for the whole site: white, hairline, generous radius,
   soft lift on hover. The old offset "plate" pseudo-elements are retired —
   a hard-edged shadow block fights rounded geometry. */
.card,.proj-card,.feature-box,.svc,.work-card,.buy-box,.accordion-mod{
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-1);transition:box-shadow .24s ease,transform .24s ease,border-color .24s ease;}
.card::before,.proj-card::before,.svc::before,.work-card::before{display:none !important;}
.card{padding:26px;}
.proj-card{padding:26px;gap:11px;display:flex;flex-direction:column;}
.feature-box{padding:30px;}
.svc{padding:24px 26px 26px;}
.card:hover,.proj-card:hover,.svc:hover,.work-card:hover{
  border-color:var(--pri-soft-2);box-shadow:var(--sh-3);transform:translateY(-4px);}
a.card,a.proj-card{display:flex;flex-direction:column;}

.card .ic,.svc .ic,.icon-row .ic{width:46px;height:46px;border-radius:var(--r);
  background:var(--pri-soft);color:var(--pri);display:flex;align-items:center;justify-content:center;
  font-size:18px;margin-bottom:16px;transition:background .2s,color .2s,transform .2s;}
.card:hover .ic,.svc:hover .ic{background:var(--pri);color:var(--gold);transform:scale(1.05);}
.card h3{font-size:17px;margin-bottom:8px;}
.card p,.proj-card p,.svc p{font-size:14.5px;color:var(--tx2);line-height:1.65;}
.proj-card h3{font-size:17px;}
.proj-card .client{font-size:12px;color:var(--gold-d);font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.proj-card .link{margin-top:auto;font-size:14px;color:var(--pri);padding-top:6px;}
.feature-box h3{font-size:20px;margin-bottom:8px;}
.feature-box .sub{font-size:11.5px;color:var(--gold-d);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;margin-bottom:14px;}
.feature-box p{font-size:15px;color:var(--tx2);line-height:1.72;margin-bottom:14px;}

/* Chips, tags, pills — all pill-shaped, all quiet until they matter. */
.tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);background:var(--pri-soft);color:var(--pri);}
.band-deep .tag{background:rgba(255,255,255,.14);color:#fff;}
.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px;}
.pill{font-size:13px;font-weight:500;padding:8px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--tx2);background:#fff;transition:all .16s;}
a.pill:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-soft);}
.pill-row{display:flex;flex-wrap:wrap;gap:9px;}
.trust-chips{display:flex;flex-wrap:wrap;gap:9px;font-size:13px;font-weight:600;color:var(--tx2);}
.trust-chips span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-1);}
.trust-chips i{font-size:11.5px;color:var(--gold-d);}
.band-deep .trust-chips span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none;}
.band-deep .trust-chips i{color:var(--gold-l);}

/* --------------------------------------------------------- 7. Page heroes */

.hero{padding:var(--s-8) 0 var(--s-7);text-align:center;}
.hero p{max-width:660px;margin:0 auto var(--s-4);}
.hero .eyebrow{margin-bottom:18px;}
.hero h1{margin-bottom:22px;}

.page-hero{position:relative;overflow:hidden;padding:var(--s-6) 0 var(--s-5);
  border-bottom:1px solid var(--line);background:var(--surface);}
.page-hero::before{opacity:.35;}
.page-hero::after{background:radial-gradient(700px 300px at 90% 0%,rgba(201,162,39,.14),transparent 62%);}
.page-hero h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:14px;}
.page-hero p{color:var(--tx2);font-size:17px;line-height:1.72;max-width:640px;margin-bottom:0;}
.page-hero .eyebrow{margin-bottom:13px;}
.page-hero .trust-chips,.page-hero .subnav{margin-top:24px;}

/* Departmental contacts: a label and the address it routes to, so a visitor
   picks the right inbox instead of defaulting to the general one. */
.contact-depts{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:9px;}
.contact-depts li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;
  padding-bottom:8px;border-bottom:1px solid var(--line);font-size:13.5px;}
.contact-depts li:last-child{border-bottom:0;padding-bottom:0;}
.contact-depts span{color:var(--tx2);}
.contact-depts a{font-weight:600;color:var(--pri);}

/* A DOI is one unbreakable 300px token; on a 390px phone it pushed the whole
   publications list into horizontal scroll. Long identifiers and URLs in
   content have to be allowed to break mid-string — there is no space in them
   for the browser to use. */
.pub-doi{color:var(--tx3);font-weight:500;overflow-wrap:anywhere;word-break:break-word;}
main a[href^="http"],main a[href^="mailto"]{overflow-wrap:anywhere;}

/* Breadcrumbs sit above the page title, quiet by default: they are wayfinding
   and a search-result trail, not a headline. */
.crumbs{margin-bottom:18px;}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;font-size:12.5px;}
.crumbs li{display:inline-flex;align-items:center;gap:8px;}
.crumbs a,.crumbs [aria-current="page"]{display:inline-flex;align-items:center;min-height:30px;}
.crumbs a{color:var(--tx2);font-weight:500;}
.crumbs a:hover{color:var(--pri);}
.crumbs i{font-size:8px;color:var(--tx3);}
.crumbs [aria-current="page"]{color:var(--gold-d);font-weight:700;}

/* Optional photograph in the page header. Only pages with a real, relevant
   picture pass one; the rest keep the plain header rather than being handed
   a placeholder. The picture is eager/high-priority because when present it
   is the page's LCP element. */
.page-hero.has-photo .ph-inner{display:grid;grid-template-columns:1.15fr .85fr;
  gap:44px;align-items:center;}
.ph-media{position:relative;}
.ph-media img{display:block;width:100%;height:100%;max-height:330px;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--sh-2);}
@media(max-width:900px){
  .page-hero.has-photo .ph-inner{grid-template-columns:1fr;gap:26px;}
  .ph-media img{max-height:220px;}
}

.stat-row{display:flex;gap:56px;justify-content:center;flex-wrap:wrap;margin-top:var(--s-6);}
.stat-row .v{font-family:var(--font-display);font-size:40px;font-weight:700;color:var(--pri);line-height:1;}
.stat-row .l{font-size:12.5px;font-weight:600;color:var(--tx2);text-transform:uppercase;
  letter-spacing:.09em;margin-top:9px;}
.band-deep .stat-row .v{color:var(--gold);}
.band-deep .stat-row .l{color:rgba(255,255,255,.7);}

/* Quick-action row on the home page. */
.icon-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;}
.icon-row a{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:30px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-1);transition:all .24s ease;}
.icon-row a:hover{border-color:var(--pri-soft-2);box-shadow:var(--sh-3);transform:translateY(-4px);}
.icon-row .ic{margin-bottom:0;}
.icon-row span{font-size:15px;font-weight:700;color:var(--pri);}

/* ------------------------------------------------------- 8. Forms & input */

input,select,textarea,button{font-family:inherit;}
/* A <select> is as wide as its longest option unless it is told otherwise,
   and the faculty filter carries "Faculty of Science, Technology, Engineering,
   Art and Design" — 461px of it, which pushed a 390px phone into 108px of
   horizontal scroll on /programmes and /staff-directory. */
.filter-bar select,.filter-bar input,.filter-bar button{max-width:100%;min-width:0;}
.filter-bar select{text-overflow:ellipsis;}
@media(max-width:640px){
  .filter-bar{flex-direction:column;align-items:stretch;}
  .filter-bar select,.filter-bar input,.filter-bar button{width:100%;}
}
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:var(--s-5);
  padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);}
.filter-bar select,.filter-bar input[type=text]{border:1px solid var(--line-2);background:#fff;
  padding:12px 16px;border-radius:var(--r-pill);font-size:14.5px;color:var(--tx);}
.filter-bar input[type=text]{flex:1;min-width:220px;}
.filter-bar select:focus,.filter-bar input[type=text]:focus{outline:none;border-color:var(--pri);
  box-shadow:0 0 0 4px var(--pri-soft);}

form.contact-form{display:flex;flex-direction:column;gap:18px;}
form.contact-form input,form.contact-form textarea,form.contact-form select{
  width:100%;border:1px solid var(--line-2);background:#fff;padding:14px 17px;border-radius:var(--r);
  font-size:15px;color:var(--tx);transition:border-color .16s,box-shadow .16s;}
form.contact-form input:focus,form.contact-form textarea:focus,form.contact-form select:focus{
  outline:none;border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-soft);}
form.contact-form label{font-size:13.5px;font-weight:600;color:var(--pri);margin-bottom:7px;display:block;}
form.contact-form textarea{min-height:150px;border-radius:var(--r);}
.field-error{font-size:13px;color:var(--bad);margin-top:6px;font-weight:500;}
.alert-success{background:var(--ok-soft);color:var(--ok);border:1px solid rgba(15,122,61,.25);
  padding:16px 20px;border-radius:var(--r);font-size:14.5px;margin-bottom:20px;font-weight:500;}
.notify-form input[type=text],.notify-form input[type=tel],.notify-form input[type=email],
.buy-box .coupon-field{border-radius:var(--r);padding:13px 16px;font-size:14.5px;}

/* ------------------------------------------------- 9. Content components */

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:var(--s-4) 0 0;}
.steps .step{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:28px;box-shadow:var(--sh-1);}
.steps .step .n{width:38px;height:38px;border-radius:var(--r-pill);background:var(--pri);color:var(--gold);
  font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.steps .step h4{font-size:16px;margin-bottom:8px;}
.steps .step p{font-size:14.5px;color:var(--tx2);line-height:1.65;}

.outcomes-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px 26px;}
.outcomes-list li{padding-left:32px;position:relative;font-size:15px;color:var(--tx2);line-height:1.65;}
.outcomes-list li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:var(--r-pill);
  background:var(--gold-soft);color:var(--gold-d);font-size:10px;display:flex;align-items:center;justify-content:center;}

.faq-item{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:24px 26px;margin-bottom:14px;box-shadow:var(--sh-1);}
.faq-item h3{font-size:17px;margin-bottom:9px;}
.faq-item p{font-size:15px;color:var(--tx2);line-height:1.72;}

.accordion-mod{margin-bottom:12px;overflow:hidden;}
.accordion-mod summary{padding:18px 22px;font-size:15.5px;font-weight:700;color:var(--pri);border-radius:var(--r-lg);}
.accordion-mod summary:hover{background:var(--pri-soft);}
.mod-caret{border-radius:var(--r-sm);border-color:var(--line-2);}
.accordion-mod[open] .mod-caret{background:var(--pri);border-color:var(--pri);}
.mod-free{border-radius:var(--r-pill);padding:4px 11px;}
.lesson-row{padding:14px 22px 14px 56px;font-size:14.5px;}

/* Timeline */
.tl-what::before{border-radius:var(--r-pill);width:11px;height:11px;left:-5.5px;
  box-shadow:0 0 0 4px var(--bg);background:var(--gold);}
.tl-row:hover .tl-what::before{background:var(--pri);}
.tl-when{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-d);}
.tl-what h3{font-size:17px;}
.tl-what .org{font-size:14px;}
.tl-what p{font-size:15px;color:var(--tx2);line-height:1.7;}

/* Sub-navigation rail */
.subnav{gap:8px;border-bottom:none;margin-top:22px;}
.subnav a{font-size:14px;font-weight:600;padding:9px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:#fff;color:var(--tx2);transition:all .16s;}
.subnav a::after{display:none;}
.subnav a:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-soft);}
.subnav a.on{background:var(--pri);border-color:var(--pri);color:#fff;}

/* Course / catalogue cards */
.course-cover{border-radius:var(--r);margin:-26px -26px 18px;width:calc(100% + 52px);}
.course-cover::after{opacity:0;}
.course-cover img{filter:none;}
.buy-box{padding:28px;position:sticky;top:calc(var(--hd) + 20px);}
.buy-box .thumb{border-radius:var(--r);margin-bottom:20px;}
.buy-box .price{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--pri);margin-bottom:18px;}
.buy-box ul.includes li{font-size:14px;padding:7px 0 7px 26px;color:var(--tx2);}
.buy-box ul.includes li::before{color:var(--gold-d);}
.pay-icons span{border-radius:var(--r-pill);padding:5px 11px;border-color:var(--line-2);}
.money-comfort{font-size:12.5px;color:var(--tx3);margin-top:16px;}

/* Tables */
table{border-collapse:separate;border-spacing:0;width:100%;}
.wrap table th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--pri);background:var(--surface);padding:15px 18px;text-align:left;}
.wrap table td{padding:15px 18px;font-size:14.5px;border-top:1px solid var(--line);color:var(--tx2);}
.wrap table tr:hover td{background:var(--surface);}

/* Gallery */
.gal-grid{gap:16px;}
.gal-item{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);}
.gal-item:hover{box-shadow:var(--sh-3);}
.gal-filters a{border-radius:var(--r-pill);}

/* An even strip, for the pages that show a fixed handful of photographs
   rather than the whole gallery. .gal-grid is a multi-column layout that
   balances by height; with six tiles of near-identical aspect it settles on
   1-1-2-2 and leaves a hole under the first two. A plain grid on one aspect
   ratio cannot, and reuses .gal-item for the frame, hover and caption.

   The column count is fixed rather than auto-fit: auto-fit fitted five tiles
   across 1440px and left the sixth alone on a row of its own. */
.gal-strip{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));}
.gal-strip .gal-item{aspect-ratio:4/3;margin:0;}
@media(max-width:860px){.gal-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.gal-strip{grid-template-columns:minmax(0,1fr);}}

/* The home page's picture desk. Captions are printed under the frame, not
   revealed on hover: a hover caption does not exist on a phone at all, and
   does not exist for anyone skimming on a desktop either — which is most
   readers. The frame keeps one aspect ratio so the row of captions lines up
   on a single baseline instead of stepping. */
.home-gal{display:grid;gap:var(--s-4) 22px;grid-template-columns:repeat(3,minmax(0,1fr));}
.home-gal figure{margin:0;display:flex;flex-direction:column;min-width:0;}
.hg-frame{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-lg);box-shadow:var(--sh-1);background:var(--surface-2);
  transition:box-shadow .2s,transform .2s;}
.hg-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease;}
.hg-frame:hover{box-shadow:var(--sh-3);transform:translateY(-2px);}
.hg-frame:hover img{transform:scale(1.045);}
.hg-frame:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.home-gal figcaption{padding:13px 2px 0;}
.hg-cat{display:block;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-d);}
.hg-title{display:block;font-size:15px;font-weight:600;color:var(--tx);
  margin-top:4px;line-height:1.35;}
.hg-note{display:block;font-size:12.5px;color:var(--tx2);margin-top:5px;line-height:1.55;}
@media(prefers-reduced-motion:reduce){
  .hg-frame,.hg-frame img{transition:none;}
  .hg-frame:hover{transform:none;}
  .hg-frame:hover img{transform:none;}
}
@media(max-width:900px){.home-gal{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.home-gal{grid-template-columns:minmax(0,1fr);gap:var(--s-4);}}

/* =========================================================================
   The WhatsApp gate
   =========================================================================
   Shown before joining the Admissions group, so that joining is a deliberate
   act rather than a tap on a green button.

   z-index 300. The stack on this site is header 60, mobile menu 55, action bar
   50, launcher 45, lightbox 200 — a gate that any of those could cover would be
   worse than no gate, because the reader would see a frozen page instead of a
   choice.
   -------------------------------------------------------------------- */
.wg{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:20px;}
.wg[hidden]{display:none;}
.wg-backdrop{position:absolute;inset:0;background:rgba(4,19,43,.66);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.wg-panel{position:relative;width:min(680px,100%);max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px rgba(4,19,43,.55);overflow:hidden;}

.wg-head{display:flex;align-items:center;gap:13px;padding:20px 22px 16px;
  border-bottom:1px solid var(--line);}
.wg-mark{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);background:#25D366;color:#fff;font-size:20px;}
.wg-head h2{margin:0;font-size:19px;line-height:1.3;color:var(--pri);flex:1;min-width:0;}
.wg-x{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:var(--r-sm);color:var(--tx3);font-size:16px;cursor:pointer;}
.wg-x:hover{background:var(--surface-2);color:var(--tx);}
.wg-x:focus-visible{outline:2px solid var(--pri);outline-offset:2px;}

/* The body is the only scrolling part, so the heading and the actions stay put
   on a short screen instead of the whole dialog running off it. */
.wg-body{padding:18px 22px 20px;overflow-y:auto;}
.wg-lead{font-size:14.5px;line-height:1.7;color:var(--tx2);margin:0 0 16px;}
.wg-lead strong{color:var(--tx);}

.wg-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.wg-col{padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);}
.wg-yes{background:var(--ok-soft);border-color:#CDE9D7;}
.wg-no{background:var(--bad-soft);border-color:#F3D5D5;}
.wg-col-h{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;}
.wg-yes .wg-col-h{color:var(--ok);}
.wg-no .wg-col-h{color:var(--bad);}
.wg-col ul{margin:0;padding-left:17px;}
.wg-col li{font-size:13px;line-height:1.65;color:var(--tx2);}

.wg-note{display:flex;gap:11px;margin-top:14px;padding:13px 15px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);}
.wg-note i{color:var(--pri);font-size:14px;margin-top:3px;flex-shrink:0;}
.wg-note p{margin:0;font-size:13px;line-height:1.65;color:var(--tx2);}
.wg-note a{color:var(--pri);font-weight:600;text-decoration:underline;}

.wg-check{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:14px 16px;
  border:1.5px solid var(--line-2);border-radius:var(--r);cursor:pointer;
  transition:border-color .16s,background .16s;}
.wg-check:hover{border-color:var(--pri-l);background:var(--pri-soft);}
.wg-check:has(:checked){border-color:var(--ok);background:var(--ok-soft);}
.wg-check:has(:focus-visible){outline:2px solid var(--pri);outline-offset:2px;}
.wg-check input{width:19px;height:19px;margin:1px 0 0;flex-shrink:0;accent-color:var(--ok);cursor:pointer;}
.wg-check span{font-size:13.5px;line-height:1.6;color:var(--tx);}

.wg-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;
  border-top:1px solid var(--line);background:var(--surface);}
/* Disabled is expressed on the anchor, not by removing the href, and the
   pointer is deliberately NOT switched off: on a phone the checkbox is below
   the fold, so a dead button that swallows the tap silently is a dead end.
   It stays clickable so the click can say what is missing. */
.wg-go[aria-disabled="true"]{opacity:.5;filter:grayscale(.35);cursor:not-allowed;}

/* The nudge: when someone tries to join without confirming, the checkbox is
   scrolled to and marked, rather than nothing happening at all. */
.wg-check.is-wanted{border-color:var(--gold-d);background:var(--gold-soft);
  animation:wg-pulse .5s ease 2;}
@keyframes wg-pulse{0%,100%{box-shadow:0 0 0 0 rgba(154,98,5,0);}
  50%{box-shadow:0 0 0 5px rgba(154,98,5,.18);}}
@media(prefers-reduced-motion:reduce){ .wg-check.is-wanted{animation:none;} }

@media(max-width:620px){
  .wg{padding:0;align-items:flex-end;}
  .wg-panel{width:100%;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;}
  .wg-head h2{font-size:17px;}
  .wg-split{grid-template-columns:minmax(0,1fr);}
  .wg-foot{flex-direction:column-reverse;}
  .wg-foot .btn{width:100%;justify-content:center;min-height:46px;}
}
@media(prefers-reduced-motion:reduce){ .wg-check{transition:none;} }

/* Pagination */
.pagination{margin-top:var(--s-6);gap:8px;font-size:14px;}
.pagination a,.pagination span{border-radius:var(--r-sm);padding:8px 13px;}

/* Prose pages (privacy, terms, long copy) */
.page{max-width:760px;margin:0 auto;}
.page h1{font-size:clamp(30px,3.4vw,42px);margin-bottom:12px;}
.page h2{font-size:24px;font-weight:600;margin:38px 0 12px;}
.page p{color:var(--tx2);margin:14px 0;font-size:16px;line-height:1.78;}
.page li{position:relative;padding-left:26px;color:var(--tx2);margin:10px 0;font-size:16px;line-height:1.7;}
.page li::before{content:'';position:absolute;left:5px;top:11px;width:7px;height:7px;
  border-radius:var(--r-pill);background:var(--gold);}
.page .updated{font-size:13.5px;color:var(--tx3);margin-bottom:34px;}
.page a.link{color:var(--pri-l);}

/* Article body (news) */
.article-body{font-size:17px;line-height:1.8;color:var(--tx);}
.article-body h2{font-size:26px;margin:1.7em 0 .5em;}
.article-body h3{font-size:20px;margin:1.4em 0 .4em;}
.article-body blockquote{border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;
  padding:14px 20px;background:var(--surface);color:var(--tx2);font-style:normal;}
.article-body code{border-radius:var(--r-xs);background:var(--surface-2);}
.article-body pre{border-radius:var(--r);background:var(--pri-dd);}
.article-body img{border-radius:var(--r-lg);}

/* Client / partner strip */
.clients-strip{gap:20px 44px;font-size:13.5px;color:var(--tx3);font-weight:600;}

/* Account menu and mobile sheet */
.acct-av{border-radius:var(--r-pill);width:38px;height:38px;font-size:12.5px;background:var(--pri);color:var(--gold);}
.acct-menu{border-radius:var(--r-lg);box-shadow:var(--sh-4);padding:8px;border-color:var(--line);}
.acct-menu a,.acct-menu button{border-radius:var(--r-sm);padding:10px 12px;font-size:14px;}
.acct-menu a:hover,.acct-menu button:hover{background:var(--pri-soft);}
.acct-who .nm{font-size:14px;font-weight:700;color:var(--pri);}
.cart-link{border-radius:var(--r-pill);}

.mmenu{padding:26px 24px 40px;background:#fff;}
.mmenu a{font-family:var(--font);font-size:18px;font-weight:600;color:var(--pri);padding:15px 0;}
.mm-group > summary{font-size:18px;font-weight:700;color:var(--pri);padding:15px 0;}
.mm-sub a{font-size:15.5px;font-weight:500;color:var(--tx2);padding:11px 0;}
.mmenu .mm-actions{gap:12px;margin-top:24px;}

/* Floating helpers */
/* The university skin used to round the circle up to 58px. The control is a
   labelled pill now, so a fixed width would clip the label — height only. */
.wa-btn{border-radius:var(--r-pill);min-height:58px;}
.act-bar{border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-4);}
.act-bar .btn{border-radius:var(--r-pill);}

/* Placeholder slots keep the family radius. */
.ph,.ph-img{border-radius:var(--r-lg);}

/* ------------------------------------------------------------ 10. Footer */

footer{background:linear-gradient(165deg,var(--pri) 0%,var(--pri-d) 58%,var(--pri-dd) 100%);
  color:rgba(255,255,255,.72);border-top:none;padding:0;position:relative;overflow:hidden;}
footer::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 420px at 88% -12%,rgba(201,162,39,.2),transparent 60%),
             radial-gradient(600px 340px at -5% 108%,rgba(255,255,255,.06),transparent 62%);}
footer .wrap{position:relative;z-index:1;}

/* The crest, oversized and barely there, anchoring the whole block. */
.foot-crest{position:absolute;right:-70px;bottom:-70px;width:400px;opacity:.05;
  pointer-events:none;z-index:0;filter:brightness(0) invert(1);}

/* Call-to-action strip riding on top of the footer. */
.foot-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:44px 0;border-bottom:1px solid rgba(255,255,255,.14);}
.foot-cta h2{font-size:clamp(24px,2.6vw,32px);color:#fff;margin-bottom:8px;}
.foot-cta p{color:rgba(255,255,255,.68);font-size:15.5px;max-width:520px;}
.foot-cta .ctas{justify-content:flex-start;}

.foot{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:48px 32px;padding:64px 0 48px;}
.foot-brand .brand{color:#fff;}
.foot-brand .brand .brand-name{color:#fff;}
.foot-brand .brand .brand-name small{color:var(--gold-l);}
.foot-brand .brand img.crest{height:56px;filter:brightness(0) invert(1);}
@media(max-width:1100px){.foot-brand .brand .brand-name{font-size:15px;}
  .foot-brand .brand .brand-name::after{content:none;}
  .foot-brand .brand .brand-name small{display:block;}}
.foot .blurb{font-size:14.5px;color:rgba(255,255,255,.66);max-width:330px;margin-top:18px;line-height:1.75;}
.foot-place{font-size:14px;color:rgba(255,255,255,.72);margin-top:12px;display:flex;
  align-items:flex-start;gap:11px;line-height:1.6;}
.foot-place i{color:var(--gold);font-size:13px;margin-top:4px;flex-shrink:0;}
.foot-place a:hover{color:var(--gold-l);}

.foot .foot-h{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;padding-bottom:0;border-bottom:none;}
.foot a{display:block;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.7);
  margin:11px 0;transition:color .16s,transform .16s;}
.foot a:hover{color:#fff;transform:translateX(3px);}

/* Newsletter, sitting in the brand column. */
.foot-news{margin-top:26px;max-width:340px;}
.foot-news label{display:block;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.foot-news .row{display:flex;gap:9px;}
.foot-news input{flex:1;min-width:0;padding:13px 17px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-size:14px;}
.foot-news input::placeholder{color:rgba(255,255,255,.45);}
.foot-news input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.13);}
.foot-news button{flex-shrink:0;border-radius:var(--r-pill);border:none;background:var(--gold);
  color:#01193F;font-weight:700;font-size:14px;padding:0 22px;min-height:48px;cursor:pointer;
  transition:background .18s,transform .18s;}
.foot-news button:hover{background:#FFB93D;transform:translateY(-2px);}

/* Campus cards: the two places this university physically is. */
.foot-campuses{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 0 48px;}
.foot-campus{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);
  transition:background .2s,border-color .2s,transform .2s;}
.foot-campus:hover{background:rgba(255,255,255,.1);border-color:rgba(201,162,39,.4);transform:translateY(-3px);}
.foot-campus .ci{width:44px;height:44px;flex-shrink:0;border-radius:var(--r);background:rgba(201,162,39,.16);
  color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:17px;}
.foot-campus b{display:block;font-size:15.5px;font-weight:700;color:#fff;margin-bottom:3px;}
.foot-campus span{display:block;font-size:13.5px;color:rgba(255,255,255,.64);line-height:1.55;}
.foot-campus em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:12.5px;
  font-weight:600;color:var(--gold-l);margin-top:7px;}

/* Social row: pills, not bare glyphs. */
.foot-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  margin:0;border-radius:var(--r-pill);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-size:16px;
  transition:background .18s,border-color .18s,transform .18s,color .18s;}
.foot-social a:hover{background:var(--gold);border-color:var(--gold);color:#01193F;transform:translateY(-3px);}

.foot-bar{border-top:1px solid rgba(255,255,255,.14);margin-top:0;padding:26px 0 34px;
  font-size:13.5px;color:rgba(255,255,255,.56);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;align-items:center;}
.foot-bar .accred{display:inline-flex;align-items:center;gap:9px;}
.foot-bar .accred i{color:var(--gold);}
.foot-bar a{display:inline;margin:0;color:rgba(255,255,255,.56);}
.foot-bar a:hover{color:#fff;transform:none;}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap;}

/* --------------------------------------------------------- 11. Responsive */

@media(max-width:1100px){
  .foot{grid-template-columns:1fr 1fr 1fr;gap:40px 28px;}
  .foot-brand{grid-column:1 / -1;}
  .foot .blurb{max-width:none;}
}
@media(max-width:900px){
  .nav{display:none;} .burger{display:inline-flex;}
  .hd-r .btn.desk,.hd-r .acct.desk,.hd-r .signin.desk{display:none;}
  .foot-campuses{grid-template-columns:1fr;}
  .foot-cta{flex-direction:column;align-items:flex-start;gap:20px;}
}
@media(max-width:760px){
  section{padding:var(--s-6) 0;}
  .hero{padding:var(--s-6) 0 var(--s-5);}
  .wrap{padding:0 20px;}
  .stat-row{gap:32px;}
  .stat-row .v{font-size:32px;}
  .foot{grid-template-columns:1fr 1fr;gap:34px 24px;padding:48px 0 36px;}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:14px;}
  .card,.proj-card,.feature-box{padding:22px;}
  .course-cover{margin:-22px -22px 16px;width:calc(100% + 44px);}
}
@media(max-width:420px){
  .foot{grid-template-columns:1fr;}
  .btn{width:auto;}
}

.burger{width:46px;height:46px;border-radius:var(--r);border-color:var(--line-2);
  background:#fff;color:var(--pri);font-size:16px;}
.burger:hover{background:var(--pri-soft);border-color:var(--pri);}

/* Motion is a courtesy, never a requirement. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .btn:hover,.card:hover,.proj-card:hover,.icon-row a:hover{transform:none;}
}

/* ------------------------------------------------ 12. Header fit & balance

   The bar carries a crest, a two-line wordmark, six menu sections and a
   standing action. Everything here is about making those coexist at every
   width instead of wrapping into each other: the brand and the actions never
   shrink, the navigation is the only elastic element, and no label is
   allowed to break across lines. */

header.site .bar{flex-wrap:nowrap;}
.brand{flex-shrink:0;min-width:0;}
.brand .brand-name{white-space:nowrap;font-size:15.5px;}
.brand .brand-name small{white-space:nowrap;}
.hd-r{flex-shrink:0;gap:14px;}

/* Between 900 and 1300 the full wordmark is the first thing to go: the crest
   still identifies the university, and the menu needs the room more. */
@media(max-width:1300px){
  .brand .brand-name{font-size:0;}
  /* Follows the header's ink so it stays legible on a photograph. */
  .brand .brand-name::after{content:'EasyGuide';font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--hdr-brand);}
  .brand .brand-name small{display:none;}
}
@media(max-width:1080px){ header.site .bar{gap:14px;} }

/* (The navigation's own sizing and the panel's anchoring live in §15, which
   replaced an earlier attempt that centred the panel on the header and left
   the nav items `position:static` — the arrangement that produced the
   full-width hover bridges. Nothing about it survives here.) */

/* The footer wordmark has room, so it keeps its full name at every width. */
footer .brand .brand-name{font-size:16px;white-space:normal;}
footer .brand .brand-name::after{content:none;}
footer .brand .brand-name small{display:block;}

/* --------------------------------------------- 13. Footer column fit

   Five columns: the brand block, the first three menu sections, and "More".
   The brand column is widest because it carries the crest, the address block
   and the social row. */
.foot{grid-template-columns:1.7fr repeat(4,1fr);gap:44px 28px;}
@media(max-width:1180px){
  .foot{grid-template-columns:1fr 1fr 1fr;}
  .foot-brand{grid-column:1 / -1;}
}
@media(max-width:760px){ .foot{grid-template-columns:1fr 1fr;} }
@media(max-width:460px){ .foot{grid-template-columns:1fr;} }

/* The crest reads better a touch larger in the bar; the header is 76px, so
   52px still leaves it breathing room. */
.brand img.crest{height:52px;}
html.is-scrolled .brand img.crest{height:40px;}

/* The watermark word behind a page title is a texture, not a headline. At
   the old weight it read as a rendering fault; this keeps the depth and
   drops the noise, and it never reaches the copy on a narrow screen. */

/* ------------------------------------------- 14. Touch and small screens

   The two-label buttons (a short resting label, a longer one on hover) are a
   pointer affordance. On a touch screen there is no hover, so the longer
   label never shows — it only sizes the button, which pushed the visible
   label out past its own padding. Below the pointer breakpoint the button
   goes back to being one label wide. */
@media (hover:none),(max-width:760px){
  .ctas .btn{width:100%;}
}

/* Stats read as a two-up grid on a phone rather than a ragged flex row. */
@media(max-width:640px){
  .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;}
  .stat-row .l{font-size:11.5px;letter-spacing:.06em;}
}

/* The oversized ghost word behind page titles is retired: it was cropped by
   its own section at every width, and a half-drawn letterform reads as a
   mistake rather than as texture. The page headers carry themselves on
   typography and space instead. (The base rules above are left in place so
   the markup can stay; this is the one line that decides.) */
.hero-mark{display:none;}

/* An anchored heading must clear the sticky bar, or following a link to it
   scrolls the thing you asked for underneath the navigation. */
[id]{scroll-margin-top:calc(var(--hd) + 24px);}

/* =========================================================================
   15. The main menu, rebuilt
   =========================================================================
   The bug this replaces: the mega panel was anchored to the header while its
   nav item was left `position:static`, so each item's invisible hover-bridge
   resolved against the header too and every one of them spanned the full
   header width. Six full-width bridges stacked on top of each other, so a
   pointer anywhere under the bar was simultaneously "inside" several menu
   items — panels opened over each other, and moving toward one crossed out
   of the item that opened it and closed it.

   The rebuild removes the gap instead of trying to bridge it:

     · every nav item stretches the full height of the bar, so its bottom
       edge is the header's bottom edge;
     · the panel is anchored to the header at `top:100%`, which is that same
       edge, so trigger and panel touch;
     · because the panel is a DOM child of the item, hovering the panel keeps
       the item hovered, and the menu simply cannot close underneath the
       pointer.

   No bridge, no timers, no JavaScript — and it still opens on :focus-within
   for the keyboard.
   -------------------------------------------------------------------- */

header.site .bar{position:relative;gap:24px;}
.nav{position:static;flex:1 1 auto;min-width:0;display:flex;align-self:stretch;
  justify-content:center;gap:2px;}
/* Full-bar-height items: this is what makes the panel contiguous. */
.nav-item{position:static;display:flex;align-items:stretch;}
.nav-item.has-menu::after{content:none;}          /* the bridge is obsolete */
.nav-link{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:0 15px;font-size:15px;font-weight:600;border-radius:0;background:none;}
.nav-link:hover{background:none;color:var(--pri);}
.nav-link.on{background:none;color:var(--pri);}
/* The active marker sits on the bar's bottom edge, where the panel opens. */
.nav-link.on::after{left:15px;right:15px;bottom:0;height:3px;border-radius:3px 3px 0 0;}
.nav-item:hover .nav-link,.nav-item.is-open .nav-link{color:var(--pri);}
html:not(.js-nav) .nav-item:focus-within .nav-link{color:var(--pri);}
html:not(.js-nav) .nav-item:hover .nav-link .caret,
html:not(.js-nav) .nav-item:focus-within .nav-link .caret,
.nav-item.is-open .nav-link .caret{transform:rotate(180deg);}
/* The open section keeps a marker even when it is not the current page. */
.nav-item.is-open .nav-link::after{content:'';position:absolute;left:15px;right:15px;bottom:0;
  height:3px;border-radius:3px 3px 0 0;background:var(--gold);}

/* The panel: a full-bleed shelf. Its containing block is the centered .bar,
   so true viewport width comes from the 50%/-50% translate trick; the html
   overflow-x:clip guard (top of this section) absorbs the classic-scrollbar
   case where 100vw is wider than the visible page. Square corners: a
   full-width shelf is part of the header, not a floating card. */
html{overflow-x:clip;}
.mega{position:absolute;top:100%;left:50%;right:auto;width:100vw;
  transform:translate(-50%,-10px);transform-origin:top center;
  background:#fff;border:none;border-top:1px solid var(--line);
  border-radius:0;
  box-shadow:0 26px 50px -22px rgba(1,39,112,.28);
  padding:0;opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s cubic-bezier(.22,.61,.36,1),visibility .2s;}
/* Without script the menu still works on hover and on keyboard focus.
   With script (html.js-nav) a single class decides, so hover-to-open and
   click-to-toggle can share one menu without fighting each other: a click
   cannot dismiss a :hover state, which is why the panel used to feel
   click-only once it had been clicked. */
html:not(.js-nav) .nav-item:hover > .mega,
html:not(.js-nav) .nav-item:focus-within > .mega{opacity:1;visibility:visible;transform:translate(-50%,0);}
.nav-item.is-open > .mega{opacity:1;visibility:visible;transform:translate(-50%,0);}

.mega-inner{max-width:var(--wrap);margin:0 auto;padding:32px;
  display:grid;grid-template-columns:290px minmax(0,1fr);gap:40px;align-items:start;}
/* Some sections lead with a photograph on the far left — square-cornered,
   filling the panel's height. Only the sections with a photo worth the
   space declare one (SiteNav's `image` key); the rest keep two columns. */
.mega-inner.has-media{grid-template-columns:230px 260px minmax(0,1fr);align-items:stretch;}
.mega-media{display:block;overflow:hidden;}
.mega-media img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;}
.mega-intro{border-right:1px solid var(--line);padding-right:32px;min-width:0;}
.mega-intro .eyebrow{margin-bottom:12px;}
.mega-blurb{font-size:14.5px;line-height:1.65;color:var(--tx2);margin-bottom:20px;}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-content:start;}
.mega-link{padding:13px 14px;border-radius:0;}
.mega-link .mt{font-size:14.5px;}
.mega-link .md{font-size:12.5px;}

/* Two columns of links once the panel is narrower than three will read;
   the photograph is the first thing to give its space back. */
@media(max-width:1180px){
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mega-inner{grid-template-columns:240px minmax(0,1fr);gap:28px;padding:26px;}
  .mega-inner.has-media{grid-template-columns:200px 220px minmax(0,1fr);}
  .mega-intro{padding-right:24px;}
  .nav-link{padding:0 11px;font-size:14px;}
}
@media(max-width:1000px){
  .mega-inner{grid-template-columns:1fr;gap:20px;}
  .mega-inner.has-media{grid-template-columns:1fr;}
  .mega-media{display:none;}
  .mega-intro{border-right:none;border-bottom:1px solid var(--line);padding:0 0 18px;}
}

/* =========================================================================
   16. The footer, tightened
   =========================================================================
   It had grown to roughly twice the height it needed: a full section-sized
   newsletter block with its own heading, two large campus cards repeating an
   address already given, and a "quick links" column duplicating the columns
   beside it. What survives is one link grid, one slim strip carrying the
   newsletter and the portals, and the legal line.
   -------------------------------------------------------------------- */

footer .wrap{max-width:var(--wrap);}

.foot{grid-template-columns:1.9fr repeat(4,1fr);gap:36px 30px;padding:56px 0 36px;}
.foot .blurb{font-size:14px;line-height:1.7;margin-top:16px;max-width:340px;}
.foot .foot-h{margin-bottom:14px;}
.foot a{font-size:14px;margin:9px 0;}

/* Contacts: an actual list, tight, one idea per line. */
.foot-contact{list-style:none;margin:18px 0 0;padding:0;}
.foot-contact li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
  line-height:1.6;color:rgba(255,255,255,.7);margin:9px 0;}
.foot-contact i{color:var(--gold);font-size:12.5px;margin-top:4px;flex-shrink:0;width:14px;}
.foot-contact a{display:inline;margin:0;font-size:13.5px;color:rgba(255,255,255,.78);}
.foot-contact a:hover{color:#fff;transform:none;}

.foot-social{margin-top:18px;gap:9px;}
.foot-social a{width:38px;height:38px;font-size:14px;margin:0;}

/* The strip: newsletter on the left, the portals on the right. */
.foot-strip{display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;padding:22px 0;border-top:1px solid rgba(255,255,255,.13);
  border-bottom:1px solid rgba(255,255,255,.13);}
.foot-news{margin:0;max-width:none;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.foot-news label{margin:0;white-space:nowrap;}
.foot-news .row{gap:8px;}
.foot-news input{min-width:230px;padding:11px 16px;font-size:13.5px;}
.foot-news button{min-height:42px;padding:0 20px;font-size:13.5px;}
.foot-news-msg{width:100%;margin:0;font-size:13px;font-weight:600;}
.foot-news-msg.ok{color:var(--gold-l);}
.foot-news-msg.bad{color:#FFB4B4;}

.foot-portals{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.foot-portals a{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72);white-space:nowrap;}
.foot-portals a:hover{color:#fff;}
.foot-portals .btn{color:#01193F;}

.foot-bar{padding:20px 0 26px;font-size:13px;}
.foot-crest{width:320px;right:-60px;bottom:-60px;opacity:.045;}

@media(max-width:1180px){
  .foot{grid-template-columns:1fr 1fr 1fr;gap:32px 24px;}
  .foot-brand{grid-column:1 / -1;}
  .foot .blurb{max-width:520px;}
}
@media(max-width:820px){
  .foot-strip{flex-direction:column;align-items:flex-start;gap:18px;}
  .foot-news{width:100%;}
  .foot-news .row{width:100%;}
  .foot-news input{flex:1;min-width:0;}
}
@media(max-width:640px){
  .foot{grid-template-columns:1fr 1fr;padding:44px 0 28px;}
  .foot-crest{display:none;}
}
@media(max-width:420px){ .foot{grid-template-columns:1fr;} }

/* The floating WhatsApp launcher parks itself over the bottom-right of the
   viewport, which is exactly where the legal line ends. Reserve the space
   rather than let it sit on top of "Contact". */
@media(min-width:900px){ .foot-legal{margin-right:86px;} }
@media(max-width:899px){ .foot-bar{padding-bottom:96px;} }

/* An open panel dims the page behind it, so the menu reads as a layer rather
   than as content that appeared. Never interactive — it must not swallow the
   click that closes it — and it sits below the header (60) and the mobile
   action bar (50) but above the floating launcher (45). */
html.menu-open::after{content:'';position:fixed;inset:0;z-index:48;
  background:rgba(1,39,112,.16);pointer-events:none;animation:eg-scrim .2s ease both;}
@keyframes eg-scrim{from{opacity:0} to{opacity:1}}
@media(prefers-reduced-motion:reduce){ html.menu-open::after{animation:none;} }

/* =========================================================================
   17. Small screens have the last word
   =========================================================================
   This block is deliberately the final one in the sheet. A media query adds
   no specificity, so a plain `.nav{display:flex}` written later than
   `@media(max-width:900px){.nav{display:none}}` silently wins at every
   width — which is exactly what happened when §15 restyled the navigation
   and put the desktop menu back on top of the phone header. Keeping the
   collapse last means no later component rule can undo it.
   -------------------------------------------------------------------- */
@media(max-width:900px){
  .nav{display:none;}
  .burger{display:inline-flex;}
  .hd-r .btn.desk,.hd-r .acct.desk,.hd-r .signin.desk{display:none;}
  html.menu-open::after{display:none;}   /* no panel, so no scrim */
}

/* =========================================================================
   18. The home slider, and the header that floats over it
   =========================================================================
   A full-height stage: three photographs of this university, one message at
   a time, with the header transparent on top of it until the reader scrolls.
   -------------------------------------------------------------------- */

.hero-slider{position:relative;overflow:hidden;isolation:isolate;
  /* svh, not vh: on a phone, vh is the tallest the viewport ever gets, so a
     100vh hero sits partly under the browser's own toolbar on load. */
  height:100svh;min-height:600px;max-height:1080px;
  background:var(--pri-dd);color:#fff;}
/* Older engines without svh still get a sensible full screen. */
@supports not (height:100svh){ .hero-slider{height:100vh;} }

.hs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility .9s;}
.hs-slide.is-active{opacity:1;visibility:visible;}

.hs-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 32%;
  /* The photograph is the point. A small, deliberate lift — not a filter that
     apologises for it — so real colour reads as vivid rather than washed. */
  filter:saturate(1.14) contrast(1.05);}
/* A `transition` never played on the first slide: it ships `.is-active`
   already in the server-rendered HTML, so there is no "before" state for a
   transition to interpolate from — the browser just paints the settled value
   immediately, and the very first photo a visitor sees sat completely still
   until they clicked next. A `transition` needs a discrete state change to
   fire; an `animation` runs from its own `from` keyframe the moment it is
   first applied, on-load class or not — the same reason `.hs-rise` already
   animates the first slide's text in correctly. Odd and even slides settle
   from opposite sides so a run of several slides doesn't repeat one
   mechanical zoom; 1.4% is small enough to read as a living photograph, not
   a pan anyone consciously follows. */
.hs-slide:nth-child(odd) .hs-media{transform:scale(1.09) translate3d(1.4%,0,0);}
.hs-slide:nth-child(even) .hs-media{transform:scale(1.09) translate3d(-1.4%,0,0);}
.hs-slide:nth-child(odd).is-active .hs-media{animation:hs-zoom-odd 9s linear both;}
.hs-slide:nth-child(even).is-active .hs-media{animation:hs-zoom-even 9s linear both;}
@keyframes hs-zoom-odd{from{transform:scale(1.09) translate3d(1.4%,0,0)} to{transform:scale(1) translate3d(0,0,0)}}
@keyframes hs-zoom-even{from{transform:scale(1.09) translate3d(-1.4%,0,0)} to{transform:scale(1) translate3d(0,0,0)}}

/* One tight, fast-fading wash behind the text column, and a low, shallow one
   at the floor for the control bar. Everywhere else — most of the frame,
   including whatever the photograph is actually of — stays clear.
   This replaces a wash that covered the entire slide at up to 95% opacity:
   legible, but it read as "a dark navy-tinted photo" rather than a
   photograph, which is the opposite of vivid. */
.hs-scrim{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(1,12,30,.74) 0%,rgba(1,12,30,.50) 24%,rgba(1,12,30,.18) 44%,transparent 60%),
  linear-gradient(to top,rgba(1,12,30,.48) 0%,transparent 24%);}

.hs-copy{position:relative;height:100%;display:flex;align-items:center;
  padding-top:var(--hdr-total,120px);padding-bottom:120px;}
/* A slim gold spine anchors the whole text column to something other than
   the photo underneath it: the site's rounded gold bar, turned vertical.
   Fades at both ends rather than running edge to edge, so it reads as a
   deliberate accent, not a ruled-off margin. */
.hs-copy .wrap{width:100%;position:relative;padding-left:58px;}
.hs-copy .wrap::before{content:'';position:absolute;left:32px;top:6px;bottom:6px;width:3px;
  border-radius:var(--r-pill);transform-origin:top;transform:scaleY(0);opacity:0;
  background:linear-gradient(to bottom,transparent,var(--gold) 14%,var(--gold) 86%,transparent);}
/* The spine unfurls top-to-bottom the instant a slide takes over, before the
   text starts its own rise — a beat of "the frame is being drawn", not just
   text arriving on top of an already-finished composition. */
.hs-slide.is-active .hs-copy .wrap::before{animation:hs-spine .7s cubic-bezier(.22,.61,.36,1) both;}
@keyframes hs-spine{from{transform:scaleY(0);opacity:0} to{transform:scaleY(1);opacity:1}}
/* The scrim now does less of the legibility work — most of the frame is
   deliberately clear — so a soft, wide text-shadow picks up the rest. Blur
   with almost no offset reads as a lift off the photo, not a hard drop
   shadow, which is what keeps this elegant rather than heavy-handed. */
.hs-eyebrow{display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;text-shadow:0 2px 14px rgba(0,0,0,.6);}
/* The same short gold rule that marks an eyebrow elsewhere, so the hero
   speaks the site's own language instead of reading like a generic template
   hero bolted on the front. (It once echoed the numbered-section marker;
   that motif was retired sitewide — the gold rule outlived it.) */
.hs-eyebrow::before{content:'';flex:0 0 28px;height:3px;border-radius:var(--r-pill);
  transform-origin:left;transform:scaleX(0);
  background:var(--gold);box-shadow:0 1px 8px rgba(0,0,0,.45);}
.hs-slide.is-active .hs-eyebrow::before{animation:hs-rule .5s .12s cubic-bezier(.22,.61,.36,1) both;}
@keyframes hs-rule{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.hs-title{font-family:var(--font-display);
  font-size:clamp(38px,5.6vw,76px);line-height:1.03;letter-spacing:-.025em;
  font-weight:700;color:#fff;max-width:19ch;margin-bottom:22px;
  text-wrap:balance;text-shadow:0 4px 28px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.4);}
.hs-text{font-size:clamp(16px,1.35vw,19.5px);line-height:1.65;color:rgba(255,255,255,.92);
  max-width:56ch;margin-bottom:34px;text-shadow:0 2px 16px rgba(0,0,0,.5);}
.hs-actions{display:flex;gap:14px;flex-wrap:wrap;}
/* Light glass was the first attempt here too — same mistake the header made
   before it was measured: white text over translucent white depends on
   what's behind it, and this button can land over anything from navy scrim
   to a stranger's white blouse. Measured worst case over the three real
   photos, pre-fix: 3.2:1 and 2.07:1 (both fail WCAG AA's 4.5:1 floor), with
   only the heritage slide scraping past at 4.64:1. Dark glass — the same
   recipe already verified safe for the header and the control chips —
   composites the same white label against something close to navy
   regardless of what the photo behind it is doing. */
.btn.ghost.hs-ghost{color:#fff;border-color:rgba(255,255,255,.24);background:rgba(1,15,38,.46);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);}
.btn.ghost.hs-ghost:hover{background:rgba(1,15,38,.62);border-color:rgba(255,255,255,.5);color:#fff;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.6);}

/* Each slide's copy arrives a beat after the image. */
.hs-slide.is-active .hs-eyebrow,
.hs-slide.is-active .hs-title,
.hs-slide.is-active .hs-text,
.hs-slide.is-active .hs-actions{animation:hs-rise .8s cubic-bezier(.22,.61,.36,1) both;}
.hs-slide.is-active .hs-title{animation-delay:.08s;}
.hs-slide.is-active .hs-text{animation-delay:.16s;}
.hs-slide.is-active .hs-actions{animation-delay:.24s;}
@keyframes hs-rise{from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none}}

/* Dots and arrows used to float directly on the photo as two unrelated
   widgets sharing a horizontal line — functional, but it read as leftover
   template chrome rather than something anyone had actually designed. Each
   cluster now sits inside its own dark-glass chip (the same recipe already
   verified safe over all three photographs for the header) so the control
   row reads as one deliberate object, not a loose pair of controls. */
.hs-arrows{display:flex;gap:8px;padding:8px;border-radius:var(--r-pill);
  background:rgba(1,15,38,.46);-webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.5);}
.hs-arrow{width:52px;height:52px;border-radius:var(--r-pill);cursor:pointer;
  background:transparent;border:0;color:#fff;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;}
.hs-arrow:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);}
.hs-arrow:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

.hs-bar{position:absolute;left:0;right:0;bottom:40px;z-index:3;}
.hs-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.hs-dots{display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--r-pill);
  background:rgba(1,15,38,.46);-webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.5);}
/* The dot is a 4px rule by design, which is a 4px touch target by accident.
   The bar keeps its size; the button grows a transparent 13px band above and
   below it so a thumb can actually land on it. */
.hs-dot{width:36px;height:4px;padding:13px 0;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,255,255,.5);background-clip:content-box;
  box-sizing:content-box;overflow:hidden;transition:background .2s;}
.hs-dot span{background-clip:content-box;}
.hs-dot:hover{background:rgba(255,255,255,.72);}
.hs-dot:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.hs-dot span{display:block;height:100%;width:0;background:var(--gold);border-radius:inherit;}
/* The active dot doubles as the autoplay clock, so the wait is visible. */
.hs-dot.is-active span{animation:hs-fill var(--hs-dur,6500ms) linear forwards;}
.hero-slider.is-paused .hs-dot.is-active span{animation-play-state:paused;}
.hero-slider.no-autoplay .hs-dot.is-active span{width:100%;animation:none;}
@keyframes hs-fill{from{width:0} to{width:100%}}

.hs-scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:3;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);font-size:14px;animation:hs-bob 2.4s ease-in-out infinite;}
.hs-scroll:hover{color:#fff;}
@keyframes hs-bob{0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)}}

@media(max-width:900px){
  .hero-slider{min-height:560px;}
  .hs-copy{padding-top:var(--hdr-total,88px);padding-bottom:150px;}
  .hs-copy .wrap{padding-left:34px;}       /* full spine gutter is too wide a bite out of a phone's text column */
  .hs-copy .wrap::before{left:16px;}
  .hs-arrows{display:none;}                /* dots and swipe carry it */
  .hs-title{max-width:none;}
  .hs-bar{bottom:78px;}
  .hs-dots{gap:8px;padding:10px 14px;}     /* a run of five or six dots still has to fit a phone's width */
  .hs-dot{width:22px;}
}
@media(prefers-reduced-motion:reduce){
  .hs-media,.hs-slide{transition:none;}
  .hs-slide:nth-child(odd) .hs-media,
  .hs-slide:nth-child(even) .hs-media{transform:none;}
  .hs-slide:nth-child(odd).is-active .hs-media,
  .hs-slide:nth-child(even).is-active .hs-media{animation:none;}
  .hs-slide.is-active .hs-eyebrow,.hs-slide.is-active .hs-title,
  .hs-slide.is-active .hs-text,.hs-slide.is-active .hs-actions{animation:none;}
  .hs-slide.is-active .hs-copy .wrap::before{animation:none;transform:scaleY(1);opacity:1;}
  .hs-slide.is-active .hs-eyebrow::before{animation:none;transform:scaleX(1);}
  .hs-scroll{animation:none;}
  .hs-dot.is-active span{width:100%;animation:none;}
}

/* --------------------------------------------------- The floating header

   On a page that opens with the slider the header has no background of its
   own — it sits on the photograph. Colours come from three variables so the
   solid and transparent states differ by their values, not by a second copy
   of every rule. */
header.site{--hdr-fg:var(--tx);--hdr-brand:var(--pri);--hdr-crest:none;--hdr-fg-on:var(--pri);}
.brand .brand-name{color:var(--hdr-brand);}
.brand img.crest{filter:var(--hdr-crest);}
.nav-link{color:var(--hdr-fg);}

/* Over the slider the utility row starts hidden on every viewport — the
   photograph gets the full opening moment, with just the crest and the
   six-section menu over it — and slides in once the reader scrolls, where
   it earns its keep as persistent navigation (on mobile, just the one link
   .tb-desktop-only leaves visible). --hdr-total only has to clear the header
   as it stands *before* that reveal, so it was already sized for a
   topbar-less header on both breakpoints; only the desktop figure changes
   here, from topbar+bar down to the bar alone plus breathing room. Both
   figures track --hd (now 66px, was 76px) minus the same 10px, so the hero
   copy's own clearance never drifts out of sync with the header it's
   clearing. */
body.has-hero{--hdr-total:94px;}
@media(max-width:900px){ body.has-hero{--hdr-total:78px;} }

body.has-hero .topbar{max-height:0;opacity:0;}
html.is-scrolled body.has-hero .topbar{max-height:36px;opacity:1;}

/* True frosted glass, not a bare transparent bar: a blurred pane that sits on
   the photograph as an object in its own right, with an edge you can see.
   The two rows inside it (.topbar, .bar) are transparent to this shared
   surface — one pane, not two different tints stacked — and a hairline
   between them keeps the utility row legible as its own row.

   Tinted dark, not light. The header is a control surface the reader has to
   read reliably against three different photographs, not a decorative part
   of the image — a light tint measured out at rgba(255,255,255,.95) white
   nav text against it, over a bright patch of any photo (sky, a pale shirt,
   the cream tent fabric on the graduation slide) the two would nearly
   disappear into each other. A dark tint composites the same white text
   against something close to navy however bright the photo underneath is,
   which is what makes the contrast promise hold regardless of which slide is
   showing — the wash the photograph itself needed dialling back; the wash
   behind functional text is a different job. */
body.has-hero header.site{position:fixed;top:0;left:0;right:0;
  background:rgba(1,15,38,.58);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 32px -16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);
  --hdr-fg:rgba(255,255,255,.95);--hdr-brand:#fff;--hdr-crest:brightness(0) invert(1);--hdr-fg-on:#fff;}
body.has-hero .brand .brand-name small{color:var(--gold-l);}
body.has-hero .topbar{background:transparent;border-bottom:1px solid rgba(255,255,255,.14);}
/* The hovered, open or current item took a hard #fff, which was right only
   while the header is the frosted pane over the photograph. The moment the
   reader scrolls, or opens any panel, the bar turns white and every other
   label switches to --hdr-fg — but this one stayed white, so hovering a
   top-level item on the home page made its own label vanish (measured:
   rgb(255,255,255) on rgba(255,255,255,.94), a contrast ratio of 1:1).
   It now follows the same state machine as --hdr-fg, through its own token,
   which is what the three-variable design above was for. */
body.has-hero .nav-link:hover,
body.has-hero .nav-link.on,
body.has-hero .nav-item:hover .nav-link,
body.has-hero .nav-item.is-open .nav-link{color:var(--hdr-fg-on);}
body.has-hero .burger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;}
body.has-hero .acct-av{border:1px solid rgba(255,255,255,.4);}

/* Scrolled, or with a menu panel open, it becomes the ordinary solid bar —
   the panel is white and needs a white bar to sit under. */
html.is-scrolled body.has-hero header.site,
html.menu-open body.has-hero header.site{
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:transparent;box-shadow:none;
  --hdr-fg:var(--tx);--hdr-brand:var(--pri);--hdr-crest:none;--hdr-fg-on:var(--pri);}
html.is-scrolled body.has-hero header.site{box-shadow:var(--sh-2);}
html.is-scrolled body.has-hero .brand .brand-name small,
html.menu-open body.has-hero .brand .brand-name small{color:var(--gold-d);}
html.is-scrolled body.has-hero .topbar,
html.menu-open body.has-hero .topbar{background:var(--pri);}
html.is-scrolled body.has-hero .burger,
html.menu-open body.has-hero .burger{background:#fff;border-color:var(--line-2);color:var(--pri);}

/* The slider is the page's own top edge, so the section after it does not
   need the standing top padding. */
body.has-hero main > section:first-of-type{padding-top:0;}

/* The band under the slider: stats sit close to the fold, the quick actions
   below them, so the first scroll lands on something useful. */
.home-intro{padding:var(--s-6) 0 var(--s-7);}
.home-intro .stat-row{margin:0 0 var(--s-6);}

/* The floating WhatsApp launcher owns the bottom-right corner, which is
   where the slider's next-arrow would otherwise land. Reserve the space
   rather than stack two round buttons on top of each other. */
/* The launcher is a labelled pill, not a 58px circle, so the slider bar has to
   give back much more room than the 82px reserved when it was round. Measured:
   209px at 1440 and 188px at 390 — at 390 it was sitting on top of a slider
   dot, and on that breakpoint the dots are the only control the slider has.
   One variable so the reserve cannot drift from the thing it is reserving for. */
:root{ --wa-reserve:232px; }
@media(min-width:901px){ .hs-bar-inner{padding-right:var(--wa-reserve);} }

/* Below 901px reserving space does nothing: the dots are left-aligned and do
   not shrink, so the pill still covered three of them — and on that breakpoint
   the arrows are hidden, which makes the dots the slider's only control. The
   pill lifts clear of the bar instead. Scoped to has-hero, so it only moves on
   the one page that has a slider to clear. */
@media(max-width:900px){
  body.has-hero .wa{bottom:calc(140px + env(safe-area-inset-bottom, 0px));}
}

/* The institutional statement that opens the intro band, right under the
   slider. Tighter bottom margin than a normal .sec-head: the stats sit close
   beneath it, not a full section-gap away. */
.home-intro .sec-head{margin-bottom:var(--s-5);}

/* A single fact worth acting on now, not another whole section — a slim
   pill rather than a banner, so it reads as a nudge, not an interruption. */
.intake-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  width:fit-content;margin:0 auto var(--s-6);padding:12px 22px;border-radius:var(--r-pill);
  background:var(--gold-soft);border:1px solid rgba(212,168,67,.35);
  font-size:13.5px;font-weight:600;color:var(--pri);}
.intake-strip i{color:var(--gold-d);}
.intake-strip a{color:var(--pri);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.intake-strip a:hover{color:var(--gold-d);}
@media(max-width:640px){.intake-strip{font-size:12.5px;padding:10px 16px;text-align:center;}}

/* Two of the four stats are real links (Faculties, Programmes) — a slightly
   larger hit area than the bare text, offset back out with a negative
   margin so it doesn't nudge its neighbours. */
a.stat-link{display:block;text-decoration:none;border-radius:var(--r);
  padding:8px 14px;margin:-8px -14px;transition:background .2s ease,transform .2s ease;}
a.stat-link:hover{background:var(--gold-soft);transform:translateY(-3px);}
a.stat-link:hover .v{color:var(--gold-d);}
a.stat-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* "I am a…" — the University of Arizona's cheap-personalisation pattern.
   A segmented pill control, not a row of underlined text tabs, so it reads
   as a genuine control (something with state) rather than more body copy. */
.audience-picker{margin-top:var(--s-6);}
.audience-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx3);margin-bottom:14px;}
.audience-tabs{display:flex;gap:4px;width:fit-content;max-width:100%;margin:0 auto var(--s-5);
  padding:5px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);}
.audience-tab{padding:10px 20px;border-radius:var(--r-pill);border:0;background:transparent;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--tx2);cursor:pointer;white-space:nowrap;
  transition:background .2s ease,color .2s ease;}
.audience-tab:hover{color:var(--pri);}
.audience-tab.is-active{background:var(--pri);color:#fff;box-shadow:var(--sh-2);}
.audience-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.audience-panel .intake-strip{margin-bottom:var(--s-5);}

/* All four panels occupy the same grid cell; the stage's height is pinned
   by JS to the active panel and transitioned, so switching neither leaves
   dead space under a short panel nor jumps the sections below — it settles.
   Hidden panels are visibility:hidden (out of the a11y tree and tab order,
   like display:none) rather than display:none, so they can still be
   measured and cross-faded in place. */
.audience-panels{display:grid;align-items:start;overflow:hidden;
  transition:height .28s cubic-bezier(.22,.61,.36,1);}
@media(prefers-reduced-motion:reduce){.audience-panels{transition:none;}}
.audience-panel{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(8px);
  pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s .28s;}
.audience-panel.is-active{visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s 0s;}
@media(prefers-reduced-motion:reduce){.audience-panel{transition:none;}}

@media(max-width:640px){
  /* Four labels ("Prospective Student", "Parent / Guardian"...) do not fit
     one row at phone width. A 2×2 grid of self-contained pills beats the
     old horizontal scroll: nothing is cut off, nothing has to be discovered
     by swiping, and all four choices are visible at once. */
  .audience-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;
    padding:0;background:transparent;border:0;border-radius:0;}
  .audience-tab{width:100%;text-align:center;padding:12px 8px;
    border:1px solid var(--line);background:#fff;}
  .audience-tab.is-active{border-color:var(--pri);}
}

/* The About band's photo card: a real photograph with the crest sitting
   over its bottom edge like a seal on a letterhead, caption beneath. */
.heritage-card{margin:0 auto;max-width:400px;}
.heritage-frame{position:relative;display:block;}
.heritage-photo{display:block;width:100%;height:auto;border-radius:var(--r-lg);
  box-shadow:var(--sh-2);}
.heritage-crest{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  width:88px;height:88px;border-radius:50%;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-2);display:flex;align-items:center;justify-content:center;}
.heritage-crest img{width:60px;height:auto;}
.heritage-card figcaption{margin-top:58px;text-align:center;font-size:12.5px;
  color:var(--tx3);letter-spacing:.02em;}
@media(max-width:820px){
  .heritage-card{max-width:340px;margin-top:8px;}
}

/* Two facts already written for /about, never shown here — full sentences,
   not squeezed into a pill neither is short enough to survive. */
.credential-row{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.credential-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;
  border-radius:var(--r);background:rgba(255,255,255,.65);border:1px solid var(--line);
  font-size:13.5px;line-height:1.55;color:var(--tx2);}
.credential-item i{flex:0 0 auto;margin-top:2px;color:var(--gold-d);font-size:15px;}

/* Four faculties render as a deliberate 2x2, never an auto-flowing 3+1 (the
   old 5-item grid's own comment warned about exactly this stranded-card
   risk) — the minmax lower bound is picked so exactly two fit the wrap
   width and one fits below it, with no width where 3 columns sneak in. */
.faculty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:26px;margin-bottom:var(--s-4);}
/* a.card pins flex-direction:column at element+class specificity, so the row
   override must match it — same trap the grad-school strip hit first. */
a.faculty-card{flex-direction:row;}
.faculty-card{display:flex;gap:20px;align-items:stretch;}
.faculty-card-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.faculty-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;}
.faculty-card-top .ic{margin-bottom:0;}
.faculty-card .tag-row{margin:2px 0 4px;}
.faculty-card .tag-row .pill{font-size:12px;padding:6px 12px;}
.faculty-card .link{margin-top:auto;padding-top:10px;font-size:13px;}

/* Hover speaks through the whole card, not an underline and not a line
   racing across one edge: the card takes a gold ring (a crisp border plus a
   soft gold halo, drawn with box-shadow so no pseudo-element geometry can
   mis-clip), the photograph breathes inside its frame, the icon flips
   navy-and-gold via the shared .card rule, and the arrow slides. The .link
   underline is switched off here — the card is already answering. */
.faculty-card{position:relative;overflow:hidden;}
/* The homepage's card family shares one hover. Scoped to these four rather
   than the sitewide .card:hover, so pages nobody has reviewed this round
   keep the hover they were designed with. */
.faculty-card:hover,.faculty-card:focus-visible,
.grad-school-strip:hover,.grad-school-strip:focus-visible,
.scholarship-featured:hover,.scholarship-featured:focus-visible,
.scholarship-card:hover,.scholarship-card:focus-visible{
  border-color:var(--gold);
  box-shadow:0 0 0 1.5px var(--gold),0 0 0 6px var(--gold-soft),var(--sh-3);}
.faculty-card .link::after{content:none;}
.faculty-card-media{flex:0 0 190px;width:190px;align-self:stretch;display:block;
  overflow:hidden;border-radius:var(--r-lg);}
.faculty-card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.faculty-card:hover .faculty-card-media img{transform:scale(1.05);}
@media(prefers-reduced-motion:reduce){
  .faculty-card-media img{transition:none;}
}
@media(max-width:640px){
  a.faculty-card{flex-direction:column;}
  .faculty-card-media{order:-1;width:100%;flex:none;aspect-ratio:16/9;}
}

/* The Graduate School's own shape: a single horizontal strip instead of a
   fifth box identical to the other four, matching the heading's own "one
   Graduate School" — different in kind, not just one more item in a grid. */
a.grad-school-strip{flex-direction:row;}
.grad-school-strip{display:flex;align-items:center;gap:22px;padding:24px 28px;}
.grad-school-strip .ic{width:52px;height:52px;flex:0 0 auto;border-radius:var(--r);
  background:var(--pri-soft);color:var(--pri);display:flex;align-items:center;
  justify-content:center;font-size:20px;transition:background .2s,color .2s;}
.grad-school-strip:hover .ic{background:var(--pri);color:var(--gold);}
.grad-school-body{flex:1 1 auto;min-width:0;}
.grad-school-body .tag{margin-bottom:6px;}
.grad-school-body h3{font-size:17px;margin:0 0 4px;}
.grad-school-body p{font-size:14.5px;margin:0 0 10px;}
.grad-school-body .link{font-size:13px;}
.grad-school-strip .link::after{content:none;}
.grad-school-media{flex:0 0 260px;width:260px;height:168px;align-self:center;
  display:block;overflow:hidden;border-radius:var(--r-lg);}
.grad-school-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.grad-school-strip:hover .grad-school-media img{transform:scale(1.05);}
@media(prefers-reduced-motion:reduce){.grad-school-media img{transition:none;}}
@media(max-width:700px){
  a.grad-school-strip{flex-direction:column;}
  .grad-school-strip{align-items:flex-start;}
  .grad-school-media{order:-1;width:100%;height:auto;flex:none;aspect-ratio:16/9;}
}

/* Scholarships as a bento: the Kabaka's Scholarship holds a tall featured
   cell — the one scheme no other university can offer earns the flagship
   spot and a standing gold rule — while the other five stand beside it as
   compact cards. */
/* The faculty index cards lead with their own cover photograph, cropped to a
   consistent band so five differently-shot images sit as one grid. Hover
   borrows the homepage's card language: the picture breathes, the card takes
   the gold ring. */
.faculty-index-card{overflow:hidden;padding-top:0;}
.fi-media{display:block;margin:-26px -26px 4px;aspect-ratio:16/9;overflow:hidden;}
.fi-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.faculty-index-card:hover .fi-media img{transform:scale(1.05);}
.faculty-index-card:hover,.faculty-index-card:focus-visible{
  border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),0 0 0 6px var(--gold-soft),var(--sh-3);}
@media(prefers-reduced-motion:reduce){.fi-media img{transition:none;}}

.scholarship-bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:24px;
  margin-bottom:var(--s-4);}
.scholarship-featured{grid-row:span 3;display:flex;flex-direction:column;
  position:relative;overflow:hidden;}
.scholarship-featured::after{content:'';position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--gold);}
.scholarship-featured .ic{background:var(--gold-soft);color:var(--gold-d);}
.scholarship-featured h3{font-size:20px;}
.scholarship-facts{display:grid;gap:10px;margin:16px 0 8px;}
.scholarship-facts .fact{font-size:13.5px;line-height:1.5;color:var(--tx);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 13px;}
.scholarship-facts .fact span{display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);margin-bottom:3px;}
.scholarship-featured .link{margin-top:auto;padding-top:14px;font-size:13.5px;}
.scholarship-featured .link::after{content:none;}
.scholarship-card{display:flex;flex-direction:column;gap:5px;padding:20px;}
.scholarship-card .ic{width:40px;height:40px;font-size:16px;margin-bottom:8px;}
.scholarship-card h3{font-size:15.5px;margin:0;}
.scholarship-cov{font-size:12.5px;color:var(--gold-d);font-weight:600;}
/* The sixth cell closes the bento on purpose: a quiet "all schemes" tile
   instead of either a stranded card or an empty hole. */
.scholarship-more{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:6px;padding:20px;border:1.5px dashed var(--line-2);
  border-radius:var(--r-lg);color:var(--pri);font-weight:700;font-size:15px;
  transition:border-color .2s,background .2s;}
.scholarship-more span{font-size:12.5px;font-weight:500;color:var(--tx2);}
.scholarship-more:hover{border-color:var(--pri);background:var(--pri-soft);}
.sec-cta{text-align:center;margin-top:var(--s-3);}
@media(max-width:980px){
  .scholarship-bento{grid-template-columns:1fr 1fr;}
  .scholarship-featured{grid-row:auto;grid-column:1/-1;}
}
@media(max-width:560px){.scholarship-bento{grid-template-columns:1fr;}}

/* The academic year as four dated stops. Each carries a real calendar chip
   (day over month) rather than a bare dot, so the strip reads as dates. */
.year-line{list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));}
.year-stop{display:flex;gap:16px;align-items:flex-start;padding-top:18px;
  border-top:2px solid var(--line);}
.year-date{flex:0 0 auto;width:54px;text-align:center;border-radius:var(--r);
  background:var(--pri);color:#fff;padding:8px 4px 7px;line-height:1;}
.year-day{display:block;font-family:var(--font-display);font-size:22px;font-weight:600;}
.year-mon{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-top:4px;}
.year-body{min-width:0;}
.year-when{display:block;font-family:ui-monospace,Menlo,monospace;font-size:11px;
  font-weight:700;color:var(--gold-d);}
.year-what{display:block;font-size:14.5px;font-weight:600;color:var(--tx);
  line-height:1.5;margin:6px 0 9px;}
.year-sem{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);}

/* ---------------------------------------------------- The almanac page */
.alm-head{display:flex;gap:30px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:var(--s-5);}
.alm-next{flex:0 0 auto;max-width:340px;background:var(--pri);color:#fff;
  border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-2);}
.alm-next-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.alm-next strong{display:block;font-size:15px;font-weight:600;line-height:1.45;}
.alm-next-when{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-size:12.5px;color:rgba(255,255,255,.78);}

.alm-milestones{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));}
.alm-milestone{position:relative;padding-top:22px;border-top:2px solid var(--gold);}
.alm-milestone.is-past{border-top-color:var(--line-2);opacity:.62;}
.alm-dot{position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--gold);border:2px solid #fff;box-shadow:0 0 0 1px var(--gold);}
.alm-milestone.is-past .alm-dot{background:var(--line-2);box-shadow:0 0 0 1px var(--line-2);}
.alm-ms-when{display:block;font-family:ui-monospace,Menlo,monospace;font-size:11px;
  font-weight:700;color:var(--gold-d);}
.alm-ms-what{display:block;font-size:14px;font-weight:600;color:var(--tx);
  line-height:1.5;margin-top:5px;}
.alm-ms-tag{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);}

.alm-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-3);}
.alm-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;}
.alm-chip:hover{border-color:var(--pri);color:var(--pri);}
.alm-chip.is-active{background:var(--pri);border-color:var(--pri);color:#fff;}
.alm-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.alm-empty{font-size:14px;color:var(--tx2);padding:20px 0;}

.alm-month{margin-bottom:var(--s-5);}
.alm-month-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;font-family:var(--font-display);font-size:22px;font-weight:600;
  color:var(--pri);margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--gold);}
.alm-month-sem{font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-d);}
.alm-table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);
  background:#fff;}
.alm-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px;}
.alm-table th{text-align:left;padding:12px 16px;background:var(--surface);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);border-bottom:1px solid var(--line);}
.alm-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--tx2);line-height:1.55;}
.alm-table tr:last-child td{border-bottom:0;}
.alm-table tbody tr:hover{background:var(--surface);}
.alm-table tr.is-holiday{background:var(--gold-soft);}
.alm-table tr.is-holiday:hover{background:#fdeecd;}
.alm-when{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:600;
  color:var(--gold-d);white-space:nowrap;}
.alm-activity{display:block;color:var(--tx);font-weight:500;}
.alm-cat{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:10.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);}
.alm-who{font-size:12.5px;color:var(--tx2);}

.alm-ongoing{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.alm-ongoing-item{display:flex;gap:14px;padding:18px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:#fff;}
.alm-ongoing-item .ic{width:38px;height:38px;flex:0 0 auto;border-radius:var(--r);
  background:var(--pri-soft);color:var(--pri);display:flex;align-items:center;
  justify-content:center;font-size:15px;}
.alm-ongoing-when{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:5px;}
.alm-ongoing-item p{font-size:13.5px;color:var(--tx);line-height:1.55;margin:0 0 6px;}

.alm-abbr{display:grid;gap:2px 26px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.alm-abbr-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);
  font-size:13px;}
.alm-abbr-row dfn{flex:0 0 92px;font-style:normal;font-weight:700;color:var(--pri);}
.alm-abbr-row span{color:var(--tx2);}
.alm-note{margin-top:var(--s-4);padding:16px 18px;border-left:3px solid var(--gold);
  background:var(--surface);font-size:13.5px;line-height:1.65;color:var(--tx2);}
@media(max-width:640px){
  .alm-next{max-width:none;width:100%;}
}

/* Leadership as medallions. A circle is the only frame that reconciles four
   portraits shot at different crops and backgrounds, and it echoes the
   crest-seal in the About band. The ring starts as a hairline and turns
   gold on hover; a small navy seal rotates up from under the rim, so the
   whole medallion answers rather than one edge of it. */
.lead-row{display:grid;gap:34px 26px;margin-bottom:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));}
.lead-medallion{display:flex;flex-direction:column;align-items:center;text-align:center;}
.lead-frame{position:relative;display:block;width:100%;max-width:172px;}
.lead-ring{position:relative;display:block;width:100%;aspect-ratio:1;
  border-radius:50%;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px var(--line),0 14px 30px -18px rgba(1,39,112,.45);
  transition:box-shadow .28s ease,transform .28s cubic-bezier(.22,.61,.36,1);}
.lead-ring img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);}
/* Hidden by opacity, not by a clip: once the seal moved outside the ring
   (so it can overlap the rim) nothing crops it any more, and a merely
   translated seal came to rest on top of the name below. */
.lead-seal{position:absolute;left:50%;bottom:0;transform:translate(-50%,24%) scale(.6);
  opacity:0;pointer-events:none;
  width:38px;height:38px;border-radius:50%;background:var(--pri);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  box-shadow:0 6px 16px -6px rgba(1,39,112,.6);
  transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .24s ease;}
/* Keyboard focus always gets the affordance; pointer hover only where hover
   is real, so a tap on a touch screen can never leave a medallion stuck
   wearing its ring. */
.lead-medallion:focus-visible .lead-ring{transform:translateY(-4px);
  box-shadow:0 0 0 2px var(--gold),0 0 0 7px var(--gold-soft),0 20px 38px -18px rgba(1,39,112,.5);}
.lead-medallion:focus-visible .lead-seal{transform:translate(-50%,-6%) scale(1);opacity:1;}
@media(hover:hover){
  .lead-medallion:hover .lead-ring{transform:translateY(-4px);
    box-shadow:0 0 0 2px var(--gold),0 0 0 7px var(--gold-soft),0 20px 38px -18px rgba(1,39,112,.5);}
  .lead-medallion:hover .lead-ring img{transform:scale(1.06);}
  .lead-medallion:hover .lead-seal{transform:translate(-50%,-6%) scale(1);opacity:1;}
}
.lead-name{display:block;font-family:var(--font-display);font-size:17px;font-weight:600;
  color:var(--pri);line-height:1.3;margin-top:20px;}
.lead-role{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-d);margin-top:6px;}
@media(prefers-reduced-motion:reduce){
  .lead-ring,.lead-ring img,.lead-seal{transition:none;}
}

/* News & Events on a fixed photograph: the page scrolls, the picture holds
   still, the cards float over it. background-attachment:fixed only where a
   real pointer exists — mobile browsers ignore or jank it, so they get the
   photograph scrolling normally instead of a broken promise. */
.band-news{position:relative;
  /* The wash was .87-.92 navy, which is a navy band with a rumour of a
     photograph behind it — the picture may as well not have been there. It is
     now a graded scrim instead of a flat one: heavy at the top where the white
     heading sits, opening up through the middle where the cards carry their
     own white background and need no help, and closing slightly at the foot so
     the band meets the next section rather than fraying into it.

     Measured against the rendered pixels, not judged by eye: white on the mean
     behind the heading is 14.0:1, and on the single brightest pixel there —
     rgb(86,98,115), a patch of sunlit grass — still 6.2:1. Body text needs
     4.5:1. */
  background:
    linear-gradient(180deg,
      rgba(4,19,43,.90) 0%,
      rgba(4,19,43,.74) 18%,
      rgba(4,19,43,.46) 38%,
      rgba(4,19,43,.40) 72%,
      rgba(4,19,43,.58) 100%),
    url('../images/easyguide/dest-globe-1200.jpg') center/cover no-repeat;
  /* The gradient scrolls so its stops track this section; only the photograph
     is fixed. Both fixed would size the gradient to the viewport instead, and
     the heading's cover would drift as the reader scrolls. */
  background-attachment:scroll,fixed;}
@media (hover:none),(max-width:900px){
  .band-news{background-attachment:scroll,scroll;}
}
.band-news .sec-head h2{color:#fff;}
/* Was .75 alpha, which composites to 4.3:1 over that same brightest pixel —
   under AA by a hair. .85 puts it at 5.0:1 and is indistinguishable to look at. */
.band-news .sec-head p{color:rgba(255,255,255,.85);}
.band-news .news-split{display:grid;grid-template-columns:2fr 1fr;gap:28px;}
.band-news .news-cards{display:grid;gap:var(--s-3);align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}
.band-news .proj-card{background:rgba(255,255,255,.97);border-color:transparent;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.55);}
.events-panel{background:rgba(255,255,255,.97);border-radius:var(--r-lg);
  padding:24px;box-shadow:0 20px 44px -20px rgba(0,0,0,.55);align-self:start;}
/* With real rows the panel stands the full column; empty, it hugs its one
   line instead of stretching a blank card to the news column's height. */
.events-panel:has(.event-row){align-self:stretch;height:100%;}
.events-panel .sub{font-size:11.5px;color:var(--gold-d);font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;margin-bottom:14px;}
.event-row{padding:10px 0;border-bottom:1px solid var(--line);}
.event-when{font-family:ui-monospace,Menlo,monospace;font-size:11px;
  color:var(--gold-d);font-weight:700;}
.event-when span{color:var(--tx3);font-weight:500;}
.event-title{font-weight:600;font-size:14px;color:var(--tx);}
.event-venue{font-size:12px;color:var(--tx2);}
.event-empty{font-size:13px;color:var(--tx2);}
.events-panel .events-all{margin-top:14px;color:var(--pri);font-weight:600;font-size:14px;}
.band-news-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:30px;}
.band-news .btn.ghost{color:#fff;border-color:rgba(255,255,255,.42);}
.band-news .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}
@media(max-width:900px){
  .band-news .news-split{grid-template-columns:1fr;}
}

/* =========================================================================
   EasyGuide components
   Everything below is specific to the EasyGuide public site and is namespaced
   .eg-* so it never collides with the inherited system above. It reads from
   the same tokens, so a palette change still reaches all of it.
   ========================================================================= */

/* ------------------------------------------------------------------ Seals
   Cinzel, letterspaced, with a short gold rule. Inscriptional Roman capitals
   are what official documents are set in, which is precisely the association
   a visa consultancy wants. Used ONLY for short section labels — never a
   sentence, because all-caps at length is slow to read. */
.eyebrow.seal{
  font-family:var(--font-seal);font-weight:600;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);
  display:flex;align-items:center;gap:12px;
}
.sec-head:not(.left) .eyebrow.seal{justify-content:center;}
.eyebrow.seal::before,.sec-head:not(.left) .eyebrow.seal::after{
  content:'';height:1px;width:34px;background:var(--gold);flex:none;
}
.sec-head.left .eyebrow.seal::after{display:none;}
.band-deep .eyebrow.seal{color:var(--gold-l);}
.band-deep .eyebrow.seal::before,.band-deep .eyebrow.seal::after{background:var(--gold-l);}

/* Header utility row: the accreditation mark */
.tb-accred{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-seal);
  font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.tb-accred i{color:var(--gold);}
.hd-assess{font-weight:600;}
/* Footer wordmark replaces the square crest, so it must not be squeezed. */
.foot .brand img.crest.wm{height:auto;width:227px;max-width:60%;}

/* ------------------------------------------------------------ Trust strip
   Sits directly under the hero. Four verifiable facts, not four adjectives. */
.eg-trust{background:var(--pri-dd);color:#fff;padding:0;}
.eg-trust-row{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(255,255,255,.12);
}
.eg-trust-row li{
  background:var(--pri-dd);padding:26px 26px 28px;display:flex;
  flex-direction:column;gap:5px;
}
.eg-trust-row i{color:var(--gold-l);font-size:15px;margin-bottom:5px;}
.eg-trust-row .t{
  font-family:var(--font-seal);font-weight:700;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;
}
.eg-trust-row .d{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.74);}

/* --------------------------------------------------------- The three doors
   The audience fork. Three cards, photography led, each one answering a
   sentence a visitor would actually say to themselves. */
.eg-doors-band{padding:var(--s-7) 0 var(--s-6);}
.eg-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:var(--s-5);}
.eg-door{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,border-color .2s;
}
.eg-door:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--gold);}
.eg-door > img{width:100%;height:190px;object-fit:cover;}
.eg-door-body{display:flex;flex-direction:column;gap:9px;padding:24px 26px 28px;flex:1;}
.eg-door .k{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-seal);
  font-weight:700;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-d);
}
.eg-door .h{font-family:var(--font-display);font-size:24px;font-weight:600;
  color:var(--pri);line-height:1.2;letter-spacing:-.015em;}
.eg-door .p{font-size:14.5px;line-height:1.65;color:var(--tx2);flex:1;}
.eg-door .go{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--pri-l);margin-top:4px;
}
.eg-door:hover .go{color:var(--gold-d);}
.eg-door .go i{transition:transform .2s;}
.eg-door:hover .go i{transform:translateX(4px);}

/* ----------------------------------------------------------- Visa services */
.eg-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--s-5);}
.eg-svc{
  display:flex;flex-direction:column;gap:11px;padding:28px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:transform .25s,box-shadow .25s,border-color .2s;
}
.eg-svc:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--gold);}
.eg-svc .ic{
  width:46px;height:46px;border-radius:var(--r);background:var(--pri-soft);
  color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:17px;
  transition:background .2s,color .2s;
}
.eg-svc:hover .ic{background:var(--pri);color:var(--gold-l);}
.eg-svc .h{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--pri);letter-spacing:-.012em;}
.eg-svc .p{font-size:14px;line-height:1.65;color:var(--tx2);flex:1;}
.eg-svc .f{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
}
.eg-svc .fee{font-size:12.5px;font-weight:600;color:var(--gold-d);}
.eg-svc .f i{color:var(--pri-l);font-size:12px;transition:transform .2s;}
.eg-svc:hover .f i{transform:translateX(4px);}

/* ------------------------------------------------------------- The process
   Six numbered links reading as a chain. The connecting rule is drawn on the
   ::before of each item rather than as a single background, so it survives
   wrapping to two rows on a narrower screen. */
.eg-process-band{background:var(--surface);padding:var(--s-7) 0;}
.eg-chain{
  list-style:none;display:grid;grid-template-columns:repeat(6,1fr);
  gap:0;margin-top:var(--s-5);counter-reset:eg;
}
.eg-link{position:relative;padding:0 18px;}
.eg-link + .eg-link{border-left:1px solid var(--line-2);}
.eg-link .n{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--r-pill);
  background:var(--pri);color:var(--gold-l);
  font-family:var(--font-seal);font-weight:700;font-size:13px;letter-spacing:.04em;
  margin-bottom:15px;box-shadow:0 6px 16px -8px rgba(1,39,112,.7);
}
.eg-link h3{font-size:16px;color:var(--pri);margin-bottom:7px;letter-spacing:-.01em;}
.eg-link p{font-size:13.5px;line-height:1.6;color:var(--tx2);}

/* ---------------------------------------------------------- Why EasyGuide */
.eg-why{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 34px;margin-top:var(--s-5);}
.eg-why-item{position:relative;padding-left:52px;}
.eg-why-item > i{
  position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:var(--r);
  background:var(--gold-soft);color:var(--gold-d);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.eg-why-item h3{font-size:16.5px;color:var(--pri);margin-bottom:6px;letter-spacing:-.01em;}
.eg-why-item p{font-size:14px;line-height:1.65;color:var(--tx2);}

/* ------------------------------------------------------------ Destinations */
.eg-dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:var(--s-5);}
.eg-dest{
  position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2);isolation:isolate;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s;
}
.eg-dest:hover{transform:translateY(-6px);box-shadow:var(--sh-4);}
.eg-dest img{width:100%;height:300px;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.eg-dest:hover img{transform:scale(1.06);}
.eg-dest::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,15,40,.92) 0%,rgba(0,15,40,.55) 38%,rgba(0,15,40,0) 70%);
}
.eg-dest-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:22px;display:flex;flex-direction:column;gap:5px;}
.eg-dest .r{
  font-family:var(--font-seal);font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-l);
}
.eg-dest .h{font-family:var(--font-display);font-size:23px;font-weight:600;color:#fff;letter-spacing:-.015em;}
.eg-dest .p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.82);}

/* -------------------------------------------------------------- Quotes */
.eg-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:var(--s-5);}
.eg-quote{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--pink);
  border-radius:var(--r);padding:28px;box-shadow:var(--sh-1);
}
.eg-quote blockquote{font-family:var(--font-display);font-size:19px;line-height:1.5;
  color:var(--pri);font-style:italic;margin-bottom:16px;letter-spacing:-.01em;}
.eg-quote figcaption{display:flex;flex-direction:column;gap:2px;}
.eg-quote .nm{font-size:14px;font-weight:700;color:var(--tx);}
.eg-quote .dt{font-size:12.5px;color:var(--tx3);}

/* -------------------------------------------------------------- Journal */
.eg-journal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--s-5);}
.eg-post{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .25s,box-shadow .25s,border-color .2s;
}
.eg-post:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--pri-soft-2);}
.eg-post img{width:100%;height:170px;object-fit:cover;}
.eg-post-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;}
.eg-post .dt{
  font-family:var(--font-seal);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-d);
}
.eg-post .h{font-family:var(--font-display);font-size:18px;font-weight:600;
  color:var(--pri);line-height:1.3;letter-spacing:-.012em;}

/* --------------------------------------------------------- Closing band */
.eg-final{text-align:center;}
.eg-final .sec-head{margin-left:auto;margin-right:auto;}
.eg-final .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--s-4);}

/* =========================================================== Responsive
   The brief is emphatic that most of this audience arrives on a phone from
   WhatsApp, Facebook, Instagram or Google, so these are not afterthoughts. */
@media(max-width:1100px){
  .eg-doors{grid-template-columns:1fr;}
  .eg-door > img{height:210px;}
  .eg-svc-grid{grid-template-columns:repeat(2,1fr);}
  .eg-why{grid-template-columns:repeat(2,1fr);}
  .eg-dest-grid{grid-template-columns:repeat(2,1fr);}
  .eg-journal{grid-template-columns:1fr;}
  .eg-trust-row{grid-template-columns:repeat(2,1fr);}
  /* Six abreast becomes two rows of three; the vertical rule between items
     would then hang off the end of each row, so it is redrawn per row. */
  .eg-chain{grid-template-columns:repeat(3,1fr);row-gap:34px;}
  .eg-link:nth-child(3n+1){border-left:0;}
}
@media(max-width:720px){
  .eg-svc-grid{grid-template-columns:1fr;}
  .eg-why{grid-template-columns:1fr;}
  .eg-dest-grid{grid-template-columns:1fr;}
  .eg-dest img{height:240px;}
  .eg-trust-row{grid-template-columns:1fr;}
  .eg-chain{grid-template-columns:1fr;row-gap:26px;}
  .eg-link{border-left:0 !important;padding:0 0 0 62px;}
  .eg-link .n{position:absolute;left:0;top:0;margin-bottom:0;}
  .eg-doors-band{padding:var(--s-6) 0 var(--s-5);}
  .eg-final .ctas .btn{width:100%;justify-content:center;}
  .foot .brand img.crest.wm{max-width:80%;}
}

/* ------------------------------------------------------- Prose & callouts */
.eg-prose{max-width:760px;}
.eg-prose p{font-size:17px;line-height:1.8;color:var(--tx2);margin-bottom:18px;}
.eg-prose p:first-child{font-size:19px;color:var(--tx);}

/* A framed aside for something the page deliberately does NOT list — a stale
   document checklist on a visa site is worse than none, so several pages say
   so in one of these rather than publishing a list that will rot. */
.eg-note{
  display:flex;gap:20px;align-items:flex-start;margin-top:var(--s-5);
  padding:26px 28px;background:var(--pri-soft);border:1px solid var(--pri-soft-2);
  border-left:3px solid var(--gold);border-radius:var(--r);
}
.eg-note > i{color:var(--gold-d);font-size:19px;margin-top:3px;flex:none;}
.eg-note h3{font-size:17px;color:var(--pri);margin-bottom:8px;letter-spacing:-.01em;}
.eg-note p{font-size:14.5px;line-height:1.7;color:var(--tx2);margin-bottom:14px;}

/* --------------------------------------------------------------- Forms
   Deliberately plain and roomy. Most of this audience is filling these in on
   a phone, often on a slow connection, often anxious about the outcome — so
   fields are large, labels sit above rather than inside, and nothing is
   hidden behind a placeholder that vanishes when you start typing. */
.eg-form{max-width:680px;}
.eg-field{margin-bottom:20px;}
.eg-field label{
  display:block;font-size:13.5px;font-weight:600;color:var(--tx);margin-bottom:7px;
}
.eg-field label .opt{font-weight:400;color:var(--tx3);}
.eg-field input,.eg-field select,.eg-field textarea{
  width:100%;font-family:var(--font);font-size:15.5px;color:var(--tx);
  padding:13px 15px;min-height:48px;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s;
}
.eg-field textarea{min-height:120px;resize:vertical;line-height:1.65;}
.eg-field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235C6470' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px;padding-right:40px;}
.eg-field input:focus,.eg-field select:focus,.eg-field textarea:focus{
  outline:none;border-color:var(--pri-l);box-shadow:0 0 0 3px rgba(10,69,168,.14);
}
.eg-field .eg-hint{font-size:12.5px;line-height:1.6;color:var(--tx3);margin-top:7px;}
.eg-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.eg-form-err{
  padding:13px 17px;background:var(--bad-soft);border:1px solid rgba(196,43,43,.3);
  border-radius:var(--r-sm);color:var(--bad);font-size:14px;font-weight:600;margin-bottom:22px;
  display:flex;align-items:center;gap:10px;
}
.eg-fs{border:0;margin:0 0 var(--s-4);padding:0;}
.eg-fs legend{
  display:flex;align-items:center;gap:12px;font-family:var(--font-display);
  font-size:21px;font-weight:600;color:var(--pri);letter-spacing:-.015em;
  margin-bottom:6px;padding:0;
}
.eg-fs legend .n{
  font-family:var(--font-seal);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--gold-d);background:var(--gold-soft);border-radius:var(--r-xs);
  padding:5px 9px;
}
.eg-fs-note{font-size:14px;line-height:1.65;color:var(--tx2);margin:0 0 20px;}
.eg-fineprint{font-size:12.5px;line-height:1.7;color:var(--tx3);margin-top:18px;max-width:58ch;}

/* ------------------------------------------------- Two-column form layouts */
.eg-assess-grid,.eg-contact-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:52px;align-items:start;}
.eg-assess-side,.eg-contact-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(var(--hd) + 24px);}
.eg-card{
  background:var(--pri);color:#fff;border-radius:var(--r-lg);padding:26px 28px;
  box-shadow:var(--sh-3);
}
.eg-card .eyebrow.seal{color:var(--gold-l);}
.eg-card .eyebrow.seal::before{background:var(--gold-l);}
.eg-card h3{font-family:var(--font-display);font-size:21px;color:#fff;margin:10px 0 9px;letter-spacing:-.015em;}
.eg-card p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.82);margin-bottom:16px;}
.eg-card .btn{width:100%;justify-content:center;}
.eg-card-quiet{background:#fff;color:var(--tx);border:1px solid var(--line);box-shadow:var(--sh-1);}
.eg-card-quiet h3{color:var(--pri);}
.eg-card-quiet p{color:var(--tx2);}
.eg-card-quiet .eyebrow.seal{color:var(--gold-d);}
.eg-card-quiet .eyebrow.seal::before{background:var(--gold);}

.eg-next{list-style:none;counter-reset:n;display:grid;gap:13px;margin:12px 0 0;padding:0;}
.eg-next li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6;color:rgba(255,255,255,.88);}
.eg-next li .n{
  flex:none;width:23px;height:23px;border-radius:var(--r-pill);background:var(--gold);
  color:var(--pri-d);font-size:11.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
/* The text is one flex item, so inline markup inside it stays inline. */
.eg-next li .t{flex:1;min-width:0;}
.eg-next strong{color:#fff;}

.eg-contact-list{list-style:none;display:grid;gap:15px;margin:0;padding:0;}
.eg-contact-list li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;}
.eg-contact-list li > i{color:var(--gold-d);font-size:15px;width:20px;margin-top:3px;flex:none;}
.eg-contact-list li span{display:flex;flex-direction:column;gap:1px;}
.eg-contact-list strong{
  font-family:var(--font-seal);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx3);
}
.eg-contact-list a{color:var(--pri);font-weight:600;}
.eg-contact-list a:hover{color:var(--gold-d);}

/* ------------------------------------------------------- Journal index */
.eg-journal-index{grid-template-columns:repeat(3,1fr);}
.eg-post .x{font-size:13.5px;line-height:1.6;color:var(--tx2);}

@media(max-width:1000px){
  .eg-assess-grid,.eg-contact-grid{grid-template-columns:1fr;gap:38px;}
  .eg-assess-side,.eg-contact-side{position:static;}
  .eg-journal-index{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){
  .eg-row{grid-template-columns:1fr;}
  .eg-note{flex-direction:column;gap:14px;padding:22px;}
  .eg-journal-index{grid-template-columns:1fr;}
  .eg-form .btn{width:100%;justify-content:center;}
}

/* ==================================================== EasyGuide corrections
   Two rules the inherited system sized for a different brand and a shorter
   set of button labels. Both were measured, not guessed. */

/* The EasyGuide monogram is a wide lockup (roughly 1.66:1), not the square
   crest the rule above was written for. At the inherited 52px height it came
   out 86px wide and dominated the bar. Set by height; the aspect does the rest. */
.brand img.crest{height:36px;}
html.is-scrolled .brand img.crest{height:31px;}
@media(max-width:620px){ .brand img.crest{height:29px;} }

/* .btn is white-space:nowrap, which is right for "Apply Now" and wrong for
   "Not sure which applies to you? Start the assessment". Measured at a 390px
   viewport the hero CTA rendered 482px wide and pushed the document's
   scrollWidth to 502 — a horizontal scrollbar on every phone, on a site whose
   brief says most visitors arrive on one. Long labels wrap below 720px. */
@media(max-width:720px){
  .btn{white-space:normal;text-align:center;line-height:1.35;}
  .hs-actions .btn,.ctas .btn,.sec-cta .btn,.eg-note .btn{
    width:100%;justify-content:center;
  }
  .hs-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;}
}


/* The header's second action is a ghost button, and .btn.ghost is navy ink on
   a transparent ground — correct on the solid white bar, invisible on the
   transparent bar that floats over a hero photograph. The header already
   publishes its own foreground in --hdr-fg-on; this makes the button follow
   it, and gives it a scrim over photography the same way .hs-ghost does for
   the hero's own buttons. */
.hd-assess{color:var(--hdr-fg-on);border-color:var(--line-2);}
body.has-hero:not(.is-scrolled) .hd-assess,
html:not(.is-scrolled) body.has-hero .hd-assess{
  color:#fff;border-color:rgba(255,255,255,.34);background:rgba(1,15,38,.34);
}
html:not(.is-scrolled) body.has-hero .hd-assess:hover{
  background:rgba(1,15,38,.58);border-color:rgba(255,255,255,.6);color:#fff;
}

/* A childless top-level item renders as <a class="nav-link">, not <button>.
   The legacy `.nav a` rule (specificity 0,1,1) sets dark-grey ink and beats
   `.nav-link` (0,1,0), so "Journal" came out near-invisible on the header that
   floats over a hero photograph. MRU had no childless sections, so the clash
   never surfaced there. Matching the button's treatment exactly. */
.nav a.nav-link{color:var(--hdr-fg);}
.nav a.nav-link:hover{color:var(--hdr-fg-on);}
.nav a.nav-link.on{color:var(--hdr-fg-on);}

/* =========================================================================
   Ledger chrome — header and footer, every page
   The floating-over-photograph dark bar with a utility row, and the navy
   footer with a crest watermark, are the inherited site's two most
   recognisable pieces. Both become plain: a white bar with a hairline, and a
   paper footer with square corners and monospace contact rows. These rules
   sit last in the file on purpose, so they win at equal specificity.
   ========================================================================= */

/* ---------------------------------------------------------------- Header */
header.site{background:#fff !important;border-bottom:1px solid var(--rule);backdrop-filter:none;
  --hdr-fg:var(--tx);--hdr-brand:var(--pri);--hdr-crest:none;--hdr-fg-on:var(--pri);}
header.site .bar{height:72px;}
:root{--hd:72px;}
main{padding-top:0;}
.brand{gap:12px;}
.brand img.crest{height:30px;filter:none;}
html.is-scrolled .brand img.crest{height:28px;}
.brand .brand-name{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--pri);}
.brand .brand-name small{display:none;}
@media(max-width:1300px){.brand .brand-name{font-size:20px;}.brand .brand-name::after{content:none;}}
.nav{gap:2px;}
.nav-link,.nav a.nav-link{font-size:14px;font-weight:500;color:var(--tx);padding:8px 13px;border-radius:0;background:transparent;}
.nav-link:hover,.nav-link.on,.nav a.nav-link:hover,.nav a.nav-link.on{background:transparent;color:var(--pri);}
.nav-link.on::after{left:13px;right:13px;bottom:2px;height:1.5px;background:var(--gold);border-radius:0;}
.nav-link .caret{opacity:0;transition:opacity .15s,transform .22s;}
.nav-item:hover .nav-link .caret,.nav-item.is-open .nav-link .caret,.nav-link:focus-visible .caret{opacity:.6;}
.hd-r{gap:18px;}
.hd-r .btn{border-radius:0;font-size:13.5px;padding:0 18px;min-height:42px;}
.hd-r .btn.gold{background:var(--pri);border-color:var(--pri);color:#fff;}
.hd-r .btn.gold:hover{background:var(--pri-d);border-color:var(--pri-d);color:#fff;}
.hd-assess,html:not(.is-scrolled) body.has-hero .hd-assess{
  background:transparent;border-color:transparent;color:var(--pri);padding:0 4px;
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold);text-decoration-thickness:1px;
}
.hd-assess:hover{color:var(--pri-l);text-decoration-color:var(--pri-l);background:transparent;}
/* `body.has-hero .burger` (line ~2713) is more specific than a bare
   `.burger`, so on any page with an active hero slider it kept winning over
   this flattened treatment — a white icon on a barely-there white circle,
   sitting on the header this section just forced solid white. Invisible,
   and with it the only way to open the menu on a phone. Matching the
   `.hd-assess` fix just above: name the has-hero case explicitly so this
   rule wins there too. */
.burger,body.has-hero .burger{border-radius:0;border-color:var(--rule);background:#fff;color:var(--pri);}

/* ---------------------------------------------------------- Simple dropdowns
   Replaces the inherited mega panel outright: one column, icon plus label,
   anchored directly beneath its own trigger instead of spanning the header.
   Every earlier .mega* rule in this file (the original mega panel and the
   "2026 refresh" pass that narrowed it) is superseded here by source order —
   later wins at equal specificity, media query or not — so nothing needs to
   be deleted above, only overridden.

   .mega positions itself absolute against its nearest positioned ancestor,
   and the "2026 refresh" pass set BOTH .nav-item and .nav to position:static
   (line ~2296), leaving header.site .bar as the only positioned ancestor in
   the chain. That was correct for the old full-width panel, whose comment
   says as much — its containing block was meant to be .bar so a 50%/-50%
   translate could centre it on the viewport. It is wrong for a per-trigger
   dropdown: `left:0` resolved against .bar put every panel at the header's
   left edge, under the logo, regardless of which item opened it. Restoring
   position:relative here — scoped to .has-menu, so it costs nothing on a
   plain link — makes each trigger's own .nav-item the containing block
   again, which is what "anchored directly beneath its own trigger" requires. */
.nav-item.has-menu{position:relative;}
.mega{
  position:absolute;top:calc(100% + 14px);left:0;right:auto;width:302px;
  transform:translateY(-8px);transform-origin:top left;
  background:#fff;border:1px solid var(--rule);border-radius:0;
  /* Two layers rather than one: a wide, soft navy cast for depth, plus a
     tight, closer shadow that grounds the panel's edge. One shadow alone
     read either flat (too tight) or hazy (too wide) — this is what MRU's
     own card system does elsewhere, brought here for the first time. */
  box-shadow:0 28px 56px -24px rgba(1,39,112,.28),0 6px 16px -8px rgba(1,39,112,.14);
  padding:10px 8px;opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .2s cubic-bezier(.22,.61,.36,1),visibility .18s;
}
/* The rightmost trigger (About) sits close to the header's edge; a
   left-anchored panel there would run past the viewport. Opening from its
   right edge instead keeps every dropdown fully on screen. */
.nav-item.has-menu:last-of-type .mega{left:auto;right:0;transform-origin:top right;}
html:not(.js-nav) .nav-item:hover > .mega,
html:not(.js-nav) .nav-item:focus-within > .mega{transform:translateY(0);}
.nav-item.is-open > .mega{transform:translateY(0);}

/* One quiet line of identity above the list — Cinzel, the same seal
   treatment every page eyebrow on the site already carries — so the panel
   reads as designed rather than as a bare menu. aria-hidden in the markup:
   it repeats the trigger's own accessible name, so it stays visual only. */
.mega-eyebrow{
  font-family:var(--font-seal);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-d);
  padding:6px 14px 12px;margin-bottom:4px;border-bottom:1px solid var(--rule);
}

.mega-grid{display:flex;flex-direction:column;gap:2px;}
.mega-link{
  display:flex;align-items:center;gap:14px;padding:12px 14px;
  border-radius:0;border-left:none;
  transition:background .16s ease;
}
/* A small circular ground for the icon — echoing the passport-stamp circles
   used everywhere else on the site — rather than a bare glyph floating in
   the row. It inverts to navy-on-gold on hover, which is what makes the row
   feel chosen rather than merely highlighted. */
.mega-link .ic{
  flex:none;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);color:var(--gold-d);font-size:12.5px;
  transition:background .16s ease,color .16s ease;
}
.mega-link .mt{
  flex:1;min-width:0;font-family:var(--font);font-size:14.5px;font-weight:600;
  color:var(--pri);letter-spacing:-.003em;
}
/* The arrow only earns its keep on hover/active — a hint that the row goes
   somewhere, not a permanent line of clutter down the panel's right edge. */
.mega-link .go{
  flex:none;font-size:10px;color:var(--gold-d);opacity:0;
  transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease;
}
/* The shade (paper fill) is the indicator; that is enough — no left edge,
   just the row's own height lighting up. Without the next line, an active
   row also grew a 2px gold bar under its full width — not from anything
   declared for .mega-link, but inherited from `.nav a.on::after` near the
   top of this file, a much older rule for the top-level trigger buttons
   that any <a class="… on"> living inside <nav class="nav"> matches too.
   Removed here, scoped to .mega-link only, so the trigger buttons keep
   their own underline untouched. */
.mega-link:hover,.mega-link.on{background:var(--paper);border-left:none;}
.mega-link:hover .ic,.mega-link.on .ic{background:var(--pri);color:var(--gold-l);}
.mega-link:hover .go,.mega-link.on .go{opacity:1;transform:none;}
/* `.nav a.on::after` is (0,2,2) in specificity; `.mega-link.on::after` alone
   is only (0,2,1) and would silently lose to it despite coming later in the
   file — source order is a tiebreaker for EQUAL specificity, not a way to
   beat a higher one. The extra `.nav` ancestor class here is not decorative:
   it is what pushes this to (0,3,1) so `content:none` actually applies. */
.nav .mega-link.on::after{content:none;}
.mega-link:hover .mt,.mega-link.on .mt{color:var(--pri);}

/* Mobile sheet: navy, Playfair links. */
.mmenu{background:var(--pri);}
.mmenu a,.mmenu summary{font-family:var(--font-display);font-size:26px;font-weight:600;color:#fff;border-color:var(--rule-on-navy);}
.mmenu .mm-sub a{font-family:var(--font);font-size:16px;font-weight:500;color:rgba(255,255,255,.82);}
.mmenu .mm-actions .btn{border-radius:0;}
.mmenu .mm-actions .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4);}

/* ---------------------------------------------------------------- Footer */
footer{background:var(--paper);color:var(--ink);border-top:1px solid var(--rule);}
footer::before{display:none;}
.foot-crest{display:none;}
.foot{padding:72px 0 44px;gap:44px 32px;}
.foot-brand .brand img.crest{height:auto;filter:none;}
.foot .brand img.crest.wm{width:210px;}
.foot .blurb{color:var(--tx2);font-size:14px;}
.foot .foot-h{font-family:var(--font-seal);font-size:10px;letter-spacing:.2em;color:var(--gold-ink);margin-bottom:16px;}
.foot a{color:var(--pri);font-weight:500;}
.foot a:hover{color:var(--pri-l);transform:none;}
.foot-contact{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;}
.foot-contact li{display:flex;gap:11px;align-items:flex-start;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--tx2);line-height:1.6;}
.foot-contact li i{color:var(--gold-ink);font-size:12px;margin-top:4px;width:14px;flex:none;}
.foot-contact a{display:inline;margin:0;color:var(--pri);}
.foot-contact .muted{color:var(--tx3);}
.foot-social a{border-radius:0;background:#fff;border:1px solid var(--rule);color:var(--pri);}
.foot-social a:hover{background:var(--pri);color:#fff;}
.foot-strip{border-top:1px solid var(--rule);padding:32px 0;}
.foot-news label{font-family:var(--font-seal);font-size:10px;letter-spacing:.2em;color:var(--gold-ink);}
.foot-news input{border-radius:0;border:1px solid var(--rule);background:#fff;color:var(--ink);}
.foot-news input::placeholder{color:var(--tx3);}
.foot-news input:focus{border-color:var(--pri);background:#fff;}
.foot-news button{border-radius:0;background:var(--pri);color:#fff;}
.foot-news button:hover{background:var(--pri-d);transform:none;}
.foot-portals a{color:var(--pri);}
.foot-portals .btn{border-radius:0;}
.foot-portals .btn.gold{background:var(--pri);border-color:var(--pri);color:#fff;}
.foot-bar{border-top:1px solid var(--rule);color:var(--tx2);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;padding:22px 0 26px;}
.foot-bar .accred{color:var(--gold-ink);}
.foot-bar .accred i{color:var(--gold-ink);}
.foot-legal a{color:var(--pri);}