@font-face{font-family:"Zumi Poppins";src:url("/cf-fonts/s/poppins/5.2.7/latin/400/normal.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap} @font-face{font-family:"Zumi Poppins";src:url("/cf-fonts/s/poppins/5.2.7/latin/500/normal.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap} @font-face{font-family:"Zumi Poppins";src:url("/cf-fonts/s/poppins/5.2.7/latin/600/normal.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap} @font-face{font-family:"Zumi Poppins";src:url("/cf-fonts/s/poppins/5.2.7/latin/700/normal.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap} #zumi-native-about,#zumi-native-about *{box-sizing:border-box} #zumi-native-about{--zna-orange:#E85E2A;--zna-orange-deep:#E85E2A;--zna-gold:#E2A428;--zna-ink:#171717;--zna-muted:#68635F;--zna-line:#E9E4E0;--zna-cream:#F7F2EE;--zna-warm:#EFE4DC;--zna-dark:#171311;--zna-radius:clamp(15px,1.1vw,22px);--zna-shadow:0 18px 55px rgba(32,20,13,.08);width:100%;margin:0;padding:0;overflow-x:hidden;background:#fff;color:var(--zna-ink);font-family:"Roboto", Arial, Helvetica, sans-serif} #zumi-native-about img,#zumi-native-about svg{display:block} #zumi-native-about svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} #zumi-native-about .zna-shell{width:100%;max-width:2200px;margin:0 auto;padding:15px 0} #zumi-native-about .zna-page{width:100%;display:grid;gap:clamp(12px,1.05vw,20px)} #zumi-native-about .zna-hero,#zumi-native-about .zna-section,#zumi-native-about .zna-experience,#zumi-native-about .zna-contact{margin:0 15px} #zumi-native-about h1,#zumi-native-about h2,#zumi-native-about h3,#zumi-native-about p,#zumi-native-about figure,#zumi-native-about blockquote{margin-top:0} #zumi-native-about .zna-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--zna-orange);font-size:clamp(11px,.74vw,14px);font-weight:700;line-height:1;letter-spacing:.12em;text-transform:uppercase} #zumi-native-about .zna-eyebrow::before{content:"";width:24px;height:2px;border-radius:999px;background:currentColor} #zumi-native-about .zna-eyebrow--light{color:#F1C7A4} /* HERO */ #zumi-native-about .zna-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(330px,.68fr);align-items:end;min-height:clamp(500px,37vw,720px);overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:linear-gradient(90deg,rgba(18,13,11,.90) 0%,rgba(18,13,11,.70) 38%,rgba(18,13,11,.36) 70%,rgba(18,13,11,.17) 100%),linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.12) 56%,rgba(0,0,0,.45) 100%),url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hero-banner-about-us-compressed.webp") center 48% / cover no-repeat;box-shadow:0 20px 60px rgba(32,20,13,.11)} #zumi-native-about .zna-hero::after{content:"";position:absolute;z-index:0;right:-7%;bottom:-48%;width:min(700px,44vw);aspect-ratio:1;border:1px solid rgba(232,94,42,.27);border-radius:50%;box-shadow:0 0 0 42px rgba(232,94,42,.07),0 0 0 84px rgba(232,94,42,.04);pointer-events:none} #zumi-native-about .zna-hero>*{position:relative;z-index:1} #zumi-native-about .zna-hero__copy{align-self:center;padding:clamp(42px,4.2vw,88px)} #zumi-native-about .zna-hero h1{max-width:1040px;margin:0;color:#fff;font-size:clamp(46px,5vw,100px);font-weight:700;line-height:.98;letter-spacing:-.055em;text-wrap:balance;text-shadow:0 8px 32px rgba(0,0,0,.30)} #zumi-native-about .zna-hero__copy>p{max-width:900px;margin:clamp(20px,1.7vw,32px) 0 0;color:rgba(255,255,255,.91);font-size:clamp(16px,1.08vw,22px);line-height:1.65;text-shadow:0 2px 14px rgba(0,0,0,.20)} #zumi-native-about .zna-pill-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(24px,2vw,38px)} #zumi-native-about .zna-pill{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 13px;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:rgba(20,15,13,.42);color:#fff;font-size:12.5px;font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} #zumi-native-about .zna-pill svg{color:#FF8B4C;font-size:15px} #zumi-native-about .zna-hero-card{align-self:end;margin:clamp(18px,1.5vw,28px);margin-left:0;padding:clamp(24px,2.2vw,38px);border:1px solid rgba(255,255,255,.72);border-radius:4px;background:rgba(255,255,255,.91);box-shadow:0 22px 54px rgba(0,0,0,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} #zumi-native-about .zna-hero-card__icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:4px;background:rgba(232,94,42,.12);color:var(--zna-orange);font-size:24px} #zumi-native-about .zna-hero-card__kicker{margin-bottom:9px;color:#766B64;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} #zumi-native-about .zna-hero-card>strong{display:block;color:#231D1A;font-size:clamp(24px,1.8vw,36px);line-height:1.08;letter-spacing:-.035em} #zumi-native-about .zna-hero-card>p{margin:16px 0 0;color:#665D58;font-family:"Roboto", Arial, Helvetica, sans-serif;font-size:14px;line-height:1.62} /* COMMON SECTIONS */ #zumi-native-about .zna-section{padding:clamp(38px,3.4vw,68px);border:1px solid #EEE9E5;border-radius:4px;background:#fff} #zumi-native-about .zna-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.65fr);gap:clamp(28px,4vw,80px);align-items:end;margin-bottom:clamp(26px,2.5vw,48px)} #zumi-native-about .zna-section-head h2,#zumi-native-about .zna-experience h2,#zumi-native-about .zna-contact h2{margin:0;color:var(--zna-ink);font-size:clamp(32px,3vw,60px);font-weight:700;line-height:1.02;letter-spacing:-.045em;text-wrap:balance} #zumi-native-about .zna-section-head>p{margin:0;color:var(--zna-muted);font-size:clamp(15px,.95vw,18px);line-height:1.65} #zumi-native-about .zna-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #zumi-native-about .zna-value{min-height:205px;padding:24px;border:1px solid var(--zna-line);border-radius:4px;background:linear-gradient(180deg,#fff 0%,#FCFAF8 100%)} #zumi-native-about .zna-icon-badge{display:grid;place-items:center;width:42px;height:42px;margin-bottom:20px;border-radius:4px;background:rgba(232,94,42,.10);color:var(--zna-orange);font-size:21px} #zumi-native-about .zna-value h3{margin:0 0 10px;color:#282321;font-size:18px;line-height:1.2} #zumi-native-about .zna-value p{margin:0;color:var(--zna-muted);font-family:"Roboto", Arial, Helvetica, sans-serif;font-size:14px;line-height:1.62} /* TEAM */ #zumi-native-about .zna-leadership{background:var(--zna-cream)} #zumi-native-about .zna-lead-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} #zumi-native-about .zna-support-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);gap:14px;align-items:stretch;justify-content:start;width:100%;max-width:1450px;margin:0} #zumi-native-about .zna-support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;align-content:stretch;gap:14px;width:100%;max-width:none;margin:0} #zumi-native-about .zna-person{overflow:hidden;border:1px solid var(--zna-line);border-radius:4px;background:#fff;box-shadow:0 14px 38px rgba(30,19,13,.045)} #zumi-native-about .zna-person__media{position:relative;overflow:hidden;background:#E7E1DC} #zumi-native-about .zna-person__media img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .28s ease} #zumi-native-about .zna-person:hover .zna-person__media img{transform:scale(1.012)} #zumi-native-about .zna-person--lead{display:grid;grid-template-columns:minmax(210px,.84fr) minmax(0,1.16fr);min-height:380px} #zumi-native-about .zna-person--lead .zna-person__media{min-height:380px} /* Compact support tiles: smaller cards on the left, with source images always shown in full. */ #zumi-native-about .zna-support{padding-top:clamp(30px,2.6vw,48px);padding-bottom:clamp(30px,2.6vw,48px)} #zumi-native-about .zna-support .zna-section-head{margin-bottom:26px} #zumi-native-about .zna-support .zna-section-head h2{font-size:clamp(30px,2.55vw,50px)} #zumi-native-about .zna-person--support{display:grid;grid-template-rows:auto 1fr;width:100%;max-width:none;height:100%;align-self:stretch} #zumi-native-about .zna-person--support .zna-person__media{width:100%;height:auto!important;min-height:0!important;aspect-ratio:1/1!important;display:block;padding:0;background:#EEE9E5;overflow:hidden;line-height:0} #zumi-native-about .zna-person--support .zna-person__media img{position:static!important;display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important} #zumi-native-about .zna-person--support:hover .zna-person__media img{transform:none} #zumi-native-about .zna-support-blob{position:relative;isolation:isolate;overflow:hidden;align-self:stretch;min-width:0;min-height:100%;padding:clamp(24px,1.7vw,30px);border:1px solid #E8DDD4;border-radius:4px;background:linear-gradient(145deg,#FAF4EF 0%,#F3E5DB 100%);box-shadow:0 18px 46px rgba(64,38,24,.07)} #zumi-native-about .zna-support-blob::after{content:"";position:absolute;z-index:-1;right:-105px;bottom:-115px;width:260px;aspect-ratio:1;border-radius:50%;background:rgba(232,94,42,.09);box-shadow:0 0 0 28px rgba(232,94,42,.04)} #zumi-native-about .zna-support-blob__eyebrow{margin-bottom:9px;color:var(--zna-orange);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} #zumi-native-about .zna-support-blob h3{max-width:520px;margin:0;color:#211D1A;font-size:clamp(23px,1.45vw,30px);line-height:1.06;letter-spacing:-.035em} #zumi-native-about .zna-support-blob>p{max-width:560px;margin:11px 0 0;color:#675E58;font-family:"Roboto", Arial, Helvetica, sans-serif;font-size:13.5px;line-height:1.58} #zumi-native-about .zna-support-blob__points{display:grid;gap:8px;margin-top:16px} #zumi-native-about .zna-support-blob__point{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;padding:9px 11px;border:1px solid rgba(117,78,54,.10);border-radius:4px;background:rgba(255,255,255,.62)} #zumi-native-about .zna-support-blob__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:4px;background:rgba(232,94,42,.11);color:var(--zna-orange);font-size:18px} #zumi-native-about .zna-support-blob__point strong{display:block;color:#302925;font-size:12.5px;line-height:1.25} #zumi-native-about .zna-support-blob__point small{display:block;margin-top:3px;color:#716862;font-family:"Roboto", Arial, Helvetica, sans-serif;font-size:11.5px;line-height:1.45} #zumi-native-about .zna-person__badge{position:absolute;left:16px;bottom:16px;padding:7px 10px;border-radius:4px;background:var(--zna-orange);color:#fff;font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;box-shadow:0 7px 20px rgba(72,35,14,.24)} #zumi-native-about .zna-person__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,2.2vw,36px)} #zumi-native-about .zna-person--support .zna-person__body{justify-content:flex-start;padding:13px 14px 15px} #zumi-native-about .zna-person h3{margin:0;color:#211D1A;font-size:clamp(25px,1.8vw,36px);line-height:1;letter-spacing:-.035em} #zumi-native-about .zna-person--support h3{font-size:19px} #zumi-native-about .zna-person__role{margin-top:8px;color:var(--zna-orange);font-size:11.5px;font-weight:700;line-height:1.4;letter-spacing:.03em;text-transform:uppercase} #zumi-native-about .zna-person p{margin:12px 0 0;color:#655E59;font-family:"Roboto", Arial, Helvetica, sans-serif;font-size:14px;line-height:1.55} #zumi-native-about .zna-person--support p{font-size:11.8px;line-height:1.48} /* EXPERIENCE / TESTIMONIALS */ #zumi-native-about .zna-experience{position:relative;overflow:hidden;padding:clamp(30px,2.6vw,48px);border-radius:4px;background:var(--zna-dark);color:#fff} #zumi-native-about .zna-experience::after{content:"";position:absolute;right:-12%;top:-55%;width:580px;aspect-ratio:1;border:1px solid rgba(232,94,42,.18);border-radius:50%;box-shadow:0 0 0 48px rgba(232,94,42,.045),0 0 0 96px rgba(232,94,42,.025);pointer-events:none} #zumi-native-about .zna-experience__head{position:relative;z-index:1;max-width:980px;margin-bottom:clamp(22px,2vw,34px)} #zumi-native-about .zna-experience h2{color:#fff} #zumi-native-about .zna-experience__head>p{max-width:720px;margin:13px 0 0;color:rgba(255,255,255,.65);font-size:clamp(14px,.9vw,17px);line-height:1.55} #zumi-native-about .zna-experience__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:12px;max-width:1500px;margin:0 auto} /* Three equal testimonial tiles. Every source image is contained rather than cropped. */ #zumi-native-about .zna-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:10px;height:auto;min-height:0} #zumi-native-about .zna-photo{display:grid;place-items:center;height:clamp(185px,14vw,260px);margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:#28201C} #zumi-native-about .zna-photo--1{grid-row:auto} #zumi-native-about .zna-photo img{position:static!important;display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center center!important} /* Review becomes a compact horizontal card beneath the photos. */ #zumi-native-about .zna-review{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;margin:0;padding:18px 22px;border:1px solid rgba(255,255,255,.14);border-radius:4px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} #zumi-native-about .zna-review__top{display:flex;gap:14px;align-items:center} #zumi-native-about .zna-review__quote-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:4px;background:rgba(232,94,42,.14);color:#FF8B4C;font-size:21px} #zumi-native-about .zna-stars{color:#F3B535;font-size:16px;letter-spacing:.10em;line-height:1} #zumi-native-about .zna-review__label{margin-top:7px;color:rgba(255,255,255,.62);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase} #zumi-native-about .zna-review>p{margin:0;color:#fff;font-size:clamp(15px,.96vw,18px);font-weight:500;line-height:1.5;letter-spacing:-.012em} #zumi-native-about .zna-review footer{min-width:180px;padding:2px 0 2px 20px;border-top:0;border-left:1px solid rgba(255,255,255,.12)} #zumi-native-about .zna-review footer strong{display:block;color:#fff;font-size:14px} #zumi-native-about .zna-review footer span{display:block;margin-top:4px;color:rgba(255,255,255,.58);font-size:11.5px;line-height:1.45} /* CTA */ #zumi-native-about .zna-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,80px);align-items:center;padding:clamp(30px,3.2vw,58px);border-radius:4px;background:linear-gradient(120deg,#241A16,#15110F);color:#fff} #zumi-native-about .zna-contact h2{max-width:950px;color:#fff} #zumi-native-about .zna-contact__copy>p{max-width:850px;margin:16px 0 0;color:rgba(255,255,255,.64);font-size:clamp(14px,.95vw,18px);line-height:1.65} #zumi-native-about .zna-contact__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,440px)} #zumi-native-about .zna-btn{display:grid;grid-template-columns:22px minmax(0,auto);justify-content:start;align-items:center;gap:10px;min-height:48px;padding:11px 15px;border:1px solid transparent;border-radius:4px;text-decoration:none!important;font-size:13px;font-weight:700;line-height:1.2;transform:none!important;transition:background-color .14s ease,border-color .14s ease,color .14s ease} #zumi-native-about .zna-btn>span:first-child{font-size:20px} #zumi-native-about .zna-btn--primary{background:#E85E2A !important;color:#fff!important} #zumi-native-about .zna-btn--primary:hover,#zumi-native-about .zna-btn--primary:focus-visible{background:#E85E2A !important;color:#fff!important} #zumi-native-about .zna-btn--ghost{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff!important} #zumi-native-about .zna-btn--ghost:hover,#zumi-native-about .zna-btn--ghost:focus-visible{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.11);color:#fff!important} body.zumi-native-about-active .entry-header,body.zumi-native-about-active .page-header{display:none!important} body.zumi-native-about-active .site-main,body.zumi-native-about-active .content-area,body.zumi-native-about-active .entry-content{max-width:none!important;width:100%!important;margin:0!important;padding-left:0!important;padding-right:0!important} @media(max-width:1250px){ #zumi-native-about .zna-person--lead{grid-template-columns:1fr;min-height:0} #zumi-native-about .zna-person--lead .zna-person__media{min-height:0;aspect-ratio:1.18/1} #zumi-native-about .zna-person--lead .zna-person__body{justify-content:flex-start} } @media(max-width:980px){ #zumi-native-about .zna-hero{grid-template-columns:1fr;align-items:end;background:linear-gradient(180deg,rgba(18,13,11,.72) 0%,rgba(18,13,11,.51) 48%,rgba(18,13,11,.76) 100%),url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hero-banner-about-us-compressed.webp") center center/cover no-repeat} #zumi-native-about .zna-hero__copy{padding:42px 34px 24px} #zumi-native-about .zna-hero-card{margin:0 34px 34px} #zumi-native-about .zna-section-head{grid-template-columns:1fr;gap:14px} #zumi-native-about .zna-values{grid-template-columns:1fr} #zumi-native-about .zna-support-layout{grid-template-columns:1fr;gap:20px;max-width:none} #zumi-native-about .zna-support-grid{grid-template-columns:repeat(3,minmax(0,205px));justify-content:start;gap:18px;max-width:651px} #zumi-native-about .zna-support-blob{min-height:0} #zumi-native-about .zna-experience__grid{grid-template-columns:1fr} #zumi-native-about .zna-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));height:auto;min-height:0} #zumi-native-about .zna-photo{height:clamp(160px,20vw,210px)} #zumi-native-about .zna-review{grid-template-columns:auto minmax(0,1fr);gap:16px} #zumi-native-about .zna-review footer{grid-column:2;padding:10px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.12);min-width:0} #zumi-native-about .zna-contact{grid-template-columns:1fr} #zumi-native-about .zna-contact__actions{justify-self:start} } @media(max-width:760px){ #zumi-native-about .zna-shell{padding:12px 0} #zumi-native-about .zna-page{gap:12px} #zumi-native-about .zna-hero,#zumi-native-about .zna-section,#zumi-native-about .zna-experience,#zumi-native-about .zna-contact{margin:0 12px} #zumi-native-about .zna-hero{min-height:0;border-radius:4px} #zumi-native-about .zna-hero__copy{padding:34px 22px 21px} #zumi-native-about .zna-hero h1{font-size:clamp(38px,11vw,56px)} #zumi-native-about .zna-hero__copy>p{font-size:15px;line-height:1.6} #zumi-native-about .zna-pill{min-height:34px;padding:7px 10px;font-size:11px} #zumi-native-about .zna-hero-card{margin:0 22px 22px;padding:22px} #zumi-native-about .zna-section,#zumi-native-about .zna-experience,#zumi-native-about .zna-contact{padding:26px 20px;border-radius:4px} #zumi-native-about .zna-section-head{margin-bottom:23px} #zumi-native-about .zna-section-head h2,#zumi-native-about .zna-experience h2,#zumi-native-about .zna-contact h2{font-size:clamp(30px,9vw,44px)} #zumi-native-about .zna-lead-grid{grid-template-columns:1fr} #zumi-native-about .zna-support-grid{grid-template-columns:repeat(2,minmax(0,205px));justify-content:start} #zumi-native-about .zna-person--lead{grid-template-columns:1fr} #zumi-native-about .zna-person--lead .zna-person__media{aspect-ratio:1.08/1} #zumi-native-about .zna-support-grid{max-width:428px;gap:18px} #zumi-native-about .zna-person--support{max-width:205px;height:auto} #zumi-native-about .zna-person--support .zna-person__media{height:auto!important;aspect-ratio:1/1!important;padding:0} #zumi-native-about .zna-person__body{padding:22px} #zumi-native-about .zna-person--support .zna-person__body{padding:13px 14px 15px} #zumi-native-about .zna-person p{font-size:13.5px} #zumi-native-about .zna-photo-grid{grid-template-columns:1fr;grid-template-rows:none;height:auto;min-height:0} #zumi-native-about .zna-photo{height:190px} #zumi-native-about .zna-photo--1{grid-row:auto;grid-column:auto} #zumi-native-about .zna-review{grid-template-columns:1fr;padding:18px;gap:14px} #zumi-native-about .zna-review>p{font-size:16px;margin:0} #zumi-native-about .zna-review footer{grid-column:auto;padding:12px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.12)} #zumi-native-about .zna-contact__actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%} #zumi-native-about .zna-btn{min-height:44px;padding:9px 11px;font-size:11px;gap:7px} } @media(max-width:560px){ #zumi-native-about .zna-support-grid{grid-template-columns:1fr;max-width:240px;gap:20px} #zumi-native-about .zna-person--support{max-width:240px;height:auto} #zumi-native-about .zna-support-blob{padding:22px;border-radius:4px} } @media(max-width:430px){ #zumi-native-about .zna-contact__actions{grid-template-columns:1fr} #zumi-native-about .zna-photo-grid{grid-template-columns:1fr;height:auto} #zumi-native-about .zna-photo{height:175px} } @media(prefers-reduced-motion:reduce){#zumi-native-about .zna-person__media img{transition:none}} /* ============================================================ v1.0.9 — natural testimonial frames, stronger review, native CTA icons, and a lighter/smaller hero glass card. ============================================================ */ /* Smaller, more transparent "Our approach" glass panel. */ @media (min-width: 981px) { #zumi-native-about .zna-hero { grid-template-columns: minmax(0, 1fr) minmax(290px, 410px); } #zumi-native-about .zna-hero-card { width: min(100%, 390px); max-width: 390px; justify-self: end; margin: clamp(16px, 1.25vw, 24px); margin-left: 0; padding: clamp(18px, 1.45vw, 26px); border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.66); box-shadow: 0 16px 42px rgba(0,0,0,.16); backdrop-filter: blur(18px) saturate(118%); -webkit-backdrop-filter: blur(18px) saturate(118%); } #zumi-native-about .zna-hero-card__icon { width: 40px; height: 40px; margin-bottom: 15px; border-radius: 4px; background: rgba(232,94,42,.10); font-size: 20px; } #zumi-native-about .zna-hero-card__kicker { margin-bottom: 7px; font-size: 10px; } #zumi-native-about .zna-hero-card>strong { font-size: clamp(22px, 1.4vw, 29px); line-height: 1.1; } #zumi-native-about .zna-hero-card>p { margin-top: 11px; font-size: 13px; line-height: 1.52; } } /* Testimonial frames follow the source image itself: no fixed-height wrapper, no contain-letterboxing and therefore no empty bars. */ #zumi-native-about .zna-photo-grid { align-items: start; } #zumi-native-about .zna-photo { display: block !important; width: 100%; height: auto !important; min-height: 0 !important; margin: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: transparent !important; line-height: 0; } #zumi-native-about .zna-photo img { position: static !important; display: block !important; width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: none !important; object-fit: unset !important; object-position: center center !important; } /* Make Jerome's review easier to notice without turning it into a huge quote. */ #zumi-native-about .zna-review { padding: 19px 23px; } #zumi-native-about .zna-review>p { font-size: clamp(17px, 1.12vw, 21px); font-weight: 600; line-height: 1.45; letter-spacing: -.018em; } #zumi-native-about .zna-review__quote-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 22px; } #zumi-native-about .zna-stars { font-size: 17px; } /* Match the site's existing Plan Adventure / Contact button treatment and use the same supplied icon assets as the other Zumi plugins. */ #zumi-native-about .zna-contact__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; width: max-content; max-width: 100%; } #zumi-native-about .zna-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: max-content; min-width: 0; min-height: 48px; padding: 11px 15px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; font-weight: 700; line-height: 1.15; white-space: nowrap; transition: none !important; animation: none !important; } #zumi-native-about .zna-btn:hover, #zumi-native-about .zna-btn:focus-visible { transform: none !important; } #zumi-native-about .zna-btn__site-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; } #zumi-native-about .zna-btn__site-icon img { display: block; width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); } @media (max-width: 980px) { #zumi-native-about .zna-contact__actions { justify-content: flex-start; justify-self: start; } } @media (max-width: 760px) { #zumi-native-about .zna-hero-card { background: rgba(255,255,255,.74); border-color: rgba(255,255,255,.42); backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); } #zumi-native-about .zna-review>p { font-size: 17px; } #zumi-native-about .zna-contact__actions { display: flex; width: 100%; } #zumi-native-about .zna-btn { min-height: 44px; padding: 9px 11px; font-size: 11px; gap: 7px; } #zumi-native-about .zna-btn__site-icon, #zumi-native-about .zna-btn__site-icon img { width: 18px; height: 18px; flex-basis: 18px; } } @media (max-width: 430px) { #zumi-native-about .zna-contact__actions { align-items: flex-start; } } /* ============================================================ v1.0.10 — tighter hero glass card and better-balanced support row. ============================================================ */ /* Keep the support heading/copy as one centred composition instead of pushing the explanatory sentence to the far-right edge. */ @media (min-width: 981px) { #zumi-native-about .zna-support .zna-section-head { grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: clamp(28px, 2.5vw, 46px); max-width: 1480px; margin-left: auto; margin-right: auto; } #zumi-native-about .zna-support .zna-section-head > p { justify-self: start; width: 100%; max-width: 560px; } /* Centre the three portraits and the information panel together. The inter-column gap is intentionally larger than the gaps between staff cards so Namupala does not visually merge into the role panel. */ #zumi-native-about .zna-support-layout { grid-template-columns: minmax(0, 930px) minmax(390px, 500px); gap: clamp(28px, 2.25vw, 42px); align-items: stretch; justify-content: center; max-width: 1510px; margin-left: auto; margin-right: auto; } #zumi-native-about .zna-support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* The approach card should be only as large as its content, not a fixed panel occupying the full secondary hero column. */ #zumi-native-about .zna-hero { grid-template-columns: minmax(0, 1fr) auto; } #zumi-native-about .zna-hero-card { width: fit-content; min-width: 0; max-width: 345px; align-self: end; justify-self: end; margin: clamp(16px, 1.15vw, 22px); margin-left: 0; padding: 17px 19px 18px; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.55); box-shadow: 0 14px 34px rgba(0,0,0,.14); backdrop-filter: blur(16px) saturate(112%); -webkit-backdrop-filter: blur(16px) saturate(112%); } #zumi-native-about .zna-hero-card__icon { width: 36px; height: 36px; margin-bottom: 12px; border-radius: 4px; font-size: 18px; } #zumi-native-about .zna-hero-card__kicker { margin-bottom: 6px; } #zumi-native-about .zna-hero-card > strong { font-size: clamp(21px, 1.28vw, 27px); line-height: 1.08; } #zumi-native-about .zna-hero-card > p { margin-top: 9px; font-size: 12.5px; line-height: 1.48; } } /* Preserve a lighter, transparent panel on smaller views as well. */ @media (max-width: 980px) { #zumi-native-about .zna-hero-card { width: auto; max-width: 520px; justify-self: start; background: rgba(255,255,255,.62); } } /* ============================================================ v1.0.13 — COMPRESSED HERO BANNER Match the Insurance hero rhythm on phones/tablets: the narrative content sits at the top, the approach panel anchors the bottom, and an intentional open row between them reveals the hero image. ============================================================ */ @media (max-width: 980px) { #zumi-native-about .zna-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto clamp(72px, 12vw, 112px) auto !important; align-items: stretch !important; background: linear-gradient(180deg, rgba(18,13,11,.73) 0%, rgba(18,13,11,.58) 31%, rgba(18,13,11,.24) 53%, rgba(18,13,11,.38) 66%, rgba(18,13,11,.72) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hero-banner-about-us-compressed.webp") center 50% / cover no-repeat !important; } #zumi-native-about .zna-hero__copy { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; } #zumi-native-about .zna-hero-card { grid-column: 1 !important; grid-row: 3 !important; align-self: end !important; justify-self: start !important; width: auto !important; } } @media (max-width: 760px) { #zumi-native-about .zna-hero { grid-template-rows: auto clamp(76px, 18vw, 108px) auto !important; background: linear-gradient(180deg, rgba(18,13,11,.75) 0%, rgba(18,13,11,.60) 34%, rgba(18,13,11,.18) 53%, rgba(18,13,11,.30) 65%, rgba(18,13,11,.69) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hero-banner-about-us-compressed.webp") center 52% / cover no-repeat !important; } #zumi-native-about .zna-hero__copy { padding: 30px 28px 14px !important; } #zumi-native-about .zna-hero__copy > p { margin-top: 16px !important; max-width: 520px; font-size: 14px !important; line-height: 1.55 !important; } #zumi-native-about .zna-pill-row { margin-top: 15px !important; gap: 6px !important; } #zumi-native-about .zna-pill { min-height: 31px !important; padding: 6px 10px !important; font-size: 10.5px !important; background: rgba(12,9,8,.34) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #zumi-native-about .zna-hero-card { max-width: calc(100% - 56px) !important; margin: 0 28px 28px !important; padding: 17px 18px 18px !important; border-color: rgba(255,255,255,.34) !important; background: rgba(255,255,255,.58) !important; box-shadow: 0 14px 32px rgba(0,0,0,.18) !important; backdrop-filter: blur(14px) saturate(110%) !important; -webkit-backdrop-filter: blur(14px) saturate(110%) !important; } #zumi-native-about .zna-hero-card__icon { width: 34px !important; height: 34px !important; margin-bottom: 10px !important; border-radius: 4px !important; font-size: 17px !important; } #zumi-native-about .zna-hero-card__kicker { margin-bottom: 6px !important; font-size: 9.5px !important; } #zumi-native-about .zna-hero-card > strong { font-size: clamp(21px, 5.6vw, 27px) !important; line-height: 1.08 !important; } #zumi-native-about .zna-hero-card > p { margin-top: 9px !important; font-size: 12.5px !important; line-height: 1.48 !important; } } @media (max-width: 520px) { #zumi-native-about .zna-hero { grid-template-rows: auto clamp(68px, 19vw, 92px) auto !important; } #zumi-native-about .zna-hero__copy { padding-left: 26px !important; padding-right: 26px !important; } #zumi-native-about .zna-hero-card { max-width: calc(100% - 52px) !important; margin-left: 26px !important; margin-right: 26px !important; margin-bottom: 26px !important; } } /* ============================================================ v1.0.14 — standard mobile hero. Remove the Insurance-style open photo spacer and return the About page to a conventional single background hero. The image keeps its native proportions via background-size: cover; only cropping occurs. ============================================================ */ @media (max-width: 980px) { #zumi-native-about .zna-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; align-items: start !important; min-height: 0 !important; background: linear-gradient(180deg, rgba(18,13,11,.69) 0%, rgba(18,13,11,.54) 46%, rgba(18,13,11,.66) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hero-banner-about-us-compressed.webp") center 50% / cover no-repeat !important; } #zumi-native-about .zna-hero__copy, #zumi-native-about .zna-hero-card { grid-column: 1 !important; grid-row: auto !important; } #zumi-native-about .zna-hero__copy { align-self: auto !important; } #zumi-native-about .zna-hero-card { align-self: auto !important; justify-self: start !important; } } @media (max-width: 760px) { #zumi-native-about .zna-hero { grid-template-rows: none !important; background: linear-gradient(180deg, rgba(18,13,11,.72) 0%, rgba(18,13,11,.53) 45%, rgba(18,13,11,.68) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hero-banner-about-us-compressed.webp") center 48% / cover no-repeat !important; } #zumi-native-about .zna-hero__copy { padding: 30px 26px 18px !important; } #zumi-native-about .zna-hero-card { width: auto !important; max-width: calc(100% - 52px) !important; margin: 0 26px 26px !important; } } @media (max-width: 520px) { #zumi-native-about .zna-hero { grid-template-rows: none !important; background-position: center 46% !important; } } /* ============================================================ v1.0.15 — MATCH CONTACT HERO FOOTPRINT Uses the same outer hero heights as the Contact page while keeping the About image proportional. On phones, the approach card moves below the image hero so the banner itself can remain Contact-sized. ============================================================ */ #zumi-native-about .zna-hero-card--mobile{display:none} @media (min-width:981px){ #zumi-native-about .zna-hero{ min-height:clamp(300px,24vw,390px)!important; grid-template-columns:minmax(0,1.28fr) minmax(290px,.72fr)!important; align-items:center!important; } #zumi-native-about .zna-hero__copy{ padding:clamp(30px,3.6vw,52px)!important; } #zumi-native-about .zna-hero h1{ max-width:780px!important; font-size:clamp(38px,4vw,62px)!important; line-height:.99!important; letter-spacing:-.05em!important; } #zumi-native-about .zna-hero__copy>p{ max-width:760px!important; margin:15px 0 0!important; font-size:clamp(14px,1vw,17px)!important; line-height:1.58!important; } #zumi-native-about .zna-pill-row{ margin-top:16px!important; gap:8px!important; } #zumi-native-about .zna-pill{ min-height:31px!important; padding:6px 10px!important; font-size:10.8px!important; } #zumi-native-about .zna-hero > .zna-hero-card{ width:min(100%,360px)!important; margin:24px 28px 24px 0!important; padding:20px 22px!important; border-radius:4px !important; } #zumi-native-about .zna-hero > .zna-hero-card .zna-hero-card__icon{ width:38px!important; height:38px!important; margin-bottom:13px!important; font-size:19px!important; } #zumi-native-about .zna-hero > .zna-hero-card .zna-hero-card__kicker{ margin-bottom:6px!important; font-size:9.5px!important; } #zumi-native-about .zna-hero > .zna-hero-card>strong{ font-size:clamp(21px,1.45vw,27px)!important; line-height:1.06!important; } #zumi-native-about .zna-hero > .zna-hero-card>p{ margin-top:10px!important; font-size:12.5px!important; line-height:1.48!important; } } @media (min-width:761px) and (max-width:980px){ #zumi-native-about .zna-hero{ min-height:285px!important; grid-template-columns:minmax(0,1fr) minmax(240px,.56fr)!important; align-items:center!important; background: linear-gradient(90deg,rgba(18,13,11,.86) 0%,rgba(18,13,11,.67) 43%,rgba(18,13,11,.28) 100%), linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.24)), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hero-banner-about-us-compressed.webp") center 50% / cover no-repeat!important; } #zumi-native-about .zna-hero__copy{ padding:28px 24px!important; } #zumi-native-about .zna-hero h1{ font-size:clamp(34px,5.6vw,48px)!important; line-height:1!important; } #zumi-native-about .zna-hero__copy>p{ margin-top:12px!important; font-size:13px!important; line-height:1.5!important; } #zumi-native-about .zna-pill-row{ margin-top:13px!important; gap:6px!important; } #zumi-native-about .zna-pill{ min-height:28px!important; padding:5px 9px!important; font-size:9.8px!important; } #zumi-native-about .zna-hero > .zna-hero-card{ width:auto!important; max-width:280px!important; margin:20px 20px 20px 0!important; padding:17px 18px!important; border-radius:4px !important; } #zumi-native-about .zna-hero > .zna-hero-card .zna-hero-card__icon{ width:34px!important; height:34px!important; margin-bottom:10px!important; font-size:17px!important; } #zumi-native-about .zna-hero > .zna-hero-card .zna-hero-card__kicker{ margin-bottom:5px!important; font-size:9px!important; } #zumi-native-about .zna-hero > .zna-hero-card>strong{ font-size:20px!important; line-height:1.05!important; } #zumi-native-about .zna-hero > .zna-hero-card>p{ margin-top:8px!important; font-size:11.5px!important; line-height:1.42!important; } } @media (max-width:760px){ #zumi-native-about .zna-shell{padding:8px 0!important} #zumi-native-about .zna-hero{ height:250px!important; min-height:250px!important; display:block!important; margin-left:8px!important; margin-right:8px!important; padding:22px 17px 18px!important; border-radius:4px !important; background: linear-gradient(90deg,rgba(18,13,11,.84) 0%,rgba(18,13,11,.63) 48%,rgba(18,13,11,.24) 100%), linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.22)), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hero-banner-about-us-compressed.webp") center 50% / cover no-repeat!important; } #zumi-native-about .zna-hero__copy{ width:min(100%,520px)!important; padding:0!important; } #zumi-native-about .zna-hero .zna-eyebrow{ margin-bottom:7px!important; font-size:10px!important; } #zumi-native-about .zna-hero h1{ max-width:440px!important; font-size:clamp(29px,7.7vw,34px)!important; line-height:1!important; letter-spacing:-.045em!important; } #zumi-native-about .zna-hero__copy>p{ max-width:430px!important; margin:10px 0 0!important; font-size:12.5px!important; line-height:1.43!important; } #zumi-native-about .zna-hero .zna-pill-row{ display:none!important; } #zumi-native-about .zna-hero > .zna-hero-card{ display:none!important; } #zumi-native-about .zna-hero-card--mobile{ display:block!important; width:auto!important; max-width:none!important; margin:0 8px!important; padding:18px 19px!important; border:1px solid #EAE3DE!important; border-radius:4px !important; background:rgba(248,245,242,.94)!important; box-shadow:0 12px 30px rgba(32,20,13,.055)!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; } #zumi-native-about .zna-hero-card--mobile .zna-hero-card__icon{ width:36px!important; height:36px!important; margin-bottom:11px!important; font-size:18px!important; } #zumi-native-about .zna-hero-card--mobile .zna-hero-card__kicker{ margin-bottom:5px!important; font-size:9.5px!important; } #zumi-native-about .zna-hero-card--mobile>strong{ font-size:21px!important; line-height:1.07!important; } #zumi-native-about .zna-hero-card--mobile>p{ margin-top:8px!important; font-size:12.5px!important; line-height:1.48!important; } } /* ============================================================ v1.0.16 — MOBILE HERO ART DIRECTION Dedicated mobile crop keeps Oleg + Ambros visible instead of forcing the wide desktop photograph through a narrow cover crop. ============================================================ */ @media (max-width:760px){ #zumi-native-about .zna-hero{ height:250px!important; min-height:250px!important; padding:16px 16px!important; display:flex!important; align-items:flex-start!important; background: linear-gradient(180deg,rgba(15,12,10,.76) 0%,rgba(15,12,10,.60) 48%,rgba(15,12,10,.52) 100%), url("../images/zumi-about-hero-mobile.webp") center center / cover no-repeat!important; } #zumi-native-about .zna-hero::after{ display:none!important; } #zumi-native-about .zna-hero__copy{ width:min(100%,360px)!important; padding:0!important; margin:0!important; } #zumi-native-about .zna-hero .zna-eyebrow{ margin-bottom:5px!important; font-size:9.5px!important; text-shadow:0 2px 8px rgba(0,0,0,.35)!important; } #zumi-native-about .zna-hero h1{ max-width:310px!important; margin:0!important; font-size:clamp(25px,7vw,31px)!important; line-height:.98!important; letter-spacing:-.04em!important; text-wrap:balance!important; text-shadow:0 3px 14px rgba(0,0,0,.48)!important; } /* Keep the photograph itself as the visual focus on phones. */ #zumi-native-about .zna-hero__copy>p{ display:none!important; } } /* ============================================================ v1.0.19 — DARK OUR APPROACH CARD Dark translucent glass treatment with Zumi orange accents. ============================================================ */ #zumi-native-about .zna-hero-card, #zumi-native-about .zna-hero-card--mobile{ position:relative!important; overflow:hidden!important; border:1px solid rgba(232,94,42,.48)!important; background:linear-gradient(145deg,rgba(25,19,16,.88),rgba(18,14,12,.78))!important; box-shadow:0 16px 38px rgba(0,0,0,.24)!important; backdrop-filter:blur(15px) saturate(118%)!important; -webkit-backdrop-filter:blur(15px) saturate(118%)!important; } #zumi-native-about .zna-hero-card::before, #zumi-native-about .zna-hero-card--mobile::before{ content:""!important; position:absolute!important; left:18px!important; top:0!important; width:64px!important; height:3px!important; border-radius:0 0 3px 3px!important; background:#E85E2A!important; opacity:.95!important; } #zumi-native-about .zna-hero-card__icon{ color:#E85E2A!important; background:rgba(232,94,42,.15)!important; border:1px solid rgba(232,94,42,.20)!important; } #zumi-native-about .zna-hero-card__kicker{ color:#E85E2A!important; } #zumi-native-about .zna-hero-card>strong, #zumi-native-about .zna-hero-card--mobile>strong{ color:#fff!important; } #zumi-native-about .zna-hero-card>p, #zumi-native-about .zna-hero-card--mobile>p{ color:rgba(255,248,243,.78)!important; } @media(max-width:760px){ #zumi-native-about .zna-hero-card--mobile{ border-color:rgba(232,94,42,.42)!important; background:linear-gradient(145deg,rgba(28,21,17,.94),rgba(20,15,13,.90))!important; box-shadow:0 12px 28px rgba(0,0,0,.16)!important; } } /* ============================================================ v1.0.20 — DESKTOP LAYOUT FROM 761PX UP Keep the 761–980px range visually consistent with the current larger-screen composition. Only 760px and below use mobile layout. ============================================================ */ @media (min-width:761px) and (max-width:980px){ /* Hero: use the same compact desktop composition rather than the intermediate/tablet treatment. */ #zumi-native-about .zna-hero{ min-height:clamp(300px,24vw,390px)!important; display:grid!important; grid-template-columns:minmax(0,1.28fr) minmax(290px,.72fr)!important; grid-template-rows:none!important; align-items:center!important; background: linear-gradient(90deg,rgba(18,13,11,.90) 0%,rgba(18,13,11,.70) 38%,rgba(18,13,11,.36) 70%,rgba(18,13,11,.17) 100%), linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.12) 56%,rgba(0,0,0,.45) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hero-banner-about-us-compressed.webp") center 48%/cover no-repeat!important; } #zumi-native-about .zna-hero__copy{ align-self:center!important; padding:clamp(30px,3.6vw,52px)!important; } #zumi-native-about .zna-hero h1{ max-width:780px!important; font-size:clamp(38px,4vw,62px)!important; line-height:.99!important; letter-spacing:-.05em!important; } #zumi-native-about .zna-hero__copy>p{ display:block!important; max-width:760px!important; margin:15px 0 0!important; font-size:clamp(14px,1vw,17px)!important; line-height:1.58!important; } #zumi-native-about .zna-pill-row{ display:flex!important; margin-top:16px!important; gap:8px!important; } #zumi-native-about .zna-pill{ min-height:31px!important; padding:6px 10px!important; font-size:10.8px!important; } #zumi-native-about .zna-hero > .zna-hero-card{ display:block!important; width:min(100%,345px)!important; max-width:345px!important; align-self:center!important; justify-self:end!important; margin:22px 24px 22px 0!important; padding:18px 20px!important; border-radius:4px !important; } #zumi-native-about .zna-hero > .zna-hero-card .zna-hero-card__icon{ width:38px!important;height:38px!important;margin-bottom:13px!important;font-size:19px!important; } #zumi-native-about .zna-hero > .zna-hero-card .zna-hero-card__kicker{ margin-bottom:6px!important;font-size:9.5px!important; } #zumi-native-about .zna-hero > .zna-hero-card>strong{ font-size:clamp(21px,1.45vw,27px)!important;line-height:1.06!important; } #zumi-native-about .zna-hero > .zna-hero-card>p{ margin-top:10px!important;font-size:12.5px!important;line-height:1.48!important; } #zumi-native-about .zna-hero-card--mobile{display:none!important} /* Restore the larger-screen section geometry. */ #zumi-native-about .zna-section-head{ grid-template-columns:minmax(0,1fr) minmax(320px,.65fr)!important; gap:clamp(28px,4vw,80px)!important; } #zumi-native-about .zna-values{grid-template-columns:repeat(3,minmax(0,1fr))!important} #zumi-native-about .zna-support .zna-section-head{ grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)!important; gap:clamp(28px,2.5vw,46px)!important; max-width:1480px!important; margin-left:auto!important; margin-right:auto!important; } #zumi-native-about .zna-support .zna-section-head>p{ justify-self:start!important; width:100%!important; max-width:560px!important; } #zumi-native-about .zna-support-layout{ grid-template-columns:minmax(0,930px) minmax(300px,500px)!important; gap:clamp(24px,2.25vw,36px)!important; align-items:stretch!important; justify-content:center!important; max-width:1510px!important; margin-left:auto!important; margin-right:auto!important; } #zumi-native-about .zna-support-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; justify-content:stretch!important; gap:16px!important; max-width:none!important; } #zumi-native-about .zna-support-blob{min-height:100%!important} /* Testimonials/review and CTA keep the full-width desktop arrangement. */ #zumi-native-about .zna-review{ grid-template-columns:auto minmax(0,1fr) auto!important; gap:20px!important; } #zumi-native-about .zna-review footer{ grid-column:auto!important; min-width:180px!important; padding:2px 0 2px 20px!important; border-top:0!important; border-left:1px solid rgba(255,255,255,.12)!important; } #zumi-native-about .zna-contact{ grid-template-columns:minmax(0,1fr) auto!important; } #zumi-native-about .zna-contact__actions{ justify-self:end!important; justify-content:flex-end!important; } } /* ============================================================ v1.0.22 — one desktop structure for every viewport above 760px. Earlier tablet rules forced the approach card back into column 1 and changed lead cards to vertical. These final overrides make tablets / small laptops use the same structure as larger desktops. ============================================================ */ @media (min-width:761px){ /* Hero: explicitly restore the two-column desktop placement. */ #zumi-native-about .zna-hero{ display:grid!important; grid-template-columns:minmax(0,1.28fr) minmax(250px,.72fr)!important; grid-template-rows:1fr!important; align-items:center!important; min-height:clamp(300px,24vw,390px)!important; } #zumi-native-about .zna-hero__copy{ grid-column:1!important; grid-row:1!important; align-self:center!important; min-width:0!important; padding:clamp(26px,3.2vw,52px)!important; } #zumi-native-about .zna-hero > .zna-hero-card{ display:block!important; grid-column:2!important; grid-row:1!important; align-self:center!important; justify-self:end!important; width:min(100%,360px)!important; max-width:360px!important; margin:clamp(18px,2vw,28px) clamp(18px,2.2vw,32px) clamp(18px,2vw,28px) 0!important; } #zumi-native-about .zna-hero-card--mobile{display:none!important} /* Keep the same desktop section structure instead of tablet stacking. */ #zumi-native-about .zna-section-head{ grid-template-columns:minmax(0,1fr) minmax(280px,.65fr)!important; gap:clamp(24px,3vw,70px)!important; } #zumi-native-about .zna-values{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } /* Leadership cards remain horizontal, matching full desktop. */ #zumi-native-about .zna-lead-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } #zumi-native-about .zna-person--lead{ grid-template-columns:minmax(130px,.84fr) minmax(0,1.16fr)!important; min-height:clamp(300px,31vw,380px)!important; } #zumi-native-about .zna-person--lead .zna-person__media{ min-height:clamp(300px,31vw,380px)!important; aspect-ratio:auto!important; } /* Support team stays staff-left / information-right just like desktop. */ #zumi-native-about .zna-support .zna-section-head{ grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr)!important; gap:clamp(24px,2.5vw,46px)!important; } #zumi-native-about .zna-support-layout{ grid-template-columns:minmax(0,1.72fr) minmax(260px,.78fr)!important; gap:clamp(24px,2.4vw,40px)!important; align-items:stretch!important; justify-content:center!important; max-width:1510px!important; margin-left:auto!important; margin-right:auto!important; } #zumi-native-about .zna-support-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; max-width:none!important; justify-content:stretch!important; gap:clamp(12px,1.25vw,18px)!important; } #zumi-native-about .zna-person--support{ max-width:none!important; height:100%!important; } #zumi-native-about .zna-support-blob{ min-height:100%!important; } /* Desktop testimonial + CTA arrangements. */ #zumi-native-about .zna-photo-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } #zumi-native-about .zna-review{ grid-template-columns:auto minmax(0,1fr) auto!important; gap:clamp(14px,1.6vw,22px)!important; } #zumi-native-about .zna-review footer{ grid-column:auto!important; min-width:160px!important; padding:2px 0 2px 18px!important; border-top:0!important; border-left:1px solid rgba(255,255,255,.12)!important; } #zumi-native-about .zna-contact{ grid-template-columns:minmax(0,1fr) auto!important; } #zumi-native-about .zna-contact__actions{ justify-self:end!important; justify-content:flex-end!important; } } /* Slightly tighten the same desktop structure on tablets/small laptops; only the dimensions change, not the layout. */ @media (min-width:761px) and (max-width:1100px){ #zumi-native-about .zna-hero{ grid-template-columns:minmax(0,1.18fr) minmax(245px,.82fr)!important; } #zumi-native-about .zna-hero h1{ font-size:clamp(34px,4.4vw,50px)!important; } #zumi-native-about .zna-hero__copy>p{ font-size:clamp(12.5px,1.45vw,15px)!important; line-height:1.52!important; } #zumi-native-about .zna-hero > .zna-hero-card{ max-width:300px!important; padding:17px 18px!important; } #zumi-native-about .zna-person__body{ padding:clamp(16px,2vw,24px)!important; } #zumi-native-about .zna-person--lead h3{ font-size:clamp(22px,2.25vw,29px)!important; } #zumi-native-about .zna-person--lead p{ font-size:12.5px!important; } #zumi-native-about .zna-support-layout{ grid-template-columns:minmax(0,1.8fr) minmax(245px,.8fr)!important; } #zumi-native-about .zna-support-blob{ padding:clamp(20px,2vw,26px)!important; } } /* ============================================================ v1.0.23 — TALLER DESKTOP HERO + BOTTOM-ALIGNED MOBILE COPY ============================================================ */ @media (min-width:761px){ #zumi-native-about .zna-hero{ min-height:clamp(430px,34vw,620px)!important; } } @media (min-width:761px) and (max-width:1100px){ #zumi-native-about .zna-hero{ min-height:clamp(410px,42vw,500px)!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero{ display:flex!important; flex-direction:column!important; align-items:stretch!important; justify-content:flex-end!important; } #zumi-native-about .zna-hero__copy{ align-self:stretch!important; margin-top:auto!important; margin-bottom:0!important; } } /* ============================================================ v1.0.24 — APPROACH CARD ALWAYS BELOW THE HERO ============================================================ */ #zumi-native-about .zna-hero > .zna-hero-card, #zumi-native-about .zna-hero-card--mobile{ display:none!important; } #zumi-native-about .zna-hero-card--below{ display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; align-items:center!important; gap:18px!important; width:min(820px,calc(100% - 30px))!important; max-width:820px!important; margin:18px auto 0!important; padding:22px 26px!important; border:1px solid rgba(232,94,42,.58)!important; border-radius:4px !important; background:linear-gradient(135deg,rgba(25,17,13,.95),rgba(31,21,16,.88))!important; box-shadow:0 16px 38px rgba(31,18,10,.14)!important; backdrop-filter:blur(14px)!important; -webkit-backdrop-filter:blur(14px)!important; color:#fff!important; } #zumi-native-about .zna-hero-card--below::before{ content:""!important; position:absolute!important; top:-1px!important; left:24px!important; width:82px!important; height:3px!important; border-radius:0 0 4px 4px!important; background:var(--zna-orange)!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ width:50px!important; height:50px!important; margin:0!important; border:1px solid rgba(232,94,42,.35)!important; background:rgba(232,94,42,.13)!important; color:var(--zna-orange)!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ margin:0 0 5px!important; color:#E85E2A!important; } #zumi-native-about .zna-hero-card--below strong{ display:block!important; margin:0!important; color:#fff!important; font-size:clamp(22px,1.8vw,31px)!important; line-height:1.08!important; } #zumi-native-about .zna-hero-card--below p{ margin:8px 0 0!important; max-width:680px!important; color:rgba(255,255,255,.76)!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:13.5px!important; line-height:1.55!important; } /* Hero no longer reserves a column for the approach card. Keep copy left and photo open. */ @media (min-width:761px){ #zumi-native-about .zna-hero{ grid-template-columns:minmax(0,1.22fr) minmax(260px,.78fr)!important; } #zumi-native-about .zna-hero__copy{ grid-column:1!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ grid-template-columns:1fr!important; gap:11px!important; width:calc(100% - 24px)!important; margin:12px auto 0!important; padding:18px 18px 19px!important; border-radius:4px !important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ width:44px!important; height:44px!important; } #zumi-native-about .zna-hero-card--below strong{ font-size:23px!important; } #zumi-native-about .zna-hero-card--below p{ font-size:13px!important; line-height:1.5!important; } } /* ============================================================ v1.0.25 — WIDE, LOW-PROFILE APPROACH PANEL ON DESKTOP ============================================================ */ @media (min-width:981px){ #zumi-native-about .zna-hero-card--below{ width:calc(100% - 30px)!important; max-width:1500px!important; grid-template-columns:50px minmax(0,1fr)!important; gap:20px!important; padding:18px 24px!important; margin-top:18px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ display:grid!important; grid-template-columns:minmax(250px,.72fr) minmax(380px,1.28fr)!important; grid-template-rows:auto auto!important; column-gap:34px!important; row-gap:2px!important; align-items:center!important; width:100%!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ grid-column:1!important; grid-row:1!important; align-self:end!important; } #zumi-native-about .zna-hero-card--below strong{ grid-column:1!important; grid-row:2!important; align-self:start!important; font-size:clamp(22px,1.55vw,29px)!important; } #zumi-native-about .zna-hero-card--below p{ grid-column:2!important; grid-row:1 / span 2!important; align-self:center!important; max-width:760px!important; margin:0!important; font-size:13.5px!important; line-height:1.52!important; } } @media (min-width:1600px){ #zumi-native-about .zna-hero-card--below{ max-width:1600px!important; } } /* ============================================================ v1.0.26 — IMAGE-BACKED "ONE TEAM" BANNER Uses the same layered darkening treatment as the main About hero. ============================================================ */ #zumi-native-about .zna-hero-card--below{ position:relative!important; isolation:isolate!important; overflow:hidden!important; border-color:rgba(232,94,42,.48)!important; background: linear-gradient(90deg,rgba(18,13,11,.90) 0%,rgba(18,13,11,.70) 38%,rgba(18,13,11,.36) 70%,rgba(18,13,11,.17) 100%), linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.12) 56%,rgba(0,0,0,.45) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 52% / cover no-repeat!important; box-shadow:0 18px 44px rgba(31,18,10,.18)!important; } #zumi-native-about .zna-hero-card--below::after{ content:""!important; position:absolute!important; inset:0!important; z-index:0!important; background:linear-gradient(90deg,rgba(18,13,11,.08),rgba(18,13,11,0) 58%,rgba(18,13,11,.10))!important; pointer-events:none!important; } #zumi-native-about .zna-hero-card--below > *{ position:relative!important; z-index:1!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ background:rgba(22,14,10,.72)!important; border-color:rgba(232,94,42,.72)!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ color:#E85E2A!important; text-shadow:0 2px 10px rgba(0,0,0,.45)!important; } #zumi-native-about .zna-hero-card--below strong{ color:#fff!important; text-shadow:0 3px 18px rgba(0,0,0,.52)!important; } #zumi-native-about .zna-hero-card--below p{ color:rgba(255,255,255,.90)!important; text-shadow:0 2px 12px rgba(0,0,0,.45)!important; } /* Give the image enough height to read as a banner without making the section excessively tall. */ @media (min-width:981px){ #zumi-native-about .zna-hero-card--below{ min-height:210px!important; padding:28px 34px!important; } } @media (min-width:761px) and (max-width:980px){ #zumi-native-about .zna-hero-card--below{ min-height:190px!important; background-position:center 50%!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ min-height:220px!important; background: linear-gradient(180deg,rgba(18,13,11,.56) 0%,rgba(18,13,11,.70) 48%,rgba(18,13,11,.88) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 48% / cover no-repeat!important; } } /* ============================================================ v1.0.27 — FULL-WIDTH ONE TEAM BANNER + STRONGER DESCRIPTION Match the main hero width on larger screens while keeping the banner low-profile. Give the description more visual weight. ============================================================ */ @media (min-width:981px){ #zumi-native-about .zna-hero-card--below{ width:calc(100% - 30px)!important; max-width:none!important; margin-left:15px!important; margin-right:15px!important; padding:26px 34px!important; min-height:210px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr)!important; column-gap:48px!important; } #zumi-native-about .zna-hero-card--below p{ max-width:none!important; width:100%!important; font-size:clamp(16px,1.05vw,20px)!important; line-height:1.58!important; letter-spacing:-.005em!important; } } @media (min-width:1600px){ #zumi-native-about .zna-hero-card--below{ max-width:none!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ grid-template-columns:minmax(300px,.52fr) minmax(0,1.48fr)!important; column-gap:60px!important; } #zumi-native-about .zna-hero-card--below p{ font-size:19px!important; } } /* ============================================================ v1.0.28 — SUNSET SECOND HERO + TALLER DESKTOP BANNER Use the new Hilux sunset image, give larger screens more vertical presence, and add a dedicated dark reading surface behind the copy. ============================================================ */ #zumi-native-about .zna-hero-card--below{ background: linear-gradient(90deg,rgba(13,10,8,.92) 0%,rgba(13,10,8,.76) 34%,rgba(13,10,8,.52) 64%,rgba(13,10,8,.40) 100%), linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.18) 52%,rgba(0,0,0,.58) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 54% / cover no-repeat!important; } /* The long description sits on its own translucent scrim so it remains legible even over the brightest part of the sunset. */ #zumi-native-about .zna-hero-card--below p{ background:rgba(8,8,8,.42)!important; border-left:2px solid rgba(232,94,42,.82)!important; border-radius:4px !important; padding:18px 20px!important; color:#fff!important; font-weight:500!important; text-shadow:0 2px 8px rgba(0,0,0,.85)!important; box-shadow:0 10px 28px rgba(0,0,0,.18)!important; backdrop-filter:blur(3px)!important; -webkit-backdrop-filter:blur(3px)!important; } @media (min-width:981px){ #zumi-native-about .zna-hero-card--below{ min-height:320px!important; padding:40px 42px!important; background-position:center 55%!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ align-items:center!important; } #zumi-native-about .zna-hero-card--below p{ font-size:clamp(18px,1.18vw,22px)!important; line-height:1.55!important; } } @media (min-width:1600px){ #zumi-native-about .zna-hero-card--below{ min-height:360px!important; padding:46px 52px!important; } #zumi-native-about .zna-hero-card--below p{ font-size:21px!important; padding:20px 24px!important; } } @media (min-width:761px) and (max-width:980px){ #zumi-native-about .zna-hero-card--below{ min-height:240px!important; background-position:center 54%!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ background: linear-gradient(180deg,rgba(13,10,8,.50) 0%,rgba(13,10,8,.68) 46%,rgba(13,10,8,.90) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 52% / cover no-repeat!important; } #zumi-native-about .zna-hero-card--below p{ padding:14px 16px!important; border-radius:4px !important; } } /* ============================================================ v1.0.29 — MOBILE ONE TEAM BANNER: MORE IMAGE, LOWER COPY PANEL Give the mobile banner the same visual rhythm as the Insurance hero: a taller image field with the descriptive glass panel anchored low so the Hiluxes remain visible through the middle of the banner. ============================================================ */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:0!important; min-height:520px!important; padding:22px 18px 20px!important; background: linear-gradient(180deg,rgba(13,10,8,.38) 0%,rgba(13,10,8,.34) 34%,rgba(13,10,8,.50) 62%,rgba(13,10,8,.78) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 50% / cover no-repeat!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ flex:0 0 auto!important; margin-bottom:14px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ display:flex!important; flex:1 1 auto!important; min-height:0!important; flex-direction:column!important; align-items:stretch!important; width:100%!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ flex:0 0 auto!important; margin-bottom:7px!important; } #zumi-native-about .zna-hero-card--below strong{ flex:0 0 auto!important; max-width:100%!important; } #zumi-native-about .zna-hero-card--below p{ flex:0 0 auto!important; margin-top:auto!important; margin-bottom:0!important; padding:18px 18px!important; min-height:142px!important; display:flex!important; align-items:center!important; background:rgba(12,9,7,.76)!important; border:1px solid rgba(255,255,255,.13)!important; border-left:3px solid var(--zna-orange)!important; border-radius:4px !important; box-shadow:0 14px 34px rgba(0,0,0,.24)!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; color:#fff!important; font-size:15px!important; line-height:1.55!important; } } @media (max-width:430px){ #zumi-native-about .zna-hero-card--below{ min-height:540px!important; } } /* ============================================================ v1.0.30 — MOBILE ONLY: ADD SPACE WITHOUT RESIZING THE PHOTO Keep the sunset artwork in a fixed-height image layer so making the card taller does not scale/stretch the photograph. The extra height is layout space, and the description remains anchored at the bottom. Desktop/tablet styling is unchanged. ============================================================ */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ min-height:580px!important; /* The photo is moved to a fixed-height ::after layer below. */ background:#120d0a!important; padding:22px 18px 20px!important; } #zumi-native-about .zna-hero-card--below::after{ content:""!important; position:absolute!important; top:0!important; left:0!important; right:0!important; bottom:auto!important; height:360px!important; z-index:0!important; pointer-events:none!important; background: linear-gradient(180deg,rgba(13,10,8,.34) 0%,rgba(13,10,8,.30) 48%,rgba(13,10,8,.58) 82%,rgba(18,13,10,1) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 50% / cover no-repeat!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ min-height:0!important; } #zumi-native-about .zna-hero-card--below p{ margin-top:auto!important; margin-bottom:0!important; min-height:142px!important; } } @media (max-width:430px){ #zumi-native-about .zna-hero-card--below{ min-height:600px!important; } #zumi-native-about .zna-hero-card--below::after{ height:350px!important; } } /* ============================================================ v1.0.31 — COMPACT SECOND HERO + TIGHTER HERO-TO-BANNER SPACING Reduce the overall One Team banner height and the description scrim height on all breakpoints. Keep the mobile sunset artwork in its own fixed image layer so it is never stretched. Also remove the extra top margin that compounded the page grid gap below the first hero. ============================================================ */ #zumi-native-about .zna-hero-card--below{ margin-top:0!important; } @media (min-width:981px){ #zumi-native-about .zna-hero-card--below{ min-height:255px!important; padding:28px 34px!important; } #zumi-native-about .zna-hero-card--below p{ padding:12px 16px!important; min-height:0!important; line-height:1.48!important; } } @media (min-width:1600px){ #zumi-native-about .zna-hero-card--below{ min-height:280px!important; padding:32px 40px!important; } #zumi-native-about .zna-hero-card--below p{ padding:13px 18px!important; } } @media (min-width:761px) and (max-width:980px){ #zumi-native-about .zna-hero-card--below{ min-height:215px!important; padding-top:22px!important; padding-bottom:22px!important; } #zumi-native-about .zna-hero-card--below p{ padding:11px 14px!important; min-height:0!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ min-height:510px!important; margin-top:0!important; padding:20px 18px 18px!important; } #zumi-native-about .zna-hero-card--below::after{ height:325px!important; background: linear-gradient(180deg,rgba(13,10,8,.34) 0%,rgba(13,10,8,.30) 48%,rgba(13,10,8,.58) 82%,rgba(18,13,10,1) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 50% / cover no-repeat!important; } #zumi-native-about .zna-hero-card--below p{ min-height:0!important; padding:14px 16px!important; line-height:1.48!important; } } @media (max-width:430px){ #zumi-native-about .zna-hero-card--below{ min-height:525px!important; } #zumi-native-about .zna-hero-card--below::after{ height:315px!important; } } /* ============================================================ v1.0.32 — MOBILE: RAISE DESCRIPTION PANEL INTO THE GRASS LINE Keep desktop/tablet unchanged. On phones, stop anchoring the copy panel to the very bottom and bring it upward to the lower-middle of the sunset image, around the grass line ahead of the vehicle tyres. ============================================================ */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ min-height:500px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ flex:0 0 auto!important; } #zumi-native-about .zna-hero-card--below p{ margin-top:76px!important; margin-bottom:0!important; } } @media (max-width:430px){ #zumi-native-about .zna-hero-card--below{ min-height:505px!important; } #zumi-native-about .zna-hero-card--below p{ margin-top:64px!important; } } /* ============================================================ v1.0.33 — MOBILE ONLY: TRIM DEAD SPACE BELOW DESCRIPTION Keep the image crop and copy position from v1.0.32. Remove the forced mobile minimum height so the card ends shortly after the description panel instead of leaving a large empty dark area. ============================================================ */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ min-height:0!important; height:auto!important; padding-bottom:18px!important; } } @media (max-width:430px){ #zumi-native-about .zna-hero-card--below{ min-height:0!important; height:auto!important; padding-bottom:16px!important; } } /* ============================================================ v1.0.34 — MATCH INSURANCE DESCRIPTION PANEL Use the Insurance page's dark glass card treatment, top orange accent bar, and Poppins semibold body styling for the One Team description. Layout/crop positioning is otherwise unchanged. ============================================================ */ #zumi-native-about .zna-hero-card--below p{ position:relative!important; overflow:visible!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-weight:600!important; letter-spacing:-.015em!important; color:#fff!important; background: linear-gradient(135deg,rgba(39,27,22,.94) 0%,rgba(26,20,17,.95) 52%,rgba(20,17,15,.96) 100%)!important; border:1px solid rgba(255,255,255,.18)!important; border-left:1px solid rgba(255,255,255,.18)!important; border-radius:4px !important; box-shadow:0 12px 34px rgba(0,0,0,.26)!important; text-shadow:none!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; } #zumi-native-about .zna-hero-card--below p::before{ content:""!important; position:absolute!important; top:-2px!important; left:32px!important; width:118px!important; height:4px!important; border-radius:0 0 8px 8px!important; background:linear-gradient(90deg,#E85E2A 0%,#E85E2A 58%,#f4aa24 100%)!important; box-shadow:none!important; pointer-events:none!important; } @media (min-width:981px){ #zumi-native-about .zna-hero-card--below p{ font-size:clamp(18px,1.18vw,22px)!important; line-height:1.52!important; padding:17px 22px!important; } } @media (min-width:761px) and (max-width:980px){ #zumi-native-about .zna-hero-card--below p{ font-size:17px!important; line-height:1.52!important; padding:16px 20px!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero-card--below p{ font-size:15px!important; line-height:1.52!important; padding:17px 18px!important; border-radius:4px !important; } #zumi-native-about .zna-hero-card--below p::before{ left:26px!important; width:108px!important; height:4px!important; } } /* ============================================================ v1.0.35 — MOBILE: MORE OPEN IMAGE SPACE + SOFTER GLASS PANEL Mobile only. Keep the sunset image crop/size unchanged, add more space between the title and description, and let the banner end naturally after the lowered glass panel. ============================================================ */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below p{ margin-top:118px!important; margin-bottom:0!important; background:linear-gradient(135deg,rgba(39,27,22,.78) 0%,rgba(26,20,17,.80) 52%,rgba(20,17,15,.82) 100%)!important; backdrop-filter:blur(18px) saturate(118%)!important; -webkit-backdrop-filter:blur(18px) saturate(118%)!important; box-shadow:0 14px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)!important; } } @media (max-width:430px){ #zumi-native-about .zna-hero-card--below p{ margin-top:104px!important; } } /* ============================================================ v1.0.36 — LIGHTER DESCRIPTION TYPOGRAPHY + CLEARER GLASS Reduce the One Team description size/weight and make the panel more transparent while retaining a pronounced backdrop blur. ============================================================ */ #zumi-native-about .zna-hero-card--below p{ font-weight:400!important; background:linear-gradient(135deg,rgba(35,25,21,.58) 0%,rgba(24,19,16,.62) 52%,rgba(18,16,14,.66) 100%)!important; backdrop-filter:blur(20px) saturate(112%)!important; -webkit-backdrop-filter:blur(20px) saturate(112%)!important; border-color:rgba(255,255,255,.16)!important; } @media (min-width:981px){ #zumi-native-about .zna-hero-card--below p{ font-size:clamp(16px,1.02vw,19px)!important; line-height:1.5!important; } } @media (min-width:761px) and (max-width:980px){ #zumi-native-about .zna-hero-card--below p{ font-size:15.5px!important; line-height:1.5!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero-card--below p{ font-size:14px!important; line-height:1.48!important; background:linear-gradient(135deg,rgba(35,25,21,.52) 0%,rgba(24,19,16,.57) 52%,rgba(18,16,14,.61) 100%)!important; backdrop-filter:blur(22px) saturate(112%)!important; -webkit-backdrop-filter:blur(22px) saturate(112%)!important; } } /* ============================================================ v1.0.37 — MID-SIZE DESKTOP MATCHES LARGE-DESKTOP SECOND BANNER Make the One Team / Our Approach banner use the same desktop proportions and content balance on common 1200–1599px screens that it already uses on 1600px+ displays. Mobile/tablet unchanged. ============================================================ */ @media (min-width:1200px) and (max-width:1599px){ #zumi-native-about .zna-hero-card--below{ min-height:280px!important; padding:32px 40px!important; max-width:none!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ grid-template-columns:minmax(300px,.52fr) minmax(0,1.48fr)!important; column-gap:60px!important; } #zumi-native-about .zna-hero-card--below p{ font-size:19px!important; padding:13px 18px!important; } } /* ============================================================ v1.0.38 — BRAND STORY + APPROACH EYEBROW + DARKER MAIN HERO Slightly deepen the first hero treatment, give the second-banner "Our approach" kicker the same orange line treatment as "About Zumi", and keep the existing responsive second-banner geometry intact. ============================================================ */ #zumi-native-about .zna-hero::before{ content:""; position:absolute; inset:0; z-index:0; background:rgba(7,5,4,.12); pointer-events:none; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ display:inline-flex!important; align-items:center!important; justify-self:start!important; width:max-content!important; gap:8px!important; color:#F1C7A4!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker::before{ content:""; flex:0 0 auto; width:24px; height:2px; border-radius:999px; background:currentColor; } /* ============================================================ v1.0.40 — COMPACT WHO WE ARE SECTION Reduce the vertical footprint and reading measure of the company introduction on every viewport without changing the rest of the page. ============================================================ */ #zumi-native-about .zna-story{ padding:clamp(28px,2.6vw,48px)!important; } #zumi-native-about .zna-story .zna-section-head{ gap:clamp(18px,2.6vw,46px)!important; margin-bottom:clamp(18px,1.55vw,28px)!important; align-items:center!important; } #zumi-native-about .zna-story .zna-section-head h2{ font-size:clamp(28px,2.5vw,48px)!important; line-height:1.04!important; } #zumi-native-about .zna-story .zna-section-head>p{ max-width:720px!important; font-size:clamp(13.5px,.84vw,16px)!important; line-height:1.5!important; } #zumi-native-about .zna-story .zna-values{ gap:10px!important; } #zumi-native-about .zna-story .zna-value{ min-height:168px!important; padding:20px!important; } #zumi-native-about .zna-story .zna-icon-badge{ width:38px!important; height:38px!important; margin-bottom:15px!important; font-size:19px!important; } #zumi-native-about .zna-story .zna-value h3{ margin-bottom:7px!important; font-size:17px!important; } #zumi-native-about .zna-story .zna-value p{ font-size:13px!important; line-height:1.52!important; } @media(max-width:760px){ #zumi-native-about .zna-story{ padding:22px 18px!important; } #zumi-native-about .zna-story .zna-section-head{ gap:10px!important; margin-bottom:17px!important; } #zumi-native-about .zna-story .zna-eyebrow{ margin-bottom:10px!important; } #zumi-native-about .zna-story .zna-section-head h2{ font-size:clamp(27px,7.8vw,36px)!important; } #zumi-native-about .zna-story .zna-section-head>p{ font-size:13.5px!important; line-height:1.48!important; } #zumi-native-about .zna-story .zna-value{ min-height:0!important; padding:18px!important; } } /* ============================================================ v1.0.41 — WHO WE ARE MAIN COPY BELOW VALUE CARDS Keep the company story inside Who We Are, but place it after the Local operations / Practical planning / International support cards. ============================================================ */ #zumi-native-about .zna-story .zna-section-head{ grid-template-columns:1fr!important; max-width:980px; } #zumi-native-about .zna-story-main-copy{ margin-top:clamp(18px,1.5vw,26px); padding-top:clamp(16px,1.25vw,22px); border-top:1px solid rgba(20,20,20,.10); } #zumi-native-about .zna-story-main-copy p{ margin:0; max-width:1240px; color:var(--zna-muted); font-size:clamp(14.5px,.92vw,17px); line-height:1.58; } @media(max-width:760px){ #zumi-native-about .zna-story-main-copy{ margin-top:16px; padding-top:14px; } #zumi-native-about .zna-story-main-copy p{ font-size:13.5px; line-height:1.5; } } /* ============================================================ v1.0.42 — EMPHASIZED WHO WE ARE MAIN STATEMENT Give the company story more breathing room below the value cards and treat it as a primary statement rather than ordinary body copy. ============================================================ */ #zumi-native-about .zna-story-main-copy{ position:relative; margin-top:clamp(38px,3.1vw,58px)!important; padding:clamp(24px,2.15vw,34px) clamp(24px,2.5vw,40px)!important; border:1px solid rgba(51,38,29,.12)!important; border-radius:4px; background: radial-gradient(circle at 12% 0%,rgba(232,94,42,.085),transparent 32%), linear-gradient(180deg,#fff 0%,#fbf8f5 100%); box-shadow:0 14px 38px rgba(38,28,22,.075); overflow:hidden; } #zumi-native-about .zna-story-main-copy::before{ content:""; position:absolute; top:-1px; left:clamp(24px,2.5vw,40px); width:clamp(94px,8vw,142px); height:4px; border-radius:0 0 999px 999px; background:linear-gradient(90deg,#E85E2A 0%,#f2a51a 100%); } #zumi-native-about .zna-story-main-copy p{ margin:0!important; max-width:1180px!important; color:#322c29!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:clamp(16px,1.05vw,19px)!important; line-height:1.62!important; font-weight:500!important; letter-spacing:-.012em; } @media(max-width:760px){ #zumi-native-about .zna-story-main-copy{ margin-top:28px!important; padding:21px 19px 20px!important; border-radius:4px; box-shadow:0 10px 28px rgba(38,28,22,.065); } #zumi-native-about .zna-story-main-copy::before{ left:19px; width:88px; height:3px; } #zumi-native-about .zna-story-main-copy p{ font-size:14.5px!important; line-height:1.56!important; } } /* ============================================================ v1.0.43 — TIGHTER VALUE CARDS + PROMINENT EXPERIENCE STATEMENT Larger card typography with less vertical padding. The company statement sits clearly below the cards and reads as a major section. ============================================================ */ #zumi-native-about .zna-story .zna-value{ min-height:0!important; padding:14px 20px 15px!important; } #zumi-native-about .zna-story .zna-icon-badge{ width:36px!important; height:36px!important; margin-bottom:9px!important; border-radius:4px !important; font-size:18px!important; } #zumi-native-about .zna-story .zna-value h3{ margin:0 0 4px!important; font-size:clamp(18px,1.05vw,20px)!important; line-height:1.16!important; } #zumi-native-about .zna-story .zna-value p{ font-size:clamp(14px,.82vw,15px)!important; line-height:1.44!important; } #zumi-native-about .zna-story-main-copy{ position:relative; isolation:isolate; margin-top:clamp(68px,5.4vw,102px)!important; padding:clamp(34px,3vw,52px) clamp(30px,3.4vw,58px)!important; overflow:hidden; border:1px solid rgba(255,255,255,.10)!important; border-radius:4px !important; background: radial-gradient(circle at 88% 18%,rgba(232,94,42,.18),transparent 28%), linear-gradient(120deg,#241A16 0%,#171210 64%,#12100F 100%)!important; box-shadow:0 20px 52px rgba(32,20,13,.16)!important; } #zumi-native-about .zna-story-main-copy::before{ content:""!important; position:absolute!important; top:0!important; left:clamp(30px,3.4vw,58px)!important; width:clamp(110px,9vw,168px)!important; height:5px!important; border-radius:0 0 999px 999px!important; background:linear-gradient(90deg,#E85E2A 0%,#F2A51A 100%)!important; z-index:2; } #zumi-native-about .zna-story-main-copy::after{ content:"25+"; position:absolute; z-index:-1; right:clamp(18px,3.4vw,56px); top:50%; transform:translateY(-52%); color:rgba(255,255,255,.035); font-family:"Roboto", Arial, Helvetica, sans-serif; font-size:clamp(92px,10vw,190px); font-weight:700; line-height:.8; letter-spacing:-.08em; pointer-events:none; } #zumi-native-about .zna-story-main-copy p{ position:relative; z-index:1; margin:0!important; max-width:1220px!important; color:rgba(255,255,255,.94)!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:clamp(17px,1.12vw,21px)!important; line-height:1.58!important; font-weight:500!important; letter-spacing:-.015em!important; } @media(max-width:760px){ #zumi-native-about .zna-story .zna-value{ padding:12px 16px 13px!important; } #zumi-native-about .zna-story .zna-icon-badge{ width:34px!important; height:34px!important; margin-bottom:8px!important; font-size:17px!important; } #zumi-native-about .zna-story .zna-value h3{ margin-bottom:3px!important; font-size:18px!important; } #zumi-native-about .zna-story .zna-value p{ font-size:14px!important; line-height:1.42!important; } #zumi-native-about .zna-story-main-copy{ margin-top:46px!important; padding:27px 21px 25px!important; border-radius:4px !important; } #zumi-native-about .zna-story-main-copy::before{ left:21px!important; width:96px!important; height:4px!important; } #zumi-native-about .zna-story-main-copy::after{ right:14px; font-size:84px; } #zumi-native-about .zna-story-main-copy p{ font-size:15.5px!important; line-height:1.54!important; } } /* ============================================================ v1.0.44 — PHOTO-LED WHO WE ARE CARDS + MOUNTAIN EXPERIENCE PANEL Hero / approach banners intentionally untouched. ============================================================ */ #zumi-native-about .zna-story{ padding:clamp(30px,2.7vw,50px)!important; } #zumi-native-about .zna-story .zna-section-head{ max-width:1280px!important; margin-bottom:clamp(22px,1.8vw,34px)!important; } #zumi-native-about .zna-story .zna-values{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:clamp(10px,.9vw,16px)!important; } #zumi-native-about .zna-story .zna-value{ position:relative!important; isolation:isolate!important; display:flex!important; flex-direction:column!important; justify-content:flex-end!important; min-height:clamp(220px,15vw,285px)!important; padding:clamp(20px,1.5vw,26px) clamp(20px,1.6vw,28px)!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.16)!important; border-radius:4px !important; background:#181210!important; box-shadow:0 14px 34px rgba(24,15,10,.14)!important; color:#fff!important; } #zumi-native-about .zna-story .zna-value::before{ content:""; position:absolute; z-index:-2; inset:-2px; background-position:center; background-repeat:no-repeat; background-size:cover; transform:scale(1.015); transition:transform .28s ease; } #zumi-native-about .zna-story .zna-value::after{ content:""; position:absolute; z-index:-1; inset:0; background: linear-gradient(180deg,rgba(12,9,8,.30) 0%,rgba(12,9,8,.35) 36%,rgba(10,8,7,.86) 100%), linear-gradient(90deg,rgba(20,12,8,.24),rgba(20,12,8,.04) 62%); pointer-events:none; } #zumi-native-about .zna-story .zna-value:hover::before{ transform:scale(1.035); } #zumi-native-about .zna-story .zna-value--1::before{ background-image:url("https://zumirentals.com/wp-content/uploads/2026/09/windhoek-sunset-hero.webp"); background-position:center 48%; } #zumi-native-about .zna-story .zna-value--2::before{ background-image:url("https://upload.wikimedia.org/wikipedia/commons/f/fd/Namibia_map.png"); background-position:center 48%; filter:sepia(.72) saturate(1.4) contrast(1.06) brightness(.82); transform:scale(1.18); } #zumi-native-about .zna-story .zna-value--2:hover::before{ transform:scale(1.20); } #zumi-native-about .zna-story .zna-value--3::before{ background-image:url("https://images.unsplash.com/photo-1762800276451-5d9b2e0d87ed?auto=format&fit=crop&fm=jpg&q=82&w=1800"); background-position:center 67%; filter:saturate(1.18) contrast(1.04) brightness(.93); } #zumi-native-about .zna-story .zna-icon-badge{ position:absolute!important; top:clamp(16px,1.25vw,22px)!important; left:clamp(16px,1.25vw,22px)!important; z-index:3!important; display:grid!important; place-items:center!important; width:clamp(46px,3vw,56px)!important; height:clamp(46px,3vw,56px)!important; margin:0!important; border:1px solid rgba(232,94,42,.92)!important; border-radius:4px !important; background:rgba(14,11,9,.70)!important; box-shadow:0 8px 24px rgba(0,0,0,.20)!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; } #zumi-native-about .zna-story .zna-icon-badge img{ display:block!important; width:clamp(23px,1.55vw,29px)!important; height:clamp(23px,1.55vw,29px)!important; object-fit:contain!important; } #zumi-native-about .zna-story .zna-value__copy{ position:relative; z-index:2; max-width:calc(100% - 48px); } #zumi-native-about .zna-story .zna-value h3{ margin:0 0 5px!important; color:#fff!important; font-size:clamp(21px,1.45vw,28px)!important; font-weight:700!important; line-height:1.08!important; letter-spacing:-.035em!important; text-shadow:0 3px 15px rgba(0,0,0,.42); } #zumi-native-about .zna-story .zna-value p{ margin:0!important; color:rgba(255,255,255,.90)!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:clamp(13.5px,.86vw,16px)!important; font-weight:400!important; line-height:1.48!important; text-shadow:0 2px 12px rgba(0,0,0,.62); } #zumi-native-about .zna-story .zna-value__arrow{ position:absolute; z-index:3; right:clamp(16px,1.25vw,22px); bottom:clamp(16px,1.25vw,22px); display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.68); border-radius:50%; background:rgba(12,10,9,.28); color:#fff; font-size:20px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } #zumi-native-about .zna-story-main-copy{ position:relative!important; isolation:isolate!important; display:grid!important; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important; gap:clamp(34px,4.2vw,82px)!important; align-items:center!important; min-height:clamp(285px,21vw,420px)!important; margin-top:clamp(56px,4.6vw,88px)!important; padding:clamp(34px,3.3vw,62px) clamp(32px,3.8vw,72px)!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:4px !important; background: radial-gradient(circle at 88% 18%,rgba(232,94,42,.21),transparent 28%), linear-gradient(90deg,rgba(12,9,8,.93) 0%,rgba(15,10,8,.82) 48%,rgba(16,10,7,.69) 100%), url("https://images.unsplash.com/photo-1663819196711-11812080ec19?auto=format&fit=crop&fm=jpg&q=82&w=2600") center 53% / cover no-repeat!important; box-shadow:0 20px 52px rgba(32,20,13,.18)!important; } #zumi-native-about .zna-story-main-copy::before{ content:""!important; position:absolute!important; top:0!important; left:clamp(32px,3.8vw,72px)!important; z-index:4!important; width:clamp(100px,8vw,156px)!important; height:5px!important; border-radius:0 0 999px 999px!important; background:linear-gradient(90deg,#E85E2A 0%,#F2A51A 100%)!important; } #zumi-native-about .zna-story-main-copy::after{ content:none!important; } #zumi-native-about .zna-story-main-copy__lead, #zumi-native-about .zna-story-main-copy__body{ position:relative; z-index:3; } #zumi-native-about .zna-story-main-copy__lead h3{ max-width:780px; margin:0; color:#fff; font-size:clamp(26px,2.15vw,44px); font-weight:700; line-height:1.12; letter-spacing:-.045em; text-wrap:balance; text-shadow:0 4px 18px rgba(0,0,0,.32); } #zumi-native-about .zna-story-main-copy__accent{ color:#E85E2A; } #zumi-native-about .zna-story-main-copy__body{ min-height:132px; display:flex; align-items:center; padding-left:clamp(26px,2.5vw,46px); border-left:1px solid rgba(255,139,76,.68); } #zumi-native-about .zna-story-main-copy__body p{ margin:0!important; max-width:780px!important; color:rgba(255,255,255,.88)!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:clamp(14.5px,.98vw,18px)!important; font-weight:400!important; line-height:1.58!important; letter-spacing:-.01em!important; text-shadow:0 2px 12px rgba(0,0,0,.34); } #zumi-native-about .zna-story-main-copy__ghost{ position:absolute; z-index:2; right:clamp(24px,3vw,56px); bottom:clamp(12px,1.5vw,26px); color:rgba(232,94,42,.08); -webkit-text-stroke:1px rgba(232,94,42,.35); font-family:"Roboto", Arial, Helvetica, sans-serif; font-size:clamp(94px,11vw,210px); font-weight:700; line-height:.74; letter-spacing:-.08em; pointer-events:none; user-select:none; } @media(max-width:980px){ #zumi-native-about .zna-story .zna-values{ grid-template-columns:1fr!important; } #zumi-native-about .zna-story .zna-value{ min-height:220px!important; } #zumi-native-about .zna-story-main-copy{ grid-template-columns:1fr!important; gap:24px!important; min-height:0!important; } #zumi-native-about .zna-story-main-copy__body{ min-height:0; padding:22px 0 0!important; border-left:0!important; border-top:1px solid rgba(255,139,76,.54); } #zumi-native-about .zna-story-main-copy__body p{ max-width:820px!important; } #zumi-native-about .zna-story-main-copy__ghost{ font-size:clamp(90px,18vw,150px); } } @media(max-width:760px){ #zumi-native-about .zna-story{ padding:22px 18px!important; } #zumi-native-about .zna-story .zna-values{ gap:10px!important; } #zumi-native-about .zna-story .zna-value{ min-height:195px!important; padding:18px!important; border-radius:4px !important; } #zumi-native-about .zna-story .zna-icon-badge{ top:15px!important; left:15px!important; width:44px!important; height:44px!important; border-radius:4px !important; } #zumi-native-about .zna-story .zna-icon-badge img{ width:23px!important; height:23px!important; } #zumi-native-about .zna-story .zna-value__copy{ max-width:calc(100% - 44px); } #zumi-native-about .zna-story .zna-value h3{ font-size:21px!important; } #zumi-native-about .zna-story .zna-value p{ font-size:13.5px!important; line-height:1.44!important; } #zumi-native-about .zna-story .zna-value__arrow{ right:15px; bottom:15px; width:38px; height:38px; font-size:18px; } #zumi-native-about .zna-story-main-copy{ margin-top:38px!important; padding:28px 21px 26px!important; gap:21px!important; border-radius:4px !important; background: linear-gradient(180deg,rgba(12,9,8,.84),rgba(14,9,7,.82)), url("https://images.unsplash.com/photo-1663819196711-11812080ec19?auto=format&fit=crop&fm=jpg&q=82&w=1600") center 54% / cover no-repeat!important; } #zumi-native-about .zna-story-main-copy::before{ left:21px!important; width:96px!important; height:4px!important; } #zumi-native-about .zna-story-main-copy__lead h3{ max-width:92%; font-size:clamp(24px,7vw,31px); line-height:1.14; } #zumi-native-about .zna-story-main-copy__body{ padding-top:18px!important; } #zumi-native-about .zna-story-main-copy__body p{ max-width:92%!important; font-size:14px!important; line-height:1.52!important; } #zumi-native-about .zna-story-main-copy__ghost{ right:12px; bottom:10px; font-size:82px; opacity:.72; } } /* ============================================================ v1.0.45 — MATCH GENERATED WHO-WE-ARE VISUAL Keep both hero banners unchanged. ============================================================ */ #zumi-native-about .zna-story .zna-values{ gap:clamp(12px,1vw,18px)!important; } #zumi-native-about .zna-story .zna-value{ min-height:clamp(220px,15.8vw,305px)!important; padding:clamp(21px,1.55vw,28px)!important; border:1px solid rgba(68,45,31,.52)!important; border-radius:4px !important; box-shadow:0 12px 34px rgba(31,18,10,.14)!important; } #zumi-native-about .zna-story .zna-value::after{ background: linear-gradient(180deg,rgba(12,8,6,.13) 0%,rgba(12,8,6,.18) 33%,rgba(10,7,5,.83) 78%,rgba(8,6,5,.96) 100%), linear-gradient(90deg,rgba(18,10,6,.11),rgba(18,10,6,.02) 68%)!important; } #zumi-native-about .zna-story .zna-value--1::before{ background-image:url("https://zumirentals.com/wp-content/uploads/2026/09/windhoek-sunset-hero.webp")!important; background-position:center 52%!important; filter:saturate(1.05) contrast(1.02) brightness(.94)!important; } #zumi-native-about .zna-story .zna-value--2::before{ background-image:url("../images/practical-planning-flamingos-v48.webp")!important; background-position:center 50%!important; filter:saturate(1.04) contrast(1.03) brightness(.90)!important; transform:scale(1.01)!important; } #zumi-native-about .zna-story .zna-value--2:hover::before{ transform:scale(1.025)!important; } #zumi-native-about .zna-story .zna-value--3::before{ background-image:url("../images/international-support-airplane-v48.webp")!important; background-position:center 50%!important; filter:saturate(1.08) contrast(1.04) brightness(.93)!important; transform:scale(1.01)!important; } #zumi-native-about .zna-story .zna-value--3:hover::before{ transform:scale(1.025)!important; } #zumi-native-about .zna-story .zna-icon-badge{ top:clamp(18px,1.3vw,24px)!important; left:clamp(18px,1.3vw,24px)!important; width:clamp(48px,3.15vw,60px)!important; height:clamp(48px,3.15vw,60px)!important; border:1.5px solid #E85E2A!important; border-radius:4px !important; background:rgba(15,11,9,.80)!important; box-shadow:0 7px 22px rgba(0,0,0,.22)!important; backdrop-filter:blur(7px)!important; -webkit-backdrop-filter:blur(7px)!important; } #zumi-native-about .zna-story .zna-icon-badge img{ width:clamp(24px,1.65vw,31px)!important; height:clamp(24px,1.65vw,31px)!important; filter:brightness(0) saturate(100%) invert(53%) sepia(94%) saturate(2081%) hue-rotate(341deg) brightness(101%) contrast(94%)!important; } #zumi-native-about .zna-story .zna-value__copy{ max-width:100%!important; padding-right:0!important; } #zumi-native-about .zna-story .zna-value h3{ margin:0 0 6px!important; font-size:clamp(22px,1.48vw,29px)!important; line-height:1.07!important; text-shadow:0 3px 16px rgba(0,0,0,.55)!important; } #zumi-native-about .zna-story .zna-value p{ max-width:94%!important; color:rgba(255,255,255,.92)!important; font-size:clamp(13.5px,.88vw,16.5px)!important; line-height:1.46!important; text-shadow:0 2px 12px rgba(0,0,0,.70)!important; } #zumi-native-about .zna-story .zna-value__arrow{ display:none!important; } /* Founded / 25+ panel: keep the current copy arrangement, but match the generated dark mountain/orange treatment and pull the body copy closer to its orange divider. */ #zumi-native-about .zna-story-main-copy{ background: radial-gradient(circle at 91% 18%,rgba(232,94,42,.24),transparent 31%), linear-gradient(90deg,rgba(10,8,7,.95) 0%,rgba(14,9,7,.87) 48%,rgba(19,10,6,.66) 100%), url("https://images.unsplash.com/photo-1663819196711-11812080ec19?auto=format&fit=crop&fm=jpg&q=84&w=2600") center 53% / cover no-repeat!important; border-color:rgba(232,94,42,.42)!important; } #zumi-native-about .zna-story-main-copy__body{ padding-left:clamp(14px,1.15vw,22px)!important; border-left:1px solid rgba(232,94,42,.86)!important; } #zumi-native-about .zna-story-main-copy__ghost{ color:rgba(232,94,42,.045)!important; -webkit-text-stroke:1px rgba(232,94,42,.38)!important; } @media(max-width:980px){ #zumi-native-about .zna-story .zna-value{ min-height:230px!important; } #zumi-native-about .zna-story-main-copy__body{ padding:18px 0 0!important; } } @media(max-width:760px){ #zumi-native-about .zna-story .zna-value{ min-height:205px!important; padding:18px!important; border-radius:4px !important; } #zumi-native-about .zna-story .zna-icon-badge{ top:15px!important; left:15px!important; width:46px!important; height:46px!important; border-radius:4px !important; } #zumi-native-about .zna-story .zna-value h3{ font-size:21px!important; } #zumi-native-about .zna-story .zna-value p{ max-width:100%!important; font-size:13.5px!important; } #zumi-native-about .zna-story-main-copy__body{ padding-top:16px!important; } } /* ============================================================ v1.0.46 — RELIABLE CARD IMAGES + MOBILE DIVIDER CLEANUP Use absolute WordPress/plugin URLs supplied inline so cache/minify plugins cannot break relative image paths. ============================================================ */ #zumi-native-about .zna-story .zna-value::before{ background-image:var(--zna-card-image)!important; } @media(max-width:980px){ #zumi-native-about .zna-story-main-copy__body{ border-left:0!important; border-top:1px solid rgba(232,94,42,.62)!important; } } @media(max-width:760px){ #zumi-native-about .zna-story-main-copy__body{ border-left:0!important; } } /* ============================================================ v1.0.47 — PUBLIC CARD MEDIA + COMPACT 25+ PANEL ============================================================ */ #zumi-native-about .zna-story .zna-value::before{ background-image:var(--zna-card-image)!important; } /* Pull the 25+ panel closer to the cards and reduce unnecessary vertical bulk. */ #zumi-native-about .zna-story-main-copy{ min-height:clamp(245px,17vw,330px)!important; margin-top:clamp(24px,2vw,36px)!important; padding:clamp(24px,2.15vw,38px) clamp(28px,3.2vw,60px)!important; gap:clamp(20px,2.5vw,46px)!important; } #zumi-native-about .zna-story-main-copy__body{ padding-left:clamp(12px,.9vw,17px)!important; } @media(max-width:980px){ #zumi-native-about .zna-story-main-copy{ margin-top:24px!important; padding:25px 24px 23px!important; gap:17px!important; } #zumi-native-about .zna-story-main-copy__body{ min-height:0!important; padding:15px 0 0!important; border-left:0!important; border-right:0!important; border-bottom:0!important; border-top:1px solid rgba(232,94,42,.62)!important; } } @media(max-width:760px){ #zumi-native-about .zna-story-main-copy{ margin-top:20px!important; padding:22px 18px 20px!important; gap:14px!important; } #zumi-native-about .zna-story-main-copy__body{ padding:13px 0 0!important; border-left:none!important; border-right:none!important; border-bottom:none!important; border-top:1px solid rgba(232,94,42,.62)!important; } } /* ============================================================ v1.0.48 — USER PHOTO CARD MEDIA + MID-SIZE 25+ READABILITY ============================================================ */ /* The practical-planning and international-support WebPs are bundled in the plugin and published to WordPress Uploads on activation/init. The inline --zna-card-image values use those direct public upload URLs. */ #zumi-native-about .zna-story .zna-value--2::before{ background-position:center 47%!important; filter:saturate(.94) contrast(1.03) brightness(.78)!important; transform:scale(1.01)!important; } #zumi-native-about .zna-story .zna-value--3::before{ background-position:center 48%!important; filter:saturate(1.07) contrast(1.03) brightness(.82)!important; transform:scale(1.01)!important; } /* Keep the 25+ motif prominent on large monitors, but smaller and quieter on laptop/tablet widths where it otherwise competes with the body copy. */ @media (min-width:981px) and (max-width:1250px){ #zumi-native-about .zna-story-main-copy__ghost{ right:18px!important; bottom:12px!important; font-size:clamp(74px,8.4vw,102px)!important; opacity:.54!important; } } @media (min-width:761px) and (max-width:980px){ #zumi-native-about .zna-story-main-copy__ghost{ right:14px!important; bottom:10px!important; font-size:clamp(64px,9vw,82px)!important; opacity:.46!important; } } /* ============================================================ v1.0.49 — EXTEND MOBILE-STYLE APPROACH BANNER TO TABLET + RESERVE A CLEAN 25+ FOOTER ZONE ON NON-LARGE SCREENS ============================================================ */ /* 761–980px now uses the same stacked visual treatment as phones: icon and title above, more open sunset/Hilux image in the middle, and the blurred description panel lower in the banner. Screens above 980px retain the existing desktop presentation unchanged. */ @media (min-width:761px) and (max-width:980px){ #zumi-native-about .zna-hero-card--below{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:0!important; width:calc(100% - 30px)!important; max-width:none!important; min-height:0!important; height:auto!important; margin-left:15px!important; margin-right:15px!important; padding:24px 22px 20px!important; background:#120d0a!important; } #zumi-native-about .zna-hero-card--below::after{ content:""!important; position:absolute!important; top:0!important; left:0!important; right:0!important; bottom:auto!important; height:390px!important; z-index:0!important; pointer-events:none!important; background: linear-gradient(180deg,rgba(13,10,8,.34) 0%,rgba(13,10,8,.30) 48%,rgba(13,10,8,.58) 82%,rgba(18,13,10,1) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 50% / cover no-repeat!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ flex:0 0 auto!important; width:50px!important; height:50px!important; margin:0 0 14px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ display:flex!important; flex-direction:column!important; align-items:stretch!important; width:100%!important; min-height:0!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ flex:0 0 auto!important; margin-bottom:7px!important; } #zumi-native-about .zna-hero-card--below strong{ flex:0 0 auto!important; max-width:100%!important; font-size:clamp(28px,4.2vw,40px)!important; line-height:1.04!important; } #zumi-native-about .zna-hero-card--below p{ flex:0 0 auto!important; width:100%!important; max-width:none!important; margin:142px 0 0!important; padding:17px 19px!important; min-height:0!important; font-size:15px!important; line-height:1.48!important; font-weight:400!important; border-radius:4px !important; background:linear-gradient(135deg,rgba(35,25,21,.52) 0%,rgba(24,19,16,.57) 52%,rgba(18,16,14,.61) 100%)!important; backdrop-filter:blur(22px) saturate(112%)!important; -webkit-backdrop-filter:blur(22px) saturate(112%)!important; box-shadow:0 14px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)!important; } } /* At laptop/tablet widths, give the 25+ motif its own reserved footer zone instead of letting it sit behind the body copy. The panel gains height only at the bottom; large monitors keep the existing layout. */ @media (max-width:1250px){ #zumi-native-about .zna-story-main-copy{ padding-bottom:118px!important; } #zumi-native-about .zna-story-main-copy__ghost{ top:auto!important; right:22px!important; bottom:18px!important; transform:none!important; font-size:clamp(68px,8vw,96px)!important; line-height:.72!important; opacity:.62!important; } } @media (max-width:980px){ #zumi-native-about .zna-story-main-copy{ padding-bottom:108px!important; } #zumi-native-about .zna-story-main-copy__ghost{ right:18px!important; bottom:16px!important; font-size:clamp(66px,10vw,86px)!important; opacity:.58!important; } } @media (max-width:760px){ #zumi-native-about .zna-story-main-copy{ padding-bottom:94px!important; } #zumi-native-about .zna-story-main-copy__ghost{ right:14px!important; bottom:14px!important; font-size:clamp(58px,17vw,78px)!important; opacity:.55!important; } } /* ============================================================ v1.0.51 — CONSISTENT STACKED APPROACH THROUGH SMALL DESKTOP + TALLER LARGE-DESKTOP IMAGE REVEAL ============================================================ */ /* Carry the same stacked One Team treatment through the next responsive tier so 981–1199px no longer falls back to the compressed desktop row. */ @media (min-width:761px) and (max-width:1199px){ #zumi-native-about .zna-hero-card--below{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:0!important; width:calc(100% - 30px)!important; max-width:none!important; min-height:clamp(460px,47vw,565px)!important; height:auto!important; margin-left:15px!important; margin-right:15px!important; padding:26px 28px 24px!important; background:#120d0a!important; } #zumi-native-about .zna-hero-card--below::after{ content:""!important; position:absolute!important; inset:0!important; height:auto!important; z-index:0!important; pointer-events:none!important; background: linear-gradient(180deg,rgba(13,10,8,.30) 0%,rgba(13,10,8,.24) 36%,rgba(13,10,8,.39) 63%,rgba(18,13,10,.90) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 52% / cover no-repeat!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ flex:0 0 auto!important; width:58px!important; height:58px!important; margin:0 0 16px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ display:flex!important; flex:1 1 auto!important; flex-direction:column!important; align-items:stretch!important; width:100%!important; min-height:0!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ flex:0 0 auto!important; margin-bottom:8px!important; } #zumi-native-about .zna-hero-card--below strong{ flex:0 0 auto!important; max-width:100%!important; font-size:clamp(31px,4vw,46px)!important; line-height:1.03!important; } #zumi-native-about .zna-hero-card--below p{ flex:0 0 auto!important; width:100%!important; max-width:none!important; margin:auto 0 0!important; padding:17px 20px!important; min-height:0!important; font-size:clamp(15px,1.55vw,18px)!important; line-height:1.48!important; font-weight:400!important; border-radius:4px !important; background:linear-gradient(135deg,rgba(35,25,21,.52) 0%,rgba(24,19,16,.57) 52%,rgba(18,16,14,.61) 100%)!important; backdrop-filter:blur(22px) saturate(112%)!important; -webkit-backdrop-filter:blur(22px) saturate(112%)!important; box-shadow:0 14px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)!important; } } /* Keep the established wide-screen horizontal layout, but give the image field a little more vertical room so the Hilux tyres are visible instead of being cropped off at the bottom. */ @media (min-width:1200px) and (max-width:1599px){ #zumi-native-about .zna-hero-card--below{ min-height:350px!important; padding-top:32px!important; padding-bottom:44px!important; background-position:center 57%!important; } } @media (min-width:1600px){ #zumi-native-about .zna-hero-card--below{ min-height:410px!important; padding-bottom:58px!important; background-position:center 57%!important; } } /* v1.0.54 — reverted v1.0.52/v1.0.53 text emphasis changes; restored v1.0.51 approach banner typography. */ /* ============================================================ v1.0.58 — BASED DIRECTLY ON v1.0.54 Only the requested ordering/responsive corrections are applied here. No v1.0.55+ booking-flow or copy/design changes are included. ============================================================ */ /* Founded / 25+ statement is now its own full-width panel immediately after the main About hero. Keep the same site gutters as other sections. */ #zumi-native-about .zna-story-main-copy--standalone{ margin:0 15px!important; } /* Keep the Our Approach eyebrow pinned to the left on every layout tier. This neutralises older grid/flex alignment rules that could push it right. */ #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ align-self:flex-start!important; justify-self:start!important; margin-left:0!important; margin-right:auto!important; text-align:left!important; } /* The reserved 25+ footer zone from v1.0.49 was visually too deep on laptop/tablet/mobile views. Trim only that lower empty area while keeping the 25+ below the copy rather than behind it. */ @media (max-width:1250px){ #zumi-native-about .zna-story-main-copy--standalone{ min-height:0!important; padding-bottom:78px!important; } } @media (max-width:980px){ #zumi-native-about .zna-story-main-copy--standalone{ padding-bottom:70px!important; } } @media (max-width:760px){ #zumi-native-about .zna-story-main-copy--standalone{ margin:0 12px!important; padding-bottom:64px!important; } } /* ============================================================ v1.0.59 — LEADERSHIP SECTION REFINEMENT ============================================================ */ /* Remove the eyebrow row entirely, pull the leadership section closer to the section above, and let the title lead directly into the two cards. */ #zumi-native-about .zna-leadership{ padding-top:clamp(22px,1.85vw,34px)!important; padding-bottom:clamp(28px,2.4vw,46px)!important; } #zumi-native-about .zna-leadership__head{ margin:0 0 clamp(18px,1.6vw,28px)!important; } #zumi-native-about .zna-leadership__head h2{ margin:0!important; color:var(--zna-ink)!important; font-size:clamp(32px,3vw,60px)!important; font-weight:700!important; line-height:1.02!important; letter-spacing:-.045em!important; text-wrap:balance!important; } /* The leadership statement now sits beneath both people rather than in the heading row. It remains prominent but secondary to the profiles. */ #zumi-native-about .zna-leadership__summary{ max-width:980px!important; margin:clamp(20px,1.8vw,30px) auto 0!important; color:var(--zna-muted)!important; font-size:clamp(15px,1.02vw,19px)!important; line-height:1.62!important; text-align:center!important; } /* Keep the people centred in their photo panes on the horizontal card layouts. This avoids faces/bodies being pushed against the crop edge at intermediate desktop and tablet widths. */ #zumi-native-about .zna-person--lead .zna-person__media img{ object-position:center center!important; } @media (min-width:761px) and (max-width:1250px){ #zumi-native-about .zna-leadership{ padding-top:20px!important; } #zumi-native-about .zna-person--lead .zna-person__media img{ object-position:center center!important; } } @media (max-width:760px){ #zumi-native-about .zna-leadership{ padding-top:20px!important; padding-bottom:24px!important; } #zumi-native-about .zna-leadership__head{ margin-bottom:18px!important; } #zumi-native-about .zna-leadership__summary{ margin-top:20px!important; font-size:14px!important; line-height:1.55!important; text-align:left!important; } #zumi-native-about .zna-person--lead .zna-person__media img{ object-position:center center!important; } } /* ============================================================ v1.0.60 — TECHNOLOGY / TRANSPARENCY / SUPPORT PRINCIPLES Replaces the three photographic Who We Are cards with one large technology feature and two supporting half-width principles. ============================================================ */ #zumi-native-about .zna-story .zna-values--principles{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:clamp(14px,1.35vw,22px)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value{ position:relative!important; isolation:isolate!important; min-height:0!important; overflow:hidden!important; border:1px solid rgba(232,94,42,.28)!important; border-radius:4px !important; background: radial-gradient(circle at 100% 0%,rgba(232,94,42,.14),transparent 38%), linear-gradient(145deg,#18110e 0%,#120e0c 100%)!important; box-shadow:0 14px 38px rgba(30,18,11,.12)!important; color:#fff!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value::before, #zumi-native-about .zna-story .zna-values--principles .zna-value::after{ content:none!important; display:none!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ grid-column:1 / -1!important; display:grid!important; grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important; align-items:center!important; gap:clamp(30px,4vw,72px)!important; min-height:clamp(365px,24vw,470px)!important; padding:clamp(30px,3vw,54px) clamp(30px,3.5vw,66px)!important; background: radial-gradient(circle at 82% 18%,rgba(232,94,42,.22),transparent 34%), radial-gradient(circle at 2% 100%,rgba(232,94,42,.10),transparent 35%), linear-gradient(120deg,#17100d 0%,#100d0b 62%,#17100d 100%)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology .zna-value__copy{ max-width:780px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ display:flex!important; align-items:flex-start!important; min-height:clamp(275px,18vw,340px)!important; padding:clamp(28px,2.5vw,44px)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__copy{ position:relative!important; z-index:2!important; width:100%!important; max-width:none!important; padding:0!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__heading{ display:flex!important; align-items:center!important; gap:clamp(12px,1vw,17px)!important; margin:0 0 clamp(16px,1.35vw,22px)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__title-icon{ display:grid!important; place-items:center!important; flex:0 0 auto!important; width:clamp(42px,3vw,54px)!important; height:clamp(42px,3vw,54px)!important; border:1px solid rgba(232,94,42,.56)!important; border-radius:4px !important; background:rgba(232,94,42,.08)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__title-icon img{ display:block!important; width:clamp(24px,1.7vw,31px)!important; height:clamp(24px,1.7vw,31px)!important; object-fit:contain!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value h3{ margin:0!important; max-width:none!important; color:#fff!important; font-size:clamp(24px,1.72vw,34px)!important; font-weight:700!important; line-height:1.08!important; letter-spacing:-.035em!important; text-shadow:none!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology h3{ font-size:clamp(30px,2.4vw,48px)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value p{ margin:0!important; max-width:none!important; color:rgba(255,255,255,.82)!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:clamp(14px,.93vw,17px)!important; font-weight:400!important; line-height:1.64!important; letter-spacing:-.005em!important; text-shadow:none!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology p{ max-width:760px!important; font-size:clamp(15px,1vw,18px)!important; line-height:1.66!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__link{ display:inline-flex!important; align-items:center!important; margin-top:clamp(20px,1.6vw,28px)!important; color:#E85E2A!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:clamp(14px,.92vw,16.5px)!important; font-weight:600!important; line-height:1.35!important; text-decoration:none!important; border-bottom:1px solid rgba(232,94,42,.46)!important; padding-bottom:3px!important; transition:color .2s ease,border-color .2s ease,transform .2s ease!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__link:hover, #zumi-native-about .zna-story .zna-values--principles .zna-value__link:focus-visible{ color:#ffad7b!important; border-bottom-color:#ffad7b!important; transform:translateX(2px)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__visual{ position:relative!important; z-index:2!important; display:flex!important; align-items:center!important; justify-content:center!important; min-width:0!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__visual::before{ content:""!important; position:absolute!important; width:78%!important; aspect-ratio:1!important; border-radius:50%!important; background:rgba(232,94,42,.13)!important; filter:blur(52px)!important; pointer-events:none!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__visual img{ position:relative!important; z-index:1!important; display:block!important; width:min(100%,760px)!important; height:auto!important; object-fit:contain!important; filter:drop-shadow(0 22px 30px rgba(0,0,0,.28))!important; } #zumi-native-about .zna-story .zna-values--principles .zna-icon-badge, #zumi-native-about .zna-story .zna-values--principles .zna-value__arrow{ display:none!important; } @media (max-width:1050px){ #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ grid-template-columns:minmax(0,1fr) minmax(320px,.82fr)!important; gap:28px!important; padding:34px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology h3{ font-size:clamp(28px,3.4vw,40px)!important; } } @media (max-width:820px){ #zumi-native-about .zna-story .zna-values--principles{ grid-template-columns:1fr!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ grid-column:auto!important; grid-template-columns:1fr!important; gap:24px!important; padding:28px 25px 20px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology .zna-value__copy{ max-width:none!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__visual{ min-height:180px!important; margin-top:4px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__visual img{ width:min(100%,620px)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ min-height:0!important; padding:27px 25px!important; } } @media (max-width:520px){ #zumi-native-about .zna-story .zna-values--principles{ gap:11px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value{ border-radius:4px !important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ padding:24px 19px 15px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ padding:24px 19px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__heading{ gap:11px!important; margin-bottom:15px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__title-icon{ width:42px!important; height:42px!important; border-radius:4px !important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__title-icon img{ width:24px!important; height:24px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value h3, #zumi-native-about .zna-story .zna-values--principles .zna-value--technology h3{ font-size:22px!important; line-height:1.12!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value p, #zumi-native-about .zna-story .zna-values--principles .zna-value--technology p{ font-size:13.8px!important; line-height:1.58!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__link{ margin-top:18px!important; font-size:13.8px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__visual{ min-height:145px!important; } } /* ============================================================ v1.0.61 — ORANGE ICONS + SCANNABLE BULLET COPY ============================================================ */ /* Force the supplied SVG icon artwork to the Zumi orange accent. */ #zumi-native-about .zna-story .zna-values--principles .zna-value__title-icon img{ filter:brightness(0) saturate(100%) invert(55%) sepia(90%) saturate(2490%) hue-rotate(338deg) brightness(101%) contrast(92%)!important; } /* New bullet-list copy replacing the paragraph blocks. */ #zumi-native-about .zna-story .zna-values--principles .zna-value__bullets{ list-style:none!important; margin:0!important; padding:0!important; display:grid!important; gap:clamp(11px,.85vw,15px)!important; max-width:none!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__bullets li{ position:relative!important; margin:0!important; padding:0 0 0 21px!important; color:rgba(255,255,255,.84)!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:clamp(14px,.93vw,17px)!important; font-weight:400!important; line-height:1.56!important; letter-spacing:-.005em!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__bullets li::before{ content:""!important; position:absolute!important; left:0!important; top:.68em!important; width:7px!important; height:7px!important; border-radius:50%!important; background:#E85E2A!important; box-shadow:0 0 0 3px rgba(232,94,42,.13)!important; transform:translateY(-50%)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology .zna-value__bullets{ max-width:760px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology .zna-value__bullets li{ font-size:clamp(15px,1vw,18px)!important; line-height:1.58!important; } @media (max-width:520px){ #zumi-native-about .zna-story .zna-values--principles .zna-value__bullets{ gap:10px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__bullets li, #zumi-native-about .zna-story .zna-values--principles .zna-value--technology .zna-value__bullets li{ padding-left:18px!important; font-size:13.8px!important; line-height:1.5!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__bullets li::before{ width:6px!important; height:6px!important; box-shadow:0 0 0 2px rgba(232,94,42,.13)!important; } } /* ============================================================ v1.0.62 — WILDLIFE BACKGROUNDS FOR THE THREE PRINCIPLE PANELS Technology: lion cub Transparency: elephant Support: pelican ============================================================ */ #zumi-native-about .zna-story .zna-values--principles .zna-value{ background-image: linear-gradient(90deg,rgba(13,10,8,.92) 0%,rgba(13,10,8,.82) 48%,rgba(13,10,8,.62) 100%), var(--zna-panel-bg)!important; background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; } /* The large technology panel keeps the photo atmospheric behind the copy and booking-portal mockup without compromising readability. */ #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ background-image: radial-gradient(circle at 78% 18%,rgba(232,94,42,.13),transparent 34%), linear-gradient(90deg,rgba(13,10,8,.95) 0%,rgba(13,10,8,.86) 45%,rgba(13,10,8,.60) 100%), var(--zna-panel-bg)!important; background-position:center 45%!important; } /* Keep the two smaller cards legible while allowing more of the wildlife photography to show on the right side. */ #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ background-image: linear-gradient(90deg,rgba(13,10,8,.94) 0%,rgba(13,10,8,.84) 54%,rgba(13,10,8,.58) 100%), var(--zna-panel-bg)!important; } /* Transparency / elephant */ #zumi-native-about .zna-story .zna-values--principles .zna-value--2{ background-position:center 48%!important; } /* Support / pelican */ #zumi-native-about .zna-story .zna-values--principles .zna-value--3{ background-position:center 48%!important; } /* A subtle inner treatment makes the text/icons sit above busy photo areas. */ #zumi-native-about .zna-story .zna-values--principles .zna-value__copy, #zumi-native-about .zna-story .zna-values--principles .zna-value__visual{ position:relative!important; z-index:2!important; } @media (max-width:820px){ #zumi-native-about .zna-story .zna-values--principles .zna-value, #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ background-image: linear-gradient(90deg,rgba(13,10,8,.95) 0%,rgba(13,10,8,.86) 60%,rgba(13,10,8,.66) 100%), var(--zna-panel-bg)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ background-image: linear-gradient(180deg,rgba(13,10,8,.94) 0%,rgba(13,10,8,.82) 58%,rgba(13,10,8,.72) 100%), var(--zna-panel-bg)!important; background-position:center!important; } } /* ============================================================ v1.0.64 — ABOUT COPY / SECTION ORDER ============================================================ */ /* The Founded / 25+ panel now contains only its main statement. */ #zumi-native-about .zna-story-main-copy--title-only{ grid-template-columns:1fr!important; gap:0!important; min-height:clamp(205px,14vw,270px)!important; padding-top:clamp(34px,3vw,54px)!important; padding-right:clamp(30px,3.8vw,72px)!important; padding-bottom:78px!important; padding-left:clamp(30px,3.8vw,72px)!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead{ width:100%!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead h3{ max-width:980px!important; } @media (max-width:980px){ #zumi-native-about .zna-story-main-copy--title-only{ gap:0!important; min-height:190px!important; padding:30px 24px 76px!important; } } @media (max-width:760px){ #zumi-native-about .zna-story-main-copy--title-only{ min-height:180px!important; padding:26px 20px 70px!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead h3{ max-width:92%!important; } } /* The One Team banner now follows Support & contract staff. Give it the same normal section rhythm in its new position. */ #zumi-native-about .zna-support + .zna-hero-card--below{ margin-top:clamp(20px,2vw,34px)!important; } /* ============================================================ v1.0.65 — INTRO HERO / MULTILINGUAL GHOST TYPE / PHOTO MOVE ============================================================ */ /* Text-led intro banner: the team + Hilux photograph now sits below. */ #zumi-native-about .zna-hero.zna-hero--intro{ position:relative!important; isolation:isolate!important; display:flex!important; align-items:center!important; min-height:clamp(560px,42vw,790px)!important; overflow:hidden!important; background: radial-gradient(circle at 82% 18%,rgba(232,94,42,.22),transparent 31%), radial-gradient(circle at 8% 88%,rgba(232,94,42,.09),transparent 34%), linear-gradient(135deg,#17100d 0%,#0e0b09 56%,#1c100a 100%)!important; } /* Subtle architecture behind the typography. */ #zumi-native-about .zna-hero.zna-hero--intro::before{ content:""!important; position:absolute!important; z-index:0!important; inset:0!important; background: linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px)!important; background-size:74px 74px!important; mask-image:linear-gradient(90deg,rgba(0,0,0,.35),transparent 78%)!important; pointer-events:none!important; } #zumi-native-about .zna-hero.zna-hero--intro::after{ right:-10%!important; bottom:-54%!important; width:min(840px,52vw)!important; border-color:rgba(232,94,42,.23)!important; box-shadow: 0 0 0 58px rgba(232,94,42,.055), 0 0 0 116px rgba(232,94,42,.028)!important; } /* Large multilingual words behind the English/localized hero title. */ #zumi-native-about .zna-hero__ghosts{ position:absolute!important; z-index:0!important; inset:0!important; overflow:hidden!important; pointer-events:none!important; user-select:none!important; } #zumi-native-about .zna-hero__ghost{ position:absolute!important; display:block!important; white-space:nowrap!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-weight:700!important; line-height:.9!important; letter-spacing:-.065em!important; color:transparent!important; -webkit-text-stroke:1px rgba(232,94,42,.18)!important; opacity:.9!important; } #zumi-native-about .zna-hero__ghost--one{ top:11%!important; right:-4%!important; font-size:clamp(64px,7.4vw,142px)!important; transform:rotate(-2deg)!important; } #zumi-native-about .zna-hero__ghost--two{ right:7%!important; bottom:10%!important; font-size:clamp(58px,6.6vw,126px)!important; -webkit-text-stroke-color:rgba(255,255,255,.095)!important; transform:rotate(1.5deg)!important; } /* Main content becomes the clear focal point. */ #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy{ position:relative!important; z-index:3!important; width:min(100%,1450px)!important; align-self:auto!important; padding:clamp(58px,5.4vw,106px)!important; } #zumi-native-about .zna-hero.zna-hero--intro h1{ max-width:1250px!important; margin-top:clamp(18px,1.6vw,28px)!important; font-size:clamp(72px,8vw,156px)!important; line-height:.87!important; letter-spacing:-.072em!important; text-wrap:balance!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__subtitle{ max-width:1050px!important; margin:clamp(30px,2.4vw,44px) 0 0!important; color:rgba(255,255,255,.88)!important; font-size:clamp(21px,1.55vw,30px)!important; font-weight:500!important; line-height:1.48!important; letter-spacing:-.018em!important; text-shadow:none!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-pill-row{ margin-top:clamp(28px,2.2vw,42px)!important; } /* The former hero photograph is now its own cinematic panel below the intro. */ #zumi-native-about .zna-hero-photo{ display:block!important; position:relative!important; margin:clamp(16px,1.35vw,24px) 15px 0!important; height:clamp(360px,31vw,590px)!important; overflow:hidden!important; border:1px solid rgba(41,30,24,.12)!important; border-radius:4px !important; background:#17110e!important; box-shadow:0 20px 54px rgba(32,20,13,.12)!important; } #zumi-native-about .zna-hero-photo picture, #zumi-native-about .zna-hero-photo img{ display:block!important; width:100%!important; height:100%!important; } #zumi-native-about .zna-hero-photo img{ object-fit:cover!important; object-position:center 48%!important; } /* 25-years statement now uses the requested Namibia dunes image. */ #zumi-native-about .zna-story-main-copy--standalone{ background: radial-gradient(circle at 88% 18%,rgba(232,94,42,.16),transparent 30%), linear-gradient(90deg,rgba(12,9,8,.94) 0%,rgba(15,10,8,.78) 48%,rgba(16,10,7,.58) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center 55% / cover no-repeat!important; } /* Responsive intro/banner treatment. */ @media (max-width:1100px){ #zumi-native-about .zna-hero.zna-hero--intro{ min-height:clamp(500px,58vw,650px)!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy{ padding:54px 42px!important; } #zumi-native-about .zna-hero.zna-hero--intro h1{ font-size:clamp(64px,9vw,112px)!important; } #zumi-native-about .zna-hero__ghost--one{ top:13%!important; right:-12%!important; } #zumi-native-about .zna-hero__ghost--two{ right:-2%!important; bottom:11%!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero.zna-hero--intro{ min-height:500px!important; margin:0 12px!important; background: radial-gradient(circle at 84% 18%,rgba(232,94,42,.20),transparent 34%), linear-gradient(135deg,#17100d 0%,#0e0b09 58%,#1c100a 100%)!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy{ padding:44px 22px 38px!important; } #zumi-native-about .zna-hero.zna-hero--intro h1{ max-width:96%!important; margin-top:16px!important; font-size:clamp(58px,17vw,88px)!important; line-height:.9!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__subtitle{ max-width:96%!important; margin-top:25px!important; font-size:18px!important; line-height:1.5!important; } #zumi-native-about .zna-hero__ghost--one{ top:8%!important; right:-42%!important; font-size:74px!important; opacity:.65!important; } #zumi-native-about .zna-hero__ghost--two{ right:-30%!important; bottom:18%!important; font-size:68px!important; opacity:.58!important; } #zumi-native-about .zna-hero-photo{ margin:12px 12px 0!important; height:clamp(250px,65vw,390px)!important; border-radius:4px !important; } #zumi-native-about .zna-hero-photo img{ object-position:center center!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero.zna-hero--intro{ min-height:475px!important; } #zumi-native-about .zna-hero.zna-hero--intro h1{ font-size:clamp(54px,16vw,72px)!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__subtitle{ font-size:16px!important; } #zumi-native-about .zna-hero-photo{ height:245px!important; } } /* ============================================================ v1.0.66 — HERO BLEND / STRAIGHT GHOST TYPE / TALLER 25 YEARS ============================================================ */ /* Keep the first banner and the team/Hilux image as one continuous visual. */ #zumi-native-about .zna-hero-stack{ position:relative!important; display:grid!important; grid-template-columns:1fr!important; gap:0!important; margin:0 15px!important; overflow:hidden!important; border-radius:4px !important; box-shadow:0 20px 60px rgba(32,20,13,.13)!important; } #zumi-native-about .zna-hero-stack .zna-hero, #zumi-native-about .zna-hero-stack .zna-hero-photo{ margin:0!important; width:100%!important; border-left:1px solid rgba(255,255,255,.12)!important; border-right:1px solid rgba(255,255,255,.12)!important; box-shadow:none!important; } #zumi-native-about .zna-hero-stack .zna-hero{ border-top:1px solid rgba(255,255,255,.12)!important; border-bottom:0!important; border-radius:var(--zna-radius) var(--zna-radius) 0 0!important; } #zumi-native-about .zna-hero-stack .zna-hero-photo{ border-top:0!important; border-bottom:1px solid rgba(255,255,255,.12)!important; border-radius:4px !important; } /* Requested white-dunes photograph behind the intro banner. */ #zumi-native-about .zna-hero.zna-hero--intro{ min-height:clamp(600px,44vw,820px)!important; background: linear-gradient(90deg,rgba(12,9,7,.92) 0%,rgba(12,9,7,.78) 42%,rgba(12,9,7,.53) 72%,rgba(12,9,7,.40) 100%), linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.30) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/white-dunes-namib-desert.webp") center 52% / cover no-repeat!important; } /* Remove the grid treatment so the dunes remain visible and cinematic. */ #zumi-native-about .zna-hero.zna-hero--intro::before{ background: linear-gradient(180deg,rgba(5,4,3,.06) 0%,rgba(5,4,3,.04) 72%,rgba(5,4,3,.30) 100%)!important; background-size:auto!important; mask-image:none!important; } /* The dash + About label now sits deliberately at the top of the first panel. */ #zumi-native-about .zna-hero__topline{ position:absolute!important; z-index:4!important; top:clamp(34px,3.1vw,58px)!important; left:clamp(42px,5.4vw,106px)!important; right:clamp(42px,5.4vw,106px)!important; } #zumi-native-about .zna-hero__topline .zna-eyebrow{ margin:0!important; } /* Shift the main message down so it has clear separation from the topline. */ #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy{ padding-top:clamp(138px,10vw,188px)!important; padding-bottom:clamp(62px,5.2vw,104px)!important; } /* Multilingual ghost text is now completely straight. */ #zumi-native-about .zna-hero__ghost--one, #zumi-native-about .zna-hero__ghost--two{ transform:none!important; } /* Darken the team/Hilux photograph as it was when used inside the hero. */ #zumi-native-about .zna-hero-photo::after{ content:""!important; position:absolute!important; z-index:2!important; inset:0!important; background: linear-gradient(180deg,rgba(10,8,7,.34) 0%,rgba(10,8,7,.26) 48%,rgba(10,8,7,.45) 100%), linear-gradient(90deg,rgba(12,9,8,.16) 0%,transparent 58%,rgba(12,9,8,.10) 100%)!important; pointer-events:none!important; } #zumi-native-about .zna-hero-photo picture{ position:relative!important; z-index:1!important; } #zumi-native-about .zna-hero-photo img{ filter:brightness(.82) contrast(1.04)!important; } /* A soft seam treatment makes the two images read as one combined banner. */ #zumi-native-about .zna-hero-photo::before{ content:""!important; position:absolute!important; z-index:3!important; top:0!important; left:0!important; right:0!important; height:54px!important; background:linear-gradient(180deg,rgba(10,8,7,.42),transparent)!important; pointer-events:none!important; } /* Make the Founded in 2025 / 25 years panel taller. The copy stays on the left, preserving the dune on the right. */ #zumi-native-about .zna-story-main-copy--title-only{ min-height:clamp(400px,29vw,560px)!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; padding:clamp(54px,4.5vw,88px) clamp(40px,4.8vw,92px)!important; background: linear-gradient(90deg,rgba(10,8,7,.94) 0%,rgba(10,8,7,.84) 35%,rgba(10,8,7,.56) 55%,rgba(10,8,7,.18) 76%,rgba(10,8,7,.06) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center center / cover no-repeat!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead{ width:min(58%,930px)!important; position:relative!important; z-index:3!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead h3{ max-width:880px!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__ghost{ z-index:2!important; } /* Keep the orange top accent aligned with the left-hand statement. */ #zumi-native-about .zna-story-main-copy--title-only::before{ left:clamp(40px,4.8vw,92px)!important; } /* Tablet */ @media (max-width:1100px){ #zumi-native-about .zna-hero__topline{ top:38px!important; left:42px!important; right:42px!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy{ padding-top:126px!important; } #zumi-native-about .zna-story-main-copy--title-only{ min-height:390px!important; padding:48px 42px!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead{ width:min(64%,760px)!important; } } /* Mobile */ @media (max-width:760px){ #zumi-native-about .zna-hero-stack{ margin:0 12px!important; border-radius:4px !important; } #zumi-native-about .zna-hero-stack .zna-hero{ margin:0!important; border-radius:4px 4px 0 0 !important; } #zumi-native-about .zna-hero-stack .zna-hero-photo{ margin:0!important; border-radius:0 0 4px 4px !important; } #zumi-native-about .zna-hero.zna-hero--intro{ min-height:520px!important; background: linear-gradient(90deg,rgba(12,9,7,.90) 0%,rgba(12,9,7,.76) 62%,rgba(12,9,7,.52) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/white-dunes-namib-desert.webp") center center / cover no-repeat!important; } #zumi-native-about .zna-hero__topline{ top:27px!important; left:22px!important; right:22px!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy{ padding:102px 22px 38px!important; } #zumi-native-about .zna-hero-photo{ height:clamp(260px,66vw,390px)!important; } #zumi-native-about .zna-story-main-copy--title-only{ min-height:350px!important; padding:34px 24px 72px!important; background: linear-gradient(90deg,rgba(10,8,7,.92) 0%,rgba(10,8,7,.76) 62%,rgba(10,8,7,.40) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") 64% center / cover no-repeat!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead{ width:78%!important; } #zumi-native-about .zna-story-main-copy--title-only::before{ left:24px!important; } } @media (max-width:480px){ #zumi-native-about .zna-story-main-copy--title-only{ min-height:330px!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead{ width:86%!important; } } /* ============================================================ v1.0.67 — FINAL ABOUT PAGE REFINEMENTS ============================================================ */ /* Text-only hero */ #zumi-native-about .zna-hero-stack--solo{display:block!important;overflow:visible!important;box-shadow:none!important} #zumi-native-about .zna-hero-stack--solo .zna-hero{border-radius:4px !important;border-bottom:1px solid rgba(255,255,255,.12)!important;box-shadow:0 20px 60px rgba(32,20,13,.13)!important} #zumi-native-about .zna-hero-title__accent{color:var(--zna-orange)!important;text-shadow:0 8px 32px rgba(0,0,0,.22)!important} /* 25 years */ #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__ghost{ color:rgba(232,94,42,.56)!important; -webkit-text-stroke:1px rgba(255,151,93,.78)!important; opacity:1!important; text-shadow:0 0 38px rgba(232,94,42,.22)!important; } #zumi-native-about .zna-story-main-copy__mission{ max-width:820px!important; margin:clamp(28px,2.2vw,38px) 0 0!important; color:rgba(255,255,255,.90)!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:clamp(19px,1.35vw,27px)!important; font-weight:500!important; line-height:1.42!important; letter-spacing:-.02em!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead{width:min(61%,960px)!important} /* Compact support staff section */ #zumi-native-about .zna-support{padding-top:clamp(22px,1.7vw,32px)!important;padding-bottom:clamp(20px,1.55vw,30px)!important} #zumi-native-about .zna-support .zna-section-head{margin-bottom:16px!important;gap:clamp(20px,2.4vw,44px)!important} #zumi-native-about .zna-support-layout,#zumi-native-about .zna-support-grid{gap:10px!important} #zumi-native-about .zna-person--support .zna-person__body{padding:11px 12px 12px!important} #zumi-native-about .zna-person--support .zna-person__role{margin-top:6px!important;font-size:10.5px!important} #zumi-native-about .zna-person--support p{margin-top:8px!important;font-size:11.3px!important;line-height:1.42!important} #zumi-native-about .zna-support-blob{padding:20px 22px!important} #zumi-native-about .zna-support-blob__points{margin-top:12px!important;gap:6px!important} #zumi-native-about .zna-support-blob__point{padding:7px 9px!important} #zumi-native-about .zna-support + .zna-hero-card--below{margin-top:8px!important} /* One Team description */ #zumi-native-about .zna-hero-card--below p{ max-width:1160px!important; margin-top:18px!important; color:rgba(255,255,255,.88)!important; font-family:"Roboto", Arial, Helvetica, sans-serif !important; font-size:clamp(18px,1.28vw,25px)!important; font-weight:500!important; line-height:1.52!important; letter-spacing:-.018em!important; } #zumi-native-about .zna-hero-card__accent{color:#E85E2A!important;font-weight:700!important} /* Traveller collage */ @media (min-width:1181px){ #zumi-native-about .zna-experience{padding:clamp(38px,3vw,58px)!important} #zumi-native-about .zna-experience__grid{ grid-template-columns:minmax(0,1.48fr) minmax(350px,.52fr)!important; gap:18px!important; align-items:stretch!important; max-width:1650px!important; } #zumi-native-about .zna-photo-grid--collage{ display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(235px,1fr))!important; gap:10px!important; min-height:580px!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--team{grid-column:1 / span 7!important;grid-row:1 / span 2!important} #zumi-native-about .zna-photo-grid--collage .zna-photo--1{grid-column:8 / span 5!important;grid-row:1!important} #zumi-native-about .zna-photo-grid--collage .zna-photo--2{grid-column:8 / span 3!important;grid-row:2!important} #zumi-native-about .zna-photo-grid--collage .zna-photo--3{grid-column:11 / span 2!important;grid-row:2!important} } #zumi-native-about .zna-photo-grid--collage .zna-photo{ position:relative!important;isolation:isolate!important;height:100%!important;min-height:210px!important;overflow:hidden!important;background:#1b1512!important } #zumi-native-about .zna-photo-grid--collage .zna-photo > img{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center!important;filter:brightness(.88) contrast(1.03)!important } #zumi-native-about .zna-photo-grid--collage .zna-photo--team > img{object-position:center 48%!important;filter:brightness(.75) contrast(1.05)!important} #zumi-native-about .zna-photo-grid--collage .zna-photo::after{ content:""!important;position:absolute!important;z-index:1!important;inset:0!important;background:linear-gradient(180deg,transparent 48%,rgba(8,6,5,.78) 100%)!important;pointer-events:none!important } #zumi-native-about .zna-photo__caption{ position:absolute!important;z-index:3!important;left:14px!important;right:14px!important;bottom:13px!important;display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;color:#fff!important;line-height:1.2!important } #zumi-native-about .zna-photo__caption strong,#zumi-native-about .zna-photo__caption small{display:block!important;color:#fff!important;font-family:"Roboto", Arial, Helvetica, sans-serif !important} #zumi-native-about .zna-photo__caption strong{font-size:clamp(12px,.82vw,15px)!important;font-weight:700!important} #zumi-native-about .zna-photo__caption small{margin-top:3px!important;color:rgba(255,255,255,.76)!important;font-size:clamp(10px,.66vw,12px)!important} #zumi-native-about .zna-photo__pin{ display:grid!important;place-items:center!important;flex:0 0 31px!important;width:31px!important;height:31px!important;border-radius:4px !important;background:rgba(18,13,11,.72)!important;border:1px solid rgba(232,94,42,.44)!important;backdrop-filter:blur(7px)!important } #zumi-native-about .zna-photo__pin img{ position:static!important;display:block!important;width:18px!important;height:18px!important;object-fit:contain!important; filter:brightness(0) saturate(100%) invert(48%) sepia(91%) saturate(2216%) hue-rotate(346deg) brightness(99%) contrast(84%)!important } /* Taller, narrower 5-star review */ #zumi-native-about .zna-review{ display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-height:100%!important;gap:0!important;padding:clamp(30px,2.3vw,44px)!important;border-radius:4px !important} #zumi-native-about .zna-review__top{width:100%!important;margin-bottom:clamp(24px,2vw,34px)!important} #zumi-native-about .zna-stars{color:#E85E2A!important;font-size:clamp(26px,2vw,37px)!important;line-height:1!important;letter-spacing:.11em!important} #zumi-native-about .zna-review__label{margin-top:10px!important} #zumi-native-about .zna-review>p{margin:0!important;color:#fff!important;font-size:clamp(19px,1.22vw,24px)!important;font-weight:500!important;line-height:1.55!important} #zumi-native-about .zna-review>p strong{color:#E85E2A!important;font-weight:700!important} #zumi-native-about .zna-review__closing{display:block!important;margin-top:18px!important;color:#E85E2A!important;font-weight:700!important} #zumi-native-about .zna-review footer{width:100%!important;min-width:0!important;margin-top:auto!important;padding:24px 0 0!important;border-left:0!important;border-top:1px solid rgba(255,255,255,.12)!important} #zumi-native-about .zna-review footer strong{font-size:15px!important} #zumi-native-about .zna-review footer span{color:#F1C7A4!important;font-size:12px!important} /* Himba final CTA */ #zumi-native-about .zna-contact{ position:relative!important;isolation:isolate!important;overflow:hidden!important;min-height:clamp(390px,26vw,520px)!important; background: linear-gradient(90deg,rgba(13,9,7,.92) 0%,rgba(13,9,7,.82) 45%,rgba(13,9,7,.52) 72%,rgba(13,9,7,.34) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/himba-banner-image.webp") center 45% / cover no-repeat!important } #zumi-native-about .zna-contact::before{content:""!important;position:absolute!important;inset:0!important;z-index:0!important;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.24))!important;pointer-events:none!important} #zumi-native-about .zna-contact__copy,#zumi-native-about .zna-contact__actions{position:relative!important;z-index:2!important} #zumi-native-about .zna-contact .zna-eyebrow{max-width:780px!important} #zumi-native-about .zna-contact h2{max-width:1050px!important;font-size:clamp(38px,3.6vw,72px)!important} #zumi-native-about .zna-contact__copy>p{max-width:820px!important;color:rgba(255,255,255,.79)!important} /* Exact Insurance-plugin button hover behavior */ #zumi-native-about .zna-btn{ transform:none!important;animation:none!important; transition:background-color .14s ease,border-color .14s ease,color .14s ease!important } #zumi-native-about .zna-btn:hover,#zumi-native-about .zna-btn:focus-visible{transform:none!important;outline:none!important} #zumi-native-about .zna-btn--primary{background:#E85E2A !important;color:#fff!important} #zumi-native-about .zna-btn--primary:hover,#zumi-native-about .zna-btn--primary:focus-visible{background:#E85E2A !important;color:#fff!important} #zumi-native-about .zna-btn--ghost{border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.06)!important;color:#fff!important} #zumi-native-about .zna-btn--ghost:hover,#zumi-native-about .zna-btn--ghost:focus-visible{border-color:rgba(255,255,255,.32)!important;background:rgba(255,255,255,.11)!important;color:#fff!important} @media (max-width:1180px){ #zumi-native-about .zna-experience__grid{grid-template-columns:1fr!important;gap:14px!important} #zumi-native-about .zna-photo-grid--collage{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #zumi-native-about .zna-photo-grid--collage .zna-photo{min-height:270px!important} #zumi-native-about .zna-photo-grid--collage .zna-photo--team{grid-column:1 / -1!important;min-height:430px!important} #zumi-native-about .zna-review{min-height:360px!important} } @media (max-width:760px){ #zumi-native-about .zna-hero-stack--solo{margin:0 12px!important;border-radius:4px !important} #zumi-native-about .zna-hero-stack--solo .zna-hero{border-radius:4px !important} #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead{width:84%!important} #zumi-native-about .zna-story-main-copy__mission{margin-top:22px!important;font-size:17px!important} #zumi-native-about .zna-support{padding:22px 20px!important} #zumi-native-about .zna-support + .zna-hero-card--below{margin-top:4px!important} #zumi-native-about .zna-hero-card--below p{font-size:17px!important;line-height:1.5!important} #zumi-native-about .zna-photo-grid--collage{grid-template-columns:1fr!important} #zumi-native-about .zna-photo-grid--collage .zna-photo,#zumi-native-about .zna-photo-grid--collage .zna-photo--team{grid-column:auto!important;min-height:280px!important} #zumi-native-about .zna-review{min-height:0!important;padding:25px 20px!important} #zumi-native-about .zna-stars{font-size:26px!important} #zumi-native-about .zna-review>p{font-size:17px!important} #zumi-native-about .zna-contact{ min-height:430px!important; background: linear-gradient(90deg,rgba(13,9,7,.92) 0%,rgba(13,9,7,.76) 65%,rgba(13,9,7,.48) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/himba-banner-image.webp") 62% center / cover no-repeat!important } } /* ============================================================ v1.0.68 — CARACAL GHOST OVERLAY IN MAIN HERO ============================================================ */ /* The caracal sits behind the main copy and in front of the dune photo, echoing the strong ghost-animal treatment used elsewhere on the site. */ #zumi-native-about .zna-hero__caracal{ position:absolute!important; z-index:1!important; top:50%!important; right:-2.5%!important; width:min(56vw,1080px)!important; transform:translateY(-48%)!important; pointer-events:none!important; user-select:none!important; opacity:.34!important; filter: saturate(.92) sepia(.08) brightness(.82) contrast(1.15) drop-shadow(0 18px 46px rgba(0,0,0,.28))!important; mix-blend-mode:screen!important; mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 12%,#000 36%,#000 88%,transparent 100%)!important; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 12%,#000 36%,#000 88%,transparent 100%)!important; } #zumi-native-about .zna-hero__caracal img{ display:block!important; width:100%!important; height:auto!important; object-fit:contain!important; } /* The intro copy remains decisively above the animal artwork. */ #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy, #zumi-native-about .zna-hero__topline{ position:relative!important; z-index:4!important; } /* Keep the multilingual ghost type behind the caracal so the artwork feels integrated rather than layered like a sticker. */ #zumi-native-about .zna-hero__ghosts{ z-index:0!important; } /* Add a restrained warm glow around the animal's face for an assertive, professional presence without overpowering the title. */ #zumi-native-about .zna-hero.zna-hero--intro::after{ content:""!important; position:absolute!important; z-index:1!important; top:14%!important; right:3%!important; bottom:auto!important; width:min(36vw,690px)!important; aspect-ratio:1!important; border:0!important; border-radius:50%!important; background:radial-gradient(circle,rgba(232,94,42,.17) 0%,rgba(232,94,42,.08) 32%,transparent 70%)!important; box-shadow:none!important; pointer-events:none!important; } /* Desktop: slightly enlarge the animal on very wide displays. */ @media (min-width:1500px){ #zumi-native-about .zna-hero__caracal{ right:0!important; width:min(53vw,1160px)!important; opacity:.37!important; } } /* Tablet */ @media (max-width:1100px){ #zumi-native-about .zna-hero__caracal{ right:-13%!important; width:min(70vw,830px)!important; opacity:.31!important; transform:translateY(-46%)!important; } } /* Mobile: keep the face present but prevent it from competing with copy. */ @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ top:56%!important; right:-39%!important; width:118vw!important; opacity:.23!important; transform:translateY(-50%)!important; filter: saturate(.86) brightness(.72) contrast(1.12) drop-shadow(0 16px 36px rgba(0,0,0,.20))!important; mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 10%,#000 36%,#000 82%,transparent 100%)!important; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 10%,#000 36%,#000 82%,transparent 100%)!important; } #zumi-native-about .zna-hero.zna-hero--intro::after{ top:24%!important; right:-18%!important; width:78vw!important; opacity:.72!important; } } /* ============================================================ v1.0.69 — RESPONSIVE CLEANUP / HERO / TABLET TEAM GRID ============================================================ */ /* The hero no longer has the eyebrow row. Use the full width for the title/subtitle on every non-mobile screen instead of leaving a dead second grid column from the older hero layout. */ #zumi-native-about .zna-hero__topline{ display:none!important; } @media (min-width:761px){ #zumi-native-about .zna-hero.zna-hero--intro{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:1fr!important; align-items:center!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy{ grid-column:1 / -1!important; grid-row:1!important; align-self:center!important; justify-self:stretch!important; width:100%!important; max-width:1540px!important; margin:0 auto!important; padding:clamp(70px,5.2vw,110px) clamp(48px,6.4vw,126px)!important; } #zumi-native-about .zna-hero.zna-hero--intro h1{ max-width:1250px!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__subtitle{ max-width:1050px!important; margin-top:clamp(20px,1.7vw,30px)!important; } } /* The translated ghost words should remain readable through the animal treatment, so they now sit above the caracal but below the live copy. */ #zumi-native-about .zna-hero__ghosts{ z-index:2!important; } #zumi-native-about .zna-hero__caracal{ z-index:1!important; opacity:.18!important; } @media (min-width:1500px){ #zumi-native-about .zna-hero__caracal{ opacity:.20!important; } } @media (min-width:761px) and (max-width:1100px){ #zumi-native-about .zna-hero__caracal{ opacity:.14!important; } } /* More separation between the two statements on the Founded in 2025 card. */ #zumi-native-about .zna-story-main-copy__mission{ margin-top:clamp(46px,3.4vw,64px)!important; } /* ------------------------------------------------------------ TABLET / SMALL-LAPTOP LAYOUT (bigger than mobile, below monitor size) ------------------------------------------------------------ */ @media (min-width:761px) and (max-width:1180px){ /* Contract staff becomes four balanced tiles: Theo + Selma on row one, Namupala + "How the team connects" on row two. */ #zumi-native-about .zna-support-layout{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; max-width:none!important; width:100%!important; align-items:stretch!important; } #zumi-native-about .zna-support-grid{ display:contents!important; } #zumi-native-about .zna-support-grid .zna-person--support{ width:100%!important; max-width:none!important; height:100%!important; } #zumi-native-about .zna-support-blob{ width:100%!important; min-height:100%!important; height:100%!important; border-radius:4px!important; } /* Keep lead portraits fully visible at these awkward in-between widths. The old horizontal crop could show only the centre of the faces. */ #zumi-native-about .zna-person--lead{ grid-template-columns:minmax(190px,.9fr) minmax(0,1.1fr)!important; min-height:330px!important; } #zumi-native-about .zna-person--lead .zna-person__media{ min-height:330px!important; background:#e9e3de!important; } #zumi-native-about .zna-person--lead .zna-person__media img{ object-fit:contain!important; object-position:center center!important; transform:none!important; } /* Keep the two lower principle cards visually aligned. */ #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ padding:30px 28px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__heading{ align-items:flex-start!important; gap:14px!important; margin-bottom:20px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__title-icon{ flex:0 0 48px!important; width:48px!important; height:48px!important; margin-top:0!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--principle h3{ font-size:clamp(25px,3vw,31px)!important; line-height:1.08!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value__bullets{ gap:12px!important; } } /* ------------------------------------------------------------ MOBILE HERO: shorter from both top and bottom while keeping the background/caracal centered and reducing vertical dead space. ------------------------------------------------------------ */ @media (max-width:760px){ #zumi-native-about .zna-page{ gap:8px!important; } #zumi-native-about .zna-hero.zna-hero--intro{ height:auto!important; min-height:410px!important; display:flex!important; align-items:center!important; background-position:center center!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy{ width:100%!important; max-width:none!important; padding:42px 22px!important; } #zumi-native-about .zna-hero.zna-hero--intro h1{ margin:0!important; font-size:clamp(50px,15vw,68px)!important; line-height:.91!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__subtitle{ margin-top:16px!important; font-size:15.5px!important; line-height:1.45!important; } #zumi-native-about .zna-hero__ghost--one{ top:9%!important; right:-45%!important; font-size:68px!important; } #zumi-native-about .zna-hero__ghost--two{ right:-32%!important; bottom:11%!important; font-size:61px!important; } #zumi-native-about .zna-hero__caracal{ top:51%!important; right:-34%!important; width:112vw!important; opacity:.09!important; transform:translateY(-50%)!important; } #zumi-native-about .zna-hero.zna-hero--intro::after{ top:23%!important; right:-16%!important; width:72vw!important; opacity:.48!important; } #zumi-native-about .zna-story-main-copy__mission{ margin-top:34px!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero.zna-hero--intro{ min-height:380px!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__copy{ padding:34px 19px!important; } #zumi-native-about .zna-hero.zna-hero--intro h1{ font-size:clamp(46px,14.8vw,62px)!important; } #zumi-native-about .zna-hero.zna-hero--intro .zna-hero__subtitle{ margin-top:14px!important; font-size:14.5px!important; } } /* ============================================================ v1.0.70 — RESPONSIVE POLISH PASS ============================================================ */ /* ------------------------------------------------------------ CARACAL — keep it contained and progressively smaller as the viewport narrows. Height-based sizing prevents it from escaping the banner proportions. ------------------------------------------------------------ */ @media (max-width:1180px){ #zumi-native-about .zna-hero__caracal{ width:auto!important; height:82%!important; max-width:none!important; top:50%!important; right:-6%!important; transform:translateY(-50%)!important; } #zumi-native-about .zna-hero__caracal img{ width:auto!important; height:100%!important; max-width:none!important; object-fit:contain!important; } } @media (max-width:900px){ #zumi-native-about .zna-hero__caracal{ height:74%!important; right:-8%!important; opacity:.11!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ height:67%!important; width:auto!important; right:-9%!important; opacity:.075!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero__caracal{ height:60%!important; right:-10%!important; opacity:.065!important; } } /* ------------------------------------------------------------ 25+ PANEL — force an unmistakable visual break between the two statements. Padding is used instead of only margin so older responsive rules cannot collapse the spacing. ------------------------------------------------------------ */ #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead h3{ margin-bottom:0!important; } #zumi-native-about .zna-story-main-copy__mission{ display:block!important; margin:0!important; padding-top:clamp(48px,3.6vw,68px)!important; } @media (max-width:760px){ #zumi-native-about .zna-story-main-copy__mission{ padding-top:38px!important; } } /* ------------------------------------------------------------ LEADERSHIP PORTRAITS — keep images filling the pane, but shift the source image left progressively at intermediate widths rather than shrinking it with contain-fit. ------------------------------------------------------------ */ @media (min-width:1051px) and (max-width:1250px){ #zumi-native-about .zna-person--lead .zna-person__media img{ position:relative!important; left:-7%!important; width:114%!important; max-width:none!important; height:100%!important; object-fit:cover!important; object-position:center center!important; transform:none!important; } } @media (min-width:901px) and (max-width:1050px){ #zumi-native-about .zna-person--lead .zna-person__media img{ position:relative!important; left:-10%!important; width:120%!important; max-width:none!important; height:100%!important; object-fit:cover!important; object-position:center center!important; transform:none!important; } } @media (min-width:761px) and (max-width:900px){ #zumi-native-about .zna-person--lead .zna-person__media img{ position:relative!important; left:-14%!important; width:128%!important; max-width:none!important; height:100%!important; object-fit:cover!important; object-position:center center!important; transform:none!important; } } @media (max-width:760px){ #zumi-native-about .zna-person--lead .zna-person__media img{ position:static!important; left:auto!important; width:100%!important; max-width:100%!important; height:100%!important; object-fit:cover!important; object-position:center top!important; transform:none!important; } } /* ------------------------------------------------------------ SUPPORT / CONTRACT STAFF — more breathing room on desktop. ------------------------------------------------------------ */ @media (min-width:1181px){ #zumi-native-about .zna-support{ padding-top:clamp(30px,2.3vw,44px)!important; padding-bottom:clamp(30px,2.3vw,44px)!important; } #zumi-native-about .zna-support .zna-section-head{ max-width:1510px!important; margin-left:auto!important; margin-right:auto!important; margin-bottom:clamp(34px,2.5vw,46px)!important; } #zumi-native-about .zna-support-layout{ max-width:1510px!important; margin-left:auto!important; margin-right:auto!important; gap:clamp(28px,2vw,38px)!important; } #zumi-native-about .zna-support-grid{ gap:clamp(20px,1.45vw,26px)!important; justify-content:center!important; } } /* Tablet/small-laptop quadrant: keep four tiles but make the whole block significantly tighter and more deliberate. */ @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-support{ padding:24px 26px!important; } #zumi-native-about .zna-support .zna-section-head{ margin-bottom:24px!important; } #zumi-native-about .zna-support-layout{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; max-width:980px!important; margin:0 auto!important; } #zumi-native-about .zna-support-grid{ display:contents!important; } #zumi-native-about .zna-person--support, #zumi-native-about .zna-support-blob{ min-height:0!important; height:auto!important; } #zumi-native-about .zna-person--support{ grid-template-rows:138px auto!important; } #zumi-native-about .zna-person--support .zna-person__media{ height:138px!important; aspect-ratio:auto!important; } #zumi-native-about .zna-person--support .zna-person__media img{ object-fit:contain!important; } #zumi-native-about .zna-person--support .zna-person__body{ padding:10px 12px 12px!important; } #zumi-native-about .zna-person--support h3{ font-size:17px!important; } #zumi-native-about .zna-person--support .zna-person__role{ margin-top:4px!important; font-size:9.5px!important; } #zumi-native-about .zna-person--support p{ margin-top:6px!important; font-size:10.6px!important; line-height:1.38!important; } #zumi-native-about .zna-support-blob{ padding:16px 18px!important; border-radius:4px!important; } #zumi-native-about .zna-support-blob__eyebrow{ margin-bottom:6px!important; font-size:9.5px!important; } #zumi-native-about .zna-support-blob h3{ font-size:21px!important; } #zumi-native-about .zna-support-blob>p{ margin-top:8px!important; font-size:11.8px!important; line-height:1.42!important; } #zumi-native-about .zna-support-blob__points{ margin-top:10px!important; gap:5px!important; } #zumi-native-about .zna-support-blob__point{ grid-template-columns:28px minmax(0,1fr)!important; gap:7px!important; padding:6px 8px!important; } #zumi-native-about .zna-support-blob__icon{ width:28px!important; height:28px!important; font-size:15px!important; } #zumi-native-about .zna-support-blob__point strong{ font-size:11px!important; } #zumi-native-about .zna-support-blob__point small{ margin-top:2px!important; font-size:10px!important; line-height:1.3!important; } } /* Mobile: full-width compact horizontal staff cards, centered in the section, with deliberately smaller images rather than narrow left tiles. */ @media (max-width:760px){ #zumi-native-about .zna-support{ padding:22px 18px!important; } #zumi-native-about .zna-support .zna-section-head{ margin-bottom:20px!important; } #zumi-native-about .zna-support-layout{ display:grid!important; grid-template-columns:1fr!important; gap:9px!important; width:100%!important; max-width:none!important; margin:0 auto!important; justify-items:stretch!important; } #zumi-native-about .zna-support-grid{ display:grid!important; grid-template-columns:1fr!important; gap:9px!important; width:100%!important; max-width:none!important; margin:0!important; justify-items:stretch!important; } #zumi-native-about .zna-person--support{ display:grid!important; grid-template-columns:108px minmax(0,1fr)!important; grid-template-rows:1fr!important; width:100%!important; max-width:none!important; min-height:108px!important; height:auto!important; align-items:stretch!important; } #zumi-native-about .zna-person--support .zna-person__media{ width:108px!important; height:108px!important; min-height:108px!important; aspect-ratio:auto!important; align-self:center!important; } #zumi-native-about .zna-person--support .zna-person__media img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center center!important; } #zumi-native-about .zna-person--support .zna-person__body{ justify-content:center!important; padding:10px 12px!important; } #zumi-native-about .zna-person--support h3{ font-size:17px!important; } #zumi-native-about .zna-person--support .zna-person__role{ margin-top:4px!important; font-size:9.5px!important; } #zumi-native-about .zna-person--support p{ margin-top:6px!important; font-size:10.8px!important; line-height:1.38!important; } #zumi-native-about .zna-support-blob{ width:100%!important; max-width:none!important; min-height:0!important; padding:16px!important; border-radius:4px!important; } } /* ------------------------------------------------------------ ONE TEAM BANNER — never stretch the image. Use cover crops and reduce vertical height on larger screens so the Hilux stays centered. ------------------------------------------------------------ */ @media (min-width:1200px) and (max-width:1599px){ #zumi-native-about .zna-hero-card--below{ min-height:280px!important; height:auto!important; padding-top:24px!important; padding-bottom:24px!important; background-size:cover!important; background-position:center 55%!important; } } @media (min-width:1600px){ #zumi-native-about .zna-hero-card--below{ min-height:320px!important; height:auto!important; padding-top:28px!important; padding-bottom:28px!important; background-size:cover!important; background-position:center 55%!important; } } /* Tablet/small-laptop One Team: simplify the old competing layouts. The description becomes one normal text block over a glass panel. */ @media (min-width:761px) and (max-width:1199px){ #zumi-native-about .zna-hero-card--below{ display:block!important; width:calc(100% - 30px)!important; min-height:410px!important; height:auto!important; margin-left:15px!important; margin-right:15px!important; padding:24px 26px 20px!important; background: linear-gradient(180deg,rgba(18,13,11,.34) 0%,rgba(18,13,11,.25) 40%,rgba(18,13,11,.56) 72%,rgba(18,13,11,.88) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 54% / cover no-repeat!important; } #zumi-native-about .zna-hero-card--below::after{ content:none!important; display:none!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ width:50px!important; height:50px!important; margin:0 0 13px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ display:block!important; width:100%!important; min-height:0!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ display:inline-flex!important; margin:0 0 7px!important; } #zumi-native-about .zna-hero-card--below strong{ display:block!important; max-width:100%!important; font-size:clamp(30px,4vw,44px)!important; line-height:1.04!important; } #zumi-native-about .zna-hero-card--below p{ display:block!important; width:100%!important; max-width:none!important; margin:122px 0 0!important; padding:16px 18px!important; white-space:normal!important; word-break:normal!important; overflow-wrap:normal!important; text-align:left!important; font-size:clamp(15px,1.45vw,17px)!important; line-height:1.5!important; } #zumi-native-about .zna-hero-card--below p .zna-hero-card__accent{ display:inline!important; white-space:normal!important; word-break:normal!important; } } /* Mobile One Team: full reset so the description cannot fragment into multiple narrow columns. */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ display:block!important; width:calc(100% - 24px)!important; min-height:0!important; height:auto!important; margin:4px 12px 0!important; padding:20px 18px 18px!important; border-radius:4px !important; background: linear-gradient(180deg,rgba(18,13,11,.38) 0%,rgba(18,13,11,.28) 36%,rgba(18,13,11,.60) 70%,rgba(18,13,11,.91) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 53% / cover no-repeat!important; } #zumi-native-about .zna-hero-card--below::after{ content:none!important; display:none!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ width:44px!important; height:44px!important; margin:0 0 12px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ display:block!important; width:100%!important; min-height:0!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ display:inline-flex!important; margin:0 0 7px!important; font-size:10px!important; } #zumi-native-about .zna-hero-card--below strong{ display:block!important; width:100%!important; max-width:none!important; font-size:clamp(27px,8vw,37px)!important; line-height:1.04!important; } #zumi-native-about .zna-hero-card--below p{ display:block!important; width:100%!important; max-width:none!important; margin:105px 0 0!important; padding:15px 16px!important; columns:auto!important; column-count:auto!important; white-space:normal!important; word-break:normal!important; overflow-wrap:normal!important; text-align:left!important; font-size:14px!important; line-height:1.48!important; } #zumi-native-about .zna-hero-card--below p .zna-hero-card__accent{ display:inline!important; white-space:normal!important; word-break:normal!important; } } /* ------------------------------------------------------------ TESTIMONIAL — the orange closing thought stays in the same flowing paragraph instead of becoming a separate line with a large gap. ------------------------------------------------------------ */ #zumi-native-about .zna-review__closing{ display:inline!important; margin:0!important; padding:0!important; } /* Keep the final quotation mark attached naturally to the review. */ #zumi-native-about .zna-review>p{ white-space:normal!important; } /* ============================================================ v1.0.71 — REVIEW / HERO ART / OUR APPROACH HEIGHT POLISH ============================================================ */ /* ------------------------------------------------------------ REVIEW — keep all quote copy white until the final “and most importantly…” thought, which remains orange. Also pull the attribution closer to the end of the quote. ------------------------------------------------------------ */ #zumi-native-about .zna-review > p, #zumi-native-about .zna-review > p strong{ color:#fff!important; } #zumi-native-about .zna-review__closing{ color:#E85E2A!important; font-weight:700!important; } #zumi-native-about .zna-review footer{ margin-top:clamp(20px,1.6vw,28px)!important; padding-top:18px!important; } /* ------------------------------------------------------------ HERO CARACAL — emerge from the left rather than the right. ------------------------------------------------------------ */ #zumi-native-about .zna-hero__caracal{ left:-3%!important; right:auto!important; transform:translateY(-48%) scaleX(-1)!important; } @media (min-width:1500px){ #zumi-native-about .zna-hero__caracal{ left:-1%!important; right:auto!important; } } @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-hero__caracal{ left:-7%!important; right:auto!important; transform:translateY(-50%) scaleX(-1)!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ left:-10%!important; right:auto!important; transform:translateY(-50%) scaleX(-1)!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero__caracal{ left:-12%!important; right:auto!important; } } /* ------------------------------------------------------------ LARGE-SCREEN HERO DUNES — show the image at a more deliberate smaller scale instead of stretching it edge-to-edge. Soft, translucent side bars fill the unused space. ------------------------------------------------------------ */ @media (min-width:1181px){ #zumi-native-about .zna-hero.zna-hero--intro{ background: linear-gradient( 90deg, rgba(10,8,7,.72) 0%, rgba(18,12,9,.58) 8%, rgba(18,12,9,.20) 15%, transparent 23%, transparent 77%, rgba(18,12,9,.20) 85%, rgba(18,12,9,.58) 92%, rgba(10,8,7,.72) 100% ), linear-gradient( 90deg, rgba(12,9,7,.80) 0%, rgba(12,9,7,.50) 34%, rgba(12,9,7,.38) 66%, rgba(12,9,7,.72) 100% ), url("https://zumirentals.com/wp-content/uploads/2026/09/white-dunes-namib-desert.webp") center 48% / min(78vw,1320px) auto no-repeat, linear-gradient(135deg,#18110e 0%,#0e0b09 52%,#17100d 100%)!important; } } /* ------------------------------------------------------------ OUR APPROACH / ONE TEAM — at the medium desktop width shown, shorten the card from the top and bottom and move the Hilux composition upward. Keep cover-fit so it never stretches. ------------------------------------------------------------ */ @media (min-width:1181px) and (max-width:1599px){ #zumi-native-about .zna-hero-card--below{ min-height:245px!important; height:auto!important; padding-top:17px!important; padding-bottom:17px!important; background-size:cover!important; background-position:center 43%!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ margin-bottom:10px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ margin-bottom:7px!important; } #zumi-native-about .zna-hero-card--below strong{ line-height:1.02!important; } #zumi-native-about .zna-hero-card--below p{ margin-top:clamp(74px,5vw,96px)!important; padding-top:13px!important; padding-bottom:13px!important; } } /* Very wide desktops can also be a little tighter while keeping the cars centered. */ @media (min-width:1600px){ #zumi-native-about .zna-hero-card--below{ min-height:285px!important; padding-top:20px!important; padding-bottom:20px!important; background-position:center 44%!important; } } /* ============================================================ v1.0.72 — LARGE DUNE PANEL / CARACAL DIRECTION / INTERMEDIATE TESTIMONIAL GRID / OUR APPROACH HEIGHT ============================================================ */ /* ------------------------------------------------------------ HERO — undo the v1.0.71 large-screen scaled-image / side-bar treatment. The opening hero goes back to a normal full-bleed white-dunes background. ------------------------------------------------------------ */ @media (min-width:1181px){ #zumi-native-about .zna-hero.zna-hero--intro{ background: linear-gradient(90deg,rgba(12,9,7,.92) 0%,rgba(12,9,7,.78) 42%,rgba(12,9,7,.53) 72%,rgba(12,9,7,.40) 100%), linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.30) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/white-dunes-namib-desert.webp") center 52% / cover no-repeat!important; } } /* ------------------------------------------------------------ FOUNDED IN 2025 — this is now the panel that receives the smaller centered dune image plus translucent side bars on large displays. ------------------------------------------------------------ */ @media (min-width:1181px){ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient( 90deg, rgba(13,9,7,.74) 0%, rgba(24,14,9,.54) 8%, rgba(24,14,9,.18) 14%, transparent 22%, transparent 78%, rgba(24,14,9,.18) 86%, rgba(24,14,9,.54) 92%, rgba(13,9,7,.74) 100% ), linear-gradient( 90deg, rgba(10,8,7,.93) 0%, rgba(10,8,7,.80) 34%, rgba(10,8,7,.42) 57%, rgba(10,8,7,.12) 78%, rgba(10,8,7,.30) 100% ), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center 54% / min(80vw,1380px) auto no-repeat, linear-gradient(135deg,#17100d 0%,#0e0b09 54%,#1a100b 100%)!important; } } /* ------------------------------------------------------------ CARACAL — keep it emerging from the left, but mirror it back the other direction from v1.0.71. ------------------------------------------------------------ */ #zumi-native-about .zna-hero__caracal{ transform:translateY(-48%) scaleX(1)!important; } @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-hero__caracal{ transform:translateY(-50%) scaleX(1)!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ transform:translateY(-50%) scaleX(1)!important; } } /* ------------------------------------------------------------ INTERMEDIATE EXPERIENCE GRID — at tablet/small-laptop width, promote the review card into the empty fourth collage slot. Result: team image spans row, Bridget + Ian | Jansen family, Jerome + Mike | testimonial. ------------------------------------------------------------ */ @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-experience__grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; align-items:stretch!important; } #zumi-native-about .zna-photo-grid--collage{ display:contents!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--team{ grid-column:1 / -1!important; grid-row:auto!important; min-height:390px!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--1, #zumi-native-about .zna-photo-grid--collage .zna-photo--2, #zumi-native-about .zna-photo-grid--collage .zna-photo--3{ grid-column:auto!important; grid-row:auto!important; min-height:260px!important; } #zumi-native-about .zna-review{ grid-column:auto!important; min-height:260px!important; height:100%!important; padding:20px 22px!important; } #zumi-native-about .zna-review__top{ margin-bottom:15px!important; } #zumi-native-about .zna-stars{ font-size:24px!important; } #zumi-native-about .zna-review > p{ font-size:14.5px!important; line-height:1.47!important; } #zumi-native-about .zna-review footer{ margin-top:15px!important; padding-top:13px!important; } } /* ------------------------------------------------------------ OUR APPROACH — restore the taller original treatment on larger desktops. Only the smaller non-mobile widths are shortened. ------------------------------------------------------------ */ /* Large desktop: restore the pre-v1.0.71 proportions. */ @media (min-width:1400px) and (max-width:1599px){ #zumi-native-about .zna-hero-card--below{ min-height:280px!important; padding-top:24px!important; padding-bottom:24px!important; background-size:cover!important; background-position:center 55%!important; } #zumi-native-about .zna-hero-card--below p{ margin-top:clamp(88px,5.5vw,112px)!important; padding-top:16px!important; padding-bottom:16px!important; } } @media (min-width:1600px){ #zumi-native-about .zna-hero-card--below{ min-height:320px!important; padding-top:28px!important; padding-bottom:28px!important; background-size:cover!important; background-position:center 55%!important; } } /* Medium desktop: slightly shorter, with the background shifted upward. */ @media (min-width:1181px) and (max-width:1399px){ #zumi-native-about .zna-hero-card--below{ min-height:245px!important; padding-top:16px!important; padding-bottom:16px!important; background-size:cover!important; background-position:center 42%!important; } #zumi-native-about .zna-hero-card--below p{ margin-top:70px!important; padding-top:12px!important; padding-bottom:12px!important; } } /* Small laptop/tablet: reduce height substantially but do not touch mobile. */ @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-hero-card--below{ min-height:330px!important; padding-top:20px!important; padding-bottom:17px!important; background-position:center 43%!important; } #zumi-native-about .zna-hero-card--below p{ margin-top:76px!important; padding-top:14px!important; padding-bottom:14px!important; } } /* ============================================================ v1.0.73 — PRINCIPLE CARD ALIGNMENT / CTA LINK / HERO IMAGE ============================================================ */ /* ------------------------------------------------------------ MAIN HERO — new night Hilux background across all screen sizes. Keep the existing dark overlay, ghost text and caracal treatment. ------------------------------------------------------------ */ #zumi-native-about .zna-hero.zna-hero--intro{ background: linear-gradient(90deg,rgba(10,8,7,.91) 0%,rgba(10,8,7,.77) 42%,rgba(10,8,7,.53) 72%,rgba(10,8,7,.38) 100%), linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.32) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hilux-night-namibia-1500.webp") center 52% / cover no-repeat!important; } @media (max-width:760px){ #zumi-native-about .zna-hero.zna-hero--intro{ background: linear-gradient(90deg,rgba(10,8,7,.91) 0%,rgba(10,8,7,.79) 60%,rgba(10,8,7,.52) 100%), linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.34) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hilux-night-namibia-1500.webp") center center / cover no-repeat!important; } } /* ------------------------------------------------------------ TECHNOLOGY CTA — remove the orange underline beneath “Explore our other tourism technology projects →”. ------------------------------------------------------------ */ #zumi-native-about .zna-story .zna-values--principles .zna-value__link, #zumi-native-about .zna-story .zna-values--principles .zna-value__link:hover, #zumi-native-about .zna-story .zna-values--principles .zna-value__link:focus-visible{ border-bottom:0!important; text-decoration:none!important; padding-bottom:0!important; } /* ------------------------------------------------------------ CLEAR / SUPPORT CARDS — force identical top alignment at the intermediate screen sizes where the Support title was dropping. ------------------------------------------------------------ */ @media (min-width:761px) and (max-width:1399px){ #zumi-native-about .zna-story .zna-values--principles .zna-value--2, #zumi-native-about .zna-story .zna-values--principles .zna-value--3{ display:flex!important; flex-direction:column!important; justify-content:flex-start!important; align-items:stretch!important; align-content:flex-start!important; min-height:100%!important; padding-top:30px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--2 .zna-value__copy, #zumi-native-about .zna-story .zna-values--principles .zna-value--3 .zna-value__copy{ display:block!important; width:100%!important; margin:0!important; padding:0!important; align-self:stretch!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--2 .zna-value__heading, #zumi-native-about .zna-story .zna-values--principles .zna-value--3 .zna-value__heading{ display:flex!important; align-items:flex-start!important; justify-content:flex-start!important; min-height:58px!important; margin:0 0 20px!important; padding:0!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--2 .zna-value__title-icon, #zumi-native-about .zna-story .zna-values--principles .zna-value--3 .zna-value__title-icon{ flex:0 0 48px!important; width:48px!important; height:48px!important; margin:0!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--2 h3, #zumi-native-about .zna-story .zna-values--principles .zna-value--3 h3{ margin:0!important; padding:0!important; line-height:1.08!important; align-self:flex-start!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--2 .zna-value__bullets, #zumi-native-about .zna-story .zna-values--principles .zna-value--3 .zna-value__bullets{ margin-top:0!important; align-self:stretch!important; } } /* ============================================================ v1.0.74 — CONSISTENT HERO / APPROACH / PORTRAIT CROPS ============================================================ */ /* ------------------------------------------------------------ MAIN INTRO HERO Lock the requested Hilux-at-night image on every viewport, including breakpoints that previously referenced older assets. ------------------------------------------------------------ */ #zumi-native-about .zna-hero.zna-hero--intro{ background: linear-gradient(90deg,rgba(10,8,7,.91) 0%,rgba(10,8,7,.77) 42%,rgba(10,8,7,.53) 72%,rgba(10,8,7,.38) 100%), linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.32) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hilux-night-namibia-1500.webp") center 52% / cover no-repeat!important; } @media (min-width:1181px){ #zumi-native-about .zna-hero.zna-hero--intro{ background: linear-gradient(90deg,rgba(10,8,7,.91) 0%,rgba(10,8,7,.77) 42%,rgba(10,8,7,.53) 72%,rgba(10,8,7,.38) 100%), linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.32) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hilux-night-namibia-1500.webp") center 52% / cover no-repeat!important; } } @media (max-width:1180px){ #zumi-native-about .zna-hero.zna-hero--intro{ background: linear-gradient(90deg,rgba(10,8,7,.92) 0%,rgba(10,8,7,.78) 54%,rgba(10,8,7,.50) 100%), linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.34) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-hilux-night-namibia-1500.webp") center center / cover no-repeat!important; } } /* ------------------------------------------------------------ CARACAL Still enters from the left, but is shifted further into the hero on every viewport. ------------------------------------------------------------ */ #zumi-native-about .zna-hero__caracal{ left:7%!important; right:auto!important; } @media (min-width:1500px){ #zumi-native-about .zna-hero__caracal{ left:8%!important; right:auto!important; } } @media (min-width:1181px) and (max-width:1499px){ #zumi-native-about .zna-hero__caracal{ left:6%!important; right:auto!important; } } @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-hero__caracal{ left:4%!important; right:auto!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ left:1%!important; right:auto!important; } } /* ------------------------------------------------------------ PEOPLE LEADING ZUMI At the 1500-ish desktop range shown by the user, keep the photos filling their media panes but crop more heavily from the LEFT. This shifts the useful/right-hand portion of each source image into view instead of shrinking the portraits. ------------------------------------------------------------ */ @media (min-width:1400px) and (max-width:1700px){ #zumi-native-about .zna-person--lead .zna-person__media{ overflow:hidden!important; } #zumi-native-about .zna-person--lead .zna-person__media img{ position:relative!important; left:-14%!important; width:118%!important; max-width:none!important; height:100%!important; object-fit:cover!important; object-position:62% center!important; transform:none!important; } #zumi-native-about .zna-person--lead:hover .zna-person__media img{ transform:none!important; } } @media (min-width:1260px) and (max-width:1399px){ #zumi-native-about .zna-person--lead .zna-person__media img{ position:relative!important; left:-10%!important; width:116%!important; max-width:none!important; height:100%!important; object-fit:cover!important; object-position:60% center!important; transform:none!important; } } /* ------------------------------------------------------------ JEROME + MIKE PHOTO Do not resize the tile or image — only move the crop within it at the desktop width where it was cutting the subjects off. ------------------------------------------------------------ */ @media (min-width:1181px) and (max-width:1700px){ #zumi-native-about .zna-photo-grid--collage .zna-photo--3 > img{ object-position:68% center!important; } } /* ------------------------------------------------------------ ONE TEAM / OUR APPROACH Use the SAME composition model on every screen: icon -> eyebrow -> title at the top, image in the middle, glass description box anchored at the bottom. The image always uses cover, so it may crop but never stretches. ------------------------------------------------------------ */ #zumi-native-about .zna-hero-card--below{ position:relative!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; justify-content:flex-start!important; width:calc(100% - 30px)!important; max-width:none!important; min-height:clamp(430px,44vw,700px)!important; height:auto!important; margin:8px 15px 0!important; padding:clamp(26px,2.8vw,48px)!important; gap:0!important; overflow:hidden!important; border:1px solid rgba(232,94,42,.58)!important; border-radius:4px !important; background: linear-gradient(180deg,rgba(18,13,11,.24) 0%,rgba(18,13,11,.13) 38%,rgba(18,13,11,.24) 63%,rgba(18,13,11,.72) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 51% / cover no-repeat!important; color:#fff!important; box-shadow:0 16px 38px rgba(31,18,10,.14)!important; } #zumi-native-about .zna-hero-card--below::after{ content:none!important; display:none!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ position:relative!important; z-index:3!important; flex:0 0 auto!important; width:clamp(48px,4.2vw,72px)!important; height:clamp(48px,4.2vw,72px)!important; margin:0 0 clamp(15px,1.25vw,20px)!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ position:relative!important; z-index:3!important; display:flex!important; flex:1 1 auto!important; flex-direction:column!important; align-items:flex-start!important; width:100%!important; min-width:0!important; min-height:0!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ display:inline-flex!important; margin:0 0 clamp(11px,1vw,16px)!important; } #zumi-native-about .zna-hero-card--below strong{ display:block!important; width:100%!important; max-width:1400px!important; margin:0!important; color:#fff!important; font-size:clamp(38px,5vw,78px)!important; line-height:.98!important; letter-spacing:-.05em!important; } #zumi-native-about .zna-hero-card--below p{ display:block!important; width:100%!important; max-width:none!important; margin:auto 0 0!important; padding:clamp(18px,1.7vw,28px) clamp(20px,2vw,34px)!important; border:1px solid rgba(255,255,255,.18)!important; border-radius:4px !important; background:rgba(24,15,12,.92)!important; color:rgba(255,255,255,.90)!important; backdrop-filter:blur(12px)!important; -webkit-backdrop-filter:blur(12px)!important; columns:auto!important; column-count:auto!important; white-space:normal!important; word-break:normal!important; overflow-wrap:normal!important; text-align:left!important; font-size:clamp(17px,1.5vw,25px)!important; line-height:1.5!important; } /* Preserve the exact lower vehicle crop around the attached ~1548px view. */ @media (min-width:1400px) and (max-width:1650px){ #zumi-native-about .zna-hero-card--below{ min-height:clamp(610px,44vw,690px)!important; background-position:center 58%!important; padding-top:clamp(28px,2.25vw,36px)!important; padding-bottom:clamp(26px,2.1vw,34px)!important; } } /* Other large desktops keep the same layout, with a neutral crop. */ @media (min-width:1651px){ #zumi-native-about .zna-hero-card--below{ background-position:center 53%!important; } } /* Tablet/small-laptop: same composition, simply compressed vertically. */ @media (min-width:761px) and (max-width:1399px){ #zumi-native-about .zna-hero-card--below{ min-height:clamp(430px,50vw,590px)!important; background-position:center 50%!important; padding:24px 26px!important; } #zumi-native-about .zna-hero-card--below strong{ font-size:clamp(34px,5.1vw,58px)!important; } #zumi-native-about .zna-hero-card--below p{ margin-top:auto!important; padding:16px 18px!important; font-size:clamp(15px,1.55vw,18px)!important; } } /* Mobile retains the exact same information hierarchy instead of switching into the older fragmented layout. */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ width:calc(100% - 24px)!important; min-height:430px!important; margin:4px 12px 0!important; padding:20px 18px 18px!important; border-radius:4px !important; background: linear-gradient(180deg,rgba(18,13,11,.30) 0%,rgba(18,13,11,.14) 32%,rgba(18,13,11,.32) 63%,rgba(18,13,11,.82) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/zumi-fleet-sunset-2000.webp") center 50% / cover no-repeat!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__icon{ width:46px!important; height:46px!important; margin-bottom:12px!important; } #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ margin-bottom:8px!important; font-size:10px!important; } #zumi-native-about .zna-hero-card--below strong{ font-size:clamp(29px,9vw,42px)!important; line-height:1.02!important; } #zumi-native-about .zna-hero-card--below p{ margin-top:auto!important; padding:14px 15px!important; border-radius:4px !important; font-size:14px!important; line-height:1.46!important; } } /* ============================================================ v1.0.75 — 25 YEARS BACKGROUND + HIGH-QUALITY 25+ GHOST TYPE ============================================================ */ /* Explicitly lock the expanded-sky dune into the Founded in 2025 panel at every breakpoint. */ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient(90deg,rgba(10,8,7,.94) 0%,rgba(10,8,7,.84) 35%,rgba(10,8,7,.56) 55%,rgba(10,8,7,.18) 76%,rgba(10,8,7,.06) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center center / cover no-repeat!important; } /* Large screens retain the smaller centered-image / translucent side-bar treatment, but now use the new expanded-sky source. */ @media (min-width:1181px){ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient( 90deg, rgba(13,9,7,.74) 0%, rgba(24,14,9,.54) 8%, rgba(24,14,9,.18) 14%, transparent 22%, transparent 78%, rgba(24,14,9,.18) 86%, rgba(24,14,9,.54) 92%, rgba(13,9,7,.74) 100% ), linear-gradient( 90deg, rgba(10,8,7,.93) 0%, rgba(10,8,7,.80) 34%, rgba(10,8,7,.42) 57%, rgba(10,8,7,.12) 78%, rgba(10,8,7,.30) 100% ), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center 48% / min(80vw,1380px) auto no-repeat, linear-gradient(135deg,#17100d 0%,#0e0b09 54%,#1a100b 100%)!important; } } /* Eliminate the stroked-edge aliasing that made the very large 25+ look rasterized/jagged. This remains translucent orange, but is rendered as clean vector font fill instead of an outlined glyph. */ #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__ghost{ color:rgba(232,94,42,.48)!important; -webkit-text-stroke:0 transparent!important; text-shadow:0 0 32px rgba(232,94,42,.13)!important; font-size:clamp(96px,10vw,190px)!important; font-weight:700!important; letter-spacing:-.065em!important; line-height:.78!important; opacity:1!important; -webkit-font-smoothing:antialiased!important; -moz-osx-font-smoothing:grayscale!important; text-rendering:geometricPrecision!important; backface-visibility:hidden!important; transform:translateZ(0)!important; } @media (max-width:1180px){ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient(90deg,rgba(10,8,7,.92) 0%,rgba(10,8,7,.77) 58%,rgba(10,8,7,.39) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center 48% / cover no-repeat!important; } } @media (max-width:760px){ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient(90deg,rgba(10,8,7,.92) 0%,rgba(10,8,7,.76) 62%,rgba(10,8,7,.40) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") 64% center / cover no-repeat!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__ghost{ font-size:clamp(82px,20vw,132px)!important; } } /* ============================================================ v1.0.76 — CARACAL / 25+ IMAGE EDGES / MID-SIZE TYPOGRAPHY / PORTRAIT + JEROME SAFE CROPS ============================================================ */ /* ------------------------------------------------------------ CARACAL Keep it deliberately clipped by the LEFT edge on every viewport. It should feel like it is entering the banner rather than sitting fully inside it. ------------------------------------------------------------ */ #zumi-native-about .zna-hero__caracal{ left:-18%!important; right:auto!important; } @media (min-width:1500px){ #zumi-native-about .zna-hero__caracal{ left:-15%!important; } } @media (min-width:1181px) and (max-width:1499px){ #zumi-native-about .zna-hero__caracal{ left:-18%!important; } } @media (min-width:901px) and (max-width:1180px){ #zumi-native-about .zna-hero__caracal{ left:-21%!important; } } @media (min-width:761px) and (max-width:900px){ #zumi-native-about .zna-hero__caracal{ left:-24%!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ left:-30%!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero__caracal{ left:-34%!important; } } /* ------------------------------------------------------------ FOUNDED IN 2025 / 25+ PANEL Replace the hard side bars with a transparent continuation of the SAME image. A full-bleed, subdued copy sits behind the smaller sharp center image so the edges feel like translucent image extensions. ------------------------------------------------------------ */ @media (min-width:1181px){ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient( 90deg, rgba(10,8,7,.94) 0%, rgba(10,8,7,.79) 22%, rgba(10,8,7,.42) 48%, rgba(10,8,7,.18) 72%, rgba(10,8,7,.42) 100% ), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center 48% / min(80vw,1380px) auto no-repeat, linear-gradient(rgba(11,8,7,.46),rgba(11,8,7,.46)), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center 48% / cover no-repeat!important; background-blend-mode:normal,normal,normal,normal!important; } } /* ------------------------------------------------------------ 25+ PANEL TYPOGRAPHY At the intermediate/large viewport shown, restore a clear hierarchy: the founding statement is decisively larger; the mission sentence is visibly secondary. ------------------------------------------------------------ */ @media (min-width:1181px) and (max-width:1750px){ #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__lead h3{ max-width:950px!important; font-size:clamp(39px,3.15vw,58px)!important; line-height:1.05!important; letter-spacing:-.042em!important; } #zumi-native-about .zna-story-main-copy--title-only .zna-story-main-copy__mission{ max-width:860px!important; padding-top:clamp(52px,3.8vw,72px)!important; font-size:clamp(16px,1.12vw,20px)!important; line-height:1.55!important; font-weight:500!important; } } /* ------------------------------------------------------------ PEOPLE LEADING ZUMI For the problematic wide-but-not-huge desktop range, stop trying to fill the media pane with a hard crop. Keep the CARD size unchanged, but render the actual portrait slightly smaller so the whole face is visible. The unused height becomes deliberate dark top/bottom bands. ------------------------------------------------------------ */ @media (min-width:1181px) and (max-width:1750px){ #zumi-native-about .zna-person--lead .zna-person__media{ position:relative!important; overflow:hidden!important; background: linear-gradient(180deg,#171311 0%,#211713 50%,#171311 100%)!important; } #zumi-native-about .zna-person--lead .zna-person__media img{ position:absolute!important; top:7%!important; left:0!important; width:100%!important; height:86%!important; max-width:none!important; object-fit:contain!important; object-position:center center!important; transform:none!important; filter:none!important; } #zumi-native-about .zna-person--lead:hover .zna-person__media img{ transform:none!important; } } /* ------------------------------------------------------------ JEROME + MIKE Same principle: keep the tile dimensions unchanged but make the photograph slightly smaller within the tile, producing safe dark top/bottom bands rather than cutting off faces. ------------------------------------------------------------ */ @media (min-width:1181px) and (max-width:1750px){ #zumi-native-about .zna-photo-grid--collage .zna-photo--3{ background: linear-gradient(180deg,#171311 0%,#211713 50%,#171311 100%)!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--3 > img{ top:6%!important; bottom:auto!important; left:0!important; right:auto!important; width:100%!important; height:88%!important; object-fit:contain!important; object-position:center center!important; filter:brightness(.94) contrast(1.02)!important; } } /* Keep captions readable over the inset Jerome image and dark bars. */ @media (min-width:1181px) and (max-width:1750px){ #zumi-native-about .zna-photo-grid--collage .zna-photo--3::after{ background: linear-gradient(180deg,transparent 42%,rgba(8,6,5,.82) 100%)!important; } } /* ============================================================ v1.0.77 — 996PX RANGE / FULL-BLEED 25+ / CARACAL REFINEMENT ============================================================ */ /* ------------------------------------------------------------ FOUNDED IN 2025 Remove the side-extension/bar treatment completely. The new dune image now fills the entire panel on every viewport. ------------------------------------------------------------ */ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient(90deg,rgba(10,8,7,.93) 0%,rgba(10,8,7,.79) 38%,rgba(10,8,7,.46) 62%,rgba(10,8,7,.18) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center 48% / cover no-repeat!important; } @media (min-width:1181px){ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient(90deg,rgba(10,8,7,.93) 0%,rgba(10,8,7,.79) 38%,rgba(10,8,7,.46) 62%,rgba(10,8,7,.18) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center 48% / cover no-repeat!important; } } @media (max-width:1180px){ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient(90deg,rgba(10,8,7,.92) 0%,rgba(10,8,7,.78) 58%,rgba(10,8,7,.36) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") center 48% / cover no-repeat!important; } } @media (max-width:760px){ #zumi-native-about .zna-story-main-copy--title-only{ background: linear-gradient(90deg,rgba(10,8,7,.92) 0%,rgba(10,8,7,.76) 62%,rgba(10,8,7,.38) 100%), url("https://zumirentals.com/wp-content/uploads/2026/09/namibia-dune-sky-2000.webp") 60% center / cover no-repeat!important; } } /* ------------------------------------------------------------ CARACAL On tablet / smaller screens, shift it farther right and fade it further so the ghost typography stays dominant. ------------------------------------------------------------ */ @media (min-width:901px) and (max-width:1180px){ #zumi-native-about .zna-hero__caracal{ left:-10%!important; opacity:.065!important; } } @media (min-width:761px) and (max-width:900px){ #zumi-native-about .zna-hero__caracal{ left:-12%!important; opacity:.055!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ left:-17%!important; opacity:.042!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero__caracal{ left:-19%!important; opacity:.035!important; } } /* ------------------------------------------------------------ 901–1180PX RANGE (covers the attached ~996px view) LEAD PORTRAITS: keep full-bleed crop but shift each portrait farther LEFT so faces remain in frame until the true mobile stack takes over. ------------------------------------------------------------ */ @media (min-width:901px) and (max-width:1180px){ #zumi-native-about .zna-person--lead .zna-person__media{ overflow:hidden!important; } #zumi-native-about .zna-person--lead .zna-person__media img{ position:relative!important; left:-18%!important; width:130%!important; max-width:none!important; height:100%!important; object-fit:cover!important; object-position:center center!important; transform:none!important; } #zumi-native-about .zna-person--lead:hover .zna-person__media img{ transform:none!important; } } /* Slightly narrower tablets need a touch more shift. */ @media (min-width:761px) and (max-width:900px){ #zumi-native-about .zna-person--lead .zna-person__media img{ position:relative!important; left:-21%!important; width:136%!important; max-width:none!important; height:100%!important; object-fit:cover!important; object-position:center center!important; transform:none!important; } } /* ------------------------------------------------------------ EXPERIENCE GRID — attached ~996px range. Make the Jerome and testimonial row taller without changing the upper traveller tiles. More vertical room reveals the subjects' heads and gives the review card matching proportions. ------------------------------------------------------------ */ @media (min-width:901px) and (max-width:1180px){ #zumi-native-about .zna-photo-grid--collage .zna-photo--3, #zumi-native-about .zna-review{ min-height:330px!important; height:330px!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--3 > img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center 28%!important; } #zumi-native-about .zna-review{ padding:24px 24px!important; } #zumi-native-about .zna-review__top{ margin-bottom:18px!important; } #zumi-native-about .zna-review > p{ font-size:15px!important; line-height:1.48!important; } #zumi-native-about .zna-review footer{ margin-top:18px!important; padding-top:14px!important; } } /* At 761–900px keep the same idea, just a little shorter. */ @media (min-width:761px) and (max-width:900px){ #zumi-native-about .zna-photo-grid--collage .zna-photo--3, #zumi-native-about .zna-review{ min-height:310px!important; height:310px!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--3 > img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center 26%!important; } } /* ============================================================ v1.0.78 — LEADERSHIP RESPONSIVE LAYOUT / FULL-BLEED PORTRAITS ============================================================ */ /* ------------------------------------------------------------ TABLET / SMALL-LAPTOP LEADERSHIP At the 761–1180px range (including the attached ~964px view), stack Oleg and Ambros as two full-width cards, one after the other. Each card itself stays horizontal until the true mobile breakpoint. ------------------------------------------------------------ */ @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-lead-grid{ grid-template-columns:1fr!important; gap:14px!important; width:100%!important; max-width:none!important; } #zumi-native-about .zna-person--lead{ grid-template-columns:minmax(250px,38%) minmax(0,1fr)!important; min-height:310px!important; width:100%!important; max-width:none!important; } #zumi-native-about .zna-person--lead .zna-person__media{ min-height:310px!important; height:310px!important; aspect-ratio:auto!important; background:#E7E1DC!important; overflow:hidden!important; } /* Fill the image area completely; no letterboxing/bars. */ #zumi-native-about .zna-person--lead .zna-person__media img{ position:absolute!important; inset:0!important; left:0!important; top:0!important; width:100%!important; height:100%!important; max-width:none!important; object-fit:cover!important; object-position:center 42%!important; transform:none!important; } #zumi-native-about .zna-person--lead:hover .zna-person__media img{ transform:none!important; } #zumi-native-about .zna-person--lead .zna-person__body{ align-self:stretch!important; justify-content:center!important; } } /* ------------------------------------------------------------ LARGER SCREENS Never leave black bars above/below Oleg or Ambros. Their images fill the existing media panes by zooming/cropping with object-fit cover. The cards themselves do not change size. ------------------------------------------------------------ */ @media (min-width:1181px){ #zumi-native-about .zna-person--lead .zna-person__media{ position:relative!important; overflow:hidden!important; background:#E7E1DC!important; } #zumi-native-about .zna-person--lead .zna-person__media img{ position:absolute!important; inset:0!important; top:0!important; left:0!important; width:100%!important; height:100%!important; max-width:none!important; object-fit:cover!important; object-position:center 44%!important; transform:none!important; filter:none!important; } #zumi-native-about .zna-person--lead:hover .zna-person__media img{ transform:scale(1.01)!important; } } /* Slightly tune the large-but-not-ultrawide range so faces remain the priority while the photos still fully fill the media panes. */ @media (min-width:1181px) and (max-width:1750px){ #zumi-native-about .zna-person--lead .zna-person__media img{ object-position:center 40%!important; } } /* ============================================================ v1.0.79 — ONE TEAM HEADER CLEANUP ============================================================ */ /* The icon blob and “Our Approach” eyebrow have been removed from markup. These rules also suppress any stale/cached instances. */ #zumi-native-about .zna-hero-card--below .zna-hero-card__icon, #zumi-native-about .zna-hero-card--below .zna-hero-card__kicker{ display:none!important; } /* Remove the vertical space those two elements occupied. The width and background-position stay unchanged, so the image composition remains anchored where it was; the panel simply ends sooner at the bottom. */ #zumi-native-about .zna-hero-card--below{ min-height:clamp(340px,38vw,585px)!important; padding-top:clamp(24px,2.25vw,36px)!important; padding-bottom:clamp(22px,2vw,32px)!important; background-size:cover!important; } /* The title now starts where the visual hierarchy should begin. */ #zumi-native-about .zna-hero-card--below .zna-hero-card__content{ min-height:0!important; } #zumi-native-about .zna-hero-card--below strong{ margin-top:0!important; } /* Preserve the same background focal point for the larger ranges. */ @media (min-width:1651px){ #zumi-native-about .zna-hero-card--below{ min-height:520px!important; background-position:center 53%!important; } } @media (min-width:1400px) and (max-width:1650px){ #zumi-native-about .zna-hero-card--below{ min-height:510px!important; background-position:center 58%!important; } } /* Medium desktop: shorten by roughly the removed icon + eyebrow height without changing the established image focal point. */ @media (min-width:1181px) and (max-width:1399px){ #zumi-native-about .zna-hero-card--below{ min-height:385px!important; padding-top:20px!important; padding-bottom:18px!important; background-position:center 42%!important; } } /* Tablet/small laptop: same cleanup, same crop position. */ @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-hero-card--below{ min-height:340px!important; padding-top:18px!important; padding-bottom:16px!important; background-position:center 50%!important; } } /* Mobile: remove the now-unused top block and make the panel shorter, while retaining the same image focal area. */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ min-height:345px!important; padding-top:17px!important; padding-bottom:15px!important; background-position:center 50%!important; } } /* ============================================================ v1.0.80 — JEROME + MIKE FULL-BLEED PHOTO ============================================================ */ /* At the desktop widths where Jerome + Mike is a narrow collage tile, remove the inset/letterbox treatment entirely. Keep the tile dimensions unchanged and zoom/crop the photo to fill the full tile. */ @media (min-width:1181px) and (max-width:1750px){ #zumi-native-about .zna-photo-grid--collage .zna-photo--3{ background:#171311!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--3 > img{ position:absolute!important; inset:0!important; top:0!important; right:0!important; bottom:0!important; left:0!important; width:100%!important; height:100%!important; max-width:none!important; object-fit:cover!important; object-position:center 26%!important; filter:brightness(.90) contrast(1.03)!important; transform:none!important; } } /* ============================================================ v1.0.81 — SUPPORT ICONS / VERTICAL CENTERING / REVIEW ICON / CARACAL VISIBILITY ============================================================ */ /* ------------------------------------------------------------ HOW THE TEAM CONNECTS Keep the three responsibility rows vertically centered in the available space beneath the intro paragraph at every viewport. ------------------------------------------------------------ */ #zumi-native-about .zna-support-blob{ display:flex!important; flex-direction:column!important; } #zumi-native-about .zna-support-blob__points{ display:flex!important; flex:1 1 auto!important; flex-direction:column!important; justify-content:center!important; align-items:stretch!important; width:100%!important; margin-top:12px!important; margin-bottom:0!important; } /* Supplied support icons — keep all artwork in the Zumi orange accent. */ #zumi-native-about .zna-support-blob__icon{ display:grid!important; place-items:center!important; } #zumi-native-about .zna-support-blob__icon img{ display:block!important; width:60%!important; height:60%!important; object-fit:contain!important; filter:brightness(0) saturate(100%) invert(50%) sepia(98%) saturate(2350%) hue-rotate(344deg) brightness(101%) contrast(92%)!important; } /* ------------------------------------------------------------ REVIEW Replace the quotation mark badge with the supplied thumbs-up icon, retaining the orange visual language. ------------------------------------------------------------ */ #zumi-native-about .zna-review__quote-icon{ display:grid!important; place-items:center!important; } #zumi-native-about .zna-review__quote-icon img{ display:block!important; width:52%!important; height:52%!important; object-fit:contain!important; filter:brightness(0) saturate(100%) invert(50%) sepia(98%) saturate(2350%) hue-rotate(344deg) brightness(101%) contrast(92%)!important; } /* ------------------------------------------------------------ CARACAL Make the animal a little more visible at every breakpoint while keeping it clearly ghosted behind the live typography. ------------------------------------------------------------ */ #zumi-native-about .zna-hero__caracal{ opacity:.22!important; } @media (min-width:1500px){ #zumi-native-about .zna-hero__caracal{ opacity:.24!important; } } @media (min-width:1181px) and (max-width:1499px){ #zumi-native-about .zna-hero__caracal{ opacity:.20!important; } } @media (min-width:901px) and (max-width:1180px){ #zumi-native-about .zna-hero__caracal{ opacity:.11!important; } } @media (min-width:761px) and (max-width:900px){ #zumi-native-about .zna-hero__caracal{ opacity:.095!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ opacity:.08!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero__caracal{ opacity:.07!important; } } /* ============================================================ v1.0.82 — ONE TEAM BACKGROUND FOCAL POINT ============================================================ */ /* Shift the Hilux sunset background upward at every viewport so the vehicles sit higher in the composition and remain more visible above the description panel. Keep cover-fit so the image never stretches. */ #zumi-native-about .zna-hero-card--below{ background-position:center 66%!important; background-size:cover!important; } @media (min-width:1651px){ #zumi-native-about .zna-hero-card--below{ background-position:center 66%!important; } } @media (min-width:1400px) and (max-width:1650px){ #zumi-native-about .zna-hero-card--below{ background-position:center 67%!important; } } @media (min-width:1181px) and (max-width:1399px){ #zumi-native-about .zna-hero-card--below{ background-position:center 66%!important; } } @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-hero-card--below{ background-position:center 65%!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ background-position:center 64%!important; } } /* ============================================================ v1.0.83 — MOBILE ONE TEAM IMAGE POSITION ============================================================ */ /* Mobile only: move the Hilux sunset background higher so more of the trucks remain visible above the description card. */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ background-position:center 72%!important; } } /* ============================================================ v1.0.84 — MOBILE ONE TEAM HEIGHT ============================================================ */ /* Mobile only: make the One team. Many responsibilities panel taller by extending its lower edge downward. Keep the existing top layout, truck crop and 72% background focal point unchanged. */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ min-height:430px!important; background-position:center 72%!important; } } /* ============================================================ v1.0.85 — MOBILE ONE TEAM MAXIMUM SAFE ZOOM-OUT ============================================================ */ /* Mobile only: show as much of the Hilux sunset image as physically possible without exposing empty/black borders. Because the source is much wider than the mobile panel, sizing it to 100% of the panel height is the minimum no-border scale: the full panel height is covered and only the unavoidable left/right excess is cropped. */ @media (max-width:760px){ #zumi-native-about .zna-hero-card--below{ background-size:auto 100%!important; background-position:center 72%!important; background-repeat:no-repeat!important; background-color:#17100d!important; } } /* ============================================================ v1.0.87 — LEADERSHIP LANGUAGE CHIPS ============================================================ */ #zumi-native-about .zna-person--lead .zna-person__languages{ margin-top:14px; } #zumi-native-about .zna-person--lead .zna-person__languages-label{ display:block; margin-bottom:7px; color:#776D66; font-size:10px; font-weight:700; line-height:1.2; letter-spacing:.09em; text-transform:uppercase; } #zumi-native-about .zna-person--lead .zna-person__language-chips{ display:flex; flex-wrap:wrap; gap:6px; } #zumi-native-about .zna-person--lead .zna-person__language-chip{ display:inline-flex; align-items:center; min-height:27px; padding:5px 10px; border:1px solid rgba(232,94,42,.20); border-radius:4px; background:rgba(232,94,42,.08); color:#6B3B21; font-family:"Roboto", Arial, Helvetica, sans-serif; font-size:11.5px; font-weight:600; line-height:1.2; white-space:nowrap; } #zumi-native-about .zna-person--lead .zna-person__languages + p{ margin-top:14px; } @media (max-width:760px){ #zumi-native-about .zna-person--lead .zna-person__languages{ margin-top:12px; } #zumi-native-about .zna-person--lead .zna-person__language-chip{ min-height:25px; padding:4px 9px; font-size:11px; } } /* ============================================================ v1.0.89 — CARACAL VISIBILITY + MOBILE RUSSIAN GHOST REFINEMENT ============================================================ */ /* Slight visibility increase only; the caracal remains a background ghost and stays behind both the multilingual type and the live hero copy. */ #zumi-native-about .zna-hero__caracal{ opacity:.25!important; } @media (min-width:1500px){ #zumi-native-about .zna-hero__caracal{ opacity:.27!important; } } @media (min-width:1181px) and (max-width:1499px){ #zumi-native-about .zna-hero__caracal{ opacity:.23!important; } } @media (min-width:901px) and (max-width:1180px){ #zumi-native-about .zna-hero__caracal{ opacity:.14!important; } } @media (min-width:761px) and (max-width:900px){ #zumi-native-about .zna-hero__caracal{ opacity:.12!important; } } @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ opacity:.10!important; } /* Only the Cyrillic/Russian ghost line: slightly smaller and higher. */ #zumi-native-about .zna-hero__ghost--russian{ bottom:23%!important; font-size:60px!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero__caracal{ opacity:.09!important; } #zumi-native-about .zna-hero__ghost--russian{ bottom:24%!important; font-size:56px!important; } } /* ============================================================ v1.0.91 — ZUMI IN PHOTOS / SIX-PANEL BALANCED GALLERY ============================================================ */ /* Treat the five photographs and the traveller review as six peers. This removes the old asymmetric collage spans and gives every breakpoint a clean, even distribution. */ #zumi-native-about .zna-experience__grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; align-items:stretch!important; max-width:1650px!important; margin:0 auto!important; } #zumi-native-about .zna-photo-grid--collage{ display:contents!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--team, #zumi-native-about .zna-photo-grid--collage .zna-photo--beer, #zumi-native-about .zna-photo-grid--collage .zna-photo--1, #zumi-native-about .zna-photo-grid--collage .zna-photo--2, #zumi-native-about .zna-photo-grid--collage .zna-photo--3{ grid-column:auto!important; grid-row:auto!important; width:100%!important; height:auto!important; min-height:330px!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--beer > img{ object-position:center center!important; filter:brightness(.88) contrast(1.03)!important; } #zumi-native-about .zna-review{ grid-column:auto!important; grid-row:auto!important; width:100%!important; height:auto!important; min-height:330px!important; } /* Tablet / small laptop: exactly two columns. The first row is the existing vehicle-delivery photo beside the new beer photo. */ @media (min-width:761px) and (max-width:1180px){ #zumi-native-about .zna-experience__grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--team, #zumi-native-about .zna-photo-grid--collage .zna-photo--beer, #zumi-native-about .zna-photo-grid--collage .zna-photo--1, #zumi-native-about .zna-photo-grid--collage .zna-photo--2, #zumi-native-about .zna-photo-grid--collage .zna-photo--3, #zumi-native-about .zna-review{ grid-column:auto!important; grid-row:auto!important; height:auto!important; min-height:300px!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--team > img{ object-position:center 48%!important; } } /* Phone: one balanced panel per row, with natural document flow. */ @media (max-width:760px){ #zumi-native-about .zna-experience__grid{ grid-template-columns:1fr!important; gap:10px!important; } #zumi-native-about .zna-photo-grid--collage .zna-photo--team, #zumi-native-about .zna-photo-grid--collage .zna-photo--beer, #zumi-native-about .zna-photo-grid--collage .zna-photo--1, #zumi-native-about .zna-photo-grid--collage .zna-photo--2, #zumi-native-about .zna-photo-grid--collage .zna-photo--3, #zumi-native-about .zna-review{ grid-column:auto!important; grid-row:auto!important; height:auto!important; min-height:280px!important; } } /* ============================================================ v1.0.95 — MOBILE INNER WIDTH / PRINCIPLE ALIGNMENT / LIGHTER WHAT-WE-DO IMAGERY / MOBILE CARACAL SCALE ============================================================ */ /* ------------------------------------------------------------ MOBILE INNER CONTENT WIDTH Do not change any outer section width or padding. Instead, allow contained card groups to use a small amount of the existing inner whitespace so cards sit closer to the outer container edge. ------------------------------------------------------------ */ @media (max-width:760px){ #zumi-native-about .zna-story .zna-values--principles, #zumi-native-about .zna-leadership .zna-lead-grid, #zumi-native-about .zna-support .zna-support-layout, #zumi-native-about .zna-experience .zna-experience__grid{ width:calc(100% + 16px)!important; max-width:none!important; margin-left:-8px!important; margin-right:-8px!important; } /* Keep every child/card filling the newly widened inner track. */ #zumi-native-about .zna-story .zna-values--principles > *, #zumi-native-about .zna-leadership .zna-lead-grid > *, #zumi-native-about .zna-support .zna-support-layout > *, #zumi-native-about .zna-experience .zna-experience__grid > *{ min-width:0!important; max-width:none!important; } } /* ------------------------------------------------------------ WHAT WE DO — show more of the wildlife photographs. Keep enough contrast for white text but reduce the heavy black wash. ------------------------------------------------------------ */ #zumi-native-about .zna-story .zna-values--principles .zna-value{ background-image: linear-gradient(90deg,rgba(13,10,8,.84) 0%,rgba(13,10,8,.72) 48%,rgba(13,10,8,.48) 100%), var(--zna-panel-bg)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ background-image: radial-gradient(circle at 78% 18%,rgba(232,94,42,.11),transparent 34%), linear-gradient(90deg,rgba(13,10,8,.89) 0%,rgba(13,10,8,.76) 45%,rgba(13,10,8,.46) 100%), var(--zna-panel-bg)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ background-image: linear-gradient(90deg,rgba(13,10,8,.85) 0%,rgba(13,10,8,.72) 54%,rgba(13,10,8,.43) 100%), var(--zna-panel-bg)!important; } @media (max-width:820px){ #zumi-native-about .zna-story .zna-values--principles .zna-value, #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ background-image: linear-gradient(90deg,rgba(13,10,8,.86) 0%,rgba(13,10,8,.73) 60%,rgba(13,10,8,.49) 100%), var(--zna-panel-bg)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ background-image: linear-gradient(180deg,rgba(13,10,8,.87) 0%,rgba(13,10,8,.73) 58%,rgba(13,10,8,.58) 100%), var(--zna-panel-bg)!important; } } /* ------------------------------------------------------------ LARGE DESKTOP — align the two lower What We Do cards precisely. Both title rows and both bullet blocks begin at matching heights. ------------------------------------------------------------ */ @media (min-width:1400px){ #zumi-native-about .zna-story .zna-values--principles .zna-value--2, #zumi-native-about .zna-story .zna-values--principles .zna-value--3{ display:flex!important; flex-direction:column!important; align-items:stretch!important; justify-content:flex-start!important; padding-top:34px!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--2 .zna-value__copy, #zumi-native-about .zna-story .zna-values--principles .zna-value--3 .zna-value__copy{ display:grid!important; grid-template-rows:64px auto!important; align-content:start!important; width:100%!important; height:auto!important; margin:0!important; padding:0!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--2 .zna-value__heading, #zumi-native-about .zna-story .zna-values--principles .zna-value--3 .zna-value__heading{ display:flex!important; align-items:center!important; justify-content:flex-start!important; height:64px!important; min-height:64px!important; margin:0!important; padding:0!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--2 .zna-value__bullets, #zumi-native-about .zna-story .zna-values--principles .zna-value--3 .zna-value__bullets{ margin-top:18px!important; align-self:start!important; } } /* ------------------------------------------------------------ MOBILE CARACAL — larger and visibly higher in the hero while keeping the established ghost opacity and left-edge clipping treatment. ------------------------------------------------------------ */ @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ top:45%!important; left:-24%!important; width:132vw!important; transform:translateY(-50%)!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero__caracal{ top:43%!important; left:-27%!important; width:140vw!important; } } /* ============================================================ v1.0.96 — MOBILE CARACAL POSITION / WHAT-WE-DO CONTRAST / MOBILE TECHNOLOGY MOCKUP / CTA REMOVAL ============================================================ */ /* Re-darken the What We Do imagery to a midpoint between the original heavier treatment and the lighter v1.0.95 treatment. */ #zumi-native-about .zna-story .zna-values--principles .zna-value{ background-image: linear-gradient(90deg,rgba(13,10,8,.88) 0%,rgba(13,10,8,.77) 48%,rgba(13,10,8,.55) 100%), var(--zna-panel-bg)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ background-image: radial-gradient(circle at 78% 18%,rgba(232,94,42,.12),transparent 34%), linear-gradient(90deg,rgba(13,10,8,.92) 0%,rgba(13,10,8,.81) 45%,rgba(13,10,8,.53) 100%), var(--zna-panel-bg)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ background-image: linear-gradient(90deg,rgba(13,10,8,.90) 0%,rgba(13,10,8,.78) 54%,rgba(13,10,8,.51) 100%), var(--zna-panel-bg)!important; } @media (max-width:820px){ #zumi-native-about .zna-story .zna-values--principles .zna-value, #zumi-native-about .zna-story .zna-values--principles .zna-value--principle{ background-image: linear-gradient(90deg,rgba(13,10,8,.91) 0%,rgba(13,10,8,.80) 60%,rgba(13,10,8,.58) 100%), var(--zna-panel-bg)!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ background-image: linear-gradient(180deg,rgba(13,10,8,.91) 0%,rgba(13,10,8,.78) 58%,rgba(13,10,8,.65) 100%), var(--zna-panel-bg)!important; } } /* Mobile: move the ghost caracal farther right while preserving the larger / higher v1.0.95 composition. */ @media (max-width:760px){ #zumi-native-about .zna-hero__caracal{ left:-13%!important; } /* Reduce only the booking-portal laptop artwork on mobile. */ #zumi-native-about .zna-story .zna-values--principles .zna-value--technology .zna-value__visual img{ width:min(82%,470px)!important; } } @media (max-width:480px){ #zumi-native-about .zna-hero__caracal{ left:-16%!important; } #zumi-native-about .zna-story .zna-values--principles .zna-value--technology .zna-value__visual img{ width:min(76%,390px)!important; } } /* ============================================================ v1.0.97 — MOBILE TECHNOLOGY PANEL BOTTOM-UP SHADOW ============================================================ */ /* On phones, keep the technology background photo visible at the top and build contrast progressively toward the bottom behind the copy. */ @media (max-width:760px){ #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ background-image: linear-gradient(180deg, rgba(13,10,8,.58) 0%, rgba(13,10,8,.70) 42%, rgba(13,10,8,.82) 70%, rgba(13,10,8,.93) 100%), var(--zna-panel-bg)!important; } } /* ============================================================ v1.0.98 — MOBILE GALLERY ORDER / TECHNOLOGY PANEL CONTRAST ============================================================ */ /* Phones only: keep the traveller/review content first, then finish the section with the two Zumi operational/team moments. Desktop and tablet retain the existing six-panel ordering. */ @media (max-width:760px){ #zumi-native-about .zna-photo-grid--collage .zna-photo--1{order:1!important;} #zumi-native-about .zna-photo-grid--collage .zna-photo--2{order:2!important;} #zumi-native-about .zna-photo-grid--collage .zna-photo--3{order:3!important;} #zumi-native-about .zna-review{order:4!important;} #zumi-native-about .zna-photo-grid--collage .zna-photo--team{order:5!important;} #zumi-native-about .zna-photo-grid--collage .zna-photo--beer{order:6!important;} /* Preserve the bottom-up gradient introduced in v1.0.97, but increase the overall density slightly for stronger contrast. */ #zumi-native-about .zna-story .zna-values--principles .zna-value--technology{ background-image: linear-gradient(180deg, rgba(13,10,8,.64) 0%, rgba(13,10,8,.75) 42%, rgba(13,10,8,.86) 70%, rgba(13,10,8,.95) 100%), var(--zna-panel-bg)!important; } } /* ============================================================ v1.0.101 — LEADERSHIP NAME ROW ============================================================ */ #zumi-native-about .zna-person__name-row{ min-width:0; } #zumi-native-about .zna-person__name-row h3{ min-width:0; } /* ============================================================ v1.0.103 — DE/RU NATIVE WRAPPING, NO AUTOMATIC HYPHENATION ============================================================ Keep the English page geometry as the reference. German and Russian text may wrap to another line and selected headings may scale down, but words are never automatically split with hyphens/dashes. ============================================================ */ @media (max-width:980px){ #zumi-native-about[data-zumi-language="de"], #zumi-native-about[data-zumi-language="ru"]{ width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; } #zumi-native-about[data-zumi-language="de"] :is( .zna-page,.zna-hero-stack,.zna-hero,.zna-hero__copy, .zna-story-main-copy,.zna-story-main-copy__lead, .zna-section,.zna-section-head,.zna-values,.zna-value,.zna-value__copy,.zna-value__heading, .zna-lead-grid,.zna-person,.zna-person__body,.zna-person__name-row, .zna-support-layout,.zna-support-grid,.zna-support-blob, .zna-experience,.zna-experience__head,.zna-experience__grid, .zna-photo,.zna-photo__caption,.zna-review, .zna-contact,.zna-contact__copy,.zna-contact__actions,.zna-btn ), #zumi-native-about[data-zumi-language="ru"] :is( .zna-page,.zna-hero-stack,.zna-hero,.zna-hero__copy, .zna-story-main-copy,.zna-story-main-copy__lead, .zna-section,.zna-section-head,.zna-values,.zna-value,.zna-value__copy,.zna-value__heading, .zna-lead-grid,.zna-person,.zna-person__body,.zna-person__name-row, .zna-support-layout,.zna-support-grid,.zna-support-blob, .zna-experience,.zna-experience__head,.zna-experience__grid, .zna-photo,.zna-photo__caption,.zna-review, .zna-contact,.zna-contact__copy,.zna-contact__actions,.zna-btn ){ min-width:0!important; } #zumi-native-about[data-zumi-language="de"] :is( h1,h2,h3,p,strong,small,.zna-hero-title__accent,.zna-eyebrow, .zna-person__role,.zna-person__languages-label,.zna-person__language-chip, .zna-review__label,.zna-btn span,.zna-photo__caption span ), #zumi-native-about[data-zumi-language="ru"] :is( h1,h2,h3,p,strong,small,.zna-hero-title__accent,.zna-eyebrow, .zna-person__role,.zna-person__languages-label,.zna-person__language-chip, .zna-review__label,.zna-btn span,.zna-photo__caption span ){ max-width:100%!important; min-width:0!important; white-space:normal!important; word-break:normal!important; overflow-wrap:normal!important; -webkit-hyphens:none!important; hyphens:none!important; } #zumi-native-about[data-zumi-language="de"] .zna-hero.zna-hero--intro h1, #zumi-native-about[data-zumi-language="ru"] .zna-hero.zna-hero--intro h1{ text-wrap:wrap!important; } #zumi-native-about[data-zumi-language="de"] :is(.zna-pill,.zna-person__language-chip), #zumi-native-about[data-zumi-language="ru"] :is(.zna-pill,.zna-person__language-chip){ white-space:normal!important; text-align:center!important; -webkit-hyphens:none!important; hyphens:none!important; } } @media (max-width:760px){ /* Smaller type, rather than mid-word splitting, for the longest localized headings. Whole words naturally move to the next line. */ #zumi-native-about[data-zumi-language="de"] .zna-hero.zna-hero--intro h1{ max-width:100%!important; font-size:clamp(38px,11.3vw,54px)!important; line-height:.94!important; letter-spacing:-.05em!important; } #zumi-native-about[data-zumi-language="ru"] .zna-hero.zna-hero--intro h1{ max-width:100%!important; font-size:clamp(40px,11.8vw,57px)!important; line-height:.94!important; letter-spacing:-.045em!important; } #zumi-native-about[data-zumi-language="de"] :is( .zna-section-head h2,.zna-experience h2,.zna-contact h2 ), #zumi-native-about[data-zumi-language="ru"] :is( .zna-section-head h2,.zna-experience h2,.zna-contact h2 ){ max-width:100%!important; font-size:clamp(27px,7.9vw,40px)!important; line-height:1.04!important; text-wrap:wrap!important; } #zumi-native-about[data-zumi-language="de"] .zna-story-main-copy__lead h3, #zumi-native-about[data-zumi-language="ru"] .zna-story-main-copy__lead h3{ max-width:100%!important; width:100%!important; font-size:clamp(29px,8.3vw,41px)!important; text-wrap:wrap!important; } #zumi-native-about[data-zumi-language="de"] .zna-person__role, #zumi-native-about[data-zumi-language="ru"] .zna-person__role{ font-size:10.5px!important; letter-spacing:.02em!important; } } @media (max-width:480px){ #zumi-native-about[data-zumi-language="de"] .zna-hero.zna-hero--intro h1{ font-size:clamp(31px,10vw,44px)!important; } #zumi-native-about[data-zumi-language="ru"] .zna-hero.zna-hero--intro h1{ font-size:clamp(33px,10.5vw,47px)!important; } #zumi-native-about[data-zumi-language="de"] :is( .zna-section-head h2,.zna-experience h2,.zna-contact h2 ), #zumi-native-about[data-zumi-language="ru"] :is( .zna-section-head h2,.zna-experience h2,.zna-contact h2 ){ font-size:clamp(25px,7.5vw,34px)!important; } } /* ============================================================ v1.0.107 — COMPACT NTB REGISTRATION / TRUST SECTION ============================================================ */ #zumi-native-about .zna-ntb{ display:grid; grid-template-columns:minmax(300px,.82fr) minmax(520px,1.18fr); gap:clamp(26px,3vw,52px); align-items:center; margin:0 15px; padding:clamp(28px,2.8vw,48px); border:1px solid #eee9e5; border-radius:4px; background: radial-gradient(circle at 8% 0%,rgba(232,94,42,.075),transparent 34%), #fff; } #zumi-native-about .zna-ntb__copy{min-width:0;max-width:660px} #zumi-native-about .zna-ntb__copy h2{ margin:5px 0 0; color:var(--zna-ink); font-size:clamp(30px,2.35vw,48px); font-weight:700; line-height:1.03; letter-spacing:-.04em; text-wrap:balance; } #zumi-native-about .zna-ntb__copy>p{ margin:13px 0 0; color:var(--zna-muted); font-size:clamp(14px,.9vw,17px); line-height:1.58; } #zumi-native-about .zna-ntb__status{ display:inline-flex; align-items:center; gap:10px; margin-top:17px; padding:9px 12px; border:1px solid #eee4dc; border-radius:4px; background:#faf7f4; } #zumi-native-about .zna-ntb__status-icon{ display:grid; place-items:center; width:31px; height:31px; flex:0 0 31px; border-radius:50%; background:#E85E2A; } #zumi-native-about .zna-ntb__status-icon svg{ width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } #zumi-native-about .zna-ntb__status span:last-child{display:grid;gap:1px;min-width:0} #zumi-native-about .zna-ntb__status strong{ color:var(--zna-ink); font-size:12px; line-height:1.25; } #zumi-native-about .zna-ntb__status small{ color:var(--zna-muted); font-size:10px; line-height:1.3; } #zumi-native-about .zna-ntb__certificates{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-width:0; } #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ display:block; min-width:0; overflow:hidden; border:1px solid #e7e1dc; border-radius:4px; background:#f7f4f1; color:inherit; text-decoration:none!important; box-shadow:0 8px 22px rgba(29,21,16,.07); } #zumi-native-about .zna-ntb-logo-panel__image{ display:grid; place-items:center; min-height:178px; padding:18px 14px; background:#ece7e2; line-height:0; } #zumi-native-about .zna-ntb-logo-panel__image img{ display:block; width:82%; max-width:180px; height:auto; max-height:92px; object-fit:contain; } #zumi-native-about .zna-ntb-logo-panel__meta{ display:grid; gap:4px; padding:10px 12px; background:#fff; } #zumi-native-about .zna-ntb-logo-panel__meta strong{ color:var(--zna-ink); font-size:11px; line-height:1.25; } #zumi-native-about .zna-ntb-logo-panel__meta small{ color:#E85E2A; font-size:10px; font-weight:700; line-height:1.25; } #zumi-native-about .zna-ntb-cert__image{ display:grid; place-items:center; overflow:hidden; padding:14px; background:#ece7e2; line-height:0; } #zumi-native-about .zna-ntb-cert__image img{ display:block; width:82%; height:auto; max-width:230px; margin:0 auto; border-radius:4px; box-shadow:0 3px 10px rgba(29,21,16,.09); } #zumi-native-about .zna-ntb-cert__meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:#fff; } #zumi-native-about .zna-ntb-cert__meta strong{ display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 6px; min-width:0; color:var(--zna-ink); font-size:11px; line-height:1.25; } #zumi-native-about .zna-ntb-cert__registration{ color:#E85E2A; font-weight:800; white-space:nowrap; } #zumi-native-about .zna-ntb-cert__meta small{ flex:0 0 auto; color:#E85E2A; font-size:10px; font-weight:700; line-height:1.2; white-space:nowrap; } #zumi-native-about .zna-ntb-cert:focus-visible, #zumi-native-about .zna-ntb-logo-panel:focus-visible{ outline:3px solid rgba(232,94,42,.3); outline-offset:3px; } @media (hover:hover){ #zumi-native-about .zna-ntb-cert:hover, #zumi-native-about .zna-ntb-logo-panel:hover{ border-color:#d9cec5; box-shadow:0 10px 26px rgba(29,21,16,.10); } } @media(max-width:980px){ #zumi-native-about .zna-ntb{ grid-template-columns:1fr; gap:22px; } #zumi-native-about .zna-ntb__copy{max-width:780px} } @media(max-width:760px){ #zumi-native-about .zna-ntb{ margin:0 12px; padding:24px 20px; border-radius:4px; gap:18px; } #zumi-native-about .zna-ntb__copy h2{ font-size:clamp(28px,8vw,39px); } #zumi-native-about .zna-ntb__copy>p{ font-size:14px; line-height:1.55; } #zumi-native-about .zna-ntb__status{ width:100%; box-sizing:border-box; } #zumi-native-about .zna-ntb-cert__image{padding:9px} #zumi-native-about .zna-ntb-cert__image img{ width:82%; max-width:180px; } #zumi-native-about .zna-ntb__certificates{ grid-template-columns:1fr 1fr; gap:8px; } #zumi-native-about .zna-ntb-logo-panel{grid-column:1 / -1} #zumi-native-about .zna-ntb-logo-panel__image{ min-height:96px; padding:13px; } #zumi-native-about .zna-ntb-logo-panel__image img{ width:auto; max-width:190px; max-height:70px; } #zumi-native-about .zna-ntb-logo-panel__meta{ grid-template-columns:auto 1fr; align-items:center; gap:8px 14px; padding:8px 10px; } #zumi-native-about .zna-ntb-logo-panel__meta small{text-align:right} #zumi-native-about .zna-ntb-cert{border-radius:4px} #zumi-native-about .zna-ntb-cert__meta{ align-items:flex-start; flex-direction:column; gap:3px; padding:8px 9px; } #zumi-native-about .zna-ntb-cert__meta strong{font-size:10px} #zumi-native-about .zna-ntb-cert__meta small{font-size:9px} } @media(max-width:430px){ #zumi-native-about .zna-ntb__certificates{grid-template-columns:1fr 1fr} #zumi-native-about .zna-ntb-logo-panel{grid-column:1 / -1} #zumi-native-about .zna-ntb-logo-panel__image{min-height:86px;padding:11px} #zumi-native-about .zna-ntb-logo-panel__image img{max-width:168px;max-height:62px} #zumi-native-about .zna-ntb-logo-panel__meta{grid-template-columns:1fr;gap:2px} #zumi-native-about .zna-ntb-logo-panel__meta small{text-align:left;font-size:9px} #zumi-native-about .zna-ntb-cert__image{padding:7px} #zumi-native-about .zna-ntb-cert__image img{width:80%;max-width:150px} #zumi-native-about .zna-ntb__status small{font-size:9.5px} } /* Localized wrapping for the NTB block follows the same no-hyphen policy. */ @media(max-width:980px){ #zumi-native-about[data-zumi-language="de"] :is(.zna-ntb,.zna-ntb__copy,.zna-ntb__status,.zna-ntb__certificates,.zna-ntb-cert,.zna-ntb-cert__meta,.zna-ntb-logo-panel,.zna-ntb-logo-panel__meta), #zumi-native-about[data-zumi-language="ru"] :is(.zna-ntb,.zna-ntb__copy,.zna-ntb__status,.zna-ntb__certificates,.zna-ntb-cert,.zna-ntb-cert__meta,.zna-ntb-logo-panel,.zna-ntb-logo-panel__meta){ min-width:0!important; } #zumi-native-about[data-zumi-language="de"] :is(.zna-ntb h2,.zna-ntb p,.zna-ntb strong,.zna-ntb small), #zumi-native-about[data-zumi-language="ru"] :is(.zna-ntb h2,.zna-ntb p,.zna-ntb strong,.zna-ntb small){ max-width:100%!important; white-space:normal!important; word-break:normal!important; overflow-wrap:normal!important; -webkit-hyphens:none!important; hyphens:none!important; } } /* ============================================================ v1.0.108 — NTB PANEL ALIGNMENT Keep all three trust panels side-by-side at smaller widths and enforce equal card / media-area sizing. Certificates stay compact; the NTB mark is enlarged to use the available media area. ============================================================ */ #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ display:grid; grid-template-rows:minmax(178px,1fr) auto; height:100%; } #zumi-native-about .zna-ntb-cert__image, #zumi-native-about .zna-ntb-logo-panel__image{ min-height:178px; height:100%; box-sizing:border-box; } #zumi-native-about .zna-ntb-logo-panel__image img{ width:94%; max-width:260px; max-height:150px; height:auto; object-fit:contain; } @media(max-width:760px){ #zumi-native-about .zna-ntb__certificates{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #zumi-native-about .zna-ntb-logo-panel{ grid-column:auto; } #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ grid-template-rows:minmax(118px,1fr) auto; border-radius:4px; } #zumi-native-about .zna-ntb-cert__image, #zumi-native-about .zna-ntb-logo-panel__image{ min-height:118px; padding:8px; } #zumi-native-about .zna-ntb-logo-panel__image img{ width:96%; max-width:170px; max-height:104px; } #zumi-native-about .zna-ntb-cert__image img{ width:78%; max-width:150px; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ min-height:52px; box-sizing:border-box; } #zumi-native-about .zna-ntb-logo-panel__meta{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px; padding:8px 9px; } #zumi-native-about .zna-ntb-logo-panel__meta strong{ font-size:10px; } #zumi-native-about .zna-ntb-logo-panel__meta small{ text-align:left; font-size:9px; } } @media(max-width:430px){ #zumi-native-about .zna-ntb__certificates{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } #zumi-native-about .zna-ntb-logo-panel{ grid-column:auto; } #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ grid-template-rows:minmax(96px,1fr) auto; } #zumi-native-about .zna-ntb-cert__image, #zumi-native-about .zna-ntb-logo-panel__image{ min-height:96px; padding:6px; } #zumi-native-about .zna-ntb-logo-panel__image img{ width:98%; max-width:136px; max-height:86px; } #zumi-native-about .zna-ntb-cert__image img{ width:76%; max-width:112px; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ min-height:58px; padding:7px; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-cert__meta strong{ font-size:9px; line-height:1.2; } #zumi-native-about .zna-ntb-logo-panel__meta small, #zumi-native-about .zna-ntb-cert__meta small{ font-size:8px; line-height:1.15; white-space:normal; } } /* ============================================================ v1.0.109 — NTB CARD DIVIDER / META ALIGNMENT Give every trust card the same footer height so the white/meta area begins on one horizontal line. Also add intentional spacing between the orange registration number and certificate link. ============================================================ */ #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ grid-template-rows:minmax(0,1fr) 64px; } #zumi-native-about .zna-ntb-cert__meta, #zumi-native-about .zna-ntb-logo-panel__meta{ height:64px; min-height:64px; box-sizing:border-box; } #zumi-native-about .zna-ntb-cert__meta{ column-gap:24px; } #zumi-native-about .zna-ntb-cert__meta strong{ column-gap:9px; } #zumi-native-about .zna-ntb-cert__meta small{ margin-left:8px; } @media(max-width:980px) and (min-width:761px){ #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ grid-template-rows:minmax(0,1fr) 72px; } #zumi-native-about .zna-ntb-cert__meta, #zumi-native-about .zna-ntb-logo-panel__meta{ height:72px; min-height:72px; } } @media(max-width:760px){ #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ grid-template-rows:minmax(118px,1fr) 90px; } #zumi-native-about .zna-ntb-cert__meta, #zumi-native-about .zna-ntb-logo-panel__meta{ height:90px; min-height:90px; box-sizing:border-box; } #zumi-native-about .zna-ntb-cert__meta{ justify-content:flex-start; row-gap:0; } #zumi-native-about .zna-ntb-cert__meta small{ margin-left:0; margin-top:7px; } } @media(max-width:430px){ #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ grid-template-rows:minmax(108px,1fr) 108px; } #zumi-native-about .zna-ntb-cert__meta, #zumi-native-about .zna-ntb-logo-panel__meta{ height:108px; min-height:108px; } #zumi-native-about .zna-ntb-cert__meta strong, #zumi-native-about .zna-ntb-logo-panel__meta strong{ font-size:9px; line-height:1.22; } #zumi-native-about .zna-ntb-cert__meta small, #zumi-native-about .zna-ntb-logo-panel__meta small{ font-size:8.5px; line-height:1.22; } } /* ============================================================ v1.0.110 — NTB CERTIFICATE FOOTER RESPONSIVENESS Prevent the View certificate action from being clipped at intermediate widths while retaining clear separation from the registration number and the equal-height card alignment. ============================================================ */ @media(min-width:761px){ #zumi-native-about .zna-ntb-cert__meta{ display:grid; grid-template-columns:minmax(0,1fr) max-content; align-items:center; column-gap:12px; } #zumi-native-about .zna-ntb-cert__meta strong{ min-width:0; column-gap:6px; } #zumi-native-about .zna-ntb-cert__meta small{ min-width:0; max-width:100%; margin-left:0; text-align:right; } } /* The cards are narrowest while the About section is still in its two-column desktop layout. Tighten only the non-content spacing here rather than allowing the action text to overflow the card. */ @media(min-width:981px) and (max-width:1280px){ #zumi-native-about .zna-ntb-cert__meta{ column-gap:8px; padding-left:10px; padding-right:10px; } #zumi-native-about .zna-ntb-cert__meta strong{ column-gap:5px; font-size:10.5px; } #zumi-native-about .zna-ntb-cert__meta small{ font-size:9px; letter-spacing:-.01em; } } /* Extra insurance for unusually narrow embedded/page-builder views: the action may wrap onto two short lines instead of being cropped. */ @media(min-width:761px) and (max-width:1080px){ #zumi-native-about .zna-ntb-cert__meta small{ max-width:76px; white-space:normal; line-height:1.12; } } /* ============================================================ v1.0.111 — UNIFIED MOBILE NTB PANEL On mobile, preserve the three side-by-side trust items but present them as one shared panel with internal dividers instead of three separate floating cards. Desktop/tablet presentation is unchanged. ============================================================ */ @media(max-width:760px){ #zumi-native-about .zna-ntb__certificates{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; overflow:hidden; border:1px solid #e7e1dc; border-radius:4px; background:#f7f4f1; box-shadow:0 8px 22px rgba(29,21,16,.07); } #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ border:0; border-radius:0; box-shadow:none!important; background:transparent; } #zumi-native-about .zna-ntb-cert + .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel + .zna-ntb-cert{ border-left:1px solid #e7e1dc; } #zumi-native-about .zna-ntb-cert__image, #zumi-native-about .zna-ntb-logo-panel__image{ border-radius:0; } #zumi-native-about .zna-ntb-cert__meta, #zumi-native-about .zna-ntb-logo-panel__meta{ border-radius:0; } } /* ============================================================ v1.0.112 — MOBILE NTB FOOTER STACKING Keep the unified three-column mobile panel, but force each certificate footer into a clear vertical reading order: title -> registration number -> certificate action. ============================================================ */ @media(max-width:760px){ #zumi-native-about .zna-ntb-cert__meta{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-start!important; gap:0!important; min-width:0; padding:8px 8px 9px; } #zumi-native-about .zna-ntb-cert__meta strong{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; width:100%; min-width:0; gap:0!important; line-height:1.18; } #zumi-native-about .zna-ntb-cert__registration{ display:block; margin-top:4px; white-space:nowrap; } #zumi-native-about .zna-ntb-cert__meta small{ display:block; width:100%; min-width:0; margin:6px 0 0!important; text-align:left!important; white-space:normal!important; line-height:1.18; } } @media(max-width:430px){ #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ grid-template-rows:minmax(108px,1fr) 122px; } #zumi-native-about .zna-ntb-cert__meta, #zumi-native-about .zna-ntb-logo-panel__meta{ height:122px; min-height:122px; } #zumi-native-about .zna-ntb-cert__registration{ margin-top:3px; } #zumi-native-about .zna-ntb-cert__meta small{ margin-top:5px!important; } } /* ============================================================ v1.0.113 — MOBILE CERTIFICATE META MATCHES NTB PANEL Keep certificate type and registration number together as the heading group, with the View certificate action directly below. ============================================================ */ @media(max-width:760px){ #zumi-native-about .zna-ntb-cert__meta{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; align-content:start; align-items:start!important; justify-content:stretch!important; gap:4px!important; padding:8px 8px 9px; } #zumi-native-about .zna-ntb-cert__meta strong{ display:flex!important; flex-direction:row!important; align-items:baseline!important; flex-wrap:wrap!important; width:100%; min-width:0; gap:2px 5px!important; line-height:1.18; } #zumi-native-about .zna-ntb-cert__registration{ display:inline!important; margin:0!important; white-space:nowrap; } #zumi-native-about .zna-ntb-cert__meta small{ display:block; width:100%; min-width:0; margin:0!important; text-align:left!important; white-space:normal!important; line-height:1.18; } } /* ============================================================ v1.0.114 — CONSISTENT CERTIFICATE META ON ALL VIEWPORTS Use the same information hierarchy everywhere: certificate type + registration number as the heading group, followed by the View certificate action on its own line. Keep all three panel footers equal-height for clean horizontal alignment. ============================================================ */ #zumi-native-about .zna-ntb-cert__meta{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; align-content:center; align-items:start!important; justify-content:stretch!important; gap:4px!important; min-width:0; } #zumi-native-about .zna-ntb-cert__meta strong{ display:flex!important; flex-direction:row!important; align-items:baseline!important; flex-wrap:wrap!important; width:100%; min-width:0; gap:2px 7px!important; line-height:1.2; } #zumi-native-about .zna-ntb-cert__registration{ display:inline!important; margin:0!important; white-space:nowrap; } #zumi-native-about .zna-ntb-cert__meta small{ display:block!important; width:100%; min-width:0; max-width:none!important; margin:0!important; text-align:left!important; white-space:normal!important; line-height:1.2; } /* The desktop cards now use a two-line footer too, so give the shared footer enough vertical room while keeping all three dividers aligned. */ @media(min-width:761px){ #zumi-native-about .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel{ grid-template-rows:minmax(0,1fr) 76px; } #zumi-native-about .zna-ntb-cert__meta, #zumi-native-about .zna-ntb-logo-panel__meta{ height:76px; min-height:76px; box-sizing:border-box; } #zumi-native-about .zna-ntb-cert__meta{ padding:10px 12px; } } /* At the narrow desktop/tablet transition, retain the same hierarchy instead of reverting to a side-by-side action column. */ @media(min-width:761px) and (max-width:1280px){ #zumi-native-about .zna-ntb-cert__meta{ padding-left:10px; padding-right:10px; column-gap:0!important; } #zumi-native-about .zna-ntb-cert__meta strong{ gap:2px 6px!important; } #zumi-native-about .zna-ntb-cert__meta small{ letter-spacing:normal; } } /* ============================================================ v1.0.115 — NTB FOOTER TEXT-LINE ALIGNMENT Vertically align the NTB logo panel's text block with the two certificate footer blocks. Preserve the existing equal footer heights and responsive combined-panel behavior. ============================================================ */ #zumi-native-about .zna-ntb-logo-panel__meta{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; align-content:center!important; align-items:start!important; justify-content:stretch!important; gap:4px!important; min-width:0; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-logo-panel__meta small{ display:block; width:100%; min-width:0; margin:0; text-align:left!important; } @media(max-width:760px){ #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ padding:8px 8px 9px!important; } } /* ============================================================ v1.0.116 — REGISTRATION NUMBER WITH CERTIFICATE IMAGE Move each orange NTB registration number out of the white footer and place it directly beneath its certificate artwork inside the image area. Preserve the existing panel and footer alignment. ============================================================ */ #zumi-native-about .zna-ntb-cert__image{ display:flex; flex-direction:column; align-items:center; justify-content:center; } #zumi-native-about .zna-ntb-cert__image > .zna-ntb-cert__registration{ display:block!important; flex:0 0 auto; margin:7px 0 0!important; color:#E85E2A; font-size:12px; font-weight:800; line-height:1.1; white-space:nowrap; } #zumi-native-about .zna-ntb-cert__meta strong{ gap:0!important; } @media(max-width:760px){ #zumi-native-about .zna-ntb-cert__image > .zna-ntb-cert__registration{ margin-top:5px!important; font-size:11px; } } @media(max-width:430px){ #zumi-native-about .zna-ntb-cert__image > .zna-ntb-cert__registration{ margin-top:4px!important; font-size:10.5px; } } /* ============================================================ v1.0.119 — NTB ACTION BUTTONS Restore titles to the white footer (v1.0.117 layout) while presenting certificate/database actions as compact orange Zumi buttons. Keep the unified three-column mobile panel intact. ============================================================ */ #zumi-native-about .zna-ntb-logo-panel, #zumi-native-about .zna-ntb-cert{ cursor:default; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; align-content:center!important; align-items:start!important; justify-content:stretch!important; gap:7px!important; min-width:0; box-sizing:border-box; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-cert__meta strong{ display:block!important; width:100%; min-width:0; margin:0!important; color:var(--zna-ink); font-size:11px; font-weight:800; line-height:1.2; text-align:left!important; } #zumi-native-about .zna-ntb-action{ display:inline-flex!important; align-items:center; justify-content:center; gap:4px; width:max-content; max-width:100%; min-height:34px; box-sizing:border-box; padding:7px 10px; border:1px solid transparent; border-radius:4px; background:#E85E2A !important; color:#fff!important; text-decoration:none!important; font-size:10px; font-weight:700; line-height:1.15; text-align:center; white-space:normal; transition:background-color .14s ease,border-color .14s ease,color .14s ease!important; } #zumi-native-about .zna-ntb-action:hover, #zumi-native-about .zna-ntb-action:focus-visible{ background:#E85E2A !important; color:#fff!important; outline:none; transform:none!important; } #zumi-native-about .zna-ntb-action:focus-visible{ box-shadow:0 0 0 3px rgba(232,94,42,.24); } /* Equal footer heights on wider layouts so all three panels align. */ @media(min-width:761px){ #zumi-native-about .zna-ntb-logo-panel, #zumi-native-about .zna-ntb-cert{ grid-template-rows:minmax(0,1fr) 94px!important; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ height:94px!important; min-height:94px!important; padding:10px 12px!important; } } /* Mobile remains a single three-column panel. The buttons become full column width so long localized labels wrap cleanly instead of clipping. */ @media(max-width:760px){ #zumi-native-about .zna-ntb-logo-panel, #zumi-native-about .zna-ntb-cert{ grid-template-rows:minmax(118px,1fr) 108px!important; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ height:108px!important; min-height:108px!important; padding:8px 7px 9px!important; gap:6px!important; align-content:start!important; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-cert__meta strong{ font-size:9.5px; line-height:1.16; } #zumi-native-about .zna-ntb-action{ width:100%; min-height:32px; padding:6px 6px; border-radius:4px; font-size:8.5px; line-height:1.12; } } @media(max-width:430px){ #zumi-native-about .zna-ntb-logo-panel, #zumi-native-about .zna-ntb-cert{ grid-template-rows:minmax(108px,1fr) 112px!important; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ height:112px!important; min-height:112px!important; padding:7px 6px 8px!important; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-cert__meta strong{ font-size:9px; } #zumi-native-about .zna-ntb-action{ min-height:31px; padding:6px 5px; border-radius:4px; font-size:8px; } } /* ============================================================ v1.0.120 — NTB BUTTON / MOBILE STACK REFINEMENT - Centre the NTB actions on wider screens. - Match the final CTA primary-button interaction: immediate hover, no delayed/queued motion, and a simple pressed-state acknowledgement. - On mobile, keep the NTB items inside one shared panel but stack them vertically and centre the compact card content/actions. ============================================================ */ #zumi-native-about .zna-ntb-action{ display:inline-flex!important; align-items:center!important; justify-content:center!important; justify-self:center!important; width:max-content!important; max-width:100%!important; min-height:40px; padding:9px 14px; border:1px solid transparent!important; border-radius:4px; background:#E85E2A !important; color:#fff!important; text-decoration:none!important; font-size:11px; font-weight:700; line-height:1.15; text-align:center; white-space:normal; transform:none!important; animation:none!important; transition:background-color .14s ease,border-color .14s ease,color .14s ease!important; transition-delay:0s!important; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } #zumi-native-about .zna-ntb-action:hover, #zumi-native-about .zna-ntb-action:focus-visible{ background:#E85E2A !important; border-color:transparent!important; color:#fff!important; transform:none!important; outline:none!important; } #zumi-native-about .zna-ntb-action:active{ background:#E85E2A !important; color:#fff!important; transform:none!important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)!important; transition:none!important; } #zumi-native-about .zna-ntb-action:focus-visible{ box-shadow:0 0 0 3px rgba(232,94,42,.24); } /* Wider views: retain the three cards but centre the actions within the common footer area. */ @media(min-width:761px){ #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ justify-items:stretch!important; } #zumi-native-about .zna-ntb-action{ justify-self:center!important; } } /* Mobile: one shared panel, three compact rows instead of three columns. */ @media(max-width:760px){ #zumi-native-about .zna-ntb__certificates{ grid-template-columns:minmax(0,1fr)!important; gap:0!important; overflow:hidden!important; border:1px solid #e7e1dc!important; border-radius:4px !important; background:#f7f4f1!important; box-shadow:0 8px 22px rgba(29,21,16,.07)!important; } #zumi-native-about .zna-ntb-logo-panel, #zumi-native-about .zna-ntb-cert{ grid-column:auto!important; grid-template-rows:104px auto!important; min-height:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; } #zumi-native-about .zna-ntb-cert + .zna-ntb-cert, #zumi-native-about .zna-ntb-logo-panel + .zna-ntb-cert{ border-left:0!important; border-top:1px solid #e7e1dc!important; } #zumi-native-about .zna-ntb-logo-panel__image, #zumi-native-about .zna-ntb-cert__image{ min-height:104px!important; height:104px!important; padding:8px 10px 6px!important; border-radius:0!important; box-sizing:border-box!important; } #zumi-native-about .zna-ntb-logo-panel__image img{ width:auto!important; max-width:150px!important; max-height:78px!important; object-fit:contain!important; } #zumi-native-about .zna-ntb-cert__image img{ width:auto!important; max-width:92px!important; max-height:78px!important; object-fit:contain!important; } #zumi-native-about .zna-ntb-cert__image > .zna-ntb-cert__registration{ margin-top:3px!important; font-size:10.5px!important; line-height:1!important; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ height:auto!important; min-height:78px!important; padding:8px 10px 10px!important; gap:6px!important; align-content:start!important; justify-items:center!important; text-align:center!important; border-radius:0!important; box-sizing:border-box!important; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-cert__meta strong{ width:100%!important; margin:0!important; font-size:10.5px!important; line-height:1.15!important; text-align:center!important; justify-content:center!important; } #zumi-native-about .zna-ntb-action{ justify-self:center!important; width:max-content!important; max-width:100%!important; min-height:34px!important; padding:7px 11px!important; border-radius:4px !important; font-size:9.5px!important; line-height:1.12!important; } } @media(max-width:430px){ #zumi-native-about .zna-ntb-logo-panel, #zumi-native-about .zna-ntb-cert{ grid-template-rows:96px auto!important; } #zumi-native-about .zna-ntb-logo-panel__image, #zumi-native-about .zna-ntb-cert__image{ min-height:96px!important; height:96px!important; padding:7px 8px 5px!important; } #zumi-native-about .zna-ntb-logo-panel__image img{ max-width:138px!important; max-height:70px!important; } #zumi-native-about .zna-ntb-cert__image img{ max-width:84px!important; max-height:70px!important; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ min-height:74px!important; padding:7px 8px 9px!important; gap:5px!important; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-cert__meta strong{ font-size:10px!important; } #zumi-native-about .zna-ntb-action{ min-height:32px!important; padding:6px 9px!important; border-radius:4px !important; font-size:9px!important; } } /* ============================================================ v1.0.121 — NTB BUTTON BORDER INTERACTION - White text on the Zumi orange background at rest. - Border colour changes immediately on hover/focus. - Zero transition/animation delay in every interaction state. ============================================================ */ #zumi-native-about .zna-ntb-action{ background:#E85E2A !important; color:#fff!important; border:2px solid var(--zna-orange)!important; box-sizing:border-box!important; transform:none!important; animation:none!important; animation-delay:0s!important; transition-property:background-color,border-color,color,box-shadow!important; transition-duration:.12s!important; transition-timing-function:ease!important; transition-delay:0s!important; } #zumi-native-about .zna-ntb-action:hover, #zumi-native-about .zna-ntb-action:focus, #zumi-native-about .zna-ntb-action:focus-visible{ background:#E85E2A !important; color:#fff!important; border-color:#E85E2A !important; transform:none!important; animation:none!important; animation-delay:0s!important; transition-delay:0s!important; } #zumi-native-about .zna-ntb-action:focus-visible{ box-shadow:0 0 0 3px rgba(232,94,42,.22)!important; } #zumi-native-about .zna-ntb-action:active{ background:#E85E2A !important; color:#fff!important; border-color:#E85E2A !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)!important; transform:none!important; animation:none!important; animation-delay:0s!important; transition:none!important; transition-delay:0s!important; } \n\n/* ============================================================ v1.0.122 — NTB WHITE ACTIONS / COMPACT MOBILE ROWS - White actions with orange text; orange border appears instantly. - No animation or transition delay in any interaction state. - More breathing room between the panel label and action. - Mobile keeps the three registrations stacked, but each registration becomes a compact media/details row instead of a tall card. ============================================================ */ #zumi-native-about .zna-ntb-action, #zumi-native-about .zna-ntb-action:link, #zumi-native-about .zna-ntb-action:visited{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:max-content!important; max-width:100%!important; min-height:40px!important; margin-top:12px!important; padding:9px 14px!important; box-sizing:border-box!important; border:2px solid #eee7e1!important; border-radius:4px !important; background:#fff!important; color:var(--zna-orange)!important; box-shadow:0 3px 10px rgba(29,21,16,.07)!important; text-decoration:none!important; font-weight:700!important; text-align:center!important; transform:none!important; animation:none!important; animation-delay:0s!important; transition:none!important; transition-delay:0s!important; -webkit-tap-highlight-color:transparent!important; } #zumi-native-about .zna-ntb-action:hover, #zumi-native-about .zna-ntb-action:focus, #zumi-native-about .zna-ntb-action:focus-visible{ border-color:#E85E2A !important; background:#fff!important; color:var(--zna-orange)!important; box-shadow:0 3px 10px rgba(29,21,16,.07)!important; outline:none!important; transform:none!important; animation:none!important; animation-delay:0s!important; transition:none!important; transition-delay:0s!important; } #zumi-native-about .zna-ntb-action:focus-visible{ box-shadow:0 0 0 3px rgba(232,94,42,.17),0 3px 10px rgba(29,21,16,.07)!important; } #zumi-native-about .zna-ntb-action:active{ border-color:#E85E2A !important; background:#fff7f2!important; color:var(--zna-orange-deep)!important; box-shadow:inset 0 0 0 1px rgba(232,94,42,.08)!important; transform:none!important; animation:none!important; animation-delay:0s!important; transition:none!important; transition-delay:0s!important; } /* Give the three wider-screen footers enough room for a clear label/action gap. */ @media(min-width:761px){ #zumi-native-about .zna-ntb-logo-panel, #zumi-native-about .zna-ntb-cert{ grid-template-rows:minmax(0,1fr) 112px!important; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; height:112px!important; min-height:112px!important; padding:12px 12px 11px!important; gap:0!important; text-align:center!important; box-sizing:border-box!important; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-cert__meta strong{ width:100%!important; text-align:center!important; justify-content:center!important; } #zumi-native-about .zna-ntb-action{ margin-top:13px!important; justify-self:auto!important; } } /* Compact mobile composition: the three registrations remain one stacked panel, but each registration is a horizontal media/details row. */ @media(max-width:760px){ #zumi-native-about .zna-ntb{ padding:22px 16px!important; gap:16px!important; } #zumi-native-about .zna-ntb__certificates{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:0!important; overflow:hidden!important; border:1px solid #e7e1dc!important; border-radius:4px !important; background:#fff!important; box-shadow:0 8px 22px rgba(29,21,16,.07)!important; } #zumi-native-about .zna-ntb-logo-panel, #zumi-native-about .zna-ntb-cert{ display:grid!important; grid-template-columns:minmax(112px,36%) minmax(0,1fr)!important; grid-template-rows:auto!important; align-items:stretch!important; min-height:142px!important; height:auto!important; overflow:hidden!important; border:0!important; border-radius:0!important; background:#fff!important; box-shadow:none!important; } #zumi-native-about .zna-ntb-logo-panel + .zna-ntb-cert, #zumi-native-about .zna-ntb-cert + .zna-ntb-cert{ border-top:1px solid #e7e1dc!important; } #zumi-native-about .zna-ntb-logo-panel__image, #zumi-native-about .zna-ntb-cert__image{ display:grid!important; place-items:center!important; align-content:center!important; width:auto!important; min-height:142px!important; height:auto!important; padding:10px!important; box-sizing:border-box!important; background:#ece7e2!important; border-radius:0!important; } #zumi-native-about .zna-ntb-logo-panel__image img{ width:92%!important; max-width:145px!important; max-height:105px!important; object-fit:contain!important; } #zumi-native-about .zna-ntb-cert__image img{ width:auto!important; max-width:86px!important; max-height:104px!important; object-fit:contain!important; } #zumi-native-about .zna-ntb-cert__image > .zna-ntb-cert__registration{ margin-top:6px!important; color:var(--zna-orange)!important; font-size:12px!important; font-weight:800!important; line-height:1!important; text-align:center!important; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; height:auto!important; min-height:142px!important; padding:14px 12px!important; gap:0!important; text-align:center!important; box-sizing:border-box!important; background:#fff!important; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-cert__meta strong{ display:block!important; width:100%!important; margin:0!important; color:var(--zna-ink)!important; font-size:12px!important; line-height:1.22!important; text-align:center!important; } #zumi-native-about .zna-ntb-action, #zumi-native-about .zna-ntb-action:link, #zumi-native-about .zna-ntb-action:visited{ width:auto!important; max-width:100%!important; min-height:36px!important; margin-top:11px!important; padding:7px 11px!important; border-radius:4px !important; font-size:10px!important; line-height:1.12!important; white-space:normal!important; } } @media(max-width:430px){ #zumi-native-about .zna-ntb{ padding:20px 13px!important; } #zumi-native-about .zna-ntb-logo-panel, #zumi-native-about .zna-ntb-cert{ grid-template-columns:104px minmax(0,1fr)!important; min-height:128px!important; } #zumi-native-about .zna-ntb-logo-panel__image, #zumi-native-about .zna-ntb-cert__image, #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ min-height:128px!important; } #zumi-native-about .zna-ntb-logo-panel__image{ padding:8px!important; } #zumi-native-about .zna-ntb-logo-panel__image img{ width:94%!important; max-width:110px!important; max-height:88px!important; } #zumi-native-about .zna-ntb-cert__image{ padding:8px 7px!important; } #zumi-native-about .zna-ntb-cert__image img{ max-width:70px!important; max-height:87px!important; } #zumi-native-about .zna-ntb-cert__image > .zna-ntb-cert__registration{ margin-top:5px!important; font-size:11px!important; } #zumi-native-about .zna-ntb-logo-panel__meta, #zumi-native-about .zna-ntb-cert__meta{ padding:11px 9px!important; } #zumi-native-about .zna-ntb-logo-panel__meta strong, #zumi-native-about .zna-ntb-cert__meta strong{ font-size:11px!important; } #zumi-native-about .zna-ntb-action, #zumi-native-about .zna-ntb-action:link, #zumi-native-about .zna-ntb-action:visited{ min-height:34px!important; margin-top:9px!important; padding:6px 9px!important; border-radius:4px !important; font-size:9px!important; } } /* ============================================================ v1.0.123 — NTB HOVER / MOBILE TAP ACKNOWLEDGEMENT - Keep the NTB buttons white with orange text and a neutral border. - Hover adds only a subtle shadow; no orange hover border. - Neutralize the card-level hover lift/shadow change. - Mobile taps receive a brief press/release acknowledgement with 0s delay. ============================================================ */ #zumi-native-about .zna-ntb-action, #zumi-native-about .zna-ntb-action:link, #zumi-native-about .zna-ntb-action:visited{ border-color:#eee7e1!important; background:#fff!important; color:var(--zna-orange)!important; box-shadow:0 2px 7px rgba(29,21,16,.06)!important; animation-delay:0s!important; transition:box-shadow .12s ease 0s,background-color .12s ease 0s,color .12s ease 0s,transform .12s ease 0s!important; transition-delay:0s!important; } #zumi-native-about .zna-ntb-action:hover, #zumi-native-about .zna-ntb-action:focus, #zumi-native-about .zna-ntb-action:focus-visible{ border-color:#eee7e1!important; background:#fff!important; color:var(--zna-orange)!important; box-shadow:0 6px 16px rgba(29,21,16,.12)!important; transform:none!important; animation:none!important; animation-delay:0s!important; transition-delay:0s!important; } #zumi-native-about .zna-ntb-action:focus-visible{ outline:2px solid rgba(232,94,42,.24)!important; outline-offset:2px!important; } #zumi-native-about .zna-ntb-action:active{ border-color:#eee7e1!important; background:#fff8f4!important; color:var(--zna-orange-deep)!important; box-shadow:0 2px 7px rgba(29,21,16,.08)!important; animation-delay:0s!important; transition-delay:0s!important; } /* Do not add a hover shadow/lift to the NTB cards themselves. */ @media (hover:hover){ #zumi-native-about .zna-ntb-cert:hover, #zumi-native-about .zna-ntb-logo-panel:hover{ border-color:#e7e1dc!important; box-shadow:0 8px 22px rgba(29,21,16,.07)!important; transform:none!important; } } /* Mobile tap confirmation: immediate press and quick release, without postponing the link click/navigation. */ @media(max-width:760px){ #zumi-native-about .zna-ntb-action, #zumi-native-about .zna-ntb-action:link, #zumi-native-about .zna-ntb-action:visited{ transition:transform .075s ease-out 0s,box-shadow .075s ease-out 0s,background-color .075s ease-out 0s,color .075s ease-out 0s!important; transition-delay:0s!important; animation-delay:0s!important; } #zumi-native-about .zna-ntb-action.zna-ntb-action--tap-confirm{ transform:scale(.965)!important; background:#fff5ef!important; color:var(--zna-orange-deep)!important; border-color:#eee7e1!important; box-shadow:0 1px 4px rgba(29,21,16,.08)!important; transition-delay:0s!important; animation-delay:0s!important; } } /* ============================================================ v1.0.124 — LARGE-DESKTOP NTB STATUS CENTERING Center the NTB checkmark/status badge within the copy column only on the widest desktop layout. Tablet/mobile remain unchanged. ============================================================ */ @media (min-width:1600px){ #zumi-native-about .zna-ntb__status{ display:flex!important; width:max-content!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; } } /* ============================================================ v1.0.125 — LARGE-DESKTOP NTB STATUS VERTICAL POSITION Keep the centered badge from v1.0.124, but give it a little more breathing room below the descriptive copy on wide screens. ============================================================ */ @media (min-width:1600px){ #zumi-native-about .zna-ntb__status{ margin-top:29px!important; } } /* ZUMI SOFT DESERT DESIGN SYSTEM — 2026-10-08 Consistent 4px soft corners on sections, buttons, media, images and icon tiles. SVG artwork, image pixels, sizing, layout, and interactive behaviour unchanged. Doubled ID specificity intentionally supersedes previous square-corner rules. */ #zumi-native-about#zumi-native-about { --zna-orange:#E85E2A;--zna-orange-deep:#E85E2A;--zna-cream:#FAF5EE;--zna-warm:#E7D5C4;--zna-radius:4px; --zumi-corner: 4px; } /* Keep native radio circles identifiable as radio inputs. */ #zumi-native-about#zumi-native-about input[type="radio"] { border-radius: 50% !important; } /* Preserve contrast: pale sand is used on photographic/dark hero kickers. */ #zumi-native-about#zumi-native-about .zna-eyebrow--light { color:#F1C7A4 !important; } #zumi-native-about#zumi-native-about .zna-btn--primary:not(:disabled):not(.is-disabled) { background-color:#E85E2A !important; border-color:#E85E2A !important; color:#FFFFFF !important; } #zumi-native-about#zumi-native-about .zna-btn--primary:hover:not(:disabled):not(.is-disabled), #zumi-native-about#zumi-native-about .zna-btn--primary:focus-visible:not(:disabled):not(.is-disabled) { background-color:#E85E2A !important; border-color:#E85E2A !important; color:#FFFFFF !important; } /* ZUMI BUTTON PALETTE — screenshot-matched orange #E85E2A (2026-10-08). Surface-only accents: preserves section colours, body copy, images and 4px corners. */ #zumi-native-about#zumi-native-about .zna-btn--primary { background:#E85E2A !important; border-color:#E85E2A !important; color:#FFFFFF !important; } #zumi-native-about#zumi-native-about .zna-btn--primary:is(:hover,:focus-visible):not(:disabled):not(.is-disabled) { background:#E85E2A !important; border-color:#E85E2A !important; color:#FFFFFF !important; } /* ZUMI: 4px on ordinary content surfaces; original banner artwork/radii preserved. */ #zumi-native-about#zumi-native-about .zna-experience, #zumi-native-about#zumi-native-about .zna-person, #zumi-native-about#zumi-native-about .zna-photo, #zumi-native-about#zumi-native-about .zna-review, #zumi-native-about#zumi-native-about .zna-value {border-radius:4px!important;} /* Corner radius for real controls only, never banner layers or decorative pseudo-elements. */ #zumi-native-about#zumi-native-about :is(button, input:not([type="radio"]), textarea, select, a[class*="btn"], a[class*="button"], a[class*="action"]) {border-radius:4px!important;} /* Final solid orange surface contract — all orange action states use exact #E85E2A. */ #zumi-native-about#zumi-native-about .zna-btn--primary, #zumi-native-about#zumi-native-about .zna-btn--primary:hover, #zumi-native-about#zumi-native-about .zna-btn--primary:focus, #zumi-native-about#zumi-native-about .zna-btn--primary:focus-visible, #zumi-native-about#zumi-native-about .zna-btn--primary:active {background-color:#E85E2A!important; border-color:#E85E2A!important;} /* Zumi 2026-10-08: enforce 4px corners on every button-like control, including greyed-out, disabled and secondary span-based CTAs. Do not change pseudo-element artwork or the disabled state. */ #zumi-native-about#zumi-native-about :is( button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], [role="link"][aria-disabled="true"][class*="button"], [aria-disabled="true"][class*="btn"], [aria-disabled="true"][class*="button"], [aria-disabled="true"][class*="action"], a[class*="btn"]:not([class*="icon"]), a[class*="button"]:not([class*="icon"]), a[class*="action"]:not([class*="actions"]):not([class*="icon"]), .zna-btn, .zna-ntb-action ) { border-radius: 4px !important; } /* Zumi 4px refinement: team coordination panel and its nested tiles. Specific selectors avoid affecting curved hero/banner artwork. */ #zumi-native-about#zumi-native-about .zna-support-blob, #zumi-native-about#zumi-native-about .zna-support-blob__point, #zumi-native-about#zumi-native-about .zna-support-blob__icon { border-radius:4px !important; } /* ZUMI BANNER HEADING TYPE — POPPINS, October 2026. Scope: large banner/hero headings only. Body, controls and other headings stay Roboto. Existing sizes, layout, colour, weight and decoration are unchanged. */ #zumi-native-about#zumi-native-about .zna-hero h1 { font-family: "Zumi Poppins", "Poppins", Arial, sans-serif !important; letter-spacing: -.044em !important; } #zumi-native-about#zumi-native-about .zna-hero h1 span, #zumi-native-about#zumi-native-about .zna-hero-title__accent { font-family: "Zumi Poppins", "Poppins", Arial, sans-serif !important; }