/* Bottom half of the home page: websites example, work, reviews, starter bundle, about, request note.
   Loaded after the page's own <style>, so these rules win where they overlap. */

/* websites: what you get + a real example */
.web-top{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.web-top .lead{max-width:44ch}
.web-top .web-cta{margin-top:26px}
.web-eg{margin:0}
.web-eg a.shot{display:block;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(28,24,21,.55);background:var(--paper-3)}
.web-eg img{width:100%;height:auto;aspect-ratio:1200/750;object-fit:cover;transition:transform .5s var(--ease)}
.web-eg a.shot:hover img{transform:scale(1.02)}
.web-eg figcaption{margin-top:14px;font-size:15.5px;color:var(--ink-2)}
.web-eg figcaption b{color:var(--ink)}
.web-eg figcaption a{font-weight:600;color:var(--ink);text-underline-offset:3px;white-space:nowrap}

/* recent work: the last card (no picture) spans two columns so the grid has no gap */
.wk.wide{grid-column:span 2}
.wk.wide .shot{aspect-ratio:8/3}

/* reviews: six, plus a way to leave one */
.rev-grid.six{grid-template-columns:repeat(3,1fr);align-items:stretch}
.rev-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px;font-size:15.5px;color:var(--ink-2)}

/* starter bundle */
.bundle{padding:88px 0}
.bundle-box{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;background:#FFF1BF;border-radius:26px;padding:28px 44px 28px 28px}
.bundle-box .pic{border-radius:18px;overflow:hidden;background:var(--paper)}
.bundle-box .pic img{width:100%;height:auto;aspect-ratio:1024/764;object-fit:cover}
.bundle-box h2{margin-bottom:14px}
.bundle-box > div > p{font-size:1.15rem;color:var(--ink-2)}
.bundle-list{list-style:none;margin:18px 0 26px}
.bundle-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--rule);font-weight:600;font-size:1.08rem}
.bundle-list li:last-child{border-bottom:1px solid var(--rule)}
.bundle-list li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--m);flex:none}
.bundle-list li:nth-child(2)::before{background:var(--c)}
.bundle-list li:nth-child(3)::before{background:var(--ink)}

/* about */
.about{padding:88px 0;background:var(--brown);color:var(--paper)}
.about .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.about figure{margin:0}
.about figure img{width:100%;height:auto;aspect-ratio:900/522;object-fit:cover;border-radius:18px}
.about figcaption{margin-top:10px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,238,227,.7)}
.about h2{color:var(--paper)}
.about p{color:rgba(244,238,227,.88);font-size:1.1rem;margin-top:16px}
.giving{margin:26px 0 28px;padding:20px 22px;border-radius:16px;background:rgba(244,238,227,.08);border:1px solid rgba(244,238,227,.16)}
.giving b{font:700 1.2rem/1.2 var(--serif);color:var(--paper)}
.giving p{margin-top:6px;font-size:1rem}
.btn-paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-paper:hover{background:var(--y);border-color:var(--y);transform:translateY(-2px)}

/* request: plain-words reassurance above the form */
.terms{margin-bottom:16px;padding:18px 22px;border-radius:16px;background:var(--paper-2)}
.terms b{display:block;font:700 1.15rem/1.25 var(--serif)}
.terms p{margin-top:4px;font-size:15.5px;color:var(--ink-2)}

@media (max-width:1000px){
  .rev-grid.six{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .web-top,.bundle-box,.about .wrap{grid-template-columns:1fr;gap:28px}
  .bundle,.about{padding:64px 0}
  .bundle-box{padding:22px}
  .work-grid .wk.wide{grid-column:span 3}
  .wk.wide .shot{aspect-ratio:3/1}
}
@media (max-width:600px){
  .rev-grid.six{grid-template-columns:1fr}
  .work-grid .wk.wide{grid-column:span 2}
  .wk.wide .shot{aspect-ratio:2/1}
  .bundle-box{padding:16px 16px 22px;border-radius:20px}
  .bundle-box .btn{width:100%}
  .terms{padding:16px 18px}
}