/* Supplied Montserrat files, aliased to keep the site header/footer unchanged. */
@font-face{font-family:PolyparkAboutMontserrat;src:url("Montserrat-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:PolyparkAboutMontserrat;src:url("Montserrat-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}

/* Common tokens from Polypark_UI_Guide_v1.pdf, scoped to the page. */
#pp-about.pp-page {
 --pp-red:#ce152d;
 --pp-text:#292d30;
 --pp-body:#626a70;
 --pp-muted:#737b81;
 --pp-line:#edf0f1;
 --pp-divider:#e2e5e7;
 --pp-soft:#fafbfb;
 --pp-font:PolyparkAboutMontserrat,Montserrat,Arial,sans-serif;
 --pp-body-size:15px;
 --pp-body-line:24px;
 --pp-h1-size:32px;
 --pp-h1-line:42px;
 --pp-h1-tracking:-.6px;
 --pp-h2-size:24px;
 --pp-h2-line:32px;
 --pp-h2-tracking:-.3px;
 --pp-radius:8px;
 --pp-card-gap:24px;
 --pp-card-padding:24px;
 --pp-space-4:4px;
 --pp-space-8:8px;
 --pp-space-12:12px;
 --pp-space-16:16px;
 --pp-space-20:20px;
 --pp-space-24:24px;
 --pp-space-32:32px;
 --pp-space-40:40px;
 --pp-space-48:48px;
}


/* Page-local inner spacing only. Preserve Aspro's sidebar and outer widths. */
#content .pp-about-aspro-middle>.container{width:100%;max-width:none;margin:0;padding:0}
#content .pp-about-aspro-middle>.container>.maxwidth-theme{width:100%;max-width:none;margin:0;padding:0}
#pp-about{display:block;float:none;clear:both;width:100%;max-width:none;min-width:0;margin:0;background:#fff;border:0;box-shadow:none}
#pp-about *{font-family:inherit;box-sizing:border-box}
#pp-about h1,#pp-about h2,#pp-about h3,#pp-about p,#pp-about figure,#pp-about figcaption,#pp-about section,#pp-about article{padding:0;text-transform:none;font-style:normal;box-shadow:none}
#pp-about h1,#pp-about h2,#pp-about h3{color:var(--pp-text)}
#pp-about h1::before,#pp-about h1::after,#pp-about h2::before,#pp-about h2::after,#pp-about h3::before,#pp-about h3::after{content:none}
#pp-about img{border:0;box-shadow:none;vertical-align:middle}

/* About-specific composition on common UI Guide tokens. */
#pp-about.pp-page{padding:20px 0 64px;color:var(--pp-text);font-family:var(--pp-font);font-size:var(--pp-body-size);font-weight:400;line-height:var(--pp-body-line);text-align:left;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#pp-about,#pp-about *{box-sizing:border-box}
#pp-about .pp-about__container{width:100%;max-width:1024px;margin:0 auto;padding:0 32px;min-width:0}
#pp-about .pp-content{container-name:ppabout;container-type:inline-size;min-width:0}
#pp-about h1,#pp-about h2,#pp-about h3,#pp-about p,#pp-about figure{margin:0}
#pp-about img{display:block;max-width:100%;height:auto}
#pp-about a:focus-visible,#pp-about button:focus-visible{outline:3px solid var(--pp-red);outline-offset:4px}
#pp-about .section-hero,#pp-about .content-section{margin:0 0 var(--pp-space-48);min-width:0}
#pp-about .content-section:last-child{margin-bottom:0}
#pp-about .hero-h1{font-size:var(--pp-h1-size);line-height:var(--pp-h1-line);font-weight:500;letter-spacing:var(--pp-h1-tracking);margin-bottom:32px}
#pp-about .hero-lead{max-width:960px;margin-bottom:24px;font-size:15px;line-height:24px;font-weight:500}
#pp-about .hero-text{max-width:920px;font-size:15px;line-height:24px;font-weight:400;color:var(--pp-body)}
#pp-about .hero-text + .hero-text{margin-top:16px}
#pp-about .section-title{margin-bottom:24px;font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.3px}
#pp-about .approach-grid,#pp-about .brands-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#pp-about .approach-card,#pp-about .brand-card{padding:24px;min-width:0;border:1px solid var(--pp-line);border-radius:8px}
#pp-about .approach-card{background:var(--pp-soft)}
#pp-about .approach-card__title{margin:0 0 12px;font-size:18px;line-height:26px;font-weight:500;letter-spacing:normal;min-height:26px}
#pp-about .approach-card__desc,#pp-about .brand-card__desc,#pp-about .own-brand-banner__desc,#pp-about .materials-intro{font-size:15px;line-height:24px;font-weight:400;color:var(--pp-body)}
#pp-about .materials-intro{margin:0 0 24px}
#pp-about .brand-card{background:#fff}
#pp-about .brand-card__name{display:flex;align-items:center;height:76px;margin:0 0 16px;font-size:18px;line-height:26px;font-weight:500}
#pp-about .brand-card__name--pair{flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
#pp-about .brand-logo{display:block;object-fit:contain;max-width:100%;height:auto}
#pp-about .brand-logo--sarzyna{width:204px}
#pp-about .brand-logo--erco{width:112px}
#pp-about .brand-logo--jushi{width:114px}
#pp-about .brand-logo--ctg{width:170px}
#pp-about .own-brand-banner{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:center;padding:24px;background:var(--pp-soft);border:1px solid var(--pp-line);border-left:3px solid var(--pp-red);border-radius:8px;min-width:0}
#pp-about .own-brand-banner__title-area{min-width:0}
#pp-about .own-brand-banner__title-area h2{font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.3px}
#pp-about .photo-break{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:16px;margin:0 0 48px;padding:0;min-width:0}
#pp-about .photo-break__item{position:relative;overflow:hidden;border-radius:8px;min-width:0}
#pp-about .photo-break img{width:100%;height:400px;max-width:100%;object-fit:cover;border-radius:8px}
#pp-about .photo-break__mat{object-position:50% 30%}
#pp-about .photo-break__resin{object-position:55% 50%}
#pp-about .photo-break__caption{position:absolute;left:20px;bottom:16px;z-index:1;margin:0;padding:0;font-size:12px;line-height:20px;font-weight:400;color:var(--pp-text);letter-spacing:normal}
#pp-about .section-hero .photo-break{margin-bottom:32px}

/* External H1 and page margins follow viewport thresholds from the Guide. */
@media(max-width:900px){
 #pp-about.pp-page{padding-top:20px;padding-bottom:48px;--pp-h1-size:28px;--pp-h1-line:36px}
 #pp-about .pp-about__container{padding-left:24px;padding-right:24px}
 #pp-about .hero-h1 br{display:none}
}
@media(max-width:540px){
 #pp-about.pp-page{padding-top:16px;padding-bottom:40px;--pp-h1-size:26px;--pp-h1-line:34px;--pp-h1-tracking:-.4px}
 #pp-about .pp-about__container{padding-left:20px;padding-right:20px}
 #pp-about .hero-h1{margin-bottom:24px}
}

/* Content responds to its own available width, including an Aspro sidebar. */
@container ppabout (max-width:900px){
 #pp-about .section-hero,#pp-about .content-section{margin-bottom:40px}
 #pp-about .content-section:last-child{margin-bottom:0}
 #pp-about .section-title,#pp-about .own-brand-banner__title-area h2{font-size:22px;line-height:30px}
 #pp-about .approach-grid,#pp-about .brands-grid{grid-template-columns:minmax(0,1fr)}
 #pp-about .approach-card,#pp-about .brand-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px}
 #pp-about .approach-card{align-items:start}
 #pp-about .approach-card__title{min-height:0;margin-bottom:0}
 #pp-about .brand-card{align-items:center}
 #pp-about .brand-card__name,#pp-about .brand-card__name--pair{height:auto;min-height:64px;margin-bottom:0}
 #pp-about .own-brand-banner{grid-template-columns:180px minmax(0,1fr);gap:24px}
 #pp-about .photo-break{margin-bottom:40px}
 #pp-about .photo-break img{height:300px}
}
@container ppabout (max-width:540px){
 #pp-about .section-hero,#pp-about .content-section{margin-bottom:32px}
 #pp-about .content-section:last-child{margin-bottom:0}
 #pp-about .section-title{margin-bottom:24px}
 #pp-about .approach-card,#pp-about .brand-card{display:block;padding:20px}
 #pp-about .approach-card__title{margin-bottom:12px}
 #pp-about .brand-card__name{height:60px;min-height:0;margin-bottom:16px}
 #pp-about .brand-card__name--pair{height:72px}
 #pp-about .own-brand-banner{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;padding:20px}
 #pp-about .photo-break{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:32px}
 #pp-about .photo-break .photo-break__mat{height:220px;object-position:50% 30%}
 #pp-about .photo-break .photo-break__resin{height:180px;object-position:55% 100%}
 #pp-about .photo-break__caption{left:16px;bottom:12px}
 #pp-about .section-hero .photo-break{margin-bottom:24px}
}

/* Approved short-landscape photo composition, while retaining Guide type sizes. */
@media(orientation:landscape) and (max-width:1023px) and (max-height:600px){
 @container ppabout (min-width:480px){
  #pp-about .approach-card,#pp-about .brand-card{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;align-items:start}
  #pp-about .approach-card__title{margin-bottom:0}
  #pp-about .brand-card{align-items:center}
  #pp-about .brand-card__name,#pp-about .brand-card__name--pair{height:auto;min-height:64px;margin-bottom:0}
  #pp-about .own-brand-banner{grid-template-columns:160px minmax(0,1fr);gap:24px}
  #pp-about .photo-break{grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:16px}
  #pp-about .photo-break img,#pp-about .photo-break .photo-break__mat,#pp-about .photo-break .photo-break__resin{height:220px}
  #pp-about .photo-break .photo-break__resin{object-position:55% 65%}
 }
}

/* Own-brand logo: preserve SVG proportions at every existing breakpoint. */
#pp-about .own-brand-banner__logo{display:block;width:200px;max-width:100%;height:auto;aspect-ratio:144.37 / 38.1;object-fit:contain}