/* ==========================================================================
   THL — Agriculture & Logistics
   Single stylesheet for the public site, portal and back office.
   Brand colours are injected as CSS variables by the layout (from Settings).
   ========================================================================== */

:root{
  --green-900:#0b3d1e;
  --green-800:#0f4d26;
  --green-700:#14672f;
  --green-600:#1e8438;
  --green-500:#3fa02c;
  --green-400:#6cc24a;
  --gold:#f5a623;
  --gold-soft:#ffc85c;
  --ink:#0d1f14;
  --body:#3c4a41;
  --line:#e2eae3;
  --bg-soft:#f5f9f3;
  --white:#fff;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(11,61,30,.06), 0 8px 24px rgba(11,61,30,.06);
  --shadow-md:0 18px 44px rgba(11,61,30,.14);
  --max:1160px;
  --sidebar:262px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; font-size:15.5px;
}
h1,h2,h3,h4,h5{color:var(--ink); line-height:1.18; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,4.2vw,3.2rem); font-weight:800}
h2{font-size:clamp(1.45rem,2.6vw,2.1rem); font-weight:800}
h3{font-size:1.12rem; font-weight:700}
h4{font-size:.98rem; font-weight:700}
p{margin:0 0 1rem}
a{color:var(--green-700); text-decoration:none}
a:hover{color:var(--green-600)}
img{max-width:100%; display:block}
small{font-size:.82rem}
hr{border:0; border-top:1px solid var(--line); margin:22px 0}
ul,ol{margin-top:0}
code{background:var(--bg-soft); padding:2px 6px; border-radius:6px; font-size:.86em; color:var(--green-800)}

.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 20px}
.narrow{max-width:760px; margin:0 auto}
.center{text-align:center}
.muted{color:#7b8a80}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.row-between{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.stack{display:grid; gap:14px}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.73rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green-600); margin-bottom:14px;
}
.eyebrow::before{content:""; width:26px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--green-500),var(--gold))}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:700; font-size:.94rem; padding:12px 20px; border-radius:12px;
  border:1px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap; text-align:center;
}
.btn-sm{padding:8px 13px; font-size:.83rem; border-radius:9px}
.btn-lg{padding:15px 26px; font-size:1rem}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(135deg,var(--green-600),var(--green-500)); color:#fff; box-shadow:0 10px 24px rgba(30,132,56,.26)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(30,132,56,.32); color:#fff}
.btn-dark{background:var(--green-900); color:#fff}
.btn-dark:hover{background:var(--green-800); color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-soft)); color:#43290a; box-shadow:0 10px 24px rgba(245,166,35,.3)}
.btn-gold:hover{transform:translateY(-2px); color:#43290a}
.btn-ghost{background:#fff; color:var(--green-800); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green-400); color:var(--green-700)}
.btn-danger{background:#fdecec; color:#a32020; border-color:#f6d4d4}
.btn-danger:hover{background:#fbdede; color:#8a1a1a}
.btn-link{background:none; border:0; color:var(--green-700); font-weight:700; padding:0; cursor:pointer; font:inherit}
.btn[disabled]{opacity:.55; pointer-events:none}

/* ---------- alerts ---------- */
.alert{
  border-radius:12px; padding:13px 16px; font-size:.9rem; margin-bottom:18px;
  border:1px solid transparent; display:flex; gap:10px; align-items:flex-start;
}
.alert-success{background:#eef8eb; border-color:#cfe9c9; color:#1c5a2a}
.alert-error{background:#fdeeee; border-color:#f6d4d4; color:#9d2020}
.alert-info{background:#eef4fb; border-color:#d3e3f5; color:#1d4e7c}
.alert-warn{background:#fff8e8; border-color:#f6e3b8; color:#7a5606}

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.74rem; font-weight:800; letter-spacing:.02em; white-space:nowrap;
}
.badge-green{background:#e6f5e2; color:#1c6b2c}
.badge-amber{background:#fff3d8; color:#8a5a04}
.badge-blue{background:#e8f1fc; color:#1b4f86}
.badge-gray{background:#eef1ee; color:#4c5a50}
.badge-red{background:#fdeaea; color:#9d2020}

/* ==========================================================================
   PUBLIC SITE
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.site-header .nav{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:80px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:54px; width:auto; border-radius:6px}
.brand-text strong{display:block; font-size:1.06rem; color:var(--green-900); letter-spacing:.02em}
.brand-text small{display:block; font-size:.7rem; color:#79877d; letter-spacing:.08em; text-transform:uppercase}
.site-nav{display:flex; align-items:center; gap:4px}
.site-nav a{font-size:.92rem; font-weight:600; color:var(--ink); padding:9px 12px; border-radius:10px}
.site-nav a:hover{background:var(--bg-soft); color:var(--green-700)}
.site-nav a.active{color:var(--green-700); background:var(--bg-soft)}
.nav-actions{display:flex; align-items:center; gap:8px}
.menu-btn{display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:9px 11px; cursor:pointer}

/* flash bar */
.flash-wrap{padding-top:16px}
.flash-wrap .alert{margin-bottom:10px}

/* hero */
.hero{
  position:relative; overflow:hidden; padding:clamp(40px,6vw,76px) 0 clamp(36px,5vw,68px);
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(108,194,74,.18), transparent 70%),
    radial-gradient(700px 380px at 5% 0%, rgba(245,166,35,.13), transparent 68%),
    linear-gradient(180deg,#fff, #f7fbf5 70%, #fff);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,54px); align-items:center}
.hero p.lead{font-size:clamp(.98rem,1.3vw,1.1rem); max-width:36em}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:28px; padding-top:20px; border-top:1px dashed var(--line)}
.hero-badges span{display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:var(--green-800)}
.logo-card{background:#fff; border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow:var(--shadow-md)}
.logo-card img{border-radius:12px; width:100%}
.logo-card .tag{margin:14px 0 0; text-align:center; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green-700)}

/* tracking strip */
.track-strip{margin-top:-6px}
.track-panel{
  background:linear-gradient(135deg,var(--green-900),var(--green-700) 58%,#177a31);
  color:#eaf6e6; border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.track-panel::before{
  content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.35), transparent 65%);
}
.track-panel h3{color:#fff; margin-bottom:4px}
.track-panel p{color:#cfe8c8; font-size:.9rem; margin-bottom:14px}
.track-form{display:flex; gap:10px; flex-wrap:wrap; position:relative}
.track-form input{
  flex:1 1 220px; min-width:0; padding:13px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12); color:#fff; font:inherit; outline:none;
}
.track-form input::placeholder{color:#c8e2c0}
.track-form input:focus{border-color:var(--gold-soft); background:rgba(255,255,255,.2)}

/* sections */
.section{padding:clamp(46px,6vw,80px) 0}
.section-soft{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-head{max-width:660px; margin-bottom:clamp(24px,3.4vw,40px)}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow-sm); transition:.2s;
}
.card-hover:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#cfe6cb}
.icon-box{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:14px;
  background:linear-gradient(135deg, rgba(63,160,44,.14), rgba(108,194,74,.24)); color:var(--green-700);
}
.card ul.ticks{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:7px; font-size:.87rem}
.card ul.ticks li{display:flex; gap:8px}
.card ul.ticks li::before{content:"✓"; color:var(--green-500); font-weight:800}

.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center}
.stat b{display:block; font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:800; color:var(--green-700); letter-spacing:-.03em}
.stat span{font-size:.85rem; font-weight:600}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,54px); align-items:center}
.tick-list{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:11px}
.tick-list li{display:flex; gap:11px; font-size:.95rem}
.tick-list li svg{flex:0 0 auto; margin-top:3px}

.panel-dark{
  border-radius:20px; padding:clamp(22px,3vw,32px); color:#fff;
  background:linear-gradient(150deg,var(--green-900),var(--green-700)); box-shadow:var(--shadow-md);
}
.panel-dark h3{color:#fff}
.panel-dark ol.steps{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:14px}
.panel-dark ol.steps li{display:flex; gap:12px; font-size:.92rem; color:#d8ecce}
.panel-dark .num{
  flex:0 0 26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); font-size:.77rem; font-weight:800; color:#fff;
}
.panel-dark strong{color:#fff}

.faq details{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:10px;
}
.faq summary{font-weight:700; color:var(--ink); cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--green-600); font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0; font-size:.92rem}

.cta-band{
  border-radius:22px; padding:clamp(28px,4vw,50px); text-align:center;
  background:linear-gradient(135deg,var(--gold) 0%, #f7b544 45%, var(--green-500) 135%); color:#231502;
}
.cta-band h2{color:#241502}
.cta-band p{color:#3b2a08; max-width:46em; margin:0 auto 22px; font-weight:500}

/* forms */
.form-grid{display:grid; gap:16px}
.form-grid.cols-2{grid-template-columns:1fr 1fr}
.field label{display:block; font-size:.84rem; font-weight:700; color:var(--green-900); margin-bottom:6px}
.field .hint{font-size:.78rem; color:#88958c; margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=search],select,textarea{
  width:100%; font:inherit; font-size:.94rem; color:var(--ink); background:#fff;
  border:1px solid #d9e3da; border-radius:11px; padding:11px 13px; outline:none; transition:.15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--green-400); box-shadow:0 0 0 3px rgba(108,194,74,.18)}
textarea{min-height:110px; resize:vertical}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2314672f' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
.checkline{display:flex; gap:9px; align-items:flex-start; font-size:.88rem}
.checkline input{width:auto; margin-top:3px}

/* footer */
.site-footer{background:var(--green-900); color:#bfd8b8; padding:clamp(40px,5vw,64px) 0 0; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:32px}
.site-footer h4{color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
.site-footer a{color:#bfd8b8; font-size:.92rem}
.site-footer a:hover{color:var(--gold-soft)}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px}

.foot-note{font-size:.88rem; color:#a8c6a2; max-width:32em}
.foot-bottom{
  margin-top:34px; border-top:1px solid rgba(255,255,255,.12); padding:18px 0 24px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:.83rem; color:#9dbb97;
}
.slogan{color:var(--gold-soft); font-weight:700}

/* tracking result */
.timeline{list-style:none; padding:0; margin:0; position:relative}
.timeline li{position:relative; padding:0 0 22px 34px; border-left:2px solid #e3ebe4; margin-left:8px}
.timeline li:last-child{border-color:transparent; padding-bottom:0}
.timeline .dot{
  position:absolute; left:-9px; top:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--green-400);
}
.timeline li.done .dot{background:var(--green-500); border-color:var(--green-500)}
.timeline li.current .dot{background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px rgba(245,166,35,.2)}
.timeline .when{font-size:.76rem; color:#8b988f; text-transform:uppercase; letter-spacing:.06em}
.timeline .what{font-weight:700; color:var(--ink)}
.timeline .where{font-size:.86rem; color:#61705f}

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
.auth-shell{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--bg-soft)}
.auth-art{
  background:linear-gradient(160deg,var(--green-900),var(--green-700) 60%, var(--green-600));
  color:#dff0d6; padding:44px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-art::after{
  content:""; position:absolute; width:340px; height:340px; right:-120px; bottom:-120px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.4), transparent 65%);
}
.auth-art img{height:64px; width:auto; background:#fff; padding:6px; border-radius:10px}
.auth-art h2{color:#fff; margin-top:26px}
.auth-art p{color:#cfe8c8; max-width:34em}
.auth-art .quote{margin-top:auto; padding-top:30px; font-size:.92rem; color:#d7ecd0}
.auth-form-wrap{display:grid; place-items:center; padding:40px 24px}
.auth-card{width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow-md)}
.auth-card h1{font-size:1.6rem; margin-bottom:6px}
.auth-foot{font-size:.86rem; color:#6c7b70; margin-top:18px; text-align:center}

/* ==========================================================================
   APP SHELL (portal + admin)
   ========================================================================== */
.app{min-height:100vh; background:#f7faf6}
.app-top{
  background:#fff; border-bottom:1px solid var(--line); padding:10px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  position:sticky; top:0; z-index:50;
}
.app-top .brand img{height:44px}
.app-top .brand-text strong{font-size:.98rem}
.app-top .brand-text small{font-size:.64rem}
.app-top .who{display:flex; align-items:center; gap:12px; font-size:.85rem}
.avatar{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--green-600),var(--green-400)); color:#fff; font-weight:800; font-size:.9rem;
}
.app-body{display:grid; grid-template-columns:var(--sidebar) 1fr; align-items:start}
.side{background:#fff; border-right:1px solid var(--line); min-height:calc(100vh - 66px); padding:16px 12px; position:sticky; top:66px}
.side .group-label{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#93a096; font-weight:800; margin:16px 10px 8px}
.side a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  font-size:.9rem; font-weight:600; color:#415045; margin-bottom:2px;
}
.side a:hover{background:var(--bg-soft); color:var(--green-800)}
.side a.active{background:#eaf5e5; color:var(--green-800); box-shadow:inset 3px 0 0 var(--green-500)}
.side a .count{margin-left:auto; background:var(--gold); color:#3c2602; font-size:.7rem; font-weight:800; padding:1px 7px; border-radius:999px}
.main{padding:22px clamp(16px,2.4vw,30px) 46px; min-width:0}
.page-head{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:space-between; margin-bottom:20px}
.page-head h1{font-size:1.5rem; margin:0}
.page-head .sub{font-size:.87rem; color:#7c8a80; margin-top:4px}
.breadcrumb{font-size:.8rem; color:#8b988f; margin-bottom:6px}
.breadcrumb a{color:#8b988f}

.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow-sm)}
.kpi .label{font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#8b988f}
.kpi .value{font-size:1.55rem; font-weight:800; color:var(--green-800); letter-spacing:-.02em; margin-top:4px}
.kpi .meta{font-size:.78rem; color:#7c8a80}
.kpi.gold .value{color:#a86b04}

.panel{background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); margin-bottom:20px; overflow:hidden}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.panel-head h2,.panel-head h3{margin:0; font-size:1rem}
.panel-body{padding:18px}
.panel-body.tight{padding:0}

table.tbl{width:100%; border-collapse:collapse; font-size:.89rem}
table.tbl th{
  text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#8b988f;
  font-weight:800; padding:11px 14px; background:#fafcf9; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tbl td{padding:12px 14px; border-bottom:1px solid #eef3ee; vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr:hover td{background:#fbfdfa}
table.tbl .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.84rem; color:var(--green-800); font-weight:700}
.table-wrap{overflow-x:auto}
.tbl-empty{padding:34px; text-align:center; color:#8b988f; font-size:.9rem}

.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px}
.filters form{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.filters input,.filters select{width:auto; min-width:150px; padding:9px 12px; font-size:.86rem}
.chip-row{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:.8rem; font-weight:700; color:#4c5a50}
.chip.active{background:var(--green-800); border-color:var(--green-800); color:#fff}

.detail-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start}
.dl{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:.9rem; margin:0}
.dl dt{color:#8b988f; font-weight:600}
.dl dd{margin:0; color:var(--ink); font-weight:600; text-align:right}

.pagination{display:flex; gap:6px; justify-content:center; margin-top:18px}
.pagination a,.pagination span{
  padding:7px 12px; border-radius:9px; border:1px solid var(--line); background:#fff; font-size:.85rem; font-weight:700; color:#4c5a50;
}
.pagination .current{background:var(--green-700); border-color:var(--green-700); color:#fff}

.bar-row{display:grid; grid-template-columns:120px 1fr 54px; gap:10px; align-items:center; font-size:.84rem; margin-bottom:9px}
.bar{height:9px; border-radius:999px; background:#eef3ee; overflow:hidden}
.bar span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--green-500),var(--green-400))}
.bar.gold span{background:linear-gradient(90deg,var(--gold),var(--gold-soft))}

.empty-state{padding:34px 20px; text-align:center; color:#8b988f}
.empty-state h3{color:var(--ink)}

/* invoice */
.invoice-page{background:#f2f6f1; min-height:100vh; padding:28px 16px}
.invoice{max-width:820px; margin:0 auto; background:#fff; border-radius:14px; box-shadow:var(--shadow-md); overflow:hidden}
.invoice-head{
  padding:26px 30px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg,var(--green-900),var(--green-700)); color:#dff0d6;
}
.invoice-head img{height:56px; width:auto; background:#fff; padding:5px; border-radius:8px}
.invoice-head h1{color:#fff; font-size:1.5rem; margin:12px 0 2px}
.invoice-head .muted{color:#bcd8b4}
.invoice-body{padding:26px 30px}
.invoice-table{width:100%; border-collapse:collapse; font-size:.9rem; margin-top:10px}
.invoice-table th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#8b988f; padding:9px 0; border-bottom:1px solid var(--line)}
.invoice-table td{padding:11px 0; border-bottom:1px solid #f0f4f0}
.invoice-total{display:flex; justify-content:flex-end; margin-top:14px}
.invoice-total table{font-size:.92rem}
.invoice-total td{padding:5px 0 5px 30px}
.invoice-total .grand{font-size:1.12rem; font-weight:800; color:var(--green-800)}
.invoice-foot{padding:18px 30px 28px; font-size:.8rem; color:#8b988f}
.print-bar{max-width:820px; margin:0 auto 14px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}

/* responsive */
@media (max-width:1000px){
  .hero-grid,.split{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:24px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .app-body{grid-template-columns:1fr}
  .side{position:static; min-height:0; border-right:0; border-bottom:1px solid var(--line); display:none}
  .side.open{display:block}
  .detail-grid{grid-template-columns:1fr}
  .auth-shell{grid-template-columns:1fr}
  .auth-art{display:none}
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:80px; background:#fff;
    flex-direction:column; align-items:stretch; padding:12px 20px 20px; border-bottom:1px solid var(--line); gap:2px;
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 8px}
  .menu-btn{display:block}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .brand img{height:44px}
  .kpi-grid{grid-template-columns:1fr}
  .form-grid.cols-2{grid-template-columns:1fr}
}

@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .invoice-page{background:#fff; padding:0}
  .invoice{box-shadow:none; border-radius:0; max-width:100%}
}


/* ==========================================================================
   PLATFORM PREVIEW BAR (public site only — disable in config.php before launch)
   ========================================================================== */
.preview-bar{
  background:linear-gradient(90deg, var(--green-900), var(--green-700) 60%, #1a7c33);
  color:#dff0d6; font-size:.82rem; border-bottom:1px solid rgba(0,0,0,.15);
}
.preview-bar-inner{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:8px 20px;
}
.pv-label{
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.68rem;
  background:rgba(255,255,255,.14); padding:3px 9px; border-radius:999px; color:#fff;
}
.pv-note{color:#c7e3bf}
.pv-links{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.pv-links a{
  color:#fff; font-weight:700; font-size:.79rem; padding:4px 10px; border-radius:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16);
}
.pv-links a:hover{background:var(--gold); border-color:var(--gold); color:#3b2a08}
.pv-creds{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem;
  color:#ffe3ae; background:rgba(0,0,0,.18); padding:3px 9px; border-radius:8px;
}
@media (max-width:760px){
  .pv-note{display:none}
  .pv-creds{display:none}
  .pv-links{margin-left:0}
}

/* ==========================================================================
   v2.1 — PUBLIC HEADER + HOMEPAGE
   Appended so it wins over the earlier rules without rewriting the sheet.
   ========================================================================== */

/* ---------- utility bar ---------- */
.topbar{
  background:var(--green-900); color:#cfe6c6; font-size:.79rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:38px; flex-wrap:wrap}
.topbar-left,.topbar-right{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.topbar a{color:#cfe6c6; display:inline-flex; align-items:center; gap:6px}
.topbar a:hover{color:#fff}
.topbar svg{opacity:.8; flex:0 0 auto}
.topbar-hours{display:inline-flex; align-items:center; gap:6px; color:#a9c8a0}
.tb-link{font-weight:600}
.lang-switch{display:inline-flex; gap:3px; padding:2px; background:rgba(255,255,255,.1); border-radius:999px}
.lang-switch a{
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; color:#d8ead2 !important;
}
.lang-switch a:hover{background:rgba(255,255,255,.16)}
.lang-switch a.on{background:var(--gold); color:#3b2a08 !important}

/* ---------- main header ---------- */
.site-header{border-bottom:1px solid var(--line); background:#fff; transition:box-shadow .2s}
.site-header.is-stuck{box-shadow:0 8px 26px rgba(11,61,30,.1)}
.site-header .nav{min-height:78px; transition:min-height .2s}
.site-header.is-stuck .nav{min-height:66px}
.brand{gap:11px}
.brand img{height:52px; background:#f6faf4; border:1px solid var(--line); border-radius:10px; padding:4px 8px; object-fit:contain}
.site-header.is-stuck .brand img{height:46px}
.brand-text strong{font-size:1.14rem; letter-spacing:.015em; line-height:1; margin-bottom:0}
.brand-text small{
  font-size:.66rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green-600); margin-top:5px; line-height:1;
}

/* nav */
.site-nav{gap:2px}
.site-nav > a, .nav-drop-btn{
  font-size:.9rem; font-weight:700; color:var(--ink); padding:9px 12px; border-radius:10px;
  background:none; border:0; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
}
.site-nav > a:hover, .nav-drop-btn:hover{background:var(--bg-soft); color:var(--green-700)}
.site-nav > a.active{color:var(--green-800); background:#eaf5e4}
.nav-drop{position:relative; display:inline-flex}
.nav-drop.active > .nav-drop-btn{color:var(--green-800); background:#eaf5e4}
.nav-drop-btn svg{transition:transform .18s}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(660px, 92vw); background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 26px 60px rgba(11,61,30,.16); padding:16px; opacity:0; visibility:hidden;
  transition:opacity .16s, transform .16s, visibility .16s; z-index:70;
}
.nav-drop.open .nav-drop-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-drop-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 6px 10px; border-bottom:1px solid var(--line); margin-bottom:10px;
}
.nav-drop-head span{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8b988f}
.nav-drop-head a{font-size:.8rem; font-weight:700; display:inline-flex; align-items:center; gap:5px}
.nav-drop-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px}
.nav-drop-item{display:flex; gap:11px; align-items:flex-start; padding:9px 10px; border-radius:11px; color:var(--ink)}
.nav-drop-item:hover{background:var(--bg-soft)}
.ndi-icon{
  flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(63,160,44,.14), rgba(108,194,74,.26)); color:var(--green-700);
}
.nav-drop-item strong{display:block; font-size:.88rem; font-weight:700; color:var(--ink); line-height:1.25}
.nav-drop-item em{font-style:normal; font-size:.76rem; color:#88958c}
.nav-drop-foot{display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}

.nav-actions{gap:10px}
.nav-quote{font-size:.86rem; font-weight:700; color:var(--green-800); padding:8px 4px; white-space:nowrap}
.nav-quote:hover{color:var(--green-600); text-decoration:underline; text-underline-offset:4px}
.menu-btn{display:none; position:relative; width:44px; height:40px; place-items:center; padding:0}
.menu-btn .menu-ico-x{display:none; position:absolute; inset:0; place-items:center}
body.nav-open .menu-btn .menu-ico{display:none}
body.nav-open .menu-btn .menu-ico-x{display:grid}
.nav-mobile-extra{display:none}

/* ---------- hero ---------- */
.hero-v2{padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,54px)}
.hero-v2 h1{max-width:15em; margin-bottom:.35em}
.hero-copy .lead{color:#4a5a4f}
.hero-v2 .hero-cta{margin-top:22px}
.hero-v2 .hero-badges{margin-top:24px; padding-top:18px}

/* quick-quote card */
.quote-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px;
  box-shadow:var(--shadow-md); position:relative;
}
.quote-card::before{
  content:""; position:absolute; inset:-1px; border-radius:20px; padding:1px;
  background:linear-gradient(140deg, rgba(108,194,74,.55), rgba(245,166,35,.5), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.qc-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px}
.qc-head strong{display:block; font-size:1.06rem; color:var(--ink); letter-spacing:-.01em}
.qc-head span{display:block; font-size:.82rem; color:#7b8a80}
.qc-badge{
  font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:#eaf5e4; color:var(--green-700); padding:5px 9px; border-radius:999px; white-space:nowrap;
}
.qc-row{display:grid; grid-template-columns:1.4fr 1fr; gap:12px}
.qc-foot{margin:12px 0 0; font-size:.76rem; color:#8b988f; text-align:center}
.quote-card select,.quote-card input{padding:10px 12px; font-size:.9rem}

/* ---------- tracking strip ---------- */
.track-strip{margin-top:-8px; position:relative; z-index:5}
.track-panel{
  display:grid; grid-template-columns:minmax(220px,1fr) minmax(280px,1.2fr);
  gap:18px 26px; align-items:center; padding:22px 26px;
}
.tp-text h3{margin-bottom:2px; font-size:1.06rem}
.tp-text p{margin:0; font-size:.86rem}
.track-form{flex-wrap:nowrap}
.track-form input{flex:1 1 auto}

/* ---------- sectors ---------- */
.section-head-wide{max-width:760px}
.sector-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.sector{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px;
  border-left:3px solid var(--green-400); transition:.18s;
}
.sector:hover{border-left-color:var(--gold); box-shadow:var(--shadow-sm); transform:translateY(-2px)}
.sector-icon{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:#eef7e9; color:var(--green-700); margin-bottom:10px}
.sector h3{font-size:.98rem; margin-bottom:4px}
.sector p{margin:0; font-size:.85rem; line-height:1.5; color:#5b6a60}

/* ---------- service cards ---------- */
.svc-card{display:flex; flex-direction:column; scroll-margin-top:110px}
.svc-card .ticks{flex:1}
.svc-link{
  margin-top:14px; font-size:.82rem; font-weight:800; letter-spacing:.02em; color:var(--green-700);
  display:inline-flex; align-items:center; gap:6px;
}
.svc-link:hover{gap:9px; color:var(--green-600)}

/* ---------- stats band ---------- */
.stat-band{
  background:linear-gradient(120deg, var(--green-900), var(--green-700) 60%, #1a7c33);
  color:#fff; padding:clamp(26px,3.4vw,40px) 0;
}
.stat-band .stat b{color:#fff}
.stat-band .stat span{color:#c9e4c1}
.stat-band .stats-grid{position:relative}
.stat-band .stat + .stat{border-left:1px solid rgba(255,255,255,.14)}

/* ---------- corridors ---------- */
.lane-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.lane{
  display:block; background:#fff; border:1px solid var(--line); border-radius:13px; padding:16px;
  color:var(--ink); transition:.18s;
}
.lane:hover{border-color:#cfe6cb; box-shadow:var(--shadow-sm); transform:translateY(-2px); color:var(--ink)}
.lane-top{display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:800; font-size:.94rem}
.lane-top svg{color:var(--green-500); flex:0 0 auto}
.lane-meta{display:flex; align-items:center; gap:8px; margin:10px 0 6px; font-size:.78rem}
.lane-note{font-size:.8rem; color:#7b8a80}
.lane-cta{background:linear-gradient(150deg,#fffdf7,#fff7e6); border-style:dashed; border-color:#f0d9a8}

/* ---------- faq + footer extras ---------- */
.faq-more{margin-top:16px; font-size:.88rem; color:#7b8a80}
.foot-contact li{display:flex; align-items:center; gap:8px; font-size:.9rem}
.foot-contact svg{color:var(--green-400); flex:0 0 auto}
.foot-sub{margin-top:16px}
.foot-sub label{display:block; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9dbb97; margin-bottom:6px}
.foot-sub-row{display:flex; gap:6px}
.foot-sub-row input{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff;
  border-radius:9px; padding:8px 10px; font-size:.84rem; min-width:0;
}
.foot-sub-row input::placeholder{color:#9dbb97}
.foot-sub-row input:focus{outline:none; border-color:var(--gold-soft); background:rgba(255,255,255,.16)}
[dir="rtl"] .sector{border-left:0; border-right:3px solid var(--green-400)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav-quote{display:none}
  .site-nav > a, .nav-drop-btn{font-size:.86rem; padding:9px 9px}
}
@media (max-width:1000px){
  /* backdrop-filter on the header would make it the containing block for the
     fixed-position drawer, so the drawer must switch it off. */
  .site-header{backdrop-filter:none; -webkit-backdrop-filter:none}
  .topbar-hours{display:none}
  .topbar-right .tb-link{display:none}
  .site-header .nav{min-height:66px}
  .brand img{height:44px}
  .brand-text strong{font-size:1.04rem}
  .brand-text small{font-size:.62rem}
  .menu-btn{display:grid}
  .nav-quote,.nav-cta{display:none}

  /* full-width drawer instead of the old dropdown */
  .site-nav{
    display:none; position:fixed; left:0; right:0; top:0; bottom:0; z-index:200;
    background:#fff; flex-direction:column; align-items:stretch; gap:2px;
    padding:84px 20px 32px; overflow-y:auto; border:0; box-shadow:0 0 0 100vmax #fff;
  }
  .site-nav.open{display:flex}
  .site-nav > a{padding:14px 6px; font-size:1rem; border-bottom:1px solid var(--line); border-radius:0}
  .nav-drop{display:block}
  .nav-drop-btn{
    width:100%; justify-content:space-between; padding:14px 6px; font-size:1rem;
    border-bottom:1px solid var(--line); border-radius:0;
  }
  .nav-drop-panel{
    position:static; transform:none; opacity:1; visibility:visible; width:auto;
    box-shadow:none; border:0; padding:0; display:none;
  }
  .nav-drop.open .nav-drop-panel{display:block; transform:none}
  .nav-drop-grid{grid-template-columns:1fr}
  .nav-drop-head,.nav-drop-foot{display:none}
  .nav-drop-item{padding:11px 6px}
  .nav-mobile-extra{display:grid; gap:10px; margin-top:18px}
  .nav-mobile-call{display:flex; align-items:center; gap:8px; justify-content:center; font-weight:700; color:var(--green-800); padding-top:6px}
  body.nav-open{overflow:hidden}
  body.nav-open .menu-btn{position:fixed; top:16px; right:16px; z-index:300; background:#fff}

  /* layout */
  .track-panel{grid-template-columns:1fr}
  .lane-grid,.sector-grid{grid-template-columns:1fr 1fr}
  .stat-band .stat + .stat{border-left:0}
  .hero-v2 h1{max-width:none}
}
@media (max-width:640px){
  .topbar-left{gap:12px}
  .topbar-left a span,.tb-link span{font-size:.74rem}
  .topbar-in{min-height:34px; padding:4px 0}
  .topbar-left a:nth-child(2){display:none}
  .lane-grid,.sector-grid{grid-template-columns:1fr}
  .qc-row{grid-template-columns:1fr}
  .track-form{flex-wrap:wrap}
  .track-form input{flex:1 1 100%}
  .track-form .btn{flex:1 1 100%}
  .foot-sub-row{flex-direction:column}
}

/* nav buttons must not inherit the nav link colour */
.site-nav .btn-primary{color:#fff}
.site-nav .btn-gold{color:#43290a}
.site-nav .btn-ghost{color:var(--green-800); border-color:var(--line)}

/* ============================================================
   v2.2 — homepage photography (hero, sectors, network, CTA)
   All images are admin-replaceable: Settings → Homepage images.
   ============================================================ */

/* --- hero with photo backdrop --- */
.hero-v2{position:relative; isolation:isolate; overflow:hidden}
.hero-v2 .hero-photo{position:absolute; inset:0; z-index:-2; overflow:hidden; background:#0b3d1e}
.hero-v2 .hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block}
.hero-v2.has-photo{
  background:#072613;
  padding-top:clamp(44px,6vw,84px);
  padding-bottom:clamp(52px,6.5vw,92px);
}
.hero-v2.has-photo::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(6,32,16,.95) 0%, rgba(6,32,16,.9) 34%, rgba(7,38,19,.72) 58%, rgba(7,38,19,.42) 100%),
    radial-gradient(760px 340px at 4% 0%, rgba(108,194,74,.26), transparent 68%),
    radial-gradient(620px 320px at 96% 110%, rgba(245,166,35,.22), transparent 70%);
}
.hero-v2.has-photo h1,
.hero-v2.has-photo .hero-copy .lead,
.hero-v2.has-photo .eyebrow{color:#fff}
.hero-v2.has-photo .hero-copy .lead{color:#dcefd8}
.hero-v2.has-photo .eyebrow{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); color:#eaf7e5;
  padding:6px 13px 6px 10px; border-radius:999px; margin-bottom:16px;
}
.hero-v2.has-photo .eyebrow::before{background:var(--gold-soft)}
.hero-v2.has-photo .hero-badges{border-top-color:rgba(255,255,255,.22)}
.hero-v2.has-photo .hero-badges span{color:#e7f5e1}
.hero-v2.has-photo .hero-badges svg{color:var(--gold-soft, #ffc861)}
.hero-v2.has-photo .btn-ghost{
  color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08);
}
.hero-v2.has-photo .btn-ghost:hover{background:rgba(255,255,255,.18); border-color:#fff; color:#fff}

/* THL signature chip sitting on the hero photo */
.hero-brand{
  position:absolute; right:clamp(14px,3vw,40px); bottom:clamp(12px,2.5vw,26px); z-index:3;
  display:flex; align-items:center; gap:10px; padding:9px 15px 9px 11px;
  background:rgba(255,255,255,.94); border-radius:999px; box-shadow:0 10px 26px rgba(4,24,12,.35);
}
.hero-brand img{height:30px; width:auto; display:block}
.hero-brand b{display:block; font-size:.88rem; line-height:1.1; color:#0b3d1e; letter-spacing:.02em}
.hero-brand em{display:block; font-style:normal; font-size:.66rem; line-height:1.25; color:#5f7a63; font-weight:600}

/* --- sector cards with photography --- */
.sector-photo{padding:0; overflow:hidden; display:flex; flex-direction:column}
.sector-photo .sector-img{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:#e8f1e4;
}
.sector-photo .sector-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.sector-photo:hover .sector-img img{transform:scale(1.05)}
.sector-photo .sector-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,32,16,0) 45%, rgba(6,32,16,.42) 100%);
}
.sector-photo .sector-icon{
  position:absolute; left:12px; bottom:10px; z-index:2; margin:0;
  background:rgba(255,255,255,.94); color:var(--green-700); box-shadow:0 4px 12px rgba(4,24,12,.22);
}
.sector-photo .sector-body{padding:16px 18px 18px}
.sector-photo h3{margin-top:0}

/* --- image-led network strip --- */
.network-section{padding-top:0}
.network-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.net-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; color:var(--ink); transition:.2s;
}
.net-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#cfe6cb; color:var(--ink)}
.net-img{position:relative; aspect-ratio:4/3; overflow:hidden; background:#0b3d1e}
.net-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease}
.net-card:hover .net-img img{transform:scale(1.06)}
.net-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,32,16,.05) 40%, rgba(6,32,16,.55) 100%);
}
.net-brand{
  position:absolute; left:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 6px; border-radius:999px; background:rgba(255,255,255,.93);
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#0b3d1e;
}
.net-brand img{height:17px; width:auto; display:block}
.net-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1}
.net-body h3{font-size:.98rem; margin:0}
.net-body p{margin:0; font-size:.84rem; line-height:1.5; color:#5b6a60}
.net-link{
  margin-top:auto; padding-top:10px; font-size:.78rem; font-weight:800; letter-spacing:.03em;
  color:var(--green-700); display:inline-flex; align-items:center; gap:6px;
}
.net-card:hover .net-link{gap:10px; color:var(--green-600)}

/* --- closing CTA with photo --- */
.cta-band{position:relative; overflow:hidden; isolation:isolate}
.cta-band.has-photo{
  background:#0b3d1e; color:#fff; padding-top:clamp(34px,5vw,58px); padding-bottom:clamp(34px,5vw,58px);
}
.cta-band .cta-photo{position:absolute; inset:0; z-index:-2}
.cta-band .cta-photo img{width:100%; height:100%; object-fit:cover; object-position:center 55%; display:block}
.cta-band.has-photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,32,16,.86), rgba(7,44,22,.78) 55%, rgba(6,32,16,.88));
}
.cta-band .cta-inner{position:relative; z-index:1}
.cta-band .cta-mark{
  height:44px; width:auto; display:block; margin:0 auto 14px;
  background:#fff; border-radius:12px; padding:5px 8px; box-shadow:0 8px 20px rgba(4,24,12,.3);
}
.cta-band.has-photo h2{color:#fff}
.cta-band.has-photo p{color:#e2f2dc}
.cta-band.has-photo .eyebrow{
  color:#12240c; background:var(--gold-soft,#ffc861);
  padding:6px 13px 6px 10px; border-radius:999px;
}
.cta-band.has-photo .eyebrow::before{background:#12240c}
.cta-band.has-photo .btn-ghost{color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.1)}
.cta-band.has-photo .btn-ghost:hover{background:rgba(255,255,255,.2); color:#fff; border-color:#fff}
.cta-band.has-photo .btn-dark{background:#08251380; border-color:rgba(255,255,255,.35); color:#fff}
.cta-band.has-photo .btn-dark:hover{background:#04170b; color:#fff}

/* admin: homepage image manager */
.img-admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0}
.img-admin{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
.img-admin-thumb{position:relative; aspect-ratio:16/9; background:#eef4ec}
.img-admin-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.img-admin-flag{
  position:absolute; top:8px; left:8px; font-size:.62rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; background:var(--gold-soft,#ffc861); color:#3a2606;
  padding:3px 7px; border-radius:999px;
}
.img-admin-body{padding:10px 12px 12px; display:grid; gap:6px}
.img-admin-body strong{font-size:.8rem; color:var(--green-900); line-height:1.3}
.img-admin-body input[type=file]{font-size:.74rem; width:100%}
.img-admin-reset{display:flex; align-items:center; gap:6px; font-size:.74rem; color:#6b7d70; font-weight:600}
.img-admin-reset input{width:auto}

@media (max-width:1080px){
  .network-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .img-admin-grid{grid-template-columns:1fr}
  .hero-brand{position:static; margin:22px auto 0; width:max-content; max-width:calc(100% - 28px)}
}
@media (max-width:640px){
  .network-grid{grid-template-columns:1fr}
  .hero-v2.has-photo::before{
    background:
      linear-gradient(180deg, rgba(6,32,16,.93) 0%, rgba(6,32,16,.86) 60%, rgba(7,38,19,.78) 100%);
  }
}

/* hero feature ticks: 2×2 on wider screens so the block stays square */
@media (min-width:960px){
  .hero-v2 .hero-badges{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; max-width:32em}
}

/* hero: keep the two CTAs side by side on phones */
@media (max-width:640px){
  .hero-v2 .hero-cta{gap:10px}
  .hero-v2 .hero-cta .btn{flex:1 1 45%; padding-left:14px; padding-right:14px; font-size:.9rem}
  .hero-v2.has-photo .eyebrow{font-size:.66rem; letter-spacing:.1em}
}