/* Approved prototype rules scoped to native roaster routes. */
:where(body.java-master-roasters) .container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
:where(body.java-master-roasters) .section { padding-block: var(--section-padding); }
:where(body.java-master-roasters) .section__head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr); align-items: end; gap: var(--section-content-gap); margin-bottom: var(--section-content-gap); }
:where(body.java-master-roasters) .section__head h2 { max-width: 860px; margin-bottom: 0; }
:where(body.java-master-roasters) .section__head p { margin: 0; color: var(--ink-soft); }
:where(body.java-master-roasters) .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--brown); font-size: 1rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
:where(body.java-master-roasters) .eyebrow::before { width: 28px; height: 1px; background: currentColor; content: ""; }
:where(body.java-master-roasters) .fine-print { font-size: 1rem; color: var(--ink-soft); }
:where(body.java-master-roasters) .site-header::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(147,67,34,.72) 30%, rgba(244,178,122,.5) 50%, rgba(135,145,127,.42) 70%, transparent 95%); content: ""; z-index: -1; }
:where(body.java-master-roasters) .button { position: relative; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; isolation: isolate; padding: 12px 22px; border: 1px solid var(--button-primary); border-radius: var(--button-radius); background-color: var(--button-primary); background-image: var(--button-gradient); background-position: 0 50%; background-size: 180% 100%; color: #fff; font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.6; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: transform var(--card-transition), border-color var(--card-transition), color var(--card-transition), box-shadow var(--card-transition), background-position 420ms ease; }
:where(body.java-master-roasters) .button:not(.button--ghost)::before { position: absolute; z-index: -1; top: -50%; bottom: -50%; left: -55%; width: 38%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); pointer-events: none; content: ""; transition: left 560ms cubic-bezier(.2,.75,.25,1); }
:where(body.java-master-roasters) .button:hover, :where(body.java-master-roasters) .button--accent:hover { transform: translateY(-3px); border-color: var(--button-primary-hover); background-image: var(--button-gradient-hover); background-position: 100% 50%; box-shadow: 0 14px 28px rgba(86,38,19,.25), 0 4px 10px rgba(37,24,17,.12); }
:where(body.java-master-roasters) .button:not(.button--ghost):hover::before { left: 125%; }
:where(body.java-master-roasters) .button:active { transform: translateY(-1px) scale(.985); box-shadow: 0 5px 12px rgba(37,24,17,.14); transition-duration: 90ms; }
:where(body.java-master-roasters) .button:focus-visible { outline-color: #f4b27a; box-shadow: 0 0 0 4px rgba(244,178,122,.22); }
:where(body.java-master-roasters) .button:disabled, :where(body.java-master-roasters) .button[aria-disabled="true"] { opacity: .55; transform: none; box-shadow: none; cursor: not-allowed; }
:where(body.java-master-roasters) .button--accent { border-color: var(--button-primary); background-image: var(--button-gradient); }
:where(body.java-master-roasters) .button--ghost { border-color: var(--espresso); background: transparent; color: var(--ink); }
:where(body.java-master-roasters) .button--ghost:hover { border-color: var(--espresso); background: var(--espresso); color: #fff; }
:where(body.java-master-roasters) .button__icon { flex-shrink: 0; width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
:where(body.java-master-roasters) .button-row { display: flex; flex-wrap: wrap; gap: 12px; }
:where(body.java-master-roasters) .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
:where(body.java-master-roasters) .product-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(199,97,54,.24); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 20px 55px rgba(37,24,17,.07); transition: transform var(--card-transition), border-color var(--card-transition), box-shadow var(--card-transition); }
:where(body.java-master-roasters) .product-card:hover, :where(body.java-master-roasters) .product-card:focus-within { transform: translateY(-4px); border-color: var(--card-border-hover); box-shadow: var(--shadow-card-hover); }
:where(body.java-master-roasters) .product-card__media { position: relative; aspect-ratio: 5/4; overflow: hidden; background: var(--ivory-2); }
:where(body.java-master-roasters) .product-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--card-transition); }
:where(body.java-master-roasters) .product-card:hover .product-card__media img, :where(body.java-master-roasters) .product-card:focus-within .product-card__media img { transform: scale(1.025); }
:where(body.java-master-roasters) .product-card__body { flex: 1; display: flex; flex-direction: column; padding: clamp(24px, 2.5vw, 34px); }
:where(body.java-master-roasters) .product-card__body h3 { margin-bottom: var(--card-title-description-gap); font-size: var(--font-size-h3); }
:where(body.java-master-roasters) .product-card__body h2 { margin-bottom: var(--card-title-description-gap); font-size: var(--font-size-h3); }
:where(body.java-master-roasters) .product-card__body .button-row { margin-top: auto; }
:where(body.java-master-roasters) .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; }
:where(body.java-master-roasters) .tags li { padding: 7px 12px; border: 1px solid var(--line); border-radius: 100px; font-size: 1rem; font-weight: 500; }
:where(body.java-master-roasters) .roi { display: grid; grid-template-columns: minmax(0, 6fr) minmax(280px, 6fr); overflow: hidden; border: 1px solid rgba(199,97,54,.28); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
:where(body.java-master-roasters) .roi__form { padding: clamp(28px, 4vw, 48px); }
:where(body.java-master-roasters) .roi__result { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; background: var(--espresso); color: #fff; }
:where(body.java-master-roasters) .roi__result strong { display: block; margin-block: 12px 18px; font: 700 clamp(2.4rem, 4vw, 4.5rem)/1.1 var(--font-title); letter-spacing: -.04em; }
:where(body.java-master-roasters) .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
:where(body.java-master-roasters) .field { display: flex; flex-direction: column; gap: 7px; }
:where(body.java-master-roasters) .field--full { grid-column: 1 / -1; }
:where(body.java-master-roasters) .field label { font-size: 1rem; font-weight: 600; }
:where(body.java-master-roasters) .field input, :where(body.java-master-roasters) .field select, :where(body.java-master-roasters) .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
:where(body.java-master-roasters) .field textarea { min-height: 130px; resize: vertical; }
:where(body.java-master-roasters) .field input[aria-invalid="true"], :where(body.java-master-roasters) .field select[aria-invalid="true"] { border-color: #a32923; }
:where(body.java-master-roasters) .field__error { min-height: 1em; color: #a32923; font-size: 1rem; }
:where(body.java-master-roasters) .form-status { min-height: 24px; margin: 14px 0; font-size: 1rem; }
:where(body.java-master-roasters) .form-status:empty { display: none; min-height: 0; margin: 0; }
:where(body.java-master-roasters) .roi-section { background: var(--ivory-2); }
:where(body.java-master-roasters) .roi-heading { max-width: 880px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
:where(body.java-master-roasters) .roi-heading h2 { margin-bottom: var(--title-description-gap); }
:where(body.java-master-roasters) .roi-heading p { margin-inline: auto; }
:where(body.java-master-roasters) .roi__selectors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 26px; }
:where(body.java-master-roasters) .roi__group { padding-top: 22px; border-top: 1px solid var(--line); }
:where(body.java-master-roasters) .roi__group + .roi__group { margin-top: 22px; }
:where(body.java-master-roasters) .roi__group h3 { margin-bottom: var(--card-title-description-gap); font-size: var(--font-size-h3); letter-spacing: -.025em; }
:where(body.java-master-roasters) .roi__group > p { margin-bottom: 18px; color: var(--ink-soft); font-size: 1rem; }
:where(body.java-master-roasters) .roi-slider { margin-bottom: 22px; }
:where(body.java-master-roasters) .roi-slider__label { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
:where(body.java-master-roasters) .roi-slider__label label { max-width: 380px; font-size: 1rem; font-weight: 600; }
:where(body.java-master-roasters) .roi-slider__value { flex: 0 0 auto; color: var(--copper-dark); font-size: 1rem; font-weight: 600; }
:where(body.java-master-roasters) .roi-range { --progress: 0%; width: 100%; height: 5px; padding: 0; border: 0; border-radius: 100px; appearance: none; background: linear-gradient(90deg, var(--copper) var(--progress), #d8cec4 var(--progress)); cursor: pointer; }
:where(body.java-master-roasters) .roi-range::-webkit-slider-thumb { width: 22px; height: 22px; appearance: none; border: 3px solid var(--paper); border-radius: 50%; background: var(--copper); box-shadow: 0 2px 10px rgba(37,24,17,.24); }
:where(body.java-master-roasters) .roi-range::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--paper); border-radius: 50%; background: var(--copper); box-shadow: 0 2px 10px rgba(37,24,17,.24); }
:where(body.java-master-roasters) .roi__result .card-meta { color: #fbbf7c; }
:where(body.java-master-roasters) .roi__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 8px 0 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.14); }
:where(body.java-master-roasters) .roi-metric { min-height: 92px; padding: 15px; background: var(--espresso); }
:where(body.java-master-roasters) .roi-metric span { display: block; margin-bottom: 8px; color: rgba(255,255,255,.68); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
:where(body.java-master-roasters) .roi-metric output { color: #fff; font-size: 1.15rem; font-weight: 600; }
:where(body.java-master-roasters) .roi__disclaimer { margin-top: 18px; color: rgba(255,255,255,.68); font-size: 1rem; }
:where(body.java-master-roasters) .roi__result .button { align-self: flex-start; }
:where(body.java-master-roasters) .product-card:has(a:focus-visible) { outline: 3px solid var(--copper); outline-offset: 4px; }
:where(body.java-master-roasters) .card-meta { color: var(--brown); font-size: 1rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
:where(body.java-master-roasters) .breadcrumb { margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-soft); font-size: 1rem; list-style: none; }
:where(body.java-master-roasters) .breadcrumb li:not(:last-child)::after { margin-left: 8px; content: "/"; }
:where(body.java-master-roasters) .specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
:where(body.java-master-roasters) .specs__group { padding: 24px; background: var(--paper); }
:where(body.java-master-roasters) .specs__group h3 { margin-bottom: 18px; }
:where(body.java-master-roasters) .specs dl { margin: 0; }
:where(body.java-master-roasters) .specs dl div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; padding-block: 11px; border-top: 1px solid var(--line); }
:where(body.java-master-roasters) .specs dt { color: var(--ink-soft); }
:where(body.java-master-roasters) .specs dd { margin: 0; font-weight: 600; }
:where(body.java-master-roasters) .contact-form { padding: clamp(26px, 3.5vw, 44px); border: 1px solid rgba(102,68,55,.14); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow); }
:where(body.java-master-roasters).page--roasters .site-header { background: rgba(28, 18, 13, 0.945); }
:where(body.java-master-roasters) .roasters-hero { position: relative; min-height: 720px; display: flex; overflow: hidden; background: radial-gradient(circle at 82% 34%, rgba(189,108,60,.28), transparent 30%), linear-gradient(135deg, #281811 0%, #150d09 74%); color: #fff; }
:where(body.java-master-roasters) .roasters-hero::before { position: absolute; inset: 0; opacity: .08; background-image: url('../images/coffee-bean-pattern.svg'); background-size: 150px; pointer-events: none; content: ""; }
:where(body.java-master-roasters) .roasters-hero__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(390px, 5fr); align-items: center; gap: clamp(28px,4vw,64px); padding-block: clamp(72px,8vw,112px); }
:where(body.java-master-roasters) .roasters-hero__content { position: relative; z-index: 2; }
:where(body.java-master-roasters) .roasters-hero__breadcrumb { margin-bottom: clamp(34px,5vw,58px); color: rgba(255,255,255,.65); }
:where(body.java-master-roasters) .roasters-hero__breadcrumb a { color: #fff; }
:where(body.java-master-roasters) .roasters-hero h1 { max-width: 850px; margin-bottom: 22px; color: #f4b27a; }
:where(body.java-master-roasters) .roasters-hero__description { max-width: 690px; margin-bottom: 20px; color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.65; }
:where(body.java-master-roasters) .roasters-hero__points { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 22px; max-width: 820px; margin: 0; padding: 0; list-style: none; }
:where(body.java-master-roasters) .roasters-hero__points li { min-height: 42px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.92); font-size: 1rem; font-weight: 500; }
:where(body.java-master-roasters) .roasters-hero__points svg { flex: 0 0 26px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--button-gradient); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:where(body.java-master-roasters) .roasters-hero__visual { position: relative; align-self: stretch; display: grid; place-items: end center; min-height: 570px; }
:where(body.java-master-roasters) .roasters-hero__visual::before { position: absolute; right: 2%; bottom: 4%; left: 2%; height: 54%; border: 1px solid rgba(244,178,122,.22); border-radius: 180px 180px 22px 22px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); content: ""; }
:where(body.java-master-roasters) .roasters-hero__halo { position: absolute; width: min(34vw,430px); aspect-ratio: 1; top: 20%; left: 50%; transform: translateX(-50%); border: 1px solid rgba(244,178,122,.22); border-radius: 50%; box-shadow: 0 0 0 44px rgba(244,178,122,.035),0 0 0 88px rgba(244,178,122,.02); }
:where(body.java-master-roasters) .roasters-hero__visual img { position: relative; z-index: 1; width: min(100%,500px); height: 620px; padding: 0; border: 1px solid rgba(244,178,122,.24); border-radius: 22px; object-fit: cover; object-position: center; box-shadow: 0 32px 54px rgba(0,0,0,.34); }
:where(body.java-master-roasters) .roaster-compare { background: linear-gradient(180deg,var(--paper),#f5ede3); }
:where(body.java-master-roasters) .roaster-compare__heading { max-width: 880px; margin: 0 auto clamp(34px,5vw,58px); text-align: center; }
:where(body.java-master-roasters) .roaster-compare__heading h2 { margin: 0 0 16px; }
:where(body.java-master-roasters) .roaster-compare__heading p { max-width: 760px; margin: 0 auto; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; text-wrap: balance; }
:where(body.java-master-roasters) .roaster-compare__products { align-items: stretch; }
:where(body.java-master-roasters) .roaster-product-card { border-color: rgba(147,67,34,.18); box-shadow: 0 20px 58px rgba(37,24,17,.1); }
:where(body.java-master-roasters) .roaster-product-card .product-card__media { position: relative; aspect-ratio: 16/11; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 35%,#fff 0%,#f0e7db 72%); }
:where(body.java-master-roasters) .roaster-product-card .product-card__media::after { position: absolute; inset: auto 12% 8%; height: 12%; border-radius: 50%; background: rgba(53,35,26,.11); filter: blur(16px); content: ""; }
:where(body.java-master-roasters) .roaster-product-card .product-card__media img { position: absolute; z-index: 1; top: 50%; left: 50%; width: 90%; height: 92%; padding: 12px; object-fit: contain; transform: translate(-50%, -50%); transition: opacity .18s ease, transform var(--card-transition); }
:where(body.java-master-roasters) .roaster-product-card:hover .product-card__media img, :where(body.java-master-roasters) .roaster-product-card:focus-within .product-card__media img { transform: translate(-50%, -50%) scale(1.025); }
:where(body.java-master-roasters) .roaster-product-card .product-card__media img.is-changing { opacity: .28; }
:where(body.java-master-roasters) .roaster-variant-picker { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 6px; padding: 7px; border: 1px solid rgba(53,35,26,.15); border-radius: 999px; background: rgba(255,253,249,.92); box-shadow: 0 10px 28px rgba(37,24,17,.16); backdrop-filter: blur(12px); }
:where(body.java-master-roasters) .roaster-variant-picker__label { padding: 0 5px 0 7px; color: var(--ink-soft); font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
:where(body.java-master-roasters) .roaster-variant-button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink); font: 700 .78rem/1 var(--font-body); cursor: pointer; transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease); }
:where(body.java-master-roasters) .roaster-variant-button:hover { background: rgba(147,67,34,.08); }
:where(body.java-master-roasters) .roaster-variant-button.is-active { border-color: rgba(147,67,34,.28); background: #fff; box-shadow: 0 3px 10px rgba(37,24,17,.1); }
:where(body.java-master-roasters) .roaster-variant-button:focus-visible { outline: 3px solid rgba(201,111,61,.35); outline-offset: 2px; }
:where(body.java-master-roasters) .roaster-variant-button__swatch { width: 13px; height: 13px; flex: 0 0 13px; border: 1px solid rgba(37,24,17,.2); border-radius: 50%; box-shadow: inset 0 1px 1px rgba(255,255,255,.28); }
:where(body.java-master-roasters) .roaster-variant-button__swatch--black { background: #171412; }
:where(body.java-master-roasters) .roaster-variant-button__swatch--red { background: #b92026; }
:where(body.java-master-roasters) .roaster-product-card .tags { margin-bottom: 0; }
:where(body.java-master-roasters) .roaster-product-card__fine-print { margin: 24px 0; padding-top: 18px; border-top: 1px solid var(--line); }
:where(body.java-master-roasters) .roaster-compare__specification { position: relative; margin-top: clamp(64px,8vw,96px); padding-top: clamp(40px,5vw,60px); border-top: 1px solid rgba(147,67,34,.22); }
:where(body.java-master-roasters) .roaster-compare__specification::before { position: absolute; top: -2px; left: 0; width: 82px; height: 3px; border-radius: 999px; background: var(--button-gradient); content: ""; }
:where(body.java-master-roasters) .roaster-compare__specification .section__head { align-items: end; margin-bottom: clamp(24px,3vw,38px); }
:where(body.java-master-roasters) .roaster-compare__specification .section__head h3 { max-width: 780px; margin: 0; font-size: clamp(1.8rem,2.6vw,2.45rem); }
:where(body.java-master-roasters) .roaster-compare__specification .section__head p { max-width: 440px; padding-left: 0; border-left: 0; }
:where(body.java-master-roasters) .roaster-compare__specification .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; overflow: visible; border: 0; background: transparent; }
:where(body.java-master-roasters) .roaster-compare__specification .specs__group { position: relative; padding: clamp(28px,3.5vw,40px); border: 1px solid rgba(147,67,34,.18); border-radius: var(--radius-lg); background: #ffffff; box-shadow: 0 16px 40px rgba(37,24,17,.07); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
:where(body.java-master-roasters) .roaster-compare__specification .specs__group:hover { transform: translateY(-3px); border-color: rgba(201,111,61,.4); box-shadow: 0 24px 50px rgba(37,24,17,.12); }
:where(body.java-master-roasters) .roaster-compare__specification .specs__group-header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(147,67,34,.14); }
:where(body.java-master-roasters) .roaster-compare__specification .specs__badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(147,67,34,.1); color: var(--copper-dark); }
:where(body.java-master-roasters) .roaster-compare__specification .specs__badge--highlight { background: rgba(201,111,61,.18); color: var(--copper-dark); }
:where(body.java-master-roasters) .roaster-compare__specification .specs__group h3 { margin: 0; font-size: clamp(1.5rem, 2vw, 1.85rem); color: var(--espresso); font-family: var(--font-title); font-weight: 700; }
:where(body.java-master-roasters) .roaster-compare__specification dl { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
:where(body.java-master-roasters) .roaster-compare__specification dl div { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 8px; background: rgba(245,237,227,.4); border-left: 3px solid var(--copper); }
:where(body.java-master-roasters) .roaster-compare__specification dl div:nth-child(even) { background: rgba(245,237,227,.75); }
:where(body.java-master-roasters) .roaster-compare__specification dt { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
:where(body.java-master-roasters) .roaster-compare__specification dd { margin: 0; font-weight: 700; color: var(--espresso); text-align: right; font-size: 0.95rem; }
:where(body.java-master-roasters) .roaster-compare__specification .fine-print { max-width: 900px; margin: 28px 0 0; padding-left: 18px; border-left: 2px solid rgba(189,108,60,.28); }
:where(body.java-master-roasters) .roaster-ownership { position: relative; overflow: hidden; background: var(--ivory-2); }
:where(body.java-master-roasters) .roaster-ownership::before { position: absolute; width: 520px; aspect-ratio: 1; right: -240px; top: -260px; border: 1px solid rgba(147,67,34,.13); border-radius: 50%; box-shadow: 0 0 0 56px rgba(189,108,60,.03),0 0 0 112px rgba(189,108,60,.02); content: ""; }
:where(body.java-master-roasters) .roaster-ownership__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,6.5fr) minmax(390px,5.5fr); align-items: center; gap: clamp(40px,7vw,96px); }
:where(body.java-master-roasters) .roaster-ownership__content > p { margin-bottom: 18px; color: var(--ink-soft); }
:where(body.java-master-roasters) .roaster-ownership__benefits { margin: 0 0 20px; padding: 0; list-style: none; }
:where(body.java-master-roasters) .roaster-ownership__benefits li { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: var(--ink); font-size: 1rem; font-weight: 600; }
:where(body.java-master-roasters) .roaster-ownership__benefits svg { flex: 0 0 20px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--copper); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:where(body.java-master-roasters) .roaster-ownership__media { position: relative; isolation: isolate; height: 440px; min-height: 0; margin: 0; }
:where(body.java-master-roasters) .roaster-ownership__media::before { position: absolute; z-index: -1; inset: 0; transform: translate(-16px,-11px) rotate(-2.1deg); transform-origin: center; border: 1px solid rgba(147,67,34,.24); border-radius: 34px 12px 34px 12px; background: linear-gradient(145deg,rgba(255,255,255,.88),rgba(237,216,195,.58)); box-shadow: 0 20px 50px rgba(62,37,24,.1); content: ""; transition: transform 500ms cubic-bezier(.2,.75,.2,1),border-radius 500ms ease,box-shadow 500ms ease; }
:where(body.java-master-roasters) .roaster-ownership__media::after { position: absolute; z-index: -2; right: -9%; bottom: -11%; width: 66%; aspect-ratio: 1; border-radius: 50%; background: rgba(201,111,61,.25); filter: blur(52px); content: ""; }
:where(body.java-master-roasters) .roaster-ownership__video-shell { position: relative; height: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.32); border-radius: 30px 10px 30px 10px; background: #1b120e; box-shadow: 0 30px 70px rgba(37,24,17,.24),inset 0 1px 0 rgba(255,255,255,.22); transition: transform 500ms cubic-bezier(.2,.75,.2,1),box-shadow 500ms ease; }
:where(body.java-master-roasters) .roaster-ownership__video-shell::before { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg,rgba(13,7,4,.24) 0%,transparent 30%,transparent 58%,rgba(13,7,4,.76) 100%); pointer-events: none; content: ""; }
:where(body.java-master-roasters) .roaster-ownership__video-shell::after { position: absolute; z-index: 3; inset: 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 21px 4px 21px 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); pointer-events: none; content: ""; }
:where(body.java-master-roasters) .roaster-video-control { position: absolute; z-index: 4; right: 18px; top: 18px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #fffdf9; border-radius: 50%; background: #1b120e; color: #fffdf9; cursor: pointer; }
:where(body.java-master-roasters) .roaster-video-control[hidden], :where(body.java-master-roasters) .roaster-video-control svg[hidden] { display: none; }
:where(body.java-master-roasters) .roaster-video-control:focus-visible { outline: 3px solid #fffdf9; outline-offset: 3px; }
:where(body.java-master-roasters) .roaster-ownership__media video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 43%; transform: scale(1.015); transition: transform 900ms cubic-bezier(.2,.75,.2,1),filter 500ms ease; }
:where(body.java-master-roasters) .roaster-ownership__caption { position: absolute; z-index: 4; bottom: 22px; left: 22px; width: fit-content; max-width: calc(100% - 44px); padding: 14px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px 5px 15px 5px; background: linear-gradient(135deg,rgba(27,16,11,.84),rgba(27,16,11,.58)); color: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(14px); font-family: var(--font-title); font-size: clamp(1rem,1.4vw,1.2rem); font-weight: 750; letter-spacing: -.01em; line-height: 1.2; pointer-events: none; }
@media (hover:hover) {
:where(body.java-master-roasters) .roaster-ownership__media:hover::before { transform: translate(0,0) rotate(0); border-radius: 30px 10px 30px 10px; box-shadow: 0 14px 36px rgba(62,37,24,.07); }
:where(body.java-master-roasters) .roaster-ownership__media:hover .roaster-ownership__video-shell { box-shadow: 0 38px 82px rgba(37,24,17,.3),inset 0 1px 0 rgba(255,255,255,.24); }
:where(body.java-master-roasters) .roaster-ownership__media:hover video { transform: scale(1.035); filter: saturate(1.05) contrast(1.02); }
}
:where(body.java-master-roasters) .roaster-growth { position: relative; overflow: hidden; background: #21140e; color: #fff; }
:where(body.java-master-roasters) .roaster-growth::before { position: absolute; inset: 0; opacity: .065; background-image: url('../images/coffee-bean-pattern.svg'); background-size: 150px; content: ""; }
:where(body.java-master-roasters) .roaster-growth .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px,5fr) minmax(0,7fr); align-items: start; gap: clamp(48px,8vw,96px); }
:where(body.java-master-roasters) .roaster-growth__heading { position: sticky; top: calc(var(--header-height) + 32px); max-width: 520px; margin: 0; align-self: start; }
:where(body.java-master-roasters) .roaster-growth__heading h2 { color: #fff; line-height: 1.25; margin-bottom: 18px; }
:where(body.java-master-roasters) .roaster-growth__heading p { margin-bottom: 12px; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.6; }
:where(body.java-master-roasters) .roaster-growth__subtitle { display: block; margin-top: 18px; color: #f4b27a; font-weight: 600; font-size: 1.05rem; }
:where(body.java-master-roasters) .roaster-growth__timeline { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
:where(body.java-master-roasters) .roaster-growth__timeline::before { display: none; }
:where(body.java-master-roasters) .roaster-growth__timeline li { position: relative; min-height: 0; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 18px; padding: 12px 16px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(244,178,122,.12); transition: background 0.2s ease, border-color 0.2s ease; }
:where(body.java-master-roasters) .roaster-growth__timeline li:hover { background: rgba(255,255,255,.07); border-color: rgba(244,178,122,.3); }
:where(body.java-master-roasters) .roaster-growth__number { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(244,178,122,.4); border-radius: 14px; background: linear-gradient(145deg,#3a251b,#251710); color: #f4b27a; font-weight: 700; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
:where(body.java-master-roasters) .roaster-growth__timeline p { max-width: none; margin: 0; padding: 0; color: rgba(255,255,255,.92); font-size: 1rem; font-weight: 600; line-height: 1.45; }
:where(body.java-master-roasters) .roaster-demo-banner { padding-block: clamp(34px,4vw,54px); background: var(--paper); }
:where(body.java-master-roasters) .roaster-demo-banner__panel { position: relative; min-height: 240px; display: grid; grid-template-columns: minmax(0,8fr) minmax(220px,4fr); align-items: center; gap: 34px; overflow: hidden; padding: clamp(36px,5vw,64px); border: 1px solid rgba(224,122,66,.35); border-radius: var(--radius-lg); background: radial-gradient(ellipse at 85% 20%, rgba(201,111,61,.28) 0%, transparent 60%), linear-gradient(135deg, #221610 0%, #150d08 100%); box-shadow: 0 20px 50px rgba(8,5,3,.45); color: #fff; }
:where(body.java-master-roasters) .roaster-demo-banner__panel::after { position: absolute; inset: 12px; border: 1px solid rgba(244,178,122,.18); border-radius: calc(var(--radius-lg) - 6px); pointer-events: none; content: ""; }
:where(body.java-master-roasters) .roaster-demo-banner__panel p { position: relative; z-index: 1; max-width: 850px; margin: 0; font-family: var(--font-title); font-size: clamp(1.4rem,2.2vw,1.95rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; color: #fff; }
:where(body.java-master-roasters) .roaster-demo-banner__panel .button { position: relative; z-index: 1; justify-self: end; }
:where(body.java-master-roasters) .roaster-roi .roi { box-shadow: 0 28px 68px rgba(37,24,17,.14); }
:where(body.java-master-roasters) .roaster-roi .roi-heading { max-width: 940px; }
:where(body.java-master-roasters) .roaster-request { scroll-margin-top: calc(var(--header-height) + 18px); background: radial-gradient(circle at 8% 8%,rgba(189,108,60,.21),transparent 30%),linear-gradient(145deg,#2a1a14,#17100c); color: #fff; }
:where(body.java-master-roasters) .roaster-request__layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr); align-items: stretch; gap: clamp(32px, 5vw, 64px); }
:where(body.java-master-roasters) .roaster-request__content { display: flex; flex-direction: column; gap: 20px; }
:where(body.java-master-roasters) .roaster-request__intro { padding-top: 0; }
:where(body.java-master-roasters) .roaster-request__intro .eyebrow { color: #f4b27a; margin-bottom: 8px; }
:where(body.java-master-roasters) .roaster-request__intro h2 { max-width: 660px; color: #fff; margin-bottom: 10px; }
:where(body.java-master-roasters) .roaster-request__intro h2:focus { outline: none; }
:where(body.java-master-roasters) .roaster-request__intro h2:focus-visible { outline: 3px solid #f4b27a; outline-offset: 6px; }
:where(body.java-master-roasters) .roaster-request__intro p { margin: 0; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.6; }
:where(body.java-master-roasters) .roaster-request__form { border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); background: rgba(255,255,255,.07); color: #fff; padding: clamp(22px, 3vw, 32px); box-shadow: 0 28px 70px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
:where(body.java-master-roasters) .roaster-request__form .form-grid { gap: 20px; margin-bottom: 20px; }
:where(body.java-master-roasters) .roaster-request__form .field { gap: 4px; }
:where(body.java-master-roasters) .roaster-request__form .field label { color: rgba(255,255,255,.9); font-size: 1rem; }
:where(body.java-master-roasters) .roaster-request__form .field input, :where(body.java-master-roasters) .roaster-request__form .field textarea { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fff; min-height: 48px; padding: 10px 14px; }
:where(body.java-master-roasters) .roaster-request__form .field textarea { min-height: 90px; }
:where(body.java-master-roasters) .roaster-request__form .field input, :where(body.java-master-roasters) .roaster-request__form .field textarea { transition: border-color var(--ease),box-shadow var(--ease),background-color var(--ease); }
:where(body.java-master-roasters) .roaster-request__form .field input:hover, :where(body.java-master-roasters) .roaster-request__form .field textarea:hover { border-color: rgba(244,178,122,.62); background: rgba(255,255,255,.1); }
:where(body.java-master-roasters) .roaster-request__form .field input:focus, :where(body.java-master-roasters) .roaster-request__form .field textarea:focus { border-color: #f4b27a; background: rgba(255,255,255,.11); outline: 0; box-shadow: 0 0 0 3px rgba(244,178,122,.18); }
:where(body.java-master-roasters) .roaster-request__form .field input[aria-invalid="true"], :where(body.java-master-roasters) .roaster-request__form .field textarea[aria-invalid="true"] { border-color: #ff9e94; background: rgba(163,41,35,.16); }
:where(body.java-master-roasters) .roaster-request__form .field__error:empty { display: none; min-height: 0; }
:where(body.java-master-roasters) .roaster-request__form .field__error { color: #ffb7af; font-size: 0.875rem; }
:where(body.java-master-roasters) .roaster-request__form .form-status:empty { display: none; margin: 0; min-height: 0; }
:where(body.java-master-roasters) .roaster-request__form .form-status { margin: 8px 0; color: #ffb7af; }
:where(body.java-master-roasters) .roaster-request__form .form-status.is-error { font-weight: 600; color: #ffb7af; }
:where(body.java-master-roasters) .roaster-request__form button[type="submit"] { margin-top: 4px; width: 100%; }
:where(body.java-master-roasters) .roaster-request__form .button:disabled { opacity: .65; cursor: wait; }
:where(body.java-master-roasters) .roaster-request__visual { position: relative; min-height: 100%; border-radius: var(--radius-lg); overflow: hidden; background-image: var(--jm-roaster-request-image, none); background-repeat: no-repeat; background-size: cover; background-position: center 30%; border: 1px solid rgba(244,178,122,.22); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
:where(body.java-master-roasters).page--roasters .roaster-request__visual { background-position: 20% center; }
:where(body.java-master-roasters) .roaster-request__visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,12,8,.12) 0%, rgba(20,12,8,.45) 100%); pointer-events: none; content: ""; }
:where(body.java-master-roasters) .reveal { opacity: 1; transform: none; }
:where(body.java-master-roasters).page--jm1500 .site-header { background: #1b120e; }
:where(body.java-master-roasters) .jm1500-hero { position: relative; min-height: 720px; display: flex; overflow: hidden; background: radial-gradient(circle at 84% 36%, rgba(201,111,61,.14), transparent 45%), linear-gradient(135deg, #fdfbf7 0%, #f4ede3 100%); color: var(--espresso); border-bottom: 1px solid rgba(147,67,34,.12); }
:where(body.java-master-roasters) .jm1500-hero::before { position: absolute; inset: 0; opacity: .04; background-image: url('../images/coffee-bean-pattern.svg'); background-size: 150px; pointer-events: none; content: ""; }
:where(body.java-master-roasters) .jm1500-hero__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(390px, 5fr); align-items: center; gap: clamp(28px,4vw,64px); padding-block: clamp(72px,8vw,112px); }
:where(body.java-master-roasters) .jm1500-hero__content { position: relative; z-index: 2; }
:where(body.java-master-roasters) .jm1500-hero__breadcrumb { margin-bottom: clamp(24px,3.5vw,40px); color: var(--muted); }
:where(body.java-master-roasters) .jm1500-hero__breadcrumb a { color: var(--espresso); transition: color var(--ease); }
:where(body.java-master-roasters) .jm1500-hero__breadcrumb a:hover { color: var(--copper); }
:where(body.java-master-roasters) .jm1500-hero__eyebrow { color: var(--copper); margin-bottom: 12px; }
:where(body.java-master-roasters) .jm1500-hero h1 { max-width: 850px; margin-bottom: 18px; color: var(--espresso); line-height: 1.2; }
:where(body.java-master-roasters) .jm1500-hero__description { max-width: 690px; margin-bottom: 22px; color: var(--ink); font-size: 16px; line-height: 1.65; }
:where(body.java-master-roasters) .jm1500-hero__pricing { margin-bottom: 24px; }
:where(body.java-master-roasters) .jm1500-hero__price-box { display: inline-flex; flex-direction: column; padding: 16px 24px; border: 1px solid rgba(147,67,34,.22); border-radius: var(--radius); background: #ffffff; box-shadow: 0 14px 34px rgba(37,24,17,.08); }
:where(body.java-master-roasters) .jm1500-hero__price-label { font-size: 0.82rem; font-weight: 700; color: var(--copper); text-transform: uppercase; letter-spacing: .08em; }
:where(body.java-master-roasters) .jm1500-hero__price { font-family: var(--font-title); font-size: clamp(2.2rem, 3.5vw, 3.1rem); font-weight: 800; color: var(--espresso); line-height: 1.1; letter-spacing: -.03em; margin-block: 2px 4px; }
:where(body.java-master-roasters) .jm1500-hero__financing { font-size: 0.94rem; color: var(--ink); font-weight: 500; }
:where(body.java-master-roasters) .jm1500-hero__points { display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
:where(body.java-master-roasters) .jm1500-hero__points li { display: flex; align-items: center; gap: 12px; color: var(--espresso); font-size: 1rem; font-weight: 600; }
:where(body.java-master-roasters) .jm1500-hero__points svg { flex: 0 0 24px; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--button-gradient); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:where(body.java-master-roasters) .jm1500-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
:where(body.java-master-roasters) .jm1500-hero__download-btn { display: inline-flex; align-items: center; gap: 10px; border-color: rgba(147,67,34,.35); color: var(--espresso); background: rgba(255,255,255,.85); box-shadow: 0 4px 12px rgba(37,24,17,.05); text-decoration: none; transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease); }
:where(body.java-master-roasters) .jm1500-hero__download-btn:hover { border-color: var(--copper); background: #ffffff; color: var(--copper); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,24,17,.1); }
:where(body.java-master-roasters) .jm1500-hero__download-btn .button__icon { width: 18px; height: 18px; color: var(--copper); }
:where(body.java-master-roasters) .jm1500-hero__visual { position: relative; align-self: stretch; display: grid; place-items: end center; min-height: 570px; }
:where(body.java-master-roasters) .jm1500-hero__visual::before { position: absolute; right: 2%; bottom: 4%; left: 2%; height: 54%; border: 1px solid rgba(147,67,34,.16); border-radius: 180px 180px 22px 22px; background: linear-gradient(180deg, rgba(201,111,61,.08), rgba(201,111,61,.02)); content: ""; }
:where(body.java-master-roasters) .jm1500-hero__halo { position: absolute; width: min(34vw,430px); aspect-ratio: 1; top: 20%; left: 50%; transform: translateX(-50%); border: 1px solid rgba(147,67,34,.16); border-radius: 50%; box-shadow: 0 0 0 44px rgba(201,111,61,.04), 0 0 0 88px rgba(201,111,61,.02); }
:where(body.java-master-roasters) .jm1500-hero__visual img { position: relative; z-index: 1; width: min(100%,500px); height: 620px; padding: 12px; border: 1px solid rgba(147,67,34,.18); border-radius: 22px; object-fit: contain; object-position: center bottom; background: #fff; box-shadow: 0 24px 50px rgba(37,24,17,.12); }
:where(body.java-master-roasters) .jm1500-compact { position: relative; overflow: hidden; background: #1c120c; color: #fff; padding-block: clamp(60px, 8vw, 100px); }
:where(body.java-master-roasters) .jm1500-compact::before { position: absolute; inset: 0; opacity: .05; background-image: url('../images/coffee-bean-pattern.svg'); background-size: 140px; pointer-events: none; content: ""; }
:where(body.java-master-roasters) .jm1500-compact .container { position: relative; z-index: 1; }
:where(body.java-master-roasters) .jm1500-compact__head > * { min-width: 0; }
:where(body.java-master-roasters) .jm1500-compact__head h2 { color: #fff; }
:where(body.java-master-roasters) .jm1500-compact .eyebrow { color: var(--hero-heading); }
:where(body.java-master-roasters) .jm1500-compact .eyebrow::before,
:where(body.java-master-roasters) .profect-platform .eyebrow::before { background: var(--brown); }
:where(body.java-master-roasters) .jm1500-compact__head p { color: rgba(255,255,255,.76); }
:where(body.java-master-roasters) .jm1500-features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
:where(body.java-master-roasters) .jm1500-feature-card { position: relative; min-width: 0; min-height: 290px; display: flex; flex-direction: column; padding: clamp(26px, 3.5vw, 36px); overflow: hidden; border: 1px solid rgba(244,178,122,.18); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(46,30,22,.65) 0%, rgba(26,17,12,.85) 100%); backdrop-filter: blur(12px); box-shadow: 0 16px 40px rgba(0,0,0,.25); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
:where(body.java-master-roasters) .jm1500-feature-card::after { position: absolute; right: -70px; bottom: -90px; width: 180px; height: 180px; border: 1px solid rgba(244,178,122,.1); border-radius: 50%; box-shadow: 0 0 0 28px rgba(244,178,122,.025); content: ""; pointer-events: none; }
:where(body.java-master-roasters) .jm1500-feature-card:hover { transform: translateY(-4px); border-color: rgba(244,178,122,.5); box-shadow: 0 22px 50px rgba(0,0,0,.4); }
:where(body.java-master-roasters) .jm1500-feature-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
:where(body.java-master-roasters) .jm1500-feature-card__num { display: inline-grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(244,178,122,.35); border-radius: 12px; background: linear-gradient(135deg, #3a251b, #22150e); color: #f4b27a; font-family: var(--font-title); font-size: 1.1rem; font-weight: 700; }
:where(body.java-master-roasters) .jm1500-feature-card__label { max-width: 60%; overflow-wrap: anywhere; color: rgba(244,178,122,.82); font-size: .72rem; font-weight: 800; letter-spacing: .1em; line-height: 1.35; text-align: right; text-transform: uppercase; }
:where(body.java-master-roasters) .jm1500-feature-card h3 { overflow-wrap: anywhere; color: #fff; font-size: clamp(1.25rem, 1.6vw, 1.45rem); margin-bottom: 12px; }
:where(body.java-master-roasters) .jm1500-feature-card p { position: relative; z-index: 1; color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.65; margin: 0; }
:where(body.java-master-roasters) .jm1500-feature-card--support { border-color: rgba(244,178,122,.34); background: linear-gradient(145deg, rgba(83,43,25,.72) 0%, rgba(31,19,13,.92) 100%); }
:where(body.java-master-roasters) .jm1500-specs { background: linear-gradient(180deg, var(--paper), #f5ede3); padding-block: clamp(60px, 8vw, 100px); scroll-margin-top: calc(var(--header-height) + 18px); }
:where(body.java-master-roasters) .jm1500-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
:where(body.java-master-roasters) .jm1500-bento__card { padding: clamp(26px, 3vw, 36px); border: 1px solid rgba(147,67,34,.16); border-radius: var(--radius-lg); background: #ffffff; box-shadow: 0 16px 36px rgba(37,24,17,.06); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
:where(body.java-master-roasters) .jm1500-bento__card:hover { transform: translateY(-3px); border-color: rgba(201,111,61,.38); box-shadow: 0 22px 48px rgba(37,24,17,.1); }
:where(body.java-master-roasters) .jm1500-bento__card--footprint { grid-column: span 6; }
:where(body.java-master-roasters) .jm1500-bento__card--materials { grid-column: span 6; }
:where(body.java-master-roasters) .jm1500-bento__card--capacity { grid-column: span 6; }
:where(body.java-master-roasters) .jm1500-bento__card--connectivity { grid-column: span 6; }
:where(body.java-master-roasters) .jm1500-bento__card--facility { grid-column: span 12; }
:where(body.java-master-roasters) .jm1500-bento__header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(147,67,34,.12); }
:where(body.java-master-roasters) .jm1500-bento__icon { width: 24px; height: 24px; color: var(--copper); flex-shrink: 0; }
:where(body.java-master-roasters) .jm1500-bento__header h3 { margin: 0; color: var(--espresso); font-size: clamp(1.2rem, 1.5vw, 1.45rem); font-family: var(--font-title); font-weight: 700; }
:where(body.java-master-roasters) .jm1500-bento__dl { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
:where(body.java-master-roasters) .jm1500-bento__dl div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-radius: 6px; background: rgba(245,237,227,.45); border-left: 3px solid var(--copper); gap: 16px; }
:where(body.java-master-roasters) .jm1500-bento__dl div:nth-child(even) { background: rgba(245,237,227,.8); }
:where(body.java-master-roasters) .jm1500-bento__dl dt { font-weight: 700; color: var(--espresso); font-size: 0.95rem; white-space: nowrap; }
:where(body.java-master-roasters) .jm1500-bento__dl dd { margin: 0; color: var(--ink); font-size: 0.95rem; text-align: right; }
:where(body.java-master-roasters) .jm1500-bento__dl--facility { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
:where(body.java-master-roasters) .jm1500-bento__dl--facility div:last-child { grid-column: 1 / -1; }
:where(body.java-master-roasters).page--profect .site-header { background: #1b120e; }
:where(body.java-master-roasters) .profect-hero { position: relative; min-height: 720px; display: flex; overflow: hidden; background: radial-gradient(circle at 84% 36%, rgba(201,111,61,.14), transparent 45%), linear-gradient(135deg, #fdfbf7 0%, #f4ede3 100%); color: var(--espresso); border-bottom: 1px solid rgba(147,67,34,.12); }
:where(body.java-master-roasters) .profect-hero::before { position: absolute; inset: 0; opacity: .04; background-image: url('../images/coffee-bean-pattern.svg'); background-size: 150px; pointer-events: none; content: ""; }
:where(body.java-master-roasters) .profect-hero__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(390px, 5fr); align-items: center; gap: clamp(28px,4vw,64px); padding-block: clamp(72px,8vw,112px); }
:where(body.java-master-roasters) .profect-hero__content { position: relative; z-index: 2; }
:where(body.java-master-roasters) .profect-hero__breadcrumb { margin-bottom: clamp(24px,3.5vw,40px); color: var(--muted); }
:where(body.java-master-roasters) .profect-hero__breadcrumb a { color: var(--espresso); transition: color var(--ease); }
:where(body.java-master-roasters) .profect-hero__breadcrumb a:hover { color: var(--copper); }
:where(body.java-master-roasters) .profect-hero__eyebrow { color: var(--copper); margin-bottom: 12px; }
:where(body.java-master-roasters) .profect-hero h1 { max-width: 850px; margin-bottom: 18px; color: var(--espresso); line-height: 1.2; text-wrap: balance; }
:where(body.java-master-roasters) .profect-hero__description { max-width: 690px; margin-bottom: 22px; color: var(--ink); font-size: 16px; line-height: 1.65; }
:where(body.java-master-roasters) .profect-hero__pricing { margin-bottom: 24px; }
:where(body.java-master-roasters) .profect-hero__price-box { display: inline-flex; flex-direction: column; padding: 16px 24px; border: 1px solid rgba(147,67,34,.22); border-radius: var(--radius); background: #ffffff; box-shadow: 0 14px 34px rgba(37,24,17,.08); }
:where(body.java-master-roasters) .profect-hero__price-label { font-size: 0.82rem; font-weight: 700; color: var(--copper); text-transform: uppercase; letter-spacing: .08em; }
:where(body.java-master-roasters) .profect-hero__price { font-family: var(--font-title); font-size: clamp(2.2rem, 3.5vw, 3.1rem); font-weight: 800; color: var(--espresso); line-height: 1.1; letter-spacing: -.03em; margin-block: 2px 4px; }
:where(body.java-master-roasters) .profect-hero__financing { font-size: 0.94rem; color: var(--ink); font-weight: 500; }
:where(body.java-master-roasters) .profect-hero__points { display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
:where(body.java-master-roasters) .profect-hero__points li { display: flex; align-items: center; gap: 12px; color: var(--espresso); font-size: 1rem; font-weight: 600; }
:where(body.java-master-roasters) .profect-hero__points svg { flex: 0 0 24px; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--button-gradient); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:where(body.java-master-roasters) .profect-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
:where(body.java-master-roasters) .profect-hero__download-btn { display: inline-flex; align-items: center; gap: 10px; border-color: rgba(147,67,34,.35); color: var(--espresso); background: rgba(255,255,255,.85); box-shadow: 0 4px 12px rgba(37,24,17,.05); text-decoration: none; transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease); }
:where(body.java-master-roasters) .profect-hero__download-btn:hover { border-color: var(--copper); background: #ffffff; color: var(--copper); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,24,17,.1); }
:where(body.java-master-roasters) .profect-hero__download-btn .button__icon { width: 18px; height: 18px; color: var(--copper); }
:where(body.java-master-roasters) .profect-hero__visual { position: relative; align-self: stretch; display: grid; place-items: end center; min-height: 570px; }
:where(body.java-master-roasters) .profect-hero__visual::before { position: absolute; right: 2%; bottom: 4%; left: 2%; height: 54%; border: 1px solid rgba(147,67,34,.16); border-radius: 180px 180px 22px 22px; background: linear-gradient(180deg, rgba(201,111,61,.08), rgba(201,111,61,.02)); content: ""; }
:where(body.java-master-roasters) .profect-hero__halo { position: absolute; width: min(34vw,430px); aspect-ratio: 1; top: 20%; left: 50%; transform: translateX(-50%); border: 1px solid rgba(147,67,34,.16); border-radius: 50%; box-shadow: 0 0 0 44px rgba(201,111,61,.04), 0 0 0 88px rgba(201,111,61,.02); }
:where(body.java-master-roasters) .profect-hero__visual img { position: relative; z-index: 1; width: min(100%,500px); height: 620px; padding: 12px; border: 1px solid rgba(147,67,34,.18); border-radius: 22px; object-fit: contain; object-position: center bottom; background: #fff; box-shadow: 0 24px 50px rgba(37,24,17,.12); }
:where(body.java-master-roasters) .profect-platform { position: relative; overflow: hidden; background: #1c120c; color: #fff; padding-block: clamp(60px, 8vw, 100px); }
:where(body.java-master-roasters) .profect-platform::before { position: absolute; inset: 0; opacity: .05; background-image: url('../images/coffee-bean-pattern.svg'); background-size: 140px; pointer-events: none; content: ""; }
:where(body.java-master-roasters) .profect-platform .container { position: relative; z-index: 1; }
:where(body.java-master-roasters) .profect-platform__head h2 { color: #fff; }
:where(body.java-master-roasters) .profect-platform .eyebrow { color: var(--hero-heading); }
:where(body.java-master-roasters) .profect-platform__head p { color: rgba(255,255,255,.76); }
:where(body.java-master-roasters) .profect-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
:where(body.java-master-roasters) .profect-feature-card { position: relative; padding: clamp(26px, 3.5vw, 36px); border: 1px solid rgba(244,178,122,.18); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(46,30,22,.65) 0%, rgba(26,17,12,.85) 100%); backdrop-filter: blur(12px); box-shadow: 0 16px 40px rgba(0,0,0,.25); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
:where(body.java-master-roasters) .profect-feature-card:hover { transform: translateY(-4px); border-color: rgba(244,178,122,.5); box-shadow: 0 22px 50px rgba(0,0,0,.4); }
:where(body.java-master-roasters) .profect-feature-card__num { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border: 1px solid rgba(244,178,122,.35); border-radius: 12px; background: linear-gradient(135deg, #3a251b, #22150e); color: #f4b27a; font-family: var(--font-title); font-size: 1.1rem; font-weight: 700; }
:where(body.java-master-roasters) .profect-feature-card h3 { color: #fff; font-size: clamp(1.25rem, 1.6vw, 1.45rem); margin-bottom: 12px; }
:where(body.java-master-roasters) .profect-feature-card p { color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.6; margin: 0; }
:where(body.java-master-roasters) .profect-specs { background: linear-gradient(180deg, var(--paper), #f5ede3); padding-block: clamp(60px, 8vw, 100px); scroll-margin-top: calc(var(--header-height) + 18px); }
:where(body.java-master-roasters) .profect-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
:where(body.java-master-roasters) .profect-bento__card { padding: clamp(26px, 3vw, 36px); border: 1px solid rgba(147,67,34,.16); border-radius: var(--radius-lg); background: #ffffff; box-shadow: 0 16px 36px rgba(37,24,17,.06); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
:where(body.java-master-roasters) .profect-bento__card:hover { transform: translateY(-3px); border-color: rgba(201,111,61,.38); box-shadow: 0 22px 48px rgba(37,24,17,.1); }
:where(body.java-master-roasters) .profect-bento__header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(147,67,34,.12); }
:where(body.java-master-roasters) .profect-bento__icon { width: 24px; height: 24px; color: var(--copper); flex-shrink: 0; }
:where(body.java-master-roasters) .profect-bento__header h3 { margin: 0; color: var(--espresso); font-size: clamp(1.2rem, 1.5vw, 1.45rem); font-family: var(--font-title); font-weight: 700; }
:where(body.java-master-roasters) .profect-bento__dl { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
:where(body.java-master-roasters) .profect-bento__dl div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-radius: 6px; background: rgba(245,237,227,.45); border-left: 3px solid var(--copper); gap: 16px; }
:where(body.java-master-roasters) .profect-bento__dl div:nth-child(even) { background: rgba(245,237,227,.8); }
:where(body.java-master-roasters) .profect-bento__dl dt { font-weight: 700; color: var(--espresso); font-size: 0.95rem; white-space: nowrap; }
:where(body.java-master-roasters) .profect-bento__dl dd { margin: 0; color: var(--ink); font-size: 0.95rem; text-align: right; }
:where(body.java-master-roasters) .roaster-request__form .field select { border: 1px solid rgba(255,255,255,.18); background: #2a1b14; color: #fff; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); width: 100%; font-size: 1rem; }
:where(body.java-master-roasters) .roaster-request__form .field select:hover { border-color: rgba(244,178,122,.62); background: #352219; }
:where(body.java-master-roasters) .roaster-request__form .field select:focus { border-color: #f4b27a; background: #352219; outline: 0; box-shadow: 0 0 0 3px rgba(244,178,122,.18); }
@media (prefers-reduced-motion: reduce) {
:where(body.java-master-roasters) .product-card:hover, :where(body.java-master-roasters) .product-card:focus-within, :where(body.java-master-roasters) .button:hover { transform: none; }
:where(body.java-master-roasters) .reveal { opacity: 1; transform: none; }
}