/* ================================================================
   CEYBREEZ SERVICES V4.9
   Override layer — load AFTER services.css + ceybreez-public-v3.css
   Search "CSS SECTION:" to jump to each visible area.
   ================================================================ */

:root{
  --svc-ink:#0a4139;
  --svc-deep:#07352f;
  --svc-green:#0b695c;
  --svc-mint:#e9f1ec;
  --svc-cream:#f8f4ec;
  --svc-sand:#eee4d5;
  --svc-gold:#c99339;
  --svc-text:#53635e;
  --svc-line:rgba(10,65,57,.12);
  --svc-white:#fff;
  --svc-shell:min(1320px,calc(100% - 48px));
  --svc-shadow:0 18px 54px rgba(19,55,48,.10);
}

body[data-page="services"]{background:var(--svc-cream);color:#173a34}
body[data-page="services"] .site-header{background:linear-gradient(180deg,rgba(4,39,35,.76),rgba(4,39,35,.18),transparent)}
body[data-page="services"] .site-header.scrolled{background:rgba(7,53,47,.95)}

/* ----------------------------------------------------------------
   CSS SECTION: SERVICES HERO
   CONTROLS: Hero background, heading, CTA buttons and right note.
   HTML: Search services.html for "SECTION: SERVICES HERO".
   ---------------------------------------------------------------- */
.services-v4-hero{
  min-height:82vh;
  padding:150px 5vw 74px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(4,42,37,.92),rgba(4,42,37,.60) 50%,rgba(4,42,37,.17)),
    url('images/food.jpg') center 56%/cover no-repeat;
}
.services-v4-hero-inner{width:min(1380px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.55fr);gap:70px;align-items:end}
.services-v4-copy{max-width:820px}
.services-v4-eyebrow{display:inline-flex;align-items:center;gap:11px;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#efc978;margin-bottom:18px}
.services-v4-eyebrow:before{content:"";width:28px;height:1px;background:currentColor}
.services-v4-eyebrow.dark{color:#aa741f}
.services-v4-copy h1{font:600 clamp(56px,6vw,92px)/.93 'Cormorant Garamond',serif;letter-spacing:-.038em;margin:0 0 22px;color:#fff}
.services-v4-copy>p{font:400 16px/1.78 'DM Sans',sans-serif;color:rgba(255,255,255,.82);max-width:690px;margin:0}
.services-v4-actions{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 24px}
.services-v4-actions a{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:10px;padding:0 19px;border-radius:999px;background:#fff;color:var(--svc-deep);text-decoration:none;font:700 11px 'DM Sans',sans-serif;border:1px solid #fff}
.services-v4-actions a:hover{transform:translateY(-2px)}
.services-v4-actions a.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.38)}
.services-v4-tags{display:flex;gap:8px;flex-wrap:wrap}
.services-v4-tags span{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font:600 9.5px 'DM Sans',sans-serif;color:rgba(255,255,255,.84)}
.services-v4-note{border-left:1px solid rgba(255,255,255,.30);padding:8px 0 8px 28px}
.services-v4-note>span{font:700 9px 'DM Sans',sans-serif;letter-spacing:.18em;color:#efc978}
.services-v4-note strong{display:block;font:600 36px/1.02 'Cormorant Garamond',serif;margin:13px 0;color:#fff}
.services-v4-note p{font:400 12px/1.7 'DM Sans',sans-serif;color:rgba(255,255,255,.70);margin:0}

/* ----------------------------------------------------------------
   CSS SECTION: EDITORIAL INTRO
   CONTROLS: Intro copy and three travel-support points.
   ---------------------------------------------------------------- */
.services-v4-intro{width:var(--svc-shell)!important;max-width:none!important;margin:0 auto!important;padding:78px 0 64px!important;display:grid;grid-template-columns:.9fr 1.1fr;gap:62px;background:transparent!important}
.services-v4-intro h2,.services-v4-section-head h2{font:600 clamp(42px,4vw,61px)/.98 'Cormorant Garamond',serif;color:var(--svc-ink);margin:0}
.services-v4-intro>p{font:400 14.5px/1.8 'DM Sans',sans-serif;color:var(--svc-text);padding-top:28px;margin:0}
.services-v4-mini{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--svc-line);margin-top:4px}
.services-v4-mini article{padding:22px 28px 0 0}
.services-v4-mini strong{display:block;font:700 9px 'DM Sans',sans-serif;letter-spacing:.12em;color:#a96f1c;margin-bottom:14px}
.services-v4-mini span{display:block;font:600 24px/1.05 'Cormorant Garamond',serif;color:var(--svc-ink);margin-bottom:7px}
.services-v4-mini p{font:400 12px/1.65 'DM Sans',sans-serif;color:#687772;margin:0}

/* ----------------------------------------------------------------
   CSS SECTION: IMAGE STORY
   CONTROLS: Three image-led cards below the intro.
   ---------------------------------------------------------------- */
.services-v4-story{width:var(--svc-shell);margin:0 auto 78px;display:grid;grid-template-columns:1.25fr .875fr .875fr;gap:12px}
.services-v4-story-card{min-height:390px;position:relative;border-radius:22px;overflow:hidden;background:#d9dfdb}
.services-v4-story-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .65s ease}
.services-v4-story-card:hover img{transform:scale(1.035)}
.services-v4-story-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,28,25,.02) 24%,rgba(4,35,31,.88) 100%)}
.services-v4-story-card>div{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;color:#fff}
.services-v4-story-card span{font:700 8.5px 'DM Sans',sans-serif;letter-spacing:.18em;color:#efcf83}
.services-v4-story-card h3{font:600 28px/1.06 'Cormorant Garamond',serif;margin:7px 0;color:#fff}
.services-v4-story-card.big h3{font-size:35px;max-width:540px}
.services-v4-story-card p{font:400 11.5px/1.65 'DM Sans',sans-serif;color:rgba(255,255,255,.75);margin:0}

/* ----------------------------------------------------------------
   CSS SECTION: SERVICE CATEGORIES
   CONTROLS: Six category cards and filter bar.
   ---------------------------------------------------------------- */
body[data-page="services"] .services-categories{
  width:100%!important;max-width:none!important;margin:0!important;padding:76px max(24px,calc((100% - 1320px)/2)) 64px!important;
  background:var(--svc-sand)!important;text-align:left!important;
}
.services-v4-section-head{width:100%;max-width:1320px;margin:0 auto 28px;text-align:left}
.services-v4-section-head p{font:400 14px/1.7 'DM Sans',sans-serif;color:#60706a;margin:10px 0 0!important;max-width:690px}
.services-categories .services-grid{width:100%!important;max-width:1320px!important;margin:24px auto 0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.services-categories .service-card{min-height:150px!important;padding:22px!important;border-radius:18px!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(10,65,57,.08)!important;box-shadow:none!important;cursor:pointer!important}
.services-categories .service-card:hover{transform:translateY(-3px)!important;background:#fff!important;box-shadow:0 15px 32px rgba(17,58,51,.08)!important}
.services-categories .service-card h3{display:flex;align-items:center;gap:11px;font:600 25px/1.05 'Cormorant Garamond',serif!important;color:var(--svc-ink)!important;margin:0 0 9px!important}
.services-categories .service-card h3 i{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#edf4ef;color:var(--svc-green);font-size:12px;flex:0 0 32px}
.services-categories .service-card p{font:400 12px/1.65 'DM Sans',sans-serif!important;color:#64736e!important;margin:0!important}
body[data-page="services"] .service-filters{width:100%!important;max-width:1320px!important;margin:28px auto 0!important;padding:10px!important;display:grid!important;grid-template-columns:1fr 1fr 1.35fr!important;gap:8px!important;border:1px solid var(--svc-line)!important;background:#fff!important;border-radius:18px!important;box-shadow:0 10px 28px rgba(15,54,48,.05)!important}
body[data-page="services"] .service-filters select,body[data-page="services"] .service-filters input{width:100%!important;min-width:0!important;height:44px!important;border:0!important;border-radius:11px!important;background:#f5f2ec!important;padding:0 13px!important;color:#183a34!important;-webkit-text-fill-color:#183a34!important;font:500 11.5px 'DM Sans',sans-serif!important;outline:0!important}
body[data-page="services"] .service-filters input::placeholder{color:#7b8883!important;-webkit-text-fill-color:#7b8883!important;opacity:1!important}
body[data-page="services"] .service-filters select:focus,body[data-page="services"] .service-filters input:focus{box-shadow:0 0 0 2px rgba(11,105,92,.17)!important}

/* ----------------------------------------------------------------
   CSS SECTION: DYNAMIC SERVICE LIST
   CONTROLS: API/CMS service cards.
   ---------------------------------------------------------------- */
body[data-page="services"] .featured-services{
  width:100%!important;max-width:none!important;margin:0!important;padding:78px max(24px,calc((100% - 1320px)/2)) 86px!important;
  background:#fff!important;color:var(--svc-ink)!important;text-align:left!important;
}
.featured-services .services-v4-section-head{margin-bottom:26px}
.featured-services .services-grid{width:100%!important;max-width:1320px!important;margin:0 auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.featured-services .cms-card{display:flex!important;flex-direction:column!important;min-height:100%!important;padding:0!important;border-radius:20px!important;overflow:hidden!important;background:#fff!important;border:1px solid var(--svc-line)!important;box-shadow:none!important;text-align:left!important}
.featured-services .cms-card:hover{transform:translateY(-4px)!important;box-shadow:var(--svc-shadow)!important}
.featured-services .cms-card .service-card-media{position:relative;height:230px;overflow:hidden;background:#e8ede9}
.featured-services .cms-card .service-card-media img{width:100%!important;height:100%!important;object-fit:cover!important;margin:0!important;border-radius:0!important;transition:transform .6s ease}
.featured-services .cms-card:hover .service-card-media img{transform:scale(1.035)}
.featured-services .cms-card .service-card-media.no-image{background:linear-gradient(135deg,#dfe9e4,#f4efe4)}
.featured-services .cms-card .service-card-badge{position:absolute;left:14px;top:14px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.93);color:var(--svc-deep);font:700 8.5px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.featured-services .cms-card .service-card-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 18px}
.featured-services .cms-card h3{font:600 29px/1.04 'Cormorant Garamond',serif!important;color:var(--svc-ink)!important;margin:0 0 9px!important}
.featured-services .cms-card p{font:400 12px/1.65 'DM Sans',sans-serif!important;color:#63726d!important;margin:0 0 12px!important}
.featured-services .cms-card .service-location{display:flex;align-items:center;gap:7px;color:#31564e!important;font-weight:600!important;margin-top:auto!important;padding-top:8px!important}
.featured-services .cms-card .service-location i{color:var(--svc-green)}
.featured-services .cms-card .service-view-btn{align-self:flex-start!important;margin:15px 0 0!important;min-height:38px!important;padding:0 15px!important;border:0!important;border-radius:999px!important;background:var(--svc-ink)!important;color:#fff!important;font:700 10.5px 'DM Sans',sans-serif!important;cursor:pointer!important}
.services-empty{grid-column:1/-1;padding:34px 24px;border:1px dashed rgba(10,65,57,.18);border-radius:18px;text-align:center;color:#67756f;font:500 13px 'DM Sans',sans-serif;background:#faf8f3}

/* ----------------------------------------------------------------
   CSS SECTION: SERVICES GALLERY
   CONTROLS: Auto-built gallery from service photos/images.
   ---------------------------------------------------------------- */
body[data-page="services"] .services-gallery{width:100%!important;max-width:none!important;margin:0!important;padding:76px max(24px,calc((100% - 1320px)/2)) 82px!important;background:var(--svc-deep)!important;text-align:left!important;color:#fff!important}
.services-gallery .services-v4-section-head h2{color:#fff!important}.services-gallery .services-v4-section-head p{color:rgba(255,255,255,.68)!important}
.services-gallery .services-v4-eyebrow.dark{color:#efc978!important}
.services-gallery .gallery-grid{width:100%!important;max-width:1320px!important;margin:28px auto 0!important;display:grid!important;grid-template-columns:1.35fr .825fr .825fr!important;grid-template-rows:230px 230px!important;gap:10px!important}
.services-gallery .gallery-grid img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:18px!important;box-shadow:none!important;margin:0!important;cursor:pointer!important}
.services-gallery .gallery-grid img:first-child{grid-row:1/3}

/* ----------------------------------------------------------------
   CSS SECTION: BOTTOM CTA
   CONTROLS: Final trip-help banner.
   ---------------------------------------------------------------- */
body[data-page="services"] .services-contact{width:var(--svc-shell)!important;max-width:1320px!important;margin:72px auto!important;padding:58px 62px!important;border-radius:28px!important;background:linear-gradient(120deg,#e4c886,#f2e4bd)!important;text-align:left!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:36px!important;overflow:hidden!important}
.services-contact h2{font:600 clamp(40px,4vw,58px)/.98 'Cormorant Garamond',serif!important;color:var(--svc-ink)!important;margin:0 0 10px!important}
.services-contact p{font:400 13.5px/1.7 'DM Sans',sans-serif!important;color:#485f58!important;margin:0!important;max-width:700px!important}
.services-contact .btn{margin:0!important;white-space:nowrap!important;background:var(--svc-deep)!important;color:#fff!important;border:0!important;padding:13px 19px!important;font:700 11px 'DM Sans',sans-serif!important}

/* ----------------------------------------------------------------
   CSS SECTION: SERVICE MODAL
   CONTROLS: Details popup opened from a dynamic service card.
   ---------------------------------------------------------------- */
body[data-page="services"] .service-modal{z-index:10050!important;background:rgba(4,28,25,.72)!important;backdrop-filter:blur(8px)!important}
body[data-page="services"] .service-modal-content{max-width:760px!important;border-radius:26px!important;padding:28px!important;background:#fff!important;color:#173a34!important;box-shadow:0 30px 80px rgba(0,0,0,.25)!important}
body[data-page="services"] .service-modal-content>img{width:100%!important;max-height:390px!important;object-fit:cover!important;border-radius:18px!important}
body[data-page="services"] .service-modal-content h2{font-size:42px!important;color:var(--svc-ink)!important;margin:18px 0 8px!important}
body[data-page="services"] .service-modal-content p{color:#5b6b66!important}
body[data-page="services"] .service-modal-close{color:var(--svc-ink)!important;background:#fff!important;border-radius:50%;width:36px;height:36px;display:flex!important;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.15)}
body[data-page="services"] .service-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
body[data-page="services"] .service-actions .btn{margin:0!important;padding:10px 15px!important;background:var(--svc-ink)!important;color:#fff!important;font-size:10.5px!important}

@media(max-width:980px){
  .services-v4-hero{min-height:auto;padding:132px 24px 62px}
  .services-v4-hero-inner,.services-v4-intro{grid-template-columns:1fr;gap:34px}
  .services-v4-note{max-width:460px}
  .services-v4-mini{grid-template-columns:repeat(3,1fr)}
  .services-v4-story{grid-template-columns:1fr 1fr}
  .services-v4-story-card.big{grid-column:1/-1}
  .services-categories .services-grid,.featured-services .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .services-gallery .gallery-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:310px 190px!important}
  .services-gallery .gallery-grid img:first-child{grid-column:1/3;grid-row:auto}
  body[data-page="services"] .services-contact{grid-template-columns:1fr!important;padding:46px!important}
}

@media(max-width:680px){
  :root{--svc-shell:calc(100% - 30px)}
  .services-v4-hero{padding:116px 17px 48px;background-position:62% center}
  .services-v4-copy h1{font-size:50px}
  .services-v4-actions a{min-height:44px}
  .services-v4-note{padding-left:18px}
  .services-v4-intro{padding:58px 0 48px!important}
  .services-v4-mini{grid-template-columns:1fr}
  .services-v4-mini article{padding:18px 0;border-bottom:1px solid var(--svc-line)}
  .services-v4-story{grid-template-columns:1fr;margin-bottom:58px}
  .services-v4-story-card,.services-v4-story-card.big{min-height:330px;grid-column:auto}
  .services-categories .services-grid,.featured-services .services-grid{grid-template-columns:1fr!important}
  body[data-page="services"] .service-filters{grid-template-columns:1fr!important}
  body[data-page="services"] .services-categories,body[data-page="services"] .featured-services,body[data-page="services"] .services-gallery{padding-left:15px!important;padding-right:15px!important}
  .services-gallery .gallery-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:270px 145px!important}
  body[data-page="services"] .services-contact{margin:48px 15px!important;width:auto!important;padding:38px 24px!important;border-radius:22px!important}
}


/* ================================================================
   V4.10 CTA CONTRAST FIX
   PURPOSE: Override the stronger white-text rules in ceybreez-public-v3.css.
   ================================================================ */
body[data-page="services"] .services-contact h2 {
  color: #123f37 !important;
  text-shadow: none !important;
}
body[data-page="services"] .services-contact p {
  color: #425c55 !important;
  opacity: 1 !important;
}
body[data-page="services"] .services-contact .btn,
body[data-page="services"] .services-contact .contact-btn {
  background: #0b4b42 !important;
  color: #ffffff !important;
}
body[data-page="services"] .services-contact .btn:hover,
body[data-page="services"] .services-contact .contact-btn:hover {
  background: #083c35 !important;
  color: #ffffff !important;
}