/* =========================================================
   BHJ Security — phone & tablet layout fixes
   Loaded last on every page (after the page stylesheet), so equal
   specificity wins; selectors are body-prefixed where page CSS is stronger.
   Found by a 360 / 393 / 430px audit of all 15 pages (2026-09-16).
   ========================================================= */

/* ---------- banners: keep the subject in frame ----------
   Landscape banners in a portrait viewport show only 35–45% of their width.
   Each position below points the crop at the picture's subject. */
@media (max-width:60rem){
  body.home-premium .hero__media{background-position:78% 50%}
  body.page-wwd .hero__bg{background-position:center,72% 50%}
  body.industry-commercial .hero__bg{background-position:center,76% 50%}
  body.industry-finance-lab .hero__bg{background-position:center,40% 50%}
  body.page-deliver .hero__bg{background-position:center,58% 50%}
  body.page-cases .hero__bg{background-position:center,72% 50%}
  /* contact: the BHJ sign on the reception desk would sit behind the tagline; enlarge a
     little and anchor to the top so the sign lands in the gap below the text */
  body.page-contact .hero__bg{background-size:auto,auto 146%;background-position:center,89% 0%}
  /* titles over bright parts of a photo (case studies building, lab) */
  .phero h1,.phero p,.phero .crumbs{text-shadow:0 1px 14px rgba(6,20,34,.45)}
}
/* Two banners cannot be saved by cropping and have portrait art instead
   (drawn for this, same scenes): the home hero shows only 23% of its
   landscape picture, and the Who We Serve banner is a 1600×242 strip. */
@media (max-width:60rem) and (orientation:portrait){
  body.home-premium .hero__media{background-image:url('../img/hero-home-client-m.webp')!important;background-position:50% 12%}
}
@media (max-width:46.25rem) and (orientation:portrait){
  body.page-wws .hero__bg{background:linear-gradient(90deg,#07192be6,#0b26466b),url('../img/net-banner-m.webp') 50% 50%/cover}
}

/* ---------- section labels (eyebrow) ----------
   The eyebrow is an inline-flex row "dash + text". When the text wraps, the
   text box stretches to the full width and the dash is stranded at the far
   left of a centred two-line label. As a block, the dash travels with the
   first line and the label keeps its parent's alignment. */
@media (max-width:48rem){
  .eyebrow{display:block;text-wrap:pretty}
  .eyebrow::before{display:inline-block;vertical-align:middle;margin:-.15em .6em 0 0}
  .eyebrow--plain::before{display:none}
  body.page-about #who .eyebrow{align-self:flex-start}
}

@media (max-width:40rem){

  /* ---------- home ---------- */
  /* "Security / AV / ICT / Smart Building / Digital Capabilities": line-height 1 made the lines touch */
  body.home-premium .section:has(.venn)>.wrap>.h-lg{line-height:1.3}
  /* ISMS / BPMP / BMMP: overlapping outlines read as a mistake when stacked */
  body.home-premium .venn .venn__c{width:min(15.5rem,72vw);margin:.375rem 0}

  /* ---------- data center security ---------- */
  /* the orbit diagram stacks into one column: one alignment for every item */
  body.page-dc #isms .orbit__col,
  body.page-dc #isms .orbit__col .fbox{text-align:left;align-items:stretch}
  body.page-dc #isms .orbit__core{align-self:center;text-align:center}
  body.page-dc #isms .orbit .fbox h4::before{margin-left:0;margin-right:0}
  /* subsystem cards: icon beside the text instead of above it (11 cards, ~2100px → ~1300px) */
  body.page-dc #subsystems .mcell{display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;align-items:start;padding:1.25rem 1rem}
  body.page-dc #subsystems .mcell>svg{grid-row:1 / span 2;width:3rem;height:3rem;padding:.625rem;margin:0}
  body.page-dc #subsystems .mcell h4{margin:0 0 .25rem;font-size:1.0625rem;line-height:1.4}
  body.page-dc #subsystems .mcell p{margin:0;font-size:.9375rem;line-height:1.6}

  /* Five-Layer Defense: on phones the list sits below the picture and the desktop guide
     lines are hidden, so each layer gets its number (01–05, from the list) beside it.
     The badge sits at the layer's marker point, pushed out past the plate's right edge. */
  body.page-dc .layers__viz{overflow:visible}
  body.page-dc .layer-marker{width:.375rem;height:.375rem;background:#35b2d2;border:0;box-shadow:none}
  body.page-dc .layer-marker::before{content:"";position:absolute;left:100%;top:50%;width:1.5rem;height:1px;background:#8fc3d3;transform:translateY(-50%)}
  body.page-dc .layer-marker::after{content:attr(data-n);position:absolute;left:calc(100% + 1.5rem);top:50%;transform:translateY(-50%);
    min-width:1.75rem;height:1.75rem;padding:0 .25rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;
    font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.02em;color:#0f3193;background:#fff;border:1px solid #bfdde8;
    box-shadow:0 .25rem .75rem rgba(15,49,147,.12);transition:background .25s,color .25s,border-color .25s}
  body.page-dc .layer-marker.is-active{background:#0f3193}
  body.page-dc .layer-marker.is-active::before{background:#0f3193}
  body.page-dc .layer-marker.is-active::after{background:#0f3193;border-color:#0f3193;color:#fff}

  /* ---------- about ---------- */
  /* Journey steps wrap 2×2 under one shared top rule, so the active bar of a
     second-row step sat directly under the first-row label. Each step gets its
     own rule underneath, with the active bar on it: an underline for that step. */
  body.page-about .jsteps{border-top:0;column-gap:1rem;row-gap:.25rem}
  body.page-about .jstep{border-bottom:.0625rem solid #ffffff35;padding:1rem 0 .875rem}
  body.page-about .jstep::after{top:auto;bottom:-.125rem}

  /* ---------- what we do ---------- */
  /* a nine-line centred paragraph is hard to read on a phone */
  body.page-wwd #overview .lead{text-align:left;font-size:1.0625rem;line-height:1.75}

  /* ---------- how we deliver ---------- */
  /* Design: the fifth tile no longer sits alone in half a row */
  body.page-deliver #design .steps>div{min-height:5.5rem;padding:1rem .75rem}
  body.page-deliver #design .steps>div:last-child:nth-child(odd){grid-column:1 / -1}
  /* Build: six full-width photo cards were ~2000px of scrolling; two columns */
  body.page-deliver #build .buildgrid{grid-template-columns:1fr 1fr;gap:.75rem}
  body.page-deliver #build .buildgrid figcaption{padding:.625rem .75rem;font-size:.875rem;line-height:1.35}
  /* Validate: step 05 was a tall centred feature card among compact rows */
  body.page-deliver #validate .voutcome{flex-direction:row;align-items:center;justify-content:flex-start;gap:1.5rem;padding:1.5rem;min-height:0;height:auto;text-align:left}
  body.page-deliver #validate .voutcome>svg{display:none}
  body.page-deliver #validate .voutcome>span{font-size:1.25rem;line-height:1.5;text-align:left}

  /* ---------- news detail ---------- */
  /* breadcrumb wrapped with a stray ">" at the end of the first line */
  body.page-news-detail .crumbs{flex-wrap:wrap;column-gap:.375rem;row-gap:0}

  /* ---------- footer (all pages) ---------- */
  /* wide letter-spacing broke "HOW WE DELIVER" / "DATA CENTER SECURITY" over two lines */
  body[class] .ftr__nav a{letter-spacing:.02em}
}

/* ---------- phone typography ----------
   Keep the root size, component dimensions and motion rules intact.
   Only text size and leading change; tablet/desktop typography is unchanged. */
@media (max-width:740px){
  /* Page titles, section headings and introductory copy. */
  body[class]:not(.page-case-detail) .phero h1{font-size:clamp(1.75rem,7.5vw,2rem);line-height:1.25}
  /* Case details already use smaller body text; only reduce their page title. */
  body.page-case-detail .phero h1{font-size:1.75rem;line-height:1.3}
  body.home-premium .hero__in>h1{font-size:clamp(1.625rem,7vw,1.875rem);line-height:1.25}
  body[class]:not(.page-case-detail) .phero p,
  body.home-premium .hero .lead{font-size:1rem;line-height:1.6}
  body[class]:not(.page-case-detail) .h-lg,
  body.home-premium #brand-statement h2,
  body.home-premium #brand-statement.brand-transition h2,
  body.home-premium .industry-scroll>.wrap>.h-lg{font-size:1.5rem;line-height:1.4}
  body[class]:not(.page-case-detail) .h-md,
  body.industry-detail .industry-approach .h-md{font-size:1.25rem;line-height:1.4}
  body[class]:not(.page-case-detail) .h-sm{font-size:1.0625rem;line-height:1.5}
  body[class]:not(.page-case-detail) .eyebrow,
  body.page-dc .section>.wrap>.center .eyebrow{font-size:1rem;line-height:1.5}
  body[class]:not(.page-case-detail) .lead,
  body.page-wwd #overview .lead,
  body.home-premium #brand-statement .lead,
  body.home-premium #brand-statement.brand-transition .lead{font-size:1rem;line-height:1.7}
  body[class]:not(.page-case-detail) .body,
  body.page-industry .industry-approach .body{font-size:.9375rem;line-height:1.8}
  body[class]:not(.page-case-detail) .body-s{font-size:.875rem;line-height:1.75}

  /* Shared controls, metadata and footer text; retain existing hit areas. */
  body[class]:not(.page-case-detail) .btn,
  body[class]:not(.page-case-detail) .link-arrow{font-size:.875rem}
  body[class]:not(.page-case-detail) .date{font-size:.8125rem}
  body[class] .mmenu .mmenu__row>a{font-size:.875rem}
  body[class] .mmenu .mmenu__sub a.navsub__a{font-size:.8125rem}
  body[class]:not(.page-case-detail) .ftr__nav a,
  body.home-premium .ftr h4,
  body.page-dc .ftr h4{font-size:.875rem;line-height:1.6}
  body[class]:not(.page-case-detail) .ftr__addr,
  body[class]:not(.page-case-detail) .ftr__link{font-size:.875rem;line-height:1.75}
  body.home-premium .ftr__bot,
  body.home-premium .totop,
  body.page-dc .ftr__bot,
  body.page-dc .totop{font-size:.75rem;line-height:1.7}

  /* Home: retain the hierarchy within the existing cards and diagrams. */
  body.home-premium .tile__t{font-size:1rem;line-height:1.5}
  body.home-premium .iswitch__row h3,
  body.home-premium .industry-scroll .iswitch__row h3,
  body.home-premium .venn__c h4{font-size:1.25rem;line-height:1.4}
  body.home-premium .iswitch__d,
  body.home-premium .industry-scroll .iswitch__d,
  body.home-premium .venn__c span{font-size:.9375rem;line-height:1.6}
  body.home-premium .dcell span{font-size:.9375rem;line-height:1.5}
  body.home-premium .dcell .dcell__n{font-size:.8125rem}
  body.home-premium .case__t{font-size:.9375rem;line-height:1.5}
  body.home-premium .nfeat h3,
  body.home-premium .nrow h4{font-size:1.125rem;line-height:1.5}
  body.home-premium .nfeat p{font-size:.9375rem;line-height:1.75}
  body.home-premium .case__meta li,
  body.home-premium .case__scope{font-size:.875rem;line-height:1.75}

  /* Data center security. */
  body.page-dc .lrow h4,
  body.page-dc .resil .fbox h4,
  body.page-dc #isms .orbit .fbox h4{font-size:1.0625rem;line-height:1.5}
  body.page-dc .lrow__n{font-size:.9375rem}
  body.page-dc .lrow p,
  body.page-dc .fbox p,
  body.page-dc .event__list li,
  body.page-dc .orbit__core p{font-size:.875rem;line-height:1.75}
  body.page-dc .orbit__core h4{font-size:1.25rem;line-height:1.4}
  body.page-dc #subsystems .mcell h4{font-size:1rem;line-height:1.4}
  body.page-dc #subsystems .mcell p{font-size:.875rem;line-height:1.7}
  body.page-dc .event__body>.h-xs:first-child{font-size:1.375rem;line-height:1.4}
  body.page-dc .event .h-xs:not(:first-child){font-size:1rem;line-height:1.5}

  /* Capabilities, industries and project delivery. */
  body.page-wwd .wwd-cards h3{font-size:1.25rem;line-height:1.4}
  body.page-wwd .tab{font-size:.875rem}
  body.page-wwd .fbox h4{font-size:1.0625rem;line-height:1.5}
  body.page-wwd .fbox p{font-size:.9375rem;line-height:1.75}
  body.page-wwd #digital .h-md{font-size:1.5rem;line-height:1.4}
  body.page-wwd .plat__sub{font-size:1rem;line-height:1.6}
  body.page-wws .icol h3{font-size:1.25rem;line-height:1.5}
  body.page-industry .closing-band h3{font-size:1.375rem;line-height:1.4}
  body.page-industry .closing-band p{font-size:.9375rem;line-height:1.8}
  body.page-industry .closing-band .hint,
  body.page-industry .reflogos figcaption{font-size:.875rem;line-height:1.6}
  body.page-industry .refgroup h4{font-size:1.0625rem;line-height:1.5}
  body.page-deliver .dcards span,
  body.page-deliver .steps>div,
  body.page-deliver .connect span,
  body.page-deliver .vlist span,
  body.page-deliver #validate .voutcome>span,
  body.page-deliver .oitem span{font-size:.9375rem;line-height:1.6}
  body.page-deliver .vlist b,
  body.page-deliver .voutcome b{font-size:1rem}
  body.page-deliver .onote{font-size:.875rem}

  /* About, case studies and news. */
  body.page-about .hero-label{font-size:1rem}
  body.page-about .capitem h3,
  body.page-about .acc__hd h4{font-size:1.125rem;line-height:1.5}
  body.page-about .capitem p,
  body.page-about .acc__bd>div,
  body.page-about .cta p{font-size:.9375rem;line-height:1.8}
  body.page-about .jstep,
  body.page-about .certcard span{font-size:.875rem;line-height:1.6}
  body.page-about .jyear{font-size:2.5rem}
  body.page-cases .case__t{font-size:1.125rem;line-height:1.5}
  body.page-cases .case__meta li,
  body.page-cases .case__scope{font-size:.875rem;line-height:1.75}
  body.page-news .nhead h2,
  body.page-news .nhead b{font-size:1.25rem;line-height:1.5}
  body.page-news #news-list h3,
  body.page-news-detail .nrow h4{font-size:1.125rem;line-height:1.5}
  body.page-news #news-list p{font-size:.9375rem;line-height:1.8}
  body.page-news-detail .article h1{font-size:1.625rem;line-height:1.4}
  body.page-news-detail .article h2{font-size:1.375rem;line-height:1.4}
  body.page-news-detail .article h3{font-size:1.25rem;line-height:1.5}
  body.page-news-detail .article p{font-size:.9375rem;line-height:1.85}
  body.page-news-detail .article .article__lead{font-size:1rem;line-height:1.8}

  /* Contact: keep form inputs at their existing readable 16px size. */
  body.page-contact .cline{font-size:.9375rem;line-height:1.7}
  body.page-contact .offices-section .office h3,
  body.page-contact .office-unified .office h3{font-size:1.0625rem;line-height:1.5}
  body.page-contact .offices-section .office__addr,
  body.page-contact .offices-section .office__c,
  body.page-contact .office-unified .office__addr,
  body.page-contact .office-unified .office__c{font-size:.9375rem;line-height:1.8}
  body.page-contact .field label,
  body.page-contact .form__note{font-size:.875rem;line-height:1.7}
}

/* ---------- phone spacing ----------
   Compact vertical whitespace without changing columns, media dimensions,
   fixed navigation, or the scroll animation stages. */
@media (max-width:740px){
  body[class] .section:where(:not(.section--tight,.industry-scenes,.brand-transition)),
  body.page-dc #five-layers,
  body.page-dc #isms,
  body[class] .cta,
  body.page-industry .closing-band{padding-block:2.5rem}
  body[class]:not(.page-contact) .section--tight{padding-block:1.75rem}
  body.home-premium .industry-scenes:not(.industry-scroll)>.wrap{padding-block:2.5rem}
  body.home-premium .delivery-scenes{padding-block:3rem}
  body.page-cases .case-collection{padding-bottom:2.5rem}
  /* The article begins beneath a fixed header, so preserve that clearance. */
  body.page-news-detail>.section:first-of-type{padding-top:calc(var(--hdr) + 1.75rem);padding-bottom:2.5rem}

  body[class] .mt-64{margin-top:2rem}
  body[class] .mt-48{margin-top:1.75rem}
  body[class] .mt-32{margin-top:1.5rem}
  body[class] .mt-24{margin-top:1rem}
  body.home-premium .eyebrow,
  body.page-about #who .eyebrow,
  body.page-industry .industry-approach .eyebrow{margin-bottom:.75rem}
  body[class] .phero .crumbs,
  body.page-about .hero-label{margin-bottom:1.25rem}
  body[class] .phero h1{margin-bottom:.75rem}
  body[class] .phero p{margin-top:.75rem}
  body.page-wwd .h-lg{margin-top:.75rem}
  body.page-wwd #overview .lead{margin-top:1.25rem}

  body[class] .split,
  body.page-industry .industry-approach .split,
  body.page-about #who>.wrap,
  body.page-about #regional>.wrap,
  body.page-about #values>.wrap,
  body.page-about .journey,
  body.page-dc .event{row-gap:1.5rem}
  body.page-about .capitem{padding:1.25rem;gap:1rem}
  body.page-about .acc__hd{padding-block:1.25rem}
  body.page-about .acc__bd>div{padding-bottom:1.25rem}
  body.page-about .cta p{margin-block:1rem 1.5rem}
  body.page-wwd .wwd-cards .card__pad{padding-block:1.25rem}
  body.page-wwd .panel::before{margin-bottom:1.5rem}
  body.page-wwd .fbox h4{margin-bottom:.625rem}
  body.page-industry .refgroup+.refgroup{margin-top:1.75rem}
  body.industry-detail .reflogos{row-gap:1.5rem}
  body.page-industry .closing-band h3{margin-bottom:1rem}
  body.page-industry .closing-band p:not(.hint){margin-bottom:1.5rem}
  body.page-cases .case__bd{padding-block:1.25rem}
  body[class] .pagination{margin-top:1.75rem}
  body.page-news .pills{margin-bottom:1.75rem}

  body.page-news-detail .crumbs{margin-bottom:1.5rem}
  body.page-news-detail .article__meta{padding-block:1rem;margin-bottom:1.5rem}
  body.page-news-detail .article .article__lead{margin-bottom:1.5rem}
  body.page-news-detail .article .shot{margin-block:1.5rem}
  body.page-news-detail .article h3{margin-block:1.75rem .75rem}
  body.page-news-detail .pager{margin-top:1.75rem;padding-top:1.25rem}
  body.page-news-detail .nrow{padding-block:1.25rem}
  body.page-contact .offices-section .office-panels,
  body.page-contact .office-map-frame{margin-top:1.75rem}
  body.page-contact .offices-section .office{padding-block:1.25rem}
  body.page-contact .offices-section .office__addr{margin-bottom:1rem}

  body[class] .ftr{padding-top:2.5rem}
  body[class] .ftr__grid{row-gap:1.5rem}
  body[class] .ftr__logo{margin-bottom:1.5rem}
  body[class] .ftr__addr{margin-bottom:1.25rem}
  body[class] .ftr__bot{margin-top:2rem;padding-block:1.25rem;row-gap:.75rem}
}