/* g46 · Moreno's review of g45 (lanes/sw-site/brief-g46.md). Loaded last, /g22/ pages only. */

/* item 1: the weekly places, directly under the hero buttons, a little stronger than the offer line under it */
.g46-cap{margin:12px 0 0;font-size:17px;line-height:1.35;font-weight:600;color:var(--txt);letter-spacing:0}
.g46-cap+.g38-offer{margin-top:4px}

/* item 2: "Bekijk ons portfolio" without an arrow; the green button keeps its own */
.g46-na::after{content:none!important;display:none!important}

/* item 5: the project cards on /portfolio/ keep their link, without the arrow behind the line */
.g43-cap::after{content:none!important;display:none!important}

/* item 7: the real header logo of each demo site in its window bar */
.awd-logo.g46-lg{display:flex;align-items:center;gap:0}
.awd-logo.g46-lg img{display:block;height:40px;width:auto;max-width:none}

/* item 12: "Wat past bij uw vak?" in place of the links row */
.g46-vk{margin:28px 0 8px;padding:20px 0 0;border-top:1px solid var(--rule)}
.g46-vk-q{margin:0 0 12px;font-size:15px;font-weight:650;color:var(--txt)}
.g46-vk-os{display:flex;flex-wrap:wrap;gap:8px}
.g46-vk-o{appearance:none;border:1px solid rgba(243,238,228,.28);background:transparent;color:var(--txt);font:inherit;font-size:15px;line-height:1;padding:11px 16px;border-radius:999px;cursor:pointer;transition:scale .25s var(--g-ease),background-color .2s,border-color .2s,color .2s}
.g46-vk-o:hover{scale:1.04;border-color:rgba(166,220,193,.7)}
.g46-vk-o:active{scale:.97}
.g46-vk-o:focus-visible{outline:2px solid #a6dcc1;outline-offset:3px}
.g46-vk-o[aria-checked="true"]{background:#a6dcc1;border-color:#a6dcc1;color:#08140f}
.g46-vk-out{min-height:0}
.g46-vk-l{margin:16px 0 0;font-size:16px;line-height:1.55;color:var(--soft);max-width:640px}
.g46-vk-l b{color:var(--txt);font-weight:650}
.g46-vk-a{color:var(--soft);text-decoration:none;border:0;white-space:nowrap}
.g46-vk-a:hover{color:var(--txt)}
@media (prefers-reduced-motion:reduce){.g46-vk-o{scale:none!important}}

/* item 13: one large gap between the sections of /over-ons/, as on the home page (150 px) */
html .g25-oo{padding-bottom:0}
html .g46-story,html .g25-prop{padding-top:150px!important;margin-top:0!important}
html .g25-prop+.g-invite20{margin-top:150px!important}

/* item 14: name and role on one line with the dash, as on /vacatures/ (same portrait width) */
html .g46-team{display:grid!important;grid-template-columns:1fr 1fr;gap:24px;width:590px;max-width:100%}
html .g46-team .wp-person{margin:0;width:auto}
html .g46-team .wp-f{display:block;width:100%;padding:0;background:none;box-shadow:none;transform:none}
html .g46-team .pt img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 40px 60px -26px rgba(0,0,0,.9)}
html .g46-team .wl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:16px 0 0}
html .g46-team .wl>b{display:flex;align-items:baseline;gap:12px;font-size:22px}
html .g46-team .wl>b::after{content:""!important;display:block!important;width:14px;height:1px;align-self:center;background:rgba(116,214,166,.6)}
html .g46-team .wl>span{margin:0}

/* item 16: the story, a reading moment, display heading, body measure */
.g46-story-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.g46-story-h{margin:0;font-size:44px;line-height:1.1;letter-spacing:-.01em;color:var(--txt);max-width:15ch;text-wrap:balance}
.g46-story-t{max-width:62ch}
.g46-story-t p{margin:0 0 20px;font-size:19px;line-height:1.65;color:var(--txt)}
.g46-story-t p:last-child{margin-bottom:0}
@media (max-width:900px){.g46-story-in{grid-template-columns:1fr;gap:28px}}

/* item 17: the caption's second sentence on its own line */
.g46-tc br{display:block}

/* item 19: the vacancy's action, a real filled button directly under the lists */
html .g25-vac .vac-a{border-top:0;margin-top:36px;padding-top:0;display:block}
html .g25-vac .vac-a .acts{margin:0}
.g46-apply{display:inline-flex;align-items:center}
.g46-apply::after{content:none!important;display:none!important}
.g46-apply:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 22px 40px -16px rgba(116,214,166,.85),0 10px 20px -16px rgba(0,0,0,.9)}
.g46-apply:active{scale:.96!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.28)}

/* items 22 and 23: the dropdown and the date picker, in the look of the form fields; no native menu or calendar */
.g46-dd,.g46-dp{position:relative}
.g46-pick{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:52px;padding:0 16px;border:0;border-radius:3px;background:rgba(5,12,9,.55);box-shadow:inset 0 0 0 1px rgba(243,238,228,.2);color:rgba(205,200,189,.6);font:inherit;font-size:17px;text-align:left;cursor:pointer;transition:box-shadow .2s,background-color .2s}
.has-v>.g46-pick{color:#f3eee4}
.g46-pick:hover{box-shadow:inset 0 0 0 1px rgba(243,238,228,.34)}
.g46-pick:focus-visible,.is-open>.g46-pick{outline:none;background:rgba(5,12,9,.7);box-shadow:inset 0 0 0 1px var(--g-mint),0 0 0 3px rgba(116,214,166,.18)}
.g37-fld.is-bad .g46-pick{box-shadow:inset 0 0 0 1px #e9a98a,0 0 0 3px rgba(233,169,138,.12)}
.g46-chev{width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--g-ease);color:#a6dcc1}
.is-open .g46-chev{transform:translateY(2px) rotate(225deg)}
.g46-cal{width:18px;height:16px;border:1.5px solid #a6dcc1;border-top-width:4px;border-radius:2px}
.g46-dd-l,.g46-dp-p{position:absolute;z-index:30;left:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:#0f1d17;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(243,238,228,.16),0 24px 48px -18px rgba(0,0,0,.85)}
.g46-dd-l{right:0;max-height:296px;overflow:auto;outline:none}
.g46-dd-l li{padding:11px 12px;border-radius:3px;font-size:16px;color:#e6e0d4;cursor:pointer}
.g46-dd-l li.is-act{background:rgba(166,220,193,.14);color:#f3eee4}
.g46-dd-l li[aria-selected="true"]{color:#a6dcc1;font-weight:650}
.g46-dp-p{width:340px;padding:14px}
.g46-dp-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.g46-dp-m{margin:0;font-size:16px;font-weight:650;color:#f3eee4;text-transform:capitalize}
.g46-dp-n{appearance:none;width:36px;height:36px;border:0;border-radius:3px;background:transparent;cursor:pointer;position:relative;transition:background-color .2s,scale .2s}
.g46-dp-n::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-left:1.5px solid #a6dcc1;border-bottom:1.5px solid #a6dcc1;transform:translate(-30%,-50%) rotate(45deg)}
.g46-dp-n[data-d="1"]::before{transform:translate(-70%,-50%) rotate(225deg)}
.g46-dp-n:hover{background:rgba(166,220,193,.12);scale:1.06}
.g46-dp-n:active{scale:.94}
.g46-dp-n:disabled{opacity:.3;cursor:default;background:none;scale:none}
.g46-dp-n:focus-visible,.g46-day:focus-visible{outline:2px solid #a6dcc1;outline-offset:1px}
.g46-dp-g{width:100%;border-collapse:collapse;table-layout:fixed}
.g46-dp-g th{padding:6px 0;font-size:13px;font-weight:600;color:rgba(205,200,189,.7);text-align:center}
.g46-dp-g td{padding:2px;text-align:center}
.g46-day{appearance:none;width:100%;height:40px;border:0;border-radius:3px;background:transparent;color:#e6e0d4;font:inherit;font-size:15px;cursor:pointer;transition:background-color .15s}
.g46-day:hover{background:rgba(166,220,193,.14)}
.g46-day.is-today{box-shadow:inset 0 0 0 1px rgba(166,220,193,.5)}
.g46-day.is-sel{background:#a6dcc1;color:#08140f;font-weight:700}
.g46-day:disabled{color:rgba(205,200,189,.4);cursor:default;background:none}

/* item 4: /portfolio/ head, the paragraph's first line level with the x-height of "ontwerp" (measured 182.5 vs 187, docs/g46/pfhead-*.out); the cards follow by the same 4.5 px */
.g37-vh-t>.lead{position:relative;top:4.5px}
.g37-vh-t+.g37-vg,.g37-vg{margin-top:40.5px}
html body .g46-team .wp-person{width:auto!important;max-width:none!important}
html body .g46-team .wl{display:flex!important}
html body .g46-team .wl>span{display:block;margin:0!important}
html body .g46-apply{padding:0 34px!important;min-width:200px;justify-content:center}
html body .g46-team .wl>b{display:flex!important;align-items:baseline;gap:12px}
html body .g46-team .pt{display:block;width:240px;border:0;box-shadow:none;background:none}
html body .g46-team .wp-f::before,html body .g46-team .wp-f::after,html body .g46-team .pt::before,html body .g46-team .pt::after{content:none!important;display:none!important}

/* item 11: Merk compleet as a delivery. Top: the text beside one overview of everything; then each piece at reading size */
html .g46-mc{display:block!important}
.g46-mc-top{display:grid;grid-template-columns:418px minmax(0,1fr);gap:56px;align-items:start}
.g46-mc-ov{margin:0}
.g46-mc-ov img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.g46-mc-ov figcaption,.g46-mc figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--soft)}
.g46-mc figcaption b{color:var(--txt);font-weight:650;margin-right:6px}
.g46-mc-ov .g43-ex{display:block}
.g46-mc-part{margin-top:96px;padding-top:40px;border-top:1px solid rgba(243,238,228,.14)}
.g46-mc-pt{display:grid;grid-template-columns:418px minmax(0,1fr);gap:56px;align-items:baseline;margin-bottom:28px}
.g46-mc-pt h3{margin:0;font-size:32px;line-height:1.1;color:var(--txt);font-weight:400}
.g46-mc-pt p{margin:0;font-size:17px;line-height:1.6;color:var(--soft);max-width:60ch}
/* the guide reader: one page large, the twelve below */
.g46-gr-m{margin:0}
.g46-gr-m img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.g46-gr-t{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;margin-top:16px}
.g46-gt{appearance:none;border:0;background:none;padding:0;cursor:pointer;text-align:left;color:var(--soft);font:inherit;font-size:12px;line-height:1.3;transition:scale .25s var(--g-ease),color .2s}
.g46-gt img{display:block;width:100%;height:auto;border-radius:2px;opacity:.62;outline:2px solid transparent;outline-offset:2px;transition:opacity .2s,outline-color .2s}
.g46-gt span{display:block;margin-top:6px}
.g46-gt:hover{scale:1.04;color:var(--txt)}
.g46-gt:hover img{opacity:1}
.g46-gt:active{scale:.96}
.g46-gt[aria-pressed="true"]{color:var(--txt)}
.g46-gt[aria-pressed="true"] img{opacity:1;outline-color:#a6dcc1}
.g46-gt:focus-visible{outline:none}
.g46-gt:focus-visible img{outline-color:#f3eee4}
/* social */
.g46-soc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 28px;align-items:start}
.g46-soc figure{margin:0}
.g46-soc img{display:block;width:100%;height:auto;border-radius:3px}
.g46-pf{grid-column:1 / span 4;display:grid!important;grid-template-columns:repeat(3,1fr);gap:14px}
.g46-pf img.ci{border-radius:50%}
.g46-pf figcaption{grid-column:1 / -1}
.g46-posts{grid-column:5 / span 5;display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px}
.g46-posts figcaption{grid-column:1 / -1}
.g46-sty{grid-column:10 / span 3}
.g46-sty img{border-radius:10px}
.g46-ban{grid-column:span 6}
.g46-ban-w{grid-column:1 / -1}
/* card, signature, files */
.g46-cm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:28px;align-items:start}
.g46-card{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g46-card img,.g46-mail img{display:block;width:100%;height:auto;border-radius:3px}
.g46-card figcaption{grid-column:1 / -1}
.g46-mail{margin:0}
.g46-files-h{margin:0 0 10px;font-size:14px;font-weight:650;color:var(--txt)}
.g46-files ul{list-style:none;margin:0;padding:0}
.g46-files li{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:9px 0;border-top:1px solid rgba(243,238,228,.14);font-size:15px;line-height:1.4;color:var(--soft)}
.g46-files li b{color:var(--txt);font-weight:650}
@media (prefers-reduced-motion:reduce){.g46-gt{scale:none!important}}
.g46-gt{display:flex;flex-direction:column;justify-content:flex-start;align-self:start}

/* item 24: the blog filters on one row; the chip rows stay in the page for ?oud and as the filter source */
.g46-bfon .g43-fb>.g45-fl,.g46-bfon .g43-fb>.g43-chips{display:none!important}
.g46-bf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.4fr);gap:12px;align-items:center;margin-top:28px;max-width:980px}
.g46-bf .g43-sf{display:flex;align-items:center;gap:14px;margin:0}
.g46-bf .g43-zoek{flex:1;min-width:0;height:52px}
.g46-bf .g43-n{white-space:nowrap;font-size:14px;color:var(--soft)}
.g46-bf-b{justify-content:flex-start;color:#f3eee4}
.g46-bf-k{font-size:13px;color:rgba(205,200,189,.75);flex:none}
.g46-bf-b .g46-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.g46-bfd.is-set .g46-bf-b{box-shadow:inset 0 0 0 1px rgba(166,220,193,.7)}
.g46-bfd .g46-dd-l{min-width:280px;max-height:380px}
html.g46-bfon .g-roomo-wide{padding-bottom:0}
.g46-bf .g43-zoek{border-radius:3px}

/* item 24: the article reading measure, about 70 characters a line (was 728 px, about 93), a touch larger and airier */
html .prose.ab-body{max-width:620px}
html .prose.ab-body p,html .prose.ab-body li{font-size:19px;line-height:1.65}
html .prose.ab-body h2{margin-top:64px}
html body .g22-side .g46-cap+.g38-offer{margin-top:4px!important}

/* item 12: the trade pages in the footer, their own column */
html .gf-in{grid-template-columns:4fr 6fr 3fr;gap:48px}
html .gf nav.g46-fv{grid-template-columns:auto;justify-content:start;gap:12px}
.g46-fv-h{margin:0;font-size:13px;font-weight:650;color:#a6dcc1}

/* g46.1 item 1: "Bekijk ons portfolio" without the 9 px bottom padding, so its label shares the button label's baseline */
html body a.g46-na{padding-top:0!important;padding-bottom:0!important}

/* g46.1 item 6: "Wat past bij uw merk?" lead 40 px above the rule of the first package (was 16) */
html .g-sec.mk>.wrap>p.lead{margin-bottom:40px}

/* g46.1 item 8: the demo bar's site note on one line, even space above and below */
html .awd-bar .fd-site,html .awd-bar .fd-site .g-demo{white-space:nowrap}
/* Stilwater's bar hid every image (r28: .fd[data-k=stilwater] .fd-bar img), so its real logo was invisible since g46; it shows now, centred, the note on one line at the left */
html .fd[data-k=stilwater] .fd-bar img{display:block!important;height:34px!important}
html .fd[data-k=stilwater] .fd-site{max-width:none;white-space:nowrap}
html .fd[data-k=stilwater] .fd-bar{justify-content:space-between}
html .fd[data-k=stilwater] .fd-site{position:static;transform:none;order:2}

/* g46.1 item 9: article head, 32 px from the heading's baseline to the answer block, 24 px from the block to the byline's capitals (docs/g46/arthead-*.out) */
html main h1:has(+ .ab-answer){margin-bottom:14px!important}
html .ab-answer+.small.meta{margin-top:19px!important}

/* g46.1 item 4: the guide page (1000 px) and its twelve buttons side by side, together within 820 px of height */
html .g46-gr{display:grid;grid-template-columns:1000px minmax(0,1fr);gap:24px;align-items:start}
html .g46-gr-t{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 10px;margin-top:0}   /* g47 H.1: eighteen pages in three columns, so the rail stays as tall as the page image */
html .g46-gt span{margin-top:4px;font-size:12px}
/* g46.1 item 5: social package, the Facebook banner under the profile photos and posts, beside the story; Google and LinkedIn under it */
html .g46-soc{grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 28px}
html .g46-pf{grid-column:1 / span 4;grid-row:1}
html .g46-posts{grid-column:5 / span 5;grid-row:1}
html .g46-sty{grid-column:10 / span 3;grid-row:1 / span 2}
html .g46-ban{grid-column:1 / span 9;grid-row:2}
html .g46-ban+.g46-ban{grid-column:1 / span 4;grid-row:3}
html .g46-ban-w{grid-column:5 / span 8!important;grid-row:3!important}