/* 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-fit-x */

/* ======================================================================
   FIND YOUR SYSTEM
   Twelve products is more than anyone chooses from cold. Three questions —
   where the loss is, whether a parting shows, and what the system has to
   survive — narrow it to three, and the grid below dims everything else.
   ====================================================================== */
.tp-fit{border:1px solid #E6E4DF;border-radius:18px;background:#FAFAF8;
 padding:clamp(24px,4vw,44px);margin:0 0 clamp(48px,6vw,72px)}
.tp-fit-head{max-width:46ch;margin-bottom:clamp(24px,3vw,34px)}
.tp-fit-head .tp-eyebrow,.tp-fit-head .tp-h2{margin:0}
.tp-fit-head .tp-h2{margin:8px 0 12px}
.tp-fit-head .tp-body{margin:0}

.tp-fit-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);border:0;padding:0}
.tp-fit-q{border:0;padding:0;margin:0;min-width:0}
.tp-fit-q legend{padding:0;margin:0 0 12px;font-size:13.5px;font-weight:500;color:#14161A;
 display:flex;align-items:baseline;gap:9px}
.tp-fit-q legend span{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;font-size:11px;
 font-variant-numeric:lining-nums tabular-nums;color:#A8871C;letter-spacing:.06em}
.tp-fit-opts{display:grid;gap:8px}
.tp-fit-opts label{display:block;cursor:pointer}
.tp-fit-opts input{position:absolute;opacity:0;width:1px;height:1px}
.tp-fit-opt{display:flex;flex-direction:column;gap:3px;padding:13px 15px;background:#fff;
 border:1px solid #E6E4DF;border-radius:12px;
 transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.tp-fit-opt b{font-size:14px;font-weight:500;color:#14161A;line-height:1.3}
.tp-fit-opt i{font-style:normal;font-size:12.5px;color:#5A5F66;line-height:1.45}
.tp-fit-opts label:hover .tp-fit-opt{border-color:#D8D4C8}
.tp-fit-opts input:focus-visible + .tp-fit-opt{box-shadow:0 0 0 3px rgba(168,135,28,.5)}
.tp-fit-opts input:checked + .tp-fit-opt{border-color:#A8871C;background:rgba(168,135,28,.05);
 box-shadow:inset 3px 0 0 #A8871C}

.tp-fit-out{margin-top:clamp(24px,3vw,34px);padding-top:clamp(22px,3vw,30px);border-top:1px solid #E6E4DF}
.tp-fit-out .tp-eyebrow{margin:0 0 14px}
.tp-fit-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tp-fit-pick{display:flex;flex-direction:column;gap:8px;padding:16px;background:#fff;
 border:1px solid #E6E4DF;border-radius:14px;min-width:0;text-decoration:none}
.tp-fit-pick:hover{border-color:#A8871C}
.tp-fit-pick .r{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#856812}
.tp-fit-pick h4{margin:0;font-size:15px;line-height:1.3;color:#14161A}
.tp-fit-pick p{margin:0;font-size:13px;line-height:1.5;color:#4A4F55}
.tp-fit-pick .p{margin-top:auto;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;
 font-variant-numeric:lining-nums tabular-nums;font-size:15px;color:#14161A;letter-spacing:-.02em}
.tp-fit-note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:#5A5F66;max-width:70ch}
.tp-fit-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.tp-fit-reset{appearance:none;background:none;border:0;cursor:pointer;padding:8px 2px;
 font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#5A5F66;
 border-bottom:1px solid rgba(90,95,102,.3)}
.tp-fit-reset:hover{color:#14161A;border-color:#14161A}

.tp-fit-table{margin-top:clamp(22px,3vw,30px);border-top:1px solid #E6E4DF;padding-top:18px}
.tp-fit-table summary{cursor:pointer;font-size:13px;color:#856812;list-style:none}
.tp-fit-table summary::-webkit-details-marker{display:none}
.tp-fit-table summary:before{content:"+ ";font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.tp-fit-table[open] summary:before{content:"\2212 "}
.tp-fit-table-scroll{overflow-x:auto;margin-top:16px}
.tp-fit-table table{width:100%;border-collapse:collapse;min-width:620px;font-size:13.5px}
.tp-fit-table th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
 color:#5A5F66;font-weight:400;padding:0 14px 10px 0;border-bottom:1px solid #E6E4DF}
.tp-fit-table td{padding:14px 14px 14px 0;border-bottom:1px solid #EFEDE8;vertical-align:top;
 line-height:1.5;color:#4A4F55}
.tp-fit-table td b{color:#14161A;font-weight:500}

/* The grid dims rather than filters: seeing what was ruled out, and being able
   to look at it anyway, is more reassuring than a list that silently shrinks. */
.tp-grid.tp-is-filtered .tp-card{opacity:.34;filter:saturate(.5);transition:opacity .3s ease,filter .3s ease}
.tp-grid.tp-is-filtered .tp-card.tp-match{opacity:1;filter:none}
.tp-card.tp-match{position:relative}
.tp-card.tp-match:before{content:"Suits your answers";position:absolute;top:12px;right:12px;z-index:3;
 padding:5px 11px;border-radius:999px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
 background:#14161A;color:#fff}

@media (max-width:900px){
 .tp-fit-form,.tp-fit-picks{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .tp-fit-opt,.tp-grid.tp-is-filtered .tp-card{transition:none!important}
}

/* tp-shop-x */

.tp-card-media{position:relative;overflow:hidden;background:#F3F1EC;cursor:pointer}
.tp-card-media img{display:block;width:100%;height:auto;transition:opacity .45s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.tp-card-media .tp-alt{position:absolute;inset:0;opacity:0;width:100%;height:100%;object-fit:cover}
.tp-card:hover .tp-card-media .tp-alt,.tp-card:focus-within .tp-card-media .tp-alt{opacity:1}
.tp-card:hover .tp-card-media img,.tp-card:focus-within .tp-card-media img{transform:scale(1.04)}
.tp-card-h{cursor:pointer;transition:color .2s ease}
.tp-card-h:hover{color:#A8871C!important}
.tp-shot-count{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
 padding:5px 10px;border-radius:999px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
 background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 color:#14161A;border:1px solid rgba(20,22,26,.08);opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;cursor:pointer}
.tp-card:hover .tp-shot-count{opacity:1;transform:translateY(0)}
.tp-card-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
/* The resting background and border need the same weight the colour already
   has: without it the theme's own <button> rule fills this pink. */
.tp-card-more{appearance:none!important;-webkit-appearance:none!important;cursor:pointer;
 background:transparent!important;background-image:none!important;
 border:1px solid #E6E4DF!important;border-radius:10px!important;box-shadow:none!important;
 padding:10px 14px!important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
 color:#14161A!important;
 transition:border-color .2s ease,background .2s ease,color .2s ease}
.tp-card-more:hover,.tp-card-more:focus-visible{border-color:#A8871C!important;background:rgba(168,135,28,.08)!important;color:#14161A!important}
.tp-card-more:active{background:#14161A!important;color:#FFFFFF!important;border-color:#14161A!important}

/* ---- details dialog ---- */
#tp-dlg{position:fixed;inset:0;z-index:99999;display:none}
/* The panel used to be absolutely positioned and centred with a transform,
   with its own width/height maths per breakpoint — which is how it ended up
   flush against the viewport edges on a phone and overrunning the top on a
   tablet. Centring it as a flex child instead means the gutter is padding on
   the overlay, so it can never be lost: the panel simply cannot exceed the
   space left inside it. */
#tp-dlg[open],#tp-dlg.is-open{display:flex;align-items:center;justify-content:center;
 padding:clamp(14px,3.5vw,32px)}
#tp-dlg .tp-dlg-veil{position:absolute;inset:0;background:rgba(14,16,18,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
#tp-dlg.is-open .tp-dlg-veil{opacity:1}
#tp-dlg .tp-dlg-panel{position:relative;margin:auto;opacity:0;transform:translateY(10px) scale(.985);
 width:min(940px,100%);max-height:100%;overflow:auto;background:#FFFFFF;
 border:1px solid #E6E4DF;border-radius:18px;box-shadow:0 40px 90px -30px rgba(20,22,26,.45);
 transition:opacity .3s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
#tp-dlg.is-open .tp-dlg-panel{opacity:1;transform:none}
#tp-dlg .tp-dlg-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:0}
#tp-dlg .tp-dlg-media{padding:22px;border-right:1px solid #EFEDE8}
#tp-dlg .tp-dlg-stage{position:relative;border-radius:12px;overflow:hidden;background:#F3F1EC;aspect-ratio:1/1}
#tp-dlg .tp-dlg-stage img{width:100%;height:100%;object-fit:cover;display:block}
#tp-dlg .tp-dlg-thumbs{display:flex;gap:10px;margin-top:12px}
#tp-dlg .tp-dlg-thumbs button{padding:0;border:1px solid #E6E4DF;border-radius:9px;overflow:hidden;background:none;
 cursor:pointer;width:68px;height:68px;flex:0 0 auto;transition:border-color .2s ease}
#tp-dlg .tp-dlg-thumbs button[aria-current="true"]{border-color:#A8871C;box-shadow:0 0 0 3px rgba(168,135,28,.16)}
#tp-dlg .tp-dlg-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
#tp-dlg .tp-dlg-body{padding:26px 26px 24px}
#tp-dlg .tp-dlg-tag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#856812;margin:0 0 8px}
#tp-dlg h3{margin:0 0 6px;font-size:clamp(20px,2.4vw,26px);line-height:1.2;color:#14161A}
#tp-dlg .tp-dlg-price{margin:0 0 16px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;
 font-variant-numeric:lining-nums tabular-nums;font-size:19px;color:#14161A;letter-spacing:-.02em}
#tp-dlg .tp-dlg-desc{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:#4A4F55;max-width:48ch}
#tp-dlg dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0 0 22px;font-size:13.5px}
#tp-dlg dt{color:#5A5F66;font-size:11px;letter-spacing:.12em;text-transform:uppercase;align-self:center}
#tp-dlg dd{margin:0;color:#14161A}
#tp-dlg .tp-dlg-note{font-size:12.5px;color:#5A5F66;margin:14px 0 0;line-height:1.5}
#tp-dlg .tp-dlg-close{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;
 border:1px solid #E6E4DF;background:rgba(255,255,255,.92);cursor:pointer;padding:0;
 display:grid;place-items:center;line-height:0;
 transition:background .18s ease,border-color .18s ease}
#tp-dlg .tp-dlg-close svg{width:15px;height:15px;display:block;
 stroke:#14161A;fill:none;stroke-width:1.5;stroke-linecap:round}
#tp-dlg .tp-dlg-close:hover{background:#F3F1EC;border-color:#D8D4C8}
#tp-dlg .tp-dlg-close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(168,135,28,.5)}
/* Once the dialog stacks, a square photo stage is taller than the viewport on
   its own — the image filled the screen and pushed the name, price and spec
   below the fold, so the panel read as an image viewer. Cap the stage by
   viewport height and let the photo letterbox inside it. */
@media (max-width:820px){
 #tp-dlg .tp-dlg-grid{grid-template-columns:1fr}
 #tp-dlg .tp-dlg-media{border-right:0;border-bottom:1px solid #EFEDE8;padding:16px}
 #tp-dlg .tp-dlg-body{padding:20px}
 #tp-dlg .tp-dlg-stage{aspect-ratio:auto;height:min(30dvh,250px)}
 /* contain, not cover: cropping a product shot to fill the box hides the edge
    of the base, which is the part being judged. The fill is matched to the
    photographs' own backdrop so the letterboxing does not read as a border. */
 #tp-dlg .tp-dlg-stage,
 #tp-dlg .tp-dlg-stage img{object-fit:contain;background:#FBFAF8}
 #tp-dlg .tp-dlg-thumbs{margin-top:10px}
 #tp-dlg .tp-dlg-thumbs button{width:56px;height:56px}
 /* Tighten the card so the whole thing reads without scrolling. */
 #tp-dlg h3{font-size:21px}
 #tp-dlg .tp-dlg-price{margin-bottom:12px}
 #tp-dlg .tp-dlg-desc{font-size:14px;margin-bottom:14px}
 #tp-dlg dl{gap:7px 14px;margin-bottom:16px}
 #tp-dlg .tp-dlg-note{font-size:11.5px;margin-top:12px}
}
@media (max-width:560px){
 #tp-dlg .tp-dlg-media{padding:12px}
 #tp-dlg .tp-dlg-stage{height:min(26dvh,210px)}
 #tp-dlg .tp-dlg-thumbs button{width:48px;height:48px}
 #tp-dlg .tp-dlg-body{padding:16px 16px 20px}
 #tp-dlg dl{grid-template-columns:1fr;gap:2px 0}
 #tp-dlg dt{margin-top:10px}
 #tp-dlg .tp-side-cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
 #tp-dlg .tp-dlg-panel,#tp-dlg .tp-dlg-veil,.tp-card-media img,.tp-shot-count{transition:none!important}
}

/* tp-filters-x */

/* ======================================================================
   FILTER BAR
   This started as a three-question form. Two problems with that: the answer
   cards were large enough to read as content rather than controls, so it was
   not obvious anything needed selecting; and with four options in one column
   and two in another it left a block of dead space. Chips fix both — they are
   unmistakably controls, they wrap to fill their row, and an "All" default
   makes clear that answering is optional.
   ====================================================================== */
/* Ensure the filter widget fills its container */
.elementor-element-e12a240{width:100%!important;max-width:1180px!important}
.tp-filters{width:100%!important;max-width:1180px!important;box-sizing:border-box!important;
 border:1px solid #E6E4DF;border-radius:16px;background:#FAFAF8;
 padding:clamp(16px,2.2vw,22px);margin:0 0 clamp(28px,3.5vw,40px);
 position:-webkit-sticky!important;position:sticky!important;
 top:calc(var(--tp-header-h,76px) + 12px)!important;
 z-index:90!important;
 box-shadow:0 8px 24px -6px rgba(20,22,26,.08)!important}
.tp-filters-bar{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px)}
.tp-fg{display:flex;flex-direction:column;gap:8px;min-width:0}
.tp-fg-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5A5F66}
.tp-fg-chips{display:flex;flex-wrap:wrap;gap:6px}

/* The theme fills every bare <button> with its own pink, and that rule beats
   an unweighted class here — the same fault already fixed on the FAQ chips.
   Everything the theme sets is restated at !important. */
.tp-chip{appearance:none!important;cursor:pointer;white-space:nowrap;
 padding:10px 14px!important;min-height:44px!important;border-radius:999px!important;
 border:1px solid #E0DDD6!important;background:#FFFFFF!important;
 background-image:none!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;text-shadow:none!important;
 transition:border-color .16s ease,background .16s ease,color .16s ease}
.tp-chip:hover{border-color:#C9C4B8!important;background:#FFFFFF!important;color:#14161A!important}
.tp-chip:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(168,135,28,.5)!important}
.tp-chip.is-on,.tp-chip.is-on:hover{background:#14161A!important;background-image:none!important;
 border-color:#14161A!important;color:#FFFFFF!important}

.tp-filters-foot{display:grid;grid-template-columns:auto auto 1fr;
 align-items:start;gap:8px 14px;
 margin-top:16px;padding-top:14px;border-top:1px solid #E6E4DF}
.tp-filters-foot > .tp-fit-table{grid-column:1/-1;grid-row:2}
@media (max-width:600px){
 .tp-filters-foot{grid-template-columns:auto 1fr}
}
.tp-filters-count{margin:0;font-size:12.5px;color:#5A5F66}
.tp-filters-count b{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;
 font-variant-numeric:lining-nums tabular-nums;color:#14161A}
.tp-filters-clear,.tp-filters-clear:hover{appearance:none!important;
 background:none!important;background-image:none!important;border:0!important;
 border-radius:0!important;cursor:pointer;padding:10px 0!important;min-height:44px!important;
 box-shadow:none!important;text-transform:none!important;letter-spacing:0!important;
 font-size:12px!important;color:#856812!important;
 border-bottom:1px solid rgba(133,104,18,.35)!important}
.tp-filters-clear:hover{border-bottom-color:#856812!important}
.tp-filters-foot .tp-fit-table{margin:0 0 0 auto;border:0;padding:0}
.tp-filters-foot .tp-fit-table summary{font-size:12px}

/* Filtering hides rather than dims: with a chip bar the count states what is
   showing, so a dimmed row is just noise. Best match is flagged, not sorted —
   re-ordering under someone's cursor loses the position they were reading. */
.tp-card[hidden]{display:none!important}
.tp-card.tp-match{position:relative;border-color:#A8871C}
.tp-card.tp-match:before{content:"Best match";position:absolute;top:12px;right:12px;z-index:3;
 padding:5px 11px;border-radius:999px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
 background:#14161A;color:#fff}
.tp-filters-empty{grid-column:1/-1;padding:32px;text-align:center;border:1px dashed #E0DDD6;
 border-radius:14px;color:#5A5F66;font-size:14px}

/* ======================================================================
   TWO-UP ON PHONES
   One card per row meant a single product filled the screen and the rest was
   a long scroll. Two-up lets someone compare at a glance, so the card gets a
   tighter type scale and the two actions sit side by side.
   ====================================================================== */
@media (max-width:600px){
 .tp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .tp-card-body{padding:12px 12px 14px!important}
 .tp-card-tag{font-size:8.5px!important;letter-spacing:.14em!important;margin:0 0 6px!important}
 .tp-card-h{font-size:16px!important;line-height:1.25!important;margin:0 0 6px!important}
 .tp-card-d{font-size:12px!important;line-height:1.45!important;margin:0 0 10px!important}
 .tp-card-p{font-size:15px!important;padding-top:10px!important;margin:0 0 10px!important}
 .tp-card-actions{gap:6px!important;margin-top:0!important}
 .tp-card-cta,.tp-card-more{
  flex:1 1 0;min-width:0;align-self:stretch!important;
  padding:10px 6px!important;min-height:44px!important;
  font-size:9px!important;letter-spacing:.08em!important;text-align:center;
  display:inline-flex;align-items:center;justify-content:center}
 .tp-shot-count{font-size:8.5px!important;padding:4px 8px!important;left:8px!important;bottom:8px!important}
 .tp-card.tp-match:before{font-size:8px;padding:4px 8px;top:8px;right:8px}

 .tp-filters{padding:14px;border-radius:14px}
 .tp-filters-bar{gap:14px}
 .tp-fg{width:100%}
 /* The chip rows scroll sideways rather than wrapping to three lines each,
    which would push the products a screen and a half down. */
 .tp-fg-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  margin:0 -14px;padding:0 14px 2px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  /* A chip sliced flat by the edge looks like a bug. Fading the last one
     shows the row continues, which is the only cue that it scrolls. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
 .tp-fg-chips > *{scroll-snap-align:start}
 .tp-fg-chips::-webkit-scrollbar{display:none}
 /* The bar sat a long way below the heading on a phone. */
 .tp-filters{margin:0 0 22px!important}

 /* And below it there was 94px of nothing before the first word of the
    product intro: the filter section carries 80px of bottom padding and the
    shop block adds 52px of its own on top. On a 375px screen that is a third
    of the viewport spent on a gap. */
 body .e-con:has(> .e-con-inner .tp-filters),
 body .e-con:has(.tp-filters){padding-bottom:8px!important}
 body .tp-shop{padding-top:20px!important}
 .tp-filters-foot .tp-fit-table{margin:0;width:100%}
}
@media (max-width:380px){
 .tp-card-cta,.tp-card-more{font-size:8.5px!important;letter-spacing:.05em!important}
}

/* Collapsible drawer on mobile */
.tp-quiz-toggle{display:none}
@media (max-width:768px){
  .tp-filters{padding:0!important;border:1px solid #E6E4DF!important;background:#FAFAF8!important;overflow:hidden!important;
    position:-webkit-sticky!important;position:sticky!important;
    top:calc(var(--tp-header-h,60px) + 8px)!important;
    z-index:90!important;
    box-shadow:0 8px 24px -6px rgba(20,22,26,.12)!important}
  .tp-quiz-drawer summary{
    list-style:none!important;cursor:pointer;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    padding:16px 18px!important;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;
    font-size:13.5px!important;font-weight:700!important;color:#14161A!important;
    user-select:none;-webkit-tap-highlight-color:transparent;
  }
  .tp-quiz-drawer summary::-webkit-details-marker{display:none!important}
  .tp-quiz-summary-title{display:flex;align-items:center;gap:8px}
  .tp-quiz-summary-title:before{content:'';width:7px;height:7px;border-radius:50%;background:#A8871C;display:inline-block}
  .tp-quiz-icon{transition:transform .2s ease;font-size:11px;color:#6E7278;display:inline-block}
  .tp-quiz-drawer[open] .tp-quiz-icon{transform:rotate(180deg)}
  .tp-quiz-drawer .tp-quiz-content{display:none;padding:0 16px 16px 16px;border-top:1px solid #EAE8E2}
  .tp-quiz-drawer[open] .tp-quiz-content{display:block!important}
  /* chip rows bleed edge-to-edge via negative margin — cancel that inside the padded drawer */
  .tp-quiz-drawer[open] .tp-fg-chips{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
  .tp-filters-bar{margin-top:12px}
}
/* ======================================================================
   FIT TABLE — the "which system suits which stage" comparison grid
   ====================================================================== */
.tp-fit-table{margin-top:4px}
.tp-fit-table > summary{
  list-style:none;cursor:pointer;
  font-size:12.5px;font-weight:600;color:#14161A;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 0;user-select:none;-webkit-tap-highlight-color:transparent
}
.tp-fit-table > summary::-webkit-details-marker{display:none}
.tp-fit-table > summary::after{
  content:\"▾\";font-size:11px;color:#6E7278;display:inline-block;
  transition:transform .2s ease
}
.tp-fit-table[open] > summary::after{transform:rotate(180deg)}
.tp-fit-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px}
.tp-fit-table table{
  width:100%;border-collapse:collapse;
  font-size:13px;line-height:1.5;
  table-layout:fixed
}
.tp-fit-table thead th{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#5A5F66;text-align:left;padding:10px 14px;
  border-bottom:1.5px solid #E6E4DF;background:#FAFAF8;
  vertical-align:bottom;white-space:nowrap
}
.tp-fit-table thead th:first-child{width:22%}
.tp-fit-table thead th:nth-child(2){width:32%}
.tp-fit-table thead th:nth-child(3){width:46%}
.tp-fit-table tbody tr{border-bottom:1px solid #EFEDE8}
.tp-fit-table tbody tr:last-child{border-bottom:0}
.tp-fit-table tbody tr:nth-child(odd){background:#FAFAF8}
.tp-fit-table tbody tr:nth-child(even){background:#FFFFFF}
.tp-fit-table tbody td{
  padding:13px 14px;vertical-align:top;color:#3F444A;
  font-size:13px;line-height:1.55
}
.tp-fit-table tbody td:first-child{color:#14161A}
.tp-fit-table tbody td b{font-weight:600;display:block;margin-bottom:2px}
.tp-fit-note{
  margin:12px 0 0;padding:12px 14px;
  background:#F5F3EF;border-radius:10px;border:1px solid #EFEDE8;
  font-size:12px;line-height:1.6;color:#5A5F66
}
@media (max-width:600px){
  .tp-fit-table table{table-layout:auto}
  .tp-fit-table thead th:first-child{min-width:130px}
  .tp-fit-table thead th:nth-child(2){min-width:180px}
  .tp-fit-table thead th:nth-child(3){min-width:200px}
  .tp-fit-table tbody td{padding:11px 12px;font-size:12px}
}

@media (min-width:769px){
  .tp-filters{padding:0!important;border:1px solid #E6E4DF!important;background:#FAFAF8!important;overflow:hidden!important}
  .tp-quiz-drawer{display:block!important;width:100%!important}
  .tp-quiz-drawer summary{display:flex!important;align-items:center!important;justify-content:space-between!important;
    padding:16px 22px!important;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;
    font-size:13.5px!important;font-weight:700!important;color:#14161A!important;
    cursor:pointer;user-select:none;list-style:none!important;-webkit-tap-highlight-color:transparent}
  .tp-quiz-drawer summary::-webkit-details-marker{display:none!important}
  .tp-quiz-drawer .tp-quiz-content{padding:0 22px 18px!important}
  .tp-quiz-drawer[open] .tp-quiz-content{display:block!important}
  .tp-filters-bar{margin-top:4px}
}