/* Drake Tutors. Design tokens and section styles.
   Heading rules target .elementor-heading-title so they beat the kit's
   theme-style selectors regardless of stylesheet order. */

:root {
	--dt-indigo: #2E3192;
	--dt-indigo-deep: #1E2068;
	--dt-orange: #EF7A18;          /* non text only: rules, dots, button grounds */
	--dt-orange-ink: #A8500B;      /* orange TEXT on light grounds, 5.1:1 on paper */
	--dt-orange-lift: #FFB067;     /* orange TEXT on indigo grounds, 5.9:1 */
	--dt-orange-hover: #D96A0C;    /* button hover ground, used with ink text */
	--dt-paper: #F6F7FB;
	--dt-ink: #171A2E;
	--dt-line: #DDE0EC;
	--dt-muted: #5A6076;
	--dt-on-indigo: #C9CCEC;
	--dt-r: 10px;
	--dt-shadow: 0 1px 2px rgba(23, 26, 46, .06), 0 14px 36px rgba(30, 32, 104, .08);
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* ---------- type utilities ---------- */

.dt-h1 .elementor-heading-title {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(37px, 5vw, 60px);
	line-height: 1.06;
	letter-spacing: -1.4px;
	color: var(--dt-ink);
	max-width: 19ch;
}

.dt-h2 .elementor-heading-title {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(29px, 3.5vw, 43px);
	line-height: 1.1;
	letter-spacing: -.9px;
	color: var(--dt-ink);
	max-width: 20ch;
}

.dt-h2--wide .elementor-heading-title { max-width: 26ch; }
.dt-h2--light .elementor-heading-title { color: #FFFFFF; }

.dt-eyebrow p {
	font-family: "Public Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--dt-orange-ink);
	margin: 0;
}

.dt-lead p {
	font-size: 19.5px;
	line-height: 1.62;
	color: var(--dt-muted);
	margin: 0 0 14px;
	max-width: 60ch;
}

.dt-lead p:last-child { margin-bottom: 0; }
.dt-lead--light p { color: var(--dt-on-indigo); }

.dt-body p {
	font-size: 17px;
	line-height: 1.68;
	color: var(--dt-muted);
	margin: 0 0 16px;
	max-width: 64ch;
}

.dt-body p:last-child { margin-bottom: 0; }

/* ---------- buttons. one shape system: pill ---------- */

.dt-btn .elementor-button {
	border-radius: 999px;
	padding: 15px 30px;
	font-family: "Public Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .1px;
	white-space: nowrap;
	transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s ease, color .18s ease;
}

.dt-btn .elementor-button:active { transform: translateY(1px); }

.dt-btn--primary .elementor-button {
	background-color: var(--dt-orange);
	color: var(--dt-ink);
}

.dt-btn--primary .elementor-button:hover,
.dt-btn--primary .elementor-button:focus-visible {
	background-color: var(--dt-orange-hover);
	color: var(--dt-ink);
}

.dt-btn--onindigo .elementor-button {
	background-color: #FFFFFF;
	color: var(--dt-indigo-deep);
}

.dt-btn--onindigo .elementor-button:hover,
.dt-btn--onindigo .elementor-button:focus-visible {
	background-color: var(--dt-orange);
	color: var(--dt-ink);
}

/* The phone sits as a text link, not a second button, so there is one
   button label per intent across the site. */
.dt-tel p { margin: 0; }

.dt-tel a {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--dt-indigo);
	text-decoration: none;
	border-bottom: 2px solid rgba(46, 49, 146, .3);
	padding-bottom: 2px;
	transition: border-color .18s ease, color .18s ease;
}

.dt-tel a:hover {
	color: var(--dt-orange-ink);
	border-bottom-color: var(--dt-orange-ink);
}

.dt-tel--light a {
	color: #FFFFFF;
	border-bottom-color: rgba(255, 255, 255, .45);
}

.dt-tel--light a:hover {
	color: var(--dt-orange-lift);
	border-bottom-color: var(--dt-orange-lift);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--dt-indigo-deep);
	border-radius: 4px;
}

/* ---------- header ---------- */

.dt-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #FFFFFF;
	border-bottom: 1px solid var(--dt-line);
}

.dt-header__inner { min-height: 72px; }

/* The nav column is greedy, so the logo widget shrinks and Elementor's
   img { max-width: 100% } then clamps the logo to the squeezed width. */
.dt-logo { flex: 0 0 auto; }
.dt-header__right { flex: 0 1 auto; }

/* Elementor ships .elementor-widget-image a img[src$=".svg"] { width: 48px }.
   Match that specificity or the SVG logo renders at 48px. */
/* The anchor is inline, so the line box added 8px of descender space
   under the logo and inflated the header. */
.dt-logo a,
.dt-footer__logo a { display: block; font-size: 0; line-height: 0; }

.dt-logo a img[src$=".svg"],
.dt-logo img {
	width: 144px;
	max-width: 144px;
	height: auto;
	display: block;
}

.dt-nav .elementor-nav-menu .elementor-item {
	font-family: "Public Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--dt-ink);
	padding: 8px 0;
	fill: var(--dt-ink);
}

.dt-nav .elementor-nav-menu > li { margin-inline-end: 30px; }
.dt-nav .elementor-nav-menu > li:last-child { margin-inline-end: 0; }

.dt-nav .elementor-nav-menu--main .elementor-item::after {
	content: "";
	display: block;
	height: 3px;
	border-radius: 2px;
	background: var(--dt-orange);
	width: 0;
	transition: width .2s cubic-bezier(.16, 1, .3, 1);
	margin-top: 5px;
}

.dt-nav .elementor-nav-menu--main .elementor-item:hover::after,
.dt-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
	width: 100%;
}

.dt-header__tel p { margin: 0; }

.dt-header__tel a {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	white-space: nowrap;
	color: var(--dt-indigo);
	text-decoration: none;
}

.dt-header__tel a:hover { color: var(--dt-orange-ink); }

/* ---------- hero ---------- */

.dt-hero {
	background-color: var(--dt-paper);
	border-bottom: 1px solid var(--dt-line);
}

.dt-hero__sub p { max-width: 43ch; }

.dt-hero__panel {
	background-color: var(--dt-indigo);
	border-radius: var(--dt-r);
	box-shadow: var(--dt-shadow);
}

.dt-panel-title .elementor-heading-title {
	font-family: "Public Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--dt-orange-lift);
}

.dt-panel-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dt-panel-list li {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 18.5px;
	font-weight: 600;
	color: #FFFFFF;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .17);
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.dt-panel-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.dt-panel-list li::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--dt-orange);
	transform: translateY(-3px);
}

/* ---------- bento ---------- */

.dt-bento__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
}

.dt-cell {
	border-radius: var(--dt-r);
	padding: 30px;
	border: 1px solid var(--dt-line);
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dt-cell h3 {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.35px;
	line-height: 1.15;
	margin: 0;
	color: var(--dt-ink);
}

.dt-cell p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--dt-muted);
	max-width: 40ch;
}

/* Six items, six cells. Rows read 4+2, 2+4, 3+3. */
.dt-s2 { grid-column: span 2; }
.dt-s3 { grid-column: span 3; }
.dt-s4 { grid-column: span 4; }

/* Three of the six carry a real ground so it is not six white boxes. */
.dt-cell--fill {
	background-color: var(--dt-indigo);
	border-color: var(--dt-indigo);
}

.dt-cell--fill h3 { color: #FFFFFF; }
.dt-cell--fill p { color: var(--dt-on-indigo); }

/* Was a cream gradient. It read as a rendering artifact rather than a
   decision, and warm cream is the default every AI-built site reaches for.
   An orange top rule echoes the credential cards instead. */
.dt-cell--tint {
	background-color: #FFFFFF;
	border-top: 3px solid var(--dt-orange);
	padding-top: 28px;
}

.dt-cell--deep {
	background-image: linear-gradient(155deg, var(--dt-indigo-deep) 0%, #33368F 100%);
	border-color: var(--dt-indigo-deep);
}

.dt-cell--deep h3 { color: #FFFFFF; }
.dt-cell--deep p { color: var(--dt-on-indigo); }

/* ---------- steps ---------- */

.dt-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--dt-line);
}

.dt-step {
	padding: 34px 34px 0 0;
	border-right: 1px solid var(--dt-line);
}

.dt-step:last-child { border-right: 0; }
.dt-step:not(:first-child) { padding-left: 34px; }

.dt-step h3 {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.4px;
	margin: 0 0 10px;
	color: var(--dt-indigo);
}

.dt-step p {
	margin: 0;
	color: var(--dt-muted);
	font-size: 16.5px;
	line-height: 1.6;
}

/* ---------- full bleed indigo band ---------- */

.dt-band {
	background-color: var(--dt-indigo-deep);
	background-image: radial-gradient(1100px 420px at 12% -10%, rgba(51, 54, 143, .9) 0%, rgba(30, 32, 104, 0) 70%);
}

.dt-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.dt-fact {
	border-top: 3px solid var(--dt-orange);
	padding-top: 20px;
}

.dt-fact h3 {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	color: #FFFFFF;
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: -.2px;
}

.dt-fact p {
	margin: 0;
	color: var(--dt-on-indigo);
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- quotes ---------- */

.dt-quotes__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.dt-quote {
	background-color: #FFFFFF;
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r);
	padding: 28px 32px 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The cards were hollow: two lines of quote, then auto-pushed attribution,
   then a lot of nothing. The mark gives the composition something to sit on. */
.dt-quote::before {
	content: "\201C";
	display: block;
	font-family: "Schibsted Grotesk", Georgia, serif;
	font-size: 62px;
	font-weight: 700;
	line-height: .82;
	color: var(--dt-orange);
	height: .5em;
}

.dt-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 20.5px;
	font-weight: 600;
	line-height: 1.42;
	letter-spacing: -.2px;
	color: var(--dt-ink);
}

.dt-quote cite {
	font-style: normal;
	font-size: 15px;
	font-weight: 600;
	color: var(--dt-muted);
	margin-top: auto;
}

/* ---------- cards ---------- */

.dt-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.dt-cards--3 { grid-template-columns: repeat(3, 1fr); }

.dt-card {
	background-color: #FFFFFF;
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r);
	padding: 28px;
}

.dt-card h3 {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.3px;
	margin: 0 0 8px;
	color: var(--dt-ink);
}

.dt-card p {
	margin: 0;
	color: var(--dt-muted);
	font-size: 16.5px;
	line-height: 1.6;
}

/* ---------- accordion ---------- */

.dt-acc .elementor-accordion .elementor-accordion-item {
	border: 0;
	border-bottom: 1px solid var(--dt-line);
}

.dt-acc .elementor-tab-title {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.3px;
	padding: 24px 0;
	background: transparent;
}

.dt-acc .elementor-tab-title a,
.dt-acc .elementor-tab-title .elementor-accordion-title { color: var(--dt-ink); }
.dt-acc .elementor-tab-title.elementor-active a,
.dt-acc .elementor-tab-title.elementor-active .elementor-accordion-title { color: var(--dt-indigo); }

.dt-acc .elementor-tab-content {
	border: 0;
	padding: 0 0 26px;
	color: var(--dt-muted);
	font-size: 16.5px;
	line-height: 1.65;
	background: transparent;
}

.dt-acc .elementor-tab-content p { margin: 0 0 12px; max-width: 68ch; }
.dt-acc .elementor-tab-content p:last-child { margin-bottom: 0; }

/* ---------- form ---------- */

.dt-form .elementor-field-group > label {
	font-family: "Public Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--dt-ink);
	margin-bottom: 8px;
}

.dt-form .elementor-field-textual {
	border: 1px solid #8189A6;
	border-radius: var(--dt-r);
	padding: 14px 16px;
	font-size: 16px;
	color: var(--dt-ink);
	background-color: #FFFFFF;
	line-height: 1.4;
}

.dt-form .elementor-field-textual::placeholder {
	color: #63697F;
	opacity: 1;
}

.dt-form .elementor-field-textual:focus {
	border-color: var(--dt-indigo);
	box-shadow: 0 0 0 3px rgba(46, 49, 146, .18);
	outline: none;
}

.dt-form .elementor-button {
	border-radius: 999px;
	background-color: var(--dt-orange);
	color: var(--dt-ink);
	font-family: "Public Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	padding: 15px 32px;
	transition: background-color .18s ease;
}

.dt-form .elementor-button:hover { background-color: var(--dt-orange-hover); }

.dt-form .elementor-field-required .elementor-field-label::after {
	content: " (required)";
	font-weight: 400;
	color: var(--dt-muted);
}

.dt-form .elementor-message { font-size: 15.5px; }
.dt-form .elementor-message.elementor-message-danger { color: #A32014; }
.dt-form .elementor-message.elementor-message-success { color: #1B6B3A; }

.dt-formwrap {
	background-color: #FFFFFF;
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r);
	padding: 34px;
	box-shadow: var(--dt-shadow);
}

/* ---------- contact details list ---------- */

.dt-contact h2,
.dt-contact h3 {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--dt-indigo);
	margin: 0 0 6px;
}

.dt-contact p { margin: 0 0 26px; color: var(--dt-muted); font-size: 17px; line-height: 1.6; }
.dt-contact p:last-child { margin-bottom: 0; }
.dt-contact a { color: var(--dt-ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(46, 49, 146, .28); }
.dt-contact a:hover { color: var(--dt-orange-ink); border-bottom-color: var(--dt-orange-ink); }

/* ---------- closing call to action ---------- */

.dt-cta {
	background-color: var(--dt-paper);
	border-top: 1px solid var(--dt-line);
}

.dt-ctarow {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

/* ---------- footer ---------- */

.dt-footer { background-color: var(--dt-indigo-deep); }

.dt-footer__logo a img[src$=".svg"],
.dt-footer__logo img {
	width: 176px;
	max-width: 176px;
	height: auto;
	display: block;
}

.dt-footer p,
.dt-footer li {
	color: var(--dt-on-indigo);
	font-size: 16px;
	line-height: 1.7;
}

.dt-footer p { margin: 0; }

.dt-footer a {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.dt-footer a:hover {
	color: var(--dt-orange-lift);
	border-bottom-color: var(--dt-orange-lift);
}

.dt-footer h3 {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.dt-footer__list ul { list-style: none; margin: 0; padding: 0; }
.dt-footer__list li { margin-bottom: 8px; }
.dt-footer__list li:last-child { margin-bottom: 0; }

.dt-footer__bar { border-top: 1px solid rgba(255, 255, 255, .17); }

.dt-footer__bar p {
	font-size: 14.5px;
	color: rgba(201, 204, 236, .82);
}

/* ---------- motion. scroll driven, no scroll listeners ---------- */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.dt-reveal {
			animation: dt-rise linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 24%;
		}
	}

	@keyframes dt-rise {
		from { opacity: 0; transform: translateY(16px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.dt-bento__grid { grid-template-columns: repeat(2, 1fr); }
	.dt-s2, .dt-s3, .dt-s4 { grid-column: span 1; }

	.dt-steps__grid { grid-template-columns: 1fr; }
	.dt-step {
		border-right: 0;
		border-bottom: 1px solid var(--dt-line);
		padding: 26px 0;
	}
	.dt-step:not(:first-child) { padding-left: 0; }
	.dt-step:last-child { border-bottom: 0; }

	.dt-facts { grid-template-columns: 1fr; gap: 26px; }
	.dt-quotes__grid { grid-template-columns: 1fr; }
	.dt-cards, .dt-cards--3 { grid-template-columns: 1fr; }
	.dt-hero__sub p { max-width: none; }
	.dt-h2 .elementor-heading-title,
	.dt-h2--wide .elementor-heading-title { max-width: none; }

	/* The burger panel is in flow by default, so it takes the width of the
	   column it sits in and pushes the logo down. Lift it out. */
	.dt-header .elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto !important;
		background-color: #FFFFFF;
		border-top: 1px solid var(--dt-line);
		box-shadow: 0 18px 36px rgba(23, 26, 46, .12);
	}

	/* Elementor's own wrappers carry position:relative and would otherwise be
	   the offset parent. */
	.dt-header .elementor-widget-nav-menu,
	.dt-header .dt-header__right,
	.dt-header .dt-header__right > .e-con-inner {
		position: static;
	}

	.dt-header__inner,
	.dt-header__inner > .e-con-inner { position: relative; }

	.dt-header .elementor-nav-menu--dropdown a {
		font-size: 17px;
		font-weight: 600;
		padding: 15px 20px;
	}
}

@media (max-width: 767px) {
	.dt-bento__grid { grid-template-columns: 1fr; }
	.dt-cell { min-height: 0; padding: 26px; }
	.dt-quote { padding: 26px; }
	.dt-formwrap { padding: 24px; }
	.dt-logo a img[src$=".svg"],
	.dt-logo img { width: 128px; max-width: 128px; }
	.dt-header__tel a { font-size: 15.5px; }
	.dt-ctarow { gap: 22px; }
	.dt-lead p { font-size: 18px; }
}

/* ---------- quote inside an indigo band ---------- */

.dt-bandquote {
	margin: 0;
	max-width: 62ch;
}

.dt-bandquote blockquote {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.3px;
	color: #FFFFFF;
}

.dt-bandquote cite {
	font-style: normal;
	font-size: 15px;
	font-weight: 600;
	color: var(--dt-on-indigo);
}

/* ---------- labelled rows ---------- */

.dt-rows { border-top: 1px solid var(--dt-line); }

.dt-row {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 32px;
	padding: 30px 0;
	border-bottom: 1px solid var(--dt-line);
}

.dt-row h3 {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.4px;
	line-height: 1.15;
	margin: 0;
	color: var(--dt-indigo);
}

.dt-row p {
	margin: 0;
	color: var(--dt-muted);
	font-size: 17px;
	line-height: 1.65;
}

/* ---------- stacked quote list ---------- */

.dt-quotelist { border-top: 1px solid var(--dt-line); }

.dt-quotelist figure {
	margin: 0;
	padding: 32px 0;
	border-bottom: 1px solid var(--dt-line);
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 32px;
	align-items: start;
}

.dt-quotelist blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.25px;
	color: var(--dt-ink);
}

.dt-quotelist figcaption { padding-top: 4px; }

.dt-quotelist cite {
	font-style: normal;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--dt-muted);
}

@media (max-width: 1024px) {
	.dt-row,
	.dt-quotelist figure { grid-template-columns: 1fr; gap: 12px; }
	.dt-quotelist figure { padding: 26px 0; }
}

/* ---------- fixes found in QA ---------- */

/* The footer link underline was landing on the logo too. */
.dt-footer__logo a { border-bottom: 0; }

/* Elementor stretches the submit field group, so the button filled the column. */
.dt-form .elementor-field-type-submit { align-items: flex-start; }
.dt-form .elementor-field-type-submit .elementor-button { width: auto; }

@media (max-width: 1024px) {
	.dt-h1 .elementor-heading-title { max-width: none; }
}

/* Elementor gives container children width:100%, so the nav column filled the
   row and pushed the burger onto a second line. */
.dt-header .dt-header__right { width: auto; }
.dt-header .dt-header__inner > .e-con-inner { flex-wrap: nowrap; }

@media (max-width: 767px) {
	.dt-header .dt-header__right { --gap: 16px; gap: 16px; }
}

/* ---------- 404 ---------- */

.dt-404list {
	list-style: none;
	margin: 30px 0 36px;
	padding: 0;
	border-top: 1px solid var(--dt-line);
	max-width: 58ch;
}

.dt-404list li { border-bottom: 1px solid var(--dt-line); }

.dt-404list a {
	display: block;
	padding: 17px 0;
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--dt-indigo);
	text-decoration: none;
}

.dt-404list a:hover { color: var(--dt-orange-ink); }

/* ==========================================================================
   Polish pass
   ========================================================================== */

/* ---------- a repeating rule device under section headings ----------
   The brand already has an orange rule in the logo. Using it under every
   section heading turns a one-off flourish into a system, and gives the
   left rail something to land on. */

.dt-h2 .elementor-heading-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 4px;
	border-radius: 2px;
	background: var(--dt-orange);
	margin-top: 22px;
	transform-origin: left center;
}

/* Tried a squared exercise-book grid on the indigo here. It read as graph
   paper, fought the hairlines already inside the panel list and the fact
   rules, and made a calm band busy. The site's strength is flat colour and
   confident type, so the depth comes from the glow alone. */

.dt-band {
	background-image: radial-gradient(1200px 460px at 10% -14%, rgba(58, 61, 160, .92) 0%, rgba(30, 32, 104, 0) 68%);
}

/* ---------- motion ----------
   Three moments only, each with a job:
   the arrival, the sequence of what we cover, and content entering on scroll.
   No scroll listeners, no library, all of it off under reduced motion. */

@media (prefers-reduced-motion: no-preference) {

	/* 1. Arrival. The one time a first visit is a moment rather than a page. */
	.dt-hero .dt-eyebrow,
	.dt-hero .dt-h1,
	.dt-hero__sub,
	.dt-hero .dt-ctarow,
	.dt-hero__panel {
		animation: dt-enter .72s cubic-bezier(.16, 1, .3, 1) both;
	}

	.dt-hero .dt-eyebrow  { animation-delay: .04s; }
	.dt-hero .dt-h1       { animation-delay: .10s; }
	.dt-hero__sub         { animation-delay: .19s; }
	.dt-hero .dt-ctarow   { animation-delay: .27s; }
	.dt-hero__panel       { animation-delay: .14s; }

	/* 2. The stages arrive one after another, which is the point being made. */
	.dt-panel-list li {
		animation: dt-enter-sm .5s cubic-bezier(.16, 1, .3, 1) both;
	}

	.dt-panel-list li:nth-child(1) { animation-delay: .34s; }
	.dt-panel-list li:nth-child(2) { animation-delay: .40s; }
	.dt-panel-list li:nth-child(3) { animation-delay: .46s; }
	.dt-panel-list li:nth-child(4) { animation-delay: .52s; }
	.dt-panel-list li:nth-child(5) { animation-delay: .58s; }
	.dt-panel-list li:nth-child(6) { animation-delay: .64s; }

	@supports (animation-timeline: view()) {

		/* 3. Reveal the grid cell by cell rather than as one slab, so the eye
		   is led across the row instead of being handed a finished block. */
		.dt-bento__grid.dt-reveal,
		.dt-facts.dt-reveal,
		.dt-quotes__grid.dt-reveal,
		.dt-cards.dt-reveal,
		.dt-steps__grid.dt-reveal,
		.dt-rows.dt-reveal,
		.dt-quotelist.dt-reveal {
			animation: none;
		}

		.dt-bento__grid > .dt-cell,
		.dt-facts > .dt-fact,
		.dt-quotes__grid > .dt-quote,
		.dt-cards > .dt-card,
		.dt-steps__grid > .dt-step,
		.dt-rows > .dt-row,
		.dt-quotelist > figure {
			animation: dt-rise linear both;
			animation-timeline: view();
			animation-range: entry 4% cover 22%;
		}

		/* A half beat of lag on the right hand column reads as a sweep. */
		.dt-bento__grid > .dt-cell:nth-child(even),
		.dt-quotes__grid > .dt-quote:nth-child(even),
		.dt-cards > .dt-card:nth-child(even) {
			animation-range: entry 4% cover 30%;
		}

		.dt-facts > .dt-fact:nth-child(2),
		.dt-steps__grid > .dt-step:nth-child(2) { animation-range: entry 4% cover 27%; }

		.dt-facts > .dt-fact:nth-child(3),
		.dt-steps__grid > .dt-step:nth-child(3) { animation-range: entry 4% cover 32%; }

		/* The rule draws itself in as the heading arrives. */
		.dt-h2 .elementor-heading-title::after {
			animation: dt-rule linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 26%;
		}
	}
}

@keyframes dt-enter {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes dt-enter-sm {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes dt-rule {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Eight identical white cards read as a spreadsheet. The two facts that are
   genuinely competitive, no contract and the online option, carry the indigo
   so the grid has hierarchy rather than just rhythm. */
.dt-card--fill {
	background-color: var(--dt-indigo);
	border-color: var(--dt-indigo);
}

.dt-card--fill h3 { color: #FFFFFF; }
.dt-card--fill p { color: var(--dt-on-indigo); }

/* ==========================================================================
   Generated legal documents
   Complianz outputs its documents into the theme's default page template, so
   these pages sit outside Elementor entirely. Markup is
   main.site-main > .page-header > h1.entry-title, then
   .page-content > #cmplz-document.
   ========================================================================== */

body.page-template-default main.site-main {
	max-width: 62rem;
	margin: 0 auto;
	padding: 72px 24px 100px;
}

body.page-template-default .page-header {
	margin: 0 0 36px;
	max-width: 46rem;
}

body.page-template-default .entry-title {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(31px, 4vw, 46px);
	line-height: 1.08;
	letter-spacing: -1.1px;
	color: var(--dt-ink);
	margin: 0;
}

body.page-template-default .entry-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 4px;
	border-radius: 2px;
	background: var(--dt-orange);
	margin-top: 22px;
}

/* The document itself. A single readable measure, no cards, no decoration. */
#cmplz-document {
	max-width: 46rem;
	color: var(--dt-muted);
	font-size: 17px;
	line-height: 1.72;
}

#cmplz-document > i,
#cmplz-document > p:first-child i {
	display: inline-block;
	font-style: normal;
	font-size: 15px;
	color: var(--dt-ink);
	background-color: var(--dt-paper);
	border-left: 3px solid var(--dt-orange);
	padding: 12px 16px;
	margin-bottom: 8px;
}

#cmplz-document p { margin: 0 0 18px; }

#cmplz-document h2 {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.4px;
	line-height: 1.2;
	color: var(--dt-ink);
	margin: 44px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--dt-line);
}

#cmplz-document h3 {
	font-family: "Schibsted Grotesk", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.2px;
	color: var(--dt-indigo);
	margin: 26px 0 10px;
}

#cmplz-document ul {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

#cmplz-document li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 10px;
}

#cmplz-document li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--dt-orange);
}

#cmplz-document a {
	color: var(--dt-indigo);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid rgba(46, 49, 146, .28);
}

#cmplz-document a:hover {
	color: var(--dt-orange-ink);
	border-bottom-color: var(--dt-orange-ink);
}

/* Complianz collapses some sections into details/summary and already gives the
   summary a tinted panel and a chevron. Wrapping that in a card of our own
   produced a box inside a box, so the panel is the affordance and we only set
   the shape. */
#cmplz-document details {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0 0 20px;
}

#cmplz-document summary {
	cursor: pointer;
	padding: 14px 18px;
	border-radius: var(--dt-r);
	list-style: none;
}

#cmplz-document summary::-webkit-details-marker { display: none; }

#cmplz-document summary > div { display: inline; }

#cmplz-document summary h3 {
	display: inline;
	margin: 0;
	color: var(--dt-ink);
	font-size: 17px;
}

/* Content revealed by the disclosure sits indented so the hierarchy reads. */
#cmplz-document details > *:not(summary) {
	padding-left: 18px;
	border-left: 2px solid var(--dt-line);
	margin-left: 4px;
}

#cmplz-document details[open] summary h3 { color: var(--dt-indigo); }

/* Complianz already draws its own chevron in the summary, so no marker of our
   own here. Just stop its tinted panel fighting the card. */
#cmplz-document summary,
#cmplz-document summary > div,
#cmplz-document summary h3 { background: transparent; }

#cmplz-document table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
	font-size: 16px;
}

#cmplz-document th,
#cmplz-document td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--dt-line);
	vertical-align: top;
}

#cmplz-document th {
	font-family: "Public Sans", system-ui, sans-serif;
	font-weight: 600;
	color: var(--dt-ink);
	background-color: var(--dt-paper);
}

/* Complianz hides a decoy domain inside obfuscated email addresses. If its own
   stylesheet is deferred the decoy shows and the address reads as nonsense. */
.cmplz-fmail-domain { display: none !important; }

/* The document links block Complianz appends. */
.cmplz-documents.cmplz-links ul { list-style: none; margin: 0; padding: 0; }

@media (max-width: 767px) {
	body.page-template-default main.site-main { padding: 48px 20px 72px; }
	#cmplz-document h2 { font-size: 22px; margin-top: 34px; }
	#cmplz-document summary { padding: 12px 14px; }
}

/* ---------- footer legal row ---------- */

/* Elementor containers are column by default and give child widgets
   width: 100%, so both rows stacked instead of sitting opposite each other. */
.dt-footer__bar > .e-con-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 32px;
}

.dt-footer__bar > .e-con-inner > .elementor-widget { width: auto; }

.dt-footer__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.dt-footer__legal li { margin: 0; }

.dt-footer__legal a {
	font-size: 14.5px;
	border-bottom-color: rgba(255, 255, 255, .22);
}

@media (max-width: 767px) {
	.dt-footer__bar > .e-con-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}