/* =========================================================
   SoveRIN — RESPONSIVE SYSTEM FIRST
   Shared layout contract for Desktop / Laptop / Tablet / Mobile.
   Page CSS owns visual identity; this file owns geometry and reflow.
   ========================================================= */

/* ---------- Shared hero contract ---------- */
.page-home .hero,
.page-about .about-hero,
.page-partnering .partner-hero,
.page-contact .contact-hero,
.page-what-we-do .hero{
  width:min(calc(100% - (2 * var(--page-pad))),var(--site-max));
  margin-inline:auto;
  border-bottom:0;
  overflow:hidden;
}

.page-home .hero-inner,
.page-about .hero-grid,
.page-contact .contact-hero-inner{
  width:100%;
  min-height:clamp(430px,35vw,535px);
  padding-inline:var(--page-pad);
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  gap:0;
  align-items:center;
}
.page-about .hero-grid{min-height:clamp(470px,38vw,575px)}
.page-partnering .partner-hero-inner{width:100%;min-height:clamp(455px,33vw,500px);padding-inline:var(--page-pad);display:grid;grid-template-columns:minmax(0,43%) minmax(0,57%);align-items:stretch;gap:0}
.page-what-we-do .hero{min-height:clamp(500px,40vw,620px);aspect-ratio:auto}

/* Shared hero title/body scale */
.page-home .hero h1,
.page-about .hero-copy h1,
.page-partnering .partner-copy h1,
.page-contact .contact-copy h1,
.page-what-we-do .hero h1{
  font-size:var(--title-xl);
  line-height:1.05;
  letter-spacing:-.035em;
}
.page-home .hero-text,
.page-about .hero-copy>p:not(.eyebrow),
.page-partnering .partner-copy p:not(.eyebrow),
.page-contact .contact-copy p:not(.eyebrow),
.page-what-we-do .hero p{
  font-size:var(--body-size);
  line-height:var(--body-lh);
}

/* Home: never fall back to the old molecule image. */
.page-home .hero-visual{height:100%;min-height:inherit;aspect-ratio:auto;background:url('../assets/home-staircase-watermark.png') right center / auto 100% no-repeat;position:relative;overflow:hidden}
.page-home .hero-visual .visual-art{display:none}
.page-home .hero-caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;padding-left:clamp(28px,4vw,62px);padding-right:var(--space-3);background:linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.58) 28%,rgba(255,255,255,0) 64%)}

/* Shared supporting callout */
.page-home .hero-caption-copy,
.page-about .hero-side .side-list,
.page-contact .hero-side blockquote,
.page-partnering .partner-note{
  font-family:var(--sans);
  font-style:normal;
  font-weight:700;
  font-size:clamp(18px,1.55vw,27px);
  line-height:1.22;
  letter-spacing:-.02em;
  color:#143d78;
  text-transform:uppercase;
  text-align:left;
}
.page-home .hero-caption-copy{gap:10px;white-space:normal}
.page-about .hero-side{justify-self:stretch;width:auto;padding-left:clamp(28px,4vw,62px)}
.page-about .hero-side .side-list{line-height:1.42;letter-spacing:.02em}
.page-contact .hero-side{border-left:0;min-height:0;padding-left:clamp(28px,4vw,62px);display:flex;align-items:center}
.page-contact .hero-side blockquote{width:100%;margin:0}
.page-contact .hero-side blockquote span{display:block;white-space:nowrap}
.page-contact .hero-side blockquote::before,.page-contact .hero-side blockquote::after{height:2px;width:42px;background:#17345e}
.page-partnering .partner-note{margin-top:clamp(24px,2.4vw,36px);display:block;white-space:normal;letter-spacing:-.02em}
.page-partnering .partner-note::before{display:none}

/* Partnering hero keeps its image and copy in one shared responsive grid. */
.page-partnering .partner-visual{grid-column:2;grid-row:1;min-width:0;height:100%;overflow:hidden;border-radius:0}
.page-partnering .partner-visual img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.page-partnering .partner-copy{grid-column:1;grid-row:1;z-index:2;padding:clamp(42px,4.7vw,70px) var(--space-4) clamp(38px,4.4vw,64px) 0;background:none;display:flex;flex-direction:column;justify-content:center}
.page-partnering .partner-visual::before{display:none}

/* What We Do remains the deepest hero, but still scales fluidly. */
.page-what-we-do .hero-copy{width:100%;padding-inline:var(--page-pad)}
.page-what-we-do .hero-note{font-size:clamp(18px,1.55vw,27px);line-height:1.22}

/* ---------- Site-wide sections ---------- */
.page-home .pillars-grid,
.page-home .approach-inner,
.page-about .mission-grid,
.page-about .approach-grid,
.page-about .values-top,
.page-about .values-grid,
.page-partnering .partner-models-inner,
.page-partnering .partner-cta,
.page-contact .contact-info-inner,
.page-contact .contact-message,
.page-what-we-do .pipeline,
.page-what-we-do .commitment{
  width:min(100%,var(--site-max));
  margin-inline:auto;
}

/* Home */
.page-home .pillars-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-inline:var(--page-pad)}
.page-home .pillar{border:0;min-height:clamp(220px,18vw,250px);padding:clamp(28px,2.4vw,36px) clamp(16px,2vw,30px)}
.page-home .approach-inner{grid-template-columns:minmax(0,1fr) minmax(44%,736px);gap:clamp(24px,3vw,44px);padding-inline:var(--page-pad)}
.page-home .approach-copy{padding-block:var(--space-5)}

/* About */
.page-about .mission-grid{grid-template-columns:minmax(280px,32%) minmax(0,68%);gap:clamp(28px,3.2vw,48px);padding-inline:var(--page-pad);min-height:auto;padding-block:var(--section-y)}
.page-about .mission-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-about .mission-card{min-height:0;padding-inline:clamp(16px,2vw,34px)}
.page-about .approach-grid{grid-template-columns:minmax(0,41%) minmax(0,59%);align-items:stretch;padding-inline:var(--page-pad)}
.page-about .approach-copy{padding:clamp(30px,3vw,46px) clamp(22px,3vw,42px) clamp(30px,3vw,46px) 0}
.page-about .approach-visual{height:100%;min-height:0;aspect-ratio:auto;align-self:stretch}
.page-about .approach-visual img{width:100%;height:100%;object-fit:cover}
.page-about .values-top{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,90px);padding:var(--space-4) var(--page-pad) var(--space-3)}
.page-about .values-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:0 var(--page-pad) var(--space-4)}
.page-about .strapline-content{padding-inline:var(--page-pad)}

/* Partnering */
.page-partnering .partner-models-inner{padding:var(--space-4) var(--page-pad) var(--space-5)}
.page-partnering .partner-grid{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(140px,180px)}
.page-partnering .partner-card{padding-inline:clamp(18px,2.2vw,34px)}
.page-partnering .partner-cta{padding:var(--section-y) var(--page-pad)}

/* Contact */
.page-contact .contact-info-inner{padding:var(--space-5) var(--page-pad)}
.page-contact .section-intro{grid-template-columns:minmax(0,48%) minmax(0,52%);gap:clamp(28px,3.3vw,48px)}
.page-contact .info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-contact .contact-message{padding:var(--space-5) var(--page-pad) var(--space-6)}
.page-contact .message-layout{grid-template-columns:minmax(0,70%) minmax(230px,30%);gap:clamp(28px,3.3vw,48px)}

/* What We Do */
.page-what-we-do .pipeline,.page-what-we-do .commitment{padding-inline:var(--page-pad)}
.page-what-we-do .section-intro{gap:clamp(36px,4vw,60px)}

/* ---------- Laptop / Tablet: same composition, scaled together ---------- */
@media (max-width:1199px){
  .header-inner{grid-template-columns:minmax(160px,210px) minmax(0,1fr) auto}
  .language{display:none}

  .page-home .hero-inner,.page-about .hero-grid,.page-contact .contact-hero-inner{grid-template-columns:minmax(0,60%) minmax(0,40%);min-height:auto;padding-block:clamp(36px,5vw,58px)}
  .page-about .hero-grid{padding-block:clamp(40px,5.5vw,64px)}
  .page-partnering .partner-hero-inner{min-height:auto}
  .page-what-we-do .hero{min-height:clamp(470px,48vw,560px)}

  .page-home .hero-visual{align-self:stretch;min-height:clamp(330px,42vw,470px)}
  .page-home .hero-caption,.page-about .hero-side,.page-contact .hero-side{padding-left:clamp(22px,3vw,38px)}

  .page-home .approach-inner{grid-template-columns:minmax(0,1fr) minmax(42%,1fr)}
  .page-about .mission-grid{grid-template-columns:minmax(250px,34%) minmax(0,66%)}
  .page-about .approach-grid{grid-template-columns:minmax(0,44%) minmax(0,56%)}
  .page-partnering .partner-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-partnering .partner-aside{grid-column:1 / -1;padding:var(--space-3) 0 0;display:grid;grid-template-columns:1fr auto;gap:20px}
  .page-contact .message-layout{grid-template-columns:minmax(0,66%) minmax(220px,34%)}
  .page-what-we-do .program-grid{grid-template-columns:1fr}
}

/* ---------- Mobile: one-column reading order, same tokens ---------- */
@media (max-width:767px){
  :root{--page-pad:clamp(18px,5.2vw,24px);--section-y:clamp(42px,12vw,64px);--title-xl:clamp(38px,11vw,50px);--title-lg:clamp(32px,9vw,42px);--body-size:15px}
  .site-header{height:76px}
  .header-inner{grid-template-columns:1fr auto}
  .nav{display:none}
  .actions .language,.actions span:not(.contact-btn){display:none}
  .brand img{width:154px}
  .contact-btn{min-height:42px;padding:9px 13px;font-size:12px}

  .page-home .hero,.page-about .about-hero,.page-partnering .partner-hero,.page-contact .contact-hero,.page-what-we-do .hero{width:100%;margin:0}
  .page-home .hero-inner,.page-about .hero-grid,.page-contact .contact-hero-inner{grid-template-columns:1fr;min-height:0;padding:var(--section-y) var(--page-pad);gap:var(--space-4)}
  .page-home .hero-copy,.page-about .hero-copy,.page-contact .contact-copy{padding:0;max-width:none}
  .page-home .hero-visual{min-height:clamp(260px,78vw,390px);background-size:contain;background-position:right center;margin-inline:calc(-1 * var(--page-pad));width:calc(100% + (2 * var(--page-pad)))}
  .page-home .hero-caption{padding-left:var(--page-pad);padding-right:var(--page-pad);background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(255,255,255,.25) 60%,rgba(255,255,255,0))}
  .page-about .hero-side,.page-contact .hero-side{padding-left:0;justify-self:start;width:100%}
  .page-contact .hero-side blockquote span{white-space:normal}

  .page-partnering .partner-hero-inner{grid-template-columns:1fr;min-height:0}
  .page-partnering .partner-visual{grid-column:1;grid-row:1;min-height:clamp(260px,70vw,380px)}
  .page-partnering .partner-copy{grid-column:1;grid-row:2;padding:var(--space-5) var(--page-pad);background:#fff}
  .page-what-we-do .hero{min-height:0;padding-block:var(--section-y)}
  .page-what-we-do .hero-bg{object-position:64% center;opacity:.7}
  .page-what-we-do .hero-fade{background:linear-gradient(90deg,rgba(252,253,254,.99) 0%,rgba(252,253,254,.93) 55%,rgba(252,253,254,.38) 100%)}
  .page-what-we-do .hero-copy{height:auto;padding-inline:var(--page-pad)}
  .page-what-we-do .hero-note .note-copy span{white-space:normal}

  .page-home .pillars-grid{grid-template-columns:1fr;padding-inline:var(--page-pad)}
  .page-home .pillar{padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
  .page-home .approach-inner{grid-template-columns:1fr;padding-inline:var(--page-pad);gap:var(--space-3)}
  .page-home .approach-copy{padding-block:var(--space-4)}
  .page-home .visual-frame{width:100%}

  .page-about .mission-grid{grid-template-columns:1fr;padding:var(--section-y) var(--page-pad);gap:var(--space-4)}
  .page-about .mission-cards{grid-template-columns:1fr}
  .page-about .mission-card{border-left:0;border-top:1px solid #d4dfeb;padding:var(--space-4) 0}
  .page-about .approach-grid{grid-template-columns:1fr;padding-inline:0}
  .page-about .approach-copy{padding:var(--space-5) var(--page-pad)}
  .page-about .approach-visual{height:auto;aspect-ratio:2.23/1}
  .page-about .values-top{grid-template-columns:1fr;padding:var(--space-4) var(--page-pad) var(--space-3);gap:var(--space-2)}
  .page-about .values-grid{grid-template-columns:1fr;padding:0 var(--page-pad) var(--space-4)}
  .page-about .values-grid article{border-left:0;border-top:1px solid #d4dfeb;padding:var(--space-4) 0}
  .page-about .strapline-content{grid-template-columns:1fr;padding:var(--space-4) var(--page-pad)}
  .page-about .people-block{margin:var(--space-3) 0 0;min-width:0}

  .page-partnering .partner-models-head{align-items:flex-start;flex-direction:column}
  .page-partnering .partner-grid{grid-template-columns:1fr}
  .page-partnering .partner-card{padding:var(--space-4) 0;border-right:0;border-bottom:1px solid var(--line)}
  .page-partnering .partner-card:first-child{padding-left:0}
  .page-partnering .partner-aside{grid-column:auto;display:block;padding:var(--space-4) 0 0}

  .page-contact .section-intro,.page-contact .message-layout{grid-template-columns:1fr;gap:var(--space-3)}
  .page-contact .info-grid,.page-contact .contact-form{grid-template-columns:1fr}
  .page-contact .contact-form .full,.page-contact .confidentiality{grid-column:auto}

  .page-what-we-do .section-intro{display:block}
  .page-what-we-do .intro-side,.page-what-we-do .commit-side{white-space:normal;padding-top:var(--space-2)}
  .page-what-we-do .program-grid{grid-template-columns:1fr}
  .page-what-we-do .program-copy,.page-what-we-do .program-copy.compact{max-width:100%;padding:var(--space-4) var(--space-3) var(--space-6)}
  .page-what-we-do .program h3,.page-what-we-do .compact h3{font-size:clamp(30px,9vw,38px)}

  .footer-top{align-items:flex-start;flex-direction:column;gap:14px}
  .footer-top nav,.footer-lang{display:none}
  .footer-company-info{align-items:flex-start;gap:5px 12px;font-size:10px}
  .footer-bottom{align-items:flex-start;flex-direction:column}
}

/* =========================================================
   APPROVED HERO IMAGE INTEGRATION — 2026-09-15
   Scope: Home + Partnering hero image-layer geometry only.
   Preserve copy, typography, hero dimensions, lower sections,
   and all other pages.
   ========================================================= */

@media (min-width:768px){
  /* HOME — one integrated hero plane, not a boxed right column. */
  .page-home .hero-inner{
    position:relative;
    isolation:isolate;
  }
  .page-home .hero-copy{
    grid-column:1;
    grid-row:1;
    position:relative;
    z-index:3;
  }
  .page-home .hero-visual{
    grid-column:1 / -1;
    grid-row:1;
    z-index:1;
    align-self:stretch;
    width:100%;
    height:100%;
    min-height:inherit;
    margin:0;
    background-image:url('../assets/home-staircase-watermark.png');
    background-repeat:no-repeat;
    background-position:right center;
    background-size:cover;
    overflow:hidden;
  }
  .page-home .hero-caption{
    inset:0 0 0 auto;
    width:42%;
    padding-left:clamp(28px,4vw,62px);
    padding-right:var(--space-3);
    background:none;
    z-index:2;
  }

  /* PARTNERING — approved 3-part image spans the full hero;
     copy sits above its natural left fade. */
  .page-partnering .partner-hero-inner{
    position:relative;
    isolation:isolate;
  }
  .page-partnering .partner-visual{
    grid-column:1 / -1;
    grid-row:1;
    z-index:1;
    min-width:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#fff;
  }
  .page-partnering .partner-visual img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:right center;
    transform:none;
    transform-origin:center center;
    display:block;
  }
  .page-partnering .partner-visual::before{
    content:"";
    display:block;
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.99) 24%,
      rgba(255,255,255,.94) 34%,
      rgba(255,255,255,.68) 43%,
      rgba(255,255,255,.22) 52%,
      rgba(255,255,255,0) 60%);
  }
  .page-partnering .partner-copy{
    grid-column:1;
    grid-row:1;
    position:relative;
    z-index:3;
    background:none;
  }
}

/* =========================================================
   APPROVED SITE LAYOUT SYSTEM — 2026-09-15
   Scope locked to:
   1) desktop/tablet/mobile contained section geometry,
   2) Partnering “Greater Value.” = Home “Value.” bronze,
   3) Partnering middle-card visuals = Home pillar visual scale.

   Contract:
   - Default visible surfaces and divider lines are contained to the
     same site frame on desktop/tablet.
   - Hero compositions remain the intentional full visual exception
     *inside* that same site frame.
   - Mobile uses the viewport as the natural frame with the existing
     shared page padding and one-column reflow.
   ========================================================= */

/* Header/footer divider lines follow the same site frame instead of
   continuing to the viewport edge. */
.site-header{border-bottom:0}
.header-inner{border-bottom:1px solid var(--line)}
.site-footer{border-top:0}
.footer-inner{border-top:1px solid var(--line)}

/* Desktop + tablet: visible section surfaces and section dividers are
   contained to the shared SoveRIN frame. */
@media (min-width:768px){
  .page-home .pillars-section,
  .page-home .approach-section,
  .page-about .mission,
  .page-about .approach,
  .page-about .values,
  .page-about .strapline,
  .page-partnering .partner-models,
  .page-contact .contact-info,
  .page-contact .contact-message{
    width:min(calc(100% - (2 * var(--page-pad))),var(--site-max));
    margin-inline:auto;
  }

  /* A section already carrying site-frame remains one contained panel. */
  .page-partnering .partner-cta,
  .page-what-we-do .pipeline,
  .page-what-we-do .commitment{
    width:min(100%,var(--site-max));
    margin-inline:auto;
  }
}

/* Mobile: the viewport itself is the section frame; the existing
   --page-pad controls readable inner spacing. */
@media (max-width:767px){
  .page-home .pillars-section,
  .page-home .approach-section,
  .page-about .mission,
  .page-about .approach,
  .page-about .values,
  .page-about .strapline,
  .page-partnering .partner-models,
  .page-contact .contact-info,
  .page-contact .contact-message{
    width:100%;
    margin-inline:0;
  }
}

/* Partnering accent matches Home h1 “Value.” exactly. */
.page-partnering .partner-copy h1 span{
  color:var(--bronze);
}

/* Partnering uses the same three small approved Home pillar visuals. */
.page-partnering .partner-card img{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:50%;
  margin:0 0 14px;
}


/* =========================================================
   HOME HERO + APPROACH — APPROVED UPDATE 2026-09-15
   Scope locked to Home only:
   1) Hero staircase lighter / less blue.
   2) Hero staircase right circular edge aligned to the right end.
   3) Approach uses the approved bridge photo and approved layout.
   ========================================================= */

/* Hide unused inline image layers on Home; use the locked background system. */
.page-home .hero-visual .visual-art{display:none !important;}

@media (min-width:768px){
  .page-home .hero-visual{
    background-image:url('../assets/home-staircase-watermark.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:right center;
  }
  .page-home .hero-caption{
    width:38%;
    padding-left:clamp(18px,2.4vw,34px);
    padding-right:clamp(18px,2.2vw,30px);
  }
  .page-home .hero-visual::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(255,255,255,0.80) 0%,
      rgba(255,255,255,0.56) 27%,
      rgba(255,255,255,0.12) 52%,
      rgba(255,255,255,0) 72%);
  }
  .page-home .hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:rgba(255,255,255,0.06);
    mix-blend-mode:screen;
  }

  .page-home .approach-inner{
    grid-template-columns:minmax(0,1fr) minmax(540px,700px);
    gap:56px;
    align-items:center;
  }
  .page-home .approach-visual{
    justify-self:end;
    width:100%;
    max-width:700px;
    aspect-ratio:1.95 / 1;
    min-height:0;
  }
  .page-home .approach-visual .visual-art{
    display:block !important;
  }
  .page-home .approach-visual .visual-art img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    filter:grayscale(15%);
  }
  .page-home .approach-caption{
    inset:0 0 0 auto;
    width:30%;
    padding-left:clamp(18px,2.2vw,32px);
    padding-right:clamp(20px,2.6vw,36px);
    z-index:2;
  }
  .page-home .approach-visual::after{
    content:"";
    position:absolute;
    inset:0 0 0 auto;
    width:36%;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.20) 22%,
      rgba(255,255,255,0.74) 58%,
      rgba(255,255,255,0.96) 82%,
      rgba(255,255,255,1) 100%);
    z-index:1;
  }
}

@media (max-width:767px){
  .page-home .hero-visual{
    background-image:url('../assets/home-staircase-watermark.png');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:right center;
  }
  .page-home .approach-inner{
    gap:24px;
  }
  .page-home .approach-visual{
    aspect-ratio:1.95 / 1;
  }
  .page-home .approach-visual .visual-art{
    display:block !important;
  }
  .page-home .approach-visual .visual-art img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    filter:grayscale(15%);
  }
  .page-home .approach-caption{
    width:36%;
    padding-right:18px;
  }
  .page-home .approach-visual::after{
    content:"";
    position:absolute;
    inset:0 0 0 auto;
    width:40%;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.18) 18%,
      rgba(255,255,255,0.72) 56%,
      rgba(255,255,255,0.96) 82%,
      rgba(255,255,255,1) 100%);
    z-index:1;
  }
}


/* =========================================================
   HOME FINAL LOCK — 2026-09-16
   Scope: Home only. Partnering excluded per latest instruction.
   - Hero staircase: lighter, less blue, right circular edge aligned to the right end.
   - Approach: approved bridge visual and approved desktop position/size intent.
   ========================================================= */

.page-home .hero-visual{
  background-image:url('../assets/home-staircase-watermark.png') !important;
  background-repeat:no-repeat !important;
  background-position:right center !important;
}

@media (min-width:768px){
  .page-home .hero-visual{
    background-size:auto 100% !important;
  }

  .page-home .hero-caption{
    width:40% !important;
    padding-left:clamp(22px,2.8vw,40px) !important;
    padding-right:clamp(18px,2vw,28px) !important;
  }

  .page-home .approach-inner{
    grid-template-columns:minmax(0,1fr) minmax(600px,854px) !important;
    gap:48px !important;
    align-items:center !important;
  }

  .page-home .approach-visual{
    justify-self:end !important;
    width:100% !important;
    max-width:854px !important;
    aspect-ratio:854 / 381 !important;
    min-height:0 !important;
  }

  .page-home .approach-visual .visual-art{display:block !important;}
  .page-home .approach-visual .visual-art img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    filter:none !important;
  }

  .page-home .approach-caption{
    inset:0 0 0 auto !important;
    width:29% !important;
    padding-left:clamp(18px,2.2vw,32px) !important;
    padding-right:clamp(18px,2.2vw,34px) !important;
    z-index:2 !important;
    background:none !important;
  }

  .page-home .approach-visual::after{
    content:'' !important;
    position:absolute !important;
    inset:0 0 0 auto !important;
    width:34% !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.22) 22%,
      rgba(255,255,255,0.74) 58%,
      rgba(255,255,255,0.95) 84%,
      rgba(255,255,255,1) 100%) !important;
    z-index:1 !important;
  }
}

@media (max-width:767px){
  .page-home .hero-visual{
    background-size:auto 100% !important;
    background-position:right center !important;
  }

  .page-home .approach-visual{
    aspect-ratio:854 / 381 !important;
  }

  .page-home .approach-visual .visual-art{display:block !important;}
  .page-home .approach-visual .visual-art img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    filter:none !important;
  }

  .page-home .approach-caption{
    width:32% !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .page-home .approach-visual::after{
    content:'' !important;
    position:absolute !important;
    inset:0 0 0 auto !important;
    width:38% !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.20) 18%,
      rgba(255,255,255,0.72) 56%,
      rgba(255,255,255,0.96) 82%,
      rgba(255,255,255,1) 100%) !important;
    z-index:1 !important;
  }
}