/* ============================================================
   LULOG — Service page TEMPLATE
   Clean, white, editorial. Built on the brand tokens.
   Loaded AFTER styles.css + logistics.css + dynamic.css so it
   can flip the warm shell to pure white for this page only.
   Everything is scoped to body.svc-tpl.
   ============================================================ */

/* ---------- Home-matched shell: brown ground + rounded carne box ---------- */
/* These accent vars are normally only set inside .home; define them here too
   so the M4L badge, frame corners and brown ground render correctly on every
   service page, with or without the .home class. */
body.svc-tpl {
  --line: rgba(73, 38, 29, 0.12);
  --navy-950: #2a1610;
  --navy-900: #49261D;
  --navy-800: #5c3126;
  --navy-700: #6e4035;
  --pink: #FB4D00;
  --pink-bright: #FB4D00;
  --pink-soft: #FFD2BD;
  --cream: #ffffff;
  --cream-light: #FFEDE3;
  background: var(--brown-900);
}
body.svc-tpl .shell {
  background: var(--cream-light);
  margin: 11px;
  border-radius: 22px;
  overflow: clip;
  min-height: calc(100vh - 22px);
}
body.svc-tpl .nav { background: rgba(255, 255, 255, 0.92); }

/* Background tweak: pure white shell */
body.svc-tpl[data-bg="white"] .shell { background: #fff; }

/* Background tweak: warm carne paper (matches home) */
body.svc-tpl[data-bg="carne"] .shell { background: var(--cream-light); }
body.svc-tpl[data-bg="carne"] .nav  { background: rgba(255, 237, 227, 0.85); }

/* Background tweak: alternating bands give vertical rhythm */
body.svc-tpl[data-bg="bands"] .tpl-cat:nth-of-type(even) {
  background: var(--cream);
}
/* Context + closing sections sit on white in bands mode */
body.svc-tpl[data-bg="bands"] .tpl-overview,
body.svc-tpl[data-bg="bands"] .tpl-cta {
  background: #ffffff;
}

/* ============================================================
   HERO — full-bleed cover image with H1 + copy overlaid.
   The image starts flush beneath the sticky menu and spans the
   full width of the shell; text sits on a legibility scrim.
   ============================================================ */
.tpl-hero {
  position: relative;
  width: 100%;
  min-height: clamp(540px, 82vh, 880px);
  display: flex;
  overflow: clip;
  isolation: isolate;
  background: var(--brown-900);
}

/* the hero image fills the whole frame. Swap the <img src> per page. */
.tpl-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  display: block;
}

/* dark scrim so white type stays legible over any photo */
.tpl-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(40, 18, 12, 0.86) 0%, rgba(40, 18, 12, 0.46) 40%, rgba(40, 18, 12, 0.16) 70%, rgba(40, 18, 12, 0.34) 100%);
}

.tpl-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(28px, 3vw, 44px) clamp(40px, 5vw, 76px);
}

.tpl-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.tpl-hero__crumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s var(--ease);
}
.tpl-hero__crumb svg { width: 14px; height: 14px; }
.tpl-hero__crumb:hover { color: #fff; }
.tpl-hero .stamp { color: rgba(255, 255, 255, 0.8); }
.tpl-hero .stamp__dot { background: var(--orange); }

/* the overlaid headline block, pinned bottom-left */
.tpl-hero__content { max-width: 760px; }
.tpl-hero__title {
  color: #fff;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.9;
  margin: 0 0 clamp(20px, 2.2vw, 30px);
}
.tpl-hero__title .accent { color: var(--orange); }
.tpl-hero__say { padding-bottom: 2px; }
.tpl-hero__lede {
  color: rgba(255, 255, 255, 0.92);
  max-width: 50ch;
  margin: 0 0 clamp(22px, 2.4vw, 30px);
}
.tpl-hero .row { gap: 14px; flex-wrap: wrap; }

/* ghost button needs to read on a dark image */
.tpl-hero .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.tpl-hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* image-slot placeholder styling so the empty state reads as a hero */
.tpl-hero__media:not([data-filled]) {
  background: var(--brown-800);
}

@media (max-width: 720px) {
  .tpl-hero { min-height: clamp(480px, 78vh, 700px); }
}

/* ============================================================
   OVERVIEW — short context block
   ============================================================ */
.tpl-overview { padding-block: clamp(48px, 5vw, 88px); }
.tpl-overview__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: flex-start;
}
.tpl-overview h2 { color: var(--brown-900); }
.tpl-overview__body p {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--brown-700);
}
.tpl-overview__body p + p { margin-top: 16px; }
.tpl-overview__body em { font-family: var(--f-serif); font-style: italic; color: var(--orange); }

@media (max-width: 900px) {
  .tpl-overview__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   CATEGORY — heading + a grid of minimal service cards
   ============================================================ */
.tpl-cat { padding-block: clamp(52px, 6vw, 96px); }

.tpl-cat__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px 48px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.tpl-cat__heading {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 0.94;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brown-900);
  margin-top: 18px;
}
.tpl-cat__heading .serif-italic { text-transform: none; letter-spacing: -0.01em; }
.tpl-cat__note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.35;
  color: var(--brown-700);
  max-width: 26ch;
  text-align: right;
  align-self: end;
}
.tpl-cat__count {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-500);
}

@media (max-width: 720px) {
  .tpl-cat__head { grid-template-columns: 1fr; }
  .tpl-cat__note { text-align: left; max-width: 38ch; }
}

/* ---------- the card grid (columns are tweakable) ---------- */
.tpl-cards {
  --tpl-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--tpl-cols), minmax(0, 1fr));
  gap: 16px;
}
body.svc-tpl[data-cols="2"] .tpl-cards { --tpl-cols: 2; }
body.svc-tpl[data-cols="3"] .tpl-cards { --tpl-cols: 3; }
body.svc-tpl[data-cols="4"] .tpl-cards { --tpl-cols: 4; }

/* ---------- CARD: variant A — "box" (default) ---------- */
.tpl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.2vw, 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform 0.26s var(--ease-out), box-shadow 0.26s var(--ease-out), border-color 0.26s var(--ease-out);
}
.tpl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 52px -28px rgba(73, 38, 29, 0.32);
  border-color: var(--orange);
}

/* on-brand orange node mark (echoes the route-line / accordion dots) */
.tpl-card__mark {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  background: transparent;
  flex-shrink: 0;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tpl-card:hover .tpl-card__mark {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(251, 77, 0, 0.12);
}

.tpl-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(19px, 1.55vw, 25px);
  line-height: 1.04;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brown-900);
}
.tpl-card__desc {
  color: var(--brown-700);
  font-size: 14.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* push title+desc together, mark sits on its own line above */
.tpl-card__body { display: flex; flex-direction: column; gap: 9px; }

/* ---------- CARD: variant B — "grid" (connected hairline) ---------- */
body.svc-tpl[data-card="grid"] .tpl-cards {
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
body.svc-tpl[data-card="grid"] .tpl-card {
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
body.svc-tpl[data-card="grid"] .tpl-card:hover {
  transform: none;
  box-shadow: none;
  background: var(--cream-light);
  border-color: var(--line);
}
body.svc-tpl[data-card="grid"] .tpl-card:hover .tpl-card__mark {
  background: var(--orange);
  box-shadow: none;
}

/* ---------- CARD: variant C — "rule" (minimal, top hairline) ---------- */
body.svc-tpl[data-card="rule"] .tpl-cards {
  gap: 0 clamp(24px, 3vw, 48px);
  row-gap: 0;
}
body.svc-tpl[data-card="rule"] .tpl-card {
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  padding: clamp(22px, 2vw, 30px) 0;
  gap: 14px;
}
body.svc-tpl[data-card="rule"] .tpl-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--orange);
}
body.svc-tpl[data-card="rule"] .tpl-card:hover .tpl-card__title { color: var(--orange); }

/* ---------- CARD: variant D — "panel" (filled colour block) ---------- */
/* Brand azul at rest, brand brown on hover. Title + description sit beside
   an orange accent rule, echoing the Buzzworthy showcase tiles. */
body.svc-tpl { --panel-blue: var(--blue-soft); }

body.svc-tpl[data-card="panel"] .tpl-cards { gap: 14px; }
body.svc-tpl[data-card="panel"] .tpl-card {
  background: var(--panel-blue);
  border: 0;
  border-radius: 4px;
  padding: clamp(26px, 2.3vw, 36px);
  min-height: clamp(260px, 23vw, 340px);
  justify-content: center;
  gap: 0;
  transition: background 0.34s var(--ease), transform 0.26s var(--ease-out), box-shadow 0.26s var(--ease-out);
}
body.svc-tpl[data-card="panel"] .tpl-card:hover {
  transform: translateY(-5px);
  background: var(--brown-900);
  box-shadow: 0 28px 58px -28px rgba(40, 18, 12, 0.55);
  border-color: transparent;
}
/* swap the round node for a vertical accent rule beside the copy */
body.svc-tpl[data-card="panel"] .tpl-card__mark { display: none; }
body.svc-tpl[data-card="panel"] .tpl-card__body {
  border-left: 2px solid var(--orange);
  padding-left: clamp(16px, 1.4vw, 22px);
  gap: 14px;
}
/* dark copy on the light azul; flips to cream on the brown hover */
body.svc-tpl[data-card="panel"] .tpl-card__title {
  color: var(--brown-900);
  transition: color 0.45s var(--ease);
}
body.svc-tpl[data-card="panel"] .tpl-card__desc {
  color: var(--brown-700);
  transition: color 0.45s var(--ease);
}
body.svc-tpl[data-card="panel"] .tpl-card:hover .tpl-card__title { color: var(--cream); }
body.svc-tpl[data-card="panel"] .tpl-card:hover .tpl-card__desc { color: var(--brown-300); }

/* ---------- CARD: variant E — "reveal" (white box, brown rule, hover-reveal) ----------
   Title only at rest; on hover the tile lifts + scales a touch and the
   description unfurls. White surface, brown hairline that deepens on hover.
   Tiles sit tight together (small gap) so the hovered one reads as "growing". */
body.svc-tpl[data-card="reveal"] .tpl-cards { gap: 8px; }

body.svc-tpl[data-card="reveal"] .tpl-card {
  background: #fff;
  border: 1px solid var(--brown-300);
  border-radius: 6px;
  padding: clamp(24px, 2.2vw, 34px);
  min-height: clamp(220px, 19vw, 300px);
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  transform-origin: center;
  transition:
    transform 0.36s var(--ease-out),
    border-color 0.3s var(--ease),
    box-shadow 0.36s var(--ease-out);
}
body.svc-tpl[data-card="reveal"] .tpl-card:hover,
body.svc-tpl[data-card="reveal"] .tpl-card:focus-within {
  transform: scale(1.055);
  border-color: var(--brown-900);
  box-shadow: 0 30px 62px -30px rgba(40, 18, 12, 0.42);
  z-index: 2;
}

/* repurpose the node mark as a small "+" button, bottom-right (echoes ref) */
body.svc-tpl[data-card="reveal"] .tpl-card__mark {
  display: block;
  position: absolute;
  right: clamp(18px, 1.5vw, 24px);
  bottom: clamp(18px, 1.5vw, 24px);
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--orange);
  background: var(--orange);
  box-shadow: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
body.svc-tpl[data-card="reveal"] .tpl-card__mark::before,
body.svc-tpl[data-card="reveal"] .tpl-card__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.34s var(--ease-out), opacity 0.34s var(--ease);
}
body.svc-tpl[data-card="reveal"] .tpl-card__mark::before {
  width: 13px;
  height: 1.6px;
  transform: translate(-50%, -50%);
}
body.svc-tpl[data-card="reveal"] .tpl-card__mark::after {
  width: 1.6px;
  height: 13px;
  transform: translate(-50%, -50%);
}
body.svc-tpl[data-card="reveal"] .tpl-card:hover .tpl-card__mark {
  border-color: var(--orange-bright);
  background: var(--orange-bright);
}
/* + rotates into a − on hover */
body.svc-tpl[data-card="reveal"] .tpl-card:hover .tpl-card__mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* title is the only thing shown at rest — larger so the tile reads full */
body.svc-tpl[data-card="reveal"] .tpl-card__title {
  color: var(--brown-900);
  font-size: clamp(24px, 2.05vw, 32px);
  line-height: 1.02;
}

body.svc-tpl[data-card="reveal"] .tpl-card__body {
  display: block;
  gap: 0;
  padding-right: 44px; /* clear the + button */
}
/* description unfurls on hover */
body.svc-tpl[data-card="reveal"] .tpl-card__desc {
  overflow: hidden;
  color: var(--brown-700);
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  transform: translateY(4px);
  transition:
    max-height 0.46s var(--ease-out),
    opacity 0.34s var(--ease),
    padding-top 0.46s var(--ease-out),
    transform 0.4s var(--ease-out);
}
body.svc-tpl[data-card="reveal"] .tpl-card:hover .tpl-card__desc,
body.svc-tpl[data-card="reveal"] .tpl-card:focus-within .tpl-card__desc {
  opacity: 1;
  max-height: 220px;
  padding-top: 14px;
  transform: none;
}

/* ---------- CARD: variant F — "feature" (reference style: cream, large radius, icon) ---------- */
body.svc-tpl[data-card="feature"] .tpl-cards {
  gap: 16px;
}
body.svc-tpl[data-card="feature"] .tpl-card {
  background: #f5f2ee;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(28px, 2.8vw, 40px);
  gap: 20px;
  box-shadow: none;
}
body.svc-tpl[data-card="feature"] .tpl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(42,19,13,0.10);
  border-color: var(--line-strong);
}
body.svc-tpl[data-card="feature"] .tpl-card__mark {
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  flex-shrink: 0;
}
body.svc-tpl[data-card="feature"] .tpl-card__mark svg {
  width: 28px;
  height: 28px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.svc-tpl[data-card="feature"] .tpl-card:hover .tpl-card__mark { background: none; box-shadow: none; }
body.svc-tpl[data-card="feature"] .tpl-card__title {
  font-family: var(--f-sans);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--brown-900);
}
body.svc-tpl[data-card="feature"] .tpl-card__body { gap: 10px; }
body.svc-tpl[data-card="feature"] .tpl-card__desc {
  font-size: 14.5px;
  color: var(--brown-700);
  line-height: 1.6;
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.tpl-cta { padding-block: clamp(12px, 1.4vw, 20px) clamp(40px, 5vw, 80px); }
.tpl-cta__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: end;
  padding: clamp(40px, 6vw, 80px);
  background: var(--cream-light);
  border-radius: 6px;
}
body.svc-tpl[data-bg="carne"] .tpl-cta__inner { background: #fff; border: 1px solid var(--line); }
.tpl-cta h2 { color: var(--brown-900); margin: 22px 0 18px; }
.tpl-cta .lede { color: var(--brown-700); }
.tpl-cta__btn { justify-self: end; }

.tpl-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-700);
}
.tpl-nav a { transition: color 0.2s var(--ease); }
.tpl-nav a:hover { color: var(--orange); }
.tpl-nav__next { color: var(--brown-900); }

@media (max-width: 820px) {
  .tpl-cta__inner { grid-template-columns: 1fr; gap: 28px; }
  .tpl-cta__btn { justify-self: flex-start; }
}

/* ============================================================
   RESPONSIVE — Tablet & Mobile
   ============================================================ */

/* Tablet (≤ 768px): 2-column card grid */
@media (max-width: 768px) {
  body.svc-tpl[data-cols] .tpl-cards { --tpl-cols: 2; gap: 12px; }
  .tpl-hero__title { font-size: clamp(36px, 9vw, 60px); }
  .tpl-overview { padding-block: clamp(36px, 4vw, 60px); }
}

/* Mobile (≤ 480px): single-column, tighter padding */
@media (max-width: 480px) {
  body.svc-tpl[data-cols] .tpl-cards { --tpl-cols: 1; }
  .tpl-card { padding: 20px; }
  .tpl-cat { padding-block: 36px 44px; }
  .tpl-cat__heading { font-size: clamp(26px, 8vw, 36px); }
  .tpl-cat__note { font-size: 16px; max-width: 100%; }
  .tpl-hero__title { font-size: clamp(30px, 10vw, 48px); }
  .tpl-hero__lede { font-size: 15px; }
  .tpl-cta__inner { padding: 28px 20px; }
  .tpl-nav { flex-direction: column; gap: 10px; }
  .tpl-nav__next { text-align: right; }
}

/* Disable hover lifts on touch so tapped cards don't stay stuck */
@media (hover: none) {
  .tpl-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--line) !important;
  }
}

/* ============================================================
   Tweaks mount (React island) — never blocks layout
   ============================================================ */
#tpl-tweaks { position: fixed; inset: 0; pointer-events: none; z-index: 2147483646; }
#tpl-tweaks > * { pointer-events: auto; }