/* The photograph stays intact: the crop and blend belong to the card. */
.home-grid .choice-photo{
  --photo-surface:255,255,255;
  position:relative;isolation:isolate;overflow:hidden;
  display:block;min-height:360px;min-width:0;white-space:normal;
  background:rgb(var(--photo-surface));
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.choice-photo-scene{
  position:absolute;top:0;left:0;right:0;height:218px;z-index:0;
  pointer-events:none;overflow:hidden;
}
.choice-photo-scene img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:59% 32%;
}
.choice-photo-fade{
  position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,
    rgba(var(--photo-surface),0) 33%,
    rgba(var(--photo-surface),.08) 43%,
    rgba(var(--photo-surface),.48) 59%,
    rgba(var(--photo-surface),.88) 75%,
    rgb(var(--photo-surface)) 94%);
}
.choice-photo .choice-content{padding-top:145px;position:relative;z-index:1;flex-shrink:0;width:100%;min-width:0}
.choice-photo .arrow{position:relative;z-index:1;flex-shrink:0}
.choice-photo .choice-icon{
  position:absolute;top:20px;left:20px;z-index:1;
  background:rgba(255,255,255,.90);border:1px solid rgba(255,255,255,.65);
  box-shadow:0 4px 16px rgba(6,47,87,.08);color:#073e70;
}
.choice-photo .title{position:relative}
.choice-photo .choice-tags{position:relative}
.home-grid .choice-photo:hover{background:rgb(var(--photo-surface));border-color:#91bdca;box-shadow:0 12px 30px rgba(7,62,112,.12)}
.home-grid .choice-photo:focus-visible{outline:3px solid #1686ac;outline-offset:4px}
html[data-theme="dark"] .home-grid .choice-photo,
html[data-theme="dark"] .home-grid .choice-photo:hover{
  --photo-surface:23,35,45;background:rgb(var(--photo-surface))!important;
}
html[data-theme="dark"] .choice-photo .choice-tag{background:#213e4d;color:#e5f3fc;border-color:#3f5a69}
html[data-theme="dark"] .choice-photo .arrow{color:#9fcfe8}
@media(min-width:601px) and (max-width:900px){
  .home-grid .choice-photo{min-height:265px}
  .choice-photo-scene{top:0;right:0;bottom:0;left:auto;width:65%;height:100%}
  .choice-photo-scene img{object-position:64% 37%}
  .choice-photo-fade{background:linear-gradient(90deg,
    rgb(var(--photo-surface)) 0%,
    rgba(var(--photo-surface),.96) 12%,
    rgba(var(--photo-surface),.65) 28%,
    rgba(var(--photo-surface),.15) 48%,
    rgba(var(--photo-surface),0) 65%)}
  .choice-photo .choice-content{padding-top:64px;width:54%}
  .choice-photo .arrow{position:relative;max-width:54%}
}
@media(max-width:600px){.choice-photo .choice-icon{top:18px;left:18px}}
/* Portrait photograph: keep the conversation in view instead of the ceiling. */
.home-grid .choice-photo--claim{display:flex;justify-content:space-between}
.choice-photo--claim .choice-photo-scene img{object-position:50% 43%}
/* Keep the three faces above the fade; crop the empty space overhead. */
.home-grid .choice-photo--partnership{display:flex;justify-content:space-between}
.choice-photo--partnership .choice-photo-scene img{
  object-position:50% 100%;transform:scale(1.12);transform-origin:50% 100%;
}
@media(min-width:601px) and (max-width:900px){
  .choice-photo--partnership .choice-photo-scene{width:57%}
  .choice-photo--partnership .choice-photo-fade{background:linear-gradient(90deg,
    rgb(var(--photo-surface)) 0%,
    rgba(var(--photo-surface),.96) 15%,
    rgba(var(--photo-surface),.50) 25%,
    rgba(var(--photo-surface),0) 38%)}
}
@media(prefers-reduced-motion:reduce){.home-grid .choice-photo{transition:none}}


/* A separate photographic area keeps this wide banner readable at every size. */
.faq-feature--photo{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:184px;padding:28px 43% 28px 26px;
  display:flex;align-items:center;gap:20px;
  background:linear-gradient(90deg,#062f57 0%,#0a5279 50%,#0a5279 100%);
}
.faq-photo-scene{
  position:absolute;inset:0 0 0 auto;width:48%;z-index:0;
  overflow:hidden;pointer-events:none;
}
.faq-photo-scene img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%;
}
.faq-photo-fade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    #0a5279 0%,rgba(10,82,121,.98) 7%,
    rgba(10,82,121,.80) 20%,rgba(10,82,121,.35) 39%,
    rgba(10,82,121,.08) 60%,rgba(10,82,121,.08) 100%);
}
.faq-feature--photo .feature-icon,.faq-feature--photo .feature-copy{position:relative;z-index:1}
.faq-feature--photo .feature-icon{flex:0 0 68px}
.faq-feature--photo .feature-copy{display:block;min-width:0;flex:1}
.faq-feature--photo .feature-title{color:#fff}
.faq-feature--photo .feature-desc{color:rgba(255,255,255,.94)}
.faq-feature--photo:focus-visible{outline:3px solid #1686ac;outline-offset:4px}
@media(min-width:601px) and (max-width:900px){
  .faq-feature--photo{padding:24px 38% 24px 22px;gap:14px}
  .faq-feature--photo .feature-icon{flex-basis:56px;width:56px;height:56px;border-radius:18px}
  .faq-feature--photo .feature-icon svg{width:30px;height:30px}
  .faq-feature--photo .feature-title{font-size:22px}
}
@media(max-width:600px){
  .faq-feature--photo{
    display:block;min-height:0;padding:174px 20px 24px;
    background:#0a5279;
  }
  .faq-photo-scene{inset:0 0 auto;width:100%;height:214px}
  .faq-photo-scene img{object-position:50% 41%}
  .faq-photo-fade{background:linear-gradient(180deg,
    rgba(10,82,121,.05) 0%,rgba(10,82,121,.05) 30%,
    rgba(10,82,121,.18) 45%,rgba(10,82,121,.60) 62%,
    rgba(10,82,121,.94) 81%,#0a5279 100%)}
  .faq-feature--photo .feature-icon{
    position:absolute;top:18px;left:18px;width:48px;height:48px;border-radius:15px;
    background:rgba(6,47,87,.78);border-color:rgba(255,255,255,.28);
  }
  .faq-feature--photo .feature-icon svg{width:27px;height:27px}
}
@media(prefers-reduced-motion:reduce){
  .faq-feature--photo,.faq-feature--photo .feature-desc svg{transition:none}
}
