*{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#05080b;
  --dark:#090d10;
  --white:#f7f7f5;
  --ink:#111418;
  --muted:#70757a;
  --gold:#e2280f;
  --line:rgba(17,20,24,.18);
}
html{scroll-behavior:smooth}
body{font-family:"Inter",sans-serif;background:var(--black);color:var(--ink)}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
main{overflow:hidden}

/* HERO — same cinematic language as landing page */
.about-hero{
  position:relative;
  height:min(820px,100vh);
  min-height:680px;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
}
.hero-image{
  position:absolute;inset:0;z-index:-3;
  background:url("Garment Department.jpg") center 52%/cover no-repeat;
  transform:scale(1.015);
}
.gradient{position:absolute;left:0;width:100%;pointer-events:none;z-index:-1}
.gradient.top{
  top:0;height:38%;
  background:linear-gradient(to bottom,rgba(0,0,0,.84),rgba(0,0,0,.45),transparent);
}
.gradient.bottom{
  bottom:0;height:55%;
  background:linear-gradient(to top,rgba(2,5,8,1),rgba(2,5,8,.86) 25%,rgba(2,5,8,.25) 72%,transparent);
  filter:drop-shadow(0 -14px 30px rgba(0,0,0,.45));
}
.hero-header{
  position:absolute;top:0;left:0;width:100%;
  padding:34px 5.5vw;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:3px;
}
.back-link{opacity:.82;transition:.3s}
.back-link:hover{opacity:1;color:var(--gold);transform:translateX(-3px)}
.page-label{color:var(--gold)}
.hero-content{
  width:100%;padding:0 7vw 62px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:50px
}
.eyebrow{font-size:11px;letter-spacing:4px;font-weight:600;line-height:1.6}
.hero-content h1{
  margin-top:16px;font-family:"Montserrat",sans-serif;
  font-size:clamp(70px,10vw,150px);line-height:.82;font-weight:600;
  letter-spacing:-5px
}
em{font-style:normal;color:var(--gold)}
.hero-side{
  font-size:13px;letter-spacing:2px;line-height:1.8;text-align:right;
  text-transform:uppercase;opacity:.82
}

/* COMMON SECTIONS */
.section-inner{width:min(1280px,88%);margin:auto;padding:125px 0}
.section-light{background:var(--white)}
.section-dark{background:var(--dark);color:#fff}
.two-column{
  display:grid;grid-template-columns:34% 1fr;gap:8%;
}
.section-number{display:block;color:var(--gold);font-size:11px;letter-spacing:3px;margin-bottom:28px}
.section-title h2,.section-heading h2{
  font-family:"Montserrat",sans-serif;font-size:clamp(48px,6vw,82px);
  line-height:.98;letter-spacing:-2px;font-weight:600
}
.story-copy{max-width:760px;padding-top:46px}
.story-copy p,.objective-copy p{
  font-size:17px;line-height:1.9;color:#50555a;margin-bottom:24px
}
.story-copy strong{color:var(--ink)}
.story-line{height:1px;background:var(--line);margin:42px 0 28px}
.story-copy .highlight{
  font-family:"Montserrat",sans-serif;font-size:23px;line-height:1.5;color:var(--ink)
}

/* OBJECTIVES */
.section-heading{
  display:grid;grid-template-columns:34% 36% 30%;
  align-items:end;gap:3%;margin-bottom:70px
}
.section-heading .section-number{align-self:start}
.heading-note{
  max-width:390px;margin-left:auto;
  font-size:15px;line-height:1.8;opacity:.65
}
.objective-grid{
  display:grid;grid-template-columns:1.25fr .75fr;gap:7%;align-items:center
}
.objective-image{position:relative;overflow:hidden}
.objective-image:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.3),transparent 45%);
  pointer-events:none
}
.objective-image img{aspect-ratio:16/9;object-fit:cover}
.objective-copy{max-width:530px}
.objective-copy p{color:#c2c6c8}

/* DEPARTMENTS */
.department-heading{
  display:grid;
  grid-template-columns:34% 66%;
  align-items:end;
  gap:0;
  margin-bottom:80px
}
.department-heading .heading-left{align-self:start}
.department-heading .section-number{margin-bottom:28px}
.department-heading .heading-note{grid-column:2;grid-row:1;justify-self:end;margin-left:auto}
.department-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:60px 25px
}
.department-card{min-width:0}
.department-image{
  position:relative;overflow:hidden;background:#ddd;
  box-shadow:0 18px 40px rgba(0,0,0,.10)
}
.department-image img{
  aspect-ratio:1.35/1;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s
}
.department-card:hover .department-image img{transform:scale(1.055);filter:brightness(.88)}
.department-meta{
  display:grid;grid-template-columns:42px 1fr;
  gap:12px;padding-top:18px;border-top:1px solid var(--line);margin-top:15px
}
.department-meta span{font-size:10px;letter-spacing:2px;color:#999}
.department-meta h3{
  font-family:"Montserrat",sans-serif;font-size:18px;line-height:1.3;font-weight:600
}

/* FOOTER — matching landing page */
.footer{
  min-height:230px;background:var(--black);color:#d4d7da;
  display:flex;align-items:center;justify-content:space-between;
  padding:50px 7vw;gap:30px
}
.footer-brand{
  display:flex;
  align-items:center;
}
.footer-brand img{
  width:118px;
  height:auto;
  object-fit:contain;
}
.footer-brand span{font-size:11px;letter-spacing:3px;color:#aaa}
.footer-credit{display:flex;align-items:center;gap:15px;font-size:13px}
.footer-credit a:first-of-type{color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.footer-credit a:hover{color:#fff}
.footer-divider{width:1px;height:20px;background:#555;margin:0 8px}

/* reveal */
.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){
  .about-hero{min-height:650px;height:78vh}
  .hero-content{padding:0 7vw 48px}
  .hero-content h1{font-size:clamp(65px,15vw,105px)}
  .hero-side{font-size:10px}
  .two-column,.objective-grid{grid-template-columns:1fr;gap:30px}
  .story-copy{padding-top:10px}
  .section-heading{grid-template-columns:1fr 1fr;gap:35px}
  .heading-note{grid-column:2;margin-left:0}
  .department-grid{grid-template-columns:repeat(2,1fr)}
  .footer{flex-direction:column;align-items:flex-start}
  .department-heading{grid-template-columns:1fr 1fr;gap:35px}
  .department-heading .heading-note{grid-column:2;grid-row:1;margin-left:0}
}

@media(max-width:600px){
  .about-hero{min-height:620px}
  .hero-header{padding:25px 6vw}
  .hero-content{display:block;padding:0 6vw 42px}
  .hero-content h1{font-size:70px;letter-spacing:-3px}
  .hero-side{text-align:left;margin-top:30px}
  .section-inner{width:87%;padding:90px 0}
  .section-title h2,.section-heading h2{font-size:48px}
  .section-heading{display:block;margin-bottom:48px}
  .department-heading{display:block}
  .department-heading .heading-note{margin-top:28px}
  .heading-note{margin-top:28px}
  .objective-image img{aspect-ratio:1.2/1;object-fit:cover}
  .department-grid{grid-template-columns:1fr;gap:45px}
  .footer{min-height:190px;padding:45px 7vw}
  .footer-credit{flex-wrap:wrap}
}