/* =========================================================
   Quail Design System — compact, consistent, calm
   ========================================================= */

/* Base / Tokens */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root {
  /* Brand */
  --forest: #1b6e6b;
  --teal-d: #109491;
  --teal:   #1ca29f;
  --gold:   #ddaf3d;
  --white:  #ffffff;

  /* Light (default) */
  --bg: #ffffff;
  --fg: #101113;
  --muted: #5d6675;
  --card: #f6f7fb;
  --border: #e6e8ef;

  --brand: var(--teal-d);
  --brand-2: var(--teal);
  --accent: var(--gold);

  /* Layout scale */
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius: 16px;
  --shadow: 0 8px 28px rgba(0,0,0,.10);
  --max-w: 1080px;

  /* Motion */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t-med: .28s;

  /* Header / Logo sizing (responsive, non-distorting) */
  /* Logo height grows with viewport, but stays within a sensible range */
  --logo-h: clamp(84px, 8.8vw, 120px);
  /* Vertical padding for the header so the logo breathes */
  --header-pad-y: 10px;
  /* Header height used by sticky offset + anchor scroll */
  --header-h: calc(var(--logo-h) + 2 * var(--header-pad-y));
}

/* Tweak logo a bit smaller on very narrow screens */
@media (max-width: 480px) {
  :root {
    --logo-h: clamp(68px, 18vw, 92px);
    --header-pad-y: 8px;
    --header-h: calc(var(--logo-h) + 2 * var(--header-pad-y));
  }
}

/* Dark via body class (matches JS localStorage) */
body.theme-dark {
  --bg:#0f1115; --fg:#e7e9ee; --muted:#9aa0aa; --card:#171a21; --border:#2a2f3a;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}

.container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-4); }

img { display: block; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; }
picture { display: block; }

/* Type */
h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--space-6); }
.hero-title { font-size: clamp(1.9rem, 3.4vw + 0.6rem, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.1vw + 0.6rem, 2rem); font-weight: 800; }
h3 { font-size: clamp(1.06rem, 1.2vw + 0.7rem, 1.25rem); font-weight: 700; }
p { margin: 0 0 var(--space-4); }

/* Links: remove underline-on-hover globally (nav has its own bar) */
a { color: var(--brand); text-decoration: none; transition: color var(--t-fast) var(--e-out); }
a:hover { text-decoration: none; }

/* Accessibility */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 1px 1px)!important;white-space:nowrap!important;border:0!important;}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:fixed;left:var(--space-4);top:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--fg);color:var(--bg);border-radius:10px;z-index:1000;}

/* Make anchor jumps account for sticky header (uses responsive --header-h) */
[id] { scroll-margin-top: var(--header-h); }

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 92%, var(--fg) 8%);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(6px);
}
.header-inner{
  display:flex; align-items:center; gap:var(--space-6);
  min-height: var(--header-h);
  padding-block: var(--header-pad-y);
}

.brand{display:inline-flex;align-items:center;gap:1rem;color:var(--fg);}

/* Precise logo sizing:
   - Honor native aspect (2790/2000)
   - Control height by --logo-h
   - Width auto to prevent distortion
*/
.brand-logo{
  height: var(--logo-h);
  width: auto;                    /* prevents distortion */
  aspect-ratio: 2790 / 2000;      /* maintains intrinsic proportions */
  object-fit: contain;            /* contain within allocated box */
  border-radius: 16px;            /* soft corners if your SVG has transparent bounds */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

.brand-word{font-weight:800;letter-spacing:.2px;}

/* Mobile hamburger */
.hamburger{display:none; margin-left:auto; background:transparent; border:0; padding:.5rem; cursor:pointer;}
.hamburger-box{display:inline-block; width:28px; height:20px; position:relative;}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--fg); border-radius:2px; transition: transform var(--t-med) var(--e-out), opacity var(--t-fast);
}
.hamburger-inner{ top:9px; }
.hamburger-inner::before{ top:-8px; }
.hamburger-inner::after{ top:8px; }

/* primary menu */
.nav-links{display:flex;gap:var(--space-6);margin-left:auto;align-items:center;flex-wrap:wrap;}
.nav-links a{color:var(--fg);font-weight:600;position:relative;outline: none;}
/* sleek bar hover/active; no text underline */
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background: var(--accent);
  transition: right var(--t-med) var(--e-out);
}
.nav-links a:hover::after{ right:0; }
/* Active section highlight via aria-current */
.nav-links a[aria-current="page"]::after{ right:0; }
/* focus-visible ring for accessibility */
.nav-links a:focus-visible{ outline: 3px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 4px; border-radius: 8px; }

.theme-btn{
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  padding: .6rem .8rem;
  border-radius: 999px;
}
.theme-btn:focus-visible{ outline: 3px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 2px; }

/* mobile menu */
@media (max-width: 860px){
  .hamburger{display:block;}
  .nav-links{
    position: fixed; inset: var(--header-h) 0 auto 0; transform: translateY(-120%);
    display:flex; flex-direction: column; align-items: flex-start;
    gap: 0; padding: .5rem 1rem 1rem;
    background: var(--bg); border-bottom: 1px solid var(--border);
    transition: transform var(--t-med) var(--e-out);
  }
  body.nav-open .nav-links{ transform: translateY(0); }
  .nav-links a, .nav-links .theme-btn{ padding: 1rem .5rem; width: 100%; }
  body.nav-open { overflow: hidden; } /* prevent background scroll when menu open */
}

/* Sections */
.section { padding: clamp(2rem, 6vw, var(--space-12)) 0; }
.section-alt { background: linear-gradient(180deg, color-mix(in oklab, var(--card) 40%, var(--bg) 60%), var(--bg)); border-block: 1px solid var(--border); }
.section-title { display: inline-flex; align-items: center; gap: .5rem; }
.section-title::after { content: ""; height: 3px; width: 40px; background: var(--accent); border-radius: 2px; display: inline-block; }

/* Hero background (subtle) */
.hero{
  position:relative; overflow:clip;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--teal) 18%, transparent) 0%, transparent 60%),
    radial-gradient(120% 60% at 50% 100%, color-mix(in oklab, var(--gold) 16%, transparent) 0%, transparent 60%);
}
.hero-inner{padding:var(--space-12) 0 var(--space-8);text-align:center;}

/* Typing mask caret + wrapping */
.typed-mask{
  display:inline-block; min-height: 1.2em; border-right: 2px solid var(--brand);
  white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.15;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink{ 50% { border-color: transparent; } }

.tagline{color: var(--muted); font-weight: 600; margin-bottom: var(--space-6);}

/* Card system */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1rem, 3.5vw, var(--space-8));
  box-shadow: var(--shadow);
  transition: transform var(--t-med) var(--e-out), box-shadow var(--t-med) var(--e-out), border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border) 65%);
}
.card:focus-within{ outline: 3px solid color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 2px; }

/* Grids */
.cards{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:stretch;}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}

.value-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-6);padding:0;list-style:none;align-items:stretch;}
@media (min-width:760px){.value-grid{grid-template-columns:repeat(4,1fr)}}

/* Solutions details */
.details{margin-top:var(--space-6);}
.details-summary{cursor:pointer;font-weight:700;}
.details-body{margin-top:var(--space-4);}
.tick{padding-left:1.1em;margin:0;}
.tick li{margin:.25rem 0;}

/* HOW: steps inside cards grid (same card height as others) */
.steps { list-style: none; margin: 0; padding: 0; }
.step{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  height: 100%;
}
.step-num{
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 800; margin-top: .15rem;
}
.step-body{ display: grid; align-content: start; gap: .25rem; }

/* Impact */
.impact-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);}
.stat{font-size:2rem;font-weight:800;color:var(--brand);margin-bottom:.25rem;}
@media (min-width:760px){.impact-grid{grid-template-columns:repeat(3,1fr)}}

/* Media row (sizes unchanged) */
.section-media{padding-top:var(--space-12);}
.image-row{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-6);}
.media{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform var(--t-med) var(--e-out), box-shadow var(--t-med) var(--e-out);
  cursor: zoom-in;
}
.media:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 18px 36px rgba(0,0,0,.18); }
@media (min-width:900px){.image-row{grid-template-columns:repeat(3,1fr)}}

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: grid; place-items: center; z-index: 9999; cursor: zoom-out; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.4); }

/* FAQ — compact */
.faq-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-6);}
@media (min-width:900px){.faq-grid{grid-template-columns:repeat(2,1fr)}}
.faq-item{background:transparent;border:1px solid var(--border);border-radius:12px;padding:.75rem .9rem;transition:border-color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out);}
.faq-item[open]{background:color-mix(in oklab, var(--card) 70%, transparent);border-color:color-mix(in oklab, var(--brand) 30%, var(--border));}
.faq-item summary{font-weight:700;cursor:pointer;list-style:none;outline:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item p{margin-top:.5rem;color:var(--muted);font-size:.95rem;}

/* Buttons */
.button{display:inline-block;font-weight:800;letter-spacing:.2px;border-radius:999px;padding:.75rem 1.1rem;border:1px solid var(--border);transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out),filter var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);}
.button:active{transform:translateY(1px);}
.button-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border:none;box-shadow:0 6px 18px rgba(16,148,145,.28);}
.button-primary:hover{filter:brightness(1.06);text-decoration:none;}
.button-secondary{background:var(--card);color:var(--fg);}
.button-tertiary{background:transparent;color:var(--brand);}
.button:focus-visible{outline: 3px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 2px;}

/* Contact */
.cta .cta-wrap{display:grid;gap:var(--space-8);align-items:start;}
.cta-copy p{color:var(--muted);margin-top:-.5rem;}
.email-inline{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--space-4);align-items:center;}
.copy-hint{display:inline-block;margin-top:.35rem;color:var(--muted);min-height:1.2em;}
.contact{display:grid;gap:var(--space-4);}
.grid-2{display:grid;gap:var(--space-4);grid-template-columns:1fr;}
@media (min-width:860px){.cta .cta-wrap{grid-template-columns:1.1fr .9fr}.grid-2{grid-template-columns:repeat(2,1fr)}}

/* Inputs — theme aware (including select placeholder) */
input,select,textarea{
  width:100%;
  border:1px solid var(--border);
  background: var(--card);
  padding:.8rem .9rem;
  border-radius:12px;
  color: var(--fg);
  transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
input::placeholder, textarea::placeholder{ color: color-mix(in oklab, var(--muted) 90%, transparent); }
select:invalid{ color: var(--muted); }
select option{ color: var(--fg); background: var(--bg); }
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color: color-mix(in oklab, var(--brand) 45%, var(--border) 55%);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent);
}
textarea{resize:vertical;}
.form-note{color:var(--muted);margin-top:.25rem;}

/* Copy email field — theme aware */
.copy-field{display:flex;gap:.5rem;align-items:center;margin-top:.75rem;max-width:520px;}
.copy-input{
  flex:1 1 auto;
  font: inherit;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .8rem .9rem;
  min-width: 220px;
  transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.copy-input:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--brand) 45%, var(--border) 55%);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent);
}
.copy-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  padding: .7rem .9rem;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), filter var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.copy-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.12); text-decoration: none; }
.copy-btn:active{ transform: translateY(0); }
.icon{ display:block; }
.icon-check{ opacity: 0; transform: scale(.6); transition: opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out); }
.icon-copy{ opacity: 1; transform: scale(1); transition: opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out); }
.copy-btn.is-copied .icon-check{ opacity: 1; transform: scale(1); }
.copy-btn.is-copied .icon-copy{ opacity: 0; transform: scale(.6); }
.copy-label{ transition: opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out); }
.copy-btn.is-copied .copy-label{ opacity:.0; transform: translateY(-4px); position: relative; }
.copy-btn.is-copied::after{
  content: "Copied!";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 4px);
  font-weight: 800;
  font-size: .95rem;
  color: var(--brand);
  opacity: 1;
  animation: copiedIn var(--t-med) var(--e-out);
}
@keyframes copiedIn{ from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,4px);} }

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:var(--space-8) 0 var(--space-12);}
.footer-inner{text-align:center;}
.footer-nav{display:inline-flex;gap:.6rem;align-items:center;margin-bottom:.5rem;}
.footer-nav a{color:var(--muted);}
.footer-nav a:hover{color:var(--fg);}
.footer-nav .dot{color:var(--muted);}
.copyright{display:block;color:var(--muted);}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

/* === NAV TIGHTEN: keep logo inside without growing the header === */
:root {
  /* Slightly smaller default logo height so the header doesn’t get tall */
  --logo-h: clamp(60px, 7vw, 90px);
  /* A bit less vertical padding in the header */
  --header-pad-y: 6px;
  /* Recompute header height from these */
  --header-h: calc(var(--logo-h) + 2 * var(--header-pad-y));
}

/* Add a touch of inset so the logo never kisses the edges */
.header-inner {
  min-height: var(--header-h);
  padding-block: var(--header-pad-y);
  overflow: hidden; /* prevents any tiny overflow from tall assets */
}

/* Keep aspect ratio, shrink just a hair, and add breathing room */
.brand-logo {
  height: calc(var(--logo-h) - 8px); /* logo slightly smaller than header */
  width: auto;                       /* no distortion */
  aspect-ratio: 2790 / 2000;         /* your logo’s native ratio */
  object-fit: contain;
  margin-block: 3px;                 /* visible space top/bottom */
}

/* Optional: slightly tighter gap so nav+logo feel cohesive on small screens */
@media (max-width: 860px) {
  .header-inner { gap: clamp(12px, 2vw, 20px); }
}