/* ==========================================================================
   Hospitality OS — Design tokens & base
   Viral Advice Media palette: warm ivory / deep teal / aqua editorial
   Source of truth: viraladvicemedia.com design tokens
   ========================================================================== */

:root{
  /* --- Brand (VAM teal) -------------------------------------------- */
  --logo:           #2E6E76;   /* brand mark teal (Hospitality OS "H") */
  --primary:        #2E6E76;   /* --teal      */
  --primary-dark:   #1F555C;   /* --teal-dark */
  --primary-light:  #589AA2;   /* --aqua      */
  --primary-ink:    #1E4F58;   /* --teal-deep — accessible on --primary-wash */
  --primary-wash:   #E4EFF0;

  --secondary:      #3F8A70;   /* success green, tuned to the teal family */
  --secondary-light:#7FBBA6;
  --secondary-ink:  #2C6B55;
  --secondary-wash: #E4F1EB;

  --gold:           #C9902F;   /* warning — warm sand/amber */
  --gold-ink:       #8A6015;
  --gold-wash:      #F7EEDC;

  --clay:           #BE5F49;   /* alerts / late / danger */
  --clay-ink:       #9A4835;
  --clay-wash:      #F8E9E5;

  /* --- VAM accent ramp --------------------------------------------- */
  --aqua:           #589AA2;
  --aqua-light:     #8FCAD1;
  --cyan:           #9FD2D9;
  --teal-line:      #244247;
  --ink-deep:       #0E1C1E;

  /* --- Neutrals ---------------------------------------------------- */
  --heading:        #15292B;   /* --ink   */
  --text:           #5A6562;   /* --muted */
  --muted:          #7C8785;
  --border:         #E4DCCD;
  --border-soft:    #EFE9DE;

  --background:     #FBF8F2;   /* --cream   */
  --surface:        #FFFFFF;
  --section:        #F1EBDF;   /* --cream-2 */

  /* --- Decorative --------------------------------------------------- */
  --lavender:       #D9E6E8;
  --sky:            #E6F0F1;
  --beige:          #EDE6D8;
  --cream:          #F5F1E8;

  /* --- Effects ------------------------------------------------------ */
  --shadow-color:   21,41,43;
  --shadow-xs:      0 1px 2px rgba(var(--shadow-color),.05);
  --shadow-sm:      0 1px 2px rgba(var(--shadow-color),.04), 0 4px 12px rgba(var(--shadow-color),.05);
  --shadow:         0 10px 40px rgba(var(--shadow-color),.09);
  --shadow-lg:      0 2px 4px rgba(var(--shadow-color),.03), 0 18px 50px rgba(var(--shadow-color),.12), 0 40px 90px rgba(var(--shadow-color),.07);

  --grad-cta:       linear-gradient(135deg,#589AA2 0%,#2E6E76 50%,#1F555C 100%);
  --grad-cta-hover: linear-gradient(135deg,#4A8B93 0%,#1B4A51 100%);
  --grad-hero:      linear-gradient(180deg,#FBF8F2 0%,#F4EFE4 100%);
  --grad-card:      linear-gradient(180deg,#FFFFFF 0%,#FCFAF6 100%);
  --grad-orange:    linear-gradient(135deg,#1F555C,#2E6E76,#8FCAD1);  /* brand ramp */
  --grad-green:     linear-gradient(135deg,#2C6B55,#3F8A70,#7FBBA6);
  --grad-ink:       linear-gradient(135deg,#2E6E76 0%,#15292B 100%);

  /* --- Geometry ----------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 11px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* --- Type --------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:      'Inter Tight', 'Inter', sans-serif;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-body);
  background:var(--background);
  color:var(--heading);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

::selection{background:var(--primary-wash);color:var(--primary-ink)}

/* Visible focus for keyboard users only */
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:4px;
}

/* Screen-reader-only utility */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Skip link */
.skip-link{
  position:absolute;top:-100px;left:16px;z-index:999;
  background:var(--surface);color:var(--heading);
  padding:12px 20px;border-radius:var(--r-sm);
  box-shadow:var(--shadow);font-weight:600;font-size:14px;
  transition:top .2s ease;
}
.skip-link:focus{top:16px}

/* ==========================================================================
   Shared components
   ========================================================================== */

/* --- Brand logo lockup ------------------------------------------------ */
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{
  width:42px;height:42px;flex-shrink:0;
  color:var(--logo);
  display:flex;align-items:center;justify-content:center;
}
.brand-mark svg{width:100%;height:100%}
.brand-text strong{
  font-family:var(--font-ui);font-weight:700;font-size:16px;
  letter-spacing:-.005em;text-transform:uppercase;
  display:block;line-height:1.1;color:var(--heading);
}
.brand-text span{
  font-size:10px;color:var(--text);letter-spacing:.005em;
  font-weight:400;display:block;line-height:1.4;margin-top:1px;
}

/* --- Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14px;font-weight:500;font-family:var(--font-body);
  padding:12px 22px;border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--surface);color:var(--heading);
  cursor:pointer;transition:all .2s ease;white-space:nowrap;
  text-align:center;
}
.btn:hover{border-color:var(--primary);color:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn svg{width:15px;height:15px;stroke-width:2;flex-shrink:0;transition:transform .2s ease}
.btn:hover svg{transform:translateX(2px)}

.btn-pri{
  background:var(--grad-cta);
  color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(31,85,92,.30);
}
.btn-pri:hover{
  background:var(--grad-cta-hover);
  color:#fff;border-color:transparent;
  box-shadow:0 8px 24px rgba(31,85,92,.38);
}
.btn-lg{padding:14px 28px;font-size:14.5px}
.btn-sm{padding:8px 15px;font-size:12.5px;border-radius:var(--r-xs)}
.btn-block{width:100%}

/* --- Eyebrow / section heads ------------------------------------------ */
.eyebrow{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--primary-dark);font-weight:600;margin-bottom:14px;
  display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--primary);opacity:.6;flex-shrink:0}
.eyebrow.center{justify-content:center}

.h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(29px,3.6vw,44px);
  letter-spacing:-.022em;line-height:1.14;color:var(--heading);
}
.h2 em{font-style:italic;color:var(--primary-dark)}

.lede{color:var(--text);font-size:16.5px;max-width:640px;margin-top:16px;line-height:1.65}

.sec-head{max-width:730px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}

/* --- Layout ----------------------------------------------------------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.section{padding:104px 0;position:relative}
.section--tight{padding:64px 0}
.section--alt{background:var(--section)}
.section--surface{background:var(--surface)}

/* --- Cards ------------------------------------------------------------ */
.card-base{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-xs);
}

/* --- Pills / tags ----------------------------------------------------- */
.pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;display:inline-block}
.pill-primary  {background:var(--primary-wash);  color:var(--primary-ink)}
.pill-success  {background:var(--secondary-wash);color:var(--secondary-ink)}
.pill-warning  {background:var(--gold-wash);     color:var(--gold-ink)}
.pill-danger   {background:var(--clay-wash);     color:var(--clay-ink)}

/* --- Scroll reveal ---------------------------------------------------- */
.rev{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
}
.rev.in{opacity:1;transform:none}

/* ==========================================================================
   Motion & contrast preferences
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rev{opacity:1;transform:none}
}

@media (prefers-contrast:more){
  :root{--text:#41504D;--muted:#5A6562;--border:#CFC4AF}
}