/* Evidence-derived deployed CSS recipe. First observed route: /contact/ */ /* linked:fe0dc9a7e6b270849f3dfe5f35a2e560__q_1dfc3aa87230.css */ img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}:root{--wp--preset--aspect-ratio--square:1;--wp--preset--aspect-ratio--4-3:4/3;--wp--preset--aspect-ratio--3-4:3/4;--wp--preset--aspect-ratio--3-2:3/2;--wp--preset--aspect-ratio--2-3:2/3;--wp--preset--aspect-ratio--16-9:16/9;--wp--preset--aspect-ratio--9-16:9/16;--wp--preset--color--black:#000000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#ffffff;--wp--preset--color--pale-pink:#f78da7;--wp--preset--color--vivid-red:#cf2e2e;--wp--preset--color--luminous-vivid-orange:#ff6900;--wp--preset--color--luminous-vivid-amber:#fcb900;--wp--preset--color--light-green-cyan:#7bdcb5;--wp--preset--color--vivid-green-cyan:#00d084;--wp--preset--color--pale-cyan-blue:#8ed1fc;--wp--preset--color--vivid-cyan-blue:#0693e3;--wp--preset--color--vivid-purple:#9b51e0;--wp--preset--color--contrast:var(--contrast);--wp--preset--color--contrast-2:var(--contrast-2);--wp--preset--color--contrast-3:var(--contrast-3);--wp--preset--color--base:var(--base);--wp--preset--color--base-2:var(--base-2);--wp--preset--color--base-3:var(--base-3);--wp--preset--color--accent:var(--accent);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small:13px;--wp--preset--font-size--medium:20px;--wp--preset--font-size--large:36px;--wp--preset--font-size--x-large:42px;--wp--preset--spacing--20:0.44rem;--wp--preset--spacing--30:0.67rem;--wp--preset--spacing--40:1rem;--wp--preset--spacing--50:1.5rem;--wp--preset--spacing--60:2.25rem;--wp--preset--spacing--70:3.38rem;--wp--preset--spacing--80:5.06rem;--wp--preset--shadow--natural:6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep:12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp:6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined:6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp:6px 6px 0px rgb(0, 0, 0)}.wp-block-button{--wp--preset--dimension--25:25%;--wp--preset--dimension--50:50%;--wp--preset--dimension--75:75%;--wp--preset--dimension--100:100%}:where(body){margin:0}:where(.is-layout-flex){gap:.5em}:where(.is-layout-grid){gap:.5em}body .is-layout-flex{display:flex}.is-layout-flex{flex-wrap:wrap;align-items:center}.is-layout-flex>:is(*,div){margin:0}body .is-layout-grid{display:grid}.is-layout-grid>:is(*,div){margin:0}body{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0}:root :where(.wp-element-button,.wp-block-button__link){background-color:#32373c;border-width:0;color:#fff;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;padding-top:calc(0.667em + 2px);padding-right:calc(1.333em + 2px);padding-bottom:calc(0.667em + 2px);padding-left:calc(1.333em + 2px);text-decoration:none;text-transform:inherit}.has-black-color{color:var(--wp--preset--color--black)!important}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray)!important}.has-white-color{color:var(--wp--preset--color--white)!important}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink)!important}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red)!important}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange)!important}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber)!important}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan)!important}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan)!important}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue)!important}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue)!important}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple)!important}.has-contrast-color{color:var(--wp--preset--color--contrast)!important}.has-contrast-2-color{color:var(--wp--preset--color--contrast-2)!important}.has-contrast-3-color{color:var(--wp--preset--color--contrast-3)!important}.has-base-color{color:var(--wp--preset--color--base)!important}.has-base-2-color{color:var(--wp--preset--color--base-2)!important}.has-base-3-color{color:var(--wp--preset--color--base-3)!important}.has-accent-color{color:var(--wp--preset--color--accent)!important}.has-black-background-color{background-color:var(--wp--preset--color--black)!important}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray)!important}.has-white-background-color{background-color:var(--wp--preset--color--white)!important}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink)!important}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red)!important}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange)!important}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber)!important}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan)!important}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan)!important}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue)!important}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue)!important}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple)!important}.has-contrast-background-color{background-color:var(--wp--preset--color--contrast)!important}.has-contrast-2-background-color{background-color:var(--wp--preset--color--contrast-2)!important}.has-contrast-3-background-color{background-color:var(--wp--preset--color--contrast-3)!important}.has-base-background-color{background-color:var(--wp--preset--color--base)!important}.has-base-2-background-color{background-color:var(--wp--preset--color--base-2)!important}.has-base-3-background-color{background-color:var(--wp--preset--color--base-3)!important}.has-accent-background-color{background-color:var(--wp--preset--color--accent)!important}.has-black-border-color{border-color:var(--wp--preset--color--black)!important}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray)!important}.has-white-border-color{border-color:var(--wp--preset--color--white)!important}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink)!important}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red)!important}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange)!important}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber)!important}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan)!important}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan)!important}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue)!important}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue)!important}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple)!important}.has-contrast-border-color{border-color:var(--wp--preset--color--contrast)!important}.has-contrast-2-border-color{border-color:var(--wp--preset--color--contrast-2)!important}.has-contrast-3-border-color{border-color:var(--wp--preset--color--contrast-3)!important}.has-base-border-color{border-color:var(--wp--preset--color--base)!important}.has-base-2-border-color{border-color:var(--wp--preset--color--base-2)!important}.has-base-3-border-color{border-color:var(--wp--preset--color--base-3)!important}.has-accent-border-color{border-color:var(--wp--preset--color--accent)!important}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple)!important}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan)!important}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange)!important}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red)!important}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray)!important}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum)!important}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple)!important}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux)!important}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk)!important}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean)!important}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass)!important}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight)!important}.has-small-font-size{font-size:var(--wp--preset--font-size--small)!important}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium)!important}.has-large-font-size{font-size:var(--wp--preset--font-size--large)!important}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large)!important}/* font-face omitted from distributable package *//* font-face omitted from distributable package *//* font-face omitted from distributable package *//* font-face omitted from distributable package *//* font-face omitted from distributable package *//* font-face omitted from distributable package *//* font-face omitted from distributable package *//* font-face omitted from distributable package *//* font-face omitted from distributable package *//* font-face omitted from distributable package *//* font-face omitted from distributable package */#latest,#latest button,#latest input,#latest select,#latest textarea,.masthead,.masthead button,.masthead a:not(.brand),.fi-news-form{font-family:"DM Sans","FI DM Sans Fallback",Arial,sans-serif}#latest .section-kicker,#latest .fi-cat-badge,#latest .fi-cat-badge-sm,#latest .meta,#latest .byline{font-family:"IBM Plex Mono","FI IBM Plex Mono Fallback",Consolas,"Liberation Mono",monospace}#latest h1,#latest h2,#latest h3{font-family:"Fraunces","FI Fraunces Fallback",Georgia,serif}.single-post .entry-content,.single-post .entry-content p,.single-post .entry-content li{font-family:"Source Serif 4","FI Source Serif Fallback",Georgia,serif}blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0;border:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}progress{vertical-align:baseline}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}body,button,input,select,textarea{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;text-transform:none;font-size:17px;line-height:1.5}p{margin-bottom:1.5em}h1,h2,h3,h4,h5,h6{font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit}pre{background:rgb(0 0 0 / .05);font-family:inherit;font-size:inherit;line-height:normal;margin-bottom:1.5em;padding:20px;overflow:auto;max-width:100%}blockquote{border-left:5px solid rgb(0 0 0 / .05);padding:20px;font-size:1.2em;font-style:italic;margin:0 0 1.5em;position:relative}blockquote p:last-child{margin:0}table,td,th{border:1px solid rgb(0 0 0 / .1)}table{border-collapse:separate;border-spacing:0;border-width:1px 0 0 1px;margin:0 0 1.5em;width:100%}td,th{padding:8px}th{border-width:0 1px 1px 0}td{border-width:0 1px 1px 0}hr{background-color:rgb(0 0 0 / .1);border:0;height:1px;margin-bottom:40px;margin-top:40px}fieldset{padding:0;border:0;min-width:inherit}fieldset legend{padding:0;margin-bottom:1.5em}h1{font-size:42px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h2{font-size:35px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h3{font-size:29px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h4{font-size:24px}h5{font-size:20px}h4,h5,h6{margin-bottom:20px}ol,ul{margin:0 0 1.5em 3em}ul{list-style:disc}ol{list-style:decimal}li>ol,li>ul{margin-bottom:0;margin-left:1.5em}dt{font-weight:700}dd{margin:0 1.5em 1.5em}b,strong{font-weight:700}cite,dfn,em,i{font-style:italic}address{margin:0 0 1.5em}code,kbd,tt,var{font:15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{text-decoration:none}sub,sup{font-size:75%;height:0;line-height:0;position:relative;vertical-align:baseline}sup{bottom:1ex}sub{top:.5ex}small{font-size:75%}big{font-size:125%}figure{margin:0}table{margin:0 0 1.5em;width:100%}th{font-weight:700}img{height:auto;max-width:100%}button,input[type=button],input[type=reset],input[type=submit]{background:#55555e;color:#fff;border:1px solid #fff0;cursor:pointer;-webkit-appearance:button;padding:10px 20px}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{border:1px solid;border-radius:0;padding:10px 15px;max-width:100%}textarea{width:100%}a,button,input{transition:color .1s ease-in-out,background-color .1s ease-in-out}a{text-decoration:none}.button,.wp-block-button .wp-block-button__link{padding:10px 20px;display:inline-block}.wp-block-button .wp-block-button__link{font-size:inherit;line-height:inherit}.using-mouse :focus{outline:0}.using-mouse ::-moz-focus-inner{border:0}.alignleft{float:left;margin-right:1.5em}.alignright{float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin:0 auto}.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail{max-width:100%;height:auto}.no-sidebar .entry-content .alignfull{margin-left:calc(-100vw / 2 + 100% / 2);margin-right:calc(-100vw / 2 + 100% / 2);max-width:100vw;width:auto}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgb(0 0 0 / .6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}#primary[tabindex="-1"]:focus{outline:0}.main-navigation{z-index:100;padding:0;clear:both;display:block}.main-navigation a{display:block;text-decoration:none;font-weight:400;text-transform:none;font-size:15px}.main-navigation ul{list-style:none;margin:0;padding-left:0}.main-navigation .main-nav ul li a{padding-left:20px;padding-right:20px;line-height:60px}.inside-navigation{position:relative}.main-navigation .inside-navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}.main-navigation .main-nav>ul{display:flex;flex-wrap:wrap;align-items:center}.main-navigation li{position:relative}.main-navigation .menu-bar-items{display:flex;align-items:center;font-size:15px}.main-navigation .menu-bar-items a{color:inherit}.main-navigation .menu-bar-item{position:relative}.main-navigation .menu-bar-item.search-item{z-index:20}.main-navigation .menu-bar-item>a{padding-left:20px;padding-right:20px;line-height:60px}.sidebar .main-navigation .main-nav{flex-basis:100%}.sidebar .main-navigation .main-nav>ul{flex-direction:column}.sidebar .main-navigation .menu-bar-items{margin:0 auto}.sidebar .main-navigation .menu-bar-items .search-item{order:10}.nav-align-center .inside-navigation{justify-content:center}.nav-align-center .main-nav>ul{justify-content:center}.nav-align-right .inside-navigation{justify-content:flex-end}.main-navigation ul ul{display:block;box-shadow:1px 1px 0 rgb(0 0 0 / .1);float:left;position:absolute;left:-99999px;opacity:0;z-index:99999;width:200px;text-align:left;top:auto;transition:opacity 80ms linear;transition-delay:0s;pointer-events:none;height:0;overflow:hidden}.main-navigation ul ul a{display:block}.main-navigation ul ul li{width:100%}.main-navigation .main-nav ul ul li a{line-height:normal;padding:10px 20px;font-size:14px}.main-navigation .main-nav ul li.menu-item-has-children>a{padding-right:0;position:relative}.main-navigation.sub-menu-left ul ul{box-shadow:-1px 1px 0 rgb(0 0 0 / .1)}.main-navigation.sub-menu-left .sub-menu{right:0}.main-navigation:not(.toggled) ul li.sfHover>ul,.main-navigation:not(.toggled) ul li:hover>ul{left:auto;opacity:1;transition-delay:150ms;pointer-events:auto;height:auto;overflow:visible}.main-navigation:not(.toggled) ul ul li.sfHover>ul,.main-navigation:not(.toggled) ul ul li:hover>ul{left:100%;top:0}.main-navigation.sub-menu-left:not(.toggled) ul ul li.sfHover>ul,.main-navigation.sub-menu-left:not(.toggled) ul ul li:hover>ul{right:100%;left:auto}.nav-float-right .main-navigation ul ul ul{top:0}.menu-item-has-children .dropdown-menu-toggle{display:inline-block;height:100%;clear:both;padding-right:20px;padding-left:10px}.menu-item-has-children ul .dropdown-menu-toggle{padding-top:10px;padding-bottom:10px;margin-top:-10px}.sidebar .menu-item-has-children .dropdown-menu-toggle,nav ul ul .menu-item-has-children .dropdown-menu-toggle{float:right}.widget-area .main-navigation li{float:none;display:block;width:100%;padding:0;margin:0}.sidebar .main-navigation.sub-menu-right ul li.sfHover ul,.sidebar .main-navigation.sub-menu-right ul li:hover ul{top:0;left:100%}.sidebar .main-navigation.sub-menu-left ul li.sfHover ul,.sidebar .main-navigation.sub-menu-left ul li:hover ul{top:0;right:100%}.site-main .comment-navigation,.site-main .post-navigation,.site-main .posts-navigation{margin:0 0 2em;overflow:hidden}.site-main .post-navigation{margin-bottom:0}.paging-navigation .nav-next,.paging-navigation .nav-previous{display:none}.paging-navigation .nav-links>*{padding:0 5px}.paging-navigation .nav-links .current{font-weight:700}.nav-links>:first-child{padding-left:0}.site-header{position:relative}.inside-header{padding:20px 40px}.main-title{margin:0;font-size:25px;line-height:1.2em;word-wrap:break-word;font-weight:700;text-transform:none}.site-description{margin:0;line-height:1.5;font-weight:400;text-transform:none;font-size:15px}.site-logo{display:inline-block;max-width:100%}.site-header .header-image{vertical-align:middle}.inside-header{display:flex;align-items:center}.header-widget{margin-left:auto}.header-widget p:last-child{margin-bottom:0}.nav-float-right .header-widget{margin-left:20px}.nav-float-right #site-navigation{margin-left:auto}.nav-float-left #site-navigation{margin-right:auto;order:-10}.nav-float-left .header-widget{margin-left:0;margin-right:20px;order:-15}.header-aligned-center:not([class*=nav-float-]) .inside-header{justify-content:center;flex-direction:column;text-align:center}.header-aligned-center:not([class*=nav-float-]) .header-widget{margin-left:auto;margin-right:auto}.header-aligned-center:not([class*=nav-float-]) .inside-header>:not(:first-child){margin-top:1em}.header-aligned-right:not([class*=nav-float-]) .inside-header{justify-content:flex-end}.header-aligned-right:not([class*=nav-float-]) .header-widget{margin-right:auto;margin-left:0;order:-10}.site-branding-container{display:inline-flex;align-items:center;text-align:left;flex-shrink:0}.site-branding-container .site-logo{margin-right:1em}.sticky{display:block}.entry-header .gp-icon,.posted-on .updated{display:none}.byline,.entry-header .cat-links,.entry-header .comments-link,.entry-header .tags-links,.group-blog .byline,.single .byline{display:inline}footer.entry-meta .byline,footer.entry-meta .posted-on{display:block}.entry-content:not(:first-child),.entry-summary:not(:first-child),.page-content:not(:first-child){margin-top:2em}.page-links{clear:both;margin:0 0 1.5em}.archive .format-aside .entry-header,.archive .format-status .entry-header,.archive .format-status .entry-meta,.archive .format-status .entry-title,.blog .format-aside .entry-header,.blog .format-status .entry-header,.blog .format-status .entry-meta,.blog .format-status .entry-title{display:none}.archive .format-aside .entry-content,.archive .format-status .entry-content,.blog .format-aside .entry-content,.blog .format-status .entry-content{margin-top:0}.archive .format-status .entry-content p:last-child,.blog .format-status .entry-content p:last-child{margin-bottom:0}.entry-header,.site-content{word-wrap:break-word}.entry-title{margin-bottom:0}.author .page-header .page-title{display:flex;align-items:center}.author .page-header .avatar{margin-right:20px}.page-header .author-info>:last-child,.page-header>:last-child{margin-bottom:0}.entry-meta{font-size:85%;margin-top:.5em;line-height:1.5}footer.entry-meta{margin-top:2em}.cat-links,.comments-link,.tags-links{display:block}.entry-content>p:last-child,.entry-summary>p:last-child,.page-content>p:last-child,.read-more-container,.taxonomy-description p:last-child{margin-bottom:0}.wp-caption{margin-bottom:1.5em;max-width:100%;position:relative}.wp-caption img[class*=wp-image-]{display:block;margin:0 auto 0;max-width:100%}.wp-caption .wp-caption-text{font-size:75%;padding-top:5px;opacity:.8}.wp-caption img{position:relative;vertical-align:bottom}.wp-block-image figcaption{font-size:13px;text-align:center}.wp-block-gallery,ul.blocks-gallery-grid{margin-left:0}.wp-block-gallery .blocks-gallery-image figcaption,.wp-block-gallery .blocks-gallery-item figcaption{background:rgb(255 255 255 / .7);color:#000;padding:10px;box-sizing:border-box}.gallery{margin-bottom:1.5em}.gallery-item{display:inline-block;text-align:center;vertical-align:top;width:100%}.gallery-columns-2 .gallery-item{max-width:50%}.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery-columns-4 .gallery-item{max-width:25%}.gallery-columns-5 .gallery-item{max-width:20%}.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery-caption{display:block}.site-main .gallery{margin-bottom:1.5em}.gallery-item img{vertical-align:bottom}.gallery-icon{padding:5px}embed,iframe,object{max-width:100%}.wp-block-post-template{margin-left:0}.widget-area .widget{padding:40px}.widget select{max-width:100%}.footer-widgets .widget :last-child,.sidebar .widget :last-child{margin-bottom:0}.widget-title{margin-bottom:30px;font-size:20px;line-height:1.5;font-weight:400;text-transform:none}.widget ol,.widget ul{margin:0}.widget .search-field{width:100%}.widget .search-form{display:flex}.widget .search-form button.search-submit{font-size:15px}.footer-widgets .widget{margin-bottom:30px}.footer-widgets .widget:last-child,.sidebar .widget:last-child{margin-bottom:0}.widget ul li{list-style-type:none;position:relative;margin-bottom:.5em}.widget ul li ul{margin-left:1em;margin-top:.5em}.wp-calendar-table{table-layout:fixed}.site-content{display:flex}.grid-container{margin-left:auto;margin-right:auto;max-width:1200px}.page-header,.sidebar .widget,.site-main>*{margin-bottom:20px}.both-left .inside-left-sidebar,.both-right .inside-left-sidebar{margin-right:10px}.both-left .inside-right-sidebar,.both-right .inside-right-sidebar{margin-left:10px}.one-container.both-right .site-main,.one-container.right-sidebar .site-main{margin-right:40px}.one-container.both-left .site-main,.one-container.left-sidebar .site-main{margin-left:40px}.one-container.both-sidebars .site-main{margin:0 40px 0 40px}.one-container.archive .post:not(:last-child):not(.is-loop-template-item),.one-container.blog .post:not(:last-child):not(.is-loop-template-item){padding-bottom:40px}.one-container .site-content{padding:40px}.separate-containers .comments-area,.separate-containers .inside-article,.separate-containers .page-header,.separate-containers .paging-navigation{padding:40px}.separate-containers .site-main{margin:20px}.separate-containers.no-sidebar .site-main{margin-left:0;margin-right:0}.separate-containers.both-right .site-main,.separate-containers.right-sidebar .site-main{margin-left:0}.separate-containers.both-left .site-main,.separate-containers.left-sidebar .site-main{margin-right:0}.separate-containers .inside-left-sidebar,.separate-containers .inside-right-sidebar{margin-top:20px;margin-bottom:20px}.inside-page-header{padding:40px}.widget-area .main-navigation{margin-bottom:20px}.one-container .site-main>:last-child,.separate-containers .site-main>:last-child{margin-bottom:0}.full-width-content .container.grid-container{max-width:100%}.full-width-content.no-sidebar.separate-containers .site-main{margin:0}.full-width-content.one-container .site-content,.full-width-content.separate-containers .inside-article{padding:0}.full-width-content .entry-content .alignwide{margin-left:0;width:auto;max-width:unset}.contained-content.one-container .site-content,.contained-content.separate-containers .inside-article{padding:0}.sidebar .grid-container{max-width:100%;width:100%}.both-left .is-left-sidebar,.both-sidebars .is-left-sidebar,.left-sidebar .sidebar{order:-10}.both-left .is-right-sidebar{order:-5}.both-right .is-left-sidebar{order:5}.both-right .is-right-sidebar,.both-sidebars .is-right-sidebar{order:10}.inside-site-info{display:flex;align-items:center;justify-content:center;padding:20px 40px}.site-info{text-align:center;font-size:15px}.post-image:not(:first-child){margin-top:2em}.featured-image{line-height:0}.separate-containers .featured-image{margin-top:20px}.separate-containers .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.one-container .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.gp-icon{display:inline-flex;align-self:center}.gp-icon svg{height:1em;width:1em;top:.125em;position:relative;fill:currentColor}.close-search .icon-search svg:first-child,.icon-menu-bars svg:nth-child(2),.icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:first-child{display:none}.close-search .icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:nth-child(2){display:block}.entry-meta .gp-icon{margin-right:.6em;opacity:.7}nav.toggled .icon-arrow-left svg{transform:rotate(-90deg)}nav.toggled .icon-arrow-right svg{transform:rotate(90deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon svg{transform:rotate(180deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-left svg{transform:rotate(-270deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-right svg{transform:rotate(270deg)}.container.grid-container{width:auto}.menu-toggle,.mobile-bar-items,.sidebar-nav-mobile{display:none}.menu-toggle{padding:0 20px;line-height:60px;margin:0;font-weight:400;text-transform:none;font-size:15px;cursor:pointer}.menu-toggle .mobile-menu{padding-left:3px}.menu-toggle .gp-icon+.mobile-menu{padding-left:9px}.menu-toggle .mobile-menu:empty{display:none}button.menu-toggle{background-color:#fff0;flex-grow:1;border:0;text-align:center}button.menu-toggle:active,button.menu-toggle:focus,button.menu-toggle:hover{background-color:#fff0}.has-menu-bar-items button.menu-toggle{flex-grow:0}nav.toggled ul ul.sub-menu{width:100%}.toggled .menu-item-has-children .dropdown-menu-toggle{padding-left:20px}.main-navigation.toggled .main-nav{flex-basis:100%;order:3}.main-navigation.toggled .main-nav>ul{display:block}.main-navigation.toggled .main-nav li{width:100%;text-align:left}.main-navigation.toggled .main-nav ul ul{transition:0s;visibility:hidden;box-shadow:none;border-bottom:1px solid rgb(0 0 0 / .05)}.main-navigation.toggled .main-nav ul ul li:last-child>ul{border-bottom:0}.main-navigation.toggled .main-nav ul ul.toggled-on{position:relative;top:0;left:auto!important;right:auto!important;width:100%;pointer-events:auto;height:auto;opacity:1;display:block;visibility:visible;float:none}.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle{float:right}.mobile-menu-control-wrapper{display:none;margin-left:auto;align-items:center}.has-inline-mobile-toggle #site-navigation.toggled{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search .nav-search-active{position:relative}.has-inline-mobile-toggle #site-navigation.has-active-search .navigation-search input{outline:auto}.nav-float-left .mobile-menu-control-wrapper{order:-10;margin-left:0;margin-right:auto;flex-direction:row-reverse}@media (max-width:768px){.hide-on-mobile{display:none!important}a,body,button,input,select,textarea{transition:all 0s ease-in-out}.inside-header{flex-direction:column;text-align:center}.site-header .header-widget{margin-top:1.5em;margin-left:auto;margin-right:auto;text-align:center}.site-content{flex-direction:column}.container .site-content .content-area{width:auto}.is-left-sidebar.sidebar,.is-right-sidebar.sidebar{width:auto;order:initial}.is-left-sidebar+.is-right-sidebar .inside-right-sidebar{margin-top:0}.both-left .inside-left-sidebar,.both-left .inside-right-sidebar,.both-right .inside-left-sidebar,.both-right .inside-right-sidebar{margin-right:0;margin-left:0}#main{margin-left:0;margin-right:0}body:not(.no-sidebar) #main{margin-bottom:0}.alignleft,.alignright{float:none;display:block;margin-left:auto;margin-right:auto}.comment .children{padding-left:10px;margin-left:0}.entry-meta{font-size:inherit}.entry-meta a{line-height:1.8em}}@media (min-width:769px) and (max-width:1024px){.hide-on-tablet{display:none!important}}@media (min-width:1025px){.hide-on-desktop{display:none!important}}body{background-color:var(--base-2);color:var(--contrast)}a{color:var(--accent)}a{text-decoration:underline}.entry-title a,.site-branding a,a.button,.wp-block-button__link,.main-navigation a{text-decoration:none}a:hover,a:focus,a:active{color:var(--contrast)}.wp-block-group__inner-container{max-width:1200px;margin-left:auto;margin-right:auto}:root{--contrast:#222222;--contrast-2:#575760;--contrast-3:#b2b2be;--base:#f0f0f0;--base-2:#f7f8f9;--base-3:#ffffff;--accent:#1e73be}:root .has-contrast-color{color:var(--contrast)}:root .has-contrast-background-color{background-color:var(--contrast)}:root .has-contrast-2-color{color:var(--contrast-2)}:root .has-contrast-2-background-color{background-color:var(--contrast-2)}:root .has-contrast-3-color{color:var(--contrast-3)}:root .has-contrast-3-background-color{background-color:var(--contrast-3)}:root .has-base-color{color:var(--base)}:root .has-base-background-color{background-color:var(--base)}:root .has-base-2-color{color:var(--base-2)}:root .has-base-2-background-color{background-color:var(--base-2)}:root .has-base-3-color{color:var(--base-3)}:root .has-base-3-background-color{background-color:var(--base-3)}:root .has-accent-color{color:var(--accent)}:root .has-accent-background-color{background-color:var(--accent)}.top-bar{background-color:#636363;color:#fff}.top-bar a{color:#fff}.top-bar a:hover{color:#303030}.site-header{background-color:var(--base-3)}.main-title a,.main-title a:hover{color:var(--contrast)}.site-description{color:var(--contrast-2)}.mobile-menu-control-wrapper .menu-toggle,.mobile-menu-control-wrapper .menu-toggle:hover,.mobile-menu-control-wrapper .menu-toggle:focus,.has-inline-mobile-toggle #site-navigation.toggled{background-color:rgb(0 0 0 / .02)}.main-navigation,.main-navigation ul ul{background-color:var(--base-3)}.main-navigation .main-nav ul li a,.main-navigation .menu-toggle,.main-navigation .menu-bar-items{color:var(--contrast)}.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover>a,.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus>a,.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"])>a,.main-navigation .menu-bar-item:hover>a,.main-navigation .menu-bar-item.sfHover>a{color:var(--accent)}button.menu-toggle:hover,button.menu-toggle:focus{color:var(--contrast)}.main-navigation .main-nav ul li[class*="current-menu-"]>a{color:var(--accent)}.navigation-search input[type="search"],.navigation-search input[type="search"]:active,.navigation-search input[type="search"]:focus,.main-navigation .main-nav ul li.search-item.active>a,.main-navigation .menu-bar-items .search-item.active>a{color:var(--accent)}.main-navigation ul ul{background-color:var(--base)}.separate-containers .inside-article,.separate-containers .comments-area,.separate-containers .page-header,.one-container .container,.separate-containers .paging-navigation,.inside-page-header{background-color:var(--base-3)}.entry-title a{color:var(--contrast)}.entry-title a:hover{color:var(--contrast-2)}.entry-meta{color:var(--contrast-2)}.sidebar .widget{background-color:var(--base-3)}.footer-widgets{background-color:var(--base-3)}.site-info{background-color:var(--base-3)}input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],textarea,select{color:var(--contrast);background-color:var(--base-2);border-color:var(--base)}input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="number"]:focus,textarea:focus,select:focus{color:var(--contrast);background-color:var(--base-2);border-color:var(--contrast-3)}button,html input[type="button"],input[type="reset"],input[type="submit"],a.button,a.wp-block-button__link:not(.has-background){color:#fff;background-color:#55555e}button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,a.button:hover,button:focus,html input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,a.button:focus,a.wp-block-button__link:not(.has-background):active,a.wp-block-button__link:not(.has-background):focus,a.wp-block-button__link:not(.has-background):hover{color:#fff;background-color:#3f4047}a.generate-back-to-top{background-color:rgb(0 0 0 / .4);color:#fff}a.generate-back-to-top:hover,a.generate-back-to-top:focus{background-color:rgb(0 0 0 / .6);color:#fff}:root{--gp-search-modal-bg-color:var(--base-3);--gp-search-modal-text-color:var(--contrast);--gp-search-modal-overlay-bg-color:rgba(0,0,0,0.2)}@media (max-width:768px){.main-navigation .menu-bar-item:hover>a,.main-navigation .menu-bar-item.sfHover>a{background:none;color:var(--contrast)}}.nav-below-header .main-navigation .inside-navigation.grid-container,.nav-above-header .main-navigation .inside-navigation.grid-container{padding:0 20px 0 20px}.site-main .wp-block-group__inner-container{padding:40px}.separate-containers .paging-navigation{padding-top:20px;padding-bottom:20px}.entry-content .alignwide,body:not(.no-sidebar) .entry-content .alignfull{margin-left:-40px;width:calc(100% + 80px);max-width:calc(100% + 80px)}.rtl .menu-item-has-children .dropdown-menu-toggle{padding-left:20px}.rtl .main-navigation .main-nav ul li.menu-item-has-children>a{padding-right:20px}@media (max-width:768px){.separate-containers .inside-article,.separate-containers .comments-area,.separate-containers .page-header,.separate-containers .paging-navigation,.one-container .site-content,.inside-page-header{padding:30px}.site-main .wp-block-group__inner-container{padding:30px}.inside-top-bar{padding-right:30px;padding-left:30px}.inside-header{padding-right:30px;padding-left:30px}.widget-area .widget{padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px}.footer-widgets-container{padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px}.inside-site-info{padding-right:30px;padding-left:30px}.entry-content .alignwide,body:not(.no-sidebar) .entry-content .alignfull{margin-left:-30px;width:calc(100% + 60px);max-width:calc(100% + 60px)}.one-container .site-main .paging-navigation{margin-bottom:20px}}.is-right-sidebar{width:30%}.is-left-sidebar{width:30%}.site-content .content-area{width:100%}@media (max-width:768px){.main-navigation .menu-toggle,.sidebar-nav-mobile:not(#sticky-placeholder){display:block}.main-navigation ul,.gen-sidebar-nav,.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav>ul,.has-inline-mobile-toggle #site-navigation .inside-navigation>*:not(.navigation-search):not(.main-nav){display:none}.nav-align-right .inside-navigation,.nav-align-center .inside-navigation{justify-content:space-between}.has-inline-mobile-toggle .mobile-menu-control-wrapper{display:flex;flex-wrap:wrap}.has-inline-mobile-toggle .inside-header{flex-direction:row;text-align:left;flex-wrap:wrap}.has-inline-mobile-toggle .header-widget,.has-inline-mobile-toggle #site-navigation{flex-basis:100%}.nav-float-left .has-inline-mobile-toggle #site-navigation{order:10}}.footer__heading{margin:0 0 .75rem;font:700 .75rem/1.2 "IBM Plex Mono",Consolas,"Liberation Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#f5f1e8}.entry-content .callout-box .callout-label,.entry-content .callout-label{color:#4b300e!important}.inside-article a[rel="category tag"],.cat-links a,.entry-meta a{color:#553610!important;text-decoration-thickness:2px;text-underline-offset:2px}.cat--oxide,.fi-cat-badge.cat--oxide,.fi-cat-badge-sm.cat--oxide{background:#f2c66f!important;color:#1a1712!important;border-color:#9a6726!important}#nav-below a,.post-navigation a,.nav-previous a,.nav-next a{display:flex;align-items:center;min-height:44px;padding:12px 14px;color:#4b300e!important;text-decoration-thickness:2px;text-underline-offset:2px}.footer .fi-news-form button,.fi-news-form button{min-height:44px}body:not(.fi-tpl-2026-08) :is(.footer .fi-news-form button,.fi-news-form button){background:#f5c56d!important;color:#1a1712!important;border-color:#f5c56d!important}.entry-content a:not(.button):not(.btn){text-decoration-thickness:2px;text-underline-offset:2px}body:not(.fi-tpl-2026-08) .entry-content a:not(.button):not(.btn){color:#553610}body.home .frontpage article.lead-story h2.card__title a,body.home .frontpage .secondary article.sec-item h3 a{color:#f5f1e8!important;text-decoration:none!important}body.home .frontpage article.lead-story h2.card__title a:hover,body.home .frontpage .secondary article.sec-item h3 a:hover{color:#f8d58b!important}.fi-form-assurance{display:grid;gap:.45rem;margin:0 0 1rem;padding:1rem 1.1rem;border:1px solid rgb(201 149 80 / .58);background:linear-gradient(135deg,rgb(201 149 80 / .12),rgb(31 58 95 / .10));color:var(--ink,#f5f1e8)}.fi-form-assurance strong{font-family:var(--ui,"DM Sans",sans-serif);font-size:.95rem}.fi-form-assurance span{font-family:var(--ui,"DM Sans",sans-serif);font-size:.9rem;line-height:1.55;color:var(--muted,#c9c0b2)}.fi-form-notice{margin:0 0 1.25rem;padding:1.2rem 1.3rem;border:2px solid;background:#1f1a14;color:#f5f1e8;box-shadow:0 12px 34px rgb(0 0 0 / .22)}.fi-form-notice--status{border-color:#6f9aa9;background:linear-gradient(135deg,#17242a,#1f1a14)}.fi-form-notice--error{border-color:#d98577;background:linear-gradient(135deg,#2b1916,#1f1a14)}.fi-form-notice__eyebrow{margin:0 0 .4rem!important;font:600 .72rem/1.2 var(--mono,"IBM Plex Mono",monospace)!important;letter-spacing:.13em;text-transform:uppercase;color:#e3ad62!important}.fi-form-notice h2{margin:0 0 .55rem;font-size:clamp(1.45rem,3vw,2rem)}.fi-form-notice p,.fi-form-notice li,.fi-form-notice a{color:#f5f1e8!important}.fi-form-notice a{text-decoration-thickness:2px;text-underline-offset:.18em}.fi-form-notice__reference code{padding:.18rem .36rem;border:1px solid rgb(245 241 232 / .28);color:#f5f1e8;background:rgb(0 0 0 / .2)}.fi-form-error-list{margin:.8rem 0 0;padding-left:1.25rem}.fi-form-card [aria-invalid="true"]{border-color:#e38b7c!important;box-shadow:0 0 0 2px rgb(227 139 124 / .25)!important}.fi-form-card[aria-busy="true"]{opacity:.86}.fi-form-submit:disabled{cursor:wait;opacity:.72}@media(max-width:700px){.fi-form-assurance,.fi-form-notice{padding:1rem}}.hero__figure--investigator{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-end;min-height:430px;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgb(201 149 80 / .14),transparent 58%)}.fi-investigator-hero{display:block;width:auto!important;max-width:100%!important;height:420px!important;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 30px rgb(0 0 0 / .28))}.hero__figure--investigator .hero__figcap{width:100%;margin-top:-12px;position:relative}.fi-coverage-grid .fi-service-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;min-height:235px;border-color:rgb(201 149 80 / .24);transition:transform .2s ease,border-color .2s ease,background .2s ease}.fi-coverage-grid .fi-service-card:hover,.fi-coverage-grid .fi-service-card:focus-visible{transform:translateY(-3px);border-color:rgb(201 149 80 / .68);background:rgb(201 149 80 / .07);color:inherit}.fi-coverage-grid .fi-service-card h3{color:var(--paper)}.fi-coverage-grid .fi-card-link{display:block;margin-top:auto;padding-top:18px;color:var(--brass-text);font:600 11px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.duo-block .fi-lead-image{width:100%;height:100%;object-fit:cover;display:block}.fi-investigator-portrait{display:grid;grid-template-columns:minmax(240px,380px) minmax(220px,1fr);align-items:center;gap:clamp(28px,6vw,72px);margin:40px 0;padding:clamp(24px,4vw,48px);border:1px solid rgb(201 149 80 / .32);background:radial-gradient(circle at 23% 42%,rgb(201 149 80 / .14),transparent 48%),rgb(255 255 255 / .018)}.fi-investigator-portrait img{display:block;width:100%;max-height:500px;object-fit:contain}.fi-investigator-portrait figcaption{font:400 clamp(18px,2.2vw,25px)/1.55 var(--font-serif);color:var(--paper)}.fi-investigator-portrait figcaption strong{display:block;margin-bottom:10px;color:var(--brass-text);font-family:var(--font-display);font-size:clamp(24px,3vw,38px)}.fi-hub-page{max-width:1120px;margin:0 auto;padding-bottom:72px}.fi-hub-lede{max-width:820px;margin:0 auto 54px;text-align:center}.fi-hub-lede h2{font-size:clamp(34px,5vw,62px);margin:8px 0 20px}.fi-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 64px;background:rgb(201 149 80 / .25);border:1px solid rgb(201 149 80 / .25)}.fi-proof-grid article{padding:28px 24px;background:var(--ink)}.fi-proof-grid h3{font-size:22px;margin:10px 0 12px}.fi-proof-grid p{margin:0;color:var(--muted)}.fi-casefile-card,.fi-hub-cta{display:flex;align-items:center;justify-content:space-between;gap:36px;margin:54px 0;padding:clamp(28px,5vw,56px);border:1px solid rgb(201 149 80 / .38);background:linear-gradient(135deg,rgb(201 149 80 / .11),rgb(255 255 255 / .018))}.fi-casefile-card>div,.fi-hub-cta>div{max-width:760px}.fi-casefile-card h2,.fi-hub-cta h2{margin:5px 0 14px;font-size:clamp(28px,4vw,44px)}.fi-evidence-list{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0;padding:0;list-style:none;color:var(--brass-text);font:600 11px/1.5 var(--font-mono);letter-spacing:.05em;text-transform:uppercase}.fi-hub-section{margin:64px 0}.fi-process-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid rgb(201 149 80 / .28)}.fi-process-list li{display:grid;grid-template-columns:58px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid rgb(201 149 80 / .18)}.fi-process-list li>span,.fi-conversation-grid>div>span{color:var(--brass-text);font:600 12px/1.4 var(--font-mono)}.fi-process-list h3{margin:0 0 6px}.fi-process-list p{margin:0;color:var(--muted)}.fi-conversation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:24px}.fi-conversation-grid>div{padding:26px;border:1px solid rgb(201 149 80 / .24);background:rgb(255 255 255 / .018)}.fi-conversation-grid h3{margin:12px 0 8px;font-size:21px}.fi-conversation-grid p{margin:0;color:var(--muted)}.fi-industry-empty .site-main .no-results{display:none!important}.fi-industry-empty-state{margin:28px 0 70px;padding:clamp(28px,5vw,56px);border:1px solid rgb(201 149 80 / .35);background:linear-gradient(145deg,rgb(201 149 80 / .09),rgb(255 255 255 / .015))}.fi-industry-empty-state>h2{font-size:clamp(30px,4vw,48px);max-width:760px;margin:8px 0 14px}.fi-industry-empty-state>p{max-width:820px}.fi-industry-empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:32px 0}.fi-industry-empty-grid .card{padding:24px}.fi-industry-empty-grid h3{font-size:22px}.fi-industry-empty-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px}.fi-text-link{margin-left:auto;color:var(--brass-text)}.archive .posted-on .updated,.blog .posted-on .updated{display:none!important}.archive .posted-on .published,.blog .posted-on .published{display:inline!important}.fi-list-sidecard--dispatch .fi-news-form{display:grid;gap:10px}.fi-list-sidecard--dispatch .fi-news-email{width:100%;min-height:44px;padding:10px 12px;border:1px solid rgb(201 149 80 / .36);background:rgb(0 0 0 / .22);color:var(--paper)}.footer__identity .fi-footer-utility{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px}.fi-footer-services-head{margin-top:24px!important}.fi-byline-ind{background:rgb(201 149 80 / .1)!important;border-color:rgb(201 149 80 / .45)!important;color:var(--brass-text)!important}.error404 .fi-empty-state>svg{display:none!important}.error404 .fi-empty-state:before{content:"";display:block;width:180px;height:260px;margin:0 auto 22px;background:url(/wp-content/uploads/2026/07/fi-investigator-blueprint-character.webp) center/contain no-repeat;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .3))}@media(max-width:980px){.fi-proof-grid,.fi-conversation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fi-casefile-card,.fi-hub-cta{align-items:flex-start;flex-direction:column}.fi-industry-empty-grid{grid-template-columns:1fr}}@media(max-width:720px){.hero__figure--investigator{min-height:330px}.fi-investigator-hero{height:325px!important}.fi-investigator-portrait{grid-template-columns:1fr;text-align:center}.fi-investigator-portrait img{max-height:400px}.fi-proof-grid,.fi-conversation-grid{grid-template-columns:1fr}.fi-text-link{width:100%;margin:8px 0 0}}@media(prefers-reduced-motion:reduce){.fi-coverage-grid .fi-service-card{transition:none!important}.fi-coverage-grid .fi-service-card:hover{transform:none}}.error404 .site-main .inside-article{text-align:center;padding:clamp(36px,7vw,80px)!important}.error404 .site-main .inside-article:before{content:"";display:block;width:180px;height:260px;margin:0 auto 22px;background:url(/wp-content/uploads/2026/07/fi-investigator-blueprint-character.webp) center/contain no-repeat;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .3))}.error404 .site-main .entry-title{font-size:clamp(34px,5vw,58px);margin-bottom:16px}.fi-404-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}.fi-coverage-grid .fi-service-card h3,.guides .card__title,.guides .card__title a,.interview__q{color:#F5F1E8!important}.fi-investigator-portrait figcaption{color:var(--ink-soft)!important}.hero__lede a,.interview .meta a{color:#D8A55F!important;text-decoration-color:rgb(216 165 95 / .55)!important}.hero__lede a:hover,.interview .meta a:hover{color:#F0C784!important}.error404 .site-main{max-width:940px!important;margin-inline:auto!important}.error404 .site-main .inside-article{display:block!important;text-align:center!important;padding:clamp(36px,7vw,80px)!important;border:1px solid rgb(201 149 80 / .28)!important;background:linear-gradient(145deg,rgb(201 149 80 / .07),rgb(255 255 255 / .012))!important}.error404 .site-main .inside-article:before{content:""!important;display:block!important;width:170px!important;height:250px!important;margin:0 auto 20px!important;background:url(/wp-content/uploads/2026/07/fi-investigator-blueprint-character.webp) center/contain no-repeat!important;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .3))!important}.error404 .site-main .entry-title{color:#F5F1E8!important;font-size:clamp(34px,5vw,58px)!important;margin-bottom:16px!important}.error404 .site-main .entry-content{color:#D8D0C3!important}.error404 .search-form{max-width:520px;margin:26px auto 0}.footer .fi-editorial-policy-link{color:#F5F1E8!important;text-decoration:underline!important;text-decoration-color:#D8A55F!important;text-decoration-thickness:1px!important;text-underline-offset:4px!important}.footer .fi-editorial-policy-link:hover,.footer .fi-editorial-policy-link:focus-visible{color:#D8A55F!important;text-decoration-thickness:2px!important}.mlc-language-switcher{display:inline-flex;align-items:center;gap:.4em}.mlc-language-switcher::before{content:"\1F310";font-size:1.1em;line-height:1}.mlc-language-switcher>ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.2em .7em}.mlc-language-switcher li{margin:0;padding:0}.mlc-language-switcher a{text-decoration:none}.mlc-language-switcher a:hover,.mlc-language-switcher a:focus{text-decoration:underline}.mlc-language-switcher .mlc-current span{font-weight:600}.mlc-language-switcher .mlc-missing span{opacity:.55;cursor:default} /* inline:anonymous-inline */ .fi-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:99999;max-width:520px;margin-left:auto;background:#1A1712;color:#F5F1E8;border:1px solid rgba(201,149,80,.45);border-top:3px solid #C99550;padding:18px 20px;box-shadow:0 10px 34px rgba(0,0,0,.55);font-size:14px;} .fi-consent__heading{margin:0 0 8px;color:#F5F1E8;font:600 22px/1.2 Fraunces,Georgia,serif;} .fi-consent__text{margin:0 0 10px;line-height:1.55;} .fi-consent__note{margin:0 0 14px;color:#D7CEC0;font-size:12px;line-height:1.5;} .fi-consent__text a{color:#C99550;text-decoration:underline;} .fi-consent__actions{display:flex;gap:10px;justify-content:flex-end;} .fi-consent__btn{cursor:pointer;font:600 13px/1 inherit;letter-spacing:.03em;padding:10px 18px;border:1px solid #C99550;background:transparent;color:#F5F1E8;} .fi-consent__btn--primary{background:#C99550;color:#1A1712;} .fi-consent__btn--ghost{opacity:.85;} .fi-consent__btn:disabled{cursor:not-allowed;opacity:.45;} .fi-consent-reopen{position:fixed;right:16px;bottom:16px;z-index:99998;min-height:40px;padding:9px 12px;border:1px solid rgba(201,149,80,.6);background:#1A1712;color:#F5F1E8;font:600 12px/1 inherit;letter-spacing:.03em;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);} .fi-consent-reopen--inline{position:static;width:auto;margin:16px 0 22px;box-shadow:none;} .fi-consent-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;} .fi-consent__btn:focus-visible,.fi-consent-reopen:focus-visible,.fi-consent__text a:focus-visible{outline:3px solid #F5F1E8;outline-offset:3px;} html[dir=rtl] .fi-consent{margin-left:0;margin-right:auto;} @media(max-width:540px){.fi-consent{left:10px!important;right:10px!important;bottom:10px!important;}.fi-consent__actions{flex-direction:column-reverse;}.fi-consent__btn{width:100%;}} /* inline:fi-mlc-switcher-style */ .mlc-language-switcher, .fi-mlc-header-switcher { --fi-mlc-ink: #11100e; --fi-mlc-charcoal: #1b1916; --fi-mlc-brass: #b88a44; --fi-mlc-brass-bright: #d2aa68; --fi-mlc-ivory: #f3ecdf; --fi-mlc-muted: #b8ac99; } .mlc-language-switcher { font-family: "DM Sans", system-ui, sans-serif; font-size: 0.875rem; line-height: 1.2; max-inline-size: 100%; } .mlc-language-switcher ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; inline-size: fit-content; max-inline-size: 100%; margin: 0; padding: 0.375rem; list-style: none; border: 1px solid #806336; border-color: color-mix(in srgb, var(--fi-mlc-brass) 55%, transparent); border-radius: 999px; background: var(--fi-mlc-ink); background: color-mix(in srgb, var(--fi-mlc-ink) 94%, transparent); box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 18%); } .mlc-language-switcher li { margin: 0; padding: 0; list-style: none; } .mlc-language-switcher a, .mlc-language-switcher span { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2rem; padding: 0.5rem 0.75rem; border-radius: 999px; color: var(--fi-mlc-ivory); font-weight: 650; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; } .mlc-language-switcher a:hover { color: var(--fi-mlc-ink); background: var(--fi-mlc-brass-bright); } .mlc-language-switcher a:focus-visible { outline: 2px solid var(--fi-mlc-brass-bright); outline-offset: 2px; } .mlc-language-switcher .mlc-current span { color: var(--fi-mlc-ink); background: var(--fi-mlc-brass); } .mlc-language-switcher .mlc-missing span { opacity: 0.52; cursor: not-allowed; } [dir="rtl"] .mlc-language-switcher ul { direction: rtl; } /* GeneratePress moves screen-reader text 10,000px off canvas. In an RTL * document that creates a real horizontal scroll range. Keep it visually * hidden in place, while allowing the theme's :focus rule to restore it. */ html[dir="rtl"] .screen-reader-text:not(:focus):not(:active) { position: absolute !important; inset: auto !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .fi-mlc-header-switcher { position: relative; z-index: 90; display: inline-flex; flex: 0 0 auto; align-items: center; } .fi-mlc-header-switcher details { position: relative; margin: 0; padding: 0; } .fi-mlc-header-switcher details, .fi-mlc-header-switcher summary, .fi-mlc-header-switcher__panel { box-sizing: border-box; } .fi-mlc-header-switcher summary { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.625rem; min-block-size: 2.625rem; margin: 0; padding: 0; border: 1px solid #8c6936; border-color: color-mix(in srgb, var(--fi-mlc-brass) 72%, transparent); border-radius: 50%; background: var(--fi-mlc-ink); color: var(--fi-mlc-brass-bright); cursor: pointer; list-style: none; -webkit-appearance: none; appearance: none; transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .fi-mlc-header-switcher summary::marker, .fi-mlc-header-switcher summary::-webkit-details-marker { display: none; content: ""; } .fi-mlc-header-switcher summary > span { display: block; inline-size: 1.125rem; block-size: 1.125rem; font-size: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17M12 3c2.2 2.5 3.3 5.5 3.3 9S14.2 18.5 12 21M12 3C9.8 5.5 8.7 8.5 8.7 12s1.1 6.5 3.3 9'/%3E%3C/g%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 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17M12 3c2.2 2.5 3.3 5.5 3.3 9S14.2 18.5 12 21M12 3C9.8 5.5 8.7 8.5 8.7 12s1.1 6.5 3.3 9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } .fi-mlc-header-switcher summary:hover, .fi-mlc-header-switcher summary:focus-visible, .fi-mlc-header-switcher details[open] summary { border-color: var(--fi-mlc-brass-bright); background: var(--fi-mlc-brass); color: var(--fi-mlc-ink); box-shadow: 0 0 0 3px rgb(210 170 104 / 12%); } .fi-mlc-header-switcher summary:focus-visible { outline: 2px solid var(--fi-mlc-brass-bright); outline-offset: 3px; } .fi-mlc-header-switcher details:not([open]) > .fi-mlc-header-switcher__panel { display: none; } .fi-mlc-header-switcher__panel { position: absolute; z-index: 100; inset-block-start: calc(100% + 0.625rem); inset-inline-end: 0; inline-size: max-content; min-inline-size: 12rem; max-inline-size: min(22rem, calc(100vw - 1.5rem)); padding: 0.375rem; border: 1px solid #8c6936; border-color: color-mix(in srgb, var(--fi-mlc-brass) 64%, transparent); border-radius: 0.375rem; background: var(--fi-mlc-ink); background: linear-gradient(145deg, #1d1914, var(--fi-mlc-ink)); box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 38%), inset 0 2px 0 rgb(210 170 104 / 12%); } .fi-mlc-header-switcher .mlc-language-switcher::before { display: none; } .fi-mlc-header-switcher .mlc-language-switcher ul { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 0.25rem; inline-size: 100%; min-inline-size: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; list-style: none; } .fi-mlc-header-switcher .mlc-language-switcher li { margin: 0; padding: 0; list-style: none; } .fi-mlc-header-switcher .mlc-language-switcher a, .fi-mlc-header-switcher .mlc-language-switcher span { justify-content: flex-start; inline-size: 100%; min-block-size: 2.75rem; padding: 0.625rem 0.75rem; border-radius: 0.2rem; font-size: 0.9375rem; text-align: start; } .fi-mlc-header-switcher .mlc-language-switcher a { color: var(--fi-mlc-ivory); } .fi-mlc-header-switcher .mlc-language-switcher a:hover { color: var(--fi-mlc-ivory); background: #30281e; background: color-mix(in srgb, var(--fi-mlc-brass) 18%, transparent); } .fi-mlc-header-switcher .mlc-language-switcher .mlc-current span { color: var(--fi-mlc-ink); background: var(--fi-mlc-brass-bright); } @media (max-width: 760px) { .fi-mlc-header-switcher__panel { position: fixed; /* The FI mobile masthead wraps its controls onto a second row. Keep the * overlay below that row so the globe/menu controls remain operable. */ inset-block-start: calc(8.75rem + var(--wp-admin--admin-bar--height, 0px) + env(safe-area-inset-top, 0px)); inset-inline: 0.75rem; inline-size: auto; min-inline-size: 0; max-inline-size: none; max-block-size: calc(100dvh - 9.5rem - var(--wp-admin--admin-bar--height, 0px) - env(safe-area-inset-top, 0px)); overflow-y: auto; } .fi-mlc-header-switcher .mlc-language-switcher, .fi-mlc-header-switcher .mlc-language-switcher ul { inline-size: 100%; } } @media (max-width: 480px) { .mlc-language-switcher a, .mlc-language-switcher span { min-block-size: 2.75rem; } } @media (prefers-reduced-motion: reduce) { .fi-mlc-header-switcher summary { transition: none; } } @media (forced-colors: active) { .mlc-language-switcher ul, .mlc-language-switcher a:focus-visible, .fi-mlc-header-switcher summary, .fi-mlc-header-switcher__panel { border: 1px solid currentColor; } } /* inline:wp-custom-css */ /* ============================================================================ FI - Additional CSS (Customizer) v2 INACTIVE LOCAL CANDIDATE - 31 August 2026 NEVER APPLIED. Local candidate only. Staging is 503. Successor to the live `wp-custom-css` block. Prestate: FI-CUSTOMIZER-ADDITIONAL-CSS-CAPTURED-ORIGINAL.css 108,232 B, 0f44af15da4f92c8d70bb57665ffe01c6f6fdc77a531525d16e4e686f5e7ab5a TEN edits, all of them removals or narrowings. Nothing is added, and every other rule in the block is byte-identical to the prestate. 1 `.masthead, .footer { background:#161310 !important }` -> `.footer { ... }` The only rule in 3,243 that painted the masthead. Split so the footer keeps its dark surface and the masthead takes the approved Oxide Wash from the shared shell. 2 `.masthead { ... background: var(--paper) }` -> background declaration removed. 3 `.masthead__inner { display:flex; flex-direction:column; ... }` retired. It was written for the old masthead, whose `.masthead__inner` held a `.masthead__bar`; against the accepted navbar it turned one row into three. 4-7 The legacy DARK article typography - cream #E5DED2 body copy, cream #F5F1E8 headings, a 19px cap that suppressed the approved 21px lead, and brass links - scoped `:not(.fi-tpl-2026-08)`. These lost to nothing before: they beat the approved port on SPECIFICITY, not `!important`. 8 The reading-paragraph rule, same treatment. 9-10 The global heading colours `h1,h2,h3{color:var(--ink)}` and `h3{color:var(--steel)}` scoped `:not(.fi-tpl-2026-08)`. Only the COLOUR moves; font-family, weight, size, line-height, margin and letter-spacing stay global. A global heading colour blocks the inheritance the approved sections rely on. DELIBERATELY UNTOUCHED: every Customizer rule for the older pattern blocks - `.summary`, `.compare`, `.pullquote`, `.stat-callout`, `.sidenote`, `.casefile`, `.findings`, `.sources`, `.cta-card`. The approved port does not cover them, so de-scoping them would strip styling from real article content. The `:not(.fi-tpl-2026-08)` scoping is not cosmetic: the renderer stands down on non-default language routes, and those posts still need this styling. ROLLBACK: restore FI-CUSTOMIZER-ADDITIONAL-CSS-CAPTURED-ORIGINAL.css into Additional CSS. A diff against the prestate shows only the eight edits above. ============================================================================ */ /* FACTORY INVESTIGATOR — Complete CSS · v1.0 */ /* CLS FIX — metric-matched fallback @font-face (×4) */ /* Fraunces → Georgia (old-style serif fallback; high x-height match) */ /* font-face omitted from distributable package */ /* Source Serif 4 → Georgia */ /* font-face omitted from distributable package */ /* DM Sans → Arial (PROVEN — ivristech live capsize values) */ /* font-face omitted from distributable package */ /* IBM Plex Mono → Consolas/monospace */ /* font-face omitted from distributable package */ html { scroll-behavior: smooth; } /* :root — DESIGN TOKENS (re-skinning happens HERE and only here) */ :root { /* — Palette (locked: Investigation Workshop, restrained) — Contrast on --paper #F5F1E8 noted for accessibility: */ --ink: #1A1712; /* body text / dark surfaces ~14:1 AAA */ --paper: #F5F1E8; /* page background */ --card: #FBF9F3; /* raised surfaces / blocks */ --steel: #1F3A5F; /* structural accent: links, H3 ~9:1 AAA */ --brass: #A67C2E; /* LARGE/UI/graphical ONLY ~3.4:1 (≥24px or ≥19px bold, rules, numerals — never body) */ --brass-text: #7A5A1E; /* AA-safe small brass text ~5:1 AA */ --oxide: #8B3A2F; /* flags only: FRICTION/errors ~6:1 AA */ --grey: #5C564C; /* secondary text / meta ~5.6:1 AA */ --lead: #2A2620; /* lead paragraph ~12:1 AAA */ --hair: #E3DCCB; /* table + block hairlines */ --rule: #D8CBB8; /* slightly stronger rule / input borders */ /* — Surfaces used by the dark footer/nav (kept as tokens so dark mode is easy) */ --on-dark: #D9D2C6; /* link text on ink ~9:1 on ink */ --on-dark-soft: #B9B1A4; /* muted text on ink ~5.3:1 AA */ --on-dark-faint: #8A8170; /* copyright on ink ~3.3:1 (large) */ --dark-field-bg: #262019; --dark-field-bd: #3A3128; --dark-rule: #342C22; --row-zebra: #F3EEE4; /* even-row table tint */ /* — Typography — The " Fallback" entry is the CLS metric-match; it sits BETWEEN the real face and the generic so the swap is shift-free. */ --display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif; --read: "Source Serif 4", "Source Serif Fallback", Georgia, serif; --ui: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace; /* — Layout — */ --measure: 68ch; /* max reading line length */ --nav-h: 62px; --gutter: 24px; --maxw: 1200px; --max-text: 720px; /* — Radius / motion (restrained: 2–4px, not SaaS-curved) — */ --radius-sm: 2px; --radius-md: 4px; --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* — Focus ring (single source of truth for a11y) — */ --focus-ring: 0 0 0 3px rgba(31, 58, 95, .45); /* steel @ 45% */ } /* 1. GLOBAL (reset, base type, links, GeneratePress integration) */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 18px; /* audience skews older — 18px UI is a floor */ line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; height: auto; } button { font: inherit; } hr { border: none; border-top: 1px solid var(--hair); margin: 2rem 0; } /* Headings — Fraunces; opsz auto gives display cuts contrast for free */ /* Scoped off migrated templates: the approved stylesheets set h1 and h2 themselves and deliberately leave h3 to inherit, so this global rule was replacing an approved inheritance with Fraunces 600 where the approved page shows DM Sans at the UA weight. */ /* The WEIGHT stays global. Scoping it exposed the generated stylesheet's `h1,h2,h3{font-weight:400}` underneath, which is further from the approved 700, not closer - the reference has no author weight rule at all, so its 700 is the UA default and no scoping here can reach it. 600 is the site's own typography and is recorded as an accepted divergence. Only the FAMILY is scoped, which is what the approved stylesheets actually own. */ /* Stays GLOBAL. Scoping it off migrated templates was tried twice and measured both times: at real specificity it overrode the approved stylesheets, which set 520, 560 and 600 themselves; behind `:where()` it lost to legacy class rules and 18 families regressed. The one place the difference has a layout consequence - the archive headlines - is fixed in the bridges instead. */ :where(body:not(.fi-tpl-2026-08)) h1, :where(body:not(.fi-tpl-2026-08)) h2, :where(body:not(.fi-tpl-2026-08)) h3 { font-weight: 600; } body:not(.fi-tpl-2026-08) h1, body:not(.fi-tpl-2026-08) h2, body:not(.fi-tpl-2026-08) h3 { font-family: var(--display); font-optical-sizing: auto; margin: 0 0 .5em; letter-spacing: 0; } /* 2026-08-31: the colour is scoped off migrated templates. A global heading colour blocks the inheritance the approved sections rely on - it put dark ink on the dark services and conversations panels. Typography above stays global and unchanged. */ body:not(.fi-tpl-2026-08) :is(h1, h2, h3) { color: var(--ink); } h1 { font-size: 52px; line-height: 1.08; } h2 { font-size: 34px; line-height: 1.15; } /* 2026-08-31: only the COLOUR is scoped off migrated templates, where the approved sections colour their own headings. Size, line-height and letter-spacing stay global. The size deliberately does NOT follow the approved prototype. That prototype leaves body h3 unstyled, so its 19.89px is the browser default (17px x 1.17), not a designed value - and removing this rule does not reach it anyway: the theme's own generated `h3{29px}` takes over. Keeping 24px preserves a deliberate step in the heading scale and stays closer to the live site. Recorded as an accepted divergence. */ h3 { font-size: 24px; line-height: 1.25; letter-spacing: 0; } body:not(.fi-tpl-2026-08) h3 { color: var(--steel); } h4 { font-family: var(--ui); font-weight: 600; font-size: 19px; line-height: 1.3; margin: 0 0 .5em; } p { margin: 0 0 1.1em; } a { color: var(--steel); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--brass-text); } /* GeneratePress integration * */ .site-header, /* GP default header — replaced by .masthead */ .main-navigation, /* GP nav — our nav lives in the masthead */ .site-footer, /* GP footer bar — replaced by .footer */ .generate-back-to-top { display: none !important; } .site-content { padding: 0; } .site-main { margin: 0; } /* Full-width container for our custom layouts; GP wraps content in */ body.page .site-main, body.home .site-main { max-width: none; padding: 0; } /* The custom homepage supplies its own spacing and surfaces. GeneratePress's */ body.home .inside-article { max-width: none; margin: 0; padding: 0; background: transparent; } body.home .entry-content { margin: 0; } /* Skip link (a11y: keyboard users jump past the masthead) ------------------ */ .skip-link, a.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--paper); font-family: var(--ui); font-weight: 600; font-size: 15px; padding: 12px 18px; text-decoration: none; } .skip-link:focus { left: 8px; top: 8px; color: var(--paper); box-shadow: var(--focus-ring); } /* Global focus-visible — visible keyboard focus everywhere (WCAG 2.4.7). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; border-radius: var(--radius-sm); } /* 2. NAVIGATION & MASTHEAD (publication nameplate; sticky-collapse on scroll) */ .masthead { position: sticky; top: 0; z-index: 60; } .masthead__inner { /* Masthead gets a wider cap than page content (broadsheet pattern): the full-size brand + 5 nav items + CTA + theme toggle need ~1240px of row. */ /* retired 2026-08-31: the accepted navbar owns this layout in the shared shell */ } .masthead__bar { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; } .masthead__wordmark { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: 0; color: var(--ink); text-decoration: none; line-height: 1; transition: font-size .2s ease; display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; white-space: nowrap; } .masthead__wordmark img, .masthead__seal { width: 46px; height: 46px; display: block; flex: 0 0 auto; } .masthead__nav { display: flex; gap: 20px; margin-left: auto; flex: 1 1 auto; min-width: 0; justify-content: flex-end; } .masthead__nav a { font-family: var(--ui); font-weight: 500; font-size: 16px; color: var(--ink); text-decoration: none; white-space: nowrap; flex: 0 0 auto; } .masthead__item--has-children { position: relative; display: inline-flex; align-items: center; gap: 4px; } .masthead__subtoggle { background: none; border: 0; color: var(--ink); font-size: 13px; cursor: pointer; line-height: 1; padding: 4px; } .masthead__submenu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px; margin: 0; padding: 8px 0; list-style: none; background: var(--card); border: 1px solid var(--hair); box-shadow: 0 8px 28px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease; z-index: 70; } .masthead__item--has-children:hover .masthead__submenu, .masthead__item--has-children:focus-within .masthead__submenu, .masthead__submenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .masthead__submenu a { display: block; padding: 9px 18px; white-space: nowrap; font-family: var(--ui); font-size: 15px; } .masthead__submenu a:hover { color: var(--brass-text); background: rgba(201,149,80,.08); } .masthead__nav a:hover { color: var(--steel); } .masthead__nav a[aria-current="page"] { color: var(--brass-text); } .masthead__cta { white-space: nowrap; } .masthead__issue { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; color: var(--grey); padding-bottom: 12px; overflow: hidden; max-height: 32px; transition: max-height .2s ease, opacity .2s ease, padding .2s ease; } .masthead__toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--rule); color: var(--ink); width: 42px; height: 42px; cursor: pointer; font-size: 18px; line-height: 1; } /* Collapsed (scrolled) state: shrink wordmark, hide the issue line — keeps the */ .masthead--stuck .masthead__inner { padding-top: 10px; } .masthead--stuck .masthead__wordmark { font-size: 22px; } .masthead--stuck .masthead__issue { max-height: 0; opacity: 0; padding-bottom: 0; } /* The brass double-rule that closes the nameplate */ .rule-double { height: 4px; background: linear-gradient(var(--brass), var(--brass)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--brass), var(--brass)) 0 100% / 100% 1px no-repeat; } /* 3. HERO (homepage: typography-led masthead + framed patent inset) */ .hero { padding: 46px 0 4px; } .hero__grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 48px; align-items: center; } .hero h1 { margin: 14px 0 18px; max-width: 15ch; } .hero__lede { max-width: 46ch; margin-bottom: 24px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; } .hero__figure { border: 1px solid var(--hair); background: var(--card); padding: 24px; } .hero__figure .patent { max-width: 340px; margin-inline: auto; } .hero__figcap { font-family: var(--mono); font-size: 12px; color: var(--grey); margin-top: 12px; letter-spacing: .04em; text-align: center; } /* 4. EDITORIAL GRID (homepage broadsheet front page + bands) */ .frontpage { display: grid; grid-template-columns: 2fr 1fr; gap: 44px; border-top: 3px solid var(--ink); padding-top: 30px; margin-top: 40px; } .lead-story .duo-block { min-height: 300px; margin-bottom: 18px; } .lead-story h2 { font-size: 36px; margin: .25em 0 .35em; } .lead-story .card__excerpt { font-size: 18px; } .secondary { display: grid; gap: 24px; align-content: start; border-left: 1px solid var(--hair); padding-left: 34px; } .secondary__head, .band__title { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); } .sec-item { padding-bottom: 22px; border-bottom: 1px solid var(--hair); } .sec-item:last-child { border-bottom: none; padding-bottom: 0; } .sec-item h3 { font-family: var(--display); color: var(--ink); font-size: 20px; line-height: 1.2; margin: .35em 0 .3em; } .sec-item h3 a { color: inherit; text-decoration: none; } .sec-item h3 a:hover { color: var(--steel); } .band { border-top: 1px solid var(--hair); margin-top: 52px; padding-top: 30px; } .band__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; } .guides { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .guide { border: 1px solid var(--hair); background: var(--card); padding: 26px; } .guide h3 { font-family: var(--display); color: var(--ink); font-size: 22px; margin: .4em 0 .35em; line-height: 1.2; } .morewrap { display: grid; grid-template-columns: 2fr 1fr; gap: 44px; margin-top: 52px; } .fieldnotes { border-left: 1px solid var(--hair); padding-left: 34px; } .fieldnote { padding-bottom: 18px; border-bottom: 1px solid var(--hair); margin-bottom: 18px; } .fieldnote:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .fieldnote p { font-family: var(--read); font-size: 16px; line-height: 1.5; margin: .3em 0 .4em; } .interview { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--hair); background: var(--card); padding: 24px; margin-top: 22px; } .interview__q { font-family: var(--display); font-style: italic; font-size: 20px; line-height: 1.35; color: var(--steel); margin: .1em 0 .5em; } /* Bridge band: the ONE publication→service pivot (dark, after editorial proof) */ .bridge { background: var(--ink); color: var(--paper); margin-top: 64px; } .bridge__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr auto; gap: 36px; align-items: center; } .bridge h2 { color: var(--paper); max-width: 20ch; margin: .2em 0 .3em; } .bridge p { color: var(--on-dark); max-width: 52ch; margin: 0; } .bridge .cat { color: var(--brass); } /* 5. ARTICLE SHELL (3-column: meta rail / reading column / sticky TOC rail) */ .article-head { width: min(100% - 48px, 900px); margin: 34px auto 6px; text-align: center; } .article-head .cat { margin-bottom: 16px; } .article-head h1 { margin: 0 0 18px; } .article-head .meta { justify-content: center; display: flex; } .article-shell { width: min(100% - 48px, 1440px); margin: 22px auto 0; display: grid; grid-template-columns: 1fr; gap: 40px; } .rail-left, .rail-right { display: none; } /* hidden until ≥1080px (§27) */ .article-body { max-width: 68ch; margin-inline: auto; } .article-body p { font-family: var(--read); font-size: 19px; line-height: 1.7; color: var(--ink); } .article-body .lede { font-size: 22px; color: var(--lead); line-height: 1.55; } .article-body h2 { font-size: 34px; margin: 1.5em 0 .5em; } .article-body > .tablewrap, .article-body > .figure { max-width: 1000px; } /* evidence breaks wide */ .rail-left .cat { margin-bottom: 14px; } .rail-block { margin-bottom: 24px; } .rail-block__label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; } .share { display: grid; gap: 8px; } .share a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--steel); text-decoration: none; } .share a:hover { color: var(--brass-text); } .toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .toc a { font-family: var(--ui); font-size: 14px; color: var(--ink); text-decoration: none; line-height: 1.3; display: block; border-left: 2px solid var(--hair); padding-left: 12px; } .toc a:hover, .toc a.is-active { color: var(--steel); border-left-color: var(--brass); } .related { display: grid; gap: 14px; } .related a { font-family: var(--display); font-size: 16px; line-height: 1.25; color: var(--ink); text-decoration: none; display: block; } .related a:hover { color: var(--steel); } .related .meta { margin-top: 4px; } .fi-author-box, .fi-related-posts { max-width: var(--measure); margin: 40px 0; padding: 26px 28px; background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); } .fi-author-box h2 { margin: 4px 0 6px; font-size: 26px; } .fi-author-box p:last-child, .fi-related-posts .related { margin-bottom: 0; } /* GeneratePress single-post mapping (production). The injected rails are direct */ body.single-post .site-main { width: min(100% - 48px, 1440px); margin: 22px auto 0; display: grid; grid-template-columns: 1fr; gap: 40px; } body.single-post .inside-article { max-width: 68ch; margin-inline: auto; } body.single-post:not(.fi-tpl-2026-08) .entry-content > p { font-family: var(--read); font-size: 19px; line-height: 1.7; color: var(--ink); } /* 6. TYPOGRAPHY (shared utilities + the lede + double-rule already in §2) */ .container { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; } .mono { font-family: var(--mono); } .measure { max-width: var(--measure); } .section { padding: 56px 0; } .section--tight { padding: 36px 0; } .lede { font-family: var(--read); font-size: 22px; line-height: 1.55; color: var(--lead); } /* category labels — type-only "hand-stamped ink" (NEVER rotary nameplates) */ .cat { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); display: inline-block; line-height: 1.2; } .cat--oxide { color: var(--oxide); } .cat--bullet::before { content: "• "; } /* metadata row — editorial/technical, NOT avatar + "5 min read" pill */ .meta { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); line-height: 1.3; } /* 7. EXECUTIVE SUMMARY BLOCK ("The Findings" — prime AI-citation real estate) */ .summary { background: var(--card); border: 1px solid var(--hair); border-left: 4px solid var(--brass); padding: 24px 28px; margin: 32px 0; } .summary__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px; } .summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .summary li { position: relative; padding-left: 1.4em; font-family: var(--read); font-size: 17px; line-height: 1.55; color: var(--ink); } .summary li::before { content: "—"; position: absolute; left: 0; color: var(--brass-text); font-weight: 600; } /* 8. KEY FINDINGS (end-of-article numbered variant; mono numerals) */ .findings { background: var(--card); border: 1px solid var(--hair); border-left: 4px solid var(--steel); padding: 24px 28px; margin: 40px 0; } .findings__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px; } .findings ol { list-style: none; counter-reset: find; margin: 0; padding: 0; display: grid; gap: 13px; } .findings li { position: relative; counter-increment: find; padding-left: 2.4em; font-family: var(--read); font-size: 17px; line-height: 1.55; color: var(--ink); } .findings li::before { content: counter(find, decimal-leading-zero); position: absolute; left: 0; top: .05em; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--brass-text); font-variant-numeric: tabular-nums; } /* 9. METHODOLOGY BLOCK + SEAL (signature element — the ONE allowed skeuomorphism) */ .methodology { position: relative; background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 28px 30px; margin: 40px 0; } .methodology__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 6px; } .methodology__title { font-family: var(--display); font-size: 24px; color: var(--ink); margin: 0 0 18px; } .methodology__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 36px; } .methodology dt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--grey); margin-bottom: 3px; } .methodology dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); } .methodology dd a { color: var(--steel); } .methodology__seal { position: absolute; top: 20px; right: 22px; } .seal { width: 88px; height: 88px; color: var(--brass); transform: rotate(-5deg); } .seal text { font-family: var(--mono); fill: currentColor; } .seal__arc { font-size: 7px; font-weight: 600; letter-spacing: 1.4px; } .seal__est { font-size: 7px; font-weight: 600; letter-spacing: 1px; } .seal__year { font-size: 9px; font-weight: 600; letter-spacing: 1px; } .seal__star { font-size: 8px; } /* 10. LEDGER STAT STRIP (3-up "instrument panel" reading) */ .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--card); border: 1px solid var(--hair); margin: 32px 0; } .stat { padding: 24px; } .stat + .stat { border-left: 1px solid var(--hair); } .stat__num { font-family: var(--display); font-weight: 600; font-size: 48px; line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; } .stat__label { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--grey); margin-top: 10px; line-height: 1.35; } /* 11. STAT CALLOUT (single big number; gauge-reading treatment) */ .stat-callout { display: flex; align-items: baseline; gap: 24px; max-width: var(--measure); border-top: 2px solid var(--brass); border-bottom: 1px solid var(--brass); padding: 22px 0; margin: 32px 0; } .stat-callout__num { font-family: var(--display); font-weight: 600; font-size: 72px; line-height: .95; color: var(--brass); font-variant-numeric: tabular-nums; } .stat-callout__label { font-family: var(--read); font-size: 18px; line-height: 1.45; color: var(--ink); max-width: 34ch; } /* 12. PULL QUOTE (restrained typography, NOT a card) */ .pullquote { border-left: 3px solid var(--brass); padding-left: 24px; margin: 34px 0; max-width: var(--measure); } .pullquote p { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.35; color: var(--steel); margin: 0; } .pullquote cite { display: block; margin-top: 14px; font-family: var(--mono); font-style: normal; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); } /* 13. TUFTE SIDENOTES (3-tier responsive: inline → footnote → true margin note) */ .has-sidenote { margin: 0 0 1.1em; } .sidenote-ref { font-family: var(--mono); font-size: .68em; font-weight: 600; color: var(--brass-text); vertical-align: super; line-height: 0; } .sidenote { display: block; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--grey); border-top: 1px solid var(--hair); margin-top: 12px; padding-top: 10px; } .sidenote__num { color: var(--brass-text); font-weight: 600; margin-right: 6px; } /* 14. COMPARISON TABLE (core IP; tabular pricing aligns; mobile horizontal-scroll) */ .tablewrap { margin: 32px 0; } .tablewrap__hint { display: none; font-family: var(--mono); font-size: 12px; color: var(--grey); letter-spacing: .04em; margin-bottom: 8px; } .tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.compare { width: 100%; border-collapse: collapse; background: var(--card); font-family: var(--ui); font-size: 15px; min-width: 640px; } table.compare thead th { background: var(--steel); color: var(--paper); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 12px 14px; text-align: left; white-space: nowrap; } table.compare tbody th { text-align: left; font-weight: 700; color: var(--ink); padding: 12px 14px; border-top: 1px solid var(--hair); vertical-align: top; } table.compare td { padding: 12px 14px; border-top: 1px solid var(--hair); vertical-align: top; color: var(--ink); } table.compare tbody tr:nth-child(even) th, table.compare tbody tr:nth-child(even) td { background: var(--row-zebra); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .yes { color: var(--steel); font-weight: 700; } .no { color: var(--grey); } /* sticky first column when the table scrolls horizontally on narrow screens */ table.compare th[scope=row], table.compare td.rowhead { position: sticky; left: 0; background: var(--card); box-shadow: 1px 0 0 var(--hair); } table.compare tbody tr:nth-child(even) th[scope=row] { background: var(--row-zebra); } /* 15. CASE FILE CARD (portfolio entries presented AS investigations) */ .casefile { position: relative; background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 26px; } .casefile__no { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 8px; } .casefile__title { font-family: var(--display); font-size: 23px; color: var(--ink); margin: 0 0 16px; line-height: 1.2; } .casefile dl { display: grid; gap: 12px; margin: 0; } .casefile dt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); margin-bottom: 2px; } .casefile dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); } .casefile__result dd { color: var(--steel); font-weight: 600; } /* 16. FAQ BLOCK (native
; marked up with FAQPage schema by Snippet 21) */ .faq { margin: 32px 0; max-width: var(--measure); } .faq__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 6px; } .faq__item { border-top: 1px solid var(--hair); } .faq__item:last-child { border-bottom: 1px solid var(--hair); } .faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; font-family: var(--ui); font-weight: 600; font-size: 18px; color: var(--ink); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-family: var(--mono); color: var(--brass-text); font-weight: 600; } .faq__item[open] summary::after { content: "\2013"; } .faq__answer { padding: 0 0 18px; font-family: var(--read); font-size: 17px; line-height: 1.65; color: var(--ink); } /* 17. SOURCES & NOTES (every claim → real outbound link + access date) */ .sources { border-top: 1px solid var(--hair); margin-top: 48px; padding-top: 24px; } .sources__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px; } .sources ol { font-family: var(--mono); font-size: 14px; line-height: 1.5; color: var(--grey); padding-left: 1.7em; margin: 0; display: grid; gap: 10px; } .sources a { color: var(--steel); } .verify { color: var(--steel); white-space: nowrap; } /* 18. CATEGORY LABELS + STATUS BADGES */ .badge { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); display: inline-flex; align-items: center; line-height: 1.2; } .badge::before { content: ""; width: 18px; height: 1px; background: var(--brass); display: inline-block; margin-right: 8px; } .badge--oxide { color: var(--oxide); } .badge--oxide::before { background: var(--oxide); } a.badge { text-decoration: none; } a.badge:hover { color: var(--ink); } /* 19. MINI CTA CARDS ("From the Research Desk" — article rail + inline) */ .cta-card { background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 22px; } .cta-card__label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 8px; } .cta-card__title { font-family: var(--display); font-size: 20px; color: var(--ink); margin: 0 0 8px; line-height: 1.2; } .cta-card p { font-size: 14px; color: var(--grey); line-height: 1.5; margin: 0 0 16px; } /* 20. NEWSLETTER SIGNUP ("The Dispatch") — inline form + footer mini-form */ .newsletter { background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 36px; margin: 40px 0; max-width: 560px; } .newsletter .cat { margin-bottom: 6px; } .newsletter h3 { margin: .2em 0 .3em; } .newsletter p { font-size: 15px; color: var(--grey); max-width: 44ch; } /* AJAX status line (Snippet 16 toggles .is-ok / .is-err) */ .fi-form-msg { font-family: var(--mono); font-size: 13px; margin-top: 12px; min-height: 1.2em; } .fi-form-msg.is-ok { color: var(--steel); } .fi-form-msg.is-err { color: var(--oxide); } /* 21. LEAD FORM (intake) — "commission an investigation", ledger feel via type */ .field { margin-bottom: 20px; } .field__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); display: block; margin-bottom: 8px; } .field__label .req { color: var(--oxide); } .field input, .field select, .field textarea { width: 100%; font-family: var(--ui); font-size: 16px; color: var(--ink); background: var(--card); border: 1px solid var(--rule); padding: 12px 14px; min-height: 48px; border-radius: 0; /* ledger feel = hairlines, not rounding */ transition: border-color .12s ease, box-shadow .12s ease; } .field textarea { min-height: 120px; line-height: 1.5; resize: vertical; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 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: 40px; } /* Steel focus ring — meets WCAG 2.4.7 AND 1.4.11 non-text contrast */ .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--steel); box-shadow: var(--focus-ring); } .field--error input, .field--error textarea, .field--error select { border-color: var(--oxide); } .field__error { font-family: var(--mono); font-size: 12px; color: var(--oxide); margin-top: 6px; letter-spacing: .03em; } .field__hint { font-family: var(--mono); font-size: 12px; color: var(--grey); margin-top: 6px; } .radio-set { display: grid; gap: 10px; margin: 0; padding: 0; border: none; } .radio { display: flex; align-items: flex-start; gap: 10px; font-family: var(--ui); font-size: 16px; cursor: pointer; } .radio input { width: 18px; height: 18px; min-height: 0; margin-top: 3px; accent-color: var(--steel); } .form-card { background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 34px; } .fieldset { margin: 0; padding: 0; border: none; } .fieldset__legend { display: flex; align-items: baseline; gap: 12px; width: 100%; margin: 6px 0 18px; } .fieldset:not(:first-of-type) .fieldset__legend { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--hair); } .fieldset__no { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--brass-text); } .fieldset__name { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); } .fieldset__rule { flex: 1; height: 1px; background: var(--hair); align-self: center; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } /* 22. SERVICE PAGES ("written by the same investigators": problem→method→proof) */ .service { width: min(100% - 48px, var(--maxw)); margin-inline: auto; padding: 40px 0; } .service__intro { max-width: var(--measure); } .service__intro h1 { margin-bottom: 16px; } .service-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0; } .service-step { border-top: 2px solid var(--brass); padding-top: 16px; } .service-step__no { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--brass-text); letter-spacing: .06em; } .service-step h3 { font-family: var(--display); color: var(--ink); font-size: 21px; margin: .3em 0 .35em; } .service-step p { font-family: var(--read); font-size: 16px; line-height: 1.55; color: var(--ink); } /* "What you get" checklist */ .deliverables { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; max-width: var(--measure); } .deliverables li { position: relative; padding-left: 1.8em; font-family: var(--read); font-size: 17px; line-height: 1.5; color: var(--ink); } .deliverables li::before { content: "✓"; position: absolute; left: 0; color: var(--steel); font-weight: 700; } /* 23. RATE CARD (publish prices — a brand-truth issue; ledger-style numerals) */ .ratecard { width: 100%; border-collapse: collapse; background: var(--card); border-top: 2px solid var(--brass); border-bottom: 2px solid var(--brass); margin: 32px 0; max-width: var(--measure); } .ratecard th { text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); padding: 14px 16px; border-bottom: 1px solid var(--hair); } .ratecard td { padding: 16px; border-bottom: 1px solid var(--hair); vertical-align: top; } .ratecard tr:last-child td { border-bottom: none; } .ratecard__tier { font-family: var(--display); font-size: 19px; color: var(--ink); } .ratecard__desc { font-family: var(--read); font-size: 15px; color: var(--grey); line-height: 1.5; } .ratecard__price { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; text-align: right; } .ratecard__note { font-family: var(--mono); font-size: 12px; color: var(--grey); margin-top: 8px; } /* 24. PATENT FIGURE / ARCHIVE DRAWING (brand's native imagery; vector, tiny) */ .figure { margin: 32px 0; } .figure__frame { border: 1px solid var(--hair); background: var(--card); padding: 22px; display: flex; justify-content: center; } .figure__frame .patent { color: var(--ink); width: 100%; height: auto; max-width: 420px; } .patent text { font-family: var(--mono); fill: currentColor; font-size: 13px; } .figure figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 10px; flex-wrap: wrap; } .figure__tag { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--brass-text); white-space: nowrap; } .figure__cap { font-family: var(--mono); font-size: 13px; color: var(--grey); line-height: 1.4; } /* duotone media — unifies disparate archive photos into ONE look (Ink + Paper) */ .duotone { filter: grayscale(1) contrast(1.1); } .duo-block { position: relative; background: var(--ink); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 200px; } .duo-block .patent { color: var(--paper); opacity: .9; width: 78%; } .duo-block__tag { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #cfc7b8; } .headshot { width: 64px; height: 64px; border: 1px solid var(--brass); background: var(--ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .headshot .patent { width: 80%; color: var(--paper); } /* generic editorial card (homepage + archives) */ .card { display: flex; flex-direction: column; } .card__title { font-family: var(--display); font-weight: 600; line-height: 1.18; margin: .4em 0 .35em; color: var(--ink); } .card__title a { color: inherit; text-decoration: none; } .card__title a:hover { color: var(--steel); } .card__excerpt { font-family: var(--read); font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0 0 12px; } /* BUTTONS (kept with the components they trigger; defined once here) */ .btn { display: inline-block; font-family: var(--ui); font-weight: 700; font-size: 13px; padding: 13px 22px; cursor: pointer; border: 1px solid transparent; text-decoration: none; line-height: 1; transition: background .15s ease, color .15s ease, border-color .15s ease; } /* Case and tracking scoped off migrated templates: the approved pages set sentence-case labels and their own letter-spacing. Every geometry value above stays global. */ body:not(.fi-tpl-2026-08) .btn { letter-spacing: .04em; text-transform: uppercase; } body:not(.fi-tpl-2026-08) .btn--primary { background: var(--ink); color: var(--paper); } body:not(.fi-tpl-2026-08) .btn--primary:hover { background: var(--steel); color: var(--paper); } .btn--secondary { background: transparent; color: var(--ink); border-color: var(--brass); } .btn--secondary:hover { background: var(--brass); color: var(--paper); } .btn--ghost { background: transparent; color: var(--steel); border-color: transparent; padding-inline: 2px; } .btn--ghost:hover { color: var(--brass-text); text-decoration: underline; text-underline-offset: 4px; } .btn--block { display: block; width: 100%; text-align: center; } .btn--on-dark { background: transparent; color: var(--paper); border-color: var(--brass); } .btn--on-dark:hover { background: var(--brass); color: var(--ink); } .btn[disabled], .btn--disabled { opacity: .42; cursor: not-allowed; pointer-events: none; } /* 25. FOOTER (dark; 3 columns + newsletter; rendered by Snippet 12) */ .footer { background: var(--ink); color: var(--paper); padding: 56px 0 28px; margin-top: 72px; } .footer a { color: var(--on-dark); text-decoration: none; } .footer a:hover { color: var(--brass); } .footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.4fr; gap: 40px; } .footer__col h4 { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; } .footer__brand { font-family: var(--display); font-size: 24px; color: var(--paper); margin-bottom: 10px; } .footer__about { font-size: 14px; color: var(--on-dark-soft); line-height: 1.55; max-width: 30ch; } .footer__news label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-soft); display: block; margin-bottom: 10px; } .footer__news .field-row { display: flex; gap: 0; } .footer__news input { flex: 1; min-width: 0; background: var(--dark-field-bg); border: 1px solid var(--dark-field-bd); color: var(--paper); padding: 12px 14px; font-family: var(--ui); font-size: 15px; } .footer__news input:focus { outline: none; border-color: var(--brass); } .footer__news button { background: var(--brass); color: var(--ink); border: none; padding: 0 18px; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .footer__copy { font-family: var(--mono); font-size: 12px; color: var(--on-dark-faint); letter-spacing: .03em; border-top: 1px solid var(--dark-rule); margin-top: 40px; padding-top: 20px; } /* 26. UTILITY (a11y helpers + small shared bits) */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .nowrap { white-space: nowrap; } [hidden] { display: none !important; } /* 27. RESPONSIVE (consolidated; ≤1080 article breaks, then ≤900, ≤768) */ /* ≥1080px — the 3-column investigation shell appears (desktop reading) */ @media (min-width: 1080px) { .article-shell { grid-template-columns: 200px minmax(0, 1fr) 280px; align-items: start; } .rail-left, .rail-right { display: block; position: sticky; top: 80px; } .article-body { max-width: none; margin: 0; } .article-body > p, .article-body > h2, .article-body > h3, .article-body > .summary, .article-body > .findings, .article-body > .pullquote, .article-body > .faq, .article-body > .stat-callout, .article-body > .sources { max-width: 64ch; } /* GeneratePress production mapping of the same shell */ body.single-post .site-main { grid-template-columns: 200px minmax(0, 1fr) 280px; align-items: start; } body.single-post .inside-article { max-width: none; margin: 0; } body.single-post .fi-rail-left, body.single-post .fi-rail-right { display: block; position: sticky; top: 80px; } } /* ≥1400px — TRUE Tufte margin sidenotes (the distinctive desktop win) */ @media (min-width: 1400px) { .article-body .has-sidenote, body.single-post .entry-content .has-sidenote { display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 36px; align-items: start; } .article-body .has-sidenote > p, body.single-post .entry-content .has-sidenote > p { max-width: 64ch; margin: 0 0 1.1em; } .article-body .has-sidenote .sidenote, body.single-post .entry-content .has-sidenote .sidenote { grid-column: 2; border-top: none; margin-top: 0; padding-top: 4px; } } /* ≤900px — homepage broadsheet collapses to a single column */ @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 30px; } .frontpage { grid-template-columns: 1fr; gap: 30px; } .secondary { border-left: none; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 24px; } .guides { grid-template-columns: 1fr; } .morewrap { grid-template-columns: 1fr; } .fieldnotes { border-left: none; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 24px; } .bridge__inner { grid-template-columns: 1fr; gap: 24px; } .service-steps { grid-template-columns: 1fr; } } /* ≤1259px — masthead squeeze tier: the full nav row needs ~1240px of bar width */ @media (max-width: 1380px) { .masthead__bar { gap: 14px; } .masthead__wordmark { font-size: 27px; } .masthead__nav { gap: 16px; } .masthead__nav a { font-size: 15px; } .masthead__cta { padding-left: 18px; padding-right: 18px; } .fi-theme-toggle { margin-left: 8px; } } /* ≤1259px — collapse masthead nav to its existing hamburger behavior early */ @media (max-width: 1259px) { .masthead__item--has-children { display: flex; flex-wrap: wrap; } .masthead__toplink { flex: 1; } .masthead__submenu { position: static; flex-basis: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; min-width: 0; padding: 2px 0 2px 14px; display: none; } .masthead__submenu.is-open { display: block; } .masthead__bar { flex-wrap: wrap; gap: 10px 14px; } .masthead__nav, .masthead__cta { display: none; } .masthead__issue { font-size: 11px; line-height: 1.35; max-height: 46px; padding-bottom: 10px; } .masthead__toggle { display: block; } .masthead.is-open .masthead__nav { display: flex; flex-direction: column; gap: 0; margin: 8px 0 4px; width: 100%; flex-basis: 100%; order: 3; border-top: 1px solid var(--hair); } .masthead.is-open .masthead__nav a { padding: 13px 2px; border-bottom: 1px solid var(--hair); } .masthead.is-open .masthead__cta { display: inline-block; margin: 10px 0 4px; order: 4; } } /* ≤768px — tablet/phone: stack blocks, reduce type scale */ @media (max-width: 768px) { body { font-size: 17px; } h1 { font-size: 38px; } h2 { font-size: 30px; } h3 { font-size: 22px; } h4 { font-size: 18px; } .lead-story h2 { font-size: 32px; } .article-body h2 { font-size: 30px; } .lede { font-size: 20px; } .stat__num { font-size: 42px; } .stat-callout__num { font-size: 56px; } .pullquote p { font-size: 23px; } .casefile__title { font-size: 21px; } body:not(.fi-tpl-2026-08) .fi-static-page > h1 + p { font-size: 20px; } .newsletter { padding: 28px; } .form-card { padding: 26px; } .footer__grid { grid-template-columns: 1fr; gap: 32px; } .methodology__grid { grid-template-columns: 1fr; gap: 14px; } .methodology__seal { position: static; margin-bottom: 14px; } .stat-strip { grid-template-columns: 1fr; } .stat + .stat { border-left: none; border-top: 1px solid var(--hair); } .stat-callout { flex-direction: column; gap: 10px; } .grid-2 { grid-template-columns: 1fr; } .tablewrap__hint { display: block; } /* show "scroll →" hint on touch */ table.compare { min-width: 560px; } .article-head { width: min(100% - 36px, 900px); } } /* 28. SMALL PHONE OVERRIDES (≤480px) */ @media (max-width: 480px) { h1 { font-size: 34px; } h2 { font-size: 28px; } body:not(.fi-tpl-2026-08) .fi-static-page > h1 + p { font-size: 19px; } .masthead__wordmark { font-size: 21px; } .masthead__wordmark img, .masthead__seal { width: 42px; height: 42px; } .summary, .methodology, .findings { padding-left: 18px; padding-right: 18px; } .article-body p { font-size: 18px; } table.compare { min-width: 460px; font-size: 14px; } .ratecard { table-layout: fixed; } .ratecard th, .ratecard td { padding: 10px 7px; overflow-wrap: anywhere; } .ratecard__tier { font-size: 16px; } .ratecard__desc { font-size: 13px; } .ratecard__price { font-size: 13px; white-space: normal; text-align: left; } } @media (max-width: 360px) { .masthead__inner { width: min(100% - 32px, var(--maxw)); } .masthead__wordmark { font-size: 20px; gap: 8px; } .masthead__wordmark img, .masthead__seal { width: 38px; height: 38px; } .fi-theme-toggle { font-size: 10px; padding: 6px; } } /* 29. PRINT + REDUCED-MOTION (+ AI-citation helpers) */ /* --- PRINT — manufacturers print investigations for procurement meetings ---- * */ @media print { :root { --paper: #fff; --card: #fff; --ink: #000; --grey: #222; --steel: #000; --hair: #999; } body { background: #fff; color: #000; font-size: 11.5pt; } .masthead, .footer, .rail-left, .rail-right, .fi-rail-left, .fi-rail-right, .cta-card, .bridge, .newsletter, .form-card, .masthead__toggle, .skip-link, .tablewrap__hint, #fi-progress { display: none !important; } /* let the reading column use the full page */ .article-shell, body.single-post .site-main { display: block; width: auto; margin: 0; } .article-body, body.single-post .inside-article { max-width: 100%; } a { color: #000; text-decoration: underline; } /* print the destination of editorial links (skip in-page anchors + the verify glyph) */ .article-body a[href^="http"]::after, .sources a[href^="http"]::after { content: " <" attr(href) ">"; font-family: monospace; font-size: 9pt; color: #333; word-break: break-all; } .summary, .findings, .methodology, .stat-strip, .stat-callout, .pullquote, table.compare, .figure, .casefile { break-inside: avoid; border-color: #999 !important; background: #fff !important; } table.compare thead th { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; } h1, h2, h3 { break-after: avoid; } .seal { color: #000; } } /* --- REDUCED MOTION — honor the user's OS setting ---------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* --- DARK MODE: lives in the cinematic layer * */ /* --- AI-CITATION / SCHEMA HELPERS * */ .summary, .findings { scroll-margin-top: 90px; } /* anchor-jump offset under sticky masthead */ .faq__item summary { scroll-margin-top: 90px; } [id] { scroll-margin-top: 90px; } /* all heading anchors clear the masthead */ /* --- WORDPRESS PAGE FOUNDATION * */ body.page:not(.home) .site-content { display: block; width: 100%; max-width: none; padding: 0; } body.page:not(.home) #primary { width: 100%; } body.page:not(.home) #right-sidebar, body.page:not(.home) .entry-header { display: none; } body.page:not(.home) .inside-article { max-width: none; margin: 0; padding: 0; background: transparent; } body.page:not(.home) .entry-content { margin: 0; } body.page:not(.home) .entry-content p:empty { display: none; } body.page:not(.home) .entry-content > br { display: none; } /* 30. STATIC PAGES (.fi-static-page — editorial-policy, about, terms, write-for-us) */ /* The `.fi-static-page` prose block below is the previous design's static-page treatment - hairline rules and 1.2em padding above every h2, 18px reading serif body copy, steel links. The approved templates reuse the wrapper and style its contents themselves, so it is scoped off migrated templates: on the archives it was drawing a rule across every article title and adding 31px to every list item. */ body:not(.fi-tpl-2026-08) .fi-static-page { width: min(100% - (var(--gutter) * 2), var(--max-text)); margin: 40px auto 72px; } /* optional mono kicker above the H1 (e.g. "PUBLICATION · POLICY") */ body:not(.fi-tpl-2026-08) .fi-static-page .fi-page-kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 10px; } body:not(.fi-tpl-2026-08) .fi-static-page > h1 { margin-bottom: 10px; } /* the intro paragraph immediately after the H1 reads as a lede */ body:not(.fi-tpl-2026-08) .fi-static-page > h1 + p { font-family: var(--read); font-size: 21px; line-height: 1.6; color: var(--lead); margin-bottom: 6px; } /* each H2 opens a section with a hairline rule (the ledger/dossier divider) */ body:not(.fi-tpl-2026-08) .fi-static-page h2 { margin: 1.7em 0 .5em; padding-top: 1.2em; border-top: 1px solid var(--hair); } body:not(.fi-tpl-2026-08) .fi-static-page h3 { margin: 1.3em 0 .4em; } body:not(.fi-tpl-2026-08) .fi-static-page p { font-family: var(--read); font-size: 18px; line-height: 1.7; color: var(--ink); } body:not(.fi-tpl-2026-08) .fi-static-page ul, body:not(.fi-tpl-2026-08) .fi-static-page ol { font-family: var(--read); font-size: 18px; line-height: 1.6; color: var(--ink); padding-left: 1.3em; margin: 0 0 1.1em; } body:not(.fi-tpl-2026-08) .fi-static-page li { margin-bottom: .5em; } body:not(.fi-tpl-2026-08) .fi-static-page a { color: var(--steel); } body:not(.fi-tpl-2026-08) .fi-static-page a:hover { color: var(--brass-text); } /* brass-ruled signature + "last updated" line used to close the pages */ .fi-signature { margin-top: 40px; padding-top: 20px; border-top: 2px solid var(--brass); font-family: var(--mono); font-size: 13px; letter-spacing: .03em; color: var(--grey); } .fi-signature strong { color: var(--ink); font-weight: 600; } .fi-updated { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--grey); letter-spacing: .03em; } /* About-page specifics: the recurring-character slot + a 2-up split (service vs publ… */ .about-page .fi-investigator-slot { margin: 30px 0; padding: 26px; border: 1px solid var(--hair); background: var(--card); text-align: center; font-family: var(--mono); font-size: 13px; color: var(--grey); line-height: 1.5; } .about-page .fi-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 24px 0; } .about-page .fi-twocol h3 { margin-top: 0; } @media (max-width: 768px) { .about-page .fi-twocol { grid-template-columns: 1fr; } } /* 31. ARCHIVES, SEARCH & EMPTY STATES */ body.archive .site-content, body.search .site-content, body.error404 .site-content { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; padding: 44px 0 72px; } body.archive #primary, body.search #primary, body.error404 #primary { width: 100%; } body.archive #right-sidebar, body.search #right-sidebar, body.error404 #right-sidebar { display: none; } /* Scoped: the previous design's three-card archive grid. On a migrated archive the approved `.arc-layout` is the grid, and wrapping it in another one collapsed its flexible column to zero. */ body:not(.fi-tpl-2026-08) :is(body.archive .site-main, body.search .site-main) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } body.archive .site-main > .fi-archive-head, body.search .site-main > .fi-archive-head, body.archive .site-main > .paging-navigation, body.search .site-main > .paging-navigation, body.archive .site-main > .no-results, body.search .site-main > .no-results, body.search .site-main > .fi-empty-state { grid-column: 1 / -1; } /* Scoped: the previous 404 design hides everything in
except its own `.fi-empty-state`, which hid the approved 404 page entirely. Unmigrated routes keep it. */ body:not(.fi-tpl-2026-08) :is(body.archive .site-main > .page-header:not(.fi-archive-head), body.search .site-main > .page-header:not(.fi-archive-head), body.search .site-main > .no-results, body.error404 .site-main > :not(.fi-empty-state)) { display: none; } body.archive .site-main > article, body.search .site-main > article { min-width: 0; margin: 0; border: 1px solid var(--hair); border-top: 3px solid var(--brass); background: var(--card); } body.archive .site-main > article .inside-article, body.search .site-main > article .inside-article { padding: 22px; background: transparent; } body.archive .site-main > article .post-image, body.search .site-main > article .post-image { margin: -22px -22px 20px; } body.archive .site-main > article .post-image img, body.search .site-main > article .post-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) contrast(1.08); } body.archive .site-main > article .entry-title, body.search .site-main > article .entry-title { font-size: 23px; margin: 8px 0 10px; } body.archive .site-main > article .entry-summary, body.search .site-main > article .entry-summary { font-family: var(--read); font-size: 16px; line-height: 1.55; } .fi-archive-head { max-width: var(--max-text); margin-bottom: 34px; padding-bottom: 24px; border-bottom: 3px solid var(--ink); } .fi-archive-head .fi-page-kicker { font-family: var(--mono); color: var(--brass-text); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .fi-archive-head h1 { margin: 8px 0 10px; } .fi-archive-head p { max-width: 62ch; color: var(--grey); } .fi-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .fi-archive-card { border: 1px solid var(--hair); background: var(--card); min-width: 0; } .fi-archive-card__media { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; } .fi-archive-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); } .fi-archive-card__body { padding: 22px; } .fi-archive-card h2 { font-size: 23px; margin: 8px 0 10px; } .fi-archive-card h2 a { color: inherit; text-decoration: none; } .fi-archive-card h2 a:hover { color: var(--steel); } .fi-archive-card p { font-family: var(--read); font-size: 16px; line-height: 1.55; } .fi-empty-state { max-width: var(--max-text); padding: 38px; border: 1px solid var(--hair); border-top: 3px solid var(--brass); background: var(--card); } .fi-empty-state .patent { width: 180px; color: var(--grey); margin-bottom: 24px; } .paging-navigation, .nav-links { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 8px; } .page-numbers { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); color: var(--ink); font-family: var(--mono); font-size: 13px; text-decoration: none; } .page-numbers.current, .page-numbers:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* 32. CONTACT & INVESTIGATION INTAKE PAGES */ .fi-contact-page { width: min(100% - (var(--gutter) * 2), 980px); margin: 42px auto 80px; } :where(body:not(.fi-tpl-2026-08)) .fi-page-hero { max-width: 760px; margin: 0 auto 38px; text-align: center; } :where(body:not(.fi-tpl-2026-08)) .fi-page-hero .fi-page-kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); } :where(body:not(.fi-tpl-2026-08)) .fi-page-hero h1 { margin: 10px 0 12px; } :where(body:not(.fi-tpl-2026-08)) .fi-page-hero p { font-family: var(--read); font-size: 21px; line-height: 1.6; color: var(--lead); } .fi-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 42px; align-items: start; } .fi-form-card { border: 1px solid var(--hair); border-top: 3px solid var(--brass); background: var(--card); padding: 30px; } .fi-form-card h2 { font-size: 27px; margin-bottom: 8px; } .fi-form-card > p { color: var(--grey); } /* Family scoped: the consent note is a

inside the form card, so the reading serif was reaching it where the approved page shows the interface sans. Colour stays global. */ body:not(.fi-tpl-2026-08) .fi-form-card > p { font-family: var(--read); } .fi-form-group { margin-top: 20px; } .fi-form-group label { display: block; margin-bottom: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); } .fi-form-group input, .fi-form-group select, .fi-form-group textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 16px; } .fi-form-group textarea { min-height: 140px; resize: vertical; } .fi-form-group input:focus, .fi-form-group select:focus, .fi-form-group textarea:focus { outline: none; border-color: var(--steel); box-shadow: var(--focus-ring); } /* Scoped: the approved pages give the consent note the page's own body font at 16.5px; the reference carries no rule here at all and simply inherits. */ .fi-form-help, .fi-form-consent { margin-top: 8px; } body:not(.fi-tpl-2026-08) .fi-form-help, body:not(.fi-tpl-2026-08) .fi-form-consent { margin-top: 8px; font-family: var(--ui); font-size: 13px; line-height: 1.5; color: var(--grey); } .fi-form-submit { margin-top: 24px; width: 100%; } .fi-contact-sidebar { display: grid; gap: 20px; } .fi-info-card { border: 1px solid var(--hair); background: var(--card); padding: 24px; } .fi-info-card h2, .fi-info-card h3 { color: var(--ink); font-size: 21px; } .fi-info-card p, .fi-info-card li { font-size: 15px; line-height: 1.55; color: var(--grey); } .fi-info-card ul, .fi-checklist { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .fi-checklist li { position: relative; padding-left: 22px; } .fi-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--brass-text); font-family: var(--mono); font-weight: 600; } /* 33. SERVICE HUB & SERVICE DETAIL PAGES */ .fi-service-page { width: min(100% - (var(--gutter) * 2), 1040px); margin: 42px auto 80px; } .fi-service-section { padding: 42px 0; border-top: 1px solid var(--hair); } .fi-service-section:first-of-type { border-top: 3px solid var(--ink); } .fi-service-section__head { max-width: var(--max-text); margin-bottom: 28px; } .fi-service-section__head .cat { margin-bottom: 8px; } .fi-service-section__head p { font-family: var(--read); font-size: 18px; color: var(--grey); } .fi-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .fi-service-card { border: 1px solid var(--hair); border-top: 3px solid var(--brass); background: var(--card); padding: 26px; } .fi-service-card .cat { margin-bottom: 12px; } .fi-service-card h3 { color: var(--ink); font-size: 23px; } .fi-service-card p { font-family: var(--read); font-size: 16px; line-height: 1.55; color: var(--grey); } body:not(.fi-tpl-2026-08) .fi-service-card a { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } .fi-process { counter-reset: process; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .fi-process__step { counter-increment: process; border-top: 2px solid var(--brass); padding-top: 18px; } .fi-process__step::before { content: "0" counter(process); display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--brass-text); } .fi-process__step h3 { color: var(--ink); } .fi-process__step p { font-family: var(--read); font-size: 16px; color: var(--grey); } .fi-service-cta { background: var(--ink); color: var(--paper); padding: 38px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; } .fi-service-cta h2 { color: var(--paper); margin-bottom: 8px; } .fi-service-cta p { color: var(--on-dark); margin: 0; } /* 34. LEGAL & POLICY PAGES */ .fi-legal-page { width: min(100% - (var(--gutter) * 2), var(--max-text)); margin: 40px auto 72px; } .fi-legal-page .fi-page-kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); } .fi-legal-page .fi-legal-updated { display: inline-block; margin: 4px 0 24px; font-family: var(--mono); font-size: 12px; color: var(--grey); letter-spacing: .04em; text-transform: uppercase; } .fi-legal-page .fi-legal-toc { margin: 24px 0 34px; padding: 22px 24px; border: 1px solid var(--hair); border-left: 4px solid var(--brass); background: var(--card); } .fi-legal-page .fi-legal-toc strong { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; } .fi-legal-page .fi-legal-toc ol { margin: 0; padding-left: 20px; } .fi-legal-page h2 { margin: 1.7em 0 .5em; padding-top: 1.2em; border-top: 1px solid var(--hair); } .fi-legal-page p, .fi-legal-page li { font-family: var(--read); font-size: 18px; line-height: 1.7; } .fi-legal-table { width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--card); font-size: 15px; } .fi-legal-table th, .fi-legal-table td { padding: 13px 14px; border: 1px solid var(--hair); text-align: left; vertical-align: top; } .fi-legal-table th { background: var(--steel); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; } /* 35. IMAGE LIGHTBOX */ .fi-lightboxable { cursor: zoom-in; } @media (max-width: 900px) { body.archive .site-main, body.search .site-main, .fi-archive-grid, .fi-service-grid, .fi-process { grid-template-columns: 1fr 1fr; } .fi-contact-layout, .fi-service-cta { grid-template-columns: 1fr; } .fi-contact-sidebar { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { body.archive .site-main, body.search .site-main, .fi-archive-grid, .fi-service-grid, .fi-process, .fi-contact-sidebar { grid-template-columns: 1fr; } .fi-form-card, .fi-service-card, .fi-service-cta, .fi-empty-state { padding: 22px; } :where(body:not(.fi-tpl-2026-08)) .fi-page-hero { text-align: left; } :where(body:not(.fi-tpl-2026-08)) .fi-page-hero p { font-size: 19px; } } /* END factory-investigator.css v1.2 */ /* (A) DARK MODE — token overrides (authoritative hex = design doc 09 §4) */ html[data-theme="dark"] { --ink: #F5F1E8; /* paper becomes the text */ --paper: #161310; /* deep charcoal page */ --card: #1F1A14; /* slightly lifted cards */ --steel: #4A7A95; /* lighter blueprint blue (visible on dark) */ --brass: #C99550; /* candlelit metal */ --brass-text: #D4A66B; /* brighter small brass text */ --oxide: #B85A4D; /* lighter oxide red */ --grey: #9B948A; --lead: #E8E0D0; --hair: #2E2820; --rule: #3A3328; /* derived surfaces that must also flip for legibility (not in doc 09, required so zebra rows + focus ring stay readable on dark) */ --row-zebra: #221C15; --focus-ring: 0 0 0 3px rgba(74,122,149,.55); /* dark-steel ring */ color-scheme: dark; /* native form controls/scrollbars */ } /* --- (A2) DARK SURFACE CORRECTIONS * */ [data-theme="dark"] .footer, [data-theme="dark"] .bridge { background: #100C09; } [data-theme="dark"] .bridge h2 { color: var(--ink); } /* was --paper (now dark) */ [data-theme="dark"] .duo-block, [data-theme="dark"] .headshot { background: #0E0B08; } [data-theme="dark"] .duo-block .patent, [data-theme="dark"] .headshot .patent { color: var(--ink); } /* keep lines light on the dark tile */ /* Comparison-table header: paper-on-steel would become dark-on-mid-blue in dark */ [data-theme="dark"] table.compare thead th { background: #15303E; color: var(--ink); } /* Primary button inverts to a light chip on dark — keep its hover legible. */ [data-theme="dark"] .btn--primary:hover { background: var(--steel); color: #10110F; } /* --- (A3) DARK ATMOSPHERICS (the Peaky-Blinders "smoke-lit office") * */ [data-theme="dark"] .seal { filter: drop-shadow(0 0 8px rgba(201,149,80,.18)); } /* wax-seal glow */ [data-theme="dark"] .rule-double, [data-theme="dark"] .stat__num, [data-theme="dark"] .stat-callout__num { filter: drop-shadow(0 0 6px rgba(201,149,80,.15)); } [data-theme="dark"] .methodology { box-shadow: 0 0 24px rgba(201,149,80,.06); } /* Smoke-tone gradient wash — dark mode only, 6% peak, fixed, never interactive. */ [data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483646; background: radial-gradient(120% 80% at 80% -10%, rgba(201,149,80,.06), transparent 55%), radial-gradient(100% 70% at 0% 110%, rgba(31,58,95,.07), transparent 55%); } /* PAPER GRAIN OVERLAY (signature moment 5) — both themes, static, ~2% opacity. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; opacity: .022; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } [data-theme="dark"] body::after { opacity: .03; } /* a touch more tooth on dark */ /* THEME TOGGLE — injected into the masthead by the JS (uppercase mono link) */ .fi-theme-toggle { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); background: none; border: none; cursor: pointer; padding: 6px 8px; margin-left: 14px; line-height: 1; white-space: nowrap; } .fi-theme-toggle:hover { color: var(--brass-text); } @media (max-width: 768px) { .fi-theme-toggle { margin-left: auto; } } /* RED-PEN CURSOR (signature moment 8) — annotated screenshots. Not motion; */ .fi-annotated-screenshot:hover { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewport='0 0 28 28'%3E%3Cpath d='M4 24 L7 18 L20 5 a2 2 0 0 1 3 3 L10 21 Z' fill='%238B3A2F' stroke='%23F5F1E8' stroke-width='1'/%3E%3Cpath d='M4 24 L7 18 L10 21 Z' fill='%23161310'/%3E%3C/svg%3E") 4 24, crosshair; } /* (B) MOTION — everything below is gated behind `html.fi-cin` */ /* keyframes (defined once; referenced under the gate) */ @keyframes fi-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fi-page-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fi-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes fi-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes fi-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes fi-stamp { from { opacity: 0; transform: rotate(-14deg) scale(1.12); } to { opacity: 1; transform: rotate(-5deg) scale(1); } } @keyframes fi-titlecard { from { opacity: 0; letter-spacing: .28em; filter: blur(3px); } to { opacity: 1; letter-spacing: .08em; filter: none; } } @keyframes fi-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } @keyframes fi-draw { to { stroke-dashoffset: 0; } } /* moment 6 — page fade-in on load (reading-paced 0.4s). Also opt into native MPA */ html.fi-cin body { animation: fi-page-in .4s ease both; } /* moment 1 — opening dossier reveal (FIRST VISIT ONLY; JS adds .fi-cin-dossier). */ html.fi-cin .fi-cin-dossier .masthead__wordmark { animation: fi-wipe .6s ease both; } html.fi-cin .fi-cin-dossier + .rule-double, html.fi-cin .fi-cin-dossier .rule-double { transform-origin: left center; animation: fi-rule-draw .4s ease .5s both; } html.fi-cin .fi-cin-dossier .masthead__issue { animation: fi-drop .3s ease .9s both; } /* moment 2 — patent drawings sketch in on scroll (JS adds .fi-cin-draw in view). */ html.fi-cin .fi-cin-draw .patent :is(path, line, rect, circle, polyline, polygon) { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: fi-draw 1.1s ease forwards; } html.fi-cin .fi-cin-draw .patent text { opacity: 0; animation: fi-page-in .4s ease .9s forwards; } /* light stagger so it doesn't all snap at once */ html.fi-cin .fi-cin-draw .patent g:nth-of-type(2) :is(line,rect,circle) { animation-delay: .15s; } html.fi-cin .fi-cin-draw .patent g:nth-of-type(3) :is(line,rect,circle) { animation-delay: .3s; } /* moment 3 — methodology stamp "lands" (JS adds .is-in in view) */ html.fi-cin .methodology .methodology__seal { opacity: 0; } html.fi-cin .methodology.is-in .methodology__seal { animation: fi-stamp .45s cubic-bezier(.2,.8,.3,1.1) both; } /* moment 4 — Field Report title card (JS adds .is-in; element optional, hooks on */ html.fi-cin .fi-field-report { opacity: 0; } html.fi-cin .fi-field-report.is-in { animation: fi-titlecard .8s ease both; } html.fi-cin .fi-field-report.is-in .fi-field-report__status { animation: fi-pulse 1.2s ease 2; } /* 2 cycles then stop */ /* generic section fade-up (JS tags .fi-cin-fade on summary/findings/stat blocks/ */ html.fi-cin .fi-cin-fade { opacity: 0; } html.fi-cin .fi-cin-fade.is-in { animation: fi-fade-up .5s ease both; } /* moment 7 — comparison tables populate row-by-row (JS adds .fi-cin-rows in view). */ html.fi-cin table.compare tbody tr { opacity: 0; } html.fi-cin table.compare.fi-cin-rows tbody tr { animation: fi-fade-up .4s ease both; } html.fi-cin table.compare.fi-cin-rows tbody tr:nth-child(1) { animation-delay: .05s; } html.fi-cin table.compare.fi-cin-rows tbody tr:nth-child(2) { animation-delay: .15s; } html.fi-cin table.compare.fi-cin-rows tbody tr:nth-child(3) { animation-delay: .25s; } html.fi-cin table.compare.fi-cin-rows tbody tr:nth-child(4) { animation-delay: .35s; } html.fi-cin table.compare.fi-cin-rows tbody tr:nth-child(5) { animation-delay: .45s; } html.fi-cin table.compare.fi-cin-rows tbody tr:nth-child(6) { animation-delay: .55s; } html.fi-cin table.compare.fi-cin-rows tbody tr:nth-child(7) { animation-delay: .65s; } html.fi-cin table.compare.fi-cin-rows tbody tr:nth-child(n+8) { animation-delay: .75s; } /* NATIVE PAGE TRANSITIONS (moment 6, enhanced) — MPA view transitions where */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; } /* REDUCED MOTION — belt-and-suspenders. The JS already withholds `.fi-cin` when */ @media (prefers-reduced-motion: reduce) { html.fi-cin .fi-cin-fade, html.fi-cin .fi-field-report, html.fi-cin .methodology .methodology__seal, html.fi-cin table.compare tbody tr { opacity: 1 !important; } html.fi-cin *, html.fi-cin *::before, html.fi-cin *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } html.fi-cin .patent :is(path,line,rect,circle,polyline,polygon) { stroke-dashoffset: 0 !important; } @view-transition { navigation: none; } } /* POLISH PASS — click-stable nav, aligned widths, article fullness, dark contrast */ :root { --maxw: 1320px; } .grid-container { max-width: var(--maxw); } .masthead__inner { width: min(100% - (var(--gutter) * 2), var(--maxw)); } .masthead__item--has-children:hover .masthead__submenu:not(.is-open) { opacity: 0; visibility: hidden; transform: translateY(6px); } .masthead__submenu:focus-within, .masthead__submenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .masthead__submenu-all { border-bottom: 1px solid var(--hair); margin-bottom: 6px; padding-bottom: 6px; } .masthead__submenu-all a { color: var(--brass-text); font-weight: 700; } /* Locked Dispatches two-column panel. Opens only through the accessible caret. */ .masthead__submenu--panel { left: auto; right: 0; width: min(680px, calc(100vw - 48px)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 14px; } .masthead__item--has-children .masthead__submenu--panel.is-open { display: grid; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .masthead__submenu-col { min-width: 0; padding: 0 10px; } .masthead__submenu-col + .masthead__submenu-col { border-left: 1px solid var(--hair); } .masthead__submenu--panel a { display: block; padding: 10px 8px; white-space: normal; line-height: 1.25; } .masthead__submenu--panel .masthead__submenu-all { color: var(--brass-text); font-weight: 700; border-bottom: 1px solid var(--hair); margin-bottom: 5px; } .masthead__submenu-divider { display: block; border-top: 1px solid var(--hair); margin: 6px 8px; } @media (max-width: 1179px) { .masthead__submenu--panel { width: 100%; grid-template-columns: 1fr; padding: 4px 0 4px 14px; } .masthead__item--has-children .masthead__submenu--panel.is-open { display: grid; } .masthead__submenu-col { padding: 0; } .masthead__submenu-col + .masthead__submenu-col { border-left: 0; } } /* Final Dispatches editorial panel. */ .masthead__submenu--panel { --fi-panel-bg: #FBF9F3; --fi-panel-text: #161310; --fi-panel-muted: #6E665C; --fi-panel-hair: #D8D0C3; --fi-panel-hover: rgba(201,149,80,.08); width: min(940px, calc(100vw - 48px)); grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); grid-template-areas: "head head" "topics featured"; gap: 0; padding: 0; background: var(--fi-panel-bg); color: var(--fi-panel-text); border: 1px solid var(--fi-panel-hair); border-top: 3px solid var(--brass); box-shadow: none; } @media (min-width: 1180px) { .masthead__bar { position: relative; } .masthead__item--has-children { position: static; } .masthead__submenu--panel { right: 0; left: auto; } } html[data-theme="dark"] .masthead__submenu--panel { --fi-panel-bg: #1F1A14; --fi-panel-text: #F5F1E8; --fi-panel-muted: #9A9182; --fi-panel-hair: #2A241C; } .masthead__panel-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 20px 14px; border-bottom: 1px solid var(--fi-panel-hair); } .masthead__panel-kicker, .masthead__feed-tag { font-family: var(--mono); color: var(--brass-text); font-size: 10px; font-weight: 700; letter-spacing: .11em; line-height: 1.3; text-transform: uppercase; } .masthead__submenu--panel .masthead__submenu-all { margin: 0; padding: 0; border: 0; color: var(--brass-text); font-family: var(--display); font-size: 16px; font-weight: 650; white-space: nowrap; } .masthead__topics { grid-area: topics; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 8px; padding: 14px 15px 16px; } .masthead__submenu--panel .masthead__topic { display: block; min-width: 0; padding: 9px 10px 9px 12px; border: 0; border-left: 2px solid transparent; color: var(--fi-panel-text); background: transparent; white-space: normal; text-decoration: none; } .masthead__submenu--panel .masthead__topic:hover, .masthead__submenu--panel .masthead__topic:focus-visible, .masthead__submenu--panel .masthead__topic[aria-current="page"] { border-left-color: var(--brass); color: var(--fi-panel-text); background: var(--fi-panel-hover); } .masthead__topic-name, .masthead__topic-desc { display: block; } .masthead__topic-name { font-family: var(--ui); font-size: 14px; font-weight: 500; line-height: 1.25; } .masthead__topic-desc { margin-top: 3px; overflow: hidden; color: var(--fi-panel-muted); font-family: var(--ui); font-size: 11.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .masthead__featured { grid-area: featured; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 22px 21px 18px; border-left: 1px solid var(--fi-panel-hair); } .masthead__submenu--panel .masthead__featured-title { margin-top: 10px; padding: 0; border: 0; color: var(--fi-panel-text); font-family: var(--display); font-size: 18px; font-weight: 650; line-height: 1.25; white-space: normal; } .masthead__featured-meta { margin-top: 8px; color: var(--fi-panel-muted); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; } .masthead__submenu--panel .masthead__featured-read { margin-top: 13px; padding: 0; border: 0; color: var(--brass-text); font-family: var(--ui); font-size: 12px; font-weight: 700; } .masthead__featured-divider { width: 100%; margin: 18px 0 13px; border-top: 1px solid var(--fi-panel-hair); } .masthead__submenu--panel .masthead__news-link { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; color: var(--fi-panel-text); font-family: var(--display); font-size: 16px; font-weight: 650; } @media (max-width: 1179px) { .masthead__submenu--panel { width: 100%; grid-template-columns: 1fr; grid-template-areas: "head" "topics" "featured"; padding: 0; } .masthead__featured { border-top: 1px solid var(--fi-panel-hair); border-left: 0; } .masthead.is-open .masthead__submenu--panel a { border-bottom: 0; } } @media (max-width: 640px) { .masthead__panel-head { align-items: flex-start; flex-direction: column; gap: 8px; } .masthead__topics { grid-template-columns: 1fr; } .masthead__topic-desc { white-space: normal; } } @media (min-width: 1080px) { body.single-post .site-content { width: min(100% - 48px, var(--maxw)); } body.single-post .site-main { grid-template-columns: 150px minmax(0, 720px) minmax(250px, 1fr); gap: 38px; } body.single-post .entry-content > p, body.single-post .entry-content > h2, body.single-post .entry-content > h3, body.single-post .entry-content > .summary, body.single-post .entry-content > .findings, body.single-post .entry-content > .pullquote, body.single-post .entry-content > .faq, body.single-post .entry-content > .stat-callout, body.single-post .entry-content > .sources, body.single-post .entry-content > .methodology { max-width: 720px; } } html[data-theme="dark"] { --steel: #72A6C2; --grey: #B9B1A4; --hair: #70634F; --rule: #756652; --dark-field-bd: #756652; } html[data-theme="dark"] a { text-decoration-thickness: .08em; text-underline-offset: .16em; } html[data-theme="dark"] .card, html[data-theme="dark"] .summary, html[data-theme="dark"] .methodology, html[data-theme="dark"] .cta-card, html[data-theme="dark"] .form-card, html[data-theme="dark"] .fi-author-box, html[data-theme="dark"] .fi-related-posts { border-color: var(--hair); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color: var(--ink); background: #241E18; border-color: var(--rule); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #B9B1A4; opacity: 1; } html[data-theme="dark"] .footer__news input { border-color: #756652; color: var(--on-dark); } /* DISPATCH LISTINGS — ivristech-style card feed + filled FI sidebar */ /* Scoped: the content/sidebar split for the previous archive design. A migrated archive has no theme sidebar - its `.arc-facets` rail is inside

- so this grid left a 300px track empty and narrowed the article list. */ body:not(.fi-tpl-2026-08) :is(body.blog .site-content, body.category-investigations .site-content, body.category-buyer-guides .site-content, body.category-manufacturer-interviews .site-content, body.category-news .site-content) { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; width: min(100% - 48px, var(--maxw)); padding: 44px 0 72px; align-items: start; } body.blog #primary, body.category-investigations #primary, body.category-buyer-guides #primary, body.category-manufacturer-interviews #primary, body.category-news #primary { width: 100% !important; min-width: 0; } /* Scoped: the approved archive has no theme sidebar - its `.arc-facets` rail is inside the replaced `
`. Unmigrated archives keep the sidebar exactly as it is. */ body:not(.fi-tpl-2026-08) :is(body.blog #right-sidebar, body.category-investigations #right-sidebar, body.category-buyer-guides #right-sidebar, body.category-manufacturer-interviews #right-sidebar, body.category-news #right-sidebar) { width: 100% !important; display: block !important; } body.blog #right-sidebar .widget, body.category-investigations #right-sidebar .widget, body.category-buyer-guides #right-sidebar .widget, body.category-manufacturer-interviews #right-sidebar .widget, body.category-news #right-sidebar .widget { display: none !important; } /* Scoped: the previous design's two-column card grid. On a migrated archive the approved `.arc-layout` is the grid, and nesting it collapsed its flexible column. */ body:not(.fi-tpl-2026-08) :is(body.blog .site-main, body.category-investigations .site-main, body.category-buyer-guides .site-main, body.category-manufacturer-interviews .site-main, body.category-news .site-main) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; } body.blog .site-main > .fi-archive-head, body.category-investigations .site-main > .fi-archive-head, body.category-buyer-guides .site-main > .fi-archive-head, body.category-manufacturer-interviews .site-main > .fi-archive-head, body.category-news .site-main > .fi-archive-head, body.blog .site-main > .paging-navigation, body.archive.category .site-main > .paging-navigation, body.archive.category .site-main > .no-results { grid-column: 1 / -1; } body.blog .fi-archive-head, body.archive.category .fi-archive-head { max-width: none; margin-bottom: 6px; } body.blog article.type-post, body.archive.category article.type-post { display: flex !important; flex-direction: column; min-width: 0; margin: 0 !important; background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } body.blog article.type-post:hover, body.archive.category article.type-post:hover { transform: translateY(-4px); border-color: var(--brass); box-shadow: 0 16px 36px rgba(0,0,0,.24); } body.blog article.type-post .inside-article, body.archive.category article.type-post .inside-article { display: flex !important; flex-direction: column; height: 100%; padding: 22px !important; background: transparent !important; } body.blog article.type-post .entry-title, body.archive.category article.type-post .entry-title { font-family: var(--display); font-size: 24px; line-height: 1.2; margin: 8px 0 10px; } body.blog article.type-post .entry-title a, body.archive.category article.type-post .entry-title a { color: var(--ink); text-decoration: none; } body.blog article.type-post .entry-title a:hover, body.archive.category article.type-post .entry-title a:hover { color: var(--steel); } body.blog article.type-post .entry-meta, body.archive.category article.type-post .entry-meta { font-family: var(--mono); font-size: 11px; color: var(--grey); } body.blog article.type-post .entry-summary, body.archive.category article.type-post .entry-summary { flex: 1; font-family: var(--read); font-size: 16px; line-height: 1.55; color: var(--ink); } body.blog article.type-post footer.entry-meta, body.archive.category article.type-post footer.entry-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); } body.blog article.type-post .cat-links a, body.archive.category article.type-post .cat-links a { display: inline-block; padding: 4px 9px; background: var(--brass); color: #161310; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; } body.blog article.type-post .tags-links, body.archive.category article.type-post .tags-links, body.blog article.type-post .comments-link, body.archive.category article.type-post .comments-link { display: none; } .fi-list-sidebar { display: grid; gap: 22px; position: sticky; top: 90px; } .fi-list-sidecard { padding: 24px; background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); } .fi-list-sidecard__label { margin: 0 0 6px; font-family: var(--mono); color: var(--brass-text); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .fi-list-sidecard h2 { margin: 0 0 10px; font-size: 23px; line-height: 1.2; } .fi-list-sidecard p { color: var(--grey); font-size: 15px; line-height: 1.5; } .fi-list-sections { list-style: none; margin: 14px 0 0; padding: 0; } .fi-list-sections li { border-top: 1px solid var(--hair); } .fi-list-sections li:last-child { border-bottom: 1px solid var(--hair); } .fi-list-sections a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; color: var(--ink); font-family: var(--ui); font-weight: 600; text-decoration: none; } .fi-list-sections a:hover { color: var(--steel); } .fi-list-sidecard button[disabled] { opacity: .7; cursor: not-allowed; } @media (max-width: 980px) { body:not(.fi-tpl-2026-08) :is(body.blog .site-content, body.category-investigations .site-content, body.category-buyer-guides .site-content, body.category-manufacturer-interviews .site-content, body.category-news .site-content) { grid-template-columns: 1fr; } .fi-list-sidebar { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { body:not(.fi-tpl-2026-08) :is(body.blog .site-main, body.category-investigations .site-main, body.category-buyer-guides .site-main, body.category-manufacturer-interviews .site-main, body.category-news .site-main) { grid-template-columns: 1fr !important; } .fi-list-sidebar { grid-template-columns: 1fr; } } /* Seven-topic taxonomy archives. */ /* 2026-09-07: retired on migrated Desk archives. This reserved a 300px column for the sidebar that the rule above used to force visible. With that sidebar retired the track was simply empty, holding these three Desks at 986px while the other three ran the full 1521px. Kept for any archive that has not been migrated. */ body.archive.category:not(.fi-tpl-2026-08):is( .category-manufacturing-software, .category-industrial-automation-ai, .category-electronics-pcb-manufacturing, .category-supply-chain-logistics, .category-operations-quality-maintenance, .category-ot-cybersecurity-compliance, .category-manufacturer-website-growth-investigations ) .site-content { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; width: min(100% - 48px, var(--maxw)); padding: 44px 0 72px; align-items: start; } body.archive.category:is( .category-manufacturing-software, .category-industrial-automation-ai, .category-electronics-pcb-manufacturing, .category-supply-chain-logistics, .category-operations-quality-maintenance, .category-ot-cybersecurity-compliance, .category-manufacturer-website-growth-investigations ) #primary, body.archive.category:is( .category-manufacturing-software, .category-industrial-automation-ai, .category-electronics-pcb-manufacturing, .category-supply-chain-logistics, .category-operations-quality-maintenance, .category-ot-cybersecurity-compliance, .category-manufacturer-website-growth-investigations ) #right-sidebar { width: 100% !important; min-width: 0; } /* 2026-09-07: retired on migrated Desk archives. The accepted migrated archive has no sidebar: /blog/, The Watch, and the three Desks whose slugs this rule never matched all render #right-sidebar as display:none and run the card grid full width. On the three Desks it did match, it forced a 272px column whose only contents were the WordPress default Search, Recent Posts and Recent Comments widgets - already hidden by the companion rule below - so it reserved empty space and narrowed the cards for no reader benefit. Kept for any archive that has not been migrated. */ body.archive.category:not(.fi-tpl-2026-08):is( .category-manufacturing-software, .category-industrial-automation-ai, .category-electronics-pcb-manufacturing, .category-supply-chain-logistics, .category-operations-quality-maintenance, .category-ot-cybersecurity-compliance, .category-manufacturer-website-growth-investigations ) #right-sidebar { display: block !important; } body.archive.category:is( .category-manufacturing-software, .category-industrial-automation-ai, .category-electronics-pcb-manufacturing, .category-supply-chain-logistics, .category-operations-quality-maintenance, .category-ot-cybersecurity-compliance, .category-manufacturer-website-growth-investigations ) #right-sidebar .widget { display: none !important; } /* 2026-09-07: retired on migrated Desk archives. This is the previous design's two-column post grid. The migrated archive renders one .arc-body whose own .arc-grid is the card grid, so forcing two columns here collapsed that grid to ~103px tracks and wrapped card titles one word per line. Kept for any archive that has not been migrated. */ body.archive.category:not(.fi-tpl-2026-08):is( .category-manufacturing-software, .category-industrial-automation-ai, .category-electronics-pcb-manufacturing, .category-supply-chain-logistics, .category-operations-quality-maintenance, .category-ot-cybersecurity-compliance, .category-manufacturer-website-growth-investigations ) .site-main { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; } @media (max-width: 980px) { body.archive.category:is( .category-manufacturing-software, .category-industrial-automation-ai, .category-electronics-pcb-manufacturing, .category-supply-chain-logistics, .category-operations-quality-maintenance, .category-ot-cybersecurity-compliance, .category-manufacturer-website-growth-investigations ) .site-content { grid-template-columns: 1fr; } } @media (max-width: 720px) { body.archive.category:is( .category-manufacturing-software, .category-industrial-automation-ai, .category-electronics-pcb-manufacturing, .category-supply-chain-logistics, .category-operations-quality-maintenance, .category-ot-cybersecurity-compliance, .category-manufacturer-website-growth-investigations ) .site-main { grid-template-columns: 1fr !important; } } /* THE LIBRARY MEGA-MENU + DARK-ONLY LOCK */ html, html[data-theme], body { color-scheme: dark; } .fi-theme-toggle { display: none !important; } .footer { background: #161310 !important; } .masthead__wordmark, .masthead__wordmark:visited, .footer__brand { color: #F5F1E8 !important; } .masthead__seal { width: 36px; height: 36px; } .masthead__library-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; border: 0; background: transparent; color: #F5F1E8; font-family: var(--ui); font-size: 16px; font-weight: 500; cursor: pointer; } .masthead__library-toggle:hover, .masthead__library-toggle:focus-visible, .masthead__library-toggle[aria-expanded="true"] { color: var(--brass-text); } .library-menu { right: 0; left: auto; width: min(1120px, calc(100vw - 48px)); padding: 0; grid-template-columns: 270px minmax(0, 1fr); background: #1F1A14; color: #F5F1E8; border: 1px solid #2A241C; border-top: 3px solid #C99550; box-shadow: none; } .masthead__item--has-children .library-menu.is-open { display: grid; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .library-sections { padding: 18px 14px 14px; border-right: 1px solid #2A241C; } .library-kicker { margin: 0 8px 12px; color: #D4A66B; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .11em; line-height: 1.3; text-transform: uppercase; } .library-section { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 9px 9px 11px !important; border: 0 !important; border-left: 2px solid transparent !important; background: transparent; color: #F5F1E8 !important; text-align: left; text-decoration: none; cursor: pointer; } .library-section:hover, .library-section:focus-visible, .library-section.is-active { border-left-color: #C99550 !important; background: rgba(201,149,80,.10); } .library-section span, .library-section strong, .library-section small { display: block; } .library-section strong { font-family: var(--ui); font-size: 14px; font-weight: 500; line-height: 1.25; } .library-section small { margin-top: 2px; color: #9A9182; font-family: var(--ui); font-size: 11px; line-height: 1.25; } .library-section b { color: #D4A66B; font-size: 13px; font-weight: 500; } .library-all { display: block !important; margin: 13px 8px 0; padding: 13px 2px 2px !important; border: 0 !important; border-top: 1px solid #2A241C !important; color: #D4A66B !important; font-family: var(--display) !important; font-size: 15px !important; font-weight: 650; } .library-flyout { display: grid; grid-template-columns: minmax(0, 1fr) 312px; min-width: 0; } .library-topics { min-width: 0; padding: 20px 16px 18px; } .library-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; } .library-topic { display: block !important; min-width: 0; padding: 9px 9px 9px 11px !important; border: 0 !important; border-left: 2px solid transparent !important; color: #F5F1E8 !important; white-space: normal !important; text-decoration: none; } .library-topic:hover, .library-topic:focus-visible { border-left-color: #C99550 !important; background: rgba(201,149,80,.08) !important; } .library-topic strong, .library-topic small { display: block; } .library-topic strong { font-family: var(--ui); font-size: 13px; font-weight: 500; line-height: 1.25; } .library-topic small { margin-top: 3px; overflow: hidden; color: #9A9182; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .library-featured { min-width: 0; padding: 21px 18px; border-left: 1px solid #2A241C; } .library-featured-state[hidden] { display: none !important; } .library-featured-title { display: block !important; padding: 0 !important; color: #F5F1E8 !important; font-family: var(--display) !important; font-size: 18px !important; font-weight: 650 !important; line-height: 1.25; white-space: normal !important; } .library-featured-meta { display: block; margin-top: 9px; color: #9A9182; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; } .library-read, .library-news-feed { display: block !important; padding: 0 !important; border: 0 !important; color: #D4A66B !important; font-size: 12px !important; font-weight: 700 !important; } .library-read { margin-top: 13px; } .library-rule { display: block; margin: 18px 0 13px; border-top: 1px solid #2A241C; } .library-news-feed { font-family: var(--display) !important; font-size: 16px !important; } .library-news-feed em { margin-right: 8px; color: #D4A66B; font-family: var(--mono); font-size: 10px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; } @media (min-width: 1180px) { .masthead__bar { position: relative; } .masthead__item--has-children { position: static; } } @media (max-width: 1179px) { .library-menu, .masthead__item--has-children .library-menu.is-open { position: static; width: 100%; grid-template-columns: 1fr; padding: 0; } .library-sections { border-right: 0; } .library-flyout { grid-template-columns: 1fr; border-top: 1px solid #2A241C; } .library-jump { border-top: 1px solid #2A241C; border-left: 0; } .library-featured { border-top: 1px solid #2A241C; border-left: 0; } .masthead.is-open .library-menu a { border-bottom: 0; } } @media (max-width: 640px) { .library-topic-grid { grid-template-columns: 1fr; } .library-topic small { white-space: normal; } } /* Menu polish: The Watch, SVG icons, alignment, widened topic flyout, contrast. */ .masthead__nav { align-items: center; } .masthead__library-toggle, .masthead__nav > a { display: inline-flex; align-items: center; line-height: 1; padding: 9px 2px; } .masthead__bar { align-items: center; } .masthead__cta { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .library-section .ic, .library-all .ic, .masthead__library-toggle .ic { display: block; flex: 0 0 auto; color: #D4A66B; } .library-all { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; } @media (min-width: 1180px) { .library-flyout { grid-template-columns: minmax(0, 1fr) 312px; } } .library-topics { padding-inline: 22px; } .library-section small, .library-topic small { color: #B9B1A4; } .library-section strong, .library-topic strong { color: #F5F1E8; } .library-featured, .library-featured-state, .library-read, .library-news-feed, .library-rule { display: none !important; } .btn--on-dark { color: #F5F1E8; border-color: var(--brass); } .btn--ghost { color: #D4A66B; } .bridge .btn, .footer .btn, .cta-card .btn { color: #F5F1E8; } .bridge .btn:hover, .footer .btn:hover, .cta-card .btn:hover, .btn--on-dark:hover { color: #161310; } /* END factory-investigator-cinematic.css v1.0 */ /* Contextual Library route. */ .library-feeds { position: relative; } .library-feeds .library-section { padding-right: 28px !important; } .library-feeds-chev { position: absolute; z-index: 1; right: 8px; top: 50%; transform: translateY(-50%); color: #D4A66B; pointer-events: none; } .library-feeds-chev svg { display: block; } .library-jump { padding: 18px 18px 18px 20px; border-left: 1px solid #2A241C; } .library-jump .library-kicker { margin-left: 0; margin-right: 0; } .library-seeall-row { display: flex; gap: 10px; flex-wrap: wrap; } .library-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #C99550; border-radius: 6px; background: transparent; color: #D4A66B; font-family: var(--display); font-weight: 650; font-size: 13.5px; text-decoration: none; } .library-chip:hover, .library-chip:focus-visible { background: rgba(201,149,80,.12); color: #E0B97E; } .library-chip.is-emph { background: rgba(201,149,80,.16); border-color: #E0B97E; } .library-chip .ic { color: #D4A66B; } /* Masthead task g: click-only panels, brace, services. */ .library-menu{display:none;opacity:0;visibility:hidden;pointer-events:none}.masthead__item--has-children .library-menu.is-open{display:grid;opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .library-feeds-chev{top:6px;bottom:6px;right:6px;height:auto;transform:none;display:flex;align-items:stretch;color:#D4A66B}.library-feeds-chev .library-brace{display:block;height:100%} .masthead__dropdown-toggle{display:inline-flex;align-items:center;gap:6px;padding:9px 2px;border:0;background:transparent;color:#F5F1E8;font:500 16px/1 var(--ui);cursor:pointer}.masthead__dropdown-toggle:hover,.masthead__dropdown-toggle:focus-visible,.masthead__dropdown-toggle[aria-expanded=true]{color:var(--brass-text)} .services-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;display:none;width:300px;padding:10px;background:#1F1A14;border:1px solid #2A241C;border-top:3px solid #C99550}.masthead__item--has-children .services-menu.is-open{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:none}.services-menu a{display:block;padding:9px 11px;border-left:2px solid transparent;color:#F5F1E8;text-decoration:none;white-space:normal}.services-menu a:hover,.services-menu a:focus-visible{border-left-color:#C99550;background:rgba(201,149,80,.10);color:#F5F1E8}.services-menu strong,.services-menu small{display:block}.services-menu strong{font:500 13.5px/1.25 var(--ui)}.services-menu small{margin-top:2px;color:#B9B1A4;font-size:11px}.services-all{color:#D4A66B!important;border-bottom:1px solid #2A241C;margin-bottom:4px;font-family:var(--display);font-weight:650}@media(max-width:1179px){.services-menu,.masthead__item--has-children .services-menu.is-open{position:static;width:100%}} /* Contrast and article parity pass. */ .bridge .btn--secondary,.bridge .btn--on-dark,.cta-card .btn--secondary,.cta-card .btn--on-dark{color:#F5F1E8} body:not(.fi-tpl-2026-08) :is(.btn--primary,.bridge .btn--primary,.cta-card .btn--primary,.footer .btn--primary){background:#F5F1E8;color:#161310!important} body:not(.fi-tpl-2026-08) :is(.btn--primary:hover,.bridge .btn--primary:hover,.cta-card .btn--primary:hover,.footer .btn--primary:hover){background:var(--brass);color:#161310!important} .bridge p,.cta-card p{color:#D8D1C4} body.single-post:not(.fi-tpl-2026-08) .entry-title,body.single-post:not(.fi-tpl-2026-08) .entry-content h2,body.single-post:not(.fi-tpl-2026-08) .entry-content h3{color:#F5F1E8} body.single-post:not(.fi-tpl-2026-08) .entry-content>p,body.single-post:not(.fi-tpl-2026-08) .entry-content li{color:#E5DED2;font-size:18px;line-height:1.75} body.single-post .summary,body.single-post .fi-toc,body.single-post .fi-share-rail,body.single-post .cta-card{border-color:#4A4034} body.single-post .summary p,body.single-post .summary li,body.single-post .fi-toc a,body.single-post .fi-share-rail a{color:#E5DED2} /* Ivristech article structure clone + Services anchor fix. */ @media(min-width:1180px){.masthead__item--services{position:relative!important}.masthead__item--services .services-menu{left:auto;right:0;top:calc(100% + 8px)}} .masthead__dropdown-toggle .ic{display:block;color:#D4A66B} body.single-post:where(:not(.fi-tpl-article-2026-08)) .inside-article{background:#fff;padding:42px 48px;color:#1A1712} html[data-theme=dark] body.single-post .entry-title,html[data-theme=dark] body.single-post .entry-content,html[data-theme=dark] body.single-post .entry-content>p,html[data-theme=dark] body.single-post .entry-content h2,html[data-theme=dark] body.single-post .entry-content h3,html[data-theme=dark] body.single-post .entry-content li,html[data-theme=dark] body.single-post .entry-content blockquote,html[data-theme=dark] body.single-post .entry-content td,html[data-theme=dark] body.single-post .entry-content th{color:#1A1712!important} body.single-post:not(.fi-tpl-2026-08) .entry-content>p,body.single-post:not(.fi-tpl-2026-08) .entry-content li{font-size:19px;line-height:1.7}body.single-post .entry-content>p{margin-bottom:1.35em} body.single-post:not(.fi-tpl-2026-08) .entry-content a{color:#7A5A1E!important;text-decoration:underline;text-underline-offset:3px} body.single-post .summary{background:#1F1A14;color:#F5F1E8;border-color:#4A4034}body.single-post .summary p,body.single-post .summary li{color:#F5F1E8!important} @media(min-width:1080px){body.single-post .site-main{grid-template-columns:190px minmax(0,720px) 290px;gap:34px}body.single-post .fi-rail-left,body.single-post .fi-rail-right{top:80px}} .fi-share-icons{display:flex;gap:7px;flex-wrap:wrap}.fi-share-icons a,.fi-share-icons button{display:grid;place-items:center;width:31px;height:31px;border:1px solid #4A4034;background:transparent;color:#D4A66B;text-decoration:none;font:700 11px var(--ui);cursor:pointer}.fi-share-icons a:hover,.fi-share-icons button:hover{background:rgba(201,149,80,.12)} .fi-reading-progress{display:flex;align-items:center;gap:10px}.fi-progress-ring{display:grid;place-items:center;width:48px;height:48px;border:3px solid #C99550;border-radius:50%;color:#F5F1E8;font:700 11px var(--mono)}.fi-reading-progress strong,.fi-reading-progress small{display:block;color:#B9B1A4;font-size:11px} .fi-rail-left .toc{max-height:42vh;overflow:auto}.fi-rail-left .toc a{color:#B9B1A4}.fi-rail-left .toc a.is-active{color:#E0B97E;border-left-color:#C99550} .fi-services-card{padding:18px;background:#1F1A14;border:1px solid #4A4034;border-top:3px solid #C99550}.fi-services-card a{display:block;padding:8px 0;color:#F5F1E8;text-decoration:none;border-bottom:1px solid #2A241C}.fi-services-card a:hover{color:#E0B97E}.fi-services-card .services-all{color:#D4A66B!important;border-bottom:0} @media(max-width:1079px){body.single-post:where(:not(.fi-tpl-article-2026-08)) .inside-article{padding:28px 22px}.fi-rail-left,.fi-rail-right{position:static!important}.fi-rail-left{order:0}.fi-rail-right{order:2}.fi-rail-left .toc{max-height:none}} .fi-share-icons{display:flex;gap:6px;flex-wrap:wrap}.fi-share-icons a,.fi-share-icons button{display:grid;place-items:center;width:30px;height:30px;border:1px solid #4A4034;background:transparent;color:#D4A66B;text-decoration:none;font:700 11px var(--ui);cursor:pointer}.fi-progress{display:grid;gap:4px}.fi-progress__pct{color:#E0B97E;font:700 20px var(--mono)}.fi-progress__time{color:#B9B1A4;font-size:11px}.fi-rail-left .toc{max-height:38vh;overflow:auto}.fi-services-card{margin-top:18px} .fi-rail-left .share{display:flex;gap:6px;flex-wrap:wrap}.fi-rail-left .share a,.fi-rail-left .share button{display:grid;place-items:center;width:30px;height:30px;border:1px solid #4A4034;background:transparent;color:#D4A66B;text-decoration:none} /* fi-svc-fix-css */ .masthead__item--has-children:has(.services-menu){position:relative} .services-menu{left:auto !important;right:0 !important} .masthead__dropdown-toggle span{font-size:0;display:inline-block;width:7px;height:7px;margin-left:5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)} /* fi-seal-methodology */ .methodology .seal{display:none} .methodology::after{content:" ";position:absolute;top:24px;right:24px;width:90px;height:90px;background-image:url(/wp-content/uploads/fi-seal.svg);background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none} /* Master handoff polish */ html[data-theme="dark"] body.single-post .article-body table.compare,html[data-theme="dark"] body.single-post .article-body table.compare tbody th,html[data-theme="dark"] body.single-post .article-body table.compare td{background:#1F1A14;color:#F5F1E8 !important} html[data-theme="dark"] body.single-post .article-body table.compare tbody tr:nth-child(even) th,html[data-theme="dark"] body.single-post .article-body table.compare tbody tr:nth-child(even) td{background:#282118} html[data-theme="dark"] body.single-post .article-body .casefile,html[data-theme="dark"] body.single-post .article-body .pullquote,html[data-theme="dark"] body.single-post .article-body .stat-callout{color:#F5F1E8} html[data-theme="dark"] body.single-post .article-body .casefile dd,html[data-theme="dark"] body.single-post .article-body .casefile__title,html[data-theme="dark"] body.single-post .article-body .pullquote p,html[data-theme="dark"] body.single-post .article-body .stat-callout__label{color:#F5F1E8 !important} @media(min-width:1080px){html[data-theme="dark"] body.single-post .site-main{grid-template-columns:240px minmax(0,1fr) 240px !important;gap:30px !important} body.single-post .fi-rail-left{padding-right:22px;border-right:1px solid #3A3127} body.single-post .fi-rail-right{padding-left:22px;border-left:1px solid #3A3127}} body.single-post .rail-block{padding-bottom:20px;border-bottom:1px solid #3A3127} body.single-post .rail-block:last-child{border-bottom:0} .fi-callout{margin:28px 0;padding:18px 20px;border-left:3px solid #C99550;background:#F4EFE5;color:#1A1712} .fi-callout--tip{border-left-color:#7A5A1E} .fi-callout__label{font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7A5A1E} html[data-theme="dark"] body.single-post .article-body blockquote.pullquote,html[data-theme="dark"] body.single-post .article-body blockquote.pullquote p{color:#1A1712!important} html[data-theme="dark"] body.single-post .article-body table.compare thead th{color:#F5F1E8!important} html[data-theme="dark"] body.single-post .methodology{color:#E4DDCF} html[data-theme="dark"] body.single-post .methodology .methodology__title{color:#F5F1E8!important} /* ivristech-exact single-post widths */ @media(min-width:1080px){html[data-theme="dark"] body.single-post .site-main{grid-template-columns:230px minmax(0,700px) 270px!important;gap:0 36px!important;justify-content:center!important;margin:0!important;max-width:none!important}} /* ivristech-exact single-post container */ @media(min-width:1080px){html[data-theme="dark"] body.single-post .site-content,html[data-theme="dark"] body.single-post #primary,html[data-theme="dark"] body.single-post .content-area{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;max-width:100%!important;width:100%!important}} /* === FIX 2026-06-25: natural-colour images + visible title links on default archive… */ body.archive .site-main > article .post-image img, body.search .site-main > article .post-image img { filter: none; } body.archive .site-main > article .entry-title a, body.search .site-main > article .entry-title a { color: inherit; } body.archive .site-main > article .entry-title a:hover, body.search .site-main > article .entry-title a:hover { color: var(--steel); } /* === Factory Investigator — pointed-corner identity + FAQ font fix (added via Cowor… */ .entry-content .faq-list, .entry-content .faq-item, .entry-content .faq-q, .entry-content .faq-a, .entry-content .fi-tablewrap, .entry-content .fi-tablewrap table, .entry-content table, .entry-content th, .entry-content td, .entry-content .formula-block { border-radius: 0 !important; } .entry-content .fi-tablewrap { overflow-x: auto; } .entry-content .faq-a, .entry-content .faq-a p, .entry-content .faq-a li { font-size: 16px !important; line-height: 1.7 !important; } /* === FAQ question buttons: full-width (fix dark-mode inline-block) === */ .entry-content .faq-q{ display:flex !important; width:100% !important; align-items:center; justify-content:space-between; text-align:left; gap:12px; } /* No-Rigor sidebar: give Filed-as block normal spacing so Share isn't cramped (matches Rigor rhythm) */ #content #main .fi-rail-left.fi-rail-no-rigor .rail-block:first-child{padding-bottom:20px !important;margin-bottom:24px !important;border-bottom:1px solid #3A3127 !important;} /* === All FAQ question bars charcoal (closed + open, both .faq and .faq-list blocks) === */ html[data-theme] body .entry-content .faq-list .faq-q, html[data-theme] body .entry-content .faq .faq-q, html[data-theme] body .entry-content .faq-item.open .faq-q, html[data-theme] body .entry-content .faq-q[aria-expanded="true"]{ background:#55555e !important; color:#ffffff !important; } html[data-theme] body .entry-content .faq-q:hover{ background:#5f5f69 !important; } html[data-theme] body .entry-content .faq-q svg{ color:#ffffff !important; } /* --------------------------------------------------------------------------- * FI — Full-color images everywhere (2026-07-04, supersedes fi-homepage-image-color-fix.css) * Decision (Mahesh): normal colourful images EVERYWHERE — no duotone/grayscale * on photos, on any page (homepage, archives, search, single posts). * * This neutralizes the grayscale filter site-wide. It only targets photo * elements (the `.duotone` class + listing images); the patent/engraving * LINE-ART (`.patent`, which is not filtered) is untouched. * * WHERE: replace the earlier homepage-scoped block in Additional CSS / * customizer CSS with this one (or append this — being global, it wins). * Optional tidy-up: the now-dead `filter: grayscale(...)` rules on * `.duotone` and `body.archive/.search ... .post-image img` can be deleted * later; this override makes them inert either way. * ------------------------------------------------------------------------- */ .duotone, img.duotone, .duo-block img, .site-main .post-image img, .fi-archive-card__media img, body.home .duotone, body.archive .site-main > article .post-image img, body.search .site-main > article .post-image img { filter: none !important; -webkit-filter: none !important; } /* inline:fi-readability-contrast-v1 */ /* FI readability and contrast closeout v1 — presentation only */ html{font-synthesis:none} body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body .masthead__cta{font-size:14px!important;line-height:1.25!important} /* Scoped: the approved stylesheets set the footer heading to 14px brass. */ body:not(.fi-tpl-2026-08) .footer__heading{font-size:13.5px!important;line-height:1.4!important;letter-spacing:.06em!important} body .footer__news button,body .footer__copy,body .footer__copy a{font-size:14px!important;line-height:1.5!important} /* The footer newsletter LABEL is split out of the floor above. The 14px CTA floor is a deliberate, recorded exception and still applies to the button everywhere. A form label is not a CTA: the readability baseline places secondary labels at 12.5-14px, and the approved 13.5px is inside that band, so the override has no readability justification on a migrated template. Unmigrated routes keep it. */ body:not(.fi-tpl-2026-08) .footer__news label{font-size:14px!important;line-height:1.5!important} /* Scoped: the approved kicker is the same 12.5px with a looser line-height and wider tracking, so this floor can only tighten it. Unmigrated routes keep it. */ body:not(.fi-tpl-2026-08) .fi-page-kicker,body p.cat{font-size:12.5px!important;line-height:1.5!important;letter-spacing:.07em!important} body .fi-core-pages-v1 figcaption,body .fi-home-v4 figcaption,body .fi-self-audit figcaption{font-size:13.5px!important;line-height:1.5!important;letter-spacing:.035em!important} /* Scoped: the 14px CTA floor is a recorded, deliberate exception and still applies to every unmigrated route. On a migrated template the approved stylesheets set these CTAs at 16.5px, and a floor has no business reducing a size already above it. */ body:not(.fi-tpl-2026-08) :is(.fi-core-pages-v1 .btn,.fi-page-hero__cta,.fi-self-audit .btn){font-size:14px!important;line-height:1.3!important} body .fi-core-proof-rail span{font-size:14.5px!important;line-height:1.5!important;letter-spacing:.02em!important} body .fi-service-card a{font-size:14px!important;line-height:1.5!important} body .ratecard__note{font-size:14px!important;line-height:1.6!important} body .fi-fit-matrix th{font-size:14px!important;line-height:1.45!important;letter-spacing:.025em!important} body .fi-fit-matrix td{font-size:15.5px!important;line-height:1.55!important} body:not(.fi-tpl-2026-08) .fi-form-card label,body:not(.fi-tpl-2026-08) .fi-news-form label{font-size:15px!important;line-height:1.5!important;letter-spacing:.03em!important} /* Scoped: the approved pages set these notes at 16.5px, above the floor. */ body:not(.fi-tpl-2026-08) :is(.fi-form-consent,.fi-form-help,.fi-form-error,.fi-investigation-brief p){font-size:14px!important;line-height:1.6!important} /* Scoped: the approved page sets this note at 16.5px, above the floor. */ body:not(.fi-tpl-2026-08) .fi-self-audit__disclosure{font-size:14px!important;line-height:1.55!important;letter-spacing:.04em!important} body .fi-audit-meta span{font-size:13.5px!important;line-height:1.45!important} body .fi-priority b{font-size:12.5px!important;line-height:1.4!important;letter-spacing:.06em!important} body .fi-home-kicker{font-size:12.5px!important;line-height:1.45!important;letter-spacing:.08em!important} body .fi-home-action{font-size:14px!important;line-height:1.25!important;letter-spacing:.025em!important} body .fi-home-hero__investigation span{font-size:13.5px!important;line-height:1.5!important} body .fi-home-inline-link{font-size:14px!important;line-height:1.5!important;letter-spacing:.025em!important} body .fi-home-desk__number,body .fi-home-desk__link,body .fi-home-list-label{font-size:12px!important;line-height:1.45!important;letter-spacing:.075em!important} body .fi-home-story-meta{font-size:13.5px!important;line-height:1.45!important;letter-spacing:.045em!important} body .fi-home-lead-story__image>span{font-size:12px!important;line-height:1.25!important;letter-spacing:.06em!important} body .fi-home-latest-list article>span,body .fi-home-guide-list article>p,body .fi-home-guide-list article>span{font-size:13.5px!important;line-height:1.45!important} body.archive .fi-archive-head__kicker{font-size:12.5px!important;line-height:1.45!important;letter-spacing:.08em!important} body.archive .fi-archive-head__meta{font-size:14px!important;line-height:1.5!important;letter-spacing:.015em!important} body.archive .fi-archive-switcher a{font-size:14px!important;line-height:1.4!important} body.archive .site-main article .entry-meta,body.archive .site-main article .entry-meta span,body.archive .site-main article .entry-meta time{font-size:14px!important;line-height:1.5!important;color:#cfc6b9!important} body.archive .site-main article .entry-meta a,body.archive .site-main article .entry-meta .author-name{color:#f0e6d6!important;text-decoration-thickness:.08em;text-underline-offset:.16em} body .rail-block__label,body .fi-rail-audit__label,body .fi-rail-services__label{font-size:12.5px!important;line-height:1.5!important;letter-spacing:.075em!important} body .fi-progress-ring,body .fi-progress-meta small,body .fi-progress-meta span{font-size:14px!important;line-height:1.5!important} body ul.toc,body ul.toc a{font-size:15px!important;line-height:1.5!important} body .fi-rail-audit__signals li,body .fi-rail-audit__proof span{font-size:12.5px!important;line-height:1.45!important} body .fi-rail-audit__note{font-size:14px!important;line-height:1.55!important} body:not(.fi-tpl-2026-08) .fi-rail-services a,body:not(.fi-tpl-2026-08) .rail-right .related a{font-size:15px!important;line-height:1.5!important} body nav.meta,body nav.meta a,body nav.meta .fi-bc-current{font-size:14px!important;line-height:1.45!important} body:not(.fi-tpl-2026-08) .fi-byline-meta,body:not(.fi-tpl-2026-08) .fi-byline-meta span{font-size:14px!important;line-height:1.5!important} body:not(.fi-tpl-2026-08) .related .meta,body:not(.fi-tpl-2026-08) .fi-author-box .meta{font-size:13.5px!important;line-height:1.5!important} body:not(.fi-tpl-2026-08) .entry-content .da-q,body:not(.fi-tpl-2026-08) .entry-content .formula-label{font-size:12px!important;line-height:1.55!important;letter-spacing:.07em!important;color:#6f4d1c!important} body:not(.fi-tpl-2026-08) .entry-content .kt-title,body:not(.fi-tpl-2026-08) .entry-content .callout-label{font-size:12px!important;line-height:1.55!important;letter-spacing:.07em!important} body:not(.fi-tpl-2026-08) .entry-content table th{font-size:14.5px!important;line-height:1.5!important;letter-spacing:.02em!important} /* Scoped: #8dcbff is a link colour for the previous dark design. The underline treatment stays global. */ body .editorial-policy a:not(.btn){text-decoration-thickness:.08em;text-underline-offset:.16em} body:not(.fi-tpl-2026-08) .editorial-policy a:not(.btn){color:#8dcbff!important} body:not(.fi-tpl-2026-08) :is(.editorial-policy a:not(.btn):hover,.editorial-policy a:not(.btn):focus-visible){color:#b8ddff!important} @media(max-width:720px){ body .fi-home-kicker,body p.cat,body .fi-archive-head__kicker{letter-spacing:.055em!important} /* Scoped for the same reason as the desktop rule: 0.055em is tighter than the approved 0.15em, and the approved stylesheet has no narrow-screen override for the kicker. */ body:not(.fi-tpl-2026-08) .fi-page-kicker{letter-spacing:.055em!important} body .fi-fit-matrix td{font-size:15px!important} body .fi-home-action,body .fi-page-hero__cta{font-size:14px!important} body .footer__heading{letter-spacing:.05em!important} } /* Higher-specificity closeout for inherited !important rules */ body .fi-home-v4 .fi-home-desk__number,body .fi-home-v4 .fi-home-desk__link,body .fi-home-v4 .fi-home-list-label{font-size:12px!important;line-height:1.45!important;letter-spacing:.075em!important} body.blog .site-main article .entry-meta,body.blog .site-main article .entry-meta span,body.blog .site-main article .entry-meta time,body.blog .site-main article .entry-meta a{font-size:14px!important;line-height:1.5!important;color:#cfc6b9!important} body.blog .site-main article .entry-meta a,body.blog .site-main article .entry-meta .author-name{color:#f0e6d6!important;text-decoration-thickness:.08em;text-underline-offset:.16em} body main.site-main aside.fi-rail-right .fi-rail-services__label,body main.site-main aside.fi-rail-right .fi-rail-audit__label{font-size:12.5px!important;line-height:1.5!important;letter-spacing:.075em!important} body main.site-main aside.fi-rail-right .fi-rail-audit__signals li,body main.site-main aside.fi-rail-right .fi-rail-audit__proof span{font-size:12px!important;line-height:1.45!important} body main.site-main aside.fi-rail-right .fi-rail-audit__note{font-size:14px!important;line-height:1.55!important} body .entry-content dl dt{font-size:14px!important;line-height:1.5!important;letter-spacing:.035em!important} body .fi-intent-cta .fi-intent-cta__proof,body .fi-intent-cta .fi-intent-cta__proof a{font-size:13.5px!important;line-height:1.5!important} /* Category and industry metadata floors */ body .site-main article .entry-meta .cat-links a{font-size:12.5px!important;line-height:1.4!important;letter-spacing:.025em!important} body:not(.fi-tpl-2026-08) .fi-byline-meta .fi-byline-ind,body:not(.fi-tpl-2026-08) .fi-byline-meta .fi-byline-ind a{font-size:12.5px!important;line-height:1.45!important;letter-spacing:.025em!important} /* Exact precedence over accepted 124/126 metadata rules */ body:is(.archive,.blog) main.site-main article.type-post footer.entry-meta span.cat-links a[rel~="category"]{font-size:12.5px!important;line-height:1.4!important;letter-spacing:.025em!important} body.single-post:not(.fi-tpl-2026-08) .entry-header .fi-byline-meta .fi-byline-industries a.fi-byline-ind{font-size:12.5px!important;line-height:1.45!important;letter-spacing:.025em!important} /* Exact live article-industry ancestry */ body.single-post:not(.fi-tpl-2026-08) .entry-header .fi-author-row .fi-byline-industries a.fi-byline-ind{font-size:12.5px!important;line-height:1.45!important;letter-spacing:.025em!important} /* Mobile Industries headings and stacked article-service support text */ body.page-id-470 .fi-core-pages-v1 .fi-service-section__head h2.cat{font-size:12.5px!important;line-height:1.5!important;letter-spacing:.06em!important} body.single-post main.site-main aside.fi-rail-right nav.fi-rail-services a.fi-rail-service small{font-size:14px!important;line-height:1.5!important;letter-spacing:normal!important} body.single-post main.site-main aside.fi-rail-right nav.fi-rail-services a.fi-rail-services__all{font-size:14px!important;line-height:1.5!important;letter-spacing:.025em!important} .single-post .fi-intent-cta--commercial .fi-intent-cta__title{color:var(--paper)!important;} /* inline:fi-non-search-renderer-guard-v12 */ .fi-post-dates{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.24em;} .fi-post-dates .fi-date-label{font-weight:700;} .fi-post-dates .fi-date-separator{margin-inline:.18em;} .fi-service-section__head>h2.cat{margin:0;color:#D8A55F;font:700 11px/1.35 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;} .footer a[href$="/editorial-policy/"]{color:#F5F1E8!important;text-decoration:underline!important;text-decoration-color:#D8A55F!important;text-decoration-thickness:1px!important;text-underline-offset:4px!important;} .footer a[href$="/editorial-policy/"]:hover,.footer a[href$="/editorial-policy/"]:focus-visible{color:#D8A55F!important;text-decoration-thickness:2px!important;} /* inline:fi-core-pages-visual-v13-20260727 */ .fi-core-pages-v1{--fi-line:rgba(216,165,95,.32);--fi-panel:#1b1713;--fi-paper:#f5f1e8;--fi-muted:#c9c1b5;--fi-brass:#d8a55f;} .fi-core-pages-v1 .fi-page-hero.fi-core-visualized{display:grid!important;grid-template-columns:minmax(480px,1.08fr) minmax(410px,.92fr)!important;grid-template-rows:auto auto auto!important;column-gap:clamp(34px,4vw,62px)!important;row-gap:14px!important;align-items:center!important;max-width:1180px!important;margin:0 auto!important;padding:clamp(44px,6vw,82px) 0!important;text-align:left!important;border-bottom:1px solid var(--fi-line)!important;} .fi-core-pages-v1 .fi-page-hero.fi-core-visualized>.fi-page-kicker,.fi-core-pages-v1 .fi-page-hero.fi-core-visualized>h1,.fi-core-pages-v1 .fi-page-hero.fi-core-visualized>p{grid-column:1!important;margin-left:0!important;margin-right:0!important;text-align:left!important;} .fi-core-pages-v1 .fi-page-hero.fi-core-visualized>.fi-page-kicker{grid-row:1!important;align-self:end!important;margin-bottom:0!important;} .fi-core-pages-v1 .fi-page-hero.fi-core-visualized>h1{grid-row:2!important;margin-top:0!important;margin-bottom:0!important;font-size:clamp(43px,4.5vw,63px)!important;line-height:1.01!important;letter-spacing:-.035em!important;text-wrap:balance!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;} .fi-core-pages-v1 .fi-page-hero.fi-core-visualized>p:not(.fi-page-kicker){grid-row:3!important;align-self:start!important;max-width:680px!important;margin-top:2px!important;color:var(--ink-soft)!important;font-size:clamp(18px,1.7vw,22px)!important;line-height:1.55!important;} .fi-core-pages-v1 .fi-page-hero.fi-core-visualized>.fi-core-visual{grid-column:2!important;grid-row:1/5!important;} .fi-page-hero__cta{grid-column:1!important;grid-row:4!important;display:inline-flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;width:min(100%,430px)!important;margin-top:8px!important;padding:15px 18px!important;background:#d8a55f!important;border:1px solid #e0b574!important;color:#17130f!important;font:800 12px/1.2 "DM Sans",sans-serif!important;letter-spacing:.045em!important;text-decoration:none!important;text-transform:uppercase!important;} .fi-page-hero__cta:hover,.fi-page-hero__cta:focus-visible{background:#f5f1e8!important;border-color:#f5f1e8!important;color:#17130f!important;} .fi-core-visual{position:relative!important;margin:0!important;aspect-ratio:16/9!important;overflow:hidden!important;border:1px solid var(--fi-line)!important;background:#0e0c0a!important;} .fi-core-visual:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 12px rgba(15,13,11,.15);pointer-events:none;} .fi-core-visual__image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;} .fi-core-visual figcaption{position:absolute!important;z-index:2;left:0!important;right:0!important;bottom:0!important;margin:0!important;padding:10px 14px!important;background:linear-gradient(180deg,transparent,rgba(9,8,7,.9))!important;color:#ded6c9!important;font:600 9px/1.45 "IBM Plex Mono",monospace!important;letter-spacing:.055em!important;text-transform:uppercase!important;} .fi-core-pages-v1>.fi-hub-page{width:min(1120px,100%)!important;max-width:1120px!important;margin-left:auto!important;margin-right:auto!important;} .fi-core-pages-v1 .fi-hub-lede.fi-core-visualized{display:grid!important;grid-template-columns:minmax(430px,.96fr) minmax(430px,1.04fr)!important;grid-template-rows:auto auto auto!important;column-gap:clamp(34px,5vw,70px)!important;row-gap:12px!important;align-items:center!important;max-width:1120px!important;margin:0 auto 58px!important;padding:0 0 54px!important;text-align:left!important;border-bottom:1px solid var(--fi-line)!important;} .fi-core-pages-v1 .fi-hub-lede.fi-core-visualized:before,.fi-core-pages-v1 .fi-hub-lede.fi-core-visualized:after{display:none!important;} .fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>.fi-page-kicker,.fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>h2,.fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>.lede{grid-column:1!important;margin-left:0!important;margin-right:0!important;text-align:left!important;} .fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>.fi-page-kicker{grid-row:1!important;align-self:end!important;margin-bottom:0!important;} .fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>h2{grid-row:2!important;margin:0!important;font-size:clamp(39px,4.2vw,58px)!important;line-height:1.03!important;text-wrap:balance!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;} .fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>.lede{grid-row:3!important;align-self:start!important;margin-top:2px!important;color:var(--ink-soft)!important;font-size:clamp(18px,1.7vw,21px)!important;line-height:1.55!important;} .fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>.fi-core-visual{grid-column:2!important;grid-row:1/4!important;} .fi-core-proof-rail{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:1180px!important;margin:0 auto!important;border:1px solid var(--fi-line)!important;border-top:0!important;background:#15120f!important;} .fi-core-proof-rail>div{display:flex!important;gap:13px!important;align-items:center!important;padding:17px 20px!important;border-right:1px solid var(--fi-line)!important;} .fi-core-proof-rail>div:last-child{border-right:0!important;} .fi-core-proof-rail strong{color:var(--fi-brass)!important;font:700 10px/1 "IBM Plex Mono",monospace!important;} .fi-core-proof-rail span{color:#ded7cc!important;font:600 11px/1.35 "DM Sans",sans-serif!important;text-transform:uppercase!important;letter-spacing:.045em!important;} .fi-investigation-brief{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1px!important;margin:0 0 clamp(40px,6vw,72px)!important;border:1px solid var(--fi-line)!important;background:var(--fi-line)!important;} .fi-investigation-brief>div{padding:24px!important;background:var(--fi-panel)!important;} .fi-investigation-brief strong{display:block!important;margin:0 0 8px!important;color:var(--fi-paper)!important;font:500 21px/1.15 Fraunces,Georgia,serif!important;} .fi-investigation-brief span{display:block!important;color:var(--fi-muted)!important;font:400 15px/1.5 "DM Sans",sans-serif!important;} .fi-investigation-brief>p{grid-column:1/-1!important;margin:0!important;padding:12px 18px!important;background:#12100e!important;color:#a99f91!important;font:600 9px/1.45 "IBM Plex Mono",monospace!important;letter-spacing:.04em!important;text-transform:uppercase!important;} .fi-contact-routing{display:flex!important;align-items:flex-start!important;gap:18px!important;margin:0 0 clamp(36px,5vw,58px)!important;padding:18px 20px!important;border:1px solid var(--fi-line)!important;background:rgba(216,165,95,.055)!important;} .fi-contact-routing strong{flex:0 0 auto!important;color:var(--ink)!important;font:700 10px/1.4 "IBM Plex Mono",monospace!important;text-transform:uppercase!important;} .fi-contact-routing span{color:var(--ink-soft)!important;font:400 15px/1.55 "DM Sans",sans-serif!important;} .fi-about-wide-visual{margin:32px 0 58px!important;} .fi-about-wide-visual .fi-core-visual{aspect-ratio:16/7!important;} .fi-core-pages-v1 .fi-service-section{padding-top:clamp(54px,7vw,84px)!important;padding-bottom:clamp(54px,7vw,84px)!important;border-top:1px solid rgba(216,165,95,.22)!important;} .fi-core-pages-v1 .fi-service-card{position:relative!important;overflow:hidden!important;border-color:rgba(216,165,95,.34)!important;background:linear-gradient(145deg,rgba(216,165,95,.055),rgba(255,255,255,.012))!important;} .fi-core-pages-v1 .fi-service-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--fi-brass),transparent 72%);} .fi-core-pages-v1 .fi-proof-grid article{background:#1b1713!important;color:#f5f1e8!important;} .fi-core-pages-v1 .fi-proof-grid article p{color:#c9c1b5!important;} .fi-core-pages-v1 .about-page a,.fi-core-pages-v1 .fi-contact-page a:not(.btn),.fi-core-pages-v1 .fi-service-page .fi-service-card>a,.fi-core-pages-v1 .fi-service-page .fi-service-section__head a{color:var(--lab-oxide-deep)!important;text-decoration-color:rgba(216,165,95,.55)!important;} .fi-core-pages-v1 .about-page a:hover,.fi-core-pages-v1 .fi-contact-page a:not(.btn):hover,.fi-core-pages-v1 .fi-service-page .fi-service-card>a:hover{color:#f5f1e8!important;} body.page-id-9 .fi-core-pages-v1>.fi-contact-page>.stat-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:0 0 26px!important;} body.page-id-9 .fi-core-pages-v1>.fi-contact-page>.stat-strip .stat{padding:18px 12px!important;} body.page-id-9 .fi-core-pages-v1>.fi-contact-page>.stat-strip .stat__num{font-size:clamp(32px,4vw,50px)!important;line-height:1!important;} @media(max-width:900px){ .fi-core-pages-v1 .fi-page-hero.fi-core-visualized,.fi-core-pages-v1 .fi-hub-lede.fi-core-visualized{grid-template-columns:1fr!important;padding-top:36px!important;} .fi-core-pages-v1 .fi-page-hero.fi-core-visualized>.fi-page-kicker,.fi-core-pages-v1 .fi-page-hero.fi-core-visualized>h1,.fi-core-pages-v1 .fi-page-hero.fi-core-visualized>p,.fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>.fi-page-kicker,.fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>h2,.fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>.lede{grid-column:1!important;} .fi-core-pages-v1 .fi-page-hero.fi-core-visualized>.fi-core-visual,.fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>.fi-core-visual{grid-column:1!important;grid-row:auto!important;margin-top:18px!important;} .fi-page-hero__cta{grid-column:1!important;grid-row:auto!important;} .fi-core-pages-v1 .fi-page-hero.fi-core-visualized>p:not(.fi-page-kicker),.fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>.lede{margin-bottom:0!important;} .fi-core-proof-rail{grid-template-columns:1fr!important;} .fi-core-proof-rail>div{border-right:0!important;border-bottom:1px solid var(--fi-line)!important;} .fi-core-proof-rail>div:last-child{border-bottom:0!important;} .fi-investigation-brief{grid-template-columns:1fr!important;} } @media(max-width:560px){ .fi-core-pages-v1 .fi-page-hero.fi-core-visualized>h1{font-size:clamp(39px,12vw,54px)!important;} .fi-core-pages-v1 .fi-hub-lede.fi-core-visualized>h2{font-size:clamp(36px,11vw,50px)!important;} .fi-core-visual figcaption{position:relative!important;background:#12100e!important;} body.page-id-9 .fi-core-pages-v1>.fi-contact-page>.stat-strip .stat{padding:14px 5px!important;} body.page-id-9 .fi-core-pages-v1>.fi-contact-page>.stat-strip .stat__label{font-size:8px!important;} .fi-contact-routing{display:block!important;} .fi-contact-routing strong{display:block!important;margin-bottom:8px!important;} } @media(prefers-reduced-motion:reduce){.fi-core-pages-v1 *{scroll-behavior:auto!important;}} /* inline:fi-global-shell-service-article-polish-v1 */ :root { --fi-polish-ink: #17130f; --fi-polish-coal: #1f1a14; --fi-polish-panel: #261f18; --fi-polish-brass: #d8a55f; --fi-polish-brass-soft: #e0b97e; --fi-polish-ivory: #f5f1e8; --fi-polish-muted: #cfc6b9; --fi-polish-blue: #8dcbff; --fi-polish-line: rgba(216, 165, 95, .34); } /* Global dropdown finish: one shell language, while Services stays horizontal. */ .masthead__item--has-children > button .ic { transition: transform .18s ease; } .masthead__item--has-children > button[aria-expanded="true"] .ic { transform: rotate(180deg); } .masthead__item--has-children > button:focus-visible, .masthead__submenu a:focus-visible { outline: 3px solid var(--fi-polish-blue) !important; outline-offset: 3px !important; } @media (min-width: 901px) { .masthead__submenu { background: var(--fi-polish-ink) !important; border: 1px solid var(--fi-polish-line) !important; border-top-color: rgba(216, 165, 95, .68) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .38), 0 2px 0 rgba(216, 165, 95, .12) !important; overflow: hidden; } .library-menu { left: 50% !important; right: auto !important; transform: translateX(-50%); width: min(980px, calc(100vw - 48px)) !important; grid-template-columns: 300px minmax(0, 1fr) !important; } .library-menu .library-sections { width: auto !important; padding: 24px 18px 26px !important; border-right: 1px solid var(--fi-polish-line); background: linear-gradient(180deg, rgba(216, 165, 95, .075), rgba(216, 165, 95, .015)); } .library-menu .library-flyout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-content: start; gap: 20px; padding: 24px 26px 26px !important; background: var(--fi-polish-coal); } .library-topic-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .library-section, .library-topic { border: 1px solid transparent !important; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; } .library-section:hover, .library-section:focus-visible, .library-topic:hover, .library-topic:focus-visible { background: rgba(216, 165, 95, .095) !important; border-color: rgba(216, 165, 95, .38) !important; transform: translateY(-1px); } .library-seeall { justify-self: start; background: var(--fi-polish-brass) !important; color: var(--fi-polish-ink) !important; border: 1px solid #efc98f !important; } .services-menu { border-color: var(--fi-polish-line) !important; border-top-color: rgba(216, 165, 95, .68) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .38), 0 2px 0 rgba(216, 165, 95, .12) !important; } .fi-services-menu__service, .fi-services-menu__cta { border: 1px solid transparent !important; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; } .fi-services-menu__service:hover, .fi-services-menu__service:focus-visible, .fi-services-menu__cta:hover, .fi-services-menu__cta:focus-visible { border-color: rgba(216, 165, 95, .42) !important; transform: translateY(-1px); } } @media (max-width: 900px) { .masthead__submenu { background: var(--fi-polish-ink) !important; border: 1px solid var(--fi-polish-line) !important; box-shadow: none !important; max-height: calc(100dvh - 86px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--fi-polish-brass) var(--fi-polish-coal); } .library-menu { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; transform: none !important; } .library-menu .library-sections, .library-menu .library-flyout { width: auto !important; padding: 18px 16px 22px !important; } .library-menu .library-flyout { display: block !important; border-top: 1px solid var(--fi-polish-line); } .library-topic-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } .library-seeall { display: inline-flex; margin-top: 16px; background: var(--fi-polish-brass) !important; color: var(--fi-polish-ink) !important; } } /* Distinctive footer: the existing seal is decorative, large, crisp, and never clipped. */ .footer { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 12% 34%, rgba(216, 165, 95, .11), transparent 31%), linear-gradient(135deg, #17130f 0%, #1f1a14 58%, #17130f 100%) !important; border-top: 1px solid rgba(216, 165, 95, .52) !important; } .footer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(216, 165, 95, .025) 80px 81px); } .footer__grid { align-items: start !important; } .footer__identity { position: relative; min-width: 0; padding-top: 218px; } .footer__identity::before { content: ""; position: absolute; top: 0; left: 0; width: 190px; height: 194px; background: url("/wp-content/uploads/fi-seal.svg") center / contain no-repeat; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .34)); opacity: .96; } .footer h2, .footer h3, .footer strong { color: var(--fi-polish-ivory) !important; } /* Scoped off migrated templates: `.footer p` also matches the footer HEADING, which is a

, so this muted colour was overriding the approved brass. The approved stylesheets set both. Unmigrated routes keep the original rule. */ body:not(.fi-tpl-2026-08) .footer p, body:not(.fi-tpl-2026-08) .footer li { color: var(--fi-polish-muted) !important; } .footer a { color: #e9e1d5 !important; text-decoration-thickness: 1px; text-underline-offset: 4px; } .footer a:hover, .footer a:focus-visible { color: #ffffff !important; } .footer a:focus-visible, .footer button:focus-visible, .footer input:focus-visible { outline: 3px solid var(--fi-polish-blue) !important; outline-offset: 3px !important; } html body .footer a.fi-editorial-policy-link[href*="/editorial-policy/"] { color: var(--fi-polish-blue) !important; text-decoration-color: currentColor !important; } @media (min-width: 901px) { .footer__grid { grid-template-columns: minmax(250px, 1.12fr) minmax(190px, .82fr) minmax(190px, .82fr) minmax(300px, 1.24fr) !important; gap: clamp(30px, 3.2vw, 52px) !important; } } @media (max-width: 900px) { .footer__identity { padding-top: 184px; } .footer__identity::before { width: 158px; height: 162px; } } /* Five service bodies: consistent evidence panels below unchanged heroes. */ .fi-service-page > .fi-service-section { position: relative; margin-top: 22px; padding: clamp(52px, 5.6vw, 76px) clamp(24px, 4vw, 52px) !important; border: 1px solid rgba(216, 165, 95, .28) !important; background: linear-gradient(145deg, rgba(216, 165, 95, .045), rgba(255, 255, 255, .012) 55%), var(--fi-polish-ink) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .12); } .fi-service-page > .fi-service-section:nth-of-type(even) { background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(216, 165, 95, .06)), var(--fi-polish-coal) !important; } .fi-service-section__head { max-width: 760px !important; margin-bottom: clamp(30px, 3.5vw, 46px) !important; } .fi-service-section__head h2 { max-width: 16ch; font-size: clamp(32px, 3.1vw, 48px) !important; line-height: 1.08 !important; text-wrap: balance; } .fi-service-section__head > p:not(.cat) { max-width: 66ch; color: #d8cfc2 !important; font-size: clamp(17px, 1.45vw, 20px) !important; line-height: 1.58 !important; } .fi-service-section__head .cat:not(.cat--oxide) { color: var(--fi-polish-brass-soft) !important; } /* The hero used the visualized two-column variant: a 480px text column with the 410px picture centred against it, so on a 1052px-tall hero the image sat with about 410px of empty page above it, and the kicker - an inline-block pill everywhere else on the site - stretched to the full 480px column as a grid item. 13 September 2026: the owner called the hero out. Every other hero on the site is a single column with the kicker hugging its own text, so this page now matches them and the picture runs as a wide band beneath the copy, which removes the empty column instead of trying to fill it. The old grid-row pinning is gone with it; the hero is no longer a grid on this page. */ .page-id-470 .fi-core-pages-v1 .fi-page-hero.fi-core-visualized { display: block !important; padding: clamp(40px, 5vw, 66px) 0 clamp(28px, 3vw, 40px) !important; } .page-id-470 .fi-core-pages-v1 .fi-page-hero .fi-page-kicker { display: inline-block !important; width: auto !important; margin: 0 0 18px !important; } .page-id-470 .fi-core-pages-v1 .fi-page-hero h1 { max-width: 16ch; margin: 0 0 20px !important; } .page-id-470 .fi-core-pages-v1 .fi-page-hero > p:not([class]) { max-width: 60ch; margin: 0 0 16px !important; } .page-id-470 .fi-core-pages-v1 .fi-page-hero .fi-industries-crosssector { max-width: 60ch; margin: 0 0 clamp(22px, 2.6vw, 32px) !important; } .page-id-470 .fi-core-pages-v1 .fi-page-hero .fi-core-visual { width: 100% !important; margin: 0 !important; border-radius: 14px; } /* The caption is overlaid on the picture, so the band only goes wide where that still leaves the picture more height than the words: at 390px a 21/8 band is 117px tall against a 61px caption. Below 901px it keeps the inherited 16/9. The selector carries body plus five classes on purpose: the shared page-9/470 rule further down this file is body plus four, and !important does not break a specificity loss - the first attempt at 21/8 lost silently and painted 16/9. */ @media (min-width: 901px) { body.page-id-470 .fi-core-pages-v1 .fi-service-page .fi-page-hero .fi-core-visual { aspect-ratio: 21 / 8 !important; } } /* Industries directory (page-id-470). History: this page inherited the five-service dark panels, was then given on-dark card foregrounds because titles measured 1.42:1 and body 1.98:1, and was reduced to one uniform brass accent on 12 September 2026 when the seven sector groupings were dropped. 13 September 2026: the owner read the page as not looking or feeling like Factory Investigator, and the coal slab was the reason - 23 identical cards on near-black, closing on a brown that appears nowhere else on the site. The Industries mega-menu already solves this in the language the site uses everywhere else: a warm panel, one sector tone per chip as a light wash with the tone on the left edge, and ink text. The directory now speaks that language at page scale, and the closing panel borrows the clay, brass and oxide of the article intent panel. Tones are emitted per card by the renderer, so this file only describes how a tone is used. */ .page-id-470 .fi-service-page > .fi-service-section { --sector-tone: #98533d; } .page-id-470 .fi-service-page > .fi-service-section { margin-top: 14px; padding: clamp(34px, 3.4vw, 48px) clamp(20px, 3vw, 40px) !important; border: 1px solid rgba(113, 59, 45, .16) !important; border-radius: 14px; background: linear-gradient(172deg, #fffdf8 0%, #faf5ea 100%) !important; } .page-id-470 .fi-service-section__head { max-width: none !important; margin-bottom: clamp(22px, 2.4vw, 30px) !important; padding-bottom: 16px; border-bottom: 1px solid rgba(113, 59, 45, .18); } .page-id-470 .fi-service-section__head .cat { margin: 0 0 6px !important; color: #713b2d !important; font-family: var(--mono, "IBM Plex Mono", monospace) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .page-id-470 .fi-service-section__head h2 { max-width: 26ch; margin: 0 !important; color: #231b15 !important; font-size: clamp(26px, 2.4vw, 34px) !important; line-height: 1.12 !important; } .page-id-470 .fi-service-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important; gap: 14px !important; } /* The left rule is the tone carried 80 percent of the way to ink. At full strength brass measured 2.4:1 against its own card face while steel measured 6.6:1, so the five accents read as five different weights; at 80 percent the spread is 3.35:1 to 10.2:1 and every one clears 3:1 in both the rest and the hover state. */ .page-id-470 .fi-service-card { padding: 18px 20px !important; border: 1px solid rgba(113, 59, 45, .18) !important; border-left: 4px solid color-mix(in srgb, var(--sector-tone) 80%, #231b15) !important; background: color-mix(in srgb, var(--sector-tone) 13%, #fffdf8) !important; background-image: none !important; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .page-id-470 .fi-service-card::before { display: none !important; } .page-id-470 .fi-service-card h3 { margin: 0 0 7px !important; font-size: 18.5px !important; line-height: 1.24 !important; } .page-id-470 .fi-service-card h3 a { color: #231b15 !important; font-size: 18.5px !important; line-height: 1.24 !important; text-decoration: none !important; } .page-id-470 .fi-service-card p { color: #564c41 !important; font-size: 15px !important; line-height: 1.5 !important; } .page-id-470 .fi-service-card:hover, .page-id-470 .fi-service-card:focus-within { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sector-tone) 40%, transparent) !important; background: color-mix(in srgb, var(--sector-tone) 22%, #fffdf8) !important; box-shadow: 0 8px 20px rgba(35, 27, 21, .10); } /* The ring was light brass because the panel was coal; on paper that measures about 1.4:1. Ink measures 16.67:1 against the panel the ring is actually drawn on, once outline-offset is taken into account. */ .page-id-470 .fi-service-card:focus-within { outline: 3px solid #231b15 !important; outline-offset: 3px !important; } .page-id-470 .fi-service-card:hover h3 a, .page-id-470 .fi-service-card h3 a:focus-visible { color: #231b15 !important; text-decoration: underline !important; text-underline-offset: 3px; } /* The closing panel now uses the clay, brass and oxide of the article intent panel instead of a brown that appears nowhere else. */ .page-id-470 .fi-service-page > .fi-service-cta { border: 1px solid #d9c3b8 !important; border-top: 3px solid #c99550 !important; background: #ead4ca !important; background-image: none !important; color: #231b15 !important; } .page-id-470 .fi-service-cta h2 { color: #231b15 !important; } .page-id-470 .fi-service-cta p { color: #4a4139 !important; } .page-id-470 .fi-service-cta p a { color: #713b2d !important; text-decoration: underline !important; text-underline-offset: 3px; } .page-id-470 .fi-service-cta p a:hover, .page-id-470 .fi-service-cta p a:focus-visible { color: #231b15 !important; } .page-id-470 .fi-service-cta .btn.btn--on-dark { border-color: #713b2d !important; background: #713b2d !important; color: #fffdf8 !important; } .page-id-470 .fi-service-cta .btn.btn--on-dark:hover, .page-id-470 .fi-service-cta .btn.btn--on-dark:focus-visible { border-color: #231b15 !important; background: #231b15 !important; color: #fffdf8 !important; } .page-id-470 .fi-service-cta .btn.btn--on-dark:focus-visible { outline: 3px solid #231b15 !important; outline-offset: 3px !important; } @media (prefers-reduced-motion: reduce) { .page-id-470 .fi-service-card { transition: none !important; } .page-id-470 .fi-service-card:hover, .page-id-470 .fi-service-card:focus-within { transform: none !important; } } @media (max-width: 700px) { .page-id-470 .fi-service-page > .fi-service-section { padding: 30px 18px !important; } .page-id-470 .fi-service-grid { grid-template-columns: 1fr !important; } } .fi-service-page .stat-strip, .fi-service-page .deliverables, .fi-service-page .fi-process { gap: 16px !important; } .fi-service-page .stat-strip > *, .fi-service-page .deliverables > li, .fi-service-page .fi-process > * { background: rgba(255, 255, 255, .028) !important; border: 1px solid rgba(216, 165, 95, .24) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .025); transition: transform .16s ease, border-color .16s ease, background-color .16s ease; } .fi-service-page .stat-strip > *:hover, .fi-service-page .deliverables > li:hover, .fi-service-page .fi-process > *:hover { transform: translateY(-2px); border-color: rgba(216, 165, 95, .48) !important; background: rgba(216, 165, 95, .065) !important; } .fi-service-page .ratecard, .fi-service-page .fi-tablewrap { width: 100% !important; max-width: 100% !important; } .fi-service-page > .fi-proof-callout { margin-top: 22px !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .10); } @media (max-width: 700px) { .fi-service-page > .fi-service-section { margin-top: 14px; padding: 42px 20px !important; } .fi-service-section__head h2 { font-size: clamp(30px, 9vw, 40px) !important; } } /* Restore the intended landscape evidence, only on pages where measurements proved real truncation. */ .page-id-6 .fi-core-visual, .page-id-470 .fi-core-visual, .page-id-9 .fi-core-visual { aspect-ratio: 16 / 9 !important; height: auto !important; overflow: hidden !important; } .page-id-6 .fi-core-visual > img, .page-id-470 .fi-core-visual > img, .page-id-9 .fi-core-visual > img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 50% !important; } /* Archive labels: dark text on brass replaces the measured near-1:1 gold-on-gold pair. */ body:is(.archive, .blog) .entry-meta .cat-links { color: #d8cfc2 !important; } body:is(.archive, .blog) .entry-meta .cat-links .gp-icon { color: var(--fi-polish-brass-soft) !important; } body:is(.archive, .blog) .entry-meta .cat-links a[rel~="category"] { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px !important; background: var(--fi-polish-brass) !important; border: 1px solid #efc98f !important; color: var(--fi-polish-ink) !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1.25 !important; letter-spacing: .035em; text-decoration: none !important; } body:is(.archive, .blog) .entry-meta .cat-links a[rel~="category"]:hover, body:is(.archive, .blog) .entry-meta .cat-links a[rel~="category"]:focus-visible { background: #efc98f !important; color: #0f0c09 !important; outline: 3px solid var(--fi-polish-blue) !important; outline-offset: 3px !important; } /* Article rails: preserve body measure, give the evidence rail a bounded readable width. */ @media (min-width: 1240px) and (max-width: 1359px) { .single-post .site-main { width: calc(100% - 32px) !important; max-width: 1264px !important; grid-template-columns: 190px minmax(0, 680px) minmax(300px, 1fr) !important; column-gap: 18px !important; } } @media (min-width: 1360px) { .single-post .site-main { width: calc(100% - 40px) !important; max-width: 1320px !important; grid-template-columns: 200px minmax(0, 720px) minmax(320px, 360px) !important; column-gap: 20px !important; justify-content: center; } } @media (min-width: 1240px) { .single-post .fi-rail-right { width: 100% !important; padding: 0 0 18px 16px !important; gap: 16px !important; border-left: 1px solid rgba(216, 165, 95, .28); } .single-post .fi-rail-audit, .single-post .fi-rail-services { width: 100% !important; padding: 24px 22px !important; border: 1px solid rgba(216, 165, 95, .28) !important; background: linear-gradient(145deg, rgba(216, 165, 95, .065), rgba(255, 255, 255, .015)) !important; } .single-post .fi-rail-audit__label { font-size: 11px !important; line-height: 1.35 !important; color: var(--fi-polish-brass-soft) !important; } .single-post .fi-rail-audit__title { font-size: 18px !important; line-height: 1.35 !important; color: var(--fi-polish-ivory) !important; } .single-post .fi-rail-audit > p:not(.fi-rail-audit__label):not(.fi-rail-audit__title):not(.fi-rail-audit__note) { font-size: 15.5px !important; line-height: 1.55 !important; color: #d8cfc2 !important; } .single-post .fi-rail-audit__note { font-size: 11.5px !important; line-height: 1.45 !important; color: #c8beb0 !important; } .single-post .fi-rail-service { min-height: 58px; padding: 12px 0 !important; } .single-post .fi-rail-service strong { font-size: 15.5px !important; line-height: 1.32 !important; } .single-post .fi-rail-service small { font-size: 13.5px !important; line-height: 1.38 !important; color: #c8beb0 !important; } .single-post .fi-rail-services__all { font-size: 12px !important; line-height: 1.4 !important; color: var(--fi-polish-brass-soft) !important; } } @media (min-width: 1240px) and (max-height: 959px) { .single-post .fi-rail-right { position: static !important; top: auto !important; } } @media (min-width: 1240px) and (min-height: 960px) { .single-post .fi-rail-right { position: sticky !important; top: 82px !important; max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: var(--fi-polish-brass) var(--fi-polish-coal); } } /* Incognito-first ToC: the final item remains reachable without an admin toolbar. */ .single-post .toc { box-sizing: border-box; max-height: clamp(220px, calc(100dvh - 430px), 360px) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: var(--fi-polish-brass) var(--fi-polish-coal); scroll-padding-block: 10px 24px; padding: 4px 10px 24px 0 !important; } .single-post .toc::-webkit-scrollbar, .single-post .fi-rail-right::-webkit-scrollbar { width: 10px; } .single-post .toc::-webkit-scrollbar-track, .single-post .fi-rail-right::-webkit-scrollbar-track { background: var(--fi-polish-coal); } .single-post .toc::-webkit-scrollbar-thumb, .single-post .fi-rail-right::-webkit-scrollbar-thumb { background: var(--fi-polish-brass); border: 2px solid var(--fi-polish-coal); border-radius: 999px; } .single-post .toc:focus-visible { outline: 3px solid var(--fi-polish-blue) !important; outline-offset: 4px; } .single-post .toc a { display: block; padding: 7px 9px !important; color: #cec5b8 !important; font-size: 15px !important; line-height: 1.36 !important; border-left: 2px solid transparent; } .single-post .toc a:hover, .single-post .toc a:focus-visible, .single-post .toc a.is-active { color: #f2c987 !important; border-left-color: var(--fi-polish-brass) !important; background: rgba(216, 165, 95, .075); } .single-post .entry-content [id] { scroll-margin-top: 96px; } /* Buyer Guides split: balanced landscape evidence and decision list, without copy changes. */ .fi-home-feature--software .fi-home-feature__grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important; gap: clamp(44px, 5vw, 72px) !important; align-items: center !important; } .fi-home-feature--software .fi-home-vignette { align-self: center; box-shadow: 0 22px 52px rgba(0, 0, 0, .16); } .fi-home-feature--software h2 { max-width: 14ch; font-size: clamp(42px, 3.8vw, 52px) !important; line-height: 1.04 !important; text-wrap: balance; } .fi-home-feature--software .fi-home-feature__lede { font-size: clamp(18px, 1.45vw, 20px) !important; line-height: 1.55 !important; margin-bottom: 24px !important; } .fi-home-feature--software .fi-home-guide-list { margin-bottom: 24px !important; } .fi-home-feature--software .fi-home-guide-list article { padding-block: 16px !important; } @media (max-width: 900px) { .fi-home-feature--software .fi-home-feature__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; align-items: start !important; } .fi-home-feature--software h2 { font-size: clamp(38px, 12vw, 48px) !important; } } /* High-specificity bridge for the accepted late visual layer (124) and LiteSpeed UCSS. */ @media (min-width: 901px) { body .masthead__nav .masthead__item--has-children .library-menu, body .masthead__nav .masthead__item--has-children .library-menu.is-open { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(980px, calc(100vw - 48px)) !important; grid-template-columns: 300px minmax(0, 1fr) !important; } body .masthead__nav .library-menu .library-sections { width: auto !important; } body .masthead__nav .library-menu .library-flyout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 900px) { body .masthead.is-open .masthead__nav, body .masthead .masthead__nav:has(.masthead__submenu.is-open) { max-height: calc(100dvh - 75px) !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-color: var(--fi-polish-brass) var(--fi-polish-coal); } body .masthead__nav .services-menu, body .masthead__nav .services-menu.is-open { max-height: min(620px, calc(100dvh - 250px)) !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-color: var(--fi-polish-brass) var(--fi-polish-coal); } } @media (min-width: 1240px) and (max-width: 1359px) { body.single-post.single #page #content #primary #main.site-main, html[data-theme] body.single-post.single #page #content #primary #main.site-main { width: calc(100% - 32px) !important; max-width: 1264px !important; grid-template-columns: 190px minmax(0, 680px) minmax(300px, 1fr) !important; column-gap: 18px !important; } } @media (min-width: 1360px) { body.single-post.single #page #content #primary #main.site-main, html[data-theme] body.single-post.single #page #content #primary #main.site-main { width: calc(100% - 40px) !important; max-width: 1320px !important; grid-template-columns: 200px minmax(0, 720px) minmax(320px, 360px) !important; column-gap: 20px !important; justify-content: center !important; } } @media (min-width: 1240px) { body.single-post.single #main.site-main > .fi-rail-right { width: 100% !important; padding: 0 0 18px 16px !important; gap: 16px !important; border-left: 1px solid rgba(216, 165, 95, .28) !important; } } @media (min-width: 1240px) and (max-height: 959px) { body.single-post.single #main.site-main > .fi-rail-right { position: static !important; top: auto !important; } } @media (min-width: 1240px) and (min-height: 960px) { body.single-post.single #main.site-main > .fi-rail-right { position: sticky !important; top: 82px !important; max-height: calc(100dvh - 104px) !important; overflow-y: auto !important; } } body.page-id-470 .fi-service-page > .fi-page-hero .fi-core-visual, body.page-id-9 .fi-core-pages-v1 .fi-core-visual, body.page-id-9 .fi-page-hero .fi-core-visual { aspect-ratio: 16 / 9 !important; height: auto !important; overflow: hidden !important; } body.page-id-470 .fi-service-page > .fi-page-hero .fi-core-visual > img, body.page-id-9 .fi-core-pages-v1 .fi-core-visual > img, body.page-id-9 .fi-page-hero .fi-core-visual > img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 50% !important; } body.page-id-9 .fi-core-pages-v1 .fi-contact-page > .fi-page-hero.fi-core-visualized > .fi-core-visual { aspect-ratio: 16 / 9 !important; height: auto !important; overflow: hidden !important; } body.page-id-9 .fi-core-pages-v1 .fi-contact-page > .fi-page-hero.fi-core-visualized > .fi-core-visual > img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 50% !important; } html body nav.masthead__nav #library-menu.library-menu .library-flyout a.library-seeall { display: inline-flex !important; align-items: center; justify-self: start; min-height: 42px; padding: 10px 14px !important; background: var(--fi-polish-brass) !important; color: var(--fi-polish-ink) !important; border: 1px solid #efc98f !important; } /* Article footer meta. This block was still GeneratePress: a stock folder glyph, a stock tag glyph, a left-arrow glyph, body text at rgb(87, 87, 96) - a blue-grey on warm paper - and the previous post rendered as a bare headline with nothing saying what it was. It is the last thing a reader sees on every article, so it now uses the same mono micro-label idiom as the author box directly beneath it. The glyphs go; the labels GeneratePress already writes for screen readers become the visible labels, so there is one label instead of an icon plus a hidden one. */ body.single-post .inside-article > footer.entry-meta { margin-top: 34px !important; padding-top: 20px; border-top: 1px solid rgba(113, 59, 45, .18); color: #6b6054 !important; } body.single-post .inside-article > footer.entry-meta .gp-icon { display: none !important; } body.single-post .inside-article > footer.entry-meta .cat-links, body.single-post .inside-article > footer.entry-meta .tags-links { display: block; margin: 0 0 14px; } body.single-post .inside-article > footer.entry-meta .post-navigation { margin-top: 4px; } body.single-post .inside-article > footer.entry-meta .nav-previous, body.single-post .inside-article > footer.entry-meta .nav-next { display: block; } body.single-post .inside-article > footer.entry-meta .cat-links > .screen-reader-text, body.single-post .inside-article > footer.entry-meta .tags-links > .screen-reader-text, body.single-post .inside-article > footer.entry-meta .nav-previous::before, body.single-post .inside-article > footer.entry-meta .nav-next::before { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; display: block; margin: 0 0 5px; color: #713b2d; font-family: var(--mono, "IBM Plex Mono", monospace); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: normal; } body.single-post .inside-article > footer.entry-meta .nav-previous::before { content: "Previously"; } body.single-post .inside-article > footer.entry-meta .nav-next::before { content: "Next up"; } body.single-post .inside-article > footer.entry-meta a { color: #713b2d !important; text-underline-offset: 3px; } /* The theme colours the post-navigation links through #nav-below, an ID, which no number of classes can outrank. Carrying the ID is the only way to make all three links the same oxide; without it the previous-post link stays rgb(75, 48, 14). */ body.single-post .inside-article > footer.entry-meta #nav-below a, body.single-post .inside-article > footer.entry-meta .post-navigation a { color: #713b2d !important; } body.single-post .inside-article > footer.entry-meta a:hover, body.single-post .inside-article > footer.entry-meta a:focus-visible, body.single-post .inside-article > footer.entry-meta #nav-below a:hover, body.single-post .inside-article > footer.entry-meta #nav-below a:focus-visible { color: #231b15 !important; } /* A. The Customizer carries a global `a:hover { color: var(--brass-text) }`, and --brass-text is rgb(122, 90, 30). That is a sensible hover for body links on paper, and wrong for any link that paints its own background: measured on 13 September 2026 it lands at 1.23:1 on the deep-steel desk tile, 1.40:1 on the Library dropdown CTA - the brown-on-brown the owner reported - 3.61:1 on the rail's brass button, and 4.28 to 4.48:1 on the clay and mineral tiles. The Customizer is out of scope to edit, so each affected component holds its own rest colour through hover instead. Every one of them already signals hover some other way - a tint, a lift, a shadow - so nothing is lost by not recolouring the text. Components that clear 4.5:1 on brass keep the brass hover: the Library topic cards at 5.98:1 and the industries cross-link at 4.88:1 are untouched. Whole components are fixed rather than the failing variants alone, so that one service row does not hover differently from the other four. */ a.nav-service-row:hover, a.nav-service-row:focus-visible, li.desk:not(.desk--deep-steel) > a:hover, li.desk:not(.desk--deep-steel) > a:focus-visible, li.service-directory__item > a:hover, li.service-directory__item > a:focus-visible, a.service-pitch__primary:hover, a.service-pitch__primary:focus-visible { color: #231b15; } li.desk.desk--deep-steel > a:hover, li.desk.desk--deep-steel > a:focus-visible { color: #f5f0e6; } /* The two full-width buttons had no hover of their own at all, so holding the text colour would leave them with no hover state. They take the same deepening the article CTA and the interview rail button already use. */ a.nav-library__all:hover, a.nav-library__all:focus-visible { background: #231b15; color: #fffdf8; } a.service-pitch__primary:hover, a.service-pitch__primary:focus-visible { border-color: #8a6a33; background: #c99550; } /* B. The article intent panel offers secondary links to service pages that the right rail already lists in full, numbered, on every article and at every width including 390px - so a website/RFQ article showed Manufacturer Website Design and RFQ Conversion Optimization twice on one screen. The panel keeps its primary action and its proof link; the duplicated service links go. Matched on href with $= rather than *= so that, for example, /manufacturing-seo/ does not also match a longer desk URL. Secondary links that are NOT duplicated - the $0 review and "See the investigation method" - are deliberately left in place. */ body.single-post .fi-intent-cta__actions a.fi-intent-cta__secondary[href$="/manufacturing-website-design/"], body.single-post .fi-intent-cta__actions a.fi-intent-cta__secondary[href$="/manufacturing-seo/"], body.single-post .fi-intent-cta__actions a.fi-intent-cta__secondary[href$="/manufacturer-content-marketing/"], body.single-post .fi-intent-cta__actions a.fi-intent-cta__secondary[href$="/rfq-conversion-optimization/"], body.single-post .fi-intent-cta__actions a.fi-intent-cta__secondary[href$="/manufacturer-analytics-crm-tracking/"] { display: none !important; } /* Published Factory Floor Conversations on page 58. The renderer only emits this section when at least one interview is published, so these rules paint nothing today. Same card language as the industries directory: a 13% tone wash, the tone carried 80 percent to ink on the left edge, ink text, one clay hairline. */ .page-id-58 .fi-interview-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .page-id-58 a.fi-interview-card { --iv-tone: #355762; display: block; padding: 18px 20px; border: 1px solid rgba(113, 59, 45, .18); border-left: 4px solid color-mix(in srgb, var(--iv-tone) 80%, #231b15); background: color-mix(in srgb, var(--iv-tone) 13%, #fffdf8); color: #231b15; text-decoration: none; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .page-id-58 a.fi-interview-card:nth-child(5n+2) { --iv-tone: #c99550; } .page-id-58 a.fi-interview-card:nth-child(5n+3) { --iv-tone: #98533d; } .page-id-58 a.fi-interview-card:nth-child(5n+4) { --iv-tone: #4f624a; } .page-id-58 a.fi-interview-card:nth-child(5n+5) { --iv-tone: #49372b; } .page-id-58 .fi-interview-card__kicker { display: block; margin: 0 0 6px; color: #713b2d; font-family: var(--mono, "IBM Plex Mono", monospace); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .page-id-58 .fi-interview-card b { display: block; margin: 0 0 8px; color: #231b15; font-size: 18.5px; font-weight: 700; line-height: 1.24; } .page-id-58 .fi-interview-card__guest { display: block; color: #564c41; font-size: 15px; line-height: 1.5; } /* The webfont set is roman only and the theme sets font-synthesis: none, so an computes italic and draws upright unless synthesis is allowed back. */ .page-id-58 .fi-interview-card__guest em { font-style: italic; font-synthesis: style; color: #6b6054; } /* The card is a link that paints its own background, so it must state its hover colour or the global a:hover turns it brass on its own wash. */ .page-id-58 a.fi-interview-card:hover, .page-id-58 a.fi-interview-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--iv-tone) 40%, transparent); background: color-mix(in srgb, var(--iv-tone) 22%, #fffdf8); color: #231b15; box-shadow: 0 8px 20px rgba(35, 27, 21, .10); } .page-id-58 a.fi-interview-card:focus-visible { outline: 3px solid #231b15; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .page-id-58 a.fi-interview-card { transition: none; } .page-id-58 a.fi-interview-card:hover, .page-id-58 a.fi-interview-card:focus-visible { transform: none; } } @media (prefers-reduced-motion: reduce) { .masthead__item--has-children > button .ic, .library-section, .library-topic, .fi-services-menu__service, .fi-services-menu__cta, .fi-service-page .stat-strip > *, .fi-service-page .deliverables > li, .fi-service-page .fi-process > * { transition: none !important; } } /* inline:fi-final-qa-v11-mobile-20260727 */ .fi-page-hero__cta, .fi-page-hero__cta:visited, .fi-page-hero__cta:hover, .fi-page-hero__cta:focus, .fi-page-hero__cta span{color:#17130f!important;} @media(max-width:900px){ .fi-home-latest-grid{grid-template-columns:minmax(0,1fr)!important;} .fi-home-lead-story{min-width:0!important;} .fi-home-latest-aside{min-width:0!important;} } @media(max-width:720px){ #post-62 .fi-hub-lede.fi-core-visualized>.fi-page-kicker, #post-62 .fi-hub-lede.fi-core-visualized>h2, #post-62 .fi-hub-lede.fi-core-visualized>.lede{margin-inline:24px!important;width:auto!important;} } /* inline:fi-customer-language-immersive-v1 */ body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit{max-width:1240px!important;padding-top:38px!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero{display:grid!important;grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr)!important;gap:clamp(34px,5vw,72px)!important;align-items:center!important;padding:clamp(42px,6vw,72px)!important;background:radial-gradient(circle at 86% 22%,rgba(201,149,80,.11),transparent 34%),linear-gradient(145deg,#191510,#100e0c)!important;border:1px solid rgba(216,165,95,.36)!important;border-top:4px solid #D8A55F!important;box-shadow:0 28px 80px rgba(0,0,0,.24)!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-copy{min-width:0!important} body.page-id-948:not(.fi-tpl-2026-08) #fi-audit-assignment{scroll-margin-top:120px!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero h1{max-width:760px!important;margin:10px 0 18px!important;font:500 clamp(44px,5vw,66px)/.99 Fraunces,Georgia,serif!important;text-wrap:balance!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__lead{max-width:57ch!important;margin:0!important;color:#EEE7DB!important;font:500 clamp(18px,1.65vw,22px)/1.55 "Source Serif 4",Georgia,serif!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__disclosure{display:block!important;max-width:58ch!important;margin:18px 0 0!important;padding:0 0 0 13px!important;border:0!important;border-left:2px solid #69B7DE!important;color:#CFC6B9!important;background:transparent!important;font:600 13px/1.5 "DM Sans",sans-serif!important;letter-spacing:0!important;text-transform:none!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-actions{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:12px 20px!important;margin-top:25px!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-actions .btn{min-height:50px!important;padding:13px 18px!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-link{display:inline-flex!important;align-items:center!important;min-height:48px!important;color:#79C5EA!important;font:800 14px/1.3 "DM Sans",sans-serif!important;text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:5px!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-link:hover{color:#F7F2E8!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-visual{position:relative!important;overflow:hidden!important;margin:0!important;border:1px solid rgba(216,165,95,.62)!important;background:#0E0C0A!important;box-shadow:18px 18px 0 rgba(216,165,95,.055),0 28px 58px rgba(0,0,0,.36)!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-image{display:block!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;object-position:center!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-visual figcaption{display:grid!important;grid-template-columns:repeat(3,1fr)!important;margin:0!important;padding:12px 10px!important;border-top:1px solid rgba(216,165,95,.42)!important;background:#16120F!important;color:#F7F2E8!important;font:800 13px/1.4 "IBM Plex Mono",monospace!important;letter-spacing:.05em!important;text-transform:uppercase!important;text-align:center!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-visual figcaption span+span{border-left:1px solid rgba(216,165,95,.28)!important} body .footer.fi-footer-immersive-v1 .footer__grid{display:grid!important;grid-template-columns:minmax(250px,1.05fr) minmax(180px,.78fr) minmax(360px,1.45fr) minmax(280px,1.18fr)!important;gap:clamp(22px,2.4vw,42px)!important;align-items:start!important} body .footer.fi-footer-immersive-v1 .footer__library{display:block!important;min-width:0!important} body .footer.fi-footer-immersive-v1 .fi-footer-nav-pair{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important} body .footer.fi-footer-immersive-v1 .fi-footer-group{min-width:0!important} body .footer.fi-footer-immersive-v1 .fi-footer-group>.footer__heading{margin:0 0 14px!important;padding:0 0 10px!important;border-bottom:1px solid rgba(216,165,95,.28)!important} body .footer.fi-footer-immersive-v1 .fi-footer-group>ul{display:grid!important;gap:2px!important;margin:0!important;padding:0!important;list-style:none!important} body .footer.fi-footer-immersive-v1 .fi-footer-group li{margin:0!important;padding:0!important;border:0!important} body .footer.fi-footer-immersive-v1 .fi-footer-group a, body .footer.fi-footer-immersive-v1 .footer__sections>ul>li>a{display:flex!important;align-items:center!important;justify-content:flex-start!important;min-height:40px!important;padding:7px 0!important;color:#F5F1E8!important;font:500 16px/1.42 "DM Sans",sans-serif!important;text-decoration:none!important} body .footer.fi-footer-immersive-v1 .fi-footer-group a:hover, body .footer.fi-footer-immersive-v1 .footer__sections>ul>li>a:hover{color:#D8A55F!important} body .footer.fi-footer-immersive-v1 a::after{content:none!important;display:none!important} body .footer.fi-footer-immersive-v1 .footer__industries{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;align-items:start!important;margin-top:26px!important;padding:20px!important;border:1px solid rgba(216,165,95,.42)!important;border-top:2px solid #D8A55F!important;background:linear-gradient(145deg,rgba(216,165,95,.095),rgba(255,255,255,.018))!important} body .footer.fi-footer-immersive-v1 .footer__industries .footer__heading{margin:0 0 7px!important} body .footer.fi-footer-immersive-v1 .footer__industries p:not(.footer__heading){max-width:48ch!important;margin:0!important;color:#CFC6B9!important;font:500 14px/1.55 "DM Sans",sans-serif!important} body .footer.fi-footer-immersive-v1 .fi-footer-industries__link{display:inline-flex!important;align-items:center!important;min-height:44px!important;color:#79C5EA!important;font:800 16px/1.4 "DM Sans",sans-serif!important;text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:4px!important;white-space:normal!important} body .footer.fi-footer-immersive-v1 .fi-footer-industries__link:hover{color:#F5F1E8!important} body .footer.fi-footer-immersive-v1 .fi-footer-dispatch-scene{overflow:hidden!important;margin:26px 0 0!important;border:1px solid rgba(216,165,95,.48)!important;background:#0F0D0B!important;box-shadow:0 18px 46px rgba(0,0,0,.28)!important} body .footer.fi-footer-immersive-v1 .fi-footer-dispatch-scene__image{display:block!important;width:100%!important;height:auto!important;aspect-ratio:3/2!important;object-fit:cover!important;object-position:center!important} body .footer.fi-footer-immersive-v1 .fi-footer-dispatch-scene figcaption{margin:0!important;padding:10px 12px!important;border-top:1px solid rgba(216,165,95,.34)!important;color:#D8A55F!important;background:#14110E!important;font:700 12px/1.5 "IBM Plex Mono",monospace!important;letter-spacing:.06em!important;text-transform:uppercase!important} body .footer.fi-footer-immersive-v1 .footer__news>.footer__heading{margin-bottom:13px!important} body .footer.fi-footer-immersive-v1 .footer__copy{margin-top:34px!important} @media(max-width:1380px){ body .footer.fi-footer-immersive-v1 .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} body .footer.fi-footer-immersive-v1 .footer__identity{grid-column:1!important;grid-row:1!important} body .footer.fi-footer-immersive-v1 .footer__sections{grid-column:2!important;grid-row:1!important} body .footer.fi-footer-immersive-v1 .footer__library{grid-column:1!important;grid-row:2!important} body .footer.fi-footer-immersive-v1 .footer__news{grid-column:2!important;grid-row:2!important} } @media(max-width:860px){ body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero{grid-template-columns:1fr!important;gap:30px!important;padding:36px 28px!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero h1{font-size:clamp(38px,10vw,48px)!important;line-height:1.02!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-visual{width:100%!important;max-width:620px!important} body .footer.fi-footer-immersive-v1 .footer__grid{grid-template-columns:1fr!important} body .footer.fi-footer-immersive-v1 .footer__identity, body .footer.fi-footer-immersive-v1 .footer__sections, body .footer.fi-footer-immersive-v1 .footer__library, body .footer.fi-footer-immersive-v1 .footer__news{grid-column:1!important;grid-row:auto!important} body .footer.fi-footer-immersive-v1 .fi-footer-group a, body .footer.fi-footer-immersive-v1 .footer__sections>ul>li>a{min-height:44px!important} } @media(max-width:560px){ body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit{padding-inline:12px!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero{padding:30px 20px!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-actions{align-items:stretch!important;flex-direction:column!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-actions .btn, body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-link{width:100%!important;justify-content:center!important;text-align:center!important} body.page-id-948:not(.fi-tpl-2026-08) .fi-self-audit__hero-visual figcaption{font-size:12px!important} body .footer.fi-footer-immersive-v1 .fi-footer-nav-pair{grid-template-columns:1fr!important;gap:24px!important} body .footer.fi-footer-immersive-v1 .footer__industries{grid-template-columns:1fr!important;align-items:start!important} body .footer.fi-footer-immersive-v1 .fi-footer-industries__link{white-space:normal!important} } /* inline:fi-services-landscape-v1-20260727 */ @media(min-width:1100px){ html body #masthead nav.masthead__nav #services-menu.masthead__submenu.services-menu{ position:fixed!important; top:var(--fi-services-menu-top,76px)!important; left:50vw!important; right:auto!important; transform:translateX(-50%)!important; display:none!important; grid-template-columns:315px minmax(0,1fr)!important; gap:0!important; width:min(1080px,calc(100vw - 48px))!important; min-width:0!important; max-width:min(1080px,calc(100vw - 48px))!important; padding:0!important; box-sizing:border-box!important; overflow:hidden!important; background:#17130f!important; border:1px solid rgba(216,165,95,.58)!important; box-shadow:0 24px 64px rgba(0,0,0,.4)!important; } html body #masthead nav.masthead__nav #services-menu.masthead__submenu.services-menu.is-open{ display:grid!important; } html body #masthead #services-menu .fi-services-menu__start{ min-width:0!important; padding:22px 22px!important; } html body #masthead #services-menu .fi-services-menu__start h2{ margin-bottom:8px!important; font-size:26px!important; } html body #masthead #services-menu .fi-services-menu__start>p:not(.fi-services-menu__eyebrow){ margin-bottom:12px!important; font-size:12px!important; } html body #masthead #services-menu .fi-services-menu__signals{ margin-bottom:13px!important; } html body #masthead #services-menu .fi-services-menu__map{ min-width:0!important; padding:20px 20px 18px!important; } html body #masthead #services-menu .fi-services-menu__head{ margin-bottom:12px!important; } html body #masthead #services-menu .fi-services-menu__grid{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:8px!important; } html body #masthead #services-menu .fi-services-menu__service{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-start!important; gap:8px!important; min-width:0!important; min-height:132px!important; padding:13px 11px!important; } html body #masthead #services-menu .fi-services-menu__service>b{ flex:0 0 auto!important; } html body #masthead #services-menu .fi-services-menu__service>span{ display:block!important; min-width:0!important; } html body #masthead #services-menu .fi-services-menu__service strong{ font-size:12px!important; line-height:1.22!important; } html body #masthead #services-menu .fi-services-menu__service small{ margin-top:5px!important; font-size:10px!important; line-height:1.35!important; } } @media(min-width:900px) and (max-width:1099px){ html body #masthead nav.masthead__nav #services-menu.masthead__submenu.services-menu{ left:50vw!important; right:auto!important; transform:translateX(-50%)!important; width:min(920px,calc(100vw - 32px))!important; max-width:min(920px,calc(100vw - 32px))!important; grid-template-columns:270px minmax(0,1fr)!important; } html body #masthead #services-menu .fi-services-menu__grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } } /* inline:fi-audit-corrections-v1-20260808 */ /* 1. Restore the existing Updated date so its label is never orphaned. */ body.archive .posted-on .updated, body.blog .posted-on .updated { display: inline !important; } /* 2. Keep the archive head visual inside its own grid track. */ body.archive .fi-archive-head__layout > * { min-width: 0 !important; } body.archive .fi-archive-head__visual { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } body.archive .fi-archive-head__visual > img { width: 100% !important; max-width: 100% !important; } /* 3. Separate the date block from the byline that follows it. */ body.archive .entry-meta .posted-on + .byline, body.blog .entry-meta .posted-on + .byline { margin-left: .5em !important; } /* inline:fi-responsive-corrections-v1-20260809 */ /* Article column: restore symmetric centring below 1200px. Width unchanged. */ @media (max-width: 1199.98px) { body.single-post .site-main { margin-left: auto !important; margin-right: auto !important; } } /* inline:fi-mobile-masthead-compact-v1-20260809 */ @media (max-width: 767px) { html body #masthead.masthead .masthead__bar { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 42px !important; grid-template-areas: "brand brand toggle" "lang cta cta" !important; gap: 8px !important; align-items: center !important; } html body #masthead.masthead .masthead__wordmark { grid-area: brand !important; min-width: 0 !important; } html body #masthead.masthead .masthead__toggle { grid-area: toggle !important; margin: 0 !important; } html body #masthead.masthead .masthead__nav { grid-area: nav !important; } html body #masthead.masthead .masthead__language-switcher { grid-area: lang !important; height: 42px !important; line-height: 0 !important; margin: 0 !important; } html body #masthead.masthead .masthead__language-switcher details { height: 42px !important; line-height: 0 !important; } html body #masthead.masthead .masthead__cta { grid-area: cta !important; width: 100% !important; max-width: none !important; white-space: normal !important; text-align: center !important; margin: 0 !important; } html body #masthead.masthead.is-open .masthead__bar { grid-template-areas: "brand brand toggle" "nav nav nav" "lang cta cta" !important; } html body #masthead.masthead.masthead--stuck .masthead__wordmark { min-height: 48px !important; gap: 10px !important; font-size: 22px !important; } html body #masthead.masthead.masthead--stuck .masthead__wordmark .masthead__seal, html body #masthead.masthead.masthead--stuck .masthead__wordmark img { width: 38px !important; height: 38px !important; flex-basis: 38px !important; } } @media (max-width: 380px) { html body #masthead.masthead.masthead--stuck .masthead__wordmark { gap: 8px !important; font-size: 20px !important; } html body #masthead.masthead.masthead--stuck .masthead__wordmark .masthead__seal, html body #masthead.masthead.masthead--stuck .masthead__wordmark img { width: 36px !important; height: 36px !important; flex-basis: 36px !important; } } @media (max-width: 350px) { html body #masthead.masthead .masthead__wordmark, html body #masthead.masthead.masthead--stuck .masthead__wordmark { gap: 6px !important; font-size: 18px !important; } html body #masthead.masthead .masthead__wordmark .masthead__seal, html body #masthead.masthead .masthead__wordmark img, html body #masthead.masthead.masthead--stuck .masthead__wordmark .masthead__seal, html body #masthead.masthead.masthead--stuck .masthead__wordmark img { width: 32px !important; height: 32px !important; flex-basis: 32px !important; } } /* inline:fi-contrast-corrections-v7 */ /* 1. The editorial intent CTA sits on light cream, but inherited the light-on-dark .cta-card treatment. Give it ink text and a real button. */ .fi-intent-cta--editorial > p { color: var(--lab-ink-soft, #5e5247) !important; } .cta-card.fi-intent-cta--editorial .btn.btn--primary, .fi-intent-cta--editorial .fi-intent-cta__actions .btn--primary { background: var(--lab-oxide-deep, #713b2d) !important; border-color: var(--lab-oxide-deep, #713b2d) !important; color: #fffdf8 !important; } .cta-card.fi-intent-cta--editorial .btn.btn--primary:hover, .cta-card.fi-intent-cta--editorial .btn.btn--primary:focus-visible { background: var(--lab-ink, #231b15) !important; border-color: var(--lab-ink, #231b15) !important; color: #fffdf8 !important; } .fi-intent-cta--editorial .fi-intent-cta__secondary { color: var(--lab-oxide-deep, #713b2d) !important; } /* 2. Form helper text on the contact and investigation pages was set for a dark surface and is painted on light parchment. */ /* A page rule, `body.page-id-9 .fi-core-pages-v1 .fi-form-assurance span`, carries !important at (0,3,2) and beat the first attempt at (0,2,1). Four classes here outrank three, so these win on both pages. */ body .fi-core-pages-v1 .fi-contact-page .fi-form-assurance span, body .fi-core-pages-v1 .fi-contact-page .fi-form-assurance p { color: #4f463d !important; } body .fi-core-pages-v1 .fi-contact-page .fi-contact-layout .fi-form-card > p { color: #5e5247 !important; } /* The investigation form carries an ID rule, `body.page-id-9 .fi-core-pages-v1 #fi-investigation-form > p:not(.fi-form-consent)`, at (1,3,1) with !important. No number of classes outranks an ID, so this match adds one class to reach (1,4,1). */ body.page-id-9 .fi-core-pages-v1 .fi-contact-page #fi-investigation-form > p:not(.fi-form-consent) { color: #5e5247 !important; } /* 2b. The resting colour of the top-level navigation is #6c5f54 on the clay masthead: 3.51:1 at 17px, below the 4.5 needed. It already jumps to --nav-ink on hover and when a menu is open, so only the resting state changes here. Darkened the minimum needed (to 5.0:1), keeping the muted hierarchy against the active item. */ body .masthead .primary-nav > a, body .masthead .primary-nav .nav-group > summary { color: #544840 !important; } body .masthead .primary-nav > a:hover, body .masthead .primary-nav > a:focus-visible, body .masthead .primary-nav .nav-group > summary:hover, body .masthead .primary-nav .nav-group > summary:focus-visible, body .masthead .primary-nav .nav-group[open] > summary { color: var(--nav-ink, #231b15) !important; } /* 3. Methodology definition terms sit on the brass band. */ .methodology .methodology__grid dt { color: #2e2416 !important; } /* 4. WITHDRAWN 12 September 2026. An earlier revision recoloured the language switcher to #d8d1c4 on the strength of a 2.31:1 reading. That reading was WRONG: `.fi-mlc-header-switcher__panel` paints a background-IMAGE gradient, and the measuring harness picked a dark stop out of it and assumed a dark surface. The pills actually sit on light chrome, so the change made DE and JA nearly invisible. Reverted to the theme's own colour. Any future claim about this component must be checked against rendered pixels, not the computed-style walk. */ /* 5. Services hero note and breadcrumb on the clay wash. The breadcrumb is 12.5px at 3.51:1; small text needs the full 4.5. */ .services-hero .services-hero__note { color: #4a4139 !important; } .services-hero .breadcrumbs span, .services-hero .breadcrumbs a { color: #4a4139 !important; } .services-hero .breadcrumbs a:hover, .services-hero .breadcrumbs a:focus-visible { color: var(--lab-oxide-deep, #713b2d) !important; } /* 6. The article intent panel's primary action had no surface. `.fi-intent-cta .btn--primary` computed background-color rgba(0,0,0,0) with a transparent border, so "Request my $0 website review" rendered as plain bold text in a row of underlined links - the primary action was indistinguishable from the secondary ones. Legible, so the contrast sweep passed it, but it had lost its affordance. Site-wide, every article. Brass fill with ink text measures 5.06:1 and matches the primary button language used elsewhere. The secondary links were 21px tall; the 44px minimum applies to them too. */ .fi-intent-cta .btn.btn--primary { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; padding: 12px 22px !important; border: 1px solid #c99550 !important; background: #c99550 !important; color: #231b15 !important; text-decoration: none !important; } .fi-intent-cta .btn.btn--primary:hover, .fi-intent-cta .btn.btn--primary:focus-visible { border-color: #b8813c !important; background: #b8813c !important; color: #231b15 !important; } .fi-intent-cta .btn.btn--primary:focus-visible { outline: 3px solid #fffdf8; outline-offset: 2px; } .fi-intent-cta .fi-intent-cta__secondary { display: inline-flex !important; align-items: center; min-height: 44px; } .fi-intent-cta .fi-intent-cta__secondary:focus-visible, .fi-intent-cta .fi-intent-cta__proof a:focus-visible { outline: 3px solid #fffdf8; outline-offset: 2px; } /* The panel runs the full column width, so the title and lede were setting at roughly 110 characters. Hold them to an editorial measure. */ .fi-intent-cta .fi-intent-cta__title { max-width: 18em; } .fi-intent-cta > p:not([class]), .fi-intent-cta .fi-intent-cta__proof { max-width: 44em; } /* 7. Contact page layout. `.fi-contact-layout` is a two-column grid whose three children fell into it in source order, so the 133px assurance note and the 1,050px form shared row 1. Grid rows size to the tallest item, which left a 917px void under the note before the three info cards could begin, and the form - the page's primary action - was squeezed into 329px beside a 510px column of empty paper. Place the children explicitly: note then cards down the left, form spanning both rows on the right. */ body .fi-core-pages-v1 .fi-contact-page .fi-contact-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; align-items: start !important; } body .fi-core-pages-v1 .fi-contact-page .fi-contact-layout > .fi-form-assurance { grid-column: 1; grid-row: 1; } body .fi-core-pages-v1 .fi-contact-page .fi-contact-layout > .fi-contact-sidebar { grid-column: 1; grid-row: 2; margin-top: 0; } body .fi-core-pages-v1 .fi-contact-page .fi-contact-layout > .fi-form-card { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 104px; } /* The note carried a brass-to-navy gradient that read as a muddy tan wash over paper. One warm tint and a brass rule, the same language as other FI notes. */ body .fi-core-pages-v1 .fi-contact-page .fi-form-assurance { background-image: none !important; background-color: #f7f2e8 !important; border: 1px solid #e4ddd0 !important; border-left: 3px solid #c99550 !important; } /* The consent paragraph was set at the same size as the field labels. */ body .fi-core-pages-v1 .fi-contact-page .fi-form-consent { font-size: 13.5px !important; line-height: 1.55 !important; } @media (max-width: 1000px) { /* the accepted owner collapses this to one column here; release the explicit placement so the three blocks stack in source order */ body .fi-core-pages-v1 .fi-contact-page .fi-contact-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; } body .fi-core-pages-v1 .fi-contact-page .fi-contact-layout > .fi-form-assurance, body .fi-core-pages-v1 .fi-contact-page .fi-contact-layout > .fi-contact-sidebar, body .fi-core-pages-v1 .fi-contact-page .fi-contact-layout > .fi-form-card { grid-column: 1 !important; grid-row: auto !important; position: static !important; } } /* 8. The article intent panel was a black slab. FI's articles are warm paper, clay, brass and oxide, and the panel sat outside that language entirely. The commercial variant now uses clay with ink text and the same oxide button the editorial variant already uses, so the two read as one family. Measured on clay #ead4ca: title 11.97:1, lede 7.12:1, kicker and links 6.24:1, button 8.73:1. */ .cta-card.fi-intent-cta--commercial { border: 1px solid #d9c3b8 !important; border-top: 3px solid #c99550 !important; background: #ead4ca !important; background-image: none !important; color: #231b15 !important; } .cta-card.fi-intent-cta--commercial .fi-intent-cta__label { color: #713b2d !important; } .cta-card.fi-intent-cta--commercial .fi-intent-cta__title { color: #231b15 !important; } .cta-card.fi-intent-cta--commercial > p:not([class]), .cta-card.fi-intent-cta--commercial .fi-intent-cta__proof { color: #4a4139 !important; } .cta-card.fi-intent-cta--commercial .fi-intent-cta__secondary, .cta-card.fi-intent-cta--commercial .fi-intent-cta__proof a { color: #713b2d !important; } .cta-card.fi-intent-cta--commercial .fi-intent-cta__secondary:hover, .cta-card.fi-intent-cta--commercial .fi-intent-cta__proof a:hover { color: #231b15 !important; } /* one primary button language across both variants */ .fi-intent-cta .btn.btn--primary, .cta-card.fi-intent-cta--commercial .btn.btn--primary { border-color: #713b2d !important; background: #713b2d !important; color: #fffdf8 !important; } .fi-intent-cta .btn.btn--primary:hover, .fi-intent-cta .btn.btn--primary:focus-visible, .cta-card.fi-intent-cta--commercial .btn.btn--primary:hover, .cta-card.fi-intent-cta--commercial .btn.btn--primary:focus-visible { border-color: #231b15 !important; background: #231b15 !important; color: #fffdf8 !important; } .fi-intent-cta .btn.btn--primary:focus-visible, .cta-card.fi-intent-cta--commercial .btn.btn--primary:focus-visible { outline: 3px solid #231b15; outline-offset: 3px; } .cta-card.fi-intent-cta--commercial .fi-intent-cta__secondary:focus-visible, .cta-card.fi-intent-cta--commercial .fi-intent-cta__proof a:focus-visible { outline: 3px solid #231b15; outline-offset: 2px; } /* The actions row wrapped mid-line, so the button and the first link shared a row and the second link fell below on its own. Give the button its own row and let the two secondary links sit together beneath it. */ .fi-intent-cta .fi-intent-cta__actions { display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px 24px !important; } .fi-intent-cta .fi-intent-cta__actions .btn.btn--primary { flex: 0 0 100%; max-width: max-content; } /* 9. Table-of-contents jumps were instant instead of gliding. `html { scroll-behavior: smooth }` is already set site-wide and computes as smooth, but snippet 171's jumpToHeading() sets `root.style.scrollBehavior = 'auto'` inline for the duration of the jump, and its `window.scrollTo({ behavior: 'auto' })` then defers to that. `behavior: 'auto'` means "use the CSS value", not "instant", so beating the inline declaration is enough - an author !important rule outranks a non-important inline style. Verified in the live page: with the inline 'auto' set, the computed value becomes 'smooth' once this rule exists. Done in CSS on purpose. Intercepting the click instead would have had to stopImmediatePropagation on 171's handler, which also sets the scroll-spy lock, updates aria-current on the active link and closes the mobile ToC panel. None of that is disturbed this way. */ html { scroll-behavior: smooth !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } } /* inline:fi-accepted-contentpage */ /* ========================================================================== FI - accepted stylesheet bundle: content-page Generated 3 September 2026. Do not hand-edit; regenerate. Copied VERBATIM, in the approved link order of 11-about. The order is load-bearing: `palette-locked` must follow `colour-lab`, and `home-revision` must follow both. Sharing one bundle across families with different palette locks silently applies the wrong recipe. Sources: styles.css 51451 B d2237708f3febf7b79cb5766aec637da colour-lab.css 34022 B 3c85801f6c8f9f966139551e1159fbcc palette-locked.css 1398 B 7ec96cf0188760efd9467de0e3d86125 home-revision-2026-08-30.css 40061 B 28ba22130fb1cd39228ba71b2fde61ed content-page-2026-08-30.css 40010 B f56df52f335555b4fd6b51417758106c No value is retuned and no rule is added. ======================================================================= */ /* ---- styles.css ------------------------------------------------ */ /* font-face omitted from distributable package */ /* font-face omitted from distributable package */ /* font-face omitted from distributable package */ :root { --carbon: #15120f; --carbon-soft: #211b16; --ink: #18130f; --ink-soft: #554b42; --paper: #f5f1e8; --paper-high: #fbf8f1; --mineral: #e4dfd4; --mineral-deep: #cbc5b8; --steel-pale: #dce4e6; --steel: #6f858c; --steel-deep: #314951; --brass: #d8a55f; --brass-light: #f0be75; --brass-wash: #efdfc3; --oxide: #9b563e; --oxide-deep: #75402f; --oxide-wash: #ead4ca; --line: rgba(24, 19, 15, 0.22); --light-line: rgba(245, 241, 232, 0.22); --shell: 1320px; --reading: 1180px; --gutter: clamp(20px, 4.7vw, 72px); --section: clamp(72px, 8vw, 118px); --fi-masthead-height: 88px; --serif: "Fraunces", Georgia, serif; --sans: "DM Sans", Arial, sans-serif; --mono: "IBM Plex Mono", Consolas, monospace; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.62; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } button, input { font: inherit; } :focus-visible { outline: 3px solid var(--brass-light); outline-offset: 4px; } h1, h2, h3, p, figure, dl, dd { margin-top: 0; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } .shell { width: min(calc(100% - (var(--gutter) * 2)), var(--shell)); margin-inline: auto; } .shell--reading { max-width: var(--reading); } .section-pad { padding-block: var(--section); } .skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; transform: translateY(-160%); padding: 10px 14px; background: var(--paper); color: var(--ink); font-weight: 700; } .skip-link:focus { transform: translateY(0); } /* 2026-09-07: the skip link declares no hover colour, so the global a:hover brass landed on it at 2.91:1. Its own paper-on-ink pairing is 16.36:1. */ .skip-link:hover { color: var(--paper); } .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--oxide-deep); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.11em; line-height: 1.35; text-transform: uppercase; } .eyebrow span { width: 42px; height: 2px; background: currentColor; } .eyebrow--light { color: var(--brass-light); } .button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 13px 20px; border: 1px solid currentColor; font-size: 14px; font-weight: 750; line-height: 1.25; text-align: center; text-decoration: none; transition: background 180ms ease, color 180ms ease, transform 180ms ease; } .button:hover { transform: translateY(-2px); } .button--brass { border-color: var(--brass-light); background: var(--brass-light); color: var(--ink); } .button--brass:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); } .button--ink { border-color: var(--ink); background: var(--ink); color: var(--paper); } .button--ink:hover { background: var(--steel-deep); border-color: var(--steel-deep); color: var(--paper); } .button--paper { border-color: var(--paper); background: var(--paper); color: var(--ink); } .button--paper:hover { background: var(--brass-light); border-color: var(--brass-light); color: var(--ink); } .text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.035em; text-decoration: none; } .text-link span { transition: transform 180ms ease; } .text-link:hover span { transform: translateX(5px); } .text-link--paper { color: var(--paper); } .masthead { --nav-surface: var(--oxide-wash); --nav-ink: var(--ink); --nav-muted: var(--ink-soft); --nav-accent: var(--oxide); --nav-panel: var(--paper-high); --nav-cta-bg: var(--oxide-deep); --nav-cta-text: var(--paper-high); --nav-stripe-oxide: var(--oxide-deep); --nav-stripe-brass: var(--brass); --nav-stripe-steel: var(--steel-deep); position: sticky; z-index: 100; top: 0; min-height: var(--fi-masthead-height); border: 0; background: var(--nav-surface); color: var(--nav-ink); box-shadow: 0 12px 30px rgba(35, 27, 21, 0.09); isolation: isolate; } .masthead::before, .masthead::after { position: absolute; z-index: 2; right: 0; left: 0; content: ""; pointer-events: none; } .masthead::before { top: 0; height: 4px; background: linear-gradient(90deg, var(--nav-stripe-oxide) 0 31%, var(--nav-stripe-brass) 31% 68%, var(--nav-stripe-steel) 68% 100%); } .masthead::after { bottom: 0; height: 3px; background: linear-gradient(to bottom, color-mix(in srgb, var(--nav-accent) 70%, transparent) 0 1px, transparent 1px 2px, color-mix(in srgb, var(--nav-stripe-brass) 72%, transparent) 2px 3px); } .masthead__inner { position: relative; display: flex; min-height: var(--fi-masthead-height); align-items: center; gap: 24px; padding-top: 4px; } /* 2026-09-07: a legacy `.masthead a { font-family: "DM Sans" }` rule at (0,1,1) outranks `.brand` at (0,1,0), so the wordmark rendered in the sans fallback for logged-out visitors. Logged-in views bypass the optimiser and showed the serif, which is why it looked correct in the editor. (0,2,1) restores Fraunces without touching any other masthead link. */ .masthead a.brand { font-family: var(--serif); } .brand { position: relative; display: inline-flex; min-height: 58px; flex: 0 0 auto; align-items: center; gap: 13px; margin-right: 2px; padding-right: 26px; color: var(--nav-ink); font-family: var(--serif); font-size: 25px; font-variation-settings: "opsz" 48, "SOFT" 35; font-weight: 610; letter-spacing: -0.025em; line-height: 0.84; text-decoration: none; } .brand::after { position: absolute; top: 8px; right: 0; bottom: 8px; width: 1px; background: color-mix(in srgb, var(--nav-ink) 19%, transparent); content: ""; } .brand img { width: 56px; height: 56px; filter: drop-shadow(0 2px 0 rgba(255,255,255,0.34)); } .site-menu { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 22px; } .primary-nav { display: flex; min-width: 0; align-items: center; gap: clamp(15px, 1.45vw, 23px); } .primary-nav > a, .nav-group > summary { position: relative; display: inline-flex; min-height: 44px; align-items: center; color: var(--nav-ink); cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1.2; list-style: none; text-decoration: none; white-space: nowrap; } .primary-nav > a::before, .nav-group > summary::before { position: absolute; right: 0; bottom: 3px; left: 0; height: 2px; transform: scaleX(0); transform-origin: left center; background: var(--nav-accent); content: ""; transition: transform 160ms ease; } .primary-nav > a:hover::before, .primary-nav > a:focus-visible::before, .nav-group > summary:hover::before, .nav-group > summary:focus-visible::before, .nav-group[open] > summary::before, .nav-group--current > summary::before { transform: scaleX(1); } .nav-group { position: relative; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-group > summary::marker { content: ""; } .nav-group > summary::after { margin-left: 6px; color: var(--nav-accent); content: "+"; font-family: var(--mono); font-size: 12px; font-weight: 700; } .nav-group[open] > summary::after { content: "−"; } .primary-nav > a:hover, .nav-group > summary:hover, .nav-group[open] > summary { color: var(--nav-ink); } .nav-group__panel { position: absolute; z-index: 4; top: calc(100% + 18px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--nav-ink) 25%, transparent); border-top: 4px solid var(--nav-accent); background: var(--nav-panel); color: var(--nav-ink); box-shadow: 0 24px 56px rgba(35, 27, 21, 0.22); } .nav-panel__kicker, .nav-services__header p { margin: 0; color: var(--nav-cta-bg); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.35; text-transform: uppercase; } .nav-group__panel--library { left: -18px; display: grid; width: min(370px, calc(100vw - 40px)); grid-template-columns: minmax(0, 1fr); transition: width 180ms ease; } .nav-group--library.is-blog-open .nav-group__panel--library { width: min(960px, calc(100vw - 40px)); grid-template-columns: 360px minmax(0, 1fr); } .nav-library__rail { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 22px; background: var(--nav-panel); } .nav-library__blog { display: grid; grid-template-columns: minmax(0, 1fr) 42px; } .nav-library__blog-trigger, .nav-library__row, .nav-library__launch { min-height: 62px; border: 0; color: var(--nav-ink); font-family: var(--sans); text-decoration: none; } .nav-library__blog-trigger, .nav-library__row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; background: transparent; cursor: pointer; text-align: left; transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease; } .nav-library__launch { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--nav-accent) 9%, var(--nav-panel)); color: var(--nav-cta-bg); font-size: 14px; } .nav-library__row strong, .nav-library__row small, .nav-library__blog-trigger strong, .nav-library__blog-trigger small { display: block; } .nav-library__row strong, .nav-library__blog-trigger strong { font-size: 15.5px; font-weight: 720; line-height: 1.24; } .nav-library__row small, .nav-library__blog-trigger small { margin-top: 3px; color: var(--nav-muted); font-size: 13px; line-height: 1.4; } .nav-library__row > span:last-child, .nav-library__blog-trigger > span:last-child { flex: 0 0 auto; color: var(--nav-cta-bg); font-family: var(--mono); font-size: 17px; } .nav-library__blog:hover .nav-library__blog-trigger, .nav-library__blog:focus-within .nav-library__blog-trigger, .nav-group--library.is-blog-open .nav-library__blog-trigger { background: #efe0c5; box-shadow: inset 3px 0 0 var(--nav-stripe-brass); transform: translateX(2px); } .nav-library__blog:hover .nav-library__launch, .nav-library__blog:focus-within .nav-library__launch { background: var(--nav-stripe-brass); color: var(--ink); } .nav-library__row:hover, .nav-library__row:focus-visible { transform: translateX(2px); } .nav-library__row--brass:hover, .nav-library__row--brass:focus-visible { background: #efe0c5; box-shadow: inset 3px 0 0 #c99550; } .nav-library__row--steel:hover, .nav-library__row--steel:focus-visible { background: #dbe5e7; box-shadow: inset 3px 0 0 #355762; } .nav-library__row--clay:hover, .nav-library__row--clay:focus-visible { background: #ead3ca; box-shadow: inset 3px 0 0 #98533d; } .nav-library__row--sage:hover, .nav-library__row--sage:focus-visible { background: #d9e0da; box-shadow: inset 3px 0 0 #4f624a; } .nav-library__topics { display: none; min-width: 0; flex-direction: column; padding: 22px 24px; border-left: 1px solid color-mix(in srgb, var(--nav-ink) 14%, transparent); background: #f3eee4; } .nav-group--library.is-blog-open .nav-library__topics { display: flex; } .nav-library__topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; } .nav-library__topic { display: flex; min-height: 76px; align-items: flex-start; padding: 12px 13px 11px 15px; border: 1px solid color-mix(in srgb, var(--topic-tone) 34%, transparent); border-left: 4px solid var(--topic-tone); background: #fbf8f1; color: var(--nav-ink); text-decoration: none; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; } .nav-library__topic strong, .nav-library__topic small { display: block; } .nav-library__topic strong { font-size: 14px; font-weight: 720; line-height: 1.3; } .nav-library__topic small { margin-top: 4px; color: var(--nav-muted); font-size: 12.5px; line-height: 1.4; } .nav-library__topic:hover, .nav-library__topic:focus-visible { border-color: var(--topic-tone); box-shadow: 3px 3px 0 color-mix(in srgb, var(--topic-tone) 18%, transparent); transform: translate(-1px, -1px); } .nav-library__all { display: flex; min-height: 44px; align-items: center; justify-content: space-between; margin-top: auto; padding: 10px 12px; background: var(--nav-cta-bg); color: var(--nav-cta-text); font: 700 11.5px/1.35 var(--mono); letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; } .no-js .nav-group--library .nav-group__panel--library { width: min(830px, calc(100vw - 40px)); grid-template-columns: 304px minmax(0, 1fr); } .no-js .nav-library__topics { display: flex; } .nav-group__panel--services { left: 50%; display: block; width: min(780px, calc(100vw - 40px)); padding: 20px; transform: translateX(-62%); } .nav-services__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 2px 2px 15px; } .nav-services__header p { margin-bottom: 6px; } .nav-services__header strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 580; letter-spacing: -0.02em; line-height: 1.08; } /* 2026-09-07: this panel link sets no hover colour, so the global a:hover brass landed on it at 1.4:1. Its hover surface is --ink, so it holds its own --nav-cta-text. */ .nav-services__header > a:hover { color: var(--nav-cta-text); } .nav-services__header > a { flex: 0 0 auto; color: var(--nav-cta-bg); font: 700 11.5px/1.35 var(--mono); text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase; } .nav-services__list { display: grid; border-top: 1px solid color-mix(in srgb, var(--nav-ink) 20%, transparent); } .nav-service-row { --service-tone: #49372b; display: grid; min-height: 64px; grid-template-columns: 32px 205px minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--nav-ink) 15%, transparent); border-left: 4px solid var(--service-tone); background: color-mix(in srgb, var(--service-tone) 11%, var(--nav-panel)); color: var(--nav-ink); text-decoration: none; transition: background 150ms ease, transform 150ms ease; } .nav-service-row--steel { --service-tone: #355762; } .nav-service-row--brass { --service-tone: #c99550; } .nav-service-row--clay { --service-tone: #98533d; } .nav-service-row--sage { --service-tone: #4f624a; } .nav-service-row--umber { --service-tone: #49372b; } .nav-service-row b { color: var(--service-tone); font: 700 11px/1 var(--mono); } .nav-service-row strong { font-size: 15px; line-height: 1.25; } .nav-service-row small { color: var(--nav-muted); font-size: 13px; line-height: 1.35; } .nav-service-row > span:last-child { color: var(--service-tone); font-size: 12px; } .nav-service-row:hover, .nav-service-row:focus-visible { background: color-mix(in srgb, var(--service-tone) 20%, var(--nav-panel)); transform: translateX(2px); } .nav-services__investigation { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 20px; margin-top: 12px; padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--nav-stripe-brass) 60%, var(--nav-ink)); background: #efe0c5; color: var(--nav-ink); text-decoration: none; } .nav-services__investigation b, .nav-services__investigation small { display: block; } .nav-services__investigation b { font-size: 14px; line-height: 1.25; } .nav-services__investigation small { margin-top: 2px; color: var(--nav-muted); font-size: 9.5px; line-height: 1.3; } .nav-services__investigation > strong { color: var(--nav-cta-bg); font: 700 11.5px/1.35 var(--mono); text-transform: uppercase; } .nav-services__investigation:hover, .nav-services__investigation:focus-visible { border-color: var(--nav-cta-bg); box-shadow: 3px 3px 0 color-mix(in srgb, var(--nav-accent) 22%, transparent); } .masthead__utilities { display: flex; flex: 0 0 auto; align-items: center; gap: 15px; } .language-nav { display: flex; align-items: center; border: 1px solid color-mix(in srgb, var(--nav-ink) 22%, transparent); background: color-mix(in srgb, var(--nav-panel) 52%, transparent); } .language-nav a { display: inline-flex; min-width: 32px; min-height: 34px; align-items: center; justify-content: center; color: var(--nav-muted); font-family: var(--mono); font-size: 11.5px; font-weight: 700; line-height: 1; text-decoration: none; } .language-nav a + a { border-left: 1px solid color-mix(in srgb, var(--nav-ink) 16%, transparent); } .language-nav a:hover { color: var(--nav-ink); } .language-nav a[aria-current] { background: var(--nav-cta-bg); color: var(--nav-cta-text); } /* 2026-09-07: the CTA sets no hover colour, so the global a:hover brass landed on its clay surface at 1.4:1. Holding its own --nav-cta-text through hover gives 8.73:1. */ .masthead__cta:hover { color: var(--nav-cta-text); } .masthead__cta { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 11px 15px; border: 1px solid var(--nav-cta-bg); background: var(--nav-cta-bg); color: var(--nav-cta-text); box-shadow: 4px 4px 0 color-mix(in srgb, var(--nav-accent) 30%, transparent); font-size: 13px; font-weight: 780; line-height: 1.15; text-align: center; text-decoration: none; white-space: nowrap; transition: box-shadow 160ms ease, transform 160ms ease; } .masthead__cta::after { color: var(--nav-stripe-brass); content: "→"; font-family: var(--mono); font-size: 13px; } .masthead__cta:hover { box-shadow: 6px 6px 0 color-mix(in srgb, var(--nav-accent) 34%, transparent); transform: translate(-2px, -2px); } .menu-toggle { display: none; } .masthead :focus-visible { outline: 3px solid var(--nav-cta-bg); outline-offset: 3px; } .hero { position: relative; min-height: min(790px, calc(100svh - var(--fi-masthead-height))); overflow: hidden; background: var(--carbon); color: var(--paper); isolation: isolate; } .hero__media { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; } .hero__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(15, 13, 11, 0.96) 0%, rgba(15, 13, 11, 0.82) 39%, rgba(15, 13, 11, 0.25) 70%, rgba(15, 13, 11, 0.5) 100%), linear-gradient(0deg, rgba(15, 13, 11, 0.92) 0%, transparent 42%); } .hero__grid { display: flex; min-height: 670px; align-items: center; padding-block: 72px 58px; } .hero__copy { max-width: 790px; } .hero h1 { max-width: 760px; margin-bottom: 27px; font-family: var(--serif); font-size: clamp(56px, 6vw, 88px); font-variation-settings: "opsz" 80, "SOFT" 50; font-weight: 510; letter-spacing: -0.042em; line-height: 0.97; } .hero__lede { max-width: 700px; margin-bottom: 33px; color: #d7cec1; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; } .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; } .hero-note { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 18px; width: min(100%, 760px); min-height: 86px; margin-top: 32px; padding: 17px 19px; border: 1px solid rgba(240, 190, 117, 0.34); border-left: 4px solid var(--oxide); background: linear-gradient(105deg, rgba(21, 18, 15, 0.94), rgba(49, 73, 81, 0.78)); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.27); color: var(--paper); text-decoration: none; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; } .hero-note:hover { transform: translateY(-2px); border-color: var(--brass-light); background: linear-gradient(105deg, rgba(21, 18, 15, 0.98), rgba(49, 73, 81, 0.92)); } .hero-note__label { color: var(--brass-light); font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; line-height: 1.35; text-transform: uppercase; } .hero-note__copy { display: grid; min-width: 0; gap: 3px; } .hero-note__copy strong { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 24px); font-weight: 540; letter-spacing: -0.02em; line-height: 1.1; } .hero-note__copy > span { color: #cfc6ba; font-size: 13.5px; line-height: 1.4; } .hero-note__action { display: inline-flex; align-items: center; gap: 9px; color: var(--brass-light); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .hero-note__action i { font-size: 16px; font-style: normal; transition: transform 180ms ease; } .hero-note:hover .hero-note__action i { transform: translateX(4px); } .desks { background: linear-gradient(90deg, rgba(49, 73, 81, 0.04) 1px, transparent 1px) 0 0 / 80px 80px, var(--paper); } .section-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.8fr); gap: clamp(42px, 8vw, 112px); align-items: end; margin-bottom: 55px; } .section-intro h2, .section-heading h2, .split-feature h2, .investigation-bridge h2 { margin-bottom: 0; font-family: var(--serif); font-size: clamp(43px, 4.5vw, 67px); font-weight: 520; letter-spacing: -0.035em; line-height: 1.01; } .section-intro__body p { margin-bottom: 25px; color: var(--ink-soft); font-size: 18px; } .desk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-left: 0; list-style: none; } .desk { min-width: 0; min-height: 360px; } .desk > a { position: relative; display: flex; height: 100%; flex-direction: column; padding: clamp(28px, 3vw, 40px); border: 1px solid rgba(49, 73, 81, 0.2); border-top: 4px solid var(--steel-deep); overflow: hidden; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; } .desk > a::after { content: ""; position: absolute; right: -55px; bottom: -55px; width: 145px; height: 145px; border: 1px solid currentColor; border-radius: 50%; opacity: 0.12; } .desk > a:hover { z-index: 2; transform: translateY(-6px); box-shadow: 0 20px 50px rgba(24, 19, 15, 0.18); } .desk--steel > a { background: var(--steel-pale); } .desk--brass > a { background: var(--brass-wash); } .desk--paper > a { background: var(--paper-high); } .desk--oxide > a { background: var(--oxide-wash); } .desk--mineral > a { background: #d9ddd6; } .desk--deep-steel > a { background: var(--steel-deep); color: var(--paper); } .desk__number { margin-bottom: 34px; color: var(--oxide-deep); font-family: var(--mono); font-size: 12px; font-weight: 600; } .desk--deep-steel .desk__number { color: var(--brass-light); } .desk h3 { margin-bottom: 18px; font-family: var(--serif); font-size: clamp(30px, 2.5vw, 39px); font-weight: 520; letter-spacing: -0.025em; line-height: 1.02; } .desk p { margin-bottom: 26px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; } .desk--deep-steel p { color: #d5ddd9; } .desk__action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 15px; border-top: 1px solid currentColor; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .desk__action i { font-size: 18px; font-style: normal; } .evidence-search { padding-block: clamp(42px, 5vw, 64px); border-block: 1px solid rgba(240, 190, 117, 0.32); background: var(--steel-deep); color: var(--paper); } .evidence-search__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr); gap: clamp(36px, 6vw, 84px); align-items: end; } .evidence-search h2 { margin-bottom: 12px; font-family: var(--serif); font-size: clamp(36px, 3.5vw, 52px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.02; } .evidence-search__copy > p:not(.eyebrow) { max-width: 48ch; margin-bottom: 0; color: #d5e0e2; font-size: 15px; } .library-search label { display: block; margin-bottom: 10px; color: var(--brass-light); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .library-search__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .library-search input { min-width: 0; min-height: 54px; padding: 0 16px; border: 1px solid rgba(240, 190, 117, 0.48); border-right: 0; border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; } .library-search input::placeholder { color: #746b60; opacity: 1; } .library-search button { min-height: 54px; padding: 0 22px; border: 1px solid var(--brass-light); border-radius: 0; background: var(--brass-light); color: var(--ink); cursor: pointer; font: inherit; font-weight: 750; } .library-search button:hover { border-color: var(--paper); background: var(--paper); } .latest { background: var(--mineral); } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 48px; } .latest-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, 0.72fr); gap: clamp(28px, 4vw, 55px); align-items: stretch; } .lead-story { display: flex; min-width: 0; flex-direction: column; border: 1px solid rgba(49, 73, 81, 0.2); background: var(--paper-high); color: var(--ink); } .lead-story__image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .lead-story__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .lead-story__image:hover img { transform: scale(1.025); } .lead-story__image > span { position: absolute; top: 18px; left: 18px; padding: 8px 10px; background: var(--brass-light); color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } .lead-story__body { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 48px); border-top: 5px solid var(--oxide); } .story-meta { color: #8d8172; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .lead-story .story-meta { color: var(--oxide-deep); } .story-meta span { display: inline-block; width: 18px; height: 1px; margin: 0 8px 3px; background: currentColor; } .lead-story h3 { margin-bottom: 22px; font-family: var(--serif); font-size: clamp(31px, 3vw, 46px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.02; } .lead-story h3 a, .story-list h3 a { text-decoration: none; } .lead-story__body > p:not(.story-meta) { margin-bottom: 26px; color: var(--ink-soft); font-size: 15px; } .lead-story .text-link--paper { color: var(--steel-deep); } .story-list { display: grid; padding-inline: clamp(24px, 3vw, 38px); background: var(--steel-deep); color: var(--paper); } .story-list article { position: relative; display: grid; min-width: 0; align-content: center; padding: 30px 50px 30px 0; border-bottom: 1px solid rgba(240, 190, 117, 0.35); } .story-list article:last-child { border-bottom: 0; } .story-list__index { margin-bottom: 12px; color: var(--brass-light); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .story-list h3 { margin-bottom: 14px; font-family: var(--serif); font-size: clamp(24px, 2vw, 31px); font-weight: 530; letter-spacing: -0.024em; line-height: 1.08; overflow-wrap: normal; word-break: normal; } .story-list h3 a:hover { color: var(--brass-light); } .story-list .story-meta { margin-bottom: 0; color: #c5d0d2; } .story-list__arrow { position: absolute; right: 4px; bottom: 30px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(240, 190, 117, 0.48); color: var(--brass-light); text-decoration: none; } .story-list__arrow:hover { background: var(--brass-light); color: var(--ink); } .library-routes { display: grid; grid-template-columns: minmax(132px, 0.68fr) repeat(5, minmax(0, 1fr)); margin-top: 24px; border: 1px solid rgba(49, 73, 81, 0.28); border-top: 4px solid var(--brass); background: var(--paper-high); } .library-routes__label, .library-routes a { min-width: 0; padding: 18px 20px; } .library-routes__label { display: flex; align-items: center; color: var(--oxide-deep); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .library-routes a { display: grid; gap: 2px; border-left: 1px solid var(--line); text-decoration: none; } .library-routes b { font-family: var(--serif); font-size: 18.5px; font-weight: 580; line-height: 1.15; } .library-routes small { color: var(--ink-soft); font-size: 13px; line-height: 1.35; } .library-routes a:hover { background: var(--steel-deep); color: var(--paper); } .library-routes a:hover small { color: var(--steel-pale); } .buyer-guides { background: var(--steel-pale); } .split-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr); align-items: start; gap: clamp(45px, 7vw, 100px); } .split-feature__media { position: relative; margin: 0; box-shadow: 24px 24px 0 rgba(49, 73, 81, 0.13); } .split-feature__media::before { content: ""; position: absolute; z-index: 1; inset: 16px; border: 1px solid rgba(245, 241, 232, 0.48); pointer-events: none; } .split-feature__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .split-feature__media figcaption { position: absolute; z-index: 2; right: 0; bottom: 0; padding: 10px 13px; background: var(--carbon); color: var(--brass-light); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .split-feature__copy > p:not(.eyebrow) { margin: 27px 0 25px; color: var(--ink-soft); font-size: 18px; } .guide-links { margin-bottom: 30px; border-top: 1px solid var(--line); } .guide-links a { position: relative; display: grid; gap: 5px; padding: 19px 36px 19px 0; border-bottom: 1px solid var(--line); text-decoration: none; } .guide-links span { color: var(--oxide-deep); font-family: var(--mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; } .guide-links b { font-family: var(--serif); font-size: 20px; font-weight: 580; line-height: 1.18; } .guide-links i { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); color: var(--oxide-deep); font-style: normal; } .guide-links a:hover b { color: var(--oxide-deep); } .conversations { padding-block: clamp(72px, 6vw, 92px); background: var(--oxide); color: var(--paper); } .split-feature--reverse { grid-template-columns: minmax(330px, 0.8fr) minmax(0, 1.2fr); } .split-feature--reverse .split-feature__media { grid-column: 2; grid-row: 1; box-shadow: 24px 24px 0 rgba(57, 27, 19, 0.28); } .split-feature--reverse .split-feature__copy { grid-column: 1; grid-row: 1; } .conversations .split-feature { grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(48px, 6vw, 82px); } .conversations h2 { font-size: clamp(43px, 4vw, 60px); } .conversations .split-feature__copy > p:not(.eyebrow) { color: #f0ded6; } .conversation-points { display: grid; gap: 7px; margin: -4px 0 26px; padding: 0; list-style: none; } .conversation-points li { display: flex; align-items: center; gap: 10px; color: var(--paper); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.055em; line-height: 1.4; text-transform: uppercase; } .conversation-points li::before { content: ""; width: 18px; height: 2px; flex: 0 0 auto; background: var(--brass-light); } .field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-panel { position: relative; display: grid; min-height: 600px; align-items: end; overflow: hidden; isolation: isolate; } .field-panel > img { position: absolute; z-index: -3; inset: 0; width: 100%; height: 54%; object-fit: cover; } .field-panel__copy { align-self: end; padding: clamp(44px, 6vw, 88px); } .field-panel h2 { margin-bottom: 24px; font-family: var(--serif); font-size: clamp(40px, 4.1vw, 64px); font-weight: 520; letter-spacing: -0.035em; line-height: 1.01; } .field-panel p:not(.eyebrow) { max-width: 560px; margin-bottom: 27px; font-size: 17px; } .field-panel--dark { background: var(--carbon); color: var(--paper); } .field-panel--dark > img { height: 100%; } .field-panel--dark .field-panel__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(0deg, rgba(21, 18, 15, 0.98) 4%, rgba(21, 18, 15, 0.82) 43%, rgba(21, 18, 15, 0.08) 100%); } .field-panel--dark p:not(.eyebrow) { color: #d4cbbf; } .field-panel--steel { background: var(--steel-deep); color: var(--paper); } .field-panel--steel > img { height: 100%; } .field-panel--steel .field-panel__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(0deg, rgba(49, 73, 81, 0.99) 5%, rgba(49, 73, 81, 0.84) 45%, rgba(49, 73, 81, 0.1) 100%); } .field-panel--steel p:not(.eyebrow) { color: #d5e0e2; } .field-panel--steel .text-link { color: var(--brass-light); } .field-panel__actions { display: flex; flex-wrap: wrap; gap: 14px 24px; } /* Homepage implementation-services bridge: one scoped owner, added after the accepted editorial journey. */ .implementation-services { background: linear-gradient(90deg, color-mix(in srgb, var(--steel-deep) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px, var(--paper-high); } .services-showcase { display: grid; grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; } .services-showcase__intro { display: flex; min-height: 540px; flex-direction: column; align-items: flex-start; padding: clamp(38px, 4.5vw, 62px); border-top: 6px solid var(--brass); background: var(--steel-deep); color: var(--paper); box-shadow: 18px 18px 0 var(--oxide-wash); } .services-showcase__intro h2 { max-width: 12ch; margin-bottom: 24px; font-family: var(--serif); font-size: clamp(42px, 4.2vw, 60px); font-weight: 540; letter-spacing: -0.04em; line-height: 1.02; } .services-showcase__intro > p:not(.eyebrow):not(.services-showcase__next) { max-width: 46ch; margin-bottom: 30px; color: #dce7e8; font-size: 18px; line-height: 1.62; } .services-showcase__next { max-width: 42ch; margin: auto 0 0; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.24); color: #cfdbdd; font-size: 14px; line-height: 1.55; } .service-directory { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .service-directory__item { --service-surface: var(--mineral); --service-tone: var(--steel-deep); min-width: 0; } .service-directory__item--steel { --service-surface: var(--steel-pale); --service-tone: var(--steel-deep); } .service-directory__item--brass { --service-surface: var(--brass-wash); --service-tone: #9c682d; } .service-directory__item--clay { --service-surface: var(--oxide-wash); --service-tone: var(--oxide); } .service-directory__item--sage { --service-surface: #d8e0d9; --service-tone: #4f624a; } .service-directory__item--umber { --service-surface: #e4ded6; --service-tone: #49372b; } .service-directory__item a { display: grid; min-height: 98px; grid-template-columns: 48px minmax(0, 1fr) 32px; align-items: center; gap: 18px; padding: 18px 24px; border: 1px solid color-mix(in srgb, var(--service-tone) 34%, transparent); border-left: 6px solid var(--service-tone); background: var(--service-surface); color: var(--ink); text-decoration: none; transition: box-shadow 170ms ease, transform 170ms ease; } .service-directory__item a:hover, .service-directory__item a:focus-visible { box-shadow: 8px 8px 0 color-mix(in srgb, var(--service-tone) 24%, transparent); transform: translate(-3px, -3px); } .service-directory__number { color: var(--service-tone); font: 600 12px/1 var(--mono); } .service-directory b, .service-directory small { display: block; } .service-directory b { font-family: var(--serif); font-size: 25px; font-weight: 570; letter-spacing: -0.025em; line-height: 1.08; } .service-directory small { margin-top: 7px; color: var(--ink-soft); font-size: 15px; line-height: 1.4; } .service-directory i { color: var(--service-tone); font-size: 20px; font-style: normal; transition: transform 170ms ease; } .service-directory__item a:hover i { transform: translate(4px, -4px); } @media (max-width: 900px) { .services-showcase { grid-template-columns: 1fr; } .services-showcase__intro { min-height: 0; } .services-showcase__next { margin-top: 34px; } } @media (max-width: 560px) { .services-showcase__intro { padding: 34px 24px; box-shadow: 10px 10px 0 var(--oxide-wash); } .service-directory__item a { min-height: 92px; grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 10px; padding: 16px; } .service-directory b { font-size: 22px; } .service-directory small { font-size: 14px; } } .investigation-bridge { padding-block: clamp(62px, 7vw, 92px); background: var(--brass); color: var(--ink); } .investigation-bridge__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.8fr); gap: clamp(50px, 8vw, 125px); align-items: center; } .investigation-bridge p:not(.eyebrow) { margin-bottom: 28px; font-size: 18px; } .investigation-bridge .eyebrow { color: var(--oxide-deep); } .footer { position: relative; isolation: isolate; overflow: hidden; margin-top: 72px; padding: 56px 0 28px; border-top: 1px solid rgba(216, 165, 95, 0.52); background: radial-gradient(circle at 12% 34%, rgba(216, 165, 95, 0.11), transparent 31%), linear-gradient(135deg, #17130f 0%, #1f1a14 58%, #17130f 100%); color: #cfc6b9; } .footer::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(216, 165, 95, 0.025) 80px 81px); } .footer__grid { display: grid; grid-template-columns: minmax(250px, 0.9fr) minmax(205px, 0.72fr) minmax(370px, 1.35fr) minmax(290px, 1.05fr); gap: 24px; align-items: start; } .footer__identity { position: relative; min-width: 0; padding-top: 218px; } .footer__identity::before { content: ""; position: absolute; top: 0; left: 0; width: 190px; height: 194px; background: url("/wp-content/uploads/fi-seal.svg") center / contain no-repeat; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.34)); opacity: 0.96; } .footer__brand { margin-bottom: 17px; color: var(--paper); font-family: var(--serif); font-size: 24px; font-weight: 560; } .footer__about { max-width: 30ch; margin-bottom: 20px; color: #cfc6b9; font-size: 14px; line-height: 1.58; } .footer ul { margin: 0; padding: 0; list-style: none; } .footer a { color: #e9e1d5; text-decoration-thickness: 1px; text-underline-offset: 4px; } .footer a:hover { color: #fff; } .footer a:focus-visible, .footer button:focus-visible, .footer input:focus-visible { outline: 3px solid #79c5ea; outline-offset: 3px; } .footer__utility { display: flex; flex-wrap: wrap; gap: 10px 14px; } .footer__utility li { margin: 0; } .footer__utility a { color: #79c5ea; font-size: 16px; line-height: 1.5; text-decoration: underline; text-decoration-thickness: 0.09em; text-underline-offset: 0.2em; } .footer__utility a:hover { color: #b9e4f8; } .footer__sections, .footer__library { min-width: 0; padding: 22px; border: 1px solid rgba(216, 165, 95, 0.28); border-top: 2px solid rgba(216, 165, 95, 0.62); background: linear-gradient(145deg, rgba(216, 165, 95, 0.06), rgba(255, 255, 255, 0.012)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); } .footer__heading { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid rgba(216, 165, 95, 0.28); color: var(--brass-light); font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.075em; line-height: 1.45; text-transform: uppercase; } .footer__sections li, .footer__nav-pair li { margin: 0; } .footer__sections li + li { border-top: 1px solid rgba(216, 165, 95, 0.12); } .footer__sections a, .footer__nav-pair a { display: flex; min-height: 40px; align-items: center; padding: 7px 0; color: var(--paper); font-size: 16px; font-weight: 500; line-height: 1.42; text-decoration: none; } .footer__sections a:hover, .footer__nav-pair a:hover { color: var(--brass); } .footer__nav-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .footer__nav-pair nav { min-width: 0; } .footer__industries { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; margin-top: 26px; padding: 20px; border: 1px solid rgba(216, 165, 95, 0.42); border-top: 2px solid var(--brass); background: linear-gradient(145deg, rgba(216, 165, 95, 0.095), rgba(255, 255, 255, 0.018)); } .footer__industries .footer__heading { margin-bottom: 7px; } .footer__industries p:not(.footer__heading) { max-width: 48ch; margin: 0; color: #cfc6b9; font-size: 14px; font-weight: 500; line-height: 1.55; } .footer__industries > a { display: inline-flex; min-height: 44px; align-items: center; color: #79c5ea; font-size: 16px; font-weight: 800; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .footer__news > .footer__heading { margin-bottom: 13px; } .news-form > label { display: block; margin-bottom: 12px; color: #cfc6b9; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.045em; line-height: 1.5; text-transform: uppercase; } .news-form__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .news-form input { min-width: 0; height: 48px; padding: 0 13px; border: 1px solid #756652; border-right: 0; border-radius: 0; background: #241e18; color: var(--paper); font-size: 14px; } .news-form button { height: 48px; padding: 0 18px; border: 1px solid var(--brass-light); border-radius: 0; background: #f5c56d; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750; letter-spacing: 0.035em; text-transform: uppercase; } .news-form button:hover { background: var(--paper); border-color: var(--paper); } .news-form__message { min-height: 21px; margin: 7px 0 0; color: var(--brass-light); font-size: 11px; } .footer__scene { overflow: hidden; margin: 26px 0 0; border: 1px solid rgba(216, 165, 95, 0.48); background: #0f0d0b; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28); } .footer__scene img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; } .footer__scene figcaption { margin: 0; padding: 10px 12px; border-top: 1px solid rgba(216, 165, 95, 0.34); background: #14110e; color: var(--brass); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; text-transform: uppercase; } .footer__copy { margin-top: 34px; padding-top: 21px; border-top: 1px solid rgba(216, 165, 95, 0.28); color: #988d7e; font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; text-align: left; } .footer__copy a { color: #c7bbaa; } @media (max-width: 1380px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } @media (max-width: 900px) { .footer__identity { padding-top: 184px; } .footer__identity::before { width: 158px; height: 162px; } } @media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; gap: 18px; } .footer__sections a, .footer__nav-pair a { min-height: 44px; } } @media (max-width: 560px) { .footer__nav-pair { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 1320px) { .masthead__inner { gap: 18px; } .brand { gap: 11px; padding-right: 18px; font-size: 22px; } .brand img { width: 50px; height: 50px; } .site-menu { gap: 16px; } .primary-nav { gap: 14px; } .primary-nav > a, .nav-group > summary { font-size: 14.5px; } .masthead__utilities { gap: 11px; } .masthead__cta { padding-inline: 12px; font-size: 12.5px; } } @media (max-width: 1180px) { :root { --fi-masthead-height: 78px; } .desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brand { min-height: 50px; padding-right: 0; font-size: 22px; } .brand::after { display: none; } .brand img { width: 48px; height: 48px; } .menu-toggle { display: inline-flex; min-width: 78px; min-height: 46px; align-items: center; justify-content: space-between; gap: 10px; margin-left: auto; padding: 8px 11px; border: 1px solid var(--nav-cta-bg); border-radius: 0; background: color-mix(in srgb, var(--nav-panel) 52%, transparent); color: var(--nav-ink); cursor: pointer; font-size: 10px; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; } .menu-toggle__bars { display: grid; gap: 5px; } .menu-toggle__bars i { display: block; width: 19px; height: 2px; background: var(--nav-cta-bg); transition: transform 180ms ease; } .menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { transform: translateY(3.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); } .js .site-menu { position: absolute; top: var(--fi-masthead-height); right: 0; left: 0; display: none; width: 100%; max-height: calc(100vh - var(--fi-masthead-height)); max-height: calc(100dvh - var(--fi-masthead-height)); align-items: stretch; justify-content: stretch; overflow-y: auto; overscroll-behavior: contain; padding: 20px var(--gutter) 28px; border-top: 1px solid color-mix(in srgb, var(--nav-accent) 46%, transparent); background: var(--nav-panel); box-shadow: 0 22px 44px rgba(35, 27, 21, 0.2); } .js .site-menu.is-open { display: grid; gap: 20px; } .primary-nav { display: grid; width: 100%; gap: 0; } .primary-nav > a, .nav-group > summary { display: flex; min-height: 50px; padding: 10px 2px; border-bottom: 1px solid color-mix(in srgb, var(--nav-ink) 17%, transparent); font-size: 16px; } .primary-nav > a::before, .nav-group > summary::before { bottom: -1px; width: 54px; right: auto; } .nav-group__panel, .nav-group__panel--library, .nav-group__panel--services { position: static; width: 100%; margin: 0; transform: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--nav-ink) 20%, transparent); box-shadow: none; } .nav-group__panel--library { display: grid; padding: 0; } .nav-library__rail { padding: 18px 0; } .nav-group--library.is-blog-open .nav-group__panel--library { width: 100%; grid-template-columns: minmax(270px, 0.78fr) minmax(0, 1.22fr); } .nav-group__panel--services { display: block; padding: 18px 0; } .masthead__utilities { width: 100%; justify-content: space-between; gap: 18px; } .language-nav a { min-width: 44px; min-height: 44px; } .masthead__cta { min-height: 48px; max-width: none; } .hero { min-height: auto; } .hero__grid { min-height: 700px; } .story-list { grid-template-columns: minmax(0, 1fr); } .story-list article { min-height: 0; } .no-js .masthead { position: relative; } .no-js .masthead__inner { flex-wrap: wrap; padding-bottom: 16px; } .no-js .menu-toggle { display: none; } .no-js .site-menu { position: static; display: grid; width: 100%; align-items: stretch; gap: 18px; } } @media (max-width: 900px) { :root { --section: 80px; } .hero__veil { background: linear-gradient(90deg, rgba(15, 13, 11, 0.94), rgba(15, 13, 11, 0.52)), linear-gradient(0deg, rgba(15, 13, 11, 0.94), transparent 50%); } .hero__grid { min-height: 700px; padding-top: 84px; } .hero__copy { max-width: 720px; } .hero-note { grid-template-columns: 132px minmax(0, 1fr); width: min(100%, 680px); } .hero-note__action { grid-column: 2; } .latest-grid { grid-template-columns: minmax(0, 1fr); } .library-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .library-routes__label { grid-column: 1 / -1; border-bottom: 1px solid var(--line); } .library-routes a:nth-of-type(odd) { border-left: 0; } .library-routes a:nth-of-type(n + 3) { border-top: 1px solid var(--line); } .section-intro, .investigation-bridge__grid, .evidence-search__grid { grid-template-columns: 1fr; gap: 32px; } .desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lead-story { grid-template-columns: 1fr; } .lead-story__body { border-top: 5px solid var(--oxide); } .split-feature, .split-feature--reverse { grid-template-columns: 1fr; gap: 55px; } .split-feature--reverse .split-feature__media, .split-feature--reverse .split-feature__copy { grid-column: 1; grid-row: auto; } .split-feature--reverse .split-feature__media { grid-row: 1; } .conversations { padding-block: 68px; } .conversations .split-feature { grid-template-columns: 1fr; gap: 48px; } .field-pair { grid-template-columns: 1fr; } .field-panel { min-height: 540px; } } @media (max-width: 650px) { :root { --gutter: 21px; --section: 65px; } body { font-size: 16px; } .hero__media { object-position: 86% 50%; } :root { --fi-masthead-height: 72px; } .brand { min-height: 46px; gap: 9px; font-size: 19px; } .brand img { width: 44px; height: 44px; } .menu-toggle { min-width: 48px; min-height: 46px; } .js .site-menu { padding: 15px var(--gutter) 24px; } .nav-group--library.is-blog-open .nav-group__panel--library { grid-template-columns: 1fr; } .nav-library__topics { padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--nav-ink) 16%, transparent); border-left: 0; } .nav-library__topic-grid { grid-template-columns: 1fr; } .nav-services__header { align-items: flex-start; } .nav-services__header > a { padding-top: 3px; } .nav-service-row { grid-template-columns: 26px minmax(0, 1fr) 14px; } .nav-service-row small { grid-column: 2; } .nav-services__investigation { align-items: flex-start; flex-direction: column; gap: 8px; } .masthead__utilities { display: grid; justify-items: stretch; } .masthead__cta { width: 100%; white-space: normal; } .hero__grid { min-height: 0; padding-top: 74px; padding-bottom: 52px; } .hero h1 { font-size: clamp(50px, 15vw, 68px); } .hero__lede { font-size: 17px; } .action-row { align-items: stretch; } .action-row .button { width: 100%; } .hero-note { grid-template-columns: 1fr; gap: 8px; min-height: 0; margin-top: 30px; padding: 18px; } .hero-note__action { grid-column: 1; margin-top: 4px; } .conversations { padding-block: 56px; } .conversations .split-feature { gap: 40px; } .conversations .split-feature__media { box-shadow: 12px 12px 0 rgba(57, 27, 19, 0.28); } .section-heading { align-items: start; flex-direction: column; } .desk-grid { grid-template-columns: 1fr; } .desk { min-height: 265px; } .desk > a { padding: 24px; } .desk__number { margin-bottom: 20px; } .desk h3 { margin-bottom: 13px; font-size: clamp(29px, 9vw, 35px); } .desk p { margin-bottom: 18px; } .lead-story__image { min-height: 285px; } .field-panel { min-height: 500px; } .field-panel__copy { padding: 38px 24px; } .footer { margin-top: 52px; padding-top: 48px; } .footer__nav-pair { gap: 20px; } .footer__industries { grid-template-columns: 1fr; } .footer__industries > a { white-space: normal; } .footer__copy { text-align: left; } } @media (max-width: 420px) { .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .menu-toggle { min-width: 44px; justify-content: center; } .library-search__row { grid-template-columns: 1fr; gap: 8px; } .library-routes { grid-template-columns: 1fr; } .library-routes__label, .library-routes a { grid-column: 1; border-left: 0; } .library-routes a:nth-of-type(n + 2) { border-top: 1px solid var(--line); } .library-search input { border-right: 1px solid rgba(240, 190, 117, 0.48); } .footer__nav-pair { grid-template-columns: 1fr; } .news-form__row { grid-template-columns: 1fr; gap: 8px; } .news-form input { border-right: 1px solid #756652; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ---- colour-lab.css -------------------------------------------- */ /* * Factory Investigator identity palette lab — prototype only. * One comparison owner for three deliberate directions. * The accepted footer is intentionally outside every selector in this file. */ .fi-identity-lab { --lab-ink: #231b15; --lab-ink-soft: #5e5247; --lab-paper: #f5f0e6; --lab-paper-high: #fffdf8; --lab-canvas: #e9e3d9; --lab-parchment: #e8d8bc; --lab-mineral: #d9d8d0; --lab-sage: #d2dbd4; --lab-steel-pale: #d8e3e5; --lab-steel: #6d858e; --lab-steel-deep: #355762; --lab-steel-night: #263e46; --lab-field-dark: #49372b; --lab-brass: #c99550; --lab-brass-light: #edbb72; --lab-brass-wash: #e8d8bc; --lab-oxide: #98533d; --lab-oxide-deep: #713b2d; --lab-oxide-wash: #e8cfc4; --lab-answer: #d8e3e5; --lab-important: #e8cfc4; --lab-tip: #e3e8dd; --lab-tip-deep: #4f624a; background: var(--lab-paper); color: var(--lab-ink); } .fi-identity-lab[data-fi-theme="sunlit"] { --lab-ink: #2a2018; --lab-ink-soft: #65574b; --lab-paper: #fbf7ee; --lab-paper-high: #fffdf8; --lab-canvas: #f0e7d8; --lab-parchment: #f1deb9; --lab-mineral: #e8ddcb; --lab-sage: #d9dfd2; --lab-steel-pale: #d7e4e4; --lab-steel: #5f7f82; --lab-steel-deep: #345e63; --lab-steel-night: #25464c; --lab-field-dark: #25464c; --lab-brass: #bd8743; --lab-brass-light: #e6b66c; --lab-brass-wash: #e3cba2; --lab-oxide: #8f4a38; --lab-oxide-deep: #6f362a; --lab-oxide-wash: #e9cec0; --lab-answer: #d7e4e4; --lab-important: #e9cec0; --lab-tip: #d9dfd2; --lab-tip-deep: #4d6047; } .fi-identity-lab[data-fi-theme="blueprint"] { --lab-ink: #17242a; --lab-ink-soft: #506169; --lab-paper: #f3f1ea; --lab-paper-high: #fffdf8; --lab-canvas: #e4e8e7; --lab-parchment: #eadcbc; --lab-mineral: #dce2e0; --lab-sage: #cad7d3; --lab-steel-pale: #d5e1e3; --lab-steel: #46666f; --lab-steel-deep: #2e5966; --lab-steel-night: #203d46; --lab-field-dark: #5e4037; --lab-brass: #d0a15c; --lab-brass-light: #f0c27c; --lab-brass-wash: #eadcbc; --lab-oxide: #914b39; --lab-oxide-deep: #71372b; --lab-oxide-wash: #e5ccc3; --lab-answer: #d5e1e3; --lab-important: #e5ccc3; --lab-tip: #cad7d3; --lab-tip-deep: #405e58; } /* Rebind the existing design system only inside the header and page content. The footer continues to inherit the accepted original tokens from :root. */ .fi-identity-lab .masthead, .fi-identity-lab main { --ink: var(--lab-ink); --ink-soft: var(--lab-ink-soft); --paper: var(--lab-paper); --paper-high: var(--lab-paper-high); --mineral: var(--lab-mineral); --steel-pale: var(--lab-steel-pale); --steel: var(--lab-steel); --steel-deep: var(--lab-steel-deep); --brass: var(--lab-brass); --brass-light: var(--lab-brass-light); --brass-wash: var(--lab-brass-wash); --oxide: var(--lab-oxide); --oxide-deep: var(--lab-oxide-deep); --oxide-wash: var(--lab-oxide-wash); --article-brass: var(--lab-brass); --article-brass-text: var(--lab-oxide-deep); } /* Masthead geometry and states have one owner in styles.css; this file only supplies palette variables below. */ /* Homepage: material-colour rhythm. */ .fi-identity-lab .hero { background: var(--lab-steel-night); } .fi-identity-lab[data-fi-theme="archive"] .hero__veil { background: radial-gradient(circle at 78% 38%, rgba(237, 187, 114, 0.15), transparent 26%), linear-gradient(90deg, rgba(113, 59, 45, 0.97) 0%, rgba(152, 83, 61, 0.86) 42%, rgba(53, 87, 98, 0.18) 72%, rgba(73, 55, 43, 0.34) 100%), linear-gradient(0deg, rgba(35, 27, 21, 0.62), transparent 48%); } .fi-identity-lab[data-fi-theme="archive"] .hero-note { background: linear-gradient(105deg, rgba(38, 62, 70, 0.96), rgba(53, 87, 98, 0.82)); box-shadow: 0 18px 44px rgba(24, 40, 46, 0.28); } .fi-identity-lab[data-fi-theme="archive"] .hero-note:hover { background: linear-gradient(105deg, rgba(38, 62, 70, 0.99), rgba(53, 87, 98, 0.94)); } .fi-identity-lab[data-fi-theme="sunlit"] .hero { color: var(--lab-ink); } .fi-identity-lab[data-fi-theme="sunlit"] .hero__veil { background: linear-gradient(90deg, rgba(240, 231, 216, 0.985) 0%, rgba(240, 231, 216, 0.95) 43%, rgba(240, 231, 216, 0.24) 70%, rgba(37, 70, 76, 0.16) 100%), linear-gradient(0deg, rgba(240, 231, 216, 0.82), transparent 48%); } .fi-identity-lab[data-fi-theme="sunlit"] .hero__lede { color: #4f4439; } .fi-identity-lab[data-fi-theme="sunlit"] .hero .text-link--paper { color: var(--lab-ink); } .fi-identity-lab[data-fi-theme="sunlit"] .hero .button--brass { border-color: var(--lab-steel-night); background: var(--lab-steel-night); color: var(--lab-paper); } .fi-identity-lab[data-fi-theme="sunlit"] .hero-note { border-color: rgba(230, 182, 108, 0.55); border-left-color: var(--lab-oxide); background: linear-gradient(105deg, rgba(37, 70, 76, 0.97), rgba(52, 94, 99, 0.92)); color: var(--lab-paper); } .fi-identity-lab[data-fi-theme="blueprint"] .hero__veil { background: radial-gradient(circle at 78% 39%, rgba(240, 194, 124, 0.14), transparent 25%), linear-gradient(90deg, rgba(32, 61, 70, 0.97) 0%, rgba(46, 89, 102, 0.84) 43%, rgba(46, 89, 102, 0.22) 72%, rgba(23, 36, 42, 0.42) 100%), linear-gradient(0deg, rgba(23, 36, 42, 0.64), transparent 48%); } .fi-identity-lab[data-fi-theme="blueprint"] .hero-note { background: linear-gradient(105deg, rgba(32, 61, 70, 0.97), rgba(46, 89, 102, 0.84)); } .fi-identity-lab .desks { background: linear-gradient(90deg, color-mix(in srgb, var(--lab-steel-deep) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px, var(--lab-paper); } .fi-identity-lab .desk--steel > a { background: var(--lab-steel-pale); } .fi-identity-lab .desk--brass > a { background: var(--lab-brass-wash); } .fi-identity-lab .desk--paper > a { background: var(--lab-paper-high); } .fi-identity-lab .desk--oxide > a { background: var(--lab-oxide-wash); } .fi-identity-lab .desk--mineral > a { background: var(--lab-sage); } .fi-identity-lab .desk--deep-steel > a { background: var(--lab-steel-deep); } .fi-identity-lab .evidence-search { background: var(--lab-steel-deep); } .fi-identity-lab .latest { background: var(--lab-canvas); } .fi-identity-lab .lead-story { background: var(--lab-paper-high); } .fi-identity-lab .story-list { background: var(--lab-steel-night); } .fi-identity-lab .library-routes { background: var(--lab-paper-high); } .fi-identity-lab .buyer-guides { background: var(--lab-steel-pale); } .fi-identity-lab .conversations { background: var(--lab-oxide); } .fi-identity-lab .field-panel--dark { background: var(--lab-field-dark); } .fi-identity-lab .field-panel--steel { background: var(--lab-steel-deep); } .fi-identity-lab .investigation-bridge { background: var(--lab-brass); } .fi-identity-lab .split-feature__media figcaption { background: var(--lab-steel-night); } .fi-identity-lab[data-fi-theme="archive"] .field-panel--dark .field-panel__veil { background: linear-gradient(0deg, rgba(73, 55, 43, 0.99) 4%, rgba(73, 55, 43, 0.84) 43%, rgba(73, 55, 43, 0.10) 100%); } .fi-identity-lab[data-fi-theme="archive"] .field-panel--steel .field-panel__veil { background: linear-gradient(0deg, rgba(53, 87, 98, 0.99) 5%, rgba(53, 87, 98, 0.84) 45%, rgba(53, 87, 98, 0.10) 100%); } .fi-identity-lab[data-fi-theme="sunlit"] .field-panel--dark .field-panel__veil, .fi-identity-lab[data-fi-theme="sunlit"] .field-panel--steel .field-panel__veil { background: linear-gradient(0deg, rgba(37, 70, 76, 0.99) 5%, rgba(37, 70, 76, 0.82) 45%, rgba(37, 70, 76, 0.08) 100%); } .fi-identity-lab[data-fi-theme="blueprint"] .field-panel--dark .field-panel__veil { background: linear-gradient(0deg, rgba(94, 64, 55, 0.99) 5%, rgba(94, 64, 55, 0.84) 45%, rgba(94, 64, 55, 0.08) 100%); } .fi-identity-lab[data-fi-theme="blueprint"] .field-panel--steel .field-panel__veil { background: linear-gradient(0deg, rgba(46, 89, 102, 0.99) 5%, rgba(46, 89, 102, 0.84) 45%, rgba(46, 89, 102, 0.08) 100%); } /* Article frame and hero. */ .fi-identity-lab.article-preview { background: var(--lab-canvas); } .fi-identity-lab .article-stage { background: var(--lab-canvas); } .fi-identity-lab .article-paper { border-color: color-mix(in srgb, var(--lab-steel) 30%, var(--lab-canvas)); background: var(--lab-paper-high); box-shadow: 0 18px 44px color-mix(in srgb, var(--lab-steel-night) 14%, transparent); } .fi-identity-lab .article-hero { border-top-color: var(--lab-oxide); } .fi-identity-lab[data-fi-theme="archive"] .article-hero { background: radial-gradient(circle at 84% 24%, rgba(237, 187, 114, 0.18), transparent 28%), linear-gradient(118deg, #713b2d 0%, #98533d 48%, #355762 100%); } .fi-identity-lab[data-fi-theme="sunlit"] .article-hero { background: radial-gradient(circle at 82% 22%, rgba(189, 135, 67, 0.20), transparent 28%), linear-gradient(118deg, #f0e7d8 0%, #e9cec0 56%, #d7e4e4 100%); color: var(--lab-ink); } .fi-identity-lab[data-fi-theme="sunlit"] .article-breadcrumb, .fi-identity-lab[data-fi-theme="sunlit"] .article-breadcrumb a, .fi-identity-lab[data-fi-theme="sunlit"] .article-hero__eyebrow, .fi-identity-lab[data-fi-theme="sunlit"] .article-hero h1, .fi-identity-lab[data-fi-theme="sunlit"] .article-hero__meta, .fi-identity-lab[data-fi-theme="sunlit"] .article-hero__meta a { color: var(--lab-ink); } .fi-identity-lab[data-fi-theme="sunlit"] .article-hero__dek { color: #51453a; } .fi-identity-lab[data-fi-theme="sunlit"] .article-hero__visual { box-shadow: 24px 24px 0 rgba(143, 74, 56, 0.28); } .fi-identity-lab[data-fi-theme="blueprint"] .article-hero { background: radial-gradient(circle at 82% 22%, rgba(240, 194, 124, 0.18), transparent 27%), linear-gradient(118deg, #203d46 0%, #2e5966 58%, #71372b 100%); } .fi-identity-lab .article-hero__visual { border-color: color-mix(in srgb, var(--lab-brass-light) 65%, transparent); background: var(--lab-steel-night); box-shadow: 24px 24px 0 color-mix(in srgb, var(--lab-steel-night) 48%, transparent); } .fi-identity-lab .article-hero__visual figcaption { background: var(--lab-steel-night); } .fi-identity-lab .article-file-strip { border-block-color: color-mix(in srgb, var(--lab-steel) 24%, var(--lab-canvas)); background: linear-gradient(90deg, color-mix(in srgb, var(--lab-steel-pale) 58%, var(--lab-canvas)), color-mix(in srgb, var(--lab-oxide-wash) 45%, var(--lab-canvas))); color: var(--lab-ink); } .fi-identity-lab .article-file-strip__inner { border-inline-color: color-mix(in srgb, var(--lab-steel) 26%, var(--lab-paper-high)); background: var(--lab-paper-high); box-shadow: 0 8px 20px color-mix(in srgb, var(--lab-steel-night) 9%, transparent); } .fi-identity-lab .article-file-strip__title { background: var(--lab-oxide-deep); color: var(--lab-brass-light); } .fi-identity-lab .article-file-strip dl { border-left: 0; } .fi-identity-lab .article-file-strip__field { border-color: color-mix(in srgb, var(--lab-steel) 22%, var(--lab-paper-high)); background: var(--lab-paper-high); } .fi-identity-lab .article-file-strip__field--filed { --file-accent: var(--lab-oxide); } .fi-identity-lab .article-file-strip__field--desk { --file-accent: var(--lab-steel-deep); } .fi-identity-lab .article-file-strip__field--industry { --file-accent: var(--lab-tip-deep); } .fi-identity-lab .article-file-strip__field--rigor { --file-accent: var(--lab-brass); } .fi-identity-lab .article-file-strip dt { color: var(--lab-ink-soft); } .fi-identity-lab .article-file-strip dd { color: var(--lab-ink); } /* Article rails: light dossier index, multicolour reader tools, contextual service and newsletter cards. */ .fi-identity-lab .article-rail--left .toc-panel { border-color: color-mix(in srgb, var(--lab-steel) 26%, var(--lab-paper-high)); border-top-color: var(--lab-brass); background: var(--lab-paper-high); color: var(--lab-ink); } .fi-identity-lab .toc-panel summary { border-color: color-mix(in srgb, var(--lab-steel) 22%, var(--lab-paper-high)); background: var(--lab-paper-high); color: var(--lab-oxide-deep); } .fi-identity-lab .toc-panel__heading > span { color: var(--lab-oxide-deep); } .fi-identity-lab .toc-panel__heading small { color: var(--lab-ink-soft); } .fi-identity-lab .toc-panel__toggle { color: color-mix(in srgb, var(--lab-oxide) 68%, var(--lab-ink-soft)); } .fi-identity-lab .article-toc { background: color-mix(in srgb, var(--lab-parchment) 11%, var(--lab-paper-high)); scrollbar-color: color-mix(in srgb, var(--lab-brass) 72%, var(--lab-oxide)) color-mix(in srgb, var(--lab-parchment) 42%, var(--lab-paper-high)); } .fi-identity-lab .article-toc a { border-bottom-color: color-mix(in srgb, var(--lab-steel) 15%, var(--lab-paper-high)); color: var(--lab-ink); } .fi-identity-lab .reading-tools-card { border-color: color-mix(in srgb, var(--lab-steel) 30%, var(--lab-paper)); border-top-color: var(--lab-steel-deep); background: var(--lab-paper-high); } .fi-identity-lab .reading-tools-card__section + .reading-tools-card__section { border-color: color-mix(in srgb, var(--lab-steel) 24%, var(--lab-paper)); } .fi-identity-lab .share-tool--linkedin { --share-bg: var(--lab-steel-pale); --share-fg: var(--lab-steel-deep); } .fi-identity-lab .share-tool--x { --share-bg: color-mix(in srgb, var(--lab-paper) 82%, var(--lab-steel-pale)); --share-fg: #171512; } .fi-identity-lab .share-tool--reddit { --share-bg: var(--lab-oxide-wash); --share-fg: var(--lab-oxide-deep); } .fi-identity-lab .share-tool--email { --share-bg: color-mix(in srgb, var(--lab-parchment) 76%, var(--lab-paper-high)); --share-fg: #6f501c; } .fi-identity-lab .share-tool--copy { --share-bg: var(--lab-sage); --share-fg: var(--lab-tip-deep); } .fi-identity-lab .service-pitch { --pitch-border: var(--lab-oxide-deep); --pitch-head-a: var(--lab-oxide-deep); --pitch-head-b: color-mix(in srgb, var(--lab-oxide-deep) 72%, var(--lab-oxide)); --pitch-label: #ffe1ad; --pitch-heading: var(--lab-paper-high); --pitch-paper: var(--lab-paper-high); --pitch-copy: var(--lab-muted); --pitch-number: var(--lab-oxide-deep); border-color: var(--pitch-border); border-top-color: var(--lab-brass); background: var(--pitch-paper); color: var(--lab-ink); } .fi-identity-lab .service-pitch[data-service-theme="website"] { --pitch-border: var(--lab-steel-deep); --pitch-head-a: #263e46; --pitch-head-b: #3f6470; --pitch-label: #f4d59c; } .fi-identity-lab .service-pitch[data-service-theme="seo"] { --pitch-border: #765622; --pitch-head-a: #624619; --pitch-head-b: #89662e; --pitch-label: #ffe0a6; } .fi-identity-lab .service-pitch[data-service-theme="content"] { --pitch-border: var(--lab-oxide-deep); --pitch-head-a: var(--lab-oxide-deep); --pitch-head-b: #a15a45; --pitch-label: #ffe1ad; } .fi-identity-lab .service-pitch[data-service-theme="analytics"] { --pitch-border: var(--lab-tip-deep); --pitch-head-a: var(--lab-steel-deep); --pitch-head-b: var(--lab-tip-deep); --pitch-label: #f1d08e; } .fi-identity-lab .service-pitch[data-service-theme="all"] { --pitch-border: var(--lab-steel-deep); --pitch-head-a: var(--lab-steel-deep); --pitch-head-b: var(--lab-steel); --pitch-label: #f1d08e; } .fi-identity-lab .service-pitch__head { background: radial-gradient(circle at 115% -12%, color-mix(in srgb, var(--lab-brass-light) 20%, transparent), transparent 40%), linear-gradient(150deg, var(--pitch-head-a) 0%, var(--pitch-head-b) 100%); } .fi-identity-lab .service-pitch .rail-label { color: var(--pitch-label); } .fi-identity-lab .service-pitch h2 { color: var(--pitch-heading); } .fi-identity-lab .service-pitch__body { background: var(--pitch-paper); color: var(--lab-ink); } .fi-identity-lab .service-pitch__body > p { color: var(--pitch-copy); } .fi-identity-lab .service-pitch__scope span:not(.service-pitch__scope-row), .fi-identity-lab .service-pitch__secondary { color: var(--pitch-number); } .fi-identity-lab .service-pitch__scope b { color: var(--lab-ink); } .fi-identity-lab .service-pitch__primary { border-color: color-mix(in srgb, var(--lab-brass) 70%, var(--pitch-border)); background: var(--lab-brass-light); color: var(--lab-ink); } .fi-identity-lab .service-pitch__secondary { border-color: var(--lab-rule); } .fi-identity-lab .rail-newsletter { border-color: color-mix(in srgb, var(--lab-steel) 48%, var(--lab-paper-high)); border-top-color: var(--lab-steel-deep); background: linear-gradient(135deg, color-mix(in srgb, var(--lab-paper-high) 66%, transparent), transparent 58%), var(--lab-steel-pale); color: var(--lab-ink); } .fi-identity-lab .rail-newsletter__mark { border-color: color-mix(in srgb, var(--lab-steel-deep) 34%, transparent); background: color-mix(in srgb, var(--lab-paper-high) 68%, transparent); color: var(--lab-steel-deep); } .fi-identity-lab .dispatch-mark__paper { fill: color-mix(in srgb, var(--lab-paper-high) 92%, var(--lab-steel-pale)); } .fi-identity-lab .dispatch-mark__seal { fill: var(--lab-brass-light); stroke: var(--lab-oxide-deep); } .fi-identity-lab .dispatch-mark__spark { stroke: var(--lab-oxide-deep); } .fi-identity-lab .rail-newsletter .rail-label, .fi-identity-lab .rail-newsletter__status { color: var(--lab-oxide-deep); } .fi-identity-lab .rail-newsletter h2 { color: var(--lab-ink); } .fi-identity-lab .rail-newsletter__form input { border-color: color-mix(in srgb, var(--lab-steel) 62%, var(--lab-paper-high)); background: color-mix(in srgb, var(--lab-paper-high) 92%, var(--lab-steel-pale)); color: var(--lab-ink); } .fi-identity-lab .rail-newsletter__form input::placeholder { color: var(--lab-muted); } .fi-identity-lab .rail-newsletter__form button { border-color: var(--lab-oxide-deep); background: var(--lab-oxide-deep); color: var(--lab-paper-high); } /* Article evidence components: a semantic, restrained mixed palette. */ .fi-identity-lab .fi-direct-answer { border-left-color: var(--lab-steel-deep); background: var(--lab-answer); color: var(--lab-ink); } .fi-identity-lab .fi-direct-answer .da-q { color: var(--lab-oxide-deep); } .fi-identity-lab .fi-direct-answer .da-a { color: var(--lab-ink); } .fi-identity-lab .key-takeaways { border-left-color: var(--lab-brass); background: color-mix(in srgb, var(--lab-parchment) 58%, var(--lab-paper-high)); } .fi-identity-lab .key-takeaways .kt-title { color: var(--lab-oxide-deep); } .fi-identity-lab .methodology { border-color: var(--lab-steel); border-top-color: var(--lab-brass); background: var(--lab-steel-night); color: var(--lab-steel-pale); } .fi-identity-lab .methodology__title { color: var(--lab-paper); } .fi-identity-lab .methodology__label, .fi-identity-lab .methodology dt, .fi-identity-lab .methodology dd a { color: var(--lab-brass-light); } .fi-identity-lab .methodology dd { color: var(--lab-steel-pale); } .fi-identity-lab .entry-content thead th { background: var(--lab-steel-deep); color: var(--lab-paper); } .fi-identity-lab .entry-content tbody tr:nth-child(even) { background: color-mix(in srgb, var(--lab-steel-pale) 48%, white); } .fi-identity-lab .fi-tablewrap__scroller, .fi-identity-lab .entry-content tbody th, .fi-identity-lab .entry-content td { border-color: color-mix(in srgb, var(--lab-steel) 28%, white); } .fi-identity-lab .entry-content .callout-box { margin: 28px 0; padding: 18px 20px; color: var(--lab-ink); } .fi-identity-lab .entry-content .callout-important { border-left: 4px solid var(--lab-oxide); background: var(--lab-important); } .fi-identity-lab .entry-content .callout-important .callout-label { color: var(--lab-oxide-deep); } .fi-identity-lab .entry-content .callout-tip { border-left: 4px solid var(--lab-tip-deep); background: var(--lab-tip); } .fi-identity-lab .entry-content .callout-tip .callout-label { color: var(--lab-tip-deep); } .fi-identity-lab .entry-content .callout-label { margin-bottom: 7px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .fi-identity-lab .entry-content .callout-box p:last-child { margin-bottom: 0; font-family: var(--article-read); font-size: 16px; line-height: 1.7; } .fi-identity-lab .fi-howto { border-left-color: var(--lab-tip-deep) !important; background: var(--lab-tip) !important; } .fi-identity-lab .faq-q { background: var(--lab-steel-deep); color: var(--lab-paper); } .fi-identity-lab .faq-q:hover { background: color-mix(in srgb, var(--lab-steel-deep) 82%, var(--lab-steel)); } .fi-identity-lab .faq-item.open .faq-q { background: var(--lab-oxide-deep); } .fi-identity-lab .faq-a { border-color: color-mix(in srgb, var(--lab-steel) 28%, var(--lab-paper)); background: color-mix(in srgb, var(--lab-parchment) 38%, var(--lab-paper-high)); } .fi-identity-lab .article-author { border-color: color-mix(in srgb, var(--lab-steel) 35%, var(--lab-steel-pale)); border-top-color: var(--lab-brass); background: var(--lab-steel-pale); } .fi-identity-lab .article-author img { background: var(--lab-steel-deep); } .fi-identity-lab .article-related { border-color: color-mix(in srgb, var(--lab-steel) 30%, var(--lab-parchment)); border-top-color: var(--lab-oxide); } .fi-identity-lab .article-related > div { background: var(--lab-field-dark); } .fi-identity-lab .article-related > a { background: color-mix(in srgb, var(--lab-parchment) 34%, var(--lab-paper-high)); } .fi-identity-lab .article-related > a:hover { background: var(--lab-brass-wash); } /* Contextual focus colours remain visible on pale surfaces. */ .fi-identity-lab main :focus-visible { outline-color: var(--lab-oxide-deep); } .fi-identity-lab .hero :focus-visible, .fi-identity-lab .article-hero :focus-visible, .fi-identity-lab .evidence-search :focus-visible, .fi-identity-lab .story-list :focus-visible, .fi-identity-lab .field-panel :focus-visible, .fi-identity-lab .conversations :focus-visible, .fi-identity-lab .methodology :focus-visible, .fi-identity-lab .service-pitch :focus-visible { outline-color: var(--lab-brass-light); } /* Navbar + hero colour lab v1 — one isolated owner-review surface. */ .fi-colour-lab { --lab-nav-bg: #f5f0e6; --lab-nav-text: #231b15; --lab-nav-muted: #5e5247; --lab-nav-accent: #98533d; --lab-nav-panel: #fffdf8; --lab-nav-cta-bg: #713b2d; --lab-nav-cta-text: #fffdf8; --lab-nav-opacity: 100%; --lab-hero-primary: #f5f0e6; --lab-hero-secondary: #263e46; --lab-hero-text: #231b15; --lab-hero-muted: #594a3e; --lab-hero-accent: #713b2d; --lab-hero-action-bg: #713b2d; --lab-hero-action-text: #fff8ed; --lab-hero-note-bg: #263e46; --lab-hero-note-text: #fff8ed; --lab-hero-note-muted: #d8e3e5; --lab-hero-frame: #263e46; --lab-hero-caption: #263e46; --lab-hero-caption-text: #ffe1ad; --lab-hero-shadow: #98533d; } /* Navbar variables replace the previous single night-steel owner. */ .fi-colour-lab .masthead { --nav-surface: color-mix(in srgb, var(--lab-nav-bg) var(--lab-nav-opacity), transparent); --nav-ink: var(--lab-nav-text); --nav-muted: var(--lab-nav-muted); --nav-accent: var(--lab-nav-accent); --nav-panel: var(--lab-nav-panel); --nav-cta-bg: var(--lab-nav-cta-bg); --nav-cta-text: var(--lab-nav-cta-text); --nav-stripe-oxide: var(--lab-oxide-deep); --nav-stripe-brass: var(--lab-brass); --nav-stripe-steel: var(--lab-steel-deep); } /* Homepage hero: geometry, content and artwork remain fixed. */ .fi-colour-lab:not(.article-preview) .hero { background: var(--lab-hero-primary); color: var(--lab-hero-text); } .fi-colour-lab:not(.article-preview) .hero__veil { background: radial-gradient(circle at 78% 35%, color-mix(in srgb, var(--lab-hero-accent) 16%, transparent), transparent 25%), linear-gradient(90deg, color-mix(in srgb, var(--lab-hero-primary) 99%, transparent) 0%, color-mix(in srgb, var(--lab-hero-primary) 96%, transparent) 41%, color-mix(in srgb, var(--lab-hero-primary) 34%, transparent) 68%, color-mix(in srgb, var(--lab-hero-secondary) 12%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--lab-hero-secondary) 58%, transparent), transparent 50%); } .fi-colour-lab:not(.article-preview) .hero .eyebrow--light, .fi-colour-lab:not(.article-preview) .hero-note__label, .fi-colour-lab:not(.article-preview) .hero-note__action { color: var(--lab-hero-accent); } .fi-colour-lab:not(.article-preview) .hero__lede { color: var(--lab-hero-muted); } .fi-colour-lab:not(.article-preview) .hero .button--brass { border-color: var(--lab-hero-action-bg); background: var(--lab-hero-action-bg); color: var(--lab-hero-action-text); } .fi-colour-lab:not(.article-preview) .hero .button--brass:hover { border-color: var(--lab-hero-text); background: var(--lab-hero-text); color: var(--lab-hero-primary); } .fi-colour-lab:not(.article-preview) .hero .text-link--paper { color: var(--lab-hero-text); } .fi-colour-lab:not(.article-preview) .hero-note { border-color: color-mix(in srgb, var(--lab-hero-accent) 58%, transparent); border-left-color: var(--lab-hero-accent); background: linear-gradient(105deg, var(--lab-hero-note-bg), color-mix(in srgb, var(--lab-hero-note-bg) 82%, var(--lab-hero-secondary))); color: var(--lab-hero-note-text); } .fi-colour-lab:not(.article-preview) .hero-note:hover { border-color: var(--lab-hero-accent); background: var(--lab-hero-note-bg); } .fi-colour-lab:not(.article-preview) .hero-note__copy > span { color: var(--lab-hero-note-muted); } .fi-colour-lab:not(.article-preview) .hero-note__label, .fi-colour-lab:not(.article-preview) .hero-note__action { color: var(--lab-hero-caption-text); } /* Article hero: only colour, frame and shadow are variable. */ .fi-colour-lab.article-preview .article-hero { border-top-color: var(--lab-hero-accent); border-bottom-color: color-mix(in srgb, var(--lab-hero-accent) 42%, transparent); background: radial-gradient(circle at 83% 21%, color-mix(in srgb, var(--lab-hero-accent) 20%, transparent), transparent 28%), linear-gradient(118deg, var(--lab-hero-primary) 0%, color-mix(in srgb, var(--lab-hero-primary) 48%, var(--lab-hero-secondary)) 54%, var(--lab-hero-secondary) 100%); color: var(--lab-hero-text); } .fi-colour-lab.article-preview .article-breadcrumb, .fi-colour-lab.article-preview .article-hero__dek, .fi-colour-lab.article-preview .article-hero__meta { color: var(--lab-hero-muted); } .fi-colour-lab.article-preview .article-breadcrumb a, .fi-colour-lab.article-preview .article-hero__eyebrow, .fi-colour-lab.article-preview .article-hero__meta a { color: var(--lab-hero-accent); } .fi-colour-lab.article-preview .article-hero h1 { color: var(--lab-hero-text); } .fi-colour-lab.article-preview .article-hero__meta-item::before { background: var(--lab-hero-accent); } .fi-colour-lab.article-preview .article-breadcrumb a:hover, .fi-colour-lab.article-preview .article-hero__author-link:hover { color: var(--lab-hero-text); } .fi-colour-lab.article-preview .article-hero__linkedin:hover { border-color: var(--lab-hero-accent); background: var(--lab-hero-accent); color: var(--lab-hero-primary); } .fi-colour-lab.article-preview .article-hero__visual { border-color: var(--lab-hero-accent); background: var(--lab-hero-frame); box-shadow: 24px 24px 0 color-mix(in srgb, var(--lab-hero-shadow) 48%, transparent); } .fi-colour-lab.article-preview .article-hero__visual::before { border-color: color-mix(in srgb, var(--lab-hero-caption-text) 45%, transparent); } .fi-colour-lab.article-preview .article-hero__visual figcaption { border-top-color: color-mix(in srgb, var(--lab-hero-accent) 45%, transparent); background: var(--lab-hero-caption); color: var(--lab-hero-caption-text); } /* Prototype controls; these are never part of the site itself. */ .fi-colour-lab-panel { position: fixed; z-index: 1400; right: 16px; bottom: 16px; width: min(458px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); overflow-y: auto; border: 1px solid rgba(237, 187, 114, 0.62); background: rgba(25, 31, 33, 0.985); box-shadow: 0 22px 70px rgba(12, 10, 8, 0.42); color: #f5f0e6; font-family: "DM Sans", Arial, sans-serif; } .fi-colour-lab-panel[hidden] { display: none; } .fi-colour-lab-panel button, .fi-colour-lab-panel input { font: inherit; } .fi-colour-lab-panel__top { position: sticky; z-index: 3; top: 0; display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid rgba(237, 187, 114, 0.24); background: #1c272b; } .fi-colour-lab-panel__title { margin: 0; color: #edbb72; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .fi-colour-lab-panel__hint { margin: 4px 0 0; color: #ccd7d8; font-size: 12px; line-height: 1.4; } .fi-colour-lab-panel__close { min-width: 38px; min-height: 38px; border: 1px solid #70878e; background: transparent; color: #fff8ed; cursor: pointer; } .fi-colour-lab-section { padding: 15px 16px; border-bottom: 1px solid rgba(237, 187, 114, 0.19); } .fi-colour-lab-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .fi-colour-lab-section h2 { margin: 0; color: #fff8ed; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .fi-colour-lab-section__head span { color: #9fb0b4; font-size: 10px; } .fi-colour-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; } .fi-colour-preset { min-width: 0; min-height: 70px; padding: 0; border: 1px solid #60757b; background: #263e46; color: #fff8ed; cursor: pointer; text-align: left; } .fi-colour-preset[aria-pressed="true"] { border: 2px solid #edbb72; } .fi-colour-preset__swatch { display: block; height: 36px; border-bottom: 1px solid rgba(255,255,255,.16); } .fi-colour-preset__label { display: block; padding: 7px 7px 8px; color: #f5f0e6; font-size: 9px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .fi-colour-lab-toggle { display: flex; align-items: center; gap: 8px; margin-top: 11px; color: #d6dfe0; font-size: 11px; } .fi-colour-lab-toggle input { width: 17px; height: 17px; accent-color: #c99550; } .fi-colour-status { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 10px; } .fi-colour-status span { padding: 7px; border: 1px solid #52686f; background: #223238; color: #dce4e6; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 8.5px; line-height: 1.35; text-align: center; } .fi-colour-status span[data-pass="false"] { border-color: #df8064; color: #ffd8cc; } .fi-colour-custom summary { padding: 13px 16px; color: #edbb72; cursor: pointer; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .fi-colour-custom__body { display: grid; gap: 8px; padding: 0 16px 16px; } .fi-colour-field { display: grid; grid-template-columns: minmax(112px, 1fr) 40px 92px; gap: 7px; align-items: center; } .fi-colour-field > span { color: #d8e3e5; font-size: 11px; } .fi-colour-field input[type="color"] { width: 40px; height: 34px; padding: 2px; border: 1px solid #71858b; background: #1d292d; cursor: pointer; } .fi-colour-field input[type="text"] { min-width: 0; height: 34px; padding: 6px 7px; border: 1px solid #71858b; background: #f8f3e9; color: #231b15; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 10px; text-transform: uppercase; } .fi-colour-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 14px 16px; } .fi-colour-actions button { min-height: 42px; padding: 8px; border: 1px solid #70878e; background: #263e46; color: #fff8ed; cursor: pointer; font-size: 10px; font-weight: 700; } .fi-colour-actions button:first-child { border-color: #edbb72; background: #98533d; } .fi-colour-recipe { margin: 0 16px 14px; padding: 10px; border: 1px solid #4f6369; background: #131d20; color: #cbd8da; font: 9px/1.5 "IBM Plex Mono", Consolas, monospace; white-space: pre-wrap; } .fi-colour-lab-panel__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px 16px; } .fi-colour-lab-panel__nav a { color: #edbb72; font-size: 12px; font-weight: 750; } .fi-colour-lab-panel__nav span { color: #9fb0b4; font: 8.5px/1.3 "IBM Plex Mono", Consolas, monospace; text-align: right; text-transform: uppercase; } .fi-colour-lab-launcher { position: fixed; z-index: 1399; top: 50%; right: 0; bottom: auto; display: grid; width: 26px; min-width: 26px; min-height: 54px; place-items: center; padding: 0; transform: translateY(-50%); border: 1px solid #edbb72; border-right: 0; background: #263e46; color: #fff8ed; cursor: pointer; font: 0/1 "DM Sans", Arial, sans-serif; } .fi-colour-lab-launcher::before { content: "◐"; font: 700 14px/1 "IBM Plex Mono", monospace; } @media (max-width: 900px) { .fi-colour-lab:not(.article-preview) .hero__veil { background: linear-gradient(90deg, color-mix(in srgb, var(--lab-hero-primary) 98%, transparent), color-mix(in srgb, var(--lab-hero-primary) 82%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--lab-hero-secondary) 60%, transparent), transparent 52%); } } @media (max-width: 680px) { .fi-colour-lab .hero__copy { width: 100%; min-width: 0; } .fi-colour-lab .hero h1 { max-width: 100%; font-size: clamp(43px, 13vw, 54px); overflow-wrap: break-word; } .fi-colour-lab .hero__lede { max-width: 100%; overflow-wrap: anywhere; } .fi-colour-lab-panel { right: 10px; bottom: 10px; width: calc(100vw - 20px); max-height: calc(100vh - 20px); } .fi-colour-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fi-colour-lab-launcher { right: 10px; bottom: 10px; } } @media (max-width: 390px) { .fi-colour-field { grid-template-columns: minmax(96px, 1fr) 38px 82px; } .fi-colour-status { grid-template-columns: 1fr; } .fi-colour-actions { grid-template-columns: 1fr; } } @media print { .fi-colour-lab-panel, .fi-colour-lab-launcher { display: none !important; } } /* Owner-review page: keep the selected recipe applied but hide the prototype colour controls. */ .homepage-owner-review .fi-colour-lab-panel, .homepage-owner-review .fi-colour-lab-launcher { display: none !important; } /* ---- palette-locked.css ---------------------------------------- */ /* * Factory Investigator - locked palette selection, 30 August 2026. * * The prototype relied on colour-lab.js reading a query string to apply the * owner-selected recipe. Without it the page fell back to "Warm Paper", not the * selection. This file bakes the selection in so the preview is standalone and * opens correctly from the filesystem with no query string and no lab script. * * Navbar : Oxide Wash * Home hero : Paper Investigation * * Values are copied verbatim from the recipes in colour-lab.js. Nothing is invented. * Palette family: paper, oxide, brass, steel, clay and sage. */ .fi-colour-lab.homepage-owner-review { /* Navbar - Oxide Wash */ --lab-nav-bg: #e8cfc4; --lab-nav-text: #231b15; --lab-nav-muted: #5e5247; --lab-nav-accent: #98533d; --lab-nav-panel: #fff5ef; --lab-nav-cta-bg: #713b2d; --lab-nav-cta-text: #fffdf8; --lab-nav-opacity: 100%; /* Homepage hero - Paper Investigation */ --lab-hero-primary: #f5f0e6; --lab-hero-secondary: #263e46; --lab-hero-text: #231b15; --lab-hero-muted: #594a3e; --lab-hero-accent: #713b2d; --lab-hero-action-bg: #713b2d; --lab-hero-action-text: #fff8ec; --lab-hero-note-bg: #263e46; --lab-hero-note-text: #fff8ec; --lab-hero-note-muted: #d8e3e5; --lab-hero-frame: #263e46; --lab-hero-caption: #263e46; --lab-hero-caption-text: #edbb72; --lab-hero-shadow: #98533d; } /* ---- home-revision-2026-08-30.css ------------------------------ */ /* * Factory Investigator - Homepage and shared masthead revision, 30 August 2026. * * REVISE, NOT REBUILD. This is a page-scoped revision layer over the accepted * prototype. It changes typography, spacing, hierarchy, interaction completeness * and responsive behaviour. It does not change the page's structure, its journey, * its artwork, its routes or the accepted footer's appearance. * * Loads after styles.css, colour-lab.css and palette-locked.css. * * 1 Readability tokens * 2 Masthead - brand, navigation, dropdown panels * 3 Library - the two-stage interaction, completed * 4 Services - the real five-service menu * 5 Masthead utilities, CTA and mobile toggle * 6 Homepage composition * 7 Footer - newsletter legibility only, appearance preserved * 8 Responsive: laptop, short laptop, tablet, mobile */ /* ============================================================ 1 READABILITY TOKENS ============================================================ */ .homepage-owner-review { /* Smallest type allowed anywhere in navigation, utilities or the newsletter. The prototype went down to 9.5px, which is not readable at arm's length. */ --nav-size-link: 17px; --nav-size-kicker: 12.5px; --nav-size-row-title: 17px; --nav-size-row-note: 14.5px; --nav-size-topic-title: 15.5px; --nav-size-topic-note: 13.5px; --nav-size-mono-action: 13px; --nav-size-utility: 13.5px; --nav-size-cta: 15px; --nav-panel-radius: 0; --fi-masthead-height: 92px; --fi-stack: clamp(56px, 6.4vw, 96px); /* Type scale - decided once, see 00-governance/CONVERSION-CTA-AND-TYPE-STANDARD-2026-08-30.md Measured against ivristech, whose body copy is 19px against FI's former 15.5-17px. That gap is what "more readable" was. Its heading ramp was NOT copied: h1 62.6 to h2 57.6 is an 8% step, then h3 falls 62%. */ --fs-display: clamp(44px, 5.4vw, 84px); --fs-h1: clamp(36px, 4vw, 58px); --fs-h2: clamp(28px, 2.7vw, 44px); --fs-h3: clamp(21px, 1.7vw, 26px); --fs-lede: clamp(18px, 1.35vw, 21px); --fs-body: 18px; --fs-body-sm: 16.5px; --fs-meta: 14px; --fs-micro: 12.5px; } /* Anchor jumps must clear the sticky masthead. The prototype's hero button jumped to #evidence-library and the heading landed underneath the navbar. */ .homepage-owner-review [id] { scroll-margin-top: calc(var(--fi-masthead-height) + 18px); } /* ============================================================ 2 MASTHEAD - BRAND, NAVIGATION, DROPDOWN PANELS ============================================================ */ .homepage-owner-review .masthead { border-bottom: 1px solid color-mix(in srgb, var(--nav-ink) 16%, transparent); transition: box-shadow 200ms ease; } /* Separation from the paper hero once the page moves, not before. */ .homepage-owner-review .masthead[data-scrolled="true"] { box-shadow: 0 10px 28px -18px rgba(35, 27, 21, 0.6); } .homepage-owner-review .masthead__inner { gap: 26px; } .homepage-owner-review .brand { gap: 14px; font-size: 26px; line-height: 0.88; letter-spacing: -0.026em; } /* The seal is a one-colour mark: 64 paths of fill="currentColor" set to brass #c99550. On the pale Oxide Wash navbar #e8cfc4 that measures 1.79:1 - it simply disappears. A dark disc behind it fixed the contrast but dropped a cold blue circle into a warm masthead and forced padding that shrank the artwork. So the mark itself is darkened instead of being backed. brightness(0.5) takes brass to roughly #644a28, a deep bronze in the same hue family, at 5.55:1 on the navbar. No disc, no padding, and the seal renders at full size - the same light-ground counterpart the footer already gets in reverse, brass on near-black. */ .homepage-owner-review .brand img { /* Measured: the SVG has zero internal margin - its artwork fills its box edge to edge. So any space around the seal is the masthead's own, not the image's. The mark is therefore sized off the masthead height and fills it, leaving only a 4px optical gap. It rescales automatically at every breakpoint because each one re-declares --fi-masthead-height. */ width: calc(var(--fi-masthead-height) - 12px); height: calc(var(--fi-masthead-height) - 12px); padding: 0; border-radius: 0; background: none; box-shadow: none; filter: brightness(0.5) saturate(1.12); } /* Primary navigation - the single largest legibility gain. */ .homepage-owner-review .primary-nav { gap: clamp(16px, 1.6vw, 26px); } .homepage-owner-review .primary-nav > a, .homepage-owner-review .nav-group > summary { min-height: 46px; font-size: var(--nav-size-link); font-weight: 680; letter-spacing: -0.004em; } .homepage-owner-review .nav-group > summary::after { margin-left: 8px; font-size: 13px; opacity: 0.85; } /* Panel chrome: a calmer, deeper card that reads as one surface. */ .homepage-owner-review .nav-group__panel { top: calc(100% + 14px); border-top-width: 5px; box-shadow: 0 28px 64px -22px rgba(35, 27, 21, 0.5); } .homepage-owner-review .nav-panel__kicker, .homepage-owner-review .nav-services__header p { font-size: var(--nav-size-kicker); letter-spacing: 0.075em; } /* ============================================================ 3 LIBRARY - THE TWO-STAGE INTERACTION, COMPLETED ------------------------------------------------------------ Stage 1 is the section rail: Blog, News, Investigations, Buyer Guides, Interviews. Stage 2 is the six Evidence Desks, reached through Blog only. The prototype opened the panel with stage 2 hidden, so the first thing a visitor saw was a narrow half-empty card, and the only hint that Blog behaved differently from its four siblings was a bare chevron. Both are fixed here. ============================================================ */ /* 2026-09-06: stage 1 is compact again, matching the reference dropdown's content width. The previous rule froze the panel at one 880px width in both states so the card could not jump under the pointer - but stage 1 only fills about 336px, so the remaining ~550px sat empty until Blog was opened, which is what made the panel read as an oversized, mostly empty overlay. The no-jump concern is kept, by geometry rather than by width freezing: the panel is left-anchored (`left: -18px`) and stage 1 holds the SAME 336px column in both states, so opening stage 2 grows the panel rightward and moves nothing under the cursor. Stage 2's first column is 336px (the reference's 330px rail plus its own border), so stage 1's panel is 338px: the same 336px of content plus this panel's 1px borders. That makes the rail measure identically in both states, so opening stage 2 reflows nothing. */ .homepage-owner-review .nav-group__panel--library { width: min(338px, calc(100vw - 40px)); grid-template-columns: minmax(0, 1fr); } .homepage-owner-review .nav-group--library.is-blog-open .nav-group__panel--library { width: min(936px, calc(100vw - 40px)); grid-template-columns: 336px minmax(0, 1fr); } .homepage-owner-review .nav-library__rail { gap: 6px; padding: 24px; } /* Stage 1 rows. */ .homepage-owner-review .nav-library__row strong, .homepage-owner-review .nav-library__blog-trigger strong { font-size: var(--nav-size-row-title); font-weight: 700; line-height: 1.26; } .homepage-owner-review .nav-library__row small, .homepage-owner-review .nav-library__blog-trigger small { margin-top: 4px; font-size: var(--nav-size-row-note); line-height: 1.42; } /* Blog is the only row that opens a second stage. Say so, and show it. */ .homepage-owner-review .nav-library__blog-trigger { position: relative; } .homepage-owner-review .nav-library__blog-trigger > span:last-child { font-size: 20px; transition: transform 180ms ease; } .homepage-owner-review .nav-group--library.is-blog-open .nav-library__blog-trigger > span:last-child { transform: rotate(90deg); } /* 2026-09-07: the '6 desks' badge was an inline-block ::after, so at first paint - before the display font settled - it sat beside the title and then rewrapped underneath, a visible shift. Title and badge now hold their own reserved rows, so the badge can never sit beside the title at any font metric. The title colour is pinned across hover, focus-within and expanded states (13.02:1 on the #efe0c5 hover surface, 13.31:1 on the #f2e2c9 expanded surface; white would have been 1.27:1). The trigger no longer transitions transform and the panel no longer transitions width, so opening stage 2 moves nothing and animates no layout property. */ .homepage-owner-review .nav-library__blog-trigger strong { display: grid; justify-items: start; row-gap: 5px; } .homepage-owner-review .nav-library__blog-trigger strong, .homepage-owner-review .nav-library__blog:hover .nav-library__blog-trigger strong, .homepage-owner-review .nav-library__blog:focus-within .nav-library__blog-trigger strong, .homepage-owner-review .nav-group--library.is-blog-open .nav-library__blog-trigger strong { color: var(--nav-ink); } .homepage-owner-review .nav-library__blog:hover .nav-library__blog-trigger, .homepage-owner-review .nav-library__blog:focus-within .nav-library__blog-trigger, .homepage-owner-review .nav-group--library.is-blog-open .nav-library__blog-trigger { transform: none; } .homepage-owner-review .nav-library__blog-trigger { transition: background 180ms ease, box-shadow 180ms ease; } .homepage-owner-review .nav-group__panel--library { transition: none; } .homepage-owner-review .nav-library__blog-trigger strong::after { display: inline-block; margin-left: 0; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--nav-cta-bg) 45%, transparent); color: var(--nav-cta-bg); content: "6 desks"; font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 2px; } /* The open row stays visibly selected while stage 2 is showing. */ .homepage-owner-review .nav-group--library.is-blog-open .nav-library__blog-trigger { background: #f2e2c9; box-shadow: inset 4px 0 0 var(--nav-stripe-brass); } /* Stage 2. */ .homepage-owner-review .nav-library__topics { padding: 24px 26px; } .homepage-owner-review .nav-library__topic-grid { gap: 11px; margin-top: 16px; } .homepage-owner-review .nav-library__topic strong { font-size: var(--nav-size-topic-title); line-height: 1.32; } .homepage-owner-review .nav-library__topic small { margin-top: 5px; font-size: var(--nav-size-topic-note); line-height: 1.42; } .homepage-owner-review .nav-library__all { min-height: 48px; margin-top: 18px; padding: 12px 14px; font-size: var(--nav-size-mono-action); letter-spacing: 0.045em; } /* Stage 2 is present the moment the Library panel opens, so the card is never half empty. Hovering another section row still collapses it back to stage 1. */ .homepage-owner-review .no-js .nav-library__topics { display: flex; } /* ============================================================ 4 SERVICES - THE REAL FIVE-SERVICE MENU ============================================================ */ .homepage-owner-review .nav-group__panel--services { width: min(840px, calc(100vw - 40px)); padding: 24px; transform: translateX(-58%); } .homepage-owner-review .nav-services__header { padding-bottom: 18px; } .homepage-owner-review .nav-services__header strong { font-size: 24px; line-height: 1.12; } .homepage-owner-review .nav-services__header > a { font-size: var(--nav-size-mono-action); letter-spacing: 0.04em; } .homepage-owner-review .nav-service-row { min-height: 68px; grid-template-columns: 38px 216px minmax(0, 1fr) 20px; gap: 12px; padding: 11px 14px; } .homepage-owner-review .nav-service-row b { font-size: 12.5px; letter-spacing: 0.04em; } .homepage-owner-review .nav-service-row strong { font-size: 16.5px; font-weight: 700; line-height: 1.28; } .homepage-owner-review .nav-service-row small { font-size: var(--nav-size-row-note); line-height: 1.4; } .homepage-owner-review .nav-service-row > span:last-child { font-size: 15px; } /* The lower-commitment next step. Its supporting line was 9.5px. */ .homepage-owner-review .nav-services__investigation { min-height: 68px; margin-top: 16px; padding: 13px 16px; border-width: 2px; } .homepage-owner-review .nav-services__investigation b { font-size: 16px; line-height: 1.3; } .homepage-owner-review .nav-services__investigation small { margin-top: 4px; font-size: 13.5px; line-height: 1.4; } .homepage-owner-review .nav-services__investigation > strong { font-size: var(--nav-size-mono-action); letter-spacing: 0.04em; } /* --- Services dropdown: same palette as the page section ----- The dropdown rows mixed each tone into the panel at 11%, which washed them out to near-white. The Services-for-manufacturers section on the page uses the full surface tokens and is the accepted look, so the dropdown reuses the same tokens rather than a paler approximation of them. */ .homepage-owner-review .nav-service-row { background: var(--service-surface, var(--mineral)); border-left-width: 5px; } .homepage-owner-review .nav-service-row--steel { --service-surface: var(--steel-pale); --service-tone: var(--steel-deep); } .homepage-owner-review .nav-service-row--brass { --service-surface: var(--brass-wash); --service-tone: #855420; } .homepage-owner-review .nav-service-row--clay { --service-surface: var(--oxide-wash); --service-tone: var(--oxide-deep); } .homepage-owner-review .nav-service-row--sage { --service-surface: #d8e0d9; --service-tone: #4f624a; } /* Pinned rather than var(--mineral): the dropdown resolves that token from the palette layer and the page section resolves it from the base sheet, so the two rendered 217,216,208 against 228,222,214. Measured from the section. */ .homepage-owner-review .nav-service-row--umber { --service-surface: #e4ded6; --service-tone: #49372b; } .homepage-owner-review .nav-service-row:hover, .homepage-owner-review .nav-service-row:focus-visible { background: color-mix(in srgb, var(--service-tone) 16%, var(--service-surface)); transform: translateX(3px); } /* --- The two dropdown CTAs now look like actions -------------- "View all services" was an underlined mono label, and the $0 row's action was 11.5px mono. Both were the least prominent things in a panel whose entire job is to route people to a paid service. */ .homepage-owner-review .nav-services__header > a { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 15px; border: 1px solid var(--nav-cta-bg); background: var(--nav-cta-bg); color: var(--nav-cta-text); font-size: var(--nav-size-mono-action); text-decoration: none; transition: background 160ms ease, border-color 160ms ease; } .homepage-owner-review .nav-services__header > a:hover, .homepage-owner-review .nav-services__header > a:focus-visible { background: var(--ink); border-color: var(--ink); } .homepage-owner-review .nav-services__investigation { min-height: 74px; border-width: 2px; border-color: var(--nav-cta-bg); background: linear-gradient(90deg, #f3e3c8, #efdcbc); } .homepage-owner-review .nav-services__investigation > strong { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; padding: 10px 18px; background: var(--nav-cta-bg); color: var(--nav-cta-text); font-size: var(--nav-size-mono-action); white-space: nowrap; transition: background 160ms ease; } .homepage-owner-review .nav-services__investigation:hover > strong, .homepage-owner-review .nav-services__investigation:focus-visible > strong { background: var(--ink); } /* ============================================================ 5 UTILITIES, CTA AND MOBILE TOGGLE ============================================================ */ .homepage-owner-review .masthead__utilities { gap: 18px; } .homepage-owner-review .language-nav a { min-width: 40px; min-height: 38px; font-size: var(--nav-size-utility); letter-spacing: 0.03em; } .homepage-owner-review .masthead__cta { min-height: 52px; padding: 12px 20px; font-size: var(--nav-size-cta); font-weight: 750; letter-spacing: -0.002em; } .homepage-owner-review .masthead__cta::after { font-size: 15px; } .homepage-owner-review .menu-toggle { min-width: 96px; min-height: 48px; font-size: 13px; letter-spacing: 0.04em; } /* ============================================================ 6 HOMEPAGE COMPOSITION ============================================================ */ /* --- Hero: one clear primary action, calmer measure --------- */ /* The grid pads 72px on top and then centres, so the void above the eyebrow compounded. Weighted toward the top instead - moved up, not pinned up. */ .homepage-owner-review .hero__grid { padding-block: 88px 48px; } .homepage-owner-review .hero__copy { max-width: 62ch; } /* The lede was one 42-word block. Split so the first line answers "who is this for" on its own and can be taken in at a glance, with the detail stepped down beneath it. Same words - the approved About-page copy is unchanged. */ /* colour-lab sets .hero__lede colour at (0,3,0), so these have to match it to create the two tiers. The opener carries ink; the detail steps down. */ .fi-colour-lab.homepage-owner-review:not(.article-preview) .hero__lede { color: var(--lab-hero-text, #231b15); font-weight: 500; } /* The three verbs a reader recognises themselves in. Weight only - no colour, no size change - so it scans without turning into decoration. */ .fi-colour-lab.homepage-owner-review:not(.article-preview) .hero__lede strong { color: inherit; font-weight: 700; } .fi-colour-lab.homepage-owner-review:not(.article-preview) .hero__lede--support { max-width: 58ch; margin-top: 12px; color: var(--lab-hero-muted, #594a3e); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; } .homepage-owner-review .hero__lede { max-width: 54ch; font-size: var(--fs-lede); line-height: 1.58; } .homepage-owner-review .action-row { align-items: center; margin-top: 30px; gap: clamp(18px, 2vw, 30px); } .homepage-owner-review .hero .button--brass { min-height: 56px; padding-inline: 28px; font-size: 16.5px; } .homepage-owner-review .hero .text-link { font-size: 16px; } /* --- Consistent vertical rhythm ----------------------------- */ .homepage-owner-review .section-pad { padding-block: var(--fi-stack); } .homepage-owner-review .section-intro, .homepage-owner-review .section-heading { margin-bottom: clamp(30px, 3.4vw, 46px); } .homepage-owner-review .eyebrow { font-size: 12.5px; letter-spacing: 0.1em; } /* --- Evidence desks: even cards, readable body -------------- */ .homepage-owner-review .desk-grid { gap: clamp(14px, 1.5vw, 22px); } .homepage-owner-review .desk h3 { font-size: clamp(21px, 1.62vw, 25px); line-height: 1.14; } .homepage-owner-review .desk p { font-size: var(--fs-body-sm); line-height: 1.55; } .homepage-owner-review .desk__action { font-size: 12.5px; letter-spacing: 0.06em; } /* --- Evidence search: a real field, not a hairline ---------- */ .homepage-owner-review .library-search input { min-height: 58px; font-size: 17px; } .homepage-owner-review .library-search button { min-height: 58px; padding-inline: 26px; font-size: 14.5px; letter-spacing: 0.045em; } .homepage-owner-review .library-search > label { font-size: 12.5px; letter-spacing: 0.08em; } /* --- The Weekly Dispatch band -------------------------------- Replaces the search band by owner overrule. Reuses the footer form's markup and its preview-only handler, so nothing can be submitted from the preview. Styled on the steel-night surface so it reads as a deliberate pause between what we cover and what we published, not as another content section. */ .homepage-owner-review .home-dispatch { padding-block: clamp(44px, 4.6vw, 68px); border-top: 4px solid #355762; border-bottom: 1px solid #b7c6c8; background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), transparent 58%), #e7eff0; color: #1f292d; } .homepage-owner-review .home-dispatch__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: clamp(26px, 3.4vw, 60px); align-items: center; } .homepage-owner-review .home-dispatch h2 { max-width: 20ch; margin: 0 0 14px; font-family: var(--serif); font-size: var(--fs-h2); font-weight: 520; letter-spacing: -0.03em; line-height: 1.08; } .homepage-owner-review .home-dispatch__copy p:not(.eyebrow) { max-width: 52ch; margin: 0; color: #46555a; font-size: var(--fs-body); line-height: 1.6; } .homepage-owner-review .home-dispatch__form > label { display: block; margin-bottom: 12px; color: #46555a; font-size: var(--fs-body-sm); font-weight: 650; letter-spacing: 0.01em; text-transform: none; } .homepage-owner-review .home-dispatch__form .news-form__row { grid-template-columns: minmax(0, 1fr) auto; } .homepage-owner-review .home-dispatch__form input { height: 56px; font-size: var(--fs-body-sm); } .homepage-owner-review .home-dispatch__form button { height: 56px; padding-inline: 26px; font-size: var(--fs-body-sm); letter-spacing: 0.04em; } .homepage-owner-review .home-dispatch__note { margin: 8px 0 0; color: #5d6b6f; font-size: var(--fs-meta); line-height: 1.5; } /* Field and action, matched to the rail card rather than the footer's dark form. */ .homepage-owner-review .home-dispatch .eyebrow { color: #713b2d; } .homepage-owner-review .home-dispatch h2 { color: #1f292d; } .homepage-owner-review .home-dispatch__form input { border: 1px solid #81979d; background: rgba(255, 253, 248, 0.92); color: #1f292d; } .homepage-owner-review .home-dispatch__form input::placeholder { color: #68777b; } .homepage-owner-review .home-dispatch__form button { border: 1px solid #713b2d; background: #713b2d; color: #fffdf8; box-shadow: 3px 3px 0 rgba(113, 59, 45, 0.18); } .homepage-owner-review .home-dispatch__form button:hover, .homepage-owner-review .home-dispatch__form button:focus-visible { border-color: #263e46; background: #263e46; color: #fffdf8; } .homepage-owner-review .home-dispatch .news-form__message { color: #713b2d; } /* --- Latest work: headline, then headline, then metadata ---- Two hierarchy faults were introduced here by the first pass and are corrected. The side-card headlines had been capped at 18.5px, below the base sheet's own clamp, so they read as captions. And raising body copy to 18px caught the lead card's byline paragraph, which is a direct child of the same container - so the author line rendered at the same size as the dek and outweighed the headlines it sat above. The byline is metadata and now sits in the meta tier. Resulting ramp at 1440: lead headline 36 > side headline 24.5 > body 18 > meta 14. */ .homepage-owner-review .lead-story__body h3 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; } .homepage-owner-review .lead-story__body > p:not(.story-meta) { font-size: var(--fs-body); line-height: 1.6; } .homepage-owner-review .story-meta { font-size: var(--fs-meta); letter-spacing: 0.04em; } .homepage-owner-review .story-list__index { font-size: var(--fs-micro); letter-spacing: 0.09em; } .homepage-owner-review .story-list h3 { font-size: var(--fs-h3); line-height: 1.18; } /* Side cards respond as one target. Only the title and the arrow are links, so the card itself carries the hover and focus-within state to make the whole row read as reachable. */ .homepage-owner-review .story-list article { padding-left: 18px; transition: background 180ms ease, transform 180ms ease; } .homepage-owner-review .story-list article::before { position: absolute; top: 22px; bottom: 22px; left: 0; width: 3px; background: var(--brass-light); content: ""; transform: scaleY(0); transform-origin: top; transition: transform 200ms ease; } /* Nudged with transform rather than padding: it does not touch layout, so the row cannot reflow under the pointer, and it survives regardless of how the surrounding grid sizes itself. Background is a plain rgba for the same reason - colour-mix against `transparent` resolved to fully transparent here. */ .homepage-owner-review .story-list article:hover, .homepage-owner-review .story-list article:focus-within { background: rgba(240, 190, 117, 0.10); transform: translateX(5px); } .homepage-owner-review .story-list article:hover::before, .homepage-owner-review .story-list article:focus-within::before { transform: scaleY(1); } .homepage-owner-review .story-list article:hover h3 a, .homepage-owner-review .story-list article:focus-within h3 a { color: var(--brass-light); } .homepage-owner-review .story-list__arrow { transition: background 180ms ease, color 180ms ease, transform 180ms ease; } .homepage-owner-review .story-list article:hover .story-list__arrow, .homepage-owner-review .story-list article:focus-within .story-list__arrow { background: var(--brass-light); color: var(--ink); transform: translate(2px, -2px); } /* --- Format strip: make it read as five destinations --------- It was five links styled as a static table: no arrow, no rest-state affordance, nothing but a colour swap on hover. Each cell now carries a persistent arrow and a top rule that fills on approach. */ .homepage-owner-review .library-routes a { position: relative; align-content: start; transition: background 180ms ease, color 180ms ease; } .homepage-owner-review .library-routes a::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--oxide); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; } .homepage-owner-review .library-routes a::after { position: absolute; top: 16px; right: 16px; color: var(--oxide); content: "↗"; font-family: var(--mono); font-size: var(--fs-micro); opacity: 0.42; transition: opacity 180ms ease, transform 180ms ease; } .homepage-owner-review .library-routes a:hover::before, .homepage-owner-review .library-routes a:focus-visible::before { transform: scaleX(1); } .homepage-owner-review .library-routes a:hover::after, .homepage-owner-review .library-routes a:focus-visible::after { color: var(--brass-light); opacity: 1; transform: translate(2px, -2px); } .homepage-owner-review .library-routes a b { padding-right: 22px; } /* --- Format strip: five explicit public routes -------------- */ .homepage-owner-review .library-routes { gap: 2px; } .homepage-owner-review .library-routes__label { font-size: 12.5px; letter-spacing: 0.09em; } .homepage-owner-review .library-routes a { min-height: 78px; padding: 16px 18px; } .homepage-owner-review .library-routes a b { font-size: 16px; } .homepage-owner-review .library-routes a small { font-size: 13.5px; } /* --- Dark panels: eyebrow and links were unreadable ----------- The Industries panel uses the plain .eyebrow, whose default is oxide-deep #75402f. On that dark steel photo it measures 1.36:1 - effectively invisible. The same panel's text links inherit ink at 1.63:1. Both move to brass-light at 6.63:1. Applied by surface rather than by adding a modifier class to one element, so every dark panel is covered. */ .homepage-owner-review .field-panel__copy .eyebrow, .homepage-owner-review .svc-method .eyebrow, .homepage-owner-review .svc-proof .eyebrow { color: var(--brass-light); } .homepage-owner-review .field-panel__copy .text-link { color: var(--brass-light); } .homepage-owner-review .field-panel__copy .text-link:hover { color: var(--paper); } /* --- Text links read as actions, not captions ----------------- They were 13px mono with no underline - the smallest thing on the page doing the second-most important job. */ .homepage-owner-review .text-link { min-height: 44px; gap: 12px; font-size: var(--fs-body-sm); letter-spacing: 0.02em; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.32em; transition: text-decoration-color 160ms ease, color 160ms ease; } .homepage-owner-review .text-link:hover, .homepage-owner-review .text-link:focus-visible { text-decoration-color: currentColor; } .homepage-owner-review .field-panel__actions { gap: 10px 30px; } /* The image is 16:9 and the copy column is far taller, so align-items:start left a large void under the picture. Centred against the copy instead. */ .homepage-owner-review .split-feature { align-items: center; } .homepage-owner-review .split-feature__media { align-self: center; } /* --- Field pair and split features -------------------------- */ .homepage-owner-review .field-panel__copy h2 { font-size: clamp(28px, 2.6vw, 42px); } .homepage-owner-review .field-panel__copy p { font-size: var(--fs-body); line-height: 1.6; } .homepage-owner-review .split-feature__copy h2 { font-size: clamp(27px, 2.5vw, 40px); line-height: 1.14; } .homepage-owner-review .split-feature__copy > p { font-size: var(--fs-body); line-height: 1.6; } .homepage-owner-review .guide-links a b { font-size: 16.5px; line-height: 1.34; } .homepage-owner-review .guide-links a span { font-size: 12.5px; letter-spacing: 0.07em; } .homepage-owner-review .conversation-points li { font-size: var(--fs-body-sm); } /* --- Services for manufacturers: the commercial bridge ------ Three faults were visible here. The panel and the five rows read as two unrelated blocks: the column gap ran to 72px and only the panel carried the brass top rule. The rows appeared to float with ~60px of dead space between them - that was not the row gap, which is 8px. The list column stretches to match the panel, its five rows stretched with it, and each link stayed at its own 76px and sat at the top of an over-tall row. And the narrow left column forced the headline onto four lines, which drove the whole section past one screen. Fixed by widening the left column, tightening the column gap, giving the list the same brass top rule, and making each link fill its row so the two columns end level with no floating space. */ .homepage-owner-review .services-showcase { grid-template-columns: minmax(360px, 0.94fr) minmax(0, 1.06fr); gap: clamp(22px, 2.4vw, 38px); } .homepage-owner-review .services-showcase__intro { min-height: 0; padding: clamp(30px, 3.2vw, 46px); } .homepage-owner-review .services-showcase__intro h2 { max-width: 16ch; margin-bottom: 20px; font-size: clamp(30px, 2.9vw, 44px); line-height: 1.08; } .homepage-owner-review .services-showcase__intro > p { font-size: var(--fs-body); line-height: 1.58; } .homepage-owner-review .services-showcase__next { font-size: var(--fs-body-sm); line-height: 1.5; } .homepage-owner-review .service-directory { gap: 8px; align-content: stretch; padding-top: 6px; border-top: 6px solid var(--brass); } .homepage-owner-review .service-directory__item { display: grid; } .homepage-owner-review .service-directory__item a { min-height: 72px; height: 100%; padding: 12px 18px; gap: 16px; transition: background 170ms ease, transform 170ms ease; } .homepage-owner-review .service-directory__item a:hover, .homepage-owner-review .service-directory__item a:focus-visible { transform: translateX(3px); } .homepage-owner-review .service-directory__number { font-size: 13px; letter-spacing: 0.05em; } .homepage-owner-review .service-directory__item b { font-size: 17.5px; line-height: 1.26; } .homepage-owner-review .service-directory__item small { font-size: var(--fs-body-sm); line-height: 1.45; } /* --- $0 review bridge: the terminal action ------------------ */ /* The band was mostly empty: generous block padding plus a 125px column gap around two short blocks, vertically centred, left a large void on the left. Tightened and top-aligned so the two columns read as one statement. */ .homepage-owner-review .investigation-bridge { padding-block: clamp(46px, 5vw, 72px); } .homepage-owner-review .investigation-bridge__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr); gap: clamp(28px, 3.6vw, 64px); align-items: start; } .homepage-owner-review .investigation-bridge h2 { font-size: clamp(28px, 2.7vw, 44px); line-height: 1.12; } .homepage-owner-review .investigation-bridge p { font-size: var(--fs-body); line-height: 1.6; } .homepage-owner-review .investigation-bridge .button { min-height: 58px; margin-top: 26px; padding-inline: 30px; font-size: 16.5px; } /* ============================================================ 7 FOOTER - NEWSLETTER LEGIBILITY ONLY ------------------------------------------------------------ The accepted footer's appearance is protected. Layout, colour, structure and the dispatch image are untouched. Only type sizes that were below a readable floor are raised. ============================================================ */ .homepage-owner-review .news-form > label { font-size: 13.5px; font-weight: 650; letter-spacing: 0.035em; line-height: 1.5; text-transform: none; } .homepage-owner-review .news-form input { height: 52px; font-size: 16px; } .homepage-owner-review .news-form button { height: 52px; padding-inline: 22px; font-size: 14px; letter-spacing: 0.04em; } .homepage-owner-review .news-form__message { min-height: 24px; font-size: 13.5px; } .homepage-owner-review .footer__about, .homepage-owner-review .footer__industries p:not(.footer__heading) { font-size: 15px; line-height: 1.6; } .homepage-owner-review .footer__copy { font-size: 13px; } /* ============================================================ 8 RESPONSIVE ============================================================ */ /* --- Laptop 1181-1320: keep the raised sizes usable ---------- */ @media (max-width: 1320px) { .homepage-owner-review { --fi-masthead-height: 88px; } .homepage-owner-review .brand { font-size: 23px; } .homepage-owner-review .primary-nav { gap: 15px; } .homepage-owner-review .primary-nav > a, .homepage-owner-review .nav-group > summary { font-size: 16px; } .homepage-owner-review .masthead__cta { padding-inline: 15px; font-size: 14px; } /* 2026-09-07: same split as the wide-desktop rule. Both states were pinned to one 820px width here too, so stage 1 stayed oversized below 1320px. Stage 1 now carries only its 306px rail (plus the panel border); stage 2 keeps the established 820px and the identical 306px first column, so opening it grows the panel rightward without moving the rail. */ .homepage-owner-review .nav-group__panel--library { width: min(308px, calc(100vw - 32px)); grid-template-columns: minmax(0, 1fr); } .homepage-owner-review .nav-group--library.is-blog-open .nav-group__panel--library { width: min(820px, calc(100vw - 32px)); grid-template-columns: 306px minmax(0, 1fr); } } /* --- Narrow desktop 1181-1300 ------------------------------- The horizontal bar still applies here, but the raised navigation type needs more room than this width has: at 1210px the last link overflowed its own flex track by 28px and ran underneath the language pills. Tighten the gaps and trim the CTA rather than shrinking the labels back below the readable floor. */ @media (min-width: 1181px) and (max-width: 1300px) { .homepage-owner-review .masthead__inner { gap: 16px; } .homepage-owner-review .brand { gap: 10px; padding-right: 14px; font-size: 21px; } .homepage-owner-review .site-menu { gap: 14px; } .homepage-owner-review .primary-nav { flex: 0 1 auto; gap: 12px; } .homepage-owner-review .primary-nav > a, .homepage-owner-review .nav-group > summary { font-size: 15.5px; } .homepage-owner-review .nav-group > summary::after { margin-left: 5px; } .homepage-owner-review .masthead__utilities { gap: 10px; } .homepage-owner-review .language-nav a { min-width: 34px; font-size: 12.5px; } .homepage-owner-review .masthead__cta { padding: 11px 14px; font-size: 13.5px; } } /* --- Short laptop: viewports that are wide but not tall ------ A 1366x768 or 1440x800 screen loses the whole first screen to a tall sticky masthead and a hero sized for a desktop monitor. --- */ @media (min-width: 901px) and (max-height: 860px) { .homepage-owner-review { --fi-masthead-height: 74px; --fi-stack: clamp(46px, 5vw, 68px); } .homepage-owner-review .brand { font-size: 21px; } .homepage-owner-review .masthead__cta { min-height: 44px; padding: 10px 16px; font-size: 14px; } .homepage-owner-review .language-nav a { min-height: 34px; } .homepage-owner-review .hero { min-height: calc(100svh - var(--fi-masthead-height)); } .homepage-owner-review .hero__grid { padding-block: 36px; } /* The H1 keeps its full accepted scale, clamp(56px, 6vw, 88px), at every width. Vertical room on a short laptop is reclaimed from the masthead and the surrounding spacing instead - never from the headline. */ .homepage-owner-review .hero__lede { font-size: 17px; } .homepage-owner-review .hero h1 { margin-bottom: 20px; } .homepage-owner-review .action-row { margin-top: 22px; } .homepage-owner-review .hero-note { margin-top: 22px; } .homepage-owner-review .nav-group__panel { max-height: calc(100svh - var(--fi-masthead-height) - 32px); overflow-y: auto; } } /* --- Tablet and below: the menu becomes a stacked sheet ------ */ @media (max-width: 1180px) { .homepage-owner-review { --fi-masthead-height: 82px; } .homepage-owner-review .primary-nav > a, .homepage-owner-review .nav-group > summary { min-height: 54px; font-size: 17.5px; } /* Both Library stages stack; stage 2 is disclosed under its own row instead of being squeezed into a second column. */ .homepage-owner-review .nav-group__panel--library, .homepage-owner-review .nav-group--library.is-blog-open .nav-group__panel--library { width: 100%; grid-template-columns: minmax(0, 1fr); } .homepage-owner-review .nav-library__rail { padding: 18px 0; } /* In the stacked sheet the rail loses its padding, so the panel kickers must carry their own or they sit 12px left of every row they label. */ .homepage-owner-review .nav-group__panel .nav-panel__kicker { padding-inline: 12px; } .homepage-owner-review .nav-library__topics { padding: 20px 0 22px; border-top: 1px solid color-mix(in srgb, var(--nav-ink) 16%, transparent); border-left: 0; background: transparent; } .homepage-owner-review .nav-library__topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .homepage-owner-review .nav-group__panel--services { padding: 18px 0; transform: none; } .homepage-owner-review .nav-service-row { grid-template-columns: 34px minmax(0, 1fr) 20px; row-gap: 4px; } .homepage-owner-review .nav-service-row small { grid-column: 2; } .homepage-owner-review .services-showcase { grid-template-columns: minmax(0, 1fr); } .homepage-owner-review .service-directory { padding-top: 0; border-top: 0; } .homepage-owner-review .home-dispatch__grid { grid-template-columns: minmax(0, 1fr); } .homepage-owner-review .services-showcase__intro h2 { max-width: 20ch; } .homepage-owner-review .masthead__cta { width: 100%; } .homepage-owner-review .masthead__utilities { flex-wrap: wrap; } } /* --- Mobile ------------------------------------------------- */ @media (max-width: 900px) { .homepage-owner-review { --fi-masthead-height: 72px; --fi-stack: clamp(48px, 9vw, 66px); } .homepage-owner-review .brand { font-size: 20px; } .homepage-owner-review .hero__lede { font-size: 17px; } .homepage-owner-review .action-row { flex-direction: column; align-items: stretch; gap: 16px; } .homepage-owner-review .hero .button--brass { width: 100%; } .homepage-owner-review .hero .text-link { justify-content: flex-start; } .homepage-owner-review .library-routes a { min-height: 68px; } .homepage-owner-review .investigation-bridge .button { width: 100%; } } @media (max-width: 640px) { .homepage-owner-review .nav-library__topic-grid { grid-template-columns: minmax(0, 1fr); } /* The badge is the clearest signal that Blog opens a second stage. It stays on small screens, on its own line, rather than being dropped. */ .homepage-owner-review .nav-library__blog-trigger strong::after { display: inline-block; margin: 6px 0 0; vertical-align: baseline; } .homepage-owner-review .desk-grid { grid-template-columns: minmax(0, 1fr); } .homepage-owner-review .desk h3 br, .homepage-owner-review .section-intro h2 br, .homepage-owner-review .section-heading h2 br, .homepage-owner-review .field-panel__copy h2 br { display: none; } .homepage-owner-review .library-search input, .homepage-owner-review .library-search button { min-height: 54px; } .homepage-owner-review .service-directory__item a { min-height: 0; padding: 14px; } } @media (max-width: 420px) { .homepage-owner-review .menu-toggle { min-width: 84px; font-size: 12.5px; } .homepage-owner-review .brand { font-size: 18.5px; } .homepage-owner-review .service-directory__item b { font-size: 16.5px; } } @media (prefers-reduced-motion: reduce) { .homepage-owner-review .masthead, .homepage-owner-review .nav-library__blog-trigger > span:last-child { transition: none; } } /* ============================================================ CONTRAST SWEEP 2026-08-30 ------------------------------------------------------------ Text-colour only. Measured before and after; nothing else moves. ============================================================ */ /* Brass-light on deep steel sat at 4.44:1 against a 4.5 minimum - close enough to read as fine and still a failure. Lifted to 4.65:1. */ .homepage-owner-review .desk--deep-steel .desk__number, .homepage-owner-review .services-showcase__intro .eyebrow--light, .homepage-owner-review .field-panel--steel .eyebrow, .homepage-owner-review .field-panel--steel .text-link, .homepage-owner-review .field-panel--steel .text-link span { color: #f0c078; } /* The homepage services directory carries the same route tones as the nav, and had the same problem: the number and arrow were unreadable on the brass and clay rows. Same two replacements as the dropdown, so the two stay in step. */ .homepage-owner-review .service-directory__item--brass { --service-tone: #855420; } .homepage-owner-review .service-directory__item--clay { --service-tone: var(--oxide-deep); } /* Conversations panel: the eyebrow and body copy sit on clay. */ .homepage-owner-review .conversations .split-feature__copy .eyebrow--light { color: #f7e3d8; } .homepage-owner-review .conversations .split-feature__copy > p:not(.eyebrow) { color: #f6e8e2; } /* The investigation bridge eyebrow is dark oxide on mid brass. */ .homepage-owner-review .investigation-bridge .eyebrow { color: #50281e; } /* ---- content-page-2026-08-30.css ------------------------------- */ /* * Factory Investigator - shared content-page layer, 30 August 2026. * * Covers the nine pages that are neither the homepage, the services hub, nor a * service page: the investigation request, the completed self-audit, About, * Editorial Policy, Write for Us, Contact, the Industries directory, Privacy and * Terms. * * Every one of them carries its live copy unchanged. This layer only maps the * page's own existing components onto the shared type scale and the locked * palette, and gives each page an accent so the site does not read as one * template repeated nine times. * * Loads after styles.css, colour-lab.css, palette-locked.css and the shared * home-revision layer. */ /* ============================================================ 1 PAGE TONE ------------------------------------------------------------ Each page carries one accent from the approved palette, set on . The five service pages already do this; extending it here is what stops the remaining nine from feeling like the same page with different words. ============================================================ */ .page-tone-clay { --pg-accent: #98533d; --pg-accent-deep: #75402f; } .page-tone-steel { --pg-accent: #355762; --pg-accent-deep: #24404a; } .page-tone-umber { --pg-accent: #6b5136; --pg-accent-deep: #4f3b26; } .page-tone-sage { --pg-accent: #4f624a; --pg-accent-deep: #3a4936; } .page-tone-brass { --pg-accent: #8a5a22; --pg-accent-deep: #6a4419; } .page-tone-graphite{ --pg-accent: #4a4640; --pg-accent-deep: #332f2a; } .fi-content-page { --pg-wash: color-mix(in srgb, var(--pg-accent) 9%, var(--paper)); --pg-edge: color-mix(in srgb, var(--pg-accent) 26%, transparent); } /* ============================================================ 2 PAGE SHELL ============================================================ */ .fi-content-page main { background: var(--paper); color: var(--ink); } .fi-content-page .fi-static-page, .fi-content-page .fi-legal-page, .fi-content-page .fi-contact-page, .fi-content-page .fi-service-page, .fi-content-page .fi-self-audit { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); padding-block-end: clamp(64px, 8vw, 112px); } /* Reading measure. Policy, legal and About pages are read top to bottom, so their body copy is held to a comfortable line length rather than the full 1180px shell. Grids and cards opt out below. */ .fi-content-page .fi-static-page > p, .fi-content-page .fi-static-page > ul, .fi-content-page .fi-static-page > ol, .fi-content-page .fi-legal-page > p, .fi-content-page .fi-legal-page > ul, .fi-content-page .fi-legal-page > ol, .fi-content-page .fi-audit-section > p, .fi-content-page .fi-audit-section > ul, .fi-content-page .fi-audit-section > ol { max-width: 68ch; } /* ============================================================ 3 HERO ------------------------------------------------------------ Two modes, and the difference is deliberate. A conversion or directory page earns a hero that fills the first screen - the reader is deciding whether to continue, so the promise and the action should be the whole view. A policy, legal or contributor page does not. Its reader arrived to check a specific clause, and a full-screen hero puts a scroll between them and the answer. The standard's page-type priorities call for precision and readability there, so the hero stays compact. ============================================================ */ .fi-content-page .fi-page-hero, .fi-content-page .fi-self-audit__hero { position: relative; padding-block: clamp(30px, 3.4vw, 52px); border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); margin-block-end: clamp(34px, 4vw, 60px); } .fi-hero-fill .fi-page-hero, .fi-hero-fill .fi-self-audit__hero { display: grid; align-content: center; min-height: calc(100svh - var(--fi-masthead-height)); } .fi-hero-compact .fi-page-hero, .fi-hero-compact .fi-legal-page > .fi-page-kicker { min-height: 0; } /* A fill hero is a grid, and a grid item is blockified - so the kicker pill, which is inline-block everywhere else, stretches to the full column width. Only the kicker needs to shrink to its text; the heading and lede keep their own max-width. */ .fi-hero-fill .fi-page-hero > .fi-page-kicker, .fi-hero-fill .fi-self-audit__hero > .fi-page-kicker { justify-self: start; } /* The kicker sits above the H1 on every page type and is the first thing that tells a reader which kind of page they are on, so it takes the page accent. */ .fi-content-page .fi-page-kicker { display: inline-block; margin: 0 0 14px; font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pg-accent-deep); padding: 7px 13px; border: 1px solid var(--pg-edge); border-radius: 999px; background: var(--pg-wash); } .fi-content-page main h1 { font-family: var(--serif); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 18px; max-width: 20ch; text-wrap: balance; } .fi-content-page .fi-page-hero > p:not(.fi-page-kicker), .fi-content-page .fi-self-audit__lead { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-soft); max-width: 62ch; margin: 0 0 16px; } /* ============================================================ 4 TYPE - every size resolves to a shared token ============================================================ */ .fi-content-page main h2 { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.01em; margin: clamp(38px, 4vw, 58px) 0 14px; max-width: 26ch; text-wrap: balance; } .fi-content-page main h3 { font-size: var(--fs-h3); line-height: 1.22; margin: 26px 0 10px; } .fi-content-page main p, .fi-content-page main li { font-size: var(--fs-body); line-height: 1.62; } .fi-content-page .fi-form-consent, .fi-content-page .fi-self-audit__disclosure, .fi-content-page .fi-legal-updated, .fi-content-page .fi-updated { font-size: var(--fs-body-sm); line-height: 1.5; } /* Section labels. Nothing anywhere on these pages sits below the micro floor. */ .fi-content-page .cat { display: block; font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--pg-accent-deep); margin: 0 0 8px; } .fi-content-page main ul, .fi-content-page main ol { padding-left: 1.15em; } .fi-content-page main li { margin-block: 7px; } .fi-content-page main li::marker { color: var(--pg-accent); } .fi-content-page main a:not(.btn):not(.fi-page-kicker):not(.fi-mlc-home__action) { color: var(--pg-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, var(--pg-accent-deep) 42%, transparent); } .fi-content-page main a:not(.btn):not(.fi-mlc-home__action):hover { text-decoration-color: currentColor; } /* ============================================================ 5 STAT STRIP - 20 checks / 3 priorities / $0 ------------------------------------------------------------ These three numbers are the offer. They are the most load-bearing content on the investigation page, so they get the most contrast on it. ============================================================ */ .fi-content-page .stat-strip, .fi-content-page .fi-audit-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 12px; overflow: hidden; margin-block: clamp(24px, 3vw, 38px); } .fi-content-page .stat, .fi-content-page .fi-audit-meta > div { background: var(--paper-high); padding: 22px 24px; display: grid; gap: 5px; align-content: center; } .fi-content-page .stat__num, .fi-content-page .fi-audit-meta strong { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 46px); line-height: 1; font-weight: 600; color: var(--pg-accent-deep); font-variant-numeric: tabular-nums; } .fi-content-page .stat__label, .fi-content-page .fi-audit-meta span { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); } /* ============================================================ 6 CARDS ============================================================ */ .fi-content-page .fi-info-card, .fi-content-page .fi-status-card, .fi-content-page .fi-service-card { background: var(--paper-high); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-left: 4px solid var(--pg-accent); border-radius: 10px; padding: 22px 24px; } .fi-content-page .fi-info-card h2, .fi-content-page .fi-service-card h3 { margin-top: 0; } .fi-content-page .fi-info-card h2 { font-size: var(--fs-h3); max-width: none; } .fi-content-page .fi-info-card + .fi-info-card { margin-top: 18px; } /* The proof callout is the only element on the investigation page that offers evidence before the form, so it is given the page's strongest surface. */ .fi-content-page .fi-proof-callout { background: var(--pg-wash); border: 1px solid var(--pg-edge); border-radius: 12px; padding: clamp(22px, 2.6vw, 32px); margin-block: clamp(24px, 3vw, 36px); } .fi-content-page .fi-proof-callout h2 { margin-top: 4px; font-size: var(--fs-h3); } .fi-content-page .fi-proof-callout > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--fs-body-sm); } /* ============================================================ 7 FORMS ============================================================ */ .fi-content-page .fi-contact-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; } .fi-content-page .fi-form-card { background: var(--paper-high); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-top: 4px solid var(--pg-accent); border-radius: 12px; padding: clamp(24px, 2.8vw, 36px); } .fi-content-page .fi-form-card h2 { margin-top: 0; font-size: var(--fs-h3); } .fi-content-page .fi-form-group { display: grid; gap: 7px; margin-block: 18px; } .fi-content-page .fi-form-group label { font-size: var(--fs-body-sm); font-weight: 700; color: var(--ink); } .fi-content-page main input[type="text"], .fi-content-page main input[type="email"], .fi-content-page main input[type="url"], .fi-content-page main select, .fi-content-page main textarea { font: inherit; font-size: var(--fs-body-sm); color: var(--ink); background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 8px; padding: 13px 14px; min-height: 50px; width: 100%; } .fi-content-page main textarea { min-height: 128px; resize: vertical; } .fi-content-page main input:focus-visible, .fi-content-page main select:focus-visible, .fi-content-page main textarea:focus-visible { outline: 3px solid var(--pg-accent); outline-offset: 2px; border-color: var(--pg-accent); } .fi-content-page .fi-form-consent { color: var(--ink-soft); margin-block: 18px 16px; max-width: 60ch; } .fi-content-page .fi-form-submit { width: 100%; } /* Preview-only notice. These previews are standalone local files; the form cannot and must not reach production, and the reader of the preview needs to know that the field set is real but the submission is inert. */ /* ============================================================ 8 LEGAL AND POLICY PAGES ============================================================ */ .fi-content-page .fi-legal-updated, .fi-content-page .fi-updated { display: inline-block; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 999px; margin-block-end: 18px; } .fi-content-page .fi-legal-toc { background: var(--paper-high); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-left: 4px solid var(--pg-accent); border-radius: 10px; padding: 20px 24px; margin-block: clamp(24px, 3vw, 36px); max-width: 68ch; } .fi-content-page .fi-legal-toc strong { display: block; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.13em; text-transform: uppercase; color: var(--pg-accent-deep); margin-block-end: 10px; } .fi-content-page .fi-legal-toc ol { margin: 0; } .fi-content-page .fi-legal-toc li { margin-block: 5px; font-size: var(--fs-body-sm); } /* A legal heading is a landmark a reader jumps to, so it gets a visible anchor rule rather than relying on size alone. */ .fi-content-page .fi-legal-page h2 { padding-top: 14px; border-top: 2px solid var(--pg-edge); max-width: none; } .fi-content-page .fi-signature { margin-block-start: clamp(38px, 4vw, 56px); padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: var(--fs-body-sm); color: var(--ink-soft); } /* ============================================================ 9 DIRECTORY - Industries ============================================================ */ .fi-content-page .fi-service-section { margin-block: clamp(34px, 4vw, 54px); } .fi-content-page .fi-service-section__head { border-bottom: 2px solid var(--pg-edge); padding-block-end: 10px; margin-block-end: 18px; } .fi-content-page .fi-service-section__head .cat { margin: 0; font-size: var(--fs-meta); } .fi-content-page .fi-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; } .fi-content-page .fi-service-card { transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease; } .fi-content-page .fi-service-card:hover, .fi-content-page .fi-service-card:focus-within { transform: translateY(-2px); border-color: var(--pg-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 12%, transparent); } .fi-content-page .fi-service-card h3 { font-size: var(--fs-body); margin: 0 0 6px; } .fi-content-page .fi-service-card h3 a { text-decoration: none; } /* The whole card is the target, not just the four words of the link. */ .fi-content-page .fi-service-card h3 a::after { content: ""; position: absolute; inset: 0; } .fi-content-page .fi-service-card { position: relative; } .fi-content-page .fi-service-card p { font-size: var(--fs-body-sm); color: var(--ink-soft); margin: 0; } /* ============================================================ 10 SELF-AUDIT PROOF PAGE ============================================================ */ .fi-content-page .fi-self-audit__hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-block-start: 24px; } .fi-content-page .fi-self-audit__disclosure { color: var(--ink-soft); border-left: 3px solid var(--pg-accent); padding-left: 14px; max-width: 58ch; } /* The hero media is a WordPress attachment that does not exist in a standalone preview. Collapse it rather than leaving a blank panel in the hero. */ .fi-content-page .fi-self-audit__hero-media:empty { display: none; } .fi-content-page .fi-audit-section { margin-block: clamp(38px, 4.4vw, 62px); scroll-margin-top: calc(var(--fi-masthead-height) + 20px); } .fi-content-page .fi-audit-section h2 { max-width: 30ch; } .fi-content-page .fi-priority { background: var(--paper-high); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-left: 4px solid var(--pg-accent); border-radius: 10px; padding: 20px 24px; margin-block: 14px; } .fi-content-page .fi-checklist { list-style: none; padding-left: 0; } .fi-content-page .fi-checklist li { position: relative; padding-left: 26px; font-size: var(--fs-body-sm); } .fi-content-page .fi-checklist li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 13px; height: 3px; background: var(--pg-accent); border-radius: 2px; } /* ============================================================ 11 ACTIONS - the same three tiers as every other page ============================================================ */ .fi-content-page .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding-inline: 28px; border-radius: 9px; font-size: var(--fs-body-sm); font-weight: 700; letter-spacing: 0.01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background 170ms ease, transform 170ms ease, box-shadow 170ms ease; } .fi-content-page .btn--primary { background: var(--pg-accent-deep); color: var(--paper-high); } .fi-content-page .btn--primary:hover { background: var(--pg-accent); transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--pg-accent-deep) 32%, transparent); } .fi-content-page .btn--secondary { background: transparent; color: var(--pg-accent-deep); border-color: var(--pg-accent); } /* 2026-09-07: this rule replaced the legacy brass hover background but left the legacy `color: var(--paper)` in place, so the label went cream on a near-white wash at 1.12:1 and vanished. Carrying the button's own accent through the hover. */ .fi-content-page .btn--secondary:hover { background: var(--pg-wash); transform: translateY(-1px); color: var(--pg-accent-deep); } .fi-content-page .btn--block { width: 100%; } .fi-content-page .btn--on-dark { background: var(--paper-high); color: var(--ink); } .fi-content-page .fi-self-audit__hero-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--fs-body-sm); } .fi-content-page .btn:focus-visible, .fi-content-page main a:focus-visible { outline: 3px solid var(--pg-accent-deep); outline-offset: 3px; } /* ============================================================ 12 RESPONSIVE ============================================================ */ /* Short laptop. The full-screen hero is the first thing to give way - a 720px viewport with a 92px masthead leaves too little for a hero that insists on the whole remainder. */ @media (min-width: 901px) and (max-height: 800px) { .fi-hero-fill .fi-page-hero, .fi-hero-fill .fi-self-audit__hero { min-height: 0; padding-block: clamp(34px, 4vw, 56px); } } @media (max-width: 1000px) { .fi-content-page .fi-contact-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .fi-hero-fill .fi-page-hero, .fi-hero-fill .fi-self-audit__hero { min-height: 0; padding-block: clamp(30px, 7vw, 48px); } .fi-content-page main h1 { max-width: none; } .fi-content-page main h2 { max-width: none; } .fi-content-page .btn { width: 100%; } .fi-content-page .fi-self-audit__hero-actions { align-items: stretch; } } @media (max-width: 560px) { .fi-content-page .stat-strip, .fi-content-page .fi-audit-meta { grid-template-columns: minmax(0, 1fr); } .fi-content-page .fi-service-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .fi-content-page * { transition: none !important; } } /* ============================================================ 13 IMAGES ------------------------------------------------------------ Five images on these pages are WordPress attachments that live only in production. A standalone preview must not reach out to the live site for them, so the builder strips src and srcset and records the filename. An with no src renders its own alt text, which is what we want here: the evidence description survives, the frame shows exactly where the capture sits, and nothing is fabricated to fill the hole. ============================================================ */ .fi-content-page main figure { margin: 0; } .fi-content-page main figcaption { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-soft); margin-top: 10px; } .fi-content-page main figcaption strong { color: var(--ink); } .fi-content-page main img { max-width: 100%; height: auto; } .fi-content-page img[data-preview-asset] { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 190px; padding: 26px; box-sizing: border-box; border: 2px dashed color-mix(in srgb, var(--pg-accent) 46%, transparent); border-radius: 10px; background: var(--pg-wash); font-family: var(--mono); font-size: var(--fs-micro); line-height: 1.65; letter-spacing: 0.02em; color: var(--pg-accent-deep); text-align: center; } .fi-content-page .fi-audit-captures { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 26px); margin-block: clamp(24px, 3vw, 36px); } /* 2026-09-07: a legacy rule from the previous design still sets this figure to `display: grid` with `minmax(240px,380px) minmax(220px,1fr)` columns - at least 460px - inside this 300px float card, so the caption escaped the card and ran 23px past the viewport on About. The migrated card is a simple block. */ .fi-content-page .fi-investigator-portrait { display: block; float: right; width: min(300px, 38%); margin: 6px 0 20px 30px; padding: 16px; background: var(--paper-high); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-radius: 12px; } .fi-content-page .fi-investigator-portrait img[data-preview-asset] { min-height: 250px; } /* ============================================================ 14 SELF-AUDIT COMPONENTS ============================================================ */ .fi-content-page .fi-self-audit__hero-copy { max-width: 74ch; } /* The 20 checks. A plain list of twenty items reads as a wall, so each check leads with its own bold subject and keeps its number visible alongside. */ .fi-content-page .fi-audit-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px 26px; counter-reset: chk; list-style: none; padding-left: 0; } .fi-content-page .fi-audit-checks li { counter-increment: chk; position: relative; padding: 11px 0 11px 44px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); font-size: var(--fs-body-sm); line-height: 1.5; } .fi-content-page .fi-audit-checks li::before { content: counter(chk, decimal-leading-zero); position: absolute; left: 0; top: 12px; font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; color: var(--pg-accent); } .fi-content-page .fi-audit-checks strong { display: block; color: var(--ink); } /* The three priorities are the deliverable, so they carry more weight than anything else on the page. */ .fi-content-page .fi-priorities { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-block: clamp(22px, 2.6vw, 32px); } .fi-content-page .fi-priority { margin: 0; padding: 24px; } .fi-content-page .fi-priority b { display: block; font-family: var(--mono); font-size: var(--fs-h3); font-weight: 700; line-height: 1; color: var(--pg-accent); margin-bottom: 10px; } .fi-content-page .fi-priority h3 { margin: 0 0 8px; font-size: var(--fs-body); } .fi-content-page .fi-priority p { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-soft); } .fi-content-page .fi-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 16px; margin-block: clamp(22px, 2.6vw, 32px); } .fi-content-page .fi-status-grid > article { background: var(--paper-high); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-top: 4px solid var(--pg-accent); border-radius: 10px; padding: 22px 24px; } .fi-content-page .fi-status-grid h3 { margin-top: 0; font-size: var(--fs-body); } .fi-content-page .fi-status-grid li { font-size: var(--fs-body-sm); } .fi-content-page .fi-audit-output { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 4px 26px; list-style: none; padding-left: 0; } .fi-content-page .fi-audit-output li { position: relative; padding: 9px 0 9px 26px; font-size: var(--fs-body-sm); } .fi-content-page .fi-audit-output li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 13px; height: 3px; border-radius: 2px; background: var(--pg-accent); } /* What the sample cannot prove. This is the one real qualification on the page, and the standard puts a qualification beside the claim it limits, stated plainly and once - so it gets its own visible block, not a footnote. */ .fi-content-page .fi-audit-limitations { background: color-mix(in srgb, var(--ink) 5%, var(--paper-high)); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-left: 4px solid var(--ink-soft); border-radius: 10px; padding: clamp(22px, 2.6vw, 32px); margin-block: clamp(26px, 3vw, 40px); } .fi-content-page .fi-audit-limitations h2 { margin-top: 6px; font-size: var(--fs-h3); } .fi-content-page .fi-audit-limitations .cat { color: var(--ink-soft); } .fi-content-page .fi-audit-limitations p { max-width: 68ch; } /* Closing action band, dark, so the last thing on the page is unmistakable. */ .fi-content-page .fi-self-audit__cta { background: var(--pg-accent-deep); color: var(--paper-high); border-radius: 14px; padding: clamp(30px, 3.6vw, 52px); margin-block-start: clamp(38px, 4.4vw, 62px); display: grid; gap: 20px; justify-items: start; } .fi-content-page .fi-self-audit__cta h2 { color: var(--paper-high); margin: 4px 0 8px; } .fi-content-page .fi-self-audit__cta p { color: color-mix(in srgb, var(--paper-high) 84%, transparent); } .fi-content-page .fi-self-audit__cta .cat { color: color-mix(in srgb, var(--paper-high) 76%, transparent); } .fi-content-page .fi-self-audit__cta > a { background: var(--paper-high); color: var(--pg-accent-deep); display: inline-flex; align-items: center; min-height: 56px; padding-inline: 28px; border-radius: 9px; font-weight: 700; font-size: var(--fs-body-sm); text-decoration: none; } .fi-content-page .fi-self-audit__cta > a:hover { transform: translateY(-1px); } /* ============================================================ 15 REMAINING COMPONENTS ============================================================ */ /* Write for Us pull box - the fastest read of what a good pitch contains. */ .fi-content-page .summary { background: var(--pg-wash); border: 1px solid var(--pg-edge); border-radius: 12px; padding: clamp(20px, 2.4vw, 28px); margin-block: clamp(22px, 2.6vw, 32px); max-width: 72ch; } .fi-content-page .summary__label { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--pg-accent-deep); margin: 0 0 10px; } .fi-content-page .summary ul { margin: 0; } .fi-content-page .summary li { font-size: var(--fs-body-sm); } .fi-content-page .fi-contact-sidebar { display: grid; gap: 18px; } @media (min-width: 1001px) { .fi-content-page .fi-contact-sidebar { position: sticky; top: calc(var(--fi-masthead-height) + 20px); } } @media (max-width: 700px) { .fi-content-page .fi-investigator-portrait { float: none; width: auto; margin: 20px 0; } } /* ============================================================ 16 CLOSING BAND - Industries ------------------------------------------------------------ The markup already assumes a dark band here: it carries btn--on-dark and an inline color:var(--paper) on its link. Without the band those render near-white on cream and disappear, so the band is what makes the existing markup correct. ============================================================ */ .fi-content-page .fi-service-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; background: var(--pg-accent-deep); color: var(--paper-high); border-radius: 14px; padding: clamp(28px, 3.4vw, 48px); margin-block-start: clamp(38px, 4.4vw, 62px); } .fi-content-page .fi-service-cta h2 { color: var(--paper-high); margin: 0 0 10px; font-size: var(--fs-h2); max-width: 22ch; } .fi-content-page .fi-service-cta p { color: color-mix(in srgb, var(--paper-high) 86%, transparent); margin: 0; max-width: 64ch; } /* The inline color:var(--paper) on this link is correct once the band is dark; it just needs an underline that survives against the deep ground. */ .fi-content-page .fi-service-cta a:not(.btn) { color: var(--paper-high); text-decoration-color: color-mix(in srgb, var(--paper-high) 55%, transparent); } .fi-content-page .fi-service-cta .btn--on-dark { background: var(--paper-high); color: var(--pg-accent-deep); white-space: nowrap; } .fi-content-page .fi-service-cta .btn--on-dark:hover { background: #fff; transform: translateY(-1px); } @media (max-width: 820px) { .fi-content-page .fi-service-cta { grid-template-columns: minmax(0, 1fr); } .fi-content-page .fi-service-cta h2 { max-width: none; } } /* ============================================================ 17 TARGET SIZES ------------------------------------------------------------ A standalone link inside a card is a real destination and needs a real target, not the 22px its text happens to occupy. ============================================================ */ .fi-content-page .fi-info-card > a:not(.btn), .fi-content-page .fi-status-card > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--fs-body-sm); } /* Directory cards: the card is the target, so the link stretches over it and the focus ring is drawn on the card rather than on four words of text. */ .fi-content-page .fi-service-card:focus-within { outline: 3px solid var(--pg-accent-deep); outline-offset: 3px; } .fi-content-page .fi-service-card h3 a:focus-visible { outline: none; } .fi-content-page .fi-service-card h3 a { display: inline-flex; align-items: center; min-height: 30px; } /* ============================================================ 18 EVIDENCE-DESK HUBS - Investigations, Interviews ------------------------------------------------------------ Both hubs run the same spine: a lede, a standards grid, a current case file, a numbered process, and an invitation. They differ by accent and by whether the process is a list or a grid. ============================================================ */ .fi-content-page .fi-hub-lede { max-width: 74ch; } .fi-content-page .fi-hub-lede .lede, .fi-content-page .fi-hub-page .lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-soft); max-width: 66ch; } /* The standards grid is the hub's evidence for its own claim to rigour, so it reads as a set of parallel commitments rather than prose. */ .fi-content-page .fi-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-block: clamp(26px, 3vw, 40px); } .fi-content-page .fi-proof-grid > article { background: var(--paper-high); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-top: 4px solid var(--pg-accent); border-radius: 10px; padding: 22px 24px; } .fi-content-page .fi-proof-grid h3 { margin: 6px 0 8px; font-size: var(--fs-body); } .fi-content-page .fi-proof-grid p { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-soft); } .fi-content-page .fi-proof-grid .cat { display: block; } /* The case file is the one live piece of work on the page, so it gets the strongest surface and the primary action. */ .fi-content-page .fi-casefile-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; background: var(--pg-wash); border: 1px solid var(--pg-edge); border-left: 5px solid var(--pg-accent); border-radius: 12px; padding: clamp(24px, 3vw, 38px); margin-block: clamp(26px, 3vw, 40px); } .fi-content-page .fi-casefile-card h2 { margin: 6px 0 10px; font-size: var(--fs-h3); max-width: 28ch; } .fi-content-page .fi-casefile-card p { max-width: 62ch; } .fi-content-page .fi-casefile-card .meta { font-size: var(--fs-body-sm); color: var(--ink-soft); } .fi-content-page .fi-evidence-list { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-block-start: 14px; } .fi-content-page .fi-evidence-list li { margin: 0; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.05em; text-transform: uppercase; color: var(--pg-accent-deep); background: var(--paper-high); border: 1px solid var(--pg-edge); border-radius: 999px; padding: 7px 13px; } .fi-content-page .fi-hub-section { margin-block: clamp(34px, 4vw, 54px); } /* Numbered process. The list and the grid variants share one look so the two hubs stay recognisably the same publication. */ .fi-content-page .fi-process-list, .fi-content-page .fi-conversation-grid { list-style: none; padding-left: 0; display: grid; gap: 14px; margin-block-start: 18px; } .fi-content-page .fi-conversation-grid { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); } .fi-content-page .fi-process-list > li, .fi-content-page .fi-conversation-grid > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start; background: var(--paper-high); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 10px; padding: 20px 22px; margin: 0; } .fi-content-page .fi-conversation-grid > div { grid-template-columns: minmax(0, 1fr); } .fi-content-page .fi-process-list > li > span, .fi-content-page .fi-conversation-grid > div > span { font-family: var(--mono); font-size: var(--fs-h3); font-weight: 700; line-height: 1; color: var(--pg-accent); } .fi-content-page .fi-process-list h3, .fi-content-page .fi-conversation-grid h3 { margin: 0 0 6px; font-size: var(--fs-body); } .fi-content-page .fi-process-list p, .fi-content-page .fi-conversation-grid p { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-soft); } .fi-content-page .fi-hub-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; background: var(--pg-accent-deep); color: var(--paper-high); border-radius: 14px; padding: clamp(28px, 3.4vw, 48px); margin-block-start: clamp(38px, 4.4vw, 62px); } .fi-content-page .fi-hub-cta h2 { color: var(--paper-high); margin: 6px 0 10px; max-width: 24ch; } .fi-content-page .fi-hub-cta p { color: color-mix(in srgb, var(--paper-high) 86%, transparent); margin: 0; max-width: 64ch; } .fi-content-page .fi-hub-cta .fi-page-kicker { color: var(--paper-high); background: color-mix(in srgb, var(--paper-high) 16%, transparent); border-color: color-mix(in srgb, var(--paper-high) 34%, transparent); } .fi-content-page .fi-hub-cta .btn--secondary { background: var(--paper-high); color: var(--pg-accent-deep); border-color: var(--paper-high); white-space: nowrap; } .fi-content-page .fi-hub-cta .btn--secondary:hover { background: #fff; color: var(--pg-accent-deep); } @media (max-width: 820px) { .fi-content-page .fi-casefile-card, .fi-content-page .fi-hub-cta { grid-template-columns: minmax(0, 1fr); } .fi-content-page .fi-casefile-card h2, .fi-content-page .fi-hub-cta h2 { max-width: none; } } /* ============================================================ 19 LANGUAGE LAUNCHPADS - /de/ and /ja/ ------------------------------------------------------------ Both editions are in preparation. The page has one job: say plainly what is coming, that it is not a translation, and give the reader a way back to the edition that exists today. It carries noindex,follow and no hreflang, which is set in the head and must not be changed here. ============================================================ */ .fi-content-page .fi-mlc-home { padding-block: clamp(40px, 6vw, 88px); min-height: calc(100svh - var(--fi-masthead-height)); display: grid; align-content: center; } .fi-content-page .fi-mlc-home__inner { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "copy aside" "details aside"; gap: clamp(22px, 3vw, 44px); align-items: start; } .fi-content-page .fi-mlc-home__copy { grid-area: copy; } .fi-content-page .fi-mlc-home__details { grid-area: details; } .fi-content-page .fi-mlc-home__aside { grid-area: aside; } .fi-content-page .fi-mlc-home__kicker { display: inline-block; font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em; color: var(--pg-accent-deep); background: var(--pg-wash); border: 1px solid var(--pg-edge); border-radius: 999px; padding: 7px 13px; margin: 0 0 12px; } .fi-content-page .fi-mlc-home__status, .fi-content-page .fi-mlc-home__eyebrow { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; } .fi-content-page .fi-mlc-home__title { font-family: var(--serif); font-size: var(--fs-h1); line-height: 1.05; margin: 0 0 16px; max-width: 18ch; } .fi-content-page .fi-mlc-home__lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; margin: 0 0 14px; } .fi-content-page .fi-mlc-home__details { display: grid; gap: 1px; background: color-mix(in srgb, var(--ink) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-radius: 12px; overflow: hidden; } .fi-content-page .fi-mlc-home__detail { background: var(--paper-high); padding: 15px 20px; font-size: var(--fs-body-sm); line-height: 1.45; } .fi-content-page .fi-mlc-home__detail strong { font-weight: 600; color: var(--ink); } .fi-content-page .fi-mlc-home__aside { background: var(--pg-wash); border: 1px solid var(--pg-edge); border-radius: 12px; padding: clamp(20px, 2.4vw, 28px); position: sticky; top: calc(var(--fi-masthead-height) + 20px); } .fi-content-page .fi-mlc-home__actions { display: grid; gap: 10px; } .fi-content-page main a.fi-mlc-home__action { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding-inline: 24px; border-radius: 9px; background: var(--pg-accent-deep); color: var(--paper-high); font-weight: 700; font-size: var(--fs-body-sm); text-decoration: none; } .fi-content-page main a.fi-mlc-home__action:hover { background: var(--pg-accent); } /* Japanese needs a CJK stack; the four self-hosted Latin faces have no kana or kanji and would fall back inconsistently across platforms. */ .fi-content-page[lang="ja"] .fi-mlc-home__title, .fi-content-page[lang="ja"] .fi-mlc-home__lede, .fi-content-page[lang="ja"] .fi-mlc-home__detail, .fi-content-page[lang="ja"] .fi-mlc-home__kicker, .fi-content-page[lang="ja"] .fi-mlc-home__status, .fi-content-page[lang="ja"] .fi-mlc-home__eyebrow, .fi-content-page[lang="ja"] .fi-mlc-home__action { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif; } .fi-content-page[lang="ja"] .fi-mlc-home__title { line-height: 1.32; letter-spacing: 0.01em; } .fi-content-page[lang="ja"] .fi-mlc-home__lede { line-height: 1.85; } @media (max-width: 900px) { .fi-content-page .fi-mlc-home__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "details" "aside"; } .fi-content-page .fi-mlc-home__aside { position: static; } .fi-content-page .fi-mlc-home { min-height: 0; } } /* inline:fi-accepted-bridges */ /* ============================================================================ FI - migrated-shell bridges 31 August 2026 The only AUTHORED rules in the release. Everything else is approved CSS copied verbatim. Each block exists because the approved markup and the runtime markup differ in a way copying cannot reconcile. Loaded by EVERY migrated template, after that template's own stylesheet. It was article-only until the Homepage landed and the language control rendered as an open dropdown instead of the approved pills - the bridge simply was not there. Blocks that are genuinely family-specific carry their own family class. ============================================================================ */ /* ============================================================================ MIGRATED-SHELL BRIDGES The only authored rules in this file. Everything above is the approved CSS, copied verbatim. Each block below exists because the approved markup and the runtime markup differ in a way no amount of copying can reconcile. ============================================================================ */ /* ---- 1. the language control ------------------------------------------------- The approved navbar shows three always-visible pills. The language markup is NOT ours: it is whatever `fi_mlc_header_switcher()` prints, and it has to stay that way or the language router loses its contract. Multilingual Core prints a `

` with a globe summary wrapping the real switcher list. So the list is shown inline, the disclosure is retired, and the items take the approved `.language-nav a` presentation - every value below is copied from `styles.css` and `home-revision-2026-08-30.css`, not chosen here. The visible label is the `lang` attribute the switcher already carries, which is how the approved pills read EN / DE / JA. The element's own text - English, Deutsch, 日本語 - stays in the accessibility tree as the accessible name, so a screen reader still hears the full language, and no label is authored here. */ .language-nav > .masthead__language-switcher, .language-nav > .masthead__language-switcher > details, .language-nav .fi-mlc-header-switcher__panel { display: contents; } .language-nav summary { display: none; } .language-nav .mlc-language-switcher ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .language-nav .mlc-language-switcher li { display: flex; margin: 0; } .language-nav .mlc-language-switcher li + li > a, .language-nav .mlc-language-switcher li + li > span { border-left: 1px solid color-mix(in srgb, var(--nav-ink) 16%, transparent); } .language-nav .mlc-language-switcher :is(a, span) { display: inline-flex; min-width: 40px; min-height: 38px; align-items: center; justify-content: center; color: var(--nav-muted); font-family: var(--mono); font-size: 0; font-weight: 700; letter-spacing: 0.03em; line-height: 1; text-decoration: none; } .language-nav .mlc-language-switcher :is(a, span)::before { content: attr(lang); font-size: var(--nav-size-utility, 12.5px); text-transform: uppercase; } /* the same two responsive overrides the approved `.language-nav a` carries, copied from home-revision-2026-08-30.css lines 797 and 808 */ @media (min-width: 1181px) and (max-width: 1300px) { .language-nav .mlc-language-switcher :is(a, span) { min-width: 34px; } .language-nav .mlc-language-switcher :is(a, span)::before { font-size: 12.5px; } } @media (min-width: 901px) and (max-height: 860px) { .language-nav .mlc-language-switcher :is(a, span) { min-height: 34px; } } .language-nav .mlc-language-switcher a:hover { color: var(--nav-ink); } .language-nav .mlc-language-switcher [aria-current] { background: var(--nav-cta-bg); color: var(--nav-cta-text); } /* ---- 2. the article region spans the shell ------------------------------------ The approved article grid is 1232px wide and centres itself. GeneratePress wraps it in a container 1217px wide, so `justify-content:center` had nothing to centre in and the grid sat flush left with a 33px gap on the right. On the migrated template the article region takes the shell width instead of GP's inner container. Scoped to that template; every other route keeps GP's container. */ body.fi-tpl-article-2026-08 .site-content, body.fi-tpl-article-2026-08 .site-content > .content-area, body.fi-tpl-article-2026-08 .site-content > .content-area > .site-main { width: 100%; max-width: none; padding-left: 0; padding-right: 0; } /* ---- 3. the newsletter Join button - RETIRED 3 September 2026 ----------------- This block forced the footer and rail newsletter buttons to oxide with a counter-`!important`, because snippet 44 painted every `.fi-news-form button` brass with `!important` and the approved oxide rail button lost. Retired for two reasons: 1. It is redundant. `FI-SNIPPET-044-A11Y-V2-CANDIDATE.php` now scopes that colour to `body:not(.fi-tpl-2026-08)` and keeps only the `min-height:44px` touch-target floor global. That is the fix at the real owner which this block's own note recorded as the better option and deferred. It has since been made. 2. It was wrong beyond the rail. It applied to EVERY migrated template, but the approved footer newsletter button is brass - on the content pages and on the article's own accepted reference alike (rgb(245,197,109) on dark text). Only the article RAIL button is oxide, and the approved article stylesheet already sets it. Nothing replaces it. The approved stylesheets now decide both buttons unopposed. */ /* ---- 4. the archive region spans the shell, and drops the theme sidebar ------- Same reconciliation as block 2, for the archive, search and 404 templates. GeneratePress reserves a right sidebar on these routes, so `.site-main` was 918px inside a 1272px shell, and `.fi-static-page` sat shrink-to-fit at 312px. The approved `.arc-layout` grid declares `minmax(0,1fr) 292px`, so its flexible first column resolved to ZERO: every colour and font matched the reference while the article list rendered one character wide. The approved archive has no theme sidebar - its own `.arc-facets` rail is the sidebar, and it is inside the replaced `
`. Scoped to the migrated archive templates only; every other route keeps the theme layout exactly as it is. */ body.fi-tpl-archive-2026-09 .site-content, body.fi-tpl-archive-2026-09 .site-content > .content-area, body.fi-tpl-archive-2026-09 .site-content > .content-area > .site-main { width: 100%; max-width: none; padding-left: 0; padding-right: 0; } /* `.site-content` and `.site-main` are theme GRIDS - the content/sidebar split and the old card grid. A grid ITEM sized `width:100%` still resolves against a content-sized track, so both are returned to normal block flow on these templates and the approved page then fills the shell. */ body.fi-tpl-archive-2026-09 .site-content, body.fi-tpl-archive-2026-09 .site-main { display: block; } body.fi-tpl-archive-2026-09 .site-main > .fi-static-page { width: 100%; } body.fi-tpl-archive-2026-09 .site-content > .widget-area, body.fi-tpl-archive-2026-09 #right-sidebar { display: none; } /* ---- 5. heading weight on migrated routes ------------------------------------ The approved previews carry no rule for a bare heading, so their effective weight is the browser default. GeneratePress sets `h1 { font-weight: 400 }` (and the same for h2 and h3, with `inherit` for the rest), which the approved pages never see because they have no theme stylesheet - so on staging every heading the approved CSS does not explicitly own rendered 300 units too light, and the `ch`-based max-widths resolved narrower with it. `:where(body.fi-tpl-2026-08)` contributes no specificity, so each selector below weighs exactly (0,0,1): a tie with GeneratePress, resolved by source order, and this carrier is the last stylesheet on the page. It beats the theme and loses to every one of the 26 approved heading rules, which are all (0,1,1) or higher. That is the same ownership the reference has. `revert` rather than a literal 700 restores the browser default the approved page is actually resolving to. This replaces the archive-only rule that stood here. That rule existed because two broader owners - the Customizer's global `h1,h2,h3{font-weight:600}` and snippet 133's core-pages visual system - were still live on migrated routes and beat anything general. Both are now scoped away from migrated templates, so a single owner is possible. Deleting the old rule from the archive page's CSSOM and injecting this one in its place reproduced /news/ exactly (H1 58px 700 max-width 791.70, H2 26px 700 max-width 797.94 x10), so it is subsumed rather than merely duplicated. */ :where(body.fi-tpl-2026-08) h1, :where(body.fi-tpl-2026-08) h2, :where(body.fi-tpl-2026-08) h3, :where(body.fi-tpl-2026-08) h4, :where(body.fi-tpl-2026-08) h5, :where(body.fi-tpl-2026-08) h6 { font-weight: revert; } /* ---- 6. one width system on migrated routes ---------------------------------- GeneratePress wraps every page in `.site.grid-container`, which carries its own `max-width` and auto side margins. The approved pages have no such wrapper: their `.shell` is measured from the viewport. Nested inside GP's already-inset container the shell inset a SECOND time, so at a 1521px viewport the hero sat at x=172 in a 1176px column where the reference has x=100 and 1320px. Returning the GP container to full width on migrated routes leaves exactly one intended width system - the approved `.shell` and the section widths inside it - and every unmigrated route keeps GeneratePress's container untouched. This generalises blocks 2 and 4, which did the same for the `.site-content` chain on the article and archive templates only. Those blocks stay: they also drop the theme sidebar and return the theme grids to block flow, which is archive-specific. */ body.fi-tpl-2026-08 .site.grid-container, body.fi-tpl-2026-08 #page.grid-container { width: 100%; max-width: none; margin-left: 0; margin-right: 0; } body.fi-tpl-2026-08 .site-content, body.fi-tpl-2026-08 .site-content > .content-area, body.fi-tpl-2026-08 .site-content > .content-area > .site-main { width: 100%; max-width: none; padding-left: 0; padding-right: 0; /* 2026-09-07: GeneratePress keeps `.separate-containers .site-main { margin: 20px }`, which beats the migration's own `.site-main { margin: 0 }` on specificity. Combined with width:100% that produced 100% + 40px and pushed the 404 route 20px past the viewport. Zeroing the inline margins here completes this rule's own intent. */ margin-left: 0; margin-right: 0; } /* ---- 7. the article paper surface -------------------------------------------- The approved article sits on `article.article-paper`. WordPress renders `article.post > div.inside-article`, and `.inside-article` is hardcoded in the GeneratePress template with no class filter, so the accepted stylesheet's `.article-paper` rules cannot reach it. This bridge carries that surface across. The values are the accepted sheet's own expressions, not a copy of today's resolved colours: `.fi-identity-lab .article-paper` sets the border, background and shadow from `--lab-*`, so this tracks the palette with it. The padding steps follow the accepted sheet exactly. Measured before this block, at 1521px: background #fff against the approved #fffdf8, padding 24px 48px 42px against 24px 24px 42px, and no border or shadow at all. The Customizer rule that produced that now stands down on migrated articles, so nothing here is fighting anything. */ body.fi-tpl-article-2026-08 .inside-article { min-width: 0; padding: 28px 20px 42px; border: 1px solid color-mix(in srgb, var(--lab-steel) 30%, var(--lab-canvas)); background: var(--lab-paper-high); color: #1a1712; box-shadow: 0 18px 44px color-mix(in srgb, var(--lab-steel-night) 14%, transparent); } @media (min-width: 1080px) { body.fi-tpl-article-2026-08 .inside-article { padding: 24px 24px 42px; } } @media (max-width: 760px) { body.fi-tpl-article-2026-08 .inside-article { padding: 28px 20px 42px; } } @media print { body.fi-tpl-article-2026-08 .inside-article { padding: 0; box-shadow: none; } } /* ---- 8. GeneratePress element defaults the reference never sees ---------------- The approved article is a standalone page with no theme stylesheet, so its body elements resolve to browser defaults wherever the accepted CSS is silent. On WordPress those same elements pick up GeneratePress' own element rules instead. Two showed up in the measured diff: table GeneratePress adds `margin-bottom: 1.5em` and a 1px border. Measured: staging margin 0 0 21px with a 0.8px rgba(0,0,0,.1) border against the reference's 0 and none. The accepted sheet styles the table's own head, body and wrapper, so only the theme's outer box has to go. h3 The Customizer sets `h3 { font-size: 24px; line-height: 1.25; letter-spacing: 0 }` globally. The reference has no rule at all, so its `.entry-content h3` resolves to the browser default 19.89px and inherits the 1.62 reading line-height - measured 19.89px/32.22px against staging's 24px/30px. `revert` restores the browser default size; `inherit` is used for the line-height and tracking because the reference INHERITS those from the reading column rather than reverting to the browser's `normal`. This supersedes the divergence recorded in the Customizer on 31 August, which reasoned that removing the rule could not reach 19.89px because GeneratePress' `h3{29px}` would take over. That is true of removing it; it is not true of this block, which owns the value outright at (0,1,1). Owner decision, 6 September 2026: on the article the approved A1 design owns everything except the Methodology component. */ body.fi-tpl-article-2026-08 .entry-content table { margin: 0; border: 0; } :where(body.fi-tpl-article-2026-08) .entry-content h3 { font-size: revert; line-height: inherit; letter-spacing: inherit; } /* inline:fi-industries-menu-v1 */ .nav-group.nav-group--industries .nav-group__panel--industries{left:50%;right:auto;display:block;width:min(920px,calc(100vw - 40px));max-width:calc(100vw - 32px);padding:20px;transform:translateX(-62%);max-height:calc(100vh - 128px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;} .nav-industries__header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:2px 2px 15px;} .nav-industries__header p{margin:0 0 6px;color:var(--nav-cta-bg);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.09em;line-height:1.35;text-transform:uppercase;} .nav-industries__header strong{display:block;font-family:var(--serif);font-size:22px;font-weight:580;letter-spacing:-.02em;line-height:1.08;} .nav-industries__header > a{flex:0 0 auto;color:var(--nav-cta-bg);font:700 11.5px/1.35 var(--mono);text-decoration:underline;text-transform:uppercase;text-underline-offset:3px;} .nav-industries__header > a:hover,.nav-industries__header > a:focus-visible{color:var(--nav-ink);} .nav-industries__list{padding-top:15px;border-top:1px solid color-mix(in srgb,var(--nav-ink) 20%,transparent);} .nav-industries__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:6px;} a.nav-industry{display:flex;min-height:46px;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-left:4px solid var(--sector-tone,var(--nav-accent));background:color-mix(in srgb,var(--sector-tone,var(--nav-accent)) 11%,var(--nav-panel));color:var(--nav-ink);font-size:15px;line-height:1.25;text-decoration:none;transition:background 150ms ease,transform 150ms ease;} a.nav-industry > span:last-child{flex:0 0 auto;color:color-mix(in srgb,var(--sector-tone,var(--nav-accent)) 62%,var(--nav-ink));font-size:12px;} a.nav-industry:hover,a.nav-industry:focus-visible{background:color-mix(in srgb,var(--sector-tone,var(--nav-accent)) 20%,var(--nav-panel));color:var(--nav-ink);text-decoration:none;transform:translateX(2px);} a.nav-industries__cross{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:20px;margin-top:12px;padding:10px 13px;border:1px solid color-mix(in srgb,var(--nav-stripe-brass) 60%,var(--nav-ink));background:#efe0c5;color:var(--nav-ink);text-decoration:none;} a.nav-industries__cross b{display:block;font-size:14px;font-weight:700;} a.nav-industries__cross small{display:block;margin-top:2px;color:var(--nav-muted);font-size:12.5px;line-height:1.35;} a.nav-industries__cross strong{flex:0 0 auto;color:var(--nav-cta-bg);font:700 11.5px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase;} @media (max-width:1180px){.nav-group.nav-group--industries .nav-group__panel--industries{position:static;left:auto;right:auto;width:100%;max-width:none;padding:18px;transform:none;max-height:none;overflow:visible;}.nav-industries__grid{grid-template-columns:1fr 1fr;}.nav-industries__header{flex-direction:column;align-items:flex-start;gap:10px;}}