.about-symtrade{background:var(--ink-2);color:var(--ivory);padding:clamp(78px,10vw,125px) 0;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.about-inner{width:min(1120px,89vw);margin:0 auto;text-align:center}
.about-symtrade .eyebrow{margin-bottom:20px}
.about-symtrade h2{font-family:var(--serif);font-size:clamp(44px,5vw,70px);font-weight:300;letter-spacing:-.035em;line-height:.95;margin:0 0 28px;color:var(--ivory)}
.about-copy{max-width:830px;margin:0 auto;color:#b9c9d4;font-size:15px;line-height:1.8}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:58px auto 0;max-width:980px}
.about-stats>div{padding:0 28px;border-left:1px solid rgba(239,245,247,.22)}
.about-stats>div:first-child{border-left:0}
.about-stats strong{display:block;font-family:var(--sans);font-size:clamp(42px,5.6vw,68px);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--brass)}
.about-stats span{display:block;margin-top:13px;color:#e7eef2;font-size:13px;line-height:1.45}
.about-note{}

.about-symtrade h2{font-size:clamp(32px,3.4vw,48px);letter-spacing:-.02em;line-height:1.12;margin:0 0 24px}
.about-copy{max-width:900px;line-height:1.85}
.about-stats{max-width:1040px;margin-top:52px}
.about-stats strong{font-size:clamp(34px,3.8vw,52px);letter-spacing:-.02em}
.about-stats span{margin-top:11px;font-size:14px;line-height:1.5;color:#dfe8ee}
@media(max-width:650px){.about-stats strong{font-size:40px}}
.about-noteX{margin:30px 0 0;color:#718a9a;font-size:8px;letter-spacing:.18em;text-transform:uppercase}
@media(max-width:650px){.about-stats{grid-template-columns:1fr;gap:28px;margin-top:42px}.about-stats>div{border-left:0;border-top:1px solid rgba(239,245,247,.18);padding:26px 18px 0}.about-stats>div:first-child{border-top:0;padding-top:0}.about-copy{font-size:14px}}












/* section 2: another 10% off */
.about-symtrade{padding-top:calc(clamp(63px,8.1vw,101px) + 81px);padding-bottom:clamp(63px,8.1vw,101px)}
.about-symtrade h2{margin:0 0 20px}
.about-copy{line-height:1.55}
.about-stats{margin-top:42px}
.about-stats strong{font-size:clamp(28px,3.1vw,42px)}
.about-stats span{margin-top:9px}
@media(max-width:650px){.about-symtrade{padding-top:calc(63px + 81px);padding-bottom:63px}.about-stats{margin-top:34px}}
/* section 2: 10% less vertical bulk */
.about-symtrade{padding-top:calc(clamp(70px,9vw,112px) + 90px);padding-bottom:clamp(70px,9vw,112px)}
.about-symtrade h2{margin:0 0 22px}
.about-copy{line-height:1.72}
.about-stats{margin-top:47px}
.about-stats strong{font-size:clamp(31px,3.4vw,47px)}
@media(max-width:650px){.about-stats{margin-top:38px}.about-symtrade{padding-top:calc(70px + 90px);padding-bottom:70px}}
/* section 2 overlaps the hero by 100px so the photo shows through the fade */
.about-symtrade{margin-top:-100px;padding-top:calc(clamp(78px,10vw,125px) + 100px);background:linear-gradient(180deg,rgba(24,36,50,0) 0px,rgba(24,36,50,.50) 50px,rgba(24,36,50,.88) 84px,#182432 100px)}
/* no hard seam: the hero gradient ends in this colour */
.about-symtrade{border-top:0}
/* About band colour sampled from the reference: #182432 */
.about-symtrade{background:#182432;border-top:1px solid rgba(239,245,247,.10);border-bottom:1px solid rgba(239,245,247,.10)}
.about-copy{color:#c3d1db}
.about-stats span{color:#e3ebf1}
.people{background:#e8eef3;color:var(--ink);padding:clamp(78px,10vw,125px) 0;border-top:1px solid rgba(6,17,31,.12)}
.people-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:center}
.people-photo{position:relative;aspect-ratio:4/5;background:url("img/people-team.jpg") center/cover no-repeat;border:1px solid rgba(6,17,31,.12);box-shadow:0 30px 60px -40px rgba(6,17,31,.55)}
.people-copy .eyebrow{margin-bottom:18px}
.people h2{font-family:var(--serif);font-weight:300;font-size:clamp(38px,4.6vw,64px);line-height:.94;letter-spacing:-.035em;margin:0 0 26px;color:var(--ink)}
.people h2 em{color:#5ba7e8;font-weight:300}
.people-lede{max-width:520px;font-size:15px;line-height:1.8;color:#39505f;margin:0 0 16px}
.people-list{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid rgba(6,17,31,.14)}
.people-list li{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(6,17,31,.1);font-size:12px;letter-spacing:.03em}
.people-list li span:first-child{font-weight:500}
.people-list li span:last-child{color:#5f7686;text-align:right}
@media(max-width:820px){.people-grid{grid-template-columns:1fr;gap:34px}.people-photo{aspect-ratio:5/4}}
@media(max-width:650px){.people-list li{flex-direction:column;gap:4px}.people-list li span:last-child{text-align:left}}

/* About block: slightly larger type (+12%) */
.about-symtrade h2{font-size:clamp(36px,3.9vw,54px)}
.about-copy{font-size:16px;line-height:1.72}
.about-stats strong{font-size:clamp(35px,3.8vw,52px)}
.about-stats span{font-size:15px}
.about-note{font-size:9px}
@media(max-width:650px){
  .about-symtrade h2{font-size:clamp(30px,8.4vw,42px)}
  .about-copy{font-size:15px}
  .about-stats strong{font-size:clamp(32px,9vw,44px)}
  .about-stats span{font-size:14px}
}

/* About block: another step larger */
.about-symtrade h2{font-size:clamp(39px,4.2vw,59px)}
.about-copy{font-size:17px;line-height:1.7}
.about-stats strong{font-size:clamp(38px,4.1vw,57px)}
.about-stats span{font-size:16px}
.about-note{font-size:10px}
@media(max-width:650px){
  .about-symtrade h2{font-size:clamp(32px,8.8vw,45px)}
  .about-copy{font-size:16px}
  .about-stats strong{font-size:clamp(34px,9.4vw,48px)}
  .about-stats span{font-size:15px}
}

/* green figure for the return stat */
.about-stats strong.is-up{color:#63d59a}

/* smooth hand-over: the photo itself dissolves into the next section (no colour band) */
.hero-slide .hero-art{
  -webkit-mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.92) 62%,rgba(0,0,0,.72) 74%,rgba(0,0,0,.42) 85%,rgba(0,0,0,.16) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.92) 62%,rgba(0,0,0,.72) 74%,rgba(0,0,0,.42) 85%,rgba(0,0,0,.16) 94%,transparent 100%);
}
.about-symtrade{margin-top:0;padding-top:clamp(63px,8.1vw,101px);background:#182432}
@media(max-width:650px){.about-symtrade{padding-top:63px}}

/* taller hero + stronger dissolve into the next section */
.hero{min-height:62svh}
.hero-slide .hero-art{
  -webkit-mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.90) 54%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.30) 82%,rgba(0,0,0,.08) 93%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.90) 54%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.30) 82%,rgba(0,0,0,.08) 93%,transparent 100%);
}
@media(max-width:850px){.hero{min-height:69svh}}

/* remove the hairline at the hero/section seam */
.slider-progress{display:none}
.about-symtrade{border-top:0!important}

/* lift the About block so the stat row lands above the fold on load */
.about-symtrade{padding-top:clamp(34px,4.6vw,56px)}
.about-symtrade h2{margin:0 0 16px}
.about-copy{line-height:1.6}
.about-stats{margin-top:28px}
@media(max-width:650px){.about-symtrade{padding-top:40px}.about-stats{margin-top:24px}}

/* flat hand-over: mask is fully transparent from 96%, shade reaches #182432 by the edge */
.hero-slide .hero-art{
  -webkit-mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.90) 54%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.30) 82%,rgba(0,0,0,.10) 92%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.90) 54%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.30) 82%,rgba(0,0,0,.10) 92%,transparent 96%);
}
.hero-slide .hero-shade{background:
  linear-gradient(90deg,rgba(6,17,31,.95) 0%,rgba(6,17,31,.84) 32%,rgba(6,17,31,.48) 64%,rgba(6,17,31,.22) 100%),
  linear-gradient(180deg,rgba(6,17,31,.50) 0%,rgba(6,17,31,.06) 30%,rgba(24,36,50,.30) 70%,rgba(24,36,50,.45) 88%,rgba(24,36,50,.55) 100%)}

/* the gradient used to be layered wrong: the dark horizontal veil sat on top, so the
   bottom of the hero ended up far darker than #182432. Vertical layer first = opaque. */
.hero-slide .hero-shade{background:
  linear-gradient(180deg,
    rgba(6,17,31,.50) 0%,
    rgba(6,17,31,.06) 30%,
    rgba(24,36,50,.28) 58%,
    rgba(24,36,50,.62) 74%,
    #182432 87%,
    #182432 100%),
  linear-gradient(90deg,
    rgba(6,17,31,.95) 0%,
    rgba(6,17,31,.84) 32%,
    rgba(6,17,31,.48) 64%,
    rgba(6,17,31,.22) 100%)}

/* show more photo: fade starts later and only turns solid in the last 4% */
.hero-slide .hero-art{
  -webkit-mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.94) 58%,rgba(0,0,0,.78) 70%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.30) 89%,rgba(0,0,0,.12) 95%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.94) 58%,rgba(0,0,0,.78) 70%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.30) 89%,rgba(0,0,0,.12) 95%,transparent 99%);
}
.hero-slide .hero-shade{background:
  linear-gradient(180deg,
    rgba(6,17,31,.50) 0%,
    rgba(6,17,31,.06) 30%,
    rgba(24,36,50,.14) 58%,
    rgba(24,36,50,.30) 72%,
    rgba(24,36,50,.55) 84%,
    rgba(24,36,50,.80) 92%,
    #182432 96%,
    #182432 100%),
  linear-gradient(90deg,
    rgba(6,17,31,.95) 0%,
    rgba(6,17,31,.84) 32%,
    rgba(6,17,31,.48) 64%,
    rgba(6,17,31,.22) 100%)}

/* lighter right-hand side: the horizontal veil now falls away much faster */
.hero-slide .hero-shade{background:
  linear-gradient(180deg,
    rgba(6,17,31,.50) 0%,
    rgba(6,17,31,.06) 30%,
    rgba(24,36,50,.14) 58%,
    rgba(24,36,50,.30) 72%,
    rgba(24,36,50,.55) 84%,
    rgba(24,36,50,.80) 92%,
    #182432 96%,
    #182432 100%),
  linear-gradient(90deg,
    rgba(6,17,31,.92) 0%,
    rgba(6,17,31,.72) 26%,
    rgba(6,17,31,.34) 50%,
    rgba(6,17,31,.10) 72%,
    rgba(6,17,31,.03) 100%)}

/* hero a step larger overall */
.hero{min-height:68svh}
@media(max-width:850px){.hero{min-height:76svh}}

/* hero grew 60px, so the band content comes up the same amount */
.about-symtrade{padding-top:clamp(12px,1.8vw,22px)}
.about-symtrade h2{margin:0 0 10px}
.about-copy{line-height:1.5}
.about-stats{margin-top:18px}
@media(max-width:650px){.about-symtrade{padding-top:18px}.about-stats{margin-top:16px}}

/* access request form */
.access-form{margin-top:26px;max-width:620px}
.access-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.access-form label{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,245,247,.55);margin:0 0 14px}
.access-form input,.access-form select,.access-form textarea{
  display:block;width:100%;margin-top:7px;padding:11px 12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(239,245,247,.18);color:var(--ivory);font-family:inherit;font-size:14px;
  border-radius:2px;transition:border-color .2s,background .2s}
.access-form input:focus,.access-form select:focus,.access-form textarea:focus{
  outline:none;border-color:var(--brass);background:rgba(91,167,232,.06)}
.access-form textarea{resize:vertical;min-height:96px}
.access-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(239,245,247,.55) 50%),linear-gradient(135deg,rgba(239,245,247,.55) 50%,transparent 50%);
  background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.access-form select option{background:#182432;color:var(--ivory)}
.access-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.access-form .button{width:auto;margin-top:6px}
.form-note{margin:14px 0 0;font-size:11px;color:rgba(239,245,247,.45);letter-spacing:.02em}
.form-note a{color:var(--brass);text-decoration:none}
.form-status{margin:14px 0 0;font-size:13px;padding:10px 12px;border-radius:2px}
.form-status.ok{background:rgba(99,213,154,.10);border:1px solid rgba(99,213,154,.4);color:#9ff0c4}
.form-status.err{background:rgba(220,38,38,.10);border:1px solid rgba(220,38,38,.4);color:#fca5a5}
@media(max-width:650px){.access-form .form-row{grid-template-columns:1fr}.access-form .button{width:100%}}

/* short intro above the contact form */
.access-intro{margin:0 0 20px;max-width:540px;font-size:14px;line-height:1.65;color:rgba(239,245,247,.62)}

/* intro sits under the heading in the left column */
.access-lead h2{margin:0 0 18px}
.access-lead .access-intro{margin:0;max-width:420px}

/* contact block: sits higher, more air between heading and intro */
.access{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(90px,12vw,150px)}
.access-lead h2{margin:0 0 34px}
@media(max-width:650px){.access{padding-top:44px}.access-lead h2{margin:0 0 26px}}

/* contact block: higher still, more air under the heading */
.access{padding-top:clamp(24px,3.2vw,40px)}
.access-lead h2{margin:0 0 58px}
@media(max-width:650px){.access{padding-top:20px}.access-lead h2{margin:0 0 38px}}

/* both contact text blocks a little higher again (gap between them unchanged) */
.access{padding-top:clamp(6px,1vw,14px)}
@media(max-width:650px){.access{padding-top:6px}}

/* align the text column with the top of the form (was bottom-aligned) */
.access-row{align-items:start}

/* contact text a bit lower again */
.access{padding-top:clamp(30px,4vw,52px)}
@media(max-width:650px){.access{padding-top:26px}}