/* apb.css — GENERATED by build_css.py. DO NOT EDIT THIS FILE.
 * Edit a part in /root/apb-scripts/css/ and re-run the script.
 * Parts, in cascade order:
 *   00-mockup-utils.css
 *   00-mockup.css
 *   05-responsive.css
 *   10-bridge.css
 *   20-nav.css
 *   30-form.css
 *   40-newbands.css
 *   50-elementor.css
 */


/* ==================== 00-mockup-utils.css ==================== */
/* the mockups own <style> block, verbatim */
body { margin: 0; background: #F8F1E7; color: #003049; font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
    a { color: #C1121F; text-decoration: none; } a:hover { color: #9E0E18; }
    h1, h2, h3, .display { font-family: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; margin: 0; }
    p { margin: 0; }
    .eyebrow { font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: #C1121F; }
    .pipe-bg { position: absolute; inset: 0; pointer-events: none; }
    .secnum { display: flex; align-items: center; gap: 14px; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; color: #C1121F; }
    .secnum::before { content: ""; display: block; width: 48px; height: 3px; background: #C1121F; }
    .slab { position: absolute; background: #C1121F; transform: skewX(-18deg); }
html { background: #00223A; }

/* ==================== 00-mockup.css ==================== */
/* GENERATED by extract_inline.py. Do not edit.
   One class per distinct inline style across all six mockups.
   229 classes. Re-run the extractor instead of editing. */
.apb-x001{width: 100%; min-width: 1100px; min-height: 100%; background: #F8F1E7; position: relative; overflow: hidden; display: flex; flex-direction: column}
.apb-x002{background: #00223A; color: #D9E4EC; font-size: 13px; display: flex; justify-content: space-between; align-items: center; padding: 8px var(--gut); letter-spacing: 0.02em}
.apb-x003{display: flex; gap: 28px}
.apb-x004{color: #ffffff; font-weight: 600}
.apb-x005{background: #ffffff; border-bottom: 1px solid #E3D5C1; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gut)}
.apb-x006{display: flex; align-items: center}
.apb-x007{height: 76px; width: auto; display: block}
.apb-x008{display: flex; align-items: center; gap: 32px; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: #003049}
.apb-x009{color: inherit}
.apb-x010{background: #C1121F; color: #ffffff; padding: 12px 22px; border-radius: 3px}
.apb-x011{position: relative; background: #00223A; color: #ffffff; overflow: hidden; min-height: 700px; display: flex; align-items: stretch; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 72px)); padding-bottom: 72px}
.apb-x012{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%}
.apb-x013{position: absolute; inset: 0; background: #003049; opacity: 0.55; mix-blend-mode: multiply}
.apb-x014{position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,34,58,0.92) 0%, rgba(0,34,58,0.78) 38%, rgba(0,34,58,0.15) 70%, rgba(0,34,58,0) 100%)}
.apb-x015{position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, rgba(0,34,58,0) 0%, rgba(0,34,58,0.55) 100%)}
.apb-x016{position: relative; display: flex; width: 100%; padding: 96px var(--gut) 88px var(--gut); gap: 48px; align-items: center}
.apb-x017{display: flex; flex-direction: column; gap: 24px; width: 680px; flex-shrink: 0}
.apb-x018{color: #669BBC}
.apb-x019{font-size: 84px; line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance}
.apb-x020{font-weight: 500; color: #D9E4EC}
.apb-x021{font-weight: 800; color: #ffffff}
.apb-x022{font-size: 20px; line-height: 1.5; color: #D9E4EC; max-width: 520px; text-wrap: pretty}
.apb-x023{display: flex; gap: 16px; align-items: center; margin-top: 8px}
.apb-x024{background: #F8F1E7; color: #003049; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 28px; border-radius: 3px}
.apb-x025{border: 2px solid #6B7A88; color: #ffffff; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; padding: 14px 28px; border-radius: 3px}
.apb-x026{display: flex; gap: 32px; margin-top: 12px; font-size: 14px; color: #9FB4C4; letter-spacing: 0.04em}
.apb-x027{position: relative; padding: 96px var(--gut) 80px var(--gut); display: flex; flex-direction: column; gap: 40px; overflow: hidden}
.apb-x028{position: absolute; right: 0; top: 40px; left: auto; fill: #E6DBCB}
.apb-x029{position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px}
.apb-x030{display: flex; flex-direction: column; gap: 12px; max-width: 640px}
.apb-x031{font-size: 52px; line-height: 1; font-weight: 800; text-transform: uppercase}
.apb-x032{font-size: 17px; line-height: 1.55; color: #44525F; max-width: 560px; text-wrap: pretty; margin-top: 8px}
.apb-x033{position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px}
.apb-x034{position: relative; overflow: hidden; background: #ffffff; border: 1px solid #E3D5C1; border-radius: 4px; padding: 32px; display: flex; flex-direction: column; gap: 18px}
.apb-x035{left: 120px; top: -20px; width: 60px; height: 180px; opacity: 0.12}
.apb-x036{position: relative; width: 100%; height: auto; border: 1px solid #E3D5C1; border-radius: 4px}
.apb-x037{font-size: 30px; font-weight: 700; text-transform: uppercase}
.apb-x038{font-size: 16px; line-height: 1.55; color: #44525F}
.apb-x039{font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase}
.apb-x040{background: #ffffff; border-top: 1px solid #E3D5C1; border-bottom: 1px solid #E3D5C1; padding: 88px var(--gut) 96px var(--gut); display: flex; flex-direction: column; gap: 40px}
.apb-x041{display: flex; justify-content: space-between; align-items: flex-end; gap: 48px}
.apb-x042{display: flex; flex-direction: column; gap: 12px; max-width: 680px}
.apb-x043{font-size: 17px; line-height: 1.55; color: #44525F; text-wrap: pretty}
.apb-x044{flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; background: #C1121F; color: #ffffff; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 24px; border-radius: 3px}
.apb-x045{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px}
.apb-x046{display: flex; flex-direction: column; background: #ffffff; border: 1px solid #E3D5C1; border-radius: 4px; overflow: hidden; color: #003049}
.apb-x047{background: #EFE6D9; border-bottom: 1px solid #E3D5C1; padding: 12px; display: flex; justify-content: center}
.apb-x048{width: 100%; max-height: 150px; object-fit: contain; display: block; box-shadow: 0 4px 12px rgba(0,48,73,0.12)}
.apb-x049{padding: 14px 16px 16px 16px; display: flex; flex-direction: column; gap: 6px}
.apb-x050{font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B7A88}
.apb-x051{font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 1.05}
.apb-x052{display: flex; align-items: center; gap: 6px; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #C1121F; margin-top: 4px}
.apb-x053{background: #00223A; color: #ffffff; padding: 140px var(--gut) 140px var(--gut); margin-top: -60px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 40px; clip-path: polygon(0 72px, 100% 0, 100% calc(100% - 72px), 0 100%)}
.apb-x054{position: absolute; right: -40px; top: 30px; left: auto; fill: #0B3D5C}
.apb-x055{position: absolute; left: -20px; bottom: -40px; top: auto; fill: #0B3D5C}
.apb-x056{position: absolute; top: 0; left: 0}
.apb-x057{position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px}
.apb-x058{font-size: 17px; line-height: 1.55; color: #B9CFDF; max-width: 560px; text-wrap: pretty; margin-top: 8px}
.apb-x059{position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px}
.apb-x060{border: 1px solid #2A5A7A; background: rgba(0,48,73,0.82); border-radius: 4px; padding: 18px 20px; display: flex; align-items: center; gap: 12px}
.apb-x061{font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em}
.apb-x062{padding: 60px var(--gut) 96px var(--gut); margin-top: -60px; display: flex; flex-direction: column; gap: 40px}
.apb-x063{display: flex; flex-direction: column; gap: 12px}
.apb-x064{font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase}
.apb-x065{position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px}
.apb-x066{display: flex; flex-direction: column; gap: 14px}
.apb-x067{height: 300px; border-radius: 6px; overflow: hidden; background: #D8C3A5}
.apb-x068{width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block}
.apb-x069{font-size: 24px; font-weight: 700; text-transform: uppercase}
.apb-x070{font-size: 14px; color: #44525F}
.apb-x071{width: 100%; height: 100%; object-fit: cover; display: block}
.apb-x072{position: relative; overflow: hidden; background: #ffffff; border-top: 1px solid #E3D5C1; padding: 88px var(--gut); display: flex; gap: 64px; align-items: center}
.apb-x073{position: absolute; left: auto; right: 24px; top: 16px; fill: #EFE6D9}
.apb-x074{position: relative; display: flex; flex-direction: column; gap: 20px; width: 520px; flex-shrink: 0}
.apb-x075{font-size: 48px; line-height: 1; font-weight: 800; text-transform: uppercase}
.apb-x076{position: relative; flex-grow: 1; height: 160px; display: flex; align-items: center}
.apb-x077{position: absolute; left: 0; right: 0; top: 66px; height: 20px; border-radius: 10px; background: linear-gradient(180deg, #6B7A88 0%, #003049 60%, #1A4A68 100%)}
.apb-x078{position: relative; display: flex; justify-content: space-between; width: 100%}
.apb-x079{display: flex; flex-direction: column; align-items: center; gap: 10px; width: 160px}
.apb-x080{font-size: 26px; font-weight: 800; color: #C1121F}
.apb-x081{width: 18px; height: 18px; border-radius: 50%; background: #C1121F; border: 4px solid #ffffff; box-shadow: 0 0 0 2px #C1121F}
.apb-x082{font-size: 14px; color: #44525F; text-align: center}
.apb-x083{position: relative; overflow: hidden; background: #003049; color: #ffffff; padding: 110px var(--gut) var(--gut) var(--gut); margin-top: -48px; display: flex; justify-content: space-between; align-items: center; gap: 40px; clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%)}
.apb-x084{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%}
.apb-x085{position: absolute; inset: 0; background: #003049; opacity: 0.86; mix-blend-mode: multiply}
.apb-x086{position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,48,73,0.55) 0%, rgba(0,48,73,0.15) 100%)}
.apb-x087{position: relative; display: flex; flex-direction: column; gap: 8px}
.apb-x088{font-size: 44px; line-height: 1; font-weight: 800; text-transform: uppercase}
.apb-x089{font-size: 18px; color: #D9E4EC}
.apb-x090{position: relative; display: flex; gap: 16px; align-items: center}
.apb-x091{background: #C1121F; color: #ffffff; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 28px; border-radius: 3px}
.apb-x092{font-size: 26px; font-weight: 700}
.apb-x093{background: #00223A; color: #9FB4C4; padding: 56px var(--gut) 32px var(--gut); display: flex; flex-direction: column; gap: 40px; font-size: 14px}
.apb-x094{display: flex; justify-content: space-between; gap: 40px}
.apb-x095{display: flex; flex-direction: column; gap: 12px; max-width: 320px}
.apb-x096{margin-bottom: 4px}
.apb-x097{display: inline-block; background: #ffffff; padding: 8px 14px; border-radius: 3px}
.apb-x098{height: 52px; width: auto; display: block}
.apb-x099{line-height: 1.6}
.apb-x100{display: flex; gap: 64px}
.apb-x101{display: flex; flex-direction: column; gap: 10px}
.apb-x102{color: #ffffff; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px}
.apb-x103{border-top: 1px solid #0D3E5C; padding-top: 20px; display: flex; justify-content: space-between; font-size: 12px}
.apb-x104{color: #C1121F; border-bottom: 3px solid #C1121F; padding-bottom: 4px}
.apb-x105{position: relative; background: #00223A; color: #ffffff; overflow: hidden; min-height: 360px; display: flex; align-items: center; justify-content: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px)); padding-bottom: 40px}
.apb-x106{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; opacity: 0.28}
.apb-x107{position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,34,58,0.55) 0%, rgba(0,34,58,0.75) 100%)}
.apb-x108{position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-52%); text-align: center; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 800; font-size: 190px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(233,220,203,0.16); white-space: nowrap; pointer-events: none}
.apb-x109{position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 96px var(--gut) 88px var(--gut); text-align: center}
.apb-x110{font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; color: #669BBC}
.apb-x111{font-size: 84px; line-height: 0.95; font-weight: 800; text-transform: uppercase; color: #ffffff}
.apb-x112{font-size: 18px; line-height: 1.5; color: #D9E4EC; max-width: 620px; text-wrap: pretty}
.apb-x113{position: relative; overflow: hidden; padding: 96px var(--gut) 88px var(--gut); display: flex; gap: 72px; align-items: flex-start}
.apb-x114{position: absolute; right: -30px; top: -20px; left: auto; width: 460px; height: 592px; fill: #EFE6D9}
.apb-x115{position: relative; display: flex; flex-direction: column; gap: 20px; width: 640px; flex-shrink: 0}
.apb-x116{font-size: 17px; line-height: 1.6; color: #44525F; text-wrap: pretty}
.apb-x117{position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; padding-top: 48px}
.apb-x118{display: flex; flex-direction: column; gap: 6px; border-left: 3px solid #C1121F; padding-left: 18px}
.apb-x119{font-size: 44px; font-weight: 800; line-height: 1; color: #003049}
.apb-x120{font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #44525F}
.apb-x121{position: relative; overflow: hidden; background: #ffffff; border-top: 1px solid #E3D5C1; border-bottom: 1px solid #E3D5C1; padding: 88px var(--gut) 96px var(--gut); display: flex; flex-direction: column; gap: 56px}
.apb-x122{display: flex; flex-direction: column; gap: 12px; max-width: 720px}
.apb-x123{position: relative; display: flex; flex-direction: column}
.apb-x124{position: absolute; left: 0; right: 0; top: 62px; height: 22px; border-radius: 11px; background: linear-gradient(180deg, #6B7A88 0%, #003049 60%, #1A4A68 100%)}
.apb-x125{position: absolute; left: 120px; top: 54px; width: 12px; height: 38px; border-radius: 3px; background: #1A4A68}
.apb-x126{position: absolute; right: 120px; top: 54px; width: 12px; height: 38px; border-radius: 3px; background: #1A4A68}
.apb-x127{position: relative; display: flex; justify-content: space-between; gap: 24px}
.apb-x128{display: flex; flex-direction: column; gap: 14px; width: 260px}
.apb-x129{font-size: 40px; font-weight: 800; color: #C1121F; line-height: 1}
.apb-x130{width: 22px; height: 22px; border-radius: 50%; background: #C1121F; border: 5px solid #ffffff; box-shadow: 0 0 0 2px #C1121F}
.apb-x131{font-size: 24px; font-weight: 700; text-transform: uppercase; color: #003049; line-height: 1.05}
.apb-x132{font-size: 15px; line-height: 1.55; color: #44525F}
.apb-x133{position: relative; padding: 96px var(--gut); display: flex; gap: 64px; align-items: center}
.apb-x134{position: relative; flex-shrink: 0; width: 640px; height: 520px; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 48px rgba(0,48,73,0.18)}
.apb-x135{position: absolute; left: 0; bottom: 0; background: #003049; color: #ffffff; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 18px}
.apb-x136{display: flex; flex-direction: column; gap: 20px}
.apb-x137{font-size: 16px; line-height: 1.6; color: #44525F; text-wrap: pretty}
.apb-x138{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; font-size: 16px; color: #003049}
.apb-x139{display: flex; gap: 10px; align-items: center}
.apb-x140{font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px}
.apb-x141{background: #003049; color: #ffffff; padding: 130px var(--gut) 130px var(--gut); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 40px; clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%)}
.apb-x142{position: absolute; right: -40px; top: 30px; left: auto; width: 560px; height: 720px; fill: #0B3D5C}
.apb-x143{font-size: 17px; line-height: 1.55; color: #B9CFDF; max-width: 460px; text-wrap: pretty}
.apb-x144{position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px}
.apb-x145{border: 1px solid #2A5A7A; background: rgba(0,48,73,0.82); border-radius: 4px; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px}
.apb-x146{font-size: 26px; font-weight: 800; text-transform: uppercase; color: #ffffff}
.apb-x147{font-size: 14px; color: #B9CFDF}
.apb-x148{padding: 120px var(--gut) 96px var(--gut); margin-top: -60px; display: flex; flex-direction: column; gap: 32px}
.apb-x149{display: flex; flex-wrap: wrap; gap: 12px}
.apb-x150{border: 1px solid #E3D5C1; background: #ffffff; border-radius: 3px; padding: 10px 16px; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: #003049}
.apb-x151{background: #ffffff; border-top: 1px solid #E3D5C1; padding: 88px var(--gut); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center}
.apb-x152{justify-content: center}
.apb-x153{font-size: 64px; line-height: 1; font-weight: 800; text-transform: uppercase; max-width: 900px; text-wrap: balance}
.apb-x154{font-size: 18px; line-height: 1.55; color: #44525F; max-width: 620px; text-wrap: pretty}
.apb-x155{padding: 88px var(--gut) 72px var(--gut); display: flex; gap: 72px; align-items: flex-start}
.apb-x156{display: flex; flex-direction: column; gap: 16px; width: 560px; flex-shrink: 0}
.apb-x157{display: flex; flex-direction: column; gap: 16px; padding-top: 30px}
.apb-x158{display: flex; gap: 12px; margin-top: 8px}
.apb-x159{border: 2px solid #C1121F; color: #C1121F; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 18px; border-radius: 3px}
.apb-x160{background: #ffffff; border-top: 1px solid #E3D5C1; padding: 96px var(--gut); display: flex; gap: 64px; align-items: flex-start}
.apb-x161{border: 1px solid #E3D5C1; border-radius: 4px; overflow: hidden; background: #F8F1E7}
.apb-x162{position: relative; width: 100%; height: auto}
.apb-x163{height: 300px; border-radius: 6px; overflow: hidden}
.apb-x164{display: flex; flex-direction: column; gap: 18px}
.apb-x165{font-size: 16px; line-height: 1.65; color: #44525F; text-wrap: pretty}
.apb-x166{background: #F8F1E7; border-top: 1px solid #E3D5C1; padding: 96px var(--gut); display: flex; gap: 64px; align-items: flex-start}
.apb-x167{background: #003049; color: #ffffff; padding: 96px var(--gut) 112px var(--gut); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 40px}
.apb-x168{position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px}
.apb-x169{border: 1px solid #2A5A7A; background: rgba(0,48,73,0.82); border-radius: 4px; padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 16px}
.apb-x170{font-size: 24px; font-weight: 700; text-transform: uppercase; color: #ffffff}
.apb-x171{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; opacity: 0.45}
.apb-x172{padding: 96px var(--gut) 88px var(--gut); display: flex; gap: 72px; align-items: flex-start}
.apb-x173{display: flex; flex-direction: column; gap: 20px; width: 640px; flex-shrink: 0}
.apb-x174{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; padding-top: 48px}
.apb-x175{font-size: 17px; line-height: 1.55; color: #44525F; max-width: 460px; text-wrap: pretty}
.apb-x176{display: flex; gap: 24px; align-items: stretch}
.apb-x177{width: 440px; flex-shrink: 0; background: #F8F1E7; border: 1px solid #E3D5C1; border-radius: 4px; padding: 20px; display: flex; align-items: center}
.apb-x178{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; flex-grow: 1}
.apb-x179{display: flex; flex-direction: column; gap: 12px; padding: 28px; background: #ffffff; border: 1px solid #E3D5C1; border-radius: 4px; position: relative}
.apb-x180{font-size: 44px; font-weight: 800; color: #E3D5C1; line-height: 1}
.apb-x181{font-size: 24px; font-weight: 700; text-transform: uppercase; line-height: 1.05}
.apb-x182{background: #003049; color: #ffffff; padding: 96px var(--gut); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 36px}
.apb-x183{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px}
.apb-x184{border: 1px solid #2A5A7A; background: rgba(0,48,73,0.82); border-radius: 4px; padding: 20px; display: flex; align-items: center; gap: 12px}
.apb-x185{font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em}
.apb-x186{padding: 96px var(--gut); display: flex; flex-direction: column; gap: 36px}
.apb-x187{display: flex; justify-content: space-between; align-items: flex-end; gap: 40px}
.apb-x188{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px}
.apb-x189{border-radius: 6px; overflow: hidden; height: 260px}
.apb-x190{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; opacity: 0.3}
.apb-x191{background: #003049; color: #ffffff; padding: 136px var(--gut) 88px var(--gut); margin-top: -40px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 40px; clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%)}
.apb-x192{display: flex; flex-direction: column; gap: 16px}
.apb-x193{font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #8FB6D1}
.apb-x194{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px}
.apb-x195{padding: 88px var(--gut) 96px var(--gut); display: flex; flex-direction: column; gap: 40px}
.apb-x196{height: 260px; border-radius: 6px; overflow: hidden; background: #D8C3A5}
.apb-x197{background: #ffffff; border-top: 1px solid #E3D5C1; border-bottom: 1px solid #E3D5C1; padding: 80px var(--gut); display: flex; flex-direction: column; gap: 40px}
.apb-x198{display: flex; flex-direction: column; gap: 12px; max-width: 700px}
.apb-x199{font-size: 44px; line-height: 1.05; font-weight: 800; text-transform: uppercase}
.apb-x200{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 48px}
.apb-x201{font-size: 30px; font-weight: 800; line-height: 1.05; color: #003049}
.apb-x202{padding: 96px var(--gut); display: flex; gap: 64px; align-items: flex-start}
.apb-x203{display: flex; flex-direction: column; gap: 32px; width: 460px; flex-shrink: 0}
.apb-x204{display: flex; gap: 16px; align-items: flex-start}
.apb-x205{width: 44px; height: 44px; border-radius: 3px; background: #C1121F; display: flex; align-items: center; justify-content: center; flex-shrink: 0}
.apb-x206{display: flex; flex-direction: column; gap: 4px}
.apb-x207{font-size: 22px; font-weight: 700; text-transform: uppercase}
.apb-x208{font-size: 16px; line-height: 1.5; color: #44525F}
.apb-x209{border-top: 1px solid #E3D5C1; padding-top: 24px; display: flex; flex-direction: column; gap: 8px}
.apb-x210{font-size: 20px; font-weight: 700; text-transform: uppercase}
.apb-x211{flex-grow: 1; background: #ffffff; border: 1px solid #E3D5C1; border-radius: 6px; padding: 40px}
.apb-x212{display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px}
.apb-x213{font-size: 30px; font-weight: 800; text-transform: uppercase}
.apb-x214{font-size: 15px; color: #44525F}
.apb-x215{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px}
.apb-x216{display: flex; flex-direction: column; gap: 8px}
.apb-x217{font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #44525F}
.apb-x218{border: 1px solid #E3D5C1; background: #ffffff; border-radius: 3px; padding: 14px 16px; font-size: 16px; color: #6B7A88}
.apb-x219{display: flex; flex-direction: column; gap: 8px; grid-column: span 2}
.apb-x220{border: 1px solid #E3D5C1; background: #ffffff; border-radius: 3px; padding: 14px 16px; font-size: 16px; color: #6B7A88; min-height: 140px}
.apb-x221{border: 2px dashed #E3D5C1; border-radius: 3px; padding: 22px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #6B7A88; font-size: 15px}
.apb-x222{grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px}
.apb-x223{font-size: 13px; color: #6B7A88; max-width: 460px}
.apb-x224{background: #C1121F; color: #ffffff; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 32px; border-radius: 3px}
.apb-x225{position: relative; height: 460px; background: #E9E0D2; overflow: hidden; border-top: 1px solid #E3D5C1; border-bottom: 1px solid #E3D5C1}
.apb-x226{position: absolute; left: 64px; top: 50%; transform: translateY(-50%); background: #ffffff; border: 1px solid #E3D5C1; border-radius: 6px; padding: 24px 28px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 16px 40px rgba(0,48,73,0.12); width: 320px}
.apb-x227{font-size: 24px; font-weight: 800; text-transform: uppercase}
.apb-x228{font-size: 15px; color: #44525F; line-height: 1.5}
.apb-x229{font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px}

/* ==================== 05-responsive.css ==================== */
/* GENERATED by responsive.py from 00-mockup.css + dom-facts.json. Do not edit.
   The mockups carry no media queries at all; this is the whole responsive layer. */

:root{ --gut: 64px; }
@media (max-width: 1227px){ :root{ --gut: 40px; } }
@media (max-width: 1022px){ :root{ --gut: 28px; } }
@media (max-width: 766px){ :root{ --gut: 18px; } }

/* the mockup page wrapper is min-width:1100px, which forces a horizontal
   scrollbar on every phone. There is no content that actually needs it. */
.apb-x001{ min-width: 0 !important; }

@media (max-width: 1023px){
  .apb-x033,.apb-x059,.apb-x065,.apb-x144,.apb-x183,.apb-x188,.apb-x194,.apb-x200{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .apb-x045,.apb-x168{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .apb-x033,.apb-x117,.apb-x138,.apb-x144,.apb-x174,.apb-x178,.apb-x183,.apb-x215{ grid-template-columns: repeat(1, minmax(0,1fr)); }
  .apb-x045,.apb-x059,.apb-x065,.apb-x168,.apb-x188,.apb-x194,.apb-x200{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Fixed-width copy columns unlock, and the flex row that holds one stacks.
   Which rows those are comes from the mockup DOM (dom-facts.json), not from
   guessing at the stylesheet: a flex row is only stacked when it actually
   contains one of these fixed children. */
@media (max-width: 1023px){
  .apb-x017,.apb-x074,.apb-x115,.apb-x134,.apb-x156,.apb-x173,.apb-x177,.apb-x203{ width: 100% !important; flex-shrink: 1 !important; }
  .apb-x016,.apb-x072,.apb-x113,.apb-x133,.apb-x155,.apb-x160,.apb-x166,.apb-x172,.apb-x176,.apb-x202{ flex-direction: column !important; align-items: stretch !important; }
}

/* Headline type. clamp() rather than a breakpoint step, so an 84px hero does
   not jump between sizes as the window is dragged. */
.apb-x108{ font-size: clamp(110px, 13.19vw, 190px); }
.apb-x019,.apb-x111{ font-size: clamp(49px, 5.83vw, 84px); }
.apb-x153{ font-size: clamp(37px, 4.44vw, 64px); }
.apb-x031{ font-size: clamp(30px, 3.61vw, 52px); }
.apb-x075{ font-size: clamp(28px, 3.33vw, 48px); }
.apb-x088,.apb-x119,.apb-x180,.apb-x199{ font-size: clamp(26px, 3.06vw, 44px); }
.apb-x129{ font-size: clamp(23px, 2.78vw, 40px); }

/* Absolutely-positioned decorative pipe artwork is hidden below tablet: it is
   sized in fixed px against a 1440px canvas and has no informational role. */
@media (max-width: 767px){ .pipe-bg{ display:none; } .slab{ display:none; } }

/* Images never exceed their box. The mockups rely on the fixed canvas for this. */
img, svg, video { max-width: 100%; }
img { height: auto; }
/* ...except the ones the mockup positions absolutely to fill a band. */
.apb-x012, .apb-x012 img { max-width: none; height: 100%; }
/* Elementor's `.elementor img{height:auto}` is (0,1,1) and outranks every
   single-class rule below it. These restate the mockup's own sizing at
   (0,2,1) so the photographs fill the boxes they were drawn to fill.
   GENERATED from dom-facts.json: do not hand-edit the class numbers. */
.elementor img.apb-x007, .apb-page img.apb-x007{ height: 76px; max-width: none; }
.elementor img.apb-x012, .apb-page img.apb-x012{ height: 100%; object-fit: cover; object-position: 60% 50%; max-width: none; }
.elementor img.apb-x048, .apb-page img.apb-x048{ max-height: 150px; object-fit: contain; max-width: none; }
.elementor img.apb-x068, .apb-page img.apb-x068{ height: 100%; object-fit: cover; object-position: center 40%; max-width: none; }
.elementor img.apb-x071, .apb-page img.apb-x071{ height: 100%; object-fit: cover; max-width: none; }
.elementor img.apb-x084, .apb-page img.apb-x084{ height: 100%; object-fit: cover; object-position: center 45%; max-width: none; }
.elementor img.apb-x098, .apb-page img.apb-x098{ height: 52px; max-width: none; }
.elementor img.apb-x106, .apb-page img.apb-x106{ height: 100%; object-fit: cover; object-position: 60% 45%; max-width: none; }
.elementor img.apb-x171, .apb-page img.apb-x171{ height: 100%; object-fit: cover; object-position: 60% 45%; max-width: none; }
.elementor img.apb-x190, .apb-page img.apb-x190{ height: 100%; object-fit: cover; object-position: 60% 45%; max-width: none; }


/* ==================== 10-bridge.css ==================== */
/* ============================================================================
   10-bridge.css — mockup <-> WordPress + Elementor reconciliation.

   The mockups were drawn as standalone HTML with a fixed canvas. Dropping that
   markup into WordPress puts it next to a body carrying WP classes, an Elementor
   container tree, and a theme stylesheet. Every rule here exists because one of
   those three collides with something the mockups assume.
   ========================================================================== */

/* -- 1. THE GLOBAL RESETS IN THE MOCKUP'S OWN <style> BLOCK ------------------
   The mockups ship `p{margin:0}` and `h1,h2,h3{margin:0}` because every block in
   them is a flex column with an explicit `gap`. Dropped into WordPress those two
   rules apply to ALL prose, including everything typed into an Elementor text
   widget, and a page of body copy collapses into one solid slab with no paragraph
   breaks. The mockup bands keep the reset (they supply their own gap); anything
   inside editor content gets real spacing back. */
.elementor-widget-text-editor p,
.elementor-widget-theme-post-content p,
.apb-prose p { margin: 0 0 1.15em; }
.elementor-widget-text-editor p:last-child,
.apb-prose p:last-child { margin-bottom: 0; }

.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.apb-prose ul, .apb-prose ol { margin: 0 0 1.15em; padding-left: 1.25em; }
.elementor-widget-text-editor li,
.apb-prose li { margin: 0 0 .45em; }

.elementor-widget-heading h1, .elementor-widget-heading h2,
.elementor-widget-heading h3, .elementor-widget-heading h4 { margin: 0; }

/* -- 2. WORDPRESS BODY CLASSES ----------------------------------------------
   On the roofing build the mockup used `.page` as a wrapper class. WordPress puts
   `class="page"` on the BODY of every page post type, so `.page{overflow:hidden}`
   landed on <body> and killed vertical scrolling sitewide.

   That cannot happen here: extract_inline.py names every generated class
   `apb-x###`, and the four utility classes the mockups define by hand are
   `.eyebrow .secnum .slab .pipe-bg .display`, none of which is a WordPress body
   class. This rule is the belt to that braces: whatever else happens, the body
   scrolls.

   Check for the next clone: page, home, blog, single, archive, search, error404,
   privacy-policy, admin-bar and post-type-* are all WP body classes and all
   plausible mockup class names. */
body { overflow: visible !important; width: auto !important; }

/* -- 3. THE PAGE WRAPPER ----------------------------------------------------
   `.apb-x001` is a flex column that the mockup gave `min-height:100%`, which
   resolves against a parent with no height and collapses. On a short page the
   footer would climb up the viewport. */
.apb-page { min-height: 100vh; }
#main { flex: 1 0 auto; }
.admin-bar .apb-page { min-height: calc(100vh - 32px); }

/* -- 4. ELEMENTOR'S CONTAINERS ----------------------------------------------
   Elementor wraps every section in padding and a max-width of its own. The bands
   already carry the mockup's `padding: N var(--gut)`, so Elementor's adds a second
   gutter inside the first and the content box shrinks by up to 40px a side. */
.apb-el-band > .elementor-container,
.apb-el-band > .e-con-inner { max-width: none; width: 100%; }
.apb-el-band.elementor-section { padding: 0; }
.elementor-widget:not(:last-child) { margin-bottom: 0; }

/* Elementor sets `display:flex` on its own section wrapper. Where the widgetizer
   carries a mockup grid class up onto the section (so descendant selectors keep
   matching), that grid would otherwise become the SECTION'S layout and drop
   Elementor's single container child into cell one. Keep the class, cancel the
   layout role. */
.elementor-section.apb-el-grid,
.elementor-element.apb-el-grid { display: block; }

/* -- 5. IMAGES INSIDE ELEMENTOR WIDGETS -------------------------------------
   There is NO `.elementor-widget-container` inside an image widget on this
   Elementor version; the chain is
   `.elementor-column > .elementor-widget-wrap > .elementor-widget > img`.
   Rules aimed at the container are silent no-ops. */
.elementor-widget-image { line-height: 0; }
.elementor-widget-image img { display: block; width: 100%; height: auto; }

/* In a column-direction flex container a child stretches on the CROSS axis only,
   so `height:auto` leaves the widget wrap at content height and cards in a row
   come out unequal. */
.apb-el-equal .elementor-widget-wrap { flex: 1 1 auto; }

/* -- 6. THEME AND EDITOR BUTTON MARKUP --------------------------------------
   Hello Elementor and the block editor both emit their own button classes. The
   mockup's buttons are plain spans with a background, so anything the theme
   styles underneath shows through as a second, offset button. */
.apb-page .wp-block-button__link,
.apb-page .wp-element-button { all: unset; }

/* -- 7. LINK COLOUR INSIDE DARK BANDS ---------------------------------------
   The mockup sets a global `a{color:#C1121F}`. That red on the navy bands
   (#00223A / #003049) measures 2.8:1 and fails, so prose links on a dark ground
   take the pale blue the mockups already use for text there.

   ONE EXCLUSION LIST, and it is a semantic class rather than a list of generated
   class numbers. The first version of this rule excluded specific button classes
   with :not(), which made it specificity (0,3,1) and silently outranked every
   button colour rule below it: the hero's cream "Request a Quote" button rendered
   cream-on-cream at 1.14:1. Two lists that each looked correct alone and never met,
   which is the same failure mode as a mockup class that stops matching its markup.
   Anything that is a button or a chip carries `.apb-btn` and is out of scope here. */
.apb-x011 a:not(.apb-btn),
.apb-x053 a:not(.apb-btn),
.apb-x083 a:not(.apb-btn),
.apb-x093 a:not(.apb-btn),
.apb-x141 a:not(.apb-btn),
.apb-x167 a:not(.apb-btn),
.apb-x182 a:not(.apb-btn),
.apb-x191 a:not(.apb-btn) { color: #D9E4EC; }
.apb-x011 a:not(.apb-btn):hover,
.apb-x053 a:not(.apb-btn):hover,
.apb-x083 a:not(.apb-btn):hover,
.apb-x093 a:not(.apb-btn):hover,
.apb-x141 a:not(.apb-btn):hover,
.apb-x167 a:not(.apb-btn):hover,
.apb-x182 a:not(.apb-btn):hover,
.apb-x191 a:not(.apb-btn):hover { color: #ffffff; }

/* -- 8. THE MOCKUPS' <span> BUTTONS ARE REAL LINKS HERE ---------------------
   Every call to action in the mockups is a <span>, which has no colour of its own.
   As real anchors they inherit the global red, so a white label on a red pill turned
   red on red. Each restates the colour the mockup drew, at (0,2,0) so it clears the
   dark-band rule above whatever band it lands in.

   Measured, all against their own ground:
     cream #F8F1E7 button, navy #003049 label      12.33:1
     red   #C1121F button, white label              6.22:1
     ghost button, white label on navy             16.28:1   (border #6B7A88, 3.69:1)
     red link #C1121F on cream                      5.55:1 */
a.apb-btn.apb-x010,
a.apb-btn.apb-x091,
a.apb-btn.apb-x224 { color: #ffffff; }
a.apb-btn.apb-x024 { color: #003049; }
a.apb-btn.apb-x025,
a.apb-btn.apb-x092 { color: #ffffff; }
a.apb-btn.apb-x039,
a.apb-btn.apb-x064,
a.apb-btn.apb-x140,
a.apb-btn.apb-x044 { color: #C1121F; }
a.apb-btn.apb-x150,
a.apb-btn.apb-x060,
a.apb-btn.apb-x046 { color: #003049; }

a.apb-btn.apb-x010:hover, a.apb-btn.apb-x091:hover { background: #9E0E18; color: #ffffff; }
a.apb-btn.apb-x024:hover { background: #ffffff; color: #003049; }
a.apb-btn.apb-x025:hover { border-color: #D9E4EC; color: #ffffff; }
a.apb-btn.apb-x092:hover { color: #D9E4EC; }
a.apb-btn.apb-x039:hover, a.apb-btn.apb-x064:hover, a.apb-btn.apb-x140:hover { color: #9E0E18; }
a.apb-btn.apb-x150:hover, a.apb-btn.apb-x060:hover { color: #C1121F; border-color: #C1121F; }
/* A card is a link; the whole tile should lift, not just recolour its text. */
a.apb-btn.apb-x046:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,48,73,.12); }
a.apb-btn.apb-x046 { transition: transform .16s ease, box-shadow .16s ease; }

/* -- 9. FOCUS ---------------------------------------------------------------
   Nothing in the mockups has a focus state at all. */
.apb-page a:focus-visible,
.apb-page button:focus-visible,
.apb-page input:focus-visible,
.apb-page select:focus-visible,
.apb-page textarea:focus-visible,
.apb-page [tabindex]:focus-visible {
  outline: 3px solid #C1121F;
  outline-offset: 2px;
  border-radius: 2px;
}
.apb-x011 a:focus-visible, .apb-x093 a:focus-visible,
.apb-x053 a:focus-visible { outline-color: #FFD166; }

/* -- 10. DECORATIVE ARTWORK IS NOT ANNOUNCED --------------------------------
   The pipe silhouettes and skewed slabs carry no information and measure 1.2:1
   against their ground, which is correct for decoration and wrong for anything a
   screen reader should reach. */
.pipe-bg, .slab { pointer-events: none; }

/* -- 11. PRINT --------------------------------------------------------------
   A quote request is a document a buyer forwards. */
@media print {
  .apb-topbar, .apb-nav, .apb-nav-toggle, .apb-x093 { display: none; }
  .apb-page { min-height: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ==================== 20-nav.css ==================== */
/* ============================================================================
   20-nav.css — header, navigation, dropdowns and the mobile drawer.

   The mockups draw the nav as a flat row of <span>s: no list markup, no dropdown,
   no current-page state, no mobile behaviour at all. Everything below is the part
   a real site needs and a mockup does not.
   ========================================================================== */

/* -- SKIP LINK --------------------------------------------------------------
   WCAG 2.4.1 Bypass Blocks. It is clipped rather than deleted: deleting it takes
   away a keyboard user's only way past a nine-item nav on every page.
   NOTE for verification: a CDP-driven tab has no OS focus, so `:focus` never
   matches and this state cannot be demonstrated from automation. Check the rule
   is in the CSSOM instead of trying to screenshot it. */
.apb-skip {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.apb-skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  width: auto; height: auto; margin: 0; padding: 12px 20px;
  clip: auto; clip-path: none;
  background: #C1121F; color: #ffffff; border-radius: 3px;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* -- TOP BAR ---------------------------------------------------------------- */
.apb-topbar a { color: inherit; }
.apb-topbar a:hover { color: #ffffff; }
@media (max-width: 767px) {
  /* The strapline is a restatement of the nav. At 18px of gutter the address and
     the phone number are what a visitor actually needs. */
  .apb-topbar-strap { display: none; }
  .apb-topbar { font-size: 12px; gap: 10px; }
  .apb-topbar-addr { display: block; }
}
@media (max-width: 479px) {
  /* Below this the address and the number cannot share a line without wrapping
     mid-street. The address moves to the footer, where it is repeated. */
  .apb-topbar-addr { display: none; }
  .apb-topbar { justify-content: center; }
}

/* -- NAV BAR ---------------------------------------------------------------- */
.apb-nav { position: relative; z-index: 60; gap: 24px; }
.apb-logo { flex-shrink: 0; }
.apb-logo img { max-height: 76px; width: auto; }
.apb-logo-txt {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 800; font-size: 28px; text-transform: uppercase; color: #003049;
}

.apb-menu-list {
  display: flex; align-items: center; gap: 28px;
  margin: 0; padding: 0; list-style: none;
}
.apb-menu-list li { position: relative; margin: 0; }
.apb-menu-list a { color: inherit; white-space: nowrap; }
.apb-menu-list a:hover { color: #C1121F; }

/* Current page. The mockups have no state for this and a nine-item nav without
   one leaves a visitor with no idea where they are. */
.apb-menu-list .current-menu-item > a,
.apb-menu-list .current-page-ancestor > a,
.apb-menu-list .current-menu-parent > a { color: #C1121F; }
.apb-menu-list .current-menu-item > a::after,
.apb-menu-list .current-page-ancestor > a::after {
  content: ""; display: block; height: 3px; background: #C1121F; margin-top: 4px;
}

/* -- DROPDOWNS --------------------------------------------------------------
   THE MOCKUPS HAVE NO DROPDOWN CSS, because their nav is a flat list. The real
   Bending and Industries menus have children, so without this the sub-menu
   inherits the parent row's `display:flex` and renders OPEN ON PAGE LOAD, laid
   across the top-level row. That exact bug shipped on the roofing build.

   The links stay in the DOM either way, so crawlers and answer engines still see
   them (spec 7: no interaction-gated content). */
.apb-menu-list .sub-menu {
  position: absolute; top: 100%; left: -16px; z-index: 70;
  display: block; min-width: 248px; margin: 0; padding: 10px 0;
  list-style: none; background: #ffffff;
  border: 1px solid #E3D5C1; border-top: 3px solid #C1121F; border-radius: 0 0 4px 4px;
  box-shadow: 0 18px 36px rgba(0,48,73,.16);
  font-size: 16px; letter-spacing: .03em;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.apb-menu-list li:hover > .sub-menu,
.apb-menu-list li:focus-within > .sub-menu,
.apb-menu-list li.is-open > .sub-menu {
  opacity: 1; visibility: visible; transform: none;
}
.apb-menu-list .sub-menu a {
  display: block; padding: 9px 20px; white-space: normal; text-transform: none;
  font-family: 'Barlow', Arial, sans-serif; font-weight: 500; color: #003049;
}
.apb-menu-list .sub-menu a:hover,
.apb-menu-list .sub-menu a:focus-visible { background: #F8F1E7; color: #C1121F; }

/* The walker's disclosure button. Visible only where hover is not the input. */
.apb-menu-list .sub-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px 10px;
}
.apb-menu-list .sub-toggle::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
}
.apb-menu-list li.is-open > .sub-toggle::before { transform: rotate(-135deg) translate(-2px,-2px); }

.apb-quote { flex-shrink: 0; margin-left: 4px; }

/* -- THE TOGGLE AND THE DRAWER ----------------------------------------------
   A deliberate addition: the mockups simply stop working below 1100px. */
.apb-nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 42px; padding: 0 9px;
  background: #00223A; border: 0; border-radius: 3px; cursor: pointer;
}
.apb-nav-toggle span { display: block; height: 2px; background: #ffffff; border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
.apb-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.apb-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apb-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The breakpoint is measured, not chosen. The nav needs the logo (~260px) plus
   nine uppercase items at 18px plus the quote pill, which stops fitting a little
   over 1100px. The roofing build gated a rule at 1180px and it never fired,
   because a maximised MacBook window is 1176px of viewport. */
@media (max-width: 1120px) {
  .apb-nav-toggle { display: flex; }
  .apb-menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 65;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gut) 20px;
    background: #ffffff; border-bottom: 1px solid #E3D5C1;
    box-shadow: 0 20px 40px rgba(0,48,73,.14);
    display: none;
  }
  .apb-nav.is-open .apb-menu { display: flex; }
  .apb-menu-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .apb-menu-list li { border-bottom: 1px solid #F0E6D6; }
  .apb-menu-list > li > a { display: block; padding: 14px 0; }
  .apb-menu-list .current-menu-item > a::after,
  .apb-menu-list .current-page-ancestor > a::after { display: none; }

  /* In the drawer a sub-menu is a static block, not a hover popover: there is no
     hover on a touch screen and `:hover` on tap leaves it stuck open. */
  .apb-menu-list .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; margin: 0 0 8px; padding: 0 0 0 16px;
    border: 0; border-left: 3px solid #E3D5C1; border-radius: 0;
    box-shadow: none; background: transparent;
    display: none;
  }
  .apb-menu-list li.is-open > .sub-menu { display: block; }
  .apb-menu-list .sub-toggle {
    display: block; position: absolute; top: 4px; right: 0; color: #003049;
  }
  .apb-quote { margin: 14px 0 0; text-align: center; }
}

/* A hoverless pointer gets the disclosure button at every width, because there is
   nothing for `li:hover` to fire on. */
@media (hover: none) {
  .apb-menu-list .sub-toggle { display: block; }
  .apb-menu-list li:hover > .sub-menu { opacity: 0; visibility: hidden; }
  .apb-menu-list li.is-open > .sub-menu { opacity: 1; visibility: visible; }
}

/* No-JS: the drawer cannot open, so the nav stays a wrapped row rather than
   disappearing behind a button that does nothing. */
html:not(.apb-js) .apb-nav-toggle { display: none; }
@media (max-width: 1120px) {
  html:not(.apb-js) .apb-menu { position: static; display: flex; box-shadow: none; padding: 0 0 12px; }
}

/* ==================== 30-form.css ==================== */
/* ============================================================================
   30-form.css — the quote form, styled to the contact mockup.

   The mockup draws the form as static <div>s standing in for fields, so none of
   it is a real control. These rules put the mockup's look onto the real inputs
   the shortcode renders, with two measured corrections.
   ========================================================================== */

/* -- MEASURED CORRECTION 1 --------------------------------------------------
   The mockup's field border is `#E3D5C1`, which measures 1.44:1 against the white
   card. WCAG 1.4.11 requires 3:1 for the boundary of a UI component, so as drawn
   the fields are effectively invisible to anyone with low contrast sensitivity.

   The replacement is `#6B7A88` at 4.41:1, which is NOT a new colour: it is the
   slate the mockups already use for the ghost button's 2px border, so the form
   still reads as part of the same design.

   The tan stays on the CARD and on section rules. Those are decorative container
   boundaries, not control boundaries, and 1.4.11 does not reach them. */

/* -- MEASURED CORRECTION 2 --------------------------------------------------
   Placeholder text `#6B7A88` measures 4.41:1 on white, just under the 4.5 needed
   for body text. Darkened to `#5D6B78` (5.47:1), the smallest step that passes. */

.formcard {
  flex-grow: 1; background: #ffffff;
  border: 1px solid #E3D5C1; border-radius: 6px; padding: 40px;
}
.formcard > h2 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 30px; font-weight: 800; text-transform: uppercase;
  line-height: 1; margin: 0 0 6px;
}
.formcard .sub { font-size: 15px; color: #44525F; line-height: 1.55; margin: 0 0 24px; }
.form-req { font-size: 13px; color: #44525F; margin: 0 0 16px; }

.apb-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 24px; }
.apb-form .frow { display: contents; }
.apb-form .field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.apb-form .field-full,
.apb-form .form-consent,
.apb-form .form-privacy,
.apb-form .form-notice,
.apb-form .form-req,
.apb-form > button,
.apb-form .hint-foot { grid-column: 1 / -1; }

.apb-form label {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; color: #44525F;
}
.apb-form input[type="text"],
.apb-form input[type="tel"],
.apb-form input[type="email"],
.apb-form select,
.apb-form textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid #6B7A88; background: #ffffff; border-radius: 3px;
  padding: 14px 16px; font-size: 16px; font-family: inherit; color: #003049;
  /* 16px is not a style choice: iOS Safari zooms the whole page on focus for
     anything smaller, and the page never zooms back out. */
}
.apb-form textarea { min-height: 140px; resize: vertical; }
.apb-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #44525F 50%),
                    linear-gradient(135deg, #44525F 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.apb-form ::placeholder { color: #5D6B78; opacity: 1; }
.apb-form input:focus, .apb-form select:focus, .apb-form textarea:focus {
  border-color: #C1121F; outline: 2px solid #C1121F; outline-offset: 0;
}

/* The drawing attachment. The mockup draws a dashed drop zone; a real
   <input type="file"> is kept underneath it because a custom drop zone that
   replaces the input loses keyboard operation and the file name announcement. */
.apb-file input[type="file"] {
  width: 100%; box-sizing: border-box;
  border: 2px dashed #6B7A88; border-radius: 3px;
  padding: 20px; font-size: 15px; color: #44525F; background: #ffffff; cursor: pointer;
}
.apb-file input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 9px 16px; cursor: pointer;
  border: 0; border-radius: 3px; background: #00223A; color: #ffffff;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 14px;
}

.apb-form .hint { font-size: 13px; color: #44525F; line-height: 1.5; }
.apb-form .form-consent { font-size: 14px; color: #003049; margin: 4px 0 0; }
.apb-form .form-consent label {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: 'Barlow', Arial, sans-serif; font-weight: 400; font-size: 14px;
  letter-spacing: 0; text-transform: none; color: #003049; line-height: 1.5;
}
.apb-form .form-consent input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; accent-color: #C1121F; }
.apb-form .form-privacy { font-size: 13px; color: #44525F; margin: 0; }

.apb-form button[type="submit"], .btn-red {
  justify-self: start;
  background: #C1121F; color: #ffffff; border: 0; cursor: pointer;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
  padding: 16px 32px; border-radius: 3px;
}
.apb-form button[type="submit"]:hover, .btn-red:hover { background: #9E0E18; }

.form-notice {
  display: flex; flex-direction: column; gap: 4px;
  border-left: 4px solid #2F7A4F; background: #EEF6F1;
  padding: 16px 18px; border-radius: 3px; font-size: 15px; color: #123D27;
}
.form-notice-err { border-left-color: #C1121F; background: #FBEDEE; color: #6B0A12; }
.form-notice strong { font-weight: 600; }

.hint-foot { font-size: 14px; color: #44525F; margin: 4px 0 0; }

@media (max-width: 767px) {
  .formcard { padding: 24px 20px; }
  .apb-form { grid-template-columns: 1fr; }
  .apb-form .field, .apb-form .field-full { grid-column: 1 / -1; }
  .apb-form button[type="submit"] { justify-self: stretch; text-align: center; }
}

/* ==================== 40-newbands.css ==================== */
/* ============================================================================
   40-newbands.css — the bands the mockups never drew.

   Six mockups cover home, about, types of bends, one service page, industries and
   contact. The page list runs to fifty pages, so an FAQ hub, a gallery, hub card
   grids, breadcrumbs, a review band and long-form prose all had to be designed.

   Everything below is built from the mockups' own vocabulary: the 40px/6px offset
   card, the 1px #E3D5C1 rule, the red 3px accent under a Barlow Condensed label, and
   the two grounds (#F8F1E7 cream, #ffffff white). No new colour is introduced.
   ========================================================================== */

/* -- prose ------------------------------------------------------------------ */
.apb-prose { max-width: 760px; }
.apb-prose p { font-size: 17px; line-height: 1.65; color: #44525F; margin: 0 0 1.1em; }
.apb-prose p:last-child { margin-bottom: 0; }
.apb-prose h3 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 26px; font-weight: 700; text-transform: uppercase;
  color: #003049; margin: 1.6em 0 .5em; line-height: 1.1;
}
.apb-prose ul, .apb-prose ol { margin: 0 0 1.1em; padding-left: 1.25em; color: #44525F; font-size: 17px; line-height: 1.65; }
.apb-prose li { margin: 0 0 .4em; }
.apb-prose strong { color: #003049; font-weight: 600; }
/* A band with no photograph falls back to full-width copy, so the measure has to
   come from somewhere other than the missing column. */
.apb-nomedia .apb-x136 { max-width: 820px; }

/* -- breadcrumbs ------------------------------------------------------------ */
.apb-crumbs { padding: 18px var(--gut) 0; background: #F8F1E7; }
.apb-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.apb-crumbs li + li::before { content: "/"; margin-right: 8px; color: #6B7A88; }
.apb-crumbs a { color: #44525F; }
.apb-crumbs a:hover { color: #C1121F; }
.apb-crumbs [aria-current] { color: #003049; font-weight: 600; }

/* -- FAQ --------------------------------------------------------------------
   <details>/<summary> is deliberate: the answer is in the delivered HTML whether
   the panel is open or shut, so an answer engine that does not run JavaScript still
   reads all of it (spec 7). Nothing here is interaction-gated. */
.apb-faq-list { display: flex; flex-direction: column; gap: 0; max-width: 900px; }
.apb-faq { border-bottom: 1px solid #E3D5C1; }
.apb-faq:first-child { border-top: 1px solid #E3D5C1; }
.apb-faq-q { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; }
.apb-faq-q::-webkit-details-marker { display: none; }
.apb-faq-q h3 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.2; color: #003049; margin: 0;
}
.apb-faq-q:hover h3 { color: #C1121F; }
/* One glyph that rotates into a cross, never a separate minus: rotating a minus
   gives a diagonal slash, which is what the roofing build's accordion did. */
.apb-faq-q::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 16px;
  margin-top: -8px;
  background:
    linear-gradient(#C1121F, #C1121F) center/16px 2px no-repeat,
    linear-gradient(#C1121F, #C1121F) center/2px 16px no-repeat;
  transition: transform .18s ease;
}
.apb-faq[open] .apb-faq-q::after { transform: rotate(45deg); }
.apb-faq-a { padding: 0 48px 24px 0; }
.apb-faq-a p { font-size: 16px; line-height: 1.65; color: #44525F; margin: 0 0 .9em; }
.apb-faq-a p:last-child { margin-bottom: 0; }

/* -- reviews ----------------------------------------------------------------
   The stars measure 3.14:1 on white, below the 4.5 text threshold. They are
   `aria-hidden` inside a container that carries the rating as text in its
   aria-label, so the 3:1 graphical-object threshold is the one that applies. */
.apb-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.apb-review {
  margin: 0; padding: 28px; background: #ffffff;
  border: 1px solid #E3D5C1; border-radius: 4px;
  display: flex; flex-direction: column; gap: 14px;
}
.apb-stars { color: #D9A441; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.apb-review blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: #003049; }
.apb-review blockquote::before { content: '\201C'; }
.apb-review blockquote::after { content: '\201D'; }
.apb-review figcaption {
  margin-top: auto; display: flex; flex-direction: column; gap: 2px;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: 15px; color: #003049;
}
.apb-review-src { font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 13px; color: #44525F; }
.apb-review-context { border-top: 1px solid #E3D5C1; padding-top: 12px; font-size: 15px; color: #44525F; }
.apb-review-context strong {
  display: block; margin-bottom: 4px; color: #C1121F;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; font-size: 13px;
}
@media (max-width: 1023px) { .apb-review-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px)  { .apb-review-grid { grid-template-columns: 1fr; } }

/* -- hub link cards ---------------------------------------------------------
   The mockups' card language: white ground, tan rule, and the red accent arriving
   on hover rather than a colour change that would drop the text below 4.5:1. */
.apb-linkcards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.apb-linkcard {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 26px 24px; background: #ffffff; color: #003049;
  border: 1px solid #E3D5C1; border-top: 3px solid #E3D5C1; border-radius: 4px;
  transition: border-top-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.apb-linkcard:hover, .apb-linkcard:focus-visible {
  border-top-color: #C1121F; box-shadow: 0 14px 30px rgba(0,48,73,.10); transform: translateY(-2px);
  color: #003049;
}
.apb-linkcard h3 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1.12; margin: 0;
}
.apb-linkcard p { font-size: 15px; line-height: 1.55; color: #44525F; margin: 0; }
.apb-linkcard-go {
  margin-top: auto; padding-top: 6px;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #C1121F;
}
/* 3+1 leaves an orphan, so a grid of exactly four drops to two columns. 5 reads
   3+2 and 6 reads 3+3, both of which are fine. Gated at 981px so it never fights
   the single-column rule that takes over below it. */
@media (min-width: 981px) {
  .apb-linkcards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1023px) { .apb-linkcards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px)  { .apb-linkcards { grid-template-columns: 1fr; } }

/* -- gallery ---------------------------------------------------------------- */
.apb-gal-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 24px; }
.apb-gal-bar button {
  border: 1px solid #E3D5C1; background: #ffffff; color: #003049; cursor: pointer;
  padding: 9px 18px; border-radius: 3px;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
}
.apb-gal-bar button:hover { border-color: #6B7A88; }
.apb-gal-bar button.is-active { background: #00223A; border-color: #00223A; color: #ffffff; }
.apb-gal-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.apb-gal-grid figure {
  margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid #E3D5C1; border-radius: 4px; background: #E9E0D2;
}
.apb-gal-grid figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apb-gal-grid figure[hidden] { display: none; }
@media (max-width: 1023px) { .apb-gal-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 767px)  { .apb-gal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* -- the map band ----------------------------------------------------------- */
.apb-map-frame { display: block; width: 100%; border: 0; }

/* -- the diagram strip without its downloads --------------------------------
   [VERIFY 17]. With `downloads` off the cards are <div>s, not <a>s, so the hover
   lift and the pointer would both be lying about what happens on click. */
.apb-band-diagrams div.apb-x046 { cursor: default; }
.apb-band-diagrams div.apb-x046:hover { transform: none; box-shadow: none; }

/* ==================== 50-elementor.css ==================== */
/* ============================================================================
   50-elementor.css — the native-widget bands.

   Prose bands are composed from real Elementor widgets (Heading, Text Editor,
   Button) so a client can edit them in the Elementor UI. Those widgets render
   Elementor's own markup, which knows nothing about the mockups, so this file
   dresses them in the same design language as the HTML bands beside them.

   Every selector here is at least (0,1,1), because Elementor's frontend stylesheet
   sits at that specificity and loads after apb.css. A single-class rule loses.
   ========================================================================== */

/* -- the prose band itself -------------------------------------------------- */
.apb-band-prose.elementor-section { display: block; }
.apb-band-prose-cream { background: #F8F1E7; }
.apb-band-prose-white { background: #ffffff; border-top: 1px solid #E3D5C1; border-bottom: 1px solid #E3D5C1; }
.apb-band-prose > .elementor-container > .elementor-column.apb-prose,
.apb-band-prose .elementor-column.apb-prose {
  padding: 88px var(--gut) 96px;
  max-width: 900px;
}
/* An Elementor column is a flex item that stretches by default; the prose column has
   to keep its measure and sit left rather than filling the band. */
.apb-band-prose > .elementor-container { justify-content: flex-start; }

/* -- headings --------------------------------------------------------------- */
/* The mockup's section heading is `.apb-x031`: 52px, weight 800, uppercase, in
   Barlow Condensed. The Elementor kit supplies the family and the weight but has no
   control for text-transform or for the tight leading, so both are restated here.
   Sized with the same clamp() the generated responsive layer gives .apb-x031, so a
   prose heading and a band heading shrink together rather than drifting apart. */
.apb-band-prose .elementor-widget-heading h2,
.apb-band-prose .elementor-heading-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(30px, 3.61vw, 52px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: #003049;
  margin: 0 0 18px;
  max-width: 760px;
}
.apb-band-prose .elementor-widget-heading h3,
.apb-band-prose h3.elementor-heading-title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
  margin: 36px 0 10px;
}
.apb-band-prose .elementor-widget-heading { margin-bottom: 0; }

/* -- body copy -------------------------------------------------------------- */
.apb-band-prose .elementor-widget-text-editor {
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #44525F;
  max-width: 760px;
}
.apb-band-prose .elementor-widget-text-editor p { margin: 0 0 1.1em; }
.apb-band-prose .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.apb-band-prose .elementor-widget-text-editor strong { color: #003049; font-weight: 600; }
.apb-band-prose .elementor-widget-text-editor a { color: #C1121F; text-decoration: underline; text-underline-offset: 2px; }
.apb-band-prose .elementor-widget-text-editor a:hover { color: #9E0E18; }
.apb-band-prose .elementor-widget-text-editor + .elementor-widget-heading { margin-top: 10px; }

/* -- the button widget ------------------------------------------------------
   `.apb-x140` is the mockup's text link with a red underline rule, not a filled
   button, so the Elementor button chrome is removed rather than restyled.
   Elementor puts the widget's own classes on the WRAPPER, not on the anchor
   (widgets take `_css_classes`, columns take `css_classes`, and both fail silently
   if swapped), so the wrapper's flex centring has to be neutralised too or the link
   sits centred in its own column. */
.apb-band-prose .elementor-widget-button { margin-top: 26px; text-align: left; }
.apb-band-prose .elementor-widget-button .elementor-button {
  background: none; border: 0; border-radius: 0; padding: 0;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase;
  color: #C1121F;
  border-bottom: 2px solid #C1121F; padding-bottom: 3px;
}
.apb-band-prose .elementor-widget-button .elementor-button:hover { color: #9E0E18; border-bottom-color: #9E0E18; }
.apb-band-prose .elementor-widget-button .elementor-button-content-wrapper { display: inline; }

/* -- the HTML-band sections ------------------------------------------------- */
/* The mockup bands already paint edge to edge and carry their own gutter, so
   Elementor's container must not add a second one. */
.apb-el-band > .elementor-container,
.apb-el-band > .e-con-inner { max-width: none; width: 100%; }
.apb-el-band > .elementor-container > .elementor-column { padding: 0; }
.apb-el-band .elementor-widget-html { line-height: normal; }

/* -- the [VERIFY] notice on a draft page ------------------------------------
   Deliberately loud. A draft page that looks finished is a page somebody
   publishes by accident. */
.apb-verify-note { background: #FBEDEE; border-top: 4px solid #C1121F; border-bottom: 1px solid #E3D5C1; }
.apb-verify-note p {
  max-width: 900px; margin: 0; padding: 26px 0;
  font-size: 16px; line-height: 1.6; color: #6B0A12;
}
.apb-verify-note strong { color: #C1121F; }

/* -- the sitemap ------------------------------------------------------------ */
.apb-sitemap { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 36px 40px; }
.apb-sitemap h2 { color: #C1121F; margin: 0 0 12px; font-size: 13px; }
.apb-sitemap ul { list-style: none; margin: 0; padding: 0; }
.apb-sitemap li { margin: 0 0 7px; font-size: 16px; }
.apb-sitemap a { color: #003049; }
.apb-sitemap a:hover { color: #C1121F; }
@media (max-width: 1023px) { .apb-sitemap { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px)  { .apb-sitemap { grid-template-columns: 1fr; } }