:root {
      --navy: #00567e;
      --blue: #006d96;
      --orange: #f37b12;
      --cream: #f9f6ef;
      --ink: #073f5d;
      --white: #fff;
      --gold: #e5a526;
      --teal: #10a8b9;
      --green: #3f974d;
      --purple: #5d3f89
  }

  * {
      box-sizing: border-box
  }

  html {
      scroll-behavior: smooth
  }

  body {
      margin: 0;
      background: #f5f2eb;
      color: var(--ink);
      font-family: "Trebuchet MS", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.35
  }

  a {
      color: inherit
  }

  .page {
      max-width: 1180px;
      margin: auto;
      background: var(--cream);
      box-shadow: 0 0 30px rgba(2, 47, 68, .12);
      overflow: hidden
  }

  .hero {
      min-height: 431px;
      position: relative;
      /* background-image: url('../img/reference.jpeg');*/
      background-image: url('../img/Header_1.png');
      background-size: 1180px auto;
      background-position: center top;
      background-repeat: no-repeat;
      isolation: isolate
  }

  .hero:before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 42%, rgba(255, 255, 255, .12) 71%, rgba(255, 255, 255, 0) 100%);
      z-index: -1
  }

  .hero-inner {
      padding: 30px 6% 42px;
      width: 62%
  }

  .brand-script,
  .script {
      font-family: "Segoe Script", "Brush Script MT", cursive;
      font-weight: 700;
      color: var(--navy)
  }

  .brand-script {
      font-size: 4.25rem;
      line-height: .92;
      letter-spacing: -4px;
      transform: rotate(-2deg);
      display: inline-block
  }

  .brand-script:after,
  .script-underline:after {
      content: "";
      display: block;
      width: 62%;
      height: 6px;
      background: var(--orange);
      border-radius: 100%;
      transform: rotate(-4deg);
      margin: 4px auto 0
  }

  .brand-sub {
      font-size: 1.42rem;
      letter-spacing: .28em;
      text-transform: uppercase;
      margin: 10px 0 3px
  }

  .brand-org {
      font-size: .92rem;
      letter-spacing: .04em;
      max-width: 470px;
      text-align: center;
      text-transform: uppercase
  }

  .hero h1 {
      font-family: Georgia, serif;
      font-size: 3.1rem;
      line-height: 1;
      margin: 46px 0 22px;
      font-weight: 700;
      color: #064b6c
  }

  .hero h1 .script {
      font-size: 4.35rem;
      font-weight: 500
  }

  .hero p {
      font-size: 1.13rem;
      max-width: 550px;
      margin: 0 0 10px
  }

  .hero strong {
      font-weight: 800
  }

  .back {
      position: absolute;
      right: 22px;
      top: 16px;
      background: var(--blue);
      color: white;
      text-decoration: none;
      border-radius: 99px;
      padding: 10px 17px;
      font-size: .8rem;
      font-weight: 800;
      box-shadow: 0 4px 12px rgba(0, 60, 90, .18)
  }

  .back:hover {
      background: #034866
  }

  .journey {
      padding: 16px 28px 12px;
      background: linear-gradient(#fff, #f8f5ee)
  }

  .journey-heading {
      text-align: center;
      margin: 0 0 12px
  }

  .journey-heading h2 {
      font-family: Georgia, serif;
      font-size: 2.9rem;
      line-height: 1;
      margin: 0;
      color: #084d6c
  }

  .journey-heading .script {
      font-size: 3.55rem;
      font-weight: 500
  }

  .journey-heading p {
      margin: 12px 0 0;
      letter-spacing: .28em;
      text-transform: uppercase;
      font-size: 1.05rem
  }

  .cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px
  }

  .card {
      min-height: 192px;
      color: white;
      border-radius: 12px;
      padding: 15px 18px 13px;
      display: flex;
      flex-direction: column;
      box-shadow: inset 0 0 30px rgba(0, 0, 0, .1)
  }

  .card-top {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 12px;
      align-items: center
  }

  .icon {
      width: 62px;
      height: 62px;
      border: 1.5px solid rgba(255, 255, 255, .9);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 2.3rem;
      line-height: 1;
      color: #fff
  }

  .icon1 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_1.png') no-repeat center;
  }

  .icon1 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_1.png') no-repeat center;
  }

  .icon1 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_1.png') no-repeat center;
  }

  .icon1 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_1.png') no-repeat center;
  }

  .icon2 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_2.png') no-repeat center;
  }

  .icon3 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_3.png') no-repeat center;
  }

  .icon4 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_4.png') no-repeat center;
  }

  .icon5 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_5.png') no-repeat center;
  }

  .icon6 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_6.png') no-repeat center;
  }

  .icon7 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_7.png') no-repeat center;
  }

  .icon8 {
      line-height: 1;
      font-size: 0;
      background: url('../img/icon_8.png') no-repeat center;
  }


  .card h3 {
      font-size: 1.02rem;
      line-height: 1.2;
      margin: 0
  }

  .card p {
      font-size: .76rem;
      line-height: 1.25;
      margin: 9px 0 8px;
      opacity: .97
  }

  .card .btn {
      margin-top: auto;
      background: #fff;
      color: var(--ink);
      border-radius: 30px;
      text-decoration: none;
      text-align: center;
      padding: 10px 8px;
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: .02em;
      box-shadow: 0 3px 9px rgba(0, 0, 0, .12)
  }

  .btn span {
      float: right;
      margin-right: 8px
  }

  .card .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 12px rgba(0, 0, 0, .18)
  }

  .c1 {
      background: #0ba6b7
  }

  .c2 {
      background: #f28a24
  }

  .c3 {
      background: #045c80
  }

  .c4 {
      background: #43934b
  }

  .c5 {
      background: #e5a521
  }

  .c6 {
      background: #d35c26
  }

  .c7 {
      background: #0590aa
  }

  .c8 {
      background: #594085
  }

  .return-row {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 12px;
      margin-top: 12px;
      align-items: stretch
  }

  .return {
      background: #056083;
      color: #fff;
      border-radius: 12px;
      display: grid;
      grid-template-columns: 200px 1fr;
      align-items: center;
      padding: 14px 30px
  }

  .route-icon {
      font-size: 0rem;
      text-align: center;

      background: url('../img/loc.png') no-repeat center;
      width: 177px;
      height: 124px;
  }

  .return h3 {
      font-size: 1.35rem;
      margin: 0 0 3px
  }

  .return p {
      font-size: .85rem;
      margin: 0 0 10px
  }

  .return .btn {
      display: inline-block;
      background: white;
      color: var(--ink);
      border-radius: 30px;
      padding: 10px 25px;
      text-decoration: none;
      font-size: .78rem;
      font-weight: 900
  }

  .belong {
      display: grid;
      place-items: center;
      text-align: center;
      background: linear-gradient(120deg, #fff, #f3eee3);
      font-size: 0rem;
      line-height: 1;
      color: var(--navy);
      padding: 12px;

      background-image: url('../img/youBelong.png');
      background-repeat: no-repeat;
      background-size: 382px 139px;
      width: 382px;
      height: 139px;

  }

  .ficon1 {
      background-image: url('../img/footerIcon.png');
      background-repeat: no-repeat;
      background-size: 30px auto;
      background-position: left top;
      padding: 20px 15px 8px 15px;
      display: inline-flex;
      align-items: flex-end;
      isolation: isolate;
      font-size: 0rem;
  }



  .ficon2 {
      background-image: url('../img/footerIcon.png');
      background-repeat: no-repeat;
      background-size: 30px auto;
      background-position: center -45px;
      padding: 15px 15px 15px 15px;
      display: inline-flex;
      align-items: flex-end;
      isolation: isolate;
      font-size: 0rem;
  }


  .ficon3 {
      background-image: url('../img/footerIcon.png');
      background-repeat: no-repeat;
      background-size: 30px auto;
      background-position: center -76px;
      padding: 15px 15px 15px 15px;
      display: inline-flex;
      align-items: flex-end;
      isolation: isolate;
      font-size: 0rem;
  }


  .belong:after {
      /* content: "✝";*/
      font-family: Georgia, serif;
      color: #eee5d8;
      font-size: 5rem;
      position: absolute
  }

  .belong span {
      z-index: 1;
      transform: rotate(-5deg)
  }

  .visit {
      display: grid;
      grid-template-columns: 42% 58%;
      min-height: 250px;
      margin-top: 0;
      background: #fff
  }

  .visit-photo {
      /*background-image: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .35)), url('../img/reference.jpeg');*/
      /*  background-image: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .35)), url('../img/comeas_02.png');*/
      background-image: url('../img/comeas_02.png');
      background-size: 600px 297px;
      background-position: left 0px;
      background-repeat: no-repeat;
      display: flex;
      align-items: flex-end;
      padding: 28px 50px;
      color: white
  }

  .visit-photo .script {
      color: white;
      font-size: 3.2rem;
      line-height: 1;
      transform: rotate(-4deg);
      display: none;
  }

  .visit-photo p {
      font-weight: bold;
      margin: 14px 0 0
  }

  .visit-copy {
      padding: 24px 46px
  }

  .visit-copy h2 {
      font-family: Georgia, serif;
      font-size: 1.8rem;
      line-height: 1.05;
      margin: 0 0 20px
  }

  .visit-copy p {
      margin: 0 0 20px
  }

  .outline-btn {
      display: inline-block;
      border: 2px solid var(--blue);
      border-radius: 30px;
      text-decoration: none;
      padding: 10px 22px;
      margin: 0 8px 8px 0;
      font-size: .74rem;
      font-weight: 900
  }

  .outline-btn:hover {
      background: var(--blue);
      color: #fff
  }

  .cta {
      background: linear-gradient(120deg, #006185, #057aa1);
      color: #fff;
      padding: 24px 20%;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 28px;
      align-items: center
  }

  .footprints {
      font-size: 0rem;
      transform: rotate(12deg);
      background-image: url('../img/footprints.png');
      background-size: 120px 120px;
      width: 120px;
      height: 120px;

  }

  .cta h2 {
      font-family: Georgia, serif;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin: 0 0 4px;
      font-size: 1.7rem
  }

  .cta p {
      margin: 0 0 14px
  }

  .orange-btn {
      display: inline-block;
      background: var(--orange);
      color: white;
      text-decoration: none;
      border-radius: 30px;
      padding: 12px 28px;
      font-size: .8rem;
      font-weight: 900
  }

  .orange-btn:hover {
      background: #db6505
  }

  footer {
      background: #fff;
      display: grid;
      grid-template-columns: 1.2fr .9fr 1fr;
      gap: 25px;
      align-items: center;
      padding: 20px 7% 24px
  }

  .parish {
      display: flex;
      gap: 14px;
      align-items: center;
      font-family: Georgia, serif;
      font-weight: bold;
      line-height: 1.05;
      font-size: 0rem;
      background-image: url('../img/olbs.png');
      background-size: 330px 138px;
      width: 330px;
      height: 138px;
  }

  .seal {
      /*  width: 70px;
      height: 70px;
      border: 1px solid #94a3aa;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 2rem;
      color: #698090*/
  }

  .footer-script {
      font-size: 0rem;
      line-height: 1;
      text-align: center;
      background-image: url('../img/companions.png');
      background-size: 268px 138px;
      width: 268px;
      height: 138px;
  }

  .contact {
      font-size: .84rem
  }

  .contact div {
      margin: 8px 0
  }

  .contact b {
      display: inline-block;
      width: 26px;
      font-size: 1.1rem
  }

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

  @media(max-width:850px) {
      .hero {
          min-height: 550px;
          background-position: 62% top
      }

      .hero:before {
          background: linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .86) 70%, rgba(255, 255, 255, .22))
      }

      .hero-inner {
          width: 82%
      }

      .cards {
          grid-template-columns: repeat(2, 1fr)
      }

      .return-row {
          grid-template-columns: 1fr
      }

      .return {
          grid-template-columns: 150px 1fr
      }

      .visit {
          grid-template-columns: 1fr
      }

      .visit-photo {
          /* min-height: 250px;
          background-position: left -1030px*/
          display: none;
      }

      .seal {
          display: none;
      }

      .cta {
          padding: 24px 8%
      }

      footer {
          grid-template-columns: 1fr;
          text-align: center
      }

      .parish {
          justify-content: center
      }

      .contact b {
          width: auto;
          margin-right: 8px
      }
  }

  @media(max-width:540px) {
      .hero {
          min-height: 620px;
          background-position: 68% top;
          background-size: auto 620px
      }

      .hero-inner {
          width: 100%;
          padding: 25px 22px 35px
      }

      .brand-script {
          font-size: 3.2rem
      }

      .brand-sub {
          font-size: 1rem;
          letter-spacing: .18em
      }

      .brand-org {
          text-align: left;
          font-size: .72rem;
          max-width: 330px
      }

      .hero h1 {
          font-size: 2.35rem;
          margin-top: 55px
      }

      .hero h1 .script {
          font-size: 3rem
      }

      .hero p {
          font-size: 1rem
      }

      .back {
          right: 10px;
          top: 10px;
          padding: 8px 12px
      }

      .journey {
          padding: 18px 14px
      }

      .journey-heading h2 {
          font-size: 2.15rem
      }

      .journey-heading .script {
          font-size: 2.55rem
      }

      .journey-heading p {
          font-size: .78rem;
          letter-spacing: .2em
      }

      .cards {
          grid-template-columns: 1fr
      }

      .card {
          min-height: 175px
      }

      .return {
          grid-template-columns: 1fr;
          text-align: center;
          padding: 18px
      }

      .route-icon {
          font-size: 3rem;

      }

      .belong {
          min-height: 150px
      }

      .visit-copy {
          padding: 26px 22px
      }

      .visit-photo {
          padding: 25px;
          display: none;
      }

      .footprints {
          display: none;
      }

      .cta {
          grid-template-columns: 1fr;
          text-align: center
      }

      .footprints {
          font-size: 3rem
      }

      .cta h2 {
          font-size: 1.35rem
      }

      .outline-btn {
          display: block;
          text-align: center;
          margin-right: 0
      }
  }