body {
  font-family: 'Poppins', sans-serif;
}

nav {
  padding: 1.5rem 2rem;  
  background: linear-gradient(to right, #ffffff, #f7f9fc);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  position: relative;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2rem;
}

.nav-left,
.nav-right {
  flex: 1;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.logo {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 1.10rem;
  transition: color 0.2s ease;
}

.nav-center a:hover {
  color: #0077ff;
}

.nav-left a:hover {
  color: #000000;
}

.logo {
  font-weight: bold;
  font-size: 2.25rem;
  color: #0077ff;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.logo:hover .highlight-logo {
  color: black;
}

.eye-wrapper {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle; /* aligns with text baseline */
  position: relative;
  transform: translateY(-2.5px); 
}

.recording-dot {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  animation: blink 1.5s infinite;
  z-index: 2;
}

@keyframes blink {
  0%, 49% {
    visibility: hidden;
  }
  50%, 100% {
    visibility: visible;
  }
}

.eye-icon {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.eyelid {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.2s ease-in-out;
}

.logo:hover .eyelid {
  transform: scaleY(1);
}

/* Dropdown wrapper */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown content (initially hidden) */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  border-radius: 4px;
  min-width: 90px;

  /* Fade + slide-down setup */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px); /* slide up by default */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Dropdown links */
.dropdown-content a {
  width: 100%;               /* ✅ Force it to fill parent */
  box-sizing: border-box;    /* ✅ Ensure padding doesn't overflow width */
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: black;
  white-space: nowrap;
  margin: 0;
}

.dropdown-content a:hover {
  background-color: #f0f0f0;
}

/* On hover: fade in and slide down */
.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* slide down into position */
}


.slogan-section {
  text-align: left;
  padding: 4rem 2rem;
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  max-width: 820px;  
  margin: 2rem;     /* Centers the block horizontally */
}

.slogan-title {
  font-size: 3rem;
  font-weight: 800;
  color: #0a1e40;
  margin-bottom: 0.75rem;
  line-height: 1;          /* Tighter line spacing */
}

.slogan-title.second-line {
  margin-top: -0.25rem; /* pull it upward */
}

.slogan-sub {
  font-size: 1.25rem;
  font-weight: 400;
  color: #444;
}

.highlight-you {
  color: #0077ff;
  font-weight: 800;
}

.highlight-logo {
  color: #004799;
}

.cta-button {
  position: relative;
  display: inline-block;
  padding: 2.5rem 8rem;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1.2rem;
  background: linear-gradient(to right, #0059ff, #71afff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1;
  margin-top:1rem;

  /* transition for movement and hover */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Pseudo-element for reverse gradient */
.cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, #0059ff, #71afff); /* reversed gradient */
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: -1;
}

/* On hover: fade gradient & move button up */
.cta-button:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.cta-button:hover::before {
  opacity: 1;
}

.site-footer {
  background-color: #eaf2fa;
  padding: 3rem 2rem 1rem;
  font-family: 'Poppins', sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-column {
  flex: 1;
  min-width: 220px;
}

.footer-column h3 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1a1a1a;
}

.footer-column p,
.footer-column a {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  text-decoration: none;
}

.footer-logo {
  width: 160px;
  margin-bottom: 1rem;
}

.footer-badge {
  width: 90px;
  margin: 0.5rem 0.5rem 0 0;
}

.footer-bottom {
  border-top: 1px solid #ccc;
  margin-top: 2rem;
  padding-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #555;
}

.social-icons {
  margin-top: 0.5rem;
}

.social-icons i {
  margin: 0 0.5rem;
  font-size: 1.2rem;
  color: #1a1a1a;
  transition: color 0.2s;
}

.social-icons i:hover {
  color: #0077ff;
}

.slogan-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 2rem;
  gap: 2rem;
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  flex-wrap: wrap;
}

.slogan-section {
  max-width: 600px;
  flex: 1;
}

.slogan-image {
  flex: 1;
  max-width: 500px;
}

.slogan-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.slogan-hero {
  margin-top: 1px; 
  padding: 4rem 2rem;
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
}

.hero-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
}

.hero-text {
  flex: 1;
  min-width: 300px;
}

.hero-images {
  position: relative;
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  justify-content: flex-end;
}

.main-img {
  width: 100%;
  border-radius: 10px;
}

.overlay-img {
  position: absolute;
  bottom: -30px;
  left: -60px;
  width: 70%;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* Initial hidden state */
.animate-on-load {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

/* Final visible state */
.animate-on-load.visible {
  opacity: 1;
  transform: translateY(0);
}

.about-section {
  padding: 2rem 2rem;
  background-color: #f9fbfd;
  text-align: center;
  width:100%;
  margin: 1px auto;
  padding-top: 5rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0a1e40;
  margin-bottom: 2rem;
}

.section-text {
  font-size: 1.2rem;
  color: #444;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

.offerings-grid,
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem auto;
  max-width: 70%;
}

.offering,
.pillar {
  background: #ffffff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease
}

.offering-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 1rem;
  color: #0077ff;
}

.offering:hover,
.pillar:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.about-section-button {
    margin-top: 3rem;
}


.contact-hero {
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  padding: 6rem 2rem;
  width: 100%;
}

.contact-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contact-info {
  flex: 1;
  min-width: 300px;
}

.contact-slogan {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0a1e40;
  margin-bottom: 2rem;
}

.contact-details p {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 1rem;
}

.contact-image {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.contact-image img {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 10px;
}

.contact-button {
  margin-top: 20px;
}


.quote-hero {
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  padding: 2rem 2rem;
}

.quote-container {
  max-width: 1000px;
  margin: 0 auto;
}

.quote-slogan {
  text-align: center;
  font-size: 2.75rem;
  font-weight: 800;
  color: #0a1e40;
  margin-bottom: 3rem;
}

.quote-form {
  background-color: #ffffff;
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.form-group {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
}

.form-group.form-full {
  flex: 1 1 100%;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.form-group input,
.form-group textarea {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.checkbox-group,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.checkbox-group label,
.radio-group label {
  font-weight: 400;
  font-size: 1rem;
  color: #333;
}

.required-label::after {
  content: " *";
  color: #0077ff;
  font-weight: 700;
}

.form-group select {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

/* Initial state */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}

.animate-on-scroll.from-left {
  transform: translateX(-60px);
}

.animate-on-scroll.from-right {
  transform: translateX(60px);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.contact-map {
  margin-top: 1rem;
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 8px;
}

.logo-and-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.securo-logo {
  max-width: 100%;
  height: auto;
}

.contact-map {
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 8px;
}

.camera-hero {  
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  padding: 4rem 2rem;
}

.camera-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}

.camera-text {
  flex: 1;
  min-width: 300px;
}

.camera-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0a1e40;
  margin-bottom: 1rem;
}

.camera-sub {
  font-size: 1.15rem;
  color: #444;
  margin-bottom: 1.5rem;
}

.camera-features {
  list-style: none;
  padding-left: 0;
  margin-bottom: 2rem;
}

.camera-features li {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: #333;
}

.camera-image {
  flex: 1;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.camera-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.camera-image img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.camera-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.no-margin-bottom {
  margin-bottom: 0;
}
/* Scroll animation */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.camera-table-section {
  background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
  text-align: center;
  margin: auto;
  padding: 20px;
}

.camera-table-container {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 1rem;
}

.camera-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 1rem;
}

.camera-table th,
.camera-table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

.camera-table th {
  font-weight: 600;
}

.camera-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.camera-table tr:hover {
  background-color: #eef6ff;
}

/* Fade-in animation */
.animate-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Star hover shimmer */
.camera-table td:hover {
  background-color: #eaf4ff;
  transition: background-color 0.3s ease;
}

.signup-form {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.signup-form .form-group {
  margin-bottom: 20px;
}

.signup-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.signup-form input {
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  transition: border 0.2s ease;
}

.signup-form input:focus {
  border-color: #007bff;
  outline: none;
}

.signup-form .cta-button {
  background-color: #0c2340;
  color: #fff;
  padding: 12px 24px;
  border: none;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.signup-form .cta-button:hover {
  background-color: #163f75;
}

.nav-center a {
  position: relative;
  overflow: hidden;
}

.nav-center a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #0077ff;
  transition: width 0.3s ease;
}

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

/* ===== Floating Mascot (position slightly higher) ===== */
.mascot {
  position: fixed;
  right: 22px;
  top: 75%;                 /* moved up from 32vh; tweak 22–28vh to taste */
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2000;
  transform: translateY(10px);
  opacity: 0;
  animation: mascot-in 400ms cubic-bezier(.2,.8,.2,1) forwards 800ms; /* gentler delay */
}

@keyframes mascot-in { to { transform: translateY(0); opacity: 1; } }

/* Eye (camera) */
.mascot-eye-link {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
  transition: transform .2s ease;
  order: 0;                  /* bubble is left via order:-1 */
}
.mascot-eye-link:hover { transform: scale(1.04); }

.mascot-eye-icon { width: 100%; height: 100%; display: block; }

/* Recording dot (RIGHT side of lens) */
.mascot-recording-dot {
  position: absolute;
  top: 12%;
  right: 12%;
  left: auto;
  width: 16%;
  height: 16%;
  background: #ff2b2b;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,43,43,.15);
  animation: mascot-blink 1.5s infinite;
  z-index: 2;
}
@keyframes mascot-blink { 0%,49%{opacity:0} 50%,100%{opacity:1} }

/* Bubble (LEFT of the eye) */
.mascot-bubble {
  position: relative;
  order: -1;
  max-width: 320px;
  padding: 14px 16px;
  background: #fff;
  color: #0a1e40;
  text-decoration: none;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  line-height: 1.35;
  font-size: .98rem;
  transition: box-shadow .2s ease, opacity .25s ease, transform .25s ease;
  overflow: visible;
}
.mascot-bubble:hover { box-shadow: 0 12px 28px rgba(0,0,0,.14); }

/* Rounded cartoon tail pointing RIGHT */
.mascot-bubble::after {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  z-index: 1;
}
.mascot-bubble::before {
  background: rgba(0,0,0,.06);
  filter: blur(6px);
  right: -16px;
  z-index: 0;
}

/* Close (X) */
.mascot-close {
  position: absolute;
  top: -8px; right: -8px;
  width: 24px; height: 24px;
  border: none; border-radius: 999px;
  background: #ffffff; color: #0a1e40;
  font-size: 16px; line-height: 24px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .15s ease, background .15s ease;
  z-index: 1;
}
.mascot-close:hover { transform: scale(1.05); background: #f4f7fb; }

/* Hidden whole mascot (kept for quote page) */
.mascot.is-hidden { display: none !important; }

/* --- Collapsed state: bubble hidden, eye stays --- */
.mascot.is-collapsed .mascot-bubble {
  opacity: 0;
  transform: translateX(6px) scale(.98);
  pointer-events: none;
}

/* Mobile positioning */
@media (max-width: 640px) {
  .mascot { top: auto; bottom: 16px; right: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mascot { animation: none; opacity: 1; transform: none; }
  .mascot-eye-link { transition: none; }
}

/* Right side layout */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Phone pill */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f2f6ff;
  color: #0a1e40;
  border: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: background .2s ease, transform .08s ease;
}
.nav-pill:hover { background: #e8f1ff; }
.nav-pill:active { transform: translateY(0.5px); }

/* Primary CTA */
.btn-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  background: linear-gradient(90deg, #0a5bff, #5aa8ff);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(10,91,255,0.25);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-quote:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10,91,255,0.32);
}
.btn-quote:active { transform: translateY(0); filter: brightness(.96); }

/* Trust pill */
.nav-trust { display: flex; align-items: center; }
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f8fafc;
  color: #2a3b57;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.06);
  line-height: 1;
}

/* Small SVG icons inherit text color */
.icon { width: 16px; height: 16px; fill: currentColor; }

/* Responsive tweaks */
.hide-sm { }
@media (max-width: 900px) {
  .hide-sm { display: none; }       /* hide long text and trust pill on small screens */
  .nav-pill { padding: 8px; }       /* icon-only phone button */
}

/* Optional: slightly tighter nav on scroll */
nav.nav-compact .btn-quote { padding: 8px 12px; border-radius: 8px; }


/* Make the right region a centered flex cell */
.nav-right {
  flex: 1;                                  /* ensure it has space like .nav-left */
  display: flex;
  align-items: center;
  justify-content: center;                   /* center the actions in the right area */
  gap: 0;                                    /* outer gap not needed */
}

/* Actions: small gap so they sit snugly together */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;                                  /* tighten spacing between phone & CTA */
}

/* Optional: keep them from drifting too far inward on very wide screens */
@media (min-width: 1400px) {
  .nav-right { padding-right: 24px; }        /* slight bias toward the edge on huge screens */
}

/* Slightly tighter paddings (same as Option A if you want them) */
.nav-pill  { padding: 8px 10px; }
.btn-quote { padding: 9px 12px; }
.nav-pill.nav-phone {
  margin-right: 16px; /* or however much spacing you want */
}


.tooltip-icon {
  display: inline-block;
  background-color: #0077ff;
  color: white;
  font-size: 0.8rem;
  border-radius: 50%;
  width: 1.2rem;
  height: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  cursor: help;
  margin-left: 8px;
  position: relative;
}

.tooltip-icon:hover .tooltip-text,
.tooltip-icon:focus .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 100;
  transition: opacity 0.3s ease;
  font-size: 0.85rem;
  width: max-content;
  max-width: 250px;
  white-space: normal;     /* allow multi-line */
  word-wrap: break-word;
  max-width: 250px;
}

.tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.form-group {
  position: relative; /* needed for tooltip positioning */
  overflow: visible;  /* allow tooltips to break out */
}

.form-grid {
  overflow: visible;
}

.login-footer {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.95rem;
}

.login-footer a {
  color: #0077ff;
  font-weight: 600;
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}
/* ========== Base + Reset ========== */
*, *::before, *::after {
  box-sizing: border-box;       /* 100% widths include padding + border */
}

:root {
  --brand: #0077ff;
  --bg: #f5f9ff;
  --card: #ffffff;
  --text: #0a1c3d;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}

/* ========== Section + Container ========== */
.auth-section {
  display: flex;
  justify-content: center;      /* center the card horizontally */
  padding: 60px 20px;
}

.auth-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;               /* belt-and-suspenders centering */
  background: var(--card);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.1);
}

/* ========== Header Text ========== */
.auth-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  margin: 0 0 10px 0;
}

.auth-subtitle {
  font-size: 1rem;
  color: #666;
  text-align: center;
  margin: 0 0 30px 0;
}

/* ========== Form Layout ========== */
.auth-form {
  display: flex;
  flex-direction: column;
}

/* Django {{ form.as_p }} wraps each field in a <p> */
.auth-form p {
  margin: 0 0 20px 0;           /* reset any side margins */
  text-indent: 0;               /* safety reset */
}

/* Labels */
.auth-form label {
  display: block;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 6px 0;
  text-align: left;
}

/* Inputs / selects / textareas */
.auth-form input,
.auth-form select,
.auth-form textarea {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

/* Focus state for accessibility + consistent outline */
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.15);
}

/* Validation / error list from Django */
.auth-form .errorlist {
  margin: 6px 0 0 0;
  padding: 0;
  list-style: none;
  color: #b00020;
  font-size: 0.875rem;
}

/* ========== Buttons ========== */
.auth-form .cta-button {
  display: inline-block;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  font-weight: 600;
  background: linear-gradient(to right, var(--brand), #3e84ff);
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
}

.cta-button:hover {
  filter: brightness(0.95);
}

/* ========== Footer ========== */
.auth-footer {
  text-align: center;
  margin-top: 20px;
}

.auth-footer a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* ========== Small Screens ========== */
@media (max-width: 480px) {
  .auth-container { padding: 28px; }
  .auth-title { font-size: 1.75rem; }
}







/* -------- Container & grid -------- */
.profile-container {
  max-width: 1120px;
  margin: 40px auto;
  padding: 0 20px;
}

.profile-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
  align-items: start;
}

/* -------- Cards -------- */
.profile-card,
.quotes-card,
.quote-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.08);
}

.profile-card { padding: 24px; }
.quotes-card  { padding: 24px; }

.quote-card {
  padding: 18px 20px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 123, 255, 0.12);
}

/* -------- Profile header -------- */
.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.avatar {
  width: 64px; height: 64px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand, #0077ff), #3e84ff);
  color: #fff; font-weight: 800; font-size: 1.5rem;
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(0, 119, 255, 0.3);
}

.profile-name {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: #0a1c3d;
}

.profile-tagline {
  margin: 2px 0 0 0;
  color: #6b7280;
  font-size: .95rem;
}

/* -------- Contact rows -------- */
.profile-contact { margin-top: 14px; }
.contact-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid #eef3ff; border-radius: 12px;
  background: #f8fbff; margin-bottom: 10px;
}
.contact-label { color: #475569; font-weight: 600; }
.contact-value { color: #0a1c3d; text-decoration: none; }
.contact-value:hover { text-decoration: underline; }

/* -------- Actions & buttons -------- */
.profile-actions { display: flex; gap: 12px; margin-top: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 12px; font-weight: 600;
  border: 0; cursor: pointer; text-decoration: none;
  transition: filter .15s ease;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(90deg, var(--brand, #0077ff), #3e84ff);
  box-shadow: 0 6px 16px rgba(0, 119, 255, 0.25);
}
.btn-outline {
  background: #fff;
  color: var(--brand, #0077ff);
  border: 1px solid rgba(0, 119, 255, 0.25);
}
.btn-link {
  background: transparent; color: var(--brand, #0077ff);
  padding: 0; border-radius: 8px;
}
.btn:hover { filter: brightness(.96); }

/* -------- Stats -------- */
.profile-stats {
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.stat {
  background: #f5f9ff; border-radius: 12px; padding: 12px; text-align: center;
}
.stat-number { font-weight: 800; font-size: 1.1rem; color: #0a1c3d; }
.stat-label  { font-size: .8rem; color: #64748b; }

/* -------- Quotes list -------- */
.quotes-header h2 {
  margin: 0 0 12px 0; font-size: 1.25rem; font-weight: 800; color: #0a1c3d;
}
.quote-list { display: grid; gap: 12px; }

.quote-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.date { color: #65758b; font-size: .9rem; }

.quote-excerpt {
  margin: 0 0 10px 0; color: #334155; line-height: 1.5;
}

/* Status chips (map your statuses to these slug classes) */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: .75rem;
  background: #f1f5ff; color: #0a1c3d; border: 1px solid rgba(0,119,255,.15);
}
.status--new,
.status--open,
.status--submitted { background: #eef6ff; color: #0b63ce; }

.status--in-review,
.status--reviewing { background: #fff7ed; color: #b45309; }

.status--scheduled,
.status--in-progress { background: #f0fdf4; color: #15803d; }

.status--completed,
.status--approved { background: #ecfdf5; color: #047857; }

.status--declined,
.status--rejected { background: #fef2f2; color: #b91c1c; }

/* -------- Empty state -------- */
.empty-state {
  text-align: center; padding: 40px 12px; border: 2px dashed #e5efff;
  border-radius: 16px; background: #fbfdff;
}
.empty-state h3 { margin: 0 0 6px 0; font-weight: 800; color: #0a1c3d; }
.empty-state p { margin: 0 0 16px 0; color: #6b7280; }

/* -------- Responsive -------- */
@media (max-width: 960px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .profile-actions { flex-direction: column; }
}


/* replace your current .contact-row and value rules */
.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;                 /* always keep space between label/value */
  padding: 10px 12px;
  border: 1px solid #eef3ff;
  border-radius: 12px;
  background: #f8fbff;
}

/* Label stays as-is */
.contact-label { 
  color: #475569; 
  font-weight: 600; 
  white-space: nowrap;
}

/* Value is allowed to shrink and ellipsize on one line */
.contact-value {
  margin-left: auto;         /* push to the right */
  min-width: 0;              /* IMPORTANT: allow shrinking inside flex */
  text-align: right;
  white-space: nowrap;       /* keep one line */
  overflow: hidden;          /* clip overflow */
  text-overflow: ellipsis;   /* show … when too long */
}


/* Keep status + cancel button on one row with spacing */
.status-and-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Inline form so the button sits beside the chip */
.inline-cancel-form { display: inline; }

/* Ghost/outline cancel button that matches your aesthetic */
.btn-ghost.btn-cancel {
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  background: #fff;
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.25);
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn-ghost.btn-pay {
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  background: #fff;   
  color: #0062d1;
  border: 1px solid rgba(0, 45, 143, 0.25);
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn-ghost.btn-pay:hover {
  background: #fff5f5;
  border-color: rgba(0, 148, 247, 0.45);
}
.btn-ghost.btn-cancel:hover {
  background: #fff5f5;
  border-color: rgba(185, 28, 28, 0.45);
}

/* Add a red style for the new status chip */
.status--cancelled {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, .2);
}


/* ===== Modal ===== */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 28, 61, 0.55);
  backdrop-filter: blur(1px);
}

.modal__content {
  position: relative;
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
  transform: translateY(10px) scale(.98);
  transition: transform .2s ease;
}
.modal.is-open .modal__content { transform: translateY(0) scale(1); }

.modal__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #fff5f5;
  margin-bottom: 12px;
}

#cancel-modal-title {
  margin: 0 0 6px 0;
  font-weight: 800; color: #0a1c3d;
}

.modal__text { margin: 0 0 16px 0; color: #475569; }

.modal__actions {
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Button additions to match your system */
.btn-danger {
  color: #fff;
  background: linear-gradient(90deg, #ef4444, #dc2626);
  border: 0;
  box-shadow: 0 6px 16px rgba(220, 38, 38, .2);
}
.btn-danger:hover { filter: brightness(.96); }  

.btn-ghost.btn-cancel {
  padding: 6px 10px; border-radius: 10px; font-weight: 700;
  background: #fff; color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.25);
}
.btn-ghost.btn-cancel:hover {
  background: #fff5f5; border-color: rgba(185, 28, 28, 0.45);
}

/* Keep status + cancel tight */
.status-and-actions { display: inline-flex; align-items: center; gap: 10px; }


/* ===== Panels carousel ===== */
.panel-carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden; /* hide overflow so arrows sit on edges cleanly */
}

.panels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;      /* each panel fills the viewport */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;          /* avoid scrollbar overlap */
}

/* hide scrollbars (keeps keyboard/scroll functional) */
.panels::-webkit-scrollbar { display: none; }
.panels { scrollbar-width: none; }

/* Each card is a snap point */
.panel-card {
  scroll-snap-align: start;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.08);
  padding: 24px;
}

/* ===== Arrows ===== */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .06);
  background: linear-gradient(135deg, var(--brand, #0077ff), #3e84ff);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 16px rgba(0, 119, 255, .25);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
  z-index: 2;
}

.carousel-arrow.right { right: -14px; }  /* sits hugging the card edge */
.carousel-arrow.left  { left: -14px; }

.carousel-arrow:hover { filter: brightness(.95); transform: translateY(-50%) scale(1.03); }
.carousel-arrow:disabled {
  opacity: .35; cursor: default; filter: none;
  background: #eef3ff; color: #8aa3d1;
  box-shadow: none;
}

/* Responsive: pull arrows inside on small screens */
@media (max-width: 720px) {
  .carousel-arrow.right { right: 8px; }
  .carousel-arrow.left  { left: 8px; }
}

.carousel-viewport {
  transition: height .25s ease; /* optional but looks nicer */
}

/* Don't make every panel the height of the tallest one */
.panels { 
  align-items: start;               /* <-- important */
}

/* (Optional) ensure each card follows its own content height */
.panel-card { 
  align-self: start;                /* belt-and-suspenders */
}

/* Smooth height change when we adjust it in JS */
.carousel-viewport {
  overflow: hidden;
  transition: height .25s ease;
}


/* smoother resize of the right pane */
.carousel-viewport {
  overflow: hidden;
  transition: height .38s cubic-bezier(.22,.61,.36,1); /* gentler ease */
}

/* make arrow appearance/disappearance animated */
.carousel-arrow {
  will-change: transform, opacity;            /* keeps motion crisp */
  transition: opacity .28s ease, transform .28s ease, filter .12s ease;
}

/* when an arrow is "off" (at the start/end) fade/scale it out */
.carousel-arrow.is-off {
  opacity: 0;
  transform: translateY(-50%) scale(.9);
  pointer-events: none;                        /* not clickable */
  box-shadow: none;
}

/* optional: less abrupt snapping between panels */
.panels { scroll-snap-type: x proximity; }     /* instead of "mandatory" */


/* Container positions */
.flash-container{
  position: fixed;
  z-index: 1100;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
  left: 0; right: 0; margin-left: auto; margin-right: auto;
}
.flash-container.top-center{    top: max(16px, env(safe-area-inset-top)); }
.flash-container.center-screen{ top: 50%; transform: translateY(-50%); }
.flash-container.bottom-center{ bottom: max(16px, env(safe-area-inset-bottom)); }

/* Toast card */
.flash{
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #eef3ff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,123,255,.12);

  /* ENTER + LEAVE */
  animation: flash-in .35s cubic-bezier(.22,.61,.36,1) both;
  opacity: 1; 
  transform: translate3d(0,0,0) scale(1);
  will-change: opacity, transform;
  transition: opacity 1.6s cubic-bezier(.22,.61,.36,1),
              transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.flash-success{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.flash-error  { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.flash-info   { background:#f0f7ff; border-color:#d7e8ff; color:#0a1c3d; }
.flash-warning{ background:#fff7ed; border-color:#fed7aa; color:#92400e; }

@keyframes flash-in{
  from{ opacity:0; transform: translate3d(0,8px,0) scale(.98); }
  to  { opacity:1; transform: translate3d(0,0,0)  scale(1); }
}

/* LEAVE target state — JS adds .is-leaving after 4s */
.flash.is-leaving{
  opacity: 0;
  transform: translate3d(0,-8px,0) scale(.98);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .flash, .flash.is-leaving{ animation:none; transition:none; }
}



/* Layout the three nav regions on one row */
.nav-container{
  width: 100%;        /* adjust to your page width */
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Left and right keep natural width */
.nav-left,
.nav-right{
  flex: 0 0 auto;
}

/* Center takes the remaining space and must not wrap items */
.nav-center{
  flex: 1 1 auto;           /* grow to fill space between left/right */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 36px);   /* responsive spacing */
  flex-wrap: nowrap;        /* keep items on one row */
  min-width: 0;             /* allow flexbox to shrink if needed */
}

/* Prevent link text itself from breaking to two lines */
.nav-center a,
.nav-center .dropdown > a{
  white-space: nowrap;      /* "OUR SERVICES" stays on one line */
  display: inline-flex;     /* nice baseline alignment */
  align-items: center;
}

/* (Optional) If you set a large letter-spacing somewhere, reduce it here */
/* .nav-center a { letter-spacing: 0; } */

/* If your dropdown wrapper was forcing a line break, ensure it's inline-level */
.nav-center .dropdown{
  position: relative;
  display: inline-flex;     /* avoid starting a new row */
  align-items: center;
}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:.28rem .6rem;border-radius:999px;font-weight:800;font-size:.78rem;
  border:1px solid transparent;
}

.badge-success{background:#e9f8ef;border-color:#b8efd2;color:#0c6d4a;}
.badge-warning{background:#fff6e6;border-color:#ffe3b8;color:#8a5a00;}
.badge-danger{background:#fdecea;border-color:#f7c6c5;color:#b42318;}
.badge-muted{background:#eef2f7;border-color:#e1e7ef;color:#5b6b7f;}
.badge-info{background:#e7f0ff;border-color:#bfd7ff;color:#0a49a3;}

/* NAV BAR LAYOUT (already present) */
.nav-actions{
    display:flex;
    align-items:center;   /* vertically centre children */
}

/* NEW RULES */
.flag-ca{
    height:50px;          /* ≈ your nav font-size + a bit */
    width:auto;           /* keep aspect ratio */
    display:block;        /* removes the little baseline gap */
}

.flag-link{              /* clears old button look if you reused <a> */
    padding:0;
    background:none;
    border:none;
    box-shadow:none;
    margin-left:1rem;     /* spacing after the phone pill */
}


/* Base tweaks */
.nav-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: center;
  width: 100%;
  padding: 0 2rem;
  gap: 1rem;
}

/* Use a <ul> for links */
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a,
.logo {
  color: #000;
  text-decoration: none;
  font-size: 1.10rem;
  transition: color .2s ease;
}
.nav-links a:hover { color: #0077ff; }

/* Dropdown: support hover on desktop and click on mobile */
.dropdown { position: relative; }
.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.dropdown-content { /* your existing styles kept */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  z-index: 1000;
  border-radius: 4px;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.dropdown-content a {
  display: block;
  padding: .75rem 1rem;
  color: #000;
  white-space: nowrap;
}
.dropdown:hover .dropdown-content {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  appearance: none;
  background: #f2f6ff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: .5rem .6rem;
  line-height: 0;
}
.nav-toggle .icon { width: 20px; height: 20px; }

/* Right side layout (desktop) — your existing kept */
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }

/* Mobile drawer base (hidden by default) */
#primary-nav {
  position: relative;
}

/* Mobile quick actions inside drawer */
.nav-mobile-actions { display: none; gap: 8px; margin-top: .75rem; }

/* ------- Mobile mode ------- */
@media (max-width: 900px) {
  .nav-container {
    grid-template-columns: auto 1fr auto; /* left | spacer | right/hamburger */
  }

  /* Show hamburger, hide desktop right actions text */
  .nav-toggle { display: inline-flex; }
  .nav-right .nav-pill .hide-sm { display: none; }

  /* Turn center into a slide-down panel */
  #primary-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
    padding: .75rem 1rem;
  }

  /* When open */
  nav.is-open #primary-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Links stack vertically with bigger tap zones */
  .nav-links {
    flex-direction: column;
    gap: .25rem;
  }
  .nav-links a,
  .dropdown-trigger {
    padding: .5rem 0;
    font-size: 1rem;
  }

  /* Dropdown works on tap (when parent has .is-open) */
  .dropdown:hover .dropdown-content { /* disable hover open on mobile */
    opacity: 0; visibility: hidden; transform: translateY(-10px);
  }
  .dropdown.is-open .dropdown-content {
    position: static; /* flow inside drawer */
    box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    margin: .25rem 0 .5rem;
    border: 1px solid rgba(0,0,0,.06);
  }

  .nav-mobile-actions { display: flex; }

  /* Optional: tone down wave on mobile to prevent overlap */
  #nav-wave { height: 10px; }
}

/* Underline hover effect only on desktop */
@media (min-width: 901px) {
  .nav-links a { position: relative; overflow: hidden; }
  .nav-links a::after {
    content:"";
    position:absolute; bottom:-2px; left:0; width:0%; height:2px;
    background:#0077ff; transition: width .3s ease;
  }
  .nav-links a:hover::after { width:100%; }
}



/* ---------- Mobile safety net (add at END of file) ---------- */

/* Media should never overflow */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Stop horizontal scrolling from 100vw/offsets */
html, body { overflow-x: hidden; }

/* Navbar: shrink paddings/flag on mobile */
@media (max-width: 600px) {
  nav { padding: 1rem 1rem; }
  .nav-container { padding: 0 1rem; }
  .flag-ca { height: 28px; }
  .nav-pill { padding: 8px; }            /* icon-only phone pill */
  .logo { font-size: 1.6rem; }           /* was 2.25rem */
}

/* CTA button was huge due to 2.5rem x 8rem padding */
@media (max-width: 600px) {
  .cta-button {
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    width: auto;
    max-width: 100%;
  }
}

/* Hero/slogan typography + spacing */
@media (max-width: 600px) {
  .slogan-title { font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.15; }
  .slogan-sub   { font-size: 1rem; }
  .slogan-hero,
  .slogan-wrapper { padding: 2rem 1rem; }
}

/* The overlay image’s negative left offset causes overflow on phones */
@media (max-width: 700px) {
  .hero-content { flex-direction: column; align-items: center; gap: 1.25rem; }
  .hero-images { max-width: 100%; justify-content: center; }
  .overlay-img {
    left: 0; bottom: -14px;
    width: 60%;
  }
}

/* Grids that were constrained or too tight */
@media (max-width: 800px) {
  .offerings-grid, .pillars-grid { max-width: 100%; gap: 1rem; }
  .form-grid { gap: 1rem; }
  .form-group { flex: 1 1 100%; }
}

/* Contact + camera sections had large paddings/fonts */
@media (max-width: 700px) {
  .contact-hero, .camera-hero, .quote-hero { padding: 1.5rem 1rem; }
  .contact-slogan, .camera-title, .quote-slogan {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  }
  .camera-sub { font-size: 1rem; }
}

/* Tables: allow horizontal scroll instead of breaking layout */
.camera-table-container { overflow-x: auto; }
.camera-table { width: 100%; }

/* Footer: relax layout */
@media (max-width: 700px) {
  .footer-container { gap: 1rem; padding: 0 1rem; }
  .footer-badge { width: 70px; }
}

/* Profile/CRM bits: ensure cards don’t force width */
@media (max-width: 600px) {
  .profile-container { padding: 0 12px; margin: 24px auto; }
  .panel-card, .quotes-card, .profile-card { padding: 16px; }
}

/* OPTIONAL: mild global downscale to ease tight pages */
@media (max-width: 480px) {
  html { font-size: 15px; } /* defaults are ~16px; this is subtle */
}

@media (min-width: 901px) {
  .nav-container {
    display: flex;                /* ensure desktop flex centering */
    align-items: center;
    justify-content: space-between;
  }
}



.profile-container,
.profile-grid,
.profile-card,
.quotes-card,
.quote-card { max-width: 100%; }

/* On phones, make the grid a single column and tighten spacing */
@media (max-width: 960px) {
  .profile-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* CAROUSEL: keep arrows inside; never use negative offsets */
.carousel-arrow.right { right: 8px; }
.carousel-arrow.left  { left: 8px; }

/* Also reduce gap so 100% panels + gap don’t “feel” wider */
@media (max-width: 720px) {
  .panels { gap: 12px; }
}

/* Ensure the viewport is the scroll container (not the page) */
.carousel-viewport { overflow: hidden; }

/* Safety: prevent any panel content from forcing width */
.panel-card { max-width: 100%; overflow-wrap: anywhere; }

/* Tables and long strings won’t blow out the width */
.camera-table-container,
.table-wrap { overflow-x: auto; }

/* Base icon look */
.nav-toggle .icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Hidden on desktop */
.nav-toggle { display: none; }

/* ===== Mobile / Tablet (<= 900px) ===== */
@media (max-width: 900px) {
  /* Right side spacing + hamburger button */
  .nav-right { gap: 8px; }
  .nav-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: #f2f6ff;
    color: #0a1e40;
    border: 1px solid rgba(0,0,0,.08);
  }
  .icon-close { display: none; }
  nav.is-open .icon-hamburger { display: none; }
  nav.is-open .icon-close { display: block; }

  /* Drawer content: left aligned, full width list */
  #primary-nav { text-align: left; }
  #primary-nav .nav-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  #primary-nav .nav-links > li { width: 100%; }

  /* Dropdown trigger row */
  #primary-nav .dropdown-trigger,
  #primary-nav .nav-links .dropdown > a {
    display: flex;
    align-items: center;             /* (fix for earlier 'left') */
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: .5rem 0;
    background: none;
    border: 0;
  }

  /* Submenu: hidden by default (no gap), in-flow when shown */
  #primary-nav .dropdown .dropdown-content {
    display: none !important;        /* closed state */
    position: static;
    width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  /* Show ONLY when this dropdown is opened */
  nav.is-open #primary-nav .dropdown.is-open .dropdown-content,
  nav.is-open #primary-nav .dropdown .dropdown-trigger[aria-expanded="true"] + .dropdown-content {
    display: block !important;
    margin: .25rem 0 .5rem;
    border: 1px solid rgba(0,0,0,.06);
  }

  /* Disable hover-open on touch for CLOSED items */
  #primary-nav .dropdown:not(.is-open):hover .dropdown-content {
    display: none !important;
  }
}

/* Stack the trigger and submenu vertically in the mobile drawer */
@media (max-width: 900px) {
  /* make the wrapper a block/column container */
  #primary-nav .nav-links .dropdown {
    display: block;                  /* overrides desktop inline-flex */
    /* OR: display:flex; flex-direction:column; align-items:stretch; */
  }

  /* keep the trigger full width */
  #primary-nav .dropdown-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: .5rem 0;
  }

  /* submenu takes the full width UNDER the trigger */
  #primary-nav .dropdown .dropdown-content {
    display: none;                    /* closed by default */
    position: static;
    width: 100%;
    margin: .25rem 0 .5rem;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: none;
  }
  nav.is-open #primary-nav .dropdown.is-open .dropdown-content {
    display: block;                   /* shown when opened */
  }
}

/* Logo size (desktop) */
.nav-left .logo{
  font-size: 2.25rem;          /* bigger wordmark */
  font-weight: 800;
  line-height: 1;
  display: inline-block;
  align-items: center;
  gap: .25rem;
}

.nav-left .logo{
  --eye-size: .90em;
}

/* make the eye follow the font size */
.nav-left .logo .eye-wrapper{
  width: var(--eye-size);
  height: var(--eye-size);
  transform: translateY(1px);
  display: inline-block;
  margin-left: -0.22em;   
}

/* optional: scale a bit more on large desktops */
@media (min-width: 1200px){
  .nav-left .logo{ font-size: 2.6rem; }
}

/* mobile can stay smaller if you want */
@media (max-width: 900px){
  .nav-left .logo{ font-size: 1.6rem; }
}

/* Desktop: make the OUR SERVICES trigger look like a link */
@media (min-width: 901px) {
  .nav-links > .dropdown > .dropdown-trigger {
    font: inherit;              /* inherit family + size */
    font-size: 1.10rem;         /* match your link size */
    font-weight: 600;           /* match link weight */
    color: #000;
    background: none;
    border: 0;
    padding: 0;                 /* remove button padding */
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;           /* for underline effect */
  }

  /* caret size + alignment */
  .nav-links > .dropdown > .dropdown-trigger .icon {
    width: 12px;
    height: 12px;
    margin-left: .4rem;
    transform: translateY(1px);
  }

  /* same hover underline as links */
  .nav-links > .dropdown > .dropdown-trigger::after {
    content: "";
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: #0077ff;
    transition: width .3s ease;
  }
  .nav-links > .dropdown > .dropdown-trigger:hover::after {
    width: 100%;
  }
}


:root{
  --blue-dark: #004799;   /* SEC + TECH */
  --blue-light: #0E78FF;  /* UR + the O (text color if needed) */
}

/* Base logo colors */
.logo .sec,
.logo .tech { color: var(--blue-dark); }
.logo .ur     { color: var(--blue-light); }

/* Keep kerning + alignment tidy */
.logo{ display:inline-block; position:relative; isolation:isolate; }
.logo .eye-wrapper{
  display:inline-block;
  width:.92em; height:.92em;        /* scale the camera slightly */
  margin-left:-0.12em;              /* tuck under the “R” */
  vertical-align:-0.06em;
}
.logo .eye-wrapper svg{ display:block; }  /* remove inline gap */

/* Hover sweep (subtle sheen across the word) */
.logo::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 10%,
      rgba(255,255,255,.35) 32%,
      rgba(255,255,255,0) 56%);
  mix-blend-mode:screen;            /* brightens colors under the sweep */
  transform:translateX(-120%);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.logo:hover::after,
.logo:focus-visible::after{
  transform:translateX(120%);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo::after{ transition:none; transform:none; opacity:0; }
}


/* ===== Regular site navbar: bold link style (matches CRM) ===== */
:root{
  --nav-link: #0a1c3d;         /* text color */
  --nav-link-hover: #0077ff;   /* hover/underline color */
}

/* Base link normalization */
nav .nav-center .nav-links a,
nav .nav-center .dropdown > a,
nav .nav-center .dropdown-trigger{
  color: var(--nav-link);
  text-decoration: none;
  font-weight: 600;            /* bolder look */
}

/* Prevent purple visited links */
nav .nav-center .nav-links a:visited,
nav .nav-center .dropdown > a:visited{
  color: var(--nav-link);
}

/* Hover color (no underline yet) */
nav .nav-center .nav-links a:hover,
nav .nav-center .dropdown > a:hover,
nav .nav-center .dropdown-trigger:hover{
  color: var(--nav-link-hover);
}

/* Desktop: underline sweep on hover */
@media (min-width: 901px){
  nav .nav-center .nav-links a,
  nav .nav-center .dropdown-trigger{
    position: relative;
    overflow: hidden;
  }
  nav .nav-center .nav-links a::after,
  nav .nav-center .dropdown-trigger::after{
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--nav-link-hover);
    transition: width .3s ease;
  }
  nav .nav-center .nav-links a:hover::after,
  nav .nav-center .dropdown-trigger:hover::after{
    width: 100%;
  }
}

/* Mobile drawer: keep bold, bigger tap targets, no underline anim */
@media (max-width: 900px){
  nav .nav-center .nav-links a,
  nav .nav-center .dropdown-trigger{
    font-weight: 600;
    padding: .6rem 0;
  }
  nav .nav-center .nav-links a::after,
  nav .nav-center .dropdown-trigger::after{
    display: none;
  }
}

/* keep status chips on one line */
.badge{
  white-space: nowrap;   /* <- stops "Paid" splitting */
  line-height: 1;        /* tidy vertical alignment */
}

/* keep the badge (and Pay button) from being squished */
.status-and-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;            /* don't shrink */
  min-width: max-content;    /* size to content */
}

/* let the header wrap instead of squeezing items */
.quote-card-header{
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;           /* drop to next line on small screens */
}

.quote-card-header .date{
  flex: 1 1 160px;           /* dates can wrap/flow */
  min-width: 0;
}


.inline-edit { display:flex; align-items:center; gap:.5rem; }
.contact-input {
  background:transparent; border:0; padding:0; width:100%;
  font:inherit; color:inherit; pointer-events:auto;   /* IMPORTANT */
}
.contact-input[readonly] { cursor:default; }
.icon-btn { background:transparent; border:0; cursor:pointer; padding:.25rem; border-radius:8px; }
.icon-btn:hover { background:rgba(0,0,0,.06); }
.hidden { display:none; }

/* --- Register page form styling (scoped under .auth-container.reg) --- */
.auth-container.reg .auth-form {
  max-width: 560px;
  margin: 0 auto;
}
.auth-container.reg .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}
.auth-container.reg label {
  font-weight: 600;
}
.auth-container.reg input[type="text"],
.auth-container.reg input[type="email"],
.auth-container.reg input[type="tel"],
.auth-container.reg input[type="password"] {
  padding: 11px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
  background: #fff;
}
.auth-container.reg input:focus {
  border-color: #0077ff;
  box-shadow: 0 0 0 3px rgba(0,119,255,.12);
}
.auth-container.reg .has-error input {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.10);
}
.auth-container.reg .error-text {
  color: #dc2626;
  font-size: .92rem;
}
.auth-container.reg .form-errors { margin-bottom: 10px; }
.auth-container.reg .help-text,
.auth-container.reg .helptext { /* Django renders help as .helptext */
  color: #475569;
  font-size: .9rem;
}
.auth-container.reg .help-text ul,
.auth-container.reg .helptext ul {
  margin: 6px 0 0 18px;
}
/* Optional: make the long default Django password help a little softer */
.auth-container.reg .helptext {
  background: rgba(0,0,0,.03);
  border: 1px dashed #cfd8e3;
  padding: 10px 12px;
  border-radius: 10px;
}

/* Row container stays a 2-column grid: label | form */
.contact-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:10px;
  background:#f7f9fc;
  border-radius:14px;
  padding:10px 12px;
  align-items:start;
}
.contact-label{ font-weight:600; color:#64748b; }

/* The form becomes a 2x2 grid:
   row1: [ input ...... ][ ✎ ]
   row2: [ Save ]        [ Cancel ]
*/
.inline-edit{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap:8px;
  row-gap:8px;
  min-width:0; /* allow input to fill */
}

/* Positions */
.contact-input{ grid-column:1; grid-row:1; flex:1 1 auto; min-width:0; padding:8px 10px;
  border-radius:10px; border:1px solid transparent; background:transparent; outline:none; }
.edit{ grid-column:2; grid-row:1; justify-self:end; }
.save{ grid-column:1; grid-row:2; justify-self:start; }
.cancel{ grid-column:2; grid-row:2; justify-self:start; }

/* View vs edit visuals */
.contact-input[readonly]{ padding:0; border:0; background:transparent; }
.inline-edit.is-editing .contact-input{
  background:#fff; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.2);
}

/* Buttons */
.icon-btn{ background:transparent; border:0; cursor:pointer; padding:6px; border-radius:8px; }
.icon-btn:hover{ background:rgba(0,0,0,.06); }
.btn.btn-ghost{ padding:6px 10px; font-size:.88rem; border-radius:10px; background:#eef2ff; border:1px solid #e2e8f0; }
.hidden{ display:none; }

/* Mobile: label on its own row for max input width */
@media (max-width:480px){
  .contact-row{ grid-template-columns: 1fr; }
  .contact-label{ grid-column:1; }
  .inline-edit{ grid-column:1; }
}

/* 1) Global safety: never allow horizontal overflow */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2) Let flex/grid children actually shrink on narrow screens */
.profile-container, .profile-grid,
.panel-carousel, .carousel-viewport, .panels,
.panel-card, .quote-list, .profile-contact,
.contact-row, .inline-edit { min-width: 0; }

/* 3) Carousel: keep the horizontal scroll INSIDE the viewport */
.panel-carousel .carousel-viewport {
  overflow: hidden;                 /* prevents page from widening */
  width: 100%;
}
.panel-carousel .panels {
  display: flex;
  overflow-x: auto;                 /* scroll inside here */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.panel-carousel .panel-card {
  flex: 0 0 100%;                   /* each panel = full viewport width */
  scroll-snap-align: start;
}

/* 4) Stats: use a responsive grid instead of fixed widths */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .profile-stats { grid-template-columns: repeat(4, 1fr); }
}

/* 5) Inline edit block: keep email/phone on-screen and wrap long text */
.contact-row { grid-template-columns: 90px 1fr; } /* label | form (you already have this) */
.inline-edit { min-width: 0; }                    /* allow shrinking */
.contact-input {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-row, .contact-input {
  overflow-wrap: anywhere;                        /* long emails won't force overflow */
}

/* 6) Buttons under the field (from earlier), keep them wrapping nicely */
.inline-edit { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 8px; }
.inline-edit .contact-input { grid-column: 1; grid-row: 1; }
.inline-edit .edit         { grid-column: 2; grid-row: 1; justify-self: end; }
.inline-edit .save         { grid-column: 1; grid-row: 2; justify-self: start; }
.inline-edit .cancel       { grid-column: 2; grid-row: 2; justify-self: start; }

/* 7) Small screens: give everything full width */
@media (max-width: 480px) {
  .contact-row { grid-template-columns: 1fr; }
  .profile-card, .panel-carousel { width: 100%; }
}

.profile-contact { display: grid; gap: 12px; }

/* 3 columns: label | value (fills) | optional icon */
.contact-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

/* Keeps the label compact and readable */
.contact-label {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 600;
  white-space: nowrap;
}

/* The value cell must be allowed to shrink */
.contact-value {
  min-width: 0;              /* critical so ellipsis can work in grid/flex */
  display: block;
}

/* One-line ellipsis on larger screens */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inputs in the phone row should fill the middle column */
.inline-edit {
  display: grid;
  grid-template-columns: 1fr auto auto auto; /* input + edit + save + cancel */
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.inline-edit .contact-input {
  width: 100%;
  min-width: 0;
}

/* Small screens: stack label above, let the value wrap safely */
@media (max-width: 480px) {
  .contact-row {
    grid-template-columns: 1fr auto;  /* value + optional icon */
    grid-auto-flow: row;
  }
  .contact-label {
    grid-column: 1 / -1;              /* label becomes its own row */
    margin-bottom: 2px;
  }
  .text-ellipsis {
    white-space: normal;               /* allow wrapping on mobile */
    overflow-wrap: anywhere;           /* break long emails mid-word if needed */
  }
}


/* Profile contact rows */
.profile-card .profile-contact { display: grid; gap: 12px; }

/* Row = label | value | (optional icon) */
.profile-card .contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;                 /* critical for ellipsis in flex */
}

/* Make all direct children shrinkable */
.profile-card .contact-row > * { min-width: 0; }

/* Label pill */
.profile-card .contact-label {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 600;
  white-space: nowrap;
}

/* Value takes remaining width and truncates on one line */
.profile-card .contact-value {
  flex: 1 1 auto;
  display: block;               /* anchors are inline by default */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
}

/* Phone inline edit should also not push the row wider */
.profile-card .inline-edit {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-card .inline-edit .contact-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Mobile: stack label above value and allow wrapping instead of ellipsis */
@media (max-width: 520px) {
  .profile-card .contact-row {
    flex-direction: column;
    align-items: stretch;
  }
  .profile-card .contact-label { margin-bottom: 2px; }
  .profile-card .contact-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;     /* break really long emails */
    word-break: break-word;
  }
}

/* Keep label + value inline on mobile, with safe truncation */
@media (max-width: 520px) {
  .profile-card .contact-row {
    flex-direction: row;         /* override earlier "column" */
    align-items: center;
  }
  .profile-card .contact-label { margin-bottom: 0; }

  /* email/phone value: single line + ellipsis */
  .profile-card .contact-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;                /* critical for flex truncation */
    max-width: 100%;
    display: block;
  }
}

/* Prevent Save/Cancel from getting squeezed or breaking text */
.profile-card .inline-edit {
  display: flex;
  flex-wrap: wrap;               /* allow buttons to drop below input if needed */
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.profile-card .inline-edit .contact-input {
  flex: 1 1 160px;               /* input grows, but won’t crush buttons */
  min-width: 0;
  width: 100%;
}
.profile-card .inline-edit .btn,
.profile-card .inline-edit .icon-btn {
  flex: 0 0 auto;                /* don’t shrink to tiny width */
  white-space: nowrap;           /* keep "Save" / "Cancel" on one line */
}
@media (max-width: 520px) {
  .profile-card .inline-edit .btn,
  .profile-card .inline-edit .icon-btn {
    margin-top: 6px;             /* if they wrap below the input, add a little spacing */
  }
}

/* Mobile: show input row, and when editing move Save/Cancel under it */
@media (max-width: 520px) {
  /* Email/Phone rows remain one line */
  .profile-card .contact-row {
    flex-direction: row;
    align-items: center;
  }

  /* Inline edit layout uses CSS Grid on small screens */
  .profile-card .inline-edit {
    display: grid;
    grid-template-columns: 1fr auto;   /* input | edit icon */
    gap: 8px;
    align-items: center;
    min-width: 0;
  }
  .profile-card .inline-edit .contact-input {
    grid-column: 1;                    /* input on the left */
    min-width: 0;
    width: 100%;
  }
  .profile-card .inline-edit .edit {
    grid-column: 2;                    /* pencil to the right of input */
  }

  /* When in edit mode, make input full width on row 1,
     then place Save + Cancel on row 2 side-by-side */
  .profile-card .inline-edit.is-editing {
    grid-template-columns: 1fr auto auto; /* input spans all three on row 1 */
  }
  .profile-card .inline-edit.is-editing .contact-input {
    grid-column: 1 / -1;               /* full width row 1 */
  }
  .profile-card .inline-edit.is-editing .save {
    grid-column: 2;                     /* row 2, col 2 */
    justify-self: start;
    margin-top: 4px;
    white-space: nowrap;
  }
  .profile-card .inline-edit.is-editing .cancel {
    grid-column: 3;                     /* row 2, col 3 */
    justify-self: start;
    margin-top: 4px;
    white-space: nowrap;
  }
}

/* Desktop / tablet: keep the edit icon on the same line */
@media (min-width: 521px) {
  .profile-card .inline-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;          /* <— prevent wrapping on desktop */
  }
  .profile-card .inline-edit .contact-input {
    flex: 1 1 260px;            /* grows, but leaves room for the icon */
    min-width: 0;
    width: 100%;
  }
  .profile-card .inline-edit .icon-btn,
  .profile-card .inline-edit .btn {
    flex: 0 0 auto;
    white-space: nowrap;        /* never split button text */
  }
}

/* Mobile: keep your grid layout so Save/Cancel go underneath */
@media (max-width: 520px) {
  .profile-card .inline-edit {
    display: grid;
    grid-template-columns: 1fr auto;  /* input | pencil */
    gap: 8px;
    align-items: center;
    min-width: 0;
  }
  .profile-card .inline-edit.is-editing {
    grid-template-columns: 1fr auto auto;  /* row 1: input full width; row 2: buttons */
  }
  .profile-card .inline-edit.is-editing .contact-input { grid-column: 1 / -1; }
  .profile-card .inline-edit.is-editing .save   { grid-column: 2; margin-top: 4px; }
  .profile-card .inline-edit.is-editing .cancel { grid-column: 3; margin-top: 4px; }
}

/* Inline phone editor: grid with areas so buttons sit UNDER the input */
.profile-card .inline-edit {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 0;

  /* Row 1: input | edit (pencil) */
  grid-template-columns: 1fr auto;
  grid-template-areas: "input edit";
}

.profile-card .inline-edit .contact-input {
  grid-area: input;
  min-width: 0;
  width: 100%;
}

.profile-card .inline-edit .edit {        /* the pencil */
  grid-area: edit;
}

/* When editing: Row 1 = input full width; Row 2 = Save | Cancel */
.profile-card .inline-edit.is-editing {
  align-items: start;
  grid-template-columns: auto auto;       /* buttons side-by-side */
  grid-template-areas:
    "input input"
    "save  cancel";
}

/* Map buttons into their grid cells (JS already shows/hides them) */
.profile-card .inline-edit .save   { grid-area: save;   justify-self: start; }
.profile-card .inline-edit .cancel { grid-area: cancel; justify-self: start; }

/* Make sure long locales/zoom don’t break buttons */
.profile-card .inline-edit .btn,
.profile-card .inline-edit .icon-btn {
  white-space: nowrap;
  min-width: 0;
}
/* Shared layout */
.slogan-hero .hero-content,
.camera-hero .camera-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* Desktop/tablet: keep your DOM order (alternates naturally) */
.slogan-hero .hero-content,
.camera-hero .camera-content {
  flex-direction: row;
}

/* Mobile: stack and force text above image everywhere */
@media (max-width: 900px) {
  .slogan-hero .hero-content,
  .camera-hero .camera-content {
    flex-direction: column;
  }
  .hero-text, .camera-text { order: 1; }
  .hero-images, .camera-hero .hero-images { order: 2; }
}

/* Niceties */
.hero-images img,
.camera-hero .hero-images img {
  max-width: 100%;
  height: auto;
  display: block;
}