/* ============================================================= */
/* ROTOPILE — V2 OVERRIDE LAYER                                   */
/* Loaded AFTER shared.min.css + homepage.css.                   */
/* Rotopile brand palette plus tasteful V2 polish and the     */
/* dual steel-grade selector (S355/S420  &  S550).               */
/* ============================================================= */

:root{
    /* Brand red (per brand guide) */
    --red:#FF002B;
    --red-dark:#D10023;
    --red-light:#fff0f3;
    /* V2 accent: brand blue for the high-tensile S550 grade */
    --blue:#0025FC;
    --blue-dark:#001bb8;
    --blue-light:#eef0ff;
    --orange:#FFA300;
    --radius-lg:18px;
    --radius-xl:24px;
    --shadow-soft:0 10px 30px rgba(26,26,26,.08);
    --shadow-card:0 18px 50px rgba(26,26,26,.10);
}

/* ---- V2 polish: thin brand bar on top of the nav ---- */
.nav{ border-top:3px solid var(--red); }

/* Rotopile wordmark placeholder (until the real logo is supplied) */
.rp-wordmark{
    display:flex; align-items:baseline; gap:2px;
    font-weight:800; letter-spacing:-.5px; line-height:1;
    font-size:27px; color:var(--black); text-decoration:none;
}
.rp-wordmark .rp-roto{ color:var(--black); }
.rp-wordmark .rp-pile{ color:var(--red); }
.rp-wordmark .rp-dot{ color:var(--red); }
.product-card-image .rp-wordmark{ position:absolute; top:22px; left:24px; z-index:2; }
/* PRO/HELIX sub-brand logo on product cards — sized here so it also works on subpages (which don't load homepage.css) */
.product-card-image .product-brand-logo{ position:absolute; top:20px; left:22px; height:34px; width:auto; z-index:3; }
@media(max-width:768px){ .product-card-image .product-brand-logo{ height:30px; top:16px; left:18px; } }
.nav-logo .nav-tagline{ white-space:nowrap; }

/* Real Rotopile logo (replaces the placeholder wordmark) */
.nav-logo .rotopile-logo{ height:36px; width:auto; display:block; }
.footer-logo .rotopile-logo{ height:30px; width:auto; display:block; }
@media(max-width:768px){ .nav-logo .rotopile-logo{ height:30px; } }
.rp-logo-note{
    position:absolute; left:0; top:100%; font-size:9px; letter-spacing:.5px;
    color:var(--mid-gray); text-transform:uppercase; opacity:.7;
}

/* ============================================================= */
/* HERO V2 — slightly deeper scrim + grade pill in cover slide   */
/* ============================================================= */
.hero-slide-bg::after{
    background:linear-gradient(90deg, rgba(20,20,22,.79) 0%, rgba(20,20,22,.57) 42%, rgba(20,20,22,.26) 100%);
}
.hero-eyebrow{ color:#ff4d66; }

/* Hero sizing: fit longer Portuguese copy without clipping (homepage only) */
.hero{ height:660px; }
.hero-content{ min-height:660px; padding-top:46px; padding-bottom:46px; }
.hero-slide-centered{ min-height:660px; }
.hero h1{ font-size:44px; line-height:1.12; margin-bottom:18px; }
.hero-checks{ margin-bottom:22px; }
.hero-checks li{ font-size:15px; padding-top:5px; padding-bottom:5px; line-height:1.45; }
.hero-trust-inline{ margin-top:26px; padding-top:20px; gap:26px; }
/* Portuguese hero cover (dunas-golf-2): show machine + drive head */
[data-slide="0"] .hero-slide-bg img{ object-position:center 42%; }
@media(max-width:768px){
    .hero{ height:600px; }
    .hero-content{ min-height:600px; padding-top:34px; padding-bottom:34px; }
    .hero-slide-centered{ min-height:600px; }
    .hero h1{ font-size:28px; margin-bottom:14px; }
    .hero-checks li{ font-size:13.5px; }
    .hero-trust-inline{ margin-top:16px; padding-top:14px; gap:16px; }
}

/* dual-grade pill shown in the cover slide */
.hero-grades{
    display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 4px;
}
.hero-grade-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 14px; border-radius:999px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
    color:#fff; font-size:13px; font-weight:600; backdrop-filter:blur(4px);
}
.hero-grade-pill .dotmark{ width:9px; height:9px; border-radius:50%; }
.hero-grade-pill.is-standard .dotmark{ background:var(--red); }
.hero-grade-pill.is-ht .dotmark{ background:#6f86ff; }

/* ============================================================= */
/* STEEL-GRADE SELECTOR  (signature Rotopile section)            */
/* ============================================================= */
.steel-section{
    padding:56px 0;
    background:var(--bg-gray);
}
.steel-head{ text-align:center; max-width:760px; margin:0 auto 14px; }
.steel-head .section-eyebrow{ color:var(--red); }
.steel-head h2{
    font-size:27px; font-weight:800; letter-spacing:-.5px;
    color:var(--black); margin:6px 0 12px;
}
.steel-head p{ font-size:16px; line-height:1.7; color:var(--mid-gray); }

/* segmented toggle */
.grade-switch{
    display:inline-flex; padding:5px; gap:4px; margin:26px auto 0;
    background:var(--bg-gray); border-radius:999px; border:1px solid var(--light-gray);
}
.grade-switch-btn{
    appearance:none; border:0; cursor:pointer;
    font-family:inherit; font-weight:700; font-size:14px;
    padding:11px 22px; border-radius:999px; color:var(--dark-gray);
    background:transparent; transition:all .22s ease; white-space:nowrap;
    display:inline-flex; align-items:center; gap:9px;
}
.grade-switch-btn .dotmark{ width:10px; height:10px; border-radius:50%; }
.grade-switch-btn[data-grade="standard"] .dotmark{ background:var(--red); }
.grade-switch-btn[data-grade="hightensile"] .dotmark{ background:var(--blue); }
.grade-switch-btn.is-active{ background:var(--white); color:var(--black); box-shadow:var(--shadow-soft); }

/* the two grade cards — always both visible, equal weight */
.steel-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:26px;
    max-width:1040px; margin:42px auto 0;
}
.steel-card{
    position:relative; background:var(--white);
    border:1.5px solid var(--light-gray); border-radius:var(--radius-xl);
    padding:26px 26px; box-shadow:var(--shadow-soft);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.steel-card .steel-accent{ height:5px; width:54px; border-radius:999px; margin-bottom:20px; }
.steel-card.standard .steel-accent{ background:var(--red); }
.steel-card.hightensile .steel-accent{ background:var(--blue); }
.steel-card h3{ font-size:20px; font-weight:800; color:var(--black); margin:0 0 4px; letter-spacing:-.5px; }
.steel-card .steel-grade-name{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; }
.steel-card.standard .steel-grade-name{ color:var(--red); }
.steel-card.hightensile .steel-grade-name{ color:var(--blue); }
.steel-card .steel-lead{ font-size:15px; line-height:1.7; color:var(--dark-gray); margin:16px 0 20px; }
.steel-card ul{ list-style:none; padding:0; margin:0 0 22px; }
.steel-card li{
    position:relative; padding-left:28px; margin-bottom:11px;
    font-size:14.5px; line-height:1.55; color:var(--dark-gray);
}
.steel-card li svg{ position:absolute; left:0; top:2px; width:18px; height:18px; }
.steel-card.standard li svg{ color:var(--red); }
.steel-card.hightensile li svg{ color:var(--blue); }

/* spec row */
.steel-spec{ display:flex; gap:24px; padding:18px 0 0; border-top:1px solid var(--light-gray); }
.steel-spec-item .v{ font-size:22px; font-weight:800; color:var(--black); line-height:1; }
.steel-spec-item .l{ font-size:12px; color:var(--mid-gray); margin-top:5px; }

/* diameter chips */
.steel-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.steel-chip{
    font-size:12.5px; font-weight:600; color:var(--dark-gray);
    background:var(--bg-gray); border:1px solid var(--light-gray);
    padding:5px 10px; border-radius:8px;
}

/* active state driven by the toggle (both stay visible; active is lifted) */
body[data-grade="standard"] .steel-card.standard,
body[data-grade="hightensile"] .steel-card.hightensile{
    transform:translateY(-4px); box-shadow:var(--shadow-card);
}
body[data-grade="standard"] .steel-card.standard{ border-color:var(--red); }
body[data-grade="hightensile"] .steel-card.hightensile{ border-color:var(--blue); }

/* footnote under the cards */
.steel-foot{
    text-align:center; max-width:720px; margin:30px auto 0;
    font-size:13.5px; line-height:1.7; color:var(--mid-gray);
}
.steel-foot strong{ color:var(--dark-gray); }

/* nav mini grade switch (desktop only) */
.nav-grade{ display:none; }
@media(min-width:1100px){
    .nav-grade{
        display:inline-flex; padding:3px; gap:2px; margin-right:14px;
        background:var(--bg-gray); border:1px solid var(--light-gray); border-radius:999px;
    }
    .nav-grade .grade-switch-btn{ padding:7px 12px; font-size:12.5px; }
}

/* ============================================================= */
/* V2 polish on reused components                                */
/* ============================================================= */
.product-card{ border-radius:var(--radius-xl); }
.stat-card{ border-radius:var(--radius-lg); }
.case-card{ border-radius:var(--radius-lg); overflow:hidden; }
.btn-primary{ box-shadow:0 8px 22px rgba(255,0,43,.22); }
.btn-primary:hover{ box-shadow:0 12px 30px rgba(255,0,43,.30); }

/* PRO/HELIX sub-brand colours per brand guide: PRO = blue, HELIX = orange */
.product-card.card-pro{ border-top-color:var(--blue); }
.product-card.card-helix{ border-top-color:var(--orange); }
.product-card.card-pro .rp-roto{ color:var(--blue); }
.product-card.card-helix .rp-pile{ color:var(--orange); }
.product-card.card-pro .product-key-stat{ background:rgba(0,37,252,.06); border-left-color:var(--blue); }
.product-card.card-helix .product-key-stat{ background:rgba(255,163,0,.10); border-left-color:var(--orange); }
.product-card.card-pro .product-key-stat-number{ color:var(--blue); }
.product-card.card-helix .product-key-stat-number{ color:var(--orange); }

/* SAFETY: un-sized icon SVGs must never balloon (e.g. pages that don't load homepage.css) */
[class*="icon"] > svg:not([width]):not([height]){ width:24px; height:24px; }

/* Full-width contextual image band (visual break on text-heavy pages) */
.image-band{ width:100%; height:400px; overflow:hidden; position:relative; }
.image-band img{ width:100%; height:100%; object-fit:cover; display:block; }
.image-band-caption{ position:absolute; left:0; bottom:0; right:0; padding:18px 48px; color:#fff;
    background:linear-gradient(to top, rgba(20,20,22,.7), transparent); font-size:14px; font-weight:600; }
@media(max-width:768px){ .image-band{ height:240px; } .image-band-caption{ padding:14px 24px; } }

/* client-logo placeholder (real logos to be added later) */
.logo-bar-placeholder{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.logo-ph-note{ font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--mid-gray); }
.logo-ph-row{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.logo-ph-box{ width:118px; height:42px; border-radius:9px; background:var(--bg-gray); border:1.5px dashed var(--light-gray); }
@media(max-width:600px){ .logo-ph-box{ width:92px; height:36px; } }

/* sustainability bg → live Paalupiste asset (CSS copied locally) */
.sustainability-section{
    background-image:url('https://www.paalupiste.com/images/sustainability-environment-background.jpg');
}

/* ============================================================= */
/* RESPONSIVE                                                    */
/* ============================================================= */
@media(max-width:860px){
    .steel-grid{ grid-template-columns:1fr; }
    .steel-head h2{ font-size:23px; }
    .steel-section{ padding:44px 0; }
}


/* ---- Language switcher flags ---- */
.nav-lang{display:inline-flex;align-items:center}
.lang-flag{display:inline-block;width:21px;height:14px;border-radius:2px;flex:0 0 auto;margin-right:6px;vertical-align:-2px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.10)}
.flag-pt{background-image:url("../images/flag-pt.svg")}
.flag-en{background-image:url("../images/flag-en.svg")}
.mega-menu-lang .nav-lang-group a{display:inline-flex;align-items:center}


/* ---- Featured case study (projetos) ---- */
.featured-case{margin:0 0 48px;background:#fff;border:1px solid #ececf1;border-radius:18px;overflow:hidden;box-shadow:0 12px 38px rgba(8,16,46,.07)}
.featured-case-grid{display:grid;grid-template-columns:1fr 1.05fr}
.featured-case-media{padding:16px}
.featured-case-main{width:100%;height:360px;object-fit:cover;border-radius:12px;display:block}
.featured-case-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.featured-case-thumbs img{width:100%;height:104px;object-fit:cover;border-radius:9px;display:block}
.featured-case-body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center}
.featured-case-eyebrow{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--red);background:rgba(255,0,43,.07);padding:6px 13px;border-radius:999px;margin-bottom:16px}
.featured-case-body h2{font-size:30px;line-height:1.14;margin:0 0 14px;color:#0c1330;font-weight:800}
.featured-case-body p{font-size:16px;line-height:1.72;color:#414a6b;margin:0}
.featured-case-meta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px}
.featured-case-meta span{font-size:13px;font-weight:600;color:#1a2347;background:#f3f4f8;border-radius:999px;padding:7px 14px}
.featured-case-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;font-weight:700;font-size:15px;text-decoration:none;padding:13px 24px;border-radius:11px;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 6px 18px rgba(255,0,43,.22)}
.featured-case-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,0,43,.30)}
@media(max-width:880px){.featured-case-grid{grid-template-columns:1fr}.featured-case-media{padding:12px 12px 0}.featured-case-main{height:280px}.featured-case-body{padding:26px 24px 32px}.featured-case-body h2{font-size:25px}}


/* ---- Steel grades compact note (homepage) ---- */
.steel-note{padding:30px 0;background:#f5f6f8;border-top:1px solid #ececf1;border-bottom:1px solid #ececf1}
.steel-note-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.steel-note-inner p{margin:0;font-size:15.5px;line-height:1.6;color:#414a6b;max-width:780px}
.steel-note-inner strong{color:#0c1330;font-weight:700}
.steel-note-inner .card-link{flex:0 0 auto}
@media(max-width:680px){.steel-note-inner{flex-direction:column;align-items:flex-start;gap:12px}}