/* =========================
   Theme (light & airy)
========================= */
:root{
  --bg:#f8fafc;           /* page background */
  --card:#ffffff;         /* card surface */
  --accent:#7dd3fc;       /* robin's-egg family */
  --accent-deep:#38bdf8;
  --text:#0f172a;         /* ink */
  --muted:#475569;        /* secondary text */
  --border:#e2e8f0;       /* light border */
}

/* =========================
   Base
========================= */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{ line-height:1.2; margin:0 0 .6rem }
p{ color:var(--muted); margin:.5rem 0 1.1rem }
a:focus{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px }

/* =========================
   Layout helpers
========================= */
.container{ max-width:1100px; margin:0 auto; padding:2rem 1rem }
.hero{ text-align:center; padding:3.5rem 1rem 2rem; background:linear-gradient(180deg,#fff 0%, #f1f5f9 100%) }
.footer{ background:transparent; border-top:1px solid var(--border) }

/* =========================
   Buttons
========================= */
.btn{
  display:inline-block; padding:.9rem 1.2rem; border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#083344; text-decoration:none; font-weight:700;
  box-shadow:0 8px 24px rgba(3,105,161,.20);
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn.small{ padding:.55rem .8rem; font-size:.9rem }

/* =========================
   Services (cards)
========================= */
section.services > h2{
  /* Centers “Discover home tech that makes life easier and more fun.” */
  display:block; width:100%; text-align:center; margin:0 0 1.5rem;
}
.card-grid{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.card{
  height:210px; perspective:1000px; transition:transform .15s ease;
}
.card:hover{ transform:translateY(-2px) }
.card-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .6s ease;
}
.card:hover .card-inner,
.card:focus-within .card-inner{ transform:rotateY(180deg) }
.card-front,.card-back{
  position:absolute; inset:0; border-radius:16px; padding:1.25rem;
  display:flex; align-items:center; justify-content:center; text-align:center;
  backface-visibility:hidden;
  border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(2,8,23,.06);
}
.card-front{
  background:linear-gradient(180deg,#fff 0%, #f8fafc 100%); color:var(--text);
}
.card-front h3{ font-size:1.15rem }
.card-back{
  transform:rotateY(180deg);
  background:linear-gradient(180deg,#eaf9ff 0%, #e2f6ff 100%);
  color:#0b1020; border-color:rgba(14,165,233,.25);
}

/* Image-only card fronts */
.image-card .card-front{ padding:0 }
.image-fill{
  width:100%; height:100%;
  background-image: var(--bg-image);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border-radius:16px; position:relative;
}
.image-fill::after{
  content:""; position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 40%);
}
.cover-img{ width:100%; height:100%; object-fit:cover; border-radius:16px; display:block }
.fun-fact{ font-size:.98rem; line-height:1.35; color:#0b1020; max-width:85%; margin:0 auto }

/* =========================
   Promo card (boxed section)
========================= */
.promo-card{
  background:#fff; border:1px solid var(--border); border-radius:20px;
  padding:1.5rem; box-shadow:0 12px 32px rgba(2,8,23,.08);
}
@media (min-width:768px){ .promo-card{ padding:2rem } }
.promo-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem }
.promo-badge{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem;
  font-size:.8rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  color:#075985; background:linear-gradient(180deg, #eaf9ff 0%, #dff4ff 100%);
  border:1px solid rgba(56,189,248,.45); border-radius:999px;
}
.promo-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.75rem; justify-content:center }
.btn.btn-outline{
  background:#fff; color:var(--accent-deep); border:1px solid var(--accent-deep);
  box-shadow:0 4px 14px rgba(3,105,161,.12);
}
.btn.btn-outline:hover{ filter:brightness(1.03); transform:translateY(-1px) }

/* =========================
   Sticky nav bar
========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem; position:relative;
}
.brand{ display:flex; align-items:center; text-decoration:none; color:var(--text) }
.brand-mark{ height:40px; width:auto; display:block; border-radius:6px }
@media (max-width:900px){ .brand-mark{ height:34px } }
.primary-nav{ display:flex }
.nav-list{
  list-style:none; display:flex; align-items:center; gap:.5rem; margin:0; padding:0;
}
.nav-list li{ display:flex } /* ensures consistent centering */

/* Button-like chips (except main CTA .btn) */
.nav-list a:not(.btn){
  display:grid; place-items:center;       /* centers single or two-line labels */
  text-align:center; line-height:1.2;
  white-space:normal;                      /* allow wrap when needed */
  min-height:44px; padding:.6rem 1rem;

  font-weight:700; text-decoration:none; color:var(--text);
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 4px 12px rgba(2,8,23,.06);
}
.nav-list a:not(.btn):hover{
  background:#eaf9ff; border-color:rgba(56,189,248,.45);
}
.nav-list a[aria-current="page"]:not(.btn){
  border-color:var(--accent-deep); box-shadow:0 6px 16px rgba(3,105,161,.16);
}

/* Mobile menu */
.menu-toggle{
  display:none; border:1px solid var(--border); background:#fff; border-radius:8px;
  padding:.45rem .6rem; font-weight:600; color:var(--text);
}
@media (max-width:900px){
  .menu-toggle{ display:inline-block }
  .primary-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--border);
  }
  .nav.open .primary-nav{ display:block }
  .nav-list{ flex-direction:column; align-items:stretch; gap:.25rem; padding:.6rem }
  .nav-list a{ padding:.75rem .75rem }
}
/* ===== Consultation form polish ===== */
.contact-form{
  --field-bg:#fff;
  --field-border:var(--border);
  max-width: 880px;               /* keeps the form from stretching too wide */
  margin-inline: auto;
}

.contact-form .grid-2{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 720px){
  .contact-form .grid-2{ grid-template-columns: 1fr; }
}

.contact-form label{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  font-weight:700;                /* clearer section labels */
  color:var(--text);
  font-size:.95rem;
}

/* NEW: do not apply to checkboxes/radios */
.page-consultation .contact-form input:not([type="checkbox"]):not([type="radio"]),
.page-consultation .contact-form select,
.page-consultation .contact-form textarea{
  appearance:none;
  background:var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:12px;
  padding:.85rem .95rem;
  font:inherit;
  color:var(--text);
  box-shadow:0 2px 8px rgba(2,8,23,.04) inset;
}

/* Restore checkbox look + color */
.page-consultation .contact-form input[type="checkbox"]{
  appearance:auto;       /* or 'revert' */
  width:1.1rem;
  height:1.1rem;
  margin:0;
  accent-color: var(--accent-deep);
}
.page-consultation .checkbox label{ cursor:pointer; user-select:none; }

.contact-form textarea{
  min-height: 150px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#94a3b8; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:2px solid var(--accent-deep);
  outline-offset:2px;
  border-color:var(--accent-deep);
}

/* nicer select arrow */
.contact-form select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right .8rem center;
  padding-right:2.2rem;
}

/* date/time inputs look consistent */
.contact-form input[type="date"],
.contact-form input[type="time"]{
  padding-right:.95rem;
}

/* checkbox row */
.contact-form .checkbox{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:.4rem;
  font-weight:600;
  color:var(--muted);
}
.contact-form .checkbox input[type="checkbox"]{
  width:1.1rem; height:1.1rem;
  accent-color: var(--accent-deep);
}

/* center the buttons under the form and add breathing room */
.promo-card .promo-actions{
  justify-content: center;
  margin-top: 1rem;
}
:root{
  --bg: #f3f7fb;
  --text: #0f172a;
  --muted: #475569;
  --brand: #0ea5e9;
  --border: #e2e8f0;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#fff; color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Arial, sans-serif; }
.container{ width:min(1100px,92%); margin-inline:auto; }

/* Banner */
.brand-banner{ background:linear-gradient(180deg,#fff 0%,#f1f5f9 100%); border-bottom:1px solid var(--border); }
.brand-banner .brand-header{ display:block; width:min(1200px,100%); height:auto; margin:0 auto; padding:8px 16px; }
@media (max-width:640px){ .brand-banner .brand-header{ max-height:64px; width:auto; } }

/* Sticky nav */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.9); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; }
.brand-mark{ height:34px; width:auto; display:block; }
.menu-toggle{ display:none; }

.nav-list{ list-style:none; display:flex; gap:12px; margin:0; padding:0; flex-wrap:wrap; }
.nav-list a{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; color:var(--text); font-weight:600; padding:8px 12px; border-radius:10px; background:#fff; border:1px solid var(--border); }
.nav-list a:hover{ box-shadow:0 6px 14px rgba(2,8,23,.1); transform:translateY(-1px); }
.nav-list a[aria-current="page"]{ outline:3px solid rgba(14,165,233,.25); }
.nav-list .btn.small{ background:var(--brand); color:#fff; border:none; box-shadow:0 10px 25px rgba(14,165,233,.35); }
.nav-list .btn.small:hover{ filter:brightness(1.05); }

@media (max-width:760px){
  .menu-toggle{ display:inline-flex; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; font-weight:600; }
  .primary-nav{ display:none; }
  .nav.open .primary-nav{ display:block; width:100%; }
  .nav.open .nav-list{ margin-top:10px; }
}
/* --- Keep the sticky menu on ONE LINE (desktop) --- */
@media (min-width: 900px){
  /* give the nav a bit more room */
  .container{ width: min(1240px, 94%); }

  /* never wrap the nav row */
  .site-header .nav{ flex-wrap: nowrap; }

  /* make the list stay on one line and center nicely */
  .primary-nav{ flex: 1 1 auto; }
  .nav-list{
    flex-wrap: nowrap;       /* <-- key */
    justify-content: center; /* centers the chips */
    gap: 10px;
  }

  /* tighten the chips slightly to save space */
  .nav-list a{
    padding: 8px 10px;
    font-size: 15px;         /* optional: tiny reduction */
  }

  /* shrink the little logo a hair so it steals less width */
  .brand-mark{ height: 30px; }
}

/* Safety fallback: if a very small laptop still runs out of room,
   allow gentle horizontal scroll instead of wrapping. */
@media (min-width: 900px){
  .primary-nav{
    overflow-x: auto;
    scrollbar-width: none;
  }
  .primary-nav::-webkit-scrollbar{ display: none; }
}
/* === Header color tweaks (banner white, sticky menu gradient) === */

/* 1) Banner (behind the big Quirky Quantum image): pure white */
.brand-banner{
  background: #ffffff;                /* was a gradient — now solid white */
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(2,8,23,.03); /* subtle separator */
}

/* 2) Sticky menu bar: soft airy blue gradient */
.site-header{
  background: linear-gradient(180deg, #f6fbff 0%, #edf5fb 100%);
  /* Optional: remove the frosted look so the gradient shows cleanly */
  backdrop-filter: none;
}

/* Keep the nav on one line (from earlier tweak) */
@media (min-width: 900px){
  .container{ width: min(1240px, 94%); }
  .site-header .nav{ flex-wrap: nowrap; }
  .primary-nav{ flex: 1 1 auto; }
  .nav-list{ flex-wrap: nowrap; justify-content: center; gap: 10px; }
  .nav-list a{ padding: 8px 10px; font-size: 15px; }
  .brand-mark{ height: 30px; }
}
/* Bigger brand mark on the left */
.brand { display:flex; align-items:center; }
.brand-mark{
  height: 64px;            /* ↑ make it big (try 72px if you want even bigger) */
  width: auto;
}

/* Give the bar room and prevent wrapping */
.site-header .nav{ padding-block: 6px; }

@media (min-width: 1000px){
  .container{ width: min(1320px, 96%); }      /* a bit wider so chips still fit */
  .primary-nav{ flex: 1 1 auto; }
  .nav-list{
    flex-wrap: nowrap;                         /* keep on one line */
    justify-content: center;
    gap: 8px;                                  /* slightly tighter spacing */
  }
  .nav-list a{ padding: 6px 10px; font-size: 15px; } /* reclaim a few pixels */
}

/* If a smaller laptop still runs out of space, allow gentle side-scroll (no bar) */
@media (min-width: 1000px){
  .primary-nav{ overflow-x: auto; scrollbar-width: none; }
  .primary-nav::-webkit-scrollbar{ display: none; }
}
/* ===== Responsive dropdown nav (hidden until clicked) ===== */

/* Desktop & larger tablets: show full menu, no dropdown */
@media (min-width: 901px){
  .menu-toggle{ display: none !important; }
  .primary-nav{ display: block !important; position: static; box-shadow: none; }
  .nav-list{ flex-direction: row; flex-wrap: nowrap; justify-content: center; }
}

/* Small screens: show hamburger, hide menu until opened */
@media (max-width: 900px){
  .site-header .nav{ position: relative; }  /* positioning context for dropdown */
  .menu-toggle{
    display: inline-flex;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
  }

  /* dropdown panel (hidden by default) */
  .primary-nav{
    display: none;
    position: absolute;
    top: 100%;                /* directly under the bar */
    right: 0;
    width: min(280px, 92vw);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(2,8,23,.16);
    margin-top: 8px;
    z-index: 60;
    /* optional: soft slide effect */
    transform-origin: top right;
    opacity: 0; transform: scale(.98);
    transition: opacity .15s ease, transform .15s ease;
  }
  /* when open */
  .nav.open .primary-nav{
    display: block;
    opacity: 1; transform: scale(1);
  }

  .nav-list{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px;
    padding: 0;
  }
  .nav-list li{ list-style: none; }
  .nav-list a{
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
  }
  .nav-list a:hover{ transform: none; box-shadow: 0 2px 8px rgba(2,8,23,.08); }
  .nav-list .btn.small{ width: 100%; justify-content: center; }
}