/* ===============================
   Onewell — Global Theme Styles
   Keep this clean and readable.
   =============================== */

/* Inter (self-hosted, variable) */
@font-face{
  font-family: "Inter Variable";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Inter Variable";
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Palette & constants */
:root{
  --bg:#F3F6FA;
  --brand:#12161C;
  --card:#FFFFFF;
  --border:#E2E8F0;
  --text:#1E293B;
  --muted:#64748B;
  --acc:#2E6FBE;
  --acc-deep:#1F5CA3;
  --nav-h:64px; /* desktop navbar height for anchor offsets */
}
@media (max-width:575.98px){ :root{ --nav-h:56px; } }

/* Global */
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter Variable", Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
.text-muted-2{color:var(--muted)!important}
.mt-nav{margin-top:72px}

/* Links (used on contact page) */
.link-accent{color:var(--acc);text-decoration:none}
.link-accent:hover{color:var(--acc-deep);text-decoration:underline}

/* Surfaces */
.bg-brand{
  background:rgba(18,22,28,.92)!important;
  /* Safari support for glass effect */
  -webkit-backdrop-filter:saturate(120%) blur(4px);
  backdrop-filter:saturate(120%) blur(4px);
}
.card-surface{background:var(--card);border:1px solid var(--border)}
.bg-subtle{background:linear-gradient(180deg,#F8FAFC 0%,#F3F6FA 100%)}
.bg-cta-soft{background:#E9EEF6}

/* Buttons — refined sizing (professional, not oversized) */
.btn{ padding:.5rem .9rem; font-weight:600; letter-spacing:.2px; }
.btn-lg{ padding:.6rem 1.1rem; font-size:1rem; }  /* toned down */
.btn-sm{ padding:.35rem .6rem; font-size:.875rem; }

.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--acc);
  --bs-btn-border-color:var(--acc);
  --bs-btn-hover-bg:var(--acc-deep);
  --bs-btn-hover-border-color:var(--acc-deep);
  --bs-btn-active-bg:var(--acc-deep);
}

/* Section title underline */
.section-title{
  display:inline-block;
  padding-bottom:.3rem;
  border-bottom:3px solid var(--acc);
  font-weight:800;
  letter-spacing:.02em;
}

/* Process step pills */
.process .step-num{
  width:40px;height:40px;border-radius:999px;
  display:grid;place-items:center;
  background:#F1F5F9;color:var(--text);
  border:1px solid var(--border);font-weight:800;
}

/* ===============================
   Navbar brand (SVG mark + live text)
   =============================== */
.navbar .navbar-brand{ gap:.6rem; }
.brand-mark{ height:44px; width:auto; display:block; }
@media (max-width:991.98px){ .brand-mark{ height:38px; } }
@media (max-width:575.98px){ .brand-mark{ height:32px; } }

.brand-text{
  color:#fff;
  font-weight:700;
  line-height:1;
  font-size:clamp(18px, 1.8vw, 22px);
  letter-spacing:.2px;
  white-space:nowrap;
}

/* Neutralize any legacy .brand-logo height constraints */
.brand-logo{ height:auto !important; }

/* Slightly taller navbar for breathing room */
.navbar{ padding-top:.6rem; padding-bottom:.6rem; }

/* Professional nav links with blue bar on hover/active only (desktop/tablet) */
.navbar-dark .navbar-nav .nav-link{
  color:rgba(255,255,255,.9);
  font-weight:600;
  font-size:clamp(14px, 1.2vw, 16px);
  padding:.5rem .75rem;
  position:relative;
  transition:color .18s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus{
  color:#fff;
}
/* underline bar (hidden by default) */
.navbar-dark .navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  left:.75rem; right:.75rem; bottom:.35rem;
  height:2px;
  background:transparent;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease, background .18s ease;
}
/* show blue bar on hover or when active */
.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link:focus::after,
.navbar-dark .navbar-nav .nav-link.active::after{
  background:var(--acc);
  transform:scaleX(1);
}

/* Mobile nav: underline exactly the text (no overhang) */
@media (max-width: 991.98px){
  .navbar-dark .navbar-nav .nav-link{
    display:inline-block;
    white-space:nowrap;
    padding:.5rem .75rem;

    text-decoration: underline;
    text-decoration-color: transparent;   /* hidden by default */
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
    transition: text-decoration-color .18s ease, color .18s ease;
  }
  .navbar-dark .navbar-nav .nav-link::after{ display:none; } /* hide pseudo bar */
  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link:focus,
  .navbar-dark .navbar-nav .nav-link.active{
    text-decoration-color: var(--acc);
  }
}

/* Footer mark */
.footer-mark{ height:40px; width:auto; display:inline-block; opacity:.98; }

/* ===============================
   HERO — full viewport carousel
   =============================== */
.hero-flush{margin-top:0}
.hero-carousel{position:relative}
.hero-carousel .hero-img{
  height:100vh;           /* fallback */
  height:100svh;          /* mobile-friendly viewport */
  min-height:520px;
  object-fit:cover; object-position:center; display:block;
  filter:contrast(1.05) saturate(1.05);
}

/* Readability layer across all slides */
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,10,15,.50) 0%, rgba(6,10,15,.35) 40%, rgba(6,10,15,.20) 100%);
  z-index:1; pointer-events:none;
}

/* Centered caption (same on every slide) */
.hero-caption{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#F8FAFF;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  pointer-events:none; /* keep dots clickable */
}
.hero-caption .container{display:flex; justify-content:center}
.hero-caption .caption-panel{
  max-width:980px; margin:0 auto;
  padding:1rem 1.5rem;
  background:rgba(10,14,20,.26);
  /* Safari support for the subtle glass panel */
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
  border-radius:.75rem;
}
.hero-caption .lead{color:#EAF1FF}

/* Scroll CTA — centered just above the carousel dots */
.hero-scroll{
  position:absolute; left:50%; bottom:56px; transform:translateX(-50%);
  z-index:9;
}
.scroll-cta{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border-radius:999px;
  color:#F8FAFF; background:rgba(10,14,20,.4);
  /* Safari support for the pill’s blur */
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
  border:1px solid rgba(255,255,255,.25);
  text-decoration:none; pointer-events:auto;
}
.scroll-cta:hover{ background:rgba(10,14,20,.5); }
.scroll-cta svg{ display:block; }
@media (max-width:420px){ .scroll-cta span{ display:none; } }

/* Dots styling + ensure above scrim */
.hero-carousel .carousel-indicators{ z-index:8; }
.hero-carousel .carousel-indicators [data-bs-target]{
  width:10px;height:10px;border-radius:50%;
}

/* Hide arrows; keep dot indicators only */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{
  display:none !important;
}

/* ===============================
   Contact — Google Map fill
   =============================== */
.map-card{display:flex;flex-direction:column}
.map-card .map-embed{position:relative;flex:1;min-height:520px}
.map-card .map-embed iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}

/* ===============================
   Anchor offset (fallback for hash links)
   =============================== */
#services{ scroll-margin-top: calc(var(--nav-h) + 28px); }

/* ===============================
   Utilities
   =============================== */
/* Full-viewport vertical centering (used on thanks page) */
.vh-center{
  min-height:100vh;
  min-height:100svh;          /* safer on mobile browsers */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Accessibility focus */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}