@import url("https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900");

html {
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
}

body {
	font-family: "Raleway", sans-serif;
	font-size: 1.2em;
  color: #707070;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
a {
  transition: all 0.3s ease;
  color: #EA0B0B;
}

a:hover,
a:focus {
  text-decoration: none;
  color: #B80707;
}

a:focus {
  outline: none;
}

.btn {
  padding: 8px 32px;
}

.btn:hover {
  background-color: #ced4da;
}

blockquote {
  font-size: 0.86em;
  line-height: 1.8em;
}

.tm-section-pad-top {
  padding-top: 80px;
  padding-bottom: 40px;
}

/* Mobile-only: 80px of top padding per section adds up to a lot of empty
   scroll distance on a phone. Tightened below phone width only. */
@media (max-width: 575px) {
  .tm-section-pad-top {
    padding-top: 50px;
    padding-bottom: 30px;
  }
}

.tm-content-box {
  padding-top: 20px;
  padding-bottom: 40px;
}

.tm-text-primary {
  color: #B80707;
  font-weight: 700;
}

.tm-font-big {
  font-size: 1.25rem;
}

.tm-btn-primary {
  color: white;
  background-color: #B80707;
  padding: 14px 30px;
}

.tm-btn-primary:hover,
.tm-btn-primary:focus {
  color: white;
  background-color: #EA0B0B;
}

/* Navbar */

.tm-navbar {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: all 0.3s ease;
}

.tm-navbar.scroll {
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand img {
  height: 90px;
  width: auto;
}

.navbar-brand .logo-solid {
  display: none;
}

.tm-navbar.scroll .navbar-brand .logo-solid {
  display: block;
}

.tm-navbar.scroll .navbar-brand .logo-transparent {
  display: none;
}

.nav-item {
  list-style: none;
}

.tm-nav-link {
  color: white;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-block;
  border-radius: 8px;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  transform: translateY(0);
}

.tm-navbar.scroll .tm-nav-link {
  color: #B80707;
}

.tm-navbar.scroll .tm-nav-link:hover,
.tm-navbar.scroll .tm-nav-link.current,
.tm-navbar.scroll .tm-nav-link:focus-visible,
.tm-nav-link:hover,
.tm-nav-link:focus-visible {
  color: #FFF;
  background-color: #B80707;
  transform: translateY(-2px);
}

/* The site-wide `a:focus { outline: none; }` above strips every link's
   focus indicator, so a keyboard user tabbing here previously got no
   visible feedback at all. The hover treatment now doubles as the focus
   state (added above); this outline layers on top so it also reads as
   keyboard-specific, not just "currently pointed at". */
.tm-nav-link:focus-visible {
  outline: 2px solid #C9A75B;
  outline-offset: 2px;
}

.navbar-toggler {
  border: 1px solid white;
  padding-left: 10px;
  padding-right: 10px;
}

.navbar-toggler:focus-visible {
  outline: 2px solid #C9A75B;
  outline-offset: 3px;
}

.navbar-toggler-icon {
  color: white;
  padding-top: 6px;
}

.tm-navbar.scroll .navbar-toggler {
  border: 1px solid #707070;
}

.tm-navbar.scroll .navbar-toggler-icon {
  color: #707070;
}

/* Hero */

#infinite {
	background-color: #14202b;
  height: 100vh;
  min-height: 375px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Without this, #infinite doesn't establish its own stacking context, so
     .tm-hero-bg's z-index: -1 escapes it entirely (scoping to the nearest
     ancestor that DOES form one — effectively the page root) instead of
     staying local. That let #infinite's own opaque background-color paint
     *after*, i.e. on top of, the photo — hiding it completely. Isolating
     here keeps the negative z-index scoped inside #infinite, so the paint
     order is: this background-color (fallback only), then the photo, then
     the hero text — as intended. */
}

.tm-hero-bg {
  /* background-image intentionally not set here — it's admin-editable, so
     it's applied via JS from the data-bg attribute (see static/js/theme.js)
     rather than an inline style="", which would otherwise require loosening
     the CSP to allow unsafe-inline styles. */
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Negative z-index puts it in the painting step *before* #infinite's
     other (non-positioned) children — e.g. .tm-hero-text-container — so
     the photo stays behind the hero text instead of covering it. Without
     this, an absolutely-positioned sibling paints after plain static
     content per CSS stacking rules, regardless of DOM order. */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation: tm-hero-zoom 22s ease-in-out infinite;
}

@keyframes tm-hero-zoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tm-hero-bg {
    animation: none;
  }
}

.tm-hero-text-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.tm-hero-text-container-inner {
  margin-top: -90px;
}

.tm-hero-title {
  font-size: 3.5rem;
  text-shadow: 2px 2px 2px #333;
}

/* Mobile-only: the desktop 3.5rem size was untouched and wraps into 4+
   cramped lines on a phone. Scoped to max-width so nothing above phone
   width changes at all. */
@media (max-width: 575px) {
  .tm-hero-title {
    font-size: 2.1rem;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .tm-hero-title {
    font-size: 2.6rem;
  }
}

.tm-hero-subtitle {
  text-shadow: 2px 2px 2px #333;
}

.tm-intro-next {
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
}

@media (max-height: 480px) {
  .tm-hero-text-container-inner {
    margin-top: -40px;
  }

  .tm-intro-next {
    bottom: 20px;
  }
}

.tm-down-arrow-link {
  display: block;
  margin-top: 18%;
}

.tm-down-arrow {
  	color: #FFF;
    cursor: pointer;
    background: #B80707;
    padding: 15px 40px;
    border-radius: 12px;
    display: inline-block;
    transition: background 0.3s ease, padding 0.3s ease;
    animation: tm-arrow-bounce 1.8s ease-in-out infinite;
}

.tm-down-arrow:hover,
.tm-down-arrow:focus {
  color: #FFF;
  background: #EA0B0B;
  padding: 20px 50px;
  animation-play-state: paused;
}

@keyframes tm-arrow-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

/* Introduction */

#introduction {
  padding-bottom: 100px;
  /* Subtle gold dot-grid on the plain white background — low-opacity
     enough to stay a texture rather than compete with the body text
     sitting on top of it, using the same gold accent as the rest of the
     site's deco elements. Test pass — easy to tune/revert. */
  background-color: #fff;
  background-image: radial-gradient(circle, rgba(201, 167, 91, 0.14) 2px, transparent 2px);
  background-size: 26px 26px;
}

.tm-section-title {
  font-size: 2.6rem;
  /* font-weight intentionally not set here — .tm-text-primary now sets
     bold (700) on the section headings that use it, and this rule used to
     silently cancel that via source-order (same specificity, defined
     later). Board of Directors / Contact don't use .tm-text-primary (for
     good reason — see their own color rules) and get font-weight:normal
     explicitly below instead, so they're unaffected either way. */
}

#testimonials .tm-section-title {
  font-weight: normal;
}

.tm-services-title-wrap {
  margin-top: 20px;
}

/* Small decorative rule under a section title — a gold line fading at
   both ends with a rotated red diamond centered on it, echoing the
   site's red/gold accent pairing used elsewhere (why-card numerals,
   plus marks). */
.tm-title-deco {
  position: relative;
  display: block;
  width: 90px;
  height: 3px;
  margin: 0 auto 40px;
  background: linear-gradient(90deg, transparent, #C9A75B, transparent);
}

.tm-title-deco::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #B80707;
  transform: translate(-50%, -50%) rotate(45deg);
}

.tm-intro-text {
  font-size: 1.2rem;
}

.tm-icon {
  display: block;
  color: #B80707;
}

/* "+ More" toggle — reused on service cards, the team blurb, and each
   director's bio. A continuously pulsing pill (so it draws the eye
   without needing hover, same intent as the hero down-arrow) that
   expands the full detail copy from renarkms.com. The summary above it
   is left untouched; this is purely additive. State is driven by the
   button's aria-expanded attribute — the adjacent-sibling selector below
   reacts to it, so no extra class needs toggling in JS. */
.tm-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 18px;
  border: none;
  border-radius: 20px;
  background: #B80707;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  animation: tm-more-pulse 2.2s ease-in-out infinite;
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(.34, 1.56, .64, 1);
}

.tm-more-toggle:hover,
.tm-more-toggle:focus-visible {
  background: #EA0B0B;
  transform: scale(1.05);
}

/* Replaces the browser's default focus ring (a thin, ill-fitting outline
   hugging the pill shape — reported as a stray outline around the button)
   with an on-brand one, offset so it doesn't collide with the pulse
   animation's own box-shadow. */
.tm-more-toggle:focus-visible {
  outline: 2px solid #C9A75B;
  outline-offset: 3px;
}

.tm-more-toggle[aria-expanded="true"] {
  animation: none;
}

.tm-more-toggle-plus {
  position: relative;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1);
}

.tm-more-toggle-plus::before,
.tm-more-toggle-plus::after {
  content: "";
  position: absolute;
  background: #fff;
}

.tm-more-toggle-plus::before {
  top: 4px;
  left: 0;
  width: 10px;
  height: 2px;
}

.tm-more-toggle-plus::after {
  top: 0;
  left: 4px;
  width: 2px;
  height: 10px;
}

.tm-more-toggle[aria-expanded="true"] .tm-more-toggle-plus {
  transform: rotate(45deg);
}

@keyframes tm-more-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(184, 7, 7, 0.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(184, 7, 7, 0);
  }
}

.tm-more-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  margin-top: -10px;
}

.tm-more-toggle[aria-expanded="true"] + .tm-more-panel {
  grid-template-rows: 1fr;
}

/* Director bio panels are never revealed inline (see #directorModal below)
   — this beats the [aria-expanded="true"] rule above regardless of the
   button's state, since an author class rule always outranks the
   [hidden] UA-stylesheet default on its own. */
.tm-more-panel[hidden] {
  display: none !important;
}

.tm-more-panel-inner {
  overflow: hidden;
}

/* List styling only — used for services' bullet points. Scoped to the
   element (ul.tm-more-panel-inner), not the bare class, so a plain wrapper
   div (team/director bios, which reuse the site's normal <p> styling)
   isn't affected. */
ul.tm-more-panel-inner {
  margin: 0;
  padding-left: 20px;
  color: #707070;
  font-size: 0.95rem;
  line-height: 1.7;
}

ul.tm-more-panel-inner li {
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .tm-more-toggle {
    animation: none;
  }

  .tm-more-panel {
    transition: none;
  }
}

.tm-continue {
	padding: 20px 0 30px 0;
}

/* Directors (repurposed from the template's Testimonials carousel) — photo
   background + the original template's parallax-2 scroll effect, same
   mechanism as #contact used originally. Overlay uses a brand-toned dark
   red/brown wash (not flat black) so it reads as "photo section", not a
   black-themed block. */
#testimonials {
  color: white;
  /* Fallback color (blends with .tm-bg-overlay's dark red/brown wash below)
     in case the parallax shift ever exposes a sliver at the image's edge —
     belt-and-braces on top of the JS-side fix that keeps the shift within
     a safe, bounded range. */
  background-color: #3a1010;
  /* background-image set via JS from data-bg — see the note on #infinite above. */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.tm-testimonials-content {
  position: relative;
  z-index: 100;
}

.tm-bg-overlay {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, rgba(60, 10, 10, 0.72), rgba(30, 8, 8, 0.55));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.tm-testimonials-carousel {
  max-width: 1050px;
  margin: 0 auto;
}

.tm-testimonial-item {
  max-width: 290px;
  margin-left: 35px;
  margin-right: 35px;
  text-align: center;
}

.tm-testimonial-item img {
  border-radius: 50%;
  margin-bottom: 25px;
  width: 190px;
  height: 190px;
  object-fit: cover;
  object-position: top;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid rgba(255,255,255,0.85);
}

.tm-testimonial-item blockquote {
  color: rgba(255,255,255,0.92);
}

.tm-testimonial-item .director-role {
  display: block;
  color: #E7CB90;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

.tm-testimonial-item figcaption {
  text-align: center;
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
}

.tm-testimonial-item .tm-more-toggle {
  margin-top: 16px;
}

/* Work */

.tm-section-desc {
  max-width: 650px;
  width: 100%;
  font-size: 0.9rem;
}

#why .tm-section-desc {
  font-size: 1.15rem;
  font-weight: 700;
}

.tm-gallery-container {
  padding-top: 70px;
  padding-bottom: 120px;
}

.tm-gallery-item {
  margin: 0 15px;
}

.slick-dots {
  bottom: -65px;
}

.slick-dots li {
  margin: 0 13px;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before,
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #C9A75B;
}

.tm-testimonials-carousel .slick-dots li button:before {
  color: white;
  opacity: 0.5;
}

.tm-testimonials-carousel .slick-dots li button:hover:before,
.tm-testimonials-carousel .slick-dots li button:focus:before,
.tm-testimonials-carousel .slick-dots li.slick-active button:before {
  color: white;
  opacity: 1;
}

.slick-dots li button:before {
  font-size: 18px;
}


/* Contact — light theme (no dark/black section, per brand requirement) */

#contact {
  color: #333;
  background-color: #F5F1E9;
  position: relative;
  padding-bottom: 60px;
  padding-top: 100px;
}

#contact p {
  color: #2b2b2b;
}

/* .contact-cta-card sits inside #contact and needs white text on its dark
   gradient — #contact p above (a #id selector) would otherwise always win
   over a plain .contact-cta-card p rule regardless of source order, since
   ID selectors beat class selectors on specificity. Matching the #id here
   guarantees this wins instead. */
#contact .contact-cta-card h2,
#contact .contact-cta-card p,
#contact .contact-cta-card .tm-form-note,
#contact .contact-cta-card .tm-form-error {
  color: #fff;
}

.contact-card {
  background: #fff;
  border: 1px solid #e7e0d3;
  border-radius: 10px;
  padding: 36px 40px;
  box-shadow: 0 20px 45px -30px rgba(20,10,10,0.35);
}

.contact-item {
  margin-left: 0;
  margin-bottom: 30px;
}

.item-link {
  display: flex;
  align-items: center;
}

.item-link i {
  color: #B80707;
  transition: all 0.3s ease;
}

.item-link span {
  color: #333;
  transition: all 0.3s ease;
}

.item-link:hover i,
.item-link:hover span {
  color: #EA0B0B;
}

.contact-cta-card {
  background: linear-gradient(155deg, #B80707 0%, #6E1414 65%, #4A1010 120%);
  color: #fff;
  border-radius: 10px;
  padding: 40px;
}


.tm-form-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 6px;
}

.tm-form-input::placeholder {
  color: rgba(255, 255, 255, 0.65);
  opacity: 1;
}

.tm-form-input:focus {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
  box-shadow: none;
}

.tm-form-note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}

.tm-form-error {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #fff;
}

.tm-flash {
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.tm-flash-success {
  background: rgba(255, 255, 255, 0.92);
  color: #1e6b31;
  border: 1px solid #bfe3c6;
}

.tm-flash-error {
  background: rgba(255, 255, 255, 0.92);
  color: #8a1414;
  border: 1px solid #f0c0c0;
}

/* Honeypot — off-screen rather than display:none/visibility:hidden, since
   some bots specifically skip fields hidden that way but still fill in
   ones that are just positioned off-canvas. Real users, including screen
   reader users (aria-hidden + tabindex="-1" on the field), never see or
   reach it. */
.tm-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tm-captcha-label {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.tm-captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#cf-captcha-canvas,
#cf-captcha-img {
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #fff;
  cursor: default;
}

.tm-captcha-refresh {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 6px;
  width: 44px;
  height: 50px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.tm-captcha-refresh:hover {
  background: rgba(255, 255, 255, 0.18);
}

.tm-captcha-refresh:active {
  transform: rotate(90deg);
}

.tm-captcha-refresh:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Site footer — a proper full-width bar (previously just a line of text
   absolutely positioned over the bottom of the contact section, which
   made it look like an afterthought rather than a designed footer). Dark
   ground with a gold top divider, echoing the same red/gold accent
   pairing used for the section-title decorations elsewhere on the site. */
.tm-site-footer {
  background: #1a1414;
  border-top: 3px solid #C9A75B;
  padding: 36px 15px 28px;
  text-align: center;
}

.tm-site-footer-logo {
  height: 36px;
  width: auto;
  margin-bottom: 18px;
  opacity: 0.9;
}

.tm-site-footer-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  margin: 0;
}

/* Animated underline instead of the plain text-decoration jump — grows
   in from the left on hover/focus, retracts to the right on the way out. */
.tm-footer-link {
  position: relative;
  display: inline-block;
  color: #C9A75B;
  font-weight: 700;
  text-decoration: none;
}

.tm-footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.tm-footer-link:hover,
.tm-footer-link:focus {
  color: #EA0B0B;
}

.tm-footer-link:hover::after,
.tm-footer-link:focus::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .tm-footer-link::after {
    transition: none;
  }
}

p {
  line-height: 1.9;
}

@media (min-width: 768px) {
  .tm-intro-text-container {
    padding-left: 0px;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 30px;
    padding-left: 30px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1275px;
  }

  .tm-container-gallery {
    max-width: 1290px;
  }

  .tm-container-contact {
    max-width: 1063px;
  }
}

@media (max-width: 991px) {
  .tm-intro-text-container {
    padding-left: 15px;
    padding-top: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-intro-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-btn-submit {
    margin-left: 0;
    margin-top: 20px;
  }
}

@media (max-width: 767px) {

  .navbar-nav {
    max-width: 200px;
    text-align: right;
  }

  .navbar-collapse {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    border-radius: 3px;
  }

  .navbar-collapse .nav-link {
    color: #707070;
	padding-right: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .tm-gallery-container {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-gallery-container-2 {
    max-width: 350px;
  }

  .slick-dots li {
    margin: 0 8px;
  }

  .tm-gallery-item {
    margin: 0;
  }

  /* Contact form fields are plain Bootstrap .col-6 with no responsive
     class in the markup, so they stay 50% wide even on the narrowest
     phones. Stacking them full-width here only (≤480px) makes them easier
     to tap and read without touching the two-column layout on tablet+. */
  #contact .form-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------
   Renark MS additions (sections not present in the original template)
   --------------------------------------------------------------- */

.tm-section-alt {
  background-color: #F5F1E9;
}

.tm-team-photo {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  background: #F2ECE2;
  /* contain (not cover) keeps the whole group photo visible — no one gets
     cropped off the sides — while max-height stops a wide (1500x754)
     source photo from rendering huge/overflowing on wide viewports where
     100%-width alone would make it very tall. Any letterbox gap uses a
     light neutral, not black. */
  /* Two gradients intersected — one fades the left/right edges, the other
     fades top/bottom — so all four straight edges feather evenly. (A
     single radial vignette fades corners more than edge midpoints, which
     read as barely faded at all on a wide photo like this one.) */
  mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 767px) {
  .tm-team-photo {
    max-height: 320px;
  }
}

/* Why Mauritius — static card grid, no scrolling. Cards use box-shadow
   elevation ("floating" look) and show a truncated excerpt (see
   .tm-why-excerpt below); a "+ More" pill opens the full official text
   from renarkms.com in a large modal (#whyModal) rather than expanding
   the card itself. */
/* Wider than the site's default 1275px container — at 5 columns the
   default width left each card cramped (~235px); this gives them room
   to breathe on large screens without affecting any other section. */
@media (min-width: 1200px) {
  #why .container {
    max-width: 1500px;
  }
}

/* Fixed column counts (rather than auto-fit) so the 10 reasons always
   split into full, even rows — 5+5 on desktop, 2x5 on tablet, one per
   row on mobile — never a lopsided last row. */
.tm-why-scroll {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 20px;
  padding: 12px 4px 30px;
}

@media (max-width: 1199px) {
  .tm-why-scroll {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .tm-why-scroll {
    grid-template-columns: 1fr;
  }
}

.tm-why-card {
  display: flex;
  flex-direction: column;
  height: 320px;
  background: #fff;
  border-radius: 12px;
  padding: 30px 26px;
  box-shadow: 0 20px 45px -25px rgba(30, 10, 10, 0.35), 0 2px 8px rgba(30, 10, 10, 0.08);
  transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.3s ease, opacity 0.5s ease;
  /* Reveal state below — hidden until #why gets .tm-why-in-view (added by
     theme.js the first time the section scrolls into view). Hover's lift
     further down overrides this once revealed; the faster hover-specific
     transition there (rather than this 0.5s) is what makes hover feel
     snappy while the reveal-in stays a slower cascade. */
  opacity: 0;
  transform: translateY(30px);
}

#why.tm-why-in-view .tm-why-card {
  opacity: 1;
  transform: translateY(0);
}

#why.tm-why-in-view .tm-why-card:nth-child(1) { transition-delay: 0s; }
#why.tm-why-in-view .tm-why-card:nth-child(2) { transition-delay: 0.08s; }
#why.tm-why-in-view .tm-why-card:nth-child(3) { transition-delay: 0.16s; }
#why.tm-why-in-view .tm-why-card:nth-child(4) { transition-delay: 0.24s; }
#why.tm-why-in-view .tm-why-card:nth-child(5) { transition-delay: 0.32s; }
#why.tm-why-in-view .tm-why-card:nth-child(n+6) { transition-delay: 0.4s; }

.tm-why-card:hover {
  transform: translateY(-8px) scale(1.2);
  box-shadow: 0 30px 60px -25px rgba(30, 10, 10, 0.5), 0 8px 18px rgba(30, 10, 10, 0.12);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .tm-why-card {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.25s ease;
  }

  .tm-why-card:hover {
    transform: none;
  }
}

.tm-why-card .tm-why-num {
  display: block;
  font-weight: 700;
  color: #C9A75B;
  font-size: 1.3rem;
  margin-bottom: 10px;
  transform-origin: left center;
  transition: color 0.3s ease, transform 0.35s cubic-bezier(.34, 1.56, .64, 1);
}

.tm-why-card:hover .tm-why-num {
  color: #B80707;
  transform: scale(1.2);
}

.tm-why-card .tm-why-title {
  font-weight: 700;
  color: #2b2b2b;
  font-size: 1.1rem;
  line-height: 1.3;
  min-height: 2.6em; /* reserves 2 lines so a 1-line title doesn't shift the excerpt/button up relative to cards with a 2-line title */
  margin: 0 0 14px;
}

/* Truncated preview — clamped to a fixed number of lines with an
   automatic ellipsis, rather than the card scrolling internally. flex:1
   pads it out to fill the card's fixed height, so the "+ More" pill
   below (margin-top: auto) lines up at the same spot on every card
   regardless of how long each excerpt runs. */
/* max-height (not flex-grow) sizes this to exactly 4 lines — combining
   -webkit-line-clamp with a flex-stretched height is an unreliable
   pairing across engines and was letting a stray partial 5th line leak
   through below the "..." instead of being clipped. em units keep it
   locked to 4 lines regardless of the element's own font-size. */
.tm-why-excerpt {
  max-height: 6.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: #707070;
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}

.tm-why-card .tm-more-toggle {
  align-self: flex-start;
  margin-top: auto;
  margin-bottom: 0;
}


/* Director role line inside the carousel captions */
.director-role {
  font-weight: 400;
}

/* ---------------------------------------------------------------
   Sub-pages (e.g. terms.html) — no hero photo behind the navbar, so it
   must stay permanently in its solid/readable state regardless of the
   scroll-based .scroll class that the hero pages toggle. Specificity here
   (body.tm-subpage .tm-navbar = 0 ids, 2 classes, 1 element) beats
   .tm-navbar.scroll (0 ids, 2 classes, 0 elements) either way.
   --------------------------------------------------------------- */
/* padding-top for the fixed navbar's height is set by theme.js at runtime
   (measures the actual rendered navbar), not hardcoded here — a fixed
   pixel value drifts out of sync the moment the logo/navbar size changes
   (exactly what caused the reported overlap). A small fallback is kept
   here only in case JS fails to run at all. */
body.tm-subpage {
  padding-top: 140px;
}

/* terms.html specifically has no top nav at all (per request) — no navbar
   to clear, so no top padding needed either. Matching both classes here
   (rather than just .tm-subpage-no-nav alone) gives this higher
   specificity than the plain .tm-subpage rule above, so it wins
   regardless of source order — the same class of bug that caused the
   earlier navbar overlap and the CTA-card text-color issue. */
body.tm-subpage.tm-subpage-no-nav {
  padding-top: 0;
}

body.tm-subpage .tm-navbar {
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}

body.tm-subpage .navbar-brand .logo-solid {
  display: block;
}

body.tm-subpage .navbar-brand .logo-transparent {
  display: none;
}

body.tm-subpage .tm-nav-link {
  color: #B80707;
}

body.tm-subpage .tm-nav-link:hover,
body.tm-subpage .tm-nav-link.current {
  color: #FFF;
  background-color: #B80707;
  transform: translateY(-2px);
}

body.tm-subpage .navbar-toggler {
  border: 1px solid #707070;
}

body.tm-subpage .navbar-toggler-icon {
  color: #707070;
}

/* Page banner */
.tm-page-banner {
  background: linear-gradient(155deg, #B80707 0%, #6E1414 65%, #4A1010 120%);
  color: #fff;
  padding: 60px 0;
}

.tm-page-banner h1 {
  font-size: 2.4rem;
  margin-bottom: 8px;
}

.tm-page-banner p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin: 0;
}

.tm-page-banner a {
  color: rgba(255, 255, 255, 0.9);
}

.tm-page-banner a:hover {
  color: #fff;
}

/* Legal content */
.tm-legal-content h2 {
  color: #EA0B0B;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 44px;
  margin-bottom: 16px;
}

.tm-legal-content h2:first-child {
  margin-top: 0;
}

.tm-legal-content p {
  color: #555;
  font-size: 0.98rem;
  line-height: 1.8;
  margin-bottom: 0;
}

.tm-static-footer {
  padding: 30px 15px 40px;
  color: #707070;
}

.tm-static-footer a {
  color: #B80707;
}

.tm-text-justify {
  text-align: justify;
  text-align-last: left; /* avoids stretched/awkward spacing on the final line */
}

/* Director bio modal — a single shared dialog (see #directorModal in the
   markup) that theme.js repopulates from whichever director's "+ More"
   was clicked, rather than one modal per director. Large centered card,
   own scrollbar on the body so a long bio scrolls without moving the
   header/close button. */
.tm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 15px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.tm-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.tm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 10, 0.65);
}

.tm-modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: min(700px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  transform: scale(0.94) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.tm-modal.is-open .tm-modal-dialog {
  transform: scale(1) translateY(0);
}

.tm-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #F5F1E9;
  color: #2b2b2b;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tm-modal-close:hover,
.tm-modal-close:focus-visible {
  background: #B80707;
  color: #fff;
}

.tm-modal-close:focus-visible {
  outline: 2px solid #C9A75B;
  outline-offset: 3px;
}

.tm-modal-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 60px 20px 30px;
  border-bottom: 1px solid #eee;
}

.tm-modal-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex: 0 0 auto;
}

/* Why Mauritius modal — a wide illustrative banner across the top rather
   than a small circular headshot (this is illustrating a topic/place, not
   a person). Sits flush against the dialog's own top corners, so its
   radius has to match .tm-modal-dialog's exactly. */
.tm-modal-banner {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px 14px 0 0;
  flex: 0 0 auto;
}

/* Both modal photos start hidden and fade in only once theme.js confirms
   the new image has actually loaded (adds .is-loaded) — otherwise the
   browser keeps painting whichever photo was in the <img> from the last
   time the modal opened until the new one arrives, which briefly shows
   the wrong picture. */
.tm-modal-photo,
.tm-modal-banner {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tm-modal-photo.is-loaded,
.tm-modal-banner.is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tm-modal-photo,
  .tm-modal-banner {
    transition: none;
  }
}

.tm-modal-dialog-photo .tm-modal-header {
  border-bottom: none;
  padding-bottom: 4px;
}

/* The close button sits on top of the banner photo here rather than a
   plain background, so it needs its own shadow to stay legible against
   whatever the photo looks like underneath. */
.tm-modal-dialog-photo .tm-modal-close {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

@media (max-width: 576px) {
  .tm-modal-banner {
    height: 160px;
  }
}

.tm-modal-header h3 {
  margin: 0 0 4px;
  color: #B80707;
  font-weight: 700;
  font-size: 1.3rem;
}

.tm-modal-role {
  margin: 0;
  color: #707070;
  font-size: 0.95rem;
}

.tm-modal-body {
  padding: 24px 30px 30px;
  overflow-y: auto;
  color: #555;
  font-size: 1rem;
  line-height: 1.8;
}

.tm-modal-body p {
  margin: 0 0 16px;
}

.tm-modal-body p:last-child {
  margin-bottom: 0;
}

body.tm-modal-open {
  overflow: hidden;
}

@media (max-width: 576px) {
  .tm-modal-header {
    padding: 26px 50px 16px 20px;
  }

  .tm-modal-body {
    padding: 20px 20px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-modal,
  .tm-modal-dialog {
    transition: none;
  }
}