/* tp-hero-fullbleed-video */

/* Hero video is a true full-bleed layer at every breakpoint. */
html body .tp-hero.tp-hero--fullbleed{
 position:relative!important;
 width:100vw!important;
 max-width:none!important;
 min-height:clamp(560px,100svh,820px)!important;
 margin:0 calc(50% - 50vw)!important;
 padding:clamp(104px,12vh,144px) clamp(20px,6vw,96px) clamp(20px,3vh,32px)!important;
 box-sizing:border-box!important;
 overflow:hidden!important;
 isolation:isolate!important;
 display:flex!important;
 flex-direction:column!important;
 justify-content:flex-end!important;
 align-items:center!important;
 text-align:center!important;
}
html body .tp-hero--fullbleed .tp-hero-video-bg-wrap{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 overflow:hidden!important;
 z-index:-2!important;
}
html body .tp-hero--fullbleed .tp-hero-video-bg{
 display:block!important;
 width:100%!important;
 height:100%!important;
 min-width:100%!important;
 min-height:100%!important;
 max-width:none!important;
 object-fit:cover!important;
 object-position:center center!important;
}
html body .tp-hero--fullbleed .tp-hero-scrim-dark{
 position:absolute!important;
 inset:0!important;
 background:linear-gradient(180deg,rgba(6,7,9,.30) 0%,rgba(6,7,9,0) 22%,rgba(6,7,9,0) 55%,rgba(6,7,9,.55) 78%,rgba(6,7,9,.86) 100%)!important;
}
html body .tp-hero--fullbleed .tp-hero-body,
html body .tp-hero--fullbleed .tp-hero-stats-wrap{
 position:relative!important;
 z-index:1!important;
 width:100%!important;
 max-width:900px!important;
 margin-inline:auto!important;
 text-align:center!important;
}
html body .tp-hero--fullbleed .tp-hero-eyebrow,
html body .tp-hero--fullbleed .tp-hero-h,
html body .tp-hero--fullbleed .tp-hero-sub{color:#FFFFFF!important;text-shadow:0 1px 12px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5)!important;}
html body .tp-hero--fullbleed .tp-hero-h em{color:#E8C876!important;}
html body .tp-hero--fullbleed .tp-hero-body{max-width:820px!important;}
html body .tp-hero--fullbleed .tp-hero-eyebrow{
 font-size:clamp(11px,1vw,13px)!important;
 letter-spacing:.2em!important;
 margin-bottom:10px!important;
}
html body .tp-hero--fullbleed .tp-hero-h{
 max-width:15ch!important;
 margin:0 auto 0!important;
 font-size:clamp(32px,3.6vw,46px)!important;
 line-height:1.1!important;
 text-wrap:balance!important;
 font-weight:500!important;
}

/* Stat row: one tight line, numbers lead, labels small and close beneath —
   no wrap, no stray gap between the heading and the row. */
html body .tp-hero--fullbleed .tp-hero-stats-wrap{
 margin-top:22px!important;
 padding-top:16px!important;
 border-top:1px solid rgba(255,255,255,.22)!important;
}
html body .tp-hero--fullbleed .tp-hero-marks{
 display:flex!important;
 flex-wrap:nowrap!important;
 justify-content:center!important;
 align-items:flex-start!important;
 gap:clamp(18px,4vw,48px)!important;
 list-style:none!important;
 margin:0!important;
 padding:0!important;
}
html body .tp-hero--fullbleed .tp-hero-marks li{
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 gap:3px!important;
 min-width:0!important;
}
html body .tp-hero--fullbleed .tp-hero-marks strong{
 display:block!important;
 font-size:clamp(18px,2vw,24px)!important;
 font-weight:600!important;
 line-height:1!important;
 color:#FFFFFF!important;
 text-shadow:0 1px 8px rgba(0,0,0,.5)!important;
 white-space:nowrap!important;
}
html body .tp-hero--fullbleed .tp-hero-marks strong i{
 font-style:normal!important;
 font-size:60%!important;
 font-weight:500!important;
 margin-left:1px!important;
 opacity:.85!important;
}
html body .tp-hero--fullbleed .tp-hero-marks span{
 display:block!important;
 font-size:clamp(9.5px,.85vw,11px)!important;
 letter-spacing:.08em!important;
 text-transform:uppercase!important;
 color:rgba(255,255,255,.82)!important;
 text-shadow:0 1px 6px rgba(0,0,0,.5)!important;
 white-space:nowrap!important;
}

/* --- Tablet (portrait/landscape, iPad-class): same compact treatment as
     mobile, scaled up — content pinned to the bottom, minimal footprint,
     video dominates the frame. Covers the 601-1024px gap that previously
     fell through to bulkier desktop-ish sizing. --- */
@media (min-width:601px) and (max-width:1024px){
 html body .tp-hero.tp-hero--fullbleed{
  min-height:100svh!important;
  padding:0 clamp(28px,5vw,56px) calc(28px + env(safe-area-inset-bottom,0px))!important;
  justify-content:flex-end!important;
 }
 html body .tp-hero--fullbleed .tp-hero-body{max-width:640px!important;}
 html body .tp-hero--fullbleed .tp-hero-eyebrow{
  font-size:12px!important;
  line-height:1.3!important;
  letter-spacing:.16em!important;
  margin-bottom:10px!important;
 }
 html body .tp-hero--fullbleed .tp-hero-h{
  font-size:clamp(26px,3.6vw,32px)!important;
  line-height:1.15!important;
  max-width:14ch!important;
  margin-bottom:0!important;
  font-weight:500!important;
 }
 html body .tp-hero--fullbleed .tp-hero-stats-wrap{margin-top:18px!important;max-width:560px!important;}
 html body .tp-hero--fullbleed .tp-hero-marks{
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:8px!important;
  padding-top:16px!important;
  margin-top:0!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
 }
 html body .tp-hero--fullbleed .tp-hero-marks li{
  flex:1 1 0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:3px!important;
  min-width:0!important;
 }
 html body .tp-hero--fullbleed .tp-hero-marks strong{
  font-size:20px!important;
  line-height:1!important;
  white-space:nowrap!important;
 }
 html body .tp-hero--fullbleed .tp-hero-marks strong i{font-size:11px!important;}
 html body .tp-hero--fullbleed .tp-hero-marks span{
  display:block!important;
  font-size:9px!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  color:rgba(255,255,255,.8)!important;
  white-space:nowrap!important;
 }
}

/* --- Mobile: minimal footprint, hero content pinned hard to the bottom,
     video visible across almost the entire screen. --- */
@media (max-width:600px){
 html body .tp-hero.tp-hero--fullbleed{
  min-height:92svh!important;
  padding:0 18px calc(16px + env(safe-area-inset-bottom,0px))!important;
  justify-content:flex-end!important;
 }
 html body .tp-hero--fullbleed .tp-hero-video-bg{object-position:52% center!important;}
 html body .tp-hero--fullbleed .tp-hero-eyebrow{
  font-size:9px!important;
  line-height:1.3!important;
  letter-spacing:.14em!important;
  margin-bottom:6px!important;
  white-space:nowrap!important;
 }
 html body .tp-hero--fullbleed .tp-hero-h{
  font-size:clamp(20px,6vw,24px)!important;
  line-height:1.15!important;
  max-width:13ch!important;
  margin-bottom:0!important;
  font-weight:500!important;
 }
 html body .tp-hero--fullbleed .tp-hero-stats-wrap{margin-top:10px!important;}
 html body .tp-hero--fullbleed .tp-hero-marks{
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:4px!important;
  padding-top:10px!important;
  margin-top:0!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
 }
 html body .tp-hero--fullbleed .tp-hero-marks li{
  flex:1 1 0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:2px!important;
  min-width:0!important;
 }
 html body .tp-hero--fullbleed .tp-hero-marks strong{
  font-size:15px!important;
  line-height:1!important;
  white-space:nowrap!important;
 }
 html body .tp-hero--fullbleed .tp-hero-marks strong i{font-size:9px!important;}
 html body .tp-hero--fullbleed .tp-hero-marks span{
  display:block!important;
  font-size:7px!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  color:rgba(255,255,255,.78)!important;
  white-space:nowrap!important;
 }
}

/* Compact-height phones: same idea, even tighter. */
@media (max-width:600px) and (max-height:700px){
 html body .tp-hero.tp-hero--fullbleed{
  padding:0 16px calc(12px + env(safe-area-inset-bottom,0px))!important;
  min-height:88svh!important;
 }
 html body .tp-hero--fullbleed .tp-hero-eyebrow{
  font-size:8px!important;margin-bottom:5px!important;
 }
 html body .tp-hero--fullbleed .tp-hero-h{
  font-size:clamp(18px,5.6vw,21px)!important;
  line-height:1.12!important;
  max-width:13ch!important;
 }
 html body .tp-hero--fullbleed .tp-hero-stats-wrap{margin-top:8px!important;}
 html body .tp-hero--fullbleed .tp-hero-marks{padding-top:8px!important;}
 html body .tp-hero--fullbleed .tp-hero-marks strong{font-size:13px!important;}
 html body .tp-hero--fullbleed .tp-hero-marks span{font-size:6.5px!important;}
}
@media (max-width:340px) and (max-height:620px){
 html body .tp-hero--fullbleed .tp-hero-h{font-size:17px!important;}
}

/* Remove the Elementor shell gap so the video begins at the viewport edge
   and sits behind the header. The header itself gets a persistent readable
   scrim (not fully transparent) so the logo/nav/phone icon stay legible
   against the lighter parts of the video at first paint, not just on scroll. */
html body.home .elementor-element.elementor-element-37d1d65{
 padding:0!important;
 min-height:100svh!important;
 background:transparent!important;
}
@media (max-width:600px){
 html body.home .elementor-element.elementor-element-37d1d65{
  min-height:92svh!important;
 }
}
@media (max-width:600px) and (max-height:700px){
 html body.home .elementor-element.elementor-element-37d1d65{
  min-height:88svh!important;
 }
}
html body.home header#site-header.site-header.skiper38-header.is-home-header{
 background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 70%,rgba(0,0,0,0) 100%)!important;
 background-color:rgba(0,0,0,.001)!important;
 box-shadow:none!important;
 border-color:transparent!important;
}

/* tp-footer-x */

/* The theme footer is a logo above one flat list of ten links, which gives a
   visitor at the end of a page nowhere to go and no reason to act. It is
   hidden rather than removed so the theme keeps working if this is switched
   off. */
#site-footer.site-footer{display:none!important}

/* Every colour below carries !important. The site-wide palette work sets ink
   and link colours with !important for the light pages, and on this dark
   ground that rendered the headings #0E1012 on #0E1012 — invisible — and the
   links in gold at about 2:1. */
.tp-footer{background:#0E1012;color:#FFFFFF;
 font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.tp-footer-inner{max-width:1120px;margin-inline:auto;padding:clamp(48px,6vw,72px) clamp(18px,5vw,40px) clamp(24px,3vw,32px)}

.tp-footer-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:clamp(20px,3vw,40px);padding-bottom:clamp(40px,5vw,56px);margin-bottom:clamp(40px,5vw,56px);
 border-bottom:1px solid rgba(255,255,255,.10)}
.tp-footer-cta h2{margin:0 0 10px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
 font-size:clamp(28px,4vw,40px);line-height:1.15;color:#FFFFFF!important}
.tp-footer-cta p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.62)!important;max-width:46ch}
/* The two buttons come from different rule sets, so their padding did not
   agree and their edges sat a few pixels apart. One height, one baseline. */
.tp-footer-cta-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tp-footer-cta-actions > a{height:52px!important;min-height:52px!important;margin:0!important;
 padding-top:0!important;padding-bottom:0!important;
 display:inline-flex!important;align-items:center;justify-content:center}

/* The primary button is the hero button inverted for a dark ground: the same
   geometry, with the fill and the rim swapped. */
.tp-footer .tp-side-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
 padding:15px 28px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
 background-color:#FFFFFF!important;background-image:none!important;color:#0E1012!important;text-decoration:none;
 font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 24px -12px rgba(0,0,0,.7);
 transition:transform .18s cubic-bezier(.22,.61,.36,1),filter .18s ease}
.tp-footer .tp-side-cta:hover{transform:translateY(-1px);filter:brightness(.94)}
.tp-foot-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
 padding:15px 26px;border-radius:14px;border:1px solid rgba(255,255,255,.22);
 background:transparent!important;color:#FFFFFF!important;text-decoration:none;
 font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 transition:background .18s ease,border-color .18s ease}
.tp-foot-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}

.tp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.5fr 1fr;gap:clamp(24px,3.5vw,48px)}
.tp-footer-brand .tp-footer-logo{display:inline-block;line-height:0;margin-bottom:16px}
.tp-footer-brand img{width:118px;height:auto;display:block;filter:brightness(0) invert(1)}
.tp-footer-brand p{margin:0 0 16px;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.55)!important;max-width:34ch}
.tp-footer-phone{display:inline-block;font-size:15px;color:#FFFFFF!important;text-decoration:none;
 font-variant-numeric:lining-nums tabular-nums;
 border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px;transition:border-color .18s ease}
.tp-footer-phone:hover{border-color:#FFFFFF}

.tp-footer-col h3{margin:0 0 16px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
 color:#FFFFFF!important;opacity:0.85;font-weight:600}
.tp-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.tp-footer-col a{color:rgba(255,255,255,.82)!important;text-decoration:none;font-size:14px;line-height:1.45;
 transition:color .18s ease}
.tp-footer-col a:hover{color:#FFFFFF!important}
.tp-footer-studios li{display:grid;gap:4px}
.tp-footer-studios span{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.45)!important;max-width:34ch}
.tp-footer-hours{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.45)!important;
 padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}

/* Social icons row */
.tp-footer-social{display:flex;align-items:center;gap:8px;
 margin-top:clamp(40px,5vw,56px);padding-top:22px;border-top:1px solid rgba(255,255,255,.10);
 padding-bottom:16px}
.tp-social-link{
 display:inline-flex;align-items:center;justify-content:center;
 width:38px;height:38px;border-radius:10px;
 border:1px solid rgba(255,255,255,.12);
 color:rgba(255,255,255,.55);
 text-decoration:none;
 transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.tp-social-link:hover{
 background:rgba(255,255,255,.08);
 border-color:rgba(255,255,255,.3);
 color:#FFFFFF;
}

.tp-footer-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
 padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.tp-footer-bar p{margin:0;font-size:12.5px;color:rgba(255,255,255,.45)!important}
.tp-footer-bar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:20px}
.tp-footer-bar a{font-size:12.5px;color:rgba(255,255,255,.45)!important;text-decoration:none;transition:color .18s ease}
.tp-footer-bar a:hover{color:#FFFFFF!important}

@media (max-width:900px){
 .tp-footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px}
 .tp-footer-brand{grid-column:1/-1}
}
@media (max-width:600px){
 .tp-footer-grid{grid-template-columns:1fr;gap:32px}
 .tp-footer-cta{flex-direction:column;align-items:flex-start}
 .tp-footer-cta-actions{width:100%}
 .tp-footer-cta-actions > a{flex:1 1 100%}
 .tp-footer-bar{flex-direction:column;align-items:flex-start;gap:12px}
 .tp-footer-bar ul{gap:16px}
}
@media (prefers-reduced-motion:reduce){
 .tp-footer .tp-side-cta,.tp-foot-ghost,.tp-footer-col a{transition:none!important}
}

/* tsq-inline-css */

/* The theme sets html{scroll-behavior:smooth}. GSAP documents this as directly
   incompatible with ScrollTrigger pinning: every pin adjustment starts an
   animated scroll that fights the user's own input, and the section visibly
   oscillates up and down. Measured 35 backward jumps in a single three-notch
   wheel gesture. Anchor links still work; they just jump instead of gliding. */
html:root{scroll-behavior:auto!important}
/* THE pin-release jump. Elementor puts "transform .4s" on every container and
   "transition:all" on the pin-spacer. When ScrollTrigger unpins it writes
   transform:translate(0,2340px) onto the container — and the browser politely
   ANIMATES that 2340px over 0.4s, which is the slide people saw handing off
   from Phase 05 to the next section. Measured: the element landed at -1605px
   and slid to -80px over several frames. Transform must apply instantly here;
   background/border/shadow transitions are left alone. */
.elementor-element-00a5961{transition-property:background,border,box-shadow!important}
.pin-spacer{transition:none!important}
.pin-spacer > .e-con{transition-property:background,border,box-shadow!important}
html:root{overflow-x:clip!important;overflow-y:visible!important}
html:root > body{overflow-x:clip!important;overflow-y:visible!important}
/* The sequence is just a canvas now. Everything around it — headings, copy,
   buttons, spacing — is built with normal Elementor widgets and edited in the
   editor, not in here. */
.tsq{position:relative;width:100%;min-height:240px}
.tsq-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
 filter:url(#tsq-whiten);
 /* mix-blend-mode disabled to protect natural skin/hair tones */}
.elementor-shortcode:has(> .tsq){width:100%;height:100%}
.elementor-widget-shortcode:has(.tsq){width:100%;align-self:stretch}
/* :has()-free equivalents so the canvas still fills its column on older engines */
.elementor-element-9512115 .elementor-shortcode{width:100%;height:100%}
.elementor-element-9512115{width:100%;align-self:stretch}
@media (min-width:1025px){
 .elementor-element-375f65f{padding-right:clamp(40px,6vw,110px)!important;box-sizing:border-box!important}
}
/* Copy steps: any Elementor widget given data-tsq-at="0.42" stacks in place and
   cross-fades as the scroll passes its value. */
/* Elementor sets display:flex on its containers, so this needs to outrank it
   for the steps to overlay instead of stacking down the column. */
/* align-items:start, not center: the phase number must land on the same pixel
   for every step. Centring re-positions each block by half its own height, so
   any block that is a line taller (or carries the CTA) nudges the number. */
.tsq-steps,.e-con .tsq-steps,.elementor .tsq-steps{display:grid!important;align-items:start!important}

/* ---- phase block ---- */
.tsq-step .tsq-row{display:flex!important;gap:22px;align-items:flex-start}
.tsq-step .tsq-numcol{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding-top:4px;min-width:58px}
/* without this the body column shrinks to the paragraph's 46ch cap and the
   headings wrap a word early */
.tsq-step .tsq-body{flex:1 1 auto;min-width:0}
.tsq-step .tsq-dot{display:none!important}
.tsq-step .tsq-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:clamp(34px,3.6vw,44px)!important;font-weight:600!important;color:#14161A!important;line-height:1!important;letter-spacing:-0.02em!important;font-style:normal!important;display:inline-block!important;margin-bottom:0!important}
.tsq-step .tsq-numcol{min-width:48px!important;padding-top:2px!important}
.tsq-step .tsq-eyebrow{font-size:11px!important;letter-spacing:.22em;text-transform:uppercase;color:#6E7278;margin:0 0 14px!important;line-height:1.4}
.tsq-step .tsq-h{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important;font-size:clamp(26px,3.2vw,42px)!important;font-weight:600!important;line-height:1.15!important;text-transform:uppercase;letter-spacing:.02em;margin:0 0 18px!important;color:#14161A}
.tsq-step .tsq-h em{font-style:normal!important;font-family:inherit!important;font-weight:550!important;text-transform:none;color:#8E7037!important;display:block!important;margin-top:4px!important}
.tsq-step .tsq-p{font-size:15px!important;line-height:1.75!important;color:#1E2226!important;font-weight:400!important;margin:0 0 20px!important;max-width:46ch}
.tsq-step .tsq-list{list-style:none!important;padding:0!important;margin:0!important;font-size:14px!important;line-height:1.9!important;color:#22262A!important}
.tsq-step .tsq-list strong{color:#0E1012!important;font-weight:600!important}
.tsq-step .tsq-list li{margin:0!important;padding:0!important;list-style:none!important}
.tsq-step .tsq-cta{display:inline-block;margin-top:22px;padding:15px 30px;background:#14161A;color:#F6F4EF;font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
/* The outgoing and incoming step used the same .45s curve, so for most of the
   transition both sat near half opacity on top of each other and the copy read
   as ghosted. Split it: the old step leaves quickly, the new one starts just
   after it has gone, leaving only a ~60ms overlap. */
.tsq-steps > .tsq-step{grid-area:1/1;width:100%;opacity:0;transform:translateY(10px);
 transition:opacity .16s ease-in,transform .16s ease-in;pointer-events:none;will-change:opacity,transform}
.tsq-steps > .tsq-step.tsq-on{opacity:1;transform:none;pointer-events:auto;
 transition:opacity .26s ease-out .1s,transform .3s cubic-bezier(.22,.61,.36,1) .1s}
@media (prefers-reduced-motion:reduce){
.tsq-steps > .tsq-step,.tsq-steps > .tsq-step.tsq-on{transition:opacity .12s linear;transform:none}
}
/* ---- desktop: text column and figure both vertically centred ----
   The outer container is an e-con-full, so its column containers are direct
   children — there is no .e-con-inner to hang this on. */
.e-con-full:has(.tsq){align-items:center!important}
.e-con-full:has(.tsq) > .e-con{align-self:center!important;justify-content:center!important}
.e-con-full:has(.tsq) > .e-con > .e-con-inner{justify-content:center!important}
/* :has() fallback — Samsung Internet below v21, iOS Safari below 15.4 and
   Firefox below 121 drop any rule whose selector they cannot parse, which took
   the whole hero layout with it. These repeat the rules above by element id so
   they apply on those engines too. They must stay as separate rules: a browser
   discards an entire selector LIST if one selector in it is unsupported. */
.elementor-element-00a5961{align-items:center!important}
.elementor-element-00a5961 > .e-con{align-self:center!important;justify-content:center!important}
.elementor-element-00a5961 > .e-con > .e-con-inner{justify-content:center!important}

/* ================= page-wide section rhythm =================
   The legacy sections were authored with one fixed set of paddings that never
   changed with viewport — 120px vertical and 48px horizontal all the way down
   to a 375px phone. These normalise the scale and give every section the same
   horizontal gutter so their edges line up down the page. */
html body .tp-catalog-section,
html body .tp-studios-section,
html body .elementor-element-4b0b1b2{
 padding-top:110px!important;padding-bottom:110px!important;
 padding-left:48px!important;padding-right:48px!important;
}
html body .elementor-element-8712b46{padding-left:48px!important;padding-right:48px!important}
html body footer#site-footer.site-footer{padding-left:48px!important;padding-right:48px!important}
/* the badge ticker wraps onto two or five rows depending on width — keep it to
   one row that scrolls sideways if it runs out of room */
html body .tp-badges-bar{flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:center!important;gap:36px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html body .tp-badges-bar::-webkit-scrollbar{display:none}
html body .tp-badge-item{flex:0 0 auto!important;white-space:nowrap!important}

/* ---- tablet and below: copy on the top 40%, figure filling the bottom 60% ----
   The old breakpoint was 760px, which left 768-1024px tablets running the
   two-column desktop layout: the copy squeezed into ~40% of a narrow viewport
   and wrapped every few words. Stacking starts at 1024 now. */
@media (max-width:1024px){
.e-con-full:has(.tsq){flex-direction:column!important;flex-wrap:nowrap!important;gap:0!important;height:100vh!important;padding-top:0!important;padding-bottom:0!important}
.e-con-full:has(.tsq) > .e-con{width:100%!important;max-width:100%!important}
/* text block */
/* the site header is 76px and fixed — the copy band has to clear it */
.e-con-full:has(.tsq) > .e-con:first-child{flex:0 0 40%!important;min-height:0!important;justify-content:center!important;padding:94px 32px 4px!important}
.e-con-full:has(.tsq) > .e-con:first-child > .e-con-inner{padding:0!important;width:100%!important}
/* figure block */
.e-con-full:has(.tsq) > .e-con:last-child{flex:0 0 60%!important;min-height:0!important;padding:0!important}
.e-con-full:has(.tsq) > .e-con:last-child > .e-con-inner{padding:0!important;width:100%!important}
.e-con-full:has(.tsq) > .e-con:last-child .elementor-widget-shortcode{width:100%!important}
/* height:100% would have to resolve through the widget wrapper, which is auto —
   take it straight off the viewport instead */
.tsq{height:60vh!important;min-height:0!important}
/* svh is the viewport WITHOUT browser chrome. On iOS Safari plain vh is the
   chrome-less height, so 100vh overflows the visible area and the bottom of the
   figure sits behind the address bar. Engines that do not know svh ignore this
   second declaration and keep the vh value above. */
.tsq{height:60svh!important}
/* ---- :has() fallback for the whole stacked layout ----
   Samsung Internet below v21, iOS Safari below 15.4 and Firefox below 121 drop
   any rule whose selector they cannot parse. Without these the hero stayed in
   the two-column desktop layout on those phones. Separate rules on purpose: a
   browser discards an entire selector LIST if one selector in it is unsupported. */
.elementor-element-00a5961{flex-direction:column!important;flex-wrap:nowrap!important;gap:0!important;height:100vh!important;padding-top:0!important;padding-bottom:0!important}
.elementor-element-00a5961{height:100svh!important}
.elementor-element-00a5961 > .e-con{width:100%!important;max-width:100%!important}
.elementor-element-00a5961 > .e-con:first-child{flex:0 0 40%!important;min-height:0!important;justify-content:center!important;padding:94px 32px 4px!important}
.elementor-element-00a5961 > .e-con:first-child > .e-con-inner{padding:0!important;width:100%!important}
.elementor-element-00a5961 > .e-con:last-child{flex:0 0 60%!important;min-height:0!important;padding:0!important}
.elementor-element-00a5961 > .e-con:last-child > .e-con-inner{padding:0!important;width:100%!important}
.elementor-element-00a5961 > .e-con:last-child .elementor-widget-shortcode{width:100%!important}
/* each phase block: number stacked over the copy, everything centred */
.tsq-step .tsq-row{flex-direction:column!important;align-items:center!important;gap:8px!important;text-align:center!important}
.tsq-step .tsq-numcol{min-width:0!important;padding-top:0!important}
.tsq-step .tsq-p,.tsq-step .tsq-list,.tsq-step .tsq-h{max-width:34em!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.tsq-step .tsq-h{font-size:30px!important;margin-bottom:12px!important}
.tsq-step .tsq-p{font-size:15px!important;line-height:1.65!important;margin-bottom:12px!important}
.tsq-step .tsq-eyebrow{font-size:10.5px!important;margin-bottom:10px!important}
.tsq-step .tsq-list{display:inline-block!important;font-size:13.5px!important;line-height:1.8!important}
.tsq-step .tsq-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:clamp(34px,3.6vw,44px)!important;font-weight:600!important;color:#14161A!important;line-height:1!important;letter-spacing:-0.02em!important;font-style:normal!important;display:inline-block!important;margin-bottom:0!important}
.tsq-step .tsq-dot{margin-top:8px!important}
.tsq-step .tsq-cta{margin-top:16px!important}
/* sections */
html body .tp-catalog-section,
html body .tp-studios-section,
html body .elementor-element-4b0b1b2{padding-top:76px!important;padding-bottom:76px!important;padding-left:32px!important;padding-right:32px!important}
html body .elementor-element-8712b46,html body footer#site-footer{padding-left:32px!important;padding-right:32px!important}
html body .tp-badges-bar{justify-content:flex-start!important;gap:28px!important}
}

/* ---- phone ---- */
@media (max-width:600px){
.e-con-full:has(.tsq) > .e-con:first-child{padding:92px 22px 2px!important}
.elementor-element-00a5961 > .e-con:first-child{padding:92px 22px 2px!important}
/* the bullet list does not fit in 40vh on a phone; the heading and paragraph carry it */
.tsq-step .tsq-list{display:none!important}
.tsq-step .tsq-row{gap:6px!important}
.tsq-step .tsq-h{font-size:21px!important;margin-bottom:8px!important}
.tsq-step .tsq-p{font-size:12.5px!important;line-height:1.5!important;margin-bottom:8px!important}
.tsq-step .tsq-eyebrow{font-size:9.5px!important;margin-bottom:6px!important}
.tsq-step .tsq-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:clamp(34px,3.6vw,44px)!important;font-weight:600!important;color:#14161A!important;line-height:1!important;letter-spacing:-0.02em!important;font-style:normal!important;display:inline-block!important;margin-bottom:0!important}
.tsq-step .tsq-dot{margin-top:6px!important}
.tsq-step .tsq-cta{padding:10px 20px!important;font-size:9.5px!important;margin-top:12px!important}
/* 120px vertical / 48px horizontal was authored for desktop and never scaled down */
html body .tp-catalog-section,
html body .tp-studios-section,
html body .elementor-element-4b0b1b2{padding-top:56px!important;padding-bottom:56px!important;padding-left:22px!important;padding-right:22px!important}
html body .elementor-element-8712b46,html body footer#site-footer{padding-left:22px!important;padding-right:22px!important}
html body .tp-badges-bar{gap:22px!important;padding-left:22px!important;padding-right:22px!important}
}

/* ---- stacked layout: copy sizes to its content, figure takes what is left ----
   Last block on purpose, so it supersedes every fixed percentage split above.
   The 40/60 split left dead space wherever the copy was shorter than its band:
   measured 81px below the text plus 123px of empty canvas above the head — a
   204px hole between the two. Letting the copy be its natural height and giving
   the figure flex:1 closes it; the figure top-anchors in paint(). min-height:0
   at every level is what actually lets a flex child shrink below its content.
   The top pad clears the 76px fixed header with real breathing room — it was
   84px, i.e. 8px of daylight, which is why the top looked unpadded. */
@media (max-width:1024px){
.e-con-full:has(.tsq) > .e-con:first-child{flex:0 0 auto!important;padding:104px 26px 16px!important;justify-content:flex-start!important}
.elementor-element-00a5961 > .e-con:first-child{flex:0 0 auto!important;padding:104px 26px 16px!important;justify-content:flex-start!important}
.e-con-full:has(.tsq) > .e-con:last-child{flex:1 1 auto!important;min-height:0!important;display:flex!important;padding:0!important}
.elementor-element-00a5961 > .e-con:last-child{flex:1 1 auto!important;min-height:0!important;display:flex!important;padding:0!important}
.e-con-full:has(.tsq) > .e-con:last-child > .e-con-inner{flex:1 1 auto!important;display:flex!important;min-height:0!important;padding:0!important;width:100%!important}
.elementor-element-00a5961 > .e-con:last-child > .e-con-inner{flex:1 1 auto!important;display:flex!important;min-height:0!important;padding:0!important;width:100%!important}
.e-con-full:has(.tsq) > .e-con:last-child .elementor-widget-shortcode{flex:1 1 auto!important;display:flex!important;min-height:0!important;width:100%!important}
.elementor-element-00a5961 > .e-con:last-child .elementor-widget-shortcode{flex:1 1 auto!important;display:flex!important;min-height:0!important;width:100%!important}
.e-con-full:has(.tsq) > .e-con:last-child .elementor-shortcode{flex:1 1 auto!important;display:flex!important;min-height:0!important;width:100%!important}
.elementor-element-00a5961 > .e-con:last-child .elementor-shortcode{flex:1 1 auto!important;display:flex!important;min-height:0!important;width:100%!important}
.tsq{flex:1 1 auto!important;height:auto!important;min-height:0!important}
}
@media (max-width:600px){
.e-con-full:has(.tsq) > .e-con:first-child{padding:100px 22px 14px!important}
.elementor-element-00a5961 > .e-con:first-child{padding:100px 22px 14px!important}
}
@media (max-width:1024px) and (max-height:560px){
.e-con-full:has(.tsq) > .e-con:first-child{padding:88px 18px 10px!important}
.elementor-element-00a5961 > .e-con:first-child{padding:88px 18px 10px!important}
}

/* ---- short viewports ----
   The 40/60 split is a proportion, so on a short screen the copy band shrinks
   with it: at 320x568 it left 141px of usable height for 214px of copy. Height,
   not width, is the constraint here — an iPhone SE, a landscape phone and a
   small laptop all hit it — so this keys off height and gives the copy the
   larger share, since the figure degrades more gracefully than clipped text. */
@media (max-width:1024px) and (max-height:700px){
/* 76px of padding against a 76px header is zero clearance. Content-sizing the
   copy (below) handles short screens without a hard percentage split. */
.e-con-full:has(.tsq) > .e-con:first-child{flex:0 0 auto!important;padding:92px 18px 10px!important}
.elementor-element-00a5961 > .e-con:first-child{flex:0 0 auto!important;padding:92px 18px 10px!important}
.e-con-full:has(.tsq) > .e-con:last-child{flex:1 1 auto!important}
.elementor-element-00a5961 > .e-con:last-child{flex:1 1 auto!important}
.tsq-step .tsq-list{display:none!important}
.tsq-step .tsq-h{font-size:19px!important;margin-bottom:6px!important}
.tsq-step .tsq-p{font-size:12px!important;line-height:1.45!important;margin-bottom:6px!important}
.tsq-step .tsq-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:clamp(34px,3.6vw,44px)!important;font-weight:600!important;color:#14161A!important;line-height:1!important;letter-spacing:-0.02em!important;font-style:normal!important;display:inline-block!important;margin-bottom:0!important}
.tsq-step .tsq-cta{margin-top:8px!important;padding:9px 16px!important;font-size:9px!important}
}
/* landscape phones and anything shorter still: drop the eyebrow and tighten
   further, otherwise the CTA is pushed out of the band */
@media (max-width:1024px) and (max-height:520px){
/* 62px would have tucked the first line under the 76px header entirely */
.e-con-full:has(.tsq) > .e-con:first-child{flex:0 0 auto!important;padding:86px 16px 8px!important}
.elementor-element-00a5961 > .e-con:first-child{flex:0 0 auto!important;padding:86px 16px 8px!important}
.e-con-full:has(.tsq) > .e-con:last-child{flex:1 1 auto!important}
.elementor-element-00a5961 > .e-con:last-child{flex:1 1 auto!important}
.tsq-step .tsq-eyebrow{display:none!important}
.tsq-step .tsq-h{font-size:17px!important}
.tsq-step .tsq-p{font-size:11.5px!important;line-height:1.4!important}
}

/* ---- short and wide: landscape tablets, small laptops, unfolded foldables ----
   The stacked layout starts at 1024px, and the copy band is content-sized, so
   on a viewport that is wide but short the full-size copy — eyebrow, a 30px
   heading, a 15px paragraph, the bullet list and the CTA — eats most of a
   100vh hero and the canvas is left with a letterbox strip:

     1024 x 768  canvas 1022 x 309   40% of the screen
      992 x 768  canvas  990 x 310   40%
      900 x 600  canvas  898 x 335   56%
      717 x 512  canvas  715 x 287   56%

   A 3D model rendered 309px tall across 1022px is a model nobody can see, and
   this band is not exotic: it is an iPad in landscape, a 1366x768 laptop, and
   a foldable opened out.

   The existing compaction keys off max-height:700px, which 768 misses by 68
   pixels — hence the two worst cases in the table. This raises the threshold
   to 820px but scopes it to min-width:700px, so it catches the landscape
   tablets without touching a 360x800 Android in portrait, which is also under
   820px tall and does not have this problem. The bullet list goes first: it is
   the tallest block and the least load-bearing, and it is already hidden on
   phones for the same reason. */
/* The min-height floor matters: below 520px the landscape-phone tier above
   already strips the copy harder than this does, and without the floor this
   block would come later in the cascade and put the larger type back. */
@media (min-width:700px) and (max-width:1024px) and (min-height:521px) and (max-height:820px){
.e-con-full:has(.tsq) > .e-con:first-child{flex:0 0 auto!important;padding:86px 24px 8px!important}
.elementor-element-00a5961 > .e-con:first-child{flex:0 0 auto!important;padding:86px 24px 8px!important}
.e-con-full:has(.tsq) > .e-con:last-child{flex:1 1 auto!important;min-height:0!important}
.elementor-element-00a5961 > .e-con:last-child{flex:1 1 auto!important;min-height:0!important}
.tsq-step .tsq-list{display:none!important}
.tsq-step .tsq-h{font-size:22px!important;margin-bottom:8px!important}
.tsq-step .tsq-p{font-size:13px!important;line-height:1.5!important;margin-bottom:8px!important;max-width:60ch!important}
.tsq-step .tsq-eyebrow{font-size:9.5px!important;margin-bottom:6px!important}
.tsq-step .tsq-row{gap:6px!important}
.tsq-step .tsq-cta{margin-top:10px!important;padding:10px 20px!important;font-size:9.5px!important}
}

/* ---- narrow phones (360px Android, 320px SE, folded devices) ----
   At 360x800 the 40% copy band gives 226px of usable height and the tallest
   phase block — 05, the one carrying the CTA — measured 236px, so the button
   was being clipped on the single most common Android width. */
@media (max-width:400px){
.e-con-full:has(.tsq) > .e-con:first-child{padding:98px 18px 12px!important}
.elementor-element-00a5961 > .e-con:first-child{padding:98px 18px 12px!important}
.tsq-step .tsq-h{font-size:19.5px!important;margin-bottom:6px!important}
.tsq-step .tsq-p{font-size:12px!important;line-height:1.45!important;margin-bottom:6px!important}
.tsq-step .tsq-eyebrow{font-size:9px!important;margin-bottom:4px!important}
.tsq-step .tsq-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:clamp(34px,3.6vw,44px)!important;font-weight:600!important;color:#14161A!important;line-height:1!important;letter-spacing:-0.02em!important;font-style:normal!important;display:inline-block!important;margin-bottom:0!important}
.tsq-step .tsq-dot{margin-top:4px!important}
.tsq-step .tsq-row{gap:4px!important}
.tsq-step .tsq-cta{margin-top:10px!important;padding:9px 16px!important;font-size:9px!important}
html body .tp-catalog-section,
html body .tp-studios-section,
html body .elementor-element-4b0b1b2{padding-left:18px!important;padding-right:18px!important}
html body .e-con.e-parent:not(:has(.tsq)){padding-left:18px!important;padding-right:18px!important}
html body .e-con.e-parent:not(.elementor-element-00a5961){padding-left:18px!important;padding-right:18px!important}
}
#step01,#step02,#step03,#step04,#step05,.tp-timeline,#tp-webgl-canvas-container{display:none!important}
/*# sourceURL=tsq-inline-css */

/* tp-modal-css */

/* Overlay & Backdrop */
.tp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(14, 16, 18, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 36px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}
.tp-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Modal Window Container */
.tp-modal-container {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #E6E4DF;
  border-radius: 20px;
  padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 40px);
  box-shadow: 0 28px 70px -15px rgba(14, 16, 18, 0.35);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.tp-modal-overlay.is-active .tp-modal-container {
  transform: translateY(0) scale(1);
}

/* Close Button */
.tp-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  border: 1px solid #E6E4DF !important;
  background: #F8F7F4 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #14161A !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}
.tp-modal-close:hover {
  background: #14161A !important;
  color: #FFFFFF !important;
}

/* Header Elements */
.tp-modal-eyebrow {
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #8E7037 !important;
  margin: 0 0 8px !important;
  font-weight: 600 !important;
}
.tp-modal-h {
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: clamp(22px, 2.8vw, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px !important;
  color: #14161A !important;
  font-weight: 600 !important;
}
.tp-modal-h em {
  font-style: normal !important;
  color: #8E7037 !important;
}

/* 3 Communication Options Cards */
.tp-modal-channels {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
.tp-channel-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  border: 1px solid #E6E4DF !important;
  background: #FBFBFA !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.tp-channel-card:hover {
  background: #FFFFFF !important;
  border-color: #8E7037 !important;
  box-shadow: 0 8px 24px -6px rgba(142, 112, 55, 0.18) !important;
  transform: translateY(-1px) !important;
}
.tp-channel-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}
.tp-channel-card:hover .tp-channel-icon-wrap {
  transform: scale(1.05) !important;
}
.tp-icon-wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
}
.tp-icon-call {
  background: #14161A !important;
  color: #FFFFFF !important;
}
.tp-channel-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.tp-channel-badge {
  display: inline-block !important;
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #8E7037 !important;
  margin-bottom: 2px !important;
}
.tp-channel-title {
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #14161A !important;
  margin: 0 0 3px 0 !important;
  letter-spacing: -0.01em !important;
}
.tp-channel-desc {
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #6E7278 !important;
  margin: 0 !important;
}
.tp-channel-arrow {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #8E7037 !important;
  transition: transform 0.2s ease !important;
  padding-left: 4px !important;
}
.tp-channel-card:hover .tp-channel-arrow {
  transform: translateX(4px) !important;
}

/* Divider with text */
.tp-modal-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 18px 0 !important;
  color: #8A8477 !important;
}
.tp-modal-divider::before,
.tp-modal-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid #EBE9E4 !important;
}
.tp-modal-divider span {
  padding: 0 12px !important;
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* Form Layout */
.tp-modal-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  margin-bottom: 22px;
}
@media (max-width: 600px) {
  .tp-modal-fields {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.tp-modal-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tp-modal-label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A5F66;
  font-weight: 600;
}

.tp-modal-input,
.tp-modal-select {
  width: 100%;
  height: 48px;
  border: 1px solid #DCD8D0;
  border-radius: 8px;
  padding: 0 14px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  color: #14161A;
  background: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tp-modal-input:focus,
.tp-modal-select:focus {
  border-color: #14161A;
  box-shadow: 0 0 0 3px rgba(20, 22, 26, 0.08);
}
.tp-modal-select-wrap {
  position: relative;
}
.tp-modal-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  padding-right: 32px;
}
.tp-modal-select-wrap::after {
  display: none !important;
  content: none !important;
}
.tp-modal-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E7278' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* Submit Button */
.tp-modal-actions {
  margin-top: 10px;
}
.tp-modal-submit-btn {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  background: #14161A !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(20, 22, 26, 0.15) !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.tp-modal-submit-btn:hover {
  background: #C9A227 !important;
  color: #14161A !important;
  transform: translateY(-1px) !important;
}
.tp-modal-submit-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Feedback Box */
.tp-modal-feedback {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
}
.tp-modal-feedback.is-success {
  background: #EEF8F1;
  border: 1px solid #C4E7D0;
  color: #1E6B37;
}
.tp-modal-feedback.is-error {
  background: #FDF1F0;
  border: 1px solid #F6C8C5;
  color: #A32822;
}

/* Footer Details */
.tp-modal-footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #EFEDE8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  color: #8A8477;
}
.tp-modal-wa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 500;
  color: #5A5F66;
}
.tp-modal-wa a {
  color: #14161A;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}
.tp-modal-wa a:hover {
  color: #C9A227;
}

/* topee-home-ui */

/* =====================================================================
   TOPEE - HOME PAGE layout corrections
   ===================================================================== */

/* ---------------------------------------------------------------------
   "MEN WHO WALKED IN / with the same doubt"

   The heading was breaking over four lines - not because of its own
   size, but because its container carried a max-width that computed to
   342px on a 1400px screen. That measure suits the paragraph beneath it
   and throttles a 46px display heading.

   The head block gets a measure wide enough for two lines; the
   paragraph keeps a comfortable one of its own so it does not stretch
   into a single unreadable line.
   --------------------------------------------------------------------- */
@media (min-width:1025px){
  html body .tp-voices .tp-voices-head{
    max-width:700px!important;
  }
  html body .tp-voices .tp-voices-head .tp-h2{
    max-width:none!important;
    text-wrap:balance;
  }
  html body .tp-voices .tp-voices-head > p{
    max-width:58ch!important;
  }
}

/* ---------------------------------------------------------------------
   THE EMPTY BAND UNDER THE SCROLL SEQUENCE - fixed elsewhere, on purpose

   The figure sits in a canvas as tall as the viewport while the frames
   are 1400x1612, so the image is limited by its width and the leftover
   height shows as a deep empty strip beneath the model.

   Reshaping the canvas box here with aspect-ratio did close the strip,
   but the canvas BITMAP keeps the size the script gave it and does not
   follow the box - even on resize - so the frame was squashed
   vertically into the shorter box. A distorted model is worse than a
   gap, so that rule was removed.

   The band is closed from the drawing side instead: the script was
   scaling the figure to 65% of the space available on desktop and now
   uses 0.92, the value the stacked layout has always used. See the
   comment on `sc` in topee-sequence.php.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   ONE RULE UNDER THE HEADLINE, NOT TWO

   The hero draws a line on the stats wrapper and the phone/tablet block
   draws another on the list inside it, a few pixels below. The wrapper's
   line is the one that spans the full measure, so the inner one goes.
   --------------------------------------------------------------------- */
html body .tp-hero--fullbleed .tp-hero-marks,
html body .tp-hero-marks{
  border-top:0!important;
  padding-top:14px!important;
}

/* ---------------------------------------------------------------------
   PHONE AND TABLET - the dead strip under the model

   The stage is a viewport-tall pinned section split 40/60 between the
   copy and the figure. The frames are 1400x1612, so the drawing is
   limited by width and never fills the 60% band; the remainder piled up
   as one deep empty strip at the bottom of the stage.

   The script now collapses the canvas box onto the drawn figure. With
   the two bands sized by their content, the leftover is shared above
   and below the pair instead of sitting in one block under the model.
   --------------------------------------------------------------------- */
/* Reverted. Sizing the two bands by their content went with a canvas that
   collapsed onto the figure; without that, the figure band has no height of
   its own and the model disappeared on phones and tablets. The stage keeps
   its 40/60 split. */

/* ---------------------------------------------------------------------
   THE GOOGLE RATING STRIP UNDER THE HERO

   The 4.9 / 59 Google reviews band had been hidden site-wide - not by
   its own stylesheet, which explicitly sets display:block, but by a
   later rule setting display:none, visibility:hidden and opacity:0 on
   it at every width. It was missing on phones, tablets and desktop
   alike.

   It is social proof sitting directly under the hero, which is the most
   valuable position on the page for it, so it is put back at all sizes.
   The class is repeated to clear whatever specificity hid it.
   --------------------------------------------------------------------- */
html body .tp-rvscore.tp-rvscore.tp-rvscore{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
html body .tp-rvscore.tp-rvscore.tp-rvscore .tp-rvscore-link,
html body .tp-rvscore.tp-rvscore.tp-rvscore p{
  visibility:visible!important;
  opacity:1!important;
  height:auto!important;
}

/* ---------------------------------------------------------------------
   MAKING THE FIGURE BIGGER - it needed width, not scale

   The obvious move was to raise the scale further, but measuring the
   frames rules it out: the model already spans about 93% of the frame
   width (margins of 5.1% left and 1.7% right on the final frame). Any
   more and his shoulder is cropped, which is why the scale stops at
   0.92.

   The drawing is limited by width, so width is what has to change. The
   media column gave up 84px to a right padding and took only 48% of the
   row; it now takes 55% with a slim gutter, and the copy column loses
   some of its generous 80/70 padding. The canvas goes from 588px to
   roughly 730px on a 1400px screen - the figure gets about a quarter
   larger with no crop and no distortion.
   --------------------------------------------------------------------- */
@media (min-width:1025px){
  html body .elementor-element-00a5961 > .elementor-element-2d9eb35{
    flex:0 1 45%!important;
    max-width:45%!important;
    padding-left:clamp(24px,3.4vw,64px)!important;
    padding-right:clamp(20px,2.6vw,44px)!important;
  }
  html body .elementor-element-00a5961 > .elementor-element-375f65f{
    flex:0 1 55%!important;
    max-width:55%!important;
    padding-right:clamp(8px,1.6vw,24px)!important;
  }
}


/* topee-studio-actions-css */


html body .tp-sc-icons{
 display:grid!important;grid-template-columns:repeat(3,1fr)!important;
 gap:8px!important;width:100%!important;margin:var(--tp-action-offset,14px) 0 10px!important;
}
html body .tp-sc-icons a{
 display:flex!important;flex-direction:column!important;align-items:center!important;
 justify-content:center!important;gap:6px!important;padding:12px 6px!important;
 border:1px solid rgba(20,22,26,.12)!important;border-radius:10px!important;
 text-decoration:none!important;color:#14161A!important;background:#FFFFFF!important;
 font-size:10.5px!important;letter-spacing:.05em!important;text-transform:uppercase!important;
 text-align:center!important;line-height:1!important;
 transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
html body .tp-sc-icons a svg{width:19px!important;height:19px!important}
html body .tp-sc-icons a:hover{
 border-color:rgba(20,22,26,.28)!important;transform:translateY(-1px)!important;
 box-shadow:0 8px 18px -12px rgba(20,22,26,.5)!important;
}
html body .tp-sc-icons a:active{transform:translateY(0)!important}
html body .tp-sc-icons a:focus-visible{outline:2px solid var(--tp-accent-text,#8A6E12);outline-offset:3px}
@media (max-width:400px){
 html body .tp-sc-icons a{font-size:9px!important;padding:10px 4px!important}
 html body .tp-sc-icons a svg{width:17px!important;height:17px!important}
}

/* =====================================================================
   CARD FOOTER LAYOUT
   ---------------------------------------------------------------------
   On the contact page the card body is a wrapping flex row, so the icon
   row, the Studio Details button and the Google Maps link all tried to
   share one line. The icons were squeezed until "DIRECTIONS" broke
   across two lines as "DIRECTION / S", and the button sat wedged beside
   them instead of reading as the cards main action.

   Each of the three gets its own full-width row instead.
   ===================================================================== */
/* The container is .tp-studio-actions, and it is a two-column GRID - not
   the flex row on .tp-studio-body that an earlier pass aimed at, which is
   why nothing moved. A grid ignores flex-basis, so the icons row was
   pinned to one 210px column beside the button. One column fixes it. */
/* The class is repeated to raise specificity. The existing rules for this
   container use the same doubled-class trick, so a single class here lost
   to them even with !important - the two rules were equally important and
   the more specific one won. */
html body .tp-studio-actions.tp-studio-actions.tp-studio-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  align-items:stretch!important;
}
/* grid-column:1/-1 makes each child span every column there is.
   Overriding the container template turned into a specificity fight with a
   rule inside the widget markup that kept winning. This sidesteps it: the
   number of columns no longer matters, because both children take all of
   them either way. */
html body .tp-studio-actions.tp-studio-actions > .tp-sc-icons{
  grid-column:1 / -1!important;
  width:100%!important;
  margin:0!important;
  order:1!important;
}
html body .tp-studio-actions.tp-studio-actions > .tp-side-cta{
  grid-column:1 / -1!important;
  width:100%!important;
  order:2!important;
  text-align:center!important;
  justify-content:center!important;
}

/* The label must never break. Uppercase with letter-spacing is wide, so
   the size steps down with the tile rather than wrapping inside it. */
html body .tp-sc-icons a > span{
  white-space:nowrap!important;
  font-size:clamp(8.5px,1.9vw,10.5px)!important;
  letter-spacing:.04em!important;
}

/* The separate "Google Maps" link is removed: DIRECTIONS does the same
   job one row above it, and does it better - it opens the studios own Google listing, where this link ran a generic text search for the
   business name. Two buttons to the same place, one of them vaguer, is
   worse than one. */
html body .tp-studio-actions.tp-studio-actions > .tp-sd-ghost,
html body .tp-studio-body.tp-studio-body > .tp-sd-ghost,
html body .tp-studio .tp-sd-ghost{
  display:none!important;
}

/* =====================================================================
   iOS OVERFLOW FIX - applies to BOTH icon rows
   ---------------------------------------------------------------------
   Reported as the studio page being cut off on the right on an iPhone,
   with no gutter. It does not reproduce in a desktop browser at any
   width, and that difference is the clue: two iOS-only behaviours
   combine here.

   1. A grid item defaults to min-width:auto, which means it can never
      be narrower than its own content. "DIRECTIONS" and "WHATSAPP" set
      in uppercase with letter-spacing are wide words, so if they do not
      fit, the 1fr tracks stop shrinking and the whole grid grows past
      the viewport - it does not wrap and it does not clip.

   2. Mobile Safari inflates text on its own (the text-size-adjust
      behaviour) in portrait on narrow screens. A desktop browser never
      does this, so the labels are wider there than here - which is
      exactly why the row fits in testing and overflows on the phone.

   min-width:0 lets the tracks shrink to their share of the row again,
   and pinning text-size-adjust stops Safari resizing the labels out
   from under the layout. The word-break is a last resort so a long
   label wraps inside its tile rather than pushing the tile wider.
   ===================================================================== */
html body .tp-sc-icons,
html body .tp-sd-icons{
 max-width:100%!important;
 -webkit-text-size-adjust:100%!important;
 text-size-adjust:100%!important;
}
html body .tp-sc-icons > a,
html body .tp-sd-icons > a{
 min-width:0!important;
 max-width:100%!important;
 overflow-wrap:anywhere!important;
 hyphens:none!important;
}
html body .tp-sc-icons > a > span,
html body .tp-sd-icons > a > span{
 min-width:0!important;
 max-width:100%!important;
 display:block!important;
}
/* The map sits in the same column on the studio pages and is the other
   thing that can push a row wide. An iframe has a default intrinsic
   width of 300px that ignores the column, so state it. */
html body .tp-sd-map,
html body .tp-sd-map iframe{
 max-width:100%!important;
 width:100%!important;
}
/* Belt and braces for the section itself: nothing inside a studio page
   may set the page width. */
html body .tp-sd,
html body .tp-sd > *{
 max-width:100%!important;
}

/* The card main action reads as the main action: it spans the card the way
   the icon row above it does, rather than sitting as a short tab on the
   left. */
html body .tp-studio .tp-studio-body > .tp-side-cta,
html body .tp-studio-body.tp-studio-body > .tp-side-cta{
  display:flex!important;
  width:100%!important;
  align-self:stretch!important;
  justify-content:center!important;
  text-align:center!important;
  box-sizing:border-box!important;
}

/* The last of the four visit points sat with its text against the bottom
   edge: the shared step rule zeroes the bottom padding on the final step,
   which is right for the scroll timeline on How It Works and wrong for a
   card here. */
html body.page-id-60 .tp-stepc:last-child{
  padding-bottom:clamp(20px,2.5vw,32px)!important;
}

/* =====================================================================
   FULL-WIDTH STUDIO CARDS
   ---------------------------------------------------------------------
   Two cards side by side only works while each column is wide enough to
   hold the address, four fact chips, an hours line, three action icons
   and a button. Below roughly 1080px it is not, and the card turns into
   a narrow strip of wrapped text with the chips stacking one per line.

   One card per row below that width gives each one the whole measure -
   the address sits on two lines instead of four, the chips sit two or
   three to a row, and the icons get real tap targets. Above it the
   two-up layout is untouched.
   ===================================================================== */
@media (max-width:1080px){
 html body .tp-studios{
  grid-template-columns:1fr!important;
  display:grid!important;
 }
 html body .tp-studios .tp-studio{
  width:100%!important;max-width:100%!important;
 }
}

/* At a comfortable tablet width and up, a full-width card has room to put
   the photograph beside the detail rather than above it, which stops the
   card becoming very tall once it spans the full measure. */
@media (min-width:700px) and (max-width:1080px){
 html body .tp-studios .tp-studio{
  display:grid!important;
  grid-template-columns:minmax(240px,38%) 1fr!important;
  align-items:stretch!important;
 }
 html body .tp-studios .tp-studio .tp-studio-shot{
  height:100%!important;min-height:100%!important;
 }
 html body .tp-studios .tp-studio .tp-studio-shot img{
  width:100%!important;height:100%!important;object-fit:cover!important;
 }
}


/* tp-top-x */

#tp-top{
 position:fixed;right:clamp(28px,4vw,48px);bottom:clamp(28px,4vw,48px);z-index:900;
 width:46px;height:46px;padding:0;
 display:inline-flex;align-items:center;justify-content:center;
 border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
 background:#14161A;background-image:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 58%,rgba(0,0,0,.18) 100%);
 color:#FFFFFF;cursor:pointer;
 box-shadow:0 10px 26px -12px rgba(20,22,26,.55);
 opacity:0;transform:translateY(10px);pointer-events:none;
 transition:opacity .22s ease,transform .22s ease,background-color .18s ease,border-color .18s ease}
#tp-top.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
#tp-top:hover{background-color:#000000;border-color:#FFFFFF}
#tp-top:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(168,135,28,.55),0 10px 26px -12px rgba(20,22,26,.55)}
#tp-top svg{width:19px;height:19px;display:block}

@media (max-width:600px){
	#tp-top{width:44px;height:44px;right:20px;bottom:calc(22px + env(safe-area-inset-bottom,0px));margin-bottom:0;z-index:10010}
 #tp-top svg{width:17px;height:17px}
}
@media print{ #tp-top{display:none!important} }
@media (prefers-reduced-motion:reduce){ #tp-top{transition:opacity .01s linear} }