.elementor-kit-5{--e-global-color-primary:#DC6208;--e-global-color-secondary:#F8F7F2;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   TUTON — Elementor brand CSS
   Paste into: Elementor → ☰ (top-left) → Site Settings → Custom CSS
   Then add the noted CSS classes to the matching Elementor elements.
   ============================================================ */

:root { --tuton-paper:#f8f7f2; --tuton-orange:#dc6208; --tuton-orange-deep:#b8500a; }

/* Base page colours (Hello theme) */
body { background:var(--tuton-paper); color:var(--tuton-orange); }

/* ---------------------------------------------------------
   PROJECT GRID
   Loop Grid widget  -> CSS Classes: tuton-grid
   Loop item wrapper -> CSS Classes: tuton-card
   Caption container -> CSS Classes: tuton-cap   (holds title + date)
   Title element     -> CSS Classes: tuton-cap__name
   Date element      -> CSS Classes: tuton-cap__date
   In the Loop Grid widget, set Columns: 4 and Gap: Column 100 / Row 140 (px).
   --------------------------------------------------------- */
.tuton-card { position:relative; overflow:hidden; }
.tuton-card img { width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; display:block; }

.tuton-cap {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; text-align:center; padding:1rem;
  background:var(--tuton-paper); color:var(--tuton-orange);
  opacity:0; transition:opacity .4s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) { .tuton-card:hover .tuton-cap { opacity:1; } }
.tuton-cap__name { font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:clamp(1.1rem,1.6vw,1.5rem); }
.tuton-cap__date { font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:clamp(.85rem,1vw,1rem); }

/* Phones: no hover — show the name/date as a small label under the image */
@media (hover:none) {
  .tuton-cap { position:static; opacity:1; background:none; flex-direction:row; justify-content:flex-start; gap:.5rem; padding:.6rem 0 0; }
  .tuton-cap__name { font-size:.85rem; }
  .tuton-cap__date { color:var(--tuton-orange-deep); }
}

/* ---------------------------------------------------------
   HEADER (Theme Builder) — transparent, sits over the hero
   Give the header's outer Section/Container -> CSS Classes: tuton-header
   Nav menu items: set them bold + UPPERCASE + colour #dc6208 in the widget.
   --------------------------------------------------------- */
.tuton-header { background:transparent !important; }
.tuton-header a { color:var(--tuton-orange); }

/* ---------------------------------------------------------
   FOOTER (Theme Builder)
   Footer outer Section/Container -> CSS Classes: tuton-foot
   --------------------------------------------------------- */
.tuton-foot, .tuton-foot * { text-transform:uppercase; color:var(--tuton-orange); }
.tuton-foot .tuton-foot__label { font-weight:700; }

/* ---------------------------------------------------------
   HERO VIDEO — full-width 16:9, never cropped
   Video widget wrapper -> CSS Classes: tuton-hero
   --------------------------------------------------------- */
.tuton-hero, .tuton-hero .elementor-wrapper, .tuton-hero video {
  aspect-ratio:16/9 !important; width:100%; height:auto !important;
}
.tuton-hero video { object-fit:contain; background:var(--tuton-paper); }/* End custom CSS */