/* ==========================================================================
   ICONIC MORTGAGES LTD - iconicmortgages.co.uk
   Palette : brushed gold on near-black, taken from the company logo
   Type    : Playfair Display (matches the logo wordmark)
             over Jost (matches the logo's spaced sans)
   ========================================================================== */

:root{
  --ink:#0B0B0C;
  --panel:#141416;
  --panel-2:#1C1C20;
  --gold:#C9A44C;
  --gold-lt:#E4CC86;
  --gold-dk:#8C6D2A;
  --gold-ink:#7A5E22;
  --paper:#F8F6F1;
  --paper-2:#EFEBE2;
  --muted:#6B6A66;
  --muted-d:#A39E93;
  --line:#DED8CC;
  --line-d:#2C2C31;

  --shell:min(1200px,100% - 2.5rem);
  --rad:4px;
  --rad-lg:8px;

  --step--1:clamp(.78rem,.75rem + .12vw,.84rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.06rem);
  --step-1:clamp(1.15rem,1.08rem + .34vw,1.34rem);
  --step-2:clamp(1.4rem,1.26rem + .66vw,1.8rem);
  --step-3:clamp(1.7rem,1.44rem + 1.2vw,2.5rem);
  --step-4:clamp(2rem,1.5rem + 2.3vw,3.6rem);
  --step-5:clamp(2.4rem,1.6rem + 3.8vw,4.8rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Jost,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.14;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.shell{width:var(--shell);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--gold);color:var(--ink);padding:.7rem 1rem;border-radius:var(--rad)}

/* ---------- shared ------------------------------------------------------- */

.eyebrow{
  font-size:var(--step--1);font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-ink);display:flex;align-items:center;gap:.85rem;margin:0 0 1.2rem;
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--gold);flex:none}
.eyebrow--onDark{color:var(--gold)}

.lede{font-size:var(--step-1);color:var(--muted);max-width:58ch;line-height:1.62;font-weight:300}
.lede--onDark{color:var(--muted-d)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:Jost,sans-serif;font-size:.86rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  padding:1rem 1.9rem;border-radius:var(--rad);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn--outline{background:transparent;color:var(--gold);border-color:var(--gold-dk)}
.btn--outline:hover{border-color:var(--gold);background:rgba(201,164,76,.1)}
.btn--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--dark:hover{background:var(--panel-2);border-color:var(--panel-2)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--wide{width:100%}
.btn--wa{background:#25D366;color:#06301A;border-color:#25D366}
.btn--wa:hover{background:#41E884;border-color:#41E884}

.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}

.section{padding:clamp(4rem,8vw,7.5rem) 0}
.section--dark{background:var(--ink);color:var(--paper)}
.section--panel{background:var(--panel);color:var(--paper)}
.section--lift{background:var(--paper-2)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}

.head{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.head__title{font-size:var(--step-3)}
.head__title + .lede{margin-top:1.2rem}

/* gold hairline used as a section divider */
.rule{height:1px;background:linear-gradient(90deg,var(--gold-dk),var(--gold),transparent)}

/* ---------- logo lockup --------------------------------------------------- */

.mark{display:flex;align-items:center;gap:.85rem;text-decoration:none;flex:none}
.mark__ico{width:48px;height:36px;flex:none}
.mark__bar{width:1px;height:40px;background:var(--gold-dk);flex:none}
.mark__txt{display:flex;flex-direction:column;line-height:1}
.mark__a{
  font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1.25rem;
  letter-spacing:.1em;color:var(--gold);line-height:1;
}
.mark__b{
  font-size:.55rem;font-weight:400;letter-spacing:.34em;
  color:var(--gold-dk);margin-top:.34rem;line-height:1;
}
.mark--light .mark__a{color:var(--gold)}

/* ---------- header -------------------------------------------------------- */

.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(11,11,12,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-d);
}
.hdr__in{display:flex;align-items:center;gap:1.4rem;min-height:82px}

.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav__link{
  font-size:.83rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--paper);padding:.55rem .78rem;
  transition:color .18s ease;position:relative;
}
.nav__link::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.3rem;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.nav__link:hover{color:var(--gold)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--gold)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.hdr__tel{
  font-size:.85rem;font-weight:500;letter-spacing:.06em;text-decoration:none;
  color:var(--gold);white-space:nowrap;
  padding-left:1.1rem;margin-left:.5rem;
  padding-right:.35rem;margin-right:1rem;
  border-left:1px solid var(--line-d);
}
.hdr__tel:hover{color:var(--gold-lt)}
.hdr__cta{padding:.72rem 1.25rem;font-size:.76rem;white-space:nowrap}

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--line-d);
  border-radius:var(--rad);padding:.6rem .8rem;cursor:pointer;
  font-family:Jost,sans-serif;font-weight:500;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);
}

/* ---------- hero ---------------------------------------------------------- */

.hero{
  background:var(--ink);color:var(--paper);
  padding:clamp(3.5rem,7vw,6rem) 0 0;overflow:hidden;position:relative;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 12% 0%,rgba(201,164,76,.13),transparent 62%);
}
.hero__grid{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
.hero__title{font-size:var(--step-5);font-weight:500;letter-spacing:-.018em;line-height:1.08}
.hero__title em{font-style:italic;color:var(--gold)}
.hero__lede{margin-top:1.6rem;font-size:var(--step-1);color:var(--muted-d);max-width:48ch;line-height:1.62;font-weight:300}

.hero__tag{
  font-size:.76rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.5rem;line-height:1.9;
}
.hero__side{padding-bottom:.5rem;position:relative}
.hero__note{
  border-left:1px solid var(--gold-dk);padding:.2rem 0 .2rem 1.3rem;
  font-size:.96rem;color:var(--muted-d);font-weight:300;
}
.hero__note strong{color:var(--paper);font-weight:500}

/* the drawn skyline - signature element */
.skyline{margin-top:clamp(2.5rem,6vw,4.5rem);width:100%;position:relative}
.skyline__svg{width:100%;height:auto;display:block;overflow:visible;--sw:1.15}
.skyline__svg use{color:var(--gold-dk)}
.skyline__ground{fill:none;stroke:var(--gold-dk);stroke-width:1.15;stroke-linecap:square}
.skyline__cap{
  display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;
  border-top:1px solid var(--line-d);margin-top:-1px;padding:1.1rem 0 2.4rem;
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);
}

.elev{fill:none;stroke:currentColor;stroke-width:var(--sw,1.5);stroke-linecap:square;stroke-linejoin:miter}

/* ---------- trust strip --------------------------------------------------- */

.trust{background:var(--panel);border-block:1px solid var(--line-d)}
.trust__list{display:grid;grid-template-columns:repeat(4,1fr)}
.trust__item{padding:1.9rem 1.6rem 1.9rem 0;border-right:1px solid var(--line-d)}
.trust__item:last-child{border-right:0}
.trust__k{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:var(--step-1);
  color:var(--gold);display:block;
}
.trust__v{font-size:.9rem;color:var(--muted-d);display:block;margin-top:.35rem;line-height:1.5;font-weight:300}

/* ---------- services ------------------------------------------------------ */

.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{
  background:var(--paper);padding:2.2rem 2rem 2.3rem;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:background .22s ease;
}
.svc:hover{background:#fff}
.svc__icon{width:96px;height:80px;color:var(--gold-ink);margin-bottom:1.5rem;--sw:2;transition:color .22s ease}
.svc:hover .svc__icon{color:var(--gold)}
.svc__title{font-size:var(--step-1);margin-bottom:.7rem}
.svc__txt{font-size:.96rem;color:var(--muted);line-height:1.6;flex:1;font-weight:300}
.svc__risk{font-size:.8rem;color:var(--muted);line-height:1.5;margin-top:.7rem;font-weight:400}
.svc__go{
  font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;
  transition:gap .22s ease;
}
.svc:hover .svc__go{gap:.85rem;color:var(--ink)}

/* compact service list (12 services) */
.slist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.slist__i{
  background:var(--ink);padding:1.55rem 1.5rem;text-decoration:none;color:var(--paper);
  display:flex;align-items:center;gap:.9rem;transition:background .2s ease;
}
.slist__i:hover{background:var(--panel-2)}
.slist__n{font-size:.72rem;color:var(--gold-dk);letter-spacing:.1em;flex:none;width:1.6rem}
.slist__t{font-size:.95rem;font-weight:400}
.slist__i:hover .slist__t{color:var(--gold)}

/* ---------- process ------------------------------------------------------- */

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2.6rem 2rem}
.step{border-top:1px solid var(--line-d);padding-top:1.5rem}
.step__n{
  font-size:.74rem;font-weight:500;letter-spacing:.2em;color:var(--gold);
  display:block;margin-bottom:1rem;
}
.step__t{font-size:var(--step-1);margin-bottom:.65rem}
.step__d{font-size:.94rem;color:var(--muted-d);line-height:1.65;font-weight:300}

/* ---------- calculator ---------------------------------------------------- */

.calc{display:grid;grid-template-columns:1fr .82fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.calc__form{background:#fff;padding:clamp(1.75rem,3.5vw,2.6rem)}
.calc__out{background:var(--ink);color:var(--paper);padding:clamp(1.75rem,3.5vw,2.6rem);display:flex;flex-direction:column}

.tabs{display:flex;margin-bottom:2rem;border-bottom:1px solid var(--line)}
.tab{
  font-family:Jost,sans-serif;font-weight:500;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;
  background:none;border:0;border-bottom:2px solid transparent;
  padding:.7rem .2rem;margin-right:1.9rem;cursor:pointer;color:var(--muted);
  transition:color .18s ease,border-color .18s ease;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--gold-ink);border-bottom-color:var(--gold)}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field__l{font-size:.76rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.field__hint{font-size:.83rem;color:var(--muted);line-height:1.5;font-weight:300}
.field__wrap{position:relative;display:flex;align-items:center}
.field__pre,.field__suf{position:absolute;font-size:.95rem;font-weight:400;color:var(--muted);pointer-events:none}
.field__pre{left:.9rem}
.field__suf{right:.9rem}
.input,.select{
  width:100%;font-family:Jost,sans-serif;font-size:1rem;font-weight:400;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:.82rem .9rem;transition:border-color .18s ease;font-variant-numeric:tabular-nums;
}
.input:hover,.select:hover{border-color:#BCB4A4}
.input:focus{border-color:var(--gold)}
.input--pre{padding-left:1.9rem}
.input--suf{padding-right:2.5rem}
.select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px;background-repeat:no-repeat;padding-right:2.5rem;
}

.res__label{font-size:var(--step--1);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d)}
.res__big{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;
  font-size:clamp(2.6rem,6vw,3.8rem);line-height:1;color:var(--gold);
  margin:.7rem 0 .35rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.res__sub{font-size:.93rem;color:var(--muted-d);font-weight:300}
.res__rows{margin-top:auto;padding-top:2rem;margin-bottom:0}
.res__row{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid var(--line-d);font-size:.93rem}
.res__row dt{color:var(--muted-d);font-weight:300}
.res__row dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.res__band{
  margin-top:1.6rem;padding:.95rem 1.1rem;border:1px solid var(--line-d);
  font-size:.89rem;color:var(--muted-d);line-height:1.6;font-weight:300;
}
.res__band b{color:var(--gold);font-weight:500}

.riskw{margin:0 0 1.4rem;padding:.8rem 1.1rem;border-left:3px solid #e0b000;background:rgba(224,176,0,.10);border-radius:4px;font-size:.92rem;font-weight:600;line-height:1.5}
.calc__note{margin-top:1.6rem;font-size:.86rem;color:var(--muted);line-height:1.65;max-width:80ch;font-weight:300}

/* ---------- testimonials -------------------------------------------------- */

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.quote{background:#fff;border:1px solid var(--line);padding:2.2rem 2rem;display:flex;flex-direction:column}
.quote__mark{font-family:"Playfair Display",serif;font-weight:600;font-size:2.6rem;line-height:.8;color:var(--gold);margin-bottom:.9rem}
.quote__txt{font-size:1rem;line-height:1.68;flex:1;font-weight:300}
.quote__by{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.82rem;font-weight:500;letter-spacing:.08em}
.quote__by span{display:block;font-weight:300;color:var(--muted);margin-top:.25rem;letter-spacing:0}

/* ---- Adviser profile (about.html) ------------------------------------- */
.adviser{display:grid;grid-template-columns:1.7fr 1fr;gap:2rem;align-items:start}
.adviser__body{background:#fff;border:1px solid var(--line);padding:2.4rem 2.2rem}
.adviser__body p{font-size:1rem;line-height:1.72;font-weight:300;margin:0 0 1.1rem}
.adviser__name{font-family:"Playfair Display",serif;font-size:1.9rem;font-weight:600;margin:0}
.adviser__role{font-size:.85rem!important;letter-spacing:.05em;color:var(--gold-ink);
  font-weight:500!important;margin:.5rem 0 1.6rem!important;line-height:1.6!important}
.adviser__list{margin:0;padding-left:1.15rem;list-style:disc;display:grid;gap:.5rem;
  font-size:.95rem;font-weight:300;line-height:1.6;color:var(--muted)}
.adviser__reg{background:var(--paper-2);border:1px solid var(--line);
  border-top:3px solid var(--gold);padding:1.8rem 1.6rem}
.adviser__regh{margin:0 0 1.2rem;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--gold-ink)}
.adviser__dl{margin:0 0 1.3rem;display:grid;gap:.15rem}
.adviser__dl dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-top:.85rem}
.adviser__dl dt:first-child{margin-top:0}
.adviser__dl dd{margin:0;font-size:.98rem;font-weight:500;line-height:1.4}
.adviser__was{display:block;font-size:.74rem;font-weight:300;color:var(--muted);margin-top:.15rem;font-style:italic}
.adviser__note{font-size:.8rem;line-height:1.65;font-weight:300;color:var(--muted);
  margin:0 0 .8rem}
.adviser__note:last-child{margin-bottom:0;padding-top:.9rem;border-top:1px solid var(--line)}
.adviser__list li{list-style:disc}
@media (max-width:860px){
  .adviser{grid-template-columns:1fr}
  .adviser__body{padding:1.8rem 1.5rem}
}

/* ---------- faq ----------------------------------------------------------- */

.faq{max-width:860px}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i:first-child{border-top:1px solid var(--line)}
.faq__q{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:1.14rem;
  padding:1.45rem 2.5rem 1.45rem 0;cursor:pointer;list-style:none;position:relative;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";position:absolute;right:.4rem;top:1.85rem;width:10px;height:10px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .24s ease;
}
.faq__i[open] .faq__q::after{transform:rotate(-135deg)}
.faq__q:hover{color:var(--gold-ink)}
.faq__a{padding:0 3rem 1.7rem 0;color:var(--muted);line-height:1.72;font-weight:300}
.faq__a p + p{margin-top:.9rem}
.faq__a strong{color:var(--ink);font-weight:500}

/* ---------- forms --------------------------------------------------------- */

.enq{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.enq__form{background:#fff;border:1px solid var(--line);padding:clamp(1.75rem,3.5vw,2.6rem)}
.enq__err{color:#A32E1C;font-size:.83rem;font-weight:400}
.input[aria-invalid="true"]{border-color:#A32E1C}
textarea.input{resize:vertical;min-height:118px;line-height:1.6}
.consent{grid-column:1/-1;display:flex;gap:.8rem;align-items:flex-start;font-size:.87rem;color:var(--muted);line-height:1.6;font-weight:300}
.consent input{margin-top:.3rem;accent-color:var(--gold-ink);width:16px;height:16px;flex:none}
.consent a{color:var(--gold-ink)}
.hp{position:absolute;left:-9999px}
.enq__ok{
  grid-column:1/-1;background:#F4EEDD;border:1px solid var(--gold);
  padding:1.05rem 1.2rem;font-size:.94rem;color:#5C4715;line-height:1.6;
}
.enq__ok a{color:#5C4715;font-weight:500}
.enq__ok strong{display:block;font-size:1.06rem;font-weight:500;margin-bottom:.3rem}

/* Confirmation after a successful send. Deliberately loud: people were
   submitting two or three times because the old message was too quiet. */
.enq__ok--sent{
  display:flex;gap:.95rem;align-items:flex-start;
  padding:1.3rem 1.4rem;color:#3F3008;
  box-shadow:0 14px 34px -16px rgba(201,164,76,.75);
  animation:okpop .45s var(--ease-spring) both;
}
.enq__ok--sent::before{
  content:"";flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%230B0B0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1rem no-repeat;
}
.enq__ok--sent strong{color:#2E2205}
@keyframes okpop{from{opacity:0;transform:translateY(.5rem) scale(.98)}to{opacity:1;transform:none}}

/* Send failed. Same shape, but red so it cannot be mistaken for success. */
.enq__ok--warn{background:#FBECEA;border-color:#B3392B;color:#7A2216}
.enq__ok--warn a{color:#7A2216}

/* A disabled button must not look pressable, or people keep pressing it. */
.btn:disabled{cursor:default;opacity:.75}
.btn:disabled::before{display:none}
.btn:disabled:hover{transform:none;box-shadow:none}
.btn--sent:disabled{
  background:transparent;color:var(--gold-ink);border-color:var(--gold);opacity:1;
}
.btn--sent:disabled::after{content:"✓";font-size:1.05em;line-height:1}

.enq__side dl{margin:2.2rem 0 0}
.enq__side dt{font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-top:1.7rem}
.enq__side dd{margin:.4rem 0 0;font-size:1.05rem;font-weight:300}
.enq__side dd a{text-decoration:none;border-bottom:1px solid var(--line)}
.enq__side dd a:hover{border-color:var(--gold);color:var(--gold-ink)}

/* ---------- QR landing page ----------------------------------------------- */

.lead{min-height:100vh;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;position:relative;overflow:hidden}
.lead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(100% 55% at 50% 0%,rgba(201,164,76,.16),transparent 62%);
}
.lead__in{position:relative;width:min(560px,100% - 2.5rem);margin:0 auto;padding:2.75rem 0 3rem;flex:1}
.lead__mark{display:flex;justify-content:center;margin-bottom:2.4rem}
.lead__h{font-size:clamp(1.9rem,7vw,2.5rem);font-weight:500;text-align:center;letter-spacing:-.015em}
.lead__h em{font-style:italic;color:var(--gold)}
.lead__p{margin-top:1rem;text-align:center;color:var(--muted-d);font-weight:300;line-height:1.65}

.lead__quick{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:2rem 0 2.2rem}
.lead__or{display:flex;align-items:center;gap:1rem;color:var(--muted-d);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.8rem}
.lead__or::before,.lead__or::after{content:"";flex:1;height:1px;background:var(--line-d)}

.lead__form{background:var(--panel);border:1px solid var(--line-d);padding:1.8rem 1.6rem 2rem}
.lead__form .field__l{color:var(--paper)}
.lead__form .field__hint{color:var(--muted-d)}
.lead__form .input,.lead__form .select{
  background:var(--panel-2);border-color:var(--line-d);color:var(--paper);
}
.lead__form .input:hover,.lead__form .select:hover{border-color:var(--gold-dk)}
.lead__form .input:focus{border-color:var(--gold)}
.lead__form .input::placeholder{color:#6E6C68}
.lead__form .consent{color:var(--muted-d)}
.lead__form .consent a{color:var(--gold)}
.lead__form .select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted-d) 50%),linear-gradient(135deg,var(--muted-d) 50%,transparent 50%);
}
.lead__foot{position:relative;text-align:center;padding:1.4rem 1.25rem 1.6rem;font-size:.76rem;color:var(--muted-d);line-height:1.6;font-weight:300;border-top:1px solid var(--line-d)}
.lead__foot a{color:var(--gold-dk)}

/* ---------- WhatsApp float ------------------------------------------------ */

.wa{
  position:fixed;right:1.15rem;bottom:1.15rem;z-index:70;
  display:flex;align-items:center;gap:.6rem;
  background:#25D366;color:#06301A;text-decoration:none;
  padding:.85rem 1.15rem;border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.3);
  font-size:.84rem;font-weight:500;letter-spacing:.06em;
  transition:background .2s ease;
}
.wa:hover{background:#41E884}
.wa svg{width:22px;height:22px;flex:none;fill:currentColor}
.wa__t{white-space:nowrap}
@media (max-width:600px){.wa__t{display:none}.wa{padding:.95rem;border-radius:50%}}

/* ---------- warning bar + footer ------------------------------------------ */

/* Bottom footer. Client instruction: this line only, on every page. */
.ftr__warn{background:var(--gold)}
.ftr__warn p{
  font-size:.85rem;font-weight:500;letter-spacing:.055em;color:var(--ink);
  padding:1.05rem 0;text-align:center;
}

.ftr{background:var(--ink);color:var(--muted-d);padding:clamp(3.5rem,6vw,5rem) 0 2.5rem;font-size:.92rem;font-weight:300}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.8rem;border-bottom:1px solid var(--line-d)}
.ftr__blurb{margin-top:1.3rem;max-width:34ch;line-height:1.7}
.ftr__tag{margin-top:1.2rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);line-height:2}
.ftr__h{font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.ftr__l li{margin-bottom:.65rem}
.ftr__l a{text-decoration:none;transition:color .18s ease}
.ftr__l a:hover{color:var(--gold)}
.ftr__legal{padding-top:2.4rem;font-size:.83rem;line-height:1.8;display:grid;gap:1rem;max-width:105ch}
.ftr__legal strong{color:var(--paper);font-weight:500}
.ftr__legal a{color:var(--gold-dk)}
/* Pre-launch build note. Deliberately loud so it cannot ship by accident.
   Delete this rule once the FCA approval wording is in place. */
.ftr__approval{border-left:3px solid #e0b000;background:rgba(224,176,0,.10);padding:.9rem 1.1rem;border-radius:4px;font-size:.8rem}
.ftr__meta{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;font-size:.82rem}
.ftr__meta a{text-decoration:none}
.ftr__meta a:hover{color:var(--gold)}

/* opening hours block */
.hours{display:grid;gap:.55rem;margin-top:1.3rem}
.hours__r{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;padding-bottom:.55rem;border-bottom:1px solid var(--line-d)}
.hours__r:last-child{border-bottom:0}
.hours__k{color:var(--muted-d)}
.hours__v{color:var(--gold);font-weight:500;white-space:nowrap}
.hours--light .hours__r{border-color:var(--line)}
.hours--light .hours__k{color:var(--muted)}
.hours--light .hours__v{color:var(--gold-ink)}

/* ---------- inner pages --------------------------------------------------- */

.phero{background:var(--ink);color:var(--paper);padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.6rem,5vw,3.6rem);position:relative;overflow:hidden}
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 80% at 8% 0%,rgba(201,164,76,.11),transparent 60%);
}
.phero > .shell{position:relative}
.phero__title{font-size:var(--step-4);font-weight:500;letter-spacing:-.015em;max-width:19ch}
.phero__lede{margin-top:1.4rem;font-size:var(--step-1);color:var(--muted-d);max-width:60ch;line-height:1.62;font-weight:300}

.crumbs{font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-d);margin-bottom:1.6rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--gold)}

.detail{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.detail__b{background:#fff;padding:clamp(1.75rem,3.5vw,2.6rem)}
.detail__b h3{font-size:var(--step-2);margin-bottom:1rem}
.detail__b p{color:var(--muted);line-height:1.72;font-weight:300}
.detail__b p + p{margin-top:.95rem}
.detail__icon{width:112px;height:94px;color:var(--gold-ink);margin-bottom:1.6rem;--sw:1.8}

.ticks{margin-top:1.45rem;display:grid;gap:.75rem}
/* The tick used to be a flex item, which meant any <strong> in the MIDDLE of
   a sentence became its own flex item and the line broke into gappy chunks.
   Positioning the tick absolutely keeps the text as one normal text flow, so
   inline markup behaves however you write it. */
.ticks li{
  position:relative;padding-left:1.5rem;
  font-size:.96rem;line-height:1.6;font-weight:300;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.46rem;
  width:6px;height:11px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(40deg);
}
.ticks strong{font-weight:500}
.ticks--onDark li{color:var(--muted-d)}

.prose{max-width:72ch}
.prose h2{font-size:var(--step-2);margin:2.9rem 0 1.1rem}
.prose h3{font-size:var(--step-1);margin:2.1rem 0 .8rem}
.prose p{margin-bottom:1.15rem;color:var(--muted);line-height:1.76;font-weight:300}
.prose ul{margin:0 0 1.3rem;display:grid;gap:.65rem}
.prose ul li{padding-left:1.3rem;position:relative;color:var(--muted);line-height:1.68;font-weight:300}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;background:var(--gold)}
.prose a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:500}

/* values / mission cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{background:#fff;border:1px solid var(--line);padding:2.1rem 1.9rem}
.card--onDark{background:var(--panel);border-color:var(--line-d)}
.card__n{font-size:.72rem;font-weight:500;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:.9rem}
.card__t{font-size:var(--step-1);margin-bottom:.65rem}
.card__d{font-size:.95rem;color:var(--muted);line-height:1.68;font-weight:300}
.card--onDark .card__d{color:var(--muted-d)}

.cta{background:var(--ink);color:var(--paper);padding:clamp(2.5rem,5vw,4rem);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 130% at 50% 0%,rgba(201,164,76,.14),transparent 60%)}
.cta > *{position:relative}
.cta__t{font-size:var(--step-3);max-width:22ch;margin-inline:auto}
.cta__p{margin-top:1.2rem;color:var(--muted-d);max-width:54ch;margin-inline:auto;line-height:1.68;font-weight:300}
.cta .actions{justify-content:center}

/* ---------- motion -------------------------------------------------------- */

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes draw{to{stroke-dashoffset:0}}

.skyline__svg use{opacity:0;animation:rise .62s cubic-bezier(.2,.7,.3,1) forwards}
.skyline__svg use:nth-of-type(1){animation-delay:.30s}
.skyline__svg use:nth-of-type(2){animation-delay:.40s}
.skyline__svg use:nth-of-type(3){animation-delay:.50s}
.skyline__svg use:nth-of-type(4){animation-delay:.60s}
.skyline__svg use:nth-of-type(5){animation-delay:.70s}
.skyline__svg use:nth-of-type(6){animation-delay:.80s}
/* pathLength="1" normalises the line so these dash values hold at any size */
.skyline__ground{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.25,.8,.35,1) .05s forwards}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .skyline__svg use{opacity:1}
  .skyline__ground{stroke-dashoffset:0}
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width:1040px){
  .svcs,.slist,.cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr}
}
/* The nav, phone number and button fight for room. With seven links in the
   bar (Protection and FAQ were added) the squeeze starts earlier than it used
   to, so this now runs from the mobile breakpoint up to ~1340px.

   Step 1 (<=1340px): tighten the link spacing but keep everything.
   Step 2 (<=1180px): drop the phone number - it is still in the hero, the
   footer, and on the contact page, so nothing is actually lost. */
@media (max-width:1340px) and (min-width:961px){
  .nav__link{padding:.55rem .5rem;font-size:.775rem;letter-spacing:.07em}
  .nav__link::after{left:.5rem;right:.5rem}
  .hdr__tel{padding-left:.85rem;margin-left:.25rem;margin-right:.7rem;font-size:.8rem}
  .hdr__cta{padding:.66rem 1rem;font-size:.72rem}
}
@media (max-width:1180px) and (min-width:961px){
  .hdr__tel{display:none}
  .nav__link{padding:.55rem .42rem;font-size:.75rem}
  .nav__link::after{left:.42rem;right:.42rem}
}
/* The mobile menu takes over at 960px - earlier than the rest of the layout,
   which still reflows at 900px - because seven nav links run out of room
   against the logo before the page content does. */
@media (max-width:960px){
  .hdr{position:relative}
  .hdr__tel{display:none}
  .nav{display:none}
  .burger{display:inline-flex}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--ink);border-bottom:1px solid var(--line-d);
    padding:.5rem 1.25rem 1.4rem;
  }
  .nav.is-open .nav__link{padding:.95rem .5rem;font-size:.9rem;border-bottom:1px solid var(--line-d)}
  .nav.is-open .nav__link::after{display:none}
  .nav.is-open .hdr__cta{margin-top:1.1rem}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;align-items:start}
  .calc,.enq,.detail{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .trust__list{grid-template-columns:1fr 1fr}
  .trust__item{padding-left:0}
  .trust__item:nth-child(2n){border-right:0}
  .trust__item:nth-child(-n+2){border-bottom:1px solid var(--line-d)}
}
@media (max-width:700px){
  /* the skyline scales down hard on phones, so thicken the line to compensate */
  .skyline__svg{--sw:2.6}
  .skyline__ground{stroke-width:2.6}
}
@media (max-width:600px){
  .svcs,.slist,.steps,.cards{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr;gap:2rem}
  .actions .btn{width:100%}
  .skyline__cap{display:none}
}

/* ==========================================================================
   MOTION LAYER
   Added 5 September 2026. Presentation only - this block changes no wording.

   Everything here is switched off by the prefers-reduced-motion rule further
   up the file, which zeroes all transition and animation durations. The
   scroll reveal is additionally gated behind the .js-motion class, which
   app.js only adds when JS runs AND the visitor has not asked for reduced
   motion - so with JS off or blocked, every element is simply visible.
   ========================================================================== */

:root{
  --ease:cubic-bezier(.22,.61,.36,1);      /* settle - most things       */
  --ease-spring:cubic-bezier(.34,1.32,.64,1); /* slight overshoot - buttons */
  --t1:.16s;   /* nudge   */
  --t2:.34s;   /* standard */
  --t3:.6s;    /* reveal  */
  --lift:0 10px 30px -12px rgba(11,11,12,.28), 0 2px 6px -2px rgba(11,11,12,.12);
  --lift-dk:0 12px 34px -14px rgba(0,0,0,.65);
}

/* ---------- buttons ------------------------------------------------------ */

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--t2) var(--ease),color var(--t2) var(--ease),
             border-color var(--t2) var(--ease),transform var(--t2) var(--ease-spring),
             box-shadow var(--t2) var(--ease);
  will-change:transform;
}
/* light sweep, sits behind the label */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .62s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(120%)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:var(--lift)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:none;transition-duration:var(--t1)}
.btn--dark:hover,.btn--dark:focus-visible{box-shadow:var(--lift-dk)}
.btn--ghost::before,.btn--outline::before{
  background:linear-gradient(105deg,transparent 35%,rgba(201,164,76,.22) 50%,transparent 65%);
}

/* header call-to-action sits on a dark bar - keep the lift, drop the shadow */
.hdr__cta:hover,.hdr__cta:focus-visible{box-shadow:0 6px 18px -8px rgba(201,164,76,.85)}

/* ---------- top-bar underline -------------------------------------------- */
/* The line draws in from the left across the width of the letters, and on the
   way out keeps travelling right rather than rewinding. Flipping
   transform-origin between the two states is what makes it read as one
   continuous movement instead of a grow-and-shrink. */

.nav__link::after{
  height:1.5px;bottom:.22rem;
  transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* the current page keeps its line up permanently */
.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* same treatment for the phone number, which sits in the same row */
.hdr__tel{position:relative}
.hdr__tel::after{
  content:"";position:absolute;left:1.1rem;right:.35rem;bottom:-.35rem;height:1.5px;
  background:var(--gold);pointer-events:none;
  transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--ease);
}
.hdr__tel:hover::after,
.hdr__tel:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ---------- header on scroll --------------------------------------------- */

.hdr{transition:background var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.hdr__in{transition:min-height var(--t2) var(--ease)}
.hdr.is-scrolled{background:rgba(11,11,12,.86);box-shadow:0 1px 0 rgba(201,164,76,.18),0 10px 30px -18px rgba(0,0,0,.8)}
.hdr.is-scrolled .hdr__in{min-height:66px}
.mark{transition:opacity var(--t2) var(--ease)}
.mark:hover{opacity:.82}

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

.svc,.card,.quote,.detail__b,.adviser__body,.adviser__reg{
  transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease),
             border-color var(--t2) var(--ease),background var(--t2) var(--ease);
}
.svc:hover,.card:hover,.quote:hover,.detail__b:hover,
.adviser__body:hover,.adviser__reg:hover{
  transform:translateY(-4px);box-shadow:var(--lift);
}
.card:hover,.quote:hover{border-color:var(--gold)}
.card--onDark:hover{border-color:var(--gold-dk);box-shadow:var(--lift-dk)}

/* the 12-service grid is a 1px-gap mosaic, so a lift would tear the seams -
   give it a sliding gold edge instead */
.slist__i{position:relative;transition:background var(--t2) var(--ease),padding-left var(--t2) var(--ease)}
.slist__i::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform var(--t2) var(--ease);
}
.slist__i:hover::before{transform:scaleY(1)}

.step{transition:border-color var(--t2) var(--ease)}
.step:hover{border-color:var(--gold)}

/* ---------- links -------------------------------------------------------- */

.prose a,.ftr__legal a,.clause a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--t2) var(--ease),color var(--t2) var(--ease);
  text-decoration:none;
}
.prose a:hover,.ftr__legal a:hover,.clause a:hover{background-size:100% 1px}
.ftr__l a{transition:color var(--t2) var(--ease),padding-left var(--t2) var(--ease)}
.ftr__l a:hover{padding-left:.35rem;color:var(--gold)}

/* ---------- form fields -------------------------------------------------- */

.input,.select,textarea.input{
  transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease),
             background var(--t2) var(--ease);
}
.input:focus,.select:focus,textarea.input:focus{
  box-shadow:0 0 0 3px rgba(201,164,76,.18);
}
.input[aria-invalid="true"]{box-shadow:0 0 0 3px rgba(163,46,28,.14)}

/* ---------- FAQ ---------------------------------------------------------- */

.faq__i[open] .faq__a{animation:faqIn .38s var(--ease) both}
@keyframes faqIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
.faq__q{transition:color var(--t2) var(--ease)}
.faq__q::after{transition:transform var(--t2) var(--ease-spring)}

/* ---------- floating WhatsApp button ------------------------------------- */

.wa{transition:transform var(--t2) var(--ease-spring),box-shadow var(--t2) var(--ease)}
.wa:hover,.wa:focus-visible{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 34px -12px rgba(37,211,102,.7)}
.wa:active{transform:translateY(0) scale(.97)}

/* ---------- calculator figures ------------------------------------------- */

[data-out]{transition:color var(--t2) var(--ease)}

/* ---------- scroll reveal ------------------------------------------------ */
/* Only active once app.js adds .js-motion. Without it these rules never
   match, so content is visible by default - a JS failure cannot hide it. */

html.js-motion .rv{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease);
}
html.js-motion .rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.js-motion .rv{opacity:1;transform:none}
  .btn::before{display:none}
  .btn:hover,.btn:focus-visible,.wa:hover,.svc:hover,.card:hover,.quote:hover,
  .detail__b:hover,.adviser__body:hover,.adviser__reg:hover{transform:none}
}

/* ==========================================================================
   PREMIUM POLISH LAYER
   Added 5 September 2026. Presentation only - no wording, colour tokens,
   fonts, or copy touched. Purely additive shadows/glows/selection styling
   on top of the existing MOTION LAYER above. Governed by the same
   prefers-reduced-motion rule further up the file (it zeroes every
   animation/transition duration globally), so nothing here needs its own
   reduced-motion override.
   ========================================================================== */

/* a nicer text-selection colour than the browser default */
::selection{background:var(--gold);color:var(--ink)}

/* richer card hover: keep the existing lift, add a soft gold ambient glow */
.svc:hover,.card:hover,.quote:hover,.detail__b:hover,
.adviser__body:hover,.adviser__reg:hover{
  box-shadow:var(--lift),0 0 0 1px rgba(201,164,76,.14),0 22px 46px -28px rgba(201,164,76,.35);
}
.card--onDark:hover{
  box-shadow:var(--lift-dk),0 0 0 1px rgba(201,164,76,.22),0 22px 46px -28px rgba(201,164,76,.4);
}

/* gold buttons get a warm glow to match the lift, not just a grey shadow */
.btn--gold:hover,.btn--gold:focus-visible{
  box-shadow:var(--lift),0 14px 32px -14px rgba(201,164,76,.55);
}

/* the italicised word in headlines gets a faint two-tone gold gradient
   instead of flat gold - same luminance range, so contrast is unaffected */
.hero__title em,.lead__h em{
  background:linear-gradient(100deg,var(--gold-lt),var(--gold) 60%,var(--gold-dk));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* calculator headline figure gets a soft gold glow behind the digits */
.res__big{text-shadow:0 0 28px rgba(201,164,76,.35)}

/* a slow, subtle shimmer on the gold hairline divider, where used */
@keyframes ruleShimmer{0%{background-position:0% 0}100%{background-position:200% 0}}
.rule{
  background-image:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt),var(--gold),var(--gold-dk));
  background-size:200% 100%;
  animation:ruleShimmer 6s linear infinite;
}

/* trust-strip figures lift slightly and warm up on hover, echoing the cards */
.trust__item{transition:background var(--t2,.34s) var(--ease,ease)}
.trust__item:hover{background:rgba(201,164,76,.05)}
.trust__item:hover .trust__k{color:var(--gold-lt)}

/* ==========================================================================
   MOTION LAYER 2 - 2026 refresh
   Added 5 September 2026. Presentation only - no wording changed anywhere.

   Signature idea: "warm light." Every new effect here is the same gold glow
   appearing in a different place - a sweep across buttons (already existed),
   a slow-drifting glow behind the two darkest bands on each page, a spotlight
   that follows the cursor across cards, and a pull toward the primary
   button - rather than several unrelated tricks bolted on. Everything reads
   off the existing --gold tokens; no new colours were introduced.

   Everything here respects prefers-reduced-motion (the existing rule further
   up this file already zeroes transition/animation durations; the pointer-
   driven effects - magnetic buttons, the card spotlight - are additionally
   never attached by app.js when that preference is set, so there is nothing
   left running for it to zero). Word-reveal headings fall back to plain,
   fully visible text with no JS at all, and cursor-driven effects check for
   a fine pointer before attaching, so touch devices are unaffected.
   ========================================================================== */

/* ---------- native page-transition (real browsers only, silently ignored
   elsewhere - this is a CSS platform feature, not a script) --------------- */

@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.5s;animation-timing-function:var(--ease);
}
.hdr{ view-transition-name:site-header; }

/* ---------- ambient light behind the two darkest bands ------------------- */
/* Full re-declarations of rules that already exist earlier in this file -
   same technique as the header-underline fix above: same selector, later in
   the cascade, so it wins on every property restated here. */

.hero::before{
  content:"";position:absolute;inset:-15%;pointer-events:none;
  background:
    radial-gradient(35% 45% at 28% 8%,rgba(201,164,76,.17),transparent 65%),
    radial-gradient(30% 38% at 84% 80%,rgba(228,204,134,.11),transparent 70%);
  animation:auroraDrift 28s ease-in-out infinite alternate;
  will-change:transform;
}
.cta::before{
  content:"";position:absolute;inset:-18%;pointer-events:none;
  background:radial-gradient(45% 60% at 50% 10%,rgba(201,164,76,.16),transparent 62%);
  animation:auroraDrift 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes auroraDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(2.5%,-3%) scale(1.06)}
  100%{transform:translate(-2%,2%) scale(1.02)}
}

/* ---------- fine grain, whole page ---------------------------------------- */
/* A near-invisible paper texture (ties to --paper) rather than a generic
   tech grain - it's felt more than seen. */

body::after{
  content:"";position:fixed;inset:0;z-index:120;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ body::after{ opacity:.03 } }

/* ---------- word-reveal headings ------------------------------------------ */
/* app.js wraps each word of a hero title or section heading in these two
   spans; the outer clips, the inner rises into view. A word that is itself
   an element (the italic "mortgage" on the home page) travels as one piece,
   so its styling is untouched. */

.word{display:inline-block;overflow:hidden;vertical-align:top}
.word__in{
  display:inline-block;transform:translateY(115%);
  transition:transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 45ms);
}
.is-word-revealed .word__in{transform:none}

/* ---------- cursor spotlight on cards -------------------------------------- */
/* app.js writes --mx/--my from the pointer position; skipped entirely on
   touch devices, so these variables simply stay at their fallback there. */

.svc,.card,.quote,.adviser__body,.adviser__reg,.detail__b{position:relative;overflow:hidden}
.svc>*,.card>*,.quote>*,.adviser__body>*,.adviser__reg>*,.detail__b>*{position:relative;z-index:1}
.svc::after,.card::after,.quote::after,.adviser__body::after,.adviser__reg::after,.detail__b::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(201,164,76,.16),transparent 68%);
  opacity:0;transition:opacity .4s ease;
}
.svc:hover::after,.card:hover::after,.quote:hover::after,
.adviser__body:hover::after,.adviser__reg:hover::after,.detail__b:hover::after{opacity:1}
.card--onDark::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(201,164,76,.24),transparent 68%)}

/* ---------- magnetic pull on the primary button ---------------------------- */
/* app.js drives the transform on mousemove while .is-magnetic is present -
   this class swaps in a short, direct transition for that tracking, letting
   the existing spring transition take back over the moment the pointer
   leaves (see .btn's own transition, declared earlier in this file). */

.btn--gold.is-magnetic{transition:transform .12s cubic-bezier(.2,.6,.3,1)}

/* ---------- number tween ---------------------------------------------------- */

[data-out]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .word__in{transition-duration:.01ms}
}

/* ==========================================================================
   COOKIE CONSENT BANNER
   Paired with consent.js. The banner is injected by that script, so if
   JavaScript is off it never appears — and nothing non-essential ever
   loads either, which is the correct outcome.
   ========================================================================== */

/* A class selector beats the browser's own [hidden] rule, so .cc__opts
   {display:grid} and .btn {display:inline-flex} were both defeating the
   hidden attribute — the panel opened already expanded. Restore it. */
.cc[hidden],
.cc [hidden]{display:none !important}

.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--ink);color:var(--paper);
  border-top:1px solid var(--gold-dk);
  box-shadow:0 -18px 44px -20px rgba(0,0,0,.8);
  transform:translateY(100%);
  transition:transform var(--t3) var(--ease);
  max-height:88vh;overflow-y:auto;
}
.cc.is-open{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .cc{transition:none}
}
.cc__in{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:1fr auto;gap:clamp(1.4rem,3vw,3rem);
  align-items:center;padding:1.5rem 0 1.6rem;
}
.cc__t{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;
  font-size:1.18rem;margin:0 0 .5rem;color:var(--paper);
}
.cc__p{
  font-size:.9rem;line-height:1.68;font-weight:300;color:var(--muted-d);
  max-width:74ch;margin:0;
}
.cc__p strong{color:var(--paper);font-weight:500}
.cc__p a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.cc__p a:hover{color:var(--gold-lt)}

.cc__opts{margin-top:1.25rem;display:grid;gap:.85rem;max-width:74ch}
.cc__opt{
  display:flex;gap:.8rem;align-items:flex-start;
  font-size:.87rem;line-height:1.6;font-weight:300;color:var(--muted-d);
  cursor:pointer;
}
.cc__opt strong{color:var(--paper);font-weight:500}
.cc__opt input{
  margin-top:.25rem;width:16px;height:16px;flex:none;
  accent-color:var(--gold);cursor:pointer;
}
.cc__opt--fixed{cursor:default;opacity:.72}
.cc__opt--fixed input{cursor:not-allowed}

.cc__acts{display:flex;flex-direction:column;gap:.6rem;align-items:stretch;min-width:190px}
.cc__btn{white-space:nowrap;justify-content:center;font-size:.76rem}
.cc__link{
  background:none;border:0;padding:.4rem;cursor:pointer;
  font-family:Jost,sans-serif;font-size:.76rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  text-decoration:underline;text-underline-offset:4px;
}
.cc__link:hover{color:var(--gold-lt)}
/* The reject button sits on a dark ground here, unlike everywhere else. */
.cc .btn--ghost{color:var(--paper);border-color:var(--line-d)}
.cc .btn--ghost:hover{border-color:var(--gold);color:var(--gold)}

@media (max-width:820px){
  .cc__in{grid-template-columns:1fr;gap:1.25rem;padding:1.25rem 0 1.4rem}
  .cc__acts{flex-direction:row;flex-wrap:wrap;min-width:0}
  .cc__acts .cc__btn{flex:1 1 auto}
}

/* Inline button that looks like a link — used in the cookie policy. */
.lnk{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px;
}
.lnk:hover{color:var(--ink)}

/* Plain data table for the cookie policy. Scrolls rather than
   forcing the page sideways on a phone. */
.tbl{
  width:100%;border-collapse:collapse;margin:0 0 1.6rem;
  font-size:.88rem;font-weight:300;color:var(--muted);
}
.tbl th,.tbl td{
  text-align:left;vertical-align:top;padding:.85rem .9rem;
  border-bottom:1px solid var(--line);line-height:1.6;
}
.tbl th{
  font-family:Jost,sans-serif;font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--ink);
}
.tbl td strong{color:var(--ink);font-weight:500}
.prose .tbl{display:block;overflow-x:auto;white-space:normal}
@media (max-width:640px){
  .tbl{font-size:.83rem}
  .tbl th,.tbl td{padding:.7rem .6rem}
}

/* "Cookie settings" in the footer meta row. Has to be a <button>, not a
   link, because it opens the banner rather than going anywhere. Styled to
   sit invisibly among its sibling links. */
.ftr__ck{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:none;
}
.ftr__ck:hover{color:var(--gold)}

/* Step cards used as links (the protection teaser on the mortgages page).
   Keeps the card looking identical but makes the whole block clickable. */
a.step{display:block;text-decoration:none;color:inherit}
a.step:hover{border-color:var(--gold)}
a.step:hover .step__t{color:var(--gold)}
a.step .step__t{transition:color var(--t2) var(--ease)}

/* Social links in the footer brand column. */
.ftr__social{margin-top:1.5rem;display:flex;gap:.9rem;flex-wrap:wrap}
.ftr__soc{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.55rem .95rem;border:1px solid var(--line-d);border-radius:var(--rad);
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--muted-d);
  transition:border-color var(--t2) var(--ease),color var(--t2) var(--ease);
}
.ftr__soc svg{width:15px;height:15px;fill:currentColor;flex:none}
.ftr__soc:hover{border-color:var(--gold);color:var(--gold)}

/* ==========================================================================
   REVIEWS
   Used by the #reviews section on the home page. Ships hidden; see the
   comment above that section in index.html.
   ========================================================================== */
.revw{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.revw:empty{display:none}
.revw__i{background:#fff;padding:clamp(1.6rem,3vw,2.2rem);margin:0}
.revw__stars{color:var(--gold-ink);letter-spacing:.18em;font-size:.95rem;margin-bottom:1rem}
.revw__q{margin:0}
.revw__q p{color:var(--muted);line-height:1.72;font-weight:300;font-size:.98rem}
.revw__q p + p{margin-top:.85rem}
.revw__by{
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.revw__by span{display:block;margin-top:.4rem;letter-spacing:.06em;text-transform:none;color:var(--muted);font-weight:300}
.revw__widget{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.revw__widget:empty{display:none;margin:0}
@media (max-width:900px){.revw{grid-template-columns:1fr}}