/* Moving Resources (хаб) — по макету goldman-movers-bay-area-moving-resources.html */

.hero{padding:115px 0 95px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero:after{
  content:"GUIDES";position:absolute;right:-25px;bottom:-42px;
  font-size:clamp(120px,19vw,300px);font-weight:900;line-height:.75;
  letter-spacing:-.09em;color:#0b0b0b;z-index:0;pointer-events:none;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}
.hero p{font-size:19px;color:#aaa;max-width:670px}
.hero-side{border-left:1px solid var(--line);padding-left:42px;color:#929089}
.hero-side strong{display:block;color:var(--gold);font-size:13px;letter-spacing:.1em;margin-bottom:15px}

.featured{padding:110px 0}
.featured-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:48px}
.featured-head p{max-width:500px;color:#8f8c85}
.feature{display:grid;grid-template-columns:1.05fr .95fr;min-height:540px;border-block:1px solid var(--line)}
.feature .bam-ph{height:100%}
.feature-copy{padding:60px;display:flex;flex-direction:column;justify-content:center;background:var(--panel)}
.number{color:var(--gold);font-size:12px;letter-spacing:.15em}
.feature h2{font-size:clamp(32px,4.2vw,62px);line-height:.97;letter-spacing:-.045em;margin:28px 0 20px}
.feature p{color:#999;font-size:16px;max-width:590px}
.textlink{
  margin-top:25px;color:var(--gold);font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;align-self:flex-start;
  border-bottom:1px solid transparent;transition:border-color .25s ease;
}
.textlink:hover{border-bottom-color:var(--gold)}

.guides{padding:110px 0;background:var(--panel);border-block:1px solid var(--line)}
.guide-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:end;margin-bottom:45px}
.guide-head p{color:#999;max-width:650px}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.guide{
  padding:34px 32px 38px 0;min-height:355px;display:block;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;
}
.guide:not(:nth-child(3n+1)){padding-left:32px}
.guide:nth-child(3n){border-right:0}
.guide span{color:var(--gold);font-size:11px;letter-spacing:.13em}
.guide h3{font-size:28px;line-height:1.08;margin:80px 0 15px;max-width:320px;transition:color .25s ease}
.guide p{font-size:14px;color:#89867f;max-width:330px}
.guide em{
  position:absolute;bottom:35px;font-style:normal;color:var(--gold);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.guide:hover h3{color:var(--gold2)}

.plan{padding:120px 0}
.plan-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:75px}
.timeline{border-top:1px solid var(--line)}
.time{display:grid;grid-template-columns:120px 1fr;gap:30px;padding:26px 0;border-bottom:1px solid var(--line)}
.time b{color:var(--gold);font-size:11px;letter-spacing:.1em}
.time h3{font-size:20px;margin:0 0 7px}
.time p{margin:0;color:#89867f;font-size:14px}

.topics{padding:110px 0;background:var(--panel);border-block:1px solid var(--line)}
.topics-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:45px;border-top:1px solid var(--line)}
.topic{padding:30px 26px 30px 0;border-right:1px solid var(--line);min-height:190px}
.topic:not(:first-child){padding-left:26px}
.topic:last-child{border-right:0}
.topic small{color:var(--gold)}
.topic h3{font-size:20px;margin:48px 0 0}
.topic p{color:#85827b;font-size:13px}

@media(max-width:1000px){
  .hero-grid,.feature,.guide-head,.plan-grid{grid-template-columns:1fr}
  .hero-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:30px}
  .guide-grid{grid-template-columns:1fr 1fr}
  .guide:nth-child(3n){border-right:1px solid var(--line)}
  .guide:nth-child(even){border-right:0}
  .guide:not(:nth-child(3n+1)){padding-left:25px}
  .guide:nth-child(odd){padding-left:0}
  .topics-grid{grid-template-columns:1fr 1fr}
  .topic:nth-child(2){border-right:0}
  .feature .bam-ph{height:400px}
}
@media(max-width:650px){
  .hero{padding:80px 0}
  .display{font-size:52px}
  .featured,.guides,.plan,.topics{padding:75px 0}
  .featured-head{display:block}
  .featured-head p{margin-top:18px}
  .feature .bam-ph{height:320px}
  .feature-copy{padding:35px 24px}
  .guide-grid,.topics-grid{grid-template-columns:1fr}
  .guide,.guide:not(:nth-child(3n+1)),.guide:nth-child(odd){padding:28px 0 70px;border-right:0;min-height:0}
  .guide h3{margin-top:45px}
  .topic,.topic:not(:first-child){padding:25px 0;border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .topic h3{margin-top:26px}
  .time{grid-template-columns:85px 1fr;gap:18px}
  .hero:after{font-size:110px}
}