/*
Theme Name: Media 365
Theme URI: https://media365.com.au
Author: Media 365
Author URI: https://media365.com.au
Description: Media 365 — full-service media, marketing & technology partner (Perth, WA). A true CMS theme: services, technologies, case studies, team, clients and testimonials are custom post types edited in WP Admin, with the block editor for long-form content, WordPress menus, Customizer contact details, JSON-LD schema and a one-click content importer.
Version: 3.3.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: media365
*/

/* ---------- resets ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: oklch(0.15 0.015 265); }
body.m365 { font-family: 'Manrope', system-ui, sans-serif; color: oklch(0.97 0.006 85); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: oklch(0.68 0.21 27); text-decoration: none; }
a:hover { color: oklch(0.74 0.19 27); }
::selection { background: oklch(0.62 0.21 27); color: #fff; }
img { max-width: 100%; display: block; }

/* ---------- typography scale (standardised) ---------- */
/* One paragraph style across the site. Use .m365-lede for intro paragraphs
   under page headings, .m365-body for everything else. */
.m365 h1, .m365 h2, .m365 h3, .m365 h4, .m365 h5, .m365 h6,
.m365 .m365-menu a, .m365 button, .m365 input, .m365 textarea, .m365 select { font-family: 'Space Grotesk', system-ui, sans-serif; }
.m365 p, .m365 li, .m365 td, .m365 th, .m365 dd, .m365 dt, .m365 figcaption, .m365 blockquote, .m365 label { font-family: 'Manrope', system-ui, sans-serif; }
.m365 input, .m365 textarea, .m365 select { font-family: 'Manrope', system-ui, sans-serif; }
.m365 p { font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: oklch(0.68 0.02 265); margin: 0 0 16px; text-wrap: pretty; }
.m365 p:last-child { margin-bottom: 0; }
.m365-body { font-size: 15px !important; line-height: 1.65 !important; color: oklch(0.68 0.02 265) !important; }
.m365-lede { font-size: clamp(17px, 1.7vw, 21px) !important; line-height: 1.6 !important; color: oklch(0.74 0.015 265) !important; max-width: 72ch; margin: 0 !important; }
.m365-note { font-size: 13.5px !important; line-height: 1.6 !important; color: oklch(0.6 0.02 265) !important; }

/* ---------- keyframes ---------- */
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(60px,40px) scale(1.15);} }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-70px,-30px) scale(1.1);} }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@keyframes pulse { 0%,100% { opacity: .5;} 50% { opacity: 1;} }

/* ---------- fixed background layer ---------- */
.m365-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.m365-bg .b1 { position: absolute; top: -10%; right: -5%; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, oklch(0.62 0.21 27 / 0.22), transparent 68%); filter: blur(30px); animation: drift1 18s ease-in-out infinite; }
.m365-bg .b2 { position: absolute; bottom: -15%; left: -8%; width: 680px; height: 680px; border-radius: 50%; background: radial-gradient(circle, oklch(0.45 0.06 285 / 0.28), transparent 68%); filter: blur(30px); animation: drift2 22s ease-in-out infinite; }
.m365-bg .grid { position: absolute; inset: 0; background-image: radial-gradient(oklch(0.97 0.006 85 / 0.04) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000, transparent 80%); mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000, transparent 80%); }
.m365-shell { position: relative; z-index: 1; }

/* ---------- page routing ---------- */
.m365-page { display: none; }
.m365-page.is-active { display: block; }

/* ---------- scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- header / mega menu ---------- */
.m365-navitem { position: relative; }
.m365-panel { position: absolute; top: 100%; left: 0; z-index: 60; padding-top: 16px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.m365-navitem:hover .m365-panel { opacity: 1; visibility: visible; transform: none; }
.m365-panel-inner { background: oklch(0.17 0.018 265 / 0.98); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid oklch(0.30 0.02 265); border-radius: 18px; padding: 18px; box-shadow: 0 22px 60px oklch(0.06 0.02 265 / 0.6); }
.m365-menu-link { display: block; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: oklch(0.82 0.02 265); cursor: pointer; }
.m365-menu-link:hover { background: oklch(0.24 0.02 265); color: #fff; }
.m365-toplink { color: oklch(0.66 0.02 265); font-weight: 600; font-size: 14px; cursor: pointer; padding: 9px 13px; border-radius: 10px; display: inline-flex; align-items: center; gap: 5px; }
.m365-toplink:hover, .m365-toplink.is-current { color: #fff; }
.m365-mobile-toggle { display: none; }
.m365-drawer { display: none; }
.m365-drawer[hidden] { display: none; }
.m365-drawer.is-open, .m365-drawer.is-open[hidden] { display: block; }

/* ---------- marquee ---------- */
.m365-marquee-mask { overflow: hidden; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.m365-marquee-mask > * { flex-wrap: nowrap; }
.m365-marquee-track { display: flex; width: max-content; flex-wrap: nowrap; animation: marquee 40s linear infinite; }
.m365-marquee-mask:hover .m365-marquee-track { animation-play-state: paused; }

/* A narrower viewport covers the same translate distance in the same time, so
   the identical duration reads as much faster on a phone. Slow it right down. */
@media (max-width: 900px) {
  .m365-marquee-track { animation-duration: 75s; }
  .m365-marquee-mask > [style*="animation:marquee"],
  .m365-marquee-mask > [style*="animation: marquee"] { animation-duration: 110s !important; }
}
@media (max-width: 560px) {
  .m365-marquee-track { animation-duration: 95s; }
  .m365-marquee-mask > [style*="animation:marquee"],
  .m365-marquee-mask > [style*="animation: marquee"] { animation-duration: 140s !important; }
}
/* If motion is reduced the track must not simply sit there showing both copies. */
@media (prefers-reduced-motion: reduce) {
  .m365-marquee-mask { overflow-x: auto; scrollbar-width: none; }
  .m365-marquee-mask::-webkit-scrollbar { display: none; }
  .m365-marquee-track, .m365-marquee-mask > [style*="animation"] { animation: none !important; }
  .m365-marquee-track > [aria-hidden="true"], .m365-marquee-mask > * > [aria-hidden="true"] { display: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.m365-desktop-nav { display: none !important; }
	.m365-mobile-toggle { display: flex !important; }
	[data-stack] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
	.m365-hero h1 { font-size: clamp(38px, 12vw, 56px) !important; }
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
	.m365-bg [class] { animation: none !important; }
}


/* ---------- WordPress menu -> mega nav ---------- */
.m365-nav { display: block; }
.m365-menu, .m365-menu-mobile { list-style: none; margin: 0; padding: 0; }
.m365-menu { display: flex; gap: 2px; align-items: center; }
.m365-menu > li { position: relative; }
.m365-menu > li > a { display: inline-flex; align-items: center; gap: 5px; color: oklch(0.66 0.02 265); font-weight: 600; font-size: 14px; padding: 9px 13px; border-radius: 10px; }
.m365-menu > li > a:hover, .m365-menu > li.current-menu-item > a, .m365-menu > li.current_page_item > a, .m365-menu > li.current-menu-parent > a, .m365-menu > li.current-menu-ancestor > a { color: #fff; background: oklch(0.24 0.02 265); }
.m365-menu > li.menu-item-has-children > a::after { content: "\25BE"; font-size: 9px; opacity: .7; }
.m365-menu .sub-menu { list-style: none; margin: 0; padding: 12px; position: absolute; top: 100%; left: 0; display: flex; flex-direction: column; gap: 2px; width: 340px; min-width: 340px; max-width: 340px; max-height: min(70vh, 620px); overflow-y: auto; columns: 1; z-index: 70; background: oklch(0.17 0.018 265 / 0.98); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid oklch(0.30 0.02 265); border-radius: 18px; box-shadow: 0 22px 60px oklch(0.06 0.02 265 / 0.6); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.m365-menu > li:hover > .sub-menu, .m365-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.m365-menu .sub-menu li { width: 100%; }
.m365-menu .sub-menu a { display: block; width: 100%; padding: 11px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; color: oklch(0.82 0.02 265); white-space: normal; }
.m365-menu .sub-menu a:hover { background: oklch(0.24 0.02 265); color: #fff; }

.m365-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; border: 1px solid oklch(0.30 0.02 265); background: oklch(0.20 0.02 265); cursor: pointer; }
.m365-burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }
.m365-drawer { display: block; }
.m365-drawer[hidden] { display: none; }
.m365-menu-mobile a { display: block; padding: 13px 14px; border-radius: 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; color: #fff; }
.m365-menu-mobile a:hover { background: oklch(0.24 0.02 265); }
.m365-menu-mobile .sub-menu { list-style: none; margin: 0 0 0 12px; padding: 0; display: none; }
.m365-menu-mobile .menu-item-has-children.is-open > .sub-menu { display: block; }
.m365-menu-mobile .sub-menu a { font-size: 14.5px; color: oklch(0.78 0.02 265); font-family: 'Manrope', sans-serif; }

/* ---------- editor prose (block editor content) ---------- */
.m365-prose { max-width: 92ch; }
.m365-prose > * + * { margin-top: 16px; }
.m365-prose h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(21px, 2.5vw, 27px); letter-spacing: -0.02em; line-height: 1.2; color: #fff; margin: 34px 0 12px; }
.m365-prose h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 19px; color: #fff; margin: 26px 0 10px; }
.m365-prose p { font-size: 16px; line-height: 1.68; color: oklch(0.72 0.02 265); text-wrap: pretty; }
.m365-prose ul, .m365-prose ol { padding-left: 22px; color: oklch(0.72 0.02 265); font-size: 16px; line-height: 1.68; }
.m365-prose li + li { margin-top: 8px; }
.m365-prose strong { color: #fff; }
.m365-prose blockquote { border-left: 2px solid oklch(0.62 0.21 27); padding-left: 20px; margin-left: 0; color: oklch(0.84 0.02 265); }
.m365-prose img { border-radius: 16px; }
.m365-prose a { color: oklch(0.74 0.16 27); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- filters, cards, spotlight ---------- */
.m365-filter { display: inline-block; font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 999px; border: 1px solid oklch(0.30 0.02 265); color: oklch(0.70 0.02 265); }
.m365-filter:hover { border-color: oklch(0.55 0.14 27); color: #fff; }
.m365-filter.is-active { background: oklch(0.62 0.21 27); border-color: oklch(0.62 0.21 27); color: #fff; }
.m365-card { transition: transform .22s, border-color .22s; }
.m365-card:hover { transform: translateY(-4px); border-color: oklch(0.55 0.14 27); }
.m365-spot { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), oklch(0.62 0.21 27 / 0.16), transparent 60%); transition: background .12s; pointer-events: none; }
.m365-legal, .m365-legal-fallback { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.m365-legal a, .m365-legal-fallback a { color: oklch(0.52 0.02 265); font-size: 13px; }
.m365-widget-title { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 10px; }
.custom-logo { height: 34px; width: auto; background: #fff; border-radius: 8px; padding: 5px 9px; }
.m365-lede { font-size: clamp(17px, 1.7vw, 21px) !important; line-height: 1.6 !important; color: oklch(0.74 0.015 265) !important; max-width: 72ch; margin: 0 !important; }

@media (max-width: 900px) {
	.m365-nav { display: none !important; }
	.m365-burger { display: flex !important; }
	.m365-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; }
}


/* ---------- landing-page components (services / technology) ---------- */
.m365-row { display: grid; grid-template-columns: 92px 1fr 300px; gap: 26px; align-items: start; padding: 28px 30px; border: 1px solid oklch(0.28 0.02 265); border-radius: 20px; background: oklch(0.18 0.018 265); text-decoration: none; color: inherit; transition: border-color .22s, transform .22s, background .22s; }
.m365-row:hover { border-color: oklch(0.55 0.14 27); transform: translateY(-3px); background: oklch(0.195 0.02 265); }
.m365-row-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.03em; line-height: .9; color: #e8734a; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.m365-row-num { background: linear-gradient(160deg, oklch(0.78 0.18 27), oklch(0.42 0.10 27)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.m365-row-main h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.015em; line-height: 1.2; margin: 4px 0 10px; color: #fff; }
.m365-row-side { display: flex; flex-direction: column; gap: 14px; padding-left: 24px; border-left: 1px solid oklch(0.26 0.02 265); }
.m365-row-go { font-weight: 700; font-size: 13.5px; color: oklch(0.76 0.16 27); }

.m365-tile { display: flex; flex-direction: column; padding: 26px; border: 1px solid oklch(0.28 0.02 265); border-radius: 20px; background: oklch(0.18 0.018 265); text-decoration: none; color: inherit; transition: border-color .22s, transform .22s; }
.m365-tile:hover { border-color: oklch(0.55 0.14 27); transform: translateY(-3px); }
.m365-tile h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; line-height: 1.22; margin: 14px 0 10px; color: #fff; }
.m365-tile-badge { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: oklch(0.82 0.14 27); background: oklch(0.62 0.21 27 / 0.14); border: 1px solid oklch(0.62 0.21 27 / 0.36); }

.m365-chip { font-size: 12.5px; font-weight: 600; color: oklch(0.78 0.02 265); background: oklch(0.22 0.02 265); border: 1px solid oklch(0.30 0.02 265); padding: 7px 13px; border-radius: 999px; }
a.m365-chip-link { text-decoration: none; transition: border-color .18s, color .18s; }
a.m365-chip-link:hover { border-color: oklch(0.62 0.21 27); color: #fff; }

.m365-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.m365-ticks li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.45; color: oklch(0.72 0.02 265); }
.m365-ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: oklch(0.68 0.21 27); }

@media (max-width: 980px) {
	.m365-row { grid-template-columns: 64px 1fr; }
	.m365-row-side { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid oklch(0.26 0.02 265); padding-top: 16px; }
}


/* ---------- shared hero + jump bar (site-wide consistency) ---------- */
.m365-hero-glow { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: min(1000px, 120%); height: 520px; background: radial-gradient(60% 60% at 50% 0%, oklch(0.30 0.09 27 / 0.5), transparent 70%); filter: blur(30px); pointer-events: none; }
.m365-pill { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.8 0.02 265); font-weight: 700; margin-bottom: 24px; padding: 8px 15px; border: 1px solid oklch(0.32 0.02 265); border-radius: 999px; background: oklch(0.20 0.02 265 / 0.5); }
.m365-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: oklch(0.66 0.21 27); }
.m365-jump { position: sticky; top: 92px; z-index: 40; padding: 18px 32px 10px; background: linear-gradient(oklch(0.15 0.015 265 / 0.92), oklch(0.15 0.015 265 / 0)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.m365-jump .m365-filter { white-space: nowrap; }
@media (max-width: 900px) { .m365-jump { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; background: none; } }


/* ---------- full-width refinements (v2.3.0) ---------- */
.m365-row { grid-template-columns: 108px 1fr 360px; }
.m365-row-main p { max-width: 74ch; }
@media (min-width: 1500px) {
	.m365-prose { max-width: 96ch; }
	.m365-row { grid-template-columns: 120px 1fr 400px; }
}
@media (max-width: 980px) { .m365-row { grid-template-columns: 64px 1fr; } }


/* ---------- go-live QA: colour fallback, focus, print (v2.7.0) ---------- */

/* Engines without oklch() support (Safari < 15.4, older Chromium/Edge) get a
   readable hex baseline before the modern declarations override it. */
html, body { background: #1e1f26; }
body.m365 { color: #f7f5f2; }
html, body { background: oklch(0.15 0.015 265); }
body.m365 { color: oklch(0.97 0.006 85); }
a { color: #e8734a; }
a { color: oklch(0.68 0.21 27); }

/* Keyboard focus must be visible everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #ffb199;
	outline: 3px solid oklch(0.82 0.14 40);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Skip link — visible only when focused. */
.m365-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: #e8734a; background: oklch(0.62 0.21 27); color: #fff;
	font-weight: 700; font-size: 15px; padding: 14px 22px; border-radius: 0 0 12px 0;
}
.m365-skip:focus { left: 0; color: #fff; }

/* Comfortable tap targets on touch devices. */
@media (hover: none) and (pointer: coarse) {
	.m365-menu-mobile a, .m365-filter, .m365-chip { min-height: 44px; display: inline-flex; align-items: center; }
	.m365-menu-mobile a { display: flex; }
}

/* Never let a long word or code string force a horizontal scrollbar. */
.m365-prose, .m365-body, .m365 p, .m365 h1, .m365 h2, .m365 h3 { overflow-wrap: break-word; }
.m365-prose pre, .m365-prose table { overflow-x: auto; max-width: 100%; display: block; }

/* Very small phones. */
@media (max-width: 420px) {
	.m365-row { grid-template-columns: 1fr; }
	.m365-row-num { font-size: 30px; }
}

/* Sensible printed pages. */
@media print {
	.m365-bg, .m365-spot, .m365-hero-glow, .m365-jump, .m365-drawer, .m365-burger, header, footer { display: none !important; }
	html, body, body.m365 { background: #fff !important; color: #111 !important; }
	.m365 h1, .m365 h2, .m365 h3, .m365-prose strong { color: #111 !important; }
	.m365 p, .m365-body, .m365-prose p { color: #333 !important; }
	a { color: #111 !important; text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; word-break: break-all; }
	section, .m365-card, .m365-row, .m365-tile { break-inside: avoid; page-break-inside: avoid; }
}


/* ---------------------------------------------------------------
   Legacy-browser colour fallback.
   The theme is authored in oklch (Chrome 111+, Safari 15.4+, Firefox 113+).
   Browsers without it would resolve every colour to invalid and render
   unstyled black-on-black, so the core surfaces get sRGB equivalents.
   --------------------------------------------------------------- */
@supports not (color: oklch(0 0 0)) {
  html, body, body.m365 { background: #1c1d24; color: #e6e7ec; }
  .m365 h1, .m365 h2, .m365 h3, .m365 h4, .m365 h5, .m365 h6 { color: #ffffff; }
  .m365 p, .m365 li, .m365 td, .m365 th, .m365-body { color: #b6b8c4; }
  a { color: #ff6a4d; }
  a:hover { color: #ff8a72; }
  .m365-panel-inner, .m365-menu .sub-menu { background: #23252e; border-color: #3a3d49; }
  .m365-menu-link, .m365-menu .sub-menu a { color: #d2d4dd; }
  .m365-menu-link:hover, .m365-menu .sub-menu a:hover { background: #32353f; color: #ffffff; }
  .m365-jump { background: #1c1d24; }
  .m365-pill::before { background: #ff6a4d; }
}


/* ---------- responsive hardening (v3.0.1) ---------- */
/* Sticky lives here, not inline, so the landscape override below can win. */
.m365-header { position: sticky; top: 16px; }
/* iOS zooms the page when a focused input is under 16px. */
.m365 input, .m365 textarea, .m365 select { font-size: 16px; min-height: 44px; max-width: 100%; }
.m365 textarea { min-height: 120px; }
.m365 button { min-height: 44px; }

/* Long URLs, emails and case-study slugs must not force a horizontal scrollbar. */
.m365 p, .m365 li, .m365 td, .m365-body, .m365-prose { overflow-wrap: anywhere; }
.m365 img, .m365 svg, .m365 iframe, .m365 video, .m365 table { max-width: 100%; }

/* Notched phones and gesture bars. */
@supports (padding: max(0px)) {
  .m365-shell, header, footer { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .m365-drawer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* Small phones (360px and under): tighten the standard 32px gutters. */
@media (max-width: 480px) {
  .m365 section > div[style*="padding"], .m365-shell { padding-left: 20px !important; padding-right: 20px !important; }
  .m365-jump { padding-left: 20px; padding-right: 20px; }
}

/* Landscape phones: the sticky header eats too much of a 380px-tall viewport. */
@media (max-height: 480px) and (orientation: landscape) {
  .m365-header { position: static; }
  .m365-drawer { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
}

/* Horizontal scrollers should not trap a trackpad gesture. */
.m365-jump { overscroll-behavior-x: contain; }