:root {
  --ink: #111111;
  --paper: #f6f5f1;
  --blue: #3559f6;
  --purple: #9e3eda;
  --pink: #f0426a;
  --yellow: #f0c84b;
  --line: rgba(17, 17, 17, 0.18);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-size: 16px; line-height: 1.55; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 20; background: white; padding: .75rem 1rem; }

.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 1.4rem clamp(1.25rem, 4vw, 4.5rem);
  position: relative;
  z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: .8rem; font-weight: 700; text-decoration: none; }
.brand img { width: 2.65rem; height: 2.65rem; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.8vw, 2.5rem); }
.nav a { font-size: .9rem; font-weight: 650; text-decoration: none; }
.nav a:hover, .nav a:focus-visible { text-decoration: underline; text-underline-offset: .3rem; }

.hero {
  background: radial-gradient(circle at 82% 36%, #fff 0, var(--paper) 42%);
  display: grid;
  min-height: calc(100vh - 5.45rem);
  min-height: calc(100svh - 5.45rem);
  padding: clamp(4rem, 11vw, 9rem) clamp(1.25rem, 8vw, 9rem) 5rem;
  align-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.hero h1 { max-width: 8ch; }
.hero-name { display: flex; font-size: clamp(3rem, 8.7vw, 8.5rem); gap: .18em; max-width: none !important; }
.hero-name-word { display: block; }
.hero-pronunciation { display: block; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 400; letter-spacing: .04em; line-height: 1.2; margin-top: .45rem; }
.eyebrow { font-size: .8rem; font-weight: 750; letter-spacing: .12em; margin: 0 0 1.25rem; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.5rem, 10.8vw, 10rem); letter-spacing: -.075em; line-height: .86; margin-bottom: 2rem; max-width: 11ch; }
.hero-copy { font-size: clamp(1.12rem, 2vw, 1.5rem); max-width: 39rem; }
.hero > .eyebrow, .hero-name, .hero-copy, .scroll-cue { position: relative; z-index: 6; }
.hero-fragments { inset: 0; pointer-events: none; position: absolute; z-index: 2; }
.hero-foreground { height: 100%; inset: 0; object-fit: cover; object-position: center; pointer-events: none; position: absolute; width: 100%; z-index: 4; }
.hero-contours { inset: 0; pointer-events: none; position: absolute; z-index: 2; }
.hero-contour { animation: contour-breathe var(--contour-speed, 7.5s) linear infinite; background: var(--contour-colour); filter: saturate(1); inset: 0; mask: var(--contour-mask) center / cover no-repeat; -webkit-mask: var(--contour-mask) center / cover no-repeat; position: absolute; transform-origin: 76% 60%; transition: filter .3s ease, transform .38s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.hero-contour.is-active { animation: none; filter: saturate(1.14) drop-shadow(0 1rem 1.1rem rgba(22,18,45,.16)); transform: scale(var(--hover-scale, 1.03)); }
.contour-outer { --contour-colour: #ff7458; --contour-mask: url('/assets/about-contour-4.png'); --contour-speed: 8.2s; --contour-x: -10px; --contour-y: 6px; --hover-scale: 1.018; clip-path: polygon(-1% -1%, 68% -1%, 69.5% 3.6%, 71% 2.4%, 72.5% 1.3%, 74% .5%, 76% 0, 78% .4%, 80% 1.3%, 82% 2.5%, 84.5% 4%, 86% -1%, 101% -1%, 101% 101%, -1% 101%); }
.contour-blue { --contour-colour: #3559f6; --contour-mask: url('/assets/about-contour-3.png'); --contour-speed: 7.6s; --contour-x: 9px; --contour-y: -6px; --hover-scale: 1.024; animation-delay: -3.1s; clip-path: polygon(-1% -1%, 69.5% -1%, 70.5% 3%, 72% 1.9%, 73.5% .9%, 75% .25%, 76.5% 0, 78% .35%, 79.5% 1.1%, 81.5% 2.2%, 83.5% 3.5%, 84.5% -1%, 101% -1%, 101% 101%, -1% 101%); }
.contour-pink { --contour-colour: #f3a8d3; --contour-mask: url('/assets/about-contour-2.png'); --contour-speed: 7.1s; --contour-x: -8px; --contour-y: -5px; --hover-scale: 1.032; animation-delay: -5.4s; }
.contour-inner { --contour-colour: #f0426a; --contour-mask: url('/assets/about-contour-1.png'); --contour-speed: 6.6s; --contour-x: 7px; --contour-y: 5px; --hover-scale: 1.04; animation-delay: -1.8s; }
.hero-cutout-base { background: white; inset: 0; -webkit-mask: url('/assets/about-foreground.png') center / cover no-repeat; mask: url('/assets/about-foreground.png') center / cover no-repeat; pointer-events: none; position: absolute; z-index: 3; }
.identity-fan { bottom: -3rem; height: clamp(14rem, 20vw, 19rem); pointer-events: none; position: absolute; right: 3%; width: clamp(20rem, 27vw, 31rem); z-index: 4; }
.identity-fan[hidden] { display: none; }
.fan-item { bottom: 6%; pointer-events: auto; position: absolute; transform: rotate(var(--fan-turn, 0deg)); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.fan-item:hover { filter: drop-shadow(0 1rem 1rem rgba(30,20,40,.2)); transform: translateY(-3rem) rotate(0deg) scale(1.08); z-index: 10; }
.fan-item img { display: block; height: auto; width: 100%; }
.fan-camera { left: 2%; width: 28%; --fan-turn: -23deg; z-index: 1; }
.fan-plane { left: 17%; width: 46%; --fan-turn: -11deg; z-index: 2; }
.fan-cursor { bottom: 8%; left: 50%; width: 21%; --fan-turn: 5deg; z-index: 4; }
.fan-flags { align-items: flex-end; display: flex; gap: .15rem; right: 2%; width: 29%; --fan-turn: 18deg; z-index: 2; }
.flag-card { display: block; filter: drop-shadow(-3px 0 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 .45rem .45rem rgba(30,20,40,.16)); font-size: clamp(1.9rem, 3.5vw, 3.25rem); line-height: 1; padding-bottom: clamp(2.2rem, 4vw, 3.7rem); position: relative; }
.flag-card::after { background: #c6c0b8; border-radius: 999px; bottom: 0; box-shadow: -2px 0 #fff, 2px 0 #fff; content: ""; height: clamp(2.8rem, 4.8vw, 4.5rem); left: .16em; position: absolute; width: clamp(.18rem, .3vw, .28rem); z-index: -1; }
.flag-fr { transform: rotate(-10deg) translateY(.35rem); }
.flag-uk { transform: rotate(8deg); }
.fan-sun { bottom: 11%; right: 17%; width: 15%; --fan-turn: 28deg; z-index: 3; }
.hero-fragment { position: absolute; transform: translate3d(var(--move-x, 0), var(--move-y, 0), 0) rotate(var(--turn, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.fragment-selection { border: 2px solid #6a45ff; bottom: 3%; height: clamp(7rem, 11vw, 11rem); right: 30%; top: auto; width: clamp(6rem, 9vw, 9rem); }
.fragment-selection > i { background: white; border: 2px solid #6a45ff; height: .55rem; position: absolute; width: .55rem; }
.fragment-selection > i:nth-of-type(1) { left: -.35rem; top: -.35rem; }
.fragment-selection > i:nth-of-type(2) { right: -.35rem; top: -.35rem; }
.fragment-selection > i:nth-of-type(3) { bottom: -.35rem; left: -.35rem; }
.fragment-selection > i:nth-of-type(4) { bottom: -.35rem; right: -.35rem; }
.selection-label { background: #6a45ff; color: white; font-size: .65rem; font-weight: 750; left: -2px; padding: .2rem .38rem; position: absolute; top: -1.7rem; }
.fragment-camera { bottom: auto; right: 35%; top: 14%; width: clamp(7rem, 10vw, 10rem); --turn: -6deg; }
.fragment-ticket { right: 1%; top: 43%; width: clamp(10rem, 16vw, 16rem); --turn: 5deg; }
.fragment-bonjour { right: 1%; top: 18%; width: clamp(8rem, 12vw, 12rem); --turn: 5deg; }
.fragment-sun { right: 25%; top: 51%; width: clamp(3.8rem, 5vw, 5.2rem); --turn: -7deg; }
.fragment-camera img, .fragment-ticket img, .fragment-bonjour img, .fragment-sun img { display: block; height: auto; width: 100%; }
.fragment-cursor { bottom: 1%; right: 29%; top: auto; width: 2.2rem; --turn: -8deg; }
.fragment-cursor svg { display: block; filter: drop-shadow(0 .35rem .3rem rgba(0,0,0,.18)); width: 100%; }
.fragment-cursor path { fill: white; stroke: #111; stroke-linejoin: round; stroke-width: 2; }
.scroll-cue { bottom: 2rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; position: absolute; right: 35%; text-transform: uppercase; }

.work { background: var(--paper); color: var(--ink); padding: clamp(1.25rem, 3vw, 3rem); position: relative; }
.section-head { align-items: end; display: flex; justify-content: space-between; gap: 2rem; padding: 1.4rem 0 2rem; }
.section-head h2 { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.05em; margin: 0; }
.section-head p { color: rgba(17,17,17,.58); margin: 0; }
.project-card { background: #ebe7df; display: grid; grid-template-columns: .9fr 1.1fr; min-height: min(75vh, 48rem); color: var(--ink); isolation: isolate; text-decoration: none; overflow: hidden; position: relative; }
.project-copy { background: #ebe7df; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 5rem); position: relative; transition: background-color .24s ease; z-index: 2; }
.project-copy h3 { font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -.07em; line-height: .9; margin-bottom: 1.5rem; }
.project-copy p { font-size: clamp(1.05rem, 1.8vw, 1.35rem); max-width: 28rem; }
.project-meta { display: flex; flex-wrap: wrap; gap: .55rem; }
.project-meta span { border: 1px solid rgba(143,0,149,.35); border-radius: 999px; font-size: .77rem; font-weight: 700; padding: .38rem .7rem; text-transform: uppercase; }
.project-visual { background: #ebe7df; display: grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr); gap: 1px; }
.project-screen { align-items: end; background: #ebe7df; display: flex; justify-content: center; padding: clamp(2.5rem, 6vw, 6rem) clamp(2rem, 7vw, 7rem) 0; }
.project-phone { background: transparent; border: 0; border-radius: 0; box-shadow: none; max-height: 42rem; max-width: 25rem; overflow: hidden; width: 100%; }
.project-phone img { display: block; height: auto; width: 100%; }
.myko-interface { background: #ebe7df; box-shadow: -3px 0 0 #ebe7df; display: block; gap: 0; grid-template: none; margin-left: -1px; min-height: 44rem; overflow: hidden; position: relative; transition: background-color .24s ease, box-shadow .24s ease; }
.myko-orbit { height: 100%; min-height: 44rem; position: relative; width: 100%; }
.orbit-phone { bottom: -10%; left: 53%; max-width: none; position: absolute; transform: translateX(-50%); width: min(27vw, 25rem); z-index: 3; }
.orbit-control { filter: drop-shadow(0 1.2rem 1.7rem rgba(46,33,83,.18)); position: absolute; z-index: 2; }
.orbit-control img { height: auto; width: 100%; }
.orbit-white { background: white; border-radius: 1.2rem; padding: .7rem; }
.orbit-boost { left: 14%; top: 5%; width: min(9vw, 8.5rem); }
.orbit-away { background: white; border-radius: 1rem; padding: .45rem; right: 1%; top: 12%; width: min(7vw, 6.5rem); }
.orbit-temperature { left: 2%; top: 31%; width: min(8vw, 7.5rem); z-index: 4; }
.orbit-consumption { right: 8%; top: 40%; width: min(8vw, 7.5rem); z-index: 4; }
.orbit-heating { bottom: 13%; left: 8%; width: min(13vw, 12.5rem); }
.orbit-colour { bottom: 2%; right: 1%; width: min(12vw, 11.5rem); }
.orbit-heating, .orbit-colour { border-radius: 50%; }
.orbit-temperature, .orbit-heating { filter: none; }
.orbit-ambient { color: var(--ink); opacity: .11; position: absolute; width: 2.8rem; z-index: 1; }
.orbit-ambient svg { display: block; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; width: 100%; }
.orbit-icon-bulb { left: 28%; top: 15%; transform: rotate(-9deg); }
.orbit-icon-radiator { right: 27%; top: 30%; transform: rotate(7deg); }
.project-grid { display: grid; gap: clamp(.8rem, 1.25vw, 1.35rem); grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); isolation: isolate; min-height: min(75vh, 48rem); }
.project-grid > a { min-height: 0; }
.project-grid > a { border-radius: clamp(1rem, 1.5vw, 1.5rem); }
.project-grid .project-card { display: flex; flex-direction: column; grid-row: 1 / -1; grid-template-columns: none; overflow: hidden; }
.project-grid .project-copy { background: transparent; left: 0; min-height: 0; padding: clamp(1.75rem, 2.6vw, 3rem); position: absolute; top: 0; width: 45%; }
.project-grid .project-copy h3 { font-size: clamp(3rem, 5vw, 5rem); margin-bottom: 1rem; }
.project-grid .project-copy p { font-size: clamp(1rem, 1.35vw, 1.18rem); }
.project-grid .myko-interface { flex: 1 1 auto; margin: 0; min-height: 25rem; overflow: visible; }
.project-grid .myko-orbit { min-height: 25rem; }
.project-grid .orbit-phone { bottom: -10%; left: 60%; width: min(20vw, 20rem); }
.project-grid .orbit-boost { left: 35%; top: 43%; width: min(7vw, 6.5rem); }
.project-grid .orbit-away { right: 16%; top: 24%; width: min(6vw, 5.5rem); }
.project-grid .orbit-temperature { left: 21%; top: 62%; width: min(6.5vw, 6rem); }
.project-grid .orbit-consumption { right: 8%; top: 55%; width: min(6.5vw, 6rem); }
.project-grid .orbit-heating { bottom: 1%; left: 27%; width: min(9vw, 8.5rem); }
.project-grid .orbit-colour { bottom: -2%; right: 5%; width: min(9vw, 8.5rem); }
.project-grid .project-summary { min-height: 0; overflow: visible; padding: clamp(1.35rem, 2vw, 2.2rem) clamp(1.25rem, 1.8vw, 2rem) 0; }
.project-grid .project-summary .eyebrow { font-size: .68rem; margin-bottom: .7rem; }
.project-grid .project-summary h3 { font-size: clamp(2.15rem, 3vw, 3.4rem); margin-bottom: .7rem; }
.project-grid .summary-copy > p:not(.eyebrow) { font-size: clamp(.92rem, 1vw, 1.05rem); line-height: 1.4; max-width: 23rem; }
.project-grid .smart-grid-card { overflow: hidden; z-index: 1; }
.project-grid .smart-grid-card .summary-copy > p:not(.eyebrow) { max-width: 16rem; }
.project-grid .smart-grid-card .summary-footer { bottom: -.4rem; right: -1rem; width: min(62%, 20rem); }
.project-grid .migration-card { z-index: 2; }
.project-grid .migration-visual { bottom: -1.15rem; right: -6%; width: min(84%, 26rem); }
.project-grid-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 1px; background: var(--ink); }
.project-grid-secondary .project-summary { min-height: 34rem; }
.project-grid-secondary .project-summary h3 { font-size: clamp(2.7rem, 4.8vw, 4.8rem); }
.project-summary { color: white; display: flex; flex-direction: column; isolation: isolate; min-height: 32rem; padding: clamp(2rem, 4.5vw, 4.5rem) clamp(2rem, 4vw, 4rem) 0; text-decoration: none; overflow: hidden; position: relative; transition: background-color .24s ease; }
.project-summary .eyebrow { color: rgba(255,255,255,.76); }
.project-summary h3 { font-size: clamp(2.7rem, 6vw, 5.5rem); letter-spacing: -.065em; line-height: .92; margin-bottom: 1.5rem; }
.project-summary > p:not(.eyebrow) { font-size: clamp(1.05rem, 1.7vw, 1.3rem); max-width: 28rem; }
.summary-copy > p:not(.eyebrow) { font-size: clamp(1.05rem, 1.7vw, 1.3rem); max-width: 28rem; }
.summary-footer { align-items: end; display: flex; justify-content: space-between; gap: 2rem; margin-top: auto; }
.summary-footer > span { font-weight: 750; padding-bottom: 2rem; }
.smart-grid-card { background: #ebe7df; color: var(--ink); position: relative; }
.smart-grid-card .summary-copy { position: relative; z-index: 1; }
.smart-grid-card .summary-footer { bottom: 1.25rem; display: block; left: auto; margin: 0; position: absolute; right: 1.5rem; transform: none; width: min(58%, 32rem); z-index: 1; }
.smart-grid-card .eyebrow { color: rgba(17,17,17,.62); }
.migration-card { background: #ebe7df; color: var(--ink); position: relative; }
.migration-card .summary-copy { position: relative; z-index: 3; }
.migration-card .eyebrow { color: rgba(17,17,17,.62); }
.migration-visual { bottom: 3rem; left: auto; pointer-events: none; position: absolute; right: 2%; transform: none; width: min(58%, 25rem); }
.migration-visual img { display: block; height: auto; width: 100%; }
.project-card h3, .project-summary h3 { transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.orbit-control, .migration-visual { transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.project-card:focus-visible, .project-summary:focus-visible { outline: none; }
.project-card:focus-visible h3, .project-summary:focus-visible h3 { transform: translateX(.28rem); }
.project-card:focus-visible .project-copy, .project-card:focus-visible .myko-interface { background-color: #e2dcd1; }
.project-card:focus-visible .myko-interface { box-shadow: -3px 0 0 #e2dcd1; }
.smart-grid-card:focus-visible { background-color: #e2dcd1; }
.migration-card:focus-visible { background-color: #e2dcd1; }
@media (hover: hover) {
  .project-card:hover h3, .project-summary:hover h3 { transform: translateX(.28rem); }
  .project-card:hover .project-copy, .project-card:hover .myko-interface { background-color: #e2dcd1; }
  .project-card:hover .myko-interface { box-shadow: -3px 0 0 #e2dcd1; }
  .project-card:hover .orbit-boost { transform: translate(-.25rem,-.3rem); }
  .project-card:hover .orbit-away { transform: translate(.28rem,-.22rem); }
  .project-card:hover .orbit-temperature { transform: translate(-.28rem,.15rem); }
  .project-card:hover .orbit-consumption { transform: translate(.28rem,.08rem); }
  .project-card:hover .orbit-heating { transform: translate(-.18rem,.18rem); }
  .project-card:hover .orbit-colour { transform: translate(.22rem,.16rem); }
  .smart-grid-card:hover { background-color: #e2dcd1; }
  .migration-card:hover { background-color: #e2dcd1; }
  .migration-card:hover .migration-visual { transform: translateX(.4rem); }
}
.story-thumb { flex: 0 0 auto; height: 15rem; overflow: hidden; width: 10.5rem; }
.story-thumb img { display: block; height: auto; width: 100%; }
.story-thumb-heating { width: 9rem; }
.story-thumb-smart-grid { height: auto; margin: 0; max-width: none; overflow: visible; transform: none; width: 100%; }
.story-thumb-smart-grid img { height: auto; object-fit: contain; object-position: center bottom; transform: none; width: 100%; }
.earlier-work { padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 8vw, 9rem); }
.earlier-intro { display: grid; grid-template-columns: .7fr 1.3fr; column-gap: 3rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.earlier-intro .eyebrow { grid-column: 1 / -1; }
.earlier-intro h2 { font-size: clamp(2.4rem, 6vw, 5.4rem); letter-spacing: -.06em; line-height: .98; }
.earlier-intro > p:last-child { font-size: clamp(1.05rem, 1.7vw, 1.3rem); max-width: 32rem; }
.earlier-grid { border-bottom: 1px solid var(--line); }
.earlier-grid article { align-items: center; border-top: 1px solid var(--line); display: grid; grid-template-columns: .7fr 1fr 1.3fr; gap: 2rem; padding: 1.6rem 0; }
.earlier-grid span { font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.earlier-grid h3 { font-size: clamp(1.6rem, 3vw, 2.7rem); letter-spacing: -.045em; margin: 0; }
.earlier-grid p { margin: 0; }

.about { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 8vw, 9rem); padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 8vw, 9rem); }
.about h2 { font-size: clamp(2.4rem, 6vw, 5.4rem); letter-spacing: -.06em; line-height: .98; }
.about-copy { font-size: clamp(1.1rem, 1.8vw, 1.35rem); max-width: 43rem; }
.about-copy p:last-child { margin-bottom: 0; }
.footer { align-items: end; background: var(--yellow); display: flex; justify-content: space-between; gap: 2rem; min-height: 20rem; padding: clamp(2rem, 6vw, 5rem); }
.footer h2 { font-size: clamp(3rem, 9vw, 8rem); letter-spacing: -.07em; line-height: .9; margin: 0; }
.footer-links { display: flex; gap: 1.5rem; font-weight: 700; }

.case-hero { background: var(--blue); color: white; min-height: 78vh; padding: clamp(5rem, 12vw, 10rem) clamp(1.25rem, 8vw, 9rem); display: flex; flex-direction: column; justify-content: end; }
.myko-case-hero { align-items: center; background: var(--paper); color: var(--ink); display: flex; flex-direction: row; justify-content: flex-start; overflow: hidden; padding-bottom: clamp(5rem, 8vw, 8rem); position: relative; }
.myko-hero-copy { max-width: min(38rem, 42vw); padding: 0; position: relative; z-index: 2; }
.myko-hero-copy .myko-wordmark-heading { line-height: 1; margin: 2rem 0; max-width: none; }
.myko-wordmark-heading img { display: block; height: auto; max-width: 100%; width: clamp(12rem, 20vw, 18rem); }
.myko-hero-visual { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; }
.myko-dot-logo { height: 115%; left: -8%; overflow: visible; position: absolute; top: 0; width: 115%; }
.band-dot { animation: myko-band-dot-pulse 2.8s ease-in-out infinite; opacity: .72; r: 7px; }
.band-dot--inner { animation-duration: 3.1s; }
.dot-phase-2 { animation-delay: -.7s; }
.dot-phase-3 { animation-delay: -1.4s; }
.dot-phase-4 { animation-delay: -2.1s; }
.myko-dot-o { fill: none; stroke: #111; stroke-width: 105; }
.smart-grid-hero { background: #7e2db4; }
.migration-hero { background: #a650d2; }
.case-hero h1 { max-width: 8ch; }
.case-deck { font-size: clamp(1.15rem, 2vw, 1.55rem); max-width: 42rem; }
.draft-note { background: var(--yellow); color: var(--ink); padding: 1rem clamp(1.25rem, 8vw, 9rem); font-weight: 700; }
.case-body { max-width: 78rem; margin: auto; padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 4vw, 4rem); }
.case-intro { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 8vw, 8rem); padding-bottom: 6rem; }
.case-facts { list-style: none; margin: 0; padding: 0; }
.case-facts li { border-top: 1px solid var(--line); padding: .8rem 0; }
.case-facts strong { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.case-story h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; line-height: 1; }
.case-story p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); max-width: 42rem; }
.chapter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.chapter { background: var(--paper); min-height: 18rem; padding: 2rem; }
.chapter-num { font-size: .8rem; font-weight: 800; letter-spacing: .1em; }
.chapter h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -.04em; margin-top: 4rem; }
.case-section { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 8vw, 8rem); padding: clamp(5rem, 10vw, 9rem) 0; }
.away-story { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: clamp(2rem, 5vw, 5rem); margin-bottom: 0; padding: clamp(3rem, 6vw, 6rem) 0; border-top: 1px solid var(--line); }
.away-copy h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; line-height: 1; }
.away-copy > p:last-child { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.away-comparison { align-items: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.away-comparison > div { padding: 0 .5rem 0 0; }
.away-screen { border: 4px solid var(--ink); border-radius: 2rem; margin: 1rem 0 1.5rem; overflow: hidden; background: white; }
.away-screen img { display: block; height: auto; max-width: none; width: 100%; }
.away-before .away-screen { aspect-ratio: 717 / 1380; }
.away-before .away-screen img { transform: none; }
.away-after .away-screen { aspect-ratio: auto; }
.away-after .away-screen img { transform: none; }
.away-before, .away-after { background: transparent; }
.away-after .away-screen { box-shadow: 8px 8px 0 rgba(17,17,17,0.175); }
.away-comparison h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.035em; line-height: 1.15; margin: .65rem 0; }
.away-comparison p { margin: 0; }
.navigation-story { display: grid; grid-template-columns: 1fr; align-items: start; gap: 2rem; margin-bottom: 0; padding-bottom: clamp(3rem, 6vw, 6rem); }
.navigation-intro { max-width: 46rem; }
.navigation-intro h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; line-height: 1; }
.navigation-intro > p:last-child { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.navigation-comparison { margin: 2rem 0 0; }
.navigation-comparison > img { display: block; width: 100%; border-radius: .75rem; }
.navigation-comparison figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: 1.25rem; }
.navigation-comparison figcaption p { margin: .6rem 0 0; }
.navigation-blocks { align-items: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.navigation-block { background: transparent; margin: 0; padding: 0 .5rem 0 0; }
.navigation-block:last-child img { filter: drop-shadow(7px 7px 0 rgba(17,17,17,0.175)); }
.navigation-block h3 { font-size: 1.35rem; letter-spacing: -.035em; margin: .6rem 0 1rem; }
.navigation-block img { border-radius: 1rem; display: block; margin-top: 1rem; width: 100%; }
.navigation-block > p { margin: 1rem 0 0; }
.case-section-title h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; line-height: 1; }
.case-section-copy { padding-top: 2.2rem; }
.case-section-copy p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.language-plugin-story { border-top: 1px solid var(--line); margin-top: 1.75rem; padding-top: 1.5rem; }
.language-section { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.language-section .case-section-copy { padding-top: 1.5rem; }
.language-section .case-section-title h2 { min-height: 2em; }
.matter-story { margin-top: 0; }
.matter-story .case-section-copy { padding-top: 1rem; }
.matter-steps { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .4rem; margin-top: 1.5rem; }
.matter-steps button { background: white; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; font: inherit; font-size: .875rem; padding: .6rem .85rem; }
.matter-steps button.is-active { background: var(--ink); color: white; }
.phone-frame.matter-phone { aspect-ratio: 945 / 2048; border: 4px solid #282828; border-radius: 2.2rem; position: relative; width: min(100%, 18rem); }
.matter-screen { height: 100%; inset: 0; object-fit: cover; object-position: top; opacity: 0; position: absolute; transition: opacity .25s ease; visibility: hidden; width: 100%; }
.matter-screen.is-active { opacity: 1; visibility: visible; }
.language-plugin-story h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.035em; line-height: 1.1; margin: 0 0 .65rem; }
.language-plugin-story p { font-size: 1rem; margin: 0; max-width: 31rem; }
.language-plugin-link { color: var(--ink); display: inline-block; font-weight: 750; margin-top: .9rem; text-decoration-thickness: 1px; text-underline-offset: .35rem; }
.language-lockup { align-items: start; display: grid; justify-items: start; padding-top: clamp(1.25rem, 2.5vw, 2rem); position: relative; }
.localised-cta { align-items: center; background: #8b43ff; border-radius: .75rem; color: white; display: flex; font-size: 1rem; font-weight: 750; height: 3.5rem; justify-content: center; max-width: 100%; min-width: 11rem; overflow: hidden; padding: 0 2rem; transition: width .38s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
.localised-cta span { opacity: 1; transform: translateY(0); transition: opacity .14s ease, transform .14s ease; }
.localised-cta span.is-changing { opacity: 0; transform: translateY(.3rem); }
.localised-measure { font-size: 1rem; font-weight: 750; left: -9999px; position: absolute; visibility: hidden; white-space: nowrap; }
.language-switch { display: flex; gap: .35rem; margin-top: 1rem; }
.language-switch button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #737178; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .08em; padding: .35rem .45rem; transition: border-color .2s ease, color .2s ease; }
.language-switch button:hover { color: var(--ink); }
.language-switch button.is-active { border-color: #8b43ff; color: var(--ink); }
.language-switch button:focus-visible { outline: 3px solid #9f3de0; outline-offset: 2px; }
.rebuild-story { background: var(--ink); color: white; margin: 0 calc(clamp(1.25rem, 4vw, 4rem) * -1) clamp(5rem, 10vw, 9rem); padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 4vw, 4rem); }
.rebuild-intro { display: grid; gap: clamp(1.5rem, 5vw, 5rem); grid-template-columns: 1.1fr .9fr; }
.rebuild-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.rebuild-intro h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; line-height: 1; margin: 0; max-width: 13ch; }
.rebuild-intro > p:last-child { color: rgba(255,255,255,.72); font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0; max-width: 34rem; }
.rebuild-phases { border: 1px solid rgba(255,255,255,.26); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 7vw, 6rem); }
.rebuild-phase { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); }
.rebuild-phase + .rebuild-phase { border-left: 1px solid rgba(255,255,255,.26); }
.rebuild-phase span { color: rgba(255,255,255,.55); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rebuild-visual { align-items: flex-end; display: flex; height: clamp(17rem, 27vw, 23rem); justify-content: center; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; overflow: hidden; position: relative; }
.rebuild-legacy-phone { background: #050505; border-radius: 2rem 2rem 0 0; box-shadow: .3rem .4rem 0 rgba(17,17,17,0.158), 0 .35rem .8rem rgba(0,0,0,.12); height: calc(100% - .25rem); margin-bottom: -2.25rem; max-width: 16.5rem; overflow: hidden; padding: .65rem .65rem 0; transition: box-shadow .25s ease, transform .25s ease; width: 84%; }
.rebuild-legacy-phone img { background: white; border-radius: 1.4rem 1.4rem 0 0; display: block; height: calc(100% + 2rem); object-fit: cover; object-position: top center; width: 100%; }
.rebuild-phase:hover .rebuild-legacy-phone { box-shadow: .4rem .5rem 0 rgba(17,17,17,0.175), 0 .5rem 1rem rgba(0,0,0,.15); transform: translateY(-.45rem) rotate(.6deg); }
.rebuild-heating-cutout { align-items: center; overflow: visible; }
.rebuild-heating-sticker-image { filter: drop-shadow(0 5px 0 #fff) drop-shadow(4px 6px 0 rgba(17,17,17,0.175)) drop-shadow(0 .3rem .6rem rgba(0,0,0,.12)); height: auto; transform: rotate(-4deg); transition: filter .25s ease, transform .25s ease; width: min(82%, 18rem); }
.rebuild-phase:hover .rebuild-heating-sticker-image { filter: drop-shadow(0 5px 0 #fff) drop-shadow(6px 8px 0 rgba(17,17,17,0.193)) drop-shadow(0 .45rem .8rem rgba(0,0,0,.15)); transform: rotate(-2deg) translateY(-.55rem); }
.rebuild-products { overflow: visible; }
.rebuild-product { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(4px 5px 0 rgba(17,17,17,0.147)) drop-shadow(0 .25rem .5rem rgba(0,0,0,.1)); height: auto; position: absolute; transform-origin: 50% 100%; transition: filter .25s ease, transform .25s ease; }
.rebuild-product-ac { bottom: 22%; left: -8%; transform: rotate(-14deg); width: 54%; z-index: 1; }
.rebuild-product-security { bottom: 22%; left: 14%; transform: rotate(-2deg); width: 70%; z-index: 3; }
.rebuild-product-plug { bottom: 22%; right: 10%; transform: rotate(10deg); width: 40%; z-index: 4; }
.rebuild-product-bulb { bottom: 22%; right: -13%; transform: rotate(17deg); width: 50%; z-index: 2; }
.rebuild-phase:hover .rebuild-product { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(6px 7px 0 rgba(17,17,17,0.175)) drop-shadow(0 .4rem .7rem rgba(0,0,0,.14)); }
.rebuild-phase:hover .rebuild-product-ac { transform: rotate(-18deg) translate(-.35rem,-.35rem); }
.rebuild-phase:hover .rebuild-product-security { transform: rotate(-1deg) translateY(-.55rem); }
.rebuild-phase:hover .rebuild-product-plug { transform: rotate(13deg) translate(.25rem,-.3rem); }
.rebuild-phase:hover .rebuild-product-bulb { transform: rotate(21deg) translate(.45rem,-.4rem); }
.rebuild-phase h3 { font-size: clamp(1.45rem, 2.5vw, 2.2rem); letter-spacing: -.04em; line-height: 1.05; margin: 1.5rem 0 1rem; max-width: 14ch; }
.rebuild-phase p { color: rgba(255,255,255,.72); margin: 0; max-width: 25rem; }
.rebuild-follow-on { align-items: center; border-top: 1px solid rgba(255,255,255,.26); display: flex; gap: 2rem; justify-content: space-between; margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.rebuild-follow-on p { color: rgba(255,255,255,.72); margin: 0; max-width: 45rem; }
.rebuild-follow-on a { color: white; flex: 0 0 auto; font-weight: 750; text-underline-offset: .3rem; }
.screen-story { margin: 0 0 clamp(5rem, 10vw, 9rem); }
.screen-story img, .automation-story img { width: 100%; height: auto; }
.screen-story figcaption { margin: 0; }
.screen-story figcaption > span { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.screen-story figcaption > strong { display: block; font-size: clamp(1.8rem, 3.5vw, 3.25rem); letter-spacing: -.05em; line-height: 1; margin-top: 1rem; max-width: 18ch; }
.ecosystem-story { background: #dce3ff; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); padding: clamp(2rem, 5vw, 5rem); align-items: center; }
.screen-pair { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); min-width: 0; }
.phone-frame { background: white; border: 1px solid rgba(17,17,17,.12); border-radius: clamp(1rem, 2.5vw, 2rem); box-shadow: 0 1.5rem 4rem rgba(20,20,35,.13); overflow: hidden; }
.screen-pair .phone-tall { width: 42%; }
.screen-pair .phone-sheet { width: 58%; }
.metrics-story { align-items: start; border-top: 1px solid var(--line); display: grid; gap: clamp(3rem, 9vw, 9rem); grid-template-columns: .85fr 1.15fr; margin: 0; padding: clamp(3rem, 6vw, 6rem) 0; }
.metrics-heading h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; line-height: 1; margin: 1rem 0 1.5rem; max-width: 11ch; }
.metrics-heading > p:last-child { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 31rem; }
.metrics-demo { display: grid; justify-items: center; }
.metric-tabs { display: grid; gap: .65rem; grid-template-columns: 1fr 1fr; margin-bottom: 1.4rem; width: min(100%, 24.5rem); }
.metrics-heading .metric-tabs { margin: 1.5rem 0 0; }
.metric-tab { background: white; border: 2px solid transparent; border-radius: 1.1rem; color: #29282e; cursor: pointer; display: grid; font: inherit; min-height: 10.5rem; padding: .9rem; text-align: left; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.metric-tab strong { font-size: .95rem; line-height: 1.1; }
.metric-tab span { color: #666570; font-size: .72rem; margin-top: .45rem; }
.metric-tab b { font-size: 1.05rem; letter-spacing: -.025em; line-height: 1.1; margin-top: .18rem; }
.metric-tab svg { align-self: end; height: 3rem; margin-top: .65rem; overflow: visible; width: 100%; }
.metric-guide { fill: none; stroke: #65656d; stroke-dasharray: 3 3; stroke-linecap: round; stroke-width: 1.5; }
.metric-temperature-line { fill: none; stroke: #ff5a0a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.metric-usage-bars { fill: none; stroke: #9f3de0; stroke-linecap: round; stroke-width: 5; }
.metric-tab:hover { background: white; transform: translateY(-.15rem); }
.metric-tab.is-active { background: white; border-color: #9f3de0; box-shadow: 0 .7rem 1.5rem rgba(73,38,104,.15); }
.metric-tab:focus-visible, .metric-range:focus-visible, .temperature-range:focus-visible { outline: 3px solid #9f3de0; outline-offset: 2px; }
.metrics-phone { aspect-ratio: 393 / 820; background: white; border: 4px solid #282828; border-radius: 2.5rem; box-shadow: 0 2rem 5rem rgba(30,20,45,.2); overflow: hidden; position: relative; width: min(100%, 24.5rem); }
.metrics-usage-screen, .metrics-temperature-screen { height: 100%; inset: 0; position: absolute; width: 100%; }
.metrics-usage-screen[hidden], .metrics-temperature-screen[hidden] { display: none; }
.metrics-usage-screen { background: white; color: #29282e; padding: 1.35rem 1rem 1rem; }
.usage-status, .temperature-status { align-items: center; display: flex; font-size: .78rem; justify-content: space-between; padding: 0 .6rem 1.25rem; }
.usage-status span, .temperature-status span { font-size: .65rem; letter-spacing: .14em; }
.usage-appbar, .temperature-appbar { align-items: center; display: grid; grid-template-columns: 2rem 1fr 2rem; padding: .1rem .1rem 1.45rem; text-align: center; }
.usage-appbar span, .temperature-appbar span { font-size: 2rem; line-height: 1; text-align: left; }
.usage-appbar strong, .temperature-appbar strong { font-size: 1.05rem; }
.phone-period-controls { background: #f1f0f3; border-radius: .75rem; display: grid; gap: .15rem; grid-template-columns: repeat(4, 1fr); padding: .2rem; }
.metric-range { background: transparent; border: 0; border-radius: .6rem; color: #6f6d75; cursor: pointer; font: inherit; font-size: .78rem; padding: .65rem .1rem; transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.metric-range:hover { color: var(--ink); }
.metric-range.is-active { background: white; box-shadow: 0 .18rem .55rem rgba(22,18,30,.16); color: var(--ink); font-weight: 750; }
.usage-date { align-items: center; display: grid; font-size: .9rem; grid-template-columns: 2rem 1fr 2rem; margin-top: 1rem; text-align: center; }
.usage-date span { font-size: 1.8rem; }
.usage-total { display: grid; gap: .15rem; margin-top: .7rem; }
.usage-total span { color: #74717b; font-size: .78rem; }
.usage-total strong { font-size: 1.5rem; letter-spacing: -.035em; }
.energy-chart { height: 17.2rem; margin-top: .1rem; position: relative; }
.energy-unit { color: #77747d; font-size: .72rem; left: 0; position: absolute; top: 4.45rem; }
.energy-chart-tooltip { background: #f1f0f3; border-radius: .8rem; box-shadow: 0 .7rem 1.5rem rgba(20,16,28,.12); color: var(--ink); display: grid; gap: .55rem; padding: .7rem .8rem; pointer-events: none; position: absolute; text-align: left; top: .15rem; transform: translateX(-50%); white-space: nowrap; width: max-content; z-index: 4; }
.energy-chart-tooltip[hidden], .energy-chart-guide[hidden] { display: none; }
.energy-chart-tooltip strong { font-size: .72rem; font-weight: 650; }
.energy-chart-tooltip > span { align-items: center; display: grid; font-size: .68rem; gap: .35rem; grid-template-columns: auto 1fr auto; }
.energy-chart-tooltip i { background: #8d22d0; border-radius: 50%; height: .42rem; width: .42rem; }
.energy-chart-tooltip b { font-size: .68rem; }
.energy-chart-guide { background: #56545b; position: absolute; transform: translateX(-.5px); width: 1px; z-index: 2; }
.energy-y-axis, .temperature-y-axis { bottom: 0; color: #77747d; display: flex; flex-direction: column; font-size: .61rem; justify-content: space-between; left: 0; position: absolute; text-align: right; top: 5.15rem; width: 1.9rem; }
.energy-chart-grid { bottom: 0; display: grid; left: 2.25rem; position: absolute; right: .1rem; top: 5.15rem; }
.energy-chart-grid i { border-top: 1px dashed rgba(41,40,46,.25); }
.energy-bars { align-items: end; bottom: 0; display: grid; gap: clamp(.08rem, .35vw, .2rem); left: 2.25rem; position: absolute; right: .1rem; top: 5.15rem; }
.energy-bar { align-self: end; animation: energy-bar-rise .65s cubic-bezier(.22,.8,.28,1) both; animation-delay: calc(var(--bar-index) * 28ms); background: #a13fe0; border: 0; border-radius: .28rem .28rem 0 0; cursor: pointer; height: var(--bar-height); min-width: 2px; padding: 0; position: relative; transform-origin: bottom; }
.energy-bar:hover, .energy-bar:focus-visible { background: #7d18bd; outline: none; }
.energy-tooltip { background: #f1f0f3; border-radius: .8rem; bottom: calc(100% + .55rem); box-shadow: 0 .7rem 1.5rem rgba(20,16,28,.12); color: var(--ink); display: grid; gap: .55rem; left: 50%; opacity: 0; padding: .7rem .8rem; pointer-events: none; position: absolute; text-align: left; transform: translate(-50%, .3rem); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; width: max-content; z-index: 3; }
.energy-tooltip strong { font-size: .72rem; font-weight: 650; }
.energy-tooltip > span { align-items: center; display: grid; font-size: .68rem; gap: .35rem; grid-template-columns: auto 1fr auto; }
.energy-tooltip i { background: #8d22d0; border-radius: 50%; height: .42rem; width: .42rem; }
.energy-tooltip b { font-size: .68rem; }
.energy-bar:hover .energy-tooltip, .energy-bar:focus-visible .energy-tooltip { opacity: 1; transform: translate(-50%, 0); }
.energy-bar.is-edge-start .energy-tooltip { left: 0; transform: translate(0, .3rem); }
.energy-bar.is-edge-start:hover .energy-tooltip, .energy-bar.is-edge-start:focus-visible .energy-tooltip { transform: translate(0, 0); }
.energy-bar.is-edge-end .energy-tooltip { left: auto; right: 0; transform: translate(0, .3rem); }
.energy-bar.is-edge-end:hover .energy-tooltip, .energy-bar.is-edge-end:focus-visible .energy-tooltip { transform: translate(0, 0); }
.energy-axis { color: #74717b; display: flex; font-size: .66rem; justify-content: space-between; margin: .55rem .1rem 0 2.25rem; }
.usage-summary { background: #f1f0f3; border-radius: .75rem; margin-top: 1.1rem; overflow: hidden; }
.usage-summary > div { align-items: center; display: flex; font-size: .78rem; justify-content: space-between; padding: .75rem .9rem; }
.usage-summary > div + div { border-top: 1px solid white; }
.usage-summary strong { font-size: .8rem; }
.metrics-temperature-screen { background: white; color: #29282e; overflow-y: auto; padding: 1.35rem 1rem 1.5rem; scrollbar-width: none; }
.metrics-temperature-screen::-webkit-scrollbar { display: none; }
.temperature-period-controls { background: #f1f0f3; border-radius: .75rem; display: grid; gap: .15rem; grid-template-columns: 1fr 1fr; padding: .2rem; }
.temperature-range { background: transparent; border: 0; border-radius: .6rem; color: #6f6d75; cursor: pointer; font: inherit; font-size: .78rem; padding: .65rem .1rem; transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.temperature-range:hover { color: var(--ink); }
.temperature-range.is-active { background: white; box-shadow: 0 .18rem .55rem rgba(22,18,30,.16); color: var(--ink); font-weight: 750; }
.temperature-date { align-items: center; display: grid; font-size: .9rem; grid-template-columns: 2rem 1fr 2rem; margin-top: 1rem; text-align: center; }
.temperature-date span { font-size: 1.8rem; }
.temperature-total { display: grid; gap: .15rem; margin-top: .7rem; }
.temperature-total span { color: #74717b; font-size: .78rem; }
.temperature-total strong { font-size: 1.5rem; letter-spacing: -.035em; }
.temperature-chart { height: 18rem; margin-top: .2rem; position: relative; }
.temperature-unit { color: #77747d; font-size: .72rem; left: 0; position: absolute; top: 3.3rem; }
.temperature-y-axis { top: 4rem; }
.temperature-grid { bottom: 0; display: grid; left: 2.25rem; position: absolute; right: .1rem; top: 4rem; }
.temperature-grid i { border-top: 1px dashed rgba(41,40,46,.22); }
.temperature-svg, .temperature-points { height: calc(100% - 4rem); left: 2.25rem; position: absolute; top: 4rem; width: calc(100% - 2.35rem); }
.temperature-area { animation: temperature-area-in .65s ease both; fill: url(#temperature-fill); }
.temperature-line { animation: temperature-line-draw .9s cubic-bezier(.22,.8,.28,1) both; fill: none; stroke: #ff5a0a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.metrics-temperature-screen[data-range="week"] .temperature-line-high { stroke: #cf2525; }
.metrics-temperature-screen[data-range="week"] .temperature-line-low { stroke: #ff5a0a; }
.temperature-target { stroke: #5d5c63; stroke-dasharray: 6 5; stroke-width: 2; }
.temperature-heating-line { stroke: #9f3de0; stroke-linecap: round; stroke-width: 6; }
.temperature-point { background: transparent; border: 0; border-radius: 50%; cursor: pointer; height: 1rem; padding: 0; position: absolute; transform: translate(-50%, -50%); width: 1rem; }
.temperature-point::before { background: #ff5a0a; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #ff5a0a; content: ''; height: .42rem; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(.5); transition: opacity .18s ease, transform .18s ease; width: .42rem; }
.temperature-point:hover::before, .temperature-point:focus-visible::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.temperature-point:focus-visible { outline: none; }
.temperature-tooltip { background: #f1f0f3; border-radius: .8rem; bottom: calc(100% + .45rem); box-shadow: 0 .7rem 1.5rem rgba(20,16,28,.12); color: var(--ink); display: grid; gap: .38rem; left: 50%; opacity: 0; padding: .7rem .8rem; pointer-events: none; position: absolute; text-align: left; transform: translate(-50%, .3rem); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; width: max-content; z-index: 4; }
.temperature-tooltip strong { font-size: .72rem; font-weight: 650; }
.temperature-tooltip > span { align-items: center; display: grid; font-size: .68rem; gap: .35rem; grid-template-columns: auto 1fr auto; }
.temperature-tooltip i { background: #ff5a0a; border-radius: 50%; height: .42rem; width: .42rem; }
.temperature-tooltip i.is-high { background: #cf2525; }
.temperature-tooltip i.is-target { background: #55545b; }
.temperature-tooltip i.is-heating { background: #9f3de0; }
.temperature-tooltip b { font-size: .68rem; }
.temperature-point:hover .temperature-tooltip, .temperature-point:focus-visible .temperature-tooltip { opacity: 1; transform: translate(-50%, 0); }
.temperature-point.is-edge-start .temperature-tooltip { left: 0; transform: translate(0, .3rem); }
.temperature-point.is-edge-start:hover .temperature-tooltip, .temperature-point.is-edge-start:focus-visible .temperature-tooltip { transform: translate(0, 0); }
.temperature-point.is-edge-end .temperature-tooltip { left: auto; right: 0; transform: translate(0, .3rem); }
.temperature-point.is-edge-end:hover .temperature-tooltip, .temperature-point.is-edge-end:focus-visible .temperature-tooltip { transform: translate(0, 0); }
.temperature-axis { color: #74717b; display: flex; font-size: .66rem; justify-content: space-between; margin: .55rem .1rem 0 2.25rem; }
.temperature-summary { align-items: center; background: #f1f0f3; border-radius: .75rem; display: flex; font-size: .78rem; justify-content: space-between; margin-top: 1.1rem; padding: .85rem .9rem; }
.temperature-summary span { align-items: center; display: flex; gap: .45rem; }
.temperature-summary i { background: #ff5a0a; border-radius: 50%; height: .5rem; width: .5rem; }
.temperature-summary strong { font-size: .8rem; }
.temperature-runtime { border-top: 1px solid #e2e0e5; margin-top: 1.5rem; padding-top: 1.3rem; }
.temperature-runtime > span { color: #74717b; display: block; font-size: .78rem; }
.temperature-runtime > strong { display: block; font-size: 1.5rem; margin-top: .2rem; }
.runtime-bars { align-items: end; display: grid; gap: .5rem; grid-template-columns: repeat(7, 1fr); height: 8rem; margin: 1rem .2rem 0; }
.runtime-bar { align-self: end; animation: energy-bar-rise .65s cubic-bezier(.22,.8,.28,1) both; animation-delay: calc(var(--bar-index) * 45ms); background: #a13fe0; border: 0; border-radius: .3rem .3rem 0 0; cursor: pointer; height: var(--bar-height); padding: 0; position: relative; }
.runtime-bar:hover, .runtime-bar:focus-visible { background: #7d18bd; outline: none; }
.runtime-bar:hover .energy-tooltip, .runtime-bar:focus-visible .energy-tooltip { opacity: 1; transform: translate(-50%, 0); }
.runtime-bar.is-edge-start .energy-tooltip { left: 0; transform: translate(0, .3rem); }
.runtime-bar.is-edge-start:hover .energy-tooltip, .runtime-bar.is-edge-start:focus-visible .energy-tooltip { transform: translate(0, 0); }
.runtime-bar.is-edge-end .energy-tooltip { left: auto; right: 0; transform: translate(0, .3rem); }
.runtime-bar.is-edge-end:hover .energy-tooltip, .runtime-bar.is-edge-end:focus-visible .energy-tooltip { transform: translate(0, 0); }
.runtime-axis { color: #74717b; display: grid; font-size: .66rem; grid-template-columns: repeat(7, 1fr); margin-top: .45rem; text-align: center; }
.temperature-runtime > p { align-items: center; background: #f1f0f3; border-radius: .75rem; display: grid; font-size: .72rem; gap: .45rem; grid-template-columns: auto 1fr auto; margin: 1rem 0 0; padding: .8rem .9rem; }
.temperature-runtime > p i { background: var(--ink); border-radius: 50%; height: .42rem; width: .42rem; }
.temperature-runtime > p strong { font-size: .75rem; }
.metrics-hint { font-size: .75rem; font-weight: 800; letter-spacing: .09em; margin: 1.25rem 0 0; text-transform: uppercase; }
.automation-story { align-items: center; background: transparent; display: grid; grid-template-columns: 1fr .7fr; gap: clamp(3rem, 9vw, 9rem); margin: clamp(5rem, 10vw, 9rem) 0 0; padding: clamp(3rem, 6vw, 6rem) 0; }
.automation-story + .matter-story { border-top: 1px solid var(--line); margin-top: 0; }
.metrics-story + .automation-story { border-top: 1px solid var(--line); margin-top: 0; }
.automation-copy h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; line-height: 1; }
.automation-copy > p:not(.eyebrow):last-of-type { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34rem; }
.automation-demo { display: grid; justify-items: center; min-width: 0; width: 100%; }
.automation-story .phone-frame { justify-self: center; }
.automation-screen-stage { aspect-ratio: 945 / 2048; border: 4px solid #282828; border-radius: 2.2rem; max-width: 18rem; position: relative; width: 100%; }
.automation-screen-stage .automation-screen { height: 100%; inset: 0; object-fit: cover; object-position: top; opacity: 0; position: absolute; transition: opacity .25s ease; visibility: hidden; width: 100%; }
.automation-screen-stage .automation-screen.is-active { opacity: 1; visibility: visible; }
.automation-steps { display: grid; gap: .35rem; grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; width: min(100%, 20rem); }
.automation-steps button { background: rgba(255,255,255,.52); border: 1px solid rgba(17,17,17,.12); border-radius: 999px; color: rgba(17,17,17,.62); cursor: pointer; display: flex; font: inherit; font-size: .78rem; font-weight: 700; gap: .4rem; justify-content: center; padding: .65rem .75rem; transition: background .2s ease, color .2s ease, transform .2s ease; }
.automation-steps button span { font-size: .66rem; opacity: .62; }
.automation-steps button:hover { color: #111; transform: translateY(-2px); }
.automation-steps button.is-active { background: #111; color: #fff; }
.automation-details { margin-top: 1.2rem; max-width: 31rem; min-height: 6.6rem; position: relative; }
.automation-detail { inset: 0; opacity: 0; position: absolute; transform: translateY(.35rem); transition: opacity .2s ease, transform .25s ease; visibility: hidden; }
.automation-detail.is-active { opacity: 1; transform: translateY(0); visibility: visible; }
.automation-detail strong { display: block; font-size: 1rem; margin-bottom: .35rem; }
.automation-detail p { font-size: .95rem; line-height: 1.5; margin: 0; }
.product-gallery { --gallery-gutter: clamp(1.25rem, 4vw, 4rem); --gallery-content-left: max(var(--gallery-gutter), calc((100vw - 78rem) / 2 + var(--gallery-gutter))); background: #dce3ff; left: 50%; margin: 0 0 clamp(5rem, 10vw, 9rem) -50vw; overflow: hidden; padding: clamp(2rem, 5vw, 5rem) var(--gallery-gutter) clamp(2rem, 5vw, 5rem) var(--gallery-content-left); position: relative; width: 100vw; }
.gallery-heading { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.gallery-heading h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; line-height: 1; margin: 1rem 0 0; }
.gallery-heading h2 span { display: block; white-space: nowrap; }
.gallery-controls { display: flex; gap: .65rem; justify-content: flex-end; margin-top: 1.25rem; }
.gallery-button { align-items: center; background: #dce3ff; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; font: inherit; font-size: 1.35rem; height: 3.25rem; justify-content: center; pointer-events: auto; transition: background .2s ease, color .2s ease, transform .2s ease; width: 3.25rem; }
.gallery-button:hover, .gallery-button:focus-visible { background: var(--ink); color: white; }
.gallery-button:active { transform: scale(.94); }
.gallery-track { cursor: grab; display: flex; gap: clamp(1rem, 2vw, 1.75rem); margin-left: calc(var(--gallery-content-left) * -1); margin-right: calc(var(--gallery-gutter) * -1); overflow-x: auto; overscroll-behavior-inline: contain; padding: .25rem var(--gallery-gutter) 1.5rem var(--gallery-content-left); scroll-padding-left: var(--gallery-content-left); scroll-snap-type: inline mandatory; scrollbar-width: none; }
.gallery-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { display: grid; flex: 0 0 min(30vw, 22rem); grid-template-rows: auto 1fr; min-width: 17rem; scroll-snap-align: start; }
.gallery-screen { align-items: flex-start; align-self: start; background: white; border: 4px solid #282828; border-radius: 2.2rem; display: flex; height: clamp(28rem, 42vw, 36rem); justify-content: center; justify-self: center; overflow: hidden; padding: 0; position: relative; width: min(100%, 18rem); }
.gallery-screen img { display: block; height: auto; max-width: none; object-fit: contain; object-position: top center; width: 100%; }
.gallery-slide:first-child .gallery-screen { aspect-ratio: 957 / 2048; border: 0; height: auto; width: min(100%, 16.8rem); }
.gallery-slide:first-child .gallery-screen img { width: 100%; }
.gallery-screen-sheet { align-items: flex-end; background: #f0f0f6; padding-top: 0; }
.gallery-screen-sheet img { height: auto; max-width: none; width: 100%; }
.gallery-caption { align-self: stretch; border-top: 1px solid rgba(17,17,17,.18); margin-top: 1.75rem; min-height: 12.5rem; padding: 1.35rem .25rem .35rem; }
.gallery-caption span { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gallery-caption h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -.035em; margin: .7rem 0 .5rem; }
.gallery-caption p { margin: 0; max-width: 32rem; }
.evidence-slot { min-height: 30rem; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 5rem); margin-bottom: clamp(5rem, 10vw, 9rem); }
.evidence-slot span { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.evidence-slot strong { font-size: clamp(2rem, 5vw, 4.5rem); letter-spacing: -.055em; line-height: 1; max-width: 15ch; }
.evidence-slot small { font-size: .9rem; font-weight: 650; }
.evidence-blue { background: #dce3ff; }
.evidence-yellow { background: var(--yellow); }
.future-vision { background: var(--paper); margin: 0 calc(clamp(1.25rem, 4vw, 4rem) * -1) clamp(5rem, 10vw, 9rem); padding: 0 clamp(1.25rem, 4vw, 4rem); }
.future-vision-copy { background: #efe6ff; margin: 0 calc(clamp(1.25rem, 4vw, 4rem) * -1); padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 4rem); display: grid; gap: clamp(1rem, 3vw, 3rem); grid-template-columns: 1.1fr .9fr; }
.future-vision-copy .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.future-vision-copy h2 { font-size: clamp(2.4rem, 5.5vw, 5.1rem); grid-row: span 2; letter-spacing: -.06em; line-height: .92; margin: 0; max-width: 9ch; }
.future-vision-copy p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-bottom: 0; max-width: 36rem; }
.future-vision-stage { background: var(--ink); color: white; display: flex; flex-direction: column; justify-content: space-between; margin-top: clamp(3rem, 7vw, 6rem); min-height: clamp(20rem, 38vw, 34rem); padding: clamp(2rem, 5vw, 5rem); }
.future-vision-stage span { color: rgba(255,255,255,.6); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.future-vision-stage strong { font-size: clamp(1.8rem, 4vw, 3.6rem); letter-spacing: -.05em; line-height: 1; max-width: 17ch; }
.planning-section { background: var(--ink); color: white; margin: 0 calc(clamp(1.25rem, 4vw, 4rem) * -1); padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 4rem); }
.planning-section > h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; line-height: 1; max-width: 15ch; margin-bottom: clamp(3rem, 6vw, 6rem); }
.planning-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.28); }
.planning-grid > div { background: var(--ink); padding: 2rem; }
.planning-grid span { color: rgba(255,255,255,.55); font-size: .8rem; font-weight: 800; }
.planning-grid h3 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); letter-spacing: -.04em; margin: 4rem 0 1rem; }
.planning-grid p { color: rgba(255,255,255,.72); }
.notion-system { border-top: 1px solid rgba(255,255,255,.28); margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 6vw, 5rem); }
.notion-intro { max-width: 48rem; }
.notion-intro h2 + p { margin-top: 1.75rem; }
.planning-section > .notion-system:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.notion-intro h3 { font-size: clamp(1.8rem, 3.4vw, 3.15rem); letter-spacing: -.045em; line-height: 1; margin: 1rem 0 1.4rem; max-width: 15ch; }
.notion-intro > p:last-child { color: rgba(255,255,255,.72); font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 32rem; }
.planning-visuals { border-top: 1px solid rgba(255,255,255,.28); margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 6vw, 5rem); }
.planning-visual { margin: 0; }
.planning-image { background: #f4f3f1; overflow: hidden; }
.planning-image img { display: block; height: 100%; object-fit: cover; object-position: top left; width: 100%; }
.planning-visual-main .planning-image { aspect-ratio: 2.08 / 1; }
.planning-visual figcaption { padding: 0 0 .85rem; }
.planning-visual figcaption span { color: rgba(255,255,255,.55); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.planning-caption-copy { display: block; font-size: clamp(1.15rem, 2vw, 1.65rem); letter-spacing: -.025em; line-height: 1.2; max-width: none; padding: 1.25rem 0 clamp(2.5rem, 5vw, 4rem); text-wrap: pretty; }
.planning-visual-pair { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(2, 1fr); }
.planning-visual-pair .planning-image { aspect-ratio: 16 / 9; }
.notion-gallery { background: var(--ink); color: white; padding-right: var(--gallery-content-left); }
.notion-relations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem 3rem; width: 100%; max-width: 100%; margin: 0; align-items: start; }
.notion-map-intro { grid-column: 1 / -1; }
.notion-map-intro { max-width: 45rem; }
.notion-map { height: clamp(25rem, 38vw, 32rem); position: relative; margin: 0; }
.notion-map-lines { position: absolute; inset: 0; height: 100%; width: 100%; overflow: visible; }
.notion-map-lines path { fill: none; stroke: #67616e; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .2s; }
.notion-map-lines path.is-active { stroke: #bfa0ff; stroke-width: 2.5; }
.notion-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 35%; max-width: 16rem; background: #29262d; border: 1px solid #67616e; border-radius: .8rem; padding: 1rem; color: white; text-align: left; font: inherit; cursor: pointer; transition: background .2s, border-color .2s; }
.notion-node span { display: block; font-size: .875rem; color: #ccc7d3; margin-bottom: .35rem; }
.notion-node strong { font-size: 1rem; line-height: 1.25; display: block; }
.notion-node.is-active { background: #45286b; border-color: #bfa0ff; }
.notion-node:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.notion-map-detail { min-height: 8rem; min-width: 0; max-width: 100%; }
.notion-map-detail h3 { font-size: 1.25rem; margin: 0 0 .65rem; }
.notion-map-detail > .eyebrow { display: block; margin-bottom: 1rem; color: #ccc7d3; }
.notion-map-detail p { font-size: 1rem; line-height: 1.55; margin: 0; color: #ddd8e3; }
.notion-record-examples { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1rem 0; padding: 0; }
.notion-record-examples li { font-size: .875rem; border: 1px solid #67616e; border-radius: .5rem; padding: .5rem .75rem; }
.notion-selected-evidence { margin: 1.5rem 0 0; }
.notion-evidence-viewport { width: 100%; overflow: hidden; background: white; border-radius: .75rem; }
.notion-evidence-viewport:focus-visible { outline: 2px solid #bfa0ff; outline-offset: 4px; }
.notion-selected-evidence img { display: block; width: 100%; max-width: 100%; height: auto; }
.notion-selected-evidence figcaption { font-size: .875rem; color: #ccc7d3; margin-top: .75rem; }
.notion-run-excerpt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; background: #29262d; border: 1px solid #67616e; padding: 1.5rem; border-radius: .75rem; margin-top: 1.5rem; }
.notion-run-excerpt dt { color: #ccc7d3; font-size: .875rem; }
.notion-run-excerpt dd { margin: .4rem 0 0; font-size: 1rem; }
.notion-selected-evidence[hidden], .notion-record-examples[hidden], .notion-run-excerpt[hidden] { display: none; }
@media (max-width: 960px) { .notion-relations { grid-template-columns: 1fr; gap: 1.5rem; } .notion-map-detail { border-top: 1px solid #67616e; padding-top: 1.25rem; } }
.notion-gallery .gallery-slide { display: flex; flex-direction: column; flex-basis: min(84vw, 44rem); min-width: 0; }
.notion-gallery .gallery-slide:first-child { flex-basis: min(78vw, 25rem); }
.notion-gallery .planning-image { height: clamp(18rem, 34vw, 30rem); border-radius: .65rem; background: white; }
.notion-gallery .planning-visual figcaption { padding: 1.25rem 0 0; }
.notion-gallery .planning-visual h3 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 .75rem; }
.notion-gallery .planning-visual p { font-size: 1rem; line-height: 1.55; margin: 0; color: rgba(255,255,255,.8); }
.notion-gallery .planning-image img { object-fit: contain; }
.notion-gallery .planning-caption-copy { padding-bottom: 0; font-size: 1.15rem; }
.notion-gallery .gallery-button { background: transparent; border-color: white; color: white; }
.notion-gallery .gallery-button:hover, .notion-gallery .gallery-button:focus-visible { background: white; color: var(--ink); }
.notion-list { border-top: 1px solid rgba(255,255,255,.28); }
.notion-list > div { border-bottom: 1px solid rgba(255,255,255,.28); display: grid; gap: 1rem; grid-template-columns: .8fr 1.2fr; padding: 1.4rem 0; }
.notion-list strong { font-size: 1.05rem; }
.notion-list span { color: rgba(255,255,255,.68); }
.service-map { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: clamp(5rem, 10vw, 9rem); }
.service-map span { align-items: center; aspect-ratio: 1; background: var(--yellow); border-right: 1px solid rgba(17,17,17,.28); display: flex; font-size: clamp(1rem, 2vw, 1.45rem); font-weight: 750; justify-content: center; padding: 1rem; text-align: center; }
.service-map span:last-child { border-right: 0; }
.migration-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink); margin-bottom: clamp(5rem, 10vw, 9rem); }
.migration-paths > div { background: #dff5ee; min-height: 23rem; padding: clamp(2rem, 4vw, 4rem); }
.migration-paths span { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.migration-paths strong { display: block; font-size: clamp(1.8rem, 3.5vw, 3.2rem); letter-spacing: -.05em; line-height: 1; margin: 4rem 0 1.2rem; max-width: 14ch; }
.migration-paths p { font-size: 1.1rem; max-width: 25rem; }
.case-closing { padding-bottom: 0; }
.case-next { background: var(--pink); color: white; display: block; padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 8vw, 9rem); text-decoration: none; }
.case-next span { display: block; font-size: .8rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.case-next strong { display: block; font-size: clamp(2.5rem, 7vw, 6rem); letter-spacing: -.06em; margin-top: .6rem; }

@media (max-width: 760px) {
  .brand span { display: none; }
  .nav { gap: 1rem; }
  .hero { background: radial-gradient(circle at 88% 42%, #fff 0, var(--paper) 48%); min-height: calc(100vh - 5.45rem); min-height: calc(100svh - 5.45rem); }
  .hero-foreground { object-position: 72% center; }
  .hero-contour { -webkit-mask-position: 72% center; mask-position: 72% center; transform-origin: 82% 60%; }
  .hero-cutout-base { -webkit-mask-position: 72% center; mask-position: 72% center; }
  .identity-fan { bottom: -3rem; height: 15rem; right: -2rem; width: 22rem; }
  .fan-item:hover { transform: translateY(-2rem) rotate(0deg) scale(1.05); }
  .scroll-cue { right: 1.25rem; }
  .fragment-selection { bottom: 3%; right: 42%; top: auto; }
  .fragment-camera { bottom: auto; right: 38%; top: 15%; width: 6.8rem; }
  .fragment-ticket { right: -2.5rem; top: 52%; width: 10rem; }
  .fragment-bonjour { right: -1rem; top: 26%; width: 8rem; }
  .fragment-sun { right: 29%; top: 53%; width: 4rem; }
  .fragment-cursor { bottom: 1%; right: 40%; top: auto; }
  .hero-fragment { animation: hero-drift-a 8s ease-in-out infinite alternate; }
  .fragment-ticket, .fragment-bonjour { animation-name: hero-drift-b; animation-duration: 9s; }
  .project-card, .about, .case-intro, .case-section, .ecosystem-story, .automation-story, .metrics-story { grid-template-columns: 1fr; }
  .away-story { grid-template-columns: 1fr; }
  .navigation-comparison figcaption { grid-template-columns: 1fr; }
  .navigation-story { grid-template-columns: 1fr; }
  .language-section .case-section-title h2 { min-height: 0; }
  .matter-column { border-top: 1px solid var(--line); padding-top: 2rem; }
  .rebuild-intro, .rebuild-phases { grid-template-columns: 1fr; }
  .rebuild-visual { height: min(90vw, 25rem); }
  .rebuild-phase + .rebuild-phase { border-left: 0; border-top: 1px solid rgba(255,255,255,.26); }
  .rebuild-follow-on { align-items: flex-start; flex-direction: column; }
  .localised-cta { height: 3.25rem; max-width: calc(100vw - 2.5rem); }
  .myko-case-hero { align-items: flex-start; min-height: 50rem; padding-bottom: 22rem; }
  .myko-hero-copy { max-width: 100%; }
  .myko-dot-logo { height: 62%; left: -27%; top: 44%; width: 155%; }
  .future-vision-copy { grid-template-columns: 1fr; }
  .future-vision-copy h2 { grid-row: auto; }
  .project-grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .project-grid .project-card { grid-row: auto; }
  .project-grid > a, .project-grid .project-summary { min-height: 38rem; overflow: hidden; }
  .project-grid .project-card { overflow: hidden; }
  .project-grid .project-copy { background: #ebe7df; left: auto; padding: 2rem; position: relative; top: auto; width: auto; }
  .project-grid .myko-interface, .project-grid .myko-orbit { min-height: 27rem; }
  .project-grid .orbit-phone { bottom: -7%; left: 52%; width: min(54vw, 20rem); }
  .project-grid .orbit-boost { left: 10%; top: 3%; width: min(20vw, 7rem); }
  .project-grid .orbit-away { right: 0; top: 13%; width: min(16vw, 5.5rem); }
  .project-grid .orbit-temperature { left: 0; top: 34%; width: min(18vw, 6rem); }
  .project-grid .orbit-consumption { right: 2%; top: 41%; width: min(18vw, 6rem); }
  .project-grid .orbit-heating { bottom: 11%; left: 1%; width: min(27vw, 9rem); }
  .project-grid .orbit-colour { bottom: 0; right: 0; width: min(25vw, 8.5rem); }
  .project-grid .smart-grid-card .summary-footer { bottom: 0; right: 0; width: min(72%, 25rem); }
  .project-grid .migration-visual { bottom: 2rem; right: 0; width: min(68%, 21rem); }
  .project-copy { min-height: 32rem; }
  .myko-interface, .myko-orbit { min-height: 36rem; }
  .orbit-phone { bottom: -7%; left: 52%; width: min(54vw, 21rem); }
  .orbit-boost { left: 12%; top: 4%; width: min(21vw, 8rem); }
  .orbit-away { right: 1%; top: 12%; width: min(17vw, 6.5rem); }
  .orbit-temperature { left: 2%; top: 31%; width: min(18vw, 7rem); }
  .orbit-consumption { right: 8%; top: 40%; width: min(18vw, 7rem); }
  .orbit-heating { bottom: 13%; left: 6%; width: min(28vw, 11rem); }
  .orbit-colour { bottom: 2%; right: 1%; width: min(25vw, 10rem); }
  .orbit-ambient { width: 2.15rem; }
  .project-grid-secondary, .earlier-intro, .migration-paths { grid-template-columns: 1fr; }
  .project-grid-secondary .project-summary { min-height: 29rem; }
  .smart-grid-card .summary-footer { bottom: 1rem; left: auto; right: 1rem; width: min(68%, 27rem); }
  .migration-visual { bottom: 2.5rem; right: 2%; }
  .project-summary { min-height: 31rem; }
  .earlier-grid article { align-items: start; grid-template-columns: 1fr; gap: .5rem; }
  .service-map { grid-template-columns: 1fr; }
  .service-map span { aspect-ratio: auto; border-bottom: 1px solid rgba(17,17,17,.28); border-right: 0; justify-content: start; min-height: 5rem; }
  .project-visual { min-height: 28rem; }
  .chapter-grid { grid-template-columns: 1fr; }
  .chapter { min-height: 13rem; }
  .planning-grid, .notion-system, .notion-list > div, .planning-visual-pair { grid-template-columns: 1fr; }
  .metrics-story { gap: 2.5rem; }
  .metrics-heading h2 { max-width: 12ch; }
  .metrics-phone { width: min(100%, 22rem); }
  .screen-pair { flex-direction: column; }
  .screen-pair .phone-tall, .screen-pair .phone-sheet { width: min(100%, 25rem); }
  .automation-story .phone-frame { width: min(100%, 22rem); }
  .gallery-heading { align-items: start; flex-direction: column; }
  .gallery-heading h2 { font-size: clamp(1.625rem, 7vw, 2rem); }
  .gallery-button { height: 2.85rem; width: 2.85rem; }
  .gallery-slide { flex-basis: 78vw; min-width: 16rem; }
  .gallery-screen { height: min(125vw, 32rem); width: min(70vw, 16.5rem); }
  .evidence-slot { min-height: 24rem; }
  .footer { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .hero-fragment { animation: none !important; transform: rotate(var(--turn, 0deg)) !important; }
  .hero-contour { animation: none; }
  .band-dot { animation: none; opacity: 1; r: 9px; }
  .energy-bar, .runtime-bar, .temperature-line, .temperature-area { animation: none; }
}

@keyframes energy-bar-rise {
  from { opacity: .25; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes temperature-line-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes temperature-area-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hero-drift-a {
  from { transform: translate3d(0, -.25rem, 0) rotate(var(--turn, 0deg)); }
  to { transform: translate3d(.35rem, .45rem, 0) rotate(calc(var(--turn, 0deg) + 2deg)); }
}
@keyframes hero-drift-b {
  from { transform: translate3d(.2rem, .35rem, 0) rotate(var(--turn, 0deg)); }
  to { transform: translate3d(-.35rem, -.3rem, 0) rotate(calc(var(--turn, 0deg) - 2deg)); }
}
@keyframes contour-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(var(--contour-x), var(--contour-y), 0) scale(1.014); }
  66% { transform: translate3d(calc(0px - var(--contour-x)), calc(0px - var(--contour-y)), 0) scale(.993); }
}
@keyframes myko-band-dot-pulse {
  0%, 100% { opacity: .65; r: 7px; }
  50% { opacity: 1; r: 10px; }
}

/* Unreleased Myko preview */
.future-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); margin-top: 4rem; }
.future-preview-copy { padding-top: 2rem; max-width: 30rem; }
.future-preview-copy h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -.035em; margin: 1rem 0 1.5rem; }
.future-preview-copy p { font-size: 1.05rem; line-height: 1.6; }
.future-demo-hint { margin-top: 2rem; color: #514c5e; }
.future-demo-shortcuts { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.5rem 0; }
.future-demo-shortcuts button, .future-demo-reset { font: inherit; cursor: pointer; }
.future-demo-shortcuts button { background: white; border: 1px solid #c7b9db; border-radius: 999px; padding: .65rem 1rem; color: var(--ink); }
.future-demo-shortcuts button[aria-pressed="true"] { background: #572492; color: white; border-color: #572492; }
.future-demo-reset { border: 0; background: transparent; color: #572492; padding: .5rem 0; text-decoration: underline; text-underline-offset: .2rem; }
.future-demo-status { color: #514c5e; min-height: 1.6em; }
.future-phone { container-type: inline-size; width: min(100%, 20rem); aspect-ratio: 944 / 2048; border: 4px solid var(--ink); border-radius: 2.2rem; overflow: hidden; background: #f0f1ff; box-shadow: 8px 8px 0 rgba(17,17,17,0.175); display: flex; flex-direction: column; justify-self: center; }
.future-phone-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.future-shot, .future-static-shot { position: relative; width: 100%; overflow: hidden; }
.future-shot > img, .future-static-shot > img { position: absolute; top: 0; left: 0; width: 100%; max-width: none; display: block; }
.future-explore-shot > img { width: 130.1724%; left: -15.1724%; top: -3.3295%; }
.future-static-shot.future-explore-shot > img { top: -3.0983%; }
.future-hotspots { position: absolute; inset: 0; }
.future-hotspot { position: absolute; border: 0; border-radius: .7rem; background: transparent; cursor: pointer; padding: 0; }
.future-hotspot:hover { background: transparent; box-shadow: none; }
.future-hotspot:focus-visible, .future-phone-scroll:focus-visible { outline: 2px solid #572492; outline-offset: -3px; }
.future-ac-temperature { position: absolute; left: 29%; top: 30.5%; width: 47%; height: 8%; background: #f0f1ff; color: #489be8; font-size: 12cqw; font-weight: 700; text-align: center; line-height: 1.25; letter-spacing: -.035em; }
.future-app-nav { display: flex; position: relative; flex: 0 0 4.2rem; padding: .5rem .3rem 1rem; background: white; border-radius: 1.3rem 1.3rem 0 0; gap: .1rem; }
.future-app-nav[hidden] { display: none; }
.future-app-nav::after { content: ''; position: absolute; width: 30%; height: 3px; background: #60636c; border-radius: 2px; bottom: .35rem; left: 35%; }
.future-app-nav button { width: 20%; border: 0; background: none; color: #6e7381; cursor: pointer; padding: 0; font: inherit; font-size: .75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; }
.future-app-nav button:disabled { cursor: default; opacity: .6; }
.future-app-nav button[aria-pressed="true"] { color: #9d30ed; }
.future-app-nav svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.future-screen-gallery { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid #c9bbdb; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.future-screen-gallery figure { margin: 0; min-width: 0; }
.future-gallery-phone { border: 3px solid var(--ink); border-radius: 1.7rem; overflow: auto; height: clamp(24rem, 40vw, 32rem); width: min(100%, 15rem); margin: 0 auto; scrollbar-width: none; background: #f0f1ff; }
.future-screen-gallery figcaption { margin-top: 1.5rem; }
.future-screen-gallery h3 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 .65rem; }
.future-screen-gallery p { font-size: 1rem; line-height: 1.5; margin: 0; }
@media (max-width: 760px) { .future-preview { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; } .future-preview-copy { padding-top: 0; } .future-screen-gallery { grid-template-columns: 1fr; gap: 3rem; } .future-gallery-phone { width: min(100%, 18rem); height: 34rem; } }

.future-phone-scroll::-webkit-scrollbar, .future-gallery-phone::-webkit-scrollbar { display: none; width: 0; height: 0; }
.future-app-nav { padding: 0; gap: 0; border-radius: 0; overflow: hidden; }
.future-app-nav::after { display: none; }
.future-nav-art { position: absolute; bottom: 0; left: 0; width: 100%; max-width: none; pointer-events: none; }
.future-app-nav.is-explore .future-nav-art { width: 130.1724%; left: -15.1724%; bottom: -20.3448cqw; }
.future-app-nav button { position: relative; z-index: 1; flex: 1; height: 100%; }
.future-app-nav button > svg, .future-app-nav button > span { opacity: 0; }
.future-app-nav button:focus-visible { outline: 2px solid #572492; outline-offset: -3px; border-radius: .65rem; }

/* Notes follow the active prototype view. */
.future-preview { display: block; position: relative; padding-top: 3rem; margin-top: 4rem; }
.future-preview-instruction { margin: 0 0 2.5rem; text-align: center; font-size: .95rem; color: #686270; }
.future-preview .future-phone { margin: 0 auto; }
.future-annotations { position: absolute; top: 7rem; bottom: 0; inset-inline: 0; pointer-events: none; }
.future-annotation { position: absolute; top: var(--note-y); width: calc((100% - 20rem) / 2 - 3rem); max-width: 16rem; }
.future-annotation-left { right: calc(50% + 13rem); }
.future-annotation-right { left: calc(50% + 13rem); }
.future-annotation h3 { font-size: 1.05rem; line-height: 1.25; margin: 0 0 .65rem; letter-spacing: -.02em; }
.future-annotation p { font-size: .95rem; line-height: 1.55; margin: 0; color: #615b69; }
.future-annotation::after { content: ''; position: absolute; top: .7rem; width: 2.4rem; height: 1px; background: #9b7ab7; }
.future-annotation-left::after { left: calc(100% + .6rem); }
.future-annotation-right::after { right: calc(100% + .6rem); }
.future-annotation::before { content: ''; position: absolute; top: .5rem; width: .4rem; height: .4rem; border-radius: 50%; background: #9b7ab7; }
.future-annotation-left::before { left: calc(100% + 2.8rem); }
.future-annotation-right::before { right: calc(100% + 2.8rem); }
.future-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 980px) {
  .future-preview { display: flex; flex-direction: column; padding-top: 0; gap: 2rem; }
  .future-preview-instruction { margin: 0; order: 0; }
  .future-preview .future-phone { order: 1; }
  .future-annotations { order: 2; position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; margin-top: 1rem; }
  .future-annotation { position: static; width: auto; max-width: none; padding-top: 1rem; border-top: 1px solid #ccbcd8; }
  .future-annotation::before, .future-annotation::after { display: none; }
}
@media (max-width: 560px) { .future-annotations { grid-template-columns: 1fr; } }

/* Myko case study: shared editorial rhythm, without changing other case studies. */
.myko-case .case-body { --section-space: clamp(3rem, 5vw, 4.5rem); --column-gap: clamp(2rem, 5vw, 4.5rem); padding-top: var(--section-space); padding-bottom: var(--section-space); }
.myko-case .case-intro { gap: var(--column-gap); padding-bottom: var(--section-space); }
.myko-case .case-section, .myko-case .away-story, .myko-case .metrics-story, .myko-case .automation-story { gap: var(--column-gap); padding-block: var(--section-space); margin-block: 0; align-items: start; }
.myko-case .case-section, .myko-case .metrics-story, .myko-case .automation-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.myko-case .case-story h2, .myko-case .case-section-title h2, .myko-case .rebuild-intro h2, .myko-case .gallery-heading h2, .myko-case .navigation-intro h2, .myko-case .away-copy h2, .myko-case .metrics-heading h2, .myko-case .automation-copy h2 { font-size: clamp(1.75rem, 3.4vw, 3.25rem); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 1.5rem; max-width: 20ch; }
.myko-case .gallery-heading h2 { max-width: 26ch; }
.myko-case .gallery-heading h2 span { white-space: normal; }
.myko-case .case-story > p:not(.eyebrow), .myko-case .case-section-copy > p, .myko-case .away-copy > p:not(.eyebrow), .myko-case .metrics-heading > p:not(.eyebrow):not(.metrics-hint), .myko-case .automation-copy > p:not(.eyebrow), .myko-case .notion-intro > p:not(.eyebrow), .myko-case .future-vision-copy > p:not(.eyebrow) { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.6; margin: 0; }
.myko-case .case-section-copy { padding-top: 2rem; }
.myko-case .matter-story .case-section-copy { padding-top: 0; }
.myko-case .rebuild-story, .myko-case .product-gallery { padding-block: var(--section-space); margin-bottom: var(--section-space); }
.myko-case .rebuild-intro { grid-template-columns: 1fr; gap: 1.25rem; }
.myko-case .rebuild-intro h2 { margin-bottom: 0; max-width: 24ch; }
.myko-case .rebuild-phases { margin-top: 2.5rem; }
.myko-case .gallery-heading { margin-bottom: 2.5rem; }
.myko-case .notion-intro h2 + p { margin-top: 0; }
.myko-case .navigation-story { padding-bottom: var(--section-space); }
.myko-case .navigation-intro h2 { margin-bottom: 0; }
.myko-case .automation-steps button { font-size: .875rem; background: white; color: var(--ink); }
.myko-case .automation-steps button.is-active { background: var(--ink); color: white; }
.myko-case .automation-steps button span { font-size: .75rem; }
.myko-case .automation-details { min-height: 0; }
.myko-case .automation-detail { position: static; display: none; transform: none; }
.myko-case .automation-detail.is-active { display: block; }
.myko-case .future-vision { margin-bottom: var(--section-space); }
.myko-case .future-vision-copy { padding-block: var(--section-space); }
.myko-case .case-body > * { min-width: 0; }
@media (max-width: 760px) {
  .myko-case .case-section, .myko-case .metrics-story, .myko-case .automation-story { grid-template-columns: 1fr; }
  .myko-case .case-section-copy { padding-top: 0; }
  .myko-case .case-section { gap: .5rem; }
  .myko-case .automation-steps { width: min(100%, 22rem); }
}
@media (max-width: 600px) {
  .myko-case .navigation-blocks { grid-template-columns: 1fr; gap: 2.5rem; }
  .myko-case .away-comparison { gap: .75rem; }
  .myko-case .away-screen { border-width: 3px; border-radius: 1.2rem; }
}

/* Reserve purple offsets for interactive prototypes and the rebuild illustrations. */
.myko-case .away-after .away-screen { box-shadow: none; }
.myko-case .navigation-block:last-child img { filter: none; }
.myko-case .automation-story .phone-frame { box-shadow: none; }
.myko-case .metrics-phone { box-shadow: 8px 8px 0 rgba(17,17,17,0.175); }

/* Chapters distinguish the core story from supporting feature examples. */
.myko-case .case-chapter-heading { padding-block: 0 2rem; }
.myko-case .case-chapter-heading h2 { font-size: clamp(1.75rem, 3.4vw, 3.25rem); line-height: 1.08; letter-spacing: -.045em; max-width: 20ch; margin: 0; }
.myko-case .control-chapter { margin-bottom: var(--section-space); }
.myko-case .away-copy h3, .myko-case .metrics-heading h3 { font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 1.5rem; max-width: 22ch; }
.myko-case .gallery-heading h3 { font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.035em; margin: 0; }
.myko-case .gallery-heading h3 span { display: block; }
.myko-case .navigation-intro h3, .myko-case .automation-copy h3, .myko-case .case-closing h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.2; letter-spacing: -.025em; margin: 0 0 1.25rem; }
.myko-case .navigation-story { border-top: 1px solid var(--line); padding-block: 2.5rem; gap: 1.5rem; }
.myko-case .supporting-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--column-gap); border-top: 1px solid var(--line); padding-top: 2.5rem; }
.myko-case .supporting-examples .automation-story { display: flex; flex-direction: column; padding: 0; gap: 0; border: 0; min-width: 0; }
.myko-case .supporting-examples .automation-copy { flex: 1; width: 100%; }
.myko-case .supporting-examples .automation-demo { margin-top: 2rem; }
.myko-case .supporting-examples .phone-frame { width: min(100%, 18rem); }
.myko-case .case-closing { padding-bottom: 0; }
@media (max-width: 760px) {
 .myko-case .supporting-examples { grid-template-columns: 1fr; gap: 2.5rem; }
 .myko-case .supporting-examples .matter-story { border-top: 1px solid var(--line); padding-top: 2.5rem; }
}

.myko-case .control-chapter > .away-story { border-top: 0; padding-top: 1rem; }

/* Main chapter anchors share one scale; feature headings remain subordinate. */
.myko-case :is(#rebuild-title, #control-chapter-title, #notion-title, #future-vision-title) {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -.05em;
  max-width: 18ch;
  margin: 0;
  overflow-wrap: normal;
  text-wrap: balance;
}
.myko-case #notion-title { margin-bottom: 1.5rem; }
.myko-case .future-vision-copy { row-gap: 1.25rem; column-gap: var(--column-gap); }

.myko-case .case-chapter-number { display: block; font-size: .5em; line-height: 1.15; letter-spacing: -.025em; margin-bottom: .75rem; }
.myko-case .case-chapter-title { display: block; text-wrap: balance; }

/* Full-bleed chapter background, with the original body-column alignment. */
.myko-case .rebuild-story {
  --rebuild-gutter: max(clamp(1.25rem, 4vw, 4rem), calc((100vw - 78rem) / 2 + clamp(1.25rem, 4vw, 4rem)));
  position: relative;
  left: 50%;
  width: 100vw;
  margin-inline: -50vw 0;
  padding-inline: var(--rebuild-gutter);
}

/* Clear chapter, feature and comparison-label hierarchy. */
.myko-case .rebuild-story { background: var(--paper); color: var(--ink); }
.myko-case .rebuild-phase span, .myko-case .rebuild-phase p, .myko-case .rebuild-follow-on p { color: #5d5963; }
.myko-case .rebuild-follow-on a { color: var(--ink); }
.myko-case .rebuild-phases, .myko-case .rebuild-phase + .rebuild-phase, .myko-case .rebuild-follow-on { border-color: var(--line); }
.myko-case :is(.away-copy, .metrics-heading, .navigation-intro, .automation-copy) > .eyebrow { color: #7540b0; font-size: .875rem; margin-bottom: .6rem; }
.myko-case :is(.away-copy, .metrics-heading, .navigation-intro, .automation-copy) > h3 { font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 .75rem; max-width: 26ch; }
.myko-case .navigation-block figcaption .eyebrow, .myko-case .away-comparison > div > .eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #68636c; }
.myko-case .screen-flow-controls { width: min(100%, 24rem); margin-top: 1.25rem; }
.myko-case .screen-flow-controls .automation-steps { width: 100%; margin-top: 0; }
.myko-case .screen-flow-controls .matter-steps { justify-content: center; margin-top: 0; }
.myko-case .screen-flow-controls .automation-details { margin-top: 1rem; }

.myko-case .supporting-examples { grid-template-rows: auto auto auto; row-gap: 1.5rem; }
.myko-case .supporting-examples .automation-story { display: grid; grid-row: span 3; grid-template-rows: auto auto auto; grid-template-rows: subgrid; row-gap: 1.5rem; }
.myko-case .supporting-examples .automation-demo { margin-top: 0; }
.myko-case .supporting-examples .screen-flow-controls { justify-self: center; align-self: start; margin-top: 0; }
@media (max-width: 760px) {
 .myko-case .supporting-examples { grid-template-rows: none; row-gap: 2.5rem; }
 .myko-case .supporting-examples .automation-story { grid-row: auto; grid-template-rows: auto auto auto; }
}

/* One spacing rhythm across the everyday-control chapter. */
.myko-case .control-chapter { --feature-space: clamp(2.5rem, 4vw, 3.5rem); }
.myko-case .control-chapter > .case-chapter-heading { padding-bottom: var(--feature-space); }
.myko-case .control-chapter > :is(.away-story, .metrics-story, .navigation-story) { padding-block: var(--feature-space); margin-block: 0; }
.myko-case .control-chapter > .away-story { padding-top: 0; }
.myko-case .control-chapter > .supporting-examples { padding-top: var(--feature-space); }
@media (max-width: 760px) {
 .myko-case .control-chapter > .supporting-examples { row-gap: var(--feature-space); }
 .myko-case .control-chapter .supporting-examples .matter-story { padding-top: var(--feature-space); }
}

/* Keep each flow selector with its explanatory copy, alongside the phone. */
.myko-case .supporting-examples { grid-template-rows: none; }
.myko-case .supporting-examples .automation-story { grid-row: auto; grid-template-rows: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
.myko-case .supporting-examples .automation-copy .screen-flow-controls { margin-top: 1.25rem; width: 100%; }
.myko-case .supporting-examples .screen-flow-controls .matter-steps { justify-content: flex-start; }
.myko-case .screen-flow-controls .automation-steps button { padding-inline: .5rem; }
@media (max-width: 760px) {
 .myko-case .supporting-examples .automation-story { grid-template-columns: 1fr; row-gap: 2rem; }
}

/* Keep screenshots on a single, untransformed image layer. */
.myko-case .matter-phone .matter-screen { height: 100%; object-fit: cover; }
.myko-case .supporting-examples .automation-story { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.myko-case .matter-steps button { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.myko-case .matter-steps button span { font-size: .75rem; opacity: .62; }
@media (max-width: 760px) {
 .myko-case .supporting-examples .automation-story { grid-template-columns: 1fr; }
}

/* Keep the complete Myko mark inside the hero, like the other case illustrations. */
.myko-case .myko-hero-visual { inset:auto;right:4%;top:50%;width:45%;height:82%;transform:translateY(-50%);overflow:visible; }
.myko-case .myko-dot-logo { position:static;inset:auto;display:block;width:100%;height:100%;overflow:visible; }
@media(max-width:760px) {
 .myko-case .myko-hero-visual { top:auto;bottom:1.5rem;right:10%;width:80%;height:23rem;transform:none; }
}

/* Instructions remain available to screen readers without taking up chart space. */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }