/* The guides: /blog, /blog/<slug> and the admin editor's preview (lib/blog.js renderArticle).
   Loaded after static.css on the blog pages and uses its tokens (--kf-red, --ink, --line, --gutter...).
   Type scale 11/12/13/14/16/18/22/28/36; nothing heavier than 500; body text held to about 68 characters.
   Every class a post body may carry (lib/blog-html.js CLASSES) is styled here. */

/* ---- Index ---- */
.blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 24px;}
.blog-filters a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--white);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;}
.blog-filters a:hover{border-color:var(--ink);}
.blog-filters a[aria-current="page"]{border-color:var(--kf-red);background:var(--kf-red);color:var(--white);}
.blog-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:12px;margin:0;padding:0;list-style:none;}
.blog-card{position:relative;display:flex;flex-direction:column;padding:20px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);transition:border-color 150ms;}
.blog-card:hover{border-color:var(--ink);}
.blog-card .eyebrow{font-size:12px;}
/* The title is an h2 on the index and an h3 under Related guides; the whole card is its link. */
.blog-card :is(h2,h3){margin:0 0 8px;font-size:18px;font-weight:500;line-height:1.3;letter-spacing:0;}
.page .blog-card :is(h2,h3){margin:0 0 8px;font-size:18px;font-weight:500;}
.blog-card :is(h2,h3) a{color:var(--ink);text-decoration:none;}
.blog-card :is(h2,h3) a::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.blog-card:hover :is(h2,h3) a{color:var(--kf-red);}
.blog-card :is(h2,h3) a:focus-visible{outline:none;}
.blog-card:has(:is(h2,h3) a:focus-visible){outline:2px solid var(--kf-red);outline-offset:2px;}
.blog-card-sum{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--grey-strong);}
.blog-card-meta{margin:auto 0 0;font-size:13px;color:var(--grey-strong);}
.blog-empty{padding:24px;border:1px dashed var(--line-strong);border-radius:var(--radius-card);background:var(--white);}
.blog-empty p{margin:0;font-size:16px;}
.blog-empty .cta{margin-bottom:0;}

/* ---- The article ---- */
/* One text column for the head, contents, body, FAQ and pager. A length, not 68ch: ch is read in each element's own
   font size, which left the 16px head and FAQ 90px narrower than the 18px body beside them. */
.page{--measure:720px;}
.blog-head{max-width:var(--measure);margin:0 0 24px;}
.blog-head h1{text-wrap:balance;}
.blog-standfirst{margin:0 0 16px;font-size:18px;line-height:1.5;color:var(--ink-2);text-wrap:pretty;}
.blog-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--grey-strong);}
.blog-byline{color:var(--ink);font-weight:500;}
.blog-cover{max-width:960px;margin:0 0 32px;}
.blog-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-card);background:var(--paper-2);}

.blog-toc{max-width:var(--measure);margin:0 0 32px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);}
.page .blog-toc h2{margin:0 0 8px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--grey-strong);}
.blog-toc ol{margin:0;padding-left:20px;font-size:14px;line-height:1.5;}
.blog-toc li{padding:2px 0;}
.blog-toc a{color:var(--ink);text-decoration:none;}
.blog-toc a:hover{color:var(--kf-red);text-decoration:underline;}

.blog-body{max-width:var(--measure);font-size:16px;line-height:1.65;color:var(--ink-2);overflow-wrap:break-word;}
@media (min-width:768px){.blog-body{font-size:18px;line-height:1.6;}}
.blog-body>*:first-child{margin-top:0;}
.blog-body p{margin:0 0 1em;text-wrap:pretty;}
/* Each paragraph takes the direction of its own first letter, so an Arabic or Hebrew paragraph in an English article reads right to left. */
.blog-body :is(p,li,h2,h3,h4,figcaption){unicode-bidi:plaintext;}
.page .blog-body h2{margin:48px 0 12px;font-size:22px;font-weight:500;line-height:1.25;color:var(--ink);scroll-margin-top:16px;}
.page .blog-body h3{margin:32px 0 8px;font-size:18px;font-weight:500;line-height:1.3;color:var(--ink);scroll-margin-top:16px;}
.page .blog-body h4{margin:24px 0 8px;font-size:16px;font-weight:500;line-height:1.35;color:var(--ink);scroll-margin-top:16px;}
.blog-body a{color:var(--kf-red);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.blog-body a:hover{text-decoration-thickness:2px;}
.blog-body ul,.blog-body ol{margin:0 0 1em;padding-left:1.4em;}
.blog-body li{margin:0 0 .4em;padding-left:.2em;}
.blog-body li::marker{color:var(--kf-red);}
.blog-body hr{margin:40px 0;border:0;border-top:1px solid var(--line);}
.blog-body blockquote{margin:24px 0;padding:0 0 0 20px;border-left:3px solid var(--line-strong);color:var(--ink);}
.blog-body sub,.blog-body sup{font-size:.75em;line-height:0;}
.blog-body figure{margin:32px 0;}
.blog-body img{display:block;max-width:100%;height:auto;border-radius:var(--radius-card);background:var(--paper-2);}
.blog-body figcaption{margin-top:8px;font-size:13px;line-height:1.45;color:var(--grey-strong);}
.blog-body iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;margin:32px 0;border:0;border-radius:var(--radius-card);background:var(--ink);}

/* Alignment from the editor or the Word file. */
.kf-align-left{text-align:left;}
.kf-align-center{text-align:center;}
.kf-align-right{text-align:right;}
.kf-align-justify{text-align:justify;hyphens:auto;}
/* Images: floated beside the text from 600px; full width below. Wide breaks out of the text column on large screens. */
.blog-body .kf-img-full,.blog-body figure.kf-img-full img{width:100%;}
@media (min-width:600px){
  .blog-body .kf-img-left{float:left;max-width:45%;margin:4px 24px 16px 0;}
  .blog-body .kf-img-right{float:right;max-width:45%;margin:4px 0 16px 24px;}
  .blog-body h2,.blog-body h3,.blog-body hr,.blog-body .kf-callout,.blog-body .kf-pullquote{clear:both;}
}
@media (min-width:1080px){.blog-body .kf-img-wide{width:min(960px,calc(100vw - 2 * var(--gutter)));max-width:none;}}

/* Callout: a boxed aside in the flow of the article. */
.blog-body .kf-callout{margin:32px 0;padding:20px 24px;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius-card);background:var(--white);font-size:16px;line-height:1.55;}
.blog-body .kf-callout>*:last-child{margin-bottom:0;}
.blog-body .kf-callout strong{color:var(--ink);}

/* Pull quote: the article's one memorable line, attributed. */
.blog-body .kf-pullquote,.blog-body figure.kf-pullquote{margin:40px 0;padding:4px 0 4px 24px;border-left:4px solid var(--kf-red);}
.blog-body .kf-pullquote blockquote{margin:0;padding:0;border:0;}
.blog-body .kf-pullquote blockquote p{margin:0;font-size:22px;font-weight:400;line-height:1.4;color:var(--ink);text-wrap:balance;}
.blog-body .kf-pullquote blockquote p::before{content:"\201C";}
.blog-body .kf-pullquote blockquote p::after{content:"\201D";}
.blog-body .kf-pullquote figcaption{margin-top:12px;font-size:14px;color:var(--grey-strong);}
@media (max-width:479px){.blog-body .kf-pullquote blockquote p{font-size:18px;}}

/* A link styled as a button inside the article. */
.blog-body a.kf-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--radius-btn);background:var(--kf-red);
  color:var(--white);font-size:14px;font-weight:500;text-decoration:none;}
.blog-body a.kf-btn:hover{background:var(--kf-red-dark);}

/* Tables scroll sideways in their own box on narrow screens; the page never does. The box (lib/blog.js renderArticle)
   is a named, focusable region so keyboard users can scroll it too. */
.blog-body .blog-table{width:max-content;max-width:100%;margin:24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);}
.blog-body .blog-table:focus-visible{outline:2px solid var(--kf-red);outline-offset:2px;}
.blog-body table{border-collapse:collapse;font-size:14px;line-height:1.45;}
.blog-body th,.blog-body td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;min-width:120px;}
.blog-body th{font-weight:500;color:var(--ink);background:var(--paper);}
.blog-body tr:last-child td{border-bottom:0;}

/* ---- FAQ ---- */
.blog-faq{max-width:var(--measure);margin:48px 0 0;}
.page .blog-faq h2{margin:0 0 12px;font-size:22px;font-weight:500;}
.blog-faq details{border-top:1px solid var(--line);}
.blog-faq details:last-child{border-bottom:1px solid var(--line);}
.blog-faq summary{position:relative;display:block;min-height:44px;padding:14px 40px 14px 0;font-size:16px;font-weight:500;line-height:1.4;color:var(--ink);cursor:pointer;list-style:none;}
.blog-faq summary::-webkit-details-marker{display:none;}
.blog-faq summary::after{content:"";position:absolute;top:20px;right:8px;width:9px;height:9px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform 150ms;}
.blog-faq details[open] summary::after{top:24px;transform:rotate(-135deg);}
.blog-faq summary:hover{color:var(--kf-red);}
.blog-faq summary:focus-visible{outline:2px solid var(--kf-red);outline-offset:2px;border-radius:4px;}
.blog-faq-a{padding:0 0 16px;font-size:16px;line-height:1.6;color:var(--ink-2);}
.blog-faq-a p{margin:0 0 .75em;}
.blog-faq-a p:last-child{margin:0;}

/* ---- Contact, pager, related ---- */
/* The enquiry box (enquiryBox in seo-pages.js, public/js/blog-enquiry.js): the app's "Talk to our team." dialog
   (#enquireModal) drawn inline as a card, with its class names. app.css cannot load here (it styles the whole app), so
   these rules restate what the dialog computes to, measured in the browser at 1440, 768, 375 and 320: the same
   breakpoints (900, 640, 600, 560), sizes, colours and states. Change the dialog, re-measure and change these. */
.blog-enq{--fs:1;display:grid;grid-template-columns:minmax(0,1fr);max-width:936px;margin:48px 0 0;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--paper);color:var(--ink);font:300 16px/normal var(--font-body);overflow:hidden;overflow:clip;} /* clip: rounds the corners without becoming a scroll box, which would stop the phone's sticky Send bar sticking */
@media (max-width:389px){.blog-enq{--fs:.96;}}
@media (max-width:359px){.blog-enq{--fs:.92;}}
.blog-enq [hidden]{display:none !important;}
.blog-enq p{margin:0;}
.blog-enq .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.blog-enq .enq-head{order:1;padding:24px 16px 0;background:var(--kf-red);color:var(--white);}
.blog-enq .enq-side{order:2;padding:0 16px 20px;background:var(--kf-red);color:var(--white);}
.blog-enq .enquire-form-body{order:3;min-width:0;padding:21.6px 16px 23.4px;background:var(--white);}
.blog-enq .enq-eyebrow{margin:0 0 5.4px;font-size:11px;font-weight:500;opacity:.85;}
.page .blog-enq .enq-title{margin:0;font-family:var(--font-body);font-size:calc(22px * var(--fs));font-weight:400;line-height:1.2;letter-spacing:-0.005em;color:var(--white);}
.blog-enq .enq-title .hl{font-weight:300;letter-spacing:-0.04em;}
.blog-enq .enq-sub{margin:7.2px 0 10.8px;font-size:13px;opacity:.9;}
.blog-enq .enq-chat{display:none;}
.blog-enq .enq-team{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.blog-enq .enq-direct{margin:4px 0 0;font-size:11px;opacity:.8;}
.blog-enq .enq-direct a{color:inherit;}
.blog-enq .enq-company{margin:12.6px 0 0;font-size:11px;opacity:.8;}
.blog-enq .enq-side :focus-visible{outline-color:var(--white);}
/* A tablet (touch, 601px up): the direct links take a 44px tap height; the negative margins keep the 14px line where it sat. */
@media (min-width:601px) and (pointer:coarse){
  .blog-enq .enq-direct{margin:-11px 0 -15px;}
  .blog-enq .enq-direct a{display:inline-flex;align-items:center;min-height:44px;}
}
/* 601 to 899px the dialog is a 648px sheet with the red band above the form; the card keeps that width so every tile,
   label and line wraps where the dialog's do. */
@media (min-width:601px) and (max-width:899px){.blog-enq{max-width:648px;}}
/* Wide: the red panel is a column beside the form, the company line at its foot. */
@media (min-width:900px){
  .blog-enq{grid-template-columns:minmax(234px,279px) minmax(0,1fr);grid-template-rows:auto 1fr;}
  .blog-enq .enq-head{grid-column:1;grid-row:1;padding:24px 24px 0;}
  .blog-enq .enq-side{grid-column:1;grid-row:2;display:flex;flex-direction:column;padding:0 24px 18px;}
  .blog-enq .enquire-form-body{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;padding:24px 24px 18px;}
  .blog-enq .enq-sub{margin:7.2px 0 16.2px;font-size:12px;}
  .blog-enq .enq-team{grid-template-columns:1fr;}
  .blog-enq .enq-company{margin-top:auto;padding-top:14.4px;}
}

/* ---- The form ---- */
.blog-enq .drawer-section-title{margin:0 0 7.2px;font-size:11px;font-weight:500;color:var(--grey-strong);}
.blog-enq .enquire-location-chip{display:inline-block;margin:0 0 9px;padding:2px 8px;border-radius:var(--r-tag);background:rgba(166,25,46,.08);color:var(--kf-red);font-size:12px;font-weight:500;}
.blog-enq .enq-nojs{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--ink);}
.blog-enq .enq-nojs a{color:var(--kf-red);}
.blog-enq .edit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12.6px 14.4px;margin:16.2px 0 7.2px;}
.blog-enq .edit-grid label,.blog-enq .enquire-message-label{display:flex;flex-direction:column;justify-content:flex-end;gap:5.4px;min-width:0;font-size:13px;font-weight:500;color:var(--ink-2);}
.blog-enq .enquire-message-label{justify-content:normal;margin-top:12.6px;}
.blog-enq .edit-grid input,.blog-enq textarea{display:block;width:100%;min-height:48px;margin:0;padding:9.9px 10.8px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);
  background:var(--white);color:var(--ink);font:400 14px/normal var(--font-body);}
.blog-enq textarea{resize:vertical;}
.blog-enq :is(input,textarea).invalid{border-color:#B23A2E;}
.blog-enq .field-error{display:block;font-size:13px;font-weight:500;color:var(--kf-red);}
.blog-enq .consent-checkbox-label{display:flex;align-items:flex-start;gap:12px;margin:14.4px 0 16.2px;padding:12px 0;font-size:11px;line-height:1.5;color:var(--ink);cursor:pointer;}
.blog-enq .consent-checkbox-label.is-marketing{margin-top:8px;}
.blog-enq .consent-checkbox-label input{flex:none;width:20px;height:20px;margin:0;font-family:inherit;accent-color:var(--kf-red);cursor:pointer;}
.blog-enq .consent-checkbox-label.invalid{margin-bottom:10.8px;padding:7.2px 9px;border:1px solid rgba(194,59,46,.3);background:rgba(194,59,46,.05);}
.blog-enq .consent-text{font-size:11px;line-height:1.6;color:var(--grey-strong);}
.blog-enq .consent-text a{color:inherit;}
.blog-enq .enq-consent-more{display:none;align-items:center;min-height:44px;margin:-6px 0 0 32px;padding:0;border:0;background:none;color:var(--kf-red);font:500 13px/normal var(--font-body);text-decoration:underline;cursor:pointer;}
.blog-enq .enquire-form-actions{display:flex;align-items:center;justify-content:space-between;gap:14.4px;margin-top:19.8px;padding-top:16.2px;border-top:1px solid var(--line);}
.blog-enq .enquire-form-note{font-size:11px;color:var(--grey-strong);white-space:nowrap;}
.blog-enq .enquire-btn{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:0 20px;border:1px solid var(--kf-red);border-radius:var(--r-ctl);
  background:var(--kf-red);color:var(--white);font:500 14px/normal var(--font-body);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;}
.blog-enq .enquire-btn:hover{background:var(--kf-red-dark);border-color:var(--kf-red-dark);}
.blog-enq .enquire-btn:disabled{opacity:.4;cursor:not-allowed;}
.blog-enq .enquire-btn:disabled:hover{background:var(--kf-red);border-color:var(--kf-red);}
.blog-enq .enquire-form-error{margin-top:10.8px;padding:9px 10.8px;border:1px solid rgba(194,59,46,.3);background:rgba(194,59,46,.08);color:var(--kf-red);font-size:13px;line-height:1.5;}
/* Empty, it stays in the page (so the alert is announced when filled) but takes no room. */
.blog-enq .enquire-form-error:empty{margin:0;padding:0;border:0;}
@media (min-width:900px){
  .blog-enq .enquire-location-chip{display:block;width:fit-content;}
  .blog-enq .edit-grid{gap:9px 12.6px;margin-top:10.8px;}
  .blog-enq .edit-grid label,.blog-enq .enquire-message-label{gap:3.6px;}
  .blog-enq .enquire-message-label{margin-top:9px;}
  .blog-enq .edit-grid input,.blog-enq textarea{padding:7.2px 9.9px;}
  .blog-enq .consent-checkbox-label{margin:10.8px 0 0;}
  .blog-enq .consent-checkbox-label.invalid{margin-bottom:10.8px;}
  .blog-enq .consent-checkbox-label.is-marketing{margin-top:8px;}
  .blog-enq .enquire-form-actions{margin-top:0;padding-top:16px;}
}

/* ---- The adviser tiles (contactCardHTML in app.js) ---- */
.blog-enq{--icon-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.4v2.9a1.9 1.9 0 0 1-2.1 1.9 18.8 18.8 0 0 1-8.2-2.9 18.5 18.5 0 0 1-5.7-5.7A18.8 18.8 0 0 1 2.1 4.4 1.9 1.9 0 0 1 4 2.3h2.9a1.9 1.9 0 0 1 1.9 1.6c.1.9.4 1.8.7 2.7a1.9 1.9 0 0 1-.4 2L7.8 9.8a15.2 15.2 0 0 0 5.7 5.7l1.2-1.2a1.9 1.9 0 0 1 2-.4c.9.3 1.8.6 2.7.7a1.9 1.9 0 0 1 1.6 1.8z'/%3E%3C/svg%3E");
  --icon-whatsapp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5l1.3-4.3A8.6 8.6 0 1 1 8 19.3z'/%3E%3Cpath d='M9.2 8.6c.3-.4.7-.5 1-.4l.6 1.5c.1.3 0 .5-.2.7l-.5.5a5.6 5.6 0 0 0 3 3l.5-.5c.2-.2.4-.3.7-.2l1.5.6c.1.3 0 .7-.4 1-.6.6-1.5.8-2.4.4a8.3 8.3 0 0 1-4.2-4.2c-.4-.9-.2-1.8.4-2.4z'/%3E%3C/svg%3E");
  --icon-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='M3 6.5l9 6 9-6'/%3E%3C/svg%3E");
  --icon-linkedin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='3'/%3E%3Cpath d='M7.5 10.5v6M7.5 7.5v.01M11.5 16.5v-6M11.5 13a2.5 2.5 0 0 1 5 0v3.5'/%3E%3C/svg%3E");}
.blog-enq .kf-contact{container:kfcontact / inline-size;display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);color:var(--ink);}
.blog-enq .kf-contact-head{display:flex;align-items:center;gap:12px;min-width:0;}
.blog-enq .kf-contact-av{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--paper-2);font-size:14px;font-weight:500;color:var(--kf-red);}
.blog-enq .kf-contact-who{min-width:0;}
.blog-enq .kf-contact-name{font-size:14px;font-weight:500;line-height:1.2;letter-spacing:-0.01em;}
.blog-enq .kf-contact-title{font-size:12px;line-height:1.3;color:var(--grey-strong);}
.blog-enq .kf-contact-cea{font-size:11px;color:var(--grey-strong);}
.blog-enq .kf-contact-rows{display:flex;flex-wrap:nowrap;gap:8px;margin-top:12px;}
.blog-enq .kf-contact-row{display:flex;flex:1 1 0;align-items:center;justify-content:center;gap:8px;min-width:0;height:44px;min-height:44px;padding:0 12px;border:1px solid var(--ink);border-radius:var(--r-ctl);
  background:var(--white);color:var(--ink);font-size:14px;font-weight:500;line-height:1;text-decoration:none;}
.blog-enq .kf-contact-row:nth-child(n+3){flex:0 0 44px;width:44px;padding:0;}
.blog-enq .kf-contact-row::before{content:"";display:block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic) center/20px 20px no-repeat;mask:var(--ic) center/20px 20px no-repeat;}
.blog-enq .kf-contact-row[href^="tel:"]{--ic:var(--icon-phone);}
.blog-enq .kf-contact-row[href*="wa.me"]{--ic:var(--icon-whatsapp);}
.blog-enq .kf-contact-row[href^="mailto:"]{--ic:var(--icon-mail);}
.blog-enq .kf-contact-row[href*="linkedin.com"]{--ic:var(--icon-linkedin);}
.blog-enq .kf-contact-row:hover{background:var(--paper-2);color:var(--ink);}
.blog-enq .kf-contact-row:focus-visible{outline:2px solid var(--kf-red);outline-offset:2px;}
.blog-enq .kf-contact-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:inherit;}
.blog-enq .kf-contact-row .kf-ct-short{display:none;}
.blog-enq .kf-contact-row:nth-child(n+3) b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@container kfcontact (max-width:300px){
  .blog-enq .kf-contact-row{flex:1 1 0;width:auto;padding:0;}
  .blog-enq .kf-contact-row:nth-child(n+3){flex:1 1 0;width:auto;}
  .blog-enq .kf-contact-row b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
@media (max-width:640px){
  .blog-enq .kf-contact-row .kf-ct-full{display:none;}
  .blog-enq .kf-contact-row .kf-ct-short{display:inline;}
  /* WhatsApp is the one button (Call only when an adviser has no WhatsApp number). */
  .blog-enq .enq-team .kf-contact-row:not([href^="tel:"],[href*="wa.me"]){display:none;}
  .blog-enq .enq-team .kf-contact-rows:has([href*="wa.me"]) .kf-contact-row[href^="tel:"]{display:none;}
}

/* ---- A phone: a slim title bar, the form, then the advisers as compact rows on a light band ---- */
@media (max-width:600px){
  .blog-enq .enq-head{padding:15px 16px;}
  .blog-enq .enq-eyebrow,.blog-enq .enq-sub,.blog-enq .drawer-section-title{display:none;}
  .blog-enq .enquire-form-body{order:2;padding:12px 16px 20px;}
  .blog-enq .enq-side{order:3;padding:0;background:var(--paper-2);color:var(--ink);}
  .blog-enq .enq-chat{display:block;padding:20px 16px 10px;background:var(--paper-2);font-size:14px;font-weight:500;}
  .blog-enq .enq-team{grid-template-columns:1fr;gap:8px;padding:0 16px;background:var(--paper-2);}
  .blog-enq .enq-company{margin:0;padding:10px 16px 16px;background:var(--paper-2);color:var(--grey-strong);opacity:1;}
  /* The links take a 44px tap height (the line is 14px); the -15px and 1px keep the text where it sat, 16px from each neighbour. */
  .blog-enq .enq-direct{position:relative;margin:-15px 0 0;padding:0 16px 1px;background:var(--paper-2);color:var(--grey-strong);opacity:1;}
  .blog-enq .enq-direct a{display:inline-flex;align-items:center;min-height:44px;}
  .blog-enq .enq-side :focus-visible{outline-color:var(--kf-red);}
  .blog-enq .enquire-location-chip{margin:0;padding:0;background:none;color:var(--grey-strong);font-size:13px;line-height:1.4;}
  .blog-enq .edit-grid{gap:12px 10px;margin-top:12px;}
  .blog-enq .edit-grid>label:is(:has(#benqName),:has(#benqEmail)){grid-column:1 / -1;}
  .blog-enq .edit-grid label,.blog-enq .enquire-message-label{gap:4px;}
  /* 16px flat, not the dialog's 16px * --fs (15.36px at 375, 14.72px at 320): under 16px iOS Safari zooms on focus. */
  .blog-enq .edit-grid input,.blog-enq textarea{padding:12px;font-size:16px;}
  .blog-enq textarea::placeholder{font-size:12px;}
  .blog-enq .enquire-message-label{margin-top:12px;}
  .blog-enq .consent-checkbox-label{margin:8px 0 0;padding:8px 0;}
  .blog-enq .consent-checkbox-label.invalid{margin-bottom:10.8px;padding:7.2px 9px;}
  .blog-enq #benqConsentText{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.5;}
  .blog-enq .consent-checkbox-label:has(+ .field-error + #benqConsentMore[aria-expanded="true"]) #benqConsentText{display:block;-webkit-line-clamp:unset;overflow:visible;}
  .blog-enq .consent-checkbox-label.is-marketing .consent-text{font-size:12px;line-height:1.5;}
  .blog-enq .enq-consent-more{display:inline-flex;}
  .blog-enq .consent-checkbox-label input{font-size:calc(16px * var(--fs));}
  /* The Send bar sticks on top of the footer kf-chrome.css pins to the foot of a phone (--kf-foot-h, its safe-area padding
     under it); while a text field has focus that footer hides, so the bar drops to the edge and keeps the safe area itself. */
  .blog-enq .enquire-form-actions{position:sticky;bottom:calc(var(--kf-foot-h, 0px) + env(safe-area-inset-bottom, 0px));z-index:2;flex-wrap:nowrap;gap:12px;margin:0 -16px;padding:12px 16px;background:var(--white);}
  body:has(:is(input:not([type=checkbox],[type=radio],[type=button],[type=submit],[type=reset],[type=range],[type=color],[type=file],[type=hidden]),textarea,[contenteditable=""],[contenteditable="true"]):focus) .blog-enq .enquire-form-actions{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
  .blog-enq .enquire-form-note{flex:1 1 0;min-width:0;line-height:1.35;white-space:normal;}
  .blog-enq .enquire-form-actions .enquire-btn{min-height:48px;}
  .blog-enq .enq-team .kf-contact{flex-direction:row;align-items:center;gap:12px;padding:12px;}
  .blog-enq .enq-team .kf-contact-head{flex:1 1 auto;gap:10px;}
  .blog-enq .kf-contact-av{width:40px;height:40px;font-size:13px;}
  .blog-enq .kf-contact-who{display:flex;flex-direction:column;gap:2px;}
  .blog-enq .kf-contact-name{line-height:1.25;}
  .blog-enq .kf-contact-title{font-size:13px;}
  .blog-enq .enq-team .kf-contact-title{display:none;}
  .blog-enq .kf-contact-cea{font-size:12px;line-height:1.3;}
  .blog-enq .enq-team .kf-contact-rows{flex:none;gap:0;margin:0;}
  .blog-enq .enq-team .kf-contact-row{flex:0 0 44px;width:44px;padding:0;}
  .blog-enq .enq-team .kf-contact-row b{display:none;}
}

/* ---- Sent: the confirmation replaces the form (showEnquirySent in app.js). The card narrows to the dialog's sent width and
   shows only the confirmation; the rules below it are app.css's ENQUIRY SENT block, copied with .blog-enq .enq-sent in place
   of its selector prefix (that block was written to be reused this way). Change it there, copy it here. ---- */
.blog-enq.is-sent{grid-template-columns:minmax(0,1fr);max-width:560px;}
.blog-enq.is-sent :is(.enq-head,.enq-side,.drawer-section-title,.enquire-location-chip){display:none;}
.blog-enq.is-sent .enquire-form-body{grid-column:auto;grid-row:auto;display:block;padding:24px;}
@media (min-width:641px) and (max-width:899px){.blog-enq.is-sent .enquire-form-body{padding:24px 16px;}}
@media (max-width:640px){.blog-enq.is-sent .enquire-form-body{padding:16px 16px 24px;}}
/* copy of app.css ENQUIRY SENT: begin */
.blog-enq .enq-sent{padding:0;text-align:left;color:var(--ink);}
.blog-enq .enq-sent :is(h3,h4,p,ol,ul,dl,dd){margin:0;padding:0;}

/* Head: the drawn check, the headline (focused on arrival) and when to expect a reply. */
.blog-enq .enq-sent .enq-sent-mark{display:block;width:48px;height:48px;margin:0 0 16px;overflow:visible;}
.blog-enq .enq-sent .enq-sent-mark :is(circle,path){fill:none;stroke:var(--kf-red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;}
.blog-enq .enq-sent .enq-sent-ring{transform:rotate(-90deg);transform-origin:center;transform-box:fill-box;animation:enqSentDraw 300ms cubic-bezier(0.2,0,0,1) both;}
.blog-enq .enq-sent .enq-sent-tick{stroke-width:2.5;animation:enqSentDraw 200ms cubic-bezier(0.2,0,0,1) 180ms both;}
.blog-enq .enq-sent .enq-sent-title{font-family:var(--font-display);font-size:calc(22px * var(--fs, 1));font-weight:500;line-height:1.27;letter-spacing:-0.01em;color:var(--ink);text-wrap:pretty;}
.blog-enq .enq-sent .enq-sent-title:focus{outline:none;}
.blog-enq .enq-sent .enq-sent-title:focus-visible{outline:2px solid var(--kf-red);outline-offset:2px;border-radius:var(--r-tag);}
.blog-enq .enq-sent .enq-sent-lead{max-width:46ch;margin-top:8px;font-size:14px;line-height:20px;color:var(--grey-strong);}
@media (min-width:641px){.blog-enq .enq-sent .enq-sent-title{font-size:calc(28px * var(--fs, 1));line-height:1.22;}}

/* Groups: a hairline and 24px each side, a small grey label 12px above the content. */
.blog-enq .enq-sent .enq-sent-sec{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
.blog-enq .enq-sent .enq-sent-sec[hidden]{display:none;}
.blog-enq .enq-sent .enq-sent-h{margin-bottom:12px;font-family:var(--font-body);font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:var(--grey-strong);}
.blog-enq .enq-sent :is(.enq-sent-head,.enq-sent-sec,.enq-sent-actions){animation:enqSentRise 240ms cubic-bezier(0.2,0,0,1) both;}
.blog-enq .enq-sent .enq-sent-sec{animation-delay:120ms;}
.blog-enq .enq-sent .enq-sent-actions{animation-delay:160ms;}

/* What happens next: a connected timeline. 24px markers; the 20px line of text sits 2px down, centred on them. */
.blog-enq .enq-sent .enq-sent-steps{list-style:none;counter-reset:enqsent;}
.blog-enq .enq-sent .enq-sent-steps li{position:relative;display:block;min-height:24px;padding:2px 0 16px 36px;font-size:14px;line-height:20px;color:var(--grey-strong);counter-increment:enqsent;}
.blog-enq .enq-sent .enq-sent-steps li:last-child{padding-bottom:0;}
.blog-enq .enq-sent .enq-sent-steps li::before{content:counter(enqsent);position:absolute;left:0;top:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--line-strong);border-radius:50%;background:var(--white);color:var(--ink);font-size:12px;font-weight:500;line-height:1;}
.blog-enq .enq-sent .enq-sent-steps li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:24px;bottom:0;width:1px;background:var(--line-strong);}
.blog-enq .enq-sent .enq-sent-steps li.is-now{color:var(--ink);}
.blog-enq .enq-sent .enq-sent-steps li.is-now::before{border-color:var(--kf-red);background:var(--kf-red);color:var(--white);}

/* Who will reply: one card per adviser, every card the height of the tallest (grid-auto-rows:1fr). On a phone the
   name sits above two equal buttons; from 440px of room the buttons move to the right of the name. */
.blog-enq .enq-sent .enq-sent-team{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:12px;list-style:none;container-type:inline-size;}
.blog-enq .enq-sent .enq-sent-adv{display:flex;flex-direction:column;justify-content:center;gap:16px;box-sizing:border-box;min-width:0;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);}
.blog-enq .enq-sent .enq-sent-who{display:flex;align-items:center;gap:12px;min-width:0;}
.blog-enq .enq-sent .enq-sent-who > div{min-width:0;}
.blog-enq .enq-sent .enq-sent-av{flex:none;display:grid;place-items:center;box-sizing:border-box;width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--paper-2);color:var(--kf-red);font-size:14px;font-weight:500;line-height:1;}
.blog-enq .enq-sent .enq-sent-name{font-size:14px;font-weight:500;line-height:20px;color:var(--ink);overflow-wrap:anywhere;}
.blog-enq .enq-sent .enq-sent-role{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px;font-size:12px;line-height:16px;color:var(--grey-strong);}
.blog-enq .enq-sent .enq-sent-acts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;}
.blog-enq .enq-sent .enq-sent-act{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-width:0;height:44px;margin:0;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--white);color:var(--ink);font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:border-color 120ms,background-color 120ms;}
.blog-enq .enq-sent .enq-sent-act svg{display:block;flex:none;width:18px;height:18px;color:var(--ink);}
.blog-enq .enq-sent .enq-sent-act:hover{border-color:var(--ink);background:var(--paper);}
.blog-enq .enq-sent .enq-sent-act:focus-visible{outline:2px solid var(--kf-red);outline-offset:2px;}
@container (min-width:440px){
  .blog-enq .enq-sent .enq-sent-adv{flex-direction:row;align-items:center;justify-content:space-between;}
  .blog-enq .enq-sent .enq-sent-who{flex:1 1 auto;}
  .blog-enq .enq-sent .enq-sent-acts{flex:none;grid-auto-columns:112px;}
}

/* What you sent: a definition list on a quiet panel, labels in one 96px column so every value starts on the same line. */
.blog-enq .enq-sent .enq-sent-sum{padding:0 16px;border-radius:var(--r-card);background:var(--paper);}
.blog-enq .enq-sent .enq-sent-sum > div{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:14px;line-height:20px;}
.blog-enq .enq-sent .enq-sent-sum > div:first-child{border-top:0;}
.blog-enq .enq-sent .enq-sent-sum dt{font-size:13px;color:var(--grey-strong);}
.blog-enq .enq-sent .enq-sent-sum dd{color:var(--ink);font-weight:400;overflow-wrap:anywhere;}
.blog-enq .enq-sent .enq-sent-sum .enq-sent-msg dd{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;}

/* Actions: Back to spaces is the one filled button; the PDF (a shortlist on record) sits beside it, outlined. */
.blog-enq .enq-sent .enq-sent-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.blog-enq .enq-sent .enq-sent-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:auto;min-width:0;height:44px;min-height:44px;margin:0;padding:0 20px;border:1px solid var(--kf-red);border-radius:var(--r-ctl);background:var(--kf-red);color:var(--white);font-family:inherit;font-size:14px;font-weight:500;line-height:1;cursor:pointer;}
.blog-enq .enq-sent .enq-sent-btn:hover{border-color:var(--kf-red-dark);background:var(--kf-red-dark);}
.blog-enq .enq-sent .enq-sent-btn-alt{border-color:var(--line-strong);background:var(--white);color:var(--ink);}
.blog-enq .enq-sent .enq-sent-btn-alt:hover{border-color:var(--ink);background:var(--paper);}
.blog-enq .enq-sent .enq-sent-btn[hidden]{display:none;}
.blog-enq .enq-sent .enq-sent-btn:focus-visible{outline:2px solid var(--kf-red);outline-offset:2px;}

/* Phones: the buttons take the full width, one under the other; labels get 88px. */
@media (max-width:480px){
  .blog-enq .enq-sent .enq-sent-actions{flex-direction:column;}
  .blog-enq .enq-sent .enq-sent-btn{width:100%;}
  .blog-enq .enq-sent .enq-sent-sum > div{grid-template-columns:88px minmax(0,1fr);gap:12px;}
}
@keyframes enqSentDraw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes enqSentRise{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .blog-enq .enq-sent :is(.enq-sent-ring,.enq-sent-tick,.enq-sent-head,.enq-sent-sec,.enq-sent-actions){animation:none !important;}
  .blog-enq .enq-sent :is(.enq-sent-act,.enq-sent-btn){transition:none;}
}
/* copy of app.css ENQUIRY SENT: end */
.blog-pager{display:grid;grid-template-columns:1fr;gap:12px;max-width:var(--measure);margin:32px 0 0;}
@media (min-width:600px){.blog-pager{grid-template-columns:1fr 1fr;}}
.blog-pager a{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);
  color:var(--ink);font-size:16px;font-weight:500;line-height:1.35;text-decoration:none;}
.blog-pager a:hover{border-color:var(--ink);color:var(--kf-red);}
.blog-pager a span{font-size:12px;font-weight:500;color:var(--grey-strong);}
.blog-next{text-align:right;}
@media (max-width:599px){.blog-next{text-align:left;}}
.blog-related{margin:48px 0 0;}
.page .blog-related>h2{margin:0 0 12px;font-size:22px;font-weight:500;}

/* ---- Print: the article alone, black on white, links spelled out ---- */
@media print{
  .skip-link,.topbar-main,.kf-site-footer,.crumbs,.blog-enq,.blog-pager,.blog-related,.blog-filters,.blog-toc{display:none !important;}
  body{background:#fff;color:#000;}
  .page{padding:0;max-width:none;}
  .blog-body,.blog-head,.blog-faq{max-width:none;font-size:11pt;}
  .blog-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;}
  .blog-faq details>*:not(summary){display:block;}
  .blog-faq details::details-content{display:block;content-visibility:visible;}
  .blog-body img,.blog-body figure,.blog-body .kf-callout,.blog-body .kf-pullquote,.blog-body table{break-inside:avoid;}
  .page .blog-body h2,.page .blog-body h3{break-after:avoid;}
}