/* H&M Property Management. First-pass redesign, 2026-10-23; edit rounds 2 to 4, 2026-10-24.
   Type: Archivo (display, semi-expanded) + Public Sans (text), both OFL, self-hosted. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #181817;
  --body: #34352f;
  --muted: #5c5d57;
  --canvas: #ffffff;
  --surface: #f3f2ee;
  --line: #dcdad2;
  --gold: #c49b22;
  --gold-hover: #d6ae38;
  --wrap: 1200px;
  --pad: clamp(20px, 4vw, 40px);
  --section: clamp(64px, 8vw, 112px);
  --radius: 2px;
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text: "Public Sans", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
address { font-style: normal; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h1, h2, h3 {
  font-family: var(--display);
  font-stretch: 106%;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.35rem, 1.55rem + 3.1vw, 4rem);
  font-weight: 720;
  line-height: 1.03;
  letter-spacing: -0.028em;
}
h2 {
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.35rem);
  font-weight: 680;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3 {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h2 a, h3 a { text-decoration: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Buttons: square-cornered, like the logo's lines */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-solid { background: var(--ink); color: #fff; }
.btn-line { background: transparent; color: var(--ink); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-line-light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
@media (hover: hover) {
  .btn-solid:hover { background: #3a3a37; border-color: #3a3a37; }
  .btn-line:hover { background: var(--ink); color: #fff; }
  .btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
  .btn-line-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
  .site-nav a:hover { color: var(--ink); }
  .site-footer a:hover, .prose a:hover, .direct a:hover, .big-line a:hover { text-decoration-color: var(--gold); }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* IWR bar above the header */
.build-bar { background: var(--ink); color: #e9e8e3; font-size: .93rem; }
.build-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; padding-top: 9px; padding-bottom: 9px; text-align: center; }
.build-bar a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (hover: hover) { .build-bar a:hover { color: var(--gold-hover); } }
@media (max-width: 700px) { .build-bar .long { display: none; } }

/* Header */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--canvas);
  border-bottom: 1px solid transparent;
  overflow-anchor: none;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.header-inner { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; transition: padding .25s ease; }
.brand { flex: none; display: block; }
.brand .logo { display: block; height: 92px; width: auto; aspect-ratio: 480.7 / 365.8; transition: height .25s ease; }
.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-nav a { color: var(--body); font-weight: 500; font-size: 1rem; text-decoration: none; padding: 10px 0; white-space: nowrap; }
.site-nav a[aria-current="page"] { color: var(--ink); }
@media (min-width: 1081px) {
  .site-nav a { background: linear-gradient(var(--gold), var(--gold)) 0 calc(100% - 2px) / 0% 2px no-repeat; transition: background-size .5s cubic-bezier(.65,0,.35,1), color .18s ease; }
  .site-nav a[aria-current="page"], .site-nav a:hover, .site-nav a:focus-visible { background-size: 100% 2px; }
}
.header-call { flex: none; }
.call-short { display: none; }
.menu-toggle { display: none; }
.site-header.shrunk { border-bottom-color: var(--line); box-shadow: 0 4px 18px rgba(24,24,23,.06); }
.site-header.shrunk .header-inner { padding-top: 8px; padding-bottom: 8px; }
.site-header.shrunk .brand .logo { height: 62px; }

@media (max-width: 1080px) {
  .header-inner { gap: 14px; }
  .brand .logo { height: 68px; }
  .site-header.shrunk .brand .logo { height: 50px; }
  .header-call { margin-left: auto; min-height: 44px; padding: 10px 16px; }
  .call-long { display: none; }
  .call-short { display: inline; }
  .menu-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 48px; padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--radius); background: #fff; cursor: pointer;
  }
  .menu-toggle span { display: block; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 20px; box-shadow: 0 12px 24px rgba(24,24,23,.08);
  }
  .site-nav.open { display: flex; }
  .site-nav a { font-family: var(--display); font-stretch: 106%; font-size: 1.35rem; font-weight: 600; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
}

/* Framed photo: a gold L offset behind the bottom-left corner, echoing the logo.
   Edit round 3: the L draws itself (down, then across, about 1s) on hover and undraws on leave.
   Touch screens draw it once when the photo scrolls into view; without JS it is simply shown. */
.framed { position: relative; isolation: isolate; margin: 0 0 14px; --l-off: -14px; --l-w: 6px; }
.framed::before, .framed::after { content: ""; position: absolute; z-index: -1; left: var(--l-off); background: var(--gold); }
.framed::before {
  top: 42%; bottom: var(--l-off); width: var(--l-w);
  transform-origin: 50% 0; transform: scaleY(0);
  transition: transform .5s cubic-bezier(.65,0,.35,1) .5s;
}
.framed::after {
  bottom: var(--l-off); width: 42%; height: var(--l-w);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .5s cubic-bezier(.65,0,.35,1) 0s;
}
.framed:hover::before, .offer-link:hover .framed::before, .offer-link:focus-visible .framed::before, .framed.in-view::before { transform: scaleY(1); transition-delay: 0s; }
.framed:hover::after, .offer-link:hover .framed::after, .offer-link:focus-visible .framed::after, .framed.in-view::after { transform: scaleX(1); transition-delay: .5s; }
html:not(.js) .framed::before, html:not(.js) .framed::after { transform: none; }
.framed img { width: 100%; border-radius: var(--radius); }
@media (max-width: 600px) {
  .framed { margin: 0 0 9px; --l-off: -9px; --l-w: 4px; }
}

/* Home hero: full-bleed drone shot of the park (edit round 3). The buildings sit low in the frame,
   so the text sits over the sky and far fields and the bottom of the photo stays clear. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: flex; align-items: flex-start;
  min-height: clamp(540px, 56vw, 900px);
  background: #141413; color: #fff;
  margin-bottom: var(--section);
}
.hero > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(17,17,16,.82) 0%, rgba(17,17,16,.62) 30%, rgba(17,17,16,.2) 50%, rgba(17,17,16,0) 60%);
}
.hero-inner { padding-top: clamp(40px, 4.4vw, 72px); padding-bottom: 48px; }
.hero h1 { color: #fff; margin: 0 0 14px; max-width: 24ch; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero p { margin: 0; color: #efeee9; font-size: 1.15rem; max-width: 68ch; }
.hero .actions { margin-top: 22px; }
/* Edit round 4: on wider screens the hero text rides down the photo as you scroll, stopping at the hero's bottom edge */
@media (min-width: 701px) {
  .hero-inner { position: -webkit-sticky; position: sticky; top: 96px; }
  /* a soft shade travels with the text so it stays readable over the bright buildings */
  .hero-inner::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: -12vw; right: 18%; top: -70px; bottom: -70px;
    background: radial-gradient(ellipse at 35% 50%, rgba(17,17,16,.72) 0%, rgba(17,17,16,.5) 45%, rgba(17,17,16,0) 72%);
  }
  .hero p { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
}

/* Offer rows */
.offer { padding-bottom: var(--section); }
.offer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.offer-flip .offer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.offer-flip .framed { order: 2; }
.offer-copy p { max-width: 46ch; }
.offer-copy .btn { margin-top: 8px; }

/* Clickable offer cards (commercial, storage): the whole row is one link and grows a little on hover */
.offer-link {
  color: inherit; text-decoration: none;
  transform-origin: center; transition: transform .28s ease;
}
.offer-link h2 { text-decoration: none; }
.u {
  padding-bottom: 6px;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0% 4px no-repeat;
  transition: background-size 1s cubic-bezier(.65,0,.35,1);
}
.offer-link:hover .u, .offer-link:focus-visible .u { background-size: 100% 4px; }
.offer-link:focus-visible { outline-offset: 10px; }
@media (hover: hover) {
  .offer-link:hover { transform: scale(1.03); }
  .offer-link:hover .btn-solid { background: #3a3a37; border-color: #3a3a37; }
}

.rates { width: 100%; max-width: 440px; border-collapse: collapse; margin: 4px 0 22px; font-variant-numeric: tabular-nums; }
.rates th, .rates td { padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.rates tr:first-child th, .rates tr:first-child td { border-top: 2px solid var(--ink); }
.rates th { font-weight: 500; color: var(--body); }
.rates td { text-align: right; font-family: var(--display); font-stretch: 106%; font-weight: 680; font-size: 1.2rem; color: var(--ink); white-space: nowrap; padding-left: 16px; }
.rates-lg { max-width: none; }
.rates-lg td { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); }
.rates-lg th, .rates-lg td { padding: 20px 0; }

/* Homes and rentals pair */
.pair { background: var(--surface); padding: var(--section) 0; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 72px; }
.pair article { border-top: 2px solid var(--ink); padding-top: 28px; }
.pair p { max-width: 48ch; }
.pair .btn { margin-top: 8px; }

/* Recent IWR work gallery (homes page) */
.work { padding: 0 0 var(--section); }
.work-lead { max-width: 60ch; margin-bottom: 32px; }
.work h2 a { text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0% 4px no-repeat; padding-bottom: 6px; transition: background-size 1s cubic-bezier(.65,0,.35,1); }
.work h2 a:hover, .work h2 a:focus-visible { background-size: 100% 4px; }
.work-more { margin-top: 28px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.work-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }

/* Location */
.location { padding: var(--section) 0; }
.location-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px 72px; align-items: center; }
.location-copy p { max-width: 42ch; }

/* Dark contact band */
.cta-band { background: var(--ink); color: #e9e8e3; padding: clamp(56px, 7vw, 96px) 0; }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { margin: 0; max-width: 52ch; color: #d6d5cf; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px 64px; align-items: end; }
.cta-inner .actions { margin-top: 0; }

/* Inner page heads */
.page-head { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 88px); }
.head-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-head h1 { max-width: 18ch; }
.page-head .lead { font-size: clamp(1.1rem, 1.04rem + .3vw, 1.25rem); line-height: 1.6; max-width: 56ch; margin: 18px 0 0; color: var(--body); }
.page-head.has-photo .head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.page-commercial .page-head.has-photo .head-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr); }
.page-commercial .page-head .framed { max-width: 460px; justify-self: end; }

/* Detail sections */
.detail { padding: 0 0 var(--section); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; align-items: start; }
.detail-grid.narrow-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.detail-text p { max-width: 52ch; }
.note { margin-top: 24px; color: var(--muted); max-width: 52ch; }

.specs { margin: 0; border-top: 2px solid var(--ink); }
.specs div { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.4fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; color: var(--ink); font-weight: 600; }

.plans { padding: 0 0 var(--section); }
.plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 72px; }
.plan h2 { margin-bottom: 18px; }
.plan .btn { margin-top: 26px; }
.other-plan { margin-top: 36px; padding: 24px 0 0; border-top: 1px solid var(--line); }
.other-plan .btn { margin-top: 6px; }

.ticks { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ticks li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); position: relative; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 12px; height: 2px; background: var(--gold); }

/* Enquiry */
.enquiry, .contact-main { background: var(--surface); padding: var(--section) 0; }
.contact-main { background: transparent; padding-top: 0; }
.enquiry-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px 80px; align-items: start; }
.enquiry-copy p { max-width: 40ch; }
.direct a, .big-line a { font-weight: 600; color: var(--ink); }
.big-line { font-family: var(--display); font-stretch: 106%; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); font-weight: 650; margin: 0 0 6px; }
.big-line a { text-decoration-thickness: 1px; }
.contact-details h2 { font-size: 1.25rem; margin-top: 36px; }
.contact-details h2:first-child { margin-top: 0; }
.contact-details address { margin-bottom: 18px; }
.contact-main .enquiry-form { background: var(--surface); padding: clamp(24px, 3vw, 40px); }

.enquiry-form { display: block; }
.hp { position: absolute; left: -9999px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; color: var(--ink); font-size: .95rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid #a9a79f; border-radius: var(--radius); padding: 12px 14px; min-height: 48px; width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--ink); }
.consent { display: flex; gap: 12px; align-items: center; min-height: 44px; margin: 16px 0 18px; font-size: .95rem; color: var(--body); }
.consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); flex: none; }

/* Prose */
.prose { max-width: calc(760px + 2 * var(--pad)); padding-bottom: var(--section); }
.prose h2 { font-size: 1.4rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: clamp(56px, 6vw, 80px) 0 28px; font-size: .97rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 40px 64px; }
.footer-brand .logo { display: block; width: 230px; height: auto; aspect-ratio: 480.7 / 365.8; margin-bottom: 18px; }
.footer-brand p { max-width: 34ch; color: var(--muted); }
.site-footer h2 { font-family: var(--text); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 6px; }
.site-footer a { text-decoration-color: transparent; }
.site-footer address a { text-decoration-color: var(--line); }
.social { display: flex; gap: 18px; margin-top: 14px; }
.social a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); }
.footer-base { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.footer-base span:last-child { margin-left: auto; }
.footer-base a { text-decoration: underline; text-decoration-color: var(--line); }

/* Tablet and phone */
@media (max-width: 900px) {
  .hero-grid, .offer-grid, .offer-flip .offer-grid, .location-grid, .cta-inner,
  .page-head.has-photo .head-grid, .page-commercial .page-head.has-photo .head-grid,
  .detail-grid, .detail-grid.narrow-left, .enquiry-grid, .pair-grid, .plans-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .offer .framed, .offer-flip .framed { order: 2; }
  .location-grid .framed { order: -1; }
  .page-commercial .page-head .framed { justify-self: start; max-width: 420px; }
  .footer-base span:last-child { margin-left: 0; }
}
@media (max-width: 700px) {
  /* Phones: photo on top at its own shape, text runs on from the foreground into the dark band */
  .hero { display: block; min-height: 0; }
  .hero > img { bottom: auto; height: 76vw; object-position: 45% 100%; transform: scale(1.45); transform-origin: 46% 84%; }
  .hero::after { background: linear-gradient(to bottom, rgba(20,20,19,0) 0, rgba(20,20,19,0) calc(76vw - 44px), #141413 76vw); }
  .hero-inner { padding-top: calc(76vw + 18px); padding-bottom: 40px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .actions .btn { flex: 1 1 auto; }
  .specs div { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); }
  .footer-brand .logo { width: 200px; }
  .site-footer li a, .social a, .footer-base a { display: inline-block; padding: 11px 0; }
  .site-footer li { margin: 0; }
}

/* Logo animation: black line draws, then the gold lines, then the words (H&M with a punch).
   Header: first page of a visit (html.logo-first, set by logo-init.js). Footer: first time it scrolls into view. */
.logo .lg-hm { transform-box: fill-box; transform-origin: 50% 55%; }
html.logo-first .site-header .lg-draw, .logo.play .lg-draw, html.js .site-footer .logo:not(.done) .lg-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.js .site-footer .logo:not(.play):not(.done) .lg-hm, html.js .site-footer .logo:not(.play):not(.done) .lg-pm { opacity: 0; }
html.logo-first .site-header .lg-k, .logo.play .lg-k { animation: lgDraw .9s cubic-bezier(.6,0,.3,1) .2s both; }
html.logo-first .site-header .lg-g1, .logo.play .lg-g1 { animation: lgDraw .55s cubic-bezier(.6,0,.3,1) 1.15s both; }
html.logo-first .site-header .lg-g2, .logo.play .lg-g2 { animation: lgDraw .4s cubic-bezier(.6,0,.3,1) 1.7s both; }
html.logo-first .site-header .lg-hm, .logo.play .lg-hm { animation: lgHm .8s cubic-bezier(.2,.8,.25,1) 2.15s both; }
html.logo-first .site-header .lg-pm, .logo.play .lg-pm { animation: lgPm .6s ease-out 2.15s both; }
.logo.done .lg-draw { stroke-dasharray: none !important; animation: none !important; }
.logo.done .lg-hm, .logo.done .lg-pm { animation: none !important; opacity: 1; transform: none; filter: none; }
@keyframes lgDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lgHm {
  0% { opacity: 0; transform: scale(2.1); filter: blur(6px); }
  55% { opacity: 1; transform: scale(.94); filter: blur(0); }
  78% { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}
@keyframes lgPm { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lg-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .lg-hm, .lg-pm { opacity: 1 !important; animation: none !important; }
  .framed::before, .framed::after { transform: none !important; }
  .u { background-size: 100% 4px; }
  *, *::before, *::after { transition: none !important; }
  .offer-link:hover { transform: none; }
}