/* Native blocks for business copy, experience figures and service responsibilities. */
.janogago-blocks h1 {
 font-size: clamp(56px, 5.4vw, 80px);
 letter-spacing: -.035em;
 line-height: 1.04;
 text-wrap: balance;
}
.janogago-blocks h2 {
 font-size: clamp(38px, 4.8vw, 72px);
 letter-spacing: -.035em;
 line-height: 1.08;
 text-wrap: balance;
}
.janogago-blocks h3 { letter-spacing: -.025em; }
.janogago-blocks .hero-copy { padding-top: 80px; padding-bottom: 80px; }
.janogago-blocks .hero-visual.hero-machine {
 background: linear-gradient(90deg, var(--ink), #101010 45%, #080808);
}
.janogago-blocks .hero-visual.hero-machine:after { content: none; }
.janogago-blocks .hero-visual.hero-machine img {
 filter: none;
 height: 72%;
 inset: 14%;
 object-fit: contain;
 object-position: center;
 width: 72%;
}
.jg-hero-model { position: absolute; inset: 0; }
.jg-model-fallback {
 position: absolute;
 inset: 0;
 opacity: 1;
 transition: opacity .32s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}
/* The exported poster uses the renderer's framing, including transparent margins. */
.jg-hero-model[data-model-poster] .jg-model-fallback {
 inset: 7% 8%;
 width: 84%;
 height: 86%;
}
.janogago-blocks .hero-visual.hero-machine .jg-model-poster-image {
 inset: 0;
 width: 100%;
 height: 100%;
}
.jg-model-viewer {
 /* The matching preview covers loading; suppress the viewer's delayed loading bar. */
 --progress-bar-height: 0px;
 display: block;
 position: absolute;
 inset: 7% 8%;
 width: 84%;
 height: 86%;
 opacity: 0;
 pointer-events: none;
 transition: opacity .32s cubic-bezier(.16, 1, .3, 1);
}
.jg-hero-model[data-model-state="revealing"] .jg-model-viewer,
.jg-hero-model[data-model-state="ready"] .jg-model-viewer { opacity: 1; }
.jg-hero-model[data-model-state="ready"] .jg-model-viewer { pointer-events: auto; }
.jg-hero-model[data-model-state="revealing"] .jg-model-fallback,
.jg-hero-model[data-model-state="ready"] .jg-model-fallback {
 opacity: 0;
 visibility: hidden;
 transition: opacity .32s cubic-bezier(.16, 1, .3, 1), visibility 0s .32s;
}
/* Keep identical pixels behind the fading model to avoid a brightness dip. */
.jg-hero-model[data-model-poster][data-model-state="revealing"] .jg-model-fallback {
 opacity: 1;
 visibility: visible;
 transition: none;
}
.jg-hero-model[data-model-poster][data-model-state="ready"] .jg-model-fallback { transition: none; }
.jg-model-controls {
 position: absolute;
 top: 24px;
 inset-inline-end: 24px;
 z-index: 1;
 color: var(--cream);
}
.jg-model-controls[hidden] { display: none; }
.jg-model-motion {
 background: transparent;
 color: inherit;
 border: 1px solid rgba(255,250,242,.45);
 border-radius: 0;
 display: grid;
 place-items: center;
 width: 44px;
 height: 44px;
 padding: 0;
 cursor: pointer;
}
.jg-model-motion:hover { background: rgba(255,250,242,.08); }
.jg-model-motion:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.jg-model-motion svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jg-model-motion[data-motion="running"] .jg-model-icon-play,
.jg-model-motion[data-motion="paused"] .jg-model-icon-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
 .jg-model-viewer,
 .jg-hero-model[data-model-state] .jg-model-fallback { transition: none; }
}
@media (min-width: 851px) {
 .janogago-blocks .hero { grid-template-columns: 1fr 1fr; }
 .janogago-blocks .hero-copy { align-self: center; }
}
.janogago-blocks .jg-image-note {
 font-size: 13px;
 line-height: 1.6;
 margin: 32px 0 0;
 max-width: 75ch;
}
.janogago-blocks .experience { background: var(--cream); }
/* Real machine photos remain native, replaceable WordPress Image blocks. */
.janogago-blocks .vending-showcase {
 background: var(--ink);
 color: var(--cream);
 padding-block: clamp(72px, 8vw, 112px);
}
.janogago-blocks .jg-vending-intro {
 align-items: end;
 display: grid;
 gap: 40px;
 grid-template-columns: 1.25fr 1fr;
}
.janogago-blocks .jg-vending-intro h2 { margin: 0; max-width: 650px; }
.janogago-blocks .jg-vending-intro .jg-section-lede { color: #d2cdc2; margin: 0; max-width: 42ch; }
.janogago-blocks .jg-vending-intro > .wp-block-group__inner-container,
.janogago-blocks .jg-vending-display > .wp-block-group__inner-container { display: contents; }
.janogago-blocks .jg-vending-display {
 align-items: end;
 display: grid;
 gap: clamp(20px, 3vw, 48px);
 grid-template-columns: 1fr 1fr 1.8fr;
 margin-top: 56px;
}
.janogago-blocks .jg-vending-photo {
 height: clamp(300px, 32vw, 460px);
 margin: 0;
 min-width: 0;
 overflow: hidden;
 position: relative;
}
/* Frame the supplied transparent canvases without modifying the original photos. */
.janogago-blocks .jg-vending-photo img {
 bottom: var(--photo-bottom, 0%);
 height: var(--photo-height, 100%);
 left: 50%;
 max-width: none;
 position: absolute;
 transform: translateX(var(--photo-center, -50%));
 width: auto;
}
.janogago-blocks .jg-vending-photo-front { --photo-height: 144.09%; --photo-bottom: -21.38%; --photo-center: -50.59%; }
.janogago-blocks .jg-vending-photo-side { --photo-height: 126.21%; --photo-bottom: -8.78%; --photo-center: -44.16%; }
.janogago-blocks .jg-vending-photo-double { --photo-height: 107.08%; --photo-bottom: -1.23%; --photo-center: -50.25%; }
@media (max-width: 850px) {
 .janogago-blocks .jg-vending-intro { grid-template-columns: 1fr; gap: 24px; }
 .janogago-blocks .jg-vending-display { gap: 28px 20px; grid-template-columns: 1fr 1fr; margin-top: 40px; }
 .janogago-blocks .jg-vending-photo { height: clamp(205px, 61vw, 350px); }
 .janogago-blocks .jg-vending-photo-double { grid-column: 1 / -1; height: clamp(280px, 80vw, 440px); }
}
.janogago-blocks .clients { background: var(--paper); }
.janogago-blocks .jg-experience-layout {
 display: grid;
 gap: 10%;
 grid-template-columns: 1.2fr 1fr;
}
.janogago-blocks .jg-experience-layout > .wp-block-column,
.janogago-blocks .jg-responsibility-grid > .wp-block-column { margin: 0; min-width: 0; }
.janogago-blocks .jg-experience-layout p:not(.jg-experience-number) { font-size: 17px; line-height: 1.7; }
.janogago-blocks .jg-experience-stat { border-top: 1px solid var(--line); padding: 24px 0; }
.janogago-blocks .jg-experience-stat:first-child { border-top: 0; }
.janogago-blocks .jg-experience-number {
 color: var(--red);
 font-family: var(--serif);
 font-size: 64px;
 letter-spacing: -.03em;
 line-height: 1.1;
 margin: 0 0 8px;
}
.janogago-blocks .jg-experience-label { margin: 0; }
.janogago-blocks .jg-experience-number { font-variant-numeric: tabular-nums; }
.jg-counter-accessible {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip-path: inset(50%);
 white-space: nowrap;
 border: 0;
}
.janogago-blocks .services { background: var(--green); }
.janogago-blocks .services h2 { max-width: 930px; }
.janogago-blocks .services .jg-section-lede { max-width: 75ch; }
.janogago-blocks .jg-responsibility-grid {
 display: grid;
 gap: 8%;
 grid-template-columns: 1fr 1fr;
 margin: 52px 0 40px;
}
.janogago-blocks .jg-responsibility-grid h3 {
 font-family: var(--sans);
 font-size: 24px;
 font-weight: 800;
 line-height: 1.3;
 margin: 0 0 20px;
}
.janogago-blocks .jg-responsibility-item {
 border-top: 1px solid rgba(36, 35, 32, .35);
 font-size: 17px;
 line-height: 1.6;
 margin: 0;
 padding: 16px 0;
}
.janogago-blocks .jg-service-note { font-size: 16px; line-height: 1.7; max-width: 75ch; margin-bottom: 0; }
.janogago-blocks .suitability { background: var(--paper); }
.janogago-blocks .suitability h2 { max-width: 900px; }
.janogago-blocks .suitability p { font-size: 17px; line-height: 1.7; max-width: 75ch; }
.janogago-blocks .jg-enquiry-form label { font-family: var(--sans); font-size: 13px; letter-spacing: 0; line-height: 1.5; }
.janogago-blocks .jg-enquiry-form .button { font-family: var(--sans); }
.janogago-blocks .jg-enquiry-form .button:disabled { opacity: .65; cursor: wait; }
.janogago-blocks .jg-enquiry-form .form-message {
 background: var(--cream);
 color: var(--ink);
 display: grid;
 align-items: flex-start;
 gap: 12px;
 grid-template-columns: 24px minmax(0, 1fr) 32px;
 position: fixed;
 inset-inline-end: 24px;
 inset-block-end: 24px;
 z-index: 1000;
 width: min(480px, calc(100vw - 48px));
 margin: 0;
 padding: 24px;
 box-shadow: 0 8px 32px rgba(36, 35, 32, .2);
 animation: jg-notice-in 360ms cubic-bezier(.16, 1, .3, 1) both;
}
.janogago-blocks .form-message p { color: inherit; font-size: 16px; line-height: 1.6; margin: 0; }
.janogago-blocks .form-message svg { flex: 0 0 24px; height: 24px; margin-top: 2px; }
.janogago-blocks .jg-enquiry-form .form-message-success { background: var(--green); }
.janogago-blocks .form-message-success svg { color: var(--ink); }
.janogago-blocks .form-message-error svg { color: var(--red); }
.janogago-blocks .form-message:focus { outline: none; }
.janogago-blocks .form-message .jg-notice-close {
 appearance: none; background: transparent; border: 0; color: var(--ink);
 cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; padding: 4px; margin: -4px 0 0;
}
.janogago-blocks .form-message .jg-notice-close svg { color: inherit; width: 20px; height: 20px; margin: 0; }
.janogago-blocks .jg-notice-close:hover { background: var(--paper); }
.janogago-blocks .form-message-success .jg-notice-close:hover { background: rgba(36, 35, 32, .1); }
.janogago-blocks .jg-notice-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.janogago-blocks .form-message.jg-notice-closing { animation: jg-notice-out 140ms ease-in both; }
.janogago-blocks .form-message[hidden] { display: none; }

@media (max-width: 700px) {
 .janogago-blocks .jg-client-grid { overscroll-behavior-x: none; }
}
@keyframes jg-notice-in {
 from { opacity: 0; transform: translateY(12px); box-shadow: 0 2px 8px rgba(36, 35, 32, .08); }
 to { opacity: 1; transform: translateY(0); box-shadow: 0 8px 32px rgba(36, 35, 32, .2); }
}
@keyframes jg-notice-out { to { opacity: 0; transform: translateY(6px); } }
@media (max-width: 530px) {
 .janogago-blocks .jg-enquiry-form .form-message { inset-inline-end: 16px; inset-block-end: max(16px, env(safe-area-inset-bottom)); width: calc(100vw - 32px); padding: 20px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .janogago-blocks .jg-enquiry-form .form-message { animation: none; }
}
.janogago-blocks .section,
.janogago-blocks .contact { opacity: 1; transform: none; }
@media (max-width: 850px) {
 .janogago-blocks .jg-experience-layout,
 .janogago-blocks .jg-responsibility-grid { grid-template-columns: 1fr; gap: 36px; }
 .janogago-blocks .hero-copy { padding: 56px 24px 48px; }
 .janogago-blocks h1 { font-size: clamp(44px, 10.8vw, 76px); }
 .janogago-blocks h2 { font-size: clamp(36px, 8.5vw, 58px); }
 .janogago-blocks .jg-experience-number { font-size: 56px; }
 .janogago-blocks .hero-visual { min-height: 400px; }
 .janogago-blocks .hero-visual.hero-machine {
  background: linear-gradient(180deg, var(--ink), #101010 30%, #080808);
  height: clamp(500px, 135vw, 650px);
 }
 .janogago-blocks .jg-responsibility-grid { margin-top: 36px; }
 .janogago-blocks .section,
 .janogago-blocks .contact { padding: 72px 24px; }
}