/*
URL: https://github.com/jensimmons/cssremedy
*/
/* @docs
label: Core Remedies
version: 0.1.0-beta.2

note: |
  These remedies are recommended
  as a starter for any project.

category: file
*/
/* @docs
label: Box Sizing

note: |
  Use border-box by default, globally.

category: global
*/
*,
::before,
::after {
  box-sizing: border-box;
}

/* @docs
label: Line Sizing

note: |
  Consistent line-spacing,
  even when inline elements have different line-heights.

links:
  - https://drafts.csswg.org/css-inline-3/#line-sizing-property

category: global
*/
html {
  line-sizing: normal;
}

/* @docs
label: Body Margins

note: |
  Remove the tiny space around the edge of the page.

category: global
*/
body {
  margin: 0;
}

/* @docs
label: Hidden Attribute

note: |
  Maintain `hidden` behaviour when overriding `display` values.

  category: global
*/
[hidden] {
  display: none;
}

/* @docs
label: Heading Sizes

note: |
  Switch to rem units for headings

category: typography
*/
h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

/* @docs
label: H1 Margins

note: |
  Keep h1 margins consistent, even when nested.

category: typography
*/
h1 {
  margin: 0.67em 0;
}

/* @docs
label: Pre Wrapping

note: |
  Overflow by default is bad...

category: typography
*/
pre {
  white-space: pre-wrap;
}

/* @docs
label: Horizontal Rule

note: |
  1. Solid, thin horizontal rules
  2. Remove Firefox `color: gray`
  3. Remove default `1px` height, and common `overflow: hidden`

category: typography
*/
hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}

/* @docs
label: Responsive Embeds

note: |
  1. Block display is usually what we want
  2. The `vertical-align` removes strange space-below in case authors overwrite the display value
  3. Responsive by default
  4. Audio without `[controls]` remains hidden by default

category: embedded elements
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

audio:not([controls]) {
  display: none;
}

/* @docs
label: Responsive Images

note: |
  These new elements display inline by default,
  but that's not the expected behavior for either one.
  This can interfere with proper layout and aspect-ratio handling.

  1. Remove the unnecessary wrapping `picture`, while maintaining contents
  2. Source elements have nothing to display, so we hide them entirely

category: embedded elements
*/
picture {
  display: contents;
}

source {
  display: none;
}

/* @docs
label: Aspect Ratios

note: |
  Maintain intrinsic aspect ratios when `max-width` is applied.
  `iframe`, `embed`, and `object` are also embedded,
  but have no intrinsic ratio,
  so their `height` needs to be set explicitly.

category: embedded elements
*/
img,
svg,
video,
canvas {
  height: auto;
}

/* @docs
label: Audio Width

note: |
  There is no good reason elements default to 300px,
  and audio files are unlikely to come with a width attribute.

category: embedded elements
*/
audio {
  width: 100%;
}

/* @docs
label: Image Borders

note: |
  Remove the border on images inside links in IE 10 and earlier.

category: legacy browsers
*/
img {
  border-style: none;
}

/* @docs
label: SVG Overflow

note: |
  Hide the overflow in IE 10 and earlier.

category: legacy browsers
*/
svg {
  overflow: hidden;
}

/* @docs
label: HTML5 Elements

note: |
  Default block display on HTML5 elements.
  For oldIE to apply this styling one needs to add some JS as well (i.e. `document.createElement("main")`)

links:
  - https://www.sitepoint.com/html5-older-browsers-and-the-shiv/

category: legacy browsers
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

/* @docs
label: Checkbox & Radio Inputs

note: |
  1. Add the correct box sizing in IE 10
  2. Remove the padding in IE 10

category: legacy browsers
*/
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

:where(html) {
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507;
  --stone-0: #f8fafb;
  --stone-1: #f2f4f6;
  --stone-2: #ebedef;
  --stone-3: #e0e4e5;
  --stone-4: #d1d6d8;
  --stone-5: #b1b6b9;
  --stone-6: #979b9d;
  --stone-7: #7e8282;
  --stone-8: #666968;
  --stone-9: #50514f;
  --stone-10: #3a3a37;
  --stone-11: #252521;
  --stone-12: #121210;
  --red-0: #fff5f5;
  --red-1: #ffe3e3;
  --red-2: #ffc9c9;
  --red-3: #ffa8a8;
  --red-4: #ff8787;
  --red-5: #ff6b6b;
  --red-6: #fa5252;
  --red-7: #f03e3e;
  --red-8: #e03131;
  --red-9: #c92a2a;
  --red-10: #b02525;
  --red-11: #962020;
  --red-12: #7d1a1a;
  --pink-0: #fff0f6;
  --pink-1: #ffdeeb;
  --pink-2: #fcc2d7;
  --pink-3: #faa2c1;
  --pink-4: #f783ac;
  --pink-5: #f06595;
  --pink-6: #e64980;
  --pink-7: #d6336c;
  --pink-8: #c2255c;
  --pink-9: #a61e4d;
  --pink-10: #8c1941;
  --pink-11: #731536;
  --pink-12: #59102a;
  --purple-0: #f8f0fc;
  --purple-1: #f3d9fa;
  --purple-2: #eebefa;
  --purple-3: #e599f7;
  --purple-4: #da77f2;
  --purple-5: #cc5de8;
  --purple-6: #be4bdb;
  --purple-7: #ae3ec9;
  --purple-8: #9c36b5;
  --purple-9: #862e9c;
  --purple-10: #702682;
  --purple-11: #5a1e69;
  --purple-12: #44174f;
  --violet-0: #f3f0ff;
  --violet-1: #e5dbff;
  --violet-2: #d0bfff;
  --violet-3: #b197fc;
  --violet-4: #9775fa;
  --violet-5: #845ef7;
  --violet-6: #7950f2;
  --violet-7: #7048e8;
  --violet-8: #6741d9;
  --violet-9: #5f3dc4;
  --violet-10: #5235ab;
  --violet-11: #462d91;
  --violet-12: #3a2578;
  --indigo-0: #edf2ff;
  --indigo-1: #dbe4ff;
  --indigo-2: #bac8ff;
  --indigo-3: #91a7ff;
  --indigo-4: #748ffc;
  --indigo-5: #5c7cfa;
  --indigo-6: #4c6ef5;
  --indigo-7: #4263eb;
  --indigo-8: #3b5bdb;
  --indigo-9: #364fc7;
  --indigo-10: #2f44ad;
  --indigo-11: #283a94;
  --indigo-12: #21307a;
  --blue-0: #e7f5ff;
  --blue-1: #d0ebff;
  --blue-2: #a5d8ff;
  --blue-3: #74c0fc;
  --blue-4: #4dabf7;
  --blue-5: #339af0;
  --blue-6: #228be6;
  --blue-7: #1c7ed6;
  --blue-8: #1971c2;
  --blue-9: #1864ab;
  --blue-10: #145591;
  --blue-11: #114678;
  --blue-12: #0d375e;
  --cyan-0: #e3fafc;
  --cyan-1: #c5f6fa;
  --cyan-2: #99e9f2;
  --cyan-3: #66d9e8;
  --cyan-4: #3bc9db;
  --cyan-5: #22b8cf;
  --cyan-6: #15aabf;
  --cyan-7: #1098ad;
  --cyan-8: #0c8599;
  --cyan-9: #0b7285;
  --cyan-10: #095c6b;
  --cyan-11: #074652;
  --cyan-12: #053038;
  --teal-0: #e6fcf5;
  --teal-1: #c3fae8;
  --teal-2: #96f2d7;
  --teal-3: #63e6be;
  --teal-4: #38d9a9;
  --teal-5: #20c997;
  --teal-6: #12b886;
  --teal-7: #0ca678;
  --teal-8: #099268;
  --teal-9: #087f5b;
  --teal-10: #066649;
  --teal-11: #054d37;
  --teal-12: #033325;
  --green-0: #ebfbee;
  --green-1: #d3f9d8;
  --green-2: #b2f2bb;
  --green-3: #8ce99a;
  --green-4: #69db7c;
  --green-5: #51cf66;
  --green-6: #40c057;
  --green-7: #37b24d;
  --green-8: #2f9e44;
  --green-9: #2b8a3e;
  --green-10: #237032;
  --green-11: #1b5727;
  --green-12: #133d1b;
  --lime-0: #f4fce3;
  --lime-1: #e9fac8;
  --lime-2: #d8f5a2;
  --lime-3: #c0eb75;
  --lime-4: #a9e34b;
  --lime-5: #94d82d;
  --lime-6: #82c91e;
  --lime-7: #74b816;
  --lime-8: #66a80f;
  --lime-9: #5c940d;
  --lime-10: #4c7a0b;
  --lime-11: #3c6109;
  --lime-12: #2c4706;
  --yellow-0: #fff9db;
  --yellow-1: #fff3bf;
  --yellow-2: #ffec99;
  --yellow-3: #ffe066;
  --yellow-4: #ffd43b;
  --yellow-5: #fcc419;
  --yellow-6: #fab005;
  --yellow-7: #f59f00;
  --yellow-8: #f08c00;
  --yellow-9: #e67700;
  --yellow-10: #b35c00;
  --yellow-11: #804200;
  --yellow-12: #663500;
  --orange-0: #fff4e6;
  --orange-1: #ffe8cc;
  --orange-2: #ffd8a8;
  --orange-3: #ffc078;
  --orange-4: #ffa94d;
  --orange-5: #ff922b;
  --orange-6: #fd7e14;
  --orange-7: #f76707;
  --orange-8: #e8590c;
  --orange-9: #d9480f;
  --orange-10: #bf400d;
  --orange-11: #99330b;
  --orange-12: #802b09;
  --choco-0: #fff8dc;
  --choco-1: #fce1bc;
  --choco-2: #f7ca9e;
  --choco-3: #f1b280;
  --choco-4: #e99b62;
  --choco-5: #df8545;
  --choco-6: #d46e25;
  --choco-7: #bd5f1b;
  --choco-8: #a45117;
  --choco-9: #8a4513;
  --choco-10: #703a13;
  --choco-11: #572f12;
  --choco-12: #3d210d;
  --brown-0: #faf4eb;
  --brown-1: #ede0d1;
  --brown-2: #e0cab7;
  --brown-3: #d3b79e;
  --brown-4: #c5a285;
  --brown-5: #b78f6d;
  --brown-6: #a87c56;
  --brown-7: #956b47;
  --brown-8: #825b3a;
  --brown-9: #6f4b2d;
  --brown-10: #5e3a21;
  --brown-11: #4e2b15;
  --brown-12: #422412;
  --sand-0: #f8fafb;
  --sand-1: #e6e4dc;
  --sand-2: #d5cfbd;
  --sand-3: #c2b9a0;
  --sand-4: #aea58c;
  --sand-5: #9a9178;
  --sand-6: #867c65;
  --sand-7: #736a53;
  --sand-8: #5f5746;
  --sand-9: #4b4639;
  --sand-10: #38352d;
  --sand-11: #252521;
  --sand-12: #121210;
  --camo-0: #f9fbe7;
  --camo-1: #e8ed9c;
  --camo-2: #d2df4e;
  --camo-3: #c2ce34;
  --camo-4: #b5bb2e;
  --camo-5: #a7a827;
  --camo-6: #999621;
  --camo-7: #8c851c;
  --camo-8: #7e7416;
  --camo-9: #6d6414;
  --camo-10: #5d5411;
  --camo-11: #4d460e;
  --camo-12: #36300a;
  --jungle-0: #ecfeb0;
  --jungle-1: #def39a;
  --jungle-2: #d0e884;
  --jungle-3: #c2dd6e;
  --jungle-4: #b5d15b;
  --jungle-5: #a8c648;
  --jungle-6: #9bbb36;
  --jungle-7: #8fb024;
  --jungle-8: #84a513;
  --jungle-9: #7a9908;
  --jungle-10: #658006;
  --jungle-11: #516605;
  --jungle-12: #3d4d04;
}

:where(html) {
  --font-system-ui: system-ui, sans-serif;
  --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
  --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
  --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
  --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
  --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
  --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
  --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
  --font-monospace-code: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;
  --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
  --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
  --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
  --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
  --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
  --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
  --font-sans: var(--font-system-ui);
  --font-serif: ui-serif, serif;
  --font-mono: var(--font-monospace-code);
  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;
  --font-lineheight-00: .95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;
  --font-letterspacing-0: -.05em;
  --font-letterspacing-1: .025em;
  --font-letterspacing-2: .050em;
  --font-letterspacing-3: .075em;
  --font-letterspacing-4: .150em;
  --font-letterspacing-5: .500em;
  --font-letterspacing-6: .750em;
  --font-letterspacing-7: 1em;
  --font-size-00: .5rem;
  --font-size-0: .75rem;
  --font-size-1: 1rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;
  --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
  --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
  --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
  --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
  --font-size-fluid-4: clamp(2.5rem, 12vw, 4.5rem);
  --font-size-em-fluid-0: clamp(.75em, 2vw, 1em);
  --font-size-em-fluid-1: clamp(1em, 4vw, 1.5em);
  --font-size-em-fluid-2: clamp(1.5em, 6vw, 2.5em);
  --font-size-em-fluid-3: clamp(2em, 9vw, 3.5em);
  --font-size-em-fluid-4: clamp(2.5em, 12vw, 4.5em);
}

:where(html) {
  --size-000: -.5rem;
  --size-00: -.25rem;
  --size-1: .25rem;
  --size-2: .5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;
  --size-px-000: -8px;
  --size-px-00: -4px;
  --size-px-1: 4px;
  --size-px-2: 8px;
  --size-px-3: 16px;
  --size-px-4: 20px;
  --size-px-5: 24px;
  --size-px-6: 28px;
  --size-px-7: 32px;
  --size-px-8: 48px;
  --size-px-9: 64px;
  --size-px-10: 80px;
  --size-px-11: 120px;
  --size-px-12: 160px;
  --size-px-13: 240px;
  --size-px-14: 320px;
  --size-px-15: 480px;
  --size-fluid-1: clamp(.5rem, 1vw, 1rem);
  --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
  --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
  --size-fluid-4: clamp(2rem, 4vw, 3rem);
  --size-fluid-5: clamp(4rem, 5vw, 5rem);
  --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
  --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
  --size-fluid-8: clamp(10rem, 20vw, 15rem);
  --size-fluid-9: clamp(15rem, 30vw, 20rem);
  --size-fluid-10: clamp(20rem, 40vw, 30rem);
  --size-content-1: 20ch;
  --size-content-2: 45ch;
  --size-content-3: 60ch;
  --size-header-1: 20ch;
  --size-header-2: 25ch;
  --size-header-3: 35ch;
  --size-xxs: 240px;
  --size-xs: 360px;
  --size-sm: 480px;
  --size-md: 768px;
  --size-lg: 1024px;
  --size-xl: 1440px;
  --size-xxl: 1920px;
  --size-relative-000: -.5ch;
  --size-relative-00: -.25ch;
  --size-relative-1: .25ch;
  --size-relative-2: .5ch;
  --size-relative-3: 1ch;
  --size-relative-4: 1.25ch;
  --size-relative-5: 1.5ch;
  --size-relative-6: 1.75ch;
  --size-relative-7: 2ch;
  --size-relative-8: 3ch;
  --size-relative-9: 4ch;
  --size-relative-10: 5ch;
  --size-relative-11: 7.5ch;
  --size-relative-12: 10ch;
  --size-relative-13: 15ch;
  --size-relative-14: 20ch;
  --size-relative-15: 30ch;
}

:where(html) {
  --layer-1: 1;
  --layer-2: 2;
  --layer-3: 3;
  --layer-4: 4;
  --layer-5: 5;
  --layer-important: 2147483647;
}

@font-face {
  font-family: "Quicksand-Bold";
  src: url("../../fonts/Quicksand/static/Quicksand-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Quicksand-SemiBold";
  src: url("../../fonts/Quicksand/static/Quicksand-SemiBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Quicksand-Medium";
  src: url("../../fonts/Quicksand/static/Quicksand-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Quicksand-Regular";
  src: url("../../fonts/Quicksand/static/Quicksand-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Quicksand-Light";
  src: url("../fonts/Quicksand/static/Quicksand-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Anton-Regular";
  src: url("../../fonts/Anton/Anton-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ArchivoBlack-Regular";
  src: url("../../fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lora-BoldItalic";
  src: url("../../fonts/Lora/static/Lora-BoldItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lora-SemiBoldItalic";
  src: url("../../fonts/Lora/static/Lora-SemiBoldItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lora-MediumItalic";
  src: url("../../fonts/Lora/static/Lora-MediumItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lora-Italic";
  src: url("../../fonts/Lora/static/Lora-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lora-Bold";
  src: url("../../fonts/Lora/static/Lora-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lora-SemiBold";
  src: url("../../fonts/Lora/static/Lora-SemiBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lora-Medium";
  src: url("../../fonts/Lora/static/Lora-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lora-Regular";
  src: url("../../fonts/Lora/static/Lora-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-BlackItalic";
  src: url("../fonts/Roboto/Roboto-BlackItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-Black";
  src: url("../fonts/Roboto/Roboto-Black.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-BoldItalic";
  src: url("../../fonts/Roboto/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-Bold";
  src: url("../../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-MediumItalic";
  src: url("../../fonts/Roboto/Roboto-MediumItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-Medium";
  src: url("../../fonts/Roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-Italic";
  src: url("../../fonts/Roboto/Roboto-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-Regular";
  src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-LightItalic";
  src: url("../../fonts/Roboto/Roboto-LightItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-Light";
  src: url("../../fonts/Roboto/Roboto-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-ThinItalic";
  src: url("../../fonts/Roboto/Roboto-ThinItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-Thin";
  src: url("../../fonts/Roboto/Roboto-Thin.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/**************************************************************************
 * UTILS *
 ***************************************************************************/
/* Set Display to Flexbox with browser compatible styles. */
/* Set Fluid Font Size */
/* Set hover and focus styles at the same time.*/
:where(html) {
  --_ci-color-black-01: hsl(0, 0%, 15%);
  --_ci-color-pink-01: pink;
  --_ci-color-pink-02: hsl(336, 62%, 57%);
  --_ci-color-purple-01: hsl(262, 100%, 41%);
  --_ci-color-purple-01-a-01: hsla(262, 100%, 41%, 78%);
  --_hero-color-blue-01: hsl(194, 77%, 71%);
  --_hero-color-pink-01: var(--_ci-color-pink-02);
  --_hero-color-mustard-01: hsl(44, 97%, 58%);
  --_hero-color-pink-02: hsl(289, 100%, 96%);
  --_drop-shadow-color: hsl(0, 0%, 0%);
  --_footer-section-menu-height: 80px;
  --_section-container-spacing-x: 2rem;
  --_section-container-spacing-y: 1rem;
  --_breadcrumb-link-color: hsl(194, 75%, 34%);
  --_body-max-width: 1400px;
  --_body-min-width: 350px;
  --_text-max-ch: 75ch;
}

* {
  -webkit-font-smoothing: antialiased;
  font-family: Lora-Regular, sans-serif;
}

html {
  /* Prevent font scaling in landscape while allowing user zoom. */
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

.none {
  display: none !important;
  margin: 0;
  padding: 0;
  height: 0;
  width: 0;
  opacity: 0;
  visibility: hidden !important;
}

.element--touched {
  position: absolute;
}

.header__section > section,
.main__section > section,
.footer__section > section {
  width: 100%;
  display: grid;
  place-items: center;
}
.header__section > section > .section__container,
.main__section > section > .section__container,
.footer__section > section > .section__container {
  width: calc(100% - var(--_section-container-spacing-x) * 2);
  max-width: calc(var(--_body-max-width) - var(--_section-container-spacing-x) * 2);
  height: calc(100% - var(--_section-container-spacing-y) * 2);
  overflow: hidden;
  margin-inline-start: var(--_section-container-spacing-x);
  margin-inline-end: var(--_section-container-spacing-x);
  margin-block-start: var(--_section-container-spacing-y);
  margin-block-end: var(--_section-container-spacing-y);
  padding-inline-start: var(--_section-container-spacing-x);
  padding-inline-end: var(--_section-container-spacing-x);
  padding-block-start: var(--_section-container-spacing-y);
  padding-block-end: var(--_section-container-spacing-y);
}
.header__section > section > .section__container .section__container--title .section__container--title-heading,
.main__section > section > .section__container .section__container--title .section__container--title-heading,
.footer__section > section > .section__container .section__container--title .section__container--title-heading {
  font-family: Quicksand-Bold, sans-serif;
  font-size: clamp(2rem, 10vw, 10rem);
  line-height: 1em;
  margin: 0;
  padding: 0;
}

.drop-shadow {
  -webkit-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -moz-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -o-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -ms-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
}
.drop-shadow--lower {
  -webkit-filter: drop-shadow(0px 2px 4px var(--_drop-shadow-color));
  -moz-filter: drop-shadow(0px 2px 4px var(--_drop-shadow-color));
  -o-filter: drop-shadow(0px 2px 4px var(--_drop-shadow-color));
  -ms-filter: drop-shadow(0px 2px 4px var(--_drop-shadow-color));
  filter: drop-shadow(0px 2px 4px var(--_drop-shadow-color));
}

.ruled-paper {
  --rp-bg-color: hsl(0, 0%, 94%);
  --rp-margin-width: 2.5rem;
  --rp-margin-line-color: hsl(6, 78%, 66%);
  --rp-ruling-line-color: hsl(204, 69%, 72%);
  width: 100%;
  height: 100%;
  background-color: var(--rp-bg-color);
  display: flex;
  flex-direction: column;
}
.ruled-paper:focus-within {
  --rp-bg-color: hsl(0, 0%, 100%);
}
.ruled-paper .ruled-paper__header {
  background-image: linear-gradient(90deg, transparent var(--rp-margin-width), var(--rp-margin-line-color) var(--rp-margin-width), var(--rp-margin-line-color) calc(var(--rp-margin-width) + 2px), transparent calc(var(--rp-margin-width) + 2px));
  background-size: 100% 1.2em;
  flex-grow: 1;
  padding-inline: 1em 1em;
  height: 4em;
  display: flex;
  flex-direction: column;
  place-content: end;
  place-items: end;
}
.ruled-paper .ruled-paper__body {
  background-image: linear-gradient(90deg, transparent var(--rp-margin-width), var(--rp-margin-line-color) var(--rp-margin-width), var(--rp-margin-line-color) calc(var(--rp-margin-width) + 2px), transparent calc(var(--rp-margin-width) + 2px)), linear-gradient(var(--rp-ruling-line-color) 0.1em, transparent 0.1em);
  background-size: 100% 1.2em;
  flex-grow: 8;
  padding-block: 0.2em 1.5em;
  padding-inline: calc(var(--rp-margin-width) + 1em) 1em;
  line-height: 2.2;
}

.effect__paper,
.effect__paper--before::before,
.effect__paper--after::after {
  background-image: url("../../assets/img/abstracts/img-noise-paper-1200x150.png");
  background-repeat: repeat;
}

.speech-bubble {
  --_bubble-tick-size: 50px;
  position: relative;
  background: hsl(0, 0%, 100%);
  border-radius: 1em;
  border: solid calc(var(--_bubble-tick-size) / 10) black;
  padding-inline-start: 1.25rem;
  padding-inline-end: 1.25rem;
  padding-block-start: 1.25rem;
  padding-block-end: 1.25rem;
  filter: drop-shadow(-4px -4px 0px hsla(45, 53%, 50%, 0.78)) drop-shadow(4px 4px 0px hsla(46, 47%, 30%, 0.78));
}
.speech-bubble:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.speech-bubble:not([disabled]):hover, .speech-bubble:not([disabled]):focus {
  filter: drop-shadow(-2px -2px 0px hsla(45, 53%, 50%, 0.52)) drop-shadow(2px 2px 0px hsla(46, 47%, 30%, 0.52));
  cursor: pointer;
}
.speech-bubble:before, .speech-bubble:after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--_bubble-tick-size));
  left: 50%;
  width: calc(var(--_bubble-tick-size));
  height: calc(var(--_bubble-tick-size));
}
.speech-bubble:before {
  background: hsl(0, 0%, 0%);
  clip-path: polygon(35% 0, 10% 75%, 100% 0);
}
.speech-bubble:after {
  background: hsl(0, 0%, 100%);
  clip-path: polygon(50% 0, 25% 50%, 85% 0);
}

.speech-bubble--quote {
  font-family: Quicksand-Bold, sans-serif;
  float: right;
  margin: 2rem;
  max-width: 25ch;
  filter: drop-shadow(-4px -4px 0px hsla(0, 0%, 75%, 0.78)) drop-shadow(4px 4px 0px hsla(0, 0%, 50%, 0.78));
}
.speech-bubble--quote:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.speech-bubble--quote:not([disabled]):hover, .speech-bubble--quote:not([disabled]):focus {
  filter: drop-shadow(-2px -2px 0px hsla(0, 0%, 75%, 0.52)) drop-shadow(2px 2px 0px hsla(0, 0%, 50%, 0.52));
  cursor: pointer;
}
.speech-bubble--quote.speech-bubble--static {
  cursor: default;
  filter: drop-shadow(-2px -2px 0px hsla(0, 0%, 75%, 0.52)) drop-shadow(2px 2px 0px hsla(0, 0%, 50%, 0.52));
}
.speech-bubble--quote.speech-bubble--static:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.speech-bubble--quote.speech-bubble--static:not([disabled]):hover, .speech-bubble--quote.speech-bubble--static:not([disabled]):focus {
  filter: drop-shadow(-2px -2px 0px hsla(0, 0%, 75%, 0.52)) drop-shadow(2px 2px 0px hsla(0, 0%, 50%, 0.52));
  cursor: pointer;
}

.word-phone__screen--msg {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1em;
  place-items: end;
}

.word-phone__screen--msg-od:before {
  content: "";
  background-image: url("../../assets/img/abstracts/logo/logo-icon-shadow-01.svg");
  background-position: center;
  background-repeat: no-repeat;
  width: 2em;
  height: 2em;
  background-color: var(--_ci-color-pink-02);
  border-radius: 50%;
  border: solid 0.17em hsl(0, 0%, 100%);
  display: block;
  -webkit-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
  -moz-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
  -o-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
  -ms-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
  filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
}
.word-phone__screen--msg-od .speech-bubble__msg {
  --_bubble-msg-color-bg: hsl(0, 0%, 100%);
}
.word-phone__screen--msg-od .speech-bubble__msg:before {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--_bubble-msg-tick-size) / 6);
  left: calc(-1 * var(--_bubble-msg-tick-size));
  width: calc(var(--_bubble-msg-tick-size));
  aspect-ratio: 1/1;
  background: var(--_bubble-msg-color-bg);
  clip-path: polygon(50% 0, 25% 50%, 85% 0);
  transform: rotate(-90deg) scaleY(-1);
  transform-origin: left bottom;
}
.word-phone__screen--msg-od .speech-bubble__msg span::before {
  content: "Owen & Davis";
  color: hsl(0, 100%, 25%);
}

.word-phone__screen--msg-sg {
  align-self: end;
}
.word-phone__screen--msg-sg .speech-bubble__msg {
  margin-inline-end: 1em;
}
.word-phone__screen--msg-sg .speech-bubble__msg:after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--_bubble-msg-tick-size) / 6);
  right: calc(-1 * var(--_bubble-msg-tick-size));
  width: calc(var(--_bubble-msg-tick-size));
  aspect-ratio: 1/1;
  background: var(--_bubble-msg-color-bg);
  clip-path: polygon(50% 0, 25% 50%, 85% 0);
  transform: rotate(-90deg);
}

.speech-bubble__msg {
  --_bubble-msg-tick-size: 1.5em;
  --_bubble-msg-color-bg: hsl(88, 73%, 83%);
  position: relative;
  background: var(--_bubble-msg-color-bg);
  border-radius: 0.25em;
  width: fit-content;
  max-width: 30ch;
  padding-inline-start: 0.5em;
  padding-inline-end: 0.5em;
  padding-block-start: 0.5em;
  padding-block-end: 0.5em;
  -webkit-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
  -moz-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
  -o-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
  -ms-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
  filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
}
.speech-bubble__msg span {
  font-family: Quicksand-Bold, sans-serif;
  font-size: var(--font-size-em-fluid-0);
  font-weight: normal;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

[data-scroll-to-top] {
  cursor: pointer;
}

.scrollbars--hidden {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.scrollbars--hidden::-webkit-scrollbar {
  display: none;
}

form fieldset {
  border: none;
  display: flex;
  flex-direction: column;
  gap: 19px 0;
  margin: 0;
  padding: 0;
}
form fieldset > div {
  display: grid;
  grid-template-columns: 7em 1fr;
}
form fieldset > div:is(.form__cta) {
  grid-template-columns: 1fr;
}
form legend {
  display: none;
}
form input {
  --_border-width: 2px;
  height: calc(1em + var(--_border-width));
  border-top: none;
  border-right: none;
  border-bottom: solid var(--_border-width) var(--rp-margin-line-color);
  border-left: none;
  border-radius: 0.25rem 0.25rem 0 0;
  margin: 0;
  padding: 0 0.25em;
}
form textarea {
  --_border-width: 2px;
  border-top: none;
  border-right: none;
  border-bottom: solid var(--_border-width) var(--rp-margin-line-color);
  border-left: none;
  margin: 0;
  padding: 0 0.25em;
  line-height: 1em;
}
form input, form textarea {
  border-radius: 0.25rem 0.25rem 0 0;
  background-color: hsla(0, 0%, 100%, 0.5);
}
form input:valid, form textarea:valid {
  border-bottom: none;
}
form input:invalid, form textarea:invalid {
  background-color: hsla(6, 78%, 66%, 0.1);
}
form button {
  justify-self: end;
}

.cta {
  font-size: 1.5em;
  border-color: white;
  border-width: 0.2em;
  border-style: solid;
  border-radius: 2em;
  margin: 0.5em;
  padding-block: 0.25em;
  padding-inline: 0.75em;
  display: inline-block;
  width: max-content;
  filter: drop-shadow(0px 0px 4px hsla(0, 0%, 0%, 0.5));
  transition-property: all;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
  font-family: Quicksand-Bold, sans-serif;
  text-decoration: none;
  color: white;
}
.cta a {
  font-family: Quicksand-Bold, sans-serif;
  text-decoration: none;
  color: white;
}
.cta--blue-01 {
  background-color: var(--blue-5);
}
.cta--pink-01 {
  background-color: var(--pink-5);
}
.cta:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.cta:not([disabled]):hover, .cta:not([disabled]):focus {
  filter: drop-shadow(0px 0px 2px hsla(0, 0%, 0%, 0.7));
  cursor: pointer;
}

@media only screen and (max-width: 375px) {
  :where(html) {
    --_section-container-spacing-x: 0.5rem;
  }
}
body.loading {
  --_loading-bg-color: hsla(0, 0%, 0%, 0.5);
  pointer-events: none;
  overflow: hidden;
}
body.loading::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--_loading-bg-color);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 10;
}
body.loading::after {
  --_loading-logo-height: 25vh;
  --_loading-logo-width: calc(var(--_loading-logo-height) * (3.1534867 / 3.3276361));
  content: "";
  display: block;
  position: fixed;
  left: calc(50vw - var(--_loading-logo-width) / 2);
  top: calc(50vh - var(--_loading-logo-height) / 2);
  height: var(--_loading-logo-height);
  width: var(--_loading-logo-width);
  background: url("/assets/img/abstracts/logo/logo-icon-shadow-01.svg") no-repeat center center;
  background-size: contain;
  opacity: 1;
  transform-origin: center center;
  z-index: 20;
}

.version--alpha {
  /*
  .main__section {
  	--_speech-color-dark: hsla(196, 88%, 47%, 0.78);
  	--_speech-color-darker: hsla(196, 88%, 17%, 0.78);
  	--_speech-color-darker-1: hsla(196, 88%, 17%, 1);
  	--_speech-color-light: hsla(189, 100%, 56%, 0.78);
  	--_speech-color-lighter: hsla(189, 100%, 95%, 0.78);
  	--_speech-color-lighter-1: hsla(189, 100%, 95%, 1);

  	& > .main__section--testimonials {
  		background-color: var(--_speech-color-dark);
  		background-image: url('../../assets/img/abstracts/bg-comic-bubbles-gradient-blue-light.svg');    

  		.section__container--title-heading {
  			color: var(--_speech-color-lighter);
  		}		

  		.container__testimonials--list .slick-arrow {
  			background-color: var(--_speech-color-lighter-1);
  			border: solid 3px var(--_speech-color-darker-1);
  			color: var(--_speech-color-darker-1);

  			filter: drop-shadow(2px 2px 0px var(--_speech-color-dark));
  		}

  		.container__testimonials--item .testimonial__person {
  			filter: drop-shadow(-2px -2px 0px var(--_speech-color-light)) drop-shadow(2px 2px 0px var(--_speech-color-dark));			
  			@include mixins.hover() {
  				filter: drop-shadow(-1px -1px 0px var(--_speech-color-light)) drop-shadow(1px 1px 0px var(--_speech-color-dark));			
  			}                            	
  		}
  	}

  	.speech-bubble {
  		filter: drop-shadow(-4px -4px 0px var(--_speech-color-light)) drop-shadow(4px 4px 0px var(--_speech-color-dark));

  		@include mixins.hover() {
  			filter: drop-shadow(-2px -2px 0px var(--_speech-color-light)) drop-shadow(2px 2px 0px var(--_speech-color-dark));			
  		}	
  	}				
  }
  */
}
.version--alpha .header__section nav {
  grid-template-areas: "home cta";
  gap: 0;
}
.version--alpha .header__section nav .menu__section--links,
.version--alpha .footer__section section.footer__section--menu .section__container .footer__menu--list {
  display: none !important;
}
.version--alpha .main__section--expertise {
  -webkit-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -moz-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -o-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -ms-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
}
.version--alpha .main__section > .main__section--testimonials > .section__container {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

.menu__section--hamburger {
  display: none !important;
  height: 3em;
  aspect-ratio: 2.4779041/2.6458299;
  isolation: isolate;
  position: relative;
  display: grid;
  place-content: center;
}
.menu__section--hamburger svg {
  position: absolute;
  overflow: visible;
}
.menu__section--hamburger svg #burgerFg {
  filter: drop-shadow(0.1px 0.1px 0.1px rgba(0, 0, 0, 0.5));
}
.menu__section--hamburger .burger__bun {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  place-content: space-evenly;
  overflow: hidden;
  padding: 0.5em 0.7em;
  position: absolute;
  left: 1px;
}
.menu__section--hamburger .burger__patty {
  --_patty-height: calc(100% / 7);
  width: 100%;
  height: var(--_patty-height);
  background-color: hsl(0, 0%, 100%);
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
  border-radius: 1em;
}
.header__section {
  --_size-header-scale: 1;
  --_size-header-logo-a: calc(1em * var(--_size-header-scale));
  --_size-header-logo-b: calc(0.4em * var(--_size-header-scale));
  --_size-header-cta: calc(1.5em * var(--_size-header-scale));
  width: 100%;
  z-index: var(--layer-important);
}
.header__section .header__section--menu {
  width: 100%;
  display: grid;
  place-items: center;
  cursor: default;
}
.header__section .section__container {
  --_section-container-spacing-y: 0.25em;
  width: calc(100% - var(--_section-container-spacing-x));
  max-width: calc(var(--_body-max-width) - var(--_section-container-spacing-x));
  overflow: hidden;
  margin-inline-start: var(--_section-container-spacing-x);
  margin-inline-end: var(--_section-container-spacing-x);
  margin-block-start: var(--_section-container-spacing-y);
  margin-block-end: var(--_section-container-spacing-y);
  padding-inline-start: var(--_section-container-spacing-x);
  padding-inline-end: var(--_section-container-spacing-x);
  padding-block-start: var(--_section-container-spacing-y);
  padding-block-end: var(--_section-container-spacing-y);
}
.header__section nav {
  display: grid;
  grid-template-areas: "home links cta";
  gap: 2rem;
  grid-template-columns: 1fr;
}
.header__section nav .menu__section {
  --_menu-link-color: hsla(0, 0%, 0%, 0.5);
  --_menu-link-hover-color: hsla(0, 0%, 0%, 0.78);
}
.header__section nav .menu__section--home {
  grid-area: home;
  justify-self: start;
  position: relative;
  display: grid;
  place-items: center;
  place-content: center;
}
.header__section nav .menu__section--links {
  grid-area: links;
  justify-self: end;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  place-content: center;
  place-items: center;
  gap: 1em;
}
.header__section nav .menu__section--cta {
  grid-area: cta;
  justify-self: end;
  position: relative;
}
.header__section nav .menu__link--home {
  --_bg-img: url("../../assets/img/abstracts/logo/logo-name-white.svg");
  --_bg-img-hover: url("../../assets/img/abstracts/logo/logo-name.svg");
  display: grid;
  font-size: 2em;
  place-items: center;
  gap: 0.25em;
  text-decoration: none;
}
.header__section nav .menu__link--home span {
  height: var(--_size-header-logo-a);
  aspect-ratio: 20.03804/2.8097;
  isolation: isolate;
  filter: drop-shadow(1px 1px 1px hsla(0, 0%, 0%, 0.25));
}
.header__section nav .menu__link--home span::before, .header__section nav .menu__link--home span::after {
  content: "";
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-timing-function: linear;
  transition-delay: 0s;
}
.header__section nav .menu__link--home span::before {
  background-image: var(--_bg-img);
  opacity: 1;
}
.header__section nav .menu__link--home span::after {
  background-image: var(--_bg-img-hover);
  opacity: 0;
}
.header__section nav .menu__link--home span:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.header__section nav .menu__link--home span:not([disabled]):hover, .header__section nav .menu__link--home span:not([disabled]):focus {
  cursor: pointer;
}
.header__section nav .menu__link--home span:not([disabled]):hover::before, .header__section nav .menu__link--home span:not([disabled]):focus::before {
  opacity: 0;
}
.header__section nav .menu__link--home span:not([disabled]):hover::after, .header__section nav .menu__link--home span:not([disabled]):focus::after {
  opacity: 1;
}
.header__section nav .menu__link--home::after {
  content: "Marketing / Copywriting";
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--_size-header-logo-b);
  font-weight: normal;
  text-transform: uppercase;
  color: hsl(0, 0%, 100%);
  filter: drop-shadow(1px 1px 1px hsla(0, 0%, 0%, 0.25));
}
.header__section nav .menu__link.cta {
  font-size: var(--_size-header-cta);
  margin-inline-end: 0px;
}
.header__section nav .menu__link:not(.cta, .menu__link--home) a {
  font-size: 1.25rem;
  font-family: "Arial Narrow", sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: var(--_menu-link-color);
  border-bottom: solid 2px transparent;
}
.header__section nav .menu__link:not(.cta, .menu__link--home) a:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.header__section nav .menu__link:not(.cta, .menu__link--home) a:not([disabled]):hover, .header__section nav .menu__link:not(.cta, .menu__link--home) a:not([disabled]):focus {
  transition-property: color, border-color;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
  color: var(--_menu-link-hover-color);
  border-color: currentColor;
  cursor: pointer;
}

.header__section--fixed {
  --_bg-opacity: 40%;
  --_bg-color: 339, 82%, 67%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  background: hsla(var(--_bg-color), var(--_bg-opacity));
  border-bottom: 1px solid hsla(var(--_bg-color), calc(var(--_bg-opacity) - 10%));
  transition-property: all;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
}

[data-active-section-id=main-section-word] .header__section--fixed {
  --_bg-color: 44, 95%, 62%;
}

[data-active-section-id=main-section-expertise] .header__section--fixed {
  --_bg-color: 184, 18%, 81%;
}

[data-active-section-id=main-section-blog] .header__section--fixed {
  --_bg-color: 213, 8%, 27%;
}

[data-active-section-id=main-section-testimonials] .header__section--fixed {
  --_bg-color: 44, 70%, 49%;
}

.header__section--absolute {
  position: absolute;
}
.header__section--fixed {
  position: fixed;
}
.header__section--fixed nav .menu__section {
  --_menu-link-color: hsla(0, 0%, 100%, 0.78);
  --_menu-link-hover-color: hsla(0, 0%, 100%, 1);
  gap: 0;
}
.header__section--fixed nav .menu__link--home {
  place-self: baseline;
}
.header__section--fixed:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.header__section--fixed:not([disabled]):hover, .header__section--fixed:not([disabled]):focus {
  --_bg-opacity: 90%;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  .header__section--fixed nav {
    grid-template-areas: "home cta" "links links";
    grid-template-rows: 1fr;
    grid-template-columns: 50% 50%;
    gap: 0;
  }
  .header__section--fixed nav .menu__section--links {
    justify-self: center;
  }
}
@media only screen and (max-width: 810px) {
  .header__section > section > .section__container {
    --_section-container-spacing-x: 0.5em;
  }
  .header__section nav .menu__section {
    gap: 0;
  }
}
.header__section:not(.header__section--fixed) {
  --_size-header-scale: 1;
}

.header__section--fixed {
  --_size-header-scale: 0.78;
}

@media only screen and (max-width: 440px) {
  .header__section:not(.header__section--fixed) {
    --_size-header-scale: 0.7;
  }
  .header__section--fixed {
    --_size-header-scale: 0.58;
  }
}
.img__logo--icon {
  --_icon-width: 3rem;
  width: var(--_icon-width);
  top: calc(var(--_icon-width) / 2 * -1);
  position: absolute;
  left: 50%;
  transform-origin: left center;
  transform: translateX(-50%);
  transition-property: scale;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
}
.img__logo--icon:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.img__logo--icon:not([disabled]):hover, .img__logo--icon:not([disabled]):focus {
  scale: 0.9;
  cursor: pointer;
}

.footer__section {
  width: 100%;
  display: flex;
  place-content: center;
  flex-direction: column;
  place-items: center;
  position: relative;
}
.footer__section section.footer__section--menu {
  --_drop-shadow-color: hsla(0, 0%, 0%, 38%);
  height: var(--_footer-section-menu-height);
  position: absolute;
  top: calc(var(--_footer-section-menu-height) * -1);
}
.footer__section section.footer__section--menu::before {
  content: "";
  background-color: var(--yellow-0);
  width: 100%;
  height: 100%;
  -webkit-mask: url(../../assets/img/abstracts/paper/tear-large-up.svg) repeat-x bottom center;
  mask: url(../../assets/img/abstracts/paper/tear-large-up.svg) repeat-x bottom center;
}
.footer__section section.footer__section--menu .section__container {
  outline: none;
  position: absolute;
  display: grid;
}
.footer__section section.footer__section--menu .section__container .footer__menu--list {
  place-self: end;
  list-style: none;
  margin-block: 0rem;
  margin-inline: 2rem;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.footer__section section.footer__section--menu .section__container .footer__menu--list a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75em;
  text-decoration: none;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  color: var(--gray-7);
  border-bottom: solid 0.2em transparent;
}
.footer__section section.footer__section--menu .section__container .footer__menu--list a:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.footer__section section.footer__section--menu .section__container .footer__menu--list a:not([disabled]):hover, .footer__section section.footer__section--menu .section__container .footer__menu--list a:not([disabled]):focus {
  color: var(--gray-9);
  border-bottom: solid 0.2em var(--_ci-color-purple-01);
  cursor: pointer;
}
.footer__section section.footer__section--menu .section__container .footer__menu--list::after {
  content: "*";
  color: var(--_ci-color-purple-01);
  font-family: Quicksand-Bold, sans-serif;
  font-size: 1.5em;
  line-height: 1em;
}
.footer__section section.footer__section--contact-us {
  --_drop-shadow-color: var(--_ci-color-purple-01-a-01);
  background-color: var(--pink-5);
  padding-block: 5rem 5rem;
}
.footer__section section.footer__section--contact-us .section__container {
  margin-block: 0;
  padding-block: 0;
  outline: none;
  display: grid;
  place-items: center;
  overflow: visible;
}
.footer__section section.footer__section--contact-us .section__container__disclaimer * {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  color: hsl(0, 0%, 100%);
  text-align: center;
}
.footer__section section.footer__section--contact-us .section__container__disclaimer p {
  max-width: 100ch;
}

.ruled-paper__contact-us {
  border-radius: 0.75rem;
  -webkit-filter: drop-shadow(0px 2px 4px var(--gray-7));
  -moz-filter: drop-shadow(0px 2px 4px var(--gray-7));
  -o-filter: drop-shadow(0px 2px 4px var(--gray-7));
  -ms-filter: drop-shadow(0px 2px 4px var(--gray-7));
  filter: drop-shadow(0px 2px 4px var(--gray-7));
  overflow: hidden;
  max-width: 30em;
}
.ruled-paper__contact-us *:not(button) {
  color: hsl(0, 0%, 20%);
  font-family: Quicksand-Bold, sans-serif;
  font-size: 1rem;
  line-height: 1.25em;
}
.ruled-paper__contact-us button {
  font-size: 1rem;
  line-height: 1.25em;
}
.ruled-paper__contact-us .ruled-paper__header {
  padding-block: 2em 0;
  padding-inline: 2em 2em;
}
.ruled-paper__contact-us .ruled-paper__body {
  padding-block: 1.3em 2.5em;
  padding-inline: calc(var(--rp-margin-width) + 1em) 2em;
}

.progress__container {
  --_progress-container-height: 0.25rem;
  position: fixed;
  bottom: 0;
  height: var(--_progress-container-height);
  width: 100%;
  max-width: 100%;
  background-color: var(--pink-5);
  -webkit-filter: drop-shadow(0px -1px 2px hsla(0, 0%, 0%, 0.78));
  -moz-filter: drop-shadow(0px -1px 2px hsla(0, 0%, 0%, 0.78));
  -o-filter: drop-shadow(0px -1px 2px hsla(0, 0%, 0%, 0.78));
  -ms-filter: drop-shadow(0px -1px 2px hsla(0, 0%, 0%, 0.78));
  filter: drop-shadow(0px -1px 2px hsla(0, 0%, 0%, 0.78));
}
.progress__container .progress__bar {
  position: relative;
  inset: 0 0 auto;
  width: var(--_scroll-percentage-jq);
  height: 100%;
  transform-origin: left;
  background: var(--_ci-color-purple-01);
  background: linear-gradient(90deg, hsl(283, 100%, 45%) 0%, var(--_ci-color-purple-01) 100%);
  -webkit-filter: drop-shadow(0px -2px 4px var(--_ci-color-purple-01-a-01));
  -moz-filter: drop-shadow(0px -2px 4px var(--_ci-color-purple-01-a-01));
  -o-filter: drop-shadow(0px -2px 4px var(--_ci-color-purple-01-a-01));
  -ms-filter: drop-shadow(0px -2px 4px var(--_ci-color-purple-01-a-01));
  filter: drop-shadow(0px -2px 4px var(--_ci-color-purple-01-a-01));
}

@media only screen and (max-width: 550px) {
  .footer__section > section > .section__container {
    --_section-container-spacing-x: 1rem;
  }
  .ruled-paper__contact-us form fieldset > div {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media only screen and (max-width: 800px) {
  .footer__section section.footer__section--menu .section__container {
    --_section-container-spacing-x: 0rem;
  }
  .footer__section section.footer__section--menu .section__container .footer__menu--list {
    margin-block: 0rem;
    margin-inline: 0rem;
    place-self: center;
  }
}