/* Fonts are loaded once from /css/site.fonts.css. Do not add @import here. */

/* =========================================================
   LAND OF CEYLON - PAGES.CSS
   Purpose: Global inner-page layout + legal/info page styles
   Note: Same layout idea as original file. Only theme colors,
         variable order, and CSS grouping are cleaned.
========================================================= */

/* =========================================================
   01) GLOBAL VARIABLES
========================================================= */

:root{
  /* Inner page layout */
  --page-container-width:90%;
  --page-container-max:1200px;
  --nonhome-nav-offset:0px;

  /* Site theme colors */
  --page-navy:#00162c;
  --page-blue:#113676;
  --page-dark:#0A1F44;
  --page-text:#102033;
  --page-muted:#5d6f86;
  --page-line:rgba(10,31,68,.12);
  --page-soft:#f7f9fc;
  --page-gold:#d4af37;
  --page-white:#ffffff;

  /* Legal / info page theme colors */
  --legal-text-main:var(--page-text);
  --legal-text-muted:var(--page-muted);
  --legal-heading-color:var(--page-dark);
  --legal-accent-color:var(--page-gold);
  --legal-bg-color:var(--page-white);
  --legal-border-color:var(--page-line);
  --legal-box-bg:var(--page-soft);

  /* Typography - legal pages must load their own fonts because inner pages do not always load home CSS */
  --legal-font-body:'Figtree', 'Segoe UI', Arial, var(--site-font-fallback);
  --legal-font-heading:var(--font-display);
}

/* =========================================================
   02) RESET / BOX SIZING
========================================================= */

html{
  box-sizing:border-box;
}

*,
*::before,
*::after{
  box-sizing:inherit;
}

/* =========================================================
   03) NON-HOME PAGE BASE LAYOUT
========================================================= */

body:not(.page-home){
  margin:0;
  overflow-x:hidden;
  background:linear-gradient(180deg, var(--page-navy) 0, var(--page-navy) 140px, var(--page-white) 140px);
  color:var(--page-text);
  transition:padding-top .35s ease, background .35s ease;
}

body.page-home.topbar-open,
body.page-home.topbar-closed{
  padding-top:0 !important;
}

body:not(.page-home).topbar-open{
  --nonhome-nav-offset:36px;
  padding-top:calc(var(--home-topbar-height, 0px) - 20px) !important;
  background:linear-gradient(180deg, var(--page-navy) 0, var(--page-navy) 140px, var(--page-white) 140px);
}

body:not(.page-home).topbar-closed{
  --nonhome-nav-offset:0px;
  padding-top:0 !important;
  background:linear-gradient(180deg, var(--page-navy) 0, var(--page-navy) 140px, var(--page-white) 140px);
}

#topbar-placeholder,
#navbar-placeholder,
#footer-placeholder{
  width:100%;
  margin:0;
  padding:0;
}

.loc-turnstile-wrap{
  margin:16px 0 6px;
  min-height:65px;
}

.loc-turnstile-wrap:empty{
  display:none;
}

body:not(.page-home) #navbar-placeholder{
  margin-bottom:0;
}

body:not(.page-home) .main-nav-desktop{
  transform:translateY(var(--nonhome-nav-offset));
}

body:not(.page-home) main{
  position:relative;
  z-index:1;
  display:block;
}

body:not(.page-home) img,
body:not(.page-home) video,
body:not(.page-home) svg{
  max-width:100%;
}

body:not(.page-home) a{
  text-decoration-thickness:from-font;
}

/* =========================================================
   04) SHARED CONTAINER
   Old Tour Packages page got this from pages.home.css.
   New PHP layout does not load pages.home.css on inner pages,
   so this must live in pages.css.
========================================================= */

.container{
  width:var(--page-container-width);
  max-width:var(--page-container-max);
  margin:0 auto;
}

body.page-packages .container,
body.page-standard .container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}

/* =========================================================
   05) STANDARD PAGE BASE
========================================================= */

body.page-standard main{
  background:var(--page-white);
}

body.page-standard .static-section{
  background:var(--page-white);
}

body.page-guide.page-standard .guide-main{
  min-height:calc(100svh - 220px);
  display:flex;
  align-items:center;
  justify-content:center;
}

body.page-guide.page-standard .guide-soon{
  width:100%;
  padding:24px 0;
}

body.page-guide.page-standard .guide-soon .container{
  max-width:none;
  text-align:center;
}

body.page-join.page-standard .join-main{
  min-height:calc(100svh - 220px);
  display:flex;
  align-items:center;
  justify-content:center;
}

body.page-join.page-standard .join-us-section{
  width:100%;
  padding:24px 0;
}

body.page-join.page-standard .join-us-section .container{
  max-width:none;
  text-align:center;
}

/* =========================================================
   06) LEGAL / INFO PAGE BASE
========================================================= */

.static-section{
  padding:34px 0 80px;
  background-color:var(--legal-bg-color);
  color:var(--legal-text-main);
  font-family:var(--legal-font-body);
  line-height:1.7;
}

.static-section .container{
  max-width:840px;
  margin:0 auto;
}

/* =========================================================
   07) LEGAL HERO / PAGE HEADER
========================================================= */

.cookie-hero,
.faq-page-head,
.terms-hero,
.legal-hero,
.privacy-hero,
.website-terms-hero,
.refund-hero,
.responsible-hero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background-color:var(--legal-box-bg);
  border:0;
  border-radius:0;
  padding:60px 50px;
  margin-top:0;
  margin-bottom:60px;
  position:relative;
  overflow:hidden;
  text-align:left;
  min-height:380px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:none;
}

.faq-page-kicker,
.legal-eyebrow{
  display:block;
  width:50%;
  position:relative;
  z-index:2;
  margin:0 0 15px 0;
  color:var(--legal-accent-color);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:2px;
  line-height:1.3;
  text-transform:uppercase;
}

.static-section h1{
  margin:0 0 20px 0;
  color:var(--legal-heading-color);
  font-family:var(--legal-font-heading);
  font-size:2.8rem;
  font-weight:700;
  line-height:1.2;
}

.cookie-hero > h1,
.terms-hero > h1,
.legal-hero > h1,
.privacy-hero > h1,
.website-terms-hero > h1,
.refund-hero > h1,
.responsible-hero > h1,
.faq-page-head > h1{
  width:50%;
  position:relative;
  z-index:2;
  margin-left:0;
}

.cookie-divider,
.terms-divider,
.refund-divider,
.responsible-divider{
  width:60px;
  height:2px;
  margin:0 0 25px 0;
  position:relative;
  z-index:2;
  background-color:var(--legal-accent-color);
}

body.page-terms .terms-divider{
  background-color:#0a1f44;
  width:200px;
}

body.page-terms .static-section ul li::before{
  color:#0a1f44;
}

body.page-website-terms .static-section ul li::before,
body.page-responsible .static-section ul li::before,
body.page-cookie .static-section ul li::before,
body.page-privacy .static-section ul li::before,
body.page-refund .static-section ul li::before{
  color:#0a1f44;
}

body.page-responsible .responsible-divider,
body.page-cookie .cookie-divider,
body.page-refund .refund-divider{
  background-color:#0a1f44;
}

body.page-responsible .responsible-divider{
  width:200px;
}

body.page-cookie .cookie-divider{
  width:200px;
}

body.page-refund .refund-divider{
  width:200px;
}

.cookie-intro,
.terms-intro-text,
.refund-intro,
.responsible-intro,
.legal-intro,
.legal-hero > p,
.privacy-hero > p,
.website-terms-hero > p,
.faq-page-head > p{
  width:50%;
  margin:0;
  padding-right:40px;
  position:relative;
  z-index:2;
  color:var(--legal-text-muted);
  font-size:1.15rem;
  line-height:1.65;
}

.cookie-hero::after,
.faq-page-head::after,
.terms-hero::after,
.legal-hero::after,
.privacy-hero::after,
.website-terms-hero::after,
.refund-hero::after,
.responsible-hero::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:45%;
  height:100%;
  z-index:1;
  background-size:cover;
  background-position:center;
}

/* Page hero images - 7 pages */
.terms-hero::after        { background-image:url('https://cdn.landofceylon.com/files/legalimg/terms.webp'); }
.cookie-hero::after       { background-image:url('https://cdn.landofceylon.com/files/legalimg/cookie.webp'); }
.faq-page-head::after     { background-image:url('https://cdn.landofceylon.com/files/legalimg/faq.webp'); }
.privacy-hero::after,
body.page-privacy .legal-hero::after{
  background-image:url('https://cdn.landofceylon.com/files/legalimg/privacy.webp');
}
.website-terms-hero::after,
body.page-website-terms .legal-hero::after{
  background-image:url('https://cdn.landofceylon.com/files/legalimg/website-terms.webp');
}
.refund-hero::after       { background-image:url('https://cdn.landofceylon.com/files/legalimg/refund.webp'); }
.responsible-hero::after  { background-image:url('https://cdn.landofceylon.com/files/legalimg/responsible.webp'); }

/* =========================================================
   08) LEGAL CONTENT TYPOGRAPHY
========================================================= */

.cookie-section,
.term-section,
.privacy-section,
.refund-section,
.responsible-section,
.legal-card,
.faq-category-block{
  margin-bottom:45px;
}

.static-section h2{
  margin:40px 0 20px 0;
  padding-bottom:12px;
  border-bottom:1px solid var(--legal-border-color);
  color:var(--legal-heading-color);
  font-family:var(--legal-font-heading);
  font-size:1.8rem;
  font-weight:700;
  line-height:1.3;
}

.static-section h3{
  margin:30px 0 12px 0;
  color:var(--legal-heading-color);
  font-size:1.2rem;
  font-weight:700;
  line-height:1.35;
}

.static-section p{
  margin:0 0 16px 0;
}

.static-section strong{
  color:var(--legal-heading-color);
  font-weight:700;
}

.static-section a{
  color:var(--legal-accent-color);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  transition:color .3s ease, border-color .3s ease;
}

.static-section a:hover{
  color:var(--legal-heading-color);
  border-bottom-color:var(--legal-heading-color);
}

.static-section ul{
  margin:0 0 24px 0;
  padding-left:0;
  list-style:none;
}

.static-section ul li{
  margin-bottom:10px;
  position:relative;
  padding-left:24px;
}

.static-section ul li::before{
  content:"•";
  position:absolute;
  left:0;
  top:-2px;
  color:var(--legal-accent-color);
  font-size:1.2rem;
}

/* =========================================================
   09) CONTACT / INFO BOXES INSIDE LEGAL PAGES
========================================================= */

.privacy-contact,
.contact-block{
  margin-top:20px;
  padding:25px;
  background-color:var(--legal-box-bg);
  border:0;
  border-radius:0;
}

.privacy-contact p,
.contact-block p{
  margin-bottom:8px;
}

/* =========================================================
   10) FAQ ACCORDION
========================================================= */

.loc-faq-list{
  margin-top:25px;
}

.loc-faq-detail{
  padding:20px 0;
  border-bottom:1px solid var(--legal-border-color);
}

.loc-faq-summary{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--legal-heading-color);
  cursor:pointer;
  font-size:1.15rem;
  font-weight:700;
  list-style:none;
  outline:none;
}

.loc-faq-summary::-webkit-details-marker{
  display:none;
}

.loc-faq-icon{
  width:14px;
  height:14px;
  margin-left:15px;
  display:inline-block;
  position:relative;
  flex-shrink:0;
}

.loc-faq-icon::before,
.loc-faq-icon::after{
  content:"";
  position:absolute;
  background-color:var(--legal-accent-color);
  transition:transform .3s ease, opacity .3s ease;
}

.loc-faq-icon::before{
  top:6px;
  left:0;
  width:100%;
  height:2px;
}

.loc-faq-icon::after{
  top:0;
  left:6px;
  width:2px;
  height:100%;
}

.loc-faq-detail[open] .loc-faq-icon::after{
  transform:rotate(90deg);
  opacity:0;
}

.loc-faq-detail[open] .loc-faq-summary{
  color:#0a1f44;
}

.loc-faq-content{
  padding-top:15px;
  color:var(--legal-text-muted);
  line-height:1.6;
}

.loc-faq-content p:last-child{
  margin-bottom:0;
}

.faq-contact-box{
  margin-top:60px;
  padding:40px 30px;
  text-align:center;
  background-color:var(--legal-box-bg);
  border:0;
  border-top:0;
  border-radius:0;
}

.faq-contact-box h2{
  margin-top:0;
  padding-bottom:0;
  border-bottom:none;
}

.privacy-contact a,
.contact-block a,
.faq-contact-box a{
  color:#0a1f44;
  border-bottom-color:#0a1f44;
}

.privacy-contact a:hover,
.contact-block a:hover,
.faq-contact-box a:hover{
  color:#0a1f44;
  border-bottom-color:#0a1f44;
}

.cookie-section a,
.term-section a,
.refund-section a,
.responsible-section a,
.privacy-section a,
.legal-card a{
  color:#0a1f44;
  border-bottom-color:#0a1f44;
}

.cookie-section a:hover,
.term-section a:hover,
.refund-section a:hover,
.responsible-section a:hover,
.privacy-section a:hover,
.legal-card a:hover{
  color:#0a1f44;
  border-bottom-color:#0a1f44;
}

/* =========================================================
   11) RESPONSIVE FIXES
========================================================= */

@media (max-width:900px){
  .cookie-hero,
  .faq-page-head,
  .terms-hero,
  .legal-hero,
  .privacy-hero,
  .website-terms-hero,
  .refund-hero,
  .responsible-hero{
    padding:45px 34px;
    min-height:auto;
  }

  .faq-page-kicker,
  .legal-eyebrow,
  .cookie-hero > h1,
  .terms-hero > h1,
  .legal-hero > h1,
  .privacy-hero > h1,
  .website-terms-hero > h1,
  .refund-hero > h1,
  .responsible-hero > h1,
  .faq-page-head > h1,
  .cookie-intro,
  .terms-intro-text,
  .refund-intro,
  .responsible-intro,
  .legal-intro,
  .legal-hero > p,
  .privacy-hero > p,
  .website-terms-hero > p,
  .faq-page-head > p{
    width:58%;
  }

  .cookie-intro,
  .terms-intro-text,
  .refund-intro,
  .responsible-intro,
  .legal-intro,
  .legal-hero > p,
  .privacy-hero > p,
  .website-terms-hero > p,
  .faq-page-head > p{
    padding-right:24px;
  }
}

@media (max-width:700px){
  .static-section{
    padding:56px 16px;
  }

  .cookie-hero,
  .faq-page-head,
  .terms-hero,
  .legal-hero,
  .privacy-hero,
  .website-terms-hero,
  .refund-hero,
  .responsible-hero{
    padding:34px 24px;
    margin-top:calc(var(--mobile-topbar-h, 38px) + var(--mobile-nav-h, 58px) - 56px);
    margin-bottom:42px;
    background:#071730;
    color:#fff;
  }

  .cookie-hero::before,
  .faq-page-head::before,
  .terms-hero::before,
  .legal-hero::before,
  .privacy-hero::before,
  .website-terms-hero::before,
  .refund-hero::before,
  .responsible-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:
      linear-gradient(180deg, rgba(2,10,22,.12) 0%, rgba(2,10,22,.34) 44%, rgba(2,10,22,.72) 100%),
      linear-gradient(90deg, rgba(2,10,22,.56) 0%, rgba(2,10,22,.18) 58%, rgba(2,10,22,.34) 100%);
    pointer-events:none;
  }

  .cookie-hero::after,
  .faq-page-head::after,
  .terms-hero::after,
  .legal-hero::after,
  .privacy-hero::after,
  .website-terms-hero::after,
  .refund-hero::after,
  .responsible-hero::after{
    opacity:1;
    width:100%;
    z-index:1;
  }

  .faq-page-kicker,
  .legal-eyebrow,
  .cookie-hero > h1,
  .terms-hero > h1,
  .legal-hero > h1,
  .privacy-hero > h1,
  .website-terms-hero > h1,
  .refund-hero > h1,
  .responsible-hero > h1,
  .faq-page-head > h1,
  .cookie-intro,
  .terms-intro-text,
  .refund-intro,
  .responsible-intro,
  .legal-intro,
  .legal-hero > p,
  .privacy-hero > p,
  .website-terms-hero > p,
  .faq-page-head > p{
    width:100%;
    padding-right:0;
    color:#fff;
    opacity:.94;
  }

  .cookie-hero > *,
  .faq-page-head > *,
  .terms-hero > *,
  .legal-hero > *,
  .privacy-hero > *,
  .website-terms-hero > *,
  .refund-hero > *,
  .responsible-hero > *{
    position:relative;
    z-index:3 !important;
  }

  .faq-page-kicker,
  .legal-eyebrow,
  .cookie-hero > h1,
  .terms-hero > h1,
  .legal-hero > h1,
  .privacy-hero > h1,
  .website-terms-hero > h1,
  .refund-hero > h1,
  .responsible-hero > h1,
  .faq-page-head > h1{
    color:#fff;
  }

  body.page-website-terms .legal-hero > h1::after,
  body.page-privacy .legal-hero > h1::after,
  .cookie-divider,
  .terms-divider,
  .refund-divider,
  .responsible-divider{
    background-color:#fff !important;
  }

  .cookie-hero a,
  .faq-page-head a,
  .terms-hero a,
  .legal-hero a,
  .privacy-hero a,
  .website-terms-hero a,
  .refund-hero a,
  .responsible-hero a{
    color:#fff !important;
    border-bottom-color:#fff !important;
  }

  .cookie-hero strong,
  .cookie-hero b,
  .cookie-hero em,
  .cookie-hero span,
  .faq-page-head strong,
  .faq-page-head b,
  .faq-page-head em,
  .faq-page-head span,
  .terms-hero strong,
  .terms-hero b,
  .terms-hero em,
  .terms-hero span,
  .legal-hero strong,
  .legal-hero b,
  .legal-hero em,
  .legal-hero span,
  .privacy-hero strong,
  .privacy-hero b,
  .privacy-hero em,
  .privacy-hero span,
  .website-terms-hero strong,
  .website-terms-hero b,
  .website-terms-hero em,
  .website-terms-hero span,
  .refund-hero strong,
  .refund-hero b,
  .refund-hero em,
  .refund-hero span,
  .responsible-hero strong,
  .responsible-hero b,
  .responsible-hero em,
  .responsible-hero span{
    color:#fff !important;
  }

  .static-section h1{
    font-size:2.15rem;
  }

  .static-section h2{
    font-size:1.45rem;
  }

  .loc-faq-summary{
    font-size:1.05rem;
  }
}

/* =========================================================
   12) SCOPED STATIC PAGE FONT + LAYOUT FIXES
   Applies only to: legal/info pages, About, Contact, Travel Guide, Join Us.
   Kept in pages.css so unrelated package/home/plan styles are untouched.
========================================================= */

body.page-terms,
body.page-refund,
body.page-privacy,
body.page-cookie,
body.page-responsible,
body.page-website-terms,
body.page-faq,
body.page-guide,
body.page-contact,
body.page-about,
body.page-join{
  background:var(--page-white);
  color:var(--page-text);
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.page-website-terms{
  --legal-accent-color:#0a1f44;
}

body.page-website-terms .legal-hero > h1::after{
  content:"";
  display:block;
  width:200px;
  height:2px;
  margin:14px 0 0 0;
  background-color:#0a1f44;
}

body.page-privacy .legal-hero > h1::after{
  content:"";
  display:block;
  width:200px;
  height:2px;
  margin:14px 0 0 0;
  background-color:#0a1f44;
}

body.page-terms main,
body.page-refund main,
body.page-privacy main,
body.page-cookie main,
body.page-responsible main,
body.page-website-terms main,
body.page-faq main,
body.page-guide main,
body.page-contact main,
body.page-about main,
body.page-join main{
  background:var(--page-white);
  overflow:hidden;
}

body.page-terms .static-section,
body.page-refund .static-section,
body.page-privacy .static-section,
body.page-cookie .static-section,
body.page-responsible .static-section,
body.page-website-terms .static-section,
body.page-faq .static-section,
body.page-guide .static-section,
body.page-contact .static-section,
body.page-about .static-section,
body.page-join .static-section{
  background:var(--page-white);
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
}

body.page-terms h1,
body.page-terms h2,
body.page-terms h3,
body.page-refund h1,
body.page-refund h2,
body.page-refund h3,
body.page-privacy h1,
body.page-privacy h2,
body.page-privacy h3,
body.page-cookie h1,
body.page-cookie h2,
body.page-cookie h3,
body.page-responsible h1,
body.page-responsible h2,
body.page-responsible h3,
body.page-website-terms h1,
body.page-website-terms h2,
body.page-website-terms h3,
body.page-faq h1,
body.page-faq h2,
body.page-faq h3,
body.page-guide h1,
body.page-guide h2,
body.page-guide h3,
body.page-contact h1,
body.page-contact h2,
body.page-contact h3,
body.page-about h1,
body.page-about h2,
body.page-about h3,
body.page-join h1,
body.page-join h2,
body.page-join h3{
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
}

/* =========================================================
   13) ABOUT US PAGE - migrated safely from old static page
========================================================= */

body.page-about .about-container{
  width:100%;
  margin:0;
  background:#fff;
}

body.page-about .about-container > .static-section{
  padding:72px 0 100px;
}

body.page-about .about-container .container{
  width:min(1100px, calc(100% - 40px));
  max-width:1100px;
  margin:0 auto;
}

body.page-about .about-container,
body.page-about .about-container *{
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
}

body.page-about .about-hero{
  max-width:800px;
  margin:0 auto 60px;
  text-align:center;
}

body.page-about .about-hero h1{
  margin:0 0 20px;
  padding:0;
  border:0;
  color:var(--page-navy);
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:clamp(40px, 5vw, 60px);
  font-weight:800;
  line-height:1.1;
}

body.page-about .about-hero .hero-intro{
  margin:0;
  color:#000;
  font-size:clamp(18px, 2.5vw, 24px);
  font-weight:500;
  line-height:1.55;
}

body.page-about .about-divider{
  width:60px;
  height:3px;
  margin:40px auto;
  background:var(--page-navy);
}

body.page-about .about-split-section,
body.page-about .about-whatwedo{
  display:grid;
  grid-template-columns:1fr 1.8fr;
  gap:40px;
  margin-bottom:80px;
}

body.page-about .about-split-section{
  padding-top:60px;
  border-top:1px solid #dcdcdc;
}

body.page-about .about-story{
  padding-top:0;
  border-top:0;
}

body.page-about .about-split-content{
  font-size:17px;
  line-height:1.8;
}

body.page-about .about-split-section h2,
body.page-about .about-story h2,
body.page-about .about-grid-section h2,
body.page-about .about-whatwedo h2{
  margin:0 0 30px;
  padding:0;
  border:0;
  color:var(--page-navy);
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-weight:800;
  line-height:1.16;
}

body.page-about .about-split-section h2,
body.page-about .about-story h2,
body.page-about .about-whatwedo h2,
body.page-about .about-grid-section h2{
  font-size:clamp(30px, 4vw, 42px);
}

body.page-about .about-split-section h2,
body.page-about .about-whatwedo h2{
  margin:0;
}

body.page-about .about-split-content p,
body.page-about .about-story p,
body.page-about .whatwedo-content p,
body.page-about .why-card p,
body.page-about .step-subtext{
  color:#000;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
}

body.page-about .about-split-content p,
body.page-about .about-story p{
  margin:0 0 20px;
}

body.page-about .about-whatwedo{
  padding-top:60px;
  border-top:1px solid #dcdcdc;
}

body.page-about .whatwedo-content{
  font-size:17px;
  line-height:1.7;
}

body.page-about .whatwedo-content ul{
  margin:20px 0;
  padding:0;
  list-style:none;
}

body.page-about .whatwedo-content li{
  position:relative;
  margin-bottom:12px;
  padding-left:20px;
  color:#000;
}

body.page-about .whatwedo-content li::before{
  content:"■";
  position:absolute;
  left:0;
  top:6px;
  color:var(--page-navy);
  font-size:10px;
  line-height:1;
}

body.page-about .about-grid-section{
  margin-bottom:80px;
  padding-top:60px;
  border-top:1px solid #dcdcdc;
}

body.page-about .about-grid-section h2{
  margin:0 0 50px;
  text-align:left;
}

body.page-about .about-3col-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:30px;
}

body.page-about .why-card{
  padding:40px 30px;
  background:#e6ecf5;
  text-align:center;
}

body.page-about .why-card h3,
body.page-about .step-card h3{
  margin:0 0 15px;
  padding:0;
  border:0;
  color:var(--page-navy);
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-weight:800;
}

body.page-about .why-card h3{
  font-size:22px;
}

body.page-about .why-card p{
  margin:0;
  font-size:16px;
}

body.page-about .step-card{
  text-align:left;
}

body.page-about .step-number{
  display:block;
  margin-bottom:15px;
  color:var(--page-navy);
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:56px;
  font-weight:800;
  line-height:1;
}

body.page-about .step-card h3{
  margin-bottom:10px;
  font-size:20px;
}

body.page-about .step-subtext{
  margin:0;
  color:#1f2f47;
  font-size:15px;
  line-height:1.4;
}

/* =========================================================
   14) CONTACT US PAGE - migrated safely from old static page
========================================================= */

body.page-contact .contact-main,
body.page-contact .loc-contact-page{
  background:#fff !important;
}

body.page-contact .contact-page-section{
  padding:72px 0 90px;
}

body.page-contact .contact-page-section .container{
  width:min(1000px, calc(100% - 40px));
  max-width:1000px;
  margin:0 auto;
}

body.page-contact .loc-contact-shell{
  width:100%;
  margin:0 auto;
}

body.page-contact .loc-contact-grid,
body.page-contact .loc-contact-main{
  display:block;
}

body.page-contact .loc-contact-card{
  margin:0 0 20px;
  padding:0 0 20px;
  background:transparent;
  border:0;
  border-bottom:1px solid #dcdcdc;
  border-radius:0;
  box-shadow:none;
}

body.page-contact .loc-contact-card:last-child{
  margin-bottom:0;
  border-bottom:0;
}

body.page-contact .loc-contact-card h2{
  margin:0 0 16px;
  padding:0;
  border:0;
  color:#111;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:clamp(24px, 2.8vw, 34px);
  font-weight:700;
  line-height:1.2;
}

body.page-contact .loc-contact-card h2.loc-call-title{
  font-size:clamp(40px, 5vw, 60px);
  font-weight:800;
  line-height:1.1;
}

body.page-contact .loc-contact-card p,
body.page-contact .loc-contact-card li,
body.page-contact .loc-contact-card label{
  color:#111;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:16px;
  line-height:1.45;
}

body.page-contact .loc-contact-card p{
  max-width:700px;
  margin:0 0 8px;
}

body.page-contact .loc-contact-card p:last-child{
  margin-bottom:0;
}

body.page-contact .loc-contact-big{
  margin-bottom:8px;
}

body.page-contact .loc-contact-big a{
  color:var(--page-blue);
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:clamp(22px, 3.2vw, 30px);
  font-weight:700;
  text-decoration:none;
  border:0;
  transition:color .2s ease;
}

body.page-contact .loc-contact-big a:hover{
  color:var(--page-dark);
}

body.page-contact .loc-contact-card a{
  color:var(--page-blue);
  font-weight:700;
  text-decoration:none;
  border:0;
}

body.page-contact .loc-hours-list{
  display:flex;
  max-width:600px;
  margin-top:20px;
  flex-direction:column;
  gap:12px;
}

body.page-contact .loc-hours-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

body.page-contact .loc-hours-block{
  padding:18px 24px;
  background:#e8e8e8;
  color:#111;
  font-size:15px;
}

body.page-contact .loc-contact-form{
  max-width:700px;
  margin-top:10px;
}

body.page-contact .loc-contact-error{
  margin-bottom:16px !important;
  padding:12px 14px;
  border:1px solid rgba(207,31,46,.26);
  background:rgba(207,31,46,.08);
  color:#d71920 !important;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:15px;
  font-weight:900;
  line-height:1.45;
}

body.page-contact .loc-contact-error:focus{
  outline:2px solid rgba(207,31,46,.24);
  outline-offset:2px;
}

@media (max-width: 991px){
  body.page-contact .loc-contact-error{
    padding-left:0;
    padding-right:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  body.page-contact .loc-contact-error:focus{
    outline:0;
  }
}

body.page-contact .loc-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}

body.page-contact .loc-field{
  display:flex;
  margin-bottom:16px;
  flex-direction:column;
}

body.page-contact .loc-field label{
  margin-bottom:8px;
  color:#111;
  font-weight:700;
}

body.page-contact .loc-field input,
body.page-contact .loc-field textarea{
  width:100%;
  padding:15px;
  border:1px solid #ccc;
  border-radius:0;
  outline:none;
  background:#fdfdfd;
  color:#111;
  font-family:inherit;
  font-size:16px;
  transition:border-color .2s ease;
}

body.page-contact .loc-field input:focus,
body.page-contact .loc-field textarea:focus{
  border-color:var(--page-blue);
}

body.page-contact .loc-email-suggestion-list{
  margin-top:-1px;
  border:1px solid rgba(17,54,118,.2);
  background:#fff;
  display:grid;
  gap:0;
  box-shadow:0 8px 20px rgba(17,54,118,.12);
}

body.page-contact .loc-email-suggestion-list[hidden]{
  display:none !important;
}

body.page-contact .loc-email-suggestion-btn{
  border:0;
  border-bottom:1px solid rgba(17,54,118,.1);
  background:#fff;
  color:#113676;
  text-align:left;
  padding:10px 12px;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:14px;
  cursor:pointer;
}

body.page-contact .loc-email-suggestion-btn:last-child{
  border-bottom:0;
}

body.page-contact .loc-email-suggestion-btn:hover,
body.page-contact .loc-email-suggestion-btn:focus-visible{
  background:#edf2ff;
}

body.page-contact .loc-field textarea{
  min-height:120px;
  resize:vertical;
}

body.page-contact .loc-form-note{
  max-width:700px;
  margin:0 0 14px;
  color:#666 !important;
  font-size:13px !important;
  line-height:1.45;
}

body.page-contact .loc-btn-submit{
  display:inline-block;
  padding:16px 36px;
  border:0;
  border-radius:0;
  background:#111;
  color:#fff;
  cursor:pointer;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:background-color .2s ease;
}

body.page-contact .loc-btn-submit:hover{
  background:#000;
}

body.page-contact .loc-contact-page .loc-faq-list{
  margin-top:20px;
  border:1px solid #dcdcdc;
  background:#fff;
}

body.page-contact .loc-contact-page .loc-faq-detail{
  padding:0;
  border-bottom:1px solid #dcdcdc;
}

body.page-contact .loc-contact-page .loc-faq-detail:last-child{
  border-bottom:0;
}

body.page-contact .loc-contact-page .loc-faq-summary{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 18px 24px;
  color:#111;
  cursor:pointer;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback)) !important;
  font-size:16px;
  font-weight:500;
  line-height:1.35;
  list-style:none;
}

body.page-contact .loc-contact-page .loc-faq-summary::-webkit-details-marker{
  display:none;
}

body.page-contact .loc-contact-page .loc-faq-summary::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:22px;
  transform:translateY(-50%);
  background:var(--page-blue);
}

body.page-contact .loc-contact-page .loc-faq-icon{
  width:10px;
  height:10px;
  margin-right:5px;
  flex:0 0 auto;
  border:0;
  border-right:2px solid #a0a0a0;
  border-bottom:2px solid #a0a0a0;
  transform:rotate(45deg);
  transition:transform .3s ease;
}

body.page-contact .loc-contact-page .loc-faq-icon::before,
body.page-contact .loc-contact-page .loc-faq-icon::after{
  display:none;
}

body.page-contact .loc-contact-page .loc-faq-detail[open] .loc-faq-icon{
  margin-top:6px;
  transform:rotate(225deg);
}

body.page-contact .loc-contact-page .loc-faq-content{
  padding:0 20px 24px 24px;
  color:#111;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback)) !important;
  font-size:15px;
  line-height:1.45;
}

body.page-contact .loc-contact-page .loc-faq-content p{
  max-width:none;
  margin:0 0 10px;
}

body.page-contact .loc-contact-page .loc-faq-content p:last-child,
body.page-contact .loc-contact-page .loc-faq-content ul{
  margin-bottom:0;
}

body.page-faq .faq-main .loc-faq-list{
  margin-top:20px;
  border:1px solid #dcdcdc;
  background:#fff;
}

body.page-faq .faq-main .loc-faq-detail{
  padding:0;
  border-bottom:1px solid #dcdcdc;
}

body.page-faq .faq-main .loc-faq-detail:last-child{
  border-bottom:0;
}

body.page-faq .faq-main .loc-faq-summary{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 18px 24px;
  color:#111;
  cursor:pointer;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback)) !important;
  font-size:16px;
  font-weight:500;
  line-height:1.35;
  list-style:none;
}

body.page-faq .faq-main .loc-faq-summary::-webkit-details-marker{
  display:none;
}

body.page-faq .faq-main .loc-faq-summary::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:22px;
  transform:translateY(-50%);
  background:var(--page-blue);
}

body.page-faq .faq-main .loc-faq-icon{
  width:10px;
  height:10px;
  margin-right:5px;
  flex:0 0 auto;
  border:0;
  border-right:2px solid #a0a0a0;
  border-bottom:2px solid #a0a0a0;
  transform:rotate(45deg);
  transition:transform .3s ease;
}

body.page-faq .faq-main .loc-faq-icon::before,
body.page-faq .faq-main .loc-faq-icon::after{
  display:none;
}

body.page-faq .faq-main .loc-faq-detail[open] .loc-faq-icon{
  margin-top:6px;
  transform:rotate(225deg);
}

body.page-faq .faq-main .loc-faq-content{
  padding:0 20px 24px 24px;
  color:#111;
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback)) !important;
  font-size:15px;
  line-height:1.45;
}

body.page-faq .faq-main .loc-faq-content p{
  max-width:none;
  margin:0 0 10px;
}

body.page-faq .faq-main .loc-faq-content p:last-child,
body.page-faq .faq-main .loc-faq-content ul{
  margin-bottom:0;
}

/* =========================================================
   15) TRAVEL GUIDE / JOIN US SIMPLE STATIC PAGES
========================================================= */

body.page-guide.page-standard .guide-main,
body.page-join.page-standard .join-main{
  min-height:calc(100svh - 220px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}

body.page-guide.page-standard .guide-soon,
body.page-join.page-standard .join-us-section{
  width:100%;
  padding:72px 0 90px;
  background:#fff;
  text-align:center;
}

body.page-guide .contact-heading,
body.page-join .join-us-title{
  margin:0 0 12px;
  padding:0;
  border:0;
  color:var(--page-dark);
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:clamp(34px, 5vw, 56px);
  font-weight:700;
  line-height:1.08;
}

body.page-guide .guide-soon-text,
body.page-join .join-us-text{
  margin:10px 0 0;
  color:var(--page-text);
  font-family:var(--font-body, 'Figtree', var(--site-font-fallback));
  font-size:22px;
  font-weight:700;
  line-height:1.45;
}

@media (max-width:860px){
  body.page-about .about-container > .static-section,
  body.page-contact .contact-page-section,
  body.page-guide.page-standard .guide-soon,
  body.page-join.page-standard .join-us-section{
    padding:56px 0 72px;
  }

  body.page-about .about-split-section,
  body.page-about .about-whatwedo,
  body.page-about .about-3col-grid{
    grid-template-columns:1fr;
  }

  body.page-about .about-split-section,
  body.page-about .about-whatwedo{
    gap:20px;
  }

  body.page-about .why-card{
    padding:30px 20px;
  }

  body.page-contact .loc-hours-row,
  body.page-contact .loc-form-grid{
    grid-template-columns:1fr;
  }

  body.page-contact .loc-contact-card{
    margin-bottom:18px;
    padding-bottom:18px;
  }
}

@media (max-width:700px){
  body.page-about .about-container .container,
  body.page-contact .contact-page-section .container{
    width:min(100% - 32px, 1000px);
  }

  body.page-about .about-container > .static-section,
  body.page-contact .contact-page-section{
    padding-top:calc(var(--mobile-nav-h, 58px) + 60px);
  }
}


/* Destinations Category Styles moved from components.category-grid.css */
/* ===============================
   HERO under NAV (image left / text right)
   =============================== */

.page-category{
  --nav-h: var(--nav-height, 80px);
  --content-inset: clamp(16px, 4vw, 60px);
  --category-hero-h: clamp(430px, 62vh, 560px);
}

body.page-category{
  font-family: "Figtree", var(--site-font-fallback);
}

/* Hero starts at top but leaves space for nav */
.page-category .hero--split{
  margin-top: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

body.page-category header nav{
  background: #113676;
}

/* One clean rule (no duplicates) */
.page-category .hero--split-wrap{
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 0;
  align-items: stretch;
  height: var(--category-hero-h);
  min-height: var(--category-hero-h);
  background: transparent;
}

.page-category .hero--split-media{
  overflow: hidden;
  background: #dfe5ec;
  position: relative;
}
.page-category .hero--split-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  transition: opacity .22s ease;
}

.page-category .hero--split-panel{
  background:
    radial-gradient(520px 240px at 50% 50%, rgba(135, 135, 255, 0.18), transparent 60%),
    linear-gradient(90deg, rgba(11, 32, 94, 0.95), rgba(10, 29, 84, 0.95));
  color: #fff;
  padding: 52px 28px 52px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-category .hero--split-kicker{
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.9;
  font-family: var(--font-nav);
}

.page-category .hero--split-panel > h1{
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 3vw, 3.5rem);
  line-height: 1.05;
  font-weight: 900;
  color: #fff;
  font-family: var(--font-nav);
}
.page-category .hero--split-panel > p:not(.hero--split-kicker){
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 52ch;
  opacity: 0.92;
  font-family: var(--font-nav);
}

.page-category #heroTitle,
.page-category #heroSubtitle{
  font-family: var(--font-nav);
}

/* ===============================
   PAGE SECTIONS
   =============================== */

.page-category .cat-grid{
  padding: 18px 0 70px;
}

.page-category .cat-intro #catIntro{
  max-width: 780px;
  margin: 0 0 0.1rem 0;
  padding: 0;
  color: #444;
}

.page-category .cat-intro{
  padding: 2.1rem 0;
}

.page-category .cat-intro .container,
.page-category .cat-grid .container{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.page-category .cat-intro .container{
  padding-left: var(--content-inset);
}

.page-category .cat-grid-title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-nav);
  padding-left: var(--content-inset);
}

/* ===============================
   CITY BLOCKS (stacked down page)
   =============================== */

.page-category .city-block{
  padding: 40px 0;
  border-top: none;
  position: relative;
}

.page-category .city-block::before{
  content: "";
  position: absolute;
  top: 0;
  left: var(--content-inset);
  right: var(--content-inset);
  border-top: 2px solid rgba(0,0,0,0.12);
}

.page-category .city-title{
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 900;
  color: #000000;
  display: flex;
  align-items: center;
  position: relative;
  left: -38px;
  font-family: var(--font-nav);
}

.page-category .city-title-icon{
  display: inline-block;
  flex-shrink: 0;
  margin-top: 4px;
  width: clamp(80px, 9vw, 124px);
  height: clamp(78px, 8.5vw, 120px);
  object-fit: contain;
}

/* ===============================
   GRID (normal)
   =============================== */

.page-category .loc-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* ===============================
   ACCORDION NAV (optional)
   =============================== */

.page-category .city-accordion{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 20px;
}

.page-category .city-accordion .city-toggle{
  display: block;
  padding: 10px 14px;
  background: #f2f6ff;
  border-radius: 6px;
  color: var(--page-blue, #113676);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(17, 54, 118, 0.14);
}

.page-category .city-accordion .city-toggle[aria-expanded="true"]{
  background: var(--page-blue, #113676);
  color: #fff;
}

/* loc-grid panels are expanded by default (no collapse) */
.page-category .city-block .loc-grid{
  max-height: none;
  overflow: visible;
  transition: none;
  position: relative;
}

/* ===============================
   CARD
   =============================== */

.page-category .loc-card{
  background: var(--page-blue, #113676);
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 12px 16px rgba(10,31,68,.14);
  transition: transform .6s ease, box-shadow .6s ease;
}

.page-category .loc-media{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #eee;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.page-category .loc-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  transition: opacity .22s ease;
}

.page-category .loc-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background:linear-gradient(to top, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0) 70%);
  z-index: 1;
}

.page-category .loc-name{
  position:absolute;
  bottom:6px;
  left:12px;
  margin:0;
  font-size:15px;
  font-weight:600;
  color:#fff;
  z-index:2;
  font-family: var(--font-nav);
}

.page-category .loc-body{
  padding: 0;
  margin: 0;
}

.page-category .loc-caption{
  margin: 0;
  padding: 10px 12px;
  color: #f4f8ff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-family: "Figtree", var(--site-font-fallback);
}

@media (max-width: 980px){
  .page-category{
    --category-hero-h: clamp(340px, 54vh, 460px);
  }
}

@media (max-width: 991px){
  .page-category{
    --content-inset: 0px;
    --category-hero-h: clamp(430px, 64svh, 560px);
  }

  .page-category .hero--split-wrap{
    position: relative;
    display: block;
    height: var(--category-hero-h);
    min-height: var(--category-hero-h);
  }

  .page-category .hero--split-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .page-category .hero--split-media::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(2, 10, 22, .10) 0%, rgba(2, 10, 22, .24) 44%, rgba(2, 10, 22, .62) 100%),
      linear-gradient(90deg, rgba(2, 10, 22, .42) 0%, rgba(2, 10, 22, .12) 58%, rgba(2, 10, 22, .28) 100%);
    pointer-events: none;
  }

  .page-category .hero--split-panel{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: clamp(96px, 18svh, 150px) 22px 42px;
    justify-content: flex-end;
    background: transparent;
  }

  .page-category .hero--split-kicker{
    margin-bottom: 12px;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .13em;
  }

  .page-category .hero--split-panel > h1{
    max-width: 10ch;
    margin-bottom: 12px;
    font-size: clamp(38px, 12vw, 58px);
    line-height: .98;
  }

  .page-category .hero--split-panel > p:not(.hero--split-kicker){
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.48;
    opacity: .94;
  }

  .page-category .cat-intro{
    padding: 26px 0 14px;
  }

  .page-category .cat-intro .container,
  .page-category .cat-grid .container,
  .page-category .city-block > .container{
    width: min(100% - 28px, 1200px);
  }

  .page-category .cat-intro .container,
  .page-category .cat-grid-title{
    padding-left: 0;
  }

  .page-category .cat-grid{
    padding: 14px 0 72px;
  }

  .page-category .cat-grid-title{
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.18;
  }

  .page-category .city-block{
    padding: 30px 0;
  }

  .page-category .city-block::before{
    left: 0;
    right: 0;
    border-top-width: 1px;
  }

  .page-category .city-title{
    left: -10px;
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.12;
  }

  .page-category .city-title-icon{
    width: 38px;
    height: 38px;
    margin: 0 6px 0 0;
  }

  .page-category .loc-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .page-category .loc-card{
    box-shadow: none;
  }

  .page-category .loc-media{
    aspect-ratio: 1 / 1.08;
  }

  .page-category .loc-name{
    right: 10px;
    bottom: 8px;
    left: 10px;
    font-size: 12px;
    line-height: 1.15;
  }

  .page-category .loc-caption{
    padding: 9px 10px 10px;
    font-size: 12px;
    line-height: 1.35;
  }
}

@media (max-width: 480px){
  .page-category{
    --category-hero-h: clamp(400px, 62svh, 520px);
  }

  .page-category .hero--split-panel{
    padding: clamp(86px, 16svh, 132px) 18px 34px;
  }

  .page-category .hero--split-panel > h1{
    font-size: clamp(34px, 11vw, 48px);
  }

  .page-category .cat-intro .container,
  .page-category .cat-grid .container,
  .page-category .city-block > .container{
    width: min(100% - 22px, 1200px);
  }

  .page-category .city-title{
    left: -8px;
    font-size: 18px;
  }

  .page-category .city-title-icon{
    width: 32px;
    height: 32px;
    margin-right: 5px;
  }

  .page-category .loc-grid{
    gap: 8px;
  }
}