/* MaliHaus Capital, shared components added in the 2026-09-03 build.

   Everything here is namespaced mh- so it can be loaded alongside the
   home page's own inline stylesheet and alongside site.css without
   touching a single existing rule. Tokens are the existing brand tokens
   and are not redefined here. */

/* ------------------------------------------------------------------ *
 * Situation cards, used on the home page and on the situations hub
 * ------------------------------------------------------------------ */

.mh-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:22px;margin-top:50px}
.mh-card{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);transition:border-color .2s,transform .2s,background .2s}
.mh-card:hover{border-color:var(--copper);background:var(--panel2);transform:translateY(-3px)}
.mh-card:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.mh-card-fig{position:relative;padding:26px 22px 0;flex-shrink:0}
.mh-card-ic{width:46px;height:46px;border:1px solid var(--line2);display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(198,140,78,.15),rgba(198,140,78,.03));
  transition:border-color .2s}
.mh-card:hover .mh-card-ic{border-color:var(--copper)}
.mh-card-ic svg{width:23px;height:23px;stroke:var(--copper-lt);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mh-card-b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.mh-card-b h3{font-family:"Fraunces",Georgia,serif;font-size:1.22rem;font-weight:500;
  margin:0 0 10px;line-height:1.2;letter-spacing:-.01em}
.mh-card-b p{color:var(--dim);font-size:15px;line-height:1.55;margin:0 0 16px;flex:1}
.mh-card-go{color:var(--copper-lt);font-size:14.5px;font-weight:600}

/* ------------------------------------------------------------------ *
 * 3 Ways to Sell. Michael's three pillars, always all three.
 * ------------------------------------------------------------------ */

.mh-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;
  align-items:stretch}
@media(max-width:1000px){.mh-pillars{grid-template-columns:1fr}}
.mh-pillar{display:flex;flex-direction:column;padding:32px 30px;background:var(--panel);
  border:1px solid var(--line2)}
.mh-pillar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mh-pillar-n{font-family:"Fraunces",Georgia,serif;font-size:2.4rem;color:var(--copper);
  line-height:.9;font-variation-settings:"SOFT" 60,"WONK" 1}
.mh-pillar-ic{width:44px;height:44px;border:1px solid var(--line2);display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(198,140,78,.15),rgba(198,140,78,.03))}
.mh-pillar-ic svg{width:22px;height:22px;stroke:var(--copper-lt);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mh-pillar h3{font-family:"Fraunces",Georgia,serif;font-size:1.34rem;font-weight:500;
  margin:0 0 14px;line-height:1.18;letter-spacing:-.01em}
.mh-pillar p{color:var(--dim);margin:0 0 20px;font-size:16px;flex:1;line-height:1.6}
.mh-pillar .mh-when{color:var(--copper-lt);font-size:14.5px;padding-top:18px;
  border-top:1px solid var(--line);line-height:1.5}

/* ------------------------------------------------------------------ *
 * Location cards
 * ------------------------------------------------------------------ */

.mh-loccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:24px;margin-top:50px}
.mh-loccard{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);transition:border-color .2s,transform .2s}
.mh-loccard:hover{border-color:var(--copper);transform:translateY(-3px)}
.mh-loccard-fig{aspect-ratio:16/9;overflow:hidden;background:#0C0A08;flex-shrink:0;position:relative}
.mh-loccard-fig img{width:100%;height:100%;object-fit:cover;object-position:center 52%;
  transition:transform .5s ease}
.mh-loccard:hover .mh-loccard-fig img{transform:scale(1.04)}
.mh-loccard-fig:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,6,.06),rgba(8,8,6,.55))}
.mh-loccard-b{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.mh-loccard-b h3{font-family:"Fraunces",Georgia,serif;font-size:1.44rem;font-weight:500;
  margin:0 0 12px;line-height:1.16;letter-spacing:-.01em}
.mh-loccard-b p{color:var(--dim);font-size:15.5px;line-height:1.58;margin:0 0 22px;flex:1}
.mh-loccard-b .btn{align-self:flex-start}

/* Location hero */
.mh-lochero{position:relative;overflow:hidden;background:#0B0906;padding:70px 0 0}
.mh-lochero-bg{position:absolute;inset:0;z-index:0}
.mh-lochero-bg img{width:100%;height:100%;object-fit:cover;object-position:58% 52%}
.mh-lochero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(92deg,rgba(8,8,6,.97) 6%,rgba(8,8,6,.86) 44%,rgba(8,8,6,.42) 100%),
  linear-gradient(180deg,rgba(8,8,6,.88) 0%,rgba(8,8,6,.42) 34%,rgba(8,8,6,.9) 88%,var(--black) 100%)}
.mh-lochero-in{position:relative;z-index:2;padding-bottom:64px}
.mh-lochero h1{font-family:"Fraunces",Georgia,serif;font-weight:500;
  font-size:clamp(2.2rem,4.8vw,3.6rem);margin:0;max-width:18ch;line-height:1.08;
  letter-spacing:-.015em;font-variation-settings:"SOFT" 40,"WONK" 1}
.mh-lochero h1 i{font-style:italic;color:var(--copper-lt)}
.mh-lochero .standfirst{font-size:1.14rem;color:#CFC6B9;max-width:60ch;margin:26px 0 0}
@media(max-width:820px){.mh-lochero{padding-top:44px}.mh-lochero-in{padding-bottom:44px}}

/* Market link columns on situation pages */
.mh-marketcols{display:grid;grid-template-columns:1fr 1fr;gap:32px 56px;margin-top:44px}
@media(max-width:700px){.mh-marketcols{grid-template-columns:1fr;gap:28px}}
.mh-marketc h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);
  font-family:"Karla",Helvetica,Arial,sans-serif;font-weight:600;margin:0 0 6px}
.mh-marketc a{display:block;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:16px;color:#CFC6B9}
.mh-marketc a:hover{color:var(--copper-lt);padding-left:8px;transition:.18s}

/* Legal and disclaimer notes */
.mh-legal{margin-top:38px;padding:24px 26px;background:#0B0A08;border:1px solid var(--line2);
  border-left:2px solid var(--copper);max-width:74ch}
.mh-legal p{margin:0;color:#B4AA9C;font-size:15.5px;line-height:1.62}
.mh-legal b{color:var(--cream);font-weight:600}

/* Nationally applicable strap, replacing the old tri county figcaption */
.mh-strap{display:grid;grid-template-columns:440px 1fr;gap:44px;align-items:center;
  padding-top:56px;border-top:1px solid var(--line)}
@media(max-width:900px){.mh-strap{grid-template-columns:1fr;gap:28px}}
.mh-strap img{width:100%;height:300px;object-fit:cover;object-position:center 46%}
@media(max-width:900px){.mh-strap img{height:220px}}
.mh-strap figcaption b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:500;
  font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2;letter-spacing:-.015em;
  color:var(--cream);margin-bottom:18px}
.mh-strap figcaption span{color:var(--dim);font-size:16.5px;line-height:1.62}

/* ------------------------------------------------------------------ *
 * The three step process
 * ------------------------------------------------------------------ */

.mh-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px;
  counter-reset:mhstep}
@media(max-width:820px){.mh-steps{grid-template-columns:1fr;gap:0}}
.mh-step{padding-top:26px;border-top:2px solid var(--line2)}
@media(max-width:820px){.mh-step{border-top:1px solid var(--line);padding:26px 0}}
.mh-step .mh-sn{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper);margin-bottom:14px}
.mh-step h3{font-family:"Fraunces",Georgia,serif;font-size:1.3rem;font-weight:500;
  margin:0 0 12px;line-height:1.2}
.mh-step p{color:var(--dim);margin:0;font-size:16px}

/* ------------------------------------------------------------------ *
 * Review proof
 * ------------------------------------------------------------------ */

/* Both review records side by side. The Google mark keeps its own brand
   colours, so it is exempt from the gold scope's stroke override. */
.mh-proofs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:46px}
@media(max-width:860px){.mh-proofs{grid-template-columns:1fr}}
.mh-proofs .mh-proof{margin-top:0}
.mh-proof svg[aria-label="Google"] path{stroke:none}
.mh-proof{display:flex;align-items:center;gap:20px;padding:24px 26px;margin-top:46px;
  background:var(--panel);border:1px solid var(--line2);transition:.2s}
a.mh-proof:hover{border-color:var(--copper);background:var(--panel2)}
.mh-proof svg{width:30px;height:30px;flex-shrink:0}
.mh-proof-t{flex:1;min-width:0}
.mh-proof-r{font-family:"Fraunces",Georgia,serif;font-size:1.4rem;line-height:1.15;
  color:var(--cream);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mh-proof-r .mh-st{color:var(--copper);letter-spacing:2px;font-size:13px}
.mh-proof-n{color:var(--dim);font-size:14.5px;margin-top:6px;line-height:1.45}
.mh-proof-a{color:var(--copper-lt);font-size:14px;white-space:nowrap;align-self:center}
@media(max-width:560px){.mh-proof-a{display:none}.mh-proof{padding:20px}}

/* ------------------------------------------------------------------ *
 * The property enquiry form
 * ------------------------------------------------------------------ */

.mh-formwrap{margin-top:50px;background:var(--panel);border:1px solid var(--line2);
  padding:44px 42px}
@media(max-width:640px){.mh-formwrap{padding:30px 22px}}
.mh-form-h{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.6rem,3vw,2.1rem);
  font-weight:500;margin:0 0 14px;line-height:1.14;letter-spacing:-.015em}
.mh-form-intro{color:var(--dim);margin:0 0 34px;max-width:56ch;font-size:16.5px}

.mh-form fieldset{border:0;padding:0;margin:0 0 12px;border-top:1px solid var(--line)}
.mh-form legend{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper);padding:22px 0 4px}
.mh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* Tablets get two columns: four across at 768px leaves the fields too narrow. */
@media(max-width:900px){.mh-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.mh-grid{grid-template-columns:1fr}}
.mh-f{display:flex;flex-direction:column;min-width:0}
.mh-full{grid-column:span 4}
.mh-half{grid-column:span 2}
.mh-quarter{grid-column:span 1}
@media(max-width:900px){
  .mh-full{grid-column:span 2}.mh-half{grid-column:span 2}.mh-quarter{grid-column:span 1}
}
@media(max-width:480px){.mh-full,.mh-half,.mh-quarter{grid-column:span 1}}

.mh-f label{font-size:14.5px;color:#CFC6B9;margin-bottom:8px;font-weight:500}
.mh-req{color:var(--copper)}
.mh-f input,.mh-f select,.mh-f textarea{
  width:100%;background:#0B0A08;border:1px solid var(--line2);color:var(--cream);
  font-family:"Karla",Helvetica,Arial,sans-serif;font-size:16px;padding:13px 14px;
  border-radius:1px;transition:border-color .18s;min-width:0}
.mh-f textarea{resize:vertical;line-height:1.55}
.mh-f input::placeholder,.mh-f textarea::placeholder{color:#6F675C}
.mh-f input:hover,.mh-f select:hover,.mh-f textarea:hover{border-color:#57493A}
.mh-f input:focus,.mh-f select:focus,.mh-f textarea:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(198,140,78,.16)}
.mh-f input[aria-invalid="true"],.mh-f select[aria-invalid="true"]{border-color:#E5484D}
.mh-f select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23C68C4E' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px}
.mh-err{color:#F08B8E;font-size:13.5px;margin-top:7px;display:block;min-height:0}
.mh-err:empty{display:none}

/* Consent. Clearly visible, readable, and never preselected. */
.mh-consent{margin-top:30px;padding:24px 24px 22px;background:#0B0A08;
  border:1px solid var(--line2);border-left:2px solid var(--copper)}
.mh-check{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start}
/* The box is drawn at 22px but the hit area is padded out to a comfortable
   tap target on touch screens, without shifting the layout. */
.mh-check input[type="checkbox"]{
  width:22px;height:22px;margin:1px 0 0;accent-color:var(--copper);cursor:pointer;flex-shrink:0;
  position:relative}
.mh-check input[type="checkbox"]:before{content:"";position:absolute;
  top:-12px;left:-12px;right:-12px;bottom:-12px}
@media(hover:hover){.mh-check input[type="checkbox"]:before{display:none}}
.mh-check label{font-size:16px;color:var(--cream);line-height:1.5;cursor:pointer;margin:0}
.mh-check a{color:var(--copper-lt);border-bottom:1px solid rgba(232,188,134,.4)}
.mh-check a:hover{border-bottom-color:var(--copper-lt)}
.mh-disclosure{margin:16px 0 0;padding-left:36px;font-size:14.5px;line-height:1.62;
  color:#B4AA9C}
@media(max-width:640px){.mh-disclosure{padding-left:0;margin-top:14px}}

.mh-submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.mh-submit button{border:0;cursor:pointer;font-size:16px;padding:17px 34px}
.mh-or{color:var(--dim);font-size:15px}
.mh-or a{color:var(--copper-lt);border-bottom:1px solid rgba(232,188,134,.4)}
.mh-formstatus{margin:18px 0 0;font-size:15px;color:var(--dim)}
.mh-formstatus:empty{display:none}
.mh-formstatus.bad{color:#F08B8E}

/* ------------------------------------------------------------------ *
 * Shared closing section
 * ------------------------------------------------------------------ */

.mh-notsure{margin-top:60px;padding:44px 42px;
  background:linear-gradient(96deg,rgba(198,140,78,.11),rgba(198,140,78,.02));
  border:1px solid var(--line2)}
@media(max-width:640px){.mh-notsure{padding:30px 22px}}
.mh-notsure h2{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.5rem,2.8vw,2rem);
  font-weight:500;margin:0 0 16px;line-height:1.16;letter-spacing:-.015em}
.mh-notsure p{color:var(--dim);margin:0 0 28px;max-width:62ch;font-size:16.5px}
.mh-notsure .mh-b{display:flex;gap:12px;flex-wrap:wrap}

/* ------------------------------------------------------------------ *
 * Footer, with every market organised into columns
 * ------------------------------------------------------------------ */

.mh-foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;
  padding:56px 0 44px}
@media(max-width:1000px){.mh-foot-cols{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:600px){.mh-foot-cols{grid-template-columns:1fr;gap:32px;padding:40px 0 32px}}
.mh-foot-c h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);
  font-family:"Karla",Helvetica,Arial,sans-serif;font-weight:600;margin:0 0 16px}
.mh-foot-c a{display:block;padding:6px 0;font-size:14.5px;color:#A29889}
.mh-foot-c a:hover{color:var(--copper-lt)}
.mh-foot-wide p{color:var(--dim);margin:0 0 12px;font-size:15px;max-width:34ch;line-height:1.55}
.mh-foot-cov{color:var(--dimmer)!important;font-size:14px!important}
.mh-foot-logo{height:42px;margin-bottom:20px}
.mh-foot-tel{display:inline-block;margin-top:8px;font-family:"Fraunces",Georgia,serif;
  font-size:1.4rem;color:var(--copper-lt)}
.mh-foot-tel:hover{color:var(--cream)}
.mh-foot-base{display:flex;justify-content:space-between;gap:16px 34px;flex-wrap:wrap;
  padding:24px 0 8px;border-top:1px solid var(--line);font-size:13.5px;color:var(--dimmer)}
.mh-foot-base a{color:var(--copper-lt)}
/* The column footer supplies its own vertical rhythm. */
footer{padding:0!important}

/* ------------------------------------------------------------------ *
 * Chat safe area. Nothing may sit under the widget corner.
 * ------------------------------------------------------------------ */

.mh-chat-safe{height:96px}
@media(max-width:820px){.mh-chat-safe{height:120px}}

/* ------------------------------------------------------------------ *
 * Mobile navigation
 * ------------------------------------------------------------------ */

.mh-burger{display:none;background:none;border:1px solid var(--line2);cursor:pointer;
  padding:11px 12px;border-radius:1px;line-height:0}
.mh-burger svg{width:20px;height:20px;stroke:var(--copper-lt);stroke-width:1.8;fill:none}
.mh-burger:hover{border-color:var(--copper)}
@media(max-width:1000px){.mh-burger{display:inline-block}}

/* Visibility flips instantly on open so the panel is focusable straight away,
   and is delayed on close until the fade has finished. Transitioning
   visibility itself would leave the drawer unfocusable for 250ms, which
   breaks keyboard access. */
.mh-drawer{position:fixed;inset:0;z-index:100;visibility:hidden;opacity:0;
  transition:opacity .25s ease,visibility 0s linear .25s}
.mh-drawer.on{visibility:visible;opacity:1;
  transition:opacity .25s ease,visibility 0s linear 0s}
.mh-drawer-bg{position:absolute;inset:0;background:rgba(4,4,3,.82);backdrop-filter:blur(3px)}
.mh-drawer-p{position:absolute;top:0;right:0;bottom:0;width:min(360px,86vw);
  background:#0B0A08;border-left:1px solid var(--line2);padding:22px 26px;
  overflow-y:auto;transform:translateX(14px);transition:transform .25s}
.mh-drawer.on .mh-drawer-p{transform:none}
.mh-drawer-top{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.mh-drawer-top img{height:36px}
.mh-drawer-x{background:none;border:0;color:var(--dim);font-size:26px;cursor:pointer;
  line-height:1;padding:4px 8px}
.mh-drawer-x:hover{color:var(--cream)}
.mh-drawer-p a.mh-dl{display:block;padding:17px 0;border-bottom:1px solid var(--line);
  font-family:"Fraunces",Georgia,serif;font-size:1.16rem;color:var(--cream)}
.mh-drawer-p a.mh-dl:hover{color:var(--copper-lt)}
.mh-drawer-tel{display:block;margin-top:26px;text-align:center;
  font-family:"Fraunces",Georgia,serif;font-size:1.5rem;color:var(--copper-lt);
  padding:16px;border:1px solid var(--line2)}
.mh-drawer-cta{display:block;margin-top:12px;text-align:center}

/* ------------------------------------------------------------------ *
 * Confirmation page
 * ------------------------------------------------------------------ */

.mh-ty{max-width:660px;margin:0 auto;padding:110px 0 90px;text-align:center}
.mh-ty .mh-tick{width:62px;height:62px;margin:0 auto 30px;border-radius:50%;
  border:1px solid var(--copper);display:grid;place-items:center}
.mh-ty .mh-tick svg{width:28px;height:28px;stroke:var(--copper);stroke-width:1.8;fill:none}
.mh-ty h1{font-family:"Fraunces",Georgia,serif;font-size:clamp(2rem,4.4vw,3rem);
  font-weight:500;margin:0 0 20px;line-height:1.14;letter-spacing:-.015em}
.mh-ty p{color:var(--dim);margin:0 0 20px;font-size:1.05rem}
.mh-ty .mh-tyb{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.mh-ty-tel{display:inline-block;margin-top:10px;font-family:"Fraunces",Georgia,serif;
  font-size:2rem;color:var(--copper-lt);padding:14px 30px;border:1px solid var(--line2)}
.mh-ty-tel:hover{border-color:var(--copper);color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  .mh-card,.mh-card-fig img,.mh-drawer,.mh-drawer-p{transition-duration:.001s!important}
}

/* ================================================================== *
 * GOLD CONTRAST TREATMENT (2026-09-03, Michael's request)
 *
 * The brand gold is used as an ALTERNATING contrast ground against the
 * black, never as a wash over the whole page. Dark sections are kept
 * between the gold ones so the page keeps its rhythm.
 *
 * .mh-gold is a scope, not a skin. Putting it on a section, a card or a
 * panel re-points the existing design tokens at their gold-ground
 * equivalents, so every component inside recolours itself without any
 * component needing to know about gold.
 *
 * Contrast, measured against the gold ground #C68C4E (rel. luminance
 * 0.313), all above the WCAG AA 4.5:1 threshold for body text:
 *   headings  #16110A  ~6.9:1
 *   body      #33271A  ~5.0:1
 *   dark btn  #14100A  ~7.2:1, with #E8BC86 text on it at ~10.7:1
 * ================================================================== */

:root{
  --gold:#C68C4E;          /* the established brand gold */
  --gold-lift:#D3A068;     /* cards sitting on a gold ground */
  --gold-deep:#A9752F;     /* edges and dividers on gold */
  --gold-ink:#16110A;      /* headings on gold */
  --gold-body:#33271A;     /* body copy on gold */
  --gold-btn:#14100A;      /* dark button on gold */
}

.mh-gold{
  /* Re-point the shared tokens for everything inside this scope. */
  --panel:var(--gold-lift);
  --panel2:#DCAA74;
  --line:rgba(22,17,10,.20);
  --line2:rgba(22,17,10,.34);
  --cream:var(--gold-ink);
  --dim:var(--gold-body);
  --dimmer:var(--gold-body);
  --copper:var(--gold-btn);
  --copper-lt:#38260C;

  background:var(--gold);
  color:var(--gold-ink);
}

/* A gold section spans the full bleed, its .wrap keeps the grid. */
section.mh-gold,div.mh-gold.mh-band{border-top:1px solid var(--gold-deep);
  border-bottom:1px solid var(--gold-deep)}

/* Headings and copy */
.mh-gold h1,.mh-gold h2,.mh-gold h3,.mh-gold .lead,.mh-gold .mh-form-h,
.mh-gold .mh-notsure h2,.mh-gold blockquote{color:var(--gold-ink)}
.mh-gold .sub,.mh-gold p,.mh-gold .mh-form-intro,.mh-gold .prose p{color:var(--gold-body)}
.mh-gold .kicker,.mh-gold legend,.mh-gold .mh-sn,.mh-gold .mh-marketc h3,
.mh-gold .mh-foot-c h2{color:#38260C}

/* Icons go dark on gold. CSS beats the SVG presentation attribute. */
.mh-gold svg[stroke]{stroke:var(--gold-ink)}
.mh-gold .mh-card-ic,.mh-gold .mh-pillar-ic{
  border-color:rgba(22,17,10,.30);
  background:linear-gradient(150deg,rgba(22,17,10,.10),rgba(22,17,10,.02))}
.mh-gold .mh-card-ic svg,.mh-gold .mh-pillar-ic svg{stroke:var(--gold-ink)}
/* The Google mark keeps its own brand colours, it is a third-party logo. */
.mh-gold svg[aria-label="Google"] path,.mh-gold .src>svg[aria-hidden] path[fill]{stroke:none}

/* Cards on a gold ground lift slightly; a card that IS the gold scope
   sits at full gold against the dark section behind it. */
.mh-gold .mh-card,.mh-gold .mh-pillar,.mh-gold .src,.mh-gold .mh-proof{
  background:var(--gold-lift);border-color:rgba(22,17,10,.28)}
.mh-card.mh-gold,.mh-proof.mh-gold,.mh-loccard-b.mh-gold,
.mh-pillar.mh-gold,.src.mh-gold{
  background:var(--gold);border-color:var(--gold-deep)}
.mh-card.mh-gold:hover,a.mh-proof.mh-gold:hover,a.src.mh-gold:hover{
  background:var(--gold-lift);border-color:var(--gold-btn);transform:translateY(-3px)}
.mh-gold .mh-card:hover,.mh-gold .src:hover{
  background:#DCAA74;border-color:var(--gold-btn)}
/* The Google mark keeps its brand colours when the card itself is the scope. */
.src.mh-gold>svg path{stroke:none}

/* Buttons: dark button with gold text is the strongest pairing on gold. */
.mh-gold .btn.solid{background:var(--gold-btn);color:var(--copper-lt);color:#E8BC86}
.mh-gold .btn.solid:hover{background:#2A2114;color:#F0CE9E}
.mh-gold .btn.ghost{border-color:rgba(22,17,10,.42);color:var(--gold-ink)}
.mh-gold .btn.ghost:hover{border-color:var(--gold-btn);background:rgba(22,17,10,.09);
  color:var(--gold-ink)}

/* Links stay obvious against gold. */
.mh-gold a{color:var(--gold-ink)}
.mh-gold .mh-card-go,.mh-gold .mh-proof-a,.mh-gold .sca{color:#38260C;font-weight:600}
.mh-gold .mh-when{color:#38260C;border-top-color:rgba(22,17,10,.22)}
.mh-gold .mh-check a,.mh-gold .mh-or a{color:var(--gold-ink);
  border-bottom-color:rgba(22,17,10,.5)}
.mh-gold .marqhead .n a{color:var(--gold-ink);border-bottom-color:rgba(22,17,10,.4)}

/* Focus stays visible on gold. */
.mh-gold :focus-visible{outline:2px solid var(--gold-btn);outline-offset:3px}

/* Stars read as dark bronze on gold rather than disappearing. */
.mh-gold .st,.mh-gold .stars,.mh-gold .mh-st,.mh-gold .scr .st,.mh-gold .rq .st{color:#3A260B}

/* Rules and dividers */
.mh-gold .rule,.mh-gold .qa,.mh-gold .ck,.mh-gold .rq,.mh-gold .sit,
.mh-gold .mh-step,.mh-gold .mh-marketc a{border-color:rgba(22,17,10,.20)}
.mh-gold .mh-step{border-top-color:rgba(22,17,10,.34)}

/* ---- The enquiry form on gold ---- */
.mh-formwrap.mh-gold{border-color:var(--gold-deep)}
.mh-gold .mh-f label{color:var(--gold-ink);font-weight:600}
.mh-gold .mh-req{color:#4E2208}
/* background-color, NOT the background shorthand. The shorthand resets
   background-repeat, -position and -size to their initial values, which
   wiped the select arrow's "no-repeat / right 14px center / 10px" from
   the base rule and left the arrow tiling across the whole field. */
.mh-gold .mh-f input,.mh-gold .mh-f select,.mh-gold .mh-f textarea{
  background-color:#FBF3E7;border:1px solid rgba(22,17,10,.42);color:#16110A}
.mh-gold .mh-f input::placeholder,.mh-gold .mh-f textarea::placeholder{color:#6B5A44}
.mh-gold .mh-f input:hover,.mh-gold .mh-f select:hover,.mh-gold .mh-f textarea:hover{
  border-color:rgba(22,17,10,.66)}
.mh-gold .mh-f input:focus,.mh-gold .mh-f select:focus,.mh-gold .mh-f textarea:focus{
  border-color:var(--gold-btn);box-shadow:0 0 0 3px rgba(22,17,10,.24);background-color:#fff}
/* The dark arrow, with its placement restated so it can never tile even
   if a background shorthand is reintroduced above. */
.mh-gold .mh-f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2316110A' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px}
.mh-gold .mh-f input[aria-invalid="true"],.mh-gold .mh-f select[aria-invalid="true"]{
  border-color:#7E1B1E;box-shadow:0 0 0 3px rgba(126,27,30,.20)}
.mh-gold .mh-err{color:#520E11;font-weight:600}
.mh-gold .mh-consent{background:rgba(255,248,238,.44);border-color:rgba(22,17,10,.34);
  border-left-color:var(--gold-btn)}
.mh-gold .mh-check label{color:var(--gold-ink)}
.mh-gold .mh-check input[type="checkbox"]{accent-color:var(--gold-btn)}
.mh-gold .mh-disclosure{color:#3B2E1F}
.mh-gold .mh-formstatus{color:var(--gold-body)}
.mh-gold .mh-formstatus.bad{color:#520E11}

/* ---- Reviews on gold ---- */
.mh-gold .rq q,.mh-gold .scr,.mh-gold .scr b{color:var(--gold-ink)}
.mh-gold .rq .by,.mh-gold .scn{color:var(--gold-body)}
.mh-gold .rq .by b{color:#38260C}
.mh-gold .rsub{color:var(--gold-body)}
.mh-gold .mh-proof-r,.mh-gold .mh-proof-r b{color:var(--gold-ink)}
.mh-gold .mh-proof-n{color:var(--gold-body)}

/* ---- The band CTA inside a gold section ---- */
/* A LIGHT wash, not a dark one. Darkening the ground under these panels
   pushed body copy to 4.30:1, below AA. Lifting it instead reads as an
   inset highlight and takes body copy to 5.9:1. */
.mh-gold .band{background:rgba(255,246,235,.14);border-color:rgba(22,17,10,.30)}
.mh-gold .band p{color:var(--gold-ink)}
.mh-gold .mh-notsure{background:rgba(255,246,235,.14);border-color:rgba(22,17,10,.30)}
.mh-gold .mh-notsure p{color:var(--gold-body)}

/* ---- Market cards: image stays prominent, panel below goes gold ---- */
.mh-loccard-b.mh-gold h3{color:var(--gold-ink)}
.mh-loccard-b.mh-gold p{color:var(--gold-body)}
.mh-loccard:hover .mh-loccard-b.mh-gold{background:var(--gold-lift)}
.mh-loccard-fig:after{background:linear-gradient(180deg,rgba(8,8,6,.04),rgba(8,8,6,.30))}

/* Situation cards keep an even height so a gold grid reads as a block. */
.mh-cards{align-items:stretch}
.mh-card.mh-gold .mh-card-b p{min-height:0}

/* Mobile: gold panels need a little more breathing room than dark ones. */
@media(max-width:640px){
  .mh-formwrap.mh-gold{padding:26px 20px}
  .mh-gold .mh-consent{padding:20px 18px}
}

/* Market link columns as gold panels need their own padding, since as
   bare columns they had none. */
.mh-marketc.mh-gold{padding:28px 30px;border:1px solid var(--gold-deep)}
.mh-marketc.mh-gold h3{color:#38260C;margin-bottom:10px}
.mh-marketc.mh-gold a{color:var(--gold-ink);border-bottom-color:rgba(22,17,10,.20)}
.mh-marketc.mh-gold a:hover{color:#38260C;background:rgba(22,17,10,.06);
  padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px}
@media(max-width:640px){.mh-marketc.mh-gold{padding:22px 20px}}

/* The homepage strap figure sits inside the gold "3 Ways to Sell" section. */
.mh-gold .mh-strap{border-top-color:rgba(22,17,10,.22)}
.mh-gold .mh-strap figcaption b{color:var(--gold-ink)}
.mh-gold .mh-strap figcaption span{color:var(--gold-body)}

/* Review source tiles and quote cards on the gold reviews section. */
.mh-gold .src{background:var(--gold-lift);border-color:rgba(22,17,10,.30)}
.mh-gold .src:hover{background:#DCAA74;border-color:var(--gold-btn)}
.mh-gold .srcs .src .scn{color:var(--gold-body)}
/* Keep the Google logo in its own brand colours on gold. */
.mh-gold .src>svg path{stroke:none}

/* The trust marquee header inside a gold scope. */
.mh-gold .marqhead .rate,.mh-gold .marqhead .n{color:var(--gold-ink)}

/* Situation cards keep an even height across a gold grid. */
.mh-cards{grid-auto-rows:1fr}

/* ------------------------------------------------------------------ *
 * Funnel handoff. Replaced the inline enquiry form on 2026-09-03 when
 * the funnel became the single capture path. Reuses the gold ground so
 * the section still carries weight on the page.
 * ------------------------------------------------------------------ */

.mh-handoff{margin-top:50px;padding:52px 46px;background:var(--gold);
  border:1px solid var(--gold-deep);color:var(--gold-ink)}
@media(max-width:640px){.mh-handoff{padding:32px 22px}}
.mh-handoff h2{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.7rem,3.2vw,2.4rem);
  font-weight:500;margin:0 0 16px;line-height:1.14;letter-spacing:-.015em;color:var(--gold-ink)}
.mh-handoff p{color:var(--gold-body);margin:0 0 30px;max-width:56ch;font-size:17px}
.mh-handoff .mh-b{display:flex;gap:12px;flex-wrap:wrap}
.mh-handoff .btn.solid{background:var(--gold-btn);color:#E8BC86}
.mh-handoff .btn.solid:hover{background:#2A2114;color:#F0CE9E}
.mh-handoff .btn.ghost{border-color:rgba(22,17,10,.42);color:var(--gold-ink)}
.mh-handoff .btn.ghost:hover{border-color:var(--gold-btn);background:rgba(22,17,10,.09)}
.mh-handoff :focus-visible{outline:2px solid var(--gold-btn);outline-offset:3px}

/* ================================================================== *
 * THE FUNNEL (/get-offer/)
 *
 * Built from the site's own tokens and components. The branching and
 * qualification LOGIC came from the REI demo; none of its design did.
 * Situation cards reuse .mh-card in the gold scope, everything else is
 * the same type, spacing and copper the rest of the site uses.
 * ================================================================== */

.mhf-wrap{padding:56px 0 110px}
@media(max-width:820px){.mhf-wrap{padding:34px 0 80px}}
.mhf{max-width:960px;margin:0 auto}

/* progress */
.mhf-bar{height:2px;background:var(--line);margin-bottom:48px;overflow:hidden}
.mhf-bar span{display:block;height:100%;background:var(--copper);transition:width .35s ease}
@media(max-width:820px){.mhf-bar{margin-bottom:32px}}

.mhf-step{animation:mhfIn .28s ease both}
@keyframes mhfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mhf-step{animation:none}}

.mhf-h{font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:-.015em;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;margin:0 0 20px;max-width:20ch;
  font-variation-settings:"SOFT" 40,"WONK" 1;color:var(--cream)}
.mhf-h:focus{outline:none}
.mhf-sub{color:var(--dim);font-size:1.08rem;max-width:58ch;margin:0 0 40px;line-height:1.66}

/* ------------------------------------------------------------------ *
 * What happens when you ask. Replaces the scripted chat mock that used
 * to sit in #ask: that panel was driven by an element chat.js never
 * populated, so it rendered as a large empty box on the home page.
 * ------------------------------------------------------------------ */
.mh-askflow{list-style:none;counter-reset:mhask;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px}
.mh-askflow li{counter-increment:mhask;position:relative;
  padding:24px 26px 24px 74px;background:var(--panel);border:1px solid var(--line)}
.mh-askflow li:before{content:counter(mhask);position:absolute;left:26px;top:24px;
  width:30px;height:30px;border:1px solid var(--copper);border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--copper-lt);
  font-family:"Fraunces",Georgia,serif}
.mh-askflow h4{font-family:"Fraunces",Georgia,serif;font-size:1.14rem;font-weight:500;
  margin:0 0 8px;line-height:1.24;letter-spacing:-.01em;color:var(--cream)}
.mh-askflow p{margin:0;color:var(--dim);font-size:15px;line-height:1.58}
@media(max-width:560px){.mh-askflow li{padding:22px 20px 22px 62px}
  .mh-askflow li:before{left:18px}}

/* ---- step 1: situation cards ---- */
.mhf-cards{margin-top:0}
/* The card is a div holding two controls: the body toggles, and its own
   Continue goes. Nobody has to reach the button at the foot of the list. */
.mhf-card{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--gold-deep)}
.mhf-card-hit{flex:1;text-align:left;cursor:pointer;font:inherit;padding:0;
  background:none;border:0;color:inherit;display:flex;flex-direction:column;width:100%}
.mhf-card .mh-card-fig{display:flex;align-items:flex-start;justify-content:space-between;width:100%}
.mhf-card .mh-card-b{display:flex;flex-direction:column;flex:1;padding-bottom:4px}
.mhf-card-h{font-family:"Fraunces",Georgia,serif;font-size:1.16rem;font-weight:500;
  line-height:1.25;margin-bottom:10px;color:var(--gold-ink)}
.mhf-card-p{color:var(--gold-body);font-size:14.5px;line-height:1.55}
.mhf-tick{width:26px;height:26px;border:1px solid rgba(22,17,10,.35);display:grid;place-items:center;
  font-size:14px;color:transparent;transition:.18s;border-radius:50%}
.mhf-card.on{background:var(--gold-lift);border-color:var(--gold-btn);
  box-shadow:0 0 0 2px var(--gold-btn)}
.mhf-card.on .mhf-tick{background:var(--gold-btn);border-color:var(--gold-btn);color:#E8BC86}

/* Per-card Continue. Dark button on gold, same pairing as .mh-card-start,
   and scoped past the blanket .mh-gold colour so it cannot go black on
   black the way .mh-card-start did. */
.mhf-card-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 22px 22px;padding-top:16px;border-top:1px solid rgba(22,17,10,.22)}
.mhf-card .mhf-card-go,.mh-gold .mhf-card-go{background:var(--gold-btn);color:#E8BC86;
  border:0;font:inherit;font-size:14.5px;font-weight:700;padding:11px 18px;
  cursor:pointer;white-space:nowrap;transition:.18s}
.mhf-card .mhf-card-go:hover,.mh-gold .mhf-card-go:hover{background:#2A2114;color:#F0CE9E}
.mhf-card-or{color:#4A3211;font-size:13.5px}
.mhf-card-hit:focus-visible,.mhf-card-go:focus-visible{
  outline:2px solid var(--gold-btn);outline-offset:3px}

/* ---- step 2: tapped options ---- */
.mhf-opts{display:grid;gap:12px;max-width:640px}
.mhf-opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line2);color:var(--cream);
  font-family:"Karla",Helvetica,Arial,sans-serif;font-size:17px;font-weight:500;
  padding:19px 22px;transition:border-color .16s,background .16s,transform .14s}
.mhf-opt:hover{border-color:var(--copper);background:var(--panel2);transform:translateX(4px)}
.mhf-opt:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.mhf-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);flex:0 0 auto;
  transition:border-color .16s,background .16s}
.mhf-opt:hover .mhf-dot{border-color:var(--copper);background:var(--copper)}

/* ---- nav + back ---- */
.mhf-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:40px}
.mhf-nav .btn.solid[disabled]{opacity:.4;cursor:not-allowed}
.mhf-hint{color:var(--dimmer);font-size:14.5px}
.mhf-back{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mhf-backbtn{background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;
  font-size:15px;padding:0}
.mhf-backbtn:hover{color:var(--copper-lt)}
.mhf-trail{color:var(--dimmer);font-size:14px}

/* ---- outcome ---- */
.mhf-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.mhf-tags span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-lt);
  border:1px solid var(--line2);padding:7px 13px}
.mhf-combo{border-left:2px solid var(--copper);padding:4px 0 4px 24px;margin:0 0 26px;max-width:64ch}
.mhf-combo h3{font-family:"Fraunces",Georgia,serif;font-size:1.2rem;font-weight:500;
  margin:0 0 10px;color:var(--cream);line-height:1.25}
.mhf-combo p{color:var(--dim);margin:0;font-size:16px;line-height:1.65}

/* ---- contact step ---- */
.mhf-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:720px}
@media(max-width:640px){.mhf-form{grid-template-columns:1fr}}
.mhf-full{grid-column:1/-1}
.mhf-f{display:flex;flex-direction:column;min-width:0}
.mhf-f label{font-size:14.5px;color:#CFC6B9;margin-bottom:8px;font-weight:500}
.mhf-f input,.mhf-f textarea{width:100%;background:#0B0A08;border:1px solid var(--line2);
  color:var(--cream);font-family:"Karla",Helvetica,Arial,sans-serif;font-size:16px;
  padding:14px 15px;transition:border-color .16s}
.mhf-f textarea{resize:vertical;line-height:1.55}
.mhf-f input:focus,.mhf-f textarea:focus{outline:none;border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(198,140,78,.16)}
.mhf-ziphint{color:var(--dimmer);font-size:14px;margin-top:-8px}
.mhf-ziphint:empty{display:none}
.mhf-picks{display:flex;flex-wrap:wrap;gap:9px}
.mhf-pk{background:var(--panel);border:1px solid var(--line2);color:var(--cream);cursor:pointer;
  font-family:"Karla",Helvetica,Arial,sans-serif;font-size:15px;padding:11px 18px;
  border-radius:999px;transition:.16s}
.mhf-pk:hover{border-color:var(--copper)}
.mhf-pk.on{background:var(--copper);border-color:var(--copper);color:#0B0805;font-weight:600}

.mhf-consent{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  margin-top:32px;max-width:720px;padding:22px;background:#0B0A08;
  border:1px solid var(--line2);border-left:2px solid var(--copper)}
.mhf-consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--copper);cursor:pointer}
.mhf-consent span{font-size:15px;color:var(--cream);line-height:1.55}
.mhf-consent a{color:var(--copper-lt);border-bottom:1px solid rgba(232,188,134,.4)}
.mhf-disc{display:block;margin-top:12px;color:#B4AA9C;font-size:14px;line-height:1.6}
.mhf-err{color:#F08B8E;font-size:15px;margin-top:16px;font-weight:500}
.mhf-err:empty{display:none}

/* ---- done ---- */
.mhf-done{text-align:center;padding:40px 0}
.mhf-tickbig{width:64px;height:64px;margin:0 auto 28px;border-radius:50%;
  border:1px solid var(--copper);display:grid;place-items:center;color:var(--copper);font-size:26px}
.mhf-done .mhf-h,.mhf-done .mhf-sub{margin-left:auto;margin-right:auto}
.mhf-done .mhf-nav{justify-content:center}
.mhf-tel{display:inline-block;margin:8px 0 4px;font-family:"Fraunces",Georgia,serif;
  font-size:1.9rem;color:var(--copper-lt);padding:14px 30px;border:1px solid var(--line2)}
.mhf-tel:hover{border-color:var(--copper);color:var(--cream)}

/* Each situation card carries its own start action, so a visitor never has to
   scroll to a block at the foot of the page to begin. */
.mh-card-b h3 a.mh-card-link{color:inherit;text-decoration:none}
.mh-card-b h3 a.mh-card-link:hover{color:var(--gold-btn)}
.mh-card-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto;
  padding-top:16px;border-top:1px solid rgba(22,17,10,.20)}
/* The start action is a dark button sitting ON a gold card, so its label
   has to be light. It must out-specify the blanket .mh-gold a colour
   (0,1,1) or the label paints near-black on near-black and the button
   reads as a solid blob. a.mh-card-start is (0,1,1) too and loses on
   source order, so the gold-scoped forms below are what actually hold. */
.mh-card-start{font-size:14.5px;font-weight:700;
  background:var(--gold-btn);color:#E8BC86;padding:10px 16px;white-space:nowrap}
.mh-card-start:hover{background:#2A2114;color:#F0CE9E}
.mh-gold a.mh-card-start,a.mh-card-start.mh-gold,.mh-gold .mh-card a.mh-card-start{
  background:var(--gold-btn);color:#E8BC86}
.mh-gold a.mh-card-start:hover,a.mh-card-start.mh-gold:hover,
.mh-gold .mh-card a.mh-card-start:hover{background:#2A2114;color:#F0CE9E}
.mh-card-read{font-size:14px;color:#38260C;font-weight:600;
  border-bottom:1px solid rgba(22,17,10,.3)}
.mh-card-read:hover{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}
.mh-card:hover{transform:none}
.mh-card-acts a:focus-visible{outline:2px solid var(--gold-btn);outline-offset:3px}

/* When a visitor arrives from a situation card we tick that card for them.
   Saying so beats silently changing the state under them. */
.mhf-preset{color:var(--copper-lt);font-size:15px;margin:-24px 0 34px;
  padding:14px 18px;border-left:2px solid var(--copper);background:var(--panel);max-width:60ch}