/* ============================================================
   Floco French — site styles
   Base rules are taken verbatim from the Claude Design mock-up.
   Everything below "COMPONENT STATES" replaces the mock-up's
   style-hover="" attributes and the responsive gaps it had.
   Brand: #1D68D6 / #1550AE / #FFB020 / #FF6B6B / #17C0A9 /
          #F45D9E / #221A3A / #FFF7EE
   ============================================================ */

/* Web fonts live in fonts.css, loaded in parallel from the page head. */

/* ===== BASE (from the mock-up) ===== */
body{margin:0;background:#FFF7EE;color:#221A3A;font-family:"Plus Jakarta Sans",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
a{color:#1D68D6;text-decoration:none}
a:hover{color:#1550AE}
img{max-width:100%}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-24px) rotate(35deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* sticky header offset for anchor links */
:target{scroll-margin-top:110px}

/* ===== COMPONENT STATES (were style-hover="" in the mock-up) ===== */
.nav-link{transition:color .18s ease}
.nav-link:hover{color:#1D68D6}
.social-link:hover{color:#1D68D6}

.btn-primary:hover{background:#1550AE;color:#fff;transform:translateY(-2px)}
.btn-outline:hover{background:#221A3A;color:#FFF7EE;transform:translateY(-2px)}
.btn-white:hover{transform:translateY(-2px);color:#1D68D6}
.btn-ink:hover{background:#3a2d63;color:#FFF7EE;transform:translateY(-2px)}
.btn-ghost:hover{border-color:#1D68D6;transform:translateY(-2px)}
.btn-submit:hover{background:#1550AE}
.btn-submit:disabled{opacity:.6;cursor:progress}

.footer-link{transition:color .18s ease,opacity .18s ease}
.footer-link:hover{opacity:1!important;color:#FFB020}

.logo-link{display:flex;align-items:center;text-decoration:none}
.logo-link:hover{color:inherit}

/* visible keyboard focus (the mock-up had none) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #1D68D6;outline-offset:2px;border-radius:6px}
input:focus,select:focus,textarea:focus{border-color:#1D68D6!important}

/* ===== FAQ ACCORDION (was <sc-if> in the mock-up) ===== */
.faq-q{transition:color .18s ease}
.faq-q:hover{color:#1D68D6}
.faq-a[hidden]{display:none}
.faq-sign{display:inline-block;transition:transform .2s ease}
.faq-q[aria-expanded="true"] .faq-sign{transform:translateY(-50%) rotate(45deg)}

/* ===== REVEAL ON SCROLL =====
   Handled in JS exactly like the mock-up: elements are only hidden
   once JS confirms they are below the fold, so no-JS visitors and
   search engines always see the full page. */
[data-reveal="1"]{will-change:auto}

/* ============================================================
   REVIEWS CAROUSEL — the 12 Google reviews, in full.
   Horizontal scroll-snap track: swipe on touch, arrows on desktop,
   arrow keys when the track has focus. Gentle auto-advance that
   stops as soon as anyone interacts (and never runs under
   prefers-reduced-motion).
   ============================================================ */
.reviews-track{
  display:flex;gap:20px;align-items:flex-start;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin-top:44px;padding:4px 2px 14px;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
}
.reviews-track::-webkit-scrollbar{display:none}
.reviews-track:focus-visible{outline:3px solid #1D68D6;outline-offset:4px;border-radius:24px}
@media(prefers-reduced-motion:reduce){.reviews-track{scroll-behavior:auto}}

.review-card{
  flex:0 0 330px;scroll-snap-align:start;
  background:#FFFDFA;border:1px solid #DFE9F5;border-radius:22px;
  padding:26px 24px;display:flex;flex-direction:column;gap:14px;
}
.review-stars{color:#FFB020;letter-spacing:1px;font-size:16px;line-height:1}
.review-quote{
  font-family:Fraunces,Georgia,serif;font-style:italic;
  font-size:15.5px;line-height:1.45;margin:0;color:#221A3A;
}
/* Long reviews are folded, never cut: JS adds .is-clamped only when the
   text actually overflows, so a visitor without JS still sees it whole. */
.review-card.is-clamped .review-quote{max-height:300px;overflow:hidden;position:relative}
.review-card.is-clamped .review-quote::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,253,250,0),#FFFDFA 88%);
}
.review-card.is-open .review-quote{max-height:none}
.review-card.is-open .review-quote::after{display:none}
.review-more{
  align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:13.5px;
  color:#1D68D6;text-decoration:underline;text-underline-offset:3px;
  transition:color .18s ease;
}
.review-more:hover{color:#1550AE}

.review-author{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.review-avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;
  color:#fff;font-size:17px;
}
.review-name{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:15px}
.review-meta{font-size:13px;color:#5B5270}

.reviews-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;flex-wrap:wrap}
.rev-btn{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  border:2px solid #221A3A;background:transparent;color:#221A3A;
  font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease,transform .18s ease,opacity .18s ease;
}
.rev-btn:hover:not(:disabled){background:#221A3A;color:#FFF7EE;transform:translateY(-2px)}
.rev-btn:disabled{opacity:.3;cursor:default}
.reviews-note{font-size:13.5px;color:#5B5270}
.reviews-note a{color:#5B5270;text-decoration:underline;text-decoration-color:#E0CDBB}
.reviews-note a:hover{color:#221A3A}

@media(max-width:560px){
  .review-card{flex-basis:82vw}
  .reviews-track{gap:14px}
}

/* ===== FORM SIZING =====
   Grid items default to min-width:auto, so the <select> was forcing its
   column as wide as its longest option and spilling out of the card. */
form select,form input,form textarea{min-width:0;max-width:100%;width:100%}
form select{text-overflow:ellipsis}

/* ===== FORM FEEDBACK ===== */
.field-error{font-size:12.5px;color:#D6455D;font-weight:600;margin:0}
.form-status{margin:14px 0 0;font-size:14px;font-weight:600;text-align:center}
.form-status.is-error{color:#D6455D}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ============================================================
   RESPONSIVE — the mock-up hard-coded a few multi-column grids
   that broke below ~900px. These media queries only relax the
   column counts; no colour, type or content is changed.
   ============================================================ */

/* --- Footer: 4 fixed columns --- */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:28px!important;padding:48px 0 32px!important}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr!important}
  .footer-bottom{justify-content:center!important;text-align:center!important}
}

/* --- "Why me" / method section: 1fr 1.05fr --- */
@media(max-width:900px){
  .method-grid{grid-template-columns:1fr!important;gap:36px!important}
}

/* --- Form: paired 1fr 1fr rows --- */
@media(max-width:560px){
  .form-row{grid-template-columns:1fr!important}
  .level-row{grid-template-columns:1fr!important}
}

/* --- Header --- */
@media(max-width:860px){
  .site-header .header-inner{padding:12px 18px!important;gap:12px!important}
  /* nav drops to its own row and scrolls sideways instead of wrapping,
     so the sticky header stays short on a phone */
  .site-header nav{margin-left:0!important;gap:16px!important;order:3;width:100%;
    flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .site-header nav::-webkit-scrollbar{display:none}
  .site-header nav a{font-size:14px!important;white-space:nowrap}
  .site-header .header-cta{margin-left:auto!important}
}
@media(max-width:520px){
  .site-header nav{gap:13px!important}
  .site-header nav a{font-size:13px!important}
  /* a 68px logo eats a third of a phone screen in a sticky header */
  .logo-link{height:46px!important}
  .logo-word{font-size:23px!important}
  .logo-bubble{width:20px!important;height:18px!important;margin-bottom:-2px!important}
  .header-inner{padding:10px 18px!important}
}

/* --- Hero --- */
@media(max-width:900px){
  .hero{padding:48px 0 24px!important}
  .hero-grid{gap:34px!important}
  .hero-media{padding:0 0 40px 24px!important}
}
@media(max-width:560px){
  .hero-media{padding:0 0 34px 18px!important}
}

/* --- Generic section rhythm on small screens --- */
@media(max-width:640px){
  .sec{padding:52px 0!important}
  .card-pad{padding:24px 20px!important}
  .panel-pad{padding:26px 20px!important}
  .cta-pad{padding:40px 22px!important}
  .diag-box{padding:24px 20px!important}
}

/* --- Buttons wrap nicely on narrow phones --- */
@media(max-width:420px){
  .btn-primary,.btn-outline,.btn-white,.btn-ink{width:100%;justify-content:center;text-align:center}
  .hero-actions{width:100%}
}

/* --- Fine print / diagnostic box --- */
@media(max-width:760px){
  .diag-box{flex-direction:column!important;align-items:flex-start!important}
}

/* --- Proof photo tiles --- */
@media(max-width:520px){
  .proof-grid{grid-template-columns:1fr 1fr!important}
}