/* ============================================================================= * * DIAMOND FINANCIALS — MORTGAGE & PROTECTION ADVICE * The shared stylesheet. Every page loads it; a few pages add one more: * css/calculators.css the calculator hub and the five calculator pages * css/six-step.css index.html + six-step-process.html (advice wheel) * css/learn.css index.html + learn.html (explainers, LVR gauge) * * --------------------------------------------------------------------------- * BEFORE YOU EDIT * --------------------------------------------------------------------------- * The HTML pages are edited directly; there is no build step. Unused rules * were cleared out on 2026-11-12 (blog, school and insurance components left * over from the stylesheet this one was forked from), so anything here is * in use — check a page before deleting a rule. * * --------------------------------------------------------------------------- * CONVENTIONS * --------------------------------------------------------------------------- * Naming block_element--modifier .snap_item, .snap_label, .btn--dark. * Single underscore for a child, double * dash for a variant. * Utilities .u-* .u-h2, .u-eyebrow — type only. * State .is-* .is-active, .is-current. JS writes it. * Hooks [data-*] JS reads these. They never carry * styling, so you can rename a class * without breaking a script. * Theming [data-theme-block] "light" | "dark" | "brand" on a section * sets its ground and ink. Prefer adding * that attribute over hard-coding colour. * Colour Always a token. No raw hex below the :root block. * Order Sections run in the order the page does: shell first, then * homepage, then sub-pages, then footer, then responsive last. * * --------------------------------------------------------------------------- * CONTENTS * --------------------------------------------------------------------------- * 01 TOKENS ............... palette, type scale, layout, motion * 02 RESET + BASE ......... element defaults, theme blocks, utilities * 03 PRELOADER ............ homepage splash only * 04 NAVIGATION ........... bar, burger, full-screen overlay * 05 HERO ................. homepage frame-sequence hero * 06 SUBPAGE HERO ......... the blue title block on every other page * 07 INTRO ................ heading + copy * 08 MARQUEE .............. the lender logo strip * 09 AUDIENCE CARDS ....... four-up "who we help" grid * 10 SERVICES RAIL ........ sticky image beside scrolling cover panels * 11 SUBPAGE COMPONENTS ... process steps, checklist, related cards * 12 SUBPAGE SECTIONS ..... tint, image band, checklist, pull quote * 13 TESTIMONIALS ......... draggable card rail * 14 ACCORDION ............ FAQ rows (class is .law, legacy name) * 15 CTA BAND ............. the wide brand-ground call to action * 16 CONTACT .............. form, form states, contact details * 17 TEAM ................. about-page portraits * 18 LEGAL ................ privacy / disclosure / terms typography * 19 FOOTER ............... CTA, link columns, wordmark, legal row * 20 MOBILE TAP TARGETS ... WCAG 2.5.8 sizing * 21 RESPONSIVE ........... every breakpoint, collected in one place * 24 TEAM PROFILE DIALOG .. the adviser pop-up on the team cards * (22 and 23 were removed with the unused blog/insurance rules) * * ========================================================================== */ /* ============================================================================= 01. TOKENS ========================================================================== */ @font-face { font-family: "Blauer Nue"; src: url("../assets/fonts/BlauerNue-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Rubik"; src: url("../assets/fonts/Rubik-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* swatches — brand blue ramp, taken from the logo */ --brand-800: #0b2d42; /* dark ground — the logo blue taken down to a deep navy */ --brand-600: #0d6aa4; /* deeper blue: links on light, and text-bearing fills */ --brand-500: #117ec2; /* logo blue — primary */ --brand-300: #a7d0ea; /* light tint: copy on the dark ground */ --beige-500: #fffefc; --light-100: #e0e0e0; --light-200: #ccc; --light-500: #8f8f8f; --light-700: #666; /* Restored 2026-09-16. These names arrived with a fork of this stylesheet and are referenced ~77 times through the file; mapping them back to Diamond's palette is safer than unpicking 63 selectors by hand. */ --sand-200: #eef4fa; /* .section--tint */ --sand-300: rgba(11, 45, 66, 0.16); /* hairlines and card edges on light */ --panel-100: #f3f3f3; /* the neutral panel behind the testimonial rail */ --error-600: #b3261e; /* form validation */ --accent-500: #fffefc; /* .btn — only ever used on the brand-blue band */ --accent-100: #eef4fa; --seal-600: #0d6aa4; --seal-400: #117ec2; --seal-100: #eef4fa; --ink-rgb: 11 45 66; /* --brand-800 */ --ivory-rgb: 255 254 252; /* --beige-500 */ /* Logo artwork, inlined. A CSS mask image is CORS-checked where a background-image is not, so opened from disk -- origin "null" -- Chrome blocks assets/logo.svg and every masked logo paints nothing. "data" is one of the few schemes it allows there. */ --logo-full: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 660.79 107.67' fill='%23000'%3E %3Cg transform='scale(0.43572) translate(-140.7,0)'%3E %3Cpath d='M261.97 244.29C254.42 244.29 244.58 238.52 232.7 227.13C224.17 219.07 216.21 211.07 207.78 202.61C203.55 198.36 199.18 193.97 194.54 189.37C191.04 185.86 187.57 182.4 184.16 179C176.84 171.69 169.92 164.79 163.88 158.61L163.78 158.5C162.35 156.95 160.89 155.42 159.45 153.9C150.6 144.6 141.44 134.99 140.67 122.76V122.6V122.44C140.7 109.87 151.19 98.93 159.61 90.14C161.1 88.59 162.5 87.13 163.77 85.73L163.91 85.58C182.86 66.45 205.52 43.79 226.1 23.41L226.24 23.27C227.64 21.99 229.11 20.58 230.66 19.09C239.36 10.73 250.21 0.32 262.65 0H262.78H262.91C275.34 0.31 286.18 10.7 294.88 19.06C296.44 20.56 297.92 21.98 299.33 23.27L299.48 23.41C319.62 43.36 342.28 66.02 361.67 85.58L361.81 85.73C363.08 87.12 364.47 88.57 365.95 90.11C374.38 98.91 384.88 109.85 384.92 122.43V122.6V122.77C384.15 134.99 375.02 144.58 366.2 153.85C364.73 155.39 363.26 156.94 361.81 158.51L361.71 158.62C355.65 164.81 348.72 171.73 341.38 179.06C337.99 182.44 334.53 185.9 331.07 189.37C326.75 193.66 322.63 197.8 318.62 201.82C311.26 209.2 304.31 216.16 297.34 222.94C286.89 233.21 273.52 244.86 262.82 244.3C262.55 244.31 262.28 244.32 262.01 244.32L261.97 244.29ZM262.51 234.26L263.23 234.28C266.71 234.54 274.21 231.57 290.31 215.76C297.25 209.02 304.17 202.08 311.5 194.73C315.52 190.7 319.66 186.55 323.97 182.27C327.42 178.81 330.88 175.35 334.28 171.97C341.58 164.68 348.47 157.8 354.48 151.67C355.95 150.08 357.44 148.51 358.93 146.95C366.82 138.66 374.28 130.83 374.9 122.31C374.76 113.77 365.87 104.5 358.71 97.04C357.22 95.48 355.81 94.01 354.48 92.56C335.16 73.06 312.58 50.48 292.5 30.59C291.02 29.24 289.53 27.81 287.95 26.29C280.52 19.17 271.29 10.31 262.78 10.02C254.25 10.32 245.01 19.19 237.57 26.32C236 27.83 234.52 29.25 233.05 30.59C212.55 50.91 189.96 73.48 171.07 92.56C169.74 94.02 168.32 95.5 166.81 97.07C159.66 104.52 150.78 113.79 150.65 122.31C151.28 130.85 158.76 138.7 166.68 147.02C168.14 148.56 169.62 150.11 171.07 151.68C177.07 157.8 183.94 164.67 191.22 171.94C194.63 175.34 198.11 178.82 201.59 182.31C206.22 186.9 210.61 191.3 214.86 195.57C223.23 203.98 231.14 211.93 239.59 219.91C251.11 230.96 258.88 234.6 262.31 234.3L262.52 234.28L262.51 234.26Z'/%3E %3Cpath d='M222.38 168.14V165.63H225.85C229.7 165.63 232.46 164.38 234.14 161.89C235.14 160.44 235.64 157.09 235.64 151.83V92.29C235.64 86.49 235.01 82.89 233.74 81.48C231.97 79.49 229.34 78.49 225.86 78.49H222.39V75.98H259.91C273.68 75.98 284.15 77.54 291.31 80.67C298.51 83.8 304.29 89.01 308.64 96.3C313.03 103.55 315.23 111.98 315.23 121.58C315.23 128.38 314.13 134.63 311.93 140.34C309.73 146.05 306.47 150.95 302.14 155.05C297.81 159.15 292.42 162.36 285.96 164.67C279.5 166.98 272.04 168.14 263.57 168.14H222.38ZM248.69 161.48C254.35 162.75 259.18 163.38 263.17 163.38C268.38 163.38 273.22 162.42 277.68 160.49C282.14 158.57 286.01 155.82 289.27 152.27C292.53 148.71 295.09 144.4 296.95 139.32C298.81 134.25 299.74 128.56 299.74 122.26C299.74 115.96 298.82 110.21 296.99 105.13C295.16 100.06 292.59 95.74 289.31 92.18C286.02 88.62 282.11 85.89 277.55 83.99C272.99 82.09 268.02 81.14 262.63 81.14C260.59 81.14 258.42 81.31 256.11 81.65C253.8 81.99 251.33 82.48 248.7 83.11V161.47L248.69 161.48Z'/%3E %3Cpath d='M292.15 247.09C291.99 246.59 292.08 246.25 292.25 245.78C292.91 244 295.72 239.61 296.87 237.8C300.99 231.32 306.14 225.49 309.95 218.82C309.38 216.37 308.25 213.97 307.48 211.54C305.24 204.5 303.44 196.63 303.57 189.22C303.64 185.04 304.37 180.78 306.63 177.22C307.12 177.04 306.92 177.41 307.03 177.69C307.78 179.71 308.49 181.78 309.18 183.82C312.18 192.7 315.1 202.2 314.17 211.67C317.06 211.37 318.26 208.08 319.86 206.08C317.77 199.48 315.84 192.47 315.38 185.53C315.06 180.71 315.37 174.02 319.68 171L321.04 178.66L323.84 189.39C324.45 193.28 325.22 197.44 324 201.27C325.88 201.26 327.02 199.01 328.33 197.86C328.2 196.81 328.01 195.77 327.82 194.73C326.4 187.16 323.99 175.69 327.91 168.55C328.16 168.1 329.8 165.62 330.24 165.86C330.77 174.96 334.16 184.05 332.52 193.25C334.83 193.42 336.13 191.09 337.78 189.9C335.4 181 332.72 169.96 338.74 161.97C338.93 162.68 339.28 163.4 339.45 164.1C340.67 169.22 341.72 176.11 341.81 181.36C341.84 183.06 341.71 184.77 341.48 186.45C343.5 186.5 344.37 184.15 346.13 183.54C345.28 178 344.38 172.26 344.94 166.65C345.17 164.33 346.32 159.35 348.44 158.07C348.74 157.89 348.77 158.07 348.82 158.33C349 159.47 348.93 161.01 349.07 162.18C349.77 168.28 351.11 174.39 349.96 180.51C351.75 180.3 352.77 178.64 354.36 177.98L354.6 177.6C353.67 170.11 351.12 160.47 356.63 154.23C356.86 154.35 356.87 154.89 356.9 155.15C357.33 159.43 357.66 163.85 357.89 168.14C358.03 170.7 358.07 173.27 357.99 175.83C359.45 175.46 360.57 174.42 361.61 173.4C361.42 165.94 358.87 157.07 364.01 150.74C364.6 154.54 365.07 158.42 365.28 162.27C365.44 165.31 365.42 168.36 365.2 171.39C365.34 171.97 368.29 170.19 368.67 169.59C369.33 168.56 368.57 163.51 368.52 161.96C368.38 157.54 367.85 151.89 371.29 148.57C372.14 152.85 372.73 157.19 372.68 161.56C372.68 162.41 372.23 166.49 372.4 166.83C372.96 167.9 374.97 165.36 375.79 165.47C375.85 161.68 375.27 157.88 375.4 154.09C375.5 151.17 375.82 147.62 378.36 145.78C379.4 151.29 379.61 156.98 378.97 162.54C379.55 162.48 380.04 162.2 380.51 161.87C385.6 158.33 379.23 146.19 384.41 142.1C385.52 147.04 385.58 152.11 385.58 157.14C385.9 157.39 386.36 156.93 386.6 156.75C390.72 153.73 385.94 145.04 388.66 141.11C388.79 140.92 389.96 139.61 390.11 140.1C390.85 144.13 390.73 148.24 390.78 152.31L391.24 152.46C393.03 151.38 393.01 148.96 393.02 147.09C393.05 143.68 391.9 139.56 394.15 136.68C394.54 136.43 394.81 137.5 394.88 137.74C395.85 141.24 395.35 144.78 395.47 148.34C395.9 148.28 396.32 148.07 396.65 147.79C399.13 145.7 395.9 137.58 398.07 134.27C398.19 134.09 398.91 133.28 399.09 133.42C399.87 136.79 399.4 140.36 399.73 143.69C402.92 141.44 401.35 136.58 401.53 133.19C401.59 132.13 401.66 130.42 402.8 129.94C403.14 130.21 403.03 137.18 403.48 138.58C403.55 138.79 403.5 139.04 403.85 138.83C405.81 137.67 404.78 132.39 404.9 130.38C404.97 129.27 405.16 127.59 406.45 127.34C406.73 127.55 406.55 133.22 406.83 134.31C406.91 134.62 406.77 134.95 407.23 134.77C409.28 133.48 407.69 126.18 408.58 124.14C408.91 123.39 409.25 124.74 409.29 124.99C409.57 126.62 408.93 128.39 409.53 130.03C412.2 128.16 410.34 124.34 410.83 121.58C411.33 121.42 411.16 121.52 411.32 121.79C412.2 123.28 411.4 124.86 412.38 126.06C412.96 125.94 413.37 121.08 413.19 120.3L413.72 122.03L414.22 122.49C414.84 120.5 414.96 118.35 416.08 116.53L416.65 116.78C416.89 118.8 414.5 120.11 415.48 122.26L416.3 122.01C415.64 122.64 413.02 125.35 413.37 126.21C413.91 127.54 417.04 123.38 418.18 124.06C417.09 126.75 411.45 127.35 411.08 130.31C411.03 130.72 411.2 130.57 411.44 130.57C413.77 130.49 415.39 127.98 417.84 128.24C415.88 131.82 410.23 131.09 408.63 134.86C408.66 135.3 408.7 135.13 409 135.12C411.45 135.03 414 133.77 416.5 134.11C413.79 137.24 407.74 134.87 405.42 138.69C405.4 139.19 406.64 139.22 407.03 139.26C409.35 139.49 411.94 139 414.26 139.16C414.55 139.18 414.79 139.05 415.04 139.35C412.39 142.66 405.48 139.92 402.69 142.48C402.04 143.07 401.83 143.36 402.66 143.95C404.41 145.17 408.49 144.2 410.72 144.5C411.04 144.54 413.16 144.93 412.89 145.47C410.86 146.83 409.07 146.74 406.76 146.5C403.5 146.17 399.02 144.17 397.65 148.51L409.37 151.18C405.62 154.88 399.79 150.16 396.01 150.84C394.93 151.04 393.45 152.3 393.34 153.4C393.3 153.84 393.47 153.63 393.68 153.67C396.83 154.29 400.08 154.53 403.11 155.69L406.21 157.04C401.85 160.73 396.16 155.38 391.89 155.72C390.92 155.8 388.74 156.79 388.49 157.71C388.38 158.1 388.8 157.99 388.98 158.05C393.5 159.58 398.29 160.76 402.44 163.12C400.57 163.8 398.82 164.14 396.84 163.91C393 163.47 388.44 159.91 384.69 161.11C384.28 161.24 381.8 162.82 382.35 163.24C387.74 163.69 392.59 166.48 397.05 169.27C389.29 173.46 382.76 161.64 375.53 167.49C375.5 167.99 375.68 167.82 375.88 167.92C377.33 168.68 379.47 169.27 381.06 169.96C381.89 170.32 391.92 174.89 391.66 175.43C384.73 177.9 378.36 172.66 372.2 170.3C370.44 170.15 369.65 171.73 368.13 172.06C372.85 174.56 377.98 176.52 382.1 180.07C382.64 180.54 383.55 181.32 383.98 181.84C384.11 181.99 384.4 182.24 384.14 182.4C381.01 182.07 377.76 181.98 374.81 180.78C370.87 179.17 367.4 174.04 362.94 175.15C362.59 175.24 360.15 176.2 360.62 176.65C366.7 179.47 372.58 182.9 377.4 187.61C372.54 188.45 367.74 186.1 363.78 183.45C363.35 183.16 363.06 182.73 362.64 182.45C361.74 181.84 357.77 178.84 357.15 178.72C356.4 178.58 353.16 181 352.61 181.69C352.49 181.84 352.21 181.75 352.43 182.22C360.23 183.32 366.05 189.24 373.13 192.16L371.32 192.92C370.51 192.78 369.76 193.06 369 193.09C361.56 193.39 355.33 188.02 349.41 184.31C348.88 184.26 345.24 186.37 345.08 186.82C344.47 188.47 348.99 188.64 349.78 188.81C352.26 189.32 352.92 190.48 354.79 191.63C357.97 193.59 362.22 195.06 365.63 196.88C366.71 197.46 367.81 198.06 368.8 198.78C358.42 201.64 349.66 195.79 341.08 191C339.04 191.96 337.42 193.72 335.98 195.44C337.95 195.97 339.97 196.12 341.95 196.61C345.98 197.6 350.17 199.51 353.88 201.35C356.32 202.56 360.74 204.67 362.83 206.16C363.04 206.31 363.32 206.25 363.29 206.69C359.38 207.96 355.5 208 351.54 207.09C345.59 205.73 340.89 202.34 335.42 200.45C331.31 199.03 328.68 199.89 327.37 204.22C336.87 203.38 344.7 208.44 352.91 212.22L358.57 214.23C346.53 219.58 334.28 213.51 324.07 207.21C322.86 207.12 319.34 212.81 318.5 213.92C318.5 214.43 318.77 214.14 319.08 214.13C331.31 213.6 342.67 219.01 353.57 223.78C340.42 229.42 327.04 224.12 314.79 219.04C308.52 227.37 304.73 237.32 298.78 245.89L292.18 247.07L292.15 247.09Z'/%3E %3C/g%3E %3Cg transform='translate(135.99,-243.52)'%3E %3Cpath d='M0 311.89V310.44L3.44 309.31V285.34L0 284.21V282.76H9.6V311.89H0ZM24.07 296.98C24.07 293.17 23.11 290.37 21.2 288.58C19.29 286.79 16.53 285.9 12.93 285.9H6.55L6.14 282.76H14.08C17.74 282.76 20.78 283.27 23.22 284.3C25.66 285.33 27.48 286.86 28.69 288.9C29.9 290.94 30.5 293.49 30.5 296.55C30.5 299.82 29.8 302.6 28.39 304.88C26.98 307.16 25.04 308.9 22.55 310.1C20.07 311.3 17.22 311.89 14.02 311.89H6.12L6.53 308.75H13.53C15.71 308.75 17.58 308.35 19.15 307.54C20.72 306.73 21.93 305.47 22.78 303.73C23.63 301.99 24.05 299.74 24.05 296.96L24.07 296.98Z'/%3E %3Cpath d='M47.25 310.44V311.89H34.21V310.44L37.65 309.31V285.34L34.21 284.21V282.76H47.25V284.21L43.81 285.34V309.31L47.25 310.44Z'/%3E %3Cpath d='M79.71 309.27L83.15 310.44V311.89H69.45V310.44L73.1 309.35L63.86 286.62H64.88L56.21 309.35L59.69 310.44V311.89H49.32V310.44L52.69 309.35L63.45 282.52H68.51L79.72 309.26L79.71 309.27ZM57.54 302.27V299.26H72.33V302.27H57.54Z'/%3E %3Cpath d='M123.76 309.27L127.22 310.44V311.89H114.12V310.44L117.49 309.37L115.91 286.77L116.21 286.81L106.61 312.04H101.94L92.21 286.98L92.49 286.94L91.15 309.29L94.5 310.44V311.89H84.49V310.44L87.95 309.27L89.57 285.62L85.84 284.21V282.76H97.24L106.1 306.09H105.65L114.49 282.76H125.5V284.21L122.02 285.43L123.79 309.27H123.76Z'/%3E %3Cpath d='M145.55 282.25C147.83 282.25 149.89 282.61 151.74 283.33C153.59 284.05 155.18 285.07 156.5 286.38C157.82 287.7 158.84 289.28 159.55 291.13C160.26 292.98 160.62 295.04 160.62 297.3C160.62 299.56 160.25 301.6 159.5 303.46C158.75 305.32 157.7 306.91 156.33 308.25C154.96 309.59 153.33 310.62 151.44 311.33C149.55 312.05 147.44 312.41 145.12 312.41C142.8 312.41 140.78 312.05 138.93 311.34C137.08 310.63 135.5 309.61 134.18 308.29C132.86 306.97 131.85 305.38 131.14 303.53C130.43 301.68 130.07 299.63 130.07 297.38C130.07 295.13 130.44 293.06 131.18 291.2C131.92 289.34 132.98 287.75 134.35 286.41C135.72 285.07 137.35 284.04 139.25 283.33C141.15 282.62 143.24 282.25 145.55 282.25ZM145.51 309.12C147.3 309.12 148.85 308.71 150.14 307.89C151.43 307.07 152.43 305.86 153.14 304.26C153.84 302.66 154.2 300.68 154.2 298.34C154.2 295.54 153.83 293.19 153.1 291.29C152.37 289.39 151.33 287.96 149.98 286.99C148.63 286.02 147.04 285.54 145.19 285.54C143.34 285.54 141.85 285.95 140.56 286.77C139.27 287.59 138.27 288.8 137.56 290.4C136.85 292 136.5 293.97 136.5 296.32C136.5 299.11 136.86 301.46 137.59 303.36C138.32 305.27 139.35 306.7 140.71 307.67C142.07 308.64 143.66 309.12 145.51 309.12Z'/%3E %3Cpath d='M167.75 309.33V285.66L164.1 284.17V282.76H174.81L190.37 306.07L188.94 307.63V285.35L185.25 284.22V282.77H195.47V284.22L192.05 285.35V312.05H187.08L169.66 285.8L170.88 285.16V309.34L174.55 310.45V311.9H164.35V310.45L167.74 309.34L167.75 309.33Z'/%3E %3Cpath d='M199.14 311.89V310.44L202.58 309.31V285.34L199.14 284.21V282.76H208.74V311.89H199.14ZM223.22 296.98C223.22 293.17 222.26 290.37 220.35 288.58C218.44 286.79 215.68 285.9 212.08 285.9H205.7L205.29 282.76H213.23C216.89 282.76 219.93 283.27 222.37 284.3C224.81 285.33 226.63 286.86 227.84 288.9C229.05 290.94 229.65 293.49 229.65 296.55C229.65 299.82 228.95 302.6 227.54 304.88C226.13 307.16 224.19 308.9 221.7 310.1C219.22 311.3 216.37 311.89 213.17 311.89H205.27L205.68 308.75H212.68C214.86 308.75 216.73 308.35 218.3 307.54C219.87 306.73 221.08 305.47 221.93 303.73C222.78 301.99 223.2 299.74 223.2 296.96L223.22 296.98Z'/%3E %3Cpath d='M253.52 282.76V309.31L256.96 310.44V311.89H243.92V310.44L247.36 309.31V285.34L243.92 284.21V282.76H253.52ZM266.52 281.33H267.74L268.81 291.38L266.87 291.55L263.24 284.38L265.72 285.79H250.03V282.76H264.14L266.53 281.33H266.52ZM263.17 292.09V303.38H260.8L260.35 299.18H250.32V296.28H260.35L260.8 292.1H263.17V292.09Z'/%3E %3Cpath d='M284.9 310.44V311.89H271.86V310.44L275.3 309.31V285.34L271.86 284.21V282.76H284.9V284.21L281.46 285.34V309.31L284.9 310.44Z'/%3E %3Cpath d='M292.39 309.33V285.66L288.74 284.17V282.76H299.45L315.01 306.07L313.58 307.63V285.35L309.89 284.22V282.77H320.11V284.22L316.69 285.35V312.05H311.72L294.3 285.8L295.52 285.16V309.34L299.19 310.45V311.9H288.99V310.45L292.38 309.34L292.39 309.33Z'/%3E %3Cpath d='M351.7 309.27L355.14 310.44V311.89H341.44V310.44L345.09 309.35L335.85 286.62H336.87L328.2 309.35L331.68 310.44V311.89H321.31V310.44L324.68 309.35L335.44 282.52H340.5L351.71 309.26L351.7 309.27ZM329.52 302.27V299.26H344.31V302.27H329.52Z'/%3E %3Cpath d='M360.57 309.33V285.66L356.92 284.17V282.76H367.63L383.19 306.07L381.76 307.63V285.35L378.07 284.22V282.77H388.29V284.22L384.87 285.35V312.05H379.9L362.48 285.8L363.7 285.16V309.34L367.37 310.45V311.9H357.17V310.45L360.56 309.34L360.57 309.33Z'/%3E %3Cpath d='M409.64 309.29C410.68 309.29 411.71 309.2 412.72 309.01C413.74 308.82 414.77 308.52 415.82 308.09L413.71 309.71L417.27 302.92H419.13L418.23 310.71C416.99 311.24 415.54 311.65 413.88 311.95C412.21 312.25 410.43 312.4 408.52 312.4C405.86 312.4 403.49 312.08 401.4 311.44C399.32 310.8 397.55 309.85 396.12 308.59C394.68 307.33 393.59 305.78 392.83 303.95C392.08 302.12 391.7 299.99 391.7 297.59C391.71 294.5 392.4 291.81 393.76 289.5C395.12 287.2 397.09 285.41 399.66 284.14C402.23 282.87 405.35 282.24 409.01 282.24C410.11 282.24 411.17 282.32 412.2 282.46C413.23 282.61 414.37 282.85 415.63 283.17L413.96 283.45L416.56 281.23H417.97L418.91 292.18L416.86 292.35L413.32 285.27L415.16 287.34C413.98 286.61 412.87 286.11 411.83 285.84C410.79 285.56 409.67 285.42 408.46 285.42C406.74 285.42 405.23 285.64 403.93 286.09C402.63 286.54 401.56 287.21 400.71 288.1C399.86 288.99 399.21 290.1 398.78 291.43C398.35 292.76 398.12 294.3 398.11 296.05C398.1 298.26 398.36 300.19 398.9 301.84C399.44 303.5 400.22 304.88 401.25 305.98C402.27 307.08 403.49 307.91 404.91 308.46C406.33 309.01 407.9 309.28 409.64 309.28V309.29Z'/%3E %3Cpath d='M436.27 310.44V311.89H423.23V310.44L426.67 309.31V285.34L423.23 284.21V282.76H436.27V284.21L432.83 285.34V309.31L436.27 310.44Z'/%3E %3Cpath d='M468.74 309.27L472.18 310.44V311.89H458.48V310.44L462.13 309.35L452.89 286.62H453.91L445.24 309.35L448.72 310.44V311.89H438.35V310.44L441.72 309.35L452.48 282.52H457.54L468.75 309.26L468.74 309.27ZM446.56 302.27V299.26H461.35V302.27H446.56Z'/%3E %3Cpath d='M483.74 285.34V311.89H474.14V310.44L477.58 309.31V285.34L474.14 284.21V282.76H487.18V284.21L483.74 285.34ZM497.7 313.54H496.21L493.8 311.9H480.5L480.54 308.76H495.29L492.96 310.08L497.78 301.8L499.7 301.99L497.69 313.54H497.7Z'/%3E %3Cpath d='M522.07 284L518.78 283.51L521.3 281.25H522.69L523.74 291.34L521.71 291.53L518.15 285.08L519.56 286.7C518.78 286.16 517.94 285.76 517.06 285.52C516.18 285.27 515.22 285.15 514.2 285.15C512.34 285.15 510.93 285.48 509.99 286.14C509.04 286.8 508.57 287.77 508.57 289.05C508.57 289.89 508.78 290.58 509.19 291.13C509.6 291.68 510.16 292.14 510.88 292.51C511.59 292.88 512.4 293.2 513.31 293.47C514.22 293.74 515.18 294.02 516.19 294.3C517.19 294.59 518.19 294.92 519.21 295.31C520.23 295.7 521.16 296.21 522.01 296.85C522.86 297.48 523.54 298.3 524.05 299.3C524.56 300.3 524.82 301.56 524.82 303.07C524.82 305.15 524.32 306.88 523.3 308.26C522.29 309.64 520.87 310.68 519.04 311.37C517.21 312.06 515.07 312.41 512.61 312.41C511 312.41 509.57 312.33 508.3 312.16C507.03 312 505.72 311.67 504.37 311.19L502.77 302.93H504.8L510.24 311.1L505.4 307.77C506.58 308.35 507.66 308.77 508.64 309.03C509.62 309.29 510.72 309.41 511.93 309.41C513.61 309.41 514.99 309.24 516.06 308.9C517.13 308.56 517.93 308.04 518.44 307.34C518.95 306.64 519.21 305.77 519.21 304.72C519.21 303.74 518.96 302.94 518.46 302.32C517.96 301.7 517.3 301.2 516.48 300.82C515.65 300.44 514.75 300.11 513.76 299.84C512.77 299.57 511.79 299.29 510.8 298.99C509.82 298.71 508.88 298.36 507.97 297.97C507.06 297.58 506.26 297.07 505.55 296.45C504.84 295.84 504.28 295.07 503.87 294.13C503.46 293.2 503.26 292.06 503.26 290.71C503.26 288.93 503.7 287.41 504.59 286.15C505.48 284.89 506.76 283.93 508.43 283.26C510.1 282.59 512.09 282.26 514.39 282.26C515.83 282.26 517.15 282.4 518.36 282.67C519.57 282.94 520.81 283.39 522.07 284.01V284Z'/%3E %3C/g%3E %3C/svg%3E"); --logo-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 277.50 247.10' fill='%23000'%3E %3Cg transform='translate(-140.7,-0.0)'%3E %3Cpath d='M261.97 244.29C254.42 244.29 244.58 238.52 232.7 227.13C224.17 219.07 216.21 211.07 207.78 202.61C203.55 198.36 199.18 193.97 194.54 189.37C191.04 185.86 187.57 182.4 184.16 179C176.84 171.69 169.92 164.79 163.88 158.61L163.78 158.5C162.35 156.95 160.89 155.42 159.45 153.9C150.6 144.6 141.44 134.99 140.67 122.76V122.6V122.44C140.7 109.87 151.19 98.93 159.61 90.14C161.1 88.59 162.5 87.13 163.77 85.73L163.91 85.58C182.86 66.45 205.52 43.79 226.1 23.41L226.24 23.27C227.64 21.99 229.11 20.58 230.66 19.09C239.36 10.73 250.21 0.32 262.65 0H262.78H262.91C275.34 0.31 286.18 10.7 294.88 19.06C296.44 20.56 297.92 21.98 299.33 23.27L299.48 23.41C319.62 43.36 342.28 66.02 361.67 85.58L361.81 85.73C363.08 87.12 364.47 88.57 365.95 90.11C374.38 98.91 384.88 109.85 384.92 122.43V122.6V122.77C384.15 134.99 375.02 144.58 366.2 153.85C364.73 155.39 363.26 156.94 361.81 158.51L361.71 158.62C355.65 164.81 348.72 171.73 341.38 179.06C337.99 182.44 334.53 185.9 331.07 189.37C326.75 193.66 322.63 197.8 318.62 201.82C311.26 209.2 304.31 216.16 297.34 222.94C286.89 233.21 273.52 244.86 262.82 244.3C262.55 244.31 262.28 244.32 262.01 244.32L261.97 244.29ZM262.51 234.26L263.23 234.28C266.71 234.54 274.21 231.57 290.31 215.76C297.25 209.02 304.17 202.08 311.5 194.73C315.52 190.7 319.66 186.55 323.97 182.27C327.42 178.81 330.88 175.35 334.28 171.97C341.58 164.68 348.47 157.8 354.48 151.67C355.95 150.08 357.44 148.51 358.93 146.95C366.82 138.66 374.28 130.83 374.9 122.31C374.76 113.77 365.87 104.5 358.71 97.04C357.22 95.48 355.81 94.01 354.48 92.56C335.16 73.06 312.58 50.48 292.5 30.59C291.02 29.24 289.53 27.81 287.95 26.29C280.52 19.17 271.29 10.31 262.78 10.02C254.25 10.32 245.01 19.19 237.57 26.32C236 27.83 234.52 29.25 233.05 30.59C212.55 50.91 189.96 73.48 171.07 92.56C169.74 94.02 168.32 95.5 166.81 97.07C159.66 104.52 150.78 113.79 150.65 122.31C151.28 130.85 158.76 138.7 166.68 147.02C168.14 148.56 169.62 150.11 171.07 151.68C177.07 157.8 183.94 164.67 191.22 171.94C194.63 175.34 198.11 178.82 201.59 182.31C206.22 186.9 210.61 191.3 214.86 195.57C223.23 203.98 231.14 211.93 239.59 219.91C251.11 230.96 258.88 234.6 262.31 234.3L262.52 234.28L262.51 234.26Z'/%3E %3Cpath d='M222.38 168.14V165.63H225.85C229.7 165.63 232.46 164.38 234.14 161.89C235.14 160.44 235.64 157.09 235.64 151.83V92.29C235.64 86.49 235.01 82.89 233.74 81.48C231.97 79.49 229.34 78.49 225.86 78.49H222.39V75.98H259.91C273.68 75.98 284.15 77.54 291.31 80.67C298.51 83.8 304.29 89.01 308.64 96.3C313.03 103.55 315.23 111.98 315.23 121.58C315.23 128.38 314.13 134.63 311.93 140.34C309.73 146.05 306.47 150.95 302.14 155.05C297.81 159.15 292.42 162.36 285.96 164.67C279.5 166.98 272.04 168.14 263.57 168.14H222.38ZM248.69 161.48C254.35 162.75 259.18 163.38 263.17 163.38C268.38 163.38 273.22 162.42 277.68 160.49C282.14 158.57 286.01 155.82 289.27 152.27C292.53 148.71 295.09 144.4 296.95 139.32C298.81 134.25 299.74 128.56 299.74 122.26C299.74 115.96 298.82 110.21 296.99 105.13C295.16 100.06 292.59 95.74 289.31 92.18C286.02 88.62 282.11 85.89 277.55 83.99C272.99 82.09 268.02 81.14 262.63 81.14C260.59 81.14 258.42 81.31 256.11 81.65C253.8 81.99 251.33 82.48 248.7 83.11V161.47L248.69 161.48Z'/%3E %3Cpath d='M292.15 247.09C291.99 246.59 292.08 246.25 292.25 245.78C292.91 244 295.72 239.61 296.87 237.8C300.99 231.32 306.14 225.49 309.95 218.82C309.38 216.37 308.25 213.97 307.48 211.54C305.24 204.5 303.44 196.63 303.57 189.22C303.64 185.04 304.37 180.78 306.63 177.22C307.12 177.04 306.92 177.41 307.03 177.69C307.78 179.71 308.49 181.78 309.18 183.82C312.18 192.7 315.1 202.2 314.17 211.67C317.06 211.37 318.26 208.08 319.86 206.08C317.77 199.48 315.84 192.47 315.38 185.53C315.06 180.71 315.37 174.02 319.68 171L321.04 178.66L323.84 189.39C324.45 193.28 325.22 197.44 324 201.27C325.88 201.26 327.02 199.01 328.33 197.86C328.2 196.81 328.01 195.77 327.82 194.73C326.4 187.16 323.99 175.69 327.91 168.55C328.16 168.1 329.8 165.62 330.24 165.86C330.77 174.96 334.16 184.05 332.52 193.25C334.83 193.42 336.13 191.09 337.78 189.9C335.4 181 332.72 169.96 338.74 161.97C338.93 162.68 339.28 163.4 339.45 164.1C340.67 169.22 341.72 176.11 341.81 181.36C341.84 183.06 341.71 184.77 341.48 186.45C343.5 186.5 344.37 184.15 346.13 183.54C345.28 178 344.38 172.26 344.94 166.65C345.17 164.33 346.32 159.35 348.44 158.07C348.74 157.89 348.77 158.07 348.82 158.33C349 159.47 348.93 161.01 349.07 162.18C349.77 168.28 351.11 174.39 349.96 180.51C351.75 180.3 352.77 178.64 354.36 177.98L354.6 177.6C353.67 170.11 351.12 160.47 356.63 154.23C356.86 154.35 356.87 154.89 356.9 155.15C357.33 159.43 357.66 163.85 357.89 168.14C358.03 170.7 358.07 173.27 357.99 175.83C359.45 175.46 360.57 174.42 361.61 173.4C361.42 165.94 358.87 157.07 364.01 150.74C364.6 154.54 365.07 158.42 365.28 162.27C365.44 165.31 365.42 168.36 365.2 171.39C365.34 171.97 368.29 170.19 368.67 169.59C369.33 168.56 368.57 163.51 368.52 161.96C368.38 157.54 367.85 151.89 371.29 148.57C372.14 152.85 372.73 157.19 372.68 161.56C372.68 162.41 372.23 166.49 372.4 166.83C372.96 167.9 374.97 165.36 375.79 165.47C375.85 161.68 375.27 157.88 375.4 154.09C375.5 151.17 375.82 147.62 378.36 145.78C379.4 151.29 379.61 156.98 378.97 162.54C379.55 162.48 380.04 162.2 380.51 161.87C385.6 158.33 379.23 146.19 384.41 142.1C385.52 147.04 385.58 152.11 385.58 157.14C385.9 157.39 386.36 156.93 386.6 156.75C390.72 153.73 385.94 145.04 388.66 141.11C388.79 140.92 389.96 139.61 390.11 140.1C390.85 144.13 390.73 148.24 390.78 152.31L391.24 152.46C393.03 151.38 393.01 148.96 393.02 147.09C393.05 143.68 391.9 139.56 394.15 136.68C394.54 136.43 394.81 137.5 394.88 137.74C395.85 141.24 395.35 144.78 395.47 148.34C395.9 148.28 396.32 148.07 396.65 147.79C399.13 145.7 395.9 137.58 398.07 134.27C398.19 134.09 398.91 133.28 399.09 133.42C399.87 136.79 399.4 140.36 399.73 143.69C402.92 141.44 401.35 136.58 401.53 133.19C401.59 132.13 401.66 130.42 402.8 129.94C403.14 130.21 403.03 137.18 403.48 138.58C403.55 138.79 403.5 139.04 403.85 138.83C405.81 137.67 404.78 132.39 404.9 130.38C404.97 129.27 405.16 127.59 406.45 127.34C406.73 127.55 406.55 133.22 406.83 134.31C406.91 134.62 406.77 134.95 407.23 134.77C409.28 133.48 407.69 126.18 408.58 124.14C408.91 123.39 409.25 124.74 409.29 124.99C409.57 126.62 408.93 128.39 409.53 130.03C412.2 128.16 410.34 124.34 410.83 121.58C411.33 121.42 411.16 121.52 411.32 121.79C412.2 123.28 411.4 124.86 412.38 126.06C412.96 125.94 413.37 121.08 413.19 120.3L413.72 122.03L414.22 122.49C414.84 120.5 414.96 118.35 416.08 116.53L416.65 116.78C416.89 118.8 414.5 120.11 415.48 122.26L416.3 122.01C415.64 122.64 413.02 125.35 413.37 126.21C413.91 127.54 417.04 123.38 418.18 124.06C417.09 126.75 411.45 127.35 411.08 130.31C411.03 130.72 411.2 130.57 411.44 130.57C413.77 130.49 415.39 127.98 417.84 128.24C415.88 131.82 410.23 131.09 408.63 134.86C408.66 135.3 408.7 135.13 409 135.12C411.45 135.03 414 133.77 416.5 134.11C413.79 137.24 407.74 134.87 405.42 138.69C405.4 139.19 406.64 139.22 407.03 139.26C409.35 139.49 411.94 139 414.26 139.16C414.55 139.18 414.79 139.05 415.04 139.35C412.39 142.66 405.48 139.92 402.69 142.48C402.04 143.07 401.83 143.36 402.66 143.95C404.41 145.17 408.49 144.2 410.72 144.5C411.04 144.54 413.16 144.93 412.89 145.47C410.86 146.83 409.07 146.74 406.76 146.5C403.5 146.17 399.02 144.17 397.65 148.51L409.37 151.18C405.62 154.88 399.79 150.16 396.01 150.84C394.93 151.04 393.45 152.3 393.34 153.4C393.3 153.84 393.47 153.63 393.68 153.67C396.83 154.29 400.08 154.53 403.11 155.69L406.21 157.04C401.85 160.73 396.16 155.38 391.89 155.72C390.92 155.8 388.74 156.79 388.49 157.71C388.38 158.1 388.8 157.99 388.98 158.05C393.5 159.58 398.29 160.76 402.44 163.12C400.57 163.8 398.82 164.14 396.84 163.91C393 163.47 388.44 159.91 384.69 161.11C384.28 161.24 381.8 162.82 382.35 163.24C387.74 163.69 392.59 166.48 397.05 169.27C389.29 173.46 382.76 161.64 375.53 167.49C375.5 167.99 375.68 167.82 375.88 167.92C377.33 168.68 379.47 169.27 381.06 169.96C381.89 170.32 391.92 174.89 391.66 175.43C384.73 177.9 378.36 172.66 372.2 170.3C370.44 170.15 369.65 171.73 368.13 172.06C372.85 174.56 377.98 176.52 382.1 180.07C382.64 180.54 383.55 181.32 383.98 181.84C384.11 181.99 384.4 182.24 384.14 182.4C381.01 182.07 377.76 181.98 374.81 180.78C370.87 179.17 367.4 174.04 362.94 175.15C362.59 175.24 360.15 176.2 360.62 176.65C366.7 179.47 372.58 182.9 377.4 187.61C372.54 188.45 367.74 186.1 363.78 183.45C363.35 183.16 363.06 182.73 362.64 182.45C361.74 181.84 357.77 178.84 357.15 178.72C356.4 178.58 353.16 181 352.61 181.69C352.49 181.84 352.21 181.75 352.43 182.22C360.23 183.32 366.05 189.24 373.13 192.16L371.32 192.92C370.51 192.78 369.76 193.06 369 193.09C361.56 193.39 355.33 188.02 349.41 184.31C348.88 184.26 345.24 186.37 345.08 186.82C344.47 188.47 348.99 188.64 349.78 188.81C352.26 189.32 352.92 190.48 354.79 191.63C357.97 193.59 362.22 195.06 365.63 196.88C366.71 197.46 367.81 198.06 368.8 198.78C358.42 201.64 349.66 195.79 341.08 191C339.04 191.96 337.42 193.72 335.98 195.44C337.95 195.97 339.97 196.12 341.95 196.61C345.98 197.6 350.17 199.51 353.88 201.35C356.32 202.56 360.74 204.67 362.83 206.16C363.04 206.31 363.32 206.25 363.29 206.69C359.38 207.96 355.5 208 351.54 207.09C345.59 205.73 340.89 202.34 335.42 200.45C331.31 199.03 328.68 199.89 327.37 204.22C336.87 203.38 344.7 208.44 352.91 212.22L358.57 214.23C346.53 219.58 334.28 213.51 324.07 207.21C322.86 207.12 319.34 212.81 318.5 213.92C318.5 214.43 318.77 214.14 319.08 214.13C331.31 213.6 342.67 219.01 353.57 223.78C340.42 229.42 327.04 224.12 314.79 219.04C308.52 227.37 304.73 237.32 298.78 245.89L292.18 247.07L292.15 247.09Z'/%3E %3C/g%3E %3C/svg%3E"); /* typography */ --font-display: "Blauer Nue", Verdana, sans-serif; --font-body: "Rubik", Arial, sans-serif; --fs-display: clamp(4rem, 3.07rem + 4.65vw, 7.25rem); --fs-h1: clamp(3rem, 2.54rem + 2.33vw, 4.625rem); --fs-h2: clamp(2.125rem, 1.8rem + 1.61vw, 3.25rem); --fs-h3: 2.25rem; --fs-h4: clamp(1.75rem, 1.68rem + 0.36vw, 2rem); --fs-sub: clamp(1.125rem, 1.02rem + 0.54vw, 1.5rem); --fs-large: clamp(1.0625rem, 1.05rem + 0.09vw, 1.125rem); --fs-main: 1rem; --fs-small: 0.8125rem; /* layout */ --site-pad: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem); --section-pad: clamp(4rem, 3rem + 5vw, 8rem); --radius: 0.25rem; /* motion */ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --nav-h: 4.5rem; } /* ============================================================================= 02. RESET + BASE Element defaults, the [data-theme-block] grounds, and the .u-* type utilities. Everything here is global; nothing here is component-specific. ========================================================================== */ /* ---------- reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scrollbar-width: thin; scrollbar-color: var(--brand-500) transparent; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { font-family: var(--font-body); font-size: var(--fs-main); line-height: 1.5; background: var(--brand-800); color: var(--beige-500); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, canvas, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; } ::selection { background: var(--accent-500); color: var(--brand-800); } /* ---------- utilities ---------- */ .u-display, .u-h1, .u-h2, .u-h3, .u-h4 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; } .u-display { font-size: var(--fs-display); } .u-h1 { font-size: var(--fs-h1); } .u-h2 { font-size: var(--fs-h2); } .u-h3 { font-size: var(--fs-h3); } .u-h4 { font-size: var(--fs-h4); } .u-sub { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sub); text-transform: uppercase; line-height: 1.1; } .u-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.14em; } /* On any dark or blue ground the eyebrow takes the logo yellow — 10:1 on the ink, 5.4:1 on the blue. It is deliberately scoped rather than set on .u-eyebrow itself: yellow on the ivory ground measures 1.3:1 and would disappear. Add a ground here, never a colour to the utility. */ [data-theme-block="dark"] .u-eyebrow, [data-theme-block="brand"] .u-eyebrow, .page_hero .u-eyebrow, .svcrail_side .u-eyebrow { color: var(--accent-500); } /* Blauer Nue has no macron vowels (no Ā/ā, no combining U+0304), so in the display face "Kāinga" fell back to another font for one letter. Write the plain vowel inside .u-macron and the bar is drawn here instead: Kainga Measured from the font: content box top is 0.94em above the baseline, cap height 0.70em, so the cap top sits 0.24em down the box; the bar is 0.10em thick (stem is 0.13em) with a 0.06em gap above the letter. Body text (Rubik) has the real glyph, so use this only in display type. */ .u-macron { position: relative; } .u-macron::before { content: ""; position: absolute; top: 0.08em; left: 50%; width: 0.5em; height: 0.1em; background: currentColor; transform: translateX(-50%); } /* visible to a screen reader, to nobody else */ .u-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .container { width: 100%; padding-inline: var(--site-pad); margin-inline: auto; } /* theme sections */ [data-theme-block="dark"] { background: var(--brand-800); color: var(--beige-500); } [data-theme-block="light"] { background: var(--beige-500); color: var(--brand-800); } [data-theme-block="brand"] { /* --brand-600, not --brand-500: ivory on the logo blue is 6.9:1 and on --brand-600 it is 7.3:1 — this block carries body copy, so take the deeper one and keep the logo blue for large type and flat surfaces. */ background: var(--brand-600); color: var(--beige-500); } /* split-text masking */ .line, .word, .char { will-change: transform; } /* ============================================================ 03. PRELOADER ============================================================ */ .preloader { position: fixed; inset: 0; z-index: 200; /* same blue surface as the full-screen menu */ background: var(--brand-500); color: var(--beige-500); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* the mark alone — no wordmark — centred on the splash */ .preloader_logo { width: min(14rem, 36vw); aspect-ratio: 51.2 / 32.2; background-color: var(--beige-500); -webkit-mask: var(--logo-mark) no-repeat center / contain; mask: var(--logo-mark) no-repeat center / contain; will-change: transform; } .preloader_tag { position: absolute; bottom: var(--site-pad); left: var(--site-pad); right: var(--site-pad); display: flex; justify-content: space-between; font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; overflow: hidden; } /* ============================================================ 04. NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--site-pad); color: var(--beige-500); transition: color 0.4s ease; mix-blend-mode: normal; } .nav[data-theme-nav="light"] { color: var(--brand-800); } /* Brand logo. Painted as a CSS mask so the artwork inherits the nav's colour — white over the dark sections, and over the light ones the same deep blue as the brand band, rather than the ink the burger takes. */ .nav[data-theme-nav="light"] .nav_logo { background-color: var(--brand-600); } /* ...unless the logo alone sits over a dark surface inside a light section (the services rail's photo column), flagged from main.js */ .nav[data-logo-on-dark] .nav_logo { background-color: var(--beige-500); } .nav[data-burger-on-dark] .nav_burger, .nav[data-burger-on-dark] .nav_cta { color: var(--beige-500); } /* "Get in touch" — a transparent outlined box beside the burger. Uses currentColor so it is white over dark sections and turns ink with the burger over light ones. */ .nav_cta { margin-left: auto; margin-right: clamp(1rem, 2vw, 1.75rem); display: inline-flex; align-items: center; height: 2.6rem; padding-inline: 1.1rem; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .nav_cta:hover { background: rgba(255, 255, 255, 0.12); } .nav[data-theme-nav="light"]:not([data-burger-on-dark]) .nav_cta:hover { background: rgba(11, 45, 66, 0.08); } [data-navigation-status="active"] .nav_cta { opacity: 0; pointer-events: none; } @media (max-width: 600px) { .nav_cta { height: 2.2rem; padding-inline: 0.75rem; font-size: 0.7rem; margin-right: 0.9rem; } } @media (max-width: 420px) { .nav .nav_logo { height: 1.2rem; } .nav_cta { height: 2rem; padding-inline: 0.6rem; font-size: 0.65rem; letter-spacing: 0.05em; margin-right: 0.75rem; } } .nav_logo { display: block; /* Sized by width, not height. The lockup is 8:1, so the 2.1rem that suited a 6:1 mark ran it nearly 17rem across the bar; 1.85rem lands it near 15rem — the largest that still sits comfortably in a 4.5rem bar. */ height: 1.85rem; aspect-ratio: 266 / 33; background-color: currentColor; -webkit-mask: var(--logo-full) no-repeat center / contain; mask: var(--logo-full) no-repeat center / contain; transition: opacity 0.4s ease, background-color 0.4s ease; } .nav_logo:hover { opacity: 0.7; } @media (max-width: 600px) { .nav_logo { height: 1.45rem; } } /* hamburger — always visible, all breakpoints (RIO pattern): three staggered lines (100% / 75% / 50%), equalize on hover, morph to an X when the navigation is open */ .nav_burger { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; width: 2.6em; height: 2.2em; font-size: 1rem; position: relative; flex-shrink: 0; } .nav_burger_line { position: absolute; width: 2.2em; height: 2px; background: currentColor; transform-origin: center; transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .nav_burger_line:nth-child(1) { transform: translateY(-0.45em) scaleX(1); } .nav_burger_line:nth-child(2) { transform: translateY(0) scaleX(0.75); transform-origin: right; } .nav_burger_line:nth-child(3) { transform: translateY(0.45em) scaleX(0.5); transform-origin: right; } .nav_burger:hover .nav_burger_line:nth-child(2), .nav_burger:hover .nav_burger_line:nth-child(3) { transform: translateY(0) scaleX(1); } .nav_burger:hover .nav_burger_line:nth-child(3) { transform: translateY(0.45em) scaleX(1); } [data-navigation-status="active"] .nav_burger_line:nth-child(1) { transform: translateY(0) rotate(45deg) scaleX(1); transform-origin: center; } [data-navigation-status="active"] .nav_burger_line:nth-child(2) { transform: translateX(-150%) scaleX(1); } [data-navigation-status="active"] .nav_burger_line:nth-child(3) { transform: translateY(0) rotate(-45deg) scaleX(1); transform-origin: center; } [data-navigation-status="active"] .nav_burger:hover .nav_burger_line:nth-child(1) { transform: rotate(45deg) scaleX(0.7); } [data-navigation-status="active"] .nav_burger:hover .nav_burger_line:nth-child(3) { transform: rotate(-45deg) scaleX(0.7); } /* full-screen nav overlay — brand tile with giant staggered links */ .nav_overlay { position: fixed; inset: 0; z-index: 90; background: var(--brand-500); color: var(--beige-500); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--site-pad); padding-bottom: clamp(2rem, 6vh, 4.5rem); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1); pointer-events: none; visibility: hidden; transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s 0.8s; } [data-navigation-status="active"] .nav_overlay { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); pointer-events: auto; visibility: visible; transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s 0s; } /* two-level menu: the main list slides out left while a sub-panel arrives from the right. Both panels sit on the same bottom edge. */ .nav_panels { position: relative; width: 100%; } .nav_panel--main { position: relative; } .nav_panel--sub { position: absolute; left: 0; right: 0; bottom: 0; visibility: hidden; } .nav_overlay_list { list-style: none; display: flex; flex-direction: column; } /* sub level steps down a size so seven rows still sit on one screen */ .nav_overlay_list--sub .nav_overlay_link { font-size: clamp(1.05rem, min(3.5vh, 5.6vw), 2.2rem); /* enough that each row clears 44px on a phone, where the type is small */ padding: clamp(0.75rem, 1.3vh, 0.9rem) 0; } /* the row that opens a sub-panel */ .nav_overlay_link--branch { text-align: left; } .nav_overlay_chev { flex: none; width: 0.34em; height: 0.34em; border-right: 3px solid currentColor; border-top: 3px solid currentColor; transform: rotate(45deg); opacity: 0.5; transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.3s ease; } .nav_overlay_link--branch:hover .nav_overlay_chev { opacity: 1; transform: rotate(45deg) translate(0.1em, -0.1em); } .nav_back { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0; margin-bottom: clamp(0.6rem, 1.8vh, 1.4rem); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.7, 0, 0.3, 1); } .nav_back:hover { opacity: 1; transform: translateX(-5px); } .nav_back_arrow { width: 0.5rem; height: 0.5rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .nav_overlay_item { border-bottom: 1px solid rgb(var(--ivory-rgb) / 0.28); overflow: hidden; } .nav_overlay_item:first-child { border-top: 1px solid rgb(var(--ivory-rgb) / 0.28); } .nav_overlay_link { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); width: 100%; padding: clamp(0.5rem, 1.6vh, 1.1rem) 0; font-family: var(--font-display); font-weight: 600; /* min() so the narrow axis can win: a phone is short of width, not height, and a pure-vh clamp ran the longest labels off the edge where overflow:hidden quietly ate them */ font-size: clamp(1.75rem, min(7.5vh, 9.5vw), 4.6rem); text-transform: uppercase; line-height: 1; will-change: transform; transition: padding-left 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .nav_overlay_link:hover { padding-left: clamp(0.75rem, 2vw, 1.5rem); } .nav_overlay_icon { display: grid; place-items: center; width: 0.85em; height: 0.85em; background: var(--beige-500); color: var(--brand-500); border-radius: var(--radius); overflow: hidden; opacity: 0; transform: translateY(35%) scale(0.7); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .nav_overlay_icon svg { width: 55%; height: 55%; transform: translate(-120%, 120%); transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1) 0.08s; } .nav_overlay_link:hover .nav_overlay_icon { opacity: 1; transform: translateY(0) scale(1); } .nav_overlay_link:hover .nav_overlay_icon svg { transform: translate(0, 0); } /* ============================================================ 05. HERO ============================================================ */ .hero { position: relative; height: 200vh; } .hero_sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; display: flex; flex-direction: column; } .hero_video_wrap { position: absolute; inset: 0; overflow: hidden; } .hero_video_canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero_video_shade { position: absolute; inset: 0; /* The frame sequence is a night city, so the middle stop only has to take the edge off — 0.30, not the 0.15 that suited the old daylight footage. It cannot do the whole job on its own: the lit towers measure 1.6:1 against the ivory headline, and darkening the frame far enough to fix that would throw away the photography. The halo below handles it. */ background: linear-gradient( 180deg, rgb(var(--ink-rgb) / 0.55) 0%, rgb(var(--ink-rgb) / 0.30) 40%, rgb(var(--ink-rgb) / 0.60) 100% ); } .hero_headings { position: relative; z-index: 2; /* A drop-shadow filter rather than a text-shadow: SplitText wraps every character in its own clipping mask, and a text-shadow would be sliced off at those boxes. A filter is applied after the subtree is composited, so the halo survives — invisible over the dark 95% of the frame, and the only thing holding the headline together when a lit tower passes behind it. */ filter: drop-shadow(0 0.01em 0.45rem rgb(var(--ink-rgb) / 0.8)); flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--site-pad) clamp(1.5rem, 4vh, 3rem); } .hero_line { display: flex; align-items: baseline; gap: clamp(1rem, 4vw, 4rem); will-change: transform; } .hero_line .u-display { font-size: clamp(4.5rem, 12.5vw, 12rem); line-height: 0.88; white-space: nowrap; } .hero_line--indent-1 { padding-left: clamp(2rem, 10vw, 10rem); } .hero_line--right { justify-content: flex-end; } /* ============================================================ 06. SUBPAGE HERO ============================================================ */ .page_hero { position: relative; /* the logo blue itself, not the navy the rest of the dark sections use */ background: var(--brand-500); min-height: 62vh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--nav-h); padding-bottom: clamp(2rem, 5vh, 4rem); overflow: clip; } .page_hero .u-eyebrow { display: block; margin-bottom: 1.25rem; } .page_hero_title { font-size: clamp(3.5rem, 12vw, 11rem); line-height: 0.88; } /* sentence-length headlines step down so they stay on two or three lines */ .page_hero_title--long { font-size: clamp(2.1rem, 6vw, 5.4rem); line-height: 0.95; max-width: 18ch; } .page_hero_meta { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgb(var(--ivory-rgb) / 0.3); font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; } /* current page in the overlay menu */ .nav_overlay_link[aria-current="page"] { opacity: 0.4; } .nav_overlay_link[aria-current="page"]:hover { padding-left: 0; } .nav_overlay_link[aria-current="page"]:hover .nav_overlay_icon { opacity: 0; } /* ============================================================ 07. INTRO ============================================================ */ .section { position: relative; padding: var(--section-pad) 0; } /* Two sections of the same theme in a row read as one continuous surface, but would pay two full paddings at the seam. Drop the second one's top padding. */ [data-theme-block="light"] + [data-theme-block="light"], [data-theme-block="dark"] + [data-theme-block="dark"], [data-theme-block="brand"] + [data-theme-block="brand"] { padding-top: 0; } /* ...but a tinted section paints its own ground, so it is continuous with neither the section above it nor the one below. Both keep their padding, or the panel starts flush against its own edge. The image band and the full-bleed testimonials panel end on their own edge the same way. */ [data-theme-block].section--tint, .section--tint + [data-theme-block], .band + .section, .tstm_section + .section { padding-top: var(--section-pad); } .intro_grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; } .intro_heading { max-width: 16ch; } .intro_copy p { font-size: var(--fs-large); line-height: 1.65; max-width: 46ch; color: inherit; } .intro_copy p + p { margin-top: 1.25rem; } /* ============================================================ 08. MARQUEE — the insurer panel ============================================================ */ .clients { /* no rule above it any more, so the space has to do that job: enough of it that the strip reads as its own band rather than as part of the intro */ padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; } .marquee { overflow: hidden; position: relative; } .marquee_scroll { display: flex; will-change: transform; } .marquee_content { display: flex; flex-shrink: 0; align-items: center; white-space: nowrap; } /* a lender strip of real bank marks, each on the firm's disclosed panel */ .marquee_item { --lender-base: clamp(1.6rem, 3vw, 2.6rem); display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); padding-inline: clamp(1.5rem, 3vw, 2.75rem); } .marquee_item img { display: block; width: auto; /* optical, not arithmetic: a square mark and a 5:1 wordmark cannot share a height without one of them looking wrong */ height: calc(var(--lender-base) * var(--k, 1)); /* full brand colour — each SVG carries its own bank's palette */ transition: transform 0.3s ease; } .marquee_item:hover img { transform: scale(1.05); } .lender--anz { --k: 1; } .lender--asb { --k: 1.2; } .lender--bnz { --k: 1.05; } .lender--westpac { --k: 0.85; } .lender--kiwibank { --k: 1.25; } .lender--tsb { --k: 0.95; } .lender--cooperative { --k: 1.1; } .lender--heartland { --k: 0.88; } .marquee_item::after { content: ""; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); opacity: 0.3; flex: none; } .marquee_item:hover { opacity: 1; } /* ============================================================ 09. AUDIENCE CARDS ============================================================ */ .audience_header { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .audience_header .u-eyebrow { opacity: 0.55; } .audience_grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(var(--ink-rgb) / 0.16); } .audience_card { border-right: 1px solid rgb(var(--ink-rgb) / 0.16); border-bottom: 1px solid rgb(var(--ink-rgb) / 0.16); padding: clamp(1.5rem, 2.5vw, 2.5rem); min-height: clamp(16rem, 26vw, 22rem); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: color 0.4s ease; } .audience_card:first-child { border-left: 1px solid rgb(var(--ink-rgb) / 0.16); } .audience_card::before { content: ""; position: absolute; inset: 0; /* --brand-600, not --brand-500: the card carries body copy, so it fills with the deeper blue (ivory on it 7.3:1) rather than the logo blue. */ background: var(--brand-600); transform: translateY(101%); transition: transform 0.55s var(--ease-expo); } .audience_card:hover::before { transform: translateY(0); } .audience_card:hover { color: var(--beige-500); } .audience_card > * { position: relative; } .audience_num { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.14em; opacity: 0.5; } .audience_card h3 { margin-top: auto; margin-bottom: 0.9rem; } .audience_card p { font-size: var(--fs-main); line-height: 1.6; opacity: 0.75; max-width: 30ch; } /* ============================================================ 10. SERVICES RAIL — sticky image beside scrolling panels ============================================================ */ .svcrail { position: relative; } .svcrail_grid { display: grid; grid-template-columns: 1fr 1fr; } .svcrail_side { position: sticky; top: 0; align-self: start; /* without this the item stretches and has nowhere to stick */ height: 100vh; height: 100dvh; overflow: hidden; background: var(--brand-800); } .svcrail_img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); /* CSS-driven, so the correct image is never waiting on a JS tween */ transition: opacity 0.9s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); } .svcrail_img.is-active { opacity: 1; transform: scale(1); } .svcrail_img img { width: 100%; height: 100%; object-fit: cover; } .svcrail_scrim { position: absolute; inset: 0; background: linear-gradient( 180deg, rgb(var(--ink-rgb) / 0.74) 0%, rgb(var(--ink-rgb) / 0.28) 46%, rgb(var(--ink-rgb) / 0.78) 100% ); } .svcrail_nav { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.2rem, 0.9vh, 0.7rem); padding: calc(var(--nav-h) + clamp(1.25rem, 4vh, 3rem)) var(--site-pad) 0; } .svcrail_item { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.85rem); line-height: 1.3; text-transform: uppercase; color: var(--beige-500); /* 0.55, not 0.42: at the small end of the clamp these read at 16.8px, and 0.42 over the scrim measured 3.2:1. The active item is yellow now, so lifting the resting state costs no legibility in the contrast between them. */ opacity: 0.55; transition: opacity 0.45s ease, color 0.45s ease; } .svcrail_item::before { content: ""; width: 0; height: 2px; background: currentColor; transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .svcrail_item:hover { opacity: 0.75; } .svcrail_item.is-active { /* yellow over the scrimmed photograph, so the current section reads at a glance; the underline below inherits it through currentColor */ color: var(--accent-500); opacity: 1; } .svcrail_item.is-active::before { width: clamp(1rem, 2.2vw, 2.25rem); } .svcrail_panels { position: relative; } .svcrail_panel { /* Sized to the content rather than the screen: a full viewport each meant ~9000px of scrolling to clear six services, most of it empty. */ min-height: clamp(30rem, 64vh, 50rem); /* Only the centred service is on screen. Dimming the neighbours to 0.22 still left the tail of one and the head of the next in view; they are hidden outright now. visibility keeps the box in the flow, so the scroll length and the one-gesture stepper are unchanged, and it also takes the hidden Read more links out of the tab order. */ opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(0.85rem, 3.6vh, 3rem); padding: clamp(2.5rem, 6vh, 5rem) var(--site-pad); border-bottom: 1px solid rgb(var(--ink-rgb) / 0.1); } .svcrail_panel.is-current { opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0s; } .svcrail_panel:last-child { border-bottom: 0; } .svcrail_kicker { color: var(--brand-600); } .svcrail_title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 2.9vw, 2.9rem); line-height: 1; text-transform: uppercase; max-width: 16ch; } .svcrail_lede { font-size: var(--fs-large); line-height: 1.65; max-width: 44ch; opacity: 0.8; } .svcrail_points { width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(0.4rem, 1.4vh, 0.9rem); border-top: 1px solid rgb(var(--ink-rgb) / 0.14); } .svcrail_point { padding: clamp(0.85rem, 2vh, 1.3rem) clamp(1rem, 2vw, 1.6rem) clamp(0.85rem, 2vh, 1.3rem) 0; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.14); } .svcrail_point h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-main); margin-bottom: 0.3rem; } .svcrail_point p { font-size: 0.9rem; line-height: 1.55; opacity: 0.7; } .svcrail_cta { margin-top: clamp(0.5rem, 1.6vh, 1rem); } /* The rail only lets go once this has been scrolled past, so it has to be a full screen tall — deleting it makes the column short and the sticky image releases early. */ /* ============================================================ 11. SUBPAGE COMPONENTS — process, checklist, related ============================================================ */ .steps { list-style: none; border-top: 1px solid rgb(var(--ink-rgb) / 0.14); } .step { display: grid; grid-template-columns: 5rem 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding: clamp(1.25rem, 3vh, 2.1rem) 0; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.14); } .step_num { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.14em; color: var(--brand-600); padding-top: 0.3rem; } .step_body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.1; text-transform: uppercase; margin-bottom: 0.45rem; } .step_body p { line-height: 1.65; max-width: 58ch; opacity: 0.78; } .checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vh, 1.2rem) clamp(1.5rem, 4vw, 3.5rem); list-style: none; } .checklist li { display: flex; align-items: flex-start; gap: 0.85rem; line-height: 1.6; } .checklist svg { flex: none; margin-top: 0.3em; color: var(--brand-500); } .checklist a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } .checklist a:hover { color: var(--brand-800); } .related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .related_card { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 11rem; padding: clamp(1.1rem, 2vw, 1.6rem); border: 1px solid rgb(var(--ink-rgb) / 0.14); border-radius: 0.6rem; transition: background 0.4s ease, color 0.4s ease, transform 0.5s var(--ease-expo); } .related_card:hover { background: var(--brand-800); color: var(--beige-500); transform: translateY(-4px); } .related_card h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.1; text-transform: uppercase; } .related_card span { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; } @media (max-width: 767px) { .step { grid-template-columns: 3rem 1fr; } .checklist, .related { grid-template-columns: 1fr; } } /* ============================================================ 12. SUBPAGE SECTIONS — band, glance, numbers, pull quote ============================================================ */ /* a tinted section breaks the run of white without going full dark */ .section--tint { background: var(--sand-200); } /* full-bleed photograph between two text sections */ .band { margin: 0; position: relative; /* the figure sits between sections rather than inside one, so it has to declare its own ground — otherwise the caption lands on the dark body */ background: var(--beige-500); } .band img { width: 100%; height: clamp(18rem, 42vw, 34rem); object-fit: cover; display: block; } .band figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-700); border-bottom: 1px solid rgb(var(--ink-rgb) / 0.16); } /* the facts people actually ask for, as a definition list */ .glance { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .glance_head { position: sticky; top: calc(var(--nav-h) + 2rem); } .glance_head .u-eyebrow { display: block; margin-bottom: 1rem; } .glance_list { margin: 0; border-top: 1px solid rgb(var(--ink-rgb) / 0.18); } .glance_row { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: clamp(1rem, 2.5vw, 2.5rem); padding-block: clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid rgb(var(--ink-rgb) / 0.18); } .glance_row dt { font-family: var(--font-display); font-size: var(--fs-main); letter-spacing: 0.02em; color: var(--brand-800); } .glance_row dd { margin: 0; color: var(--light-700); } /* the checklist now has a picture beside it instead of empty column */ .check_grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .check_body .checklist { margin-top: clamp(1.75rem, 3vw, 2.5rem); } .check_media { margin: 0; } .check_media img { width: 100%; /* see .post_media img: without height:auto the height attribute wins and this column stands 1250px tall whatever width it is given */ height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: var(--radius); } /* one line worth reading twice */ .pullquote { margin: 0; } .pullquote blockquote { margin: 0; /* the measure has to be set HERE, in the display font: 30ch on the figure is 30 body characters, which left the quote about four letters wide */ max-width: 26ch; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.1; color: var(--brand-800); text-wrap: balance; } .pullquote figcaption { margin-top: clamp(1.25rem, 2.5vw, 2rem); padding-top: 1rem; border-top: 1px solid rgb(var(--ink-rgb) / 0.2); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-600); } /* related cards carry the destination's photograph */ .related_card { gap: 0; min-height: 0; padding: 0; overflow: hidden; } .related_media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgb(var(--ink-rgb) / 0.06); } .related_media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.2s var(--ease-expo); } .related_card:hover .related_media img { transform: scale(1.08); } .related_kicker { display: block; padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem) 0; font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; } .related_card h3 { padding: 0.5rem clamp(1.1rem, 2vw, 1.5rem) 0; } .related_go { display: block; padding: 1rem clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem); transition: transform 0.45s var(--ease-expo); } .related_card:hover .related_go { transform: translateX(6px); } /* --- contact: social row. The anchors carry no href yet on purpose: a link to "#" goes nowhere, so they stay inert until real URLs arrive. --- */ .socials { display: flex; flex-wrap: wrap; gap: 0.5rem 0.65rem; margin-top: 0.75rem; } .social { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem 0.5rem 0.6rem; border: 1px solid rgb(var(--ink-rgb) / 0.16); border-radius: 999px; font-size: var(--fs-small); color: var(--brand-800); transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.45s var(--ease-expo); } .social_icon { display: inline-flex; color: var(--brand-600); transition: color 0.35s ease; } .social[href]:hover { background: var(--brand-600); border-color: var(--brand-600); color: var(--beige-500); transform: translateY(-2px); } .social[href]:hover .social_icon { color: var(--beige-500); } .social[href] { cursor: pointer; } /* ============================================================ 13. TESTIMONIALS — white cards on a draggable rail Cut to the reference: light sentence-case heading, tall cards, a signature script on the name, one video card. ============================================================ */ /* full bleed: the grey panel runs edge to edge as its own band, and the heading and first card line up with the rest of the page's content */ .tstm_section, .tstm_section > .container { padding: 0; } .tstm { background: var(--panel-100); padding-block: clamp(3rem, 8vw, 7.5rem) clamp(3rem, 6vw, 6rem); overflow: hidden; } .tstm_head { padding-inline: var(--site-pad); margin-bottom: clamp(1.75rem, 4.5vw, 4rem); } .tstm_head .u-eyebrow { display: block; margin-bottom: clamp(0.5rem, 1vw, 0.9rem); font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--light-700); } /* the reference heading is light and sentence-case — the opposite of the site's uppercase display face. Override u-h2 rather than drop the class, so the split-text reveal still finds it. */ .tstm_head h2 { max-width: 22ch; font-family: var(--font-body); font-weight: 400; font-size: clamp(1.85rem, 3.3vw, 3rem); text-transform: none; letter-spacing: -0.022em; line-height: 1.18; } /* the rail scrolls natively — wheel, trackpad, keyboard and drag all work */ .tstm_rail { overflow-x: auto; overflow-y: hidden; /* smooth is for the keyboard; the auto-advance writes with scrollTo({ behavior: "instant" }) so it is not smoothed frame by frame */ scroll-behavior: smooth; padding-inline: var(--site-pad); /* keeps a card tabbed into from jamming against the panel edge */ scroll-padding-inline: var(--site-pad); scrollbar-width: none; cursor: grab; } .tstm_rail::-webkit-scrollbar { display: none; } .tstm_rail.is-dragging { cursor: grabbing; scroll-behavior: auto; } .tstm_rail:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 4px; } .tstm_track { display: flex; gap: clamp(0.85rem, 1.5vw, 1.35rem); width: max-content; padding-block: 0.5rem; /* room for the hover lift */ } .tstm_card { position: relative; flex: 0 0 clamp(16rem, 26vw, 24rem); /* the avatar was ~80px of this; without it the card would keep a void above the quote */ min-height: clamp(17rem, 29vw, 26rem); display: flex; flex-direction: column; background: var(--beige-500); border-radius: clamp(0.75rem, 1vw, 1rem); padding: clamp(1.25rem, 2.25vw, 2rem); transition: transform 0.5s var(--ease-expo), box-shadow 0.5s ease; } .tstm_card:hover { transform: translateY(-6px); box-shadow: 0 1.5rem 2.5rem -1.25rem rgb(var(--ink-rgb) / 0.28); } /* a long review is cut on a whole line (height is lines × line-height, and the paragraphs carry no margin so the grid never drifts); the "…" button under it opens the full text */ .tstm_quote { --tstm-lines: 8; margin: 0; max-height: calc(1.5em * var(--tstm-lines)); overflow: hidden; font-size: var(--fs-main); line-height: 1.5; color: var(--brand-800); } .tstm_quote p { margin: 0; } /* straight quotes, the way the reference draws them */ .tstm_quote p:first-child::before, .tstm_quote p:last-child::after, .tstm_pop_quote p:first-child::before, .tstm_pop_quote p:last-child::after { content: '"'; } .tstm_more { display: none; align-self: flex-start; margin-top: 0.6rem; padding: 0 0.85rem 0.3rem; height: 1.9rem; border-radius: 999px; background: var(--panel-100); color: var(--brand-800); font-size: 1.25rem; line-height: 1; letter-spacing: 0.08em; cursor: pointer; transition: background 0.3s ease, color 0.3s ease; } .tstm_card.is-clamped .tstm_more { display: inline-grid; place-items: center; } .tstm_more:hover, .tstm_more:focus-visible { background: var(--brand-800); color: var(--beige-500); } .tstm_more:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; } .tstm_by { margin-top: auto; padding-top: clamp(1.5rem, 3vw, 2.5rem); } .tstm_name { display: block; /* a signature, not a handwriting face: Sacramento is a thin monoline slant, the one thing the site's two faces cannot do. Loaded for this and nothing else. */ font-family: "Sacramento", "Blauer Nue", cursive; font-weight: 400; font-size: clamp(1.7rem, 2.4vw, 2.15rem); line-height: 1; color: var(--brand-800); } /* ---------- the full review, in a popup ---------- */ .tstm_pop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(0.75rem, 2.5vw, 2rem); visibility: hidden; opacity: 0; transition: opacity 0.45s ease, visibility 0s linear 0.45s; } .tstm_pop.is-open { visibility: visible; opacity: 1; transition: opacity 0.45s ease, visibility 0s; } .tstm_pop_scrim { position: absolute; inset: 0; background: rgb(var(--ink-rgb) / 0.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); cursor: pointer; } .tstm_pop_dialog { position: relative; width: min(40rem, 100%); max-height: min(86vh, 46rem); display: flex; flex-direction: column; overflow: hidden; /* keeps the scrollbar inside the rounded corners */ background: var(--beige-500); color: var(--brand-800); border-radius: clamp(0.9rem, 1.4vw, 1.35rem); box-shadow: 0 2.5rem 5rem rgb(var(--ink-rgb) / 0.32); transform: translateY(1.5rem) scale(0.99); transition: transform 0.6s var(--ease-expo); } .tstm_pop.is-open .tstm_pop_dialog { transform: none; } .tstm_pop_dialog:focus { outline: none; } .tstm_pop_scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 3rem); padding-right: clamp(3.5rem, 5vw, 4.5rem); /* clear of the close button */ } .tstm_pop_eyebrow { display: block; margin-bottom: 1.1rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-700); } .tstm_pop_quote { margin: 0; font-size: var(--fs-main); line-height: 1.6; } .tstm_pop_quote p { margin: 0; } .tstm_pop_quote p + p { margin-top: 0.9em; } .tstm_pop_name { display: block; margin-top: clamp(1.5rem, 3vw, 2.25rem); font-family: "Sacramento", "Blauer Nue", cursive; font-weight: 400; font-size: clamp(1.9rem, 2.6vw, 2.35rem); line-height: 1; } .tstm_pop_close { position: absolute; top: clamp(0.9rem, 1.8vw, 1.4rem); right: clamp(0.9rem, 1.8vw, 1.4rem); z-index: 2; width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: 50%; background: var(--panel-100); color: var(--brand-800); cursor: pointer; transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-expo); } .tstm_pop_close:hover { background: var(--brand-800); color: var(--beige-500); transform: rotate(90deg); } /* ============================================================ 14. ACCORDION — FAQ rows (.law is the legacy name) ============================================================ */ .laws_header { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .laws_header > * { min-width: 0; overflow-wrap: break-word; } .laws_header .u-eyebrow { color: var(--brand-300); } .laws_list { border-top: 1px solid rgb(var(--ivory-rgb) / 0.18); } .law { border-bottom: 1px solid rgb(var(--ivory-rgb) / 0.18); } .law_toggle { width: 100%; display: grid; grid-template-columns: 4rem 1fr 2.5rem; align-items: center; gap: 1.5rem; padding: clamp(1.25rem, 2.4vw, 1.9rem) 0; text-align: left; transition: padding-left 0.4s var(--ease-expo); } .law_toggle:hover { padding-left: 0.75rem; } .law_num { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.14em; color: var(--brand-300); } .law_title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 2.1rem); text-transform: uppercase; line-height: 1.05; } .law_icon { justify-self: end; width: 2.25rem; height: 2.25rem; border: 1px solid rgb(var(--ivory-rgb) / 0.35); border-radius: 50%; display: grid; place-items: center; transition: transform 0.5s var(--ease-expo), background 0.3s, color 0.3s; } .law_icon svg { transition: transform 0.5s var(--ease-expo); } .law_body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-expo); } .law_body_inner { overflow: hidden; grid-column: 1 / -1; } .law_body p { padding: 0 0 clamp(1.25rem, 2.4vw, 1.9rem) 5.5rem; max-width: 52ch; font-size: var(--fs-large); line-height: 1.6; color: var(--brand-300); } .law_body p a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } .law_body p a:hover { color: var(--white, #fff); } .law[data-accordion-status="active"] .law_body { grid-template-rows: 1fr; } .law[data-accordion-status="active"] .law_icon { background: var(--accent-500); border-color: var(--accent-500); color: var(--brand-800); } .law[data-accordion-status="active"] .law_icon svg { transform: rotate(45deg); } /* ============================================================ 15. CTA BAND ============================================================ */ .offmarket { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: clip; } .offmarket_inner { position: relative; z-index: 2; padding-block: var(--section-pad); max-width: 62rem; } .offmarket_inner .u-eyebrow { color: var(--beige-500); opacity: 0.92; display: block; margin-bottom: 1.5rem; } .offmarket_inner h2 { margin-bottom: 1.5rem; } .offmarket_inner p { font-size: var(--fs-large); line-height: 1.65; max-width: 52ch; margin-bottom: 2.5rem; } .btn { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--fs-main); /* The primary call to action, in the logo yellow. .btn is only ever placed on a dark or brand ground — light sections use .btn--dark — so the ink sits on the yellow (10:1) and never the other way round. */ background: var(--accent-500); color: var(--brand-800); padding: 1rem 1.6rem; border-radius: var(--radius); position: relative; overflow: hidden; transition: color 0.35s ease; } .btn::before { content: ""; position: absolute; inset: 0; background: var(--brand-800); transform: translateY(101%); transition: transform 0.5s var(--ease-expo); } .btn:hover::before { transform: translateY(0); } .btn:hover { color: var(--beige-500); } /* the dark variant inverts: it fills with brand blue instead of the ground */ .btn--dark::before { background: var(--brand-600); } .btn span, .btn svg { position: relative; } /* ============================================================ 16. CONTACT ============================================================ */ .contact_grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 6vw, 7rem); } .contact_form_head { margin-bottom: 2.5rem; } .contact_form_head h2 { max-width: 18ch; } .form_field { position: relative; margin-bottom: 1.75rem; } .form_field label { display: block; font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.6rem; opacity: 0.6; } .form_field input, .form_field select, .form_field textarea { width: 100%; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.3); padding: 0.65rem 0; border-radius: 0; outline: none; transition: border-color 0.3s; } .form_field input:focus, .form_field select:focus, .form_field textarea:focus { border-color: var(--brand-600); } .form_field textarea { min-height: 7rem; resize: vertical; } .form_field input[aria-invalid="true"], .form_field select[aria-invalid="true"], .form_field textarea[aria-invalid="true"] { border-color: var(--error-600); } .form_error { display: block; margin-top: 0.4rem; font-size: var(--fs-small); color: var(--error-600); } .form_note { margin-top: 1.25rem; font-size: var(--fs-main); color: var(--brand-600); } .form_note[data-state="error"] { color: var(--error-600); } .form_checks { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.4rem 0 1.9rem; } .check_pill { position: relative; } .check_pill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .check_pill span { display: inline-block; font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgb(var(--ink-rgb) / 0.35); padding: 0.55rem 1rem; border-radius: 99px; transition: background 0.3s, color 0.3s, border-color 0.3s; } .check_pill input:checked + span { background: var(--brand-500); border-color: var(--brand-500); color: var(--beige-500); } .check_pill input:focus-visible + span { outline: 2px solid var(--brand-600); outline-offset: 2px; } .btn--dark { background: var(--brand-800); color: var(--beige-500); } .btn--dark:hover { color: var(--beige-500); } .contact_details { display: flex; flex-direction: column; gap: 2.25rem; padding-top: 0.5rem; } .contact_block .u-eyebrow { display: block; opacity: 0.5; margin-bottom: 0.8rem; } .contact_block a, .contact_block address { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.6rem); text-transform: uppercase; font-style: normal; line-height: 1.3; } .contact_block a:hover { color: var(--brand-600); } /* --- about: the company's own story --- */ .story { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .story_head { position: sticky; top: calc(var(--nav-h) + 2rem); } .story_head .u-eyebrow { display: block; margin-bottom: 1rem; } .story_body p { font-size: var(--fs-large); line-height: 1.7; max-width: 54ch; } .story_body p + p { margin-top: clamp(1.1rem, 2vw, 1.6rem); } .story_cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); } /* ============================================================ 17. TEAM ============================================================ */ /* the whole team, on location */ .team_lead { margin: 0 0 clamp(2.5rem, 5vw, 4.5rem); } .team_lead img { width: 100%; height: auto; display: block; border-radius: var(--radius); } .team_lead figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--light-700); } .team_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem); } .team_card { display: flex; flex-direction: column; isolation: isolate; /* keeps the portrait's blend inside its own card */ } .team_photo { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); background: var(--sand-200); } .team_photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; transform: scale(1); transform-origin: 50% 100%; transition: transform 1.2s var(--ease-expo); } .team_card:hover .team_photo img { transform: scale(1.04); } .team_body { padding-top: clamp(0.85rem, 1.5vw, 1.2rem); border-top: 1px solid rgb(var(--ink-rgb) / 0.16); margin-top: clamp(0.85rem, 1.5vw, 1.2rem); } .team_name { font-family: var(--font-display); font-size: var(--fs-sub); line-height: 1.15; transition: color 0.35s ease; } .team_card:hover .team_name { color: var(--brand-600); } .team_role { display: block; margin-top: 0.35rem; font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-600); } /* closing strip under the grid */ .team_note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.25rem, 2.5vw, 2rem); border-top: 1px solid rgb(var(--ink-rgb) / 0.16); } .team_note p { max-width: 46ch; color: var(--light-700); } /* ============================================================ 18. LEGAL ============================================================ */ .legal { max-width: 46rem; } .legal_intro { font-size: var(--fs-large); line-height: 1.7; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .legal_block { border-top: 1px solid rgb(var(--ink-rgb) / 0.16); padding-top: clamp(1.25rem, 2.4vw, 1.9rem); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); } .legal_block h2 { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; } .legal_num { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.14em; color: var(--brand-600); } .legal_block p { line-height: 1.7; opacity: 0.85; } .legal_block a { text-decoration: underline; text-underline-offset: 3px; } .legal_block a:hover { color: var(--brand-600); } /* --- privacy + disclosure: lists, sub-headings and key/value tables --- */ .legal_list { list-style: none; margin: 0.9rem 0 0; display: grid; gap: 0.6rem; } .legal_list li { position: relative; padding-left: 1.4rem; line-height: 1.65; } .legal_list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 0.45rem; border: 1px solid var(--brand-500); transform: rotate(45deg); } .legal_note { display: block; margin-top: 0.7rem; color: var(--light-700); } .legal_sub { font-family: var(--font-display); font-size: var(--fs-main); letter-spacing: 0.02em; margin-top: 1.6rem; margin-bottom: 0.5rem; color: var(--brand-600); } .legal_table { margin-top: 1rem; border-top: 0; } .legal_table .glance_row { grid-template-columns: minmax(7rem, 11rem) 1fr; gap: clamp(0.85rem, 2vw, 1.75rem); padding-block: 0.8rem; border-bottom-color: rgb(var(--ink-rgb) / 0.12); } .legal_table .glance_row:first-child { border-top: 1px solid rgb(var(--ink-rgb) / 0.12); } .legal_table dd, .legal_list li { /* email addresses have no break point of their own and pushed the page 2px wide at 390 */ overflow-wrap: anywhere; } .legal p + p, .legal_list + p { margin-top: 0.9rem; } /* ============================================================ 19. FOOTER ============================================================ */ .footer { position: relative; overflow: hidden; } .footer_inner { will-change: transform; padding: var(--section-pad) 0 0; } .footer_dark_veil { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); pointer-events: none; z-index: 3; } /* --- work with us: the address opposite the line, underlined --- */ .footer_cta { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: clamp(1.25rem, 3vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid rgb(var(--ivory-rgb) / 0.16); } .footer_cta_title { font-family: var(--font-display); font-weight: 600; /* sentence case, the way the reference sets it — the rest of the site's display face runs uppercase */ text-transform: none; font-size: clamp(2.25rem, 5.4vw, 5rem); line-height: 0.95; letter-spacing: -0.015em; } .footer_cta_mail { justify-self: end; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2.7vw, 2.25rem); line-height: 1.1; letter-spacing: -0.015em; overflow-wrap: anywhere; border-bottom: 2px solid currentColor; padding-bottom: 0.12em; transition: color 0.3s ease; } .footer_cta_mail:hover { color: var(--accent-500); } /* --- link columns: solid labels, dimmed links --- */ .footer_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 9vw, 8rem); } .footer_col_label { display: block; margin-bottom: clamp(0.9rem, 1.8vw, 1.5rem); font-family: var(--font-body); font-size: var(--fs-main); color: var(--beige-500); } .footer_col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .footer_col a { font-family: var(--font-body); font-size: var(--fs-main); /* --brand-300 on --brand-800 is 8.7:1. The reference's mid-grey would be 3.4:1 on this ground, so the dimming is done with the blue, not with opacity. */ color: var(--brand-300); transition: color 0.25s ease; } .footer_col a:hover { color: var(--beige-500); } /* --- the wordmark fills the bottom left, meta on its baseline --- */ .footer_base { display: grid; grid-template-columns: 1.5fr auto; align-items: end; gap: clamp(1.25rem, 3vw, 3rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); } .footer_wordmark { width: 100%; aspect-ratio: 266 / 33; background-color: var(--beige-500); -webkit-mask: var(--logo-full) no-repeat left bottom / contain; mask: var(--logo-full) no-repeat left bottom / contain; user-select: none; } .footer_meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: clamp(1rem, 2.4vw, 2.5rem); padding-bottom: 0.4rem; font-size: var(--fs-small); color: var(--brand-300); } .footer_totop { transition: color 0.25s ease; } .footer_totop:hover { color: var(--beige-500); } .footer_legal { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; padding-block: 1.25rem; border-top: 1px solid rgb(var(--ivory-rgb) / 0.14); font-size: var(--fs-small); color: var(--brand-300); } .footer_legal a { transition: color 0.25s ease; } .footer_legal a:hover { color: var(--beige-500); } .footer_legal_end { margin-left: auto; } /* studio credit — plain lowercase in a thin white box */ .footer_credit { align-self: center; padding: 0.35em 0.8em; border: 1px solid var(--beige-500); color: var(--beige-500); text-transform: none; letter-spacing: 0; line-height: 1.2; transition: background-color 0.25s ease, color 0.25s ease; } .footer_legal a.footer_credit:hover { background: var(--beige-500); color: var(--brand-800); } /* ============================================================ 20. MOBILE TAP TARGETS WCAG 2.5.8 asks for 24x24. On a phone the footer links came out 19-20px tall, the footer address 22px. Padding buys the height; a tighter list gap pays for most of it so the footer barely grows. Keyed on the pointer as well as the width: a landscape iPad is 1024 wide and still a thumb, so a width-only rule handed it the desktop's 19px rows. ============================================================ */ @media (max-width: 900px), (pointer: coarse) { .footer_col ul { gap: 0.15rem; } .footer_col a, .footer_legal a, .footer_totop { display: inline-block; padding-block: 0.5rem; } .contact_block a { display: inline-block; padding-block: 0.35rem; } /* the footer's actual call to action was rendering at 17px under a 36px heading — the min of its clamp was doing all the work */ .footer_cta_mail { font-size: clamp(1.35rem, 5.5vw, 2.25rem); } .nav_burger { width: 2.75rem; height: 2.75rem; } .check_pill { padding-block: 0.6rem; } } /* ============================================================ 21. RESPONSIVE ============================================================ */ @media (max-width: 991px) { .audience_grid { grid-template-columns: repeat(2, 1fr); } .svcrail_grid { grid-template-columns: 1fr; } .svcrail_side { position: relative; height: 60vh; } /* stacked on narrow screens: every service is simply readable in turn */ .svcrail_panel { min-height: auto; opacity: 1; visibility: visible; padding-block: clamp(2.5rem, 6vh, 4rem); } .glance, .story, .check_grid { grid-template-columns: 1fr; } .glance_head, .story_head { position: static; } .check_media { max-width: 26rem; } .svcrail_points { grid-template-columns: 1fr; } .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .intro_grid, .laws_header, .contact_grid { grid-template-columns: 1fr; } .footer_grid { grid-template-columns: 1fr 1fr; } .hero { height: 180vh; } } @media (max-width: 600px) { .audience_grid { grid-template-columns: 1fr; } /* leave a clear sliver of the next card: on one-card-wide screens it is the only cue that the rail moves */ .tstm_card { flex-basis: 74vw; min-height: 99vw; } .tstm_quote { --tstm-lines: 10; } .glance_row { grid-template-columns: 1fr; gap: 0.35rem; } .related { grid-template-columns: 1fr; } .pullquote { max-width: none; } .team_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team_lead figcaption { flex-direction: column; gap: 0.35rem; } .hero_line .u-display { font-size: clamp(3rem, 13.5vw, 4.5rem); } .law_toggle { grid-template-columns: 2.5rem 1fr 2.5rem; gap: 0.9rem; } .law_body p { padding-left: 3.4rem; } .footer_grid { grid-template-columns: 1fr; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 900px) { .footer_cta { grid-template-columns: 1fr; align-items: start; } .footer_cta_mail { justify-self: start; } .footer_base { grid-template-columns: 1fr; } .footer_meta { justify-content: flex-start; } .footer_legal_end { margin-left: 0; } } /* ============================================================ 24. TEAM PROFILE DIALOG Laid out to the supplied persona design: a label and a standfirst across the top, then two even columns — portrait card with avatar switcher and frosted name plate on the left, topic cards on the right. Its own cool palette and near-black type, deliberately quieter than the navy page it opens over. ============================================================ */ .bio { --bio-r: 1.35rem; --bio-card-r: 1.1rem; --bio-ground: #f4f4f6; --bio-surface: #ffffff; --bio-ink: #16171d; --bio-muted: #6c707c; --bio-faint: #9a9ea9; --bio-accent: #4f5bd5; --bio-accent-soft: #eef0fd; --bio-line: #e8e9ee; --bio-shadow: 0 1px 2px rgb(22 23 29 / 0.04), 0 0.5rem 1.5rem rgb(22 23 29 / 0.05); position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(0.5rem, 2.5vw, 2rem); visibility: hidden; opacity: 0; transition: opacity 0.45s ease, visibility 0s linear 0.45s; } .bio.is-open { visibility: visible; opacity: 1; transition: opacity 0.45s ease, visibility 0s; } .bio_scrim { position: absolute; inset: 0; background: rgb(var(--ink-rgb) / 0.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); cursor: pointer; } .bio_dialog { position: relative; width: min(70rem, 100%); height: min(88vh, 52rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: clamp(0.9rem, 1.7vw, 1.4rem); padding: clamp(1.1rem, 2.2vw, 2rem); background: var(--bio-ground); color: var(--bio-ink); border-radius: var(--bio-r); box-shadow: 0 2.5rem 5rem rgb(var(--ink-rgb) / 0.32); transform: translateY(1.5rem) scale(0.99); transition: transform 0.6s var(--ease-expo); } .bio.is-open .bio_dialog { transform: none; } /* a profile with no written bio yet has nothing to scroll, so it sizes to its own content rather than standing a half-empty column of grey */ .bio.is-brief .bio_dialog { height: auto; max-height: min(88vh, 52rem); } .bio.is-brief .bio_aside { aspect-ratio: 4 / 5; } /* ---------- the header row, across both columns ---------- */ .bio_head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: clamp(0.9rem, 1.7vw, 1.4rem); align-items: start; padding-bottom: clamp(0.4rem, 1vw, 0.9rem); } .bio_eyebrow { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bio-muted); padding-top: 0.5em; } .bio_eyebrow::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--bio-accent); } .bio_intro { font-size: clamp(1.02rem, 1.35vw, 1.25rem); font-weight: 300; line-height: 1.48; color: var(--bio-ink); padding-right: 3.25rem; } .bio_intro b { font-weight: inherit; color: var(--bio-accent); } /* ---------- the portrait card ---------- */ .bio_aside { position: relative; overflow: hidden; border-radius: var(--bio-card-r); background: #e9eaee; box-shadow: var(--bio-shadow); } .bio_aside > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block; } /* the other advisers, switchable without leaving the profile */ .bio_avatars { position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2; display: flex; gap: 0.35rem; } .bio_avatar { width: 2rem; height: 2rem; padding: 0; border-radius: 0.5rem; overflow: hidden; background: var(--bio-surface); box-shadow: 0 0.2rem 0.6rem rgb(22 23 29 / 0.22); opacity: 0.62; transition: opacity 0.3s ease, transform 0.35s var(--ease-expo); } .bio_avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; } .bio_avatar:hover { opacity: 1; transform: translateY(-2px); } .bio_avatar[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--bio-accent); outline-offset: 2px; } /* the name plate carries its own ground so it reads over any photograph */ .bio_plate { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.8rem, 1.5vw, 1.1rem) clamp(0.95rem, 1.7vw, 1.3rem); border-radius: 0.85rem; background: rgb(18 19 24 / 0.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; } .bio_name { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.15; letter-spacing: -0.01em; } .bio_role { display: block; margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.4; color: rgb(255 255 255 / 0.68); } .bio_plate_mark { flex: none; width: 1.9rem; height: 1.9rem; background-color: #fff; opacity: 0.78; -webkit-mask: var(--logo-mark) no-repeat center / contain; mask: var(--logo-mark) no-repeat center / contain; } /* ---------- the card stack ---------- */ .bio_scroll { position: relative; min-height: 0; /* a grid item will not shrink below its content without this */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 0.3rem 0.3rem 0.3rem 0; /* room for the cards' own shadow */ } .bio_close { position: absolute; top: clamp(1.1rem, 2.2vw, 2rem); right: clamp(1.1rem, 2.2vw, 2rem); z-index: 4; width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: 50%; background: var(--bio-surface); color: var(--bio-ink); box-shadow: var(--bio-shadow); transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-expo); } .bio_close:hover { background: var(--bio-ink); color: var(--bio-surface); transform: rotate(90deg); } .bio_stack { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.3vw, 1rem); } .bio_card { padding: clamp(1.15rem, 2vw, 1.6rem); background: var(--bio-surface); border-radius: var(--bio-card-r); box-shadow: var(--bio-shadow); } .bio_card_head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: clamp(0.9rem, 1.8vw, 1.25rem); } .bio_card_icon { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 0.7rem; background: var(--bio-accent-soft); color: var(--bio-accent); } .bio_card_head h3 { font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.005em; color: var(--bio-ink); } .bio_points { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .bio_points li { position: relative; padding-left: 1rem; font-size: 0.9125rem; line-height: 1.6; color: var(--bio-muted); } .bio_points li::before { content: ""; position: absolute; left: 0.2rem; top: 0.7em; width: 0.26rem; height: 0.26rem; border-radius: 50%; background: var(--bio-faint); } .bio_points strong { font-weight: 500; color: var(--bio-ink); } /* the document's numbered list, kept numbered */ .bio_steps { list-style: none; display: flex; flex-direction: column; gap: clamp(0.7rem, 1.4vw, 1rem); } .bio_steps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.75rem; align-items: start; } .bio_steps i { font-style: normal; font-size: 0.75rem; font-weight: 500; line-height: 1.7rem; text-align: center; border-radius: 0.5rem; background: var(--bio-accent-soft); color: var(--bio-accent); } .bio_steps span { font-size: 0.9125rem; line-height: 1.6; color: var(--bio-muted); padding-top: 0.15rem; } .bio_steps strong { font-weight: 500; color: var(--bio-ink); } /* the sign-off, as the document writes it */ .bio_signoff { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: clamp(1.05rem, 2vw, 1.5rem); font-size: 0.9125rem; color: var(--bio-faint); } .bio_signoff a { color: var(--bio-accent); transition: opacity 0.3s ease; } .bio_signoff a:hover { opacity: 0.7; } .bio_closing p + p { margin-top: 0.55rem; } .bio_card > p { font-size: 0.9125rem; line-height: 1.68; color: var(--bio-muted); margin-bottom: clamp(0.95rem, 1.9vw, 1.3rem); } .bio_prose p { font-size: 0.9125rem; line-height: 1.72; color: var(--bio-muted); } .bio_prose p + p { margin-top: 0.8rem; } /* the one solid element in the stack, so the call to action is what the eye lands on */ .bio_cta { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1.35rem; border-radius: 999px; background: var(--bio-accent); color: #fff; font-size: 0.9125rem; transition: background 0.35s ease, gap 0.35s var(--ease-expo); } .bio_cta:hover { background: #3f4bc4; gap: 0.85rem; } /* --- the card that opens it ------------------------------- */ .team_card { position: relative; } /* the button carries the name, and its ::after makes the whole card the hit area — one focus stop per adviser, not three */ .team_trigger { font: inherit; color: inherit; text-align: left; letter-spacing: inherit; } .team_trigger::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .team_trigger:focus-visible::after { outline: 2px solid var(--brand-600); outline-offset: 4px; } .team_more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.55rem; font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-700); transition: color 0.35s ease, gap 0.35s var(--ease-expo); } .team_card:hover .team_more { color: var(--brand-600); gap: 0.75rem; } @media (max-width: 900px) { /* one column, and the dialog itself becomes the scroller */ .bio { --bio-r: 1.1rem; --bio-card-r: 0.9rem; } .bio_dialog { grid-template-columns: 1fr; grid-template-rows: auto auto auto; height: min(92vh, 56rem); overflow-y: auto; overscroll-behavior: contain; } .bio_head { grid-template-columns: 1fr; gap: 0.6rem; } .bio_eyebrow { padding-top: 0; } .bio_intro { padding-right: 2.75rem; } .bio_aside { aspect-ratio: 4 / 3; } .bio_scroll { overflow: visible; padding: 0.3rem; } /* fixed, not absolute: the dialog itself is the scroller here, so an absolute button would scroll away with the content */ .bio_close { position: fixed; top: clamp(0.9rem, 3.5vw, 1.5rem); right: clamp(0.9rem, 3.5vw, 1.5rem); } } @media (prefers-reduced-motion: reduce) { .bio, .bio_dialog, .bio_close, .bio_avatar, .bio_cta, .team_more { transition: none; } .bio_dialog { transform: none; } }