/* ==========================================================================
   About — "Verified"
   Most broker About pages ask you to believe a claim. This one puts the
   licence numbers up and sends you to the regulator to check them: each
   credential runs a scan on scroll and settles into a verified state.
   Loads after site.css.
   ========================================================================== */

@property --scan { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ---- Hero ---------------------------------------------------------------- */
.ahero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(7rem, 11vw, 9rem) 0 clamp(3rem, 6vw, 4.5rem); }
/* the gradient is pulled toward the portrait and faded out everywhere else, so
   it reads as depth behind him rather than a blue field across the hero */
.grainbg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 55% at 68% 42%, #0e2450, #04060b 70%);
  -webkit-mask-image: radial-gradient(68% 62% at 68% 44%, #000 12%, transparent 76%); mask-image: radial-gradient(68% 62% at 68% 44%, #000 12%, transparent 76%); }
.grainbg canvas { opacity: 0; transition: opacity 1.4s var(--ease); }
.grainbg.is-live canvas { opacity: .8; }
.ahero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(4,6,11,.8) 0%, rgba(4,6,11,.45) 32%, transparent 60%),
    linear-gradient(180deg, rgba(4,6,11,.75) 0%, rgba(4,6,11,.2) 38%, rgba(4,6,11,.9) 90%, var(--bg) 100%); }

.ahero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.ahero__title { margin-top: 1rem; font-weight: 500; font-size: clamp(2.3rem, 1rem + 5vw, 4.6rem); line-height: 1; letter-spacing: -.05em; }
.ahero__title em { color: var(--blue-2); }
.ahero__roles { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.ahero__role { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ahero__role i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); font-style: normal; }
.ahero__photo { position: relative; justify-self: end; width: min(100%, 430px); }
.ahero__photo img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); }
@media (max-width: 860px) {
  .ahero__in { grid-template-columns: 1fr; align-items: start; }
  .ahero__photo { justify-self: center; width: min(100%, 320px); order: -1; }
}

/* ---- His statement ------------------------------------------------------- */
.creed { padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); }
.creed__q { font-size: clamp(1.4rem, 1rem + 1.9vw, 2.5rem); font-weight: 450; line-height: 1.28; letter-spacing: -.035em;
  max-width: 26ch; text-wrap: pretty; }
.creed__q em { font-family: var(--serif); font-style: italic; color: var(--blue-2); }
.creed__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.creed__body p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; max-width: 58ch; }
.creed__body p + p { margin-top: 1rem; }
.creed__sig { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.creed__sig b { display: block; font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; }
.creed__sig span { color: var(--ink-3); font: 500 .7rem/1.7 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 860px) { .creed__grid { grid-template-columns: 1fr; } .creed__q { max-width: none; } }

/* ---- The verification ---------------------------------------------------- */
.vfy { padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); }
.vfy__list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.vfy__i { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 1rem clamp(1rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.25rem, 2.4vw, 1.75rem) 0; border-bottom: 1px solid var(--line); }
/* a light sweeps the row once as it is checked */
.vfy__i::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent calc(var(--scan) - 18%), rgba(92,208,255,.16) var(--scan), transparent calc(var(--scan) + 18%)); }
.vfy__i.is-scanning::before { opacity: 1; animation: scan 1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes scan { from { --scan: 0%; } to { --scan: 118%; } }

.vfy__dot { justify-self: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; transition: background .5s, border-color .5s; }
.vfy__dot svg { width: 13px; height: 13px; fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .5s var(--ease) .15s; }
.vfy__i.is-ok .vfy__dot { background: var(--cyan); border-color: var(--cyan); }
.vfy__i.is-ok .vfy__dot svg { stroke-dashoffset: 0; }

.vfy__what b { display: block; font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); font-weight: 500; letter-spacing: -.025em; }
.vfy__what span { color: var(--ink-3); font-size: .88rem; }
.vfy__no { font: 500 .95rem/1.4 var(--mono); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vfy__no i { display: block; font-style: normal; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .25rem; }
.vfy__by { justify-self: end; text-align: right; }
.vfy__by a { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); font: 500 .68rem/1 var(--mono);
  letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.vfy__by a:hover { color: var(--cyan); border-color: var(--cyan); }
.vfy__note { margin-top: 1.75rem; color: var(--ink-3); font-size: .88rem; max-width: 58ch; }
@media (max-width: 860px) {
  .vfy__i { grid-template-columns: 2rem minmax(0, 1fr); }
  .vfy__no, .vfy__by { grid-column: 2; justify-self: start; text-align: left; }
}

/* ---- The undertaking ------------------------------------------------------
   A ledger, not cards: what I do on the left, what it means for you on the
   right, with the promise and its consequence on the same line. Three equal
   bordered cells would have been the fourth copy of that grid on this site. */
.pledge { padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); }
.pledge__l { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-2); }
.pledge__i { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .92fr);
  gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--line);
  transition: background .45s var(--ease); }
.pledge__i:hover { background: linear-gradient(90deg, rgba(61,123,255,.07), transparent 70%); }
.pledge__do { display: flex; align-items: baseline; gap: clamp(.9rem, 2vw, 1.5rem); }
.pledge__n { flex: none; color: var(--ink-3); font: 500 .68rem/1 var(--mono); letter-spacing: .08em; font-variant-numeric: tabular-nums;
  padding-top: .35rem; transition: color .4s; }
.pledge__i:hover .pledge__n { color: var(--blue-2); }
.pledge__do h3 { font-size: clamp(1.15rem, 1rem + .8vw, 1.65rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.pledge__do h3 em { color: var(--blue-2); }
/* the join: a hairline that grows a node on hover, so the two halves read as
   cause and effect rather than two columns of text */
.pledge__join { position: relative; width: clamp(28px, 6vw, 84px); height: 1px; background: var(--line-2); }
.pledge__join::after { content: ''; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; translate: 50% -50%;
  border-radius: 50%; background: var(--line-2); transition: background .4s, box-shadow .4s; }
.pledge__i:hover .pledge__join::after { background: var(--cyan); box-shadow: 0 0 12px 1px rgba(92,208,255,.6); }
.pledge__so { color: var(--ink-2); font-size: .97rem; line-height: 1.6; }
.pledge__so b { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) {
  .pledge__i { grid-template-columns: 1fr; gap: .9rem; align-items: start; }
  .pledge__join { width: 44px; }
}

/* ---- The two practices --------------------------------------------------- */
.prac { padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); }
.prac__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.prac__c { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--bg-2), var(--bg)); transition: border-color .45s; }
.prac__c:hover { border-color: rgba(127,176,255,.32); }
.prac__c img { height: 40px; width: auto; margin-bottom: 1.5rem; }
.prac__c h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 500; letter-spacing: -.035em; margin-bottom: .7rem; }
.prac__c h3 em { color: var(--blue-2); }
.prac__c p { color: var(--ink-2); margin-bottom: 1.75rem; }
.prac__c .btn { margin-top: auto; }
@media (max-width: 720px) { .prac__grid { grid-template-columns: 1fr; } }

/* The regulator links are the proof on this page, so they must be easy to hit.
   site.css sets this under (pointer: coarse) but this sheet loads later and its
   padding-bottom wins, so the override belongs here. */
@media (pointer: coarse) {
  .vfy__by a { padding-block: .45rem; }
  .vfy__i { padding-block: clamp(1.4rem, 3vw, 1.9rem); }
}