/* Shared aircon service guides. Shared blue brand palette; 20px media corners, pill CTAs. */
.cleaning-guide { --cg-paper:var(--ienote-paper); --cg-panel:var(--ienote-sky); --cg-text:var(--ienote-ink); --cg-muted:var(--ienote-muted); --cg-line:var(--ienote-line); --cg-accent:var(--ienote-blue); --cg-tint:var(--ienote-tint); background:var(--cg-paper); color:var(--cg-text); }
.cleaning-guide .header { padding-block:16px; }
.cleaning-guide .shell { max-width:1280px; }
.cleaning-guide figure { margin:0; }
.cleaning-guide svg { flex-shrink:0; }
.cleaning-guide a:focus-visible,.cleaning-guide button:focus-visible { outline:3px solid var(--cg-accent); outline-offset:5px; }
.cleaning-guide .header a:focus-visible { outline-color:#e36320; }
.visual-tools { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:6px 0 22px; font-size:14px; color:var(--cg-muted); }
.motion-switch { font:inherit; color:var(--cg-text); border:1px solid var(--cg-line); border-radius:24px; padding:9px 14px; background:var(--cg-paper); cursor:pointer; min-height:44px; }
.motion-switch[hidden] { display:none; }
.motion-switch:disabled { cursor:default; }
.cleaning-hero { display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center; padding:0 0 42px; }
.cleaning-hero h1 { font-size:clamp(30px,3.55vw,46px); letter-spacing:.02em; line-height:1.4; margin-bottom:24px; }
.cleaning-hero h1 span { display:block; }
.hero-lead { font-size:18px; line-height:1.9; margin-bottom:28px; }
.hero-copy .eyebrow { font-size:16px; color:var(--cg-accent); }
.hero-photo { position:relative; overflow:hidden; border-radius:20px; background:var(--cg-panel); aspect-ratio:1.22; isolation:isolate; }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:48% center; display:block; }
.hero-photo figcaption { position:absolute; bottom:0; inset-inline:0; padding:68px 26px 22px; color:#fffdfa; background:linear-gradient(transparent,rgba(7,59,152,.94)); }
.hero-photo figcaption span { display:flex; gap:10px; align-items:center; font-weight:700; font-size:18px; }
.hero-photo small { display:block; font-size:12px; margin-top:8px; }
.visual-button { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; background:var(--ienote-orange); color:var(--ienote-button-ink); border-radius:40px; padding:16px 24px; text-decoration:none; font-size:16px; font-weight:700; min-height:56px; position:relative; isolation:isolate; overflow:hidden; }
.visual-button::before { content:""; position:absolute; inset:-50%; border-radius:50%; background:var(--ienote-orange-hover); transform:scale(0); z-index:-1; transition:transform .45s ease; }
.visual-button:hover,.visual-button:focus-visible { color:var(--ienote-button-ink); }
.visual-button:is(:hover,:focus-visible)::before { transform:scale(1); }
.visual-button svg,.text-action svg,.visual-steps svg,.related svg { transition:transform .25s ease; }
.visual-button:hover svg,.text-action:hover svg,.related a:hover svg { transform:translateX(5px); }
.visual-button:active { transform:scale(.98); }
.guide-summary { display:grid; grid-template-columns:52px 1fr; gap:20px; padding:30px 32px; background:var(--cg-panel); border-radius:20px; }
.summary-icon { color:var(--cg-accent); padding-top:4px; }
.guide-summary h2 { font-size:23px; margin-bottom:10px; }
.guide-summary .answer { font-size:18px; margin:0; line-height:1.9; max-width:58em; }
.visual-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:30px 0 12px; border-block:1px solid var(--cg-line); }
.visual-steps a { display:flex; align-items:center; padding:22px 18px; gap:14px; text-decoration:none; position:relative; font-size:16px; }
.visual-steps a::after { content:""; position:absolute; bottom:0; inset-inline:18px; height:2px; background:var(--cg-accent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.visual-steps a:hover::after,.visual-steps a:focus-visible::after { transform:scaleX(1); }
.visual-steps a+a { border-left:1px solid var(--cg-line); }
.visual-steps a>span { color:var(--cg-accent); font-size:20px; font-weight:700; }
.visual-steps svg { margin-left:auto; }
.visual-steps a:hover svg { transform:rotate(45deg); }
.visual-section { padding:64px 0; scroll-margin-top:22px; }
.visual-section h2 { font-size:clamp(24px,2.6vw,32px); line-height:1.6; margin-bottom:18px; text-wrap:pretty; }
.visual-section p { max-width:62em; }
.visual-number { font-size:44px; line-height:1; color:var(--cg-accent); font-weight:700; display:block; margin-bottom:22px; }
.equipment-section { display:grid; grid-template-columns:1.08fr 1fr; gap:48px; align-items:center; }
.visual-checklist { list-style:none; padding:0; margin:24px 0 0; }
.visual-checklist li { display:flex; align-items:flex-start; gap:12px; margin:0; padding:15px 0; border-bottom:1px solid var(--cg-line); }
.visual-checklist svg { color:var(--cg-accent); margin-top:4px; }
.photo-tip { display:flex; align-items:flex-start; gap:14px; margin-top:28px; color:var(--cg-muted); }
.photo-tip svg { color:var(--cg-accent); margin-top:4px; }
.photo-tip p { font-size:16px; margin:0; }
.photo-tip strong { color:var(--cg-text); }
.filter-photo { background:var(--cg-panel); border-radius:20px; overflow:hidden; }
.filter-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
.filter-photo figcaption { display:grid; gap:10px; padding:26px; }
.filter-photo figcaption strong { font-size:19px; line-height:1.7; }
.filter-photo figcaption span { font-size:16px; }
.filter-photo small { font-size:12px; color:var(--cg-muted); }
.estimate-section { padding:40px; border-radius:20px; background:var(--cg-panel); }
.estimate-diagram { display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr; gap:14px; margin:32px 0 0; align-items:center; }
.estimate-diagram>div { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; min-height:175px; justify-content:center; padding:22px 14px; background:var(--cg-paper); border-radius:14px; }
.estimate-diagram svg { color:var(--cg-accent); }
.estimate-diagram strong { font-size:17px; }
.estimate-diagram span { font-size:15px; color:var(--cg-muted); }
.estimate-diagram>b { color:var(--cg-accent); font-weight:400; text-align:center; }
.estimate-total { display:flex; align-items:center; gap:18px; padding:24px; margin-top:16px; background:var(--cg-tint); border-radius:14px; }
.estimate-total svg { color:var(--cg-accent); }
.estimate-total p { margin:0; }
.estimate-total strong { font-size:21px; }
.estimate-total span { display:block; font-size:16px; margin-top:4px; }
.approval-note { padding:24px 0 0; }
.approval-note p { font-size:16px; margin:8px 0 0; }
.repair-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.room-photo { border-radius:20px; overflow:hidden; background:var(--cg-panel); }
.room-photo img { width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; display:block; }
.room-photo figcaption { padding:12px 20px; font-size:12px; color:var(--cg-muted); }
.repair-note { display:flex; align-items:flex-start; gap:14px; margin:24px 0; }
.repair-note p { margin:0; font-size:17px; }
.repair-note svg { color:var(--cg-accent); }
.text-action { display:inline-flex; align-items:center; gap:24px; font-weight:700; color:var(--cg-accent); padding:10px 0; }
.visual-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; padding:40px 0 60px; border-top:1px solid var(--cg-line); }
.visual-faq h2 { font-size:30px; }
.visual-faq summary { padding-right:36px; position:relative; list-style:none; }
.visual-faq summary::-webkit-details-marker { display:none; }
.visual-faq summary::after { content:"＋"; position:absolute; right:0; top:0; color:var(--cg-accent); transition:transform .3s ease; }
.visual-faq details[open] summary::after { transform:rotate(45deg); }
.visual-faq details:first-child { border-top:1px solid var(--cg-line); }
.visual-next { background:var(--cg-panel); border-radius:20px; padding:40px; display:flex; justify-content:space-between; align-items:center; gap:40px; }
.visual-next h2 { margin:16px 0; font-size:28px; }
.visual-next p { max-width:36em; margin-bottom:0; font-size:16px; }
.visual-next>div>svg { color:var(--cg-accent); }
.visual-next .visual-button { flex-shrink:0; }
.visual-updated { margin-top:26px; }
.cleaning-guide .related { background:transparent; border-top:1px solid var(--cg-line); border-radius:0; padding:32px 0 0; }
.cleaning-guide .related>div { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cleaning-guide .related a { background:var(--cg-panel); }
.service-hero .hero-photo { aspect-ratio:3/2; }
.service-hero .hero-photo img { object-fit:contain; }
.service-hero h1 { font-size:clamp(30px,3.2vw,42px); }
.context-photo img { aspect-ratio:16/9; }
.symptom-guide,.approval-flow { background:var(--cg-panel); border-radius:20px; padding:30px; }
.symptom-row { display:flex; align-items:center; gap:22px; padding:24px 0; border-bottom:1px solid var(--cg-line); }
.symptom-row svg { color:var(--cg-accent); }
.symptom-row h3 { font-size:24px; margin:0 0 6px; }
.symptom-row p,.symptom-foot { font-size:16px; margin:0; }
.symptom-foot { padding-top:22px; color:var(--cg-muted); }
.approval-flow ol { list-style:none; padding:0; margin:0; }
.approval-flow li { display:flex; gap:16px; align-items:flex-start; padding:22px 0; }
.approval-flow li+li { border-top:1px solid var(--cg-line); }
.approval-flow li>span { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--cg-tint); color:var(--cg-accent); font-weight:700; }
.approval-flow strong { font-size:19px; }
.approval-flow li p { font-size:15px; margin:8px 0 0; color:var(--cg-muted); }
/* Entrance sequences play once; no permanent moving text or scroll interception. */
@keyframes guide-enter { from { opacity:.5; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes guide-photo { from { transform:scale(1.07); } to { transform:scale(1); } }
@media(prefers-reduced-motion:no-preference) {
  html:not([data-motion="off"]) .hero-copy>* { animation:guide-enter .65s both; }
  html:not([data-motion="off"]) .hero-copy h1 { animation-delay:.08s; }
  html:not([data-motion="off"]) .hero-copy .hero-lead { animation-delay:.16s; }
  html:not([data-motion="off"]) .hero-copy .visual-button { animation-delay:.24s; }
  html:not([data-motion="off"]) .hero-photo img { animation:guide-photo 1.1s ease-out both; }
  html:not([data-motion="off"]) .arrived { animation:guide-enter .65s ease-out both; }
  html:not([data-motion="off"]) .arrived .estimate-diagram>div { animation:guide-enter .6s both; }
  html:not([data-motion="off"]) .arrived .estimate-diagram>div:nth-of-type(2) { animation-delay:.12s; }
  html:not([data-motion="off"]) .arrived .estimate-diagram>div:nth-of-type(3) { animation-delay:.24s; }
  html:not([data-motion="off"]) .visual-faq details[open]>p { animation:guide-enter .25s both; }
  .filter-photo img,.room-photo img { transition:transform .65s ease; }
}
html[data-motion="off"] .cleaning-guide *,html[data-motion="off"] .cleaning-guide *::before,html[data-motion="off"] .cleaning-guide *::after { animation:none!important; transition:none!important; }
@media(prefers-reduced-motion:reduce) { .cleaning-guide *,.cleaning-guide *::before,.cleaning-guide *::after { animation:none!important; transition:none!important; } }
@media(max-width:1023px) {
  .cleaning-hero { gap:24px; grid-template-columns:1fr 1fr; }
  .visual-steps a { padding:18px 10px; gap:8px; font-size:14px; }
  .equipment-section,.repair-section { gap:28px; }
  .visual-next { gap:24px; }
}
@media(max-width:767px) {
  .cleaning-guide .shell { padding-inline:20px; }
  .visual-tools { font-size:12px; flex-wrap:wrap; padding-bottom:20px; }
  .motion-switch { font-size:12px; padding:8px 12px; }
  .cleaning-hero { grid-template-columns:1fr; gap:28px; padding-bottom:28px; }
  .cleaning-hero h1 { font-size:clamp(28px,7.2vw,36px); margin-bottom:16px; }
  .hero-lead { margin-bottom:22px; }
  .hero-photo { aspect-ratio:1.2; }
  .hero-photo figcaption { padding:60px 18px 18px; }
  .hero-photo figcaption span { font-size:16px; }
  .hero-photo small { font-size:11px; }
  .guide-summary { display:block; padding:24px; }
  .summary-icon { margin-bottom:12px; }
  .guide-summary h2 { font-size:22px; }
  .visual-steps { grid-template-columns:1fr; margin-bottom:0; }
  .visual-steps a { font-size:17px; padding:18px 4px; gap:18px; }
  .visual-steps a+a { border-left:0; border-top:1px solid var(--cg-line); }
  .visual-section { padding:40px 0; }
  .equipment-section,.repair-section { grid-template-columns:1fr; gap:28px; }
  .visual-number { font-size:36px; margin-bottom:18px; }
  .visual-section h2 { font-size:25px; }
  .estimate-section { padding:28px 22px; }
  .estimate-diagram { grid-template-columns:1fr; gap:6px; margin-top:24px; }
  .estimate-diagram>div { min-height:0; padding:20px; gap:8px; }
  .estimate-diagram>b { line-height:1.4; }
  .estimate-total { padding:20px; align-items:flex-start; flex-direction:column; gap:12px; }
  .estimate-total strong { font-size:20px; }
  .visual-faq { grid-template-columns:1fr; gap:10px; padding:32px 0; }
  .visual-faq h2 { font-size:26px; }
  .visual-next { flex-direction:column; align-items:flex-start; padding:26px; gap:24px; }
  .visual-next h2 { font-size:25px; }
  .visual-next .visual-button { width:100%; }
  .cleaning-guide .related>div { grid-template-columns:1fr; }
}
/* The approved homepage uses a fixed light theme; service guides follow it. */

/* Keep illustrations and approval steps readable on narrow screens. */
.hero-copy, .cleaning-hero > *, .equipment-section > *, .repair-section > *, .visual-faq > *, .visual-next > * { min-width: 0; }
.visual-tools { font-size: 14px; }
.visual-button { line-height: 1.6; }
.hero-photo small, .filter-photo small, .room-photo figcaption { font-size: 14px; line-height: 1.65; }
.text-action { min-height: 44px; }
.approval-flow li p { font-size: 16px; }
.visual-faq summary { min-height: 44px; line-height: 1.8; }
@media (min-width: 768px) and (max-width: 980px) {
  .cleaning-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .visual-next { align-items: flex-start; flex-direction: column; }
  .visual-faq { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 28px; }
  .estimate-section { padding: 30px; }
}
@media (max-width: 767px) {
  .visual-tools { font-size: 14px; padding: 2px 0 16px; gap: 8px; }
  .motion-switch { font-size: 14px; min-height: 44px; }
  .cleaning-hero { gap: 24px; }
  .hero-copy .eyebrow { font-size: 16px; margin-bottom: 12px; }
  .hero-lead { font-size: 17px; line-height: 1.85; margin-bottom: 20px; }
  .hero-copy .visual-button { width: 100%; min-height: 54px; }
  .hero-photo { aspect-ratio: 8 / 5; }
  .service-hero .hero-photo { aspect-ratio: 3 / 2; }
  .hero-photo small { font-size: 13px; }
  .guide-summary { padding: 22px; }
  .guide-summary .answer { font-size: 17px; line-height: 1.85; }
  .visual-section p { font-size: 17px; line-height: 1.85; }
  .visual-steps a { font-size: 17px; min-height: 56px; padding-block: 16px; }
  .visual-section h2 { font-size: 25px; line-height: 1.6; }
  .filter-photo figcaption { padding: 22px; }
  .filter-photo figcaption strong { font-size: 18px; }
  .filter-photo figcaption span { font-size: 16px; }
  .estimate-diagram strong { font-size: 18px; }
  .estimate-diagram span { font-size: 16px; }
  .visual-next { padding: 24px; gap: 20px; }
  .visual-next h2 { font-size: 25px; }
  .visual-next p { font-size: 17px; }
  .symptom-guide, .approval-flow { padding: 22px; }
  .symptom-row { gap: 16px; }
  .symptom-row h3 { font-size: 22px; }
  .symptom-row svg { width: 36px; height: 36px; }
  .approval-flow strong { font-size: 18px; }
  .approval-flow li p { font-size: 16px; }
}
@media (max-width: 360px) {
  .cleaning-guide .shell { padding-inline: 16px; }
  .guide-summary, .estimate-section, .symptom-guide, .approval-flow { padding: 20px; }
  .visual-button { padding-inline: 18px; gap: 12px; }
  .visual-section h2 { font-size: 24px; }
}
/* Related links follow the shared service-guide accent for contrast. */
.cleaning-guide .guide-topic-links a { color: var(--cg-accent); }

/* Shared shape, type ramp and stable image framing from the approved home. */
.cleaning-hero h1,.service-hero h1{font-size:46px;letter-spacing:-.035em}
.hero-photo,.filter-photo,.room-photo,.estimate-section,.guide-summary,.symptom-guide,.approval-flow,.visual-next{border-radius:24px}
.service-illustration{aspect-ratio:1.22;background:var(--cg-panel)}
.service-illustration img{object-fit:cover;object-position:center 20%}
.service-hero .service-illustration{aspect-ratio:1.22}.service-hero .service-illustration img{object-fit:cover}
.visual-section{scroll-margin-top:110px}.visual-section h2{font-size:32px}
.visual-button{font-size:16px;min-height:56px}
.cleaning-guide .luce-header a:focus-visible,.cleaning-guide .luce-header summary:focus-visible{outline:3px solid #ffb184}
@media(max-width:767px){.cleaning-hero h1,.service-hero h1{font-size:32px}.service-illustration,.service-hero .service-illustration{aspect-ratio:1.2}.visual-section h2{font-size:28px}.visual-section{scroll-margin-top:92px}}
@media(max-width:360px){.cleaning-hero h1,.service-hero h1{font-size:30px}.visual-section h2{font-size:25px}}