/* SVPG.de — site stylesheet. macrostructure: Long Document (prose-led, varied section shapes) nav: N6 masthead (two-row, rule-separated,
disclosure on mobile) footer: Ft5 statement theme: SVPG navy + amber · display: Archivo (roman) · body: IBM Plex Sans All values reference tokens.css. Reduced-motion overrides are the LAST block in this file. */ @import url("fonts.css"); @import url("tokens.css"); /* ============================================================ base ======= */ *{margin:0;padding:0;box-sizing:border-box} /* No scroll-behavior:smooth — it animates the on-load #hash jump across the whole page, so the visitor lands at the top and watches it crawl. Nav anchors should arrive instantly. */ html{-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); font-size:var(--text-lg); line-height:1.65; color:var(--text); background:var(--paper); overflow-x:clip; } html{overflow-x:clip} img,svg{max-width:100%} a{color:inherit} /* One focus treatment for every interactive element. Never animated. */ a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:1px; } .dark a:focus-visible,.hero a:focus-visible,footer a:focus-visible,footer summary:focus-visible{ outline-color:var(--amber); } .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)} .skip{ position:absolute;left:var(--space-4);top:-4em;z-index:200; background:var(--ink);color:#fff;padding:var(--space-3) var(--space-5); text-decoration:none;font-weight:600; transition:top var(--dur-fast) var(--ease-out); } .skip:focus{top:var(--space-4)} /* Headings. Roman only — never italic. German compounds must be able to break. */ h1,h2,h3,h4{ font-family:var(--font-display); overflow-wrap:anywhere; min-width:0; color:var(--ink); } h1{font-weight:700;font-size:var(--text-h1);line-height:1.06;letter-spacing:var(--tracking-tight)} h1.long{font-size:var(--text-h1-s)} h2{font-weight:700;font-size:var(--text-h2);line-height:1.12;letter-spacing:-.01em;max-width:22ch} h3{font-weight:700;font-size:var(--text-h3);line-height:1.25} /* Two consolidated microlabel utilities replace the fourteen ad-hoc ones. */ .label{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--steel); line-height:1.4; } .caption{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin-top:var(--space-4); } .dark .label,.hero .label,.dark .caption{color:var(--silver)} .mono{font-family:var(--font-mono)} /* Scroll reveal. Only armed when JS is running (html.js), so a no-JS reader sees every word. See the inline bootstrap script in each page . */ .js .rv{opacity:0;transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)} .js .rv.in{opacity:1;transform:none} /* ============================================ masthead (N6, two-row) ===== */ .masthead{border-bottom:var(--rule);background:var(--paper)} .masthead-top{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-5); min-height:76px; } .logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none} .logo-word{ font-family:var(--font-display);font-weight:700;font-size:1.375rem; letter-spacing:.10em;color:var(--ink);display:block; } .logo-sub{ font-family:var(--font-mono);font-size:var(--text-2xs); letter-spacing:var(--tracking-label);color:var(--steel);display:block; } .logo:hover .logo-word{color:var(--steel)} /* Row two: the destinations, on their own rule-separated line. */ .masthead-nav{border-top:var(--rule)} .masthead-nav ul{list-style:none;display:flex;gap:var(--space-7);flex-wrap:wrap} .masthead-nav a{ display:block;text-decoration:none; font-size:var(--text-base);font-weight:500;letter-spacing:.02em; color:var(--steel); padding:var(--space-3) 0; border-bottom:3px solid transparent; transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); } .masthead-nav a:hover{color:var(--ink)} .masthead-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--amber)} /* Mobile: the same list inside a native disclosure. No JS, keyboard-operable. */ .navtoggle{display:none} .navtoggle>summary{ list-style:none;cursor:pointer; display:flex;align-items:center;gap:var(--space-3); font-family:var(--font-mono);font-size:var(--text-xs); letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--steel); padding:var(--space-4) 0;border-top:var(--rule); } .navtoggle>summary::-webkit-details-marker{display:none} .navtoggle>summary::after{ content:"";width:9px;height:9px;margin-left:auto; border-right:2px solid var(--steel);border-bottom:2px solid var(--steel); transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--dur-base) var(--ease-out); } .navtoggle[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)} .navtoggle ul{list-style:none;padding-bottom:var(--space-4)} .navtoggle a{ display:block;text-decoration:none;padding:var(--space-3) 0; font-size:var(--text-md);color:var(--steel);border-top:var(--rule); } .navtoggle a[aria-current="page"]{color:var(--ink);font-weight:600} @media(max-width:860px){ .masthead-nav{display:none} .navtoggle{display:block} } /* ================================================================ hero === */ .hero{ background:var(--ink);color:#fff;position:relative; overflow:hidden;border-bottom:var(--accent-bar); } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none;background: repeating-linear-gradient(0deg,transparent,transparent 47px,rgba(138,186,213,.10) 47px,rgba(138,186,213,.10) 48px), repeating-linear-gradient(90deg,transparent,transparent 47px,rgba(138,186,213,.10) 47px,rgba(138,186,213,.10) 48px); } .hero-inner{position:relative;padding-block:var(--space-9) var(--space-8)} .hero-inner.tight{padding-bottom:0} .hero h1{color:#fff;max-width:20ch} .hero h1 .accent{color:var(--amber)} .hero .label{margin-bottom:var(--space-5)} .sup{font-size:.55em;vertical-align:.62em;color:var(--amber);font-weight:700} .lede{ margin-top:var(--space-5);max-width:60ch; font-size:var(--text-xl);line-height:1.6;color:var(--text-on-ink); } /* ============================================================= buttons === */ /* No translate on press or hover — colour and border carry the state. */ .btn{ display:inline-block;text-decoration:none; font-weight:600;font-size:var(--text-base);letter-spacing:.02em; padding:13px 26px;border:1px solid var(--silver); transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .btn:active{background:var(--amber-strong)} .btn.primary{background:var(--amber);border-color:var(--amber);color:var(--ink)} .btn.primary:hover{background:var(--amber-strong);border-color:var(--amber-strong)} .btn.ghost{color:#fff} .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn.outline{border-color:var(--ink);color:var(--ink);background:transparent} .btn.outline:hover{background:var(--ink);color:#fff} .btn-row{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-6)} /* A text link that reads as an action without becoming a fourth button style. */ .textlink{ display:inline-block;font-family:var(--font-mono); font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase; color:var(--ink);text-decoration:none; border-bottom:1px solid var(--amber);padding-bottom:2px; } .textlink:hover{border-bottom-width:3px} .dark .textlink,.hero .textlink{color:#fff} /* Links inside running prose. */ .prose a:not(.btn):not(.textlink),.facts a,.faq .answer a,.marklist a{ text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--amber);text-decoration-thickness:2px} .prose a:not(.btn):not(.textlink):hover,.facts a:hover,.faq .answer a:hover,.marklist a:hover{color:var(--steel)} .dark .prose a:not(.btn):not(.textlink):hover,.dark .facts a:hover{color:#fff} /* ====================================================== section rhythm === */ /* Three densities and four shapes, so no two consecutive sections read alike. */ section{padding:var(--space-9) 0} section.tight{padding:var(--space-8) 0} section.tall{padding:var(--space-10) 0} .alt{background:var(--paper-2)} .dark{background:var(--ink);color:#fff;border-top:var(--accent-bar)} .dark h2,.dark h3,.dark h4{color:#fff} .dark p{color:var(--text-on-ink)} .prose{max-width:var(--measure)} .prose p+p{margin-top:var(--space-4)} section>.wrap>h2{margin-bottom:var(--space-6)} /* shape 1 — a single measured column, indented off the left edge */ .s-prose .prose{max-width:var(--measure)} .s-prose>.wrap>h2{max-width:20ch} /* shape 2 — a lead paragraph, then the rest in two reading columns */ .s-lead .lead{ font-size:var(--text-xl);line-height:1.55;max-width:52ch; color:var(--ink);margin-bottom:var(--space-6); } .dark .s-lead .lead{color:#fff} .s-lead .cols{columns:2;column-gap:var(--space-8);max-width:none} .s-lead .cols p{margin-bottom:var(--space-4)} @media(max-width:860px){.s-lead .cols{columns:1}} /* shape 3 — asymmetric prose + reference list */ .s-split{display:grid;grid-template-columns:1.15fr minmax(0,1fr);gap:var(--space-8);align-items:start} @media(max-width:900px){.s-split{grid-template-columns:1fr;gap:var(--space-7)}} /* shape 4 — full-width figure, caption and note beneath in a narrow column */ .s-wide figure{margin:0} .s-wide .note{max-width:56ch;margin-top:var(--space-5)} /* ============================================================= surfaces == */ /* One panel primitive. Modifiers change intent, not a fourth box style. */ .panel{ background:var(--paper);border:var(--rule); padding:var(--space-7) var(--space-6); transition:border-color var(--dur-base) var(--ease-out); } .dark .panel{background:var(--panel-ink);border-color:var(--line-dark)} .panel--top{border-top:var(--accent-bar)} .panel--top-steel{border-top:4px solid var(--steel)} /* Only the navigational card lifts. Everything else states hover with a rule. */ .panel--link{display:block;text-decoration:none;position:relative} .panel--link:hover{border-color:var(--steel)} .panel--link .textlink{margin-top:var(--space-5)} .panel--link:hover .textlink{border-bottom-width:3px} .cardset{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:var(--space-5)} .cardset .panel h3{margin:var(--space-3) 0} .cardset .panel p{font-size:var(--text-base);color:var(--text-2)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)} @media(max-width:860px){.duo{grid-template-columns:1fr}} /* ============================================== lists (marker, no glyph) == */ /* A drawn square, not a "▸" character — no font dependency, one marker site-wide. */ .marklist{list-style:none} .marklist li{ display:flex;gap:var(--space-3); padding:11px 0;border-top:var(--rule); font-size:var(--text-base);color:var(--text-2); } .marklist li::before{ content:"";flex:none;width:7px;height:7px; background:var(--amber);margin-top:.55em; } .dark .marklist li{border-color:var(--line-dark);color:var(--text-on-ink)} /* A key/value reference list. */ .facts{list-style:none;border-top:var(--rule)} .facts li{ display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:var(--space-5); padding:var(--space-4) 0;border-bottom:var(--rule);font-size:var(--text-md); } .facts .k{padding-top:3px} @media(max-width:600px){.facts li{grid-template-columns:1fr;gap:var(--space-1)}} .dark .facts,.dark .facts li{border-color:var(--line-dark)} /* An ordinal list — replaces the three-equal-cards row. */ .ord{list-style:none;counter-reset:ord;border-top:var(--rule)} .ord>li{ counter-increment:ord; display:grid;grid-template-columns:minmax(0,88px) minmax(0,1fr);gap:var(--space-6); padding:var(--space-6) 0;border-bottom:var(--rule); } .ord>li::before{ content:counter(ord,decimal-leading-zero); font-family:var(--font-display);font-weight:700;font-size:2rem; line-height:1;color:var(--steel); } .ord h3{margin-bottom:var(--space-3)} .ord p{max-width:62ch;color:var(--text-2)} @media(max-width:700px){ .ord>li{grid-template-columns:1fr;gap:var(--space-2)} .ord>li::before{font-size:1.5rem} } /* ============================================================== figures == */ .figure{background:var(--paper);border:var(--rule);padding:var(--space-6);margin:0} .figure svg{width:100%;height:auto;display:block} @media(max-width:700px){ .figure{overflow-x:auto} .figure svg{min-width:640px} } .dark .figure,.hero .figure{background:var(--panel-ink);border-color:var(--line-dark)} .figure figcaption{ font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.12em; text-transform:uppercase;color:var(--steel);margin-top:var(--space-4); } .dark .figure figcaption,.hero .figure figcaption{color:var(--silver)} .figure-head{ display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap; font-family:var(--font-mono);font-size:var(--text-2xs); letter-spacing:var(--tracking-label);text-transform:uppercase; color:var(--silver);margin-bottom:var(--space-4); } .legend{ display:flex;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-3); font-family:var(--font-mono);font-size:var(--text-2xs); letter-spacing:.08em;color:var(--silver); } .legend span{display:flex;align-items:center;gap:var(--space-2)} .sw{width:14px;height:10px;display:inline-block;flex:none} .sw.full{background:#fff} .sw.hollow{border:2px solid var(--amber)} /* SVG diagram motion. Every animated path carries pathLength="100", so the dash values below are correct regardless of the path's real length. */ .org-line,.tl-line,.tl-amber,.climbpath{ stroke-dasharray:100;stroke-dashoffset:100; animation:draw var(--dur-slow) var(--ease-out) forwards; } .org-line{stroke:#4E86B4;stroke-width:1.6;fill:none;animation-duration:1.2s} .tl-line{stroke:#4E86B4;stroke-width:2;animation-duration:1.6s;animation-delay:.3s} .tl-amber{stroke:var(--amber);stroke-width:4;animation-duration:1.6s;animation-delay:.6s} .climbpath{stroke:var(--amber);stroke-width:3;fill:none;animation-duration:2s;animation-delay:.3s} .flowline{stroke:var(--steel);stroke-width:1.8;fill:none; stroke-dasharray:6 5;animation:flowin var(--dur-slow) var(--ease-out) forwards} .org-box,.tl-node,.vc{opacity:0;animation:pop var(--dur-base) var(--ease-out) forwards} .agentbox{stroke:var(--amber)} @keyframes draw{to{stroke-dashoffset:0}} @keyframes flowin{from{opacity:0}to{opacity:1}} @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s} .d4{animation-delay:.6s}.d5{animation-delay:.75s}.d6{animation-delay:.9s} .d7{animation-delay:1.05s}.d8{animation-delay:1.2s}.d9{animation-delay:1.35s} /* ================================================================== faq == */ .faq{border-top:var(--rule)} .faq details{border-bottom:var(--rule)} .faq summary{ cursor:pointer;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:var(--space-5); padding:var(--space-5) var(--space-1); font-family:var(--font-display);font-weight:600;font-size:1.125rem;color:var(--ink); } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--steel)} .faq .pm{ flex:none;position:relative;width:16px;height:16px; transition:transform var(--dur-base) var(--ease-out); } .faq .pm::before,.faq .pm::after{ content:"";position:absolute;inset:0;margin:auto;background:var(--amber); } .faq .pm::before{width:100%;height:2px} .faq .pm::after{width:2px;height:100%} .faq details[open] .pm{transform:rotate(45deg)} .faq .answer{padding:0 var(--space-1) var(--space-5);max-width:72ch; color:var(--text-2);font-size:var(--text-md)} .faq .answer p+p{margin-top:var(--space-3)} /* ============================================================ specifics == */ .datastrip{ margin-top:var(--space-8);border-top:var(--rule-dark); display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); } .datastrip div{padding:var(--space-5) var(--space-4);border-right:var(--rule-dark)} .datastrip div:last-child{border-right:none} .datastrip .k{ display:block;font-family:var(--font-mono);font-size:var(--text-2xs); letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--silver); } .datastrip .v{ display:block;font-family:var(--font-display);font-weight:600; font-size:var(--text-md);line-height:1.35;margin-top:var(--space-2);color:#fff; text-wrap:balance; } @media(max-width:960px){ .datastrip{grid-template-columns:repeat(3,minmax(0,1fr))} .datastrip div:nth-child(3n){border-right:none} } @media(max-width:600px){ .datastrip{grid-template-columns:repeat(2,minmax(0,1fr))} .datastrip div:nth-child(2n){border-right:none} } .price{ margin-top:var(--space-5);background:var(--ink);color:#fff; display:flex;justify-content:space-between;align-items:center; gap:var(--space-5);flex-wrap:wrap;padding:var(--space-6) var(--space-6); } .price .big{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.125rem)} .price .big span{color:var(--amber)} .price .fine{ font-family:var(--font-mono);font-size:var(--text-xs); letter-spacing:.06em;color:var(--silver);line-height:1.9; } .together{ margin-top:var(--space-5);background:var(--ink);color:#fff; padding:var(--space-7) var(--space-6); display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-6);align-items:center; } @media(max-width:700px){.together{grid-template-columns:1fr}} .together .lockup{ font-family:var(--font-display);font-weight:700; letter-spacing:.06em;font-size:clamp(1.125rem,2.2vw,1.5rem); } .together .lockup .x{color:var(--amber);font-weight:600} .together p{color:var(--text-on-ink);font-size:var(--text-base)} /* Company timeline. */ .years{position:relative;padding-left:var(--space-6);list-style:none} .years::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)} .years li{position:relative;padding-bottom:var(--space-7)} .years li:last-child{padding-bottom:0} .years li::before{ content:"";position:absolute;left:-33px;top:6px;width:14px;height:14px; border-radius:50%;background:var(--ink); } .years li.agent::before{background:var(--paper-2);border:3px solid var(--amber)} .years .yr{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--ink)} .years p{max-width:64ch;color:var(--text-2);font-size:var(--text-md);margin-top:var(--space-2)} /* Anniversary numeral. Decorative, but readable rather than a 2:1 outline. */ .jub{ font-family:var(--font-display);font-weight:700; font-size:clamp(4rem,11vw,10rem);line-height:.85; color:rgba(138,186,213,.32); position:absolute;right:var(--gutter);bottom:0; pointer-events:none;user-select:none; } .jub b{color:rgba(241,188,120,.7)} @media(max-width:900px){.jub{display:none}} /* Contact block. */ .contact{display:grid;grid-template-columns:1.1fr minmax(0,1fr);gap:var(--space-8);align-items:start} @media(max-width:800px){.contact{grid-template-columns:1fr;gap:var(--space-6)}} .contact address{font-style:normal;font-family:var(--font-mono);font-size:var(--text-base);line-height:2} .dark .contact address{color:var(--silver)} .dark .contact address a{color:#fff} /* Anchor targets clear the top edge when jumped to. */ [id]{scroll-margin-top:var(--space-6)} /* ============================================================ cta band === */ /* One primary action plus one text link — not two competing buttons. */ .cta{padding:var(--space-7) 0} .cta .inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);flex-wrap:wrap} .cta h2{max-width:26ch;margin:0} .cta.light{background:var(--paper-2);border-top:var(--rule)} .cta.darkband{background:var(--ink);color:#fff;border-top:var(--accent-bar)} .cta.darkband h2{color:#fff} /* =============================================================== footer == */ /* Ft5 statement: a closing line, then one compact strip of links. */ footer{background:var(--ink);color:var(--silver);border-top:var(--rule-dark)} footer .wrap{padding-top:var(--space-8);padding-bottom:var(--space-7)} .foot-statement{ font-family:var(--font-display);font-weight:700; font-size:clamp(1.375rem,3vw,2rem);line-height:1.2;color:#fff; max-width:24ch; } .foot-statement .accent{color:var(--amber)} .foot-links{ display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6); margin-top:var(--space-7);padding-top:var(--space-5);border-top:var(--rule-dark); } .foot-links a{font-size:var(--text-base);text-decoration:none;color:var(--silver)} .foot-links a:hover{color:#fff} .foot-meta{ display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap; margin-top:var(--space-5);padding-top:var(--space-4);border-top:var(--rule-dark); font-size:var(--text-sm); } .foot-meta a{color:var(--silver);text-decoration:none} .foot-meta a:hover{color:#fff} .foot-address{font-style:normal;font-family:var(--font-mono);font-size:var(--text-sm)} /* ==================================================== legal page layout == */ .legal{max-width:74ch} .legal h2{ margin-top:var(--space-7);margin-bottom:var(--space-3); font-size:var(--text-h3);max-width:none; /* legal headings are long — no 22ch cap */ } .legal p+p,.legal ul,.legal ul+p,.legal address+p{margin-top:var(--space-3)} .legal ul:not(.facts){padding-left:var(--space-5)} .legal ul:not(.facts) li{margin-top:var(--space-1)} .legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--amber)} /* shape 5 — run-in headings, rule separated. A readable stack, not a card row. */ .runin{border-top:var(--rule)} .runin>div{ padding:var(--space-6) 0;border-bottom:var(--rule); display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--space-6); } .runin h3{font-size:var(--text-h3)} .runin p{max-width:60ch;color:var(--text-2)} @media(max-width:760px){.runin>div{grid-template-columns:1fr;gap:var(--space-2)}} /* Rules that replace what were inline style attributes in the markup. */ .prose h2{margin-bottom:var(--space-6)} .ord .label{display:block;margin-bottom:var(--space-2)} .ord p+p{margin-top:var(--space-4)} .ord .marklist{margin-top:var(--space-5)} .panel .label+h3{margin:var(--space-2) 0 var(--space-4)} .panel>p{font-size:var(--text-base);color:var(--text-2)} .panel .marklist{margin-top:var(--space-4)} .hero .figure{margin-top:var(--space-8)} .figure.bare{background:none;border:none;padding:0} .hero-inner.short{padding-bottom:var(--space-7)} .legal address{font-style:normal;margin-top:var(--space-3)} .marklist.narrow{max-width:46ch} .together a{color:var(--amber)} /* ============================================ REDUCED MOTION — LAST ====== */ /* Must be the final block in the file. The rules it overrides (.org-box, .tl-node, .vc, the dash offsets) are declared above it at equal specificity, so an earlier block would lose the cascade and leave every SVG diagram on the site rendering blank. */ @media (prefers-reduced-motion: reduce){ /* Remove the animations outright. Keeping them at 1ms is not enough: while a CSS animation is attached, its animation-origin value wins over the normal `opacity:1` declaration below, so the diagrams stayed at the keyframe's from-state (opacity 0). With the animation gone, the resting state applies. */ *,*::before,*::after{animation:none !important;transition:none !important} .js .rv,.org-box,.tl-node,.vc,.flowline{opacity:1;transform:none} .org-line,.tl-line,.tl-amber,.climbpath{stroke-dashoffset:0} }