:root{
  /* Brand */
  --pbs-green:#519365;
  --pbs-ice:#E4FFEE;
  --ink:#F2FFF5;
  --slate:#BFE5C8;
  --muted:#C9E1D3;
  --bg:#FFFFFF;
  --panel:#F5F8FB;
  --border:rgba(10,37,56,.12);

  --radius:18px;
  --shadow:0 18px 40px rgba(10,37,56,.10);

  --max:1120px;

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}
a{color:var(--pbs-green); text-decoration:none}
a:hover{opacity:.9; text-decoration:none}
a:visited{color:var(--pbs-green)}
img{max-width:100%; height:auto}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width: 220px;
}
.brand img{
  width:56px; height:56px; border-radius:7px;
  box-shadow:0 10px 20px rgba(10,37,56,.10);
}
.brand .name{
  display:flex; flex-direction:column;
}
.brand .name a:hover{text-decoration:none;}
.brand .name strong{font-size:14px; letter-spacing:.02em}
.brand .name span{font-size:12px; color:rgba(255,255,255,0.68);}

.nav{display:flex; align-items:center; gap:8px}
.nav a{
  font-size:13px;
  color:var(--ink);
  padding:10px 12px;
  border-radius:12px;
}
.nav a:hover{background:rgba(200,224,248,.25); text-decoration:none}
.nav a.active{
  background:rgba(199,219,240,0.75);
  border:1px solid rgba(10,37,56,.10);
}

.actions{display:flex; gap:10px; align-items:center}

.btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.btn-primary{
  background:var(--pbs-green);
  color:#FFFFFF;
  box-shadow:0 14px 30px rgba(29,81,45,.18);
}
.btn-primary:hover{filter:brightness(1.4); text-decoration:none}
.btn-secondary{
  background:transparent;
  color:rgba(255,255,255,0.78);
  border-color:rgba(255,255,255,0.78);
}
.btn-secondary:hover{background:rgba(29,81,45,0.69); text-decoration:none}

.menu-btn{
  display:none;
  color:#000;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.7);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}

.hero{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(200,224,248,.65), rgba(255,255,255,0)),
    radial-gradient(900px 520px at 80% 0%, rgba(29,81,45,.14), rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
}
.hero-inner{
  padding:56px 0 38px;
}
.kicker{
  color:var(--pbs-green);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.h1{
  font-size:44px;
  line-height:1.10;
  margin:12px 0 14px;
  letter-spacing:-.02em;
}
.subhead{
  color:var(--slate);
  font-size:16px;
  max-width:62ch;
}
.hero-card{
  background-color:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.hero-card h3{margin:14px 0 10px !important; font-size:14px;color:rgba(255,255,255,1);}
.pill{
  display:inline-flex;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(200,248,216,0.10);
  border:1px solid rgba(10,37,56,.10);
  font-size:12px;
  color:#fff;
  margin:6px 6px 0 0;
}

.section{padding:52px 0}
.section h2{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:-.01em;
  color:#fff;
}
.section p.lead{
  margin:0 0 22px;
  color:var(--muted);
}

.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.card{
  background:rgba(255,255,255,0.13);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: 0 10px 24px rgba(10,37,56,.06);
}
.card h3{margin:0 0 8px; font-size:16px;color:rgba(200,224,248,0.80)}
.card p{margin:0; color:var(--muted); font-size:13px}
.card .tag{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,1);
  margin-bottom:10px;
}

.card2{
  background:rgba(255,255,255,0.13);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: 0 10px 24px rgba(10,37,56,.06);
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
.panel{
  background-color: transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}
.list{margin:0; padding-left:18px; color:var(--slate)}
.list li{margin:8px 0}

.form{display:grid; gap:10px}
.field{display:grid; gap:6px}
label{font-size:14px; color:var(--slate);}
input, select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(10,37,56,.14);
  font-family:var(--font);
  font-size:14px;
  outline:none;
  background:rgba(255,255,255,0.8);
}
input:focus, select:focus, textarea:focus{
  border-color:rgba(29,81,45,.55);
  box-shadow:0 0 0 4px rgba(200,224,248,.55);
}
textarea{min-height:110px; resize:vertical}

.notice{
  padding:14px 14px;
  margin-bottom:14px;
}
.notice.success{
  border-color: rgba(29,81,45,.35);
  box-shadow: 0 10px 24px rgba(29,81,45,.08);
}
.notice.error{
  border-color: rgba(132,37,30,.35);
  box-shadow: 0 10px 24px rgba(132,37,30,.08);
  color:rgba(233,205,206,0.87)
}

.footer{
  border-top:1px solid var(--border);
  padding:22px 0;
  color:var(--muted);
  font-size:12px;
}
.footer a{color:var(--muted)}
.footer a:hover{color:#fff;text-decoration: none;font-weight: bold;}
.legal{
  margin-top:10px;
  color:rgba(200,224,248,0.80);
  max-width:110ch;
}

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.mobile-nav{display:none}
.mobile-actions{display:none}

/* Ensure visited links do not override button text colors */
a.btn, a.btn:visited{ text-decoration:none; }
.btn-primary, .btn-primary:visited{ color:#FFFFFF; }
.btn-secondary, .btn-secondary:visited{ color:rgba(255,255,255,0.78); }

/* Hero badges: switch from "pill" chips to a simple meta list (avoid button look) */
.hero .badge-row{ gap:14px; }
.hero .pill{
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  border-radius:0;
  box-shadow:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:rgba(223,237,255,0.80);
}
.hero .pill::before{
  content:"•";
  color:var(--pbs-green);
  margin-right:10px;
  font-weight:900;
}
.hero .pill:first-child::before{
  content:"";
  margin-right:0;
}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
}

@media (max-width: 820px){
  .nav, .actions{display:none}
  .menu-btn{display:inline-flex}
  .mobile-nav{display:none; padding:10px 0 16px}
  .mobile-nav a{
    display:block;
    padding:12px 10px;
    border-radius:12px;
    color:var(--ink);
  }
  .mobile-nav a:hover{background:rgba(29,81,45,.06); text-decoration:none}
  .mobile-actions{display:grid; gap:10px; padding:10px 0}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .h1{font-size:36px}
}

/* Sister companies card */
.sister-panel{background:rgba(255,255,255,0.5); margin-top:10px;}
.sister-list{display:grid; gap:0;}
.sister-item{display:grid; gap:0;}
.sister-link{
  display:inline-flex;
  align-items:center;
  gap:8px;              /* bring text closer to icon */
  opacity:1;
  text-decoration:none;
}
.sister-link:hover{opacity:1; text-decoration:none;}
.sister-icon{
  width:33px;
  height:33px;
  border-radius:7px;
  display:block;
  object-fit:contain;
  object-position:center;
  margin-top:2px;        /* optical vertical-centering vs larger link text */
}
.sister-title{font-weight:700;}
.sister-desc{
  font-size:13px;
  color:#fff;
  margin-top:4px;        /* close to logo/link above */
  margin-bottom:16px;    /* more separation before next company */
  line-height:1.25;      /* tighter wrapped line spacing */
}
.sister-item:last-child .sister-desc{margin-bottom:0;}

/* ===== Site-wide continuous background (all pages) ===== */
body.site-bg{
  /* keep a solid fallback behind the fixed layers */
  background:#091C0D;
}

/* One continuous moving background behind the entire site (desktop only) */
body.site-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:url('/assets/IMG_2043-topped-darkened.jpg');
  background-size:auto 120%;
  background-repeat:no-repeat;
  background-position:0% 100%;
  animation:siteBgPan 640s linear infinite;
  transform:translateZ(0);
}

body.site-bg::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  /* mild dark overlay to keep text legible while preserving the photo */
  background:rgba(24,31,25,0.69);
}

@keyframes siteBgPan{
  0%   { background-position: 0% 100%; }   /* lower-left */
  25%  { background-position: 0% 0%; }     /* upper-left */
  50%  { background-position: 100% 0%; }   /* upper-right */
  75%  { background-position: 100% 100%; } /* lower-right */
  100% { background-position: 2% 98%; }    /* near lower-left to hide loop snap */
}

/* Make header + hero transparent so the shared background shows through */
body.site-bg .header,
body.site-bg .hero{
  background:transparent !important;
}


/* Ensure header + hero text stays readable on dark photo */
body.site-bg .header,
body.site-bg .header a,
body.site-bg .header .brand-title,
body.site-bg .header .brand-sub,
body.site-bg .hero .kicker{
  color: rgba(255,255,255,0.92);
}
body.site-bg .hero .h1{
  color: #DED6CA;
}
body.site-bg .hero .subhead{
  color: rgba(235,255,249,0.9);
}

body.site-bg .header a.active{
  color: rgba(255,255,255,0.98);
}


/* Panel opacity behavior (requested) */
body.site-bg .hero .panel{
  background:.95;
  margin-top:10px;
  opacity:.18;
  transition: opacity 220ms ease;
}
body.site-bg .hero .panel:hover{
  opacity:1;
}

/* Give primary content sections a light translucent wash so the global photo reads through */
body.site-bg .section{
  background: rgba(255,255,255,0);
}
body.site-bg .footer{
  background: rgba(255,255,255,0);
}

/* Disable motion on mobile + reduced motion */
@media (max-width: 768px){
  body.site-bg::before{
    animation:none;
    background-size:cover;
    background-position:center;
  }
}
@media (prefers-reduced-motion: reduce){
  body.site-bg::before{ animation:none; }
}