/*
  SÜTTAD brand layer
  Loaded after style.css. Only overrides colors and logo sizing;
  all template effects / transitions stay untouched.

  Palette (taken from the SÜTTAD logo):
    --suttad-navy   #083573  wordmark navy       -> headings, strong text
    --suttad-blue   #2cbdee  milk-splash blue    -> accents, lines, hover
    --suttad-sky    #73ccf4  soft sky blue       -> light accents
    --suttad-green  #98c31e  fresh green         -> reserved for small highlights
    --suttad-mist   #f4f4f5  very light warm grey (a touch of blue) -> small detail backgrounds (sections are white)
    --suttad-mist-line #e5e6e9 light grey line    -> thin borders
    --suttad-slate  #586a7e  blue-grey           -> body text
    --suttad-royal  #1c5fae  between navy and sky -> hover tone for navy titles
*/
:root {
  --suttad-navy: #083573;
  --suttad-blue: #2cbdee;
  --suttad-sky: #73ccf4;
  --suttad-green: #98c31e;
  --suttad-mist: #f4f4f5;
  --suttad-mist-line: #e5e6e9;
  --suttad-slate: #586a7e;
  --suttad-royal: #1c5fae;
}


/* logo sizing (images are 3x for sharp rendering) */
.logo .logo-light,
.main-navigation-bg .logo .logo-dark {
height: 60px;
width: auto;
}

/* scrolled bar is 58px tall: keep the logo inside it */
.main-navigation-bg .logo .logo-dark {
height: 44px;
}

/* tablets: leave room for the menu */
@media only screen and (min-width: 881px) and (max-width: 1199px) {
  .logo .logo-light {
    height: 50px;
  }
}

@media only screen and (max-width: 880px) {
  .logo .logo-light,
  .main-navigation-bg .logo .logo-dark {
    height: 40px;
  }
}

/*
  vertical alignment: the template pads both .logo and .navbar-brand.logo,
  which pushes the taller logo below the menu text. Lift it so its centre
  lines up with the menu labels (and stays centred in the 58px scrolled bar).
*/
.logo .logo-light {
-webkit-transform: translateY(-12px);
        transform: translateY(-12px);
}

.main-navigation-bg .logo .logo-dark {
-webkit-transform: translateY(-5px);
        transform: translateY(-5px);
}

@media only screen and (min-width: 881px) and (max-width: 1199px) {
  .logo .logo-light {
    -webkit-transform: translateY(-7px);
            transform: translateY(-7px);
  }
}

@media only screen and (max-width: 880px) {
  .logo .logo-light,
  .main-navigation-bg .logo .logo-dark {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
}

.footer-credits-logo img {
height: 80px;
width: auto;
}


/* selection */
::-moz-selection {
background: var(--suttad-navy);
color: #fff;
}

::selection {
background: var(--suttad-navy);
color: #fff;
}


/* navigation (hover/active colors stay as in the template) */
.main-navigation-bg .main-navigation .navbar-nav li a,
.main-navigation-bg .main-navigation .navbar-nav li a:hover {
color: var(--suttad-navy);
}

@media only screen and (max-width: 768px) {
  .main-navigation .navbar-nav li a,
  .main-navigation .navbar-nav li a:hover {
    color: var(--suttad-navy);
  }

  .main-navigation-bg .navbar-toggle .icon-bar {
    background: var(--suttad-navy);
  }
}


/* section headings (light backgrounds) */
h2.hero-heading.hero-heading-dark,
.hero-heading.hero-heading-dark,
h2.hero-heading.hero-heading-dark span,
.hero-heading.hero-heading-dark span {
color: var(--suttad-navy);
}

.hero-subheading.hero-subheading-dark,
.hero-subheading.hero-subheading-dark span {
color: var(--suttad-navy);
}

.hero-subheading.hero-subheading-dark span {
color: var(--suttad-blue);
}

.hero-subheading.hero-subheading-dark span::before {
border-top-color: var(--suttad-blue);
}

.hero-subheading span::before {
border-top-color: var(--suttad-sky);
}

h4 {
color: var(--suttad-navy);
}

/* card titles (Amacımız, Hedefimiz, 25 kg ...): logo navy in the logo's heavy
   geometric weight; on hover they turn royal blue and a navy-to-sky line draws in */
.color-switch {
position: relative;
display: inline-block;
padding-bottom: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
font-weight: 900;
letter-spacing: .02em;
color: var(--suttad-navy);
}

.color-switch::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--suttad-navy), var(--suttad-royal) 55%, var(--suttad-sky));
-webkit-transform: scaleX(.18);
        transform: scaleX(.18);
-webkit-transform-origin: left center;
        transform-origin: left center;
-webkit-transition: -webkit-transform .6s cubic-bezier(.22, .61, .36, 1);
        transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.col-all .color-switch {
-webkit-transition: color .45s ease;
        transition: color .45s ease;
}

.col-all:hover .color-switch {
color: var(--suttad-royal);
}

.col-all:hover .color-switch::after {
-webkit-transform: scaleX(1);
        transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .color-switch::after,
  .col-all .color-switch {
    -webkit-transition: none;
            transition: none;
  }
}

.service-number {
color: var(--suttad-navy);
}


/* links */
a.link-effect::after {
background-color: var(--suttad-blue);
}


/* preloader */
.loader {
border-color: rgba(8, 53, 115, .15);
}

.loader span {
border-top-color: var(--suttad-navy);
}


/* hero slide 1: video background (poster shows while loading / if video can't play) */
.swiper-slide-inner-bg.suttad-video-bg {
background-image: url(../video/borek-poster.webp);
}

@media (prefers-reduced-motion: reduce) {
  .suttad-video-bg video {
    display: none;
  }
}


/* hero slides 2-4: photos */
.swiper-slide-inner-bg.suttad-hero-2 {
background-image: url(../img/hero/slide-2-tepsi-boregi.webp);
}

.swiper-slide-inner-bg.suttad-hero-3 {
background-image: url(../img/hero/slide-3-sigara-boregi.webp);
}

.swiper-slide-inner-bg.suttad-hero-4 {
background-image: url(../img/hero/slide-4-pizza.webp);
}


/* centered intro paragraph under a section title */
section .txt.suttad-centered-txt p,
#services .txt.suttad-centered-txt p {
max-width: 760px;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
text-align: center;
}


/* contact info on the dark parallax: keep links light */
.contact-info-text a,
.contact-info-text a:hover,
.contact-info-text a:focus,
.contact-info-text a:visited {
color: #fff;
}

.contact-info-text a[href^="mailto:"] {
text-transform: lowercase;
}

.contact-info-text small {
display: inline-block;
margin-top: 10px;
font-size: 0.8em;
color: var(--suttad-sky);
}


/* eight Turkish menu labels: tighten spacing on mid-size desktops so the menu stays on one line */
@media only screen and (min-width: 1101px) and (max-width: 1399px) {
  .main-navigation .navbar-nav li a,
  .main-navigation-bg .main-navigation .navbar-nav li a {
    padding-left: 11px;
    padding-right: 11px;
  }
}

/* Turkish menu labels are longer: keep the menu on one line on tablets */
@media only screen and (min-width: 769px) and (max-width: 1100px) {
  .main-navigation .navbar-nav li a,
  .main-navigation-bg .main-navigation .navbar-nav li a {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 11px;
  }
}


/* simple pill button (home page -> products page) */
.suttad-center-action {
text-align: center;
}

.suttad-btn,
.suttad-btn:visited {
display: inline-block;
padding: 15px 28px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #fff;
background: var(--suttad-navy);
border-radius: 40px;
text-decoration: none;
-webkit-transition: background .35s ease, transform .35s ease;
        transition: background .35s ease, transform .35s ease;
}

.suttad-btn:hover,
.suttad-btn:focus {
color: #fff;
background: var(--suttad-blue);
-webkit-transform: translateY(-2px);
        transform: translateY(-2px);
}


/* hero (video + banners) stays full width: drop the template's white side frame
   that slides in after load and narrows the hero */
.border-left,
.border-right {
display: none!important;
}


/* greys -> light blue-greys (a hint of the logo blue) */
/* section backgrounds stay white; the cream tone is kept for small details only */
.bg-dark,
.bg-light.bg-light-blog {
background: #fff;
}

.team-box,
.timeline-image {
background: var(--suttad-mist);
}

.skillbar-bar,
.owl-prev.disabled,
.owl-next.disabled {
background: var(--suttad-mist-line)!important;
}

.the-line.the-line-light {
background: var(--suttad-mist-line);
}

.services-accordion > ul > li {
border-bottom-color: var(--suttad-mist-line);
}

.blog-item {
border-top-color: var(--suttad-mist-line);
}

.blog-item:nth-of-type(10) {
border-bottom-color: var(--suttad-mist-line);
}

body,
p,
.blog-item p,
.team-box span,
.testimonial blockquote,
.skillbar-title,
.skill-bar-percent,
.services-accordion ul li span,
.services-accordion ul ul li,
.services-accordion ul ul li a,
.blog-quote p,
.blog-content p {
color: var(--suttad-slate);
}


/* tighter vertical rhythm: the template's spacers make every page very long */
.divider-xl {
height: 110px;
}

.divider-l {
height: 56px;
}

.divider-m {
height: 30px;
}

.divider-m-2 {
height: 26px;
}

.divider-s {
height: 16px;
}

.parallax {
padding: 120px 0;
}

@media only screen and (max-width: 880px) {
  .divider-xl {
    height: 64px;
  }

  .divider-l {
    height: 40px;
  }

  .divider-m {
    height: 22px;
  }

  .divider-m-2 {
    height: 12px;
  }

  .parallax {
    padding: 70px 0;
  }
}

/* "Bünyemizde 6 Marka" circle: the template pushes it 200px down (top: 200px) and
   leaves a tall empty band above it; pull it up so it sits right under the about text */
.timeline-image {
margin-top: -120px;
}

/* footer: logo, social links and copyright sit close together */
.footer-credits .divider-l,
.footer-credits ~ .row .divider-l {
height: 22px;
}

/* blog pages close the footer with a short line + spacer */
.footer-credits ~ .row .divider-xl {
height: 30px;
}

#footer > .divider-l {
height: 30px;
}

@media only screen and (max-width: 880px) {
  .footer-credits .divider-l {
    height: 16px;
  }

  #footer > .divider-l {
    height: 24px;
  }
}


/* site photography (optimised WebP in img/galeri, img/hakkimizda, img/background) */

/* contact band: factory photo under the template's dark overlay */
.parallax-contact {
background-image: url(../img/hakkimizda/fabrika-1200.webp);
}

@media only screen and (min-width: 1400px) {
  .parallax-contact {
    background-image: url(../img/hakkimizda/fabrika-1920.webp);
  }
}

.parallax-blank {
background-image: url(../img/background/suttad-parallax-blank.webp);
}

.wall-images img,
.wall-images-reverse img {
object-fit: cover;
}


/* know-how slider: factory + Erciyes photos, facility text instead of the template skill bars */
.img-fullwidth-know-how-carousel-1 {
background-image: url(../img/hakkimizda/fabrika-1200.webp);
background-position: 40% 50%;
}

/* Erciyes pasture: the photo has extra grass added below so the mountain and the cows sit above the waves */
.img-fullwidth-know-how-carousel-2 {
background-image: url(../img/hakkimizda/erciyes-mera-1200.webp);
background-position: 50% 0;
}

@media only screen and (min-width: 1400px) {
  .img-fullwidth-know-how-carousel-1 {
    background-image: url(../img/hakkimizda/fabrika-1920.webp);
  }

  .img-fullwidth-know-how-carousel-2 {
    background-image: url(../img/hakkimizda/erciyes-mera-1920.webp);
  }
}

.suttad-facility {
max-width: 560px;
margin: 0 auto;
padding: 0 30px;
text-align: left;
}

.suttad-facility .hero-subheading {
text-align: left;
}

.suttad-facility-title {
margin: 0 0 18px;
font-family: 'Montserrat', sans-serif;
font-size: 34px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -.03em;
color: var(--suttad-navy);
}

.suttad-facility-title span {
color: var(--suttad-royal);
}

.suttad-facility p {
margin-bottom: 22px;
}

.suttad-facility-list {
margin: 0 0 28px;
padding: 0;
list-style: none;
}

.suttad-facility-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--suttad-navy);
border-bottom: 1px solid var(--suttad-mist-line);
}

.suttad-facility-list li span {
font-size: 22px;
line-height: 1;
color: var(--suttad-blue);
}

@media only screen and (max-width: 991px) {
  .suttad-facility {
    padding: 60px 20px;
  }

  .suttad-facility-title {
    font-size: 26px;
  }
}

/* the template centres the (short) skill bars in an absolute box; let the
   facility text set the height instead so it never overflows */
#know-how .blockquote {
height: auto!important;
}

#know-how .center-container {
position: relative;
height: 600px;
}

/* narrower desktops: the text wraps more, so grow photo and text column together */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #know-how .center-container,
  #know-how .img-fullwidth {
    min-height: 680px;
    height: 680px;
  }
}

@media only screen and (max-width: 991px) {
  #know-how .center-container {
    height: auto;
  }
}


/*
  typography trial: Montserrat (full Turkish glyph set via Google Fonts latin-ext)
  for headings and large text; body copy stays Raleway
*/
.testimonial blockquote {
font-family: 'Montserrat', sans-serif;
font-size: 21px;
font-style: normal;
font-weight: 600;
line-height: 1.7;
letter-spacing: -.01em;
color: var(--suttad-navy);
}

.testimonial.testimonial-2 blockquote {
color: #fff;
}

.urun-brand-slogan {
font-family: 'Montserrat', sans-serif!important;
font-style: italic;
font-weight: 600;
}

h1, h2, h3, h4,
.hero-heading,
.hero-subheading {
font-family: 'Montserrat', sans-serif;
-webkit-font-feature-settings: "kern" 1, "liga" 1;
        font-feature-settings: "kern" 1, "liga" 1;
}

@media only screen and (max-width: 768px) {
  .testimonial blockquote {
    font-size: 18px;
  }
}


/*
  heading animation (h2 section titles; words split by js/suttad.js):
  words surface softly out of a light blur one after another, then a single light
  sheen (navy -> royal -> sky -> navy) sweeps across every letter from left to right,
  word by word. Every mouse enter replays the sweep.
*/
.hh-word,
.hh-in {
display: inline-block;
}

.hh-wait .hh-in {
opacity: 0;
-webkit-filter: blur(10px);
        filter: blur(10px);
-webkit-transform: translateY(.35em) scale(.98);
        transform: translateY(.35em) scale(.98);
}

.hh-show .hh-in {
opacity: 1;
-webkit-filter: blur(0);
        filter: blur(0);
-webkit-transform: none;
        transform: none;
-webkit-transition: opacity 1s ease, -webkit-filter 1s ease, -webkit-transform 1.1s cubic-bezier(.16, 1, .3, 1);
        transition: opacity 1s ease, filter 1s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
-webkit-transition-delay: calc(var(--i, 0) * 110ms);
        transition-delay: calc(var(--i, 0) * 110ms);
}

.hh-heading .hh-in {
/* text-fill wins over the navy colour rules on heading spans, letting the gradient show */
color: transparent;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(100deg,
    var(--suttad-navy) 0%, var(--suttad-navy) 34%,
    var(--suttad-royal) 41%, var(--suttad-sky) 46%, #e6f8ff 50%, var(--suttad-sky) 54%, var(--suttad-royal) 59%,
    var(--suttad-navy) 66%, var(--suttad-navy) 100%);
background-size: 320% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
        background-clip: text;
}

/* small subheadings ("01. — HAKKIMIZDA"): the template styles every span inside them
   (padding + dash line), so keep that only on the number span, not on the word wrappers */
.hero-subheading .hh-word,
.hero-subheading .hh-in {
padding: 0;
margin: 0;
line-height: inherit;
}

.hero-subheading .hh-word::before,
.hero-subheading .hh-in::before {
content: none;
}

/* the number keeps its blue; its sheen runs blue -> sky -> white */
.hero-subheading .hh-accent .hh-in {
background-image: linear-gradient(100deg,
    var(--suttad-blue) 0%, var(--suttad-blue) 34%,
    var(--suttad-sky) 44%, #e6f8ff 50%, var(--suttad-sky) 56%,
    var(--suttad-blue) 66%, var(--suttad-blue) 100%);
}

/* first sweep after the words have surfaced */
.hh-show .hh-in {
-webkit-animation: hh-sheen 1.5s cubic-bezier(.45, 0, .25, 1) both;
        animation: hh-sheen 1.5s cubic-bezier(.45, 0, .25, 1) both;
-webkit-animation-delay: calc(var(--hh-words, 3) * 110ms + .4s + var(--i, 0) * 150ms);
        animation-delay: calc(var(--hh-words, 3) * 110ms + .4s + var(--i, 0) * 150ms);
}

/* every mouse enter replays it (class toggled by js/suttad.js) */
.hh-show.hh-replay .hh-in {
-webkit-animation: hh-sheen-again 1.2s cubic-bezier(.45, 0, .25, 1) both;
        animation: hh-sheen-again 1.2s cubic-bezier(.45, 0, .25, 1) both;
-webkit-animation-delay: calc(var(--i, 0) * 130ms);
        animation-delay: calc(var(--i, 0) * 130ms);
}

@-webkit-keyframes hh-sheen {
  0% { background-position: 100% 0; -webkit-filter: none; filter: none; }
  50% { -webkit-filter: drop-shadow(0 0 2.7px rgba(44, 189, 238, .19)); filter: drop-shadow(0 0 2.7px rgba(44, 189, 238, .19)); }
  100% { background-position: 0 0; -webkit-filter: none; filter: none; }
}

@keyframes hh-sheen {
  0% { background-position: 100% 0; filter: none; }
  50% { filter: drop-shadow(0 0 2.7px rgba(44, 189, 238, .19)); }
  100% { background-position: 0 0; filter: none; }
}

@-webkit-keyframes hh-sheen-again {
  0% { background-position: 100% 0; -webkit-filter: none; filter: none; }
  50% { -webkit-filter: drop-shadow(0 0 2.7px rgba(44, 189, 238, .19)); filter: drop-shadow(0 0 2.7px rgba(44, 189, 238, .19)); }
  100% { background-position: 0 0; -webkit-filter: none; filter: none; }
}

@keyframes hh-sheen-again {
  0% { background-position: 100% 0; filter: none; }
  50% { filter: drop-shadow(0 0 2.7px rgba(44, 189, 238, .19)); }
  100% { background-position: 0 0; filter: none; }
}

/* banner h1: a light stroke draws under the accent word when the slide is shown */
.hero-heading-home span {
position: relative;
display: inline-block;
}

.hero-heading-home span::after {
content: "";
position: absolute;
left: 0;
right: .1em;
bottom: .04em;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 30%, var(--suttad-sky));
-webkit-transform: scaleX(0);
        transform: scaleX(0);
-webkit-transform-origin: left center;
        transform-origin: left center;
-webkit-transition: -webkit-transform 1.4s cubic-bezier(.16, 1, .3, 1) 1s;
        transition: transform 1.4s cubic-bezier(.16, 1, .3, 1) 1s;
}

.swiper-slide-active .hero-heading-home span::after,
.swiper-container .swiper-slide:only-child .hero-heading-home span::after {
-webkit-transform: scaleX(1);
        transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .hh-wait .hh-in,
  .hh-show .hh-in {
    -webkit-transform: none;
            transform: none;
    -webkit-transition: none;
            transition: none;
  }

  .hh-wait .hh-in {
    opacity: 1;
    -webkit-filter: none;
            filter: none;
  }

  .hh-show .hh-in,
  .hh-show.hh-replay .hh-in {
    -webkit-animation: none;
            animation: none;
    background-position: 0 0;
  }

  .hero-heading-home span::after {
    -webkit-transition: none;
            transition: none;
  }
}


/* home "services 2": product slider (package colours) next to the product list */
.suttad-product-slide {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 40%, #fff 0%, var(--brand-soft, var(--suttad-mist)) 70%);
overflow: hidden;
}

.suttad-product-slide::before {
content: "";
position: absolute;
left: 50%;
top: 38%;
width: 60%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--brand);
opacity: .08;
-webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}

.suttad-product-slide img {
position: relative;
z-index: 1;
width: auto;
max-width: 62%;
max-height: 300px;
object-fit: contain;
margin-top: -200px;
-webkit-filter: drop-shadow(0 24px 30px rgba(8, 53, 115, .18));
        filter: drop-shadow(0 24px 30px rgba(8, 53, 115, .18));
}

/* name label: frosted pill centred in the gap between the package and the waves */
.suttad-product-slide-cap {
position: absolute;
left: 50%;
bottom: 184px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 7px 17px 8px;
text-align: center;
white-space: nowrap;
text-decoration: none!important;
background: rgba(255, 255, 255, .82);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
        backdrop-filter: blur(8px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 40px;
box-shadow: 0 10px 24px -14px rgba(8, 53, 115, .45), inset 0 -2px 0 var(--brand);
-webkit-transform: translateX(-50%);
        transform: translateX(-50%);
-webkit-transition: -webkit-transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease;
        transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease;
}

.suttad-product-slide-cap small,
.suttad-product-slide-cap strong,
.suttad-product-slide-cap em {
line-height: 1.35;
}

.suttad-product-slide-cap small {
font-family: 'Montserrat', sans-serif;
font-size: 7px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brand);
}

.suttad-product-slide-cap strong {
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: -.01em;
color: var(--brand-deep, var(--suttad-navy));
}

.suttad-product-slide-cap em {
font-family: 'Montserrat', sans-serif;
font-size: 7.5px;
font-style: normal;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #8597a9;
}

/* hover: the pill lifts a little */
.suttad-product-slide:hover .suttad-product-slide-cap {
-webkit-transform: translateX(-50%) translateY(-3px);
        transform: translateX(-50%) translateY(-3px);
box-shadow: 0 14px 28px -14px rgba(8, 53, 115, .5), inset 0 -2px 0 var(--brand);
}

/* when a slide comes in, its pill rises softly into place */
.suttad-product-slider .slick-current .suttad-product-slide-cap {
-webkit-animation: suttad-cap-in .8s cubic-bezier(.16, 1, .3, 1) .15s backwards;
        animation: suttad-cap-in .8s cubic-bezier(.16, 1, .3, 1) .15s backwards;
}

@-webkit-keyframes suttad-cap-in {
  from { opacity: 0; -webkit-transform: translateX(-50%) translateY(14px); transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes suttad-cap-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%); }
}

/* below 992px the template no longer positions the slide, so anchor the label to it here */
@media only screen and (max-width: 991px) {
  .suttad-product-slide {
    position: relative;
    height: 560px;
  }

  .suttad-product-slide img {
    max-height: 270px;
    margin-top: -170px;
  }
}

@media only screen and (max-width: 640px) {
  .suttad-product-slide {
    min-height: 0;
    height: 480px;
  }

  .suttad-product-slide img {
    max-height: 160px;
    margin-top: -160px;
  }

  .suttad-product-slide-cap {
    bottom: 180px;
    padding: 6px 13px 7px;
  }

  .suttad-product-slide-cap strong {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suttad-product-slide-cap {
    -webkit-transition: none;
            transition: none;
  }

  .suttad-product-slider .slick-current .suttad-product-slide-cap {
    -webkit-animation: none;
            animation: none;
  }

  .suttad-product-slide:hover .suttad-product-slide-cap {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

/* product list (template accordion) */
/* product list group titles: a little larger, in logo navy, with a royal +/- */
#services-2 .services-accordion > ul > li > span {
padding: 22px 34px 22px 0;
font-size: 14px;
font-weight: 800;
letter-spacing: .08em;
color: var(--suttad-navy);
-webkit-transition: color .35s ease, padding-left .35s ease;
        transition: color .35s ease, padding-left .35s ease;
}

#services-2 .services-accordion > ul > li > span:hover,
#services-2 .services-accordion > ul > li.toggled > span {
color: var(--suttad-royal);
padding-left: 6px;
}

#services-2 .services-accordion > ul > li > span:after {
top: 50%;
right: 0;
width: 22px;
height: 22px;
margin-top: -11px;
font-size: 20px;
line-height: 22px;
color: var(--suttad-royal);
}

#services-2 .services-accordion ul ul {
padding-bottom: 6px;
}

#services-2 .services-accordion ul ul li a {
font-size: 13px;
}

#services-2 .services-accordion ul ul li a {
display: block;
text-decoration: none;
transition: color .3s ease, padding-left .3s ease;
}

#services-2 .services-accordion ul ul li a:hover,
#services-2 .services-accordion ul ul li a:focus {
color: var(--suttad-royal);
padding-left: 6px;
}


/* pizza parallax band: brand slogan instead of the template testimonials + video button */
.suttad-slogan {
position: relative;
z-index: 3;
max-width: 980px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
color: #fff;
}

.suttad-slogan-kicker,
.suttad-slogan-sign {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--suttad-sky);
}

.suttad-slogan-kicker::before,
.suttad-slogan-kicker::after {
content: "";
display: inline-block;
width: 34px;
height: 1px;
margin: 0 14px 3px;
vertical-align: middle;
background: currentColor;
opacity: .7;
}

.suttad-slogan-text {
margin: 22px 0 20px;
font-family: 'Montserrat', sans-serif;
font-size: 54px!important;
font-weight: 800!important;
line-height: 1.15!important;
letter-spacing: -.03em;
text-align: center!important;
color: #fff!important;
text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}

.suttad-slogan-text span {
color: var(--suttad-sky);
}

.suttad-slogan-sign {
font-size: 10px;
letter-spacing: .18em;
color: rgba(255, 255, 255, .75);
}

@media only screen and (max-width: 880px) {
  .suttad-slogan-text {
    font-size: 34px!important;
  }

  .suttad-slogan-kicker::before,
  .suttad-slogan-kicker::after {
    width: 18px;
    margin: 0 8px 3px;
  }
}


/*
  navigation motion (labels wrapped by js/suttad.js): items and logo slide in after the
  preloader, a slim line opens from the centre under the hovered label and stays (short)
  under the current page; the logo lifts slightly on hover. Template colours are kept.
*/
.main-navigation .navbar-nav > li > a .nav-label {
position: relative;
display: inline-block;
}

.main-navigation .navbar-nav > li > a .nav-label::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -7px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, .6), #fff 50%, var(--suttad-sky));
-webkit-transform: scaleX(0);
        transform: scaleX(0);
-webkit-transition: -webkit-transform .45s cubic-bezier(.16, 1, .3, 1);
        transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.main-navigation-bg .main-navigation .navbar-nav > li > a .nav-label::after {
bottom: -6px;
background: linear-gradient(90deg, var(--suttad-navy), var(--suttad-royal) 55%, var(--suttad-sky));
}

.main-navigation .navbar-nav > li > a:hover .nav-label::after,
.main-navigation .navbar-nav > li > a:focus-visible .nav-label::after {
-webkit-transform: scaleX(1);
        transform: scaleX(1);
}

.main-navigation .navbar-nav > li.active > a .nav-label::after {
-webkit-transform: scaleX(.35);
        transform: scaleX(.35);
}

/* a little more presence over the photos */
.main-navigation .navbar-nav > li > a {
letter-spacing: .08em;
}

.navbar-bg-switch:not(.main-navigation-bg) .main-navigation .navbar-nav > li > a {
text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* scrolled bar: soft navy shadow instead of the grey one */
.main-navigation-bg {
-webkit-box-shadow: 0 10px 30px -18px rgba(8, 53, 115, .45);
        box-shadow: 0 10px 30px -18px rgba(8, 53, 115, .45);
}

/* entrance */
.nav-wait .main-navigation .navbar-nav > li,
.nav-wait .navbar-header > .logo {
opacity: 0;
}

.nav-in .main-navigation .navbar-nav > li {
-webkit-animation: nav-drop .7s cubic-bezier(.16, 1, .3, 1) both;
        animation: nav-drop .7s cubic-bezier(.16, 1, .3, 1) both;
-webkit-animation-delay: calc(var(--nav-i, 0) * 70ms + .15s);
        animation-delay: calc(var(--nav-i, 0) * 70ms + .15s);
}

.nav-in .navbar-header > .logo {
-webkit-animation: nav-logo .9s cubic-bezier(.16, 1, .3, 1) both;
        animation: nav-logo .9s cubic-bezier(.16, 1, .3, 1) both;
}

@-webkit-keyframes nav-drop {
  from { opacity: 0; -webkit-transform: translateY(-12px); transform: translateY(-12px); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

@-webkit-keyframes nav-logo {
  from { opacity: 0; -webkit-transform: translateX(-16px); transform: translateX(-16px); -webkit-filter: blur(4px); filter: blur(4px); }
  to { opacity: 1; -webkit-transform: none; transform: none; -webkit-filter: none; filter: none; }
}

@keyframes nav-logo {
  from { opacity: 0; transform: translateX(-16px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* logo hover: slight lift with a soft milk-blue glow */
.navbar-brand.logo {
-webkit-transition: -webkit-transform .5s cubic-bezier(.16, 1, .3, 1), -webkit-filter .5s ease;
        transition: transform .5s cubic-bezier(.16, 1, .3, 1), filter .5s ease;
}

.navbar-brand.logo:hover {
-webkit-transform: translateY(-2px) scale(1.04);
        transform: translateY(-2px) scale(1.04);
-webkit-filter: drop-shadow(0 6px 14px rgba(44, 189, 238, .35));
        filter: drop-shadow(0 6px 14px rgba(44, 189, 238, .35));
}

/* collapsed mobile menu: no underline, items appear without delay */
@media only screen and (max-width: 768px) {
  .main-navigation .navbar-nav > li > a .nav-label::after {
    display: none;
  }

  .nav-in .main-navigation .navbar-nav > li {
    -webkit-animation: none;
            animation: none;
  }

  .nav-wait .main-navigation .navbar-nav > li {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-navigation .navbar-nav > li > a .nav-label::after,
  .navbar-brand.logo {
    -webkit-transition: none;
            transition: none;
  }

  .navbar-brand.logo:hover {
    -webkit-transform: none;
            transform: none;
  }
}

/* current page in the menu: the template greys it out (#ccc), which vanishes on the white
   scrolled bar and the white mobile menu; show it in royal blue there */
.main-navigation-bg .main-navigation .navbar-nav > li.active > a,
.main-navigation-bg .main-navigation .navbar-nav > li.active > a:hover {
color: var(--suttad-royal)!important;
}

@media only screen and (max-width: 768px) {
  .main-navigation .navbar-nav > li.active > a,
  .main-navigation .navbar-nav > li.active > a:hover {
    color: var(--suttad-royal)!important;
  }
}


/* home "02. Markalarımız": the template team carousel, with a brand-tinted panel and the
   logo in place of the team photo (template card, name box and hover overlay unchanged) */
.carousel-img-item-all.suttad-brand-bg {
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
height: auto;
aspect-ratio: 1 / 1;
padding: 30px 30px 80px;
background-image: radial-gradient(circle at 50% 42%, #fff 0%, var(--brand-soft) 78%);
}

.suttad-brand-img {
display: block;
width: auto!important;
max-width: 66%;
max-height: 90px;
object-fit: contain;
}

.carousel-img-item-all.suttad-brand-bg {
padding: 24px;
}

@media only screen and (max-width: 768px) {
  .suttad-brand-img {
    max-height: 60px;
  }

  .carousel-img-item-all.suttad-brand-bg {
    padding: 16px;
  }
}

/* entrance (class toggled by js/suttad.js) */
.owl-carousel-team .owl-item {
-webkit-transition: opacity .8s ease, -webkit-transform 1s cubic-bezier(.16, 1, .3, 1);
        transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.owl-carousel-team.brands-wait .owl-item {
opacity: 0;
-webkit-transform: translateY(40px) scale(.94);
        transform: translateY(40px) scale(.94);
}

/* brand without a logo file yet: typographic wordmark in the same card */
.suttad-brand-wordmark {
position: relative;
z-index: 1;
display: inline-flex;
align-items: baseline;
font-family: 'Montserrat', sans-serif;
font-size: 48px;
font-weight: 900;
line-height: 1;
letter-spacing: -.04em;
color: var(--suttad-navy);
-webkit-transition: -webkit-transform .6s cubic-bezier(.16, 1, .3, 1);
        transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.suttad-brand-wordmark b {
margin-right: .04em;
font-size: 1.25em;
font-weight: 900;
background: linear-gradient(160deg, var(--suttad-sky), var(--suttad-royal));
-webkit-background-clip: text;
        background-clip: text;
-webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 768px) {
  .suttad-brand-wordmark {
    font-size: 34px;
  }
}


/*
  round buttons in logo colours (template had them in black #111): carousel arrows,
  slider arrows, back-to-top and the hover icon on cards.
  Navy -> royal at rest, royal -> milk-splash blue on hover.
*/
.owl-prev,
.owl-next,
.to-top-arrow,
.hover-icons a {
color: #fff;
background: linear-gradient(135deg, var(--suttad-navy) 0%, var(--suttad-royal) 100%)!important;
border-color: transparent!important;
box-shadow: 0 10px 24px -12px rgba(8, 53, 115, .6);
}

/* back-to-top keeps the template's slide-in transition */
.owl-prev,
.owl-next,
.hover-icons a {
-webkit-transition: box-shadow .4s ease, -webkit-transform .4s cubic-bezier(.16, 1, .3, 1), background .4s ease;
        transition: box-shadow .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1), background .4s ease;
}

.owl-prev:hover,
.owl-next:hover,
.to-top-arrow:hover,
.hover-icons a:hover {
color: #fff;
background: linear-gradient(135deg, var(--suttad-royal) 0%, var(--suttad-blue) 100%)!important;
box-shadow: 0 14px 28px -12px rgba(44, 189, 238, .7);
}

.owl-prev:hover,
.owl-next:hover {
-webkit-transform: scale(1.08);
        transform: scale(1.08);
}

.owl-prev.disabled,
.owl-next.disabled {
background: var(--suttad-mist-line)!important;
box-shadow: none;
}

.hover-icons a:hover:after {
background: transparent;
}

.slick-prev:before,
.slick-next:before {
background: linear-gradient(135deg, var(--suttad-navy) 0%, var(--suttad-royal) 100%);
box-shadow: 0 10px 24px -12px rgba(8, 53, 115, .6);
}

.slick-prev:hover:before,
.slick-next:hover:before {
background: linear-gradient(135deg, var(--suttad-royal) 0%, var(--suttad-blue) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .owl-prev:hover,
  .owl-next:hover {
    -webkit-transform: none;
            transform: none;
  }
}


/* big service numbers with the heading sheen: drop the template's outline stroke on the animated text */
.service-number.hh-heading,
.service-number .hh-in {
-webkit-text-stroke: 0;
}


/*
  section rhythm: every section opens and closes with a large spacer, so two white sections
  in a row stacked ~220px of empty space. When the previous section already ends with a spacer,
  the next one starts with a short one -> about 130px between sections everywhere.
*/
.section-all:has(> .divider-xl:last-child) + .section-all > .divider-xl:first-child {
height: 20px;
}

@media only screen and (max-width: 880px) {
  .section-all:has(> .divider-xl:last-child) + .section-all > .divider-xl:first-child {
    height: 16px;
  }
}


/* home contact band: compact glass cards over the factory photo + three actions */
.parallax-contact {
padding: 70px 0 130px;
}

#contact .parallax-content > .divider-l {
height: 34px;
}

#contact .hero-heading {
font-size: 46px;
}

@media only screen and (max-width: 880px) {
  .parallax-contact {
    padding: 70px 0 110px;
  }
}

.suttad-contact-band {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
max-width: 1040px;
margin: 0 auto;
padding: 0 20px;
}

.suttad-contact-card {
padding: 26px 24px 24px;
text-align: center;
color: #fff;
background: rgba(255, 255, 255, .1);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
        backdrop-filter: blur(10px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 20px;
-webkit-transition: background .4s ease, border-color .4s ease, -webkit-transform .5s cubic-bezier(.16, 1, .3, 1);
        transition: background .4s ease, border-color .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.suttad-contact-card:hover {
background: rgba(255, 255, 255, .16);
border-color: rgba(115, 204, 244, .6);
-webkit-transform: translateY(-4px);
        transform: translateY(-4px);
}

.suttad-contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 12px;
font-size: 24px;
color: #fff;
background: linear-gradient(135deg, var(--suttad-royal), var(--suttad-blue));
border-radius: 50%;
box-shadow: 0 10px 24px -10px rgba(44, 189, 238, .8);
}

.suttad-contact-label {
display: block;
margin-bottom: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--suttad-sky);
}

.suttad-contact-card p {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 15px!important;
font-weight: 600;
line-height: 1.7!important;
text-align: center!important;
color: #fff!important;
}

.suttad-contact-card a,
.suttad-contact-card a:visited {
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, .25);
-webkit-transition: border-color .3s ease, color .3s ease;
        transition: border-color .3s ease, color .3s ease;
}

.suttad-contact-card a:hover {
color: var(--suttad-sky);
border-color: var(--suttad-sky);
}

.suttad-contact-card a[href^="mailto:"] {
text-transform: lowercase;
}

.suttad-contact-card small {
display: block;
margin-top: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, .7);
}

.suttad-contact-actions {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 26px;
padding: 0 20px;
}

/* pill buttons (also used on the contact page) */
.suttad-pill,
.suttad-pill:visited {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
background: linear-gradient(135deg, var(--suttad-navy), var(--suttad-royal));
border: 0;
border-radius: 40px;
box-shadow: 0 12px 26px -14px rgba(8, 53, 115, .8);
cursor: pointer;
-webkit-transition: box-shadow .4s ease, -webkit-transform .4s cubic-bezier(.16, 1, .3, 1), background .4s ease;
        transition: box-shadow .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1), background .4s ease;
}

.suttad-pill span {
font-size: 18px;
line-height: 1;
}

.suttad-pill:hover,
.suttad-pill:focus {
color: #fff;
background: linear-gradient(135deg, var(--suttad-royal), var(--suttad-blue));
-webkit-transform: translateY(-2px);
        transform: translateY(-2px);
}

.suttad-pill.is-light,
.suttad-pill.is-light:visited {
color: var(--suttad-navy);
background: #fff;
}

.suttad-pill.is-light:hover {
color: #fff;
background: linear-gradient(135deg, var(--suttad-royal), var(--suttad-blue));
}

.suttad-pill.is-whatsapp,
.suttad-pill.is-whatsapp:visited {
color: #fff;
background: linear-gradient(135deg, #1ebe5d, #25d366);
box-shadow: 0 12px 26px -14px rgba(37, 211, 102, .9);
}

.suttad-pill.is-whatsapp:hover {
background: linear-gradient(135deg, #179c4c, #1ebe5d);
}

@media only screen and (max-width: 880px) {
  .suttad-contact-band {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .suttad-contact-card {
    padding: 20px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suttad-contact-card,
  .suttad-pill {
    -webkit-transition: none;
            transition: none;
  }

  .suttad-contact-card:hover,
  .suttad-pill:hover {
    -webkit-transform: none;
            transform: none;
  }
}


/* site-wide WhatsApp order button (bottom left; back-to-top sits bottom right) */
.suttad-whatsapp {
position: fixed;
left: 24px;
bottom: 24px;
z-index: 9990;
display: inline-flex;
align-items: center;
gap: 7px;
height: 40px;
padding: 0 15px 0 11px;
font-family: 'Montserrat', sans-serif;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #fff!important;
text-decoration: none!important;
background: linear-gradient(135deg, #1ebe5d, #25d366);
border-radius: 40px;
box-shadow: 0 8px 18px -10px rgba(18, 140, 70, .7);
-webkit-transition: -webkit-transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
        transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}

.suttad-whatsapp span {
font-size: 20px;
line-height: 1;
}

.suttad-whatsapp em {
font-style: normal;
}

.suttad-whatsapp:hover {
-webkit-transform: translateY(-3px);
        transform: translateY(-3px);
box-shadow: 0 12px 22px -10px rgba(18, 140, 70, .75);
}

.suttad-whatsapp::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
-webkit-animation: wa-pulse 2.6s ease-out infinite;
        animation: wa-pulse 2.6s ease-out infinite;
pointer-events: none;
}

@-webkit-keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .35); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
}

@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .35); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
}

@media only screen and (max-width: 640px) {
  .suttad-whatsapp {
    left: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .suttad-whatsapp em {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suttad-whatsapp::before {
    -webkit-animation: none;
            animation: none;
  }
}


/* large headings site-wide: 10% lighter than the template's 800 (variable Montserrat allows 720) */
.hero-heading,
.hero-heading span,
.hk-title,
.tarif-title,
.ilt-title,
.yazi-title,
.suttad-facility-title,
.suttad-slogan-text {
font-weight: 720!important;
}


/*
  home contact band in the template's own contact style: no boxes, three centred columns split
  by thin lines, plain line icons, uppercase Montserrat text, dashed outline buttons
  (echoing the template's dashed "Keşfet" circle). Overrides the earlier glass-card look.
*/
.suttad-contact-band {
gap: 0;
}

.suttad-contact-card {
padding: 6px 30px 4px;
background: none;
-webkit-backdrop-filter: none;
        backdrop-filter: none;
border: 0;
border-radius: 0;
}

.suttad-contact-card + .suttad-contact-card {
border-left: 1px solid rgba(255, 255, 255, .2);
}

.suttad-contact-card:hover {
background: none;
-webkit-transform: none;
        transform: none;
}

.suttad-contact-icon {
display: block;
width: auto;
height: auto;
margin: 0 auto 14px;
font-size: 30px;
line-height: 1;
background: none;
border-radius: 0;
box-shadow: none;
-webkit-transition: color .4s ease, -webkit-transform .5s cubic-bezier(.16, 1, .3, 1);
        transition: color .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.suttad-contact-card:hover .suttad-contact-icon {
color: var(--suttad-sky);
-webkit-transform: translateY(-3px);
        transform: translateY(-3px);
}

.suttad-contact-card p {
font-size: 12px!important;
font-weight: 700;
line-height: 2!important;
letter-spacing: .05em;
text-transform: uppercase;
}

.suttad-contact-card a,
.suttad-contact-card a:visited {
border-bottom: 0;
}

.suttad-contact-card small {
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--suttad-sky);
}

/* actions: dashed outline buttons */
#contact .suttad-pill,
#contact .suttad-pill:visited {
padding: 12px 22px;
font-size: 10px;
color: #fff;
background: transparent;
border: 1px dashed rgba(255, 255, 255, .8);
box-shadow: none;
}

#contact .suttad-pill:hover,
#contact .suttad-pill:focus {
color: var(--suttad-navy);
background: #fff;
border-style: solid;
border-color: #fff;
}

#contact .suttad-pill.is-whatsapp span {
color: #25d366;
}

@media only screen and (max-width: 880px) {
  .suttad-contact-band {
    gap: 22px;
  }

  .suttad-contact-card + .suttad-contact-card {
    border-left: 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
}

/* big numbers on the home page ("6" Marka, 1 / 2 / 3 packs): 10% lighter, like the headings */
.intro-years h3,
.intro-years h3 .hh-in {
font-weight: 720!important;
}

.service-number,
.service-number .hh-in {
font-weight: 630!important;
}


/* banner headings in Playball (calligraphic, bakery-sign warmth); the small line above stays Montserrat.
   Playball has a single weight, so no synthetic bold, and normal letter spacing so the script joins up. */
.hero-heading.hero-heading-home,
.hero-heading.hero-heading-home span {
font-family: 'Playball', cursive;
font-weight: 400!important;
letter-spacing: 0;
}

.hero-heading.hero-heading-home {
font-size: 66px;
line-height: 1.15;
}

@media only screen and (max-width: 1199px) {
  .hero-heading.hero-heading-home {
    font-size: 52px;
  }
}

@media only screen and (max-width: 480px) {
  .hero-heading.hero-heading-home {
    font-size: 42px;
  }
}

/* slim company bar under the footer */
.suttad-footer-bar {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 18px;
margin: 12px 0 0;
padding: 11px 20px;
font-family: 'Raleway', sans-serif;
font-style: normal;
font-size: 12px;
line-height: 1.5;
color: rgba(255, 255, 255, .72);
background: var(--suttad-navy);
}
.suttad-footer-bar strong {
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
}
.suttad-footer-bar a {
color: rgba(255, 255, 255, .85)!important;
text-decoration: none;
transition: color .3s ease;
}
.suttad-footer-bar a:hover {
color: var(--suttad-sky)!important;
}
@media only screen and (max-width: 640px) {
.suttad-footer-bar { flex-direction: column; gap: 2px; padding: 12px 16px; font-size: 11.5px; }
}


/* footer logo: soft sheen. A white copy of the logo (added by suttad.js) is revealed through a moving
   gradient mask, so the light stays inside the letters and nothing glows around them. */
.footer-credits-logo a {
position: relative;
display: inline-block;
line-height: 0;
}
.footer-credits-logo img.footer-logo-sheen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
filter: brightness(0) invert(1);
opacity: .8;
-webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
-webkit-mask-size: 300% 100%;
mask-size: 300% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 120% 0;
mask-position: 120% 0;
animation: footer-logo-sheen 5s ease-in-out 1s infinite;
}
.footer-credits-logo a:hover img.footer-logo-sheen {
animation: footer-logo-sheen-hover 1.1s ease-in-out;
}
@keyframes footer-logo-sheen {
0% { -webkit-mask-position: 120% 0; mask-position: 120% 0; }
32%, 100% { -webkit-mask-position: -20% 0; mask-position: -20% 0; }
}
@keyframes footer-logo-sheen-hover {
from { -webkit-mask-position: 120% 0; mask-position: 120% 0; }
to { -webkit-mask-position: -20% 0; mask-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
.footer-credits-logo img.footer-logo-sheen { animation: none; }
}