/* Bell Morgan motion v3 · "Lights on", Confident (approved 29 September 2026). Loaded after motion.css and frame.css.
   motion.js replaces the spring curves below with sampled linear() springs. The data-bm-* flags on <html>
   switch each moment on; without them the site keeps its earlier resting states. */
:root{
  --bm-slow:1;--bm-press:.96;--bm-t-tap:110ms;--bm-t-hover:320ms;--bm-t-photo:900ms;--bm-focus-blur:2.5px;
  --bm-ease-out:cubic-bezier(.16,1,.3,1);--bm-ease-press:cubic-bezier(.23,1,.32,1);
  --bm-spring-press:cubic-bezier(.2,1,.3,1);--bm-spring-press-t:420ms;
  --bm-spring-pop:cubic-bezier(.34,1.45,.64,1);--bm-spring-pop-t:520ms;
  --bm-spring-glide:cubic-bezier(.22,1,.36,1);--bm-spring-glide-t:480ms
}

/* ---------- Answer every touch: press sinks fast, release springs home ---------- */
.pill,.icon-button,.menu-button,.hero-menu,.hero-nav-item,.round-link,.hero-round-link,.footer-up{
  transition:translate var(--bm-spring-press-t) var(--bm-spring-press),scale var(--bm-spring-press-t) var(--bm-spring-press),transform var(--bm-spring-press-t) var(--bm-spring-press),background-color var(--bm-t-hover) var(--bm-ease-press),border-color var(--bm-t-hover) var(--bm-ease-press),color var(--bm-t-hover) var(--bm-ease-press),box-shadow var(--bm-t-hover) var(--bm-ease-press)
}
.pill:active,.icon-button:active,.menu-button:active,.hero-menu:active,.hero-nav-item:active,.round-link:active,.footer-up:active{
  transform:none;scale:var(--bm-press);transition-duration:var(--bm-t-tap);transition-timing-function:var(--bm-ease-press)
}
.tool-option input+span,.chips label>input+span,.start-options button{transition:scale var(--bm-spring-press-t) var(--bm-spring-press),background-color var(--bm-t-hover) var(--bm-ease-press),border-color var(--bm-t-hover) var(--bm-ease-press),box-shadow var(--bm-t-hover) var(--bm-ease-press)}
.tool-option:active input+span,.chips label:active>input+span,.start-options button:active{scale:var(--bm-press);transition-duration:var(--bm-t-tap)}
[data-bm-magnet]{translate:var(--bm-mx,0px) var(--bm-my,0px)}

/* ---------- Arrows travel: the arrow leaves through its edge and a twin arrives ---------- */
.bm-loop{display:inline-grid;flex:none;overflow:hidden;vertical-align:middle;line-height:0}
.bm-loop>svg{grid-area:1/1;transition:translate calc(var(--bm-t-hover) * 1.35) var(--bm-ease-out),opacity calc(var(--bm-t-hover) * 1.35) var(--bm-ease-out)}
.bm-loop>svg+svg{opacity:0;translate:-110% 0}
.bm-loop[data-dir="diag"]>svg+svg{translate:-110% 110%}
/* The wrapper takes over the layout the site gives these arrows directly (site.css, experience.css). */
.guide-group>a>.bm-loop{margin-left:auto}
.guide-group>a>.bm-loop svg{width:18px}
@media(max-width:480px){.guide-group>a>.bm-loop svg{width:16px}}
@media(max-width:760px){.header-actions .pill .bm-loop{display:none}}
@media(hover:hover) and (pointer:fine){
  html[data-bm-arrow="loop"] [data-bm-loop-host]:hover .bm-loop>svg:first-child{translate:110% 0;opacity:0}
  html[data-bm-arrow="loop"] [data-bm-loop-host]:hover .bm-loop[data-dir="diag"]>svg:first-child{translate:110% -110%}
  html[data-bm-arrow="loop"] [data-bm-loop-host]:hover .bm-loop>svg+svg{translate:0 0;opacity:1}
  html[data-bm-arrow="loop"] :is(.pill,.text-link):hover svg,html[data-bm-arrow="loop"] .guide-card:hover .card-link svg{transform:none}
  html[data-bm-arrow="nudge"] .guide-group>a:hover .bm-loop>svg:first-child{transform:translate(2px,-2px)}
}

/* ---------- Lean in: cards lift towards the pointer and their photographs brighten ---------- */
html[data-bm-lift] :is(.guide-card,.bento-tile,.suburb-card){transition:translate var(--bm-spring-press-t) var(--bm-spring-press),scale var(--bm-spring-press-t) var(--bm-spring-press),box-shadow var(--bm-t-hover) var(--bm-ease-press),background-color var(--bm-t-hover) var(--bm-ease-press)}
html[data-bm-lift] :is(.guide-card,.bento-tile,.suburb-card):active{scale:.985;transition-duration:var(--bm-t-tap)}
html[data-bm-light] :is(.guide-card,.suburb-card,.featured-guide,.guide-group>a,.rail-card) .photo img{transition:transform var(--bm-t-photo) var(--bm-ease-out),filter var(--bm-t-photo) var(--bm-ease-out)}
@media(hover:hover) and (pointer:fine){
  html[data-bm-lift] :is(.guide-card,.bento-tile,.suburb-card):hover{translate:0 -4px;box-shadow:0 26px 48px -32px #1c184f66}
  html[data-bm-light] :is(.guide-card,.suburb-card,.featured-guide,.guide-group>a,.rail-card):hover .photo img{filter:brightness(1.07) saturate(1.06)}
  html[data-bm-lift] .faq-list summary:hover>span{background:var(--selected)}
}

/* ---------- Arrive into light: the dusk wash that lifts off each photograph ---------- */
.photo{isolation:isolate}
.bm-dusk{position:absolute;inset:0;z-index:1;background:#1c184f;mix-blend-mode:multiply;opacity:0;pointer-events:none}
.photo>figcaption{z-index:2}

/* ---------- Glide: one soft light follows the pointer along a navigation row ---------- */
.desktop-nav{position:relative}
.hero-nav>a,.hero-nav>button,.desktop-nav>a{position:relative;z-index:1}
.bm-glide{position:absolute;left:0;top:0;z-index:0;border-radius:999px;pointer-events:none;opacity:0;transition:translate var(--bm-spring-glide-t) var(--bm-spring-glide),width var(--bm-spring-glide-t) var(--bm-spring-glide),height var(--bm-spring-glide-t) var(--bm-spring-glide),opacity var(--bm-t-hover) var(--bm-ease-press)}
.bm-glide.is-snap{transition:opacity var(--bm-t-hover) var(--bm-ease-press)}
.bm-glide.is-on{opacity:1}
.hero-nav .bm-glide{background:#ffffff30;box-shadow:inset 0 0 0 1px #ffffff2e}
.desktop-nav .bm-glide{background:var(--selected);margin-top:-1px}
html:not([data-bm-glide]) .bm-glide{display:none}
@media(hover:hover) and (pointer:fine){html[data-bm-glide] .hero-nav-item:not(.hero-nav-cta):hover{background:#ffffff1f}}
html[data-bm-glide] .tool-progress-track span{transition:transform var(--bm-spring-glide-t) var(--bm-spring-glide)}

/* ---------- Choices confirm: a chosen option's tick draws in ---------- */
.chips input:checked+span:after{transition:width var(--bm-spring-pop-t) var(--bm-spring-pop),opacity 200ms}
@starting-style{.chips input:checked+span:after{width:0;opacity:0}}
.tool-step-rail li>span{transition:background-color var(--bm-t-hover) var(--bm-ease-press),color var(--bm-t-hover) var(--bm-ease-press)}
.tool-step-rail li>svg path{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset calc(var(--bm-t-hover) * 1.4) var(--bm-ease-out)}
.tool-step-rail li[data-complete]>svg path{stroke-dashoffset:0}

/* ---------- Open gently: FAQ markers turn with a small spring and light when open ---------- */
.faq-list summary>span{transition:background-color var(--bm-t-hover) var(--bm-ease-press)}
.faq-list summary svg,.context-details summary>svg{transition:transform var(--bm-spring-pop-t) var(--bm-spring-pop)}
html[data-bm-lift] .faq-list details[open]:not([data-expanding="false"]) summary>span,html[data-bm-lift] .faq-list details[data-expanding="true"] summary>span{background:var(--peri)}

/* ---------- Guided form: completion ticks, a working light while sending ---------- */
.bm-tick{display:inline-block;width:14px;height:14px;margin-left:7px;vertical-align:-2px;color:#6958a8;opacity:0;transition:opacity 200ms}
.bm-tick path{stroke-dasharray:1 1;stroke-dashoffset:0}
.field[data-bm-valid="true"] .bm-tick{opacity:1}
.submit-button{position:relative}
.submit-button .bm-loop{transition:opacity 150ms,scale 150ms}
.submit-button.is-sending .bm-loop{opacity:0;scale:.5}
.submit-button.is-sending:after{content:'';position:absolute;right:30px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:1.6px solid currentColor;border-right-color:transparent;animation:bm-spin calc(800ms * var(--bm-slow)) linear infinite}
@keyframes bm-spin{to{rotate:1turn}}
.bm-swap{position:relative;display:inline-block}
.bm-swap-new{display:inline-block}
.bm-swap-old{position:absolute;top:0;white-space:nowrap;pointer-events:none}

/* ---------- Coming into focus: the homepage statement sharpens as it is read ---------- */
html[data-bm-focus] .bm-focus .motion-word{opacity:calc(.14 + .86 * var(--l,1));filter:blur(calc((1 - var(--l,1)) * var(--bm-focus-blur)))}

/* ---------- The path lights up: one line through the three steps ---------- */
.bm-path-host{position:relative}
.bm-path{position:absolute;width:1px;margin-left:-.5px;background:#ffffff26;pointer-events:none;z-index:0}
.bm-path>span{position:absolute;inset:0;background:var(--peri);transform-origin:top}
html:not([data-bm-path]) .bm-path{display:none}
/* Markers sit over the line. The homepage's filled markers hide it; outlined ones elsewhere get an ink fill. */
.bm-path-host .call-step>span{position:relative;z-index:1;transition:background-color var(--bm-t-hover) var(--bm-ease-press),border-color var(--bm-t-hover) var(--bm-ease-press),color var(--bm-t-hover) var(--bm-ease-press)}
html[data-bm-path] .bm-path-host:not(.home-process-list) .call-step>span{background:var(--ink)}
.bm-path-host .call-step>div{transition:opacity calc(var(--bm-t-hover) * 1.6) var(--bm-ease-out)}
html[data-bm-path] .bm-path-host .call-step:not(.is-lit)>span{border-color:#ffffff2e;color:#ffffff80}
html[data-bm-path] .bm-path-host .call-step:not(.is-lit)>div{opacity:.45}
html[data-bm-path] .bm-path-host .call-step.is-lit>span{border-color:var(--peri);background:var(--peri);color:var(--ink)}

/* ---------- The house full stop (approved lockup C) and the porch light ---------- */
.bm-house{display:inline-block;width:.41em;height:.39em;margin-left:.09em;vertical-align:baseline;fill:currentColor;overflow:visible;transform-origin:50% 100%}
.bm-porch path{stroke:currentColor;stroke-width:2px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
html:not([data-bm-porch]) .bm-porch{display:none}
html[data-bm-porch] .bm-stop{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Confirmed: one ring of light spreads from the tick ---------- */
.bm-check{position:relative;display:inline-grid;flex:none}
.bm-check>*{grid-area:1/1}
.bm-ripple{width:100%;height:100%;border-radius:50%;border:1.5px solid var(--peri);opacity:0;pointer-events:none}

/* ---------- Page to page: cross-document view transitions (Chrome, Edge, Safari 18.2+) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header{view-transition-name:bm-header}
::view-transition-group(*){animation-duration:560ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){animation:200ms cubic-bezier(.4,0,1,1) both bm-page-out}
::view-transition-new(root){animation:560ms cubic-bezier(.16,1,.3,1) both bm-page-in}
::view-transition-old(bm-photo),::view-transition-new(bm-photo){height:100%;object-fit:cover;overflow:clip}
::view-transition-group(bm-photo){animation-duration:680ms}
@keyframes bm-page-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes bm-page-in{from{opacity:0;transform:translateY(22px)}}

/* The Explore menu grows out of its pill with Web Animations (motion.js: growMenu / shrinkMenu), not a view transition. */