/* ==========================================
   TJENESTER – FINAL (rydder opp i duplikater)
   Hero + services + kort + "Les mer"-panel + CTA
   ========================================== */

:root{
  --teal-1: #2c7772;
  --teal-2: #1f5f5b;
  --teal-3: #2f7f7a;
  --glass-1: rgba(255,255,255,0.86);
  --glass-2: rgba(255,255,255,0.72);
  --shadow-card: 0 18px 40px rgba(0,0,0,0.08);
  --shadow-soft: 0 14px 34px rgba(0,0,0,0.10);

  /* ikon-størrelse (styrer alle 4) */
  --icon-size: 92px;      /* desktop */
  --icon-zoom: 1.12;      /* fyller ringen uten å bli små */
}

/* ==========================================
   HERO
   ========================================== */
.hero-match{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin: 2rem 0 1.75rem;
  color: #fff;
  background: linear-gradient(135deg, var(--teal-1), var(--teal-2));
  box-shadow: var(--shadow-soft);
}

.hero-match::before{
  content:"";
  position:absolute;
  inset:-45% -25% -45% -25%;
  background:
    radial-gradient(760px 320px at 18% 25%, rgba(255,255,255,0.16), transparent 60%),
    radial-gradient(900px 360px at 82% 40%, rgba(255,255,255,0.10), transparent 62%),
    radial-gradient(1100px 520px at 60% 95%, rgba(255,255,255,0.10), transparent 64%),
    linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  transform: rotate(-6deg);
  pointer-events:none;
  opacity: 0.95;
}

.hero-match::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-52%;
  height: 95%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%);
  transform: rotate(2deg);
  pointer-events:none;
  opacity: 0.9;
}

.hero-match__inner{
  position: relative;
  padding: 3.7rem 1rem;
  text-align: center;
}

.hero-match h1{
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.1rem);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.hero-match p{
  margin: .9rem 0 0;
  opacity: 0.95;
}

/* ==========================================
   SERVICES – bakgrunn med wave (avrundet)
   ========================================== */
.services-match{
  position: relative;
  padding: 1.2rem 1.5rem 1.4rem;
  margin-bottom: 1.6rem;
  border-radius: 18px;
  overflow: hidden;
}

@media (max-width: 768px){
  .services-match{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.services-match::before{
  content:"";
  position:absolute;
  inset: -0.5rem -2rem -1.2rem -2rem;
  background:
    radial-gradient(900px 360px at 18% 18%, rgba(47,127,122,0.10), transparent 60%),
    radial-gradient(900px 360px at 85% 30%, rgba(47,127,122,0.08), transparent 62%),
    radial-gradient(1200px 520px at 55% 108%, rgba(47,127,122,0.12), transparent 62%),
    linear-gradient(180deg, rgba(246,251,250,1), rgba(238,247,246,1));
  pointer-events:none;
  z-index: 0;
  border-radius: inherit;
}

.services-match::after{
  content:"";
  position:absolute;
  inset: 0 -2rem -0.4rem -2rem;
  background:
    radial-gradient(1200px 520px at 55% 112%, rgba(255,255,255,0.70), rgba(255,255,255,0) 68%),
    linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  transform: rotate(-2deg);
  opacity: 0.9;
  pointer-events:none;
  z-index: 0;
  border-radius: inherit;
}

.services-match > *{
  position: relative;
  z-index: 1;
}

.services-match h2{
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}

.services-match .muted{
  margin-top: 0.35rem;
}

/* Grid: 4 / 2 / 1 */
.svc-grid{
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 980px){
  .svc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .svc-grid{ grid-template-columns: 1fr; }
}

/* ==========================================
   KORT
   ========================================== */
.svc-card{
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 18px;
  padding: 1.35rem 1.35rem 1.2rem; /* strammere og penere */
  box-shadow: var(--shadow-card);
  text-align: left;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.svc-card::before{
  content:"";
  position:absolute;
  inset:-30% -30% -30% -30%;
  background:
    radial-gradient(520px 240px at 15% 20%, rgba(127,188,183,0.20), transparent 60%),
    radial-gradient(520px 240px at 80% 35%, rgba(47,127,122,0.14), transparent 62%),
    linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
  transform: rotate(-8deg);
  opacity: 0.55;
  pointer-events:none;
}

.svc-card > *{ position: relative; }

.svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.12);
}

.svc-card h3{
  margin: 0.2rem 0 0.45rem; /* matcher “mock” */
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.svc-card p{
  margin: 0;
  line-height: 1.6;
}

/* ==========================================
   IKONER – konsistent, ikke dobbel-glød
   (bildene dine har glow -> vi dropper ring/shadow her)
   ========================================== */
.svc-icon{
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 999px;
  overflow: hidden;

  display: block;
  margin: 0 auto 0.65rem auto;

  background: transparent;
  box-shadow: none;
}

.svc-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(var(--icon-zoom));
}

/* Mobil: litt mindre */
@media (max-width: 520px){
  :root{ --icon-size: 84px; --icon-zoom: 1.12; }
}

/* ==========================================
   "Les mer" – nå er det en BUTTON i HTML
   ========================================== */
.svc-more{
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;

  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.95rem;
  color: var(--accent);
  font-weight: 700;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  width: fit-content;
  transition: background .18s ease, transform .18s ease;
}

.svc-more:hover{
  background: rgba(47,127,122,0.10);
  transform: translateX(2px);
}

.svc-more:focus{
  outline: 2px solid rgba(47,127,122,0.35);
  outline-offset: 2px;
}

/* Liten pil-rotasjon når åpen */
.svc-more[aria-expanded="true"] span{
  display: inline-block;
  transform: rotate(90deg);
  transition: transform .18s ease;
}

/* ==========================================
   "Les mer"-PANEL (feltet som åpner under kortet)
   ========================================== */
.svc-panel{
  margin-top: 0.85rem;
  padding: 0.9rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.06);
  background: rgba(255,255,255,0.80);
}

.svc-panel p{
  margin: 0;
}

.svc-panel__actions{
  margin-top: 0.75rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.svc-panel__btn{
  display: inline-block;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  color: #fff;
  background: var(--teal-2);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
  transition: transform .18s ease, filter .18s ease;
}

.svc-panel__btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.svc-panel__link{
  text-decoration: none;
  font-weight: 700;
  color: var(--accent);
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  transition: background .18s ease;
}

.svc-panel__link:hover{
  background: rgba(47,127,122,0.10);
}

/* ==========================================
   CTA
   ========================================== */
.cta-match{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.6rem 0 2.4rem;
  background: linear-gradient(135deg, var(--teal-1), var(--teal-2));
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: var(--shadow-soft);
}

.cta-match::before{
  content:"";
  position:absolute;
  inset:-45% -25% -45% -25%;
  background:
    radial-gradient(820px 320px at 20% 30%, rgba(255,255,255,0.16), transparent 60%),
    radial-gradient(820px 320px at 82% 55%, rgba(255,255,255,0.10), transparent 62%),
    linear-gradient(120deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
  transform: rotate(-6deg);
  pointer-events:none;
  opacity: 0.95;
}

.cta-match::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-58%;
  height: 95%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.20), rgba(255,255,255,0) 70%);
  transform: rotate(2deg);
  pointer-events:none;
  opacity: 0.85;
}

.cta-match__inner{
  position: relative;
  padding: 2.6rem 1.25rem;
  text-align: center;
  color: #fff;
}

.cta-match h2{
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}

.cta-match p{
  margin: 0.75rem 0 0;
  opacity: 0.95;
}

.cta-btn{
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.85rem 1.7rem;
  background: var(--teal-2);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
  transition: transform .18s ease, filter .18s ease;
}

.cta-btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ==========================================
   Mobil padding (som du hadde)
   ========================================== */

/* FOOTER: juster innholdet */
footer .container {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ==========================================
   LES MER – FELT UNDER KORT-REKKA (ikke inni kortet)
   ========================================== */

.svc-details-row{
  grid-column: 1 / -1;         /* tar hele bredden i grid */
  margin-top: .25rem;
}

.svc-details{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.06);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* litt “shine” inni feltet */
.svc-details::before{
  content:"";
  position:absolute;
  inset:-35% -30% -35% -30%;
  background:
    radial-gradient(520px 240px at 15% 20%, rgba(127,188,183,0.18), transparent 60%),
    radial-gradient(520px 240px at 80% 35%, rgba(47,127,122,0.12), transparent 62%),
    linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
  transform: rotate(-8deg);
  opacity: .55;
  pointer-events:none;
}

.svc-details__inner{
  position: relative;
  padding: 1.1rem 1.15rem;
}

/* Tydelig hvilken boks det hører til */
.svc-details__head{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
}

.svc-details__title{
  display:flex;
  align-items:center;
  gap: .6rem;
  font-weight: 900;
}

.svc-details__chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(47,127,122,0.12);
  color: var(--teal-2);
  font-weight: 800;
  font-size: .95rem;
}

.svc-details__close{
  appearance:none;
  border: none;
  background: transparent;
  color: rgba(15,23,42,0.75);
  cursor:pointer;
  font-weight: 800;
  padding: .35rem .55rem;
  border-radius: 10px;
}
.svc-details__close:hover{
  background: rgba(47,127,122,0.10);
}

/* marker/pil som peker “mot” kortet */
.svc-details__arrow{
  position:absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,0.82);
  border-left: 1px solid rgba(15,23,42,0.06);
  border-top: 1px solid rgba(15,23,42,0.06);
  transform: rotate(45deg);
}

/* body + knapper */
.svc-details__text{
  margin: 0;
  line-height: 1.65;
  color: rgba(15,23,42,0.82);
  max-width: 70ch;
}

.svc-details__actions{
  margin-top: .9rem;
  display:flex;
  gap:.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.svc-details__btn{
  display:inline-block;
  padding: .75rem 1.05rem;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 900;
  color: #fff;
  background: var(--teal-2);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}
.svc-details__btn:hover{ filter: brightness(1.05); }

.svc-details__link{
  text-decoration:none;
  font-weight: 800;
  color: var(--accent);
  padding: .55rem .6rem;
  border-radius: 10px;
}
.svc-details__link:hover{
  background: rgba(47,127,122,0.10);
}

.svc-details__arrow{
  display: none !important;
}

.cta-btn{
  background: var(--teal-2);
  color: #ffffff;
  font-weight: 700;
  border-radius: 12px;
  padding: 0.85rem 1.6rem;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.cta-btn:hover{
  background: var(--teal-1);
  color: #ffffff;
}

/* ==========================================
   KLIKK-FEEDBACK PÅ TJENESTEKORT
   ========================================== */

/* Litt jevnere animasjon */
.svc-card{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  border-color: rgba(15,23,42,0.08);
}

/* PC: hover */
@media (hover:hover){
  .svc-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(0,0,0,0.12);
    border-color: rgba(47,127,122,0.25);
  }
}

/* Mobil + klikk: “trykk ned” */
.svc-card:active{
  transform: translateY(-1px) scale(0.985);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

/* Når kortet er aktivt/åpent (styrt av JS via aria-expanded på knappen) */
.svc-card:has(.svc-more[aria-expanded="true"]){
  border-color: rgba(47,127,122,0.35);
  box-shadow: 0 22px 50px rgba(0,0,0,0.12);
}

/* Litt highlight på “Les mer/Lukk” når kortet er åpent */
.svc-card:has(.svc-more[aria-expanded="true"]) .svc-more{
  background: rgba(47,127,122,0.10);
}

/* =========
   MODERNE PULSE (nivå 2)
   ========= */

@keyframes svcPulseGlow {
  0%   { filter: drop-shadow(0 0 0 rgba(82, 208, 198, 0.0)); transform: translateY(0); opacity: .9; }
  50%  { filter: drop-shadow(0 0 10px rgba(82, 208, 198, 0.55)); transform: translateY(-1px); opacity: 1; }
  100% { filter: drop-shadow(0 0 0 rgba(82, 208, 198, 0.0)); transform: translateY(0); opacity: .95; }
}

@keyframes svcChipPulse {
  0%   { box-shadow: 0 0 0 0 rgba(82, 208, 198, 0.0); }
  50%  { box-shadow: 0 0 0 6px rgba(82, 208, 198, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(82, 208, 198, 0.0); }
}

/* Når detaljfeltet er synlig, gi en engangs “pulse” */
.svc-details-row:not([hidden]) .svc-details__arrow{
  animation: svcPulseGlow 700ms ease-out 1;
}

.svc-details-row:not([hidden]) .svc-details__chip{
  animation: svcChipPulse 700ms ease-out 1;
}

main.container {
  max-width: 1100px !important;
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}