/* =============================================================================
   KINVAYA — OMNIBUS STYLESHEET (clean retry)
   Human-readable, organized by page section
   ============================================================================
   SECTION INDEX
   01) Design Tokens & Resets
   02) Global Layout & Helpers
   03) Header / Topbar (logo grow → shrink on scroll)
   04) Primary Navbar
   05) Hamburger Button & Dropdown (purple)
   06) Intro / Hero (markdown-friendly)
   07) Carousel (max 33vh, circular dots)
   08) Services Grid
   09) Contact (FAB, Modal, Form, green checkboxes)
   10) Dynamic (Markdown) Content
   11) Footer (Social row + links)
   12) Responsiveness & Reduced Motion
   ========================================================================== */


/* ============================================================================
   01) DESIGN TOKENS & RESETS
   ========================================================================== */

:root{
  /* Brand */
  --primary:#6C5B7B;     /* purple */
  --accent:#C06C84;

  /* Base */
  --bg:#F8F8F8;
  --text:#333;
  --muted:#666;

  /* Layout */
  --maxw:1200px;
  --gap:20px;
  --topbar:60px;
  --radius:10px;

  /* Safe areas (iOS) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Floating Action Button metrics (used by FAB & content reserve) */
  --fab-h:54px;
  --fab-gap:14px;

  /* Modal */
  --modal-radius:20px;
}

*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--topbar);
  -webkit-text-size-adjust:100%; /* avoid iOS auto-zoom */
}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
img{ max-width:100%; height:auto; display:block; }  /* never stretch */

:where(a,button,input,textarea,.hamburger,.submit-btn,.navbar a):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* Inputs readable on iOS without auto-zoom; force light fields */
input, textarea, select, button{ font-size:16px; }
input, textarea, select{
  background:#fff;
  color:#333;
  border:1px solid #cfcfd4;
  border-radius:8px;
}
input::placeholder, textarea::placeholder{ color:#8a8a8a; }
input:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 40px #fff inset !important;
  -webkit-text-fill-color:#333 !important;
  caret-color:#333;
}

/* Hide body scroll when modal is open */
body.modal-open{ overflow:hidden; }


/* ============================================================================
   02) GLOBAL LAYOUT & HELPERS
   ========================================================================== */

.container{
  max-width:var(--maxw);
  margin:20px auto;
  padding:0 var(--gap);
}

/* Ensure page content never sits under the FAB */


main, #dynamic-content {
  padding-bottom: calc(var(--fab-h) + var(--fab-gap) + 20px + var(--safe-bottom)); 
}

/* Skip link for a11y */
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{
  left:1rem;
  top:calc(var(--topbar) + .5rem);
  padding:.5rem .75rem;
  background:#fff;
  border:1px solid #ddd;
  border-radius:.5rem;
  z-index:2000;
}

/* Utility: hidden honeypot (kept for reference even if not used) */
.hp{
  position:absolute !important;
  left:-99999px !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important;
}


/* ============================================================================
   03) HEADER / TOPBAR (centered logo; grows then shrinks on scroll)
   ========================================================================== */

.topbar{
  position:fixed;
  inset:0 0 auto;
  z-index:1000;
  height:var(--topbar);
  background:#fff;
  display:grid;
  grid-template-columns:1fr auto 1fr; /* true page-centered logo */
  align-items:center;
  padding:0 16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.topbar-left{ justify-self:start; }
.topbar-center{ justify-self:center; }
.topbar-right{ justify-self:end; display:flex; gap:12px; align-items:center; }

/* Brand logo: scale up initially, shrink when body.scrolled */
.brand-logo{
  max-height:36px;       /* intrinsic reference */
  width:auto; height:auto;
  transform:scale(1.5);  /* 50% bigger on initial load */
  transform-origin:center;
  transition:transform .25s ease;
}
body.scrolled .brand-logo{ transform:scale(1); }


/* ============================================================================
   04) PRIMARY NAVBAR
   ========================================================================== */

.navbar{
  background:var(--primary);
  position:relative;
  margin-top:var(--topbar);
}
#nav-links{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:.25rem;
  flex-wrap:wrap;        /* allow wrapping on narrow widths */
  margin:0 auto;
  padding:.2rem .3rem;   /* slimmer bar */
  max-width:var(--maxw);
}
#nav-links a{
  display:block;
  color:#fff;
  font-weight:600;
  padding:6px 10px;      /* compact pill */
  border-radius:6px;
  transition:background .2s ease;
  text-decoration:none;
}
#nav-links a:hover{ background:rgba(255,255,255,.12); }
#nav-links a[aria-current="page"]{ background:rgba(255,255,255,.18); }


/* ============================================================================
   05) HAMBURGER BUTTON & DROPDOWN (purple)
   ========================================================================== */

/* On mobile CSS shows hamburger; on wide screens JS toggles .show */
.hamburger{
  border:none;
  border-radius:8px;
  padding:8px;
  background:var(--primary);
  cursor:pointer;

  display:none;                    /* default hidden */
  align-items:center;
  justify-content:center;
  flex-direction:column;           /* bars stacked vertically */
  gap:4px;
}
.hamburger.show{ display:inline-flex; }

/* Three bars (white) */
.hamburger .bar{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:1px;
}

/* Dropdown panel (purple) */
.menu-dropdown{
  position:fixed;
  top:var(--topbar);
  left:12px;
  z-index:1200;
  width:min(92vw,320px);

  background:var(--primary);
  border:1px solid #5b4b6c;
  border-radius:12px;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
  padding:8px;
  display:none;
}
.menu-dropdown.open{ display:block; }
.menu-dropdown ul{ list-style:none; margin:0; padding:0; }
.menu-dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
}
.menu-dropdown a:hover{ background:rgba(255,255,255,.12); }


/* ============================================================================
   06) INTRO / HERO (markdown-friendly)
   ========================================================================== */

.intro{ text-align:center; }
#home-intro :is(h1,h2){ margin:.25rem 0 .5rem; color:var(--primary); }
#home-intro p.lead{ color:var(--muted); margin-top:6px; }

/* HERO IMAGES LOADED FROM MARKDOWN */
#dynamic-content img[src*="-hero"] {
  display: block;
  width: 80%;
  max-height: 60vh;       /* about one-third of viewport height */
  object-fit: cover;      /* crop instead of stretch */
   object-position: center 30%;
  border-radius: 8px;
  margin: 16px auto;
}

/* ============================================================================
   07) CAROUSEL (max 33vh, circular dots, no stretch)
   ========================================================================== */

.carousel-wrapper{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  margin:20px auto;
}
.slides{ display:flex; transition:transform .45s ease; }
.slide{
  min-width:100%;
  height:33vh;            /* <= requested maximum height */
}
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;       /* maintain aspect; crop if needed (no stretch) */
}

.dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:.75rem;
}
.dots .dot{
  width:10px; height:10px;
  display:block;
  border-radius:50%;
  background:var(--muted);
  border:1px solid rgba(0,0,0,.25);
  cursor:pointer;
  padding:0; line-height:0;
}
.dots .dot[aria-current="true"]{ background:var(--accent); }


/* ============================================================================
   08) SERVICES GRID
   ========================================================================== */

.services.container{ max-width:var(--maxw); }
.services h2{ margin-bottom:.5rem; }
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
}
.card{
  background:#fff;
  padding:18px;
  border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(108,91,123,.05);
}


/* ============================================================================
   09) CONTACT — FAB, MODAL, FORM (tight + green checkboxes)
   ========================================================================== */


.contact-fab{
  padding:0 18px;
  height:var(--fab-h);
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:999px;
  font-weight:700;
  font-size:1.05rem;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
  position: sticky;
  bottom: 20px;
  width: clamp(100px, 20vw, 200px);
  left: 50%;
  transform: translateX(-50%);
}

.contact-fab:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* body.modal-open .contact-fab{ display:none; } */

/* Modal Shell (iPhone-safe) */
.modal[hidden]{ display:none; }
.modal{
  position:fixed;
  inset:0;
  z-index:3500;
  display:grid;
  place-items:center;
  overflow:hidden;                                   /* page doesn’t scroll */
  padding:var(--safe-top) 0 var(--safe-bottom);
  background:transparent;
}
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.42) }

/* Modal Card: uses desktop space to avoid unnecessary scroll */
.modal-card{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:clamp(420px, 80vw, 780px);                  /* wider on desktops */
  max-height:min(94svh, 1000px);
  overflow:auto;                                    /* rarely scrolls */

  background:#fff;
  color:#333;
  color-scheme:light;
  border-radius:var(--modal-radius);
  box-shadow:0 22px 70px rgba(0,0,0,.28);

  padding:24px 28px 20px;                           /* balanced, not loose */
}

/* Modal Close */
.modal-close{
  position:absolute;
  top:10px; right:10px;
  width:34px; height:34px;
  border:none; border-radius:10px;
  background:#f1eef7; cursor:pointer; font-size:16px;
}

/* Logo header centered */
.modal-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:4px 0 8px;
}

/* Form Layout (tighter labels & compact fields) */
#contact-form{
  display:flex;
  flex-direction:column;
  gap:8px;                                /* tighter overall gap */
  max-width:680px;
  margin:6px auto 0;
}
#contact-form .tight-label{
  margin:4px 0 2px;                       /* closer label-to-input */
  font-weight:600;
  line-height:1.15;
}
#contact-form input,
#contact-form textarea{
  margin:0 0 6px;
  padding:10px 12px;
}

/* Message placeholder copy */
#message::placeholder{
  color:#8a8a8a; opacity:1;
}

/* Phone helper sits close to field */
#phone + .help{
  display:block;
  margin:2px 0 6px;                       /* tighter to phone field */
  font-size:.85rem;
  color:#777;
}

/* Consents: text left, checkbox at far right */
.consents{
  display:grid;
  gap:8px;
  margin-top:2px;
}
.consent-row{
  display:grid;
  grid-template-columns:1fr auto;   /* label expands, box sticks right */
  align-items:center;
  column-gap:10px;
}
.consent-row .label-text{
  margin-right:6px;
  line-height:1.2;
}

/* Universal square GREEN checkbox (robust across browsers) */
.consent-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:18px; height:18px;
  border:2px solid #2e7d32;    /* green outline */
  border-radius:0;              /* square box (no rounded rectangle) */
  background:#fff;
  cursor:pointer;
  position:relative;
  justify-self:end;             /* push to far right */
  outline:none;
}
.consent-row input[type="checkbox"]::after{
  content:"";
  position:absolute;
  left:4px; top:0px;
  width:8px; height:12px;
  border-right:2px solid transparent;
  border-bottom:2px solid transparent;
  transform:rotate(45deg);
}
.consent-row input[type="checkbox"]:checked{
  background:#2e7d32;
  border-color:#2e7d32;
}
.consent-row input[type="checkbox"]:checked::after{
  border-right-color:#fff;
  border-bottom-color:#fff;     /* green box with white check */
}
.consent-row input[type="checkbox"]:focus-visible{
  box-shadow:0 0 0 2px rgba(192,108,132,0.35);
}

/* Legal copy (tight & readable) */
.legal{
  margin:6px 0 0;
  font-size:.85rem;
  color:#555;
  line-height:1.45;
}

/* Turnstile right-aligned */
.turnstile-row{
  display:flex;
  justify-content:flex-end;
  margin-top:2px;
  margin-bottom:6px;
}
.turnstile-row .cf-turnstile{ margin:0; }

/* Submit button */
.submit-btn{
  background:var(--primary); color:#fff; border:none;
  padding:12px 14px; border-radius:10px; font-weight:700;
  width:min(60%, 320px); margin:8px auto 0; cursor:pointer;
}
.submit-btn[disabled]{ opacity:.65; cursor:progress; }

.form-feedback{ min-height:1.1rem; color:#0a7; margin-top:4px; }


/* ============================================================================
   10) DYNAMIC (MARKDOWN) CONTENT
   ========================================================================== */

#dynamic-content{
  font:inherit;
  font-size:1rem;
  line-height:1.6;
  max-width:var(--maxw);
  margin:20px auto;
  padding:0 16px;
}
#dynamic-content :is(h1,h2,h3){
  color:var(--primary);
  margin:.75rem 0;
  scroll-margin-top:calc(var(--topbar) + 12px);
}
#dynamic-content p{ margin:0 0 16px; }
#dynamic-content ul, #dynamic-content ol{ margin:0 0 16px 20px; }
#dynamic-content img{
  max-width:100%;
  height:auto;                 /* maintain aspect; never stretch */
  border-radius:8px;
  display:block;
  margin:12px auto;
}


/* ============================================================================
   11) FOOTER (Social row + links)
   ========================================================================== */

footer{
  position: relative;
  z-index: 1;
  margin-top: 40px;
  background:#f4f2f8;
  text-align:center;
  color:#666;
  font-size:.9rem;
  padding:1rem 1.5rem 1.25rem;
}

/* Social row */
.footer-social{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 16px;
  margin:4px auto 12px;
}
.footer-social .social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
}
.footer-social img{
  width:22px; height:22px;
  display:block;
}

/* Footer links */
.footer-links{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin:0 0 .5rem;
  padding:0;
}
.footer-links a{ color:#4B3F72; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

/* ============================================================================
   12) OTHER PAGES
   ========================================================================== */

.back-button{
  position:fixed;             /* always visible */
  top: calc(var(--safe-top, 0px) + 10px);
  left: 12px;
  z-index: 3001;              /* above header/menu */
  background: var(--primary);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:8px 14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition: background .2s ease;
}
.back-button:hover{ background: var(--accent); }

/* If you have a fixed .topbar, add a little offset on small screens if needed */
@media (max-width: 920px){
  .back-button{ top: 12px; }
}

/* ============================================================================
   13) RESPONSIVENESS & REDUCED MOTION
   ========================================================================== */

/* Mobile / narrow */
@media (max-width:920px){
  /* Switch to hamburger + dropdown */
  #nav-links{ display:none; }
  .hamburger{ display:inline-flex; }

  /* Modal */
  .modal-card{
    width:min(96vw, 640px);
    max-height:96svh;
    padding:20px 16px 16px;
    border-radius:18px;
  }
  .submit-btn{ width:min(80%, 320px); }
}

/* Large screens: ensure modal uses space (avoid cramped scroll) */
@media (min-width:1200px){
  .modal-card{ width:780px; }
}

/* Respect reduced motion prefs */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}