/* Coffee page only: shared Contact page styles remain in main.css. */
.coffee-headline { margin: 0; }
.coffee-intro { max-width: 820px; padding: 8px 0 clamp(48px, 6vw, 88px); }
.coffee-intro p { font-size: clamp(18px, 2vw, 22px); line-height: 1.6; margin: 0 0 24px; }
.coffee-intro p:last-child { margin-bottom: 0; }
.coffee-panel { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 5vw, 80px); background: #000; color: #fff; }
.coffee-form-intro h2 { font-size: clamp(36px, 4.5vw, 60px); line-height: 1.05; font-weight: 500; margin: 0 0 24px; }
.coffee-form-intro p { font-size: 18px; line-height: 1.6; max-width: 28ch; }
.coffee-form { min-width: 0; }
.coffee-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.coffee-field label { display: block; font-size: 16px; margin-bottom: 10px; }
.coffee-field label span { font-size: 14px; color: #ccc; }
.coffee-field input, .coffee-field select { width: 100%; min-height: 52px; box-sizing: border-box; border: 1px solid #888; border-radius: 6px; padding: 12px; font: inherit; font-size: 16px; color: #000; background: #fff; }
.coffee-field :focus-visible, .coffee-submit:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
.coffee-privacy, .coffee-alternative { font-size: 14px; line-height: 1.6; margin: 24px 0; color: #ddd; }
.coffee-submit { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 16px 24px; border: 0; border-radius: 6px; font: inherit; font-size: 18px; font-weight: 700; color: #000; background: var(--yellow); cursor: pointer; }
.coffee-submit:hover { background: #fff36b; }
.coffee-submit:disabled { opacity: .7; cursor: wait; }
.coffee-status { margin: 24px 0 0; padding: 16px; border: 1px solid #aaa; border-radius: 6px; font-size: 16px; line-height: 1.6; }
.coffee-status:focus { outline: 2px solid var(--yellow); outline-offset: 4px; }
.coffee-trap { display: none; }
@media (max-width: 1000px) { .coffee-panel { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .coffee-fields { grid-template-columns: 1fr; gap: 22px; } .coffee-submit { width: 100%; } }

/* Coffee / The Grind: introduction left, enquiry form right. */
main.content-container:has(> .coffee-intro) {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(32px,5vw,80px);
    align-items:start;
}
main.content-container:has(> .coffee-intro) > .about-hero,
main.content-container:has(> .coffee-intro) > .contact-hero-media { grid-column:1 / -1; }
.coffee-intro { max-width:none; padding:0 0 80px; min-width:0; }
.coffee-intro .coffee-intro-title { margin:0 0 28px; }
.coffee-intro p { font-size:18px; line-height:1.6; opacity:.9; }
.contact-panel:has(.coffee-panel) { min-width:0; }
.coffee-panel { display:block; }
.coffee-form-intro p { max-width:none; margin:0 0 28px; }
.coffee-fields { grid-template-columns:1fr; gap:22px; }
.coffee-field input, .coffee-field select { height:56px; min-height:56px; }
.coffee-field select {
    appearance:none;
    background-color:var(--yellow,#ffe800);
    color:#000;
    border:0;
    padding-right:44px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
}
.coffee-field select option { background:#fff; color:#000; }
.coffee-submit { border-radius:999px; justify-content:center; padding:16px 28px; }
@media (max-width:850px) {
    main.content-container:has(> .coffee-intro) { grid-template-columns:minmax(0,1fr); }
    .coffee-intro { padding-bottom:40px; }
}

/* Compact outlined form, with paired name/company and full-width email/coffee. */
.coffee-panel { background:#fff; color:#000; border:1px solid #d4d6d8; padding:clamp(24px,3vw,40px); }
.coffee-form-intro p { margin-bottom:22px; }
.coffee-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }
.coffee-field:nth-child(2) { grid-column:1 / -1; grid-row:2; }
.coffee-field:nth-child(4) { grid-column:1 / -1; }
.coffee-field label { font-size:15px; margin-bottom:8px; }
.coffee-field input, .coffee-field select {
    height:48px; min-height:48px; padding:10px 12px;
    border:1px solid #b9bec2; border-radius:8px; background-color:#fff; color:#000;
}
.coffee-field select { padding-right:44px; }
.coffee-field input:focus, .coffee-field select:focus,
.coffee-field input:focus-visible, .coffee-field select:focus-visible {
    outline:none; outline-offset:0; border-color:#525960; box-shadow:0 0 0 1px #525960;
}
.coffee-privacy { color:#555; margin:18px 0; font-size:13px; }
.coffee-submit { width:100%; min-height:48px; padding:12px 20px; border-radius:999px; font-size:17px; }
.coffee-submit:focus-visible { outline:2px solid #525960; outline-offset:3px; }
@media (max-width:600px) {
    .coffee-fields { grid-template-columns:minmax(0,1fr); }
    .coffee-field:nth-child(2) { grid-row:auto; }
}

/* Custom coffee menu; native select remains the no-JavaScript fallback. */
.coffee-panel { overflow:visible; }
.coffee-picker { position:relative; }
.coffee-native-select { position:absolute; width:1px!important; height:1px!important; min-height:0!important; padding:0!important; border:0!important; clip-path:inset(50%); overflow:hidden; }
.coffee-picker-button { width:100%; height:48px; display:flex; align-items:center; text-align:left; justify-content:space-between; gap:12px; padding:10px 16px 10px 12px; border:1px solid #b9bec2; border-radius:8px; background:#fff; color:#000; font:inherit; font-size:16px; cursor:pointer; }
.coffee-picker-button::after { content:''; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); flex-shrink:0; }
.coffee-picker-button:focus-visible { outline:2px solid #525960; outline-offset:2px; }
.coffee-picker-menu { position:absolute; top:calc(100% + 6px); left:0; width:100%; box-sizing:border-box; z-index:100; list-style:none; padding:0; margin:0; border:1px solid #b9bec2; border-radius:8px; overflow:hidden; background:#f0f0f0; color:#000; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.coffee-picker-menu[hidden] { display:none; }
.coffee-picker-menu [role=option] { padding:12px 16px; margin:0; font-size:16px; line-height:1.4; cursor:pointer; background:#f0f0f0; }
.coffee-picker-menu [role=option] + [role=option] { border-top:1px solid #ccc; }
.coffee-picker-menu [role=option]:hover,
.coffee-picker-menu [role=option].is-active { background:var(--yellow,#ffe800); color:#000; }
.coffee-picker-menu [aria-selected=true] { font-weight:700; }

.coffee-submit:hover { background:#000; color:var(--yellow,#ffe800); }

/* The live status is focused after submission without an extra yellow ring. */
.coffee-status:focus, .coffee-status:focus-visible { outline:none; box-shadow:none; }