/*
Theme Name: PLUM Theme v11
Theme URI: https://plum-corp.jp/
Author: PLUM Inc.
Author URI: https://plum-corp.jp/
Description: Corporate website theme for PLUM Inc.
Version: 11.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plum-theme
*/
/* Force remove all top whitespace */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
  position: static !important;
  top: 0 !important;
  left: 0 !important;
  inset: auto !important;
}

/* Site wrapper */
.site-wrapper {
  margin: 0;
  padding: 0;
}

/* WordPress Admin Bar Fix */
html.wp-toolbar {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#wpadminbar {
  position: fixed !important;
  top: 0 !important;
}

body.admin-bar .header {
  top: 32px !important;
}

body.admin-bar .loading-screen {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
  height: calc(100dvh - 32px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .header {
    top: 46px !important;
  }
  body.admin-bar .loading-screen {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
    height: calc(100dvh - 46px) !important;
  }
}

:root {
      --scale: calc(100vw / 1728);
    }

    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: auto;
      margin: 0;
      padding: 0;
      scroll-padding-top: calc(99 * var(--scale));
    }

    body {
      font-family: 'Shippori Mincho', serif;
      color: #343434;
      line-height: 1.6;
      overflow-x: hidden;
      background: white;
      margin: 0;
      padding: 0;
    }

    img { max-width: none; display: block; }
    a { text-decoration: none; color: inherit; }

    /* Custom Cursor - Hide default cursor */
    * {
      cursor: none !important;
    }

    .custom-cursor {
      position: fixed;
      width: 20px;
      height: 20px;
      border: 2px solid #689A92;
      border-radius: 50%;
      pointer-events: none;
      z-index: 99999;
      transform: translate(-50%, -50%);
      transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    }

    .custom-cursor.hover {
      width: 40px;
      height: 40px;
      border-color: #689A92;
      background-color: rgba(104, 154, 146, 0.1);
    }

    .custom-cursor-dot {
      position: fixed;
      width: 6px;
      height: 6px;
      background: #689A92;
      border-radius: 50%;
      pointer-events: none;
      z-index: 99999;
      transform: translate(-50%, -50%);
    }

    .viewport-scaler {
      width: 100vw;
      min-height: 100vh;
      overflow: visible;
      margin: 0 !important;
      padding: 0 !important;
      position: relative;
    }

    .page-container {
      width: 100vw;
      min-height: 100vh;
      position: relative;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent;
    }

    /* Front page only - fixed height for absolute positioned elements */
    body.plum-front-page .page-container {
      height: calc(6577 * var(--scale));
      min-height: auto;
    }

    /* Content area for non-front pages */
    .content-area {
      padding: calc(120 * var(--scale)) calc(50 * var(--scale)) calc(50 * var(--scale));
      max-width: 1200px;
      margin: 0 auto;
      min-height: calc(100vh - 200px);
    }

    .page-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      opacity: 0.15;
      z-index: 1;
    }

    /* Dynamic Animated Background */
    .animated-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
    }

    /* Vector shapes background */
    .vector-shape {
      position: fixed;
      pointer-events: none;
      z-index: 5;
    }

    .vector-circle-1 {
      width: calc(600 * var(--scale));
      height: calc(600 * var(--scale));
      border: calc(2 * var(--scale)) solid rgba(104, 154, 146, 0.5);
      border-radius: 50%;
      top: -10%;
      left: -5%;
      animation: vectorFloat1 25s ease-in-out infinite, vectorRotate 60s linear infinite;
    }

    .vector-circle-2 {
      width: calc(400 * var(--scale));
      height: calc(400 * var(--scale));
      border: calc(1.5 * var(--scale)) solid rgba(176, 160, 161, 0.6);
      border-radius: 50%;
      top: 20%;
      right: -8%;
      animation: vectorFloat2 20s ease-in-out infinite, vectorRotate 45s linear infinite reverse;
    }

    .vector-circle-3 {
      width: calc(300 * var(--scale));
      height: calc(300 * var(--scale));
      border: calc(2 * var(--scale)) solid rgba(104, 154, 146, 0.4);
      border-radius: 50%;
      bottom: 15%;
      left: 10%;
      animation: vectorFloat3 22s ease-in-out infinite, vectorRotate 50s linear infinite;
    }

    .vector-triangle {
      width: 0;
      height: 0;
      border-left: calc(150 * var(--scale)) solid transparent;
      border-right: calc(150 * var(--scale)) solid transparent;
      border-bottom: calc(260 * var(--scale)) solid rgba(104, 154, 146, 0.15);
      top: 40%;
      right: 15%;
      animation: vectorFloat4 28s ease-in-out infinite, vectorRotateSlow 80s linear infinite;
    }

    .vector-square {
      width: calc(200 * var(--scale));
      height: calc(200 * var(--scale));
      border: calc(2 * var(--scale)) solid rgba(176, 160, 161, 0.35);
      bottom: 25%;
      right: 20%;
      animation: vectorFloat5 24s ease-in-out infinite, vectorRotateSlow 70s linear infinite reverse;
    }

    .vector-line-1 {
      width: calc(400 * var(--scale));
      height: calc(2 * var(--scale));
      background: linear-gradient(90deg, transparent, rgba(104, 154, 146, 0.5), transparent);
      left: -5%;
      animation: vectorSlide1 15s ease-in-out infinite;
      transform-origin: left center;
    }

    .vector-line-2 {
      width: calc(2 * var(--scale));
      height: calc(500 * var(--scale));
      background: linear-gradient(180deg, transparent, rgba(176, 160, 161, 0.4), transparent);
      top: 10%;
      right: 25%;
      animation: vectorSlide2 18s ease-in-out infinite;
    }

    .vector-dot-cluster {
      position: fixed;
      width: calc(300 * var(--scale));
      height: calc(300 * var(--scale));
      top: 60%;
      left: 5%;
      z-index: 5;
      pointer-events: none;
      animation: vectorFloat6 20s ease-in-out infinite;
    }

    .vector-dot {
      position: absolute;
      width: calc(10 * var(--scale));
      height: calc(10 * var(--scale));
      background: rgba(104, 154, 146, 0.6);
      border-radius: 50%;
      animation: dotPulse 3s ease-in-out infinite;
    }

    .vector-dot:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
    .vector-dot:nth-child(2) { top: 30%; left: 60%; animation-delay: 0.5s; }
    .vector-dot:nth-child(3) { top: 50%; left: 30%; animation-delay: 1s; }
    .vector-dot:nth-child(4) { top: 70%; left: 70%; animation-delay: 1.5s; }
    .vector-dot:nth-child(5) { top: 80%; left: 40%; animation-delay: 2s; }

    @keyframes vectorFloat1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(30px, 50px) scale(1.05); }
      50% { transform: translate(-20px, 80px) scale(0.95); }
      75% { transform: translate(40px, 30px) scale(1.02); }
    }

    @keyframes vectorFloat2 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(-40px, 60px) scale(1.08); }
      66% { transform: translate(30px, -40px) scale(0.92); }
    }

    @keyframes vectorFloat3 {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(60px, -50px); }
    }

    @keyframes vectorFloat4 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.8; }
      50% { transform: translate(-30px, 40px) rotate(10deg); opacity: 1; }
    }

    @keyframes vectorFloat5 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(20px, -30px) rotate(15deg); }
      50% { transform: translate(-15px, 20px) rotate(-10deg); }
      75% { transform: translate(25px, 15px) rotate(5deg); }
    }

    @keyframes vectorFloat6 {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(40px, -30px); }
    }

    @keyframes vectorRotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes vectorRotateSlow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes vectorSlide1 {
      0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.5; }
      50% { transform: translateX(100px) scaleX(1.5); opacity: 1; }
    }

    @keyframes vectorSlide2 {
      0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.5; }
      50% { transform: translateY(50px) scaleY(1.3); opacity: 1; }
    }

    @keyframes dotPulse {
      0%, 100% { transform: scale(1); opacity: 0.4; }
      50% { transform: scale(1.5); opacity: 1; }
    }

    /* Dark overlay effect on scroll */
    .dark-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: linear-gradient(135deg, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0) 100%);
      pointer-events: none;
      z-index: 0;
      transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dark-overlay.active {
      background: linear-gradient(135deg, rgba(17, 24, 39, 0.03) 0%, rgba(17, 24, 39, 0.08) 100%);
    }

    /* Fade-in animations for all elements */
    .fade-in {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .fade-in-delay-1 { transition-delay: 0.1s; }
    .fade-in-delay-2 { transition-delay: 0.2s; }
    .fade-in-delay-3 { transition-delay: 0.3s; }
    .fade-in-delay-4 { transition-delay: 0.4s; }
    .fade-in-delay-5 { transition-delay: 0.5s; }

    /* Text color change effect */
    .color-shift {
      transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .color-shift.shifted {
      color: #689A92 !important;
    }

    /* Initial page fade-in */
    .page-loaded .header {
      animation: fadeInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      animation-fill-mode: forwards;
    }

    .page-loaded .header.scrolled,
    .page-loaded .header:not(.scrolled) {
      transform: none !important;
    }

    /* Elements visible by default, animate on page-loaded */
    .hero-subtitle-box,
    .hero-tagline,
    .hero-man,
    .hero-main-text,
    .side-buttons {
      opacity: 1;
    }

    .page-loaded .hero-subtitle-box {
      animation: fadeInLeft 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
    }

    .page-loaded .hero-tagline {
      animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
    }

    .page-loaded .hero-man {
      animation: fadeInRight 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
    }

    .page-loaded .hero-main-text {
      animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
    }

    .page-loaded .side-buttons {
      animation: fadeInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
    }

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

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

    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(50px); }
      to { opacity: 1; transform: translateX(0); }
    }

    /* Modern Loading Screen */
    .loading-screen {
      position: fixed;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
      z-index: 99999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      /* Auto-hide after 3 seconds even without JS */
      animation: autoHideLoading 0.5s ease 3s forwards;
    }

    @keyframes autoHideLoading {
      to { opacity: 0; visibility: hidden; pointer-events: none; }
    }

    .loading-screen::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:
        radial-gradient(circle at 20% 80%, rgba(104, 154, 146, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(176, 160, 161, 0.1) 0%, transparent 50%);
      animation: bgPulse 4s ease-in-out infinite;
    }

    @keyframes bgPulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.1); }
    }

    .loading-screen.hidden {
      animation: loadingExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes loadingExit {
      0% { opacity: 1; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.05); }
      100% { opacity: 0; transform: scale(1.2); visibility: hidden; }
    }

    /* Floating particles */
    .loading-particles {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .loading-particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(104, 154, 146, 0.6);
      border-radius: 50%;
      animation: particleFloat 8s ease-in-out infinite;
    }

    @keyframes particleFloat {
      0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
    }

    .loading-logo {
      width: calc(400 * var(--scale));
      height: calc(160 * var(--scale));
      margin-bottom: calc(60 * var(--scale));
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .loading-logo img {
      width: auto;
      height: calc(100 * var(--scale));
      object-fit: contain;
      filter: brightness(0) invert(1);
      animation: logoReveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards, logoFloat 3s ease-in-out 1.5s infinite;
    }

    @keyframes logoReveal {
      0% { opacity: 0; transform: scale(0.5) rotateY(-90deg); filter: brightness(0) invert(1) blur(10px); }
      100% { opacity: 1; transform: scale(1) rotateY(0deg); filter: brightness(0) invert(1) blur(0); }
    }

    @keyframes logoFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(calc(-10 * var(--scale))); }
    }

    /* Glitch text effect */
    .loading-text {
      margin-top: calc(30 * var(--scale));
      font-family: 'Italiana', serif;
      font-size: calc(24 * var(--scale));
      color: #fff;
      letter-spacing: calc(8 * var(--scale));
      text-transform: uppercase;
      position: relative;
      z-index: 2;
      animation: glitchText 3s ease-in-out infinite;
    }

    .loading-text::before,
    .loading-text::after {
      content: 'LOADING';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .loading-text::before {
      color: #689A92;
      animation: glitch1 0.3s ease-in-out infinite;
      clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
      transform: translate(-2px);
    }

    .loading-text::after {
      color: #b0a0a1;
      animation: glitch2 0.3s ease-in-out infinite reverse;
      clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
      transform: translate(2px);
    }

    @keyframes glitchText {
      0%, 90%, 100% { opacity: 1; }
      92%, 94%, 96% { opacity: 0.8; transform: skewX(0deg); }
      93%, 95% { opacity: 1; transform: skewX(2deg); }
    }

    @keyframes glitch1 {
      0%, 100% { transform: translate(0); }
      20% { transform: translate(-3px, 2px); }
      40% { transform: translate(3px, -2px); }
      60% { transform: translate(-2px, 1px); }
      80% { transform: translate(2px, -1px); }
    }

    @keyframes glitch2 {
      0%, 100% { transform: translate(0); }
      20% { transform: translate(3px, -2px); }
      40% { transform: translate(-3px, 2px); }
      60% { transform: translate(2px, -1px); }
      80% { transform: translate(-2px, 1px); }
    }

    /* Modern progress ring */
    .loading-ring {
      width: calc(120 * var(--scale));
      height: calc(120 * var(--scale));
      position: relative;
      margin-bottom: calc(40 * var(--scale));
      z-index: 2;
    }

    .loading-ring svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .loading-ring-bg {
      fill: none;
      stroke: rgba(255, 255, 255, 0.1);
      stroke-width: 3;
    }

    .loading-ring-progress {
      fill: none;
      stroke: url(#progressGradient);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 283;
      stroke-dashoffset: 283;
      animation: ringProgress 2s ease-out forwards;
    }

    @keyframes ringProgress {
      0% { stroke-dashoffset: 283; }
      100% { stroke-dashoffset: 0; }
    }

    .loading-percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Italiana', serif;
      font-size: calc(28 * var(--scale));
      color: #fff;
      font-weight: 300;
    }

    /* Scanning line effect */
    .loading-scanline {
      position: absolute;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(104, 154, 146, 0.8), transparent);
      animation: scanline 2s linear infinite;
      z-index: 1;
    }

    @keyframes scanline {
      0% { top: -10%; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { top: 110%; opacity: 0; }
    }

    /* Corner decorations */
    .loading-corner {
      position: absolute;
      width: calc(80 * var(--scale));
      height: calc(80 * var(--scale));
      border: 2px solid rgba(104, 154, 146, 0.5);
      z-index: 1;
    }

    .loading-corner-tl { top: calc(40 * var(--scale)); left: calc(40 * var(--scale)); border-right: none; border-bottom: none; }
    .loading-corner-tr { top: calc(40 * var(--scale)); right: calc(40 * var(--scale)); border-left: none; border-bottom: none; }
    .loading-corner-bl { bottom: calc(40 * var(--scale)); left: calc(40 * var(--scale)); border-right: none; border-top: none; }
    .loading-corner-br { bottom: calc(40 * var(--scale)); right: calc(40 * var(--scale)); border-left: none; border-top: none; }

    .loading-corner::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      background: #689A92;
      border-radius: 50%;
      animation: cornerPulse 1.5s ease-in-out infinite;
    }

    .loading-corner-tl::after { top: -4px; left: -4px; }
    .loading-corner-tr::after { top: -4px; right: -4px; }
    .loading-corner-bl::after { bottom: -4px; left: -4px; }
    .loading-corner-br::after { bottom: -4px; right: -4px; }

    @keyframes cornerPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.5); opacity: 0.5; }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Content z-index to appear above vector shapes */
    .about, .service, .blog, .company, .location, .careers-cta, .footer {
      position: relative;
      z-index: 10;
    }

    /* Header */
    .header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100%;
      height: calc(99 * var(--scale));
      z-index: 100;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform: none !important;
    }

    .header.scrolled {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }

    .logo-link {
      position: absolute;
      left: calc(169 * var(--scale));
      top: calc(23 * var(--scale));
      width: calc(144 * var(--scale));
      height: calc(60 * var(--scale));
      overflow: hidden;
    }

    .logo {
      position: absolute;
      width: 132.84%;
      height: 333.16%;
      left: -17.16%;
      top: -109.09%;
    }

    .nav a {
      position: absolute;
      top: calc(40 * var(--scale));
      font-family: 'Italiana', serif;
      font-size: calc(24 * var(--scale));
      color: #323234;
      text-transform: capitalize;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      height: calc(26 * var(--scale));
    }
    .nav-about { left: calc(900 * var(--scale)); width: calc(86 * var(--scale)); }
    .nav-service { left: calc(1032 * var(--scale)); width: calc(101 * var(--scale)); }
    .nav-blog { left: calc(1181 * var(--scale)); width: calc(63 * var(--scale)); }
    .nav-company { left: calc(1292 * var(--scale)); width: calc(109 * var(--scale)); }

    .hamburger {
      position: absolute;
      left: calc(1555 * var(--scale));
      top: calc(40 * var(--scale));
      width: calc(57 * var(--scale));
      height: calc(20 * var(--scale));
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: calc(8 * var(--scale));
    }

    .hamburger-line {
      width: 100%;
      height: calc(2 * var(--scale));
      background: #323234;
      border-radius: calc(1 * var(--scale));
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: center;
    }

    .hamburger:hover .hamburger-line {
      background: #689A92;
    }

    .hamburger:hover .hamburger-line:first-child {
      transform: translateX(calc(5 * var(--scale)));
    }

    .hamburger:hover .hamburger-line:last-child {
      transform: translateX(calc(-5 * var(--scale)));
    }

    .hamburger.active .hamburger-line:first-child {
      transform: rotate(45deg) translateY(calc(5 * var(--scale)));
    }

    .hamburger.active .hamburger-line:last-child {
      transform: rotate(-45deg) translateY(calc(-5 * var(--scale)));
    }

    /* Side Buttons */
    .side-buttons {
      position: fixed !important;
      right: 0 !important;
      top: calc(200 * var(--scale));
      width: calc(45 * var(--scale));
      z-index: 90;
      display: flex;
      flex-direction: column;
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      transform: none;
    }

    .side-buttons:hover {
      transform: translateX(calc(-3 * var(--scale)));
    }

    .side-btn {
      width: calc(45 * var(--scale));
      height: calc(140 * var(--scale));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: calc(8 * var(--scale));
      font-family: 'Shippori Mincho', serif;
      font-size: calc(13 * var(--scale));
      letter-spacing: calc(1.5 * var(--scale));
      writing-mode: vertical-rl;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
    }

    .side-btn:hover {
      transform: translateX(calc(-3 * var(--scale)));
      box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .side-btn-light {
      background: white;
      color: #343434;
      border-radius: calc(8 * var(--scale)) 0 0 0;
      padding: calc(15 * var(--scale)) calc(12 * var(--scale));
    }

    .side-btn-light:hover {
      background: #f8f8f8;
      color: #689A92;
    }

    .side-btn-dark {
      background: #111827;
      color: white;
      border-radius: 0 0 0 calc(8 * var(--scale));
      padding: calc(15 * var(--scale)) calc(12 * var(--scale));
    }

    .side-btn-dark:hover {
      background: #1f2937;
    }

    /* Hero BG Gradient */
    .hero-bg {
      position: absolute;
      top: calc(99 * var(--scale));
      left: 0;
      width: 100%;
      height: calc(1313 * var(--scale));
      pointer-events: none;
      z-index: 10;
    }

    .hero-bg-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(504 * var(--scale));
      background: rgba(104, 154, 146, 0.23);
    }

    .hero-bg-bottom {
      position: absolute;
      top: calc(504 * var(--scale));
      left: 0;
      width: 100%;
      height: calc(809 * var(--scale));
      background: linear-gradient(to top, rgba(255, 255, 255, 0.23), rgba(104, 154, 146, 0.23));
    }

    /* Hero Elements */
    .hero-image {
      position: absolute;
      top: calc(165 * var(--scale));
      left: 0;
      width: calc(1459 * var(--scale));
      height: calc(770 * var(--scale));
      z-index: 10;
    }

    .hero-circle-small {
      position: absolute;
      top: calc(498 * var(--scale));
      left: calc(88.26 * var(--scale));
      width: calc(190.711 * var(--scale));
      height: calc(192 * var(--scale));
      z-index: 10;
    }

    .hero-circle-large {
      position: absolute;
      top: calc(580 * var(--scale));
      left: calc(163.75 * var(--scale));
      width: calc(307.919 * var(--scale));
      height: calc(310 * var(--scale));
      z-index: 10;
    }

    .hero-subtitle-box {
      position: absolute;
      top: calc(265 * var(--scale));
      left: 0;
      width: calc(972 * var(--scale));
      height: calc(117 * var(--scale));
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(90deg, rgb(17, 24, 39), rgb(17, 24, 39));
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: calc(20 * var(--scale)) calc(18 * var(--scale)) calc(20 * var(--scale)) calc(205 * var(--scale));
      z-index: 10;
    }

    .hero-subtitle {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(61 * var(--scale));
      color: white;
      text-align: right;
      line-height: 1.09;
      white-space: nowrap;
      text-shadow: 0 calc(2 * var(--scale)) calc(10 * var(--scale)) rgba(0,0,0,0.3);
    }

    .hero-tagline {
      position: absolute;
      top: calc(419 * var(--scale));
      left: calc(1188 * var(--scale));
      transform: translateX(-50%);
      font-family: 'Italiana', serif;
      font-size: calc(24 * var(--scale));
      color: white;
      text-align: center;
      width: calc(542 * var(--scale));
      height: calc(30 * var(--scale));
      line-height: 1.09;
      z-index: 10;
    }

    .hero-man {
      position: absolute;
      top: calc(449 * var(--scale));
      left: calc(580 * var(--scale));
      width: calc(926 * var(--scale));
      height: calc(572 * var(--scale));
      border-radius: calc(44 * var(--scale)) 0 0 calc(44 * var(--scale));
      overflow: hidden;
      z-index: 10;
    }

    .hero-man::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(204, 204, 204, 0.2);
      border-radius: calc(44 * var(--scale)) 0 0 calc(44 * var(--scale));
    }

    .hero-man img {
      position: absolute;
      width: 232.77%;
      height: 246.23%;
      left: -85.05%;
      top: -4.84%;
      object-fit: cover;
    }

    .hero-main-text {
      position: absolute;
      top: calc(993 * var(--scale));
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Italiana', serif;
      font-size: calc(190 * var(--scale));
      color: #b0a0a1;
      text-align: right;
      line-height: 1.05;
      white-space: nowrap;
      text-shadow: 0 calc(4 * var(--scale)) calc(20 * var(--scale)) rgba(0,0,0,0.15);
      z-index: 10;
    }

    .hero-main-text-line1 {
      position: absolute;
      right: calc(50% - 682 * var(--scale));
      width: calc(1546 * var(--scale));
      height: calc(199 * var(--scale));
    }

    .hero-main-text-line2 {
      position: absolute;
      right: calc(50% - 865 * var(--scale));
      width: calc(154 * var(--scale));
      height: calc(199 * var(--scale));
    }

    /* About Section */
    .about {
      position: absolute;
      top: calc(1340 * var(--scale));
      left: calc(254 * var(--scale));
      width: calc(1219 * var(--scale));
      display: flex;
      flex-direction: column;
      gap: calc(23 * var(--scale));
      align-items: center;
    }

    .about-header {
      display: flex;
      align-items: center;
      gap: calc(26 * var(--scale));
      width: 100%;
    }

    .about-star { width: calc(80 * var(--scale)); height: calc(84 * var(--scale)); }

    .about-line { width: calc(827 * var(--scale)); height: calc(2 * var(--scale)); }

    .about-content {
      display: flex;
      gap: calc(92 * var(--scale));
      align-items: flex-end;
      width: calc(969 * var(--scale));
    }

    .about-image-wrap {
      width: calc(560 * var(--scale));
      height: calc(338 * var(--scale));
      border-radius: calc(10 * var(--scale));
      box-shadow: 0 calc(4 * var(--scale)) calc(4 * var(--scale)) rgba(0, 0, 0, 0.25);
      overflow: hidden;
      flex-shrink: 0;
    }

    .about-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .about-text {
      width: calc(323 * var(--scale));
      display: flex;
      flex-direction: column;
      gap: calc(35 * var(--scale));
    }

    .about-title-wrap {
      position: relative;
      display: inline-grid;
      grid-template-columns: max-content;
      grid-template-rows: max-content;
    }

    .about-title {
      grid-area: 1 / 1;
      font-family: 'Italiana', serif;
      font-size: calc(48 * var(--scale));
      color: #343434;
      line-height: 1.22;
      width: calc(180 * var(--scale));
      height: calc(60 * var(--scale));
    }

    .about-title-icon-wrap {
      grid-area: 1 / 1;
      margin-left: calc(183 * var(--scale));
      margin-top: calc(14 * var(--scale));
      width: calc(49 * var(--scale));
      height: calc(49 * var(--scale));
      overflow: hidden;
      opacity: 0.9;
      position: relative;
    }

    .about-title-icon {
      position: absolute;
      width: 441.14%;
      height: 458.87%;
      left: -55.09%;
      top: -176.67%;
      max-width: none;
    }

    .about-description {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(14 * var(--scale));
      line-height: 1.8;
      letter-spacing: calc(1 * var(--scale));
      color: #343434;
      height: calc(200 * var(--scale));
    }

    .about-footer {
      display: flex;
      align-items: center;
      gap: calc(25 * var(--scale));
      width: 100%;
      justify-content: flex-end;
    }

    .about-star-small { width: calc(68 * var(--scale)); height: calc(71 * var(--scale)); }

    /* Service Section */
    .service {
      position: absolute;
      top: calc(2068 * var(--scale));
      left: 0;
      width: 100%;
      height: calc(1012 * var(--scale));
    }

    .service-header {
      position: absolute;
      top: 0;
      left: calc(697 * var(--scale));
      display: flex;
      align-items: center;
      gap: calc(28 * var(--scale));
    }

    .service-star { width: calc(41 * var(--scale)); height: calc(50 * var(--scale)); }

    .service-title {
      font-family: 'Italiana', serif;
      font-size: calc(48 * var(--scale));
      color: rgba(0, 0, 0, 0.75);
      line-height: 1.09;
      text-align: center;
      width: calc(150 * var(--scale));
      height: calc(50 * var(--scale));
    }

    .service-bg {
      position: absolute;
      top: calc(72 * var(--scale));
      left: calc(52 * var(--scale));
      width: calc(1625 * var(--scale));
      height: calc(940 * var(--scale));
    }

    .service-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Service Cards - Dark bg with white text - Centered & Compact */
    .service-cards-container {
      position: absolute;
      top: calc(350 * var(--scale));
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: calc(40 * var(--scale));
      justify-content: center;
    }

    .service-card {
      position: relative;
      width: calc(416 * var(--scale));
      height: calc(481 * var(--scale));
      background: #111827;
      border: calc(2 * var(--scale)) solid white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: calc(42 * var(--scale));
      padding: calc(13 * var(--scale)) calc(55 * var(--scale));
      transition: all 0.4s ease;
      overflow: hidden;
    }

    .service-card-3 {
      padding: calc(38 * var(--scale)) calc(56 * var(--scale));
    }

    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      transition: left 0.6s ease;
    }

    .service-card:hover::before {
      left: 100%;
    }

    .service-card:hover {
      transform: translateY(calc(-8 * var(--scale)));
      box-shadow: 0 calc(20 * var(--scale)) calc(40 * var(--scale)) rgba(0,0,0,0.25);
      border-color: #689A92;
    }

    .service-card-1 { left: auto; }
    .service-card-2 { left: auto; }

    .service-icon { width: calc(50 * var(--scale)); height: calc(50 * var(--scale)); object-fit: contain; }

    /* Card 3 has full-width text elements */
    .service-card-3 .service-card-title,
    .service-card-3 .service-card-desc {
      width: 100%;
    }

    .service-card-title {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(24 * var(--scale));
      font-weight: 600;
      color: white;
      text-align: center;
      line-height: normal;
      width: calc(261 * var(--scale));
    }

    .service-card-desc {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(20 * var(--scale));
      line-height: calc(44 * var(--scale));
      letter-spacing: calc(-1 * var(--scale));
      color: white;
      width: calc(305 * var(--scale));
      text-align: left;
    }

    /* Blog Section */
    .blog {
      position: absolute;
      top: calc(3310 * var(--scale));
      left: 0;
      width: 100%;
      height: calc(500 * var(--scale));
      background: linear-gradient(135deg, #1a1a1b 0%, #2a2a2c 50%, #1f1f20 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .blog::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: calc(4 * var(--scale));
      background: linear-gradient(90deg, #689A92 0%, #b0a0a1 50%, #689A92 100%);
    }

    .blog-inner {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: calc(700 * var(--scale));
      padding: 0 calc(40 * var(--scale));
    }

    .blog-header {
      margin-bottom: calc(30 * var(--scale));
    }

    .blog-label {
      display: inline-block;
      font-family: 'Lato', sans-serif;
      font-size: calc(12 * var(--scale));
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #689A92;
      margin-bottom: calc(15 * var(--scale));
    }

    .blog-title {
      font-family: 'Italiana', serif;
      font-size: calc(72 * var(--scale));
      color: #fff;
      letter-spacing: 0.05em;
      margin: 0;
      line-height: 1.2;
    }

    .blog-title-line {
      width: calc(60 * var(--scale));
      height: calc(3 * var(--scale));
      background: #689A92;
      margin: calc(20 * var(--scale)) auto 0;
    }

    .blog-description {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(16 * var(--scale));
      color: rgba(255, 255, 255, 0.7);
      line-height: 2;
      margin: 0 0 calc(40 * var(--scale)) 0;
    }

    .blog-btn {
      display: inline-flex;
      align-items: center;
      gap: calc(12 * var(--scale));
      padding: calc(18 * var(--scale)) calc(40 * var(--scale));
      background: linear-gradient(135deg, #689A92 0%, #5a8a82 100%);
      color: #fff;
      font-family: 'Lato', sans-serif;
      font-size: calc(15 * var(--scale));
      font-weight: 600;
      text-decoration: none;
      border-radius: calc(50 * var(--scale));
      transition: all 0.4s ease;
      box-shadow: 0 4px 20px rgba(104, 154, 146, 0.3);
    }

    .blog-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(104, 154, 146, 0.4);
    }

    .blog-btn svg {
      transition: transform 0.3s ease;
    }

    .blog-btn:hover svg {
      transform: translateX(5px);
    }

    .blog-decoration {
      position: absolute;
      top: 50%;
      right: calc(100 * var(--scale));
      transform: translateY(-50%);
      z-index: 1;
    }

    .blog-deco-circle {
      width: calc(200 * var(--scale));
      height: calc(200 * var(--scale));
      border: calc(2 * var(--scale)) solid rgba(104, 154, 146, 0.2);
      border-radius: 50%;
      position: relative;
    }

    .blog-deco-circle::before {
      content: '';
      position: absolute;
      top: calc(-40 * var(--scale));
      left: calc(-40 * var(--scale));
      width: calc(280 * var(--scale));
      height: calc(280 * var(--scale));
      border: calc(1 * var(--scale)) solid rgba(104, 154, 146, 0.1);
      border-radius: 50%;
    }

    .blog-deco-line {
      position: absolute;
      top: 50%;
      left: calc(-150 * var(--scale));
      width: calc(100 * var(--scale));
      height: calc(1 * var(--scale));
      background: linear-gradient(90deg, transparent, rgba(104, 154, 146, 0.3));
    }


    /* Company Section */
    .company {
      position: absolute;
      top: calc(4165 * var(--scale));
      left: calc(331 * var(--scale));
      width: calc(1106 * var(--scale));
      height: calc(472 * var(--scale));
    }

    .company-header {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .company-subtitle {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(24 * var(--scale));
      color: #323234;
      line-height: 1.17;
      height: calc(38 * var(--scale));
    }

    .company-title {
      font-family: 'Italiana', serif;
      font-size: calc(64 * var(--scale));
      color: #323234;
    }

    .company-content {
      position: absolute;
      top: calc(190 * var(--scale));
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: calc(40 * var(--scale));
    }

    .company-image-wrap {
      width: calc(450 * var(--scale));
      height: calc(282 * var(--scale));
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }

    .company-image {
      width: 105.37%;
      height: 126.08%;
      object-fit: cover;
      position: absolute;
      top: -2.21%;
      left: 0;
    }

    .company-divider {
      width: calc(2 * var(--scale));
      height: calc(241 * var(--scale));
      background: rgba(0, 0, 0, 0.15);
    }

    .company-info {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(20 * var(--scale));
      color: black;
      padding: calc(10 * var(--scale));
      white-space: nowrap;
    }

    .company-info p { margin: 0; line-height: 1.5; }

    /* Location Section */
    .location {
      position: absolute;
      top: calc(4867 * var(--scale));
      left: calc(315 * var(--scale));
      width: calc(1098 * var(--scale));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(60 * var(--scale));
    }

    .location-title {
      font-family: 'Italiana', serif;
      font-size: calc(64 * var(--scale));
      color: #323234;
      text-align: center;
      width: 100%;
    }

    .location-map {
      width: 100%;
      height: calc(348 * var(--scale));
      border-radius: calc(8 * var(--scale));
      overflow: hidden;
    }

    .location-map iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    /* Careers CTA */
    .careers-cta {
      position: absolute;
      top: calc(5684 * var(--scale));
      left: calc(443 * var(--scale));
      width: calc(842 * var(--scale));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(81 * var(--scale));
    }

    .careers-cta-text {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(24 * var(--scale));
      font-weight: 700;
      color: #343434;
      text-align: center;
      line-height: 1.09;
    }

    .entry-btn {
      width: calc(342 * var(--scale));
      height: calc(70 * var(--scale));
      background: #111827;
      border: calc(2 * var(--scale)) solid white;
      border-radius: calc(13 * var(--scale));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Shippori Mincho', serif;
      font-size: calc(20 * var(--scale));
      font-weight: 700;
      color: white;
      cursor: pointer;
      transition: all 0.3s;
    }

    .entry-btn:hover { background: #1f2937; }

    /* Footer */
    .footer {
      position: absolute;
      top: calc(6097 * var(--scale));
      left: 0;
      width: 100%;
      height: calc(480 * var(--scale));
    }

    .footer-main {
      background: linear-gradient(135deg, #1a1a1b 0%, #2a2a2c 50%, #1a1a1b 100%);
      padding: calc(80 * var(--scale)) calc(120 * var(--scale)) calc(60 * var(--scale));
      display: flex;
      justify-content: space-between;
      gap: calc(60 * var(--scale));
      position: relative;
    }

    .footer-main::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: calc(4 * var(--scale));
      background: linear-gradient(90deg, #689A92 0%, #b0a0a1 50%, #689A92 100%);
    }

    /* Brand Section */
    .footer-brand {
      flex: 0 0 calc(320 * var(--scale));
    }

    .footer-logo-link {
      display: inline-block;
      margin-bottom: calc(24 * var(--scale));
      transition: opacity 0.3s ease;
    }

    .footer-logo-link:hover {
      opacity: 0.8;
    }

    .footer-logo {
      width: calc(140 * var(--scale));
      height: auto;
      filter: brightness(0) invert(1);
    }

    .footer-tagline {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(16 * var(--scale));
      color: rgba(255, 255, 255, 0.9);
      margin: 0 0 calc(8 * var(--scale)) 0;
      line-height: 1.6;
    }

    .footer-tagline-en {
      font-family: 'Lato', sans-serif;
      font-size: calc(12 * var(--scale));
      color: rgba(255, 255, 255, 0.5);
      margin: 0;
      letter-spacing: 0.05em;
    }

    /* Navigation Groups */
    .footer-nav-groups {
      display: flex;
      gap: calc(80 * var(--scale));
    }

    .footer-nav-group {
      min-width: calc(140 * var(--scale));
    }

    .footer-nav-title {
      font-family: 'Lato', sans-serif;
      font-size: calc(14 * var(--scale));
      font-weight: 700;
      color: #689A92;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin: 0 0 calc(24 * var(--scale)) 0;
      position: relative;
      padding-bottom: calc(12 * var(--scale));
    }

    .footer-nav-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(30 * var(--scale));
      height: calc(2 * var(--scale));
      background: #689A92;
    }

    .footer-nav-links {
      display: flex;
      flex-direction: column;
      gap: calc(14 * var(--scale));
    }

    .footer-nav-links a {
      font-family: 'Lato', sans-serif;
      font-size: calc(14 * var(--scale));
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
      padding-left: 0;
    }

    .footer-nav-links a::before {
      content: '';
      position: absolute;
      left: calc(-16 * var(--scale));
      top: 50%;
      transform: translateY(-50%);
      width: calc(6 * var(--scale));
      height: calc(6 * var(--scale));
      background: #689A92;
      border-radius: 50%;
      opacity: 0;
      transition: all 0.3s ease;
    }

    .footer-nav-links a:hover {
      color: #fff;
      padding-left: calc(20 * var(--scale));
    }

    .footer-nav-links a:hover::before {
      opacity: 1;
      left: 0;
    }

    /* CTA Section */
    .footer-cta {
      flex: 0 0 calc(280 * var(--scale));
      display: flex;
      align-items: flex-start;
    }

    .footer-cta-box {
      background: linear-gradient(135deg, rgba(104, 154, 146, 0.15) 0%, rgba(104, 154, 146, 0.05) 100%);
      border: 1px solid rgba(104, 154, 146, 0.3);
      border-radius: calc(16 * var(--scale));
      padding: calc(30 * var(--scale));
      text-align: center;
      width: 100%;
    }

    .footer-cta-text {
      font-family: 'Shippori Mincho', serif;
      font-size: calc(14 * var(--scale));
      color: rgba(255, 255, 255, 0.8);
      margin: 0 0 calc(20 * var(--scale)) 0;
    }

    .footer-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: calc(10 * var(--scale));
      padding: calc(14 * var(--scale)) calc(32 * var(--scale));
      background: linear-gradient(135deg, #689A92 0%, #5a8a82 100%);
      color: #fff;
      font-family: 'Lato', sans-serif;
      font-size: calc(14 * var(--scale));
      font-weight: 600;
      text-decoration: none;
      border-radius: calc(50 * var(--scale));
      transition: all 0.4s ease;
      box-shadow: 0 4px 15px rgba(104, 154, 146, 0.3);
    }

    .footer-cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(104, 154, 146, 0.4);
    }

    .footer-cta-btn svg {
      transition: transform 0.3s ease;
    }

    .footer-cta-btn:hover svg {
      transform: translateX(4px);
    }

    /* Footer Bottom */
    .footer-bottom {
      background: #111;
      padding: calc(24 * var(--scale)) calc(120 * var(--scale));
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer-copyright {
      font-family: 'Lato', sans-serif;
      font-size: calc(13 * var(--scale));
      color: rgba(255, 255, 255, 0.5);
      margin: 0;
    }

    .footer-back-top {
      display: flex;
      align-items: center;
      gap: calc(8 * var(--scale));
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: calc(10 * var(--scale)) calc(20 * var(--scale));
      border-radius: calc(50 * var(--scale));
      color: rgba(255, 255, 255, 0.6);
      font-family: 'Lato', sans-serif;
      font-size: calc(12 * var(--scale));
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .footer-back-top:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.4);
      color: #fff;
    }

    .footer-back-top svg {
      transition: transform 0.3s ease;
    }

    .footer-back-top:hover svg {
      transform: translateY(-2px);
    }

    /* Side Menu */
    .menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      z-index: 998;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
    }

    .menu-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .mobile-menu {
      position: fixed;
      top: 0;
      right: 0;
      width: calc(400 * var(--scale));
      max-width: 400px;
      height: 100vh;
      background: #111827;
      z-index: 999;
      display: flex;
      flex-direction: column;
      padding: calc(100 * var(--scale)) calc(50 * var(--scale)) calc(50 * var(--scale));
      gap: calc(30 * var(--scale));
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
      box-shadow: none;
      visibility: hidden;
    }

    .mobile-menu.active {
      transform: translateX(0);
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
      visibility: visible;
    }

    .mobile-menu a {
      font-family: 'Italiana', serif;
      font-size: calc(28 * var(--scale));
      color: white;
      text-transform: capitalize;
      opacity: 0;
      transform: translateX(30px);
      transition: all 0.3s ease;
      padding: calc(15 * var(--scale)) 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
    }

    .mobile-menu.active a {
      opacity: 1;
      transform: translateX(0);
    }

    .mobile-menu.active a:nth-child(2) { transition-delay: 0.1s; }
    .mobile-menu.active a:nth-child(3) { transition-delay: 0.15s; }
    .mobile-menu.active a:nth-child(4) { transition-delay: 0.2s; }
    .mobile-menu.active a:nth-child(5) { transition-delay: 0.25s; }

    .mobile-menu a::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: #689A92;
      transition: width 0.3s ease;
    }

    .mobile-menu a:hover {
      color: #689A92;
      padding-left: calc(15 * var(--scale));
    }

    .mobile-menu a:hover::before {
      width: 100%;
    }

    .mobile-menu .close-btn {
      position: absolute;
      top: calc(30 * var(--scale));
      right: calc(30 * var(--scale));
      font-size: calc(40 * var(--scale));
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
      line-height: 1;
      width: calc(50 * var(--scale));
      height: calc(50 * var(--scale));
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
    }

    .mobile-menu .close-btn:hover {
      color: #689A92;
      background: rgba(104, 154, 146, 0.2);
      transform: rotate(90deg);
    }

    .mobile-menu .menu-footer {
      margin-top: auto;
      padding-top: calc(30 * var(--scale));
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-menu .menu-footer p {
      font-family: 'Lato', sans-serif;
      font-size: calc(14 * var(--scale));
      color: rgba(255, 255, 255, 0.5);
    }

    /* Smooth animations for sections */
    .about, .service, .blog, .company, .location, .careers-cta {
      opacity: 1;
      transform: translateY(50px);
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .about.visible, .service.visible, .blog.visible, .company.visible, .location.visible, .careers-cta.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Navigation link hover effects */
    .nav a::after {
      content: '';
      position: absolute;
      bottom: calc(-5 * var(--scale));
      left: 0;
      width: 0;
      height: calc(2 * var(--scale));
      background: #689A92;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav a:hover {
      color: #689A92;
    }

    .nav a:hover::after {
      width: 100%;
    }

    /* ===== MODERN EFFECTS ===== */

    /* Blinking cursor effect for hero text */
    .hero-subtitle::after {
      content: '|';
      animation: blink 1s step-end infinite;
      margin-left: calc(10 * var(--scale));
      opacity: 0.7;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    /* Gradient text animation */
    .gradient-text {
      background: linear-gradient(90deg, #689A92, #b0a0a1, #689A92);
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradientShift 3s ease infinite;
    }

    @keyframes gradientShift {
      0%, 100% { background-position: 0% center; }
      50% { background-position: 200% center; }
    }

    /* Pulse glow effect for buttons */
    .pulse-glow {
      animation: pulseGlow 2s ease-in-out infinite;
    }

    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(104, 154, 146, 0.4); }
      50% { box-shadow: 0 0 20px 10px rgba(104, 154, 146, 0); }
    }

    /* Shimmer effect */
    .shimmer {
      position: relative;
      overflow: hidden;
    }

    .shimmer::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      animation: shimmer 3s ease-in-out infinite;
    }

    @keyframes shimmer {
      0% { left: -100%; }
      100% { left: 200%; }
    }

    /* Floating animation */
    .float {
      animation: floatUpDown 6s ease-in-out infinite;
    }

    @keyframes floatUpDown {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(calc(-15 * var(--scale))); }
    }

    /* Rotate animation */
    .rotate-slow {
      animation: rotateSlow 20s linear infinite;
    }

    @keyframes rotateSlow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Scale pulse */
    .scale-pulse {
      animation: scalePulse 2s ease-in-out infinite;
    }

    @keyframes scalePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    /* Text reveal from bottom */
    .text-reveal {
      overflow: hidden;
    }

    .text-reveal span {
      display: inline-block;
      transform: translateY(100%);
      animation: textRevealUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes textRevealUp {
      to { transform: translateY(0); }
    }

    /* Glassmorphism card effect */
    .glass-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: calc(20 * var(--scale));
    }

    /* Neon glow effect */
    .neon-glow {
      text-shadow:
        0 0 5px rgba(104, 154, 146, 0.5),
        0 0 10px rgba(104, 154, 146, 0.3),
        0 0 20px rgba(104, 154, 146, 0.2),
        0 0 40px rgba(104, 154, 146, 0.1);
    }

    /* Underline animation */
    .animated-underline {
      position: relative;
      display: inline-block;
    }

    .animated-underline::after {
      content: '';
      position: absolute;
      bottom: calc(-5 * var(--scale));
      left: 0;
      width: 0;
      height: calc(2 * var(--scale));
      background: linear-gradient(90deg, #689A92, #b0a0a1);
      transition: width 0.5s ease;
    }

    .animated-underline:hover::after,
    .animated-underline.active::after {
      width: 100%;
    }

    /* Typing cursor animation */
    .typing-cursor::after {
      content: '|';
      animation: typingBlink 0.7s infinite;
      font-weight: 300;
    }

    @keyframes typingBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    /* Border glow animation */
    .border-glow {
      position: relative;
    }

    .border-glow::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, #689A92, #b0a0a1, #689A92, #b0a0a1);
      background-size: 400% 400%;
      border-radius: inherit;
      z-index: -1;
      animation: borderGlow 3s ease infinite;
      filter: blur(5px);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .border-glow:hover::before {
      opacity: 1;
    }

    @keyframes borderGlow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    /* Staggered fade in */
    .stagger-fade > * {
      opacity: 0;
      transform: translateY(20px);
    }

    .stagger-fade.visible > *:nth-child(1) { animation: fadeInUp 0.6s 0.1s forwards; }
    .stagger-fade.visible > *:nth-child(2) { animation: fadeInUp 0.6s 0.2s forwards; }
    .stagger-fade.visible > *:nth-child(3) { animation: fadeInUp 0.6s 0.3s forwards; }
    .stagger-fade.visible > *:nth-child(4) { animation: fadeInUp 0.6s 0.4s forwards; }
    .stagger-fade.visible > *:nth-child(5) { animation: fadeInUp 0.6s 0.5s forwards; }

    /* Morphing shape background */
    .morphing-bg {
      position: absolute;
      width: calc(500 * var(--scale));
      height: calc(500 * var(--scale));
      background: linear-gradient(135deg, rgba(104, 154, 146, 0.2), rgba(176, 160, 161, 0.2));
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      animation: morphShape 8s ease-in-out infinite;
      filter: blur(40px);
      z-index: 0;
    }

    @keyframes morphShape {
      0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
      50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    }

    /* Service card icon animation */
    .service-icon {
      transition: all 0.3s ease;
    }

    .service-card:hover .service-icon {
      transform: scale(1.1);
    }

    /* Blog card enhanced hover */
    .blog-card {
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .blog-card:hover {
      transform: translateY(calc(-10 * var(--scale))) scale(1.02);
      box-shadow: 0 calc(25 * var(--scale)) calc(50 * var(--scale)) rgba(0,0,0,0.15);
    }

    .blog-card:hover .blog-card-thumb {
      transform: scale(1.1);
    }

    .blog-card-thumb {
      transition: transform 0.6s ease;
    }

    /* Hero circles enhanced animation */
    .hero-circle-small,
    .hero-circle-large {
      animation: circleFloat 8s ease-in-out infinite, circlePulse 4s ease-in-out infinite;
    }

    .hero-circle-large {
      animation-delay: -2s;
    }

    @keyframes circleFloat {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(10px, -15px) rotate(5deg); }
      50% { transform: translate(-5px, 10px) rotate(-3deg); }
      75% { transform: translate(15px, 5px) rotate(2deg); }
    }

    @keyframes circlePulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }

    /* Entry button enhanced */
    .entry-btn {
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease;
    }

    .entry-btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(104, 154, 146, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
    }

    .entry-btn:hover::before {
      width: 300px;
      height: 300px;
    }

    .entry-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 40px rgba(104, 154, 146, 0.3);
    }

    /* More button enhanced */
    .more-btn {
      position: relative;
      overflow: hidden;
    }

    .more-btn::after {
      content: '→';
      margin-left: 8px;
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s ease;
      display: inline-block;
    }

    .more-btn:hover::after {
      opacity: 1;
      transform: translateX(0);
    }

    /* Side buttons blink indicator */
    .side-btn::before {
      content: '';
      position: absolute;
      top: calc(10 * var(--scale));
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 6px;
      background: #689A92;
      border-radius: 50%;
      animation: indicatorBlink 2s ease-in-out infinite;
    }

    .side-btn-dark::before {
      background: white;
    }

    @keyframes indicatorBlink {
      0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
      50% { opacity: 0.3; transform: translateX(-50%) scale(0.8); }
    }

    /* Header logo subtle animation */
    .logo-link:hover .logo {
      animation: logoWiggle 0.5s ease;
    }

    @keyframes logoWiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-3deg); }
      75% { transform: rotate(3deg); }
    }

    /* Section title underline animation on visible */
    .about-title, .service-title, .blog-title, .company-title, .location-title {
      position: relative;
      display: inline-block;
    }

    .about.visible .about-title::after,
    .service.visible .service-title::after,
    .blog.visible .blog-title::after,
    .company.visible .company-title::after,
    .location.visible .location-title::after {
      content: '';
      position: absolute;
      bottom: calc(-5 * var(--scale));
      left: 0;
      width: 100%;
      height: calc(3 * var(--scale));
      background: linear-gradient(90deg, #689A92, transparent);
      animation: underlineExpand 0.8s ease forwards;
    }

    @keyframes underlineExpand {
      from { width: 0; }
      to { width: 100%; }
    }

    /* Star icons rotation */
    .about-star, .about-star-small, .service-star {
      transition: transform 0.5s ease;
    }

    .about:hover .about-star,
    .about:hover .about-star-small {
      transform: rotate(180deg);
    }

    .service-header:hover .service-star {
      transform: rotate(360deg) !important;
    }

    /* ==================== RESPONSIVE DESIGN ==================== */

    /* Tablet (1024px and below) */
    @media screen and (max-width: 1024px) {
      :root {
        --scale: calc(100vw / 1024);
      }

      .side-buttons {
        display: none;
      }

      .nav {
        display: none;
      }

      .hamburger {
        display: flex !important;
      }
    }

    /* Mobile (768px and below) */
    @media screen and (max-width: 768px) {
      :root {
        --scale: 1px;
      }

      html, body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      html {
        height: auto;
      }

      body {
        min-height: 100vh;
        height: auto;
      }

      .viewport-scaler {
        width: 100%;
        transform: none;
        overflow-x: hidden;
      }

      .page-container {
        width: 100%;
        height: auto !important;
        min-height: auto;
        position: relative;
        overflow-x: hidden;
      }

      .page-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.1;
        z-index: 0;
      }

      /* Prevent text overflow */
      h1, h2, h3, p, span, a {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      /* Ensure images don't overflow */
      img {
        max-width: 100%;
        height: auto;
      }

      /* Header Mobile */
      .header {
        position: fixed;
        width: 100%;
        height: 60px;
        padding: 0 15px;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .logo-link {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 120px;
        height: 50px;
        overflow: hidden;
        flex-shrink: 0;
      }

      .logo {
        position: absolute;
        width: 132.84%;
        height: 333.16%;
        left: -17.16%;
        top: -109.09%;
        max-width: none;
      }

      .nav { display: none; }

      .hamburger {
        display: flex !important;
        position: relative;
        top: auto;
        transform: none;
        right: auto;
        left: auto;
        width: 28px;
        height: 18px;
        flex-shrink: 0;
      }

      .hamburger-line {
        width: 100%;
        height: 2px;
      }

      /* Side Menu Mobile */
      .mobile-menu {
        width: 80%;
        max-width: 300px;
        padding: 80px 30px 30px;
      }

      .mobile-menu a {
        font-size: 20px;
      }

      /* Hero Section Mobile */
      .hero-bg {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vw + 200px);
        display: block;
        z-index: 1;
      }

      .hero-bg-top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40%;
        background: rgba(104, 154, 146, 0.23);
      }

      .hero-bg-bottom {
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        height: 60%;
        background: linear-gradient(to top, rgba(255, 255, 255, 0.23), rgba(104, 154, 146, 0.23));
      }

      .hero-image {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 35vw;
        object-fit: cover;
        object-position: center top;
        margin-top: 60px;
        display: block;
        z-index: 10;
      }

      .hero-circle-small, .hero-circle-large {
        display: none;
      }

      .hero-subtitle-box {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        padding: 12px 15px;
        margin-top: 0;
        z-index: 10;
      }

      .hero-subtitle {
        font-size: 18px;
        text-align: center;
        width: 100%;
        left: 0;
        transform: none;
        position: relative;
        white-space: normal;
      }

      .hero-tagline {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 11px;
        transform: none;
        padding: 8px 15px;
        color: #666;
        z-index: 10;
      }

      .hero-man {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 55vw;
        border-radius: 20px 0 0 20px;
        overflow: hidden;
        margin: 0;
        display: block;
        z-index: 10;
      }

      .hero-man::after {
        border-radius: 20px 0 0 20px;
      }

      .hero-man img {
        position: relative;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover;
        object-position: center top;
      }

      .hero-main-text {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        padding: 15px 10px;
        transform: none;
        display: block;
        z-index: 10;
      }

      .hero-main-text-line1 {
        position: relative;
        right: auto;
        width: 100%;
        height: auto;
        font-size: 20px;
        display: block;
        white-space: normal;
        word-wrap: break-word;
      }

      .hero-main-text-line2 {
        position: relative;
        right: auto;
        width: 100%;
        height: auto;
        font-size: 48px;
        display: block;
      }

      .side-buttons {
        display: none;
      }

      /* About Section Mobile */
      .about {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        padding: 40px 20px;
        margin-top: 40px;
      }

      .about-header {
        flex-direction: column;
        gap: 10px;
      }

      .about-star {
        width: 40px;
        height: auto;
      }

      .about-line svg {
        width: 100%;
      }

      .about-content {
        flex-direction: column;
        gap: 30px;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
      }

      .about-image-wrap {
        width: 100%;
        height: auto;
      }

      .about-image {
        width: 100%;
        height: auto;
        position: relative;
      }

      .about-text {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        text-align: center;
      }

      .about-title-wrap {
        justify-content: center;
      }

      .about-title {
        font-size: 40px;
      }

      .about-description {
        font-size: 16px;
        line-height: 1.8;
        text-align: center;
        word-break: keep-all;
        overflow-wrap: break-word;
        max-width: 90%;
        margin: 0 auto;
      }

      /* Service Section Mobile */
      .service {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        height: auto;
        padding: 60px 20px;
      }

      .service-header {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        justify-content: center;
        margin-bottom: 30px;
      }

      .service-title {
        font-size: 40px;
      }

      .service-star {
        width: 30px;
        height: auto;
      }

      .service-lines {
        display: none;
      }

      .service-bg {
        display: none;
      }

      .service-cards-container {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
      }

      .service-card {
        width: 100%;
        max-width: 350px;
        height: auto;
        min-height: 350px;
        padding: 30px 25px;
      }

      .service-card-title {
        font-size: 20px;
        width: 100%;
      }

      .service-card-desc {
        font-size: 16px;
        line-height: 1.8;
        width: 100%;
      }

      /* Blog Section Mobile */
      .blog {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        height: auto;
        padding: 60px 20px;
      }

      .blog-inner {
        max-width: 100%;
        padding: 0;
      }

      .blog-header {
        margin-bottom: 20px;
      }

      .blog-label {
        font-size: 11px;
        margin-bottom: 10px;
      }

      .blog-title {
        font-size: 48px;
      }

      .blog-title-line {
        width: 40px;
        height: 2px;
        margin-top: 15px;
      }

      .blog-description {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 30px;
      }

      .blog-btn {
        font-size: 14px;
        padding: 14px 30px;
        gap: 10px;
      }

      .blog-decoration {
        display: none;
      }

      /* Company Section Mobile */
      .company {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        height: auto;
        padding: 40px 15px;
      }

      .company-header {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-bottom: 25px;
        text-align: center;
        transform: none;
      }

      .company-subtitle {
        font-size: 16px;
        margin-bottom: 5px;
      }

      .company-title {
        font-size: 36px;
      }

      .company-content {
        position: relative;
        top: auto;
        left: auto;
        flex-direction: column;
        gap: 20px;
        width: 100%;
      }

      .company-image-wrap {
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 8px;
      }

      .company-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        top: 0;
        left: 0;
      }

      .company-divider {
        display: none;
      }

      .company-info {
        font-size: 14px;
        line-height: 1.8;
        white-space: normal;
        word-wrap: break-word;
        padding: 10px 0;
      }

      /* Location Section Mobile */
      .location {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        height: auto;
        padding: 60px 20px;
      }

      .location-title {
        font-size: 40px;
        margin-bottom: 30px;
      }

      .location-map {
        width: 100%;
        height: 300px;
      }

      .location-map iframe {
        width: 100%;
        height: 100%;
      }

      /* Careers CTA Mobile */
      .careers-cta {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        height: auto;
        padding: 60px 20px;
      }

      .careers-cta-text {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 30px;
      }

      .entry-btn {
        width: 100%;
        max-width: 280px;
        height: 60px;
        font-size: 18px;
      }

      /* Footer Mobile */
      .footer {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        height: auto;
      }

      .footer-main {
        flex-direction: column;
        padding: 50px 25px 40px;
        gap: 40px;
        align-items: center;
        text-align: center;
      }

      .footer-brand {
        flex: none;
        width: 100%;
      }

      .footer-logo {
        width: 100px;
        filter: brightness(0) invert(1);
      }

      .footer-tagline {
        font-size: 14px;
      }

      .footer-tagline-en {
        font-size: 11px;
      }

      .footer-nav-groups {
        flex-direction: column;
        gap: 35px;
        width: 100%;
      }

      .footer-nav-group {
        min-width: auto;
      }

      .footer-nav-title {
        font-size: 13px;
        margin-bottom: 18px;
      }

      .footer-nav-title::after {
        left: 50%;
        transform: translateX(-50%);
      }

      .footer-nav-links {
        gap: 12px;
      }

      .footer-nav-links a {
        font-size: 13px;
      }

      .footer-nav-links a:hover {
        padding-left: 0;
      }

      .footer-nav-links a::before {
        display: none;
      }

      .footer-cta {
        flex: none;
        width: 100%;
      }

      .footer-cta-box {
        padding: 25px 20px;
      }

      .footer-cta-text {
        font-size: 13px;
      }

      .footer-cta-btn {
        font-size: 13px;
        padding: 12px 28px;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 15px;
        padding: 20px 25px;
        text-align: center;
      }

      .footer-copyright {
        font-size: 11px;
      }

      .footer-back-top {
        font-size: 11px;
        padding: 8px 16px;
      }

      /* Hide desktop-only elements */
      .vector-shape,
      .vector-dot-cluster,
      .animated-bg {
        display: none;
      }

      /* Custom cursor hidden on mobile */
      .custom-cursor,
      .custom-cursor-dot {
        display: none;
      }

      /* Snap scroll disabled on mobile */
      .snap-section {
        scroll-snap-align: none;
      }
    }

    /* Small Mobile (480px and below) */
    @media screen and (max-width: 480px) {
      .header {
        height: 55px;
        padding: 0 12px;
      }

      .logo-link {
        width: 100px;
        height: 42px;
      }

      .hamburger {
        width: 24px;
        height: 16px;
      }

      .hero-image {
        width: 100%;
        height: 30vw;
        margin-top: 55px;
      }

      .hero-man {
        height: 50vw;
        border-radius: 15px 0 0 15px;
      }

      .hero-man::after {
        border-radius: 15px 0 0 15px;
      }

      .hero-man img {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-position: center top;
      }

      .hero-subtitle {
        font-size: 14px;
      }

      .hero-subtitle-box {
        padding: 10px 12px;
        margin-top: 12px;
      }

      .hero-tagline {
        font-size: 10px;
        padding: 6px 12px;
      }

      .hero-main-text-line1 {
        font-size: 16px;
      }

      .hero-main-text-line2 {
        font-size: 40px;
      }

      .about-title,
      .service-title,
      .company-title,
      .location-title {
        font-size: 28px;
      }

      .blog-title {
        font-size: 36px;
      }

      .about-description,
      .blog-description {
        font-size: 13px;
      }

      .about-description {
        max-width: 95%;
        line-height: 2;
      }

      .blog-cards {
        gap: 10px;
      }

      .blog-card {
        width: 240px;
        min-width: 240px;
        max-width: 240px;
      }

      .blog-card-thumb {
        height: 130px;
      }

      .blog-card-content {
        padding: 12px;
      }

      .blog-card-title {
        font-size: 14px;
      }

      .blog-card-excerpt {
        font-size: 12px;
      }

      .more-btn {
        width: 110px;
        height: 35px;
        font-size: 18px;
      }

      .company-subtitle {
        font-size: 14px;
      }

      .company-title {
        font-size: 28px;
      }

      .company-image-wrap {
        height: 180px;
      }

      .company-info {
        font-size: 12px;
        line-height: 1.7;
      }

      .company-info p {
        word-break: normal;
      }

      .service-card {
        max-width: 100%;
        padding: 25px 20px;
      }

      .service-card-title {
        font-size: 16px;
      }

      .service-card-desc {
        font-size: 14px;
      }

      .careers-cta-text {
        font-size: 14px;
      }

      .footer-main {
        padding: 50px 40px 40px;
        gap: 40px;
      }

      .footer-brand {
        flex: 0 0 auto;
      }

      .footer-logo {
        width: 110px;
        filter: brightness(0) invert(1);
      }

      .footer-nav-groups {
        gap: 50px;
      }

      .footer-cta {
        flex: 0 0 auto;
      }

      .footer-bottom {
        padding: 20px 40px;
      }
    }

/* ==========================================================================
   Blog Page Styles (home.php, single.php, archive.php)
   ========================================================================== */

/* Blog page specific overrides - hide all front page decorations */
body.blog-page .page-bg,
body.blog-page .vector-shape,
body.blog-page .vector-dot-cluster,
body.blog-page .animated-bg,
body.blog-page .dark-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.blog-page .page-container {
  background: #f5f5f5;
  position: relative;
  z-index: 1;
}

body.blog-page .viewport-scaler {
  position: relative;
  z-index: 1;
}

/* Blog page footer - override front page absolute positioning */
body.blog-page .footer {
  position: relative;
  top: auto;
  height: auto;
  min-height: calc(400 * var(--scale));
  z-index: 50;
}

/* Blog Hero Section */
.blog-hero {
  position: relative;
  width: 100%;
  height: calc(341 * var(--scale));
  margin-top: calc(101 * var(--scale));
  overflow: hidden;
  z-index: 50;
  background: linear-gradient(135deg, #e8e4e5 0%, #d4cfcf 50%, #c9c4c5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-hero-title {
  position: relative;
  font-family: 'Italiana', serif;
  font-size: calc(80 * var(--scale));
  color: #323234;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
}

/* Stars decoration */
.blog-stars {
  position: absolute;
  right: calc(80 * var(--scale));
  top: calc(500 * var(--scale));
  z-index: 50;
}

.blog-star {
  width: calc(41 * var(--scale));
  height: calc(50 * var(--scale));
}

.blog-star-1 {
  transform: rotate(180deg);
  margin-bottom: calc(10 * var(--scale));
}

/* Blog Main Content */
.blog-main {
  position: relative;
  padding: calc(90 * var(--scale)) calc(253 * var(--scale));
  background: #ffffff;
  z-index: 50;
}

/* Featured Post Section */
.featured-section {
  margin-bottom: calc(80 * var(--scale));
}

.section-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: calc(28 * var(--scale));
  color: #111827;
  margin-bottom: calc(48 * var(--scale));
}

.section-title .post-count {
  font-size: calc(16 * var(--scale));
  color: #6b7280;
  font-weight: 400;
}

.featured-card {
  display: flex;
  background: #f9fafb;
  border-radius: calc(16 * var(--scale));
  overflow: hidden;
  max-width: calc(1200 * var(--scale));
}

.featured-thumbnail {
  position: relative;
  width: calc(700 * var(--scale));
  height: calc(520 * var(--scale));
  background: #e5e7eb;
  flex-shrink: 0;
  display: block;
}

.featured-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: calc(40 * var(--scale));
  background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.5));
}

.featured-meta {
  display: flex;
  gap: calc(12 * var(--scale));
  margin-bottom: calc(16 * var(--scale));
}

.meta-badge {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--scale));
  background: white;
  padding: calc(8 * var(--scale)) calc(16 * var(--scale));
  border-radius: calc(20 * var(--scale));
}

.meta-badge svg {
  width: calc(16 * var(--scale));
  height: calc(16 * var(--scale));
}

.meta-badge span {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: calc(14 * var(--scale));
  color: #111827;
}

.featured-overlay-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: calc(32 * var(--scale));
  color: white;
  line-height: 1.2;
}

.featured-content {
  padding: calc(48 * var(--scale));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--scale));
  width: calc(500 * var(--scale));
}

.featured-label {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: calc(14 * var(--scale));
  color: #6b7280;
}

.featured-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: calc(28 * var(--scale));
  color: #111827;
  line-height: 1.5;
}

.featured-excerpt {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(16 * var(--scale));
  color: #6b7280;
  line-height: 1.8;
}

.featured-content .author-info {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--scale));
}

.featured-content .author-avatar {
  width: calc(48 * var(--scale));
  height: calc(48 * var(--scale));
  background: #e5e7eb;
  border-radius: 50%;
  overflow: hidden;
}

.featured-content .author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.featured-content .author-details {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--scale));
}

.featured-content .author-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: calc(15 * var(--scale));
  color: #111827;
}

.featured-content .author-role {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(13 * var(--scale));
  color: #6b7280;
}

/* Posts Grid Section */
.posts-section {
  padding-bottom: calc(80 * var(--scale));
}

.posts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(40 * var(--scale));
  max-width: calc(1200 * var(--scale));
}

.filter-buttons {
  display: flex;
  gap: calc(12 * var(--scale));
}

.filter-btn {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: calc(14 * var(--scale));
  padding: calc(10 * var(--scale)) calc(20 * var(--scale));
  border-radius: calc(20 * var(--scale));
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.filter-btn.active {
  background: #111827;
  color: white;
}

.filter-btn:not(.active) {
  background: #f3f4f6;
  color: #6b7280;
}

.filter-btn:hover:not(.active) {
  background: #e5e7eb;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32 * var(--scale));
  max-width: calc(1200 * var(--scale));
}

.post-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: calc(12 * var(--scale));
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.post-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-thumbnail {
  width: 100%;
  height: calc(240 * var(--scale));
  background: #e5e7eb;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-card:hover .post-thumbnail img {
  transform: scale(1.05);
}

.post-content {
  padding: calc(24 * var(--scale));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--scale));
}

.post-meta {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--scale));
}

.post-date {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--scale));
}

.post-date svg {
  width: calc(14 * var(--scale));
  height: calc(14 * var(--scale));
}

.post-date span, .post-category {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(13 * var(--scale));
  color: #6b7280;
}

.post-meta-divider {
  width: 1px;
  height: calc(12 * var(--scale));
  background: #e5e7eb;
}

.post-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: calc(18 * var(--scale));
  color: #111827;
  line-height: 1.5;
}

.post-excerpt {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(14 * var(--scale));
  color: #6b7280;
  line-height: 1.7;
}

.no-posts {
  grid-column: 1 / -1;
  text-align: center;
  padding: calc(60 * var(--scale));
  color: #6b7280;
  font-size: calc(16 * var(--scale));
}

/* Pagination */
.pagination {
  display: flex;
  gap: calc(8 * var(--scale));
  margin-top: calc(40 * var(--scale));
}

.page-btn {
  width: calc(40 * var(--scale));
  height: calc(40 * var(--scale));
  border-radius: calc(8 * var(--scale));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: calc(14 * var(--scale));
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
}

.page-btn.active {
  background: #111827;
  color: white;
}

.page-btn:not(.active) {
  background: #f3f4f6;
  color: #6b7280;
}

.page-btn:hover:not(.active) {
  background: #e5e7eb;
}

.page-btn svg {
  width: calc(20 * var(--scale));
  height: calc(20 * var(--scale));
}

/* Archive Description */
.archive-description {
  max-width: calc(800 * var(--scale));
  margin-bottom: calc(40 * var(--scale));
  padding: calc(20 * var(--scale));
  background: #f9fafb;
  border-radius: calc(8 * var(--scale));
  font-size: calc(15 * var(--scale));
  color: #4b5563;
  line-height: 1.8;
}

/* ==========================================================================
   Single Post Styles
   ========================================================================== */

/* Article Container */
.article-container {
  max-width: calc(900 * var(--scale));
  margin: 0 auto;
  padding: calc(150 * var(--scale)) calc(40 * var(--scale)) calc(100 * var(--scale));
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--scale));
  font-family: 'Lato', 'Noto Sans JP', sans-serif;
  font-size: calc(13 * var(--scale));
  color: #6b7280;
  margin-bottom: calc(30 * var(--scale));
  flex-wrap: wrap;
}

.breadcrumb a {
  color: #689A92;
  transition: opacity 0.3s;
}

.breadcrumb a:hover {
  opacity: 0.7;
}

.breadcrumb span {
  color: #9ca3af;
}

/* Article Header */
.article-header {
  margin-bottom: calc(40 * var(--scale));
}

.article-meta {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--scale));
  margin-bottom: calc(20 * var(--scale));
}

.article-category {
  display: inline-block;
  padding: calc(6 * var(--scale)) calc(16 * var(--scale));
  background: #689A92;
  color: white;
  font-family: 'Lato', sans-serif;
  font-size: calc(12 * var(--scale));
  font-weight: 700;
  border-radius: calc(4 * var(--scale));
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s;
}

.article-category:hover {
  background: #5a8a82;
}

.article-date {
  font-family: 'Lato', sans-serif;
  font-size: calc(14 * var(--scale));
  color: #6b7280;
}

.article-title {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(36 * var(--scale));
  font-weight: 600;
  color: #323234;
  line-height: 1.4;
  margin-bottom: calc(30 * var(--scale));
}

/* Featured Image */
.article-featured-image {
  width: 100%;
  height: calc(450 * var(--scale));
  border-radius: calc(12 * var(--scale));
  overflow: hidden;
  margin-bottom: calc(50 * var(--scale));
}

.article-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article Content */
.article-content {
  font-family: 'Lato', 'Noto Sans JP', sans-serif;
  font-size: calc(16 * var(--scale));
  color: #374151;
  line-height: 2;
}

.article-content h2 {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(26 * var(--scale));
  font-weight: 600;
  color: #323234;
  margin: calc(50 * var(--scale)) 0 calc(20 * var(--scale));
  padding-bottom: calc(12 * var(--scale));
  border-bottom: 2px solid #689A92;
}

.article-content h3 {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(20 * var(--scale));
  font-weight: 600;
  color: #323234;
  margin: calc(40 * var(--scale)) 0 calc(16 * var(--scale));
}

.article-content h4 {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(18 * var(--scale));
  font-weight: 600;
  color: #323234;
  margin: calc(30 * var(--scale)) 0 calc(12 * var(--scale));
}

.article-content p {
  margin-bottom: calc(24 * var(--scale));
}

.article-content ul, .article-content ol {
  margin: calc(20 * var(--scale)) 0;
  padding-left: calc(30 * var(--scale));
}

.article-content li {
  margin-bottom: calc(10 * var(--scale));
}

.article-content li::marker {
  color: #689A92;
}

.article-content blockquote {
  margin: calc(30 * var(--scale)) 0;
  padding: calc(20 * var(--scale)) calc(30 * var(--scale));
  background: #f9fafb;
  border-left: 4px solid #689A92;
  border-radius: 0 calc(8 * var(--scale)) calc(8 * var(--scale)) 0;
  font-style: italic;
  color: #4b5563;
}

.article-content a {
  color: #689A92;
  text-decoration: underline;
}

.article-content a:hover {
  opacity: 0.8;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: calc(8 * var(--scale));
  margin: calc(30 * var(--scale)) 0;
}

.article-content pre {
  background: #1f2937;
  color: #e5e7eb;
  padding: calc(20 * var(--scale));
  border-radius: calc(8 * var(--scale));
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: calc(14 * var(--scale));
  margin: calc(30 * var(--scale)) 0;
}

.article-content code {
  background: #f3f4f6;
  padding: calc(2 * var(--scale)) calc(6 * var(--scale));
  border-radius: calc(4 * var(--scale));
  font-family: 'Courier New', monospace;
  font-size: calc(14 * var(--scale));
  color: #ef4444;
}

.article-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* Article Tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--scale));
  margin-top: calc(40 * var(--scale));
  padding-top: calc(20 * var(--scale));
  border-top: 1px solid #e5e7eb;
}

.article-tag {
  padding: calc(6 * var(--scale)) calc(14 * var(--scale));
  background: #f3f4f6;
  color: #6b7280;
  border-radius: calc(20 * var(--scale));
  font-size: calc(13 * var(--scale));
  transition: all 0.3s;
}

.article-tag:hover {
  background: #689A92;
  color: white;
}

/* Author Box */
.author-box {
  margin-top: calc(60 * var(--scale));
  padding: calc(30 * var(--scale));
  background: #f9fafb;
  border-radius: calc(12 * var(--scale));
  display: flex;
  gap: calc(20 * var(--scale));
  align-items: center;
}

.author-box .author-avatar {
  width: calc(80 * var(--scale));
  height: calc(80 * var(--scale));
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.author-box .author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.author-box .author-info {
  flex: 1;
}

.author-box .author-name {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(18 * var(--scale));
  font-weight: 600;
  color: #323234;
  margin-bottom: calc(8 * var(--scale));
}

.author-box .author-bio {
  font-family: 'Lato', 'Noto Sans JP', sans-serif;
  font-size: calc(14 * var(--scale));
  color: #6b7280;
  line-height: 1.6;
}

/* Post Navigation */
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: calc(20 * var(--scale));
  margin-top: calc(50 * var(--scale));
  padding-top: calc(30 * var(--scale));
  border-top: 1px solid #e5e7eb;
}

.post-nav-link {
  flex: 1;
  padding: calc(20 * var(--scale));
  background: #f9fafb;
  border-radius: calc(8 * var(--scale));
  transition: all 0.3s;
  text-decoration: none;
}

.post-nav-link:hover {
  background: #f3f4f6;
  transform: translateY(-2px);
}

.post-nav-prev {
  text-align: left;
}

.post-nav-next {
  text-align: right;
}

.post-nav-label {
  display: block;
  font-size: calc(12 * var(--scale));
  color: #6b7280;
  margin-bottom: calc(8 * var(--scale));
}

.post-nav-title {
  display: block;
  font-family: 'Shippori Mincho', serif;
  font-size: calc(15 * var(--scale));
  font-weight: 600;
  color: #323234;
  line-height: 1.4;
}

/* Related Posts */
.related-posts {
  margin-top: calc(80 * var(--scale));
  padding-top: calc(50 * var(--scale));
  border-top: 1px solid #e5e7eb;
}

.related-posts-title {
  font-family: 'Italiana', serif;
  font-size: calc(28 * var(--scale));
  color: #323234;
  margin-bottom: calc(30 * var(--scale));
  text-align: center;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 * var(--scale));
}

.related-post-card {
  background: white;
  border-radius: calc(12 * var(--scale));
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: block;
  text-decoration: none;
}

.related-post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.related-post-image {
  width: 100%;
  height: calc(150 * var(--scale));
  object-fit: cover;
}

.related-post-content {
  padding: calc(20 * var(--scale));
}

.related-post-category {
  font-family: 'Lato', sans-serif;
  font-size: calc(11 * var(--scale));
  color: #689A92;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: calc(8 * var(--scale));
}

.related-post-title {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(15 * var(--scale));
  font-weight: 600;
  color: #323234;
  line-height: 1.5;
}

/* Back to Blog */
.back-to-blog {
  display: flex;
  justify-content: center;
  margin-top: calc(60 * var(--scale));
}

.back-to-blog a {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--scale));
  padding: calc(16 * var(--scale)) calc(40 * var(--scale));
  border: 2px solid #323234;
  border-radius: calc(8 * var(--scale));
  font-family: 'Shippori Mincho', serif;
  font-size: calc(15 * var(--scale));
  color: #323234;
  transition: all 0.3s;
  text-decoration: none;
}

.back-to-blog a:hover {
  background: #323234;
  color: white;
}

/* ==========================================================================
   Blog Page Responsive Styles
   ========================================================================== */

@media screen and (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-main {
    padding: calc(60 * var(--scale)) calc(100 * var(--scale));
  }
}

@media screen and (max-width: 768px) {
  /* Blog Hero Mobile */
  .blog-hero {
    height: 200px;
    margin-top: 70px;
  }

  .blog-hero-title {
    font-size: 48px;
  }

  .blog-main {
    padding: 40px 20px;
  }

  .section-title {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .section-title .post-count {
    font-size: 14px;
  }

  .featured-card {
    flex-direction: column;
  }

  .featured-thumbnail {
    width: 100%;
    height: 250px;
  }

  .featured-content {
    width: 100%;
    padding: 24px;
  }

  .featured-title {
    font-size: 20px;
  }

  .featured-excerpt {
    font-size: 14px;
  }

  .featured-overlay-title {
    font-size: 20px;
  }

  .posts-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .posts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .post-thumbnail {
    height: 200px;
  }

  .post-title {
    font-size: 16px;
  }

  .filter-btn {
    font-size: 12px;
    padding: 8px 16px;
  }

  .pagination {
    justify-content: center;
  }

  .page-btn {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .blog-stars {
    display: none;
  }

  /* Single Post Mobile */
  .article-container {
    padding: 80px 20px 60px;
  }

  .breadcrumb {
    font-size: 12px;
  }

  .article-title {
    font-size: 24px;
  }

  .article-featured-image {
    height: 200px;
    border-radius: 8px;
  }

  .article-content {
    font-size: 15px;
  }

  .article-content h2 {
    font-size: 20px;
  }

  .article-content h3 {
    font-size: 17px;
  }

  .author-box {
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
  }

  .author-box .author-avatar {
    width: 70px;
    height: 70px;
  }

  .post-navigation {
    flex-direction: column;
  }

  .post-nav-link {
    text-align: center;
  }

  .related-posts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .related-post-image {
    height: 180px;
  }
}

@media screen and (max-width: 480px) {
  .blog-hero {
    height: 150px;
    margin-top: 55px;
  }

  .blog-hero-title {
    font-size: 36px;
  }

  .featured-thumbnail {
    height: 180px;
  }

  .meta-badge {
    padding: 6px 12px;
  }

  .meta-badge span {
    font-size: 11px;
  }

  .featured-content .author-avatar {
    width: 40px;
    height: 40px;
  }

  .featured-content .author-name {
    font-size: 13px;
  }

  .featured-content .author-role {
    font-size: 11px;
  }

  .article-title {
    font-size: 20px;
  }

  .article-featured-image {
    height: 160px;
  }
}