@import url("./styles.css");

:root{
  --contact-surface:color-mix(in srgb,var(--card-bg) 88%,var(--pri) 12%);
  --contact-surface-soft:color-mix(in srgb,var(--card-bg) 92%,transparent);
  --contact-bdr-strong:color-mix(in srgb,var(--pri) 28%,var(--bdr));
}

.contact-main{position:relative;z-index:2}
.contact-main section{padding:clamp(70px,8vw,118px) 0}
.contact-main section:first-of-type{padding-top:clamp(96px,11vw,152px)}

.hero-shell{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(18px,2.2vw,28px);
  align-items:start;
}

.intake-panel,
.pathway-shell,
.highlights-grid,
.faq-shell{
  border:1px solid var(--contact-bdr-strong);
  border-radius:30px;
  background:linear-gradient(160deg,var(--contact-surface),var(--contact-surface-soft));
  box-shadow:var(--sh);
}

.contact-hero{padding-bottom:clamp(36px,4vw,56px)!important}
.hero-panel{padding:0;max-width:72ch}
.hero-title{margin:16px 0;font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:.96;letter-spacing:-.04em;color:var(--head);max-width:12ch}
.hero-copy{max-width:58ch;color:var(--muted)}
.hero-stats{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hero-stat{padding:14px;border-radius:16px;border:1px solid var(--contact-bdr-strong);background:color-mix(in srgb,var(--surf) 75%,transparent);backdrop-filter:blur(8px)}
.hero-stat strong{display:block;font:700 1.22rem/1 "Poppins",sans-serif;color:var(--head)}
.hero-stat span{display:block;margin-top:7px;font-size:.8rem;color:var(--muted);line-height:1.5}
.hero-kicker{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.hero-kicker span{font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--contact-bdr-strong);color:var(--pri);background:var(--pri-lo)}

.contact-intake{
  margin-top:clamp(6px,1vw,14px);
  background:linear-gradient(160deg,var(--contact-surface),var(--contact-surface-soft));
  border-top:1px solid var(--contact-bdr-strong);
  border-bottom:1px solid var(--contact-bdr-strong);
}
.contact-intake .wrap{padding-top:clamp(34px,4vw,52px);padding-bottom:clamp(34px,4vw,52px)}
.intake-panel{padding:clamp(22px,3.2vw,34px);max-width:900px}
.intake-head h2{font-size:clamp(1.3rem,2.4vw,1.85rem);color:var(--head)}
.intake-head p{margin-top:8px;color:var(--muted);font-size:.92rem;line-height:1.65}
.intake-signals{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.intake-signals span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font:600 .72rem/1 "Inter",sans-serif;color:var(--pri);background:var(--pri-lo);border:1px solid var(--contact-bdr-strong)}
.intake-signals i{font-size:13px}

.contact-form{display:grid;gap:14px;margin-top:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:7px}
.field label{font-size:.81rem;font-weight:600}
.field input,.field select,.field textarea{
  border:1px solid var(--bdr);
  border-radius:13px;
  padding:12px 13px;
  background:var(--bg2);
  color:var(--text);
  font:500 .92rem/1.45 "Inter",sans-serif;
  transition:.2s border-color,.2s box-shadow,.2s background;
}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--muted) 74%,transparent)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pri-bdr2);box-shadow:0 0 0 4px var(--pri-lo)}
.field textarea{min-height:136px;resize:vertical}
.field-consent{grid-template-columns:auto 1fr;align-items:start;gap:10px;border:1px solid var(--bdr);border-radius:14px;padding:11px;background:color-mix(in srgb,var(--surf) 45%,transparent)}
.field-consent input[type="checkbox"]{accent-color:var(--pri);width:16px;height:16px;margin-top:4px}
.field-consent label{font-weight:500}
.form-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.form-note{font-size:.8rem;color:var(--muted);max-width:46ch}

.section-title-md{font-size:clamp(1.6rem,4vw,2.6rem)}
.section-title-sm{font-size:clamp(1.5rem,3.6vw,2.3rem)}
.channels-grid{margin-top:22px}
.channel-wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.channel{border:1px solid var(--bdr);border-radius:18px;padding:18px;background:var(--card-bg);display:flex;flex-direction:column;gap:10px;min-height:206px;position:relative;overflow:hidden;transition:transform .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease)}
.channel:hover{transform:translateY(-4px);border-color:var(--contact-bdr-strong);box-shadow:var(--sh)}
.channel::before{content:"";position:absolute;inset:-40% -30% auto auto;width:220px;aspect-ratio:1;border-radius:50%;opacity:.42;background:radial-gradient(circle,var(--pri-lo2) 0%,transparent 68%);pointer-events:none}
.channel .chip{display:inline-flex;width:max-content;padding:4px 9px;border-radius:999px;font-size:.67rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pri);border:1px solid color-mix(in srgb,var(--pri) 30%,var(--bdr));background:var(--pri-lo)}
.channel h3{font-size:1.04rem;color:var(--head)}
.channel p{font-size:.88rem;color:var(--muted);line-height:1.62;flex:1}
.channel a{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--pri)}
.channel a i{font-size:14px}

.pathway-shell{padding:clamp(24px,3.8vw,40px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px}
.pathway-aside h2{color:var(--head);font-size:clamp(1.45rem,3.3vw,2.4rem);letter-spacing:-.02em}
.pathway-aside p{margin-top:14px;color:var(--muted);max-width:50ch}
.pathway-matrix{display:grid;gap:12px}
.path-step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1px solid var(--bdr);background:var(--card-bg)}
.step-dot{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font:700 .84rem/1 "DM Mono",monospace;color:var(--pri);background:var(--pri-lo);border:1px solid color-mix(in srgb,var(--pri) 30%,var(--bdr))}
.path-step b{display:block;color:var(--head);font-size:.95rem}
.path-step span{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}
.pace{font:600 .76rem/1 "DM Mono",monospace;color:var(--pri)}

.highlights-grid{padding:clamp(24px,3.8vw,40px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px}
.signal-board{border:1px solid var(--bdr);border-radius:18px;padding:20px;background:var(--card-bg)}
.signal-board ul{margin-top:16px;display:grid;gap:11px}
.signal-board li{display:flex;align-items:flex-start;gap:9px}
.signal-board li i{margin-top:2px;color:var(--pri)}
.signal-board li span{font-size:.9rem;color:var(--muted)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.story{border:1px solid var(--bdr);border-radius:16px;padding:17px;background:var(--card-bg)}
.story h3{font-size:1rem;color:var(--head)}
.story p{margin-top:7px;font-size:.88rem;color:var(--muted);line-height:1.58}

.faq-shell{padding:clamp(24px,3.8vw,40px)}
.faq-list{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.faq-item{border:1px solid var(--bdr);border-radius:16px;padding:16px;background:var(--card-bg)}
.faq-item h3{font-size:.97rem;color:var(--head)}
.faq-item p{margin-top:8px;font-size:.88rem;color:var(--muted);line-height:1.6}

.mt-16{margin-top:16px}

@media (max-width:1120px){
  .hero-shell,.pathway-shell,.highlights-grid{grid-template-columns:1fr}
  .channel-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .form-row,.hero-stats,.story-grid,.channel-wrap,.faq-list{grid-template-columns:1fr}
  .path-step{grid-template-columns:auto 1fr}
  .pace{grid-column:2}
}

/* --- Contact page bento refinements --- */
.channel-wrap{grid-template-columns:1.1fr .9fr 1fr 1fr;grid-auto-rows:minmax(190px,auto)}
.channel{border-radius:22px;background:var(--card-bg);padding:20px 18px 18px}
.channel::after{display:none}
.channel h3{margin-top:8px}
.channel-1{grid-column:span 2;grid-row:span 1}
.channel-2{grid-row:span 2}

.pathway-shell{grid-template-columns:.85fr 1.15fr;background:var(--card-bg)}
.pathway-aside{position:relative;padding-right:18px}
.pathway-aside h2{writing-mode:vertical-rl;transform:rotate(180deg);max-height:360px;line-height:1.1;letter-spacing:-.03em}
.pathway-aside p{margin-top:0;padding-left:14px;border-left:1px solid var(--bdr)}
.path-step{background:var(--card-bg);border-radius:18px}

.highlights-grid{grid-template-columns:1.15fr .85fr;gap:18px}
.signal-board{position:relative;overflow:hidden;background:var(--card-bg)}
.signal-board::after{display:none}
.signal-lines{margin-top:16px;display:grid;gap:12px}
.signal-line{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px;border-radius:14px;border:1px solid var(--bdr);background:color-mix(in srgb,var(--surf) 68%,transparent)}
.signal-line i{color:var(--pri);margin-top:2px}
.signal-line span{font-size:.9rem;color:var(--muted)}
.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(120px,auto)}
.story:first-child{grid-column:span 2;background:var(--card-bg)}

.faq-list{grid-template-columns:1.2fr .8fr 1fr}
.faq-item{background:var(--card-bg);min-height:180px}
.faq-item:first-child{grid-row:span 2;display:grid;align-content:start}

@media (max-width:1120px){
  .channel-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .channel-1,.channel-2{grid-column:span 1;grid-row:span 1}
  .pathway-aside h2{writing-mode:horizontal-tb;transform:none;max-height:none}
}
@media (max-width:760px){
  .faq-list,.story-grid,.channel-wrap{grid-template-columns:1fr}
  .faq-item:first-child{grid-row:span 1}
}