/* ============================================================
   The New Par Consulting — styles.css
   "Sunroom — Slate": flat, airy, editorial. Hanken Grotesk display,
   Inter body/UI, cool slate/teal accents, hairline rules for
   structure instead of glass, blur, or shadow.
   ============================================================ */

:root{
  --paper:#F1F3F1;
  --surface:#FFFFFF;
  --ink:#1F262A;
  --text:#222A2C;
  --text-muted:#49565A;
  --text-faint:#8E9A98;

  --slate:#5C7C8C;
  --slate-deep:#486777;
  --teal:#5E8F80;

  --rule: rgba(31,38,42,.14);
  --rule-strong: rgba(31,38,42,.26);

  --radius-sm:3px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--text);
  font-family:'Inter',Helvetica,Arial,sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;transition:color .2s ease;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea{font-family:inherit;font-size:16px;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
.mono{font-family:'Inter',sans-serif;}

:focus-visible{ outline:2px solid var(--slate); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:0ms !important; animation-duration:0ms !important; }
}

/* ---------- Page shell ---------- */
.shell{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
}

/* ---------- Wordmark ---------- */
.wordmark{
  font-family:'Hanken Grotesk',sans-serif;
  line-height:1;
}
.wordmark .w-new{ color:var(--text); font-weight:500; }
.wordmark .w-par{ color:var(--slate); font-weight:800; margin-left:3px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  padding:20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.site-header .wordmark{font-size:18px;}

.nav-links{ display:flex; gap:30px; }

.nav-links a{
  font-weight:500;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal);
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav-links a:hover{ color:var(--slate); border-bottom-color:var(--slate); }

.nav-toggle{
  display:none;
  font:600 11px/1 'Hanken Grotesk',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:8px 0;
  color:var(--text);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  white-space:nowrap;
  border-radius:var(--radius-sm);
  font:600 12px/1 'Inter',sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:15px 26px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{
  color:var(--paper);
  background:var(--slate);
  border:1px solid var(--slate);
}
.btn-primary:hover{ background:var(--slate-deep); border-color:var(--slate-deep); }

.btn-outline{
  color:var(--text);
  background:transparent;
  border:1px solid var(--rule-strong);
}
.btn-outline:hover{ border-color:var(--slate); color:var(--slate); }

.btn-rose{
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--paper);
}
.btn-rose:hover{ background:var(--surface); }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Section scaffolding ---------- */
.section{ margin-top:72px; }

.meta-rail{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-top:24px;
  border-top:1px solid var(--rule);
  flex-wrap:wrap;
}

.meta-rail .rail-num{
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--slate);
  text-transform:uppercase;
}

.meta-rail .rail-note{
  font-size:12px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--text-faint);
  text-transform:uppercase;
}

.section-body{ padding:36px 0 0; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:64px 0 56px;
}

.hero-kicker{
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--teal);
}

.hero-headline{
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:800;
  font-size:clamp(38px,6vw,64px);
  line-height:1.1;
  letter-spacing:-.01em;
  max-width:780px;
  margin-top:20px;
}

.hero-headline .accent{
  position:relative;
  display:inline-block;
  color:var(--slate);
}

.hero-headline .accent svg{
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
}

.hero-tagline{
  font-weight:400;
  font-size:clamp(17px,2vw,19px);
  line-height:1.65;
  color:var(--text-muted);
  max-width:540px;
  margin-top:28px;
}

.hero .cta-row{ margin-top:36px; }

/* ---------- Services ---------- */
.services-grid{
  display:grid;
  grid-template-columns:1fr;
}

.service-card{
  padding:28px 0;
  border-top:1px solid var(--rule);
}
.service-card:first-child{ border-top:none; padding-top:0; }

@media (min-width:820px){
  .services-grid{ grid-template-columns:repeat(3,1fr); }
  .service-card{ padding:0 36px; border-top:none; }
  .service-card:first-child{ padding-left:0; }
  .service-card{ border-left:1px solid var(--rule); }
  .service-card:first-child{ border-left:none; }
}

.service-card .num{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:13px;
  font-weight:800;
  color:var(--teal);
  letter-spacing:.02em;
}

.service-card h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:700;
  font-size:21px;
  letter-spacing:-.01em;
  margin-top:14px;
  line-height:1.25;
}

.service-card p{
  margin-top:14px;
  font-size:15px;
  color:var(--text-muted);
  line-height:1.6;
}

.service-card .note{
  margin-top:12px;
  font-size:13px;
  color:var(--text-faint);
  line-height:1.5;
}

/* ---------- Callout (inverted panel) ---------- */
.callout{
  margin-top:40px;
  background:var(--ink);
  color:var(--paper);
  padding:40px 32px;
}

.callout-inner{
  display:grid;
  gap:32px;
  grid-template-columns:1fr;
}

@media (min-width:820px){
  .callout-inner{ grid-template-columns:1.3fr 1fr; align-items:start; }
}

.callout .eyebrow{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--teal);
  text-transform:uppercase;
}

.callout h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:800;
  font-size:clamp(26px,4vw,36px);
  letter-spacing:-.01em;
  margin-top:12px;
  line-height:1.12;
}

.callout p{
  margin-top:16px;
  font-size:16px;
  line-height:1.6;
  color:rgba(241,243,241,.72);
  max-width:520px;
}

.callout .btn-rose{ margin-top:24px; }

.callout-features{ border-top:1px solid rgba(241,243,241,.18); }

.callout-features li{
  font-size:13px;
  letter-spacing:.02em;
  color:rgba(241,243,241,.82);
  padding:14px 0;
  border-bottom:1px solid rgba(241,243,241,.18);
}

/* ---------- Selected Work ---------- */
.work-grid{
  display:grid;
  grid-template-columns:1fr;
}

.work-card{
  padding:28px 0;
  border-top:1px solid var(--rule);
}
.work-card:first-child{ border-top:none; padding-top:0; }

@media (min-width:820px){
  .work-grid{ grid-template-columns:repeat(3,1fr); }
  .work-card{ padding:0 36px; border-top:none; border-left:1px solid var(--rule); }
  .work-card:first-child{ padding-left:0; border-left:none; }
}

.work-card .num{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:13px;
  font-weight:800;
  color:var(--teal);
  letter-spacing:.02em;
}

.work-card h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:-.01em;
  line-height:1.2;
  margin-top:14px;
}

.work-card h3 a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--rule-strong);
  text-underline-offset:4px;
}
.work-card h3 a:hover{ color:var(--slate); text-decoration-color:currentColor; }

.work-scope{ margin-top:16px; }

.work-scope li{
  font-size:12px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--text-faint);
  line-height:1.9;
}

/* ---------- Pricing ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width:820px){
  .pricing-grid{ grid-template-columns:repeat(3,1fr); }
}

.pricing-card{
  border:1px solid var(--rule);
  padding:28px 24px 32px;
}

.pricing-card h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:700;
  font-size:21px;
  letter-spacing:-.01em;
  line-height:1.2;
}

.pricing-price{
  margin-top:14px;
  font-size:21px;
  font-weight:600;
  letter-spacing:0;
  color:var(--slate);
}

.pricing-features{
  margin-top:14px;
  font-size:13px;
  letter-spacing:.01em;
  line-height:1.7;
  color:var(--text-muted);
}

.pricing-note{
  margin-top:12px;
  font-size:11px;
  letter-spacing:.02em;
  color:var(--text-faint);
}

.pricing-card--featured{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.pricing-card--featured h3{ color:var(--paper); }
.pricing-card--featured .pricing-price{ color:var(--teal); }
.pricing-card--featured .pricing-features{ color:rgba(241,243,241,.82); }
.pricing-card--featured .pricing-note{ color:rgba(241,243,241,.52); }

.pricing-card--featured .pricing-badge{
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--teal);
}

.pricing-card--featured h3{ margin-top:10px; }

.pricing-footnote{
  margin-top:28px;
  font-size:15px;
  color:var(--text-muted);
  max-width:560px;
}

/* ---------- Contact ---------- */
.contact-layout{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}

@media (min-width:900px){
  .contact-layout{ grid-template-columns:.8fr 1.2fr; }
}

.contact-intro{
  border:1px solid var(--rule);
  padding:28px 24px 32px;
}

.contact-intro h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:800;
  font-size:clamp(24px,3.2vw,30px);
  letter-spacing:-.01em;
  line-height:1.15;
}

.contact-intro p{
  margin-top:16px;
  font-size:16px;
  line-height:1.6;
  color:var(--text-muted);
  max-width:420px;
}

.contact-intro .contact-detail{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--rule);
}

.contact-intro .contact-detail p{ margin-top:6px; font-size:14px; }
.contact-intro .contact-detail a:hover{ color:var(--slate); }

.contact-form-wrap{
  border:1px solid var(--rule);
  padding:28px 24px 32px;
}

.field{ margin-bottom:20px; }

.field-legend{
  display:block;
  font-weight:600;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:8px;
}

.field label{
  display:block;
  font-weight:600;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:8px;
}

.field input[type="text"],
.field input[type="email"],
.field textarea{
  width:100%;
  border-radius:var(--radius-sm);
  border:1px solid var(--rule-strong);
  background:var(--surface);
  color:var(--text);
  padding:12px 14px;
  font-size:15px;
  transition:border-color .2s ease;
}

.field input[type="text"]:hover,
.field input[type="email"]:hover,
.field textarea:hover{ border-color:var(--slate); }

.field input[type="text"]::placeholder,
.field input[type="email"]::placeholder,
.field textarea::placeholder{ color:var(--text-faint); }

.field textarea{ resize:vertical; min-height:120px; }

.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field textarea:focus{
  outline:2px solid var(--slate);
  outline-offset:2px;
}

.checkbox-list{ display:flex; flex-direction:column; gap:10px; }

.checkbox-list .option{ display:flex; align-items:center; gap:10px; }

.checkbox-list input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  margin:0;
  border-radius:3px;
  border:1px solid var(--rule-strong);
  background:var(--surface);
  flex-shrink:0;
  position:relative;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}

.checkbox-list input[type="checkbox"]:hover{
  border-color:var(--slate);
}

.checkbox-list input[type="checkbox"]:checked{
  background:var(--slate);
  border-color:var(--slate);
}

.checkbox-list input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid var(--paper);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.checkbox-list input[type="checkbox"]:focus-visible{
  outline:2px solid var(--slate);
  outline-offset:2px;
}

.checkbox-list label{
  font-weight:400;
  font-size:15px;
  text-transform:none;
  letter-spacing:0;
  margin-bottom:0;
  color:var(--text-muted);
  cursor:pointer;
}

.form-note{ font-size:12px; color:var(--text-faint); margin-top:-8px; margin-bottom:22px; }

.form-status{
  padding:22px 20px;
  border:1px solid var(--rule-strong);
  background:var(--surface);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  display:none;
  margin-bottom:20px;
}
.form-status.is-visible{ display:block; }
#contact-form.is-hidden{ display:none; }

/* ---------- Footer ---------- */
.site-footer{
  margin:88px 0 28px;
  border-top:1px solid var(--rule);
  padding:32px 0 0;
}

.footer-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:24px;
}

.footer-tagline{ margin-top:12px; font-size:15px; color:var(--text-muted); max-width:360px; }

.footer-contact{
  font-size:13px;
  color:var(--text-faint);
}
.footer-contact a:hover{ color:var(--slate); }
.footer-contact div + div{ margin-top:8px; }

.footer-legal{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-faint);
}

/* ---------- Responsive: nav ---------- */
@media (max-width:640px){
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    box-shadow:0 16px 32px -12px rgba(31,38,42,.22);
    flex-direction:column;
    gap:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ padding:16px 0; border-top:1px solid var(--rule); }
  .nav-toggle{ display:block; }
}