/* FAST26 Static Site
   ------------------------------------------------------------------
   Theme update: FAST gradients set to #d75c4a (warm) + #948c74 (sand).
   Edit theme variables in :root. Designed to be readable & accessible.
*/

:root{
  --bg: #070a12;
  --bg-elev: rgba(255,255,255,0.06);
  --bg-elev-2: rgba(255,255,255,0.10);
  --text: #e9eefc;
  --muted: rgba(233,238,252,0.72);
  --muted-2: rgba(233,238,252,0.55);
  --border: rgba(233,238,252,0.12);
  --shadow: 0 18px 60px rgba(0,0,0,0.45);
  --radius: 16px;

  /* FAST brand */
  --fast-red: #d75c4a;
  --fast-sand: #948c74;

  /* Gradient system */
  --grad: linear-gradient(135deg, var(--fast-red) 0%, var(--fast-sand) 100%);
  --grad-strong: linear-gradient(135deg, rgba(215,92,74,0.98) 0%, rgba(148,140,116,0.98) 100%);
  --grad-soft: linear-gradient(180deg, rgba(148,140,116,0.18) 0%, rgba(7,10,18,0.98) 100%);

  --maxw: 1160px;
  --pad: clamp(18px, 3vw, 28px);

  --h1: clamp(2.2rem, 4vw, 3.75rem);
  --h2: clamp(1.6rem, 2.4vw, 2.4rem);
  --h3: clamp(1.2rem, 1.7vw, 1.6rem);
  --p: 1rem;
  --small: 0.92rem;

  /* Focus ring tuned to palette */
  --focus: 0 0 0 4px rgba(215,92,74,0.30);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 18% -12%, rgba(215,92,74,0.20), transparent 70%),
    radial-gradient(1100px 800px at 120% 6%, rgba(148,140,116,0.20), transparent 62%),
    radial-gradient(900px 800px at 45% 120%, rgba(215,92,74,0.10), transparent 62%),
    var(--bg);
  line-height: 1.6;
}

img{ max-width:100%; height:auto; display:block; }

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

::selection{ background: rgba(215,92,74,0.28); }

.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{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left: var(--pad);
  top: var(--pad);
  width:auto; height:auto;
  z-index:9999;
  padding:10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.8);
  border: 1px solid var(--border);
  outline: none;
  box-shadow: var(--focus);
}

.container{
  width: min(var(--maxw), calc(100% - var(--pad)*2));
  margin: 0 auto;
}

.section{ padding: clamp(54px, 7vw, 92px) 0; }
.section.tight{ padding: clamp(38px, 5vw, 64px) 0; }

.grid{
  display:grid;
  gap: clamp(14px, 2.2vw, 22px);
}
.grid.two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px){
  .grid.two, .grid.three, .grid.four{ grid-template-columns: 1fr; }
}

.stack > * + *{ margin-top: 14px; }
.stack.tight > * + *{ margin-top: 10px; }

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--muted);
  font-size: var(--small);
  width: fit-content;
}
.pill strong{ color: var(--text); font-weight: 600; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
}
.badge .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--grad);
}

/* Buttons ---------------------------------------------------------- */
.btn-row{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight: 650;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, filter 160ms ease;
  cursor:pointer;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.085);
  border-color: rgba(233,238,252,0.18);
}
.btn:focus{ outline:none; box-shadow: var(--focus); }

.btn.primary{
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--grad-strong);
  color: #1a1a1a; /* readable on warm/sand */
}
.btn.primary:hover{
  filter: brightness(1.04);
}
.btn.ghost{ background: transparent; }
.btn.small{
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.95rem;
}
.btn.full{ width: 100%; }

/* Header ----------------------------------------------------------- */
.top-banner{
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.top-banner .inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--pad);
}
.top-banner a{
  text-decoration: underline;
  text-decoration-color: rgba(233,238,252,0.35);
  text-underline-offset: 3px;
}

.site-header{
  position: sticky;
  top:0;
  z-index: 1200;
  background: rgba(7,10,18,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(233,238,252,0.10);
}
.site-header .inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px var(--pad);
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.brand img{
  width: 132px;
  height: auto;
}
.brand .meta{
  display:flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand .meta span{
  font-size: 0.92rem;
  color: var(--muted);
}
.brand .meta strong{
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.nav{
  display:flex;
  align-items:center;
  gap: 14px;
}
.nav a{
  font-size: 0.95rem;
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.nav a:hover{
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border-color: rgba(233,238,252,0.10);
}
.nav a[aria-current="page"]{
  color: var(--text);
  background: rgba(255,255,255,0.07);
  border-color: rgba(233,238,252,0.12);
}

.header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.nav-toggle{
  display:none;
  width: 46px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.nav-toggle:focus{ outline:none; box-shadow: var(--focus); }

@media (max-width: 980px){
  .brand{ min-width: 0; }
  .brand .meta{ display:none; }
  .header-actions .btn.ghost{ display:none; }

  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  body.nav-open .nav{
    display:flex;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 14px;
    margin: 0 14px;
    border-radius: var(--radius);
    background: rgba(7,10,18,0.98);
    border: 1px solid rgba(233,238,252,0.14);
    box-shadow: var(--shadow);
  }
  body.nav-open .nav a{ width: 100%; }
}

/* Hero ------------------------------------------------------------- */
.hero{
  position: relative;
  overflow:hidden;
  padding: clamp(56px, 7vw, 92px) 0;
}
.hero .bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(148,140,116,0.14) 0%, rgba(7,10,18,0.92) 72%),
    url("../img/hero-austin.jpg") center/cover no-repeat;
  filter: saturate(1.05);
  transform: scale(1.02);
}
.hero .content{ position:relative; }
.hero h1{
  font-size: var(--h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 10px 0 16px;
}
.hero h1 .grad{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p{
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 22px;
}
.hero .meta-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 18px;
}
.hero .meta-row .pill{ background: rgba(7,10,18,0.5); }

.hero-card{
  margin-top: 26px;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(233,238,252,0.14);
  background: rgba(7,10,18,0.78);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-card .row{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
}
.hero-card .row > div{ padding: 22px; }
.hero-card .row > div + div{
  border-left: 1px solid rgba(233,238,252,0.10);
  background: rgba(255,255,255,0.03);
}
@media (max-width: 900px){
  .hero-card .row{ grid-template-columns: 1fr; }
  .hero-card .row > div + div{
    border-left: none;
    border-top: 1px solid rgba(233,238,252,0.10);
  }
}

/* Cards ------------------------------------------------------------ */
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(233,238,252,0.12);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 14px 50px rgba(0,0,0,0.25);
  overflow:hidden;
}
.card.pad{ padding: 18px; }
.card h3{ margin: 0 0 6px; font-size: var(--h3); line-height: 1.2; }
.card p{ margin: 0; color: var(--muted); }
.card .media{
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(233,238,252,0.10);
}
.card .media img{ width:100%; height:100%; object-fit: cover; }
.card .content{ padding: 18px; }
.card .meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted-2);
  font-size: 0.92rem;
}

/* Premium card treatment (glass + gradient stripe) ------------------ */
.card.premium{
  position: relative;
  background: rgba(255,255,255,0.045);
  border-color: rgba(233,238,252,0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 70px rgba(0,0,0,0.28);
}

/* Top gradient stripe */
.card.premium::before{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 4px;
  border-radius: 999px;
  background: var(--grad);
  opacity: 0.95;
  pointer-events: none;
}

/* Soft internal sheen */
.card.premium::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(800px 340px at 20% 0%, rgba(255,255,255,0.08), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(215,92,74,0.08), transparent 60%);
  opacity: 0.9;
  pointer-events: none;
}

/* Make content sit above overlays */
.card.premium > *{
  position: relative;
  z-index: 1;
}

/* Optional stronger stripe variant */
.card.premium.strong::before{
  height: 6px;
  background: var(--grad-strong);
}

/* Optional: slightly more breathing room above text when pad is used */
.card.premium.pad{
  padding-top: 26px; /* accounts for stripe */
}

/* Hover: premium feel without being flashy */
.card.premium{
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.card.premium:hover{
  transform: translateY(-2px);
  border-color: rgba(233,238,252,0.20);
  background: rgba(255,255,255,0.055);
  box-shadow: 0 22px 90px rgba(0,0,0,0.34);
}

/* Workshop pricing divider (you already reference split-rule in HTML) */
.split-rule{
  height: 1px;
  width: 100%;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(233,238,252,0.14), transparent);
  margin: 12px 0;
}

/* Workshops: premium cards ------------------------------------------------ */
.workshop-grid .card{
  position: relative;
  overflow: hidden;
}

.workshop-grid .card.workshop{
  background: rgba(255,255,255,0.04);
  border-color: rgba(233,238,252,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 70px rgba(0,0,0,0.28);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

/* Bold top stripe */
.workshop-grid .card.workshop::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height: 6px;
  background: var(--grad-strong);
  opacity: 1;
  pointer-events:none;
}

/* Subtle glass sheen */
.workshop-grid .card.workshop::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(255,255,255,0.08), transparent 58%),
    radial-gradient(700px 420px at 90% 10%, rgba(215,92,74,0.08), transparent 60%);
  opacity: 0.9;
  pointer-events:none;
}

/* Keep content above overlays */
.workshop-grid .card.workshop > *{ position: relative; z-index: 1; }

/* Hover: glow edge */
.workshop-grid .card.workshop:hover{
  transform: translateY(-3px);
  border-color: rgba(233,238,252,0.22);
  box-shadow: 0 26px 110px rgba(0,0,0,0.40);
  background: rgba(255,255,255,0.055);
}

/* Workshop header row */
.ws-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.ws-tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(233,238,252,0.14);
  background: rgba(0,0,0,0.18);
  font-size: 0.85rem;
  color: var(--muted);
}
.ws-tag .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--grad);
}
.ws-featured{
  color: #1a1a1a;
  background: var(--grad-strong);
  border-color: rgba(255,255,255,0.10);
}
.ws-featured .dot{ background: rgba(0,0,0,0.35); }

/* Scan chips */
.ws-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ws-chip{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(233,238,252,0.12);
  background: rgba(0,0,0,0.18);
  font-size: 0.9rem;
  color: var(--muted);
}

/* Title: more presence */
.workshop-grid .card.workshop h3{
  margin: 10px 0 0;
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* Pricing footer panel */
.ws-price{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(233,238,252,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.12));
}
.ws-price strong{
  display:block;
  margin-bottom: 6px;
}
.ws-price .row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: var(--muted);
  font-size: 0.95rem;
}
.ws-price .row span b{ color: var(--text); font-weight: 800; }

/* CTA row */
.ws-cta{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.ws-cta .btn{ padding: 11px 14px; border-radius: 14px; }
.ws-cta .btn.full{ width: 100%; }

/* Optional: Featured workshop stronger glow */
.workshop-grid .card.workshop.featured{
  border-color: rgba(215,92,74,0.28);
}
.workshop-grid .card.workshop.featured:hover{
  border-color: rgba(215,92,74,0.42);
}


/* Tables ----------------------------------------------------------- */
.table-wrap{
  border-radius: var(--radius);
  overflow:auto;
  border: 1px solid rgba(233,238,252,0.12);
  background: rgba(255,255,255,0.03);
}
table{
  width:100%;
  border-collapse: collapse;
  min-width: 640px;
}
th, td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(233,238,252,0.10);
  vertical-align: top;
}
th{
  text-align:left;
  color: var(--muted);
  font-weight: 650;
  letter-spacing: 0.01em;
  background: rgba(0,0,0,0.22);
}
td{ color: var(--text); }
tr:hover td{ background: rgba(255,255,255,0.02); }

/* Callouts --------------------------------------------------------- */
.callout{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(233,238,252,0.14);
  background:
    radial-gradient(520px 360px at 18% 30%, rgba(215,92,74,0.14), transparent 72%),
    radial-gradient(640px 420px at 92% 12%, rgba(148,140,116,0.16), transparent 70%),
    rgba(255,255,255,0.03);
  padding: 18px;
}
.callout h3{ margin: 0 0 8px; }
.callout p{ margin: 0; color: var(--muted); }

/* FAQ -------------------------------------------------------------- */
details{
  border-radius: var(--radius);
  border: 1px solid rgba(233,238,252,0.12);
  background: rgba(255,255,255,0.03);
  padding: 14px 16px;
}
details + details{ margin-top: 12px; }
summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 650;
}
summary::-webkit-details-marker{ display:none; }
details p{ margin: 10px 0 0; color: var(--muted); }

.small{ font-size: var(--small); color: var(--muted); }

/* Footer ----------------------------------------------------------- */
.site-footer{
  border-top: 1px solid rgba(233,238,252,0.10);
  background: rgba(148,140,116,0.10);
}
.site-footer .inner{ padding: 44px var(--pad); }
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 22px;
}
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.footer-links{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links a{ color: var(--muted); }
.footer-links a:hover{
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(233,238,252,0.32);
  text-underline-offset: 3px;
}

input, textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(233,238,252,0.14);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  font-size: 1rem;
}
input:focus, textarea:focus{
  outline:none;
  box-shadow: var(--focus);
}
label{ display:block; font-size: 0.92rem; color: var(--muted); margin-bottom: 6px; }

.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px){
  .form-row{ grid-template-columns: 1fr; }
}

/* Sticky mobile CTA ------------------------------------------------ */
.mobile-cta{ display:none; }
@media (max-width: 900px){
  .mobile-cta{
    display:flex;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 1400;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(7,10,18,0.86);
    border: 1px solid rgba(233,238,252,0.12);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn{ transition: none; }
}

/* Responsive stacked table (mobile) -------------------------------- */
.table-stack table{ min-width: 0; }

@media (max-width: 820px){
  .table-stack table,
  .table-stack thead,
  .table-stack tbody,
  .table-stack th,
  .table-stack td,
  .table-stack tr{
    display: block;
    width: 100%;
  }

  .table-stack thead{
    display: none; /* labels come from data-label */
  }

  .table-stack tbody{
    padding: 10px;
  }

  .table-stack tr{
    border-radius: var(--radius);
    border: 1px solid rgba(233,238,252,0.12);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 14px 50px rgba(0,0,0,0.18);
    overflow: hidden;
    margin: 0 0 12px 0;
  }

  .table-stack td{
    border: none;
    border-top: 1px solid rgba(233,238,252,0.10);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
  }

  .table-stack td:first-child{
    border-top: none;
  }

  .table-stack td::before{
    content: attr(data-label);
    color: var(--muted);
    font-weight: 650;
    letter-spacing: 0.01em;
    padding-right: 10px;
  }

  /* Make the value column read cleanly */
  .table-stack td{
    color: var(--text);
  }

  /* For long feature text, let it wrap nicely */
  .table-stack td[data-label="Feature"]{
    grid-template-columns: 1fr;
  }

  .table-stack td[data-label="Feature"]::before{
    margin-bottom: 6px;
    display: block;
  }

  /* Keep checkmarks aligned and consistent */
  .table-stack td:not([data-label="Feature"]){
    justify-content: space-between;
  }
}