/* ==========================================================================
   Iron & Oak theme styles
   Home page sections follow the PSD at a 1440px viewport (PSD px / 3.12);
   header, footer, trust bar and the inner pages follow the Figma file at 1440px.
   ========================================================================== */

:root {
	--io-navy: var(--wp--preset--color--navy);
	--io-orange: var(--wp--preset--color--orange);
	--io-cream: var(--wp--preset--color--cream);
	--io-orange-bright: var(--wp--preset--color--orange-bright);
	/* Content width of the inner pages: 48px from each edge at 1440px. */
	--io-page-wide: 1344px;
	/* Left/right edge of that column, measured against the section (main and
	   footer are size containers). Offsets inside sections are the Figma
	   values at 1440px and shrink with the screen below that (min(px, cqi)). */
	--io-edge: max(16px, (100cqi - var(--io-page-wide)) / 2);
	/* Wider than 1440px the layout stays the 1440px design, centred: this is
	   the space on each side of that frame. Photos that touch the screen edge
	   at 1440px stop at the frame; colour bands still run to the edge. */
	--io-frame: max(0px, (100cqi - 1440px) / 2);
	/* Space between the wide content column and the edge of a full-width section.
	   Uses the section's own width (cqi) rather than 100vw, which includes the
	   scrollbar and would push bleeding images past the edge. cqi is the
	   container's content box, so the section's root padding is added back. */
	--io-gutter: calc(max(0px, (100cqi - var(--wp--style--global--wide-size)) / 2) + var(--wp--style--root--padding-right, 16px));
	--io-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M24.3284 13C24.3284 6.74336 19.2564 1.67138 12.9998 1.67138C6.74324 1.67138 1.67126 6.74336 1.67126 13C1.67126 19.2566 6.74324 24.3285 12.9998 24.3285C19.2564 24.3285 24.3284 19.2566 24.3284 13ZM25.8141 13C25.8141 20.0771 20.077 25.8142 12.9998 25.8142C5.9227 25.8142 0.185547 20.0771 0.185547 13C0.185547 5.92282 5.9227 0.185669 12.9998 0.185669C20.077 0.185669 25.8141 5.92282 25.8141 13Z' fill='%23000'/%3E%3Cpath d='M20.8291 13L14.9182 18.911L13.8675 17.8604L17.9851 13.7429H6.5V12.2572H17.9851L13.8675 8.13962L14.9182 7.08899L20.8291 13Z' fill='%23000'/%3E%3C/svg%3E");
	--io-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.6806 18.458L17.0353 19.5441C15.9762 20.2735 11.4626 21.0934 5.32209 13.6545C-0.597672 6.49265 1.09506 2.52104 1.88909 1.60514L3.25539 0.185029C3.57752 -0.0896856 4.06354 -0.0573728 4.34046 0.274468L7.9338 4.5251L7.93601 4.5273C8.19892 4.83874 8.19032 5.32354 7.84447 5.61557V5.61877L6.25199 6.76737C5.62161 7.39234 6.17115 8.37606 6.81554 9.32637L9.87985 12.9445C11.3054 14.3205 12.0865 14.9562 12.7686 14.5015L14.0929 13.0243C14.4172 12.7516 14.901 12.7851 15.1779 13.1148L18.7735 17.3654V17.3676C19.0351 17.6801 19.0254 18.1639 18.6806 18.458Z' fill='%23000'/%3E%3C/svg%3E");
	--io-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M21.2343 10.3568C21.5895 9.93394 22.2203 9.8791 22.6432 10.2343C23.0661 10.5895 23.1209 11.2203 22.7657 11.6432L14.3657 21.6432C14.1795 21.8648 13.9065 21.9949 13.6171 21.9999C13.3277 22.0048 13.0503 21.8841 12.8567 21.669L9.25671 17.669C8.88725 17.2585 8.92054 16.6262 9.33105 16.2567C9.74156 15.8873 10.3738 15.9206 10.7433 16.3311L13.5739 19.4762L21.2343 10.3568Z' fill='%23000'/%3E%3Cpath d='M27 7C27 5.89543 26.1046 5 25 5H7C5.89543 5 5 5.89543 5 7V25C5 26.1046 5.89543 27 7 27H25C26.1046 27 27 26.1046 27 25V7ZM29 25C29 27.2091 27.2091 29 25 29H7C4.79086 29 3 27.2091 3 25V7C3 4.79086 4.79086 3 7 3H25C27.2091 3 29 4.79086 29 7V25Z' fill='%23000'/%3E%3C/svg%3E");
	--io-icon-family: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M24 28C29.5228 28 34 23.5228 34 18C34 12.4772 29.5228 8 24 8C18.4772 8 14 12.4772 14 18C14 23.5228 18.4772 28 24 28Z' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 54V49C6 39 13 33 24 33C35 33 42 39 42 49V54H6Z' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M41 13C42.0621 12.5755 43.212 12.4177 44.3492 12.5404C45.4864 12.6632 46.5762 13.0627 47.5232 13.704C48.4703 14.3454 49.2457 15.209 49.7818 16.2195C50.3178 17.2299 50.5981 18.3562 50.5981 19.5C50.5981 20.6438 50.3178 21.7701 49.7818 22.7806C49.2457 23.791 48.4703 24.6546 47.5232 25.296C46.5762 25.9373 45.4864 26.3369 44.3492 26.4596C43.212 26.5823 42.0621 26.4245 41 26M45 33C53 33 58 39 58 47V51H48' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-licensed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 6C38 10 45 12 53 14V30C53 43 45 52 32 58C19 52 11 43 11 30V14C19 12 26 10 32 6Z' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23 32L29 38L42 25' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-estimates: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M15 7H38L51 20V55C51 55.5304 50.7893 56.0391 50.4142 56.4142C50.0391 56.7893 49.5304 57 49 57H15C14.4696 57 13.9609 56.7893 13.5858 56.4142C13.2107 56.0391 13 55.5304 13 55V9C13 8.46957 13.2107 7.96086 13.5858 7.58579C13.9609 7.21071 14.4696 7 15 7Z' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M38 7V20H51M22 29H42M22 37H42M22 45H42' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-answering: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M11 29V25C11 19.4305 13.2125 14.089 17.1508 10.1508C21.089 6.21249 26.4305 4 32 4C37.5695 4 42.911 6.21249 46.8492 10.1508C50.7875 14.089 53 19.4305 53 25V29' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 31C17 28.2386 14.7614 26 12 26C9.23858 26 7 28.2386 7 31V40C7 42.7614 9.23858 45 12 45C14.7614 45 17 42.7614 17 40V31Z' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M57 31C57 28.2386 54.7614 26 52 26C49.2386 26 47 28.2386 47 31V40C47 42.7614 49.2386 45 52 45C54.7614 45 57 42.7614 57 40V31Z' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M52 45V47C52 53 47 57 39 57' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M37.5 53H32.5C30.567 53 29 54.567 29 56.5C29 58.433 30.567 60 32.5 60H37.5C39.433 60 41 58.433 41 56.5C41 54.567 39.433 53 37.5 53Z' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-test: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cpath d='M17.3327 73.3333C13.4448 67.7335 11.1644 61.1761 10.7388 54.3722C10.3133 47.5683 11.7588 40.7778 14.9187 34.7372C18.0785 28.6966 22.832 23.6365 28.6636 20.1057C34.4952 16.575 41.1822 14.7084 47.9994 14.7084C54.8165 14.7084 61.5035 16.575 67.3351 20.1057C73.1667 23.6365 77.9202 28.6966 81.0801 34.7372C84.2399 40.7778 85.6854 47.5683 85.2599 54.3722C84.8343 61.1761 82.5539 67.7335 78.666 73.3333M23.9994 60C21.4463 55.7515 20.0668 50.9014 20.0018 45.9453C19.9367 40.9892 21.1884 36.1046 23.6291 31.7905C26.0697 27.4765 29.6118 23.8876 33.8934 21.3906C38.175 18.8935 43.0428 17.5778 47.9994 17.5778C52.9559 17.5778 57.8237 18.8935 62.1053 21.3906C66.387 23.8876 69.929 27.4765 72.3696 31.7905C74.8103 36.1046 76.062 40.9892 75.997 45.9453C75.9319 50.9014 74.5524 55.7515 71.9994 60' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.0006 16V22.6667M26.6673 25.3333L30.6673 30.6667M17.334 44L24.0007 45.3333M69.334 25.3333L65.334 30.6667M78.6673 44L72.0006 45.3333M52.0006 46.6667L66.6673 37.3333' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M47.9993 56C50.9449 56 53.3327 53.6122 53.3327 50.6667C53.3327 47.7212 50.9449 45.3334 47.9993 45.3334C45.0538 45.3334 42.666 47.7212 42.666 50.6667C42.666 53.6122 45.0538 56 47.9993 56Z' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.0007 68C45.334 73.3333 41.334 76 41.334 80C41.334 81.7681 42.0364 83.4638 43.2866 84.714C44.5368 85.9643 46.2325 86.6667 48.0007 86.6667C49.7688 86.6667 51.4645 85.9643 52.7147 84.714C53.9649 83.4638 54.6673 81.7681 54.6673 80C54.6673 76 50.6673 73.3333 48.0007 68Z' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-certify: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cpath d='M32.0007 22.6667H54.6673M32.0007 33.3334H64.0006M32.0007 44H64.0006M32.0007 54.6667H64.0006M46.6673 70.6667L53.334 77.3334L68.0006 61.3334M21.334 9.33337H60.0006L74.6673 24V86.6667H21.334V9.33337Z' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Cpath d='M34.6673 32H24.0007V88H62.6673V81.3334M24.0007 42.6667H13.334V92H50.6673V88M44.0006 25.3334H64.0006M44.0006 36H70.6673M44.0006 46.6667H70.6673M44.0006 57.3334H70.6673M53.334 69.3334L58.6673 74.6667L70.6673 61.3334M18.6673 50.6667H24.0007M18.6673 58.6667H24.0007M18.6673 66.6667H24.0007M18.6673 74.6667H24.0007M34.6673 13.3334H69.334L80.0006 24V81.3334H34.6673V13.3334Z' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-fails: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M31.9997 24.8888V39.9999M29.333 8.88877C29.6095 8.42858 30.0005 8.04779 30.4677 7.78343C30.935 7.51906 31.4628 7.38013 31.9997 7.38013C32.5366 7.38013 33.0643 7.51906 33.5316 7.78343C33.9989 8.04779 34.3898 8.42858 34.6663 8.88877L58.6663 50.6665C58.8868 51.1299 58.9892 51.6405 58.9645 52.153C58.9398 52.6654 58.7887 53.1639 58.5247 53.6038C58.2608 54.0438 57.8921 54.4116 57.4515 54.6746C57.011 54.9375 56.5122 55.0875 55.9997 55.111H7.99967C7.48714 55.0875 6.98838 54.9375 6.54782 54.6746C6.10726 54.4116 5.73858 54.0438 5.47461 53.6038C5.21063 53.1639 5.05957 52.6654 5.03486 52.153C5.01015 51.6405 5.11258 51.1299 5.333 50.6665L29.333 8.88877Z' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32.0003 48.5334C32.7858 48.5334 33.4226 47.8967 33.4226 47.1112C33.4226 46.3257 32.7858 45.689 32.0003 45.689C31.2149 45.689 30.5781 46.3257 30.5781 47.1112C30.5781 47.8967 31.2149 48.5334 32.0003 48.5334Z' fill='%23000'/%3E%3C/svg%3E");
	--io-icon-show-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M36 61C48.1503 61 58 51.1503 58 39C58 26.8497 48.1503 17 36 17C23.8497 17 14 26.8497 14 39C14 51.1503 23.8497 61 36 61Z' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M31 8H41M36 8V17M52 19L55 16M36 28V39L39 41M19 39H20M52 39H53M36 55V56' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-tell-it-straight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M61 30C61 43 50 52 36 52C33 52 30 52 27 51L16 59L20 44C14 40 11 35 11 30C11 17 22 9 36 9C50 9 61 17 61 30Z' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-do-it-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M41.0009 29.0001C40.2969 26.4167 40.2526 23.698 40.8718 21.0931C41.4911 18.4881 42.7541 16.0802 44.5453 14.09C46.3365 12.0998 48.5985 10.591 51.124 9.70169C53.6496 8.81241 56.3579 8.57117 59.0009 9.00006L48.0009 20.0001L55.0009 27.0001L66.0009 16.0001C66.8569 18.78 66.9389 21.7407 66.238 24.5638C65.5371 27.3869 64.0799 29.9655 62.0231 32.0223C59.9663 34.0791 57.3877 35.5363 54.5647 36.2371C51.7416 36.938 48.7809 36.856 46.0009 36.0001L23.0009 59.0001C21.4096 60.5914 19.2513 61.4853 17.0009 61.4853C14.7505 61.4853 12.5922 60.5914 11.0009 59.0001C9.40961 57.4088 8.51563 55.2505 8.51562 53.0001C8.51562 50.7496 9.40961 48.5914 11.0009 47.0001L41.0009 29.0001Z' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.0004 53.6001C18.884 53.6001 19.6004 52.8838 19.6004 52.0001C19.6004 51.1165 18.884 50.4001 18.0004 50.4001C17.1167 50.4001 16.4004 51.1165 16.4004 52.0001C16.4004 52.8838 17.1167 53.6001 18.0004 53.6001Z' fill='%23000'/%3E%3C/svg%3E");
	--io-icon-own-it: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M36 8C44 14 51 16 59 17V38C59 50 49 58 36 64C23 58 13 50 13 38V17C21 16 28 14 36 8Z' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26 35L34 43L49 27' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-call: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M66.0003 50.76V59.76C66.0037 60.5956 65.8325 61.4226 65.4978 62.1881C65.1631 62.9536 64.6722 63.6408 64.0565 64.2056C63.4409 64.7705 62.714 65.2005 61.9225 65.4682C61.1311 65.7358 60.2924 65.8353 59.4603 65.76C50.2288 64.757 41.3613 61.6025 33.5703 56.55C26.3218 51.944 20.1763 45.7986 15.5703 38.55C10.5002 30.7237 7.34502 21.813 6.36029 12.54C6.28532 11.7104 6.38391 10.8743 6.64979 10.0849C6.91567 9.29551 7.343 8.57011 7.90459 7.95491C8.46617 7.33971 9.1497 6.84817 9.91166 6.51161C10.6736 6.17505 11.4973 6.00083 12.3303 6.00005H21.3303C22.7862 5.98572 24.1977 6.50128 25.3016 7.45064C26.4055 8.40001 27.1265 9.71839 27.3303 11.16C27.7102 14.0402 28.4146 16.8682 29.4303 19.59C29.8339 20.6638 29.9213 21.8308 29.682 22.9527C29.4427 24.0746 28.8869 25.1044 28.0803 25.92L24.2703 29.73C28.541 37.2407 34.7597 43.4594 42.2703 47.73L46.0803 43.92C46.896 43.1135 47.9257 42.5576 49.0476 42.3183C50.1695 42.0791 51.3365 42.1664 52.4103 42.57C55.1321 43.5857 57.9601 44.2902 60.8403 44.67C62.2976 44.8756 63.6285 45.6097 64.5799 46.7325C65.5313 47.8554 66.0368 49.2888 66.0003 50.76Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M42.1504 6C48.2328 6.68268 53.9028 9.41171 58.2308 13.7396C62.5587 18.0676 65.2877 23.7376 65.9704 29.82' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M42.1504 15C46.0767 15.0391 49.8312 16.6162 52.6077 19.3927C55.3842 22.1691 56.9613 25.9236 57.0004 29.85' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M57 12H15C11.6863 12 9 14.6863 9 18V60C9 63.3137 11.6863 66 15 66H57C60.3137 66 63 63.3137 63 60V18C63 14.6863 60.3137 12 57 12Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48 6V18' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 6V18' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 30H63' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='42' r='3' fill='%23000'/%3E%3Ccircle cx='36' cy='42' r='3' fill='%23000'/%3E%3Ccircle cx='48' cy='42' r='3' fill='%23000'/%3E%3Ccircle cx='24' cy='54' r='3' fill='%23000'/%3E%3Ccircle cx='36' cy='54' r='3' fill='%23000'/%3E%3Ccircle cx='48' cy='54' r='3' fill='%23000'/%3E%3C/svg%3E");
	--io-icon-certified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M17.7771 38.2227L10.666 53.3338L19.5549 50.6671L24.8882 56.8893L30.2216 42.6671M39.1105 38.2227L46.2216 53.3338L37.3327 50.6671L31.9993 56.8893L26.666 42.6671' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28.4442 6.22266L33.7776 8.88932H39.9998L42.6664 14.2227L47.1109 18.6671L45.3331 24.8893L46.222 31.1115L40.8887 34.6671L37.3331 40.0004H31.1109L25.7776 42.6671L20.4442 39.1115L14.222 38.2227L12.4442 32.0004L8.88867 26.6671L11.5553 21.3338L12.4442 15.1115L18.6664 12.4449L23.1109 8.00043L28.4442 6.22266Z' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20.4453 23.9996L25.7786 29.3329L36.4453 17.7773' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-estimates2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M38.2227 6.22266H14.2227V57.7782H49.7782V17.7782L38.2227 6.22266ZM38.2227 6.22266V18.6671H49.7782M21.3338 18.6671H29.3338M21.3338 26.6671H42.6671M21.3338 33.7782H42.6671M21.3338 40.8893H42.6671M21.3338 48.0004H32.0004M39.1115 48.0004H42.6671' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-paperwork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M8.88867 51.5552V13.333H24.8887L29.3331 18.6663H49.7776V24.8886M8.88867 51.5552L15.1109 25.7775H55.9998L47.9998 51.5552H8.88867Z' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M12 12H60C63.3 12 66 14.7 66 18V54C66 57.3 63.3 60 60 60H12C8.7 60 6 57.3 6 54V18C6 14.7 8.7 12 12 12Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M66 18L36 39L6 18' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--io-icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 114 99'%3E%3Cpath d='M 35.9 3.3 C 18.5 9.5,6.6 21.5,2.3 37.5 C 1.3 41.1,1 50.3,1 70.7 L 1 99 24.2 98.7 L 47.5 98.5 47.5 74.5 L 47.5 50.5 38.2 50.2 L 29 49.9 29 47.2 C 29 42,32.2 33,35.5 29.2 C 37.3 27.1,40.6 24.5,42.9 23.5 L 47 21.6 47 11.3 C 47 -0.7,47.1 -0.6,35.9 3.3 M 101.9 3.3 C 98.3 4.6,93.3 6.8,90.7 8.3 C 84.3 12.1,75.3 21.3,72.4 27.1 C 67.5 36.7,67 41.3,67 71.2 L 67 99 90.2 98.7 L 113.5 98.5 113.5 74.5 L 113.5 50.5 104.1 50.2 L 94.7 49.9 95.4 44.7 C 96.8 34.3,101.6 26.8,109 23.4 L 113 21.6 113 11.3 C 113 -0.7,113.1 -0.6,101.9 3.3'/%3E%3C/svg%3E");
}

/* Never allow a horizontal scrollbar, whatever a section does. */
html,
body {
	overflow-x: clip;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Full-width sections that bleed content to the edge measure the gutter against themselves. */
.io-split,
.io-reviews {
	container-type: inline-size;
}

/* The PSD uses Corsario's Caption optical size (opsz 6) for all headings.
   text-wrap: pretty keeps a single word from dropping onto its own last line. */
h1, h2, h3, h4, h5, h6 {
	font-variation-settings: "opsz" 6;
	text-wrap: pretty;
}

img {
	height: auto;
	max-width: 100%;
}

/* Sections measure the shared column against the page width (see --io-edge). */
.io-main,
.io-footer {
	container-type: inline-size;
}

/* Kill default gaps between full-width sections */
.io-main,
.io-main > .wp-block-post-content {
	margin-block: 0;
}

/* Front page: sections sit edge to edge. Other pages keep normal text spacing. */
.io-main--sections > .wp-block-post-content > * {
	margin-block: 0;
}

/* Footer always sits at the bottom, however short the page:
   the page is at least one screen tall and the main area takes the slack. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Links and linked images: every link gets a visible hover/focus state
   -------------------------------------------------------------------------- */

a {
	transition: color 0.2s ease, text-decoration-color 0.2s ease, opacity 0.2s ease;
}

/* Text links (buttons have their own states). */
a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:where(:not(.wp-element-button)):hover,
a:where(:not(.wp-element-button)):focus-visible {
	color: var(--io-navy);
	text-decoration-thickness: 2px;
}

/* On dark backgrounds the hover colour is orange instead of navy. */
.io-footer a:where(:not(.wp-element-button)):hover,
.io-footer a:where(:not(.wp-element-button)):focus-visible,
.io-cta a:where(:not(.wp-element-button)):hover,
.io-cta a:where(:not(.wp-element-button)):focus-visible,
.io-header__nav .wp-block-navigation__submenu-container a:hover,
.io-header__nav .wp-block-navigation__submenu-container a:focus-visible,
.io-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.io-footer .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--io-orange);
}

/* Linked images fade slightly. */
a img,
a svg {
	transition: opacity 0.2s ease;
}

a:where(:not(.custom-logo-link)):hover img,
a:where(:not(.custom-logo-link)):focus-visible img {
	opacity: 0.8;
}

/* Header logo: the white box hangs from the top of the page, so on hover its
   shadow deepens (lifting it would leave a gap above). Footer logo: a slight fade. */
.wp-block-site-logo .custom-logo-link {
	display: block;
}

.io-header__logo {
	transition: box-shadow 0.25s ease;
}

.io-header__logo:has(.custom-logo-link:hover, .custom-logo-link:focus-visible) {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.io-header__logo .custom-logo-link:focus-visible {
	outline: none;
}

.io-header__logo:has(.custom-logo-link:focus-visible) {
	outline: 2px solid var(--io-orange-bright);
	outline-offset: 2px;
}

.io-footer__logo img {
	transition: opacity 0.2s ease;
}

.io-footer__logo .custom-logo-link:hover img,
.io-footer__logo .custom-logo-link:focus-visible img {
	opacity: 0.85;
}

.wp-social-link {
	transition: opacity 0.2s ease;
}

.wp-social-link:hover,
.wp-social-link:focus-within {
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	a,
	a img,
	a svg,
	.wp-social-link,
	.io-header__logo,
	.io-footer__logo img {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 45px;
	/* Label 32px from the left, arrow 32px from the right, at least 12px between. */
	padding: 0.5rem 4.375rem 0.5rem 2rem !important;
	box-sizing: border-box;
	text-align: left;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Arrow-in-a-circle, 32px from the right edge as in the Figma buttons. */
.wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	background: currentColor;
	-webkit-mask: var(--io-icon-arrow) center / contain no-repeat;
	mask: var(--io-icon-arrow) center / contain no-repeat;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: var(--io-orange);
	color: #fff;
}

.wp-block-button.is-style-light .wp-block-button__link {
	background: #fff;
	color: var(--io-navy);
}

.wp-block-button.is-style-light .wp-block-button__link:hover,
.wp-block-button.is-style-light .wp-block-button__link:focus-visible {
	background: var(--io-navy);
	color: #fff;
}

.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--io-orange);
	color: #fff;
}

.wp-block-button.is-style-accent .wp-block-button__link:hover,
.wp-block-button.is-style-accent .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--io-navy);
}

/* White outline on dark photos and navy sections. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var(--io-navy);
}

/* Header phone number: orange outline with a white handset. Handset and
   number are centred together, so the padding is equal on both sides. */
.wp-block-button.is-style-phone .wp-block-button__link {
	justify-content: center;
	gap: 10px;
	min-width: 200px;
	min-height: 40px;
	padding: 0 16px !important;
	border: 1px solid var(--io-orange-bright);
	background: transparent;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	white-space: nowrap;
}

.wp-block-button.is-style-phone .wp-block-button__link::after {
	position: static;
	order: -1;
	flex: none;
	transform: none;
	width: 20px;
	height: 20px;
	-webkit-mask-image: var(--io-icon-phone);
	mask-image: var(--io-icon-phone);
}

.wp-block-button.is-style-phone .wp-block-button__link:hover,
.wp-block-button.is-style-phone .wp-block-button__link:focus-visible {
	background: var(--io-orange-bright);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */

/* Small line above a section heading (24px, #ee4900 in the Figma file). */
.io-eyebrow,
.io-split__text .io-eyebrow {
	margin-bottom: 1.25rem !important;
	color: #ee4900;
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1;
	text-box: trim-both cap alphabetic;
}

.io-eyebrow + .wp-block-heading {
	margin-top: 0;
}

.io-stars {
	color: var(--wp--preset--color--star);
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	line-height: 1;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.io-header {
	position: relative;
	z-index: 20;
	/* Navy strip with phone and booking, then the white menu band. */
	background: linear-gradient(var(--io-navy) 0 64px, #fff 64px);
	color: var(--io-navy);
}

/* Home: the menu band is transparent over the orange hero. */
.home .io-header {
	position: absolute;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
	background: linear-gradient(var(--io-navy) 0 64px, transparent 64px);
	color: #fff;
}

.io-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	/* Fixed rows so the taller logo box overhangs the menu band instead of stretching it. */
	grid-template-rows: 64px 84px;
	column-gap: 1.5rem;
	align-items: center;
	width: min(100% - 32px, var(--io-page-wide));
	margin-inline: auto;
}

.io-header__logo {
	grid-row: 1 / span 2;
	align-self: start;
	/* Anchored to the top of the page (QA 10/12: 25% bigger, from the top). */
	margin: 0 !important;
	padding: 10px;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 2;
}

.io-header__logo img {
	display: block;
}

.io-header__tagline {
	margin: 0 !important;
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0.025em;
}

.io-header__cta {
	gap: 20px;
	margin: 0 !important;
	flex-wrap: nowrap;
}

/* "Book Online": plain orange block, no arrow. */
.io-header__book .wp-block-button__link {
	justify-content: center;
	width: 200px;
	min-height: 40px;
	padding: 0 1rem !important;
	background: var(--io-orange-bright);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	white-space: nowrap;
}

.io-header__book .wp-block-button__link::after {
	display: none;
}

.io-header__book .wp-block-button__link:hover,
.io-header__book .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--io-navy);
}

.io-header__nav {
	grid-column: 2 / span 2;
	margin: 0 !important;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	--navigation-layout-justification-setting: flex-end;
}

.io-header__nav .wp-block-navigation__container {
	gap: 3rem;
}

/* Wide screens have the "Book Online" and phone buttons; these menu links
   are for the mobile menu. */
.io-header__nav :is(.io-nav-booking, .io-nav-phone) {
	display: none !important;
}

.io-header__nav .is-menu-open :is(.io-nav-booking, .io-nav-phone) {
	display: flex !important;
}

/* Underline on hover, in the menu's own colour. */
.io-header__nav > .wp-block-navigation__container > .wp-block-navigation-item > a,
.io-header__nav .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.io-header__nav .wp-block-navigation-item__content:hover,
.io-header__nav .wp-block-navigation-item__content:focus-visible {
	color: inherit;
	text-decoration-color: currentColor;
}

/* Services only opens its submenu (no link, see inc/menus.php). */
.io-header__nav .wp-block-navigation-item__content:not([href]) {
	cursor: default;
}

/* The page you are on keeps the underline (and its Services parent too). */
.io-header__nav .wp-block-navigation-item__content[aria-current="page"],
.io-header__nav .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration-color: currentColor;
}

.io-header__nav .wp-block-navigation__submenu-container {
	background: var(--io-navy) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 0.5rem 0;
	font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.io-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: 200px;
	background: var(--io-orange-bright);
	color: #fff;
}

.io-hero::before,
.io-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* The house shows through the orange at 20%, as in the Figma file. */
.io-hero::before {
	background: url("../img/hero-house.webp") center top / cover no-repeat;
	opacity: 0.2;
}

/* White floor the van and rating sit on (132px in the Figma file). */
.io-hero::after {
	top: auto;
	height: 132px;
	background: linear-gradient(#fff, #fff 70%, #ececec);
}

.io-hero__inner {
	position: relative;
	/* 876px tall hero: 200px above the headline. */
	min-height: 676px;
	/* Same column as the header: 48px from the edges at 1440px. */
	width: min(100%, var(--io-page-wide));
	max-width: none !important;
	margin-inline: auto !important;
}

.io-hero__content {
	position: relative;
	z-index: 3;
	max-width: 920px;
}

.io-hero__title {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(2.25rem, 3.75vw, 3.375rem);
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1;
	text-box: trim-both cap alphabetic;
}

/* "Rooted in Trust": 90px Corsario, 32px below the first line (cap to baseline). */
.io-hero__title strong {
	display: block;
	margin-top: 0.36em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.6rem, 6.25vw, 5.625rem);
	font-weight: 900;
	font-variation-settings: normal;
	letter-spacing: 0.025em;
	line-height: 1;
	text-transform: uppercase;
	text-box: trim-both cap alphabetic;
}

.io-hero__lead {
	max-width: 500px;
	margin-top: 2rem !important;
	font-size: clamp(1.25rem, 1.67vw, 1.5rem);
	letter-spacing: 0.025em;
	line-height: 1.2;
	text-box: trim-both cap alphabetic;
}

.io-hero__buttons {
	width: max-content;
	margin-top: 4rem !important;
	gap: 0.75rem;
	align-items: flex-start;
}

.io-hero__buttons .wp-block-button__link {
	width: 248px;
}

.io-hero__rating {
	position: absolute;
	left: 0;
	bottom: 32px;
	z-index: 3;
}

.io-hero .io-stars {
	font-size: 2.25rem;
	letter-spacing: 0;
	line-height: 32px;
}

.io-hero__google {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.25rem 0 0 !important;
	color: #000;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 32px;
}

.io-hero__google::before {
	content: "";
	width: 32px;
	height: 32px;
	background: url("../img/google-g.webp") center / contain no-repeat;
}

.io-hero__van,
.io-hero__plumber {
	position: absolute;
	margin: 0 !important;
}

.io-hero__van {
	left: 258px;
	bottom: -6px;
	width: 743px;
	z-index: 1;
}

.io-hero__plumber {
	/* 22px past the column at 1440px, never past the screen edge. */
	right: calc(-1 * min(22px, var(--io-edge)));
	bottom: 0;
	width: 458px;
	z-index: 2;
}

.io-hero__van img,
.io-hero__plumber img {
	display: block;
	width: 100%;
}

/* Entrance animation, CSS only: transform and opacity run on the compositor,
   no script, no extra files. The headline and the photos move but are never
   invisible, so they still count for Largest Contentful Paint from the first
   frame; only the small parts (lead, buttons, rating) fade in. */
@media (prefers-reduced-motion: no-preference) {
	/* The house behind the orange settles from a slight zoom. */
	.io-hero::before {
		animation: io-hero-settle 9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.io-hero__title {
		animation: io-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.io-hero__title strong {
		animation: io-rise 0.9s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.io-hero__lead {
		animation: io-rise-in 0.8s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.io-hero__buttons .wp-block-button {
		animation: io-rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.io-hero__buttons .wp-block-button:nth-child(1) { animation-delay: 0.45s; }
	.io-hero__buttons .wp-block-button:nth-child(2) { animation-delay: 0.55s; }
	.io-hero__buttons .wp-block-button:nth-child(3) { animation-delay: 0.65s; }

	/* The van pulls in from the left and settles on its suspension. */
	.io-hero__van {
		animation: io-van-in 1.4s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.io-hero__plumber {
		animation: io-plumber-in 1.1s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.io-hero__rating {
		animation: io-rise-in 0.7s 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	/* The stars light up one after another (five equal glyphs, six steps). */
	.io-hero .io-stars {
		background: linear-gradient(90deg, var(--wp--preset--color--star) 50%, rgba(250, 199, 22, 0.25) 50%) 100% 0 / 200% 100% no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: io-stars-fill 1s 1.35s steps(6, jump-none) both;
	}
}

@keyframes io-menu-in {
	from { opacity: 0; transform: translateY(-12px); }
	to { opacity: 1; transform: none; }
}

@keyframes io-hero-settle {
	from { transform: scale(1.08); }
	to { transform: none; }
}

@keyframes io-rise {
	from { transform: translateY(28px); }
	to { transform: none; }
}

@keyframes io-rise-in {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}

@keyframes io-van-in {
	0% { transform: translateX(-140px); }
	70% { transform: translateX(6px) rotate(-0.4deg); }
	85% { transform: translateX(-2px) rotate(0.2deg); }
	100% { transform: none; }
}

@keyframes io-van-slide {
	0% { transform: translateX(-140px); }
	70% { transform: translateX(6px); }
	85% { transform: translateX(-2px); }
	100% { transform: none; }
}

@keyframes io-plumber-in {
	from { transform: translateY(48px); }
	to { transform: none; }
}

@keyframes io-stars-fill {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */

.io-trust {
	position: relative;
	z-index: 1;
	padding-block: 2rem;
	box-shadow: 0 -9px 35px rgba(0, 0, 0, 0.25);
	text-align: center;
}

.io-trust__list {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1;
}

/* Icon above each label; a faint rule between items. */
.io-trust__list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-inline: 3rem;
}

.io-trust__list li:first-child {
	padding-left: 0;
}

.io-trust__list li:last-child {
	padding-right: 0;
}

.io-trust__list li + li {
	background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)) left 18px / 2px 64px no-repeat;
}

.io-trust__list li::before {
	content: "";
	width: 64px;
	height: 64px;
	background: var(--io-orange-bright);
	-webkit-mask: var(--io-icon-family) center / contain no-repeat;
	mask: var(--io-icon-family) center / contain no-repeat;
}

.io-trust__list li:nth-child(2)::before {
	-webkit-mask-image: var(--io-icon-licensed);
	mask-image: var(--io-icon-licensed);
}

.io-trust__list li:nth-child(3)::before {
	-webkit-mask-image: var(--io-icon-estimates);
	mask-image: var(--io-icon-estimates);
}

.io-trust__list li:nth-child(4)::before {
	-webkit-mask-image: var(--io-icon-answering);
	mask-image: var(--io-icon-answering);
}

.io-trust__meta {
	justify-content: center;
	gap: 0.3rem;
	margin-top: 2rem !important;
	font-size: 1rem;
	letter-spacing: 0.025em;
	line-height: 1;
}

.io-trust__meta p {
	margin: 0;
}

.io-trust__meta p + p::before {
	content: "| ";
}

/* Backflow page: its own three points (no meta line), 200px band. */
.io-trust--backflow {
	padding-block: 2.875rem 2.875rem;
}

.io-trust--backflow .io-trust__list li {
	max-width: 315px;
	line-height: 1.4;
}

.io-trust--backflow .io-trust__list li::before {
	-webkit-mask-image: var(--io-icon-certified);
	mask-image: var(--io-icon-certified);
}

.io-trust--backflow .io-trust__list li:nth-child(2)::before {
	-webkit-mask-image: var(--io-icon-estimates2);
	mask-image: var(--io-icon-estimates2);
}

.io-trust--backflow .io-trust__list li:nth-child(3)::before {
	-webkit-mask-image: var(--io-icon-paperwork);
	mask-image: var(--io-icon-paperwork);
}

.io-icon--mail { --io-icon: var(--io-icon-mail); }

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */

.io-services {
	padding-block: 4rem;
}

.io-services > h2 {
	margin-bottom: 3rem;
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	letter-spacing: 0.025em;
	line-height: 1.2;
}

.io-cards {
	gap: 2rem !important;
	/* 1324px wide, 10px inside the header column, as in the Figma file. */
	width: min(100% - 20px, 1324px);
	max-width: none !important;
	margin-inline: auto !important;
}

/* One orange card; a 4px navy rule splits the heading from the body. */
.io-card {
	display: flex;
	flex-direction: column;
	min-height: 624px;
	background: var(--io-orange);
	color: #fff;
}

.io-card__head,
.io-card__body {
	margin: 0 !important;
}

.io-card__head {
	padding: 2rem 1.5rem 0.75rem;
	border-bottom: 4px solid var(--io-navy);
	text-align: center;
}

.io-card__head h3 {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	line-height: 1;
	text-box: trim-both cap alphabetic;
}

.io-card__head p {
	margin: 1rem 0 0;
	color: var(--io-navy);
	font-size: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	line-height: 1;
}

.io-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.5rem 2.1875rem;
}

.io-card__img {
	margin: 0 0 0.75rem !important;
}

.io-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 372 / 232;
	object-fit: cover;
}

.io-card__body h4 {
	margin: 0 0 0.75rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.io-card__body p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.2;
}

.io-card__body .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 2rem;
}

.io-card__body .wp-block-button,
.io-card__body .wp-block-button__link {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Split sections (text + bleeding photo on a cream panel)
   -------------------------------------------------------------------------- */

.io-split {
	position: relative;
	isolation: isolate;
	padding-block: 6.5rem;
}

.io-split::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: -1;
	background: var(--io-cream);
}

.io-split--media-right::before {
	right: 0;
	width: 33.3333%;
}

.io-split--media-left::before {
	left: 0;
	width: 33.3333%;
}

/* Home Savings Plan and Warranty, as in the Figma file: 640 x 666 / 720 x 666
   photo flush with the page edge, 70px above and below, a 480px cream band
   behind it; the text 84px (Savings) or 64px past the photo (Warranty). */
@media (min-width: 782px) {
	.io-split:not(.io-split--area) {
		padding: 70px 0 !important;
	}

	.io-split:not(.io-split--area) > .io-split__cols {
		max-width: none !important;
		margin-inline: 0 !important;
		gap: 0 !important;
		align-items: center !important;
	}

	.io-split:not(.io-split--area)::before {
		width: calc(var(--io-edge) + min(432px, 30cqi));
	}

	.io-split--media-right:not(.io-split--area) > .io-split__cols {
		padding-left: calc(var(--io-edge) + min(84px, 5.8333cqi));
	}

	.io-split--media-right:not(.io-split--area) .io-split__media {
		flex: 0 0 calc(100cqi - var(--io-edge) - min(753px, 52.2917cqi)) !important;
	}

	.io-split--media-left .io-split__media {
		flex: 0 0 calc(var(--io-edge) + min(672px, 46.6667cqi)) !important;
	}

	.io-split--media-left .io-split__text {
		flex: 1 1 auto !important;
		padding: 0 var(--io-edge) 0 min(64px, 4.4444cqi) !important;
	}

	.io-split--media-right:not(.io-split--area) .io-split__text {
		flex: 1 1 auto !important;
		padding-right: min(64px, 4.4444cqi);
	}

	.io-split:not(.io-split--area) .io-split__media .wp-block-image {
		width: auto !important;
		margin-inline: 0 !important;
	}

	.io-split--media-right:not(.io-split--area) .io-split__media .wp-block-image {
		margin-right: var(--io-frame) !important;
	}

	.io-split--media-left:not(.io-split--area) .io-split__media .wp-block-image {
		margin-left: var(--io-frame) !important;
	}

	.io-split:not(.io-split--area) .io-split__media img {
		aspect-ratio: 640 / 666;
	}

	.io-split--media-left:not(.io-split--area) .io-split__media img {
		aspect-ratio: 720 / 666;
	}
}

/* Service area follows the Figma file: 762 x 444 photo flush right on a
   480px cream band, 96px above and below. */
.io-split--area {
	padding-block: 6rem;
}

/* 480px cream band on the right at 1440px. */
.io-split--area::before {
	width: 33.3333%;
}

@media (min-width: 782px) {
	/* Text 84px inside the column edge, photo from 631px in to the page edge. */
	.io-split--area {
		padding-inline: 0 !important;
	}

	.io-split--area > .io-split__cols {
		max-width: none !important;
		margin-inline: 0 !important;
		padding-left: calc(var(--io-edge) + min(84px, 5.8333cqi));
	}

	.io-split--area .io-split__media {
		flex: 0 0 calc(100cqi - var(--io-edge) - min(631px, 43.8194cqi)) !important;
	}

	.io-split--area .io-split__media .wp-block-image,
	.io-split.io-split--area .io-split__media .wp-block-image {
		width: auto;
		margin: 0 var(--io-frame) 0 0;
	}

	.io-split--area::before {
		width: calc(var(--io-edge) + min(432px, 30cqi));
	}
}

.io-split--area .io-split__media img {
	aspect-ratio: 762 / 444;
}

.io-split--area .io-split__text .wp-block-button__link {
	min-width: 249px;
}

.io-split__cols {
	gap: 4rem !important;
	align-items: center !important;
}

.io-split__text {
	flex-basis: 47% !important;
}

.io-split__text > * {
	max-width: 547px;
	margin-block: 0;
}

.io-split h2 {
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	letter-spacing: 0.025em;
	line-height: 1.2;
}

.io-split__text h2 {
	margin-block: 0;
}

.io-split__text p {
	font-size: 1.25rem;
	line-height: 1.4;
	text-box: trim-both cap alphabetic;
}

.io-split__text h2 + p,
.io-split__text .io-bullets + p {
	margin-top: 2rem !important;
}

.io-split__text p + p {
	margin-top: calc(2lh - 1cap) !important;
}

.io-split--media-right .io-split__text p {
	max-width: 530px;
}

/* Service area text: 20px, as in the Figma file (home and inner pages). */
.io-split--area .io-split__text p {
	max-width: 442px;
	font-size: 1.25rem;
	line-height: 1.4;
}

.io-split--area .io-split__text h2 {
	margin-bottom: 2rem;
}

.io-split--area .io-split__text .wp-block-buttons {
	margin-top: 4rem !important;
}

.io-split--area .io-split__text {
	flex: 1 1 auto !important;
}

.io-split__text .wp-block-buttons {
	margin-top: 3rem !important;
}

.io-split--media-left .io-split__text .wp-block-buttons {
	margin-top: 4rem !important;
}

.io-split__media {
	flex-basis: 53% !important;
	align-self: stretch;
	display: flex;
	align-items: center;
}

.io-split__media .wp-block-image {
	margin: 0;
	width: 100%;
}

.io-split__media img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.io-split--media-right .io-split__media .wp-block-image {
	margin-right: calc(-1 * var(--io-gutter));
	width: calc(100% + var(--io-gutter));
}

.io-split--media-left .io-split__media .wp-block-image {
	margin-left: calc(-1 * var(--io-gutter));
	width: calc(100% + var(--io-gutter) * 0.7);
}

.io-split--media-left .io-split__text {
	padding-left: 1.5rem;
}

.io-bullets {
	margin: 0.75rem 0 0 !important;
	padding: 0 0 0 24px;
	list-style: disc;
	font-size: 1rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Expert services
   -------------------------------------------------------------------------- */

.io-expert {
	padding-block: 8.125rem;
}

/* Cream box 1180px wide, list in two columns, as in the Figma file. */
.io-expert__box {
	width: min(100%, 1180px);
	max-width: none !important;
	margin-inline: auto !important;
	/* No "View All Services" button any more (no such page): even padding. */
	padding: 3rem 2rem 3.75rem;
	box-sizing: border-box;
}

/* No box any more (QA 10/13): white text right on the navy section. */
.io-expert__box {
	color: #fff;
}

.io-expert__box h2 {
	margin-bottom: 3rem;
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	letter-spacing: 0.025em;
	line-height: 1.2;
}

.io-checklist {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(5, auto);
	justify-content: center;
	column-gap: 10rem;
	row-gap: 1.25rem;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 32px;
}

.io-checklist li {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	margin: 0;
}

.io-checklist li::before {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	margin-top: -4px;
	background: var(--io-orange);
	-webkit-mask: var(--io-icon-check) center / contain no-repeat;
	mask: var(--io-icon-check) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.io-reviews {
	padding-block: 4rem 4.375rem;
	background: linear-gradient(180deg, #ff7700 0%, var(--io-orange-bright) 100%);
	overflow: hidden;
}

.io-reviews .io-eyebrow {
	margin-bottom: 1.25rem !important;
	color: var(--io-navy);
	font-size: 1rem;
}

.io-reviews h2 {
	margin: 0;
	color: var(--io-navy);
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	letter-spacing: 0.025em;
	line-height: 1.2;
}

.io-slider {
	position: relative;
	margin-top: 3rem !important;
}

/* Arrows sit on the heading row, right edge of the column. */
.io-slider__nav {
	position: absolute;
	top: -90px;
	right: 0;
	gap: 2rem;
	margin: 0 !important;
}

.io-slider__nav .wp-block-button__link {
	width: 16px;
	min-width: 0;
	min-height: 32px;
	padding: 0 !important;
	background: transparent !important;
	color: var(--io-navy) !important;
	font-size: 0;
	gap: 0;
}

.io-slider__nav .wp-block-button__link::after {
	right: 0;
	width: 16px;
	height: 18px;
	-webkit-mask: none;
	mask: none;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.io-slider__prev .wp-block-button__link::after {
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* The cards run on to the right edge of the screen, at every width; the
   last one stops at the content column's right edge. */
.io-slider__query {
	margin-right: calc(-1 * var(--io-gutter));
}

.io-slider__track {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0 var(--io-gutter) 0 0;
	scroll-padding-left: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.io-slider__track::-webkit-scrollbar {
	display: none;
}

.io-slider__track > li {
	flex: 0 0 min(381px, 85vw);
	scroll-snap-align: start;
	margin: 0 !important;
}

.io-review {
	height: 100%;
	min-height: 427px;
	padding: 1.5rem 2rem 2rem;
	/* Navy cards with white text (QA 10/13). */
	background: var(--io-navy);
	color: #fff;
	box-sizing: border-box;
}

.io-review .io-stars {
	font-size: 2.25rem;
	letter-spacing: 0;
	line-height: 32px;
}

.io-review__quote {
	margin-top: 3rem;
	font-size: 1rem;
	line-height: 1.4;
}

.io-review__quote::before {
	/* Quote mark traced from the PSD (Akzidenz Grotesk Black glyph), source in assets/img/quote-mark.svg. */
	content: "";
	display: block;
	width: 37px;
	height: 32px;
	background: currentColor;
	-webkit-mask: var(--io-icon-quote) center / contain no-repeat;
	mask: var(--io-icon-quote) center / contain no-repeat;
	margin-bottom: 1.5rem;
}

.io-review__quote p {
	margin: 0;
}

.io-review__name {
	margin: 2rem 0 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

/* Dots under the cards (added by slider.js). */
.io-slider__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	margin-top: 3rem;
}

.io-slider__dots button {
	position: relative;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.io-slider__dots button::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: #fff;
}

.io-slider__dots button[aria-current="true"] {
	background: rgba(32, 42, 60, 0.15);
}

.io-slider__dots button[aria-current="true"]::after {
	background: var(--io-navy);
}

.io-slider--static .io-slider__dots,
.io-slider--static .io-slider__nav {
	visibility: hidden;
}

.io-slider__dots button:focus-visible {
	outline: 2px solid var(--io-navy);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.io-cta {
	color: #fff;
	text-align: center;
}

/* The trust bar overlaps the bottom 8px of the home hero, as in the Figma file. */
.io-hero + .io-trust {
	margin-top: -8px !important;
}

/* Home: 860px photo under an 85% navy veil, text 200px from the top. */
.io-cta:not(.io-cta--page) {
	align-items: flex-start;
	/* 1440 x 860 proportion above 1440px; the text block keeps its place in it. */
	min-height: max(860px, 59.7222vw) !important;
	padding: max(200px, 13.8889vw) 16px 9.4375rem;
}

.io-cta:not(.io-cta--page) .wp-block-cover__background {
	background-color: #040f22 !important;
	opacity: 0.85 !important;
}

.io-cta h2 {
	max-width: min(100%, 900px) !important;
	margin: 0;
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	letter-spacing: 0.025em;
	line-height: 1.2;
}

.io-cta:not(.io-cta--page) .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.io-cta:not(.io-cta--page) p {
	font-size: 1.25rem;
	line-height: 1.4;
	text-box: trim-both cap alphabetic;
}

.io-cta:not(.io-cta--page) .wp-block-cover__inner-container > h2 + p {
	margin-top: 2rem;
}

.io-cta:not(.io-cta--page) .wp-block-buttons {
	margin-top: 3rem;
}

.io-cta .wp-block-button__link {
	width: 249px;
}

.io-cta:not(.io-cta--page) .io-cta__phone {
	margin-top: 3rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0;
}

.io-cta__kicker {
	margin-top: 4rem !important;
	font-size: 1.5rem !important;
	font-weight: 700;
}

.io-cta:not(.io-cta--page) .io-cta__kicker + p {
	margin-top: 1.3125rem;
}

/* --------------------------------------------------------------------------
   Regular pages (legal pages and other text pages)
   -------------------------------------------------------------------------- */

.io-page__head {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.75rem, 3vw, 2.5rem);
}

.io-page__head .wp-block-post-title {
	margin: 0;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
}

.io-page__content {
	padding-block: 2.5rem 5rem;
}

.io-page__content > * + * {
	margin-block-start: 1rem;
}

.io-page__content p,
.io-page__content li {
	line-height: 1.6;
}

.io-page__content h2 {
	margin-block: 2.75rem 0.75rem;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
}

.io-page__content h3 {
	margin-block: 1.75rem 0.5rem;
	color: var(--io-navy);
	font-family: var(--wp--preset--font-family--body);
	font-variation-settings: normal;
	font-size: 1.1875rem;
	font-weight: 700;
}

.io-page__content h2 + *,
.io-page__content h3 + * {
	margin-block-start: 0;
}

.io-page__content ul {
	padding-left: 1.25rem;
}

.io-page__content li + li {
	margin-top: 0.3rem;
}

/* The "Company, LLC · Last Updated" line under the title. */
.io-page__content > .io-legal-meta:first-child {
	margin-top: 0;
	font-size: 1.0625rem;
}

.io-legal-address {
	padding: 1.25rem 1.5rem;
	background: var(--io-cream);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Legal pages (Privacy Policy, Terms of Service): the static site's layout.
   Title band on cream lined up with the header logo, text in a 780px column.
   -------------------------------------------------------------------------- */

.io-legal > .wp-block-post-content > * {
	margin-block: 0;
}

.io-legal__hero {
	padding: 6rem var(--io-edge) 2.5rem;
}

.io-legal__hero > * {
	max-width: none;
	margin: 0;
}

.io-legal__hero h1 {
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 700;
	font-variation-settings: "opsz" 6;
	line-height: 1.15;
}

.io-legal__hero .io-legal-meta {
	margin-top: 0.5rem;
	font-weight: 600;
}

.io-legal__body {
	box-sizing: border-box;
	width: 100%;
	max-width: 812px;
	margin-inline: auto !important;
	padding: 2.5rem 16px 5rem;
	font-size: 1.0625rem;
}

.io-legal__body > * {
	margin-block: 1em 0;
}

.io-legal__body > :first-child {
	margin-top: 0;
}

.io-legal__body p,
.io-legal__body li {
	line-height: 1.6;
}

.io-legal__body h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 700;
	font-variation-settings: "opsz" 6;
	line-height: 1.15;
}

.io-legal__body h3 {
	margin: 1.75rem 0 0.5rem;
	color: var(--io-navy);
	font-family: var(--wp--preset--font-family--body);
	font-variation-settings: normal;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.15;
}

.io-legal__body :is(h2, h3) + * {
	margin-top: 0;
}

.io-legal__body ul {
	padding-left: 1.25rem;
}

.io-legal__body li + li {
	margin-top: 0.3rem;
}

.io-legal__body .io-legal-address {
	padding: 1.25rem 1.5rem;
	background: var(--io-cream);
}

/* --------------------------------------------------------------------------
   404 and Thank You (after the contact form)
   -------------------------------------------------------------------------- */

.io-not-found,
.io-thanks {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(4rem, 10vh, 7rem);
	text-align: center;
}

.io-not-found > *,
.io-thanks__body > * {
	margin-inline: auto;
}

.io-not-found__code {
	margin-block: 0 0.25rem !important;
	color: var(--io-orange);
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "opsz" 6;
	font-size: clamp(6rem, 16vw, 10rem);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.02em;
}

.io-not-found__title,
.io-thanks__title {
	margin-top: 0 !important;
	color: var(--io-navy);
	font-size: clamp(2rem, 4vw, 2.75rem);
}

.io-not-found__text,
.io-thanks__text {
	max-width: 520px;
	margin-top: 0.75rem !important;
	font-size: 1.1875rem;
	line-height: 1.4;
}

.io-not-found__actions,
.io-thanks__actions {
	justify-content: center;
	gap: 0.75rem 1rem;
	margin-top: 2rem !important;
}

/* No single word left alone on the last line. */
.io-thanks__text {
	text-wrap: balance;
}

/* Large orange check above the title, the same icon as the page checklists. */
.io-thanks__title::before {
	content: "";
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.25rem;
	background: var(--io-orange);
	-webkit-mask: var(--io-icon-check) center / contain no-repeat;
	mask: var(--io-icon-check) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.io-footer {
	padding: 4rem var(--io-edge) 2.3125rem;
	background: #1a1e30;
	color: #fff;
}

/* Logo and disclosure, two link columns, booking and contact on the right
   (columns at 48 / 486 / 804 / 1143px in the 1440px design). */
.io-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 438fr) minmax(0, 318fr) minmax(0, 339fr) 250px;
	align-items: start;
}

.io-footer__inner > * {
	margin: 0 !important;
}

.io-footer__brand > * {
	margin: 0 !important;
}

.io-footer__logo {
	/* Anchored to the top of the footer: pulled up through its top padding. */
	margin-top: -4rem !important;
	width: max-content;
	padding: 10px;
	background: #fff;
	line-height: 0;
}

.io-footer__logo img {
	display: block;
}

.io-footer__disclosure {
	width: 220px;
	margin-top: 3rem !important;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 4px;
	box-sizing: border-box;
	/* 14px keeps "$99 estimate fee disclosure" on two lines in the 220px box. */
	font-size: 0.875rem;
	line-height: 1.4;
}

.io-footer__disclosure summary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 0 24px;
	text-align: center;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.io-footer__disclosure summary::-webkit-details-marker {
	display: none;
}

.io-footer__disclosure summary:hover,
.io-footer__disclosure summary:focus-visible,
.io-footer__disclosure[open] summary {
	color: var(--io-orange);
}

.io-footer__disclosure p {
	margin: 0;
	padding: 0 1.25rem 1.25rem;
	font-size: 0.875rem;
	text-align: center;
	opacity: 0.85;
}

.io-footer__label {
	margin: 0 0 2.25rem !important;
	font-size: 0.8125rem;
	text-transform: uppercase;
	line-height: 1;
	opacity: 0.5;
}

.io-footer__nav {
	margin: 0 !important;
	font-size: 1.25rem;
	line-height: 1.4;
}

/* Core repeats the block's classes on the inner list. */
.io-footer__nav .io-footer__nav {
	margin: 0 !important;
}

.io-footer__nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.125rem;
}

.io-footer__contact {
	text-align: right;
}

.io-footer__contact > * {
	margin: 0 !important;
}

/* "Book Online" is a regular button, the same size as the others on the site. */
.io-footer__contact .wp-block-buttons {
	justify-content: flex-end;
}

.io-footer__phone {
	margin-top: 3.5rem !important;
	font-size: 2rem;
	letter-spacing: 0.025em;
	line-height: 1.4;
}

.io-footer__phone a {
	color: inherit;
	text-decoration: none;
}

.io-footer__details {
	font-size: 1.25rem;
	letter-spacing: 0.025em;
	line-height: 1.4;
}

.io-footer__phone + .io-footer__details {
	margin-top: 0.75rem !important;
}

/* Copyright, social icons, legal links under a faint rule. */
.io-footer__bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	margin-top: 5rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(217, 217, 217, 0.1);
	font-size: 1rem;
	letter-spacing: 0.025em;
	line-height: 1;
}

.io-footer__bottom > * {
	margin: 0 !important;
}

.io-footer__social {
	gap: 12px !important;
}

.io-footer__social .wp-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(217, 217, 217, 0.1);
	border-radius: 50%;
	box-sizing: border-box;
	font-size: 1.125rem;
	transition: border-color 0.2s ease;
}

.io-footer__social .wp-social-link:hover,
.io-footer__social .wp-social-link:focus-within {
	border-color: var(--io-orange);
	opacity: 1;
}

.io-footer__social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 !important;
}

.io-footer__legal {
	text-align: right;
}

.io-footer__legal a {
	color: inherit;
	margin-left: 2rem;
}

/* ==========================================================================
   Inner pages (Residential, Commercial, Backflow, Home Savings Plan, About,
   Warranty, Contact). Sections are built in inc/sections.php.
   ========================================================================== */

/* The Figma file sets Corsario at its heaviest weight with the optical size
   following the font size (the PSD-based home page uses 700 at opsz 6). */
.page-template-page-sections :is(h1, h2),
.io-faq__item summary,
.io-steps__box h3 {
	font-weight: 900;
	font-variation-settings: normal;
}

/* Body copy is set with Figma's leading trim (cap height to baseline), so the
   gaps below are the design's own measurements. Headings and card copy are not
   trimmed in the design and keep their line boxes. */
.io-page-hero :is(.io-page-hero__eyebrow, .io-page-hero__title, .io-page-hero__sub, .io-page-hero__text),
.io-feature__body p,
.io-faq__item p,
.io-steps__box p,
.io-cta--page p,
.io-split--area .io-split__text p {
	text-box: trim-both cap alphabetic;
}

/* Paragraph break inside one Figma text box: one blank line. */
:is(.io-feature__body, .io-page-hero__content) p + p {
	margin-top: calc(2lh - 1cap) !important;
}

/* Shared type: 40px Corsario section headings, small bold kicker line. */
:where(.io-feature, .io-why, .io-svc, .io-steps, .io-included, .io-faq, .io-touch, .io-form, .io-cta--page) h2 {
	margin: 0;
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	letter-spacing: 0.025em;
	line-height: 1.2;
}

.io-kicker {
	margin: 0 0 1.25rem !important;
	color: #000;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1;
}

/* Wider buttons, as in the design (they grow with longer labels). */
:where(.io-page-hero, .io-feature, .io-cta--page, .io-svc__head, .io-touch) .wp-block-button__link {
	min-width: 249px;
	padding-right: 5.625rem !important;
}

/* Check list: orange check box before each line. */
.io-checks {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 32px;
}

.io-checks li {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.io-checks li::before {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	background: var(--io-orange);
	-webkit-mask: var(--io-icon-check) center / contain no-repeat;
	mask: var(--io-icon-check) center / contain no-repeat;
}

/* Icons drawn with CSS masks, coloured by the section. */
[class*="io-icon--"]::before {
	content: "";
	display: block;
	margin-inline: auto;
	background: currentColor;
	-webkit-mask: var(--io-icon) center / contain no-repeat;
	mask: var(--io-icon) center / contain no-repeat;
}

.io-icon--test { --io-icon: var(--io-icon-test); }
.io-icon--certify { --io-icon: var(--io-icon-certify); }
.io-icon--file { --io-icon: var(--io-icon-file); }
.io-icon--fails { --io-icon: var(--io-icon-fails); }
.io-icon--show-up { --io-icon: var(--io-icon-show-up); }
.io-icon--tell-it-straight { --io-icon: var(--io-icon-tell-it-straight); }
.io-icon--do-it-right { --io-icon: var(--io-icon-do-it-right); }
.io-icon--own-it { --io-icon: var(--io-icon-own-it); }
.io-icon--call { --io-icon: var(--io-icon-call); }
.io-icon--calendar { --io-icon: var(--io-icon-calendar); }

/* --------------------------------------------------------------------------
   Page hero: photo, navy gradient from the left, headline block
   -------------------------------------------------------------------------- */

.io-page-hero {
	/* Above 1440px the hero keeps the 1440 x 720 proportion, so the photo shows
	   the same crop on wide screens. */
	min-height: max(720px, 50vw) !important;
	align-items: center;
	padding: 4rem 0 !important;
	color: #fff;
}

.io-page-hero .wp-block-cover__image-background {
	object-position: 70% 50%;
}

.io-page-hero .wp-block-cover__background {
	background: linear-gradient(90deg, #0c1e36 24%, rgba(12, 30, 54, 0) 63%) !important;
	opacity: 1 !important;
}

.io-page-hero--soft .wp-block-cover__background {
	opacity: 0.8 !important;
}

/* The photo already carries its orange wash. */
.io-page-hero--plain .wp-block-cover__background {
	opacity: 0 !important;
}

.io-page-hero .wp-block-cover__inner-container {
	/* Static, so the breadcrumb trail can sit at the top of the hero. */
	position: static;
	width: min(100% - 32px, var(--io-page-wide));
	margin-inline: auto;
}

.io-page-hero__content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin-top: 0 !important;
}

/* Some heroes set their copy on a 1.4 line height, in a narrower column... */
.io-page-hero--loose :is(.io-page-hero__sub, .io-page-hero__text) {
	line-height: 1.4;
}

.io-page-hero--loose .io-page-hero__text {
	max-width: 478px;
}

/* ...and some sit 24px above centre. */
.io-page-hero--high {
	padding-bottom: 7rem !important;
}

.io-page-hero__content > * {
	margin-block: 0;
}

.io-page-hero__eyebrow {
	margin-bottom: 2rem !important;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1;
}

.io-page-hero__eyebrow--caps {
	font-weight: 400;
	text-transform: uppercase;
}

.io-page-hero__title {
	color: #fff;
	font-size: clamp(2rem, 3.4vw, 3rem);
	letter-spacing: 0.025em;
	line-height: 1.2;
	text-transform: uppercase;
}

.io-page-hero__sub {
	margin-top: 2rem !important;
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	letter-spacing: 0.025em;
	line-height: 1.2;
}

.io-page-hero__text {
	max-width: 535px;
	font-size: 1.25rem;
	letter-spacing: 0.025em;
	line-height: 1.2;
}

.io-page-hero__title + .io-page-hero__text,
.io-page-hero__sub + .io-page-hero__text {
	margin-top: 2rem !important;
}

/* Hero check lines: the design measures from the text's cap height, so the
   gaps are 7px tighter than its 32px. */
.io-checks--hero {
	gap: 18px;
	margin-top: 25px !important;
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1.4;
}

.io-checks--hero li {
	gap: 2rem;
	line-height: 28px;
}

.io-checks--hero li::before {
	margin-top: 5px;
}

.io-page-hero .io-checks--hero + .io-page-hero__buttons {
	margin-top: 57px !important;
}

.io-page-hero .io-page-hero__buttons {
	display: grid;
	width: max-content;
	gap: 0.75rem;
	margin-top: 4rem !important;
}

.io-page-hero__buttons .wp-block-button__link {
	width: 100%;
}

/* "HOME / Page" trail, 32px under the top of the hero, on the column edge. */
.io-page-hero .io-breadcrumbs {
	position: absolute;
	top: 32px;
	left: var(--io-edge);
	z-index: 2;
	margin: 0 !important;
	color: #fdfdfd;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1;
}

.io-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	text-transform: uppercase;
}

.io-breadcrumbs a:hover,
.io-breadcrumbs a:focus-visible {
	color: inherit;
	text-decoration: underline;
}

.io-breadcrumbs__sep {
	margin-inline: 1.5rem;
}

.io-page-hero__content .io-price--hero {
	margin-top: 2rem !important;
	color: var(--io-orange);
	font-size: 1.5rem !important;
	line-height: 1.4 !important;
	text-box: trim-both cap alphabetic;
}

/* --------------------------------------------------------------------------
   Feature: text beside a photo that sits on a colour bar
   -------------------------------------------------------------------------- */

.io-feature {
	position: relative;
	isolation: isolate;
	display: grid;
	/* Photo from the page edge to 592px into the column (640px at 1440px). */
	grid-template-columns: calc(var(--io-edge) + min(592px, 41.1111cqi)) minmax(0, 1fr);
	align-items: center;
	padding-block: 3.6875rem;
	color: var(--io-navy);
}

.io-feature.has-navy-background-color {
	color: #fff;
}

/* Photo and text are grid cells: no block gap between them. */
.io-feature > * {
	margin-block: 0 !important;
}

/* The bar: from the page edge to 432px into the column, full height, behind the photo. */
.io-feature::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: calc(var(--io-edge) + min(432px, 30cqi));
	background: linear-gradient(#ff7700, var(--io-orange-bright));
}

.io-feature--bar-cream::before {
	background: var(--io-cream);
}

.io-feature__media {
	margin: 0 0 0 var(--io-frame) !important;
}

.io-feature--boxed .io-feature__media {
	margin: 0 var(--io-frame) 0 0 !important;
}

.io-feature__media img {
	display: block;
	width: 100%;
	height: auto;
}

.io-feature__body {
	padding: 0 var(--io-edge) 0 min(122px, 8.4722cqi);
}

.io-feature__body > * {
	max-width: 553px;
}

.io-feature__body > h2 {
	max-width: 553px;
}

.io-feature__body > p:not(.io-kicker, .io-price) {
	max-width: 473px;
}

.io-feature.has-navy-background-color .io-feature__body,
.io-feature.has-cream-background-color .io-feature__body {
	padding-left: min(96px, 6.6667cqi);
}

.io-feature__body > * {
	margin-block: 0;
}

.io-feature.has-navy-background-color .io-kicker {
	color: #fff;
}

.io-feature__body h2 + *,
.io-feature__body .io-checks + p {
	margin-top: 2rem !important;
}

.io-feature--boxed .io-feature__lead + h2,
.io-feature--boxed .io-feature__lead + h2 + p {
	margin-top: 1.25rem !important;
}

.io-feature__body p {
	font-size: 1rem;
	line-height: 1.4;
}

.io-feature--large .io-feature__body p {
	font-size: 1.25rem;
}

.io-feature__body .io-checks {
	margin-top: 2rem !important;
}

.io-feature__body .wp-block-buttons {
	gap: 1.25rem;
	margin-top: 3rem !important;
}

/* Boxed: text in a cream box on the left, photo on the right, bar on the right. */
.io-feature--boxed {
	/* Box on the column edge (705px wide at 1440px), photo to the page edge. */
	grid-template-columns: minmax(0, min(705px, 48.9583cqi)) minmax(0, 1fr);
	column-gap: min(48px, 3.3333cqi);
	align-items: stretch;
	padding-left: var(--io-edge);
}

.io-feature--boxed::before {
	inset: 0 0 0 auto;
}

.io-feature--boxed .io-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
	padding: 2.5rem 3rem;
	background: var(--io-cream);
}

.io-feature--boxed .io-feature__body > * {
	max-width: 610px;
}

.io-feature--boxed .io-feature__media {
	align-self: center;
}

/* Short boxed text that starts at the top of the box (logo first). */
.io-feature--boxed.io-feature--top .io-feature__body {
	justify-content: flex-start;
	padding-block: 2.5rem 3.5rem;
}

.io-feature--snug {
	padding-block: 3.25rem;
}

.io-feature--tall {
	padding-block: 4rem;
}

.io-feature__logo {
	margin: 0 0 2rem !important;
}

.io-feature__logo img {
	display: block;
	width: 86px;
	height: auto;
	margin: 10px;
}

.io-feature__lead {
	margin-bottom: 0 !important;
	font-size: 1.25rem !important;
	font-weight: 600;
	line-height: 1.4 !important;
}

/* "$49/month or $499/year." */
.io-feature__body .io-price {
	margin-top: 2rem !important;
}

.io-price {
	color: var(--io-orange);
	font-size: 1.5rem !important;
	line-height: 1.4 !important;
}

.io-price--cta {
	margin-top: 3rem !important;
	color: #fff;
	font-size: 1rem !important;
}

.io-price--cta strong {
	color: var(--io-orange);
	font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   Why choose us: orange cards on navy
   -------------------------------------------------------------------------- */

.io-why {
	padding-block: 4rem;
	text-align: center;
}

.io-why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	width: min(100% - 32px, 1324px);
	margin: 3rem auto 0 !important;
	text-align: left;
}

.io-why__card {
	display: flex;
	flex-direction: column;
	min-height: 542px;
	margin: 0 !important;
	padding: 2rem 1.5rem;
	background: var(--io-orange);
	color: #fff;
}

.io-why__card > * {
	margin-block: 0;
}

.io-why__img {
	margin-bottom: 1.5rem !important;
}

.io-why__img img {
	display: block;
	width: 100%;
	aspect-ratio: 372 / 232;
	object-fit: cover;
}

.io-why__card h3 {
	margin-bottom: 0.75rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-variation-settings: normal;
	font-size: 1.5rem;
	line-height: 1.2;
}

.io-why__card p {
	font-size: 1rem;
	line-height: 1.2;
}

.io-why__card .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 2rem;
}

.io-why__card .wp-block-button,
.io-why__card .wp-block-button__link {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Services grid: navy cards
   -------------------------------------------------------------------------- */

.io-svc {
	padding: 4rem var(--io-edge);
}

.io-svc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-bottom: 2rem;
}

.io-svc__head > * {
	margin: 0 !important;
}

.io-svc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.3125rem;
	margin-top: 3rem !important;
}

/* The space under the text is padding: WordPress zeroes the last child's bottom margin. */
.io-svc__card {
	min-height: 420px;
	margin: 0 !important;
	padding-bottom: 2.5rem;
	background: var(--io-navy);
	color: #fff;
}

.io-svc__card > * {
	margin-block: 0;
}

.io-svc__img img {
	display: block;
	width: 100%;
	aspect-ratio: 434 / 260;
	object-fit: cover;
}

.io-svc__img {
	margin: 0 !important;
}

.io-svc__card h3 {
	margin: 2rem 2rem 0.75rem;
	color: var(--io-orange);
	font-family: var(--wp--preset--font-family--body);
	font-variation-settings: normal;
	font-size: 1.5rem;
	letter-spacing: 0.025em;
	line-height: 1;
}

.io-svc__card p {
	margin: 0 2rem;
	font-size: 1rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Icon columns on navy (backflow steps, company standards)
   -------------------------------------------------------------------------- */

.io-steps {
	padding-block: 4rem;
	color: #fff;
	text-align: center;
}

.io-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 275px);
	justify-content: center;
	gap: 1.3125rem;
	min-height: 226px;
	margin: 4rem auto 0 !important;
}

.io-steps--four .io-steps__grid {
	grid-template-columns: repeat(4, 275px);
}

.io-step {
	margin: 0 !important;
}

.io-step::before {
	width: 96px;
	height: 96px;
	margin-bottom: 2rem;
}

.io-steps--four .io-step::before {
	width: 72px;
	height: 72px;
}

.io-step h3,
.io-steps__box h3 {
	margin: 0 0 0.75rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-variation-settings: normal;
	font-size: 1.5rem;
	line-height: 1.2;
}

.io-step p,
.io-steps__box p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.2;
}

/* Backflow: "If It Fails." photo and outlined box. */
.io-steps__fail {
	display: grid;
	grid-template-columns: 429fr 458fr;
	gap: 0.8125rem;
	width: min(100% - 32px, 900px);
	margin: 4rem auto 0 !important;
}

.io-steps__img {
	margin: 0 !important;
}

.io-steps__img img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 429 / 285;
	object-fit: cover;
}

.io-steps__box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 !important;
	padding: 1.5rem 3rem;
	border: 4px solid var(--io-orange);
	color: #fff;
}

.io-steps__box::before {
	width: 64px;
	height: 64px;
	margin-bottom: 1.25rem;
	background: var(--io-orange);
}

.io-steps__box h3 {
	color: var(--io-orange);
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: 0.025em;
	margin-bottom: 1.3125rem;
}

.io-steps__box p {
	max-width: 343px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Everything included: centred check list on navy
   -------------------------------------------------------------------------- */

.io-included {
	padding: 4rem 16px;
	color: #fff;
	text-align: center;
}

.io-included .io-checks {
	gap: 1.25rem;
	width: max-content;
	max-width: 100%;
	margin: 2.875rem auto 0;
	text-align: left;
}

/* --------------------------------------------------------------------------
   Plan options (Home Savings Plan): two cards on navy
   -------------------------------------------------------------------------- */

.io-plans {
	padding: 4rem 16px;
	text-align: center;
}

.io-plans__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 424px));
	justify-content: center;
	gap: 2rem;
	margin: 4.125rem auto 0 !important;
}

.io-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 !important;
	padding: 2.5rem 2rem 3rem;
	background: var(--io-cream);
	box-sizing: border-box;
	color: var(--io-navy);
}

.io-plan > * {
	max-width: 299px;
	margin-block: 0;
}

.io-plan--featured {
	border: 4px solid var(--io-orange);
	background: #fff;
}

.io-plan__badge {
	position: absolute;
	top: -22px;
	right: -4px;
	max-width: none;
	padding: 0.4375rem 0.75rem;
	background: var(--io-orange);
	color: #fff;
	font-size: 1rem;
	line-height: 1.4;
}

.io-plan .io-plan__name {
	color: #000;
	font-family: var(--wp--preset--font-family--body);
	font-variation-settings: normal;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 32px;
}

.io-plan__price {
	margin-top: 2rem !important;
	color: #000;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
}

.io-plan__price strong {
	color: var(--io-orange);
	font-size: 3rem;
	font-weight: 600;
}

.io-plan__note {
	margin-top: 1.25rem !important;
	color: #222a3b;
	font-size: 1rem;
	line-height: 1.4;
}

.io-plan .wp-block-buttons {
	justify-content: center;
	margin-top: 3rem !important;
}

.io-plans__note {
	margin: 3rem 0 0 !important;
	color: var(--io-orange);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	text-box: trim-both cap alphabetic;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.io-faq {
	padding-block: 4rem;
	text-align: center;
}

.io-faq__list {
	width: min(100% - 32px, 680px);
	margin: 3rem auto 0 !important;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(32, 42, 60, 0.1);
	text-align: left;
}

.io-faq__item {
	margin: 0 !important;
}

.io-faq__item + .io-faq__item {
	margin-top: 2rem !important;
}

.io-faq__item summary {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	color: var(--io-navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	letter-spacing: 0.025em;
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
}

.io-faq__item summary::-webkit-details-marker {
	display: none;
}

.io-faq__item summary::after {
	content: "+";
	flex: none;
}

.io-faq__item[open] summary {
	color: var(--io-orange);
}

.io-faq__item[open] summary::after {
	content: "-";
	color: var(--io-navy);
}

.io-faq__item summary:focus-visible {
	outline: 2px solid var(--io-orange);
	outline-offset: 4px;
}

.io-faq__note {
	width: min(100% - 32px, 680px);
	margin: 3rem auto 0 !important;
	font-size: 1rem;
	line-height: 1.4;
	text-box: trim-both cap alphabetic;
}

.io-faq__item p {
	margin: 2rem 0 0;
	font-size: 1.25rem;
	line-height: 1.6;
}

/* A list inside an answer (Warranty Terms: exclusions). */
.io-faq__item .io-bullets {
	margin: 1rem 0 0 !important;
	font-size: 1.25rem;
	line-height: 1.6;
}

.io-faq__item .io-bullets li + li {
	margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Closing call to action on the inner pages
   -------------------------------------------------------------------------- */

.io-cta--page {
	/* 1440 x 640 proportion above 1440px, like the page hero. */
	min-height: max(640px, 44.4444vw) !important;
	align-items: center;
	padding: 4rem 0 !important;
}

.io-cta--page .wp-block-cover__image-background {
	filter: none;
}

.io-cta--page .wp-block-cover__background {
	/* Lighter on the left than before (QA 10/13): the photo shows through. */
	background: linear-gradient(90deg, #040f22 30%, rgba(4, 15, 34, 0) 100%) !important;
	opacity: 0.45 !important;
	mix-blend-mode: normal;
}

.io-cta--center .wp-block-cover__background {
	background: #040f22 !important;
}

.io-cta--page .wp-block-cover__inner-container {
	width: min(100% - 32px, var(--io-page-wide));
	margin-inline: auto;
}

.io-cta--left {
	text-align: left;
}

.io-cta__content {
	max-width: 756px;
}

.io-cta--center .io-cta__content {
	margin-inline: auto;
}

/* The centred version sits lower in the photo, as in the design. */
.io-cta--center {
	align-items: flex-start;
	padding: max(187px, 12.9861vw) 0 4rem !important;
}

.io-cta__content > * {
	margin-block: 0 !important;
}

.io-cta--page h2 {
	max-width: none !important;
	color: #fff;
}

.io-cta--page p {
	font-size: 1.25rem;
	line-height: 1.4;
}

.io-cta--page h2 + p {
	margin-top: 2rem !important;
}

.io-cta--page .io-cta__buttons {
	gap: 1.25rem;
	margin-top: 3rem !important;
}

.io-cta--center .io-cta__buttons {
	justify-content: center;
}

.io-cta--page .io-cta__buttons--stack {
	display: grid;
	width: max-content;
}

.io-cta__buttons--stack .wp-block-button__link {
	width: 100%;
}

.io-cta--page .wp-block-button__link {
	width: auto;
}

.io-cta--page .io-price--cta {
	margin-top: 3rem !important;
}

.io-cta--page .io-cta__phone {
	margin-top: 3rem !important;
	font-size: 1.5rem !important;
	font-weight: 700;
	letter-spacing: 0;
}

.io-cta__note {
	margin-top: 4rem !important;
}

/* --------------------------------------------------------------------------
   Contact: ways to reach us, message form
   -------------------------------------------------------------------------- */

.io-touch {
	padding-block: 4rem;
	text-align: center;
}

.io-touch__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 320px));
	justify-content: center;
	gap: 1.5rem;
	margin: 2.3125rem auto 0 !important;
}

.io-touch__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 320px;
	margin: 0 !important;
	padding: 1.875rem 1.5rem;
	border: 1px solid rgba(32, 42, 60, 0.1);
	box-sizing: border-box;
	color: var(--io-navy);
}

.io-touch__card::before {
	width: 72px;
	height: 72px;
	margin-bottom: 2rem;
	background: #d35400;
}

.io-touch__card > * {
	margin-block: 0;
}

.io-touch__card h3 {
	color: var(--io-navy);
	font-family: var(--wp--preset--font-family--body);
	font-variation-settings: normal;
	font-size: 1.5rem;
	line-height: 1.2;
}

.io-touch__card p {
	margin-top: 0.75rem !important;
	font-size: 1rem;
	line-height: 1.2;
}

.io-touch__card .wp-block-buttons {
	justify-content: center;
	margin-top: 2rem !important;
}

.io-touch__card .wp-block-buttons:has(.io-touch__phone) {
	margin-top: 0.75rem !important;
}

.io-touch__card .io-touch__email {
	max-width: 100%;
	margin-top: 0.75rem !important;
	/* The real address is longer than the design's sample: a size that fits the card. */
	font-size: 1.125rem;
	overflow-wrap: anywhere;
	font-weight: 600;
	line-height: 1.2;
}

.io-touch__email a {
	color: var(--io-orange);
	text-decoration: none;
}

.io-touch__email a:hover,
.io-touch__email a:focus-visible {
	color: var(--io-navy);
}

/* The phone number is a plain orange link. */
.io-touch__phone .wp-block-button__link {
	min-width: 0;
	min-height: 0;
	padding: 0 !important;
	background: none;
	color: var(--io-orange);
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: none;
}

.io-touch__phone .wp-block-button__link::after {
	display: none;
}

.io-touch__phone .wp-block-button__link:hover,
.io-touch__phone .wp-block-button__link:focus-visible {
	background: none;
	color: var(--io-navy);
}

.io-form {
	padding-block: 8.125rem;
	scroll-margin-top: 2rem;
}

.io-form__box {
	width: min(100% - 32px, 1184px);
	margin-inline: auto;
	padding: 6rem;
	box-sizing: border-box;
	background: var(--io-cream);
	color: var(--io-navy);
}

.io-form__box > h2 {
	margin-bottom: 3rem;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Tablet and mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.io-header__nav .wp-block-navigation__container {
		gap: 1.75rem;
	}

	.io-header__tagline {
		font-size: 0.9375rem;
	}

	.io-hero__van {
		left: 22%;
		width: 48%;
	}

	.io-hero__plumber {
		right: calc(-1 * min(20px, var(--io-edge)));
		width: 32%;
	}

	.io-trust__list {
		font-size: 1.0625rem;
	}

	.io-trust__list li {
		padding-inline: 2rem;
	}

	.io-card__head h3 {
		font-size: 1.5rem;
	}

	.io-card__head p {
		font-size: 0.8125rem;
		letter-spacing: 0.03em;
	}

	.io-card__body {
		padding: 1.25rem 1.25rem 2rem;
	}


	.io-why__grid {
		gap: 1rem;
	}

	.io-steps--four .io-steps__grid {
		grid-template-columns: repeat(4, minmax(0, 275px));
	}
}

@media (max-width: 960px) {
	.io-header,
	.home .io-header {
		position: relative;
		inset: auto;
		background: var(--io-navy);
		color: #fff;
	}

	.io-header__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto;
		padding-block: 10px;
		column-gap: 1rem;
	}

	/* Still hanging from the top of the page: pulled up through the bar's padding. */
	.io-header__logo {
		grid-row: auto;
		align-self: start;
		margin: -10px 0 0 !important;
		padding: 6px 8px;
	}

	.io-header__logo img {
		width: 100px !important;
		height: auto;
	}

	.io-header__tagline,
	.io-header__cta .io-header__book {
		display: none;
	}

	.io-header__cta {
		grid-column: 2;
		justify-self: end;
	}

	.io-header__nav {
		grid-column: 3;
	}

	.io-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.io-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Mobile menu: full-screen navy panel with the logo and close button where
	   the header has them, large links on thin rules, the Services pages
	   indented, and the call / booking buttons at the bottom. */
	.io-header__nav .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		margin-right: -10px;
	}

	.io-header__nav .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
	}

	.io-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0 !important;
		background: var(--io-navy) !important;
		overflow-y: auto;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__responsive-close,
	.io-header__nav .is-menu-open .wp-block-navigation__responsive-dialog {
		max-width: none;
		min-height: 100%;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		padding: 104px 24px max(32px, env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	/* The logo box, same place and size as in the header. Logged in, WordPress
	   already moves the whole dialog below the admin bar (margin-top), so the
	   admin bar height is not added here or on the close button. */
	.io-header__nav .is-menu-open .wp-block-navigation__responsive-dialog::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 16px;
		width: 96px;
		height: 72px;
		background: #fff url("../img/logo.webp") center / 80px auto no-repeat;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	}

	.io-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 24px;
		right: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: #fff;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 30px;
		height: 30px;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: stretch !important;
		padding: 0 !important;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__container {
		flex: 1;
		flex-direction: column;
		align-items: stretch !important;
		gap: 0 !important;
		text-align: left;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		flex-direction: column;
		align-items: stretch !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		font-size: 1.375rem;
		font-weight: 600;
		letter-spacing: 0.01em;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 0;
		text-decoration: none;
	}

	/* Arrow at the end of each main link. */
	.io-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: "";
		flex: none;
		width: 24px;
		height: 24px;
		background: var(--io-orange-bright);
		-webkit-mask: var(--io-icon-arrow) center / contain no-repeat;
		mask: var(--io-icon-arrow) center / contain no-repeat;
	}

	.io-header__nav .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
		display: none;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__submenu-container {
		align-items: stretch !important;
		gap: 0 !important;
		width: 100%;
		padding: 0 0 0.75rem !important;
		text-align: left;
		background: transparent !important;
		font-size: 1.125rem !important;
		font-weight: 500;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		align-items: stretch !important;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.5rem 0 0.5rem 0.25rem !important;
		color: rgba(255, 255, 255, 0.85);
		text-decoration: none;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
		content: "";
		width: 14px;
		height: 2px;
		background: var(--io-orange-bright);
	}

	/* The page you are on. */
	.io-header__nav .is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
		color: var(--io-orange-bright) !important;
	}

	/* Call and Book Online: two buttons at the bottom of the panel. */
	.io-header__nav .is-menu-open .wp-block-navigation__container > :is(.io-nav-phone, .io-nav-booking) {
		border: 0;
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__container > .io-nav-booking {
		order: 2;
		margin-top: auto;
		padding-top: 2rem;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__container > .io-nav-phone {
		order: 3;
		margin-top: 0.75rem;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__container > :is(.io-nav-phone, .io-nav-booking) > .wp-block-navigation-item__content {
		justify-content: center !important;
		gap: 0.75rem;
		min-height: 52px;
		padding: 0 1rem !important;
		box-sizing: border-box;
	}

	.io-header__nav .is-menu-open .io-nav-booking > .wp-block-navigation-item__content {
		background: var(--io-orange-bright);
	}

	.io-header__nav .is-menu-open .io-nav-phone > .wp-block-navigation-item__content {
		border: 1px solid var(--io-orange-bright);
	}

	.io-header__nav .is-menu-open :is(.io-nav-phone, .io-nav-booking) > .wp-block-navigation-item__content::after {
		display: none;
	}

	.io-header__nav .is-menu-open .io-nav-phone > .wp-block-navigation-item__content::before {
		content: "";
		width: 20px;
		height: 20px;
		background: currentColor;
		-webkit-mask: var(--io-icon-phone) center / contain no-repeat;
		mask: var(--io-icon-phone) center / contain no-repeat;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__responsive-container-content::after {
		content: "Family-Owned Plumbing in South Florida";
		display: block;
		margin-top: 1.5rem;
		color: rgba(255, 255, 255, 0.6);
		font-size: 0.875rem;
		text-align: center;
	}

	@media (prefers-reduced-motion: no-preference) {
		.io-header__nav .wp-block-navigation__responsive-container.is-menu-open {
			animation: io-menu-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
		}

		.io-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
			animation: io-rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
		}

		.io-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.04s; }
		.io-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.08s; }
		.io-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.12s; }
		.io-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.16s; }
		.io-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: 0.2s; }
	}

	/* Hero bottom on phones: room under the rating, which sits on plain white
	   above the trust bar. */
	.io-hero {
		padding-bottom: 1.5rem;
	}

	.io-hero + .io-trust {
		margin-top: 0 !important;
		box-shadow: none;
	}

	.io-card {
		width: 100%;
		max-width: 560px;
		min-height: 0;
		margin-inline: auto !important;
	}

	.io-cta:not(.io-cta--page) {
		min-height: 0 !important;
		padding: 4rem 16px;
	}

	.io-slider__nav {
		position: static;
		justify-content: flex-end;
		margin: 0 0 1.25rem !important;
	}

	.io-slider {
		margin-top: 2rem !important;
	}

	.io-hero {
		padding-top: 2.5rem;
	}

	/* White floor: the van's wheels stand on it and the rating sits below
	   with room above, plain white (no grey fade into the trust bar). */
	.io-hero::after {
		height: 150px;
		background: #fff;
	}

	.io-hero__rating {
		margin-top: 1.25rem !important;
	}

	.io-hero__inner {
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.io-hero__rating {
		position: static;
		order: 3;
		align-self: center;
		margin-top: 1rem !important;
		text-align: center;
	}

	.io-hero__google {
		justify-content: center;
	}

	.io-hero__van {
		position: relative;
		left: auto;
		bottom: auto;
		z-index: auto;
		width: min(100%, 560px);
		margin: 2rem auto 0 !important;
		order: 2;
		/* Slides in without the tilt, so the white floor below stays level. */
		animation-name: io-van-slide;
	}

	/* White floor from 62% of the van's height down: the back wheel (higher
	   in the photo, it is further away) stands on white, not on the orange. */
	.io-hero__van::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 62% -100vw -100vh;
		background: #fff;
	}

	/* Above the van's white floor; the wide layout's offsets do not apply. */
	.io-hero__rating {
		position: relative;
		inset: auto;
		z-index: 1;
	}

	.io-hero__plumber {
		display: none;
	}

	/* Trust bar: two by two, no rules. */
	.io-trust {
		padding-block: 1.75rem;
	}

	.io-trust__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
		font-size: 1rem;
	}

	.io-trust__list li,
	.io-trust__list li + li,
	.io-trust__list li:first-child,
	.io-trust__list li:last-child {
		padding: 0;
		gap: 0.75rem;
		background: none;
	}

	.io-trust__list li::before {
		width: 48px;
		height: 48px;
	}

	/* An odd last item (Backflow has three) takes the whole row, centred. */
	.io-trust__list li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
	}

	.io-trust__meta {
		margin-top: 1.5rem !important;
		font-size: 0.9375rem;
	}

	.io-services {
		padding-block: 3.5rem 4rem;
	}

	.io-split {
		padding-block: 3.5rem;
	}

	.io-split::before {
		display: none;
	}

	.io-split__cols {
		gap: 2rem !important;
	}

	.io-split--media-left .io-split__cols {
		flex-direction: column-reverse;
	}

	.io-split--media-left .io-split__text {
		padding-left: 0;
	}

	.io-split .io-split__media .wp-block-image {
		margin-inline: -16px;
		width: calc(100% + 32px);
	}

	.io-expert {
		padding-block: 3.5rem;
	}

	.io-expert__box {
		padding: 2.5rem 1.25rem;
	}

	.io-checklist {
		grid-auto-flow: row;
		grid-template-rows: none;
		row-gap: 0.75rem;
		font-size: 1.125rem;
	}

	.io-expert {
		padding-block: 3.5rem;
	}

	/* Inner pages: one column, photo first. */
	.io-page-hero {
		min-height: 0 !important;
		padding: 3.5rem 0 !important;
	}

	.io-page-hero .wp-block-cover__background {
		background: linear-gradient(90deg, rgba(12, 30, 54, 0.92), rgba(12, 30, 54, 0.55)) !important;
	}

	.io-page-hero--plain .wp-block-cover__background {
		background: rgba(234, 91, 26, 0.55) !important;
		opacity: 1 !important;
	}

	.io-page-hero__buttons {
		margin-top: 2.5rem !important;
	}

	.io-feature,
	.io-feature--boxed {
		grid-template-columns: 1fr;
		padding: 0;
	}

	.io-feature::before {
		display: none;
	}

	.io-feature__media {
		order: -1;
	}

	.io-feature__body,
	.io-feature.has-navy-background-color .io-feature__body,
	.io-feature.has-cream-background-color .io-feature__body,
	.io-feature--boxed .io-feature__body {
		max-width: none;
		padding: 3rem 16px 3.5rem;
	}

	.io-feature--boxed .io-feature__body {
		padding-inline: 20px;
	}

	.io-why,
	.io-svc,
	.io-steps,
	.io-included,
	.io-faq,
	.io-touch {
		padding-block: 3.5rem;
	}

	.io-why__grid {
		grid-template-columns: minmax(0, 480px);
		justify-content: center;
		gap: 1.5rem;
		margin-top: 2rem !important;
	}

	.io-svc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 2rem !important;
	}

	.io-svc__card {
		min-height: 0;
		padding-bottom: 1.5rem;
	}

	.io-svc__card h3 {
		margin: 1.5rem 1.5rem 0.75rem;
		font-size: 1.3125rem;
		line-height: 1.15;
	}

	.io-svc__card p {
		margin: 0 1.5rem;
	}

	.io-steps__grid,
	.io-steps--four .io-steps__grid {
		grid-template-columns: repeat(2, minmax(0, 275px));
		gap: 2.5rem 1.5rem;
		margin-top: 2.5rem !important;
	}

	.io-steps__fail {
		grid-template-columns: minmax(0, 480px);
		justify-content: center;
		margin-top: 2.5rem !important;
	}

	.io-steps__box {
		padding: 2rem 1.5rem;
	}

	.io-steps--four {
		padding-bottom: 3.5rem;
	}

	.io-cta--page {
		min-height: 0 !important;
		padding: 3.5rem 0 !important;
	}

	.io-cta--page .wp-block-cover__background {
		background: #040f22 !important;
		opacity: 0.6 !important;
	}

	.io-cta--page .io-cta__buttons {
		margin-top: 2rem !important;
	}

	.io-cta--page .wp-block-button__link {
	width: auto;
}

.io-cta--page .io-price--cta {
	margin-top: 3rem !important;
}

.io-cta--page .io-cta__phone {
		margin-top: 2rem !important;
	}

	.io-cta__note {
		margin-top: 2.5rem !important;
	}

	.io-touch__grid {
		grid-template-columns: minmax(0, 340px);
	}

	.io-plans__grid {
		grid-template-columns: minmax(0, 424px);
		gap: 3rem;
		margin-top: 3rem !important;
	}

	.io-touch__card {
		min-height: 0;
	}

	.io-form {
		padding-block: 3.5rem;
	}

	.io-form__box {
		padding: 2.5rem 20px;
	}

	.io-form__box > h2 {
		margin-bottom: 2rem;
	}

	/* Footer: logo and disclosure, then the two link columns side by side,
	   then booking and contact; the bottom row stacks. */
	.io-footer {
		padding-top: 3rem;
	}

	.io-footer__logo {
		margin-top: -3rem !important;
	}

	.io-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem 1.5rem;
	}

	.io-footer__brand,
	.io-footer__contact {
		grid-column: 1 / -1;
	}

	.io-footer__brand {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.io-footer__disclosure {
		margin-top: 0 !important;
	}

	.io-footer__disclosure summary {
		padding-inline: 1.25rem;
	}

	.io-footer__logo img {
		width: 216px !important;
		height: auto;
	}

	.io-footer__label {
		margin-bottom: 1.25rem !important;
	}

	.io-footer__nav {
		font-size: 1.125rem;
	}

	.io-footer__nav .wp-block-navigation__container {
		gap: 0.75rem;
	}

	.io-footer__contact {
		text-align: left;
	}

	.io-footer__phone {
		margin-top: 2rem !important;
		font-size: 1.75rem;
	}

	.io-footer__details {
		font-size: 1.125rem;
	}

	.io-footer__bottom {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 1.25rem;
		margin-top: 3rem !important;
		text-align: center;
	}

	.io-footer__bottom .io-footer__social {
		order: -1;
	}

	.io-footer__legal {
		text-align: center;
	}

	.io-footer__legal a {
		margin: 0 0.75rem;
	}

	/* Logo alone on top; the fee disclosure moves below booking and contact
	   (the brand group lets its two items join the footer grid). */
	.io-footer__brand {
		display: contents;
	}

	.io-footer__logo {
		grid-column: 1 / -1;
	}

	.io-footer__disclosure {
		grid-column: 1 / -1;
		order: 1;
		width: 100%;
	}

	.io-footer__disclosure summary {
		min-height: 52px;
	}

	/* Book Online: full width, like the booking button in the mobile menu. */
	.io-footer__contact .wp-block-buttons {
		justify-content: flex-start;
	}

	.io-footer__contact .io-footer__book,
	.io-footer__contact .io-footer__book .wp-block-button__link {
		width: 100%;
	}
}

@media (max-width: 600px) {
	/* Narrow screens: even out heading lines (the last two words are already
	   joined by inc/typography.php, so no line can end with a single word). */
	h1, h2, h3, h4, h5, h6 {
		text-wrap: balance;
	}

	.wp-block-button__link {
		white-space: normal;
	}

	/* Hand-placed line breaks in body copy are for the wide layout; headings
	   keep theirs, which split them into phrases. */
	:where(.io-page-hero, .io-feature, .io-why, .io-svc, .io-steps, .io-cta--page, .io-split--area) :where(p, li) br {
		display: none;
	}

	.io-header__inner {
		column-gap: 0.75rem;
	}

	.io-header__logo img {
		width: 80px !important;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__responsive-dialog::before {
		width: 80px;
		height: 58px;
		background-size: 64px auto;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 17px;
	}

	.io-header__nav .is-menu-open .wp-block-navigation__responsive-dialog {
		padding-top: 92px;
	}

	.io-header__cta .wp-block-button.is-style-phone .wp-block-button__link {
		gap: 8px;
		min-width: 0;
		letter-spacing: 0;
		font-size: 0.9375rem;
		padding: 0 12px !important;
	}

	.io-header__cta .wp-block-button.is-style-phone .wp-block-button__link::after {
		width: 16px;
		height: 16px;
	}

	.io-cards {
		gap: 2rem !important;
	}

	.io-card__head h3 {
		font-size: 1.5rem;
	}

	.io-card__head p {
		font-size: 0.9375rem;
	}

	.io-cta .wp-block-button__link,
	.io-hero__buttons .wp-block-button__link {
		width: 100%;
		min-width: 247px;
	}

	.io-page-hero__eyebrow {
		margin-bottom: 1rem !important;
		font-size: 1.0625rem;
	}

	/* Small enough for the longest phrase ("Commercial Plumbing") on a 360px phone. */
	.io-page-hero__title {
		font-size: clamp(1.5rem, 6.6vw, 1.875rem);
	}

	.io-page-hero__text,
	.io-checks--hero {
		font-size: 1.0625rem;
	}

	.io-checks--hero li {
		gap: 1rem;
	}

	.io-page-hero .io-page-hero__buttons,
	.io-cta--page .io-cta__buttons--stack {
		width: 100%;
	}

	:where(.io-feature, .io-why, .io-svc, .io-steps, .io-included, .io-faq, .io-touch, .io-form, .io-cta--page) h2 {
		font-size: clamp(1.5rem, 6.8vw, 1.875rem);
	}

	.io-page-hero .wp-block-button,
	.io-cta--page .wp-block-button,
	.io-feature .wp-block-button {
		width: 100%;
	}

	.io-page-hero .wp-block-button__link,
	.io-cta--page .wp-block-button__link,
	.io-feature .wp-block-button__link {
		width: 100%;
		min-width: 0;
	}

	.io-checks {
		font-size: 1.0625rem;
	}

	.io-checks li {
		gap: 0.75rem;
	}

	.io-checks li::before {
		width: 26px;
		height: 26px;
		margin-top: -1px;
	}

	.io-svc__head .wp-block-buttons,
	.io-svc__head .wp-block-button,
	.io-svc__head .wp-block-button__link {
		width: 100%;
	}

	.io-svc__grid {
		grid-template-columns: 1fr;
	}

	.io-steps__grid,
	.io-steps--four .io-steps__grid {
		grid-template-columns: minmax(0, 320px);
	}

	.io-faq__item summary {
		font-size: 1.25rem;
	}

	.io-faq__item p,
	.io-faq__item .io-bullets,
	.io-cta--page p,
	.io-feature--large .io-feature__body p {
		font-size: 1.0625rem;
	}

	/* Inner page heroes on phones: the same height on every page, copy at the
	   bottom on a navy fade, so the top of the photo stays clear. */
	.io-page-hero,
	.io-page-hero--high {
		min-height: max(520px, 80svh) !important;
		align-items: flex-end;
		padding: 5.5rem 0 2.5rem !important;
	}

	.io-page-hero .wp-block-cover__background,
	.io-page-hero--soft .wp-block-cover__background {
		background: linear-gradient(0deg, rgba(12, 30, 54, 0.96) 0%, rgba(12, 30, 54, 0.85) 45%, rgba(12, 30, 54, 0.2) 100%) !important;
		opacity: 1 !important;
	}

	.io-page-hero--plain .wp-block-cover__background {
		background: linear-gradient(0deg, rgba(234, 91, 26, 0.94) 0%, rgba(234, 91, 26, 0.8) 45%, rgba(234, 91, 26, 0.15) 100%) !important;
	}

	.io-page-hero .io-breadcrumbs {
		top: 24px;
		font-size: 0.8125rem;
	}

	/* One clear hierarchy: small label, large headline, mid sub, body copy. */
	.io-page-hero__eyebrow,
	.io-page-hero__eyebrow--caps {
		margin-bottom: 0.875rem !important;
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	.io-page-hero__title {
		font-size: clamp(1.875rem, 9.4vw, 2.25rem);
		line-height: 1.1;
	}

	.io-page-hero__sub {
		margin-top: 1.25rem !important;
		font-size: 1.25rem;
		line-height: 1.25;
	}

	.io-page-hero__text,
	.io-page-hero--loose .io-page-hero__text {
		line-height: 1.4;
	}

	.io-page-hero__title + .io-page-hero__text {
		margin-top: 1.25rem !important;
	}

	.io-page-hero__sub + .io-page-hero__text {
		margin-top: 1rem !important;
	}

	.io-page-hero .io-page-hero__buttons,
	.io-page-hero .io-checks--hero + .io-page-hero__buttons {
		margin-top: 2rem !important;
	}
}

/* Phones (QA 10/12): smaller eyebrow lines, bigger section headings, and no
   hand-placed breaks in section headings (they left one word on a line,
   e.g. "Your"); the balanced wrap and joined last words take over. */
@media (max-width: 600px) {
	.io-eyebrow:not(.io-reviews .io-eyebrow),
	.io-split__text .io-eyebrow {
		margin-bottom: 1rem !important;
		font-size: 1.125rem;
		line-height: 1.25;
	}

	:where(h2, h3) br {
		display: none;
	}

	/* A lone word after a hidden break stays with the word before it
	   (inc/typography.php). */
	.io-keep {
		white-space: nowrap;
	}

	.io-services > h2,
	.io-split h2,
	.io-split--area .io-split__text h2,
	.io-expert__box h2,
	.io-reviews h2,
	.io-cta h2,
	:where(.io-feature, .io-why, .io-svc, .io-steps, .io-included, .io-faq, .io-touch, .io-form, .io-cta--page) h2 {
		font-size: clamp(1.875rem, 8.4vw, 2.25rem);
		line-height: 1.15;
	}
}

@media (max-width: 340px) {
	/* The smallest phones (320px): joined pairs such as "Florida Homes" must still fit. */
	.io-page-hero__title {
		font-size: 1.75rem;
	}
}

/* --------------------------------------------------------------------------
   QA 10/13 additions
   -------------------------------------------------------------------------- */

/* Commercial intro without its kicker: a bigger headline and text. */
.io-feature--big .io-feature__body > h2 {
	font-size: clamp(2.25rem, 3.4vw, 3rem);
}

.io-feature--big .io-feature__body > p {
	font-size: 1.25rem;
	line-height: 1.5;
}

/* Boxed feature on navy (plan page discount box): the box keeps its colours. */
.io-feature--boxed.has-navy-background-color {
	color: var(--io-navy);
}

/* One centred button under the two plan cards, and under the warranty terms. */
.io-plans__buttons,
.io-faq__buttons {
	justify-content: center;
	gap: 1rem;
	margin: 3rem auto 0 !important;
}

.io-faq__buttons + .io-faq__note {
	margin-top: 1.5rem !important;
	text-align: center;
}

@media (max-width: 600px) {
	.io-feature--big .io-feature__body > h2 {
		font-size: clamp(1.875rem, 8.4vw, 2.25rem);
	}

	.io-feature--big .io-feature__body > p {
		font-size: 1.125rem;
	}

	.io-plans__buttons .wp-block-button,
	.io-faq__buttons .wp-block-button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Blog: posts page, categories and other archives, search, single article
   -------------------------------------------------------------------------- */

.io-blog__head {
	padding: clamp(3rem, 7vw, 5.5rem) var(--io-edge) clamp(2rem, 4vw, 3rem);
}

.io-blog__head > * {
	max-width: 860px;
	margin-block: 0 !important;
}

.io-blog__head .io-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.io-blog__head .io-eyebrow a:hover {
	text-decoration: underline;
}

.io-blog__title {
	margin-top: 0.75rem !important;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 1.15;
}

.io-blog__intro,
.io-blog__intro p {
	margin-top: 1rem !important;
	font-size: 1.25rem;
	line-height: 1.5;
}

.io-blog__list {
	padding: clamp(2.5rem, 5vw, 4.5rem) var(--io-edge) clamp(3.5rem, 7vw, 6rem);
}

.io-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.io-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	box-shadow: 0 4px 24px rgba(32, 42, 60, 0.08);
}

.io-post-card__img {
	margin: 0 !important;
}

.io-post-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.io-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem 1.5rem 1.75rem;
}

.io-post-card__body > * {
	margin: 0 !important;
}

.io-post-meta {
	gap: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.io-post-meta > * {
	margin: 0 !important;
}

.io-post-meta__cat a {
	color: var(--io-orange);
	text-decoration: none;
}

.io-post-meta__date {
	color: rgba(32, 42, 60, 0.65);
}

.io-post-card__title {
	font-size: 1.5rem;
	line-height: 1.25;
}

.io-post-card__title a {
	color: var(--io-navy);
	text-decoration: none;
}

.io-post-card__title a:hover {
	color: var(--io-orange);
}

.io-post-card__excerpt p {
	margin: 0;
	line-height: 1.55;
}

.io-post-card__more {
	margin-top: auto !important;
	color: var(--io-orange);
	font-weight: 700;
	text-decoration: none;
}

.io-post-card__more:hover {
	text-decoration: underline;
}

.io-blog__pagination {
	gap: 0.75rem;
	margin-top: 3rem !important;
	font-weight: 600;
}

.io-blog__pagination a {
	color: var(--io-navy);
}

.io-blog__pagination .current {
	color: var(--io-orange);
}

.io-blog__empty {
	text-align: center;
}

/* Single article */
.io-article__img {
	width: min(100% - 32px, 1100px);
	margin: clamp(2rem, 4vw, 3rem) auto 0 !important;
}

.io-article__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.io-article__content {
	padding-inline: 16px;
}

.io-article__foot {
	width: min(100% - 32px, 760px);
	margin: 0 auto !important;
	padding-bottom: 5rem;
}

.io-article__foot > * {
	margin: 0 0 1rem !important;
}

.io-article__tags a,
.io-article__back a {
	color: var(--io-orange);
	font-weight: 600;
}

@media (max-width: 960px) {
	.io-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.io-blog__grid {
		grid-template-columns: 1fr;
	}

	.io-blog__intro,
	.io-blog__intro p {
		font-size: 1.0625rem;
	}

	.io-article__content {
		padding-bottom: 3rem;
	}
}

/* Blog index: category chips; the newest article (the first one, by date) as a
   wide card on the first page only. */
.io-blog__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.75rem 0 0 !important;
	padding: 0;
	list-style: none;
}

.io-blog__cats li a {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(32, 42, 60, 0.2);
	border-radius: 999px;
	color: var(--io-navy);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.io-blog__cats li a:hover,
.io-blog__cats li.current-cat a {
	border-color: var(--io-navy);
	background: var(--io-navy);
	color: #fff;
}

@media (min-width: 961px) {
	body:not(.paged) .io-blog__list--featured .io-blog__grid > li:first-child {
		grid-column: 1 / -1;
	}

	body:not(.paged) .io-blog__list--featured .io-blog__grid > li:first-child .io-post-card {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	body:not(.paged) .io-blog__list--featured .io-blog__grid > li:first-child .io-post-card__img {
		aspect-ratio: auto !important;
		min-height: 380px;
	}

	body:not(.paged) .io-blog__list--featured .io-blog__grid > li:first-child .io-post-card__body {
		justify-content: center;
		gap: 1rem;
		padding: 3rem;
	}

	body:not(.paged) .io-blog__list--featured .io-blog__grid > li:first-child .io-post-card__title {
		font-size: clamp(1.875rem, 2.6vw, 2.5rem);
	}

	body:not(.paged) .io-blog__list--featured .io-blog__grid > li:first-child .io-post-card__more {
		margin-top: 0.5rem !important;
	}
}

/* Cards: image zooms a little on hover, the card lifts. */
.io-post-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.io-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(32, 42, 60, 0.16);
}

.io-post-card__img {
	overflow: hidden;
}

.io-post-card__img img {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.io-post-card:hover .io-post-card__img img {
	transform: scale(1.04);
}

.io-post-card__more::after {
	content: " →";
	transition: margin 0.2s ease;
}

.io-post-card:hover .io-post-card__more::after {
	margin-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.io-post-card,
	.io-post-card__img img {
		transition: none;
	}

	.io-post-card:hover,
	.io-post-card:hover .io-post-card__img img {
		transform: none;
	}
}

/* Reading progress bar (CSS scroll timeline; hidden where unsupported). */
.io-progress {
	display: none;
}

@supports (animation-timeline: scroll()) {
	.io-progress {
		display: block;
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
		z-index: 50;
		height: 4px;
		margin: 0 !important;
		background: var(--io-orange-bright);
		transform-origin: 0 50%;
		animation: io-progress linear both;
		animation-timeline: scroll(root);
	}

	@keyframes io-progress {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}
}

/* Article head on navy */
.io-article__head {
	color: #fff;
	padding-bottom: clamp(5rem, 10vw, 8rem);
}

.io-article__head .io-blog__title {
	max-width: 960px;
	color: #fff;
}

.io-article__head .io-blog__intro,
.io-article__head .io-blog__intro p {
	max-width: 760px;
	color: rgba(255, 255, 255, 0.85);
}

.io-article__crumbs {
	display: flex;
	gap: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.io-article__crumbs a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.io-article__crumbs a:hover {
	color: #fff;
}

.io-article__crumbs span {
	color: var(--io-orange-bright);
}

.io-post-meta--head {
	margin-top: 1.75rem !important;
	gap: 0.5rem 1.5rem;
}

.io-post-meta--head .io-post-meta__cat a {
	padding: 0.35rem 0.75rem;
	background: var(--io-orange-bright);
	color: #fff;
}

.io-post-meta--head .io-post-meta__date,
.io-post-meta--head .io-post-meta__read {
	align-self: center;
	color: rgba(255, 255, 255, 0.8);
}

.io-post-meta__read::before {
	content: "·";
	margin-right: 1.5rem;
	color: var(--io-orange-bright);
}

/* Photo overlaps the navy head. */
.io-article__img {
	position: relative;
	width: min(100% - 32px, 1100px);
	margin: calc(-1 * clamp(3.5rem, 7vw, 6rem)) auto 0 !important;
	box-shadow: 0 20px 50px rgba(4, 15, 34, 0.25);
}

/* Text with the table of contents beside it. */
.io-article__layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 760px);
	justify-content: center;
	gap: 4rem;
	width: min(100% - 32px, 1100px);
	margin: 0 auto;
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.io-article__layout > .io-article__content {
	padding: 0 0 3rem;
}

.io-article__content > p:first-child {
	font-size: 1.25rem;
	line-height: 1.55;
}

.io-article__content h2 {
	scroll-margin-top: 2rem;
}

.io-toc {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 2rem);
	align-self: start;
	padding: 1.5rem;
	border-top: 4px solid var(--io-orange-bright);
	background: var(--io-cream);
}

.io-toc__title {
	margin-bottom: 1rem;
	color: var(--io-navy);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	list-style: none;
	text-transform: uppercase;
	cursor: pointer;
}

.io-toc__title::-webkit-details-marker {
	display: none;
}

.io-toc__list {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.io-toc__list a {
	display: flex;
	gap: 0.75rem;
	padding: 0.5rem 0;
	color: var(--io-navy);
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
}

.io-toc__list a:hover {
	color: var(--io-orange);
}

.io-toc__num {
	flex: none;
	color: var(--io-orange);
	font-weight: 700;
}

/* Closing call to action inside the article. */
.io-article__foot {
	width: min(100% - 32px, 1100px);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.io-article__foot > .io-article__tags,
.io-article__foot > .io-article__back {
	max-width: 760px;
	margin-inline: auto !important;
}

/* Closing call to action: a navy box as wide as the site grid, under the article. */
.io-article__cta {
	margin: 0 !important;
	padding: 0 var(--io-edge) clamp(3rem, 6vw, 5rem);
}

.io-article__cta-inner {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	margin: 0 !important;
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
	border-left: 6px solid var(--io-orange-bright);
	color: #fff;
}

.io-article__cta-badge {
	flex: none;
	margin: 0 !important;
}

.io-article__cta-badge img {
	width: 110px !important;
}

.io-article__cta-text {
	flex: 1;
}

.io-article__cta-text > * {
	margin: 0 !important;
}

.io-article__cta-text h2 {
	color: #fff;
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
}

.io-article__cta-text p {
	margin-top: 0.75rem !important;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.125rem;
}

.io-article__cta-text .wp-block-buttons {
	gap: 1rem;
	margin-top: 1.75rem !important;
}

/* Related articles */
.io-related {
	padding: clamp(3rem, 6vw, 5rem) var(--io-edge);
}

.io-related > * {
	margin-block: 0 !important;
}

.io-related__title {
	margin: 0 0 2.5rem !important;
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
}

.io-related .io-post-card__title {
	font-size: 1.25rem;
}

@media (max-width: 960px) {
	.io-article__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.io-toc {
		position: static;
	}

	.io-article__cta-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.io-article__cta-badge img {
		width: 80px !important;
	}
}

@media (max-width: 600px) {
	.io-article__crumbs {
		font-size: 0.75rem;
	}

	.io-article__content > p:first-child {
		font-size: 1.125rem;
	}

	.io-article__cta-text .wp-block-button,
	.io-article__cta-text .wp-block-button__link {
		width: 100%;
	}
}

/* Cards line up: no flow spacing on the grid items. */
.io-blog__grid > li {
	margin: 0 !important;
}

@media (min-width: 961px) {
	/* Tags, call to action and back link in the text column, right of the
	   contents list (same grid as .io-article__layout). */
	.io-article__foot {
		display: grid;
		grid-template-columns: 260px minmax(0, 760px);
		justify-content: center;
		column-gap: 4rem;
	}

	.io-article__foot > * {
		grid-column: 2;
	}

	.io-article__foot > .io-article__tags,
	.io-article__foot > .io-article__back {
		max-width: none;
		margin-inline: 0 !important;
	}
}

@media (max-width: 600px) {
	.io-post-meta__read::before {
		display: none;
	}
}

/* Pagination: square page numbers, Previous / Next with arrows. */
.io-blog__pagination {
	align-items: center;
	gap: 0.5rem;
	margin-top: 3.5rem !important;
}

.io-blog__pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.5rem;
}

.io-blog__pagination .page-numbers,
.io-blog__pagination .wp-block-query-pagination-previous,
.io-blog__pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	margin: 0 !important;
	padding: 0 0.75rem;
	border: 1px solid rgba(32, 42, 60, 0.2);
	color: var(--io-navy);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.io-blog__pagination .wp-block-query-pagination-previous,
.io-blog__pagination .wp-block-query-pagination-next {
	gap: 0.5rem;
	padding: 0 1.25rem;
}

.io-blog__pagination a:hover {
	border-color: var(--io-navy);
	background: var(--io-navy);
	color: #fff;
}

.io-blog__pagination .page-numbers.current {
	border-color: var(--io-orange-bright);
	background: var(--io-orange-bright);
	color: #fff;
}

.io-blog__pagination .page-numbers.dots {
	border-color: transparent;
}

@media (max-width: 600px) {
	.io-blog__pagination {
		flex-wrap: wrap;
	}

	.io-blog__pagination .wp-block-query-pagination-previous,
	.io-blog__pagination .wp-block-query-pagination-next {
		padding: 0 1rem;
	}
}

/* Article text: H4-H6, quotes and an FAQ (details blocks with the io-faq__item class). */
.io-article__content h4,
.io-article__content h5,
.io-article__content h6 {
	margin-block: 1.5rem 0.5rem;
	color: var(--io-navy);
	font-family: var(--wp--preset--font-family--body);
	font-variation-settings: normal;
	font-weight: 700;
}

.io-article__content h4 {
	font-size: 1.0625rem;
}

.io-article__content h5 {
	font-size: 1rem;
}

.io-article__content h6 {
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.io-article__content ol {
	padding-left: 1.5rem;
}

.io-article__content blockquote {
	margin-inline: 0;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--io-orange-bright);
	background: var(--io-cream);
	font-size: 1.125rem;
}

.io-article__content .io-faq__item {
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(32, 42, 60, 0.12);
}

.io-article__content .io-faq__item + .io-faq__item {
	margin-top: 0 !important;
}

.io-article__content .io-faq__item summary {
	font-size: 1.25rem;
}

.io-article__content .io-faq__item p {
	margin-top: 0.75rem;
	font-size: 1rem;
}

/* Article headings: one standard scale, all in the heading font
   (H2 32 / H3 26 / H4 22 / H5 18 / H6 16px; a little smaller on phones). */
.io-article__content :is(h2, h3, h4, h5, h6) {
	margin-block: 2.25rem 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "opsz" 6;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.25;
	text-transform: none;
}

.io-article__content h2 {
	margin-top: 2.75rem;
	color: var(--io-orange);
	font-size: 2rem;
}

.io-article__content :is(h3, h4, h5, h6) {
	color: var(--io-navy);
}

.io-article__content h3 {
	font-size: 1.625rem;
}

.io-article__content h4 {
	font-size: 1.375rem;
}

.io-article__content h5 {
	margin-top: 1.75rem;
	font-size: 1.125rem;
}

.io-article__content h6 {
	margin-top: 1.75rem;
	font-size: 1rem;
}

@media (max-width: 600px) {
	.io-article__content h2 {
		font-size: 1.75rem;
	}

	.io-article__content h3 {
		font-size: 1.4375rem;
	}

	.io-article__content h4 {
		font-size: 1.25rem;
	}

	.io-article__content h5 {
		font-size: 1.0625rem;
	}
}

/* --------------------------------------------------------------------------
   SKD Inquiries forms ([skd_form], plugin wp-content/plugins/skd-inquiries):
   the Contact form of the Figma file (Contact > "Send Us a Message"):
   16px labels 8px above 50px fields with a 1px navy border, 32px between
   rows, topics as two columns of radio tiles, 269 x 45 button 48px below.
   -------------------------------------------------------------------------- */

.skdi-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.skdi-field {
	display: block;
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--io-navy);
	font-size: 1rem;
	line-height: 1.625;
}

.skdi-half {
	grid-column: auto;
}

.skdi-field > span,
.skdi-field > legend {
	display: block;
	margin-bottom: 0.5rem;
	padding: 0;
}

/* The design marks no field as required. */
.skdi-field > span i,
.skdi-field > legend i {
	display: none;
}

.skdi-field :is(input, select, textarea) {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 1rem;
	border: 1px solid var(--io-navy);
	border-radius: 0;
	box-sizing: border-box;
	background: transparent;
	color: var(--io-navy);
	font: inherit;
}

.skdi-field textarea {
	height: 100px;
	padding-block: 0.75rem;
	resize: vertical;
}

.skdi-field select {
	appearance: none;
	padding-right: 3rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23202a3c' stroke-width='1.5'%3E%3Cpath d='M1.5 4 6 8l4.5-4'/%3E%3C/svg%3E") right 1rem center / 12px no-repeat;
	cursor: pointer;
}

.skdi-field :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--io-orange);
	outline-offset: 0;
}

/* Radio tiles: 50px, uppercase 16px semibold, 24px circle; the chosen one orange. */
.skdi-choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.skdi-choice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: 50px;
	margin: 0;
	padding: 0 1rem;
	border: 1px solid var(--io-navy);
	box-sizing: border-box;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.skdi-choice input {
	appearance: none;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.skdi-choice input:checked {
	border: 0;
	background: radial-gradient(var(--io-cream) 0 3.5px, var(--io-orange) 4px);
}

.skdi-choice:has(input:checked) {
	border-color: var(--io-orange);
	color: var(--io-orange);
}

.skdi-choice:has(input:focus-visible) {
	outline: 2px solid var(--io-orange);
	outline-offset: 2px;
}

.skdi-t-consent {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.skdi-t-consent input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0.2rem;
	accent-color: var(--io-orange);
}

.skdi-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 269px;
	height: 45px;
	margin-top: 3rem;
	padding: 0 4.375rem 0 2rem;
	border: 0;
	border-radius: 0;
	background: var(--io-orange);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.skdi-submit::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2rem;
	width: 26px;
	height: 26px;
	background: currentColor;
	transform: translateY(-50%);
	-webkit-mask: var(--io-icon-arrow) center / contain no-repeat;
	mask: var(--io-icon-arrow) center / contain no-repeat;
}

.skdi-submit:hover,
.skdi-submit:focus-visible {
	background: var(--io-navy);
	color: #fff;
}

.skdi-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.skdi-msg {
	margin-bottom: 2rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border-left: 4px solid var(--io-orange);
	color: var(--io-navy);
	line-height: 1.5;
}

.skdi-rc {
	margin-top: 1rem;
	font-size: 0.8125rem;
	opacity: 0.8;
}

@media (max-width: 960px) {
	.skdi-fields,
	.skdi-choices {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.skdi-half {
		grid-column: 1 / -1;
	}

	.skdi-submit {
		width: 100%;
		margin-top: 2rem;
	}
}

/* --------------------------------------------------------------------------
   QA 10/15 (Scott QA rows 74-83)
   -------------------------------------------------------------------------- */

/* Row 77, home "What We Do": bigger, brush-stroke orange checks, less empty navy. */
.io-expert {
	padding-block: 5rem;
}

.io-expert__box {
	padding-block: 0;
}

.io-expert__box h2 {
	margin-bottom: 2.75rem;
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
}

.io-expert .io-checklist {
	column-gap: 7rem;
	row-gap: 1.375rem;
	font-size: 1.5rem;
	line-height: 36px;
}

.io-expert .io-checklist li {
	gap: 1rem;
	align-items: center;
}

.io-expert .io-checklist li::before {
	width: 38px;
	height: 32px;
	margin-top: 0;
	background: var(--io-orange-bright);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M1.6 18.6c1.3-2.4 4-3.1 6-1.4l6.6 6.1C21 13.4 28.6 5.6 36.4 1.3c1.6-.9 3 .8 1.9 2.3-7.4 8.1-14 17.1-20.4 27.6-1.4 2.3-4.1 2.5-5.6.6L2.4 21.5c-.7-.8-1.2-1.9-.8-2.9z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M1.6 18.6c1.3-2.4 4-3.1 6-1.4l6.6 6.1C21 13.4 28.6 5.6 36.4 1.3c1.6-.9 3 .8 1.9 2.3-7.4 8.1-14 17.1-20.4 27.6-1.4 2.3-4.1 2.5-5.6.6L2.4 21.5c-.7-.8-1.2-1.9-.8-2.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Row 78: a bigger 90-day badge and headline in the warranty sections. */
.io-split .io-feature__logo img,
.io-feature__logo img {
	width: 150px !important;
	margin: 0;
}

.io-split__text:has(.io-feature__logo) h2,
.io-feature--boxed .io-feature__body:has(.io-feature__logo) > h2 {
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
}

/* Row 79, reviews: bigger headline and quotes, names in orange. */
.io-reviews h2 {
	font-size: clamp(2.25rem, 3.8vw, 3.5rem);
	line-height: 1.15;
}

.io-review__quote {
	font-size: 1.125rem;
	line-height: 1.5;
}

.io-review__name {
	color: var(--io-orange-bright);
	font-size: 1.0625rem;
}

/* Row 80, home closing section: shorter, the photo cropped at the waist,
   so the buttons sit over it and less of the legs shows. */
.io-cta:not(.io-cta--page) {
	min-height: max(560px, 38.8889vw) !important;
	padding: max(110px, 7.6389vw) 16px 6rem;
}

.io-cta:not(.io-cta--page) .wp-block-cover__image-background {
	object-position: 50% 12% !important;
}

.io-cta:not(.io-cta--page) .wp-block-buttons {
	margin-top: 2.5rem;
}

/* Rows 74 and 83, Contact: headings in the brand sans, larger; white boxes. */
.io-touch > h2,
.io-form__box > h2 {
	font-family: var(--wp--preset--font-family--body) !important;
	font-variation-settings: normal !important;
	font-size: clamp(2.25rem, 3.6vw, 3.25rem) !important;
	font-weight: 700 !important;
	letter-spacing: 0;
	line-height: 1.15;
}

.io-touch__card,
.io-form__box {
	background: #fff;
}

/* Row 81: the footer number in the brand heading font. */
.io-footer__phone {
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "opsz" 6;
	font-weight: 700;
	letter-spacing: 0.01em;
}

@media (max-width: 600px) {
	.io-expert .io-checklist {
		font-size: 1.1875rem;
		line-height: 30px;
	}

	.io-expert .io-checklist li::before {
		width: 30px;
		height: 26px;
	}

	.io-split .io-feature__logo img,
	.io-feature__logo img {
		width: 112px !important;
	}

	.io-cta:not(.io-cta--page) {
		padding-block: 4rem;
	}
}

/* Client request: every button centred on phones. Most are already full width;
   these two groups were narrower and sat on the left. */
@media (max-width: 600px) {
	.io-hero__buttons {
		width: 100%;
		align-items: center !important;
	}

	.io-split__text .wp-block-buttons {
		justify-content: center;
	}

	/* The warranty FAQ section is full bleed: keep its buttons off the screen edges. */
	.io-faq__buttons {
		padding-inline: var(--io-edge);
	}
}

/* --------------------------------------------------------------------------
   What to Expect: the five steps on one vertical line
   -------------------------------------------------------------------------- */

.io-timeline {
	padding: clamp(4rem, 8vw, 6.5rem) var(--io-edge);
}

.io-timeline__list {
	counter-reset: io-step;
	max-width: 820px;
	margin-inline: auto !important;
}

.io-tstep {
	position: relative;
	padding: 0 0 3.5rem 5.5rem;
	counter-increment: io-step;
}

.io-tstep:last-child {
	padding-bottom: 0;
}

/* The number, and the line down to the next one. */
.io-tstep::before {
	content: counter(io-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--io-orange);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1;
}

.io-tstep::after {
	content: "";
	position: absolute;
	top: 4.25rem;
	bottom: 0.75rem;
	left: calc(1.75rem - 1px);
	width: 2px;
	background: rgba(34, 42, 59, 0.15);
}

.io-tstep:last-child::after {
	display: none;
}

.io-tstep > * {
	margin-block: 0;
}

.io-tstep__title {
	margin: 0.55rem 0 0 !important;
	color: var(--io-navy);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.io-tstep > p {
	margin-top: 1rem !important;
	font-size: 1.125rem;
	line-height: 1.6;
}

.io-tstep .wp-block-buttons {
	margin-top: 1.75rem !important;
}

/* Step 2: what the diagnostic visit includes, in a cream box with an orange
   edge (the section is white). */
.io-tstep__card {
	position: relative;
	z-index: 1; /* above the step line, which it crosses on phones */
	margin-top: 1.75rem !important;
	padding: 2rem 2.25rem;
	border-left: 4px solid var(--io-orange);
	background: var(--io-cream);
}

.io-tstep__card > * {
	margin-block: 0;
}

.io-tstep__card .io-checks {
	gap: 0.875rem;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.5;
}

.io-tstep__card .io-checks li {
	gap: 0.875rem;
}

.io-tstep__card .io-checks li::before {
	width: 24px;
	height: 24px;
	margin-top: 1px;
}

.io-tstep__lead {
	margin-bottom: 1.25rem !important;
	color: var(--io-navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

@media (max-width: 600px) {
	/* Phones: the same line on a narrower left column; the box stays inside
	   the text column, with smaller check boxes. */
	.io-tstep {
		padding: 0 0 2.5rem 3.125rem;
	}

	.io-tstep::before {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.0625rem;
	}

	.io-tstep::after {
		top: 2.875rem;
		bottom: 0.625rem;
		left: calc(1.125rem - 1px);
	}

	.io-tstep__title {
		margin-top: 0.1rem !important;
		font-size: 1.5rem;
	}

	.io-tstep > p {
		font-size: 1rem;
	}

	.io-tstep__card {
		padding: 1.25rem 1rem 1.25rem 1.125rem;
		border-left-width: 3px;
	}

	.io-tstep__card .io-checks {
		gap: 0.625rem;
		font-size: 0.9375rem;
	}

	.io-tstep__card .io-checks li {
		gap: 0.625rem;
	}

	.io-tstep__card .io-checks li::before {
		width: 20px;
		height: 20px;
		margin-top: 1px;
	}

	.io-tstep__lead {
		margin-bottom: 1rem !important;
		font-size: 1rem;
		letter-spacing: 0.01em;
	}

	.io-tstep .wp-block-buttons {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Commercial (10/23): "How Can We Help Your Business?" two options on navy,
   and the What to Expect timeline with its own section title.
   -------------------------------------------------------------------------- */

.io-options {
	padding: clamp(4rem, 8vw, 6.5rem) var(--io-edge);
	color: #fff;
	text-align: center;
}

.io-options > h2 {
	margin: 0 !important;
	color: var(--io-orange-bright);
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	letter-spacing: 0.02em;
	line-height: 1.15;
}

.io-options__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	max-width: 1180px;
	margin: clamp(2.5rem, 4vw, 3.5rem) auto 0 !important;
	text-align: left;
}

.io-option {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: clamp(2rem, 3.5vw, 3rem);
	border-top: 6px solid var(--io-orange-bright);
	background: #fff;
	color: var(--io-navy);
}

.io-option > * {
	margin-block: 0;
}

.io-option__num {
	color: var(--io-orange);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.io-option > h3 {
	margin-top: 0.75rem !important;
	color: var(--io-navy);
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.io-option > p:not(.io-option__num) {
	margin-top: 1rem !important;
	font-size: 1.125rem;
	line-height: 1.6;
}

.io-option > .io-checks {
	gap: 0.75rem;
	margin-top: 1.5rem !important;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.5;
}

.io-option > .io-checks li::before {
	width: 24px;
	height: 24px;
	margin-top: 1px;
}

.io-option > .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 2rem;
}

/* The timeline with a title above the steps (Commercial). */
.io-timeline__title {
	max-width: 820px;
	margin: 0 auto clamp(2.5rem, 4vw, 3.5rem) !important;
	color: var(--io-orange);
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-align: center;
}

@media (max-width: 960px) {
	.io-options__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.io-option > p:not(.io-option__num) {
		font-size: 1rem;
	}

	.io-option > .io-checks {
		font-size: 0.9375rem;
	}

	.io-option .wp-block-button,
	.io-option .wp-block-button__link {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Backflow (10/23): the "Who Needs" checklist and the $199 flat fee card.
   -------------------------------------------------------------------------- */

.io-who .io-checks {
	gap: 0.875rem;
	margin-top: 1.75rem !important;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.45;
}

.io-who .io-checks li::before {
	width: 24px;
	height: 24px;
	margin-top: 1px;
}

.io-who .io-checks + p {
	margin-top: 1.75rem !important;
	font-weight: 600;
}

.io-price {
	padding: clamp(4rem, 8vw, 6.5rem) var(--io-edge);
	color: #fff;
	text-align: center;
}

.io-price > h2 {
	margin: 0 !important;
	color: var(--io-orange-bright);
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	letter-spacing: 0.02em;
	line-height: 1.15;
}

.io-price__card {
	max-width: 760px;
	margin: clamp(2.5rem, 4vw, 3.5rem) auto 0 !important;
	padding: clamp(2rem, 4vw, 3.5rem);
	border-top: 6px solid var(--io-orange-bright);
	background: #fff;
	color: var(--io-navy);
}

.io-price__card > * {
	margin-block: 0;
}

.io-price__amount {
	color: var(--io-orange);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(3.5rem, 7vw, 5.5rem);
	font-weight: 700;
	line-height: 1;
}

.io-price__card > h3 {
	margin-top: 0.75rem !important;
	color: var(--io-navy);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.io-price__lead {
	margin-top: 2rem !important;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 1.125rem;
	font-weight: 700;
	text-align: left;
}

.io-price__card > .io-checks {
	gap: 0.75rem;
	margin-top: 1.25rem !important;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
}

.io-price__card > .io-checks li::before {
	width: 24px;
	height: 24px;
	margin-top: 1px;
}

.io-price__card > .wp-block-buttons {
	justify-content: center;
	margin-top: 2.25rem !important;
}

@media (max-width: 600px) {
	.io-who .io-checks,
	.io-price__card > .io-checks {
		font-size: 0.9375rem;
	}

	.io-price__card .wp-block-button,
	.io-price__card .wp-block-button__link {
		width: 100%;
	}
}

/* Backflow hero: keep the subheadline clear of the photo. */
.io-page-hero__sub {
	max-width: 640px;
}

.io-who .io-checks + p {
	font-size: 1.125rem;
}

/* About/What to Expect comment (10/23): on wide screens the closing photo
   section kept growing with the window (751px tall at 1690, 1138px at 2560)
   and its text floated in a big empty band. Cap the growth. */
.io-cta--page:not(.io-cta--center) {
	min-height: clamp(640px, 44.4444vw, 720px) !important;
}

/* Stacked closing buttons: the same width (a later "width: auto" rule
   left them at their label widths on Backflow). */
.io-cta--page .io-cta__buttons--stack .wp-block-button__link {
	width: 100%;
}

/* The closing sections look the same on every page: one button width, one
   text measure, whatever the labels and copy. */
.io-cta--page .io-cta__buttons--stack {
	min-width: min(100%, 23.5rem);
}

.io-cta--page .io-cta__content > p {
	max-width: 600px;
}