:root{
    --white:#FFFFFF;
    --page:#FAFBFC;
    --tint:#EDF2F8;
    --tint-warm:#FBF4E4;
    --line:#DEE4EC;
    --line-soft:#EBF0F6;
    --ink:#14243A;
    --body:#4B5A6B;
    --muted:#76869A;
    --navy:#0B2E56;
    --navy-deep:#06203E;
    --gold:#A87020;
    --gold-soft:#C9A24A;
    --radius:12px;
    --radius-sm:8px;
    --shadow-sm:0 1px 2px rgba(11,46,86,.06);
    --shadow:0 2px 4px rgba(11,46,86,.05), 0 12px 28px -18px rgba(11,46,86,.40);
    --measure:62ch;
    --s--1:.875rem;
    --s-0:clamp(1rem,.98rem + .1vw,1.06rem);
    --s-1:clamp(1.12rem,1.07rem + .24vw,1.28rem);
    --s-2:clamp(1.4rem,1.3rem + .5vw,1.75rem);
    --s-3:clamp(1.75rem,1.55rem + .95vw,2.5rem);
    --s-4:clamp(2.1rem,1.7rem + 1.9vw,3.4rem);
  }

  *{box-sizing:border-box;}
  body{
    margin:0;background:var(--page);color:var(--body);
    font-family:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
    font-size:var(--s-0);line-height:1.65;-webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
    color:var(--ink);font-weight:600;margin:0;line-height:1.15;text-wrap:balance;
  }
  p{margin:0;}
  a{color:inherit;}
  img{max-width:100%;display:block;}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

  .wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto;}
  .eyebrow{
    font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--gold);margin:0 0 .6rem;
  }
  .lede{font-size:var(--s-1);color:var(--body);max-width:var(--measure);}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-family:inherit;font-size:var(--s-0);font-weight:600;
    padding:.72rem 1.35rem;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;
    border:1px solid var(--navy);background:var(--navy);color:#FFFFFF;
    transition:background .16s ease,border-color .16s ease,color .16s ease;
  }
  .btn:hover{background:var(--navy-deep);border-color:var(--navy-deep);}
  .btn-alt{background:var(--white);color:var(--navy);border-color:var(--line);}
  .btn-alt:hover{background:var(--white);color:var(--navy-deep);border-color:var(--navy);}
  .btn-gold{background:var(--gold);border-color:var(--gold);color:#FFFFFF;}
  .btn-gold:hover{background:#8A5C16;border-color:#8A5C16;}

  /* ---------- photo slots ---------- */
  .photo{position:relative;background:var(--tint);overflow:hidden;border-radius:var(--radius);}
  .photo img{width:100%;height:100%;object-fit:cover;}
  .photo .fallback{
    position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
    gap:.35rem;text-align:center;padding:1rem;background:var(--tint);
    border:1px dashed #C2CEDC;border-radius:var(--radius);
  }
  .photo.missing .fallback{display:flex;}
  .photo.missing img{visibility:hidden;}
  .fallback .fname{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:var(--navy);font-weight:600;}
  .fallback .fsize{font-size:.74rem;color:var(--muted);letter-spacing:.04em;}
  .fallback svg{width:26px;height:26px;color:#9FB2C6;}

  /* ---------- header ---------- */
  header.top{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;}
  .top-in{display:flex;align-items:center;gap:1.25rem;padding:.8rem 0;}
  .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-right:auto;}
  .brand .logo{height:44px;width:auto;flex:none;}
  @media (max-width:600px){ .brand .logo{height:36px;} }
  .brand-name{font-family:"Source Serif 4",Georgia,serif;font-size:1.22rem;font-weight:600;color:var(--ink);line-height:1.05;}
  .brand-sub{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.2rem;}
  nav.main{display:flex;gap:1.5rem;}
  nav.main a{text-decoration:none;font-weight:500;color:var(--body);font-size:.95rem;padding-bottom:2px;border-bottom:2px solid transparent;}
  nav.main a:hover{color:var(--navy);border-bottom-color:var(--gold-soft);}
  .callbtn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;color:var(--navy);white-space:nowrap;letter-spacing:.01em;}
  .callbtn:hover{color:var(--gold);}
  .callbtn svg{width:17px;height:17px;}
  @media (max-width:900px){ nav.main{display:none;} }
  @media (max-width:520px){ .callbtn span.lbl{display:none;} }

  /* ---------- hero ---------- */
  .hero{background:var(--white);border-bottom:1px solid var(--line);}
  .hero-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2.5rem,6vw,4.5rem) 0;}
  .hero h1{font-size:var(--s-4);}
  .hero .lede{margin-top:1.25rem;font-size:var(--s-1);}
  .hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;}
  .hero-photo{aspect-ratio:4/3;box-shadow:var(--shadow);}
  .servicing{margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);font-size:.9rem;color:var(--muted);}
  .servicing strong{color:var(--ink);font-weight:600;}
  @media (max-width:880px){ .hero-in{grid-template-columns:1fr;} .hero-photo{aspect-ratio:16/10;} }

  /* ---------- trust bar ---------- */
  .trust{background:var(--tint);border-bottom:1px solid var(--line);}
  .trust-in{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2.2rem 0;}
  .trust-item{display:flex;gap:.9rem;align-items:flex-start;}
  .trust-item svg{width:24px;height:24px;flex:none;color:var(--navy);margin-top:.2rem;}
  .trust-item h3{font-size:1.06rem;margin-bottom:.2rem;}
  .trust-item p{font-size:.92rem;color:var(--body);}
  @media (max-width:820px){ .trust-in{grid-template-columns:1fr;gap:1.3rem;} }

  /* ---------- sections ---------- */
  section{scroll-margin-top:78px;}
  .band{padding:clamp(3rem,6.5vw,5rem) 0;}
  .band-white{background:var(--white);border-block:1px solid var(--line);}
  .band-tint{background:var(--tint);border-block:1px solid var(--line);}
  .head{max-width:var(--measure);margin-bottom:2.4rem;}
  .head h2{font-size:var(--s-3);}
  .head p{margin-top:.9rem;color:var(--body);font-size:var(--s-1);}

  /* ---------- listings ---------- */
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.4rem;}
  .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
  .card .photo{border-radius:0;aspect-ratio:4/3;}
  .card .photo .fallback{border:0;border-bottom:1px solid var(--line);border-radius:0;}
  .card-in{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;}
  .status{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--tint);border-radius:99px;padding:.2rem .65rem;margin-bottom:.35rem;}
  .price{font-family:"Source Serif 4",Georgia,serif;font-size:var(--s-2);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
  .addr{font-weight:600;color:var(--ink);}
  .facts{font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums;}
  .empty{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:clamp(2.2rem,5vw,3.2rem);text-align:center;display:flex;flex-direction:column;align-items:center;gap:.9rem;
  }
  .empty h3{font-size:var(--s-2);}
  .empty p{color:var(--body);max-width:48ch;}

  /* ---------- split blocks ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
  .split.flip .split-media{order:-1;}
  .split-media{aspect-ratio:5/4;box-shadow:var(--shadow);}
  @media (max-width:880px){ .split{grid-template-columns:1fr;} .split.flip .split-media{order:0;} }

  .steps{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.05rem;}
  .steps li{display:grid;grid-template-columns:1.65rem 1fr;gap:.9rem;align-items:start;}
  .steps li svg{width:1.65rem;height:1.65rem;color:var(--navy);margin-top:.1rem;}
  .steps strong{display:block;color:var(--ink);font-weight:600;}
  .steps span{font-size:.94rem;color:var(--body);}

  /* ---------- team ---------- */
  .people{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.5rem;}
  .officemark{width:92px;height:92px;flex:none;border-radius:50%;background:var(--tint);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;}
  .officemark svg{width:42px;height:42px;color:var(--navy);}
  .person.office .foot{display:block;}
  .person.office .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.9rem;}
  .person.office .k:first-child{margin-top:0;}
  .person.office .v{font-size:.98rem;color:var(--ink);font-weight:600;}
  .person.office .v a{color:var(--navy);text-decoration:none;}
  .person.office .v a:hover{text-decoration:underline;}
  .person{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
  .person-top{display:flex;gap:1.1rem;align-items:center;margin-bottom:1.1rem;}
  .person-bio{font-size:.95rem;color:var(--body);}
  .person-bio + .person-bio{margin-top:.7rem;}
  .person .foot{margin-top:auto;padding-top:1.1rem;}
  .person .photo{width:92px;height:92px;flex:none;border-radius:50%;}
  .person .photo .fallback{border-radius:50%;}
  .person h3{font-size:1.28rem;}
  .role{font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gold);margin:.3rem 0 .65rem;}
  .person p{font-size:.94rem;}
  .person .lic{margin-top:.7rem;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;}
  .person .links{margin-top:.8rem;display:flex;gap:1rem;font-size:.9rem;font-weight:600;}
  .person .links a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line);}
  .person .links a:hover{border-bottom-color:var(--navy);}

  .slot{display:inline-block;border:1px dashed var(--gold-soft);background:var(--tint-warm);color:var(--gold);
    padding:.05em .5em;border-radius:5px;font-size:.85em;font-weight:600;white-space:nowrap;}

  /* ---------- drawn panels (stand in for photography) ---------- */
  .artpanel{
    position:relative;background:var(--white);border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  }
  .artpanel .art{flex:1;min-height:0;width:100%;height:100%;display:block;}
  .artpanel figcaption{
    flex:none;border-top:1px solid var(--line-soft);background:var(--page);
    padding:.72rem 1rem;font-size:.82rem;color:var(--muted);text-align:center;line-height:1.5;
  }
  .artpanel figcaption strong{color:var(--ink);font-weight:600;}
  figure.artpanel{margin:0;}

  /* ---------- monogram (stands in for a headshot) ---------- */
  .monogram{
    width:92px;height:92px;flex:none;border-radius:50%;
    background:linear-gradient(160deg,#143A66 0%,var(--navy) 55%,var(--navy-deep) 100%);
    border:2px solid var(--gold-soft);
    display:flex;align-items:center;justify-content:center;
    font-family:"Source Serif 4",Georgia,serif;font-size:1.85rem;font-weight:600;
    color:var(--gold-soft);letter-spacing:.04em;text-indent:.04em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  }

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
  .contact-grid > *{min-width:0;}
  .field select,.field input,.field textarea{min-width:0;max-width:100%;}
  @media (max-width:880px){ .contact-grid{grid-template-columns:1fr;} }
  .details{display:flex;flex-direction:column;gap:1.4rem;margin-top:2rem;}
  .details .row{display:flex;gap:.9rem;align-items:flex-start;}
  .details svg{width:20px;height:20px;color:var(--navy);flex:none;margin-top:.35rem;}
  .details .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
  .details .v{font-size:var(--s-1);color:var(--ink);font-weight:600;}
  .details a{color:var(--navy);text-decoration:none;}
  .details a:hover{text-decoration:underline;}

  form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;display:grid;gap:1rem;box-shadow:var(--shadow-sm);}
  .field{display:flex;flex-direction:column;gap:.35rem;}
  .field label{font-size:.82rem;font-weight:600;color:var(--ink);}
  .field input,.field select,.field textarea{
    font-family:inherit;font-size:var(--s-0);color:var(--ink);background:var(--white);
    border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .8rem;
  }
  .field input:hover,.field select:hover,.field textarea:hover{border-color:#C3CFDC;}
  .field textarea{resize:vertical;min-height:110px;}
  .field ::placeholder{color:#93A2B4;}
  .two-up{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
  @media (max-width:520px){ .two-up{grid-template-columns:1fr;} }
  form .btn{width:100%;}
  .formnote{font-size:.84rem;color:var(--muted);text-align:center;}

  /* ---------- footer ---------- */
  footer{background:var(--white);border-top:1px solid var(--line);padding:2.8rem 0 3.2rem;font-size:.9rem;color:var(--muted);}
  .foot{display:flex;flex-wrap:wrap;gap:1.6rem 3rem;justify-content:space-between;}
  .foot .col{display:flex;flex-direction:column;gap:.5rem;max-width:46ch;}
  .foot strong{color:var(--ink);font-size:var(--s-0);font-weight:700;}
  .eho{display:flex;align-items:center;gap:.55rem;margin-top:.3rem;}
  .eho svg{width:20px;height:20px;color:var(--muted);flex:none;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }


/* ==================================================================
   ADDITIONS FOR THE LAUNCH BUILD - search, find page, listing detail
   ================================================================== */

/* ---------- utility ---------- */
.center{text-align:center;}
.stack{display:flex;flex-direction:column;gap:1rem;}
.rowwrap{display:flex;flex-wrap:wrap;gap:.6rem;}
.hide{display:none !important;}
.tabnum{font-variant-numeric:tabular-nums;}

/* ---------- the search bar ---------- */
.searchbox{position:relative;display:flex;gap:.6rem;flex-wrap:wrap;}
.searchbox .fieldwrap{position:relative;flex:1 1 260px;min-width:0;}
.searchbox input[type="search"],
.searchbox input[type="text"]{
  width:100%;font-family:inherit;font-size:1.06rem;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.95rem 1rem .95rem 2.9rem;box-shadow:var(--shadow-sm);
  -webkit-appearance:none;appearance:none;
}
.searchbox input::placeholder{color:#94A3B4;}
.searchbox input:focus{border-color:var(--navy);outline:2px solid var(--gold);outline-offset:2px;}
.searchbox .ico{
  position:absolute;left:.95rem;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--muted);pointer-events:none;
}
.searchbox .btn{flex:0 0 auto;padding-inline:1.6rem;}
.searchhint{margin-top:.7rem;font-size:.88rem;color:var(--muted);}
.searchhint a{color:var(--navy);font-weight:600;}

/* the location button */
.geobtn{
  display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;padding:0;
  font-family:inherit;font-size:.92rem;font-weight:600;color:var(--navy);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-soft);
}
.geobtn svg{width:16px;height:16px;}
.geobtn:hover{color:var(--gold);}
.geobtn[disabled]{opacity:.55;cursor:default;}

/* suggestions */
.suggest{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + .35rem);
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);overflow:hidden;
}
.suggest button{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.96rem;color:var(--ink);padding:.7rem .95rem;
  border-bottom:1px solid var(--line-soft);
}
.suggest button:last-child{border-bottom:0;}
.suggest button:hover,.suggest button[aria-selected="true"]{background:var(--tint);}
.suggest .s2{display:block;font-size:.82rem;color:var(--muted);}

/* ---------- the FIND page ---------- */
.find{
  background:linear-gradient(165deg,#0E3563 0%,var(--navy) 45%,var(--navy-deep) 100%);
  color:#E7EDF5;min-height:100svh;display:flex;flex-direction:column;
}
.find a{color:#E7EDF5;}
.find-top{padding:1.2rem 0 .4rem;}
.find-top img{height:50px;width:auto;margin-inline:auto;}
.find-main{flex:1;padding:1.6rem 0 3rem;}
.find h1{color:#FFFFFF;font-size:clamp(1.7rem,1.3rem + 2vw,2.5rem);}
.find .sub{color:#B7C7DA;margin-top:.7rem;font-size:var(--s-1);max-width:46ch;}
.find .panel{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:clamp(1.1rem,3vw,1.8rem);margin-top:1.8rem;
  backdrop-filter:blur(2px);
}
.find .geobtn{color:var(--gold-soft);text-decoration-color:rgba(201,162,74,.5);}
.find .geobtn:hover{color:#E3C782;}
.find .searchhint{color:#9FB4CD;}
.find .searchhint a{color:var(--gold-soft);}
.find-foot{
  border-top:1px solid rgba(255,255,255,.12);padding:1.3rem 0 1.8rem;
  font-size:.86rem;color:#9FB4CD;
}
.find-foot .big{
  display:inline-flex;align-items:center;gap:.55rem;color:#FFFFFF;
  font-size:var(--s-1);font-weight:700;text-decoration:none;
}
.find-foot .big svg{width:18px;height:18px;color:var(--gold-soft);}

/* results, phone first */
.results{display:flex;flex-direction:column;gap:.85rem;margin-top:1.5rem;}
.result{
  display:grid;grid-template-columns:104px 1fr;gap:1rem;align-items:stretch;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .12s ease;
}
.result:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.result .thumb{background:var(--tint);position:relative;}
.result .thumb img{width:100%;height:100%;object-fit:cover;}
.result .thumb .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#143A66,var(--navy-deep));color:var(--gold-soft);
}
.result .thumb .ph svg{width:30px;height:30px;}
.result .meta{padding:.85rem .95rem .9rem 0;display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.result .meta .p{font-family:"Source Serif 4",Georgia,serif;font-size:1.22rem;font-weight:700;color:var(--ink);}
.result .meta .a{font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
.result .meta .f{font-size:.88rem;color:var(--muted);}
.result .dist{
  align-self:flex-start;margin-top:.3rem;font-size:.74rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#1B5E20;background:#E6F3E7;border-radius:99px;padding:.15rem .6rem;
}
.result .dist.far{color:var(--muted);background:var(--tint);}
@media (max-width:420px){ .result{grid-template-columns:86px 1fr;} }

.noresult{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;margin-top:1.5rem;color:var(--body);
}
.noresult h3{font-size:var(--s-2);margin-bottom:.5rem;}

/* ---------- listing cards get a link + badges ---------- */
a.card{text-decoration:none;color:inherit;display:block;transition:transform .12s ease,box-shadow .12s ease;}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.card .photo .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#143A66,var(--navy-deep));color:var(--gold-soft);
}
.card .photo .ph svg{width:44px;height:44px;}
.status.sold{color:#7A1F1F;background:#FBEAEA;}
.status.contract,.status.pending{color:#7A5310;background:#FBF2DF;}
.status.coming{color:#14507A;background:#E4F0F8;}

/* ---------- filter pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0;}
.pill{
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--body);
  background:var(--white);border:1px solid var(--line);border-radius:99px;
  padding:.42rem .95rem;cursor:pointer;
}
.pill[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#FFFFFF;}
.countline{margin-top:1.2rem;font-size:.9rem;color:var(--muted);}

/* ---------- listing detail ---------- */
.crumbs{font-size:.86rem;color:var(--muted);padding:1rem 0 0;}
.crumbs a{color:var(--navy);text-decoration:none;font-weight:600;}
.crumbs a:hover{text-decoration:underline;}

.detail-head{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-end;margin:.9rem 0 1.4rem;}
.detail-head h1{font-size:var(--s-3);}
.detail-head .city{color:var(--muted);margin-top:.35rem;}
.detail-price{font-family:"Source Serif 4",Georgia,serif;font-size:var(--s-3);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.detail-price .per{display:block;font-family:inherit;font-size:.85rem;font-weight:500;color:var(--muted);text-align:right;}

.gallery{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:1fr;gap:.6rem;}
.gallery .g{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--tint);aspect-ratio:4/3;}
.gallery .g:first-child{grid-row:span 2;aspect-ratio:auto;}
.gallery .g img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.gallery .g .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#143A66,var(--navy-deep));color:var(--gold-soft);}
.gallery .g .ph svg{width:64px;height:64px;}
.gallery .more{
  position:absolute;right:.6rem;bottom:.6rem;background:rgba(6,32,62,.85);color:#FFFFFF;
  font-size:.8rem;font-weight:600;border-radius:99px;padding:.3rem .8rem;
}
@media (max-width:760px){ .gallery{grid-template-columns:1fr;} .gallery .g:first-child{grid-row:auto;aspect-ratio:4/3;} .gallery .g:nth-child(n+4){display:none;} }

.lightbox{position:fixed;inset:0;z-index:90;background:rgba(6,32,62,.94);display:flex;align-items:center;justify-content:center;padding:1rem;}
.lightbox img{max-width:100%;max-height:88svh;object-fit:contain;border-radius:8px;}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#FFFFFF;font-size:1.6rem;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer;}
.lightbox .lb-close{top:1rem;right:1rem;}
.lightbox .lb-prev{left:1rem;}
.lightbox .lb-next{right:1rem;}

.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.6rem,4vw,3rem);margin-top:2.2rem;align-items:start;}
@media (max-width:880px){ .detail-grid{grid-template-columns:1fr;} }

.specs{display:flex;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.specs div{flex:1 1 120px;padding:.95rem 1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0;}
.specs .k{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.specs .v{font-size:1.1rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:.15rem;}

.prose{max-width:var(--measure);margin-top:1.8rem;}
.prose h2{font-size:var(--s-2);margin-bottom:.7rem;}
.prose p + p{margin-top:.8rem;}
.featlist{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.5rem .9rem;}
.featlist li{display:flex;gap:.5rem;align-items:flex-start;font-size:.95rem;}
.featlist li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:.62rem;}

.sidecard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);position:sticky;top:92px;}
.sidecard h3{font-size:var(--s-2);}
.sidecard .who{display:flex;gap:.85rem;align-items:center;margin:1.1rem 0;}
.sidecard .who .monogram{width:56px;height:56px;font-size:1.15rem;}
.sidecard .who .nm{font-weight:700;color:var(--ink);}
.sidecard .who .rl{font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gold);}
.sidecard form{border:0;padding:0;box-shadow:none;background:none;}
.sidecard .btn{width:100%;}

.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:.6rem;
  background:var(--white);border-top:1px solid var(--line);padding:.7rem 1rem;
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 18px -12px rgba(11,46,86,.4);
}
.stickycta .btn{flex:1;}
@media (max-width:880px){ .stickycta{display:flex;} body.has-cta{padding-bottom:5rem;} .sidecard{position:static;} }

/* ---------- map link ---------- */
.maplink{
  display:flex;gap:.7rem;align-items:center;margin-top:1.3rem;padding:.9rem 1rem;
  background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;
}
.maplink svg{width:20px;height:20px;color:var(--navy);flex:none;}
.maplink:hover{border-color:var(--navy);}

/* ---------- footer extras ---------- */
.foot .quick{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;}
.foot .quick a{color:var(--navy);text-decoration:none;font-weight:600;}
.foot .quick a:hover{text-decoration:underline;}

/* ---------- toast / form states ---------- */
.formnote.ok{color:#1B5E20;font-weight:600;}
.formnote.err{color:#8A1F1F;font-weight:600;}

/* the search form must not inherit the page's boxed form styling */
form.searchbox{background:none;border:0;padding:0;box-shadow:none;display:flex;}
form.searchbox .btn{width:auto;}

/* white cards sitting on the navy find page keep their own text colour */
.find .noresult a{color:var(--navy);}
.find .noresult a.btn{color:#FFFFFF;}
.find .noresult a.btn-alt{color:var(--navy);}
.find .noresult .field label{color:var(--ink);}

/* team headshots */
.person img.photo{object-fit:cover;object-position:50% 28%;border:2px solid var(--gold-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 8px -4px rgba(11,46,86,.45);background:var(--navy);}


/* ==================================================================
   LIGHT / DARK  +  MOBILE PASS                         15 Sep 2026
   Dark values are attached to :root[data-theme="dark"]. The inline
   script in each <head> sets that attribute before first paint, so
   there is no white flash. A visitor who has never touched the
   switch follows their phone or laptop setting.
   ================================================================== */

:root{ color-scheme:light; }

:root[data-theme="dark"]{
  color-scheme:dark;
  --white:#132335;
  --page:#0C1826;
  --tint:#1A2C41;
  --tint-warm:#2A2416;
  --line:#294056;
  --line-soft:#213448;
  --ink:#EDF3F9;
  --body:#B3C4D6;
  --muted:#8A9CB0;
  --navy:#2F72B4;
  --navy-deep:#27608F;
  --gold:#C9A24A;
  --gold-soft:#E0C078;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 2px 4px rgba(0,0,0,.30), 0 14px 30px -18px rgba(0,0,0,.75);
}

/* things that carry a hard-coded colour and have to be told twice */
:root[data-theme="dark"] .btn-alt{background:transparent;color:var(--ink);border-color:var(--line);}
:root[data-theme="dark"] .btn-alt:hover{background:var(--tint);color:#FFFFFF;border-color:var(--navy);}
:root[data-theme="dark"] .photo .fallback{border-color:#33506C;}
:root[data-theme="dark"] .field ::placeholder,
:root[data-theme="dark"] .searchbox input::placeholder{color:#7C8FA5;}
:root[data-theme="dark"] .field input:hover,
:root[data-theme="dark"] .field select:hover,
:root[data-theme="dark"] .field textarea:hover{border-color:#39587A;}
:root[data-theme="dark"] .result .dist{color:#9FE0A6;background:rgba(46,125,50,.20);}
:root[data-theme="dark"] .result .dist.far{color:var(--muted);background:var(--tint);}
:root[data-theme="dark"] .suggest button:hover{background:var(--tint);}

/* the drawn panels are ink-on-paper art, so they keep a paper surface
   in dark mode instead of being inverted into mush */
:root[data-theme="dark"] .artpanel{background:#EEF3F9;border-color:#33506C;}
:root[data-theme="dark"] .artpanel figcaption{background:#E2EAF3;border-top-color:#CFDCEA;color:#5A6B80;}
:root[data-theme="dark"] .artpanel figcaption strong{color:#14243A;}

/* the header wordmark is navy, so dark mode uses the reversed file */
.logo-dark{display:none;}
:root[data-theme="dark"] .logo-light{display:none;}
:root[data-theme="dark"] .logo-dark{display:block;}

/* ---------- the light / dark switch ---------- */
.themebtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:999px;cursor:pointer;
  background:var(--white);border:1px solid var(--line);color:var(--navy);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.themebtn:hover{background:var(--tint);color:var(--gold);}
.themebtn svg{width:19px;height:19px;}
.themebtn .moon{display:none;}
:root[data-theme="dark"] .themebtn .moon{display:block;}
:root[data-theme="dark"] .themebtn .sun{display:none;}
.find .themebtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:var(--gold-soft);}
.find .themebtn:hover{background:rgba(255,255,255,.16);color:#F0DCA8;}

/* ---------- mobile navigation ---------- */
.menubtn{
  display:none;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:999px;cursor:pointer;
  background:var(--white);border:1px solid var(--line);color:var(--navy);
}
.menubtn svg{width:21px;height:21px;}
.menubtn .x{display:none;}
header.top.navopen .menubtn .x{display:block;}
header.top.navopen .menubtn .bars{display:none;}

@media (max-width:900px){
  .menubtn{display:inline-flex;}
  .top-in{gap:.6rem;}
  nav.main{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--white);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);padding:.4rem 0 .9rem;
  }
  header.top.navopen nav.main{display:flex;}
  nav.main a{
    padding:.95rem clamp(1.25rem,5vw,2rem);font-size:1.05rem;font-weight:600;
    color:var(--ink);border-bottom:1px solid var(--line-soft);border-left:3px solid transparent;
  }
  nav.main a:last-child{border-bottom:0;}
  nav.main a:hover{border-bottom-color:var(--line-soft);border-left-color:var(--gold);}
  header.top{position:sticky;}
}

/* ---------- phone pass ---------- */
@media (max-width:640px){
  .wrap{width:min(1160px,100% - 2rem);}
  .btn{padding:.85rem 1.2rem;}          /* thumb-sized, not mouse-sized */
  .hero-actions .btn{flex:1 1 100%;}
  .searchbox{gap:.55rem;}
  .searchbox .fieldwrap{flex:1 1 100%;}
  .searchbox .btn{flex:1 1 100%;width:100%;}
  form{padding:1.2rem;}
  .person{padding:1.25rem;}
  .people{gap:1.1rem;}
  .foot{gap:1.4rem;}
  .servicing{margin-top:1.4rem;padding-top:1.1rem;}
}

/* ---------- the FIND page on a phone: as few words as possible ---- */
@media (max-width:640px){
  .find-top{padding:.9rem 0 .2rem;}
  .find-top img{height:40px;}
  .find-main{padding:1.1rem 0 1.6rem;}
  .find h1{font-size:1.55rem;line-height:1.2;}
  .find .sub{font-size:1rem;margin-top:.5rem;}
  .find .panel{margin-top:1.1rem;padding:1rem;}
  .findonly{display:block;}
  .searchbox input[type="search"]{font-size:1.06rem;padding:1rem 1rem 1rem 2.9rem;}
  .find .searchhint{margin-top:.85rem;}
  .find .geobtn{font-size:1rem;}
  .results{gap:.7rem;margin-top:1.1rem;}
  .result .meta .p{font-size:1.12rem;}
  /* the phone bar pinned to the bottom of the find page */
  .find-foot{padding-bottom:5.4rem;}
  .find-foot .big{display:none;}
}
/* iOS zooms any field under 16px on focus, which throws the layout */
@media (max-width:900px){
  .field input,.field select,.field textarea,.searchbox input{font-size:16px;}
}

.findbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:.6rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(6,32,62,.96);border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
}
.findbar a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.85rem .6rem;border-radius:var(--radius-sm);text-decoration:none;
  font-weight:700;font-size:1rem;
}
.findbar a svg{width:17px;height:17px;}
.findbar .call{background:var(--gold);color:#FFFFFF;}
.findbar .text{background:rgba(255,255,255,.12);color:#FFFFFF;border:1px solid rgba(255,255,255,.22);}
@media (max-width:640px){ .findbar{display:flex;} }

/* find page header row: logo centred, switch on the right */
.find-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.find-top .spacer{width:40px;flex:none;}
.find-top a{display:block;}

/* team card contact block: everything typed out, nothing hidden
   behind the word "Email" */
.contactlist{list-style:none;margin:.85rem 0 0;padding:0;display:flex;flex-direction:column;gap:.42rem;}
.contactlist li{display:grid;grid-template-columns:4.1rem 1fr;gap:.6rem;align-items:baseline;font-size:.93rem;}
.contactlist .ck{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.contactlist a{color:var(--navy);text-decoration:none;font-weight:600;overflow-wrap:anywhere;justify-self:start;}
.contactlist a:hover{text-decoration:underline;text-underline-offset:3px;}
:root[data-theme="dark"] .contactlist a{color:var(--gold-soft);}
@media (max-width:400px){ .contactlist li{grid-template-columns:1fr;gap:0;} }

/* the page footer also uses .foot, and its flex row was leaking into
   the team cards and putting the licence number beside the numbers */
.person .foot{display:block;}
/* .head p was overriding the eyebrow colour, so section eyebrows were
   coming out grey instead of gold */
.head .eyebrow{color:var(--gold);font-size:.78rem;margin-top:0;}
:root[data-theme="dark"] .person.office .v a,
:root[data-theme="dark"] .details a,
:root[data-theme="dark"] .searchhint a,
:root[data-theme="dark"] .geobtn{color:var(--gold-soft);}


/* ==================================================================
   TYPE AND CONTROLS PASS                               15 Sep 2026
   Three real problems this fixes:
     1. The phone button in the header collapsed to a 17px icon on a
        phone. That is not a tap target, it is a dare. Everything you
        can press is now at least 44px.
     2. Headings were set in a plain book serif. Swapped to Fraunces,
        which is warmer and has some character to it, over Inter for
        body copy, which holds up far better at phone sizes.
     3. Tracking and line height were set for a paragraph in a book,
        not for a page somebody reads one-handed in a truck.
   ================================================================== */

:root{
  --font-display:"Fraunces","Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:"Inter","Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;

  /* a touch bigger across the board, and the big sizes step up harder
     so a headline actually lands on a phone */
  --s--1:.82rem;
  --s-0:clamp(1.05rem,1.01rem + .18vw,1.12rem);
  --s-1:clamp(1.18rem,1.11rem + .3vw,1.36rem);
  --s-2:clamp(1.45rem,1.32rem + .6vw,1.9rem);
  --s-3:clamp(1.9rem,1.62rem + 1.25vw,2.8rem);
  --s-4:clamp(2.35rem,1.85rem + 2.3vw,3.9rem);
}

body{
  font-family:var(--font-body);
  line-height:1.6;
  letter-spacing:-.002em;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  /* SOFT rounds the corners of the letterforms a little and WONK off
     keeps it from getting cute. This is the warm-but-serious dial. */
  font-variation-settings:"SOFT" 30,"WONK" 0;
  font-weight:600;
  letter-spacing:-.016em;
  line-height:1.12;
}
.hero h1{line-height:1.05;letter-spacing:-.024em;}
.head h2,.split h2{line-height:1.08;letter-spacing:-.02em;}
.lede{line-height:1.55;letter-spacing:-.006em;}
.head p{line-height:1.55;}
p{letter-spacing:-.002em;}

/* the all-caps labels were tracked so wide they wrapped */
.eyebrow{font-size:.74rem;letter-spacing:.1em;margin-bottom:.75rem;}
.head .eyebrow{font-size:.74rem;letter-spacing:.1em;}
.role{font-size:.72rem;letter-spacing:.09em;}
.contactlist .ck,.person.office .k,.details .k{letter-spacing:.1em;}

/* numbers line up in columns */
.price,.facts,.contactlist,.details .v,.lic{font-variant-numeric:tabular-nums;}

/* ---------- controls you can actually hit ---------- */
.btn{
  min-height:52px;padding:.8rem 1.5rem;border-radius:10px;
  font-weight:600;letter-spacing:-.004em;font-size:1.02rem;
  box-shadow:0 1px 2px rgba(11,46,86,.10);
}
.btn:active{transform:translateY(1px);}
.btn-alt{box-shadow:none;}

/* the header phone number. It used to shrink to just the icon at
   520px, which left a 17px target. Now it is a pill you can hit. */
.callbtn{
  min-height:44px;padding:.45rem 1rem;border-radius:999px;
  border:1px solid var(--line);background:var(--white);
  justify-content:center;
}
.callbtn:hover{background:var(--tint);color:var(--navy);}
.callbtn svg{width:18px;height:18px;flex:none;}
@media (max-width:560px){
  .callbtn{width:44px;padding:0;}
  .callbtn span.lbl{display:none;}
}
.themebtn,.menubtn{width:44px;height:44px;}
.themebtn svg,.menubtn svg{width:20px;height:20px;}
.top-in{gap:.5rem;padding:.7rem 0;}
.brand{margin-right:auto;}

/* the location link was a thin underlined string of text */
.geobtn{
  min-height:44px;padding:.35rem 0;font-size:.98rem;
  text-decoration-thickness:1.5px;text-underline-offset:4px;
}

/* form fields, roomier */
.field input,.field select,.field textarea{padding:.85rem .95rem;border-radius:10px;}
.searchbox input[type="search"],.searchbox input[type="text"]{
  border-radius:10px;padding:1.05rem 1rem 1.05rem 3rem;
}
.searchbox .ico{width:21px;height:21px;left:1rem;}

/* in dark mode the primary button was landing on a flat generic blue.
   Gold on navy is the brand and it reads as a button from across the
   room. */
:root[data-theme="dark"] .btn{background:var(--gold);border-color:var(--gold);color:#10202F;}
:root[data-theme="dark"] .btn:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:#10202F;}
:root[data-theme="dark"] .btn-alt{background:transparent;color:var(--ink);border-color:#3A587A;}
:root[data-theme="dark"] .btn-alt:hover{background:var(--tint);color:#FFFFFF;border-color:var(--gold-soft);}
:root[data-theme="dark"] .btn-gold{background:var(--gold);border-color:var(--gold);color:#10202F;}

/* more air between blocks on a phone, which is where it felt cramped */
@media (max-width:640px){
  .hero-in{padding:2.2rem 0 2.6rem;gap:2rem;}
  .hero-actions{gap:.7rem;margin-top:1.6rem;}
  .head{margin-bottom:1.9rem;}
  .steps{gap:1.25rem;}
  .trust-in{padding:1.9rem 0;gap:1.6rem;}
  .panel-search{padding:1.1rem !important;}
}

/* header icons pick up the gold in dark mode instead of sitting there
   in a flat blue */
:root[data-theme="dark"] .callbtn,
:root[data-theme="dark"] .themebtn,
:root[data-theme="dark"] .menubtn{color:var(--gold-soft);}
:root[data-theme="dark"] .callbtn:hover,
:root[data-theme="dark"] .themebtn:hover,
:root[data-theme="dark"] .menubtn:hover{background:var(--tint);color:#F0DCA8;}


/* ==================================================================
   DESKTOP PASS                                         15 Sep 2026
   The whole thing was built phone first and on a big screen it just
   stretched thin: small type marooned in a lot of empty navy, a map
   panel floating in dead space, and sections that all sat at the same
   weight. This widens the page, steps the type up, makes the hero
   compose, and puts a little light in the background so it is not one
   flat slab of colour.
   ================================================================== */

/* a hair of light in the corner so a big screen is not a flat wall */
body{
  background-image:radial-gradient(1100px 620px at 88% -12%,rgba(11,46,86,.05),transparent 62%);
  background-attachment:fixed;
}
:root[data-theme="dark"] body{
  background-image:radial-gradient(1100px 620px at 88% -12%,rgba(201,162,74,.075),transparent 62%);
}

@media (min-width:900px){
  .wrap{width:min(1240px,100% - 4rem);}
  .band{padding:clamp(4rem,6vw,6.5rem) 0;}

  header.top .brand .logo{height:50px;}
  nav.main{gap:1.8rem;}
  nav.main a{font-size:1rem;}

  /* the hero now fills its own screen and the map fills its column
     instead of hovering in the middle of it */
  .hero-in{
    align-items:stretch;
    min-height:min(76vh,700px);
    padding:clamp(3rem,5vw,5rem) 0;
    gap:clamp(2.5rem,4.5vw,4.5rem);
  }
  .hero-in > div:first-child{display:flex;flex-direction:column;justify-content:center;}
  .hero-photo{aspect-ratio:auto;height:100%;min-height:430px;}
  .hero .lede{max-width:52ch;}
  .panel-search{max-width:540px;}

  /* everything below the fold was set at phone sizes */
  .head p{font-size:1.2rem;}
  .trust-in{padding:2.9rem 0;gap:2.8rem;}
  .trust-item svg{width:28px;height:28px;}
  .trust-item h3{font-size:1.18rem;margin-bottom:.3rem;}
  .trust-item p{font-size:1rem;}
  .steps{gap:1.3rem;}
  .steps span{font-size:1rem;}
  .person-bio,.person p{font-size:1rem;}
  .person{padding:1.9rem;}
  .details .k{font-size:.74rem;}
  footer{font-size:.95rem;}

  /* the empty listings panel was a wide band of nothing */
  .empty{max-width:760px;}   /* lines up under the section head instead of floating centred */

  /* team cards read better capped than stretched edge to edge */
  .people{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));}
}

@media (min-width:1280px){
  .hero h1{max-width:13ch;}
  .split{gap:clamp(3rem,5vw,5.5rem);}
  .split-media{aspect-ratio:4/3;}
}

/* keep the drawn panels from getting gigantic on a very wide screen */
@media (min-width:1600px){
  .wrap{width:min(1320px,100% - 5rem);}
}

/* the last of the small targets: filter pills, and phone and email
   links sitting inline in the team and contact blocks */
.pill{min-height:42px;padding:.5rem 1.05rem;font-size:.95rem;}
@media (max-width:640px){
  .contactlist a,
  .person.office .v a,
  .details .v a{display:inline-block;padding:.5rem 0;min-height:40px;}
  .contactlist li{align-items:center;}
}
.find-foot .big{min-height:44px;}

/* the label column was so tight that CELL, OFFICE and EMAIL ran right
   into the number beside them */
.contactlist{gap:.5rem;}
.contactlist li{grid-template-columns:5rem 1fr;gap:1.1rem;}
@media (max-width:400px){ .contactlist li{grid-template-columns:1fr;gap:.1rem;} }


/* ==================================================================
   PHOTOGRAPHY                                          15 Sep 2026
   Real photos replacing the two drawn panels, plus a two picture
   band under the trust bar.
   ================================================================== */

/* a photo panel is the same frame as the drawn one, minus the paper
   surface, because a photograph does not need a white card behind it */
.photopanel{background:var(--navy-deep);}
.photopanel img.art{width:100%;height:100%;object-fit:cover;display:block;}
:root[data-theme="dark"] .photopanel{background:#0A1826;border-color:#33506C;}
:root[data-theme="dark"] .photopanel figcaption{background:var(--white);border-top-color:var(--line);color:var(--muted);}
:root[data-theme="dark"] .photopanel figcaption strong{color:var(--ink);}

.photoband{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--navy-deep);border-block:1px solid var(--line);
}
.photoband figure{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;}
.photoband img{width:100%;height:100%;object-fit:cover;display:block;}
.photoband figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,32,62,.78) 0%,rgba(6,32,62,.12) 55%,transparent 100%);
}
.photoband figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.1rem clamp(1rem,3vw,1.8rem);
  font-family:var(--font-display);font-variation-settings:"SOFT" 30,"WONK" 0;
  font-size:clamp(1.05rem,.9rem + .7vw,1.5rem);font-weight:600;
  color:#FFFFFF;letter-spacing:-.012em;text-shadow:0 1px 14px rgba(0,0,0,.45);
}
@media (max-width:640px){
  .photoband{grid-template-columns:1fr;}
  .photoband figure{aspect-ratio:2/1;}
}