/* =========================================================================
 *  Shared inner-page components (loaded on any custom page template whose
 *  <main> has class="tpl-inner"): cards, FAQ accordion, responsive grids,
 *  animated cl2/cl3 icons. Brand tokens, .eyebrow, .btn/.fx-btn and the
 *  reveal-on-scroll come from critical.css + site.js (global).
 * ========================================================================= */

/* ---- Animated icon badges (from the design) ---- */
.tpl-inner .cl2-ic { overflow: visible; animation: cl2-float 4.5s ease-in-out infinite; }
.tpl-inner .cl2-doc .cl2-paper { transform-box: view-box; transform-origin: 24px 41px; animation: cl2-rock 5s ease-in-out infinite; }
.tpl-inner .cl2-doc .cl2-line { stroke-dasharray: 18; }
.tpl-inner .cl2-doc .cl2-d1 { animation: cl2-type 4s ease-in-out infinite; }
.tpl-inner .cl2-doc .cl2-d2 { animation: cl2-type 4s ease-in-out infinite .3s; }
.tpl-inner .cl2-doc .cl2-d3 { animation: cl2-type 4s ease-in-out infinite .6s; }
.tpl-inner .cl2-doc .cl2-stamp { transform-box: view-box; transform-origin: 24px 30px; opacity: 0; animation: cl2-stamp 4s ease-out infinite; }
.tpl-inner .cl2-shield .cl2-ring { transform-box: view-box; transform-origin: 24px 24px; animation: cl2-spin 8s linear infinite; }
.tpl-inner .cl2-shield .cl2-guard { transform-box: view-box; transform-origin: 24px 24px; animation: cl2-guard 3.4s ease-in-out infinite; }
.tpl-inner .cl2-shield .cl2-check { transform-box: view-box; transform-origin: 24px 24px; stroke-dasharray: 30; animation: cl2-checkb 3.4s ease-in-out infinite; }
.tpl-inner .cl3-scale .cl3-beam { transform-box: view-box; transform-origin: 24px 13px; animation: cl3-tip 4s ease-in-out infinite; }
.tpl-inner .cl3-scale .cl3-panL { transform-box: view-box; transform-origin: 12px 13px; animation: cl3-panl 4s ease-in-out infinite; }
.tpl-inner .cl3-scale .cl3-panR { transform-box: view-box; transform-origin: 36px 13px; animation: cl3-panr 4s ease-in-out infinite; }
.tpl-inner .cl3-qm .cl3-qdot { animation: cl3-blink 2s ease-in-out infinite; }
.tpl-inner .cl3-wrench { animation: cl3-wiggle 3.5s ease-in-out infinite; }
.tpl-inner .cl3-pin { animation: cl3-drop 3s ease-in-out infinite; }
.tpl-inner .cl3-pin .cl3-wave { transform-box: view-box; transform-origin: 24px 40px; animation: cl3-wave 3s ease-out infinite; }
.tpl-inner .cl3-alert { animation: cl3-apulse 2.4s ease-in-out infinite; }
.tpl-inner .cl3-alert .cl3-abang { animation: cl3-blink 1.6s ease-in-out infinite; }
.tpl-inner .cl3-clock .cl3-hand { transform-box: view-box; transform-origin: 24px 24px; animation: cl2-spin 6s linear infinite; }
.tpl-inner .cl3-clock .cl3-hand2 { transform-box: view-box; transform-origin: 24px 24px; animation: cl2-spin 24s linear infinite; }
.tpl-inner .cl2-search .cl2-radar { transform-box: view-box; transform-origin: 21px 21px; animation: cl2-spin 2.4s linear infinite; }
.tpl-inner .cl4-cog .cl4-gear { transform-box: view-box; transform-origin: 24px 24px; animation: cl2-spin 9s linear infinite; }
.tpl-inner .cl3-key .cl3-keybody { transform-box: view-box; transform-origin: 17px 31px; animation: cl3-turn 4.5s ease-in-out infinite; }

@keyframes cl2-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cl2-spin { to { transform: rotate(360deg); } }
@keyframes cl2-rock { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes cl2-type { 0% { stroke-dashoffset: 18; } 28% { stroke-dashoffset: 0; } 62% { stroke-dashoffset: 0; } 80%,100% { stroke-dashoffset: -18; } }
@keyframes cl2-stamp { 0%,52% { opacity: 0; transform: scale(0) rotate(-12deg); } 62% { opacity: 1; transform: scale(1.3) rotate(0deg); } 70% { transform: scale(.9); } 78% { transform: scale(1.06); } 86% { transform: scale(1); } 96% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@keyframes cl2-guard { 0%,100% { transform: scale(1); } 10% { transform: scale(.93); } 20% { transform: scale(1.07); } 32% { transform: scale(1); } }
@keyframes cl2-checkb { 0% { stroke-dashoffset: 30; transform: scale(1); } 22% { stroke-dashoffset: 0; } 32% { transform: scale(1.18); } 44% { transform: scale(1); } 82% { stroke-dashoffset: 0; transform: scale(1); } 100% { stroke-dashoffset: 30; } }
@keyframes cl3-tip { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes cl3-panl { 0%,100% { transform: translateY(5px); } 50% { transform: translateY(-5px); } }
@keyframes cl3-panr { 0%,100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
@keyframes cl3-drop { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(2px); } }
@keyframes cl3-wave { 0% { transform: scaleX(.4); opacity: 0; } 30% { opacity: .6; } 100% { transform: scaleX(1.6); opacity: 0; } }
@keyframes cl3-blink { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes cl3-wiggle { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes cl3-apulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes cl3-turn { 0%,40% { transform: rotate(0deg); } 60%,100% { transform: rotate(-90deg); } }

/* ---- Card lift on hover (design's style-hover) ---- */
.tpl-inner .wi-lift { transition: transform .3s ease, box-shadow .3s ease; }
.tpl-inner .wi-lift:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -28px rgba(30,30,30,0.4); }

/* ---- Dark process-step card lift (design's style-hover on how-we-build) ---- */
.tpl-inner .step-lift { transition: transform .3s ease, border-color .3s ease; }
.tpl-inner .step-lift:hover { transform: translateY(-6px); border-color: rgba(184,168,139,0.6); }
.tpl-inner .step-lift.is-featured:hover { border-color: #b8a88b; }

/* ---- Vertical numbered step rows (commercial how-we-build) ---- */
.tpl-inner .step-row { background: rgba(244,238,227,0.05); transition: background .25s ease; }
.tpl-inner .step-row:hover { background: rgba(244,238,227,0.09); }
.tpl-inner .step-row.is-featured { background: rgba(184,168,139,0.16); }
.tpl-inner .step-row.is-featured:hover { background: rgba(184,168,139,0.22); }

/* ---- Assessment form fields (Free Assessment fallback form) ---- */
.tpl-inner .pi-field { transition: border-color .2s; }
.tpl-inner .pi-field:focus { border-color: #b8a88b !important; outline: none; }

/* ---- FAQ accordion ---- */
.tpl-inner .faq details { border-bottom: 1px solid rgba(30,30,30,0.14); }
.tpl-inner .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 4px; font-size: clamp(18px,2vw,22px); font-weight: 600; letter-spacing: -0.01em; color: var(--cleud-ink); transition: color .2s ease; }
.tpl-inner .faq summary::-webkit-details-marker { display: none; }
.tpl-inner .faq summary:hover { color: var(--cleud-accent-deep); }
.tpl-inner .faq .faq-plus { position: relative; flex-shrink: 0; width: 26px; height: 26px; transition: transform .35s cubic-bezier(.2,.8,.3,1); }
.tpl-inner .faq .faq-plus::before, .tpl-inner .faq .faq-plus::after { content: ""; position: absolute; background: var(--cleud-gold); border-radius: 2px; }
.tpl-inner .faq .faq-plus::before { left: 0; top: 12px; width: 26px; height: 2.4px; }
.tpl-inner .faq .faq-plus::after { left: 12px; top: 0; width: 2.4px; height: 26px; transition: transform .35s cubic-bezier(.2,.8,.3,1); }
.tpl-inner .faq details[open] .faq-plus { transform: rotate(90deg); }
.tpl-inner .faq details[open] .faq-plus::after { transform: scaleY(0); }
.tpl-inner .faq .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.tpl-inner .faq .faq-body > * { overflow: hidden; min-height: 0; margin: 0; }
.tpl-inner .faq details[open] .faq-body { grid-template-rows: 1fr; }
.tpl-inner .faq details[open] .faq-body > p { padding: 0 4px 30px; }

/* ---- Responsive grids ---- */
@media (max-width: 860px) {
	.tpl-inner .grid2, .tpl-inner .grid3, .tpl-inner .cmp3 { grid-template-columns: 1fr !important; }
	/* Numbered how-to-apply timeline: drop the horizontal connector once steps stack. */
	.tpl-inner .step-timeline-line { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.tpl-inner .cl2-ic, .tpl-inner .cl2-ic *, .tpl-inner .cl3-scale *, .tpl-inner .cl3-pin, .tpl-inner .cl3-pin *, .tpl-inner .cl3-wrench, .tpl-inner .cl3-qm *, .tpl-inner .cl3-alert, .tpl-inner .cl3-alert *, .tpl-inner .cl3-clock *, .tpl-inner .cl2-search *, .tpl-inner .cl4-cog *, .tpl-inner .cl3-key * { animation: none !important; }
	.tpl-inner .wi-lift:hover { transform: none; box-shadow: none; }
	.tpl-inner .step-lift:hover { transform: none; }
}

/* ---- Legal / prose pages (Privacy, Terms, Cookies) — template-legal.php ---- */
.tpl-legal .legal-body { color: #3a352c; font-size: 16px; line-height: 1.78; }
.tpl-legal .legal-body > *:first-child { margin-top: 0; }
.tpl-legal .legal-body h2 { font-family: var(--cleud-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--cleud-ink); margin: 46px 0 14px; }
.tpl-legal .legal-body h3 { font-size: clamp(17px, 1.9vw, 20px); font-weight: 600; color: var(--cleud-ink); margin: 30px 0 10px; }
.tpl-legal .legal-body p { margin: 0 0 18px; }
.tpl-legal .legal-body ul, .tpl-legal .legal-body ol { margin: 0 0 20px; padding-left: 22px; }
.tpl-legal .legal-body li { margin: 0 0 9px; }
.tpl-legal .legal-body li::marker { color: var(--cleud-accent); }
.tpl-legal .legal-body a { color: var(--cleud-accent-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .2s; }
.tpl-legal .legal-body a:hover { color: var(--cleud-ink); }
.tpl-legal .legal-body strong { color: var(--cleud-ink); font-weight: 600; }
.tpl-legal .legal-body hr { border: 0; border-top: 1px solid var(--cleud-line); margin: 40px 0; }
.tpl-legal .legal-updated { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--cleud-line); font-size: 14px; color: var(--cleud-muted); }