/*
Theme Name: Wizzi Child Theme (Web Wizards)
Description: Web Wizards child theme for Divi 5. This copy is set up for Tuart Hill Baby & Childcare.
Author: Web Wizards
Author URI: https://webwizards.com.au
Template: Divi
Version: 1.0
Text Domain: wizzi-child-theme
*/

/*
 * All the site's custom CSS: none is kept in Divi's per-module Custom CSS fields. Only what Divi 5's own settings
 * can't do; each part is listed in docs/divi5-assessment.md.
 */

/* 0. Base: Divi's theme stylesheet puts 10px under every heading; spacing here comes from the modules instead. */
h1, h2, h3, h4, h5, h6 { padding-bottom: 0; }
/* Module Groups set to the list tags (ol/ul/li) keep their semantics but not Divi's article list styling. */
ol.et_pb_group, ul.et_pb_group { list-style: none; padding: 0; margin: 0; line-height: inherit; }
li.et_pb_group { line-height: inherit; }

/* 1. Highlighted words in a headline: accent colour plus the hand-drawn underline. Divi styles whole text
      elements, not a few words inside one, so editors wrap the words in <span class="th-mark">. */
.th-mark {
	position: relative;
	white-space: nowrap;
	color: var(--gcid-th-green);
}
.th-mark::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -14px;
	width: var(--th-mark-width, 100%);
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20 C 80 6, 160 26, 240 12 S 360 8, 396 16' fill='none' stroke='%23F7B8A3' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}
.th-mark--alt::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath d='M4 18 C 90 8, 170 26, 250 14 S 360 8, 396 15' fill='none' stroke='%23F7B8A3' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 2. Type inside SVG drawings: Divi's SVG module removes style attributes, so text in the "30 years" stamp is
      styled by class. */
.th-svg-arc { font-family: var(--gvid-th-font-body), sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 3px; }
.th-svg-big { font-family: var(--gvid-th-font-heading), serif; font-size: 44px; font-weight: 800; text-anchor: middle; }
.th-svg-small { font-family: var(--gvid-th-font-body), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-anchor: middle; }

/* 3. Educators filter (js/tuarthill.js) hides cards with the hidden attribute; Divi's flex display would win. */
.th-person[hidden] { display: none !important; }

/* 4. Layout shift while the web fonts load (Lighthouse CLS). Divi prints a font Design Variable as one quoted name,
      so it can't carry a fallback. Here each variable gets the web font, then Arial resized to take the same space
      (so text doesn't re-wrap when the web font arrives), then a generic family.
      If a font Design Variable is changed in Divi, change the first name here too. */
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight: 100 900; size-adjust: 79.7%; ascent-override: 116.7%; descent-override: 33.9%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 900; size-adjust: 100.2%; ascent-override: 94.8%; descent-override: 25%; line-gap-override: 0%; }
:root:root {
	--gvid-th-font-heading: 'Bricolage Grotesque', 'Bricolage Fallback', sans-serif;
	--gvid-th-font-body: 'Figtree', 'Figtree Fallback', sans-serif;
	--gvid-th-font-script: 'Caveat', cursive;
}

/* ==========================================================================================================
   5. Components. Classes the build gives to Divi modules (Advanced > CSS ID & Classes in the Visual Builder).
      Colours, fonts, sizes and spacing come from Divi's own settings and Design Variables; these rules only
      do what Divi's design panels can't (styling tags inside a Text module, pseudo-elements, choice layouts).
   ========================================================================================================== */

/* Photo prints: the strip of tape across the top. Each print sets its own position, size, angle and colour
   as custom properties (Advanced > Attributes > style), e.g. --th-tape-left:40%; --th-tape-rot:4deg. */
.th-tape::before {
	content: '';
	position: absolute;
	top: var(--th-tape-top, -12px);
	left: var(--th-tape-left, auto);
	right: var(--th-tape-right, auto);
	width: var(--th-tape-w, 96px);
	height: var(--th-tape-h, 28px);
	background: var(--th-tape-color, rgba(247, 184, 163, 0.75));
	transform: rotate(var(--th-tape-rot, 4deg));
	z-index: 1;
}
/* Portraits: 4:5 crop. */
.th-portrait img { aspect-ratio: 4 / 5; width: 100%; }

/* Small text helpers inside Text modules. */
.th-strong-ink strong { color: var(--gcid-th-ink); }
.th-address strong { color: var(--gcid-th-peach); }
.th-byline span, .th-price span { font-weight: 500; color: var(--gcid-th-muted); }
.th-role strong { color: var(--gcid-th-ink); }
.th-role span { font-size: 15px; color: var(--gcid-th-muted); }
.th-split-text p { padding-bottom: 14px; }
.th-split-text p:last-child { padding-bottom: 0; }
.th-split-text strong { color: var(--gcid-th-ink); }
.th-step-text p { padding-bottom: 2px; }
.th-step-text--loose p { padding-bottom: 4px; }
.th-step-text strong { font-size: 17px; color: var(--gcid-th-ink); }
.th-legal-text p { padding-bottom: 10px; }
.th-legal-text .th-muted { color: var(--gcid-th-muted); padding-bottom: 0; }
.th-centre-details p { padding-bottom: 12px; }
.th-centre-details .th-phones { font-size: 17px; }
.th-centre-details p:last-child { font-size: 14px; padding-bottom: 0; }
.th-meal span { display: block; font-family: var(--gvid-th-font-script); font-size: 26px; line-height: 1.6; color: var(--gcid-th-peach); }
.th-rating .th-stars { color: var(--gcid-th-star); font-size: 18px; letter-spacing: 3px; }

/* Quotes: Divi's theme CSS adds a border and padding to blockquote. */
.th-quote blockquote { margin: 0; padding: 0; border: 0; }

/* Questions (Toggle modules): the answer sits 12px under the question row (Divi's own gap is 20px). */
.th-faq-item .et_pb_toggle_content { padding-top: var(--th-answer-gap, 12px); }
.th-faq-item .et_pb_toggle_content p { max-width: 40em; }

/* Key facts strip: label, big value, small note. */
.th-fact .th-dt { font-size: 15px; line-height: 1.6; font-weight: 600; color: var(--gcid-th-muted); margin-bottom: 4px; padding: 0; }
.th-fact .th-dd { font-family: var(--gvid-th-font-heading); font-size: 30px; font-weight: 800; color: var(--gcid-th-ink); line-height: 1.1; padding: 0; }
.th-fact .th-note { font-size: 15px; line-height: 1.6; margin-top: 4px; padding: 0; }

/* Link tiles: the whole tile is one link (title, text, arrow). */
.th-tile-cell .et_pb_text_inner, .th-tile-cell p { height: 100%; padding: 0; }
.th-tile-cell .th-tile { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 28px; text-decoration: none; color: var(--gcid-th-ink); }
.th-tile-cell--first .th-tile { padding: 28px 28px 32px 0; }
.th-tile-cell .th-tile-title { display: block; margin: 0 0 8px; font-family: var(--gvid-th-font-heading); font-size: 24px; font-weight: 800; line-height: 1.6; }
.th-tile-cell .th-tile-text { display: block; color: var(--gcid-th-body); }
.th-tile-cell .th-arrow { display: block; margin-top: auto; padding-top: 16px; font-size: 24px; font-weight: 700; line-height: 1; transition: transform .2s; }
.th-tile-cell:hover .th-arrow { transform: translateX(6px); }
@media (max-width: 900px) { .th-tile-cell .th-tile, .th-tile-cell--first .th-tile { padding: 28px 0 32px; } }

/* Downloads list. */
.th-download a { color: var(--gcid-th-ink); text-decoration: none; }
.th-download a:hover { text-decoration: underline; }
.th-download .th-meta { font-size: 15px; color: var(--gcid-th-muted); }
.th-download .th-tag { float: right; margin-left: 12px; font-size: 13px; font-weight: 700; color: var(--gcid-th-brown); }

/* Fees tables (WW Table module): font, weight, colour, line height, rules and padding are the module's Design
   settings; here only the sizes of the two parts of each cell. */
.th-fees .ww-table tbody th { width: 65%; }
/* 15px under the table, as the earlier Text-module version had (Divi zeroes module margins in flex columns). */
.et_pb_module.th-fees table.ww-table { margin-bottom: 15px; }
.th-fees .ww-table tbody th .ww-table__main { font-size: 17px; }
.th-fees .ww-table tbody th .ww-table__sub { font-size: 14px; font-weight: 400; color: var(--gcid-th-muted); opacity: 1; }
.th-fees .ww-table td { white-space: nowrap; }
.th-fees .ww-table td .ww-table__main, .th-fees .ww-table td .ww-table__sub { display: inline; }
.th-fees .ww-table td .ww-table__main { font-size: 30px; }
.th-fees .ww-table td .ww-table__sub { font-family: var(--gvid-th-font-body); font-size: 14px; font-weight: 400; color: var(--gcid-th-muted); opacity: 1; }

/* Sidebar link list ("Contents" / "Topics"). */
.th-side-list .th-side-title { font-size: 13px; font-weight: 700; color: var(--gcid-th-muted); padding: 0 0 10px; border-bottom: 2px solid var(--gcid-th-ink); }
.th-side-list ul { list-style: none; padding: 0; margin: 0; }
.th-side-list li { border-bottom: 1.5px solid var(--gcid-th-rule-tint); }
.th-side-list a { display: block; padding: 9px 0; color: var(--gcid-th-ink); text-decoration: none; }
.th-side-list a:hover { text-decoration: underline; }

/* Educators filter bar (buttons made by js/tuarthill.js). */
.th-filter-bar .et_pb_text_inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.th-filter-bar .th-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.th-filter-bar button { font: 700 15px/1.6 var(--gvid-th-font-body); padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--gcid-th-rule-tint); background: var(--gcid-th-white); color: var(--gcid-th-ink); cursor: pointer; }
.th-filter-bar button.is-on { background: var(--gcid-th-ink); border-color: var(--gcid-th-ink); color: var(--gcid-th-white); }
.th-filter-bar .th-count { font-size: 14px; color: var(--gcid-th-muted); padding: 0; }

/* ----------------------------------------------------------------------------------- Header and footer */
.th-menu .et-menu > li { padding-left: 0; padding-right: 28px; }
.th-menu .et-menu > li:last-child { padding-right: 0; }
.th-menu .et-menu > li.current-menu-item > a,
.th-menu .et-menu > li.current-menu-ancestor > a,
.th-menu .et-menu > li.current-page-ancestor > a { text-decoration: underline; text-decoration-color: var(--gcid-th-peach); text-decoration-thickness: 4px; text-underline-offset: 8px; }
/* The design's burger is a 48px outlined square; Divi's is a bare icon. */
.th-menu .mobile_menu_bar { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid var(--gcid-th-ink); border-radius: 6px; box-sizing: border-box; padding: 0; }
.th-menu .mobile_menu_bar::before { position: static; top: auto; font-size: 26px; line-height: 1; color: var(--gcid-th-ink); }
.th-menu .et_mobile_menu { background: var(--gcid-th-cream); border-top: 3px solid var(--gcid-th-peach); }
.th-menu .et_mobile_menu a { font-weight: 600; color: var(--gcid-th-ink); }
.th-header-button { white-space: nowrap; }
@media (max-width: 767px) { body #page-container .th-header-button { padding: 10px 14px !important; } }
.th-footer-links nav { display: flex; flex-direction: column; gap: 8px; }
.th-footer-links p { padding: 0; }
.th-footer-links strong { color: var(--gcid-th-white); }
.th-copyright p { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }

/* ----------------------------------------------------------------------------------- Forms (Gravity Forms) */
/* Divi's Gravity Forms module styles the title, labels, fields and button; these are the parts it has no
   settings for: checkbox cards with a second line, day pills, help text, the consent line. */
.th-form .gform_heading { margin: 0 0 28px; }
.th-form .gform_title { margin: 0 0 8px; padding: 0; }
.th-form .gform_description { margin: 0; }
.th-form .gform_required_legend { display: none; }
.th-form .gfield_required { display: none !important; }
.th-form .gform_fields { row-gap: 26px !important; column-gap: 24px !important; }
.th-form .gfield_label { margin: 0 0 8px !important; padding: 0; }
.th-form .th-optional .gfield_label::after { content: " (optional)"; font-weight: 400; color: var(--gcid-th-muted); }
.th-form .gfield_description { padding: 8px 0 0 !important; font-size: 13px !important; color: var(--gcid-th-muted); }
.th-form textarea { height: 134px !important; min-height: 0; }
.th-form .ginput_container_date { width: 100% !important; max-width: none !important; }
.th-form .gfield--type-date input { width: 100% !important; max-width: none !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2'%3E%3Crect x='4' y='5' width='16' height='15' rx='1'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E") right 16px center / 18px no-repeat !important; padding-right: 44px !important; }
.th-form .gfield_checkbox { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.th-form .th-pills .gfield_checkbox { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 10px; }
.th-form .gfield_checkbox .gchoice { position: relative; display: flex !important; align-items: flex-start !important; gap: 12px; width: auto !important; margin: 0 !important; padding: 18px 16px; border: 1.5px solid var(--gcid-th-rule-tint); border-radius: 6px; background: #fff; }
.th-form .th-pills .gfield_checkbox .gchoice { align-items: center !important; gap: 10px; padding: 10px 16px; border-radius: 999px; }
.th-form .gfield_checkbox .gchoice:has(input:checked) { border-color: var(--gcid-th-green); box-shadow: inset 0 0 0 1px var(--gcid-th-green); }
.th-form .gfield_checkbox label { margin: 0 !important; max-width: none !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--gcid-th-ink) !important; cursor: pointer; }
.th-form .gfield_checkbox label::after { content: ""; position: absolute; inset: 0; }
.th-form .th-choice-sub { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--gcid-th-muted); }
.th-form input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; border: 1.5px solid #8C847F; border-radius: 4px; background: #fff center / 14px no-repeat; cursor: pointer; }
.th-form .th-pills input[type=checkbox] { width: 18px; height: 18px; }
.th-form input[type=checkbox]:checked { background-color: var(--gcid-th-green); border-color: var(--gcid-th-green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.th-form input[type=checkbox]:focus-visible { outline: 2px solid var(--gcid-th-green); outline-offset: 2px; }
.th-form .ginput_container_consent { display: flex !important; align-items: flex-start !important; gap: 14px; }
.th-form .ginput_container_consent input { margin-top: 2px !important; }
.th-form .gfield_consent_label { font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--gcid-th-ink) !important; }
.th-form .gfield_consent_label a { font-weight: 700; color: var(--gcid-th-green); text-decoration: underline; }
.th-form .gform_footer { margin: 28px 0 0 !important; padding: 0 !important; }
.th-form .gform_confirmation_message { font-size: 17px; color: var(--gcid-th-ink); }

/* ==========================================================================================================
   6. Motion (as on the dev site). js/wizzi-motion.js marks what moves (data-r) and when it has arrived (.is-in);
      the small script in the page head adds th-anim (and th-calm for visitors who ask for less motion).
      Only transform and opacity move, so nothing shifts the layout. Everything here is decoration: without
      JavaScript the page looks exactly as designed.
   ========================================================================================================== */

/* Scroll reveal: content waits below the fold, then rises, slides or pops in, staggered by --th-d. */
/* Content waiting to slide in from the side must not widen the page (clip, not hidden, so the sticky header works). */
html.th-anim #main-content { overflow-x: clip; }
html.th-anim [data-r]:not(.is-in) { opacity: 0; }
html.th-anim [data-r] { transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--th-d, 0ms), transform 1.1s cubic-bezier(.16, .9, .24, 1) var(--th-d, 0ms), box-shadow .35s; }
html.th-anim:not(.th-calm) [data-r=up]:not(.is-in) { transform: translateY(28px); }
html.th-anim--lively:not(.th-calm) [data-r=up]:not(.is-in) { transform: translateY(42px); }
html.th-anim:not(.th-calm) [data-r=rise]:not(.is-in) { transform: translateY(36px); }
html.th-anim--lively:not(.th-calm) [data-r=rise]:not(.is-in) { transform: translateY(70px) skewY(3deg); }
html.th-anim--lively:not(.th-calm) [data-r=left]:not(.is-in) { transform: translateX(-90px) rotate(-3deg) scale(.94); }
html.th-anim--lively:not(.th-calm) [data-r=right]:not(.is-in) { transform: translateX(90px) rotate(3deg) scale(.94); }
html.th-anim--lively:not(.th-calm) [data-r=card]:not(.is-in) { transform: translateY(60px) scale(.9); }
html.th-anim--lively:not(.th-calm) [data-r=pop]:not(.is-in) { transform: scale(.6); }
html.th-anim--lively [data-r=pop] { transition: opacity .6s ease var(--th-d, 0ms), transform .8s cubic-bezier(.34, 1.56, .64, 1) var(--th-d, 0ms); }
/* Photo prints are rotated by Divi (transform), so they slide in with translate instead and keep their angle. */
html.th-anim:not(.th-calm) :is([data-r=pl], [data-r=pr]):not(.is-in) { translate: 0 28px; }
html.th-anim--lively:not(.th-calm) [data-r=pl]:not(.is-in) { translate: -70px 40px; }
html.th-anim--lively:not(.th-calm) [data-r=pr]:not(.is-in) { translate: 70px 40px; }
html.th-anim :is([data-r=pl], [data-r=pr]) { transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--th-d, 0ms), translate 1.1s cubic-bezier(.16, .9, .24, 1) var(--th-d, 0ms); }

/* Buttons: lift, slight grow and a sweep of light on hover (all Divi buttons, including the form's). */
html.th-anim .et_pb_button,
html.th-anim .gform_button {
	background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%) !important;
	background-size: 250% 100% !important;
	background-position: 130% 0 !important;
	background-repeat: no-repeat !important;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background-color .25s, background-position 0s !important;
}
html.th-anim .et_pb_button:hover,
html.th-anim .gform_button:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 12px 28px rgba(34, 34, 34, .2);
	background-position: -30% 0 !important;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background-color .25s, background-position .8s ease !important;
}

/* Cards lift on hover; photos in cards and links zoom gently inside their frame. */
html.th-anim #main-content article.et_pb_group:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(34, 34, 34, .14); }
html.th-anim #main-content article.et_pb_group .et_pb_image_wrap,
html.th-anim #main-content a .et_pb_image_wrap { overflow: hidden; }
html.th-anim #main-content article.et_pb_group img,
html.th-anim #main-content a img { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
html.th-anim #main-content article.et_pb_group:hover img,
html.th-anim #main-content a:hover img { transform: scale(1.06); }

/* Questions: the question nudges right on hover, the answer slides open. */
html.th-anim #main-content .et_pb_toggle_title { transition: color .2s, padding-left .3s; }
html.th-anim #main-content .et_pb_toggle_title:hover { color: var(--gcid-th-green) !important; padding-left: 6px; }
html.th-anim #main-content .et_pb_toggle_open .et_pb_toggle_content { animation: thOpen .5s ease both; }
@keyframes thOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Link tiles: the arrow moves (section 5); the tile also warms to white. */
html.th-anim .th-tile-cell { transition: background-color .25s; }

/* Hero (first section of each page): a soft peach glow drifts behind it, and its photos float, once the
   visitor first scrolls or moves the mouse. */
html.th-anim--lively:not(.th-calm) .et-l--post .et_builder_inner_content > .et_pb_section:first-child { position: relative; isolation: isolate; overflow-x: clip; }
html.th-anim--lively:not(.th-calm) .et-l--post .et_builder_inner_content > .et_pb_section:first-child::before {
	content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -120px; top: -160px; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--gcid-th-peach) 45%, transparent), transparent 70%); pointer-events: none;
}
html.th-anim--lively.th-live:not(.th-calm) .et-l--post .et_builder_inner_content > .et_pb_section:first-child::before { animation: thDrift 14s ease-in-out infinite; will-change: transform; }
html.th-anim--lively.th-live:not(.th-calm) .et-l--post .et_builder_inner_content > .et_pb_section:first-child figure img { animation: thFloat 7s ease-in-out infinite; will-change: translate; }
html.th-anim--lively.th-live:not(.th-calm) .et-l--post .et_builder_inner_content > .et_pb_section:first-child figure:nth-of-type(2n) img { animation-duration: 9s; animation-delay: -2s; }
@keyframes thFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes thDrift { 0%, 100% { transform: translate(0) scale(1); } 50% { transform: translate(-60px, 40px) scale(1.15); } }

/* Header: stays at the top (as on the dev site), with a soft shadow once the page has scrolled. */
.et-l--header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 99; transition: box-shadow .3s; }
.et-l--header.is-scrolled { box-shadow: 0 8px 24px rgba(34, 34, 34, .08); }

/* Reading progress bar along the top. */
.th-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gcid-th-green), var(--gcid-th-peach)); transform-origin: 0 50%; transform: scaleX(0); z-index: 100; pointer-events: none; }
.th-progress { transition: transform .1s linear; }

/* Less motion (operating-system setting): fades only, no movement, nothing looping. */
html.th-calm * { animation: none !important; }
html.th-calm [data-r] { transition: opacity .8s ease var(--th-d, 0ms) !important; }
html.th-calm .et_pb_button:hover, html.th-calm .gform_button:hover, html.th-calm #main-content article.et_pb_group:hover { transform: none; }
html.th-calm [data-r] { translate: none !important; }