/*
Theme Name: Lexman 2026
Theme URI: https://lexman.se/
Author: Lexman Bemanning AB
Description: Tema för lexman.se — bemanning för handeln. Innehåller sidmallar, bokningsformulär med mejlutskick och 301-omdirigeringar från de gamla URL:erna.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: lexman
*/

/* ==========================================================================
   LEXMAN 2026 — Designsystem
   Koncept: "Passet". Visuellt språk hämtat från bemanningsschemat och
   utlarmningen: tidsblock, statusprickar, monospace-tider.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
:root{
  --ink:      #0E212C;   /* djup petrol, nästan svart */
  --deep:     #17384A;   /* sekundär mörk */
  --petrol:   #215A70;   /* mellanton, länkar på ljus botten */
  --paper:    #F1F3F2;   /* kall ljusgrå, butiksgolv före öppning */
  --frost:    #D3DEE0;   /* hårfina linjer */
  --signal:   #FF6A13;   /* varselorange — express, används sparsamt */
  --go:       #12A06A;   /* status: öppet / bekräftat */
  --white:    #FFFFFF;

  --font-display: 'Familjen Grotesk', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --r: 4px;      /* stram radie — schemablock, inte bubblor */
  --r-lg: 10px;

  --shadow: 0 1px 2px rgba(14,33,44,.06), 0 12px 32px -12px rgba(14,33,44,.18);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,h5{font-family:var(--font-display); font-weight:600; line-height:1.05; margin:0; letter-spacing:-.02em}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}

:focus-visible{outline:3px solid var(--signal); outline-offset:3px; border-radius:2px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:clamp(52px,6.4vw,88px)}
.section--tight{padding-block:clamp(40px,4.4vw,60px)}
.section--ink{background:var(--ink); color:#E7EEF0}
.section--white{background:var(--white)}
.rule{border:0; border-top:1px solid var(--frost); margin:0}
.section--ink .rule{border-color:rgba(255,255,255,.12)}

/* ---------- Typografi ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--petrol);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--signal); flex:none}
.section--ink .eyebrow{color:#8FB3BE}

.h-display{font-size:clamp(2.6rem,6.2vw,4.7rem); letter-spacing:-.035em}
.h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
.h2{font-size:clamp(1.85rem,3.4vw,2.7rem)}
.h3{font-size:clamp(1.2rem,1.9vw,1.5rem)}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.5; color:var(--deep); max-width:60ch}
.section--ink .lede{color:#B9CDD4}
.measure{max-width:66ch}
.muted{color:#4C6875}
.section--ink .muted{color:#93B0BA}

/* ---------- Knappar ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:15px 26px; border-radius:var(--r); border:1.5px solid transparent;
  font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; transition:transform .18s var(--ease), background .18s, color .18s, border-color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--signal{background:var(--signal); color:#fff}
.btn--signal:hover{background:#F25C00}
.btn--ink{background:var(--ink); color:#fff}
.btn--ink:hover{background:var(--deep)}
.btn--ghost{border-color:var(--frost); color:var(--ink); background:transparent}
.btn--ghost:hover{border-color:var(--ink)}
/* Mörka sammanhang samlade på ett ställe. Varje behållare med mörk bakgrund
   ska stå i den här listan — annars ärver ghost-knappen sin petrolfärgade text
   från grundregeln och blir osynlig mot bakgrunden. */
:is(.section--ink, .pagehead, .band, .mobilenav, .topbar, .aside__box--dark) .btn--ghost{
  border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.06);
}
:is(.section--ink, .pagehead, .band, .mobilenav, .topbar, .aside__box--dark) .btn--ghost:hover{
  border-color:#fff; background:rgba(255,255,255,.14);
}
.btn--lg{padding:19px 34px; font-size:1.08rem}
.btn--block{width:100%}
.btn__arrow{transition:transform .2s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ---------- Statusrad (dispatchbar) ---------- */
.topbar{
  background:var(--ink); color:#B9CDD4;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:40px}
.topbar a{text-decoration:none; color:#fff}
.topbar a:hover{color:var(--signal)}
.topbar__status{display:flex; align-items:center; gap:9px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--go); flex:none; position:relative}
.dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--go); opacity:.5; animation:pulse 2.4s infinite var(--ease);
}
@keyframes pulse{0%{transform:scale(.7);opacity:.7} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0}}
.topbar__links{display:flex; gap:22px; align-items:center}
@media(max-width:760px){ .topbar__links{display:none} .topbar .wrap{justify-content:center} }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:60; background:rgba(241,243,242,.86);
  backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--frost);
}
.header .wrap{display:flex; align-items:center; gap:26px; height:74px}
/* Inloggade i WordPress har adminmenyn fixerad överst — annars kryper
   sidhuvudet in under den. */
body.admin-bar .header{top:32px}
@media screen and (max-width:782px){ body.admin-bar .header{top:46px} }
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:-.045em}
.brand em{font-style:normal; color:var(--signal)}
.brand small{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--petrol); font-weight:400}

.nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.nav > li{position:relative}
.nav a{
  display:block; padding:10px 13px; text-decoration:none; font-size:.95rem; font-weight:500;
  border-radius:var(--r); color:var(--deep); white-space:nowrap;
}
.nav a:hover{background:rgba(33,90,112,.08); color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--signal)}
.nav__has::after{content:''; display:inline-block; width:5px; height:5px; margin-left:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.submenu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:260px; background:var(--white);
  border:1px solid var(--frost); border-radius:var(--r-lg); padding:8px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s var(--ease);
}
.nav > li:hover .submenu, .nav > li:focus-within .submenu{opacity:1; visibility:visible; transform:none}
.submenu a{padding:10px 12px; font-weight:500}
.submenu span{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#7E97A1; padding:10px 12px 4px}

.header__cta{display:flex; gap:10px; align-items:center}
.header__cta .btn{padding:12px 20px; font-size:.95rem}
.burger{display:none; background:none; border:1.5px solid var(--frost); border-radius:var(--r); width:46px; height:46px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:20px; height:1.6px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:20px; height:1.6px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

@media(max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .header__cta .btn--ghost{display:none}
}
@media(max-width:520px){ .header__cta .btn{display:none} }

/* Mobilmeny */
.mobilenav{
  position:fixed; inset:0; z-index:80; background:var(--ink); color:#fff;
  padding:24px var(--gut) 40px; overflow-y:auto; display:none;
}
.mobilenav[data-open="true"]{display:block}
.mobilenav__top{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px}
.mobilenav__close{background:none; border:1px solid rgba(255,255,255,.3); color:#fff; width:46px; height:46px; border-radius:var(--r); font-size:22px; cursor:pointer}
.mobilenav a{display:block; text-decoration:none; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.1); font-family:var(--font-display); font-size:1.25rem; font-weight:500}
.mobilenav .sub a{font-size:1rem; font-family:var(--font-body); padding-left:16px; color:#B9CDD4}
.mobilenav .btn{margin-top:26px}

/* ==========================================================================
   SIGNATUR — Expresslinjen (60-minuters tidsaxel)
   ========================================================================== */
.dispatch{
  background:var(--white); border:1px solid var(--frost); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.section--ink .dispatch{background:#132B37; border-color:rgba(255,255,255,.12); color:#E7EEF0}
.dispatch__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#5D7C88; padding-bottom:16px; border-bottom:1px solid var(--frost); margin-bottom:20px;
}
.section--ink .dispatch__head{color:#8FB3BE; border-color:rgba(255,255,255,.12)}
.dispatch__head strong{color:var(--ink); font-weight:500; display:flex; align-items:center; gap:8px}
.section--ink .dispatch__head strong{color:#fff}

.track{position:relative; height:6px; background:var(--frost); border-radius:99px; margin:0 0 22px}
.section--ink .track{background:rgba(255,255,255,.14)}
.track__fill{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--petrol), var(--signal));
  animation:fill 3.4s .35s var(--ease) forwards;
}
@keyframes fill{to{width:100%}}

.steps{display:grid; gap:2px}
.steps li{
  display:grid; grid-template-columns:62px 16px 1fr; align-items:center; gap:12px;
  padding:11px 0; opacity:0; transform:translateY(6px);
  animation:stepIn .5s var(--ease) forwards;
}
.steps li:nth-child(1){animation-delay:.5s}
.steps li:nth-child(2){animation-delay:1.1s}
.steps li:nth-child(3){animation-delay:1.8s}
.steps li:nth-child(4){animation-delay:2.6s}
@keyframes stepIn{to{opacity:1; transform:none}}
.steps time{font-family:var(--font-mono); font-size:12.5px; color:var(--petrol); letter-spacing:.02em}
.section--ink .steps time{color:#8FB3BE}
.steps .mark{width:11px; height:11px; border-radius:50%; border:2px solid var(--frost); background:var(--white)}
.section--ink .steps .mark{background:#132B37; border-color:rgba(255,255,255,.25)}
.steps li:last-child .mark{border-color:var(--signal); background:var(--signal); box-shadow:0 0 0 4px rgba(255,106,19,.18)}
.steps span.label{font-size:.95rem; font-weight:500}

@media(prefers-reduced-motion:reduce){
  .track__fill{animation:none; width:100%}
  .steps li{animation:none; opacity:1; transform:none}
  .dot::after{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(50px,7vw,92px) clamp(56px,7vw,96px); position:relative; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero h1{margin-bottom:22px}
.hero h1 .accent{color:var(--signal)}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero__proof{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:34px; padding-top:26px;
  border-top:1px solid var(--frost); font-family:var(--font-mono); font-size:12.5px; color:#5D7C88;
}
.hero__proof li{display:flex; align-items:center; gap:8px}
.hero__proof svg{flex:none; color:var(--go)}
@media(max-width:900px){ .hero__grid{grid-template-columns:1fr} }

/* ---------- Nyckeltal ---------- */
.figures{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--frost)}
.figures li{background:var(--paper); padding:clamp(24px,3.4vw,38px) clamp(18px,2.4vw,30px)}
.section--white .figures li{background:var(--white)}
.figures b{display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,3.6vw,2.9rem); letter-spacing:-.04em; line-height:1}
.figures span{display:block; margin-top:10px; font-size:.92rem; color:#4C6875; line-height:1.4}
@media(max-width:760px){ .figures{grid-template-columns:repeat(2,1fr)} }

/* ---------- Passblock (tjänster) ---------- */
.shifts{display:grid; gap:14px}
.shift{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,40px); align-items:start;
  background:var(--white); border:1px solid var(--frost); border-left:4px solid var(--petrol);
  border-radius:var(--r); padding:clamp(22px,3vw,32px); text-decoration:none;
  transition:border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.shift:hover{border-left-color:var(--signal); transform:translateX(4px); box-shadow:var(--shadow)}
.shift__no{font-family:var(--font-mono); font-size:12px; color:#8299A2; letter-spacing:.1em; padding-top:6px}
.shift h3{margin-bottom:9px}
.shift p{margin:0; color:#4C6875; font-size:.98rem; max-width:62ch}
.shift__tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--frost); border-radius:99px; padding:4px 11px; color:#5D7C88;
}
.shift__go{align-self:center; color:var(--petrol); flex:none}
@media(max-width:700px){
  .shift{grid-template-columns:1fr; gap:12px}
  .shift__no{padding-top:0}
  .shift__go{display:none}
}

/* ---------- Kort ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--white); border:1px solid var(--frost); border-radius:var(--r-lg); padding:clamp(24px,2.6vw,32px)}
.section--ink .card{background:#132B37; border-color:rgba(255,255,255,.12)}
.card h3{margin-bottom:10px}
.card p{margin:0; color:#4C6875; font-size:.97rem}
.section--ink .card p{color:#B9CDD4}
.card__icon{width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r); background:rgba(255,106,19,.1); color:var(--signal); margin-bottom:18px}
@media(max-width:900px){ .cards{grid-template-columns:1fr} }

/* ---------- Process ---------- */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--frost); border:1px solid var(--frost); border-radius:var(--r-lg); overflow:hidden}
.process li{background:var(--white); padding:clamp(22px,2.6vw,30px)}
.process time{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--signal)}
.process h3{font-size:1.1rem; margin:12px 0 8px}
.process p{margin:0; font-size:.93rem; color:#4C6875}
@media(max-width:820px){ .process{grid-template-columns:1fr} }

/* ---------- Kundlogotyper ---------- */
.logos{display:flex; flex-wrap:wrap; gap:10px}
.logos li{
  font-family:var(--font-display); font-weight:600; font-size:.98rem; letter-spacing:-.01em;
  border:1px solid var(--frost); border-radius:var(--r); padding:12px 20px; color:#4C6875; background:var(--white);
}
.section--ink .logos li{background:transparent; border-color:rgba(255,255,255,.16); color:#B9CDD4}

/* ---------- Citat ---------- */
.quote{border-left:4px solid var(--signal); padding-left:clamp(20px,3vw,34px)}
.quote blockquote{margin:0; font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.95rem); line-height:1.25; letter-spacing:-.02em}
.quote cite{display:block; margin-top:20px; font-style:normal; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; color:#8FB3BE}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--frost)}
.faq details{border-bottom:1px solid var(--frost)}
.faq summary{
  cursor:pointer; list-style:none; padding:24px 44px 24px 0; position:relative;
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.02rem,1.5vw,1.2rem); letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:6px; top:32px; width:13px; height:13px;
  border-right:2px solid var(--signal); border-bottom:2px solid var(--signal);
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg); top:36px}
.faq .answer{padding:0 8% 26px 0; color:#4C6875; max-width:80ch}
.faq .answer p:last-child{margin:0}

/* ---------- CTA-band ---------- */
.band{background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:clamp(34px,5vw,64px); position:relative; overflow:hidden}
.band::before{
  content:''; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,19,.22), transparent 68%);
}
.band__grid{display:grid; grid-template-columns:1.3fr .7fr; gap:36px; align-items:center; position:relative}
.band p{color:#B9CDD4; margin:14px 0 0; max-width:52ch}
.band__actions{display:flex; flex-direction:column; gap:12px}
@media(max-width:820px){ .band__grid{grid-template-columns:1fr} }

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:#B9CDD4; padding-block:clamp(52px,6vw,84px) 32px; font-size:.94rem}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
.footer h4{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#7E97A1; font-weight:500; margin-bottom:16px}
.footer a{text-decoration:none; color:#B9CDD4; display:inline-block; padding:5px 0}
.footer a:hover{color:var(--signal)}
.footer__brand .brand{color:#fff; margin-bottom:16px}
.footer__bottom{
  margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-family:var(--font-mono); font-size:12px; color:#7E97A1;
}
@media(max-width:900px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .footer__grid{grid-template-columns:1fr} }

/* ---------- Hjälpklasser ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start}
@media(max-width:860px){ .grid-2{grid-template-columns:1fr} }
.stack-lg > * + *{margin-top:clamp(28px,3.5vw,48px)}
.head{display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:end; margin-bottom:clamp(30px,4vw,52px)}
.head p{margin:14px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* ==========================================================================
   BOKNINGSFORMULÄR
   ========================================================================== */
.booking{
  background:var(--white); border:1px solid var(--frost); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.booking__bar{display:flex; background:var(--paper); border-bottom:1px solid var(--frost)}
.booking__bar li{
  flex:1; padding:16px 18px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#8299A2; border-bottom:3px solid transparent; display:flex; gap:9px; align-items:center;
}
.booking__bar li[data-state="active"]{color:var(--ink); border-bottom-color:var(--signal); background:var(--white)}
.booking__bar li[data-state="done"]{color:var(--go)}
.booking__bar b{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:1.5px solid currentColor; font-size:11px; font-weight:500;
}
@media(max-width:640px){ .booking__bar li span{display:none} .booking__bar li{justify-content:center} }

.booking__body{padding:clamp(24px,3.4vw,42px)}
.step{display:none}
.step[data-active="true"]{display:block; animation:stepFade .35s var(--ease)}
@keyframes stepFade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.step > h2{font-size:clamp(1.4rem,2.4vw,1.85rem); margin-bottom:8px}
.step > .lede{font-size:1rem; margin-bottom:30px}

.field{margin-bottom:22px}
.field > label:not(.consent), .fieldset > legend{
  display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#5D7C88; margin-bottom:9px; padding:0;
}
.field .hint{display:block; font-size:.86rem; color:#8299A2; margin-top:7px; font-family:var(--font-body); letter-spacing:0; text-transform:none}
.req{color:var(--signal)}
.input, .select, .textarea{
  width:100%; padding:14px 15px; border:1.5px solid var(--frost); border-radius:var(--r);
  background:var(--white); font-size:1rem; transition:border-color .15s, box-shadow .15s;
}
.input:hover,.select:hover,.textarea:hover{border-color:#AFC3C8}
.input:focus,.select:focus,.textarea:focus{border-color:var(--petrol); box-shadow:0 0 0 3px rgba(33,90,112,.12); outline:none}
.textarea{min-height:120px; resize:vertical}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23215A70' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:40px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
@media(max-width:620px){ .row,.row-3{grid-template-columns:1fr} }

.fieldset{border:0; padding:0; margin:0 0 22px}

/* Tjänsteval — stora träffytor */
.chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{
  display:flex; align-items:center; gap:11px; padding:15px 16px; border:1.5px solid var(--frost);
  border-radius:var(--r); cursor:pointer; font-weight:500; font-size:.97rem; line-height:1.25;
  transition:border-color .15s, background .15s;
}
.chip span::before{
  content:''; width:17px; height:17px; border:1.5px solid #AFC3C8; border-radius:50%; flex:none; transition:.15s;
}
.chip span:hover{border-color:#AFC3C8; background:#FAFBFB}
.chip input:checked + span{border-color:var(--signal); background:rgba(255,106,19,.06)}
.chip input:checked + span::before{border-color:var(--signal); border-width:5px}
.chip input:focus-visible + span{outline:3px solid var(--signal); outline-offset:2px}

/* Antal-stegare */
.stepper{display:inline-flex; align-items:center; border:1.5px solid var(--frost); border-radius:var(--r); overflow:hidden}
.stepper button{width:52px; height:52px; border:0; background:var(--white); font-size:22px; cursor:pointer; color:var(--petrol); transition:background .15s}
.stepper button:hover{background:var(--paper)}
.stepper input{width:64px; height:52px; border:0; border-inline:1.5px solid var(--frost); text-align:center; font-family:var(--font-mono); font-size:1.1rem; -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* Express-växel */
.express{
  display:flex; gap:15px; align-items:flex-start; padding:18px; border-radius:var(--r);
  border:1.5px solid var(--frost); background:var(--paper); margin-bottom:26px; cursor:pointer;
}
.express input{margin-top:3px; width:20px; height:20px; accent-color:var(--signal); flex:none}
.express strong{display:block; font-family:var(--font-display); font-size:1.05rem}
.express small{display:block; color:#4C6875; font-size:.9rem; margin-top:3px}
.express:has(input:checked){border-color:var(--signal); background:rgba(255,106,19,.07)}
.express-call{display:none; margin:-14px 0 26px; padding:16px 18px; border-radius:var(--r); background:var(--ink); color:#fff}
.express-call a{color:var(--signal); font-family:var(--font-mono); font-weight:500}
.express:has(input:checked) ~ .express-call{display:block}

/* Samtycke */
.consent{display:flex; gap:13px; align-items:flex-start; font-size:.92rem; color:#4C6875; cursor:pointer}
.consent input{margin-top:3px; width:19px; height:19px; accent-color:var(--petrol); flex:none}
.consent a{color:var(--petrol)}

/* Sammanfattning */
.summary{border:1px solid var(--frost); border-radius:var(--r); overflow:hidden; margin-bottom:26px}
.summary dl{margin:0; display:grid; grid-template-columns:auto 1fr}
.summary dt{
  padding:13px 18px; background:var(--paper); border-bottom:1px solid var(--frost);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#5D7C88;
}
.summary dd{padding:13px 18px; margin:0; border-bottom:1px solid var(--frost); font-weight:500}
.summary dl > :nth-last-child(-n+2){border-bottom:0}
@media(max-width:560px){ .summary dl{grid-template-columns:1fr} .summary dt{border-bottom:0; padding-bottom:2px} }

/* Navigering i formuläret */
.booking__nav{display:flex; gap:12px; justify-content:space-between; margin-top:32px; padding-top:26px; border-top:1px solid var(--frost)}
.booking__nav .btn{min-width:150px}
@media(max-width:520px){ .booking__nav{flex-direction:column-reverse} .booking__nav .btn{width:100%} }

/* Fel & kvitto */
.error{color:#C4331A; font-size:.87rem; margin-top:7px; display:none; font-weight:500}
.field[data-invalid="true"] .error, .fieldset[data-invalid="true"] .error{display:block}
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea{border-color:#C4331A}
.formnote{padding:15px 18px; border-radius:var(--r); background:#FCEBE7; color:#8E2412; font-size:.93rem; margin-bottom:22px; display:none}
.formnote[data-show="true"]{display:block}

.receipt{display:none; text-align:center; padding:clamp(30px,5vw,60px) clamp(20px,4vw,50px)}
.receipt[data-show="true"]{display:block}
.receipt__mark{width:66px; height:66px; margin:0 auto 24px; border-radius:50%; background:rgba(18,160,106,.12); color:var(--go); display:grid; place-items:center}
.receipt h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:12px}
.receipt p{color:#4C6875; max-width:52ch; margin-inline:auto}
.receipt__ref{display:inline-block; margin-top:22px; font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; border:1px dashed var(--frost); border-radius:var(--r); padding:11px 18px}

/* Sidopanel bokningssidan */
.aside{position:sticky; top:100px; display:grid; gap:14px}
.aside__box{background:var(--white); border:1px solid var(--frost); border-radius:var(--r-lg); padding:26px}
.aside__box--dark{background:var(--ink); border-color:var(--ink); color:#fff}
.aside__box--dark h3{color:#fff}
.aside__box--dark p{color:#B9CDD4}
.aside__box h3{font-size:1.1rem; margin-bottom:12px}
.aside__box p{font-size:.94rem; color:#4C6875; margin:0}
.aside__box .phone{
  display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600;
  font-size:1.35rem; letter-spacing:-.02em; text-decoration:none; margin-top:6px;
}
.checklist li{display:flex; gap:11px; align-items:flex-start; padding:8px 0; font-size:.94rem; color:#4C6875}
.checklist svg{flex:none; margin-top:4px; color:var(--go)}
@media(max-width:980px){ .aside{position:static} }

/* Sidhuvud för undersidor */
.pagehead{background:var(--ink); color:#fff; padding-block:clamp(46px,6vw,84px)}
.pagehead .lede{color:#B9CDD4}
.crumbs{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:#7E97A1; margin-bottom:20px}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--signal)}
.crumbs span{margin-inline:8px; opacity:.5}

/* ==========================================================================
   KOMPAKT LAYOUT — tätare informationsdesign
   ========================================================================== */

/* Hjälte: nyckeltal integrerade i samma sektion */
.hero{padding-block:clamp(40px,5vw,72px) clamp(34px,4vw,56px)}
.hero__figures{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(34px,4vw,54px); padding-top:26px; border-top:1px solid var(--frost);
}
.hero__figures b{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem,2.5vw,2.1rem); letter-spacing:-.035em; line-height:1;
}
.hero__figures span{display:block; margin-top:7px; font-size:.83rem; line-height:1.35; color:#5D7C88}
@media(max-width:640px){ .hero__figures{grid-template-columns:repeat(2,1fr); gap:22px} }

/* Kompakt sektionsrubrik på en rad */
.head--row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:clamp(22px,2.6vw,32px);
}
.head--row .eyebrow{margin-bottom:10px}
.head--row h2{font-size:clamp(1.6rem,2.7vw,2.2rem)}
.head--row .link{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--petrol); text-decoration:none; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.head--row .link:hover{color:var(--signal)}
.section--ink .head--row .link{color:#8FB3BE}

/* Tjänsterutnät — tätt, hårfina linjer */
.tiles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--frost); border:1px solid var(--frost); border-radius:var(--r-lg); overflow:hidden;
}
.tiles a{
  background:var(--white); padding:22px 20px 22px; text-decoration:none;
  display:flex; flex-direction:column; gap:7px; min-height:168px; transition:background .18s;
}
.tiles a:hover{background:#FAFBFC}
.tiles .n{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:#9BAEB5; transition:color .18s}
.tiles a:hover .n{color:var(--signal)}
.tiles h3{font-size:1.05rem; letter-spacing:-.022em}
.tiles p{margin:0; font-size:.87rem; line-height:1.45; color:#4C6875}
.tiles .go{
  margin-top:auto; padding-top:12px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:#9BAEB5; transition:color .18s, transform .18s var(--ease);
}
.tiles a:hover .go{color:var(--petrol); transform:translateX(3px)}
@media(max-width:1000px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media(max-width:540px){ .tiles{grid-template-columns:1fr} .tiles a{min-height:0} }

/* Bento: process + citat i samma mörka block */
.bento{display:grid; grid-template-columns:6.5fr 5.5fr; gap:clamp(28px,4vw,64px); align-items:start}
@media(max-width:900px){ .bento{grid-template-columns:1fr; gap:36px} }

.miniprocess li{
  display:grid; grid-template-columns:92px 1fr; gap:clamp(14px,2vw,26px); align-items:baseline;
  padding:16px 0; border-top:1px solid rgba(255,255,255,.13);
}
.miniprocess li:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.miniprocess time{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--signal)}
.miniprocess h3{font-size:1.02rem; margin-bottom:4px}
.miniprocess p{margin:0; font-size:.89rem; line-height:1.5; color:#93B0BA}
@media(max-width:520px){ .miniprocess li{grid-template-columns:1fr; gap:6px} }

.usps{display:grid; gap:1px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg); overflow:hidden; margin-top:26px}
.usps li{background:var(--ink); padding:16px 20px}
.usps strong{display:block; font-family:var(--font-display); font-size:1rem; margin-bottom:3px}
.usps span{font-size:.87rem; color:#93B0BA; line-height:1.45}

/* Kundremsa + orter på en rad */
.strip{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.strip li{
  font-family:var(--font-display); font-weight:600; font-size:.9rem; letter-spacing:-.01em;
  border:1px solid var(--frost); border-radius:99px; padding:8px 15px; color:#5D7C88; background:var(--white);
}
.places{display:flex; flex-wrap:wrap; gap:8px}
.places a{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  border:1px solid var(--frost); border-radius:99px; padding:9px 17px; font-size:.92rem; font-weight:500;
  background:var(--white); transition:border-color .18s, color .18s;
}
.places a:hover{border-color:var(--ink)}
.places a::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--signal); flex:none}

/* FAQ tätare */
.faq summary{padding:19px 42px 19px 0; font-size:1.02rem}
.faq summary::after{top:27px; width:11px; height:11px}
.faq details[open] summary::after{top:31px}
.faq .answer{padding:0 6% 22px 0; font-size:.93rem; line-height:1.55}

/* CTA-kort bredvid FAQ */
.band--compact{padding:clamp(26px,3vw,38px); position:sticky; top:100px}
.band--compact h2{font-size:clamp(1.35rem,2.1vw,1.7rem)}
.band--compact p{font-size:.93rem; margin-top:10px}
.band--compact .band__actions{margin-top:24px}
.band--compact::before{width:220px; height:220px; right:-60px; top:-60px}
@media(max-width:900px){ .band--compact{position:static} }

/* Tätare footer */
.footer{padding-block:clamp(44px,5vw,64px) 26px}
.footer__bottom{margin-top:38px; padding-top:22px}

.bento .quote blockquote{font-size:clamp(1.12rem,1.75vw,1.42rem); line-height:1.3}
.bento .quote cite{margin-top:14px}

/* Behovslista ovanför uppdragsbeskrivningen */
.needlist{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px}
.needlist li{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:#5D7C88; background:var(--paper); border-radius:99px; padding:5px 12px;
  display:flex; align-items:center; gap:7px;
}
.needlist li::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--signal); flex:none}
.textarea--tall{min-height:190px; font-size:.97rem; line-height:1.6}

/* ==========================================================================
   LOGOTYP
   ========================================================================== */
.brand img{height:30px; width:auto; display:block}
.footer .brand img, .mobilenav .brand img{filter:brightness(0) invert(1)}
.footer .brand{margin-bottom:16px}

/* ==========================================================================
   UNDERSIDOR
   ========================================================================== */
.pagehead__actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:28px}
.pagehead h1{max-width:20ch}

.layout{display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,.82fr); gap:clamp(28px,4.2vw,68px); align-items:start}
@media(max-width:960px){ .layout{grid-template-columns:1fr} }

/* Brödtext */
.prose{max-width:68ch}
.prose > *:first-child{margin-top:0}
.prose h2{font-size:clamp(1.38rem,2.2vw,1.85rem); margin:40px 0 14px}
.prose h3{font-size:1.1rem; margin:28px 0 9px}
.prose p{margin:0 0 1.05em; color:#31505C; font-size:1.01rem}
.prose strong{color:var(--ink)}
.prose a{color:var(--petrol); text-underline-offset:3px}
.prose ul.bullets{display:grid; gap:9px; margin:0 0 1.3em}
.prose ul.bullets li{
  position:relative; padding-left:23px; color:#31505C; font-size:.98rem; line-height:1.55;
}
.prose ul.bullets li::before{
  content:''; position:absolute; left:0; top:.63em;
  width:6px; height:6px; border-radius:50%; background:var(--signal);
}
.prose .callout{
  border-left:4px solid var(--signal); background:var(--white); border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px; margin:28px 0; font-size:.98rem;
}
.prose .callout p:last-child{margin:0}
.section--white .prose .callout{background:var(--paper)}

/* Rollremsa */
.rolegrid{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.rolegrid li{
  border:1px solid var(--frost); background:var(--white); border-radius:99px;
  padding:9px 16px; font-size:.92rem; font-weight:500; color:var(--deep);
}
.section--white .rolegrid li{background:var(--paper)}

/* Relaterade sidor */
.related{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--frost); border:1px solid var(--frost); border-radius:var(--r-lg); overflow:hidden;
}
.related a{background:var(--white); padding:22px 20px; text-decoration:none; display:block; transition:background .18s}
.related a:hover{background:#FAFBFC}
.related .n{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:#9BAEB5}
.related h3{font-size:1.02rem; margin:8px 0 6px}
.related p{margin:0; font-size:.87rem; color:#4C6875; line-height:1.45}
@media(max-width:800px){ .related{grid-template-columns:1fr} }

/* Medarbetare */
.team{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--frost); border:1px solid var(--frost); border-radius:var(--r-lg); overflow:hidden;
}
.team li{background:var(--white); padding:24px 22px}
.team .role{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--signal)}
.team h3{font-size:1.06rem; margin:9px 0 4px}
.team p{margin:0 0 10px; font-size:.9rem; color:#4C6875}
.team a{display:block; font-size:.92rem; color:var(--petrol); text-decoration:none; padding:2px 0}
.team a:hover{color:var(--signal)}
@media(max-width:860px){ .team{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .team{grid-template-columns:1fr} }

/* Nyhetslista */
.newslist{display:grid; gap:0; border-top:1px solid var(--frost)}
.newslist a{
  display:grid; grid-template-columns:130px 1fr auto; gap:clamp(14px,2.4vw,32px); align-items:baseline;
  padding:24px 0; border-bottom:1px solid var(--frost); text-decoration:none; transition:padding-left .2s var(--ease);
}
.newslist a:hover{padding-left:8px}
.newslist time{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:#8299A2}
.newslist h3{font-size:1.12rem; margin-bottom:6px}
.newslist p{margin:0; font-size:.93rem; color:#4C6875; max-width:64ch}
.newslist .go{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9BAEB5}
@media(max-width:760px){ .newslist a{grid-template-columns:1fr; gap:8px} .newslist .go{display:none} }

/* Kontaktkort */
.contactcards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.contactcards .card h3{margin-bottom:8px}
.contactcards .big{
  display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600;
  font-size:1.25rem; letter-spacing:-.02em; text-decoration:none; margin-top:10px; color:var(--ink);
}
@media(max-width:860px){ .contactcards{grid-template-columns:1fr} }

/* Steglista (rekryteringsprocess) */
.bigsteps{display:grid; gap:1px; background:var(--frost); border:1px solid var(--frost); border-radius:var(--r-lg); overflow:hidden}
.bigsteps li{background:var(--white); display:grid; grid-template-columns:88px 1fr; gap:clamp(16px,2.4vw,32px); padding:26px clamp(20px,2.6vw,32px)}
.bigsteps .n{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--signal); padding-top:4px}
.bigsteps h3{font-size:1.12rem; margin-bottom:8px}
.bigsteps p{margin:0; font-size:.96rem; color:#4C6875; max-width:70ch}
@media(max-width:560px){ .bigsteps li{grid-template-columns:1fr; gap:8px} }

/* Områdesremsa på ortssidor */
.areas{display:flex; flex-wrap:wrap; gap:7px}
.areas li{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:#5D7C88;
  border:1px solid var(--frost); border-radius:var(--r); padding:6px 12px; background:var(--white);
}

.team .note{display:block; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#9BAEB5}

/* Sidfoten har fem kolumner sedan "För personal" tillkom */
.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}
@media(max-width:1080px){ .footer__grid{grid-template-columns:1fr 1fr 1fr} }
@media(max-width:760px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .footer__grid{grid-template-columns:1fr} }

/* ==========================================================================
   BOKNINGSFORMULÄR — passrader och levande sammanfattning
   ========================================================================== */

/* Val av kundtyp — första frågan, den som styr resten */
.idpick{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:600px){ .idpick{grid-template-columns:1fr} }
.idpick label{position:relative; display:block}
.idpick input{position:absolute; opacity:0; width:0; height:0}
.idpick span{
  display:block; padding:18px 20px; border:1.5px solid var(--frost); border-radius:var(--r);
  cursor:pointer; transition:border-color .15s, background .15s; height:100%;
}
.idpick span:hover{border-color:#AFC3C8; background:#FAFBFC}
.idpick strong{display:block; font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:-.02em}
.idpick small{display:block; color:#4C6875; font-size:.88rem; margin-top:5px; line-height:1.4}
.idpick input:checked + span{border-color:var(--signal); background:rgba(255,106,19,.06)}
.idpick input:focus-visible + span{outline:3px solid var(--signal); outline-offset:2px}

/* Passrader */
.passhead, .passrow{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 88px 44px; gap:8px;
}
.passhead{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:#7E97A1; margin-bottom:8px;
}
.passrows{display:grid; gap:8px}
.passrow{align-items:center}
.passrow .input{padding:11px 12px; font-size:.94rem}
.passrow__del{
  width:44px; height:44px; border:1.5px solid var(--frost); border-radius:var(--r);
  background:var(--white); cursor:pointer; color:#8299A2; display:grid; place-items:center; transition:.15s;
}
.passrow__del:hover{border-color:#C4331A; color:#C4331A}
.passrow__del[disabled]{opacity:.35; cursor:not-allowed}
@media(max-width:680px){
  .passhead{display:none}
  .passrow{grid-template-columns:1fr 1fr 72px 44px; padding:12px; border:1px solid var(--frost); border-radius:var(--r)}
  .passrow > :first-child{grid-column:1 / -1}
}
.btn-add{
  display:inline-flex; align-items:center; gap:9px; margin-top:10px;
  padding:11px 18px; border:1.5px dashed var(--frost); border-radius:var(--r); background:transparent;
  cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--petrol);
  transition:border-color .15s, background .15s;
}
.btn-add:hover{border-color:var(--petrol); background:var(--paper)}

/* Levande sammanfattning i sidopanelen */
.livesum__empty{color:#8299A2; font-size:.92rem; margin:0}
.livesum__line{
  display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--frost); font-size:.93rem;
}
.livesum__line:last-of-type{border-bottom:0}
.livesum__line span:first-child{color:#4C6875}
.livesum__line span:last-child{font-weight:500; text-align:right; white-space:nowrap}
.livesum__total{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--frost);
  display:flex; justify-content:space-between; align-items:baseline;
}
.livesum__total b{font-family:var(--font-display); font-weight:600; font-size:1.6rem; letter-spacing:-.03em}
.livesum__total span{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7E97A1}
.livesum__tag{
  display:inline-block; margin-bottom:12px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; background:rgba(255,106,19,.12); color:#B3450A;
  border-radius:99px; padding:5px 11px;
}