/* /smart-living theme for the scroll-world engine. The engine keeps its defaults in
   @layer sw, so these unlayered tokens win without specificity games. */
:root, .sw-root {
  --sw-bg: #ecf0f3;             /* the stills' own studio ground */
  --sw-ink: #0e1a24;
  --sw-ink-soft: #556877;
  --sw-accent: #003f61;
  --sw-font-display: 'Montserrat', system-ui, sans-serif;
  --sw-font-body: 'Montserrat', system-ui, sans-serif;
}
html, body { background: var(--sw-bg); }
body { margin: 0; }
.sw-brand__mark {
  width: 26px; height: 26px; border-radius: 0; box-shadow: none;
  background: url(/assets/ct-logo.webp) center / contain no-repeat;
}
.sw-copy__title { font-weight: 600; letter-spacing: -.03em; }
.sw-copy__eyebrow { font-weight: 600; }

/* Crawlers and no-JS readers get the same story as plain text. Visually hidden once
   the engine has mounted; shown as a simple page if it never does. */
.sw-seo { max-width: 44rem; margin: 0 auto; padding: 6rem 1.5rem; font-family: var(--sw-font-body);
  color: var(--sw-ink); line-height: 1.6; }
.sw-root ~ .sw-seo, .sw-mounted .sw-seo {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; padding: 0; margin: -1px; }

/* site.css colours every link navy, unlayered, which beats the engine's layered button
   colours and left the top call to action navy on navy. Restated here. */
.sw-topcta, .sw-btn--primary { color: #fff; background: #003f61; }
.sw-topcta:hover, .sw-btn--primary:hover { background: #226691; }
.sw-btn--ghost { color: var(--sw-ink); }
.sw-brand { color: var(--sw-ink); text-decoration: none; }

/* The site header and island replace the engine's own top bar. The bar sits above
   every engine layer (scrollbar is 60). */
.sw-topbar { display: none; }
.sw-page .bar { z-index: 70; }


/* Phones: the same flight, framed for a tall screen. The 9:16 renders leave the model
   small in a field of grey and the engine lays the copy over it, so here the picture
   lives in the top of the screen, zoomed onto the model, and the words sit in their
   own band underneath. */
@media (max-width:760px){
  .sw-stage{inset:auto 0 auto 0;top:64px;height:58svh;overflow:hidden}
  .sw-scene{transform:scale(1.18);transform-origin:50% 45%}
  .sw-route,.sw-nav,.sw-particles,.sw-hint{display:none}
  .sw-copy{left:20px;right:20px;top:calc(64px + 58svh + 12px);bottom:auto;max-width:none;transform:none}
  .sw-copy__num{font-size:.7rem}
  .sw-copy__eyebrow{font-size:.68rem;letter-spacing:.12em}
  .sw-copy__title{font-size:1.38rem;line-height:1.15;margin:.35rem 0 .45rem}
  .sw-copy__body{font-size:.9rem;line-height:1.5;margin:0}
  .sw-copy__tags{display:none}
  .sw-copy__cta{margin-top:1rem}
}
/* Short phones (SE, mini): the picture gives up some height so a long scene's words fit. */
@media (max-width:760px) and (max-height:720px){
  .sw-stage{height:50svh}
  .sw-copy{top:calc(64px + 50svh + 10px)}
  .sw-copy__title{font-size:1.25rem}
  .sw-copy__body{font-size:.86rem}
}