headings in the portal body */
.cs-intro{margin-bottom:8px;}
.cs-sec{border-top:1px solid var(--rule);}
.cs-sec:last-of-type{border-bottom:1px solid var(--rule);}
.cs-sec > summary{
list-style:none;cursor:pointer;position:relative;
padding:20px 42px 20px 0;
font-family:'Tenor Sans',sans-serif;font-size:19px;font-weight:400;
letter-spacing:.02em;color:var(--ink);line-height:1.35;
transition:color .2s;
}
.cs-sec > summary::-webkit-details-marker{display:none;}
.cs-sec > summary::marker{content:'';}
.cs-sec > summary:hover{color:var(--red);}
.cs-sec > summary:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
/* Chevron */
.cs-sec > summary::after{
content:'';position:absolute;right:6px;top:50%;
width:8px;height:8px;margin-top:-6px;
border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red);
transform:rotate(45deg);transition:transform .25s ease;
}
.cs-sec[open] > summary::after{transform:rotate(-135deg);margin-top:-2px;}
/* Red tick beside an open section */
.cs-sec > summary::before{
content:'';position:absolute;left:-14px;top:50%;width:0;height:2px;
background:var(--red);transform:translateY(-50%);transition:width .25s ease;
}
.cs-sec[open] > summary::before{width:8px;}
.cs-sec-body{padding:0 0 26px;animation:csFade .25s ease;}
.cs-sec-body > *:first-child{margin-top:0;}
.cs-sec-body > p:last-child,.cs-sec-body > ul:last-child{margin-bottom:0;}
@keyframes csFade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
/* Headings inside a panel must not re-draw the section rule */
.cs-sec-body > h2:first-child,.cs-sec-body > h3:first-child,.cs-sec-body > h4:first-child{display:none;}
.cs-sec-body h3{margin-top:22px;}
.cs-toggle-all{
display:inline-block;margin:0 0 6px;padding:0;
background:none;border:none;cursor:pointer;
font-family:'Poppins',sans-serif;font-size:9.5px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
transition:color .2s;
}
.cs-toggle-all:hover{color:var(--red);}
.cs-toggle-all:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
.cs-sec-body{animation:none;}
.cs-sec > summary::after{transition:none;}
}
@media(max-width:900px){
.cs-sec > summary{font-size:17px;padding:17px 36px 17px 0;}
}
/* PORTFOLIO CARDS Brand work is often logos on light grounds, so the artwork shows whole on a neutral ground and the caption sits in its own block. */
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.port-item{
position:relative;overflow:hidden;aspect-ratio:auto;background:#fff;
cursor:pointer;display:flex;flex-direction:column;
border:1px solid var(--rule);
transition:border-color .25s,box-shadow .25s,transform .25s;
}
.port-item:hover{
border-color:rgba(204,34,34,.35);
box-shadow:0 14px 34px rgba(0,0,0,.09);
transform:translateY(-3px);
}
.port-item:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
/* Artwork - never cropped */
.port-img{
position:relative;aspect-ratio:4/3;background-color:var(--cream);
background-size:contain !important;
background-repeat:no-repeat;
background-position:center center;
margin:0;transform:none !important;transition:none;
}
/* No scrim needed now the caption has its own space */
.port-overlay{display:none;}
/* Caption block */
.port-info{
position:static;transform:none !important;
padding:18px 20px 20px;border-top:1px solid var(--rule);
background:#fff;
}
.port-cat{
font-family:'Poppins',sans-serif;font-size:8.5px;font-weight:600;
letter-spacing:.36em;text-transform:uppercase;color:var(--red);margin-bottom:7px;
}
.port-title{
font-family:'Tenor Sans',sans-serif;font-size:16px;font-weight:400;
letter-spacing:.02em;color:var(--ink);line-height:1.35;
transition:color .2s;
}
.port-item:hover .port-title{color:var(--red);}
@media(max-width:900px){
.port-grid{grid-template-columns:1fr 1fr;gap:18px;}
.port-title{font-size:15px;}
}
@media(max-width:560px){
.port-grid{grid-template-columns:1fr;gap:16px;}
}
/* OVERFLOW GUARDS Grid items default to min-width:auto, so a wide child stops the column shrinking and the text runs off instead of wrapping. */
.cs-visual,.cs-body{min-width:0;}
.cs-body,.cs-prose,.cs-intro,.cs-sec,.cs-sec-body{min-width:0;max-width:100%;}
/* Long words, URLs and pasted content must not force the column wider */
.cs-prose,.cs-prose p,.cs-prose li,.cs-prose h2,.cs-prose h3,.cs-prose h4,
.cs-sec > summary,.cs-lede,.cs-title{
overflow-wrap:break-word;word-wrap:break-word;
}
/* Anything pasted in from a word processor */
.cs-prose *{max-width:100%;}
.cs-prose img{height:auto;}
.cs-prose pre{white-space:pre-wrap;overflow-x:auto;}
.cs-prose table{width:100%;display:block;overflow-x:auto;border-collapse:collapse;}
/* Editors often paste hard widths - ignore them inside the modal */
.cs-prose [style*="width"]{max-width:100% !important;}
.cs-prose [width]{max-width:100% !important;}
.cs-modal{overflow-x:hidden;}
.cs{max-width:min(1280px,100%);}
/* Keep the narrow reading column for records with no images - two classes so it wins regardless of rule order */
.cs.cs--no-media{max-width:min(760px,100%);}
/* COOKIE CONSENT BANNER Accept and Decline carry equal visual weight - a hidden or de-emphasised decline is not valid consent under UK GDPR / PECR. */
.ck{
position:fixed;left:0;right:0;bottom:0;z-index:600;
background:var(--char);border-top:2px solid var(--red);
transform:translateY(100%);transition:transform .32s ease;
box-shadow:0 -10px 40px rgba(0,0,0,.22);
}
.ck.in{transform:none;}
.ck-inner{
max-width:1160px;margin:0 auto;padding:22px 48px;
display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.ck-text{
font-family:'Poppins',sans-serif;font-size:13px;font-weight:400;
line-height:1.75;color:rgba(255,255,255,.72);margin:0;max-width:760px;
}
.ck-text a{color:var(--amber);text-decoration:underline;text-underline-offset:2px;}
.ck-text a:hover{color:#fff;}
.ck-actions{display:flex;gap:12px;flex-shrink:0;}
.ck-btn{
font-family:'Poppins',sans-serif;font-size:10px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;
padding:14px 30px;cursor:pointer;transition:all .22s;
border:1.5px solid transparent;min-height:44px;
}
.ck-accept{background:var(--red);color:#fff;border-color:var(--red);}
.ck-accept:hover{background:#fff;color:var(--red);}
.ck-decline{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.35);}
.ck-decline:hover{border-color:#fff;color:#fff;}
.ck-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}
@media(max-width:860px){
.ck-inner{flex-direction:column;align-items:stretch;gap:18px;padding:20px 28px;}
.ck-text{max-width:100%;font-size:12.5px;}
.ck-actions{gap:10px;}
.ck-btn{flex:1;text-align:center;padding:14px 16px;}
}
@media(max-width:500px){
.ck-inner{padding:18px 20px;}
}
/* POLICY PAGES */
.pol-hero{background:var(--char);padding:150px 0 60px;}
.pol-hero .lbl{color:var(--red);}
.pol-hero h1{
font-family:'Tenor Sans',sans-serif;font-size:clamp(32px,5vw,58px);font-weight:400;
letter-spacing:.04em;color:#fff;line-height:1.08;margin-bottom:14px;
}
.pol-hero p{font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.04em;}
.pol-body{background:var(--white);padding:72px 0 96px;}
.pol-body .wrap{max-width:860px;}
.pol-body h2{
font-family:'Tenor Sans',sans-serif;font-size:23px;font-weight:400;letter-spacing:.02em;
color:var(--ink);margin:46px 0 16px;padding-top:24px;border-top:1px solid var(--rule);
position:relative;
}
.pol-body h2::before{content:'';position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--red);}
.pol-body h2:first-of-type{margin-top:0;padding-top:0;border-top:none;}
.pol-body h2:first-of-type::before{display:none;}
.pol-body h3{
font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--ink);margin:28px 0 11px;
}
.pol-body p{font-size:15.5px;line-height:1.9;color:#5C5C5C;margin-bottom:18px;}
.pol-body ul{list-style:none;margin:0 0 22px;padding:0;}
.pol-body li{font-size:15.5px;line-height:1.85;color:#5C5C5C;margin-bottom:11px;position:relative;padding-left:22px;}
.pol-body li::before{content:'';position:absolute;left:0;top:.72em;width:7px;height:1.5px;background:var(--red);}
.pol-body a{color:var(--red);}
.pol-body strong{color:var(--ink);font-weight:600;}
.pol-table{width:100%;border-collapse:collapse;margin:0 0 26px;}
.pol-table th,.pol-table td{
text-align:left;padding:13px 14px;border-bottom:1px solid var(--rule);
font-size:14px;line-height:1.7;color:#5C5C5C;vertical-align:top;
}
.pol-table th{
font-family:'Poppins',sans-serif;font-size:9px;font-weight:600;letter-spacing:.24em;
text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--ink);
}
.pol-note{
background:var(--cream);border-left:2px solid var(--red);
padding:20px 24px;margin:0 0 30px;
}
.pol-note p{margin:0;font-size:14.5px;}
@media(max-width:768px){
.pol-hero{padding:120px 0 46px;}
.pol-body{padding:52px 0 68px;}
.pol-table{display:block;overflow-x:auto;}
}
/* Cookie settings link - matches the other footer legal links */
.f-cookie-btn{
font-family:'Poppins',sans-serif;font-size:12px;font-weight:400;
color:rgba(255,255,255,.5);background:none;border:none;padding:0;
cursor:pointer;letter-spacing:.04em;transition:color .2s;
}
.f-cookie-btn:hover{color:#fff;}
.f-cookie-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
/* PASTED-STYLE NEUTRALISER Portal copy is written in a rich editor and often arrives carrying inline styles from Word or Google Docs. `word-break:break-all` is the damaging one: it splits ordinary words mid-syllable. These override inline styles, so the prose always wraps on spaces. */
.cs-prose,.cs-prose *,
.cs-lede,.cs-title,.cs-sec > summary{
word-break:normal !important;
line-break:auto !important;
hyphens:manual !important;
-webkit-hyphens:manual !important;
}
/* Still allow a genuinely unbreakable string (a long URL) to wrap rather than force the column wider */
.cs-prose,.cs-prose p,.cs-prose li,.cs-prose h2,.cs-prose h3,.cs-prose h4,
.cs-lede,.cs-title,.cs-sec > summary{
overflow-wrap:break-word;
word-wrap:break-word;
}
/* Pasted white-space values collapse or refuse to wrap - reset them, keeping deliberately preformatted */
.cs-prose *:not(pre):not(code){white-space:normal !important;}
.cs-prose pre{white-space:pre-wrap !important;}
/* A pasted wrapper div must not introduce its own column width */
.cs-prose > div{width:auto !important;}
/* INTRO SESSION BOOKER (contact.php) */
.bk-section { background: var(--cream); padding: 110px 0 120px; }
.bk-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.bk-head h2 { font-family: 'Tenor Sans', sans-serif; font-size: clamp(26px,3.2vw,38px); font-weight: 400; letter-spacing: .04em; color: var(--ink); margin: 14px 0 12px; }
.bk-head p { font-size: 14.5px; font-weight: 300; color: var(--grey); line-height: 1.9; }
.bk { max-width: 1100px; margin: 0 auto; background: var(--white); border: 1px solid var(--rule); display: grid; grid-template-columns: 310px minmax(0,1fr); }
/* ---- left rail ---- */
.bk-aside { min-width: 0; padding: 38px 34px; border-right: 1px solid var(--rule); background: var(--white); }
.bk-host { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.bk-avatar { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--char); color: var(--white); font-family: 'Tenor Sans', sans-serif; font-size: 15px; letter-spacing: .06em; display: flex; align-items: center; justify-content: center; }
.bk-host-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.bk-host-role { font-size: 11.5px; font-weight: 300; color: var(--grey); margin-top: 2px; line-height: 1.5; }
.bk-aside h3 { font-family: 'Tenor Sans', sans-serif; font-size: 23px; font-weight: 400; letter-spacing: .03em; color: var(--ink); margin-bottom: 18px; }
.bk-meta { display: flex; flex-direction: column; gap: 11px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--rule); }
.bk-meta div { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; font-weight: 300; color: var(--grey); line-height: 1.6; }
.bk-meta b { flex: 0 0 auto; color: var(--red); font-weight: 500; }
.bk-aside p { font-size: 12.5px; font-weight: 300; color: var(--grey); line-height: 1.85; }
.bk-aside ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.bk-aside li { position: relative; padding-left: 16px; font-size: 12.5px; font-weight: 300; color: var(--grey); line-height: 1.7; }
.bk-aside li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: var(--red); }
/* ---- right panel ---- */
.bk-panel { min-width: 0; padding: 38px 34px; }
.bk-demo { display: flex; gap: 10px; align-items: flex-start; background: var(--cream); border-left: 2px solid var(--amber); padding: 12px 15px; margin-bottom: 26px; font-size: 12px; font-weight: 300; color: var(--grey); line-height: 1.7; }
.bk-demo b { color: var(--ink); font-weight: 500; }
.bk-pick { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 30px; }
/* calendar */
.bk-cal { min-width: 0; }
.bk-cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bk-cal-top strong { font-family: 'Tenor Sans', sans-serif; font-size: 16px; font-weight: 400; letter-spacing: .05em; color: var(--ink); }
.bk-nav { display: flex; gap: 6px; }
.bk-nav button { width: 32px; height: 32px; border: 1px solid var(--rule); background: var(--white); color: var(--ink); font-size: 14px; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s; }
.bk-nav button:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.bk-nav button:disabled { opacity: .3; cursor: not-allowed; }
.bk-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.bk-dow { text-align: center; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lgrey); padding-bottom: 8px; }
.bk-day { aspect-ratio: 1 / 1; min-width: 0; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 400; color: var(--ink); background: var(--cream); border: 1px solid transparent; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.bk-day:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.bk-day--on { background: var(--red); border-color: var(--red); color: var(--white); font-weight: 500; }
.bk-day--on:hover { color: var(--white); }
.bk-day--off { background: transparent; color: var(--lgrey); cursor: not-allowed; }
.bk-day--blank { background: transparent; border: none; cursor: default; }
/* times */
.bk-times-col { min-width: 0; display: flex; flex-direction: column; }
.bk-pick .bk-times-col h4 { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; line-height: 1.5; }
.bk-times { display: flex; flex-direction: column; gap: 7px; max-height: 310px; overflow-y: auto; }
.bk-times-empty { font-size: 12.5px; font-weight: 300; color: var(--grey); line-height: 1.8; }
.bk-slot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 11px 13px; background: var(--white); border: 1px solid var(--rule); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 400; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .18s, background .18s, color .18s; }
.bk-slot:hover { border-color: var(--red); color: var(--red); }
.bk-slot-to { font-size: 10.5px; font-weight: 300; color: var(--lgrey); }
.bk-slot--on { background: var(--red); border-color: var(--red); color: var(--white); }
.bk-slot--on .bk-slot-to { color: rgba(255,255,255,.72); }
.bk-confirm-row { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.bk-btn { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; background: var(--red); color: var(--white); padding: 15px 30px; border: none; cursor: pointer; transition: background .25s; }
.bk-btn:hover:not(:disabled) { background: #B01C1C; }
.bk-btn:disabled { background: var(--sand); color: var(--grey); cursor: not-allowed; }
.bk-link { background: none; border: none; padding: 0; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 300; color: var(--grey); cursor: pointer; transition: color .2s; }
.bk-link:hover { color: var(--red); }
/* step 2 - details */
.bk-when { display: flex; align-items: center; gap: 10px; background: var(--cream); padding: 13px 16px; margin-bottom: 24px; font-size: 13px; font-weight: 400; color: var(--ink); }
.bk-when b { color: var(--red); font-weight: 500; }
.bk-step h4 { font-family: 'Tenor Sans', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: .03em; color: var(--ink); margin-bottom: 20px; }
.bk-step .form-group textarea { min-height: 96px; }
.bk-actions { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.bk-error { background: rgba(204,34,34,.07); border-left: 2px solid var(--red); padding: 12px 15px; margin-bottom: 18px; font-size: 12.5px; font-weight: 300; color: var(--ink); }
/* step 3 - done */
.bk-done { text-align: center; padding: 26px 0 14px; }
.bk-tick { width: 54px; height: 54px; margin: 0 auto 22px; border-radius: 50%; background: var(--red); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 25px; line-height: 1; }
.bk-done h4 { font-family: 'Tenor Sans', sans-serif; font-size: clamp(21px,2.4vw,27px); font-weight: 400; letter-spacing: .03em; color: var(--ink); margin-bottom: 14px; }
.bk-done p { font-size: 13.5px; font-weight: 300; color: var(--grey); line-height: 1.9; max-width: 430px; margin: 0 auto 10px; }
.bk-done strong { color: var(--ink); font-weight: 500; }
.bk-done p a, .bk-error a { color: var(--red); text-decoration: none; border-bottom: 1px solid rgba(204,34,34,.3); }
.bk-done p a:hover, .bk-error a:hover { border-bottom-color: var(--red); }
.bk-done-card { display: inline-flex; flex-direction: column; gap: 5px; background: var(--cream); padding: 17px 28px; margin: 20px 0 24px; }
.bk-done-card span { font-size: 13px; font-weight: 400; color: var(--ink); }
.bk-done-card small { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lgrey); }
/* Selected states must beat the hover rules above. .bk-day:hover:not(:disabled) is (0,3,0) because :not() counts its argument, so a plain .bk-day--on:hover loses and the chosen day renders red-on-red under the cursor. */
.bk-day--on:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--white); }
.bk-slot--on:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.bk-slot--on:hover .bk-slot-to { color: rgba(255,255,255,.72); }
@media (max-width: 980px) {
.bk { grid-template-columns: minmax(0,1fr); }
.bk-aside { border-right: none; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 720px) {
.bk-section { padding: 70px 0 80px; }
.bk-pick { grid-template-columns: minmax(0,1fr); gap: 26px; }
.bk-times { max-height: none; }
.bk-aside, .bk-panel { padding: 28px 22px; }
.bk-day { font-size: 12px; }
.bk-actions { flex-direction: column; align-items: stretch; gap: 14px; }
.bk-actions .bk-btn { width: 100%; }
}
/* Portal login error state */
.portal-notice--bad { border-left-color: var(--red); background: rgba(204,34,34,.05); }
.portal-notice--bad p strong { color: var(--red); }
.f-logo{height:60px;width:auto;object-fit:contain;object-position:left center;margin-bottom:10px;display:block;}
/* Contact form: honeypot and flash */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-flash{border-radius:4px;padding:14px 18px;margin-bottom:22px;font-size:14px;font-weight:300;line-height:1.7;}
.form-flash.ok{background:#EAF4EC;color:#1E5631;}
.form-flash.bad{background:#FBEAE9;color:#B3261E;}
/* Contact: book-or-message accordion
details[name] gives exclusive opening natively; site.js closes the sibling
where the browser does not support it. */
.ct-section { background: var(--cream); padding: 96px 0 104px; }
.ct-head { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.ct-head h2 { font-family: 'Tenor Sans', sans-serif; font-size: clamp(26px,3.2vw,38px); font-weight: 400; letter-spacing: .02em; color: var(--ink); margin: 0 0 12px; }
.ct-head p { font-size: 14.5px; font-weight: 300; line-height: 1.85; color: var(--grey); }
.ct-stack { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ct-panel { background: var(--white); border: 1px solid var(--rule); }
.ct-bar { list-style: none; display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; min-height: 44px; transition: background .2s, color .2s; }
.ct-bar::-webkit-details-marker { display: none; }
.ct-bar:hover { background: var(--warm); }
.ct-panel[open] > .ct-bar { background: var(--char); color: var(--white); }
.ct-panel[open] > .ct-bar:hover { background: var(--char); }
.ct-ico { flex: 0 0 21px; width: 21px; height: 21px; stroke: var(--red); fill: none; stroke-width: 1.5; }
.ct-panel[open] .ct-ico { stroke: var(--amber); }
.ct-bar-t { flex: 1 1 auto; min-width: 0; }
.ct-bar-t strong { display: block; font-family: 'Tenor Sans', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: .02em; }
.ct-bar-t span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 300; color: var(--grey); }
.ct-panel[open] .ct-bar-t span { color: rgba(255,255,255,.72); }
.ct-sign { flex: 0 0 auto; position: relative; width: 15px; height: 15px; }
.ct-sign::before, .ct-sign::after { content: ''; position: absolute; left: 0; top: 7px; width: 15px; height: 1.5px; background: currentColor; }
.ct-sign::after { transform: rotate(90deg); transition: transform .22s; }
.ct-panel[open] .ct-sign::after { transform: rotate(0deg); }
.ct-body { border-top: 1px solid var(--rule); }
.ct-body .bk { border: none; max-width: none; }
.ct-body--form { padding: 28px 30px 30px; }
.ct-or { display: flex; align-items: center; gap: 16px; padding: 3px 2px; }
.ct-or span { flex: 1 1 auto; height: 1px; background: var(--rule); }
.ct-or em { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }
.ct-facts { max-width: 1040px; margin: 34px auto 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr)); gap: 24px; text-align: center; }
.ct-fact-l { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.ct-facts a { display: block; font-size: 13px; font-weight: 300; color: var(--ink); text-decoration: none; }
.ct-facts a:hover { color: var(--red); }
.ct-facts p { font-size: 13px; font-weight: 300; line-height: 1.75; color: var(--grey); }
@media (max-width: 720px) {
.ct-section { padding: 60px 0 70px; }
.ct-bar { padding: 16px 18px; gap: 13px; }
.ct-bar-t strong { font-size: 17px; }
.ct-body--form { padding: 22px 18px 24px; }
.ct-facts { margin-top: 24px; gap: 20px; }
}
/* ── ARROWS ────────────────────────────────────────────────────────────────
Poppins carries no → glyph, so the text arrows above fall back to whatever
font the visitor's OS supplies and land roughly 4px below the cap centre of
the label, differently on every platform. Drawn here instead: a mask takes
currentColor, and a box running baseline to cap height (0.7em in Poppins)
centres the arrow on the uppercase text. Declared after the rules it
replaces so it wins on source order, and behind @supports so a browser
without masks keeps the glyph rather than showing a solid block.
───────────────────────────────────────────────────────────────────────── */
@supports (mask-image:none) or (-webkit-mask-image:none){
.link-arrow,.affil-link,.award-link{align-items:baseline;}
.tc-read-more.visible{display:inline-flex;align-items:baseline;gap:8px;}
.link-arrow::after,.affil-link::after,.award-link::after,.tc-read-more::after{
/* font-size:inherit matters: the rules above set 18px and 13px on these
pseudo-elements for the old glyph, and .7em would resolve against that. */
content:'';font-size:inherit;height:.7em;flex:0 0 auto;background:currentColor;
-webkit-mask:var(--arrow) no-repeat center/contain;
mask:var(--arrow) no-repeat center/contain;
}
.link-arrow::after{width:18px;}
.affil-link::after,.award-link::after{width:14px;}
.tc-read-more::after{width:13px;}
}