/*
 * The website's pages for visitors (server/pages.js writes the HTML). On top of src/ui/brand.css, the home
 * page's top bar, footer and sections (src/home/home.css) and the blog's text styles (src/blog/blog.css).
 */

.site-page main { padding-bottom: 0; }
.site-page-body > :last-child:not(.closing) { margin-bottom: clamp(80px, 10vw, 140px); }

/* the title, when the page doesn't start with a hero */
.page-head { padding: clamp(40px, 7vw, 104px) var(--gutter) clamp(36px, 5vw, 72px); }
.page-title { max-width: 14em; font-size: clamp(44px, 6vw, 96px); font-weight: 470; letter-spacing: -0.035em; line-height: 0.95; }

/* text, pictures and videos between sections: the blog's reading column */
.page-flow { margin-top: clamp(36px, 5vw, 64px); margin-bottom: clamp(36px, 5vw, 64px); }
.page-head + .page-flow { margin-top: 0; }

/* sections */
.pb-sec { padding: clamp(64px, 9vw, 136px) var(--gutter); border-top: 1px solid var(--hair); }
.site-page-body > .pb-sec:first-child { border-top: 0; }
.pb-in { max-width: 1320px; margin: 0 auto; }
.pb-head { margin-bottom: clamp(32px, 4vw, 56px); }
.pb-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pb-split > .pb-head { position: sticky; top: calc(var(--nav-h) + 40px); margin-bottom: 0; }
.pb-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.pb-head-row .pb-head { margin: 0; }
.pb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* hero */
.pb-hero {
    display: grid;
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
    padding: clamp(48px, 8vw, 120px) var(--gutter) clamp(56px, 8vw, 120px);
}
.pb-hero.has-media { grid-template-columns: minmax(320px, 5fr) 7fr; }
.pb-hero.on-dark { background: var(--graphite); color: var(--porcelain); }
.pb-hero-copy { max-width: 46em; }
.pb-hero-title { font-size: clamp(44px, 6.4vw, 108px); font-weight: 470; letter-spacing: -0.035em; line-height: 0.95; }
.pb-hero:not(.has-media) .pb-hero-title { max-width: 13em; }
.pb-hero-lead { max-width: 32em; margin: clamp(20px, 3vh, 32px) 0 0; color: var(--slate); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.pb-hero.on-dark .pb-hero-lead { color: #b9c1c7; }
.pb-hero-lead a { color: inherit; }
.pb-hero-media { margin: 0; }
.pb-hero-media img { width: 100%; height: auto; border-radius: var(--r-m); background: var(--paper); }
.pb-hero-3d { display: grid; grid-template-rows: 1fr auto; height: min(70vh, 680px); min-height: 380px; }
.pb-hero-3d iframe { width: 100%; height: 100%; border: 0; border-radius: var(--r-m); background: var(--porcelain); }
.pb-hero.on-dark .pb-hero-3d iframe { background: var(--graphite-2); }
.pb-hero-3d figcaption { padding-top: 12px; font-size: 14px; text-align: center; }
.pb-hero-3d.with-controls { grid-template-rows: 1fr auto auto; height: auto; }
.pb-hero-3d.with-controls iframe { height: min(62vh, 600px); min-height: 340px; }
.pb-hero-controls { margin-top: 14px; }
.pb-hero.on-dark .pb-hero-controls { color: var(--porcelain); }

/* client logos in a row */
.pb-logos .pb-head { text-align: center; margin-inline: auto; }
.pb-logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.pb-logo-row li { display: flex; align-items: center; }
.pb-logo-row a { display: flex; }
.pb-logo { width: auto !important; height: clamp(32px, 4vw, 48px) !important; max-width: 180px; object-fit: contain; }
.pb-logos.grey .pb-logo { filter: grayscale(1); opacity: 0.7; transition: filter 0.2s, opacity 0.2s; }
.pb-logos.grey li:hover .pb-logo { filter: none; opacity: 1; }

/* the contact form */
.pb-form-box { min-width: 0; }
.pb-enquiry { display: grid; gap: 18px; }
.pb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pb-field { display: grid; gap: 6px; font-size: 14px; font-weight: 560; }
.pb-field.wide { grid-column: 1 / -1; }
.pb-field input, .pb-field textarea {
    width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--hair-2); border-radius: var(--r-s);
    background: var(--white); color: var(--ink); font: 400 16px/1.4 var(--font);
}
.pb-field textarea { min-height: 140px; resize: vertical; }
.pb-field input:focus, .pb-field textarea:focus { outline: 2px solid var(--graphite); outline-offset: 1px; border-color: transparent; }
.pb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pb-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pb-form-note { color: var(--slate); font-size: 14px; }
.pb-form-error { margin: 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--danger-soft); color: #7d1a14; font-size: 15px; }
.pb-form-done { display: grid; justify-items: start; gap: 16px; padding: 28px; border-radius: var(--r-m); background: var(--ok-soft); }
.pb-form-thanks { margin: 0; font-stretch: var(--wide); font-size: 21px; font-weight: 540; line-height: 1.35; }
.pb-hero-3d figcaption a { color: var(--slate); }
.pb-hero.on-dark .pb-hero-3d figcaption a { color: #b9c1c7; }

/* features: cards */
.pb-cards { display: grid; gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.pb-cards.cols-1 { grid-template-columns: minmax(0, 720px); }
.pb-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-card { padding-top: 22px; border-top: 1px solid var(--graphite); }
.pb-card:has(.pb-card-pic) { padding-top: 0; border-top: 0; }
.pb-card-link { display: block; color: inherit; text-decoration: none; }
.pb-card-pic { aspect-ratio: 3 / 2; margin-bottom: 18px; overflow: hidden; border-radius: var(--r-m); background: radial-gradient(120% 90% at 50% 35%, var(--paper) 0%, #e3e7ea 100%); }
.pb-card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pb-card-link:hover .pb-card-pic img { transform: scale(1.035); }
.pb-card-title { margin: 0; font-size: 22px; font-weight: 560; line-height: 1.18; }
.pb-card-link:hover .pb-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pb-card-text { margin: 10px 0 0; color: var(--slate); font-size: 16px; }
.pb-more { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 560; }

/* features: numbered steps (the home page's look) */
.pb-steps .steps { margin-top: 0; }
.pb-steps .steps.n-1 { grid-template-columns: minmax(0, 1fr); }
.pb-steps .steps.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-steps .steps.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-steps .steps p a, .spec dd a { color: var(--graphite); }

/* pricing */
.pb-plans { display: grid; gap: 16px; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.pb-plans.n-1 { grid-template-columns: minmax(0, 420px); }
.pb-plans.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.pb-plans.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-plans.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 24px 24px;
    border: 1px solid var(--hair-2);
    border-radius: var(--r-l);
    background: var(--paper);
}
.pb-plan.featured { border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite), var(--shadow-lift); background: var(--white); }
.pb-badge { position: absolute; top: -12px; left: 22px; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--amber); color: var(--graphite); font-size: 12.5px; font-weight: 650; }
.pb-plan-name { margin: 0; font-size: 20px; font-weight: 560; }
.pb-price { margin: 0; }
.pb-amount { font-stretch: var(--wide); font-size: clamp(34px, 3vw, 46px); font-weight: 520; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pb-period { color: var(--slate); font-size: 15px; }
.pb-plan-text { margin: 0; color: var(--slate); font-size: 15px; }
.pb-ticks { display: grid; gap: 8px; margin: 4px 0 8px; padding: 14px 0 0; border-top: 1px solid var(--hair); list-style: none; font-size: 15px; }
.pb-ticks li { position: relative; padding-left: 26px; }
.pb-ticks li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 12px; height: 7px; border-left: 2px solid var(--graphite); border-bottom: 2px solid var(--graphite); transform: rotate(-45deg); }
.pb-plan .btn { margin-top: auto; }
.pb-note { margin: 22px 0 0; color: var(--slate); font-size: 14px; }

/* questions */
.pb-faq-list { border-top: 1px solid var(--graphite); }
.pb-faq-list details { border-bottom: 1px solid var(--hair); }
.pb-faq-list summary {
    position: relative;
    padding: 22px 44px 22px 0;
    font-stretch: var(--wide);
    font-size: 19px;
    font-weight: 540;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}
.pb-faq-list summary::-webkit-details-marker { display: none; }
.pb-faq-list summary::after { content: "+"; position: absolute; right: 6px; top: 50%; color: var(--slate); font-size: 26px; font-weight: 300; line-height: 1; transform: translateY(-50%); transition: transform 0.2s var(--ease); }
.pb-faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pb-faq-list summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pb-answer { padding: 0 44px 24px 0; color: var(--slate); font-size: 17px; line-height: 1.6; }
.pb-answer p { margin: 0; }
.pb-answer a { color: var(--graphite); }

/* call to action: the home page's closing band */
.pb-cta { border-top: 0; }

/* products: the home page's work grid */
.pb-products .work-grid { margin-top: 0; }

/* latest posts */
.pb-posts .post-grid { padding-top: 0; }

/* contact */
.pb-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pb-way {
    display: grid;
    gap: 6px;
    height: 100%;
    padding: 20px 22px;
    border: 1px solid var(--hair-2);
    border-radius: var(--r-m);
    background: var(--paper);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s;
}
a.pb-way:hover { border-color: var(--graphite); }
.pb-way-k { color: var(--slate); font-size: 13px; font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; }
.pb-way-v { font-stretch: var(--wide); font-size: 19px; font-weight: 540; line-height: 1.35; overflow-wrap: anywhere; }
.pb-way-link { margin-top: 4px; font-size: 14px; }

@media (max-width: 1080px) {
    .pb-cards.cols-4, .pb-plans.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pb-steps .steps.n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .pb-hero.has-media { grid-template-columns: 1fr; }
    .pb-hero-3d { height: 56vh; }
    .pb-hero.phone-media-above .pb-hero-media { order: -1; }
    .pb-hero.phone-media-below .pb-hero-media { order: 1; }
    .pb-hero-3d.with-controls { height: auto; }
    .pb-hero-3d.with-controls iframe { height: 52vh; }
    .pb-split { grid-template-columns: 1fr; }
    .pb-split > .pb-head { position: static; }
    .pb-cards.cols-3, .pb-plans.n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .pb-cards.cols-2, .pb-cards.cols-3, .pb-cards.cols-4, .pb-plans.n-2, .pb-plans.n-3, .pb-plans.n-4 { grid-template-columns: 1fr; }
    .pb-steps .steps.n-2, .pb-steps .steps.n-3 { grid-template-columns: 1fr; }
    .pb-actions .btn { flex: 1 1 auto; }
    .pb-fields { grid-template-columns: 1fr; }
    .pb-form-foot .btn { flex: 1 1 100%; }
}