/* DXP — Premium About Us page (uses style.css for shared header/footer/band/faq/buttons) */
.about-canvas { height: 4773px; background: #FFF5F4; }
.viewport.about-vp { height: 4773px; }
@media (max-width: 1439px) { .viewport.about-vp { height: 3962px; } }
@media (max-width: 1190px) { .viewport.about-vp { height: 3341px; } }

/* ---- hero: full-bleed photo ---- */
.a-hero { position: absolute; left: 0; top: 0; width: 1440px; height: 620px; background: #F8E3AE; }
.a-hero .veil { position: absolute; inset: 0; background: url('../images/Pattern.svg') center / 900px auto repeat; opacity: 0.12; }
.a-hero-text { position: absolute; left: 220px; top: 170px; width: 1000px; display: flex; flex-direction: column; gap: 22px; align-items: center; z-index: 2; }
.a-hero-text .hand { font-family: 'Covered By Your Grace', cursive; font-weight: 400; font-size: 58px; line-height: 42px; color: #F13B31; }
.a-hero-text h1 { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 72px; line-height: 78px; text-align: center; color: #262626; margin: 0; }
.a-hero-text p { font-size: 20px; line-height: 28px; text-align: center; color: #343434; width: 760px; max-width: 100%; }
.a-hero-text .pill-btn { width: 201px; margin-top: 10px; }

/* ---- mission statement ---- */
.a-mission { position: absolute; left: 220px; top: 700px; width: 1000px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.a-mission .kicker { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 4px; color: #F13B31; text-transform: uppercase; }
.a-mission h2 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 44px; line-height: 56px; text-align: center; color: #262626; margin: 0; }
.a-mission h2 em { font-style: normal; color: #F13B31; }
.a-mission .rule { width: 90px; height: 4px; border-radius: 2px; background: #FDAC3E; }

/* ---- brand showcase ---- */
.a-brands-head { position: absolute; left: 332px; top: 1020px; width: 777px; text-align: center; }
.a-brands-head h2 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 40px; line-height: 46px; color: #000; margin: 0; }
.a-brands-head p { font-size: 18px; line-height: 24px; color: #343434; margin-top: 7px; }
.a-brands { position: absolute; left: 123px; top: 1150px; width: 1194px; display: flex; gap: 26px; }
.a-brand { flex: 1; height: 330px; border-radius: 20px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; padding: 20px 12px 22px; box-sizing: border-box; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.a-brand:hover { transform: translateY(-8px); box-shadow: 0 14px 28px rgba(0,0,0,0.16); }
.a-brand .img { width: 100%; height: 215px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.a-brand h3 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 22px; line-height: 28px; color: #262626; margin: 0; text-align: center; }
.a-brand span { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1px; color: #7F770D; text-transform: uppercase; }
.a-brand.b1 { background: linear-gradient(180deg, #FFE6B6 0%, #FFF7E8 100%); }
.a-brand.b2 { background: linear-gradient(180deg, #F8E88F 0%, #FFFBD6 100%); }
.a-brand.b3 { background: linear-gradient(180deg, #FFD095 0%, #FFF4E7 100%); }
.a-brand.b4 { background: linear-gradient(180deg, #E9FFB3 0%, #FFFDFB 100%); }
.a-brand.b5 { background: linear-gradient(180deg, #EED89B 0%, #FFFFFF 100%); }

/* ---- story split ---- */
.a-story { position: absolute; left: 123px; top: 1610px; width: 1194px; display: flex; gap: 70px; align-items: center; }
.a-story .img { width: 560px; height: 430px; border-radius: 29px; background: url('../images/opt-c2cf2105.jpg') center / cover no-repeat; flex-shrink: 0; box-shadow: 18px 18px 0 #FAE29D; transition: transform 0.25s ease; }
.a-story .img:hover { transform: scale(1.02); }
.a-story .txt { display: flex; flex-direction: column; gap: 18px; }
.a-story .kicker { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 4px; color: #F13B31; text-transform: uppercase; }
.a-story h2 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 40px; line-height: 48px; color: #000; margin: 0; }
.a-story p { font-size: 17px; line-height: 27px; color: #343434; }
.a-story ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 12px; }
.a-story li { position: relative; padding-left: 34px; font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 18px; line-height: 24px; color: #262626; }
.a-story li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #FDAC3E; }
.a-story li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 9px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }

/* ---- dark stats band ---- */
.a-stats { position: absolute; left: 0; top: 2170px; width: 1440px; height: 240px; background: #262626; display: flex; justify-content: center; align-items: center; gap: 120px; }
.a-stat { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.a-stat .big { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 56px; line-height: 60px; color: #FDAC3E; }
.a-stat .small { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 18px; line-height: 24px; color: #fff; text-align: center; white-space: pre-line; }

/* ---- values ---- */
.a-values-head { position: absolute; left: 332px; top: 2530px; width: 777px; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.a-values-head h2 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 40px; line-height: 46px; text-align: center; color: #000; margin: 0; }
.a-values-head p { font-size: 18px; line-height: 24px; text-align: center; color: #343434; }
.a-values { position: absolute; left: 123px; top: 2680px; width: 1194px; display: flex; flex-flow: row wrap; gap: 30px 37px; }
.a-value { width: 578px; border-radius: 20px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.08); padding: 32px 38px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; border-top: 5px solid #FDAC3E; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.a-value:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.14); }
.a-value .num { font-family: 'Covered By Your Grace', cursive; font-size: 34px; line-height: 30px; color: #F13B31; }
.a-value h3 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 24px; line-height: 30px; color: #262626; margin: 0; }
.a-value p { font-size: 15px; line-height: 24px; color: #343434; }

/* ---- presence ---- */
.a-presence-head { position: absolute; left: 332px; top: 3230px; width: 777px; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.a-presence-head h2 { font-family: 'Catamaran', sans-serif; font-weight: 700; font-size: 40px; line-height: 46px; text-align: center; color: #000; margin: 0; }
.a-presence-head p { font-size: 18px; line-height: 24px; text-align: center; color: #343434; }
.a-presence { position: absolute; left: 123px; top: 3380px; width: 1194px; display: flex; gap: 26px; }
.a-place { flex: 1; height: 170px; border-radius: 20px; background: #FAE29D; display: flex; flex-direction: column; gap: 4px; justify-content: center; align-items: center; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.a-place:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); }
.a-place b { font-family: 'Catamaran', sans-serif; font-weight: 800; font-size: 22px; line-height: 28px; color: #262626; }
.a-place span { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; color: #343434; text-align: center; white-space: pre-line; }

/* ---- yellow band + FAQ + footer repositions ---- */
.a-band { top: 3660px; left: -94px; }
.a-band-text { top: 3784px; }
.band-text.a-band-text p { white-space: normal; }
.band-text.a-band-text h2 { white-space: pre-line; }
.a-faq-title { top: 4152px; }
.a-faq-list { top: 4232px; }
.a-faq-visual { top: 4194px; }
.a-footer { top: 4719px; height: 494px; padding-top: 58px; }
.about-canvas.about-canvas { height: 5213px; }
.viewport.about-vp.about-vp { height: 5213px; }
@media (max-width: 1439px) { .viewport.about-vp.about-vp { height: 4327px; } }
@media (max-width: 1190px) { .viewport.about-vp.about-vp { height: 3649px; } }

/* ---- mobile reflow (specificity > .canvas > div) ---- */
@media (max-width: 1023px) {
  .viewport.about-vp.about-vp { height: auto !important; overflow: visible; }
  .about-canvas.about-canvas { height: auto !important; }
  .about-canvas > .a-hero { position: relative !important; height: 480px !important; width: auto !important; }
  .about-canvas > .a-hero-text { position: relative !important; left: 0 !important; top: 0 !important; width: auto !important; margin-top: -480px; padding: 130px 20px 30px; box-sizing: border-box; gap: 14px; min-height: 480px; z-index: 2; }
  .a-hero-text .hand { font-size: 40px; line-height: 32px; }
  .a-hero-text h1 { font-size: 40px; line-height: 46px; }
  .a-hero-text p { font-size: 16px; line-height: 24px; width: auto; }
  .about-canvas > .a-mission { position: static !important; width: auto !important; padding: 40px 20px 0; }
  .a-mission h2 { font-size: 28px; line-height: 38px; }
  .about-canvas > .a-brands-head { position: static !important; width: auto !important; padding: 44px 20px 0; }
  .a-brands-head h2 { font-size: 30px; line-height: 36px; }
  .about-canvas > .a-brands { position: static !important; width: auto !important; flex-flow: row wrap; gap: 16px; padding: 24px 20px 0; }
  .a-brand { flex: 1 1 40%; min-width: 150px; height: 280px; }
  .about-canvas > .a-story { position: static !important; width: auto !important; flex-direction: column; gap: 30px; padding: 44px 20px 0; align-items: stretch; }
  .a-story .img { width: auto; height: 260px; box-shadow: 10px 10px 0 #FAE29D; }
  .a-story h2 { font-size: 30px; line-height: 38px; }
  .about-canvas > .a-stats { position: static !important; width: auto !important; height: auto !important; flex-flow: row wrap; gap: 30px 40px; padding: 36px 20px; margin-top: 44px; }
  .a-stat { flex: 1 1 35%; }
  .a-stat .big { font-size: 42px; line-height: 46px; }
  .a-stat .small { font-size: 15px; line-height: 20px; }
  .about-canvas > .a-values-head { position: static !important; width: auto !important; padding: 44px 20px 0; }
  .a-values-head h2 { font-size: 30px; line-height: 36px; }
  .about-canvas > .a-values { position: static !important; width: auto !important; flex-direction: column; gap: 16px; padding: 24px 20px 0; }
  .a-value { width: auto; }
  .about-canvas > .a-presence-head { position: static !important; width: auto !important; padding: 44px 20px 0; }
  .a-presence-head h2 { font-size: 30px; line-height: 36px; }
  .about-canvas > .a-presence { position: static !important; width: auto !important; flex-flow: row wrap; gap: 16px; padding: 24px 20px 44px; }
  .a-place { flex: 1 1 40%; min-width: 150px; height: 150px; }
  .about-canvas > .a-footer { position: static !important; }
}