@charset "UTF-8";

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400.ttf") format("truetype");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-400.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-700.ttf") format("truetype");
}

:root {
  --yg-blue: #204787;
  --yg-blue-hover: #173C78;
  --yg-ink: #0E1B31;
  --yg-red: #EB0036;
  --yg-mist: #F4F6FA;
  --yg-white: #FFFFFF;
  --yg-line: #DFE5EE;
  --yg-muted: #5B6472;
  --yg-font-heading: "Manrope", "Arial", sans-serif;
  --yg-font-body: "DM Sans", "Arial", sans-serif;
  --yg-container: 1160px;
  --yg-nav-height: 79px;
  --yg-nav-height-mobile: 67px;
  --yg-hero-min-height: 670px;
  --yg-section-space: 112px;
  --yg-section-space-mobile: 74px;
  --yg-content-gutter: 24px;
  --yg-content-gutter-mobile: 18px;
  --yg-nav-height: 79px;
  --yg-nav-height-mobile: 67px;
}

.yg-home-page {
  margin: 0;
  color: var(--yg-ink);
  background: #fff;
  font-family: var(--yg-font-body);
}
.yg-home-container { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.yg-skip-link { position: absolute; z-index: 20; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); background: #fff; color: var(--yg-ink); }
.yg-skip-link:focus { transform: none; }
.yg-topline { min-height: 34px; background: var(--yg-ink); color: rgba(255,255,255,.78); font: 400 11px/1.4 var(--yg-font-body); letter-spacing: .08em; }
.yg-topline .yg-home-container { min-height: 34px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.yg-topline a { color:#fff; text-decoration:none; }
.yg-header { position:relative; z-index:5; background:#fff; border-bottom:1px solid #e7ebf1; }
.yg-header__inner { min-height:var(--yg-nav-height); display:flex; align-items:center; justify-content:space-between; gap:30px; }
.yg-brand { color:var(--yg-ink); text-decoration:none; font:700 27px/1 var(--yg-font-heading); letter-spacing:0; }
.yg-brand span { color:var(--yg-blue); }
.yg-nav { display:flex; align-items:center; gap:34px; }
.yg-nav a { color:var(--yg-ink); text-decoration:none; font:600 13px/1.2 var(--yg-font-body); }
.yg-nav a:hover { color:var(--yg-blue); }
.yg-nav .yg-nav__cta { padding:13px 18px; border:1px solid var(--yg-blue); color:var(--yg-blue); }
.yg-nav .yg-nav__cta:hover { background:var(--yg-blue); color:#fff; }
.yg-hero { position:relative; min-height:670px; display:flex; align-items:center; overflow:hidden; color:#fff; background:linear-gradient(108deg,#0b172c 0%,#102746 58%,#173b68 100%); }
.yg-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 77% 42%,rgba(79,113,157,.24),transparent 42%),linear-gradient(90deg,rgba(7,16,31,.18),transparent 78%); }
.yg-hero__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,17,32,.20) 0%,rgba(8,17,32,.05) 68%,rgba(8,17,32,.16) 100%); }
.yg-hero__content { position:relative; z-index:1; padding-block:94px 104px; }
.yg-eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 22px; color:var(--yg-blue); font:700 11px/1.35 var(--yg-font-heading); letter-spacing:.13em; text-transform:uppercase; }
.yg-hero .yg-eyebrow { color:rgba(255,255,255,.78); }
.yg-eyebrow span { width:22px; height:2px; display:inline-block; background:var(--yg-red); }
.yg-hero h1 { max-width:850px; margin:0; color:#fff; font:700 clamp(54px,6vw,82px)/1.04 var(--yg-font-heading); letter-spacing:0; }
.yg-hero h1 em { color:#fff; font-style:normal; }
.yg-hero h1 em::after { content:""; display:block; width:76px; height:5px; margin-top:17px; background:var(--yg-red); }
.yg-hero__copy { max-width:610px; margin:28px 0 0; color:rgba(255,255,255,.83); font:400 17px/1.65 var(--yg-font-body); }
.yg-hero__actions { display:flex; align-items:center; gap:26px; margin-top:32px; }
.yg-home-page .yg-button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; gap:17px; padding:0 20px; border:1px solid var(--yg-red); background:var(--yg-red); color:#fff; font:700 13px/1.2 var(--yg-font-heading); text-decoration:none; }
.yg-home-page .yg-button:hover { border-color:#c90030; background:#c90030; }
.yg-text-link { color:#fff; font:600 13px/1.4 var(--yg-font-body); text-decoration:none; }
.yg-text-link span { margin-left:7px; color:#ff5272; }
.yg-hero__note { display:flex; align-items:center; gap:12px; margin-top:56px; color:rgba(255,255,255,.58); font:400 12px/1.5 var(--yg-font-body); }
.yg-hero__note-mark { width:7px; height:7px; border:1px solid var(--yg-red); transform:rotate(45deg); }
.yg-hero__index { position:absolute; right:max(24px,calc((100vw - 1160px)/2)); bottom:40px; color:rgba(255,255,255,.45); font:600 10px/1 var(--yg-font-heading); letter-spacing:.2em; writing-mode:vertical-rl; }
.yg-intro { padding:65px 0 68px; background:#fff; }
.yg-intro__inner { display:grid; grid-template-columns:220px 1fr 4px; align-items:center; gap:44px; }
.yg-intro .yg-eyebrow { margin:0; }
.yg-intro__statement { max-width:780px; margin:0; color:var(--yg-ink); font:600 clamp(20px,2.3vw,28px)/1.42 var(--yg-font-heading); }
.yg-intro__rule { width:4px; height:60px; background:var(--yg-red); }
.yg-section { padding-block:96px; }
.yg-services { background:var(--yg-mist); }
.yg-section-heading { display:grid; grid-template-columns:1fr minmax(260px,390px); align-items:end; gap:42px; margin-bottom:48px; }
.yg-section-heading .yg-eyebrow,.yg-process__heading .yg-eyebrow { margin-bottom:14px; }
.yg-section-heading h2,.yg-process h2 { margin:0; color:var(--yg-ink); font:700 clamp(36px,4vw,52px)/1.1 var(--yg-font-heading); letter-spacing:0; }
.yg-section-heading>p { margin:0 0 5px; color:#536071; font:400 15px/1.65 var(--yg-font-body); }
.yg-service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #d9e0ea; border-bottom:1px solid #d9e0ea; }
.yg-service { min-width:0; position:relative; padding:28px 24px 31px 0; }
.yg-service+.yg-service { padding-left:24px; border-left:1px solid #d9e0ea; }
.yg-service__number { color:var(--yg-red); font:700 11px/1 var(--yg-font-heading); letter-spacing:.12em; }
.yg-service h3,.yg-steps h3 { margin:28px 0 10px; color:var(--yg-ink); font:700 18px/1.3 var(--yg-font-heading); }
.yg-service p,.yg-steps p { margin:0; color:#586575; font:400 14px/1.65 var(--yg-font-body); }
.yg-service__line { display:block; width:28px; height:2px; margin-top:24px; background:var(--yg-blue); }
.yg-process { background:#fff; }
.yg-process__layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.yg-process__heading>p:last-child { max-width:330px; margin:20px 0 0; color:#586575; font:400 15px/1.65 var(--yg-font-body); }
.yg-steps { margin:0; padding:0; list-style:none; border-top:1px solid #dfe5ee; }
.yg-steps li { display:grid; grid-template-columns:50px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid #dfe5ee; }
.yg-steps li>span { padding-top:2px; color:var(--yg-red); font:700 11px/1.4 var(--yg-font-heading); letter-spacing:.1em; }
.yg-steps h3 { margin:0 0 6px; }
.yg-footer { background:var(--yg-ink); color:#fff; }
.yg-footer__main { min-height:125px; display:flex; align-items:center; gap:30px; }
.yg-brand--footer { color:#fff; }
.yg-brand--footer span { color:#f14362; }
.yg-footer__main p { margin:0; color:rgba(255,255,255,.62); font:400 13px/1.5 var(--yg-font-body); }
.yg-footer__top { margin-left:auto; color:#fff; font:600 12px/1.4 var(--yg-font-body); text-decoration:none; }
.yg-footer__bottom { min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.52); font:400 11px/1.5 var(--yg-font-body); }


html { scroll-behavior: smooth; }
body {
  color: var(--yg-ink);
  background: var(--yg-white);
  font-family: var(--yg-font-body);
  font-size: 16px;
  line-height: 1.55;
}

.yg-container {
  width: min(var(--yg-container), calc(100% - 2 * var(--yg-content-gutter)));
  margin-inline: auto;
}

.yg-section { padding-block: var(--yg-section-space); }
.yg-eyebrow {
  margin: 0 0 12px;
  color: var(--yg-blue);
  font: 700 12px/1.3 var(--yg-font-heading);
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--yg-ink);
  font-family: var(--yg-font-heading);
  font-weight: 700;
  line-height: 1.12;
}
h1 { font-size: clamp(42px, 6.25vw, 80px); }
h2 { font-size: clamp(34px, 4.1vw, 52px); }
h3 { font-size: clamp(25px, 2.2vw, 32px); }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
p, li { font-family: var(--yg-font-body); }
small, .yg-small { font-size: 14px; line-height: 1.5; color: var(--yg-muted); }

.yg-link, a { color: var(--yg-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--yg-blue-hover); }
.yg-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid var(--yg-blue);
  border-radius: 0;
  background: var(--yg-blue);
  color: var(--yg-white);
  font: 700 14px/1.2 var(--yg-font-heading);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.yg-button:hover, .yg-button:focus-visible { border-color: var(--yg-blue-hover); background: var(--yg-blue-hover); color: var(--yg-white); }
.yg-button--secondary { background: var(--yg-white); color: var(--yg-blue); }
.yg-button--secondary:hover, .yg-button--secondary:focus-visible { background: var(--yg-mist); color: var(--yg-blue-hover); }

.yg-swatch { min-height: 76px; padding: 14px; border: 1px solid var(--yg-line); }
.yg-swatch__sample { display:block; height:32px; margin-bottom:8px; background:var(--yg-blue); }
.yg-swatch--ink .yg-swatch__sample { background:var(--yg-ink); }
.yg-swatch--red .yg-swatch__sample { background:var(--yg-red); }
.yg-swatch--mist .yg-swatch__sample { background:var(--yg-mist); }
.yg-swatch--white .yg-swatch__sample { border:1px solid var(--yg-line); background:var(--yg-white); }