@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#FEFCF6;
  --navy:#1C263D;
  --orange:#FE5900;
  --muted:#667085;
  --line:#EAE6DD;
  --card:#F8F7F2;
  --max:1312px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--navy);font-family:'Montserrat',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 96px));margin:0 auto}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.28em;font-weight:600;text-transform:uppercase;margin-bottom:18px}
.eyebrow::before{content:'';width:34px;height:2px;background:var(--orange)}
.section-title{font-size:50px;line-height:1.02;letter-spacing:-.045em;margin:0;font-weight:800}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.reveal.in-view{opacity:1;transform:none}

/* HERO */
.hero{position:relative;min-height:760px;overflow:hidden;background:var(--bg)}
.hero::before,.hero::after{content:'';position:absolute;pointer-events:none;z-index:0}
.hero::before{left:-170px;top:-150px;width:570px;height:570px;border:1px solid rgba(254,89,0,.12);transform:rotate(45deg);background:linear-gradient(135deg,rgba(254,89,0,.045),transparent 60%)}
.hero::after{right:-260px;top:-100px;width:720px;height:720px;background:linear-gradient(135deg,transparent 22%,rgba(28,38,61,.055) 22% 23%,transparent 23% 42%,rgba(254,89,0,.06) 42% 43%,transparent 43%);transform:rotate(-8deg)}
.header{height:92px;display:flex;align-items:center;position:relative;z-index:20}
.header-inner{display:grid;grid-template-columns:220px 1fr 220px;align-items:center;width:100%}
.logo img{width:170px;height:auto}
.nav{display:flex;justify-content:center;align-items:center;gap:42px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.nav a{position:relative;padding:14px 0;color:#4d5361;transition:color .2s ease}
.nav a:hover{color:var(--orange)}
.nav a.active::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--orange)}
.quote-btn{justify-self:end;background:var(--orange);color:#fff;padding:15px 20px;border-radius:7px;font-size:10px;font-weight:700;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;box-shadow:0 6px 18px rgba(254,89,0,.15);transition:.25s ease}
.quote-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(254,89,0,.22)}
.mobile-toggle{display:none;background:none;border:0;padding:8px;color:var(--navy)}
.hero-grid{position:relative;z-index:4;display:grid;grid-template-columns:39% 61%;min-height:668px;align-items:center}
.hero-copy{padding-top:4px;max-width:520px}
.hero-copy h1{font-size:67px;line-height:1.04;letter-spacing:-.055em;margin:0 0 27px;font-weight:800}
.hero-copy p{font-size:14px;line-height:1.72;max-width:495px;margin:0 0 26px;font-weight:500}
.hero-actions{display:flex;gap:24px;margin-bottom:28px}
.btn{min-height:46px;padding:0 17px;border-radius:7px;display:inline-flex;align-items:center;gap:13px;text-transform:uppercase;font-size:10px;font-weight:700;border:1.5px solid var(--orange);transition:.22s ease}
.btn svg,.card-arrow svg,.link-arrow svg{transition:transform .22s ease}
.btn:hover svg,.card:hover .card-arrow svg,.top-link:hover svg,.location-card:hover .loc-arrow svg{transform:translateX(4px)}
.btn-primary{background:var(--orange);color:#fff}.btn-outline{background:transparent;color:var(--orange)}
.experience{display:flex;align-items:center;width:455px;min-height:72px;border-radius:10px;background:#fff;border:1px solid #eee8df;box-shadow:0 8px 30px rgba(28,38,61,.04);padding:11px 14px}
.helmet{width:51px;height:51px;border-radius:50%;display:grid;place-items:center;color:var(--orange);border:2px solid var(--orange);font-size:20px;margin-right:14px}
.exp-main{display:flex;align-items:baseline;gap:8px;padding-right:22px;border-right:1px solid rgba(254,89,0,.35)}
.exp-main strong{font-size:34px;line-height:1}.exp-main span{font-size:10px;font-weight:700;text-transform:uppercase}
.exp-note{font-size:9px;line-height:1.35;padding-left:20px;color:#5f6673}
.hero-values{margin-top:18px;display:flex;gap:19px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.hero-values span+span::before{content:'•';margin-right:19px;color:#8b8f98}
.hero-art{position:absolute;right:-10px;top:72px;width:64%;height:688px;z-index:2;overflow:hidden;pointer-events:none}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:left top;transform:scale(1.01)}
.hero-art::before{content:'';position:absolute;z-index:2;left:0;top:0;width:17%;height:100%;background:linear-gradient(90deg,var(--bg) 12%,rgba(254,252,246,.82) 48%,transparent);pointer-events:none}

/* PRODUCTS */
.products{padding:72px 0 132px;min-height:650px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:68px}
.top-link{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:15px;white-space:nowrap;padding-bottom:7px}
.top-link svg{color:var(--orange)}
.product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:56px}
.products-all-mobile{display:none}
.card{background:#f8f7f3;border-radius:20px;overflow:hidden;min-height:304px;box-shadow:0 0 0 1px rgba(28,38,61,.015);transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 35px rgba(28,38,61,.10)}
.card-media{height:212px;display:grid;place-items:center;overflow:hidden;background:#faf9f5}
/* V28.8 — Ballina product covers fill the complete media area */
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
.card:hover .card-media img{transform:scale(1.045)}
.placeholder{font-weight:800;font-size:26px;letter-spacing:-.04em}
.card-bottom{background:var(--navy);color:#fff;min-height:93px;padding:17px 14px 14px;position:relative}
.card-bottom h3{font-size:11px;margin:0 0 9px;text-transform:uppercase;font-weight:700}
.card-bottom p{font-size:9px;line-height:1.32;margin:0;max-width:150px;font-weight:400}
.card-arrow{position:absolute;right:15px;bottom:14px;color:var(--orange)}

/* ABOUT */
.about{padding:65px 0 96px;min-height:530px}
.about-grid{display:grid;grid-template-columns:45% 55%;gap:70px;align-items:center}
.about-copy{max-width:540px}.about-copy .section-title{max-width:470px;margin-bottom:28px}.about-copy p{font-size:15px;line-height:1.6;font-weight:500;margin:0 0 28px;max-width:500px}
.about-visual{position:relative;width:100%;height:auto;aspect-ratio:1575 / 999;overflow:visible}
.about-visual::before{display:none}
.about-composite{display:block;width:100%;height:100%;object-fit:contain;object-position:center center}
/* V21 counting-only enhancement: live numbers over the existing composite image. */
.about-count-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;container-type:inline-size}
.about-count{position:absolute;display:flex;align-items:center;color:#fff;font-family:Montserrat,Arial,sans-serif;font-weight:800;line-height:1;letter-spacing:-.055em;white-space:nowrap}
.about-count::before{display:none}
.about-count-years{left:73.0%;top:18.0%;font-size:4.35cqw}
.about-count-locations{left:73.0%;top:36.0%;font-size:4.35cqw}
.about-count-clients{left:73.0%;top:54.1%;font-size:3.95cqw}
@supports not (font-size:1cqw){
  .about-count-years,.about-count-locations{font-size:clamp(20px,2.5vw,46px)}
  .about-count-clients{font-size:clamp(18px,2.25vw,42px)}
}
.about-more-mobile{display:none}
.stats,.about-photo-shell,.about-photo,.stat{display:none}

/* TEAM */
.team{padding:56px 0 90px;min-height:565px}
.team-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}
.team-intro p{font-size:15px;line-height:1.42;max-width:660px;margin:22px 0 0;font-weight:500}
.team-join{background:transparent;color:var(--orange);align-self:flex-end;margin-bottom:5px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;margin-top:20px}
.team-join-mobile{display:none}
.member-photo{height:196px;border-radius:16px;background:#f7f6f2;display:grid;place-items:center;font-size:25px;font-weight:800;margin-bottom:14px}.member-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.member h4{margin:0 0 7px;font-size:19px;letter-spacing:-.035em}.member p{margin:0;font-size:13px;font-weight:500}

/* LOCATIONS */
.locations{padding:54px 0 85px;min-height:410px}
.locations-grid{display:grid;grid-template-columns:36% 30% 34%;gap:28px;align-items:center}
.locations-copy .section-title{margin-bottom:20px}.locations-copy p{font-size:15px;line-height:1.45;max-width:430px;margin:0 0 42px;font-weight:500}
.map-wrap{display:flex;justify-content:center}.map-wrap img{width:330px;max-height:330px;object-fit:contain}
.location-list{display:flex;flex-direction:column;gap:13px}
.locations-all-mobile{display:none}
.location-card{height:68px;border:1.5px solid var(--orange);border-radius:9px;display:grid;grid-template-columns:112px minmax(0,1fr) 32px;column-gap:12px;align-items:center;padding:5px 7px;background:#fff;transition:transform .2s ease,box-shadow .2s ease}
.location-card:hover{transform:translateX(3px);box-shadow:0 8px 20px rgba(28,38,61,.08)}
.location-thumb{height:56px;border-radius:7px;overflow:hidden;background:#f7f6f2;display:grid;place-items:center;font-weight:800;font-size:16px}.location-thumb img{width:100%;height:100%;object-fit:cover}
.location-card h4{font-size:14px;margin:0 0 1px}.location-card p{font-size:9px;margin:0;line-height:1.12}.loc-arrow{color:var(--orange);transition:transform .2s ease}

/* PARTNERS */
.partners{padding:54px 0 48px;overflow:hidden}
.partners .section-title{font-size:42px;margin-bottom:45px}
.partner-viewport{overflow:hidden;width:100%;padding:4px 0}
.partner-track{display:flex;align-items:center;gap:50px;will-change:transform;min-width:max-content}
.partner-track.is-animated{animation:partner-marquee var(--partner-duration,28s) linear infinite}
.partner-viewport:hover .partner-track.is-animated,.partner-viewport:focus-within .partner-track.is-animated{animation-play-state:running!important}
.partner-item{flex:0 0 180px;height:86px;display:grid;place-items:center;padding:4px 8px}
.partner-item img{max-width:100%;max-height:72px;object-fit:contain}
.partner-item[data-brand="cline"] img{max-height:76px}.partner-item[data-brand="compaso"] img{max-width:176px}.partner-item[data-brand="clint"] img{max-width:150px}.partner-item[data-brand="vts"] img{max-width:158px}.partner-item[data-brand="grohod"] img{max-width:175px}

@keyframes partner-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--partner-loop-distance,50%)))}}

/* FOOTER */
.footer{position:relative;padding:58px 0 38px;background:#faf9f6;overflow:hidden;border-top:1px solid #eeeae1}
.footer::before{content:'';position:absolute;inset:0;background:var(--cms-media-assets-footer-background-png,url('assets/footer-background.png')) center/cover no-repeat;opacity:.7}
.footer-grid{position:relative;display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:62px;min-height:245px}
.footer-logo{width:180px;margin-bottom:26px}.footer-brand p{font-size:12px;line-height:1.45;max-width:260px;margin:0 0 20px}
.socials{display:flex;gap:18px;font-weight:700}.socials a{width:23px;height:23px;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,opacity .2s ease}.socials a:hover{transform:translateY(-2px);opacity:.8}.socials img{width:100%;height:100%;object-fit:contain}
.footer h5{font-size:13px;margin:8px 0 23px;text-transform:uppercase}.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.footer li,.footer a,.contact-row{font-size:11px;font-weight:500}
.contact-list{display:grid;gap:10px}.contact-row{display:flex;align-items:flex-start;gap:12px}.contact-icon{width:18px;height:18px;object-fit:contain;flex:0 0 18px;margin-top:1px}

/* PLACEHOLDER PAGES */
.placeholder-page{min-height:100vh;display:grid;place-items:center;padding:40px}.placeholder-box{text-align:center;max-width:620px}.placeholder-box h1{font-size:56px;margin:0 0 14px}.placeholder-box p{font-size:16px;line-height:1.6}.placeholder-box a{margin-top:22px}

@media(max-width:1100px){
  .container{width:min(var(--max),calc(100% - 50px))}.header-inner{grid-template-columns:170px 1fr 170px}.nav{gap:20px}.hero-copy h1{font-size:54px}.hero-grid{grid-template-columns:45% 55%}.hero-art{width:58%}.product-grid{gap:24px}.card-media{height:180px}.stats{width:150px}.locations-grid{grid-template-columns:34% 31% 35%}
}
@media(max-width:820px){
  .container{width:calc(100% - 32px)}.header{height:76px}.header-inner{grid-template-columns:1fr auto}.logo img{width:140px}.nav,.header .quote-btn{display:none}.mobile-toggle{display:block}.nav.mobile-open{display:flex;position:absolute;left:16px;right:16px;top:68px;background:#fff;border-radius:14px;padding:18px;flex-direction:column;gap:5px;box-shadow:0 18px 50px rgba(28,38,61,.15);z-index:100}.nav.mobile-open a{width:100%;padding:10px 4px}
  .hero{min-height:auto;padding-bottom:50px}.hero-grid{display:block;min-height:auto}.hero-art{position:relative;top:auto;width:calc(100% + 32px);height:470px;right:auto;margin:25px -16px 0}.hero-art::before{display:none}.hero-copy{padding-top:42px;max-width:620px}.hero-copy h1{font-size:50px}.experience{width:100%;max-width:455px}.hero-values{flex-wrap:wrap}.products{padding:62px 0 90px}.section-head{align-items:flex-start;gap:25px}.section-title{font-size:42px}.product-grid{grid-template-columns:repeat(2,1fr);gap:20px}.about-grid{grid-template-columns:1fr}.about-visual{height:auto;aspect-ratio:1575 / 999}.team-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.locations-grid{grid-template-columns:1fr 1fr}.locations-copy{grid-column:1/-1}.partner-item{flex-basis:160px}.footer-grid{grid-template-columns:1fr 1fr}
  .team-join-desktop,.locations-all-desktop{display:none}
  .team-join-mobile,.locations-all-mobile{display:inline-flex;width:max-content}
  .team-join-mobile{margin-top:26px}
  .locations-all-mobile{grid-column:1/-1;justify-self:start;margin-top:8px}
}
@media(max-width:520px){
  .hero::after{height:270px;margin-top:20px;background-size:145% auto;background-position:73% center}
  .hero-copy h1{font-size:42px}.hero-copy p{font-size:13px}.hero-actions{gap:10px;flex-wrap:wrap}.experience{padding:10px}.exp-main strong{font-size:28px}.exp-note{padding-left:12px}.section-head{display:block}.top-link{margin-top:18px}.product-grid{grid-template-columns:1fr}.card{min-height:320px}.card-media{height:225px}.about{padding-top:30px}.about-visual{height:auto;aspect-ratio:1575 / 999}.stats{width:31%;height:74%;padding:12px 13px;border-radius:20px}.stat strong{font-size:31px}.team-head{display:block}.team-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px}.team-join-mobile{margin-top:24px}.member-photo{height:150px}.locations-grid{grid-template-columns:1fr}.map-wrap img{width:280px}.location-card{grid-template-columns:92px minmax(0,1fr) 30px;column-gap:10px}.locations-all-mobile{margin-top:14px}.partners .section-title{font-size:35px}.footer-grid{grid-template-columns:1fr;gap:25px}
}


/* ===== HERO V2 — locked to approved Figma composition ===== */
@media (min-width:821px){
  .hero{
    position:relative;
    width:100%;
    min-height:0;
    overflow:hidden;
    background-color:var(--bg);
    background-image:var(--cms-media-assets-hero-background-wide-flow-jpg,url('assets/hero-background-wide-flow.jpg'));
    background-repeat:no-repeat;
    background-position:center top;
    background-size:auto 100%;
  }
  .hero::before,.hero::after{display:none}
  .hero-canvas{
    position:relative;
    width:min(100%,1440px);
    aspect-ratio:1672 / 941;
    margin:0 auto;
    overflow:hidden;
    background-color:var(--bg);
    background-image:var(--cms-media-assets-hero-background-png,url('assets/hero-background.png'));
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100% 100%;
    container-type:inline-size;
  }

  .header{
    position:absolute;
    z-index:30;
    inset:0 0 auto 0;
    height:13.2%;
    display:block;
  }
  .header-inner{
    position:relative;
    display:block;
    width:100%;
    max-width:none;
    height:100%;
    margin:0;
  }
  .logo{
    position:absolute;
    left:5.05%;
    top:2.2cqw;
    width:13.0cqw;
    max-width:218px;
    min-width:165px;
    line-height:0;
  }
  .logo img{width:100%;height:auto}

  .nav{
    position:absolute;
    left:50%;
    top:3.05cqw;
    transform:translateX(-50%);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:3.05cqw;
    font-size:clamp(9px,.66cqw,11.2px);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.035em;
    white-space:nowrap;
  }
  .nav a{padding:12px 0;color:var(--navy);transition:color .2s ease}
  .nav a:hover{color:var(--orange)}
  .nav a.active::after{bottom:2px;height:1.5px}

  .quote-btn{
    position:absolute;
    right:5.05%;
    top:2.65cqw;
    justify-self:auto;
    padding:0 1.2cqw;
    height:3.35cqw;
    min-height:46px;
    max-height:58px;
    border-radius:7px;
    font-size:clamp(8px,.6cqw,10px);
    gap:.75cqw;
  }

  .hero-copy{
    position:absolute;
    z-index:10;
    left:5.05%;
    top:24.1%;
    width:33.7%;
    max-width:none;
    padding:0;
  }
  .hero-copy .eyebrow{
    gap:.9cqw;
    margin:0 0 2.15cqw;
    font-size:clamp(8px,.67cqw,11px);
    letter-spacing:.31em;
  }
  .hero-copy .eyebrow::before{width:2.65cqw;max-width:44px;height:1.5px}
  .hero-copy h1{
    margin:0 0 1.55cqw;
    font-size:clamp(49px,4.33cqw,72.5px);
    line-height:1.075;
    letter-spacing:-.058em;
    font-weight:800;
  }
  .hero-copy p{
    width:97%;
    max-width:none;
    margin:0 0 1.55cqw;
    font-size:clamp(11px,1.0cqw,16.7px);
    line-height:1.53;
    font-weight:500;
  }
  .hero-actions{gap:1.25cqw;margin:0 0 1.45cqw}
  .hero-actions .btn{
    min-height:0;
    height:3.35cqw;
    max-height:56px;
    padding:0 1.2cqw;
    border-radius:7px;
    gap:.9cqw;
    font-size:clamp(8px,.68cqw,11.4px);
  }

  .experience{
    width:99%;
    min-height:0;
    height:6.25cqw;
    max-height:105px;
    border-radius:11px;
    padding:.55cqw .95cqw;
    box-shadow:0 8px 30px rgba(28,38,61,.035);
  }
  .helmet{
    width:4.4cqw;
    height:4.1cqw;
    max-width:74px;
    max-height:68px;
    margin:0 1.05cqw 0 0;
    border:0;
    border-radius:0;
    padding:0;
  }
  .helmet img{width:100%;height:100%;object-fit:contain}
  .exp-main{
    min-width:14.4cqw;
    display:block;
    padding-right:1.35cqw;
    border-right:1px solid rgba(254,89,0,.45);
  }
  .exp-main strong{
    display:block;
    font-size:clamp(30px,2.9cqw,48px);
    line-height:.88;
    letter-spacing:-.045em;
  }
  .exp-main span{
    display:block;
    margin-top:.3cqw;
    font-size:clamp(8px,.72cqw,12px);
    letter-spacing:.005em;
  }
  .exp-note{
    padding-left:1.55cqw;
    font-size:clamp(7px,.63cqw,10.5px);
    line-height:1.4;
    color:#5f6673;
  }
  .hero-values{
    margin-top:1.35cqw;
    gap:1.2cqw;
    font-size:clamp(7px,.58cqw,9.7px);
    letter-spacing:.15em;
  }
  .hero-values span+span::before{margin-right:1.2cqw}

  .hero-badge{
    position:absolute;
    z-index:12;
    left:40.1%;
    top:58.2%;
    width:14.4%;
    aspect-ratio:1 / 1;
    pointer-events:none;
    line-height:0;
  }
  .hero-badge>img{display:block;width:100%;height:100%;object-fit:contain}
  .hero-badge-text{
    position:absolute;
    left:22%;
    top:35.5%;
    width:56%;
    transform:none;
    color:#fff;
    text-align:left;
    font-size:clamp(9px,.9cqw,15.2px);
    line-height:1.42;
    letter-spacing:.17em;
    font-weight:500;
    text-transform:uppercase;
  }
  .hero-badge-text span{
    display:block;
    width:2.05cqw;
    max-width:34px;
    height:2px;
    background:var(--orange);
    margin:.7cqw 0 0;
  }

  .hero-side-copy{
    position:absolute;
    z-index:11;
    color:var(--navy);
    font-weight:500;
    letter-spacing:.2em;
    line-height:1.75;
    font-size:clamp(9px,.89cqw,15px);
    pointer-events:none;
  }
  .hero-side-copy::before{
    content:'';
    position:absolute;
    left:-1.25cqw;
    top:-.55cqw;
    width:1px;
    height:calc(100% + 1.6cqw);
    background:var(--orange);
  }
  .hero-side-copy span{
    display:block;
    width:2.2cqw;
    max-width:36px;
    height:2px;
    background:var(--orange);
    margin-top:.55cqw;
  }
  .hero-side-top{right:6.55%;top:17.8%}
  .hero-side-bottom{right:3.25%;bottom:9.6%;color:#fff;text-shadow:0 1px 2px rgba(28,38,61,.12);line-height:1.82}
}

@media (max-width:820px){
  .hero-canvas{width:100%;max-width:none;aspect-ratio:auto;margin:0;background:none;overflow:visible;container-type:normal}
  .hero{
    min-height:auto;
    padding-bottom:0;
    background:var(--bg);
    aspect-ratio:auto;
    overflow:hidden;
  }
  .header{position:relative;height:76px;z-index:30}
  .header-inner{position:relative;width:calc(100% - 32px);height:100%;margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:center}
  .logo{position:static;width:auto}.logo img{width:140px}
  .quote-btn{position:static}
  .hero-copy{position:relative;left:auto;top:auto;width:calc(100% - 32px);max-width:620px;margin:0 auto;padding-top:36px;z-index:10}
  .hero-copy h1{font-size:42px;line-height:1.04}
  .hero-copy p{font-size:13px;line-height:1.6}
  .hero-actions{gap:10px;flex-wrap:wrap}
  .experience{width:100%;max-width:455px;height:auto;min-height:72px}
  .helmet{width:54px;height:46px;border:0;margin-right:12px}.helmet img{width:100%;height:100%;object-fit:contain}
  .exp-main{display:flex;min-width:0}.exp-main strong{display:block}.exp-main span{display:block}
  .hero-values{flex-wrap:wrap}
  .hero-badge,.hero-side-copy{display:none}
  .hero::after{
    content:'';
    display:block;
    position:relative;
    inset:auto;
    width:100%;
    height:330px;
    margin:24px 0 0;
    background-image:var(--cms-media-assets-hero-background-png,url('assets/hero-background.png'));
    background-repeat:no-repeat;
    background-size:135% auto;
    background-position:72% center;
    transform:none;
    pointer-events:none;
  }
}


/* ===== MOBILE V14 — compact integrated hero + CTA ordering ===== */
@media (max-width:820px){
  /* The people/house artwork is part of the hero background, not a separate block. */
  .hero{
    position:relative;
    overflow:hidden;
    background:var(--bg);
  }
  .hero-canvas{
    position:relative;
    z-index:2;
    padding-bottom:clamp(125px,32vw,220px);
    background:transparent;
  }
  .hero::after{
    content:'';
    position:absolute;
    z-index:1;
    right:clamp(-64px,-10vw,-28px);
    bottom:-6px;
    width:min(590px,88vw);
    height:clamp(280px,68vw,430px);
    margin:0;
    background-image:var(--cms-media-assets-hero-background-png,url('assets/hero-background.png'));
    background-repeat:no-repeat;
    background-size:172% auto;
    background-position:76% 54%;
    pointer-events:none;
    opacity:1;
  }
  .hero-copy{position:relative;z-index:3}

  /* Product master link belongs after the category cards on mobile. */
  .section-head .top-link{display:none}
  .products-all-mobile{
    display:inline-flex;
    width:max-content;
    margin-top:26px;
    padding-bottom:0;
  }

  /* About CTA belongs after the showroom visual on mobile. */
  .about-copy .btn{display:none}
  .about-more-mobile{
    display:inline-flex;
    width:max-content;
    justify-self:start;
    margin-top:18px;
  }
}

@media (max-width:520px){
  .hero-canvas{padding-bottom:145px}
  .hero::after{
    right:-48px;
    bottom:-2px;
    width:88vw;
    height:305px;
    background-size:174% auto;
    background-position:77% 55%;
  }
  .products-all-mobile{margin-top:24px}
  .about-more-mobile{margin-top:16px}
}


/* ===== MOBILE V15 — compact hero artwork + tighter about spacing ===== */
@media (max-width:820px){
  /* Keep the people/house artwork inside the hero as a background layer. */
  .hero{
    position:relative;
    overflow:hidden;
    background:var(--bg);
  }
  .hero-canvas{
    position:relative;
    z-index:2;
    padding-bottom:clamp(82px,18vw,125px);
  }
  .hero::after{
    content:'';
    position:absolute;
    z-index:1;
    top:clamp(285px,66vw,360px);
    right:clamp(-92px,-13vw,-42px);
    bottom:auto;
    width:clamp(300px,76vw,465px);
    height:clamp(315px,76vw,465px);
    margin:0;
    background-image:var(--cms-media-assets-hero-mobile-visual-png,url('assets/hero-mobile-visual.png'));
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    pointer-events:none;
    opacity:1;
  }
  .hero-copy{position:relative;z-index:3}

  /* Remove the oversized vertical gaps in the About section on mobile. */
  .about{
    min-height:0;
    padding:30px 0 48px;
  }
  .about-grid{
    grid-template-columns:1fr;
    gap:16px;
    align-items:start;
  }
  .about-copy .section-title{margin-bottom:18px}
  .about-copy p{margin-bottom:0}
  .about-visual{margin:0}
  .about-more-mobile{
    margin-top:2px;
  }
}

@media (max-width:520px){
  .hero-canvas{padding-bottom:92px}
  .hero::after{
    top:305px;
    right:-70px;
    width:335px;
    height:355px;
  }
  .about{
    padding:26px 0 42px;
  }
  .about-grid{gap:13px}
  .about-more-mobile{margin-top:3px}
}

/* ===== MOBILE V16 — hero visual is a true background, not a stacked photo ===== */
@media (max-width:820px){
  .hero{
    position:relative;
    overflow:hidden;
  }
  .hero-canvas{
    position:relative;
    z-index:2;
    padding-bottom:0;
  }
  .hero-copy{
    position:relative;
    z-index:3;
  }
  .hero::after{
    content:'';
    position:absolute;
    z-index:1;
    top:76px;
    right:-50vw;
    bottom:auto;
    width:98vw;
    height:auto;
    aspect-ratio:810 / 880;
    margin:0;
    background-image:var(--cms-media-assets-hero-mobile-shape-png,url('assets/hero-mobile-shape.png'));
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    pointer-events:none;
    opacity:1;
  }
}

@media (max-width:520px){
  .hero-canvas{padding-bottom:0}
  .hero::after{
    top:76px;
    right:-50vw;
    width:98vw;
    height:auto;
  }
}


/* ===== MOBILE V17 — remove hero artwork completely on phones ===== */
@media (max-width:820px){
  .hero::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }
  .hero-canvas{
    padding-bottom:0 !important;
  }
}

/* ===== MOBILE V18 — product master link as a real CTA button on phones ===== */
@media (max-width:520px){
  .products-all-mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    width:max-content;
    min-height:46px;
    margin-top:24px;
    padding:0 17px;
    border:1.5px solid var(--orange);
    border-radius:7px;
    background:transparent;
    color:var(--orange);
    font-size:10px;
    font-weight:700;
    letter-spacing:0;
    text-transform:uppercase;
    transition:background-color .2s ease,color .2s ease,transform .2s ease;
  }
  .products-all-mobile:hover,
  .products-all-mobile:focus-visible{
    background:var(--orange);
    color:#fff;
    transform:translateY(-1px);
  }
  .products-all-mobile svg{
    width:16px;
    height:16px;
  }
}

/* ===== V8 — richer button interactions ===== */
.btn{position:relative}
.btn,
.quote-btn{
  overflow:hidden;
  isolation:isolate;
  transform:translateZ(0);
  background-image:linear-gradient(110deg,transparent 0 37%,rgba(255,255,255,.22) 47%,transparent 57%);
  background-size:260% 100%;
  background-position:145% 0;
  transition:
    transform .32s cubic-bezier(.2,.75,.25,1),
    box-shadow .32s ease,
    background-position .6s cubic-bezier(.2,.75,.25,1),
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease;
  will-change:transform;
}

.btn svg,
.quote-btn svg{
  flex:0 0 auto;
  transform-origin:center;
  transition:transform .38s cubic-bezier(.2,.8,.25,1);
  will-change:transform;
}

@keyframes engButtonArrowKick{
  0%{transform:translateX(0) scale(1)}
  55%{transform:translateX(11px) scale(1.08)}
  78%{transform:translateX(7px) scale(1.04)}
  100%{transform:translateX(9px) scale(1.06)}
}

@media (hover:hover) and (pointer:fine){
  .btn:hover,
  .quote-btn:hover{
    transform:translateY(-4px) scale(1.025);
    background-position:-42% 0;
  }

  .btn-primary:hover,
  .quote-btn:hover{
    background-color:var(--orange);
    box-shadow:0 13px 28px rgba(254,89,0,.28),0 4px 10px rgba(28,38,61,.08);
  }

  .btn-outline:hover{
    background-color:var(--orange);
    color:#fff;
    border-color:var(--orange);
    box-shadow:0 11px 24px rgba(254,89,0,.22),0 4px 10px rgba(28,38,61,.07);
  }

  .btn:hover svg,
  .quote-btn:hover svg{
    animation:engButtonArrowKick .48s cubic-bezier(.2,.8,.25,1) both;
  }
}

.btn:active,
.quote-btn:active{
  transform:translateY(-1px) scale(.985);
  box-shadow:0 5px 12px rgba(28,38,61,.10);
  transition-duration:.1s;
}

.btn:focus-visible,
.quote-btn:focus-visible{
  outline:3px solid rgba(254,89,0,.24);
  outline-offset:4px;
}


/* ===== V9 — clearer interactive links + location cards; preserve header/logo layout ===== */

/* The logo remains the only home control in its area. Never style it as a button. */
.logo,
.logo:hover,
.logo:focus-visible{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
.logo img{transform:none !important}

/* Desktop hero header uses its original absolute quote-button placement. */
@media (min-width:821px){
  .hero-canvas .header .quote-btn{
    position:absolute;
    right:5.05%;
    top:2.65cqw;
  }
}

/* "Shiko të gjitha produktet" keeps the clean text-link look until it is hovered. */
.top-link{
  position:relative;
  isolation:isolate;
  cursor:pointer;
  border-radius:9px;
  padding:10px 12px 10px 14px;
  margin:-10px -12px -3px -14px;
  transition:
    color .28s ease,
    background-color .28s ease,
    box-shadow .3s ease,
    transform .3s cubic-bezier(.2,.8,.25,1);
}
.top-link svg{
  transition:transform .42s cubic-bezier(.2,.85,.25,1), color .25s ease;
}
.top-link::after{
  content:'';
  position:absolute;
  left:14px;
  right:46px;
  bottom:6px;
  height:1.5px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .34s cubic-bezier(.2,.8,.25,1);
  opacity:.9;
}
@keyframes engTextArrowKick{
  0%{transform:translateX(0)}
  55%{transform:translateX(13px)}
  78%{transform:translateX(8px)}
  100%{transform:translateX(11px)}
}
@media (hover:hover) and (pointer:fine){
  .top-link:hover{
    color:var(--orange);
    background:rgba(254,89,0,.055);
    box-shadow:0 8px 22px rgba(28,38,61,.07);
    transform:translateY(-2px);
  }
  .top-link:hover::after{transform:scaleX(1)}
  .top-link:hover svg{animation:engTextArrowKick .48s cubic-bezier(.2,.8,.25,1) both}
}
.top-link:active{transform:translateY(0) scale(.985)}
.top-link:focus-visible{outline:3px solid rgba(254,89,0,.2);outline-offset:3px}

/* Google Maps location cards: obvious interaction without changing the resting Figma design. */
.location-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:
    transform .34s cubic-bezier(.2,.8,.25,1),
    box-shadow .34s ease,
    background-color .28s ease,
    border-color .28s ease;
}
.location-card::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 0 42%,rgba(254,89,0,.07) 50%,transparent 58%);
  background-size:250% 100%;
  background-position:145% 0;
  transition:background-position .65s cubic-bezier(.2,.8,.25,1);
}
.location-thumb img{
  transition:transform .42s cubic-bezier(.2,.8,.25,1),filter .3s ease;
}
.loc-arrow{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  transition:
    transform .38s cubic-bezier(.2,.85,.25,1),
    background-color .28s ease,
    color .28s ease,
    box-shadow .28s ease;
}
@keyframes engLocationArrowKick{
  0%{transform:translateX(0)}
  55%{transform:translateX(9px)}
  78%{transform:translateX(5px)}
  100%{transform:translateX(7px)}
}
@media (hover:hover) and (pointer:fine){
  .location-card:hover{
    transform:translateX(7px) translateY(-2px);
    background:rgba(254,89,0,.025);
    border-color:#FE5900;
    box-shadow:0 14px 30px rgba(28,38,61,.11),0 3px 8px rgba(254,89,0,.07);
  }
  .location-card:hover::after{background-position:-45% 0}
  .location-card:hover .location-thumb img{transform:scale(1.07);filter:saturate(1.05)}
  .location-card:hover .loc-arrow{
    background:var(--orange);
    color:#fff;
    box-shadow:0 6px 15px rgba(254,89,0,.22);
    animation:engLocationArrowKick .48s cubic-bezier(.2,.8,.25,1) both;
  }
}
.location-card:active{transform:translateX(3px) scale(.992)}
.location-card:focus-visible{outline:3px solid rgba(254,89,0,.22);outline-offset:4px}



/* ===== V12 — Ballina mobile finishing adjustments ===== */
@media (max-width:520px){
  /* Keep the four hero values on one clean line. */
  .hero-values{
    display:flex;
    flex-wrap:nowrap !important;
    align-items:center;
    gap:10px;
    width:100%;
    white-space:nowrap;
    font-size:7.6px;
    letter-spacing:.11em;
  }
  .hero-values span{
    flex:0 0 auto;
  }
  .hero-values span+span::before{
    margin-right:10px;
  }

  /* Give the all-products CTA breathing room below the Ventilim card. */
  .products-all-mobile{
    margin-top:38px;
  }
}


/* ===== V13 — precise CTA alignment + immediate hover interactions ===== */

/* Do not gate hover feedback behind pointer media-query detection.
   This keeps interactions responsive immediately after page load in Safari/desktop browsers. */
.btn:hover,
.quote-btn:hover{
  transform:translateY(-4px) scale(1.025);
  background-position:-42% 0;
}
.btn-primary:hover,
.quote-btn:hover{
  background-color:var(--orange);
  box-shadow:0 13px 28px rgba(254,89,0,.28),0 4px 10px rgba(28,38,61,.08);
}
.btn-outline:hover{
  background-color:var(--orange);
  color:#fff;
  border-color:var(--orange);
  box-shadow:0 11px 24px rgba(254,89,0,.22),0 4px 10px rgba(28,38,61,.07);
}
.btn:hover svg,
.quote-btn:hover svg{
  animation:engButtonArrowKick .48s cubic-bezier(.2,.8,.25,1) both;
}
.top-link:hover{
  color:var(--orange);
  background:rgba(254,89,0,.055);
  box-shadow:0 8px 22px rgba(28,38,61,.07);
  transform:translateY(-2px);
}
.top-link:hover::after{transform:scaleX(1)}
.top-link:hover svg{animation:engTextArrowKick .48s cubic-bezier(.2,.8,.25,1) both}

@media (max-width:520px){
  /* Reset the negative margins inherited from .top-link so the button's
     outer border starts exactly on the same left edge as the product cards. */
  .products-all-mobile{
    margin:38px 0 0 0 !important;
  }
}

/* ===== V15 — shared desktop header/button sizing across every page ===== */
@media (min-width:821px){
  .nav{
    font-size:12px;
    font-weight:600;
    letter-spacing:.055em;
  }
  .quote-btn{
    min-width:158px;
    min-height:54px;
    padding:0 24px;
    font-size:11.5px;
    font-weight:700;
    gap:14px;
    justify-content:center;
  }
  .btn{
    min-height:54px;
    padding-left:22px;
    padding-right:22px;
    font-size:11.5px;
    font-weight:700;
    gap:14px;
  }
}


/* ===== V17 — one canonical header/footer + animated page navigation ===== */
/* All desktop pages use the Ballina header geometry. The active underline is a
   real shared indicator controlled by script.js, so it can glide from one
   page name to the next during navigation instead of reappearing abruptly. */
.nav{overflow:visible}
.nav a.active::after{display:none !important}
.nav-indicator{
  position:absolute;
  left:0;
  bottom:2px;
  height:2px;
  width:0;
  border-radius:999px;
  background:var(--orange);
  pointer-events:none;
  z-index:3;
  transform:translateX(0);
  transform-origin:left center;
  transition:
    transform .46s cubic-bezier(.22,.8,.24,1),
    width .46s cubic-bezier(.22,.8,.24,1),
    opacity .18s ease;
  box-shadow:0 1px 0 rgba(254,89,0,.08);
}

/* V19 — single-motion branded page sweep.
   The transition now behaves like one continuous panel travelling from left to
   right. There is no separate fade, no pause, and no second animation. The
   outgoing page moves the panel from off-screen-left to center; the incoming
   page continues that exact same motion from center to off-screen-right.
   Only transform is animated so Safari can keep it on the compositor. */
html::after{
  content:'';
  position:fixed;
  left:0;
  right:0;
  top:92px;
  bottom:0;
  z-index:24;
  pointer-events:none;
  background:
    linear-gradient(118deg,
      transparent 0 67%,
      rgba(254,89,0,.10) 67.15% 71.5%,
      rgba(254,89,0,.035) 71.65% 75%,
      rgba(28,38,61,.045) 75.15% 78.5%,
      transparent 78.65% 100%),
    var(--bg);
  transform:translate3d(-101%,0,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:paint;
}
html.eng-page-leaving::after{
  transform:translate3d(0,0,0);
  transition:transform .30s linear;
}
/* Added in <head> before the incoming page paints, keeping the sweep exactly at
   its halfway point while the document changes. */
html.eng-pre-enter::after,
html.eng-page-entering::after{
  transform:translate3d(0,0,0);
  transition:none;
}
html.eng-page-entering.eng-page-entering-active::after{
  transform:translate3d(101%,0,0);
  transition:transform .30s linear;
}

@media (max-width:820px){
  html::after{top:76px}
}

/* Same canonical header on currently scaffolded routes as well. */
.site-shell-header{
  position:relative;
  height:92px;
  background:var(--bg);
  z-index:30;
}
.site-shell-canvas{
  position:relative;
  width:min(100%,1440px);
  height:92px;
  margin:0 auto;
  container-type:inline-size;
}
.site-shell-canvas .header{height:92px}

/* Shell pages must use the normal shared header flow, not the homepage hero's
   absolute/cqw positioning. This keeps the logo fully inside the header bar. */
@media (min-width:821px){
  .site-shell-canvas .header{
    position:relative;
    inset:auto;
    display:flex;
    align-items:center;
  }
  .site-shell-canvas .header-inner{
    position:relative;
    display:grid;
    grid-template-columns:220px 1fr 220px;
    align-items:center;
    width:min(var(--max),calc(100% - 96px));
    height:100%;
    margin:0 auto;
  }
  .site-shell-canvas .logo{
    position:static;
    left:auto;
    top:auto;
    width:auto;
    min-width:0;
    max-width:none;
    line-height:0;
  }
  .site-shell-canvas .logo img{width:170px;height:auto}
  .site-shell-canvas .nav{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:42px;
    font-size:10px;
    font-weight:500;
    letter-spacing:.06em;
  }
  .site-shell-canvas .quote-btn{
    position:static;
    right:auto;
    top:auto;
    justify-self:end;
    height:auto;
    min-height:0;
    max-height:none;
    padding:15px 20px;
    font-size:10px;
    gap:12px;
  }
}
@media (min-width:821px) and (max-width:1100px){
  .site-shell-canvas .header-inner{
    grid-template-columns:170px 1fr 170px;
    width:calc(100% - 50px);
  }
  .site-shell-canvas .nav{gap:20px}
}
.shell-placeholder-main{min-height:calc(100vh - 92px)}

@media (max-width:820px){
  .nav-indicator{display:none !important}
  .site-shell-header{height:76px}
  .site-shell-canvas{width:100%;height:76px;container-type:normal}
  .site-shell-canvas .header{height:76px}
  .shell-placeholder-main{min-height:calc(100vh - 76px)}
}



/* ===== V20 — mobile menu current-page underline ===== */
/* Keep the full-width mobile tap targets, but underline only the page label. */
.nav a .nav-label{
  position:relative;
  display:inline-block;
}

@media (max-width:820px){
  .nav.mobile-open a.active .nav-label::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-7px;
    height:2px;
    border-radius:999px;
    background:var(--orange);
    transform-origin:left center;
    animation:engMobileActiveUnderline .28s cubic-bezier(.22,.8,.24,1) both;
  }
}

@keyframes engMobileActiveUnderline{
  from{transform:scaleX(0);opacity:.35}
  to{transform:scaleX(1);opacity:1}
}




/* ===== V11.5 - canonical Ballina-scale header on every non-hero page ===== */
/* Ballina/Per Ne keep their locked hero headers. All shell routes now use the
   same visual desktop scale: taller white bar, larger ENG House logo, and the
   same nav / quote-button proportions. Mobile remains the existing 76px bar. */
@media (min-width:1101px){
  .site-shell-header,
  .site-shell-canvas,
  .site-shell-canvas .header{
    height:clamp(96px,7.42vw,107px);
  }
  .site-shell-canvas .header-inner{
    width:100%;
    max-width:none;
    height:100%;
    margin:0;
    padding:0 5.05%;
    grid-template-columns:220px minmax(0,1fr) 220px;
  }
  .site-shell-canvas .logo img{
    width:clamp(180px,13cqw,187px);
    max-width:none;
  }
  .site-shell-canvas .nav{
    gap:clamp(32px,3.05cqw,44px);
    font-size:12px;
    font-weight:600;
    letter-spacing:.055em;
  }
  .site-shell-canvas .quote-btn{
    min-width:158px;
    min-height:54px;
    padding:0 24px;
    font-size:11.5px;
    gap:14px;
  }
  .shell-placeholder-main{min-height:calc(100vh - clamp(96px,7.42vw,107px))}
}

/* V13 flexible CMS additions */
.partner-item>a{display:grid;place-items:center;width:100%;height:100%}.partner-name-fallback{font-weight:800;color:#1c263d;text-align:center;font-size:14px}
.cms-custom-block{padding:46px 0;background:#fefcf6;opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}.cms-custom-block.is-ready{opacity:1;transform:none}.cms-custom-block-inner{display:grid;gap:28px;align-items:center}.cms-custom-block-inner.has-media{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.cms-custom-media{min-width:0}.cms-custom-media img{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:18px}.cms-custom-copy{min-width:0}.cms-custom-copy h2{margin:10px 0 14px;font-size:clamp(30px,3.4vw,48px);line-height:1.06}.cms-custom-copy p{white-space:pre-line;margin:0 0 20px;max-width:760px;line-height:1.65}.cms-custom-btn{margin-top:4px}.cms-media-removed{display:none!important}
@media(max-width:820px){.cms-custom-block{padding:34px 0}.cms-custom-block-inner.has-media{grid-template-columns:1fr}.cms-custom-media img{max-height:380px}.cms-custom-copy h2{font-size:32px}}

/* V15 — images added from Admin > Photos & graphics > page > section */
.cms-section-media-zone{width:min(1320px,calc(100% - 48px));margin:28px auto 0;position:relative;z-index:3}.cms-section-media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;align-items:stretch}.cms-section-media-item{margin:0;min-width:0;border-radius:18px;overflow:hidden;background:#f6f6f3;box-shadow:0 10px 30px rgba(28,38,61,.08);aspect-ratio:4/3}.cms-section-media-item img{display:block;width:100%;height:100%;object-fit:cover}.cms-added-team-member{min-width:0}.cms-added-team-photo{overflow:hidden}.cms-added-team-photo img{display:block;width:100%;height:100%;object-fit:cover}.footer>.cms-section-media-zone{margin-top:26px;margin-bottom:0}.hero+.cms-section-media-zone,.pn-hero+.cms-section-media-zone,.catalog-hero+.cms-section-media-zone,.contact-hero+.cms-section-media-zone,.quote-hero+.cms-section-media-zone,.locations-page-hero+.cms-section-media-zone,.services-hero+.cms-section-media-zone,.services-cta+.cms-section-media-zone,.catalog-help+.cms-section-media-zone{margin-top:30px;margin-bottom:30px}
@media(max-width:760px){.cms-section-media-zone{width:min(100% - 28px,1320px);margin-top:20px}.cms-section-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cms-section-media-item{border-radius:13px}}
@media(max-width:430px){.cms-section-media-grid{grid-template-columns:1fr}}
.cms-added-team-member .member-photo{margin-bottom:0}

/* V16 dynamic team collections */
.team-grid[data-cms-dynamic-team="1"]{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cms-team-member{min-width:0}
@media(max-width:560px){.team-grid[data-cms-dynamic-team="1"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.team-grid[data-cms-dynamic-team="1"]{grid-template-columns:1fr}}

/* ===== V28.10 — device-aware Ballina product card covers ===== */
.card-media .home-card-picture{display:block;width:100%;height:100%}
.card-media .home-card-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* ===== END V28.10 ===== */

/* ===== V28.11 — Projects-style Ballina product showcase ===== */
#produktet-tona.products{padding:72px 0 96px;min-height:0}
#produktet-tona .section-head{margin-bottom:36px}
#produktet-tona .product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;align-items:stretch}
#produktet-tona .card{
  position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:#1C263D;border-radius:10px;overflow:hidden;
  border:1px solid rgba(28,38,61,.055);box-shadow:0 4px 16px rgba(28,38,61,.055);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),border-color .35s ease;
}
#produktet-tona .card::before{content:'';position:absolute;z-index:5;left:0;right:0;top:0;height:3px;background:#FE5900;transform:scaleX(0);transform-origin:left center;transition:transform .48s cubic-bezier(.16,1,.3,1);pointer-events:none}
#produktet-tona .card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(28,38,61,.14);border-color:rgba(254,89,0,.18)}
#produktet-tona .card:hover::before{transform:scaleX(1)}
#produktet-tona .card-media{position:relative;display:block;width:100%;height:auto;aspect-ratio:2/1;overflow:hidden;background:#eceef1}
#produktet-tona .card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;filter:none;transition:transform .65s cubic-bezier(.16,1,.3,1)}
#produktet-tona .card:hover .card-media img{transform:scale(1.025)}
#produktet-tona .card-bottom{position:relative;display:block;min-height:112px;padding:16px 72px 15px 15px;background:#1C263D;color:#fff}
#produktet-tona .card-bottom h3{margin:0 0 8px;color:#fff;font-size:17px;font-weight:700;line-height:1.18;letter-spacing:-.025em;text-transform:none}
#produktet-tona .card-bottom p{margin:0;max-width:none;color:#fff;font-size:10.5px;font-weight:500;line-height:1.38}
#produktet-tona .card-arrow{position:absolute;isolation:isolate;right:14px;bottom:14px;display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:#FE5900;color:#fff;overflow:hidden;box-shadow:0 7px 16px rgba(254,89,0,.20);transition:transform .48s cubic-bezier(.16,1,.3,1),box-shadow .48s ease}
#produktet-tona .card-arrow::before{content:'';position:absolute;z-index:-1;top:-45%;bottom:-45%;left:-62%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);transform:translateX(-230%) rotate(14deg);opacity:0;transition:transform .82s cubic-bezier(.16,1,.3,1),opacity .2s ease}
#produktet-tona .card-arrow svg{width:19px;height:19px;transition:transform .58s cubic-bezier(.16,1,.3,1)}
#produktet-tona .card:hover .card-arrow{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 26px rgba(254,89,0,.30)}
#produktet-tona .card:hover .card-arrow::before{opacity:1;transform:translateX(650%) rotate(14deg)}
#produktet-tona .card:hover .card-arrow svg{transform:translateX(4px)}
#produktet-tona .card[data-show-arrow="false"] .card-arrow{display:none}
#produktet-tona .card[data-show-arrow="false"] .card-bottom{padding-right:15px}
#produktet-tona .home-products-more-wrap{display:flex;justify-content:center;padding-top:34px}
#produktet-tona .home-products-more-wrap[hidden]{display:none!important}
#produktet-tona .home-products-more{min-width:190px;justify-content:center;background:#FE5900!important;color:#fff!important;border-color:#FE5900!important}
#produktet-tona .home-products-more:hover{background:#E84F00!important;border-color:#E84F00!important}
#produktet-tona .product-grid > .card[hidden]{display:none!important}

@media(max-width:1100px){
  #produktet-tona .product-grid{gap:24px}
}
@media(max-width:820px){
  #produktet-tona.products{padding-top:62px;padding-bottom:82px}
  #produktet-tona .section-head{margin-bottom:30px}
  #produktet-tona .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  #produktet-tona .card-media{aspect-ratio:2/1}
  #produktet-tona .card-bottom{min-height:110px}
}
@media(max-width:560px){
  #produktet-tona .product-grid{grid-template-columns:1fr;gap:18px}
  #produktet-tona .card-media{aspect-ratio:2/1}
  #produktet-tona .card-bottom{min-height:106px;padding:14px 66px 14px 14px}
  #produktet-tona .card-bottom h3{font-size:16px}
  #produktet-tona .card-bottom p{font-size:10.5px}
  #produktet-tona .card-arrow{width:40px;height:40px;right:14px;bottom:14px}
  #produktet-tona .home-products-more-wrap{padding-top:28px}
}
@media(prefers-reduced-motion:reduce){
  #produktet-tona .card,#produktet-tona .card-media img,#produktet-tona .card-arrow,#produktet-tona .card-arrow svg{transition:none!important;animation:none!important}
}
/* ===== END V28.11 ===== */

/* ===== V28.12 — remove Ballina product card stroke ===== */
#produktet-tona .card{
  border:none !important;
}
#produktet-tona .card:hover{
  border-color:transparent !important;
}
/* ===== END V28.12 ===== */

/* ===== V28.13 — dynamic homepage product cards ===== */
#produktet-tona .card{border:none!important}
#produktet-tona .card:hover{border-color:transparent!important}
#produktet-tona .home-product-image-placeholder{display:grid;place-items:center;width:100%;height:100%;background:#f3f1eb;color:#1C263D;font-size:22px;font-weight:800}
/* ===== END V28.13 ===== */

/* ===== V28.16 — restore navy Ballina product card base ===== */
#produktet-tona .card,
#produktet-tona .card-bottom{
  background:#1C263D !important;
}
#produktet-tona .card-bottom{
  color:#FFFFFF !important;
}
#produktet-tona .card-bottom h3,
#produktet-tona .card-bottom p{
  color:#FFFFFF !important;
}
/* ===== END V28.16 ===== */

/* ===== V28.17 — tablet all-products CTA matches phone button ===== */
/* Phones already use this button treatment. Extend the SAME treatment through
   the tablet/iPad breakpoint, while leaving desktop (821px+) untouched. */
@media (max-width:820px){
  #produktet-tona .products-all-mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    width:max-content;
    min-height:46px;
    margin:38px 0 0 0 !important;
    padding:0 17px;
    border:1.5px solid #FE5900;
    border-radius:7px;
    background:transparent;
    color:#FE5900;
    font-size:10px;
    font-weight:700;
    letter-spacing:0;
    text-transform:uppercase;
    transition:background-color .2s ease,color .2s ease,transform .2s ease;
  }
  #produktet-tona .products-all-mobile:hover,
  #produktet-tona .products-all-mobile:focus-visible{
    background:#FE5900;
    color:#FFFFFF;
    transform:translateY(-1px);
  }
  #produktet-tona .products-all-mobile svg{
    width:16px;
    height:16px;
  }
}
/* ===== END V28.17 ===== */