/* About — по макету goldman-movers-bay-area-about.html */

.hero{min-height:790px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
/* Фото на всю ширину и градиент как на главной (правка 26.09). */
.hero-photo{position:absolute;inset:0}
.hero-photo:before{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.82) 22%,rgba(5,5,5,.5) 40%,rgba(5,5,5,.12) 58%,rgba(5,5,5,0) 70%),
    linear-gradient(180deg,rgba(5,5,5,.35) 0%,rgba(5,5,5,0) 22%,rgba(5,5,5,0) 78%,rgba(5,5,5,.45) 100%);
}
.hero-photo .bam-ph{position:absolute;inset:0}
.hero-photo .bam-ph:not(.has-img){background:linear-gradient(135deg,#333,#0a0a0a)}
.hero-inner{min-height:790px;display:flex;align-items:center;position:relative;z-index:3}
.hero-copy{width:59%;padding:70px 0}
.hero-copy p{font-size:19px;color:#aaa;max-width:650px}

.statement{padding:115px 0}
.statement-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:75px}
.statement-big{font-size:clamp(30px,4.1vw,66px);line-height:1.03;letter-spacing:-.045em;margin:0}
.statement-copy{border-left:1px solid var(--line);padding-left:48px}
.statement-copy p{color:#aaa;font-size:17px;margin-top:0}

.photo-band{display:grid;grid-template-columns:1.45fr .75fr;height:570px;gap:4px;background:#000}
.photo-band .bam-ph{height:100%}

.approach{padding:115px 0;background:var(--panel);border-block:1px solid var(--line)}
.principles{border-top:1px solid var(--line)}
.principle{display:grid;grid-template-columns:90px .85fr 1.15fr;gap:30px;padding:31px 0;border-bottom:1px solid var(--line);align-items:start}
.principle>span{color:var(--gold);font-size:12px}
.principle h3{font-size:28px;margin:0}
.principle p{color:#929089;margin:2px 0 0}

.local{padding:120px 0}
.local-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:75px;align-items:center}
.local-photo{height:650px}
.local-copy p{color:#999;font-size:17px}
.details{margin-top:35px;border-top:1px solid var(--line)}
.detail{display:grid;grid-template-columns:35px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
.detail b{color:var(--gold);font-size:11px}
.detail span{color:#bbb}
.local-copy .btn{margin-top:30px}

.different{padding:115px 0;background:var(--panel);border-block:1px solid var(--line)}
.different-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:75px}
.big-word{
  font-size:clamp(70px,10vw,155px);font-weight:900;line-height:.7;letter-spacing:-.08em;
  color:#111;-webkit-text-stroke:1px #3b362d;margin-top:55px;
}
.cards{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.card{min-height:250px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.card:nth-child(even){border-right:0}
.card span{color:var(--gold);font-size:11px}
.card h3{font-size:23px;margin:55px 0 10px}
.card p{color:#8d8a83;font-size:14px}

.services{padding:115px 0}
.service-links{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:45px}
.service{background:#050505;padding:31px;min-height:180px;display:block;transition:background .25s ease}
.service small{color:var(--gold);letter-spacing:.12em}
.service h3{font-size:22px;margin:45px 0 0;transition:color .25s ease}
.service:hover{background:#0c0c0c}
.service:hover h3{color:var(--gold)}

@media(max-width:1000px){
  .statement-grid,.local-grid,.different-grid{grid-template-columns:1fr}
  .statement-copy{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:30px}
  .principle{grid-template-columns:55px 1fr}
  .principle p{grid-column:2}
  .service-links{grid-template-columns:1fr 1fr}
  .hero-photo{inset:48% 0 0}
  .hero-photo:before{background:linear-gradient(180deg,#050505 0%,rgba(5,5,5,.55) 30%,rgba(5,5,5,.1) 65%,rgba(5,5,5,.3) 100%)}
  .hero-copy{width:100%;align-self:flex-start;padding-top:80px}
  .photo-band{height:700px;grid-template-columns:1fr 1fr;grid-template-rows:1.2fr .8fr}
  .photo-band .bam-ph:first-child{grid-column:span 2}
}
@media(max-width:650px){
  .hero,.hero-inner{min-height:700px}
  .display{font-size:52px}
  .statement,.approach,.local,.different,.services{padding:75px 0}
  .photo-band{display:block;height:auto}
  .photo-band .bam-ph{height:300px;margin-bottom:4px}
  .photo-band .bam-ph:first-child{height:400px}
  .principle{grid-template-columns:40px 1fr}
  .cards,.service-links{grid-template-columns:1fr}
  .card{border-right:0;min-height:200px}
  .card h3{margin-top:35px}
  .local-photo{height:420px}
}