/* Silvertree site-wide styles (single source of truth; root path = updatable in place — new filename: /assets/* cached immutable). */

/* 1) Vertical rhythm — generous, symmetric. */
.section{padding-top:140px;padding-bottom:140px}
@media screen and (min-width:1280px){.section{padding-top:170px;padding-bottom:170px}}
@media screen and (max-width:991px){.section{padding-top:120px;padding-bottom:120px}}
@media screen and (max-width:767px){.section{padding-top:100px;padding-bottom:100px}}
@media screen and (max-width:479px){.section{padding-top:72px;padding-bottom:72px}}

/* 2) Full-height photo heroes keep their original vertical balance. */
.section.home-hero{padding-top:240px;padding-bottom:100px}
@media screen and (min-width:768px) and (max-width:991px){.section.home-hero{padding-top:220px;padding-bottom:220px}}

/* 3) Single-slide slider: hide arrows and dots. */
.slider .w-slider-arrow-left,.slider .w-slider-arrow-right,.slider .w-slider-nav{display:none !important}

/* 4) "Our Mission" images: equal height, bottom-aligned, smaller so text leads. */
._2-column-grid.larger-right-column{align-items:end}
.image.about{aspect-ratio:auto;height:400px}
@media screen and (max-width:767px){.image.about{height:auto;aspect-ratio:4/3}}

/* 5) Type hierarchy: page title > section title > subsection > lead paragraph (heroes only) > body > label. */
h3.display-2{font-size:40px;line-height:1.4em}
@media screen and (max-width:991px){h3.display-2{font-size:32px}}
@media screen and (max-width:767px){h3.display-2{font-size:28px}}
@media screen and (max-width:479px){h3.display-2{font-size:24px}}
.text-single-uppercase.medium{font-size:14px;font-weight:600;letter-spacing:.12em}

/* 6) Large screens (>=1280px): wider container, fluid type (moderate scale). */
@media screen and (min-width:1280px){
  .container-default{max-width:min(1560px,92vw)}
  ._2-column-grid{grid-column-gap:48px}
  .header-logo{width:clamp(150px,10vw,180px)}
  .nav-link{font-size:clamp(19px,1.3vw,22px)}
  .display-1{font-size:clamp(76px,5.6vw,96px)}
  .display-2{font-size:clamp(60px,4.4vw,76px)}
  h3.display-2{font-size:clamp(38px,2.7vw,46px)}
  .display-3{font-size:clamp(38px,2.7vw,46px)}
  h1{font-size:clamp(60px,4.4vw,76px)}
  h2{font-size:clamp(44px,3.1vw,54px)}
  h3{font-size:clamp(27px,1.9vw,31px)}
  body{font-size:clamp(18px,1.15vw,20px)}
  .paragraph-large{font-size:clamp(21px,1.4vw,24px)}
  .button-primary{font-size:clamp(23px,1.55vw,27px)}
  .text-single-uppercase.medium{font-size:clamp(13px,.95vw,15px)}
  .image.about{height:clamp(360px,26vw,460px)}
  .paragraph-large.home-hero-paragraph{max-width:clamp(760px,55vw,920px)}
}

/* 7) No orphaned words; balanced multi-line headings. */
p,.paragraph-large,.contact-details-lines{text-wrap:pretty}
h1,h2,h3,h4,.display-1,.display-2,.display-3{text-wrap:balance}

/* 8a) Hero titles render as block so balanced wrapping applies (template had display:inline). */
.display-1.color-white.home-hero-title{display:block;margin-right:0}

/* 8) Hero underline: stable line under the heading on every page (was a glitchy width animation). */
.inline.underline-bg{display:block !important;width:120px !important;height:3px;min-height:3px;background-color:#fff;opacity:1 !important;transform:none !important;margin-top:32px;margin-bottom:0;position:relative}

/* 9) Footer: tighter and smaller. */
.footer{font-size:16px}
.footer-title{font-size:18px}
.footer-grid.middle{padding-top:48px;padding-bottom:40px;grid-row-gap:32px}
.footer-bottom-content{padding-top:28px;padding-bottom:28px}
.footer .footer-logo{width:150px}

/* 10) "Our Office" card: landscape image, no phantom slider margin, tighter rhythm. */
.card.slider-card .image.full-image{height:420px}
@media screen and (min-width:1280px){.card.slider-card .image.full-image{height:clamp(380px,30vw,480px)}}
.slider.mg-bottom-mobile{margin-bottom:0}
.contact-anim-line{margin-bottom:40px}

/* ============================================================
   HERO ART DIRECTION — all four pages, desktop + phone.
   Lives here (not in per-page HTML) so image/crop changes need
   only this one file re-uploaded. Pages identified by the
   unique data-wf-page id on <html>.
   ============================================================ */
:root{--hero-veil:linear-gradient(rgba(8,10,14,.62),rgba(8,10,14,.62))}
.section.home-hero,.section.about,.section.bg---90vh.contact{
  background-position:50% 50%;background-repeat:no-repeat;background-size:cover}

/* desktop / tablet (landscape masters) */
[data-wf-page="663e1f1463702f4016083b86"] .section.home-hero{background-image:var(--hero-veil),url("/assets/images/hamburg-aerial-1920.jpg")}
[data-wf-page="6683fb91cc88e0a601b3f5f1"] .section.home-hero{background-image:var(--hero-veil),url("/assets/images/hamburg-speicherstadt-header-1920.jpg")}
.section.about{background-image:var(--hero-veil),url("/assets/images/hamburg-alster-header-1920.jpg")}
.section.bg---90vh.contact{background-image:var(--hero-veil),url("/assets/images/hamburg-alsterfontaene-header-1920.jpg")}

/* phones (portrait crops, framed per photo) + equal full-screen height */
@media screen and (max-width:767px){
  [data-wf-page="663e1f1463702f4016083b86"] .section.home-hero{background-image:var(--hero-veil),url("/assets/images/hamburg-aerial-m1.jpg")}
  [data-wf-page="6683fb91cc88e0a601b3f5f1"] .section.home-hero{background-image:var(--hero-veil),url("/assets/images/hamburg-speicherstadt-m2.jpg")}
  .section.about{background-image:var(--hero-veil),url("/assets/images/hamburg-alster-m2.jpg")}
  .section.bg---90vh.contact{background-image:var(--hero-veil),url("/assets/images/hamburg-alsterfontaene-m2.jpg")}

  .section.home-hero,.section.about,.section.bg---90vh.contact{
    min-height:100vh !important;min-height:100svh !important;   /* svh = excludes browser chrome */
    padding-top:120px !important;padding-bottom:80px !important;
    display:flex !important;flex-direction:column;justify-content:center !important;align-items:stretch !important}
}

/* full-height heroes on larger screens too (About/Contact were inline before) */
.section.about,.section.bg---90vh.contact{min-height:100vh;display:flex;align-items:center}

/* Contact page details + entrance animation (was inline on that page) */
.contact-details-lines{color:var(--neutral-400);margin-top:40px;font-size:18px}
.contact-details-lines a{color:var(--neutral-400)}
.contact-details-sep{margin:0 14px}
@keyframes stHeroIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.section.bg---90vh.contact h1{animation:stHeroIn .3s .2s ease both}
.section.bg---90vh.contact .contact-anim-line{animation:stHeroIn .3s .3s ease both}
.section.bg---90vh.contact .paragraph-large{animation:stHeroIn .3s .4s ease both}
.section.bg---90vh.contact ._2-buttons-wrap{animation:stHeroIn .3s .5s ease both}

/* Contact: centre the Hamburg office card in the page (keeps 2-column layout) */
.section.bg-neutral-100.mask .w-slider-mask{margin-left:auto;margin-right:auto}

/* Home: Acquisition Profile section */
.st-reveal{animation:stHeroIn .4s ease both}
#acquisition-profile .acq-contact{margin-top:36px}
#acquisition-profile .acq-contact h4{margin-bottom:8px}
#acquisition-profile .acq-contact a{color:inherit;text-decoration:underline;text-underline-offset:3px}
#acquisition-profile .acq-pdf{margin-top:36px}
#acquisition-profile .acq-pdf-link{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .25s ease}
#acquisition-profile .acq-pdf-link:hover{color:var(--primary-1)}

/* ---------- Portfolio page ---------- */
.section.portfolio-hero{background-position:50% 50%;background-repeat:no-repeat;background-size:cover;
  background-image:var(--hero-veil),url("/assets/images/portfolio-header-1920.jpg");
  min-height:100vh;display:flex;align-items:center}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pf-card{position:relative;overflow:hidden;aspect-ratio:16/10;background:#0e141c;cursor:pointer;outline:none;container-type:inline-size}
.pf-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.pf-veil{position:absolute;inset:0;background:linear-gradient(rgba(8,10,14,.15) 0%,rgba(8,10,14,.28) 45%,rgba(8,10,14,.88) 100%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.pf-label{position:absolute;left:26px;right:26px;bottom:24px;color:#fff;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.pf-city{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:10px}
.pf-street{font-size:26px;line-height:1.15;font-weight:600;text-wrap:balance}
.pf-sub{font-size:26px;line-height:1.15;font-weight:600;color:#fff;margin-top:4px;text-wrap:balance}
@media (hover:hover){
  .pf-card:hover .pf-veil,.pf-card:focus-visible .pf-veil{opacity:1}
  .pf-card:hover .pf-label,.pf-card:focus-visible .pf-label{opacity:1;transform:none}
  .pf-card:hover img{transform:scale(1.05)}
}
@media (hover:none){
  .pf-veil,.pf-label{opacity:1;transform:none}
  .pf-grid.pf-js .pf-veil,.pf-grid.pf-js .pf-label{opacity:0}
  .pf-grid.pf-js .pf-label{transform:translateY(10px)}
  .pf-grid.pf-js .pf-card.is-open .pf-veil{opacity:1}
  .pf-grid.pf-js .pf-card.is-open .pf-label{opacity:1;transform:none}
}
@media screen and (max-width:991px){.pf-grid{grid-template-columns:repeat(2,1fr);gap:16px}.pf-street,.pf-sub{font-size:22px}}
@media screen and (max-width:380px){.pf-street,.pf-sub{font-size:20px}}
@media screen and (max-width:767px){
  .pf-grid{grid-template-columns:1fr;gap:14px}
  .pf-card{aspect-ratio:3/2}
  .section.portfolio-hero{background-image:var(--hero-veil),url("/assets/images/portfolio-m2.jpg");
    min-height:100vh !important;min-height:100svh !important;
    padding-top:120px !important;padding-bottom:80px !important;
    display:flex !important;flex-direction:column;justify-content:center !important;align-items:stretch !important}
}
@supports (container-type:inline-size){.pf-street,.pf-sub{font-size:clamp(17px,6.3cqi,26px)}}

/* About: Our Mission — align the intro text with the heading, keep the two photos on one line */
.section ._2-column-grid.larger-right-column{align-items:stretch}
.section ._2-column-grid.larger-right-column > div{display:flex;flex-direction:column}
.section ._2-column-grid.larger-right-column > div > img.image{margin-top:auto}
.section ._2-column-grid.larger-right-column p.mg-bottom-large-72px{margin-bottom:48px}
@media screen and (min-width:768px){.section ._2-column-grid.larger-right-column > .inner-container-650px{padding-top:35px}}
#acquisition-profile .acq-eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--neutral-500);margin-bottom:10px}
#acquisition-profile .acq-arrow{text-decoration:none;display:inline-block;margin-left:10px;transition:transform .25s ease}
#acquisition-profile .acq-pdf-link:hover .acq-arrow{transform:translateX(4px)}

/* Footer: drop the "Pages" label, centre the links with the left block, tighten the gap above the rule */
.footer .footer-title{display:none}
.footer .footer-grid.middle{align-items:center;padding-bottom:0}
@media screen and (max-width:767px){.footer .footer-grid.middle{padding-bottom:32px}}

/* Heroes: anchor every page's headline at the same height (desktop/tablet) */
@media screen and (min-width:768px){
  .section.home-hero,.section.portfolio-hero,.section.about,.section.bg---90vh.contact{
    align-items:flex-start !important;justify-content:flex-start !important;
    padding-top:clamp(200px,33vh,320px) !important}
}
.section.bg---90vh.contact .contact-anim-line{margin-bottom:24px}