/* DDL /thank-you/ page. Mobile first: base = phones, min-width = desktop.
   Colours and fonts are the site's own (espresso, gold, Cormorant + Manrope). */
.ty-page{background:#170f0a;color:#fffaf1}
.ty-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:calc(100svh - 110px);padding:32px 16px 40px;background:#170f0a}
.ty-hero::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(18,11,8,.74)}
.ty-hero-bg{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%;margin:0;border:0;box-shadow:none}
.ty-card{position:relative;z-index:2;width:min(640px,100%);box-sizing:border-box;padding:48px 24px 32px;text-align:center;background:#241711;border:1px solid rgba(215,189,138,.4);box-shadow:0 38px 110px rgba(0,0,0,.45)}
/* Hairline gold rule, echoing the section treatment used across the site. */
.ty-card::before{content:"";position:absolute;top:0;left:50%;width:64px;height:2px;background:#c7a05b;transform:translateX(-50%)}
.ty-mark{color:#d7bd8a;margin-bottom:10px;line-height:0}
.ty-ring{stroke-dasharray:145;stroke-dashoffset:145;animation:tyRing 700ms cubic-bezier(.22,1,.36,1) forwards}
.ty-tick{stroke-dasharray:40;stroke-dashoffset:40;animation:tyTick 420ms cubic-bezier(.22,1,.36,1) 420ms forwards}
@keyframes tyRing{to{stroke-dashoffset:0}}
@keyframes tyTick{to{stroke-dashoffset:0}}
.ty-card .eyebrow{margin:0 0 12px;color:#d7bd8a}
.ty-card h1{margin:0 0 12px;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(32px,8vw,46px);font-weight:400;line-height:1.02;letter-spacing:-.022em;color:#fffaf1;text-wrap:balance}
.ty-lead{margin:0 auto 16px;max-width:46ch;font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.7;color:rgba(255,250,241,.9)}
.ty-steps{display:none;margin:0 0 14px;padding:16px 0 0;list-style:none;text-align:left;border-top:1px solid rgba(215,189,138,.25);counter-reset:ty}
.ty-steps li{position:relative;margin:0 0 9px;padding-left:36px;font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.6;color:rgba(255,250,241,.82);counter-increment:ty}
.ty-steps li::before{content:counter(ty);position:absolute;left:0;top:1px;width:24px;height:24px;border:1px solid #d7bd8a;border-radius:50%;font-size:12px;font-weight:600;line-height:22px;text-align:center;color:#d7bd8a}
.ty-steps strong{color:#fffaf1;font-weight:600}
.ty-meta{margin:0 0 16px;padding-top:14px;border-top:1px solid rgba(215,189,138,.25);font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-size:14px;color:rgba(255,250,241,.78)}
.ty-meta a{color:#d7bd8a;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(215,189,138,.5);white-space:nowrap}
.ty-meta a:hover{color:#fffaf1}
.ty-card .ty-home{display:block;box-sizing:border-box;width:100%;min-width:0;box-shadow:none}
.ty-card .ty-home:focus-visible,.ty-meta a:focus-visible{outline:2px solid #d7bd8a;outline-offset:3px}
.ty-countdown{margin:12px 0 0;font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-size:13px;letter-spacing:.03em;color:rgba(255,250,241,.78)}
.ty-progress{margin:12px auto 0;height:2px;background:rgba(215,189,138,.22);overflow:hidden}
.ty-progress span{display:block;height:100%;width:100%;background:#d7bd8a;transform-origin:left center;animation:tyFill 10s linear forwards}
@keyframes tyFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Site-wide ".v19-professional .section p" style rules set a dark text colour with
   high specificity. These win on this page only, so the copy reads on the dark card. */
.v19-professional .ty-page .ty-card .eyebrow{color:#d7bd8a!important;-webkit-text-fill-color:#d7bd8a!important}
.v19-professional .ty-page .ty-card h1{color:#fffaf1!important;-webkit-text-fill-color:#fffaf1!important}
.v19-professional .ty-page .ty-card .ty-lead{color:rgba(255,250,241,.92)!important;-webkit-text-fill-color:rgba(255,250,241,.92)!important}
.v19-professional .ty-page .ty-card .ty-steps li{color:rgba(255,250,241,.84)!important;-webkit-text-fill-color:rgba(255,250,241,.84)!important}
.v19-professional .ty-page .ty-card .ty-steps li::before{color:#d7bd8a!important;-webkit-text-fill-color:#d7bd8a!important}
.v19-professional .ty-page .ty-card .ty-steps strong{color:#fffaf1!important;-webkit-text-fill-color:#fffaf1!important}
.v19-professional .ty-page .ty-card .ty-meta,.v19-professional .ty-page .ty-card .ty-countdown{color:rgba(255,250,241,.8)!important;-webkit-text-fill-color:rgba(255,250,241,.8)!important}
.v19-professional .ty-page .ty-card .ty-meta a{color:#d7bd8a!important;-webkit-text-fill-color:#d7bd8a!important}
/* The visitor has just enquired, so the floating "Book appointment" bar is noise here. */
body:has(.ty-page) .mobile-book{display:none!important}
@media (min-width:761px){
  .ty-hero{padding:clamp(28px,5vh,56px) 56px clamp(28px,5vh,56px)}
  .ty-card{padding:36px 56px 28px}
  .ty-card .ty-home{display:inline-block;width:auto;min-width:240px}
}
/* The three steps are extra: they show only when the screen is tall enough that the countdown stays in view. */
@media (min-width:761px) and (min-height:860px),(min-height:1000px){.ty-steps{display:block}}
@media (prefers-reduced-motion:reduce){
  .ty-ring,.ty-tick{animation:none;stroke-dashoffset:0}
  .ty-progress span{animation:none;transform:none}
}