/**
 * The Cabinet Studio — About page (page-templates/about.php).
 * Loaded only on that template, after main.css and pages.css (shared hero, panels, CTA).
 */

/* ---------- About page (from the design) ---------- */
.a-hero{min-height:min(78vh,740px)}
.a-hero h1{font-size:clamp(46px,7.2vw,112px)}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.story-imgs{position:relative;height:620px}
.si-1{position:absolute;left:0;top:0;width:72%;height:78%;border-radius:var(--r-xl)}
.si-2{position:absolute;right:0;bottom:0;width:52%;height:52%;border-radius:var(--r-xl);border:8px solid var(--bg)}
.since{position:absolute;left:6%;bottom:6%;background:var(--brown);color:#F3E7DA;border-radius:var(--r-lg);display:flex;align-items:center;gap:14px;box-shadow:0 20px 40px -20px rgba(30,24,20,.6)}
.cs-about .site-main .since{padding:22px 26px}
.since b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:52px;line-height:1;color:#E3C9A8}
.since span{font-size:13px;line-height:1.35;opacity:.85;order:-1}
.cs-about .site-main .story-text h2{margin:18px 0 26px}
.cs-about .site-main .story-text .lead+.lead{margin-top:14px}
.sign{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line)}
.cs-about .site-main .sign{margin-top:34px;padding-top:26px}
.sign .av{width:52px;height:52px;border-radius:50%;background:var(--g2);background-size:cover;background-position:center;flex:none}
.sign b{font-weight:600;display:block}
.sign small{color:var(--muted);font-size:13px}

/* stat strip */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-strip div{display:flex;flex-direction:column;gap:8px}
.cs-about .site-main .stat-strip div{padding:34px 28px}
.stat-strip div+div{border-left:1px solid var(--line)}
.stat-strip b{font-size:clamp(44px,5vw,70px);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--brown)}
.stat-strip span{font-size:14px;color:var(--muted)}

/* values */
.cs-about .site-main .values-intro{max-width:44ch}
.values{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:260px 260px;gap:16px}
.v-card{border-radius:var(--r-lg);display:flex;flex-direction:column;justify-content:space-between}
.cs-about .site-main .v-card{padding:30px}
.v-card h3{font-size:24px}
.cs-about .site-main .v-card h3{margin-bottom:10px}
.v-card p{font-size:15px;color:var(--muted);max-width:34ch}
.v-n{font-family:var(--serif);font-style:italic;font-size:64px;line-height:.9;color:var(--bronze)}
.v-photo{grid-row:span 2;justify-content:flex-end;color:#fff}
.v-photo h3{color:#fff}
.v-photo .v-n{color:#E3C9A8;display:block}
.cs-about .site-main .v-photo .v-n{margin-bottom:14px}
.v-photo p{color:rgba(255,255,255,.82)}
.v-sand{background:var(--sand)}
.v-paper{background:var(--paper);border:1px solid var(--line);grid-column:span 2}
.v-dark{background:linear-gradient(170deg,#5A3D2C,#2B1C14);color:#F3E7DA}
.v-dark h3{color:#F3E7DA}
.v-dark p{color:rgba(243,231,218,.75)}
.v-dark .v-n{color:#E3C9A8}

/* workshop */
.workshop .label{color:#D9B993}
.ws-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center}
.cs-about .site-main .workshop h2{margin:16px 0 22px}
.ws-lead{color:rgba(243,231,218,.75);font-size:17px;max-width:48ch}
.ws-list{list-style:none;display:grid}
.cs-about .site-main .ws-list{margin-top:34px}
.ws-list li{display:flex;gap:20px;border-top:1px solid rgba(243,231,218,.18);font-size:15px;color:rgba(243,231,218,.72)}
.cs-about .site-main .ws-list li{padding:16px 0}
.ws-list li span{font-family:var(--serif);font-style:italic;font-size:26px;color:#D9B993;line-height:1;min-width:34px}
.ws-list b{display:block;color:#F3E7DA;font-weight:500;font-size:17px}
.cs-about .site-main .ws-list b{margin-bottom:2px}
.ws-imgs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:300px 220px;gap:14px}
.ws-imgs .img{border-radius:var(--r-lg);display:flex;align-items:flex-end}
.cs-about .site-main .ws-imgs .img{padding:14px}
.wi-1{grid-column:span 2}

/* timeline */
.cs-about .site-main .journey-title{margin:16px 0 56px;max-width:16ch}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.t-item{position:relative}
.cs-about .site-main .t-item{padding:44px 28px 0 0}
.t-item::before{content:"";position:absolute;top:0;left:0;width:19px;height:19px;border-radius:50%;background:var(--bg);border:1.5px solid var(--bronze)}
.t-item.now::before{background:var(--bronze);box-shadow:0 0 0 6px rgba(162,123,87,.2)}
.t-year{font-family:var(--serif);font-style:italic;font-size:40px;color:var(--bronze);line-height:1}
.t-item h3{font-size:21px}
.cs-about .site-main .t-item h3{margin:14px 0 8px}
.t-item p{font-size:15px;color:var(--muted);max-width:28ch}

/* clients */
.clients{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cl{height:420px;border-radius:var(--r-lg);display:flex;align-items:flex-end;transition:transform .35s}
.cs-about .site-main .cl{padding:16px}
.cl:hover{transform:translateY(-6px)}
.cl-body{background:rgba(251,248,244,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--r-md);width:100%}
.cs-about .site-main .cl-body{padding:18px 20px}
.cl-body h3{font-size:18px}
.cs-about .site-main .cl-body h3{margin-bottom:6px}
.cl-body p{font-size:14px;color:var(--muted)}

/* team */
.cs-about .site-main .team-intro{max-width:40ch}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tm-img{aspect-ratio:4/5;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--sand),var(--taupe));display:grid;place-items:center;position:relative;overflow:hidden}
.cs-about .site-main .tm-img{margin-bottom:16px}
.tm-img::after{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;top:22%;background:rgba(255,255,255,.35)}
.tm-img::before{content:"";position:absolute;width:80%;height:40%;border-radius:50% 50% 0 0;bottom:-6%;background:rgba(255,255,255,.3)}
.tm-img span{position:absolute;bottom:14px;left:14px;font-size:12px;color:var(--brown);background:rgba(251,248,244,.85);border-radius:999px;z-index:1}
.cs-about .site-main .tm-img span{padding:5px 10px}
.tm-img.has-photo::before,.tm-img.has-photo::after{display:none}
.tm-img.has-photo img{width:100%;height:100%;object-fit:cover}
.tm h3{font-size:20px}
.tm p{font-size:14px;color:var(--muted)}

/* area */
.cs-about .site-main .area-sec{padding-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-about .site-main .chips{margin-top:28px}
.chips span{border-radius:999px;border:1px solid var(--line);font-size:14px;background:var(--bg)}
.cs-about .site-main .chips span{padding:9px 16px}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .story,.ws-grid{grid-template-columns:1fr;gap:50px}
  .story-imgs{height:520px}
  .values{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .v-photo{grid-row:auto;grid-column:span 2;min-height:320px}
  .v-card{min-height:240px}
  .timeline{grid-template-columns:1fr 1fr;row-gap:40px}
  .timeline::before{display:none}
  .clients,.team{grid-template-columns:1fr 1fr}
  .stat-strip{grid-template-columns:1fr 1fr}
  .stat-strip div:nth-child(3){border-left:0}
  .stat-strip div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .cs-about .site-main .area-sec{padding-top:0}
  .a-hero{min-height:min(78vh,740px)}
  .story-imgs{height:420px}
  .cs-about .site-main .since{padding:16px 18px}
  .since b{font-size:38px}
  .values,.clients{grid-template-columns:1fr}
  .v-photo,.v-paper{grid-column:auto}
  .timeline{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr;gap:12px}
  .cl{height:340px}
  .ws-imgs{grid-template-rows:220px 170px}
}