@charset "utf-8";
/* YAC Robot Systems - yac-robot.com
   Written for the 2026 static rebuild. Replaces publicstyle.css, responsive.css,
   mbcsmbmcp.css (the Easy Button menu), layerslider.css, feature.presenter,
   instalink, html5lightbox and Window.Metro.css.

   Palette and type are taken from the CMS's computed styles so the rebuild reads
   as the same site: brand green #16af51, dark #222, accent #fdd92a on button
   hover, the pale band #ebf6f7, Rubik headings over Open Sans body copy. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* The CMS's brand green is #16af51 and it measures 2.88:1 on white — it fails
     WCAG AA even at the 3:1 large-text threshold, and it had been carrying the
     h2s and the header phone number for years. Keep it for DECORATION (the
     wedge, borders, the tile band) and use the darker one, same hue 143deg and
     same saturation, for anything that has to be read: #11883f is 4.55:1 on
     white AND carries white text at 4.55:1, so one token covers green-on-white
     and white-on-green. */
  --green:        #16af51;   /* decorative only - 2.88:1, never for text */
  --green-dk:     #11883f;   /* text on white, and bg under white text */
  --green-lt:     #e8f7ee;
  --ink:          #222222;
  --ink-2:        #2e2e2e;
  --body:         #333333;
  --muted:        #5f6b63;
  --rule:         #dfe4e0;
  --band:         #ebf6f7;
  --accent:       #fdd92a;
  --white:        #ffffff;

  --head: Rubik, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --text: "Open Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --shell:   1200px;
  --gutter:  clamp(16px, 4vw, 40px);
  --header-h: 96px;          /* logo band */
  --nav-h:    56px;          /* nav bar   */

  --radius: 4px;
  --shadow: 0 2px 10px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.18);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { font-family: var(--head); font-weight: 500; margin: 0 0 .5em; line-height: 1.15; }
h1 { font-size: clamp(30px, 5.2vw, 60px); color: var(--white); }
h2 { font-size: clamp(23px, 2.6vw, 28px); line-height: 1.22; color: var(--green-dk); margin-bottom: 12px; }
h3 { font-size: clamp(19px, 2vw, 22px); line-height: 1.28; color: #333; font-weight: 400; margin: 12px 0 10px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

img, picture, video, iframe { max-width: 100%; }
img { height: auto; border: 0; }

hr {
  border: 0; height: 1px; background: var(--rule);
  margin: clamp(32px, 5vw, 56px) 0;
}

ul { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--green-dk);
  outline-offset: 2px;
  border-radius: 2px;
}

.yr-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.yr-skip {
  position: absolute; left: 8px; top: -60px; z-index: 2000;
  background: var(--ink); color: var(--white); padding: 12px 20px;
  border-radius: var(--radius); font-family: var(--head); font-weight: 500;
  transition: top .2s var(--ease);
}
.yr-skip:focus { top: 8px; color: var(--white); }

.yr-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- header -- */
.yr-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--white);
  box-shadow: 0 1px 0 var(--rule);
}
/* The drawer's backdrop is a child of <body>; a sticky header opens its own
   stacking context, so lift the header over the backdrop while the panel is
   open or every tap on a menu item lands on the backdrop instead. */
html.yr-nav-open .yr-header { z-index: 1300; }

.yr-header-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--header-h); padding-block: 12px;
}

.yr-logo { display: inline-flex; flex: 0 0 auto; }
.yr-logo img { width: 193px; height: 106px; display: block; }

.yr-header-meta { text-align: right; font-family: var(--head); line-height: 1.5; }
.yr-sub { font-size: clamp(13px, 1.4vw, 18px); color: var(--ink); }
.yr-sub strong { font-weight: 500; }

.yr-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(18px, 2.2vw, 22px); font-weight: 500;
  color: var(--green-dk); text-decoration: none; white-space: nowrap;
}
.yr-tel:hover { color: var(--ink); }
.yr-tel svg { width: 1em; height: 1em; flex: none; }

/* ------------------------------------------------------------------- nav -- */
.yr-navbar { background: var(--white); border-top: 1px solid var(--rule); }

.yr-burger {
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 14px; margin-block: 4px;
  font: 500 15px/1 var(--head); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
}
.yr-burger:hover { border-color: var(--green); color: var(--green-dk); }
.yr-burger-box { position: relative; width: 20px; height: 14px; flex: none; }
.yr-burger-box i {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.yr-burger-box i:nth-child(1) { top: 0; }
.yr-burger-box i:nth-child(2) { top: 6px; }
.yr-burger-box i:nth-child(3) { top: 12px; }
.yr-burger[aria-expanded="true"] .yr-burger-box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.yr-burger[aria-expanded="true"] .yr-burger-box i:nth-child(2) { opacity: 0; }
.yr-burger[aria-expanded="true"] .yr-burger-box i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.yr-nav-list {
  display: flex; flex-wrap: wrap; align-items: stretch;
  margin: 0; padding: 0; list-style: none;
}
.yr-nav-list a {
  display: flex; align-items: center;
  min-height: var(--nav-h); padding: 8px clamp(12px, 1.7vw, 25px);
  font: 400 16px/1.25 var(--head); color: var(--ink-2); text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.yr-nav-list a:hover,
.yr-nav-list a:focus-visible { background: var(--green-dk); color: var(--white); border-bottom-color: var(--ink); }
.yr-nav-list a[aria-current="page"] { color: var(--green-dk); border-bottom-color: var(--green); font-weight: 500; }
.yr-nav-list a[aria-current="page"]:hover { color: var(--white); }

.yr-nav-cta { display: none; }
.yr-backdrop { display: none; }

/* ------------------------------------------------------------------ hero -- */
/* Interior hero: the CMS layered a green low-poly wedge (overlay.png, which
   really is cut out - alpha 0 in its right corners) over a dark low-poly band,
   with the white page title on top. Both layers are backgrounds here. */
.yr-hero {
  position: relative; isolation: isolate;
  background: #1b1b1b center/cover no-repeat;
  color: var(--white);
  display: flex; align-items: center;
  min-height: 225px;
  padding-block: clamp(34px, 6vw, 62px);
  overflow: hidden;
}
.yr-hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1;
  width: min(74%, 900px);
  background: url("/img/Home/overlay.png") left center/auto 190% no-repeat;
}
.yr-hero > .yr-shell { position: relative; z-index: 1; }
.yr-hero h1 {
  margin: 0; text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

/* Homepage hero: the same wedge, full height, carrying the headline. */
.yr-hero-home {
  min-height: clamp(340px, 42vw, 520px);
  background: var(--white);
}
.yr-hero-home::before {
  width: min(72%, 940px);
  background: url("/img/Home/yac-robot-fanuc.png") left center/cover no-repeat;
}
.yr-hero-home .yr-hero-grid { display: block; }
.yr-hero-home .yr-hero-copy { max-width: 620px; }
.yr-hero-home h1 {
  color: var(--white); font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 400; line-height: 1.2; margin-bottom: 28px;
}
.yr-hero-home h1 strong {
  display: block; font-size: clamp(42px, 7vw, 80px); font-weight: 500; line-height: .98;
}

/* ----------------------------------------------------------------- main --- */
.yr-main { display: block; }
.yr-section { padding-block: clamp(34px, 5.5vw, 64px); }
.yr-section-tight { padding-block: clamp(24px, 3.5vw, 40px); }

.yr-page-title { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.yr-page-title h2 { color: var(--ink); font-size: clamp(26px, 4.2vw, 42px); }

/* two-column feature row: image beside copy. The CMS drew these as
   <table width:1020px align=center> with one image cell and one text cell. */
.yr-split {
  display: grid; gap: clamp(22px, 4vw, 48px); align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.yr-split > * { min-width: 0; }
.yr-split img { display: block; margin-inline: auto; }
.yr-split-media { text-align: center; }

/* engineering: copy beside the photo grid */
.yr-split-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }

/* the homepage claim over its photo. The CMS drew this as a 950x511 table with
   the photo in the table's own background-image and a 430px rail cell holding
   the copy off the left edge - fixed at both dimensions, so it could never be
   responsive. */
.yr-statement {
  position: relative; isolation: isolate;
  display: flex; justify-content: flex-end; align-items: center;
  min-height: clamp(300px, 42vw, 511px);
  padding: clamp(24px, 4vw, 48px);
  background-color: #1e2a22;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-radius: var(--radius); overflow: hidden;
}
.yr-statement-panel {
  width: min(50%, 460px);
  color: var(--white); text-align: center;
  font-size: clamp(15px, 1.7vw, 16px);
}
.yr-statement-panel p:first-child {
  font-family: var(--head);
  font-size: clamp(21px, 3vw, 30px); line-height: 1.15;
  margin-bottom: 1em;
}
.yr-statement-panel p { color: var(--white); }

@media (max-width: 720px) {
  .yr-statement {
    justify-content: center;
    background-position: 32% center;
  }
  /* at this width the photo's subject is behind the copy - hold the type up */
  .yr-statement::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(0,0,0,.5);
  }
  .yr-statement-panel { width: 100%; max-width: 420px; }
}

/* three service tiles */
.yr-tiles {
  display: grid; gap: clamp(22px, 3.5vw, 40px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.yr-tile { text-align: center; }
.yr-tile img { width: 100px; height: 100px; margin: 0 auto 24px; display: block; }
.yr-tile h2 { font-weight: 200; }
.yr-tile p { margin-bottom: 22px; }

/* partner logos */
.yr-partners {
  display: grid; align-items: center; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: minmax(160px, 1.2fr) repeat(4, minmax(0, 1fr));
}
.yr-partners h2 { font-weight: 200; color: var(--ink); margin: 0; }
.yr-partners img { display: block; margin-inline: auto; }

/* video cards */
.yr-videos {
  display: grid; gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.yr-video { margin: 0; }
.yr-video-frame {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--radius); overflow: hidden;
}
.yr-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yr-video figcaption {
  font-family: var(--head); font-size: clamp(18px, 2vw, 24px); color: var(--ink);
  margin-top: 14px;
}

/* photo gallery (was the mediaBoxes/isotope/magnific-popup stack) */
.yr-gallery {
  display: grid; gap: 15px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.yr-gallery li { margin: 0; }
.yr-gallery button {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden; line-height: 0;
}
.yr-gallery img {
  display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover;
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.yr-gallery button:hover img,
.yr-gallery button:focus-visible img { transform: scale(1.05); filter: brightness(.85); }

/* lightbox */
.yr-lightbox {
  border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh;
  overflow: visible;
}
.yr-lightbox::backdrop { background: rgba(0,0,0,.86); }
.yr-lightbox img { display: block; max-width: 96vw; max-height: 86vh; width: auto; height: auto; }
.yr-lightbox-close {
  position: absolute; top: -14px; right: -14px;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--white); color: var(--ink); font-size: 22px; line-height: 1;
  box-shadow: var(--shadow-lg);
}
.yr-lightbox-close:hover { background: var(--green); color: var(--white); }
.yr-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ink); font-size: 24px; line-height: 1;
}
.yr-lightbox-nav:hover { background: var(--green); color: var(--white); }
.yr-lightbox-prev { left: -60px; }
.yr-lightbox-next { right: -60px; }

/* ---------------------------------------------------------------- buttons - */
.yr-btn, .yr-btn-2 {
  --btn-sweep: var(--accent);
  position: relative; z-index: 0; display: inline-block; vertical-align: middle;
  padding: 17px 50px;
  font-family: var(--head); font-size: 18px; line-height: 1.2; font-weight: 400;
  color: var(--white); background: var(--ink); text-decoration: none;
  border: 0; border-radius: var(--radius); cursor: pointer;
  transition: color .3s var(--ease);
}
.yr-btn-2 { --btn-sweep: var(--green-dk); padding: 12px 35px; font-size: 16px; }
.yr-btn::before, .yr-btn-2::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-sweep); border-radius: inherit;
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .3s var(--ease);
}
.yr-btn:hover, .yr-btn:focus-visible,
.yr-btn-2:hover, .yr-btn-2:focus-visible { color: var(--white); }
.yr-btn:hover::before, .yr-btn:focus-visible::before,
.yr-btn-2:hover::before, .yr-btn-2:focus-visible::before { transform: scaleY(1); }
.yr-btn svg, .yr-btn-2 svg { width: 1em; height: 1em; vertical-align: -.11em; margin-left: .5em; }
/* the yellow sweep is too light for white type - darken the label on it */
.yr-btn:hover, .yr-btn:focus-visible { color: var(--ink); }

/* --------------------------------------------------------------- yutaka --- */
.yr-yutaka {
  background: #1c2b21 url("/graphics/subfooter2.jpg") center/cover no-repeat;
  color: var(--white);
  padding-block: clamp(48px, 8vw, 96px);
}
/* The band's photo is solid bright green exactly where the panel sits, so the
   white copy the CMS put there measures 1.94:1 — it has been unreadable for
   years. A 45% black scrim behind the panel only takes it to 5.78:1 and leaves
   the rest of the photograph alone. */
.yr-yutaka-inner {
  max-width: 460px;
  background: rgba(0,0,0,.45);
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius);
}
.yr-yutaka h2 {
  color: var(--white); font-size: clamp(26px, 3.6vw, 36px); line-height: 1.17;
  font-weight: 500; margin-bottom: 20px;
}
.yr-yutaka p { color: var(--white); margin: 0; }

/* --------------------------------------------------------------- footer --- */
.yr-partners-band { background: var(--white); }
.yr-tiles-band { background: var(--band); }

.yr-footer {
  background: #1d1d1d url("/graphics/footer.jpg") center/cover no-repeat;
  color: var(--white);
  padding-block: clamp(30px, 4vw, 44px);
  font-family: var(--head);
}
.yr-footer-grid {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  align-items: center; justify-content: space-between;
}
.yr-footer-contact { font-weight: 200; }
.yr-footer-contact .sep { color: #4fd07a; padding-inline: 14px; }
.yr-footer a { color: var(--white); text-decoration: none; }
.yr-footer a:hover { color: #7ce89a; text-decoration: underline; }
.yr-social { display: flex; gap: 14px; align-items: center; }
.yr-social a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; }
.yr-social svg { width: 30px; height: 30px; fill: currentColor; }
.yr-copyright { width: 100%; margin: 10px 0 0; font-weight: 200; font-size: 15px; }

/* ----------------------------------------------------------------- forms -- */
.yr-contact-grid {
  display: grid; gap: clamp(28px, 4vw, 48px);
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: start;
}
.yr-form { display: grid; gap: 18px; }
.yr-field { display: grid; gap: 6px; }
.yr-field label { font-family: var(--head); font-weight: 500; color: var(--ink); }
.yr-field .req { color: #c0392b; }
.yr-field input, .yr-field textarea {
  width: 100%; padding: 11px 13px;
  font-family: var(--text); font-size: 16px; color: var(--body);
  background: var(--white); border: 1px solid #bcc4be; border-radius: var(--radius);
}
.yr-field textarea { min-height: 150px; resize: vertical; }
.yr-field input:focus, .yr-field textarea:focus { border-color: var(--green); }
.yr-field input[aria-invalid="true"], .yr-field textarea[aria-invalid="true"] { border-color: #c0392b; }
.yr-err { color: #c0392b; font-size: 14px; font-weight: 600; }
.yr-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.yr-note {
  padding: 14px 18px; border-radius: var(--radius); border-left: 4px solid;
  font-size: 15px;
}
.yr-note-ok  { background: var(--green-lt); border-color: var(--green); color: #14572f; }
.yr-note-bad { background: #fdecea;        border-color: #c0392b; color: #7d241a; }

.yr-map { border: 0; width: 100%; aspect-ratio: 4 / 3; min-height: 320px; border-radius: var(--radius); }

.yr-address { font-style: normal; line-height: 1.8; }
.yr-address a { font-weight: 600; }

/* ------------------------------------------------------------------ 404 --- */
.yr-404 { text-align: center; padding-block: clamp(48px, 8vw, 90px); }
.yr-404 h2 { color: var(--ink); }

/* ============================================================ responsive == */

/* Nav collapses before the eight items would wrap. */
@media (max-width: 1080px) {
  .yr-nav-list a { padding-inline: clamp(9px, 1.3vw, 16px); font-size: 15px; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }

  .yr-burger { display: inline-flex; }

  .yr-navbar { border-top: 0; }
  .yr-navbar > .yr-shell { display: flex; justify-content: flex-end; }

  /* off-canvas drawer */
  .yr-nav {
    position: fixed; inset: 0 0 0 auto; z-index: 1200;
    width: min(340px, 86vw);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .3s var(--ease);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 0 32px;
    display: flex; flex-direction: column;
  }
  html.yr-nav-open .yr-nav { transform: translateX(0); }

  .yr-nav-close {
    align-self: flex-end; margin: 0 16px 8px;
    width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: var(--radius);
    background: none; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
  }
  .yr-nav-close:hover { border-color: var(--green); color: var(--green-dk); }

  .yr-nav-list { display: block; }
  .yr-nav-list a {
    min-height: 52px; padding: 14px 24px; font-size: 17px;
    border-bottom: 1px solid var(--rule);
  }
  .yr-nav-list a:hover, .yr-nav-list a:focus-visible { border-bottom-color: var(--rule); }
  .yr-nav-list a[aria-current="page"] {
    border-left: 4px solid var(--green); padding-left: 20px;
    background: var(--green-lt); border-bottom-color: var(--rule);
  }

  /* the phone number is the call to action on a phone - never hide it */
  .yr-nav-cta { display: block; padding: 22px 24px 0; }
  .yr-nav-cta .yr-tel { font-size: 22px; }
  .yr-nav-cta p { margin: 10px 0 0; font-size: 14px; color: var(--muted); font-family: var(--text); }

  /* With JS off the burger cannot open anything, so the drawer would put the
     whole nav permanently off-screen. Fall back to a plain stacked list.
     <html class="no-js"> is removed by an inline script in <head>. */
  html.no-js .yr-burger { display: none; }
  html.no-js .yr-nav {
    position: static; width: auto; transform: none;
    box-shadow: none; padding: 0 0 8px; overflow: visible;
  }
  html.no-js .yr-nav-close { display: none; }
  html.no-js .yr-navbar > .yr-shell { display: block; }

  .yr-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  html.yr-nav-open .yr-backdrop { opacity: 1; visibility: visible; }
  html.yr-nav-open { overflow: hidden; }

  .yr-split-wide { grid-template-columns: minmax(0, 1fr); }
  .yr-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; }
  .yr-partners h2 { grid-column: 1 / -1; text-align: center; }
  .yr-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yr-contact-grid { grid-template-columns: minmax(0, 1fr); }

  /* the wedge has to reach under the full width of the copy once it wraps, or
     the last line of the headline sits on white and disappears */
  .yr-hero::before,
  .yr-hero-home::before { width: 100%; background-size: cover; }
  .yr-hero-home { min-height: 300px; }

  .yr-lightbox-prev { left: 4px; }
  .yr-lightbox-next { right: 4px; }
}

@media (max-width: 720px) {
  .yr-split { grid-template-columns: minmax(0, 1fr); }
  .yr-tiles { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .yr-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yr-footer-grid { justify-content: flex-start; }
  .yr-footer-contact .sep { padding-inline: 8px; }
}

@media (max-width: 560px) {
  .yr-header-top { gap: 10px; }
  .yr-logo img { width: 150px; height: 82px; }
  /* keep the logo, the call button and the burger on one 320px line */
  .yr-sub { display: none; }
  .yr-tel span { display: none; }
  .yr-tel {
    width: 44px; height: 44px; justify-content: center;
    border: 1px solid var(--green); border-radius: 50%;
  }
  .yr-tel svg { width: 20px; height: 20px; }
  .yr-videos { grid-template-columns: minmax(0, 1fr); }
  .yr-footer-contact .sep { display: block; height: 0; overflow: hidden; padding: 0; }
  .yr-btn { padding: 15px 32px; font-size: 16px; }
}

@media (max-width: 400px) {
  .yr-gallery { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ print - */
@media print {
  .yr-header, .yr-navbar, .yr-backdrop, .yr-hero, .yr-yutaka, .yr-skip { display: none !important; }
  body { color: #000; }
}