/* ============================================================================
   Tooth Tales homepage. Every rule below is scoped under .tthome.

   Remove that wrapper from the markup and the page loses all styling. The
   scoping is what makes this safe to drop into any theme: our rules cannot
   escape it, and the three guards below stop the theme's rules reaching in.

   GENERATED FILE. Edit the single-file source and run build/run.sh.
   ========================================================================== */

/* The only unscoped rule. scroll-behavior and overflow-x only take effect on
   the scrolling element, so they cannot live under the wrapper. */
html{overflow-x:clip;scroll-behavior:smooth}
html{scroll-behavior:auto}

/* Guard 1. Scoping stops our rules escaping; it does nothing about the theme's
   rules reaching in. This neutralises the properties a theme most often sets
   globally. box-sizing carries !important because a theme using
   *{box-sizing:content-box!important} otherwise changes every computed height
   on the page. min-width:0 is also what stops long text in a flex or grid
   child pushing horizontal overflow. */
.tthome *{box-sizing:border-box!important;border:0;outline:0;background:none;box-shadow:none;
  text-transform:none;letter-spacing:normal;list-style:none;text-indent:0;float:none;
  font-style:normal;text-shadow:none;max-width:none;min-width:0}

/* Guard 2. The wrapper is the one element the reset above cannot reach, so a
   theme's *{margin:3px} lands on it and narrows the whole page. */
.tthome{margin:0!important;padding:0!important;width:auto!important;max-width:none!important;float:none!important}

/* Guard 3. An inline <svg> with no width/height attribute expands to fill its
   container, so if a page builder strips a wrapper the icons become enormous.
   Any SVG genuinely sized by CSS carries a class, and a class outranks this. */
.tthome svg{width:20px;height:20px}
.tthome .tt-defs{position:absolute;width:0;height:0;overflow:hidden}


/* ============================================================
   Tooth Tales homepage v2 - 9 Aug 2026
   Brand: ToothTales_BrandGuidelines_2026-07-17.md
   70% premium healthcare / 20% child-friendly / 10% playful.
   Navy #07084E sampled from the logo wordmark.
   The logo character is the brand's own, not a generic tooth.
   ============================================================ */
.tthome{
  --navy:#07084E;          /* sampled from the logo wordmark */
  --navy-soft:#2A2B6B;
  --teal:#3CB9B5;
  --teal-deep:#1E7F79;     /* AA text-safe */
  --teal-dark:#166661;
  --sky:#7DD3FC;
  --sky-tint:#EAF6FE;
  --coral:#FF8C82;
  --coral-deep:#E85C50;    /* AA-adjusted CTA ramp end */
  --yellow:#FFD166;
  --amber:#F2A93B;
  --cream:#FFF8EE;
  --warm:#FAFCFD;
  --white:#fff;
  --ink:#14343C;
  --body:#48626B;
  --line:#E3EDF1;
  --disp:'Sora',sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --r-sm:12px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --sh-sm:0 2px 10px rgba(20,52,60,.06);
  --sh-md:0 12px 32px rgba(20,52,60,.10);
  --sh-lg:0 26px 56px rgba(20,52,60,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1200px;
}
.tthome *{margin:0;padding:0;box-sizing:border-box}
.tthome{font-family:var(--sans);font-size:16.5px;line-height:1.68;color:var(--body);background:var(--warm);-webkit-font-smoothing:antialiased}
.tthome img{max-width:100%;display:block}
.tthome h1,.tthome h2,.tthome h3,.tthome h4{font-family:var(--disp);color:var(--navy);line-height:1.18;letter-spacing:-.02em}
.tthome a{color:inherit;text-decoration:none}
.tthome button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.tthome .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.tthome .section{padding:88px 0}
.tthome .section-head{text-align:center;margin-bottom:44px}
.tthome .section-head h2{font-size:clamp(1.75rem,3.2vw,2.5rem);margin-bottom:12px}
.tthome .section-head p{max-width:60ch;margin:0 auto;font-size:16.5px}

/* ---------- image slots awaiting client artwork ----------
   Every slot holds the exact box its final image will occupy, so dropping the
   real file in cannot shift the layout. The label carries the pixel size to
   supply. Nothing here should survive to production: search the markup for
   "imgslot" before launch and there should be no hits. */
.tthome .imgslot{display:grid;place-items:center;text-align:center;padding:14px;min-width:0;
  background:repeating-linear-gradient(45deg,#F1F6F8 0 11px,#E8EFF3 11px 22px);
  border:2px dashed #B4C7D0;border-radius:inherit;color:#4E6B78}
.tthome .imgslot i{font-style:normal;display:block;font-family:var(--disp);font-weight:700;font-size:13.5px;line-height:1.35}
.tthome .imgslot b{display:block;font-weight:600;font-size:12px;color:#7B939E;margin-top:5px;letter-spacing:.02em}

/* ---------- reveal, gated on .tt-js ----------
   Without script the page must still be readable, so the hidden state only
   exists once JS has run. See the inline gate at the top of the wrapper. */
.tthome.tt-js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.tthome.tt-js .rv.in{opacity:1;transform:none}

/* ---------- buttons ---------- */
.tthome .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:var(--r-pill);font-weight:700;font-size:16px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;white-space:nowrap}
.tthome .btn-primary{background:linear-gradient(180deg,var(--coral),var(--coral-deep));color:#fff;box-shadow:0 10px 24px rgba(232,92,80,.32)}
.tthome .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,92,80,.42)}
.tthome .btn-ghost{background:#fff;color:var(--teal-deep);border:2px solid var(--teal)}
.tthome .btn-ghost:hover{background:var(--sky-tint);transform:translateY(-2px)}
.tthome .btn-white{background:#fff;color:var(--teal-deep);box-shadow:var(--sh-sm)}
.tthome .btn-white:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.tthome .btn:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}

/* ---------- brushing scroll progress ---------- */
.tthome .brushbar{position:fixed;top:0;left:0;right:0;height:5px;z-index:120;background:rgba(7,8,78,.07)}
.tthome .brushfill{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--sky));transition:width .1s linear}
.tthome .brushhead{position:absolute;top:-7px;left:0;width:19px;height:19px;transform:translateX(-50%);
  transition:left .1s linear;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(7,8,78,.25))}

/* ---------- header ---------- */
.tthome .header{position:fixed;top:5px;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s,padding .3s;padding:14px 0}
.tthome .header.scrolled{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 18px rgba(7,8,78,.08);padding:8px 0}
.tthome .header-inner{display:flex;align-items:center;gap:20px}
.tthome .brand{display:flex;align-items:center;min-width:0}
.tthome .brand img{height:46px;width:auto;display:block;transition:height .3s var(--ease)}
.tthome .header.scrolled .brand img{height:38px}
.tthome .nav{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:600;color:var(--navy)}
.tthome .nav a{position:relative;padding:4px 0}
.tthome .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.tthome .nav a:hover::after{transform:scaleX(1)}
.tthome .header-cta{display:flex;align-items:center;gap:12px}
.tthome .header .btn{padding:11px 20px;font-size:15px}
.tthome .burger{display:none;width:42px;height:42px;border-radius:12px;background:var(--navy);color:#fff;align-items:center;justify-content:center;flex:none}
.tthome .mnav{display:none;flex-direction:column;gap:2px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-md);margin-top:10px;padding:10px;overflow:hidden}
.tthome .mnav.open{display:flex}
.tthome .mnav a{padding:12px 14px;border-radius:10px;font-weight:600;color:var(--navy)}
.tthome .mnav a:hover{background:var(--sky-tint)}

/* ---------- hero ---------- */
.tthome .hero{position:relative;padding:132px 0 0;background:linear-gradient(160deg,var(--cream) 0%,#FFFDF9 42%,var(--warm) 100%);overflow:hidden}
.tthome .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;min-width:0}
.tthome .hero-copy{min-width:0;padding-bottom:64px}
.tthome .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 17px;border-radius:var(--r-pill);
  background:#fff;border:1.5px solid #DCEFEE;color:var(--teal-deep);font-weight:700;font-size:13.5px;box-shadow:var(--sh-sm);margin-bottom:20px}

/* Sized so "We're on a mission to raise" holds one line in the copy column.
   At 3.5rem it broke to four lines and the hero lost its shape. */
.tthome .hero h1{font-size:clamp(2.1rem,3.35vw,2.7rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.tthome .hero h1 em{font-style:normal;color:var(--teal-deep)}
.tthome .tri{display:flex;flex-wrap:wrap;align-items:center;gap:10px 4px;margin:22px 0 18px}
.tthome .tri-i{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:16px;color:var(--navy);padding-right:14px}
.tthome .tri-i + .tri-i{border-left:1.5px solid #E4E7F2;padding-left:18px}
.tthome .tri-i b{font-weight:700}
.tthome .tri-i .hl{font-weight:700}
.tthome .tri-i:nth-child(1) .hl{color:var(--coral-deep)}
.tthome .tri-i:nth-child(2) .hl{color:var(--teal-deep)}
.tthome .tri-i:nth-child(3) .hl{color:#3B82C4}
.tthome .tri-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.tthome .tri-i:nth-child(1) .tri-dot{background:#FFEDEB;color:var(--coral-deep)}
.tthome .tri-i:nth-child(2) .tri-dot{background:#E4F6F5;color:var(--teal-deep)}
.tthome .tri-i:nth-child(3) .tri-dot{background:#E8F1FB;color:#3B82C4}
.tthome .hero-sub{font-size:17px;max-width:46ch;margin-bottom:28px}
.tthome .hero-ctas{display:flex;flex-wrap:wrap;gap:14px}

/* The photo bleeds to the viewport's right edge rather than stopping at the
   container. Inside the 1200px grid it could only be 545px wide, which left
   the right half of a 709px hero mostly empty. Bleeding it out buys ~145px of
   width at 1440 and the photo finally balances the copy. The hero clips
   overflow, so this cannot push the page sideways. */
.tthome .hero-visual{position:relative;min-width:0;align-self:end;
  margin-right:calc(-24px - max(0px, (100vw - var(--maxw)) / 2))}
.tthome .hero-photo{position:relative;border-radius:var(--r-lg) 0 0 0;overflow:hidden;isolation:isolate}

/* Each file is cropped to exactly the ratio it is shown at, so nothing is
   cropped twice and the child cannot drift out of frame. height:auto is
   required or the width/height attributes stop aspect-ratio applying at all.
   Only one of the two files is ever downloaded. */
.tthome .hero-photo img{width:100%;height:auto;aspect-ratio:27/20;object-fit:cover;object-position:center}

/* When the client supplies a mobile banner with the headline set INTO the
   artwork, add class "baked" to the <section class="hero"> and the duplicate
   HTML copy below becomes screen-reader only. It stays in the DOM, so the page
   keeps exactly one <h1> and the text is still indexed. The buttons stay
   visible, because a picture of a button is not a button. */
.tthome .hero.baked .sr-hide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tthome .hero-deco{position:absolute;pointer-events:none;opacity:.5}
.tthome .d1{top:14%;left:6%;color:var(--sky)}
.tthome .d2{top:8%;left:34%;color:var(--amber)}
.tthome .d3{bottom:26%;left:10%;color:var(--coral)}

/* ---------- trust strip ---------- */
.tthome .trust{background:var(--sky-tint);padding:26px 0}
.tthome .trust-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 34px}
.tthome .rating{display:flex;align-items:center;gap:12px;min-width:0}
.tthome .rating .stars{color:var(--amber);font-size:16px;letter-spacing:2px;display:block}
.tthome .rating .sub{font-size:13.5px;font-weight:600;color:var(--body)}
.tthome .gverified{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--navy)}
.tthome .tsep{width:1px;height:34px;background:#CBE4F5}
.tthome .tpill{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--navy);min-width:0}
.tthome .tpill svg{color:var(--teal-deep);flex:none}

/* ---------- picker form band ---------- */
.tthome .book{position:relative;background:linear-gradient(135deg,var(--teal-dark),var(--teal-deep) 55%,#2CA79F);padding:132px 0 56px;overflow:hidden}
.tthome .book::before{content:"";position:absolute;inset:0;background:
  radial-gradient(560px 260px at 12% 0%,rgba(255,255,255,.13),transparent 70%),
  radial-gradient(420px 240px at 92% 100%,rgba(125,211,252,.20),transparent 70%)}
.tthome .book-in{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:34px;align-items:center;min-width:0}
.tthome .book-copy{min-width:0}
.tthome .book-copy h2{color:#fff;font-size:clamp(1.5rem,2.7vw,2.05rem);margin-bottom:10px}
.tthome .book-copy p{color:#D9F2F0;font-size:15.5px;max-width:36ch}

/* z-index 3 puts the panel above the character, so he peeks out from BEHIND
   the card. Without it he paints over the panel's corner and clips the Book
   button, which reads as a collision rather than a layer. */
.tthome .book-panel{position:relative;z-index:3;background:#fff;border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-lg);min-width:0}
.tthome .chips-lbl{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--navy);margin-bottom:11px}

/* One row of needs. Below 1200 there is not enough panel width for six on a
   line, so they wrap rather than squash or overflow. */
.tthome .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}

@media (min-width:1200px){.tthome .chips{flex-wrap:nowrap} }
.tthome .chip{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:9px 13px;border-radius:var(--r-pill);
  background:#F3F8FA;border:1.5px solid #E1EDF1;font-size:13.5px;font-weight:600;color:var(--navy);
  transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s}
.tthome .chip:hover{background:var(--sky-tint);border-color:var(--sky)}
.tthome .chip[aria-pressed="true"]{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;transform:translateY(-2px) scale(1.03)}
.tthome .chip:focus-visible{outline:3px solid var(--teal-deep);outline-offset:2px}
.tthome .f-row{display:grid;grid-template-columns:1fr 1fr auto;gap:11px;min-width:0}
.tthome .f-field{min-width:0}
.tthome .f-field input{width:100%;padding:14px 15px;border-radius:var(--r-sm);border:1.5px solid #DDE8EC;
  font:inherit;font-size:15.5px;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.tthome .f-field input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(60,185,181,.16)}
.tthome .f-field input[aria-invalid="true"]{border-color:var(--coral-deep);box-shadow:0 0 0 4px rgba(232,92,80,.14)}
.tthome .f-err{display:block;font-size:12.5px;font-weight:600;color:var(--coral-deep);margin-top:5px;min-height:0}
.tthome .f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tthome .f-done{display:none;text-align:center;padding:14px 6px}
.tthome .f-done.on{display:block}
.tthome .f-done h3{color:var(--teal-deep);font-size:1.24rem;margin-bottom:6px}
.tthome .f-done p{font-size:15px}
.tthome .book-panel-wrap{position:relative;min-width:0}

/* Lifted so head and shoulders clear the panel's top edge while the hands
   stay behind it, which is the pose the artwork was drawn for. The band's
   104px top padding is what keeps him from being clipped by the band. */
.tthome .book-peek{position:absolute;top:0;right:26px;width:250px;height:auto;z-index:1;pointer-events:none;
  transform:translateY(-80%)}

/* ---------- why ---------- */
.tthome .why{background:var(--warm);position:relative;overflow:hidden}
.tthome .why-deco{position:absolute;pointer-events:none;opacity:.4}
.tthome .wd1{top:14%;left:4%;color:var(--sky)}
.tthome .wd2{bottom:18%;right:5%;color:var(--yellow)}


/* Motion below is keyed to .in, which only ever appears once the script has
   run, and the pre-animation states are gated behind .tt-js. With no script
   the section is simply static and fully readable. */
@keyframes iconPop{0%{transform:scale(.4) rotate(-18deg);opacity:0}
  65%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

@keyframes awardIn{0%{transform:translateY(14px);opacity:0}100%{transform:none;opacity:1}}

@keyframes shine{0%{transform:translateX(-130%) rotate(18deg)}
  100%{transform:translateX(320%) rotate(18deg)}}

@keyframes sheen{0%{transform:translateX(-60%) skewX(-18deg)}
  55%,100%{transform:translateX(320%) skewX(-18deg)}}
.tthome.tt-js .flip:not(.in) .flip-art{opacity:0;transform:scale(.4)}
.tthome.tt-js .flip.in .flip-art{animation:iconPop .72s var(--ease) .12s both}

/* The medals arrive one after another, then a single light sweeps each one.
   It runs once on reveal, and again on hover, never on a loop. */
.tthome.tt-js .awards:not(.in) .award{opacity:0}
.tthome.tt-js .awards.in .award{animation:awardIn .55s var(--ease) both}
.tthome.tt-js .awards.in .award:nth-child(1){animation-delay:.10s}
.tthome.tt-js .awards.in .award:nth-child(2){animation-delay:.22s}
.tthome.tt-js .awards.in .award:nth-child(3){animation-delay:.34s}
.tthome .aw-medal{position:relative;overflow:hidden}
.tthome .aw-medal::after{content:"";position:absolute;top:-40%;left:0;width:38%;height:180%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));
  transform:translateX(-130%) rotate(18deg);pointer-events:none}
.tthome.tt-js .awards.in .award:nth-child(1) .aw-medal::after{animation:shine 1.1s var(--ease) .55s}
.tthome.tt-js .awards.in .award:nth-child(2) .aw-medal::after{animation:shine 1.1s var(--ease) .70s}
.tthome.tt-js .awards.in .award:nth-child(3) .aw-medal::after{animation:shine 1.1s var(--ease) .85s}
.tthome .award:hover .aw-medal::after{animation:shine .9s var(--ease)}
.tthome .award{transition:transform .3s var(--ease)}
.tthome .award:hover{transform:translateY(-3px)}

/* One slow pass of light across the stat bar as it arrives. */
.tthome .why-stats{position:relative;overflow:hidden;isolation:isolate}
.tthome .why-stats::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0));
  transform:translateX(-60%) skewX(-18deg)}
.tthome.tt-js .why-stats.in::after{animation:sheen 2.6s var(--ease) .35s}
.tthome .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;min-width:0}
.tthome .awards{margin-top:20px;background:#fff;border:1px solid #EDF3F5;border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--sh-sm)}
.tthome .awards h3{font-size:1.02rem;text-align:center;margin-bottom:18px}
.tthome .award-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;min-width:0}
.tthome .award{display:flex;gap:13px;min-width:0}
.tthome .aw-medal{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--yellow),#E4A32A);color:#fff}
.tthome .aw-b{min-width:0}
.tthome .aw-b b{display:block;font-family:var(--disp);font-size:14.4px;color:var(--navy);line-height:1.32}
.tthome .aw-b > span{display:block;font-size:12.8px;color:#5E7480;margin-top:3px}
.tthome .aw-b i{display:block;font-style:normal;font-size:11.4px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-deep);margin-top:6px}

/* ---------- flip cards ----------
   The card is a div with role="button" and tabindex, not a <button>, because a
   button may only contain phrasing content and these carry an <h3>. Keyboard
   still works with no script at all: Tab lands on the card and :focus-visible
   flips it. The script only adds click, which is what touch needs. */
.tthome .flip{position:relative;min-width:0;height:292px;perspective:1200px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.tthome .flip:focus{outline:0}
.tthome .flip:focus-visible .flip-in{outline:3px solid var(--navy);outline-offset:4px;border-radius:var(--r-lg)}
.tthome .flip-in{position:relative;width:100%;height:100%;transition:transform .7s var(--ease);
  transform-style:preserve-3d}
.tthome .flip:hover .flip-in,.tthome .flip:focus-visible .flip-in,.tthome .flip.is-flipped .flip-in{transform:rotateY(180deg)}
.tthome .flip-face{position:absolute;inset:0;border-radius:var(--r-lg);padding:26px 24px;
  display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:var(--sh-sm);overflow:hidden}
.tthome .flip-back{transform:rotateY(180deg);justify-content:center}
.tthome .flip-front{align-items:center;text-align:center;justify-content:center;gap:4px}
.tthome .flip-art{width:114px;height:125px;margin-bottom:6px}
.tthome .flip-front h3{font-size:1.16rem;color:var(--navy)}
.tthome .flip-hint{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-size:12.4px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tthome .flip-hint svg{transition:transform .35s var(--ease)}
.tthome .flip:hover .flip-hint svg{transform:rotate(180deg)}
.tthome .flip-back p{font-size:15px;color:var(--ink)}
.tthome .flip-back b{display:block;font-family:var(--disp);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:10px}

/* One hue per card: a saturated front, a tint of the same hue on the back so
   the body copy keeps a dark-on-light contrast ratio. *//* Soft, child-friendly tints with dark text, so nothing needs a scrim to be
   legible and nothing reads heavy. The back is white for the longer copy. */
.tthome .flip.c1 .flip-front{background:linear-gradient(160deg,#EAF8F4,#D7F0EA)}
.tthome .flip.c2 .flip-front{background:linear-gradient(160deg,#FFF3EC,#FCE2D6)}
.tthome .flip.c3 .flip-front{background:linear-gradient(160deg,#EDF5FE,#DCEAFB)}
.tthome .flip .flip-back{background:#fff}
.tthome .flip.c1 .flip-hint,.tthome .flip.c1 .flip-back b{color:#126A60}
.tthome .flip.c2 .flip-hint,.tthome .flip.c2 .flip-back b{color:#AC4530}
.tthome .flip.c3 .flip-hint,.tthome .flip.c3 .flip-back b{color:#1F6A9C}
.tthome .flip.c1 .flip-back{box-shadow:inset 0 5px 0 #7ED3C4,var(--sh-sm)}
.tthome .flip.c2 .flip-back{box-shadow:inset 0 5px 0 #F9AE93,var(--sh-sm)}
.tthome .flip.c3 .flip-back{box-shadow:inset 0 5px 0 #8CC5EE,var(--sh-sm)}
.tthome .why-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;
  background:linear-gradient(135deg,var(--navy),#141560);border-radius:var(--r-lg);padding:30px 24px;min-width:0}
.tthome .wstat{text-align:center;min-width:0}
.tthome .wstat .n{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,2.7vw,2.1rem);color:#fff;line-height:1.1}
.tthome .wstat .l{font-size:13px;font-weight:600;color:#B9BCE8;margin-top:3px}

/* ---------- character CTA band ---------- */
.tthome .ctaband{background:var(--cream);position:relative;overflow:hidden;padding:0}
.tthome .ctaband-in{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:end;min-width:0}
.tthome .cta-char{width:290px;align-self:end;margin-bottom:-4px;height:auto}
.tthome .cta-mid{padding:66px 0;min-width:0}
.tthome .cta-mid h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:10px}
.tthome .cta-mid p{max-width:52ch;margin-bottom:22px}
.tthome .cta-acts{display:flex;flex-wrap:wrap;gap:13px}
.tthome .cta-bubble{align-self:center;background:#fff;border-radius:var(--r-md);padding:15px 19px;box-shadow:var(--sh-md);
  max-width:230px;position:relative;margin-bottom:66px}
.tthome .cta-bubble::after{content:"";position:absolute;left:-9px;bottom:24px;width:0;height:0;
  border:9px solid transparent;border-right-color:#fff;border-left:0}
.tthome .cta-bubble b{display:block;font-family:var(--disp);color:var(--navy);font-size:15px;margin-bottom:3px}
.tthome .cta-bubble span{font-size:13.5px}

/* ---------- doctors ---------- */
.tthome .docs{background:#fff}
.tthome .doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;min-width:0}
.tthome .doc{display:grid;grid-template-columns:190px 1fr;gap:20px;background:var(--warm);border-radius:var(--r-lg);
  padding:20px;border:1px solid #EDF3F5;min-width:0;isolation:isolate}
.tthome .doc-ph{border-radius:var(--r-md);overflow:hidden;background:linear-gradient(140deg,var(--teal),var(--sky))}
.tthome .doc-ph img{width:100%;height:100%;object-fit:cover;object-position:center 18%;min-height:210px}
.tthome .doc-b{min-width:0}
.tthome .doc-role{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:5px}
.tthome .doc-b h3{font-size:1.2rem;margin-bottom:8px}
.tthome .doc-b p{font-size:14.5px;margin-bottom:12px}
.tthome .creds{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.tthome .cred{font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--navy)}
.tthome .tlink{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;color:var(--teal-deep)}
.tthome .tlink:hover{gap:10px}

/* ---------- treatments carousel ----------
   Pastel cards on a scroll-snap rail. The card nearest the horizontal centre
   gets .is-active and lifts; the rest sit back. Native scrolling does the
   work, so it drags on a phone and keyboard-scrolls on desktop for free. */
.tthome .treat{background:var(--warm);overflow:hidden}
.tthome .treat .section-head{margin-bottom:8px}
.tthome .eyebrow-script{display:block;text-align:center;font-family:var(--disp);font-weight:700;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:10px}
.tthome .tcar-wrap{position:relative}
.tthome .tcar{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:34px max(20px,calc(50% - 172px)) 44px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tthome .tcar::-webkit-scrollbar{display:none}
.tthome .tcard{flex:0 0 322px;scroll-snap-align:center;border-radius:26px;padding:24px 22px 20px;
  display:flex;flex-direction:column;gap:14px;min-width:0;
  transform:scale(.9) translateY(12px);opacity:.7;
  transition:transform .45s var(--ease),opacity .45s var(--ease),box-shadow .45s var(--ease);
  box-shadow:0 8px 20px rgba(20,52,60,.06)}
.tthome .tcard.is-active{transform:scale(1);opacity:1;box-shadow:0 26px 54px rgba(20,52,60,.17)}
.tthome .tcard:nth-child(6n+1){background:#E4F1FD}
.tthome .tcard:nth-child(6n+2){background:#FDEDE6}
.tthome .tcard:nth-child(6n+3){background:#E4F5EE}
.tthome .tcard:nth-child(6n+4){background:#EFEAFB}
.tthome .tcard:nth-child(6n+5){background:#FDF4DC}
.tthome .tcard:nth-child(6n+6){background:#FCE7EF}
.tthome .tc-head h3{font-size:1.16rem;margin-bottom:4px}
.tthome .tc-head p{font-size:13.6px;color:#5E7480}
.tthome .tc-art{border-radius:18px;background:rgba(255,255,255,.5);aspect-ratio:3/4;overflow:hidden}
.tthome .tc-art img{width:100%;height:100%;object-fit:contain;display:block}
.tthome .tc-acts{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tthome .tbook{padding:9px 17px;border-radius:var(--r-pill);background:var(--navy);color:#fff;
  font-size:13.5px;font-weight:700;transition:background .2s,transform .2s}
.tthome .tbook:hover{background:var(--teal-deep);transform:translateY(-2px)}
.tthome .tbook:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}
.tthome .tcar-nav{display:flex;justify-content:center;gap:11px;margin-top:-6px}
.tthome .tcar-nav button{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--navy);
  box-shadow:var(--sh-sm);display:grid;place-items:center;transition:background .2s,transform .2s,color .2s}
.tthome .tcar-nav button:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.tthome .tcar-nav button:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}
.tthome .tcar-nav button[disabled]{opacity:.35;pointer-events:none}
.tthome .treat-cta{display:flex;justify-content:center;margin-top:24px}

/* ---------- testimonials ---------- */
.tthome .revs{background:var(--sky-tint)}
.tthome .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;min-width:0}
.tthome .rev{background:#fff;border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm);min-width:0;isolation:isolate}
.tthome .rev .stars{color:var(--amber);font-size:15px;letter-spacing:2px;display:block;margin-bottom:11px}
.tthome .rq{position:relative;max-height:132px;overflow:hidden;transition:max-height .38s var(--ease)}
.tthome .rq::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);transition:opacity .25s}
.tthome .rq-open::after{opacity:0}
.tthome .rq blockquote{font-size:15.6px;color:var(--ink);font-weight:500;line-height:1.62}
.tthome .rq-more{margin:9px 0 11px;font-weight:700;font-size:13.5px;color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.tthome .rq-more:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;border-radius:4px}
.tthome .rev-attr{font-size:13.5px;font-weight:700;color:var(--body)}
.tthome .needs{background:#FFF3CD;color:#7A5B00;border-bottom:2px solid #E8B93B;font-weight:600;padding:0 3px}
.tthome .rev-note{font-size:13px;margin-bottom:18px}
.tthome .rev-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
  padding:18px 22px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.tthome .rev-cta p{font-size:14.5px;font-weight:600;color:var(--body);min-width:0}
.tthome .rev-vh{text-align:center;font-size:1.12rem;margin:34px 0 18px}
.tthome .videos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;min-width:0}
.tthome .vcard{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;
  background:#0B1D33;isolation:isolate;box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tthome .vcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.tthome .vcard:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}
.tthome .vcard img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .6s var(--ease)}
.tthome .vcard:hover img{transform:scale(1.06)}
.tthome .play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--coral-deep);display:grid;place-items:center;
  transition:transform .3s var(--ease)}
.tthome .vcard:hover .play{transform:scale(1.12)}
.tthome .vt{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;
  font-size:13.2px;font-weight:600;text-align:left;
  background:linear-gradient(180deg,rgba(6,20,34,0),rgba(6,20,34,.86))}
.tthome .lightbox{position:fixed;inset:0;z-index:140;display:none;place-items:center;padding:20px;
  background:rgba(7,8,78,.72);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.tthome .lightbox.open{display:grid}
.tthome .lb-inner{width:min(920px,100%);aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000}
.tthome .lb-inner iframe{width:100%;height:100%;border:0;display:block}
.tthome .lb-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  background:#fff;color:var(--navy);display:grid;place-items:center}
.tthome .lb-close:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ---------- blog ---------- */
.tthome .blog{background:#fff}
.tthome .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;min-width:0}
.tthome .blog-cta{display:flex;justify-content:center;margin-top:28px}
.tthome .bcard{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease);min-width:0;isolation:isolate}
.tthome .bcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.tthome .bimg{overflow:hidden}
.tthome .bimg img{width:100%;height:172px;object-fit:cover;transition:transform .6s var(--ease)}
.tthome .bcard:hover .bimg img{transform:scale(1.05)}
.tthome .bbody{padding:20px;display:flex;flex-direction:column;flex:1;min-width:0}
.tthome .bmeta{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:8px}
.tthome .bbody h3{font-size:1.03rem;margin-bottom:8px}
.tthome .bbody p{font-size:14.3px;flex:1;margin-bottom:13px}

/* ---------- faq ---------- */
.tthome .faq{background:var(--warm)}
.tthome .faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:34px;align-items:start;min-width:0}
.tthome .faq-side{position:sticky;top:104px;min-width:0}
.tthome .faq-side h2{font-size:clamp(1.6rem,2.9vw,2.2rem);margin-bottom:12px}
.tthome .faq-side p{margin-bottom:20px}
.tthome .faq-acts{display:flex;flex-wrap:wrap;gap:11px}
.tthome .faq-list{min-width:0}
.tthome .fitem{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:11px;overflow:hidden}
.tthome .fitem summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;align-items:center;gap:14px;
  font-family:var(--disp);font-weight:600;font-size:15.6px;color:var(--navy)}
.tthome .fitem summary::-webkit-details-marker{display:none}
.tthome .fitem summary:focus-visible{outline:3px solid var(--teal-deep);outline-offset:-3px}
.tthome .find{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;background:var(--sky-tint);
  color:var(--teal-deep);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.tthome .fitem[open] .find{transform:rotate(45deg);background:var(--teal-deep);color:#fff}
.tthome .fbody{padding:0 20px 18px;font-size:15px}

/* ---------- visit ---------- */
.tthome .visit{background:#fff}
.tthome .visit-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;min-width:0}
.tthome .map{border-radius:var(--r-lg);overflow:hidden;min-height:340px;border:1px solid var(--line);background:var(--sky-tint)}
.tthome .map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.tthome .vcard{background:var(--warm);border-radius:var(--r-lg);padding:26px;border:1px solid #EDF3F5;min-width:0}
.tthome .vrow{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line);min-width:0}
.tthome .vrow:last-of-type{border-bottom:0}
.tthome .vrow dt{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-deep);padding-top:2px}
.tthome .vrow dd{font-size:15px;color:var(--ink);min-width:0}
.tthome .vrow a{color:var(--teal-deep);font-weight:600}

/* ---------- footer ---------- *//* Brighter than a flat slate: the navy runs into the brand teal, a scalloped
   edge bites into the white section above, and a few shapes drift behind it. */
.tthome .footer{position:relative;overflow:hidden;padding:82px 0 26px;color:#D3D6F2;
  background:linear-gradient(142deg,#07084E 0%,#111A66 40%,#125A63 100%)}
.tthome .footer::before{content:"";position:absolute;top:0;left:0;right:0;height:18px;pointer-events:none;
  background:radial-gradient(circle at 16px 0,#fff 15px,transparent 16px) 0 0/32px 18px repeat-x}
.tthome .footer .wrap{position:relative;z-index:1}
.tthome .f-deco{position:absolute;pointer-events:none;opacity:.22;color:#8FE3DE}
.tthome .fd1{top:18%;right:2%}
.tthome .fd2{bottom:24%;left:2%;color:var(--yellow);opacity:.28}
.tthome .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;min-width:0}
.tthome .footer .brand{margin-bottom:14px}
.tthome .footer .brand img{height:64px}
.tthome .footer p{font-size:14.3px;max-width:34ch;color:#C2C6E8}
.tthome .footer h4{color:#7FE3DC;font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px}
.tthome .fcol a{display:block;font-size:14.3px;padding:5px 0;transition:color .22s var(--ease),transform .22s var(--ease)}
.tthome .fcol a:hover{color:#fff;transform:translateX(5px)}
.tthome .fbot{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);font-size:13.3px}
.tthome .socials{display:flex;flex-wrap:wrap;gap:9px}
.tthome .socials a{padding:7px 15px;border-radius:var(--r-pill);background:rgba(255,255,255,.09);
  font-weight:600;transition:background .25s var(--ease),transform .25s var(--ease),color .25s}
.tthome .socials a:hover{background:var(--teal);color:#fff;transform:translateY(-3px)}
.tthome .socials a:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* ---------- mobile action bar ---------- */
.tthome .abar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:110;background:#fff;
  box-shadow:0 -4px 22px rgba(7,8,78,.14);padding:9px 12px;gap:9px}
.tthome .abar a{flex:1;text-align:center;padding:13px 6px;border-radius:var(--r-pill);font-weight:700;font-size:14.5px;
  background:var(--sky-tint);color:var(--teal-deep);min-width:0}
.tthome .abar a.pri{background:linear-gradient(180deg,var(--coral),var(--coral-deep));color:#fff}

/* ---------- booking modal ---------- */
.tthome .modal{position:fixed;inset:0;z-index:130;display:none;place-items:center;padding:20px;
  background:rgba(7,8,78,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tthome .modal.open{display:grid}
.tthome .mbox{background:#fff;border-radius:var(--r-lg);padding:28px;width:100%;max-width:470px;
  box-shadow:var(--sh-lg);position:relative;max-height:90vh;overflow-y:auto}
.tthome .mclose{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:var(--warm);display:grid;place-items:center;color:var(--navy)}
.tthome .mclose:focus-visible{outline:3px solid var(--teal-deep);outline-offset:2px}
.tthome .mbox h3{font-size:1.3rem;margin-bottom:6px;padding-right:34px}
.tthome .mbox > p{font-size:14.6px;margin-bottom:18px}
.tthome .m-for{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--sky-tint);color:var(--teal-deep);font-weight:700;font-size:13.5px;margin-bottom:16px}
.tthome .mbox .f-field{margin-bottom:12px}
.tthome .mbox .btn{width:100%}


/* ---------- animation ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@keyframes pop{0%{transform:scale(.6) translateY(18px);opacity:0}70%{transform:scale(1.06) translateY(0)}100%{transform:scale(1);opacity:1}}
.tthome .char{will-change:transform}
.tthome .char.in{animation:pop .7s var(--ease) both}
.tthome .char.in .inner{animation:bob 4.5s ease-in-out 0.7s infinite}
.tthome .float{animation:bob 6s ease-in-out infinite}


/* ---------- responsive ---------- */
@media (hover:none){.tthome:not(.tt-js) .flip{height:auto}
.tthome:not(.tt-js) .flip-in{transform:none!important;transform-style:flat}
.tthome:not(.tt-js) .flip-face{position:static;backface-visibility:visible;transform:none}
.tthome:not(.tt-js) .flip-back{margin-top:10px}
}

@media (max-width:1024px){.tthome .nav{display:none}

/* the nav is gone below 1024, so the CTA group needs its own push right */
.tthome .header-cta{margin-left:auto}
.tthome .header .btn{display:none}
.tthome .burger{display:flex}
.tthome .hero{padding-top:110px}
.tthome .hero-grid{grid-template-columns:1fr;gap:8px}
.tthome .hero-copy{padding-bottom:20px}

/* Single column below 1024, so the bleed is cancelled and the radius
     returns to all four corners. */
.tthome .hero-visual{max-width:560px;margin:0 auto;width:100%}
.tthome .hero-photo{border-radius:var(--r-lg) var(--r-lg) 0 0}
.tthome .book-in{grid-template-columns:1fr;gap:86px}
.tthome .book{padding:64px 0 48px}
.tthome .book-peek{width:190px;right:16px}
.tthome .why-grid{grid-template-columns:1fr 1fr}
.tthome .flip{height:286px}
.tthome .award-grid{grid-template-columns:1fr}
.tthome .doc-grid,.tthome .visit-grid,.tthome .faq-grid{grid-template-columns:1fr}
.tthome .faq-side{position:static}
.tthome .bgrid,.tthome .rev-grid{grid-template-columns:1fr 1fr}
.tthome .videos{grid-template-columns:1fr 1fr}
.tthome .ctaband-in{grid-template-columns:auto 1fr;gap:20px}
.tthome .cta-bubble{display:none}
.tthome .cta-char{width:210px}
.tthome .fgrid{grid-template-columns:1fr 1fr}
}

@media (max-width:767px){.tthome .section{padding:60px 0}
.tthome .wrap{padding:0 18px}
.tthome{padding-bottom:76px}
.tthome .abar{display:flex}
.tthome .hero{padding-top:96px}

/* The manual break exists to force two lines on desktop. On a phone the
     first line cannot fit anyway, and keeping it strands "raise" alone. */
.tthome .hero-photo img{aspect-ratio:4/5}
.tthome .hero h1{font-size:clamp(1.85rem,7.4vw,2.3rem);text-wrap:balance}
.tthome .hero h1 br{display:none}
.tthome .tri{gap:8px}
.tthome .tri-i{font-size:14.5px;padding-right:0}
.tthome .tri-i + .tri-i{border-left:0;padding-left:0}
.tthome .hero-ctas .btn{flex:1 1 220px;min-width:0}
.tthome .why-grid,.tthome .bgrid,.tthome .rev-grid,.tthome .fgrid,.tthome .videos{grid-template-columns:1fr}
.tthome .flip{height:266px}
.tthome .tcar{gap:16px;padding:26px max(16px,calc(50% - 140px)) 34px}
.tthome .tcard{flex-basis:262px}
.tthome .why-stats{grid-template-columns:1fr 1fr;gap:20px 12px}
.tthome .f-row{grid-template-columns:1fr}
.tthome .doc{grid-template-columns:1fr}
.tthome .doc-ph img{min-height:230px}
.tthome .book-in{gap:74px}
.tthome .book-peek{width:158px;right:10px}

/* Single column, so the character sits centred above the copy
     rather than beside it. */
.tthome .ctaband-in{grid-template-columns:1fr;text-align:center;padding-top:28px}
.tthome .cta-char{width:172px;margin:0 auto;align-self:center}
.tthome .cta-mid{padding:10px 0 52px}
.tthome .cta-acts{justify-content:center}
.tthome .trust-in{gap:12px 20px}
.tthome .tsep{display:none}
.tthome .vrow{grid-template-columns:1fr;gap:2px}
.tthome .f-deco{display:none}
}

@media (prefers-reduced-motion:reduce){.tthome.tt-js .rv{opacity:1;transform:none;transition:none}
.tthome .char.in,.tthome .char.in .inner,.tthome .float{animation:none}
.tthome.tt-js .flip.in .flip-art,.tthome.tt-js .awards.in .award,.tthome.tt-js .why-stats.in::after,.tthome.tt-js .awards.in .award .aw-medal::after{animation:none}
.tthome.tt-js .flip:not(.in) .flip-art,.tthome.tt-js .awards:not(.in) .award{opacity:1;transform:none}
.tthome .flip-in{transition:none}
.tthome *{transition-duration:.01ms!important}
}