/* Premier Media Design — component classes (verbatim from source system) */

/* --------------------------------------------------------------------------
   4. BUTTONS  — pill, 16×20 padding, 14px aeonik-medium, .3s ease-out
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-medium); font-size: 14px; font-weight: 400;
  padding: 16px 20px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: var(--transition); text-transform: none; line-height: 1;
}

/* Primary — slate fill, white ↗ arrow */
.btn-primary {
  background: var(--slate); color: var(--white);
  border-color: rgba(255,255,255,.2);
}
.btn-primary:hover { background: var(--slate-hover); }

/* Inverse — white fill, slate text, dark arrow (hero CTA) */
.btn-inverse {
  background: var(--white); color: var(--slate);
  border-color: rgba(255,255,255,.2);
}

/* Ghost (dark glass) — used on dark sections */
.btn-ghost {
  background: rgba(97,135,100,.4); color: var(--white);
  border-color: rgba(255,255,255,.1);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(97,135,100,.6); }

/* ↗ diagonal arrow — exact SVG from site; nudges (4px,-4px) on hover */
.btn.has-arrow::after {
  content: ''; width: 16px; height: 16px; display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.10938 11.8887L11.8875 4.1105' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.8867 10.4746L11.8867 4.11065L5.52276 4.11065' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transition: var(--transition);
}
.btn-inverse.has-arrow::after,
.btn.dark-arrow::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.10938 11.8887L11.8875 4.1105' stroke='%23618764' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.8867 10.4746L11.8867 4.11065L5.52276 4.11065' stroke='%23618764' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.btn.has-arrow:hover::after { transform: translate(4px, -4px); }

/* Tag / filter pill (.custm-btns on site) */
.tag-pill {
  display: inline-block; padding: 7px 25px 9px;
  border: 1px solid var(--slate); border-radius: var(--radius-pill);
  color: var(--slate); font-family: var(--font-regular);
  font-size: clamp(16px, 1.04vw, 18px); letter-spacing: -.28px; line-height: 1.5em;
  transition: var(--transition); cursor: pointer; background: transparent;
}
.tag-pill:hover { background: var(--slate); border-color: var(--slate-hover); color: var(--white); }

/* --------------------------------------------------------------------------
   5. MICRO-INTERACTIONS  (all verbatim from site)
   -------------------------------------------------------------------------- */

/* 5.1 Underline sweep (.anim-a) — sweeps out right, in from left, 70ms delay */
.anim-a { position: relative; }
.anim-a::before {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px; background-color: currentColor;
  will-change: transform; transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--dur-underline) var(--ease-underline);
}
.anim-a:hover::before {
  transform: scaleX(1); transform-origin: 0 50%;
  transition-timing-function: ease; transition-delay: 70ms;
}

/* 5.2 Logo marquee — 30s linear infinite (v2 = reverse) */
@keyframes marquee    { 0% { transform: translateX(0%); }    100% { transform: translateX(-100%); } }
@keyframes marquee-v2 { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } }
.marquee        { display: flex; overflow: hidden; }
.marquee-track  { display: flex; flex-shrink: 0; align-items: center;
                  animation: marquee 30s linear infinite; }
.marquee.reverse .marquee-track { animation-name: marquee-v2; }
.marquee:hover .marquee-track   { animation-play-state: paused; }

/* 5.3 Pulse ring — floating "Book A Call" CTA */
@keyframes pulseShadow {
  0%   { box-shadow: 0 0 0 0    var(--pulse); }
  70%  { box-shadow: 0 0 0 10px rgba(156,176,128,0); }
  100% { box-shadow: 0 0 0 0    rgba(156,176,128,0); }
}
.floating-btn {
  position: fixed; bottom: 20px; right: 20px; z-index: 22;
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--mist); border-radius: var(--radius-pill); max-width: 250px;
  box-shadow: 0 0 1px 1px var(--pulse);
  animation: pulseShadow 1.8s infinite;
  color: var(--ink); cursor: pointer;
}
.floating-btn img, .floating-btn .avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--slate); flex: 0 0 44px;
}
.floating-btn strong { font-family: var(--font-medium); font-weight: 500; display: block; font-size: 15px; }
.floating-btn span   { font-size: 13px; opacity: .7; }

/* 5.4 Width reveal */
@keyframes expandWidth { from { width: 0; } to { width: 100%; } }
.expand-width { animation: expandWidth .8s ease-out both; }

/* 5.5 Status dot — glowing green (announcement bar & availability badge) */
.status-dot {
  display: inline-block; width: 8px; height: 8px; flex: 0 0 8px;
  background: var(--green); border-radius: 50%;
  box-shadow: var(--glow-green); margin-top: -1px;
}

/* 5.6 Availability badge — pill pair from hero */
.avail-badge {
  display: inline-flex; align-items: center; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.15); overflow: hidden;
  font-size: 14px; color: var(--white); backdrop-filter: blur(4px);
}
.avail-badge .seg { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; }
.avail-badge .seg:first-child { background: rgba(255,255,255,.08); }
.avail-badge .seg + .seg { border-left: 1px solid rgba(255,255,255,.12); opacity: .8; }

/* 5.7 Logo hover invert (partner strips on tiles) */
.invert-hover:hover img { filter: brightness(0) invert(1); }

/* 5.8 Tab hover micro-scale */
.tab-hover:hover { color: var(--slate); transform: scale(1.01); }

/* 5.9 Chevron flip (pricing toggle) */
.chevron-flip::after {
  content: ''; width: 12px; height: 12px; display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23618764' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  transition: var(--transition); margin-left: 6px;
}
.chevron-flip:hover::after { transform: rotate(180deg) translateY(-4px); }

/* 5.10 Rotating circular badge ("START A PROJECT") */
@keyframes spin { to { transform: rotate(360deg); } }
.rot-badge {
  position: relative; width: 110px; height: 110px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
}
.rot-badge svg   { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.rot-badge svg text { fill: var(--white); font-family: var(--font-medium);
                      font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; }
.rot-badge .plus { color: var(--white); font-size: 20px; line-height: 1; }

/* 5.11 Selection-frame headline highlight (hero "Squarespace" box) */
.frame-highlight { position: relative; display: inline-block; padding: .08em .18em; }
.frame-highlight::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,.35);
}
.frame-highlight .h { position: absolute; width: 11px; height: 11px; color: rgba(255,255,255,.8); pointer-events: none; }
.frame-highlight .h::before, .frame-highlight .h::after {
  content: ''; position: absolute; background: currentColor;
}
.frame-highlight .h::before { left: 5px; top: 0; width: 1px; height: 11px; }
.frame-highlight .h::after  { top: 5px; left: 0; width: 11px; height: 1px; }
.frame-highlight .h.tl { top: -6px; left: -6px; }
.frame-highlight .h.tr { top: -6px; right: -6px; }
.frame-highlight .h.bl { bottom: -6px; left: -6px; }
.frame-highlight .h.br { bottom: -6px; right: -6px; }

/* --------------------------------------------------------------------------
   6. CARDS & SURFACES
   -------------------------------------------------------------------------- */
.card {
  background: var(--white); border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 40px); transition: var(--transition);
}
.card-dark {
  background: var(--ink-3); color: var(--white);
  border-radius: var(--radius-card); padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(255,255,255,.08); transition: var(--transition);
}
.card-glass {
  background: var(--grad-glass-slate);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-card); color: var(--white);
  padding: clamp(24px, 3vw, 40px);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.card-glass-subtle {
  background: var(--grad-glass-subtle);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-card); color: var(--white);
  padding: clamp(24px, 3vw, 40px);
}
.card:hover, .card-dark:hover { transform: translateY(-4px); }

/* Portfolio tile — image + tag pill overlay */
.work-tile { position: relative; border-radius: var(--radius-card); overflow: hidden; cursor: pointer; }
.work-tile img, .work-tile .ph {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform .5s ease-out;
}
.work-tile:hover img, .work-tile:hover .ph { transform: scale(1.04); }
.work-tile .cat {
  position: absolute; top: 14px; left: 14px;
  font-size: 13px; font-family: var(--font-medium); color: var(--white);
  background: rgba(28,36,40,.55); padding: 6px 14px; border-radius: var(--radius-pill);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
}

/* Pricing card */
.price-card {
  border-radius: var(--radius-card); padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 18px;
  background: var(--white); border: 1px solid var(--mist-3);
  transition: var(--transition);
}
.price-card.featured { background: var(--ink-2); color: var(--white); border-color: rgba(255,255,255,.1); }
.price-card .from    { font-size: 14px; opacity: .6; display: block; }
.price-card .price   { font-size: var(--text-h3); font-family: var(--font-medium); letter-spacing: -.48px; }
.price-card ul       { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.price-card ul li    { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.price-card ul li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate); flex: 0 0 6px;
}
.price-card.featured ul li::before { background: var(--slate-hover); }

/* --------------------------------------------------------------------------
   7. FORMS  — pill inputs, hairline borders, blur
   -------------------------------------------------------------------------- */
.field label {
  display: block; font-size: 14px; font-family: var(--font-medium);
  margin-bottom: 8px;
}
.field label .req { color: var(--slate); margin-left: 2px; }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-regular);
  font-size: 14px !important; padding: 16px 24px;
  border-radius: var(--radius-round);
  border: .5px solid rgba(28,36,40,.1);
  background: rgba(28,36,40,.04); color: var(--ink);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  outline: none; transition: var(--transition);
}
.textarea { border-radius: var(--radius-card); min-height: 140px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--slate); }
/* Dark-section variant */
.theme-dark .input, .theme-dark .select, .theme-dark .textarea,
.section.black .input, .section.black .select, .section.black .textarea {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: var(--white);
}
.input::placeholder, .textarea::placeholder { color: currentColor; opacity: .45; }

/* --------------------------------------------------------------------------
   8. NAVIGATION & CHROME
   -------------------------------------------------------------------------- */
/* Announcement bar — near-black strip, glowing dot, ghost pill CTA */
.announce-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #121A1E; color: var(--white); font-size: 14px; padding: 12px 20px;
}
.announce-bar .pill-cta {
  font-size: 13px; padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.1); transition: var(--transition);
}
.announce-bar .pill-cta:hover { background: rgba(255,255,255,.2); }

/* Header nav — floating dark pill */
.nav-pill {
  display: inline-flex; align-items: center; gap: clamp(12px, 2vw, 34px);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-pill); padding: 14px 34px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nav-pill a {
  font-size: 14px; letter-spacing: -.28px; color: var(--white);
  opacity: .85; transition: var(--transition);
}
.nav-pill a:hover { opacity: 1; }

/* Accordion / FAQ (plus rotates to ×) */
.accordion { border-top: 1px solid rgba(28,36,40,.12); }
.accordion details { border-bottom: 1px solid rgba(28,36,40,.12); }
.section.black .accordion,        .theme-dark .accordion         { border-color: rgba(255,255,255,.12); }
.section.black .accordion details,.theme-dark .accordion details { border-color: rgba(255,255,255,.12); }
.accordion summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: var(--text-body-lg); font-family: var(--font-medium);
  transition: var(--transition);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion .plus { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.accordion .plus::before, .accordion .plus::after {
  content: ''; position: absolute; background: currentColor; border-radius: var(--radius-round);
  transition: var(--transition);
}
.accordion .plus::before { left: 6px; top: 0; width: 2px; height: 14px; }
.accordion .plus::after  { top: 6px; left: 0; width: 14px; height: 2px; }
.accordion details[open] .plus::before { transform: rotate(90deg); }
.accordion details[open] .plus        { transform: rotate(45deg); }
.accordion .a-body { padding: 0 4px 22px; opacity: .75; max-width: 70ch; }

/* --------------------------------------------------------------------------
   9. UTILITIES
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 14px; font-family: var(--font-medium);
  letter-spacing: -.28px; opacity: .6; display: flex;
  align-items: center; gap: 8px; margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--slate); }
.stat-number {
  font-size: var(--text-display-xl); font-family: var(--font-regular);
  font-weight: 500; letter-spacing: -1.6px; line-height: 1;
}
.divider-shimmer { height: 1px; border: 0; background: var(--grad-border-shimmer); }
.theme-light .divider-shimmer, .section.white .divider-shimmer { background: var(--grad-border-shimmer-dark); }