/* Stage 5A Limited Revision | R01 Top Mobile H1 / R02 Contact Form / R03 Contact Hero */

/* R01 | Keep the approved desktop H1 untouched; lock the two authored semantic lines on small screens. */
@media (max-width:520px){
  .role-top .hero h1{
    max-width:none!important;
    font-size:clamp(30px,9.5vw,37px)!important;
    line-height:1.36!important;
    letter-spacing:-.03em!important;
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
}

/* R03 | Reuse the approved VCR circle/axis meaningful symbol as one quiet Contact hero anchor. */
.contact-page .core-hero .core-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 250px!important;
  column-gap:clamp(48px,6vw,84px)!important;
  align-items:center!important;
}
.contact-page .core-hero .breadcrumb,
.contact-page .core-hero .core-kicker,
.contact-page .core-hero h1,
.contact-page .core-hero .core-lead{grid-column:1!important}
.contact-page .core-hero .core-shell::after{
  content:"";
  grid-column:2!important;
  grid-row:1 / span 4!important;
  justify-self:center;
  align-self:center;
  display:block;
  width:220px;
  aspect-ratio:1;
  opacity:.68;
  pointer-events:none;
  background:
    radial-gradient(circle at 84% 50%,var(--wellside-accent,#9b8b72) 0 2px,transparent 2.6px),
    radial-gradient(circle at 50% 50%,transparent 0 31%,var(--wellside-line,#d8d0c4) 31.3% 31.8%,transparent 32.1% 100%),
    linear-gradient(var(--wellside-line,#d8d0c4),var(--wellside-line,#d8d0c4)) center/1px 100% no-repeat,
    linear-gradient(var(--wellside-line,#d8d0c4),var(--wellside-line,#d8d0c4)) center/100% 1px no-repeat;
}

/* R02 | Remove the large gray field; use white paper, hairlines and an open semantic grid. */
.contact-page .core-section--panel{
  background:var(--paper,#fff)!important;
  border-top:1px solid var(--core-line,var(--rule,#e1ddd6))!important;
  border-bottom:1px solid var(--core-line,var(--rule,#e1ddd6))!important;
}
.contact-page .core-section--panel .core-shell{background:transparent!important}
.contact-page .wellside-contact-form{
  max-width:960px!important;
  margin-top:42px!important;
  padding-top:0!important;
  border-top:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.contact-page .wellside-contact-form .contact-group{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:clamp(28px,4vw,52px)!important;
  row-gap:0!important;
  min-width:0!important;
  margin:0 0 40px!important;
  padding:28px 0 8px!important;
  border:0!important;
  border-top:1px solid var(--core-line,var(--rule,#e1ddd6))!important;
  background:transparent!important;
  box-shadow:none!important;
}
.contact-page .wellside-contact-form .contact-group legend{
  width:auto!important;
  max-width:100%!important;
  margin:0 0 22px!important;
  padding:0 18px 0 0!important;
  background:var(--paper,#fff)!important;
  color:var(--core-text,var(--ink,#24211d))!important;
  font-family:var(--core-serif,var(--serif,serif))!important;
  font-weight:400!important;
}
.contact-page .wellside-contact-form .contact-group .form-field{
  min-width:0!important;
  margin:0 0 24px!important;
}
.contact-page .wellside-contact-form .contact-group--consultation .form-field,
.contact-page .wellside-contact-form .contact-group--consultation .form-confidentiality-note,
.contact-page .wellside-contact-form .contact-group--privacy .form-field,
.contact-page .wellside-contact-form .contact-group--privacy .contact-submit{
  grid-column:1 / -1!important;
}
.contact-page .wellside-contact-form .form-confidentiality-note{
  margin:0 0 22px!important;
  padding:14px 0!important;
  border-top:1px solid var(--core-line,var(--rule,#e1ddd6))!important;
  border-bottom:1px solid var(--core-line,var(--rule,#e1ddd6))!important;
  background:transparent!important;
}
.contact-page .wellside-contact-form input:not([type="checkbox"]):not([type="hidden"]),
.contact-page .wellside-contact-form textarea,
.contact-page .wellside-contact-form select{
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid #cfd6da!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
.contact-page .wellside-contact-form textarea{min-height:180px!important}
.contact-page .wellside-contact-form .contact-submit{
  margin:0!important;
  padding-top:4px!important;
}
.contact-page .wellside-contact-form .contact-submit .wp-element-button,
.contact-page .wellside-contact-form button[type="submit"]{
  border-radius:0!important;
  box-shadow:none!important;
}

@media (max-width:700px){
  .contact-page .core-hero .core-shell{
    grid-template-columns:1fr!important;
    column-gap:0!important;
  }
  .contact-page .core-hero .core-shell::after{
    grid-column:1!important;
    grid-row:auto!important;
    justify-self:end!important;
    width:118px!important;
    margin-top:24px!important;
    opacity:.56!important;
  }
  .contact-page .wellside-contact-form .contact-group{
    grid-template-columns:1fr!important;
    margin-bottom:34px!important;
    padding-top:24px!important;
  }
  .contact-page .wellside-contact-form .contact-group .form-field,
  .contact-page .wellside-contact-form .contact-group--consultation .form-field,
  .contact-page .wellside-contact-form .contact-group--privacy .form-field{
    grid-column:1!important;
  }
}

/* R04 | Japanese heading line balance.
 * First-line treatment is shared and non-destructive: balance line allocation and
 * prefer Japanese phrase boundaries without changing copy, font size, or white-space.
 */
.role-business h1,
.role-business h2,
.role-business h3,
.role-insights h1,
.role-insights h2,
.role-insights h3,
.role-profile h1,
.role-profile h2,
.role-profile h3,
.article-page h1,
.article-page h2,
.article-page h3,
.v02-article h1,
.v02-article h2,
.v02-article h3{
  text-wrap:balance;
  word-break:auto-phrase;
  overflow-wrap:normal;
}

/* Residual R04 cases use a semantic tail chunk only.  This is not a nowrap
 * fallback for the whole heading; the short phrase is kept together as one
 * inline unit while the rest of the heading remains normally breakable. */
.r04-heading-chunk{
  display:inline-block;
}
