/* About layout (type, buttons and photo parts come from site.css) */

/* Banner with title over the photo */
.bleed{min-height:62vh;display:flex;align-items:center;background:#26241F;}
.bleed img{object-position:center 58%;}
.bleed:after,.commit:after{content:"";position:absolute;inset:0;}
.bleed:after{background:linear-gradient(90deg,rgba(24,22,18,.78) 0%,rgba(24,22,18,.5) 45%,rgba(24,22,18,.18) 100%);}
.bleed .container{position:relative;z-index:2;width:100%;padding-top:80px;color:var(--white);}
.bleed h1{margin-top:22px;max-width:14ch;}

/* Mission + vision */
.mv .grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:64px;}
.mv .rule{background:var(--fog);}
.mv h2{margin-top:24px;}
.mv p{margin-top:20px;max-width:56ch;text-wrap:pretty;}
.mv p.strong{font-weight:400;color:var(--charcoal);}
.mv p.found{margin-top:40px;padding-top:28px;border-top:1px solid var(--fog);}

/* Scripture */
.creed{position:relative;background:var(--clay);color:#F4F2EC;text-align:center;overflow:hidden;}
.creed:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 120% at 50% 50%,rgba(255,240,215,.1),rgba(0,0,0,0) 70%),linear-gradient(90deg,rgba(40,26,15,.25),rgba(40,26,15,0) 40%,rgba(40,26,15,0) 60%,rgba(40,26,15,.25));pointer-events:none;}
.creed .container{position:relative;}
.creed blockquote{max-width:24ch;margin:28px auto 0;}
.creed .eyebrow{color:var(--sand-lt);}
.creed cite{display:block;margin-top:24px;font-style:normal;color:var(--sand-lt);}

/* Four disciplines: the approved "Our principles" layout (label and heading, thin rule, a vertical list),
   with a short bronze line where the principles had numbers. Colors follow that design. */
.disc-grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:104px;align-items:center;}
.disc-grid .rule{background:rgba(252,251,247,.2);align-self:stretch;}
.disc-l .t-body{margin-top:28px;max-width:44ch;}
.disciplines .eyebrow{color:var(--paper);}
.disciplines .eyebrow--rule:after{flex-basis:88px;border-color:rgba(244,241,234,.5);}
.disciplines h2{margin-top:40px;color:var(--white);}
.disciplines .t-h2 em{color:var(--bronze-lt);}
.svcs{list-style:none;}
.svc{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:12px;padding:32px 0;border-bottom:1px solid var(--rule-dark);}
.svc:first-child{padding-top:0;}
.svc:last-child{padding-bottom:0;border-bottom:0;}
.svc:before{content:"";grid-row:1 / span 2;width:28px;height:1px;margin-top:14px;background:var(--bronze-lt);}
.svc h3{margin-bottom:4px;color:var(--white);}
/* Our approach: text beside the floor plan, the three steps in a row below, then a full-width photo band */
.ap-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:center;}
.ap-text h2{margin:28px 0;}
.ap-text .t-body{max-width:42ch;}
/* Wood strip behind the plan (the client's own photo), like a material sample on a drawing table */
.ap-plan{position:relative;justify-self:center;width:100%;max-width:460px;padding:56px 0 40px 52px;}
.ap-plan:before{content:"";position:absolute;left:0;top:0;bottom:0;width:34%;background:linear-gradient(rgba(33,31,28,.3),rgba(33,31,28,.3)),var(--clay) url(/images/texture-wood.jpg?v=2) center/cover no-repeat;}
.ap-plan img{position:relative;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:0 50%;background:var(--white);box-shadow:0 18px 40px rgba(33,31,28,.14);}
.ap-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:112px;}
.ap-steps li{padding:0 48px;border-left:1px solid var(--fog);}
.ap-steps li:first-child{padding-left:0;border-left:0;}
.ap-steps li:last-child{padding-right:0;}
.ap-steps .n{display:block;margin-bottom:28px;font-family:var(--serif);font-size:36px;font-weight:400;line-height:1;color:var(--bronze);}
.ap-steps h3{margin-bottom:14px;}
.ap-photo{height:clamp(240px,23vw,340px);}
.ap-photo img{object-position:center 40%;transform:scale(1.12) translateX(5%);}

/* Commitment */
.commit{min-height:640px;display:flex;align-items:center;background:#26241F;}
.commit img{object-position:center 55%;}
.commit:after{background:linear-gradient(90deg,rgba(24,22,18,.84) 0%,rgba(24,22,18,.6) 38%,rgba(24,22,18,.1) 72%);}
.commit .container{position:relative;z-index:2;width:100%;color:var(--white);}
.commit h2{margin:0 0 20px;}
.commit .t-body{color:rgba(252,251,247,.88);max-width:44ch;margin-bottom:34px;}

/* Mid-size screens keep the four columns, with a slimmer photo and tighter gaps */
@media(max-width:1180px){
  .disc-grid{gap:64px;}
  .ap-top{gap:64px;}
  .ap-steps li{padding:0 32px;}
}
@media(max-width:900px){
  .ap-top{grid-template-columns:minmax(0,1fr);gap:56px;}
  .ap-plan{justify-self:start;max-width:360px;padding:40px 0 28px 36px;}
  .ap-steps{grid-template-columns:minmax(0,1fr);margin-top:64px;}
  .ap-steps li,.ap-steps li:first-child{padding:32px 0;border-left:0;border-top:1px solid var(--fog);}
  .ap-steps li:first-child{padding-top:0;border-top:0;}
  .ap-steps li:last-child{padding-bottom:0;}
  .ap-steps .n{margin-bottom:18px;}
  .ap-photo{height:auto;aspect-ratio:4/3;}
  .bleed{min-height:52vh;}
  .mv .grid{grid-template-columns:1fr;gap:48px;}
  .mv .rule{display:none;}
  .disc-grid{grid-template-columns:minmax(0,1fr);gap:56px;}
  .disc-grid .rule{display:none;}
  .disciplines h2{margin-top:28px;}
  .svc{grid-template-columns:48px minmax(0,1fr);padding:28px 0;}
  .commit{min-height:480px;}
  .commit:after{background:linear-gradient(90deg,rgba(24,22,18,.82),rgba(24,22,18,.55));}
}