/* Light compact luxury process banner for the professionals page */
.professional-process-wrap{
  width:calc(100% - 28px);
  max-width:1500px;
  margin:14px auto 12px;
}
.professional-process-banner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(360px,.92fr) minmax(460px,1.08fr);
  height:264px;
  overflow:hidden;
  border:1px solid rgba(166,126,73,.2);
  border-radius:26px;
  background:radial-gradient(circle at 12% 4%,rgba(255,255,255,.88),transparent 34%),linear-gradient(125deg,#fffdf9 0%,#f5eee4 50%,#ece0d1 100%);
  box-shadow:0 18px 42px rgba(74,50,31,.12);
  color:#302218;
}
.professional-process-banner::before{
  content:"";
  position:absolute;
  left:27px;
  top:24px;
  width:40px;
  height:1px;
  background:#aa7c43;
  z-index:2;
}
.professional-process-banner__copy{
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px 40px 30px;
}
.professional-process-banner__eyebrow{
  margin:0 0 11px;
  padding-left:53px;
  color:#956b39;
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.2;
  text-transform:uppercase;
}
.professional-process-banner h2{
  max-width:19ch;
  margin:0 0 12px;
  color:#2e2118;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.78rem,2.5vw,2.8rem);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.professional-process-banner p{
  max-width:62ch;
  margin:0;
  color:rgba(56,40,29,.76);
  font-size:clamp(.78rem,.9vw,.9rem);
  line-height:1.55;
  overflow-wrap:anywhere;
}
.professional-process-banner__gallery{
  position:relative;
  z-index:1;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  height:100%;
  padding:8px 8px 8px 0;
}
.professional-process-banner__image{
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
  overflow:hidden;
  border-radius:18px;
  background:#ded0bd;
}
.professional-process-banner__image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(51,34,23,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62);
}
.professional-process-banner__image img{
  display:block;
  width:100%;
  height:100%;
  max-height:248px;
  object-fit:cover;
  object-position:center;
}
.professional-process-banner__image.is-empty{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(255,255,255,.72),transparent 45%),repeating-linear-gradient(118deg,#eadfce 0,#eadfce 2px,#dfd0ba 2px,#dfd0ba 17px);
}
.professional-process-banner__image.is-empty:nth-child(2){
  background:linear-gradient(215deg,rgba(255,255,255,.7),transparent 45%),repeating-linear-gradient(62deg,#dfd0ba 0,#dfd0ba 2px,#eadfce 2px,#eadfce 18px);
}
.professional-process-banner__image.is-empty span{
  color:rgba(116,80,42,.36);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:2rem;
  letter-spacing:.12em;
}
@media(max-width:1050px){
  .professional-process-banner{grid-template-columns:minmax(330px,.95fr) minmax(390px,1.05fr);height:282px}
  .professional-process-banner__copy{padding:31px 30px 27px}
  .professional-process-banner__image img{max-height:266px}
}
@media(max-width:780px){
  .professional-process-wrap{width:calc(100% - 18px);margin:10px auto 10px}
  .professional-process-banner{grid-template-columns:1fr;height:auto;border-radius:22px}
  .professional-process-banner__copy{padding:30px 22px 23px}
  .professional-process-banner::before{left:21px;top:22px;width:32px}
  .professional-process-banner__eyebrow{padding-left:43px;margin-bottom:10px}
  .professional-process-banner h2{max-width:23ch;font-size:clamp(1.65rem,7vw,2.25rem)}
  .professional-process-banner p{font-size:.84rem;line-height:1.5}
  .professional-process-banner__gallery{height:136px;padding:0 7px 7px;gap:7px}
  .professional-process-banner__image{border-radius:15px}
  .professional-process-banner__image img{max-height:129px}
}
@media(max-width:480px){
  .professional-process-wrap{width:calc(100% - 12px)}
  .professional-process-banner{border-radius:18px}
  .professional-process-banner__copy{padding:27px 16px 19px}
  .professional-process-banner::before{left:16px;top:19px}
  .professional-process-banner__eyebrow{font-size:.59rem;padding-left:42px}
  .professional-process-banner p{font-size:.79rem}
  .professional-process-banner__gallery{height:112px;padding:0 6px 6px;gap:6px}
  .professional-process-banner__image{border-radius:12px}
  .professional-process-banner__image img{max-height:106px}
}
