/* page-about2.css: About us page (study 07 design language) */

body{
  background:var(--cream);color:var(--teal);
  font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.11 0 0 0 0 0.28 0 0 0 0 0.35 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
section{padding:clamp(60px,9vh,110px) 0}

/* ---------- hero ---------- */
.about-hero{padding:clamp(64px,9vh,110px) 0 clamp(48px,7vh,80px)}
.ah-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:860px){.ah-grid{grid-template-columns:1fr}}
.about-hero h1.script{
  font-family:'Lobster',cursive;font-size:clamp(42px,5.6vw,72px);line-height:1.06;
  color:var(--teal);transform:rotate(-1deg);margin:14px 0 18px;
}
.about-hero h1 em{font-style:normal;color:var(--rust)}
.ah-sub{color:var(--teal-soft);max-width:52ch;margin-bottom:26px}
.ah-print{
  background:#fff;padding:14px 14px 46px;max-width:420px;margin:0 auto;
  transform:rotate(1.8deg);box-shadow:0 18px 44px rgba(28,72,90,.22);
  position:relative;
}
.ah-print img{width:100%;display:block}
.ah-print figcaption{
  position:absolute;left:0;right:0;bottom:10px;text-align:center;
  font-family:'Lobster',cursive;font-size:21px;color:var(--teal);
}

/* ---------- the family album ---------- */
#album{background:var(--teal);color:var(--cream);position:relative;overflow:clip}
#album::before{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--marigold) 0 40px,transparent 40px 80px);
}
#album .sec-kick{color:var(--marigold)}
#album .script{color:var(--cream)}
#album .sec-sub{color:rgba(251,243,226,.75)}
.album-grid{
  margin-top:48px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center;
}
@media(max-width:900px){.album-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}}
.album-stage{
  background:rgba(251,243,226,.07);border:1.5px dashed rgba(251,243,226,.3);border-radius:16px;
  padding:clamp(18px,2.6vw,30px);
}
.album-print{
  background:#FDF4E2;padding:14px 14px 50px;max-width:430px;margin:0 auto 20px;
  transform:rotate(-1.6deg);box-shadow:0 18px 44px rgba(0,0,0,.32);
  position:relative;
}
.album-print img{
  width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
  transition:opacity .22s ease,filter .5s ease;
}
.album-print img.swapping{opacity:0}
.album-print figcaption{
  position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-family:'Lobster',cursive;font-size:21px;color:var(--teal);
}
.album-years{display:flex;justify-content:space-between;gap:6px;margin-top:14px;flex-wrap:wrap}
#album .album-years .sbtn{padding:7px 10px 4px;font-size:15px;letter-spacing:.1em;flex:1;min-width:0;text-align:center}
.album-read .album-year{
  font-family:'Teko',sans-serif;font-weight:600;font-size:clamp(56px,6vw,84px);line-height:1;
  color:var(--marigold);letter-spacing:.04em;
}
.album-read h3{
  font-family:'Teko',sans-serif;font-weight:600;font-size:27px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);margin:6px 0 10px;
}
.album-read p{color:rgba(251,243,226,.85);max-width:46ch}
@media(max-width:900px){.album-read{text-align:center}.album-read p{margin:0 auto}}

/* ---------- credentials decoded ---------- */
.cred-cards{
  margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
@media(max-width:1020px){.cred-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cred-cards{grid-template-columns:1fr}}
.ccard{
  background:#fff;border:1.5px solid var(--teal-faint);border-radius:12px;
  padding:24px 22px 20px;position:relative;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;
}
.ccard:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 14px 32px rgba(28,72,90,.14)}
.cc-tk{
  display:inline-block;font-family:'Teko',sans-serif;font-weight:600;font-size:17px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream);background:var(--teal);border-radius:6px;padding:4px 10px 1px;
}
.ccard h4{
  font-family:'Teko',sans-serif;font-weight:600;font-size:23px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);
  margin:12px 0 8px;
}
.ccard p{font-size:14.5px;color:var(--teal-soft);line-height:1.65}

/* ---------- crew ---------- */
#crew{overflow:hidden;padding-bottom:60px}
#crew .reel-shell{margin-top:44px}

/* ---------- mobile polish ---------- */
@media(max-width:860px){
  .about-hero .sec-kick.left{justify-content:center}
  .about-hero h1.script{text-align:center}
  .ah-sub{text-align:center;margin-left:auto;margin-right:auto}
  .about-hero .cta-row{justify-content:center}
  .ah-print{margin-top:34px}
}
@media(max-width:760px){
  section{padding:clamp(48px,7vh,80px) 0}
  .sec-sub{padding:0 6px}
  .spread{margin-top:44px}
  .about-hero{padding-top:40px}
  .ah-print{max-width:340px}
  .album-print{padding:10px 10px 44px}
}