/* Phone layout only. Loaded after the approved desktop styles. */
@media (max-width: 760px) {
  html { scroll-padding-top: 150px; }
  body { -webkit-text-size-adjust: 100%; }
  main, main section, main section > div, fieldset, form { min-width: 0; }
  header, .element-home header { padding: 12px 6%; min-height: 0; gap: 8px; flex-wrap: wrap; }
  header .brand img { width: 110px; height: 54px; }
  header nav { order: 3; width: 100%; gap: 8px 16px; flex-wrap: wrap; justify-content: flex-start; font-size: 14px; }
  header nav a { display: inline-flex; flex: 1 1 0; min-width: 0; align-items: center; min-height: 44px; padding: 8px 0; }
  header .nav-cta { display: none; }
  .page-intro h1 { font-size: clamp(34px, 9vw, 52px); overflow-wrap: break-word; }
  .section-head { display: block; margin-bottom: 28px; }
  .section-head > p { max-width: none; margin-top: 20px; }
  .section-head > p br { display: none; }
  .service-pair, .product-grid, .about-main, .family-values,
  .principles, .contact-layout, .simple-enquiry,
  .certification-panel.wrap, .local-answers, .journey-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .simple-enquiry .form-card { padding: 24px 16px; min-width: 0; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; max-width: 100%; min-height: 48px; }
  .button { min-height: 48px; white-space: normal; text-align: center; }
  .line-link, .quiet-choice { min-height: 44px; }
  footer { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  footer a, .direct-contact a { overflow-wrap: anywhere; }
  footer a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; }

  /* A shorter, readable opening keeps the next step within reach. */
  .element-home .element-hero { height: 78svh; min-height: 550px; max-height: 740px; padding: 150px 6% 24px; }
  .element-home .video-title { left: 6%; right: 6%; top: auto; bottom: 100px; transform: none; padding: 0; max-width: none; }
  .element-home .video-title h1 { font-size: clamp(34px, 8.7vw, 56px); line-height: 1.1; }
  .element-home .video-title > p { font-size: 11px; line-height: 1.6; letter-spacing: .07em; }
  .element-home .film-bottom.video-led { bottom: 24px; }
  .element-home .video-control { min-width: 48px; min-height: 48px; }
  .element-home .solar-prologue { height: auto; min-height: 0; }
  .element-home .prologue-scene { position: relative; top: auto; height: auto; min-height: 0; padding: 64px 6% 40px; overflow: visible; }
  .element-home .prologue-scene h2 { font-size: clamp(40px, 10vw, 66px); line-height: 1.06; opacity: 1; transform: none; }
  .element-home .prologue-second { align-self: flex-start; margin-top: 28px; font-size: clamp(24px, 6.5vw, 34px); opacity: 1; transform: none; }
  .element-home .scroll-note { position: static; margin-top: 28px; line-height: 1.5; }

  .element-home .roof-study, .element-home .energy-section,
  .element-home .work.wrap, .element-home .element-intro,
  .element-home .journey.wrap, .element-home .certification-panel.wrap,
  .element-home .local-answers, .journey-v2 .plan-finish, .journey-v2 .plan-review { padding: 48px 6%; }
  .element-home .section-head h2, .element-home .work h2,
  .element-home .journey .section-head h2, .element-home .element-intro h2,
  .element-home .certification-panel h2, .element-home .local-answers h2,
  .journey-v2 .plan-introduction h2, .journey-v2 .plan-review h2 { font-size: clamp(32px, 8.4vw, 46px); line-height: 1.12; }
  .element-home .roof-study h3 { font-size: clamp(28px, 7.3vw, 38px); }
  .element-home .roof-display canvas { height: clamp(210px, 65vw, 300px); }
  .element-home .roof-display .roof-name { font-size: 24px; height: auto; min-height: 34px; }
  .journey-v2 .roof-picks { gap: 8px 20px; }
  .journey-v2 .roof-picks button { min-height: 48px; }
  .roof-motion { min-height: 44px; }
  .energy-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .energy-story { min-width: 0; }
  .energy-story h3 { font-size: clamp(28px, 7.6vw, 40px); }
  .modes { gap: 8px; justify-content: space-between; }
  .modes button { font-size: 14px; min-height: 48px; }
  .element-home .energy-stage, .energy-stage { position: relative; top: auto; align-self: stretch; width: 100%; height: 430px; min-height: 430px; margin: 0; }
  .energy-node { min-width: 0; width: 46%; }
  .energy-node.solar { top: 0; left: 0; }
  .energy-node.battery { right: 0; bottom: 38px; text-align: right; }
  .energy-node.grid { left: 0; bottom: 38px; }
  .energy-node span { font-size: 11px; letter-spacing: .04em; }
  .energy-node strong { font-size: 13px; line-height: 1.4; }
  .energy-centre { min-width: 0; width: 54%; }
  .energy-centre strong { font-size: 19px; }
  .journey-v2 .usage-echo { font-size: 11px !important; }
  .motion { min-height: 44px; max-width: 50%; font-size: 11px; }
  .journey-v2 .usage-readout input { font-size: 36px; }
  .journey-v2 #usageRange { min-height: 44px; }
  .journey-v2 .choice-actions { align-items: stretch; gap: 4px 18px; }

  .element-home .project-slider { grid-template-columns: minmax(0, 1fr); }
  .element-home .element-intro > div:first-of-type { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .element-home .project-window { aspect-ratio: 4 / 3; }
  .element-home .project-description h3 { font-size: clamp(28px, 7.6vw, 38px); }
  .element-home .project-description { padding-top: 24px; }
  .element-home .project-tabs button { padding: 12px 4px; min-height: 48px; }
  .project-arrows button { min-width: 44px; min-height: 44px; }
  .element-home #projectImage, .element-home .journey-photo img { transform: none; }
  .element-home .journey-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .journey-v2 #journeyCaption { font-size: 12px; line-height: 1.5; bottom: 18px; }
  .journey-steps button { gap: 12px; }
  .journey-steps button > div { min-width: 0; }
  .journey-steps button[aria-expanded=true] { padding-left: 12px; }
  .journey-steps h3 { font-size: 21px; }
  .journey-v2 .plan-finish { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .journey-v2 .review-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .journey-v2 #journeyContact input { font-size: 18px; }
  .journey-v2 #submitPlan { min-width: 0; width: 100%; }
  .journey-v2 .enquiry-verification { max-width: 100%; }
  #usage-choice, #roof-choice, #journey-details, #planName { scroll-margin-top: 150px; }
  .element-home .reveal-ready { opacity: 1; transform: none; transition: none; }

  /* Utility controls stay available at the foot of the page without covering forms. */
  .element-home .sound-control { display: none !important; }
  .element-home .atmosphere-control { position: relative; inset: auto; display: inline-flex; align-items: center; min-height: 44px; margin: 12px; padding: 10px 12px; font-size: 12px; }
  .element-home { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Natural flow prevents logo, quote and entry buttons colliding on short screens. */
  .journey-v2 .energy-loading { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: 24px 6%; overflow-y: auto; overscroll-behavior: contain; padding-top: max(24px, env(safe-area-inset-top, 0px)); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
  .journey-v2 .energy-loading .loading-signature { position: relative; inset: auto; transform: none; flex-shrink: 0; order: 1; width: min(74vw, 300px); }
  .journey-v2 .energy-loading .loading-signature img { max-height: 120px; margin-bottom: 20px; }
  .journey-v2 .energy-loading .entrance-quote { position: relative; inset: auto; transform: none; flex-shrink: 0; order: 2; width: 100%; max-width: 30ch; margin: 0; text-align: center; font-size: clamp(20px, 5.5vw, 28px); line-height: 1.4; }
  .journey-v2 .energy-loading .loading-skip { position: relative; inset: auto; order: 3; flex-shrink: 0; min-height: 48px; font-size: 14px; }
  .journey-v2 .energy-loading .enter-sound { min-height: 48px; }
}
@media (max-width: 760px) and (max-height: 540px) {
  .journey-v2 .energy-loading { justify-content: flex-start; }
}