/* Paragon Search — v1 stylesheet
   Palette drawn from existing Paragon mark:
   - Paragon blue: #0a3d8f
   - Paragon gold/yellow: #f4c430
   Typography: Georgia for headings (traditional, trustworthy), system sans for body.
*/

:root {
  --paragon-blue: #0a3d8f;
  --paragon-blue-dark: #072a63;
  --paragon-gold: #f4c430;
  --paragon-gold-soft: #fce9a8;
  --logo-black: #1a1a1a;
  --ink: #1d232b;
  --ink-soft: #4a5461;
  --rule: #e4e7ec;
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --bg-band: #eef2f7;
  --max-width: 1080px;
  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

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

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.brand-logo {
  display: block;
  height: 64px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--paragon-blue);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 2px;
  border-bottom: 2px solid var(--paragon-gold);
  transition: border-color 0.15s, color 0.15s;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--paragon-blue-dark);
  border-bottom-color: var(--paragon-gold);
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  background: var(--bg);
  color: var(--ink);
  padding: 90px 0 80px;
  text-align: center;
}

.hero-logo {
  display: block;
  text-align: center;
  margin-bottom: 30px;
}

.hero-logo img {
  display: block;
  height: 225px;
  width: auto;
  margin: 0 auto;
}

/* The "Paragon" wordmark (images/paragon-wordmark.svg — the exact Halimun logo
   glyphs as vector paths) was REMOVED from the hero at Michael's request
   (2026-07-02, amendment #5): the logo above already reads "Paragon Search",
   so the repeated word below it was redundant. The rule + asset are retained
   so re-adding the wordmark is a one-line HTML change if he wants it back. */
.hero h1 img.brand-word {
  display: inline-block;
  height: 0.92em;
  width: auto;
  vertical-align: -0.14em;
  margin-right: 0.12em;
}
/* "Paragon" stays at full size; the words that follow drop to a subtitle size
   close to the ~20px wording above (eyebrow) and below (tagline), so the
   descriptive line reads as a supporting subtitle beneath the brand word rather
   than a same-size run-on (Michael, 2026-07-02, amendment #3).
   The descriptive sentence is laid out in a centred "triangle configuration"
   — explicit line breaks tapering the line lengths (62→45→35→28 chars) so the
   block forms a downward-pointing triangle echoing the logo mark and pointing
   into the taglines below (Michael, 2026-07-02, amendment #4, hand sketch). */
.hero h1 .h1-rest {
  display: block;
  margin-top: 14px;
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.3px;
  color: var(--logo-black);
  text-align: center;
}

/* "Est 1997" sits on its own between the logo and the gold rule above the
   headline. Bottom margin matched to the logo's 30px bottom margin so the
   line is an even spread between the bottom of the logo and the yellow line
   (Michael, 2026-07-02, amendment #6). */
.hero .eyebrow {
  display: block;
  margin: 0 0 30px;
}

.hero .eyebrow-est {
  display: block;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--paragon-blue);
  font-weight: 600;
  font-style: normal;
  margin-bottom: 0;
}

/* "Human Acquisition" was removed from the eyebrow at Michael's request
   (2026-07-02, amendment #6). The rule is retained so re-adding the second
   line is a one-line HTML change (add <span class="eyebrow-hrm">…</span> back
   inside .eyebrow, and restore .eyebrow-est margin-bottom to 8px). */
.hero .eyebrow-hrm {
  display: block;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  font-style: normal;
  color: var(--paragon-blue);
}

.hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 62px;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--logo-black);
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Gold rule above the h1 only. The bottom rule (the yellow line directly under
   the headline) was removed at Michael's request (2026-07-02). */
.hero h1::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--paragon-gold);
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
  width: 380px;
  max-width: 82%;
  margin-bottom: 20px;
}

.hero .tagline {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  font-style: normal;
  margin: 0 0 8px;
  color: var(--paragon-blue);
}

.hero .sub-tagline {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  font-style: normal;
  color: var(--paragon-blue);
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Sections ----------------------------------------------------------- */

.section {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
}

.section:nth-of-type(even) {
  background: var(--bg-soft);
}

.section h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  color: var(--paragon-blue);
  margin: 0 0 8px;
  font-weight: 700;
}

/* Yellow dash under each section heading (Michael, 2026-06-29). */
.section h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 10px;
  background: var(--paragon-gold);
  border-radius: 2px;
}

/* Body text across all sections: blue, italic, Times New Roman, slightly
   bolder — the look Michael approved on the History section, rolled out
   site-wide (2026-06-29). */
.section p {
  margin: 0 0 16px;
  font-family: "Times New Roman", Times, Georgia, serif;
  color: var(--paragon-blue);
  font-style: normal;
  font-weight: 400;
}

.section-intro {
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 720px;
}

/* --- Management / bios -------------------------------------------------- */

.bio {
  margin-top: 32px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.bio h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--paragon-blue);
  margin: 0 0 4px;
  font-size: 22px;
}

/* Yellow dash under category/team headings (replaces the old gold left rule). */
.bio h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 10px;
  background: var(--paragon-gold);
  border-radius: 2px;
}

.bio .role {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--paragon-blue-dark);
  margin: 0 0 14px;
  font-weight: 600;
}

/* Justify Our Team bio paragraphs so both edges are flush — the symmetrical,
   neater block look Michael asked for (2026-07-03). Last line stays ragged
   (default justify behaviour); the uppercase .role label is excluded. */
.section-management .bio p:not(.role) {
  text-align: justify;
}

.pull-quote {
  margin: 40px 0 0;
  padding: 24px 0;
  color: var(--paragon-blue);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-style: normal;
  line-height: 1.6;
}

/* --- Client industries -------------------------------------------------- */

.industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 24px 0 20px;
}

.industry {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--paragon-blue);
  border-radius: var(--radius);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--paragon-blue);
  box-shadow: var(--shadow-sm);
}

/* --- Services ----------------------------------------------------------- */

.service {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.service:first-of-type {
  margin-top: 16px;
  border-top: none;
  padding-top: 0;
}

.service h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--paragon-blue);
  font-size: 22px;
  margin: 0 0 6px;
}

.service-sub {
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  color: var(--paragon-blue);
  font-style: normal;
  font-weight: 600;
  margin: 0 0 16px !important;
}

.role-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.role-list > div {
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--paragon-blue);
  border-radius: var(--radius);
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  color: var(--paragon-blue);
  font-style: normal;
}

/* --- Current assignments ------------------------------------------------ */

.assignments-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0 16px;
}

.assignment {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.assignment.placeholder {
  opacity: 0.8;
  background: repeating-linear-gradient(
    135deg,
    #ffffff,
    #ffffff 10px,
    #fafbfc 10px,
    #fafbfc 20px
  );
}

.assignment .ref {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--paragon-gold);
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.assignment .role-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: var(--paragon-blue);
  font-weight: 700;
  margin-bottom: 6px;
}

.assignment .role-meta {
  font-size: 13px;
  color: var(--ink-soft);
}

.note {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: normal;
}

/* --- Enquiry form ------------------------------------------------------- */

.enquiry-form {
  max-width: 640px;
  background: #fff;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 600;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid #c9d1db;
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--paragon-blue);
  box-shadow: 0 0 0 3px rgba(10, 61, 143, 0.15);
}

.submit-btn {
  background: var(--paragon-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.submit-btn:hover,
.submit-btn:focus {
  background: var(--paragon-blue-dark);
}

.submit-btn:active {
  transform: translateY(1px);
}

.form-note {
  margin-top: 16px;
  font-size: 15px;
}

.form-note.success { color: #1d7d3f; }
.form-note.sending { color: var(--ink-soft); }
.form-note.error   { color: #b3261e; }

/* --- Contact ------------------------------------------------------------ */

.contact-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 520px;
  box-shadow: var(--shadow-sm);
}

.contact-card p {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
}

/* Currently-black bold text (e.g. company name) rendered bold blue */
.contact-card strong {
  color: var(--paragon-blue);
  font-weight: 700;
}

.contact-card a {
  color: var(--paragon-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--paragon-gold);
}

.contact-card a:hover { color: var(--paragon-blue-dark); }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--paragon-blue-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 28px 0;
  font-size: 14px;
  text-align: center;
}

.site-footer p { margin: 0 0 6px; }

.site-footer a {
  color: var(--paragon-gold);
  text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 720px) {
  .hero { padding: 60px 0 54px; }
  .hero h1 { font-size: 44px; }
  .hero h1 .h1-rest { font-size: 19px; }
  .hero .tagline,
  .hero .sub-tagline { font-size: 18px; }
  .hero-logo { padding: 16px 20px; margin-bottom: 24px; }
  .hero-logo img { height: 144px; }
  .brand-logo { height: 52px; }
  .industries-grid { grid-template-columns: 1fr; }

  .section { padding: 52px 0; }
  .section h2 { font-size: 26px; }

  .site-nav { gap: 12px; width: 100%; justify-content: flex-start; }
  .site-nav a { font-size: 12px; }
  .header-inner { gap: 12px; }
  .brand-logo { height: 52px; }
}