/* Current React content grid. Photography may bleed; reading edges share a rail. */
:root{
 --j-shell:1440px;
 --j-grid-gap:clamp(28px,3.2vw,48px);
 --j-edge:max(var(--j-gutter),calc((100vw - var(--j-shell))/2 + var(--j-gutter)));
 --j-copy-measure:62ch;
}

.desktop-header-inner,
#s3 #section_3_txt .w980,
#s5 #section_5_txt .w980,
#s7 #s7_txt .w980,
#s8>.chapter-content>.w980,
#s5 .editorial-home{
 width:100%!important;
 max-width:var(--j-shell)!important;
 margin-inline:auto!important;
 padding-inline:var(--j-gutter);
}
#s3 .layer.left{
 width:100%!important;
 max-width:var(--j-shell)!important;
 margin-inline:auto!important;
 padding-inline:var(--j-gutter);
}
#s4.dream-studio{padding-inline:var(--j-edge)}
#s4 .dream-intro,#s4 .dream-experience,#s4 .dream-conversation{
 width:100%;max-width:none;margin-inline:0;min-width:0;
}
#s4 .dream-panel,#s4 .dream-visual,#s4 .dream-notes{min-width:0}
#s7{display:block;grid-template-columns:none;grid-template-rows:none;padding:0!important}
#s7 #s7_txt{grid-area:auto}
#s8 .col1,#s8 .col1 .txt{max-width:none}
#s9.personal-signoff{padding-inline:var(--j-edge)!important}

/* A single mobile rail, without nested tablet insets or fractional offsets. */
@media(max-width:979px){
 #s2 #section_2_txt .w980,
 #s3 #section_3_txt .w980,
 #s5 #section_5_txt .w980,
 #s6 #section_6_txt .w980,
 #s7 #s7_txt .w980,
 #s8>.chapter-content>.w980{padding-inline:var(--j-gutter)!important;max-width:var(--j-shell)!important}
 #s6{display:block;padding:0}
 #s6 #s6_img2 .w980{padding:40px var(--j-gutter) 0!important}
 #s6 .johanne-portrait{width:min(100%,360px);max-width:360px;margin-inline:0!important}
 #s6 .johanne-portrait img{width:100%}
 #s4 .dream-intro{gap:16px}
 #s4 .dream-panel{gap:24px}
 #s4 .dream-conversation{justify-items:start}
 #s7 .txt{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 #s7 .txt .bilingual-translation{max-width:none}
}

/* Wider phones/tablets use the same two tracks inside each regional row. */
@media(min-width:680px) and (max-width:979px){
 #s3 .item{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--j-grid-gap);align-items:start}
 #s3 .regional-card-photo{margin-bottom:0}
 #s3 .item .item_inner{display:block;padding:0}
 #s6{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--j-grid-gap);align-items:start;padding:56px var(--j-gutter)}
 #s6 #s6_img2{align-self:start}
 #s6 #s6_img2 .w980,#s6 #section_6_txt .w980{padding:0!important}
 #s6 .johanne-portrait{width:100%;max-width:none}
}

/* Laptop spreads: common six/six introductions, eight/four studio, five/seven portrait. */
@media(min-width:980px){
 #s2{grid-template-columns:repeat(2,minmax(0,1fr))}
 #s2 #section_2_txt .w980{
  max-width:none!important;margin:0!important;
  padding-left:calc(var(--j-grid-gap)/2);
  padding-right:var(--j-edge);
 }
 #s2 #section_2_txt h2{max-width:none}
 #s3 #section_3_txt .txt_wrapper,
 #s5 #section_5_txt .txt_wrapper{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--j-grid-gap);row-gap:0;align-items:start;
 }
 #s3 #section_3_txt .txt_wrapper>.editorial-kicker,
 #s5 #section_5_txt .txt_wrapper>.editorial-kicker{grid-column:1/-1;grid-row:1}
 #s3 #section_3_txt .txt_wrapper>h2,
 #s5 #section_5_txt .txt_wrapper>h2{grid-column:1;grid-row:2;max-width:none}
 #s3 #section_3_txt .txt_wrapper>div,
 #s5 #section_5_txt .txt_wrapper>div{grid-column:2;grid-row:2;min-width:0}
 #s3 #section_3_txt p,#s5 #section_5_txt p{max-width:var(--j-copy-measure)}
 #s3 .layer.left{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--j-grid-gap)}
 #s3 .item,#s3 .item .item_inner{min-width:0}
 #s4 .dream-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--j-grid-gap);align-items:start}
 #s4 .dream-intro>div{display:contents}
 #s4 .dream-intro .editorial-kicker{grid-column:1/-1;grid-row:1;margin-bottom:24px!important}
 #s4 .dream-intro h2{grid-column:1;grid-row:2;max-width:none}
 #s4 .dream-intro>p{grid-column:2;grid-row:2;max-width:var(--j-copy-measure);margin:0}
 #s4 .dream-panel{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--j-grid-gap)}
 #s6{
  width:100%;max-width:var(--j-shell);margin-inline:auto!important;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--j-grid-gap);align-items:start;padding:80px var(--j-gutter);
 }
 #s6 #s6_img2{align-self:start}
 #s6 #s6_img2 .w980,#s6 #section_6_txt .w980{padding:0!important;max-width:none!important;margin:0!important}
 #s6 .johanne-portrait{width:100%;max-width:520px;margin-inline:0!important}
 #s6 #section_6_txt h2{max-width:none}
 #s6 #section_6_txt p{max-width:var(--j-copy-measure)}
 #s7 #s7_txt .w980{padding-block:88px}
 #s7 .txt{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--j-grid-gap);align-items:start}
 #s7 .txt .bilingual-primary{max-width:var(--j-copy-measure)}
 #s7 .txt .bilingual-translation{max-width:none;margin:0;padding:0 0 0 24px;border-left:1px solid var(--j-rule)}
 #s8 .col1 .txt{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--j-grid-gap);max-width:none}
 #s8 .txt p{max-width:var(--j-copy-measure)}
}

/* Keep the room navigation and enquiry inside the photo's editorial spread. */
#s4 .dream-notes{display:flex;flex-direction:column;min-width:0;padding-bottom:0}
#s4 .dream-actions{margin-top:auto;padding-top:8px;min-width:0}
#s4 .dream-actions .dream-timer{margin-top:0}
#s4 .dream-actions .dream-controls{flex-wrap:wrap;gap:12px;padding:16px 0}
#s4 .dream-actions .dream-controls>div{margin-left:auto}
#s4 .dream-actions .dream-status{flex:1 1 90px}
#s4 .dream-actions .dream-conversation{margin:0;display:block}
#s4 .dream-actions .dream-enquiry{width:100%;gap:14px}

/* Contact and expertise form one group; official artwork signs it below. */
.advisor-contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:22px}
.advisor-contact-grid>div{min-width:0}
#s6 .advisor-contact-links .contact-detail{margin:0!important;min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font:400 14px/1.6 var(--j-body)}
#s6 .advisor-contact-links .detail-micro-icon{margin-right:3px}
#s6 .advisor-contact-links a{overflow-wrap:anywhere}
#s6 .advisor-contact-grid .johanne-credentials{margin:0;padding:0;border:0}
#s6 .advisor-contact-grid .credentials-expertise{margin-bottom:14px}
#s6 .txt_wrapper .brokerage-mark{width:300px;max-width:100%;margin:28px 0 0}
@media(min-width:980px),(min-width:600px) and (max-width:679px){
 .advisor-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media(min-width:980px){
 #s7 .txt{grid-template-columns:repeat(2,minmax(0,1fr))}
 #s7 .txt .bilingual-translation{position:relative;padding:0;border-left:0}
 #s7 .txt .bilingual-translation:before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--j-grid-gap)/-2);border-left:1px solid var(--j-rule)}
}

/* One icon rhythm and readable newsletter guidance without an artificial text cap. */
#s9 .signoff-contact .signoff-newsletter{display:flex;align-items:center;gap:10px}
#s9 .signoff-newsletter span{min-width:0}
#s9 .newsletter-note{max-width:none;white-space:normal}
#s9 .signoff-email-row .signoff-social{padding-inline:4px}
#s9 .signoff-email-row .signoff-social a{padding:12px;width:44px;height:44px;flex:0 0 44px}
@media(min-width:1200px){
 #s9 .signoff-main{grid-template-columns:164px minmax(0,1.3fr) minmax(0,1.05fr)}
}

/* One balanced professional signature, with identity and expertise held together. */
#s6 .advisor-signature{margin-top:32px;padding-top:28px;border-top:1px solid var(--j-rule)}
#s6 .advisor-signature .advisor-contact-grid{margin:0;gap:28px}
#s6 .advisor-signature .advisor-name{font:400 clamp(23px,1.8vw,26px)/1.35 var(--j-display)!important;letter-spacing:-.035em;margin:0 0 7px!important}
#s6 .advisor-signature .advisor-role{font:500 12px/1.5 var(--j-body);letter-spacing:.055em;text-transform:uppercase;color:var(--j-muted);margin:0 0 22px}
#s6 .advisor-signature .contact-detail{display:grid;grid-template-columns:16px minmax(0,1fr);gap:0 10px;min-height:0;margin:0 0 18px!important}
#s6 .advisor-signature .contact-detail:last-child{margin-bottom:0!important}
#s6 .advisor-signature .contact-detail .detail-micro-icon{grid-column:1;grid-row:1;margin:1px 0 0}
#s6 .advisor-signature .contact-label{color:var(--j-muted);font:400 12px/1.5 var(--j-body)}
#s6 .advisor-signature .contact-detail a{grid-column:2;grid-row:1;display:grid;gap:3px;min-height:44px;justify-self:start;font:400 15px/1.5 var(--j-body);color:var(--j-blue);text-decoration:none;max-width:100%}
#s6 .advisor-signature .contact-value{text-decoration:underline;text-underline-offset:4px}
#s6 .advisor-signature .contact-detail a:hover .contact-value{text-decoration-thickness:2px}
#s6 .advisor-signature .contact-detail a:focus-visible{outline:3px solid var(--j-btn-focus);outline-offset:4px;border-radius:2px}
#s6 .advisor-signature .credentials-expertise{padding-top:4px;font:400 20px/1.45 var(--j-display);margin:0 0 22px}
#s6 .advisor-signature .johanne-credentials dt{font-size:14px;line-height:1.5;letter-spacing:0}
#s6 .advisor-signature .johanne-credentials dd{font-size:13px;line-height:1.6}
#s6 .advisor-brokerage{display:flex;justify-content:center;margin-top:26px;padding-top:24px;border-top:1px solid var(--j-rule)}
#s6 .txt_wrapper .advisor-brokerage .brokerage-mark{width:260px;max-width:85%;margin:0}

/* A quiet studio signature beside the existing brokerage attribution. */
#s9 .signoff-attribution{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
#s9 .site-credit{display:inline-flex;align-items:center;min-height:44px;color:var(--j-muted);font:400 12px/1.5 var(--j-body);letter-spacing:0;text-decoration:underline;text-decoration-color:var(--j-rule);text-underline-offset:3px;scroll-margin-block:100px}
#s9 .site-credit:hover{color:var(--j-blue);text-decoration-color:currentColor}
#s9 .site-credit:focus-visible{outline:3px solid var(--j-btn-focus);outline-offset:3px;border-radius:2px;color:var(--j-blue)}