/* Top half of the home page: menu, proof row, the four services.
   Loaded after the page's own <style> block, so these rules win. */

/* five menu items need a little more room before they fit on one line */
@media (max-width:1100px){
  .menu{display:none}
  .navright{margin-left:auto}
}

/* proof row, under the hero */
.proof{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.proof .wrap>div{display:flex;align-items:center;gap:14px;padding:22px 0 22px 22px;border-left:1px solid var(--rule)}
.proof .wrap>div:first-child{border-left:0;padding-left:0}
.proof b{font:800 1.9rem/1 var(--serif);letter-spacing:-.02em}
.proof .stars{font-size:1.1rem;color:var(--brown);letter-spacing:2px}
.proof span{font-size:14.5px;line-height:1.35;color:var(--ink-2)}

/* services */
.services{padding:80px 0 88px}
.services h2{margin-bottom:12px}
.services .intro{font-size:1.15rem;color:var(--ink-2);margin-bottom:44px}
.services .intro a{font-weight:600;color:var(--ink);text-underline-offset:3px}
.s-name{display:flex;align-items:center;gap:12px;font-size:clamp(1.7rem,2.6vw,2.2rem)}
.s-name i{width:14px;height:14px;border-radius:50%;flex:none}
.s-what{font-size:1.1rem;color:var(--ink-2);margin:12px 0 0}
.services .items{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin:26px 0 28px}
.services .items li{padding-top:12px;border-top:1px solid var(--rule)}
.services .items b{display:block;font-weight:600;font-size:16px}
.services .items span{display:block;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.services .pic{margin:0}
.services .pic .ph{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--paper-3)}
.services .pic img{width:100%;height:100%;object-fit:cover}
.services .pic figcaption{font-size:14px;line-height:1.4;color:var(--ink-2);margin-top:8px}
.services .pic figcaption b{color:var(--ink);font-weight:600}

/* printing: words left, four real print jobs right */
.s-print{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start;grid-template-rows:auto auto auto 1fr}
.s-print>*,.s-apps>*{grid-column:1}
.s-print>.print-pics{grid-column:2;grid-row:1/span 5}
.s-print>.btn,.s-apps>.btn{justify-self:start}
.print-pics{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px}

/* copy and print centre: a small inset under printing */
.services .copy{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center;margin-top:44px;padding:22px;border-radius:20px;background:var(--paper-2)}
.services .copy .ph{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--paper-3)}
.services .copy .ph img{width:100%;height:100%;object-fit:cover}
.services .copy h3{font-size:1.45rem}
.services .copy p{font-size:15.5px;color:var(--ink-2);margin-top:6px}
.services .checks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.services .checks li{font-size:14px;font-weight:500;padding:7px 12px;border-radius:999px;background:var(--paper)}

/* design and marketing: two cards side by side */
.s-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:72px}
.s-card{display:flex;flex-direction:column;border-radius:22px;padding:30px;background:#FBF8F2;border:1px solid var(--rule)}
.s-card .pic{margin-top:22px}
.s-card .pic .ph.wide,.s-card .pic .ph.logo{aspect-ratio:16/10}
.s-card .pic .ph.logo{background:#fff;border:1px solid var(--rule)}
.s-card .pic .ph.logo img{object-fit:contain;padding:10%}
.s-card .items{grid-template-columns:1fr;gap:12px;margin:22px 0 24px}
.s-card .btn{align-self:flex-start;margin-top:auto}
.s-card .note{font-size:14.5px;color:var(--muted);margin:-8px 0 20px}

/* apps: dark band */
.s-apps{display:grid;grid-template-columns:1fr 1.05fr;column-gap:56px;align-items:start;grid-template-rows:auto auto auto 1fr;margin-top:18px;padding:40px;border-radius:24px;background:var(--ink);color:var(--paper)}
.s-apps>.pic{grid-column:2;grid-row:1/span 5;align-self:center}
.s-apps .s-what{color:rgba(244,238,227,.82)}
.s-apps .items li{border-top-color:rgba(244,238,227,.18)}
.s-apps .items span{color:rgba(244,238,227,.72)}
.s-apps .pic .ph{border:1px solid rgba(244,238,227,.14)}
.s-apps .pic figcaption{color:rgba(244,238,227,.75)}
.s-apps .pic figcaption b{color:var(--paper)}
.s-apps .pic figcaption a{color:var(--y);text-underline-offset:3px}
.s-apps .btn-line{color:var(--paper);border-color:var(--paper)}
.s-apps .btn-line:hover{background:var(--paper);color:var(--ink)}

/* Recent work: the taxi card moved up into Apps, so the J&H card fills the row */
.work .work-grid .wk.wide{grid-column:span 3}
.work .wk.wide .shot{aspect-ratio:4/1}

@media (max-width:900px){
  .work .work-grid .wk.wide{grid-column:span 1}
  .work .wk.wide .shot{aspect-ratio:4/3}
  .proof .wrap{grid-template-columns:1fr 1fr}
  .proof .wrap>div{padding:16px 0 16px 16px}
  .proof .wrap>div:nth-child(3){border-left:0;padding-left:0}
  .proof .wrap>div:nth-child(n+3){border-top:1px solid var(--rule)}
  .services{padding:64px 0}
  .s-print,.s-pair,.s-apps{grid-template-columns:1fr;grid-template-rows:none}
  .s-print>.print-pics,.s-apps>.pic{grid-column:1;grid-row:auto;margin-top:22px}
  .s-pair{margin-top:56px}
  .s-apps{padding:28px}
}
@media (max-width:600px){
  .proof b{font-size:1.5rem}
  .proof span{font-size:13.5px}
  .proof .wrap>div{gap:10px}
  .services .items{grid-template-columns:1fr;gap:12px}
  .print-pics{gap:16px 12px}
  .services .pic figcaption{font-size:13.5px}
  .services .copy{grid-template-columns:1fr;padding:18px;gap:16px}
  .s-card{padding:22px}
  .s-apps{padding:22px}
}