/* Version 5: a larger editorial opening and two new visual chapters. */
.opening-editorial { padding-top: 145px; }
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: 42px;
}
.opening-editorial .opening-copy { text-align: left; width: 100%; }
.opening-editorial .kicker { justify-content: flex-start; font-size: 12px; }
.opening-editorial h1 {
  width: 100%;
  max-width: 640px;
  font-size: clamp(48px, 5.1vw, 76px);
  line-height: 1.04;
  margin: 0;
  letter-spacing: -0.06em;
}
.opening-editorial .intro { max-width: 510px; margin: 28px 0 0; font-size: 19px; }
.opening-editorial .actions { justify-content: flex-start; margin-top: 34px; }
.hero-scene {
  width: 100%;
  max-width: none;
  height: 615px;
  margin: 0;
  position: relative;
}
.hero-scene .stage-phone {
  width: 290px;
  left: calc(50% - 115px);
  top: 1px;
  filter: drop-shadow(25px 30px 30px #0a1b3a20);
}
.hero-orbit {
  position: absolute;
  inset: -5% -5%;
  width: 110%;
  height: 110%;
  fill: none;
  stroke: #3768b927;
  stroke-width: 1.2;
}
.hero-orbit path:nth-child(2) { stroke: #25b99c36; }
.hero-orbit path:last-child { stroke: #f39a3f69; stroke-width: 2; stroke-dasharray: 5 9; }
.hero-website, .hero-enquiry {
  position: absolute;
  z-index: 3;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 25px 50px #0a1b3a15;
  border-radius: 21px;
  text-align: left;
}
.hero-website { width: 220px; left: -3px; top: 135px; transform: rotate(-8deg); }
.hero-ui-bar { display: flex; align-items: center; gap: 4px; padding: 13px 17px; border-bottom: 1px solid var(--line); }
.hero-ui-bar i, .brand-browser-bar i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--orange); }
.hero-ui-bar i:nth-child(2), .brand-browser-bar i:nth-child(2) { background: var(--teal); }
.hero-ui-bar i:nth-child(3), .brand-browser-bar i:nth-child(3) { background: var(--blue); }
.hero-ui-bar > span { font-size: 10px; margin-left: auto; color: var(--copy); }
.hero-web-preview { padding: 21px; }
.hero-web-emblem { display: grid; place-items: center; height: 70px; border-radius: 12px; background: #e9eff7; margin-bottom: 17px; }
.hero-web-emblem svg { width: 39px; height: 39px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linejoin: round; }
.hero-web-preview strong { font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -0.04em; }
.hero-web-lines { display: grid; gap: 6px; margin-top: 15px; }
.hero-web-lines span { height: 5px; background: #d7e3f5; border-radius: 8px; width: 100%; }
.hero-web-lines span:last-child { width: 70%; }
.hero-web-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; background: var(--blue); color: white; border-radius: 9px; padding: 10px 12px; font-size: 11px; }
.hero-web-action svg, .brand-demo-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hero-enquiry { width: 241px; right: -8px; bottom: 23px; padding: 21px; transform: rotate(7deg); }
.hero-enquiry-head { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 500; margin-bottom: 18px; }
.hero-chat-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #25b99c16; color: #11725f; }
.hero-chat-symbol svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hero-question, .hero-reply { padding: 11px 13px; border-radius: 13px 13px 13px 2px; font-size: 12px; line-height: 1.5; background: #edf2f8; }
.hero-reply { background: var(--ink); color: var(--paper); margin: 9px 0 15px 18px; border-radius: 13px 13px 2px 13px; }
.hero-enquiry-foot { font-size: 10px; color: var(--copy); display: flex; align-items: center; gap: 7px; }
.hero-enquiry-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.opening-editorial .opening-bottom { margin-top: 24px; }
.opening-editorial .opening-atmosphere { background: radial-gradient(ellipse at 80% 55%, #f39a3f1c, transparent 65%); }
.opening-editorial .opening-atmosphere span { left: 55%; top: 80px; }
.opening-editorial .opening-atmosphere span:last-child { left: 40%; top: -30px; }
.business-journeys { background: var(--ink); color: var(--paper); }
.journey-heading { max-width: 940px; }
.journey-heading .kicker { color: #b5c5df; }
.journey-heading .heading { font-size: clamp(42px, 5.1vw, 70px); }
.journey-heading .intro { color: #b5c5df; max-width: 680px; font-size: 18px; margin-top: 27px; }
.business-selector { margin-top: 57px; }
.journey-controls { display: flex; gap: 10px; margin-bottom: 44px; }
.journey-controls[hidden], .journey-panel[hidden] { display: none; }
.journey-controls button {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  color: var(--paper); background: #ffffff06; border: 1px solid #ffffff2b;
  border-radius: 999px; padding: 15px 19px; min-height: 55px; font-size: 15px;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.journey-controls button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.journey-controls button:hover { border-color: var(--teal); transform: translateY(-2px); }
.journey-controls button[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.journey-controls button:focus-visible { outline-color: var(--teal); }
.journey-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 95px; }
.journey-panel + .journey-panel { margin-top: 65px; }
.cases-enhanced .journey-panel { margin-top: 0; }
.journey-type { display: block; color: var(--teal); font-size: 13px; margin-bottom: 24px; }
.journey-copy h3 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.07; font-weight: 500; max-width: 470px; }
.journey-copy > p { color: #b5c5df; font-size: 18px; margin-top: 27px; max-width: 500px; }
.journey-copy .text-link { margin-top: 31px; color: var(--paper); border-color: #ffffff50; }
.customer-route { margin: 0; }
.route-heading { display: flex; align-items: center; gap: 13px; font-size: 13px; color: #b5c5df; margin-bottom: 24px; }
.route-heading svg { width: 35px; height: 35px; stroke: var(--teal); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.route-stops { padding: 0 0 0 20px; list-style: none; position: relative; margin: 0 0 28px; }
.route-stops::before { content: ''; position: absolute; width: 1px; left: 3px; top: 25px; bottom: 25px; background: #25b99c55; }
.route-stops li { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #ffffff1b; min-height: 67px; font-size: 18px; }
.route-stops li i { position: absolute; left: 0; width: 7px; height: 7px; background: var(--teal); border-radius: 50%; }
.route-stops li svg { width: 18px; height: 18px; stroke: var(--teal); stroke-width: 1.5; fill: none; margin-left: auto; flex: none; }
.route-ticket { background: #fffefa; color: var(--ink); border-radius: 19px; padding: 25px 28px; box-shadow: 0 17px 35px #00000015; }
.route-ticket > span { display: block; font-size: 11px; color: var(--copy); margin-bottom: 12px; }
.route-ticket strong { display: block; font-size: 25px; line-height: 1.16; font-weight: 500; letter-spacing: -0.04em; }
.route-ticket p { font-size: 14px; color: var(--copy); margin-top: 15px; }
.customer-route figcaption { font-size: 11px; color: #b5c5df; margin-top: 15px; }
.brand-chapter { background: #edf2f7; text-align: center; overflow: hidden; }
.brand-heading { max-width: 950px; margin-inline: auto; }
.brand-heading .kicker { justify-content: center; }
.brand-heading .intro { font-size: 18px; max-width: 680px; margin: 25px auto 0; }
.brand-canvas { margin: 58px 0 0; perspective: 1200px; }
.brand-board {
  display: grid; grid-auto-flow: dense; grid-template-columns: 0.75fr 2fr 0.75fr;
  gap: 37px; align-items: center; text-align: left; max-width: 1050px; margin: auto;
  padding: 46px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 32px; box-shadow: 0 30px 75px #0a1b3a0c; transform-origin: center;
}
.canvas-label { color: var(--copy); font-size: 12px; display: block; margin-bottom: 23px; }
.colour-ribbon { display: flex; width: 100%; height: 54px; border-radius: 13px; overflow: hidden; border: 1px solid var(--line); }
.colour-ribbon i { flex: 1; background: var(--paper); }
.colour-ribbon i:nth-child(2) { background: var(--ink); }
.colour-ribbon i:nth-child(3) { background: var(--blue); }
.colour-ribbon i:nth-child(4) { background: var(--teal); }
.colour-ribbon i:nth-child(5) { background: var(--orange); }
.brand-type-sample { display: block; font-size: 80px; font-weight: 500; letter-spacing: -0.07em; line-height: 1.1; margin-top: 30px; }
.brand-palette p, .brand-voice p { color: var(--copy); font-size: 13px; margin-top: 16px; }
.brand-browser { background: var(--white); border: 1px solid var(--line); border-radius: 19px; overflow: hidden; box-shadow: 0 15px 30px #0a1b3a09; }
.brand-browser-bar { display: flex; gap: 4px; align-items: center; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.brand-browser-bar > span { font-size: 10px; margin-left: auto; color: var(--copy); }
.brand-browser-body { padding: 29px; }
.brand-browser-body img { width: 100px; height: auto; margin-bottom: 25px; }
.brand-browser-body > strong { display: block; font-size: 33px; letter-spacing: -0.045em; font-weight: 500; }
.brand-browser-body p { font-size: 13px; color: var(--copy); margin-top: 12px; }
.brand-mini-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: dense; gap: 9px; margin-top: 23px; }
.brand-mini-layout span { display: grid; place-items: center; height: 46px; background: #e5eefb; border-radius: 8px; }
.brand-mini-layout svg { width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.brand-mini-layout span:nth-child(2) { background: #d8eee7; }
.brand-mini-layout span:nth-child(3) { background: #fae8cc; }
.brand-demo-action { display: inline-flex; align-items: center; gap: 22px; padding: 10px 13px; border-radius: 8px; background: var(--blue); color: white; font-size: 11px; margin-top: 24px; }
.voice-mark { display: block; font-size: 80px; line-height: 0.7; color: var(--orange); margin-top: 36px; }
.brand-voice strong { display: block; font-size: 27px; letter-spacing: -0.05em; font-weight: 500; line-height: 1.2; }
.brand-canvas figcaption { color: var(--copy); font-size: 12px; margin-top: 23px; }
.brand-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 66px; text-align: left; }
.brand-principles > div { padding-top: 24px; border-top: 1px solid #3768b949; }
.brand-principles h3 { font-weight: 500; font-size: 23px; letter-spacing: -0.045em; }
.brand-principles p { color: var(--copy); font-size: 15px; margin-top: 15px; }
.brand-cta { margin-top: 48px; }
@media (max-width: 1100px) {
  .hero-layout { gap: 28px; grid-template-columns: 1fr 1fr; }
  .hero-scene { height: 540px; }
  .hero-scene .stage-phone { width: 257px; left: calc(50% - 101px); }
  .hero-website { width: 187px; left: -8px; top: 122px; }
  .hero-enquiry { width: 213px; right: -9px; bottom: 8px; padding: 17px; }
  .hero-web-preview { padding: 18px; }
  .hero-web-preview strong { font-size: 19px; }
  .journey-panel { gap: 56px; }
  .brand-board { gap: 23px; padding: 32px; }
  .brand-browser-body { padding: 24px; }
}
@media (max-width: 900px) {
  .opening-editorial { padding-top: 144px; }
  .hero-layout { grid-template-columns: 1fr; gap: 35px; }
  .opening-editorial .opening-copy { max-width: 650px; }
  .opening-editorial h1 { font-size: clamp(44px, 7vw, 66px); max-width: 650px; }
  .opening-editorial .intro { max-width: 590px; font-size: 18px; }
  .hero-scene { max-width: 630px; height: 595px; margin-inline: auto; }
  .hero-scene .stage-phone { width: 285px; left: calc(50% - 114px); }
  .hero-website { width: 220px; left: 5%; top: 140px; }
  .hero-enquiry { width: 241px; right: 0; bottom: 20px; padding: 21px; }
  .hero-web-preview strong { font-size: 22px; }
  .journey-panel { gap: 36px; align-items: start; }
  .journey-copy h3 { font-size: 34px; }
  .journey-copy > p { font-size: 16px; }
  .route-stops li { font-size: 15px; }
  .route-ticket { padding: 22px; }
  .route-ticket strong { font-size: 23px; }
  .brand-board { grid-template-columns: 1fr 2fr; }
  .brand-voice { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; align-items: center; border-top: 1px solid var(--line); padding-top: 25px; }
  .brand-voice .canvas-label { margin: 0; }
  .brand-voice .voice-mark { display: none; }
  .brand-voice strong { font-size: 22px; }
  .brand-voice p { margin: 0; }
  .brand-browser-body > strong { font-size: 30px; }
  .brand-principles { gap: 23px; }
  .brand-principles h3 { font-size: 21px; }
}
@media (max-width: 600px) {
  .opening-editorial { padding-top: 122px; }
  .hero-layout { gap: 23px; }
  .opening-editorial h1 { font-size: clamp(32px, 9.2vw, 53px); max-width: none; line-height: 1.08; }
  .opening-editorial .kicker { font-size: 10px; margin-bottom: 22px; }
  .opening-editorial .intro { font-size: 16px; margin-top: 23px; }
  .opening-editorial .actions { margin: 27px 0 0; max-width: 342px; }
  .hero-scene { width: 100%; height: clamp(358px, 105vw, 530px); }
  .hero-scene .stage-phone { width: clamp(174px, 52vw, 280px); left: calc(50% - clamp(68px, 21vw, 113px)); top: 0; }
  .hero-website { width: clamp(118px, 36vw, 195px); top: 85px; left: 7px; border-radius: 15px; }
  .hero-ui-bar { padding: 10px 11px; }
  .hero-ui-bar > span { font-size: 8px; }
  .hero-web-preview { padding: 13px; }
  .hero-web-emblem { height: 41px; margin-bottom: 11px; border-radius: 8px; }
  .hero-web-emblem svg { width: 25px; height: 25px; }
  .hero-web-preview strong { font-size: 15px; }
  .hero-web-lines { margin-top: 11px; gap: 4px; }
  .hero-web-lines span { height: 4px; }
  .hero-web-action { padding: 7px 9px; font-size: 9px; margin-top: 12px; }
  .hero-web-action svg { width: 12px; height: 12px; }
  .hero-enquiry { width: clamp(142px, 44vw, 228px); right: 4px; bottom: 10px; padding: 13px; border-radius: 15px; }
  .hero-enquiry-head { gap: 7px; margin-bottom: 12px; font-size: 9px; }
  .hero-chat-symbol { width: 23px; height: 23px; flex: none; border-radius: 7px; }
  .hero-chat-symbol svg { width: 17px; height: 17px; }
  .hero-question, .hero-reply { font-size: 9px; padding: 8px; border-radius: 9px; }
  .hero-reply { margin: 7px 0 12px 10px; }
  .hero-enquiry-foot { font-size: 8px; }
  .opening-editorial .opening-bottom { margin-top: 18px; }
  .journey-heading .heading { font-size: clamp(35px, 9.5vw, 48px); }
  .journey-heading .intro { font-size: 16px; margin-top: 22px; }
  .business-selector { margin-top: 32px; }
  .journey-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 33px; }
  .journey-controls button { border-radius: 15px; font-size: 11px; gap: 0; padding: 12px 9px; min-height: 57px; text-align: left; line-height: 1.4; }
  .journey-controls button svg { display: none; }
  .journey-panel { grid-template-columns: 1fr; gap: 35px; }
  .journey-type { margin-bottom: 16px; font-size: 12px; }
  .journey-copy h3 { font-size: 35px; max-width: 400px; }
  .journey-copy > p { margin-top: 23px; }
  .journey-copy .text-link { margin-top: 24px; }
  .route-heading { font-size: 12px; margin-bottom: 15px; }
  .route-stops li { font-size: 15px; min-height: 58px; }
  .route-ticket strong { font-size: 23px; }
  .brand-heading .heading { font-size: clamp(35px, 10vw, 48px); }
  .brand-heading .intro { font-size: 16px; }
  .brand-canvas { margin-top: 35px; }
  .brand-board { padding: 20px; border-radius: 24px; grid-template-columns: 1fr; gap: 25px; }
  .brand-palette { display: grid; grid-template-columns: 1fr 1.5fr; align-items: center; gap: 12px; }
  .brand-palette .canvas-label { margin: 0; }
  .colour-ribbon { height: 38px; border-radius: 9px; }
  .brand-type-sample, .brand-palette > p { display: none; }
  .brand-browser-body { padding: 21px; }
  .brand-browser-body > strong { font-size: 29px; }
  .brand-browser-bar > span { font-size: 8px; }
  .brand-browser-body img { width: 88px; margin-bottom: 22px; }
  .brand-browser-body p { font-size: 12px; }
  .brand-voice { grid-template-columns: 1fr 1.5fr; gap: 12px; }
  .brand-voice p { grid-column: 1 / -1; font-size: 13px; }
  .brand-voice strong { font-size: 23px; }
  .brand-canvas figcaption { font-size: 11px; line-height: 1.6; margin-top: 20px; }
  .brand-principles { grid-template-columns: 1fr; gap: 26px; margin-top: 42px; }
  .brand-principles h3 { font-size: 23px; }
  .brand-principles p { margin-top: 12px; }
  .brand-cta { max-width: 100%; margin-top: 35px; font-size: 12px; padding-left: 18px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-controls button { transition: none; }
  .journey-controls button:hover { transform: none; }
}