@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); }

/* Base-level display:none on EVERYTHING that only exists for the drawer. The
   close button is styled inside the max-width:900px block, but styling it there
   is not the same as hiding it here - without this it renders as a stray
   bordered X above the desktop nav. */
.yr-nav-close { display: none; }
.yr-nav-cta { display: none; }
.yr-backdrop { display: none; }

/* ------------------------------------------------------------------ hero -- */
/* Interior hero: the CMS layered a green low-poly wedge over a dark low-poly
   band, with the white page title on top.

   The wedge geometry has to be DETERMINISTIC relative to the text, or the
   heading runs off the green and onto the black - which is what
   `background-size: auto 190%` did: it scaled the wedge by the hero's HEIGHT,
   so where its point landed had nothing to do with where the words ended.

   Two changes fix it for good:
   - the arrow is drawn by clip-path, not by the PNG's own alpha, so its point
     is at a known percentage. The PNG is stretched to 200% of the box width and
     anchored left, so only its SOLID green half fills the shape (its own
     transparent point sits in the half that is never shown). It is an abstract
     low-poly texture, so the 2:1 stretch does not read.
   - the width is tied to the centred content shell, not to the viewport:
     `50% + 420px` keeps ~950px of flat green to the right of the shell's left
     edge at every width, because the shell's own left edge moves with 50% too.
     Anchoring to a bare percentage of the viewport does NOT hold - at 1920 the
     shell starts 360px in while the wedge starts at 0, and the text catches up
     with the point. */
.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;
  /* Half way between the original (min(74%, 900px), which let ENGINEERING run
     off the green) and the first correction (50% + 420px, which pushed the
     arrow almost to the right edge). Measured, not guessed: the INK of the
     longest heading is 406px wide, and this leaves ~350px between the text and
     the start of the taper at every width from 768 up. Measure the ink with a
     Range over the h1 - the element is block-level with max-width:700px, so its
     getBoundingClientRect is the box, not the words, and reading that made the
     clearance look 14x tighter than it is. */
  width: min(calc(50% + 300px), 90%);
  background: url("/img/Home/overlay.png") left center / 200% 100% no-repeat;
  clip-path: polygon(0 0, calc(100% - 108px) 0, 100% 50%, calc(100% - 108px) 100%, 0 100%);
}
.yr-hero > .yr-shell { position: relative; z-index: 1; }
.yr-hero h1 {
  margin: 0; text-transform: uppercase; letter-spacing: .01em;
  max-width: 700px;                 /* the longest title is ENGINEERING */
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

/* Homepage hero: the same wedge, full height, carrying the headline - with the
   robot footage playing behind it. Paint order inside the hero's own stacking
   context: the element's white background, then the video at -2, then the
   wedge at -1, then the copy. The wedge is clipped to the arrow, so the footage
   is what shows beyond its point. With no video (phone, reduced motion) the
   white background is exactly the design as it stands without it. */
.yr-hero-home {
  min-height: clamp(340px, 42vw, 520px);
  /* Dark, not white, behind the wedge. On a phone there is no video (it is
     desktop-only) so whatever the wedge does not cover IS the backdrop, and
     black matches every interior hero instead of leaving a white gap beside
     the arrow. It also makes the desktop fallback consistent for the cases
     where the video never starts - reduced motion, or autoplay refused. */
  background-color: #1b1b1b;
}
.yr-hero-home::before {
  background-image: url("/img/Home/yac-robot-fanuc.png");
}
.yr-hero-video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.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 artwork. The CMS drew this as a 950x511 table
   with the picture 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.

   The artwork is a composition, not a croppable photo: a robot in a diamond on
   the left, a green diamond on the right that the copy sits on. `cover` cuts
   the points off the diamonds at any container ratio other than 1.859, so the
   image goes in as a real <img> that is never cropped and the copy is placed
   over the green diamond by percentage - which maps exactly onto the artwork,
   because the img always fills the box. */
.yr-statement {
  position: relative;
  max-width: 950px;
  margin-inline: auto;
}
.yr-statement-art { display: block; width: 100%; height: auto; }
.yr-statement-panel {
  position: absolute;
  /* the CMS's 430px rail on a 950px table = the left 45.3% */
  left: 45.3%; right: 0; top: 50%; transform: translateY(-50%);
  padding-inline: clamp(8px, 2vw, 24px);
  color: var(--white); text-align: center;
  font-size: clamp(11px, 1.35vw, 16px);
}
.yr-statement-panel p:first-child {
  font-family: var(--head);
  font-size: clamp(15px, 3.1vw, 30px); line-height: 1.15;
  margin-bottom: .6em;
}
.yr-statement-panel p { color: var(--white); margin-bottom: .5em; }
.yr-statement-panel p:last-child { margin-bottom: 0; }

/* Below this the green diamond is simply too small to hold the copy - it would
   overflow the artwork rather than sit on it. Stack instead: the composition
   in full, then the words on a solid green panel underneath. */
@media (max-width: 760px) {
  .yr-statement-panel {
    position: static; transform: none;
    background: var(--green-dk);
    padding: clamp(20px, 5vw, 30px);
    border-radius: 0 0 var(--radius) var(--radius);
    font-size: 16px;
  }
  .yr-statement-panel p:first-child { font-size: clamp(21px, 5vw, 26px); }
}

/* 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: 0px; }

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

  /* One row, not two. The logo band and the nav band are separate elements in
     source order; laying the HEADER out as a flex row puts the logo and the
     MENU button side by side, which removes a whole band and lifts the hero
     (and everything under it) by roughly 100px. */
  .yr-header { display: flex; align-items: center; gap: 12px; }
  .yr-header-top { flex: 1 1 auto; min-height: 0; padding-block: 10px; }
  .yr-navbar { flex: 0 0 auto; border-top: 0; }
  .yr-navbar > .yr-shell { display: flex; justify-content: flex-end; padding-left: 0; }

  /* The phone number moves OUT of the header bar and lives in the open menu
     instead (.yr-nav-cta below), so the bar is just the logo and MENU. It is
     still one tap away, which is what makes dropping it from the bar safe -
     hiding a call-to-action outright on the device most likely to use it would
     not be. */
  .yr-header-meta { display: none; }

  .yr-logo img { width: 150px; height: auto; }

  /* 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/black and disappears. Full
     bleed and no arrow at this size: the point would only eat into the space
     the words need. */
  .yr-hero::before,
  .yr-hero-home::before {
    width: 100%;
    background-size: cover;
    clip-path: none;
  }
  .yr-hero h1 { max-width: none; }
  .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; }
  /* height:auto, never a second fixed number - a hard 150x82 against the
     193x106 the attributes declare is a 0.4% stretch today and a visible one
     the moment the logo file changes */
  .yr-logo img { width: 132px; height: auto; }
  .yr-burger { padding-inline: 11px; }
  /* NOTE: no .yr-tel overrides here. The header phone is already gone at
     <=900px, and a rule like `.yr-tel span { display:none }` would also strip
     the number out of the DRAWER's call-to-action, which is the one place it
     still has to be readable. */
  .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; }
}