/* GrassBerry Contacts — implementation of the selected editorial reference, 2026-10-23 */
.contacts-page { overflow: clip; background: var(--paper); }
.contacts-kicker { color: #8c4b32; font-size: 11px; font-weight: 600; letter-spacing: .23em; text-transform: uppercase; }
.contacts-page h2 { font-size: clamp(34px,3.45vw,46px); line-height: 1.08; }
.contacts-top { position: relative; isolation: isolate; min-height: 450px; overflow: hidden; background: #f4f1e8; }
.contacts-top::before { position: absolute; inset: 0; z-index: -2; content: ""; background: url('/assets/img/hero-botanical-background-v2.webp') center 56% / cover no-repeat; }
.contacts-top::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, rgba(251,250,246,.97) 0%, rgba(251,250,246,.89) 39%, rgba(251,250,246,.2) 70%, transparent 100%); }
.contacts-top-shell { position: relative; min-height: 450px; padding-top: 24px; }
.contacts-breadcrumb { display: flex; gap: 11px; align-items: center; color: #5f6b63; font-size: 12px; }
.contacts-breadcrumb a:hover { text-decoration: underline; }
.contacts-top-copy { position: relative; z-index: 2; max-width: 545px; padding-top: 42px; padding-bottom: 34px; }
.contacts-top h1 { margin-top: 13px; font-size: clamp(55px,5.1vw,74px); line-height: .99; letter-spacing: -.045em; }
.contacts-top-lead { max-width: 510px; margin-top: 17px; font-size: 16px; line-height: 1.55; }
.contacts-top-features { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 36px; }
.contacts-top-features > span { display: flex; align-items: center; gap: 9px; color: var(--green); font-size: 12px; line-height: 1.45; }
.contacts-top-features svg { flex: 0 0 auto; color: #219763; }
.contacts-top-product { position: absolute; right: 0; bottom: 0; z-index: 1; width: min(48%,615px); height: 380px; pointer-events: none; }
.contacts-top-product::before { position: absolute; right: 3%; bottom: -3px; left: 7%; height: 29px; border-radius: 50%; background: radial-gradient(ellipse, rgba(48,43,26,.23), rgba(48,43,26,0) 72%); content: ""; }
.contacts-pack { position: absolute; bottom: 0; max-width: none; width: auto; object-fit: contain; filter: drop-shadow(0 8px 7px rgba(45,42,27,.13)); }
.contacts-pack-evergrass { left: 12%; height: 80%; transform: rotate(-1deg); }
.contacts-pack-berry { right: 3%; height: 91%; }
.contacts-methods { padding: 58px 0 58px; }
.contacts-methods h2 { margin-top: 9px; margin-bottom: 26px; }
.contacts-method-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.contacts-method { display: flex; gap: 15px; min-width: 0; min-height: 152px; padding: 21px 19px; background: #f4f4ee; border: 1px solid rgba(18,63,51,.055); }
.contacts-method-icon { flex: 0 0 45px; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; color: #fff; background: #18704a; }
.contacts-method:nth-child(2) .contacts-method-icon { background: #427a55; }
.contacts-method:nth-child(3) .contacts-method-icon { background: #087e47; }
.contacts-method-info { min-width: 0; }
.contacts-method-name { color: var(--green); font-size: 12px; font-weight: 600; }
.contacts-method h3 { margin-top: 5px; color: var(--green); font: 600 clamp(15px,1.35vw,20px)/1.25 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.contacts-method-info > p:not(.contacts-method-name) { margin-top: 8px; color: var(--body); font-size: 12px; line-height: 1.55; }
.contacts-method-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 16px; padding-bottom: 2px; border-bottom: 1px solid var(--green); color: var(--green); font-size: 12px; font-weight: 600; }
.contacts-method-link:hover { border-bottom-width: 2px; }
.contacts-feedback { padding: 46px 0 70px; background: var(--paper); scroll-margin-top: 80px; }
.contacts-feedback-layout { display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1fr); align-items: start; gap: clamp(34px,6vw,92px); }
.contacts-feedback-intro { padding-top: 15px; }
.contacts-feedback h2 { margin-top: 13px; }
.contacts-feedback-description { max-width: 420px; margin-top: 13px; font-size: 15px; line-height: 1.65; }
.contacts-help-list { display: grid; gap: 22px; margin: 36px 0 0; padding: 0; list-style: none; }
.contacts-help-list li { display: flex; align-items: center; gap: 18px; font-size: 14px; line-height: 1.45; color: var(--green); }
.contacts-help-list small { color: var(--body); font-size: 13px; }
.contacts-help-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: #d8ebe0; color: #207f52; }
.contacts-form { display: grid; gap: 13px; min-width: 0; padding: 28px; border: 1px solid #d9e0d9; border-radius: 8px; background: rgba(255,255,255,.83); }
.contacts-fields-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.contacts-form label:not(.consent) { display: grid; gap: 6px; min-width: 0; color: #233f33; font-size: 12px; font-weight: 600; }
.contacts-form input:not([type="checkbox"]), .contacts-form textarea, .contacts-form select { display: block; width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #dce2dd; border-radius: 5px; background: #fff; color: #1b3e30; font: 400 13px/1.45 var(--sans); }
.contacts-form input:not([type="checkbox"]), .contacts-form select { min-height: 45px; }
.contacts-form textarea { min-height: 95px; resize: vertical; }
.contacts-form input:focus-visible, .contacts-form select:focus-visible, .contacts-form textarea:focus-visible { outline: 2px solid #8dac87; outline-offset: 1px; }
.contacts-form .consent { display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 8px; margin: 3px 0 0; color: var(--body); font-size: 12px; line-height: 1.6; font-weight: 400; }
.contacts-form .consent input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--green); }
.contacts-form .consent a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.contacts-form .honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.contacts-submit { display: flex; justify-content: space-between; align-items: center; gap: 22px; min-height: 49px; padding: 0 20px; width: 100%; border: 0; border-radius: 4px; color: #fff; background: #0b4e38; text-align: left; font: 600 13px var(--sans); cursor: pointer; }
.contacts-submit:hover { background: #073b2d; }
.contacts-submit:disabled { cursor: wait; opacity: .55; }
.contacts-submit span { font-size: 19px; font-weight: 400; }
.contacts-form .form-status { margin: 0; color: var(--green); font-size: 12px; }
.contacts-form .form-status:empty { display: none; }
.contacts-address-section { padding: 50px 0 50px; }
.contacts-address-section h2 { margin: 10px 0 23px; }
.contacts-location-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.contacts-location-card { display: flex; gap: 12px; min-width: 0; min-height: 218px; padding: 19px 15px; border: 1px solid #dde4de; border-radius: 7px; background: #fbfbf9; }
.contacts-location-icon { display: grid; place-items: center; flex: 0 0 30px; height: 35px; color: #52aa76; }
.contacts-location-label { margin-bottom: 9px; color: var(--body); font-size: 12px; }
.contacts-location-card h3 { font: 600 16px/1.35 var(--sans); letter-spacing: -.015em; color: var(--green); }
.contacts-location-card div > p:not(.contacts-location-label), .contacts-location-card address { margin-top: 9px; font-size: 12px; line-height: 1.55; font-style: normal; }
.contacts-visit-note { color: var(--green-soft); }
.contacts-map-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 15px; color: var(--green); border-bottom: 1px solid var(--green); font-size: 11px; font-weight: 600; }
.contacts-map { display: flex; flex-direction: column; min-width: 0; min-height: 255px; overflow: hidden; border: 1px solid #dce3dd; border-radius: 7px; background: #f2f4f0; }
.contacts-map-switch { display: flex; flex-wrap: nowrap; gap: 0; border-bottom: 1px solid #dce3dd; }
.contacts-map-switch button { flex: 1 1 50%; min-height: 44px; padding: 8px 6px; border: 0; border-right: 1px solid #dce3dd; color: var(--green); background: #f2f4f0; font: 600 12px/1.4 var(--sans); cursor: pointer; }
.contacts-map-switch button:last-child { border-right: 0; }
.contacts-map-switch button[aria-pressed="true"] { background: #dce8de; box-shadow: inset 0 -2px 0 var(--green); }
.contacts-map-switch button:hover { background: #e8eee9; }
.contacts-map iframe { display: block; flex: 1 1 auto; width: 100%; height: 167px; min-height: 167px; border: 0; }
.contacts-map-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: #f8f9f6; }
.contacts-map-bottom span { max-width: 53%; color: #59695e; font-size: 12px; line-height: 1.35; }
.contacts-map-bottom a { color: var(--green); font-size: 11px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-align: right; }
.contacts-faq { padding: 28px 0 76px; }
.contacts-faq h2 { margin: 10px 0 18px; }
.contacts-faq .faq-list { max-width: none; }
.contacts-faq .faq-list details { border-bottom: 1px solid var(--line); }
.contacts-faq .faq-list summary { min-height: 53px; font-size: 14px; }
.contacts-faq .faq-list p { font-size: 13px; }
.contacts-faq .faq-list p a { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 769px) and (max-width: 1099px) {
 .contacts-top-copy { max-width: 49%; }
 .contacts-top h1 { font-size: clamp(42px, 5vw, 55px); }
 .contacts-top-lead { font-size: 14px; }
 .contacts-top-features { gap: 9px 12px; margin-top: 24px; }
 .contacts-top-features > span { font-size: 11px; }
}
@media (max-width: 1160px) {
 .contacts-top-product { width: 47%; }
 .contacts-pack-evergrass { height: 77%; left: 5%; }
 .contacts-pack-berry { height: 84%; right: 0; }
 .contacts-top-copy { max-width: 500px; }
 .contacts-top-features { gap: 12px; }
 .contacts-method { padding: 20px 13px; gap: 9px; }
 .contacts-method-icon { flex-basis: 38px; width: 38px; height: 38px; }
 .contacts-method h3 { font-size: 15px; }
 .contacts-location-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .contacts-map { grid-column: 1 / -1; min-height: 265px; }
 .contacts-map iframe { min-height: 180px; height: 180px; }
}
@media (max-width: 768px) {
 .contacts-top { min-height: 0; }
 .contacts-top::before { background-position: 64% center; }
 .contacts-top::after { background: linear-gradient(180deg, rgba(251,250,246,.98) 0%, rgba(251,250,246,.94) 40%, rgba(251,250,246,.4) 80%); }
 .contacts-top-shell { min-height: 0; padding-top: 18px; }
 .contacts-top-copy { max-width: none; padding: 35px 0 10px; }
 .contacts-top h1 { font-size: clamp(41px,9.2vw,53px); }
 .contacts-top-lead { font-size: 14px; }
 .contacts-top-features { margin-top: 24px; gap: 12px 21px; }
 .contacts-top-features > span { font-size: 11px; }
 .contacts-top-product { position: relative; width: 100%; height: 290px; }
 .contacts-pack-evergrass { height: 88%; left: 22%; bottom: 0; }
 .contacts-pack-berry { height: 94%; right: 12%; bottom: 0; }
 .contacts-methods { padding: 48px 0 35px; }
 .contacts-method-grid { grid-template-columns: 1fr; gap: 10px; }
 .contacts-method { min-height: 128px; padding: 20px; }
 .contacts-method h3 { font-size: 18px; }
 .contacts-feedback { padding: 35px 0 55px; scroll-margin-top: 64px; }
 .contacts-feedback-layout { grid-template-columns: 1fr; gap: 24px; }
 .contacts-feedback h2 { font-size: 32px; }
 .contacts-feedback-description { font-size: 14px; }
 .contacts-help-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 22px; }
 .contacts-help-list li { align-items: flex-start; gap: 8px; font-size: 12px; }
 .contacts-help-icon { flex-basis: 37px; width: 37px; height: 37px; }
 .contacts-help-icon svg { width: 19px; height: 19px; }
 .contacts-help-list small { font-size: 11px; }
 .contacts-form { padding: 24px; }
 .contacts-address-section { padding: 45px 0 45px; }
 .contacts-faq { padding-bottom: 60px; }
}
@media (max-width: 530px) {
 .contacts-top-product { height: 240px; }
 .contacts-pack-evergrass { display: none; }
 .contacts-pack-berry { height: 96%; right: 50%; bottom: 0; transform: translateX(50%); }
 .contacts-top-features { gap: 11px; }
 .contacts-top-features > span { width: calc(50% - 11px); }
 .contacts-page h2 { font-size: 28px; }
 .contacts-help-list { grid-template-columns: 1fr; gap: 13px; }
 .contacts-help-list li { align-items: center; }
 .contacts-form { padding: 22px 18px; }
 .contacts-fields-pair { grid-template-columns: 1fr; gap: 13px; }
 .contacts-location-grid { grid-template-columns: 1fr; }
 .contacts-map { grid-column: auto; min-height: 220px; }
 .contacts-map iframe { min-height: 190px; height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
 .contacts-submit { transition: none; }
}