/*
Theme Name: inLIFE Wellness V2
Theme URI: https://www.inlife.newhavenhosting.com/v2/
Author: Haven Media Solutions
Description: WordPress mirror of the inLIFE Wellness Southlake landing page.
Version: 1.1.1
Text Domain: inlife-v2
*/
/* inLIFE Wellness — Design System
   Global entry point. Consumers link THIS file only.
   Keep this as an @import list — no rules here. */

/* inLIFE Wellness — Webfonts
   The brand guide (§3.4 Type Hierarchy) specifies:
     • Owners Light      — HEADLINE (100% line height, 50 tracking)
     • Owners Light      — HEADLINE ALT (100% line height, 40 tracking)
     • Owner's Text Reg. — SUBHEADING & BODY COPY (100% line height, 0 tracking)
     • Aago Regular      — HEADLINE SMALL & CAPTIONS (100% LH, -10 tracking)

   Owners / Owner's Text (Frere-Jones) and Aago (R-Typography) are licensed
   commercial faces and were not included in the material provided. The guide
   notes the real files ship in the brand Dropbox ("(2) Fonts").

   SUBSTITUTES IN USE — flagged, swap when the licensed files arrive:
     Owners      → Archivo  (Light 300 / Regular 400) — squarish grotesque,
                   holds up well at the wide uppercase tracking the brand uses
     Owner's Text→ Chivo    (400 / 500 / 700) — neutral grotesque text face
     Aago        → Archivo  (400 / 500) at caption sizes */

/* inLIFE Wellness — Color System
   Source of truth: inLIFE_WELLNESS_BRAND_GUIDE.pdf, §3.2 Color Palette.
   "Inspired by the Sydney coastline, pulling in the sand, sun and surf to
   create a warm and welcoming studio atmosphere. Sun and Dusk are pulled
   into the updated brand palette for a sense of continuity."
   Exact HEX values below are taken verbatim from the guide. */

:root {
  /* ============ BRAND PALETTE (verbatim from guide) ============ */
  --sun:   #FADE70;   /* signature yellow, retained from the original logo */
  --surf:  #A0CAC9;   /* light teal */
  --ocean: #216D7E;   /* deep teal */
  --dusk:  #333735;   /* charcoal */
  --cloud: #EFEEEA;   /* off-white */
  --sand:  #E0DBC7;   /* warm sand */

  /* ============ Working tints & shades ============
     Derived from the six brand colors for UI states only.
     The six above remain the brand; these are utility steps. */

  /* Dusk scale */
  --dusk-900: #232624;
  --dusk-800: #333735;   /* = --dusk */
  --dusk-700: #454945;
  --dusk-600: #5C605D;
  --dusk-500: #7A7E7B;
  --dusk-400: #9B9F9C;
  --dusk-300: #C2C5C1;

  /* Cloud / Sand neutrals */
  --cloud-050: #F7F6F3;
  --cloud-100: #EFEEEA;  /* = --cloud */
  --sand-200:  #E8E4D8;
  --sand-300:  #E0DBC7;  /* = --sand */
  --sand-400:  #CBC4A9;
  --sand-500:  #ADA485;

  /* Surf / Ocean scale */
  --surf-100:  #E3EFEF;
  --surf-300:  #A0CAC9;  /* = --surf */
  --surf-500:  #5E9BA2;
  --ocean-700: #216D7E;  /* = --ocean */
  --ocean-900: #17505C;

  /* Sun scale — yellow is a fill, never body text on light */
  --sun-100: #FDF3CE;
  --sun-300: #FADE70;    /* = --sun */
  --sun-500: #E4BF33;
  --sun-700: #967A12;    /* legible "sun" for text on light backgrounds */

  --white: #FFFFFF;
  --black: #1C201E;

  /* ============ Semantic aliases ============ */

  /* Surfaces */
  --surface-canvas: var(--cloud-100);  /* page background */
  --surface-shell:  var(--cloud-050);
  --surface-raised: var(--white);
  --surface-tint:   var(--sand-200);
  --surface-ink:    var(--dusk-800);
  --surface-mist:   var(--surf-100);

  /* Text */
  --text-strong: var(--dusk-800);
  --text-body:   var(--dusk-700);
  --text-muted:  var(--dusk-500);
  --text-faint:  var(--dusk-400);
  --text-on-ink: var(--cloud-100);
  --text-on-ink-muted: #B5B9B6;
  --text-accent: var(--ocean-700);

  /* Lines & borders */
  --border-soft:   var(--sand-300);
  --border-strong: var(--sand-400);
  --border-ink:    var(--dusk-800);
  --hairline: rgba(51, 55, 53, 0.12);

  /* Interactive — Dusk is the primary action fill */
  --action:       var(--dusk-800);
  --action-hover: var(--dusk-900);
  --action-text:  var(--cloud-050);

  /* Accent action — Ocean */
  --accent:       var(--ocean-700);
  --accent-hover: var(--ocean-900);

  /* Highlight — Sun. Used as a fill/underline behind dark text, never as text. */
  --highlight:      var(--sun-300);
  --highlight-text: var(--dusk-800);

  /* Focus ring */
  --ring: rgba(33, 109, 126, 0.45);

  /* Support / semantic hues (drawn from the palette where possible) */
  --success: #5E8F6E;
  --warning: var(--sun-500);
  --danger:  #B25B4C;

  /* ===================================================================
     COMPATIBILITY ALIASES
     Earlier drafts of this system used invented ink/mist/clay names.
     They now resolve to the correct brand colors so existing components
     and templates stay in sync. Prefer the brand tokens above in new work.
     =================================================================== */
  --ink-900: var(--dusk-900);
  --ink-800: var(--dusk-800);
  --ink-700: var(--dusk-700);
  --ink-600: var(--dusk-600);
  --ink-500: var(--dusk-500);
  --ink-400: var(--dusk-400);
  --ink-300: var(--dusk-300);

  --sand-050: var(--cloud-050);
  --sand-100: var(--cloud-100);

  --mist-100: var(--surf-100);
  --mist-300: var(--surf-300);
  --mist-500: var(--surf-500);
  --mist-700: var(--ocean-700);

  --clay-100: var(--sun-100);
  --clay-300: var(--sun-300);
  --clay-500: var(--sun-500);
  --clay-700: var(--sun-700);
}

/* inLIFE Wellness — Typography
   Per brand guide §3.4. The defining move: headlines are set LIGHT, in
   UPPERCASE, with WIDE tracking (40–50 units = 0.04–0.05em) at 100% line
   height. Body is set regular at 0 tracking. Captions use -10 (-0.01em).
   Airy and precise — never heavy or condensed. */

:root {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;  /* Owners substitute */
  --font-text: "Chivo", "Helvetica Neue", Arial, sans-serif;       /* Owner's Text substitute */
  --font-caption: "Archivo", "Helvetica Neue", Arial, sans-serif;  /* Aago substitute */

  /* Weights — the brand headline weight is LIGHT */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Type scale */
  --fs-caption: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;       /* 14px */
  --fs-body: 1rem;         /* 16px */
  --fs-lg: 1.125rem;       /* 18px */
  --fs-xl: 1.375rem;       /* 22px */
  --fs-2xl: 1.75rem;       /* 28px */
  --fs-3xl: 2.25rem;       /* 36px */
  --fs-4xl: 3rem;          /* 48px */
  --fs-5xl: 4rem;          /* 64px */
  --fs-6xl: 5.25rem;       /* 84px */

  /* Line heights — the guide specifies 100% for headlines */
  --lh-solid: 1; /* @kind font */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.15; /* @kind font */
  --lh-heading: 1.2; /* @kind font */
  --lh-body: 1.6; /* @kind font */
  --lh-relaxed: 1.75; /* @kind font */

  /* Letter spacing — guide tracking values converted to em */
  --ls-headline: 0.05em;   /* @kind font */ /* 50 tracking — HEADLINE */
  --ls-headline-alt: 0.04em; /* @kind font */ /* 40 tracking — HEADLINE ALT */
  --ls-body: 0;            /* @kind font */ /* 0 tracking — body & subheading */
  --ls-caption: -0.01em;   /* @kind font */ /* -10 tracking — captions, Aago */
  --ls-wide: 0.14em;       /* @kind font */ /* UI labels, buttons, eyebrows */
  --ls-wider: 0.2em;       /* @kind font */
}

/* inLIFE Wellness — Spacing, radii, shadows, motion
   Calm, generous spacing. Soft but restrained radii. Very light shadows
   (studio daylight, not heavy elevation). Ease-out, unhurried motion. */

:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Radii — soft, not pill-happy */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Borders */
  --border-hair: 1px; /* @kind spacing */
  --border-frame: 2px; /* @kind spacing */

  /* Shadows — light daylight elevation */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(44, 48, 47, 0.05);
  --shadow-md: 0 6px 20px rgba(44, 48, 47, 0.08);
  --shadow-lg: 0 18px 48px rgba(44, 48, 47, 0.12);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* Layout */
  --container: 1200px; /* @kind spacing */
  --container-narrow: 760px; /* @kind spacing */
}




  html, body { margin: 0; }
  * { box-sizing: border-box; }
  body { font-family: var(--font-text); background: var(--cloud-100); color: var(--text-body); }
  .fi { width:100%; font-family:var(--font-text); font-size:16px; color:var(--dusk-800); background:var(--cloud-050); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:14px 16px; outline:none; transition:border-color 200ms, box-shadow 200ms; }
  .fi::placeholder { color: var(--dusk-400); }
  .fi:focus { border-color: var(--ocean-700); box-shadow: 0 0 0 3px var(--ring); }
  a { color: var(--ocean-700); } a:hover { color: var(--surf-500); }
  .cta { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-caption); font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--action-text); background:var(--action); border:1px solid var(--action); border-radius:var(--radius-pill); padding:17px 34px; text-decoration:none; cursor:pointer; transition:background 200ms, transform 140ms; }
  .cta:hover { background: var(--action-hover); transform: translateY(-1px); }
  .cta-sun { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-caption); font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dusk-800); background:var(--sun-300); border:1px solid var(--sun-300); border-radius:var(--radius-pill); padding:17px 34px; text-decoration:none; transition:background 200ms, transform 140ms; }
  .cta-sun:hover { background:#FCE79A; transform:translateY(-1px); color:var(--dusk-800); }
  .fl span { display:block; font-family:var(--font-caption); font-weight:500; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dusk-600); margin-bottom:9px; }
  .eyebrow { font-family:var(--font-caption); font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; }
  .hl { margin:0; font-family:var(--font-display); font-weight:300; letter-spacing:0.05em; text-transform:uppercase; line-height:1.04; color:var(--dusk-800); }
  .in { width:100%; max-width:1080px; margin:0 auto; padding:0 40px; }
  .card { background:var(--surface-raised); box-shadow:var(--shadow-md); }
  .ch3 { margin:0 0 12px; font-family:var(--font-display); font-weight:400; font-size:17px; letter-spacing:0.05em; text-transform:uppercase; color:var(--dusk-800); line-height:1.25; }
  .three { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:40px 56px; }
  @media (max-width:900px){
    .hero { grid-template-columns:1fr !important; }
    .hero-photo { height:380px !important; order:-1; }
    .h1 { font-size:min(40px, 8.6vw) !important; }
    .three, .two, .two2 { grid-template-columns:1fr !important; }
    .band { height:140px !important; }
    .in { padding:0 24px; }
  }

  /* Booking-first hero: the offer and real form lead on every device. */
  .booking-hero-shell{max-width:1180px;margin:0 auto;padding:48px 40px 68px;}
  .booking-hero{display:grid;grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);gap:56px;align-items:start;}
  .booking-copy{padding-top:28px;}
  .booking-copy>.eyebrow,.booking-card>.eyebrow{color:var(--ocean-700);margin-bottom:16px;}
  .booking-copy h1{font-size:min(64px,5.2vw);line-height:.98;letter-spacing:-.025em;max-width:620px;}
  .booking-copy h1 span{color:var(--ocean-700);}
  .booking-lead{margin:26px 0 0;font-size:19px;line-height:1.55;color:var(--text-body);max-width:560px;}
  .booking-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;}
  .booking-badges span{display:inline-flex;align-items:center;min-height:34px;padding:7px 11px;border-radius:999px;background:var(--sun-300);color:var(--dusk-800);font-size:13px;font-weight:700;}
  .booking-card{padding:36px 38px;border-top:4px solid var(--sun-300);box-shadow:var(--shadow-md);}
  .booking-card h2{font-size:38px;line-height:1.05;margin:0 0 12px;}
  .booking-form-intro{margin:0 0 24px;font-size:15px;line-height:1.55;color:var(--text-muted);}
  .booking-privacy{margin:16px 0 0;font-size:12px;line-height:1.45;color:var(--text-faint);text-align:center;}
  .booking-card #joinForm{gap:14px!important;}
  .booking-card .two2{gap:14px!important;}
  .booking-card .fi{padding:14px 15px;}
  .booking-card button[type="submit"]{margin-top:2px!important;}
  .booking-card-wrap #doneView{padding:58px 40px!important;}
  @media (max-width:900px){
    header>.in{height:54px!important;padding:0 18px!important;}
    header img{width:116px!important;}
    header .top-cta{display:none!important;}
    .booking-hero-shell{padding:17px 18px 30px!important;}
    .booking-hero{grid-template-columns:1fr!important;gap:14px!important;}
    .booking-copy{padding-top:0;}
    .booking-copy>.eyebrow{font-size:10px;margin-bottom:11px;}
    .booking-copy h1{font-size:clamp(34px,9.8vw,42px)!important;line-height:.94;max-width:390px;}
    .booking-lead{font-size:14px;line-height:1.4;margin-top:11px;}
    .booking-badges{gap:6px;margin-top:10px;}
    .booking-badges span{min-height:27px;padding:5px 8px;font-size:11px;}
    .booking-card{padding:18px 18px 17px!important;border-radius:18px!important;}
    .booking-card>.eyebrow{font-size:10px;margin-bottom:9px;}
    .booking-card h2{font-size:27px;margin-bottom:6px;}
    .booking-form-intro{font-size:12px;line-height:1.35;margin-bottom:11px;}
    .booking-card #joinForm{gap:8px!important;}
    .booking-card .two2{gap:8px!important;}
    .booking-card .fl{gap:5px;}
    .booking-card .fl>span{font-size:12px;}
    .booking-card .fi{padding:10px 12px;font-size:16px;}
    .booking-card button[type="submit"]{padding:13px 18px!important;font-size:12px;}
    .booking-privacy{margin-top:8px;font-size:10px;}
    .booking-card-wrap #doneView{padding:42px 22px!important;}
  }

/* INLIFE KONSTRUCT FORM — page-scoped visual integration */
.booking-card-wrap .form-builder-container{
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  font-family:var(--font-text)!important;
}
.booking-card-wrap .form-builder-form{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.booking-card-wrap .form-builder-page{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:0!important;
  border:0!important;
}
.booking-card-wrap .form-builder-field{margin:0!important;}
.booking-card-wrap .form-builder-field label{
  display:block;
  margin:0 0 9px;
  font-family:var(--font-caption);
  font-size:10.5px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dusk-600);
}
.booking-card-wrap .form-builder-required{color:var(--danger);}
.booking-card-wrap .form-builder-input,
.booking-card-wrap .form-builder-textarea,
.booking-card-wrap .form-builder-select{
  width:100%;
  min-height:49px;
  padding:14px 15px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--cloud-050);
  color:var(--dusk-800);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.3;
  box-shadow:none;
}
.booking-card-wrap .form-builder-input:focus,
.booking-card-wrap .form-builder-textarea:focus,
.booking-card-wrap .form-builder-select:focus{
  border-color:var(--ocean-700);
  box-shadow:0 0 0 3px var(--ring);
}
.booking-card-wrap .form-builder-navigation{
  display:block!important;
  margin:16px 0 0!important;
  padding:0!important;
}
.booking-card-wrap .form-builder-btn-next,
.booking-card-wrap .form-builder-btn-back{display:none!important;}
.booking-card-wrap .form-builder-btn-submit{
  width:100%!important;
  min-height:52px;
  padding:15px 24px!important;
  border:1px solid var(--action)!important;
  border-radius:var(--radius-pill)!important;
  background:var(--action)!important;
  color:var(--action-text)!important;
  font-family:var(--font-caption)!important;
  font-size:12px!important;
  font-weight:500!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  box-shadow:none!important;
}
.booking-card-wrap .form-builder-btn-submit:hover{
  background:var(--action-hover)!important;
  transform:translateY(-1px);
}
.booking-card-wrap .form-builder-progress{display:none!important;}
.booking-card-wrap .form-builder-submit-error{
  margin:12px 0 0;
  color:var(--danger);
  font-size:13px;
  line-height:1.45;
  text-align:center;
}
.booking-card-wrap .form-builder-success{
  padding:58px 40px!important;
  border-top:4px solid var(--sun-300)!important;
  border-radius:0!important;
  background:var(--white)!important;
  color:var(--dusk-800)!important;
  box-shadow:none!important;
}
.booking-card-wrap .form-builder-success h3{
  margin:0 0 18px!important;
  color:var(--dusk-800)!important;
  font-family:var(--font-display)!important;
  font-size:32px!important;
  font-weight:300!important;
  letter-spacing:.05em!important;
  line-height:1.05!important;
  text-transform:uppercase;
}
.booking-card-wrap .form-builder-success p{
  margin:0!important;
  color:var(--text-muted)!important;
  font-family:var(--font-text)!important;
  font-size:16px!important;
  line-height:1.55!important;
}
@media (max-width:900px){
  .booking-card-wrap .form-builder-page{grid-template-columns:1fr;gap:8px;}
  .booking-card-wrap .form-builder-field label{margin-bottom:5px;font-size:10px;}
  .booking-card-wrap .form-builder-input,
  .booking-card-wrap .form-builder-textarea,
  .booking-card-wrap .form-builder-select{min-height:42px;padding:10px 12px;}
  .booking-card-wrap .form-builder-navigation{margin-top:10px!important;}
  .booking-card-wrap .form-builder-btn-submit{min-height:44px;padding:12px 18px!important;}
  .booking-card-wrap .form-builder-success{padding:42px 22px!important;}
}