/* home.css — start page below the hero (redesign 8 Nov 2026). Loaded after main.css on / only. */

/* ---- contrast: small grey text must reach 4.5:1 on every background of this page ---- */
:root{--muted:#8599B0;}
:root[data-theme="light"]{--muted:#6E695E;}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--muted:#6E695E;}}
/* links inside running text are underlined, so they don't depend on colour alone */
main p a.t-accent,main .ingress a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
main p a.t-accent:hover{text-decoration-thickness:2px;}

.sub-label{font-size:.875rem;color:var(--muted);margin:2.25rem 0 1.1rem;}

/* ---- 01 Våra jobb: image tiles ---- */
.work-grid{gap:1.25rem;}
.work-grid .card-media .card-body{padding:1.15rem 1.35rem 1.35rem;}
.work-grid .h3{font-size:1.3rem;line-height:1.2;}
.work-grid .kicker{font-size:.7rem;}
.work-grid .desc{margin-top:.55rem;}
/* card button: the site-wide outlined pill (main.css), kept at its natural width at the foot of the card */
.work-grid .card-body .cta,.svc .cta{display:inline-flex;align-self:flex-start;margin-top:auto;}
.work-grid .card-body .desc{margin-bottom:1.25rem;}
.card-place{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);margin:0 0 .4rem;}
.card-place svg{width:.85rem;height:.85rem;flex:none;color:var(--teal-text);}
@media(max-width:48rem){
  .work-grid{grid-template-columns:1fr;gap:.6rem;}
  .work-grid .card.card-media{flex-direction:row;align-items:stretch;}
  .work-grid .card-media .card-thumb{width:8.5rem;aspect-ratio:auto;min-height:5.6rem;border-bottom:0;border-right:1px solid var(--border);}
  .work-grid .card-media .card-body{padding:.8rem .95rem;justify-content:center;}
  .work-grid .desc,.work-grid .cta{display:none!important;}
  .work-grid .h3{font-size:1.08rem;}
  .work-grid .kicker{margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .work-grid .card-place{margin-bottom:.2rem;font-size:.72rem;}
}

/* ---- 02 Hemsidor ---- */
.web-tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;}
.web-pillars{display:grid;gap:1rem 1.75rem;margin-top:2rem;}
@media(min-width:36rem){.web-pillars{grid-template-columns:1fr 1fr;}}
.web-pillar{display:grid;grid-template-columns:2.1rem 1fr;gap:.25rem .75rem;align-items:start;}
.web-pillar svg{grid-row:span 2;width:2.1rem;height:2.1rem;padding:.45rem;border-radius:50%;border:1px solid var(--border);color:var(--teal-text);background:var(--surface);}
.web-pillar h3{font-family:'Familjen Grotesk',system-ui,sans-serif;font-size:1rem;font-weight:600;color:var(--heading);margin:.3rem 0 0;}
.web-pillar p{font-size:.92rem;line-height:1.55;color:var(--body);margin:0;}
.web-keep{margin-top:1.75rem;font-size:.95rem;line-height:1.6;color:var(--body);border-left:2px solid var(--teal-text);padding-left:1rem;}
.web-keep strong{color:var(--heading);font-weight:600;}
.web-stats{display:flex;flex-wrap:wrap;gap:1.25rem 2.25rem;margin-top:1.75rem;}
.web-stat .n{font-family:'Fraunces',Georgia,serif;font-size:1.9rem;line-height:1;color:var(--heading);}
.web-stat .n small{font-size:.55em;color:var(--muted);}
.web-stat .l{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.35rem;}
/* real client screenshots inside the existing CSS laptop/phone frames */
.mock-screen .mock-shot,.mock-phone-screen .mock-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;}
.mock-phone-screen::before{z-index:3;}
.web-cap a{color:var(--teal-text);text-decoration:underline;text-underline-offset:3px;}
.web-cap strong{color:var(--heading);font-weight:600;}

/* ---- 03 Kundröster ---- */
.kr-row{display:grid;gap:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2.5rem;}
.kr{margin:0;display:flex;flex-direction:column;}
.kr-media{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--border);border-radius:3px;background:var(--surface2);}
.kr-media img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.kr-media:hover img{transform:scale(1.03);}
.kr-media .video-play-btn{background:rgba(7,19,31,.1);}
.kr-media .video-play-btn:hover,.kr-media .video-play-btn:focus-visible{background:rgba(7,19,31,.28);}
.kr-dur{position:absolute;right:.6rem;bottom:.6rem;z-index:2;font-size:.72rem;letter-spacing:.04em;color:#EAF1F8;background:rgba(7,19,31,.7);padding:.15rem .45rem;border-radius:2px;pointer-events:none;}
.kr-q{margin:1.15rem 0 0;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.12rem;line-height:1.45;color:var(--heading);}
.kr-q p{margin:0;}
.kr-who{margin-top:.75rem;font-size:.86rem;line-height:1.5;color:var(--body);display:flex;flex-direction:column;gap:.15rem;}
.kr-who strong{color:var(--heading);font-weight:600;}
.kr-who a{margin-top:.35rem;color:var(--teal-text);font-size:.84rem;}
@media(max-width:52rem){
  .kr-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(15.5rem,78%);overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding-bottom:.75rem;margin-inline:-1.5rem;padding-inline:1.5rem;scroll-padding-inline:1.5rem;}
  .kr{scroll-snap-align:start;}
  .kr-media{aspect-ratio:1/1;}
  .kr-q{font-size:1.02rem;}
}
.kr-hint{display:none;font-size:.78rem;color:var(--muted);margin-top:.5rem;}
@media(max-width:52rem){.kr-hint{display:block;}}

/* ---- 04 Tjänster ---- */
.svc-grid{gap:1.1rem;}
.svc{position:relative;display:flex;flex-direction:column;}
.svc .svc-n{font-family:'Fraunces',Georgia,serif;font-size:.95rem;color:var(--teal-text);margin-bottom:.6rem;}
.svc .h3{font-size:1.28rem;}
.svc .desc{margin-bottom:1.25rem;}
.svc:hover{border-color:var(--teal-text);}
.svc-new{position:absolute;top:1.1rem;right:1.1rem;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text);border:1px solid var(--teal-text);border-radius:999px;padding:.12rem .5rem;}
.svc-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:2rem;padding:1.4rem 1.6rem;border:1px solid var(--border);border-radius:3px;background:var(--surface);}
.svc-help p{margin:0;color:var(--body);max-width:40rem;line-height:1.6;}
.more-grid{display:grid;gap:1rem;margin-top:1.1rem;}
@media(min-width:40rem){.more-grid{grid-template-columns:1fr 1fr;}}
.more-link{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.25rem;border:1px solid var(--border);border-radius:3px;color:inherit;transition:border-color .3s;}
.more-link:hover{border-color:var(--teal-text);}
.more-link .t{color:var(--heading);font-family:'Fraunces',Georgia,serif;font-size:1.08rem;}
.more-link .d{display:block;font-size:.86rem;color:var(--body);margin-top:.15rem;}
.more-link .arrow{margin-left:auto;color:var(--teal-text);}

@media (prefers-reduced-motion:reduce){.kr-media img{transition:none;}.kr-media:hover img{transform:none;}}
/* phones: service cards as compact rows — the whole card is the link, so the "Läs mer" line becomes an arrow */
@media(max-width:40rem){
  .svc-grid{grid-template-columns:1fr;gap:.6rem;}
  .svc{display:grid;grid-template-columns:2rem 1fr 1.2rem;column-gap:.6rem;align-items:start;padding:1rem 1.1rem;}
  .svc .svc-n{grid-row:span 2;margin:.25rem 0 0;font-size:.9rem;}
  .svc .h3{font-size:1.1rem;grid-column:2;}
  .svc .desc{grid-column:2;margin-top:.3rem;font-size:.84rem;}
  .svc .cta{grid-column:3;grid-row:1/span 2;align-self:center;margin:0!important;padding:0!important;font-size:0;border:0!important;background:none!important;box-shadow:none!important;}
  .svc .desc{margin-bottom:0;}
  .svc:hover .cta .arrow{color:var(--teal-text);}
  .svc .cta .arrow{font-size:1.05rem;}
  .svc-help{padding:1.1rem 1.2rem;}
}

/* ---- intro band: lede + stats + project map of southern Sweden (always dark) ---- */
.intro-grid{display:grid;gap:2.5rem;align-items:center;}
@media(min-width:60rem){.intro-grid{grid-template-columns:minmax(0,1fr) minmax(0,31rem);gap:4rem;}}
.intro-stats{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;margin-top:2rem;}
.intro-stats .n{font-family:'Fraunces',Georgia,serif;font-size:2.3rem;line-height:1;color:var(--hero-heading,#EAF1F8);}
.intro-stats .l{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#9DB2C7;margin-top:.4rem;max-width:11rem;line-height:1.4;}
.intro-legend{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.5rem;font-size:.88rem;color:#C9D6E3;}
.intro-legend li{display:flex;align-items:center;gap:.6rem;}
.intro-legend i{flex:none;width:.85rem;height:.85rem;border-radius:50%;}
.intro-legend .own{background:#45D8C0;}
.intro-legend .sub{border:2px solid #45D8C0;}
.intro-legend .both{width:.5rem;height:.5rem;margin:0 .175rem;background:#45D8C0;outline:2px solid #45D8C0;outline-offset:2px;}
.intro-map{position:relative;margin:0;width:100%;max-width:31rem;justify-self:center;}
.intro-map svg{width:100%;height:auto;display:block;font-family:'Familjen Grotesk',system-ui,sans-serif;}
.intro-map .nb{fill:rgba(234,241,248,.035);stroke:rgba(234,241,248,.12);stroke-width:.8;}
.intro-map .se{fill:rgba(234,241,248,.075);stroke:rgba(234,241,248,.32);stroke-width:.9;}
.intro-map .mk{cursor:pointer;outline:none;}
.intro-map .mk .hit{fill:transparent;}
.intro-map .mk .halo{fill:#0B1B2E;}   /* thin dark edge: neighbouring places stay distinct where markers overlap */
.intro-map .mk-own .dot{fill:#45D8C0;transition:transform .2s;}
.intro-map .mk-own .ring{fill:none;stroke:#45D8C0;stroke-width:2;}
.intro-map .mk-sub .dot{fill:#0B1B2E;stroke:#45D8C0;stroke-width:2;}
.intro-map .mk:hover .dot,.intro-map .mk:focus-visible .dot{fill:#EAF1F8;stroke:#EAF1F8;}
.intro-map .mk:focus-visible .hit{stroke:#EAF1F8;stroke-width:2;stroke-dasharray:3 3;}
.intro-map .lbl{font-size:13px;fill:#EAF1F8;paint-order:stroke;stroke:#07131F;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none;}
.intro-map .lbl-ref{fill:#9DB2C7;font-size:11.5px;}
.intro-map .lbl-own{font-weight:600;}
@media(max-width:40rem){.intro-map .lbl{font-size:19px;stroke-width:5px;}.intro-map .lbl-ref,.intro-map .lbl-desk{display:none;}}
.intro-map figcaption{font-size:.8rem;color:#9DB2C7;margin-top:.75rem;text-align:center;}
.map-tip{position:absolute;z-index:5;max-width:16rem;padding:.7rem .85rem;border-radius:4px;background:#EAF1F8;color:#0B1B2E;font-size:.84rem;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none;display:flex;flex-direction:column;gap:.2rem;}
.map-tip.is-pinned{pointer-events:auto;}
.map-tip strong{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:1.05rem;}
.map-tip .go{color:#1F5F54;font-weight:600;margin-top:.15rem;}
.map-tip a{color:#1F5F54;font-weight:600;margin-top:.3rem;text-decoration:underline;text-underline-offset:3px;}
.map-tip[hidden]{display:none;}

/* ---- "Fler kundcase": an aligned index instead of a cloud of pills ---- */
.case-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:2rem;border-top:1px solid var(--border);}
@media(max-width:64rem){.case-index{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.25rem;}}
.case-index li{border-bottom:1px solid var(--border);}
.case-index a{display:flex;align-items:baseline;gap:.5rem;padding:.8rem 0;color:var(--heading);}
.case-index .t{font-size:.95rem;flex:1 1 auto;min-width:0;}
.case-index .c{font-size:.75rem;color:var(--muted);white-space:nowrap;}
.case-index a:hover .t,.case-index a:focus-visible .t{color:var(--teal-text);}
.case-index-all{margin-top:1.25rem;}
@media(max-width:40rem){.case-index .c{display:none;}.case-index a{padding:.75rem 0;}}

/* ---- phones: paired buttons get the same width, so they read as one deliberate group ---- */
@media(max-width:40rem){
  #hemsidor .web-btns,.hero-sub .row,#kontakt .row{flex-direction:column;align-items:stretch;}
  #hemsidor .web-btns>a,.hero-sub .row>a,#kontakt .row>a,.svc-help .btn-primary,.case-index-all{width:100%;justify-content:center;}
}
/* two headline figures: all jobs (own + subcontract) and towns */
.intro-stats{display:grid;grid-template-columns:repeat(2,max-content);gap:.9rem 3.5rem;max-width:34rem;}
.intro-stats .n{font-size:2.9rem;}
.intro-stats .l{max-width:none;}
@media(max-width:40rem){.intro-stats{column-gap:2.5rem;}.intro-stats .n{font-size:2.4rem;}.intro-stats .l{font-size:.68rem;letter-spacing:.06em;}}

/* ---- header on the start page: clear over the upper half of the hero, frosted after (8 Nov 2026) ---- */
#nav{transition:background-color .35s,-webkit-backdrop-filter .35s,backdrop-filter .35s,border-color .35s;}
#nav.hn-clear{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:transparent!important;}
#nav.hn-clear .bar{text-shadow:0 1px 10px rgba(0,0,0,.5);}

/* written client reactions under the video testimonials (8 Nov 2026) */
.kq-title{margin:3rem 0 0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.kq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 2.5rem;margin-top:1rem;}
.kq{margin:0;padding:1.25rem 1.35rem;border-left:2px solid var(--teal-text);background:var(--surface2);border-radius:0 4px 4px 0;}
.kq .kr-q{margin-top:0;font-size:1.02rem;}
@media(max-width:48rem){.kq-grid{grid-template-columns:minmax(0,1fr);}}