/* ============================================================ Tanzania Marketing Awards 2026 — Landing (light theme) Base colours come from :root injected in landing.php . ============================================================ */ :root{ --bg:#FBFAF6; --ink:#14261C; --gold:#B8892B; --green:#1E7A4C; --hero-overlay:0.62; --surface:#FFFFFF; --surface-2:#F4F1E9; --line:#E7E2D5; --text:#35403A; --muted:#6B7469; --gold-2:#D8B24A; --cream:#F6F1E6; --radius:14px; --wrap:1120px; --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,-apple-system,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 14px} .eyebrow--onhero{color:var(--gold-2)} .h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;margin:0;letter-spacing:-.01em;color:var(--ink)} .gold{color:var(--gold)} .req{color:var(--green)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:.95rem;padding:.85em 1.5em;border-radius:999px;cursor:pointer;background:var(--btn,var(--gold));color:var(--btn-text,#fff);border:1px solid var(--btn,var(--gold));transition:transform .15s ease,box-shadow .15s ease,filter .15s ease} .btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 26px -12px rgba(0,0,0,.35)} .btn:disabled,.btn.is-loading{opacity:.72;cursor:not-allowed;transform:none;filter:none} .btn--sm{padding:.55em 1.1em;font-size:.85rem} .btn--lg{padding:1em 1.9em;font-size:1rem} .btn--block{width:100%} .btn--ghost{background:transparent;color:var(--cream);border-color:rgba(255,255,255,.5)} .btn--ghost:hover{border-color:#fff;box-shadow:none;background:rgba(255,255,255,.08)} .nav{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav__inner{display:flex;align-items:center;justify-content:space-between;height:70px} .brand{display:flex;align-items:center;gap:12px} .brand__logo{height:40px;width:auto} .brand__logo--foot{height:34px;margin-bottom:12px} .brand__mark{font-family:var(--serif);font-weight:700;color:#fff;background:var(--ink);border-radius:8px;padding:.15em .5em;font-size:1rem} .brand__txt{font-size:.9rem;color:var(--ink);font-weight:500} .brand__txt em{font-style:normal;color:var(--gold)} .nav__links{display:flex;align-items:center;gap:26px} .nav__links a{font-size:.9rem;color:var(--text)} .nav__links a:hover{color:var(--ink)} .nav__links .btn{color:#fff} .hero{position:relative;overflow:hidden;min-height:82vh;display:flex;align-items:center;background:linear-gradient(160deg,#0e2118,#14261C 60%,#0b1a13)} .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,26,18,calc(var(--hero-overlay)*.8)) 0%,rgba(10,26,18,var(--hero-overlay)) 55%,rgba(10,26,18,calc(var(--hero-overlay) + .15)) 100%)} .hero__inner{position:relative;z-index:2;text-align:center;max-width:880px;margin:0 auto;padding:110px 24px 90px} .hero__title{font-family:var(--serif);font-weight:600;color:var(--cream);font-size:clamp(2.3rem,5.6vw,4.3rem);line-height:1.05;letter-spacing:-.02em;margin:.2em 0 0} .hero__lead{color:rgba(246,241,230,.85);font-size:clamp(1rem,1.6vw,1.18rem);max-width:640px;margin:1.4em auto 0} .hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2.2em} .hero__stats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:3.2em 0 0;padding:0} .hero__stats li{flex:1 1 130px;max-width:180px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:20px 14px;backdrop-filter:blur(4px)} .stat__num{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--gold-2);line-height:1} .stat__lbl{display:block;margin-top:8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,230,.7)} .section{padding:88px 0;border-top:1px solid var(--line)} .section__head{max-width:640px;margin-bottom:48px} .section__sub{color:var(--muted);margin-top:14px} .grid-2{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start} .prose p{color:var(--text);margin:0 0 1.1em} .prose p:last-child{margin-bottom:0} .section--awards{background:var(--surface-2)} .awards{display:flex;flex-direction:column;gap:12px} .award{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease} .award[open]{border-color:var(--gold);box-shadow:0 8px 24px -18px rgba(20,38,28,.5)} .award__summary{display:flex;align-items:center;gap:18px;cursor:pointer;list-style:none;padding:20px 24px} .award__summary::-webkit-details-marker{display:none} .award__no{font-family:var(--serif);color:var(--gold);font-size:1.05rem;min-width:2ch} .award__name{font-weight:600;font-size:1.05rem;flex:1;color:var(--ink)} .award__count{font-size:.78rem;color:var(--muted);letter-spacing:.06em;white-space:nowrap} .award__chev{color:var(--gold);font-size:1.4rem;transition:transform .2s ease} .award[open] .award__chev{transform:rotate(90deg)} .award__list{list-style:none;margin:0;padding:4px 24px 24px;display:flex;flex-wrap:wrap;gap:10px} .chip{font-family:var(--sans);font-size:.86rem;color:var(--text);cursor:pointer;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.5em 1em;transition:all .15s ease} .chip:hover{border-color:var(--gold);color:var(--ink);background:#fff} .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px} .step__no{font-family:var(--serif);font-size:1.4rem;color:var(--gold)} .step__t{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:.5em 0 .4em;color:var(--ink)} .step p{color:var(--muted);margin:0} .section--form{background:var(--surface-2)} .form__wrap{max-width:820px;margin:0 auto} .fieldset{border:0;padding:0;margin:0 0 28px} .fieldset legend{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:0;margin-bottom:16px;font-weight:600} .row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;margin-bottom:18px} .field label{font-size:.85rem;color:var(--text);margin-bottom:7px;font-weight:500} .field input,.field select,.field textarea{font-family:var(--sans);font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:.8em .9em;transition:border-color .15s ease,box-shadow .15s ease} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,137,43,.15)} .field textarea{resize:vertical} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.4em} .consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 26px;font-size:.9rem;color:var(--text)} .consent input{margin-top:.25em;accent-color:var(--gold);width:18px;height:18px} .hp{position:absolute;left:-9999px;height:0;overflow:hidden} .alert{border-radius:var(--radius);padding:16px 20px;margin-bottom:26px;font-size:.9rem} .alert--error{background:#fdecec;border:1px solid #f0b7b7;color:#8f2d2d} .alert--error ul{margin:.5em 0 0;padding-left:1.2em} .alert--info{background:#eef7f1;border:1px solid #bfe3cd;color:#1e6b45} .footer{border-top:1px solid var(--line);padding:48px 0;background:var(--surface)} .footer__inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end} .footer__txt{color:var(--muted);font-size:.88rem;max-width:340px;margin:14px 0 0} .footer__meta{display:flex;flex-direction:column;gap:6px;text-align:right;font-size:.85rem;color:var(--muted)} .footer__meta a{color:var(--gold)} @media(max-width:820px){ .nav__links a:not(.btn){display:none} .grid-2{grid-template-columns:1fr;gap:20px} .steps{grid-template-columns:1fr} .row{grid-template-columns:1fr} .award__summary{gap:12px;padding:18px} .award__count{display:none} .footer__inner{flex-direction:column;align-items:flex-start} .footer__meta{text-align:left} .hero{min-height:auto} } @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.hero__video{display:none}} /* ---------- partners ---------- */ .partners{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:center} .partner{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 18px;min-height:96px;transition:border-color .15s ease,box-shadow .15s ease} .partner:hover{border-color:var(--gold);box-shadow:0 8px 22px -16px rgba(20,38,28,.4)} .partner img{max-height:56px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .2s ease,opacity .2s ease} .partner:hover img{filter:grayscale(0);opacity:1} /* ---------- gallery ---------- */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gallery__item{margin:0;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2);border:1px solid var(--line)} .gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease} .gallery__item:hover img{transform:scale(1.05)} .gallery__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;color:#fff;font-size:.85rem;background:linear-gradient(transparent,rgba(10,26,18,.78))} @media(max-width:900px){ .partners{grid-template-columns:repeat(3,1fr)} .gallery{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .partners{grid-template-columns:repeat(2,1fr)} .gallery{grid-template-columns:1fr} }