/* The Digital Magic — "Magic Signal" design system Taken from the logo: vermilion #F04010, teal #40C0C0, navy-black #101020. The raw logo orange and teal fail AA as text (about 4.0:1 and 2.4:1 on white), so accessible siblings are used wherever type is involved and the literal logo values are reserved for decorative marks. Do not introduce colours or fonts the design does not declare. */ :root{ --tdm-bg:#F5F6F7; --tdm-surface:#FFFFFF; --tdm-ink:#14141E; --tdm-muted:#55555F; --tdm-line:#DFE1E5; --tdm-accent:#D63A0C; --tdm-accent-hover:#B5300A; --tdm-accent-soft:#FCEDE7; --tdm-teal:#1C7F7F; --tdm-teal-bright:#2FB8B8; --tdm-teal-soft:#E3F4F4; --tdm-logo-orange:#F04010; --tdm-on-ink:#C7C7D2; --tdm-on-ink-muted:#9A9AA8; --tdm-on-ink-faint:#7E7E8C; --tdm-r-sm:4px; --tdm-r-md:8px; --tdm-r-lg:14px; --tdm-s-xs:8px; --tdm-s-sm:12px; --tdm-s-md:20px; --tdm-s-lg:36px; --tdm-s-xl:64px; --tdm-s-xxl:96px; --tdm-font-h:Archivo,"Segoe UI",system-ui,-apple-system,sans-serif; --tdm-font-b:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif; --tdm-measure:68ch; } .tdm-page{font-family:var(--tdm-font-b);color:var(--tdm-ink);font-size:17px;line-height:1.65;background:var(--tdm-bg)} .tdm-page *{box-sizing:border-box} /* Base image reset. Declared here, before any component, so component rules that set an explicit height are not overridden by it later in the cascade. */ .tdm-page img{max-width:100%;height:auto;display:block} .tdm-wrap,.tdm-page>section,.tdm-page>.tdm-breadcrumb,.tdm-page>.tdm-body{max-width:1180px;margin-inline:auto;padding-inline:var(--tdm-s-md)} /* ---------- Clear the theme's transparent overlay header ---------- Coreriver renders a transparent, absolutely-positioned header that normally sits over the theme's own page-title block. That block is suppressed on TDM pages, so the content must reserve the header's height itself, otherwise the logo and navigation land on top of the H1. --tdm-header-h is measured at runtime and set to a minimum when the header is in normal flow, so this never introduces a stray gap. The literal values below are only the pre-JavaScript fallback. */ body.tdm-has-sticky #pxl-main{padding-top:0!important} body.tdm-has-sticky .tdm-page{padding-top:var(--tdm-header-h,132px)} @media (max-width:1200px){body.tdm-has-sticky .tdm-page{padding-top:var(--tdm-header-h,104px)}} @media (max-width:767px){body.tdm-has-sticky .tdm-page{padding-top:var(--tdm-header-h,88px)}} /* ---------- Typography ---------- */ .tdm-page h1,.tdm-page h2,.tdm-page h3,.tdm-page h4{font-family:var(--tdm-font-h);font-weight:700;color:var(--tdm-ink);margin:0 0 var(--tdm-s-md)} .tdm-page h1{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.06;letter-spacing:-.02em;max-width:20ch} .tdm-page h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12;letter-spacing:-.015em;margin-top:var(--tdm-s-xl);max-width:26ch} .tdm-page h3{font-size:1.16rem;line-height:1.25;margin-top:var(--tdm-s-lg)} .tdm-page h4{font-size:1.02rem;line-height:1.3} .tdm-page p,.tdm-page li{max-width:var(--tdm-measure)} .tdm-page p{margin:0 0 var(--tdm-s-md)} .tdm-page a{color:var(--tdm-accent);text-underline-offset:3px;text-decoration-thickness:1px} .tdm-page a:hover{color:var(--tdm-accent-hover)} .tdm-page strong{font-weight:600} .tdm-lede{font-size:1.15rem;color:var(--tdm-muted);max-width:60ch} .tdm-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--tdm-teal);margin-bottom:var(--tdm-s-xs);display:block} /* ---------- Breadcrumbs ---------- */ .tdm-breadcrumb{padding-top:var(--tdm-s-md);padding-bottom:0} .tdm-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--tdm-s-xs);margin:0;padding:0;font-size:.83rem;color:var(--tdm-muted)} .tdm-breadcrumb li+li::before{content:"/";margin-right:var(--tdm-s-xs);color:var(--tdm-line)} .tdm-breadcrumb a{color:var(--tdm-muted);text-decoration:none} .tdm-breadcrumb a:hover{color:var(--tdm-accent);text-decoration:underline} /* ---------- Hero banner ---------- Full-bleed band. The copy and facts stay aligned to the 1180 container while the image occupies its own column and runs to the right viewport edge. One deliberate breakout, in keeping with variance 0.45. */ .tdm-page > .tdm-hero{max-width:none;padding-inline:0;background:var(--tdm-surface); border-bottom:1px solid var(--tdm-line)} .tdm-hero__grid{display:grid;grid-template-columns:1fr;gap:0} .tdm-hero p.tdm-lede{margin-bottom:var(--tdm-s-lg)} .tdm-hero__aside{font-size:.97rem;color:var(--tdm-muted)} .tdm-hero__aside dl{margin:0;border-left:2px solid var(--tdm-teal-bright);padding-left:var(--tdm-s-md)} .tdm-hero__aside dt{font-weight:600;color:var(--tdm-ink);font-size:.8rem;text-transform:uppercase; letter-spacing:.07em;margin-top:var(--tdm-s-md)} .tdm-hero__aside dt:first-child{margin-top:0} .tdm-hero__aside dd{margin:2px 0 0} .tdm-hero__media{overflow:hidden;background:var(--tdm-teal-soft)} .tdm-page .tdm-hero__media img{width:100%;height:100%;object-fit:cover;display:block} @media (min-width:1000px){ .tdm-hero__grid{ grid-template-columns: minmax(var(--tdm-s-md), calc((100% - 1180px)/2 + var(--tdm-s-md))) minmax(0, 630px) minmax(330px, 1fr); grid-template-rows:auto auto;align-items:start} .tdm-hero__grid > :first-child{grid-column:2;grid-row:1;padding:var(--tdm-s-xxl) var(--tdm-s-xl) var(--tdm-s-md) 0} .tdm-hero__aside{grid-column:2;grid-row:2;padding:0 var(--tdm-s-xl) var(--tdm-s-xxl) 0} .tdm-hero__media{grid-column:3;grid-row:1 / 3;align-self:stretch;position:relative;min-height:470px; border-radius:var(--tdm-r-lg) 0 0 var(--tdm-r-lg)} .tdm-page .tdm-hero__media img{position:absolute;inset:0;height:100%} } @media (max-width:999px){ .tdm-hero__grid{padding:var(--tdm-s-lg) var(--tdm-s-md) var(--tdm-s-xl)} .tdm-hero__media{order:-1;aspect-ratio:16/9;border-radius:var(--tdm-r-lg);margin-bottom:var(--tdm-s-lg)} } /* ---------- Trust strip: three facts on one rule-bounded line ---------- */ .tdm-strip{border-top:1px solid var(--tdm-line);border-bottom:1px solid var(--tdm-line); display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--tdm-s-lg); padding:var(--tdm-s-lg) 0;margin-top:0} .tdm-strip div b{display:block;font-family:var(--tdm-font-h);font-weight:700;font-size:1.06rem; color:var(--tdm-ink);margin-bottom:4px} .tdm-strip div span{font-size:.94rem;color:var(--tdm-muted);display:block;max-width:34ch} /* ---------- Numbered process: a genuine sequence, so numbers carry meaning ---------- */ .tdm-steps{counter-reset:tdmstep;margin-top:var(--tdm-s-lg);border-top:1px solid var(--tdm-line)} .tdm-steps__item{counter-increment:tdmstep;border-bottom:1px solid var(--tdm-line); display:grid;grid-template-columns:56px 1fr;gap:var(--tdm-s-md);padding:var(--tdm-s-md) 0} .tdm-steps__item::before{content:counter(tdmstep,decimal-leading-zero); font-family:var(--tdm-font-h);font-weight:700;font-size:1.1rem;color:var(--tdm-teal); font-variant-numeric:tabular-nums;padding-top:2px} .tdm-steps__item h3{margin:0 0 5px;font-size:1.06rem} .tdm-steps__item p{margin:0;color:var(--tdm-muted);max-width:64ch} /* ---------- Testimonial quotes ---------- */ .tdm-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--tdm-s-md);margin-top:var(--tdm-s-lg)} .tdm-quotes blockquote{margin:0;background:var(--tdm-surface);border:1px solid var(--tdm-line); border-radius:var(--tdm-r-lg);padding:var(--tdm-s-md) var(--tdm-s-md) var(--tdm-s-sm); display:flex;flex-direction:column} .tdm-quotes blockquote p{font-size:.98rem;margin:0 0 var(--tdm-s-md);max-width:none;flex:1} .tdm-quotes blockquote p::before{content:"";display:block;width:26px;height:2px; background:var(--tdm-teal-bright);margin-bottom:var(--tdm-s-sm)} .tdm-quotes footer{font-size:.88rem;font-weight:600;color:var(--tdm-muted)} /* ---------- Media ---------- */ /* Full-bleed band: image escapes the content column to the viewport edges. */ .tdm-page > .tdm-band{max-width:none;padding-inline:0;position:relative;margin:var(--tdm-s-xl) 0; border-block:1px solid var(--tdm-line);background:var(--tdm-surface);overflow:hidden} .tdm-band__grid{max-width:1180px;margin-inline:auto;padding:0 var(--tdm-s-md); display:grid;grid-template-columns:1fr 1fr;gap:var(--tdm-s-xl);align-items:center;min-height:340px} .tdm-band__body{padding-block:var(--tdm-s-xl)} .tdm-band__body h2{margin-top:0} .tdm-band__body p:last-child{margin-bottom:0} .tdm-band__media{align-self:stretch;position:relative;min-height:280px;border-radius:var(--tdm-r-lg);overflow:hidden} .tdm-band__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .tdm-band--flip .tdm-band__media{order:-1} /* Inline figure inside prose. */ .tdm-figure{margin:var(--tdm-s-lg) 0;border-radius:var(--tdm-r-lg);overflow:hidden; border:1px solid var(--tdm-line);background:var(--tdm-surface)} .tdm-figure img{width:100%} .tdm-figure figcaption{font-size:.88rem;color:var(--tdm-muted);padding:12px var(--tdm-s-md); border-top:1px solid var(--tdm-line);margin:0} /* Service cards that carry a thumbnail. */ .tdm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:var(--tdm-s-md);margin-top:var(--tdm-s-lg)} .tdm-card{border:1px solid var(--tdm-line);border-radius:var(--tdm-r-lg);overflow:hidden; background:var(--tdm-surface);display:flex;flex-direction:column} .tdm-card__media{aspect-ratio:16/9;overflow:hidden;background:var(--tdm-teal-soft)} .tdm-card__media img{width:100%;height:100%;object-fit:cover} .tdm-card__body{padding:var(--tdm-s-md);flex:1} .tdm-card__body h3{margin:0 0 6px;font-size:1.05rem} .tdm-card__body h3 a{text-decoration:none} .tdm-card__body h3 a:hover{text-decoration:underline} .tdm-card__body p{font-size:.95rem;color:var(--tdm-muted);margin:0;max-width:none} @media (max-width:900px){ .tdm-band__grid{grid-template-columns:1fr;gap:0;min-height:0} .tdm-band__media{min-height:240px;order:-1;margin-top:var(--tdm-s-lg)} .tdm-band__body{padding-block:var(--tdm-s-lg)} .tdm-steps__item{grid-template-columns:40px 1fr;gap:var(--tdm-s-sm)} } /* ---------- Buttons ---------- */ /* The theme styles links via #pxl-main a { ... }. An ID selector outranks any class selector, so button colours are forced here rather than losing the cascade and rendering as invisible text on a solid ground. */ .tdm-page .tdm-btn{display:inline-block;font-family:var(--tdm-font-b);font-weight:600;font-size:.97rem;line-height:1.2; padding:14px 22px;border-radius:var(--tdm-r-md);text-decoration:none!important;border:1px solid transparent; transition:background-color .15s ease,border-color .15s ease,color .15s ease;cursor:pointer} .tdm-page .tdm-btn--primary,.tdm-page a.tdm-btn--primary{background:var(--tdm-accent)!important;color:#fff!important} .tdm-page .tdm-btn--primary:hover,.tdm-page a.tdm-btn--primary:hover{background:var(--tdm-accent-hover)!important;color:#fff!important} .tdm-page .tdm-btn--ghost,.tdm-page a.tdm-btn--ghost{background:transparent!important;color:var(--tdm-ink)!important;border-color:var(--tdm-line)} .tdm-page .tdm-btn--ghost:hover,.tdm-page a.tdm-btn--ghost:hover{border-color:var(--tdm-accent);color:var(--tdm-accent)!important} .tdm-actions{display:flex;flex-wrap:wrap;gap:var(--tdm-s-sm);margin-top:var(--tdm-s-md)} /* ---------- Answer block (AI/GEO quotable definition) ---------- */ .tdm-answer{background:var(--tdm-teal-soft);border-left:3px solid var(--tdm-teal-bright); padding:var(--tdm-s-md) var(--tdm-s-md) 4px;border-radius:0 var(--tdm-r-md) var(--tdm-r-md) 0;margin:0 0 var(--tdm-s-lg)} .tdm-answer p{max-width:64ch;margin-bottom:var(--tdm-s-md)} .tdm-answer p:last-child{margin-bottom:var(--tdm-s-md)} /* ---------- Lists ---------- */ .tdm-page ul,.tdm-page ol{padding-left:1.15em;margin:0 0 var(--tdm-s-md)} .tdm-page li{margin-bottom:6px} .tdm-checks{list-style:none;padding-left:0} .tdm-checks li{position:relative;padding-left:26px;margin-bottom:10px} .tdm-checks li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px; border-radius:2px;background:var(--tdm-teal-bright)} /* ---------- Line-separated blocks (used instead of cards) ---------- */ .tdm-rows{border-top:1px solid var(--tdm-line);margin-top:var(--tdm-s-lg)} .tdm-rows__item{border-bottom:1px solid var(--tdm-line);padding:var(--tdm-s-lg) 0; display:grid;grid-template-columns:minmax(180px,.5fr) 1.5fr;gap:var(--tdm-s-lg)} .tdm-rows__item h3{margin:0;font-size:1.1rem} .tdm-rows__item p:last-child{margin-bottom:0} .tdm-rows__item p{max-width:62ch} /* ---------- Service index ---------- */ .tdm-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0; border-top:1px solid var(--tdm-line);margin-top:var(--tdm-s-lg)} .tdm-index__item{border-bottom:1px solid var(--tdm-line);border-right:1px solid var(--tdm-line); padding:var(--tdm-s-md) var(--tdm-s-md) var(--tdm-s-md) 0} .tdm-index__item h3{margin-top:0;font-size:1.05rem} .tdm-index__item h3 a{text-decoration:none} .tdm-index__item h3 a:hover{text-decoration:underline} .tdm-index__item p{font-size:.95rem;color:var(--tdm-muted);margin-bottom:0;max-width:44ch} /* ---------- Tables ---------- */ .tdm-tablewrap{overflow-x:auto;margin:0 0 var(--tdm-s-lg)} .tdm-page table{border-collapse:collapse;width:100%;font-size:.96rem;min-width:520px} .tdm-page th,.tdm-page td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--tdm-line);vertical-align:top} .tdm-page th{font-family:var(--tdm-font-h);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em} .tdm-page tbody tr:hover{background:var(--tdm-surface)} /* ---------- FAQ ---------- */ .tdm-faq{padding-block:var(--tdm-s-lg)} .tdm-faq__list{border-top:1px solid var(--tdm-line)} .tdm-faq__item{border-bottom:1px solid var(--tdm-line)} .tdm-faq__item summary{cursor:pointer;padding:var(--tdm-s-md) 0;list-style-position:outside} .tdm-faq__item summary h3{display:inline;margin:0;font-size:1.05rem;line-height:1.4} .tdm-faq__item summary:hover h3{color:var(--tdm-accent)} .tdm-faq__answer{padding-bottom:var(--tdm-s-md)} .tdm-faq__answer p{margin-bottom:0;color:var(--tdm-muted)} /* ---------- CTA band ---------- */ .tdm-cta{background:var(--tdm-surface);border:1px solid var(--tdm-line);border-radius:var(--tdm-r-lg); padding:var(--tdm-s-xl) var(--tdm-s-lg);margin:var(--tdm-s-xl) auto;max-width:1180px} .tdm-cta h2{margin-top:0} .tdm-cta p{color:var(--tdm-muted);max-width:56ch} .tdm-cta__actions{display:flex;flex-wrap:wrap;gap:var(--tdm-s-sm);margin-top:var(--tdm-s-md)} /* ---------- Area links ---------- */ .tdm-areas{display:flex;flex-wrap:wrap;gap:var(--tdm-s-xs);list-style:none;padding-left:0;margin-top:var(--tdm-s-md)} .tdm-areas li{margin:0} .tdm-areas a{display:inline-block;border:1px solid var(--tdm-line);border-radius:var(--tdm-r-sm); padding:7px 13px;font-size:.92rem;text-decoration:none;color:var(--tdm-ink);background:var(--tdm-surface)} .tdm-areas a:hover{border-color:var(--tdm-accent);color:var(--tdm-accent)} /* ---------- Stat row ---------- */ .tdm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--tdm-s-lg); border-top:1px solid var(--tdm-line);border-bottom:1px solid var(--tdm-line);padding:var(--tdm-s-lg) 0;margin:var(--tdm-s-lg) 0} .tdm-stats__n{font-family:var(--tdm-font-h);font-weight:700;font-size:clamp(2rem,4vw,2.8rem);line-height:1;color:var(--tdm-accent);display:block} .tdm-stats__l{font-size:.9rem;color:var(--tdm-muted);margin-top:6px;display:block;max-width:22ch} /* ---------- Form ---------- */ .tdm-form{background:var(--tdm-surface);border:1px solid var(--tdm-line);border-radius:var(--tdm-r-lg);padding:var(--tdm-s-lg)} .tdm-form .tdm-field{margin-bottom:var(--tdm-s-md)} .tdm-form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px} .tdm-form .req{color:var(--tdm-accent)} .tdm-form input,.tdm-form select,.tdm-form textarea{width:100%;font-family:var(--tdm-font-b);font-size:1rem; padding:11px 13px;border:1px solid var(--tdm-line);border-radius:var(--tdm-r-sm);background:#fff;color:var(--tdm-ink)} .tdm-form input:focus,.tdm-form select:focus,.tdm-form textarea:focus{outline:2px solid var(--tdm-accent);outline-offset:1px;border-color:var(--tdm-accent)} .tdm-form .tdm-hint{font-size:.83rem;color:var(--tdm-muted);margin-top:5px} .tdm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--tdm-s-md)} /* ---------- Focus + skip link (accessibility) ---------- */ .tdm-page a:focus-visible,.tdm-page button:focus-visible,.tdm-page summary:focus-visible{ outline:2px solid var(--tdm-accent);outline-offset:2px;border-radius:2px} .tdm-skip{position:absolute;left:-9999px;top:0;background:var(--tdm-accent);color:#fff; padding:12px 18px;z-index:100000;text-decoration:none;border-radius:0 0 var(--tdm-r-md) 0} .tdm-skip:focus{left:0} /* ---------- Sticky mobile action bar ---------- */ .tdm-sticky{display:none} @media (max-width:768px){ .tdm-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9998; background:var(--tdm-surface);border-top:1px solid var(--tdm-line); box-shadow:0 -4px 16px rgba(20,29,25,.10)} .tdm-sticky a{flex:1;text-align:center;padding:14px 8px;font-weight:600;font-size:.95rem; text-decoration:none;color:var(--tdm-ink)} .tdm-sticky a+a{border-left:1px solid var(--tdm-line)} .tdm-sticky a.is-primary{background:var(--tdm-accent);color:#fff} body.tdm-has-sticky{padding-bottom:56px} } /* ---------- Responsive collapses (declared, not assumed) ---------- */ @media (max-width:900px){ .tdm-hero__grid{grid-template-columns:1fr;gap:var(--tdm-s-lg)} .tdm-rows__item{grid-template-columns:1fr;gap:var(--tdm-s-sm)} .tdm-form-grid{grid-template-columns:1fr} .tdm-index__item{border-right:none} } @media (max-width:600px){ .tdm-page{font-size:16px} .tdm-cta{padding:var(--tdm-s-lg) var(--tdm-s-md);border-radius:var(--tdm-r-md)} .tdm-page h2{margin-top:var(--tdm-s-lg)} } /* ========================================================================= THEME HEADER AND FOOTER These are Elementor templates from the parent theme, so they sit outside .tdm-page and are corrected here. Scoped to body.tdm-has-sticky, which is present on every front-end page. ========================================================================= */ /* ---------- Custom header ---------- The theme's Elementor header is replaced wholesale in the output. It is sticky rather than overlaid, so it occupies normal flow and can never sit on top of page content. */ .tdm-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .tdm-header{position:sticky;top:0;z-index:9990;background:var(--tdm-surface); border-bottom:1px solid var(--tdm-line);font-family:var(--tdm-font-b)} .tdm-header.is-stuck{box-shadow:0 1px 12px rgba(20,20,30,.07)} .tdm-header__in{max-width:1180px;margin-inline:auto;padding:0 var(--tdm-s-md); display:flex;align-items:center;gap:var(--tdm-s-lg);min-height:78px} .tdm-header__brand{flex:0 0 auto;display:block;line-height:0} .tdm-header__brand img{width:196px;height:auto;display:block} /* Nav */ .tdm-nav{flex:1 1 auto;min-width:0} .tdm-nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .tdm-nav__item{position:relative} .tdm-nav__link{display:inline-block;padding:10px 12px;font-size:15.5px;font-weight:500; color:var(--tdm-ink);text-decoration:none;white-space:nowrap;border-radius:var(--tdm-r-sm)} .tdm-nav__link:hover{color:var(--tdm-accent)} .tdm-nav__link[aria-current="page"]{color:var(--tdm-accent);font-weight:600} .tdm-nav__item--has-sub{display:flex;align-items:center} .tdm-nav__item--has-sub .tdm-nav__link{padding-right:4px} .tdm-nav__toggle{background:none;border:0;padding:10px 8px 10px 2px;cursor:pointer; color:var(--tdm-muted);display:inline-flex;align-items:center;border-radius:var(--tdm-r-sm)} .tdm-nav__toggle svg{width:10px;height:6px;transition:transform .15s ease} .tdm-nav__item--has-sub:hover .tdm-nav__toggle svg, .tdm-nav__item--has-sub.is-open .tdm-nav__toggle svg{transform:rotate(180deg)} .tdm-nav__sub{position:absolute;top:100%;left:0;min-width:262px;background:var(--tdm-surface); border:1px solid var(--tdm-line);border-radius:var(--tdm-r-lg);padding:8px; box-shadow:0 10px 30px rgba(20,20,30,.10);opacity:0;visibility:hidden;transform:translateY(4px); transition:opacity .13s ease,transform .13s ease,visibility .13s;z-index:20} .tdm-nav__item--has-sub:hover .tdm-nav__sub, .tdm-nav__item--has-sub:focus-within .tdm-nav__sub, .tdm-nav__item--has-sub.is-open .tdm-nav__sub{opacity:1;visibility:visible;transform:translateY(0)} .tdm-nav__sub ul{list-style:none;margin:0;padding:0} .tdm-nav__sub a{display:block;padding:9px 12px;font-size:14.8px;color:var(--tdm-ink); text-decoration:none;border-radius:var(--tdm-r-sm);white-space:nowrap} .tdm-nav__sub a:hover{background:var(--tdm-teal-soft);color:var(--tdm-teal)} /* Actions */ .tdm-header__actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--tdm-s-md)} .tdm-header__phone{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--tdm-ink);white-space:nowrap} .tdm-header__phone svg{width:19px;height:19px;color:var(--tdm-teal);flex:0 0 auto} .tdm-header__phone small{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--tdm-muted);line-height:1.3} .tdm-header__phone b{display:block;font-size:15.5px;font-weight:600;line-height:1.25} .tdm-header__phone:hover b{color:var(--tdm-accent)} .tdm-header__cta{display:inline-block;background:var(--tdm-accent);color:#fff;font-weight:600; font-size:15px;padding:12px 20px;border-radius:var(--tdm-r-md);text-decoration:none;white-space:nowrap} .tdm-header__cta:hover{background:var(--tdm-accent-hover);color:#fff} /* Burger */ .tdm-header__burger{display:none;background:none;border:1px solid var(--tdm-line); border-radius:var(--tdm-r-sm);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center} .tdm-burger,.tdm-burger::before,.tdm-burger::after{display:block;width:19px;height:2px; background:var(--tdm-ink);border-radius:2px;transition:transform .16s ease,opacity .16s ease} .tdm-burger{position:relative} .tdm-burger::before,.tdm-burger::after{content:"";position:absolute;left:0} .tdm-burger::before{top:-6px} .tdm-burger::after{top:6px} .tdm-header.is-open .tdm-burger{background:transparent} .tdm-header.is-open .tdm-burger::before{transform:translateY(6px) rotate(45deg)} .tdm-header.is-open .tdm-burger::after{transform:translateY(-6px) rotate(-45deg)} .tdm-header a:focus-visible,.tdm-header button:focus-visible{outline:2px solid var(--tdm-accent);outline-offset:2px} /* Our header sits in flow, so no overlay clearance is needed. */ body.tdm-own-header #pxl-main{padding-top:0!important} body.tdm-own-header .tdm-page{padding-top:0!important} /* Fallback for the theme header, kept in case ours ever fails to render. */ body.tdm-has-sticky:not(.tdm-own-header) #pxl-main{padding-top:0!important} body.tdm-has-sticky:not(.tdm-own-header) .tdm-page{padding-top:var(--tdm-header-h,132px)} @media (max-width:1100px){ .tdm-header__in{gap:var(--tdm-s-md)} .tdm-header__phone small{display:none} .tdm-nav__link{padding:10px 8px;font-size:15px} } @media (max-width:1024px){ .tdm-header__burger{display:inline-flex} .tdm-header__in{min-height:70px;gap:var(--tdm-s-sm);justify-content:space-between} .tdm-header__cta{display:none} .tdm-header__brand img{width:168px} /* Drawer */ .tdm-nav{position:fixed;inset:70px 0 0;background:var(--tdm-surface);padding:var(--tdm-s-md); overflow-y:auto;transform:translateX(100%);transition:transform .2s ease;visibility:hidden} .tdm-header.is-open .tdm-nav{transform:translateX(0);visibility:visible} .tdm-nav__list{flex-direction:column;align-items:stretch;gap:0} .tdm-nav__item{border-bottom:1px solid var(--tdm-line);flex-wrap:wrap} .tdm-nav__item--has-sub{justify-content:space-between} .tdm-nav__link{flex:1 1 auto;padding:15px 4px;font-size:17px} .tdm-nav__toggle{padding:15px 10px} .tdm-nav__toggle svg{width:13px;height:8px} .tdm-nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none; border:0;border-radius:0;padding:0 0 var(--tdm-s-sm) var(--tdm-s-sm);min-width:0; display:none;flex-basis:100%} .tdm-nav__item--has-sub.is-open .tdm-nav__sub{display:block} .tdm-nav__sub a{padding:11px 8px;font-size:15.5px;white-space:normal} } @media (max-width:560px){ .tdm-header__phone b{font-size:14px} .tdm-header__brand img{width:150px} .tdm-nav{inset:70px 0 0} } @media (prefers-reduced-motion:reduce){ .tdm-nav,.tdm-nav__sub,.tdm-burger,.tdm-burger::before,.tdm-burger::after{transition:none!important} } /* ---------- Custom footer ---------- The theme's Elementor footer is replaced wholesale in the output, so these styles describe our own markup rather than overriding demo classes. */ .tdm-footer{background:var(--tdm-ink);color:var(--tdm-on-ink);font-family:var(--tdm-font-b);font-size:16px;line-height:1.6} .tdm-footer__in{max-width:1180px;margin-inline:auto;padding:0 var(--tdm-s-md)} .tdm-footer a{color:var(--tdm-on-ink);text-decoration:none} .tdm-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} /* CTA row: asymmetric, heading left and the single action right. */ .tdm-footer__cta{display:grid;grid-template-columns:1.4fr auto;gap:var(--tdm-s-lg); align-items:center;padding:var(--tdm-s-xl) 0;border-bottom:1px solid rgba(47,184,184,.35)} .tdm-footer__cta h2{font-family:var(--tdm-font-h);font-weight:700;color:#fff;margin:0; font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.015em;max-width:20ch} .tdm-footer__cta p{margin:10px 0 0;color:var(--tdm-on-ink-muted);max-width:46ch;font-size:.97rem} .tdm-footer__actions{display:flex;flex-wrap:wrap;gap:var(--tdm-s-sm)} .tdm-footer .tdm-fbtn{display:inline-block;font-weight:600;font-size:.97rem;padding:14px 22px; border-radius:var(--tdm-r-md);border:1px solid transparent;text-decoration:none!important;white-space:nowrap} .tdm-footer .tdm-fbtn--primary{background:var(--tdm-accent);color:#fff} .tdm-footer .tdm-fbtn--primary:hover{background:var(--tdm-accent-hover);color:#fff} .tdm-footer .tdm-fbtn--ghost{border-color:rgba(199,199,210,.35);color:var(--tdm-on-ink)} .tdm-footer .tdm-fbtn--ghost:hover{border-color:var(--tdm-teal-bright);color:#fff} /* Column grid */ .tdm-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:var(--tdm-s-lg);padding:var(--tdm-s-xl) 0} /* The logo is a dark wordmark, so on the ink footer the type disappears and only the coloured illustration survives. A light plate keeps the brand colours intact and legible. Replace this with a reversed logo file if the business supplies one, and drop the background. */ .tdm-footer__brand img{max-width:194px;height:auto;margin-bottom:var(--tdm-s-md); background:#fff;padding:11px 15px;border-radius:var(--tdm-r-md);display:block} .tdm-footer__brand p{color:var(--tdm-on-ink-muted);font-size:.94rem;margin:0;max-width:34ch} .tdm-footer h3{font-family:var(--tdm-font-h);font-size:.76rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--tdm-teal-bright);margin:0 0 var(--tdm-s-md)} .tdm-footer ul{list-style:none;margin:0;padding:0} .tdm-footer li{margin-bottom:9px;font-size:.95rem} .tdm-footer__contact li{margin-bottom:14px;color:var(--tdm-on-ink-muted)} .tdm-footer__contact b{display:block;color:#fff;font-weight:500;font-size:.95rem} /* Bottom bar */ .tdm-footer__bar{border-top:1px solid rgba(199,199,210,.14);padding:var(--tdm-s-md) 0 var(--tdm-s-lg); display:flex;flex-wrap:wrap;gap:var(--tdm-s-md);justify-content:space-between;align-items:center; font-size:.87rem;color:var(--tdm-on-ink-faint)} .tdm-footer__social{display:flex;gap:var(--tdm-s-md)} .tdm-footer__bar a:hover{color:#fff} .tdm-footer a:focus-visible,.tdm-footer .tdm-fbtn:focus-visible{outline:2px solid var(--tdm-teal-bright);outline-offset:2px} @media (max-width:900px){ .tdm-footer__cta{grid-template-columns:1fr;gap:var(--tdm-s-md);padding:var(--tdm-s-lg) 0} .tdm-footer__cols{grid-template-columns:1fr 1fr;gap:var(--tdm-s-lg) var(--tdm-s-md);padding:var(--tdm-s-lg) 0} } @media (max-width:560px){ .tdm-footer__cols{grid-template-columns:1fr} .tdm-footer__bar{flex-direction:column;align-items:flex-start} } /* Scroll-to-top control used the demo's purple and blue, and sat on top of the WhatsApp button in the bottom-right corner. Recoloured and lifted clear. */ body.tdm-has-sticky .pxl-scroll-top .pxl-scroll-icon path{fill:var(--tdm-accent)!important} body.tdm-has-sticky .pxl-scroll-top .pxl-scroll-progress-circle path{stroke:var(--tdm-teal-bright)!important} body.tdm-has-sticky .pxl-scroll-top{bottom:92px!important} @media (max-width:768px){ /* Sit above the sticky call/WhatsApp bar on mobile. */ body.tdm-has-sticky .pxl-scroll-top{bottom:130px!important} } /* ---------- Motion: dial is 0.2, so this is minimal and opt-out ---------- */ @media (prefers-reduced-motion:reduce){ .tdm-page *{animation:none!important;transition:none!important} } /* ---------- Header control hardening ---------- The parent theme skins bare