/*
 * Theratio port: CSS added on top of the template (css/style.css stays as shipped).
 * One commented section per task/component; keep selectors scoped to the component they fix.
 */

/* ---------- Task 02: footer columns ----------
 * The footer columns come from widgets: reproduce the bottom margins of about-us.html
 * (mb-4 mb-xl-0 on columns 1-2, mb-4 mb-md-0 on column 3, none on column 4).
 */
.site-footer .tr-footer-col { margin-bottom: 1.5rem; }
.site-footer .tr-footer-col:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
    .site-footer .tr-footer-col:nth-child(n+3) { margin-bottom: 0; }
}
@media (min-width: 1200px) {
    .site-footer .tr-footer-col { margin-bottom: 0; }
}
/* Footer contact links keep the text colour of the template (plain text there). */
.site-footer .footer-list-item a { color: inherit; }

/* ---------- Task 04: contact form (views/contact-form.blade.php) ----------
 * The template's contact.js toggled #err-* / #ajaxsuccess; js/theratio.js (trAjaxForm) does it now.
 */
.tr-contact-form label { display: block; margin: 0; }
.tr-contact-form .error {
    display: block;
    margin-bottom: 6px;
    color: #d43c3c;
    font-size: 14px;
    line-height: 1.5;
}
.tr-contact-form .error[hidden], .tr-contact-form .ajaxsuccess[hidden] { display: none; }
.tr-contact-form .tr-form-error { margin-top: 15px; }
.tr-contact-form .is-invalid { border-color: #d43c3c; }
.tr-contact-form .ajaxsuccess {
    margin-top: 20px;
    padding: 12px 20px;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
}
.wpcf7 .main-form .tr-contact-terms input[type=checkbox] { width: auto; margin-right: 8px; }
.wpcf7 .main-form .tr-contact-terms label { font-size: 14px; }
.wpcf7 .main-form button:disabled { opacity: .6; cursor: wait; }

/* ---------- Task 04: Fob Comment (post.html 634-696: .comments-area / .comment-respond look) ---------- */
.fob-comment-title {
    margin-bottom: 25px;
    font-size: 30px;
    text-transform: none;
}
.fob-comment-list-title span { color: inherit; }
.fob-comment-list .fob-comment-item {
    padding-bottom: 12px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.fob-comment-list .fob-comment-item .fob-comment-list .fob-comment-item:last-child { border-bottom: 0; }
.fob-comment-item-inner { display: flex; gap: 30px; }
.fob-comment-item-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.fob-comment-item-content { flex: 1; display: flex; flex-direction: column-reverse; }
.fob-comment-item-footer { position: relative; margin-bottom: 4px; }
.fob-comment-item-author {
    font-family: "Saira", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: capitalize;
}
.fob-comment-item-date {
    display: block;
    font-family: "Josefin Sans", sans-serif;
    color: #9f9e9e;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
.fob-comment-item-reply, .fob-comment-item-actions a {
    font-family: "Josefin Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1a1a1a;
}
.fob-comment-item-actions { position: absolute; top: 0; right: 10px; }
.fob-comment-item-body p:last-child { margin-bottom: 0; }
.fob-comment-form-section { padding-top: 10px; }
.fob-comment-form-note { margin-bottom: 10px; }
.fob-comment-form .form-control,
.fob-comment-form input[type=text],
.fob-comment-form input[type=email],
.fob-comment-form input[type=url],
.fob-comment-form textarea {
    width: 100%;
    border-radius: 0;
}
.fob-comment-form button[type=submit] {
    font-family: "Josefin Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 18px 40px;
    margin-top: 10px;
    color: #fff;
    background: #1a1a1a;
    border: 1px solid #1a1a1a;
    border-radius: 0;
}
.fob-comment-form button[type=submit]:hover { background: #fff; color: #1a1a1a; }
.dark-scheme .fob-comment-list .fob-comment-item, .v-light .fob-comment-list .fob-comment-item { border-bottom-color: rgba(255, 255, 255, 0.1); }
.dark-scheme .fob-comment-item-author, .v-light .fob-comment-item-author,
.dark-scheme .fob-comment-item-reply, .v-light .fob-comment-item-reply { color: #fff; }

/* ---------- Task 04c: newsletter forms (footer, coming soon) ---------- */
.tr-newsletter-form .tr-form-message {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
}
.tr-newsletter-form .tr-form-message.is-error { color: #d43c3c; }
.tr-newsletter-form .tr-form-message.is-success { color: inherit; }
.tr-newsletter-form .is-invalid { border-color: #d43c3c; }
.tr-newsletter-form button:disabled { opacity: .6; cursor: wait; }

/* ---------- Task 04d: blog ----------
 * style.css points the quote icon of quote posts at an HTTrack page (images/quote_blog_list.html): own SVG.
 */
.post-box .quote-box .quote-text:before { background-image: url("../images/quote_blog_list.svg"); }
.v-light .post-box .quote-box .quote-text:before, .dark-scheme .post-box .quote-box .quote-text:before { background-image: url("../images/quote_blog_list_dark.png"); }

/* ---------- Task 09a: hero-slider (replaces Revolution Slider) ----------
 * Owl Carousel, 1 item, fade. Caption layers are placed like the rev layers of index-2.html (offsets from the
 * slide centre at the 4 rev breakpoints 1240 / 1024 / 778 / 480) and slide up when their slide becomes active.
 */
.tr-hero-slider { position: relative; overflow: hidden; }
.tr-hero-slider > .grid-lines { pointer-events: none; z-index: 2; }
.tr-hero .tr-hero-slide {
    position: relative;
    height: 100vh;
    min-height: 480px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.tr-hero:not(.tr-hero-fullscreen) .tr-hero-slide { height: 760px; }
.tr-hero-caption { position: absolute; inset: 0; z-index: 2; }
.tr-hero-caption > * {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    text-align: center;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.tr-hero .owl-item.active .tr-hero-caption > * { animation: tr-hero-in 1s cubic-bezier(.2, .8, .2, 1) both; }
.tr-hero .owl-item.active .tr-hero-title { animation-delay: .3s; }
.tr-hero .owl-item.active .tr-hero-desc { animation-delay: .5s; }
.tr-hero .owl-item.active .tr-hero-btn { animation-delay: .7s; }
@keyframes tr-hero-in {
    from { opacity: 0; translate: 0 50px; }
    to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .tr-hero .owl-item.active .tr-hero-caption > * { animation: none; opacity: 1; }
}

/* main (index-2): rev layers, desktop values */
.tr-hero-main .tr-hero-big {
    font-size: 206px;
    line-height: 206px;
    letter-spacing: 104px;
    font-weight: 900;
    white-space: nowrap;
    transform: translate(calc(-50% + 56px), calc(-50% - 64px));
}
.tr-hero-main .tr-hero-title {
    font-size: 93px;
    line-height: 83px;
    font-weight: 200;
    color: #fff;
    white-space: nowrap;
    transform: translate(calc(-50% + 2px), calc(-50% - 56px));
}
.tr-hero-main .tr-hero-desc {
    width: 818px;
    max-width: calc(100% - 40px);
    font-size: 19px;
    line-height: 33px;
    transform: translate(-50%, calc(-50% + 54px));
}
.tr-hero-main .tr-hero-btn { transform: translate(-50%, calc(-50% + 170px)); white-space: nowrap; }
@media (max-width: 1239px) {
    .tr-hero-main .tr-hero-big { font-size: 150px; line-height: 170px; letter-spacing: 85px; transform: translate(calc(-50% + 46px), calc(-50% - 72px)); }
    .tr-hero-main .tr-hero-title { font-size: 72px; line-height: 70px; transform: translate(-50%, calc(-50% - 63px)); }
    .tr-hero-main .tr-hero-desc { width: 630px; font-size: 18px; line-height: 27px; transform: translate(-50%, calc(-50% + 43px)); }
    .tr-hero-main .tr-hero-btn { transform: translate(-50%, calc(-50% + 140px)); }
}
@media (max-width: 1023px) {
    .tr-hero-main .tr-hero-big { display: none; }
    .tr-hero-main .tr-hero-title { font-size: 55px; line-height: 51px; transform: translate(-50%, calc(-50% - 60px)); }
    .tr-hero-main .tr-hero-desc { width: 500px; font-size: 17px; line-height: 28px; transform: translate(-50%, calc(-50% + 31px)); }
    .tr-hero-main .tr-hero-btn { transform: translate(-50%, calc(-50% + 119px)); }
}
@media (max-width: 777px) {
    .tr-hero-main .tr-hero-title { font-size: 40px; line-height: 55px; white-space: normal; width: calc(100% - 40px); transform: translate(-50%, calc(-50% - 65px)); }
    .tr-hero-main .tr-hero-desc { width: 417px; font-size: 16px; line-height: 24px; transform: translate(-50%, calc(-50% + 15px)); }
    .tr-hero-main .tr-hero-btn { transform: translate(-50%, calc(-50% + 110px)); }
}

/* nav-home-1: two 90px squares at the bottom right */
.tr-hero-main .owl-nav { position: absolute; right: 0; bottom: 0; margin: 0; display: flex; z-index: 3; }
.tr-hero-main .owl-nav.disabled { display: none; }
.tr-hero-main .owl-nav button.owl-prev,
.tr-hero-main .owl-nav button.owl-next {
    width: 90px;
    height: 90px;
    margin: 0;
    border-radius: 0;
    background: transparent;
    transition: .3s;
}
.tr-hero-main .owl-nav button.owl-prev:hover,
.tr-hero-main .owl-nav button.owl-next:hover { background: rgba(255, 255, 255, .4); }
.tr-hero-main .owl-nav button span { display: none; }
.tr-hero-main .owl-nav button:before { font-family: Flaticon; font-size: 20px; color: #fff; line-height: 90px; }
.tr-hero-main .owl-nav button.owl-prev:before { content: "\f106"; }
.tr-hero-main .owl-nav button.owl-next:before { content: "\f134"; }
.tr-hero-main .owl-dots { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); margin: 0; z-index: 3; }

/* interior (index-3): full screen minus the static header, thin title + uppercase sub title stacked in the centre
 * (rev offsets -38 / +60 = 13px gap, block 22px above the middle), nav-home-2 arrows */
.tr-hero-interior .tr-hero-fullscreen .tr-hero-slide { height: calc(100vh - var(--tr-hero-offset, 0px)); }
.tr-hero-interior .tr-hero-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 80px 44px;
}
.tr-hero-interior .tr-hero-caption > * { position: static; transform: none; }
.tr-hero-interior .tr-hero-title {
    font-size: 150px;
    line-height: 150px;
    font-weight: 200;
    color: #fff;
}
.tr-hero-interior .tr-hero-desc {
    margin-top: 13px;
    font-size: 18px;
    line-height: 20px;
    font-weight: 300;
    letter-spacing: 8px;
    color: #fff;
}
.tr-hero-interior .tr-hero-btn { margin-top: 40px; }
@media (max-width: 1239px) {
    .tr-hero-interior .tr-hero-title { font-size: 142px; line-height: 130px; }
}
@media (max-width: 1023px) {
    .tr-hero-interior .tr-hero-title { font-size: 110px; line-height: 110px; }
    .tr-hero-interior .tr-hero-desc { font-size: 16px; line-height: 16px; margin-top: 17px; }
}
@media (max-width: 777px) {
    .tr-hero-interior .tr-hero-caption { padding-bottom: 34px; }
    .tr-hero-interior .tr-hero-title { font-size: 70px; line-height: 70px; }
    .tr-hero-interior .tr-hero-desc { margin-top: 10px; letter-spacing: 4px; line-height: 22px; }
}
@media (max-width: 479px) {
    .tr-hero-interior .tr-hero-caption { padding: 0 64px 24px; }
    .tr-hero-interior .tr-hero-title { font-size: 46px; line-height: 50px; }
    .tr-hero-interior .tr-hero-desc { font-size: 13px; letter-spacing: 3px; }
}
.tr-hero-interior .owl-nav { margin: 0; }
.tr-hero-interior .owl-nav.disabled { display: none; }
.tr-hero-interior .owl-nav button.owl-prev,
.tr-hero-interior .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0;
    border-radius: 0;
    background: #0f0f0f;
    transition: .3s;
    z-index: 3;
}
.tr-hero-interior .owl-nav button.owl-prev { left: 0; }
.tr-hero-interior .owl-nav button.owl-next { right: 0; }
.tr-hero-interior .owl-nav button.owl-prev:hover,
.tr-hero-interior .owl-nav button.owl-next:hover { background: #fff; }
.tr-hero-interior .owl-nav button span { display: none; }
.tr-hero-interior .owl-nav button:before { font-family: Flaticon; font-size: 15px; color: #fff; line-height: 60px; }
.tr-hero-interior .owl-nav button:hover:before { color: #0f0f0f; }
.tr-hero-interior .owl-nav button.owl-prev:before { content: "\f106"; }
.tr-hero-interior .owl-nav button.owl-next:before { content: "\f134"; }
.tr-hero-interior .owl-dots { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); margin: 0; z-index: 3; }

/* studio (index-4): .banner-3 padding from style.css, slide = 1723 x 860 rev grid scaled in percent */
.tr-hero-studio { overflow: visible; }
.tr-hero-studio .tr-hero { overflow: hidden; }
.tr-hero-studio .tr-hero .tr-hero-slide { height: auto; min-height: 0; width: 100%; aspect-ratio: 1723 / 860; background: none; }
.tr-hero-studio .tr-hero-caption { position: absolute; inset: 0; }
.tr-hero-studio .tr-hero-caption > * { position: absolute; transform: none; opacity: 1; margin: 0; text-align: left; }
.tr-studio-image { right: 0; top: 0; width: 50.4%; height: 100%; }
.tr-studio-image img { width: 100%; height: 100%; object-fit: cover; }
.tr-studio-shape { left: 9%; top: 18.4%; width: 40.6%; height: 58.1%; }
.tr-studio-circle { left: 35.6%; top: 17.6%; width: 9.05%; }
.tr-studio-circle img { width: 100%; animation: tr-spin 20s linear infinite; }
@keyframes tr-spin { to { transform: rotate(360deg); } }
.tr-hero-studio .tr-studio-text { left: 9%; top: 0; width: 32%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 5%; }
.tr-hero-dark .tr-studio-title, .tr-hero-dark .tr-studio-desc { color: #fff; }
.tr-studio-title { font-family: "Saira", sans-serif; font-size: 4.18vw; line-height: 1.11; font-weight: 300; color: #1a1a1a; margin: 0 0 24px; }
.tr-studio-desc { font-size: 18px; line-height: 32px; color: #555; margin: 0 0 40px; }
.tr-hero-studio .owl-nav { position: absolute; left: 50%; bottom: 70px; display: flex; margin: 0 0 0 -7px; }
.tr-hero-studio .owl-nav button.owl-prev,
.tr-hero-studio .owl-nav button.owl-next { width: 70px; height: 70px; margin: 0; border-radius: 0; background: #fff; transition: .3s; }
.tr-hero-studio .owl-item:not(.active):not(.animated) { opacity: 0; visibility: hidden; }
.tr-hero-studio .owl-nav button.owl-prev,
.tr-hero-studio .owl-nav button.owl-next { position: absolute; bottom: 0; }
.tr-hero-studio .owl-nav button.owl-prev { left: 0; }
.tr-hero-studio .owl-nav button.owl-next { left: 70px; }
.tr-hero-studio .owl-nav button span { display: none; }
.tr-hero-studio .owl-nav button:before { font-family: Flaticon; font-size: 20px; color: #1a1a1a; line-height: 70px; transition: .3s; }
.tr-hero-studio .owl-nav button:hover:before { color: #9f9e9e; }
.tr-hero-studio .owl-nav button.owl-prev:before { content: "\f106"; }
.tr-hero-studio .owl-nav button.owl-next:before { content: "\f134"; }
.tr-hero-studio .owl-dots { display: none; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0; }
@media (max-width: 1239px) { .tr-studio-desc { font-size: 16px; line-height: 26px; margin-bottom: 24px; } }
@media (max-width: 1023px) {
    .tr-hero-studio .tr-hero .tr-hero-slide { aspect-ratio: auto; }
    .tr-hero-studio .tr-hero-caption { position: static; display: flex; flex-direction: column; }
    .tr-hero-studio .tr-hero-caption > * { position: static; }
    .tr-studio-image { order: 1; width: 100%; height: auto; }
    .tr-studio-shape, .tr-studio-circle { display: none; }
    .tr-hero-studio .tr-studio-text { order: 2; width: auto; height: auto; padding: 30px 20px 60px; }
    .tr-studio-title { font-size: 40px; line-height: 46px; }
}
@media (max-width: 794px) {
    .tr-hero-studio .owl-nav { display: none; }
    .tr-hero-studio .owl-dots { display: block; }
}

/* boxed-card (index-6): boxed slider 1510 x 783 rev grid, card on the right with the text placed in percent of the card */
.tr-hero-boxed .tr-hero .tr-hero-slide { height: auto; min-height: 0; aspect-ratio: 1410 / 747; }
.tr-hero-boxed .tr-hero-caption > * { position: absolute; transform: none; opacity: 1; text-align: left; }
.tr-hero-boxed .tr-hero-caption > .tr-boxed-card {
    top: 50%; left: auto; right: -3.3%; width: 35.5%; aspect-ratio: 535 / 350;
    transform: translateY(-50%);
    background-size: cover; background-position: center;
}
.tr-boxed-body { position: absolute; left: 15.8%; top: 23.5%; width: 73%; }
.tr-boxed-sub { font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: 1px; color: #9f9e9e; white-space: nowrap; margin: 0 0 0 2.5%; }
.tr-boxed-title { margin: 8px 0 0; font-size: 39px; line-height: 56px; font-weight: 400; color: #fff; }
.tr-boxed-btn { margin-top: 20px; white-space: nowrap; }
.tr-boxed-btn .btn-details { color: #fff; }
.tr-boxed-btn .btn-details:before { background: #505050; }
.tr-hero-boxed .owl-nav { position: absolute; left: 0; bottom: 70px; display: flex; margin: 0; }
.tr-hero-boxed .owl-nav button.owl-prev,
.tr-hero-boxed .owl-nav button.owl-next { width: 70px; height: 70px; margin: 0; border-radius: 0; background: #fff; transition: .3s; }
.tr-hero-boxed .owl-nav button.owl-prev,
.tr-hero-boxed .owl-nav button.owl-next { position: absolute; bottom: 0; }
.tr-hero-boxed .owl-nav button.owl-prev { left: 0; }
.tr-hero-boxed .owl-nav button.owl-next { left: 70px; }
.tr-hero-boxed .owl-nav button span { display: none; }
.tr-hero-boxed .owl-nav button:before { font-family: Flaticon; font-size: 20px; color: #1a1a1a; line-height: 70px; transition: .3s; }
.tr-hero-boxed .owl-nav button:hover:before { color: #9f9e9e; }
.tr-hero-boxed .owl-nav button.owl-prev:before { content: "\f106"; }
.tr-hero-boxed .owl-nav button.owl-next:before { content: "\f134"; }
.tr-hero-boxed .owl-nav.disabled { display: none; }
.tr-hero-boxed .owl-dots { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); margin: 0; }
.tr-hero-boxed .owl-item:not(.active):not(.animated) { opacity: 0; visibility: hidden; }
@media (max-width: 1239px) {
    .tr-hero-boxed .tr-hero-caption > .tr-boxed-card { right: -1.8%; width: 34.5%; }
    .tr-boxed-sub { font-size: 10px; line-height: 14px; }
    .tr-boxed-title { font-size: 30px; line-height: 43px; }
}
@media (max-width: 1023px) {
    .tr-hero-boxed .tr-hero .tr-hero-slide { aspect-ratio: auto; height: 600px; }
    .tr-hero-boxed .tr-hero-caption > .tr-boxed-card { left: 50%; right: auto; transform: translate(-50%, -50%); width: 480px; max-width: 80%; }
    .tr-boxed-body { left: 0; top: 0; width: 100%; height: 100%; padding: 0 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
    .tr-boxed-sub { margin: 0; }
    .tr-boxed-title { font-size: 28px; line-height: 40px; margin-top: 14px; }
    .tr-boxed-btn { margin-top: 18px; }
}
@media (max-width: 777px) { .tr-hero-boxed .tr-hero .tr-hero-slide { height: 550px; } }
@media (max-width: 479px) {
    .tr-hero-boxed .tr-hero .tr-hero-slide { height: 450px; }
    .tr-hero-boxed .tr-hero-caption > .tr-boxed-card { width: 285px; }
    .tr-boxed-title { font-size: 20px; line-height: 27px; }
}

/* fullscreen (home-full-screen): centred title + button, vertical bullets (bullet-home-7) */
.tr-hero-full .tr-hero-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 32px;
}
.tr-hero-full .tr-hero-caption > * { position: static; transform: none; text-align: center; }
.tr-hero-full .tr-hero-title { font-size: 90px; line-height: 100px; font-weight: 200; color: #fff; white-space: nowrap; }
.tr-hero-full .tr-hero-btn { margin-top: 53px; white-space: nowrap; }
@media (max-width: 1239px) { .tr-hero-full .tr-hero-title { font-size: 72px; line-height: 70px; } .tr-hero-full .tr-hero-btn { margin-top: 70px; } }
@media (max-width: 1023px) { .tr-hero-full .tr-hero-title { font-size: 55px; line-height: 61px; } .tr-hero-full .tr-hero-btn { margin-top: 56px; } }
@media (max-width: 777px) { .tr-hero-full .tr-hero-title { font-size: 46px; line-height: 55px; } .tr-hero-full .tr-hero-btn { margin-top: 30px; } }
.tr-hero-full .owl-dots { position: absolute; right: 25px; top: calc(50% - 30px); transform: translateY(-50%); margin: 0; display: flex; flex-direction: column; z-index: 3; }
.tr-hero-full .owl-dots button.owl-dot {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    margin: -5px;
    background: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: all .3s linear;
}
.tr-hero-full .owl-dots button.owl-dot span { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: 0; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); }
.tr-hero-full .owl-dots button.owl-dot.active,
.tr-hero-full .owl-dots button.owl-dot:hover { border-color: #fff; }
.tr-hero-full .owl-item:not(.active):not(.animated) { opacity: 0; visibility: hidden; }

/* ---------- Task 10a: team cards ----------
 * Member names link to the member page (the template has no link): keep the heading colour.
 */
.team-wrap .m_name a { color: inherit; }

/* ---------- Task 14: classic header ----------
 * The phone of .top-info is a tel: link (plain text in index-3.html): keep the text colour.
 */
.top-info p a { color: inherit; }

/* ---------- Task 23: language switcher ----------
 * One text link ("EN" / "VI") in the header call-to-action area, coloured like the search icon of each header style.
 */
.octf-lang a {
    color: #fff;
    font-family: "Saira", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1;
    margin-right: 22px;
    transition: opacity .3s;
}
.octf-lang a:hover { opacity: .7; }
.main-header-slight .octf-lang a,
.header_mobile_slight .octf-lang a { color: #1a1a1a; }
.octf-lang-onepage { margin-left: 30px; }
.octf-lang-onepage a { margin-right: 0; }
.header_mobile .octf-lang a { margin-right: 16px; }
.side-nav-cta .octf-lang { height: auto; justify-content: center; margin-bottom: 20px; }
.side-nav-cta .octf-lang a { margin-right: 0; }

/* ---------- Task 25: contrast (WCAG AA) ----------
 * The muted greys of the template (#9f9e9e on white = 2.7:1, #7d7d7d on #1a1a1a = 4.2:1...) are darkened / lightened just enough to reach
 * 4.5:1 (3:1 for the big numbers). Dark scheme pages (body.tr-dark, css/dark.css) and .s-light headings keep the template colours.
 */
body:not(.tr-dark):not(.dark-scheme) .ot-heading:not(.s-light) > span,
body:not(.tr-dark):not(.dark-scheme) .entry-meta a[href$="#comments"],
body:not(.tr-dark):not(.dark-scheme) .info-post-next > span,
body:not(.tr-dark):not(.dark-scheme) blockquote cite { color: #6a6a6a; }
.room-area h3 { color: #8f8f8f; }
body .footer-bottom p,
body .footer-bottom .icon-list-text { color: #9a9a9a; }
body.tr-light.header-vertical .footer-bottom p,
body.tr-light.header-vertical .footer-bottom .icon-list-text { color: #666; }
.ot-pricing-table .inner-table > p { color: #6f6f6f; }
body .ot-pricing-table .details li:not(.active) { color: #767676; }
body .ot-pricing-table.is-featured .inner-table > p,
body .ot-pricing-table.is-featured .details li:not(.active) { color: #9a9a9a; }
.circle-progress .main-color-stext { color: #6f6f6f; }
.tr-dark .circle-progress .main-color-stext { color: #b0b0b0; }
.post-box:not(.v-dark) .entry-meta .posted-on a { color: #6a6a6a; }
.post-box.v-dark .entry-meta .byline a,
.post-box.v-dark .entry-meta .byline a:hover { color: #c8c8c8; }
body .post-box.v-dark .entry-meta .byline { color: #c8c8c8; }
body:not(.tr-light) .ot-testimonials.v-dark .tinfo span,
.tr-dark .ot-testimonials .tinfo span { color: #9a9a9a; }
/* sections that are dark on a normal page keep the light grey label */
body:not(.tr-dark):not(.dark-scheme) .feature-content .ot-heading > span,
body:not(.tr-dark):not(.dark-scheme) .about-content-2 .ot-heading > span,
body:not(.tr-dark):not(.dark-scheme) .our-philosophy .ot-heading > span,
body:not(.tr-dark):not(.dark-scheme) .progress-studio .ot-heading > span,
body:not(.tr-dark):not(.dark-scheme) .bg-dark-1 .ot-heading > span,
body:not(.tr-dark):not(.dark-scheme) .bg-dark-theratio .ot-heading > span { color: #9f9e9e; }
.quote-text > span,
.widget .count,
.services-menu a span,
.the-excerpt { color: #6a6a6a; }
.post-box .post-inner.border-white .the-excerpt { color: #555; }
.hight-light-2 { background-color: #6f6f6f; }
.icon-box.s-light h5 { color: #fff; }
.post-box .quote-box .quote-text span,
.widget-area .widget ul:not(.recent-news) > li .count,
.widget_nav_menu .services-menu > li > a > span { color: #6a6a6a; }
body .widget_nav_menu .services-menu > li:not(.current-menu-item) > a > span,
body .post-on .entry-date,
body .info-post-prev > span,
body .info-post-next > span,
body .fob-comment-item-date,
body .fob-comment-item-info .fob-comment-item-date { color: #6a6a6a; }
body .post-nav .post-prev .info-post-prev span,
body .post-nav .post-next .info-post-next span,
body .post-nav span:not(.title-link),
body .fob-comment-form-note { color: #6a6a6a; }

/* ---------- Task 25: no layout shift while Owl starts ----------
 * .owl-carousel is display:none until the script has run: the first slide holds the space before that (CLS 1.0 on the homes).
 */
.tr-hero:not(.owl-loaded) { display: block; }
.tr-hero:not(.owl-loaded) .tr-hero-slide:not(:first-child) { display: none; }
.tr-hero:not(.owl-loaded) .tr-hero-slide:first-child { visibility: visible; }

/* ---------- Task 25: reduced motion ----------
 * No preloader, no entrance animations, no spinning circle text; sliders keep working with an instant change.
 */
@media (prefers-reduced-motion: reduce) {
    body.royal_preloader #royal_preloader,
    #royal_preloader { display: none !important; }
    body.royal_preloader { visibility: visible !important; overflow: auto !important; }
    .wow { animation: none !important; visibility: visible !important; opacity: 1 !important; }
    .tr-studio-circle img { animation: none; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Elements page: the template stacks its blocks in one section with 20-90px spaces; each block here is its own section without padding */
section.pt-0.pb-0 { margin-bottom: 37px; }

/* ---------- Post card images: fixed ratio so cards keep their height before the image loads (no layout shift) ----------
 * grid cards: 570 x 484 (blog-grid, home news), list cards and post header: 790 x 510.
 */
.post-box.masonry-post .entry-media > img,
.post-box.masonry-post .entry-media > a > img { width: 100%; height: auto; aspect-ratio: 570 / 484; object-fit: cover; }
article.post-box .entry-media > img,
article.post-box .entry-media > a > img { width: 100%; height: auto; aspect-ratio: 790 / 510; object-fit: cover; }