/* Shared Safari/mobile corrections. Loaded after page styles, before colours. */
:root{--screen-height:100vh;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
@supports(height:100svh){:root{--screen-height:100svh}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.bn-mobile-intro-name{display:none}

/* WebKit clips script overhangs on transformed inline layers at the advance
   width. Give those layers paint room without changing their outer footprint. */
.bn-name-anchor,.bn-hero-name,.bn-hero-name>span,.bn-hero-name>em{overflow:visible}
.bn-hero-name>span,.bn-hero-name>em{flex:0 0 auto}
.bn-hero-name>em{padding:.18em .14em .22em .02em;margin:-.18em -.14em -.22em -.02em}
.show-nav .brand-mark__b{padding-right:.15em;margin-right:-.15em}
.bn-letter,.bn-word{overflow:visible}
.bn-intro-support{--intro-stacked:0}

.show-nav,.show-nav.is-compact,body.has-scrolled .show-nav{top:calc(14px + var(--safe-top))}
.bn-home .bn-intro-title{font-size:min(clamp(54px,7.1vw,110px),calc((var(--screen-height) - 150px)/4.5))}
.bn-page-hero__heading>h1,.bn-personal__copy,.bn-story>div,.bn-home-about__intro>*,.ab-record__body,.ab-tool>div,.rn-copy>div,.bn-case-intro>*{min-width:0}
.bn-footer>div{flex-wrap:wrap}
.gb-contact-direct__email,.gb-contact-note a,.bn-case-facts dd{overflow-wrap:anywhere}

/* Keep the first-screen controls in the actual viewport, not in a 650px
   minimum-height box extending below a smaller iPhone/Safari window. */
@media(max-width:1100px),(max-height:760px){
  .bn-identity__stage,.bn-reel__stage,.bn-case-cover__stage{height:var(--screen-height);min-height:0}
  .bn-page-hero{height:var(--screen-height);min-height:0}
  .bn-case-hero{height:var(--screen-height);min-height:0}
  .bn-hero-bottom{bottom:calc(24px + var(--safe-bottom))}
  .bn-reel__total{bottom:calc(24px + var(--safe-bottom))}
  .bn-reel__caption{bottom:calc(56px + var(--safe-bottom))}
  .bn-case-cover__caption{bottom:calc(24px + var(--safe-bottom))}
}

/* At tablet widths the side notes would intersect the large name. */
@media(min-width:701px) and (max-width:1100px){
  .bn-home .bn-hero-notes{top:calc(112px + var(--safe-top));transform:none}
  .bn-page-hero__subtitle{left:24%;right:24%;font-size:clamp(19px,2.4vw,27px)}
  .bn-footer{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px}
  .bn-footer>div{gap:12px 16px;max-width:100%;min-width:0}
  .bn-method-item h3>button{padding:24px 16px 20px;grid-template-columns:20px minmax(0,1fr) 18px;gap:8px;font-size:clamp(20px,2.5vw,28px)}
  .bn-method-item h3>button>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
  .bn-method__panel{padding:0 20px 26px}
}

@media(max-width:700px){
  .show-nav,.show-nav.is-compact,body.has-scrolled .show-nav{top:calc(8px + var(--safe-top))}
  .bn-home .bn-hero-notes{top:calc(116px + var(--safe-top));grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .bn-home .bn-hero-notes>span{white-space:normal;font-size:clamp(9px,2.5vw,10px)}
  .bn-home .bn-name-anchor{max-width:calc(100% - 40px)}
  .bn-home .bn-hero-bottom{gap:16px}
  .bn-home .bn-hero-bottom>p{font-size:clamp(21px,6.2vw,25px);margin-bottom:18px}
  .bn-home .bn-hero-bottom>span{max-width:125px;text-align:right;white-space:normal}
  .bn-home .bn-intro-title{top:calc(112px + var(--safe-top));font-size:min(clamp(38px,12.6vw,70px),max(32px,calc((var(--screen-height) - 330px)/4.5)))}
  .bn-home .bn-intro-support{--intro-stacked:1;--intro-support-gap:28px;justify-content:flex-start}
  .bn-home .bn-intro-support p{font-size:16px;line-height:1.5}
  .bn-home .bn-intro-support .bn-text-link{margin-top:16px}
  .bn-practice__stage{padding-top:100px;padding-bottom:65px;gap:22px}
  .bn-page-hero__heading{margin-top:-90px}
  .bn-page-hero__heading>.bn-label{max-width:46%;font-size:9px;white-space:normal}
  .bn-page-hero__subtitle{bottom:calc(105px + var(--safe-bottom));font-size:clamp(19px,5.4vw,23px);left:22px;right:22px}
  .bn-page-hero__bottom{bottom:calc(22px + var(--safe-bottom));gap:14px}
  .bn-page-hero__bottom>*{min-width:0}
  .bn-page-hero__bottom>.bn-label{max-width:42%}
  .bn-page-hero__bottom .bn-round-link{font-size:10px;gap:9px}
  .bn-case-hero__title-wrap{top:43%}
  .bn-case-hero__top{top:calc(112px + var(--safe-top));gap:14px}
  .bn-case-hero__top>.bn-label{max-width:44%;text-align:right}
  .bn-case-hero__bottom{bottom:calc(22px + var(--safe-bottom));gap:16px}
  .bn-case-hero__bottom>p{font-size:clamp(19px,5.6vw,23px);margin-bottom:10px}
  .bn-case-hero__bottom>.bn-round-link{white-space:normal;max-width:160px}
  .bn-case-hero__bottom>div{min-width:0;max-width:135px}
  .bn-case-hero__bottom>div>em{font-size:clamp(20px,6vw,23px)}
  .bn-case-cover__caption{align-items:flex-end;gap:14px}
  .bn-case-cover__caption>span{min-width:0}
  .bn-case-cover__caption .bn-round-link{flex-shrink:0;font-size:9px;gap:7px}
  .bn-beyond__category-grid button span{font-size:clamp(18px,5.2vw,24px);line-height:1.1;min-width:0;max-width:100%;overflow-wrap:anywhere}
  .ab-record h3,.ab-tool h3,.bn-home-about__facts strong{overflow-wrap:anywhere}
  .ab-record__body>.bn-label{overflow-wrap:anywhere}
  .bn-method-item h3>button{grid-template-columns:22px minmax(0,1fr) 22px;gap:10px}
  .bn-method-item h3>button>span:nth-child(2){overflow-wrap:anywhere}
  .bn-next__title{font-size:clamp(54px,17vw,120px);max-width:100%;overflow:visible}
  .bn-site-footer--inverse .bn-next__title{white-space:normal}
  .bn-footer{padding-bottom:calc(25px + var(--safe-bottom))}
  .bn-footer>div{gap:12px;min-width:0;max-width:100%}
  .rn-tabs>button{min-width:0;white-space:normal;min-height:44px}
  .gb-contact-field>input,.gb-contact-field>textarea{font-size:clamp(20px,6vw,24px)}
  .gb-contact-signoff{padding-bottom:calc(30px + var(--safe-bottom))}
  .bn-case-lightbox__top{top:calc(15px + var(--safe-top))}
  .bn-case-lightbox__bottom{bottom:calc(18px + var(--safe-bottom))}
}

@media(max-width:700px) and (max-height:650px){
  .bn-home .bn-intro-title{top:calc(100px + var(--safe-top))}
  .bn-home .bn-intro-support p{font-size:15px}
  .bn-home .bn-hero-bottom{bottom:calc(18px + var(--safe-bottom));gap:12px}
  .bn-home .bn-hero-bottom>p{margin-bottom:8px}
  .bn-case-hero__title-wrap{top:42%}
  .bn-case-hero__type{font-size:9px}
  .bn-page-hero__heading{margin-top:-85px}
}

/* A landscape phone has width but little height. Use two compact columns. */
@media(min-width:701px) and (max-height:520px){
  .bn-home .bn-intro-title{top:95px}
  .bn-home .bn-hero-notes{top:98px;font-size:9px}
  .bn-home .bn-hero-bottom>p{font-size:20px}
  .bn-home .bn-hero-bottom>.bn-round-link{font-size:10px}
  .bn-home .bn-intro-support p{font-size:13px;line-height:1.4}
  .bn-home .bn-intro-support .bn-text-link{margin-top:12px;font-size:11px}
  .bn-page-hero__heading{margin-top:-75px}
  .bn-page-hero h1{font-size:min(12vw,95px)}
  .bn-page-hero__subtitle{bottom:75px;font-size:19px}
  .bn-case-hero__top{top:90px}
  .bn-case-hero__title-wrap{top:46%}
  .bn-case-hero__bottom>p{font-size:19px}
}
@media(max-height:520px){
  .bn-practice{height:auto}
  .bn-practice__stage{position:relative;height:auto;min-height:var(--screen-height);overflow:visible}
}
@media(orientation:landscape) and (max-height:520px){
  .bn-home .bn-name-anchor{top:48%}
  .bn-home .bn-hero-notes{top:calc(92px + var(--safe-top));transform:none;font-size:9px}
  .bn-home .bn-hero-notes>span{font-size:9px}
  .bn-home .bn-hero-bottom{grid-template-columns:1fr 1.3fr 1fr;gap:12px;align-items:end}
  .bn-home .bn-hero-bottom>p{grid-column:2;grid-row:1;margin:0;font-size:clamp(16px,2.7vw,20px)}
  .bn-home .bn-hero-bottom>.bn-round-link{grid-column:1;grid-row:1;font-size:9px;gap:8px}
  .bn-home .bn-hero-bottom>span{grid-column:3;grid-row:1;font-size:8px}
  .bn-home .bn-intro-title{top:90px;width:54%;max-width:54%;font-size:min(8vw,calc((var(--screen-height) - 135px)/4.5))}
  .bn-home .bn-intro-name-slot{width:100%}
  .bn-home .bn-intro-support{--intro-stacked:0;left:auto;right:var(--gutter);width:33%;max-width:none;justify-content:flex-start;padding-top:28px}
  .bn-home .bn-intro-support p{font-size:12px;line-height:1.4}
  .bn-home .bn-intro-support .bn-text-link{margin-top:10px;font-size:10px;padding-block:5px}
  .bn-page-hero__heading{margin-top:-105px}
  .bn-page-hero__subtitle{bottom:78px;font-size:18px}
  .bn-page-hero__bottom{bottom:18px}
  .bn-case-hero__top{top:90px}
  .bn-case-hero .bn-case-hero__title{font-size:min(7vw,60px)}
  .bn-case-hero--short .bn-case-hero__title{font-size:min(15vw,100px)}
  .bn-case-hero--long .bn-case-hero__title{font-size:min(5.3vw,42px)}
  .bn-case-hero__bottom>p{font-size:17px}
}

/* Do not turn the reduced-motion, naturally flowing layout back into a pin. */
@media(prefers-reduced-motion:reduce){
  .bn-identity__stage{position:relative;height:auto;min-height:var(--screen-height)}
  .bn-home .bn-intro-title{top:auto;width:auto;max-width:calc(100% - 2 * var(--gutter));font-size:clamp(38px,7vw,100px)}
  .bn-home .bn-intro-support{height:auto}
  .bn-practice__stage{height:auto;min-height:0}
}

/* The first screen follows Safari's visible height as its toolbar moves. */
@media(max-width:700px) and (orientation:portrait){
  :root{--opening-height:var(--screen-height)}
  @supports(height:100dvh){:root{--opening-height:100dvh}}

  .bn-home .bn-identity{height:auto}
  .bn-home .bn-identity__stage{
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(calc(var(--opening-height) * .38),auto) minmax(calc(var(--opening-height) * .24),auto) minmax(calc(var(--opening-height) * .38),auto) auto;
    position:relative;top:auto;height:auto;min-height:0;padding:0
  }
  .bn-home .bn-hero-notes{position:relative;inset:auto;grid-area:1/1;align-self:end;margin:calc(110px + var(--safe-top)) var(--gutter) 0;font-size:11px}
  .bn-home .bn-hero-notes>span{font-size:inherit}
  .bn-home .bn-name-anchor{position:relative;inset:auto;grid-area:2/1;place-self:center;transform:none;margin:0;max-width:none}
  .bn-home .bn-hero-name{font-size:clamp(49px,17.3vw,104px)}
  .bn-home .bn-hero-bottom{position:relative;inset:auto;grid-area:3/1;align-self:end;margin:0 var(--gutter);padding-bottom:calc(22px + var(--safe-bottom));gap:24px 12px}
  .bn-home .bn-hero-bottom>p{margin:0;font-size:clamp(22px,6.2vw,31px)}
  .bn-home .bn-hero-bottom>.bn-round-link{min-height:44px}
  .bn-home .bn-intro-composition{position:relative;inset:auto;grid-area:4/1;padding:54px var(--gutter) 48px;color:#fff}
  .bn-home .bn-identity__stage>.bn-fluid-field{grid-area:4/1;opacity:1}
  .bn-home .bn-intro-title{position:relative;inset:auto;width:auto;max-width:none;margin:0;font-size:clamp(32px,11.2vw,64px)}
  .bn-home .bn-intro-name-slot{display:block;width:auto;height:auto}
  html[lang="it"] .bn-home .bn-intro-title{max-width:none}
  html[lang="it"] .bn-home .bn-intro-name-slot{height:auto}
  .bn-mobile-intro-name{display:inline-flex;align-items:baseline;gap:.14em;font:700 1em/1.15 var(--sans);letter-spacing:-.085em;white-space:nowrap}
  .bn-home .bn-mobile-intro-name>em{font:400 1.3em/.75 var(--script);letter-spacing:0}
  .bn-home .bn-intro-support{position:relative;inset:auto;width:auto;height:auto;margin:24px 0 0;visibility:visible}
  .bn-home .bn-intro-line{visibility:visible}
  .bn-home .bn-intro-support p{font-size:16px}
  .bn-home .bn-intro-support .bn-text-link{min-height:44px;align-items:center}

  .bn-page-hero{height:auto;min-height:max(var(--opening-height),440px);padding:0 var(--gutter)}
  .bn-page-hero__heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(4px,1.4vw,10px);margin:0}
  .bn-page-hero__heading>.bn-label,.bn-page-hero__heading>.bn-label:last-child{position:static;max-width:none;font-size:clamp(8px,2.2vw,11px);line-height:1.25}
  .bn-page-hero__heading>.bn-label:first-child{text-align:left}
  .bn-page-hero__heading>.bn-label:last-child{text-align:right}
  html[lang="it"] .bn-about .bn-page-hero__heading>.bn-label:last-child{white-space:nowrap}
  .bn-about-caption-end{display:block}
  .bn-page-hero__heading>h1,html[lang="it"] .bn-page-hero__heading>h1,html[lang="it"] .bn-about .bn-page-hero__heading>h1{font-size:clamp(37px,14vw,94px);white-space:nowrap}
  html[lang="it"] .bn-work .bn-page-hero__heading>h1{font-size:clamp(34px,calc(16vw - 11px),88px)}
  .bn-page-hero__bottom .bn-round-link{min-height:44px}
  .bn-page-hero__bottom .bn-text-link{min-height:44px;align-items:center}
  .bn-page-hero__bottom .bn-arrow,.bn-home .bn-hero-bottom .bn-arrow{flex-shrink:0}
  .bn-case-hero{height:var(--opening-height)}
}