/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.1.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/*
 * Daklak Agency design foundation
 * Phase 1 — 2026-08-20
 * Keep page-specific layout rules out of this file. Reusable components only.
 */
:root {
  --color-primary: #f0932b;
  --color-primary-hover: #d97812;
  --color-secondary: #0d3d26;
  --color-success: #2e7d32;
  --color-alert: #d32f2f;
  --color-surface: #f7f5ec;
  --color-surface-border: #e0dcc8;
  --color-text-body: #333333;
  --color-text-heading: #0d3d26;
  --color-text-on-dark: #ffffff;
  --color-divider: #e5e5e5;
  --color-link: #1e7c4f;
  --color-link-hover: #0d3d26;
  --gradient-brand: linear-gradient(135deg, #1e7c4f 0%, #14512f 100%);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 12px 32px rgb(13 61 38 / 10%);
  --transition-ui: 180ms ease;
  --content-measure: 720px;
}

/* Global Daklak Agency typography system */
:root {
  --font-brand: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --type-body: 16px;
  --type-small: 13px;
}

html,
body,
button,
input,
select,
textarea,
.nav > li > a,
.button,
.accordion-title,
.widget,
.footer-wrapper {
  font-family: var(--font-brand) !important;
}

body {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.7;
  color: #333333;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.banner h1,
.banner h2 {
  font-family: var(--font-brand) !important;
  color: #0D3D26;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

h1 { font-size: clamp(42px, 5vw, 64px); }
h2 { font-size: clamp(34px, 4vw, 46px); }
h3 { font-size: clamp(21px, 2.2vw, 26px); }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

p, li, label, input, select, textarea {
  line-height: 1.7;
}

.nav > li > a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}

small,
.is-small {
  font-size: var(--type-small);
}

@media (max-width: 549px) {
  :root { --type-body: 16px; }
  h1 { font-size: 38px; }
  h2 { font-size: 31px; }
  h3 { font-size: 21px; }
  .nav > li > a { font-size: 15px; }
}

/* Keep legacy page-specific hero rules inside the global type scale. */
.page-wrapper h1,
#main h1 {
  font-size: clamp(42px, 5vw, 64px) !important;
}

@media (max-width: 549px) {
  .page-wrapper h1,
  #main h1 {
    font-size: 38px !important;
  }
}

/* SEO service page */
.page-id-1021 .seo-hero {
  background: radial-gradient(circle at 82% 18%, rgba(240,147,43,.18), transparent 28%), linear-gradient(135deg,#0d3d26 0%,#14512f 58%,#1e7c4f 100%);
  color:#fff; overflow:hidden;
}
.page-id-1021 .seo-hero h1 { color:#fff; font-size:clamp(42px,5vw,68px); line-height:1.06; letter-spacing:-.035em; max-width:760px; margin:12px 0 24px; }
.page-id-1021 .seo-eyebrow,.page-id-1021 .seo-kicker { color:#f0932b; font-size:13px; font-weight:800; letter-spacing:.16em; margin-bottom:12px; }
.page-id-1021 .seo-lead { font-size:19px; line-height:1.7; max-width:720px; color:rgba(255,255,255,.82); }
.page-id-1021 .seo-hero .button { margin-top:14px; }
.page-id-1021 .seo-hero-points { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:24px; font-size:13px; color:rgba(255,255,255,.78); }
.page-id-1021 .seo-dashboard { background:#fff; color:#333; padding:25px; border-radius:18px; box-shadow:0 28px 70px rgba(0,0,0,.26); transform:rotate(1.2deg); }
.page-id-1021 .seo-dash-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e5e5e5; padding-bottom:16px; }
.page-id-1021 .seo-dash-head div { display:flex; flex-direction:column; }
.page-id-1021 .seo-dash-head small,.page-id-1021 .seo-dash-metrics small { font-size:10px; letter-spacing:.1em; color:#777; }
.page-id-1021 .seo-dash-head strong { color:#0d3d26; font-size:20px; }
.page-id-1021 .seo-dash-head>span { background:#f7f5ec; border-radius:20px; padding:7px 11px; font-size:11px; }
.page-id-1021 .seo-dash-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.page-id-1021 .seo-dash-metrics div { background:#f7f5ec; padding:14px; border-radius:10px; display:grid; }
.page-id-1021 .seo-dash-metrics strong { color:#0d3d26; font-size:25px; }.page-id-1021 .seo-dash-metrics i { color:#2e7d32; font-size:10px; font-style:normal; }
.page-id-1021 .seo-chart { height:145px; display:flex; align-items:flex-end; gap:9px; padding:10px 4px 0; border-bottom:1px solid #ddd; }
.page-id-1021 .seo-chart span { flex:1; background:linear-gradient(#f0932b,#ffd09a); border-radius:5px 5px 0 0; }
.page-id-1021 .seo-dashboard>p { font-size:10px; color:#999; margin:9px 0 0; text-align:right; }
.page-id-1021 .seo-value-strip { background:#fff; box-shadow:0 8px 28px rgba(13,61,38,.08); }
.page-id-1021 .seo-value-strip .col { padding-bottom:0; }.page-id-1021 .seo-value-strip .text>div { min-height:122px; display:grid; grid-template-columns:40px 1fr; align-content:center; column-gap:12px; padding:22px 26px; border-right:1px solid #e5e5e5; }
.page-id-1021 .seo-value-strip b { grid-row:1/3; color:#f0932b; font-size:14px; }.page-id-1021 .seo-value-strip strong { color:#0d3d26; font-size:17px; }.page-id-1021 .seo-value-strip span { color:#666; font-size:13px; }
.page-id-1021 .seo-section h2 { color:#0d3d26; font-size:clamp(32px,4vw,48px); line-height:1.16; letter-spacing:-.025em; }
.page-id-1021 .seo-section p { line-height:1.7; }.page-id-1021 .seo-section-lead { max-width:720px; margin:0 auto 28px; }
.page-id-1021 .seo-growth-model { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; }
.page-id-1021 .seo-growth-model div { display:flex; gap:12px; background:#f7f5ec; border:1px solid #e0dcc8; border-radius:12px; padding:18px; }
.page-id-1021 .seo-growth-model b { color:#f0932b; }.page-id-1021 .seo-growth-model span { display:grid; }.page-id-1021 .seo-growth-model strong { color:#0d3d26; }.page-id-1021 .seo-growth-model small { color:#666; line-height:1.5; }.page-id-1021 .seo-growth-model i { align-self:center; color:#f0932b; font-style:normal; }
.page-id-1021 .seo-solution-card { height:100%; background:#fff; border:1px solid #e0dcc8; border-radius:14px; padding:28px; transition:.25s ease; }
.page-id-1021 .seo-solution-card:hover { transform:translateY(-5px); box-shadow:0 16px 36px rgba(13,61,38,.1); border-color:#f0932b; }
.page-id-1021 .seo-solution-card>b { color:#f0932b; font-size:13px; }.page-id-1021 .seo-solution-card h3 { color:#0d3d26; margin:10px 0; }.page-id-1021 .seo-solution-card span { display:block; border-top:1px solid #e5e5e5; padding-top:14px; color:#1e7c4f; font-size:12px; font-weight:700; }
.page-id-1021 .seo-timeline { border-left:2px solid #e0dcc8; padding-left:28px; }.page-id-1021 .seo-timeline>div { display:flex; gap:18px; padding:0 0 25px; }.page-id-1021 .seo-timeline b { background:#f0932b; color:#fff; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; margin-left:-48px; flex:none; }.page-id-1021 .seo-timeline span { display:grid; }.page-id-1021 .seo-timeline strong { color:#0d3d26; font-size:18px; }.page-id-1021 .seo-timeline small { color:#666; line-height:1.55; }
.page-id-1021 .seo-reporting { background:linear-gradient(135deg,#0d3d26,#14512f); color:#fff; }.page-id-1021 .seo-reporting h2 { color:#fff; }.page-id-1021 .seo-reporting p { color:rgba(255,255,255,.78); }.page-id-1021 .seo-kicker-light { color:#ffc06f; }
.page-id-1021 .seo-report-card { background:#fff; color:#333; padding:28px; border-radius:16px; box-shadow:0 25px 55px rgba(0,0,0,.22); }.page-id-1021 .seo-report-top { display:grid; border-bottom:1px solid #e5e5e5; padding-bottom:18px; }.page-id-1021 .seo-report-top span { font-size:11px; color:#f0932b; letter-spacing:.12em; font-weight:800; }.page-id-1021 .seo-report-top b { color:#0d3d26; font-size:22px; }.page-id-1021 .seo-report-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }.page-id-1021 .seo-report-grid div { background:#f7f5ec; border-radius:9px; padding:16px; display:grid; }.page-id-1021 .seo-report-grid strong { color:#0d3d26; }.page-id-1021 .seo-report-grid span { color:#666; font-size:12px; }
.page-id-1021 .seo-anchor { position:absolute; margin-top:-110px; }.page-id-1021 .seo-price-card { height:100%; background:#fff; border:1px solid #e0dcc8; border-radius:16px; padding:30px; position:relative; }.page-id-1021 .seo-price-card>span { color:#f0932b; font-size:12px; font-weight:800; letter-spacing:.13em; }.page-id-1021 .seo-price-card h3 { color:#0d3d26; font-size:27px; }.page-id-1021 .seo-price { margin:22px 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; }.page-id-1021 .seo-price small { width:100%; color:#777; }.page-id-1021 .seo-price strong { color:#0d3d26; font-size:34px; }.page-id-1021 .seo-price em { font-style:normal; color:#777; }.page-id-1021 .seo-price-card ul { margin:20px 0 28px; }.page-id-1021 .seo-price-card li { margin:9px 0; }.page-id-1021 .seo-price-card li::marker { color:#2e7d32; }.page-id-1021 .seo-price-card>a { display:block; text-align:center; border:1px solid #0d3d26; color:#0d3d26; border-radius:8px; padding:12px; font-weight:700; }.page-id-1021 .seo-price-card.is-featured { background:#0d3d26; color:#fff; transform:translateY(-12px); border-color:#0d3d26; }.page-id-1021 .seo-price-card.is-featured h3,.page-id-1021 .seo-price-card.is-featured .seo-price strong { color:#fff; }.page-id-1021 .seo-price-card.is-featured>a { background:#f0932b; border-color:#f0932b; color:#fff; }.page-id-1021 .seo-price-card mark { position:absolute; right:20px; top:-13px; background:#f0932b; color:#fff; padding:6px 10px; border-radius:20px; font-size:9px; font-weight:800; }.page-id-1021 .seo-price-note { text-align:center; background:#fff; border-left:3px solid #f0932b; padding:15px 20px; font-size:12px; margin-top:18px; }
.page-id-1021 .seo-faq .accordion-title { color:#0d3d26; font-weight:700; font-size:16px; border-top-color:#e5e5e5; }.page-id-1021 .seo-faq .accordion-inner { color:#555; }
.page-id-1021 .seo-final { background:radial-gradient(circle at 10% 10%,rgba(240,147,43,.18),transparent 30%),linear-gradient(135deg,#0d3d26,#14512f); }.page-id-1021 .seo-final h2 { color:#fff; }.page-id-1021 .seo-final p { color:rgba(255,255,255,.8); }.page-id-1021 .seo-contact-links { display:grid; gap:8px; }.page-id-1021 .seo-contact-links a { color:#fff; font-weight:700; }.page-id-1021 .seo-form-card { background:#fff; padding:32px; border-radius:16px; }.page-id-1021 .seo-form-card h3 { color:#0d3d26; font-size:27px; }.page-id-1021 .seo-form-card p { color:#666; }.page-id-1021 .seo-form-card input,.page-id-1021 .seo-form-card textarea { border:1px solid #e0dcc8; border-radius:7px; box-shadow:none; }.page-id-1021 .seo-form-card input[type=submit] { background:#f0932b; border-color:#f0932b; color:#fff; }
@media(max-width:849px){.page-id-1021 .seo-dashboard{margin-top:30px;transform:none}.page-id-1021 .seo-value-strip .text>div{border-right:0;border-bottom:1px solid #e5e5e5;min-height:96px}.page-id-1021 .seo-growth-model{grid-template-columns:1fr}.page-id-1021 .seo-growth-model i{display:none}.page-id-1021 .seo-price-card.is-featured{transform:none}.page-id-1021 .seo-report-card{margin-bottom:28px}}
@media(max-width:549px){.page-id-1021 .seo-hero h1{font-size:39px}.page-id-1021 .seo-lead{font-size:16px}.page-id-1021 .seo-dash-metrics,.page-id-1021 .seo-report-grid{grid-template-columns:1fr}.page-id-1021 .seo-section h2{font-size:31px}.page-id-1021 .seo-form-card{padding:22px}}

/* Shared service suite: consulting, care, content and paid media */
.svc-hero,.contact-hero{background:radial-gradient(circle at 84% 16%,rgba(240,147,43,.2),transparent 27%),linear-gradient(135deg,#0d3d26,#14512f 60%,#1e7c4f);color:#fff;overflow:hidden}.svc-hero h1,.contact-hero h1{color:#fff;font-size:clamp(42px,5vw,66px);line-height:1.06;letter-spacing:-.035em;max-width:830px;margin:12px 0 24px}.svc-kicker{color:#f0932b;font-size:12px;font-weight:800;letter-spacing:.16em;margin-bottom:12px}.svc-lead{font-size:19px;line-height:1.7;color:rgba(255,255,255,.82);max-width:760px}.svc-hero .button{margin-top:14px}.svc-trust{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:25px}.svc-trust span{font-size:12px;font-weight:700;color:rgba(255,255,255,.82)}.svc-trust span:before{content:'✓';color:#f0932b;margin-right:7px}.svc-visual{background:#fff;color:#333;border-radius:18px;padding:30px;box-shadow:0 28px 65px rgba(0,0,0,.25);position:relative}.svc-visual:before{content:'';position:absolute;inset:10px;border:1px solid #e0dcc8;border-radius:12px;pointer-events:none}.svc-visual small{color:#f0932b;font-weight:800;letter-spacing:.13em}.svc-visual h2{color:#0d3d26;font-size:30px;position:relative}.svc-visual>div{display:grid;gap:10px;margin:24px 0;position:relative}.svc-visual span{background:#f7f5ec;border-left:3px solid #1e7c4f;border-radius:6px;padding:13px 15px;font-weight:700;color:#0d3d26}.svc-visual p{font-size:10px;color:#999;text-align:right;margin:0}.svc-about h2,.svc-solutions h2,.svc-process h2,.svc-faq h2,.contact-main h2,.contact-steps h2{color:#0d3d26;font-size:clamp(31px,4vw,47px);line-height:1.16;letter-spacing:-.025em}.svc-copy{border-left:3px solid #f0932b;padding-left:28px}.svc-copy p{font-size:17px;line-height:1.72}.svc-center{max-width:720px;margin:0 auto 30px;line-height:1.7}.svc-card{height:100%;background:#fff;border:1px solid #e0dcc8;border-radius:14px;padding:27px;transition:.25s}.svc-card:hover{transform:translateY(-5px);border-color:#f0932b;box-shadow:0 15px 35px rgba(13,61,38,.1)}.svc-card>b{color:#f0932b;font-size:12px}.svc-card h3{color:#0d3d26;font-size:22px;margin:9px 0}.svc-card p{color:#555;line-height:1.65}.svc-steps{border-left:2px solid #e0dcc8;padding-left:29px}.svc-steps>div{display:flex;gap:18px;padding-bottom:25px}.svc-steps b{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#f0932b;color:#fff;margin-left:-49px;flex:none}.svc-steps span{display:grid}.svc-steps strong{color:#0d3d26;font-size:18px}.svc-steps small{color:#666;line-height:1.55}.svc-commit{background:linear-gradient(135deg,#0d3d26,#14512f);color:#fff}.svc-commit h2{color:#fff;font-size:clamp(31px,4vw,46px)}.svc-commit p{color:rgba(255,255,255,.78);font-size:17px;line-height:1.7}.svc-kicker-light{color:#ffc06f}.svc-checks{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:24px 24px 24px 44px}.svc-checks li{color:#fff;margin:11px 0}.svc-checks li::marker{color:#f0932b}.svc-faq .accordion-title{color:#0d3d26;font-weight:700;font-size:16px}.svc-faq .accordion-inner{color:#555;line-height:1.7}.svc-final{background:radial-gradient(circle at 12% 12%,rgba(240,147,43,.18),transparent 30%),linear-gradient(135deg,#0d3d26,#14512f)}.svc-final h2{color:#fff;font-size:clamp(31px,4vw,47px)}.svc-final p{color:rgba(255,255,255,.8);line-height:1.7}.svc-links{display:grid;gap:8px}.svc-links a{color:#fff;font-weight:700}.svc-form{background:#fff;border-radius:16px;padding:32px;box-shadow:0 20px 50px rgba(0,0,0,.18)}.svc-form h3,.svc-form h2{color:#0d3d26;font-size:28px}.svc-form p{color:#666}.svc-form input,.svc-form textarea{border:1px solid #e0dcc8;border-radius:7px;box-shadow:none}.svc-form input[type=submit]{background:#f0932b;border-color:#f0932b;color:#fff}.svc-anchor{position:absolute;margin-top:-110px}.contact-hero{padding-bottom:120px!important}.contact-main{margin-top:-72px}.contact-main>.section-content>.row{background:#fff;border-radius:18px;padding:30px;box-shadow:0 20px 55px rgba(13,61,38,.12)}.contact-cards{display:grid;gap:12px}.contact-cards>a,.contact-cards>div{display:grid;background:#f7f5ec;border:1px solid #e0dcc8;padding:18px;border-radius:10px}.contact-cards small{color:#f0932b;font-size:10px;font-weight:800;letter-spacing:.12em}.contact-cards strong{color:#0d3d26;font-size:18px}.contact-cards span{color:#666;font-size:12px}.contact-steps article{height:100%;background:#fff;border:1px solid #e0dcc8;border-radius:13px;padding:25px}.contact-steps article b{color:#f0932b}.contact-steps article h3{color:#0d3d26}.contact-steps article p{color:#666}
@media(max-width:849px){.svc-visual{margin-top:30px}.svc-copy{margin-top:18px}.contact-main>.section-content>.row{padding:14px}.contact-main{margin-top:-45px}}
@media(max-width:549px){.svc-hero h1,.contact-hero h1{font-size:38px}.svc-lead{font-size:16px}.svc-form{padding:22px}.svc-about h2,.svc-solutions h2,.svc-process h2,.svc-faq h2,.contact-main h2,.contact-steps h2{font-size:31px}}

/* About Daklak Agency */
.about-hero{background:radial-gradient(circle at 82% 18%,rgba(240,147,43,.2),transparent 28%),linear-gradient(135deg,#0d3d26,#14512f 60%,#1e7c4f);color:#fff;overflow:hidden}.about-hero h1{color:#fff;font-size:clamp(44px,5vw,66px);line-height:1.06;letter-spacing:-.035em;max-width:830px}.about-hero .button{margin-top:14px}.about-mark{background:#fff;color:#333;border-radius:18px;padding:34px;box-shadow:0 28px 65px rgba(0,0,0,.25);position:relative;overflow:hidden}.about-mark:after{content:'';position:absolute;width:150px;height:150px;border:30px solid rgba(30,124,79,.08);border-radius:50%;right:-50px;top:-50px}.about-mark small{color:#f0932b;font-weight:800;letter-spacing:.15em}.about-mark>strong{display:block;color:#0d3d26;font-size:96px;line-height:1;margin-top:18px}.about-mark h2{color:#0d3d26;font-size:29px;margin:0}.about-mark p{color:#666;line-height:1.65}.about-mark>div{display:flex;gap:7px;flex-wrap:wrap}.about-mark span{font-size:11px;color:#0d3d26;background:#f7f5ec;border-radius:20px;padding:7px 10px;font-weight:700}.about-story h2,.about-values h2,.about-capabilities h2,.about-local h2{color:#0d3d26;font-size:clamp(32px,4vw,47px);line-height:1.16;letter-spacing:-.025em}.about-story-copy{border-left:3px solid #f0932b;padding-left:30px}.about-story-copy p{font-size:17px;line-height:1.75}.about-mission{background:linear-gradient(135deg,#0d3d26 0 50%,#f7f5ec 50% 100%)}.about-purpose{height:100%;padding:25px 35px}.about-purpose>span{display:block;font-size:56px;font-weight:800;color:rgba(255,255,255,.1)}.about-purpose h2{color:#fff;font-size:clamp(30px,3.5vw,43px)}.about-purpose p{color:rgba(255,255,255,.78);line-height:1.7}.about-purpose.is-vision>span{color:rgba(13,61,38,.09)}.about-purpose.is-vision h2{color:#0d3d26}.about-purpose.is-vision p{color:#555}.about-center{max-width:700px;margin:0 auto 30px;line-height:1.7}.about-value{height:100%;background:#fff;border:1px solid #e0dcc8;border-radius:14px;padding:26px}.about-value b{color:#f0932b}.about-value h3{color:#0d3d26;margin:10px 0}.about-value p{color:#666;line-height:1.6}.about-service-map{display:grid;grid-template-columns:1fr 1fr;gap:12px}.about-service-map a{display:flex;gap:14px;background:#f7f5ec;border:1px solid #e0dcc8;border-radius:12px;padding:20px;transition:.2s}.about-service-map a:hover{background:#fff;border-color:#f0932b;transform:translateY(-3px)}.about-service-map b{color:#f0932b}.about-service-map span{display:grid}.about-service-map strong{color:#0d3d26}.about-service-map small{color:#666;line-height:1.5}.about-method{background:linear-gradient(135deg,#0d3d26,#14512f);color:#fff}.about-method h2{color:#fff;font-size:clamp(32px,4vw,47px)}.about-method-step{height:100%;border-top:2px solid rgba(255,255,255,.25);padding:22px 10px}.about-method-step b{display:block;color:#f0932b;margin-bottom:15px}.about-method-step strong{display:block;color:#fff;font-size:20px}.about-method-step span{color:rgba(255,255,255,.68);font-size:13px}.about-local-visual{min-height:360px;background:radial-gradient(circle at 65% 40%,rgba(240,147,43,.3),transparent 22%),linear-gradient(145deg,#1e7c4f,#0d3d26);border-radius:18px;padding:42px;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.about-local-visual small{color:#ffc06f;font-weight:800;letter-spacing:.14em}.about-local-visual strong{font-size:37px;line-height:1.25;margin:15px 0;position:relative;z-index:1}.about-local-visual div{display:flex;gap:10px}.about-local-visual i{width:12px;height:12px;border-radius:50%;background:#f0932b}.about-local p{line-height:1.75}.page-id-956 .svc-final h2{color:#fff}
@media(max-width:849px){.about-mark{margin-top:30px}.about-mission{background:linear-gradient(180deg,#0d3d26 0 50%,#f7f5ec 50% 100%)}.about-purpose{padding:25px 10px}.about-service-map{grid-template-columns:1fr}.about-local-visual{margin-bottom:25px}}
@media(max-width:549px){.about-hero h1{font-size:38px}.about-story h2,.about-values h2,.about-capabilities h2,.about-local h2{font-size:31px}.about-mark>strong{font-size:76px}.about-local-visual{min-height:300px;padding:28px}.about-local-visual strong{font-size:29px}}

body {
  color: var(--color-text-body);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {
  color: var(--color-text-heading);
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: var(--color-link);
  transition: color var(--transition-ui);
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
}

hr,
.divider {
  border-color: var(--color-divider);
}

/* Flatsome primary actions */
.button.primary,
.button.checkout,
button[type="submit"],
input[type="submit"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-text-on-dark);
  transition: background-color var(--transition-ui),
    border-color var(--transition-ui),
    transform var(--transition-ui),
    box-shadow var(--transition-ui);
}

.button.primary:hover,
.button.primary:focus-visible,
.button.checkout:hover,
.button.checkout:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-on-dark);
  box-shadow: 0 8px 20px rgb(240 147 43 / 28%);
  transform: translateY(-1px);
}

/* Add class `button-secondary` to secondary Flatsome buttons. */
.button.button-secondary {
  background: transparent;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  color: var(--color-secondary);
}

.button.button-secondary:hover,
.button.button-secondary:focus-visible {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-on-dark);
}

/* Reusable UX Builder classes. */
.brand-section-gradient {
  background: var(--gradient-brand);
  color: var(--color-text-on-dark);
}

.brand-section-gradient h1,
.brand-section-gradient h2,
.brand-section-gradient h3,
.brand-section-gradient h4,
.brand-section-gradient h5,
.brand-section-gradient h6 {
  color: var(--color-text-on-dark);
}

.brand-card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  padding: clamp(24px, 3vw, 36px);
  transition: border-color var(--transition-ui),
    box-shadow var(--transition-ui),
    transform var(--transition-ui);
}

.brand-card:hover {
  border-color: rgb(13 61 38 / 24%);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.brand-card-dark {
  background: var(--color-secondary);
  border: 0;
  color: var(--color-text-on-dark);
}

.brand-card-dark h1,
.brand-card-dark h2,
.brand-card-dark h3,
.brand-card-dark h4,
.brand-card-dark h5,
.brand-card-dark h6,
.text-on-dark {
  color: var(--color-text-on-dark);
}

.text-measure {
  max-width: var(--content-measure);
}

/* Homepage v2 */
.da-section-heading {
  margin-bottom: 42px;
}

.da-section-heading h2,
.da-why h2,
.da-final-cta h2 {
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}

.da-section-heading p:not(.da-eyebrow),
.da-why-copy p:not(.da-eyebrow),
.da-cta-copy p:not(.da-eyebrow) {
  font-size: 18px;
  max-width: 720px;
}

.da-heading-center {
  justify-content: center;
}

.da-eyebrow {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
}

.da-eyebrow-dark {
  color: var(--color-link);
}

.da-hero {
  overflow: hidden;
  position: relative;
}

.da-hero::before,
.da-hero::after {
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  content: "";
  position: absolute;
}

.da-hero::before {
  height: 540px;
  right: -190px;
  top: -250px;
  width: 540px;
}

.da-hero::after {
  bottom: -350px;
  height: 620px;
  left: -260px;
  width: 620px;
}

.da-hero-row {
  min-height: 720px;
  padding-bottom: 88px;
  padding-top: 88px;
  position: relative;
  z-index: 1;
}

.da-hero-copy h1 {
  color: #fff;
  font-size: clamp(48px, 5.5vw, 76px);
  letter-spacing: -0.055em;
  line-height: 1.02;
  margin-bottom: 26px;
  max-width: 790px;
}

.da-hero-copy h1 span {
  color: var(--color-primary);
}

.da-hero-lead {
  color: rgb(255 255 255 / 82%);
  font-size: 19px;
  line-height: 1.65;
  max-width: 680px;
}

.da-hero .button {
  margin-top: 16px;
}

.da-hero .button-secondary-on-dark {
  border-color: rgb(255 255 255 / 75%);
  color: #fff;
}

.da-hero .button-secondary-on-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--color-secondary);
}

.da-hero-note {
  color: rgb(255 255 255 / 62%);
  font-size: 13px;
  margin: 14px 0 0;
}

.da-growth-board {
  backdrop-filter: blur(12px);
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--radius-lg);
  box-shadow: 0 34px 80px rgb(0 0 0 / 24%);
  color: #fff;
  padding: 28px;
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
}

.da-board-top,
.da-board-score {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.da-board-top {
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  font-weight: 700;
  padding-bottom: 20px;
}

.da-board-top b {
  background: rgb(240 147 43 / 18%);
  border-radius: 99px;
  color: #ffc47f;
  font-size: 11px;
  padding: 7px 10px;
}

.da-board-score {
  padding: 24px 0 12px;
}

.da-board-score span,
.da-board-grid span {
  color: rgb(255 255 255 / 62%);
  font-size: 12px;
}

.da-board-score strong {
  color: #fff;
  font-size: 36px;
}

.da-chart {
  align-items: end;
  display: flex;
  gap: 9px;
  height: 130px;
  padding: 14px 0 24px;
}

.da-chart i {
  background: linear-gradient(180deg, var(--color-primary), #ffc47f);
  border-radius: 5px 5px 2px 2px;
  display: block;
  flex: 1;
}

.da-chart i:nth-child(1) { height: 28%; }
.da-chart i:nth-child(2) { height: 42%; }
.da-chart i:nth-child(3) { height: 36%; }
.da-chart i:nth-child(4) { height: 61%; }
.da-chart i:nth-child(5) { height: 54%; }
.da-chart i:nth-child(6) { height: 78%; }
.da-chart i:nth-child(7) { height: 94%; }

.da-board-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.da-board-grid div {
  background: rgb(255 255 255 / 8%);
  border-radius: 10px;
  padding: 13px;
}

.da-board-grid b,
.da-board-grid span {
  display: block;
}

.da-board-grid b {
  font-size: 13px;
  margin-top: 3px;
}

.da-proof-strip {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  box-shadow: 0 14px 40px rgb(13 61 38 / 6%);
}

.da-proof-row {
  padding: 24px 0;
}

.da-proof-item {
  border-right: 1px solid var(--color-divider);
  text-align: center;
}

.da-proof-item:last-child {
  border-right: 0;
}

.da-proof-item strong,
.da-proof-item span {
  display: block;
}

.da-proof-item strong {
  color: var(--color-secondary);
  font-size: 30px;
  line-height: 1;
}

.da-proof-item span {
  color: #6c6c6c;
  font-size: 12px;
  margin-top: 7px;
}

.da-problem-item > .col-inner,
.da-service-card > .col-inner,
.da-quote-card > .col-inner {
  height: 100%;
}

.da-problem-item > .col-inner {
  border-top: 1px solid var(--color-divider);
  padding: 26px 8px 8px 0;
}

.da-card-number {
  color: var(--color-primary);
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 26px;
}

.da-problem-item h3 {
  font-size: 21px;
  margin-bottom: 10px;
}

.da-problem-item p,
.da-service-card p {
  color: #666;
  font-size: 15px;
}

.da-services-grid > .col {
  padding-bottom: 24px;
}

.da-service-card > .col-inner {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  padding: 30px;
  transition: box-shadow var(--transition-ui), transform var(--transition-ui);
}

.da-service-card > .col-inner:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

.da-service-featured > .col-inner {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.da-service-featured h3,
.da-service-featured .da-text-link {
  color: #fff;
}

.da-service-featured p {
  color: rgb(255 255 255 / 70%);
}

.da-service-icon {
  align-items: center;
  background: rgb(240 147 43 / 14%);
  border-radius: 10px;
  color: var(--color-primary);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 44px;
  justify-content: center;
  margin-bottom: 28px;
  width: 44px;
}

.da-service-card h3 {
  font-size: 23px;
}

.da-text-link {
  color: var(--color-secondary);
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  margin-top: 12px;
}

.da-why {
  overflow: hidden;
}

.da-why-copy {
  padding-right: 6%;
}

.da-benefit {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  gap: 22px;
  padding: 22px 0;
}

.da-benefit:first-child {
  padding-top: 0;
}

.da-benefit:last-child {
  border-bottom: 0;
}

.da-benefit > b {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: 50%;
  color: var(--color-primary);
  display: flex;
  flex: 0 0 46px;
  height: 46px;
  justify-content: center;
}

.da-benefit h3 {
  font-size: 20px;
  margin: 0 0 5px;
}

.da-benefit p {
  color: #666;
  margin: 0;
}

.da-case-image {
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgb(0 0 0 / 22%);
  overflow: hidden;
  padding: 10px;
}

.da-case-image img {
  border-radius: calc(var(--radius-lg) - 7px);
  display: block;
  height: 410px;
  object-fit: cover;
  width: 100%;
}

.da-case-copy {
  padding-left: 5%;
}

.da-case-copy h2 {
  color: #fff;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: -0.035em;
}

.da-case-copy p,
.da-check-list {
  color: rgb(255 255 255 / 76%);
}

.da-check-list {
  list-style: none;
  margin: 26px 0;
}

.da-check-list li {
  margin-bottom: 10px;
  padding-left: 28px;
  position: relative;
}

.da-check-list li::before {
  color: var(--color-primary);
  content: "✓";
  font-weight: 700;
  left: 0;
  position: absolute;
}

.da-process-row {
  position: relative;
}

.da-process-row::before {
  background: var(--color-divider);
  content: "";
  height: 1px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 28px;
}

.da-process-step {
  text-align: center;
}

.da-process-step b {
  align-items: center;
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  height: 56px;
  justify-content: center;
  margin-bottom: 22px;
  position: relative;
  width: 56px;
  z-index: 1;
}

.da-process-step h3 {
  font-size: 18px;
  margin-bottom: 7px;
}

.da-process-step p {
  color: #777;
  font-size: 13px;
}

.da-quote-card > .col-inner {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  padding: 30px;
}

.da-quote-featured > .col-inner {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

.da-quote-featured strong,
.da-quote-featured p {
  color: #fff;
}

.da-quote-featured small {
  color: rgb(255 255 255 / 68%);
}

.da-quote-mark {
  color: var(--color-primary);
  display: block;
  font-family: Georgia, serif;
  font-size: 64px;
  height: 44px;
  line-height: 1;
}

.da-quote-card p {
  min-height: 112px;
}

.da-quote-card strong,
.da-quote-card small {
  display: block;
}

.da-quote-card small {
  color: #777;
  margin-top: 3px;
}

.da-final-cta {
  background: #fff;
}

.da-cta-copy {
  padding-right: 5%;
}

.da-contact-points {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 26px;
}

.da-contact-points a {
  color: var(--color-secondary);
  font-weight: 700;
}

.da-form-card > .col-inner {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 52px);
}

.da-form-card h3 {
  font-size: 30px;
  margin-bottom: 8px;
}

.da-form-card input:not([type="submit"]),
.da-form-card textarea,
.da-form-card select {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.da-form-card input:focus,
.da-form-card textarea:focus,
.da-form-card select:focus {
  border-color: var(--color-primary);
}

.da-form-grid {
  display: grid;
  gap: 0 14px;
  grid-template-columns: 1fr 1fr;
}

.da-form-card .wpcf7-spinner {
  display: block;
  margin: 10px 0 0;
}

.da-form-card input[type="submit"] {
  margin-bottom: 0;
  width: 100%;
}

/* Web design service page */
.wd-section h2 {
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.035em;
}

.wd-hero {
  overflow: hidden;
}

.wd-hero-row {
  min-height: 690px;
  padding-bottom: 88px;
  padding-top: 88px;
}

.wd-hero-copy h1 {
  color: #fff;
  font-size: clamp(48px, 5.3vw, 74px);
  letter-spacing: -0.055em;
  line-height: 1.02;
  margin-bottom: 26px;
}

.wd-hero-copy h1 span {
  color: var(--color-primary);
}

.wd-hero-lead {
  color: rgb(255 255 255 / 82%);
  font-size: 19px;
  line-height: 1.65;
  max-width: 680px;
}

.wd-hero .button {
  margin-top: 16px;
}

.wd-hero .button-secondary-on-dark {
  border-color: rgb(255 255 255 / 74%);
  color: #fff;
}

.wd-device-stage {
  min-height: 470px;
  position: relative;
}

.wd-browser {
  background: #fff;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 16px;
  box-shadow: 0 36px 80px rgb(0 0 0 / 25%);
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 18px;
  transform: perspective(1000px) rotateY(-5deg);
  width: 92%;
}

.wd-browser-bar {
  align-items: center;
  background: #eef1ef;
  display: flex;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
}

.wd-browser-bar i {
  background: #c9cfcb;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.wd-browser-bar i:first-child { background: #f0932b; }

.wd-browser-bar span {
  background: #fff;
  border-radius: 4px;
  color: #8a8a8a;
  font-size: 9px;
  margin-left: 8px;
  padding: 4px 12px;
}

.wd-browser-body {
  background: linear-gradient(145deg, #f7f5ec 0%, #fff 60%);
  min-height: 360px;
  padding: 50px 36px 28px;
}

.wd-browser-body > b,
.wd-phone b {
  background: var(--color-primary);
  border-radius: 10px;
  display: block;
  height: 8px;
  margin-bottom: 24px;
  width: 56px;
}

.wd-browser-body h3 {
  font-size: 29px;
  line-height: 1.15;
  max-width: 320px;
}

.wd-browser-body > p,
.wd-phone p {
  background: #dfe5e1;
  border-radius: 9px;
  height: 7px;
  width: 72%;
}

.wd-browser-body > em,
.wd-phone em {
  background: var(--color-secondary);
  border-radius: 6px;
  display: block;
  height: 30px;
  margin-top: 22px;
  width: 116px;
}

.wd-mini-cards {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 42px;
}

.wd-mini-cards i {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: 8px;
  height: 72px;
}

.wd-phone {
  background: #101b15;
  border: 4px solid #25362d;
  border-radius: 24px;
  bottom: 0;
  box-shadow: 0 25px 50px rgb(0 0 0 / 30%);
  padding: 7px;
  position: absolute;
  right: -12px;
  width: 145px;
}

.wd-phone > div {
  background: #fff;
  border-radius: 15px;
  min-height: 260px;
  padding: 30px 15px;
}

.wd-phone h4 {
  font-size: 17px;
  margin-bottom: 18px;
}

.wd-phone p {
  height: 5px;
  width: 100%;
}

.wd-phone p:nth-of-type(2) { width: 68%; }

.wd-phone em {
  height: 24px;
  width: 82px;
}

.wd-benefit-strip {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
}

.wd-benefit-strip .row {
  padding-bottom: 22px;
  padding-top: 22px;
}

.wd-benefit-item {
  border-right: 1px solid var(--color-divider);
  text-align: center;
}

.wd-benefit-item:last-child { border-right: 0; }

.wd-benefit-item b {
  color: var(--color-primary);
  font-size: 12px;
  margin-right: 8px;
}

.wd-benefit-item span {
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 700;
}

.wd-pain-grid > .col,
.wd-types-grid > .col {
  padding-bottom: 24px;
}

.wd-pain-card > .col-inner,
.wd-type-card > .col-inner,
.wd-package-card > .col-inner {
  height: 100%;
}

.wd-pain-card > .col-inner {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 28px;
}

.wd-pain-card span {
  color: var(--color-primary);
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 32px;
}

.wd-pain-card h3 {
  font-size: 21px;
}

.wd-pain-card p,
.wd-type-card p {
  color: #696969;
  font-size: 15px;
}

.wd-pain-solution > .col-inner {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.wd-pain-solution h3,
.wd-pain-solution p {
  color: #fff;
}

.wd-type-card > .col-inner {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  padding: 30px;
  transition: box-shadow var(--transition-ui), transform var(--transition-ui);
}

.wd-type-card > .col-inner:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

.wd-type-card b {
  align-items: center;
  background: rgb(240 147 43 / 14%);
  border-radius: 10px;
  color: var(--color-primary);
  display: flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 28px;
  width: 44px;
}

.wd-type-card h3 {
  font-size: 23px;
}

.wd-type-card a {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 700;
}

.wd-type-featured > .col-inner {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.wd-type-featured h3,
.wd-type-featured a {
  color: #fff;
}

.wd-type-featured p { color: rgb(255 255 255 / 70%); }

.wd-standard-copy {
  padding-right: 5%;
}

.wd-standard-grid .text-inner {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.wd-standard-card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  padding: 24px;
}

.wd-standard-card span,
.wd-package-card span {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wd-standard-card h3 {
  font-size: 20px;
  margin: 9px 0 7px;
}

.wd-standard-card p {
  color: #6f6f6f;
  font-size: 14px;
  margin: 0;
}

.wd-process h2,
.wd-process .da-section-heading p:not(.da-eyebrow) {
  color: #fff;
}

.wd-process .da-section-heading p:not(.da-eyebrow) {
  opacity: 0.76;
}

.wd-process-grid > .col {
  padding-bottom: 24px;
}

.wd-process-step > .col-inner {
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: var(--radius-md);
  height: 100%;
  padding: 24px;
}

.wd-process-step b {
  color: var(--color-primary);
  display: block;
  font-size: 13px;
  margin-bottom: 28px;
}

.wd-process-step h3,
.wd-process-step p,
.wd-process-step a {
  color: #fff;
}

.wd-process-step h3 { font-size: 20px; }
.wd-process-step p { font-size: 14px; opacity: 0.68; }
.wd-process-step a { font-size: 14px; font-weight: 700; }

.wd-process-cta > .col-inner {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.wd-process-cta b { color: #fff; }

.wd-portfolio-frame {
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 60px rgb(13 61 38 / 15%);
  overflow: hidden;
}

.wd-frame-bar {
  align-items: center;
  background: #eef1ef;
  display: flex;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
}

.wd-frame-bar i {
  background: #c4cbc6;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.wd-frame-bar i:first-child { background: var(--color-primary); }

.wd-frame-bar span {
  color: #888;
  font-size: 10px;
  margin-left: 8px;
}

.wd-portfolio-frame img {
  display: block;
  height: 430px;
  object-fit: cover;
  width: 100%;
}

.wd-portfolio-copy {
  padding-left: 5%;
}

.wd-check-list {
  color: var(--color-text-body);
}

.wd-package-card > .col-inner {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  padding: 32px;
}

.wd-package-card h3 {
  font-size: 30px;
  margin: 12px 0 8px;
}

.wd-price {
  align-items: baseline;
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.wd-price small {
  color: #777;
  font-size: 13px;
}

.wd-price strong {
  color: var(--color-secondary);
  font-size: 36px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.wd-price em {
  color: #777;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.wd-package-card ul {
  border-top: 1px solid var(--color-divider);
  list-style: none;
  margin: 22px 0 4px;
  padding-top: 20px;
}

.wd-package-card li {
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
}

.wd-package-card li::before {
  color: var(--color-success);
  content: "✓";
  font-weight: 700;
  left: 0;
  position: absolute;
}

.wd-package-card .button {
  align-items: center;
  background: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  box-shadow: none;
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
  min-height: 48px;
  padding: 0 20px;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.wd-package-card .button span {
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: 1 !important;
}

.wd-package-card .button:hover {
  background: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  transform: translateY(-2px);
}

.wd-package-featured .button:hover {
  background: #fff !important;
  border-color: #fff !important;
}

.wd-package-featured .button:hover span {
  color: var(--color-secondary) !important;
}

.wd-package-featured > .col-inner {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
  transform: translateY(-10px);
}

.wd-package-featured h3,
.wd-package-featured p,
.wd-package-featured li,
.wd-package-featured .wd-price strong {
  color: #fff;
}

.wd-package-featured .wd-price small,
.wd-package-featured .wd-price em {
  color: rgb(255 255 255 / 65%);
}

.wd-package-featured ul {
  border-color: rgb(255 255 255 / 16%);
}

.wd-price-note {
  margin-top: 18px;
}

.wd-price-note p {
  color: #6d6d6d;
  font-size: 13px;
  margin: 0 auto;
  max-width: 900px;
}

.wd-aftercare-list {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.wd-aftercare-list div {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  padding: 16px;
}

.wd-aftercare-list b { color: var(--color-primary); }
.wd-aftercare-list span { color: var(--color-secondary); font-weight: 700; }

.wd-faq-heading {
  padding-right: 6%;
}

.wd-faq-list details {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 0 20px;
}

.wd-faq-list summary {
  color: var(--color-secondary);
  cursor: pointer;
  font-weight: 700;
  padding: 18px 0;
}

.wd-faq-list details p {
  border-top: 1px solid var(--color-divider);
  color: #666;
  padding-top: 16px;
}

.wd-final-cta {
  position: relative;
  scroll-margin-top: 90px;
}

.wd-anchor {
  left: 0;
  position: absolute;
  scroll-margin-top: 90px;
  top: 0;
}

.wd-final-copy h2,
.wd-final-copy p,
.wd-form-card h3 {
  color: #fff;
}

.wd-final-copy {
  padding-right: 5%;
}

.wd-contact-links {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
}

.wd-contact-links a {
  color: #fff;
  font-weight: 700;
}

.wd-form-card > .col-inner {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 48px);
}

.wd-form-card h3 {
  color: var(--color-secondary);
  font-size: 30px;
  margin-bottom: 8px;
}

.wd-form-card p {
  color: #666;
}

.wd-form-card input:not([type="submit"]),
.wd-form-card textarea,
.wd-form-card select {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.wd-form-card input[type="submit"] {
  margin-bottom: 0;
  width: 100%;
}

/* Customers & projects page */
.cs-section h2 {
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.035em;
}

.cs-hero {
  overflow: hidden;
}

.cs-hero-row {
  min-height: 650px;
  padding-bottom: 84px;
  padding-top: 84px;
}

.cs-hero-copy h1 {
  color: #fff;
  font-size: clamp(48px, 5.3vw, 74px);
  letter-spacing: -0.055em;
  line-height: 1.02;
  margin-bottom: 26px;
}

.cs-hero-copy h1 span {
  color: var(--color-primary);
}

.cs-hero-lead {
  color: rgb(255 255 255 / 80%);
  font-size: 19px;
  line-height: 1.65;
  max-width: 680px;
}

.cs-hero .button {
  margin-top: 16px;
}

.cs-hero .button-secondary-on-dark {
  border-color: rgb(255 255 255 / 74%);
  color: #fff;
}

.cs-orbit {
  height: 430px;
  margin: auto;
  position: relative;
  width: 430px;
}

.cs-orbit::before,
.cs-orbit::after {
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  content: "";
  inset: 32px;
  position: absolute;
}

.cs-orbit::after {
  inset: 100px;
}

.cs-orbit-core {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 26px 60px rgb(0 0 0 / 24%);
  display: flex;
  flex-direction: column;
  height: 150px;
  justify-content: center;
  left: 140px;
  position: absolute;
  top: 140px;
  width: 150px;
  z-index: 2;
}

.cs-orbit-core b {
  color: var(--color-primary);
  font-size: 40px;
  line-height: 1;
}

.cs-orbit-core span {
  color: var(--color-secondary);
  font-size: 11px;
  font-weight: 700;
  margin-top: 7px;
}

.cs-node {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  height: 70px;
  justify-content: center;
  position: absolute;
  width: 70px;
}

.cs-node-1 { left: 34px; top: 84px; }
.cs-node-2 { right: 24px; top: 70px; }
.cs-node-3 { bottom: 40px; left: 72px; }
.cs-node-4 { bottom: 35px; right: 52px; }

.cs-proof {
  border-bottom: 1px solid var(--color-divider);
  background: #fff;
}

.cs-proof .row {
  padding-bottom: 24px;
  padding-top: 24px;
}

.cs-proof-item {
  border-right: 1px solid var(--color-divider);
  text-align: center;
}

.cs-proof-item:last-child { border-right: 0; }

.cs-proof-item strong,
.cs-proof-item span {
  display: block;
}

.cs-proof-item strong {
  color: var(--color-secondary);
  font-size: 29px;
  line-height: 1;
}

.cs-proof-item span {
  color: #777;
  font-size: 12px;
  margin-top: 7px;
}

.cs-featured {
  position: relative;
  scroll-margin-top: 90px;
}

.cs-anchor {
  left: 0;
  position: absolute;
  scroll-margin-top: 90px;
  top: 0;
}

.cs-case-browser {
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 64px rgb(13 61 38 / 15%);
  overflow: hidden;
}

.cs-browser-bar {
  align-items: center;
  background: #eef1ef;
  display: flex;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
}

.cs-browser-bar i {
  background: #c4cbc6;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.cs-browser-bar i:first-child { background: var(--color-primary); }

.cs-browser-bar span {
  color: #888;
  font-size: 10px;
  margin-left: 8px;
}

.cs-case-browser img {
  display: block;
  height: 470px;
  object-fit: cover;
  width: 100%;
}

.cs-case-copy {
  padding-left: 5%;
}

.cs-case-label {
  color: var(--color-primary);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.cs-case-copy h2 {
  margin-bottom: 14px;
}

.cs-case-detail {
  border-top: 1px solid var(--color-divider);
  display: grid;
  gap: 14px;
  grid-template-columns: 76px 1fr;
  padding: 15px 0;
}

.cs-case-detail b {
  color: var(--color-secondary);
}

.cs-case-detail span {
  color: #666;
  font-size: 14px;
}

.cs-client-grid > .col {
  padding-bottom: 20px;
}

.cs-client-card > .col-inner {
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  display: flex;
  gap: 18px;
  height: 100%;
  padding: 22px;
  transition: box-shadow var(--transition-ui), transform var(--transition-ui);
}

.cs-client-card > .col-inner:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.cs-client-card .text-inner {
  align-items: center;
  display: flex;
  gap: 18px;
}

.cs-client-card .text-inner > b {
  align-items: center;
  background: var(--color-secondary);
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex: 0 0 52px;
  height: 52px;
  justify-content: center;
}

.cs-client-card h3 {
  font-size: 18px;
  margin: 0 0 3px;
}

.cs-client-card p {
  color: #777;
  font-size: 12px;
  margin: 0;
}

.cs-industries-copy {
  padding-right: 6%;
}

.cs-industry-list .text-inner {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.cs-industry-list .text-inner > div {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  padding: 16px;
}

.cs-industry-list span {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
}

.cs-industry-list b {
  color: var(--color-secondary);
  font-size: 14px;
}

.cs-method h2,
.cs-method .da-section-heading p:not(.da-eyebrow) {
  color: #fff;
}

.cs-method .da-section-heading p:not(.da-eyebrow) {
  opacity: 0.72;
}

.cs-method-step > .col-inner {
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: var(--radius-md);
  height: 100%;
  padding: 26px;
}

.cs-method-step b {
  color: var(--color-primary);
  display: block;
  margin-bottom: 32px;
}

.cs-method-step h3,
.cs-method-step p {
  color: #fff;
}

.cs-method-step h3 { font-size: 21px; }
.cs-method-step p { font-size: 14px; opacity: 0.7; }

.cs-voice-card > .col-inner {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  height: 100%;
  padding: 30px;
}

.cs-voice-card span {
  color: var(--color-primary);
  display: block;
  font-family: Georgia, serif;
  font-size: 62px;
  height: 42px;
  line-height: 1;
}

.cs-voice-card p {
  min-height: 112px;
}

.cs-voice-card strong,
.cs-voice-card small {
  display: block;
}

.cs-voice-card small {
  color: #777;
  margin-top: 3px;
}

.cs-voice-featured > .col-inner {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.cs-voice-featured p,
.cs-voice-featured strong {
  color: #fff;
}

.cs-voice-featured small { color: rgb(255 255 255 / 65%); }

.cs-final-copy {
  padding-right: 5%;
}

.cs-final-panel .text-inner {
  display: grid;
  gap: 12px;
}

.cs-final-panel .text-inner > div {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  padding: 18px 20px;
}

.cs-final-panel span {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
}

.cs-final-panel b {
  color: var(--color-secondary);
  display: block;
  font-size: 18px;
  margin: 4px 0;
}

.cs-final-panel p {
  color: #777;
  font-size: 13px;
  margin: 0;
}

/* Website concept catalog */
.cat-section h2 {
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.035em;
}

.cat-hero {
  overflow: hidden;
}

.cat-hero-row {
  min-height: 640px;
  padding-bottom: 82px;
  padding-top: 82px;
}

.cat-hero-copy h1 {
  color: #fff;
  font-size: clamp(48px, 5.3vw, 74px);
  letter-spacing: -0.055em;
  line-height: 1.02;
  margin-bottom: 26px;
}

.cat-hero-copy h1 span { color: var(--color-primary); }

.cat-hero-lead {
  color: rgb(255 255 255 / 80%);
  font-size: 19px;
  line-height: 1.65;
  max-width: 680px;
}

.cat-hero .button { margin-top: 16px; }
.cat-hero .button-secondary-on-dark { border-color: rgb(255 255 255 / 74%); color: #fff; }

.cat-stack {
  height: 440px;
  position: relative;
}

.cat-stack-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 28px 65px rgb(0 0 0 / 24%);
  height: 270px;
  padding: 28px;
  position: absolute;
  width: 330px;
}

.cat-stack-card span {
  background: var(--color-primary);
  border-radius: 10px;
  display: block;
  height: 7px;
  width: 46px;
}

.cat-stack-card h3 {
  font-size: 27px;
  margin: 35px 0 28px;
}

.cat-stack-card i {
  background: #e4e9e6;
  border-radius: 8px;
  display: inline-block;
  height: 72px;
  margin-right: 7px;
  width: 28%;
}

.cat-stack-a { left: 6px; top: 94px; transform: rotate(-9deg); }
.cat-stack-b { right: 8px; top: 26px; transform: rotate(8deg); }
.cat-stack-c { left: 80px; top: 78px; z-index: 2; }
.cat-stack-b { background: #edf3ef; }
.cat-stack-c { background: var(--color-surface); }

.cat-intro {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
}

.cat-intro .row { padding-bottom: 24px; padding-top: 24px; }

.cat-intro-item {
  border-right: 1px solid var(--color-divider);
}

.cat-intro-item:last-child { border-right: 0; }

.cat-intro-item .text-inner {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: center;
}

.cat-intro-item b { color: var(--color-primary); font-size: 12px; }
.cat-intro-item strong,
.cat-intro-item span { display: block; }
.cat-intro-item strong { color: var(--color-secondary); font-size: 14px; }
.cat-intro-item span { color: #777; font-size: 11px; }

.cat-library,
.cat-final {
  position: relative;
  scroll-margin-top: 90px;
}

.cat-anchor {
  left: 0;
  position: absolute;
  scroll-margin-top: 90px;
  top: 0;
}

.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: -12px 0 40px;
}

.cat-filter button {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: 99px;
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 17px;
  transition: all var(--transition-ui);
}

.cat-filter button:hover,
.cat-filter button.is-active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

.cat-template {
  padding-bottom: 34px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.cat-template.is-filtered-out {
  display: none;
}

.cat-template > .col-inner {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  height: 100%;
  overflow: hidden;
  transition: box-shadow var(--transition-ui), transform var(--transition-ui);
}

.cat-template > .col-inner:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

.cat-preview {
  background: #e8ece9;
  padding: 18px 18px 0;
}

.cat-preview-bar {
  align-items: center;
  background: #f0f2f1;
  border-radius: 9px 9px 0 0;
  display: flex;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
}

.cat-preview-bar i {
  background: #bfc7c2;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.cat-preview-bar i:first-child { background: var(--color-primary); }

.cat-preview-bar span {
  color: #8a8a8a;
  font-size: 8px;
  margin-left: 7px;
}

.cat-screen {
  background: #fff;
  min-height: 330px;
  overflow: hidden;
}

.cat-screen nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 18px 24px;
}

.cat-screen nav b {
  color: var(--cat-dark, #0d3d26);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.cat-screen nav em {
  border-bottom: 2px solid var(--cat-accent, #f0932b);
  border-top: 2px solid var(--cat-dark, #0d3d26);
  height: 9px;
  width: 18px;
}

.cat-screen section {
  align-items: flex-start;
  background: var(--cat-bg, #f7f5ec);
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 40px 30px;
  position: relative;
}

.cat-screen section::after {
  background: var(--cat-art, linear-gradient(135deg, #d9e7dd, #94b8a3));
  border-radius: 50% 0 0 50%;
  bottom: -30px;
  content: "";
  position: absolute;
  right: -20px;
  top: 18px;
  width: 42%;
}

.cat-screen small {
  color: var(--cat-accent, #f0932b);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cat-screen h3 {
  color: var(--cat-dark, #0d3d26);
  font-size: 25px;
  line-height: 1.12;
  margin: 10px 0;
  max-width: 56%;
  position: relative;
  z-index: 1;
}

.cat-screen section p {
  background: color-mix(in srgb, var(--cat-dark, #0d3d26) 18%, transparent);
  border-radius: 8px;
  height: 6px;
  width: 36%;
}

.cat-screen section button {
  background: var(--cat-accent, #f0932b);
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  margin-top: 8px;
  padding: 8px 12px;
}

.cat-screen footer {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  padding: 16px 24px;
}

.cat-screen footer i {
  background: #edf0ee;
  border-radius: 5px;
  height: 36px;
}

.theme-coffee { --cat-bg:#f1e7d4; --cat-dark:#3d2818; --cat-accent:#a65d2d; --cat-art:linear-gradient(135deg,#866447,#3f2b1c); }
.theme-travel { --cat-bg:#e7f2ed; --cat-dark:#153f39; --cat-accent:#e28b46; --cat-art:linear-gradient(135deg,#9ccbc0,#35796b); }
.theme-build { --cat-bg:#edf0f2; --cat-dark:#172832; --cat-accent:#d88931; --cat-art:linear-gradient(135deg,#bac4ca,#566b77); }
.theme-spa { --cat-bg:#f7eeee; --cat-dark:#513b3d; --cat-accent:#bf7779; --cat-art:linear-gradient(135deg,#edcfd1,#bb8f93); }
.theme-edu { --cat-bg:#edf3ff; --cat-dark:#18365e; --cat-accent:#ef8d32; --cat-art:linear-gradient(135deg,#adc8ed,#4d78ad); }
.theme-estate { --cat-bg:#f0eee8; --cat-dark:#252a2d; --cat-accent:#aa7b3d; --cat-art:linear-gradient(135deg,#ccc3ae,#676052); }
.theme-food { --cat-bg:#fff0dc; --cat-dark:#593224; --cat-accent:#d76536; --cat-art:linear-gradient(135deg,#e9b47c,#a55131); }
.theme-fashion { --cat-bg:#f2f2f2; --cat-dark:#181818; --cat-accent:#181818; --cat-art:linear-gradient(135deg,#d4d4d4,#747474); }

.cat-template-meta {
  padding: 24px 26px 28px;
}

.cat-template-meta > span {
  color: var(--color-primary);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}

.cat-template-meta h3 {
  font-size: 23px;
  margin-bottom: 8px;
}

.cat-template-meta p {
  color: #707070;
  font-size: 14px;
}

.cat-template-meta a {
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 700;
}

.cat-guide-copy {
  padding-right: 6%;
}

.cat-guide-list .text-inner {
  display: grid;
  gap: 12px;
}

.cat-guide-list .text-inner > div {
  align-items: center;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  gap: 18px;
  padding: 14px 0;
}

.cat-guide-list b {
  color: var(--color-primary);
  font-size: 12px;
}

.cat-guide-list strong,
.cat-guide-list small {
  display: block;
}

.cat-guide-list strong { color: var(--color-secondary); font-size: 17px; }
.cat-guide-list small { color: #777; margin-top: 3px; }

.cat-included h2,
.cat-included .da-section-heading p:not(.da-eyebrow) {
  color: #fff;
}

.cat-included .da-section-heading p:not(.da-eyebrow) { opacity: 0.72; }

.cat-included-item > .col-inner {
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: var(--radius-md);
  height: 100%;
  padding: 24px;
}

.cat-included-item b { color: var(--color-primary); display: block; margin-bottom: 26px; }
.cat-included-item h3,
.cat-included-item p { color: #fff; }
.cat-included-item h3 { font-size: 19px; }
.cat-included-item p { font-size: 13px; opacity: 0.68; }

.cat-final-copy {
  padding-right: 5%;
}

.cat-form-card > .col-inner {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 48px);
}

.cat-form-card h3 {
  font-size: 30px;
  margin-bottom: 8px;
}

.cat-form-card input:not([type="submit"]),
.cat-form-card textarea,
.cat-form-card select {
  background: #fff;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.cat-form-card input[type="submit"] {
  margin-bottom: 0;
  width: 100%;
}

:focus-visible {
  outline: 3px solid rgb(240 147 43 / 45%);
  outline-offset: 3px;
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
  :root {
    --radius-md: 12px;
    --radius-lg: 16px;
  }

  .da-section-heading {
    margin-bottom: 28px;
  }

  .da-hero-row {
    min-height: auto;
    padding-bottom: 64px;
    padding-top: 64px;
  }

  .da-hero-copy h1 {
    font-size: 44px;
  }

  .da-hero-lead {
    font-size: 17px;
  }

  .da-hero .button {
    display: block;
    margin-right: 0;
    width: 100%;
  }

  .da-hero-visual {
    margin-top: 34px;
  }

  .da-growth-board {
    padding: 20px;
    transform: none;
  }

  .da-proof-item:nth-child(2) {
    border-right: 0;
  }

  .da-proof-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: 18px;
  }

  .da-proof-item:nth-child(n+3) {
    padding-top: 18px;
  }

  .da-problem-grid > .col,
  .da-services-grid > .col,
  .da-testimonials .row > .col {
    padding-bottom: 18px;
  }

  .da-why-copy,
  .da-case-copy,
  .da-cta-copy {
    padding-left: 15px;
    padding-right: 15px;
  }

  .da-why-list,
  .da-case-copy,
  .da-form-card {
    margin-top: 34px;
  }

  .da-case-image img {
    height: 260px;
  }

  .da-process-row::before {
    display: none;
  }

  .da-process-step {
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: 22px;
    text-align: left;
  }

  .da-process-step b {
    height: 46px;
    margin-bottom: 14px;
    width: 46px;
  }

  .da-quote-card p {
    min-height: 0;
  }

  .da-form-grid {
    grid-template-columns: 1fr;
  }

  .wd-hero-row {
    min-height: auto;
    padding-bottom: 64px;
    padding-top: 64px;
  }

  .wd-hero-copy h1 {
    font-size: 43px;
  }

  .wd-hero-lead {
    font-size: 17px;
  }

  .wd-hero .button {
    display: block;
    margin-right: 0;
    width: 100%;
  }

  .wd-device-visual {
    margin-top: 32px;
  }

  .wd-device-stage {
    min-height: 350px;
  }

  .wd-browser {
    transform: none;
    width: 95%;
  }

  .wd-browser-body {
    min-height: 285px;
    padding: 32px 22px 20px;
  }

  .wd-browser-body h3 {
    font-size: 22px;
  }

  .wd-phone {
    right: 0;
    width: 112px;
  }

  .wd-phone > div {
    min-height: 205px;
    padding: 24px 11px;
  }

  .wd-benefit-item:nth-child(2) {
    border-right: 0;
  }

  .wd-benefit-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: 14px;
  }

  .wd-benefit-item:nth-child(n+3) {
    padding-top: 14px;
  }

  .wd-standard-copy,
  .wd-portfolio-copy,
  .wd-final-copy,
  .wd-faq-heading {
    padding-left: 15px;
    padding-right: 15px;
  }

  .wd-standard-grid,
  .wd-portfolio-copy,
  .wd-faq-list,
  .wd-form-card {
    margin-top: 32px;
  }

  .wd-standard-grid .text-inner,
  .wd-aftercare-list {
    grid-template-columns: 1fr;
  }

  .wd-portfolio-frame img {
    height: 260px;
  }

  .wd-package-card {
    padding-bottom: 20px;
  }

  .wd-package-featured > .col-inner {
    transform: none;
  }

  .cs-hero-row {
    min-height: auto;
    padding-bottom: 64px;
    padding-top: 64px;
  }

  .cs-hero-copy h1 {
    font-size: 43px;
  }

  .cs-hero-lead {
    font-size: 17px;
  }

  .cs-hero .button {
    display: block;
    margin-right: 0;
    width: 100%;
  }

  .cs-hero-art {
    margin-top: 24px;
  }

  .cs-orbit {
    height: 330px;
    transform: scale(0.82);
    transform-origin: center top;
    width: 330px;
  }

  .cs-orbit-core {
    height: 124px;
    left: 103px;
    top: 103px;
    width: 124px;
  }

  .cs-orbit::before { inset: 20px; }
  .cs-orbit::after { inset: 76px; }
  .cs-node-1 { left: 10px; top: 66px; }
  .cs-node-2 { right: 4px; top: 55px; }
  .cs-node-3 { bottom: 26px; left: 42px; }
  .cs-node-4 { bottom: 22px; right: 34px; }

  .cs-proof-item {
    border-bottom: 1px solid var(--color-divider);
    border-right: 0;
    padding-bottom: 16px;
    padding-top: 16px;
  }

  .cs-proof-item:last-child { border-bottom: 0; }

  .cs-case-browser img {
    height: 270px;
  }

  .cs-case-copy,
  .cs-industries-copy,
  .cs-final-copy {
    margin-top: 32px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .cs-client-card h3 {
    font-size: 15px;
  }

  .cs-client-card .text-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .cs-industry-list {
    margin-top: 28px;
  }

  .cs-industry-list .text-inner {
    grid-template-columns: 1fr;
  }

  .cs-method-grid > .col,
  .cs-voices .row > .col {
    padding-bottom: 18px;
  }

  .cs-voice-card p {
    min-height: 0;
  }

  .cs-final-panel {
    margin-top: 32px;
  }

  .cat-hero-row {
    min-height: auto;
    padding-bottom: 64px;
    padding-top: 64px;
  }

  .cat-hero-copy h1 { font-size: 43px; }
  .cat-hero-lead { font-size: 17px; }

  .cat-hero .button {
    display: block;
    margin-right: 0;
    width: 100%;
  }

  .cat-hero-stack { margin-top: 28px; }
  .cat-stack { height: 340px; transform: scale(.78); transform-origin: left top; width: 430px; }

  .cat-intro-item {
    border-bottom: 1px solid var(--color-divider);
    border-right: 0;
    padding-bottom: 14px;
    padding-top: 14px;
  }

  .cat-intro-item:last-child { border-bottom: 0; }

  .cat-filter {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .cat-filter button { flex: 0 0 auto; }

  .cat-preview { padding: 10px 10px 0; }
  .cat-screen { min-height: 280px; }
  .cat-screen section { min-height: 180px; padding: 28px 20px; }
  .cat-screen h3 { font-size: 20px; }

  .cat-guide-copy,
  .cat-final-copy {
    padding-left: 15px;
    padding-right: 15px;
  }

  .cat-guide-list,
  .cat-form-card { margin-top: 30px; }

  .cat-included .row > .col { padding-bottom: 16px; }

}