/*
Theme Name: FerroForge
Theme URI: https://ferroforge.example.com
Author: FerroForge
Description: Apple-inspired landing page theme for a TMT steel manufacturer. All content editable via Appearance > Customize > FerroForge Content.
Version: 5.49.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ferroforge
*/
/* ================= Reset & tokens ================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #ffffff;
color: #171717;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.04em; margin: 0; }
p { margin: 0; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
::selection { background: rgba(249, 115, 22, 0.3); }
:root {
--ff-orange: hsl(24, 95%, 53%);
--ff-fg: #171717;
--ff-muted: #737373;
--ff-border: #e5e5e5;
--ff-card: #fafafa;
--ff-secondary: #f5f5f5;
}
/* ================= Layout helpers ================= */
.ff-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.ff-container-narrow { max-width: 1024px; }
.ff-container-mid { max-width: 1152px; }
.ff-section { padding: 8rem 0; }
.ff-section-head { text-align: center; max-width: 48rem; margin: 0 auto 4rem; }
.ff-h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 700; letter-spacing: -0.04em; margin-bottom: 1rem; }
.ff-h2-left { text-align: left; }
.ff-sub { font-size: 1.25rem; color: var(--ff-muted); font-weight: 300; margin: 0 auto; max-width: 36rem; }
.ff-sub-left { margin: 0; }
.ff-sub-dark { color: rgba(255, 255, 255, 0.6); }
.ff-eyebrow { color: var(--ff-orange); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.875rem; display: block; margin-bottom: 1rem; }
.ff-eyebrow-xs { color: var(--ff-orange); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; display: block; margin-bottom: 0.5rem; }
.ff-text-orange { color: var(--ff-orange); }
.ff-muted-sm { font-size: 0.875rem; color: var(--ff-muted); margin-top: 0.35rem; }
.ff-mono { font-family: Menlo, monospace; font-size: 0.875rem; }
.ff-hr { height: 1px; width: 100%; background: var(--ff-border); }
.ff-label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ff-muted); }
.ff-dot { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 999px; margin-right: 0.5rem; }
.ff-dot-orange { background: var(--ff-orange); }
.ff-dot-faint { background: rgba(23, 23, 23, 0.35); }
/* Reveal animation */
.ff-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.ff-reveal.is-visible { opacity: 1; transform: none; }
/* Buttons */
.ff-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; border-radius: 999px; padding: 1rem 2rem; font-size: 0.875rem; font-weight: 500; transition: all 0.3s ease; }
.ff-btn-lg { font-size: 1.05rem; padding: 1.1rem 2.2rem; }
.ff-btn-sm { padding: 0.75rem 1.5rem; }
.ff-btn-block { width: 100%; margin-top: 1.5rem; }
.ff-btn-white { background: #ffffff; color: #000; }
.ff-btn-white:hover { background: var(--ff-orange); color: #fff; transform: scale(1.04); }
.ff-btn-ghost { border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.ff-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.ff-btn-dark { background: var(--ff-fg); color: #fff; }
.ff-btn-dark:hover { background: var(--ff-orange); color: #fff; }
.ff-circle-btn { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; transition: all 0.3s ease; }
.ff-circle-btn:hover { background: rgba(255, 255, 255, 0.12); }
.ff-circle-btn-dark { border-color: var(--ff-border); color: var(--ff-fg); }
.ff-circle-btn-dark:hover { background: var(--ff-fg); color: #fff; }
.ff-link-orange { color: var(--ff-orange); font-weight: 500; white-space: nowrap; }
.ff-link-orange:hover { opacity: 0.8; }
/* ================= Navbar ================= */
.ff-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all 0.5s ease; border-bottom: 1px solid transparent; background: transparent; }
.ff-navbar.is-scrolled { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(229, 229, 229, 0.5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.ff-navbar-inner { height: 3.5rem; display: flex; align-items: center; justify-content: space-between; }
.ff-logo { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.04em; color: #fff; transition: color 0.4s ease; }
.ff-navbar.is-scrolled .ff-logo { color: var(--ff-fg); }
.ff-logo-dot { color: var(--ff-orange); }
.ff-nav-links { display: none; gap: 2rem; }
.ff-nav-links a { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.75); transition: color 0.3s ease; }
.ff-navbar.is-scrolled .ff-nav-links a { color: rgba(23, 23, 23, 0.7); }
.ff-nav-links a:hover { color: var(--ff-orange); }
.ff-nav-cta { font-size: 0.75rem; font-weight: 500; background: #fff; color: #000; padding: 0.4rem 1rem; border-radius: 999px; transition: all 0.3s ease; min-height: 44px; display: inline-flex; align-items: center; }
.ff-navbar.is-scrolled .ff-nav-cta { background: var(--ff-fg); color: #fff; }
.ff-nav-cta:hover { background: var(--ff-orange) !important; color: #fff !important; }
@media (min-width: 768px) { .ff-nav-links { display: flex; align-items: center; } }
/* --- Desktop dropdown sub-menus --- */
.ff-nav-item { position: relative; display: inline-flex; align-items: center; }
.ff-nav-item::after { content: ""; position: absolute; top: 100%; left: -0.5rem; right: -0.5rem; height: 1rem; }
.ff-nav-caret { margin-left: 0.35rem; opacity: 0.7; transition: transform 0.25s ease; }
.ff-nav-item:hover .ff-nav-caret, .ff-nav-item:focus-within .ff-nav-caret { transform: rotate(180deg); }
.ff-nav-item > .ff-nav-page { display: inline-flex; align-items: center; }
.ff-nav-sub { position: absolute; top: calc(100% + 0.85rem); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 13.5rem; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--ff-border); border-radius: 1rem; padding: 0.5rem; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 0.1rem; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 60; }
.ff-nav-item:hover .ff-nav-sub, .ff-nav-item:focus-within .ff-nav-sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.ff-navbar .ff-nav-sub a { display: block; padding: 0.6rem 0.9rem; border-radius: 0.6rem; font-size: 0.8rem; font-weight: 500; color: rgba(23, 23, 23, 0.75); white-space: nowrap; }
.ff-navbar .ff-nav-sub a:hover, .ff-navbar .ff-nav-sub a:focus { background: var(--ff-secondary); color: var(--ff-orange); }
/* --- Third-level flyout (state → cities) --- */
.ff-nav-sub-group { position: relative; }
.ff-nav-sub-group > .ff-nav-sub-parent { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ff-nav-sub-group .ff-nav-caret { transform: none; }
.ff-nav-sub-group:hover > .ff-nav-sub-parent .ff-nav-caret,
.ff-nav-sub-group:focus-within > .ff-nav-sub-parent .ff-nav-caret { transform: none; }
.ff-nav-sub-flyout { position: absolute; top: -0.5rem; left: calc(100% + 0.25rem); min-width: 11rem; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--ff-border); border-radius: 1rem; padding: 0.5rem; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 0.1rem; opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 61; }
.ff-nav-sub-group:hover > .ff-nav-sub-flyout, .ff-nav-sub-group:focus-within > .ff-nav-sub-flyout { opacity: 1; visibility: visible; transform: translateX(0); }
.ff-nav-sub-group::after { content: ""; position: absolute; top: 0; left: 100%; width: 0.5rem; height: 100%; }
/* Mobile: indent city links under their state */
.ff-mm-sub-sub { margin-left: 1.25rem; font-size: 0.875rem; }
/* --- Navbar right cluster + hamburger --- */
.ff-nav-right { display: flex; align-items: center; gap: 0.85rem; }
.ff-nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.25rem; height: 2.25rem; padding: 0.35rem; }
.ff-nav-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease; }
.ff-navbar.is-scrolled .ff-nav-burger span { background: var(--ff-fg); }
body.ff-mm-open .ff-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.ff-mm-open .ff-nav-burger span:nth-child(2) { opacity: 0; }
body.ff-mm-open .ff-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 768px) { .ff-nav-burger { display: none; } }
/* --- Mobile menu --- */
.ff-mobile-menu { position: fixed; top: 3.5rem; left: 0; right: 0; bottom: 0; background: #fff; overflow-y: auto; padding: 1.5rem 1.5rem 3rem; z-index: 49; }
body.ff-mm-open { overflow: hidden; }
body.ff-mm-open .ff-navbar { background: #fff; border-color: rgba(229, 229, 229, 0.8); }
body.ff-mm-open .ff-logo { color: var(--ff-fg); }
body.ff-mm-open .ff-nav-burger span { background: var(--ff-fg); }
body.ff-mm-open .ff-nav-cta { background: var(--ff-fg); color: #fff; }
.ff-mm-nav { display: flex; flex-direction: column; }
.ff-mm-link, .ff-mm-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.1rem 0.25rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ff-fg); border-bottom: 1px solid var(--ff-border); text-align: left; }
.ff-mm-caret { transition: transform 0.3s ease; color: var(--ff-muted); flex-shrink: 0; }
.ff-mm-group.is-open .ff-mm-caret { transform: rotate(180deg); color: var(--ff-orange); }
.ff-mm-sub { display: none; flex-direction: column; padding: 0.25rem 0 0.75rem; border-bottom: 1px solid var(--ff-border); }
.ff-mm-group.is-open .ff-mm-sub { display: flex; }
.ff-mm-sub-link { display: block; padding: 0.65rem 1rem; font-size: 0.95rem; font-weight: 400; color: rgba(23, 23, 23, 0.7); border-left: 2px solid var(--ff-border); margin-left: 0.25rem; }
.ff-mm-sub-link:hover { color: var(--ff-orange); border-left-color: var(--ff-orange); }
.ff-mm-cta { margin-top: 1.75rem; }
@media (min-width: 768px) { .ff-mobile-menu { display: none !important; } }
/* ================= Hero ================= */
.ff-hero { position: relative; height: 100vh; min-height: 640px; background: #000; overflow: hidden; }
.ff-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.2s; }
.ff-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.ff-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transform: scale(1.08); transition: transform 6s linear; }
.ff-hero-slide.is-active .ff-hero-bg { transform: scale(1); }
.ff-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.12) 38%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent 60%); }
.ff-hero-slide.is-green-steel .ff-hero-bg { opacity: 0.8; }
.ff-hero-slide.is-green-steel .ff-hero-shade { background: linear-gradient(to top, rgba(2, 16, 8, 0.45), rgba(1, 10, 5, 0.38)), linear-gradient(to right, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.21) 72%); }
.ff-hero-slide.is-green-steel .ff-eyebrow,
.ff-hero-slide.is-green-steel .ff-hero-headline,
.ff-hero-slide.is-green-steel .ff-hero-tagline,
.ff-hero-slide.is-green-steel .ff-hero-desc {
color: var(--ff-hero-copy, #69d58a) !important;
background: none !important;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: var(--ff-hero-copy, #69d58a);
}
.ff-hero-slide.is-green-steel .ff-eyebrow,
.ff-hero-slide.is-green-steel .ff-hero-headline,
.ff-hero-slide.is-green-steel .ff-hero-tagline {
color: var(--ff-hero-copy, #69d58a) !important;
-webkit-text-fill-color: var(--ff-hero-copy, #69d58a);
}
.ff-hero-slide.has-custom-copy-color .ff-eyebrow,
.ff-hero-slide.has-custom-copy-color .ff-hero-headline,
.ff-hero-slide.has-custom-copy-color .ff-hero-tagline,
.ff-hero-slide.has-custom-copy-color .ff-hero-desc {
color: var(--ff-hero-copy) !important;
background: none !important;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: var(--ff-hero-copy) !important;
}
.ff-hero-slide.is-green-steel .ff-hero-actions .ff-btn {
background: #16803d !important;
border-color: #16803d !important;
color: #fff !important;
-webkit-text-fill-color: #fff;
}
.ff-hero-slide.is-green-steel .ff-hero-actions .ff-btn:hover {
background: #116b32 !important;
border-color: #116b32 !important;
color: #fff !important;
}
.ff-hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 1280px; }
.ff-hero-slide .ff-hero-content > * { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.ff-hero-slide.is-active .ff-hero-content > * { opacity: 1; transform: none; }
.ff-hero-slide.is-active .ff-hero-content > *:nth-child(2) { transition-delay: 0.08s; }
.ff-hero-slide.is-active .ff-hero-content > *:nth-child(3) { transition-delay: 0.16s; }
.ff-hero-slide.is-active .ff-hero-content > *:nth-child(4) { transition-delay: 0.24s; }
.ff-hero-slide.is-active .ff-hero-content > *:nth-child(5) { transition-delay: 0.36s; }
.ff-hero-headline { font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; color: #fff; line-height: 0.95; letter-spacing: -0.04em; margin-bottom: 1.25rem; max-width: 48rem; }
.ff-hero-tagline { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1.25rem; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ff-hero-desc { font-size: clamp(1.05rem, 2vw, 1.25rem); color: rgba(255, 255, 255, 0.6); font-weight: 300; max-width: 36rem; margin-bottom: 2.5rem; }
.ff-hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ff-hero-controls { position: absolute; bottom: 2.5rem; left: 0; right: 0; z-index: 10; }
.ff-hero-controls-inner { display: flex; align-items: center; justify-content: space-between; }
.ff-hero-dots { display: flex; align-items: center; gap: 0.75rem; }
.ff-hero-dot { position: relative; height: 6px; width: 24px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.25); transition: width 0.5s ease; }
.ff-hero-dot:hover { background: rgba(255, 255, 255, 0.5); }
.ff-hero-dot.is-active { width: 56px; }
.ff-hero-dot-fill { position: absolute; inset: 0; background: var(--ff-orange); transform-origin: left; transform: scaleX(0); }
@keyframes ffProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ff-hero-arrows { display: none; gap: 0.75rem; }
@media (min-width: 768px) { .ff-hero-arrows { display: flex; } }
/* ================= Personas ================= */
.ff-personas-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .ff-personas-grid { grid-template-columns: repeat(3, 1fr); } }
.ff-persona-card { border-radius: 1.5rem; overflow: hidden; background: var(--ff-card); border: 1px solid var(--ff-border); display: flex; flex-direction: column; }
.ff-persona-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ff-persona-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.ff-persona-card:hover .ff-persona-media img { transform: scale(1.05); }
.ff-persona-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2) 50%, transparent); }
.ff-persona-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2rem; z-index: 2; }
.ff-persona-overlay .ff-eyebrow-xs { opacity: 0; transform: translateY(10px); transition: all 0.5s ease; }
.ff-persona-card:hover .ff-persona-overlay .ff-eyebrow-xs { opacity: 1; transform: none; }
.ff-persona-overlay h3 { font-size: 1.75rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.ff-persona-body { padding: 2rem; border-top: 1px solid var(--ff-border); }
.ff-persona-body p { color: var(--ff-muted); font-weight: 300; line-height: 1.65; }
/* ================= Products ================= */
.ff-products { background: rgba(245, 245, 245, 0.5); }
.ff-products-frame { background: var(--ff-card); border-radius: 2.5rem; padding: 1.5rem; border: 1px solid var(--ff-border); box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.08); }
.ff-products-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
/* ================= New & Latest Product ================= */
.ff-latest-product { position: relative; overflow: hidden; color: #fff; background: var(--ff-section-bg, #0b0b0c); }
.ff-latest-product::before,
.ff-latest-product::after { content: ""; position: absolute; width: 32rem; height: 32rem; border-radius: 50%; background: rgba(234, 88, 12, .13); filter: blur(85px); pointer-events: none; }
.ff-latest-product::before { right: -13rem; top: -15rem; }
.ff-latest-product::after { left: -14rem; bottom: -18rem; opacity: .75; }
.ff-latest-product .ff-container { position: relative; z-index: 1; }
.ff-latest-product-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: center; }
.ff-latest-product-copy { max-width: 44rem; }
.ff-latest-product .ff-eyebrow { display: inline-flex; width: auto; margin-bottom: 1.5rem; padding: .65rem 1rem; border: 1px solid rgba(251,146,60,.3); border-radius: 999px; color: var(--ff-orange); background: rgba(249,115,22,.1); }
.ff-latest-product .ff-h2 { color: #fff; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: .96; }
.ff-latest-product-subtitle { margin-top: 1.5rem; max-width: 42rem; color: rgba(255,255,255,.88); font-size: clamp(1.25rem, 2.2vw, 1.8rem); font-weight: 650; line-height: 1.25; }
.ff-latest-product-text { margin-top: 1.4rem; max-width: 42rem; color: rgba(255,255,255,.58); line-height: 1.75; }
.ff-latest-product-benefits { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: 2rem; }
.ff-latest-product-benefits li { display: flex; align-items: flex-start; gap: .75rem; color: rgba(255,255,255,.76); font-size: .9rem; line-height: 1.5; }
.ff-latest-product-benefits li > span { display: inline-grid; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; place-items: center; margin-top: .1rem; border-radius: 50%; color: #fdba74; background: rgba(249,115,22,.16); font-size: .72rem; }
.ff-latest-product-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.ff-latest-product-secondary { border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85); }
.ff-latest-product-secondary:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.ff-latest-product-card { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(255,255,255,.1); border-radius: 2rem; background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(255,255,255,.055) 38%, rgba(255,255,255,.035)); box-shadow: 0 36px 80px -35px rgba(124,45,18,.7); }
.ff-latest-product-logo { display: grid; min-height: 18rem; place-items: center; padding: 2rem; border-radius: 1.25rem; background: rgba(0,0,0,.2); }
.ff-latest-product-logo img { width: 100%; max-height: 11rem; object-fit: contain; }
.ff-latest-product-logo strong { color: #fff; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.05em; }
.ff-latest-product-logo em { color: var(--ff-orange); font-style: normal; }
.ff-latest-product-highlights { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.1); }
.ff-latest-product-highlights strong,
.ff-latest-product-highlights span { display: block; }
.ff-latest-product-highlights strong { color: #fdba74; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.15; }
.ff-latest-product-highlights span { margin-top: .35rem; color: rgba(255,255,255,.42); font-size: .7rem; line-height: 1.35; }
@media (min-width: 760px) {
.ff-latest-product-benefits { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 980px) {
.ff-latest-product-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 6rem; }
}
@media (max-width: 560px) {
.ff-latest-product-highlights { grid-template-columns: 1fr; }
.ff-latest-product-logo { min-height: 13rem; }
}
.ff-product-tile { position: relative; border-radius: 1.5rem; overflow: hidden; background: #000; height: 300px; }
.ff-product-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 1s ease, opacity 0.6s ease; }
.ff-product-tile:hover img { transform: scale(1.05); opacity: 1; }
.ff-tile-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2) 55%, transparent); z-index: 1; }
.ff-tile-text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }
.ff-tile-text h3 { font-size: 1.6rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.ff-tile-text p { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; font-weight: 300; line-height: 1.6; max-width: 28rem; }
@media (min-width: 768px) {
.ff-products-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; }
.ff-product-tile { height: auto; }
.ff-product-tile-1 { grid-column: span 2; grid-row: span 2; }
.ff-product-tile-2, .ff-product-tile-3, .ff-product-tile-4, .ff-product-tile-5 { grid-column: span 2; }
.ff-product-tile p { opacity: 0; transform: translateY(12px); transition: all 0.5s ease; }
.ff-product-tile:hover p { opacity: 1; transform: none; }
}
/* ================= Green banner ================= */
.ff-green { position: relative; min-height: 110vh; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 8rem 0; }
.ff-green-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.ff-green-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, #000, transparent 30%, transparent 70%, #000), rgba(0, 0, 0, 0.35); }
.ff-green .ff-green-shade { background: linear-gradient(to top, rgba(1, 12, 6, .96), rgba(1, 10, 5, .72) 56%, rgba(0, 0, 0, .46)); }
.ff-green .ff-badge,
.ff-green .ff-green-title,
.ff-green .ff-green-text { color: #8ee6a7; }
.ff-green .ff-green-title { color: #b4f4c3; }
.ff-green .ff-green-title .ff-text-green { color: #69d58a; }
.ff-green-content { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ff-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.1); backdrop-filter: blur(8px); color: var(--ff-orange); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 2rem; }
.ff-badge-pulse { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--ff-orange); animation: ffPulse 1.6s ease-in-out infinite; }
@keyframes ffPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ff-green-title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; color: #fff; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 2rem; }
.ff-green-title .ff-text-orange { background: linear-gradient(to right, var(--ff-orange), #fdba74); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ff-green-title .ff-text-green { color: #34a853; }
.ff-prod-hero:has(#ff-page-green), #ff-page-green .ff-prod-hero { background: #123b27; }
.ff-tmt-grade-logo { width: auto; max-width: 88px; height: 26px; margin-top: .5rem; object-fit: contain; object-position: left center; }
.ff-tmt-process-placeholder { display: flex; min-height: 340px; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; background: #171717; color: #fff; border-radius: 1.5rem; }
.ff-tmt-process-placeholder span { color: rgba(255,255,255,.7); font-size: .9rem; }
.ff-tmt-process-video { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.5rem; background: #123b27; }
.ff-tmt-process-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.ff-usecase small { display: block; margin-top: .45rem; color: rgba(255,255,255,.85); font-size: .78rem; line-height: 1.35; }
.ff-tmt-grade-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem; min-height: 1.6rem; padding: .15rem .45rem; border: 1px solid rgba(249,115,22,.72); border-radius: .2rem; color: #fff; font-weight: 800; font-style: italic; letter-spacing: .02em; }
.ff-dealer-pin-logo { pointer-events: none; }
.ff-csr-foundation-logo { width: min(220px, 50vw); height: auto; margin-top: 1.5rem; padding: .65rem; border-radius: .75rem; background: rgba(255,255,255,.92); }
.ff-green-text { font-size: clamp(1.15rem, 2.5vw, 1.5rem); color: rgba(255, 255, 255, 0.8); font-weight: 300; max-width: 42rem; margin-bottom: 3rem; line-height: 1.6; }
.ff-green .ff-btn-green { background: #16803d; border-color: #16803d; color: #fff; }
.ff-green .ff-btn-green:hover { background: #116b32; border-color: #116b32; color: #fff; }
/* ================= Calculator ================= */
.ff-calc { background: rgba(245, 245, 245, 0.6); }
.ff-calc-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .ff-calc-grid { grid-template-columns: 1fr 1fr; } }
.ff-calc-card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px); border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; gap: 2.5rem; }
.ff-calc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.ff-dia-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ff-dia-buttons button { height: 3rem; width: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 500; background: var(--ff-secondary); color: var(--ff-fg); transition: all 0.25s ease; }
.ff-dia-buttons button:hover { background: #ebebeb; }
.ff-dia-buttons button.is-active { background: var(--ff-orange); color: #fff; transform: scale(1.1); box-shadow: 0 8px 20px -6px rgba(249, 115, 22, 0.5); }
#ff-length-input { width: 6rem; height: 2rem; text-align: right; font-family: Menlo, monospace; font-size: 0.875rem; border: 1px solid var(--ff-border); border-radius: 0.5rem; padding: 0 0.5rem; }
#ff-length-slider { width: 100%; accent-color: var(--ff-orange); }
.ff-calc-results { display: flex; flex-direction: column; gap: 2rem; }
.ff-calc-big { font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 700; letter-spacing: -0.04em; }
.ff-calc-unit { font-size: 1.75rem; color: var(--ff-muted); font-weight: 300; }
.ff-calc-unit-orange { font-size: 1.75rem; color: rgba(249, 115, 22, 0.6); font-weight: 300; }
/* ================= Applications ================= */
.ff-apps { background: #000; color: #fff; }
.ff-apps-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.ff-app-tile { position: relative; border-radius: 1.5rem; overflow: hidden; background: #18181b; height: 300px; }
.ff-app-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: transform 1s ease, opacity 0.6s ease; }
.ff-app-tile:hover img { transform: scale(1.05); opacity: 1; }
.ff-app-tile .ff-tile-text h3 { font-size: 1.6rem; }
.ff-app-tile .ff-tile-text p { font-weight: 300; }
@media (min-width: 768px) {
.ff-apps-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; }
.ff-app-tile { height: auto; }
.ff-app-tile-1 { grid-column: span 2; grid-row: span 2; }
.ff-app-tile-5 { grid-column: span 2; }
.ff-app-tile .ff-tile-text p { opacity: 0; transform: translateY(12px); transition: all 0.5s ease; }
.ff-app-tile:hover .ff-tile-text p { opacity: 1; transform: none; }
}
/* ================= Video gallery ================= */
.ff-video-player { position: relative; width: 100%; max-width: 64rem; border-radius: 1.5rem; overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.25); margin: 0 auto; }
.ff-video-gallery-shortcode-section { position: relative; left: 50%; display: block; width: 100vw; max-width: none; margin-left: -50vw; margin-right: -50vw; clear: both; box-sizing: border-box; }
.ff-video-gallery-shortcode-section .ff-container { width: min(100%, 80rem); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); box-sizing: border-box; }
@media (max-width: 767px) { .ff-video-player { max-width: 100%; } }
.ff-video-player video { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; transition: opacity 0.4s ease; }
.ff-video-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1) 50%, transparent); pointer-events: none; }
.ff-video-caption { position: absolute; bottom: 0; left: 0; padding: 1.5rem; max-width: 42rem; }
.ff-video-caption h3 { font-size: clamp(0.9rem, 2vw, 1.5rem); font-weight: 700; color: #fff; letter-spacing: -0.04em; margin-bottom: 0.5rem; }
.ff-video-caption p { color: rgba(255, 255, 255, 0.7); font-weight: 300; font-size: 0.9rem; }
.ff-caption-in { animation: ffCaptionIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes ffCaptionIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.ff-video-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .ff-video-thumbs { grid-template-columns: repeat(4, 1fr); } }
.ff-video-thumb { appearance: none; display: block; width: 100%; padding: 0; border: 0; position: relative; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; opacity: 0.6; transition: all 0.3s ease; background: #18181b; cursor: pointer; }
.ff-video-thumb:hover { opacity: 1; }
.ff-video-thumb.is-active { opacity: 1; outline: 2px solid var(--ff-orange); outline-offset: 2px; }
.ff-video-thumb img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; transition: transform 0.5s ease; }
.ff-video-thumb-placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, #27272a, #09090b); }
.ff-video-thumb:hover img { transform: scale(1.08); }
.ff-play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #000; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; padding-left: 2px; }
.ff-thumb-label { position: absolute; bottom: 0.5rem; left: 0.75rem; color: #fff; font-size: 0.75rem; font-weight: 500; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
/* ================= Trends ================= */
.ff-trends { border-top: 1px solid rgba(229, 229, 229, 0.5); border-bottom: 1px solid rgba(229, 229, 229, 0.5); }
.ff-trends-head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .ff-trends-head { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.ff-legend { display: flex; gap: 1.5rem; font-size: 0.875rem; font-weight: 500; color: var(--ff-muted); align-items: center; }
.ff-legend .ff-dot { width: 0.75rem; height: 0.75rem; }
.ff-chart svg { width: 100%; height: 400px; display: block; }
.ff-chart-months { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ff-muted); margin-top: 0.75rem; }
/* ================= Blog ================= */
.ff-blog-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .ff-blog-grid { grid-template-columns: 7fr 5fr; } }
.ff-blog-featured { display: block; }
.ff-blog-featured-media { position: relative; border-radius: 1.5rem; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .ff-blog-featured-media { aspect-ratio: auto; height: 600px; } }
.ff-blog-featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.ff-blog-featured:hover .ff-blog-featured-media img { transform: scale(1.05); }
.ff-blog-cat { position: absolute; top: 1.5rem; left: 1.5rem; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.ff-blog-featured h3 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem; transition: color 0.3s ease; }
.ff-blog-featured:hover h3 { color: var(--ff-orange); }
.ff-blog-featured p { color: var(--ff-muted); font-size: 1.1rem; font-weight: 300; line-height: 1.6; margin-bottom: 1rem; }
.ff-blog-meta { font-size: 0.85rem; color: var(--ff-muted); font-weight: 500; }
.ff-blog-stack { display: flex; flex-direction: column; gap: 2rem; }
.ff-blog-item { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; align-items: center; }
.ff-blog-item-media { border-radius: 1rem; overflow: hidden; aspect-ratio: 1; }
.ff-blog-item-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.ff-blog-item:hover .ff-blog-item-media img { transform: scale(1.05); }
.ff-blog-item-cat { color: var(--ff-orange); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }
.ff-blog-item h4 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; transition: color 0.3s ease; }
.ff-blog-item:hover h4 { color: var(--ff-orange); }
/* ================= Sustainability ================= */
.ff-sust { background: rgba(245, 245, 245, 0.5); }
.ff-sust-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 768px) { .ff-sust-grid { grid-template-columns: 1fr 1fr; } }
.ff-sust-title { margin-bottom: 1.5rem; }
.ff-sust-text { font-size: 1.1rem; color: var(--ff-muted); font-weight: 300; line-height: 1.7; margin-bottom: 2rem; }
.ff-sust-list { list-style: none; padding: 0; margin: 0 0 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ff-sust-list li { display: flex; align-items: center; font-weight: 500; color: rgba(23, 23, 23, 0.8); }
.ff-sust-list .ff-dot { width: 0.4rem; height: 0.4rem; margin-right: 0.75rem; flex-shrink: 0; }
.ff-sust-media { position: relative; aspect-ratio: 1; border-radius: 2.5rem; overflow: hidden; background: var(--ff-card); }
.ff-sust-media img { width: 100%; height: 100%; object-fit: cover; }
/* ================= Stats ================= */
.ff-stats { padding: 6rem 0; border-top: 1px solid rgba(229, 229, 229, 0.5); }
.ff-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; text-align: center; }
@media (min-width: 768px) { .ff-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.ff-stat-value { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; letter-spacing: -0.04em; margin-bottom: 0.5rem; opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
.ff-stat-value.ff-stat-in { opacity: 1; transform: translateY(0); }
.ff-stat-label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-muted); }
/* ================= Social ================= */
.ff-social-head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .ff-social-head { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.ff-social-controls { display: flex; align-items: center; gap: 0.75rem; }
.ff-social-track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1.5rem 1rem; -ms-overflow-style: none; scrollbar-width: none; }
.ff-social-track::-webkit-scrollbar { display: none; }
@media (min-width: 1330px) { .ff-social-track { padding-left: calc((100vw - 1280px) / 2 + 1.5rem); } }
.ff-social-card { position: relative; display: block; text-decoration: none; color: inherit; flex-shrink: 0; scroll-snap-align: start; width: 80vw; max-width: 360px; aspect-ratio: 1; border-radius: 1rem; overflow: hidden; cursor: pointer; }
.ff-social-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.ff-social-card:hover img { transform: scale(1.1); }
.ff-social-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; }
.ff-social-card:hover .ff-social-overlay { opacity: 1; }
.ff-social-overlay p { color: #fff; font-size: 0.95rem; font-weight: 500; line-height: 1.5; }
/* ================= Footer ================= */
.ff-footer { background: #000; color: #fff; padding: 6rem 0 3rem; }
.ff-footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 5rem; }
@media (min-width: 768px) { .ff-footer-grid { grid-template-columns: 1fr 1fr; } }
.ff-footer-logo { font-weight: 700; font-size: 1.9rem; letter-spacing: -0.04em; color: #fff; display: inline-block; margin-bottom: 1.5rem; }
.ff-footer-tagline { color: rgba(255, 255, 255, 0.6); font-weight: 300; max-width: 24rem; line-height: 1.65; margin-bottom: 2rem; }
.ff-footer-email { font-size: 1.5rem; font-weight: 300; color: #fff; transition: color 0.3s ease; }
.ff-footer-email:hover { color: var(--ff-orange); }
.ff-footer-heading { font-weight: 500; color: rgba(255, 255, 255, 0.8); margin-bottom: 1.5rem; font-size: 1rem; }
.ff-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.ff-footer-list a { color: rgba(255, 255, 255, 0.5); transition: color 0.3s ease; }
.ff-footer-list a:hover { color: #fff; }
.ff-footer-link-primary { color: var(--ff-orange) !important; }
.ff-footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; font-size: 0.875rem; color: rgba(255, 255, 255, 0.4); }
@media (min-width: 768px) { .ff-footer-bottom { flex-direction: row; } }
.ff-footer-legal { display: flex; gap: 1.5rem; }
.ff-footer-legal a:hover { color: #fff; }
/* ================= Generic blog templates ================= */
.ff-generic { padding: 10rem 0 6rem; }
.ff-post { margin-bottom: 4rem; }
.ff-post-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin-bottom: 0.75rem; }
.ff-post-title a:hover { color: var(--ff-orange); }
.ff-post-thumb { border-radius: 1.5rem; overflow: hidden; margin: 2rem 0; }
.ff-post-content { font-size: 1.1rem; line-height: 1.75; color: rgba(23, 23, 23, 0.85); margin-top: 1.5rem; }
.ff-post-content img { border-radius: 1rem; }
.ff-pagination { margin-top: 3rem; }
/* ================= Page hero (About / Contact) ================= */
.ff-page-hero { position: relative; height: 70vh; min-height: 520px; background: #000; overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 6rem; }
.ff-page-hero-sm { height: 52vh; min-height: 420px; padding-bottom: 4rem; }
.ff-page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.ff-page-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.25) 100%); }
.ff-page-hero-content { position: relative; z-index: 2; }
.ff-page-hero-title { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 700; color: #fff; letter-spacing: -0.04em; line-height: 1; margin-bottom: 1.25rem; max-width: 48rem; }
.ff-page-hero-sub { font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255,255,255,0.7); font-weight: 300; max-width: 36rem; }
/* ================= About page ================= */
.ff-about-mission { background: #fff; }
.ff-about-mission-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 768px) { .ff-about-mission-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.ff-about-h2 { margin-bottom: 0; }
.ff-about-lead { font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: 400; line-height: 1.65; margin-bottom: 1.5rem; color: var(--ff-fg); }
.ff-about-body { font-size: 1.1rem; color: var(--ff-muted); font-weight: 300; line-height: 1.75; }
/* ff_rich() list formatter */
.ff-rich-list { margin: .6em 0 .6em 1.25em; padding: 0; }
.ff-rich-list li { margin-bottom: .3em; line-height: 1.6; }
/* Timeline */
.ff-about-story { background: var(--ff-secondary); }
.ff-timeline { display: flex; flex-direction: column; gap: 0; }
.ff-timeline-item { display: grid; grid-template-columns: 5rem 2rem 1fr; gap: 0 1.5rem; padding: 2.5rem 0; border-bottom: 1px solid var(--ff-border); align-items: start; }
.ff-timeline-item:last-child { border-bottom: none; }
.ff-timeline-year { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; color: var(--ff-orange); padding-top: 0.15rem; }
.ff-timeline-connector { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.ff-timeline-dot { width: 0.75rem; height: 0.75rem; border-radius: 999px; background: var(--ff-orange); flex-shrink: 0; margin-top: 0.4rem; }
.ff-timeline-line { width: 1px; background: var(--ff-border); flex: 1; min-height: 3rem; }
.ff-timeline-item:last-child .ff-timeline-line { display: none; }
.ff-timeline-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.ff-timeline-text { color: var(--ff-muted); font-weight: 300; line-height: 1.65; }
/* Stats (reused on about page) */
.ff-about-stats-dark { background: var(--ff-fg); }
.ff-about-stats-dark .ff-stat-value { color: #fff; }
.ff-about-stats-dark .ff-stat-label { color: rgba(255,255,255,0.5); }
.ff-about-stats-dark { border-color: transparent; }
/* Values */
.ff-about-values { background: #fff; }
.ff-values-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .ff-values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ff-values-grid { grid-template-columns: repeat(4, 1fr); } }
.ff-value-card { padding: 2.5rem 2rem; border-radius: 1.5rem; border: 1px solid var(--ff-border); background: var(--ff-card); }
.ff-value-icon { color: var(--ff-orange); margin-bottom: 1.5rem; }
.ff-value-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.ff-value-text { color: var(--ff-muted); font-weight: 300; line-height: 1.65; font-size: 0.95rem; }
/* Facility images */
/* Block Editor content section — rendered when an admin adds text directly
in the page editor (appears after the structured Customizer sections). */
.ff-about-editor-content { background: #fff; }
.ff-about-editor-note { max-width: 48rem; margin: 0 auto; }
.ff-about-editor-note p { font-size: 1.0625rem; line-height: 1.8; color: var(--ff-muted); margin-bottom: 1.25rem; }
.ff-about-editor-note h2,.ff-about-editor-note h3 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; color: var(--ff-fg); }
.ff-about-editor-note ul,.ff-about-editor-note ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.ff-about-editor-note li { line-height: 1.8; color: var(--ff-muted); margin-bottom: 0.4rem; }
.ff-about-editor-note a { color: var(--ff-primary); text-decoration: underline; }
.ff-about-facility { padding: 0 0 8rem; }
.ff-about-facility-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .ff-about-facility-grid { grid-template-columns: 5fr 4fr; grid-auto-rows: 280px; } }
.ff-about-facility-media { position: relative; border-radius: 1.5rem; overflow: hidden; }
.ff-about-facility-media img { width: 100%; height: 100%; object-fit: cover; }
.ff-about-facility-media-tall { grid-row: span 2; }
.ff-about-facility-caption { position: absolute; bottom: 1rem; left: 1.25rem; color: rgba(255,255,255,0.75); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.03em; }
/* About CTA */
.ff-about-cta { background: var(--ff-fg); padding: 8rem 0; text-align: center; }
.ff-about-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.ff-about-cta-inner .ff-h2 { color: #fff; }
.ff-about-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
/* ================= Contact page ================= */
.ff-contact-body { padding-top: 6rem; }
.ff-contact-grid { display: grid; grid-template-columns: 1fr; gap: 5rem; }
@media (min-width: 1024px) { .ff-contact-grid { grid-template-columns: 5fr 7fr; gap: 6rem; align-items: start; } }
.ff-contact-h2 { margin-bottom: 1.5rem; }
.ff-contact-info-list { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 2.5rem; margin-bottom: 3rem; }
.ff-contact-info-item { display: flex; gap: 1.25rem; align-items: flex-start; }
.ff-contact-info-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--ff-secondary); display: flex; align-items: center; justify-content: center; color: var(--ff-orange); flex-shrink: 0; }
.ff-contact-link { font-size: 0.95rem; color: var(--ff-fg); font-weight: 400; line-height: 1.6; display: block; }
a.ff-contact-link:hover { color: var(--ff-orange); }
.ff-contact-offices { padding-top: 2.5rem; border-top: 1px solid var(--ff-border); }
.ff-contact-offices-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.ff-contact-offices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; }
.ff-contact-office-city { font-size: 1rem; font-weight: 600; margin: 0.4rem 0 0.25rem; }
.ff-contact-office-addr { font-size: 0.875rem; color: var(--ff-muted); line-height: 1.5; }
/* Form */
.ff-contact-form-wrap { background: #fff; border-radius: 2rem; border: 1px solid var(--ff-border); padding: 3rem; box-shadow: 0 25px 60px -20px rgba(0,0,0,0.08); }
.ff-contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.ff-form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .ff-form-row { grid-template-columns: 1fr 1fr; } }
.ff-form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.ff-form-label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ff-muted); }
.ff-form-input { width: 100%; padding: 0.9rem 1.1rem; border: 1px solid var(--ff-border); border-radius: 0.75rem; font-family: inherit; font-size: 1rem; color: var(--ff-fg); background: var(--ff-card); transition: border-color 0.25s ease, box-shadow 0.25s ease; outline: none; }
.ff-form-input:focus { border-color: var(--ff-orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.12); }
.ff-form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.ff-form-textarea { resize: vertical; min-height: 140px; }
.ff-form-note { font-size: 0.8rem; color: var(--ff-muted); text-align: center; margin-top: 0.5rem; }
.ff-form-success { text-align: center; padding: 4rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.ff-form-success svg { color: var(--ff-orange); }
.ff-form-success h3 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; }
.ff-form-success p { color: var(--ff-muted); font-weight: 300; }
.ff-form-error { background: #fee2e2; color: #991b1b; border-radius: 0.75rem; padding: 1rem 1.25rem; font-size: 0.9rem; }
/* ================= Blog archive ================= */
.ff-blog-archive-hero { background: var(--ff-secondary); padding: 10rem 0 4rem; }
.ff-blog-archive-hero-inner { display: flex; flex-direction: column; gap: 1rem; }
.ff-blog-archive-title { margin: 0; }
.ff-blog-archive-sub { max-width: 48rem; margin: 0; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.7; }
.blog .ff-navbar.is-scrolled,
.archive .ff-navbar.is-scrolled,
.single-post .ff-navbar.is-scrolled { background: rgba(9, 9, 11, 0.97); border-color: rgba(255, 255, 255, 0.1); }
.blog .ff-navbar.is-scrolled .ff-logo,
.archive .ff-navbar.is-scrolled .ff-logo,
.single-post .ff-navbar.is-scrolled .ff-logo,
.blog .ff-navbar.is-scrolled .ff-nav-links a,
.archive .ff-navbar.is-scrolled .ff-nav-links a,
.single-post .ff-navbar.is-scrolled .ff-nav-links a { color: rgba(255, 255, 255, 0.9); }
.blog .ff-navbar.is-scrolled .ff-nav-cta,
.archive .ff-navbar.is-scrolled .ff-nav-cta,
.single-post .ff-navbar.is-scrolled .ff-nav-cta { background: var(--ff-orange); color: #fff; }
.blog .ff-navbar.is-scrolled .ff-nav-burger span,
.archive .ff-navbar.is-scrolled .ff-nav-burger span,
.single-post .ff-navbar.is-scrolled .ff-nav-burger span { background: #fff; }
.ff-article-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.ff-article-filter { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.65rem 1.15rem; border: 1px solid var(--ff-border); border-radius: 999px; color: var(--ff-muted); font-size: 0.82rem; font-weight: 600; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.ff-article-filter:hover { border-color: var(--ff-orange); color: var(--ff-orange); transform: translateY(-1px); }
.ff-article-filter.is-active { background: var(--ff-fg); border-color: var(--ff-fg); color: #fff; }
.ff-blog-listing { padding-top: 5rem; }
.ff-blog-featured-article { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 5rem; padding-bottom: 5rem; border-bottom: 1px solid var(--ff-border); }
@media (min-width: 1024px) { .ff-blog-featured-article { grid-template-columns: 3fr 2fr; gap: 4rem; align-items: center; } }
.ff-blog-featured-article-media { position: relative; border-radius: 1.5rem; overflow: hidden; aspect-ratio: 4/3; display: block; }
.ff-blog-featured-article-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.ff-blog-featured-article:hover .ff-blog-featured-article-media img { transform: scale(1.04); }
.ff-blog-featured-article-body { display: flex; flex-direction: column; gap: 1.25rem; }
.ff-blog-featured-article-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.ff-blog-featured-article-title a:hover { color: var(--ff-orange); }
.ff-blog-excerpt { color: var(--ff-muted); font-weight: 300; line-height: 1.65; font-size: 1.1rem; }
.ff-blog-posts-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 640px) { .ff-blog-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ff-blog-posts-grid { grid-template-columns: repeat(3, 1fr); } }
.ff-blog-post-card { display: flex; flex-direction: column; }
.ff-blog-card-media { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 4/3; display: block; }
.ff-blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.ff-blog-post-card:hover .ff-blog-card-media img { transform: scale(1.05); }
.ff-blog-card-body { padding: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.ff-blog-card-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.ff-blog-card-title a:hover { color: var(--ff-orange); }
.ff-blog-card-excerpt { color: var(--ff-muted); font-size: 0.9rem; font-weight: 300; line-height: 1.6; }
.ff-blog-empty { padding: 5rem 0; color: var(--ff-muted); }
.ff-pagination { margin-top: 4rem; }
.ff-pagination .nav-links { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.ff-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--ff-border); font-size: 0.9rem; font-weight: 500; transition: all 0.25s ease; }
.ff-pagination .page-numbers:hover { border-color: var(--ff-orange); color: var(--ff-orange); }
.ff-pagination .page-numbers.current { background: var(--ff-fg); color: #fff; border-color: var(--ff-fg); }
.ff-pagination .prev, .ff-pagination .next { width: auto; padding: 0 1.25rem; }
/* ================= Single post ================= */
.ff-article-hero { position: relative; min-height: 60vh; background: #000; overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 5rem; }
.ff-article-hero-media { position: absolute; inset: 0; }
.ff-article-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.ff-article-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 55%, transparent 100%); }
.ff-article-hero-placeholder { position: absolute; inset: 0; background: var(--ff-fg); }
.ff-article-hero-content { position: relative; z-index: 2; }
.ff-article-title { font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 700; color: #fff; letter-spacing: -0.04em; line-height: 1; margin: 1rem 0 2rem; max-width: 50rem; }
.ff-article-meta { display: flex; align-items: center; gap: 1rem; }
.ff-article-avatar { width: 3rem; height: 3rem; border-radius: 999px; object-fit: cover; }
.ff-article-author { font-weight: 600; color: #fff; font-size: 0.95rem; }
.ff-article-date { font-size: 0.85rem; color: rgba(255,255,255,0.55); }
.ff-article-body { padding: 5rem 0; }
.ff-container-article { max-width: 860px; position: relative; }
.ff-article-share { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ff-border); }
.ff-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--ff-border); color: var(--ff-muted); transition: all 0.25s ease; }
.ff-share-btn:hover { border-color: var(--ff-orange); color: var(--ff-orange); }
.ff-article-content { font-size: 1.15rem; line-height: 1.8; color: rgba(23,23,23,0.85); }
.ff-article-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.03em; margin: 2.5rem 0 1rem; color: var(--ff-fg); }
.ff-article-content h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 2rem 0 0.75rem; }
.ff-article-content p { margin: 0 0 1.5rem; }
.ff-article-content ul, .ff-article-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.ff-article-content li { margin-bottom: 0.5rem; }
.ff-article-content blockquote { border-left: 4px solid var(--ff-orange); padding-left: 1.5rem; margin: 2rem 0; font-size: 1.25rem; font-weight: 400; font-style: italic; color: var(--ff-muted); }
.ff-article-content img { border-radius: 1rem; margin: 2rem 0; }
.ff-article-content a { color: var(--ff-orange); text-decoration: underline; text-underline-offset: 3px; }
/* ---- Long-form block content: images, galleries, embeds, captions, tables ---- */
.ff-article-intro { color: rgba(255,255,255,0.7); max-width: 42rem; margin-bottom: 2rem; }
.ff-article-content img { max-width: 100%; height: auto; }
.ff-article-content figure { margin: 2rem 0; }
.ff-article-content figure img { margin: 0; }
.ff-article-content figcaption,
.ff-article-content .wp-caption-text { font-size: 0.85rem; color: var(--ff-muted); text-align: center; margin-top: 0.75rem; }
.ff-article-content .alignleft { float: left; margin: 0.5rem 2rem 1.5rem 0; max-width: 50%; }
.ff-article-content .alignright { float: right; margin: 0.5rem 0 1.5rem 2rem; max-width: 50%; }
.ff-article-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.ff-article-content .alignwide { margin-left: -4rem; margin-right: -4rem; max-width: calc(100% + 8rem); }
@media (max-width: 1024px) { .ff-article-content .alignwide { margin-left: 0; margin-right: 0; max-width: 100%; } }
/* ═══ Gallery blocks — shared rules for ALL content wrapper classes ══════ */
/* Block Editor .wp-block-gallery */
.ff-article-content .wp-block-gallery,
.ff-about-body .wp-block-gallery,
.ff-about-editor-note .wp-block-gallery,
.ff-seo-content .wp-block-gallery,
.ff-media-editor-content .wp-block-gallery,
.entry-content .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0; }
.ff-article-content .wp-block-gallery .wp-block-image,
.ff-about-body .wp-block-gallery .wp-block-image,
.ff-about-editor-note .wp-block-gallery .wp-block-image,
.ff-seo-content .wp-block-gallery .wp-block-image,
.ff-media-editor-content .wp-block-gallery .wp-block-image,
.entry-content .wp-block-gallery .wp-block-image { flex: 1 1 calc(50% - 0.375rem); margin: 0; }
.ff-article-content .wp-block-gallery.columns-3 .wp-block-image,
.ff-about-body .wp-block-gallery.columns-3 .wp-block-image,
.ff-about-editor-note .wp-block-gallery.columns-3 .wp-block-image,
.ff-seo-content .wp-block-gallery.columns-3 .wp-block-image,
.ff-media-editor-content .wp-block-gallery.columns-3 .wp-block-image,
.entry-content .wp-block-gallery.columns-3 .wp-block-image { flex-basis: calc(33.333% - 0.5rem); }
.ff-article-content .wp-block-gallery.columns-4 .wp-block-image,
.ff-about-body .wp-block-gallery.columns-4 .wp-block-image,
.ff-about-editor-note .wp-block-gallery.columns-4 .wp-block-image,
.entry-content .wp-block-gallery.columns-4 .wp-block-image { flex-basis: calc(25% - 0.56rem); }
.ff-article-content .wp-block-gallery img,
.ff-about-body .wp-block-gallery img,
.ff-about-editor-note .wp-block-gallery img,
.ff-seo-content .wp-block-gallery img,
.ff-media-editor-content .wp-block-gallery img,
.entry-content .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.75rem; margin: 0; }
/* Block Editor new-format galleries (figcaption + wrapping ul) */
.wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0; }
.wp-block-gallery.has-nested-images figure.wp-block-image { flex: 1 1 calc(50% - 0.375rem); margin: 0; }
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image { flex-basis: calc(33.333% - 0.5rem); }
.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image { flex-basis: calc(25% - 0.56rem); }
.wp-block-gallery.has-nested-images img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.75rem; display: block; }
/* Legacy [gallery] shortcode — all wrappers */
.ff-article-content .gallery,
.ff-about-body .gallery,
.ff-about-editor-note .gallery,
.ff-seo-content .gallery,
.entry-content .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 2rem 0; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item { margin: 0; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.75rem; margin: 0; display: block; }
/* ═══ Custom .ff-gallery — Customizer / shortcode / meta-box galleries ═══ */
.ff-gallery { display: grid; gap: 0.75rem; margin: 2.5rem 0; }
.ff-gallery.ff-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ff-gallery.ff-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ff-gallery.ff-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ff-gallery-item { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1rem; cursor: zoom-in; position: relative; background: var(--ff-secondary); }
.ff-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.38s ease; }
.ff-gallery-item:hover img { transform: scale(1.06); }
.ff-gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.18) 0%, transparent 55%); opacity: 0; transition: opacity .3s; pointer-events: none; border-radius: inherit; }
.ff-gallery-item:hover::after { opacity: 1; }
@media (max-width: 768px) {
.ff-gallery.ff-gallery-cols-3,
.ff-gallery.ff-gallery-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.ff-gallery,
.wp-block-gallery.has-nested-images,
.ff-about-body .wp-block-gallery { flex-direction: column; }
.ff-gallery.ff-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ff-gallery.ff-gallery-cols-3,
.ff-gallery.ff-gallery-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
/* ═══ Lightbox overlay ════════════════════════════════════════════════════ */
body.ff-lb-body-lock { overflow: hidden; }
.ff-lb-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.ff-lb-overlay.ff-lb-open { opacity: 1; pointer-events: all; }
.ff-lb-stage { display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 86vh; }
.ff-lb-img { max-width: 88vw; max-height: 84vh; object-fit: contain; border-radius: 0.75rem; display: block; opacity: 0; transition: opacity .22s ease; box-shadow: 0 40px 100px rgba(0,0,0,.55); }
.ff-lb-img.ff-lb-loaded { opacity: 1; }
/* min 44×44 px — Apple HIG / WCAG 2.5.5 touch-target recommendation */
.ff-lb-close { position: absolute; top: 1rem; right: 1.25rem; background: rgba(255,255,255,.13); border: 0; color: #fff; font-size: 1.4rem; line-height: 1; width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 2; }
.ff-lb-close:hover { background: rgba(255,255,255,.28); }
.ff-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.13); border: 0; color: #fff; font-size: 2.2rem; line-height: 1; width: 3rem; height: 3rem; min-width: 44px; min-height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; z-index: 2; }
.ff-lb-nav:hover { background: rgba(255,255,255,.28); }
.ff-lb-prev { left: 1rem; }
.ff-lb-next { right: 1rem; }
.ff-lb-counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.5); font-size: .8rem; letter-spacing: .05em; white-space: nowrap; pointer-events: none; }
@media (max-width: 600px) { .ff-lb-prev { left: .25rem; } .ff-lb-next { right: .25rem; } }
/* Video embeds (YouTube etc) — responsive 16:9 */
.ff-article-content .wp-block-embed { margin: 2rem 0; }
.ff-article-content .wp-block-embed__wrapper { position: relative; border-radius: 1rem; overflow: hidden; }
.ff-article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.ff-article-content .wp-block-embed.is-type-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.ff-article-content > iframe[src*="youtube"],
.ff-article-content > iframe[src*="youtu.be"],
.ff-article-content > iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 1rem; margin: 2rem 0; }
.ff-article-content video { width: 100%; border-radius: 1rem; margin: 2rem 0; }
/* Tables */
.ff-article-content table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.95rem; }
.ff-article-content th { text-align: left; font-weight: 600; background: var(--ff-secondary); }
.ff-article-content th, .ff-article-content td { padding: 0.75rem 1rem; border: 1px solid var(--ff-border); }
.ff-article-content .wp-block-table { margin: 2rem 0; overflow-x: auto; }
.ff-article-content .wp-block-table table { margin: 0; }
/* Buttons & separators */
.ff-article-content .wp-block-button__link { display: inline-flex; padding: 0.85rem 1.75rem; border-radius: 999px; background: var(--ff-orange); color: #fff; font-weight: 600; text-decoration: none; transition: filter 0.25s ease; }
.ff-article-content .wp-block-button__link:hover { filter: brightness(1.1); }
.ff-article-content hr, .ff-article-content .wp-block-separator { border: 0; border-top: 1px solid var(--ff-border); margin: 3rem 0; }
/* Pull quote */
.ff-article-content .wp-block-pullquote { border-top: 4px solid var(--ff-orange); border-bottom: 1px solid var(--ff-border); padding: 2rem 0; margin: 2.5rem 0; text-align: left; }
.ff-article-content .wp-block-pullquote p { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; font-style: normal; color: var(--ff-fg); margin: 0; }
.ff-article-content .wp-block-pullquote cite { display: block; margin-top: 0.75rem; font-size: 0.85rem; color: var(--ff-muted); font-style: normal; }
.ff-article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--ff-border); }
.ff-tag { display: inline-flex; padding: 0.4rem 1rem; border-radius: 999px; background: var(--ff-secondary); border: 1px solid var(--ff-border); font-size: 0.8rem; font-weight: 500; color: var(--ff-muted); transition: all 0.25s ease; }
.ff-tag:hover { border-color: var(--ff-orange); color: var(--ff-orange); }
.ff-author-card { display: flex; gap: 1.5rem; align-items: flex-start; padding: 2.5rem; background: var(--ff-card); border-radius: 1.5rem; border: 1px solid var(--ff-border); margin-top: 3rem; }
.ff-author-avatar { width: 5rem; height: 5rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.ff-author-name { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.4rem 0 0.75rem; }
.ff-author-bio { font-size: 0.95rem; color: var(--ff-muted); line-height: 1.6; }
.ff-article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--ff-border); }
.ff-article-nav-item { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--ff-border); transition: border-color 0.25s ease; }
.ff-article-nav-item:hover { border-color: var(--ff-orange); }
.ff-article-nav-item-right { text-align: right; }
.ff-article-nav-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.ff-related { padding-top: 2rem; border-top: 1px solid var(--ff-border); }
.ff-related-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 3rem; }
/* ================= Navbar links to pages ================= */
.ff-nav-page { color: rgba(255,255,255,0.75); }
.ff-navbar.is-scrolled .ff-nav-page { color: rgba(23,23,23,0.7); }
/* ================= Product type cards (Angles hero) ================= */
.ff-prod-hero-types { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 1024px) { .ff-prod-hero-types { flex-direction: row; } .ff-prod-hero-types .ff-type-card { flex: 1 1 0; min-width: 0; } }
.ff-type-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); border-radius: 1.5rem; padding: 1.75rem; display: flex; gap: 1.5rem; align-items: center; transition: all 0.3s ease; }
.ff-type-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(249,115,22,0.4); }
.ff-type-card-shape { flex-shrink: 0; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background: rgba(249,115,22,0.08); border-radius: 1rem; }
.ff-type-card-body { display: flex; flex-direction: column; gap: 0.35rem; }
.ff-type-card-name { font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.ff-type-card-label { font-size: 0.75rem; font-weight: 500; color: var(--ff-orange); letter-spacing: 0.03em; }
.ff-type-card-sizes { font-size: 0.9rem; color: rgba(255,255,255,0.65); font-weight: 400; }
.ff-type-card-use { font-size: 0.78rem; color: rgba(255,255,255,0.4); font-weight: 400; margin-top: 0.1rem; }
/* ================= Mechanical properties cards (Angles specs) ================= */
.ff-specs-mech-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; margin-bottom: 4rem; }
.ff-specs-mech-card { background: var(--ff-secondary); border: 1px solid var(--ff-border); border-radius: 1.5rem; padding: 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ff-specs-mech-featured { border-color: var(--ff-orange); box-shadow: 0 20px 50px -15px rgba(249,115,22,0.15); background: #fff7ed; }
.ff-specs-mech-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-muted); }
.ff-specs-mech-value { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.04em; color: var(--ff-fg); line-height: 1; }
.ff-specs-mech-featured .ff-specs-mech-value { color: var(--ff-orange); }
.ff-specs-mech-value span { font-size: 1rem; font-weight: 400; color: var(--ff-muted); }
.ff-specs-mech-std { font-size: 0.78rem; color: var(--ff-muted); }
/* ================= FAQ section (TMT page) ================= */
.ff-prod-faq { background: var(--ff-secondary); }
.ff-faq { display: flex; flex-direction: column; border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--ff-border); }
.ff-faq-item { border-bottom: 1px solid var(--ff-border); background: #fff; }
.ff-faq-item:last-child { border-bottom: none; }
.ff-faq-q { display: flex; align-items: center; justify-content: space-between; padding: 1.75rem 2rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; list-style: none; gap: 1.5rem; }
.ff-faq-q::-webkit-details-marker { display: none; }
.ff-faq-q::after { content: '+'; font-size: 1.75rem; font-weight: 300; color: var(--ff-orange); flex-shrink: 0; line-height: 1; }
details[open] > .ff-faq-q::after { content: '–'; }
.ff-faq-item:hover .ff-faq-q { color: var(--ff-orange); }
.ff-faq-a { padding: 0 2rem 1.75rem; }
.ff-faq-a p { font-size: 0.95rem; color: var(--ff-muted); font-weight: 300; line-height: 1.8; }
/* ================= What Are section (Angles page) ================= */
.ff-prod-what { background: var(--ff-secondary); }
.ff-prod-what-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.ff-prod-what-card { background: #fff; border: 1px solid var(--ff-border); border-radius: 2rem; padding: 3rem; transition: box-shadow 0.3s ease; }
.ff-prod-what-card:hover { box-shadow: 0 20px 50px -15px rgba(0,0,0,0.1); }
.ff-prod-what-icon { width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; background: rgba(249,115,22,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem; }
.ff-prod-what-name { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.4rem; }
.ff-prod-what-shape { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ff-orange); margin-bottom: 1.25rem; display: block; }
.ff-prod-what-desc { font-size: 1rem; color: var(--ff-muted); font-weight: 300; line-height: 1.75; margin-bottom: 1.75rem; }
.ff-prod-what-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.ff-prod-what-list li { display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.95rem; color: var(--ff-fg); font-weight: 400; line-height: 1.5; }
.ff-prod-what-list li::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--ff-orange); flex-shrink: 0; margin-top: 0.5em; }
#ang-types .ff-prod-what-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
.ff-prod-what-grid { grid-template-columns: 1fr; }
#ang-types .ff-prod-what-grid { grid-template-columns: 1fr; }
}
/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
.ff-reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ================= Product pages (TMT / Billets / Angles) ================= */
/* TMT child product heroes */
.ff-tmt-child-hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; padding: 9rem 0 6rem; background: #090909; color: #fff; isolation: isolate; }
.ff-tmt-child-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.7) contrast(1.12); z-index: -3; }
.ff-tmt-child-hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(7,7,8,.98) 0%, rgba(7,7,8,.9) 42%, rgba(7,7,8,.34) 100%), linear-gradient(0deg, #090909 0%, transparent 45%); }
.ff-tmt-child-hero::after { content: ""; position: absolute; z-index: -1; width: 38rem; height: 38rem; right: -8rem; top: 15%; border-radius: 50%; background: var(--ff-child-accent); opacity: .2; filter: blur(110px); }
.ff-tmt-child-hero-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; width: 100%; }
.ff-tmt-child-hero-copy { max-width: 45rem; }
.ff-tmt-child-back { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 2.25rem; color: rgba(255,255,255,.5); font-size: .72rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; transition: color .25s ease; }
.ff-tmt-child-back:hover { color: #fff; }
.ff-tmt-child-hero .ff-eyebrow { color: var(--ff-child-accent); }
.ff-tmt-child-hero-title { max-width: 42rem; color: #fff; font-size: clamp(3.25rem, 6.7vw, 6.5rem); line-height: .92; letter-spacing: -.06em; }
.ff-tmt-child-hero-tagline { max-width: 40rem; margin-top: 1.5rem; color: #fff; font-size: clamp(1.3rem, 2.3vw, 2rem); font-weight: 600; line-height: 1.22; letter-spacing: -.025em; }
.ff-tmt-child-hero-intro { max-width: 39rem; margin-top: 1.25rem; color: rgba(255,255,255,.63); font-size: 1.05rem; line-height: 1.75; }
.ff-tmt-child-visual { position: relative; min-height: 31rem; display: grid; place-items: center; }
.ff-tmt-child-orbit { position: absolute; width: min(31rem, 95%); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(255,255,255,.018), 0 0 0 8rem rgba(255,255,255,.012); }
.ff-tmt-child-logo-card { position: relative; width: min(25rem, 88%); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(255,255,255,.25); border-radius: 2rem; background: rgba(255,255,255,.96); box-shadow: 0 35px 90px -35px rgba(0,0,0,.8); transform: rotate(-2deg); }
.ff-tmt-child-logo-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); pointer-events: none; }
.ff-tmt-child-logo-card img { width: 100%; max-height: 11rem; object-fit: contain; }
.ff-tmt-child-stat { position: absolute; right: 0; bottom: 1.4rem; min-width: 12rem; padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: rgba(12,12,13,.76); backdrop-filter: blur(18px); box-shadow: 0 18px 40px -20px #000; }
.ff-tmt-child-stat strong, .ff-tmt-child-stat span { display: block; }
.ff-tmt-child-stat strong { color: var(--ff-child-accent); font-size: 1.25rem; }
.ff-tmt-child-stat span { margin-top: .25rem; color: rgba(255,255,255,.58); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.ff-tmt-child-content { background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%); }
.ff-tmt-child-content .ff-seo-cardified { padding-top: 0; }
@media (max-width: 900px) {
.ff-tmt-child-hero { min-height: 0; padding: 8rem 0 5rem; }
.ff-tmt-child-hero-layout { grid-template-columns: 1fr; gap: 3.5rem; }
.ff-tmt-child-visual { min-height: 23rem; }
.ff-tmt-child-logo-card { width: min(23rem, 82%); }
.ff-tmt-child-stat { right: 5%; }
}
@media (max-width: 620px) {
.ff-tmt-child-hero { padding: 7rem 0 4rem; }
.ff-tmt-child-hero-title { font-size: clamp(2.8rem, 14vw, 4.2rem); }
.ff-tmt-child-hero-tagline { font-size: 1.2rem; }
.ff-tmt-child-visual { min-height: 18rem; }
.ff-tmt-child-stat { right: 0; bottom: 0; min-width: 10.5rem; }
.ff-tmt-child-logo-card { border-radius: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
.ff-tmt-child-logo-card { transform: none; }
}
/* Hero */
.ff-prod-hero { position: relative; display: flex; align-items: center; min-height: 92vh; padding: 9rem 0 6rem; background: #0a0a0a; color: #fff; overflow: hidden; }
.ff-prod-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.ff-prod-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.95), rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.35)); }
.ff-prod-hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; width: 100%; }
.ff-prod-hero-title { font-size: clamp(2.75rem, 6vw, 4.75rem); font-weight: 700; line-height: 1.02; margin-bottom: 1.25rem; color: #fff; }
.ff-prod-hero-tagline { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 300; color: var(--ff-orange); margin-bottom: 1.25rem; }
.ff-prod-hero-desc { font-size: 1.05rem; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 34rem; }
.ff-prod-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.ff-prod-hero-grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
#ff-page-bil .ff-prod-hero-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ff-grade-pill { min-width: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 1.25rem; padding: 1.15rem 1rem; transition: border-color .3s, transform .3s; }
.ff-grade-pill:hover { border-color: rgba(249,115,22,0.55); transform: translateY(-3px); }
.ff-grade-pill-name { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem; }
.ff-grade-pill-yield { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.ff-grade-pill-yield span { font-size: 0.75rem; font-weight: 400; color: rgba(255,255,255,0.45); letter-spacing: 0; }
.ff-grade-pill-tag { font-size: 0.75rem; color: var(--ff-orange); margin-top: 0.75rem; letter-spacing: 0.02em; }
.ff-grade-pill-tag .ff-tmt-grade-logo { display: block; width: 100%; max-width: none; height: 3.75rem; min-height: 0; margin: 0; padding: .35rem; border: 0; border-radius: .65rem; background: #fff; object-fit: contain; object-position: center; }
/* Quick stats bar */
.ff-prod-quickbar { background: var(--ff-fg); color: #fff; padding: 2.25rem 0; }
.ff-prod-quickbar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.ff-prod-quickstat { text-align: center; flex: 1 1 auto; }
.ff-prod-quickstat-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ff-orange); }
.ff-prod-quickstat-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 0.35rem; }
.ff-prod-quickbar-sep { width: 1px; height: 2.75rem; background: rgba(255,255,255,0.15); flex: 0 0 auto; }
/* Overview */
.ff-prod-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.ff-prod-overview-lead { font-size: 1.3rem; font-weight: 300; line-height: 1.6; color: var(--ff-fg); margin-bottom: 1.25rem; }
.ff-prod-overview-media { position: relative; }
.ff-prod-overview-media > img { width: 100%; height: 32rem; object-fit: cover; border-radius: 1.5rem; }
/* Angles & Channels: make the overview image 15% wider than the text column,
while preserving a centered, contained two-column composition. */
@media (min-width: 901px) {
.ff-ang-overview .ff-prod-overview-grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
.ff-ang-overview .ff-prod-overview-media { align-self: center; justify-self: end; width: 100%; }
}
.ff-prod-badge { position: absolute; left: -1.25rem; bottom: -1.5rem; background: var(--ff-fg); color: #fff; border-radius: 1.25rem; padding: 1.4rem 1.75rem; box-shadow: 0 24px 48px -12px rgba(0,0,0,0.35); }
.ff-prod-badge-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ff-orange); }
.ff-prod-badge-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 0.25rem; }
.ff-prod-certs { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 2.25rem; }
.ff-prod-cert { display: flex; align-items: center; gap: 0.85rem; font-size: 0.95rem; font-weight: 500; }
.ff-prod-cert-icon { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: 0.85rem; background: rgba(249,115,22,0.1); color: var(--ff-orange); display: flex; align-items: center; justify-content: center; }
/* Key features */
.ff-prod-features { background: var(--ff-secondary); }
.ff-prod-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ff-prod-feat-card { background: #fff; border: 1px solid var(--ff-border); border-radius: 1.5rem; padding: 2.25rem; transition: transform .35s, box-shadow .35s, border-color .35s; }
.ff-prod-feat-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.18); border-color: rgba(249,115,22,0.35); }
.ff-prod-feat-icon { width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: rgba(249,115,22,0.1); color: var(--ff-orange); display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; }
.ff-prod-feat-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.6rem; }
.ff-prod-feat-text { font-size: 0.95rem; line-height: 1.65; color: var(--ff-muted); }
/* Technical specs */
.ff-specs-grade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 4.5rem; }
.ff-specs-grade-card { position: relative; border: 1px solid var(--ff-border); border-radius: 1.5rem; padding: 2.25rem 1.75rem; display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s; }
.ff-specs-grade-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.2); }
.ff-specs-grade-card.is-featured { border: 2px solid var(--ff-orange); box-shadow: 0 14px 36px -14px rgba(249,115,22,0.35); }
.ff-specs-grade-badge { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: var(--ff-orange); color: #fff; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 999px; white-space: nowrap; }
.ff-specs-grade-name { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
.ff-specs-grade-yield-big { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ff-specs-grade-unit { font-size: 0.8rem; margin-top: 0.4rem; }
.ff-specs-grade-list { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; flex: 1; }
.ff-specs-grade-list li { font-size: 0.85rem; line-height: 1.5; padding: 0.55rem 0; border-top: 1px solid rgba(115,115,115,0.15); }
.ff-specs-grade-cta { display: block; text-align: center; padding: 0.85rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; transition: opacity .25s, transform .25s; }
.ff-specs-grade-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.ff-specs-table-wrap { background: var(--ff-card); border: 1px solid var(--ff-border); border-radius: 1.5rem; padding: 2.5rem; }
.ff-specs-table-title { font-size: 1.35rem; font-weight: 600; margin-bottom: 1.5rem; }
.ff-specs-table-scroll { overflow-x: auto; }
.ff-specs-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ff-specs-table th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-muted); text-align: left; padding: 0.9rem 1rem; border-bottom: 2px solid var(--ff-border); white-space: nowrap; }
.ff-specs-table td { font-size: 0.95rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--ff-border); }
.ff-specs-table tbody tr:hover { background: rgba(249,115,22,0.04); }
.ff-specs-table td:first-child { font-weight: 600; }
.ff-specs-table-note { font-size: 0.8rem; color: var(--ff-muted); margin-top: 1.25rem; }
.ff-tmt-sections { display: flex; flex-direction: column; }
.ff-tmt-comparison { background: var(--ff-secondary); }
.ff-tmt-comparison-heading { max-width: 62rem; margin-bottom: 3.5rem; }
.ff-tmt-comparison-heading .ff-h2 { max-width: 58rem; margin-left: 0; text-align: left; }
.ff-tmt-comparison-heading .ff-about-body { max-width: 54rem; }
.ff-tmt-comparison-card { overflow: hidden; background: var(--ff-card); border: 1px solid var(--ff-border); border-radius: 1.75rem; box-shadow: 0 18px 55px rgba(23,23,23,.07); }
.ff-tmt-comparison-scroll { overflow-x: auto; outline: none; }
.ff-tmt-comparison-scroll:focus-visible { box-shadow: inset 0 0 0 3px rgba(249,115,22,.48); }
.ff-tmt-comparison-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }
.ff-tmt-comparison-table th,
.ff-tmt-comparison-table td { padding: 1.25rem 1.5rem; text-align: left; vertical-align: top; }
.ff-tmt-comparison-table thead { background: var(--ff-fg); color: #fff; }
.ff-tmt-comparison-table thead th { font-size: 1rem; line-height: 1.35; border-left: 1px solid rgba(255,255,255,.1); }
.ff-tmt-comparison-table thead th:first-child { width: 23%; border-left: 0; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ff-tmt-comparison-table thead th:nth-child(2),
.ff-tmt-comparison-table thead th:nth-child(3) { width: 38.5%; }
.ff-tmt-comparison-table thead th:nth-child(3) { background: var(--ff-orange); }
.ff-tmt-comparison-table thead th > span { display: block; margin-bottom: .3rem; color: var(--ff-orange); font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ff-tmt-comparison-table thead th:nth-child(3) > span { color: rgba(255,255,255,.72); }
.ff-tmt-comparison-table tbody tr:nth-child(even) { background: rgba(245,245,245,.72); }
.ff-tmt-comparison-table tbody th,
.ff-tmt-comparison-table tbody td { border-top: 1px solid var(--ff-border); font-size: .9rem; line-height: 1.65; }
.ff-tmt-comparison-table tbody th { color: var(--ff-fg); font-weight: 700; }
.ff-tmt-comparison-table tbody td { color: var(--ff-muted); }
.ff-tmt-comparison-note { max-width: 48rem; margin-top: 1.25rem; color: var(--ff-muted); font-size: .78rem; line-height: 1.65; }
.ff-mechanical-properties-card { position: relative; overflow: hidden; padding: 0; border-color: rgba(249,115,22,0.22); box-shadow: 0 24px 70px -45px rgba(17,24,39,0.45); }
.ff-mechanical-properties-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--ff-orange), #fbbf24); }
.ff-mechanical-properties-head { padding: 2.25rem 2.5rem 1.75rem; background: linear-gradient(135deg, #fff 0%, #fffaf5 100%); border-bottom: 1px solid var(--ff-border); }
.ff-mechanical-properties-kicker { display: inline-block; margin-bottom: 0.65rem; color: var(--ff-orange); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.ff-mechanical-properties-head .ff-specs-table-title { margin-bottom: 0.45rem; font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.ff-mechanical-properties-head p { max-width: 42rem; color: var(--ff-muted); font-size: 0.92rem; line-height: 1.65; }
.ff-mechanical-properties-table { min-width: 0; }
.ff-mechanical-properties-table th { padding: 1rem 2.5rem; color: rgba(255,255,255,0.72); background: #171717; border-bottom: 0; }
.ff-mechanical-properties-table th:first-child { width: 60%; }
.ff-mechanical-properties-table td { padding: 1.05rem 2.5rem; border-bottom-color: rgba(115,115,115,0.12); }
.ff-mechanical-properties-table td:last-child { color: var(--ff-fg); font-weight: 650; }
.ff-mechanical-properties-table tbody tr:nth-child(even) { background: rgba(249,115,22,0.035); }
.ff-mechanical-properties-table tbody tr:last-child td { border-bottom: 0; }
.ff-mechanical-properties-table tbody tr:hover { background: rgba(249,115,22,0.08); }
/* Applications */
.ff-prod-apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ff-prod-app-tile { background: #fff; border: 1px solid var(--ff-border); border-radius: 1.5rem; overflow: hidden; transition: transform .35s, box-shadow .35s; }
.ff-prod-app-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.18); }
.ff-prod-app-media { position: relative; height: 15rem; overflow: hidden; }
.ff-prod-app-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.ff-prod-app-tile:hover .ff-prod-app-media img { transform: scale(1.05); }
.ff-prod-app-body { padding: 1.75rem 2rem 2rem; }
.ff-prod-app-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.6rem; }
.ff-prod-app-text { font-size: 0.95rem; line-height: 1.65; color: var(--ff-muted); }
#bil-applications .ff-prod-apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Quality & process (dark band) */
.ff-prod-process { background: var(--ff-fg); color: #fff; padding: 8rem 0; }
.ff-prod-process .ff-h2 { color: #fff; }
.ff-prod-process .ff-about-body { color: rgba(255,255,255,0.6); }
.ff-prod-process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.ff-prod-process-media img { width: 100%; height: 34rem; object-fit: cover; border-radius: 1.5rem; }
.ff-bil-process-media { display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:repeat(6, minmax(0, 1fr)); gap:.8rem; height:34rem; }
.ff-bil-process-tile { position:relative; overflow:hidden; margin:0; min-height:0; border-radius:1rem; background:#242424; }
.ff-bil-process-tile img { display:block; width:100%; height:100%; border-radius:0; object-fit:cover; transition:transform .45s ease; }
.ff-bil-process-tile:hover img { transform:scale(1.045); }
.ff-bil-process-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.65)); pointer-events:none; }
.ff-bil-process-tile figcaption { position:absolute; z-index:1; left:.75rem; bottom:.6rem; font-family:Menlo,monospace; font-size:.72rem; font-weight:700; letter-spacing:.12em; color:var(--ff-orange); }
.ff-bil-process-tile-1 { grid-row:span 4; }
.ff-bil-process-tile-2,.ff-bil-process-tile-3,.ff-bil-process-tile-4,.ff-bil-process-tile-5 { grid-row:span 2; }
.ff-prod-steps { display: flex; flex-direction: column; gap: 1.9rem; }
.ff-prod-step { display: flex; gap: 1.4rem; align-items: flex-start; }
.ff-prod-step-num { font-family: Menlo, monospace; font-size: 0.9rem; font-weight: 600; color: var(--ff-orange); padding-top: 0.2rem; flex: 0 0 auto; }
.ff-prod-step-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.3rem; color: #fff; }
.ff-prod-step-text { font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.55); }
/* Responsive */
@media (max-width: 1024px) {
.ff-prod-feat-grid { grid-template-columns: 1fr 1fr; }
.ff-specs-grade-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.ff-prod-hero { min-height: 0; padding: 8rem 0 5rem; }
.ff-prod-hero-layout, .ff-prod-overview-grid, .ff-prod-process-grid { grid-template-columns: 1fr; gap: 3rem; }
.ff-prod-hero-grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ff-prod-quickbar-sep { display: none; }
.ff-prod-quickstat { flex: 1 1 40%; }
.ff-prod-overview-media > img, .ff-prod-process-media img { height: 22rem; }
.ff-bil-process-media { height:27rem; }
.ff-bil-process-media img { height:100%; }
.ff-prod-badge { left: 1rem; bottom: -1.25rem; }
.ff-prod-apps-grid { grid-template-columns: 1fr; }
#bil-applications .ff-prod-apps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.ff-prod-hero-grades { grid-template-columns: 1fr; }
.ff-prod-feat-grid, .ff-specs-grade-grid { grid-template-columns: 1fr; }
.ff-specs-table-wrap { padding: 1.5rem; }
.ff-tmt-comparison-heading { margin-bottom: 2.25rem; }
.ff-tmt-comparison-card { border-radius: 1.25rem; }
.ff-tmt-comparison-table th, .ff-tmt-comparison-table td { padding: 1rem 1.15rem; }
.ff-mechanical-properties-card { padding: 0; }
.ff-mechanical-properties-head { padding: 1.75rem 1.25rem 1.35rem; }
.ff-mechanical-properties-table th, .ff-mechanical-properties-table td { padding: 0.9rem 1.25rem; white-space: normal; }
.ff-mechanical-properties-table th:first-child { width: 58%; }
.ff-mechanical-properties-table td { font-size: 0.86rem; line-height: 1.45; }
.ff-prod-hero-grades { grid-template-columns: 1fr 1fr; }
}
/* 3-column variant of the specs grade grid (Billets) */
.ff-specs-grade-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .ff-specs-grade-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ff-specs-grade-grid-3 { grid-template-columns: 1fr; } }
/* ============ Use cases / regions / why / certs / reels (2026-08 parity update) ============ */
.ff-usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ff-usecase { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 4 / 5; }
.ff-usecase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.ff-usecase:hover img { transform: scale(1.05); }
.ff-usecase-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 9, 11, 0.8), transparent 55%); }
.ff-usecase span { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; color: #fff; font-weight: 700; letter-spacing: -0.01em; }
#ff-page-tmt .ff-usecase { display: flex; flex-direction: column; aspect-ratio: auto; border: 1px solid var(--ff-border); background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
#ff-page-tmt .ff-usecase img { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; height: auto; flex: 0 0 auto; }
#ff-page-tmt .ff-usecase:hover img { transform: none; }
#ff-page-tmt .ff-usecase-shade { display: none; }
#ff-page-tmt .ff-usecase span { position: relative; inset: auto; display: block; min-height: 9rem; padding: 1.25rem; color: var(--ff-fg); font-size: 1rem; }
#ff-page-tmt .ff-usecase small { margin-top: .65rem; color: var(--ff-muted); font-size: .88rem; line-height: 1.55; font-weight: 400; }
.ff-regions { background: var(--ff-card); }
.ff-regions-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.ff-region-card { background: #fff; border: 1px solid var(--ff-border); border-radius: 1.5rem; padding: 2rem; }
.ff-region-card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.35rem; }
.ff-region-cities { color: var(--ff-orange); font-size: 0.85rem; font-weight: 600; margin: 0 0 0.75rem; }
.ff-region-note { color: var(--ff-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.ff-region-dark { background: #0c0a09; border-color: #0c0a09; }
.ff-region-dark h3 { color: #fff; }
.ff-region-dark .ff-region-note { color: rgba(255, 255, 255, 0.65); margin-bottom: 1.25rem; }
#ff-page-green .ff-prod-what-card, #ff-page-green .ff-region-dark, #ff-page-green .ff-about-cta-inner { background: #14532d; border-color: #4ade80; color: #fff; }
#ff-page-green .ff-prod-what-card .ff-prod-what-name, #ff-page-green .ff-prod-what-card .ff-prod-what-desc, #ff-page-green .ff-prod-what-card .ff-prod-what-list li, #ff-page-green .ff-region-dark h3 { color: #fff !important; }
#ff-page-green .ff-prod-what-card .ff-prod-what-shape, #ff-page-green .ff-region-dark .ff-region-note { color: #dcfce7; }
.ff-why-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.ff-why-card { border: 1px solid var(--ff-border); border-radius: 1.5rem; padding: 2rem; background: #fff; }
.ff-why-card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.ff-why-card p { color: var(--ff-muted); font-size: 0.95rem; line-height: 1.65; margin: 0; }
.ff-certs { background: #0c0a09; }
.ff-certs-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.ff-certs-text h2 { color: #fff; }
.ff-cert-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.ff-cert-pills span { border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.85rem; }
.ff-cert-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ff-cert-card { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 1.25rem; padding: 1.75rem 1.5rem; background: rgba(255, 255, 255, 0.04); }
.ff-cert-card h3 { color: var(--ff-orange); font-size: 1.1rem; font-weight: 800; margin: 0 0 0.4rem; }
.ff-cert-card p { color: rgba(255, 255, 255, 0.65); font-size: 0.88rem; margin: 0; }
.ff-reels { background: #0c0a09; }
.ff-reels-track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1.5rem 0.75rem; scrollbar-width: none; }
.ff-reels-track::-webkit-scrollbar { display: none; }
.ff-reel { position: relative; flex: 0 0 250px; aspect-ratio: 9 / 16; border-radius: 1.5rem; overflow: hidden; background: #18181b; scroll-snap-align: start; cursor: pointer; }
.ff-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ff-reel-shade { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(9, 9, 11, 0.9), transparent); pointer-events: none; }
.ff-reel-caption { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; pointer-events: none; }
.ff-reel-caption span { color: var(--ff-orange); font-size: 0.75rem; font-weight: 700; display: block; margin-bottom: 0.25rem; }
.ff-reel-caption p { color: #fff; font-size: 0.9rem; font-weight: 500; line-height: 1.4; margin: 0; }
.ff-reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); color: #fff; font-size: 1.1rem; cursor: pointer; }
.ff-reel.is-playing .ff-reel-play { display: none; }
@media (min-width: 700px) {
.ff-usecase-grid { grid-template-columns: repeat(4, 1fr); }
.ff-regions-grid { grid-template-columns: repeat(2, 1fr); }
.ff-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1050px) {
.ff-regions-grid { grid-template-columns: repeat(3, 1fr); }
.ff-certs-grid { grid-template-columns: 1.1fr 1fr; }
}
/* ============ Legacy / plant / clients (v2.0.2 parity) ============ */
.ff-plant { background: #0c0a09; }
.ff-plant-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.ff-plant-rule { width: 3rem; height: 4px; background: var(--ff-orange); border-radius: 999px; margin-bottom: 2rem; }
.ff-plant-title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 2.5rem; }
.ff-plant-title span { background: linear-gradient(90deg, var(--ff-orange), #fdba74); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ff-plant-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.ff-plant-chip { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); border-radius: 1rem; padding: 1rem 1.25rem; }
.ff-plant-chip p { color: #fff; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.ff-plant-chip span { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; }
.ff-plant-copy { color: rgba(255, 255, 255, 0.7); font-size: 1.15rem; font-weight: 300; line-height: 1.7; margin: 0 0 2.5rem; }
.ff-plant-copy strong { color: #fff; font-weight: 500; }
.ff-clients { background: var(--ff-secondary); }
.ff-clients-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ff-client-card { background: #fff; border: 1px solid var(--ff-border); border-radius: 1rem; padding: 1.5rem; transition: border-color 0.3s; }
.ff-client-card:hover { border-color: var(--ff-orange); }
.ff-client-card h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
.ff-client-sector { color: var(--ff-orange); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.2rem; }
.ff-client-since { color: var(--ff-muted); font-size: 0.8rem; margin: 0; }
@media (min-width: 700px) {
.ff-clients-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1050px) {
.ff-plant-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
.ff-clients-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ============ Legacy accordion (v3.0.2, matches React design) ============ */
.ff-legacy { background: #0c0a09; }
.ff-legacy-head { max-width: 36rem; margin-bottom: 3rem; }
.ff-legacy-sub { color: rgba(255, 255, 255, 0.5); font-size: 1.1rem; font-weight: 300; margin: 0.75rem 0 0; }
.ff-legacy-acc { display: flex; flex-direction: column; gap: 0.75rem; }
.ff-era { position: relative; display: block; width: 100%; text-align: left; border: 0; padding: 0; cursor: pointer; border-radius: 1.5rem; overflow: hidden; background: #1c1917; min-height: 88px; transition: min-height 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.ff-era img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 1.8s ease; }
.ff-era-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 15%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.45)); }
.ff-era-year { position: absolute; top: 1.1rem; left: 1.4rem; color: #fff; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.ff-era-body { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.2rem; opacity: 0; transform: translateY(12px); transition: opacity 0.5s 0.15s, transform 0.5s 0.15s; }
.ff-era.is-active { min-height: 340px; }
.ff-era.is-active .ff-era-body { opacity: 1; transform: none; }
.ff-era.is-active img { filter: grayscale(0%) !important; }
.ff-era-tag { display: inline-block; color: var(--ff-orange); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.5rem; }
.ff-era-body h3 { color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.ff-era-body p { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; line-height: 1.6; margin: 0; max-width: 34rem; }
@media (min-width: 900px) {
.ff-legacy-acc { flex-direction: row; height: 560px; gap: 0.5rem; }
.ff-era { flex: 1; min-height: 0; height: 100%; transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.ff-era.is-active { flex: 5; min-height: 0; }
/* Collapsed cards: year label rotated for readability across 11 narrow tiles */
.ff-era:not(.is-active) .ff-era-year { top: 50%; left: 50%; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.05em; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.ff-era.is-active .ff-era-year { top: 1.5rem; left: 1.75rem; font-size: 2rem; transform: none; white-space: normal; }
.ff-era-body { left: 1.75rem; right: 1.75rem; bottom: 1.75rem; }
.ff-era-body h3 { font-size: 1.75rem; }
}
/* About sub-page explore strip */
.ff-about-explore { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 900px) { .ff-about-explore { grid-template-columns: repeat(3, 1fr); } }
.ff-about-explore a { display: block; border: 1px solid var(--ff-border); background: #fff; border-radius: 1rem; padding: 1.4rem; text-decoration: none; color: inherit; transition: border-color 0.3s, transform 0.3s; }
.ff-about-explore a:hover { border-color: var(--ff-orange); transform: translateY(-2px); }
.ff-about-explore h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.3rem; }
.ff-about-explore p { color: var(--ff-muted); font-size: 0.85rem; margin: 0; }
/* ============ Page hero + building calculator (v3.0.3) ============ */
.ff-page-hero { position: relative; background: #0c0a09; color: #fff; padding: 10rem 0 6rem; overflow: hidden; }
.ff-page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.ff-page-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, #0c0a09, rgba(12, 10, 9, 0.6), rgba(12, 10, 9, 0.3)); }
.ff-page-hero-inner { position: relative; z-index: 1; }
.ff-page-hero-title { font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 800; letter-spacing: -0.04em; margin: 0.75rem 0 1.25rem; }
.ff-page-hero-sub { color: rgba(255, 255, 255, 0.7); font-size: 1.15rem; font-weight: 300; line-height: 1.7; max-width: 44rem; margin: 0; }
.ff-bcalc-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .ff-bcalc-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.ff-range-hints { display: flex; justify-content: space-between; color: var(--ff-muted); font-size: 0.75rem; margin-top: 0.35rem; }
.ff-bcalc-hero { background: #0c0a09; color: #fff; border-radius: 1.5rem; padding: 2rem 2.25rem; margin-bottom: 1rem; }
.ff-bcalc-big { font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0.5rem 0 0.35rem; }
.ff-bcalc-compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ff-border); border-radius: 1.5rem 1.5rem 0 0; overflow: hidden; }
.ff-bcalc-col { padding: 1.5rem; background: rgba(234, 88, 12, 0.05); }
.ff-bcalc-col + .ff-bcalc-col { border-left: 1px solid var(--ff-border); background: var(--ff-secondary); }
.ff-bcalc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ff-orange); margin-right: 0.4rem; }
.ff-bcalc-dot-grey { background: #a8a29e; }
.ff-bcalc-collabel { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ff-orange); }
.ff-bcalc-collabel-grey { color: var(--ff-muted); }
.ff-bcalc-colval { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; margin: 0.75rem 0 0.15rem; }
.ff-bcalc-colval-grey { color: var(--ff-muted); }
.ff-bcalc-savings { background: rgba(234, 88, 12, 0.1); border: 1px solid rgba(234, 88, 12, 0.2); border-top: 0; border-radius: 0 0 1.5rem 1.5rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.ff-bcalc-save { color: var(--ff-orange); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.25rem; }
/* TMT Bars requirement calculator */
.ff-tmt-calc { position: relative; overflow: hidden; background: var(--ff-bg); }
.ff-tmt-calc::before { content: ""; position: absolute; top: 5rem; left: -12rem; width: 28rem; height: 28rem; border-radius: 50%; background: rgba(249,115,22,.09); filter: blur(70px); pointer-events: none; }
.ff-tmt-calc .ff-container { position: relative; z-index: 1; }
.ff-tmt-calc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; }
.ff-tmt-calc-form { padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--ff-border); border-radius: 1.75rem; background: #fff; box-shadow: 0 22px 50px -28px rgba(0,0,0,.2); }
.ff-tmt-calc-form-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ff-border); }
.ff-tmt-calc-form-head strong,
.ff-tmt-calc-form-head span { display: block; }
.ff-tmt-calc-form-head strong { font-size: 1rem; }
.ff-tmt-calc-form-head span { margin-top: .15rem; color: var(--ff-muted); font-size: .8rem; }
.ff-tmt-calc-icon { display: grid !important; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; place-items: center; margin: 0 !important; border-radius: .9rem; color: var(--ff-orange) !important; background: rgba(249,115,22,.1); font-size: 1.15rem !important; font-weight: 700; }
.ff-tmt-calc-form label { display: block; }
.ff-tmt-calc-form label > span { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; color: var(--ff-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ff-tmt-calc-form label > span b { display: grid; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 50%; color: var(--ff-orange); background: rgba(249,115,22,.1); font-size: .7rem; }
.ff-tmt-calc-form select,
.ff-tmt-calc-form input { width: 100%; min-height: 3rem; padding: 0 .9rem; border: 1px solid var(--ff-border); border-radius: .8rem; background: var(--ff-bg); color: var(--ff-fg); font: inherit; font-size: .9rem; outline: none; }
.ff-tmt-calc-form select:focus,
.ff-tmt-calc-form input:focus { border-color: var(--ff-orange); box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.ff-tmt-calc-fields { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.ff-tmt-calc-form .ff-btn { margin-top: 1.75rem; border-radius: .8rem; }
.ff-tmt-calc-result { display: flex; min-height: 24rem; flex-direction: column; justify-content: space-between; padding: clamp(1.75rem, 4vw, 2.5rem); border-radius: 1.75rem; color: #fff; background: #0c0a09; box-shadow: 0 22px 50px -28px rgba(0,0,0,.4); }
.ff-tmt-calc-result-eyebrow { color: rgba(255,255,255,.45); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ff-tmt-calc-result > p { color: rgba(255,255,255,.48); font-size: .85rem; line-height: 1.55; }
.ff-tmt-calc-tonnage { margin-top: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.ff-tmt-calc-tonnage strong { font-size: clamp(3rem, 8vw, 4.5rem); letter-spacing: -.055em; line-height: 1; }
.ff-tmt-calc-tonnage span { margin-left: .5rem; color: rgba(255,255,255,.4); font-size: 1.2rem; }
.ff-tmt-calc-price { margin-top: auto; padding-top: 1.5rem; }
.ff-tmt-calc-price span,
.ff-tmt-calc-price strong { display: block; }
.ff-tmt-calc-price span { color: rgba(255,255,255,.45); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.ff-tmt-calc-price strong { margin-top: .25rem; color: var(--ff-orange); font-size: 1.75rem; }
.ff-tmt-calc-note { margin: 1.2rem 0 0; color: rgba(255,255,255,.35) !important; font-size: .7rem !important; }
@media (min-width: 700px) { .ff-tmt-calc-fields { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .ff-tmt-calc-grid { grid-template-columns: minmax(0,1.05fr) minmax(20rem,.95fr); } }
.ff-tmt-calc-fields-three { margin-top: 0; }
.ff-tmt-calc-output[hidden],
.ff-tmt-calc-form[hidden] { display: none !important; }
.ff-tmt-calc-output { overflow: hidden; border: 1px solid var(--ff-border); border-radius: 1.5rem; background: #fff; box-shadow: 0 22px 50px -28px rgba(0,0,0,.2); }
.ff-tmt-calc-summary,
.ff-tmt-calc-breakdown { padding: clamp(1.5rem,4vw,2.25rem); }
.ff-tmt-calc-summary h3 { margin: 0 0 1.25rem; font-size: 1.25rem; }
.ff-tmt-calc-summary-table { overflow: hidden; border: 1px solid var(--ff-border); border-radius: .75rem; }
.ff-tmt-calc-summary-table > div { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ff-border); }
.ff-tmt-calc-summary-table > div:last-child { border-bottom: 0; }
.ff-tmt-calc-summary-table strong,
.ff-tmt-calc-summary-table span { padding: .8rem 1rem; font-size: .78rem; }
.ff-tmt-calc-summary-table strong { background: var(--ff-secondary); }
.ff-tmt-calc-summary-table span { text-align: center; }
.ff-tmt-calc-output-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.ff-tmt-calc-output-actions .ff-btn { border-radius: .6rem; }
.ff-tmt-calc-breakdown { border-top: 1px solid var(--ff-border); }
.ff-tmt-calc-breakdown > p { margin: 0 0 1.25rem; color: var(--ff-muted); font-size: .82rem; line-height: 1.55; }
.ff-tmt-calc-table-wrap { overflow-x: auto; border: 1px solid var(--ff-border); border-radius: .75rem; }
.ff-tmt-calc-table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .8rem; }
.ff-tmt-calc-table th { padding: .85rem 1rem; color: #fff; background: var(--ff-orange); text-align: left; }
.ff-tmt-calc-table th:not(:first-child),
.ff-tmt-calc-table td:not(:first-child) { text-align: center; }
.ff-tmt-calc-table td { padding: .8rem 1rem; border-top: 1px solid var(--ff-border); }
@media (min-width: 700px) { .ff-tmt-calc-fields-three { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 920px) {
.ff-tmt-calc-output { display: grid; grid-template-columns: .95fr 1.25fr; }
.ff-tmt-calc-breakdown { border-top: 0; border-left: 1px solid var(--ff-border); }
}
/* ============ Article content typography (v3.0.4) ============ */
.ff-article-body { max-width: 46rem; margin: 0 auto; font-size: 1.05rem; line-height: 1.8; color: var(--ff-fg); }
.ff-article-body > p:first-child, .ff-article-body > p:first-child em { font-size: 1.25rem; font-weight: 300; color: var(--ff-muted); line-height: 1.7; }
.ff-article-body h2 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin: 3rem 0 1.25rem; }
.ff-article-body h2::before { content: ''; display: block; width: 3rem; height: 4px; background: var(--ff-orange); border-radius: 999px; margin-bottom: 1rem; }
.ff-article-body h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 2.25rem 0 0.75rem; }
.ff-article-body p { margin: 0 0 1.25rem; }
.ff-article-body ul { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.ff-article-body ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.65rem; }
.ff-article-body ul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background: var(--ff-orange); }
.ff-article-body a { color: var(--ff-orange); text-decoration: none; font-weight: 500; }
.ff-article-body a:hover { text-decoration: underline; }
.ff-article-body strong { font-weight: 700; }
.ff-article-body details { border: 1px solid var(--ff-border); border-radius: 1rem; padding: 1rem 1.25rem; margin-bottom: 0.75rem; background: #fff; transition: border-color 0.3s; }
.ff-article-body details:hover { border-color: rgba(234, 88, 12, 0.4); }
.ff-article-body details summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1rem; }
.ff-article-body details summary::-webkit-details-marker { display: none; }
.ff-article-body details summary::after { content: '+'; color: var(--ff-orange); font-size: 1.4rem; font-weight: 300; line-height: 1; transition: transform 0.3s; flex-shrink: 0; }
.ff-article-body details[open] summary::after { transform: rotate(45deg); }
.ff-article-body details p { margin: 0.9rem 0 0.25rem; color: var(--ff-muted); font-size: 0.95rem; }
/* Adaptive product grid: when tiles are hidden in the Customizer the
remaining tiles reflow instead of leaving holes. */
@media (min-width: 900px) {
.ff-products-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: 320px; }
.ff-products-grid--auto .ff-product-tile { grid-column: auto; grid-row: auto; }
}
/* Tiles without an image fall back to a steel gradient so hiding an image never looks broken. */
.ff-product-tile, .ff-persona-card { background: linear-gradient(135deg, #1a1a1a, #333); }
/* ================= v4.0.0 additions ================= */
/* Video gallery embed iframe */
.ff-video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ff-video-player iframe[hidden], .ff-video-player video[hidden] { display: none; }
/* Reels: YouTube Shorts embed (9:16) */
.ff-reel-embed { position: absolute; inset: 0; }
.ff-reel-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ff-reel-caption .ff-reel-tag { color: var(--ff-orange); font-size: 0.75rem; font-weight: 700; display: block; margin-bottom: 0.25rem; }
/* Clients: category filter tabs + logos */
.ff-clients-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.5rem; }
.ff-clients-tab { appearance: none; border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: #52525b; font-family: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1.1rem; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; }
.ff-clients-tab:hover { border-color: var(--ff-orange); color: var(--ff-orange); }
.ff-clients-tab.is-active { background: var(--ff-orange); border-color: var(--ff-orange); color: #fff; }
.ff-client-card .ff-client-logo { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto 0.5rem; }
/* Legacy CTA */
.ff-legacy-cta { display: flex; justify-content: center; }
/* Footer v4 redesign */
.ff-footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
@media (min-width: 1100px) { .ff-footer-cols { grid-template-columns: repeat(3, 1fr); } }
.ff-footer-pioneer { margin-top: 2.5rem; max-width: 26rem; }
.ff-footer-pioneer h4 { color: #fff; font-size: 1.1rem; margin: 0 0 0.75rem; }
.ff-footer-pioneer p { color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; line-height: 1.6; margin: 0; }
.ff-footer-contact-block { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; line-height: 1.7; white-space: pre-line; margin: 0 0 1rem; }
.ff-footer-quote-btn { display: inline-block; margin-top: 0.75rem; }
.ff-footer-bold-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ff-footer-bold-links a { color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.ff-footer-bold-links a:hover { color: var(--ff-orange); }
/* Distributor pages */
.ff-dist-hero { padding: 8rem 0 3rem; background: #0A0A0A; color: #fff; }
.ff-dist-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 1rem; }
.ff-dist-hero p { color: rgba(255, 255, 255, 0.7); max-width: 720px; margin: 0; font-size: 1.05rem; line-height: 1.6; }
.ff-dist-body { padding: 3.5rem 0; }
.ff-dist-body h2 { font-size: 1.75rem; margin: 2rem 0 1rem; }
.ff-dist-body h3 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
.ff-dist-body p, .ff-dist-body li { line-height: 1.7; color: #3f3f46; }
.ff-dist-body ul { padding-left: 1.25rem; }
.ff-dist-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 2rem 0; }
.ff-dist-state-card { display: block; padding: 1.25rem 1.5rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 1rem; text-decoration: none; color: #18181b; font-weight: 600; transition: all 0.2s ease; }
.ff-dist-state-card:hover { border-color: var(--ff-orange); color: var(--ff-orange); transform: translateY(-2px); }
/* India dealers map */
.ff-india-map { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; padding: 2rem 0; }
.ff-india-map svg { max-width: 340px; height: auto; }
.ff-india-map-legend { list-style: none; padding: 0; margin: 0; }
.ff-india-map-legend li { padding: 0.35rem 0; color: #3f3f46; font-weight: 600; }
.ff-plants-map { position: relative; max-width: 620px; margin: 2rem auto 0; overflow: visible; border: 0; box-shadow: none; }
.ff-plants-map::after { content: ''; position: absolute; top: 0; right: 0; z-index: 0; width: 32px; height: 32px; background: #fff; pointer-events: none; }
.ff-plants-map > img { display: block; width: 100%; opacity: 1; border: 0; outline: none; clip-path: inset(2px); }
.ff-plants-marker { position: absolute; width: 60px; transform: translate(-50%,-50%); z-index: 1; }
.ff-plants-marker > img { width: 60px; height: auto; border-radius: .35rem; background: #fff; padding: 2px; box-shadow: 0 5px 14px rgba(0,0,0,.18); animation: ffPlantLogoPulse 6s ease-in-out infinite; transform-origin: center; }
.ff-plants-marker div { position: absolute; top: 50%; left: calc(100% + .4rem); min-width: 80px; transform: translateY(-50%); padding: .32rem .42rem; border-radius: .45rem; background: #171717; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.14); font-size: .6rem; }
.ff-plants-marker strong,.ff-plants-marker span,.ff-plants-marker small { display:block; }
.ff-plants-marker span,.ff-plants-marker small { color: rgba(255,255,255,.72); }
.ff-plants-marker-left div { right: calc(100% + .4rem); left: auto; }
.ff-plants-marker-below div { top: calc(100% + .3rem); left: 50%; transform: translateX(-50%); }
@media (max-width: 640px) {
.ff-plants-marker { width: 45px; }
.ff-plants-marker > img { width: 45px; }
.ff-plants-marker div { min-width: 62px; padding: .24rem .3rem; font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
.ff-plants-marker > img { animation: none; }
}
@keyframes ffPlantLogoPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
/* SEO imported content sections */
.ff-seo-content { padding: 3.5rem 0; }
.ff-seo-content h2 { font-size: 1.6rem; margin: 2rem 0 1rem; }
.ff-seo-content h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.ff-seo-content p, .ff-seo-content li { line-height: 1.7; color: #3f3f46; }
.ff-seo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.ff-seo-card { padding: 1.5rem; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 1rem; background: #fafafa; }
.ff-seo-card h3 { margin-top: 0; }
.ff-seo-faq { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.ff-seo-faq summary { cursor: pointer; font-weight: 600; padding: 1rem 0; list-style: none; }
.ff-seo-faq summary::-webkit-details-marker { display: none; }
.ff-seo-faq summary::before { content: "+"; color: var(--ff-orange); font-weight: 700; margin-right: 0.6rem; }
.ff-seo-faq[open] summary::before { content: "\2212"; }
.ff-seo-faq p { margin: 0 0 1rem; }
/* ============ ABOUT SUB-PAGES (cardified) ============ */
.ff-sub-hero { min-height: 45vh; }
.ff-sub-content { padding-top: 4rem; }
.ff-sub-intro { font-size: 1.3rem; line-height: 1.7; color: rgba(23,23,23,0.8); max-width: 46rem; margin-bottom: 3rem; }
.ff-sub-intro em { font-style: normal; color: var(--ff-fg); font-weight: 500; }
.ff-sub-section { margin-bottom: 4.5rem; }
.ff-sub-h2 { margin-bottom: 2rem; }
.ff-sub-body { font-size: 1.1rem; line-height: 1.75; color: rgba(23,23,23,0.8); max-width: 46rem; margin-bottom: 2rem; }
.ff-sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.ff-sub-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ff-sub-grid, .ff-sub-grid-3 { grid-template-columns: 1fr; } }
.ff-sub-card { position: relative; background: var(--ff-card); border: 1px solid var(--ff-border); border-radius: 1.5rem; padding: 2.25rem 2rem; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.ff-sub-card:hover { border-color: var(--ff-orange); box-shadow: 0 20px 45px -18px rgba(0,0,0,0.12); transform: translateY(-3px); }
.ff-sub-card-num { position: absolute; top: 1.35rem; right: 1.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ff-orange); opacity: 0.85; }
.ff-sub-card-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; color: var(--ff-fg); }
.ff-sub-card-body { font-size: 0.98rem; line-height: 1.7; color: rgba(23,23,23,0.75); }
.ff-sub-card-body p { margin: 0 0 1rem; }
.ff-sub-card-body p:last-child { margin-bottom: 0; }
.ff-sub-card-body ul, .ff-sub-body ul, .ff-sub-intro ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.ff-sub-card-body li, .ff-sub-body li { position: relative; padding-left: 1.75rem; margin-bottom: 0.6rem; }
.ff-sub-card-body li::before, .ff-sub-body li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: var(--ff-orange); -webkit-mask: url('data:image/svg+xml;utf8,') center / 65% no-repeat, linear-gradient(#000 0 0); mask: url('data:image/svg+xml;utf8,') center / 65% no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: destination-out; }
.ff-sub-cta { background: var(--ff-fg); text-align: center; }
.ff-sub-cta .ff-h2 { color: #fff; }
.ff-sub-cta-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
/* ============ ADAPTIVE PRODUCT BENTO (counts other than 5) ============ */
@media (min-width: 768px) {
[class*="ff-products-grid--n"] .ff-product-tile { grid-column: auto; grid-row: auto; }
.ff-products-grid--n1 .ff-product-tile { grid-column: span 4; }
.ff-products-grid--n2 .ff-product-tile { grid-column: span 2; }
.ff-products-grid--n3 .ff-product-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.ff-products-grid--n3 .ff-product-tile:nth-child(n+2) { grid-column: span 2; }
.ff-products-grid--n4 .ff-product-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.ff-products-grid--n4 .ff-product-tile:nth-child(2),
.ff-products-grid--n4 .ff-product-tile:nth-child(3) { grid-column: span 2; }
.ff-products-grid--n4 .ff-product-tile:nth-child(4) { grid-column: span 4; }
.ff-products-grid--n6 .ff-product-tile { grid-column: span 2; }
.ff-products-grid--n6 .ff-product-tile:nth-child(1) { grid-row: span 2; }
.ff-products-grid--n7 .ff-product-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.ff-products-grid--n7 .ff-product-tile:nth-child(n+2) { grid-column: span 1; }
.ff-products-grid--n7 .ff-product-tile:nth-child(6),
.ff-products-grid--n7 .ff-product-tile:nth-child(7) { grid-column: span 2; }
}
/* Sliders follow the brand accent by default (overridable per-section via the colour palette). */
input[type="range"] { accent-color: var(--ff-orange); }
/* ============ REELS SIDE SCROLL ARROWS ============ */
.ff-reels-wrap { position: relative; }
.ff-reels-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); background: rgba(12,10,9,0.7); backdrop-filter: blur(8px); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s ease; }
.ff-reels-arrow:hover { background: rgba(255,255,255,0.12); }
.ff-reels-arrow-left { left: 0.75rem; }
.ff-reels-arrow-right { right: 0.75rem; }
@media (max-width: 767px) { .ff-reels-arrow { display: none; } }
/* ============ FIND DEALERS: MAP + DEALER STACK ============ */
.ff-dealer-map-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .ff-dealer-map-grid { grid-template-columns: 1fr; } }
.ff-dealer-map-hint { text-align: center; font-size: 0.8rem; color: var(--ff-muted, #71717a); margin-top: 0.75rem; }
.ff-dealer-pin-dot { transition: r 0.2s ease; }
.ff-dealer-pin.is-active .ff-dealer-pin-dot { r: 7.5; }
.ff-dealer-pin.is-active .ff-dealer-pin-pulse { animation: ffPinPulse 1.4s ease-out infinite; }
@keyframes ffPinPulse {
0% { r: 7; opacity: 0.8; }
100% { r: 22; opacity: 0; }
}
.ff-dealer-stack { display: flex; flex-direction: column; gap: 0.75rem; max-height: 640px; overflow-y: auto; padding-right: 0.5rem; }
.ff-dealer-stack-region { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ff-orange); margin: 0.75rem 0 0; }
.ff-dealer-stack-region:first-child { margin-top: 0; }
.ff-dealer-card { text-align: left; font: inherit; cursor: pointer; background: var(--ff-card, #fff); border: 1px solid var(--ff-border, #e4e4e7); border-radius: 1rem; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.ff-dealer-card:hover { border-color: var(--ff-orange); }
.ff-dealer-card.is-active { border-color: var(--ff-orange); box-shadow: 0 10px 30px -12px rgba(249, 115, 22, 0.35); }
.ff-dealer-card-tag { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ff-orange); }
.ff-dealer-card-name { font-size: 0.95rem; letter-spacing: -0.01em; }
.ff-dealer-card-addr { font-size: 0.82rem; color: var(--ff-muted, #71717a); line-height: 1.5; }
.ff-dealer-card-phone { font-size: 0.82rem; font-weight: 500; }
/* ============ FIND DEALERS: SEARCH + REGION FILTER (v5.8) ============ */
.ff-dealer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.ff-dealer-search { flex: 1 1 260px; max-width: 380px; font: inherit; font-size: 0.95rem; padding: 0.7rem 1.1rem; border: 1px solid var(--ff-border, #e4e4e7); border-radius: 999px; background: var(--ff-card, #fff); outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.ff-dealer-search:focus { border-color: var(--ff-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }
.ff-dealer-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ff-dealer-filter { font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--ff-border, #e4e4e7); background: var(--ff-card, #fff); color: var(--ff-muted, #52525b); transition: all 0.2s ease; }
.ff-dealer-filter:hover { color: var(--ff-fg, #171717); border-color: var(--ff-orange); }
.ff-dealer-filter.is-active { background: var(--ff-fg, #171717); color: #fff; border-color: var(--ff-fg, #171717); }
.ff-dealer-count { margin: 0 0 0 auto; font-size: 0.85rem; font-weight: 600; color: var(--ff-muted, #71717a); }
.ff-dealer-empty { font-size: 0.9rem; color: var(--ff-muted, #71717a); padding: 1rem 0; }
/* Ensure JS-set hidden attribute wins over display:flex on card/header rules */
.ff-dealer-card[hidden], .ff-dealer-stack-region[hidden] { display: none !important; }
@media (max-width: 640px) { .ff-dealer-count { margin-left: 0; } }
/* ============ CUSTOM SECTIONS (editor-defined) ============ */
.ff-custom-section { background: var(--ff-bg, #fafafa); }
.ff-custom-section-dark { background: #0c0a09; color: #fff; }
.ff-custom-section-dark .ff-h2 { color: #fff; }
.ff-custom-section-dark .ff-custom-body { color: rgba(255, 255, 255, 0.65); }
.ff-custom-inner { max-width: 46rem; }
.ff-custom-has-image { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; max-width: none; }
@media (max-width: 900px) { .ff-custom-has-image { grid-template-columns: 1fr; } }
.ff-custom-body { color: var(--ff-muted, #52525b); line-height: 1.75; margin-top: 1rem; }
.ff-custom-body p { margin: 0 0 1rem; }
.ff-custom-cta { margin-top: 1.75rem; }
.ff-custom-media img { width: 100%; border-radius: 1.5rem; display: block; }
/* Rich content inside custom-section body */
.ff-custom-body ul, .ff-custom-body ol { margin: 0 0 1rem 1.5rem; padding: 0; }
.ff-custom-body ul { list-style: disc; }
.ff-custom-body ol { list-style: decimal; }
.ff-custom-body li { margin: 0 0 0.35rem; line-height: 1.65; }
.ff-custom-body li ul, .ff-custom-body li ol { margin-top: 0.25rem; margin-bottom: 0; }
.ff-custom-body h2, .ff-custom-body h3, .ff-custom-body h4 { margin: 1.5rem 0 0.5rem; font-weight: 700; line-height: 1.25; color: inherit; }
.ff-custom-body h2 { font-size: 1.45rem; }
.ff-custom-body h3 { font-size: 1.2rem; }
.ff-custom-body h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ff-custom-section-dark .ff-custom-body h2, .ff-custom-section-dark .ff-custom-body h3, .ff-custom-section-dark .ff-custom-body h4 { color: #fff; }
.ff-custom-body a { color: var(--ff-orange, #ea580c); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ff-custom-section-dark .ff-custom-body a { color: #fb923c; }
.ff-custom-body strong { font-weight: 700; }
.ff-custom-body em { font-style: italic; }
.ff-custom-body img { max-width: 100%; height: auto; border-radius: 0.75rem; display: block; margin: 1rem 0; }
/* Table inside custom-section body */
.ff-custom-body table, .ff-custom-body .ff-md-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1rem 0 1.5rem; }
.ff-custom-body th, .ff-custom-body .ff-md-table th { background: var(--ff-fg, #171717); color: #fff; font-weight: 700; text-align: left; padding: 0.55rem 0.85rem; }
.ff-custom-section-dark .ff-custom-body th { background: rgba(255,255,255,0.12); color: #fff; }
.ff-custom-body td, .ff-custom-body .ff-md-table td { padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--ff-border, #e7e5e4); vertical-align: top; }
.ff-custom-body tr:last-child td { border-bottom: none; }
.ff-custom-body tr:nth-child(even) td { background: rgba(0,0,0,0.025); }
.ff-custom-section-dark .ff-custom-body td { border-color: rgba(255,255,255,0.1); }
.ff-custom-section-dark .ff-custom-body tr:nth-child(even) td { background: rgba(255,255,255,0.04); }
.ff-custom-body .ff-md-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Details/FAQ inside custom-section body */
.ff-custom-body details.ff-seo-faq { border: 1px solid var(--ff-border, #e7e5e4); border-radius: 0.6rem; margin: 0.5rem 0; overflow: hidden; }
.ff-custom-body details.ff-seo-faq summary { padding: 0.75rem 1rem; font-weight: 600; cursor: pointer; }
.ff-custom-body details.ff-seo-faq > *:not(summary) { padding: 0 1rem 0.75rem; }
/* ============ v4.4: dealer pin idle pulse + clickable pins ============ */
.ff-dealer-pin { cursor: pointer; outline: none; }
.ff-dealer-pin .ff-dealer-pin-pulse { animation: ffPinIdle 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.ff-dealer-pin:nth-of-type(2n) .ff-dealer-pin-pulse { animation-delay: 0.65s; }
.ff-dealer-pin:nth-of-type(3n) .ff-dealer-pin-pulse { animation-delay: 1.3s; }
.ff-dealer-pin:nth-of-type(5n) .ff-dealer-pin-pulse { animation-delay: 1.95s; }
.ff-dealer-pin:hover .ff-dealer-pin-dot, .ff-dealer-pin:focus-visible .ff-dealer-pin-dot { r: 7.5; filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.8)); }
.ff-dealer-pin.is-active .ff-dealer-pin-dot { filter: drop-shadow(0 0 8px rgba(234, 88, 12, 0.9)); }
.ff-dealer-pin.is-active .ff-dealer-pin-pulse { animation: ffPinPulse 1.4s ease-out infinite; }
@keyframes ffPinIdle {
0% { opacity: 0.55; transform: scale(1); }
70% { opacity: 0; transform: scale(2.4); }
100% { opacity: 0; transform: scale(2.4); }
}
/* v5.9: cluster pins (multiple dealers at same coordinate) */
.ff-dealer-pin-cluster .ff-dealer-pin-dot { r: 9; }
.ff-dealer-pin-cluster:hover .ff-dealer-pin-dot,
.ff-dealer-pin-cluster:focus-visible .ff-dealer-pin-dot { r: 11; filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.8)); }
.ff-dealer-pin-cluster.is-active .ff-dealer-pin-dot { r: 11; filter: drop-shadow(0 0 8px rgba(234, 88, 12, 0.9)); }
.ff-dealer-pin-count { font-family: system-ui, -apple-system, sans-serif; pointer-events: none; user-select: none; }
/* ============ v4.4: profile cards with photos / initials avatars ============ */
.ff-sub-card-photo { margin: -2.25rem -2rem 1.5rem; height: 240px; overflow: hidden; background: linear-gradient(135deg, #1c1917, #44403c); display: flex; align-items: center; justify-content: center; }
.ff-sub-card-photo .ff-sub-card-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ff-sub-card-photo-avatar { background: linear-gradient(135deg, #1c1917 0%, #292524 55%, #7c2d12 130%); }
.ff-sub-card-avatar { width: 96px; height: 96px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(234, 88, 12, 0.16); border: 2px solid var(--ff-orange); color: var(--ff-orange); font-size: 2rem; font-weight: 800; letter-spacing: 0.04em; }
.ff-sub-card-has-photo { padding-top: 2.25rem; }
.ff-sub-card-has-photo .ff-sub-card-num { top: auto; bottom: 1.35rem; }
/* v5.13: editor-set image alignment preserved on card photos.
Default photo is full-bleed; aligned variants shrink and position the image
so admins can control layout from the Block Editor (alignleft/right/center). */
.ff-sub-card-photo-left,
.ff-sub-card-photo-right,
.ff-sub-card-photo-center,
.ff-sub-card-photo-none { margin: 0 0 1.5rem; height: auto; background: transparent; display: block; }
.ff-sub-card-photo-left { max-width: 55%; margin-right: auto; }
.ff-sub-card-photo-right { max-width: 55%; margin-left: auto; }
.ff-sub-card-photo-center { max-width: 70%; margin-left: auto; margin-right: auto; }
.ff-sub-card-photo-left .ff-sub-card-img,
.ff-sub-card-photo-right .ff-sub-card-img,
.ff-sub-card-photo-center .ff-sub-card-img,
.ff-sub-card-photo-none .ff-sub-card-img { width: 100%; height: auto; object-fit: contain; border-radius: 0.75rem; }
.ff-sub-card-photo-left + .ff-sub-card-main,
.ff-sub-card-photo-right + .ff-sub-card-main,
.ff-sub-card-photo-center + .ff-sub-card-main { padding-top: 0; }
@media (max-width: 640px) {
.ff-sub-card-photo-left, .ff-sub-card-photo-right, .ff-sub-card-photo-center { max-width: 100%; }
}
/* ============ v4.4: blog fallback thumbnails ============ */
.ff-blog-card-media .ff-thumb-fallback, .ff-blog-featured-article-media .ff-thumb-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-widget-post-thumb .ff-thumb-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ============ v4.4: article layout with sidebar ============ */
.ff-article-shell { padding-bottom: 2rem; }
.ff-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; align-items: start; padding-top: 3.5rem; }
.ff-article-layout .ff-article-body { padding: 0; }
.ff-article-layout .ff-container-article { max-width: none; padding: 0; }
.ff-blog-sidebar { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.ff-widget { background: var(--ff-card, #fff); border: 1px solid var(--ff-border, rgba(0,0,0,0.08)); border-radius: 1.25rem; padding: 1.5rem; }
.ff-widget-title { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ff-orange); margin: 0 0 1.1rem; }
.ff-widget ul { list-style: none; margin: 0; padding: 0; }
.ff-widget-posts { display: flex; flex-direction: column; gap: 1rem; }
.ff-widget-post { display: grid; grid-template-columns: 72px 1fr; gap: 0.9rem; align-items: center; text-decoration: none; color: inherit; }
.ff-widget-post-thumb { width: 72px; height: 56px; border-radius: 0.6rem; overflow: hidden; display: block; background: #e7e5e4; }
.ff-widget-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-widget-post-title { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.35; color: var(--ff-fg); transition: color 0.2s ease; }
.ff-widget-post:hover .ff-widget-post-title { color: var(--ff-orange); }
.ff-widget-post-date { display: block; font-size: 0.78rem; color: rgba(23,23,23,0.55); margin-top: 0.25rem; }
.ff-widget-cats li { border-bottom: 1px solid rgba(0,0,0,0.06); }
.ff-widget-cats li:last-child { border-bottom: 0; }
.ff-widget-cats a { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; text-decoration: none; color: var(--ff-fg); font-weight: 600; font-size: 0.95rem; }
.ff-widget-cats a:hover { color: var(--ff-orange); }
.ff-widget-cats a span { font-size: 0.78rem; font-weight: 700; color: var(--ff-orange); background: rgba(234, 88, 12, 0.1); border-radius: 999px; padding: 0.1rem 0.55rem; }
.ff-widget-video { border-radius: 0.9rem; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.ff-widget-video iframe, .ff-widget-video video { width: 100%; height: 100%; border: 0; display: block; }
.ff-widget-cta { background: linear-gradient(135deg, #1c1917, #292524); border: 0; color: #fff; }
.ff-widget-cta h3 { margin: 0 0 0.6rem; font-size: 1.15rem; color: #fff; }
.ff-widget-cta p { margin: 0 0 1.2rem; font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.75); }
/* Core widgets dropped into the area inherit readable styles */
.ff-widget .wp-block-search__button, .ff-widget .search-submit { background: var(--ff-orange); color: #fff; border: 0; border-radius: 0.5rem; padding: 0.5rem 0.9rem; cursor: pointer; }
.ff-widget input[type="search"], .ff-widget input[type="text"], .ff-widget input[type="email"] { border: 1px solid rgba(0,0,0,0.15); border-radius: 0.5rem; padding: 0.5rem 0.75rem; width: 100%; }
/* WordPress Recent Posts widget — classic and block-widget variants. */
.ff-blog-sidebar .widget_recent_entries,
.ff-blog-sidebar .widget_block:has(.wp-block-latest-posts) { background: linear-gradient(155deg, #fff 0%, #fffaf6 100%); border-color: rgba(234,88,12,0.18); box-shadow: 0 16px 38px rgba(41,37,36,0.08); }
.ff-blog-sidebar .widget_block:has(.wp-block-latest-posts) > .wp-block-heading { margin: 0 0 1.1rem; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--ff-orange); }
.ff-blog-sidebar .widget_recent_entries ul,
.ff-blog-sidebar .wp-block-latest-posts { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.ff-blog-sidebar .widget_recent_entries li,
.ff-blog-sidebar .wp-block-latest-posts li { position: relative; margin: 0; padding: 0.85rem 1.75rem 0.85rem 0; border-bottom: 1px solid rgba(120,53,15,0.1); }
.ff-blog-sidebar .widget_recent_entries li:first-child,
.ff-blog-sidebar .wp-block-latest-posts li:first-child { padding-top: 0; }
.ff-blog-sidebar .widget_recent_entries li:last-child,
.ff-blog-sidebar .wp-block-latest-posts li:last-child { padding-bottom: 0; border-bottom: 0; }
.ff-blog-sidebar .widget_recent_entries li::after,
.ff-blog-sidebar .wp-block-latest-posts li::after { content: "→"; position: absolute; top: 0.9rem; right: 0.1rem; color: var(--ff-orange); font-weight: 800; transform: translateX(0); transition: transform 0.2s ease; }
.ff-blog-sidebar .widget_recent_entries li:first-child::after,
.ff-blog-sidebar .wp-block-latest-posts li:first-child::after { top: 0.05rem; }
.ff-blog-sidebar .widget_recent_entries li:hover::after,
.ff-blog-sidebar .wp-block-latest-posts li:hover::after { transform: translateX(0.25rem); }
.ff-blog-sidebar .widget_recent_entries a,
.ff-blog-sidebar .wp-block-latest-posts a { display: block; color: var(--ff-fg); font-size: 0.94rem; font-weight: 700; line-height: 1.42; text-decoration: none; transition: color 0.2s ease; }
.ff-blog-sidebar .widget_recent_entries a:hover,
.ff-blog-sidebar .wp-block-latest-posts a:hover { color: var(--ff-orange); }
.ff-blog-sidebar .widget_recent_entries .post-date,
.ff-blog-sidebar .wp-block-latest-posts__post-date { display: block; margin-top: 0.28rem; color: rgba(23,23,23,0.56); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; }
@media (max-width: 960px) {
.ff-article-layout { grid-template-columns: 1fr; gap: 3rem; }
.ff-blog-sidebar { position: static; }
}
/* ============ v4.4: product in-depth section (cardified) ============ */
.ff-seo-cardified { background: #fafaf9; border-top: 1px solid rgba(0,0,0,0.06); }
.ff-seo-cardified .ff-section-head { margin-bottom: 3rem; }
.ff-seo-cardified .ff-sub-section { margin-bottom: 3.5rem; }
.ff-seo-cardified .ff-sub-card { background: #fff; }
/* ============================== v4.5 ============================== */
/* Chip navigation (price pages, distributor states, media sections). */
.ff-price-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.ff-price-chip{display:inline-block;padding:.45rem 1rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font-size:.85rem;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s}
.ff-price-chip:hover{background:rgba(255,255,255,.12)}
.ff-price-chip.is-active{background:var(--ff-accent,#e63b2e);border-color:var(--ff-accent,#e63b2e)}
/* Price hero badge */
.ff-price-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-bottom:1rem}
.ff-price-dot{width:.55rem;height:.55rem;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:ffPriceDot 2s infinite}
@keyframes ffPriceDot{0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}70%{box-shadow:0 0 0 .5rem rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
/* Live price rate table (city pages — sourced from Customizer) */
.ff-price-live-rates{margin:0 0 1.75rem}
.ff-price-rate-table{padding:1.75rem 2rem;border-radius:1.25rem;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 18px rgba(0,0,0,.06)}
.ff-price-rate-eyebrow{margin:0 0 .35rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9a3412}
.ff-prt-title{font-size:1.2rem;font-weight:700;margin:0 0 1rem;color:#111}
.ff-prt-table{width:100%;border-collapse:collapse;font-size:.95rem}
.ff-prt-table th,.ff-prt-table td{text-align:left;padding:.55rem .85rem;border-bottom:1px solid rgba(0,0,0,.07)}
.ff-prt-table th{font-weight:700;color:#333;background:#f7f7f7}
.ff-prt-table td:last-child{font-weight:700;color:var(--ff-accent,#e63b2e)}
.ff-prt-table tr:last-child td{border-bottom:none}
.ff-prt-label,.ff-prt-description{display:block}
.ff-prt-description{margin-top:.2rem;font-size:.8rem;font-weight:400;line-height:1.35;color:#666}
.ff-prt-note{margin:.85rem 0 0;font-size:.82rem;color:#666}
.ff-state-rate-summary{margin:0 0 1.75rem;padding:1.75rem 2rem;border-radius:1.25rem;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 18px rgba(0,0,0,.06)}
@media (max-width:600px){.ff-price-rate-table{padding:1.25rem 1rem}.ff-prt-table th,.ff-prt-table td{padding:.45rem .6rem}.ff-state-rate-summary{padding:1.25rem 1rem}}
/* CTA band on price / distributor pages */
.ff-price-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:2.5rem;padding:2rem 2.25rem;border-radius:1.25rem;background:#141414;color:#fff}
.ff-price-cta h2{margin:0 0 .35rem;font-size:1.35rem;color:#fff}
.ff-price-cta p{margin:0;opacity:.75;max-width:34rem}
.ff-price-cta .ff-price-cta-eyebrow{margin:0 0 .45rem;color:#f47a27;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:1}
.ff-price-cta-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.ff-btn-accent{background:var(--ff-accent,#e63b2e);color:#fff;border-color:var(--ff-accent,#e63b2e)}
/* Distributor state index cards v2 */
.ff-dist-states-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0 2rem}
.ff-dist-states-v2 .ff-dist-state-card{display:flex;flex-direction:column;gap:.4rem;padding:1.4rem 1.5rem;border-radius:1rem;text-decoration:none;transition:transform .2s,box-shadow .2s}
.ff-dist-states-v2 .ff-dist-state-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.ff-dist-state-name{font-size:1.1rem;font-weight:700}
.ff-dist-state-more{font-size:.85rem;opacity:.7}
@media (max-width:800px){.ff-dist-states-v2{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ff-dist-states-v2{grid-template-columns:1fr}}
/* Media hub cards */
.ff-media-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:1rem 0 2rem}
.ff-media-card{display:flex;flex-direction:column;border-radius:1.25rem;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.ff-media-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.16)}
.ff-media-card-img{display:block;height:11rem;background-size:cover;background-position:center}
.ff-media-card-body{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem 1.5rem 1.6rem}
.ff-media-card-title{font-size:1.15rem;font-weight:700}
.ff-media-card-text{font-size:.92rem;opacity:.75;line-height:1.5}
.ff-media-card-more{margin-top:.35rem;font-weight:600;color:var(--ff-accent,#e63b2e);font-size:.9rem}
@media (max-width:800px){.ff-media-cards{grid-template-columns:1fr}}
/* Media sub-page sections */
.ff-media-section-title{font-size:1.4rem;margin:2.25rem 0 1rem}
/* v4.9 — media hero background image + intro, load-more */
.ff-media-hero{position:relative;overflow:hidden}
.ff-media-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.ff-media-hero-shade{position:absolute;inset:0;background:linear-gradient(to top,#0A0A0A 0%,rgba(10,10,10,.55) 55%,rgba(10,10,10,.35) 100%)}
.ff-media-hero .ff-container{position:relative;z-index:2}
.ff-media-intro{margin-top:.75rem}
.ff-media-hero .ff-price-nav{margin-top:1.75rem}
.ff-loadmore-wrap{text-align:center;margin:1.75rem 0 0}
.ff-media-body img{max-width:100%;height:auto;border-radius:1rem}
.ff-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ff-media-item{margin:0;border-radius:1rem;overflow:hidden;background:#00000010}
.ff-media-item img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s}
.ff-media-item:hover img{transform:scale(1.04)}
@media (max-width:800px){.ff-media-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ff-media-grid{grid-template-columns:1fr}}
/* Click-to-load YouTube (no autoplay) */
.ff-yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ff-yt-lite{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:1rem;overflow:hidden;cursor:pointer;background:#000}
.ff-yt-lite img{display:block;width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s,transform .3s}
.ff-yt-lite:hover img{opacity:1;transform:scale(1.03)}
.ff-yt-play{position:absolute;top:50%;left:50%;width:3.6rem;height:2.6rem;transform:translate(-50%,-50%);background:rgba(230,59,46,.92);border-radius:.7rem;transition:background .2s}
.ff-yt-play::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:.55rem 0 .55rem .95rem;border-color:transparent transparent transparent #fff}
.ff-yt-lite:hover .ff-yt-play{background:var(--ff-accent,#e63b2e)}
.ff-yt-lite.is-loaded{cursor:default}
.ff-yt-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:800px){.ff-yt-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ff-yt-grid{grid-template-columns:1fr}}
/* v4.5.1 — image logo (Site Identity custom logo or bundled Amba Shakti mark) */
.ff-logo{display:inline-flex;align-items:center}
.ff-logo-img,.ff-logo .custom-logo{display:block;height:3.1rem;width:auto;max-width:12rem;object-fit:contain}
.ff-footer-logo{display:inline-flex}
.ff-footer-logo .ff-logo-img,.ff-footer-logo .custom-logo{height:3.6rem;background:#fff;border-radius:.5rem;padding:.3rem .5rem}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ============ v4.6: logo enlarge + contrast chip, products rich intro + card CTAs,
TMT advantages slider, company overview, md tables, 2x square profile photos ============ */
/* Logo: 40% larger, on a light chip so it reads on dark / image-heavy backgrounds. */
.ff-logo { background: rgba(255, 255, 255, 0.94); border-radius: 0.65rem; padding: 0.3rem 0.7rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.ff-logo-img, .ff-logo .custom-logo { height: 4.35rem; max-width: 17rem; }
.ff-footer-logo .ff-logo-img, .ff-footer-logo .custom-logo { height: 5rem; padding: 0.35rem 0.6rem; }
@media (max-width: 720px) { .ff-logo-img, .ff-logo .custom-logo { height: 3.4rem; max-width: 13rem; } }
/* Products lineup rich intro + per-card CTA */
.ff-products-rich { max-width: 52rem; margin: 1.25rem auto 0; padding: 1.1rem 1.5rem; background: var(--ff-card, #fff); border: 1px solid var(--ff-border, #e7e5e4); border-left: 4px solid var(--ff-orange, #ea580c); border-radius: 1rem; font-size: 1.06rem; line-height: 1.7; text-align: left; }
.ff-products-rich a { color: var(--ff-orange, #ea580c); font-weight: 700; text-decoration: underline; }
.ff-tile-text a { color: #fff; text-decoration: underline; }
.ff-tile-cta { display: inline-block; margin-top: 0.7rem; padding: 0.45rem 1rem; background: var(--ff-orange, #ea580c); color: #fff !important; border-radius: 999px; font-size: 0.85rem; font-weight: 700; text-decoration: none !important; }
.ff-tile-cta:hover { filter: brightness(1.1); }
/* TMT advantages slider */
.ff-slider { position: relative; display: flex; align-items: center; gap: 0.75rem; }
.ff-slider-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.5rem 0.25rem 1.25rem; flex: 1; scrollbar-width: thin; }
.ff-slide { flex: 0 0 min(340px, 82vw); scroll-snap-align: start; background: var(--ff-card, #fff); border: 1px solid var(--ff-border, #e7e5e4); border-radius: 1.25rem; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ff-slide h3 { font-size: 1.15rem; margin: 0; }
.ff-slide p { font-size: 0.95rem; line-height: 1.65; color: var(--ff-muted, #57534e); margin: 0; }
.ff-slide-num { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; color: var(--ff-orange, #ea580c); }
.ff-slider-arrow { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--ff-border, #e7e5e4); background: #fff; font-size: 1.1rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.ff-slider-arrow:hover { background: var(--ff-orange, #ea580c); color: #fff; }
@media (max-width: 720px) { .ff-slider-arrow { display: none; } }
/* Credentials certificate slider */
.ff-cert-slide { padding: 0.75rem; margin: 0; background: var(--ff-card, #fff); }
.ff-cert-slide a { display: block; }
.ff-cert-slide img { display: block; width: 100%; height: 320px; object-fit: contain; border-radius: 0.75rem; background: #fff; }
/* Company overview */
.ff-overview { background: var(--ff-bg-alt, #fafaf9); }
.ff-ov-lead { max-width: 54rem; }
.ff-ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 960px) { .ff-ov-grid { grid-template-columns: 1fr; } }
.ff-ov-card { background: var(--ff-card, #fff); border: 1px solid var(--ff-border, #e7e5e4); border-radius: 1.5rem; padding: 2rem 1.75rem; }
.ff-ov-card h3 { margin: 0 0 0.9rem; font-size: 1.2rem; }
.ff-ov-card .ff-ov-h3-gap { margin-top: 1.6rem; }
.ff-ov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ff-ov-list li { position: relative; padding-left: 1.6rem; line-height: 1.55; }
.ff-ov-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--ff-orange, #ea580c); font-weight: 800; }
.ff-ov-note { margin-top: 1rem; font-size: 0.95rem; color: var(--ff-muted, #57534e); }
.ff-ov-note a { color: var(--ff-orange, #ea580c); font-weight: 700; }
.ff-ov-card-dark { background: linear-gradient(135deg, #1c1917 0%, #292524 60%, #431407 140%); border-color: #44403c; color: #e7e5e4; }
.ff-ov-card-dark h3 { color: #fff; }
.ff-ov-card-dark .ff-ov-note a { color: #fdba74; }
/* Markdown tables (e.g. TMT grades) */
.ff-md-table { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--ff-border, #e7e5e4); border-radius: 1rem; }
.ff-md-table table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ff-md-table th { background: var(--ff-fg, #1c1917); color: #fff; text-align: left; padding: 0.85rem 1.1rem; font-size: 0.9rem; letter-spacing: 0.04em; }
.ff-md-table td { padding: 0.85rem 1.1rem; border-top: 1px solid var(--ff-border, #e7e5e4); line-height: 1.6; vertical-align: top; }
.ff-md-table tr:nth-child(even) td { background: var(--ff-bg-alt, #fafaf9); }
/* Management team: profile photos 2x larger and square */
.ff-sub-card-photo { height: auto; aspect-ratio: 1 / 1; }
.ff-sub-card-avatar { width: 192px; height: 192px; border-radius: 1rem; font-size: 3.6rem; }
/* ============ v4.7: clickable cards, whyus customizer cards, per-page extra sections ============ */
.ff-card-link { text-decoration: none; color: inherit; display: block; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.ff-card-link:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.2); border-color: rgba(249, 115, 22, 0.4); }
a.ff-persona-card, a.ff-slide { display: flex; }
.ff-why-card .ff-tile-cta { margin-top: 1rem; }
.ff-why-cta-row { text-align: center; margin-top: 2.5rem; }
/* Extra page sections */
.ff-xsec { border-top: 1px solid var(--ff-border, #e7e5e4); }
.ff-xsec-inner { display: grid; gap: 2.5rem; align-items: center; }
.ff-xsec.has-images .ff-xsec-inner { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .ff-xsec.has-images .ff-xsec-inner { grid-template-columns: 1fr; } }
.ff-xsec-text p { line-height: 1.75; color: var(--ff-muted, #57534e); margin: 0 0 1rem; }
.ff-xsec-text a { color: var(--ff-orange, #ea580c); font-weight: 700; }
.ff-xsec-cta { margin-top: 0.75rem; }
.ff-xsec-media { display: grid; gap: 1rem; }
.ff-xsec-media img { width: 100%; border-radius: 1.25rem; border: 1px solid var(--ff-border, #e7e5e4); display: block; }
.ff-xsec-img2 .ff-xsec-media { grid-template-columns: 1fr 1fr; align-items: start; }
.ff-xsec-img3 .ff-xsec-media { grid-template-columns: 1fr 1fr; }
.ff-xsec-img3 .ff-xsec-media img:first-child { grid-column: 1 / -1; }
/* Rich content inside extra-section body */
.ff-xsec-text ul, .ff-xsec-text ol { margin: 0 0 1rem 1.5rem; padding: 0; color: var(--ff-muted, #57534e); }
.ff-xsec-text ul { list-style: disc; }
.ff-xsec-text ol { list-style: decimal; }
.ff-xsec-text li { margin: 0 0 0.35rem; line-height: 1.65; }
.ff-xsec-text li ul, .ff-xsec-text li ol { margin-top: 0.25rem; margin-bottom: 0; }
.ff-xsec-text h2, .ff-xsec-text h3, .ff-xsec-text h4 { margin: 1.5rem 0 0.5rem; font-weight: 700; line-height: 1.25; }
.ff-xsec-text h2 { font-size: 1.45rem; }
.ff-xsec-text h3 { font-size: 1.2rem; }
.ff-xsec-text h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ff-xsec-text strong { font-weight: 700; }
.ff-xsec-text em { font-style: italic; }
.ff-xsec-text img { max-width: 100%; height: auto; border-radius: 0.75rem; display: block; margin: 1rem 0; }
/* Table inside extra-section body */
.ff-xsec-text table, .ff-xsec-text .ff-md-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1rem 0 1.5rem; }
.ff-xsec-text th, .ff-xsec-text .ff-md-table th { background: var(--ff-fg, #171717); color: #fff; font-weight: 700; text-align: left; padding: 0.55rem 0.85rem; }
.ff-xsec-text td, .ff-xsec-text .ff-md-table td { padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--ff-border, #e7e5e4); vertical-align: top; color: var(--ff-muted, #57534e); }
.ff-xsec-text tr:last-child td { border-bottom: none; }
.ff-xsec-text tr:nth-child(even) td { background: rgba(0,0,0,0.025); }
.ff-xsec-text .ff-md-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ============ v4.8: Mobile PageSpeed / LCP delivery ============ */
/* System font stack avoids a remote render-blocking font stylesheet. */
body, button, input, textarea, select { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
/* First hero text is visible at first paint. Motion only applies after load / to later slides. */
.ff-hero-slide:first-child .ff-hero-content > * { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .ff-hero-slide .ff-hero-content > *, .ff-hero-bg { transition: none !important; transform: none !important; } }
@media (max-width: 767px) { .ff-hero { height: min(100svh, 760px); min-height: 560px; } .ff-hero-headline { font-size: clamp(2.65rem, 13vw, 4rem); } }
/* ============ Partner With Us ============ */
.ff-partner-page { background: #fff; }
.ff-partner-hero {
position: relative;
overflow: hidden;
padding: 11rem 0 7rem;
color: #fff;
background: #273656;
}
.ff-partner-hero-grid {
position: absolute;
inset: 0;
opacity: 0.08;
background-image:
linear-gradient(rgba(255,255,255,0.45) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.45) 1px, transparent 1px);
background-size: 40px 40px;
}
.ff-partner-hero-glow {
position: absolute;
width: min(54rem, 80vw);
height: min(54rem, 80vw);
right: -18rem;
bottom: -24rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(217,12,32,0.72) 0%, rgba(249,115,22,0.24) 36%, transparent 70%);
}
.ff-partner-hero-inner { position: relative; z-index: 1; }
.ff-partner-hero-title {
max-width: 62rem;
margin: 0 0 1.5rem;
font-size: clamp(3rem, 7.3vw, 6.8rem);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.06em;
}
.ff-partner-hero-title span {
display: block;
color: rgba(255,255,255,0.72);
}
.ff-partner-hero-copy {
max-width: 44rem;
margin: 0 0 2.25rem;
color: rgba(255,255,255,0.72);
font-size: clamp(1.05rem, 2vw, 1.3rem);
line-height: 1.7;
font-weight: 300;
}
.ff-partner-editor-body { padding-bottom: 2rem; }
.ff-partner-benefits { background: #f5f5f5; }
.ff-partner-benefit-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.ff-partner-benefit {
min-height: 20rem;
padding: 2.25rem;
border: 1px solid var(--ff-border);
border-radius: 2rem;
background: #fff;
box-shadow: 0 18px 50px -38px rgba(39,54,86,0.45);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ff-partner-benefit:hover {
transform: translateY(-6px);
border-color: rgba(249,115,22,0.4);
box-shadow: 0 28px 60px -34px rgba(39,54,86,0.5);
}
.ff-partner-benefit-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-bottom: 2rem;
border-radius: 1rem;
color: var(--ff-orange);
background: rgba(249,115,22,0.1);
font-weight: 800;
}
.ff-partner-benefit h3 {
margin-bottom: 1rem;
font-size: 1.35rem;
line-height: 1.2;
}
.ff-partner-benefit p {
color: var(--ff-muted);
font-size: 0.95rem;
line-height: 1.75;
}
.ff-partner-invitation {
position: relative;
overflow: hidden;
padding: 6rem 0;
color: #fff;
background: #273656;
}
.ff-partner-invitation::after {
content: "";
position: absolute;
width: 30rem;
height: 30rem;
right: -12rem;
top: -18rem;
border-radius: 50%;
background: rgba(217,12,32,0.26);
filter: blur(8px);
}
.ff-partner-invitation-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 5rem;
align-items: end;
}
.ff-partner-invitation h2 {
max-width: 48rem;
font-size: clamp(2.25rem, 4.5vw, 4rem);
line-height: 1.05;
}
.ff-partner-invitation p {
color: rgba(255,255,255,0.68);
line-height: 1.75;
}
.ff-partner-page .ff-enquiry-section { background: #fff; }
@media (max-width: 960px) {
.ff-partner-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ff-partner-invitation-inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
.ff-partner-hero { padding: 8rem 0 5rem; }
.ff-partner-benefit-grid { grid-template-columns: 1fr; }
.ff-partner-benefit { min-height: 0; padding: 1.75rem; }
.ff-partner-invitation { padding: 4.5rem 0; }
}