/*
Theme Name: Signal
Theme URI: https://yourdomain.com/
Author: Osta Media
Author URI: https://ostamedia.com/
Description: Custom clothing and uniform manufacturer theme. Graphite, signal red and signal yellow palette with page templates for products, manufacturing, about, contact, a brand guides blog and a single post layout. Same section structure as STITCHLINE, different colours. Separate header and footer templates, primary menu support and Customizer contact details. All colours are hardcoded, no CSS variables used.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: stitchline
Tags: business, custom-menu, custom-logo, featured-images, blog, one-column, two-columns, right-sidebar, translation-ready

PALETTE
Graphite (primary)    #2B3138
Signal Red (secondary) #C8102E
Signal Yellow (CTA)    #FFC400  always with #1F2328 text on it
Background             #FFFFFF
Light sections         #F2F3F5
Text                   #1F2328

The text domain stays "stitchline" so every translation string keeps working.
*/
/* =========================================================
   STITCHLINE - light corporate theme
   Primary navy #2B3138 | Secondary blue #C8102E | CTA orange #FFC400
   Background #FFFFFF | Light sections #F2F3F5 | Text #1F2328
   All colours hardcoded (no :root, no CSS variables).
   Everything scoped under .cf for clean WordPress drop-in.
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}

.cf{
  background:#FFFFFF;
  color:#1F2328;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.cf ::selection{background:#C8102E;color:#FFFFFF}
.cf h1,.cf h2,.cf h3,.cf h4{margin:0;font-weight:800;line-height:1.18;letter-spacing:-.015em;color:#2B3138}
.cf p{margin:0}
.cf a{color:inherit;text-decoration:none}
.cf ul{margin:0;padding:0;list-style:none}
.cf img{max-width:100%;display:block}

.cf .wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 28px}
.cf section{padding:110px 0}
.cf .alt{background:#F2F3F5}

.cf .sec-head{text-align:center;max-width:840px;margin:0 auto 64px}
.cf .kicker{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#C8102E;background:#FDEEF0;border:1px solid #F6C6CE;border-radius:100px;padding:6px 16px;margin-bottom:22px}
.cf .sec-head h2{font-size:clamp(28px,3.6vw,44px)}
.cf .sec-head h2 em{font-style:normal;color:#C8102E}
.cf .sec-head h2 u{text-decoration:none;color:#FFC400}
.cf .sec-head p{color:#5C646C;font-size:16px;margin-top:20px}

.cf .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 28px;border-radius:5px;border:2px solid transparent;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.cf .btn-green{background:#FFC400;color:#FFFFFF;border-color:#FFC400}
.cf .btn-green:hover{background:#E5AC00;border-color:#E5AC00;transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,196,0,.32)}
.cf .btn-line{background:transparent;color:#2B3138;border-color:#2B3138}
.cf .btn-line:hover{background:#2B3138;color:#FFFFFF;transform:translateY(-2px)}
.cf .btn-sm{padding:10px 20px;font-size:11.5px}
.cf .btn:focus-visible{outline:2px solid #C8102E;outline-offset:3px}

/* ============ HEADER ============ */
.cf header{position:sticky;top:0;z-index:70;background:rgba(43,49,56,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.12)}
.cf header a{color:#FFFFFF}
.cf .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:80px}
.cf .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;color:#FFFFFF}
.cf .logo .mark{width:36px;height:36px;border-radius:6px;background:#C8102E;position:relative;flex:none}
.cf .logo .mark::after{content:"";position:absolute;inset:9px;border:2px solid #FFFFFF;border-radius:2px}
.cf .logo small{display:block;font-size:9px;font-weight:500;letter-spacing:.2em;color:rgba(255,255,255,.62);text-transform:uppercase;margin-top:-5px}

.cf .menu{display:flex;align-items:center;gap:28px}
.cf .menu>li>a{font-size:14.5px;font-weight:500;padding:6px 0;position:relative;display:inline-block}
.cf .menu>li>a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#FFC400;transition:width .22s}
.cf .menu>li>a:hover::after{width:100%}
.cf .has-sub{position:relative}
.cf .sub{
  position:absolute;top:calc(100% + 18px);left:-18px;width:540px;background:#FFFFFF;border:1px solid #E1E4E8;
  border-radius:8px;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;box-shadow:0 26px 60px rgba(43,49,56,.18)}
.cf .has-sub:hover .sub,.cf .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.cf .sub a{display:block;padding:10px 13px;border-radius:5px;font-size:14px;color:#47505A}
.cf .sub a:hover{background:#F2F3F5;color:#C8102E}
.cf .burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:transparent;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.cf .burger i{width:18px;height:2px;background:#FFFFFF;display:block}

/* ============ HERO ============ */
.cf .hero{position:relative;padding:130px 0 118px;text-align:center;overflow:hidden;color:#FFFFFF}
.cf .hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf .hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,49,56,.90),rgba(43,49,56,.94) 60%,rgba(43,49,56,.99))}
.cf .hero .wrap{position:relative}
.cf .hero h1{font-size:clamp(32px,5vw,60px);max-width:1020px;margin:0 auto;letter-spacing:-.028em;color:#FFFFFF}
.cf .hero h1 em{font-style:normal;color:#FFC94D}
.cf .hero .sub{color:rgba(255,255,255,.85);font-size:17.5px;max-width:740px;margin:26px auto 0}
.cf .hero .cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:42px}
.cf .hero .btn-line{color:#FFFFFF;border-color:rgba(255,255,255,.55)}
.cf .hero .btn-line:hover{background:#FFFFFF;color:#2B3138;border-color:#FFFFFF}
.cf .hero .stats{display:flex;flex-wrap:wrap;justify-content:center;gap:52px;margin-top:62px;padding-top:38px;border-top:1px solid rgba(255,255,255,.18)}
.cf .hero .stats div strong{display:block;font-size:32px;font-weight:800;color:#FFC94D;line-height:1}
.cf .hero .stats div span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* ============ BENTO GRID (1 big 2x2 + 2 small 1x1) ============ */
.cf .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;grid-auto-rows:250px}
.cf .bento6 > :nth-child(1){grid-area:1/1/3/3}
.cf .bento6 > :nth-child(2){grid-area:1/3/2/4}
.cf .bento6 > :nth-child(3){grid-area:2/3/3/4}
.cf .bento6 > :nth-child(4){grid-area:3/2/5/4}
.cf .bento6 > :nth-child(5){grid-area:3/1/4/2}
.cf .bento6 > :nth-child(6){grid-area:4/1/5/2}


/* card that fills its bento cell */
.cf .bcard{position:relative;border-radius:10px;overflow:hidden;border:1px solid #E1E4E8;background:#FFFFFF;isolation:isolate}
.cf .bcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);z-index:0}
.cf .bcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(43,49,56,.10) 0%,rgba(43,49,56,.55) 46%,rgba(28,33,38,.95) 100%)}
.cf .bcard:hover img{transform:scale(1.07)}
.cf .bcard:hover{border-color:#C8102E;box-shadow:0 18px 40px rgba(43,49,56,.14)}
.cf .bcard .ov{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:24px;color:#FFFFFF}
.cf .bcard .tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#FFD84D;margin-bottom:9px}
.cf .bcard h3{font-size:18px;font-weight:700;line-height:1.4;color:#FFFFFF}
.cf .bcard .meta{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:8px}
.cf .bcard .meta b{color:#7FB0FF;font-weight:600}
.cf .bcard .btn{margin-top:16px}
/* big cells get bigger type */
.cf .bento6 > :nth-child(1) h3,.cf .bento6 > :nth-child(4) h3{font-size:27px;max-width:22ch}
.cf .bento6 > :nth-child(1) .ov,.cf .bento6 > :nth-child(4) .ov{padding:34px}

/* ============ CATEGORY RAIL (x-scroll) ============ */
.cf .railwrap{position:relative}
.cf .railtop{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:30px;flex-wrap:wrap}
.cf .pills{display:flex;gap:10px;flex-wrap:wrap}
.cf .pill{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#5C646C;background:#FFFFFF;border:1px solid #D4D8DD;border-radius:100px;padding:10px 20px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cf .pill:hover{color:#2B3138;border-color:#2B3138}
.cf .pill.on{background:#2B3138;border-color:#2B3138;color:#FFFFFF}
.cf .pill:focus-visible{outline:2px solid #C8102E;outline-offset:3px}
.cf .navbits{display:flex;gap:12px;align-items:center}
.cf .counter{font-size:12.5px;color:#5C646C;letter-spacing:.12em;min-width:62px;text-align:center;font-weight:500}
.cf .counter b{color:#C8102E;font-weight:700}
.cf .arrow{width:48px;height:48px;border-radius:50%;border:1px solid #D4D8DD;background:#FFFFFF;color:#2B3138;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.cf .arrow:hover:not(:disabled){background:#2B3138;border-color:#2B3138;color:#FFFFFF}
.cf .arrow:disabled{opacity:.35;cursor:not-allowed}
.cf .arrow:focus-visible{outline:2px solid #C8102E;outline-offset:3px}
.cf .arrow svg{width:17px;height:17px;fill:currentColor}

.cf .rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 30px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.cf .rail::-webkit-scrollbar{display:none}
.cf .rail.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
.cf .rail.dragging a,.cf .rail.dragging img{pointer-events:none}
.cf .rail:focus-visible{outline:2px solid #C8102E;outline-offset:6px;border-radius:12px}

.cf .ccard{flex:0 0 340px;scroll-snap-align:start;background:#FFFFFF;border:1px solid #E1E4E8;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s}
.cf .ccard:hover{border-color:#C8102E;transform:translateY(-6px);box-shadow:0 22px 50px rgba(43,49,56,.14)}
.cf .ccard .pic{height:250px;overflow:hidden;position:relative}
.cf .ccard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.cf .ccard:hover .pic img{transform:scale(1.07)}
.cf .ccard .num{position:absolute;top:14px;left:14px;background:rgba(43,49,56,.88);border:1px solid rgba(255,255,255,.28);color:#FFFFFF;font-size:10.5px;font-weight:600;letter-spacing:.15em;padding:5px 12px;border-radius:100px}
.cf .ccard .body{padding:24px;display:flex;flex-direction:column;flex:1}
.cf .ccard .tag{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#C8102E}
.cf .ccard h3{font-size:18px;font-weight:700;line-height:1.42;margin-top:10px;min-height:52px;color:#2B3138}
.cf .ccard h3 a:hover{color:#C8102E}
.cf .specs{margin:18px 0 22px;border-top:1px solid #E1E4E8}
.cf .specs div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #E1E4E8;font-size:12.5px}
.cf .specs b{color:#8A9199;font-weight:500;text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;padding-top:3px}
.cf .specs span{color:#2B3138;font-weight:500;text-align:right}
.cf .ccard .btn{margin-top:auto;width:100%}

.cf .track{height:3px;background:#E1E4E8;border-radius:100px;overflow:hidden}
.cf .track i{display:block;height:100%;width:0;background:#C8102E;border-radius:100px;transition:width .18s linear}
.cf .fade{position:absolute;top:0;bottom:36px;width:80px;pointer-events:none;z-index:3;opacity:0;transition:opacity .25s}
.cf .fade.show{opacity:1}
.cf .fade-l{left:-2px;background:linear-gradient(90deg,#F2F3F5,rgba(245,247,250,0))}
.cf .fade-r{right:-2px;background:linear-gradient(270deg,#F2F3F5,rgba(245,247,250,0))}
.cf .railhint{font-size:12px;color:#8A98A8;letter-spacing:.08em;margin-top:16px;text-align:center}

/* ============ THREE TIERS ============ */
.cf .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cf .tier{border:2px dashed #F6C6CE;border-radius:10px;padding:36px 32px;text-align:center;display:flex;flex-direction:column;background:#FFF8F9;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.cf .tier:hover{border-color:#C8102E;background:#FDEEF0;transform:translateY(-4px);box-shadow:0 16px 36px rgba(43,49,56,.10)}
.cf .tier h3{font-size:25px}
.cf .tier .for{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#FFC400;margin-top:8px;font-weight:600}
.cf .tier>p{color:#5C646C;font-size:14.5px;margin-top:16px;min-height:70px}
.cf .tier .rows{margin:22px 0 30px;text-align:left}
.cf .tier .rows div{padding:11px 0;border-bottom:1px solid #E1E4E8;font-size:13.5px;display:flex;justify-content:space-between;gap:12px}
.cf .tier .rows b{color:#8A9199;font-weight:500;text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;padding-top:4px}
.cf .tier .rows span{text-align:right;font-weight:500;color:#1F2328}
.cf .tier .btn{margin-top:auto}

/* ============ QUICK TOOLS ============ */
.cf .tools{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ============ COMPARE TABLE ============ */
.cf .cmp{width:100%;border-collapse:collapse;background:#FFFFFF;border:1px solid #E1E4E8;border-radius:10px;overflow:hidden}
.cf .cmp th,.cf .cmp td{padding:18px 22px;text-align:left;border-bottom:1px solid #E1E4E8;font-size:14.5px;color:#1F2328}
.cf .cmp thead th{background:#2B3138;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#FFFFFF}
.cf .cmp thead th:nth-child(2){color:#FFC94D}
.cf .cmp td:not(:first-child),.cf .cmp th:not(:first-child){text-align:center;width:210px}
.cf .cmp .yes{color:#C8102E;font-weight:700}
.cf .cmp .no{color:#C0392B}
.cf .cmp tbody tr:nth-child(even){background:#F7F8F9}
.cf .cmp tbody tr:last-child td{border-bottom:none}

/* ============ HOW IT WORKS ============ */
.cf .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 34px}
.cf .step{text-align:center}
.cf .step .circle{width:150px;height:150px;border-radius:50%;margin:0 auto 24px;overflow:hidden;border:3px solid #C8102E;position:relative}
.cf .step .circle img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cf .step:hover .circle img{transform:scale(1.08)}
.cf .step h3{font-size:20px}
.cf .step h3 i{font-style:normal;color:#FFC400}
.cf .step p{color:#5C646C;font-size:14.5px;margin-top:12px}

/* ============ MARKETS ============ */
.cf .mkt{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cf .mkt div{border:1px solid #E1E4E8;border-radius:8px;padding:22px;background:#FFFFFF;transition:border-color .2s,transform .2s,box-shadow .2s}
.cf .mkt div:hover{border-color:#C8102E;transform:translateY(-3px);box-shadow:0 14px 30px rgba(43,49,56,.10)}
.cf .mkt b{display:block;font-size:16px;font-weight:700;color:#2B3138}
.cf .mkt span{font-size:12.5px;color:#C8102E}

/* ============ FAQ ============ */
.cf .faq{max-width:960px;margin:0 auto}
.cf .fq{border-bottom:1px solid #DCE0E5}
.cf .fq button{width:100%;background:none;border:0;cursor:pointer;text-align:left;color:#2B3138;font-family:inherit;
  font-size:17.5px;font-weight:600;padding:24px 50px 24px 0;position:relative}
.cf .fq button:hover{color:#C8102E}
.cf .fq button::after{content:"+";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#FFC400;font-size:26px;font-weight:400}
.cf .fq.open button{color:#C8102E}
.cf .fq.open button::after{content:"\2212"}
.cf .fq .ans{max-height:0;overflow:hidden;transition:max-height .3s ease}
.cf .fq .ans p{color:#5C646C;font-size:15px;padding-bottom:26px;max-width:76ch}

/* ============ GUIDES ============ */
.cf .guides{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cf .guide{background:#FFFFFF;border:1px solid #E1E4E8;border-radius:10px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.cf .guide:hover{border-color:#C8102E;transform:translateY(-5px);box-shadow:0 18px 40px rgba(43,49,56,.12)}
.cf .guide .pic{height:200px;overflow:hidden}
.cf .guide .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cf .guide:hover .pic img{transform:scale(1.06)}
.cf .guide .body{padding:24px}
.cf .guide .tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C8102E;font-weight:600}
.cf .guide h3{font-size:17.5px;margin-top:10px;font-weight:600;line-height:1.45}
.cf .guide p{color:#5C646C;font-size:14px;margin-top:11px}
.cf .guide u{display:inline-block;margin-top:16px;text-decoration:none;color:#FFC400;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ============ QUOTE ============ */
.cf .qbox{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cf .qpic{border-radius:12px;overflow:hidden;border:1px solid #E1E4E8;margin-top:34px}
.cf .qpic img{width:100%;height:280px;object-fit:cover}
.cf .form{background:#FFFFFF;border:2px dashed #F6C6CE;border-radius:12px;padding:34px}
.cf .form label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A9199;margin-bottom:7px;font-weight:500}
.cf .form .fr{margin-bottom:16px}
.cf .form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf .form input,.cf .form select,.cf .form textarea{
  width:100%;padding:13px 14px;border:1px solid #D4D8DD;border-radius:5px;background:#FFFFFF;color:#1F2328;
  font-family:inherit;font-size:14.5px}
.cf .form input::placeholder,.cf .form textarea::placeholder{color:#9AA1A8}
.cf .form input:focus,.cf .form select:focus,.cf .form textarea:focus{outline:2px solid #C8102E;outline-offset:1px;border-color:transparent}
.cf .form textarea{resize:vertical;min-height:92px}
.cf .form .btn{width:100%;margin-top:6px}
.cf .form small{display:block;text-align:center;color:#8A9199;font-size:12px;margin-top:14px}

/* ============ SEO ARTICLE ============ */
.cf .seo{max-width:920px;margin:0 auto}
.cf .seo h2{font-size:clamp(26px,3.2vw,38px)}
.cf .seo h3{font-size:21px;margin:40px 0 12px;color:#C8102E}
.cf .seo p{color:#444B52;font-size:15.5px;margin-top:16px}
.cf .seo a{color:#C8102E;text-decoration:underline;text-underline-offset:3px}
.cf .seo a:hover{color:#FFC400}

/* ============ NEWSLETTER ============ */
.cf .news{background:linear-gradient(120deg,#2B3138 0%,#5C2026 55%,#C8102E 100%);padding:72px 0;text-align:center;color:#FFFFFF}
.cf .news h3{font-size:clamp(21px,2.8vw,30px);max-width:680px;margin:0 auto;color:#FFFFFF}
.cf .news form{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.cf .news input{padding:14px 18px;border:1px solid #FFFFFF;border-radius:5px;background:#FFFFFF;color:#1F2328;font-family:inherit;font-size:14.5px;min-width:240px}
.cf .news input::placeholder{color:#9AA1A8}
.cf .news input:focus{outline:2px solid #FFC400;outline-offset:1px}

/* ============ FOOTER ============ */
.cf footer{background:#2B3138;padding:80px 0 0;color:rgba(255,255,255,.74);font-size:14.5px}
.cf .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:48px}
.cf footer h4{color:#FFFFFF;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;font-weight:700}
.cf footer li{margin-bottom:10px}
.cf footer a:hover{color:#FFD84D}
.cf .socials{display:flex;gap:10px;margin-top:20px}
.cf .socials a{width:36px;height:36px;border:1px solid rgba(255,255,255,.24);border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:600;color:#FFFFFF}
.cf .socials a:hover{border-color:#FFC400;color:#FFD84D}
.cf .fbot{margin-top:60px;border-top:1px solid rgba(255,255,255,.16);padding:24px 0;display:flex;justify-content:space-between;gap:16px;font-size:12.5px;flex-wrap:wrap}
.cf .pay{display:flex;gap:8px}
.cf .pay i{font-style:normal;font-size:10px;letter-spacing:.06em;border:1px solid rgba(255,255,255,.24);border-radius:3px;padding:4px 9px}

.cf .wa{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px rgba(43,49,56,.35)}
.cf .wa svg{width:29px;height:29px;fill:#FFFFFF}

.cf .rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.cf .rv.in{opacity:1;transform:none}

@media (max-width:1040px){
  .cf .menu,.cf .nav>.btn{display:none}
  .cf .burger{display:flex}
  .cf .menu.open{display:flex;position:absolute;top:80px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#2B3138;border-bottom:1px solid rgba(255,255,255,.12);padding:10px 28px 20px}
  .cf .menu.open>li{width:100%;border-bottom:1px solid rgba(255,255,255,.12)}
  .cf .menu.open>li>a{display:block;padding:14px 0}
  .cf .sub{position:static;width:100%;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 10px;grid-template-columns:1fr;background:transparent}
  .cf .menu.open .sub a{color:rgba(255,255,255,.72)}
  .cf .menu.open .sub a:hover{background:rgba(255,255,255,.07);color:#FFFFFF}
  .cf .bento{grid-template-columns:1fr 1fr;grid-auto-rows:230px}
  .cf .ccard{flex-basis:320px}
  .cf .bento6 > *{grid-area:auto !important}
  .cf .bento6 > :nth-child(1),.cf .bento6 > :nth-child(4){grid-column:span 2 !important}
  .cf .tiers,.cf .steps,.cf .guides{grid-template-columns:repeat(2,1fr)}
  .cf .qbox{grid-template-columns:1fr;gap:40px}
  .cf .mkt{grid-template-columns:repeat(2,1fr)}
  .cf .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cf section{padding:70px 0}
  .cf .wrap{padding:0 20px}
  .cf .bento{grid-template-columns:1fr;grid-auto-rows:260px;gap:18px}
  .cf .rail{gap:16px}
  .cf .ccard{flex-basis:276px}
  .cf .railtop{gap:16px}
  .cf .arrow{width:44px;height:44px}
  .cf .bento6 > :nth-child(1),.cf .bento6 > :nth-child(4){grid-column:span 1 !important}
  .cf .bento6 > :nth-child(1) h3,.cf .bento6 > :nth-child(4) h3{font-size:20px}
  .cf .tiers,.cf .steps,.cf .guides,.cf .mkt,.cf .fgrid,.cf .form .two{grid-template-columns:1fr}
  .cf .hero{padding:80px 0 70px}
  .cf .hero .stats{gap:30px;margin-top:44px}
  .cf .cmp th,.cf .cmp td{padding:12px;font-size:13px}
  .cf .cmp td:not(:first-child),.cf .cmp th:not(:first-child){width:auto}
  .cf .fbot{flex-direction:column;align-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cf *,.cf *::before,.cf *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .cf .rv{opacity:1;transform:none}
}

/* =========================================================
   INNER PAGE COMPONENTS - same navy / blue / orange system
   ========================================================= */

/* ---- page hero ---- */
.cf .phero{position:relative;padding:92px 0 82px;background:#2B3138;color:#FFFFFF;overflow:hidden}
.cf .phero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf .phero .veil{position:absolute;inset:0;background:linear-gradient(115deg,rgba(43,49,56,.96) 0%,rgba(43,49,56,.90) 52%,rgba(200,16,46,.70) 100%)}
.cf .phero .wrap{position:relative}
.cf .phero h1{color:#FFFFFF;font-size:clamp(30px,4.4vw,52px);max-width:22ch}
.cf .phero .lead{color:rgba(255,255,255,.85);font-size:17px;margin-top:18px;max-width:66ch}
.cf .phero .kicker{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);color:#9EC1FF}
.cf .phero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.cf .phero .btn-line{color:#FFFFFF;border-color:rgba(255,255,255,.55)}
.cf .phero .btn-line:hover{background:#FFFFFF;color:#2B3138;border-color:#FFFFFF}
.cf .phero .facts{display:flex;flex-wrap:wrap;gap:44px;margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.18)}
.cf .phero .facts strong{display:block;font-size:26px;font-weight:800;color:#FFC94D;line-height:1}
.cf .phero .facts span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}

.cf .crumbs{font-size:12.5px;letter-spacing:.05em;color:rgba(255,255,255,.72);margin-bottom:16px}
.cf .crumbs a:hover{color:#FFD84D}
.cf .crumbs i{font-style:normal;margin:0 9px;opacity:.45}

/* ---- shared helpers ---- */
.cf .sec-head.left{text-align:left;margin-left:0;max-width:720px}
.cf .tight{padding:72px 0}
.cf .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.cf .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cf .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cf .tablewrap{overflow-x:auto}

/* ---- product card ---- */
.cf .pcard{background:#FFFFFF;border:1px solid #E1E4E8;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s}
.cf .pcard:hover{border-color:#C8102E;transform:translateY(-5px);box-shadow:0 20px 44px rgba(43,49,56,.13)}
.cf .pcard .pic{height:240px;overflow:hidden;position:relative}
.cf .pcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.cf .pcard:hover .pic img{transform:scale(1.06)}
.cf .pcard .flag{position:absolute;top:14px;left:14px;background:rgba(43,49,56,.88);border:1px solid rgba(255,255,255,.28);color:#FFFFFF;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.cf .pcard .body{padding:24px;display:flex;flex-direction:column;flex:1}
.cf .pcard .tag{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#C8102E}
.cf .pcard h3{font-size:19px;margin-top:9px;line-height:1.38}
.cf .pcard h3 a:hover{color:#C8102E}
.cf .pcard .desc{color:#5C646C;font-size:14px;margin-top:11px}
.cf .pcard .li{margin:18px 0 22px;border-top:1px solid #E1E4E8}
.cf .pcard .li div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #E1E4E8;font-size:12.5px}
.cf .pcard .li b{color:#8A9199;font-weight:500;text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;padding-top:3px}
.cf .pcard .li span{color:#2B3138;font-weight:500;text-align:right}
.cf .pcard .btn{margin-top:auto;width:100%}

/* ---- icon feature block ---- */
.cf .feat{background:#FFFFFF;border:1px solid #E1E4E8;border-radius:10px;padding:28px;transition:border-color .2s,transform .2s,box-shadow .2s}
.cf .feat:hover{border-color:#C8102E;transform:translateY(-4px);box-shadow:0 16px 34px rgba(43,49,56,.10)}
.cf .feat .ico{width:46px;height:46px;border-radius:10px;background:#FDEEF0;border:1px solid #F6C6CE;color:#C8102E;display:grid;place-items:center;margin-bottom:18px}
.cf .feat .ico svg{width:21px;height:21px;fill:currentColor}
.cf .feat .ico b{font-size:15px;font-weight:800}
.cf .feat h3{font-size:17.5px;line-height:1.4}
.cf .feat p{color:#5C646C;font-size:14px;margin-top:10px}
.cf .feat .more{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FFC400}

/* ---- split text and image ---- */
.cf .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.cf .split .pic{border-radius:12px;overflow:hidden;border:1px solid #E1E4E8}
.cf .split .pic img{width:100%;height:430px;object-fit:cover}
.cf .split h2{font-size:clamp(26px,3.2vw,38px)}
.cf .split .txt p{color:#5C646C;margin-top:16px;font-size:15.5px}
.cf .split.rev .pic{order:-1}
.cf .ticks{margin-top:26px}
.cf .ticks li{position:relative;padding-left:30px;margin-bottom:13px;color:#333A41;font-size:14.5px}
.cf .ticks li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;background:#FDEEF0;border:1px solid #C8102E}
.cf .ticks li::after{content:"";position:absolute;left:5.5px;top:13.5px;width:5px;height:5px;border-radius:50%;background:#C8102E}
.cf .ticks li b{color:#2B3138;font-weight:600}

/* ---- navy stats strip ---- */
.cf .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:#2B3138;border-radius:14px;padding:44px 34px}
.cf .strip div{text-align:center}
.cf .strip strong{display:block;font-size:34px;font-weight:800;color:#FFC94D;line-height:1}
.cf .strip span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-top:8px;display:block}

/* ---- timeline ---- */
.cf .tl{max-width:840px;margin:0 auto;position:relative;padding-left:42px}
.cf .tl::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:#E1E4E8}
.cf .ti{position:relative;padding-bottom:36px}
.cf .ti::before{content:"";position:absolute;left:-42px;top:7px;width:12px;height:12px;border-radius:50%;background:#C8102E;box-shadow:0 0 0 4px #FDEEF0}
.cf .ti .yr{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FFC400}
.cf .ti h3{font-size:19px;margin-top:7px}
.cf .ti p{color:#5C646C;font-size:14.5px;margin-top:9px}

/* ---- contact cards ---- */
.cf .cc{display:block;background:#FFFFFF;border:1px solid #E1E4E8;border-radius:10px;padding:26px;transition:border-color .2s,transform .2s,box-shadow .2s}
.cf .cc:hover{border-color:#C8102E;transform:translateY(-4px);box-shadow:0 16px 34px rgba(43,49,56,.10)}
.cf .cc .ico{width:44px;height:44px;border-radius:10px;background:#FDEEF0;border:1px solid #F6C6CE;color:#C8102E;display:grid;place-items:center;margin-bottom:16px}
.cf .cc .ico svg{width:20px;height:20px;fill:currentColor}
.cf .cc b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8A9199;font-weight:600}
.cf .cc span{display:block;font-size:16px;font-weight:600;color:#2B3138;margin-top:7px;line-height:1.5}
.cf .cc em{font-style:normal;display:block;font-size:13px;color:#5C646C;margin-top:5px}

.cf .mapbox{border-radius:12px;overflow:hidden;border:1px solid #E1E4E8;background:#F2F3F5}
.cf .mapbox iframe{width:100%;height:400px;border:0;display:block}

/* ---- data table ---- */
.cf .dt{width:100%;border-collapse:collapse;background:#FFFFFF;border:1px solid #E1E4E8;border-radius:10px;overflow:hidden}
.cf .dt th,.cf .dt td{padding:15px 20px;text-align:left;border-bottom:1px solid #E1E4E8;font-size:14px;color:#1F2328}
.cf .dt thead th{background:#2B3138;color:#FFFFFF;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.cf .dt tbody tr:nth-child(even){background:#F7F8F9}
.cf .dt tbody tr:last-child td{border-bottom:none}
.cf .dt td b{color:#2B3138;font-weight:600}

/* ---- gradient CTA band ---- */
.cf .band{background:linear-gradient(120deg,#2B3138 0%,#5C2026 55%,#C8102E 100%);border-radius:14px;padding:58px 48px;text-align:center;color:#FFFFFF}
.cf .band h2{color:#FFFFFF;font-size:clamp(24px,3vw,36px)}
.cf .band p{color:rgba(255,255,255,.85);margin:16px auto 0;max-width:62ch;font-size:15.5px}
.cf .band .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cf .band .btn-line{color:#FFFFFF;border-color:rgba(255,255,255,.55)}
.cf .band .btn-line:hover{background:#FFFFFF;color:#2B3138;border-color:#FFFFFF}

/* ---- blog ---- */
.cf .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.cf .chip{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid #D4D8DD;border-radius:100px;padding:8px 18px;color:#5C646C;background:#FFFFFF;transition:background .2s,color .2s,border-color .2s}
.cf .chip:hover{border-color:#2B3138;color:#2B3138}
.cf .chip.on{background:#2B3138;border-color:#2B3138;color:#FFFFFF}
.cf .fpost{display:grid;grid-template-columns:1.05fr 1fr;background:#FFFFFF;border:1px solid #E1E4E8;border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.cf .fpost:hover{border-color:#C8102E;box-shadow:0 20px 44px rgba(43,49,56,.12)}
.cf .fpost .pic{overflow:hidden;min-height:360px}
.cf .fpost .pic img{width:100%;height:100%;object-fit:cover}
.cf .fpost .body{padding:44px;display:flex;flex-direction:column;justify-content:center}
.cf .fpost .tag{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FFC400}
.cf .fpost h3{font-size:clamp(22px,2.6vw,30px);margin-top:12px;line-height:1.3}
.cf .fpost h3 a:hover{color:#C8102E}
.cf .fpost p{color:#5C646C;font-size:15px;margin-top:14px}
.cf .pmeta{font-size:12.5px;color:#8A9199;margin-top:18px;letter-spacing:.04em}
.cf .pmeta i{font-style:normal;margin:0 8px;opacity:.5}
.cf .pager{display:flex;gap:8px;justify-content:center;margin-top:52px;flex-wrap:wrap}
.cf .pager a,.cf .pager span{min-width:44px;height:44px;padding:0 14px;border:1px solid #D4D8DD;border-radius:8px;display:grid;place-items:center;font-size:14px;font-weight:600;color:#2B3138;background:#FFFFFF}
.cf .pager a:hover{border-color:#C8102E;color:#C8102E}
.cf .pager .cur{background:#2B3138;border-color:#2B3138;color:#FFFFFF}

/* ---- single article ---- */
.cf .alay{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:58px;align-items:start}
.cf .prose h2{font-size:28px;margin:46px 0 6px}
.cf .prose h3{font-size:20px;margin:34px 0 4px;color:#C8102E}
.cf .prose p{color:#444B52;font-size:16px;margin-top:15px}
.cf .prose ul{margin:18px 0}
.cf .prose ul li{position:relative;padding-left:26px;color:#444B52;margin-bottom:11px;font-size:15.5px}
.cf .prose ul li::before{content:"";position:absolute;left:3px;top:11px;width:7px;height:7px;border-radius:50%;background:#FFC400}
.cf .prose ul li b{color:#2B3138;font-weight:600}
.cf .prose a{color:#C8102E;text-decoration:underline;text-underline-offset:3px}
.cf .prose a:hover{color:#FFC400}
.cf .prose figure{margin:34px 0}
.cf .prose figure img{border-radius:10px;border:1px solid #E1E4E8;width:100%;height:400px;object-fit:cover}
.cf .prose figcaption{font-size:12.5px;color:#8A9199;margin-top:10px;text-align:center}
.cf .prose blockquote{margin:32px 0;padding:24px 28px;background:#F2F3F5;border-left:4px solid #FFC400;border-radius:0 8px 8px 0;color:#2B3138;font-size:16.5px;font-weight:500;line-height:1.6}
.cf .prose .dt{margin:26px 0}
.cf .side{position:sticky;top:104px;display:flex;flex-direction:column;gap:22px}
.cf .sbox{background:#FFFFFF;border:1px solid #E1E4E8;border-radius:12px;padding:26px}
.cf .sbox h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8A9199;margin-bottom:16px;font-weight:700}
.cf .toc li{margin-bottom:11px;line-height:1.5}
.cf .toc a{font-size:14px;color:#333A41}
.cf .toc a:hover{color:#C8102E}
.cf .sbox.navy{background:#2B3138;border-color:#2B3138}
.cf .sbox.navy h4{color:rgba(255,255,255,.6)}
.cf .sbox.navy h3{color:#FFFFFF;font-size:18px;line-height:1.4}
.cf .sbox.navy p{color:rgba(255,255,255,.78);font-size:13.5px;margin-top:10px}
.cf .sbox.navy .btn{width:100%;margin-top:18px}
.cf .author{display:flex;gap:20px;align-items:center;background:#F2F3F5;border:1px solid #E1E4E8;border-radius:12px;padding:26px;margin-top:48px}
.cf .author .av{width:64px;height:64px;border-radius:50%;background:#C8102E;color:#FFFFFF;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.cf .author b{display:block;color:#2B3138;font-size:16px}
.cf .author p{color:#5C646C;font-size:14px;margin-top:6px}
.cf .amet{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.78);letter-spacing:.05em}
.cf .amet b{color:#FFFFFF;font-weight:600}

@media (max-width:1040px){
  .cf .alay{grid-template-columns:1fr;gap:40px}
  .cf .side{position:static}
  .cf .g4,.cf .strip{grid-template-columns:repeat(2,1fr)}
  .cf .g3{grid-template-columns:repeat(2,1fr)}
  .cf .split{grid-template-columns:1fr;gap:34px}
  .cf .split.rev .pic{order:0}
  .cf .split .pic img{height:340px}
  .cf .fpost{grid-template-columns:1fr}
  .cf .fpost .pic{min-height:260px}
  .cf .fpost .body{padding:32px}
  .cf .band{padding:44px 30px}
}
@media (max-width:640px){
  .cf .phero{padding:64px 0 58px}
  .cf .phero .facts{gap:28px;margin-top:34px}
  .cf .g2,.cf .g3,.cf .g4,.cf .strip{grid-template-columns:1fr}
  .cf .tight{padding:52px 0}
  .cf .prose figure img{height:240px}
  .cf .prose h2{font-size:24px}
  .cf .author{flex-direction:column;text-align:center}
}

/* =========================================================
   WORDPRESS SPECIFIC RULES
   wp_nav_menu markup, accessibility, alignments, comments.
   Same navy / blue / orange palette, all values hardcoded.
   ========================================================= */

/* ---- primary menu produced by wp_nav_menu ---- */
.cf .menu li.menu-item-has-children{position:relative}
.cf .menu .sub-menu{
  position:absolute;top:calc(100% + 18px);left:-18px;width:540px;background:#FFFFFF;border:1px solid #E1E4E8;
  border-radius:8px;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:2px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;box-shadow:0 26px 60px rgba(43,49,56,.18);z-index:80}
.cf .menu li:hover>.sub-menu,.cf .menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.cf .menu .sub-menu li{margin:0;width:100%}
.cf .menu .sub-menu a{display:block;padding:10px 13px;border-radius:5px;font-size:14px;color:#47505A;font-weight:500}
.cf .menu .sub-menu a:hover{background:#F2F3F5;color:#C8102E}
.cf .menu .sub-menu a::after{display:none}
.cf .menu>li.current-menu-item>a::after,.cf .menu>li.current-menu-ancestor>a::after,.cf .menu>li.current_page_item>a::after{width:100%}
.cf .logo-img img{max-height:46px;width:auto;display:block}

/* ---- accessibility ---- */
.cf .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}
.cf .skip-link:focus{clip:auto;clip-path:none;display:block;left:16px;top:16px;z-index:200;background:#FFC400;color:#FFFFFF;padding:12px 20px;border-radius:5px;font-size:13px;font-weight:700;height:auto;width:auto}
.cf a:focus-visible{outline:2px solid #C8102E;outline-offset:3px}

/* ---- editor alignments and media ---- */
.cf .prose .alignleft,.cf .entry .alignleft{float:left;margin:8px 26px 20px 0}
.cf .prose .alignright,.cf .entry .alignright{float:right;margin:8px 0 20px 26px}
.cf .prose .aligncenter,.cf .entry .aligncenter{display:block;margin-left:auto;margin-right:auto}
.cf .prose .alignwide{margin-left:-60px;margin-right:-60px;max-width:none}
.cf .prose .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
.cf .wp-caption{max-width:100%}
.cf .wp-caption-text,.cf .wp-element-caption{font-size:12.5px;color:#8A9199;margin-top:10px;text-align:center}
.cf .prose img,.cf .entry img{height:auto;max-width:100%;border-radius:10px}
.cf .prose .wp-block-image img{width:100%;height:auto;object-fit:initial}
.cf .sticky .guide{border-color:#C8102E}
.cf .prose ol{margin:18px 0 18px 22px;color:#444B52;font-size:15.5px}
.cf .prose ol li{margin-bottom:10px}
.cf .prose table{width:100%;border-collapse:collapse;background:#FFFFFF;border:1px solid #E1E4E8;border-radius:10px;overflow:hidden;margin:26px 0}
.cf .prose table th,.cf .prose table td{padding:15px 20px;text-align:left;border-bottom:1px solid #E1E4E8;font-size:14px;color:#1F2328}
.cf .prose table thead th{background:#2B3138;color:#FFFFFF;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---- search form and widgets ---- */
.cf .search-form{display:flex;gap:10px}
.cf .search-form input[type="search"]{flex:1;padding:13px 14px;border:1px solid #D4D8DD;border-radius:5px;background:#FFFFFF;color:#1F2328;font-family:inherit;font-size:14.5px}
.cf .search-form input[type="search"]:focus{outline:2px solid #C8102E;outline-offset:1px}
.cf .search-form input[type="submit"]{background:#FFC400;color:#FFFFFF;border:0;border-radius:5px;padding:13px 22px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.cf .search-form input[type="submit"]:hover{background:#E5AC00}
.cf .sbox ul{list-style:none}
.cf .sbox ul li{margin-bottom:11px;font-size:14px;color:#333A41}
.cf .sbox ul li a:hover{color:#C8102E}

/* ---- comments ---- */
.cf .comments{max-width:920px;margin:56px auto 0}
.cf .comments h3{font-size:22px;margin-bottom:24px}
.cf .comment-list{list-style:none;margin:0;padding:0}
.cf .comment-list li{background:#FFFFFF;border:1px solid #E1E4E8;border-radius:10px;padding:22px;margin-bottom:16px}
.cf .comment-list .children{list-style:none;margin:16px 0 0 24px;padding:0}
.cf .comment-meta{font-size:12.5px;color:#8A9199;margin-bottom:10px}
.cf .comment-content p{color:#444B52;font-size:15px}
.cf .comment-respond{background:#F2F3F5;border:1px solid #E1E4E8;border-radius:12px;padding:28px;margin-top:30px}
.cf .comment-respond label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A9199;margin-bottom:7px;font-weight:500}
.cf .comment-respond input[type="text"],.cf .comment-respond input[type="email"],.cf .comment-respond input[type="url"],.cf .comment-respond textarea{
  width:100%;padding:13px 14px;border:1px solid #D4D8DD;border-radius:5px;background:#FFFFFF;color:#1F2328;font-family:inherit;font-size:14.5px;margin-bottom:16px}
.cf .comment-respond textarea{min-height:120px;resize:vertical}
.cf .comment-respond .submit{background:#FFC400;color:#FFFFFF;border:0;border-radius:5px;padding:14px 28px;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.cf .comment-respond .submit:hover{background:#E5AC00}

/* ---- misc page states ---- */
.cf .nores{text-align:center;max-width:640px;margin:0 auto}
.cf .nores p{color:#5C646C;margin-top:16px}
.cf .bignum{font-size:clamp(70px,14vw,150px);font-weight:800;color:#FDEEF0;line-height:1;letter-spacing:-.04em}

@media (max-width:1040px){
  .cf .menu.open .sub-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 10px;grid-template-columns:1fr;background:transparent}
  .cf .menu.open .sub-menu a{color:rgba(255,255,255,.72)}
  .cf .menu.open .sub-menu a:hover{background:rgba(255,255,255,.07);color:#FFFFFF}
  .cf .prose .alignwide{margin-left:0;margin-right:0}
}

/* =========================================================
   ELEMENTOR COMPATIBILITY
   Theme resets are scoped to .cf, and Elementor content renders
   inside that wrapper. These rules give Elementor widgets their
   normal spacing back without touching the theme templates.
   ========================================================= */
.cf .elementor p{margin:0 0 16px}
.cf .elementor p:last-child{margin-bottom:0}
.cf .elementor ul:not(.elementor-icon-list-items):not(.elementor-nav-menu){list-style:disc;margin:0 0 16px 20px;padding-left:0}
.cf .elementor ol{list-style:decimal;margin:0 0 16px 20px;padding-left:0}
.cf .elementor ul:not(.elementor-icon-list-items) li,.cf .elementor ol li{margin-bottom:8px}
.cf .elementor .elementor-icon-list-items{list-style:none;margin:0;padding:0}
.cf .elementor img{display:inline-block;max-width:100%;height:auto}
.cf .elementor .elementor-heading-title{line-height:inherit}
.cf .elementor table{width:100%;border-collapse:collapse}
.cf .elementor a{text-decoration:none}
.cf .elementor blockquote{margin:0 0 16px}
.cf .elementor-widget-text-editor a{color:#C8102E;text-decoration:underline;text-underline-offset:3px}
.cf .elementor-widget-text-editor a:hover{color:#FFC400}
.cf .elementor-widget-container>form input:focus,.cf .elementor-widget-container>form select:focus,.cf .elementor-widget-container>form textarea:focus{outline:2px solid #C8102E;outline-offset:1px}
/* =========================================================
   STITCHLINE - Contact Form 7 styles
   Quote form  [contact-form-7 id="18dad94"]
   Newsletter  [contact-form-7 id="fecdbd2"]

   Palette: navy #2B3138, blue #C8102E, orange #FFC400,
   white #FFFFFF, light #F2F3F5, text #1F2328.
   All values hardcoded. Works inside the theme (.cf wrapper)
   and inside an Elementor Shortcode widget.
   ========================================================= */

/* ---------- 1. QUOTE FORM SHELL ---------- */
.stl-form{
  background:#FFFFFF;
  border:2px dashed #F6C6CE;
  border-radius:12px;
  padding:34px;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.stl-form .stl-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stl-form .stl-field{margin-bottom:16px}
.stl-form .stl-row-2 .stl-field{margin-bottom:0}
.stl-form .stl-row-2{margin-bottom:16px}

.stl-form label{
  display:block;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8A9199;
  font-weight:500;
  margin-bottom:7px;
}

.stl-form input[type="text"],
.stl-form input[type="email"],
.stl-form input[type="tel"],
.stl-form input[type="url"],
.stl-form input[type="number"],
.stl-form select,
.stl-form textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid #D4D8DD;
  border-radius:5px;
  background:#FFFFFF;
  color:#1F2328;
  font-family:inherit;
  font-size:14.5px;
  line-height:1.5;
  box-sizing:border-box;
  transition:border-color .2s,box-shadow .2s;
}
.stl-form textarea{min-height:92px;resize:vertical}
.stl-form input::placeholder,
.stl-form textarea::placeholder{color:#9AA1A8}

.stl-form input:focus,
.stl-form select:focus,
.stl-form textarea:focus{
  outline:none;
  border-color:#C8102E;
  box-shadow:0 0 0 3px rgba(200,16,46,.18);
}

.stl-form select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230B1F3A'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
  padding-right:38px;
}

/* file upload */
.stl-form input[type="file"]{
  width:100%;
  padding:11px 14px;
  border:1px dashed #F6C6CE;
  border-radius:5px;
  background:#FFF8F9;
  color:#5C646C;
  font-family:inherit;
  font-size:13px;
  box-sizing:border-box;
  cursor:pointer;
}
.stl-form input[type="file"]::file-selector-button{
  background:#2B3138;color:#FFFFFF;border:0;border-radius:4px;
  padding:8px 14px;margin-right:12px;font-family:inherit;font-size:11.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.stl-form input[type="file"]::file-selector-button:hover{background:#C8102E}

/* submit */
.stl-form .stl-submit{margin-top:6px}
.stl-form input[type="submit"],
.stl-form button[type="submit"]{
  width:100%;
  background:#FFC400;
  color:#FFFFFF;
  border:2px solid #FFC400;
  border-radius:5px;
  padding:14px 28px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.stl-form input[type="submit"]:hover,
.stl-form button[type="submit"]:hover{
  background:#E5AC00;border-color:#E5AC00;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(255,196,0,.32);
}
.stl-form input[type="submit"]:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

.stl-form .stl-note{
  text-align:center;color:#8A9199;font-size:12px;margin:14px 0 0;line-height:1.6;
}

/* ---------- 2. NEWSLETTER FORM ---------- */
.stl-news-form{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.stl-news-form input[type="text"],
.stl-news-form input[type="email"]{
  padding:14px 18px;
  border:1px solid #FFFFFF;
  border-radius:5px;
  background:#FFFFFF;
  color:#1F2328;
  font-family:inherit;
  font-size:14.5px;
  min-width:240px;
  box-sizing:border-box;
}
.stl-news-form input::placeholder{color:#9AA1A8}
.stl-news-form input[type="text"]:focus,
.stl-news-form input[type="email"]:focus{
  outline:2px solid #FFC400;outline-offset:1px;
}
.stl-news-form input[type="submit"]{
  background:#FFC400;color:#FFFFFF;border:2px solid #FFC400;border-radius:5px;
  padding:14px 28px;font-family:inherit;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.stl-news-form input[type="submit"]:hover{background:#E5AC00;border-color:#E5AC00}

/* ---------- 3. CF7 PLUMBING ---------- */
/* CF7 wraps every field in a span, which breaks the grid unless it fills width */
.stl-form .wpcf7-form-control-wrap{display:block;width:100%}
.stl-news-form .wpcf7-form-control-wrap{display:inline-block}
.wpcf7 form .wpcf7-response-output{
  margin:20px 0 0;
  padding:14px 18px;
  border:1px solid #F6C6CE;
  border-radius:5px;
  background:#FDEEF0;
  color:#2B3138;
  font-size:14px;
  line-height:1.6;
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:#C8102E;background:#FDEEF0;color:#2B3138;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
  border-color:#F0C4B7;background:#FDF5F1;color:#A62C22;
}
.wpcf7-not-valid-tip{
  display:block;margin-top:7px;color:#C0392B;font-size:12.5px;font-weight:500;
}
.stl-form .wpcf7-not-valid{border-color:#C0392B}
.wpcf7-spinner{margin:0 auto;display:block}
.wpcf7 .wpcf7-list-item{margin:0 18px 0 0}
.wpcf7 .ajax-loader{vertical-align:middle}

/* newsletter band sits on the navy gradient, so lighten the response text */
.news .wpcf7 form .wpcf7-response-output,
.stl-gradient .wpcf7 form .wpcf7-response-output{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.35);
  color:#FFFFFF;
}
.news .wpcf7-not-valid-tip,
.stl-gradient .wpcf7-not-valid-tip{color:#FFE08A}

/* ---------- 4. RESPONSIVE ---------- */
@media (max-width:640px){
  .stl-form{padding:24px 20px}
  .stl-form .stl-row-2{grid-template-columns:1fr;gap:0}
  .stl-form .stl-row-2 .stl-field{margin-bottom:16px}
  .stl-news-form{flex-direction:column;align-items:stretch}
  .stl-news-form input[type="text"],
  .stl-news-form input[type="email"],
  .stl-news-form input[type="submit"]{min-width:0;width:100%}
}


/* =========================================================
   SIGNAL INK CORRECTIONS
   Yellow is a bright accent, so two rules apply everywhere:
   white text never sits on yellow, and yellow text never
   sits on a white background.
   ========================================================= */

/* CTA buttons: dark label on yellow */
.cf .btn-green{background:#FFC400;color:#1F2328;border-color:#FFC400}
.cf .btn-green:hover{background:#E5AC00;border-color:#E5AC00;color:#1F2328;
  box-shadow:0 10px 28px rgba(255,196,0,.40)}

/* every submit follows the same rule */
.cf .news .btn-green,.cf .stl-news-form input[type="submit"],
.cf .stl-form input[type="submit"],.cf .stl-form button[type="submit"],
.cf .comment-respond .submit,.cf .search-form input[type="submit"]{
  background:#FFC400;color:#1F2328;border-color:#FFC400}
.cf .stl-news-form input[type="submit"]:hover,
.cf .stl-form input[type="submit"]:hover,.cf .stl-form button[type="submit"]:hover,
.cf .comment-respond .submit:hover,.cf .search-form input[type="submit"]:hover{
  background:#E5AC00;color:#1F2328}

/* small accents that were yellow on white move to deep red */
.cf .sec-head h2 u,
.cf .guide u,
.cf .tier .for,
.cf .step h3 i,
.cf .fq button::after,
.cf .prose a:hover,
.cf .seo a:hover,
.cf .ccard .tag,.cf .guide .tag,.cf .pcard .tag{color:#9E0C24}
.cf .prose ul li::before{background:#9E0C24}
.cf .prose blockquote{border-left-color:#C8102E}

/* yellow keeps the pieces you click or that mark progress */
.cf .track i{background:#FFC400}
.cf .socials a:hover{background:#FFC400;color:#1F2328}
.cf .pay i{border-color:rgba(255,255,255,.24)}
.cf .menu>li>a::after{background:#FFC400}

/* file upload button in the quote form */
.cf .stl-form input[type="file"]::file-selector-button{background:#2B3138;color:#FFFFFF}
.cf .stl-form input[type="file"]::file-selector-button:hover{background:#C8102E}