/*===============================================================================================================================
Header===========================================================================================================================
===============================================================================================================================*/
@media (max-width: 1300px) {
  .headerContent {
    gap: 6%;
  }
}
/*Menu: below this width the links fold away behind the menu button.*/
@media (max-width: 1100px) {
  .stickyHeader {
    overflow: visible;
    height: 12vh;
    align-items: flex-start;
  }
  .headerContent {
    height: auto;
    min-height: 10vh;
    padding: 0 clamp(18px, 4vw, 40px);
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 clamp(10px, 2vw, 20px);
    border-radius: max(5vh, 28px);
  }
  .headerScrolled .headerContent {
    opacity: 1;
  }
  .headerLogo {
    height: max(10vh, 56px);
    margin-right: auto;
    display: flex;
    align-items: center;
  }
  .headerContent > a {
    order: 1;
  }
  .headerToggle {
    position: relative;
    z-index: 1;
    order: 2;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    background-color: rgba(255, 255, 255, 0.06);
    border: rgba(255, 255, 255, 0.18) 1px solid;
    border-radius: 50%;
    cursor: pointer;
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease;
  }
  .headerToggle:focus-visible {
    outline: var(--white) 2px solid;
    outline-offset: 3px;
  }
  .headerOpen .headerToggle {
    background-color: rgba(253, 100, 5, 0.16);
    border-color: rgba(253, 100, 5, 0.6);
  }
  .headerToggleLine {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background-color: var(--white);
    transition:
      translate 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      rotate 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .headerOpen .headerToggleLine:first-child {
    translate: 0 4.5px;
    rotate: 45deg;
  }
  .headerOpen .headerToggleLine:last-child {
    translate: 0 -4.5px;
    rotate: -45deg;
  }
  .reducedMotion .headerToggleLine {
    transition: none;
  }
  .navigationWrapper {
    order: 3;
    overflow: hidden;
    width: 100%;
    max-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease,
      visibility 0s linear 0.5s;
  }
  .headerOpen .navigationWrapper {
    max-height: 70vh;
    opacity: 1;
    visibility: visible;
    transition:
      max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.4s ease 0.1s,
      visibility 0s;
  }
  .navigationWrapper a {
    padding: 15px 4px;
    font-size: 1.05rem;
    border-top: rgba(255, 255, 255, 0.1) 1px solid;
  }
  .navigationWrapper a:last-child {
    margin-bottom: clamp(10px, 2vh, 18px);
  }
}
/*Phones: the Start a Conversation button moves into the open menu.*/
@media (max-width: 520px) {
  .headerLogo img {
    width: 108px;
  }
  .headerContent > a {
    order: 4;
    overflow: hidden;
    width: 100%;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease,
      visibility 0s linear 0.5s;
  }
  .headerOpen .headerContent > a {
    max-height: 120px;
    opacity: 1;
    visibility: visible;
    transition:
      max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.4s ease 0.1s,
      visibility 0s;
  }
  .headerCTA {
    width: 100%;
    margin: 6px 0 clamp(16px, 2.5vh, 22px);
    padding: 15px 24px;
    font-size: 1rem;
  }
}

/*===============================================================================================================================
Footer===========================================================================================================================
===============================================================================================================================*/
/*Bottom row: once the three no longer fit on one line, the credit drops to its own line underneath*/
@media (max-width: 1200px) {
  .footerBottom {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .footerCredit {
    grid-column: 1 / -1;
    order: 1;
  }
}
@media (max-width: 900px) {
  .footerContent {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .footerBrand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .footerContent {
    grid-template-columns: minmax(0, 1fr);
  }
  .footerBottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .footerLegal {
    justify-self: start;
  }
  .footerCredit {
    text-align: left;
  }
}

/*===============================================================================================================================
Home: Static Services============================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .howWeHelp {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .leftContainerText {
    position: static;
    height: auto;
    padding-top: calc(12vh + clamp(32px, 6vh, 64px));
  }
  .cardsContainer {
    padding-top: clamp(32px, 6vh, 48px);
    padding-bottom: clamp(64px, 16vh, 160px);
  }
}

/*===============================================================================================================================
Home: Why Us=====================================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .whyUs {
    grid-template-columns: minmax(0, 1fr);
  }
  .faqSection {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*===============================================================================================================================
Home: FAQ========================================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .faqText {
    position: static;
  }
}
@media (max-width: 520px) {
  .faqItem {
    --orbitSize: 36px;
    padding: 20px 18px 22px;
    column-gap: 16px;
    border-radius: 20px;
  }
  .faqOrbit {
    outline-offset: 4px;
  }
}

/*===============================================================================================================================
Why We Exist: Our Story==========================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .ourStoryParagraphCard {
    grid-template-columns: minmax(0, 1fr);
  }
  .ourStoryText {
    justify-self: start;
  }
  .whoWeAreCard {
    grid-template-columns: minmax(0, 1fr);
  }
  .whoWeAreCard .bodyEyebrow,
  .whoWeAreCard .thirdHeadings,
  .whoWeAreText:nth-of-type(1),
  .whoWeAreText:nth-of-type(2),
  .whoWeAreLinks {
    grid-column: auto;
    grid-row: auto;
  }
  .whoWeAreText:nth-of-type(1) {
    margin-top: clamp(20px, 3.5vh, 32px);
  }
  .whoWeAreLinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .whoWeAreCard {
    padding: 28px 20px;
    border-radius: 26px;
  }
  .whoWeAreLinks {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*===============================================================================================================================
Solutions: Solution Cards========================================================================================================
===============================================================================================================================*/
@media (max-width: 960px) {
  .solutionCard {
    grid-template-columns: minmax(0, 1fr);
  }
  .includedList {
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  }
}
/*Phones: two short columns keep each card inside one screen.*/
@media (max-width: 520px) {
  .includedList {
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 8px;
  }
  .includedList li {
    padding: 10px 12px;
    gap: 8px;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    border-radius: 14px;
  }
}

/*===============================================================================================================================
Process: Process Intro===========================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .processIntroCard {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*===============================================================================================================================
Process: Five Phases=============================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .phaseDial {
    display: none;
  }
  .processPhase,
  .processPhase:nth-child(even) {
    align-self: center;
    width: 100%;
    justify-content: center;
  }
  .processPhase + .processPhase {
    margin-top: clamp(24px, 5vh, 48px);
  }
}

/*===============================================================================================================================
Success Stories: Introduction====================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .introSection2 {
    min-height: 170vh;
  }
  .textSuccessIntro1,
  .textSuccessIntro2 {
    max-width: none;
  }
}

/*===============================================================================================================================
Success Stories: Portfolio Cards=================================================================================================
===============================================================================================================================*/
@media (max-width: 860px) {
  .portfolioCards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*===============================================================================================================================
Contact: Contact Form============================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .contactFormStage {
    --letterWidth: clamp(120px, 30vw, 180px);
  }
}
@media (max-width: 520px) {
  .contactFormStage {
    --stagePad: 14px;
    --cardRadius: 20px;
  }
  .contactFormCard {
    padding: 24px 18px;
  }
  .formSuccess {
    padding: 32px 20px;
  }
  .formSuccessHeading:after {
    display: none;
  }
  .formPhrase {
    white-space: normal;
  }
  .formSentence .formInput {
    width: 9.5em;
  }
  .contactFormOrbit:before {
    display: none;
  }
}

/*===============================================================================================================================
Contact: Contact Details=========================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .contactDetails {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .contactInfo {
    grid-row: auto;
  }
  .contactList {
    margin-top: clamp(40px, 6vw, 112px);
  }
  .contactAreas {
    grid-column: auto;
  }
  .contactStepsList {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 6vh, 56px);
  }
  .contactStep {
    --stepAngle: -1.5deg;
    --floatDistance: 8px;
    --floatTilt: 0.5deg;
  }
  .contactStep:nth-child(2) {
    --stepAngle: 1.5deg;
  }
  .contactStep:nth-child(3) {
    --stepAngle: -1deg;
  }
}
@media (max-width: 520px) {
  .contactStep {
    padding: 24px 20px 28px;
    border-radius: 24px;
  }
}

/*===============================================================================================================================
Web Portfolio: Website Cards=====================================================================================================
===============================================================================================================================*/
@media (max-width: 1200px) {
  .webCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 861px) and (max-width: 1200px) {
  .webCards:not(.webCardsPair) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .webCards:not(.webCardsPair) .webCard {
    grid-column: span 2;
  }
  .webCards:not(.webCardsPair) .webCard:nth-child(odd):last-child {
    grid-column: 2 / span 2;
  }
}
@media (max-width: 900px) {
  .webIntroCard {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  .webCards {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .webPortfolioLinks {
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 420px) {
  .webCardTop {
    flex-direction: column-reverse;
  }
  .webCardIndustry {
    margin-top: 0;
  }
}

/*===============================================================================================================================
Video Portfolio: Video Cards=====================================================================================================
===============================================================================================================================*/
@media (max-width: 1200px) {
  .videoCards {
    width: min(100%, 760px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .videoIntroCard {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .videoCards {
    width: min(100%, 380px);
    grid-template-columns: minmax(0, 1fr);
  }
  .videoPortfolioLinks {
    flex-direction: column;
    align-items: center;
  }
}

/*===============================================================================================================================
Privacy Policy: Glass Cards======================================================================================================
===============================================================================================================================*/
@media (max-width: 1000px) {
  .privacyCard {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .privacyContactRow {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*===============================================================================================================================
Brand & Web: Introduction========================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .brandIntroText {
    max-width: none;
  }
  /*No sideways slide on small screens, it pushed the first letters off the left edge*/
  .brandIntroAnimate .brandIntroText {
    translate: none;
  }
}

/*===============================================================================================================================
Brand & Web: What Is Branding====================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .brandingCards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*===============================================================================================================================
Brand & Web: Branding Benefits===================================================================================================
===============================================================================================================================*/
/*The pillars lie down and stack as rows, each with its words above it*/
@media (max-width: 900px) {
  .effectiveBranding {
    --pillarDepth: 10px;
    --pillarRadius: 10px;
    --pillarAngle: 270deg;
    --mistRise: clamp(48px, 9vh, 80px);
  }
  /*The mist sits under the rows instead of in front of them*/
  .pillarsList {
    min-height: 0;
    margin: 0 0 var(--mistRise);
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3.5vh, 32px);
  }
  .pillarsList:before,
  .pillarsList:after {
    bottom: calc(-0.5 * var(--pillarsBottom) - var(--mistRise));
  }
  .pillarsItem {
    align-items: flex-start;
  }
  .pillarsItemMain:before {
    bottom: 50%;
    left: 70%;
    translate: -50% 50%;
  }
  .pillarsItemMain:after {
    display: none;
  }
  .pillarsLabel {
    position: relative;
    max-width: none;
    margin-bottom: 12px;
    padding-left: 32px;
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem);
    text-align: left;
  }
  /*The number has its own space, so every label starts at the same spot*/
  .pillarsLabel:before {
    position: absolute;
    top: 0.3em;
    left: 0;
    margin: 0;
  }
  .pillarsColumn {
    width: max(
      var(--pillarStub),
      calc(
        var(--pillarGrow, 1) * var(--pillarSize) * (100% - var(--pillarDepth))
      )
    );
    height: clamp(36px, 6vh, 48px);
  }
}

/*===============================================================================================================================
Brand & Web: More Than Just A Logo===============================================================================================
===============================================================================================================================*/
/*The cards leave the ring and sit in two columns, four above the centre words and four below*/
@media (max-width: 900px) {
  .elementsOrbit {
    --elementsGap: clamp(104px, 18vh, 144px); /*Room for the centre words*/
    width: min(100%, 460px);
    height: auto;
  }
  .elementsOrbit:before,
  .elementsOrbit:after {
    display: none;
  }
  .elementsList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr var(--elementsGap) 1fr 1fr;
    gap: 18px 12px; /*Rows need room for the cards to float*/
  }
  .elementsItem {
    position: static;
    translate: none;
  }
  .elementsItem:nth-child(5),
  .elementsItem:nth-child(6) {
    grid-row: 4;
  }
  .elementsItem:nth-child(7),
  .elementsItem:nth-child(8) {
    grid-row: 5;
  }
  .elementsChip {
    height: 100%;
    padding: 12px;
    white-space: normal;
    text-align: left;
  }
}

/*===============================================================================================================================
Brand & Web: Why Your Website Matters============================================================================================
===============================================================================================================================*/
/*The paragraph drops under the heading*/
@media (max-width: 900px) {
  .mattersContent {
    grid-template-columns: minmax(0, 1fr);
  }
  .mattersText {
    justify-self: start;
  }
}

/*===============================================================================================================================
Brand & Web: Foundations Of Great Web Design=====================================================================================
===============================================================================================================================*/
/*The principles become two columns of buttons above the blueprint*/
@media (max-width: 900px) {
  .foundationsIntro {
    grid-template-columns: minmax(0, 1fr);
  }
  .foundationsBuild {
    grid-template-columns: minmax(0, 1fr);
  }
  .foundationsTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
  .foundationsTab {
    gap: 10px;
  }
  .foundationsTab:nth-last-child(2) {
    border-bottom: var(--sheetLine) 1px solid;
  }
  .foundationsTab:after {
    display: none;
  }
  .foundationsNumber {
    font-size: 1.2rem;
  }
  .foundationsName {
    font-size: 0.85rem;
  }
  .blueprintArea {
    height: clamp(260px, 40vh, 340px);
  }
}
@media (max-width: 520px) {
  /*Keeps "The Foundations of" on one line down to the narrowest phones*/
  .foundationsHeading {
    font-size: clamp(1.45rem, 7.6vw, 1.8rem);
  }
  /*Number above the name, so long names like Accessibility fit their column*/
  .foundationsTab {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .foundationsNumber {
    min-width: 0;
    font-size: 1rem;
  }
  .foundationsName {
    font-size: 0.8rem;
  }
  /*Number and title share a row, and the description runs the full width under them*/
  .foundationsPanel {
    align-items: center;
    column-gap: 12px;
  }
  .foundationsPanelNumber {
    grid-row: auto;
    min-width: 0;
    font-size: 1.9rem;
  }
  .foundationsPanelText {
    grid-column: 1 / -1;
    margin-top: 10px;
  }
}

/*===============================================================================================================================
Brand & Web: Signs It's Time To Refresh==========================================================================================
===============================================================================================================================*/
/*The cards run down one column, still scattered left and right by --cardX*/
@media (max-width: 900px) {
  .signsList {
    --signsCard: min(66%, 260px);
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .signsCard {
    position: relative;
    top: auto;
    left: auto;
    margin-left: calc((100% - var(--signsCard)) * var(--cardX));
  }
}

/*===============================================================================================================================
Tell Your Story: What Is Content=================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .contentIntroText {
    max-width: none;
  }
  /*No sideways slide on small screens, it would push the first letters off the left edge*/
  .contentIntroAnimate .contentIntroText {
    translate: none;
  }
}

/*===============================================================================================================================
Tell Your Story: Hero============================================================================================================
===============================================================================================================================*/
/*The video frames move under the words*/
@media (max-width: 900px) {
  /*The hero is taller than the screen here, so it scrolls normally instead of staying put, or the frames would never be seen in full*/
  .storyHero {
    position: relative;
  }
  .storyHeroContent {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 7vh, 64px);
  }
  .storyHeroMedia {
    width: min(100%, 420px);
    height: clamp(300px, 52vh, 460px);
    margin: 0 auto;
  }
}

/*===============================================================================================================================
Tell Your Story: Creative Services===============================================================================================
===============================================================================================================================*/
@media (max-width: 1100px) {
  .storyServicesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .storyServicesGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*===============================================================================================================================
Tell Your Story: Content Showcase================================================================================================
===============================================================================================================================*/
/*Heading on top, the picture centred underneath*/
@media (max-width: 900px) {
  .storyShowcaseContent {
    grid-template-columns: minmax(0, 1fr);
  }
  .storyCompare {
    justify-self: center;
    width: min(100%, 460px);
  }
}

/*===============================================================================================================================
Tell Your Story: Selected Work===================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .storyWorkHeadingCard {
    grid-template-columns: minmax(0, 1fr);
  }
  .storyWorkGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .storyWorkItem:nth-child(n) {
    --workRatio: 4 / 5;
    grid-column: auto;
    grid-row: auto;
  }
  .storyWorkItem:nth-child(1) {
    --workRatio: 16 / 10;
    grid-column: 1 / -1;
  }
  .storyWorkItem:nth-child(n) .storyWorkMedia {
    min-height: 0;
  }
}
@media (max-width: 520px) {
  .storyWorkGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .storyWorkItem:nth-child(n) {
    --workRatio: 4 / 3;
  }
}

/*===============================================================================================================================
Tell Your Story: Our Process=====================================================================================================
===============================================================================================================================*/
/*The steps stack and the line runs down the left side*/
@media (max-width: 900px) {
  .storySteps {
    padding: 0 0 0 clamp(32px, 8vw, 48px);
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 6vh, 48px);
  }
  .storySteps:before,
  .storySteps:after {
    width: 1px;
    height: 100%;
  }
  .storySteps:after {
    width: 2px;
    transform-origin: 50% 0;
  }
  .storyStepsAnimate:after {
    transform: scaleY(0);
  }
  .storyStep:before {
    top: 0.6em;
    left: calc(-1 * clamp(32px, 8vw, 48px) - 5px);
  }
}

/*===============================================================================================================================
Marketing: Introduction==========================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .marketingIntroText {
    max-width: none;
  }
  /*No sideways slide on small screens, it would push the first letters off the left edge*/
  .marketingIntroAnimate .marketingIntroText {
    translate: none;
  }
}

/*===============================================================================================================================
Marketing: What Is Digital Marketing=============================================================================================
===============================================================================================================================*/
/*The dictionary entry drops under the heading*/
@media (max-width: 900px) {
  .definitionContent {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*===============================================================================================================================
Marketing: Benefits Of Digital Marketing=========================================================================================
===============================================================================================================================*/
/*The graph stays, only taller and steeper: the line climbs up the left side and each benefit sits to the right of its dot*/
@media (max-width: 900px) {
  .growthChart {
    --chartHeight: clamp(400px, 58vh, 520px);
    --chartSpread: 0.56; /*How much of the chart's width the line uses, the rest is room for the words*/
    --chartStretch: 1.16; /*The line and its dots are stretched down this much, so the first dot sits near the bottom line instead of above an empty band*/
    margin-bottom: 0;
  }
  .growthLine,
  .growthList {
    bottom: auto;
    height: calc(var(--chartStretch) * 100%);
  }
  .growthLine {
    width: calc(var(--chartSpread) * 100%);
  }
  /*The fill under the line would end in a hard edge halfway across, so only the line shows*/
  .growthArea {
    display: none;
  }
  .growthPoint {
    left: calc(var(--pointX) * var(--chartSpread) * 100%);
    width: calc(100% - var(--pointX) * var(--chartSpread) * 100%);
  }
  .growthPoint:after {
    display: none;
  }
  /*Number and words on one line, level with the dot*/
  .growthLabel {
    padding: 0 0 0 clamp(16px, 4.5vw, 24px);
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: clamp(0.9rem, 0.8rem + 0.6vw, 1.1rem);
    transform: translateY(-50%);
  }
  .growthLabel:before {
    margin-bottom: 0;
  }
  .growthPointMain .growthLabel {
    font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.35rem);
  }
}

/*===============================================================================================================================
Marketing: Understanding Your Audience===========================================================================================
===============================================================================================================================*/
/*Words on top, the field of dots centred underneath*/
@media (max-width: 900px) {
  .audienceContent {
    grid-template-columns: minmax(0, 1fr);
  }
  .audienceList {
    max-width: none;
  }
  .audienceField {
    --lensRest: clamp(56px, 16vw, 88px);
    --fieldDot: clamp(22px, 6vw, 30px);
    justify-self: center;
    width: min(100%, 420px);
  }
}

/*===============================================================================================================================
Marketing: Building Brand Awareness==============================================================================================
===============================================================================================================================*/
/*Each row's words drop under its name*/
@media (max-width: 900px) {
  .awarenessHeadingCard {
    grid-template-columns: minmax(0, 1fr);
  }
  .awarenessItem {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 6px;
  }
  .awarenessMeter {
    grid-row: 1 / 3;
    align-self: start;
  }
  .awarenessText {
    grid-column: 2;
  }
}

/*===============================================================================================================================
Marketing: Turning Interest Into Action==========================================================================================
===============================================================================================================================*/
/*The stages stack as rows and every one stays open, number on the left and words on the right*/
@media (max-width: 900px) {
  .journeyList {
    height: auto;
    flex-direction: column;
  }
  .journeyReady .journeyItemActive {
    flex-grow: 1;
  }
  .journeyStage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(16px, 4vw, 28px);
    cursor: default;
  }
  .journeyStage:after {
    display: none;
  }
  .journeyNumber {
    grid-row: 1 / 3;
    min-width: 1.5em; /*Every number takes the same room, so the names line up*/
    margin-bottom: 0;
  }
  .journeyReady .journeyName,
  .journeyReady .journeyText {
    position: static;
    white-space: normal;
    opacity: 1;
    rotate: none;
    translate: none;
  }
  .journeyReady .journeyText {
    margin-top: 2px;
  }
}

/*===============================================================================================================================
Marketing: Digital Marketing Channels============================================================================================
===============================================================================================================================*/
/*The three columns stack*/
@media (max-width: 900px) {
  .channelsHeadingCard {
    grid-template-columns: minmax(0, 1fr);
  }
  .channelsGroups {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 5vh, 48px);
  }
  .channelsGroup:nth-child(n) {
    padding: 0;
    border-left: none;
  }
  .channelsList {
    margin-top: clamp(16px, 3vh, 28px);
  }
}

/*===============================================================================================================================
Marketing: Measuring Results=====================================================================================================
===============================================================================================================================*/
/*Words on top, the report underneath*/
@media (max-width: 900px) {
  .resultsContent {
    grid-template-columns: minmax(0, 1fr);
  }
  .resultsHeadingCard {
    order: 0;
  }
}

/*===============================================================================================================================
Marketing: Marketing Is An Ongoing Process=======================================================================================
===============================================================================================================================*/
/*The paragraph drops under the heading*/
@media (max-width: 900px) {
  .ongoingContent {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*===============================================================================================================================
Marketing: The Role Of Strategy==================================================================================================
===============================================================================================================================*/
/*The slide into line stays, only shorter, and every item leaves room on its right for it*/
@media (max-width: 900px) {
  .strategyItem {
    max-width: calc(100% - 12vw);
  }
  .strategyItem:nth-child(1) {
    --strategyShift: 12vw;
  }
  .strategyItem:nth-child(2) {
    --strategyShift: 4vw;
  }
  .strategyItem:nth-child(3) {
    --strategyShift: 8vw;
  }
}

/*===============================================================================================================================
Marketing: How We Work==========================================================================================================
===============================================================================================================================*/
@media (max-width: 900px) {
  .relationshipsFrames {
    max-width: 560px;
    padding-top: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 6vh, 56px);
  }
  .relationshipsFrame:nth-child(2) {
    top: 0;
  }
}
@media (max-width: 520px) {
  .relationshipsFrames {
    gap: 40px;
  }
  .relationshipsFrame:nth-child(n) {
    --cardAngle: -1.5deg;
    --floatDistance: 6px;
    --floatTilt: 0.5deg;
  }
  .relationshipsFrame:nth-child(2) {
    --cardAngle: 1.5deg;
  }
  .relationshipsFrame:nth-child(3) {
    --cardAngle: -1deg;
  }
}