/* =========================
   DFAM HERO
========================= */

.dfam-hero {
    position: relative;
    background: #111;
    padding: 140px 0 150px;
    overflow: hidden;
}

.dfam-hero::after {
    content: 'DfAM';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    pointer-events: none;
}

.hero-content {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 60px;
    align-items: center;
}

.hero-eyebrow {
    color: #e05c2a;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 600;
}

.hero-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 65px;
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 12px;
    font-weight: 800;
}

.hero-title span {
    display: block;
    color: #e05c2a;
}

.hero-description {
    color: #b0b0b0;
    font-size: 15px;
    line-height: 1.8;
    max-width: 700px;
    margin-bottom: 12px;
}


.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    font-weight: 500;
}

.btn-primary {
    color: white;
    background-color: #e05c2a;
    padding: 14px 8px;
    font-size: 15px;
}

.btn-secondary {
    background-color: white;
    color: #e05c2a;
    padding: 14px 8px;
    font-size: 15px;
}
.trust-signals{
    background:#f8f7f5;
    padding:20px 0;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.trust-item{
    
    padding:18px;
    text-align:center;
    border:1px solid #e5e5e5;
    font-weight:600;
    border-radius: 20px;
}

@media(max-width:991px){
    .trust-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:767px){
    .trust-grid{
        grid-template-columns:1fr;
    }
}

.dfam-jump-links{
    background:#fff;
    border-bottom:1px solid #e5e5e5;
    position:sticky;
    top:0;
    z-index:99;
     background-color: #000 ;
}

.dfam-jump-links .container{
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
    padding:15px;
   
    
}

.dfam-jump-links a{
    color:white;
    font-weight:600;
    font-size:14px;
    background-color: #e05c2a;
    padding: 10px 8px;
    border-radius: 3px;

}

@media(max-width:767px){

    .dfam-jump-links .container{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:wrap;
    }

    .dfam-jump-links a{
        white-space:nowrap;
    }
    

}
@media(max-width:767px){

    .table-wrap{
        margin:0 -15px;
        padding:0 15px;
        overflow-x:auto;
    }

    .data-table{
        min-width:700px;
    }

    .data-table th,
    .data-table td{
        padding:12px;
        font-size:14px;
        white-space:nowrap;
    }

}

.hero-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-card {
    padding: 24px;
    border: 1px solid #2d2d2d;
    background: rgba(255, 255, 255, 0.03);
}

.stat-card:first-child {
    border-top: 3px solid #e05c2a;
}

.stat-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.stat-label {
    margin-top: 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

/* MOBILE */

@media (max-width:991px) {

    .dfam-hero {
        padding: 120px 0 80px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-description {
        font-size: 16px;
    }

    .dfam-hero::after {
        display: none;
    }
}

@media (max-width:576px) {

    .hero-title {
        font-size: 3rem;
    }

    .hero-buttons {
        align-items: flex-start;
    }

    .stat-value {
        font-size: 2.5rem;
    }
}


/* ==========================
   INTRO BAND
========================== */

.intro-band {
    padding: 40px 0;
    background: #f8f7f5;
}

.intro-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: start;
}

.section-eyebrow {
    color: #e05c2a;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 600;
}

.div-eyebrow{
     color: #e05c2a;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 600;
    margin-top: 20px;
}

.section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 12px;
}

.section-title span {
    color: #e05c2a;
}

.intro-text p {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 18px;
}

.dfam-levels {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.level-card {
    background: #fff;
    border: 1px solid #e4e4e4;
    padding: 25px;
    transition: all .3s ease;
}


.level-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.level-1 {
    border-top: 4px solid #1f9050;
}

.level-2 {
    border-top: 4px solid #c07d10;
}

.level-3 {
    border-top: 4px solid #cc3333;
}

.level-badge {
    display: inline-block;
    padding: 5px 12px;
    background: #f5f5f5;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.level-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.level-card p {
    color: #666;
    line-height: 1.7;
    font-size: 15px;
}

@media(max-width:991px) {

    .intro-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .intro-band {
        padding: 70px 0;
    }

    .intro-text p {
        font-size: 16px;
    }
}


/* ===================================
   WHY DFAM
=================================== */

.why-dfam-section {
    background: #111;
    padding: 40px 0;
}

.section-title.light {
    color: #fff;
    font-size: 56px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 12px;
}

.benefit-card {
    background: #1c1c1c;
    padding: 17px 20px;
    border-top: 4px solid transparent;
    transition: all .3s ease;
}

.benefit-card:hover {
    border-color: #e05c2a;
    transform: translateY(-5px);
}

.benefit-icon {
    font-size: 32px;
    color: #e05c2a;
    margin-bottom: 12px;
}

.benefit-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 12px;
}

.benefit-card p {
    color: #ffffff;
    line-height: 1.8;
    font-size: 15px;
}

/* Tablet */

@media(max-width:991px) {

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* Mobile */

@media(max-width:767px) {

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .why-dfam-section {
        padding: 70px 0;
    }

}


/* ===========================
   COMPARISON SECTION
=========================== */

.comparison-section {
    background: #f4f4f4;
    padding: 40px 0;
}

.comparison-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.comparison-head {
    padding: 18px 25px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.comparison-head.traditional {
    background: #444;
    color: #fff;
}

.comparison-head.dfam {
    background: #e05c2a;
    color: #fff;
}

.comparison-item {
    padding: 18px 25px;
    border-bottom: 1px solid #e5e5e5;
    line-height: 1.7;
    font-size: 15px;
}

.comparison-item.traditional {
    background: #fff;
    color: #000000;
    border-right: 1px solid #e5e5e5;
}

.comparison-item.dfam {
    background: #f9fff9;
    color: #000000;
}

.comparison-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 40px;
}

.comparison-stat {
    background: #111;
    text-align: center;
    padding: 25px 15px;
    border-top: 3px solid #e05c2a;
}

.comparison-stat span {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #e05c2a;
}

.comparison-stat p {
    margin-top: 8px;
    color: #ffffff;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Barlow Condensed', serif;
}

/* Responsive */

@media(max-width:991px) {

    .comparison-stats {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media(max-width:767px) {

    .comparison-table {
        grid-template-columns: 1fr;
    }

    .comparison-item.traditional {
        border-right: none;
    }

    .comparison-stats {
        grid-template-columns: 1fr 1fr;
    }

    .comparison-section {
        padding: 70px 0;
    }
}

/* ===================================
   WALL THICKNESS SECTION
=================================== */

.section-number {
    color: #e05c2a;
    font-weight: 700;
    margin-right: 5px;
}

.section-category {
    background: #f1f1f1;
    padding: 6px 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-description {
    margin-top: 12px;
    color: #666;
    line-height: 1.8;
    max-width: 900px;
}

.dfam-table {
    width: 100%;
    border-collapse: collapse;
}

.dfam-table th {
    background: #111;
    color: #fff;
    padding: 16px;
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
}

.dfam-table td {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.dfam-table tr:nth-child(even) {
    background: #fafafa;
}

.parameter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.parameter-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-top: 4px solid #e05c2a;
    padding: 30px;
}

.parameter-card.green {
    border-top-color: #1f9050;
}

.parameter-card.orange {
    border-top-color: #c07d10;
}

.parameter-tag {
    font-size: 12px;
    font-weight: 600;
    color: #e05c2a;
    letter-spacing: 1px;
}

.parameter-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    margin: 15px 0;
    font-size: 1.5rem;
}

.parameter-card p {
    color: #666;
    line-height: 1.8;
    font-size: 15px;
}

.parameter-value {
    margin-top: 15px;
    background: #f5f5f5;
    padding: 10px 14px;
    display: inline-block;
    font-weight: 600;
}

.dfam-callout {
    margin-top: 40px;
    padding: 25px 30px;
    background: #fff7f2;
    border-left: 4px solid #e05c2a;
}

.callout-title {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #e05c2a;
}

@media(max-width:991px) {

    .parameter-grid {
        grid-template-columns: 1fr;
    }

}

@media(max-width:767px) {

    .content-section1 {
        padding: 70px 0;
    }

}


/* ===================================
   OVERHANGS & SUPPORTS
=================================== */

.overhang-guide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.guide-card {
    background: #fff;
    padding: 30px;
    border: 1px solid #e6e6e6;
    text-align: center;
}

.guide-card.safe {
    border-top: 4px solid #1f9050;
}

.guide-card.caution {
    border-top: 4px solid #c07d10;
}

.guide-card.danger {
    border-top: 4px solid #cc3333;
}

.guide-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.safe .guide-value {
    color: #1f9050;
}

.caution .guide-value {
    color: #c07d10;
}

.danger .guide-value {
    color: #cc3333;
}

.guide-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.guide-card p {
    color: #666;
    line-height: 1.8;
    font-size: 15px;
}

.do-dont-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 40px;
}

.do-card,
.dont-card {
    padding: 30px;
}

.do-card {
    background: #f2fbf6;
    border-top: 4px solid #1f9050;
}

.dont-card {
    background: #fff4f4;
    border-top: 4px solid #cc3333;
}

.do-card h3 {
    color: #1f9050;
    margin-bottom: 15px;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
}

.dont-card h3 {
    color: #cc3333;
    margin-bottom: 15px;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
}

.do-card ul,
.dont-card ul {
    padding-left: 20px;
}

.do-card li,
.dont-card li {
    margin-bottom: 10px;
    line-height: 1.7;
    color: #555;
}

@media(max-width:991px) {

    .overhang-guide {
        grid-template-columns: 1fr;
    }

    .do-dont-grid {
        grid-template-columns: 1fr;
    }

}
.content-grid{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:40px;
    align-items:start;
    padding:40px 109px;
}

.guide-nav{
    position:sticky;
    top:120px;
    height:max-content;
    max-height:calc(100vh - 140px);
    overflow-y:auto;
    align-self:start;
    overscroll-behavior:contain;
}


.content-main{
    min-width:0;
    height:calc(100vh - 140px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
    padding-right:12px;
}

@media(max-width:991px) {
    .content-grid {
        grid-template-columns:1fr;
        padding:40px 30px;
    }

    .guide-nav {
        position:static;
        height:auto;
        max-height:none;
        overflow:visible;
    }

    .content-main {
        height:auto;
        overflow:visible;
        padding-right:0;
    }
}

@media(max-width:576px) {
    .content-grid {
        padding:40px 20px;
    }
}

.guide-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    letter-spacing: .35em;
    color: #888;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.guide-nav ul {
    list-style: none;
}

.guide-nav li {
    margin-bottom: 24px;
}

.guide-nav a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    letter-spacing: .04em;
}



.sec-num {
    color: #e05c2a;
    font-family: 'JetBrains Mono', monospace;
    font-size: .9rem;
}

.sec-tag {
    background: #f2efeb;
    padding: 6px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    letter-spacing: .18em;
}



.title-rule {
    height: 1px;
    background: #d8d8d8;
    margin-bottom: 12px;
}

.section-lead {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 12px;
}




.table-wrap {
    margin-top: 12px;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.rule-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:12px;
}

.data-table thead th {
    background: #0d0d0d;
    color: #fff;
    padding: 15px 12px;
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.data-table tbody td {
    padding: 14px 6px;
    border-bottom: 1px solid #d9d9d9;
    color: #4a4a4a;
    font-size: 15px;
    line-height: 1.7;
    vertical-align: top;
}

.data-table tbody tr:nth-child(even) {
    background: #f7f6f4;
}

.data-table tbody td:first-child {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    text-transform: uppercase;
}


.rule-card {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-top: 4px solid #111;
    padding: 1rem;
}

.rule-green {
    border-top-color: #1f9050;
}

.rule-orange {
    border-top-color: #d47a00;
}

.rule-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    letter-spacing: .12em;
    color: #777;
    margin-bottom: 1rem;
}

.rule-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: #111;
}

.rule-card p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 15px;
}

.rule-value {
    display: inline-block;
    background: #f4f4f4;
    padding: .75rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .85rem;
    font-weight: 600;
}
/* ===== Submit File Box ===== */
.submit-file-box {
    margin: 48px 50px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(224,92,42,0.25);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.submit-file-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.submit-file-left {
    padding: 44px 40px;
    border-right: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.submit-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e05c2a;
    margin-bottom: 12px;
}
.submit-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 14px;
}
.submit-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin: 0 0 28px;
}
.submit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.submit-btn-primary {
    display: inline-block;
    padding: 12px 24px;
    background: #e05c2a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s, transform 0.2s;
}
.submit-btn-primary:hover {
    background: #c44e22;
    transform: translateY(-2px);
    color: #fff;
}
.submit-btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    transition: background 0.2s;
}
.submit-btn-secondary:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.submit-file-right {
    padding: 44px 40px;
}
.submit-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.submit-steps li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.submit-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(224,92,42,0.15);
    border: 1px solid rgba(224,92,42,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #e05c2a;
    font-family: 'JetBrains Mono', monospace;
}
.submit-steps li div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.submit-steps li strong {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.submit-steps li span {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}
.submit-steps li span a {
    color: #e05c2a;
    text-decoration: none;
}
.submit-steps li span a:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {
    .submit-file-box { margin: 32px 16px; }
    .submit-file-inner { grid-template-columns: 1fr; }
    .submit-file-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 32px 24px; }
    .submit-file-right { padding: 32px 24px; }
    .submit-title { font-size: 22px; }
}

.tip-box1{
    padding: 20px;
    margin: 40px 50px;
    border-left: 4px solid #e05c2a;
    background: #faf7f4;
}

.tip-box {
    margin-top: 12px;
    padding: 1rem;
    border-left: 4px solid #e05c2a;
    background: #faf7f4;
}

.tip-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: #111;
}

.tip-box p {
    margin: 0;
    line-height: 1.9;
    color: #555;
    font-size: 15px;
}

@media(max-width:991px) {

    .rule-grid {
        grid-template-columns: 1fr;
    }

}
.diagram-box{
    margin-top: 12px;
    background-color: #f7f6f4;
    padding: 14px 6px;
    text-align: center;
    font-family:  Arial, sans-serif;
}

.overhang-diagram {
    width: 100%;
    display: block;
}

.overhang-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
    border-top: 1px solid #d8d8d8;
}

.design-panel {
    padding: 3rem;
    background: #eef5f0;
    border-top: 3px solid #1f9050;
}

.avoid-panel {
    padding: 3rem;
    background: #faf2f2;
    border-top: 3px solid #cc3333;
}

.design-panel h3,
.avoid-panel h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.design-panel h3 {
    color: #1f9050;
}

.avoid-panel h3 {
    color: #cc3333;
}

.design-panel ul,
.avoid-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.design-panel li,
.avoid-panel li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.8;
    color: #555;
    font-size: 15px;
}


.design-panel li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1f9050;
    font-weight: 700;
}

.avoid-panel li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #cc3333;
    font-weight: 700;
}

@media(max-width:991px) {

    .overhang-checklist {
        grid-template-columns: 1fr;
    }

}

.material-tabs {
    display: flex;
    gap: 12px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.material-pane{
    display:none;
}

.material-pane.active{
    display:block;
}
.material-tab {
    padding: 10px 18px;
    border: 1px solid #ddd;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
}

.material-tab.active {
    background: #111;
    color: #fff;
}

@media(max-width:1200px) {
    .rule-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:767px) {
    .rule-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:991px) {

    .rule-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================
07 - INFILL & WALL COUNT
========================================= */

.key-principle {
    margin-top: 40px;
    padding: 32px;
    background: #f8f8f8;
    border-left: 4px solid #111;
}

.key-principle h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #111;
}

.key-principle h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #111;
}

.key-principle p {
    margin-bottom: 12px;
    color: #555;
    line-height: 1.8;
    font-size: 15px;
}

.infill-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.infill-card {
    background: #fff;
    border: 1px solid #e4e4e4;
    padding: 28px;
    transition: all .3s ease;
}

.infill-card:hover {
    transform: translateY(-4px);
}

.infill-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #111;
}

.infill-card p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
    font-size: 15px;
}

.infill-tag {
    display: inline-block;
    padding: 8px 14px;
    background: #111;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

@media(max-width:991px) {

    .infill-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
08 - GEOMETRY FEATURE DESIGN RULES
========================================= */

.geometry-rules-section .content-block {
    margin-top: 40px;
    padding: 32px;
    background: #f8f8f8;
    border-left: 4px solid #111;
}

.geometry-rules-section .content-block h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: #111;
}

.geometry-rules-section .content-block p {
    margin: 0;
    color: #555;
    line-height: 1.8;
    font-size: 15px;
}


/* =========================================
09 - PROCESS GUIDELINES
========================================= */

.proc-tabs {
    margin-top: 40px;
}

.proc-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.proc-tab-btn {
    padding: 12px 22px;
    border: 1px solid #dcdcdc;
    background: #fff;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: .3s;
}

.proc-tab-btn.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.proc-pane {
    display: none;
    border: 1px solid #e5e5e5;
    padding: 35px;
    background: #fff;
}

.proc-pane.active {
    display: block;
}

.proc-pane-head {
    margin-bottom: 30px;
}

.proc-badge {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 8px 14px;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 15px;
}

.proc-pane-head h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.proc-rules {
    list-style: none;
    padding: 0;
    margin: 0;
}

.proc-rules li {
    padding: 18px 0;
    border-bottom: 1px solid #ececec;
    line-height: 1.8;
    color: #555;
    font-family: 14px !important;
}

.proc-rules li:last-child {
    border-bottom: none;
}

.proc-rule-tag {
    display: inline-block;
    min-width: 110px;
    margin-right: 15px;
    padding: 6px 12px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    color: #fff;
}

.prt-wall {
    background: #1a5ea8;
}

.prt-overhang {
    background: #c07d10;
}

.prt-support {
    background: #555;
}

.prt-warp {
    background: #cc3333;
}

.prt-orient {
    background: #1f9050;
}

.prt-thread {
    background: #7a4db8;
}

@media(max-width:768px) {

    .proc-tab-bar {
        flex-direction: column;
    }

    .proc-tab-btn {
        width: 100%;
    }

    .proc-pane {
        padding: 24px;
    }

    .proc-rule-tag {
        display: block;
        width: max-content;
        margin-bottom: 10px;
    }
}


/* =========================================
10 - COMMON DESIGN MISTAKES
========================================= */

.mistake-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.mistake-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 30px;
    transition: .3s ease;
}

.mistake-card:hover {
    transform: translateY(-4px);
}

.mistake-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
}

.mistake-card p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 15px;
}

.mistake-fix {
    background: #f8f8f8;
    border-left: 4px solid #e05c2a;
    padding: 16px 18px;
    color: #222;
    line-height: 1.7;
    font-weight: 500;
}

@media(max-width:991px) {

    .mistake-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
11 - PART CONSOLIDATION
========================================= */

.consolidation-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: center;
    margin: 40px 0 50px;
}

.compare-card {
    border: 1px solid #e5e5e5;
    padding: 35px;
    background: #fff;
}

.compare-number {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 15px;
}

.compare-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.compare-arrow {
    font-size: 3rem;
    font-weight: 700;
    color: #e05c2a;
}

.opportunity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.opportunity-card {
    border: 1px solid #e5e5e5;
    padding: 30px;
    background: #fff;
}

.opportunity-label {
    display: inline-block;
    background: #1f9050;
    color: #fff;
    padding: 6px 12px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.opportunity-label.caution {
    background: #cc3333;
}

.opportunity-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.opportunity-card p {
    color: #555;
    line-height: 1.8;
    font-size: 15px;
}

@media(max-width:991px) {

    .consolidation-compare {
        grid-template-columns: 1fr;
    }

    .compare-arrow {
        text-align: center;
        transform: rotate(90deg);
    }

    .opportunity-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================
12 - ADVANCED DFAM
========================================= */

.advanced-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px 0;
}

.advanced-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 30px;
    text-align: center;
}

.advanced-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 20px;
    color: #e05c2a;
}

.advanced-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
}

.advanced-card p {
    color: #555;
    line-height: 1.8;
    font-size: 15px;
}

@media(max-width:991px) {

    .advanced-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
13 - DFAM IN PRACTICE
========================================= */

.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.case-study-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 30px;
    height: 100%;
}

.case-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.case-study-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.case-subtitle {
    color: #777;
    margin-bottom: 25px;
    line-height: 1.6;
    font-size: 15px;
}

.case-metrics {
    margin-bottom: 25px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.metric-row span {
    color: #666;
}

.metric-row strong {
    color: #111;
    text-align: right;
    font-size: 13px;
}

.case-result {
    background: #f8f8f8;
    border-left: 4px solid #e05c2a;
    padding: 15px;
    font-weight: 600;
    color: #111;
}

@media(max-width:991px) {

    .case-study-grid {
        grid-template-columns: 1fr;
    }

}


.data-table th {
    background: #111;
    color: #fff;
    padding: 18px;
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.05rem;
    text-transform: uppercase;
}

.data-table td {
    padding: 18px;
    border-bottom: 1px solid #e5e5e5;
    color: #555;
    line-height: 1.7;
}

.data-table tr:nth-child(even) {
    background: #fafafa;
}

/* =========================================
15 - PRE-PRINT CHECKLIST
========================================= */

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.check-item {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 28px;
    position: relative;
}

.check-number {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #e05c2a;
    margin-bottom: 12px;
}

.check-item h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111;
}

.check-item p {
    color: #555;
    line-height: 1.8;
    margin: 0;
    font-size: 15px;
}

@media(max-width:991px) {

    .checklist-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
16 - GARUDA3D DFAM SERVICES
========================================= */

/* WHAT WE OFFER */


.content-section1 {
    padding: 40px 109px;
}

.services-band {
    background: #fff;
}

.guide-section{
    margin-top:12px;
}

.services-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.service-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    padding: 32px;
    transition: .3s ease;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

.service-icon {
    font-size: 34px;
    margin-bottom: 18px;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 700;
    color: #111;
    font-family: 'Barlow Condensed', serif;
}

.service-card p {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin: 0;
}

@media(max-width:1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:768px) {
    .services-inner {
        padding: 0 20px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 24px;
    }
}



/* WHO WE SERVE */

.industries-section {
    padding: 40px 109px;
    background: #f8f7f5;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.industry-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    padding: 30px;
    transition: .3s ease;
    height: 100%;
}

.industry-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

.industry-icon {
    font-size: 34px;
    margin-bottom: 18px;
}

.industry-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 18px;
    color: #111;
}

.industry-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.industry-card ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 12px;
    color: #555;
    line-height: 1.7;
    border-bottom: #a4a4a47b 1px solid;
    font-size: 15px;
}


@media(max-width:1200px) {

    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:768px) {

    .industries-section {
        padding: 70px 0;
    }

    .industries-grid {
        grid-template-columns: 1fr;
    }

    .industry-card {
        padding: 24px;
    }

    .industry-card h3 {
        font-size: 1.4rem;
    }

}


/* ===========================
FAQ SECTION
=========================== */

.faq-section{
    padding:40px 0;
    background:#f8f7f5;
}
/* FAQ ACCORDION */

.faq-grid{
    margin-top:12px;
    padding: 40px 70px;
}

.faq-item{
    border:1px solid #e5e5e5;
    background:#fff;
    margin-bottom:15px;
    overflow:hidden;
}

.faq-question{
    width:100%;
    background:#fff;
    border:none;
    cursor:pointer;
    padding:22px 25px;
    text-align:left;

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-family:'Barlow Condensed',sans-serif;
    font-size:1.6rem;
    font-weight:600;
    color:#111;
}

.faq-question span{
    font-size:2rem;
    transition:.3s;
}

.faq-item.active .faq-question span{
    transform:rotate(45deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.faq-answer p{
    padding:0 25px 25px;
    margin:0;
    line-height:1.8;
    color:#555;
}

@media(max-width:991px){
    .faq-grid{
        grid-template-columns:1fr;
    }
}

.floating-dfam-cta{
    position:fixed;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    background:#e05c2a;
    color:#fff;
    padding:9px 8px;
    z-index:999;
    border-radius:6px;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
    font-size: 15px;
}

@media(max-width:767px){
    .floating-dfam-cta{
        right:15px;
        left:15px;
        bottom:15px;
        transform:none;
        text-align:center;
    }
}












.overhang-visual{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:12px;
}

.overhang-card{
    background:#fff;
    border:1px solid #e5e5e5;
    padding:25px;
    text-align:center;
}
.bad,.good{
    margin-top: 12px !important;
    font-size: 15px;
}

.overhang-angle{
    font-size:42px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
}

.overhang-status{
    margin:12px 0;
    font-weight:600;
}

.overhang-status,p{
    font-size: 15px;
}
.orientation-compare{
    display:grid;
    grid-template-columns:1fr 80px 1fr;
    gap:20px;
    margin-top:12px;
    align-items:center;
}

.orientation-card{
    background:#fff;
    border:1px solid #e5e5e5;
    padding:30px;
}

.orientation-arrow{
    text-align:center;
    font-size:50px;
    font-weight:700;
}
.topology-comparison{
    display:grid;
    grid-template-columns:1fr 100px 1fr;
    gap:20px;
    margin:40px 0;
    align-items:center;
}

.topology-before,
.topology-after{
    background:#fff;
    border:1px solid #e5e5e5;
    padding:35px;
    text-align:center;
}

.topology-label{
    font-family:'Barlow Condensed',sans-serif;
    font-size:28px;
    font-weight:700;
    margin-bottom:20px;
}

.topology-center{
    text-align:center;
    font-size:60px;
    font-weight:700;
}

/* ADDITIONAL RESPONSIVE ADJUSTMENTS */
@media(max-width:1200px) {
    .content-grid {
        padding: 40px 30px;
    }

    .comparison-table,
    .table-wrap {
        overflow-x: auto;
    }

    .comparison-table {
        display: block;
    }

    .comparison-stats,
    .overhang-visual,
    .orientation-compare,
    .topology-comparison,
    .comparison-item,
    .orientation-card,
    .topology-before,
    .topology-after {
        grid-template-columns: 1fr;
    }

    .comparison-item.traditional {
        border-right: none;
    }
}

@media(max-width:991px) {
    .content-grid {
        padding: 40px 24px;
    }

    .section-title {
        font-size: 3rem;
    }

    .hero-title {
        font-size: 4rem;
    }

    .compare-arrow {
        font-size: 3rem;
    }

    .material-tabs {
        flex-wrap: wrap;
    }
}

@media(max-width:767px) {
    .content-grid {
        padding: 30px 16px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-description,
    .intro-text p,
    .rule-card p,
    .benefit-card p,
    .comparison-item,
    .faq-answer p,
    .check-item p,
    .mistake-card p,
    .opportunity-card p,
    .case-study-card h3,
    .case-subtitle,
    .metric-row span,
    .metric-row strong {
        font-size: 15px;
    }

    .comparison-stats,
    .overhang-visual,
    .orientation-compare,
    .topology-comparison,
    .comparison-item,
    .checklist-grid,
    .services-grid,
    .industries-grid,
    .advanced-grid,
    .case-study-grid,
    .mistake-grid,
    .opportunity-grid {
        grid-template-columns: 1fr;
    }

    .topology-center {
        font-size: 3.5rem;
    }

    .comparison-table {
        display: block;
    }

    .comparison-item.traditional {
        border-right: none;
    }
}

@media(max-width:768px){
.content-section1{
    padding: 0px 20px;
}
.industries-section{
        padding: 20px 20px;
}
.faq-section{
    padding: 20px 20px;
}
.faq-grid{
    padding: 20px;
}
}

/* ==========================================================
   MOBILE RESPONSIVE — 768px BREAKPOINT
   Design for Additive Manufacturing page
========================================================== */

@media (max-width: 768px) {

    /* ---- HERO ---- */
    .dfam-hero {
        padding: 90px 0 60px;
    }

    .hero-title {
        font-size: 2.6rem;
        line-height: 1;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
        font-size: 14px;
    }

    /* stat cards — stack into 2 columns */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-card {
        padding: 16px 12px;
    }

    .stat-value {
        font-size: 2rem;
    }

    /* ---- TRUST BAND ---- */
    .trust-signals {
        padding: 16px 0;
    }

    /* ---- JUMP LINKS ---- */
    .dfam-jump-links .container {
        gap: 8px;
        padding: 10px 12px;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .dfam-jump-links a {
        font-size: 12px;
        padding: 8px 10px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ---- INTRO BAND ---- */
    .intro-band {
        padding: 40px 0;
    }

    .section-title {
        font-size: 2.2rem;
        line-height: 1.05;
    }

    .section-title.light {
        font-size: 2.2rem;
    }

    /* ---- COMPARISON TABLE ---- */
    .comparison-section {
        padding: 40px 0;
    }

    .comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comparison-head,
    .comparison-item {
        padding: 14px 16px;
    }

    .comparison-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 24px;
    }

    .comparison-stat {
        padding: 18px 10px;
    }

    .comparison-stat span {
        font-size: 1.5rem;
    }

    .comparison-stat p {
        font-size: 12px;
    }

    /* ---- MAIN CONTENT GRID (sidebar + content) ---- */
    .content-grid {
        grid-template-columns: 1fr;
        padding: 24px 16px;
        gap: 24px;
    }

    .guide-nav {
        position: static;
        height: auto;
        max-height: none;
        overflow: visible;
        padding-bottom: 16px;
        border-bottom: 1px solid #e5e5e5;
    }

    .guide-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
        padding: 0;
    }

    .guide-nav li {
        margin-bottom: 0;
    }

    .guide-nav a {
        font-size: 13px;
        display: inline-block;
        background: #f4f4f4;
        padding: 5px 10px;
        border-radius: 3px;
    }

    .content-main {
        height: auto;
        overflow: visible;
        padding-right: 0;
    }

    /* ---- CONTENT SECTION 1 (services) ---- */
    .content-section1 {
        padding: 32px 16px;
    }

    /* ---- INDUSTRIES SECTION ---- */
    .industries-section {
        padding: 32px 16px;
    }

    /* ---- TABLES ---- */
    .table-wrap {
        margin: 12px -4px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 540px;
    }

    .data-table thead th,
    .data-table tbody td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .dfam-table th,
    .dfam-table td {
        padding: 12px;
        font-size: 13px;
    }

    /* ---- RULE GRID (3-col -> 1-col) ---- */
    .rule-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* ---- PARAMETER GRID ---- */
    .parameter-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .parameter-card {
        padding: 20px;
    }

    /* ---- OVERHANG VISUAL (4-col -> 2-col) ---- */
    .overhang-visual {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .overhang-card {
        padding: 16px 12px;
    }

    .overhang-angle {
        font-size: 2rem;
    }

    /* ---- OVERHANG CHECKLIST (2-col -> 1-col) ---- */
    .overhang-checklist {
        grid-template-columns: 1fr;
    }

    .design-panel,
    .avoid-panel {
        padding: 20px 16px;
    }

    .design-panel h3,
    .avoid-panel h3 {
        font-size: 1.4rem;
    }

    /* ---- ORIENTATION COMPARE (3-col -> 1-col) ---- */
    .orientation-compare {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .orientation-card {
        padding: 20px 16px;
    }

    .orientation-arrow {
        font-size: 2rem;
        text-align: center;
        transform: rotate(90deg);
    }

    /* ---- TOPOLOGY COMPARISON (3-col -> 1-col) ---- */
    .topology-comparison {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 24px 0;
    }

    .topology-before,
    .topology-after {
        padding: 20px 16px;
    }

    .topology-center {
        font-size: 2.5rem;
        text-align: center;
    }

    /* ---- CONSOLIDATION COMPARE ---- */
    .consolidation-compare {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 24px 0 32px;
    }

    .compare-card {
        padding: 24px 16px;
    }

    .compare-number {
        font-size: 3rem;
    }

    .compare-arrow {
        font-size: 2rem;
        text-align: center;
        transform: rotate(90deg);
    }

    /* ---- PROCESS TABS ---- */
    .proc-tab-bar {
        flex-direction: column;
        gap: 8px;
    }

    .proc-tab-btn {
        width: 100%;
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .proc-pane {
        padding: 20px 16px;
    }

    .proc-rule-tag {
        display: block;
        width: max-content;
        margin-bottom: 8px;
        margin-right: 0;
    }

    /* ---- MATERIAL TABS ---- */
    .material-tabs {
        gap: 8px;
        margin: 24px 0;
    }

    .material-tab {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* ---- INFILL GRID ---- */
    .infill-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .infill-card {
        padding: 20px 16px;
    }

    /* ---- ADVANCED GRID ---- */
    .advanced-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 24px 0;
    }

    .advanced-card {
        padding: 20px 16px;
    }

    /* ---- MISTAKE GRID ---- */
    .mistake-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .mistake-card {
        padding: 20px 16px;
    }

    /* ---- OPPORTUNITY GRID ---- */
    .opportunity-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .opportunity-card {
        padding: 20px 16px;
    }

    /* ---- CASE STUDY GRID ---- */
    .case-study-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .case-study-card {
        padding: 20px 16px;
    }

    /* ---- CHECKLIST GRID ---- */
    .checklist-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .check-item {
        padding: 20px 16px;
    }

    /* ---- SERVICES GRID ---- */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .service-card {
        padding: 20px 16px;
    }

    .services-inner {
        padding: 0 16px;
    }

    /* ---- INDUSTRIES GRID ---- */
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .industry-card {
        padding: 20px 16px;
    }

    /* ---- FAQ ---- */
    .faq-section {
        padding: 32px 0;
    }

    .faq-grid {
        padding: 0 16px;
    }

    .faq-question {
        font-size: 1.2rem;
        padding: 16px 16px;
    }

    .faq-answer p {
        padding: 0 16px 20px;
        font-size: 14px;
    }

    /* ---- TIP BOX WITH MARGINS ---- */
    .tip-box1 {
        margin: 24px 0;
        padding: 16px;
    }

    /* ---- SUBMIT FILE BOX ---- */
    .submit-file-box {
        margin: 24px 12px;
    }

    .submit-file-inner {
        grid-template-columns: 1fr;
    }

    .submit-file-left {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 28px 20px;
    }

    .submit-file-right {
        padding: 28px 20px;
    }

    .submit-title {
        font-size: 20px;
    }

    .submit-actions {
        flex-direction: column;
        gap: 10px;
    }

    .submit-btn-primary,
    .submit-btn-secondary {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
    }

    /* ---- KEY PRINCIPLE BLOCK ---- */
    .key-principle {
        padding: 20px 16px;
    }

    .key-principle h3 {
        font-size: 1.5rem;
    }

    /* ---- DIAGRAM BOX ---- */
    .diagram-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 4px;
    }

    /* ---- CALLOUT / TIP ---- */
    .dfam-callout {
        padding: 18px 16px;
    }

    /* ---- FLOATING CTA ---- */
    .floating-dfam-cta {
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        text-align: center;
        font-size: 14px;
        padding: 10px 12px;
    }

    /* ---- DO/DONT GRID ---- */
    .do-dont-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .do-card,
    .dont-card {
        padding: 20px 16px;
    }

    /* ---- IMAGES ---- */
    img,
    svg {
        max-width: 100%;
        height: auto;
    }
}

/* ==========================================================
   MOBILE RESPONSIVE — 480px BREAKPOINT
========================================================== */

@media (max-width: 480px) {

    /* ---- HERO ---- */
    .dfam-hero {
        padding: 80px 0 48px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }

    /* stat cards — single column */
    .hero-stats {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 14px 12px;
    }

    .stat-value {
        font-size: 1.8rem;
    }

    /* ---- SECTION TITLES ---- */
    .section-title {
        font-size: 1.8rem;
    }

    .section-title.light {
        font-size: 1.8rem;
    }

    /* ---- TRUST GRID ---- */
    .trust-grid {
        grid-template-columns: 1fr;
    }

    .trust-item {
        padding: 12px;
        font-size: 14px;
    }

    /* ---- COMPARISON STATS (2-col -> 1-col) ---- */
    .comparison-stats {
        grid-template-columns: 1fr;
    }

    /* ---- CONTENT GRID ---- */
    .content-grid {
        padding: 16px 12px;
    }

    /* ---- CONTENT SECTION 1 ---- */
    .content-section1 {
        padding: 24px 12px;
    }

    /* ---- INDUSTRIES ---- */
    .industries-section {
        padding: 24px 12px;
    }

    /* ---- FAQ ---- */
    .faq-grid {
        padding: 0 12px;
    }

    .faq-question {
        font-size: 1.05rem;
        padding: 14px 12px;
    }

    /* ---- OVERHANG VISUAL (2-col -> 1-col) ---- */
    .overhang-visual {
        grid-template-columns: 1fr;
    }

    /* ---- PROC TAB BTN ---- */
    .proc-tab-btn {
        font-size: 0.85rem;
        padding: 9px 12px;
    }

    /* ---- KEY PRINCIPLE ---- */
    .key-principle h3 {
        font-size: 1.3rem;
    }

    /* ---- COMPARE NUMBER ---- */
    .compare-number {
        font-size: 2.5rem;
    }

    /* ---- GUIDE VALUE / RULE VALUE ---- */
    .guide-value {
        font-size: 2rem;
    }

    /* ---- SUBMIT BOX ---- */
    .submit-file-box {
        margin: 16px 8px;
        border-radius: 10px;
    }

    .submit-file-left,
    .submit-file-right {
        padding: 20px 16px;
    }

    /* ---- BENEFIT CARDS ---- */
    .benefit-card {
        padding: 16px 14px;
    }

    /* ---- LEVEL CARDS ---- */
    .level-card {
        padding: 18px 14px;
    }

    /* ---- RULE CARD ---- */
    .rule-card {
        padding: 16px 14px;
    }

    /* ---- PROC PANE ---- */
    .proc-pane {
        padding: 16px 12px;
    }

    /* ---- TIP BOX ---- */
    .tip-box {
        padding: 14px 14px;
    }

    /* ---- SECTION LEAD ---- */
    .section-lead {
        font-size: 14px;
    }

    /* ---- BREADCRUMB / EYEBROW ---- */
    .section-eyebrow,
    .div-eyebrow,
    .hero-eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }

    /* ---- FLOATING CTA ---- */
    .floating-dfam-cta {
        font-size: 13px;
        padding: 9px 10px;
        left: 8px;
        right: 8px;
        bottom: 10px;
    }
}