/* ═══════════════════════════════════════════════════════════════════════
   houdini.digital: layer two. MotionSites "FAQ CTA" translated to the gold
   maison tokens and applied to the blocks layer one did not reach:
   the closing CTA, the FAQ, pricing, process, numbers, and the footer.
   Adds rules only. Removes nothing. Rollback: delete the <link>.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── animated blob gradient, registered properties so they interpolate ── */
@property --h-x1{syntax:'<percentage>';inherits:false;initial-value:10%}
@property --h-y1{syntax:'<percentage>';inherits:false;initial-value:10%}
@property --h-x2{syntax:'<percentage>';inherits:false;initial-value:90%}
@property --h-y2{syntax:'<percentage>';inherits:false;initial-value:10%}
@property --h-x3{syntax:'<percentage>';inherits:false;initial-value:10%}
@property --h-y3{syntax:'<percentage>';inherits:false;initial-value:90%}
@property --h-x4{syntax:'<percentage>';inherits:false;initial-value:90%}
@property --h-y4{syntax:'<percentage>';inherits:false;initial-value:90%}
@property --h-x5{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --h-y5{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --h-s1{syntax:'<percentage>';inherits:false;initial-value:55%}
@property --h-s2{syntax:'<percentage>';inherits:false;initial-value:55%}
@property --h-s3{syntax:'<percentage>';inherits:false;initial-value:55%}
@property --h-s4{syntax:'<percentage>';inherits:false;initial-value:55%}
@property --h-s5{syntax:'<percentage>';inherits:false;initial-value:65%}

/* ── closing CTA: the gradient card ────────────────────────────────────
   The section keeps its grid ::before and gold line ::after underneath.
   The card is the inner .cta-in, so the form below it is untouched. */
.cta .cta-in{
  border-radius:clamp(20px,2.6vw,34px);
  padding:clamp(64px,9vw,112px) clamp(22px,4vw,56px)!important;
  margin-bottom:clamp(28px,4vw,48px);
  overflow:hidden;isolation:isolate;
  border:1px solid rgba(184,153,104,.22);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(244,239,230,.08);
  background-color:#1A1408;
  background-image:
    radial-gradient(circle at var(--h-x1) var(--h-y1),rgba(212,185,138,.55) 0,transparent var(--h-s1)),
    radial-gradient(circle at var(--h-x2) var(--h-y2),rgba(123,47,255,.42) 0,transparent var(--h-s2)),
    radial-gradient(circle at var(--h-x3) var(--h-y3),rgba(0,71,255,.34) 0,transparent var(--h-s3)),
    radial-gradient(circle at var(--h-x4) var(--h-y4),rgba(184,153,104,.50) 0,transparent var(--h-s4)),
    radial-gradient(circle at var(--h-x5) var(--h-y5),rgba(0,245,255,.16) 0,transparent var(--h-s5));
  animation:
    h-blob1 9s ease-in-out infinite, h-blob2 11s ease-in-out infinite,
    h-blob3 10s ease-in-out infinite, h-blob4 12s ease-in-out infinite,
    h-blob5 8s ease-in-out infinite,
    h-size1 7s ease-in-out infinite, h-size2 8.4s ease-in-out infinite,
    h-size3 7.6s ease-in-out infinite, h-size4 9.2s ease-in-out infinite,
    h-size5 6s ease-in-out infinite;
}
/* a dark veil keeps the type readable on top of the blobs */
.cta .cta-in::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(11,11,12,.55),rgba(11,11,12,.82) 75%)}
.cta .cta-in h2{text-shadow:0 2px 40px rgba(0,0,0,.55)}
.cta .cta-in .lede,.cta .cta-in p.body{text-shadow:0 1px 18px rgba(0,0,0,.5)}
/* primary button in the card matches the theme's heavy shadowed pill */
.cta .cta-actions .btn-gold{border-radius:14px!important;box-shadow:0 14px 30px -10px rgba(0,0,0,.6),0 0 0 1px rgba(244,239,230,.08);
  transition:transform .2s ease,box-shadow .2s ease}
.cta .cta-actions .btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(0,0,0,.7),0 0 0 1px rgba(244,239,230,.12)}
.cta .cta-actions .btn-line{border-radius:14px!important;background:rgba(11,11,12,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

@keyframes h-blob1{0%,100%{--h-x1:5%;--h-y1:5%}25%{--h-x1:45%;--h-y1:20%}50%{--h-x1:30%;--h-y1:55%}75%{--h-x1:0%;--h-y1:30%}}
@keyframes h-blob2{0%,100%{--h-x2:95%;--h-y2:5%}33%{--h-x2:55%;--h-y2:35%}66%{--h-x2:80%;--h-y2:65%}}
@keyframes h-blob3{0%,100%{--h-x3:5%;--h-y3:95%}40%{--h-x3:45%;--h-y3:65%}70%{--h-x3:25%;--h-y3:100%}}
@keyframes h-blob4{0%,100%{--h-x4:95%;--h-y4:95%}30%{--h-x4:60%;--h-y4:70%}60%{--h-x4:100%;--h-y4:50%}}
@keyframes h-blob5{0%,100%{--h-x5:50%;--h-y5:50%}25%{--h-x5:70%;--h-y5:30%}50%{--h-x5:40%;--h-y5:70%}75%{--h-x5:30%;--h-y5:40%}}
@keyframes h-size1{0%,100%{--h-s1:45%}50%{--h-s1:80%}}
@keyframes h-size2{0%,100%{--h-s2:45%}50%{--h-s2:85%}}
@keyframes h-size3{0%,100%{--h-s3:45%}50%{--h-s3:78%}}
@keyframes h-size4{0%,100%{--h-s4:45%}50%{--h-s4:82%}}
@keyframes h-size5{0%,100%{--h-s5:50%}50%{--h-s5:85%}}

/* ── FAQ: the theme's accordion, on the native details/summary ──────── */
.faq{gap:12px!important}
.faq details{
  border-radius:12px!important;border:1px solid rgba(184,153,104,.14);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.faq details:hover{border-color:rgba(184,153,104,.32)}
.faq details[open]{border-color:rgba(184,153,104,.45);box-shadow:0 10px 28px -12px rgba(0,0,0,.6);background:var(--noir)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  border-radius:12px;transition:color .2s ease}
/* chevron replaces the plus, and turns when open */
.faq summary::after{
  content:""!important;width:9px;height:9px;flex-shrink:0;
  border-right:1.5px solid var(--or);border-bottom:1.5px solid var(--or);
  transform:rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.3,1);margin-top:-4px;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
/* answer slides down; grid-rows animation needs no fixed height */
.faq details>p{display:block}
@supports (grid-template-rows:0fr){
  .faq details:not([open])>p{display:none}
  .faq details[open]>p{animation:h-open .35s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes h-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── pricing capability cards and process steps: rounded, lift on hover ── */
.cap{border-radius:16px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.3,1),background .4s ease,box-shadow .5s ease}
.cap:hover{transform:translateY(-4px);box-shadow:0 24px 50px -34px rgba(0,0,0,.8)}
.steps{gap:12px!important;background:transparent!important;border:0!important}
.step{border-radius:16px;border:1px solid var(--hair-soft);transition:transform .5s cubic-bezier(.2,.7,.3,1),background .4s ease,box-shadow .5s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 24px 50px -34px rgba(0,0,0,.8)}

/* ── numbers: rounded plates, counters left to the page's own script ── */
.fig{border-radius:14px;overflow:hidden}
.fig::before{border-radius:14px 14px 0 0}

/* ── footer: the theme's four column grid and quiet bottom bar ──────── */
footer{border-top:1px solid rgba(184,153,104,.14);
  background:linear-gradient(180deg,var(--obsidian),#0D0C0E)}
footer .f-top{display:grid!important;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;align-items:start}
footer .f-links{display:contents}
footer .f-col a{transition:color .2s ease,transform .2s ease}
footer .f-col a:hover{transform:translateX(3px)}
footer .f-bot{opacity:.85}
@media (max-width:900px){
  footer .f-top{grid-template-columns:1fr 1fr}
  .cta .cta-in{border-radius:18px;padding:52px 18px!important}
}
@media (max-width:520px){
  footer .f-top{grid-template-columns:1fr}
}

/* ── layer one's entrance class, extended to these blocks by revamp2.js ── */
.cap.pz,.step.pz,.fig.pz,.faq details.pz{will-change:transform,opacity}

/* ── reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cta .cta-in{animation:none}
  .faq details[open]>p{animation:none}
  .cap,.step,.fig{transition:none}
}

/* popular searches band, added 5 Sep 2026 for internal linking */
footer .f-seo{grid-column:1/-1;margin-top:34px;padding-top:26px;border-top:1px solid rgba(184,153,104,.14)}
footer .f-seo h5{margin:0 0 13px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#B89968}
footer .f-seo-links{display:flex;flex-wrap:wrap;gap:8px 9px}
footer .f-seo-links a{font-size:12px;line-height:1.45;opacity:.72;border:1px solid rgba(184,153,104,.18);border-radius:999px;padding:6px 12px;transition:opacity .2s ease,border-color .2s ease,color .2s ease}
footer .f-seo-links a:hover{opacity:1;border-color:#B89968;color:#B89968;transform:none}
@media(max-width:600px){
  footer .f-seo-links{display:block;line-height:1.9}
  footer .f-seo-links a{display:inline;border:0;border-radius:0;padding:0;font-size:12px;opacity:.66}
  footer .f-seo-links a::after{content:"·";margin:0 7px;color:rgba(184,153,104,.45)}
  footer .f-seo-links a:last-child::after{content:none}
}