/* TN ENGINEERS & SURVEYORS — premium section components
   Page heroes, Directors profile system, Contact hub, footer polish.
   Brand: #0A5C36 / #1E7D4E / #052E1B / #FACC15 · Poppins */

/* ============================================================
   0. TOKENS + SHARED HELPERS
   ============================================================ */
:root{
  --tn-green-950:#052E1B;
  --tn-green-900:#06331E;
  --tn-green-800:#084427;
  --tn-green-700:#0A5C36;
  --tn-green-600:#1E7D4E;
  --tn-gold-400:#FACC15;
  --tn-gold-500:#EAB308;
  --tn-gold-600:#CA8A04;
  --tn-ink:#0F1A14;
  --tn-slate:#5A6B62;
  --tn-line:#E3EDE7;
  --tn-soft:#F5FAF7;
  --tn-shell:min(1240px, calc(100% - 32px));
  --tn-radius:18px;
  --tn-shadow-sm:0 2px 6px rgba(5,46,27,.06), 0 1px 2px rgba(5,46,27,.05);
  --tn-shadow-md:0 10px 28px -12px rgba(5,46,27,.22), 0 4px 10px -6px rgba(5,46,27,.12);
  --tn-shadow-lg:0 28px 60px -28px rgba(5,46,27,.38), 0 10px 24px -18px rgba(5,46,27,.22);
  --tn-focus:0 0 0 3px #ffffff, 0 0 0 6px #0A5C36;
}

.tn-shell{ width:var(--tn-shell); margin-inline:auto; }

/* Accessible, visible focus ring (keyboard only) */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible{
  outline:3px solid var(--tn-green-700);
  outline-offset:3px;
  border-radius:6px;
}
/* Programmatic focus targets (e.g. a page <h1>) must not draw a ring */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible{ outline:none !important; }
.on-dark :where(a, button, [role="button"]):focus-visible{
  outline-color:var(--tn-gold-400);
}
.skip-link{
  position:absolute; left:16px; top:-64px; z-index:2000;
  background:var(--tn-green-700); color:#fff; font-weight:600;
  padding:12px 20px; border-radius:0 0 10px 10px; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:0; }

/* ============================================================
   1. SECTION HEADINGS
   ============================================================ */
.tn-head{ max-width:760px; margin:0 auto clamp(30px,4vw,54px); text-align:center; }
.tn-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tn-green-700); background:#EAF4EE; border:1px solid #D3E7DB;
  padding:.45rem .9rem; border-radius:999px; margin-bottom:1rem;
}
.tn-eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,var(--tn-gold-400),var(--tn-gold-600));
}
.tn-title{
  font-size:clamp(1.75rem, 3.4vw, 2.6rem); line-height:1.16; font-weight:800;
  letter-spacing:-.02em; color:var(--tn-green-950); margin:0 0 .9rem;
}
.tn-title em{ font-style:normal; color:var(--tn-green-600); }
.tn-sub{ font-size:clamp(.98rem,1.2vw,1.08rem); line-height:1.75; color:var(--tn-slate); margin:0; }
.tn-rule{
  width:72px; height:4px; border-radius:4px; margin:0 auto 1.1rem;
  background:linear-gradient(90deg,var(--tn-gold-400),var(--tn-gold-600));
}
.tn-head--left{ text-align:left; margin-left:0; }
.tn-head--left .tn-rule{ margin-left:0; }

/* ============================================================
   2. PAGE HERO (inner pages) — replaces the flat green block
   ============================================================ */
.tn-hero{
  position:relative; isolation:isolate; overflow:hidden;
  color:#fff; padding:clamp(46px,6vw,84px) 0 clamp(40px,5vw,70px);
  background:
    radial-gradient(1200px 420px at 82% -10%, rgba(30,125,78,.55), transparent 62%),
    linear-gradient(120deg, #052E1B 0%, #0A5C36 55%, #06331E 100%);
  border-bottom:1px solid rgba(250,204,21,.18);
}
.tn-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.30; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 20% 10%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 20% 10%, #000 0%, transparent 72%);
}
.tn-hero__inner{ display:grid; gap:clamp(22px,3vw,40px); grid-template-columns:minmax(0,1fr); align-items:center; }
.tn-hero__crumb{
  display:inline-flex; align-items:center; gap:.45rem; flex-wrap:wrap;
  font-size:.78rem; font-weight:600; color:rgba(255,255,255,.72); margin-bottom:.9rem;
}
.tn-hero__crumb a{ color:rgba(255,255,255,.72); text-decoration:none; }
.tn-hero__crumb a:hover{ color:var(--tn-gold-400); }
.tn-hero__crumb span[aria-current]{ color:var(--tn-gold-400); }
.tn-hero h1{
  font-size:clamp(1.9rem, 4.4vw, 3.1rem); line-height:1.1; font-weight:800;
  letter-spacing:-.025em; margin:0 0 .9rem;
}
.tn-hero p{ font-size:clamp(1rem,1.35vw,1.14rem); line-height:1.7; color:rgba(255,255,255,.86); margin:0; max-width:60ch; }
.tn-hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.tn-hero__stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.7rem; }
.tn-hero__stat{
  display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600;
  color:rgba(255,255,255,.9); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); padding:.5rem .85rem; border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.tn-hero__stat svg{ width:15px; height:15px; color:var(--tn-gold-400); flex-shrink:0; }

/* ============================================================
   3. BUTTONS (shared, accessible)
   ============================================================ */
.tn-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.5rem; border-radius:12px; border:2px solid transparent;
  font-weight:700; font-size:.95rem; line-height:1.1; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; min-height:48px;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tn-btn svg{ width:18px; height:18px; flex-shrink:0; }
.tn-btn--gold{
  background:linear-gradient(135deg, #FDE047 0%, #FACC15 45%, #F59E0B 100%);
  color:#0A3D24; box-shadow:0 12px 26px -12px rgba(245,158,11,.85), 0 2px 6px rgba(0,0,0,.12);
}
.tn-btn--gold:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -14px rgba(245,158,11,.9); }
.tn-btn--green{ background:var(--tn-green-700); color:#fff; box-shadow:var(--tn-shadow-md); }
.tn-btn--green:hover{ background:var(--tn-green-600); transform:translateY(-2px); }
.tn-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.tn-btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateY(-2px); }
.tn-btn--outline{ background:#fff; border-color:var(--tn-green-700); color:var(--tn-green-700); }
.tn-btn--outline:hover{ background:var(--tn-green-700); color:#fff; transform:translateY(-2px); }
.tn-btn:active{ transform:translateY(0); }

/* ============================================================
   4. DIRECTORS SYSTEM
   ============================================================ */
.directors{ position:relative; background:#fff; padding:clamp(56px,7vw,96px) 0; overflow:hidden; }
.directors--soft{ background:linear-gradient(180deg,#F7FBF8 0%, #ffffff 100%); }
.directors::before{
  content:''; position:absolute; right:-140px; top:-140px; width:420px; height:420px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(30,125,78,.09), transparent 68%);
}

.directors-grid{
  display:grid; gap:clamp(16px,1.8vw,24px);
  grid-template-columns:repeat(1, minmax(0,1fr));
}

.director-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--tn-line); border-radius:var(--tn-radius);
  overflow:hidden; box-shadow:var(--tn-shadow-sm);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
  height:100%;
}
.director-card::after{ /* restrained gold top accent */
  content:''; position:absolute; inset:0 0 auto 0; height:3px; z-index:3;
  background:linear-gradient(90deg, var(--tn-gold-400), var(--tn-gold-600));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.director-card:hover, .director-card:focus-within{
  transform:translateY(-5px);
  border-color:#CFE3D7;
  box-shadow:var(--tn-shadow-lg);
}
.director-card:hover::after, .director-card:focus-within::after{ transform:scaleX(1); }

.director-card__media{
  position:relative; width:100%; aspect-ratio:4 / 5; overflow:hidden;
  background:#EDF4F0; flex-shrink:0;
}
.director-card__media img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 18%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease;
  filter:saturate(1.02) contrast(1.02);
}
.director-card:hover .director-card__media img{ transform:scale(1.045); }
.director-card__media::after{ /* keeps the bottom of the portrait grounded */
  content:''; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none;
  background:linear-gradient(to top, rgba(5,46,27,.30), rgba(5,46,27,0));
}

.director-card__body{
  display:flex; flex-direction:column; gap:.35rem;
  padding:clamp(16px,1.6vw,22px) clamp(16px,1.6vw,22px) clamp(18px,1.8vw,22px);
  flex:1 1 auto; text-align:center;
}
.director-card__name{
  font-size:clamp(.94rem, 1.15vw, 1.05rem); line-height:1.34; font-weight:700;
  color:var(--tn-ink); margin:0; letter-spacing:-.01em;
  overflow-wrap:break-word; hyphens:auto;
  min-height:calc(2 * 1.34em);   /* keeps every card the same height */
  display:flex; align-items:center; justify-content:center;
}
.director-card__role{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  margin:.15rem auto .1rem; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tn-green-600);
}
.director-card__role::before, .director-card__role::after{
  content:''; width:14px; height:2px; border-radius:2px; background:var(--tn-gold-400);
}
.director-card__phone{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  margin-top:.5rem; font-size:.94rem; font-weight:600; color:var(--tn-green-700);
  text-decoration:none; letter-spacing:.01em;
  padding:.45rem .5rem; border-radius:9px;
  transition:background-color .2s ease, color .2s ease;
}
.director-card__phone svg{ width:15px; height:15px; color:var(--tn-green-600); flex-shrink:0; }
.director-card__phone:hover{ background:#EAF4EE; color:var(--tn-green-800); }

.director-card__actions{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto; padding-top:.9rem;
}
.dir-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:42px; padding:.5rem .6rem; border-radius:10px;
  font-size:.82rem; font-weight:700; text-decoration:none; letter-spacing:.01em;
  border:1.5px solid transparent; transition:all .2s ease;
}
.dir-btn svg{ width:15px; height:15px; flex-shrink:0; }
.dir-btn--call{ background:var(--tn-green-700); color:#fff; }
.dir-btn--call:hover{ background:var(--tn-green-600); transform:translateY(-1px); box-shadow:0 8px 16px -8px rgba(10,92,54,.8); }
.dir-btn--wa{ background:#fff; color:var(--tn-green-700); border-color:#BFE0CC; }
.dir-btn--wa:hover{ background:#F0FBF4; border-color:var(--tn-green-600); transform:translateY(-1px); }
.dir-btn:focus-visible{ outline:3px solid var(--tn-gold-400); outline-offset:2px; }

/* Footer note under the grid */
.directors__cta{ display:flex; flex-direction:column; align-items:center; gap:.85rem; margin-top:clamp(28px,3.4vw,44px); text-align:center; }
.directors__cta p{ margin:0; color:var(--tn-slate); font-size:.95rem; }

/* ============================================================
   5. CONTACT HUB
   ============================================================ */
.contact-section{ padding:clamp(48px,6vw,80px) 0; background:#fff; }
.contact-section--soft{ background:linear-gradient(180deg,#F5FAF7,#ffffff); }

.contact-cards{ display:grid; gap:clamp(14px,1.6vw,20px); grid-template-columns:repeat(1,minmax(0,1fr)); }
.contact-card{
  position:relative; display:flex; flex-direction:column; gap:.55rem;
  background:#fff; border:1px solid var(--tn-line); border-radius:16px;
  padding:clamp(18px,2vw,26px); box-shadow:var(--tn-shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-card:hover{ transform:translateY(-3px); box-shadow:var(--tn-shadow-md); border-color:#CFE3D7; }
.contact-card__icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, var(--tn-green-600), var(--tn-green-700));
  box-shadow:0 8px 18px -10px rgba(10,92,54,.9);
}
.contact-card__icon svg{ width:22px; height:22px; }
.contact-card__icon--gold{
  background:linear-gradient(135deg, var(--tn-gold-400), var(--tn-gold-600));
  color:#0A3D24; box-shadow:0 8px 18px -10px rgba(202,138,4,.9);
}
.contact-card h3{ font-size:1rem; font-weight:700; color:var(--tn-ink); margin:.35rem 0 0; letter-spacing:.01em; }
.contact-card__lines{ display:flex; flex-direction:column; gap:.22rem; margin:0; }
.contact-card a, .contact-card span{
  color:var(--tn-slate); font-size:.9rem; line-height:1.6; text-decoration:none;
  overflow-wrap:anywhere;
}
.contact-card a:hover{ color:var(--tn-green-700); text-decoration:underline; text-underline-offset:3px; }
.contact-card__meta{ font-size:.76rem; color:#869790; font-weight:500; margin-top:auto; padding-top:.5rem; }

.contact-layout{ display:grid; gap:clamp(20px,2.4vw,32px); grid-template-columns:minmax(0,1fr); align-items:start; }
.contact-form-card{
  background:#fff; border:1px solid var(--tn-line); border-radius:var(--tn-radius);
  padding:clamp(20px,2.6vw,36px); box-shadow:var(--tn-shadow-md);
}
.contact-form-card h2{ font-size:clamp(1.3rem,2vw,1.6rem); font-weight:800; color:var(--tn-ink); margin:0 0 .35rem; }
.contact-form-card > p{ color:var(--tn-slate); font-size:.92rem; margin:0 0 1.4rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.82rem; font-weight:600; color:#33453C; }
.field label .req{ color:#B91C1C; }
.field input, .field select, .field textarea{
  width:100%; padding:.8rem .95rem; border:1px solid #D6E2DB; border-radius:11px;
  font:inherit; font-size:.93rem; color:var(--tn-ink); background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#9AA9A2; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--tn-green-600); box-shadow:0 0 0 3px rgba(30,125,78,.16); background:#fff;
}
.field textarea{ resize:vertical; min-height:120px; }

/* inline validation message (Quick Contact — GST No.) */
.field-error{
  display:none; font-size:.76rem; line-height:1.45; color:#B91C1C; margin:0;
}
.field-error.is-on{ display:block; }
.field input.is-invalid{
  border-color:#DC2626; background:#FFF7F7;
}
.field input.is-invalid:focus{
  border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.14);
}
.field-grid{ display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); }
.form-note{ font-size:.78rem; color:#7C8C85; margin:.9rem 0 0; line-height:1.6; }
.form-success{
  display:flex; align-items:flex-start; gap:.6rem; padding:.85rem 1rem; border-radius:11px;
  background:#ECFDF3; border:1px solid #BBF7D0; color:#14532D; font-size:.88rem; margin-bottom:1rem;
}
.form-success svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
/* .form-success sets display:flex, which used to beat .hidden from style.css —
   the banner was therefore visible on load. Keep the utility honest. */
.form-success.hidden{ display:none; }

.contact-aside{ display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px); }
.aside-card{
  background:linear-gradient(150deg, var(--tn-green-700) 0%, var(--tn-green-800) 70%, var(--tn-green-950) 100%);
  color:#fff; border-radius:var(--tn-radius); padding:clamp(20px,2.4vw,30px);
  box-shadow:var(--tn-shadow-lg); position:relative; overflow:hidden;
}
.aside-card::after{
  content:''; position:absolute; right:-60px; bottom:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(250,204,21,.22), transparent 68%);
}
.aside-card h3{ font-size:1.05rem; font-weight:700; margin:0 0 1rem; color:#fff; }
.aside-person{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.1rem; }
.aside-person__badge{
  width:54px; height:54px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--tn-gold-400), var(--tn-gold-600)); color:#0A3D24;
  font-weight:800; font-size:1.15rem; letter-spacing:.02em;
}
.aside-person strong{ display:block; font-size:1rem; font-weight:700; }
.aside-person span{ font-size:.8rem; color:rgba(255,255,255,.78); }
.aside-list{ display:flex; flex-direction:column; gap:.65rem; margin:0; padding:0; list-style:none; position:relative; z-index:1; }
.aside-list li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:rgba(255,255,255,.92); line-height:1.55; }
.aside-list svg{ width:16px; height:16px; color:var(--tn-gold-400); flex-shrink:0; margin-top:3px; }
.aside-list a{ color:inherit; text-decoration:none; }
.aside-list a:hover{ color:var(--tn-gold-400); }

.info-card{ background:#fff; border:1px solid var(--tn-line); border-radius:16px; padding:clamp(18px,2.2vw,24px); box-shadow:var(--tn-shadow-sm); }
.info-card h4{ display:flex; align-items:center; gap:.5rem; font-size:.98rem; font-weight:700; color:var(--tn-ink); margin:0 0 .8rem; }
.info-card h4 svg{ width:18px; height:18px; color:var(--tn-green-700); flex-shrink:0; }
.hours-row{ display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; color:var(--tn-slate); padding:.35rem 0; border-bottom:1px dashed #E7EFEA; }
.hours-row:last-child{ border-bottom:0; }
.hours-row strong{ color:var(--tn-ink); font-weight:600; white-space:nowrap; }
.info-card--gold{ background:linear-gradient(160deg,#FFFBEB,#FEF3C7); border-color:#FDE68A; }
.info-card--gold h4{ color:#713F12; }
.info-card--gold h4 svg{ color:#B45309; }
.info-card--gold p{ color:#78350F; font-size:.88rem; line-height:1.65; margin:0; }

/* Map / location */
.map-card{
  position:relative; border-radius:var(--tn-radius); overflow:hidden; border:1px solid var(--tn-line);
  background:
    repeating-linear-gradient(45deg, rgba(10,92,54,.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg,#EDF5F0,#E2EFE8);
  min-height:280px; display:grid; place-items:center; text-align:center;
  box-shadow:var(--tn-shadow-sm); padding:clamp(24px,3vw,40px);
}
.map-card__pin{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin:0 auto .9rem;
  background:#fff; color:var(--tn-green-700); box-shadow:var(--tn-shadow-md);
}
.map-card__pin svg{ width:26px; height:26px; }
.map-card address{ font-style:normal; font-size:.95rem; line-height:1.7; color:#33453C; margin-bottom:1rem; }
.map-frame{ width:100%; min-height:360px; border:0; display:block; border-radius:var(--tn-radius); }

/* ============================================================
   6. FOOTER POLISH
   ============================================================ */
.tn-footer{ background:#04241A; color:#C9D8D0; position:relative; }
.tn-footer::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--tn-green-700),var(--tn-gold-400),var(--tn-green-700));
}
.tn-footer a{ color:inherit; text-decoration:none; }
.tn-footer__grid{
  display:grid; gap:clamp(26px,3vw,40px); grid-template-columns:minmax(0,1fr);
  padding:clamp(40px,5vw,64px) 0 clamp(28px,3vw,40px);
}
.tn-footer h4{
  color:#fff; font-size:.95rem; font-weight:700; letter-spacing:.02em;
  margin:0 0 1rem; padding-bottom:.65rem; position:relative;
}
.tn-footer h4::after{ content:''; position:absolute; left:0; bottom:0; width:34px; height:2px; border-radius:2px; background:var(--tn-gold-400); }
.tn-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.9rem; }
.tn-footer ul a, .tn-footer ul span{ overflow-wrap:anywhere; }
.tn-footer ul a:hover, .tn-footer button.linkish:hover{ color:var(--tn-gold-400); }
.tn-footer button.linkish{
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:left;
}
.tn-footer__about p{ font-size:.9rem; line-height:1.75; color:#A9BDB3; margin:0 0 1.1rem; max-width:44ch; }
.tn-footer__chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem; }
.tn-footer__chips span{
  font-size:.72rem; font-weight:600; color:#DCEBE3; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); padding:.3rem .7rem; border-radius:999px;
}
.tn-footer__contact li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; line-height:1.6; }
.tn-footer__contact svg{ width:17px; height:17px; color:var(--tn-gold-400); flex-shrink:0; margin-top:2px; }
.tn-footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:18px 0;
  display:flex; flex-direction:column; gap:.6rem; align-items:center; justify-content:space-between;
  font-size:.78rem; color:#9FB3A9; text-align:center;
}
.tn-footer__bottom a{ color:#DCEBE3; font-weight:600; }
.tn-footer__bottom a:hover{ color:var(--tn-gold-400); }

/* ============================================================
   7. MISC POLISH / UTILITIES
   ============================================================ */
img{ max-width:100%; }
.page-hero-legacy{ display:none; }               /* retired flat green banners */
.nav-btn[aria-current="page"],
.mobile-nav-btn[aria-current="page"]{ position:relative; }
.whatsapp-float{ box-shadow:0 14px 30px -12px rgba(37,211,102,.9); }
.whatsapp-float:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* Reveal-on-scroll (JS adds .is-in; respects reduced motion) */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (min-width:360px){
  /* two per row on phones — readable, and still a tidy directory */
  .directors-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:480px){
  .contact-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .field-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:700px){
  .director-card__name{ min-height:0; display:block; }
  .contact-layout{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
}
@media (min-width:768px){
  :root{ --tn-shell:min(1200px, calc(100% - 48px)); }
  /* 3 + 2, last row centred */
  .directors-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .director-card{ grid-column:span 2; }
  .director-card:nth-child(4){ grid-column:2 / span 2; }
  .director-card:nth-child(5){ grid-column:4 / span 2; }
  .contact-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tn-footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tn-footer__bottom{ flex-direction:row; text-align:left; }
  .tn-hero__inner--split{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); }
}
@media (min-width:1024px){
  :root{ --tn-shell:min(1240px, calc(100% - 64px)); }
  .contact-cards{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .tn-footer__grid{ grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)); }
}
@media (min-width:1100px){
  /* five across in a single row */
  .directors-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:20px; }
  .director-card, .director-card:nth-child(4), .director-card:nth-child(5){ grid-column:auto; }
  .director-card__body{ padding:18px 14px 20px; }
  .director-card__name{ font-size:1rem; }
}
@media (max-width:479px){
  .director-card__actions{ grid-template-columns:1fr 1fr; }
  .dir-btn{ min-height:44px; font-size:.8rem; }
  .tn-hero h1{ font-size:clamp(1.65rem, 7vw, 2rem); }
  .contact-card{ padding:18px; }
}

/* ============================================================
   9. HERO SHELL (home slider) — replaces the fixed 85/90vh boxes
   ============================================================ */
.hero-shell{
  height:clamp(560px, 86vh, 800px);
  height:clamp(560px, 86dvh, 800px);
  min-height:520px;
}
.hero-shell .hero-slide img{ object-position:center 45%; }
.hero-shell .hero-slide{ will-change:opacity; }
@media (max-width:1023px){
  .hero-shell{ height:clamp(540px, 84vh, 720px); height:clamp(540px, 84dvh, 720px); }
}
@media (max-width:767px){
  .hero-shell{ height:clamp(520px, 82vh, 660px); height:clamp(520px, 82dvh, 660px); }
  .hero-shell .hero-slide img{ object-position:center 52%; }
}
@media (max-width:479px){
  .hero-shell{ height:clamp(500px, 80vh, 600px); height:clamp(500px, 80dvh, 600px); }
}

/* ============================================================
   10. LEGACY INNER-PAGE BANNERS — upgraded to the premium hero
   ============================================================ */
.page-section > .bg-\[\#0a5c36\].py-20{
  position:relative; isolation:isolate; overflow:hidden; text-align:center;
  padding:clamp(44px,5.5vw,76px) 16px !important;
  background:
    radial-gradient(900px 320px at 84% -20%, rgba(30,125,78,.55), transparent 62%),
    linear-gradient(120deg,#052E1B 0%,#0A5C36 55%,#06331E 100%) !important;
  border-bottom:1px solid rgba(250,204,21,.18);
}
.page-section > .bg-\[\#0a5c36\].py-20::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.26; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(circle at 25% 0%, #000, transparent 70%);
  mask-image:radial-gradient(circle at 25% 0%, #000, transparent 70%);
}
.page-section > .bg-\[\#0a5c36\].py-20 h1{
  font-size:clamp(1.85rem, 4vw, 2.85rem) !important; line-height:1.14; letter-spacing:-.02em;
  margin:0 auto .75rem !important; max-width:22ch;
}
.page-section > .bg-\[\#0a5c36\].py-20 p{
  color:rgba(255,255,255,.85) !important; font-size:clamp(.95rem,1.3vw,1.1rem) !important;
  line-height:1.7; max-width:64ch; margin-inline:auto;
}
.page-section > .bg-\[\#0a5c36\].py-20 .apply-now-btn{ margin-top:1.6rem; }

/* ============================================================
   11. SMALL-SCREEN POLISH
   ============================================================ */
@media (max-width:640px){
  .whatsapp-float{ z-index:60; }
  .tn-hero__actions .tn-btn{ flex:1 1 100%; }
  .tn-hero__stats{ gap:8px; }
  .tn-hero__stat{ font-size:.76rem; padding:.45rem .7rem; }
  .tn-btn{ font-size:.9rem; padding:.8rem 1.2rem; }
  .contact-form-card{ padding:20px 16px; }
  .map-card{ padding:22px 16px; }
}
@media (max-width:380px){
  .director-card__actions{ grid-template-columns:1fr; }
}

/* ============================================================
   12. BRAND PALETTE HARMONISATION
   The original build used orange gradients for primary CTAs.
   Retune them to the brand gold so the identity stays green +
   restrained gold (kept as overrides so markup is untouched).
   ============================================================ */
.apply-now-btn, .apply-now-btn-sm{
  background:linear-gradient(135deg,#FDE047 0%,#FACC15 45%,#EAB308 100%) !important;
  color:#0A3D24 !important;
  box-shadow:0 10px 24px -12px rgba(202,138,4,.85), 0 2px 6px rgba(0,0,0,.1) !important;
}
.apply-now-btn:hover, .apply-now-btn-sm:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.apply-now-btn:focus-visible, .apply-now-btn-sm:focus-visible{ outline:3px solid #0A5C36; outline-offset:3px; }

[class*="from-yellow-500"][class*="to-orange-500"]{
  background-image:linear-gradient(135deg, #FDE047 0%, #FACC15 45%, #EAB308 100%) !important;
  color:#0A3D24 !important;
  box-shadow:0 10px 22px -12px rgba(202,138,4,.9) !important;
}
[class*="from-yellow-500"][class*="to-orange-500"]:hover{
  filter:brightness(1.04);
  box-shadow:0 16px 28px -14px rgba(202,138,4,.95) !important;
}
.bg-\[\#ff8c00\]{ background-color:#0A5C36 !important; }
.hover\:bg-\[\#e67e00\]:hover{ background-color:#1E7D4E !important; }

/* Top bar: keep it calm on small screens */
@media (max-width:767px){
  .corp-topbar-inner{ justify-content:center; gap:5px 14px; padding:7px 12px; }
  .corp-topbar{ font-size:12.5px; }
  .corp-topbar .corp-loc{ width:100%; justify-content:center; font-size:11.5px; }
  .corp-loc__text{ max-width:min(100%, 34ch); }
}
@media (max-width:420px){
  .corp-topbar a[href^="mailto"]{ display:none; }
}

/* Deep-link breathing room under the sticky header */
#home-directors, #contact-directors, #contact-form-section, #contact-location, #contact-page{ scroll-margin-top:110px; }

/* ============================================================
   13. APPLY PAGE — TABBED REQUESTS
   ============================================================ */
.apply-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  background:#F1F7F3; border:1px solid var(--tn-line); border-radius:14px; padding:6px; margin-bottom:1.5rem;
}
.apply-tab{
  border:0; background:transparent; cursor:pointer; font:inherit; font-size:.86rem; font-weight:700;
  color:#5A6B62; padding:.7rem .8rem; border-radius:10px; min-height:44px;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.apply-tab:hover{ color:var(--tn-green-700); }
.apply-tab.is-active{ background:#fff; color:var(--tn-green-700); box-shadow:var(--tn-shadow-sm); }
.apply-tab:focus-visible{ outline:3px solid var(--tn-green-700); outline-offset:2px; }
@media (max-width:520px){
  .apply-tabs{ grid-template-columns:1fr; }
  .apply-tab{ text-align:center; }
}
.apply-panel .field-input{ border-radius:11px; }
.apply-panel [name="otp"]{ min-width:0; }

/* ============================================================
   14. LEGACY COMPONENT RETUNE
   Survey-service tiles and misc accents originally used orange;
   align them with the green + gold identity.
   ============================================================ */
.service-icon{ color:var(--tn-green-600) !important; transition:color .25s ease, transform .25s ease; }
.service-card:hover .service-icon{ color:var(--tn-gold-500) !important; transform:translateY(-2px); }
.service-card{ border-radius:14px !important; }
.service-card .service-title{ color:var(--tn-green-950) !important; }
.service-card:hover .service-title{ color:var(--tn-green-700) !important; }

/* Testimonial carousel dots get a visible focus state */
.dots .dot:focus-visible, .carousel-viewport button:focus-visible{
  outline:3px solid var(--tn-green-700); outline-offset:3px;
}

/* ============================================================
   15. OVERFLOW HARDENING (small phones / tablet)
   ============================================================ */
.director-card__actions{ min-width:0; }
.director-card__actions > *{ min-width:0; }
.dir-btn{ min-width:0; }
.dir-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:479px){
  .director-card__body{ padding:14px 10px 16px; gap:.2rem; }
  .dir-btn{ font-size:.74rem; gap:.28rem; padding:.5rem .35rem; }
  .dir-btn svg{ width:14px; height:14px; }
  .director-card__phone{ font-size:.84rem; }
}
@media (max-width:359px){
  .director-card__actions{ grid-template-columns:1fr; }
}

/* Legacy decorative badge in "Why Choose Us" pokes outside the shell on tablets */
@media (max-width:1023px){
  [class*="-bottom-8"][class*="-left-8"]{
    left:16px !important; bottom:16px !important; max-width:calc(100% - 32px);
  }
}

/* Five-across director cards: keep the Call / WhatsApp labels uncropped */
@media (min-width:1100px){
  .director-card__actions{ gap:5px; }
  .dir-btn{ font-size:.71rem; padding:.5rem .3rem; gap:.25rem; letter-spacing:0; }
  .dir-btn svg{ width:12px; height:12px; }
  .director-card__phone{ font-size:.88rem; }
  .director-card__role{ font-size:.66rem; letter-spacing:.12em; }
  .director-card__role::before, .director-card__role::after{ width:10px; }
}

/* ============================================================
   16. LOCATION / MAP
   ============================================================ */
.corp-loc__text{
  color:inherit; text-decoration:none; max-width:52ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.corp-loc__text:hover{ color:#fde047; }
@media (max-width:1200px){
  .corp-loc__text{ max-width:38ch; }
}
.map-card address strong{ color:var(--tn-green-900); }
.map-frame{ min-height:420px; }
@media (max-width:640px){
  .map-frame{ min-height:320px; }
}

/* Map + address block on the contact page */
.map-card--live{ padding:0; min-height:420px; background:#EAF3EE; }
.map-placeholder{ display:grid; place-items:center; gap:.5rem; text-align:center; padding:32px 20px; color:var(--tn-slate); }
.map-placeholder strong{ color:var(--tn-green-900); font-size:.95rem; }
.map-placeholder a{ color:var(--tn-green-700); font-weight:600; }
.office-address{ font-style:normal; font-size:.9rem; line-height:1.75; color:#33453C; margin:0 0 1rem; }
.map-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.map-actions .tn-btn{ flex:1 1 160px; min-height:44px; font-size:.86rem; padding:.7rem 1rem; }
.contact-layout--map{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
@media (max-width:1023px){
  .contact-layout--map{ grid-template-columns:minmax(0,1fr); }
  .map-card--live{ min-height:340px; }
}

/* ============================================================
   17. HERO LEGIBILITY ON SMALL SCREENS
   Copy spans the full width on phones, so add a vertical scrim
   that keeps the headline clear of whatever the slide shows.
   ============================================================ */
@media (max-width:767px){
  .hero-shell .hero-slide::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,
      rgba(5,46,27,.62) 0%,
      rgba(5,46,27,.52) 42%,
      rgba(5,46,27,.78) 100%);
  }
  .hero-shell .hero-slide > div.z-20{ z-index:2; }
}

/* Top bar: show the full address on phones (wrap instead of truncate) */
@media (max-width:767px){
  .corp-loc__text{
    white-space:normal; overflow:visible; text-overflow:clip;
    max-width:100%; line-height:1.45; text-align:center;
  }
  .corp-topbar .corp-loc{ align-items:flex-start; }
}

/* --- Narrow screens: keep hero slider controls clear of the floating WhatsApp button --- */
@media (max-width: 639px){
  .hero-controls{ right: 1rem; bottom: 5.25rem; gap: .5rem; }
  .hero-controls > button{ width: 40px; height: 40px; }
  .hero-indicators{ bottom: 1.5rem; padding-right: 4.25rem; }
}