/* ============================================================ ABOUT - the approved design's own stylesheet. Generated by bin/build-page-template.php. Do not edit here: edit the design and rebuild, or the page stops matching what was signed off. Written out as authored and scoped by where it loads - only on the page using this template - so the selectors without a .pe-about prefix cannot reach anything else. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@400;500;600&display=swap'); /* theme reset - see rule 10. Scoped, first, and deliberately not !important so the page's own rules below still take precedence in the normal way. */ .pe-about h1, .pe-about h2, .pe-about h3, .pe-about h4, .pe-about h5, .pe-about h6 { text-transform:none; letter-spacing:normal; color:inherit } .pe-about p, .pe-about ul, .pe-about ol, .pe-about dl, .pe-about dd, .pe-about figure { margin:0 } .pe-about li { font-size:inherit; line-height:inherit } .pe-about a { text-decoration:none; color:inherit; box-shadow:none } .pe-about img, .pe-about svg { max-width:100%; height:auto } .pe-about summary { display:list-item } .pe-about{ /* sampled from the live site */ --navy:#204287; --navy-dk:#1B3873; --navy-lt:#224B9A; --blue:#2A6DF2; --blue-dk:#1F5AD4; --amber:#FFBB26; --amber-dk:#E5A415; --green:#3F7A63; --green-pale:#EDF5F0; --sky-1:#F8FAFF; --sky-2:#F0F6FB; --sky-3:#DCECFB; --sky-4:#D8EAFA; --white:#FFFFFF; --line:#D9E6F5; --line-2:#E8EFF8; --slate:#5A6B84; --ink:#17233B; --serif:"Playfair Display",Georgia,serif; --sans:"Poppins",system-ui,-apple-system,sans-serif; --wrap:1180px; }.pe-about *, .pe-about *::before, .pe-about *::after{box-sizing:border-box}.pe-about{scroll-behavior:smooth}.pe-about{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased}.pe-about img{max-width:100%;height:auto;display:block}.pe-about a{color:var(--navy)}.pe-about h1, .pe-about h2, .pe-about h3{font-family:var(--serif);font-weight:600;line-height:1.16;letter-spacing:-.01em;margin:0;color:var(--navy)}.pe-about .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}.pe-about .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin:0 0 16px}.pe-about .skip{position:absolute;left:-9999px}.pe-about .skip:focus{left:16px;top:16px;z-index:99;background:var(--navy);color:#fff;padding:12px 18px;border-radius:4px}.pe-about :focus-visible{outline:3px solid var(--blue);outline-offset:3px}/* ---------- banner strip ---------- */ .pe-about .bnr{background:var(--navy);color:#fff;text-align:center;font-size:13px;letter-spacing:.06em;padding:9px 16px;font-weight:500}.pe-about .bnr b{font-weight:600}.pe-about .bnr span{color:#A9C4EE;margin:0 9px}/* ---------- header ---------- */ .pe-about .hdr{background:var(--white);border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:40}.pe-about .hdr-in{display:flex;align-items:center;gap:26px;min-height:84px}.pe-about .hdr .logo img{height:60px;width:auto}.pe-about .hdr .logotext{display:none;font-family:var(--serif);font-size:1.62rem;font-weight:700;color:var(--navy);letter-spacing:-.01em;line-height:1;white-space:nowrap}.pe-about .hdr .logotext span{color:var(--amber-dk)}.pe-about .hdr nav{margin-left:auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap}.pe-about .hdr nav a{color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500}.pe-about .hdr nav a:hover{color:var(--blue)}.pe-about .hdr .acct{display:inline-flex;align-items:center;gap:7px}.pe-about .hdr .basket{background:var(--sky-2);border:1px solid var(--line);border-radius:40px;padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--navy)}/* ---------- buttons ---------- */ .pe-about .acts{display:flex;gap:13px;flex-wrap:wrap}.pe-about .btn{display:inline-block;padding:15px 30px!important;border-radius:5px!important;font-weight:600;font-size:15px!important;text-decoration:none!important;transition:.18s;border:2px solid transparent!important;font-family:var(--sans)!important;cursor:pointer;line-height:1.2}.pe-about .btn-blue{background:var(--blue)!important;color:#fff!important}.pe-about .btn-blue:hover{background:var(--blue-dk)!important;transform:translateY(-1px)}.pe-about .btn-out{border-color:var(--blue);color:var(--blue)!important;background:#fff!important}.pe-about .btn-out:hover{background:var(--blue)!important;color:#fff!important}.pe-about .btn-navy{background:var(--navy)!important;color:#fff!important}.pe-about .btn-navy:hover{background:var(--navy-dk)!important}.pe-about .btn-white{background:#fff!important;color:var(--navy)!important}.pe-about .btn-white:hover{background:var(--sky-3)!important}/* ---------- hero ---------- */ .pe-about .hero{background:linear-gradient(155deg,#16305F 0%,#204287 48%,#2A5AA8 100%);padding:52px 0 62px;position:relative;overflow:hidden}.pe-about .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(820px 460px at 86% 6%,rgba(122,170,246,.20),transparent 64%);pointer-events:none}.pe-about .hero-grid{display:grid;grid-template-columns:1.28fr .84fr;gap:50px;align-items:start;position:relative;z-index:1}/* organisation wordmark on the hero */ .pe-about .orgname{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,1.95rem);font-weight:700;color:#fff;letter-spacing:-.005em;margin:0 0 6px;line-height:1}.pe-about .orgname span{color:var(--amber)}.pe-about .heroeyebrow{font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#9FC0EC;margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.18)}.pe-about .hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem);color:#fff;max-width:19ch;letter-spacing:-.015em}.pe-about .hero h1 em{font-style:italic;color:#8FBCFA;display:block;font-size:.66em;margin-top:.18em;letter-spacing:0;font-weight:500}/* pill row */ .pe-about .pillrow{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0 0}.pe-about .pillrow span{border:1px solid rgba(255,255,255,.32);border-radius:40px;padding:9px 18px;font-size:13px;font-weight:500;color:#DCE8FA}.pe-about .pillrow span.on{background:var(--amber);border-color:var(--amber);color:#3D2A00;font-weight:600}/* three key points, .pe-about single line each */ .pe-about .keypts{margin:28px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:13px;max-width:48ch}.pe-about .hero .acts{margin-top:32px}.pe-about .keypts div{display:flex;gap:13px;align-items:center}.pe-about .keypts .mk{width:23px;height:23px;flex:none;border-radius:50%;background:rgba(255,187,38,.16);border:1px solid rgba(255,187,38,.5);display:flex;align-items:center;justify-content:center;color:var(--amber);font-size:11px;font-weight:700}.pe-about .keypts b{font-size:15.5px;color:#fff;font-weight:600;line-height:1.4}.pe-about .hero .btn-white{background:#fff!important;color:var(--navy)!important}.pe-about .hero .btn-white:hover{background:var(--sky-3)!important;transform:translateY(-1px)}.pe-about .hero .btn-outline-w, .pe-about .close .btn-outline-w{border-color:rgba(255,255,255,.45);color:#fff!important;background:transparent!important}.pe-about .hero .btn-outline-w:hover, .pe-about .close .btn-outline-w:hover{background:rgba(255,255,255,.13)!important}/* right column: CPD card above, .pe-about At a glance below */ .pe-about .rightcol{display:flex;flex-direction:column;gap:16px}.pe-about .cpdcard{background:#fff;border-radius:14px;padding:26px 24px;text-align:center;box-shadow:0 14px 40px rgba(11,30,63,.22)}.pe-about .cpdcard img{width:108px;max-width:100%;margin:0 auto 16px}.pe-about .cpdcard.noimg{padding-top:30px}.pe-about .cpdcard.noimg b{font-size:17px}.pe-about .cpdcard b{display:block;font-size:15.5px;color:var(--navy);font-weight:700;margin-bottom:6px}.pe-about .cpdcard p{margin:0;font-size:13.6px;color:var(--slate);line-height:1.5}.pe-about .cpdcard .pn{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--navy)}.pe-about .glance{background:#fff;border-radius:14px;padding:26px 26px 24px;box-shadow:0 14px 40px rgba(11,30,63,.22)}.pe-about .glance h2{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 18px;font-weight:600}.pe-about .glance dl{margin:0}.pe-about .glance dt{font-size:12.8px;color:var(--slate);margin-top:14px}.pe-about .glance dt:first-of-type{margin-top:0}.pe-about .glance dd{margin:1px 0 0;font-size:14.8px;color:var(--navy);font-weight:600;line-height:1.4}/* ---------- trust strip ---------- */ .pe-about .trust{background:linear-gradient(90deg,var(--navy-dk),var(--navy-lt));color:#DCE7F8}.pe-about .trust ul{margin:0;padding:16px 0;list-style:none;display:flex;flex-wrap:wrap;gap:9px 32px;justify-content:center;font-size:13px;font-weight:500}.pe-about .trust li{display:flex;align-items:center;gap:10px}.pe-about .trust li::before{content:"";width:5px;height:5px;background:var(--amber);border-radius:50%;flex:none}/* ---------- sections ---------- */ .pe-about .sec{padding:78px 0}.pe-about .sec-alt{background:var(--sky-1)}.pe-about .sec-head{max-width:60ch;margin-bottom:40px}.pe-about .sec-head h2{font-size:clamp(1.6rem,2.8vw,2.25rem)}.pe-about .sec-head p{color:var(--slate);margin:14px 0 0;font-size:1rem}/* regulator grid */ .pe-about .regs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pe-about .reg{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;text-decoration:none;display:block;transition:.2s;border-top:4px solid var(--blue)}.pe-about .reg:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(32,66,135,.14);border-color:var(--blue);border-top-color:var(--blue)}.pe-about .reg .ab{font-family:var(--serif);font-size:1.95rem;font-weight:700;color:var(--navy);line-height:1;display:block}.pe-about .reg .full{font-size:12.8px;color:var(--slate);margin:8px 0 11px;line-height:1.45}.pe-about .reg .who{font-size:14.5px;color:var(--ink);font-weight:500}.pe-about .reg .go{font-size:12.5px;font-weight:600;color:var(--blue);margin-top:14px;display:block}/* concern grid with regulator dropdowns */ .pe-about .cons{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.pe-about .con{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:10px;transition:border-color .2s,box-shadow .2s}.pe-about .con:hover, .pe-about .con[open]{border-color:var(--green);box-shadow:0 10px 28px rgba(32,66,135,.10)}.pe-about .con[open]{z-index:40}.pe-about .con-head{list-style:none;cursor:pointer}.pe-about .con-head::-webkit-details-marker{display:none}.pe-about .con-t{margin:0}.pe-about .dd-btn{list-style:none;cursor:pointer}.pe-about .dd-btn::-webkit-details-marker{display:none}.pe-about .con-h{margin:0;font:inherit;color:inherit;letter-spacing:normal}.pe-about .con-head{width:100%!important;background:none!important;border:0!important;margin:0;padding:22px 24px!important;font:inherit;font-family:var(--sans)!important;text-align:left;display:flex;gap:17px;align-items:center;cursor:pointer;border-radius:10px!important;color:inherit!important}.pe-about .con-head .ico{width:44px!important;height:44px;flex:none;border-radius:10px!important;background:var(--green-pale)!important;display:flex;align-items:center;justify-content:center}.pe-about .con-head .ico svg{width:21px!important;height:21px;stroke:var(--green);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.pe-about .con-txt{flex:1 1 auto;min-width:0}.pe-about .con-t{display:block;font-size:15.8px;font-weight:600;color:var(--ink);line-height:1.35}.pe-about .con-s{display:block;margin-top:4px;font-size:13.8px;color:var(--slate);line-height:1.5}.pe-about .chev{flex:none;color:var(--green);transition:transform .2s;display:flex}.pe-about .chev svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}.pe-about .con[open] .chev{transform:rotate(180deg)}.pe-about .con-panel{display:none;border-top:1px solid var(--line-2);margin:0 24px;padding:0 0 22px}.pe-about .con[open]>.con-panel{display:block}.pe-about .con-panel-h{margin:16px 0 11px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}.pe-about .con-regs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pe-about .con-regs a{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--sky-1);text-decoration:none;transition:.15s}.pe-about .con-regs a:hover{background:var(--navy);border-color:var(--navy)}.pe-about .con-regs a b{display:block;font-size:14px;font-weight:600;color:var(--navy);line-height:1.2}.pe-about .con-regs a span{display:block;margin-top:2px;font-size:11.5px;color:var(--slate);line-height:1.3}.pe-about .con-regs a:hover b, .pe-about .con-regs a:hover span{color:#fff}.pe-about .cons-note{margin:20px 0 0;font-size:14px;color:var(--slate)}.pe-about .cons-note a{color:var(--blue);font-weight:500} /* On a real pointer the panel drops over the content below rather than pushing it. */ /* wordmark row above the hero grid, as on the home page */ .pe-about .hero-head{position:relative;z-index:1} /* at-a-glance key, as on the regulator pages */ .pe-about .glance-card .glance-k{font-family:var(--body);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin:0 0 11px} .pe-about .glance-card dl{display:grid;grid-template-columns:1fr;gap:14px;margin:0} .pe-about .glance-card dl>div{min-width:0} .pe-about .hero .glance-card dt{font-family:var(--body);font-size:11.4px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--slate);margin:0 0 4px} .pe-about .glance-card dd{font-family:var(--body);font-size:14.2px;font-weight:600;color:var(--navy);margin:0;line-height:1.45} /* subtitle, a sibling of the H1 rather than an inside it: the org page nests it, which makes the two extract as one word */ .pe-about .hero-sub{font-family:var(--display);font-style:italic;color:#8FBCFA;font-size:clamp(1.15rem,2.2vw,1.5rem);margin:.18em 0 0;letter-spacing:0;font-weight:500;max-width:30ch} @media (hover:hover) and (pointer:fine){.pe-about .con-panel{position:absolute;top:calc(100% - 3px);left:-1px;right:-1px;z-index:41;background:#fff;border:1px solid var(--green);border-top-color:var(--line-2);border-radius:0 0 10px 10px;box-shadow:0 18px 40px rgba(32,66,135,.16);margin:0;padding:0 22px 22px}.pe-about .con:hover{z-index:40} /* after a click-to-close, don't let the still-hovering pointer reopen it */ }/* steps */ .pe-about .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;counter-reset:s}.pe-about .step{counter-increment:s;padding-top:24px;border-top:3px solid var(--navy)}.pe-about .step::before{content:"0" counter(s);font-size:12.5px;font-weight:600;color:var(--blue);letter-spacing:.1em;display:block;margin-bottom:11px}.pe-about .step h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:8px}.pe-about .step p{margin:0;font-size:14.3px;color:var(--slate)}/* pricing */ .pe-about .tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:820px}.pe-about .tier{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 28px;display:flex;flex-direction:column}.pe-about .tier-feat{border:2px solid var(--amber);position:relative;box-shadow:0 14px 38px rgba(32,66,135,.13)}.pe-about .tier-feat::before{content:"Best value";position:absolute;top:-12px;left:26px;background:var(--amber);color:#4A3200;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:5px 13px;border-radius:20px}.pe-about .tier h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;color:var(--ink)}.pe-about .tier .price{font-family:var(--serif);font-size:2.4rem;font-weight:700;color:var(--navy);margin:12px 0 2px;line-height:1}.pe-about .tier .price .pre{font-family:var(--sans);font-size:.38em;font-weight:500;color:var(--slate);vertical-align:.62em;margin-right:.14em;letter-spacing:.01em}.pe-about .tier .per{font-size:12.8px;color:var(--slate);font-weight:500}.pe-about .tier ul{list-style:none;padding:0;margin:20px 0;font-size:14.3px;color:var(--slate)}.pe-about .tier li{padding-left:23px;position:relative;margin-bottom:9px}.pe-about .tier li::before{content:"\2714";position:absolute;left:0;top:0;color:var(--blue);font-size:11.5px}.pe-about .tier .btn{margin-top:auto;text-align:center}/* founder */ /* capped and centred: the text column stops at 60ch, .pe-about so left as a full-width wrap the grid leaves ~163px of slack collecting on the right. 1020px keeps the current line length and splits the remainder evenly. */ .pe-about .founder{display:grid;grid-template-columns:320px 1fr;gap:50px;align-items:start;max-width:1020px}/* Square frame with the crop window pushed right: the source file carries ~100px of dead background on the left and ~10px on the right, .pe-about so the subject sits at 58% across. --focus is the one value to nudge if a new photo is dropped in. */ .pe-about .founder .portrait{--focus:75%;width:100%;aspect-ratio:1/1;overflow:hidden; border-radius:12px;border:1px solid var(--line);background:var(--sky-2)}.pe-about .founder .portrait img{width:100%;height:100%;display:block;object-fit:cover; object-position:var(--focus) center;border:0;border-radius:0}.pe-about .founder .creds{font-size:13.5px;color:var(--blue);font-weight:500;margin:10px 0 20px;line-height:1.8}.pe-about .founder p{color:var(--slate);max-width:60ch}.pe-about .founder .nm{font-size:1.8rem;margin-bottom:2px}.pe-about .lifeline{font-family:var(--serif);font-size:1.32rem;line-height:1.5;color:var(--navy); margin:0 0 22px;max-width:34ch}.pe-about .lifeline span{display:block;color:var(--blue);font-size:1.08rem;margin-top:4px}/* testimonials — multi-column so wildly uneven quote lengths still sit tidily */ .pe-about .quotes{columns:3;column-gap:18px}.pe-about .q{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 26px;border-left:4px solid var(--amber);margin:0 0 18px;break-inside:avoid;-webkit-column-break-inside:avoid}.pe-about .q blockquote{margin:0;font-size:15.3px;line-height:1.66;color:var(--ink)}.pe-about .q cite{display:block;margin-top:17px;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);font-style:normal}/* faq */ .pe-about .faq{max-width:840px}/* the FAQ column is capped for reading measure; centre it and its heading on the same axis so the slack sits evenly rather than all collecting on the right */ .pe-about #pe-org-faq .sec-head, .pe-about #pe-org-faq .faq{margin-inline:auto}.pe-about #pe-org-faq .sec-head{max-width:840px}.pe-about .faq details{border-bottom:1px solid var(--line-2)}.pe-about .faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-weight:600;font-size:1rem;color:var(--navy);position:relative}.pe-about .faq summary::-webkit-details-marker{display:none}.pe-about .faq summary h3{margin:0;font:inherit;color:inherit;letter-spacing:normal;display:inline}.pe-about .faq summary::after{content:"+";position:absolute;right:8px;top:16px;font-size:1.5rem;color:var(--blue);font-weight:400}.pe-about .faq details[open] summary::after{content:"\2013"}.pe-about .faq .a{padding:0 0 22px;color:var(--slate);font-size:15.2px}.pe-about .faq .a p{margin:0 0 12px}.pe-about .faq .a p:last-child{margin:0}/* closing */ .pe-about .close{background:linear-gradient(140deg,var(--navy-dk),var(--navy-lt));color:#fff;text-align:center;padding:78px 0}.pe-about .close h2{color:#fff;font-size:clamp(1.65rem,3vw,2.35rem);max-width:23ch;margin:0 auto 16px}.pe-about .close p{color:#C6D8F2;max-width:56ch;margin:0 auto 30px}.pe-about .close .acts{justify-content:center}/* footer */ .pe-about .ft{background:var(--navy-dk);color:#A6BCDC;padding:54px 0 32px;font-size:14.3px}.pe-about .ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:42px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}.pe-about .ft h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:15px;font-weight:600}.pe-about .ft ul{list-style:none;padding:0;margin:0}.pe-about .ft li{margin-bottom:10px}.pe-about .ft a{color:#A6BCDC;text-decoration:none}.pe-about .ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}.pe-about .ft .disc{margin-top:26px;font-size:12.6px;color:#7E96BB;line-height:1.65;max-width:90ch}.pe-about .ft .btm{margin-top:20px;font-size:12.3px;color:#7E96BB}/* ---------- dropdown button (closing CTA) ---------- */ .pe-about .dd{position:relative;display:inline-block}.pe-about .dd-btn{display:inline-flex;align-items:center;gap:9px}.pe-about .dd-ar{display:flex;transition:transform .2s}.pe-about .dd-ar svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block}.pe-about .dd[open] .dd-ar{transform:rotate(180deg)}.pe-about .dd-panel{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:50;min-width:390px;background:#fff;border-radius:12px;box-shadow:0 22px 50px rgba(6,20,45,.34);padding:18px 20px 20px;text-align:left}.pe-about .dd[open]>.dd-panel{display:block}.pe-about .dd-h{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}.pe-about .dd-regs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pe-about .dd-regs a{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--sky-1);text-decoration:none;transition:.15s}.pe-about .dd-regs a:hover{background:var(--navy);border-color:var(--navy)}.pe-about .dd-regs a b{display:block;font-size:14px;font-weight:600;color:var(--navy);line-height:1.2}.pe-about .dd-regs a span{display:block;margin-top:2px;font-size:11.5px;color:var(--slate);line-height:1.3}.pe-about .dd-regs a:hover b, .pe-about .dd-regs a:hover span{color:#fff} @media (hover:hover) and (pointer:fine){ } /* reveal-on-scroll removed: it hid content whenever the script was absent */ @media (max-width:980px){.pe-about .hero-grid{grid-template-columns:1fr;gap:38px}.pe-about .regs, .pe-about .tiers{grid-template-columns:repeat(2,1fr)}.pe-about .quotes{columns:2}.pe-about .steps{grid-template-columns:repeat(2,1fr);gap:24px}.pe-about .founder{grid-template-columns:1fr;gap:26px}.pe-about .founder .portrait{max-width:260px}.pe-about .lifeline{font-size:1.18rem}.pe-about .ft-grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){.pe-about{font-size:16px}.pe-about .hero{padding:44px 0 46px}.pe-about .sec{padding:54px 0}.pe-about .regs, .pe-about .cons, .pe-about .tiers, .pe-about .steps, .pe-about .ft-grid{grid-template-columns:1fr}.pe-about .quotes{columns:1}.pe-about .tiers{max-width:none}.pe-about .con-regs{grid-template-columns:repeat(2,1fr)}.pe-about .con-head{padding:18px 18px!important}/* always the in-flow accordion at this width, .pe-about even on a hover-capable device */ .pe-about .con-panel{position:static;margin:0 18px;padding:0 0 18px;border:0;border-top:1px solid var(--line-2);border-radius:0;box-shadow:none}.pe-about .hdr-in{flex-wrap:wrap;padding:12px 0;min-height:0;gap:12px}.pe-about .hdr nav{margin-left:0;gap:16px}.pe-about .hdr .logo img{height:48px}.pe-about .acts .btn{width:100%!important;text-align:center}.pe-about .dd{width:100%}.pe-about .dd-btn{justify-content:center}.pe-about .dd-panel{position:static;transform:none;min-width:0;margin-top:10px;padding:16px;box-shadow:0 14px 30px rgba(6,20,45,.28)}.pe-about .dd-regs{grid-template-columns:repeat(2,1fr)} } @media (prefers-reduced-motion:reduce){.pe-about *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.pe-about .rv{opacity:1;transform:none} }/* contents nav */ .pe-about .pagenav{ background:#fff;border-bottom:1px solid var(--line) }.pe-about .pagenav .wrap{ padding-top:14px;padding-bottom:14px }.pe-about .pagenav b{ display:block;font-family:var(--sans);font-size:11.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:9px }.pe-about .pagenav ul{ list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 22px }.pe-about .pagenav a{ font-size:14.6px;color:var(--navy);text-decoration:none; border-bottom:1.5px solid transparent;padding-bottom:2px }.pe-about .pagenav a:hover{ border-bottom-color:var(--blue) }/* track record strip */ .pe-about .stats{ background:var(--navy) }.pe-about .stats .wrap{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px; padding-top:28px;padding-bottom:32px }.pe-about .stat{ background:linear-gradient(150deg,#2A5AA8 0%,#204287 100%);border-radius:16px; padding:26px 26px 28px;box-shadow:0 10px 26px rgba(6,20,45,.18) }.pe-about .stat b{ display:block;font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.5rem); font-weight:700;color:#fff;line-height:1.05;margin-bottom:12px;letter-spacing:-.01em }.pe-about .stat span{ display:block;font-size:15px;color:#DCE7F8;line-height:1.5;max-width:24ch } /* ---- mobile ---- The contents nav stays at the top of the screen and scrolls sideways rather than wrapping, so it costs one line rather than four. The site header is itself sticky at 85px, so the nav pins below it, not behind it. */ @media (max-width:860px) {.pe-about .pagenav{ position:sticky;top:85px;z-index:35;box-shadow:0 2px 10px rgba(6,20,45,.09) }.pe-about .pagenav .wrap{ padding-top:10px;padding-bottom:10px }.pe-about .pagenav b{ display:none }.pe-about .pagenav ul{ flex-wrap:nowrap;overflow-x:auto;gap:0 18px; -webkit-overflow-scrolling:touch;scrollbar-width:none }.pe-about .pagenav ul::-webkit-scrollbar{ display:none }.pe-about .pagenav li{ flex:0 0 auto }.pe-about .pagenav a{ font-size:14px;white-space:nowrap }.pe-about .stats .wrap{ grid-template-columns:1fr;gap:12px;padding-top:22px;padding-bottom:24px }.pe-about .stat{ padding:20px 22px 22px }.pe-about .stat b{ margin-bottom:8px }.pe-about .stat span{ font-size:14.5px;max-width:none }.pe-about .con-head{ min-height:44px !important} } @media (max-width:430px) {.pe-about .wrap{ padding-left:16px;padding-right:16px }.pe-about .cons, .pe-about .con-regs, .pe-about .regs, .pe-about .grid, .pe-about .steps, .pe-about .feat{ grid-template-columns:1fr }.pe-about .stat b{ font-size:1.75rem } }/* official regulator links, .pe-about below the FAQs */ .pe-about .offr{ display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px }.pe-about .offr a{ display:block;background:#fff;border:1px solid var(--line);border-radius:12px; padding:15px 17px;text-decoration:none;min-height:44px;transition:border-color .18s,box-shadow .18s }.pe-about .offr a:hover{ border-color:var(--navy);box-shadow:0 8px 20px rgba(32,66,135,.10) }.pe-about .offr b{ display:block;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--navy) }.pe-about .offr span{ display:block;font-size:13.6px;color:var(--ink);margin-top:2px;line-height:1.4 }.pe-about .offr em{ display:block;font-style:normal;font-size:12.6px;color:var(--slate);margin-top:5px } @media (max-width:430px) {.pe-about .offr{ grid-template-columns:1fr } } /* rule 9: Elementor ships section{display:block} in the author layer, which outranks the user-agent [hidden] rule. Nothing here uses [hidden] today, but the line costs nothing and stops a future edit failing silently. */ .pe-about [hidden]{display:none!important} /* ---- CPD badge and author block, ported from the regulator pages ---- */ .pe-about .cert-mark{display:block;width:108px;height:71px;margin:0 auto 16px;background:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo2KyIjMkQyNjs9QEBAJjBGS0U+Sjk/QD3/2wBDAQsLCw8NDx0QEB09KSMpPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT3/wAARCABHAGwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2aiiigAoopCQASTgDqTQAtFVjqVkI3kN3b7E++3mDC8459Oas0AFFIDnpS0AFQ3FylsmXPJ6AdTTbq6W3Tj5nPRRVO0t2upDPccjPAPf/AOtTS6saRetpWmhDumwnt7VNRRSEFFFFABRRRQAleG+LPE2p+NPEJ0vTDK1p5pigt4zjzSP429ehPPAFe5MNykdMjFeT/CvSDYeL9ZivExd2aeWAw5GW5I+oA59DXTh2oqU3ujei1FOT3RLp/wAF82oN/qrJMw+ZLeMbR7ZPX8hXY6XpN/onhW8sr/UPtwijkEEhTayx7eAeeSOf0ro6r6gwTTrlmUOBE5KnoeDxWcq05/EyJVZT+I8Y+FFjc33iB5Yb+a3Fsiu8YyVmUnBUjPp37Gu98H+M11ddQsrlvMubGVlSQf8ALePcQrfXjn8+9eWx+LbtLWa20PS7TTTcLtlezjdpWX03EkgfSut+HHhu803z728iaGS4VY4omGG25ySR2zxXXXgmnKXyOmrBNOUvkckunXOveP7mxt7n7PNPdzbZCThSCzdue1esadLrfhXw/M2uyxahDZ4YTxE+YYv4sgjkr19x71534YUp8YAp6reXA/R69U8aX0Wn+D9UlmIAa3eNQe7MNoH5mpxDvKMOmhNd3cY+hsW88V1bxz28iyRSKHR1OQwPIIqSuI+El3JceC1jkYkW9w8SZ/u8Nj/x4129ck48knE5px5ZNBRRRUEhRWdNr+mW96bSa7RLgEAoQeMnA7epxWhQAtYmsxLp10utW2m/arqNDFJ5ThJXQ9sHh8Yzg8+nobU/iDTLaaaKa8jV4BmXqQnGcE9AcEcdao3etaVetGkOowtIcbU3cEkkAezZBGDzkYpxdmNPU5jUPjFp0CPHBp199oAIKy7Y9p9+Sf0q94b8ZXHirwnflbFpNQt49jxxkBZcg4Kk8Z68f41NetpT3sUN9HayXTYKLLEHbk4GeDgE8c10jTwWWmCSFI4YwvCqAqr6/lW0nTStGOprJwtotTyL4V74dU1ONtyMsCqykYIIboRXrGnQEK1xt3MAQgJxmsSCTTf7VCI9ul5cuUdlX53IPOSB6g9e4rrFCxRgDAVR+QorVOeVwqz5nc8Um1rR/DfjCfUJNJ1ZdUjmeRoZ7iMIGbOei5I+bis/WPEWu/ELUYrSG3LIrZjtYASqn+8x/qcAV7bLYaTqszSTWlndyx4Qu8SuV4DAZI9CD+NSbLDRrKWUJb2dtGpdyqhFAHc4rRYiK15dS1XitbanOeFYY/CljbaGyGSbO+aVc7S7EZxx2yB6kDNdfVSA2d4yXSRjeSQDJGUbI46MAeKmmuIreFpZXCovVvTtXNKXM7mEnd3JaKbvX+8ODjr3p1SScz4gtLKbUJDe6nZWwmt44/KncAkLLvJ5IyDgisyysdIs9ZivTr+nyRxsTHH9q2iEbnIVAHxjD4IPHH0A7G4sLS7cPc2sEzAYDSRhiB+NRf2Npv8A0DrP/vwv+FUuXqUuU5edbQ2moWMHiLSBZ3krzgu6mSNnbcRkNgjOecZxx70l5a6PPPeRwa5pUFjerGJ0EqtISrs7EMW6sX6kEiup/sbTf+gdZ/8Afhf8KP7G03/oHWf/AH4X/Cj3Q905LUZrRNYvriw13Tkiv0QTAyqWQqCu5CG64PQ8Z5rFXSNLNl9nk1jT2xBJGCZ9w3sEAfBbg/JyB613mo6Lp4gDpYWgKnnEC9PyqhBo9pcSBEsbX3Pkrx+laLksWuWxgwaXpkkktwdf023kkb5GjlUNEu5iQp3cfe4+lWJLKwnFsj6/okUUClQkDKoOQVcn5sncCOCeqjrXXjRdMAA/s+04/wCmC/4Uv9jab/0DrP8A78L/AIVD5SPdONOmaYYwv/CQ6SqlNgRZFCwnZGvmR/Nw4MZIP+1+dqyt9IsYbtBrekTfabcxSJLIpSRt7tlxu54fb+H4V1H9jab/ANA6z/78L/hR/Y2m/wDQOs/+/C/4UvdD3Ti4tK05Z4ZZvE1jMEQqqPdkiD5iVEZ35IGcfNnIA7cVNJpeieRBFB4g06KOO3jRkWVNrSpwJfvdcFhj3B7V139jab/0DrP/AL8L/hR/Y2m/9A6z/wC/C/4Ue6HunFyaXpkttbwSa/pDpA75xNsNwGGN0hV8mQf3h6npnjv14UAHIx1qp/Y2m/8AQOtP+/C/4Vcxik7dBO3QWiiikIKKKKAGSIJY2Q9GGKSGBIIwiDjufWiigCSiiigAooooAKKKKACiiigD/9k=") center/contain no-repeat} .pe-about .cert-card{background:#fff;border-radius:14px;padding:26px 24px;text-align:center;min-width:250px;box-shadow:0 14px 40px rgba(11,30,63,.22)} .pe-about .cert-card b{display:block;font-family:var(--body);font-size:15.5px;font-weight:700;color:var(--navy);margin-bottom:6px} .pe-about .cert-card small{display:block;color:var(--grey);font-size:13.6px;margin-top:0;line-height:1.5} .pe-about .author{display:flex;gap:24px;align-items:flex-start;background:#fff;border:1px solid #9AB6DC;border-radius:12px;padding:26px 28px} .pe-about .author img{width:96px;height:96px;border-radius:12px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)} .pe-about .author h3{font-size:1.18rem;margin-bottom:3px} .pe-about .author .role{font-size:13.2px;color:var(--grey);margin:0 0 12px} .pe-about .author .creds{font-size:13.4px;color:var(--blue);font-weight:600;margin:0} .pe-about .author .rev{margin:13px 0 0;font-size:12.6px;color:var(--grey)} .pe-about .lifeline{font-family:var(--display);font-size:1.28rem;line-height:1.5;color:var(--navy); margin:0 0 20px;max-width:34ch} .pe-about .lifeline span{display:block;color:var(--blue);font-size:1.05rem;margin-top:4px} .pe-about .glance-card{margin-top:14px} /* ---- At a glance: labels distinct from values, as on the regulator pages ---- */ .pe-about .glance-card{text-align:left;width:100%;padding:20px 22px 18px} .pe-about .glance-card dl{display:grid;gap:12px;margin:0} .pe-about .glance-card dt{font-family:var(--body);font-size:11.4px;font-weight:700; text-transform:uppercase;letter-spacing:.07em;color:var(--grey);margin:0 0 3px} .pe-about .glance-card dd{font-family:var(--body);font-size:14.6px;font-weight:600;color:var(--navy); margin:0;line-height:1.45} /* ---- disclaimer and review line ---- */ .pe-about .pe-about-disclaimer{border-top:1px solid var(--line);background:var(--paper); padding:26px 24px 34px} .pe-about .pe-about-disclaimer p{max-width:1092px;margin:0 auto} .pe-about .pe-about-disclaimer .disc{color:var(--grey);font-size:12.5px;line-height:1.62} .pe-about .pe-about-disclaimer .rev{color:var(--grey);font-size:12.5px;margin-top:10px} /* ---- breadcrumb ---- */ .pe-about .crumb{background:var(--paper);border-bottom:1px solid var(--line);padding:12px 0} .pe-about .crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px; font-size:13.4px;color:var(--grey)} .pe-about .crumb li+li:before{content:"/";margin-right:8px;color:var(--line)} .pe-about .crumb a{color:var(--navy);text-decoration:none} .pe-about .crumb a:hover{text-decoration:underline;text-underline-offset:2px} /* ---- course cards ---- */ .pe-about .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:20px;align-items:stretch;margin-bottom:26px} .pe-about .fcourse{display:flex;flex-direction:column;background:#fff; border:2px solid var(--gold);border-radius:14px;overflow:hidden; box-shadow:0 6px 22px rgba(11,30,63,.12)} .pe-about .fcourse:hover{box-shadow:0 12px 34px rgba(11,30,63,.20)} .pe-about .fcourse > h3{background:var(--navy);color:#fff;margin:0;padding:18px 24px; font-family:var(--display);font-size:19.5px;font-weight:700;line-height:1.28; text-transform:uppercase;letter-spacing:.02em} .pe-about .fbody{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 24px 20px} .pe-about .fcourse .who{color:var(--grey);font-size:15px;margin:0 0 16px;max-width:74ch} .pe-about .fcourse h4{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--navy);margin:0 0 10px} .pe-about .fcourse ul{margin:0 0 18px;padding-left:20px;flex:1 1 auto} .pe-about .fcourse ul li{font-size:15px;line-height:1.62;margin-bottom:5px} .pe-about .fmeta{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 16px} .pe-about .fmeta span{font-size:12.5px;font-weight:600;background:var(--navy-soft);color:var(--navy); border-radius:100px;padding:5px 12px} .pe-about .fask{border-top:1px solid var(--line);padding-top:16px;margin-top:auto} .pe-about .fask p{font-size:14px;color:var(--grey);margin:0 0 12px} .pe-about .fask .btn{width:100%;text-align:center} /* ---- key terms ---- */ .pe-about .terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px;margin:0} .pe-about .terms > div > div{background:var(--paper);border:1px solid var(--line); border-left:4px solid var(--navy);border-radius:10px;padding:18px 20px;height:100%} .pe-about .terms dt{font-family:var(--body);font-size:16px;font-weight:700;color:var(--title); margin-bottom:7px} .pe-about .terms dd{margin:0;font-size:15px;line-height:1.62;color:var(--grey)} /* ---- how it works ---- */ .pe-about .day{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px} .pe-about .day div{background:var(--paper);border:1px solid var(--line);border-radius:10px; padding:16px 18px} .pe-about .day b{display:block;font-family:var(--body);font-size:15px;color:var(--title); margin-bottom:4px} .pe-about .day span{font-size:14px;color:var(--grey);line-height:1.55} .pe-about .whogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px} .pe-about .whogrid div{background:var(--paper);border:1px solid var(--line);border-radius:9px; padding:11px 14px;font-size:14.6px;font-weight:600;color:var(--title)} @media(max-width:900px){ .pe-about .fgrid{grid-template-columns:1fr} } @media(max-width:620px){ .pe-about .fcourse > h3{padding:15px 18px;font-size:17.5px} .pe-about .fbody{padding:18px} } /* ============================================================================ pe-about | layout and formatting corrections, 20 August 2026 Appended override block. Nothing above this point is edited, so the inherited organisations stylesheet stays byte-for-byte what shipped. ========================================================================= */ /* -- 1. Design tokens the inherited rules reference but never define -------- Rules ported from the regulator and face-to-face sheets call --body, --display, --grey, --paper, --title, --gold and --navy-soft. None was declared here, so every declaration using one was discarded as invalid: the breadcrumb and disclaimer lost their tint, the hero subtitle lost its serif, and several muted greys fell back to full-strength ink. */ .pe-about{ --body:var(--sans); --display:var(--serif); --grey:var(--slate); --title:var(--navy); --paper:var(--sky-1); --gold:var(--amber); --navy-soft:var(--sky-3); } /* -- 2. Section heads ------------------------------------------------------ .sec-head was capped at 60ch. That is a sound reading measure for the intro paragraph, but it was applied to the whole block, so every H2 was squeezed into roughly 45% of the column while the content beneath ran the full 1180px. The cap moves to the paragraph, and the head gains a rule and an accent bar so it reads as a deliberate title rather than stray text. */ .pe-about .sec-head{ max-width:none; margin-bottom:34px; padding-bottom:20px; border-bottom:1px solid var(--line); } .pe-about .sec-head h2{max-width:30ch} .pe-about .sec-head p{max-width:72ch} .pe-about .sec-head .eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .pe-about .sec-head .eyebrow::before{ content:""; flex:none; width:26px; height:2px; background:var(--amber); } /* -- 3. Track-record band -------------------------------------------------- Four stats in a three-column grid left "No. 13197" alone on a second row with two empty cells beside it. */ .pe-about .stats .wrap{grid-template-columns:repeat(4,1fr)} /* -- 4. Content cards ------------------------------------------------------ .con carries its padding on .con-head, a child element this page does not use, so every card rendered with its text flush against the border. The hover state also inherited the green accent from the concern selector, which has no meaning on this page. */ .pe-about .con{ padding:26px 28px; border:1px solid var(--line); border-left:3px solid var(--blue); box-shadow:0 2px 10px rgba(32,66,135,.05); } .pe-about .con:hover{ border-color:var(--line); border-left-color:var(--blue); box-shadow:0 12px 30px rgba(32,66,135,.13); transform:translateY(-2px); } .pe-about .con h3{ font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--navy); margin:0 0 10px; } .pe-about .con p{ margin:0 0 10px; color:var(--slate); font-size:15.2px; line-height:1.62; } .pe-about .con p:last-child{margin-bottom:0} .pe-about .con a{color:var(--blue);font-weight:600} .pe-about .con a:hover{text-decoration:underline;text-underline-offset:3px} /* Three-up rather than two-plus-orphan where a section holds three cards. */ .pe-about #pe-about-what .cons, .pe-about #pe-about-contact .cons{grid-template-columns:repeat(3,1fr)} /* -- 5. Regulator links ---------------------------------------------------- The nine anchors inside .regs carry no class, so the .reg card rule they were written for never matched and they rendered as bare text. */ .pe-about .regs>a{ display:block; background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:10px; padding:20px 22px; transition:transform .18s,box-shadow .18s,border-color .18s; } .pe-about .regs>a:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(32,66,135,.14); border-color:var(--blue); border-top-color:var(--blue); } .pe-about .regs>a b{ display:block; font-family:var(--serif); font-size:1.55rem; font-weight:700; color:var(--navy); line-height:1.05; } .pe-about .regs>a span{ display:block; margin-top:5px; font-size:14px; color:var(--slate); line-height:1.4; } /* -- 6. FAQ ---------------------------------------------------------------- The rule that centred the 840px FAQ column was keyed to #pe-org-faq, an id belonging to the organisations page. It never matched here, so the column sat hard against the left edge of a 1180px band. It becomes a panel. */ .pe-about .faq{ max-width:none; background:#fff; border:1px solid var(--line); border-radius:14px; padding:2px 28px; } .pe-about .faq details:last-child{border-bottom:0} .pe-about .faq summary{padding-right:48px} .pe-about .faq summary::after{right:6px} .pe-about .faq .a{max-width:88ch} /* -- 7. Prose panels and the author block ---------------------------------- .glance was written for the hero, where a 40px drop shadow reads correctly against navy. In the body of the page it floated. */ .pe-about .sec .glance{ border:1px solid var(--line); box-shadow:0 2px 14px rgba(11,30,63,.07); padding:32px 34px; } .pe-about .sec .glance p{margin:0 0 14px;color:var(--slate)} .pe-about .sec .glance p:last-child{margin-bottom:0} .pe-about .sec .glance p:first-child{color:var(--ink);font-size:1.06rem} .pe-about .sec .glance strong{color:var(--navy);font-weight:600} .pe-about .author{ padding:30px 32px; box-shadow:0 2px 14px rgba(11,30,63,.07); border-color:var(--line); } .pe-about .author img{width:128px;height:128px} .pe-about .author p{margin:0 0 12px;color:var(--slate)} .pe-about .author p:last-child{margin-bottom:0} /* -- 8. Contrast against the alternating bands ----------------------------- White cards on the white bands were all but invisible; the tinted bands read correctly. Invert the card fill on the plain bands so a card is a card on both. */ .pe-about .sec:not(.sec-alt) .con, .pe-about .sec:not(.sec-alt) .faq, .pe-about .sec:not(.sec-alt) .author, .pe-about .sec:not(.sec-alt) .glance, .pe-about .sec:not(.sec-alt) .regs>a{background:var(--sky-1)} /* -- 9. Closing band ------------------------------------------------------- .close centres its H2 inside .sec-head, but .sec-head was a 60ch block pinned left, so the whole panel sat off the page axis. And the primary call to action was .btn-navy: navy on a navy band. */ .pe-about .close .sec-head{ max-width:none; margin-bottom:30px; padding-bottom:0; border-bottom:0; } .pe-about .close .sec-head p{max-width:58ch;margin-left:auto;margin-right:auto} .pe-about .close .btn-navy{ background:var(--amber)!important; color:#3D2A00!important; border-color:var(--amber)!important; } .pe-about .close .btn-navy:hover{background:var(--amber-dk)!important;color:#3D2A00!important} .pe-about .close .btn-out{ background:transparent!important; color:#fff!important; border-color:rgba(255,255,255,.45)!important; } .pe-about .close .btn-out:hover{background:rgba(255,255,255,.14)!important;color:#fff!important} /* -- 10. Breadcrumb and disclaimer ----------------------------------------- */ .pe-about .crumb .wrap{padding-top:0;padding-bottom:0} .pe-about .pe-about-disclaimer p{max-width:1132px;padding:0 24px} /* -- 11. Narrower viewports ------------------------------------------------ The three-up grids above outrank the inherited breakpoints on specificity, so they need collapsing explicitly. */ @media (max-width:980px){ .pe-about #pe-about-what .cons, .pe-about #pe-about-contact .cons{grid-template-columns:repeat(2,1fr)} .pe-about .stats .wrap{grid-template-columns:repeat(2,1fr)} } @media (max-width:860px){ .pe-about .stats .wrap{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .pe-about #pe-about-what .cons, .pe-about #pe-about-contact .cons{grid-template-columns:1fr} .pe-about .stats .wrap{grid-template-columns:1fr} .pe-about .regs{grid-template-columns:1fr} .pe-about .con{padding:20px 21px} .pe-about .faq{padding:2px 18px} .pe-about .sec .glance{padding:24px 22px} .pe-about .author{flex-wrap:wrap;gap:18px;padding:22px 20px} .pe-about .author img{width:96px;height:96px} .pe-about .sec-head h2{max-width:none} } /* -- 12. Outlined buttons on the navy bands -------------------------------- .btn declares border:2px solid transparent!important, which outranks the plain border-color in .btn-outline-w. The secondary hero button therefore rendered as bare text with no tile around it. */ .pe-about .hero .btn-outline-w, .pe-about .close .btn-outline-w{ border-color:rgba(255,255,255,.55)!important; color:#fff!important; background:transparent!important; } .pe-about .hero .btn-outline-w:hover, .pe-about .close .btn-outline-w:hover{ background:rgba(255,255,255,.16)!important; border-color:rgba(255,255,255,.8)!important; color:#fff!important; }