/* ==================================================
   SQUEAK – ALARM PAGE
   Plaats dit als apart bestand of onderaan child-theme CSS.
================================================== */

/* ---------- Shared ---------- */
.squeak-alarm-hero,
.squeak-alarm-features,
.squeak-alarm-approach {
    background: #0b0d0e;
    color: #f2efe8;
}

/* ---------- HERO ---------- */
.squeak-alarm-hero {
    position: relative;
    overflow: hidden;
    background-image: url('/wp-content/uploads/2026/08/squeak-noise.png');
    background-repeat: repeat;
    background-size: 256px 256px;
}
.squeak-alarm-hero-inner {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    width: min(90%, 1500px);
    min-height: 650px;
    margin: 0 auto;
}
.squeak-alarm-hero-copy { padding: 70px 45px 70px 0; position: relative; z-index: 2; }
.squeak-alarm-eyebrow {
    display: inline-block; padding-bottom: 10px; margin-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.35);
    font-family: "Barlow Condensed",sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing:.08em;
}
.squeak-alarm-eyebrow::after { content:""; display:inline-block; width:4px; height:4px; margin-left:18px; vertical-align:middle; background:#e51d24; border-radius:50%; }
.squeak-alarm-hero-title h1 {
    margin:0 0 22px!important; padding:0!important;
    font-family:"Barlow Condensed",sans-serif!important; font-size:clamp(58px,5vw,84px)!important; font-weight:800!important; line-height:.9!important; letter-spacing:-.025em!important; text-transform:uppercase!important; color:#f2efe8!important;
}
.squeak-alarm-hero-title h1 span { color:#e51d24!important; }
.squeak-alarm-hero-intro { max-width:520px; }
.squeak-alarm-hero-intro p { margin:0!important; font:400 16px/1.6 "Barlow",sans-serif!important; color:#c5c5c2!important; }
.squeak-alarm-hero-actions { display:flex; align-items:center; gap:30px; margin-top:32px; flex-wrap:wrap; }
.squeak-alarm-btn-primary,.squeak-alarm-btn-secondary { display:inline-flex; align-items:center; gap:14px; font-family:"Barlow Condensed",sans-serif; font-size:15px; font-weight:700; text-transform:uppercase; text-decoration:none!important; }
.squeak-alarm-btn-primary { padding:17px 22px; background:#e51d24; color:#fff!important; }
.squeak-alarm-btn-secondary { padding:17px 0 9px; color:#f2efe8!important; border-bottom:2px solid #e51d24; }
.squeak-alarm-btn-primary span:last-child,.squeak-alarm-btn-secondary span:last-child { transition:transform .2s ease; }
.squeak-alarm-btn-primary:hover span:last-child,.squeak-alarm-btn-secondary:hover span:last-child { transform:translateX(4px); }
.squeak-alarm-hero-visual { position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; }
.squeak-alarm-hero-image { display:block; width:min(100%,760px); height:auto; max-height:620px; object-fit:contain; }

/* ---------- FEATURES ---------- */
.squeak-alarm-features { border-top:1px solid rgba(255,255,255,.22); }
.squeak-alarm-features-inner { display:grid; grid-template-columns:34% 66%; width:min(90%,1500px); margin:0 auto; }
.squeak-alarm-features-intro { padding:55px 55px 55px 0; border-right:1px solid rgba(255,255,255,.13); }
.squeak-alarm-features-intro h2 { margin:0 0 20px!important; font-family:"Barlow Condensed",sans-serif!important; font-size:46px!important; font-weight:800!important; line-height:.92!important; text-transform:uppercase!important; color:#f2efe8!important; }
.squeak-alarm-features-intro h2 span { color:#e51d24!important; }
.squeak-alarm-features-intro p { max-width:360px; margin:0!important; font:400 15px/1.55 "Barlow",sans-serif!important; color:#c2c2bf!important; }
.squeak-alarm-features-grid { display:grid; grid-template-columns:repeat(6,1fr); }
.squeak-alarm-feature { display:flex; gap:20px; align-items:flex-start; padding:35px 28px; min-width:0; }
.squeak-alarm-feature-1,.squeak-alarm-feature-2 { grid-column:span 3; border-bottom:1px solid rgba(255,255,255,.16); }
.squeak-alarm-feature-1 { border-right:1px solid rgba(255,255,255,.16); }
.squeak-alarm-feature-3,.squeak-alarm-feature-4,.squeak-alarm-feature-5 { grid-column:span 2; }
.squeak-alarm-feature-3,.squeak-alarm-feature-4 { border-right:1px solid rgba(255,255,255,.16); }
.squeak-alarm-feature-icon { flex:0 0 60px; }
.squeak-alarm-feature-icon img { width:58px; height:58px; object-fit:contain; }
.squeak-alarm-feature h3 { margin:0 0 7px!important; font:700 18px/1 "Barlow Condensed",sans-serif!important; text-transform:uppercase!important; color:#f2efe8!important; }
.squeak-alarm-feature p { margin:0!important; font:400 13px/1.5 "Barlow",sans-serif!important; color:#c4c4c1!important; }

/* ---------- FOR WHO ---------- */
.squeak-alarm-audience { display:grid; grid-template-columns:31% 41% 28%; min-height:430px; background:#eeeae2; color:#121416; overflow:hidden; }
.squeak-alarm-audience-image { min-height:430px; position:relative; }
.squeak-alarm-audience-image img { width:100%; height:100%; object-fit:cover; display:block; }
.squeak-alarm-audience-copy { align-self:center; padding:55px 60px; }
.squeak-alarm-audience-copy h2 { margin:0 0 18px!important; font:800 46px/.95 "Barlow Condensed",sans-serif!important; text-transform:uppercase!important; color:#111315!important; }
.squeak-alarm-audience-copy h2 span { color:#e51d24!important; }
.squeak-alarm-audience-intro { max-width:450px; margin:0 0 28px!important; font:400 15px/1.55 "Barlow",sans-serif!important; color:#333638!important; }
.squeak-alarm-audience-list { display:grid; gap:17px; }
.squeak-alarm-audience-item { display:flex; align-items:center; gap:15px; font:500 15px/1.25 "Barlow",sans-serif; }
.squeak-alarm-audience-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.squeak-alarm-audience-icon img { max-width:28px; max-height:28px; object-fit:contain; }
.squeak-alarm-audience-corner { position:absolute; top:28px; left:28px; width:30px; height:30px; border-top:2px solid #e51d24; border-left:2px solid #e51d24; }

/* ---------- APPROACH ---------- */
.squeak-alarm-approach-inner { width:min(90%,1500px); margin:0 auto; padding:42px 0 48px; }
.squeak-alarm-approach-heading { margin:0 0 25px!important; font:800 31px/1 "Barlow Condensed",sans-serif!important; text-transform:uppercase!important; color:#f2efe8!important; }
.squeak-alarm-approach-heading span { color:#e51d24!important; }
.squeak-alarm-steps { display:grid; grid-template-columns:repeat(4,1fr); }
.squeak-alarm-step { position:relative; padding:0 48px 0 0; min-height:155px; }
.squeak-alarm-step + .squeak-alarm-step { padding-left:35px; }
.squeak-alarm-step-top { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.squeak-alarm-step-number { font:800 58px/.85 "Barlow Condensed",sans-serif; color:#55575a; }
.squeak-alarm-step-icon img { width:48px; height:48px; object-fit:contain; }
.squeak-alarm-step h3 { margin:0 0 9px!important; font:700 16px/1 "Barlow Condensed",sans-serif!important; text-transform:uppercase!important; color:#f2efe8!important; }
.squeak-alarm-step p { max-width:240px; margin:0!important; font:400 13px/1.55 "Barlow",sans-serif!important; color:#c1c1be!important; }
.squeak-alarm-step-arrow { position:absolute; right:15px; top:55px; font:300 42px/1 Arial,sans-serif; color:#f2efe8; }

/* ---------- CTA ---------- */
.squeak-alarm-cta { position:relative; overflow:hidden; background:#e51d24; background-image:url('/wp-content/uploads/2026/08/squeak-noise.png'); background-repeat:repeat; background-size:256px; color:#fff; }
.squeak-alarm-cta-inner { display:grid; grid-template-columns:100px 1fr auto; align-items:center; gap:35px; width:min(90%,1500px); margin:0 auto; padding:35px 0; }
.squeak-alarm-cta-icon img { max-width:80px; max-height:80px; object-fit:contain; }
.squeak-alarm-cta-copy h2 { margin:0 0 7px!important; font:800 38px/.95 "Barlow Condensed",sans-serif!important; text-transform:uppercase!important; color:#fff!important; }
.squeak-alarm-cta-copy p { margin:0!important; font:600 15px/1.4 "Barlow",sans-serif!important; color:#fff!important; }
.squeak-alarm-cta-button { display:inline-flex; align-items:center; gap:18px; min-width:275px; justify-content:center; padding:20px 28px; background:#101214!important; color:#fff!important; font:700 15px/1 "Barlow Condensed",sans-serif; text-transform:uppercase; text-decoration:none!important; }
.squeak-alarm-cta-button span:last-child { transition:transform .2s ease; }
.squeak-alarm-cta-button:hover span:last-child { transform:translateX(4px); }

/* ---------- Responsive ---------- */
@media(max-width:1100px){
 .squeak-alarm-hero-inner{grid-template-columns:1fr 1fr;width:92%;}
 .squeak-alarm-features-inner{grid-template-columns:1fr;}
 .squeak-alarm-features-intro{border-right:0;border-bottom:1px solid rgba(255,255,255,.16);padding:45px 5%;}
 .squeak-alarm-features-grid{grid-template-columns:repeat(2,1fr);}
 .squeak-alarm-feature,.squeak-alarm-feature-1,.squeak-alarm-feature-2,.squeak-alarm-feature-3,.squeak-alarm-feature-4,.squeak-alarm-feature-5{grid-column:span 1;border-right:0;border-bottom:1px solid rgba(255,255,255,.14);}
 .squeak-alarm-audience{grid-template-columns:1fr 1.35fr;}.squeak-alarm-audience-image-right{display:none;}
 .squeak-alarm-steps{grid-template-columns:repeat(2,1fr);gap:40px 0;}.squeak-alarm-step-arrow{display:none;}
}
@media(max-width:767px){
 .squeak-alarm-hero-inner{grid-template-columns:1fr;min-height:0;width:calc(100% - 48px);}
 .squeak-alarm-hero-copy{padding:55px 0 20px;}.squeak-alarm-hero-title h1{font-size:52px!important;}.squeak-alarm-hero-visual{min-height:340px;}
 .squeak-alarm-features-grid{grid-template-columns:1fr;}.squeak-alarm-feature{padding:28px 24px;}
 .squeak-alarm-audience{grid-template-columns:1fr;}.squeak-alarm-audience-image-left{min-height:300px;}.squeak-alarm-audience-copy{padding:45px 24px;}
 .squeak-alarm-steps{grid-template-columns:1fr;}.squeak-alarm-step,.squeak-alarm-step + .squeak-alarm-step{padding:0 0 28px;border-bottom:1px solid rgba(255,255,255,.14);}.squeak-alarm-step:last-child{border-bottom:0;}
 .squeak-alarm-cta-inner{grid-template-columns:1fr;width:calc(100% - 48px);text-align:center;gap:18px;}.squeak-alarm-cta-icon{display:flex;justify-content:center;}.squeak-alarm-cta-button{width:100%;min-width:0;}
}

/* ==================================================
   v0.9 – RESPONSIVE HERO HARDENING
================================================== */
@media (max-width: 767px) {
    .squeak-alarm-hero-inner {
        width: calc(100% - 36px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .squeak-alarm-hero-copy,
    .squeak-alarm-hero-visual {
        min-width: 0 !important;
        width: 100% !important;
    }

    .squeak-alarm-hero-title h1 {
        font-size: clamp(34px, 10.5vw, 46px) !important;
        line-height: .94 !important;
        max-width: 100% !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .squeak-alarm-eyebrow {
        max-width: 100%;
    }
}
