/* Van der Mijl & Company - Commercial page (redesign) - production styles Plain CSS, served from /assets and linked in site.region. Not processed by LESS: the approved rules use :not() and :has() with combinators, which LESS 1.7.5 and 4.2.0 both reject. Every selector is scoped to the reviewed Commercial collection (6ae53c1408649d6c569c9fd1, reviewed as "Commercial Prototype", proposed for promotion to /commercial-advisory) and to #page, so the header, navigation, Site Styles and all other pages are unaffected. Source: the approved prototype CSS v3.2 (style content SHA-256 5b29881512b2994b), rule for rule, without the rule that hid the temporary Code block. No @import, @font-face or JavaScript. Blocks, in page order: opening text c6180caa4b00a1beb284 first button 6b8eabd3e2d2206a08aa opening photo yui_3_17_2_1_1793417912944_25704 (Stocksy 1415440) text A 7f8144042c0404ef8906 H2s: 1 threshold, 2 what we help clarify colonnade yui_3_17_2_1_1793485036570_5181 (Image 4) text B yui_3_17_2_1_1793485036570_5373 H2s: 1 areas of support, 2 how the work is approached, 3 forms of engagement, 4 working relationship working photo yui_3_17_2_1_1793552839670_16768 (Quiet collaboration, neutral monochrome) closing text yui_3_17_2_1_1793552839670_16937 closing button e666434641d8caae077e */ /* ---------- Page frame ---------- */ #collection-6ae53c1408649d6c569c9fd1 #page .main-content { box-sizing: border-box; max-width: 1184px; margin: 0 auto; padding: 64px 48px 120px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > .sqs-block:not(.float):not(.sqs-float-right):not(.sqs-float-left) { width: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-row { margin-left: 0; margin-right: 0; } /* ---------- Type ---------- */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html .sqs-html-content { color: #231F20; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html p, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html li { font-size: 19px; line-height: 30px; color: #231F20; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html p { margin: 0 0 20px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html li > p { font-size: inherit; line-height: inherit; margin: 0; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html h2 { font-size: 44px; line-height: 50px; letter-spacing: 0; color: #231F20; margin: 96px 0 12px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html h3 { font-family: adobe-caslon-pro, Georgia, serif; font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: 0; text-transform: none; color: #4B4643; margin: 0 0 28px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html h1, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html h2, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html h3 { text-align: left; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html a { color: #231F20; text-decoration: underline; text-decoration-color: #4F6152; text-underline-offset: 3px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html a:hover { text-decoration-color: #231F20; text-decoration-thickness: 2px; } /* Ruled indexes in place of bullets */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html ul { list-style: none; margin: 8px 0 32px; padding: 0; border-top: 1px solid #231F20; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html ul > li { list-style: none; margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(35, 31, 32, .3); break-inside: avoid; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html li > p::before { content: none; display: none; } /* ---------- Opening ---------- */ #collection-6ae53c1408649d6c569c9fd1 #page #block-c6180caa4b00a1beb284 h1 { font-family: futura-pt, "Futura PT", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 13px; line-height: 20px; letter-spacing: .16em; text-transform: uppercase; color: #5E5853; margin: 0 0 24px; text-align: left !important; /* the heading carries an inline centre alignment from the editor */ } #collection-6ae53c1408649d6c569c9fd1 #page #block-c6180caa4b00a1beb284 h2 { font-size: 76px; line-height: 80px; margin: 0 0 32px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-c6180caa4b00a1beb284 h2 + p { font-size: 26px; line-height: 38px; margin-bottom: 32px; } /* ---------- Buttons: ink, no green (editor and rendered page) ---------- */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-button-container { text-align: left; justify-content: flex-start; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-button-element, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-button-element:visited { background-color: #231F20 !important; color: #F2EFEB !important; border: 0; border-radius: 0; font-family: futura-pt, "Futura PT", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase; padding: 18px 28px; opacity: 1; box-shadow: none !important; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-button-element:hover, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-button-element:active { background-color: #4B4643 !important; opacity: 1; box-shadow: none !important; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-button-element:focus-visible { outline: 2px solid #231F20; outline-offset: 4px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-6b8eabd3e2d2206a08aa { margin-top: 8px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-e666434641d8caae077e { margin-top: 16px; } /* ---------- Photographs: Image blocks cropped with CSS, full file kept in Squarespace ---------- */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > .sqs-block-image { width: 100% !important; /* outranks the template's block-width rule, which collapsed the photo */ margin-top: 0; margin-bottom: 0; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-block-image .image-block-outer-wrapper, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-block-image figure, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-block-image .intrinsic, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-block-image .image-block-wrapper { width: 100% !important; max-width: 100% !important; margin: 0; padding: 0 !important; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-block-image .sqs-image-shape-container-element { position: relative; overflow: hidden; height: 0; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-block-image img { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-block-image .image-caption-wrapper { display: none; } /* Opening photo: Stocksy 1415440, 4:5, at most 400px wide. object-position needs !important: Squarespace sets it inline. */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793417912944_25704 { max-width: 400px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793417912944_25704 .sqs-image-shape-container-element { padding-bottom: 125% !important; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793417912944_25704 img { object-position: 50% 41.7% !important; } /* Colonnade: Image 4, 3:2 on desktop and tablet, 4:3 on phones */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793485036570_5181 { margin: 16px 0 40px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5181 .sqs-image-shape-container-element { padding-bottom: 66.6667% !important; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5181 img { object-position: 50% 50% !important; } /* Working relationship photo: the full 4:5 frame (1122 x 1402), no crop. Illustrative, no caption. */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793552839670_16768 { margin: 12px 0 0; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793552839670_16768 .sqs-image-shape-container-element { padding-bottom: 124.955% !important; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793552839670_16768 img { object-position: 50% 50% !important; } /* ---------- Text A: threshold and "what we help clarify" ---------- */ /* Pull statement: first line of the threshold section */ #collection-6ae53c1408649d6c569c9fd1 #page #block-7f8144042c0404ef8906 .sqs-html-content > h2:nth-of-type(1) + h3 + p { font-size: 30px; line-height: 40px; margin: 8px 0 28px; } /* ---------- Text B: from the clarify pull statement to the closing ---------- */ /* Pull statements: the clarify closing line beside the colonnade, and the second paragraph of "working relationship" */ #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > p:first-child, #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(4) + h3 + p + p { font-size: 30px; line-height: 40px; margin: 8px 0 28px; } /* Capability index (B section 1): titles in ink, second paragraphs quieter */ #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(1) ~ h3:not(h2:nth-of-type(2) ~ *) { color: #231F20; font-size: 26px; line-height: 34px; margin: 0; padding: 20px 0 8px; border-top: 1px solid #231F20; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(1) ~ h3:not(h2:nth-of-type(2) ~ *) + p + p { color: #4B4643; padding-bottom: 20px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > :has(+ h2:nth-of-type(2)) { margin-bottom: 96px; } /* 5D Cycle (B section 2): the page's one sage band, full width. Painted with a border-image that reaches out sideways only, so nothing inside the band is clipped. */ #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2), #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) ~ :not(h2:nth-of-type(3), h2:nth-of-type(3) ~ *) { margin: 0; border-image: linear-gradient(#BCC8BD, #BCC8BD) fill 0 / 0 / 0 100vmax; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) { font-family: futura-pt, "Futura PT", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 13px; line-height: 20px; letter-spacing: .16em; text-transform: uppercase; color: #4B4643; padding-top: 88px; padding-bottom: 10px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 { font-size: 44px; line-height: 50px; color: #231F20; padding-bottom: 28px; } /* Introduction paragraph, which carries the static diagram */ #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 + p { padding-bottom: 24px; counter-reset: vdm-stage; } /* Static 5D diagram: five numbered stages on a loop, dashed return paths. Decorative; the stage descriptions beside it are the content. Interaction is deferred. */ #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 + p::after { content: ""; display: block; width: 100%; max-width: 280px; aspect-ratio: 1 / 1; margin: 24px auto 0; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23231F20'%3E%3Ccircle cx='260' cy='260' r='180' stroke-width='1.5'/%3E%3Cg stroke='%234B4643' stroke-width='1.2' stroke-dasharray='5 7'%3E%3Cpath d='M431 204 Q260 260 260 80'/%3E%3Cpath d='M154 406 Q260 260 366 406'/%3E%3Cpath d='M260 80 Q260 260 89 204'/%3E%3C/g%3E%3Cg fill='%23BCC8BD' stroke-width='1.5'%3E%3Ccircle cx='260' cy='80' r='30'/%3E%3Ccircle cx='431' cy='204' r='30'/%3E%3Ccircle cx='366' cy='406' r='30'/%3E%3Ccircle cx='154' cy='406' r='30'/%3E%3Ccircle cx='89' cy='204' r='30'/%3E%3C/g%3E%3C/g%3E%3Cg font-family='Georgia,serif' font-size='24' fill='%23231F20' text-anchor='middle'%3E%3Ctext x='260' y='88'%3E1%3C/text%3E%3Ctext x='431' y='212'%3E2%3C/text%3E%3Ctext x='366' y='414'%3E3%3C/text%3E%3Ctext x='154' y='414'%3E4%3C/text%3E%3Ctext x='89' y='212'%3E5%3C/text%3E%3C/g%3E%3C/svg%3E"); } /* Stages: every paragraph after the introduction except the section's last one, numbered in order */ #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 + p ~ p:not(h2:nth-of-type(3) ~ *):not(:has(+ h2)) { padding: 0 0 18px; counter-increment: vdm-stage; /* rules sit on the labels: the band's border-image replaces borders */ } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 + p ~ p:not(h2:nth-of-type(3) ~ *):not(:has(+ h2))::before { content: counter(vdm-stage, decimal-leading-zero); display: block; margin-bottom: 4px; border-top: 1px solid #231F20; padding-top: 16px; font-family: futura-pt, "Futura PT", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 13px; line-height: 20px; letter-spacing: .16em; color: #4B4643; } /* Rule under the last stage, then the closing paragraph of the band */ #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 + p ~ p:has(+ p + h2:nth-of-type(3)) { padding-bottom: 0; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 + p ~ p:has(+ p + h2:nth-of-type(3))::after { content: ""; display: block; height: 18px; border-bottom: 1px solid #231F20; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) ~ p:has(+ h2:nth-of-type(3)) { padding: 40px 0 96px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(3) { margin-top: 96px; } /* Closing text: headline and paragraph, followed by the closing button */ #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793552839670_16937 .sqs-html-content > h2:first-child { font-size: 64px; line-height: 68px; margin: 120px 0 28px; } /* ---------- Desktop: 12-column grid ---------- */ @media screen and (min-width: 1024px) { #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12::before, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12::after { display: none; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > .sqs-block { grid-column: 1 / -1; } /* Opening: text and first button on the left, photograph on the right from the headline down */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-c6180caa4b00a1beb284 { grid-column: 1 / span 7; grid-row: 1; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-6b8eabd3e2d2206a08aa { grid-column: 1 / span 7; grid-row: 2; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793417912944_25704 { grid-column: 8 / span 5; grid-row: 1 / span 2; justify-self: end; padding-top: 44px; } /* Text A keeps its own 12-column grid */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-7f8144042c0404ef8906 .sqs-html-content { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } /* Text B's paragraphs join the page grid, so the clarify pull statement can sit beside the colonnade */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-block-content, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content { display: contents; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793485036570_5181 { grid-column: 1 / span 7; margin: 24px 0 0; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > p:first-child { grid-column: 9 / span 4; align-self: end; margin: 0; font-size: 26px; line-height: 36px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-7f8144042c0404ef8906 .sqs-html-content > *, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > * { grid-column: 1 / span 7; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-7f8144042c0404ef8906 .sqs-html-content > h2, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2 { grid-column: 1 / span 8; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-7f8144042c0404ef8906 .sqs-html-content > h2:first-child { margin-top: 112px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-7f8144042c0404ef8906 .sqs-html-content > h2:nth-of-type(1) + h3 + p { grid-column: 1 / span 9; } /* Lists across the full width: three columns for the threshold triggers, two elsewhere */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-7f8144042c0404ef8906 .sqs-html-content > ul, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > ul { grid-column: 1 / -1; columns: 2; column-gap: 24px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-7f8144042c0404ef8906 .sqs-html-content > ul:not(h2:nth-of-type(2) ~ *) { columns: 3; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-7f8144042c0404ef8906 .sqs-html-content > h2:nth-of-type(2) ~ ul > li { font-size: 22px; line-height: 32px; } /* Capability index: title left, description right */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(1) ~ h3:not(h2:nth-of-type(2) ~ *) { grid-column: 1 / span 5; grid-row: span 2; padding-right: 24px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(1) ~ p:not(h2:nth-of-type(2) ~ *) { grid-column: 7 / span 6; margin: 0; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(1) ~ h3:not(h2:nth-of-type(2) ~ *) + p { border-top: 1px solid #231F20; padding-top: 22px; padding-bottom: 14px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(1) ~ h3:not(h2:nth-of-type(2) ~ *) + p + p { padding-bottom: 36px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(1) ~ p:has(+ h2:nth-of-type(2)) { margin-bottom: 96px; } /* 5D band: introduction and diagram left, stages right. The introduction sits above the band paint of the stage beside it so the diagram can hang below it uncovered. */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 + p { grid-column: 1 / span 5; position: relative; border-image: none; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 + p::after { position: absolute; left: 0; top: 100%; width: 88%; max-width: 360px; margin: 0; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 + p ~ p:not(h2:nth-of-type(3) ~ *):not(:has(+ h2)) { grid-column: 7 / span 6; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) ~ p:has(+ h2:nth-of-type(3)) { grid-column: 1 / -1; padding-right: 33%; padding-top: 56px; } /* Working relationship: text in columns 1-7, photograph in 9-12 from the heading down, spanning the section's five rows. order only changes grid placement (the photo is placed straight after the heading); the reading order stays text, photo, closing. */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793552839670_16768 { grid-column: 9 / span 4; grid-row: span 5; margin: 96px 0 0; padding-top: 0; /* photo top level with the heading */ } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(4) ~ *, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793552839670_16937 .sqs-html-content > *, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793552839670_16768 ~ .sqs-block { order: 1; } /* Closing text joins the page grid like text B: headline across nine columns, paragraph across seven */ #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793552839670_16937, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793552839670_16937 .sqs-block-content, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793552839670_16937 .sqs-html-content { display: contents; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793552839670_16937 .sqs-html-content > * { grid-column: 1 / span 7; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793552839670_16937 .sqs-html-content > h2:first-child { grid-column: 1 / span 9; } } /* ---------- Tablet ---------- */ @media screen and (min-width: 641px) and (max-width: 1023px) { #collection-6ae53c1408649d6c569c9fd1 #page .main-content { padding: 48px 48px 96px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > .sqs-block { max-width: 720px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793417912944_25704 { max-width: 400px; margin: 48px 0 8px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793552839670_16768 { max-width: 400px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-c6180caa4b00a1beb284 h2 { font-size: 60px; line-height: 64px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-7f8144042c0404ef8906 .sqs-html-content > ul:not(h2:nth-of-type(2) ~ *), #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > ul { columns: 2; column-gap: 24px; } } /* ---------- Phone ---------- */ @media screen and (max-width: 640px) { #collection-6ae53c1408649d6c569c9fd1 #page .main-content { padding: 28px 20px 64px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html p, #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html li { font-size: 18px; line-height: 28px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html h2 { font-size: 32px; line-height: 38px; margin-top: 56px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-block-html h3 { font-size: 22px; line-height: 29px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-c6180caa4b00a1beb284 h2 { font-size: 44px; line-height: 48px; margin-bottom: 22px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-c6180caa4b00a1beb284 h2 + p { font-size: 21px; line-height: 31px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793417912944_25704 { max-width: 335px; margin: 36px 0 8px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) .sqs-col-12 > #block-yui_3_17_2_1_1793485036570_5181 { margin: 8px 0 28px; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5181 .sqs-image-shape-container-element { padding-bottom: 75% !important; } #collection-6ae53c1408649d6c569c9fd1 #page .sqs-layout:not(.sqs-editing) #block-yui_3_17_2_1_1793485036570_5181 img { object-position: 58% 50% !important; } #collection-6ae53c1408649d6c569c9fd1 #page #block-7f8144042c0404ef8906 .sqs-html-content > h2:nth-of-type(1) + h3 + p, #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > p:first-child, #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(4) + h3 + p + p { font-size: 24px; line-height: 33px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > :has(+ h2:nth-of-type(2)) { margin-bottom: 56px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) { padding-top: 48px; margin-top: 0; font-size: 13px; line-height: 20px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) + h3 { font-size: 32px; line-height: 38px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(2) ~ p:has(+ h2:nth-of-type(3)) { padding: 28px 0 56px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793485036570_5373 .sqs-html-content > h2:nth-of-type(3) { margin-top: 56px; } #collection-6ae53c1408649d6c569c9fd1 #page #block-yui_3_17_2_1_1793552839670_16937 .sqs-html-content > h2:first-child { font-size: 40px; line-height: 44px; margin-top: 72px; } }