/* ============================================================
   CONTACT PAGE — page-specific styles
   Inherits global vars + utilities from styles.css
   ============================================================ */

/* ============================================================
   01  HERO
   ============================================================ */
.contact-hero{
  background:var(--ink); color:var(--cream);
  padding:160px 0 96px;
  position:relative; overflow:hidden;
}
.contact-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 78% 20%, rgba(179,92,58,.10), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(217,183,138,.05), transparent 70%);
  pointer-events:none;
}
.contact-hero .wrap{ position:relative; z-index:1; }
.contact-hero .hero-photo{ position:absolute; inset:0; z-index:0; }
.contact-hero .hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 60%; display:block;
  filter: sepia(0.25) saturate(0.85) contrast(1.04) brightness(0.7);
}
.contact-hero .hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.4) 100%),
    linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,0) 55%);
}
.contact-hero .eyebrow{ color:var(--sand); }
.contact-hero .eyebrow .dot{ background:var(--accent); }
.contact-hero h1{ margin-top:24px; color:var(--cream); max-width:1000px; }
.contact-hero h1 em{ color:var(--accent-2); }
.contact-hero .lede{
  margin-top:24px; max-width:680px;
  color:rgba(244,238,221,.78);
  font-size:23px; line-height:1.5;
}
.contact-hero .meta{
  margin-top:48px; font-weight:700;
  display:flex; gap:32px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sand); opacity:.85;
}
.contact-hero .meta .accent{ color:var(--accent); }

/* ============================================================
   02  CHANNELS — three direct lines
   ============================================================ */
.channels{
  background:var(--paper); color:var(--ink);
  padding:120px 0;
}
.channels .head{
  max-width:1100px; margin:0 auto 64px;
  display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:end;
}
.channels .sidehead{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--sage);
}
.channels .sidehead .num{ color:var(--accent); margin-right:8px; }
.channels .sidehead .diamond,
.contact-form .sidehead .diamond,
.visit .sidehead .diamond{
  display:inline-block; width:5px; height:5px;
  background:var(--accent); transform:rotate(45deg);
  margin-right:10px; vertical-align:middle; position:relative; top:-1px;
}
.channels h2{ margin:0; font-size:clamp(22px, 2.4vw, 34px); text-wrap:balance; max-width:none; }
.channels h2 em{ color:var(--accent); }

.channels .grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--rule);
  background:#fff;
}
.channel{
  padding:44px 36px;
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; gap:14px;
  /* explicit row structure so CTAs line up across columns */
  grid-template-rows:auto auto 1fr auto auto auto;
}
.channel:last-child{ border-right:none; }
.channel .lab{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent);
}
.channel h3{
  font-family:var(--display); font-weight:400;
  font-size:28px; line-height:1.15; color:var(--ink);
  margin:0; letter-spacing:-.01em; text-wrap:balance;
  min-height:calc(2 * 1.15em);
}
.channel h3 em{ color:var(--accent); font-style:italic; }
.channel p{
  font-family:var(--sans); font-size:14.5px; line-height:1.6;
  color:var(--ink); margin:0;
}
.channel .addr-block{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  line-height:1.7; color:var(--sage); margin-top:auto; padding-top:18px;
  text-transform:none;
}
.channel .addr-block a{
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(179,92,58,.32);
  padding-bottom:1px;
}
.channel .addr-block a:hover{ border-bottom-color:var(--accent); }
.channel .turn{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage); margin-top:8px;
  min-height:3.4em; line-height:1.6;
}
.channel .channel-cta{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  padding:14px 18px; min-height:58px; box-sizing:border-box;
  background:var(--accent); color:var(--cream);
  border:1px solid var(--accent);
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
  text-align:center; line-height:1.25;
}
.channel .channel-cta:hover{
  background:var(--terracotta-2); border-color:var(--terracotta-2);
}
.channel .addr-block{ margin-top:auto; }
.channel .addr-block + .channel-cta{ margin-top:18px; }

@media (max-width:880px){
  .channels{ padding:72px 0; }
  .contact-hero{ padding:104px 0 64px; }
  .contact-hero .lede{ font-size:18px; }
  .channels .head{ grid-template-columns:1fr; gap:24px; }
  .channels .grid{ grid-template-columns:1fr; }
  .channel{ border-right:none; border-bottom:1px solid var(--rule); }
  .channel:last-child{ border-bottom:none; }
}

/* ============================================================
   03  CONTACT FORM
   ============================================================ */
.contact-form{
  background:var(--cream); color:var(--ink);
  padding:120px 0;
}
.contact-form .inner{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.3fr; gap:80px;
  align-items:start;
}
.contact-form .sidehead{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--sage); margin-bottom:24px;
}
.contact-form .sidehead .num{ color:var(--accent); margin-right:8px; }
.contact-form h2{ margin:0 0 24px; }
.contact-form h2 em{ color:var(--accent); }
.contact-form .copy{
  font-family:var(--sans); font-size:15.5px; line-height:1.6;
  color:var(--ink); max-width:380px;
}
.contact-form .reply-time{
  margin-top:32px; padding-top:24px;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage);
  line-height:1.8;
}
.contact-form .reply-time .accent{ color:var(--accent); }

form.cform{
  display:flex; flex-direction:column; gap:22px;
  background:#fff; padding:48px 44px;
  border:1px solid var(--rule);
}
form.cform .row{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
form.cform .field{ display:flex; flex-direction:column; gap:8px; }
form.cform label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage);
}
form.cform input,
form.cform select,
form.cform textarea{
  font-family:var(--sans); font-size:15px;
  background:transparent; color:var(--ink);
  border:none; border-bottom:1px solid var(--rule);
  padding:10px 0; outline:none;
  border-radius:0;
  transition:border-color .15s ease;
}
form.cform textarea{
  resize:vertical; min-height:120px;
  border:1px solid var(--rule); padding:12px 14px;
}
form.cform input:focus,
form.cform select:focus,
form.cform textarea:focus{ border-bottom-color:var(--accent); }
form.cform textarea:focus{ border-color:var(--accent); }
form.cform select{ appearance:none; cursor:pointer; padding-right:24px; }
form.cform .submit-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; margin-top:8px;
}
form.cform .submit-row .privacy{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sage); max-width:260px; line-height:1.6;
}
form.cform button{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  background:var(--accent); color:var(--cream);
  border:1px solid var(--accent);
  padding:16px 28px; cursor:pointer;
  transition:background .15s ease;
}
form.cform button:hover{ background:var(--terracotta-2); border-color:var(--terracotta-2); }

@media (max-width:880px){
  .contact-form{ padding:72px 0; }
  .contact-form .inner{ grid-template-columns:1fr; gap:36px; }
  form.cform{ padding:32px 24px; }
  form.cform .row{ grid-template-columns:1fr; }
  form.cform .submit-row{ flex-direction:column; align-items:stretch; }
}

/* ============================================================
   04  VISIT — campus & directions
   ============================================================ */
.visit{
  background:var(--ink); color:var(--cream);
  padding:120px 0;
}
.visit .inner{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:start;
}
.visit .col{ display:flex; flex-direction:column; gap:18px; }
.visit .sidehead{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--sand);
}
.visit .sidehead .num{ color:var(--accent); margin-right:8px; }
.visit h2{ margin:0; color:var(--cream); }
.visit h2 em{ color:var(--accent-2); }
.visit .addr{
  font-family:var(--display); font-weight:400; font-size:24px;
  line-height:1.4; color:var(--cream);
}
.visit .addr em{ font-style:italic; color:var(--accent-2); }
.visit .lede{
  color:rgba(244,238,221,.78); max-width:480px;
}
.visit .row{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:14px;
}
.visit .row .btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase;
  padding:14px 22px; border:1px solid rgba(244,238,221,.5);
  color:var(--cream); text-decoration:none;
  transition:all .15s ease;
}
.visit .row .btn:hover{ border-color:var(--cream); background:rgba(244,238,221,.06); }
.visit .row .btn-primary{
  background:var(--accent); border-color:var(--accent); color:var(--cream);
}
.visit .row .btn-primary:hover{ background:var(--terracotta-2); border-color:var(--terracotta-2); }

.visit .hours{
  border:1px solid rgba(217,183,138,.22);
  padding:32px;
  display:flex; flex-direction:column; gap:18px;
}
.visit .hours .lab{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--sand);
}
.visit .hours .lab .num{ color:var(--accent); margin-right:8px; }
.visit .hours h3{
  font-family:var(--display); font-weight:400; font-size:24px;
  line-height:1.25; color:var(--cream); margin:0;
}
.visit .hours h3 em{ color:var(--accent-2); font-style:italic; }
.visit .hours .list{
  display:flex; flex-direction:column; gap:12px; margin-top:6px;
}
.visit .hours .list .item{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  border-top:1px solid rgba(217,183,138,.16); padding-top:12px;
  font-family:var(--sans); font-size:14.5px; color:rgba(244,238,221,.85);
}
.visit .hours .list .item:first-child{ border-top:none; padding-top:0; }
.visit .hours .list .item .d{ color:var(--sand); }
.visit .hours .foot{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(217,183,138,.6);
  margin-top:6px; line-height:1.6;
}

@media (max-width:880px){
  .visit{ padding:72px 0; }
  .visit .inner{ grid-template-columns:1fr; gap:36px; }
  .visit .addr{ font-size:20px; }
}

/* ============================================================
   05  FAQ — AEO-friendly
   ============================================================ */
.contact-faq{
  background:var(--paper); color:var(--ink);
  padding:120px 0;
}
/* Barn image and FAQ are both cream — collapse the empty seam (desktop + mobile).
   Scoped to the contact page only via the .contact-faq adjacency. */
.feature-image:has(+ .contact-faq){ padding-bottom:48px; }
.feature-image + .contact-faq{ padding-top:64px; }
@media (max-width:880px){
  .feature-image:has(+ .contact-faq){ padding-bottom:24px; }
  .feature-image + .contact-faq{ padding-top:40px; }
}
.contact-faq .head{
  max-width:760px; margin:0 auto 56px; text-align:center;
}
.contact-faq .head .eyebrow{ justify-content:center; display:inline-flex; }
.contact-faq .head h2{ margin-top:18px; }
.contact-faq .head .lede{ margin-top:14px; color:var(--sage); }
.contact-faq .list{ max-width:880px; margin:0 auto; }
.contact-faq details{
  border-top:1px solid var(--rule);
  padding:24px 0;
}
.contact-faq details:last-child{ border-bottom:1px solid var(--rule); }
.contact-faq summary{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  font-family:var(--display); font-weight:400; font-size:22px;
  line-height:1.3; color:var(--ink); letter-spacing:-.005em;
  text-wrap:balance;
}
.contact-faq summary::-webkit-details-marker{ display:none; }
.contact-faq summary em{ color:var(--accent); font-style:italic; }
.contact-faq summary::after{
  content:"+"; font-family:var(--mono); font-size:22px;
  color:var(--accent); line-height:1; flex-shrink:0;
  transition:transform .2s ease;
}
.contact-faq details[open] summary::after{ content:"−"; }
.contact-faq .answer{
  margin-top:18px; padding-right:48px;
  font-family:var(--sans); font-size:15px; line-height:1.65;
  color:var(--ink);
}
.contact-faq .answer p{ margin:0 0 12px; }
.contact-faq .answer p:last-child{ margin-bottom:0; }
.contact-faq .answer a{
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(179,92,58,.32);
}

/* ============================================================
   06  CTA strip
   ============================================================ */
.contact-cta{
  background:var(--teal-deep); color:var(--cream);
  padding:96px 0; text-align:center;
}
.contact-cta .eyebrow{ justify-content:center; display:inline-flex; color:var(--sand); }
.contact-cta .eyebrow .dot{ background:var(--accent); }
.contact-cta h2{ margin-top:18px; color:var(--cream); max-width:840px; margin-left:auto; margin-right:auto; }
.contact-cta h2 em{ color:var(--accent-2); font-style:italic; }
.contact-cta .row{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px;
}

/* ============================================================
   BUTTONS — reddish fill, gold on hover (contact page)
   ============================================================ */
.btn-primary,
.btn-ghost,
.btn-ghost.on-cream,
.channel .channel-cta,
form.cform button,
.visit .row .btn,
.visit .row .btn-primary{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:var(--cream) !important;
}
.btn-primary:hover,
.btn-ghost:hover,
.btn-ghost.on-cream:hover,
.channel .channel-cta:hover,
form.cform button:hover,
.visit .row .btn:hover,
.visit .row .btn-primary:hover{
  background:var(--accent-2) !important;
  border-color:var(--accent-2) !important;
  color:var(--ink) !important;
}