/* =====================================================================
   AKL Architects - About page (/akl-aboutus), the "About us" section
   (section.akl-about, about_us.blade.php). Loaded by that page only;
   every rule is scoped to .akl-about, so no other page or school changes.
   AKL-ABOUT-MODERN, 2026-11-02.
   ===================================================================== */
.akl-about{clear:both;--ink:#131311;--text:#3A3934;--muted:#6B6963;--paper:#F4F3F0;--hair:rgba(19,19,17,.12);--green:#03382E;--display:"Epilogue",Georgia,serif;--body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--paper);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.akl-about *{box-sizing:border-box}
.akl-about .akl-wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.akl-about p,.akl-about li{margin:0;font-family:var(--body);font-size:inherit;line-height:inherit;font-weight:400;letter-spacing:0;color:inherit;text-align:left}
.akl-about p + p{margin-top:1.1em}
.akl-about strong,.akl-about b{font-weight:500;color:var(--ink)}
.akl-about h1,.akl-about h2,.akl-about h3{margin:0;font-family:var(--display);font-weight:600;color:var(--ink);text-transform:none;text-wrap:balance}
.akl-about .akl-eyebrow{margin:0 0 20px;font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
/* Hero */
.akl-about__hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-block:clamp(64px,9vw,120px) clamp(48px,6vw,80px)}
.akl-about__hero .akl-eyebrow{grid-column:1/-1}
.akl-about__hero h1{grid-column:1/span 8;max-width:12ch;font-size:clamp(44px,6vw,80px);line-height:1.02;letter-spacing:-.03em}
.akl-about .akl-about__lead-quote{grid-column:9/span 4;padding-bottom:8px;font-family:var(--display);font-size:clamp(18px,1.6vw,21px);line-height:1.5;font-style:italic;color:var(--muted)}
/* Firm vision */
.akl-about__statement{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--hair)}
.akl-about .akl-statement__lead{grid-column:5/span 8;margin:0 0 40px;font-family:var(--display);font-size:clamp(22px,2.2vw,28px);line-height:1.45;letter-spacing:-.012em;color:var(--ink)}
.akl-about .akl-statement__lead strong{font-weight:500}
.akl-about .akl-statement__col{grid-column:5/span 4;margin-top:0;padding-right:16px;font-size:16px}
.akl-about .akl-statement__col + .akl-statement__col{grid-column:9/span 4;padding:0 0 0 16px}
/* Label + text rows */
.akl-block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-block:clamp(36px,4.5vw,56px);border-top:1px solid var(--hair)}
.akl-block h3{grid-column:1/span 4;padding-right:24px;font-size:clamp(19px,1.6vw,22px);line-height:1.3;letter-spacing:-.01em}
.akl-block__body{grid-column:5/span 8;max-width:68ch}
.akl-about .akl-block__lead{margin:1.4em 0;font-family:var(--display);font-size:clamp(20px,1.8vw,23px);line-height:1.45;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.akl-about .akl-block__lead strong{font-weight:inherit}
.akl-about .akl-block__label{margin-top:1.4em;font-size:15px;font-weight:600;color:var(--ink)}
.akl-about .akl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 24px;padding:0;list-style:none}
.akl-about .akl-chips li{list-style:none;padding:7px 16px;border:1px solid var(--hair);border-radius:999px;background:#fff;font-size:14px;line-height:1.4;font-weight:500;color:var(--ink)}
.akl-about .akl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin:20px 0 0;padding:0;list-style:none}
.akl-about .akl-list li{list-style:none;padding:12px 0;border-top:1px solid var(--hair);font-size:15px;line-height:1.5}
/* Awards */
.akl-about__awards{padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--hair)}
.akl-about__awards-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-bottom:40px}
.akl-about__awards-head h2{grid-column:1/span 4;font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-.02em}
.akl-about__awards-head > div{grid-column:5/span 8;max-width:68ch;font-size:16px;color:var(--muted)}
.akl-about .akl-awards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin:0;padding:0;list-style:none;counter-reset:aw}
.akl-about .akl-awards li{position:relative;list-style:none;padding:20px 0 20px 48px;border-top:1px solid var(--hair);font-size:15px;line-height:1.6;color:var(--muted)}
.akl-awards li::before{counter-increment:aw;content:counter(aw,decimal-leading-zero);position:absolute;left:0;top:20px;line-height:24px;font-size:12px;font-weight:500;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--green)}
.akl-awards li em,.akl-awards li i{font-style:normal}
.akl-about .akl-awards li strong{font-weight:600}
/* Philosophy */
.akl-about__philosophy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding-block:clamp(56px,7vw,104px) clamp(72px,9vw,136px);border-top:1px solid var(--hair)}
.akl-about__philosophy-text{grid-column:8/span 5;font-size:16px}
.akl-about .akl-about__pull{margin:16px 0 28px;font-family:var(--display);font-size:clamp(21px,2vw,25px);line-height:1.4;letter-spacing:-.012em;color:var(--ink)}
.akl-about .akl-about__pull strong{font-weight:500}
.akl-about__pull em,.akl-about__pull i{font-style:normal}
/* Tablet & phone */
@media (max-width:991.98px){
  .akl-about__hero h1,.akl-about .akl-about__lead-quote{grid-column:1/-1}
  .akl-about .akl-about__lead-quote{margin-top:28px;padding-bottom:0}
  .akl-about .akl-statement__lead,.akl-about .akl-statement__col,.akl-about .akl-statement__col + .akl-statement__col{grid-column:1/-1;padding:0}
  .akl-about .akl-statement__col + .akl-statement__col{margin-top:1.1em}
  .akl-block h3,.akl-block__body,.akl-about__awards-head h2,.akl-about__awards-head > div{grid-column:1/-1}
  .akl-block h3,.akl-about__awards-head h2{margin-bottom:16px}
  .akl-about .akl-awards{grid-template-columns:1fr}
  .akl-about__philosophy-text{grid-column:1/-1}
}
@media (max-width:575.98px){
  .akl-about{font-size:16px}
  .akl-about .akl-list{grid-template-columns:1fr}
  .akl-about .akl-awards li{padding-left:40px}
}
/* Philosophy portrait: arch with offset line frame */
.akl-about__portrait-arch{grid-column:1/span 5;margin:0;padding:16px 0 0 16px}
.akl-arch-wrap{position:relative}
.akl-arch-wrap::before{content:"";position:absolute;inset:-16px 16px 16px -16px;border:1px solid rgba(19,19,17,.25);border-radius:999px 999px 4px 4px;pointer-events:none}
.akl-arch{position:relative;z-index:1;aspect-ratio:4/5;border-radius:999px 999px 4px 4px;overflow:hidden;background:#E6E4DF}
.akl-arch img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% 35%;filter:grayscale(1) contrast(1.06);transform:scale(1.02);transition:transform 1s cubic-bezier(.22,1,.36,1)}
.akl-about__portrait-arch:hover .akl-arch img{transform:scale(1.06)}
.akl-about__portrait-arch figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:24px;padding-top:14px;border-top:1px solid var(--hair);font-size:14px;line-height:1.4;color:var(--muted)}
.akl-about__portrait-arch figcaption strong{font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink)}
.akl-about__philosophy .akl-about__philosophy-text{grid-column:7/span 6}
@media (max-width:991.98px){
  .akl-about__portrait-arch{grid-column:1/-1;max-width:400px;margin-bottom:48px}
  .akl-about__philosophy .akl-about__philosophy-text{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.akl-arch img{transition:none}}
/* Section headings that sit outside .akl-block use the same style as .akl-block h3 */
.akl-about .akl-section-title{margin:0;font-family:var(--display);font-size:clamp(19px,1.6vw,22px);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-transform:none}
.akl-about__statement .akl-section-title{grid-column:1/span 4;padding-right:24px}
.akl-about__philosophy-text .akl-section-title{margin-bottom:8px}
@media (max-width:991.98px){
  .akl-about__statement .akl-section-title{grid-column:1/-1;margin-bottom:16px}
}