/* Breathe Right LLC // Prime refinement pass 2026.10.23
   Optical hierarchy, motion restraint, legible surfaces, and stable responsive framing.
   Loaded LAST. The client's visual language, artwork and video remain intact. */

:root {
  --br-polish-ink:#183773;
  --br-polish-link:#254fc1;
  --br-polish-border:rgba(135,172,233,.58);
  --br-polish-radius:18px;
}

/* Spatial shells: precise, subtle chrome rather than overlays across content */
html.br-pages main > section {
  border-color:var(--br-polish-border);
  box-shadow:
    inset 0 0 0 1px rgba(253,254,255,.72),
    inset 0 1px 0 3px rgba(190,212,249,.18),
    0 13px 35px rgba(0,11,39,.35),
    0 0 0 1px rgba(26,64,147,.64);
  text-rendering:optimizeLegibility;
}
html.br-pages main > section.br-no-scroll {
  overscroll-behavior: none;
}
html.br-pages main > section:focus-visible {outline:2px solid #c9e3ff;outline-offset:-5px}

/* Brand header, responsive breathing room, no brand/button collision */
header#header nav.wrap {column-gap:clamp(7px,1.4vw,22px);}
header#header .br-header-identity {min-width:0;flex-shrink:1}
header#header .br-header-identity .br-logo-window{min-width:0}
header#header .header-book {
  flex-shrink:0;
  min-height:43px;
  gap:9px;
  transition:transform .2s ease, box-shadow .2s ease;
}
header#header .header-book:hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px #fff8,0 7px 15px #173d8c53;
}
.br-book-short{display:none}

/* Custom nav: centered keyboard/touch targets; avoid selected item clipping */
html.br-pages nav.pill-wrap {touch-action:pan-x;contain:layout style}
html.br-pages .pill-link {position:relative}
html.br-pages .pill-link.active {box-shadow:inset 0 1px #fff,0 3px 12px #00164060}
html.br-pages .pill-link.active::after {
  content:"";position:absolute;bottom:3px;
  height:2px;width:22px;border-radius:4px;background:#638bea;
  pointer-events:none;
}
html.br-pages .pill-wrap .br-step {min-width:30px}
html.br-pages .pill-wrap .br-step:disabled {pointer-events:none}
html.br-pages #spatial:focus-visible,
html.br-pages .pill-link:focus-visible,
html.br-pages .br-step:focus-visible {outline:2px solid #fff;outline-offset:-3px}

/* Only one animation system: section-to-section transitions.
   Content is never invisible while awaiting an intersection callback. */
html.br-pages body.js-motion main .reveal {
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  visibility:visible !important;
  transition:none !important;
}
html.br-pages main > section .wrap {position:relative}

/* Home: actual client background, logo plaque, and a clean short-content finish */
html.br-pages #home .hero-copy {max-width:680px}
html.br-pages #home .br-hero-logo-plaque {margin-bottom:clamp(17px,2.7vw,26px)}
html.br-pages #home .intro {
  max-width:560px;line-height:1.54;
  font-size:clamp(16px,1.6vw,21px);
  color:#1d3c76;
  text-wrap:pretty;
}
html.br-pages #home .hero-actions {max-width:460px}
html.br-pages #home .hero-note {
  width:fit-content;max-width:min(100%,460px);
  text-wrap:pretty;
  box-shadow:inset 0 1px #ffffff50,0 7px 17px #081c4566;
}
html.br-pages #home .hero-index {display:none !important}

/* Editorial: consistent image corners and typography */
html.br-pages #philosophy .philosophy-inner {align-content:center}
html.br-pages #philosophy .photo-vault {
  max-width:100%;backface-visibility:hidden;
  box-shadow:inset 0 1px #fff,0 15px 42px #142c5b3f;
}
html.br-pages #philosophy .foil-tag {border-radius:7px;max-width:calc(100% - 36px)}
html.br-pages #philosophy p,
html.br-pages #approach .copy {
  color:#3e5558;
  line-height:1.72;
  text-wrap:pretty;
}
html.br-pages #approach .approach-heading {max-width:840px}
html.br-pages #approach .approach-card {
  border-color:#adbfdf;
  box-shadow:inset 0 1px #fff,0 12px 25px #1c448526;
}
html.br-pages #approach .approach-img {overflow:hidden;isolation:isolate}
html.br-pages #approach .approach-img img {
  width:100%;height:100%;object-fit:cover;object-position:50% 43%;
  transform:translateZ(0);
}
html.br-pages #approach .approach-info h3 {
  color:#183978;
  line-height:1.2;
  text-wrap:balance;
}
html.br-pages #approach .approach-info p {
  color:#50616a;line-height:1.66;
}

/* Film: artwork/scanlines remain IN BACKGROUND. Children stay opaque. */
html.br-pages #meet-tyonna .video-layout {position:relative;z-index:2}
html.br-pages #meet-tyonna .video-frame {
  overflow:hidden;
  box-shadow:inset 0 1px #fff6,0 18px 42px #07133299;
}
html.br-pages #meet-tyonna .video-frame video {max-width:100%;display:block}
html.br-pages #meet-tyonna .video-side p {text-wrap:pretty}
html.br-pages #meet-tyonna .video-badge {
  max-width:calc(100% - 26px);
  right:13px;top:14px;
  text-align:center;
  font-size:clamp(8px,1vw,10px);
}

/* Offer, original testimonials and live submitted reviews */
html.br-pages #offer .offer-panel {
  max-width:1160px;margin-inline:auto;
  border-color:#91aad5;
  border-radius:20px;
}
html.br-pages #offer h2 {text-wrap:balance}
html.br-pages #reviews .reviews-head h2 {text-wrap:balance}
html.br-pages #reviews .review-grid .review {
  border-radius:15px;
  box-shadow:inset 0 1px #fff,0 8px 19px #143c8420;
}
html.br-pages #reviews .review-grid .review p,
html.br-pages #reviews .community-review .body {overflow-wrap:anywhere;text-wrap:pretty}
html.br-pages #reviews .review-subheading {
  border-top:1px solid rgba(51,98,181,.25);
  padding-top:21px;
}
html.br-pages #reviews .community-review {
  border-color:#aec6eb; border-radius:15px;
}
html.br-pages #reviews .review-compose input,
html.br-pages #reviews .review-compose textarea {
  transition:border-color .2s ease,box-shadow .2s ease;
}
html.br-pages #reviews #review-send:disabled {
  opacity:.65;filter:saturate(.6);cursor:progress;
}
html.br-pages #reviews .star-label {min-width:44px;min-height:44px}

/* Vision and finish: clear CTA hierarchy, measured spacing */
html.br-pages #vision .vision-text p {max-width:650px;line-height:1.77;text-wrap:pretty}
html.br-pages #vision h2 {text-wrap:balance}
html.br-pages #connect .next-grid {align-content:center}
html.br-pages #connect h2 {color:#193e83;text-wrap:balance}
html.br-pages #connect .next-actions .btn {
  line-height:1.4;
  white-space:normal;
  min-height:54px;
  text-align:left;
}
html.br-pages .br-footer-disclosure summary:focus-visible {outline:2px solid #4e76d0;outline-offset:1px}

/* Contain painting to the right surfaces. Do not create overlay layers above the film. */
html.br-pages #meet-tyonna::before,
html.br-pages #meet-tyonna::after {content:none!important;display:none!important}

/* Small screens: compact logo/action/header without squeezing the content */
@media(max-width:760px){
  header#header nav.wrap {column-gap:8px}
  html.br-pages .pill-link {letter-spacing:.055em}
  html.br-pages #home .intro{font-size:clamp(15px,4.1vw,18px)}
  html.br-pages #home .hero-actions {max-width:100%}
  html.br-pages #philosophy .philosophy-inner {gap:22px}
  html.br-pages #approach .approach-card {margin-inline:0}
  html.br-pages #meet-tyonna .video-side{padding:21px}
  html.br-pages #meet-tyonna .video-side h2{font-size:clamp(44px,11vw,66px)}
  html.br-pages #reviews .community-grid{grid-template-columns:1fr}
  html.br-pages #connect .next-actions .btn{min-height:52px}
}
@media(max-width:390px){
  header#header .header-book {
    min-width:69px;min-height:40px;
    padding:8px 10px;font-size:10px;gap:6px;
  }
  header#header .br-header-identity {
    max-width:calc(100% - 85px);
  }
  .br-book-long{display:none}
  .br-book-short{display:inline}
  html.br-pages #home .br-hero-logo-plaque {padding:8px}
  html.br-pages #home .intro {font-size:15px}
  html.br-pages #home .btn {font-size:11px;padding:12px 14px}
  html.br-pages #reviews .review-compose{padding:20px 14px}
  html.br-pages #reviews .star-label{min-width:44px}
}
@media (orientation:landscape) and (max-height:570px){
  html.br-pages #home .br-hero-logo-plaque {max-width:410px;margin:6px 0 9px}
  html.br-pages #home .intro {font-size:15px}
  html.br-pages #home .hero-actions {gap:6px}
  html.br-pages #meet-tyonna .video-frame {max-height:none;width:min(45vw,330px)}
}
@media (hover:none) {
  html.br-pages #approach .approach-card:hover,
  html.br-pages .service:hover {transform:none}
}
@media(prefers-reduced-motion:reduce){
  html.br-pages .pill-link,
  html.br-pages .br-step,
  html.br-pages .btn,
  html.br-pages .approach-img img {transition:none!important}
}