/* YOL Living corporate pages — type scale, gutters and columns measured on yolliving.com at 1440 / 1024 / 767 / 479 / 375px. */
.yol-corp{width:calc(100% - 120px);margin:0 auto;padding-bottom:40px;color:var(--yol-ink,#222)}
.yol-corp p{margin:0 0 26px;font-size:16px;line-height:26px}
.yol-corp .yol-corp-kicker{margin:0 0 25px;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:500;font-size:calc(1rem + .3vw);line-height:1.3}
.yol-corp-heading{margin:0 0 25px;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:500;letter-spacing:0;line-height:1.3}
.yol-corp-heading--lg{font-size:calc(1rem + 2vw)}
.yol-corp-heading--md{font-size:calc(1rem + 1.2vw)}

.yol-corp-cover{margin:0 0 72px}
.yol-corp-cover img,.yol-corp-cover .yol-media-placeholder{display:block;width:100%;height:auto}
.yol-corp-cover--bleed{width:100vw;margin-inline:calc(50% - 50vw);margin-bottom:60px}
.yol-corp-media{margin:0}
.yol-corp-media img,.yol-corp-media .yol-media-placeholder{display:block;width:100%;height:auto}
.yol-corp .yol-media-placeholder{min-height:320px;background:#e5e5e5}

/* Image/text rows: columns are vertically centred against each other. */
.yol-corp-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 80px}
.yol-corp-row .yol-corp-copy>:last-child{margin-bottom:0}
.yol-corp-row--copy-img,.yol-corp-row--img-copy{width:82.6%;margin-inline:auto}
.yol-corp-row .yol-corp-copy{width:58.2%}
.yol-corp-row .yol-corp-media{width:37%}
.yol-page--kurucumuzdan-mesaj .yol-corp-row--copy-img{width:91.3%;margin-inline:0}
.yol-page--kurucumuzdan-mesaj .yol-corp-row .yol-corp-copy{width:52.6%}
.yol-page--kurucumuzdan-mesaj .yol-corp-row .yol-corp-media{width:33.5%}
.yol-corp-row--half-img-copy .yol-corp-copy,.yol-corp-row--half-img-copy .yol-corp-media{width:48%}
.yol-corp-row--columns{display:block;margin-bottom:72px}
.yol-corp-row__title{max-width:70%;margin:0 auto 25px;text-align:center}
.yol-corp-columns{display:flex;justify-content:center;align-items:flex-start;gap:4%}
.yol-corp-columns .yol-corp-copy{width:30.6%}

/* Split rows (About): 30.6% label column + 65.3% copy column, top aligned. */
.yol-corp-split{display:grid;grid-template-columns:30.6% 65.3%;column-gap:4.1%;align-items:start;margin:0 0 60px}
.yol-corp-split>.yol-corp-heading{margin:0}
.yol-corp-split .yol-corp-copy>.yol-corp-heading--md{margin-bottom:25px}
.yol-corp-accordion{padding-top:60px}
.yol-corp-accordion .yol-accordion-item,.yol-corp-accordion .yol-accordion-item:last-child{border:0;margin:0 0 20px}
.yol-corp-accordion .yol-accordion-item button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;border:0;background:none;color:inherit;font:500 20px/40px Arial,"Helvetica Neue",sans-serif;text-transform:uppercase;text-align:start;cursor:pointer}
.yol-corp-accordion .yol-accordion-item button b{font:400 18px/1 Arial,sans-serif;transition:transform .3s ease}
.yol-corp-accordion .yol-accordion-item.is-open button b{transform:rotate(90deg)}
.yol-corp-accordion [data-accordion-panel]{padding:10px 80px 6px 0}

/* Teams: 80px gutters; three or four portraits per row, trailing rows centred. */
.yol-corp-team{margin:0;padding:0 0 60px}
.yol-corp-team>.yol-corp-heading{margin-bottom:25px}
.yol-corp-team ul{display:flex;flex-wrap:wrap;justify-content:center;gap:55px 80px;margin:0;padding:0;list-style:none}
.yol-corp-team li{width:calc((100% - 160px) / 3)}
.yol-corp-team--four li{width:calc((100% - 240px) / 4)}
.yol-corp-team figure{margin:0 0 18px;aspect-ratio:1;overflow:hidden;background:#e5e5e5}
.yol-corp-team figure img,.yol-corp-team figure .yol-media-placeholder{display:block;width:100%;height:100%;min-height:0;object-fit:cover}
.yol-corp-team h3{margin:0;font:400 17px/20px Arial,"Helvetica Neue",sans-serif;color:#444}
.yol-corp-team li p{margin:0;font-size:13.33px;line-height:20px;color:#444}

/* Dealer application: 30.6% image beside a 48% two-column form. */
.yol-corp-row--dealer{justify-content:flex-start;gap:4%}
.yol-corp-row--dealer .yol-corp-media{width:30.6%}
.yol-corp-row--dealer .yol-corp-form{width:48%}
.yol-corp-form .yol-ref-form-section{display:block;padding:0}
.yol-corp-form .yol-inquiry__intro{display:none}
.yol-corp-form .yol-form{grid-template-columns:1fr 1fr}

/* Page masthead on corporate pages: 150px top, 130px below the title (110px below a subtitle). */
.yol-reference-page .yol-ref-hero{min-height:0;padding:150px 60px 130px}
.yol-reference-page .yol-ref-hero--subtitle{min-height:0;padding-bottom:110px}
.yol-ref-hero__inner{margin-inline-start:-.7vw}
.yol-ref-hero h1{font-size:8vw;line-height:10vw}
.yol-ref-hero--subtitle .yol-page-hero__excerpt{width:40%;max-width:none;margin:20px 0 0 .7vw;font-size:20px;line-height:26px}
/* Reference forms use 14px fields and a 14px/36px button. */
.yol-reference-page .yol-form input:not([type=checkbox]),.yol-reference-page .yol-form textarea,.yol-reference-product .yol-form input:not([type=checkbox]),.yol-reference-product .yol-form textarea{font-size:14px}
.yol-reference-page .yol-form .yol-button,.yol-reference-product .yol-form .yol-button{min-height:36px;padding:0 30px;font-size:14px;line-height:36px}

@media(max-width:1024px){
  .yol-corp{width:calc(100% - 80px)}
  .yol-corp-row{margin-bottom:60px}
  .yol-corp-cover{margin-bottom:52px}
  .yol-reference-page .yol-ref-hero{padding:120px 40px 130px}
  .yol-reference-page .yol-ref-hero--subtitle{padding-bottom:110px}
  .yol-ref-hero__inner{margin-inline-start:-.7vw}
  .yol-ref-hero h1{font-size:10vw;line-height:10vw}
  .yol-ref-hero--subtitle .yol-page-hero__excerpt{width:50%;font-size:14px;line-height:20px}
}
@media(max-width:767px){
  .yol-corp{width:calc(100% - 60px)}
  .yol-corp-heading--lg{font-size:24px;line-height:31.2px}
  .yol-corp-heading--md{font-size:20px;line-height:26px}
  .yol-corp .yol-corp-kicker{font-size:16px;line-height:20.8px}
  .yol-corp-row,.yol-corp-row--copy-img,.yol-corp-row--img-copy,.yol-corp-row--half-img-copy,.yol-corp-row--dealer,.yol-page--kurucumuzdan-mesaj .yol-corp-row--copy-img{display:block;width:100%;margin:0 0 80px}
  .yol-corp-row .yol-corp-copy,.yol-corp-row .yol-corp-media,.yol-page--kurucumuzdan-mesaj .yol-corp-row .yol-corp-copy,.yol-page--kurucumuzdan-mesaj .yol-corp-row .yol-corp-media,.yol-corp-row--half-img-copy .yol-corp-copy,.yol-corp-row--half-img-copy .yol-corp-media,.yol-corp-row--dealer .yol-corp-media,.yol-corp-row--dealer .yol-corp-form{width:100%}
  .yol-corp-row>*+*{margin-top:20px}
  .yol-corp-cover{margin-bottom:72px}
  .yol-corp-columns{display:block}
  .yol-corp-columns .yol-corp-copy{width:100%}
  .yol-corp-columns .yol-corp-copy+.yol-corp-copy{margin-top:20px}
  .yol-corp-row__title{max-width:none}
  .yol-corp-split{display:block}
  .yol-corp-split>.yol-corp-heading{margin-bottom:25px}
  .yol-corp-accordion{padding-top:0}
  .yol-corp-form .yol-form{grid-template-columns:1fr}
  .yol-reference-page .yol-ref-hero{padding:120px 30px 130px}
  .yol-reference-page .yol-ref-hero--subtitle{padding-bottom:110px}
  .yol-ref-hero h1{font-size:12vw;line-height:12vw}
  .yol-ref-hero--subtitle .yol-page-hero__excerpt{width:100%;margin-inline-start:.7vw}
}
@media(max-width:479px){
  .yol-corp{width:calc(100% - 40px)}
  .yol-corp-team ul{gap:40px 20px}
  .yol-corp-team li,.yol-corp-team--four li{width:calc((100% - 20px) / 2)}
  .yol-reference-page .yol-ref-hero{padding:120px 20px 130px}
  .yol-reference-page .yol-ref-hero--subtitle{padding-bottom:110px}
  .yol-ref-hero h1{font-size:14vw;line-height:14vw}
}

/* Team portraits stay monochrome until hovered, as on the reference. */
.yol-corp-team figure img{filter:grayscale(1);transition:filter .3s ease}
.yol-corp-team li:hover figure img{filter:none}

/* Motion states apply only once yol-reference-260.js has prepared the page (html.yol-motion). */
.yol-word{display:inline-block;overflow:hidden;vertical-align:top;padding:.15em 0 .3em;margin:-.15em 0 -.3em}
.yol-word>span{display:inline-block}
.yol-motion .yol-word>span{opacity:0;transform:translateY(60px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94);transition-delay:calc(var(--yol-i,0) * 40ms)}
.yol-motion [data-yol-words].is-in .yol-word>span{opacity:1;transform:none}
.yol-fill{-webkit-text-fill-color:rgba(0,0,0,.1);background-image:linear-gradient(#222,#222);background-repeat:no-repeat;background-size:0% 100%;-webkit-background-clip:text;background-clip:text}
.yol-motion [data-yol-fade]{opacity:0;transform:translateY(60px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.yol-motion [data-yol-fade].is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){.yol-corp-accordion .yol-accordion-item button b,.yol-corp-team figure img{transition:none}}

/* Mega menu follows the page tone like the reference: dark over imagery, light panel on light pages. */
.yol-mega-stack.yol-mega-stack--light .yol-mega-panel{background:rgba(0,0,0,.9);color:#fff}
.yol-mega-stack--dark .yol-mega-panel{background:#eee;color:#222;box-shadow:0 14px 28px rgba(0,0,0,.12)}
.yol-mega-stack--dark .yol-mega-panel__rule{background:#111;opacity:1}
body.mega-open .yol-header--dark{color:#202020;background:#eee;box-shadow:none}
body.mega-open .yol-header--dark .yol-brand__logo--black{display:block}
body.mega-open .yol-header--dark .yol-brand__logo--white{display:none}

/* Masthead titles rise out of an invisible baseline on load, as on the reference. */
@keyframes yol-hero-rise{from{opacity:0;transform:translateY(100%);clip-path:inset(-.4em -.2em 100% -.2em)}to{opacity:1;transform:none;clip-path:inset(-.4em -.2em -.4em -.2em)}}
.yol-ref-hero h1{animation:yol-hero-rise 1s cubic-bezier(.215,.61,.355,1) .2s both}
.yol-ref-hero--collection h1{animation:none}
.yol-ref-hero--collection h1>span{animation:yol-hero-rise 1s cubic-bezier(.215,.61,.355,1) .2s both}
.yol-ref-hero--collection h1>span+span{animation-delay:.3s}
.yol-ref-hero .yol-page-hero__excerpt{animation:yol-hero-rise .7s cubic-bezier(.215,.61,.355,1) .4s both}
@media(prefers-reduced-motion:reduce){.yol-ref-hero h1,.yol-ref-hero--collection h1>span,.yol-ref-hero .yol-page-hero__excerpt{animation:none}}

/* Widest screens (>1966px): 80px gutters, 30% subtitle. The masthead title continues from its 8vw size at 1966px and keeps growing gently (2560: ~187px, 3840: ~250px) instead of dropping to 3vw. */
@media(min-width:1967px){
  .yol-corp{width:calc(100% - 160px)}
  .yol-reference-page .yol-ref-hero{padding:150px 80px 130px}
  .yol-reference-page .yol-ref-hero--subtitle{padding-bottom:110px}
  .yol-ref-hero h1{font-size:calc(60px + 4.95vw);line-height:1.25}
  .yol-ref-hero--subtitle .yol-page-hero__excerpt{font-size:calc(10px + .52vw);line-height:1.3}
  .yol-ref-hero--subtitle .yol-page-hero__excerpt{width:30%}
}
/* Row images never upscale past their natural size; only covers stretch (reference behaviour). */
.yol-corp-media img,.yol-corp-cover--bleed img{width:auto;max-width:100%}
/* Form fields scale with the viewport above 767px and drop to 14px below. */
.yol-reference-page .yol-form input:not([type=checkbox]),.yol-reference-page .yol-form textarea,.yol-reference-product .yol-form input:not([type=checkbox]),.yol-reference-product .yol-form textarea{font-size:calc(1rem + .3vw)}
@media(max-width:767px){.yol-reference-page .yol-form input:not([type=checkbox]),.yol-reference-page .yol-form textarea,.yol-reference-product .yol-form input:not([type=checkbox]),.yol-reference-product .yol-form textarea{font-size:14px}}

/* Line arrow icon (YOL_Site::icon): one 12px glyph, rotated per direction, mirrored on RTL. */
.yol-arrow{display:inline-block;flex:none;width:12px;height:12px;vertical-align:middle;overflow:visible;transition:transform .3s cubic-bezier(.25,.46,.45,.94),translate .3s cubic-bezier(.25,.46,.45,.94)}
.yol-arrow--right{transform:rotate(45deg)}
.yol-arrow--down-right{transform:rotate(90deg)}
.yol-arrow--down{transform:rotate(135deg)}
.yol-arrow--down-left{transform:rotate(180deg)}
.yol-arrow--left{transform:rotate(225deg)}
.yol-arrow--up-left{transform:rotate(270deg)}
.yol-arrow--up{transform:rotate(-45deg)}
[dir=rtl] .yol-arrow{scale:-1 1}
a:hover>.yol-arrow--up-right,button:hover>.yol-arrow--up-right,a:focus-visible>.yol-arrow--up-right,button:focus-visible>.yol-arrow--up-right{translate:2px -2px}
a:hover>.yol-arrow--right,button:hover>.yol-arrow--right,a:focus-visible>.yol-arrow--right,button:focus-visible>.yol-arrow--right{translate:3px 0}
button:hover>.yol-arrow--left,button:focus-visible>.yol-arrow--left{translate:-3px 0}
[dir=rtl] a:hover>.yol-arrow--up-right,[dir=rtl] button:hover>.yol-arrow--up-right{translate:-2px -2px}
[dir=rtl] a:hover>.yol-arrow--right,[dir=rtl] button:hover>.yol-arrow--right{translate:-3px 0}
[dir=rtl] button:hover>.yol-arrow--left{translate:3px 0}
.yol-ref-footer__top,.yol-home-footer__top,.yol-ref-footer__social,.yol-home-footer__social{align-items:center}
.yol-form .yol-button .yol-arrow,.yol-search button .yol-arrow{margin-inline-start:6px}
.yol-carousel-controls button .yol-arrow{width:14px;height:14px}

/* About accordion: arrow in a 40px tinted disc, faint until hovered or opened, turns down when open. */
.yol-corp-accordion .yol-accordion-item button b{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.1);opacity:.2;font:inherit;transition:opacity .2s ease,transform .2s ease}
.yol-corp-accordion .yol-accordion-item button:hover b,.yol-corp-accordion .yol-accordion-item button:focus-visible b,.yol-corp-accordion .yol-accordion-item.is-open button b{opacity:1}
.yol-corp-accordion .yol-accordion-item.is-open button b{transform:rotate(90deg)}
[dir=rtl] .yol-corp-accordion .yol-accordion-item.is-open button b{transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){.yol-arrow,.yol-corp-accordion .yol-accordion-item button b{transition:none}}

/* Header controls: no focus ring or tap flash on mouse/touch; keyboard users keep a visible ring. */
.yol-header a,.yol-header button,.yol-brand{-webkit-tap-highlight-color:transparent}
.yol-header a:focus,.yol-header button:focus,.yol-brand:focus{outline:none}
.yol-header a:focus-visible,.yol-header button:focus-visible,.yol-brand:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* Contact page: the four team cards share one row on desktop, 2 x 2 below 768px. */
.yol-team-grid.yol-contact-team{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}
@media(max-width:767px){.yol-team-grid.yol-contact-team{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}}

/* Contact details: three numbered info panels; the top hairline draws in on hover. */
.yol-contact-intro{padding:0 0 72px}
.yol-contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.yol-contact-info{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 0 6px;color:inherit;text-decoration:none;border-top:1px solid rgba(32,32,32,.18)}
.yol-contact-info::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.22,1,.36,1)}
[dir=rtl] .yol-contact-info::before{transform-origin:right center}
.yol-contact-info:hover::before,.yol-contact-info:focus-visible::before{transform:scaleX(1)}
.yol-contact-info:focus{outline:none}
.yol-contact-info__label{font-size:12px;line-height:18px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.yol-contact-info__value{font-size:calc(1rem + .6vw);line-height:1.3;font-weight:500;overflow-wrap:anywhere;transition:transform .5s cubic-bezier(.22,1,.36,1)}
[dir=rtl] .yol-contact-info__value[dir=ltr]{text-align:right}
.yol-contact-info:hover .yol-contact-info__value{transform:translateX(6px)}
[dir=rtl] .yol-contact-info:hover .yol-contact-info__value{transform:translateX(-6px)}
.yol-contact-info__action{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px;font-size:12px;line-height:18px;letter-spacing:.12em;text-transform:uppercase}
.yol-contact-info:hover .yol-arrow--up-right,.yol-contact-info:focus-visible .yol-arrow--up-right{translate:2px -2px}
[dir=rtl] .yol-contact-info:hover .yol-arrow--up-right{translate:-2px -2px}
@media(max-width:767px){.yol-contact-cards{grid-template-columns:1fr}.yol-contact-info{padding:22px 0 24px;gap:10px}.yol-contact-info__value{font-size:20px}}
@media(prefers-reduced-motion:reduce){.yol-contact-info::before,.yol-contact-info__value{transition:none}}

/* Mobile header: solid band on light pages so content never shows through; clear while the menu is open. */
@media(max-width:900px){body:not(.home):not(.menu-open) .yol-header--dark{background:rgba(239,239,239,.97)}}
body.menu-open .yol-header,body.menu-open .yol-header.is-scrolled{color:#fff;background:transparent;box-shadow:none}
body.menu-open .yol-header .yol-brand__logo--black{display:none}
body.menu-open .yol-header .yol-brand__logo--white{display:block}
body.menu-open .yol-menu-toggle{color:#fff}

/* Full-screen mobile menu: a curtain drops from the top, items rise in sequence, and it reverses on close. */
.yol-menu{opacity:1;clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.77,0,.18,1) .12s,visibility 0s linear .72s}
.menu-open .yol-menu{visibility:visible;opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.77,0,.18,1),visibility 0s}
.yol-mobile-nav>*{opacity:0;transform:translateY(28px);transition:opacity .22s ease,transform .22s ease}
.menu-open .yol-mobile-nav>*{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.menu-open .yol-mobile-nav>:nth-child(1){transition-delay:.3s}
.menu-open .yol-mobile-nav>:nth-child(2){transition-delay:.36s}
.menu-open .yol-mobile-nav>:nth-child(3){transition-delay:.42s}
.menu-open .yol-mobile-nav>:nth-child(4){transition-delay:.48s}
.menu-open .yol-mobile-nav>:nth-child(5){transition-delay:.54s}
@media(prefers-reduced-motion:reduce){.yol-menu,.menu-open .yol-menu{clip-path:none;transition:opacity .2s ease,visibility .2s}.yol-menu{opacity:0}.menu-open .yol-menu{opacity:1}.yol-mobile-nav>*,.menu-open .yol-mobile-nav>*{opacity:1;transform:none;transition:none}}

/* Corporate mega menu: columns grow with their longest label so long translations stay on one line */
.yol-mega-links--corporate{grid-template-columns:repeat(3,minmax(190px,max-content))}
.yol-mega-links--corporate a{white-space:nowrap;max-width:none}

/* Mobile sticky header: solid band that also paints the strip above it (iOS draws the page under the status bar with viewport-fit=cover). */
@media(max-width:900px){
  body:not(.home):not(.menu-open) .yol-header--dark{background:#efefef}
  body:not(.home) .yol-header::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:200px;background:inherit;pointer-events:none}
}

/* Mobile footer: copyright and language links sit centred on their own row. */
@media(max-width:767px){
  .yol-ref-footer__center,.yol-home-footer__center{grid-column:1/-1;justify-content:center;text-align:center;flex-wrap:wrap}
}

/* Contact page: the section already has the large "İletişim Formu" title, so the form's own kicker and heading are not repeated. */
.yol-page--iletisim .yol-inquiry__intro .yol-kicker,.yol-page--iletisim .yol-inquiry__intro h2{display:none}

/* Contact emails: wrap at the "@" break point; split inside a word only if a part cannot fit at all. */
.yol-contact-card a,.yol-contact-info__value{overflow-wrap:break-word;word-break:normal}

/* Header sits right under the admin bar and moves up with it when WordPress scrolls the bar away on phones. */
body.admin-bar .yol-header{top:var(--yol-admin-bar-top,var(--wp-admin--admin-bar--height,0px))}

/* YOL road mark details: footer separator and floating scroll-progress mark. */
.yol-mark{display:inline-block;flex:none;width:1em;height:1em}
.yol-footer-mark{width:13px;height:13px;margin:0 4px}
.yol-progress-mark{position:fixed;z-index:90;inset-inline-end:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:48px;height:48px;display:grid;place-items:center;color:#111;background:rgba(239,239,239,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .5s;-webkit-tap-highlight-color:transparent}
.yol-progress-mark.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s}
.yol-progress-mark__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.yol-progress-mark__ring circle{fill:none;stroke:currentColor;stroke-width:1.5}
.yol-progress-mark__track{opacity:.18}
.yol-progress-mark__bar{stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round}
.yol-progress-mark .yol-mark{width:20px;height:20px;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.yol-progress-mark:focus{outline:none}
.yol-progress-mark:focus-visible{outline:1px solid currentColor;outline-offset:4px}
@media(hover:hover){.yol-progress-mark:hover .yol-mark{transform:rotate(-360deg)}}
@media(max-width:767px){.yol-progress-mark{inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:44px;height:44px}.yol-progress-mark .yol-mark{width:18px;height:18px}.yol-footer-mark{width:12px;height:12px;margin:0 3px}}
@media(min-width:1967px){.yol-progress-mark{inset-inline-end:40px;bottom:40px;width:60px;height:60px}.yol-progress-mark .yol-mark{width:26px;height:26px}.yol-footer-mark{width:15px;height:15px}}
body.menu-open .yol-progress-mark{opacity:0;visibility:hidden}
@media(prefers-reduced-motion:reduce){.yol-progress-mark,.yol-progress-mark .yol-mark{transition:none}}

/* Home scene titles and the faint next-scene label stop at 64px from ~1500px up; on 2K/4K they scale on (2560: ~79px, 3840: ~112px). */
@media(min-width:1967px){.yol-home-scene__content h1,.yol-home-scene__content h2,.yol-home-scene__next{font-size:calc(13.6px + 2.56vw)}}

/* Full-bleed covers follow the page gutter instead of 100vw, which includes the scrollbar and caused a few pixels of sideways scroll on systems with classic scrollbars. */
.yol-corp{--corp-gutter:60px}
@media(max-width:1024px){.yol-corp{--corp-gutter:40px}}
@media(max-width:767px){.yol-corp{--corp-gutter:30px}}
@media(max-width:479px){.yol-corp{--corp-gutter:20px}}
@media(min-width:1967px){.yol-corp{--corp-gutter:80px}}
.yol-corp .yol-corp-cover--bleed{width:auto;margin-inline:calc(var(--corp-gutter) * -1)}