/* User-supplied texture for sections 02 and 03, on desktop and mobile. */
#practice > .practice-top,
#practice > #contact{
 background:#aa8766 url('/assets/pitched-hotel-beige-texture.jpg') center / cover no-repeat;
 color:#fff;
}
#practice > .practice-top :is(.section-kicker,.eyebrow,h2,h3,p,small,button,summary,.signature),
#practice > #contact :is(.eyebrow,h2,p,button){color:#fff}
#practice > .practice-top :is(.thinking-tabs,.signature,details),
#practice > #contact{border-color:rgba(255,255,255,.32)}
#practice > .practice-top .thinking-tabs [aria-selected=true]{border-color:#fff}
#practice > #contact :is(.contact-circle,.text-link){border-color:rgba(255,255,255,.65)}
#practice > #contact .contact-circle:hover{background:rgba(255,255,255,.15);color:#fff}

/* Desktop follows the visible browser height, capped at the 1440px canvas. */
#practice > #contact{border-top:0}
@media(min-width:761px){
 #practice > .practice-top{
  height:auto;
  min-height:min(1440px,100svh);
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  row-gap:clamp(16px,2.4svh,34px);
  padding-top:clamp(20px,3.5svh,50px);
  padding-bottom:clamp(20px,3.5svh,50px);
 }
 #practice > .practice-top .practice-heading{padding-top:0;margin-bottom:0}
 #practice > .practice-top .practice-heading .eyebrow{margin-bottom:clamp(8px,1.2svh,17px)}
 #practice > .practice-top .practice-heading h2{font-size:clamp(30px,min(4.85vw,5.8svh),84px)}
 #practice > .practice-top .practice-lead{margin-top:clamp(10px,1.5svh,22px)}
 #practice > .practice-top .practice-layout{
  min-height:0;
  grid-template-rows:minmax(0,1fr);
  align-items:stretch;
  column-gap:clamp(32px,4vw,100px);
 }
 #practice > .practice-top .material-image{
  width:100%;max-width:1000px;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-start;
 }
 #practice > .practice-top .material-image img{
  min-height:0;max-height:calc(100% - 30px);width:100%;
  height:auto;object-fit:cover;
 }
 #practice > .practice-top .material-image>div{flex-shrink:0}
 #practice > .practice-top .thinking{
  width:100%;max-width:760px;min-height:0;justify-self:end;
  display:flex;flex-direction:column;justify-content:flex-start;
 }
 #practice > .practice-top .thinking-tabs{flex-shrink:0;margin-bottom:clamp(12px,2svh,28px)}
 #practice > .practice-top #thinking-panel{min-height:0;overflow:visible}
 #practice > .practice-top .thinking h3{font-size:clamp(21px,2.7svh,29px);margin-bottom:clamp(12px,1.8svh,22px)}
 #practice > .practice-top .thinking .signature{margin-top:clamp(14px,2svh,28px);padding-top:clamp(10px,1.3svh,18px)}
}

/* Do not let translated captions or prose expand the grid beyond its container. */
#practice .practice-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
#practice :is(.practice-layout,.material-image,.thinking,#thinking-panel){min-width:0;max-width:100%}
#practice .material-image img{display:block;width:100%;max-width:100%}
#practice .material-image>div{flex-wrap:wrap;row-gap:6px}
#practice .material-image>div>*{min-width:0;overflow-wrap:anywhere}
#practice .signature{flex-wrap:wrap;gap:8px}
html[lang="ja"] #practice :is(.practice-lead,.thinking h3,.thinking p,summary){word-break:normal;overflow-wrap:anywhere;line-break:strict}
html[lang="en"] #practice :is(.practice-lead,.thinking h3,.thinking p,summary){overflow-wrap:anywhere}
@media(max-width:760px){
 #practice .practice-layout{grid-template-columns:minmax(0,1fr)}
 #practice .practice-top{min-width:0;max-width:100%}
 #practice .section-kicker{flex-wrap:wrap;row-gap:8px}
 #practice .section-kicker>span{min-width:0;overflow-wrap:anywhere}
}

/* Preserve the supplied brand image composition; bleed only the image on mobile. */
#practice .material-image img{aspect-ratio:auto}
@media(max-width:760px){
 #practice .material-image img{
  width:calc(100% + var(--pad) + var(--pad));
  max-width:none;
  margin-inline:calc(-1 * var(--pad));
  height:auto;
 }
}

/* The tab row stays anchored above the changing content in every language. */
#practice .thinking{align-self:stretch;justify-content:flex-start}
#practice .thinking-tabs{flex-shrink:0}

/* Secondary phone contact below the existing project inquiry. */
#contact .project-consultation{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.4);color:#fff}
#contact .consultation-number{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
#contact .consultation-label{font-size:10px;line-height:1.5;letter-spacing:1.4px;font-weight:400}
#contact .consultation-phone{display:inline-flex;align-items:center;min-height:44px;font-size:24px;line-height:1.3;letter-spacing:.5px;font-weight:400;color:inherit;white-space:nowrap}
#contact .consultation-phone:hover{text-decoration:underline;text-underline-offset:5px}
#contact .consultation-hours{font-size:11px;line-height:1.7;margin:0 0 11px;overflow-wrap:anywhere}
@media(max-width:760px){
 #contact .project-consultation{flex-direction:column;align-items:flex-start;gap:4px;margin-top:25px;padding-top:20px}
 #contact .consultation-phone{font-size:22px}
 #contact .consultation-hours{margin:0;font-size:11px}
}