/* Kabir Family Law - people profile pages (/our-people/).
   Owned by the people-profile template only. Scoped to .kflp, plus a small
   number of rules scoped to body.single-our-people where a site-wide element
   appears inside the same screen as this template's own actions.
   Colour values are copied from the site's own tokens and re-declared locally
   so this file does not depend on another stylesheet's load order.
   Motion: transform and opacity only. No layout property is animated.

   Round-2 revision: form containment, mobile float reset, focus indicator
   contrast, sidebar behaviour, single action colour, measured text contrast. */

.kflp{
  --kflp-navy:#17243E;
  --kflp-deep:#35354E;
  --kflp-gold:#B28E2E;
  --kflp-gold-bright:#E8B84B;
  --kflp-gold-text:#8A6E24;
  /* 5.40:1 on the #F2F5F9 card tint - the 12px card label is small text and
     needs 4.5:1, which --kflp-gold-text (4.43:1) did not reach. */
  --kflp-gold-deep:#7A6120;
  --kflp-tint:#F2F5F9;
  --kflp-ink:#22283A;
  --kflp-muted:#525C70;
  --kflp-rule:#A9B1C4;
  --kflp-hairline:#E3E6EC;
  --kflp-r:4px;
  --kflp-r-lg:8px;
  --kflp-focus:50% 22%;
}

/* ---- shared ---- */
.kflp *,.kflp *::before,.kflp *::after{box-sizing:border-box}
.kflp-wrap{width:min(1160px,100% - 32px);margin-inline:auto}
@media (min-width:600px){.kflp-wrap{width:min(1160px,100% - 48px)}}

/* ---- focus indicator ----------------------------------------------------
   Two colours, because one cannot carry both surfaces. The navy ring measures
   15.46:1 on white and 14.14:1 on the card tint; the gold ring outside it
   measures 8.38:1 on the navy hero. Whichever surface the control sits on, one
   of the two rings is well past the 3:1 that WCAG 2.2 1.4.11 asks for.
   The previous single gold ring measured 1.84:1 on white and 1.69:1 on tint.
   Every focusable control is covered here, not only links and buttons. */
.kflp a:focus-visible,
.kflp button:focus-visible,
.kflp input:focus-visible,
.kflp select:focus-visible,
.kflp textarea:focus-visible,
.kflp summary:focus-visible,
.kflp [tabindex]:focus-visible{
  outline:3px solid var(--kflp-navy);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--kflp-gold-bright);
  border-radius:2px;
}
/* Three controls carry a focus rule of their own from elsewhere that outranks
   the block above - links inside the biography, links in the breadcrumb, and
   the form's submit button, which Gravity Forms styles at .gform_wrapper
   .button:focus. Measured on the built page, not assumed. These selectors are
   written to outrank each of them so every control on this page shows the same
   indicator. */
.kflp .kflp-prose a:focus-visible,
.kflp-crumbs #breadcrumbs a:focus-visible,
.kflp-enquiry .gform_wrapper .gform_footer input[type=submit]:focus-visible,
.kflp .kflp-details a:focus-visible,
.kflp .kflp-rail a:focus-visible{
  outline:3px solid var(--kflp-navy);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--kflp-gold-bright);
}

/* ---- 1. HERO ---- */
.kflp-hero{
  background:var(--kflp-navy);
  color:#fff;
  padding:24px 0 0;
  position:relative;
}
.kflp-hero-grid{display:grid;gap:24px;align-items:center}
@media (min-width:900px){
  .kflp-hero{padding:48px 0 0}
  .kflp-hero-grid{grid-template-columns:minmax(280px,5fr) 7fr;gap:56px}
}

/* Portrait. aspect-ratio plus width/height attributes hold the box before the
   file arrives, so this section contributes no layout shift. Nothing is ever
   painted over the image - the name lives in its own grid cell. */
.kflp-portrait{position:relative;margin:0}
.kflp-portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  max-height:58vh;
  object-fit:cover;
  object-position:var(--kflp-focus);
  border-radius:var(--kflp-r-lg);
  background:var(--kflp-deep);
}
@media (min-width:900px){
  .kflp-portrait img{max-height:none;position:relative;z-index:1}
  /* offset gold frame - the one intentional flourish in the hero */
  .kflp-portrait::before{
    content:"";
    position:absolute;
    inset:16px -16px -16px 16px;
    border:1px solid var(--kflp-gold);
    border-radius:var(--kflp-r-lg);
    opacity:.55;
    z-index:0;
    pointer-events:none;
  }
}

.kflp-id{min-width:0;padding-bottom:8px}
.kflp-eyebrow{
  margin:0;
  font-size:12px;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--kflp-gold-bright);
}
.kflp-name{
  margin:10px 0 0;
  font-size:clamp(28px,5.6vw,46px);
  line-height:1.08;
  font-weight:700;
  color:#fff;
  letter-spacing:-.01em;
}
/* The 26ch clamp defeated text-wrap:balance: it held the line to 231px inside
   a 343px column and split the compound job title mid-phrase. The role now
   uses the column it is given, so a title that fits on one line stays on one
   line and a longer one is balanced across two. */
.kflp-role{
  margin:10px 0 0;
  font-size:clamp(16px,3.2vw,20px);
  line-height:1.35;
  font-weight:500;
  color:var(--kflp-gold-bright);
  max-width:44ch;
  text-wrap:balance;
}
.kflp-rule{
  width:64px;height:2px;
  background:var(--kflp-gold);
  border:0;margin:20px 0 0;
}

/* credentials - squared tags, not pills */
.kflp-creds{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kflp-creds li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:14px;line-height:1.4;font-weight:500;
  color:#EEF1F7;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(169,177,196,.30);
  border-radius:var(--kflp-r);
  padding:8px 12px;
}
.kflp-creds svg{flex:0 0 auto;width:16px;height:16px;margin-top:1px;color:var(--kflp-gold-bright)}

/* ---- actions -------------------------------------------------------------
   One action colour on the page, one radius, one alignment. Below 600px the
   two buttons take the full column instead of sitting at 238px and 233px with
   a ragged right edge. */
.kflp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.kflp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 24px;
  border:1px solid transparent;border-radius:var(--kflp-r);
  font-size:16px;font-weight:600;line-height:1.2;text-align:center;
  text-decoration:none;cursor:pointer;
  transition:transform .16s ease,opacity .16s ease;
}
@media (max-width:599.98px){
  .kflp-actions{display:grid;grid-template-columns:1fr;gap:12px}
  .kflp-actions .kflp-btn{width:100%}
}
/* The gold fill measures 2.82:1 against the #F2F5F9 card tint, which is under
   the 3:1 a control boundary needs, so the button carries its own darker edge
   (4.43:1 on that tint). */
.kflp-btn-primary{background:var(--kflp-gold);color:var(--kflp-navy);border-color:var(--kflp-gold-text)}
.kflp-btn-primary:hover,.kflp-btn-primary:focus{color:var(--kflp-navy);text-decoration:none;transform:translateY(-2px)}
.kflp-btn-primary:active{transform:translateY(0)}
.kflp-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.kflp-btn-ghost:hover,.kflp-btn-ghost:focus{color:#fff;text-decoration:none;transform:translateY(-2px);opacity:.86}
.kflp-btn-ghost:active{transform:translateY(0)}

/* contact rail along the foot of the navy band */
.kflp-rail{
  margin-top:28px;
  border-top:1px solid rgba(169,177,196,.24);
  padding:4px 0;
  display:flex;flex-wrap:wrap;gap:4px 28px;
}
.kflp-rail a{
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:8px 0;
  color:#fff;font-size:15px;font-weight:600;text-decoration:none;
  transition:transform .16s ease,opacity .16s ease;
}
.kflp-rail a:hover,.kflp-rail a:focus{color:#fff;opacity:.82;transform:translateX(2px)}
.kflp-rail svg{width:18px;height:18px;color:var(--kflp-gold-bright);flex:0 0 auto}

/* ---- 2. BREADCRUMB ---- */
.kflp-crumbs{background:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--kflp-muted);padding:12px 0;border-bottom:1px solid var(--kflp-hairline)}
.kflp-crumbs a{color:var(--kflp-muted)}
.kflp-crumbs #breadcrumbs{margin:0}

/* ---- 3. BODY ---- */
.kflp-body{background:#fff;padding:40px 0 8px}
@media (min-width:900px){.kflp-body{padding:56px 0 8px}}
.kflp-layout{display:grid;gap:32px;align-items:start}
@media (min-width:900px){
  .kflp-layout{grid-template-columns:minmax(0,1fr) 320px;gap:56px}
  /* A profile with no phone and no contact card must not reserve the sidebar
     track: that left a 376px empty column beside the whole biography and made
     two pages of the same type look like different templates. */
  .kflp-layout--full{grid-template-columns:minmax(0,1fr);gap:32px}
}

.kflp-section+.kflp-section{margin-top:40px}
.kflp-h2{
  margin:0 0 16px;
  font-size:clamp(21px,3.2vw,30px);
  line-height:1.2;font-weight:700;
  color:var(--kflp-navy);
}
.kflp-h2::after{
  content:"";display:block;width:48px;height:2px;
  background:var(--kflp-gold);margin-top:12px;
}
.kflp-prose{font-size:17px;line-height:1.7;color:var(--kflp-ink);max-width:70ch}
.kflp-prose > *:first-child{margin-top:0}
.kflp-prose p,.kflp-prose ul,.kflp-prose ol{margin:0 0 16px}
.kflp-prose h2,.kflp-prose h3,.kflp-prose h4{
  color:var(--kflp-navy);line-height:1.25;margin:28px 0 12px;font-weight:700;
}
.kflp-prose h2{font-size:22px}
.kflp-prose h3{font-size:19px}
.kflp-prose h4{font-size:17px}
.kflp-prose a{color:var(--kflp-gold-text);text-decoration:underline}
.kflp-prose img{height:auto;max-width:100%}
.kflp-prose blockquote{
  margin:24px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--kflp-gold);
  color:var(--kflp-muted);font-style:normal;
}

/* Editor floats. A 233px portrait floated into a 343px column left a 110px
   gutter and set the opening paragraph as eleven lines of five to eleven
   characters. Below 700px a floated image becomes a centred block instead. */
.kflp-prose .alignright,
.kflp-prose .alignleft,
.kflp-prose .aligncenter{max-width:100%}
@media (min-width:700px){
  .kflp-prose .alignright{float:right;margin:4px 0 16px 24px}
  .kflp-prose .alignleft{float:left;margin:4px 24px 16px 0}
}
@media (max-width:699.98px){
  .kflp-prose .alignright,
  .kflp-prose .alignleft,
  .kflp-prose .aligncenter{
    float:none !important;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:16px;
  }
}
/* Accreditation and membership logos the editor placed on their own line. */
.kflp-prose .kflp-badge{margin:0 0 16px;line-height:0}
.kflp-prose .kflp-badge img{display:inline-block}

/* ---- 4. DETAILS CARD ----------------------------------------------------
   A desktop affordance. It sticks, so while the reader is deep in a 2,000px
   biography it is the only contact route on screen - the hero buttons are long
   gone, so the two are never visible at the same moment. Below 900px every
   line in it already appears in the hero within the first screen, and the grid
   put it 5,470px down the page, so it is not rendered there. */
.kflp-aside{min-width:0}
@media (max-width:899.98px){.kflp-aside{display:none}}
@media (min-width:900px){.kflp-aside{position:sticky;top:24px}}
.kflp-card{
  background:var(--kflp-tint);
  border:1px solid var(--kflp-hairline);
  border-radius:var(--kflp-r-lg);
  padding:24px;
}
.kflp-card-title{
  margin:0 0 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--kflp-gold-deep);
}
.kflp-details{list-style:none;margin:0;padding:0}
.kflp-details li+li{margin-top:4px;border-top:1px solid var(--kflp-hairline);padding-top:4px}
.kflp-details a,.kflp-details span{
  display:flex;align-items:center;gap:12px;
  min-height:48px;padding:8px 0;
  font-size:16px;font-weight:600;color:var(--kflp-navy);text-decoration:none;
  transition:transform .16s ease,opacity .16s ease;
}
.kflp-details a:hover,.kflp-details a:focus{color:var(--kflp-navy);opacity:.75;transform:translateX(2px)}
.kflp-details svg{width:18px;height:18px;color:var(--kflp-gold-deep);flex:0 0 auto}
.kflp-card .kflp-btn{width:100%;margin-top:16px}
/* The gold fill measures 2.82:1 against this card's tint, under the 3:1 a
   control boundary needs. The button's own border would carry that edge, but
   another stylesheet on this site (css/kfl-mobile-qa.css) sets border-color on
   .kflp-btn-primary with !important, so the edge is drawn as a ring instead -
   same result, and no rule of theirs is fought over. 4.43:1 on this tint. */
.kflp-card .kflp-btn-primary{box-shadow:0 0 0 1px var(--kflp-gold-text)}

/* author block */
.kflp-author{
  margin-top:32px;padding:20px;
  background:var(--kflp-tint);
  border:1px solid var(--kflp-hairline);
  border-radius:var(--kflp-r-lg);
  display:flex;gap:16px;align-items:flex-start;
}
.kflp-author img{border-radius:var(--kflp-r-lg);flex:0 0 auto;height:auto}
.kflp-author h3{margin:0 0 8px;font-size:16px;color:var(--kflp-navy);font-weight:700}
.kflp-author p{margin:0;font-size:15px;line-height:1.6;color:var(--kflp-muted)}

/* ---- 5. ENQUIRY --------------------------------------------------------
   The form's fields are floated list items. Nothing between them and this
   section established a block formatting context, so the form computed to zero
   height and painted 310px on top of the band below it - and both of the
   page's calls to action point here. flow-root contains the floats; the grid
   below then replaces the float layout outright so nothing depends on it. */
.kflp-enquiry{background:var(--kflp-tint);margin-top:48px;padding:40px 0}
.kflp-enquiry-inner{max-width:760px;display:flow-root;position:relative}
.kflp-enquiry .gform_wrapper,
.kflp-enquiry .gform_body,
.kflp-enquiry form{display:flow-root}

/* The form writes its own "Send Us Your Enquiry" heading immediately under the
   template's personalised one. The template's is the one worth keeping; the
   sentence beneath it is useful and stays. */
.kflp-enquiry .form-intro h2{display:none}
.kflp-enquiry .form-intro{margin:0 0 8px}
.kflp-enquiry .form-intro p{margin:0;font-size:16px;line-height:1.6;color:var(--kflp-muted)}

.kflp-enquiry .gform_fields{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px 20px;
  list-style:none;margin:0;padding:0;
}
.kflp-enquiry .gform_fields > li{
  grid-column:1 / -1;
  float:none;width:auto;max-width:none;min-width:0;
  margin:0;padding:0;
}
@media (min-width:700px){
  .kflp-enquiry .gform_fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kflp-enquiry .gform_fields > li.col-sm-4{grid-column:auto}
}
/* Honeypot: stays in the document and keeps working, takes no grid cell. */
.kflp-enquiry .gform_validation_container{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.kflp-enquiry .gfield_label{
  display:block;margin:0 0 6px;
  font-size:14px;font-weight:600;color:var(--kflp-navy);
}
.kflp-enquiry .gfield_required{color:var(--kflp-gold-deep)}
.kflp-enquiry input[type=text],
.kflp-enquiry input[type=email],
.kflp-enquiry input[type=tel],
.kflp-enquiry textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid var(--kflp-rule);
  border-radius:var(--kflp-r);
  background:#fff;
  color:var(--kflp-ink);
  font-size:16px;
  line-height:1.4;
}
.kflp-enquiry textarea{min-height:132px;resize:vertical}
.kflp-enquiry .gform_footer{margin:20px 0 0;padding:0;display:flow-root}
/* One action colour, one label colour: the same navy on gold as every other
   action this template owns. The theme's own submit label was #111111. */
.kflp-enquiry .gform_footer input[type=submit]{
  min-height:48px;
  padding:12px 28px;
  background:var(--kflp-gold);
  color:var(--kflp-navy);
  border:1px solid var(--kflp-gold-text);
  border-radius:var(--kflp-r);
  font-size:16px;font-weight:600;line-height:1.2;
  cursor:pointer;
  transition:transform .16s ease,opacity .16s ease;
}
@media (max-width:599.98px){
  .kflp-enquiry .gform_footer input[type=submit]{width:100%}
}
.kflp-enquiry .gform_footer input[type=submit]:hover{transform:translateY(-2px)}
.kflp-enquiry .gform_footer input[type=submit]:active{transform:translateY(0)}
.kflp-enquiry .validation_message,
.kflp-enquiry .gform_validation_errors{color:#8A1C1C}

/* ---- 6. THE SITE'S OWN CALL TO ACTION, ON THIS PAGE TYPE ONLY ------------
   Superseded by the round-3 block at the foot of this file, which had to take
   the argument further: matching the site-wide button to this template's gold
   made the two identical instead of merely different. Kept as a marker so the
   history of this one selector is readable in one place. */

/* ---- reduced motion: a genuinely reduced path ---- */
@media (prefers-reduced-motion:reduce){
  .kflp *,.kflp *::before,.kflp *::after{
    transition:none !important;
    animation:none !important;
  }
  .kflp-btn:hover,.kflp-btn:focus,
  .kflp-rail a:hover,.kflp-rail a:focus,
  .kflp-details a:hover,.kflp-details a:focus,
  .kflp-enquiry .gform_footer input[type=submit]:hover{transform:none}
}

/* =========================================================================
   ROUND 3
   Appended, not woven in: every rule here is the last word this file has on
   the property it sets, so removing this block restores the round-2 page
   exactly. Numbers quoted are measured on staging, not estimated.
   ========================================================================= */

/* ---- Clearance for the fixed site header (R2-03) ------------------------
   nav.navbar-fixed-top is position:fixed, z-index 1030 and opaque
   (rgb(239,239,240)); the document begins underneath it and body carries no
   top padding. This template put a photograph of a face at document y=0, so
   the header sat across the top of it - 102px of 429px hidden at 375px, and
   134px of 360px at 320px, where the header's icons wrap to a second row and
   it grows to 158px. On a page about a person, the header was cropping the
   head. Measured header height: 121px at 375px, 158px at 320px; the values
   below clear both with a small margin. The band is reserved here because
   this template is the only surface on the site that opens with a face. */
.kflp{--kflp-navclear:0px}
@media (max-width:899.98px){ .kflp{--kflp-navclear:140px} }
@media (max-width:359.98px){ .kflp{--kflp-navclear:164px} }
@media (max-width:899.98px){
  .kflp-hero{padding-top:calc(var(--kflp-navclear) + 4px);padding-bottom:24px}
}
/* Both calls to action jump to #enquiry. Without this the same fixed header
   lands on the heading they jump to. */
.kflp-enquiry,
.kflp-enquiry .wpsal-anchor{scroll-margin-top:calc(var(--kflp-navclear) + 16px)}

/* ---- Mobile hero: identity and action above the fixed furniture (R2-02) --
   A 375x812 phone showing this page on a first visit has an opaque 121px
   header pinned to the top and a 218px consent panel pinned to the bottom:
   529px of clear screen. A 4:5 portrait 429px tall took 81% of that on its
   own, and the name, the role and the only call to action all landed under
   the consent panel - a first-time reader could not see who this was or how
   to reach them until they dismissed it. The portrait becomes a 16:10 crop at
   phone widths, keeping the same editorial focus point, and the vertical
   rhythm tightens, which lifts the name, the role and the primary action into
   the clear band. The action also moves above the credentials, because on a
   screen this size the next step earns the higher position and the
   credentials read perfectly well below it - they are list items, not
   focusable controls, so nothing about keyboard order changes.
   aspect-ratio rather than a vh height on purpose: a height in vh changes
   when a mobile browser's toolbars collapse, and that is layout shift. */
@media (max-width:599.98px){
  .kflp-portrait img{aspect-ratio:16/10;max-height:none}
  .kflp-hero-grid{gap:12px}
  .kflp-id{display:flex;flex-direction:column;padding-bottom:0}
  .kflp-eyebrow{order:1}
  .kflp-name{order:2;margin-top:6px}
  .kflp-role{order:3;margin-top:6px}
  .kflp-actions{order:4;margin-top:14px}
  .kflp-rule{order:5;margin-top:20px}
  .kflp-creds{order:6;margin-top:12px}
  .kflp-rail{order:7;margin-top:20px}
}

/* ---- Desktop: the portrait is placed, not clipped (R2-10) ---------------
   Top gutter 48px, bottom gutter 0 - the photograph finished exactly on the
   section's bottom edge, so it read as cut off by the boundary rather than
   set inside it, and the offset gold frame, which overhangs the image by
   16px, was cut off with it. The band now closes with the 48px it opens
   with. */
@media (min-width:900px){
  .kflp-hero{padding-bottom:48px}
}

/* ---- A type scale that is actually fluid (R2-09) ------------------------
   The parent stylesheet carries `section .h1, section h1 { font-size:32px
   !important }`. The hero is a <section>, so the name was pinned at 32px from
   320px to 1440px and the clamp() above never applied: 32px adrift in a 623px
   hero beside a 460px photograph at 1440, and two lines at 320. Matching that
   declaration's weight is the only way to give the page a scale, so the
   selector below is deliberately more specific than it and says why. */
.kflp-hero .kflp-name{font-size:clamp(30px,7.2vw,48px) !important;line-height:1.06}
/* The theme also gives every <h1> inside a <section> 20px of bottom padding.
   Measured on the built page: the name box was 51.8px tall for a 31.8px line.
   In a hero with its own rhythm that is a phantom gap under the name, and on a
   phone it pushed the primary action 20px further down the screen - straight
   into the consent panel. */
.kflp-hero .kflp-name{padding-bottom:0}
.kflp-role{font-size:clamp(17px,2.4vw,22px)}

/* ---- 12px text (R2-15) --------------------------------------------------
   The hero eyebrow and the breadcrumb were both 12px. Both move to the 16px
   floor. The breadcrumb also drops the uppercase transform: at 16px, capitals
   with letter-spacing would have shouted over the H1 beneath them, and this
   is navigation, not a headline. */
.kflp-eyebrow{font-size:16px;letter-spacing:.12em}
.kflp-crumbs{font-size:16px;text-transform:none;letter-spacing:0}

/* ---- Focus indicator inside the hero (R2-08) ----------------------------
   The shared indicator is a navy ring with a gold halo - correct on white and
   on the card tint, wrong on the hero, where the navy ring is drawn on the
   same navy and measures 1:1. Half the indicator was a dead layer, which made
   it read as a thin gold line with a gap in it rather than a solid ring.
   Inside the hero the inner ring is white (15.46:1 on this navy) and the gold
   halo widens to 8px so it stays visible outside it (8.38:1 on this navy).
   Two live rings, and the control's own edge is never the thing being
   relied on. */
.kflp-hero a:focus-visible,
.kflp-hero button:focus-visible,
.kflp-hero [tabindex]:focus-visible,
.kflp-hero .kflp-btn:focus-visible,
.kflp-hero .kflp-rail a:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 8px var(--kflp-gold-bright);
}

/* ---- One primary action per screen (R2-06) ------------------------------
   css/kfl-mobile-qa.css sets
     .sticky-footer-cta-button, .kflp-btn-primary { background / border /
     color / border-radius ... !important }
   so this template's "Contact <name>" button and the site-wide "Book Free
   Consultation" bar became the same fill, the same text colour, the same
   radius and the same height - and at 375px both are on screen together, one
   at 614-662 and one at 747-812, pointing at different destinations with
   nothing to say which is the page's next step. Making them match was the
   right answer to two clashing golds and the wrong answer to this.
   On this page type only, the page's own action keeps the solid gold and the
   site-wide bar takes the outlined treatment the hero already uses for its
   secondary action, so the two read as primary and secondary rather than as
   twins. The bar's own panel is navy (#17243E): white label on it measures
   15.46:1 and the gold edge 5.01:1, both past what text and a control
   boundary need. Hover fills it, so it never looks inert.
   !important is used here only because the declaration it answers uses it,
   and the whole change is one deletable block. */
body.single-our-people .sticky-footer .sticky-footer-cta-button{
  background:transparent !important;
  border:2px solid #B28E2E !important;
  color:#ffffff !important;
  border-radius:4px !important;
}
body.single-our-people .sticky-footer .sticky-footer-cta-button:hover,
body.single-our-people .sticky-footer .sticky-footer-cta-button:focus{
  background:#B28E2E !important;
  border-color:#B28E2E !important;
  color:#17243E !important;
}

/* ---- Form placeholder contrast (R2-07) ----------------------------------
   #999999 on white measures 2.85:1, under the 4.5:1 that 16px text needs.
   The visible labels do render, so the placeholder was never the only label,
   but it is still text a reader has to read. #525C70 - the muted token this
   file already uses - measures 6.73:1 on white. */
.kflp-enquiry input::placeholder,
.kflp-enquiry textarea::placeholder,
.kflp-enquiry .gform_wrapper input::placeholder,
.kflp-enquiry .gform_wrapper textarea::placeholder{
  color:#525C70;
  opacity:1;
}

/* ---- Lists in the biography (R2-12) -------------------------------------
   The copy arrived with "list-disc space-y-2.5 pl-7" on its lists, from a
   chat export. No Tailwind is loaded here, so those classes drew nothing and
   the lists rendered with no bullets and no indent. The template strips the
   dead classes out of the rendered output; the styling they were standing in
   for is set properly here. */
.kflp-prose ul{list-style:disc;padding-left:22px}
.kflp-prose ol{list-style:decimal;padding-left:22px}
.kflp-prose li{margin:0 0 6px}
.kflp-prose li:last-child{margin-bottom:0}

/* ---- Quotation (R2-13) --------------------------------------------------
   A paragraph wholly wrapped in quotation marks is somebody else's words; the
   template now renders it as a blockquote, which this file already styles. */
.kflp-prose blockquote p{margin:0}
.kflp-prose blockquote p + p{margin-top:12px}

/* ---- 320px, and the limit of what this template can fix ----------------
   Placed last on purpose: it narrows the 599.98px block above, and equal
   specificity means source order decides.
   320px is the hardest case on the site and the only one this template cannot
   fully win. Measured there: the header grows to 158px because its icons wrap
   to a second row, and the consent panel grows to 242px because its sentence
   wraps five times - 335px of clear screen for a photograph, a name, a role
   and an action. The portrait takes a 2:1 crop and the action tightens, which
   is what lifts the button from 1px visible to 41px of its 48px visible; the
   name, the role and the whole photograph are clear. Closing the last 7px
   would mean shrinking the photograph to a strip, and the panel's height is
   the consent plugin's to set, not this template's. */
@media (max-width:359.98px){
  .kflp-portrait img{aspect-ratio:2/1}
  .kflp-actions{margin-top:12px}
  .kflp-hero-grid{gap:12px}
}

/* ---- Accreditation badges stay badge-sized (found while proving R2-01) ---
   css/kfl-mobile-qa.css D02 sets width:auto on floated images in body copy
   below 768px, so the browser falls back to the file's intrinsic width rather
   than the width the editor set. For a portrait that is the intended effect.
   For the CILEx logo under "Accreditations Held" it meant 75px authored and
   343x343 rendered - 4.6x - which is the sort of thing that reads as "the
   design has some issues" without anyone being able to name it. The template
   marks any image the editor sized at 200px or under; here it is held to a
   badge size. Desktop is untouched, where the authored width already wins. */
@media (max-width:767px){
  .kflp .kflp-prose img.kflp-smallimg{width:auto;max-width:120px;height:auto}
}