/* ==========================================================================
   0 · RESET + TOKENS (Ubique SaaS Design System)
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}

:root{
  /* Surfaces */
  --bg:#0b0c0f;
  --bg-card:#13151a;
  --bg-elev:#181a20;
  --bg-sunken:#0e0f13;

  /* Text */
  --text:#f0ece4;
  --text-dim:rgba(240,236,228,.50);
  --text-mute:rgba(240,236,228,.28);
  --text-ghost:rgba(240,236,228,.14);

  /* Brand accent (warm gold) */
  --accent:#c8a97e;
  --accent-hi:#d8bd93;
  --accent-lo:rgba(200,169,126,.12);
  --accent-xlo:rgba(200,169,126,.06);
  --accent-border:rgba(200,169,126,.22);
  --accent-border-soft:rgba(200,169,126,.12);
  --accent-glow:rgba(200,169,126,.06);

  /* Semantic */
  --green:#5dd49f;
  --green-lo:rgba(93,212,159,.10);
  --green-border:rgba(93,212,159,.35);
  --red:#e87878;
  --red-lo:rgba(232,120,120,.10);
  --red-border:rgba(232,120,120,.35);

  /* Typography stacks */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.34,1.28,.64,1);

  /* Layout */
  --radius:3px;
  --radius-lg:4px;

  /* Fluid type scale */
  --fs-display:clamp(2.6rem,5vw,5rem);
  --fs-title:clamp(1.8rem,3vw,3.4rem);
  --fs-h2:clamp(1.4rem,2.2vw,2.2rem);
  --fs-h3:clamp(1.25rem,1.8vw,1.85rem);
  --fs-h4:clamp(1.05rem,1.4vw,1.35rem);
  --fs-h5:clamp(.92rem,1vw,1.05rem);
  --fs-body:clamp(.92rem,1.05vw,1.1rem);
  --fs-small:clamp(.72rem,.85vw,.88rem);
  --fs-chrome:.62rem;
}

html,body{
  min-height:100%;
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Watermark */
.watermark{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:url('logo-ubique.png') center/320px no-repeat;
  opacity:.03;
}

/* Page grain overlay */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:
    radial-gradient(circle at 20% 0%,var(--accent-glow) 0%,transparent 40%),
    radial-gradient(circle at 80% 100%,var(--accent-glow) 0%,transparent 50%);
  opacity:.8;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.06;mix-blend-mode:overlay;
}

::selection{background:var(--accent);color:var(--bg)}

/* ==========================================================================
   1 · SHARED PRIMITIVES
   ========================================================================== */
.page{position:relative;z-index:2}

.s-label{
  font-family:var(--sans);font-weight:300;
  font-size:var(--fs-small);letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;width:fit-content;
  padding:.4rem 1rem;
  border:1px solid var(--accent-border);
  border-radius:2px;margin-bottom:.6rem;
}

.s-title{
  font-family:var(--serif);font-weight:300;
  font-size:var(--fs-title);line-height:1.1;color:var(--text);
  letter-spacing:-.01em;
}

.s-body{
  font-family:var(--sans);font-weight:200;
  font-size:var(--fs-body);line-height:1.85;color:var(--text-dim);
  max-width:680px;
}

.s-divider{width:44px;height:1px;background:var(--accent);opacity:.55;margin:1rem 0}

/* Stagger animation */
[data-a]{animation:su .75s var(--ease) both}
[data-a="1"]{animation-delay:.05s}
[data-a="2"]{animation-delay:.13s}
[data-a="3"]{animation-delay:.21s}
[data-a="4"]{animation-delay:.29s}
[data-a="5"]{animation-delay:.37s}
[data-a="6"]{animation-delay:.45s}
@keyframes su{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Section wrapper */
.sec{
  padding:clamp(3rem,6vh,5rem) clamp(1.5rem,5vw,5rem);
  max-width:1400px;margin:0 auto;
}

.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:2rem;margin-bottom:2.5rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--accent-border-soft);
}

.sec-head-l{display:flex;flex-direction:column;gap:.6rem}

.sec-num{
  font-family:var(--mono);font-weight:400;font-size:var(--fs-chrome);
  letter-spacing:.25em;color:var(--accent);
}

.sec-title{
  font-family:var(--serif);font-weight:300;font-size:var(--fs-h2);
  color:var(--text);line-height:1.1;
}

.sec-note{
  font-family:var(--sans);font-weight:200;font-size:var(--fs-small);
  color:var(--text-dim);max-width:32ch;text-align:right;line-height:1.6;
}

/* ==========================================================================
   2 · BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.4rem;border-radius:var(--radius);cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;
  border:1px solid transparent;
  transition:all .35s var(--ease);
  background:transparent;color:var(--text);
  text-decoration:none;user-select:none;
  white-space:nowrap;
}
.btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}

.btn-primary{
  background:var(--accent);color:var(--bg);border-color:var(--accent);
}
.btn-primary:hover{background:transparent;color:var(--accent)}

.btn-secondary{
  color:var(--accent);border-color:var(--accent-border);
}
.btn-secondary:hover{background:var(--accent-lo);border-color:var(--accent)}

.btn-lg{padding:.95rem 1.8rem;font-size:.78rem;letter-spacing:.2em}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:.6rem clamp(1.5rem,5vw,5rem);
  background:rgba(11,12,15,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--accent-border-soft);
  transition:transform .3s var(--ease);
}
.navbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1200px;margin:0 auto;
}
.navbar-brand{display:flex;align-items:center;text-decoration:none}
.navbar-logo{width:36px;height:36px;border-radius:50%}
.btn-sm{padding:.45rem 1.2rem;font-size:var(--fs-small)}

/* ==========================================================================
   3 · SCROLL EXPANSION HERO
   ========================================================================== */
.scroll-hero{
  position:relative;
  width:100%;height:100vh;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
}

.scroll-hero-bg{
  position:absolute;inset:0;z-index:0;
  transition:opacity .1s linear;
}
.scroll-hero-bg-img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.45);
  transform:scale(1.02);
}
.scroll-hero-bg-overlay{
  position:absolute;inset:0;
  background:rgba(11,12,15,.5);
}

.scroll-hero-frame{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 50px rgba(0,0,0,.3);
  will-change:width,height;
}
.scroll-hero-media{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
}
.scroll-hero-media-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.4);
  border-radius:12px;
  transition:opacity .2s linear;
}

.scroll-hero-text{
  position:absolute;
  z-index:3;
  display:flex;flex-direction:column;
  align-items:center;gap:.4rem;
  pointer-events:none;
  will-change:transform;
}
.scroll-hero-title-top,
.scroll-hero-title-bottom{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,5.5vw,5.5rem);
  color:var(--text);letter-spacing:-.015em;
  line-height:1;
  mix-blend-mode:difference;
  will-change:transform;
}

.scroll-hero-hint{
  position:absolute;
  bottom:2.5rem;left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;flex-direction:column;
  align-items:center;gap:.5rem;
  font-family:var(--sans);font-weight:300;
  font-size:var(--fs-chrome);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
  animation:hintBounce 2s var(--ease) infinite;
  transition:opacity .3s var(--ease);
}
.scroll-hero-hint svg{stroke:var(--accent)}

@keyframes hintBounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(8px)}
}

/* ==========================================================================
   3.5 · HERO CONTENT (after expansion)
   ========================================================================== */
.hero{
  padding:clamp(4rem,8vh,7rem) clamp(1.5rem,5vw,5rem);
  position:relative;
  max-width:1400px;margin:0 auto;
  opacity:0;
  transition:opacity .7s var(--ease);
}
.hero.is-visible{opacity:1}

.hero-content{
  display:flex;
  align-items:center;
  gap:clamp(2rem,4vw,4rem);
}

.hero-photo{flex:0 0 380px;position:relative}

.hero-photo img{
  width:380px;height:480px;
  object-fit:cover;object-position:center top;
  border-radius:var(--radius-lg);
  border:1px solid var(--accent-border-soft);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}

.hero-text{flex:1}

.hero-eyebrow{
  font-family:var(--sans);font-weight:300;font-size:var(--fs-chrome);
  letter-spacing:.32em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.8rem;
  margin-bottom:1.8rem;
}
.hero-eyebrow::before{
  content:"";width:32px;height:1px;background:var(--accent);
}

.hero-title{
  font-family:var(--serif);font-weight:300;
  font-size:var(--fs-display);line-height:1.05;
  color:var(--text);letter-spacing:-.015em;
  max-width:18ch;
}
.hero-title em{font-style:italic;color:var(--accent);font-weight:400}

.hero-lede{
  font-family:var(--sans);font-weight:200;font-size:clamp(1rem,1.2vw,1.15rem);
  line-height:1.75;color:var(--text-dim);
  max-width:560px;margin-top:1.8rem;
}

.hero-cta{margin-top:2.5rem}

/* ==========================================================================
   4 · ABOUT / CARDS
   ========================================================================== */
.about-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  margin-top:1.5rem;
}

.about-card{
  background:var(--bg-card);
  border:1px solid var(--accent-border-soft);
  border-radius:var(--radius-lg);
  padding:2rem 1.6rem;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.about-card:hover{
  border-color:var(--accent-border);
  transform:translateY(-3px);
}

.about-icon{
  width:40px;height:40px;
  margin-bottom:1.2rem;
  color:var(--accent);
}
.about-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}

.about-card h3{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-h4);line-height:1.3;
  color:var(--text);margin-bottom:.6rem;
}

.about-card p{
  font-family:var(--sans);font-weight:200;
  font-size:var(--fs-body);line-height:1.85;
  color:var(--text-dim);
}

.about-role{
  font-family:var(--sans);font-weight:200;
  font-size:var(--fs-body);color:var(--text-dim);
  margin-top:.4rem;
}
.about-bio{
  font-family:var(--sans);font-weight:200;
  font-size:var(--fs-body);line-height:1.9;
  color:var(--text-dim);
  max-width:760px;
  margin:2rem auto 2.5rem;
  text-align:center;
  border-left:2px solid var(--accent-border);
  padding-left:1.5rem;
  text-align:left;
}

/* ==========================================================================
   5 · MEETING / TIMELINE
   ========================================================================== */
.meeting-timeline{
  max-width:700px;
  margin-top:2rem;
  position:relative;
}

.meeting-timeline::before{
  content:'';position:absolute;
  left:28px;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--accent),var(--accent-border-soft));
}

.timeline-item{
  display:flex;align-items:flex-start;
  gap:1.5rem;padding:1.2rem 0;
  position:relative;
}

.timeline-number{
  flex:0 0 56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--bg);
  font-family:var(--mono);font-size:.85rem;font-weight:500;
  border-radius:50%;
  position:relative;z-index:1;
}

.timeline-content h3{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-h4);line-height:1.3;
  color:var(--text);margin-bottom:.4rem;
}

.timeline-content p{
  font-family:var(--sans);font-weight:200;
  font-size:var(--fs-body);line-height:1.85;
  color:var(--text-dim);
}

.meeting-cta{margin-top:2.5rem}

/* ==========================================================================
   6 · AUDIENCE
   ========================================================================== */
.audience{
  background:var(--bg-card);
  border-top:1px solid var(--accent-border-soft);
  border-bottom:1px solid var(--accent-border-soft);
}

.audience-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:2rem;
  align-items:start;
  margin-top:1.5rem;
}

.audience-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.8rem;
}

.audience-preview{
  position:sticky;top:120px;
  width:340px;height:400px;
  border-radius:var(--radius-lg);
  border:1px solid var(--accent-border-soft);
  overflow:hidden;
  background:var(--bg-elev);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.audience-preview.is-visible{
  opacity:1;
  transform:translateY(0);
}
.audience-preview img{
  width:100%;height:100%;
  object-fit:cover;
  transition:opacity .3s var(--ease);
}

.audience-item{
  display:flex;align-items:center;gap:1rem;
  background:var(--accent-xlo);
  border:1px solid var(--accent-border-soft);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.audience-item:hover{
  border-color:var(--accent-border);
  background:var(--accent-lo);
}

.check-icon{
  flex:0 0 22px;height:22px;
  color:var(--accent);
}
.check-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.2}

.audience-item p{
  font-family:var(--sans);font-weight:300;
  font-size:.92rem;color:var(--text-dim);
  line-height:1.5;
}
.audience-item strong{color:var(--text);font-weight:400}

/* ==========================================================================
   7 · BOOKING / FORM
   ========================================================================== */
.booking-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}

.booking-info h2{
  font-family:var(--serif);font-weight:300;
  font-size:var(--fs-h2);line-height:1.15;
  color:var(--text);margin-top:.6rem;
}

.booking-info > p{
  font-family:var(--sans);font-weight:200;
  font-size:var(--fs-body);line-height:1.85;
  color:var(--text-dim);margin-top:1rem;
  max-width:480px;
}

.booking-benefits{
  display:flex;flex-direction:column;gap:1rem;
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--accent-border-soft);
}

.benefit-item{
  display:flex;align-items:center;gap:.8rem;
  font-family:var(--sans);font-weight:300;
  font-size:.92rem;color:var(--text-dim);
}
.benefit-item svg{
  width:20px;height:20px;
  stroke:var(--accent);fill:none;stroke-width:1.6;
  flex-shrink:0;
}

/* Form container */
.booking-form-container{
  background:var(--bg-card);
  border:1px solid var(--accent-border-soft);
  border-radius:var(--radius-lg);
  padding:2rem;
}

.form-group{
  display:flex;flex-direction:column;gap:.45rem;
  margin-bottom:1.1rem;
}

.form-group label{
  font-family:var(--sans);font-weight:300;
  font-size:var(--fs-chrome);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  background:transparent;
  border:1px solid var(--accent-border-soft);
  border-radius:var(--radius);
  padding:.8rem 1rem;
  font-family:var(--sans);font-weight:300;font-size:.92rem;
  color:var(--text);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--text-mute);font-weight:200}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;border-color:var(--accent);background:var(--accent-xlo);
}
.form-group textarea{min-height:80px;resize:vertical;line-height:1.7}

.form-group select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c8a97e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center;
  padding-right:2.4rem;cursor:pointer;
  color-scheme:dark;
}
.form-group select option{
  background-color:var(--bg-elev);
  color:var(--text);
  font-family:var(--sans);
}

/* Time radio options */
.time-options{display:flex;gap:.6rem}

.time-option{flex:1;cursor:pointer}
.time-option input{position:absolute;opacity:0;pointer-events:none}
.time-option span{
  display:block;text-align:center;
  padding:.7rem 1rem;
  border:1px solid var(--accent-border-soft);
  border-radius:var(--radius);
  font-family:var(--sans);font-weight:300;
  font-size:var(--fs-small);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);
  transition:all .3s var(--ease);
}
.time-option:hover span{border-color:var(--accent-border)}
.time-option input:checked + span{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--bg);font-weight:400;
}

/* Submit */
.btn-submit{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.8rem;border-radius:var(--radius);cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--accent);
  background:var(--accent);color:var(--bg);
  transition:all .35s var(--ease);
  margin-top:.5rem;
}
.btn-submit:hover{background:transparent;color:var(--accent)}
.btn-submit svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .3s var(--ease)}
.btn-submit:hover svg{transform:translateX(4px)}

/* ==========================================================================
   7.5 · SLOTS + NOTICES
   ========================================================================== */

/* Slot picker */
.slots-container{margin-top:.3rem}
.slots-loading,.slots-empty{
  font-family:var(--sans);font-weight:200;font-size:var(--fs-small);
  color:var(--text-mute);line-height:1.7;padding:.5rem 0;
}
.slots-day{margin-bottom:1rem}
.slots-day-label{
  display:block;
  font-family:var(--sans);font-weight:400;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);
  margin-bottom:.5rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--accent-border-soft);
}
.slots-times{display:flex;flex-wrap:wrap;gap:.5rem}

.free-notice{
  display:flex;
  gap:1rem;
  padding:1.2rem;
  border-radius:var(--radius);
  margin-bottom:1.2rem;
}
.free-notice{
  background:var(--green-lo);
  border:1px solid var(--green-border);
}
.free-notice-icon{
  flex-shrink:0;width:24px;height:24px;
  color:var(--green);
}
.free-notice-icon svg{width:100%;height:100%}
.free-notice-text strong{
  font-family:var(--sans);font-weight:400;
  font-size:.88rem;color:var(--green);
  display:block;margin-bottom:.3rem;
}
.free-notice-text p{
  font-family:var(--sans);font-weight:200;
  font-size:var(--fs-small);line-height:1.7;
  color:var(--text-dim);margin:0;
}

/* ==========================================================================
   8 · MODAL
   ========================================================================== */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s var(--ease);
}
.modal-overlay.active{opacity:1;visibility:visible}

.modal{
  background:var(--bg-card);
  border:1px solid var(--accent-border);
  border-radius:var(--radius-lg);
  padding:3rem;
  text-align:center;
  max-width:440px;width:90%;
  transform:translateY(20px);
  transition:transform .3s var(--ease);
}
.modal-overlay.active .modal{transform:translateY(0)}

.modal-icon{
  width:56px;height:56px;
  margin:0 auto 1.5rem;
  color:var(--green);
}
.modal-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8}

.modal h3{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-h3);color:var(--text);
  margin-bottom:.8rem;
}
.modal p{
  font-family:var(--sans);font-weight:200;
  font-size:var(--fs-body);line-height:1.85;
  color:var(--text-dim);margin-bottom:2rem;
}
.modal .btn-primary{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.4rem;border-radius:var(--radius);cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--accent);
  background:var(--accent);color:var(--bg);
  transition:all .35s var(--ease);
  text-decoration:none;
}
.modal .btn-primary:hover{background:transparent;color:var(--accent)}

/* ==========================================================================
   8b · REAGENDAMENTO
   ========================================================================== */
.reschedule-section{padding:2rem clamp(1.5rem,5vw,5rem)}
.reschedule-toggle{text-align:center}
.btn-reschedule-open{
  background:transparent;border:1px solid var(--accent-border-soft);
  border-radius:var(--radius);padding:.6rem 1.5rem;
  font-family:var(--sans);font-weight:300;font-size:var(--fs-small);
  color:var(--text-dim);cursor:pointer;
  transition:all .3s var(--ease);
}
.btn-reschedule-open:hover{border-color:var(--accent);color:var(--accent)}
.reschedule-panel{max-width:600px;margin:1.5rem auto 0}
.reschedule-card{
  background:var(--bg-card);border:1px solid var(--accent-border-soft);
  border-radius:var(--radius-lg);padding:2rem;
}
.reschedule-title{
  font-family:var(--serif);font-weight:400;font-size:1.2rem;
  color:var(--text);margin-bottom:1.2rem;
}
.reschedule-search{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.reschedule-search .form-group{flex:1;min-width:200px;margin-bottom:0}
.reschedule-info{
  background:var(--bg-elev);border:1px solid var(--accent-border-soft);
  border-radius:var(--radius);padding:1.2rem;margin-bottom:1.2rem;
}
.reschedule-info-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.3rem 0;font-size:var(--fs-small);
}
.reschedule-info-label{color:var(--text-mute);font-weight:300}
.reschedule-info-value{color:var(--text);font-weight:400}
.reschedule-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.btn-reschedule{
  padding:.55rem 1.2rem;border-radius:var(--radius);
  font-family:var(--sans);font-weight:300;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:all .3s var(--ease);
}
.btn-reschedule-change{background:var(--accent);color:var(--bg);border:1px solid var(--accent)}
.btn-reschedule-change:hover{background:transparent;color:var(--accent)}
.btn-reschedule-cancel{background:transparent;color:var(--red);border:1px solid var(--red-border)}
.btn-reschedule-cancel:hover{background:var(--red-lo)}
.reschedule-slots{margin-top:1.2rem}
.reschedule-msg{
  font-family:var(--sans);font-weight:300;font-size:var(--fs-small);
  color:var(--green);margin-top:.8rem;
}
.reschedule-msg.error{color:var(--red)}

/* ==========================================================================
   8c · TOAST & CONFIRM (LP)
   ========================================================================== */
.lp-toast{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:9999;padding:.7rem 1.5rem;
  background:var(--bg-card);border:1px solid var(--accent-border);
  border-radius:4px;
  font-family:var(--sans);font-weight:300;font-size:var(--fs-small);
  color:var(--text);
  opacity:0;pointer-events:none;
  transition:all .35s cubic-bezier(.22,1,.36,1);
}
.lp-toast.active{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.lp-toast.success{border-color:rgba(93,212,159,.35);color:#5dd49f}
.lp-toast.error{border-color:rgba(232,120,120,.35);color:#e87878}

.lp-confirm-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s cubic-bezier(.22,1,.36,1);
}
.lp-confirm-overlay.active{display:flex;opacity:1}
.lp-confirm-box{
  background:var(--bg-card);border:1px solid var(--accent-border);
  border-radius:4px;padding:2rem;max-width:380px;width:90%;
  transform:scale(.95);transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.lp-confirm-overlay.active .lp-confirm-box{transform:scale(1)}
.lp-confirm-text{
  font-family:var(--sans);font-weight:300;font-size:var(--fs-body);
  color:var(--text);line-height:1.6;margin-bottom:1.5rem;text-align:center;
}
.lp-confirm-actions{display:flex;gap:.8rem;justify-content:center}
.lp-confirm-btn{
  padding:.55rem 1.4rem;border-radius:4px;
  font-family:var(--sans);font-weight:300;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:all .25s cubic-bezier(.22,1,.36,1);
}
.lp-confirm-cancel{background:transparent;color:var(--text-dim);border:1px solid rgba(200,169,126,.12)}
.lp-confirm-cancel:hover{border-color:var(--text-dim);color:var(--text)}
.lp-confirm-ok{background:rgba(232,120,120,1);color:var(--bg);border:1px solid rgba(232,120,120,1)}
.lp-confirm-ok:hover{background:transparent;color:rgba(232,120,120,1)}

/* ==========================================================================
   9 · FOOTER
   ========================================================================== */
.footer{
  padding:2rem clamp(1.5rem,5vw,5rem);
  border-top:1px solid var(--accent-border-soft);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
}
.footer-logo{width:48px;height:48px;border-radius:50%;opacity:.7}
.footer p{
  font-family:var(--sans);font-weight:300;
  font-size:var(--fs-chrome);letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-mute);
}

/* ==========================================================================
   10 · SCROLL ANIMATIONS
   ========================================================================== */
.fade-in{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ==========================================================================
   11 · RESPONSIVE
   ========================================================================== */
@media(max-width:968px){
  .hero-content{
    flex-direction:column;
    text-align:center;
  }
  .hero-photo{flex:none}
  .hero-photo img{
    width:300px;height:380px;
    margin:0 auto;
  }
  .hero-photo{flex:none}
  .hero-photo img{width:280px;height:350px;margin:0 auto}
  .hero-text{text-align:center}
  .hero-eyebrow{justify-content:center}
  .hero-eyebrow::before{display:none}
  .hero-title{max-width:none;margin:0 auto}
  .hero-lede{margin:1.8rem auto 0}

  .about-grid{grid-template-columns:1fr;max-width:480px}
  .audience-layout{grid-template-columns:1fr}
  .audience-preview{display:none}
  .audience-grid{grid-template-columns:1fr}
  .booking-wrapper{grid-template-columns:1fr}
}

@media(max-width:600px){
  .navbar{padding:.5rem 1rem}
  .navbar-logo{width:28px;height:28px}
  .btn-sm{padding:.35rem .8rem;font-size:.7rem}
  .hero-photo img{width:260px;height:340px}
  .time-options{flex-direction:column}
  .meeting-timeline::before{left:20px}
  .timeline-number{flex:0 0 42px;height:42px;font-size:.75rem}
  .slots-container{max-height:300px;overflow-y:auto}
  .slots-times{flex-direction:column}
  .slot-option{width:100%}
  .reschedule-search{flex-direction:column}
  .reschedule-info-row{flex-direction:column;gap:.15rem;align-items:flex-start}
  .reschedule-actions{flex-direction:column}
  .btn-reschedule{width:100%;text-align:center}
  .lp-confirm-box{padding:1.5rem}
}