/* =========================
   Base / Theme
========================= */
:root {
	--bg: #071a2a;
	--bg2: #092034;
	--ink: #0b1320;
	--text: #1f2a37;
	--muted: #5b6b7c;
	--card: #ffffff;
	--line: #e5edf6;
	--brand: #ff6a1a;
	--brand2: green;
	--blue: #2b6ff7;
	--shadow: 0 10px 30px rgba(8, 26, 43, .12);
	--shadow2: 0 14px 40px rgba(8, 26, 43, .18);
	--radius: 18px;
	--radius2: 24px;
	--max: 1140px;
	--cta:#f06a2a;
	--ctaHover:#e85d1d;
	--white: white;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--text);
	background: #fff;
	line-height: 1.55;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

p {
	margin: 0 0 12px;
}

h1, h2, h3 {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -.02em;
  color: #032629;
}

h1 {
	font-size: clamp(2.2rem, 3.6vw, 3.2rem);
	color: #fff;
}

h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  text-align: center;
  margin-bottom: 10px;
}

h3 {
	font-size: 1.2rem;
}

ul {
	margin: 0;
	padding-left: 1.1rem;
}

.container {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 18px;
}

.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================
   Buttons
========================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border: 1px solid transparent;
	padding: 12px 18px;
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
	user-select: none;
	white-space: nowrap;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	background: var(--brand);
	color: #fff;
	box-shadow: 0 10px 22px rgba(255, 106, 26, .25);
}

.btn-primary:hover {
	filter: brightness(.98);
	box-shadow: 0 12px 26px rgba(255, 106, 26, .28);
}

.btn-sm {
	padding: 10px 14px;
	font-size: .92rem;
}

.btn-block {
	width: 100%;
}

/* =========================
   Header / Nav
========================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: white;
	border-bottom: 1px solid rgb(240 239 239);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 800;
}

.brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: radial-gradient(circle at 30% 30%, #2b6ff7, #1fbf8f 45%, #ff6a1a);
	box-shadow: 0 10px 18px rgba(0, 0, 0, .25);
}

.brand-name {
	letter-spacing: -.02em;
}

.nav {
	display: flex;
	align-items: center;
	gap: 18px;
  color: #032629;
	font-weight: 600;
}

.nav a {
	opacity: 1;
}

.nav a:hover {
	opacity: 1.1;
}

.nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .18);
	width: 44px;
	height: 44px;
	border-radius: 12px;
	color: #fff;
	cursor: pointer;
}

.bars {
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
	position: relative;
	margin: 0 auto;
}

.bars::before, .bars::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #fff;
}

.bars::before {
	top: -6px;
}

.bars::after {
	top: 6px;
}

/* =========================
   Hero
========================= */
.hero {
	position: relative;
	padding: 52px 0 0px;
	background: #0a3f36;
	overflow: hidden;
    /*min-height: calc(100vh - 65px);*/
}

.hero-bg {
	position: absolute;
	inset: -220px -120px -220px -120px;
	background: radial-gradient(circle at 15% 20%, rgba(43, 111, 247, .28), transparent 55%),
	radial-gradient(circle at 85% 35%, rgba(31, 191, 143, .22), transparent 55%),
	radial-gradient(circle at 70% 75%, rgba(255, 106, 26, .18), transparent 55%),
	linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
	mask-image: radial-gradient(circle at 40% 50%, rgba(0, 0, 0, 1), rgba(0, 0, 0, .2));
}

.hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 28px;
	align-items: start;
  padding: 20px 0 40px;
}

.hero-copy {
	color: rgba(255, 255, 255, .9);
	padding-top: 10px;
}

.eyebrow {
	display: inline-block;
	color: rgba(255, 255, 255, .82);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .78rem;
	margin-bottom: 8px;
}

.lead {
	color: rgba(255, 255, 255, .82);
	font-size: 1.05rem;
	max-width: 58ch;
  margin-top: 10px;
}

.checklist {
	list-style: none;
	padding: 0;
	margin: 18px 0 18px;
	display: grid;
	gap: 10px;
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: rgba(255, 255, 255, .88);
}

.checklist svg {
	width: 20px;
	height: 20px;
	color: var(--brand2);
	flex: 0 0 auto;
	margin-top: 2px;
}

.award-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.award {
	display: flex;
	gap: 10px;
	align-items: center;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	padding: 10px 12px;
	border-radius: 16px;
}

.award-badge {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: rgba(255, 255, 255, .08);
}

.award-title {
	font-weight: 800;
	color: #fff;
	font-size: .92rem;
}

.award-sub {
	color: rgba(255, 255, 255, .7);
	font-size: .82rem;
}

.hero-card-wrap {
	position: relative;
}

.hero-card {
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius2);
	box-shadow: var(--shadow2);
	overflow: hidden;
	position: sticky;
	top: 84px;
	background: #fff7f5;
	padding: 20px 5px;
}

.hero-card-top {
	padding: 18px 18px 12px;
	color: #eafff7;
}

.rating {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: .9rem;
	color: var(--brand2);
}

.dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--brand2);
	box-shadow: 0 0 0 6px rgba(31, 191, 143, .18);
}

.hero-card h2 {
	margin-top: 10px;
	font-size: 1.8rem;
  color: #032629;
}

.hero-card p {
  color: #032629;
}

.form {
	padding: 14px 18px 18px;
	background: rgba(255, 255, 255, .06);
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.form button {
  margin-top: 20px;
}
.field {
	display: grid;
	gap: 6px;
	margin-bottom: 10px;
}

label {
	font-size: .86rem;
  color: #032629;
	font-weight: 600;
}

input, select, textarea {
	width: 100%;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .22);
	padding: 12px 12px;
	background: rgba(7, 26, 42, .35);
  color: #032629;
  background: white;
}

select option {
	color: #111;
}

textarea {
	resize: vertical;
}

input::placeholder {
	color: #06272980;
}

.fineprint {
	margin-top: 10px;
	font-size: .78rem;
  color: #032629;
}

/* =========================
   Callout Section
========================= */


.wrap{
	width: min(860px, 100%);
	text-align:center;
}

/* ===== CTA CARD ===== */
.callout{
	position: relative;
	margin: 8px auto 46px;
	padding: 34px 28px 30px;
	border-radius: 34px;
	background: white;
	box-shadow: 0 18px 55px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .10);
	border: 4px solid rgb(229 229 229);
	max-width: 760px;
	overflow: hidden;
	color: var(--text);
}

/* subtle “broken” top border look */
.callout:before{
	content:"";
	position:absolute;
	left: 50%;
	top: -4px;
	transform: translateX(-50%);
	width: 72px;
	height: 8px;
	background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.00));
	box-shadow: 0 0 0 12px rgba(0,0,0,.10);
	border-radius: 999px;
	background: rgba(0,0,0,.0);
}

/* inner vertical lines near edges */
.callout .edge{
	position:absolute;
	top: 56px;
	bottom: 60px;
	width: 4px;
	border-radius: 999px;
	background: rgba(121,208,111,.55);
	filter: drop-shadow(0 0 10px rgba(121,208,111,.25));
	opacity:.55;
}
.callout .edge.left{ left: 20px; }
.callout .edge.right{ right: 20px; }

/* speech-bubble point */
.callout:after{
	content:"";
	position:absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 22px solid rgba(121,208,111,.55);
	filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.callout .point-fill{
	position:absolute;
	left:50%;
	bottom:-13px;
	transform:translateX(-50%);
	width:0;height:0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 18px solid rgba(0,0,0,.06);
	z-index:1;
}
.callout .btn-primary{
	width: 100%;
	max-width: 430px;
	text-align: center;
	display: block;
	margin: 20px auto 0;
	font-size: 20px;
	padding: 0;
}

.callout .btn-primary a{
	display: block;
	width: 100%;
	padding: 12px 18px;
}

.callout-inner{
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns: 92px 1fr;
	gap: 18px;
	align-items:start;
	text-align:left;
}

.callout .avatar{
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: #fff;
	display:grid;
	place-items:center;
	overflow:hidden;
	box-shadow: 0 12px 30px rgba(0,0,0,.25);
	border: 6px solid rgba(255,255,255,.95);
}
.callout .avatar span{
	color:#1b2b3a;
	font-weight:800;
	font-size: 22px;
	letter-spacing:.02em;
}

.callout h1{
	margin:0;
	font-size: 26px;
	line-height: 1.15;
	color: var(--text);
	font-weight: 800;
}

.callout .sub-link{
	margin-top: 14px;
	color: var(--text);
	text-align: center;
	display: block;
	font-size: 14px;
	text-decoration: underline;
}
.callout .sub-link a{
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 4px;
	font-weight: 700;
}

.callout .check-desc {
	font-size: 12px;
}

.callout .facts{
	margin-top: 18px;
	display:flex;
	justify-content:center;
	align-items:center;
	gap: 16px;
	flex-wrap:wrap;
	color: var(--text);
	font-size: 20px;
	font-weight: 700;
}
.callout .facts .item{
	display:flex;
	align-items:center;
	gap: 10px;
}
.callout .facts .divider{
	width: 2px;
	height: 20px;
	background: rgb(233 233 233 / 84%);
	border-radius: 999px;
}
.callout .check{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba(121, 208, 111, .8);
	display: grid;
	place-items: center;
	color: rgba(121, 208, 111, .95);
	box-shadow: 0 0 0 6px rgba(121, 208, 111, .12);
	flex: 0 0 auto;
}
.callout .check svg {
	width: 8px;
	height: 8px;
}

/* ===== LOWER TEXT ===== */
.callout .title{
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	margin: 15px 0 8px;
	color: var(--text);
}
.callout .desc{
	margin: 0 auto;
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.4;
	color: var(--text);
	text-align: center;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 640px){
	.callout{ padding: 28px 18px 26px; }
	.callout-inner{ grid-template-columns: 1fr; text-align:center; }
	.avatar{ margin: 0 auto; }
	.facts{ font-size: 18px; }
	.sub-link{ font-size: 18px; }
	.facts .divider{ display:none; }
	.callout .edge{ display:none; }
}



/* =========================
   Logo strip
========================= */

.logo-strip {
	background: #fff7f4;
    padding: 56px 15px;
}

.strip-title {
	text-align: center;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 12px;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.logo-pill {
	/*border: 1px solid var(--line);*/
	/*background: #fff;*/
	/*padding: 10px 14px;*/
	/*border-radius: 999px;*/
	/*color: #364152;*/
	/*font-weight: 700;*/
	/*font-size: .92rem;*/
	/*box-shadow: 0 6px 18px rgba(0, 0, 0, .04);*/
}
.logo-pill img {
  width: 120px;
}
/* =========================
   Sections
========================= */
.section {
	padding: 56px 0;
}

.section-muted {
	background: #f7fbff;
	border-top: 1px solid #eef5ff;
	border-bottom: 1px solid #eef5ff;
}

.section-head {
	margin-bottom: 26px;
}

.section-head p {
  text-align: center;
}

.section-head.center {
	text-align: center;
}

.section-head.white {
	color: #fff;
}

.section-head.white p {
	color: rgba(255, 255, 255, .75);
	margin: 8px auto 0;
}

.section-head.center p {
	margin-left: auto;
	margin-right: auto;
}

/* =========================
   Services
========================= */
.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.service-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow);
}

.service-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: rgba(31, 191, 143, .10);
	color: #0a664f;
}

.icon svg {
	width: 22px;
	height: 22px;
}

.service-list {
	margin: 0;
	padding-left: 30px;
	color: #3b4a5b;
}
.service-list ::marker{
  content: "✅ ";
}
.service-list li {
	margin: 6px 0;
}

/* =========================
   CTA Band
========================= */
.cta-band {
	background: #061b2d;
	color: #fff;
	padding: 22px 0;
}

.cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.cta-band h3 {
  color: white;
  font-size: 25px;
}
.cta-inner p {
	margin: 4px 0 0;
	color: white;
}

/* =========================
   Quality
========================= */
.quality-icons {
	display: flex;
	gap: 24px;
	justify-content: center;
	margin: 22px 0 26px;
}

.qicon {
	text-align: center;
}

.qcircle {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
	margin: 0 auto 10px;
	color: #0a664f;
}

.qcircle svg {
	width: 28px;
	height: 28px;
}

.qtitle {
	font-weight: 800;
}

.quality-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.quality-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: var(--shadow);
}

.quality-card p {
	color: var(--muted);
}

.meter {
	margin-top: 14px;
}

.meter-label {
	font-weight: 700;
	font-size: .86rem;
	color: #2e3a49;
	display: block;
	margin-bottom: 8px;
}

.meter-bar {
	height: 10px;
	border-radius: 999px;
	background: #e9f4ff;
	overflow: hidden;
	border: 1px solid #dcecff;
}

.meter-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--brand), #ffa778);
}

/* =========================
   Stack table
========================= */
.stack-table {
	border: 1px solid var(--line);
	/*border-radius: var(--radius2);*/
	overflow: hidden;
	box-shadow: var(--shadow);
	background: #fff;
}

.stack-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	border-top: 1px solid var(--line);
}

.stack-row:first-child {
	border-top: 0;
}

.stack-label {
	padding: 16px;
	font-weight: 800;
	color: #fff;
	display: flex;
	align-items: center;
	text-transform: uppercase;
}

.label-blue {
	background: #fff7f5;
	color: #061b2d;
	border-right: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.label-green {
	background: linear-gradient(135deg, var(--brand), #ff6a1ac2);
}

.stack-items {
	padding: 14px 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.tag {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: 8px 12px;
	background: #f3f8ff;
	border: 1px solid #e3efff;
	border-radius: 999px;
	font-weight: 700;
	color: #274056;
	font-size: .9rem;
}


/* =========================================================
      PRICING UI EXTENSIONS (added)
    ========================================================= */

/* Make pricing page wider than the CTA example */

.pricing{
	margin:0;
	color:#fff;
	/*min-height:100vh;*/
	display:flex;
	justify-content:center;
	position: relative;
	padding: 64px 0 70px;
	background: linear-gradient(135deg, #0a3f36, #051c1d);
}

.pricing .wrap{
	width:min(860px, 100%);
	text-align:center;
}

.pricing .btn{
	margin-top: 22px;
	width: 100%;
	padding: 18px 16px;
	border:0;
	border-radius: 10px;
	background: var(--cta);
	color:#fff;
	font-weight: 900;
	letter-spacing:.04em;
	font-size: 22px;
	cursor:pointer;
	box-shadow: 0 16px 30px rgba(240,106,42,.28);
	transition: transform .12s ease, background .12s ease, filter .12s ease;
}
.pricing .btn:hover{ background: var(--cta); }
.pricing .btn:active{ transform: translateY(1px); }

.pricing .pricing-wrap{
	width: min(1120px, 100%);
	text-align:left;
}

/* Dark navy feel like the screenshot (still using your base code) */
.pricing .pricing-body{
	display: flex;
	justify-content: center;
}

.pricing .pricing-hero{
	padding: 10px 0 22px;
	text-align:center;
}
.pricing .pricing-hero h1{
	margin:0;
	font-size: clamp(32px, 3.8vw, 56px);
	font-weight: 900;
	letter-spacing:-.02em;
	color: var(--white);
}
.pricing .pricing-hero p{
	margin: 10px auto 0;
	max-width: 66ch;
	color: white;
	font-size: 16px;
	line-height: 1.6;
}

.pricing .pricing-layout{
	display:grid;
	grid-template-columns: 320px 1fr;
	gap: 22px;
	align-items:start;
	margin-top: 18px;
}

/* Left menu */
.pricing .side{
	background: rgba(255,255,255,.02);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 18px;
	padding: 16px;
	box-shadow: 0 18px 50px rgba(0,0,0,.22);
	position: sticky;
	top: 100px;
	height: fit-content;
}

.pricing .side h4{
	margin: 14px 0 8px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: white;
}
.pricing .menu{
	display:grid;
	gap: 8px;
}
.pricing .menu button{
	width:100%;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.04);
	color: rgba(255,255,255,.86);
	padding: 10px 12px;
	border-radius: 12px;
	text-align:left;
	font-weight: 800;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:10px;
	transition: transform .12s ease, background .12s ease, border-color .12s ease;
	font-size: 14px;
}
.pricing .menu button:hover{
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.16);
}
.pricing .menu button.active{
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.pricing .dot{
	width: 10px; height: 10px; border-radius: 99px;
	background: rgba(255,255,255,.35);
	flex:0 0 auto;
}
.pricing .menu button.active .dot{ background: rgba(255,255,255,.85); }

.pricing .side .mini{
	margin-top: 12px;
	color: rgba(255,255,255,.72);
	font-size: 13px;
	line-height: 1.5;
}

/* Main card */
.pricing .card{
	background:#fff;
	color: var(--text);
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,.18);
	box-shadow: 0 26px 70px rgba(0,0,0,.22);
	overflow:hidden;
}

.pricing .card-head{
	padding: 18px 18px 14px;
	border-bottom: 1px solid #e9eef6;
}
.pricing .card-head h2{
	margin:0;
	font-size: 30px;
	font-weight: 900;
	color: var(--text);
	letter-spacing:-.01em;
}
.pricing .card-head p{
	color: var(--text);
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
	max-width: 500px;
	margin: 8px auto 0;
	width: 100%;
}

.pricing .card-container {
	width: 700px;
} 

.pricing .billing{
	margin-top: 12px;
	background: #f3f6fb;
	border: 1px solid #e7edf7;
	border-radius: 12px;
	padding: 4px;
	display:flex;
	gap:4px;
	width: 100%;
}
.pricing .billing button{
	border:0;
	background: transparent;
	padding: 8px 12px;
	border-radius: 10px;
	font-weight: 900;
	cursor:pointer;
	color:#334155;
	font-size: 16px;
	min-width: 110px;
	width: 33%;
}
.pricing .billing button.active{
	background:#fff;
	box-shadow: 0 10px 18px rgba(0,0,0,.08);
	color:#0c1b2a;
}

.pricing .price-row{
	padding: 14px 18px 18px;
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap: 10px 12px;
}
.pricing .price{
	font-size: 34px;
	font-weight: 800;
	letter-spacing:-.02em;
}
.pricing .per{
	font-size: 13px;
	font-weight: 900;
	color:#334155;
}
.pricing .billnote{
	width:100%;
	margin-top: -6px;
	font-size: 12px;
	color:#64748b;
	font-weight: 800;
}

.pricing .select-wrap{
	padding: 0 18px 16px;
}
.pricing .select-btn{
	margin-top: 0;
	background: var(--brand);
	box-shadow: 0 16px 30px rgba(126,90,255,.22);
	font-size: 16px;
	border-radius: 999px;
	padding: 12px 14px;
}

.pricing .card-body{
	padding: 0 18px 18px;
	display:grid;
	gap: 18px;
}

.pricing .section-title{
	font-size: 12px;
	letter-spacing:.14em;
	text-transform: uppercase;
	color:#7a8aa0;
	font-weight: 800;
	margin-bottom: 10px;
}

.pricing .list{
	display:grid;
	gap: 12px;
}
.pricing .item{
	display:grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	align-items:start;
}
.pricing .checkmark{
	width: 18px; height: 18px;
	border-radius: 99px;
	background: rgba(31,191,143,.15);
	display:grid;
	place-items:center;
	color:#0b8b6b;
	margin-top: 2px;
}
.pricing .item b{ display:block; font-size: 16px; }
.pricing .item span{ display:block; font-size: 14px; color:#6b7c90; margin-top: 2px; }

.pricing .people{
	display:grid;
	gap: 12px;
}
.pricing .person{
	display:grid;
	grid-template-columns: 34px 1fr;
	gap: 10px;
	align-items:center;
}
.pricing .pimg{
	width: 34px; height: 34px; border-radius: 999px;
	background: linear-gradient(135deg, rgba(43,111,247,.20), rgba(31,191,143,.22));
	display:grid;
	place-items:center;
	font-weight: 800;
	color:#16324f;
}
.pricing .pmeta b{ font-size: 16px; }
.pricing .pmeta span{ font-size: 14px; color:#6b7c90; display:block; margin-top:2px; }

.pricing .comms{
	display:grid;
	gap: 10px;
}
.pricing .comm{
	display:grid;
	grid-template-columns: 36px 1fr;
	gap: 10px;
	align-items:center;
}
.pricing .cicon{
	width: 36px; height: 36px; border-radius: 12px;
	background: #f3f6fb;
	border: 1px solid #e7edf7;
	display:grid; place-items:center;
	color:#425466;
	font-weight: 800;
}
.pricing .pimg {
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}
.pricing .cicon{
	background-size: 65%;
	padding: 5px;
	background-position: center;
	background-repeat: no-repeat;
}

.pricing .pimg.CWD {
	background-image: url("../../media/sites/25/2024/11/FUHZ56S.jpg");
}

.pricing .pimg.WF {
	background-image: url("../../media/sites/25/2024/11/GTMFlex--team-member-1.jpg");
}

.pricing .pimg.PM {
	background-image: url("../../media/sites/25/2024/11/9RWCKCU.jpg");
}

.pricing .pimg.UX {
	background-image: url("../../media/sites/25/2024/11/DQVDC5F.jpg");
}

.pricing .pimg.CW {
	background-image: url("../../media/sites/25/2024/11/GTMFlex--team-member-2.jpg");
}

.pricing .pimg.QA {
	background-image: url("../../media/sites/25/2024/11/GTMFlex--team-member-3.jpg");
}

.pricing .pimg.DEV {
	background-image: url("../../media/sites/25/2024/11/GTMFlex--team-member-4.jpg");
}

.pricing .pimg.SEO {
	background-image: url("../../media/sites/25/2024/11/GTMFlex--team-member-5.jpg");
}

.pricing .pimg.CRO {
	background-image: url("../../media/sites/25/2024/11/GTMFlex--team-member-6.jpg");
}

.pricing .pimg.TM {
	background-image: url("../../media/sites/25/2024/11/GTMFlex--team-member-7.jpg");
}

.pricing .cicon.FD{
	background-image: url("../../media/GTMFlex--flowout-icon.png");
}

.pricing .cicon.S{
	background-image: url("../../media/GTMFlex-slack-icon.png");
}

.pricing .cicon.VC{
	background-image: url("../../media/GTMFlex-video-call.png");
}

.pricing .comm b{ font-size: 16px; }
.pricing .comm span{ font-size: 14px; color:#6b7c90; display:block; margin-top:2px; }

/* Optional add-ons */
.pricing .addons{
	margin-top: 44px;
	text-align:center;
}
.pricing .addons h2{
	margin: 0 0 16px;
	font-size: 30px;
	font-weight: 800;
	color: var(--white);
	letter-spacing:-.02em;
}
.pricing .addon-grid{
	width: 100%;
	margin: 0 auto;
	display:grid;
	gap: 14px;
}
.pricing .addon{
	border-radius: 16px;
	padding: 16px 16px;
	color:#fff;
	text-align:left;
	position:relative;
	overflow:hidden;
	box-shadow: 0 20px 55px rgba(0,0,0,.25);
	border: 1px solid rgba(255,255,255,.12);
	display:grid;
	grid-template-columns: 1fr 70px;
	gap: 10px;
	align-items:center;
}
.pricing .addon:after{
	content:"";
	position:absolute;
	right:-80px;
	top: -80px;
	width: 220px;
	height: 220px;
	border-radius: 999px;
	background: rgba(255,255,255,.10);
}
.pricing .addon h3{
	margin: 0;
	font-weight: 800;
	font-size: 26px;
	color: var(--white);
}
.pricing .addon p{
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255,255,255,.85);
	max-width: 100%;
}
.pricing .addon .price2{
	margin-top: 10px;
	font-weight: 800;
	letter-spacing:-.01em;
}
.pricing .addon .bubble{
	width: 56px; height: 56px;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.18);
	display:grid; place-items:center;
	position:relative;
	z-index:2;
	font-weight: 800;
}

.pricing .a1{ background: linear-gradient(135deg, #1fb6ff, #18c7c0); }
.pricing .a2{ background: linear-gradient(135deg, #157bff, #1fb6ff); }
.pricing .a3{ background: linear-gradient(135deg, #1450ff, #2b6ff7); }
.pricing .a4{ background: linear-gradient(135deg, #7e5aff, #9b6bff); }

/* Responsive */
@media (max-width: 980px){
	.pricing .pricing-layout{ grid-template-columns: 1fr; }
	.pricing .side{ position:relative; top:0; }
}
@media (max-width: 560px){
	.pricing .billing button{ min-width: 96px; }
	.pricing .price{ font-size: 30px; }
	.pricing .addon{ grid-template-columns: 1fr; }
	.pricing .addon .bubble{ width: 50px; height: 50px; }
}

/* =========================
   Process
========================= */
.process {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 18px;
	align-items: start;
}

.timeline {
	position: relative;
	min-height: 640px;
	display: flex;
	justify-content: center;
    height: calc(100% - 140px);
}

.tline {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 16px;
	bottom: 16px;
	width: 10px;
	border-radius: 999px;
	background: linear-gradient(180deg, #2b6ff7, #1fbf8f);
	opacity: .22;
}

.tnode {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 56px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
	font-weight: 900;
	color: #16324f;
}

.tnode span {
	background: linear-gradient(90deg, var(--blue), var(--brand2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.t1 {
  top: 0;
}

.t2 {
  top: 196px;
}

.t3 {
  top: 408px;
}

.t4 {
  top: 600px;
}

.t5 {
  top: 812px;
}

.t6 {
  top: 1014px;
}

.process-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.p-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: var(--shadow);
}

.p-card p {
	color: var(--muted);
}

.p-card ul {
	margin-top: 10px;
	color: #314154;
}

.p-card li {
	margin: 6px 0;
}

/* =========================
   Soft CTA
========================= */
.cta-soft {
	background: #fff;
	padding: 18px 0 28px;
}

.cta-soft-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: radial-gradient(circle at 20% 30%, rgba(31, 191, 143, .12), transparent 45%),
	radial-gradient(circle at 80% 60%, rgba(43, 111, 247, .12), transparent 45%),
	#f7fbff;
	border: 1px solid #eaf3ff;
	border-radius: var(--radius2);
	padding: 18px 18px;
	box-shadow: var(--shadow);
}

/* =========================
   Testimonials
========================= */
.testi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.testi-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: var(--shadow);
}

.testi-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.avatar {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(43, 111, 247, .22), rgba(31, 191, 143, .22));
	display: grid;
	place-items: center;
	font-weight: 900;
	color: #16324f;
}

.testi-name {
	font-weight: 900;
}

.testi-role {
	color: var(--muted);
	font-weight: 700;
	font-size: .9rem;
}

.quote {
	color: #324257;
}

.stars {
	margin-top: 12px;
	color: #f5a524;
	font-weight: 900;
	letter-spacing: .12em;
}

.trust-logos {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.trust-pill {
	border: 1px solid var(--line);
	background: #fff;
	padding: 10px 14px;
	border-radius: 999px;
	color: #364152;
	font-weight: 800;
	font-size: .92rem;
}

/* =========================
   Contact
========================= */
.contact {
	position: relative;
	padding: 64px 0 64px;
	background: linear-gradient(180deg, #0a3f36 0%, #062b2b 70%, #061b2d 100%);
	overflow: hidden;
	color: #fff;
}
.contact .contact-left h2,
.contact .contact-left p {
  color: white;
	text-align: left;
}

.contact-bg {
	position: absolute;
	inset: -220px -120px -220px -120px;
	background: radial-gradient(circle at 15% 25%, rgba(31, 191, 143, .28), transparent 55%),
	radial-gradient(circle at 85% 40%, rgba(43, 111, 247, .25), transparent 55%),
	radial-gradient(circle at 60% 80%, rgba(255, 106, 26, .14), transparent 55%);
	opacity: .85;
}

.contact-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: start;
}

.contact-left p {
	color: rgba(255, 255, 255, .82);
}

.stats {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.stat {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius);
	padding: 12px;
}

.stat-big {
	font-weight: 900;
	font-size: 1.6rem;
}

.stat-sub {
	color: rgba(255, 255, 255, .75);
	font-weight: 700;
	font-size: .85rem;
}

.contact-bullets {
	margin-top: 16px;
	display: grid;
	gap: 10px;
}

.cb {
	display: flex;
	gap: 10px;
	align-items: center;
	color: rgba(255, 255, 255, .9);
	font-weight: 700;
}

.cb-icon {
	width: 24px;
	height: 24px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: rgba(31, 191, 143, .18);
	border: 1px solid rgba(31, 191, 143, .25);
	color: #eafff7;
	font-weight: 900;
}

.contact-form {
	background: #fff;
	color: var(--text);
	border-radius: var(--radius2);
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: var(--shadow2);
	padding: 18px;
}

.contact-form label {
	color: #223044;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	background: #fff;
	color: #0a3f36;
	border: 1px solid #dbe7f6;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: #7a8aa0;
}

.grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.error {
	color: #b42318;
	font-weight: 700;
	font-size: .82rem;
	min-height: 1em;
}

.toast {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid #e7f0ff;
	background: #f7fbff;
	color: #1f2a37;
	display: none;
}

.toast.show {
	display: block;
}

/* =========================
   Certs + Footer
========================= */
.certs {
	padding: 0;
	margin-top: 40px;
}

.certs-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: center;
  align-items: center;
}

.cert {
  width: 80px;
}

.footer {
	background: white;
	color: #061b2d;
	padding: 22px 0;
	border-top: 1px solid rgb(240 239 239);
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 900;
}

.footer-note {
	color: #061b2d;
	margin-top: 8px;
	font-size: 14px;
}

.footer-links {
	display: flex;
	gap: 14px;
	font-weight: 700;
}
.footer-note h4 {
	margin: 0 0 5px;
	text-transform: uppercase;
	color: #11111196;
}

.footer-links ul{
	list-style: none;
}

.footer-links a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* =========================
   Back to top
========================= */
.to-top {
	position: fixed;
	right: 16px;
	bottom: 16px;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(7, 26, 42, .78);
	color: #fff;
	cursor: pointer;
	display: none;
	box-shadow: var(--shadow2);
}

.to-top.show {
	display: block;
}


.seo-block{
	padding: clamp(28px, 4vw, 64px) 16px;
	background: transparent;
	--seo-bg: #ffffff;
	--seo-text: rgba(0,0,0,.84);
	--seo-muted: rgba(0,0,0,.68);
	--seo-border: rgba(0,0,0,.10);
	--seo-shadow: 0 14px 34px rgba(0,0,0,.08);
	--seo-radius: 18px;
	--seo-radius-sm: 14px;
}

.seo-block__container{
	max-width: 1100px;
	margin: 0 auto;
}

.seo-block__header{
	margin-bottom: 10px;
}

.seo-block__title{
	margin: 0 0 10px 0;
	font-size: clamp(22px, 2.3vw, 34px);
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--seo-text);
}

.seo-block__lead{
	margin: 0;
	max-width: 100%;
	font-size: 16px;
	line-height: 1.75;
	color: var(--seo-muted);
}

.seo-block__lead strong,
.seo-block__text strong,
.seo-card__text strong{
	color: var(--seo-text);
	font-weight: 700;
}

.seo-block__grid{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 16px;
	margin-top: 18px;
}

.seo-card{
	grid-column: span 12;
	background: var(--seo-bg);
	border: 1px solid var(--seo-border);
	border-radius: var(--seo-radius);
	box-shadow: var(--seo-shadow);
	padding: clamp(16px, 2.5vw, 22px);
}

.seo-card__title{
	margin: 0 0 10px 0;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--seo-text);
}

.seo-card__text{
	margin: 0 0 12px 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--seo-muted);
}

.seo-card__list{
	margin: 0 0 12px 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.seo-card__list li{
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--seo-muted);
}

.seo-card__list li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(0,0,0,.20);
}

.seo-block__footer{
	margin-top: 18px;
	border: 1px solid var(--seo-border);
	border-radius: var(--seo-radius);
	padding: clamp(16px, 2.8vw, 26px);
	background: var(--seo-bg);
	box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.seo-block__subtitle{
	margin: 0 0 10px 0;
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--seo-text);
}

.seo-block__text{
	margin: 0 0 10px 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--seo-muted);
	max-width: 980px;
}

.seo-block__cta{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}

.seo-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	padding: 12px 16px;
	border-radius: var(--seo-radius-sm);
	text-decoration: none;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.seo-btn--primary{
	background: #111;
	color: #fff;
	box-shadow: 0 14px 22px rgba(0,0,0,.14);
}

.seo-btn--primary:hover{
	transform: translateY(-1px);
	box-shadow: 0 18px 30px rgba(0,0,0,.18);
}

.seo-btn--ghost{
	background: transparent;
	color: #111;
	border-color: rgba(0,0,0,.18);
}

.seo-btn--ghost:hover{
	transform: translateY(-1px);
	box-shadow: 0 12px 20px rgba(0,0,0,.08);
}

.seo-cities__chips{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 6px 0;
}

.seo-city{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 12px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.14);
	background: rgba(0,0,0,.02);
	text-decoration: none;
	font-size: 13px;
	font-weight: 800;
	color: rgba(0,0,0,.86);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
	white-space: nowrap;
}

.seo-city:hover{
	transform: translateY(-1px);
	background: rgba(0,0,0,.04);
	border-color: rgba(0,0,0,.22);
	box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
/* Hide checkbox */
.seo-block__toggle{
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: auto;
}

/* Default: hide all extra content */
.seo-block__more{
	display: none;
}

/* When checked: show all extra content */
.seo-block__toggle:checked ~ .seo-block__container .seo-block__more{
	display: block;
}

/* Button */
.seo-block__btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.18);
	background: transparent;
	cursor: pointer;
	user-select: none;
	font-weight: 900;
	font-size: 13px;
	letter-spacing: 0.01em;
	color: rgba(0,0,0,.88);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.seo-block__btn:hover{
	transform: translateY(-1px);
	background: rgba(0,0,0,.03);
	border-color: rgba(0,0,0,.26);
	box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

/* Swap "Show more" / "Show less" text */
.seo-block__btnText--less{ display: none; }
.seo-block__toggle:checked ~ .seo-block__container .seo-block__btnText--more{ display: none; }
.seo-block__toggle:checked ~ .seo-block__container .seo-block__btnText--less{ display: inline; }

/* Responsive layout */
@media (min-width: 820px){
	.seo-card:nth-child(1){ grid-column: span 6; }
	.seo-card:nth-child(2){ grid-column: span 6; }
	.seo-card:nth-child(3){ grid-column: span 12; }
}

@media (min-width: 1024px){
	.seo-card:nth-child(1){ grid-column: span 4; }
	.seo-card:nth-child(2){ grid-column: span 4; }
	.seo-card:nth-child(3){ grid-column: span 4; }
}

/* =========================
   Responsive
========================= */
@media (max-width: 1040px) {
	h1 {
		font-size: 32px;
		color: #fff;
	}
	
	.logo-strip {
		padding: 30px 15px;
	}
	
	.lead {
		font-size: 14px;
		max-width: 100%;
		text-align: justify;
	}
	
	.hero{
		padding: 0 20px 20px;
	}
	.section {
		padding: 30px 0;
	}
	.service-grid {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.icon {
		width: 34px;
		height: 34px;
	}
	
	.logo-pill img {
		width: 100px;
	}
	
	.logos {
		justify-content: space-evenly;
	}
	
	.cta-band {
		padding: 32px 0;
	}
	
	.quality-grid {
		grid-template-columns: 1fr;
		padding: 0;
	}
	
	.callout .avatar {
		margin: auto;
	}
	
	.cert {
		width: 60px;
	}
	.label-green {
		background: #ff5900;
	}
	.label-blue {
		color: white;
		border: none;
		background: #1f2a37;
	}
	
	.pricing{
		padding: 30px 20px;
	}
	
	.pricing .card-container {
		width: 100%;
	}
	
	.pricing .person {
		align-items: flex-start;	
	}
	
	.avatar{
		margin: 0;
	}
	.grid2 {
		gap: 0;
	}
	
	.footer{
		padding: 10px 0;
	}
	
	.footer-note{
		margin: 0;
	}
	
	.callout .btn-primary{
		font-size: 16px;
	}
	
	.hero-grid{
		padding: 20px 0 0px;
	}
	
	.testi-grid {
		grid-template-columns: 1fr;
	}
	
	.process {
		grid-template-columns: 220px 1fr;
	}
	
	.timeline {
		min-height: 620px;
	}

	/* ===== Mobile sidebar -> dropdown accordions (uses existing markup) ===== */
	/* keep sidebar normal flow on mobile */
	.side{
		position: relative;
		top: 0;
		padding: 14px;
		border-radius: 18px;
	}
	
	/* the JS will wrap each H4 + menu into .dd-section */
	.side .dd-section{
		border: 1px solid rgba(255,255,255,.10);
		background: rgba(255,255,255,.03);
		border-radius: 14px;
		overflow: hidden;
		margin-bottom: 12px;
	}
	
	/* the JS replaces h4 with a button .dd-toggle */
	.side .dd-toggle{
		width: 100%;
		border: 0;
		background: transparent;
		color: white;
		padding: 14px 12px;
		display:flex;
		align-items:center;
		justify-content:space-between;
		cursor:pointer;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .14em;
		font-size: 12px;
	}
	
	.side .dd-toggle .right{
		display:flex;
		align-items:center;
		gap: 10px;
		color: rgba(255,255,255,.90);
		font-weight: 900;
		letter-spacing: 0;
		text-transform:none;
		font-size: 12px;
	}
	
	.side .dd-current{
		max-width: 160px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.side .dd-caret{
		width: 10px;
		height: 10px;
		border-right: 2px solid rgba(255,255,255,.75);
		border-bottom: 2px solid rgba(255,255,255,.75);
		transform: rotate(45deg);
		transition: transform .18s ease;
		margin-top: -2px;
		flex: 0 0 auto;
	}
	
	.side .dd-section.open .dd-caret{
		transform: rotate(-135deg);
		margin-top: 2px;
	}
	
	/* collapsible content */
	.side .dd-content{
		max-height: 0;
		overflow: hidden;
		transition: max-height .22s ease;
		border-top: 1px solid rgba(255,255,255,.08);
	}
	
	.side .dd-section.open .dd-content{
		max-height: 700px; /* enough for your buttons */
	}
	
	.side .dd-content .menu{
		padding: 10px;
	}
	
	/* make menu items feel like the screenshot */
	.side .dd-content .menu button{
		border-radius: 14px;
		padding: 12px 12px;
	}
	
	/* tip box */
	.side .mini{
		margin-top: 14px;
		padding: 12px;
		border-radius: 14px;
		border: 1px solid rgba(255,255,255,.10);
		background: rgba(255,255,255,.03);
	}
	.pricing .card-head h2 {
		font-size: 24px;
	}
	.pricing .addons h2 {
		font-size: 24px;
	}
}

@media (max-width: 860px) {
	
	.nav.open {
		display: flex;
	}
	
	.hero-grid {
		grid-template-columns: 1fr;
	}
	
	.hero-card {
		position: relative;
		top: 0;
	}
	
	.cta-inner, .cta-soft-inner {
		flex-direction: column;
		text-align: center;
	}
	
	.cta-inner .btn, .cta-soft-inner .btn {
		width: 100%;
		max-width: 320px;
	}
	
	.process {
		grid-template-columns: 1fr;
	}
	
	.timeline {
		display: none;
	}
	
	.pricing-grid {
		grid-template-columns: 1fr;
	}
	
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.award-row {
		gap: 10px;
	}
	
	.award {
		width: 100%;
	}
	
	.grid2 {
		grid-template-columns: 1fr;
	}
	
	.stack-row {
		grid-template-columns: 1fr;
	}
	
	.stack-label {
		justify-content: center;
	}
}