/* =============================================
   HR Hawaii — Site Styles v2
   Modern Hawaii · Skew Angles · Reliable Layout
   ============================================= */

/* ---- Self-hosted Montserrat ---- */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-v31-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-v31-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-v31-latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Custom Properties ---- */
:root {
  --orange:        #EE6D50;
  --orange-dark:   #d55a3e;
  --orange-light:  #FEF0EB;
  --teal:          #00A8B6;
  --teal-dark:     #0f556e;
  --teal-mid:      #0d7a8e;
  --teal-light:    #E0F6F8;
  --dark:          #1a1f24;
  --text:          #2d3436;
  --text-muted:    #636e72;
  --border:        #e8eaed;
  --sand:          #FDF6EE;
  --white:         #ffffff;

  --shadow-sm:     0 2px 12px rgba(0,0,0,.07);
  --shadow-md:     0 8px 30px rgba(0,0,0,.11);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.15);
  --shadow-teal:   0 8px 25px rgba(0,168,182,.32);
  --shadow-orange: 0 8px 25px rgba(238,109,80,.32);

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   24px;

  --skew:        -2.5deg;
  --skew-pad:    80px;

  --ease:        cubic-bezier(0.4,0,0.2,1);
  --trans:       0.25s cubic-bezier(0.4,0,0.2,1);
  --trans-slow:  0.4s  cubic-bezier(0.4,0,0.2,1);
}

/* ---- Reset & Base ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:17px; }
body {
  font-family:'Montserrat',sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }

.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 30px;
}

/* ---- Typography ---- */
h1,h2,h3,h4 {
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  line-height:1.15;
  color:var(--teal-dark);
}
h1 { font-size:clamp(2rem,4.5vw,3.2rem); }
h2 { font-size:clamp(1.6rem,3vw,2.4rem); }
h3 { font-size:clamp(1.1rem,2vw,1.3rem); }
h4 { font-size:1rem; }
p  { color:var(--text-muted); font-size:1rem; line-height:1.8; }

.eyebrow, .section-subtitle {
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--orange);
  display:block;
  margin-bottom:10px;
}
.section-header { margin-bottom:56px; }
.section-header.center { text-align:center; }
.section-header.center p { max-width:560px; margin:14px auto 0; }
.section-header.left p { margin-top:14px; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 32px;
  font-family:'Montserrat',sans-serif;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:none;
  border-radius:50px;
  cursor:pointer;
  transition:all var(--trans);
  white-space:nowrap;
}
.btn-teal        { background:var(--teal); color:#fff; }
.btn-teal:hover  { background:var(--teal-mid); transform:translateY(-2px); box-shadow:var(--shadow-teal); }
.btn-orange      { background:var(--orange); color:#fff; }
.btn-orange:hover{ background:var(--orange-dark); transform:translateY(-2px); box-shadow:var(--shadow-orange); }
.btn-dark        { background:var(--dark); color:#fff; }
.btn-dark:hover  { background:#111; transform:translateY(-2px); }
.btn-outline-white  { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7); }
.btn-outline-white:hover { background:rgba(255,255,255,.15); border-color:#fff; }
.btn-outline-teal   { background:transparent; color:var(--teal); border:2px solid var(--teal); }
.btn-outline-teal:hover { background:var(--teal); color:#fff; }
.btn-outline-orange { background:transparent; color:var(--orange); border:2px solid var(--orange); }
.btn-outline-orange:hover { background:var(--orange); color:#fff; }
.btn-lg { padding:17px 44px; font-size:0.91rem; }
.btn-sm { padding:9px 20px; font-size:0.8rem; }

/* Read More Link */
.read-more {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.8rem;
  font-weight:700;
  color:var(--teal);
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition:gap var(--trans), color var(--trans);
}
.read-more:hover { color:var(--orange); gap:12px; }

/* ====================================================
   TOP BAR
   ==================================================== */
.top-bar {
  background:var(--teal-dark);
  padding:9px 0;
  font-size:0.82rem;
  font-weight:600;
}
.top-bar .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.top-bar-left {
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.6);
  flex-wrap:wrap;
}
.top-bar-left a {
  color:rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  gap:5px;
  transition:color var(--trans);
}
.top-bar-left a:hover { color:var(--orange); }
.top-bar-sep { color:rgba(255,255,255,.3); }
.top-bar-right { display:flex; align-items:center; gap:10px; }
.top-bar-right a {
  color:rgba(255,255,255,.82);
  font-size:0.82rem;
  font-weight:600;
  transition:color var(--trans);
}
.top-bar-right a:hover { color:var(--orange); }
.top-bar-portal {
  border:1.5px solid rgba(255,255,255,.5) !important;
  color:rgba(255,255,255,.9) !important;
  padding:4px 14px;
  border-radius:50px;
  font-weight:600;
  font-size:0.76rem;
  letter-spacing:0.04em;
  transition:all var(--trans) !important;
}
.top-bar-portal:hover {
  border-color:#fff !important;
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
}

/* ====================================================
   HEADER / NAV
   ==================================================== */
.site-header {
  position:sticky;
  top:0;
  background:#fff;
  z-index:90;
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--trans);
}
.site-header.scrolled { box-shadow:0 4px 20px rgba(0,0,0,.1); }
.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:72px;
}
.logo img { display:block; }
.main-nav {
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-link {
  font-size:0.82rem;
  font-weight:600;
  color:var(--text);
  padding:8px 14px;
  border-radius:50px;
  transition:all var(--trans);
  white-space:nowrap;
  cursor:pointer;
}
.nav-link:hover,
.nav-link.active { color:var(--teal-dark); background:var(--teal-light); }

/* Dropdown */
.nav-dropdown { position:relative; }
.dropdown-toggle {
  display:flex;
  align-items:center;
  gap:4px;
  user-select:none;
}
.dropdown-arrow { width:14px; height:14px; transition:transform var(--trans); flex-shrink:0; }
.nav-dropdown:hover .dropdown-arrow { transform:rotate(180deg); }
.dropdown-menu {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  min-width:240px;
  padding:8px;
  /* Invisible top padding acts as a hover bridge — keeps menu reachable */
  padding-top:20px;
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  /* Delay visibility:hidden by 120ms so cursor can travel from trigger to menu */
  transition:opacity 0.22s var(--ease),
             transform 0.22s var(--ease),
             visibility 0s linear 0.22s;
}
/* Transparent pseudo-element bridges the gap between trigger and menu */
.nav-dropdown::after {
  content:'';
  position:absolute;
  top:calc(100% - 4px);
  left:-20px; right:-20px;
  height:24px;
  background:transparent;
}
.nav-dropdown:hover .dropdown-menu {
  opacity:1;
  visibility:visible;
  pointer-events:all;
  transform:translateX(-50%) translateY(0);
  /* Show immediately, only delay the hide */
  transition:opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s;
}
.dropdown-menu a {
  display:block;
  padding:10px 16px;
  font-size:0.82rem;
  font-weight:600;
  color:var(--text);
  border-radius:var(--radius-sm);
  transition:all var(--trans);
}
.dropdown-menu a:hover { background:var(--teal-light); color:var(--teal-dark); }
.nav-cta {
  background:var(--orange) !important;
  color:#fff !important;
  padding:9px 22px !important;
  border-radius:50px !important;
  font-weight:700 !important;
}
.nav-cta:hover { background:var(--orange-dark) !important; }

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.hamburger span {
  display:block;
  width:24px; height:2px;
  background:var(--text);
  border-radius:2px;
  transition:all var(--trans);
}

/* ====================================================
   MOBILE NAV
   ==================================================== */
.nav-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:200;
  opacity:0; pointer-events:none;
  transition:opacity var(--trans-slow);
  backdrop-filter:blur(4px);
}
.nav-overlay.open { opacity:1; pointer-events:all; }
.mobile-nav {
  position:fixed;
  top:0; right:0;
  width:min(340px,90vw); height:100vh;
  background:#fff;
  z-index:210;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--trans-slow);
  overflow-y:auto;
}
.mobile-nav.open { transform:translateX(0); }
.mobile-nav-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--border);
}
.mobile-nav-close {
  background:none; border:none;
  font-size:1.4rem; cursor:pointer;
  color:var(--text-muted); padding:4px;
}
.mobile-nav-links { flex:1; padding:16px 0; }
.mobile-nav-links a, .mobile-sub-label {
  display:block;
  padding:12px 24px;
  font-size:1rem; font-weight:600;
  color:var(--text);
  border-left:3px solid transparent;
  transition:all var(--trans);
}
.mobile-nav-links a:hover { background:var(--teal-light); border-left-color:var(--teal); color:var(--teal-dark); }
.mobile-sub-label {
  font-size:0.72rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--orange);
  padding-top:20px;
}
.mobile-nav-cta {
  padding:20px 24px;
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--border);
}
.mobile-nav-cta .btn { text-align:center; justify-content:center; }

/* ====================================================
   HERO SLIDER
   ==================================================== */
.hero-slider {
  position:relative;
  height:100vh;
  min-height:600px;
  max-height:920px;
  overflow:hidden;
}
.hero-slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
}
.hero-slide.active { opacity:1; pointer-events:all; z-index:2; }
.hero-slide-bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1);
  transition:transform 12s ease;
}
.hero-slide.active .hero-slide-bg { transform:scale(1.03); }
.hero-slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to right,
    rgba(8,40,58,.88) 0%,
    rgba(8,40,58,.70) 40%,
    rgba(8,40,58,.28) 75%,
    rgba(8,40,58,.10) 100%
  );
}
.hero-content {
  position:absolute; inset:0; z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:1200px;
  margin:0 auto;
  padding:0 100px 60px;
  left:0; right:0;
}
.hero-content .eyebrow {
  color:#00A8B6;
  font-size:0.82rem;
  letter-spacing:0.2em;
  margin-bottom:14px;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  opacity:0.88;
}
.hero-content h1 {
  color:#fff;
  max-width:700px;
  margin-bottom:20px;
  font-size:clamp(2.2rem,5vw,3.6rem);
  text-shadow:0 2px 20px rgba(0,0,0,.2);
}
.hero-content p {
  color:rgba(255,255,255,.82);
  max-width:520px;
  font-size:1.02rem;
  margin-bottom:36px;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* Slider Controls */
.slider-arrow {
  position:absolute; z-index:10;
  top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  width:52px; height:52px;
  border-radius:50%;
  cursor:pointer; font-size:1.2rem;
  transition:all var(--trans);
  display:flex; align-items:center; justify-content:center;
}
.slider-arrow:hover { background:rgba(255,255,255,.3); }
.slider-arrow.prev { left:24px; }
.slider-arrow.next { right:24px; }
.slider-dots {
  position:absolute; bottom:30px;
  left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:10;
}
.slider-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  border:none; cursor:pointer;
  transition:all var(--trans);
}
.slider-dot.active { background:#fff; width:24px; border-radius:4px; }

/* Angled bottom on hero — wave into white services section */
.hero-angle {
  position:relative;
  z-index:1;
  line-height:0;
  background:#fff;
}
.hero-angle svg { display:block; width:100%; height:70px; }

/* ====================================================
   QUICK STATS BAR
   ==================================================== */
.quick-stats {
  background:var(--teal-dark);
  padding:50px 0 70px;
  position:relative;
  z-index:1;
}
.quick-stats-angle {
  position:relative;
  z-index:1;
  line-height:0;
  background:#fff;
}
.quick-stats-angle svg { display:block; width:100%; height:70px; }
.stats-bar {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.stat-item {
  background:rgba(255,255,255,.06);
  padding:32px 20px;
  text-align:center;
  transition:background var(--trans);
}
.stat-item:hover { background:rgba(255,255,255,.12); }
.stat-num {
  font-size:clamp(2rem,3.5vw,2.8rem);
  font-weight:800;
  color:#fff;
  line-height:1;
  margin-bottom:8px;
  display:block;
}
.stat-label {
  font-size:0.76rem;
  font-weight:600;
  color:rgba(255,255,255,.62);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* ====================================================
   SERVICES SECTION
   ==================================================== */
.services-section {
  background:#fff;
  padding:80px 0 100px;
  position:relative;
}
.services-angle {
  line-height:0;
  background:var(--sand);
  position:relative;
}
.services-angle svg { display:block; width:100%; height:70px; }
.services-grid-wrap {
  display:flex;
  flex-direction:column;
  gap:28px;
}
.services-row {
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
}
.service-card {
  background:#fff;
  border-radius:var(--radius-lg);
  padding:40px 32px 36px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:all 0.35s var(--ease);
  position:relative;
  overflow:hidden;
  flex:1 1 280px;
  max-width:360px;
}
.service-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--teal), var(--orange));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.4s var(--ease);
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.service-card:hover::after { transform:scaleX(1); }
.service-card-icon {
  width:68px; height:68px;
  margin-bottom:22px;
  background:var(--teal-light);
  border-radius:var(--radius);
  padding:14px;
  transition:all var(--trans);
  overflow:hidden;
  flex-shrink:0;
}
.service-card-icon img {
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.service-card:hover .service-card-icon { background:linear-gradient(135deg, var(--teal-light), var(--orange-light)); transform:rotate(-4deg) scale(1.05); }
.service-card h3 { margin-bottom:12px; color:var(--teal-dark); font-size:1.12rem; }
.service-card p { font-size:1rem; margin-bottom:22px; }

/* ====================================================
   ACCORDION (All-In-One)
   ==================================================== */
.accordion-section {
  background:var(--sand);
  padding:80px 0 100px;
}
.accordion-angle {
  line-height:0;
  background:#fff;
}
.accordion-angle svg { display:block; width:100%; height:70px; }
.accordion-inner {
  display:grid;
  grid-template-columns:1fr 420px;
  gap:80px;
  align-items:start;
}
.accordion-content h2 { margin-bottom:16px; }
.accordion-content > p { margin-bottom:36px; }
.accordion-list { display:flex; flex-direction:column; }
.accordion-item { border-bottom:1px solid var(--border); overflow:hidden; }
.accordion-item:first-child { border-top:1px solid var(--border); }
.accordion-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; cursor:pointer;
  font-size:1rem; font-weight:700; color:var(--teal-dark);
  transition:color var(--trans); user-select:none; gap:16px;
}
.accordion-header:hover { color:var(--teal); }
.accordion-icon {
  width:28px; height:28px; border-radius:50%;
  background:var(--teal-light); color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:400; flex-shrink:0;
  transition:all var(--trans); line-height:1;
}
.accordion-item.open .accordion-icon { background:var(--teal-dark); color:#fff; transform:rotate(45deg); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease); }
.accordion-body p { padding-bottom:20px; }
.accordion-item.open .accordion-body { max-height:200px; }

.accordion-visual {
  background:var(--teal-dark);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  position:sticky; top:100px;
}
.accordion-visual-header {
  padding:36px 32px 28px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.accordion-visual-header h3 { color:#fff; font-size:1.25rem; margin-bottom:6px; }
.accordion-visual-header p { color:rgba(255,255,255,.6); font-size:0.91rem; }
.accordion-visual-body { padding:8px 0; }
.av-stat {
  display:flex; align-items:flex-start; gap:18px;
  padding:20px 32px; transition:background var(--trans);
}
.av-stat:hover { background:rgba(255,255,255,.06); }
.av-stat-icon {
  width:40px; height:40px; flex-shrink:0;
  background:rgba(255,255,255,.12); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal);
}
.av-stat-text strong { display:block; color:#fff; font-size:0.97rem; font-weight:700; margin-bottom:4px; }
.av-stat-text span { color:rgba(255,255,255,.58); font-size:1rem; line-height:1.55; }

/* ====================================================
   DIFFERENCE / STATS
   ==================================================== */
.difference-section {
  background:#fff;
  padding:80px 0 100px;
}
.difference-angle {
  line-height:0;
  background:var(--teal-dark);
}
.difference-angle svg { display:block; width:100%; height:70px; }
.difference-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.difference-content h2 { margin-bottom:16px; }
.difference-content > p { margin-bottom:36px; }
.difference-points { display:flex; flex-direction:column; gap:24px; margin-bottom:36px; }
.diff-point { display:flex; gap:18px; align-items:flex-start; }
.diff-icon {
  width:48px; height:48px; border-radius:var(--radius);
  background:var(--teal-light);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--teal-dark);
}
.diff-text strong { display:block; font-size:1rem; font-weight:700; color:var(--teal-dark); margin-bottom:4px; }
.diff-text p { font-size:0.93rem; margin:0; }
.difference-visual { display:flex; flex-direction:column; gap:20px; }
.dv-card {
  background:var(--sand);
  border-radius:var(--radius-lg);
  padding:32px;
  border:1px solid var(--border);
  transition:all var(--trans);
}
.dv-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.dv-card.featured {
  background:linear-gradient(135deg, var(--teal-dark), var(--teal-mid));
  border:none;
}
.dv-card .num {
  font-size:clamp(2.4rem,4.5vw,3.4rem);
  font-weight:800; color:var(--teal-dark);
  line-height:1; display:block; margin-bottom:10px;
}
.dv-card.featured .num { color:#fff; }
.dv-card .label { font-size:0.93rem; font-weight:600; color:var(--text-muted); }
.dv-card .label strong { display:block; color:var(--text); margin-bottom:4px; font-size:1rem; }
.dv-card.featured .label { color:rgba(255,255,255,.7); }
.dv-card.featured .label strong { color:#fff; }
.dv-cards-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
/* Icon inside dv-card (replacing counter nums) */
.dv-card-icon {
  width:48px; height:48px;
  background:rgba(255,255,255,.15);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:#fff; margin-bottom:16px; flex-shrink:0;
}
.dv-card:not(.featured) .dv-card-icon {
  background:var(--teal-light);
  color:var(--teal-dark);
  width:40px; height:40px;
  margin-bottom:12px;
}

/* ====================================================
   DIFF CARDS (credential grid replacing stat boxes)
   ==================================================== */
.diff-cards-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:52px;
}
.diff-card {
  background:var(--sand);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:all var(--trans-slow);
  position:relative;
  overflow:hidden;
}
.diff-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--teal), var(--orange));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.4s var(--ease);
}
.diff-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.diff-card:hover::after { transform:scaleX(1); }
.diff-card-icon {
  width:56px; height:56px;
  background:var(--teal-light);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal-dark);
  margin-bottom:20px;
  transition:all var(--trans);
}
.diff-card:hover .diff-card-icon { background:linear-gradient(135deg, var(--teal-light), var(--orange-light)); color:var(--orange-dark); }
.diff-card h4 { font-size:1.05rem; font-weight:700; color:var(--teal-dark); margin-bottom:12px; }
.diff-card p { font-size:0.93rem; line-height:1.8; }

/* ====================================================
   FAQ SECTION
   ==================================================== */
.faq-section {
  background:var(--sand);
  padding:80px 0 100px;
}
.faq-inner {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:80px;
  align-items:start;
}
.faq-header h2 { margin-bottom:14px; }
.faq-header p { margin-top:0; }
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--border); overflow:hidden; }
.faq-item:first-child { border-top:1px solid var(--border); }
.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; cursor:pointer;
  font-size:1rem; font-weight:700; color:var(--teal-dark);
  transition:color var(--trans); user-select:none; gap:16px;
}
.faq-question:hover { color:var(--teal); }
.faq-icon {
  width:28px; height:28px; border-radius:50%;
  background:var(--teal-light); color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:400; flex-shrink:0;
  transition:all var(--trans); line-height:1;
}
.faq-item.open .faq-icon { background:var(--teal-dark); color:#fff; transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease); }
.faq-answer p { padding-bottom:20px; font-size:0.97rem; }
.faq-item.open .faq-answer { max-height:260px; }

/* ====================================================
   CTA BANNER
   ==================================================== */
.cta-banner {
  background:linear-gradient(135deg, var(--teal-dark) 0%, var(--teal-mid) 55%, #0d8fa0 100%);
  padding:100px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 80% 50%, rgba(0,168,182,.25) 0%, transparent 65%),
             radial-gradient(ellipse at 20% 80%, rgba(238,109,80,.12) 0%, transparent 55%);
}
.cta-banner .container { position:relative; z-index:2; }
.cta-banner h2 { color:#fff; font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:16px; }
.cta-banner p { color:rgba(255,255,255,.78); max-width:560px; margin:0 auto 36px; font-size:1rem; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-angle {
  line-height:0;
  background:#fff;
}
.cta-angle svg { display:block; width:100%; height:70px; }

/* ====================================================
   TESTIMONIALS
   ==================================================== */
.testimonial-section {
  background:#fff;
  padding:80px 0 100px;
}
.testimonials-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.testimonial-card {
  background:var(--sand);
  border-radius:var(--radius-lg);
  padding:36px 32px;
  border:1px solid var(--border);
  transition:all var(--trans-slow);
  position:relative;
}
.testimonial-card::before {
  content:'"';
  position:absolute; top:16px; left:28px;
  font-size:5rem; color:var(--teal-light);
  font-family:Georgia,serif; line-height:1;
  pointer-events:none;
}
.testimonial-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.stars { color:var(--orange); font-size:1rem; margin-bottom:16px; letter-spacing:2px; }
blockquote {
  font-size:1rem; line-height:1.8; color:var(--text);
  font-style:italic; margin-bottom:24px; position:relative;
}
.testimonial-author {
  display:flex; align-items:center; gap:14px;
  border-top:1px solid var(--border); padding-top:20px;
}
.author-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal-dark), var(--teal));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; font-weight:700; flex-shrink:0;
}
.author-info strong { display:block; font-size:0.93rem; color:var(--text); }
.author-info span { font-size:0.8rem; color:var(--text-muted); }

/* ====================================================
   CREDENTIALS BAR
   ==================================================== */
.credentials-angle {
  line-height:0;
  background:var(--teal-dark);
}
.credentials-angle svg { display:block; width:100%; height:70px; }
.credentials-section {
  background:var(--teal-dark);
  padding:52px 0 56px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.credentials-inner {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:0;
}
.credential-item {
  display:flex; align-items:center; gap:14px;
  padding:24px 40px;
  border-right:1px solid rgba(255,255,255,.15);
}
.credential-item:last-child { border-right:none; }
.credential-item--stack { padding:16px 40px; }
.credential-item--center { justify-content:center; }
.credential-stack { display:flex; flex-direction:column; gap:14px; width:100%; }
.credential-sub { display:flex; align-items:center; gap:14px; }
.credential-icon {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:#fff;
  background:rgba(255,255,255,.14);
  border-radius:var(--radius-sm);
}
.credential-text strong { display:block; color:#fff; font-size:1rem; font-weight:700; }
.credential-text span { color:rgba(255,255,255,.62); font-size:0.82rem; }

/* ====================================================
   FOOTER
   ==================================================== */
.site-footer {
  background:var(--teal-dark);
  padding:80px 0 0;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:60px;
  padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.footer-logo { margin-bottom:18px; }
.footer-brand p { color:rgba(255,255,255,.68); font-size:0.93rem; line-height:1.85; margin-bottom:24px; }
.social-links { display:flex; gap:10px; }
.social-link {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.75);
  transition:all var(--trans);
}
.social-link:hover { background:var(--orange); color:#fff; transform:translateY(-2px); }
.footer-col h4 {
  color:#fff; font-size:0.82rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; margin-bottom:22px;
}
.footer-links { display:flex; flex-direction:column; gap:11px; }
.footer-links a { color:rgba(255,255,255,.62); font-size:0.93rem; font-weight:600; transition:color var(--trans); }
.footer-links a:hover { color:var(--orange); }
.footer-contact-info { display:flex; flex-direction:column; gap:14px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:12px; }
.ci-icon {
  width:18px; height:18px; flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  color:var(--orange);
}
.ci-text { color:rgba(255,255,255,.65); font-size:0.93rem; line-height:1.65; }
.ci-text a { color:rgba(255,255,255,.65); transition:color var(--trans); }
.ci-text a:hover { color:var(--orange); }
.footer-bottom {
  padding:22px 0;
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.8rem; color:rgba(255,255,255,.45); gap:16px; flex-wrap:wrap;
  border-top:none;
}
.footer-bottom-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.footer-bottom-links a { color:rgba(255,255,255,.55); text-decoration:none; transition:color var(--trans); }
.footer-bottom-links a:hover { color:#fff; }
.footer-bottom-sep { color:rgba(255,255,255,.25); }

/* ====================================================
   POLICY PAGES
   ==================================================== */
.policy-wrap {
  max-width:820px;
  margin:0 auto;
  color:var(--text);
  line-height:1.8;
}
.policy-updated {
  font-size:0.88rem;
  color:var(--text-muted);
  margin-bottom:36px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.policy-wrap h2 {
  font-size:1.25rem;
  color:var(--teal-dark);
  margin:40px 0 12px;
  padding-bottom:8px;
  border-bottom:2px solid var(--teal-light);
}
.policy-wrap h3 {
  font-size:1rem;
  color:var(--teal-dark);
  margin:24px 0 8px;
}
.policy-wrap p { margin-bottom:12px; }
.policy-wrap ul {
  margin:12px 0 16px 20px;
  list-style:disc;
}
.policy-wrap ul li { margin-bottom:6px; }
.policy-wrap a { color:var(--teal); text-decoration:underline; }
.policy-wrap a:hover { color:var(--teal-dark); }
.policy-contact {
  background:var(--sand);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px 28px;
  margin-top:16px;
  line-height:2;
}
.policy-contact a { color:var(--teal); }

/* ====================================================
   COOKIE CONSENT BANNER
   ==================================================== */
.cookie-banner {
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--teal-dark);
  z-index:9999;
  transform:translateY(100%);
  transition:transform 0.4s var(--ease);
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
}
.cookie-banner.visible { transform:translateY(0); }
.cookie-banner-inner {
  max-width:1200px;
  margin:0 auto;
  padding:18px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cookie-banner-text {
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex:1;
  color:rgba(255,255,255,.88);
  font-size:0.88rem;
  line-height:1.6;
}
.cookie-banner-text svg { flex-shrink:0; margin-top:2px; color:var(--teal); }
.cookie-banner-text p { margin:0; }
.cookie-banner-text a { color:#fff; text-decoration:underline; }
.cookie-banner-actions { display:flex; gap:10px; flex-shrink:0; }
.cookie-btn {
  padding:10px 22px;
  border-radius:50px;
  font-family:'Montserrat',sans-serif;
  font-size:0.82rem;
  font-weight:700;
  cursor:pointer;
  border:2px solid transparent;
  transition:all var(--trans);
  letter-spacing:0.05em;
}
.cookie-btn-accept {
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
}
.cookie-btn-accept:hover { background:var(--orange-dark); border-color:var(--orange-dark); }
.cookie-btn-decline {
  background:transparent;
  color:rgba(255,255,255,.75);
  border-color:rgba(255,255,255,.3);
}
.cookie-btn-decline:hover { border-color:#fff; color:#fff; }

/* ====================================================
   PAGE HERO (service / interior pages)
   ==================================================== */
.page-hero {
  position:relative;
  min-height:440px;
  overflow:hidden;
  background:var(--teal-dark);
}
.page-hero-bg {
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.page-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to right,
    rgba(8,40,58,.88) 0%,
    rgba(8,40,58,.70) 40%,
    rgba(8,40,58,.28) 75%,
    rgba(8,40,58,.10) 100%
  );
}
.page-hero-content {
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding:110px 30px 80px;
}
.page-hero .breadcrumb {
  color:rgba(255,255,255,.55);
  font-size:0.8rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:20px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.page-hero .breadcrumb a { color:rgba(255,255,255,.55); transition:color var(--trans); }
.page-hero .breadcrumb a:hover { color:var(--teal); }
.sp-icon-wrap {
  width:80px !important;
  height:80px !important;
  min-width:80px;
  min-height:80px;
  max-width:80px;
  max-height:80px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-lg);
  padding:14px;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.sp-icon-wrap img {
  width:100% !important;
  height:100% !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:contain;
  display:block;
}
.page-hero h1 { color:#fff; margin-bottom:14px; max-width:700px; }
.page-hero > .page-hero-content > p {
  color:rgba(255,255,255,.78);
  max-width:560px; font-size:1rem; margin-bottom:28px;
}
.page-hero-angle {
  line-height:0;
  background:#fff;
}
.page-hero-angle svg { display:block; width:100%; height:70px; }

/* ====================================================
   SPLIT SECTIONS
   ==================================================== */
.split-section {
  background:#fff;
  padding:80px 0;
}
.split-section.bg-sand { background:var(--sand); }
.split-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.split-inner.reverse { direction:rtl; }
.split-inner.reverse > * { direction:ltr; }
.split-photo {
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;
  background:var(--teal-light);
}
.split-photo img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.6s var(--ease);
  filter:brightness(0.93) saturate(1.08) contrast(1.02);
}
.split-photo:hover img { transform:scale(1.04); }
.split-content h2 { margin-bottom:16px; }
.split-content > p { margin-bottom:24px; }
.feature-list { display:flex; flex-direction:column; gap:10px; margin:0 0 28px; }
.feature-list li {
  display:flex; align-items:center; gap:12px;
  font-size:1rem; font-weight:600; color:var(--text);
}
.feature-list li::before {
  content:'';
  width:8px; height:8px; border-radius:50%;
  background:var(--teal); flex-shrink:0;
}

/* ====================================================
   FEATURE GRID SECTION
   ==================================================== */
.feature-grid-section {
  background:var(--sand);
  padding:80px 0 90px;
}
.feature-grid-angle-top {
  line-height:0;
  background:var(--sand);
}
.feature-grid-angle-top svg { display:block; width:100%; height:70px; }
.feature-grid-angle-bottom {
  line-height:0;
  background:var(--sand);
}
.feature-grid-angle-bottom svg { display:block; width:100%; height:70px; }
.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.feature-card {
  background:#fff;
  border-radius:var(--radius-lg);
  padding:28px 24px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:all var(--trans-slow);
}
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--teal-light); }
.fc-icon {
  width:52px; height:52px; margin-bottom:18px;
  background:var(--teal-light); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal-dark);
  transition:all var(--trans);
}
.feature-card:hover .fc-icon { background:linear-gradient(135deg, var(--teal-light), var(--orange-light)); color:var(--orange-dark); }
.fc-text h4 { font-size:0.98rem; font-weight:700; color:var(--teal-dark); margin-bottom:8px; }
.fc-text p { font-size:0.91rem; }

/* ====================================================
   PHOTO BREAK
   ==================================================== */
.photo-break {
  position:relative;
  overflow:hidden;
  min-height:360px;
}
.photo-break-bg {
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.photo-break-overlay {
  position:absolute; inset:0;
  background:linear-gradient(130deg, rgba(15,85,110,.9), rgba(0,168,182,.75));
}
.photo-break-inner {
  position:relative; z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  max-width:1200px;
  margin:0 auto;
  padding:80px 30px;
}
.photo-break-text { flex:1; }
.photo-break-text h2 { color:#fff; margin-bottom:14px; }
.photo-break-text p { color:rgba(255,255,255,.78); max-width:480px; }
.photo-break-stats { display:flex; gap:48px; flex-shrink:0; }
.pb-stat { text-align:center; }
.pb-stat .num {
  display:block;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800; color:#fff; line-height:1; margin-bottom:6px;
}
.pb-stat .label {
  color:rgba(255,255,255,.65);
  font-size:0.8rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
}
/* Photo-break badge list (replaces stat counters) */
.pb-badges {
  display:flex;
  flex-direction:column;
  gap:12px;
  flex-shrink:0;
  min-width:260px;
}
.pb-badge {
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  border-radius:50px;
  padding:13px 22px;
  color:#fff;
  font-size:0.9rem;
  font-weight:600;
  backdrop-filter:blur(6px);
  transition:background var(--trans);
}
.pb-badge:hover { background:rgba(255,255,255,.22); }
.pb-badge svg { color:#fff; flex-shrink:0; width:20px; height:20px; min-width:20px; }

/* ====================================================
   RELATED SERVICES
   ==================================================== */
.related-services { background:#fff; padding:80px 0 100px; }
.related-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.related-card {
  background:var(--sand);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  border:1px solid var(--border);
  transition:all var(--trans);
  text-align:center;
  display:block;
}
.related-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--teal-light); }
.related-card-icon {
  width:52px; height:52px;
  margin:0 auto 16px;
  background:var(--teal-light);
  border-radius:var(--radius);
  padding:12px;
  transition:transform var(--trans);
  overflow:hidden;
}
.related-card-icon img { width:100%; height:100%; object-fit:contain; display:block; }
.related-card:hover .related-card-icon { transform:scale(1.1) rotate(-4deg); }
.related-card h4 { font-size:0.97rem; margin-bottom:8px; color:var(--teal-dark); }
.related-card p { font-size:0.89rem; margin-bottom:14px; }

/* ====================================================
   ABOUT PAGE
   ==================================================== */
.about-story { background:#fff; padding:80px 0; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.timeline { display:flex; flex-direction:column; gap:0; margin-top:24px; }
.timeline-item { display:flex; gap:20px; padding-bottom:28px; position:relative; }
.timeline-item::before {
  content:''; position:absolute;
  left:17px; top:36px; bottom:0;
  width:2px; background:var(--border);
}
.timeline-item:last-child::before { display:none; }
.tl-dot {
  width:36px; height:36px; border-radius:50%;
  background:var(--teal-light); border:3px solid var(--teal);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:0.65rem; font-weight:800; color:var(--teal-dark);
}
.tl-dot--now {
  background:var(--teal); color:#fff; border-color:var(--teal-dark);
}
.tl-content strong { display:block; font-size:1rem; color:var(--teal-dark); margin-bottom:4px; }
.tl-content p { font-size:0.97rem; }
.value-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.value-card { background:var(--sand); border-radius:var(--radius-lg); padding:26px; border:1px solid var(--border); transition:all var(--trans); }
.value-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.value-card-icon {
  width:48px; height:48px; margin-bottom:14px;
  background:var(--teal-light); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal-dark);
}
.value-card h4 { font-size:0.97rem; font-weight:700; margin-bottom:8px; }
.value-card p { font-size:0.91rem; }

/* ====================================================
   CONTACT PAGE
   ==================================================== */
.contact-section { background:#fff; padding:80px 0 100px; }
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:start; }


.contact-info-cards { display:flex; flex-direction:column; gap:16px; margin:28px 0; }
.contact-info-card {
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 22px; background:var(--sand);
  border-radius:var(--radius-lg); border:1px solid var(--border);
}
.cic-icon {
  width:44px; height:44px; background:var(--teal-light);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--teal-dark);
}
.cic-text strong { display:block; font-size:0.93rem; color:var(--teal-dark); margin-bottom:3px; }
.cic-text span { font-size:0.91rem; color:var(--text-muted); }
.cic-text a { color:var(--text-muted); transition:color var(--trans); }
.cic-text a:hover { color:var(--teal); }
.map-embed { border-radius:var(--radius-lg); overflow:hidden; margin-top:20px; }
.map-embed iframe { width:100%; height:240px; border:none; display:block; }
.contact-form-wrap {
  background:var(--sand);
  border-radius:var(--radius-xl);
  padding:48px 44px;
  border:1px solid var(--border);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-group label {
  font-size:0.8rem; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--teal-dark);
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:13px 16px;
  border:2px solid var(--border); border-radius:var(--radius);
  font-family:'Montserrat',sans-serif; font-size:1rem;
  color:var(--text); background:#fff;
  transition:border-color var(--trans), box-shadow var(--trans);
  outline:none;
  -webkit-appearance:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,168,182,.1); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-submit .btn { width:100%; justify-content:center; }
.form-success { display:none; text-align:center; padding:40px 20px; }
.form-success .success-icon { font-size:3rem; margin-bottom:16px; }
.form-success h3 { margin-bottom:10px; }

/* Calendly widget card */
.contact-form-wrap--calendly {
  padding:0;
  overflow:hidden;
}

/* Branded header above the widget */
.cal-card-header {
  background:linear-gradient(135deg, var(--teal-dark) 0%, var(--teal-mid) 100%);
  padding:32px 36px 28px;
  color:#fff;
}
.cal-card-header .section-subtitle {
  color:var(--orange);
  opacity:1;
}
.cal-card-header h3 {
  color:#fff;
  margin:8px 0 10px;
  font-size:1.35rem;
}
.cal-card-header p {
  color:rgba(255,255,255,.78);
  font-size:0.93rem;
  margin:0;
}

/* Widget container with badge overlay */
.cal-widget-wrap {
  position:relative;
  background:#fdf6ee;
}

/* Covers the Calendly branding badge in the top-right corner of the iframe */
.cal-badge-cover {
  position:absolute;
  top:0;
  right:0;
  width:200px;
  height:56px;
  background:#fdf6ee;
  z-index:10;
  pointer-events:none;
}

.cal-widget-wrap .calendly-inline-widget {
  display:block;
}

/* ====================================================
   SCROLL ANIMATIONS
   ==================================================== */
.fade-up {
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-left {
  opacity:0;
  transform:translateX(-40px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-left.visible { opacity:1; transform:translateX(0); }
.fade-right {
  opacity:0;
  transform:translateX(40px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-right.visible { opacity:1; transform:translateX(0); }

[data-delay="1"] { transition-delay:0.1s !important; }
[data-delay="2"] { transition-delay:0.2s !important; }
[data-delay="3"] { transition-delay:0.3s !important; }
[data-delay="4"] { transition-delay:0.4s !important; }
[data-delay="5"] { transition-delay:0.5s !important; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 900px) {
  .photo-break-inner { flex-direction:column; gap:32px; padding:60px 30px; }
  .pb-badges { min-width:unset; width:100%; flex-direction:row; flex-wrap:wrap; }
  .pb-badge { flex:1 1 calc(50% - 6px); min-width:180px; }
}

@media (max-width: 1024px) {
  .accordion-inner { grid-template-columns:1fr; gap:48px; }
  .accordion-visual { position:static; }
  .difference-inner { grid-template-columns:1fr; gap:48px; }
  .diff-cards-grid { grid-template-columns:1fr 1fr; }
  .faq-inner { grid-template-columns:1fr; gap:48px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .related-grid { grid-template-columns:repeat(2,1fr); }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .about-grid { grid-template-columns:1fr; gap:48px; }
  .contact-grid { grid-template-columns:1fr; gap:48px; }
  .slider-arrow { width:40px; height:40px; font-size:1rem; }
  .slider-arrow.prev { left:12px; }
  .slider-arrow.next { right:12px; }
  .hero-content { padding:0 68px 60px; }
}

@media (max-width: 768px) {
  .container { padding:0 20px; }
  .main-nav { display:none; }
  .hamburger { display:flex; }
  .hero-slider { min-height:500px; max-height:700px; }
  .hero-content { padding:0 30px 60px; }
  .hero-content h1 { font-size:clamp(1.8rem,6vw,2.4rem); }
  .hero-content p { font-size:0.97rem; }
  .hero-actions { gap:10px; }
  .btn { padding:12px 24px; }
  .btn-lg { padding:14px 30px; }
  .services-row { flex-direction:column; align-items:stretch; }
  .service-card { max-width:100%; }
  .testimonials-grid { grid-template-columns:1fr; }
  .split-inner { grid-template-columns:1fr; gap:40px; }
  .split-inner.reverse { direction:ltr; }
  .photo-break-stats { gap:28px; flex-wrap:wrap; justify-content:center; }
  .photo-break-bg { background-attachment:scroll; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .credentials-inner { grid-template-columns:1fr; }
  .credential-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.12); width:100%; justify-content:center; padding:20px 24px; }
  .credential-item--stack { padding:16px 24px; }
  .credential-item:last-child { border-bottom:none; }
  .slider-arrow { display:none; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .related-grid { grid-template-columns:1fr 1fr; }
  .dv-cards-row { grid-template-columns:1fr; }
  .top-bar-left .hide-sm { display:none; }
  .top-bar-sep.hide-sm { display:none; }
  .contact-form-wrap { padding:28px 20px; }
  .form-row { grid-template-columns:1fr; }
}

@media (max-width: 480px) {
  .stats-bar { grid-template-columns:1fr 1fr; }
  .pb-badges { flex-direction:column; }
  .pb-badge { flex:1 1 100%; white-space:normal; }
  .diff-cards-grid { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr; }
  .cta-actions { flex-direction:column; align-items:center; }
  .hero-actions { flex-direction:column; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .value-grid { grid-template-columns:1fr; }
}