/* Page styles for perspectivebox.io; load after site.css, which stays shared and unedited. */

/* Header: apps link sits beside the anchors */
.nav .btn--sm{white-space:nowrap}

/* Hero */
.hero--company{padding-block:var(--space-xl) var(--space-2xl);overflow:hidden;isolation:isolate}
.hero--company h1{max-width:16ch}
.hero--company .hero__lead{max-width:34rem}
.hero__mark{display:grid;place-items:center;padding:clamp(2rem,1rem + 4vw,4rem);border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.hero__mark .hero__logo{width:clamp(160px,24vw,280px)}
/* Below the two column hero the logo panel only repeats the header mark, so the facts strip follows the actions */
@media (max-width:959.98px){.hero--company .hero__media{display:none}}
.hero--company .facts{margin-top:var(--space-xl)}
@media (min-width:700px){.hero--company .facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hero--company .hero__wash{background:radial-gradient(60% 50% at 85% 20%,var(--accent-soft) 0%,transparent 70%)}

/* What we do */
.services h3{font-size:var(--step-1)}
@media (min-width:860px){.services h3{font-size:var(--step-2)}}
.services-note{margin-top:var(--space-l);max-width:62ch}

/* Software: head, media, body; on wide screens the media spans both text rows */
.product{row-gap:var(--space-l)}
.product__head>*+*,.product__body>*+*{margin-top:var(--space-s)}
.product__head .badge{margin-top:var(--space-m)}
.product__title{font-size:var(--step-3);line-height:1.2}
.product .actions{margin-top:var(--space-l)}
.product .fine{max-width:52ch}
.product .tagline:last-child{margin-top:var(--space-m)}
.product__media{min-width:0}
.product__media .device-duo{width:100%;max-width:620px;margin-inline:auto}
@media (min-width:900px){
  .product{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"head media" "body media";column-gap:var(--space-xl);row-gap:var(--space-m);align-items:start}
  .product__head{grid-area:head}
  .product__body{grid-area:body}
  .product__media{grid-area:media;align-self:center}
}
.more-apps{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-xs) var(--space-l);margin-top:var(--space-l);padding:var(--space-m) var(--space-l);border-radius:var(--radius);border:1px dashed var(--line-strong)}
.more-apps p{color:var(--muted);max-width:60ch}
.more-apps strong{color:var(--ink)}
@media (max-width:599.98px){.more-apps{padding:var(--space-m)}}

/* How we work */
.principles{display:grid;gap:var(--space-l) var(--space-xl);grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0}
@media (min-width:600px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.principles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.principles li{padding-top:var(--space-m);border-top:2px solid var(--accent)}
.principles h3{font-size:var(--step-1)}
.principles p{margin-top:var(--space-2xs);color:var(--muted)}

/* Lisbon and London */
.places{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.place{display:grid;gap:var(--space-xs);align-content:start;padding:clamp(1.25rem,1rem + 1.5vw,2rem);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.place .place__city{color:var(--ink);font-family:var(--font-display);font-size:var(--step-4);font-weight:600;letter-spacing:-0.015em;line-height:1.1}
.place p{color:var(--muted)}
.place address{color:var(--ink)}
.places-note{margin-top:var(--space-l);max-width:62ch}

/* Contact */
.section--dark .eyebrow{color:var(--focus-on-dark)}
.contact__inner{display:grid;gap:var(--space-l);align-items:end}
.contact__inner>div>*+*{margin-top:var(--space-s)}
.contact__email{font-family:var(--font-display);font-size:clamp(1.0625rem,0.4rem + 3.6vw,2rem);font-weight:600;letter-spacing:-0.01em;overflow-wrap:anywhere}
.section--dark .contact__email{color:#FFFFFF;text-decoration-color:rgba(255,255,255,.5)}
.section--dark .contact__email:hover{text-decoration-color:#FFFFFF}
@media (min-width:1180px){.contact__inner{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}

/* Footer: brand on its own row on tablets so the two link columns sit side by side */
.footer__note{margin-top:var(--space-m);color:var(--muted)}
@media (min-width:600px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer__brand{grid-column:1/-1}}
@media (min-width:900px){.footer__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}.footer__brand{grid-column:auto}}
.footer__legal .adr{grid-column:1/-1;font-size:var(--step--1)}

/* 404 */
.notfound{padding-block:var(--space-3xl)}
.notfound .actions{margin-top:var(--space-l)}
.notfound__help{margin-top:var(--space-l)}