/* Distinct layouts for the public Learn more / About page. */
.about-page { margin-top:0; overflow:hidden; }
.about-page .about-page__main { align-items:center; }
.about-page .single_why_choose,
.about-page .single_why_choose_img { margin:0 !important; }
.about-page .single_why_choose p { margin-bottom:1.2rem; line-height:1.75; }
.about-page .about-page__media img { display:block; width:100%; object-fit:cover; }
.about-page .about-page__values { margin-top:3.5rem; }
.about-page .about-page__values p { height:100%; margin:0; padding:1.5rem; border-left:3px solid var(--site-accent); background:rgba(127,143,153,.08); line-height:1.7; }
.about-page .about-page__values strong { display:block; margin-bottom:.35rem; color:var(--site-accent); }

/* Classic: a familiar, balanced two-column introduction. */
.about-layout-classic .about-page__media img { border-radius:1rem; max-height:540px; box-shadow:0 18px 42px rgba(20,40,50,.13); }

/* Modern: photo first, with a solid overlapping content panel. */
.about-layout-modern .about-page__media { order:-1; }
.about-layout-modern .about-page__media img { aspect-ratio:4/5; max-height:620px; }
.about-layout-modern .about-page__copy { z-index:1; margin-left:-4rem; }
.about-layout-modern .single_why_choose { padding:3rem; background:#fff; border-left:6px solid var(--site-accent); box-shadow:0 25px 55px rgba(20,40,50,.17); }

/* Minimal: a centered editorial story with one panoramic image. */
.about-layout-minimal .about-page__main { flex-direction:column; }
.about-layout-minimal .about-page__copy,
.about-layout-minimal .about-page__media { flex:0 0 100%; width:100%; max-width:100%; }
.about-layout-minimal .about-page__copy { max-width:790px; text-align:center; }
.about-layout-minimal .single_why_choose h1 { font-size:clamp(2.2rem,5vw,4rem); line-height:1.15; }
.about-layout-minimal .about-page__media { max-width:1040px; margin-top:3rem; }
.about-layout-minimal .about-page__media img { aspect-ratio:16/7; max-height:490px; }
.about-layout-minimal .about-page__values { border-top:1px solid rgba(100,120,130,.3); padding-top:2rem; }
.about-layout-minimal .about-page__values p { background:none; border:0; text-align:center; }

/* Glass: the photo fills the section behind a translucent reading panel. */
.about-layout-glass .about-page__main { position:relative; min-height:620px; padding:4rem 0; background:#17303a; }
.about-layout-glass .about-page__media { position:absolute; inset:0; width:100%; max-width:none; height:100%; padding:0; }
.about-layout-glass .about-page__media img { width:100%; height:100%; }
.about-layout-glass .about-page__main::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(9,25,34,.6),transparent 85%); pointer-events:none; }
.about-layout-glass .about-page__copy { z-index:2; flex:0 0 58%; max-width:58%; margin-left:5%; }
.about-layout-glass .single_why_choose { padding:2.5rem; border:1px solid rgba(255,255,255,.6); border-radius:1.2rem; background:rgba(255,255,255,.85); box-shadow:0 20px 55px rgba(0,0,0,.2); backdrop-filter:blur(12px); }

/* Story: a wide photograph above a paper-like article panel. */
.about-layout-story .about-page__main { flex-direction:column; }
.about-layout-story .about-page__media { order:-1; flex:0 0 100%; width:100%; max-width:100%; padding:0; }
.about-layout-story .about-page__media img { height:490px; }
.about-layout-story .about-page__copy { z-index:1; flex:0 0 100%; width:calc(100% - 3rem); max-width:920px; margin-top:-5rem; padding:0; }
.about-layout-story .single_why_choose { padding:3rem 3.5rem; background:#fff; border-top:6px solid var(--site-accent); box-shadow:0 16px 40px rgba(20,40,50,.13); }
.about-layout-story .single_why_choose h1 { font-size:clamp(2rem,4vw,3.5rem); line-height:1.2; }

/* Contrast: a dark feature page with a sculpted image silhouette. */
body .about-layout-contrast { background:#10232d !important; }
.about-layout-contrast .about-page__copy h1 { color:#fff; font-size:clamp(2.2rem,4vw,3.7rem); line-height:1.16; }
.about-layout-contrast .about-page__copy p,
.about-layout-contrast .about-page__values p { color:#e4edf0; }
.about-layout-contrast .about-page__media img { aspect-ratio:1/1; max-width:540px; margin:auto; border-radius:48% 48% 8% 8%; border:10px solid rgba(255,255,255,.13); }
.about-layout-contrast .about-page__values p { background:rgba(255,255,255,.08); border-color:var(--site-accent); }
.about-layout-contrast .about-page__values strong { color:#fff; }

body.theme-dark .about-layout-modern .single_why_choose,
body.theme-dark .about-layout-story .single_why_choose { background:#222d38; }
body.theme-dark .about-layout-glass .single_why_choose { background:rgba(21,31,40,.87); border-color:rgba(255,255,255,.2); }
body.theme-dark .about-layout-glass .single_why_choose p { color:#e4edf0; }

@media (min-width:768px) and (max-width:991px) {
  .about-layout-modern .about-page__copy { max-width:calc(100% - 4rem); margin:-3rem auto 0; }
  .about-layout-modern .about-page__media img { aspect-ratio:16/9; }
  .about-layout-glass .about-page__copy { flex-basis:75%; max-width:75%; }
}

@media (max-width:767px) {
  .about-page .about-page__values { margin-top:2rem; row-gap:1rem; }
  .about-layout-modern .about-page__copy { margin:0; }
  .about-layout-modern .single_why_choose { padding:1.7rem; }
  .about-layout-modern .about-page__media { margin-bottom:1.5rem; }
  .about-layout-modern .about-page__media img { aspect-ratio:4/3; }
  .about-layout-minimal .about-page__media img { aspect-ratio:4/3; }
  .about-layout-glass .about-page__main { min-height:0; padding:2.5rem 0; }
  .about-layout-glass .about-page__copy { flex:0 0 calc(100% - 2rem); max-width:calc(100% - 2rem); margin:0 auto; }
  .about-layout-glass .single_why_choose { padding:1.5rem; }
  .about-layout-story .about-page__media img { height:300px; }
  .about-layout-story .about-page__copy { width:calc(100% - 1.5rem); margin-top:-2rem; }
  .about-layout-story .single_why_choose { padding:1.7rem; }
  .about-layout-contrast .about-page__media { margin-top:2rem; }
  .about-layout-contrast .about-page__media img { max-width:420px; }
}
