/* tp-react-x */

.topee-component{width:100%}
.tp-peeps{position:relative;width:100%;height:clamp(240px,34vw,380px);
 background:linear-gradient(180deg,#FAFAF8 0%,#F3F1EC 100%);
 border-block:1px solid #EFEDE8;overflow:hidden}
.tp-peeps-canvas{display:block;width:100%;height:100%}
.tp-peeps-ui{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;
 align-items:center;justify-content:center;gap:14px;
 padding:0 clamp(18px,5vw,40px) clamp(16px,2.4vw,26px);pointer-events:none}
.tp-peeps-q{margin:0;pointer-events:none;
 font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
 font-size:clamp(19px,2.4vw,28px);line-height:1.2;color:#14161A;text-wrap:balance}
/* The theme fills every bare <button> with its own pink, so this is restated
   at !important — the same fault already fixed on the FAQ and filter chips. */
.tp-peeps-btn{pointer-events:auto;appearance:none!important;cursor:pointer;
 padding:0 20px!important;height:40px!important;min-height:40px!important;
 border-radius:999px!important;
 border:1px solid #14161A!important;background:#14161A!important;
 background-image:none!important;color:#FFFFFF!important;box-shadow:none!important;
 font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;
 font-size:10px!important;letter-spacing:.16em!important;text-transform:uppercase!important;
 transition:background .18s ease,color .18s ease}
.tp-peeps-btn:hover{background:#FFFFFF!important;color:#14161A!important}
.tp-peeps-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(168,135,28,.5)}
@media (max-width:600px){ .tp-peeps{height:clamp(210px,52vw,280px)} }

/* tp-form-x */

/* ======================================================================
   FIELD GRID
   Elementor gives each field a percentage width and a negative-margin
   gutter on the wrapper. The result was rows 10px apart, the first field
   starting 5px to the left of the form, and a full-width submit 10px wider
   than the two columns above it. A grid with a real gap fixes all three at
   once, and the columns line up by construction.
   ====================================================================== */
html body .elementor-form .elementor-form-fields-wrapper{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:22px 20px!important;
 margin:0!important;padding:0!important}

html body .elementor-form .elementor-field-group{
 width:auto!important;max-width:none!important;
 flex:none!important;float:none!important;
 margin:0!important;padding:0!important;
 /* Elementor leaves flex-wrap:wrap on these. In a column flex box that is a
    multi-COLUMN instruction: the label wrapped into its own 35px column and
    the field started beside it, overflowing the group by that much — 117px
    on the selects. Plain block stacking has no such trap. */
 display:block!important}
html body .elementor-form .elementor-field-group > input,
html body .elementor-form .elementor-field-group > select,
html body .elementor-form .elementor-field-group > textarea,
html body .elementor-form .elementor-field-group > .elementor-select-wrapper{
 display:block!important;width:100%!important;max-width:100%!important;
 flex:none!important;box-sizing:border-box!important}

/* Elementor now supplies its own positioned caret inside the select wrapper.
   Older page CSS also added a background chevron to the select, which rendered
   two arrows side by side. Keep Elementor's single caret and remove the duplicate. */
html body.page-id-33 .elementor-form .elementor-select-wrapper > select{
 -webkit-appearance:none!important;
 -moz-appearance:none!important;
 appearance:none!important;
 background-image:none!important;
 padding-inline-end:42px!important;
}

/* The submit, and anything the editor marked as full width, spans the row. */
html body .elementor-form .elementor-field-group.elementor-field-type-submit,
html body .elementor-form .elementor-field-group.elementor-col-100{
 grid-column:1/-1!important}

/* A label needs room from its own field and from the row above it. */
html body .elementor-form .elementor-field-label{
 display:block!important;margin:0 0 8px!important;
 font-size:10px!important;letter-spacing:.16em!important;text-transform:uppercase!important;
 color:#5A5F66!important;font-weight:400!important;line-height:1.2!important}

/* The submit sits flush with the fields and matches the height of the CTA
   buttons used everywhere else, rather than being a full-bleed slab. */
html body .elementor-form .elementor-field-type-submit button,
html body .elementor-form button[type="submit"]{
 width:100%!important;margin:6px 0 0!important;
 height:54px!important;min-height:54px!important;
 padding:0 26px!important;border-radius:14px!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 line-height:1!important}

/* ======================================================================
   THE INTRO BLOCK
   Its container centres its children, so the heading floated in the middle
   of the section while the form below started at the left edge. Aligning
   the container's children to the start lines the two up; the text keeps a
   readable measure through its own max-width instead.
   ====================================================================== */
body.page-id-33 .e-con-inner{align-items:stretch!important}
body.page-id-33 .e-con-inner > .elementor-widget{max-width:100%!important}
body.page-id-33 .e-con-inner > .elementor-widget h2,
body.page-id-33 .e-con-inner > .elementor-widget > div > p{max-width:46ch}

@media (max-width:720px){
 html body .elementor-form .elementor-form-fields-wrapper{
  grid-template-columns:1fr!important;gap:18px!important}
}

/* tp-pages-x */

body.page-id-34 .e-con,body.page-id-35 .e-con,body.page-id-36 .e-con{padding-left:0!important;padding-right:0!important;max-width:100%!important}
/* Elementor puts its own padding on .e-con-inner, not the container — here a
   120px top pad that stacked on the section padding and pushed the first line
   of every page most of a screen down. */
body.page-id-34 .e-con > .e-con-inner,
body.page-id-35 .e-con > .e-con-inner,
body.page-id-36 .e-con > .e-con-inner{padding:0!important;max-width:100%!important;width:100%!important}
body.page-id-34 [data-elementor-type="wp-page"] > .e-con,
body.page-id-35 [data-elementor-type="wp-page"] > .e-con,
body.page-id-36 [data-elementor-type="wp-page"] > .e-con{
 padding:clamp(44px,5vw,64px) clamp(18px,5vw,40px) clamp(56px,7vw,88px)!important;overflow-x:clip}

/* The page heads carried Elementor's own generous widget margins on top of the
   container padding, which put roughly 420px of nothing between the header and
   the first line anyone came to read. */
body.page-id-34 .elementor-element-d431e7d,
body.page-id-35 .elementor-element-c64179f{margin-bottom:clamp(24px,3vw,36px)}
body.page-id-34 .elementor-element-d431e7d > .elementor-widget,
body.page-id-35 .elementor-element-c64179f > .elementor-widget{margin-bottom:10px!important}
body.page-id-34 .elementor-element-d431e7d > .elementor-widget:last-child,
body.page-id-35 .elementor-element-c64179f > .elementor-widget:last-child{margin-bottom:0!important}
body.page-id-35 .elementor-element-c64179f .elementor-widget-text-editor{max-width:64ch;margin-inline:auto}

/* Zeroing the inner padding also took the space off the block below the
   questions, so once a filter shortened the list the closing section rode up
   into it. It gets its own rule instead of inheriting Elementor's. */
body.page-id-35 .elementor-element-4b112bb{
 margin-top:clamp(48px,6vw,72px)!important;
 padding-top:clamp(32px,4vw,44px)!important;
 border-top:1px solid #E6E4DF;text-align:center}
body.page-id-35 .elementor-element-4b112bb > .e-con-inner{
 display:flex;flex-direction:column;align-items:center;gap:14px}
/* "Have a specific question?" sat a whole screen above its own button on a
   phone: the heading keeps Elementor's widget margin and the button block
   adds its own on top. One gap between them, set here. */
body.page-id-35 .elementor-element-4b112bb .elementor-widget-heading{
 margin-bottom:0!important}
body.page-id-35 .elementor-element-4b112bb .elementor-widget-button{
 margin-top:0!important}
body.page-id-35 .elementor-element-4b112bb > .e-con-inner{
 gap:clamp(14px,2.4vw,20px)!important}
body.page-id-35 .elementor-element-4b112bb .elementor-widget{margin:0!important}
body.page-id-35 .elementor-element-4b112bb .elementor-widget-text-editor{max-width:52ch}
body.page-id-34 [data-elementor-type="wp-page"] > .e-con > *,
body.page-id-35 [data-elementor-type="wp-page"] > .e-con > *,
body.page-id-36 [data-elementor-type="wp-page"] > .e-con > *{
 width:100%!important;max-width:1080px!important;margin-inline:auto!important}

/* The chip and ghost-button styles were written into the shop and studio
   plugins, which only load on their own pages — so here the theme's default
   button styling won, and the filters rendered as pink outlined boxes. Both
   are restated for these pages. */
.tp-faq .tp-chip,.tp-story .tp-sd-ghost{font-family:'Poppins', sans-serif!important;cursor:pointer;white-space:nowrap;
 padding:8px 14px!important;min-height:36px!important;border-radius:999px!important;
 border:1px solid #E0DDD6!important;background:#FFFFFF!important;color:#14161A!important;
 font-size:12.5px!important;line-height:1!important;letter-spacing:.01em!important;text-transform:none!important;
 box-shadow:none!important;
 transition:border-color .16s ease,background .16s ease,color .16s ease}
.tp-faq .tp-chip:hover{border-color:#C9C4B8!important}
.tp-faq .tp-chip:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(168,135,28,.5)!important}
.tp-faq .tp-chip.is-on{background:#14161A!important;border-color:#14161A!important;color:#FFFFFF!important}

.tp-story .tp-sd-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
 padding:14px 24px!important;border:1px solid #E6E4DF!important;border-radius:14px!important;
 background:#fff!important;font-size:11px!important;letter-spacing:.18em!important;text-transform:uppercase!important;
 color:#14161A!important;text-decoration:none!important;
 transition:border-color .2s ease,background .2s ease}
.tp-story .tp-sd-ghost:hover{border-color:#A8871C!important;background:rgba(168,135,28,.06)!important}

/* ---- FAQ ---- */
.tp-faq-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:clamp(20px,3vw,28px)}
.tp-faq-search{position:relative;flex:1 1 260px;min-width:0;display:block}
.tp-faq-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;
 stroke:#8A8477;fill:none;stroke-width:1.6;stroke-linecap:round;pointer-events:none;z-index:1}
/* The site-wide field rule sets padding with !important, so the icon well has
   to be declared at least as strongly or the placeholder sits under the glass. */
html body .tp-faq .tp-faq-search input[type="search"]{
 width:100%!important;padding:11px 14px 11px 42px!important}
.tp-faq-tabs{display:flex;flex-wrap:wrap;gap:6px}

.tp-faq-list{border-top:1px solid #E6E4DF}
.tp-qa{border-bottom:1px solid #E6E4DF}
.tp-qa[hidden]{display:none}
.tp-qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
 padding:20px 4px;font-size:16px;line-height:1.45;color:#14161A;
 transition:color .18s ease}
.tp-qa summary::-webkit-details-marker{display:none}
.tp-qa summary:hover{color:#856812}
.tp-qa summary span{flex:1 1 auto;min-width:0}
/* A drawn plus that becomes a minus — no glyph, so it never inherits the
   serif face and never sits off-centre. */
.tp-qa summary:after{content:"";flex:0 0 auto;width:14px;height:14px;margin-top:4px;
 background:
  linear-gradient(#14161A,#14161A) center/14px 1.5px no-repeat,
  linear-gradient(#14161A,#14161A) center/1.5px 14px no-repeat;
 transition:transform .25s cubic-bezier(.22,.61,.36,1),opacity .2s ease;opacity:.55}
.tp-qa[open] summary:after{transform:rotate(90deg);
 background:linear-gradient(#856812,#856812) center/14px 1.5px no-repeat;opacity:1}
.tp-qa[open] summary{color:#14161A;font-weight:500}
.tp-qa > div{padding:0 44px 22px 4px;font-size:15px;line-height:1.7;color:#4A4F55;max-width:72ch}
.tp-qa > div p{margin:0 0 12px}
.tp-qa > div p:last-child{margin:0}
.tp-qa mark{background:rgba(168,135,28,.22);color:inherit;padding:0 2px;border-radius:2px}
.tp-faq-empty{padding:36px 4px;color:#5A5F66;font-size:14.5px}

/* ---- How it Works: a real timeline ----
   Split layout on desktop: Left column has numbered step items, right column has sticky photo stage.
*/
body.page-id-36 .tp-proc,
.tp-proc{max-width:1180px!important;margin:0 auto!important;padding:0!important}

body.page-id-36 .tp-proc-split,
.tp-proc-split{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr)!important;
 gap:clamp(32px,5vw,64px)!important;align-items:start!important;margin-top:clamp(32px,4vw,48px)!important}

body.page-id-36 .tp-steps,
.tp-proc-split .tp-steps,
.tp-steps{display:block!important;list-style:none!important;margin:0!important;padding:0!important;position:relative!important;grid-template-columns:none!important}
.tp-steps:before{content:""!important;position:absolute!important;left:19px!important;top:14px!important;bottom:14px!important;width:1px!important;background:#E6E4DF!important}

body.page-id-36 .tp-stepc,
.tp-stepc{position:relative!important;display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;
 gap:20px!important;padding-bottom:clamp(32px,4vw,48px)!important;border:0!important;cursor:pointer!important}
.tp-stepc:last-child{padding-bottom:0!important}

body.page-id-36 .tp-stepn,
.tp-stepn{position:relative!important;z-index:1!important;
 width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;
 aspect-ratio:1/1!important;border-radius:50%!important;align-self:start!important;justify-self:start!important;
 display:grid!important;place-items:center!important;padding:0!important;
 background:#FFFFFF!important;border:1px solid #E6E4DF!important;
 font-family:'Poppins', sans-serif!important;font-weight:700!important;font-size:12px!important;
 font-variant-numeric:lining-nums tabular-nums!important;color:#14161A!important;letter-spacing:-.01em!important;
 transition:all .28s cubic-bezier(.16,1,.3,1)!important}
.tp-stepc > div{min-width:0!important}
.tp-stepc:hover .tp-stepn{border-color:#A8871C!important;color:#856812!important}
.tp-steph{margin:8px 0 8px!important;font-size:clamp(19px,2.2vw,23px)!important;line-height:1.25!important;color:#14161A!important;transition:color .25s ease!important}
.tp-stept{margin:0 0 12px!important;font-size:15px!important;line-height:1.7!important;color:#4A4F55!important;max-width:62ch!important}
.tp-stepm{margin:0!important;display:inline-flex!important;align-items:center!important;padding:6px 12px!important;border-radius:999px!important;
 background:#FAFAF8!important;border:1px solid #E6E4DF!important;
 font-size:10.5px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#5A5F66!important;transition:all .25s ease!important}
.tp-proc-cta{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;
 margin-top:clamp(40px,5vw,60px)!important;padding-top:clamp(28px,3.5vw,36px)!important;border-top:1px solid #E6E4DF!important}
.tp-proc-cta p{font-size:15px!important;color:#4A4F55!important}

/* ---- desktop step pacing & active prominence ---- */
@media (min-width:1025px){
 body.page-id-36 .tp-stepc{min-height:360px!important;padding-bottom:70px!important;opacity:0.38!important;transform:none!important;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)!important}
 body.page-id-36 .tp-stepc:hover{opacity:0.75!important}
 body.page-id-36 .tp-stepc.is-current{opacity:1!important;transform:translateX(4px)!important}
 body.page-id-36 .tp-stepc.is-current .tp-stepn{background:#14161A!important;color:#FFFFFF!important;
  border-color:#A8871C!important;box-shadow:0 0 0 4px rgba(168,135,28,.2),0 4px 12px rgba(0,0,0,.12)!important;
  transform:scale(1.08)!important}
 body.page-id-36 .tp-stepc.is-current .tp-steph{color:#14161A!important;font-weight:500!important}
 body.page-id-36 .tp-stepc.is-current .tp-stepm{border-color:rgba(168,135,28,.35)!important;background:rgba(168,135,28,.06)!important;color:#856812!important}
 
 body.page-id-36 .tp-step-shot,
 .tp-step-shot{display:none!important}
}

/* ---- the picture that follows the steps ---- */
body.page-id-36 .tp-proc-media,
.tp-proc-media{position:sticky!important;top:calc(var(--tp-header-h,76px) + 32px)!important;display:block!important}
body.page-id-36 .tp-proc-stage,
.tp-proc-stage{position:relative!important;width:100%!important;aspect-ratio:4/5!important;border-radius:16px!important;overflow:hidden!important;
 background:#F3F1EC!important;border:1px solid #E6E4DF!important}
body.page-id-36 .tp-proc-stage img,
.tp-proc-stage img{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
 opacity:0!important;transform:scale(1.025)!important;pointer-events:none!important;
 transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)!important}
body.page-id-36 .tp-proc-stage img.is-on,
.tp-proc-stage img.is-on{opacity:1!important;transform:none!important;pointer-events:auto!important}
body.page-id-36 .tp-proc-cap,
.tp-proc-cap{margin:12px 0 0!important;font-size:12.5px!important;line-height:1.5!important;color:#5A5F66!important;min-height:19px!important;
 transition:opacity .25s ease!important}

/* On mobile / tablet, photo is inside each step */
.tp-step-shot{margin:0 0 14px!important;border-radius:12px!important;overflow:hidden!important;
 background:#F3F1EC!important;border:1px solid #E6E4DF!important;aspect-ratio:4/3!important}
.tp-step-shot img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 38%!important;display:block!important}
@media (max-width:600px){
 .tp-step-shot{aspect-ratio:3/4!important}
}

@media (max-width:1024px){
 body.page-id-36 .tp-proc-split,
 .tp-proc-split{display:block!important;grid-template-columns:none!important;gap:0!important}
 body.page-id-36 .tp-proc-media,
 .tp-proc-media{display:none!important}
 body.page-id-36 .tp-step-shot,
 .tp-step-shot{display:block!important}
}

/* ---- About: a single centered editorial story column ---- */
body.page-id-34 .tp-story,
.tp-story{display:block!important;max-width:760px!important;width:100%!important;margin-inline:auto!important;padding:0!important;grid-template-columns:none!important}
body.page-id-34 .tp-story > *,
.tp-story > *{display:block!important;width:100%!important;max-width:100%!important;float:none!important;clear:both!important;grid-column:auto!important}
body.page-id-34 .tp-story-open,
.tp-story-open{margin-bottom:clamp(24px,3vw,34px)!important}
body.page-id-34 .tp-story-open .tp-eyebrow,
body.page-id-34 .tp-story-open .tp-h2,
.tp-story-open .tp-eyebrow,.tp-story-open .tp-h2{margin:0!important}
.tp-story-open .tp-h2{margin-top:8px!important}
body.page-id-34 .tp-story-body,
.tp-story-body{display:block!important;width:100%!important}
.tp-story-body p{font-size:16.5px!important;line-height:1.75!important;color:#3F444A!important;margin:0 0 20px!important;max-width:68ch!important}
.tp-story-body .tp-lede{font-size:clamp(19px,2.2vw,22px)!important;line-height:1.55!important;color:#14161A!important;margin-bottom:26px!important}
.tp-pull{margin:32px 0!important;padding:0 0 0 22px!important;border-left:2px solid #A8871C!important;
 font-family:'Poppins', sans-serif!important;font-size:clamp(22px,2.8vw,28px)!important;line-height:1.35!important;
 color:#14161A!important;font-style:italic!important}

/* ---- About: Company Profile Section ---- */
body.page-id-34 .tp-topee-profile,
.tp-topee-profile{display:block!important;width:100%!important;margin-top:clamp(40px,5vw,60px)!important;padding-top:clamp(28px,3.5vw,36px)!important;border-top:1px solid #E6E4DF!important}
.tp-topee-profile .tp-timeline-h3{font-size:clamp(22px,2.6vw,28px)!important;margin:8px 0 16px!important;color:#14161A!important}
.tp-topee-profile p{font-size:15.5px!important;line-height:1.7!important;color:#4A4F55!important;margin:0 0 14px!important;max-width:68ch!important}

/* ---- About: UI-focused Milestones Timeline ---- */
body.page-id-34 .tp-timeline-section,
.tp-timeline-section{
 display:block!important;
 width:100%!important;
 max-width:760px!important;
 margin:clamp(48px,6vw,72px) auto 0!important;
 padding-top:clamp(36px,4.5vw,48px)!important;
 border-top:1px solid #E6E4DF!important;
 cursor:default!important;
 user-select:none!important;
}
.tp-timeline-header{
 margin-bottom:clamp(28px,4vw,36px)!important;
 text-align:center!important;
}
.tp-timeline-header .tp-eyebrow{
 margin:0 0 8px!important;
}
.tp-timeline-h3{
 font-family:'Poppins', sans-serif!important;
 font-size:clamp(28px,3.5vw,36px)!important;
 font-weight:600!important;
 line-height:1.2!important;
 color:#14161A!important;
 margin:0!important;
}
body.page-id-34 .tp-timeline-track,
.tp-timeline-track{
 position:relative!important;
 display:grid!important;
 grid-template-columns:repeat(3,1fr)!important;
 gap:clamp(14px,2vw,22px)!important;
 width:100%!important;
 max-width:100%!important;
 box-sizing:border-box!important;
}
body.page-id-34 .tp-timeline-spine,
.tp-timeline-spine{
 position:absolute!important;
 top:19px!important;
 left:16.66%!important;
 right:16.66%!important;
 height:2px!important;
 background:linear-gradient(90deg,#8E7037 0%,#D4AF37 50%,#8E7037 100%)!important;
 z-index:1!important;
 display:block!important;
}
body.page-id-34 .tp-timeline-item,
.tp-timeline-item{
 position:relative!important;
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 z-index:2!important;
 height:100%!important;
 min-width:0!important;
 width:100%!important;
}
.tp-timeline-node-wrap{
 width:100%!important;
 display:flex!important;
 justify-content:center!important;
 margin-bottom:20px!important;
}
.tp-timeline-node{
 width:40px!important;
 height:40px!important;
 min-width:40px!important;
 max-width:40px!important;
 border-radius:50%!important;
 background:#FFFFFF!important;
 border:2px solid #8E7037!important;
 box-shadow:0 0 0 5px rgba(142,112,55,0.12),0 4px 12px rgba(20,22,26,0.06)!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
}
.tp-timeline-dot{
 width:10px!important;
 height:10px!important;
 border-radius:50%!important;
 background:#8E7037!important;
}
body.page-id-34 .tp-timeline-card,
.tp-timeline-card{
 width:100%!important;
 max-width:100%!important;
 background:#FAFAF8!important;
 border:1px solid #E6E4DF!important;
 border-radius:18px!important;
 padding:22px 14px!important;
 display:flex!important;
 flex-direction:column!important;
 justify-content:space-between!important;
 flex:1!important;
 box-shadow:0 2px 12px rgba(20,22,26,0.03)!important;
 box-sizing:border-box!important;
 text-align:center!important;
 min-width:0!important;
}
.tp-timeline-card-top{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 margin-bottom:16px!important;
}
.tp-timeline-badge-pill{
 display:inline-flex!important;
 align-items:center!important;
 padding:4px 9px!important;
 background:#FFFFFF!important;
 border:1px solid #E6E4DF!important;
 border-radius:999px!important;
 font-size:10.5px!important;
 font-weight:700!important;
 letter-spacing:.12em!important;
 text-transform:uppercase!important;
 color:#8E7037!important;
}
.tp-timeline-tag{
 font-size:9.5px!important;
 font-weight:700!important;
 letter-spacing:.14em!important;
 text-transform:uppercase!important;
 color:#8A8F96!important;
}
body.page-id-34 .tp-timeline-graphic,
.tp-timeline-graphic{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 margin:0 auto 16px!important;
 width:64px!important;
 height:64px!important;
 max-width:64px!important;
 max-height:64px!important;
 min-width:64px!important;
 min-height:64px!important;
 border-radius:16px!important;
 background:#FFFFFF!important;
 border:1px solid #EDEAE2!important;
 box-shadow:0 3px 10px rgba(20,22,26,0.03)!important;
 box-sizing:border-box!important;
 overflow:hidden!important;
}
body.page-id-34 .tp-timeline-icon,
.tp-timeline-icon,
body.page-id-34 .tp-timeline-graphic svg,
.tp-timeline-graphic svg{
 width:34px!important;
 height:34px!important;
 max-width:34px!important;
 max-height:34px!important;
 display:block!important;
 margin:0 auto!important;
 flex-shrink:0!important;
}
.tp-timeline-stat-wrap{
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 justify-content:center!important;
 width:120px!important;
 min-height:72px!important;
 padding:10px 18px!important;
 box-sizing:border-box!important;
 border:1px solid #EDEAE2!important;
 border-radius:14px!important;
 background:#FFFFFF!important;
 box-shadow:0 3px 10px rgba(20,22,26,.05)!important;
 overflow:visible!important;
}
.tp-timeline-stat-num{
 font-family:'Poppins', sans-serif!important;
 font-size:26px!important;
 font-weight:500!important;
 line-height:1!important;
 color:#8E7037!important;
 letter-spacing:-0.01em!important;
}
/* The milestone graphic is wider than the icon slot. Without resizing its
   parent, the 120px stat card is clipped back to the inherited 64px square. */
.tp-timeline-graphic:has(.tp-timeline-stat-wrap),
body.page-id-34 .tp-timeline-graphic:has(.tp-timeline-stat-wrap){
 width:120px!important;
 height:72px!important;
 min-width:120px!important;
 min-height:72px!important;
 max-width:120px!important;
 max-height:72px!important;
 overflow:visible!important;
}
.tp-timeline-content{
 flex-grow:1!important;
 display:flex!important;
 flex-direction:column!important;
 justify-content:center!important;
}
.tp-timeline-title{
 font-family:'Poppins', sans-serif!important;
 font-size:15px!important;
 font-weight:600!important;
 color:#14161A!important;
 margin:0 0 6px!important;
 line-height:1.3!important;
}
.tp-timeline-desc{
 font-size:12.5px!important;
 line-height:1.5!important;
 color:#5A6065!important;
 margin:0!important;
}

@media (max-width:768px){
 body.page-id-34 .tp-timeline-header,
 .tp-timeline-header{text-align:left!important}
 body.page-id-34 .tp-timeline-track,
 .tp-timeline-track{grid-template-columns:1fr!important;gap:20px!important;padding-left:36px!important}
 body.page-id-34 .tp-timeline-spine,
 .tp-timeline-spine{display:none!important}
 body.page-id-34 .tp-timeline-item,
 .tp-timeline-item{flex-direction:row!important;align-items:flex-start!important}
 .tp-timeline-item:not(:last-child)::after{
  content:''!important;
  position:absolute!important;
  top:36px!important;
  bottom:-20px!important;
  left:-19px!important;
  width:2px!important;
  background:linear-gradient(180deg,#8E7037 0%,#D4AF37 50%,#8E7037 100%)!important;
  z-index:1!important;
 }
 .tp-timeline-node-wrap{
  width:auto!important;
  margin-bottom:0!important;
  margin-left:-36px!important;
  margin-right:18px!important;
  padding-top:18px!important;
 }
 .tp-timeline-node{width:36px!important;height:36px!important}
 .tp-timeline-dot{width:9px!important;height:9px!important}
 .tp-timeline-card{padding:18px 16px!important;text-align:left!important;flex-direction:column!important}
 .tp-timeline-card-top{margin-bottom:12px!important}
 body.page-id-34 .tp-timeline-graphic,
 .tp-timeline-graphic{margin:0 0 14px 0!important;width:52px!important;height:52px!important}
 .tp-timeline-stat-num{font-size:22px!important}
 .tp-timeline-content{text-align:left!important}
}

.tp-story-rules{margin-top:clamp(48px,6vw,72px);padding-top:clamp(32px,4vw,44px);border-top:1px solid #E6E4DF}
.tp-story-rules > .tp-eyebrow{margin:0 0 22px}
.tp-rules{list-style:none;counter-reset:r;margin:0;padding:0;display:grid;gap:2px}
.tp-rules li{counter-increment:r;display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;
 padding:20px 0;border-bottom:1px solid #EFEDE8}
.tp-rules li:last-child{border-bottom:0}
.tp-rules li:before{content:counter(r,decimal-leading-zero);grid-column:1;grid-row:1;
 font-family:'Poppins', sans-serif;font-weight:700;font-size:11px;
 font-variant-numeric:lining-nums tabular-nums;color:#A8871C;padding-top:5px}
.tp-rules li h3{grid-column:2;grid-row:1}
.tp-rules li p{grid-column:2;grid-row:2}
.tp-rules h3{margin:0 0 6px;font-size:17px;line-height:1.3;color:#14161A}
.tp-rules p{margin:0;font-size:14.5px;line-height:1.65;color:#4A4F55;max-width:58ch}
body.page-id-34 .tp-story-sign,
.tp-story-sign{margin-top:clamp(40px,5vw,60px)!important;padding:clamp(26px,3.5vw,36px)!important;
 border:1px solid #E6E4DF!important;border-radius:16px!important;background:#FAFAF8!important}
.tp-story-sign p{margin:0 0 20px!important;font-size:15px!important;line-height:1.7!important;color:#4A4F55!important;max-width:60ch!important}
body.page-id-34 .tp-story-actions,
.tp-story-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important;align-items:center!important;justify-content:center!important}
body.page-id-34 .tp-story-actions > a,
.tp-story-actions > a{min-height:50px!important;height:50px!important;margin:0!important;
 padding:14px 28px!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important}

@media (max-width:600px){
 .tp-faq-nav{gap:10px}
 .tp-faq-tabs{flex-wrap:wrap;overflow:visible;margin:0;padding:0;width:100%;max-width:100%;box-sizing:border-box}
 .tp-faq-tabs::-webkit-scrollbar{display:none}
 .tp-faq .tp-chip{min-height:44px!important;display:inline-flex;align-items:center;justify-content:center}
 .tp-qa summary{font-size:15px;padding:17px 2px;gap:12px}
 .tp-qa > div{padding:0 30px 18px 2px;font-size:14.5px}
 .tp-stepc{grid-template-columns:32px minmax(0,1fr)}
 .tp-steps:before{left:15px}
 .tp-stepn{width:32px;height:32px;font-size:11px}
 .tp-proc-cta{flex-direction:column;align-items:stretch}
 .tp-proc-cta .tp-side-cta{justify-content:center}
 .tp-rules li{grid-template-columns:26px minmax(0,1fr);gap:12px}
 .tp-story-actions > a{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
 .tp-qa summary,.tp-qa summary:after{transition:none!important}
}


/* ---- ALL REFINEMENTS (MOBILE FIXED HEADER & SEQUENCE ADJUSTMENTS) ---- */
@media (max-width: 1024px) {
  .elementor-button{min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding-top:12px!important;padding-bottom:12px!important;white-space:normal!important;text-align:center!important}
  .tp-base-tab{min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding-top:10px!important;padding-bottom:10px!important}
  html { scroll-padding-top: 84px; }
  .tp-timeline-section,
  .tp-faq,
  .tp-proc,
  .tp-cost,
  .tp-catalog-section,
  .tp-studios-section,
  .tp-rvpage { scroll-margin-top: 84px; }
  html body header#site-header.site-header.skiper38-header,
  header#site-header.skiper38-header,
  header#site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 60px !important;
    min-height: 60px !important;
    z-index: 999999 !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }
  .skiper38-nav {
    display: none !important;
  }
}
@media (max-width: 767px) {
  html body header#site-header.site-header.skiper38-header,
  header#site-header.skiper38-header,
  header#site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 60px !important;
    min-height: 60px !important;
    z-index: 999999 !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }
  .skiper38-nav {
    display: none !important;
  }
}

/* Review popup suppressed */
.tp-rvtip {
  display: none !important;
}

/* Subject breathing room: pull subject away from right screen edge on desktop */
@media (min-width: 1025px) {
  .elementor-element-375f65f {
    padding-right: clamp(40px, 6vw, 110px) !important;
    box-sizing: border-box !important;
  }
}

/* Cutout edge fix: multiply blend mode dissolves any off-white hair/shoulder boundaries */
.tsq-canvas {
  mix-blend-mode: multiply !important;
}

/* Clean, modern single number marker treatment without accidental dot */
.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: #9C854E !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;
}

/* Darker, high-contrast body copy for effortless readability */
.tsq-step .tsq-p {
  color: #1E2226 !important;
  font-weight: 400 !important;
}
.tsq-step .tsq-list {
  color: #22262A !important;
}
.tsq-step .tsq-list strong {
  color: #0E1012 !important;
  font-weight: 600 !important;
}
.tp-body, p.tp-hero-sub, .tp-card-d {
  color: #1E2226 !important;
}

/* Back to top breathing room */
#tp-top {
  right: clamp(28px, 4vw, 48px) !important;
  bottom: clamp(28px, 4vw, 48px) !important;
}
@media (max-width: 600px) {
  #tp-top {
    right: 22px !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
  }
}

/* Prevent horizontal overflow causing macOS scrollbar thumb indicator */
html:root, body {
  overflow-x: clip !important;
  max-width: 100vw !important;
}


/* topee-global-typography */

/* Headings & Display Elements: Bodoni Moda */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
.tp-hero-h,
.tp-h2, .tp-h3, .tp-h4,
.tp-card-h,
.tp-cost-h,
.tp-cost-title,
.tsq-h,
.tsq-step .tsq-h,
.tsq-num,
.tsq-step .tsq-num,
.tp-spec-row h4,
.tp-spec-col h4,
.tp-voice-q,
.tp-steph,
.tp-quote,
.tp-pull,
blockquote,
.tp-rvpage-h,
.tp-rvpage-h2,
.tp-rvpage-cta h2,
.tp-timeline-h3,
.tp-timeline-stat-num,
.tp-base-foot-title,
#tp-base-title,
.tp-bcard-title,
.tp-story-open h2,
.tp-rules h3,
.tp-voices-head h2,
.tp-fact-n {
  font-family: 'Poppins', sans-serif !important;
}

.tp-timeline-stat-num,
.tsq-step .tsq-num,
.tp-fact-n {
  font-family: 'Poppins', sans-serif !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}

/* Body Text, Navigation, Controls, Labels & UI: Montserrat */
html, body,
p, span, li, a, input, textarea, select, button, label,
.elementor-widget-text-editor,
.elementor-button,
.elementor-icon-list-text,
.subheading,
nav, nav a,
.skiper38-nav-title,
.skiper38-nav-sub a,
.skiper38-drawer-title,
.skiper38-drawer-sub a,
.skiper38-megamenu-h,
.skiper38-link,
.tp-eyebrow,
.tp-timeline-eyebrow,
.tp-timeline-tag,
.tp-timeline-badge-pill,
.tp-timeline-desc,
.tp-timeline-title,
.tp-story-body p,
.tp-rules p,
.tp-story-sign p,
.tp-rules li:before,
.tp-cost-card p,
.tp-cost-card li,
.tp-cost-card-cta,
.tp-hero-eyebrow,
.tp-hero-sub,
.tp-hero-marks span,
.tp-hero-marks strong,
.tp-hero-cta,
.tp-card-tag,
.tp-bcard-label,
.tp-bcard-badge,
.tp-bcard-summary,
.tp-bchip,
.tp-chip,
.tp-side-cta,
.tp-sd-ghost,
.tp-base-tab,
.tp-size-badge,
.tp-color-name,
.tp-density-name,
.tp-density-pct,
.tp-faq-search input,
.tp-qa summary,
.tp-qa > div,
.tp-voice-n,
.tp-voice-by,
.tp-avatar,
.tp-filters-count,
.tp-quiz-summary-title,
.tp-fg-label,
.tp-cost-badge,
.tp-cost-meta,
.tp-cost-note {
  font-family: 'Poppins', sans-serif !important;
}

.elementor-widget-heading .elementor-heading-title,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
.tp-hero-h,
.tp-h2,
.tp-card-h,
.tp-cost-h,
.tsq-h {
  font-weight: 600 !important;
}

b, strong,
.elementor-widget-text-editor strong,
.elementor-widget-text-editor b {
  font-weight: 700 !important;
}

/* tp-studio-x */

/* ======================================================================
   ONE GRID, ONE LEFT EDGE
   These pages were built six containers deep and every level added its own
   horizontal padding (22 + 10 + 16 + 10 + 10 + 24 + 36 + 40), which put eight
   different left edges on a single page. Nesting now contributes no horizontal
   space at all; one column defines the edge for everything.
   ====================================================================== */
body.page-id-60 .e-con,
body.page-id-61 .e-con,
body.page-id-62 .e-con{padding-left:0!important;padding-right:0!important;max-width:100%!important}

body.page-id-60 [data-elementor-type="wp-page"] > .e-con,
body.page-id-61 [data-elementor-type="wp-page"] > .e-con,
body.page-id-62 [data-elementor-type="wp-page"] > .e-con{
 padding:clamp(72px,9vw,120px) clamp(18px,5vw,40px) clamp(64px,8vw,96px)!important;
 overflow-x:clip}

body.page-id-60 [data-elementor-type="wp-page"] > .e-con > *,
body.page-id-61 [data-elementor-type="wp-page"] > .e-con > *,
body.page-id-62 [data-elementor-type="wp-page"] > .e-con > *{
 width:100%!important;max-width:1120px!important;margin-inline:auto!important}

/* ---- page head ---- */
body.page-id-61 .elementor-element-88b33c1,
body.page-id-62 .elementor-element-5c1c8c1{text-align:center;margin-bottom:clamp(36px,5vw,56px)}
body.page-id-61 .elementor-element-88b33c1 .elementor-widget-text-editor,
body.page-id-62 .elementor-element-5c1c8c1 .elementor-widget-text-editor{max-width:52ch;margin-inline:auto}

/* ======================================================================
   STUDIO DETAIL PAGES
   ====================================================================== */
.tp-sd{display:flex;flex-direction:column;gap:clamp(48px,7vw,88px)}
.tp-sd img{display:block;width:100%;height:auto}

.tp-sd-hero{margin:0}
.tp-sd-hero img{border-radius:16px;aspect-ratio:16/7;object-fit:cover}
.tp-sd-hero figcaption{margin-top:12px;font-size:12.5px;color:#5A5F66;text-align:center}

/* Four facts across the top. auto-fit keeps them on one row where there is
   room and folds to two, then one, without a breakpoint for each step. */
.tp-sd-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
 gap:1px;background:#E6E4DF;border:1px solid #E6E4DF;border-radius:14px;overflow:hidden;margin-top:-24px}
.tp-sd-facts > div{background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:5px;min-width:0}
.tp-sd-facts span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5A5F66}
.tp-sd-facts b{font-size:14.5px;font-weight:500;color:#14161A;line-height:1.35}

.tp-sd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:clamp(24px,4vw,56px);align-items:center}
.tp-sd-shot{margin:0}
.tp-sd-shot img{border-radius:16px;aspect-ratio:4/3;object-fit:cover}
.tp-sd-copy .tp-h2{margin:8px 0 14px}
.tp-sd-copy .tp-body{margin:0;max-width:46ch}

.tp-sd-block > .tp-eyebrow{margin:0}
.tp-sd-block > .tp-h2{margin:8px 0 clamp(24px,3vw,36px)}
.tp-sd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.tp-sd-grid article{border:1px solid #E6E4DF;border-radius:14px;padding:22px;background:#FAFAF8;min-width:0}
.tp-sd-grid h3{margin:0 0 8px;font-size:16px;line-height:1.3;color:#14161A}
.tp-sd-grid p{margin:0;font-size:14px;line-height:1.6;color:#4A4F55}

.tp-sd-loc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:clamp(24px,4vw,56px);align-items:start}
.tp-sd-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.tp-sd-list li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;
 font-size:14px;line-height:1.5;color:#14161A;padding-bottom:12px;border-bottom:1px solid #EFEDE8}
.tp-sd-list li:last-child{border-bottom:0;padding-bottom:0}
.tp-sd-list span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5A5F66;padding-top:3px}
.tp-sd-map{border:1px solid #E6E4DF;border-radius:16px;overflow:hidden;background:#F3F1EC}
.tp-sd-map iframe{display:block;width:100%;height:100%;min-height:340px;border:0}

.tp-sd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tp-sd-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
 padding:14px 24px;border:1px solid #E6E4DF;border-radius:14px;background:#fff;
 font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#14161A;text-decoration:none;
 transition:border-color .2s ease,background .2s ease}
.tp-sd-ghost:hover{border-color:#A8871C;background:rgba(168,135,28,.06)}

.tp-sd-cta{text-align:center;border:1px solid #E6E4DF;border-radius:18px;background:#FAFAF8;
 padding:clamp(32px,5vw,56px) clamp(20px,4vw,40px)}
.tp-sd-cta .tp-h2{margin:0 0 12px}
.tp-sd-cta .tp-body{margin:0 auto;max-width:48ch}
.tp-sd-cta .tp-sd-actions{justify-content:center}

/* ======================================================================
   STUDIO HUB CARDS
   ====================================================================== */
.tp-studios{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:clamp(18px,2.6vw,28px);margin:clamp(48px,6vw,72px) 0 clamp(40px,5vw,56px)}
.tp-studio{display:flex;flex-direction:column;border:1px solid #E6E4DF;border-radius:16px;overflow:hidden;
 background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;min-width:0}
.tp-studio:hover{border-color:#D8D4C8;box-shadow:0 16px 36px -22px rgba(20,22,26,.3);transform:translateY(-2px)}
.tp-studio-shot{aspect-ratio:16/10;overflow:hidden;background:#F3F1EC}
.tp-studio-shot img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.tp-studio:hover .tp-studio-shot img{transform:scale(1.04)}
.tp-studio-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
.tp-studio-body .tp-eyebrow,.tp-studio-body .tp-steph{margin:0}
.tp-studio-body .tp-stept{margin:0;max-width:42ch}
.tp-studio-facts{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tp-studio-facts li{font-size:11px;letter-spacing:.06em;color:#5A5F66;border:1px solid #E6E4DF;
 border-radius:999px;padding:5px 10px;background:#FAFAF8}
.tp-studio-body .tp-stepm{margin:6px 0 0;font-size:12.5px;color:#5A5F66}
.tp-studio-body .tp-side-cta{margin-top:16px;align-self:flex-start}

/* ======================================================================
   STUDIO HUB STEPS — compact on desktop
   The global .tp-stepc rule gives a generous padding-bottom suitable for the
   How it Works scroll-sync animation. On the Studio hub that animation does
   not run, so every step gets a much tighter gap.
   ====================================================================== */
body.page-id-60 .tp-stepc{
  padding-bottom:clamp(20px,2.5vw,32px)!important;
  min-height:0!important;
  opacity:1!important;
  transform:none!important;
}
body.page-id-60 .tp-stepc:last-child{padding-bottom:0!important}
body.page-id-60 .tp-steph{font-size:clamp(17px,1.8vw,20px)!important}

/* ---- tablet and below ---- */
@media (max-width:900px){
 .tp-sd-split,.tp-sd-loc{grid-template-columns:1fr}
 .tp-sd-hero img{aspect-ratio:3/2}
 .tp-sd-map iframe{min-height:280px}
 .tp-sd-facts{margin-top:-16px;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
 .tp-sd-grid{grid-template-columns:1fr}
}
/* ---- phones ---- */
@media (max-width:768px){
 .tp-sd{display:flex!important;flex-direction:column!important}
 .tp-sd-loc{order:-1!important;margin-bottom:8px!important}
}
@media (max-width:600px){
 .tp-sd{gap:clamp(40px,10vw,56px)}
 .tp-sd-hero img{aspect-ratio:4/3;border-radius:12px}
 .tp-sd-facts{grid-template-columns:1fr!important;margin-top:-12px;border-radius:12px}
 .tp-sd-facts > div{padding:14px 16px}
 .tp-sd-grid article{padding:18px}
 .tp-sd-list li{grid-template-columns:1fr;gap:3px}
 .tp-sd-list span{padding-top:0}
 .tp-sd-actions{flex-direction:column;align-items:stretch}
 .tp-sd-actions > a{width:100%}
 .tp-studio-body{padding:20px}
}
@media (prefers-reduced-motion:reduce){
 .tp-studio,.tp-studio-shot img,.tp-sd-ghost{transition:none!important}
}