/* site.css - Mehrdad Asset Management, Fluid Land. Kept by the integrator.
   Tokens (--c-*, --f-*, --fs-*, --sp-*, --r-*, --t-*, --z-*, --tap) are defined ONLY here; lanes read them and never redefine them.
   Lane-local tokens use their lane prefix: --mo-* (css/moments.css), --pg-* (css/pages.css).
   Light and bright only (client). Contrast by ink only: no scrims, halos, blur or dark glass. */
:root{
  color-scheme: light;
  /* colour (D-3) */
  --c-sky:#F5F9FC;      /* Northern sky: the page */
  --c-white:#FFFFFF;    /* the land */
  --c-ink:#14284B;      /* Noon ink: text, lead line, focus ring */
  --c-ink-2:#34496B;    /* secondary text (AA on sky and white) */
  --c-lake:#6FA8CF;     /* decorative lines only, never text */
  --c-frost:#DDE9F3;    
  --c-leaf:#C84A1C;     /* 23 September (the node): the leaf only, once per view */
  /* type */
  --f-display:"Newsreader", Georgia, "Times New Roman", serif;
  --f-text:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --fs-h1:clamp(44px, 5.4vw, 84px);
  --fs-h2:clamp(34px, 3.4vw, 52px);
  --fs-lede:clamp(18px, 1.4vw, 21px);
  --fs-body:17px;
  --fs-cap:12.5px;
  --fs-tag:12px;
  /* space (4 px unit) and layout */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --gut:clamp(16px, 4vw, 56px);
  --copy-w:min(440px, 36vw);
  --r-pill:22px; --r-chip:7px;
  /* motion */
  --ease:cubic-bezier(.22, 1, .36, 1);
  --t-hover:150ms; --t-state:300ms; --t-draw:1.5s;
  /* layers */
  --z-scene:0; --z-main:1; --z-header:3; --z-skip:10;
  /* targets */
  --tap:44px;
  --head-h:72px;        /* the sticky header's height; sections land below it (scroll-margin-top) */
}
/* Light only by client decision: dark-mode tokens intentionally equal the light ones. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: light; --c-sky:#F5F9FC; --c-ink:#14284B; } }
:root[data-theme="dark"]{ color-scheme: light; --c-sky:#F5F9FC; --c-ink:#14284B; }

*{ box-sizing:border-box; }
html{ background:var(--c-sky); -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--c-sky); color:var(--c-ink); font:400 var(--fs-body)/1.6 var(--f-text); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-underline-offset:.18em; }
img, svg{ max-width:100%; }
:focus-visible{ outline:2px solid var(--c-ink); outline-offset:4px; border-radius:8px; }
[hidden]{ display:none !important; }


.dtag{ display:inline-block; vertical-align:.25em; margin-left:.55em; padding:0 6px; border-radius:var(--r-chip); background:var(--c-frost); color:var(--c-ink);
  font:500 var(--fs-tag)/1.6 var(--f-mono); letter-spacing:.06em; text-transform:lowercase; white-space:nowrap; font-style:normal; }
h1 .dtag, h2 .dtag{ font-size:var(--fs-tag); letter-spacing:.06em; }

.dtag{ position:relative; }
.dtag::before, .dtag::after{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.dtag::before{ content:" ("; }
.dtag::after{ content:")"; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.dtag:has(.sr-only)::before, .dtag:has(.sr-only)::after{ content:none; } /* if the build ever writes its own hidden brackets, these step aside */

/* ---------- skip link, header, nav ---------- */
.skip{ position:absolute; left:16px; top:-120px; z-index:var(--z-skip); background:var(--c-sky); color:var(--c-ink); padding:12px 16px; border-radius:14px; border:1px solid var(--c-ink); }
.skip:focus{ top:12px; }
.site-head{ position:sticky; top:0; left:0; right:0; z-index:var(--z-header); display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:0 24px;
  height:var(--head-h); margin-bottom:calc(-1 * var(--head-h)); padding:0 var(--gut); background:#F5F9FC; border-bottom:1px solid transparent; }
/* client 26 Sep 2026: "make sure top navigation is fit to page so it travels down." Solid Northern sky, no blur or glass; one hairline once the page has scrolled (core.js measures scrollY) */
.site-head.is-scrolled{ border-bottom-color:rgba(20, 40, 75, .14); }
main section[id], main [id].pg-sec{ scroll-margin-top:var(--head-h); }
main a[href], main button, main [tabindex]{ scroll-margin-top:calc(var(--head-h) + 8px); }
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; min-height:48px; flex:none; }
.brand img{ width:36px; height:36px; display:block; }
.brand span{ font:600 15px/1.2 var(--f-text); letter-spacing:.01em; white-space:nowrap; }
nav.primary{ min-width:0; }
nav.primary ul{ display:flex; flex-wrap:nowrap; gap:2px; list-style:none; margin:0; padding:0; align-items:center; }
nav.primary a{ display:inline-flex; align-items:center; min-height:var(--tap); padding:0 14px; border-radius:var(--r-pill); text-decoration:none; white-space:nowrap; font:500 15px/1 var(--f-text); transition:background-color var(--t-state) var(--ease); }
nav.primary a:hover{ background:var(--c-frost); }
nav.primary a[aria-current="page"]{ text-decoration:underline; }
nav.primary li{ display:inline-flex; align-items:center; }
.nav-btn{ display:none; }
@media (max-width:1040px) and (min-width:768px){
  .site-head{ gap:0 12px; }
  nav.primary a{ padding:0 9px; font-size:14px; }
}

/* ---------- the scene (decorative, behind the page; hosts filled by js/scene.js and js/phone.js) ---------- */
.scene{ position:fixed; inset:0; z-index:var(--z-scene); pointer-events:none; display:none; }
.js .scene{ display:block; }
.scene-host{ position:absolute; inset:0; display:none; overflow:hidden; }
.mode-gl #scene-gl, .mode-phone #scene-phone{ display:block; }
.scene-host canvas, .scene-host > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* the static poster: the year with the leaf; shown without JS and in still mode, hidden once a renderer reports ready */
.poster{ position:absolute; left:68%; top:54%; width:min(30vw, 400px); margin:0; transform:translate(-50%, -52%); pointer-events:none; z-index:0; }
.poster-svg{ display:block; width:100%; height:auto; overflow:visible; }
.scene-ready .poster{ visibility:hidden; }

/* ---------- page layout ---------- */
main{ position:relative; z-index:var(--z-main); display:block; overflow-x:clip; } /* nothing inside main may widen the page */
.st{ position:relative; padding:24vh var(--gut) 0; display:flex; flex-direction:column; min-height:110vh; }
.st-hero{ min-height:100vh; min-height:100svh; padding-top:clamp(120px, 17vh, 168px); }
.st-contact{ min-height:100vh; padding-top:30vh; padding-bottom:14vh; }
.st.right{ align-items:flex-end; }
.copy{ position:relative; z-index:0; width:var(--copy-w); }
.st-hero .copy{ width:auto; max-width:min(52rem, 58vw); }
.st-contact .copy{ width:min(32rem, 100%); }
/* IA v2 layouts: #overview holds the copy and, to its right, the short name moment with the year dial */
.st-overview{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:48px; }
.name-moment{ width:min(400px, 32vw); margin-top:8vh; text-align:center; }
.st-experience{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:48px 8vw; }
.st-previous .copy{ width:min(640px, 100%); }
.st-geo{ gap:18vh; } /* AUD2-2: #geography holds section 10, then the section 11 block (.copy.our) */
.st-approach{ align-items:center; }
/* AUD2-8: the long #pipeline heading gets a wider column on tablets and desktops; paragraphs and renders keep the usual measure */
@media (min-width:768px){
  .st-pipe .copy{ width:min(36rem, 42vw); }
  .st-pipe .copy > p:not(.eyebrow), .st-pipe .render-slot{ max-width:var(--copy-w); }
}
.st-approach .copy{ width:min(760px, 100%); }

/* the text clearing lives in the renderers only: they fade their lines inside MAM.clearings and leave the ground colour as it is,
   so every text block sits on the local land or sky with no painted ellipse behind it (fix M5: no halo under the copy). */

/* ---------- type ---------- */
h1, h2{ font-family:var(--f-display); font-weight:300; letter-spacing:-.022em; margin:0; color:var(--c-ink); }
h1{ font-size:var(--fs-h1); line-height:.98; font-variation-settings:"opsz" 72; }
h1 > span{ display:block; }
h2{ font-size:var(--fs-h2); line-height:1.04; margin-bottom:.4em; font-variation-settings:"opsz" 60; text-wrap:balance; } /* AUD2-8: no lone last word */
.h2-line{ font-size:clamp(28px, 2.6vw, 40px); line-height:1.15; }
.eyebrow{ font:500 13px/1.4 var(--f-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--c-ink); margin:0 0 24px; }
.st-hero .eyebrow, .copy .eyebrow{ margin-bottom:32px; } /* the display face rises above its line box: keep the eyebrow clear of the H1 */
.lede{ margin:26px 0 0; font:400 var(--fs-lede)/1.5 var(--f-text); color:var(--c-ink); }
.copy p{ margin:0; }
.copy p + p{ margin-top:12px; }
.st p:not(.eyebrow):not(.lede):not(.caption){ color:var(--c-ink-2); }
.caption{ font:400 var(--fs-cap)/1.5 var(--f-mono); letter-spacing:.02em; color:var(--c-ink-2); margin:14px 0 0 !important; }
.hint{ font-size:15px; color:var(--c-ink-2); }

/* ---------- controls (moments wire them; they stay [hidden] until wired) ---------- */
.pill{ margin-top:26px; min-height:var(--tap); min-width:var(--tap); padding:0 18px 0 14px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:var(--r-pill);
  border:1px solid var(--c-ink); background:var(--c-sky); color:var(--c-ink); font:500 15px/1 var(--f-text); cursor:pointer; transition:background-color var(--t-state) var(--ease); }
.pill:hover, .pill[aria-pressed="true"]{ background:var(--c-frost); }
.pill svg{ width:18px; height:18px; flex:none; }
.pill.icon{ padding:0; width:var(--tap); }
/* ---------- IA v2 content blocks ---------- */
h3{ font:400 clamp(22px, 1.8vw, 28px)/1.2 var(--f-display); letter-spacing:-.01em; margin:36px 0 12px; color:var(--c-ink); font-variation-settings:"opsz" 36; }
.name-moment h3{ margin-top:0; }
.name-moment p{ margin:0; color:var(--c-ink-2); }
.places{ margin:14px 0 0; font:500 13px/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink); }
.st p.places{ color:var(--c-ink); }
.h2-eyebrow{ font:500 13px/1.4 var(--f-mono); letter-spacing:.09em; text-transform:uppercase; margin:0 0 24px; }
.kv{ margin:24px 0 0; }
.kv div{ display:grid; gap:4px; }
.kv dt, .four dt, .contact-slots dt{ font:500 12.5px/1.5 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink); }
.kv dd, .four dd{ margin:0; color:var(--c-ink-2); }
.line-list{ list-style:none; margin:22px 0 0; padding:0; display:grid; }
.line-list li{ display:flex; align-items:center; flex-wrap:wrap; gap:0 6px; min-height:var(--tap); padding-block:8px; border-top:1px solid var(--c-frost); color:var(--c-ink-2); } /* AUD2-6: a row that wraps keeps its padding; one-line rows stay at the tap height */
.line-list li:has(> .line-name[role="button"]){ padding-block:0; } /* the wired toggle carries its own padding (moments.css) */
.line-list li:last-child{ border-bottom:1px solid var(--c-frost); }
.line-name{ font:400 clamp(19px, 1.5vw, 22px)/1.25 var(--f-display); color:var(--c-ink); font-variation-settings:"opsz" 36; }
.line-list + .hint{ margin-top:14px; }
.st p.badge{ margin-top:28px; font:400 clamp(20px, 1.6vw, 24px)/1.3 var(--f-display); color:var(--c-ink); }
.pair-list{ list-style:none; margin:8px 0 0; padding:0; display:grid; }
.pair-list li{ display:grid; gap:2px; padding:14px 0; border-top:1px solid var(--c-frost); }
.pair-list li:last-child{ border-bottom:1px solid var(--c-frost); }
.pair-k{ font:500 14px/1.45 var(--f-text); color:var(--c-ink); }
.pair-k.line-name{ font:400 clamp(18px, 1.4vw, 21px)/1.25 var(--f-display); letter-spacing:.01em; }
.pair-v{ color:var(--c-ink-2); font-size:16px; }
.st p.motto, .motto{ margin:22px 0; font:400 clamp(24px, 2vw, 30px)/1.2 var(--f-display); color:var(--c-ink); }
.steps{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; text-align:left; }
.steps li{ display:grid; gap:6px; align-content:start; padding-top:14px; border-top:1px solid var(--c-ink); }
.step-k{ font:400 clamp(22px, 1.8vw, 28px)/1.1 var(--f-display); color:var(--c-ink); }
.step-v{ font-size:15px; color:var(--c-ink-2); }
.step-ctl{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; }
.four{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 32px; margin:26px 0 0; }
.four div{ display:grid; gap:4px; align-content:start; padding-top:12px; border-top:1px solid var(--c-frost); } /* each value sits under its label, whatever the row height */
.st p.small-line{ margin-top:22px; font-size:14px; }
/* photographs and photo slots (the client sends the photographs; a slot is calm and clearly marked, never a question) */
.portfolio{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px 24px; margin-top:40px; width:100%; max-width:1180px; }
.pf{ margin:0; min-width:0; }
.pf-lead{ grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; }
.pf-frame{ aspect-ratio:4 / 3; overflow:hidden; border-radius:18px; background:var(--c-white); }
.pf-lead .pf-frame{ aspect-ratio:auto; flex:1; min-height:320px; }
.pf-frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.pf figcaption{ display:grid; gap:2px; margin-top:12px; }
.pf-type{ font:500 15px/1.4 var(--f-text); color:var(--c-ink); }
.pf-cap{ font:400 var(--fs-cap)/1.5 var(--f-mono); letter-spacing:.02em; color:var(--c-ink-2); }
.st-rh .pf{ margin-top:28px; max-width:360px; }
/* Richmond Hill rental photographs (v2.1, client 26 Sep 2026): Canadian images only in #richmond-hill / #canada, never beside #previous */
.rh-photos img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; background:var(--c-white); }
.rh-photos ul{ list-style:none; margin:0; padding:0; }
.st-rh .rh-photos{ max-width:440px; }
.rh-lead img{ height:auto; aspect-ratio:1200 / 829; border-radius:18px; }
.rh-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:10px !important; }
.rh-row img{ aspect-ratio:4 / 3; }
/* the one external link (the rental listing): ink text, a visible glyph, 44 / 48 px target, the site focus ring */
.rh-link{ margin:14px 0 0; }
.ext-link{ display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); color:var(--c-ink); font-weight:500; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.rh-link .ext-link{ background:var(--c-sky); padding-inline:6px; margin-inline:-6px; border-radius:8px; } /* r1: a page-colour backing so the scene's ink lines pass behind the link text */
.ext-link:hover{ text-decoration-thickness:2px; }
.ext-link:focus-visible{ outline:2px solid var(--c-ink); outline-offset:4px; border-radius:8px; }
.ext-ico{ width:.9em; height:.9em; flex:none; }
/* #geography: the International list follows the Ontario list */
.st h3.geo-h{ margin:30px 0 0; font:500 13px/1.4 var(--f-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--c-ink); }
.geo-h + .geo-list{ margin-top:12px; }
.st p.geo-intl{ margin-top:16px; }
.render-slot{ margin-top:28px; }
.founder{ margin:0; width:min(260px, 100%); align-self:flex-end; }
.founder-tile{ aspect-ratio:4 / 5; display:grid; place-items:center; border-radius:18px; background:var(--c-frost); }
.founder-tile img{ display:block; width:44%; height:auto; }
.founder figcaption{ margin-top:12px; font:500 15px/1.4 var(--f-text); }

/* ---------- contact ---------- */
.contact-slots{ display:grid; gap:10px; margin:24px 0 0; }
.contact-slots div{ display:grid; grid-template-columns:7.5rem minmax(0, 1fr); gap:12px; align-items:baseline; }
.contact-slots dd{ margin:0; min-width:0; overflow-wrap:anywhere; color:var(--c-ink-2); }
.contact-slots a{ color:var(--c-ink); display:inline-flex; align-items:center; min-height:var(--tap); }

/* ---------- footer ---------- */
.site-foot{ position:relative; z-index:var(--z-main); background:linear-gradient(to bottom, rgba(245, 249, 252, 0), var(--c-sky) 60px); padding:0 var(--gut) 40px; font-size:15px; color:var(--c-ink-2); } /* the land fades into the footer sky over 60 px: no hard seam */
.site-foot .edge{ display:block; width:100%; height:56px; }
.site-foot .edge path{ fill:none; stroke:var(--c-lake); stroke-width:1; vector-effect:non-scaling-stroke; }
.foot-row{ display:flex; flex-wrap:wrap; gap:10px 40px; justify-content:space-between; align-items:center; }
.foot-row p{ margin:0; }
.foot-row ul{ display:flex; flex-wrap:wrap; gap:4px 18px; list-style:none; margin:0; padding:0; }
.foot-row a{ display:inline-flex; align-items:center; min-height:var(--tap); color:var(--c-ink); }
.foot-row a.small{ font-size:13px; }
.foot-names{ list-style:none; margin:0; padding:0; font-weight:500; color:var(--c-ink); }
.foot-info p + p{ margin-top:2px; }

/* ---------- plain reading pages (projects / notice / notes build on these; lane pages styles in css/pages.css) ---------- */
.page-plain{ padding:clamp(120px, 16vh, 160px) var(--gut) 72px; }
.page-plain .measure{ max-width:44rem; }

/* ---------- phones: under 768 px, or a coarse pointer at 500 px or less tall ---------- */
@media (max-width:767px){
  :root{ --tap:48px; --fs-body:16px; --copy-w:100%; }
  :root{ --head-h:64px; }
  .site-head{ padding:0 16px; gap:0 12px; }
  .brand{ min-width:0; }
  .brand span{ overflow:hidden; text-overflow:ellipsis; }
  /* no script: the links wrap under the brand as before */
  .site-head:not(.has-menu){ height:auto; min-height:var(--head-h); flex-wrap:wrap; padding-block:8px; }
  .site-head:not(.has-menu) nav.primary ul{ flex-wrap:wrap; margin-left:-6px; gap:0; }
  .site-head:not(.has-menu) nav.primary a{ padding:0 6px; font-size:14px; }
  /* with script: the brand and a 48 px Menu button; the links open as a full-width list below the bar */
  .has-menu .nav-btn{ display:inline-flex; align-items:center; gap:10px; flex:none; min-height:48px; min-width:48px; padding:0 16px; border:1px solid rgba(20, 40, 75, .22); border-radius:var(--r-pill);
    background:#F5F9FC; color:var(--c-ink); font:500 15px/1 var(--f-text); cursor:pointer; }
  .has-menu .nav-btn[aria-expanded="true"]{ background:var(--c-frost); }
  .nav-btn__bars{ position:relative; width:16px; height:10px; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; }
  .has-menu nav.primary{ display:none; position:absolute; top:100%; left:0; right:0; background:#F5F9FC; border-bottom:1px solid rgba(20, 40, 75, .14); padding:8px 16px 16px; }
  .has-menu.is-open nav.primary{ display:block; }
  .has-menu.is-open{ border-bottom-color:rgba(20, 40, 75, .14); }
  .has-menu nav.primary ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .has-menu nav.primary li{ display:block; }
  .has-menu nav.primary a{ display:flex; width:100%; min-height:48px; padding:0 12px; font-size:17px; border-radius:14px; }
  .st{ padding:112px 16px 0; min-height:100vh; min-height:100svh; }
  .st-hero{ padding-top:136px; } /* clears the 64 px sticky bar with room to breathe */
  h1{ font-size:clamp(40px, 11.4vw, 52px); }
  .st-hero .copy{ max-width:100%; }
  .lede{ margin-top:18px; }
  .st.right{ align-items:flex-start; }
  .st-overview, .st-experience{ flex-direction:column; gap:40px; }
  .name-moment{ width:100%; text-align:left; margin-top:0; }
  .st-contact{ padding:18vh 16px 12vh; min-height:90svh; }
  .poster{ left:68%; top:74%; width:40vw; }
  .pill{ margin-top:20px; }
  .portfolio{ grid-template-columns:minmax(0, 1fr); gap:28px; }
  .pf-lead{ grid-column:auto; grid-row:auto; }
  .pf-lead .pf-frame{ aspect-ratio:4 / 3; flex:none; min-height:0; }
  .steps{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .four{ grid-template-columns:minmax(0, 1fr); }
  .founder{ align-self:flex-start; }
  .contact-slots div{ grid-template-columns:5.5rem minmax(0, 1fr); }
  .poster{ top:82%; }
  .page-plain{ padding-top:112px; } /* clears the 64 px sticky bar */
}
@media (pointer:coarse) and (max-height:500px){
  :root{ --tap:48px; }
  .st{ padding-top:96px; min-height:100svh; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* v3 r2 (D-44): narrow phones (360 px): the brand and the Menu button fit one row (was 12 px of sideways scroll at 360x740, measured by phone-motion-gate); the brand may shrink and ellipsise below that */
@media (max-width:380px){
  .site-head{ gap:0 8px; }
  .brand{ flex:0 1 auto; gap:10px; }
  .brand span{ font-size:14px; }
  .has-menu .nav-btn{ padding:0 12px; gap:8px; }
}


@media (max-width:767px){
  body{ background:linear-gradient(180deg, var(--c-sky) 0, #E6F0F7 55%, #DDE9F3 100%); }
  .mode-phone #scene-phone{ background:linear-gradient(180deg, #EEF4FA 0%, #DAE8F3 100%); }
  .line-list li, .line-list li:last-child, .pair-list li, .pair-list li:last-child, .four div{ border-color:rgba(20, 40, 75, .16); }
  .dtag{ background:rgba(255, 255, 255, .72); }
}
@media (max-width:767px) and (prefers-reduced-motion: no-preference){
  .ph-rv{ opacity:0; transform:translate3d(0, 16px, 0); transition:opacity .8s var(--ease), transform 1s var(--ease); }
  .ph-rv.ph-in{ opacity:1; transform:none; }
}