/* =========================================================
   Phone & small-tablet fixes. Loaded after style.css.
   Every rule sits inside a max-width query, so desktop is untouched.
   ========================================================= */

/* ---------- Inline layouts that ignored the phone breakpoints ----------
   The homepage hard-codes two side-by-side columns (Insights | Our People)
   and a three-column people strip in style="" attributes, which beat the
   stylesheet's own breakpoints. */
@media (max-width:900px){
  .split[style]{grid-template-columns:1fr !important;gap:52px}
}
@media (max-width:640px){
  /* Homepage "Our People": a tidy list — small portrait, name and role beside it */
  .people[style]{grid-template-columns:1fr !important;gap:0}
  .people[style] .person{
    display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto auto;
    column-gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-grey);
  }
  .people[style] .person:first-child{border-top:1px solid var(--line-grey)}
  .people[style] .person__ph{grid-row:1 / span 3;width:72px;aspect-ratio:4/5}
  .people[style] .person__name{margin-top:0;align-self:end;font-size:.8rem;line-height:1.35}
  .people[style] .person__role{margin-top:2px}
  .people[style] .person .alink{margin-top:4px;align-self:start}

  /* People page: two portraits per row instead of one huge one */
  .people:not([style]){grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .people:not([style]) .person__name{font-size:.74rem;letter-spacing:.07em;line-height:1.35}
  .people:not([style]) .person__role{font-size:.8rem;line-height:1.4}
}

/* ---------- Header: compact on phones, readable tagline ---------- */
@media (max-width:760px){
  :root{--header-h:72px}
  .header__inner,.header.is-stuck .header__inner{min-height:72px}
  .wordmark{padding-block:8px;gap:4px}
  .wordmark__row{gap:11px}
  .wordmark__crest,.header.is-stuck .wordmark__crest{width:40px;height:40px}
  .wordmark__name{font-size:.78rem;letter-spacing:.08em}
  .wordmark__tag{font-size:.625rem;letter-spacing:.13em}
  .footer .wordmark__crest{width:52px;height:52px}
}

/* ---------- Content alignment ---------- */
@media (max-width:560px){
  /* "Why SLF" items were indented 16px from every other block */
  .values{gap:26px}
  .value{padding-inline:0}
  /* Linklist rows start on the same edge as the heading above them */
  .linklist a{padding-inline:0}
  .linklist a:hover{padding-left:0}
}

/* ---------- Buttons: full width and the same size when stacked ---------- */
@media (max-width:560px){
  .btn-row{flex-direction:column;align-items:stretch;gap:12px}
  .btn-row>.btn{width:100%;white-space:normal;line-height:1.35}
  .btn-row>.alink{align-self:flex-start}
  .hero__actions{flex-direction:column;align-items:flex-start;gap:20px}
  .hero__actions>.btn{width:100%;white-space:normal}
  .footer .btn{width:100%}
}

/* ---------- Comfortable tap targets (layout unchanged) ---------- */
@media (max-width:768px){
  .alink{padding-block:10px;margin-block:-10px}
  .crumbs{font-size:.78rem;row-gap:.15em}
  .crumbs a{display:inline-block;padding-block:6px}
  .footer li{margin-bottom:0}
  .footer li a{display:inline-block;padding-block:8px}
  .consent input{width:20px;height:20px;margin-top:1px}
}

/* ---------- Footer bottom bar: even, predictable wrapping ---------- */
@media (max-width:600px){
  .footer__bar .container{flex-direction:column;align-items:flex-start;gap:12px;padding-block:20px}
  .footer__bar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;width:100%}
  .footer__bar nav a{padding-block:8px}
}

/* ---------- Forms: 16px text stops iPhones zooming in on focus ---------- */
@media (max-width:768px){
  .field input,.field select,.field textarea,.searchbar input{font-size:16px}
}

/* ---------- Decorative circles behind the consultation band ---------- */
@media (max-width:640px){
  .cta::after{width:300px;height:300px;right:-30%}
  .cta::before{width:200px;height:200px;right:-12%}
}

/* ---------- Very small phones (320px) ---------- */
@media (max-width:360px){
  .display{font-size:2.3rem}
  .wordmark__name{font-size:.72rem}
  .wordmark__tag{letter-spacing:.1em}
}