/* ==========================================================================
   KRAKÓ - Brand theme override
   Palette + typography from "Brand Logo, Colors and Patterns" (KRAKÓ / 2025)
     #5A2315  deep brown      #EC6426  orange
     #DFBC94  sand            #F8E8D3  cream (page background)
   Typography: Poppins (all weights) for text,
               display serif for headings (stand-in for "Swanley Free")
   Loaded AFTER style.css / responsive.css so it wins.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* --- brand ---------------------------------------------------------- */
  --krako-brown:      #5A2315;
  --krako-orange:     #EC6426;
  --krako-sand:       #DFBC94;
  --krako-cream:      #F8E8D3;
  --krako-cream-2:    #F2DFC6;   /* alternate section background */
  --krako-muted:      #7A4A34;   /* body copy on cream */
  --krako-orange-ink: #B8410C;   /* darker orange for small text on cream */

  /* --- remapped template variables ------------------------------------ */
  --main-color:       rgb(236,100,38);
  --white-color:      rgb(90,35,21);
  --text-color:       rgb(90,35,21);
  --heading-color:    rgb(90,35,21);
  --body-bg-color:    rgb(248,232,211);

  --color-one:        rgb(138,91,69);
  --color-two:        rgb(248,232,211);
  --color-three:      rgb(138,91,69);
  --color-four:       rgb(248,232,211);
  --color-five:       rgb(242,223,198);
  --color-six:        rgb(242,223,198);
  --color-seven:      rgb(242,223,198);
  --color-eight:      rgb(248,232,211);
  --black-color:      rgb(90,35,21);

  --white-color-opacity:       rgba(90,35,21,0.80);
  --white-color-opacity-two:   rgba(90,35,21,0.60);
  --white-color-opacity-three: rgba(90,35,21,0.40);
  --white-color-opacity-four:  rgba(90,35,21,0.20);
  --white-color-opacity-five:  rgba(90,35,21,0.10);

  --black-color-opacity:       rgba(90,35,21,0.80);
  --black-color-opacity-two:   rgba(90,35,21,0.60);
  --black-color-opacity-three: rgba(90,35,21,0.40);
  --black-color-opacity-four:  rgba(90,35,21,0.20);
  --black-color-opacity-five:  rgba(90,35,21,0.10);

  /* --- fonts ---------------------------------------------------------- */
  --font-family-DMsans: 'Poppins', sans-serif;
  --font-family-Forum:  'Playfair Display', Georgia, serif;
}

body,
input, select, button, textarea{
  font-family: 'Poppins', sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Decorative artwork that belonged to the dark theme
   -------------------------------------------------------------------------- */
.left-bg, .right-bg, .left-bot-bg, .right-top-bg,
.pattern-layer, .bottom-image{
  display: none !important;
}

/* separator under the small section labels */
.title-box .pattern-image img{
  display: none;
}
.title-box .pattern-image{
  display: block;
  width: 60px;
  height: 1px;
  margin: 14px auto 18px;
  background: var(--krako-orange);
  opacity: .55;
}
.title-box:not(.centered) .pattern-image{ margin-left: 0; }

.title-box .subtitle span{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--krako-orange-ink);
}

/* small orange text on a cream background needs the deeper ink tone,
   the flat brand orange is too light to read at these sizes */
.theme_color,
.booking-info .bk-no a,
.story-section .bk-no a,
.reserve-section .title .request-info a,
.menu-section .open-timing .hours .theme_color,
.contact-page .more-link a,
.featured-links .link-block .subtitle,
.link .theme-btn span{
  color: var(--krako-orange-ink);
}
.booking-info .bk-title{ color: var(--krako-brown); }
.about-section .author,
.about-block .author,
.contact-page .contactinfo-block .more-link a{ color: var(--krako-orange-ink); }
.story-section .booking-info .bk-no a,
.hidden-bar .booking-info .bk-no a,
.info-bar .booking-info .bk-no a{ color: var(--krako-orange-ink); }
.hidden-bar .booking-info .bk-no a,
.info-bar .booking-info .bk-no a{ color: #F5A377; }
.reserve-section .info-col .bk-title,
.reserve-section .info-col .info li strong{ color: #FFF6EA; font-weight: 600; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.main-header .header-top{
  background: var(--krako-brown);
  border-bottom: none;
}
.main-header .header-top,
.main-header .header-top a,
.main-header .header-top .top-info li{
  color: var(--krako-cream);
}
.main-header .header-top a:hover{ color: var(--krako-sand); }

.main-header .header-upper{ background: transparent; }
.fixed-header .header-upper{
  background: var(--krako-cream);
  box-shadow: 0 6px 24px rgba(90,35,21,.10);
}

/* The header floats over the hero / inner banner photo, so the menu is set in
   the light cream of the brand. Once the sticky header gets its cream
   background it flips to brown. */
.main-menu .navigation > li > a{
  color: var(--krako-cream);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: .08em;
  text-shadow: 0 1px 12px rgba(43,15,8,.45);
}
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a{ color: var(--krako-orange); }

.fixed-header .main-menu .navigation > li > a{
  color: var(--krako-brown);
  text-shadow: none;
}
.fixed-header .main-menu .navigation > li:hover > a,
.fixed-header .main-menu .navigation > li.current > a{ color: var(--krako-orange-ink); }

.main-header .logo img{ max-height: 62px; width: auto; }

/* desktop: menu centred in the header, CTA + burger kept on the right */
@media only screen and (min-width: 1200px){
  .main-header .header-upper .main-box{ position: relative; }
  .main-header .nav-box{ float: right; position: static; }
  .main-header .nav-outer{
    position: absolute;
    left: 50%;
    top: 50%;
    float: none;
    transform: translate(-50%, -50%);
  }
  .main-header .header-upper .links-box{ margin-left: 0; }
  .main-menu .navigation > li{ margin: 0 18px; }
}

/* header CTA: same treatment as the hero's primary button */
.main-header .links-box .link-btn .theme-btn.btn-style-one,
.main-header .links-box .link-btn .theme-btn.btn-style-one .btn-wrap span,
.main-header .links-box .link-btn .theme-btn.btn-style-one .text-one,
.main-header .links-box .link-btn .theme-btn.btn-style-one .text-two{
  color: var(--krako-cream) !important;
}
.main-header .links-box .link-btn .theme-btn.btn-style-one{
  background: var(--krako-orange) !important;
  border-color: var(--krako-orange) !important;
}
.main-header .links-box .link-btn .theme-btn.btn-style-one:hover{
  background: var(--krako-brown) !important;
  border-color: var(--krako-brown) !important;
}

/* the info-panel burger is mobile-only; the desktop header already has the menu */
@media only screen and (min-width: 1200px){
  .main-header .links-box .info-toggler{ display: none; }
}

/* burger icons: cream over the photo, brown on the sticky header */
.main-header .hamburger span,
.main-header .info-btn .hamburger span,
.main-header .hidden-bar-opener .hamburger span{
  background-color: var(--krako-cream) !important;
}
.fixed-header .hamburger span,
.fixed-header .info-btn .hamburger span,
.fixed-header .hidden-bar-opener .hamburger span{
  background-color: var(--krako-brown) !important;
}
.nav-toggler button,
.main-header .nav-outer .mobile-nav-toggler{ color: var(--krako-cream); }
.fixed-header .nav-toggler button,
.fixed-header .nav-outer .mobile-nav-toggler{ color: var(--krako-brown); }
/* ---- slide-in menu panel: cream background, brand type on top ---- */
.hidden-bar,
.hidden-bar .inner-box{
  background-image: none !important;
  background-color: var(--krako-cream) !important;
}
.hidden-bar *{ color: var(--krako-brown); }
.hidden-bar h2{ color: var(--krako-brown); }
.hidden-bar .side-menu ul li a,
.hidden-bar .side-menu li a,
.hidden-bar .navigation li a,
.hidden-bar .info li,
.hidden-bar .info li a{ color: var(--krako-brown); }
.hidden-bar .side-menu ul li a:hover,
.hidden-bar .side-menu ul li:hover > a,
.hidden-bar .side-menu ul > li.current > a,
.hidden-bar .side-menu li a:hover,
.hidden-bar .info li a:hover{ color: var(--krako-orange-ink); }
.hidden-bar .inner-box .cross-icon{ color: var(--krako-brown); }
.hidden-bar .inner-box .cross-icon:hover{ color: var(--krako-orange-ink); }
.hidden-bar .booking-info .bk-title{ color: var(--krako-brown); }
.hidden-bar .booking-info .bk-no a{ color: var(--krako-orange-ink); }
.hidden-bar .separator span{ background: rgba(90,35,21,.25); }

/* ---- slide-in info panel: stays brand brown ---- */
.info-bar,
.info-bar .inner-box{
  background-image: none !important;
  background-color: var(--krako-brown) !important;
}
.info-bar *{ color: var(--krako-cream); }
.info-bar h2{ color: var(--krako-cream); }
.info-bar .info li,
.info-bar .info li a,
.info-bar .inner-box .text{ color: var(--krako-cream); }
.info-bar .info li a:hover{ color: var(--krako-orange); }
.info-bar .inner-box .cross-icon{ color: var(--krako-cream); }
.info-bar .inner-box .cross-icon:hover{ color: var(--krako-orange); }
.info-bar .booking-info .bk-title{ color: var(--krako-sand); }
.info-bar .separator span{ background: rgba(248,232,211,.35); }
.info-bar .inner-box .image-box img{
  border-radius: 6px;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

/* ---- featured cards: keep image and caption in normal flow at every width
        (the template stacked them on top of each other on mobile) ---- */
.featured-links .link-block .inner{ height: auto; }
.featured-links .link-block .image-box,
.featured-links .link-block.alternate .image-box,
.featured-links .link-block .text-block,
.featured-links .link-block.alternate .text-block{
  position: relative !important;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  height: auto;
}
.featured-links .link-block .image-box .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-links .link-block .image-box .image{
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* mobile menu */
.mobile-menu .menu-box{ background: var(--krako-cream); }
.mobile-menu .navigation li > a{ color: var(--krako-brown); }
.mobile-menu .navigation li > a:hover{ color: var(--krako-orange); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.theme-btn.btn-style-one,
.theme-btn.btn-style-two{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
}
.theme-btn.btn-style-one{
  background: var(--krako-orange);
  color: var(--krako-cream);
  border: 1px solid var(--krako-orange);
}
.theme-btn.btn-style-one:hover{
  background: var(--krako-brown);
  border-color: var(--krako-brown);
  color: var(--krako-cream);
}
.theme-btn.btn-style-two{
  background: transparent;
  color: var(--krako-brown);
  border: 1px solid rgba(90,35,21,.35);
}
.theme-btn.btn-style-two:hover{
  background: var(--krako-orange);
  border-color: var(--krako-orange);
  color: var(--krako-cream);
}
/* The hover animation slides a big circle over the button. On the dark theme
   that circle was near-black; after the remap it became cream, which wiped
   out the cream label. Circle = brown, label stays cream. */
.theme-btn.btn-style-one:before{ background: var(--krako-brown) !important; }
.theme-btn.btn-style-one .btn-wrap .text-one,
.theme-btn.btn-style-one .btn-wrap .text-two,
.theme-btn.btn-style-one:hover .btn-wrap .text-one,
.theme-btn.btn-style-one:hover .btn-wrap .text-two{ color: var(--krako-cream) !important; }

/* outline button: orange circle on hover, cream label */
.theme-btn.btn-style-two:before{ background: var(--krako-orange) !important; }
.theme-btn.btn-style-two .btn-wrap .text-one{ color: var(--krako-brown); }
.theme-btn.btn-style-two .btn-wrap .text-two,
.theme-btn.btn-style-two:hover .btn-wrap .text-two{ color: var(--krako-cream) !important; }

/* hero outline button sits on the video: cream circle, brown label */
.hero-section .hero-buttons .btn-style-two:before{ background: var(--krako-cream) !important; }
.hero-section .hero-buttons .btn-style-two .btn-wrap .text-one{ color: var(--krako-cream); }
.hero-section .hero-buttons .btn-style-two .btn-wrap .text-two,
.hero-section .hero-buttons .btn-style-two:hover .btn-wrap .text-two{ color: var(--krako-brown) !important; }

/* --------------------------------------------------------------------------
   Hero (video background)
   -------------------------------------------------------------------------- */
.hero-section{
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--krako-brown);
}
.hero-section .hero-video,
.hero-section .hero-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-section .hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(43,15,8,.78) 0%, rgba(43,15,8,.30) 30%, rgba(43,15,8,.55) 70%, rgba(43,15,8,.85) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(43,15,8,.55) 0%, rgba(43,15,8,.15) 60%, rgba(43,15,8,0) 100%);
}
.hero-section .hero-content{
  position: relative;
  z-index: 2;
  padding: 160px 20px 120px;
  max-width: 900px;
}
.hero-section .hero-logo{
  width: 300px;
  max-width: 70vw;
  margin: 0 auto 26px;
  display: block;
}
.hero-section .hero-title{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 68px;
  line-height: 1.08;
  color: var(--krako-cream);
  margin-bottom: 18px;
  text-shadow: 0 2px 26px rgba(43,15,8,.55);
}
.hero-section .hero-title em{
  font-style: italic;
  color: var(--krako-orange);
}
.hero-section .hero-tagline{
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 17px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--krako-cream);
  margin-bottom: 34px;
  text-shadow: 0 2px 18px rgba(43,15,8,.65);
}
.hero-section .hero-buttons .theme-btn{ margin: 0 8px 12px; }
.hero-section .hero-buttons .btn-style-two{
  color: var(--krako-cream);
  border-color: rgba(248,232,211,.55);
}
.hero-section .hero-buttons .btn-style-two:hover{
  background: var(--krako-cream);
  border-color: var(--krako-cream);
  color: var(--krako-brown);
}
.hero-section .hero-scroll{
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--krako-cream);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .75;
}

@media only screen and (max-width: 767px){
  .hero-section .hero-title{ font-size: 40px; }
  .hero-section{ min-height: 88vh; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
section, .story-section, .menu-section, .why-us, .featured-links{
  background-color: var(--krako-cream);
}
.special-dish{ background-color: var(--krako-cream-2); }

/* orange band sections (brand pattern) */
.section-orange{
  background-color: var(--krako-orange) !important;
}
.section-orange h1,.section-orange h2,.section-orange h3,
.section-orange h4,.section-orange h5,.section-orange .text,
.section-orange p, .section-orange li{ color: var(--krako-cream); }
.section-orange .title-box .subtitle span{ color: var(--krako-cream); }
.section-orange .title-box .pattern-image{ background: var(--krako-cream); }

/* menu list */
.menu-tabs .dish-block .title .ttl{ background-color: var(--krako-cream); }
.menu-tabs .dish-block .title .ttl a{ color: var(--krako-brown); }
.menu-tabs .dish-block .title .ttl a:hover{ color: var(--krako-orange); }
/* price: same type as the dish name, brand orange instead of brown */
.menu-tabs .dish-block .title .price,
.menu-tabs .dish-block .title .price span,
.menu-one .menu-col .dish-block .title .price,
.menu-one .menu-col .dish-block .title .price span,
.menu-two .dish-block .title .price,
.menu-two .dish-block .title .price span{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: -0.01em;
  color: var(--krako-orange-ink);
}
.menu-tabs .dish-block .title .price{ background: var(--krako-cream); }
.menu-tabs .dish-block .dish-image{ background-color: var(--krako-cream-2); }
.menu-tabs .dish-block .desc,
.menu-tabs .dish-block .desc a{ color: var(--krako-muted); }
.menu-one .menu-col .dish-block .title .ttl{ background-color: var(--krako-cream); }
.menu-one .menu-col .dish-block .title .price{ background-color: var(--krako-cream); }
.menu-one.alternate .menu-col .dish-block .title .ttl,
.menu-one.alternate .menu-col .dish-block .title .price{ background-color: var(--krako-cream-2); }

/* menu page: same thumbnail treatment as the home page list */
.menu-one .menu-col .dish-block .inner-box{
  position: relative;
  padding-left: 120px;
  min-height: 100px;
  padding-top: 8px;
}
.menu-one .menu-col .dish-block .dish-image{
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  border-radius: 22px;
  overflow: hidden;
  background-color: var(--krako-cream-2);
}
.menu-one .menu-col .dish-block .dish-image img{
  display: block;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
}

/* placeholder dish artwork: show the icon, don't crop it */
.dish-block .dish-image img[src$="dish-placeholder.svg"]{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
  border-radius: 0;
  transform: none !important;
  opacity: 1 !important;
}
.dish-block .inner-box:hover .dish-image img[src$="dish-placeholder.svg"]{
  opacity: .65 !important;
}
.dish-block .dish-image{ border: 1px solid rgba(90,35,21,.10); }
.menu-one .menu-col .dish-block .desc{ color: var(--krako-muted); }

/* story / why-us / intro copy */
.text, .desc, p{ color: var(--krako-muted); }
h1,h2,h3,h4,h5,h6, .title-box h2{ color: var(--krako-brown); }

/* image overlays that were tuned for a dark page */
.image-layer:after{ background: rgba(90,35,21,.35); }

/* full-bleed statement band */
.intro-section{ position: relative; }
.intro-section:before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(43,15,8,.74);
  z-index: 1;
}
.intro-section .auto-container{ position: relative; z-index: 2; }
.intro-section h2,
.intro-section h3,
.intro-section .auth-title{ color: var(--krako-cream); }
.intro-section .title-box .subtitle span{ color: var(--krako-sand); }
.intro-section .title-box .pattern-image{ background: var(--krako-sand); }
.intro-section .separator span{ background: rgba(248,232,211,.45); }
.intro-section .auth-title{
  font-family: 'Poppins', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--krako-orange);
}

/* about page: wider on desktop now that the info column carries less */
@media only screen and (min-width: 1200px){
  .about-section .auto-container{ max-width: 1400px; }
  .about-section .info-block .inner-box{ padding: 40px 34px; }
}

/* enquiry block: the template pulled this box 270px up to overlap a section
   that no longer exists, so it is reset to sit in its own space */
.reserve-section .outer-box{
  top: 0;
  margin-bottom: 0;
  background: var(--krako-cream-2);
  box-shadow: 0 18px 60px rgba(90,35,21,.08);
}
.reserve-section{ padding: 40px 0 110px; }
.reserve-section .info-col{
  background: var(--krako-brown);
}
.reserve-section .info-col .inner,
.reserve-section .info-col h2,
.reserve-section .info-col .info li,
.reserve-section .info-col .info li strong,
.reserve-section .info-col .bk-title,
.reserve-section .info-col a{ color: var(--krako-cream); }
.reserve-section .info-col .bk-no a,
.reserve-section .info-col .info li a,
.reserve-section .info-col .booking-info .bk-no a{ color: var(--krako-cream) !important; }
.reserve-section .info-col .bk-title{ color: var(--krako-cream); }
.reserve-section .info-col a:hover,
.reserve-section .info-col .bk-no a:hover{ color: var(--krako-orange); }
.reserve-section .info-col .separator span{ background: rgba(248,232,211,.45); }
.reserve-section .reserv-col .title h2{ color: var(--krako-brown); }
.reserve-section .info-col .title h2{ color: var(--krako-cream); }

/* the enquiry form now runs the full width of the box */
.reserve-section .reserv-col.col-lg-12 .inner{ padding-left: 0; padding-right: 0; }
@media only screen and (min-width: 992px){
  .reserve-section .reserv-col.col-lg-12 .inner{ padding: 60px 70px; }
}

/* e-mail shown where the template expected a phone number */
.bk-no.is-email a{
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  letter-spacing: 0;
  word-break: break-word;
}

/* featured cards: one identical caption panel on all three cards.
   The template gave the mirrored card its own background plus a 70% black
   overlay (it was meant to sit on top of the photo on the dark theme). */
.featured-links .link-block .inner,
.featured-links .link-block .text-block,
.featured-links .link-block.alternate .text-block,
.featured-links .link-block .text-block .bl-inner,
.featured-links .link-block.alternate .text-block .bl-inner,
.featured-links .link-block .text-block .content{
  background-color: var(--krako-cream-2) !important;
  background-image: none !important;
}
.featured-links .link-block .text-block .bl-inner:before,
.featured-links .link-block .text-block .bl-inner:after{ display: none; }

.featured-links .text-block .content{ padding: 34px 26px; }
.featured-links .link-block .text-block .content h3,
.featured-links .link-block h3 a{ color: var(--krako-brown); }
.featured-links .link-block .text-block .text,
.featured-links .link-block .text{ color: var(--krako-muted); }
.featured-links .link-block .subtitle{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--krako-orange-ink) !important;
  font-size: 12px;
}
.featured-links .link-block .link .theme-btn,
.featured-links .link-block .link .theme-btn span{
  color: var(--krako-orange-ink) !important;
  font-weight: 600;
  letter-spacing: .18em;
}
.featured-links .link-block .link .theme-btn:hover,
.featured-links .link-block .link .theme-btn:hover span{
  color: var(--krako-brown) !important;
}
.featured-links .link-block h3 a:hover{ color: var(--krako-orange-ink); }

/* about page: gallery slider - one uniform frame for mixed source sizes */
.image-gallery .gallery-block .image{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--krako-cream-2);
}
.image-gallery .gallery-block .image a{ display: block; height: 100%; }
.image-gallery .gallery-block .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* about page: format cards with the KRAKO line icons */
.services-section .s-block .inner{
  padding: 28px 26px 28px 124px;
  background: var(--krako-cream-2);
  border: 1px solid rgba(90,35,21,.10);
  border-radius: 6px;
  /* all four cards share one height, whatever the copy length */
  min-height: 196px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.services-section .s-block.alternate .inner{
  padding: 28px 124px 28px 26px;
  text-align: right;
}
.services-section .s-block{ margin-bottom: 30px; }
.services-section .s-block h4{ margin-bottom: 10px; }
.services-section .s-block .text{ color: var(--krako-muted); }

.services-section .s-block .icon-box{
  position: absolute;
  left: 22px;
  top: 24px;
  width: 84px;
  height: 84px;
  line-height: 84px;
  background: var(--krako-cream);
  border: 1px solid rgba(90,35,21,.12);
}
.services-section .s-block.alternate .icon-box{ left: auto; right: 22px; }
.services-section .s-block .icon-box img{
  width: 44px;
  height: 44px;
  max-height: none;
  display: inline-block;
  vertical-align: middle;
}

/* centre image: circular, on the KRAKO "O" pattern strip
   (replaces the template's art-deco gold strip) */
.services-section .image-col .image-box{ padding-top: 0; position: relative; }
.services-section .image-col .image-box:before{
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -46px;
  bottom: -46px;
  width: 250px;
  background: url(../images/krako/pattern-o.svg) center top repeat;
  background-size: 84px 84px;
  opacity: .55;
  z-index: 0;
}
.services-section .image-col .image-box img{
  width: 360px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto;
  border: 10px solid var(--krako-cream);
  box-shadow: 0 22px 60px rgba(90,35,21,.18);
}

/* on narrow screens the icon sits above the title instead of beside it */
@media only screen and (max-width: 991px){
  .services-section .s-block .inner,
  .services-section .s-block.alternate .inner{
    padding: 26px 24px;
    text-align: left;
    min-height: 0;
    display: block;
  }
  .services-section .s-block .icon-box,
  .services-section .s-block.alternate .icon-box{
    position: relative !important;
    left: auto;
    right: auto;
    top: auto;
    display: block;
    margin: 0 0 18px;
    width: 72px;
    height: 72px;
    line-height: 72px;
  }
  .services-section .s-block .icon-box img{ width: 38px; height: 38px; }
  .services-section .s-block{ margin-bottom: 22px; }
}
.why-us-two .over-box{
  background-color: rgba(43,15,8,.45);
  background-image: linear-gradient(180deg, rgba(43,15,8,0) 0%, rgba(43,15,8,.9) 100%);
}
.why-us-two .over-box h4{
  color: var(--krako-cream);
  text-shadow: 0 1px 10px rgba(43,15,8,.8);
}

/* why-us: the template icons are gold PNGs made for a dark page */
.why-us .why-block .icon-box{ display: none; }
.why-us .why-block .inner-box{
  padding: 34px 26px;
  background: var(--krako-cream-2);
  border: 1px solid rgba(90,35,21,.10);
  border-radius: 4px;
  height: 100%;
}
.why-us .why-block h4{ margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-note{
  display: block;
  margin: 0 0 18px;
  padding: 12px 18px;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(236,100,38,.12);
  border: 1px solid rgba(236,100,38,.35);
  color: var(--krako-brown);
}
.main-footer .form-note{
  background: rgba(248,232,211,.14);
  border-color: rgba(248,232,211,.35);
  color: var(--krako-cream);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="password"],
.form-group select,
.form-group textarea{
  background: var(--krako-cream);
  border: 1px solid rgba(90,35,21,.25);
  color: var(--krako-brown);
  border-radius: 2px;
  font-family: 'Poppins', sans-serif;
}
.form-group input::placeholder,
.form-group textarea::placeholder{ color: rgba(90,35,21,.55); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{ border-color: var(--krako-orange); }
.form-group .ui-selectmenu-button.ui-button,
.ui-selectmenu-menu .ui-menu{
  background: var(--krako-cream);
  border: 1px solid rgba(90,35,21,.25);
  color: var(--krako-brown);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.main-footer{ background-color: var(--krako-brown); position: relative; }
.main-footer .image-layer{ opacity: .10; }
.main-footer:before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43,15,8,.72) 0%, rgba(90,35,21,.92) 100%);
  z-index: 0;
}
.main-footer .upper-section,
.main-footer .footer-bottom{ position: relative; z-index: 2; }
/* the gold rope dividers belonged to the dark theme */
.main-footer .info-col .inner:before,
.main-footer .info-col .inner:after{ display: none; }
.main-footer,
.main-footer .text,
.main-footer p,
.main-footer li,
.main-footer a,
.main-footer .links li a{ color: var(--krako-cream); }
.main-footer h1,.main-footer h2,.main-footer h3,
.main-footer h4,.main-footer h5,.main-footer h6{ color: var(--krako-cream); }
.main-footer .links-col ul li a,
.main-footer .info li a,
.main-footer .info-col .info li a,
.main-footer .newsletter .text,
.main-footer .info-col .newsletter .text{ color: var(--krako-cream); }
.main-footer a:hover,
.main-footer .links li a:hover,
.main-footer .links-col ul li a:hover,
.main-footer .info li a:hover{ color: var(--krako-orange); }
.main-footer .footer-bottom{ border-top: 1px solid rgba(248,232,211,.18); }
.main-footer .copyright{ color: rgba(248,232,211,.70); }
.main-footer .footer-logo img,
.main-footer .logo img{ max-height: 78px; width: auto; }
.main-footer .info-col .content,
.main-footer .info-col .inner{ background-image: none !important; background-color: transparent !important; }
.main-footer .newsletter h3{ font-size: 26px; }

/* scroll-to-top */
.scroll-to-top{
  background: var(--krako-orange);
  color: var(--krako-cream);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */
.preloader, #handle-preloader{ background: var(--krako-cream); }
#handle-preloader .txt-loading .letters-loading,
#handle-preloader .txt-loading .letters-loading:before{
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--krako-orange);
}
#handle-preloader .animation-preloader .spinner{
  border-color: rgba(90,35,21,.15);
  border-top-color: var(--krako-orange);
}
.preloader-close{ color: var(--krako-brown); }

/* --------------------------------------------------------------------------
   Inner page banner
   -------------------------------------------------------------------------- */
/* inner page banner: same treatment as the home hero so the logo and menu
   stay readable over the photo */
.inner-banner{
  position: relative;
  background-color: var(--krako-brown);
  overflow: hidden;
}
.inner-banner .image-layer{ opacity: 1; }
.inner-banner:before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(43,15,8,.80) 0%, rgba(43,15,8,.32) 32%, rgba(43,15,8,.55) 72%, rgba(43,15,8,.85) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(43,15,8,.55) 0%, rgba(43,15,8,.15) 60%, rgba(43,15,8,0) 100%);
}
.inner-banner .auto-container{ position: relative; z-index: 2; }
.inner-banner h1{ text-shadow: 0 2px 26px rgba(43,15,8,.55); }
.inner-banner .subtitle span{ text-shadow: 0 2px 18px rgba(43,15,8,.65); }
.inner-banner h1,
.inner-banner .bread-crumb li,
.inner-banner .bread-crumb li a{ color: var(--krako-cream); }
.inner-banner .bread-crumb li a:hover{ color: var(--krako-orange); }