/* =====================================================================
   sampura.me homepage
   Loaded after styles.css. Adds only the components the homepage uses;
   nothing in the shared stylesheet is overridden.
   ===================================================================== */

/* ---------- Section rhythm helpers ---------- */
.section.medium{padding:90px 0;}
.head-row{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);
  gap:40px 64px; align-items:end; margin-bottom:44px;
}
.head-row p{color:var(--ink-dim); max-width:520px;}
@media (max-width:820px){
  .head-row{grid-template-columns:1fr; gap:18px;}
}

/* ---------- 2. Record wall ---------- */
.record-wall{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.record{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:2px;
  background:var(--surface-2); box-shadow:0 0 0 1px var(--line);
}
.record img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;}
.record:hover img{transform:scale(1.03);}
.record .r-meta{
  position:absolute; left:0; right:0; bottom:0; padding:56px 16px 14px;
  background:linear-gradient(0deg, rgba(10,9,13,.94) 0%, rgba(10,9,13,.55) 55%, rgba(10,9,13,0));
}
.record .r-artist{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(16px,1.6vw,21px); line-height:1; color:var(--ink);
}
.record .r-album{font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); margin-top:5px;}
.record .r-role{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.04em; margin-top:3px; text-transform:uppercase;}
.record .r-proof{
  position:absolute; top:12px; left:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--violet-bright); background:rgba(10,9,13,.8); border:1px solid var(--violet-dim);
  padding:5px 8px; border-radius:2px;
}
.wall-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px 40px;
  margin-top:40px; padding-top:32px; border-top:1px solid var(--line);
}
.wall-stats .n{
  font-family:var(--display); font-weight:800; font-size:clamp(30px,3.4vw,48px);
  line-height:1; color:var(--violet-bright); display:block;
}
.wall-stats .l{font-family:var(--mono); font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:8px; display:block;}
@media (max-width:900px){
  .record-wall{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .record-wall{grid-template-columns:repeat(2,1fr); gap:10px;}
  .record .r-meta{padding:40px 12px 12px;}
  .wall-stats{grid-template-columns:1fr 1fr; gap:22px 20px;}
}

/* ---------- Compact philosophy under the identity statement ---------- */
.formula{
  margin-top:40px; padding-top:30px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; align-items:start;
}
.formula h3{font-size:clamp(28px,3.4vw,44px); line-height:.98;}
.formula p{color:var(--ink-dim); font-size:17px; max-width:560px;}
@media (max-width:820px){
  .formula{grid-template-columns:1fr; gap:14px;}
}

/* ---------- 6. Built around the work ---------- */
.chapter{
  border-top:1px solid var(--line); padding:64px 0 0;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center;
}
.chapter:last-of-type{padding-bottom:0;}
.chapter-hero{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px;
}
.chapter-hero.wide{
  aspect-ratio:16/10; object-position:center 55%;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px var(--line);
}
.chapter-body h3{font-size:clamp(32px,4.4vw,58px); line-height:.96; margin-bottom:20px;}
.chapter-body > p{color:var(--ink-dim); max-width:520px;}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.chips span{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-dim); border:1px solid var(--line); border-radius:2px; padding:8px 12px;
}
@media (max-width:900px){
  .chapter{grid-template-columns:1fr; gap:28px; padding-top:48px;}
}
.chapter-head{margin-bottom:16px;}
.chapter-head .ch-num{
  font-family:var(--mono); font-size:12.5px; color:var(--violet-bright); letter-spacing:.14em;
}
.chapter-head .ch-name{
  font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase;
}

.callout{
  margin-top:26px; max-width:520px; padding:22px 24px; border-left:2px solid var(--violet-dim); background:var(--surface);
}
.ch-cta{display:flex; align-items:center; gap:18px 24px; flex-wrap:wrap; margin-top:30px;}
.ch-cta .text-link{white-space:nowrap;}
.callout .c-stats{
  display:grid; grid-template-columns:auto auto; justify-content:start; gap:14px 44px; align-items:end;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.callout .c-stats .n{
  font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.9;
  font-size:clamp(28px,3.2vw,44px); color:var(--violet-bright); display:block;
}
.callout .c-stats .l{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-top:7px; display:block;
}
.callout p{font-size:14.5px; color:var(--ink-dim); max-width:none;}
.callout .c-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.proof-line{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--violet-bright); padding-top:20px; border-top:1px solid var(--line);
  margin-bottom:38px; line-height:1.9;
}
@media (max-width:520px){
  .tools-list li{grid-template-columns:1fr; gap:4px;}
}
@media (max-width:900px){
  .ch-tools{grid-template-columns:1fr; gap:28px;}
}
@media (max-width:520px){
  .tool-grid{grid-template-columns:1fr;}
}

/* ---------- Service range line under What Happens Next ---------- */
.range{margin-top:34px; padding-top:24px; border-top:1px solid var(--line); max-width:760px;}
.range-list{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
  line-height:1.9;
}
.range p{font-size:14.5px; color:var(--muted); margin-top:10px;}

/* ---------- Three steps ---------- */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:40px;
}
.step .s-num{
  font-family:var(--display); font-weight:800; font-size:clamp(48px,6vw,84px); line-height:.9;
  color:var(--violet-dim); -webkit-text-stroke:1px var(--violet-bright);
}
.step h3{font-size:clamp(22px,2.4vw,30px); margin:16px 0 12px;}
.step p{font-size:15px; color:var(--ink-dim);}
@media (max-width:760px){
  .steps{grid-template-columns:1fr; gap:30px;}
}

/* ---------- 8. Human proof ---------- */
.human{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:64px; align-items:start;
}
.human-media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 32%; border-radius:2px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px var(--line);
}
.human .pull-quote{margin:26px 0 0;}
@media (max-width:860px){
  .human{grid-template-columns:1fr; gap:32px;}
  .human-media img{aspect-ratio:16/11;}
}

/* ---------- Case study grid tweak (homepage only) ---------- */
/* Same cards as case-studies.html, at equal size so the section reads as
   a band of proof rather than one hero + five. */
.ob-cs.three{grid-template-columns:repeat(3,1fr); gap:18px;}
.ob-cs.three .cs-card{min-height:440px;}
.ob-cs.three .cs-card .cs-body{padding:26px;}
@media (max-width:900px){
  .ob-cs.three{grid-template-columns:1fr;}
  .ob-cs.three .cs-card{min-height:340px;}
}

/* ---------- 7. Quick inquiry ---------- */
.quick h2{font-size:clamp(34px,4.6vw,62px); line-height:.96;}
.quick h2 .accent{color:var(--violet-bright);}
.quick form > div{margin-bottom:18px;}
.quick textarea{min-height:96px;}

/* ---------- Mentorship block ---------- */
.mentor-home{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:start;
}
.mentor-home h2{font-size:clamp(30px,4.2vw,58px); line-height:.96;}
.mentor-home p{color:var(--ink-dim);}
@media (max-width:860px){
  .mentor-home{grid-template-columns:1fr; gap:24px;}
}