/* =========================================================
   STUDIO NOVO — Get Started / Contact page
   Shared tokens, reset, buttons, header, footer, and the
   scroll-reveal helper now live in common.css (loaded first).
   Only page-specific styles remain below.
   ========================================================= */

/* placeholder blocks (page-specific) */
.ph{ width:100%; height:100%; border-radius: var(--radius-lg); }
.ph--table{ background: linear-gradient(160deg,#2a4433,#0f1f16); min-height: 260px; }
.ph--vase{ background: linear-gradient(160deg,#dcd3bf,#b9ad93); min-height: 320px; }

/* =========================================================
   Get Started — hero
   ========================================================= */
.gs-hero{ padding: 88px 0 40px; }
.gs-hero__inner{ max-width: 760px; margin: 0 auto; text-align:center; }
.gs-hero__title{ font-size: clamp(2.3rem, 5vw, 3.3rem); line-height:1.1; margin-bottom: 22px; }
.gs-hero__desc{ color: var(--ink-soft); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

.gs-divider{ width:56px; height:1px; background: var(--line); margin: 34px auto; }
.gs-divider--left{ margin: 22px 0; }

.gs-note{
  display:inline-flex; align-items:center; gap:14px;
  color: var(--ink-soft); font-size:.92rem; text-align:left;
}
.gs-note__icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color: var(--green);
}
/* The inner mail SVG has no width/height of its own, and this is the only
   svg on the site sized purely via flex-shrink on its container (every
   other icon either sets its size directly on the <svg> tag or via a
   `.parent svg{...}` rule) — without one, the flex item shrinks to fill
   the full 40px circle edge-to-edge with no breathing room around it. */
.gs-note__icon svg{ width:18px; height:18px; }

/* =========================================================
   Form section
   ========================================================= */
.form-section{ padding: 48px 0 100px; }
.form-card{
  max-width: 780px; margin: 0 auto;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 52px 56px;
  box-shadow: 0 30px 70px -34px rgba(20,40,29,.22);
}
.form-card__head{ text-align:center; margin-bottom: 36px; }
.form-card__head h2{ font-size: 1.7rem; margin-bottom: 10px; }
.form-card__head p{ color: var(--ink-soft); font-size:.93rem; }

.form-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 22px 20px;
  margin-bottom: 30px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-size:.86rem; font-weight:500; color: var(--ink); }
.field label span{ font-weight:400; color: var(--ink-faint); }
.field__required{ color: var(--green) !important; font-weight:600 !important; }

.field input,
.field textarea,
.select-wrap select{
  width:100%;
  font-family: var(--sans);
  font-size: .93rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--ink-faint); }
.field input:focus,
.field textarea:focus,
.select-wrap select:focus{
  outline:none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,59,44,.12);
}
.field textarea{ resize: vertical; min-height: 108px; }

.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; -webkit-appearance:none; padding-right: 38px; cursor:pointer; }
.select-wrap::after{
  content:""; position:absolute; right:15px; top:50%; width:9px; height:9px;
  border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg); pointer-events:none;
}

.form-lock{
  display:flex; align-items:flex-start; gap:8px;
  justify-content:center; text-align:center;
  margin-top: 18px; font-size:.8rem; color: var(--ink-faint); line-height:1.5;
}
.form-lock svg{ flex:0 0 auto; margin-top: 3px; color: var(--ink-faint); }

.form-success{
  display:none; text-align:center; margin-top: 18px;
  font-size:.9rem; color: var(--green-dark); font-weight:500;
  background: var(--green-mist); border-radius: var(--radius); padding: 12px 16px;
}
.form-success.is-visible{ display:block; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:#B3452F; }
.field__error{ font-size:.76rem; color:#B3452F; display:none; }
.field.has-error .field__error{ display:block; }
.submit-wrap{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* =========================================================
   CTA image strip
   ========================================================= */
.cta-strip{ padding: 0 0 120px; }
.cta-strip__inner{
  display:grid; grid-template-columns: .85fr 1fr; gap: 56px; align-items:center;
  background: var(--cream-2); border-radius: var(--radius-lg);
  padding: 48px;
}
.cta-strip__visual .ph--vase{ border-radius: var(--radius-lg); }
.cta-strip__text h2{ font-size: clamp(1.5rem,2.6vw,2rem); line-height:1.25; }
.cta-strip__text p{ color: var(--ink-soft); font-size:.98rem; max-width: 420px; }

/* =========================================================
   Responsive — Tablet
   ========================================================= */
@media (max-width: 1024px){
  /* .gs-hero and .form-section kept their full desktop padding at
     tablet — every other page tapers its section padding down a step
     at this breakpoint, so these stood out as extra-large. */
  .gs-hero{ padding: 72px 0 30px; }
  .form-section{ padding: 40px 0 84px; }
  .form-card{ padding: 42px 38px; }
  .cta-strip__inner{ grid-template-columns: 1fr; padding: 36px; }
  .cta-strip{ padding-bottom: 96px; }
}

/* =========================================================
   Responsive — Mobile
   ========================================================= */
@media (max-width: 680px){
  .gs-hero{ padding: 56px 0 8px; }
  .gs-note{ flex-direction:column; text-align:center; gap:10px; }
  .gs-note span:last-child br{ display:none; }

  .form-card{ padding: 30px 20px; }
  .form-grid{ grid-template-columns: 1fr; }

  .cta-strip__inner{ padding: 26px; gap: 30px; }
  .cta-strip{ padding-bottom: 72px; }
}