/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 01 2026 | 18:31:25 */
/* ========================================
   2TIO City Guide Page - Scoped WordPress Styles
   All styles scoped to .city-guide-page to prevent conflicts

   Based on electricity/wordpress-city-styles.css
   Contains only components used by city guide pages:
   hero, article layout, split content icons, accordions, CTA banner
   ======================================== */

/* ========================================
   1. GOOGLE FONTS (Global)
   City guide pages use Lato + Literata
   ======================================== */
   @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Literata:wght@300;400;700&display=swap');

   /* ========================================
      2. CSS VARIABLES (Scoped to .city-guide-page)
      ======================================== */
   .city-guide-page {
      /* Primary Brand Colors */
      --color-primary: #FF7A6D;
      --color-primary-dark: #F26355;
      --color-danger: #D51300;
      --color-teal: #0D90A4;
      --color-teal-100: #E1F8F6;
      --color-teal-200: #B6EAE5;

      /* Neutral Colors */
      --color-white: #FFFFFF;
      --color-black: #000000;
      --color-text-primary: #343A40;
      --color-text-secondary: #686868;
      --color-text-tertiary: #82939A;
      --color-gray-500: #8C7C70;

      /* Background Colors */
      --color-bg-sidebar: #F4F1EE;
      --color-bg-light: #E6DED8;
      --color-bg-card: #F4F1EE;
      --color-bg-info: #DBEEF1;

      /* Border Colors */
      --color-border: #D6CEC7;
      --color-border-medium: #C3A58F;
      --color-border-light: #E8E4E0;
      --color-border-teal: #0D90A4;

      /* Font Families */
      --font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      --font-sans: 'Lato', sans-serif;
      --font-serif: 'Literata', serif;

      /* Base styles for city guide page */
      font-family: var(--font-sans);
      line-height: 1.6;
      color: var(--color-text-primary);

      overflow-x: hidden;
   }

   /* ========================================
      3. TYPOGRAPHY (Scoped)
      ======================================== */

   /* Headings */
   .city-guide-page h1, .city-guide-page .h1 {
       font-family: 'Lato', sans-serif;
       font-size: 52px;
       line-height: 1.1;
       font-weight: 400;
       margin: 0;
   }
   @media screen and (max-width: 767px) {
       .city-guide-page h1, .city-guide-page .h1 {
           font-size: 40px;
       }
   }

   .city-guide-page h2, .city-guide-page .h2 {
       font-family: 'Lato', sans-serif;
       font-size: 54px;
       line-height: 1.1;
       font-weight: 400;
       letter-spacing: 0;
       color: #02101E;
       margin: 0;
   }
   @media screen and (max-width: 1024px) {
       .city-guide-page h2, .city-guide-page .h2 {
           font-size: 40px;
       }
   }

   .city-guide-page h3, .city-guide-page .h3 {
       font-family: 'Lato', sans-serif;
       font-size: 36px;
       line-height: 1.1;
       font-weight: 400;
       letter-spacing: 0;
       margin: 0;
   }
   @media screen and (max-width: 767px) {
       .city-guide-page h3, .city-guide-page .h3 {
           font-size: 24px;
       }
   }

   .city-guide-page h4, .city-guide-page .h4 {
       font-family: 'Lato', sans-serif;
       font-size: 24px;
       line-height: 1.1;
       font-weight: 600;
       letter-spacing: 0;
       margin: 0;
   }

   .city-guide-page h5, .city-guide-page .h5 {
       font-family: 'Lato', sans-serif;
       font-size: 18px;
       font-weight: 900;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       line-height: 1.4;
       margin: 0;
   }
   @media screen and (max-width: 767px) {
       .city-guide-page h5, .city-guide-page .h5 {
           font-size: 14px;
       }
   }

   .city-guide-page h6, .city-guide-page .h6 {
       font-family: 'Lato', sans-serif;
       font-size: 16px;
       line-height: 1.4;
       font-weight: 700;
       margin: 0;
   }

   /* Body Text */
   .city-guide-page p {
       font-family: 'Literata', serif;
       font-weight: 400;
       font-size: 18px;
       line-height: 1.9;
       letter-spacing: 0;
       margin: 0;
       color: #646464;
   }
   @media screen and (max-width: 767px) {
       .city-guide-page p {
           font-size: 16px;
           line-height: 1.6;
       }
   }

   /* Text Sizes */
   .city-guide-page .text--display-large {
       font-size: 61px;
       line-height: 1.1;
       font-weight: 400;
   }

   .city-guide-page .text--large {
       font-size: 18px;
       line-height: 1.4;
   }

   .city-guide-page .text--20 { font-size: 20px; }
   .city-guide-page .text--22 { font-size: 22px; }
   .city-guide-page .text--24 { font-size: 24px; }
   .city-guide-page .text--32 { font-size: 32px; }
   .city-guide-page .text--40 { font-size: 40px; }
   .city-guide-page .text--48 { font-size: 48px; }
   .city-guide-page .text--54 { font-size: 54px; }
   .city-guide-page .text--60 { font-size: 60px; }

   .city-guide-page .text--small {
       font-size: 14px;
       line-height: 1.4;
   }

   .city-guide-page .text--tiny {
       font-size: 12px;
       line-height: 1.4;
   }

   /* Text Alignment */
   .city-guide-page .text--center { text-align: center; }
   .city-guide-page .text--right { text-align: right; }
   .city-guide-page .text--left { text-align: left; }

   /* Font Weights */
   .city-guide-page .font--light { font-weight: 300 !important; }
   .city-guide-page .font--normal { font-weight: 400 !important; }
   .city-guide-page .font--medium { font-weight: 500 !important; }
   .city-guide-page .font--semibold { font-weight: 600 !important; }
   .city-guide-page .font--bold { font-weight: 700 !important; }
   .city-guide-page .font--extrabold { font-weight: 800 !important; }
   .city-guide-page .font--heavy { font-weight: 900 !important; }

   /* Font Families */
   .city-guide-page .font--sans { font-family: var(--font-sans) !important; }
   .city-guide-page .font--serif { font-family: var(--font-serif) !important; }

   /* Text Colors */
   .city-guide-page .text-color--primary { color: var(--color-text-primary); }
   .city-guide-page .text-color--secondary { color: var(--color-text-secondary); }
   .city-guide-page .text-color--white { color: var(--color-white); }
   .city-guide-page .text-color--muted { color: #82939A; }
   .city-guide-page .text-color--danger { color: var(--color-danger); }
   .city-guide-page .text-color--teal { color: #0D90A4; }
   .city-guide-page .text-color--teal-light { color: #17A2B8; }
   .city-guide-page .text-color--teal-med { color: #2D9DAD; }
   .city-guide-page .text-color--card { color: #272727; }
   .city-guide-page .text-color--dark { color: #1B1B1B; }
   .city-guide-page .text-color--gray-dark { color: #1B1B1B; }
   .city-guide-page .text-color--gray-med { color: #505050; }
   .city-guide-page .text-color--gray-light { color: #6D6D6D; }
   .city-guide-page .text-color--green { color: #16a34a; }
   .city-guide-page .text-color--red { color: #dc2626; }

   /* Line Heights */
   .city-guide-page .lh--tight { line-height: 1.1 !important; }
   .city-guide-page .lh--normal { line-height: 1.4 !important; }
   .city-guide-page .lh--relaxed { line-height: 1.6 !important; }
   .city-guide-page .lh--tall { line-height: 1.9 !important; }

   /* Text Transform */
   .city-guide-page .text--uppercase { text-transform: uppercase; }

   /* Combined Label Style */
   .city-guide-page .text--label {
       font-size: 14px;
       font-weight: 700;
       line-height: 17px;
       text-transform: uppercase;
       color: var(--color-text-secondary);
   }

   /* Eyebrow Style */
   .city-guide-page .text--eyebrow {
       font-size: 18px;
       font-weight: 900;
       letter-spacing: 0.2em;
       text-transform: uppercase;
   }

   /* Description/Subtitle Style */
   .city-guide-page .text--description {
       font-family: 'Literata', serif;
       font-weight: 400;
       font-size: 18px;
       line-height: 1.9;
       letter-spacing: 0;
   }

   /* ========================================
      4. LAYOUT (Scoped)
      ======================================== */

   /* Container */
   .city-guide-page .container {
       flex: 1;
       max-width: 1440px;
       margin: 0 auto;
       padding: 0 80px;
       width: 100%;
   }

   /* Container width variations */
   .city-guide-page .container--narrow { max-width: 440px; }
   .city-guide-page .container--medium { max-width: 680px; }
   .city-guide-page .container--wide { max-width: 866px; }
   .city-guide-page .container--large { max-width: 1200px; }

   /* Generic content section */
   .city-guide-page .content {
       padding: 40px 0;
   }

   @media screen and (max-width: 1024px) {
       .city-guide-page .container {
           padding: 0 40px;
       }
   }

   @media screen and (max-width: 767px) {
       .city-guide-page .container {
           padding: 0 24px;
       }

       .city-guide-page .container--narrow,
       .city-guide-page .container--medium,
       .city-guide-page .container--wide {
           max-width: 100%;
       }
   }

   /* ========================================
      5. UTILITY CLASSES (Scoped)
      ======================================== */

   /* Width */
   .city-guide-page .w-100 { width: 100% !important; overflow-x: hidden; }
   .city-guide-page .w-auto { width: auto !important; overflow-x: hidden; }

   /* Display */
   .city-guide-page .d-none { display: none !important; }
   .city-guide-page .d--block { display: block !important; }
   .city-guide-page .d--inline-block { display: inline-block !important; }
   .city-guide-page .d--flex { display: flex !important; }
   .city-guide-page .d--inline-flex { display: inline-flex !important; }

   /* Flexbox */
   .city-guide-page .flex--row { flex-direction: row !important; }
   .city-guide-page .flex--column { flex-direction: column !important; }
   .city-guide-page .justify--center { justify-content: center !important; }
   .city-guide-page .justify--between { justify-content: space-between !important; }
   .city-guide-page .justify--end { justify-content: flex-end !important; }
   .city-guide-page .align--center { align-items: center !important; }
   .city-guide-page .align--start { align-items: flex-start !important; }
   .city-guide-page .align--end { align-items: flex-end !important; }

   /* Gap Utilities */
   .city-guide-page .gap-4 { gap: 4px !important; }
   .city-guide-page .gap-8 { gap: 8px !important; }
   .city-guide-page .gap-12 { gap: 12px !important; }
   .city-guide-page .gap-16 { gap: 16px !important; }
   .city-guide-page .gap-20 { gap: 20px !important; }
   .city-guide-page .gap-24 { gap: 24px !important; }
   .city-guide-page .gap-32 { gap: 32px !important; }
   .city-guide-page .gap-40 { gap: 40px !important; }
   .city-guide-page .gap-48 { gap: 48px !important; }
   .city-guide-page .gap-60 { gap: 60px !important; }

   /* Responsive Gap Utilities - Medium */
   @media screen and (min-width: 768px) {
       .city-guide-page .gap-md-4 { gap: 4px !important; }
       .city-guide-page .gap-md-8 { gap: 8px !important; }
       .city-guide-page .gap-md-12 { gap: 12px !important; }
       .city-guide-page .gap-md-16 { gap: 16px !important; }
       .city-guide-page .gap-md-20 { gap: 20px !important; }
       .city-guide-page .gap-md-24 { gap: 24px !important; }
       .city-guide-page .gap-md-32 { gap: 32px !important; }
       .city-guide-page .gap-md-40 { gap: 40px !important; }
       .city-guide-page .gap-md-48 { gap: 48px !important; }
       .city-guide-page .gap-md-60 { gap: 60px !important; }
   }

   /* Responsive Gap Utilities - Large */
   @media screen and (min-width: 1025px) {
       .city-guide-page .gap-lg-4 { gap: 4px !important; }
       .city-guide-page .gap-lg-8 { gap: 8px !important; }
       .city-guide-page .gap-lg-12 { gap: 12px !important; }
       .city-guide-page .gap-lg-16 { gap: 16px !important; }
       .city-guide-page .gap-lg-20 { gap: 20px !important; }
       .city-guide-page .gap-lg-24 { gap: 24px !important; }
       .city-guide-page .gap-lg-32 { gap: 32px !important; }
       .city-guide-page .gap-lg-40 { gap: 40px !important; }
       .city-guide-page .gap-lg-48 { gap: 48px !important; }
       .city-guide-page .gap-lg-60 { gap: 60px !important; }
   }

   /* Background */
   .city-guide-page .bg--beige-light { background-color: var(--color-bg-card) !important; }
   .city-guide-page .bg--beige { background-color: var(--color-bg-light) !important; }
   .city-guide-page .bg--white { background-color: var(--color-white) !important; }
   .city-guide-page .bg--black { background-color: var(--color-black) !important; }
   .city-guide-page .bg--primary { background-color: var(--color-primary) !important; }
   .city-guide-page .bg--primary-dark { background-color: var(--color-primary-dark) !important; }
   .city-guide-page .bg--teal { background-color: #17A2B8 !important; }
   .city-guide-page .bg--teal-100 { background-color: var(--color-teal-100) !important; }
   .city-guide-page .bg--teal-200 { background-color: var(--color-teal-200) !important; }
   .city-guide-page .bg--light-teal { background-color: #E1F8F6 !important; }

   /* Border Utilities */
   .city-guide-page .border { border: 1px solid var(--color-border-medium); }
   .city-guide-page .border--rounded { border-radius: 8px; }
   .city-guide-page .border--heavy { border-width: 4px; border-style: solid; }
   .city-guide-page .border--primary { border-color: var(--color-primary); }
   .city-guide-page .border--teal { border-color: var(--color-border-teal); }
   .city-guide-page .border--light { border-color: var(--color-border-light); }

   /* Border Radius */
   .city-guide-page .rounded--sm { border-radius: 4px !important; }
   .city-guide-page .rounded { border-radius: 8px !important; }
   .city-guide-page .rounded--lg { border-radius: 16px !important; }
   .city-guide-page .rounded--xl { border-radius: 24px !important; }
   .city-guide-page .rounded--full { border-radius: 9999px !important; }

   /* Max Width */
   .city-guide-page .max-w-200 { max-width: 200px !important; }
   .city-guide-page .max-w-xs { max-width: 430px !important; }
   .city-guide-page .max-w-sm { max-width: 540px !important; }
   .city-guide-page .max-w-600 { max-width: 600px !important; }
   .city-guide-page .max-w-md { max-width: 800px !important; }

   /* Aspect Ratio */
   .city-guide-page .aspect-square { aspect-ratio: 1 !important; }

   /* Flex Combinations */
   .city-guide-page .flex-center {
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
   }

   /* Filters */
   .city-guide-page .filter-white { filter: brightness(0) invert(1) !important; }

   /* Text Utilities */
   .city-guide-page .no-wrap { white-space: nowrap !important; }

   @media screen and (min-width: 768px) {
       .city-guide-page .no-wrap-md { white-space: nowrap !important; }
   }

   /* Responsive Display */
   @media screen and (max-width: 767px) {
       .city-guide-page .mobile-hide { display: none !important; }
   }
   @media screen and (min-width: 768px) {
       .city-guide-page .desktop-hide { display: none !important; }
   }

   /* Spacing Utilities */
   .city-guide-page .mb-1 { margin-bottom: 4px !important; }
   .city-guide-page .mb-2 { margin-bottom: 8px !important; }
   .city-guide-page .mb-3 { margin-bottom: 12px !important; }
   .city-guide-page .mb-4 { margin-bottom: 16px !important; }
   .city-guide-page .mb-5 { margin-bottom: 24px !important; }
   .city-guide-page .mb-6 { margin-bottom: 32px !important; }
   .city-guide-page .mb-7 { margin-bottom: 48px !important; }
   .city-guide-page .mb-8 { margin-bottom: 64px !important; }

   .city-guide-page .mt-1 { margin-top: 4px !important; }
   .city-guide-page .mt-2 { margin-top: 8px !important; }
   .city-guide-page .mt-3 { margin-top: 12px !important; }
   .city-guide-page .mt-4 { margin-top: 16px !important; }
   .city-guide-page .mt-5 { margin-top: 24px !important; }
   .city-guide-page .mt-6 { margin-top: 32px !important; }
   .city-guide-page .mt-7 { margin-top: 48px !important; }
   .city-guide-page .mt-8 { margin-top: 64px !important; }

   .city-guide-page .mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
   .city-guide-page .mx-auto { margin-left: auto !important; margin-right: auto !important; }
   .city-guide-page .ms-2 { margin-left: 8px !important; }
   .city-guide-page .me-2 { margin-right: 8px !important; }

   .city-guide-page .py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
   .city-guide-page .py-5 { padding-top: 24px !important; padding-bottom: 24px !important; }
   .city-guide-page .py-6 { padding-top: 32px !important; padding-bottom: 32px !important; }
   .city-guide-page .py-7 { padding-top: 48px !important; padding-bottom: 48px !important; }
   .city-guide-page .py-8 { padding-top: 64px !important; padding-bottom: 64px !important; }
   .city-guide-page .py-10 { padding-top: 80px !important; padding-bottom: 80px !important; }

   .city-guide-page .px-3 { padding-left: 12px !important; padding-right: 12px !important; }
   .city-guide-page .px-6 { padding-left: 32px !important; padding-right: 32px !important; }

   .city-guide-page .p-4 { padding: 16px !important; }
   .city-guide-page .p-5 { padding: 24px !important; }
   .city-guide-page .p-6 { padding: 32px !important; }

   .city-guide-page .pt-3 { padding-top: 12px !important; }
   .city-guide-page .pt-5 { padding-top: 24px !important; }
   .city-guide-page .pt-6 { padding-top: 32px !important; }
   .city-guide-page .pt-7 { padding-top: 48px !important; }
   .city-guide-page .pt-8 { padding-top: 64px !important; }
   .city-guide-page .pt-10 { padding-top: 80px !important; }
   .city-guide-page .pb-0 { padding-bottom: 0 !important; }
   .city-guide-page .pb-3 { padding-bottom: 12px !important; }
   .city-guide-page .pb-7 { padding-bottom: 48px !important; }
   .city-guide-page .pb-8 { padding-bottom: 64px !important; }
   .city-guide-page .pb-10 { padding-bottom: 80px !important; }

   .city-guide-page .pe-0 { padding-right: 0 !important; }
   .city-guide-page .pe-4 { padding-right: 16px !important; }
   .city-guide-page .ps-0 { padding-left: 0 !important; }

   @media screen and (min-width: 768px) {
       .city-guide-page .py-md-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
       .city-guide-page .py-md-7 { padding-top: 48px !important; padding-bottom: 48px !important; }
       .city-guide-page .px-md-6 { padding-left: 32px !important; padding-right: 32px !important; }
       .city-guide-page .p-md-5 { padding: 24px !important; }
       .city-guide-page .p-md-6 { padding: 32px !important; }
       .city-guide-page .pe-md-0 { padding-right: 0 !important; }
       .city-guide-page .pb-md-7 { padding-bottom: 48px !important; }
       .city-guide-page .mb-md-6 { margin-bottom: 32px !important; }
       .city-guide-page .mb-md-7 { margin-bottom: 48px !important; }
   }

   @media screen and (min-width: 1025px) {
       .city-guide-page .py-lg-7 { padding-top: 48px !important; padding-bottom: 48px !important; }
       .city-guide-page .py-lg-10 { padding-top: 80px !important; padding-bottom: 80px !important; }
       .city-guide-page .pt-lg-7 { padding-top: 48px !important; }
       .city-guide-page .pt-lg-10 { padding-top: 80px !important; }
       .city-guide-page .pb-lg-10 { padding-bottom: 80px !important; }
       .city-guide-page .mb-lg-7 { margin-bottom: 48px !important; }
   }

   /* ========================================
      6. BUTTONS (Scoped)
      ======================================== */

   .city-guide-page button, .city-guide-page .btn {
       display: inline-block;
       width: fit-content;
       font-family: var(--font-primary);
       font-size: 18px;
       font-weight: 700;
       line-height: 22px;
       text-align: center;
       text-decoration: none;
       white-space: nowrap;
       padding: 16px 44px;
       border: none;
       border-radius: 37px;
       background: var(--color-primary-dark);
       color: var(--color-white);
       cursor: pointer;
       transition: background-color 0.3s ease, transform 0.2s ease;
   }

   .city-guide-page button:hover, .city-guide-page .btn:hover {
       background: var(--color-primary);
       transform: translateY(-1px);
   }

   .city-guide-page button:active, .city-guide-page .btn:active {
       transform: translateY(0);
   }

   .city-guide-page button:disabled, .city-guide-page .btn:disabled {
       background: #ccc;
       color: #666;
       cursor: not-allowed;
       transform: none;
   }

   /* Primary Button (explicit) */
   .city-guide-page .btn--primary {
       background: var(--color-primary-dark);
       color: var(--color-white);
   }

   .city-guide-page .btn--primary:hover {
       background: var(--color-primary);
   }

   /* Secondary Button */
   .city-guide-page .btn--secondary {
       background: transparent;
       color: #333333;
       border: 2px solid #333333;
   }

   .city-guide-page .btn--secondary:hover {
       background: #333333;
       color: var(--color-white);
   }

   /* Button Sizes */
   .city-guide-page .btn--large {
       padding: 20px 60px;
       font-size: 20px;
   }

   .city-guide-page .btn--small {
       padding: 12px 32px;
       font-size: 16px;
   }

   /* Button Width */
   .city-guide-page .btn--full-width {
       width: 100%;
   }

   @media screen and (max-width: 767px) {
       .city-guide-page .btn,
       .city-guide-page .btn--secondary {
           padding: 16px 20px;
           font-size: 18px;
           line-height: 22px;
           white-space: normal;
           word-wrap: break-word;
       }
   }

   /* ========================================
      7. HERO CITY COMPONENT (Scoped)
      ======================================== */

   .city-guide-page .hero-city {
       background: linear-gradient(to bottom, transparent calc(100% - 44px), white calc(100% - 44px));
       padding-top: 85px;
   }

   .city-guide-page .hero-city__grid {
       display: grid;
       grid-template-columns: 40% 1fr;
       align-items: center;
       gap: 60px;
   }

   .city-guide-page .hero-city__content {
       min-width: 375px;
       margin-bottom: 44px;
   }

   /* Image */
   .city-guide-page .hero-city__media {
       position: relative;
       height: 100%;
   }

   .city-guide-page .hero-city__image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 24px 0 0 24px;
       margin-bottom: -80px;
       position: relative;
       z-index: 1;
   }

   /* Responsive */
   @media screen and (min-width: 1440px) {
       .city-guide-page .hero-city__image {
           border-radius: 24px;
       }
   }

   @media screen and (max-width: 1024px) {
       .city-guide-page .hero-city__grid {
           grid-template-columns: 50% 1fr;
       }
   }

   @media screen and (max-width: 767px) {
       .city-guide-page .hero-city {
           background: #F4F1EE;
           padding-bottom: 40px;
           padding-top: 60px;
       }

       .city-guide-page .hero-city__grid {
           grid-template-columns: 1fr;
           gap: 0;
       }

       .city-guide-page .hero-city__content {
           min-width: 0;
           max-width: none;
           margin-bottom: 0;
       }

       /* Hide hero image on mobile */
       .city-guide-page .hero-city__media {
           display: none;
       }
   }

   /* ========================================
      8. ARTICLE LAYOUT COMPONENT (Scoped)
      ======================================== */

   .city-guide-page .article-layout__grid {
       display: flex;
       justify-content: space-between;
       gap: 80px;
   }

   /* Table of Contents */
   .city-guide-page .article-toc {
       flex: 1 1 33%;
       border-radius: 24px;
       overflow: hidden;
   }

   .city-guide-page .article-content {
       flex: 1 1 67%;
   }

   .city-guide-page .article-toc__header {
       background: #17A2B8;
       color: white;
       padding: 28px 48px;
       font-family: 'Lato', sans-serif;
       font-weight: 900;
       font-size: 18px;
       line-height: 1.1;
       letter-spacing: 0.2em;
       border-radius: 24px 24px 0 0;
   }

   .city-guide-page .article-toc__nav {
       background: #EAF5F7;
       padding: 0;
       display: flex;
       flex-direction: column;
       border-radius: 0 0 24px 24px;
   }

   .city-guide-page .article-toc__link {
       padding: 20px 48px;
       font-size: 18px;
       line-height: 1;
       text-decoration: none;
       color: var(--color-text-primary);
       position: relative;
   }

   .city-guide-page .article-toc__link::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 48px;
       right: 48px;
       height: 1px;
       background: #9FC0DE;
   }

   .city-guide-page .article-toc__link:first-child {
       padding-top: 28px;
   }

   .city-guide-page .article-toc__link:last-child {
       padding-bottom: 28px;
   }

   .city-guide-page .article-toc__link:last-child::after {
       display: none;
   }

   .city-guide-page .article-toc__link:hover {
       background: #F5FAFB;
   }

   /* Article Header */
   .city-guide-page .article-header {
       margin-bottom: 40px;
   }

   .city-guide-page .article-header__meta {
       margin-bottom: 44px;
   }

   .city-guide-page .article-header__meta-item {
       display: flex;
       align-items: center;
   }

   .city-guide-page .article-header__avatar {
       width: 55px;
       height: 55px;
       border-radius: 50%;
   }

   .city-guide-page .article-header__disclaimer {
       background: #F4F1EE;
       padding: 18px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       margin-bottom: 48px;
   }

   .city-guide-page .article-header__disclaimer a {
       text-underline-offset: 3px;
   }

   .city-guide-page .article-header__disclaimer-logo {
       width: 40px;
       height: auto;
   }

   .city-guide-page .article-header__disclaimer-text {
       font-size: 12px;
       color: var(--color-text-secondary);
       margin-left: 10px;
   }

   @media screen and (max-width: 1200px) and (min-width: 1024px) {
       .city-guide-page .article-layout__grid {
           gap: 48px;
       }

       .city-guide-page .article-toc {
           flex: 1 1 40%;
       }

       .city-guide-page .article-content {
           flex: 1 1 60%;
       }

       .city-guide-page .article-toc__link {
           padding-left: 32px;
           padding-right: 32px;
       }

       .city-guide-page .article-toc__link::after {
           left: 32px;
           right: 32px;
       }

       .city-guide-page .article-toc__header {
           padding-left: 32px;
           padding-right: 32px;
       }
   }

   @media screen and (max-width: 1024px) {
       .city-guide-page .article-layout__grid {
           flex-direction: column-reverse;
           gap: 40px;
       }

       .city-guide-page .article-toc {
           position: static;
           max-width: 100%;
       }

       .city-guide-page .article-content {
           max-width: 100%;
       }
   }

   @media screen and (max-width: 767px) {
       .city-guide-page .article-toc {
           border-radius: 19px;
       }

       .city-guide-page .article-toc__header {
           padding: 21px 32px 24px;
           font-size: 14px;
           border-radius: 19px 19px 0 0;
       }

       .city-guide-page .article-toc__link {
           padding: 16px 32px;
       }

       .city-guide-page .article-toc__link::after {
           left: 20px;
           right: 20px;
       }

       .city-guide-page .article-header__meta {
           flex-direction: column;
           align-items: flex-start !important;
       }
   }

   /* ========================================
      9. SPLIT CONTENT ICONS COMPONENT (Scoped)
      ======================================== */

   .city-guide-page .split-content-icons {
       padding: 60px 0;
   }

   .city-guide-page .split-content-icons__grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 100px;
       align-items: start;
   }

   .city-guide-page .split-content-icons__cards {
       display: flex;
       flex-direction: column;
       gap: 24px;
   }

   .city-guide-page .icon-info-card {
       background: white;
       border-radius: 12px;
       padding: 24px;
       display: flex;
       gap: 20px;
   }

   .city-guide-page .icon-info-card__icon {
       width: 110px;
       height: 110px;
       background: #F26355;
       border-radius: 12px;
       flex-shrink: 0;
   }

   .city-guide-page .icon-info-card__icon img {
       width: 80px;
       height: 80px;
       filter: brightness(0) invert(1);
   }

   .city-guide-page .icon-info-card__title {
       font-family: 'Lato', sans-serif;
       font-size: 24px;
       font-weight: 600;
   }

   .city-guide-page .icon-info-card__description {
       font-family: 'Literata', serif;
       font-size: 16px;
       line-height: 1.7;
       color: #646464;
   }

   @media screen and (max-width: 1024px) {
       .city-guide-page .split-content-icons__grid {
           grid-template-columns: 1fr;
           gap: 40px;
       }
   }

   @media screen and (max-width: 767px) {
       .city-guide-page .icon-info-card {
           flex-direction: column;
           padding: 32px 32px 40px;
           gap: 32px;
       }
   }

   /* ========================================
      10. ACCORDION GROUP COMPONENT (Scoped)
      ======================================== */

   .city-guide-page .accordion-group__item--bordered {
       border-top: 1px solid #C6C6C6;
   }

   .city-guide-page .accordion-group__trigger {
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       padding: 0;
       background: transparent;
       border: none;
       cursor: pointer;
       text-align: left;
       box-shadow: none;
       outline: none !important;
   }

   .city-guide-page .accordion-group__trigger:hover,
   .city-guide-page .accordion-group__trigger:focus,
   .city-guide-page .accordion-group__trigger:active {
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
       outline: none !important;
   }

   .city-guide-page .accordion-group__trigger h4 {
       flex: 1;
       min-width: 0;
   }

   .city-guide-page .accordion-group__icon {
       flex-shrink: 0;
       margin-top: auto;
       margin-bottom: auto;
       color: var(--color-primary);
   }

   .city-guide-page .accordion-group__trigger[aria-expanded="true"] .accordion-group__icon {
       transform: rotate(180deg);
   }

   /* Accordion Content - collapsed by default, animated by JS */
   .city-guide-page .accordion__content {
       height: 0;
       overflow: hidden;
       transition: height 0.3s ease;
   }

   /* FAQ Variant */
   .city-guide-page .accordion--faq .accordion__inner p {
       margin-bottom: 16px;
   }

   .city-guide-page .accordion--faq .accordion__inner p:last-child {
       margin-bottom: 0;
   }

   /* Minimal Variant */
   .city-guide-page .accordion-group--minimal {
       background: transparent !important;
       padding-left: 0 !important;
       padding-right: 0 !important;
   }

   .city-guide-page .accordion-group--minimal .accordion-group__item--bordered:last-child {
       border-bottom: 1px solid #C6C6C6;
   }

   .city-guide-page .accordion-group--minimal .accordion-group__trigger {
       color: #1B1B1B;
   }

   .city-guide-page .accordion-group--minimal .accordion--faq .accordion__inner {
       color: #505050;
   }

   @media screen and (max-width: 767px) {
       .city-guide-page .accordion-group__trigger h4 {
           font-size: 16px;
           line-height: 1.3;
       }
   }

   /* ========================================
      11. CTA BANNER COMPONENT (Scoped)
      ======================================== */

   .city-guide-page .cta-banner {
       padding-bottom: 110px;
   }

   .city-guide-page .cta-banner__content {
       padding: 94px 32px 80px;
   }

   @media screen and (min-width: 1024px) {
       .city-guide-page .cta-banner__title,
       .city-guide-page .cta-banner__subtitle {
           font-size: 60px;
       }
   }

   @media screen and (max-width: 767px) {
       .city-guide-page .cta-banner {
           padding: 0;
       }

       .city-guide-page .cta-banner .container {
           padding: 0;
       }

       .city-guide-page .cta-banner__content {
           padding-top: 180px;
           padding-bottom: 180px;
           border-radius: 0 !important;
       }
   }

   /* ========================================
      12. ANIMATIONS
      ======================================== */

   @keyframes slideUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes slideDown {
       from {
           opacity: 0;
           transform: translateY(-20px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .city-guide-page .animate-fade-in {
       animation: fadeIn 0.3s ease-out;
   }

   .city-guide-page .animate-slide-up {
       animation: slideUp 0.3s ease-out;
   }

   .city-guide-page .animate-slide-down {
       animation: slideDown 0.3s ease-out;
   }