/* friendsteam.am: one-page company site. Tokens, logo and buttons come from style.css. */
.company{margin:0}
.company a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:26px 0}
.top .brand{color:var(--ink);text-decoration:none}
.topr{display:flex;align-items:center;gap:16px}
.toplink{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(36px,6vw,84px);align-items:center;padding-block:clamp(36px,6vw,72px) clamp(52px,7vw,88px)}
.hero h1{margin:0;font-family:var(--f-display);font-size:clamp(2rem,4.1vw,3.3rem);font-weight:700;line-height:1.2;text-wrap:balance}
.lead{margin:20px 0 0;max-width:34em;font-size:1.08rem;line-height:1.65}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta .btn{padding:13px 22px}

/* a press sheet: the real covers imposed on one page, with crop marks at the corners */
.sheet{--mark:var(--ink);position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:20px;padding:14px;background:#fff}
.sheet img{display:block;width:100%;aspect-ratio:5/7;object-fit:cover;object-position:top}
.cm{position:absolute;width:0;height:0}
.cm::before,.cm::after{content:"";position:absolute;background:var(--mark)}
.cm::before{width:16px;height:1px}
.cm::after{width:1px;height:16px}
.cm.tl{top:0;left:0}.cm.tl::before{right:6px;top:0}.cm.tl::after{left:0;bottom:6px}
.cm.tr{top:0;right:0}.cm.tr::before{left:6px;top:0}.cm.tr::after{left:0;bottom:6px}
.cm.bl{bottom:0;left:0}.cm.bl::before{right:6px;top:0}.cm.bl::after{left:0;top:6px}
.cm.br{bottom:0;right:0}.cm.br::before{left:6px;top:0}.cm.br::after{left:0;top:6px}

/* the range reads like a contents page: name, picture, how many products */
.range{padding-block:0 clamp(52px,7vw,88px)}
.range h2,.contact h2{margin:0 0 18px;font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.25}
.toc{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(32px,5vw,64px);border-top:1px solid var(--line)}
.toc li{break-inside:avoid;border-bottom:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:center;padding:12px 2px;color:var(--ink);text-decoration:none}
.toc img{display:block;width:52px;height:66px;object-fit:contain;object-position:center}
.toc .nm{font-family:var(--f-display);font-size:1.16rem;font-weight:700;line-height:1.3}
.toc .amount{color:var(--muted);font-size:.9rem;white-space:nowrap}
.toc a:hover .nm{color:var(--red)}

.contact{background:var(--graphite);color:var(--on-graphite)}
.contact .wrap{padding-block:clamp(40px,5vw,60px)}
.contact dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 32px;margin:0}
.contact dt{font-size:.88rem;opacity:.72}
.contact dd{margin:3px 0 0;font-size:1.08rem;font-weight:600;overflow-wrap:anywhere}
.contact a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.company .contact a:focus-visible{outline-color:currentColor}

.company footer{display:block;padding-block:16px 20px}
.company .copy{margin:0;padding:0;border:0}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .sheet{margin:12px 16px 0}
  .toc{columns:1}
  .contact dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .toplink{display:none}  /* no room beside the logo and language buttons; the contact button is just below */
  .contact dl{grid-template-columns:minmax(0,1fr)}
  .sheet{padding:10px;gap:5px}
}