/* ============================================
   JELUNMORAI DIGITAL - STYLE.CSS
   Design: Soft Modern | Clean, Premium, App-like
   ============================================ */


:root {
  
  --color-bg:          #F7F6F3;
  --color-bg-warm:     #F2EFE9;
  --color-bg-dark:     #1A1916;
  --color-surface:     #FFFFFF;
  --color-surface-2:   #EEECE7;

  --color-text:        #1E1C18;
  --color-text-mid:    #4A4640;
  --color-text-muted:  #8A8480;
  --color-text-light:  #F7F6F3;

  --color-accent:      #C06B2E;
  --color-accent-dark: #9E5220;
  --color-accent-light:#FAEADE;

  --color-border:      #E0DDD6;
  --color-border-dark: #3A3830;

  
  --shadow-xs:  0 1px 3px rgba(30,28,24,0.06), 0 1px 2px rgba(30,28,24,0.04);
  --shadow-sm:  0 2px 8px rgba(30,28,24,0.07), 0 1px 3px rgba(30,28,24,0.05);
  --shadow-md:  0 4px 16px rgba(30,28,24,0.09), 0 2px 6px rgba(30,28,24,0.06);
  --shadow-lg:  0 8px 32px rgba(30,28,24,0.11), 0 4px 12px rgba(30,28,24,0.07);
  --shadow-xl:  0 16px 48px rgba(30,28,24,0.13), 0 6px 18px rgba(30,28,24,0.08);

  
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full:9999px;

  
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  
  --font-body: 'Instrument Sans', sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  
  --header-h: 68px;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--color-accent-dark); }
ul { list-style: none; }
address { font-style: normal; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }


.CookieBar {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  transition: max-height .4s ease, opacity .3s ease, padding .4s ease;
  overflow: hidden;
  max-height: fit-content;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 9999;
}
.CookieBar.is-hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.CookieBar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.CookieBar-text { flex: 1; min-width: 200px; }
.CookieBar-text a { color: var(--color-accent-light); }
.CookieBar-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.CookieBar-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  transition: all .2s;
  cursor: pointer;
}
.CookieBar-btn--reject {
  background: transparent;
  border: 1px solid rgba(247,246,243,0.3);
  color: var(--color-text-light);
}
.CookieBar-btn--reject:hover { border-color: rgba(247,246,243,0.7); }
.CookieBar-btn--accept {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}
.CookieBar-btn--accept:hover { background: var(--color-accent-dark); }


.SiteHeader {
  position: fixed;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .3s ease;
}
.SiteHeader.is-scrolled { box-shadow: var(--shadow-md); }
.SiteHeader-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.SiteHeader-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.SiteHeader-logoImg { width: 32px; height: 32px; }
.SiteHeader-logoText {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.SiteHeader-logoText span { color: var(--color-accent); }
.SiteHeader-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
.SiteHeader-navLink {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-mid);
  transition: all .2s;
  white-space: nowrap;
}
.SiteHeader-navLink:hover,
.SiteHeader-navLink.is-active {
  color: var(--color-text);
  background: var(--color-bg);
}
.SiteHeader-navLink--cta {
  background: var(--color-accent);
  color: #fff !important;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-weight: 600;
}
.SiteHeader-navLink--cta:hover { background: var(--color-accent-dark); color: #fff !important; }
.SiteHeader-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.SiteHeader-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}
.SiteHeader-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all .25s;
}
.SiteHeader-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--color-accent);
  transition: width .1s linear;
}
.SiteHeader--transparent { background: transparent; box-shadow: none; }


.LangBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.LangBadge-flag { font-size: 14px; }


.MobileTabBar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(30,28,24,0.1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.MobileTabBar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-1);
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  min-height: 56px;
  transition: all .2s;
}
.MobileTabBar-item i { font-size: 18px; transition: color .2s; }
.MobileTabBar-item.is-active { color: var(--color-accent); }
.MobileTabBar-item.is-active i { color: var(--color-accent); }
.MobileTabBar-item:hover { color: var(--color-text); }


.Container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}


.Section {
  padding: var(--space-20) 0;
}
.Section--light { background: var(--color-bg); }
.Section--warm { background: var(--color-bg-warm); }
.Section--dark { background: var(--color-bg-dark); }
.Section--accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}
.Section--cta {
  background: linear-gradient(135deg, #2A2720 0%, var(--color-bg-dark) 100%);
}
.Section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.Section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.Section-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.Section--dark .Section-heading,
.Section--cta .Section-heading { color: var(--color-text-light); }
.Section-footer { text-align: center; margin-top: var(--space-10); }


.Btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all .25s;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.Btn--primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(192,107,46,0.35);
}
.Btn--primary:hover {
  background: var(--color-accent-dark);
  color: #fff;
  box-shadow: 0 6px 20px rgba(192,107,46,0.45);
  transform: translateY(-1px);
}
.Btn--secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.Btn--secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}
.Btn--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.Btn--outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}
.Btn--white {
  background: #fff;
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.Btn--white:hover {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  transform: translateY(-1px);
}
.Btn--white-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.Btn--white-outline:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.Btn--full { width: 100%; justify-content: center; }


.PageHero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--header-h);
}
.PageHero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.PageHero-bgImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.PageHero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26,25,22,0.82) 0%,
    rgba(26,25,22,0.55) 60%,
    rgba(26,25,22,0.35) 100%
  );
}
.PageHero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-6);
  max-width: 760px;
  padding-left: clamp(var(--space-6), 6vw, 100px);
}
.PageHero-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--space-5);
  background: rgba(192,107,46,0.2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid rgba(192,107,46,0.3);
}
.PageHero-heading {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--space-6);
}
.PageHero-sub {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: rgba(247,246,243,0.8);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: var(--space-8);
}
.PageHero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.PageHero-scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(247,246,243,0.5);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}


.PageBanner {
  background: linear-gradient(135deg, var(--color-bg-dark) 0%, #2E2B24 100%);
  padding: calc(var(--header-h) + var(--space-16)) 0 var(--space-16);
}
.PageBanner--legal {
  background: linear-gradient(135deg, #2A2720 0%, var(--color-bg-dark) 100%);
}
.PageBanner--services {
  background: linear-gradient(135deg, var(--color-accent-dark) 0%, #3A2010 100%);
}
.PageBanner-content { max-width: 640px; }
.PageBanner-heading {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
  margin-top: var(--space-2);
}
.PageBanner-sub {
  font-size: var(--text-lg);
  color: rgba(247,246,243,0.7);
  line-height: 1.6;
}


.AboutPreview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.AboutPreview-body {
  font-size: var(--text-lg);
  color: var(--color-text-mid);
  line-height: 1.75;
  margin-bottom: var(--space-5);
}
.AboutPreview-imgWrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.AboutPreview-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  transition: transform .4s ease;
}
.AboutPreview-imgWrap:hover .AboutPreview-img { transform: scale(1.03); }
.AboutPreview-quote {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-md);
  border-left: 3px solid var(--color-accent);
}
.AboutPreview-quote i {
  color: var(--color-accent);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
  display: block;
}
.AboutPreview-quote p {
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  font-style: italic;
  line-height: 1.6;
}
.AboutPreview .Section-eyebrow { display: block; margin-bottom: var(--space-3); }
.AboutPreview .Section-heading { margin-bottom: var(--space-6); text-align: left; }


.ServicesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.ServiceCard {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all .3s;
  display: flex;
  flex-direction: column;
}
.ServiceCard:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--color-accent-light);
}
.ServiceCard--accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  border-color: transparent;
}
.ServiceCard--accent .ServiceCard-icon,
.ServiceCard--accent .ServiceCard-title,
.ServiceCard--accent .ServiceCard-body { color: #fff; }
.ServiceCard--accent .ServiceCard-link { color: rgba(255,255,255,0.85); }
.ServiceCard--accent .ServiceCard-link:hover { color: #fff; }
.ServiceCard-icon {
  font-size: 1.75rem;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.ServiceCard-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.ServiceCard-body {
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  line-height: 1.7;
  flex: 1;
  margin-bottom: var(--space-5);
}
.ServiceCard-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: gap .2s;
}
.ServiceCard-link:hover { gap: var(--space-3); }


.PullQuote {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) 0;
}
.PullQuote-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-dark) 50%, transparent);
}
.PullQuote-text {
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 500;
  color: var(--color-text-light);
  text-align: center;
  max-width: 700px;
  line-height: 1.5;
  font-style: italic;
  flex-shrink: 0;
}


.Timeline {
  position: relative;
  padding-left: var(--space-12);
}
.Timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-border) 100%);
}
.Timeline-item {
  position: relative;
  display: flex;
  gap: var(--space-6);
  padding-bottom: var(--space-10);
}
.Timeline-item:last-child { padding-bottom: 0; }
.Timeline-marker {
  position: absolute;
  left: calc(-1 * var(--space-12) + var(--space-2));
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.Timeline-number {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
}
.Timeline-content {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  flex: 1;
  transition: box-shadow .3s, transform .3s;
}
.Timeline-content:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
.Timeline-date {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.Timeline-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.Timeline-body { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.7; }


.FeatureStrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}
.FeatureStrip-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
}
.FeatureStrip-item i { font-size: 1.2rem; opacity: 0.85; }
.FeatureStrip-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.3);
}


.GalleryGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-3);
}
.GalleryGrid-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  position: relative;
}
.GalleryGrid-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26,25,22,0);
  transition: background .3s;
}
.GalleryGrid-item:hover::after { background: rgba(26,25,22,0.25); }
.GalleryGrid-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .4s ease;
}
.GalleryGrid-item:hover img { transform: scale(1.06); }
.GalleryGrid-item--tall { grid-row: span 2; }
.GalleryGrid-item--tall img { height: 100%; }
.GalleryGrid-item--wide { grid-column: span 2; }


.BlogGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.BlogCard {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all .3s;
}
.BlogCard:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.BlogCard-imgLink { display: block; overflow: hidden; }
.BlogCard-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .4s ease;
}
.BlogCard:hover .BlogCard-img { transform: scale(1.05); }
.BlogCard-body { padding: var(--space-6); }
.BlogCard-cat {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.BlogCard-title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.BlogCard-title a { color: var(--color-text); }
.BlogCard-title a:hover { color: var(--color-accent); }
.BlogCard-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.BlogCard-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: gap .2s;
}
.BlogCard-more:hover { gap: var(--space-3); }


.CtaBlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-12);
}
.CtaBlock-heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.CtaBlock-sub {
  font-size: var(--text-base);
  color: rgba(247,246,243,0.65);
  line-height: 1.65;
  max-width: 480px;
}


.MagazineLayout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.MagazineLayout-main p {
  color: var(--color-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-5);
  font-size: var(--text-lg);
}
.MagazineLayout-main h2.Section-heading { text-align: left; margin-bottom: var(--space-6); }
.MagazineLayout-side { display: flex; flex-direction: column; gap: var(--space-4); }
.FactCard {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: box-shadow .3s, transform .3s;
}
.FactCard:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
.FactCard--accent {
  background: var(--color-accent-light);
  border-color: rgba(192,107,46,0.2);
}
.FactCard i {
  font-size: 1.25rem;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  display: block;
}
.FactCard h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.FactCard p { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.65; }


.ValueGrid .Section-header { text-align: left; margin-bottom: var(--space-8); }
.ValueGrid-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.ValueItem {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all .3s;
}
.ValueItem:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ValueItem-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 800;
  margin-bottom: var(--space-4);
}
.ValueItem-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-3); }
.ValueItem p { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.7; }


.TeamGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  max-width: 800px;
}
.TeamCard {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: all .3s;
}
.TeamCard:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }
.TeamCard-imgWrap { overflow: hidden; }
.TeamCard-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform .4s;
}
.TeamCard:hover .TeamCard-img { transform: scale(1.04); }
.TeamCard-name {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: var(--space-5) var(--space-6) var(--space-1);
}
.TeamCard-role {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 var(--space-6) var(--space-3);
}
.TeamCard-bio { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.7; padding: 0 var(--space-6) var(--space-6); }


.ServiceDetail { margin-bottom: var(--space-12); }
.ServiceDetail:last-child { margin-bottom: 0; }
.ServiceDetail-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.ServiceDetail-icon {
  width: 56px;
  height: 56px;
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-accent);
  flex-shrink: 0;
}
.ServiceDetail-icon--accent {
  background: var(--color-accent);
  color: #fff;
}
.ServiceDetail-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.ServiceDetail-body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.ServiceDetail-body--reverse { grid-template-columns: 1fr 1.3fr; }
.ServiceDetail-main p {
  color: var(--color-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}
.ServiceDetail-main h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.ServiceDetail-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ServiceDetail-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  line-height: 1.6;
}
.ServiceDetail-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  margin-top: 7px;
  flex-shrink: 0;
}
.ServiceDetail-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ServiceDetail-img img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform .4s;
}
.ServiceDetail-img:hover img { transform: scale(1.04); }


.NotDoGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.NotDoCard {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.NotDoCard i {
  width: 32px;
  height: 32px;
  background: #FEE2E2;
  color: #DC2626;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
}
.NotDoCard h3 { font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.NotDoCard p { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.65; }


.BlogFull { display: flex; flex-direction: column; gap: var(--space-12); }
.BlogFull-article {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
}
.BlogFull-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.BlogFull-cat {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.BlogFull-date { font-size: var(--text-xs); color: var(--color-text-muted); }
.BlogFull-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-6);
}
.BlogFull-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.BlogFull-img img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.BlogFull-body p {
  font-size: var(--text-base);
  color: var(--color-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}
.BlogFull-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  margin-top: var(--space-2);
  padding: var(--space-2) 0;
  transition: gap .2s;
}
.BlogFull-toggle:hover { gap: var(--space-3); }
.BlogFull-more { margin-top: var(--space-5); }
.BlogFull-more p {
  font-size: var(--text-base);
  color: var(--color-text-mid);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}


.ContactLayout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.ContentCard {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.ContentCard-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.ContentCard-body {
  font-size: var(--text-sm);
  color: var(--color-text-mid);
  margin-bottom: var(--space-6);
  line-height: 1.7;
}
.ContactForm { display: flex; flex-direction: column; gap: var(--space-5); }
.FormField { display: flex; flex-direction: column; gap: var(--space-2); }
.FormField-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-mid); }
.FormField-input,
.FormField-textarea {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.FormField-input:focus,
.FormField-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(192,107,46,0.12);
}
.FormField-textarea { resize: vertical; min-height: 120px; }
.FormField--check { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.FormField-checkbox { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-accent); cursor: pointer; }
.FormField-checkLabel { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.5; cursor: pointer; }
.FormField-checkLabel a { color: var(--color-accent); }
.ContactInfo { margin-bottom: var(--space-6); }
.ContactInfo-title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-5); }
.ContactInfo-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.ContactInfo-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ContactInfo-item i {
  width: 40px;
  height: 40px;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ContactInfo-item strong { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.ContactInfo-item p, .ContactInfo-item a { font-size: var(--text-sm); color: var(--color-text-mid); }
.ContactMap { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }


.FaqSection .Section-header { text-align: left; }
.FaqGrid { display: flex; flex-direction: column; gap: var(--space-4); }
.FaqItem {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
  transition: box-shadow .3s;
}
.FaqItem:hover { box-shadow: var(--shadow-md); }
.FaqItem-q {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.FaqItem-q i { color: var(--color-accent); margin-top: 2px; flex-shrink: 0; }
.FaqItem-a { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.7; padding-left: calc(var(--space-3) + 1em); }


.LegalCards { display: flex; flex-direction: column; gap: var(--space-6); max-width: 860px; }
.LegalCard {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.LegalCard-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-accent-light);
}
.LegalCard p { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.8; margin-bottom: var(--space-4); }
.LegalCard p:last-child { margin-bottom: 0; }
.LegalCard ul { list-style: disc; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.LegalCard ul li { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.7; }
.LegalCard a { color: var(--color-accent); }
.LegalCard code { background: var(--color-bg); padding: 2px 6px; border-radius: var(--radius-xs); font-size: var(--text-xs); color: var(--color-accent-dark); }
.LegalCard-intro { font-size: var(--text-base) !important; color: var(--color-text-mid); line-height: 1.8; }
.LegalCards--terms .LegalCard-title { border-bottom-color: var(--color-border); }
.LegalCards--cookies .LegalCard:first-child { background: var(--color-bg-warm); }


.SiteFooter {
  background: var(--color-bg-dark);
  color: rgba(247,246,243,0.7);
  padding: var(--space-16) 0 0;
}
.SiteFooter-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border-dark);
}
.SiteFooter-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  margin-bottom: var(--space-4);
}
.SiteFooter-logoImg { width: 28px; height: 28px; filter: brightness(0) invert(1) opacity(0.8); }
.SiteFooter-logo span { font-size: var(--text-base); font-weight: 700; color: rgba(247,246,243,0.9); }
.SiteFooter-tagline { font-size: var(--text-sm); line-height: 1.65; max-width: 240px; }
.SiteFooter-heading { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,246,243,0.5); margin-bottom: var(--space-4); }
.SiteFooter-links { display: flex; flex-direction: column; gap: var(--space-2); }
.SiteFooter-links a { font-size: var(--text-sm); color: rgba(247,246,243,0.6); transition: color .2s; }
.SiteFooter-links a:hover { color: rgba(247,246,243,0.95); }
.SiteFooter-address p { font-size: var(--text-sm); color: rgba(247,246,243,0.6); margin-bottom: var(--space-2); }
.SiteFooter-address a { color: rgba(247,246,243,0.6); transition: color .2s; }
.SiteFooter-address a:hover { color: rgba(247,246,243,0.95); }
.SiteFooter-legal {
  padding: var(--space-6) 0;
  font-size: var(--text-xs);
  color: rgba(247,246,243,0.35);
  line-height: 1.7;
}
.SiteFooter-legal p { margin-bottom: var(--space-2); }
.SiteFooter-copy { color: rgba(247,246,243,0.25); }
.SiteFooter--minimal { padding-top: var(--space-6); }


.ThanksPage { background: var(--color-accent); }
.ThanksPage .SiteHeader--transparent { background: transparent; }
.ThanksPage .SiteHeader-logoText { color: #fff; }
.ThanksPage .SiteHeader-logoText span { color: rgba(255,255,255,0.7); }
.ThanksMain {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20) var(--space-6);
  min-height: calc(100vh - 200px);
}
.ThanksMain-inner {
  text-align: center;
  max-width: 520px;
}
.ThanksMain-icon {
  font-size: 3rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-6);
}
.ThanksMain-heading {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
}
.ThanksMain-text {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  margin-bottom: var(--space-8);
}
.ThanksPage .SiteFooter { background: rgba(0,0,0,0.3); }


@media (max-width: 1024px) {
  .ServicesGrid { grid-template-columns: 1fr 1fr; }
  .SiteFooter-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .AboutPreview { grid-template-columns: 1fr; gap: var(--space-8); }
  .MagazineLayout { grid-template-columns: 1fr; gap: var(--space-8); }
  .ServiceDetail-body,
  .ServiceDetail-body--reverse { grid-template-columns: 1fr; }
  .GalleryGrid { grid-template-columns: repeat(2, 1fr); }
  .GalleryGrid-item--tall { grid-row: auto; }
  .GalleryGrid-item img { height: 180px; }
  .GalleryGrid-item--tall img { height: 180px; }
}

@media (max-width: 768px) {
  :root { --header-h: 60px; }
  .SiteHeader-nav { display: none; }
  .SiteHeader-hamburger { display: flex; }
  .MobileTabBar { display: flex; }
  body { padding-bottom: 56px; }

  .ServicesGrid { grid-template-columns: 1fr; }
  .BlogGrid { grid-template-columns: 1fr; }
  .ValueGrid-items { grid-template-columns: 1fr; }
  .TeamGrid { grid-template-columns: 1fr; }
  .NotDoGrid { grid-template-columns: 1fr; }
  .ContactLayout { grid-template-columns: 1fr; }
  .SiteFooter-grid { grid-template-columns: 1fr 1fr; }

  .CtaBlock {
    flex-direction: column;
    text-align: center;
    padding: var(--space-8);
  }
  .CtaBlock-sub { max-width: 100%; }

  .PullQuote { flex-direction: column; gap: var(--space-4); }
  .PullQuote-line { width: 60px; height: 2px; }

  .GalleryGrid { grid-template-columns: 1fr 1fr; }
  .GalleryGrid-item--wide { grid-column: auto; }

  .Timeline { padding-left: var(--space-10); }

  .Section { padding: var(--space-12) 0; }
  .PageBanner { padding: calc(var(--header-h) + var(--space-10)) 0 var(--space-10); }

  .FeatureStrip { flex-direction: column; gap: var(--space-4); }
  .FeatureStrip-divider { display: none; }

  .ServiceDetail-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .SiteFooter-grid { grid-template-columns: 1fr; }
  .PageHero-actions { flex-direction: column; }
  .PageHero-actions .Btn { width: 100%; justify-content: center; }
  .CookieBar-inner { flex-direction: column; align-items: flex-start; }
  .GalleryGrid { grid-template-columns: 1fr; }
}


[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }