/* ============================================================
   MAILLE'S METHOD FOR BUSINESS — style.css v2
   Basato su BRAND.md v1.0 — ogni valore viene dai token.
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ─── TOKEN (da BRAND.md §4-6) ─── */
:root{
  /* colori */
  --purple:       #6558B1;
  --purple-dark:  #4B3F8F;
  --ink:          #2A2540;
  --text-soft:    #6B6785;
  --white:        #FFFFFF;
  --lavender:     #EFECFB;
  --lavender-deep:#E4DFF7;
  --yellow:       #FFC93C;
  --teal:         #3FC8C4;
  --coral:        #FF6B57;
  --blue:         #5AA9F7;

  /* tipografia */
  --f-display:'Fredoka',sans-serif;
  --f-body:'Nunito',sans-serif;

  /* layout */
  --maxw:1140px;
  --pad-x:40px;
  --sec-y:96px;
  --r-card:20px;
  --r-pill:100px;

  /* ombre (solo soft) */
  --sh-card:0 12px 28px -16px rgba(42,37,64,.14);
  --sh-card-hover:0 18px 36px -16px rgba(42,37,64,.18);
  --sh-btn:0 8px 20px -8px rgba(101,88,177,.45);
  --border-soft:1.5px solid rgba(42,37,64,.08);
}

html{scroll-behavior:smooth}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--f-body);font-size:16px;font-weight:500;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--purple);outline-offset:3px;border-radius:4px}

/* ─── TIPOGRAFIA (scala fissa BRAND.md §5) ─── */
.t-display{font-family:var(--f-display);font-weight:600;font-size:clamp(40px,5vw,64px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.t-h2{font-family:var(--f-display);font-weight:600;font-size:clamp(30px,3.4vw,40px);line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
.t-h3{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.3;color:var(--ink)}
.t-lead{font-size:18px;line-height:1.6;color:var(--text-soft)}
.t-label{font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}

/* highlight marker — UNICO stile ammesso (BRAND.md §5) */
.mark{position:relative;display:inline-block;color:var(--purple);z-index:1}
.mark::after{
  content:"";position:absolute;left:-4px;right:-4px;bottom:2px;height:36%;
  background:var(--yellow);border-radius:5px;z-index:-1;transform:rotate(-1deg);
}

/* ─── LAYOUT ─── */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.section{padding:var(--sec-y) 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 56px}
.sec-head .t-label{display:inline-block;margin-bottom:14px}
.sec-head .t-h2{margin-bottom:16px}

@media(max-width:860px){
  :root{--pad-x:24px;--sec-y:64px}
  .sec-head{margin-bottom:40px}
}

/* ─── NAV ─── */
/* Scoped to .site-nav (not bare `nav`) so this sticky/glass style never
   leaks onto other <nav> elements on the page, e.g. the footer nav
   (BUG FIX #3: footer links were covered by this same white glass bg). */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:var(--border-soft);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:7px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.logo-img{height:50px;width:auto;display:block}

/* Hamburger toggle: hidden on desktop, shown only ≤860px (see media block below) */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;border:none;background:transparent;cursor:pointer;
  border-radius:10px;flex-shrink:0;
}
.nav-toggle:hover{background:var(--lavender)}
.nav-toggle span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);margin:0 auto;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{
  font-size:14px;font-weight:600;color:var(--text-soft);text-decoration:none;
  padding:8px 13px;border-radius:10px;transition:color .15s,background .15s;
}
.nav-links a:hover{color:var(--ink);background:var(--lavender)}
/* nav CTA: unico bottone giallo del sito (BRAND.md §7) */
.nav-cta{
  font-family:var(--f-display);font-weight:600;font-size:14px;
  background:var(--yellow);color:var(--ink);text-decoration:none;
  padding:10px 20px;border-radius:var(--r-pill);white-space:nowrap;
  transition:transform .15s,box-shadow .15s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(255,201,60,.7)}

/* Nav collapses to the hamburger at 960px — earlier than the 860px page
   layout breakpoint — because the horizontal nav (logo + 4 links + CTA +
   40px side padding) runs out of room around ~930px, before the content
   layout does. 960 is the existing BRAND.md breakpoint (the same one used
   for the 3->2 card grid), reused here rather than inventing a new one.
   This block is nav-only on purpose; page-layout rules stay at 860px. */
@media(max-width:960px){
  /* Mobile logo: smaller so it doesn't crowd the CTA + hamburger (BUG FIX #4) */
  .logo-img{height:34px}

  /* Nav links become a dropdown panel toggled by the hamburger button,
     instead of just vanishing (BUG FIX #5). Collapsed by default.
     Note: --pad-x is still 40px in the 861-960px band (it only drops to
     24px at the 860px breakpoint), so the dropdown padding matches the
     nav's own side padding here — intended. */
  .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:var(--border-soft);box-shadow:var(--sh-card);
    padding:10px var(--pad-x) 16px;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .25s ease,opacity .2s ease;
  }
  .nav-links.open{max-height:320px;opacity:1}
  .nav-links a{padding:12px 14px;border-radius:12px}
  .nav-toggle{display:flex}
}

@media(max-width:480px){
  .logo-img{height:28px}
}

/* ─── BOTTONI (BRAND.md §7) ─── */
.btn{
  font-family:var(--f-display);font-weight:600;font-size:16px;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border:none;cursor:pointer;border-radius:var(--r-pill);
  padding:16px 30px;transition:background .2s,transform .15s,box-shadow .2s;
  white-space:nowrap;
}
.btn-primary{background:var(--purple);color:#fff;box-shadow:var(--sh-btn)}
.btn-primary:hover{background:var(--purple-dark);transform:translateY(-1px)}
.btn-primary svg{width:17px;height:17px}
.btn-ghost{
  font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--purple);
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  padding:10px 2px;border-bottom:2.5px solid transparent;transition:border-color .2s;
}
.btn-ghost:hover{border-color:var(--purple)}
/* bottone su sfondo viola */
.btn-inverse{background:#fff;color:var(--purple);box-shadow:0 8px 20px -8px rgba(0,0,0,.3)}
.btn-inverse:hover{background:var(--lavender);transform:translateY(-1px)}

/* ─── CHIP (BRAND.md §7) ─── */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid var(--lavender-deep);border-radius:var(--r-pill);
  padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink);
}
.chip svg{flex-shrink:0}
.chip-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--lavender);border:1.5px solid var(--lavender-deep);
  border-radius:var(--r-pill);padding:8px 18px;
  font-size:13px;font-weight:700;color:var(--purple);
}
.flag-svg{border-radius:3px;flex-shrink:0}

/* ─── HERO ─── */
.hero{padding:72px 0 84px}
.hero-grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.hero .chip-badge{margin-bottom:24px}
.hero h1{margin-bottom:20px}
.hero .t-lead{max-width:480px;margin-bottom:32px}
.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.proof-row{display:flex;gap:10px;flex-wrap:wrap}

/* hero visual: foto in card soft + chip flottanti */
.hero-art{position:relative;max-width:480px;width:100%;justify-self:end}
.photo-card{
  position:relative;border-radius:28px;overflow:hidden;
  /*background:var(--lavender);
  background-image:radial-gradient(rgba(101,88,177,.10) 1.6px,transparent 1.6px);*/
  background-size:22px 22px;
  aspect-ratio:15/16;
}
.photo-card img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:88%;height:94%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 16px 26px rgba(42,37,64,.20));
}
/* .fc-badge resta: è condivisa con il badge "✓ Saved" del componente
   "the method" (.pf-notes-head), quindi non è orfana anche dopo la
   rimozione dei due box flottanti dell'hero. */
.fc-badge{font-size:10px;font-weight:800;color:#1e7d4f;background:#DDF5E7;border-radius:100px;padding:2px 8px}
/* micro-accento playful: uno solo per viewport (BRAND.md §4) */
.squiggle{position:absolute;top:-14px;left:8%;width:56px;height:26px;z-index:3}

@media(max-width:860px){
  .hero{padding:40px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-art{justify-self:center;max-width:400px}
  .cta-row{gap:14px}
}
@media(max-width:480px){
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{justify-content:center}
  .cta-row .btn-ghost{justify-content:center}
}

/* ─── METHOD ─── */
.method{background:var(--lavender)}
.method-row{display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:center}

/* .platform-frame is just a positioning context now (no border/shadow of its
   own) so the two overlay cards below can sit on top of / spill past the
   edge of the photo, like the reference mock. The photo itself (and its
   clipping/border/shadow) lives in .pf-media. */
.platform-frame{position:relative;width:100%}
.pf-media{
  width:100%;border-radius:var(--r-card);overflow:hidden;
  border:var(--border-soft);box-shadow:var(--sh-card);background:#fff;
}
/* BUG FIX #1: the <img> carries width/height HTML attributes (988x1024).
   Without height:auto, the browser keeps height pinned to the attribute
   value while max-width:100% shrinks the width -> squashed/stretched image.
   Scoped here rather than on the global `img` rule. */
.pf-media img{width:100%;height:auto;display:block}
/* Placeholder used until the real 1:1 asset is ready (see README note) */
.pf-media .img-placeholder{
  width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;background:var(--lavender-deep);
  border:2px dashed var(--purple);color:var(--purple-dark);
  font-family:var(--f-body);font-weight:700;font-size:13px;line-height:1.5;
}

/* Overlay UI card: real HTML/CSS (not baked into the photo) so text stays
   crisp at any size and is easy to update later. */
.pf-card{
  position:absolute;z-index:4;background:#fff;
  border:var(--border-soft);border-radius:14px;box-shadow:var(--sh-card);
  padding:14px 16px;
}
.pf-notes-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.pf-notes-title{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--ink)}
.pf-toolbar{display:flex;align-items:center;gap:2px;padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--lavender-deep)}
.pf-toolbar span{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--text-soft);border-radius:6px;
}
.pf-notes-text{font-size:11.5px;line-height:1.55;color:var(--text-soft);font-weight:500}
.pf-notes-sub{margin-top:8px;padding-top:8px;border-top:1px solid var(--lavender-deep)}
.pf-highlight{background:var(--yellow);color:var(--ink);border-radius:4px;padding:0 3px;font-weight:700}

.pf-notes{top:34%;left:46%;right:-4%}
/* "Speaking confidence" overlap — fluid, single formula (no breakpoints).
   Only `right` (the horizontal spill past the photo's edge) needs to scale
   with viewport width; `top` is already a %, so it already tracks the
   frame's height with no discontinuity and doesn't need to change.
     - `right` is expressed entirely in px (not %) so it depends only on
       100vw, never on the width of .platform-frame itself. That matters
       because .platform-frame's own width already has a hard jump at the
       860px breakpoint (2-col grid share -> fixed max-width:520px,
       untouched here as it's outside this task's scope) — a %-based
       offset would have inherited that jump as a visible micro-snap in
       the card's position. Anchored in px, the overlap is immune to it.
     - clamp(-10px, …, 20px): at >=1160px the calc term is <=0 so the
       clamp floor (-10px) applies — matching today's ~-2% desktop spill
       (a ~469px-wide frame x -2% ≈ -9.4px) closely enough to be visually
       equivalent. Below 1160px the value grows linearly as the viewport
       narrows, so the spill shrinks smoothly through 861–1160px (reduced
       but still present) and keeps shrinking below 861px, pulling the
       card fully onto the photo instead of past its edge — it never
       drops into static/stacked flow. The 20px ceiling is a safety cap,
       not reached in the supported width range.
     - `width` is a separate fluid clamp (vw-based, same rationale) so the
       card's content (title, percentage, bar) never gets squeezed as
       `right` grows — only its position changes, not its readability. */
.pf-progress{
  top:78%;
  width:clamp(150px,32vw,215px);
  right:clamp(-10px,calc(-10px + (1160px - 100vw) * 0.03),20px);
}
.pf-progress-value{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--ink)}
.pf-progress-row{display:flex;align-items:center;gap:10px;margin-top:2px}
.pf-bar{flex:1;height:8px;border-radius:100px;background:var(--lavender-deep);overflow:hidden}
.pf-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--purple),var(--teal))}
.pf-spark{width:38px;height:22px;flex-shrink:0}

.mcards{display:flex;flex-direction:column;gap:14px}
.mcard{
  display:flex;gap:16px;align-items:flex-start;
  background:#fff;border:var(--border-soft);border-radius:var(--r-card);
  padding:20px 22px;box-shadow:var(--sh-card);
  transition:transform .18s,box-shadow .18s;
}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--sh-card-hover)}
.mcard-ico{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.mcard-ico.purple{background:var(--purple)}
.mcard-ico.teal{background:var(--teal)}
.mcard-ico.coral{background:var(--coral)}
.mcard-ico.ink{background:var(--ink)}
.mcard h3{font-size:17px;margin-bottom:4px}
.mcard p{font-size:14px;line-height:1.6;color:var(--text-soft)}
.sec-cta{text-align:center;margin-top:44px}

/* NOTE: the old max-width:1150px rule that switched .pf-card to
   position:static (stacking the cards below the photo instead of
   overlapping it) has been removed. It existed to stop the *two* cards
   from colliding/overflowing at narrow widths. With "shared lesson notes"
   disabled (see the commented-out .pf-notes block above) only
   .pf-progress remains, and it now stays position:absolute permanently —
   its overlap amount is handled by the fluid clamp() on .pf-progress
   itself, so no breakpoint is needed to keep it readable and contained. */

@media(max-width:860px){
  .method-row{grid-template-columns:1fr;gap:28px}
  .platform-frame{max-width:520px;margin:0 auto}
}

@media(max-width:480px){
  .pf-notes-text{font-size:11px}
}

/* ─── MEET MAILLE ─── */
.maille-grid{
  display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;
  max-width:900px;margin:0 auto;
}
.maille-photo{
  width:230px;height:230px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--lavender);
  background-image:radial-gradient(rgba(101,88,177,.10) 1.5px,transparent 1.5px);
  background-size:18px 18px;
  border:5px solid #fff;box-shadow:var(--sh-card);
  position:relative;
}
.maille-photo img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:96%;height:96%;object-fit:contain;object-position:bottom;
}
.maille-copy .t-label{display:inline-block;margin-bottom:12px}
.maille-copy h2{margin-bottom:16px;font-size:clamp(26px,3vw,34px)}
.maille-copy p{color:var(--text-soft);margin-bottom:14px;max-width:560px}
.cred-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

@media(max-width:860px){
  .maille-grid{grid-template-columns:1fr;gap:28px;text-align:center;justify-items:center}
  .maille-photo{width:190px;height:190px}
  .cred-row{justify-content:center}
}

/* ─── FOR MANAGERS (viola) ─── */
.managers{background:var(--purple)}
.managers .t-label{color:var(--yellow)}
.managers .t-h2{color:#fff}
.managers .t-lead{color:rgba(255,255,255,.78)}
/* BUG FIX #2: .mark text is purple by default, which is invisible on this
   section's purple background (same color). Override to ink so "measure"
   is readable both on the purple bg and on the yellow highlight strip. */
.managers .mark{color:var(--ink)}
.managers-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.check-list{list-style:none;display:flex;flex-direction:column;gap:15px;margin:28px 0 34px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.92);line-height:1.55}
.check-ico{
  width:24px;height:24px;border-radius:8px;background:var(--yellow);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.check-list strong{color:#fff;font-weight:700}

/* dashboard mock */
.dashboard{
  background:#fff;border-radius:var(--r-card);padding:26px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.45);
}
.db-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.db-title{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink)}
.db-sub{font-size:12px;font-weight:600;color:var(--text-soft)}
.db-tag{font-size:11px;font-weight:700;color:var(--purple);background:var(--lavender);padding:4px 11px;border-radius:100px}
.db-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.db-kpi{background:var(--lavender);border-radius:14px;padding:14px 13px}
.db-kpi-num{font-family:var(--f-display);font-weight:600;font-size:23px;color:var(--ink);line-height:1}
.db-kpi-num span{font-size:14px}
.db-kpi-lbl{font-size:11px;font-weight:600;color:var(--text-soft);margin-top:5px;line-height:1.3}
.db-kpi-trend{font-size:11px;font-weight:800;color:#1e7d4f;margin-top:6px}
.db-chart{display:flex;align-items:flex-end;gap:8px;height:92px;padding:12px;background:var(--lavender);border-radius:14px}
.db-bar{flex:1;border-radius:6px 6px 0 0;background:var(--purple);min-height:8px}
.db-bar:nth-child(even){background:#8478C6}
.db-bar.peak{background:var(--teal)}
.db-x{display:flex;gap:8px;margin-top:6px}
.db-x span{flex:1;text-align:center;font-size:10px;font-weight:600;color:var(--text-soft)}

@media(max-width:860px){
  .managers-grid{grid-template-columns:1fr;gap:36px}
}

/* ─── HOW IT WORKS (timeline compatta) ─── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
.step{position:relative;padding:26px 22px;background:var(--lavender);border-radius:var(--r-card)}
.step-num{
  font-family:var(--f-display);font-weight:600;font-size:15px;color:#fff;
  width:34px;height:34px;border-radius:50%;background:var(--purple);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.step h3{font-size:17px;margin-bottom:6px}
.step p{font-size:14px;line-height:1.6;color:var(--text-soft)}

@media(max-width:960px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ─── TESTIMONIAL ─── */
.quote-strip{background:var(--lavender)}
.quote-box{max-width:780px;margin:0 auto;text-align:center}
.quote-mark{
  font-family:var(--f-display);font-weight:600;font-size:56px;line-height:.4;
  color:var(--purple);opacity:.3;display:block;margin-bottom:22px;
}
.quote-text{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(20px,2.4vw,27px);line-height:1.4;color:var(--ink);
  margin-bottom:24px;
}
.quote-who{font-size:14px;font-weight:700;color:var(--ink)}
.quote-role{font-size:13px;font-weight:600;color:var(--text-soft)}

/* ─── FORM ─── */
.contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}
.contact-left{
  background:var(--purple);border-radius:var(--r-card);
  padding:46px 42px;display:flex;flex-direction:column;
}
.contact-left .t-label{color:var(--yellow);margin-bottom:14px}
.contact-left h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.015em;color:#fff;font-size:clamp(26px,3vw,36px);line-height:1.12;margin-bottom:14px}
.contact-left p{color:rgba(255,255,255,.78);font-size:15px;margin-bottom:32px}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:15px;margin-top:auto}
.contact-list li{display:flex;gap:12px;align-items:center;font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}
.cl-ico{
  width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-form{
  background:var(--lavender);border:var(--border-soft);
  border-radius:var(--r-card);padding:38px 34px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:span 2}
.field label{font-size:13px;font-weight:700;color:var(--ink)}
.field .req{color:var(--coral)}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:14.5px;font-weight:500;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--lavender-deep);border-radius:12px;
  background:#fff;transition:border-color .15s;width:100%;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple)}
.field ::placeholder{color:rgba(107,103,133,.55)}
.form-consent{display:flex;gap:10px;align-items:flex-start;margin:20px 0 10px;font-size:12.5px;font-weight:600;color:var(--text-soft);line-height:1.5}
.form-consent input{margin-top:2px;accent-color:var(--purple);width:16px;height:16px;flex-shrink:0}
.form-consent a{color:var(--purple)}
.btn-submit{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:12px;font-weight:600;color:var(--text-soft);text-align:center;margin-top:14px}
.form-success{display:none;text-align:center;padding:30px 0}
.form-success.show{display:block}
.fs-check{
  width:56px;height:56px;border-radius:18px;background:var(--yellow);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.fs-h{font-family:var(--f-display);font-weight:600;font-size:22px;color:var(--ink);margin-bottom:8px}
.fs-p{font-size:14px;color:var(--text-soft);max-width:340px;margin:0 auto}

@media(max-width:860px){
  .contact-wrap{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:span 1}
  .contact-left{padding:36px 28px}
  .contact-form{padding:30px 24px}
}

/* ─── FOOTER ─── */
footer{background:var(--ink);color:rgba(255,255,255,.7)}
.foot-inner{
  max-width:var(--maxw);margin:0 auto;padding:44px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;
}
.foot-logo{font-family:var(--f-display);font-weight:600;font-size:17px;color:#fff}
.foot-logo small{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.foot-links{display:flex;gap:6px;flex-wrap:wrap}
.foot-links a{
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.7);text-decoration:none;
  padding:6px 12px;border-radius:8px;transition:color .15s,background .15s;
}
.foot-links a:hover{color:var(--yellow);background:rgba(255,255,255,.06)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1)}
.foot-bottom-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px var(--pad-x);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.45);
}

/* ─── REVEAL ─── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.vis{opacity:1;transform:none}


.form-error{
  color:var(--coral);
  font-size:13px;font-weight:700;text-align:center;margin-top:10px;
}