/*!
Theme Name: Siryi (Refactored)
Author: Sergey Golovashkin & Refactored by Gemini
Version: 2.8.0
*/

/* 1. IMPORTS & FONTS
--------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* 2. VARIABLES (THEME CONFIG)
--------------------------------------------- */
:root {
  /* --- Brand Colors --- */
  --attentive:      #FF4B61;
  --energy:         #FCBB35;
  --warm:           #F07762;
  --royalty:        #4d3ea9;
  --fresh:          #8FD3B7;
  --fresh-accent:   #74E1A4;
  --toxic-green:    #62ff10;
  --purple:         #594ac9;
	--ui-darkest:     hsl(251 48% 90% / 1);
	--ui-lightest:		hsl(244 53% 40% / 1);


  /* --- Layout --- */
  --border-radius:  8px;
  --container-width: 1280px;
  --swatch-size:    32px;
  --swatch-gap:     6px;

  /* --- Light Mode (Default) --- */
  --bg-body:        #f0eef9;
  --bg-light:       #fcfcfc;    /* Standard white/light backgrounds */
  --bg-header:      rgba(246, 245, 255, 0.38); /* #f6f5ff61 */
  --bg-input:       #ffffff;

  --text-main:      #765e8d;    /* Paragraphs */
  --text-title:     #17003D;    /* Headings */
  --text-link:      #9362BC;

  --border-color:   rgba(0, 0, 0, 0.09);
  --shadow-card:    0 8px 20px rgba(0, 0, 0, 0.05);
	--shadow-blue:		0 8px 20px hsl(244deg 53% 40% / 61%);

  --btn-bg:         #f5f4f4;    /* Tidy grey */
  --btn-text:       #000000;
	--pane-gradient:	linear-gradient(357deg, hsl(249 46% 86% / 1) 0%, rgba(228, 225, 244, 1) 32%, rgba(228, 225, 244, 0) 100%);
  --pane-subsection: linear-gradient(359deg, hsl(249 46% 92% / 1) 0%, rgba(228, 225, 244, 1) 32%, rgb(228 225 244 / 0%) 100%);

  /* --- Cursors --- */
  --cursor-auto:    url('https://siryi.me/img/cursor-v4.svg'), auto;
  --cursor-pointer: url('https://siryi.me/img/cursor-hover.svg'), pointer;
  --cursor-btn:     url('https://siryi.me/img/cursor-btn-hover.svg'), auto;
}

/* --- Dark Mode Variables --- */
body.dark {
  /* Backgrounds */
  --bg-body:        #131036;    /* Deep dark blue */
  --bg-light:       #1c184e;    /* Slightly lighter dark (Cards) */
  --bg-header:      #1c183c;
  --bg-input:       #100a30;
	--ui-darkest:		  hsl(245 54% 10% / 1);

  /* Text */
  --text-main:      #b9a9c6;
  --text-title:     #e2d3ff;
  --text-link:      #9362BC;    /* Kept same, adjust if needed */

  /* Borders & UI */
  --border-color:   #241e66;
  --shadow-card:    0 8px 20px rgba(20, 16, 54, 1);

  /* Buttons */
  --btn-bg:         transparent;
  --btn-text:       #e2d3ff;

	--pane-gradient:	linear-gradient(357deg, rgba(22, 19, 63, 1) 0%, rgba(22, 19, 63, 1) 32%, #1c184e 100%);
  --pane-subsection: linear-gradient(359deg, rgba(22, 19, 63, 1) 0%, rgb(22 19 63) 32%, #131036 100%);
}

.lineArt img {
  padding: 8px;
  /* background: linear-gradient(-160deg, rgb(225 212 222 / 32%) 0%, rgb(232 222 230 / 0%) 100%); */
  border-radius: var(--border-radius);
  border: 1px solid hsl(300deg 15% 98% / 11%);
}

.dprocess img {
  padding: 24px 16px;
  border-radius: 8px;
}
body.dark .dprocess {
  filter: invert(1);
  opacity: .4;
}

body.dark .lineArt {
  filter: invert(1);
  opacity: .4;
}

.inlineCard {
  padding: 0 24px;
}

.sectionTitle {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 24px;
}

/* 3. RESET & BASE STYLES
--------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  transition: all 0.32s ease;
}

body {
  background-color: var(--bg-body);
  color: var(--text-main);
	font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
  cursor: var(--cursor-auto);
  line-height: 1.5;
}

body.option-party { cursor: url('https://siryi.me/img/pty-parrot.gif'), auto; }

/* Border Radius Options */
body.option-border-12 { --border-radius: 12px; }
body.option-border-8  { --border-radius: 8px; }
body.option-border-6  { --border-radius: 6px; }
body.option-border-4  { --border-radius: 4px; }
body.option-border-0  { --border-radius: 0; }

a {
  text-decoration: none;
  color: var(--text-link);
  cursor: var(--cursor-pointer);
}

img { max-width: 100%; height: auto; }
iframe { width: 100%; }

/* 4. TYPOGRAPHY
--------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: "Google Sans", sans-serif;
  color: var(--text-title);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 2.800rem; margin-bottom: 32px; }
h2 { font-size: 2.5rem; margin: 24px 0 16px; z-index: 999; }
h3 { font-size: 2rem; margin: 16px 0 8px; font-weight: 600; }
h4 { font-size: 1.5rem; margin: 12px 0 8px; font-weight: 600; }
h5 { font-size: 1.25rem; margin-bottom: 8px; font-weight: 500; }

p {
  font-size: 18px;
  line-height: 1.42;
  color: var(--text-main);
  font-weight: 300;
  margin-bottom: 16px;
	font-family: "Ubuntu", sans-serif;
  line-height: 140%;
}

ul {
  padding-left: 16px;
}

strong { font-weight: 500;}

/* Links inside content */
p a { color: var(--attentive) !important; }

.inlineLink {
  color: var(--royalty);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #e0a4ff;
}
body.dark .inlineLink {
  color: var(--energy) !important;
  text-decoration-color: #e0a4ffbf;
}

/* User Text Size Preferences */
.option-userlarge h1 { font-size: 5rem; }
.option-userlarge p  { font-size: 22px; }
.option-usercompact h1 { font-size: 2rem; }
.option-usercompact p  { font-size: 12px; }

/* Text Effects */
.outline, .outline p, .outline h1, .outline h2 {
  color: transparent;
  -webkit-text-stroke: 0.046rem var(--text-title);
}
body.dark .outline { -webkit-text-stroke: 0.026rem #fff; }
.outline:hover { color: var(--warm); }

/* 5. LAYOUT & GRID
--------------------------------------------- */
.container {
  max-width: var(--container-width);
  margin: auto;
  padding: 0 32px;
}
.container-full { max-width: 100%; margin: auto; }
.option-userfluid .container { max-width: 100%; }

.row { display: flex; width: 100%; margin: auto;}
.col { display: flex; flex-direction: column; width: 100%; align-items: flex-start; }
.v-center { display: flex; align-items: center; }
.col-v-center { display: flex; flex-direction: column; justify-content: center; }

/* 6. COMPONENTS
--------------------------------------------- */
.wp-block-latest-posts__featured-image img {
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.wp-block-latest-posts__featured-image a {
	display: flex;
}
.wp-block-latest-posts .wp-block-latest-posts__featured_content{
	padding: 16px 16px 8px;
	border-top: 1px solid var(--border-color);
}
.wp-block-latest-posts__featured_content {
	padding: 8px 16px 8px
}
.wp-block-latest-posts__featured_content h4 {
	margin-top: 0;
}
.wp-block-latest-posts__post-title {
	padding: 12px 16px 8px;
	border-top: 1px solid var(--border-color);
	display: flex;
	width: 100%;
}
.wp-block-latest-posts__post-title {
	color: var(--text-title);
	font-weight: 500;
  line-height: 1.2;
  font-size: 1.25rem;
	padding-bottom: 8px;
}
.wp-block-latest-posts__post-excerpt {
	margin: 0;
	padding: 0 16px;
	font-weight: 400;
}
.wp-block-latest-posts time {
	color: var(--text-main);
	font-weight: 500;
}
.post-thumbnail {
	display: flex;
}
.post-thumbnail img {
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}
time {
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	padding: 8px 16px;
}
.wp-block-latest-posts li {
	background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
	padding-bottom: 16px;
}
.wp-block-latest-posts li:hover a {
	color: var(--attentive);
}

.cardCategories {
	position: absolute;
	margin-top: -46px;
	margin-left: 16px;
	z-index: 999;
}
.cardCategories .edit-link {
  background: var(--ui-lightest);
	padding: 4px 8px;
	border-radius: var(--border-radius);
	top: -40px;
	position: absolute;
}
.cardCategories .edit-link a {
	color: #ffffff;
  font-size: .9rem;
}
.cat-links {
	display: flex;
  gap: 4px;
}
.blogCard .cat-links a {
	background: var(--border-color);
	color: #ffffff;
	padding: 4px 8px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	font-size: .9rem;
	text-shadow: 0px 1px 6px #0000008a;
}
.blogContainer {
	margin-top: 32px;
}
.blogContainer section.col-md-4 {
	margin-bottom: 32px;
}
.coloredCard {
  padding: 24px;
  border-radius: 3px;
}

.coloredCard p {
  margin: 20px 0 0;
}

/* --- WP Separator (HR) --- */
.wp-block-separator {
	border-top: 1px solid;
  border-color: var(--border-color);
}
/* --- WP Image Figure Overrides --- */
figure {
	margin-bottom: 0;
}

.border-8 {
  border-radius: 8px;
}
.border-8 img {
	border-radius: 8px;
}
figure.border-8 img  {
	border-radius: 8px;
}

.heroGradient {
  background: radial-gradient(circle, rgba(255, 59, 118, 1) 0%, rgba(246, 180, 145, 1) 35%, rgba(239, 217, 255, 0.19) 60%, rgba(255, 255, 255, 0) 100%);
  border: 0;
  height: 600px;
  position: absolute;
  z-index: -1;
  top: -84px;
  max-width: 100%;
  left: 0;
  right: 0;
  opacity: .2;
}

/* --- Buttons --- */
.btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;
  font-size: 17px;
  font-weight: 500;
  border-radius: var(--border-radius);
  border: 1px solid rgba(0,0,0,0.15);
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: var(--cursor-btn);
}

body.dark .btn { border-color: rgba(255,255,255,0.14); }

.btn:hover,
.btn:focus {
  background: hsl(0, 5%, 91%);
  color: #8150b5;
}

.btn.btn-primary {
  background: var(--royalty);
  color: #fff;
  border: none;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
}
.btn.btn-primary:hover {
  box-shadow: 0px 12px 11px rgba(91,74,201, 0.44), inset -2px -3px 2px rgba(255, 255, 255, 0.25);
}

.btn-attentive {
  background: var(--attentive);
  color: #fff;
  border-radius: var(--border-radius);
  padding: 10px 16px;
  border: 1px solid var(--border-color);
}

/* WP Button Overrides */
.wp-block-button.is-style-outline a {
  background: transparent;
  border: 1px solid;
  color: var(--text-title);
}

/* --- Cards (General) --- */
.card-base {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
}

/* Case Card */
.caseCard {
  @extend .card-base; /* Conceptual, applies styles above */
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}
.caseCard .wp-block-group {
  padding: 16px 16px 8px;
  border-top: 1px solid var(--border-color);
}
.caseCard img { border-radius: 6px 6px 0 0; }

/* Blog Card */
.blogCard {
  /* padding: 8px; */
  background: var(--bg-light);
  border-radius: 8px;
  border: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.blogCard:hover { box-shadow: 2px 12px 16px rgba(0, 0, 0, .08); }
.blogCard a { color: var(--text-title); font-weight: 600;font-size: 1.1125rem; }

/* Review/Testimonial Card */
.reviewCard, .testimonialCard {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}
.testimonialCard .wp-block-group__inner-container {
	gap: 16px;
	display: flex;
	flex-direction: column;
}
.testimonialCardPhoto {
  background-color: var(--bg-body);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.testimonialCardRating {
	display: flex;
	/* margin: 8px 0 0; */
}

.testimonialCard h4 {
	font-size: 1rem;
	margin: 0 0 8px;
}
.testimonialCard h5 {
	font-size: .875rem;
	opacity: 0.5;
}
.testimonialCard p {
	margin-bottom: 0;
}
.testimonialCol {
	gap: 32px;
	display: flex;
	flex-direction: column;
}

/* --- Forms --- */
input, select, textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: var(--bg-input);
  color: var(--text-main);
}
textarea {
  max-height: 120px;
}
select.minimal {
  background-color: white;
  border: thin solid var(--energy);
  appearance: none;
  /* Add Custom arrow SVG here if needed */
}
.senderDetails {
  display: flex;
  gap: 16px;
}

/* --- Color Swatches --- */
.color-swatches__list {
  display: grid;
  grid-gap: var(--swatch-gap);
  grid-template-columns: repeat(auto-fit, var(--swatch-size));
  list-style: none;
}
.color-swatches__swatch {
  display: block;
  height: var(--swatch-size);
  width: var(--swatch-size);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.color-swatches__item--selected .color-swatches__swatch { border: 3px solid #fff; }

/* --- Tags & Chips --- */
ul.tags { display: flex; list-style: none; padding: 0; }
ul.tags li { font-size: 14px; margin-right: 26px; }

.list-outlined {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
  padding-left: 0;
}
.list-outlined li {
	padding: 4px 8px;
	border: 1px solid;
	border-radius: 8px;
	border-color: var(--border-color);
	background: var(--bg-light);
	list-style: none;
	/* margin-bottom: 8px; */
}

/* 7. HEADER & NAVIGATION
--------------------------------------------- */
header.site-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  z-index: 9999;
  position: relative;
}
header#masthead .row {
  padding: 8px 4px;
}

.site-branding {
	display: flex;
	align-items: center;
}
.site-branding svg {
	width: 100%;
}
.site-branding a {
	color: var(--text-title);
	display: flex;
}
.site-branding a.custom-logo-link {
	padding-right: 12px;
}
.custom-logo-link img {
	padding: 4px;
}


.current_page_item a {
	color: var(--attentive) !important;
}

.main-navigation ul {
  display: none; /* Mobile default */
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation {
	display: flex;
	justify-content: flex-end;
}
#footer-navigation.main-navigation {
  justify-content: flex-start;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle { display: none; }
  .main-navigation ul { display: flex; }
}

.main-navigation a {
  display: block;
  color: var(--text-link);
  padding: 8px 12px;
  font-weight: 550;
	font-size: 17px;
}
.main-navigation a:hover { color: var(--attentive); }

/* Language Switcher */
.wpml-ls-legacy-list-horizontal {
    display: flex;
    justify-content: flex-end;
}

.wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal ul {
	display: flex;
	padding: 4px;
	border-radius: 12px;
  background: var(--ui-darkest);
}

.wpml-ls-last-item {
  color: var(--text-main);
}
.wpml-ls-legacy-list-horizontal a.wpml-ls-link {
  color: var(--text-link);
  padding: 8px 12px;
}
.wpml-ls-current-language a {
	background: var(--bg-light);
	border-radius: 8px;
  border: 1px solid rgb(0 0 0 / 24%);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
body.dark .wpml-ls-current-language a {
	background: var(--ui-lightest);
  color: hsl(0deg 0% 100%) !important;
    border-radius: 8px;
    border: 1px solid rgb(255 255 255 / 10%);
    box-shadow: 0 8px 20px hsl(244deg 53% 40% / 61%);
    font-weight: 500;
}
/* footer .wpml-ls ul li:first-child a {
	  border-radius: 16px 0 0 16px;
}
footer .wpml-ls ul li:last-child a {
    border-radius: 0 16px 16px 0;
} */

/* 8. PAGE SPECIFIC (Hero, Home)
--------------------------------------------- */
.siryiHero {
  background: linear-gradient(180deg, #FFE8D3 0%, rgba(255, 232, 211, 0) 100%);
  background-size: cover;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  padding-top: 60px;
  margin-top: -110px;
}
body.dark .siryiHero {
  background: linear-gradient(180deg, #341368 0%, rgba(255, 232, 211, 0) 100%);
}

.heroCard {
  background: url('https://siryi.me/img/edit.svg') center no-repeat;
  background-size: 100%;
  min-height: 300px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.heroPane {
	border-radius: var(--border-radius);
	padding: 12px;
	border:1px solid var(--border-color);
	background: var(--bg-light);
	margin: 0 auto;
}
.heroPane p {
	max-width: 800px;
	margin: auto;
}
.heroPage {
	background: var(--pane-gradient);
	border-bottom: 1px solid;
	border-color: var(--border-color);
	margin-bottom: 16px;
}
.heroPage h1 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.subSection {
  background: var(--pane-subsection);
}

.single-header {
  background: var(--bg-light);
  padding-top: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.single-header img {
  border-radius: 8px;
  box-shadow: 0 6px 24px #13103624;
  border: 1px solid var(--border-color);
}
.single-header h1 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.scrollUp {
  position: fixed;
  left: 25px;
  bottom: 32px;
  z-index: 9999;
  background: var(--bg-light);
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid var(--border-color);
}
.scrollUp:hover {
  background: #ffffff80;
}

/* 9. FOOTER
--------------------------------------------- */
footer.site-footer {
  border-top: 1px solid var(--border-color);
  background: var(--bg-body);
  margin-top: 16px;
}
.footerNav{
  background: var(--bg-light);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}
.footer-copy {
  border-top: 1px solid var(--border-color);
  padding: 8px 0;
  background: var(--ui-darkest);
}
.footer-copy p {
  margin-bottom: 0;
}
.footer-cta .CTA p {
	max-width: 600px;
  margin: auto;
}

/* Social Icons */
.socials {
	display: flex;
	list-style: none;
	justify-content: space-around;
	align-items: center;
  max-width: 320px;
  margin: 32px auto; }
.socials li a {
	display: flex;
  filter: grayscale(1) brightness(0.4);
  transition: 0.3s;
}
.socials li a img {max-width:42px;opacity: .8;}
.socials li a:hover img {max-width:42px;opacity: 1;}
body.dark .socials li a { filter: grayscale(1) brightness(1.9); }
.socials li a:hover { filter: grayscale(0); }

/* 10. UTILITIES
--------------------------------------------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.p-0 { padding: 0 !important; }
.p-l-16 { padding-left: 16px; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.p-16 { padding: 16px;}

/* Colors Helpers */
.text-warm { color: var(--warm); }
.text-energy { color: var(--energy); }
.text-royalty { color: var(--royalty); }
.warm:hover { background: var(--warm); color: #fff; }
.energy:hover { background: var(--energy); color: #000; }
.royalty:hover { background: var(--royalty); color: #fff; }

/* Theme Switch Toggle */
.switch { position: relative; display: inline-block; width: 60px; height: 34px; transform: scale(.8); }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background-color: rgba(130,130,130,.2);
  transition: .4s;
  border-radius: 34px;
  background-image: url('https://siryi.me/img/slider-mode.svg');
  background-position: center;
  background-repeat: no-repeat;
}
.slider:before {
  position: absolute; content: "";
  height: 26px; width: 26px;
  left: 4px; bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
body.dark .slider:before { background-color: var(--bg-header); }
input:checked + .slider { background-color: var(--energy); }
input:checked + .slider:before { transform: translateX(26px); }

/* 11. ANIMATIONS (Logo Slider & Scroll Reveal)
--------------------------------------------- */
.logo-sliders-wrapper {
  max-width: var(--container-width);
  margin: auto;
}
.logo-slider-container figure,
.logo-slider-container figure figure {
  margin: 0 !important;
}

/* Base container for a single slider */
.logo-slider-container .wp-block-group__inner-container,
.logo-slider-container {
  overflow: hidden;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  --mask-size: 24px;
  --mask-color: #000;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    var(--mask-color) var(--mask-size),
    var(--mask-color) calc(100% - var(--mask-size)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--mask-color) var(--mask-size),
    var(--mask-color) calc(100% - var(--mask-size)),
    transparent
  );
}

.logo-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  transform: translateX(0);
}
.logo-track-reverse { transform: translateX(0); }

/* Logo Cards */
.wp-block-image.logo-card { width: 15%; height: auto; }
.logo-card {
  flex-shrink: 0;
  padding: 10px 20px;
  margin: 0 15px;
  height: 80px;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap;
  justify-content: center;
  background-color: var(--bg-light);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
}
.logo-card img {
  max-height: 100%;
  max-width: 100px;
  object-fit: contain;
}

body.dark .logo-card img {filter:invert(1);}

figure.wp-block-gallery.has-nested-images.clientsGallery { flex-wrap: nowrap; }

/* Pulse Animation */
.has-pulse-dot { display: flex; flex-wrap: wrap; align-items: center; }
.pulse {
  margin: 0 12px 0 0;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--attentive);
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255,75,97, 0.4);
  animation: pulse 2s infinite;
}
.pulse:hover { animation: none; }

@-webkit-keyframes pulse {
  0% { -webkit-box-shadow: 0 0 0 0 rgba(255,75,97, 0.4); }
  70% { -webkit-box-shadow: 0 0 0 10px rgba(255,75,97, 0); }
  100% { -webkit-box-shadow: 0 0 0 0 rgba(255,75,97, 0); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,75,97, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(255,75,97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255,75,97, 0); }
}

/* Scroll Reveal (JS Triggered) */
.js-scroll-reveal {
  opacity: 0;
  transform: translateY(30px) rotateZ(-1deg);
  transition: opacity 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-scroll-reveal.is-in-view {
  opacity: 1;
  transform: translateY(0) rotateZ(0);
}

/* 11. MOBILE BREAKPOINT (Max 600px)
--------------------------------------------- */
@media only screen and (max-width: 600px) {

  /* Mobile Typography */
  h1 { font-size: 28px; line-height: 1.16; }
  h2 { font-size: 24px; line-height: 1.06; }
	h3 { font-size: 1.325rem;}

  /* Mobile Navigation (Bottom Fixed) */
  .menuMobile, .menuMobile button {
    position: fixed; bottom: 39px; z-index: 99; left: 0;
  }

  ul#primary-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 16px; right: 16px; bottom: 32px;
    height: 64px;
    background-color: rgba(238, 241, 254, 0.9); /* #eef1fe eef1fe12 */
    backdrop-filter: blur(16px);
    width: auto;
    border-radius: 20px;
    border: 1px solid var(--bg-light);
    margin: 0;
    padding: 4px;
  }

  body.dark ul#primary-menu {
    background: rgba(6, 10, 24, 0.8);
    border-color: var(--text-link);
  }

  /* Mobile Hero */
  .heroCard {
    background: url('https://siryi.me/img/edit-mobile.svg') center no-repeat;
    background-size: contain;
    text-align: center;
    margin-top: -280px;
    z-index: 10;
    backdrop-filter: blur(14px);
  }

  .scrollUp {
    right: 25px;
    bottom: 94px;
  }

  .aboutColCentered img {height: auto !important;}

  /* Tables (Responsive Stack) */
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr { margin-bottom: 16px; border-bottom: 1px solid #ddd; }
  td { padding-left: 50%; position: relative; text-align: right; }
  td::before {
    content: attr(data-label);
    position: absolute; left: 0; width: 45%; font-weight: bold; text-align: left;
  }

  /* Utilities */
  .headshot {
		display: flex;
    flex-wrap: nowrap !important;
		gap: 0;
	}
	.testimonialCard .headshot div:first-child {flex-basis: 10% !important;}
	.testimonialCard .headshot div:last-child {flex-basis: 40% !important;}
  .p-mob-0-15 { padding: 0 15px !important; }
	.mobile-order-2 { order:2; }
  .gap-mobile-0 { gap:0; }
  .p-0-20-mobile { padding: 0 20px; }
  .heroPane p {
    font-size: 16px !important;
    padding: 0 4px;
  }
	.testimonialCardPhoto {max-width: 80px;}
	.wp-container-2.wp-container-2, .wp-container-19.wp-container-19, .wp-container-52.wp-container-52 {
    justify-content: flex-start !important;
	}

	.order-1 {
		order:1;
	}
	.order-2 {
		order:2;
	}
	.menuMobile, .menuMobile button {
		position: fixed;
		bottom: 20px;
	}
	.menuMobile nav {
		background: #fff;
    max-width: 100%;
	}
	.menuMobile button {
		z-index: 999;
	}
  .menuMobile {
    max-width: 300px;
  }
	.mh {
		display: none;
	}
	.mobile-order-2 {
		order:2;
	}
  .mobileCard {
    padding: 16px 20px 4px;
    /* border: 1px solid var(--border-color);
    border-radius: 8px; */
  }
  .wp-block-latest-posts.is-grid li {
    margin: 0 0 1.25em 0;
  }

.wp-block-gallery.has-nested-images.heroPic figure.wp-block-image.heroPicImg img {
		height: auto !important;
    width: 80% !important;
    margin: auto;
	}

	.wp-block-column.heroPicCol {
		/* margin-left: -31px !important;
		margin-right: -31px !important; */
		margin-top: -12px !important;
		padding-top: 16px;
		overflow: none;
	}
	.heroPicCol {
		/* background-color: var(--accent); */
		background: linear-gradient(0deg, rgb(255 75 97 / 13%) 0%, #fbd1da9c 20%, rgb(238 235 255 / 80%) 100%);
		/* background: linear-gradient(0deg, rgb(255 75 97 / 63%) 0%, #fbd1da29 20%, rgb(238 235 255 / 50%) 100%); */
		/* linear-gradient(0deg, rgb(255 75 97 / 63%) 0%, #fbd1da 50%, rgb(238 235 255) 100%); */
	}
	body.dark .heroPicCol {
		/* background-color: var(--royalty); */
		background: linear-gradient(357deg, rgb(255 75 97 / 72%) 0%, rgba(251, 209, 218, 0.2) 50%, #1c183c 100%);
	}

	.heroPic figure {
		border-bottom: 1px solid var(--border-color);
	}
	body.dark .heroPic figure {
		border-bottom: 1px solid var(--dark-border-color);
	}
	/*  */
	.menuMobile, .menuMobile button {
		position: fixed;
    bottom: 50px;
    z-index: 99;
    left: 0;
    bottom: 39px;
	}
	.menuMobile nav.site-navigation {
		display: flex;
    width: 100%;
    position: fixed;
    height: 40px;
    left: 0;
    background: red;
	}
	ul#primary-menu {
		display: flex;
		padding: 4px;
    justify-content: space-around;
		align-items: center;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 18px;
		height: 64px;
		background-color: #eef1fe12;
		/* background-color: #fcfcfc10; */
		backdrop-filter: blur(16px);
		width: calc(80% - 40px);
		margin: 8px 16px 0 16px;
		border-radius: 20px;
		border: 1px solid;
		border-color: var(--border-color);
	}
	ul#primary-menu li a {
		color: var(--royalty);
		text-shadow: 1px 2px 16px #ffffff40;
	}
	body.dark ul#primary-menu li a {
		color: #b48eff;
		text-shadow: 1px 2px 16px #b48eff20;
	}
	body.dark ul#primary-menu {
		background: #060a1810;
		border-color: var(--primary-accent);
	}
	header .v-center {padding: 8px 0;}
	.menu-toggle {
		display: none;
	}

	nav.profile-nav a {
		padding: 16px 8px;
		font-weight: 600;
    font-size: 17px;
	}
	ul#primary-menu nav.profile-nav .menu-item-4706 a {
		background: var(--accent);
		color: #fff;
	}
	nav.profile-nav li {
		padding: 2px;
	}
	nav.profile-nav .menu-item-4706 a {
		padding: 12px 16px;
	}

	.menu-item-4706 a {
		padding: 12px;
		margin: 0;
		border-radius: 16px;
	}

	#menu-item-3434 a {
		padding-left: 16px;
	}

	.wp-block-buttons.is-content-justification-right {
		justify-content: flex-start;
	}

	footer#footer {
		padding-bottom: 100px;
	}
	footer#footer .propsHeader {
		justify-content:center;
	}

	.custom-logo-link img {
		height: 56px;
	}
	.propsHeader .mode.ui_block {
		transform: scale(1.4);
	}
	.propsHeader {
		display: flex;
		justify-content: flex-end;
	}

	.heroCard {
		background: url('https://siryi.me/img/edit-mobile.svg') center no-repeat;
		background-size: contain;
		text-align: center;
		margin-top: -280px;
		margin-bottom: 20px;
		z-index: 10;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}

	body.dark .heroCard {
		background-color: #141036b3;
	}
	body.dark .siryiHero {
		/* background: url('https://siryi.me/img/heroAnimateDark.svg') center no-repeat; */
		background: linear-gradient(180deg, #341368 0%, rgba(255, 232, 211, 0) 100%);
	}
	ul.homeSecondaryNav {
		margin-top: -48px;
		position: relative;
	}
	ul.homeSecondaryNav li a mark {
	  padding-right: 6px;
	}
	.container {
		max-width: 100%;
		padding: 0 16px;
		width: 100%;
	}
	.heroPane p { max-width: 100%;}
	.heroPane {max-width: calc(100% - 32px);margin: 0 16px;padding: 12px;}
	.p-0-mobile {padding: 0;}
	.caseCardsWorks li {margin-right: 0;}

  .lineArt img {
    width: 100% !important;
    height: auto !important;
  }
}

/* Only desktop */
@media screen and (min-width: 37.5em) {
	.p-0-desktop {
		padding: 0;
	}
	.p-16-desktop {
		padding: 0 16px;
	}
}