/* Van Praag AI Agency — the homepage design system (v2). DIRECTIONAL PROPERTIES ARE LOGICAL, NOT PHYSICAL (inset-inline-start, margin-inline- start, text-align:end...). Converted 21-08-2026 so the Hebrew page mirrors for free instead of carrying a parallel [dir=rtl] block that would drift from this one. If you add a rule here, use the logical form -- a `left:` will look right in English and be wrong in Hebrew, and nothing will warn you. FONT PATHS ARE ROOT-ABSOLUTE (/assets/fonts/...) and must stay that way. While this CSS was inline they were relative to the page; from a stylesheet they resolve against the stylesheet, and from /de/index.html they would resolve against /de/. Absolute is the only form that serves a page at / and a page at /de/ from one file. Getting this wrong does not error visibly -- the text simply falls back and every measurement shifts a few pixels, which is how it was caught. --------------------------------------------------------------------------- Extracted from index.html on 20-08-2026. It lived inside that one page, which is why every language drifted: the English homepage was rebuilt standalone and de/, nl/ and he/ stayed on the older assets/styles.css. The same root cause swallowed CHOOSER_BUILD, the scrolled-header treatment, id="site-header" and the mobile menu -- each one present on the other pages and missing here, or the reverse. Now one file, four pages. A change to the look happens once. NOTE: this does NOT replace assets/styles.css. That still serves the sub-pages (/services, /shluchim, /workshop). A page loads one or the other, never both -- they define overlapping selectors on purpose. Verified by fingerprint: every element box, font size, weight and colour on index.html at 1280/768/390 is identical before and after the extraction. */ /* ========================================================================== Van Praag AI Agency — homepage v2 ("Gold Silk" direction) Self-contained on purpose: styles.css still serves the live pages, so this file can be reviewed and reverted without touching anything that ships. Zero CDN, zero network requests. Fonts and script are local. ========================================================================== */ @font-face{ font-family:"Fraunces"; src:url("/assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations"); font-weight:100 900; font-display:swap; } /* Assistant is the brand sans and must be SHIPPED, not merely named: declaring it without a @font-face rendered every visitor's body copy in Segoe UI while it looked correct on the one machine that has it installed locally. */ @font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap} :root{ --cream:#FAF6EC; --panel:#F5EDD9; --white:#FFFDF7; --ink:#211C13; --ink-soft:#6A6250; /* TWO golds, and the distinction is accessibility, not taste. --gold-bright #D6A85E : large shapes, gradients, hairlines. --gold #B8891F : 2.93:1 on cream — FAILS AA. Never small text. --gold-deep #8a6a2f : 4.65:1 on cream — this is the one for kickers, prices, links and any gold text under ~18px. Collapsing these into one is what broke contrast for 40-60-year-old eyes. */ --gold:#B8891F; --gold-bright:#D6A85E; --gold-deep:#8a6a2f; --brick:#A6603F; --line:rgba(184,137,31,.30); --maxw:1280px; --serif:"Fraunces",Georgia,"Iowan Old Style",Palatino,serif; --sans:"Assistant",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)} /* ---------- shared type ---------- */ .kicker{display:flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin:0 0 20px} .kicker::before{content:"";width:44px;height:1px;background:var(--gold);opacity:.6;flex:0 0 auto} h1,h2,h3{font-family:var(--serif);font-weight:450;letter-spacing:-.02em;margin:0} h2{font-size:clamp(1.9rem,3.3vw,2.9rem);line-height:1.08;max-width:22ch} h3{font-size:1.18rem;font-weight:600;letter-spacing:-.01em} em{font-style:italic;font-weight:500;color:var(--gold-deep)} .lede{font-size:clamp(1rem,1.3vw,1.16rem);color:var(--ink-soft);max-width:34em;margin:16px 0 0} .rule{height:2px;width:64px;border-radius:2px;margin:26px 0 0; background:linear-gradient(90deg,var(--gold-bright),var(--gold))} /* ---------- buttons: gold = paid, ghost = free (site-wide rule) ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 27px; font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:0; transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s} .btn-gold{background:var(--gold-deep);color:#fff; box-shadow:0 10px 26px -12px rgba(184,137,31,.75)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(184,137,31,.85)} .btn-ghost{border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.55)} .btn-ghost:hover{transform:translateY(-2px);border-color:var(--gold)} .btn-sm{padding:11px 20px;font-size:14px} /* ---------- header language + currency control ---------- Leib's call, 19.8.2026: the corner shows the LANGUAGE. The currency appears on click and is chosen there, one click deep, with the active one still legible on the closed button so a Vienna visitor can see at a glance that he is being quoted in dollars. No flags, and that is a decision rather than a shortcut: a flag is a country, not a language. The other four pages were using #f-at -- the Austrian flag -- to mean "German", which for an Austrian company blurs exactly the distinction it should be most careful with. The codes EN/DE/HE/NL are the footer .langswitch's vocabulary, so the two controls now agree, and each code is paired with the language's own name so a real person knows what he is clicking. Class names are app.js's contract (.langpop, .langpop-btn, .cur, .langpop-menu, .curgrid button[data-cur]). de/he/nl carry the same markup against styles.css, so the behaviour is shared and only this skin is local to v2. */ .langpop{position:relative} .langpop-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer; background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:999px; padding:6px 12px;font-family:var(--sans);font-size:13px;font-weight:600; letter-spacing:.06em;color:var(--ink);line-height:1; transition:border-color .2s,background .2s,color .2s} .langpop-btn:hover{border-color:var(--gold);color:var(--gold-deep)} .langpop-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px} /* Leib, 19.8.2026: the corner shows the language and nothing else. Currency lives inside the panel, one click in, where .curgrid already marks the active one. The span stays because app.js writes the chosen currency into it on every change. */ .langpop-btn .cur{display:none} .langpop-btn .caret{width:9px;height:9px;opacity:.55;transition:transform .2s} .langpop.open .langpop-btn{border-color:var(--gold);background:var(--white)} .langpop.open .langpop-btn .caret{transform:rotate(180deg)} .langpop-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:252px; background:var(--white);border:1px solid var(--line);border-radius:14px;padding:8px; box-shadow:0 30px 60px -28px rgba(60,45,15,.45);z-index:60; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s,transform .18s,visibility .18s} .langpop.open .langpop-menu{opacity:1;visibility:visible;transform:none} .langpop-menu .grp{margin:0;padding:7px 10px 6px;font-size:9.5px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)} .langpop-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px; font-size:14.5px;text-decoration:none;color:var(--ink); transition:background .18s,color .18s} .langpop-menu a .lc{flex:0 0 26px;font-size:10.5px;font-weight:700;letter-spacing:.1em; color:var(--gold-deep)} .langpop-menu a .native{font-weight:600} .langpop-menu a:hover{background:var(--panel);color:var(--gold-deep)} .langpop-menu a.on{background:var(--panel);color:var(--gold-deep)} .langpop-menu a .tick{margin-inline-start:auto;width:13px;height:13px; color:var(--gold-deep);flex:0 0 auto} .langpop-menu hr{border:0;border-top:1px solid var(--line);margin:7px 4px} /* The currency row lives inside the menu now, so it is a row of labelled chips rather than a symbol-only pill: with the language on the button there is room to say EUR instead of making the reader decode a glyph. app.js still toggles .on / aria-pressed on these, so both selectors are styled. */ .langpop-menu .curgrid{display:flex;gap:6px;padding:2px 6px 6px} .langpop-menu .curgrid button{flex:1 1 0;display:inline-flex;align-items:center; justify-content:center;gap:4px;cursor:pointer;border:1px solid var(--line); background:var(--cream);border-radius:999px;padding:7px 4px;font-family:var(--sans); font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft); line-height:1;transition:background .2s,color .2s,border-color .2s} .langpop-menu .curgrid button:hover{border-color:var(--gold);color:var(--gold-deep)} .langpop-menu .curgrid button:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px} .langpop-menu .curgrid button.on, .langpop-menu .curgrid button[aria-pressed="true"]{ background:var(--gold-deep);border-color:var(--gold-deep);color:#fff} /* ---------- header ---------- */ header{position:fixed;top:0;inset-inline:0;z-index:20;backdrop-filter:saturate(120%) blur(6px)} header .bar{display:flex;align-items:center;justify-content:space-between; padding:24px clamp(20px,5vw,64px);max-width:var(--maxw);margin:0 auto} header::before{content:"";position:absolute;inset:-10px 0 -34px;z-index:-1;pointer-events:none; background:linear-gradient(180deg,var(--cream) 14%,rgba(250,246,236,.84) 58%,rgba(250,246,236,0))} .brand{display:flex;align-items:center;gap:12px;text-decoration:none} .brand img{width:44px} .brand .wm{display:block;text-transform:none;letter-spacing:normal;font-size:inherit} .brand b{font-family:var(--serif);font-weight:600;font-size:19px;display:block;text-transform:none;letter-spacing:-.01em;white-space:nowrap} .brand span{display:block;font-size:9.5px;letter-spacing:.22em;color:var(--gold-deep); text-transform:uppercase;margin-top:2px} nav{display:flex;gap:28px;align-items:center;font-size:14.5px} /* MEASURED 23-08-2026, and this is a regression I caused: adding the /team item made the GERMAN header overflow its own viewport at 900px -- nav right edge 924 against a 900px window, 24px off the screen. The text links only collapse into the burger below 940px, and seven items at gap:28px is 196px of gap before a single word is set. Pixel-shaving did NOT clear it: at gap:13px German still wrapped to a second row at 900px, and .bar has a fixed height, so a wrapped row is a CLIPPED row. So the burger hand-off moved from 760px to 940px -- that deletes the fragile band instead of shaving it, and this rule only has to carry 941-1060. A burger at 900px is the ordinary pattern for a tablet and it fails gracefully; a clipped nav does not. Swept at 1440/1280/1100/1062/1060/1000/980/960/942/940/900/820/600/412/390/360 in EN, DE and HE, with the language panel OPEN -- that panel is anchored to the trailing edge and hung off-screen the last time this header changed width. */ @media (min-width:941px) and (max-width:1060px){ header .bar nav{gap:14px;font-size:13.8px} nav a.loginlink{padding-inline-start:14px;margin-inline-start:2px} header .bar nav a.btn{padding:9px 14px} } nav a{text-decoration:none;opacity:.82} nav a.btn{opacity:1;padding:9px 18px;font-size:13.6px;font-weight:600;white-space:nowrap} /* The log-in is a different kind of thing from the content links, so it is marked off by a hairline rather than by being made into a second pill competing with the CTA. */ nav a.loginlink{opacity:.82;font-weight:600;margin-inline-start:6px;padding-inline-start:20px; border-inline-start:1px solid var(--line)} /* Hidden with visibility, not display: the box stays reserved, so the reveal is a pure fade and nothing beside it moves. Measured at 1280/390/360 -- zero shift. */ nav a.navcta{opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none; transition:opacity .28s ease,transform .28s ease,visibility .28s} body.past-hero nav a.navcta{opacity:1;visibility:visible;transform:none;pointer-events:auto} /* "Finden Sie, was zu Ihnen passt" wrapped this pill onto two lines at 360px. */ @media (max-width:400px){nav a.btn.navcta{padding:8px 13px;font-size:12.6px}} /* This bar had a blur and no ground, so body copy read straight through it once you scrolled -- two independent reviewers named it without being asked. app.js already sets header.scrolled past 24px on every page, and assets/styles.css already styles it for de/nl/he and the sub-pages; only this self-contained page never did. */ header.scrolled{background:rgba(250,248,243,.94);box-shadow:0 1px 0 var(--line); backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px)} nav a:hover{opacity:1;color:var(--gold-deep)} .menu-toggle{display:none;flex-direction:column;justify-content:center;gap:4.5px; width:40px;height:36px;padding:0 8px;background:none;border:0;cursor:pointer; margin-inline-start:4px} .menu-toggle span{display:block;height:1.6px;background:var(--ink);border-radius:2px; transition:transform .25s ease,opacity .2s ease} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* the line that names the business. Sits between the promise and the buttons, so the first screen carries what we do as well as what it does for you. */ .herowhat{margin:0 0 34px;font-size:15px;line-height:1.55;color:var(--ink);font-weight:600; max-width:34em} .herowhat [data-p]{color:var(--gold-deep)} /* ---------- what you can book ---------- */ .offerstrip{padding:34px 0 6px;background:var(--cream)} .offers{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)} .offers li{border-bottom:1px solid var(--line)} .offers a{display:flex;align-items:baseline;gap:14px;padding:13px 2px;text-decoration:none; color:var(--ink);transition:background .2s ease,padding .2s ease} .offers a:hover{background:var(--gold-wash);padding-inline:10px} .offers .on{font-weight:700;font-size:15.5px;flex:0 0 auto} .offers .od{color:var(--ink-soft);font-size:13.6px;flex:1 1 auto} .offers .op{font-family:var(--serif);font-size:16px;color:var(--gold-deep);flex:0 0 auto; white-space:nowrap} .offers .op.st{color:var(--ink-soft)} @media (max-width:600px){ /* the description drops under the name rather than squeezing the price off the row */ .offers a{flex-wrap:wrap;gap:0 12px} .offers .on{flex:1 1 auto} .offers .op{order:2} .offers .od{flex:1 1 100%;order:3;margin-top:3px} } /* ---------- hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:clip} /* ---------- the console: an agent doing work, in CSS 3D ---------- High-tech read comes from precision, not from glow: hairlines, monospace machine text, real depth, one gold accent. No dark ground, no neon. */ .hero{--mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono","Roboto Mono",Menlo,monospace} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .console{position:absolute;top:50%;inset-inline-end:3.5%;z-index:1; width:min(45vw,560px);height:min(76svh,620px);transform:translateY(-50%); perspective:1500px;perspective-origin:60% 45%;pointer-events:none} /* a fine technical grid behind the panels, so the space reads engineered */ .console::before{content:"";position:absolute;inset:-8% -6%; background-image:linear-gradient(rgba(184,137,31,.13) 1px,transparent 1px), linear-gradient(90deg,rgba(184,137,31,.13) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(120% 90% at 62% 45%,#000 35%,transparent 78%); -webkit-mask-image:radial-gradient(120% 90% at 62% 45%,#000 35%,transparent 78%)} .panel{position:absolute;background:rgba(255,253,247,.94);border:1px solid var(--line); border-radius:14px;box-shadow:0 30px 60px -34px rgba(60,45,15,.42),0 2px 5px -2px rgba(60,45,15,.10); backdrop-filter:blur(2px);transform-style:preserve-3d; animation:panelin 1s cubic-bezier(.2,.7,.25,1) both} @keyframes panelin{from{opacity:0;transform:translate3d(28px,18px,-120px) rotateY(-10deg)}} .p-log{inset-inline-start:4%;top:8%;width:82%;padding:16px 18px 18px; transform:rotateY(-8deg) rotateX(2deg) translateZ(24px);animation-delay:.30s} .p-count{inset-inline-end:2%;top:52%;width:47%;padding:16px 18px; transform:rotateY(-8deg) translateZ(70px);animation-delay:.46s} .p-stream{inset-inline-start:0;bottom:2%;width:56%;padding:13px 15px; transform:rotateY(-8deg) translateZ(-24px);animation-delay:.60s} .phead{display:flex;align-items:center;gap:9px;margin-bottom:12px; font-size:12px;color:var(--ink-soft)} .phead b{font-size:12.5px;color:var(--ink);font-weight:700} .phead .mono{margin-inline-start:auto;font-size:10.5px;color:var(--gold-deep); text-transform:uppercase;letter-spacing:.14em} .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto} .dot.live{box-shadow:0 0 0 0 rgba(184,137,31,.5);animation:pulse 2.4s ease-out infinite} @keyframes pulse{70%{box-shadow:0 0 0 9px rgba(184,137,31,0)}100%{box-shadow:0 0 0 0 rgba(184,137,31,0)}} .tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .tasks li{display:flex;align-items:center;gap:10px;font-size:13.6px;line-height:1.3; padding-bottom:9px;border-bottom:1px solid rgba(184,137,31,.14)} .tasks li:last-child{border-bottom:0;padding-bottom:0} .tasks li i{width:17px;height:17px;border-radius:50%;flex:0 0 auto;display:grid; place-items:center;font-size:10px;font-style:normal; background:rgba(184,137,31,.12);color:var(--gold-deep)} .tasks li.done i{background:var(--gold-deep);color:#fff} .tasks li em{margin-inline-start:auto;font-size:10.5px;color:var(--ink-soft);font-style:normal} .tasks li.queue{opacity:.5} .tasks li i.spin{border:1.6px solid rgba(184,137,31,.28);border-top-color:var(--gold-deep); background:none;animation:spin .9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .pbar{height:3px;border-radius:99px;background:rgba(184,137,31,.16);margin-top:14px;overflow:hidden} .pbar s{display:block;height:100%;width:38%;text-decoration:none; background:linear-gradient(90deg,var(--gold-bright),var(--gold-deep));transition:width .5s ease} .plabel{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.16em; color:var(--ink-soft)} .p-count .big{display:block;font-family:var(--serif);font-size:2.9rem;line-height:1.05; margin:6px 0 2px;color:var(--ink);font-variant-numeric:tabular-nums} .ptrend{font-size:11px;color:var(--gold-deep)} .stream{margin:0;font-size:11.6px;line-height:1.55;color:var(--ink-soft); min-height:3.1em;white-space:pre-wrap} .stream::after{content:"▍";color:var(--gold-deep);animation:caret 1s steps(1) infinite} @keyframes caret{50%{opacity:0}} @media (max-width:900px){ /* the hero is a flex row; the console must stack UNDER the copy, not beside it */ .hero{flex-direction:column;align-items:stretch;min-height:auto; padding-top:88px;padding-bottom:52px} .hero .wrap{order:1;padding-top:0;padding-bottom:0} .console{order:2;position:relative;top:auto;inset-inline-end:auto;transform:none;width:100%; height:auto;min-height:0;margin-top:30px;perspective:none} .scrollcue{display:none} .panel{position:relative;transform:none!important;width:100%!important; inset-inline:auto;top:auto;bottom:auto;margin-bottom:12px} .console::before{display:none} } .hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:80px;width:100%} /* reserve the console's column so the headline can never run under a panel */ @media (min-width:901px){ .hero .wrap{padding-inline-end:calc(min(45vw,560px) + 6vw)} .hero h1{max-width:17ch} } .hero h1{font-size:clamp(2.3rem,4.5vw,4.05rem);line-height:1.02;max-width:20ch; margin:0 0 26px} /* Two sentences, and each one balances on its OWN lines. Measured 19.8.2026: the console reserves the right column, so the headline gets 570px at 1440 while the longer sentence needs 732px -- it has to take two lines. With one balance pass over the whole h1 (and a
between the sentences) that produced five ragged lines with "works" orphaned. Per-sentence blocks give a deliberate 2 + 2 lockup and collapse to one line each below 901px, where the console stacks underneath. */ .hero h1 .l{display:block;text-wrap:balance} .hero .sub{font-size:clamp(1rem,1.32vw,1.2rem);line-height:1.62;color:var(--ink-soft); max-width:31em;margin:0 0 18px} /* 14px, not 32: the proof line and the line naming the business read as one block, and the air belongs before the buttons instead. Measured, not guessed. */ .proof{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft);margin:0 0 14px} .proof i{width:5px;height:5px;border-radius:50%;background:var(--gold-bright);flex:0 0 auto} .cta{display:flex;flex-wrap:wrap;gap:14px} .scrollcue{position:absolute;inset-inline-start:clamp(20px,5vw,64px);bottom:30px;z-index:3;display:flex; align-items:center;gap:10px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-soft);opacity:.8} .scrollcue s{display:block;width:1px;height:32px;text-decoration:none; background:linear-gradient(var(--gold),transparent);animation:drop 2.4s ease-in-out infinite} @keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}} /* ---------- sections ---------- */ section{padding:clamp(72px,10vh,124px) 0;position:relative} .alt{background:var(--white)} .alt::before,.alt::after{content:"";position:absolute;inset-inline:0;height:1px;background:var(--line)} .alt::before{top:0}.alt::after{bottom:0} .head{max-width:var(--maxw);margin:0 auto} /* cards */ .grid{display:grid;gap:20px;margin-top:48px} .g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} /* Five services, 19.8.2026. A single row of five is 230px a card at 1280 and the bodies break to five lines, so it runs 3 + 2 on a six-column track and the last two are pushed to columns 2-3 and 4-5 -- centred under the three above rather than orphaned to the left. */ .g5{grid-template-columns:repeat(6,1fr)} .g5>*{grid-column:span 2} .g5>*:nth-child(4){grid-column:2/span 2} .g5>*:nth-child(5){grid-column:4/span 2} .g2{grid-template-columns:repeat(2,1fr)} /* flex column + margin-top:auto on the price block, so all four prices share a baseline even when one heading wraps to two lines */ .card{background:var(--white);border:1px solid var(--line);border-radius:16px; padding:26px 24px;position:relative;display:flex;flex-direction:column; transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s} .card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(60,45,15,.4)} .alt .card{background:var(--cream)} .card .ico{width:34px;height:34px;margin-bottom:16px;color:var(--gold)} .card p{color:var(--ink-soft);font-size:15.2px;margin:10px 0 0} .card .price{display:block;margin-top:auto;padding-top:18px; font-family:var(--serif);font-size:1.32rem;color:var(--gold-deep)} /* Every one of these is a sentence-case call to action ("Ask on WhatsApp"), not a one-word label -- the same reason the services meta line below stays sentence case. The uppercase also mangled the WhatsApp wordmark, and in Hebrew an all-caps Latin island inside a calm Hebrew line reads as a shout, because Hebrew has no case. */ .card .price small{font-family:var(--sans);font-size:11.8px;letter-spacing:.03em; color:var(--ink-soft);display:block;margin-top:4px} /* a price is a number; a state is not. Don't set them identically. */ /* a state is not a price, but it must still sit in the same type system as one */ .card .price.state{color:var(--ink-soft)} .card .price.state small{color:var(--gold-deep)} .card .price small a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--line)} .card .price small a:hover{border-bottom-color:var(--gold-deep)} /* ---------- about / vision ---------- Two defects measured on the render, 19.8.2026, both fixed here: 1. The proof cards carry far less text than a services card, and .card is a flex column, so they rendered as hollow boxes with ~90px of dead space under the copy. .meta is the same bottom slot the services cards use for a price -- it pins to the bottom and fills the box. Every value in it is a fact read out of the project, not a claim. 2. The closing line sat under the LEFT column only, so it read as a footnote to "We teach it." instead of a conclusion to both directions. Centred, and up from .fine's 12.5px, which made the quality promise look like small print. */ #about .card .meta{margin-top:auto;padding-top:18px;font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-deep)} /* The services meta line carries facts a buyer checks (duration, group size, where it happens), so it stays sentence case -- the uppercase treatment above is for the about cards' one-word labels and turns a real sentence into a shout. */ #services .card .meta{margin-top:12px;font-size:12.6px;color:var(--ink-soft)} #about .pathnote{margin:34px auto 0;max-width:54ch;text-align:center; font-size:15px;color:var(--ink-soft);text-wrap:balance} /* numbered steps */ .step{position:relative;padding-inline-start:60px} .step .n{position:absolute;inset-inline-start:0;top:0;width:38px;height:38px;border-radius:50%; background:var(--gold-deep);color:#fff; display:grid;place-items:center;font-weight:700;font-size:15px;font-family:var(--sans)} .step p{color:var(--ink-soft);font-size:15.2px;margin:9px 0 0} /* why list */ .why{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 44px;margin-top:48px} .why div{padding-top:20px;border-top:1px solid var(--line)} .why p{color:var(--ink-soft);font-size:15.2px;margin:8px 0 0} /* ---------- the split section ---------- The craft critic's verdict on the first pass: all the material stopped at the hero and four fifths of the page was one flat cream column. This section carries the metal downward and breaks the band-plus-left-column rhythm. */ .split{background:linear-gradient(180deg,var(--cream),var(--panel) 55%,var(--cream))} .splitgrid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,5vw,72px);align-items:start} .specpanel{background:rgba(255,253,247,.94);border:1px solid var(--line);border-radius:14px; padding:20px 22px;box-shadow:0 30px 60px -34px rgba(60,45,15,.42)} .spec{margin:0;display:flex;flex-direction:column;gap:0} .spec div{display:flex;gap:14px;align-items:baseline;padding:11px 0; border-bottom:1px solid rgba(184,137,31,.14)} .spec div:last-child{border-bottom:0} .spec dt{flex:0 0 40%;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em; color:var(--ink-soft)} .spec dd{margin:0;font-size:14.6px;color:var(--ink);font-weight:600} .split .why{grid-template-columns:1fr;gap:26px;margin-top:34px} @media (max-width:900px){ .splitgrid{grid-template-columns:1fr} .specpanel{order:-1} } /* workshop strip */ .strip{background:var(--panel);border:1px solid var(--line);border-radius:22px; padding:clamp(30px,4vw,52px);display:grid;grid-template-columns:1.35fr .65fr; gap:34px;align-items:center} .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .facts > span{font-size:12.5px;border:1px solid var(--line);border-radius:999px; padding:6px 13px;background:rgba(255,255,255,.55)} .facts > span span{border:0;padding:0;background:none} /* contact */ .contact{text-align:center} .contact .kicker{justify-content:center} .contact h2{margin:0 auto;max-width:20ch} .contact .cta{justify-content:center;margin-top:32px} /* footer */ footer{background:var(--white);border-top:1px solid var(--line);padding:44px 0 40px;font-size:14px} footer .row{display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap} footer a{text-decoration:none;opacity:.8}footer a:hover{opacity:1;color:var(--gold-deep)} .langswitch{display:flex;gap:14px} .langswitch a.on{color:var(--gold-deep);font-weight:600} .fine{color:var(--ink-soft);font-size:12.5px;margin-top:14px} /* ---------- chooser ---------- Markup and behaviour come from assets/app.js + chooser-flow.js, which expect the class names and the token names used by styles.css. This page does not load styles.css, so the legacy tokens are aliased to the v2 palette above and the chooser rules are carried over as-is. Aliasing beats hand-translating: any rule I failed to copy still resolves to a sane colour. */ :root{ --ivory:var(--cream); --gold-line:var(--line); --muted:var(--ink-soft); /* NB: do NOT alias --gold-deep here. It already exists above as #8a6a2f, and re-declaring it in this later :root block silently replaced the accessible gold with the 2.93:1 one across the whole page. styles.css means #8a6a2f by --gold-deep too, so no alias is needed. */ --gold-soft:var(--gold-bright); --gold-wash:rgba(184,137,31,.16); --shadow-card:0 24px 50px -30px rgba(60,45,15,.40); } .chooser{max-width:640px;margin:44px auto 0; background:linear-gradient(160deg,#fff,var(--cream)); border:1px solid var(--line);border-radius:22px; padding:48px 44px;box-shadow:var(--shadow-card);position:relative;overflow:hidden} .chooser-step{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center} .chooser-step[hidden]{display:none} .chooser-topbar{width:100%;display:flex;justify-content:flex-start;margin:-8px 0 -10px} .chooser-back{background:none;border:0;cursor:pointer;padding:6px 0;font-family:var(--sans); font-size:.85rem;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:6px} .chooser-back:hover{color:var(--gold-deep)} .step-label{font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.55rem);color:var(--ink);margin:0} .chooser-options{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;width:100%} .chooser-opt{flex:1 1 220px;max-width:270px;display:flex;flex-direction:column;align-items:center; gap:12px;padding:30px 22px;border-radius:16px;border:1px solid var(--line);background:#fff; cursor:pointer;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink); line-height:1.35;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .chooser-opt:hover,.chooser-opt:focus-visible{transform:translateY(-3px); border-color:var(--gold-bright);box-shadow:var(--shadow-card);outline:none} .chooser-opt svg{width:34px;height:34px;color:var(--gold-deep)} .chooser-opt small{display:block;margin-top:6px;font-size:.76rem;font-weight:500; color:var(--ink-soft);line-height:1.3} .chooser-write{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%} .chooser-input{flex:1 1 320px;max-width:440px;padding:14px 20px;border-radius:999px; border:1px solid var(--line);background:#fff;font-family:var(--sans);font-size:1rem;color:var(--ink)} .chooser-input::placeholder{color:var(--ink-soft);opacity:1} .chooser-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)} .chooser-write .btn{flex:0 0 auto} .chooser-hint{margin-top:14px;font-size:.84rem;color:var(--ink-soft)} .chooser-hint.is-warning{color:var(--brick);font-weight:600} .chooser-input.needs-input{border-color:var(--brick);box-shadow:0 0 0 3px rgba(166,96,63,.16)} .chooser-result-desc{color:var(--ink-soft);max-width:46ch} @media (max-width:760px){ .chooser{padding:38px 26px} .chooser-opt{flex:1 1 100%} } /* ---------- chooser RESULT panel ---------- app.js emits .pkg / .pkg-shelf / .ask-box / .btn-wa for the payoff screen. These are LAYOUT rules (grid, border, padding), not colour, so the earlier 'unmatched rules still resolve to a sane colour' assumption was wrong: the packages, prices and booking button rendered unstyled. Carried over verbatim from assets/styles.css. */ .btn-wa::before{content: ""; display: inline-block; flex: 0 0 auto; width: 1.05em; height: 1.05em; background-color: #25D366; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8%2012.8%200%200%200-.57-.01c-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.872.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8%2012.8%200%200%200-.57-.01c-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.872.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;} .chooser-result-desc{color: var(--muted); max-width: 46ch;} .pkg-shelf{display: grid; gap: 12px; width: 100%; max-width: 640px; margin: 26px auto 4px; text-align: start;} .pkg{display: block; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--gold-line); background: #fff; color: var(--ink); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;} .pkg:hover{border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-card);} .pkg-head{display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;} .pkg-name{font-family: var(--serif); font-size: 1.06rem; color: var(--ink);} .pkg-price{font-size: .86rem; font-weight: 600; color: var(--gold-deep); white-space: nowrap;} .pkg-blurb{margin-top: 6px; font-size: .88rem; color: var(--muted); line-height: 1.5;} .pkg-subscription{border-color: var(--gold-soft); background: var(--gold-wash);} .ask-box{width: 100%; max-width: 640px; margin: 24px auto 2px; text-align: start;} .pkg-static{background: transparent; border-style: dashed;} .pkg-static:hover{border-color: var(--gold-line); transform: none; box-shadow: none;} .pkg-static .pkg-price{color: var(--muted); font-weight: 500;} [dir="rtl"] .pkg-shelf{text-align: start;} /* ---------- "while you were away": the night timeline ---------- This is the emotional core of the page: work completing at hours the visitor was asleep. Brand forbids dark grounds, so night is signalled by monospace timestamps, a drawn rail and a dimmed-to-lit progression — not by going dark. */ .night{background:linear-gradient(180deg,var(--cream),var(--panel) 42%,var(--panel) 74%,var(--cream))} .nightgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,74px);align-items:start} .nightcap{display:flex;align-items:center;gap:10px;margin:22px 0 0; font-size:12.5px;color:var(--ink-soft)} .nightcap .clock{width:16px;height:16px;flex:0 0 auto;color:var(--gold-deep)} .rail{position:relative;padding-inline-start:74px} .rail::before{content:"";position:absolute;inset-inline-start:26px;top:6px;bottom:10px;width:1px; background:linear-gradient(var(--line),rgba(184,137,31,.10))} /* the lit portion of the rail grows as the entries arrive */ .rail::after{content:"";position:absolute;inset-inline-start:26px;top:6px;width:1px;height:0; background:linear-gradient(var(--gold-bright),var(--gold-deep)); transition:height 1.6s cubic-bezier(.2,.7,.25,1)} .rail.on::after{height:calc(100% - 16px)} .ev{position:relative;padding:0 0 26px 0;opacity:0;transform:translateY(10px); transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.25,1)} .ev.on{opacity:1;transform:none} .ev:last-child{padding-bottom:0} .ev time{position:absolute;inset-inline-start:-74px;top:1px;width:44px;text-align:end; font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-soft); font-variant-numeric:tabular-nums} .ev .pip{position:absolute;inset-inline-start:-22px;top:5px;width:9px;height:9px;border-radius:50%; background:var(--panel);border:1.5px solid var(--gold-deep);box-shadow:0 0 0 3px var(--panel)} .ev.on .pip{background:var(--gold-deep)} .ev h3{font-size:15.6px;font-weight:700;font-family:var(--sans);letter-spacing:0} .ev p{margin:4px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.5} .ev .tag{display:inline-block;margin-top:7px;font-family:var(--mono);font-size:10.5px; letter-spacing:.06em;color:var(--ink-soft);border:1px solid var(--line); border-radius:999px;padding:2px 8px;background:rgba(255,253,247,.7)} /* the morning summary card that closes the timeline */ .wake{margin-top:26px;background:rgba(255,253,247,.94);border:1px solid var(--line); border-radius:14px;padding:18px 20px;box-shadow:0 26px 54px -34px rgba(60,45,15,.40)} .wake .plabel{margin-bottom:8px} .wake ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .wake li{display:flex;gap:10px;align-items:baseline;font-size:14px} .wake li b{font-family:var(--mono);font-size:13px;color:var(--gold-deep); font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:2.2em} /* ---------- the jobs board: several processes in flight at once ---------- */ .board{margin-top:44px;border:1px solid var(--line);border-radius:16px;overflow:hidden; background:rgba(255,253,247,.94);box-shadow:0 26px 54px -34px rgba(60,45,15,.36)} .bhead{display:flex;align-items:center;gap:10px;padding:13px 18px; border-bottom:1px solid var(--line);background:var(--panel)} .bhead b{font-size:12.5px} .bhead .mono{margin-inline-start:auto;font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-soft)} .job{display:grid;grid-template-columns:1.5fr 1fr 122px 76px;gap:14px;align-items:center; padding:13px 18px;border-bottom:1px solid rgba(184,137,31,.14);font-size:14px} .job:last-child{border-bottom:0} .job .what{font-weight:600} .job .who{font-size:12.5px;color:var(--ink-soft)} .job .st{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)} .job .st s{display:block;flex:1;height:3px;border-radius:99px;text-decoration:none; background:rgba(184,137,31,.16);overflow:hidden;position:relative} .job .st s::after{content:"";position:absolute;inset:0 auto 0 0;width:0%; background:linear-gradient(90deg,var(--gold-bright),var(--gold-deep)); transition:width .8s cubic-bezier(.3,.7,.3,1)} .job[data-state="done"] .st s::after{width:100%} .job[data-state="run"] .st s::after{width:62%} .job[data-state="queue"] .st s::after{width:0%} .job[data-state="done"] .st{color:var(--gold-deep)} .job .when{text-align:end;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft); font-variant-numeric:tabular-nums} .board .bfoot{padding:11px 18px;font-size:12px;color:var(--ink-soft);background:var(--panel); display:flex;gap:8px;align-items:center} @media (max-width:900px){ .nightgrid{grid-template-columns:1fr} .job{grid-template-columns:1fr auto;gap:6px 12px} .job .who{grid-column:1/-1} .job .st{grid-column:1/-1} } /* ---------- testimonial ---------- One real sentence from a real person. It sits with the workshop because that is what it is about; using it under the night timeline would imply it praised the unattended systems, which it does not. */ .quote{margin-top:26px;border-top:1px solid var(--line);padding-top:24px} .quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.12rem,1.6vw,1.42rem); line-height:1.34;letter-spacing:-.015em;color:var(--ink);max-width:30ch} .quote blockquote q{quotes:none} .quote .qm{color:var(--gold-deep)} .quote figcaption{margin-top:10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-soft)} /* ---------- reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.25,1),transform .8s cubic-bezier(.2,.7,.25,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s} .reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s} /* hero reveals on load, not on scroll */ .rv{opacity:0;transform:translateY(16px);animation:rise .95s cubic-bezier(.2,.7,.25,1) forwards} @keyframes rise{to{opacity:1;transform:none}} .a1{animation-delay:.10s}.a2{animation-delay:.22s}.a3{animation-delay:.34s} .a4{animation-delay:.44s}.a5{animation-delay:.54s} @media (max-width:980px){ .g4{grid-template-columns:repeat(2,1fr)} .g5{grid-template-columns:repeat(2,1fr)} .g5>*,.g5>*:nth-child(4),.g5>*:nth-child(5){grid-column:auto} .strip{grid-template-columns:1fr} } @media (max-width:940px){ /* keep the paid lane and the currency control reachable on a phone; only the in-page section links are dropped (there is no hamburger yet) */ nav{gap:10px} /* Was a[href^="#"], which only caught the anchor links: the old Course materials link was an absolute URL, stayed visible, and collided with the wordmark at 390px. Any non-button nav link goes. The log-in that replaced it IS a .btn, so it survives here on purpose -- a phone is where someone opens their course materials. Re-measured 19.8.2026 at 360/390/412: it wraps to its own row, overlap with the wordmark 0. */ /* header-scoped: unscoped, this also hit footer nav.fnav and wiped the Course materials, Services and Vienna workshop links off every phone. */ /* PHONE HEADER, rebuilt 20.8.2026. The first attempt let the nav wrap inside the bar, which pushed the toggle onto a third row and left the X floating under the panel. The nav is taken out of the flex flow instead: closed it renders nothing, so the bar is exactly the wordmark and the button; open it is a panel hanging under the bar with everything in it, language and currency included. */ .menu-toggle{display:flex} header .bar{flex-wrap:nowrap;position:relative} nav#navlinks{position:absolute;top:calc(100% + 6px);inset-inline:0;flex-direction:column; align-items:stretch;gap:0;background:var(--white);border:1px solid var(--line); border-radius:16px;padding:6px 16px 14px; box-shadow:0 26px 52px -30px rgba(60,45,15,.5); opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none; transition:opacity .22s ease,transform .22s ease,visibility .22s} nav#navlinks.open{opacity:1;visibility:visible;transform:none;pointer-events:auto} nav#navlinks > *{width:100%} nav#navlinks a:not(.btn){display:block;padding:13px 2px;font-size:16.5px;opacity:1; border-bottom:1px solid var(--line);margin:0;border-inline-start:0;padding-inline-start:2px} nav#navlinks .langpop{margin:12px 0 0} nav#navlinks .langpop-btn{width:100%;justify-content:center} /* the guide button belongs in the panel on a phone, full width, and it is not gated on scroll here -- inside a menu the visitor asked for, it is an answer, not an interruption */ nav#navlinks a.btn.navcta{display:block;text-align:center;margin-top:12px; opacity:1;visibility:visible;transform:none;pointer-events:auto;padding:14px 18px; font-size:15px} } /* Measured on the preview: the lockup and the currency pill overlapped by 24px at 360, 12px at 390 and 4px at 412 -- the bar forced brand + pill + CTA onto one line. Wrapping is the graceful failure. Nothing is hidden, so a Vienna visitor on a phone keeps the route to EUR, which is the point of the control. Re-measured 19.8.2026 after the pill became the language chooser: brand and control are on separate rows at 412, 390 and 360, and the overlap is 0. */ @media (max-width:480px){ header .bar{flex-wrap:wrap;row-gap:11px} header .bar nav{width:100%;justify-content:space-between;gap:8px} .g4,.g3,.g2,.g5,.why{grid-template-columns:1fr} /* And this is what that wrap costs the popover: the control now sits at the START of its own row, so a panel anchored to its right edge runs off the left of the screen -- measured 143px off-viewport at 360 and 390, 142px at 412. Anchor it to the start here, and cap it so it cannot outgrow a narrow phone. */ .langpop-menu{inset-inline-start:0;inset-inline-end:auto; width:min(252px,calc(100vw - 40px))} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .rv{animation:none;opacity:1;transform:none} .scrollcue s{animation:none} } /* QA only: a full-page screenshot uses a page-tall viewport, so a 100svh hero balloons and every section below it reads as mis-measured. ?qa pins the hero to a real fold height so a capture tells the truth. Never used in production. */ body.qa .hero{min-height:820px} /* and force every reveal to its finished state, so a capture never shows a half-faded element and send me hunting a contrast bug that isn't there */ body.qa .reveal{opacity:1!important;transform:none!important;transition:none!important} body.qa .rv{animation:none!important;opacity:1!important;transform:none!important} body.qa .panel{animation:none!important;opacity:1!important} body.qa .ev{opacity:1!important;transform:none!important;transition:none!important} body.qa .ev .pip{background:var(--gold-deep)} body.qa .rail::after{height:calc(100% - 16px)!important;transition:none!important} /* The footer row grew a third child when v2 stopped being a dead end. */ footer .row{flex-wrap:wrap;gap:18px 28px} .fnav{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .fnav a{color:var(--soft);font-size:13.5px;text-decoration:none;white-space:nowrap} .fnav a:hover{color:var(--gold-deep)} .fnav .tag{ font-size:9.5px;letter-spacing:.1em;font-weight:700;color:var(--gold-deep); border:1px solid var(--line);border-radius:4px;padding:1px 4px;margin-inline-start:5px; vertical-align:2px; }