/* =====================================================================
   Daytime Design Co. — Services page
   Reuses home.css for: .packs / .pack cards, .srow accordion + .spanel
   visuals (The Full Practice), waves, CTA, photostrip, footer.
   New here: interior nav variant, cover-style hero, 4-up package grid,
   the Model section, pink proof band, à la carte cloud.
   ===================================================================== */

/* ---------- Nav — static, on-light variant for interior pages ---------- */
.nav--light {
  position: static;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-hair);
}
.nav--light .logo__word { color: var(--c-ink); }
.nav--light .nav__links a { color: var(--c-ink); opacity: 0.68; }
.nav--light .nav__links a:hover,
.nav--light .nav__links a.is-active { opacity: 1; }
@media (max-width: 820px) {
  .nav--light .nav__links a { color: var(--c-cream); opacity: 0.92; }
}

/* ---------- HERO (olive field + pinstripe — cover-style, no scrim) ---------- */
.servhero {
  position: relative; overflow: hidden;
  background-color: var(--c-olive);
  background-image: repeating-linear-gradient(to right, transparent 0 45px, rgba(10,83,66,0.45) 45px 46px);
  padding: 176px 0 90px;
}
.servhero__inner { position: relative; z-index: 1; }
.servhero__eyebrow { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--c-acid); margin-bottom: 28px; }
.servhero__title { font-size: clamp(44px, 5.8vw, 84px); line-height: 1; letter-spacing: -2px; color: var(--c-cream); margin: 0 0 22px; max-width: 9.5em; }
.servhero__title .it { color: var(--c-pink); }
.servhero__sub { font-family: var(--font-serif); font-size: clamp(18px, 1.7vw, 24px); color: var(--c-cream); opacity: 0.92; margin: 0 0 56px; max-width: 640px; }
.servhero__meta { display: flex; gap: 10px 34px; flex-wrap: wrap; line-height: 1.3; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-cream); opacity: 0.85; }

/* spinning badge — hero, right side (overlaps the band below) */
.servhero { overflow: visible; }
.servhero__badge {
  position: absolute; z-index: 5;
  width: clamp(110px, 12vw, 168px); height: clamp(110px, 12vw, 168px);
  right: clamp(24px, 7vw, 120px); top: 50%; transform: translateY(-50%);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.18));
}
@media (max-width: 820px) {
  .servhero__badge { top: auto; bottom: -44px; transform: none; right: 20px; }
}

/* ---------- thin word marquee (under the hero) ---------- */
.thinmarquee { padding: 14px 0; }
@media (max-width: 820px) {
  .thinmarquee { padding: 14px 0; }
  .services#packages { padding-top: 76px; }
  .packs__grid { row-gap: 44px; }
}

/* ---------- CUSTOM — the fourth door (full-width band under the cards) ---------- */
.custom {
  margin-top: 64px; border-radius: var(--radius-lg);
  background: var(--c-green); color: var(--c-cream);
  padding: 64px 56px; position: relative; overflow: hidden;
}
.custom::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right, transparent 0 45px, rgba(4,45,34,0.5) 45px 46px);
}
.custom__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.custom__eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-acid); margin-bottom: 18px; }
.custom__title { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -1.2px; color: var(--c-cream); margin: 0 0 18px; }
.custom__title .it { color: var(--c-pink); }
.custom__desc { font-size: 16.5px; line-height: 1.65; color: var(--c-cream); opacity: 0.92; max-width: 460px; margin: 0 0 30px; }
.btn--outline { background: transparent; border: 1.5px solid var(--c-acid); color: var(--c-acid); }
.btn--outline:hover { background: var(--c-acid); color: var(--c-ink); }
.custom__label { display: block; font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--c-pink); margin-bottom: 20px; }
.custom__list { margin: 0; padding: 0; list-style: none; }
.custom__list li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid rgba(249,245,235,0.18);
  font-size: 15.5px; line-height: 1.5; color: var(--c-cream);
}
.custom__list li:last-child { border-bottom: 1px solid rgba(249,245,235,0.18); }
.custom__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--c-acid); flex: 0 0 auto; }
@media (max-width: 980px) {
  .custom { padding: 48px 30px; }
  .custom__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- THE MODEL (blue, animated line icons) ---------- */
.model { background: var(--c-blue); padding: 110px 0; }
.model .model__col p { color: var(--c-ink-2, #424242); }
.modicon { display: block; width: 60px; height: 60px; margin-bottom: 22px; }
.modicon svg { width: 100%; height: 100%; overflow: visible; }
.modicon .mi-draw { stroke-dashoffset: 0; }
.modicon .mi-pop, .modicon .mi-fill { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .model__col .mi-draw { stroke-dasharray: 160; stroke-dashoffset: 160; }
  .model__col .mi-pop { opacity: 0; transform: scale(0.4); }
  .model__col .mi-fill { opacity: 0; }
  .model__col.is-in .mi-draw { animation: miDraw 1.1s ease forwards; }
  .model__col.is-in .mi-fill { animation: miFade 0.5s ease 0.7s forwards; }
  .model__col.is-in .mi-pop { animation: miPop 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.95s forwards; }
  .model__col:hover .modicon svg { animation: miWiggle 0.5s ease; }
}
.model__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 14px; }
.model__num { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; color: var(--c-red); margin-bottom: 16px; }
.model__name { font-family: var(--font-sans); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; color: var(--c-ink); margin: 0 0 12px; }
.model__col p { font-size: 15.5px; line-height: 1.65; color: #424242; margin: 0; }
@media (max-width: 820px) {
  .model { padding: 70px 0; }
  .model__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- FEATURED WORK BAND (purple — marquee + rotating screens) ---------- */
.featured-band--services .teaser { padding-top: 70px; }
.mock-browser__body, .mock-phone__screen { position: relative; overflow: hidden; }
.rotimg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 0.8s ease;
}
.rotimg.is-on { opacity: 1; }

/* ---------- À LA CARTE (white, pill cloud) ---------- */
.alacarte { background: var(--c-paper); padding: 110px 0 120px; }
.alacarte__sub { color: #333; max-width: 760px; margin: 18px auto 0; }
.alacarte__cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 860px; margin: 10px auto 0; }
.alacarte__cloud span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c-ink); border: 1px solid var(--c-ink); border-radius: 4px;
  padding: 6px 12px; transition: background .18s ease, color .18s ease, transform .18s ease;
}
.alacarte__cloud span:hover { background: var(--c-acid); border-color: var(--c-acid); transform: rotate(-2deg); }
.alacarte__note { text-align: center; margin-top: 34px; font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--c-ink-3); }
@media (max-width: 820px) {
  .alacarte { padding: 70px 0 80px; }
  .alacarte__cloud { gap: 8px; }
  .alacarte__cloud span { font-size: 10px; letter-spacing: 1px; padding: 8px 13px; }
}