/* ==========================================================================
   Life Glow — design system
   Transcribed from the redesign handoff. Tokens, motion and the primitives
   every page is built from. Kept as plain CSS rather than Tailwind utilities
   because the handoff specifies literal values, and because this file must
   still render if a Tailwind build is stale.
   ========================================================================== */

:root {
  /* Colour */
  --lg-green:       #013220;
  --lg-green-deep:  #02261A;
  --lg-ink:         #0E1A14;
  --lg-cream:       #F6F1E7;
  --lg-paper:       #FFFDF8;
  --lg-line:        #E4DCCB;
  --lg-sand:        #DCD3C1;
  --lg-terracotta:  #B5552D;
  --lg-blush:       #E8C9B4;
  --lg-light:       #FFE39A;
  --lg-leaf:        #7FB58E;
  --lg-online:      #7FD1A0;
  --lg-text-2:      #3F4B44;
  --lg-text-3:      #5C6B62;

  /* Type */
  --lg-display: "Cormorant Garamond", Georgia, serif;
  --lg-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion — one signature curve everywhere */
  --lg-ease: cubic-bezier(.2, .7, .2, 1);

  /* Elevation */
  --lg-shadow-card: 0 30px 60px -30px rgba(1, 50, 32, .35);
  --lg-shadow-form: 0 40px 80px -50px rgba(1, 50, 32, .35);
  --lg-shadow-drop: 0 24px 50px -20px rgba(1, 50, 32, .35);
}

/* --------------------------------------------------------------- base --- */
.lg { background: var(--lg-cream); color: var(--lg-ink); font-family: var(--lg-body); -webkit-font-smoothing: antialiased; }
.lg *, .lg *::before, .lg *::after { box-sizing: border-box; }
/* Plain links. :where() keeps these at zero specificity so every button and
   component that styles its own links — a cream button on a dark hero, the
   header's Apply Now — wins without having to out-shout them. */
:where(.lg) a { color: var(--lg-green); text-decoration: none; }
:where(.lg) a:hover { color: var(--lg-terracotta); }
.lg ::selection { background: var(--lg-green); color: var(--lg-cream); }
.lg img { max-width: 100%; }
.lg input, .lg select, .lg textarea, .lg button { font-family: inherit; }
.lg input:focus, .lg select:focus, .lg textarea:focus {
  outline: none; border-color: var(--lg-green) !important;
  box-shadow: 0 0 0 3px rgba(1, 50, 32, .12);
}

/* The hidden attribute must win. Several components (the lightbox, the
   calendar's months) carry their own display value, and a display declaration
   quietly beats the browser's own [hidden] { display: none } — leaving the
   overlay covering the gallery and every month stacked on top of each other. */
.lg [hidden] { display: none !important; }

.lg-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.lg-section { padding: clamp(80px, 10vw, 140px) 0; }
.lg-page-head { padding-top: 150px; }

/* --------------------------------------------------------------- type --- */
.lg-display { font-family: var(--lg-display); }
.lg h1, .lg h2, .lg h3, .lg h4 { font-family: var(--lg-display); margin: 0; font-weight: 500; }

.lg-h1 { font-size: clamp(44px, 7vw, 104px); font-weight: 500; line-height: .98; letter-spacing: -.015em; margin: 0; }
.lg-h1-hero { font-size: clamp(48px, 8.5vw, 124px); line-height: .95; letter-spacing: -.01em; }
.lg-h2 { font-size: clamp(36px, 4.2vw, 60px); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
.lg-h3 { font-size: clamp(26px, 2vw, 30px); font-weight: 600; line-height: 1.2; margin: 0; }
.lg-h1 em, .lg-h2 em { font-style: italic; color: var(--lg-green); }
.lg-on-dark .lg-h1 em, .lg-on-dark .lg-h2 em { color: var(--lg-blush); }

.lg-eyebrow {
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--lg-terracotta); font-family: var(--lg-body);
}
.lg-on-dark .lg-eyebrow { color: var(--lg-blush); }

/* Forest green is the link colour on cream and invisible on green. Inside a
   dark section a link takes the section's own colour instead, so cards and
   lists built from anchors stay readable. */
:where(.lg-on-dark) a { color: inherit; }
:where(.lg-on-dark) a:hover { color: var(--lg-blush); }
.lg-lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.62; font-weight: 300; color: var(--lg-text-2); }
.lg-on-dark .lg-lead { color: rgba(246, 241, 231, .92); }
.lg-body { font-size: 16px; line-height: 1.6; color: var(--lg-text-2); }
.lg-meta { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--lg-text-3); }
.lg-stat { font-family: var(--lg-display); font-size: clamp(44px, 4vw, 56px); line-height: 1; font-weight: 500; }
.lg-glow-text { text-shadow: 0 0 30px rgba(232, 201, 180, .55), 0 0 80px rgba(232, 201, 180, .3); }

/* ------------------------------------------------------------ buttons --- */
.lg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; border-radius: 2px; border: 1px solid transparent;
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; transition: all .4s var(--lg-ease);
}
.lg-btn-green { background: var(--lg-green); color: var(--lg-cream); }
.lg-btn-green:hover { background: var(--lg-terracotta); color: #fff; }
.lg-btn-cream { background: var(--lg-cream); color: var(--lg-green); }
.lg-btn-cream:hover { background: var(--lg-terracotta); color: #fff; }
.lg-btn-accent { background: var(--lg-terracotta); color: #fff; }
.lg-btn-accent:hover { background: var(--lg-cream); color: var(--lg-green); }
.lg-btn-outline { border-color: currentColor; background: transparent; color: inherit; }
.lg-btn-outline:hover { background: rgba(1, 50, 32, .06); }
.lg-on-dark .lg-btn-outline { border-color: rgba(246, 241, 231, .6); color: var(--lg-cream); }
.lg-on-dark .lg-btn-outline:hover { background: rgba(246, 241, 231, .12); border-color: var(--lg-cream); }
.lg-btn-pulse { animation: lg-glow 3s infinite; }
.lg-round {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor;
  background: transparent; color: inherit; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all .4s var(--lg-ease);
}
.lg-round:hover { background: var(--lg-green); color: var(--lg-cream); border-color: var(--lg-green); }

/* -------------------------------------------------------------- cards --- */
.lg-card { background: var(--lg-paper); border: 1px solid var(--lg-line); border-radius: 3px; }
.lg-card-lift { transition: transform .6s var(--lg-ease), box-shadow .6s var(--lg-ease); }
.lg-card-lift:hover { transform: translateY(-6px); box-shadow: var(--lg-shadow-card); }

/* ------------------------------------------------------------- motion --- */
@keyframes lg-kenburns { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes lg-lineUp   { from { opacity: 0; transform: translateY(110%) skewY(4deg); } to { opacity: 1; transform: none; } }
@keyframes lg-fadeUp   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lg-fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes lg-pageIn   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lg-marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lg-floatY   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lg-spin     { to { transform: rotate(360deg); } }
@keyframes lg-pop      { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes lg-rise     { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; } 85% { opacity: .8; } 100% { transform: translateY(-78vh) scale(1.3); opacity: 0; } }
@keyframes lg-grow     { to { stroke-dashoffset: 0; } }
@keyframes lg-bloom    { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lg-twinkle  {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 221, 150, .9)) drop-shadow(0 0 14px rgba(232, 201, 180, .6)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255, 236, 190, 1)) drop-shadow(0 0 28px rgba(232, 201, 180, .9)); }
}
@keyframes lg-haze     { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.15); } }
@keyframes lg-glow     { 0%, 100% { box-shadow: 0 0 0 0 rgba(181, 85, 45, .5); } 50% { box-shadow: 0 0 0 14px rgba(181, 85, 45, 0); } }

.lg-page { animation: lg-pageIn .8s var(--lg-ease) both; }

/* While a full-screen viewer is open the fixed header steps aside, so
   nothing of the page beneath can intercept a tap meant for the viewer.
   On a phone the close button lands exactly where the hamburger sits. */
.lg-modal-open .lg-header,
.lg-modal-open .lg-chat { opacity: 0; pointer-events: none; }

/* Scroll reveal. Elements start hidden only once the controller has claimed
   them, so the page is never blank if JavaScript fails to load. */
.lg-js .lg-rv { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--lg-ease), transform 1s var(--lg-ease); }
.lg-js .lg-rv.in { opacity: 1; transform: none; }
.lg-rv[data-d="1"] { transition-delay: .12s; }
.lg-rv[data-d="2"] { transition-delay: .24s; }
.lg-rv[data-d="3"] { transition-delay: .36s; }
.lg-rv[data-d="4"] { transition-delay: .48s; }

.lg-js .lg-rvx { opacity: 0; clip-path: inset(0 96% 0 0); transition: opacity 1.2s var(--lg-ease), clip-path 1.2s var(--lg-ease); }
.lg-js .lg-rvx.in { opacity: 1; clip-path: inset(0 0 0 0); }

.lg-imgzoom { overflow: hidden; }
.lg-imgzoom img { transition: transform 1.2s var(--lg-ease); display: block; }
.lg-imgzoom:hover img { transform: scale(1.05); }

.lg-ul { position: relative; }
.lg-ul::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--lg-ease);
}
.lg-ul:hover::after { transform: scaleX(1); transform-origin: left; }

/* Seed → tree motif */
.lg-tr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .lg-tr { animation: lg-grow 2.2s cubic-bezier(.45, 0, .2, 1) forwards; }
.lg-fr, .lg-lf { transform: scale(0); transform-box: fill-box; transform-origin: center; opacity: 0; }
.in .lg-fr { animation: lg-bloom 1s var(--lg-ease) forwards, lg-twinkle 3.2s ease-in-out infinite; }
.in .lg-lf { animation: lg-bloom .8s var(--lg-ease) forwards; }

/* Seeds of light rising through the hero */
.lg-seed {
  position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--lg-light);
  box-shadow: 0 0 8px 2px rgba(255, 227, 154, .8), 0 0 20px 6px rgba(232, 201, 180, .35);
  animation: lg-rise linear infinite;
}

/* ------------------------------------------------------------- layout --- */
.lg-g2 { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 6vw, 96px); }
.lg-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lg-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lg-desk { display: flex; }
.lg-mob { display: none; }

/* The handoff's single breakpoint: below it the nav collapses to a hamburger
   and the editorial two- and three-column splits become one column. */
@media (max-width: 1120px) {
  .lg-desk { display: none !important; }
  .lg-mob { display: flex !important; }
  .lg-g2, .lg-g3 { grid-template-columns: 1fr !important; }
  .lg-g4 { grid-template-columns: 1fr 1fr !important; }
  .lg-gallery { grid-template-columns: 1fr 1fr !important; }
  .lg-stack { flex-direction: column !important; }
  .lg-hide-m { display: none !important; }
  .lg-page-head { padding-top: 118px; }
}

/* Phone. Four-up grids stop being two cramped columns, section rhythm tightens,
   and anything the design floats over the edge of an image is brought inside. */
@media (max-width: 680px) {
  .lg-g4 { grid-template-columns: 1fr !important; }
  .lg-gallery { grid-template-columns: 1fr !important; }
  .lg-gallery > * { grid-column: auto !important; }
  .lg-section { padding: clamp(56px, 14vw, 80px) 0; }
  .lg-page-head { padding-top: 104px; }
  .lg-btn { padding: 15px 24px; }

  /* Cards the design hangs off the side of a photograph sit under it instead,
     so nothing is clipped by the edge of a narrow screen. */
  .lg-float-card {
    position: static !important; max-width: none !important;
    margin-top: -28px; margin-left: 16px; margin-right: 16px;
  }

  /* Editorial rows that read as a table on a wide screen become stacked
     blocks rather than three columns fighting over 320px. */
  .lg-row > * { min-width: 0 !important; flex: 1 1 100% !important; }

  /* A 21:9 band is a 130px sliver on a phone. Nearer a photograph again. */
  .lg-wide { aspect-ratio: 16 / 10 !important; }

  /* Seven columns have to fit, and each day still has to be tappable, so the
     calendar gives back its padding rather than shrinking the cells. */
  .lg-cal { padding: 14px !important; }
  .lg-cal-grid { gap: 3px !important; }
}

/* Touch pointers never leave a hover state, so a card that lifts or a row that
   slides on hover would stay stuck where the finger left it. */
@media (hover: none) {
  .lg-card-lift:hover { transform: none; box-shadow: none; }
  .lg-imgzoom:hover img { transform: none; }
  .lg-job:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lg *, .lg *::before, .lg *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .lg-js .lg-rv, .lg-js .lg-rvx { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}