/* Self-hosted webfonts, latin subset (covers æ ø å). Generated by fetch_fonts.py. */ @font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/work-sans-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Carlito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/carlito-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-mono-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/anton-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} :root{ color-scheme: light; --brand-orange:#e20d1f; --brand-orange-dark:#a90916; --brand-ink:#0c1e38; --on-brand:#f5f7fb; --bg:#f2f4f8; --surface:#ffffff; --surface-2:#e8ecf3; --text:#15171c; --muted:#4a5063; --border:#dbe1ea; --shadow: 0 1px 2px rgba(21,23,28,.04), 0 8px 24px rgba(21,23,28,.06); --gold-1:#f6e7b8; --gold-2:#d9b968; --gold-3:#a9803a; --gold-text: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%); --silver-1:#f7f9fb; --silver-2:#c7d0d9; --silver-3:#8b96a3; --silver-text: linear-gradient(135deg, var(--silver-1) 0%, var(--silver-2) 45%, var(--silver-3) 100%); } /* Siden er designet som lyst tema uansett enhet — vi følger ikke telefonens/OS-ens mørke-modus-innstilling, slik at siden ser lik ut på PC og mobil. */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} } body{ margin:0; background:var(--bg); color:var(--text); font-family:'Work Sans', system-ui, -apple-system, sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block;} a{color:inherit;} .container{max-width:1180px; margin:0 auto; padding:0 24px;} h1,h2,h3{ font-family:'Carlito', 'Calibri', 'Segoe UI', sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance; margin:0; } .eyebrow{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-orange); display:flex; align-items:center; gap:.6em; } .eyebrow::before{ content:""; display:inline-block; width:18px; height:3px; background:var(--brand-orange); } .price{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;} .logo{display:flex; align-items:center; text-decoration:none; color:inherit; flex:none;} /* Logoen sto i en auto-kolonne i .nav-row og ble klemt sammen av «Bestill time»-knappen på smale skjermer. Fast høyde + min-width hindrer at bildet krymper, og høyden er hevet fra 42px. */ .logo-mark{height:42px; width:auto; min-width:174px; display:block;} /* mobil: nettere header — mindre logo, mindre knapp, mindre hamburger */ @media (max-width:900px){ .logo-mark{height:34px; min-width:141px;} } @media (max-width:420px){ .logo-mark{height:31px; min-width:129px;} } .logo-chip{ background:#fff; display:inline-flex; align-items:center; padding:10px 16px; border-radius:8px; } .logo-chip .logo-mark{height:32px;} /* ---------- header ---------- */ /* header is always light: the wordmark logo is fixed black-on-white, so it opts out of dark mode */ header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid #e7e5e2; } .nav-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:12px 0;} @media (max-width:900px){ .nav-row{gap:10px;} } .nav-row nav{justify-self:center;} .nav-links{display:flex; gap:24px; list-style:none; margin:0; padding:0;} .nav-links a{ font-size:1.02rem; font-weight:600; text-decoration:none; color:#5a5854; transition:color .15s; } .nav-links a:hover{color:#171614;} .nav-actions{display:flex; align-items:center; gap:18px; justify-self:end; margin-right:34px;} @media (max-width:900px){ .nav-actions{margin-right:0; gap:10px;} } /* knappen i headeren må aldri brekke over to linjer — den stjeler høyde fra logoen ved siden av */ /* knappen i headeren skal veie tyngre enn logoen */ .nav-actions .btn{white-space:nowrap;} /* stor knapp kun på mobil — på PC er den som den alltid har vært */ @media (max-width:900px){ .nav-actions .btn{padding:11px 18px; font-size:.88rem;} .menu-toggle svg{width:22px; height:22px;} } @media (max-width:480px){ .nav-actions{gap:8px;} .nav-actions .btn{padding:10px 14px; font-size:.85rem;} } /* Logoen har prioritet: under 380px krymper knappen og sidemargen i stedet, slik at logoen er like stor i headeren som i menyen. */ @media (max-width:380px){ .nav-actions .btn{padding:9px 13px; font-size:.8rem;} .menu-toggle{padding:2px;} .nav-actions{gap:6px;} } @media (max-width:380px){ .nav-row{padding-inline:12px; gap:6px;} } /* Under 345px (iPhone SE og eldre) blir begge logoene ett hakk mindre — header og meny holdes like store uansett bredde. */ @media (max-width:345px){ .nav-row{padding-inline:9px; gap:4px;} .nav-actions .btn{padding:9px 10px; font-size:.76rem; letter-spacing:-.01em;} .menu-toggle{padding:0;} .menu-toggle svg{width:22px; height:22px;} .logo-mark{height:28px; min-width:116px;} } .nav-phone{display:flex; align-items:center; gap:.5em; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.92rem; text-decoration:none; color:#171614;} .nav-phone svg{width:16px; height:16px;} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:12px 22px; font-weight:700; font-size:.92rem; border-radius:3px; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:transform .12s ease, box-shadow .12s ease, background-color .15s; white-space:nowrap; } .btn:active{transform:translateY(1px);} .btn-primary{background:var(--brand-orange); color:var(--on-brand);} .btn-primary:hover{background:var(--brand-orange-dark);} .btn-outline{border-color:var(--border); color:var(--text); background:transparent;} .btn-outline:hover{border-color:var(--brand-ink);} .btn-ghost-light{border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.06);} .btn-ghost-light:hover{background:rgba(255,255,255,.16);} .menu-toggle{display:none; background:none; border:0; color:#171614; padding:6px;} /* ---------- hero ---------- */ .hero{position:relative; overflow:hidden; background:var(--brand-ink); isolation:isolate;} .hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; } .hero-media picture, .hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(1) contrast(1.01); } .hero-scrim{ position:absolute; inset:0; z-index:1; background-image: radial-gradient(120% 90% at 100% 0%, rgba(9,21,43,0) 44%, rgba(9,21,43,.42) 100%), linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(9,23,45,.6) 68%, rgba(9,25,47,.95) 100%), linear-gradient(100deg, rgba(9,21,43,.68) 0%, rgba(9,21,43,.5) 34%, rgba(9,21,43,.24) 62%, rgba(9,21,43,.08) 100%); pointer-events:none; } /* unfiltered fade to the exact USP-banner navy, so the hero melts into the section below with no seam */ .hero::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, transparent 0%, transparent 62%, #0c1e38 96%, #0c1e38 100%); pointer-events:none; } /* soft colour-glow layer: brand orange, blended over the photo for a premium, "designed" feel */ .hero::after{ content:""; position:absolute; inset:0; z-index:2; background: radial-gradient(640px circle at 92% 4%, rgba(226,13,31,.38), transparent 60%); mix-blend-mode:screen; pointer-events:none; } .hero-inner{position:relative; z-index:3; padding:96px 0 76px;} .hero-eyebrow{ display:inline-flex; align-items:center; gap:.6em; color:#fff !important; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); padding:.5em 1.1em; border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-weight:400; } .hero-eyebrow::before{content:none;} .hero-eyebrow svg{width:15px; height:15px; color:var(--brand-orange); flex:none;} .hero h1{ color:#fff; background:linear-gradient(100deg, #ffffff 45%, #ffdfe1 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:clamp(2.6rem, 5.4vw, 4.6rem); line-height:1.18; margin:.6em 0 .5em; max-width:14ch; } .hero-lede{ color:#dfe4ef; font-size:1.14rem; max-width:46ch; margin:0 0 2rem; } .hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:1.8rem;} .hero-ctas .btn-primary:hover{transform:translateY(-1px);} .hero-ctas .btn-ghost-light:hover{transform:translateY(-1px);} .hero-divider{height:1px; background:rgba(255,255,255,.16); max-width:620px; margin:0 0 1.7rem;} .hero-stats{display:flex; flex-wrap:wrap; gap:30px 42px; margin-bottom:1.8rem;} .hero-stat-top{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:700; font-size:1.4rem; color:#fff; letter-spacing:-.01em; display:flex; align-items:center; gap:5px; } .hero-stat-stars svg{width:16px; height:16px; color:var(--brand-orange);} .hero-stat-sub{font-size:.84rem; color:#b7bdd2; margin-top:3px;} .trust-row{ display:flex; flex-wrap:wrap; gap:10px 12px; padding-top:0; margin-top:.4rem; border-top:none; color:#e7e6e4; font-size:.84rem; font-weight:600; } .trust-row span{ display:flex; align-items:center; gap:.5em; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:.5em .95em; border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .trust-row svg{width:15px; height:15px; color:var(--brand-orange); flex:none;} /* ---------- USP banner ---------- */ .usp{ background:linear-gradient(160deg, #0d1a33 0%, #0a1428 50%, #0c1e38 100%); color:var(--on-brand); position:relative; overflow:hidden; isolation:isolate; clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%); padding:44px 0 56px; } .usp::before{ content:""; position:absolute; inset:0; z-index:0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 84px); pointer-events:none; } .usp-inner{ position:relative; z-index:1; padding:20px 0 0; } .usp .eyebrow::before{content:none;} .usp-icon-mini{ display:flex; width:64px; height:48px; flex:none; align-items:center; justify-content:center; } .usp-icon-mini img{ width:100%; height:100%; object-fit:contain; display:block; } .usp .eyebrow{gap:.78em;} .gs-full-logo{display:block; height:47px; width:auto;} @media (min-width:901px){ .gs-full-logo{height:54px;} } .gs-full-logo--bmw{height:44px;} @media (min-width:901px){ .gs-full-logo--bmw{height:50px;} } .usp .eyebrow-text{ position:relative; font-family:'Carlito','Segoe UI',sans-serif; font-style:normal; font-weight:700; font-size:1.45rem; letter-spacing:-0.01em; padding:7px 0; } .usp .eyebrow-text::before, .usp .eyebrow-text::after{ content:""; position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, #8b96a3 0%, #eef1f5 20%, #c7d0d9 40%, #f7f9fb 60%, #c7d0d9 80%, #8b96a3 100%); } .usp .eyebrow-text::before{top:0;} .usp .eyebrow-text::after{bottom:0;} .usp h2{font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.16; max-width:22ch; margin-top:1.05em;} .usp p{margin:.6em 0 0; color:#cfcdc9; max-width:60ch; font-size:1rem;} .usp-cta{ position:relative; display:inline-flex; align-items:center; gap:9px; margin-top:1.3rem; padding-bottom:5px; color:var(--silver-2); font-weight:700; font-size:.97rem; letter-spacing:.005em; text-decoration:none; background:var(--silver-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .usp-cta::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--silver-text); } .usp-cta svg{width:17px; height:17px; color:var(--silver-2); transition:transform .3s cubic-bezier(.4,0,.2,1);} .usp-cta:hover svg{transform:translateX(4px);} /* ---------- sections ---------- */ section{padding:88px 0;} .section-head{max-width:640px; margin:0 0 3rem;} .section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:.45em;} .section-head p{color:var(--muted); font-size:1.05rem; margin:.7em 0 0;} /* services grid */ .svc-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; } .svc-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:26px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; position:relative; } .svc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;} .icon-badge{ display:flex; align-items:center; justify-content:center; flex:none; border-radius:50%; background:var(--brand-orange); color:#fff; } .svc-badge{width:46px; height:46px;} .svc-badge .svc-icon{width:24px; height:24px;} .fact-badge{width:36px; height:36px;} .fact-badge svg{width:18px; height:18px;} .svc-card h3{font-family:'Work Sans',sans-serif; font-weight:700; text-transform:none; font-size:1.06rem; letter-spacing:0;} .svc-card p{color:var(--muted); font-size:.93rem; margin:0; flex:1;} .svc-foot{display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid var(--border);} .svc-price{font-weight:600; font-size:.95rem;} .svc-tag{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600; letter-spacing:.06em; background:rgba(226,13,31,.12); color:var(--brand-orange); padding:4px 8px; border-radius:99px; text-transform:uppercase; } .svc-card.highlight{border-color:var(--brand-orange); } /* two-col band: financing + mobility guarantee */ .band{background:var(--surface-2);} .band-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden;} .band-cell{background:var(--surface); padding:40px 36px;} .band-cell .eyebrow{margin-bottom:1rem;} .band-cell h3{font-family:'Carlito','Calibri',sans-serif; font-size:1.5rem; text-transform:uppercase; margin-bottom:.6rem;} .band-cell p{color:var(--muted); margin:0;} .band-cell a.btn{margin-top:1.3rem;} /* about */ .about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;} .about-copy p{color:var(--muted); font-size:1.05rem; margin:0 0 1.1em;} .about-copy p:last-child{margin-bottom:0;} .about-facts{ display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); } .fact{display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--border);} .fact:last-child{border-bottom:0;} .fact div b{display:block; font-size:.94rem;} .fact div span{color:var(--muted); font-size:.88rem;} /* reviews */ .reviews-summary{ background:var(--brand-ink); color:var(--on-brand); border-radius:16px; padding:32px 40px; margin-bottom:30px; display:flex; align-items:center; flex-wrap:wrap; gap:24px 40px; } .g-mark{display:flex; align-items:center; gap:10px;} .g-mark svg{width:24px; height:24px;} .g-mark span{font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.1em; color:#cfcdc9; text-transform:uppercase; font-weight:600;} .rating-block{display:flex; align-items:center; gap:16px;} .rating-number{font-family:'Anton',sans-serif; font-size:2.5rem; line-height:1; color:#fff;} .rating-meta{display:flex; flex-direction:column; gap:5px;} .rating-count{font-size:.85rem; color:#cfcdc9;} .star-row{position:relative; width:106px; height:19px; flex:none;} .star-row .star-bg, .star-row .star-fg{position:absolute; inset:0; display:flex; gap:2px;} .star-row svg{width:19px; height:19px; flex:none;} .star-row .star-bg{color:rgba(255,255,255,.28);} .star-row .star-fg{color:#f2b400; overflow:hidden;} .reviews-summary .btn{margin-left:auto;} .reviews-note{width:100%; margin:0; font-size:.78rem; color:#94918b;} .review-track-wrap{position:relative;} .review-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 18px; margin:0 -4px; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--brand-orange) var(--surface-2); } .review-track::-webkit-scrollbar{height:6px;} .review-track::-webkit-scrollbar-track{ background:var(--surface-2); border-radius:999px; margin:0 4px; } .review-track::-webkit-scrollbar-thumb{ background:var(--brand-orange); border-radius:999px; } .review-track::-webkit-scrollbar-thumb:hover{background:var(--brand-orange-dark);} .review-card{ flex:0 0 296px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; } .review-top{display:flex; align-items:center; justify-content:space-between; gap:10px;} .review-stars{color:#f2b400; font-size:.85rem; letter-spacing:2px;} .review-time{font-size:.76rem; color:var(--muted); white-space:nowrap;} .review-quote{color:var(--text); font-size:.92rem; line-height:1.55; margin:0; flex:1;} .review-who{display:flex; flex-direction:column; gap:1px; border-top:1px solid var(--border); padding-top:12px;} .review-who b{font-size:.87rem; font-weight:700;} .review-who span{font-size:.76rem; color:var(--muted);} .rv-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; } .rv-arrow svg{width:18px; height:18px;} .rv-prev{left:-14px;} .rv-next{right:-14px;} /* contact */ .contact-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:40px; align-items:stretch;} .contact-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:32px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:22px; } .contact-row{display:flex; gap:16px; align-items:flex-start;} .contact-row svg{width:20px; height:20px; color:var(--brand-orange); flex:none; margin-top:2px;} .contact-row a, .contact-row div{font-size:.98rem;} .contact-row b{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-bottom:2px;} .hours-table{width:100%; border-collapse:collapse; font-size:.94rem;} .hours-table td{padding:4px 0; } .hours-table td:last-child{text-align:right; font-family:'IBM Plex Mono',monospace; color:var(--muted);} .map-wrap{ border-radius:12px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); min-height:340px; position:relative; display:block; background:var(--surface-2); } .map-frame{width:100%; height:100%; min-height:340px; border:0; display:block;} .map-pin{ position:absolute; left:50%; top:42%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:1; } .map-pin svg{width:46px; height:46px; color:var(--brand-orange); filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));} .map-cta{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:1; display:inline-flex; align-items:center; gap:.5em; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); padding:11px 20px; border-radius:99px; font-weight:700; font-size:.9rem; white-space:nowrap; text-decoration:none; color:inherit; } .map-cta:hover{border-color:var(--brand-orange); color:var(--brand-orange);} /* static placeholder variant used only in the single-file preview build, where the sandboxed preview can't load an external Google Maps iframe */ .map-wrap--static{ background: radial-gradient(circle at 50% 42%, rgba(195,31,43,.16) 0%, transparent 45%), repeating-linear-gradient(0deg, transparent 0 39px, var(--border) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, var(--border) 39px 40px), var(--surface-2); } .map-wrap--static::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--surface-2) 92%, transparent) 100%); } .social-row{display:flex; gap:10px; margin-top:auto; padding-top:6px;} .social-btn{ width:38px; height:38px; border-radius:8px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; transition:.15s; } .social-btn:hover{color:var(--brand-orange); border-color:var(--brand-orange);} .social-btn svg{width:18px; height:18px;} /* footer */ footer{background:var(--brand-ink); color:#cfcdc9; padding:56px 0 28px;} .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.14);} .footer-desc{margin-top:14px; max-width:34ch; font-size:.92rem; color:#a9b0c9; text-wrap:pretty;} .footer-social-row{display:flex; gap:8px; margin-top:18px;} .footer-social{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:7px; border:1px solid rgba(255,255,255,.16); color:#cfcdc9; text-decoration:none; transition:.15s; } .footer-social svg{width:15px; height:15px;} .footer-social:hover{color:#fff; border-color:rgba(255,255,255,.35);} .footer-col h4{font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:#94918b; margin:0 0 14px;} .footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;} .footer-col a{text-decoration:none; font-size:.92rem; color:#ececea;} .footer-col a:hover{color:#fff;} .footer-contact-row{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;} .footer-contact-row:last-child{margin-bottom:0;} .footer-contact-row svg{width:18px; height:18px; color:#fff; flex:none; margin-top:2px;} .footer-contact-row a{font-size:.92rem; color:#ececea; text-decoration:none;} .footer-contact-row a:hover{color:#fff;} .footer-hours{display:flex; flex-direction:column; gap:2px; font-size:.92rem; color:#ececea;} .footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; padding-top:22px; font-size:.82rem; color:#94918b; } .footer-bottom-right{display:flex; align-items:center; flex-wrap:wrap; gap:10px 8px;} .footer-legal{display:flex; flex-wrap:wrap; gap:18px;} .footer-legal a{font-size:.82rem; color:#94918b; text-decoration:none;} .footer-legal a:hover{color:#fff;} /* back-to-top */ .back-to-top{ position:fixed; right:24px; bottom:24px; z-index:40; width:46px; height:46px; border-radius:50%; background:var(--brand-ink); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); text-decoration:none; transition:transform .15s ease, background-color .15s ease; } .back-to-top svg{width:20px; height:20px;} .back-to-top:hover{background:var(--brand-orange); transform:translateY(-2px);} @media (max-width:560px){ .back-to-top{right:16px; bottom:16px; width:40px; height:40px;} } /* 4 kort per rad er for trangt under ~1100px — tre der i stedet */ @media (min-width:901px) and (max-width:1100px){ .svc-grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:900px){ .nav-links, .nav-phone-wrap{display:none;} .menu-toggle{display:flex;} .svc-grid{grid-template-columns:repeat(2,1fr);} .band-grid, .about-grid, .contact-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr; gap:28px;} .footer-bottom{justify-content:center; text-align:center;} .footer-bottom-right{justify-content:center;} .footer-legal{justify-content:center;} .reviews-summary{padding:28px 24px;} .reviews-summary .btn{margin-left:0; width:100%;} .review-track-wrap{display:grid; grid-template-columns:1fr 44px 44px 1fr; column-gap:14px; row-gap:10px;} .review-track{grid-column:1 / -1; grid-row:1;} .rv-arrow{position:static; transform:none; grid-row:2; width:44px; height:44px;} .rv-prev{grid-column:2;} .rv-next{grid-column:3;} .rv-arrow:disabled{opacity:.35; cursor:default;} } @media (max-width:560px){ .review-card{flex-basis:calc(100% - 8px);} /* to tjenestekort per rad på telefon — trangere kort, så teksten får plass */ .svc-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;} .svc-card{padding:18px 15px; gap:11px; border-radius:9px;} .svc-top{flex-direction:column; align-items:flex-start; gap:8px;} .svc-badge{width:38px; height:38px;} .svc-badge .svc-icon{width:20px; height:20px;} .svc-card h3{font-size:.97rem; line-height:1.25;} .svc-card p{font-size:.84rem; line-height:1.45;} /* lange enkeltord («Mopedbilservice») må kunne brytes i et smalt kort */ .svc-card h3, .svc-card p{overflow-wrap:break-word; hyphens:auto;} } @media (max-width:560px){ .svc-tag{font-size:.6rem; padding:3px 6px; letter-spacing:.04em;} .svc-foot{flex-direction:column; align-items:flex-start; gap:2px; padding-top:8px;} .svc-foot span{font-size:.82rem !important;} .svc-price{font-size:.88rem;} .svc-more{font-size:.86rem;} section{padding:64px 0;} .hero-inner{padding:64px 0 52px;} .hero-eyebrow{font-size:.68rem; letter-spacing:.015em; padding:.38em .55em; gap:.32em; white-space:nowrap;} .hero-eyebrow svg{width:13px; height:13px;} /* shorter photo band on phones so the image isn't stretched/zoomed to fill the whole (much taller) stacked hero — it fades into the plain hero background below via the existing gradient, so the transition stays clean */ .hero-media, .hero-scrim{height:460px; bottom:auto;} .hero-media img{object-position:center 34%;} } @media (min-width:360px) and (max-width:389px){ .hero-eyebrow{font-size:.74rem;} } @media (min-width:390px) and (max-width:560px){ .hero-eyebrow{font-size:.82rem;} } /* de smaleste telefonene: knip inn tjenestekortene så ordene slipper å brekke midt i når det står to kort per rad */ @media (max-width:385px){ .svc-grid{gap:10px;} .svc-card{padding:15px 11px;} .svc-card h3{font-size:.88rem;} .svc-card p{font-size:.79rem;} } @media (max-width:349px){ .svc-card{padding:14px 9px;} .svc-card h3{font-size:.8rem;} .svc-card p{font-size:.74rem;} .svc-tag{font-size:.55rem; padding:3px 5px;} } /* ============ Tjenester dropdown (nav) ============ */ .nav-item{position:relative;} .nav-item > a{display:flex; align-items:center; gap:6px;} .nav-chevron{width:10px; height:10px; transition:transform .15s ease;} .nav-item:hover .nav-chevron, .nav-item.open .nav-chevron{transform:rotate(180deg);} .nav-dropdown{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px); background:#fff; border:1px solid #e7e5e2; border-radius:12px; box-shadow:0 12px 28px rgba(21,23,28,.14); padding:10px; width:470px; /* større menytekst trenger mer plass per kolonne */ display:grid; grid-template-columns:1fr 1fr; gap:2px; opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease, visibility .15s; z-index:60; } .nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .nav-dropdown a{ display:block; padding:10px 12px; border-radius:7px; font-size:.94rem; font-weight:600; color:#3a3834; text-decoration:none; line-height:1.3; } .nav-dropdown a:hover{background:#f2f4f8; color:var(--brand-orange);} /* ============ Mobile menu (full-screen) ============ */ #mobileMenu{ position:fixed; inset:0; z-index:100; background:#fff; display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; } #mobileMenu.open{opacity:1; visibility:visible; transform:none;} body.mm-lock{overflow:hidden;} .mm-head{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border);} .mm-head .logo-mark{height:34px; min-width:141px;} @media (max-width:420px){ .mm-head .logo-mark{height:31px; min-width:129px;} } @media (max-width:345px){ .mm-head .logo-mark{height:28px; min-width:116px;} } .mm-close{background:none; border:0; padding:8px; margin-right:-8px; color:var(--brand-ink); cursor:pointer;} .mm-close svg{width:28px; height:28px; display:block;} .mm-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;} .mm-row{ display:flex; align-items:center; gap:16px; width:100%; /* litt høyere rader, så menyen fyller skjermen i stedet for å etterlate et stort tomrom over knappene nederst */ padding:20px; border:0; border-bottom:1px solid var(--border); background:none; font:inherit; font-size:1.13rem; font-weight:700; color:var(--brand-ink); text-decoration:none; text-align:left; cursor:pointer; } .mm-group .mm-row{border-bottom:0;} .mm-group{border-bottom:1px solid var(--border);} .mm-row span{flex:1;} .mm-row:active, .mm-row:hover{background:var(--bg);} .mm-ic{width:24px; height:24px; flex:none; color:var(--brand-orange);} .mm-chev{width:18px; height:18px; flex:none; color:var(--muted); transition:transform .2s ease;} .mm-svc-toggle[aria-expanded="true"] .mm-chev{transform:rotate(180deg);} .mm-svc-list{list-style:none; margin:0; padding:0 20px 12px 60px;} .mm-svc-list a{display:block; padding:10px 0; font-size:.98rem; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:1px solid #eef1f5;} .mm-svc-list li:last-child a{border-bottom:0;} .mm-svc-list a:hover{color:var(--brand-orange);} /* knappene ved siden av hverandre; adresse og åpningstider går i full bredde */ .mm-foot{ background:var(--bg); border-top:1px solid var(--border); /* luften ligger over knappene og under åpningstidene, ikke mellom linjene */ padding:22px 20px calc(26px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr; column-gap:10px; row-gap:20px; } .mm-foot > .mm-info, .mm-foot > .mm-info-link{grid-column:1 / -1;} .mm-cta{width:100%; padding:12px 6px; font-size:.86rem; gap:.4em;} /* de to knappene nederst i menyen lå klistret inntil hverandre */ .mm-cta svg{width:16px; height:16px;} .mm-info{display:block; margin:10px 0 0; font-size:.95rem; font-weight:600; color:var(--muted); text-decoration:none;} @media (min-width:901px){ #mobileMenu{display:none;} } /* ============ Service cards: link + hover + "Les mer" ============ */ a.svc-card{ text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } a.svc-card:hover{ transform:translateY(-3px); box-shadow:0 4px 10px rgba(21,23,28,.08), 0 18px 34px rgba(21,23,28,.10); border-color:var(--brand-orange); } .svc-more{ display:inline-flex; align-items:center; gap:.4em; font-weight:700; font-size:.88rem; color:var(--brand-orange); } a.svc-card:hover .svc-more{text-decoration:underline;} /* ============ "Slik fungerer et verkstedbesøk" steps ============ */ .steps-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:22px; margin-top:2.6rem;} .step-card{display:flex; flex-direction:column; gap:10px;} .step-num{ width:38px; height:38px; border-radius:50%; background:var(--brand-orange); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1rem; } .step-card h3{font-family:'Carlito','Calibri',sans-serif; font-size:1.02rem; text-transform:none; letter-spacing:0;} .step-card p{color:var(--muted); font-size:.88rem; margin:0;} @media (max-width:900px){ .steps-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .steps-grid{grid-template-columns:1fr;} } /* ============ Relaterte artikler ============ */ .articles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:2.6rem;} a.article-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } a.article-card:hover{transform:translateY(-3px); border-color:var(--brand-orange);} .article-thumb{height:148px; display:flex; align-items:center; justify-content:center; background:var(--brand-ink);} .article-thumb svg{width:42px; height:42px; color:var(--brand-orange); opacity:.95;} .article-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1;} .article-meta{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-orange); font-weight:600;} .article-body h3{font-family:'Carlito','Calibri',sans-serif; font-size:1.06rem; text-transform:none; letter-spacing:0; line-height:1.32;} .article-body p{color:var(--muted); font-size:.87rem; margin:0; flex:1;} .article-more{font-size:.85rem; font-weight:700; color:var(--brand-orange); margin-top:8px;} @media (max-width:900px){ .articles-grid{grid-template-columns:1fr;} } /* ============ "Alt bilen trenger, på ett sted" — nærområde ============ */ .area-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:2.4rem;} .area-card{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px 24px 24px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .area-card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg, var(--brand-orange), var(--brand-orange-dark)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .area-card:hover{ transform:translateY(-4px); box-shadow:0 4px 10px rgba(21,23,28,.08), 0 18px 34px rgba(21,23,28,.10); border-color:var(--brand-orange); } .area-card:hover::before{transform:scaleX(1);} .area-card-addr{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-orange); font-weight:600; margin-top:16px; } .area-card-addr svg{width:12px; height:12px;} .area-card h3{margin:.4em 0 .3em; font-family:'Work Sans',sans-serif; font-weight:700; text-transform:none; letter-spacing:0; font-size:1.05rem;} .area-card p{margin:0; color:var(--muted); font-size:.9rem;} .area-note{ display:flex; align-items:flex-start; gap:10px; margin-top:1.7rem; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px 20px; font-size:.9rem; color:var(--muted); } .area-note svg{width:18px; height:18px; color:var(--brand-orange); flex:none; margin-top:1px;} @media (max-width:900px){ .area-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .area-grid{grid-template-columns:1fr;} } /* ============ Service detail pages ============ */ .svc-breadcrumb{font-size:.82rem; color:var(--muted); margin-bottom:1.6rem;} .svc-breadcrumb a{color:var(--muted); text-decoration:none;} .svc-breadcrumb a:hover{color:var(--brand-orange);} .svc-hero{background:var(--brand-ink); color:var(--on-brand); padding:52px 0 60px;} .svc-hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;} .svc-price-chip{ display:inline-flex; align-items:center; gap:.6em; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:9px 18px; border-radius:99px; margin-bottom:1.5rem; font-size:.88rem; } .svc-price-chip b{font-family:'IBM Plex Mono',monospace; font-weight:600;} .svc-hero h1{color:#fff; font-size:clamp(2rem,3.8vw,3rem); margin:.35em 0 .5em; line-height:1.14; max-width:17ch;} .svc-hero-lede{color:#dfe4ef; font-size:1.05rem; max-width:52ch; margin:0 0 1.7rem;} .svc-hero-ctas{display:flex; flex-wrap:wrap; gap:14px;} .svc-visual{ aspect-ratio:4/3; border-radius:16px; background:linear-gradient(155deg, rgba(226,13,31,.24), rgba(226,13,31,.02) 60%), rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; } .svc-visual svg{width:36%; height:36%; color:var(--brand-orange);} .svc-body-grid{display:grid; grid-template-columns:1.55fr .95fr; gap:56px; align-items:start;} .svc-content h2{font-size:1.4rem; margin:1.9em 0 .6em;} .svc-content h2:first-child{margin-top:0;} .svc-content p{color:var(--muted); font-size:1.02rem; margin:0 0 1em;} .svc-content ul{margin:0 0 1.1em; padding-left:1.2em; color:var(--muted); font-size:1.02rem; display:flex; flex-direction:column; gap:.5em;} .svc-content ul li::marker{color:var(--brand-orange);} .svc-side{position:sticky; top:96px; display:flex; flex-direction:column; gap:18px;} .svc-side-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:26px; box-shadow:var(--shadow);} .svc-side-card h4{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; font-weight:600;} .svc-side-price{font-family:'IBM Plex Mono',monospace; font-size:1.55rem; font-weight:600; margin-bottom:4px;} .svc-side-note{color:var(--muted); font-size:.85rem; margin:0 0 18px;} .svc-side-card .btn{width:100%;} .svc-side-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.87rem; color:var(--muted);} .svc-side-list li{display:flex; gap:.6em; align-items:flex-start;} .svc-side-list svg{width:16px; height:16px; color:var(--brand-orange); flex:none; margin-top:2px;} .faq-item{border-top:1px solid var(--border); padding:18px 0;} .faq-item:first-child{border-top:0; padding-top:0;} .faq-item h3{font-family:'Carlito','Calibri',sans-serif; font-size:1.01rem; text-transform:none; letter-spacing:0; margin-bottom:.5em;} .faq-item p{color:var(--muted); font-size:.95rem; margin:0;} .svc-cta-band{ position:relative; isolation:isolate; overflow:hidden; background:var(--brand-ink); color:var(--on-brand); padding:64px 0 58px; text-align:center; } .svc-cta-band::before{ content:""; position:absolute; inset:0; z-index:0; background: radial-gradient(58% 78% at 50% 46%, rgba(226,13,31,.22), transparent 68%); pointer-events:none; } .svc-cta-band .container{position:relative; z-index:1;} .svc-cta-band .eyebrow{display:inline-flex; margin:0 auto 1.1rem;} .svc-cta-band h2{color:#fff; font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:.55em;} .svc-cta-band p{color:#cfcdc9; margin:0 0 1.5rem;} .related-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:1.8rem;} @media (max-width:900px){ .svc-hero-grid{grid-template-columns:1fr;} .svc-visual{display:none;} .svc-body-grid{grid-template-columns:1fr;} .svc-side{position:static;} .related-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .related-grid{grid-template-columns:1fr;} } /* ---------- BMW-spesialist ---------- */ .bmw-hero{position:relative; overflow:hidden; background:var(--brand-ink); isolation:isolate; padding:0;} .bmw-hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; } .bmw-hero-media picture, .bmw-hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 46%; filter:saturate(1.08) contrast(1.03); animation:bmwHeroZoom 26s ease-in-out infinite alternate; } .bmw-hero-scrim{ position:absolute; inset:0; z-index:1; background-image: radial-gradient(640px circle at 90% 4%, rgba(217,185,104,.22), transparent 60%), linear-gradient(100deg, rgba(9,12,22,.72) 0%, rgba(9,12,22,.5) 36%, rgba(10,13,24,.22) 66%, rgba(13,17,30,.06) 100%), linear-gradient(to bottom, rgba(9,12,22,.02) 0%, rgba(9,12,22,.3) 66%, rgba(9,12,22,.66) 100%); pointer-events:none; } @keyframes bmwHeroZoom{ from{transform:scale(1);} to{transform:scale(1.06);} } @media (max-width:640px){ .bmw-hero-media img{object-position:center top;} } /* soft gold glow, echoes the GS-badge accent for a "designed" feel */ .bmw-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(560px circle at 92% 2%, rgba(217,185,104,.22), transparent 60%); mix-blend-mode:screen; pointer-events:none; } .bmw-hero-grid, .bmw-hero-inner{position:relative; z-index:2;} .bmw-hero-inner{position:relative; padding:60px 0 132px; max-width:660px;} .bmw-hero-grid{position:relative; padding:0;} .bmw-hero-grid .bmw-hero-inner{padding:60px 0 132px; max-width:660px;} .bmw-hero .svc-breadcrumb a{color:#cfd5e6;} .bmw-hero .svc-breadcrumb{color:#9aa3ba; margin-bottom:3.2rem; font-size:.92rem;} .gs-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(201,162,39,.14); border:1px solid rgba(216,180,80,.55); color:#e6cd7e; padding:8px 16px; border-radius:99px; font-family:'IBM Plex Mono',monospace; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.3rem; } .gs-badge svg{width:14px; height:14px;} .gs-badge-text{ background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .silver-lockup{ display:inline-flex; align-items:center; gap:.65em; margin-bottom:1.4rem; } .silver-lockup-icon{ display:flex; width:59px; height:44.25px; flex:none; align-items:center; justify-content:center; } .silver-lockup-icon img{width:100%; height:100%; object-fit:contain; display:block;} .silver-lockup-text{ position:relative; font-family:'Carlito','Segoe UI',sans-serif; font-style:normal; font-weight:900; font-size:1.45rem; letter-spacing:-0.01em; text-transform:uppercase; padding:6px 0; } .word-blue{ color:#377ba8; font-weight:900; -webkit-text-stroke:.9px rgba(20,24,30,.7); } .word-silver{ font-weight:900; background: linear-gradient(180deg, #8b96a3 0%, #ffffff 5%, #ffffff 10%, #dde3e9 15%, #eef1f5 20%, #ffffff 25%, #ffffff 30%, #dde3e9 35%, #d3dae1 40%, #c7d0d9 45%, #b0bbc7 50%, #9aa6b2 55%, #a6b1bd 60%, #c2ccd6 65%, #eef1f5 70%, #ffffff 75%, #ffffff 80%, #e6eaf0 85%, #d9e0e6 90%, #dbe1e7 95%, #8b96a3 100%); background-size:100% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; -webkit-text-stroke:.9px rgba(20,24,30,.7); filter:drop-shadow(0 0 4px rgba(238,241,245,.5)); } .silver-lockup-text::before, .silver-lockup-text::after{ content:""; position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, #8b96a3 0%, #eef1f5 20%, #c7d0d9 40%, #f7f9fb 60%, #c7d0d9 80%, #8b96a3 100%); } .silver-lockup-text::before{top:0;} .silver-lockup-text::after{bottom:0;} .bmw-hero h1{color:#fff; font-size:clamp(2.2rem,4vw,3.05rem); margin:0 0 .5em; line-height:1.16;} .bmw-hero-sub{ background:var(--silver-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; font-weight:700; font-size:1.12rem; margin:0 0 .9em; letter-spacing:.01em; } .bmw-hero-lede{color:#cdd3e2; font-size:1.12rem; max-width:54ch; margin:0 0 1.8rem;} .bmw-hero-ctas{display:flex; flex-wrap:wrap; gap:14px;} @media (max-width:900px){ .bmw-hero-grid .bmw-hero-inner{padding:36px 0 48px;} .bmw-hero .svc-breadcrumb{margin-bottom:1.6rem;} } @media (max-width:560px){ .bmw-hero h1{font-size:1.85rem; line-height:1.24;} .bmw-hero-sub{font-size:1rem;} .bmw-hero-lede{font-size:1rem; line-height:1.55;} } /* Desktop-only enlargement: bigger, more confident hero on wide screens. Scoped to min-width so the mobile crop of bmw-ix-hero-mobile.jpg (tuned to exact line-wrap heights) is never affected by these size changes. */ @media (min-width:901px){ .silver-lockup-icon{width:67px; height:50.25px;} .silver-lockup-text{font-size:1.6rem;} .bmw-hero h1{font-size:clamp(2.35rem,3.6vw,3.45rem); line-height:1.14;} .bmw-hero-sub{font-size:1.2rem;} .bmw-hero-lede{font-size:1.18rem; line-height:1.55; max-width:56ch;} .bmw-hero-ctas .btn{padding:14px 26px; font-size:.98rem;} } .bmw-intro{max-width:74ch;} .bmw-benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;} .bmw-benefit-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:26px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; } .bmw-benefit-card h3{font-family:'Work Sans',sans-serif; font-weight:700; text-transform:none; letter-spacing:0; font-size:1.04rem;} .bmw-benefit-card p{font-size:.9rem; color:var(--muted); margin:0;} .bmw-location{ background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:34px; margin-top:8px; } .bmw-location-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:start;} .bmw-location-list{list-style:none; margin:0; padding:0; display:grid; gap:13px;} .bmw-location-list li{display:flex; gap:11px; align-items:flex-start; font-size:.92rem; line-height:1.5;} .bmw-location-list li b{color:var(--text);} .bmw-location-list svg{width:19px; height:19px; color:var(--brand-orange); flex:none; margin-top:2px;} @media (max-width:900px){ .bmw-benefits-grid{grid-template-columns:repeat(2,1fr);} .bmw-location-grid{grid-template-columns:1fr;} } @media (max-width:560px){ .bmw-benefits-grid{grid-template-columns:1fr;} } /* =========================================================================== Additions to the original stylesheet. Kept in a separate file so the inherited design stays readable and any of this can be reverted on its own. Appended after site.css at build time. =========================================================================== */ /* --- colour: three text colours in the original failed WCAG AA ------------- #f2b400 stars on white = 1.86:1 (needs 4.5:1) #e20d1f eyebrow on #f2f4f8 = 4.42:1 #e20d1f tag on #fce2e4 = 3.98:1 The brand red stays exactly as it is for fills, borders and buttons, where it is not text and the requirement does not apply. These tokens are only ever used for small text on a light background. ------------------------- */ :root{ --brand-orange-text:#c00a1a; /* 5.8:1 on the page bg, 5.2:1 on the red tint */ --star-on-light:#8a5a00; /* 5.9:1 on white */ } .eyebrow{color:var(--brand-orange-text);} .svc-tag{color:var(--brand-orange-text);} .svc-more, .article-more, .article-meta{color:var(--brand-orange-text);} .review-stars{color:#f2b400;} /* the eyebrow on a dark band is white already — do not darken it there */ .hero-eyebrow, .usp .eyebrow, .svc-cta-band .eyebrow, .bmw-hero .eyebrow{ color:#fff; } /* --- keyboard focus -------------------------------------------------------- The original stylesheet contained no :focus rule at all, so focus fell back to the UA default — a thin dark ring that is invisible on the navy hero and on every dark band. WCAG 2.4.7. ---------------------------------------- */ :focus-visible{ outline:3px solid var(--brand-orange); outline-offset:2px; border-radius:2px; } .hero :focus-visible, .usp :focus-visible, .svc-hero :focus-visible, .bmw-hero :focus-visible, .svc-cta-band :focus-visible, footer :focus-visible, #mobileMenu :focus-visible{ outline:3px solid #fff; outline-offset:3px; } /* --- skip link ------------------------------------------------------------- */ .skip-link{ /* fixed, not absolute: an absolutely-positioned skip link sits at the top of the *document*, so tabbing into a page that is already scrolled reveals it off-screen. */ position:fixed; left:8px; top:-64px; z-index:100; background:var(--brand-ink); color:#fff; padding:12px 20px; border-radius:0 0 4px 4px; font-weight:700; font-size:.95rem; text-decoration:none; transition:top .15s ease; } .skip-link:focus{top:0;} /* --- sticky header vs. anchor targets -------------------------------------- header is position:sticky and ~70px tall, so any in-page anchor landed underneath it. ---------------------------------------------------------- */ /* scroll-padding on the scroll container is enough on its own; adding scroll-margin to the target as well offsets twice and lands the anchor ~190px below the header instead of just under it. */ html{scroll-padding-top:92px;} /* --- call-to-action pairs -------------------------------------------------- Every "book" button used to be a tel: link, which does nothing on a desktop and nothing at all outside 08-16. Each one is now a pair: call, or e-mail. */ .cta-pair{display:flex; flex-wrap:wrap; gap:12px;} .cta-pair .btn{flex:0 1 auto;} /* buttons carry icons in several places and the base .btn rule never sized them, so an inline with no width attribute collapsed or blew up */ .btn svg{width:17px; height:17px; flex:none;} .svc-side-card .cta-pair{flex-direction:column; align-items:stretch;} .svc-side-card .cta-pair .btn{width:100%;} .svc-cta-band .cta-pair{justify-content:center;} @media (max-width:560px){ .cta-pair{flex-direction:column; align-items:stretch;} .cta-pair .btn{width:100%;} } /* --- breadcrumbs as a real list -------------------------------------------- */ .svc-breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.45em; } .svc-breadcrumb li{display:flex; align-items:center; gap:.45em;} .svc-breadcrumb li + li::before{content:"/"; opacity:.5;} /* mark the current crumb by weight, not by dimming it — dimming put it under 4.5:1 on the light background */ .svc-breadcrumb [aria-current="page"]{color:var(--text); font-weight:600;} /* --- navigation state ------------------------------------------------------ */ .nav-links a[aria-current="page"]{ color:var(--brand-ink); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; text-decoration-color:var(--brand-orange); } /* the services trigger is a does not stop the page behind a modal from scrolling in iOS Safari. Pinning the body does. */ body.mm-lock{ overflow:hidden; position:fixed; inset:0; width:100%; } /* visually hidden, but read out */ .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* the sidebar and footer used

directly under an

, skipping a level. They are

now and need to keep the size they had. */ .svc-side-card h3{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem; } .footer-col h3{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 1rem; } /* the location card is a styled card, not a map that failed to load */ .map-wrap--static .map-addr{ position:absolute; left:0; right:0; top:58%; text-align:center; padding:0 20px; font-weight:700; color:var(--text); } .map-wrap--static .map-addr span{ display:block; font-weight:500; font-size:.88rem; color:var(--muted); margin-top:.2rem; } /* --- breadcrumbs on the dark hero ------------------------------------------- .svc-breadcrumb used var(--muted) (#4a5063), a token meant for light backgrounds. On the navy hero that is 1.5:1 — effectively invisible. */ .svc-hero .svc-breadcrumb, .svc-hero .svc-breadcrumb a, .svc-hero .svc-breadcrumb [aria-current="page"]{color:#a8b2c4;} /* 7.8:1 */ .svc-hero .svc-breadcrumb a:hover{color:#fff;} .svc-hero .svc-breadcrumb [aria-current="page"]{color:#c7cede;} .bmw-hero .svc-breadcrumb [aria-current="page"]{color:#cfd5e6;} /* the reviews strip is a horizontally scrollable region; it needs to be reachable and scrollable from the keyboard, not only by dragging */ .review-track:focus-visible{outline:3px solid var(--brand-orange); outline-offset:4px;} /* the opening-hours rows became for screen readers; keep the cells looking exactly as they did as */ .hours-table th{padding:4px 0; text-align:left; font-weight:600;} /* --- "verdt å lese" card in the service sidebar ---------------------------- */ .svc-side-links{list-style:none; margin:0; padding:0; display:grid; gap:.7rem;} .svc-side-links a{ display:flex; align-items:flex-start; gap:.5em; font-size:.92rem; font-weight:600; line-height:1.4; color:var(--text); text-decoration:none; } .svc-side-links a:hover{color:var(--brand-orange-text); text-decoration:underline;} .svc-side-links svg{width:15px; height:15px; flex:none; margin-top:.25em; color:var(--brand-orange);} /* --- back-to-top ------------------------------------------------------------ Hidden until there is something to scroll back from, so it stops covering the footer links at rest. Shown unconditionally when JS is off, where it is a plain #top link and harmless. */ .back-to-top{opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s, transform .15s ease, background-color .15s ease;} .back-to-top.is-visible{opacity:1; visibility:visible;} /* --- navigation fit -------------------------------------------------------- Adding "Artikler" (it was in the mobile menu and the footer but missing from the desktop bar) makes six items, which wrapped to two lines between the 900px breakpoint and ~1000px. Tighten the gap there rather than drop a link. */ @media (min-width:901px) and (max-width:1023px){ .nav-links{gap:16px;} .nav-links a, .nav-links .nav-svc-toggle{font-size:.86rem;} .nav-actions{gap:12px;} } /* =========================================================================== Flerstegs timebestilling ("ett spørsmål om gangen") Markupen bygges av assets/js/site.js — alt som trengs her er stilene. =========================================================================== */ .lead-backdrop{ position:fixed; inset:0; z-index:1000; background:rgba(8,16,30,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center; padding:0; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s; } .lead-backdrop.open{opacity:1; visibility:visible;} @media (min-width:640px){ .lead-backdrop{align-items:center; padding:28px;} } body.lead-lock{overflow:hidden;} .lead-modal{ background:var(--surface); width:100%; max-width:560px; border-radius:14px 14px 0 0; box-shadow:0 24px 70px rgba(8,16,30,.4); display:flex; flex-direction:column; max-height:94vh; max-height:94dvh; transform:translateY(24px); transition:transform .24s cubic-bezier(.2,.8,.3,1); overflow:hidden; } .lead-backdrop.open .lead-modal{transform:none;} @media (min-width:640px){ .lead-modal{border-radius:14px;} } /* ---- topplinje: tilbake, framdrift, lukk ---- */ .lead-top{ display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); } .lead-iconbtn{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:none; border:0; border-radius:8px; color:var(--muted); cursor:pointer; transition:background-color .15s, color .15s; } .lead-iconbtn:hover{background:var(--surface-2); color:var(--text);} .lead-iconbtn svg{width:22px; height:22px;} .lead-iconbtn[hidden]{visibility:hidden; display:flex;} .lead-progress{display:flex; flex-direction:column; align-items:center; gap:7px;} .lead-step-label{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .lead-dots{display:flex; gap:6px;} .lead-dot{width:7px; height:7px; border-radius:50%; background:var(--border); transition:background-color .25s, transform .25s;} .lead-dot.done{background:var(--brand-orange);} .lead-dot.now{background:var(--brand-orange); transform:scale(1.5);} /* ---- selve spørsmålet ---- */ .lead-body{padding:28px 24px 26px; overflow-y:auto; -webkit-overflow-scrolling:touch;} @media (min-width:640px){ .lead-body{padding:36px 36px 32px;} } .lead-q{ font-family:'Carlito','Calibri','Segoe UI',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(1.55rem, 5.6vw, 2.1rem); line-height:1.16; color:var(--brand-ink); margin:0 0 .35em; text-wrap:balance; } .lead-help{color:var(--muted); font-size:.98rem; margin:0 0 1.5rem;} .lead-opts{display:flex; flex-direction:column; gap:10px;} .lead-opt{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:17px 18px; font-size:1.02rem; font-weight:600; line-height:1.3; color:var(--brand-ink); background:var(--surface); border:1.5px solid var(--border); border-radius:10px; cursor:pointer; font-family:inherit; transition:border-color .14s, background-color .14s, transform .1s; } .lead-opt:hover{border-color:var(--brand-ink); background:#fbfcfe;} .lead-opt:active{transform:scale(.99);} .lead-opt.sel{border-color:var(--brand-orange); background:rgba(226,13,31,.05);} .lead-opt-ic{ flex:none; width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--brand-orange); } .lead-opt-ic svg{width:19px; height:19px;} .lead-field{ width:100%; padding:17px 18px; font-size:1.08rem; font-family:inherit; color:var(--text); background:var(--surface); border:1.5px solid var(--border); border-radius:10px; transition:border-color .14s, box-shadow .14s; } .lead-field:focus{outline:none; border-color:var(--brand-orange); box-shadow:0 0 0 3px rgba(226,13,31,.13);} .lead-field::placeholder{color:#9aa3b2;} .lead-field.regnr{font-family:'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase;} /* transform + sperring gjelder også placeholderen og sprengte feltet */ .lead-field.regnr::placeholder{font-family:'Work Sans',system-ui,sans-serif; text-transform:none; letter-spacing:0; font-size:.96rem;} .lead-err{color:var(--brand-orange); font-size:.9rem; font-weight:600; margin:.7rem 0 0; min-height:1.2em;} .lead-next{margin-top:1.1rem; width:100%; padding:16px 22px; font-size:1rem;} .lead-skip{ display:block; margin:.9rem auto 0; background:none; border:0; cursor:pointer; font-family:inherit; font-size:.9rem; font-weight:600; color:var(--muted); text-decoration:underline; text-underline-offset:3px; } .lead-skip:hover{color:var(--text);} .lead-foot{ padding:13px 24px; border-top:1px solid var(--border); background:var(--bg); font-size:.78rem; color:var(--muted); text-align:center; line-height:1.5; } .lead-foot a{color:var(--muted);} .lead-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;} /* ---- kvittering ---- */ .lead-done{text-align:center; padding:14px 0 6px;} .lead-check{ width:68px; height:68px; margin:0 auto 22px; border-radius:50%; background:#12a150; color:#fff; display:flex; align-items:center; justify-content:center; animation:leadPop .34s cubic-bezier(.2,1.3,.4,1) both; } .lead-check svg{width:34px; height:34px;} @keyframes leadPop{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}} .lead-done .lead-q{margin-bottom:.5em;} .lead-summary{ text-align:left; margin:1.6rem 0 0; padding:16px 18px; background:var(--bg); border:1px solid var(--border); border-radius:10px; font-size:.92rem; } .lead-summary dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 16px;} .lead-summary dt{color:var(--muted); font-weight:600;} .lead-summary dd{margin:0; font-weight:600; color:var(--brand-ink);} .lead-sending{display:flex; align-items:center; justify-content:center; gap:12px; padding:34px 0; color:var(--muted); font-weight:600;} .lead-spin{width:22px; height:22px; border:2.5px solid var(--border); border-top-color:var(--brand-orange); border-radius:50%; animation:leadSpin .7s linear infinite;} @keyframes leadSpin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){ .lead-spin{animation:none;} } /* Den hvite «Fyll ut skjema»-knappen sto som .btn-outline (mørk tekst) oppå de mørke CTA-båndene — nesten uleselig. På mørk bunn skal den være lys. */ .svc-cta-band .btn-outline, .bmw-cta-band .btn-outline, .hero .btn-outline{ border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.06); } .svc-cta-band .btn-outline:hover, .bmw-cta-band .btn-outline:hover, .hero .btn-outline:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.75);} /* Adresselinjen nederst i mobilmenyen er 290–295px bred og tvang fram vannrett scroll på 320px-skjermer. La den skalere ned i stedet. */ @media (max-width:380px){ .mm-info, .mm-info-link{font-size:.86rem; overflow-wrap:anywhere;} .mm-foot{padding-left:14px; padding-right:14px;} } /* .svc-hero h1 hadde 2rem som gulv i clamp(). Lange ord som «Personvernerklæring» ble da bredere enn en 320px-skjerm og ga vannrett scroll. La bunnen følge skjermbredden. */ @media (max-width:400px){ .svc-hero h1{font-size:clamp(1.45rem, 8.4vw, 2rem);} h1, h2{overflow-wrap:break-word;} } /* Skjemaet som ligger fast i kontaktseksjonen (ikke i modal). Deler alle stilene med .lead-modal — bare rammen rundt er ny. */ /* venstrestilt under overskriften, ikke midtstilt */ .lead-inline-wrap{max-width:620px; margin:0 0 52px;} .lead-inline{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; } .lead-inline .lead-body{min-height:330px;} .lead-inline-alt{ margin:16px 0 0; font-size:.92rem; color:var(--muted); } .lead-inline-alt a{color:var(--brand-orange); font-weight:700;} @media (max-width:560px){ .lead-inline-wrap{margin-bottom:40px;} .lead-inline .lead-body{min-height:0;} } /* --------------------------------------------------------------------------- CTA-par: to knapper som skal være nøyaktig like brede, men ikke bredere enn den lengste teksten krever. Stablet under 620px, side ved side over. «Bestill via skjema» er den lengste og setter bredden (~200px). --------------------------------------------------------------------------- */ .hero-ctas, .svc-hero-ctas, .bmw-hero-ctas, .cta-pair{align-items:stretch;} @media (max-width:620px){ .hero-ctas, .svc-hero-ctas, .bmw-hero-ctas, .cta-pair{ display:grid; grid-template-columns:minmax(0, 15rem); /* like brede, med litt ekstra luft */ justify-content:start; } .svc-cta-band .cta-pair{justify-content:center;} .hero-ctas .btn, .svc-hero-ctas .btn, .bmw-hero-ctas .btn, .cta-pair .btn{width:auto; min-width:0;} /* i sidekortet fyller knappene kortet, slik de alltid har gjort */ .svc-side-card .cta-pair{grid-template-columns:1fr;} } @media (min-width:621px){ .hero-ctas .btn, .svc-hero-ctas .btn, .bmw-hero-ctas .btn, .cta-pair .btn{flex:0 1 auto; min-width:13.5rem;} .svc-side-card .cta-pair .btn{min-width:0;} } /* BMW-heroen har større knapper (14px/26px, .98rem), så 12.5rem var for smalt til å utligne dem der. */ @media (min-width:901px){ .bmw-hero-ctas .btn{min-width:14.4rem;} } /* --------------------------------------------------------------------------- Hero på mobil: litt mindre tekst, og de to knappene ved siden av hverandre på én linje i stedet for under hverandre. --------------------------------------------------------------------------- */ @media (max-width:620px){ .hero h1{font-size:clamp(2.1rem, 9.3vw, 2.8rem); line-height:1.14; max-width:none;} .hero-lede{font-size:1.06rem; line-height:1.55; margin-bottom:1.7rem;} .svc-hero-lede, .bmw-hero-lede{font-size:1.04rem; line-height:1.55;} .hero-stat-top{font-size:1.32rem;} .hero-stat-sub{font-size:.82rem;} } @media (max-width:560px){ /* strammere padding og ikon frigjør plass, så skriften kan være større uten at badgen sprenger linja på smale telefoner */ /* teksten er 42 tegn i monospace og skal stå på én linje. Ren vw-skalering traff alltid kanten — calc() trekker fra sidemargen først, så badgen får luft på alle bredder. */ .hero-eyebrow{font-size:clamp(.5rem, calc(3.78vw - 3.3px), .92rem); padding:.42em .58em; gap:.32em; letter-spacing:0;} .hero-eyebrow svg{width:12px; height:12px;} } /* To knapper side ved side fra 361px og opp. Under det er det ikke plass til «Bestill via skjema» på én linje, så der stables de fortsatt. */ @media (min-width:341px) and (max-width:620px){ .hero-ctas, .svc-hero-ctas, .bmw-hero-ctas, .svc-cta-band .cta-pair{ grid-template-columns:1fr 1fr; gap:10px; justify-content:stretch; } .hero-ctas .btn, .svc-hero-ctas .btn, .bmw-hero-ctas .btn, .svc-cta-band .cta-pair .btn{ width:100%; padding:13px 8px; font-size:.82rem; gap:.4em; } .hero-ctas .btn svg, .svc-hero-ctas .btn svg, .bmw-hero-ctas .btn svg, .svc-cta-band .cta-pair .btn svg{width:15px; height:15px;} /* sidekortet er for smalt til to kolonner */ .svc-side-card .cta-pair{grid-template-columns:1fr;} .svc-side-card .cta-pair .btn{padding:14px 18px; font-size:.92rem;} } /* 341–380px: mindre skrift så «Bestill via skjema» får plass på én linje */ @media (min-width:341px) and (max-width:380px){ .hero-ctas .btn, .svc-hero-ctas .btn, .bmw-hero-ctas .btn, .svc-cta-band .cta-pair .btn{ padding:13px 6px; font-size:.76rem; gap:.3em; } .hero-ctas .btn svg, .svc-hero-ctas .btn svg, .bmw-hero-ctas .btn svg, .svc-cta-band .cta-pair .btn svg{width:13px; height:13px;} } /* under 341px er det ikke plass til «Bestill via skjema» ved siden av — der stables knappene i menyen, som ellers på siden */ @media (max-width:350px){ .mm-foot{grid-template-columns:1fr;} } /* 351–375px: mindre skrift så begge knappene holder seg på én linje */ @media (min-width:351px) and (max-width:375px){ .mm-cta{font-size:.79rem; padding:12px 4px;} .mm-cta svg{width:14px; height:14px;} }