/* The two location pages (/contact-us/281-bitters/ and /contact-us/i-10-wurzbach/).
   Same structure on both; the I-10 page simply leaves out the Patio 81 band.
   Sections: yellow hero, welcome, address + map, photo carousel, "how can we help?",
   one or two colour splits, FAQs, connect-with-us. */

/* ---------- shared bits ---------- */
.loc-eyebrow {
  margin: 0;
  /* Line-height tracks the font size at every breakpoint, as on live. */
  font: 700 22px / 1 var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 4.2px;
  color: var(--red);
}
.loc-eyebrow-lg { font-size: 25px; }
.loc-eyebrow-navy { color: var(--navy); }
.loc-eyebrow-white { color: var(--white); }
@media (max-width: 1366px) { .loc-eyebrow { font-size: 20px; } .loc-eyebrow-lg { font-size: 18px; } }
@media (max-width: 1200px) { .loc-eyebrow { font-size: 19px; } .loc-eyebrow-lg { font-size: 17px; } }
@media (max-width: 1024px) { .loc-eyebrow { font-size: 18px; } .loc-eyebrow-lg { font-size: 16px; } }
@media (max-width: 880px)  { .loc-eyebrow { font-size: 17px; } .loc-eyebrow-lg { font-size: 15px; } }
@media (max-width: 767px)  { .loc-eyebrow { font-size: 16px; } .loc-eyebrow-lg { font-size: 14px; } }

/* The small red button the location pages use instead of the sitewide .btn. */
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 265px;
  max-width: 100%;
  height: 50px;
  padding: 0 5px;
  background: var(--red);
  color: var(--white);
  border-radius: 7px;
  font: 400 16px / 1 var(--font-display);
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease-in-out;
}
.btn-sm:hover { background: var(--red-hover); }
.loc-divider { display: block; width: 88%; max-width: 100%; height: auto; margin-top: 14px; }

/* ---------- hero ----------
   Two columns inside a 1500px-wide band: a 900px text column and the rest for
   the photo, which hangs 80px above the band and bleeds past its bottom edge. */
.loc-hero {
  min-height: 385px;
  background: var(--yellow);
  padding: 0 10px;
  display: grid;
  grid-template-columns: 900px calc(min(1500px, 100%) - 920px);
  column-gap: 20px;
  justify-content: center;
  align-content: center;
}
.loc-hero-text { padding-top: 35px; display: flex; flex-direction: column; gap: 20px; }
.loc-hero .loc-eyebrow { padding-left: 33px; }
.loc-hero-title {
  margin: 0;
  padding-left: 28px;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  color: var(--white);
}
.loc-hero-photo { position: relative; padding: 10px; line-height: 0; }
.loc-hero-photo img {
  position: absolute;
  left: 127px;
  top: -80px;
  width: 508px;
  max-width: calc(100% - 127px);
  height: auto;
}

@media (max-width: 1366px) {
  .loc-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-hero-text { align-items: flex-start; }
}
@media (max-width: 767px) {
  /* One column: a 149px text row the text sits at the bottom of, then a 183px
     photo row the picture overflows downwards out of, exactly as on live. */
  .loc-hero {
    min-height: 385px;
    padding: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 149px 183px;
    row-gap: 20px;
    align-content: center;
  }
  .loc-hero-text { padding-top: 0; align-self: end; }
  .loc-hero-photo { min-height: 183px; }
  .loc-hero-photo img { left: 50%; top: 0; width: 67%; max-width: 67%; transform: translateX(-50%); }
}

/* I-10 lays its hero out in a narrower band and scales the tortilla photo up. */
.page-i-10-wurzbach .loc-hero { grid-template-columns: 900px calc(min(1450px, 100%) - 920px); }
.page-i-10-wurzbach .loc-hero-photo img {
  left: 0;
  top: 40px;
  width: 100%;
  max-width: 100%;
  transform: translateX(15px) scale(1.1);
}
@media (max-width: 1366px) {
  /* Taller band, text centred in it, and the tortillas centred in their column
     with live's 15px nudge still on them. */
  .page-i-10-wurzbach .loc-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 400px; align-content: stretch; padding: 0; }
  .page-i-10-wurzbach .loc-hero-text { justify-content: center; }
  /* Live's image widget is absolutely placed at top 40px and shrink-wraps the
     616px photo (or the column, if narrower); the photo is 80% of it, centred,
     and the widget is scaled 1.1 and nudged 15px right. */
  .page-i-10-wurzbach .loc-hero-photo img {
    width: calc(min(616px, 100%) * 0.8);
    max-width: none;
    left: calc(min(616px, 100%) * 0.1);
    top: 40px;
    transform: translateX(15px) scale(1.1);
  }
}
@media (max-width: 767px) {
  .page-i-10-wurzbach .loc-hero { grid-template-columns: 1fr; grid-template-rows: 180px 200px; }
  .page-i-10-wurzbach .loc-hero-text { align-self: stretch; padding-top: 35px; }
  .page-i-10-wurzbach .loc-hero-photo { min-height: 200px; }
}

/* ---------- welcome ---------- */
.loc-welcome {
  min-height: 750px;
  padding: 10px;
  background: url(/assets/img/Background_yellowWhiteStatic1.jpg) top left repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.loc-welcome-grid {
  display: grid;
  grid-template-columns: 750px minmax(0, 1fr);
  gap: 20px;
  width: 81%;
  margin: 0 0 40px 150px;
  padding: 10px;
}
.page-i-10-wurzbach .loc-welcome-grid { width: 77%; }
.loc-welcome-text { padding: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.loc-welcome-text .h2 { margin: 0; }
.loc-welcome-copy {
  width: 89%;
  margin: 7px 0 0;
  padding-bottom: 14px;
  font: 300 var(--fs-body) / var(--lh-body) var(--font-serif);
  color: var(--text);
}
.loc-welcome-buttons { display: flex; flex-wrap: wrap; gap: 65px; padding: 10px; }
.loc-welcome-photo { padding: 10px; text-align: center; line-height: 0; }
.loc-welcome-photo img { width: 85%; height: 465px; }

@media (max-width: 1366px) {
  .loc-welcome { padding: 0; }
  .loc-welcome-grid { grid-template-columns: minmax(0, 750px) minmax(0, 400px); margin: 0; width: 100%; }
  /* The photo column centres its picture against the taller text column. */
  .loc-welcome-photo { display: flex; align-items: center; justify-content: center; }
  .loc-welcome-photo img { width: 1000px; max-width: 100%; height: 287px; }
}
@media (max-width: 1200px) {
  .loc-welcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; justify-items: center; }
  .loc-welcome-text { width: 100%; }
  .loc-welcome-photo { width: 73%; }
  /* Inline divider image: a 31px line box with the picture centred 19px down it. */
  .loc-welcome-text .loc-divider { margin-top: 0; padding: 16px 0 8px; }
  .loc-welcome-copy { width: 100%; margin-top: 0; }
  /* 281 stacks its two buttons here; I-10 keeps them in a wrapping row. */
  .page-281-bitters .loc-welcome-buttons { flex-direction: column; align-items: flex-start; gap: 9px; }
}
@media (max-width: 767px) {
  .loc-welcome-grid { grid-template-columns: 1fr; }
  .loc-welcome-text .loc-divider { padding: 16px 0 10px; }
  .loc-welcome-photo { width: 100%; }
  .loc-welcome-photo img { width: 100%; height: 287px; }
}

/* ---------- address card + map ---------- */
.loc-info {
  background: var(--white);
  padding: 10px 10px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.loc-info-grid {
  display: grid;
  grid-template-columns: 500px 900px;
  gap: 20px;
  align-items: center;
  width: 78%;
  margin-left: 60px;
  padding: 100px 0 40px 20px;
}
.loc-info-card {
  width: 500px;
  max-width: 100%;
  min-height: 450px;
  background: var(--white);
  padding: 55px 55px 45px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.loc-info-name {
  margin: 0 0 15px;
  font: 400 44px / 1 var(--font-display);
  color: var(--red);
}
.loc-info-address {
  margin: 0 0 14.4px;
  font: 400 28px / 31px var(--font-display);
  color: var(--navy);
}
.loc-info-label {
  margin: 0;
  padding-top: 10px;
  font: 700 22px / 31px var(--font-serif);
  color: var(--red);
}
.loc-info-label-gap { padding-top: 5px; }
.loc-info-value {
  margin: 0;
  font: 700 20px / 31px var(--font-serif);
  color: var(--navy);
}
.loc-info-value-gap { padding-top: 3px; margin-bottom: 14.4px; }
.loc-info-value-last { margin-bottom: 15px; }
.loc-map { padding-left: 100px; }
.loc-map iframe { display: block; width: 100%; height: 500px; border: 0; }

@media (max-width: 1366px) {
  /* Live stacks the card over the map here in a one-column grid, 92% wide and
     centred, with the desktop padding and margin gone. The card keeps its
     desktop 500px box and the map its 900px, both flush left. */
  .loc-info-grid { grid-template-columns: minmax(0, 1fr); width: 92%; margin-left: 0; padding: 0; justify-items: start; }
  .loc-map { width: 900px; max-width: 100%; padding-left: 0; }
}
@media (max-width: 1200px) { .loc-info-grid { width: 91%; } }
@media (max-width: 1024px) {
  /* Stacked: a 500px card over a 900px map, both flush left, no band padding. */
  .loc-info { padding: 0; }
  .loc-info-grid { grid-template-columns: minmax(0, 1fr); width: 100%; padding: 0; justify-items: start; }
  .loc-info-card { width: 500px; max-width: 100%; min-height: 450px; padding: 55px 55px 45px; }
  .loc-map { width: 900px; max-width: 100%; }
  .loc-map iframe { height: 500px; }
}
/* Live drops the map below 881px; the empty column stays, so the 20px gap
   under the address card stays with it. */
@media (max-width: 880px) {
  .loc-map { height: 0; padding: 0; }
  .loc-map iframe { display: none; }
}
@media (max-width: 767px) {
  .loc-info { padding: 0; }
  .loc-info-grid { width: 100%; padding: 0; }
  .loc-info-card { min-height: 450px; padding: 10px; }
  /* Live goes back to the full-size card type on phones. */
  .loc-info-name { font-size: 44px; }
  .loc-info-address { font-size: 28px; }
}

/* ---------- photo carousel ---------- */
.loc-gallery-head { padding: 100px 0 50px; display: flex; flex-direction: column; gap: 20px; width: 100%; }
.loc-carousel { position: relative; width: 1400px; max-width: 100%; padding-bottom: 13px; }
.loc-carousel-viewport { overflow: hidden; }
.loc-carousel-track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform .5s ease; }
.loc-carousel-track > li { flex: 0 0 100%; display: flex; justify-content: center; padding-bottom: 8px; }
.loc-carousel-track img { width: 1000px; max-width: 100%; height: auto; }
.loc-carousel-arrow {
  position: absolute;
  top: 297px;
  width: 38px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: var(--white);
  border-radius: 6px;
}
.loc-carousel-arrow .icon { width: 22px; height: 22px; }
.loc-carousel-prev { left: 10px; }
.loc-carousel-next { right: 10px; }
.loc-carousel-dots { display: flex; justify-content: center; gap: 14px; padding-top: 77px; }
.loc-carousel-dots button { width: 20px; height: 20px; border-radius: 50%; background: var(--navy); }
.loc-carousel-dots button[aria-current="true"] { background: var(--yellow); }

@media (max-width: 767px) {
  .loc-gallery-head { padding: 100px 0 50px; }
  .loc-carousel-arrow { top: 114px; }
  .loc-carousel-dots { padding-top: 77px; }
}

/* ---------- how can we help ---------- */
.loc-help {
  min-height: 450px;
  background: url(/assets/img/Background-blue.jpg) top left repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.loc-help .h2 { margin: 0; }
.loc-help-grid {
  display: grid;
  grid-template-columns: repeat(3, 362px);
  gap: 45px;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}
.loc-help-grid .btn { width: 330px; max-width: 100%; justify-self: center; }
/* I-10's button grid is a touch narrower than 281's. */
@media (min-width: 1201px) {
  .page-i-10-wurzbach .loc-help-grid { grid-template-columns: repeat(3, 353.33px); }
}

/* The grid keeps its desktop 1176px (1150px on I-10) down to 1200, then fills
   the row (96% on I-10); the buttons stay 330px throughout. */
@media (max-width: 1200px) { .loc-help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } }
@media (max-width: 1200px) { .page-i-10-wurzbach .loc-help-grid { width: 96%; } }
@media (max-width: 1024px) {
  .loc-help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px; width: 100%; }
  /* The buttons keep their 330px and spill over the right edge of their cell. */
  .loc-help-grid .btn { width: 330px; max-width: none; justify-self: start; }
  /* The third one is narrower, with its label right on the wrapping edge. */
  .loc-help-grid .btn:nth-child(3) { width: 295px; justify-self: center; white-space: nowrap; }
}
@media (max-width: 767px) {
  .loc-help { min-height: 0; padding: 6px; gap: 25px; justify-content: flex-start; }
  .loc-help-grid { grid-template-columns: 1fr; gap: 45px; }
  .loc-help-grid .btn { width: 330px; justify-self: center; }
  /* Live leaves the third button a touch narrower than the rest. */
  .loc-help-grid .btn:nth-child(3) { width: 300px; }
}

/* ---------- colour splits (Patio 81, Tortilla Factory) ---------- */
.loc-split { min-height: 700px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.loc-split-photo { min-height: 700px; background-position: center right; background-repeat: no-repeat; background-size: cover; }
.loc-split-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.loc-split-text {
  /* 730px even where the half-column is narrower: live lets the 10px padding
     hang over the column edge rather than reflowing the text. */
  width: 730px;
  min-height: 417px;
  padding: 35px 10px 0 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.loc-split-text .h2 { margin: 0; }
/* In the split bands the eyebrow is body text, so it keeps the 31px body line-height. */
.loc-split-text .loc-eyebrow { line-height: 31px; }
.loc-split-copy {
  margin: 0;
  padding-bottom: 25px;
  font: 300 var(--fs-body) / var(--lh-body) var(--font-serif);
  color: var(--text);
}
.loc-split-copy p { margin: 0 0 14px; }
.loc-split-copy p:last-child { margin-bottom: 0; }
.loc-split-copy-wide { width: 98%; }
.loc-split-copy-narrow { width: 87%; }

/* The Patio 81 copy keeps a trailing 14px after its last paragraph, as on live. */
.loc-patio .loc-split-copy p:last-child { margin-bottom: 14px; }
.loc-patio { background: #FEC95C; }
.loc-patio-photo { background-image: url(/assets/img/patio81.jpg); }
.loc-patio-panel { background: #FEC95C; }
.loc-divider-patio { width: 642px; margin-top: 13px; padding: 22px 0 26px; }

.loc-tortilla { background: var(--teal); min-height: 650px; }
.loc-tortilla .loc-split-copy { color: var(--white); }
.loc-tortilla-photo { background-image: url(/assets/img/tortillas.jpg); min-height: 650px; }
.loc-tortilla-panel { align-items: flex-end; }
.loc-tortilla .loc-split-text { padding: 35px 10px 0; }
.loc-divider-tortilla { width: 602px; margin-top: 13px; padding: 30px 0 38px; }

/* Up to 1366 the bands stay side by side at their desktop heights; the text
   box narrows to 500px with 35px on top only, centred in its half (the Tortilla
   one too), the copy is capped at the box width (live's 510px widget width is
   held to 100%) and the divider images shrink to 490px. */
@media (max-width: 1366px) {
  .loc-split-text,
  .loc-tortilla .loc-split-text { width: 500px; padding: 35px 0 0; }
  .loc-tortilla-panel { align-items: center; }
  .loc-split-copy-wide, .loc-split-copy-narrow { width: 510px; max-width: 100%; }
  /* Live's divider widgets stay 71px and 91px tall; the 490px image lands 37px
     and 45px down them. */
  .loc-divider-patio { width: 490px; margin-top: 0; padding: 37px 0 26.4px; }
  .loc-divider-tortilla { width: 490px; margin-top: 0; padding: 45px 0 37.9px; }
}
@media (max-width: 1024px) {
  .loc-split, .loc-split-photo, .loc-tortilla, .loc-tortilla-photo { min-height: 0; }
  .loc-split { grid-template-columns: 1fr; }
  .loc-split-photo { min-height: 420px; }
  .loc-tortilla-photo { min-height: 420px; }
  .loc-split-text { width: 100%; min-height: 0; padding: 35px 25px 40px; gap: 18px; }
  .loc-tortilla .loc-split-text { padding: 35px 25px 40px; }
  .loc-split-copy-wide, .loc-split-copy-narrow { width: 100%; }
  .loc-divider-patio, .loc-divider-tortilla { width: 100%; }
  /* Photo first on the Patio band, text first on the Tortilla band — as on the live page. */
  .loc-tortilla .loc-split-panel { order: -1; }
}
@media (max-width: 1024px) {
  /* Stacked in two equal rows, the photos framed from the top instead of the right. */
  .loc-split { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); }
  .loc-split-photo, .loc-tortilla-photo { min-height: 0; background-position: top center; }
  .loc-split-text,
  .loc-tortilla .loc-split-text { width: 100%; min-height: 417px; padding: 15px; gap: 0; justify-content: center; }
  .loc-split-copy-wide, .loc-split-copy-narrow { width: 510px; max-width: 100%; }
  .loc-divider-patio,
  .loc-divider-tortilla { width: 490px; max-width: 100%; margin-top: 0; padding: 20px 0 13px; }
}
@media (max-width: 880px) {
  .loc-split-copy-wide, .loc-split-copy-narrow { width: 100%; }
}
@media (max-width: 767px) {
  /* Two equal rows: the photo grows to whatever the text panel needs, which is
     how live ends up with its very tall photo bands on a phone. */
  .loc-split { grid-template-rows: repeat(2, 1fr); }
  .loc-split-photo, .loc-tortilla-photo { min-height: 0; }
  .loc-split-panel { width: 80%; justify-self: center; }
  .loc-split-text,
  .loc-tortilla .loc-split-text { padding: 15px; gap: 0; justify-content: flex-start; }
  .loc-divider-patio { margin-top: 0; padding: 22px 0 15px; }
  .loc-divider-tortilla { margin-top: 0; padding: 21px 0 15px; }
}

/* ---------- FAQs ---------- */
.loc-faqs {
  min-height: 850px;
  margin-bottom: 10px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loc-faqs-inner { width: 80%; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loc-faqs-head { padding-bottom: 15px; display: flex; flex-direction: column; gap: 20px; }
.loc-faqs-head .loc-eyebrow { padding: 85px 2px 2px; }
.loc-faqs-head .h2 { margin: 0; }
.loc-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 100px; padding: 10px; width: 100%; }
.loc-faq-col { min-width: 0; }

@media (max-width: 767px) {
  .loc-faqs { padding-bottom: 0; }
  .loc-faqs-inner { width: 100%; }
  .loc-faq-grid { grid-template-columns: 1fr; gap: 100px; }
}

/* Accordion: same look as the FAQ list on /contact-us/. */
.faq {
  margin-bottom: 30px;
  background: #f3f3f3;
  border: 2px solid var(--navy);
  border-radius: 6px;
}
.faq[open] { border-color: var(--red); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px;
  cursor: pointer;
  list-style: none;
  font: 700 30px / 1 var(--font-serif);
  letter-spacing: 1px;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 30px; height: 30px; color: var(--red); flex: 0 0 auto; }
.faq[open] summary .icon { transform: rotate(180deg); }
.faq-body {
  padding: 0 14px 45px 27px;
  font: 300 var(--fs-body) / var(--lh-body) var(--font-serif);
  color: #333;
}
.faq-body p { margin: 0 0 14px; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 24px;
  background: var(--red);
  color: var(--white);
  border-radius: 11px;
  font: 400 var(--fs-btn) / 1 var(--font-display);
  text-decoration: none;
}
.faq-btn:hover { background: var(--red-hover); }
@media (max-width: 1366px) { .faq summary { font-size: 18px; } }
@media (max-width: 1200px) { .faq summary { font-size: 17px; } }
@media (max-width: 1024px) { .faq summary { font-size: 16px; } }
@media (max-width: 880px)  { .faq summary { font-size: 15px; } }
@media (max-width: 767px)  { .faq summary { font-size: 14px; } }

/* ---------- connect with us ---------- */
.loc-connect {
  min-height: 540px;
  padding: 25px 0 0 5px;
  background: url(/assets/img/Layer-36.jpg) center center no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.loc-connect .h2 { margin: 0; }
.loc-connect-sub {
  margin: 0;
  font: 400 var(--fs-h4) / 1 var(--font-display);
  color: var(--white);
  text-transform: uppercase;
}
.loc-connect-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding: 10px;
  margin-top: 15px;
}
.loc-connect-icons a { line-height: 0; }
.loc-connect-icons img { display: block; }

/* ---------- I-10 below the desktop breakpoint ----------
   The two pages diverge a lot once they stack: I-10 keeps its band padding,
   drops the photo carousel on phones and lays its bands out on its own sizes. */
@media (max-width: 1366px) {
  .page-i-10-wurzbach .loc-welcome { padding: 10px; }
  /* Two 1fr columns, the text one held at its 750px, no gap, as live. */
  .page-i-10-wurzbach .loc-welcome-grid {
    width: 98%;
    padding: 0;
    gap: 0;
    grid-template-columns: minmax(min(750px, 100%), 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .page-i-10-wurzbach .loc-welcome-photo img { width: 100%; height: 330px; }
  /* The card and a full-width map keep I-10's desktop 78% box and 60px indent. */
  .page-i-10-wurzbach .loc-info-grid { width: 78%; margin-left: 60px; }
  .page-i-10-wurzbach .loc-map { width: 100%; }
}
/* Live's custom CSS narrows this grid to 98% at max-width 1336px, not 1366, so
   between the two it is still the desktop 77%. */
@media (min-width: 1337px) and (max-width: 1366px) {
  .page-i-10-wurzbach .loc-welcome-grid { width: 77%; }
}
@media (max-width: 1200px) {
  /* Stacked in two equal rows, both centred. */
  .page-i-10-wurzbach .loc-welcome-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
  }
  .page-i-10-wurzbach .loc-welcome-text { width: 750px; max-width: 100%; }
  .page-i-10-wurzbach .loc-welcome-text .loc-divider { padding: 14px 0 7px; }
  .page-i-10-wurzbach .loc-welcome-copy { width: 89%; }
  .page-i-10-wurzbach .loc-welcome-photo { width: 100%; }
  .page-i-10-wurzbach .loc-welcome-photo img { width: 45%; }
}
@media (max-width: 1024px) {
  .page-i-10-wurzbach .loc-info { padding: 10px 10px 100px; }
  .page-i-10-wurzbach .loc-info-grid { width: 78%; margin-left: 60px; }
  .page-i-10-wurzbach .loc-map { width: 100%; }
  .page-i-10-wurzbach .loc-help-grid { width: 82%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-i-10-wurzbach .loc-help-grid .btn,
  .page-i-10-wurzbach .loc-help-grid .btn:nth-child(3) { width: 330px; justify-self: center; white-space: normal; }
  .page-i-10-wurzbach .loc-tortilla .loc-split-panel { width: 100%; padding: 10px 10px 10px 30px; }
  .page-i-10-wurzbach .loc-tortilla .loc-split-text { padding: 35px 0 0; justify-content: space-evenly; }
}
/* Live hides the photo carousel on phones here. */
@media (max-width: 880px) {
  .page-i-10-wurzbach .loc-carousel { display: none; }
  /* The map column goes with it here, gap and all. */
  .page-i-10-wurzbach .loc-map { display: none; }
}
@media (max-width: 767px) {
  .page-i-10-wurzbach .loc-welcome-photo img { width: 100%; }
  .page-i-10-wurzbach .loc-welcome-copy { width: 100%; }
  .page-i-10-wurzbach .loc-welcome-text .loc-divider { padding: 16px 0 10px; }
  .page-i-10-wurzbach .loc-info-grid { width: 100%; margin-left: 0; }
  .page-i-10-wurzbach .loc-info-card { width: 100%; padding: 8px; }
  .page-i-10-wurzbach .loc-help { min-height: 706px; padding: 0; gap: 0; justify-content: space-evenly; }
  .page-i-10-wurzbach .loc-help-grid { width: 100%; grid-template-columns: 1fr; }
  .page-i-10-wurzbach .loc-tortilla .loc-split-panel { width: 95%; padding: 0; }
}