/* Homepage only. Shared tokens, bar, footer and buttons live in site.css. */
/* Hero: the giant tag, cropped by the viewport */
.hero { position: relative; min-height: calc(100svh - 150px); overflow: hidden; display: flex; align-items: center; padding: 48px var(--m) 96px; }
.hero__disc { --w: min(118vh, 84vw); position: absolute; width: var(--w); height: var(--w); left: 50vw; top: calc(55% - var(--w) / 2); border-radius: 50%; overflow: hidden; background: var(--sage); }
.hero__disc img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.hero__copy { position: relative; max-width: 44vw; }
.hero__sub { margin-top: 36px; max-width: 24em; font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem); color: var(--ink); }
.hero .actions { margin-top: 40px; }
.hero__tag { position: absolute; left: calc(50vw + min(118vh, 84vw) * 0.06); top: 8%; width: clamp(96px, 9vw, 140px); aspect-ratio: 1; border-radius: 50%; background: var(--sage-deep); color: var(--pale); display: grid; place-items: center; font-weight: 500; font-size: clamp(1.0625rem, 0.8rem + 0.8vw, 1.5rem); letter-spacing: -0.02em; }
.hero__tag::before { content: ""; position: absolute; top: 12%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--ground); }
.hero__caption { position: absolute; left: var(--m); bottom: 28px; font-size: var(--step-small); color: var(--ink-soft); }

/* What Maria does: a statement with picture words, then the services and the picker */
.does { padding: var(--gap) var(--m) 0; }
.statement { font-size: var(--step-lead); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; max-width: 30em; }
.slot { display: inline-block; width: 1.9em; height: 1em; vertical-align: -0.14em; border-radius: 999px; overflow: hidden; margin: 0 .08em; }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.does__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 72px 32px; margin-top: 88px; align-items: start; }
.services { grid-column: 1 / 8; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 40px; }
.services h3 { display: flex; align-items: center; gap: 12px; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; }
.services h3::before { content: ""; flex: none; width: .6em; height: .6em; border-radius: 50%; background: var(--sage); }
.services p { margin-top: 10px; }
.services a { display: inline-block; margin-top: 12px; font-weight: 600; }
.picker { grid-column: 8 / 13; background: var(--ground-2); padding: clamp(24px, 2.6vw, 40px); }
.picker h3 { font-size: 1.625rem; font-weight: 500; letter-spacing: -0.02em; }
.picker fieldset { border: 0; margin: 24px 0 0; padding: 0; }
.picker legend { font-weight: 600; padding: 0; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ground); font-weight: 500; transition: background-color .2s var(--ease), color .2s var(--ease); }
.chips label:hover span { background: var(--sage-4); }
.chips input:checked + span { background: var(--sage-deep); color: var(--pale); }
.chips input:focus-visible + span { outline: 3px solid var(--action); outline-offset: 2px; }
.picker__out { margin-top: 28px; min-height: 4.5em; }
.picker__out strong { display: block; font-size: 1.25rem; font-weight: 600; }
.picker .pill { margin-top: 20px; }

/* Maria: the inset deep panel with the shaped picture */
.maria { padding: var(--gap) 20px 0; }
.maria__panel { position: relative; overflow: hidden; background: var(--sage-deep); color: var(--pale); min-height: min(100svh, 860px); padding: 56px; display: grid; grid-template-columns: 1fr 340px; gap: 56px; }
.maria__title { grid-column: 1; max-width: 9em; color: var(--pale); }
.maria__photo { position: absolute; left: 56px; bottom: calc(min(38vw, 560px) * -0.2); width: min(38vw, 560px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ground); }
.maria__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.maria__text { grid-column: 2; grid-row: 1; display: grid; gap: 44px; align-content: start; }
.maria__text h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; }
.maria__text p { margin-top: 12px; }
.maria__text .pill { justify-self: start; }
.maria__credit { font-size: var(--step-small); color: var(--sage-4); margin-top: -24px; }

/* Owners: portrait and offset quotation, then every review with its pet's tag */
.owners { padding: var(--gap) var(--m) 0; }
.owners__lead { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; }
.owners__photo { grid-column: 1 / 6; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.owners__photo img { width: 100%; height: 100%; object-fit: cover; }
.owners__quote { grid-column: 7 / 13; padding-top: 72px; }
.owners__quote blockquote { margin-top: 40px; max-width: 22em; }
.owners__who { display: flex; align-items: center; gap: 16px; margin-top: 32px; font-weight: 600; }
.tag { flex: none; display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--sage); color: var(--ink); font-size: var(--step-small); font-weight: 600; position: relative; }
.tag::before { content: ""; position: absolute; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ground); }
.owners__all { columns: 3 300px; column-gap: 48px; margin-top: 120px; }
.review { break-inside: avoid; margin-bottom: 56px; }
.review blockquote { margin-top: 20px; }
.review figcaption { margin-top: 14px; font-weight: 600; }
.owners__more { margin-top: 8px; }

/* Getting started: accordion of sage tints, dark to light */
.steps { padding: var(--gap) var(--m) 0; }
.steps__intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: end; }
.steps__intro h2 { grid-column: 1 / 6; }
.steps__intro p { grid-column: 7 / 12; }
.accordion { display: flex; height: 440px; margin-top: 64px; }
.accordion li { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; transition: flex-grow .45s var(--ease); }
.accordion li.is-open { flex-grow: 5; }
.accordion li:nth-child(1) { background: var(--sage-deep); color: var(--pale); }
.accordion li:nth-child(2) { background: var(--sage-2); color: var(--pale); }
.accordion li:nth-child(3) { background: var(--sage-3); color: var(--ink); }
.accordion li:nth-child(4) { background: var(--sage-4); color: var(--ink); }
.accordion button { position: absolute; inset: 0; width: 100%; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: 0; }
.accordion button span { position: absolute; left: 28px; bottom: 28px; font-size: 1.25rem; font-weight: 600; white-space: nowrap; transform-origin: left bottom; transform: translateX(1.1em) rotate(-90deg); transition: transform .45s var(--ease), font-size .45s var(--ease); }
.accordion li.is-open button { cursor: default; }
.accordion li.is-open button span { bottom: auto; top: 32px; font-size: 2.25rem; font-weight: 500; letter-spacing: -0.02em; transform: none; }
.accordion__body { position: absolute; left: 32px; bottom: 32px; width: min(36ch, 80%); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.accordion li.is-open .accordion__body { opacity: 1; transition-delay: .2s; }
.accordion button:hover span { text-decoration: underline; }

/* Areas: a list with tag-dot bullets, closed by a circle picture */
.areas { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; }
.areas__list { grid-column: 1 / 8; }
.areas__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.areas__head p { flex: none; }
.dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; margin-top: 48px; }
.dots li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.dots li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--sage); }
.areas__more { margin-top: 40px; font-weight: 600; }
.areas__photo { grid-column: 9 / 13; }
.areas__photo img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; width: 100%; }
.areas__photo figcaption { margin-top: 16px; font-size: var(--step-small); color: var(--ink-soft); text-align: center; }

/* FAQ: sticky heading, filled tiles */
.faq { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: start; }
.faq__title { grid-column: 1 / 5; position: sticky; top: 96px; }
.faq__list { grid-column: 5 / 13; display: grid; gap: 8px; }
.faq details { background: var(--ground-2); transition: background-color .25s var(--ease); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 20px 28px; font-size: 1.25rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 18px; height: 18px; background: linear-gradient(currentColor, currentColor) center / 18px 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 18px no-repeat; transition: transform .25s var(--ease); } /* taste-skill-ignore: two flat bars drawn with background layers, not a gradient fill */
.faq details[open] { background: var(--sage-deep); color: var(--pale); }
.faq details[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 18px 3px no-repeat; transform: rotate(180deg); } /* taste-skill-ignore: a flat bar */
.faq details p { padding: 0 28px 28px; max-width: 52ch; }
.faq details a { color: inherit; }
.faq summary:hover { text-decoration: underline; }

/* Close: the action tile, flanked by a picture and a field, cropped from a longer row */
.close { margin-top: var(--gap); display: grid; grid-template-columns: 1fr 4fr 1fr; gap: 12px; height: 380px; }
.close__flank { overflow: hidden; }
.close__flank img { width: 100%; height: 100%; object-fit: cover; }
.close__flank--field { background: var(--orange); }
.close__tile { background: var(--sage-deep); color: var(--pale); padding: 40px clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.close__tile h2 { color: var(--pale); }
.close__tile p { margin-top: 16px; max-width: 34em; }
.close__tile .actions { margin-top: 32px; }



/* Tablet and phone: their own composition */
@media (max-width: 860px) {

  .hero { min-height: calc(100svh - 150px); align-items: flex-start; padding: 6svh var(--m) 0; }
  .hero__disc { --w: 130vw; left: -15vw; top: 56svh; }
  .hero__copy { max-width: none; }
  .display { font-size: 11.5vw; }
  .hero__sub { margin-top: 24px; font-size: 1.0625rem; }
  .hero .actions { margin-top: 28px; }
  .hero__tag { left: auto; right: var(--m); top: calc(56svh - 40px); width: 88px; font-size: 1rem; }
  .hero__caption { display: none; }

  .does__grid, .owners__lead, .steps__intro, .areas, .faq { grid-template-columns: minmax(0, 1fr); }
  .does__grid { margin-top: 56px; gap: 56px; }
  .hero__disc img { height: 74%; }
  .services, .picker { grid-column: 1 / -1; }
  .maria { padding-left: 10px; padding-right: 10px; }
  .maria__panel { grid-template-columns: 1fr; padding: 40px 24px 0; gap: 40px; min-height: 0; }
  .maria__title { max-width: none; font-size: 8.5vw; }
  .maria__text { grid-column: 1; grid-row: auto; gap: 40px; }
  .maria__photo { position: relative; left: auto; bottom: auto; order: 3; width: 86vw; max-width: 100%; justify-self: center; margin-bottom: -14vw; }
  .maria__panel { display: flex; flex-direction: column; }
  .maria__credit { margin-top: -16px; }

  .owners__photo { grid-column: 1; width: 72%; }
  .owners__quote { grid-column: 1 / -1; padding-top: 0; }
  .owners__all { margin-top: 72px; }

  .steps__intro h2, .steps__intro p { grid-column: 1 / -1; }
  .accordion { flex-direction: column; height: auto; margin-top: 40px; }
  .accordion li, .accordion li.is-open { flex: none; }
  .accordion button { position: relative; inset: auto; min-height: 64px; display: flex; align-items: center; padding: 0 24px; }
  .accordion button span, .accordion li.is-open button span { position: static; transform: none; font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
  .accordion__body { position: static; width: auto; opacity: 1; display: none; padding: 0 24px 24px; }
  .accordion li.is-open .accordion__body { display: block; }

  .areas__list, .areas__photo { grid-column: 1 / -1; }
  .areas__photo { width: 72%; justify-self: center; }
  .areas__head { flex-direction: column; gap: 8px; }
  .dots { grid-template-columns: 1fr 1fr; }

  .faq__title { grid-column: 1 / -1; position: static; }
  .faq__list { grid-column: 1 / -1; }
  .faq summary { font-size: 1.125rem; min-height: 64px; padding: 16px 20px; }
  .faq details p { padding: 0 20px 20px; }

  .close { grid-template-columns: 1fr 1fr; grid-template-rows: auto 120px; height: auto; gap: 10px; }
  .close__tile { grid-column: 1 / -1; grid-row: 1; padding: 40px 24px; }
  .close__flank--photo { grid-row: 2; grid-column: 1; }
  .close__flank--field { grid-row: 2; grid-column: 2; }

}
@media (max-width: 540px) {
  .services { grid-template-columns: 1fr; gap: 36px; }
}
/* No-script fallback for the accordion: everything readable */
html:not(.js) .accordion { flex-direction: column; height: auto; }
html:not(.js) .accordion li { flex: none; }
html:not(.js) .accordion button { position: relative; pointer-events: none; padding: 24px 28px 0; }
html:not(.js) .accordion button span { position: static; transform: none; }
html:not(.js) .accordion__body { position: static; opacity: 1; display: block; padding: 8px 28px 28px; width: auto; }

/* Motion */
@keyframes shutter { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.07) translateX(-1.5%); } }
@keyframes tagIn { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.hero__disc { animation: shutter 1.1s var(--ease) both; }
.hero__disc img { animation: settle 1.4s var(--ease) both, drift 22s ease-in-out 1.4s infinite alternate; }
.hero__tag { animation: tagIn .7s var(--ease) .9s both; }
.rise { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.rise.in { opacity: 1; transform: none; }
.owners__photo img, .areas__photo img, .close__flank img { transition: transform .8s var(--ease); }
.owners__photo:hover img, .areas__photo:hover img, .close__flank:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .hero__disc, .hero__disc img, .hero__tag { animation: none; }
  .rise { opacity: 1; transform: none; transition: none; }
  .accordion li, .accordion button span, .accordion__body { transition: none; }
  .chips span { transition: none; }
}

/* Paw check: the live reading as two big tags */
.pawcheck { margin-top: var(--gap); background: var(--ground-2); padding: clamp(56px, 7vw, 112px) var(--m); display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; }
.pawcheck__intro { grid-column: 1 / 6; }
.pawcheck__intro .lead { margin-top: 32px; font-weight: 500; }
.pawcheck__intro p:last-child { margin-top: 20px; max-width: 34em; }
.pawcheck__live { grid-column: 7 / 13; }
.pawcheck__discs { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 36px; }
.pawcheck__disc { width: clamp(140px, 14vw, 200px); aspect-ratio: 1; border-radius: 50%; background: var(--ground); display: grid; place-content: center; text-align: center; gap: 4px; padding: 16px; font-size: var(--step-small); font-weight: 600; }
.pawcheck__disc--pave { width: clamp(180px, 19vw, 270px); background: var(--sage); color: var(--ink); transition: background-color .4s var(--ease); }
.pawcheck[data-level="warn"] .pawcheck__disc--pave { background: #c27a2c; color: var(--ink); }
.pawcheck[data-level="stop"] .pawcheck__disc--pave { background: var(--action); color: var(--pale); }
.pawcheck__num { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.pawcheck__live h3 { font-size: 1.625rem; font-weight: 500; letter-spacing: -0.02em; }
.pawcheck__live h3 + p { margin-top: 10px; max-width: 32em; }
.pawcheck__window { margin-top: 20px; }
.pawcheck__note { margin-top: 20px; font-size: var(--step-small); color: var(--ink-soft); }
.pawcheck.is-live .pawcheck__num { animation: tagIn .6s var(--ease) both; }

/* Meet the regulars: a row of name tags to swipe through */
.regulars { padding: var(--gap) 0 0; }
.regulars__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding: 0 var(--m); }
.regulars__head p { max-width: 26em; }
.regulars__row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 24vw, 330px); gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 56px var(--m) 24px; scroll-padding: 0 var(--m); scrollbar-width: thin; scrollbar-color: var(--sage-3) transparent; }
.regulars__row:focus-visible { outline-offset: -3px; }
.pet { scroll-snap-align: start; }
.pet__faces { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; background: var(--sage-4); }
.pet:nth-child(3n+2) .pet__faces { background: var(--pale); }
.pet:nth-child(3n) .pet__faces { background: var(--ground-2); }
.pet__face { width: 66%; height: 66%; transition: transform .5s var(--ease); }
.pet__faces .pet__face + .pet__face { margin-left: -18%; }
.pet__faces:has(.pet__face + .pet__face) .pet__face { width: 50%; height: 50%; }
.pet:hover .pet__face { transform: rotate(-6deg) translateY(-4px); }
.pet:hover .pet__face + .pet__face { transform: rotate(6deg) translateY(-4px); }
.pet h3 { margin-top: 24px; font-size: 1.625rem; font-weight: 500; letter-spacing: -0.02em; }
.pet__kind { margin: 4px 0 12px; font-size: var(--step-small); font-weight: 600; color: var(--sage-2); }

/* An example update: one message, square bubbles, a round avatar */
.update { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; margin-top: 96px; }
.update__text { grid-column: 2 / 6; }
.update__text p { margin-top: 16px; }
.update__note { font-size: var(--step-small); color: var(--ink-soft); }
.update__phone { grid-column: 7 / 12; background: var(--sage-deep); padding: 28px; display: grid; gap: 10px; justify-items: start; }
.update__who { display: flex; align-items: center; gap: 12px; color: var(--pale); font-weight: 600; font-size: var(--step-small); margin-bottom: 6px; }
.update__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: var(--ground); }
.update__bubble { background: var(--ground); max-width: 88%; padding: 14px 16px 10px; }
.update__bubble--photo { padding: 6px; width: 70%; }
.update__bubble--photo img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.update__time { display: block; text-align: right; margin-top: 6px; font-size: .75rem; color: var(--ink-soft); }

@media (max-width: 860px) {
  .pawcheck, .update { grid-template-columns: minmax(0, 1fr); }
  .pawcheck__intro, .pawcheck__live, .update__text, .update__phone { grid-column: 1 / -1; }
  .pawcheck__disc { width: 38vw; }
  .pawcheck__disc--pave { width: 48vw; }
  .regulars__head { flex-direction: column; align-items: start; gap: 12px; }
  .regulars__row { grid-auto-columns: 74vw; gap: 24px; padding-top: 40px; }
  .update { margin-top: 64px; }
  .update__phone { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pawcheck.is-live .pawcheck__num { animation: none; }
  .pet__face { transition: none; }
}

/* Hero headline: the place in display size, the degree on its own line beneath */
.hero__by { display: block; margin-top: .35em; font-size: var(--step-lead); letter-spacing: -0.01em; line-height: 1.2; color: var(--sage-deep); }
.hero__sub { margin-top: 28px; }
.hero__proof { margin-top: 20px; font-size: var(--step-small); font-weight: 600; color: var(--ink-soft); }
@media (max-width: 860px) { .display { font-size: 10vw; } .hero__by { font-size: 1.25rem; } }

/* Picker: extra pet rows appear as the number of pets goes up */
.picker fieldset[hidden] { display: none; }
.picker__out { min-height: 3em; font-weight: 600; }

/* Out and about: a sliding row of photos near the top */
.reel { padding: clamp(72px, 9vw, 136px) 0 0; }
.reel__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 0 var(--m); }
.reel__nav { display: flex; gap: 10px; }
.reel__btn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--ground-2); color: var(--ink); font: inherit; font-size: 1.375rem; cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.reel__btn:hover { background: var(--sage); }
.reel__btn:active { transform: scale(.94); }
.reel__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 440px); column-gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--m); padding: 40px var(--m) 16px; scrollbar-width: thin; scrollbar-color: var(--sage-3) transparent; }
.reel__track:focus-visible { outline-offset: -3px; }
.reel__slide { scroll-snap-align: start; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ground-2); }
.reel__slide:nth-child(3n+2) { border-radius: 999px 999px 0 0; }
.reel__slide:nth-child(3n) { border-radius: 50%; aspect-ratio: 1; align-self: center; }
.reel__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.reel__slide:hover img { transform: scale(1.04); }
.reel__more { padding: 16px var(--m) 0; }
@media (max-width: 860px) {
  .reel__track { grid-auto-columns: 72vw; column-gap: 12px; padding-top: 28px; }
  .reel__btn { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__slide img, .reel__btn { transition: none; }
}

/* Phones: the hero copy is longer now, so the photo and Willow's tag follow it instead of sitting at a fixed height */
@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: stretch; padding-bottom: 0; }
  .hero__copy { order: 1; }
  .hero__tag { order: 2; position: relative; left: auto; right: auto; top: auto; align-self: flex-end; margin: 32px 0 -48px; z-index: 1; }
  .hero__disc { order: 3; position: relative; left: -15vw; top: auto; flex: none; margin-bottom: -50vw; }
}