/*
Theme Name: GeneratePress Child - Corphex
Template: generatepress
Author: Corphex Legal & Compliance
Description: Custom child theme for Corphex Legal & Compliance. Navy/charcoal palette with a single gold accent, built for a legal services site with practice area pages and a client-run blog.
Version: 1.9
*/

:root{
  --corphex-navy: #1c1d21;
  --corphex-navy-light: #26272c;
  --corphex-charcoal: #141416;
  --corphex-gold: #a97e3f;
  --corphex-gold-light: #c79a5c;
  --corphex-gold-glow: rgba(169,126,63,0.35);
  --corphex-cream: #f6f5f2;
  --corphex-text: #22232a;
  --corphex-muted: #6d6f78;
  --corphex-border: #e7e5e0;
  --corphex-radius: 4px;
}

body{
  color: var(--corphex-text);
  background: #ffffff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}

h1, h2, h3, h4, .site-title{
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-weight: 600;
  color: var(--corphex-navy);
  letter-spacing: -0.01em;
}

a{ color: var(--corphex-navy); }
a:hover{ color: var(--corphex-gold); }

/* ---------- Top navigation (horizontal) ---------- */
.site-header{ display: none; } /* GeneratePress's own header - fully replaced by the nav below */

/* Neutralize GeneratePress's own content-wrapper/grid container so it can't
   fight with this theme's own section widths. hero-page.php is a fully
   custom template that skips GP's normal content-area generation, so GP's
   leftover container/grid rules were applying partial width constraints -
   this is what caused content to align on the left (matching the nav) but
   fall short of the right edge, instead of being properly centered. */
#page, #content, .site-content, .content-area, #primary, main.site-main{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.corphex-topnav{
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--corphex-cream);
  border-bottom: 1px solid var(--corphex-border);
}
/* When logged into wp-admin, WordPress's own admin toolbar is fixed at the
   very top of the screen (32px tall on desktop) - without this, our sticky
   nav also pins to the top and the two fight for the same space, causing
   the squished overlap you see only while logged in and scrolled down.
   Visitors who aren't logged in never see this, since the admin bar only
   exists for logged-in users. */
.admin-bar .corphex-topnav{ top: 32px; }
@media(max-width: 782px){
  .admin-bar .corphex-topnav{ top: 46px; } /* WP's admin bar is taller on mobile */
}
.corphex-topnav .inside{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}
.corphex-topnav .brand{
  display: flex;
  align-items: center;
  flex: none;
  order: 1;
  margin-right: 28px;
  text-decoration: none;
}
.corphex-topnav .brand-text{
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.corphex-topnav nav.primary-nav{ order: 2; }
.corphex-topnav nav.primary-nav ul{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.corphex-topnav nav.primary-nav li{ position: relative; }
.corphex-topnav nav.primary-nav a{
  display: block;
  padding: 9px 16px;
  color: var(--corphex-text);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}
.corphex-topnav nav.primary-nav a:hover{ background: var(--corphex-border); color: var(--corphex-navy); }
.corphex-topnav nav.primary-nav li.current-menu-item > a{
  background: var(--corphex-navy);
  color: #fff;
}
.corphex-topnav nav.primary-nav li.current-menu-item > a:hover{ background: var(--corphex-navy); }

.corphex-topnav .nav-cta{ flex: none; order: 3; margin-left: auto; }
.corphex-topnav .nav-cta a{
  background: var(--corphex-navy);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: var(--corphex-radius);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none !important;
  transition: background .2s ease;
}
.corphex-topnav .nav-cta a:hover{ background: var(--corphex-gold); }

.corphex-topnav-toggle{
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.corphex-topnav-toggle span{ width: 20px; height: 2px; background: var(--corphex-navy); position: relative; transition: background .2s ease .1s; }
.corphex-topnav-toggle span::before,
.corphex-topnav-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background: var(--corphex-navy);
  transition: transform .25s ease, top .25s ease;
}
.corphex-topnav-toggle span::before{ top:-6px; }
.corphex-topnav-toggle span::after{ top:6px; }
.corphex-topnav-toggle.is-active span{ background: transparent; }
.corphex-topnav-toggle.is-active span::before{ top:0; transform: rotate(45deg); }
.corphex-topnav-toggle.is-active span::after{ top:0; transform: rotate(-45deg); }

@media(max-width: 940px){
  .corphex-topnav .inside{ flex-wrap: wrap; padding: 14px 20px; }
  .corphex-topnav .brand{ order: 1; margin-right: 0; }
  .corphex-topnav-toggle{ order: 2; margin-left: auto; display: flex; }
  nav.primary-nav{
    order: 3; flex-basis: 100%;
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .corphex-topnav nav.primary-nav.is-open{ max-height: 400px; }
  .corphex-topnav nav.primary-nav ul{ flex-direction: column; width: 100%; padding: 10px 0 0; gap: 0; }
  .corphex-topnav nav.primary-nav a{ border-radius: var(--corphex-radius); }

  .corphex-topnav .nav-cta{
    order: 4; flex-basis: 100%; margin-left: 0;
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .corphex-topnav .nav-cta.is-open{ max-height: 100px; padding-bottom: 12px; }
  .corphex-topnav .nav-cta a{
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin-top: 8px;
  }
}

/* ---------- Entrance animation (CSS-only, no JS dependency) ----------
   Content is visible by default even if this never runs - the animation
   is a bonus, not something the page depends on to show text. This
   replaces an earlier JS-triggered version that made content invisible
   until a script ran, which was fragile and caused blank sections
   whenever the JS file was out of sync with the rest of the theme. */
@keyframes corphexFadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
.corphex-hero .hero-copy,
.corphex-stat,
.corphex-card,
.corphex-section .kicker,
.corphex-section h2{
  animation: corphexFadeUp .6s ease both;
}

/* ---------- Hero ---------- */
.corphex-hero{
  background: var(--corphex-cream);
  color: var(--corphex-text);
  padding: 70px 24px 56px;
}
.corphex-hero .inside{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 56px;
}
.corphex-hero .hero-copy{ flex: 1 1 520px; max-width: 620px; }
.corphex-hero .eyebrow{
  color: var(--corphex-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.corphex-hero h1{
  color: var(--corphex-navy);
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 18px;
}
.corphex-hero p{
  color: var(--corphex-muted);
  font-size: 1.1rem;
  margin-bottom: 28px;
}
.corphex-hero-actions a{ margin-right: 14px; }
.corphex-hero-actions .secondary{
  background: transparent !important;
  border: 1px solid var(--corphex-border);
  color: var(--corphex-navy) !important;
  text-decoration: none !important;
}
.corphex-hero-note{
  margin-top: 26px;
  font-size: 0.85rem;
  color: var(--corphex-muted);
}

/* Hero right-side stat panel (image-7 layout: 4 bordered boxes stacked vertically, next to the text) */
.corphex-hero .stat-panel{
  flex: 1 1 340px;
  max-width: 380px;
  border: 1px solid var(--corphex-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.corphex-hero .stat-panel-item{
  padding: 22px 24px;
  border-bottom: 1px solid var(--corphex-border);
}
.corphex-hero .stat-panel-item:last-child{ border-bottom: none; }
.corphex-hero .stat-panel-item b{
  display: block; font-family: "Fraunces", serif; font-size: 1.25rem; color: var(--corphex-navy); margin-bottom: 6px;
}
.corphex-hero .stat-panel-item .stat-label{
  display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; font-weight: 700; color: var(--corphex-gold); margin-bottom: 6px;
}
.corphex-hero .stat-panel-item .stat-desc{ color: var(--corphex-muted); font-size: 0.86rem; }

/* Hero image - Media Library picture, alternative to the stat panel above (only one should be used at a time) */
.corphex-hero .hero-image{
  flex: 1 1 380px;
  max-width: 420px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease .4s, transform .6s ease .4s;
}
.corphex-hero .hero-image.is-visible{ opacity: 1; transform: translateY(0); }
.corphex-hero .hero-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 24px 50px rgba(28,29,33,0.16);
}

/* ---------- Stats bar ---------- */
.corphex-stats{
  background: var(--corphex-cream);
  padding: 0 24px 40px;
}
.corphex-stats .inside{
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 24px;
}
.corphex-stat b{ display:block; font-size: 1.3rem; color: var(--corphex-navy); font-family:"Fraunces",serif; margin-bottom: 4px; }
.corphex-stat span{ color: var(--corphex-muted); font-size: 0.88rem; }

/* ---------- Practice Areas card rows (matches the original demo layout) ---------- */
.corphex-pa-list{
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--corphex-border);
  border-radius: 6px;
  overflow: hidden;
}
.corphex-pa-row{
  display: flex;
  gap: 40px;
  padding: 30px 34px;
  border-bottom: 1px solid var(--corphex-border);
  background: #fff;
  transition: background .18s ease;
}
.corphex-pa-row:last-child{ border-bottom: none; }
.corphex-pa-row:hover{ background: var(--corphex-cream); }
.corphex-pa-row .pa-title{
  flex: 0 0 220px;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--corphex-navy);
}
.corphex-pa-row .pa-body{ flex: 1; }
.corphex-pa-row .pa-body p{ color: var(--corphex-muted); font-size: 0.98rem; margin-bottom: 10px; }
.corphex-pa-row .pa-link{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--corphex-gold);
  font-size: 0.88rem; font-weight: 700;
  text-decoration: none;
}
.corphex-pa-row .pa-link:hover{ gap: 10px; }

@media(max-width: 700px){
  .corphex-pa-row{ flex-direction: column; gap: 8px; }
  .corphex-pa-row .pa-title{ flex-basis: auto; }
}

/* ---------- WordPress core tables (used inside page content, e.g. "Suited to / Not the right fit") ---------- */
.corphex-page-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 22px;
  font-size: 0.94rem;
  border: 1px solid var(--corphex-border);
  border-radius: 6px;
  overflow: hidden;
}
.corphex-page-content table thead th{
  background: var(--corphex-navy);
  color: #fff;
  text-align: left;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 20px;
}
.corphex-page-content table td,
.corphex-page-content table th{
  padding: 14px 20px;
  border-bottom: 1px solid var(--corphex-border);
  vertical-align: top;
}
.corphex-page-content table tbody tr:last-child td{ border-bottom: none; }
.corphex-page-content table tbody tr:nth-child(even){ background: var(--corphex-cream); }
.corphex-page-content table tbody tr:hover{ background: #f0ede6; }
@media(max-width: 700px){
  .corphex-page-content table{ display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- Fluent Forms ----------
   Styled against Fluent Forms' documented standard class names
   (.fluentform, .ff-el-group, .ff-el-form-control, .ff-btn-submit) to
   match the reference screenshot exactly: two-column paired fields,
   "(optional)" in a lighter weight next to the label, flat solid navy
   submit button spanning full width, gray helper text above it.
   These class names are stable across recent Fluent Forms versions, but
   if your build renders different markup, inspect the live form and send
   me the actual classes - these selectors won't apply to ones that don't
   exist. */
.fluentform{
  font-family: "Inter", sans-serif;
  max-width: 100%;
}

/* Two-column layout for paired fields (Full name / Email, etc.) -
   Fluent Forms' grid uses Bootstrap-style row/col classes when a field's
   width is set to "Half Width" in the form editor. */
.fluentform .ff-row,
.fluentform .ff_row{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.fluentform .ff-row > [class*="ff-col"],
.fluentform .ff_row > [class*="ff_col"]{
  padding: 0 10px;
  box-sizing: border-box;
  flex: 1 1 100%;
  max-width: 100%;
}
.fluentform .ff-row > [class*="col-md-6"],
.fluentform .ff-row > [class*="col-6"]{
  flex: 1 1 50%;
  max-width: 50%;
}
@media(max-width: 600px){
  .fluentform .ff-row > [class*="col-md-6"],
  .fluentform .ff-row > [class*="col-6"]{ flex-basis: 100%; max-width: 100%; }
}

.fluentform .ff-el-group{ margin-bottom: 22px; }
.fluentform .ff-el-input--label label,
.fluentform label{
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.fluentform .ff-el-input--label label .ff-el-form-check-label,
.fluentform label .ff_optional,
.fluentform label small,
.fluentform label em{
  font-weight: 400;
  color: var(--corphex-muted);
}
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform select{
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #d8d5cd;
  border-radius: 4px;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  color: var(--corphex-text);
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
  box-sizing: border-box;
}
.fluentform ::placeholder{ color: #a3a19a; }
.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus{
  outline: none;
  border-color: var(--corphex-navy);
  box-shadow: 0 0 0 3px rgba(28,29,33,0.08);
}
.fluentform textarea{ min-height: 150px; resize: vertical; }
.fluentform .ff-el-form-check{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fluentform .ff-el-form-check input[type="checkbox"],
.fluentform .ff-el-form-check input[type="radio"]{
  width: auto; accent-color: var(--corphex-navy);
}

/* Helper/disclaimer text above the submit button */
.fluentform .ff-el-group + p,
.fluentform .ff_form_disclaimer,
.fluentform .ff-disclaimer{
  font-size: 0.86rem;
  color: var(--corphex-muted);
  margin-bottom: 16px;
}

/* Flat solid submit button, full width, matching the reference exactly */
.fluentform button[type="submit"],
.fluentform .ff-btn-submit{
  display: block;
  width: 100%;
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 28px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  cursor: pointer;
  transition: background .2s ease;
}
.fluentform button[type="submit"]:hover,
.fluentform .ff-btn-submit:hover{
  background: var(--corphex-navy) !important;
}
.fluentform .error, .fluentform .text-danger{ color: #b3261e; font-size: 0.82rem; margin-top: 4px; }
.fluentform .ff-message-success{
  background: var(--corphex-cream);
  border: 1px solid var(--corphex-gold-light);
  border-radius: 4px;
  padding: 16px 20px;
  color: var(--corphex-navy);
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.corphex-cta-btn{
  background: linear-gradient(135deg, var(--corphex-navy) 0%, var(--corphex-navy-light) 100%) !important;
  color: #fff !important;
  padding: 11px 24px !important;
  border-radius: var(--corphex-radius);
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block;
  transition: box-shadow .25s ease, transform .2s ease, background .2s ease;
}
.corphex-cta-btn:hover{
  background: linear-gradient(135deg, var(--corphex-gold) 0%, var(--corphex-gold-light) 100%) !important;
  color: #1c1d21 !important;
  box-shadow: 0 8px 26px var(--corphex-gold-glow);
  transform: translateY(-2px);
}

/* ---------- Sections ---------- */
.corphex-section{ padding: 32px 20px; max-width: 1200px; margin: 0 auto; }
.corphex-page-content{ max-width: 1120px; margin: 0 auto; }
.corphex-page-content > *:first-child{ margin-top: 0 !important; }
.corphex-page-content h2{ margin-top: 20px !important; margin-bottom: 8px !important; font-size: 1.4rem !important; }
.corphex-page-content h3{ margin-top: 18px !important; margin-bottom: 6px !important; font-size: 1.2rem !important; }
.corphex-page-content p{ margin-top: 0 !important; margin-bottom: 10px !important; }
.corphex-page-content ul, .corphex-page-content ol{ margin-top: 0 !important; margin-bottom: 10px !important; }
.corphex-page-content li{ margin-bottom: 4px !important; }
.corphex-section .kicker{
  color: var(--corphex-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 700;
}
.corphex-section h2{ font-size: 2rem; margin: 8px 0 30px; }

/* ---------- Cards (practice areas, insights) ---------- */
.corphex-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.corphex-card{
  border: 1px solid var(--corphex-border);
  border-radius: var(--corphex-radius);
  padding: 28px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.corphex-card .card-icon{
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--corphex-cream);
  color: var(--corphex-gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: background .25s ease, transform .25s ease;
}
.corphex-card .card-icon svg{ width: 19px; height: 19px; }
.corphex-card:hover{
  box-shadow: 0 14px 32px rgba(28,29,33,0.1);
  transform: translateY(-4px);
  border-color: var(--corphex-gold-light);
}
.corphex-card:hover .card-icon{
  background: linear-gradient(135deg, var(--corphex-gold) 0%, var(--corphex-gold-light) 100%);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}
.corphex-card h3{ font-size: 1.15rem; margin-bottom: 10px; }
.corphex-card p{ color: var(--corphex-muted); font-size: 0.95rem; }
.corphex-card a.read-more{
  display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--corphex-navy);
  transition: gap .2s ease;
}
.corphex-card:hover a.read-more{ gap: 9px; color: var(--corphex-gold); }

/* ---------- Insight/blog cards ---------- */
.corphex-insight-card .meta{ color: var(--corphex-muted); font-size: 0.8rem; margin-top: 10px; display:flex; align-items:center; gap:6px; }
.corphex-insight-card .meta svg{ width: 13px; height: 13px; opacity: .6; }
.corphex-insight-card .tag{
  display:inline-flex; align-items:center; gap:6px; background: var(--corphex-cream); color: var(--corphex-navy);
  font-size: 0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding: 5px 11px; border-radius: 20px; margin-bottom: 14px;
  transition: background .2s ease, color .2s ease;
}
.corphex-insight-card .tag svg{ width: 12px; height: 12px; }
.corphex-card:hover .corphex-insight-card .tag,
.corphex-insight-card:hover .tag{
  background: var(--corphex-navy); color: #fff;
}

/* ---------- Three pathways (tabbed audience selector) ---------- */
.corphex-pathways{
  background: var(--corphex-cream);
  padding: 50px 24px 56px;
}
.corphex-pathways .inside{ max-width: 1200px; margin: 0 auto; }
.corphex-pathways .kicker{
  display: flex; align-items: center; gap: 10px;
  color: var(--corphex-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.corphex-pathways .kicker::before{ content:""; width: 24px; height: 2px; background: var(--corphex-gold); }
.corphex-pathways h2{ font-size: 1.9rem; margin-bottom: 10px; }
.corphex-pathways .subhead{ color: var(--corphex-muted); font-size: 1.02rem; margin-bottom: 28px; }

.corphex-pathway-tabs{ display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.corphex-pathway-tab{
  padding: 12px 22px;
  border-radius: var(--corphex-radius);
  border: 1px solid var(--corphex-border);
  background: #fff;
  color: var(--corphex-text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.corphex-pathway-tab:hover{ border-color: var(--corphex-gold-light); }
.corphex-pathway-tab.is-active{
  background: var(--corphex-navy);
  border-color: var(--corphex-navy);
  color: #fff;
}

.corphex-pathway-panel{
  display: none;
  background: #fff;
  border: 1px solid var(--corphex-border);
  border-radius: 6px;
  padding: 44px 44px 40px;
}
.corphex-pathway-panel.is-active{ display: block; }
.corphex-pathway-panel h3{ font-size: 1.5rem; margin-bottom: 14px; max-width: 640px; }
.corphex-pathway-panel > p{ color: var(--corphex-muted); font-size: 1rem; max-width: 620px; margin-bottom: 30px; }

.corphex-pathway-points{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}
.corphex-pathway-points div{
  padding-top: 14px;
  border-top: 1px solid var(--corphex-border);
  font-size: 0.92rem;
  color: var(--corphex-text);
}

@media(max-width: 780px){
  .corphex-pathway-points{ grid-template-columns: 1fr; }
  .corphex-pathway-panel{ padding: 30px 24px; }
}

/* ---------- Hiring in Pakistan (dark, two-column, image-4 layout) ---------- */
.corphex-hiring{
  background: var(--corphex-navy);
  padding: 50px 24px 56px;
}
.corphex-hiring .inside{ max-width: 1200px; margin: 0 auto; }
.corphex-hiring .kicker{
  display: flex; align-items: center; gap: 10px;
  color: var(--corphex-gold-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.corphex-hiring .kicker::before{ content:""; width: 24px; height: 2px; background: var(--corphex-gold-light); }
.corphex-hiring h2{ color: #fff; font-size: 1.9rem; margin-bottom: 10px; }
.corphex-hiring .subhead{ color: #9fa3b3; font-size: 1.02rem; margin-bottom: 28px; }

.corphex-hiring-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #33343a;
  border-radius: 6px;
  overflow: hidden;
}
.corphex-hiring-col{
  padding: 36px 36px 32px;
}
.corphex-hiring-col:first-child{ border-right: 1px solid #33343a; }
.corphex-hiring-col h3{ color: #fff; font-size: 1.35rem; margin-bottom: 12px; }
.corphex-hiring-col > p{ color: #9fa3b3; font-size: 0.95rem; margin-bottom: 26px; }
.corphex-hiring-col .hiring-points div{
  padding: 12px 0;
  border-top: 1px solid #33343a;
  color: #d3d5db;
  font-size: 0.9rem;
}
.corphex-hiring-col .hiring-points{ margin-bottom: 26px; }
.corphex-hiring-col .outline-btn{
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid #4a4b52;
  border-radius: var(--corphex-radius);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.corphex-hiring-col .outline-btn:hover{ border-color: var(--corphex-gold-light); background: rgba(169,126,63,0.1); }

@media(max-width: 780px){
  .corphex-hiring-grid{ grid-template-columns: 1fr; }
  .corphex-hiring-col:first-child{ border-right: none; border-bottom: 1px solid #33343a; }
}

/* ---------- CTA band ---------- */
.corphex-cta-band{
  background: var(--corphex-navy);
  color: #fff;
  padding: 32px 20px;
  text-align: center;
}
.corphex-cta-band h2{ color: #fff; margin-bottom: 10px; }
.corphex-cta-band p{ color: #c6cede; margin-bottom: 26px; }

/* ---------- Footer ---------- */
.site-footer{ display: none; } /* GeneratePress's own footer - replaced by ours below */
.corphex-site-footer{
  background: var(--corphex-charcoal);
  color: #a8a8a8;
  padding: 40px 24px 24px;
}
.corphex-footer-grid{
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 28px;
}
.corphex-footer-grid .footer-logo{
  font-family: "Fraunces", serif; font-weight: 600; color: #fff; font-size: 1.15rem; margin-bottom: 6px;
}
.corphex-footer-grid .footer-tag{
  color: var(--corphex-gold-light); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; margin-bottom: 10px;
}
.corphex-footer-grid .footer-about p{ font-size: 0.84rem; color: #8c8c8c; line-height: 1.6; max-width: 300px; }
.corphex-footer-grid h4{ color: #fff; font-size: 0.82rem; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.02em; }
.corphex-footer-grid ul{ list-style:none; margin:0; padding:0; }
.corphex-footer-grid ul li{ margin-bottom: 6px; font-size: 0.84rem; color: #a8a8a8; }
.corphex-footer-grid a{ color: #a8a8a8; font-size: 0.84rem; text-decoration: none; transition: color .15s ease; }
.corphex-footer-grid a:hover{ color: var(--corphex-gold-light); }
.corphex-footer-bottom{
  max-width: 1200px; margin: 24px auto 0; padding-top: 16px;
  border-top: 1px solid #2a2a2a; font-size: 0.76rem; color: #6f6f6f;
}

/* ---------- Interior page banner (Practice Areas, About, etc.) ---------- */
.corphex-hero--banner{
  padding: 30px 20px 24px;
}
.corphex-hero--banner .inside{ display: block; }
.corphex-hero--banner .hero-copy{ max-width: 900px; }
.corphex-hero--banner h1{
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

/* ---------- Responsive ---------- */
@media(max-width: 860px){
  .corphex-hero .inside{ flex-direction: column; gap: 32px; }
  .corphex-hero .hero-image{ max-width: 100%; order: -1; }
  .corphex-hero{ padding: 60px 20px 50px; }
  .corphex-section{ padding: 50px 20px; }
  .corphex-hero--banner{ padding: 26px 18px 20px; }
}
@media(max-width:768px){
  .corphex-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media(max-width:500px){
  .corphex-footer-grid{ grid-template-columns: 1fr; }
}