/* ==========================================================================
   ATAI CONSTRUCTION — DESIGN SYSTEM
   ==========================================================================
   Utility classes applied via Elementor's Advanced → CSS Classes field.
   Every visual pattern from the Stitch design lives here. Content editors
   never touch CSS — they compose pages by adding class names to widgets.

   ORDER OF LAYERS
   1. Skip link + focus base
   2. Root type reset
   3. Section rhythm
   4. Eyebrows + accent lines
   5. Buttons (primary / secondary / ghost / on-dark)
   6. Bento cards + variants
   7. Principle / feature icon blocks
   8. Chips + tags
   9. Stat blocks
  10. Utility bar (top strip) + marquee
  11. Form inputs (Elementor form widget skin)
  12. Hero patterns
  13. Contact panel
  14. Legal / prose pages
  15. Accessibility helpers + reduced motion
   ========================================================================== */


/* 1. SKIP LINK + FOCUS BASE ================================================= */

.atai-skip-link{
	position:absolute;
	top:-100px;
	left:16px;
	z-index:100000;
	background:var(--atai-neutral);
	color:var(--atai-white);
	padding:12px 20px;
	border-radius:var(--atai-radius-sm);
	font:600 15px/1.2 var(--atai-font-body);
	text-decoration:none;
	box-shadow:var(--atai-shadow-3);
}
.atai-skip-link:focus,
.atai-skip-link:focus-visible{
	top:16px;
	outline:3px solid var(--atai-focus);
	outline-offset:2px;
}

/* Global focus indicator — never removed, only enhanced. */
.atai-site *:focus-visible{
	outline:3px solid var(--atai-focus) !important;
	outline-offset:2px !important;
	border-radius:2px;
}


/* 2. ROOT TYPE RESET ======================================================== */

body.atai-site{
	font-family:var(--atai-font-body);
	color:var(--atai-ink);
	background:var(--atai-white);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.atai-site h1,.atai-site h2,.atai-site h3,.atai-site h4,.atai-site h5,.atai-site h6{
	font-family:var(--atai-font-head);
	color:var(--atai-neutral);
	letter-spacing:-0.01em;
}

.atai-site p{ line-height:1.65; }

.atai-site a{ color:var(--atai-primary); }
.atai-site a:hover{ color:var(--atai-primary-deep); }


/* 3. SECTION RHYTHM ========================================================= */

/* Add to any Elementor Section. Controls vertical padding + optional background. */
.atai-section{ padding:96px 0; }
.atai-section--sm{ padding:64px 0; }
.atai-section--lg{ padding:128px 0; }
.atai-section--surface{ background:var(--atai-surface); }
.atai-section--surface-alt{ background:var(--atai-surface-2); }
.atai-section--dark{
	background:var(--atai-neutral);
	color:var(--atai-on-dark);
}
.atai-section--dark h1,
.atai-section--dark h2,
.atai-section--dark h3,
.atai-section--dark h4,
.atai-section--dark h5,
.atai-section--dark h6{ color:var(--atai-white); }
.atai-section--dark p{ color:var(--atai-on-dark); }

@media (max-width:767px){
	.atai-section{ padding:64px 0; }
	.atai-section--sm{ padding:48px 0; }
	.atai-section--lg{ padding:80px 0; }
}


/* 4. EYEBROWS + ACCENT LINES ================================================ */

/* Apply to a Heading widget set to <span> or <p>. */
.atai-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:12px;
	font:600 14px/1.4 var(--atai-font-body);
	text-transform:uppercase;
	letter-spacing:0.12em;
	color:var(--atai-secondary);
	margin-bottom:16px;
}
.atai-eyebrow::before{
	content:"";
	display:inline-block;
	width:32px;
	height:2px;
	background:currentColor;
}
.atai-section--dark .atai-eyebrow{ color:var(--atai-secondary-soft); }


/* 5. BUTTONS ================================================================
   Apply to Elementor's Button widget (Advanced → CSS Classes).
   Also apply to link widgets by adding these classes.
   ========================================================================== */

.atai-btn,
.atai-btn-primary a.elementor-button,
.atai-btn-secondary a.elementor-button,
.atai-btn-ghost a.elementor-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:48px;
	padding:12px 28px;
	border-radius:var(--atai-radius-md);
	font:600 15px/1.4 var(--atai-font-body);
	letter-spacing:0.02em;
	text-decoration:none;
	transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
	cursor:pointer;
	border:2px solid transparent;
	white-space:nowrap;
}

/* Primary — Forest Emerald fill */
.atai-btn-primary a.elementor-button,
.atai-btn.atai-btn--primary{
	background:var(--atai-primary);
	color:var(--atai-white);
}
.atai-btn-primary a.elementor-button:hover,
.atai-btn.atai-btn--primary:hover{
	background:var(--atai-primary-deep);
	color:var(--atai-white);
	transform:translateY(-2px);
	box-shadow:var(--atai-shadow-2);
}

/* Secondary — outlined green */
.atai-btn-secondary a.elementor-button,
.atai-btn.atai-btn--secondary{
	background:transparent;
	color:var(--atai-primary);
	border-color:var(--atai-primary);
}
.atai-btn-secondary a.elementor-button:hover,
.atai-btn.atai-btn--secondary:hover{
	background:var(--atai-primary);
	color:var(--atai-white);
}

/* Ghost — outlined rust (accent CTA) */
.atai-btn-ghost a.elementor-button,
.atai-btn.atai-btn--ghost{
	background:transparent;
	color:var(--atai-secondary);
	border-color:var(--atai-secondary);
}
.atai-btn-ghost a.elementor-button:hover,
.atai-btn.atai-btn--ghost:hover{
	background:var(--atai-secondary);
	color:var(--atai-white);
}

/* On-dark variants — for hero + dark sections */
.atai-section--dark .atai-btn-secondary a.elementor-button,
.atai-section--dark .atai-btn.atai-btn--secondary{
	color:var(--atai-white);
	border-color:var(--atai-white);
}
.atai-section--dark .atai-btn-secondary a.elementor-button:hover,
.atai-section--dark .atai-btn.atai-btn--secondary:hover{
	background:var(--atai-white);
	color:var(--atai-neutral);
}


/* 6. BENTO CARDS ============================================================
   Apply to Elementor Section, Column, or Container.
   The card is the base; --dark / --featured / --outlined are modifiers.
   ========================================================================== */

.atai-card{
	background:var(--atai-white);
	border:1px solid var(--atai-outline);
	border-radius:var(--atai-radius-lg);
	padding:32px;
	transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	position:relative;
}
.atai-card:hover{
	transform:translateY(-4px);
	box-shadow:var(--atai-shadow-2);
	border-color:var(--atai-primary);
}

.atai-card--dark{
	background:var(--atai-neutral);
	color:var(--atai-on-dark);
	border-color:var(--atai-neutral-2);
}
.atai-card--dark:hover{ border-color:var(--atai-primary); }
.atai-card--dark h2,
.atai-card--dark h3,
.atai-card--dark h4{ color:var(--atai-white); }

.atai-card--featured{
	background:linear-gradient(135deg, var(--atai-primary) 0%, var(--atai-primary-deep) 100%);
	color:var(--atai-white);
	border-color:transparent;
}
.atai-card--featured h2,
.atai-card--featured h3,
.atai-card--featured h4{ color:var(--atai-white); }
.atai-card--featured p{ color:rgba(255,255,255,.92); }
.atai-card--featured:hover{ transform:translateY(-4px); box-shadow:var(--atai-shadow-3); }

.atai-card--outlined{
	background:transparent;
	border:2px solid var(--atai-outline);
}

/* Compact card padding for tight grids */
.atai-card--compact{ padding:24px; }

@media (max-width:767px){
	.atai-card{ padding:24px; }
	.atai-card--compact{ padding:20px; }
}


/* 7. PRINCIPLE / FEATURE ICON BLOCKS ======================================== */

/* Apply to Icon Box widget or a nested container.
   Structure inside card:
     .atai-card
       [icon in a rounded tinted square]
       h3
       p
*/
.atai-icon-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:56px;
	height:56px;
	border-radius:var(--atai-radius-md);
	background:rgba(14,107,78,.08);
	color:var(--atai-primary);
	margin-bottom:20px;
}
.atai-icon-badge svg,
.atai-icon-badge i{
	width:28px;
	height:28px;
	font-size:24px;
}
.atai-icon-badge--secondary{
	background:rgba(185,79,21,.10);
	color:var(--atai-secondary);
}
.atai-icon-badge--dark{
	background:rgba(255,255,255,.08);
	color:var(--atai-white);
}


/* 8. CHIPS + TAGS =========================================================== */

.atai-chip{
	display:inline-flex;
	align-items:center;
	padding:6px 14px;
	border-radius:var(--atai-radius-pill);
	background:var(--atai-surface-2);
	color:var(--atai-primary-deep);
	font:600 12px/1.4 var(--atai-font-body);
	letter-spacing:0.06em;
	text-transform:uppercase;
}
.atai-chip--dark{
	background:var(--atai-primary);
	color:var(--atai-white);
}
.atai-chip--outline{
	background:transparent;
	border:1px solid var(--atai-outline);
	color:var(--atai-ink-soft);
}
.atai-chip--secondary{
	background:rgba(185,79,21,.10);
	color:var(--atai-secondary-strong);
}


/* 9. STAT BLOCKS ============================================================ */

.atai-stat{ display:flex; flex-direction:column; gap:8px; }
.atai-stat__number{
	font:800 64px/1 var(--atai-font-head);
	letter-spacing:-0.02em;
	color:var(--atai-primary);
	font-variant-numeric:tabular-nums;
}
.atai-stat__label{
	font:600 13px/1.4 var(--atai-font-body);
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:var(--atai-ink-soft);
}
.atai-section--dark .atai-stat__number{ color:var(--atai-secondary-soft); }
.atai-section--dark .atai-stat__label{ color:var(--atai-on-dark); }


/* 10. UTILITY BAR + MARQUEE ================================================= */

/* Top strip above header — apply to a full-width Elementor Section. */
.atai-utility-bar{
	background:var(--atai-neutral);
	color:var(--atai-on-dark);
	padding:8px 0;
	font-size:13px;
	font-weight:500;
}
.atai-utility-bar a{ color:var(--atai-on-dark); text-decoration:none; }
.atai-utility-bar a:hover{ color:var(--atai-secondary-soft); }

/* Marquee — apply to an Elementor Container with a single Heading child.
   Behavior JS clones the child and scrolls it. Content editor sets the text. */
.atai-marquee{
	overflow:hidden;
	position:relative;
	background:var(--atai-primary);
	color:var(--atai-white);
	padding:14px 0;
	white-space:nowrap;
	mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.atai-marquee__track{
	display:inline-flex;
	gap:48px;
	animation:atai-marquee 40s linear infinite;
	font:700 16px/1.4 var(--atai-font-head);
	letter-spacing:0.04em;
	text-transform:uppercase;
}
.atai-marquee__track > *{ flex:0 0 auto; }
.atai-marquee--dark{ background:var(--atai-neutral); }
.atai-marquee--secondary{ background:var(--atai-secondary); }
@keyframes atai-marquee{
	from{ transform:translateX(0); }
	to  { transform:translateX(-50%); }
}


/* 11. FORM INPUTS (Elementor Form widget skin) ============================== */

/* Apply .atai-form on the Form widget's Advanced → CSS Classes.
   This restyles every input, textarea, select the widget renders. */
.atai-form .elementor-field-group{ margin-bottom:20px; }

.atai-form .elementor-field-group > label{
	display:block;
	font:600 14px/1.4 var(--atai-font-body);
	color:var(--atai-neutral);
	margin-bottom:8px;
	letter-spacing:0.02em;
}

.atai-form input[type="text"],
.atai-form input[type="email"],
.atai-form input[type="tel"],
.atai-form input[type="url"],
.atai-form input[type="number"],
.atai-form select,
.atai-form textarea{
	width:100%;
	padding:14px 16px;
	min-height:52px;
	background:var(--atai-white);
	border:1.5px solid var(--atai-outline);
	border-radius:var(--atai-radius-md);
	font:400 16px/1.5 var(--atai-font-body);
	color:var(--atai-ink);
	transition:border-color .18s ease, box-shadow .18s ease;
}
.atai-form textarea{ min-height:140px; resize:vertical; }

.atai-form input:focus,
.atai-form select:focus,
.atai-form textarea:focus{
	outline:none;
	border-color:var(--atai-primary);
	box-shadow:0 0 0 4px rgba(14,107,78,.12);
}

.atai-form .elementor-field-group.elementor-field-type-submit button{
	background:var(--atai-primary);
	color:var(--atai-white);
	border:none;
	min-height:52px;
	padding:14px 32px;
	border-radius:var(--atai-radius-md);
	font:600 15px/1.4 var(--atai-font-body);
	letter-spacing:0.02em;
	cursor:pointer;
	transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.atai-form .elementor-field-group.elementor-field-type-submit button:hover{
	background:var(--atai-primary-deep);
	transform:translateY(-2px);
	box-shadow:var(--atai-shadow-2);
}

/* Error / required indicator */
.atai-form .elementor-field-required label:after{
	content:" *";
	color:var(--atai-secondary);
}
.atai-form .elementor-message.elementor-message-danger{
	background:rgba(186,26,26,.08);
	color:var(--atai-error);
	border:1px solid var(--atai-error);
	border-radius:var(--atai-radius-md);
	padding:12px 16px;
	margin-top:12px;
}


/* 12. HERO PATTERNS ========================================================= */

/* Apply .atai-hero to the Elementor Section holding the page hero.
   Modifiers:
     .atai-hero--dark — dark overlay pattern (used on Home, About, Services, Contact)
     .atai-hero--overlay — image background with a dark gradient overlay
*/
.atai-hero{
	min-height:520px;
	display:flex;
	align-items:center;
	padding:120px 0 96px;
	position:relative;
}
.atai-hero--dark{
	background:var(--atai-neutral);
	color:var(--atai-on-dark);
}
.atai-hero--dark h1,
.atai-hero--dark h2{ color:var(--atai-white); }
.atai-hero--dark p{ color:var(--atai-on-dark); }

.atai-hero--overlay::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(135deg, rgba(23,27,34,.85) 0%, rgba(23,27,34,.55) 100%);
	pointer-events:none;
	z-index:1;
}
.atai-hero--overlay > .e-con-inner,
.atai-hero--overlay > .elementor-container{ position:relative; z-index:2; }

.atai-hero__title{
	font:800 clamp(36px, 6vw, 72px)/1.05 var(--atai-font-head);
	letter-spacing:-0.02em;
	margin:0 0 24px;
}
.atai-hero__lede{
	font:400 clamp(16px, 1.3vw, 20px)/1.6 var(--atai-font-body);
	max-width:680px;
	margin:0 0 32px;
}
.atai-hero--dark .atai-hero__title{ color:var(--atai-white); }

@media (max-width:767px){
	.atai-hero{ min-height:auto; padding:80px 0 64px; }
}


/* 13. CONTACT PANEL ========================================================= */

/* Dark "Get in Touch" panel. Apply to an Elementor Container. */
.atai-contact-panel{
	background:var(--atai-neutral);
	color:var(--atai-on-dark);
	border-radius:var(--atai-radius-lg);
	padding:40px;
}
.atai-contact-panel h2,
.atai-contact-panel h3{ color:var(--atai-white); }

/* Individual info row inside the panel — apply to Icon Box widget */
.atai-contact-panel .atai-info-row{
	display:flex;
	gap:16px;
	padding:16px 0;
	border-bottom:1px solid var(--atai-neutral-2);
}
.atai-contact-panel .atai-info-row:last-child{ border-bottom:none; }


/* 14. LEGAL / PROSE PAGES =================================================== */

/* Apply .atai-prose to the Elementor Text Editor widget on legal pages.
   Provides comfortable reading measure + heading hierarchy. */
.atai-prose{
	max-width:720px;
	margin:0 auto;
	font:400 17px/1.7 var(--atai-font-body);
	color:var(--atai-ink);
}
.atai-prose h2{
	font:700 32px/1.25 var(--atai-font-head);
	margin:48px 0 16px;
	color:var(--atai-neutral);
}
.atai-prose h3{
	font:700 22px/1.3 var(--atai-font-head);
	margin:32px 0 12px;
	color:var(--atai-neutral);
}
.atai-prose p{ margin:0 0 18px; }
.atai-prose ul,
.atai-prose ol{ margin:0 0 18px 24px; }
.atai-prose li{ margin-bottom:8px; }
.atai-prose a{
	color:var(--atai-primary);
	text-decoration:underline;
	text-underline-offset:3px;
}


/* 15. ACCESSIBILITY HELPERS + REDUCED MOTION ================================ */

.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;
}

/* Reveal helpers for atai-behaviors.js */
[data-atai-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
[data-atai-reveal].is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
	*,
	*::before,
	*::after{
		animation-duration:.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
		scroll-behavior:auto !important;
	}
	[data-atai-reveal]{ opacity:1 !important; transform:none !important; }
	.atai-marquee__track{ animation:none !important; }
}


/* 16. LAYOUT HELPERS (small utilities editors reach for often) ============== */

.atai-container{
	max-width:var(--atai-container);
	margin:0 auto;
	padding:0 var(--atai-margin-desktop);
}
@media (max-width:767px){
	.atai-container{ padding:0 var(--atai-margin-mobile); }
}

.atai-text-center{ text-align:center; }
.atai-mb-0{ margin-bottom:0 !important; }
.atai-mb-sm{ margin-bottom:12px !important; }
.atai-mb-md{ margin-bottom:24px !important; }
.atai-mb-lg{ margin-bottom:48px !important; }


/* 17. HEADER + FOOTER BASE (styled fully by atai-mobile-header plugin) ====== */
/* Just enough here so the primary header nav looks branded before the
   mobile-header plugin loads its off-canvas styles. */

.atai-header{
	background:var(--atai-white);
	border-bottom:1px solid var(--atai-outline);
	position:sticky;
	top:0;
	z-index:100;
	transition:box-shadow .2s ease;
}
.atai-header.is-scrolled{ box-shadow:var(--atai-shadow-1); }

/* Primary nav links styled to match Stitch — inline underline on active/current */
.atai-header .menu-item a{
	color:var(--atai-neutral);
	font:500 15px/1.4 var(--atai-font-body);
	text-decoration:none;
	padding:8px 4px;
	position:relative;
	transition:color .18s ease;
}
.atai-header .menu-item a:hover,
.atai-header .menu-item.current-menu-item a{
	color:var(--atai-primary);
}
.atai-header .menu-item.current-menu-item a::after{
	content:"";
	position:absolute;
	left:4px; right:4px; bottom:2px;
	height:2px;
	background:var(--atai-primary);
}

/* Footer base — dark, spacious */
.atai-footer{
	background:var(--atai-neutral);
	color:var(--atai-on-dark);
	padding:64px 0 32px;
}
.atai-footer h4{
	color:var(--atai-white);
	font:700 16px/1.3 var(--atai-font-head);
	margin:0 0 20px;
	letter-spacing:0.02em;
}
.atai-footer a{
	color:var(--atai-on-dark);
	text-decoration:none;
	transition:color .18s ease;
}
.atai-footer a:hover{ color:var(--atai-secondary-soft); }
.atai-footer__legal{
	border-top:1px solid var(--atai-neutral-2);
	margin-top:48px;
	padding-top:24px;
	display:flex;
	justify-content:space-between;
	gap:24px;
	flex-wrap:wrap;
	font-size:13px;
	color:var(--atai-on-dark-muted);
}


/* ==========================================================================
   18. HEADER + FOOTER (rendered by child theme's header.php / footer.php)
   ========================================================================== */


/* ---- HEADER ---- */
.atai-header{
	background:var(--atai-white);
	border-bottom:1px solid var(--atai-outline);
	position:sticky;
	top:0;
	z-index:100;
	transition:box-shadow .2s ease;
}
.atai-header__inner{
	max-width:var(--atai-container);
	margin:0 auto;
	padding:0 var(--atai-margin-desktop);
	height:var(--atai-header-h);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:32px;
}
.atai-header__brand{ display:flex; align-items:center; }
.atai-header__brand img,
.atai-header__brand .custom-logo-link img{
	max-height:48px; width:auto; display:block;
}
.atai-header__wordmark{
	font:800 24px/1 var(--atai-font-head);
	color:var(--atai-primary);
	text-decoration:none;
	letter-spacing:-0.01em;
}
.atai-header__nav{ flex:1; }
.atai-header__menu{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	gap:36px;
	justify-content:center;
}
.atai-header__menu > li{ position:relative; }
.atai-header__menu > li > a{
	display:inline-block;
	color:var(--atai-neutral);
	font:500 15px/1.4 var(--atai-font-body);
	text-decoration:none;
	padding:8px 2px;
	letter-spacing:0.01em;
	transition:color .18s ease;
}
.atai-header__menu > li > a:hover,
.atai-header__menu > li.current-menu-item > a{ color:var(--atai-primary); }
.atai-header__menu > li.current-menu-item > a::after{
	content:"";
	position:absolute;
	left:2px; right:2px; bottom:0;
	height:2px;
	background:var(--atai-primary);
}
.atai-header__cta{
	display:flex; align-items:center; gap:24px;
}
.atai-header__phone{
	display:inline-flex; align-items:center; gap:8px;
	color:var(--atai-neutral);
	font:600 14px/1.4 var(--atai-font-body);
	text-decoration:none;
	transition:color .18s ease;
}
.atai-header__phone:hover{ color:var(--atai-primary); }
.atai-header__button{
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--atai-primary);
	color:var(--atai-white);
	padding:12px 24px;
	border-radius:var(--atai-radius-md);
	font:600 14px/1.4 var(--atai-font-body);
	text-decoration:none;
	letter-spacing:0.02em;
	transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.atai-header__button:hover{
	background:var(--atai-primary-deep);
	color:var(--atai-white);
	transform:translateY(-1px);
	box-shadow:var(--atai-shadow-2);
}

.atai-main{ min-height:60vh; outline:none; }
.atai-main:focus{ outline:none; }


/* ---- FOOTER ---- */
.atai-footer{
	background:var(--atai-neutral);
	color:var(--atai-on-dark);
	padding:64px 0 24px;
}
.atai-footer__inner{
	max-width:var(--atai-container);
	margin:0 auto;
	padding:0 var(--atai-margin-desktop);
}
.atai-footer__cols{
	display:grid;
	grid-template-columns:2fr 1fr 1fr 1.4fr;
	gap:48px;
	margin-bottom:48px;
}
.atai-footer__logo{
	font:800 24px/1 var(--atai-font-head);
	color:var(--atai-white);
	margin-bottom:16px;
	letter-spacing:-0.01em;
}
.atai-footer__lede{
	color:var(--atai-on-dark);
	font:400 14px/1.65 var(--atai-font-body);
	max-width:320px;
	margin:0;
}
.atai-footer h4{
	color:var(--atai-white);
	font:700 15px/1.3 var(--atai-font-head);
	margin:0 0 16px;
	letter-spacing:0.02em;
	text-transform:uppercase;
}
.atai-footer__menu,
.atai-footer__legal-menu{
	list-style:none;
	margin:0; padding:0;
}
.atai-footer__menu li{ margin-bottom:10px; }
.atai-footer__menu a,
.atai-footer__contact a{
	color:var(--atai-on-dark);
	text-decoration:none;
	font-size:14px;
	transition:color .18s ease;
}
.atai-footer__menu a:hover,
.atai-footer__contact a:hover,
.atai-footer__legal-menu a:hover{ color:var(--atai-secondary-soft); }
.atai-footer__contact{
	font-style:normal;
	line-height:1.7;
	font-size:14px;
	color:var(--atai-on-dark);
}
.atai-footer__legal{
	border-top:1px solid var(--atai-neutral-2);
	padding-top:24px;
	display:flex;
	justify-content:space-between;
	gap:24px;
	flex-wrap:wrap;
	font-size:13px;
	color:var(--atai-on-dark-muted);
}
.atai-footer__copy{ max-width:70%; }
.atai-footer__licence{ opacity:.75; }
.atai-footer__legal-menu{
	display:flex;
	gap:24px;
}
.atai-footer__legal-menu a{
	color:var(--atai-on-dark-muted);
	text-decoration:none;
	font-size:13px;
	transition:color .18s ease;
}

@media (max-width:991px){
	.atai-footer__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
	.atai-header{ display:none; }
	.atai-footer{ padding:48px 0 20px; }
	.atai-footer__inner{ padding:0 var(--atai-margin-mobile); }
	.atai-footer__cols{
		grid-template-columns:1fr;
		gap:32px;
		margin-bottom:32px;
	}
	.atai-footer__legal{
		flex-direction:column;
		gap:12px;
	}
	.atai-footer__copy{ max-width:100%; }
	.atai-footer__legal-menu{
		flex-wrap:wrap;
		gap:16px;
	}
}