/* Willows Digital – layout and component styles that theme.json can't express. */

:root {
	--wd-ink: var(--wp--preset--color--ink);
	--wd-accent: var(--wp--preset--color--accent);
	--wd-accent-soft: var(--wp--preset--color--accent-soft);
	--wd-soft: var(--wp--preset--color--soft);
	--wd-line: var(--wp--preset--color--line);
	--wd-body: var(--wp--preset--color--body);
	--wd-muted: var(--wp--preset--color--muted);
	--wd-section-pad: clamp(64px, 8vw, 112px);
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }

/* Sections sit flush against each other. */
body .wp-site-blocks > *,
body .wd-main > .wd-section { margin-block-start: 0; }

/* ---------- Header ---------- */
.wd-header {
	border-bottom: 1px solid var(--wd-line);
	padding-top: 18px;
	padding-bottom: 18px;
}
body .wd-header__inner { gap: 16px; }
body .wd-brand { gap: 10px; }
.wd-brand__mark {
	width: 36px; height: 36px; border-radius: 9px;
	background: var(--wd-accent); color: #fff !important;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 20px;
	text-decoration: none;
}
.wd-brand__name { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.wd-brand__name a { text-decoration: none; color: var(--wd-ink); }

.wd-nav { font-size: 15px; font-weight: 500; }
body .wd-nav .wp-block-navigation__container { gap: 8px 28px; align-items: center; }
.wd-nav a { text-decoration: none; }
.wd-nav .wd-nav-cta > a {
	background: var(--wd-ink); color: #fff !important;
	padding: 11px 18px; border-radius: 999px; min-height: 44px;
	display: inline-flex; align-items: center;
}
.wd-nav .wd-nav-cta > a:hover { background: var(--wd-accent); }
.wd-nav .wp-block-navigation__responsive-container.is-menu-open .wd-nav-cta > a { margin-top: 8px; }

/* ---------- Sections ---------- */
.wd-section { padding-top: var(--wd-section-pad); padding-bottom: var(--wd-section-pad); }
.wd-bg-soft { background: var(--wd-soft); }
.wd-bg-dark { background: var(--wd-ink); color: #fff; }
.wd-bg-dark h2, .wd-bg-dark h3 { color: #fff; }

.wd-eyebrow {
	margin: 0;
	font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wd-accent);
}
.wd-bg-dark .wd-eyebrow { color: var(--wp--preset--color--accent-light); }
body .wd-section .wd-eyebrow + * { margin-block-start: 8px; }
body .wd-section .wd-section-title { max-width: 18em; margin-bottom: 44px; }

.wd-muted { color: var(--wd-muted); }
.wd-narrow { max-width: 26em; }
body .wd-section-head { gap: 16px; margin-bottom: 40px; }
body .wd-section-head > * { margin: 0; }
body .wd-grid { gap: 24px; }

/* ---------- Hero ---------- */
.wd-hero { padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(48px, 7vw, 96px); }
body .wd-hero__cols { gap: 56px; }
.wd-badge {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 4px;
	font-size: 14px; font-weight: 600; color: var(--wd-body);
	background: #F1F2F5; padding: 6px 14px; border-radius: 999px;
}
.wd-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--green); }
.wd-lead { font-size: var(--wp--preset--font-size--large); color: var(--wd-muted); max-width: 34em; }
body .wd-hero__buttons { margin-top: 36px; gap: 12px; }
.wd-hero__meta { margin-top: 36px !important; font-size: 14px; color: #5A616C; }

/* Buttons */
.wp-block-button__link { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.wd-btn-arrow .wp-block-button__link::after {
	content: ""; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--wd-ink);
	border: 1.5px solid var(--wd-ink);
	padding: 13px 26px;
}
body .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wd-ink); color: #fff; }

/* Hero mock-up */
.wd-hero-visual { position: relative; height: 440px; }
.wd-browser {
	position: absolute; background: #fff; border: 1px solid #DCDFE5; border-radius: 14px; overflow: hidden;
	box-shadow: 0 24px 60px rgba(18, 21, 28, 0.12);
}
.wd-browser--back { top: 0; right: 0; width: 86%; }
.wd-browser--front { bottom: 0; left: 0; width: 62%; box-shadow: 0 24px 60px rgba(18, 21, 28, 0.16); }
.wd-browser__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #F4F5F7; border-bottom: 1px solid var(--wd-line); }
.wd-dot { width: 10px; height: 10px; border-radius: 50%; background: #D5D8DE; flex: none; }
.wd-url { margin-left: 10px; flex: 1; background: #fff; border-radius: 6px; font-size: 12px; color: #5A616C; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-browser__shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* ---------- Work cards ---------- */
.wd-card {
	background: #fff; border: 1px solid var(--wd-line); border-radius: 16px; overflow: hidden;
	display: flex; flex-direction: column;
}
body .wd-card > * { margin: 0; }
.wd-card__media { height: 220px; padding: 28px 28px 0; display: flex; align-items: flex-end; }
.wd-card__media--green { background: var(--wp--preset--color--green-soft); }
.wd-card__media--blue { background: var(--wd-accent-soft); }
.wd-card__screen {
	display: block; width: 100%; height: 100%; background: #fff; border-radius: 10px 10px 0 0;
	box-shadow: 0 10px 30px rgba(18, 21, 28, 0.10);
	object-fit: cover; object-position: top;
}
.wd-card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
body .wd-card__body > * { margin: 0; }
body .wd-card__body > * + * { margin-top: 8px; }
.wd-card__meta { font-size: 13px; font-weight: 600; color: #5A616C; }
.wd-card h3 { font-size: 24px; }
body .wd-card__link { margin-top: auto !important; padding-top: 12px; font-weight: 600; display: flex; flex-wrap: wrap; column-gap: 24px; }
.wd-card__link a { min-height: 44px; display: inline-flex; align-items: center; }

.wd-card--cta {
	background: transparent; border: 2px dashed #C3C8D1;
	justify-content: center; align-items: flex-start;
	padding: 36px 30px; min-height: 360px; gap: 12px;
}
.wd-card--cta .wd-card__link { margin-top: 0 !important; padding-top: 0; }

.wd-icon {
	width: 48px; height: 48px; border-radius: 12px;
	background: var(--wd-accent-soft); color: var(--wd-accent);
	display: inline-flex; align-items: center; justify-content: center;
}
.wd-icon--dark { width: 52px; height: 52px; border-radius: 14px; background: var(--wd-ink); color: #fff; }

/* ---------- Services ---------- */
.wd-service { padding: 28px; border: 1px solid var(--wd-line); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
body .wd-service > * { margin: 0; }
.wd-service h3 { font-size: 21px; }

/* ---------- Excel With Mark ---------- */
.wd-ewm { --wd-ewm: #1F7A4A; background: var(--wp--preset--color--green-soft); }
.wd-ewm .wd-eyebrow { color: var(--wd-ewm); }
body .wd-ewm__cols { gap: 56px; }
body .wd-ewm__buttons { margin-top: 28px; gap: 12px; }
.wd-ewm .wd-btn-arrow .wp-block-button__link { background: var(--wd-ewm); }
.wd-ewm .wd-btn-arrow .wp-block-button__link:hover { background: var(--wd-ink); }
.wd-ewm__panel { background: #fff; border-radius: 18px; padding: 28px 32px; box-shadow: 0 20px 50px rgba(31, 122, 74, 0.12); }
body .wd-ewm__panel > * { margin: 0; }
.wd-ewm__brand { display: flex; align-items: center; gap: 10px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 20px; padding-bottom: 12px; }
.wd-ewm__logo { width: 36px; height: 36px; border-radius: 8px; background: var(--wd-ewm); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
body .wd-ewm__offer { border-top: 1px solid var(--wd-line); padding: 16px 0; gap: 16px; }
body .wd-ewm__offer:last-child { padding-bottom: 0; }
body .wd-ewm__offer p { margin: 0; }
.wd-ewm__offer a { font-weight: 600; text-decoration: none; }
.wd-ewm__offer a:hover { color: var(--wd-ewm); text-decoration: underline; }
.wd-ewm__price { font-family: var(--wp--preset--font-family--heading); font-weight: 700; white-space: nowrap; color: var(--wd-ewm); }

/* ---------- Process ---------- */
body .wd-steps { gap: 32px; }
.wd-step { border-top: 2px solid #3A404B; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
body .wd-step > * { margin: 0; }
.wd-step__num { font-family: var(--wp--preset--font-family--heading); font-size: 15px; font-weight: 700; color: var(--wp--preset--color--accent-light); }
.wd-step p:not(.wd-step__num) { color: #C5CAD3; }

/* ---------- Pricing ---------- */
.wd-center { text-align: center; max-width: 640px; margin-left: auto !important; margin-right: auto !important; margin-bottom: 48px; }
body .wd-center > h2 { margin-bottom: 14px; }
body .wd-prices { align-items: stretch; }
.wd-price-card { border: 1px solid var(--wd-line); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
body .wd-price-card > * { margin: 0; }
.wd-price-card--featured { border: 2px solid var(--wd-accent); box-shadow: 0 20px 50px rgba(35, 70, 232, 0.12); }
body .wd-price-card--featured > .wp-block-group { gap: 8px; align-items: center; }
.wd-tag { margin: 0; font-size: 13px; font-weight: 600; color: #fff; background: var(--wd-accent); padding: 4px 12px; border-radius: 999px; }
.wd-price { font-family: var(--wp--preset--font-family--heading); font-size: 40px; font-weight: 700; line-height: 1.1; }
.wd-ticks { padding-left: 20px; color: var(--wd-body); display: flex; flex-direction: column; gap: 8px; }
body .wd-price-card__cta { margin-top: auto !important; }
.wd-price-card__cta .wp-block-button { width: 100%; }
.wd-price-card__cta .wp-block-button__link { width: 100%; min-height: 48px; }

.wd-care { margin-top: 24px; background: var(--wd-soft); border-radius: 18px; padding: 24px 28px; gap: 16px; }
body .wd-care h3 { font-size: 20px; margin: 0 0 4px; }
body .wd-care p { margin: 0; }

/* ---------- About + FAQ ---------- */
body .wd-about { gap: 56px; }
.wd-avatar { display: block; border-radius: 50%; }
.wd-about__text { font-size: 18px; color: var(--wd-body); }
.wd-faq-title { font-size: 26px !important; }
body .wd-faq { background: #fff; border-radius: 14px; padding: 20px 24px; margin-top: 12px; }
.wd-faq summary {
	font-weight: 600; font-size: 17px; cursor: pointer; list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 28px;
}
.wd-faq summary::-webkit-details-marker { display: none; }
.wd-faq summary::after { content: "+"; font-size: 22px; font-weight: 500; color: var(--wd-accent); line-height: 1; }
.wd-faq[open] summary::after { content: "–"; }
body .wd-faq > p { margin: 12px 0 0; color: var(--wd-muted); }

/* ---------- Contact ---------- */
body .wd-contact { gap: 56px; }
.wd-email { font-weight: 600; }
.wd-form {
	background: var(--wd-soft); border-radius: 20px; padding: clamp(24px, 3vw, 40px);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
}
.wd-form, .wd-form *, .wd-form *::before, .wd-form *::after { box-sizing: border-box; }
.wd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wd-field--full { grid-column: 1 / -1; }
.wd-field label { font-size: 14px; font-weight: 600; }
.wd-field input, .wd-field select, .wd-field textarea {
	font: inherit; min-height: 48px; padding: 10px 14px;
	border: 1px solid #C3C8D1; border-radius: 10px; background: #fff; color: var(--wd-ink); width: 100%;
}
.wd-field textarea { resize: vertical; }
.wd-field input:focus, .wd-field select:focus, .wd-field textarea:focus { outline: 2px solid var(--wd-accent); outline-offset: 1px; border-color: var(--wd-accent); }
.wd-form button { border: 0; cursor: pointer; min-height: 52px; padding: 15px 30px; }
.wd-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wd-form-notice { border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; font-weight: 600; }
.wd-form-notice--ok { background: var(--wp--preset--color--green-soft); color: #14532D; }
.wd-form-notice--error { background: #FDECEC; color: #8A1C1C; }

/* ---------- Footer ---------- */
.wd-footer { border-top: 1px solid var(--wd-line); padding-top: 28px; padding-bottom: 28px; font-size: 14px; color: var(--wd-muted); }
body .wd-footer p { margin: 0; }
.wd-footer__links { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- Case studies ---------- */
.wd-case-shot img { border: 1px solid var(--wd-line); border-radius: 14px; box-shadow: 0 20px 50px rgba(18, 21, 28, 0.10); }
.wd-facts { list-style: none; padding: 20px 24px !important; background: var(--wd-soft); border-radius: 14px; display: grid; gap: 6px; }
.wd-case-cta { margin-top: 56px !important; padding: 32px; border-radius: 18px; background: var(--wd-accent-soft); }
body .wd-case-cta > * { margin: 0; }
body .wd-case-cta > * + * { margin-top: 12px; }
body .wd-case-cta .wp-block-buttons { margin-top: 20px; gap: 12px; }

/* ---------- Inner pages ---------- */
.wd-page { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 8vw, 104px); }
.wd-meta { color: var(--wd-muted); font-size: 14px; }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.wd-hero-visual { height: 340px; }
}
@media (max-width: 480px) {
	.wd-hero-visual { height: 280px; }
	.wd-browser--back { width: 94%; }
	.wd-browser--front { width: 78%; }
}