/* =====================================================================
   PACKELY SERVICE PAGES  —  packely-service.css
   Genanvendeligt service-side-layout. Bygger kun på Prompt 2's tokens.
   Ingen nye farver/fonts/radier/shadows/knapper. Breakpoints 1024/767.
   ===================================================================== */

.pk-sv{ color:var(--pk-color-text); }
.pk-sv-wrap{ width:100%; max-width:var(--pk-container-wide); margin-inline:auto; padding-inline:var(--pk-gutter); }
.pk-sv-section{ padding-block:var(--pk-section-y); }
.pk-sv-section--sm{ padding-block:var(--pk-section-y-sm); }
.pk-sv-section--subtle{ background:var(--pk-color-bg-subtle); }
.pk-sv-section--alt{ background:var(--pk-color-surface-alt); }
.pk-sv-section--dark{ background:var(--pk-color-bg-dark); color:var(--pk-color-on-dark); }
.pk-eyebrow{ font-size:var(--pk-fs-label); letter-spacing:var(--pk-ls-label); text-transform:uppercase; color:var(--pk-color-brand-primary); font-weight:var(--pk-fw-semibold); margin:0; }
.pk-sv-title{ font-family:var(--pk-font-heading); font-size:var(--pk-fs-h2); line-height:var(--pk-lh-heading); letter-spacing:var(--pk-ls-heading); font-weight:var(--pk-fw-bold); margin:var(--pk-space-xs) 0 var(--pk-space-sm); }
.pk-sv-intro{ color:var(--pk-color-text-secondary); font-size:var(--pk-fs-body-lg); line-height:var(--pk-lh-body); margin:0; max-width:66ch; }
.pk-sv-head{ max-width:70ch; }
.pk-sv-section--dark .pk-sv-title{ color:var(--pk-color-on-dark); }
.pk-sv-section--dark .pk-sv-intro{ color:var(--pk-color-on-dark-secondary); }
.pk-h-link{ display:inline-flex; align-items:center; gap:6px; font-weight:var(--pk-fw-semibold); color:var(--pk-color-brand-primary); text-decoration:none; font-size:var(--pk-fs-body-sm); }
.pk-h-link:hover{ color:var(--pk-color-brand-primary-hover); }

/* ---------- Hero ---------- */
.pk-sv-hero__grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--pk-space-3xl); align-items:center; }
.pk-sv-hero__h1{ font-family:var(--pk-font-heading); font-size:var(--pk-fs-display); line-height:var(--pk-lh-tight); letter-spacing:var(--pk-ls-tight); font-weight:var(--pk-fw-bold); margin:var(--pk-space-sm) 0; }
.pk-sv-hero__lead{ font-size:var(--pk-fs-body-lg); color:var(--pk-color-text-secondary); line-height:var(--pk-lh-body); max-width:54ch; margin:0; }
.pk-sv-hero__cta{ display:flex; flex-wrap:wrap; gap:var(--pk-space-sm); margin-top:var(--pk-space-lg); align-items:center; }
.pk-sv-hero__link{ margin-top:var(--pk-space-md); }

/* ---------- Visual placeholders (CSS only) ---------- */
.pk-visual{ display:grid; gap:var(--pk-space-sm); }
.pk-hero-visual{ grid-template-columns:1fr 1fr; }
.pk-tile{ position:relative; border-radius:var(--pk-radius-lg); background:linear-gradient(135deg,var(--pk-color-bg-subtle),var(--pk-color-surface-alt)); border:1px solid var(--pk-color-border); aspect-ratio:4/3; display:flex; align-items:flex-end; padding:var(--pk-space-sm); overflow:hidden; }
.pk-tile__ico{ position:absolute; top:var(--pk-space-sm); left:var(--pk-space-sm); width:26px; height:26px; color:var(--pk-color-brand-primary); opacity:.5; }
.pk-tile__lbl{ font-size:var(--pk-fs-caption); color:var(--pk-color-text-secondary); background:var(--pk-color-surface); padding:3px 10px; border-radius:var(--pk-radius-pill); border:1px solid var(--pk-color-border); }
.pk-tile--tall{ aspect-ratio:3/4; }
.pk-tile--wide{ aspect-ratio:16/10; }

/* ---------- Trust strip ---------- */
.pk-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pk-space-xl); text-align:center; }
.pk-metric b{ display:block; font-family:var(--pk-font-heading); font-size:var(--pk-fs-h1); color:var(--pk-color-brand-primary); line-height:1; }
.pk-metric span{ display:block; margin-top:var(--pk-space-xs); color:var(--pk-color-text-secondary); font-size:var(--pk-fs-body-sm); }

/* ---------- Showcase (asymmetrisk grid) ---------- */
.pk-showcase-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:1fr; gap:var(--pk-space-md); margin-top:var(--pk-space-lg); }
.pk-showcase-grid .pk-tile{ aspect-ratio:auto; min-height:180px; }
.pk-showcase-grid .pk-sh-lg{ grid-row:span 2; }
.pk-sh-note{ font-size:var(--pk-fs-caption); color:var(--pk-color-text-muted); margin-top:var(--pk-space-md); }

/* ---------- What we deliver ---------- */
.pk-deliver{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pk-space-lg); margin-top:var(--pk-space-xl); }
.pk-feature{ padding:var(--pk-space-lg); background:var(--pk-color-surface); border:1px solid var(--pk-color-border); border-radius:var(--pk-radius-lg); }
.pk-chip{ width:42px; height:42px; border-radius:var(--pk-radius-md); background:var(--pk-color-bg-subtle); display:flex; align-items:center; justify-content:center; color:var(--pk-color-brand-primary); margin-bottom:var(--pk-space-sm); }
.pk-chip svg{ width:22px; height:22px; }
.pk-feature h3{ font-family:var(--pk-font-heading); font-size:var(--pk-fs-h4); margin:0 0 var(--pk-space-3xs); }
.pk-feature p{ font-size:var(--pk-fs-body-sm); color:var(--pk-color-text-secondary); margin:0; line-height:var(--pk-lh-body); }
.pk-deliver__foot{ margin-top:var(--pk-space-lg); color:var(--pk-color-text-secondary); font-size:var(--pk-fs-body); }

/* ---------- Use cases ---------- */
.pk-uses{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pk-space-md); margin-top:var(--pk-space-lg); }
.pk-use{ display:flex; align-items:center; gap:var(--pk-space-sm); padding:var(--pk-space-md) var(--pk-space-lg); background:var(--pk-color-surface); border:1px solid var(--pk-color-border); border-radius:var(--pk-radius-md); font-weight:var(--pk-fw-medium); }
.pk-use svg{ width:20px; height:20px; color:var(--pk-color-brand-primary); flex:0 0 auto; }

/* ---------- Why it matters ---------- */
.pk-reasons{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--pk-space-lg); margin-top:var(--pk-space-xl); }
.pk-reason h3{ font-family:var(--pk-font-heading); font-size:var(--pk-fs-h4); margin:var(--pk-space-xs) 0 var(--pk-space-3xs); }
.pk-reason p{ font-size:var(--pk-fs-body-sm); color:var(--pk-color-text-secondary); margin:0; line-height:var(--pk-lh-body); }

/* ---------- Process ---------- */
.pk-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--pk-space-lg); margin-top:var(--pk-space-xl); }
.pk-step__n{ font-family:var(--pk-font-heading); font-size:var(--pk-fs-h2); color:var(--pk-color-brand-primary); line-height:1; }
.pk-step h3{ font-family:var(--pk-font-heading); font-size:var(--pk-fs-h4); margin:var(--pk-space-xs) 0 var(--pk-space-3xs); }
.pk-step p{ font-size:var(--pk-fs-body-sm); color:var(--pk-color-text-secondary); margin:0; line-height:var(--pk-lh-body); }

/* ---------- Quality / scale highlight ---------- */
.pk-scale{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--pk-space-3xl); align-items:center; }
.pk-scale__stat b{ display:block; font-family:var(--pk-font-heading); font-size:var(--pk-fs-display); color:var(--pk-color-on-dark); line-height:1; }
.pk-scale__stat span{ display:block; margin-top:var(--pk-space-xs); color:var(--pk-color-on-dark-secondary); font-size:var(--pk-fs-body); }
.pk-scale__body p{ margin:0 0 var(--pk-space-sm); }
.pk-scale__list{ list-style:none; margin:var(--pk-space-md) 0 0; padding:0; display:grid; gap:var(--pk-space-xs); }
.pk-scale__list li{ display:flex; align-items:center; gap:var(--pk-space-sm); color:var(--pk-color-on-dark); }
.pk-scale__list svg{ width:20px; height:20px; color:var(--pk-color-brand-secondary); flex:0 0 auto; }

/* ---------- Related services ---------- */
.pk-related{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--pk-space-md); margin-top:var(--pk-space-lg); }
.pk-rcard{ display:flex; flex-direction:column; padding:var(--pk-space-lg); background:var(--pk-color-surface); border:1px solid var(--pk-color-border); border-radius:var(--pk-radius-lg); transition:box-shadow var(--pk-dur) var(--pk-ease),transform var(--pk-dur) var(--pk-ease),border-color var(--pk-dur) var(--pk-ease); }
.pk-rcard:hover{ box-shadow:var(--pk-shadow-md); transform:translateY(-2px); border-color:var(--pk-color-border-strong); }
.pk-rcard h3{ font-family:var(--pk-font-heading); font-size:var(--pk-fs-h4); margin:0 0 var(--pk-space-3xs); }
.pk-rcard p{ font-size:var(--pk-fs-body-sm); color:var(--pk-color-text-secondary); margin:0 0 var(--pk-space-sm); flex:1 1 auto; line-height:var(--pk-lh-body); }
.pk-rcard .pk-h-link{ margin-top:auto; }

/* ---------- FAQ (native <details>) ---------- */
.pk-faq{ max-width:var(--pk-container-text); margin:var(--pk-space-lg) auto 0; }
.pk-faq__item{ border-bottom:1px solid var(--pk-color-border); }
.pk-faq__item summary{ list-style:none; cursor:pointer; padding:var(--pk-space-md) 0; font-weight:var(--pk-fw-semibold); color:var(--pk-color-text); display:flex; justify-content:space-between; align-items:center; gap:var(--pk-space-sm); }
.pk-faq__item summary::-webkit-details-marker{ display:none; }
.pk-faq__item summary::after{ content:''; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform var(--pk-dur) var(--pk-ease); flex:0 0 auto; color:var(--pk-color-text-muted); }
.pk-faq__item[open] summary::after{ transform:rotate(-135deg); }
.pk-faq__a{ padding:0 0 var(--pk-space-md); color:var(--pk-color-text-secondary); font-size:var(--pk-fs-body-sm); max-width:70ch; line-height:var(--pk-lh-body); }
.pk-faq__a a{ color:var(--pk-color-brand-primary); }

/* ---------- Final CTA ---------- */
.pk-final{ text-align:center; }
.pk-final__cta{ display:flex; gap:var(--pk-space-sm); justify-content:center; flex-wrap:wrap; margin-top:var(--pk-space-lg); }
.pk-final .pk-btn--secondary{ background:transparent; color:var(--pk-color-on-dark); border-color:rgba(255,255,255,.42); }
.pk-final .pk-btn--secondary:hover{ background:rgba(255,255,255,.10); border-color:#FFFFFF; color:#FFFFFF; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .pk-sv-hero__grid,.pk-scale{ grid-template-columns:1fr; }
  .pk-deliver,.pk-uses{ grid-template-columns:repeat(2,1fr); }
  .pk-reasons,.pk-steps,.pk-related{ grid-template-columns:repeat(2,1fr); }
  .pk-showcase-grid{ grid-template-columns:1fr 1fr; }
  .pk-showcase-grid .pk-sh-lg{ grid-row:auto; grid-column:1 / -1; }
}
@media (max-width:767px){
  .pk-sv-hero__h1{ font-size:var(--pk-fs-h1); }
  .pk-deliver,.pk-uses,.pk-reasons,.pk-steps,.pk-related,.pk-metrics,.pk-hero-visual{ grid-template-columns:1fr; }
  .pk-showcase-grid{ grid-template-columns:1fr; }
  .pk-sv-hero__cta .pk-btn,.pk-final__cta .pk-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .pk-rcard,.pk-faq__item summary::after{ transition:none; }
}

/* ---------- Breadcrumbs (undersider) ---------- */
.pk-breadcrumb{ padding-top:var(--pk-space-lg); }
.pk-breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:var(--pk-space-2xs); margin:0; padding:0; font-size:var(--pk-fs-body-sm); }
.pk-breadcrumb li{ display:flex; align-items:center; gap:var(--pk-space-2xs); }
.pk-breadcrumb a{ color:var(--pk-color-text-secondary); text-decoration:none; }
.pk-breadcrumb a:hover{ color:var(--pk-color-brand-primary); }
.pk-breadcrumb [aria-current='page']{ color:var(--pk-color-text); font-weight:var(--pk-fw-medium); }
.pk-breadcrumb__sep{ color:var(--pk-color-border-strong); }

/* ---------- 360 demo / image-sequence viewer ---------- */
.pk-demo{ margin-top:var(--pk-space-lg); }
.pk-360{ position:relative; border-radius:var(--pk-radius-xl); border:1px solid var(--pk-color-border); background:linear-gradient(160deg,var(--pk-color-bg-subtle),var(--pk-color-surface-alt)); overflow:hidden; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; text-align:center; }
.pk-360__fallback{ padding:var(--pk-space-2xl) var(--pk-space-xl); max-width:56ch; }
.pk-360__badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--pk-radius-pill); background:var(--pk-color-surface); border:1px solid var(--pk-color-border); color:var(--pk-color-brand-primary); font-size:var(--pk-fs-caption); font-weight:var(--pk-fw-semibold); }
.pk-360__badge svg{ width:16px; height:16px; }
.pk-360__ring{ width:64px; height:64px; margin:var(--pk-space-lg) auto var(--pk-space-md); color:var(--pk-color-brand-primary); opacity:.7; }
.pk-360__ring svg{ width:100%; height:100%; }
.pk-360__txt{ margin:0; color:var(--pk-color-text-secondary); font-size:var(--pk-fs-body-sm); line-height:var(--pk-lh-body); }
.pk-360__hint{ display:none; position:absolute; bottom:var(--pk-space-md); left:50%; transform:translateX(-50%); align-items:center; gap:6px; font-size:var(--pk-fs-caption); color:var(--pk-color-text-secondary); background:var(--pk-color-surface); border:1px solid var(--pk-color-border); padding:5px 14px; border-radius:var(--pk-radius-pill); box-shadow:var(--pk-shadow-sm); }
.pk-360__stage{ display:none; width:100%; height:100%; }
.pk-360.is-active{ cursor:grab; aspect-ratio:1/1; background:var(--pk-color-surface); }
.pk-360.is-active.is-drag{ cursor:grabbing; }
.pk-360.is-active .pk-360__stage{ display:block; }
.pk-360.is-active .pk-360__fallback{ display:none; }
.pk-360.is-active .pk-360__hint{ display:inline-flex; }
.pk-360__stage img{ width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.pk-360:focus-visible{ outline:3px solid var(--pk-color-focus); outline-offset:3px; }
@media (max-width:767px){ .pk-360{ aspect-ratio:4/3; } .pk-360.is-active{ aspect-ratio:1/1; } }

/* ---------- 3D workflow strip ---------- */
.pk-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:var(--pk-space-sm); margin-top:var(--pk-space-lg); }
.pk-flow__step{ text-align:center; }
.pk-flow__cap{ margin-top:var(--pk-space-2xs); font-size:var(--pk-fs-body-sm); font-weight:var(--pk-fw-medium); color:var(--pk-color-text-secondary); }
.pk-flow__arrow{ color:var(--pk-color-border-strong); display:flex; align-items:center; justify-content:center; }
.pk-flow__arrow svg{ width:24px; height:24px; }
/* ---------- Photo vs 3D compare ---------- */
.pk-compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--pk-space-lg); margin-top:var(--pk-space-lg); }
.pk-compare__col{ background:var(--pk-color-surface); border:1px solid var(--pk-color-border); border-radius:var(--pk-radius-lg); padding:var(--pk-space-xl); }
.pk-compare__col h3{ font-family:var(--pk-font-heading); font-size:var(--pk-fs-h4); margin:0 0 var(--pk-space-md); display:flex; align-items:center; gap:8px; }
.pk-compare__col h3 svg{ width:22px; height:22px; color:var(--pk-color-brand-primary); flex:0 0 auto; }
.pk-compare__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--pk-space-sm); }
.pk-compare__col li{ display:flex; gap:var(--pk-space-sm); align-items:flex-start; font-size:var(--pk-fs-body-sm); color:var(--pk-color-text-secondary); line-height:var(--pk-lh-body); }
.pk-compare__col li svg{ width:18px; height:18px; color:var(--pk-color-brand-primary); flex:0 0 auto; margin-top:3px; }
.pk-compare__foot{ text-align:center; margin-top:var(--pk-space-xl); }
.pk-compare__foot p{ color:var(--pk-color-text-secondary); margin:0 0 var(--pk-space-sm); }
@media (max-width:1024px){ .pk-compare{ grid-template-columns:1fr; } .pk-flow{ grid-template-columns:1fr; } .pk-flow__arrow{ transform:rotate(90deg); margin:2px 0; } }

/* ---------- Video / animation showcase (native click-to-play) ---------- */
.pk-videos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pk-space-md); margin-top:var(--pk-space-lg); }
.pk-video{ position:relative; border-radius:var(--pk-radius-lg); border:1px solid var(--pk-color-border); background:linear-gradient(135deg,var(--pk-color-bg-subtle),var(--pk-color-surface-alt)); overflow:hidden; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; text-align:center; }
.pk-video__poster{ padding:var(--pk-space-lg); }
.pk-video__ico{ width:44px; height:44px; color:var(--pk-color-brand-primary); opacity:.55; margin:0 auto var(--pk-space-xs); }
.pk-video__ico svg{ width:100%; height:100%; }
.pk-video__title{ font-size:var(--pk-fs-body-sm); font-weight:var(--pk-fw-medium); color:var(--pk-color-text-secondary); }
.pk-video__play{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; padding:0; }
.pk-video.is-ready .pk-video__play{ display:flex; }
.pk-video__play b{ width:60px; height:60px; border-radius:var(--pk-radius-pill); background:var(--pk-color-brand-primary); color:var(--pk-color-on-brand); display:flex; align-items:center; justify-content:center; box-shadow:var(--pk-shadow-lg); }
.pk-video__play b svg{ width:26px; height:26px; }
.pk-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.pk-video:focus-within{ outline:3px solid var(--pk-color-focus); outline-offset:2px; }
@media (max-width:1024px){ .pk-videos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){ .pk-videos{ grid-template-columns:1fr; } }

/* ---------- Value strip ---------- */
.pk-vstrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--pk-space-lg); }
.pk-vstrip__item{ display:flex; gap:var(--pk-space-sm); align-items:flex-start; }
.pk-vstrip__item .pk-chip{ margin:0; flex:0 0 auto; }
.pk-vstrip__item b{ display:block; font-family:var(--pk-font-heading); font-size:var(--pk-fs-body); color:var(--pk-color-text); }
.pk-vstrip__item span{ font-size:var(--pk-fs-body-sm); color:var(--pk-color-text-secondary); line-height:var(--pk-lh-body); }
/* ---------- Website preview frames ---------- */
.pk-webshow{ display:grid; grid-template-columns:2fr 1fr; gap:var(--pk-space-lg); margin-top:var(--pk-space-lg); align-items:start; }
.pk-browser{ border:1px solid var(--pk-color-border); border-radius:var(--pk-radius-lg); overflow:hidden; background:var(--pk-color-surface); box-shadow:var(--pk-shadow-sm); }
.pk-browser__bar{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--pk-color-border); background:var(--pk-color-bg-subtle); }
.pk-browser__bar i{ width:10px; height:10px; border-radius:50%; background:var(--pk-color-border-strong); display:block; }
.pk-browser__body{ aspect-ratio:16/10; background:linear-gradient(160deg,var(--pk-color-bg-subtle),var(--pk-color-surface-alt)); display:flex; align-items:center; justify-content:center; }
.pk-browser--mobile .pk-browser__body{ aspect-ratio:9/16; }
.pk-browser__lbl{ font-size:var(--pk-fs-caption); color:var(--pk-color-text-secondary); background:var(--pk-color-surface); border:1px solid var(--pk-color-border); border-radius:var(--pk-radius-pill); padding:3px 10px; }
/* ---------- Pricing teaser box ---------- */
.pk-pricebox{ background:var(--pk-color-surface); border:1px solid var(--pk-color-border); border-radius:var(--pk-radius-xl); padding:var(--pk-space-2xl); text-align:center; box-shadow:var(--pk-shadow-sm); max-width:var(--pk-container-text); margin:var(--pk-space-lg) auto 0; }
.pk-pricebox__price{ font-family:var(--pk-font-heading); font-size:var(--pk-fs-display); color:var(--pk-color-text); line-height:1; }
.pk-pricebox__caveat{ font-size:var(--pk-fs-caption); color:var(--pk-color-text-muted); margin-top:var(--pk-space-2xs); }
.pk-pricebox__tags{ display:flex; flex-wrap:wrap; gap:var(--pk-space-2xs); justify-content:center; margin:var(--pk-space-lg) 0; }
.pk-sv-tag{ font-size:var(--pk-fs-caption); background:var(--pk-color-bg-subtle); border:1px solid var(--pk-color-border); color:var(--pk-color-text-secondary); padding:5px 12px; border-radius:var(--pk-radius-pill); }
@media (max-width:1024px){ .pk-vstrip{ grid-template-columns:repeat(2,1fr); } .pk-webshow{ grid-template-columns:1fr; } }
@media (max-width:767px){ .pk-vstrip{ grid-template-columns:1fr; } }