/* ============================================================ 

   AMI NETWORK — DIRECT HIRE PAGE 

   Same design system as Staffing. Different story. 

   ============================================================ */ 

 

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 

 

:root { 

  --teal-dark:   #2c5456; 

  --teal:        #3d7d7f; 

  --teal-mid:    #5a9496; 

  --teal-light:  #7ab5b6; 

  --teal-pale:   #e6f2f2; 

  --teal-mist:   #c8e2e2; 

  --warm:        #f5f2ee; 

  --warm-deep:   #ede9e3; 

  --charcoal:    #2c3e3f; 

  --charcoal-lt: #526465; 

  --sand:        #c4a882; 

  --sand-pale:   #f0e8dc; 

  --white:       #ffffff; 

  --nav-h:       72px; 

} 

 

html { scroll-behavior: smooth; } 

 

body { 

  font-family: 'DM Sans', sans-serif; 

  background: var(--warm); 

  color: var(--charcoal); 

  font-size: 15px; 

  line-height: 1.65; 

  -webkit-font-smoothing: antialiased; 

} 

 

.container { max-width: 1160px; margin: 0 auto; padding: 0 40px; } 

@media (max-width: 768px) { .container { padding: 0 20px; } } 

img { max-width: 100%; display: block; } 

a { text-decoration: none; color: inherit; } 

 

/* ── ANIMATIONS ── */ 

@keyframes fadeUp { 

  from { opacity: 0; transform: translateY(24px); } 

  to   { opacity: 1; transform: translateY(0); } 

} 

.fade-up { animation: fadeUp 0.7s ease both; } 

.fade-up-1 { animation-delay: 0.1s; } 

.fade-up-2 { animation-delay: 0.2s; } 

.fade-up-3 { animation-delay: 0.3s; } 

.fade-up-4 { animation-delay: 0.4s; } 

.fade-up-5 { animation-delay: 0.5s; } 

 

/* ============================================================ 

   HERO — split layout, illustration right 

   ============================================================ */ 

.hero { 

  margin-top: var(--nav-h); 

  min-height: 560px; 

  position: relative; 

  display: flex; 

  flex-direction: column; 

  overflow: hidden; 

  background: var(--teal-dark); 

} 

.hero-main { 

  display: grid; 

  grid-template-columns: 1fr 1fr; 

  min-height: 480px; 

  position: relative; 

} 

@media(max-width:800px){ .hero-main{ grid-template-columns:1fr; } } 

.hero-left { 

  position: relative; z-index: 2; 

  display: flex; flex-direction: column; justify-content: center; 

 /*  padding: 64px 56px 64px 60px;  */
 
  padding: 100px 60px; 

  background: linear-gradient(120deg, rgba(44,84,86,0.98) 0%, rgba(44,84,86,0.92) 100%); 

  overflow: hidden; 

} 

.hero-left::before { 

  content: ''; 

  position: absolute; 

  inset: 0; 

  /* background-image: radial-gradient(circle, rgba(122,181,182,0.14) 1.5px, transparent 1.5px); */

  background-size: 28px 28px; 

  pointer-events: none; 

  z-index: 0; 

} 

.hero-left::after { 

  content: ''; 

  position: absolute; 

  bottom: -80px; 

  right: -80px; 

  width: 380px; 

  height: 380px; 

  border-radius: 50%; 

  border: 1px solid rgba(196,168,130,0.14); 

  box-shadow: 0 0 0 60px rgba(196,168,130,0.05), 0 0 0 120px rgba(196,168,130,0.02); 

  pointer-events: none; 

  z-index: 0; 

} 

@media(max-width:800px){ .hero-left{ padding:60px 20px 40px; } } 

 

.hero-badge-pill { 

  display:inline-flex; align-items:center; gap:6px; 

  background:rgba(196,168,130,0.18); border:0.5px solid rgba(196,168,130,0.35); 

  border-radius:20px; padding:5px 12px; margin-bottom:20px; 

} 

.hero-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--sand); } 

.hero-badge-text { font-size:9px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--sand); } 

.hero-right { 

  position: relative; overflow: hidden; 

} 

.hero-right-overlay { 

  position: absolute; inset: 0; 

  background: linear-gradient(to right, rgba(44,84,86,0.55) 0%, transparent 50%); 

  z-index:2; 

} 

.hero-right-illus { 

  position: absolute; inset: 0; 

  background-size: cover; background-position: center top; opacity: 0.7; 

} 

 

.hero-eyebrow { 

  font-size: 10px; 

  font-weight: 500; 

  letter-spacing: 0.24em; 

  text-transform: uppercase; 

  color: var(--sand); 

  margin-bottom: 16px; 

} 

 

.hero-title { 

  font-family: 'Cormorant Garamond', serif; 

  /* font-size: clamp(44px, 5.5vw, 70px);  */
  font-size: clamp(40px,5.5vw,72px); 

  font-weight: 600; 

  color: white; 

  line-height: 1.05; 

  margin-bottom: 20px; 

  letter-spacing: -0.02em; 

} 

 

.hero-body { 

 /*  font-size: 15px;  */
  font-size: 17px; 

  font-style: italic; 

  color: rgba(255,255,255,0.72); 

  /* max-width: 760px; */
	 max-width: 100%; 

  /* margin-bottom: 40px;  */
  margin-bottom: 0px; 

  line-height: 1.7; 

} 

 

/* Stat strip */ 

.hero-stats { 

  background: rgba(44,62,63,0.88); 

  border-top: 0.5px solid rgba(200,226,226,0.2); 

  backdrop-filter: blur(4px); 

  display: flex; 

  padding: 20px 40px; 

} 

@media(max-width:800px){ .hero-stats{ padding: 16px 20px; } } 

 

.hero-stat { flex:1; text-align:center; border-right: 0.5px solid rgba(200,226,226,0.2); padding: 0 16px; } 

.hero-stat:last-child { border-right: none; } 

.hero-stat-num { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; color:white; line-height:1; margin-bottom:4px; } 

.hero-stat-label { font-size:9px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.5); } 

 

/* ============================================================ 

   SECTION SHARED 

   ============================================================ */ 

.section-header { text-align:center; margin-bottom:36px; } 

.section-eyebrow { display:inline-block; font-size:9px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--teal); margin-bottom:12px; padding:4px 12px; background:var(--teal-pale); border-radius:2px; } 

.section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(34px,4.5vw,52px); font-weight:600; color:var(--charcoal); line-height:1.15; margin-bottom:14px; letter-spacing:-0.02em; } 

.section-sub { font-size:17px; color:var(--charcoal-lt); max-width:560px; margin:0 auto; line-height:1.7; } 

 

/* ============================================================ 

   BUTTONS 

   ============================================================ */ 

.btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:white; font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; padding:13px 28px; border-radius:4px; border:none; cursor:pointer; transition:background 0.2s, transform 0.15s; } 

.btn-primary:hover { background:var(--teal-dark); transform:translateY(-1px); } 

.btn-outline { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--teal); font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; padding:12px 28px; border-radius:4px; border:1.5px solid var(--teal); cursor:pointer; transition:all 0.2s; } 

.btn-outline:hover { background:var(--teal); color:white; } 

 

/* ============================================================ 

   SERVICES — 4 feature cards 

   ============================================================ */ 

.services { padding: 72px 0; background: var(--warm); } 

 

.services-grid { 

  display: grid; 

  grid-template-columns: repeat(4, 1fr); 

  gap: 14px; 

} 

@media(max-width:900px){ .services-grid{ grid-template-columns:1fr 1fr; } } 

@media(max-width:500px){ .services-grid{ grid-template-columns:1fr; } } 

 

.service-card { border-left: 3px solid var(--teal);  

  background: white; 

  border: 0.5px solid var(--teal-mist); 

  border-radius: 14px; 

  padding: 26px 22px; 

  transition: transform 0.25s, box-shadow 0.25s; 

} 

.service-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(61,125,127,0.11); } 

 

.service-icon { width:46px; height:46px; background:var(--teal-pale); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; } 

.service-icon svg { width:21px; height:21px; stroke:var(--teal); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } 

.service-label { font-size:9px; color:var(--teal); font-weight:500; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:4px; } 

.service-name { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; color:var(--charcoal); margin-bottom:8px; } 

.service-desc { font-size:13px; color:var(--charcoal-lt); line-height:1.65; } 

 

/* ============================================================ 

   HOW IT WORKS — 3 steps with numbers 

   ============================================================ */ 

.how-it-works { padding: 72px 0; background: white; } 

 

.steps-grid { 

  display: grid; 

  grid-template-columns: repeat(3, 1fr); 

  gap: 0; 

  position: relative; 

} 

@media(max-width:700px){ .steps-grid{ grid-template-columns:1fr; } } 

 

/* connector line between steps */ 

.steps-grid::before { 

  content: ''; 

  position: absolute; 

  top: 36px; 

  left: calc(16.66% + 18px); 

  right: calc(16.66% + 18px); 

  height: 1px; 

  background: var(--teal-mist); 

  z-index: 0; 

} 

@media(max-width:700px){ .steps-grid::before{ display:none; } } 

 

.step { 

  position: relative; 

  z-index: 1; 

  padding: 0 28px; 

  text-align: center; 

} 

 

.step-number { 

  width: 72px; height: 72px; 

  border-radius: 50%; 

  background: var(--teal); 

  color: white; 

  font-family: 'Cormorant Garamond', serif; 

  font-size: 28px; 

  font-weight: 600; 

  display: flex; align-items: center; justify-content: center; 

  margin: 0 auto 24px; 

  position: relative; 

  z-index: 1; 

} 

 

.step:nth-child(2) .step-number { background: var(--teal-dark); } 

.step:nth-child(3) .step-number { background: var(--charcoal); } 

 

.step-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--charcoal); margin-bottom:10px; } 

.step-desc { font-size:14px; color:var(--charcoal-lt); line-height:1.7; } 

 

/* ============================================================ 

   COMMON QUESTIONS — 2-col layout 

   ============================================================ */ 

.common-questions { padding: 72px 0; background: var(--warm); } 

 

.questions-grid { 

  display: grid; 

  grid-template-columns: 1fr 1.1fr; 

  gap: 64px; 

  align-items: start; 

} 

@media(max-width:800px){ .questions-grid{ grid-template-columns:1fr; gap:40px; } } 

 

.questions-left .section-header { text-align:left; } 

.questions-left .section-eyebrow { display:inline-block; } 

 

.questions-illustration { 

  width: 100%; 

  border-radius: 16px; 

  overflow: hidden; 

  background: var(--teal-pale); 

  min-height: 280px; 

  display: flex; 

  align-items: center; 

  justify-content: center; 

  position: relative; 

} 

 

/* Illustrated graphic — recruitment scene */ 

.recruit-scene { width: 100%; padding: 32px; } 

 

.questions-body { font-size:15px; color:var(--charcoal-lt); line-height:1.75; margin-bottom:20px; } 

.questions-sub-label { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--teal); margin-bottom:12px; } 

.questions-detail { font-size:14px; color:var(--charcoal-lt); line-height:1.7; margin-bottom:28px; } 

 

/* ============================================================ 

   WHY CHOOSE — dark teal stats block 

   ============================================================ */ 

.why-choose { padding: 72px 0; background: var(--teal-dark); position:relative; overflow:hidden; } 

 

.why-choose::before { 

  content: ''; 

  position: absolute; 

  top: -80px; right: -80px; 

  width: 360px; height: 360px; 

  border-radius: 50%; 

  background: rgba(255,255,255,0.03); 

} 

 

.why-header { text-align:left; margin-bottom:48px; } 

.why-header .section-title { color:white; max-width:480px; } 

.why-header .section-eyebrow { background:rgba(255,255,255,0.1); color:var(--teal-mist); } 

.why-header .section-sub { color:rgba(255,255,255,0.6); text-align:left; margin:0; } 

 

.why-grid { 

  display: grid; 

  grid-template-columns: repeat(4, 1fr); 

  gap: 2px; 

} 

@media(max-width:800px){ .why-grid{ grid-template-columns:1fr 1fr; } } 

 

.why-stat { 

  background: rgba(255,255,255,0.06); 

  border: 0.5px solid rgba(200,226,226,0.12); 

  padding: 28px 24px; 

  text-align: center; 

} 

.why-stat:first-child { border-radius: 12px 0 0 12px; } 

.why-stat:last-child  { border-radius: 0 12px 12px 0; } 

@media(max-width:800px){ 

  .why-stat:first-child { border-radius:12px 0 0 0; } 

  .why-stat:nth-child(2){ border-radius:0 12px 0 0; } 

  .why-stat:nth-child(3){ border-radius:0 0 0 12px; } 

  .why-stat:last-child  { border-radius:0 0 12px 0; } 

} 

 

.why-stat-num { font-family:'Cormorant Garamond',serif; font-size:48px; font-weight:600; color:white; line-height:1; margin-bottom:6px; } 

.why-stat-label { font-size:9px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:8px; } 

.why-stat-desc { font-size:12px; color:rgba(255,255,255,0.45); line-height:1.55; } 

 

/* ============================================================ 

   TESTIMONIALS 

   ============================================================ */ 

.testimonials { padding: 72px 0; background: white; } 

 

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

@media(max-width:800px){ .testimonials-grid{ grid-template-columns:1fr; } } 

 

.testimonial-card { 

  background: var(--warm); 

  border: 0.5px solid var(--teal-mist); 

  border-radius: 12px; 

  padding: 20px 22px; 

  position: relative; 

  display: flex; 

  flex-direction: column; 

  gap: 10px; 

} 

 

/* ============================================================ 

   FAQ 

   ============================================================ */ 

.faq-section { padding: 72px 0; background: var(--warm); } 

.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:860px; margin:0 auto; } 

@media(max-width:700px){ .faq-grid{ grid-template-columns:1fr; } } 

 

.faq-item { border:0.5px solid var(--teal-mist); border-radius:10px; background:white; overflow:hidden; } 

.faq-question { width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; color:var(--charcoal); text-align:left; } 

.faq-plus { flex-shrink:0; width:22px; height:22px; border:1.5px solid var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--teal); font-size:16px; line-height:1; transition:transform 0.2s, background 0.2s; } 

.faq-item.open .faq-plus { transform:rotate(45deg); background:var(--teal); color:white; } 

.faq-answer { display:none; padding:0 20px 18px; font-size:13px; color:var(--charcoal-lt); line-height:1.7; } 

.faq-item.open .faq-answer { display:block; } 

 

/* ============================================================ 

   CONTACT 

   ============================================================ */ 

.contact-section { padding: 72px 0; background: white; } 

.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:start; } 

@media(max-width:800px){ .contact-grid{ grid-template-columns:1fr; } } 

 

.contact-info-eyebrow { font-size:9px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; } 

.contact-info-title { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:600; color:var(--charcoal); line-height:1.15; margin-bottom:16px; } 

.contact-info-body { font-size:14px; color:var(--charcoal-lt); line-height:1.7; margin-bottom:32px; } 

 

.contact-detail { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; } 

.contact-detail-icon { width:40px; height:40px; background:var(--teal-pale); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } 

.contact-detail-icon svg { width:18px; height:18px; stroke:var(--teal); fill:none; stroke-width:1.5; } 

.contact-detail-label { font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); margin-bottom:3px; } 

.contact-detail-value { font-size:14px; color:var(--charcoal); } 

 

.contact-form-wrap { background:var(--teal); border-radius:16px; padding:36px; } 

.contact-form-title { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:600; color:white; margin-bottom:24px; } 

.form-group { margin-bottom:16px; } 

.form-label { display:block; font-size:10px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.65); margin-bottom:7px; } 

.form-input, .form-textarea { width:100%; background:rgba(255,255,255,0.12); border:0.5px solid rgba(255,255,255,0.25); border-radius:6px; padding:12px 16px; font-family:'DM Sans',sans-serif; font-size:13px; color:white; outline:none; transition:border-color 0.2s, background 0.2s; } 

.form-input::placeholder, .form-textarea::placeholder { color:rgba(255,255,255,0.35); } 

.form-input:focus, .form-textarea:focus { border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.16); } 

.form-textarea { height:100px; resize:none; } 

.form-submit { width:100%; background:white; color:var(--teal); font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; padding:14px; border:none; border-radius:6px; cursor:pointer; margin-top:8px; transition:background 0.2s, transform 0.15s; } 

.form-submit:hover { background:var(--warm); transform:translateY(-1px); } 



/* ── CANDIDATE SHOWCASE ── */ 

.candidates-section { padding:72px 0; background:var(--warm); } 

.candidates-grid-6 { 

  display: grid; 

  grid-template-columns: repeat(3, 1fr); 

  gap: 20px; 

  margin-bottom: 40px; 

} 

@media(max-width:900px){ .candidates-grid-6{ grid-template-columns:1fr 1fr; } } 

@media(max-width:500px){ .candidates-grid-6{ grid-template-columns:1fr; } } 

.candidate-card-new { 

  background: white; 

  border-radius: 12px; 

  overflow: hidden; 

  border: 0.5px solid var(--teal-mist); 

  transition: transform 0.2s, box-shadow 0.2s; 

} 

.candidate-card-new:hover { 

  transform: translateY(-3px); 

  box-shadow: 0 10px 30px rgba(61,125,127,0.1); 

} 

.candidate-preview-new { 

  padding: 16px 16px 12px; 

  background: #f8f8f8; 

  border-bottom: 0.5px solid var(--teal-mist); 

  position: relative; 

} 

.ami-stamp-new { 

  position: absolute; top: 10px; right: 12px; 

  font-size: 7px; font-weight: 500; letter-spacing: 0.15em; 

  text-transform: uppercase; color: var(--teal); opacity: 0.55; 

} 

.resume-header-new { 

  display: flex; align-items: center; gap: 9px; 

  margin-bottom: 10px; padding-bottom: 9px; 

  border-bottom: 0.5px solid #ddd; 

} 

.resume-avatar-new { 

  width: 28px; height: 28px; border-radius: 50%; 

  background: var(--teal-mist); flex-shrink: 0; 

} 

.resume-name-block-new { flex: 1; } 

.resume-redact-new { height: 6px; border-radius: 2px; background: var(--charcoal); margin-bottom: 3px; } 

.resume-redact-new.rname { width: 65%; } 

.resume-redact-new.rsub  { width: 42%; background: #ccc; height: 4px; } 

.resume-section-label-new { 

  font-size: 6px; font-weight: 600; letter-spacing: 0.18em; 

  text-transform: uppercase; color: var(--teal); margin: 8px 0 4px; 

} 

.resume-entry-new { margin-bottom: 6px; } 

.resume-line-new { 

  height: 4px; border-radius: 2px; background: #d0d0d0; margin-bottom: 3px; 

} 

.resume-line-new.w100 { width: 100%; } 

.resume-line-new.w85  { width: 85%; } 

.resume-line-new.w70  { width: 70%; } 

.resume-line-new.w55  { width: 55%; } 

.resume-redacted-block-new { 

  height: 4px; border-radius: 2px; background: var(--charcoal); 

  margin-bottom: 3px; opacity: 0.8; 

} 

.resume-redacted-block-new.w60 { width: 60%; } 

.resume-redacted-block-new.w45 { width: 45%; } 

.resume-redacted-block-new.w75 { width: 75%; } 

.candidate-footer-new { 

  background: var(--teal-dark); padding: 10px 16px; 

  display: flex; align-items: center; justify-content: space-between; 

} 

.candidate-role-new { 

  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; 

  text-transform: uppercase; color: white; 

} 

.candidates-cta-new { text-align: center; margin-top: 40px; } 

 

 

/* ── DIRECT HIRE ELEVATION ── */ 

 

/* Section transition diagonals */ 

.section-slash-top { 

  height:60px; background:var(--warm); 

  clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%); 

  margin-bottom:-30px; position:relative; z-index:1; 

} 

.section-slash-bottom { 

  height:60px; background:var(--teal-dark); 

  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); 

  margin-top:-30px; position:relative; z-index:1; 

} 

 

/* Service cards — elevated border animation */ 

.service-card { 

  transition: transform 0.3s, box-shadow 0.3s; 

  position: relative; overflow: hidden; 

} 

.service-card::after { 

  content: ''; 

  position: absolute; bottom: 0; left: 0; right: 0; height: 2px; 

  background: linear-gradient(to right, var(--teal), var(--sand)); 

  transform: scaleX(0); transform-origin: left; 

  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); 

} 

.service-card:hover::after { transform: scaleX(1); } 

 

/* Resume cards — glowing hover */ 

.candidate-card-new { 

  transition: transform 0.3s, box-shadow 0.3s; 

} 

.candidate-card-new:hover { 

  transform: translateY(-6px); 

  box-shadow: 0 16px 48px rgba(61,125,127,0.15); 

} 

 

/* Why grid — number pulse */ 

.why-stat-num { 

  background: linear-gradient(135deg, var(--charcoal), var(--teal-dark)); 

  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 

  background-clip: text; 

} 

 

/* Section eyebrow pill */ 

.section-eyebrow { 

  display: inline-flex; align-items: center; gap: 8px; 

} 

.section-eyebrow::before { 

  content: ''; 

  display: inline-block; width: 20px; height: 1px; 

  background: var(--teal); 

} 

 

/* Step numbers — elevated */ 

.step-number { 

  background: linear-gradient(135deg, var(--teal-dark), var(--teal)); 

  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 

  background-clip: text; 

} 

 

/* Animated accent in hero beyond dots */ 

@keyframes rotateOrb { 

  from { transform: rotate(0deg); } 

  to   { transform: rotate(360deg); } 

} 

.hero-left .hero-spin-ring { 

  position: absolute; 

  width: 500px; height: 500px; 

  top: 50%; left: 50%; 

  transform: translate(-50%, -50%); 

  border: 0.5px solid rgba(196,168,130,0.06); 

  border-radius: 50%; 

  animation: rotateOrb 30s linear infinite; 

  pointer-events: none; z-index: 0; 

} 

.hero-left .hero-spin-ring-2 { 

  width: 300px; height: 300px; 

  animation: rotateOrb 20s linear infinite reverse; 

} 

 

/* FAQ elevated */ 

.faq-question { border-radius: 0; } 

.faq-item:first-child { border-top: 0.5px solid var(--teal-mist); } 

 

/* Testimonial quote decoration */ 

.testimonial-card { position: relative; overflow: hidden; } 

.testimonial-card::before { 

  content: '"'; 

  position: absolute; top: 4px; left: 18px; 

  font-family: 'Cormorant Garamond', serif; 

  font-size: 72px; font-weight: 300; 

  color: rgba(61,125,127,0.08); line-height: 1; 

  pointer-events: none; 

} 

 

/* Scroll reveal */ 

.scroll-reveal { 

  opacity: 0; transform: translateY(24px); 

  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); 

} 

.scroll-reveal.in { opacity: 1; transform: translateY(0); } 

 

 

/* ── CLIENT LOGOS SECTION ── */ 

.client-logos-section { 

  padding: 72px 0; 

  background: var(--warm); 

} 

.logos-grid { 

  display: grid; 

  grid-template-columns: repeat(5, 1fr); 

  gap: 2px; 

  margin-top: 48px; 

  background: var(--teal-mist); 

  border: 0.5px solid var(--teal-mist); 

} 

@media(max-width: 860px) { .logos-grid { grid-template-columns: repeat(3, 1fr); } } 

@media(max-width: 540px) { .logos-grid { grid-template-columns: repeat(2, 1fr); } } 

 

.logo-cell { 

  background: white; 

  padding: 32px 24px; 

  display: flex; 

  align-items: center; 

  justify-content: center; 

  min-height: 100px; 

  transition: background 0.2s; 

} 

.logo-cell:hover { background: var(--warm); } 

 

.logo-placeholder { 

  text-align: center; 

} 

.logo-placeholder-icon { 

  width: 36px; height: 36px; 

  background: linear-gradient(135deg, var(--teal-pale), var(--teal-mist)); 

  border-radius: 8px; 

  margin: 0 auto 8px; 

  display: flex; align-items: center; justify-content: center; 

} 

.logo-placeholder-icon svg { 

  width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 1.5; 

} 

.logo-placeholder-name { 

  font-family: 'Cormorant Garamond', serif; 

  font-size: 13px; font-weight: 500; 

  color: var(--charcoal-lt); 

  letter-spacing: 0.04em; 

  line-height: 1.3; 

} 


/* Metrics Section */
.metrics-section {
  background: #c4a882;
  padding: 30px 0;
  border-bottom: 1px solid #b5996e;
}

/* Wrapper */
.metrics-wrapper {
  display: flex;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}

/* Each Item */
.metric-item {
  flex: 1;
  min-width: 150px;
  text-align: center;
  padding: 8px 28px;
}

/* Border between items */
.metric-border {
  border-right: 0.5px solid rgba(44,62,63,0.22);
}

/* Number */
.metric-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 600;
  color: #2c3e3f;
  line-height: 1;
}

/* Title */
.metric-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2c3e3f;
  opacity: 0.6;
  margin-top: 6px;
}

/* Section */
.ami-difference {
  background: var(--teal-pale);
  border-top: 0.5px solid var(--teal-mist);
  border-bottom: 0.5px solid var(--teal-mist);
  padding: 40px 0;
  text-align: center;
}

/* Wrapper */
.ami-diff-wrapper {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Icon */
.ami-diff-icon {
  flex: 0 0 auto;
}

/* Content */
.ami-diff-content {
  flex: 1;
  min-width: 240px;
  text-align: left;
}

/* Eyebrow */
.ami-diff-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 8px;
}

/* Heading */
.ami-diff-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.2;
}

/* CTA */
.ami-diff-cta {
  flex: 0 0 auto;
}

.logos-note {
  text-align: center;
  font-size: 12px;
  color: var(--charcoal-lt);
  margin-top: 20px;
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .ami-diff-content {
    text-align: center;
  }
}