/* ==========================================================================
   NOAH TANJUNG AGAS - sub-site styles
   Sits on top of ../noah-group.css (navbar, mobile menu, footer, cookie
   banner, page-hero, colours and fonts all come from there), so this file
   only holds what is specific to this site.
   ========================================================================== */

/* ---------- navbar: the Tanjung Agas logo (it already says "Noah Tanjung Agas") ---------- */
.nav-brand { text-decoration: none; }
.nav-brand img { height: 50px; width: auto; }          /* larger than the Group's 42px so "TANJUNG AGAS" stays legible */
@media (max-width: 380px) { .nav-brand img { height: 40px; } }
.footer-logo { height: 46px; width: auto; }
.nav-links a[aria-current="page"] { color: var(--gold); }
@media (min-width: 901px) {
  .nav-links .nav-group-link {
    border: 1px solid rgba(255,255,255,.28); border-radius: 30px; padding: 8px 16px; margin-left: 6px;
  }
  .nav-links .nav-group-link:hover { border-color: var(--gold); color: var(--gold); }
}

/* ---------- buttons ---------- */
.ta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gold); color: var(--navy-900);
  padding: 14px 26px; border-radius: 40px; border: 1px solid var(--gold);
  font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.ta-btn i { font-style: normal; }
.ta-btn:hover { transform: translateY(-2px); background: #f1b73a; }
.ta-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.ta-btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.ta-btn-dark { background: var(--navy-700); border-color: var(--navy-700); color: #fff; align-self: flex-start; }
.ta-btn-dark:hover { background: var(--navy-500); border-color: var(--navy-500); }

/* ---------- home hero ---------- */
.ta-hero .hero-content { max-width: 880px; margin: 0 auto; padding: 130px 20px 170px; }
.ta-hero .hero-logo { width: clamp(240px, 32vw, 400px); height: auto; margin: 0 auto 30px; display: block; }
.ta-hero-text {
  font-weight: 300; font-size: clamp(16px, 1.55vw, 19px); line-height: 1.85;
  color: #EEF2F8; text-shadow: 0 2px 16px rgba(0,0,0,.6);
  animation: riseIn 1.1s .55s ease both;
}
.ta-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; animation: riseIn 1.1s .7s ease both; }

/* ---------- key figures ---------- */
.ta-facts { background: var(--paper); padding: 10px 20px 80px; }
.ta-facts-inner { max-width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ta-fact {
  text-align: center; padding: 28px 14px 24px; background: #fff;
  border-top: 3px solid var(--gold); border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 34px rgba(16,26,46,.07);
}
.ta-fact-num { display: block; font-size: clamp(28px, 3.3vw, 42px); font-weight: 500; color: var(--navy-700); line-height: 1.1; }
.ta-fact-num small { font-size: .42em; font-weight: 600; letter-spacing: 1px; color: var(--ink-soft); margin-left: 6px; text-transform: uppercase; }
.ta-fact-label { display: block; margin-top: 12px; font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
@media (max-width: 900px) { .ta-facts-inner { grid-template-columns: repeat(2, 1fr); } }

/* ---------- generic sections ---------- */
.ta-section { position: relative; overflow: hidden; padding: 90px 20px; }
.ta-alt { background: #fff; }
.ta-wrap { position: relative; z-index: 1; max-width: var(--shell); margin: 0 auto; }
.ta-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.ta-head h2, .ta-text h2, .ta-contact h2 { font-size: clamp(26px, 3vw, 36px); color: var(--navy-700); font-weight: 500; line-height: 1.25; margin-bottom: 8px; }
.ta-kicker { display: block; color: #b9861a; font-size: 12.5px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 12px; }
.ta-text p { font-size: 16px; line-height: 1.85; color: var(--ink-soft); margin-bottom: 16px; }

.ta-split { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; max-width: 860px; }
.ta-split.has-media { grid-template-columns: 1.05fr .95fr; max-width: var(--shell); }
.ta-split-rev.has-media { grid-template-columns: .95fr 1.05fr; }
@media (max-width: 860px) { .ta-split, .ta-split.has-media, .ta-split-rev.has-media { grid-template-columns: 1fr; gap: 34px; } }

.ta-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ta-chip { padding: 8px 16px; border: 1px solid rgba(16,26,46,.16); border-radius: 30px; font-size: 13px; color: var(--navy-700); background: #fff; }

/* ---------- pictures: only shown when the file exists (tanjung-agas.js adds .is-ready) ---------- */
.ta-media {
  display: none; position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 3 / 2;
  background: var(--navy-700); box-shadow: 0 24px 50px rgba(16,26,46,.16);
}
.ta-media.is-ready { display: block; }
.ta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ta-portrait { aspect-ratio: 4 / 5; }
.ta-portrait img { object-position: center top; }

/* ---------- service option cards (home): icon + number + text, no pictures ---------- */
.ta-opt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ta-opt {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 36px 28px 28px; background: #fff; color: inherit; text-decoration: none;
  border: 1px solid rgba(16,26,46,.08); border-radius: 18px;
  box-shadow: 0 12px 30px rgba(16,26,46,.06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ta-opt::before {                                   /* gold bar that sweeps across on hover */
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--gold), #f3c25a);
  transform: scaleX(.22); transform-origin: left; transition: transform .5s ease;
}
.ta-opt:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(16,26,46,.15); border-color: rgba(229,165,38,.45); }
.ta-opt:hover::before { transform: scaleX(1); }
.ta-opt-num { position: absolute; top: 16px; right: 22px; font-size: 54px; font-weight: 600; line-height: 1; color: rgba(16,26,46,.055); letter-spacing: -1px; }
.ta-opt-ico {
  display: grid; place-items: center; flex: 0 0 auto; width: 60px; height: 60px; margin-bottom: 22px; border-radius: 18px;
  background: linear-gradient(145deg, var(--navy-700), var(--navy-500)); color: var(--gold);
  box-shadow: 0 10px 22px rgba(13,28,54,.28);
  transition: transform .35s ease;
}
.ta-opt-ico svg { width: 28px; height: 28px; }
.ta-opt:hover .ta-opt-ico { transform: scale(1.08) rotate(-4deg); }
.ta-opt h3 { font-size: 19px; color: var(--navy-700); font-weight: 500; line-height: 1.3; margin-bottom: 12px; }
.ta-opt p {
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 22px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;   /* trims long text to 4 lines */
}
.ta-opt-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #b9861a; }
.ta-opt-more i { font-style: normal; transition: transform .25s ease; }
.ta-opt:hover .ta-opt-more i { transform: translateX(5px); }
@media (max-width: 1100px) { .ta-opt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ta-opt-grid { grid-template-columns: 1fr; } .ta-opt { padding: 30px 24px 24px; } }

/* ---------- Managing Director quote ---------- */
.ta-quote-text { font-size: clamp(22px, 2.6vw, 32px); font-weight: 300; line-height: 1.45; color: #fff; margin: 4px 0 26px; }
.ta-quote-text::before { content: "\201C"; display: block; font-family: Georgia, serif; font-size: 78px; line-height: .7; color: var(--gold); margin-bottom: 16px; }
/* Closing quotation mark: a mirror image of the opening mark above. Same gold serif, same size, on its own
   line below the quote, with the same amount of space between it and the text (the space is set by margin-top). */
.ta-quote-text::after { content: "\201D"; display: block; text-align: right; font-family: Georgia, serif; font-size: 78px; line-height: .7; color: var(--gold); margin-top: 52px; }
/* when there is no portrait the quote is centred, so the closing mark centres too */
.ta-quote .chairman-inner:not(.has-media) .ta-quote-text::after { text-align: center; }
.ta-quote .chairman-inner { grid-template-columns: 1fr; max-width: 860px; }
.ta-quote .chairman-inner:not(.has-media) .chairman-text { text-align: center; }
.ta-quote .chairman-inner.has-media { grid-template-columns: .85fr 1.15fr; max-width: var(--shell); }
@media (max-width: 800px) { .ta-quote .chairman-inner.has-media { grid-template-columns: 1fr; } }
.ta-quote .chairman-photo { width: 100%; max-width: 420px; justify-self: center; }
.ta-quote-name { color: #fff; font-weight: 600; font-size: 17px; }
.ta-quote-name span { display: block; color: var(--gold); font-size: 12.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; margin-top: 6px; }

/* ---------- About: key facts ---------- */
.ta-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
.ta-dl > div { background: var(--paper); border-left: 3px solid var(--gold); padding: 16px 20px; border-radius: 0 10px 10px 0; }
.ta-dl dt { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.ta-dl dd { margin: 6px 0 0; font-size: 16.5px; color: var(--navy-700); font-weight: 500; line-height: 1.4; }
@media (max-width: 520px) { .ta-dl { grid-template-columns: 1fr; } }

/* ---------- Services page rows: numbered cards, picture optional ---------- */
.ta-rows { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; display: grid; gap: 28px; }
.ta-row {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; scroll-margin-top: 120px;
  background: #fff; border-radius: 18px; padding: 38px 40px; border-left: 4px solid var(--gold);
  box-shadow: 0 16px 40px rgba(16,26,46,.08);
}
.ta-row.has-media { grid-template-columns: 1.1fr .9fr; }
.ta-row.has-media:nth-child(even) .ta-media { order: -1; }
.ta-row-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ta-row-head .ta-opt-ico { margin-bottom: 0; }
.ta-num { color: #b9861a; font-size: 13px; font-weight: 700; letter-spacing: 2.4px; }
.ta-row h2 { font-size: clamp(22px, 2.4vw, 30px); color: var(--navy-700); font-weight: 500; margin-bottom: 8px; }
.ta-row p { font-size: 16px; line-height: 1.85; color: var(--ink-soft); }
@media (max-width: 800px) {
  .ta-row { padding: 28px 24px; gap: 26px; }
  .ta-row.has-media, .ta-row.has-media:nth-child(even) { grid-template-columns: 1fr; }
  .ta-row.has-media:nth-child(even) .ta-media { order: 0; }
}
.ta-cta { background: var(--navy-900); color: #fff; text-align: center; padding: 80px 20px; }
.ta-cta-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.ta-cta h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 500; line-height: 1.3; }

/* ---------- Contact ---------- */
.ta-contact { position: relative; z-index: 1; max-width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: start; }
.ta-clist { display: grid; gap: 14px; margin: 26px 0 28px; }
.ta-citem {
  display: flex; gap: 16px; align-items: center; background: #fff; padding: 14px 18px; border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16,26,46,.07); text-decoration: none; color: inherit;
}
a.ta-citem:hover { box-shadow: 0 14px 34px rgba(16,26,46,.13); }
.ta-citem-ico { flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--navy-700); color: #fff; display: grid; place-items: center; }
.ta-citem-ico svg { width: 19px; height: 19px; }
.ta-citem small { display: block; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 3px; }
.ta-citem .val { font-size: 15.5px; color: var(--navy-700); font-weight: 500; line-height: 1.45; word-break: break-word; }
.ta-map { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy-700); box-shadow: 0 14px 34px rgba(16,26,46,.12); }
.ta-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.ta-form { background: #fff; border-radius: 16px; padding: 36px; box-shadow: 0 24px 60px rgba(16,26,46,.11); display: flex; flex-direction: column; gap: 18px; }
.ta-form h3 { font-size: 22px; font-weight: 500; color: var(--navy-700); }
.ta-field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy-700); margin-bottom: 7px; }
.ta-field input, .ta-field textarea {
  width: 100%; padding: 14px 16px; border: 1px solid rgba(16,26,46,.2); border-radius: 8px;
  font: inherit; font-size: 15px; color: var(--ink); background: #fff; resize: vertical;
}
.ta-field input:focus, .ta-field textarea:focus { outline: 2px solid var(--navy-500); outline-offset: 1px; border-color: var(--navy-500); }
.ta-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ta-form-status { min-height: 22px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.ta-form-status.ok  { color: #1c7a45; }
.ta-form-status.err { color: #b3261e; }
@media (max-width: 900px) { .ta-contact { grid-template-columns: 1fr; gap: 40px; } .ta-form { padding: 26px 22px; } }

/* ---------- Privacy Policy ---------- */
.ta-legal { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ta-legal h2 { font-size: clamp(22px, 2.4vw, 28px); color: var(--navy-700); font-weight: 500; margin: 46px 0 14px; padding-top: 10px; border-top: 1px solid rgba(16,26,46,.1); }
.ta-legal h3 { font-size: 19px; color: var(--navy-700); font-weight: 600; margin: 30px 0 10px; }
.ta-legal h4 { font-size: 16px; color: var(--navy-500); font-weight: 600; margin: 22px 0 8px; }
.ta-legal p, .ta-legal li { font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); }
.ta-legal p { margin-bottom: 14px; }
.ta-legal ul { padding-left: 22px; margin: 0 0 18px; }
.ta-legal li { margin-bottom: 8px; }
.ta-legal a { color: var(--navy-500); text-decoration: underline; word-break: break-word; }

/* unavailable company-profile link (file not uploaded yet) */
a.is-unavailable { opacity: .5; pointer-events: none; cursor: default; }