/* #why: the question, the six facts, the picture and the companies grid. */
/* ---------- why us ---------- */
.why{min-height:100vh;display:flex;align-items:center;padding-top:calc(var(--hh) + 20px);padding-bottom:68px}
.why-in{width:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;row-gap:clamp(12px,2.4vh,24px);align-items:stretch}
.why-q{margin:0;font:600 clamp(28px,min(3.2vw,5.4vh),48px)/1.08 var(--disp);letter-spacing:-.022em;color:var(--ink);text-wrap:balance;max-width:17em}
.why-s{margin:clamp(14px,2.4vh,24px) 0 0;max-width:26em;font:600 clamp(19px,min(1.8vw,3.2vh),27px)/1.22 var(--disp);letter-spacing:-.012em;color:var(--ink2);text-wrap:balance}
.why-a{margin:14px 0 0;max-width:38em;font:400 clamp(15.5px,1.2vw,17.5px)/1.6 var(--sans);color:var(--text)}
.why-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vh,20px) 28px;margin:clamp(14px,2.6vh,28px) 0 0;padding-top:clamp(12px,2vh,20px);border-top:1px solid var(--line)}
.why-f dt{font:600 clamp(22px,min(2.3vw,4vh),34px)/1.1 var(--disp);color:var(--ink);letter-spacing:-.015em;font-variant-numeric:lining-nums}
.why-f dd{margin:6px 0 0;font:400 13.5px/1.45 var(--sans);color:var(--grey)}
.why-f dd a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:2px;text-decoration-thickness:1.5px;transition:color .2s}.why-f dd a:hover{color:var(--red)}
.why-img{margin:0;position:relative;min-height:200px;overflow:hidden;border-radius:6px;background:var(--soft)}
.why-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.why-p{grid-column:1/-1;padding-top:clamp(10px,1.8vh,18px);border-top:1px solid var(--line)}
.why-p h3{margin:0;font:600 clamp(18px,1.4vw,22px)/1.2 var(--disp);color:var(--ink);letter-spacing:-.01em}
.why-p ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 22px}
.why-p li{padding:clamp(7px,1.3vh,11px) 0;border-top:1px solid var(--line);font:600 clamp(15px,1.3vw,19px)/1.25 var(--disp);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
.why-p li.more{color:var(--grey);font-style:italic;font-weight:500}
.why-p li small{display:none}
@media (max-width:959px){
  .why{min-height:0;padding-top:96px;padding-bottom:40px}
  .why-in{display:block}
  .why-f{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-img{min-height:0;aspect-ratio:4/3;margin-top:30px}
  .why-p{margin-top:34px}
  .why-p ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
  .why-p li{font-size:17px}
}

@media (min-width:960px) and (max-height:820px){
  .why{padding-top:calc(var(--hh) + 10px);padding-bottom:70px}
  .why-in{row-gap:10px}
  .why-s{margin-top:10px}
  .why-a{margin-top:8px;font-size:14.5px;line-height:1.5}
  .why-f{margin-top:12px;padding-top:10px;gap:8px 24px}
  .why-f dd{margin-top:3px;font-size:13px;line-height:1.35}
  .why-img{min-height:120px}
  .why-p{padding-top:8px}
  .why-p ul{margin-top:6px}
  .why-p li{padding:5px 0}
}

@media (min-width:960px){@supports (height:100dvh){.why{min-height:100dvh}}}

/* a window under 700px high: the facts and the companies still share one screen with the question */
@media (min-width:960px) and (max-height:699px){
  .why{padding-top:calc(var(--hh) + 6px);padding-bottom:12px}
  .why-in{row-gap:8px}
  .why-q{font-size:clamp(26px,min(2.8vw,4.6vh),34px)}
  .why-s{margin-top:6px;font-size:clamp(17px,min(1.7vw,2.9vh),22px)}
  .why-a{margin-top:6px;font-size:14px;line-height:1.45}
  .why-f{margin-top:8px;padding-top:8px;gap:6px 24px}
  .why-f dt{font-size:24px}
  .why-f dd{margin-top:2px;font-size:13px;line-height:1.35}
  .why-p{padding-top:6px}
  .why-p h3{font-size:17px}
  .why-p ul{margin-top:4px}
  .why-p li{padding:4px 0}
}
@media (min-width:960px) and (max-width:1199px) and (max-height:699px){
  .why-in{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:36px}
  .why-f{gap:6px 18px}
}