/* Contact + Gallery
   Placeholder content is intentionally isolated in the matching HTML files. */
.editorial-page {
   overflow: hidden;
   background: #f7f2e9;
   color: #14201c;
}

.editorial-container {
   /* width: min(100%, 1510px); */
   margin-inline: auto;
   padding-inline: clamp(22px, 4vw, 68px);
}

.editorial-hero {
   position: relative;
   min-height: 480px;
   display: grid;
   place-items: center;
   padding: 125px 0 72px;
   color: #fff;
   text-align: center;
   background: radial-gradient(circle at 50% 30%, rgba(179, 142, 89, .16), transparent 36%), #071913;
   border-bottom: 1px solid rgba(179, 142, 89, .5);
}

.editorial-hero::before {
   position: absolute;
   inset: 18px;
   content: "";
   pointer-events: none;
   border: 1px solid rgba(179, 142, 89, .22);
}

.editorial-hero__content {
   position: relative;
   z-index: 1;
   max-width: 820px;
   margin-inline: auto;
}

.editorial-eyebrow {
   margin: 0 0 15px;
   color: #cfaa70;
   font-size: .69rem;
   font-weight: 600;
   letter-spacing: .22em;
   text-transform: uppercase;
}

.editorial-hero h1 {
   margin: 0;
   font-family: "Cormorant Garamond", serif;
   font-size: clamp(3.3rem, 6vw, 6.2rem);
   font-weight: 600;
   line-height: .9;
}

.editorial-rule {
   display: block;
   width: 74px;
   height: 1px;
   margin: 22px auto;
   background: #b38e59;
}

.editorial-lead {
   max-width: 650px;
   margin: 0 auto;
   color: rgba(255, 255, 255, .78);
   font-size: .9rem;
   line-height: 1.8;
}

.editorial-section {
   padding: clamp(20px, 2vw, 50px) 0;
}

.editorial-section--dark {
   color: #fff;
   background: #0a1c17;
}

.editorial-heading {
   max-width: 720px;
   margin: 0 auto 44px;
   text-align: center;
}

.editorial-heading h2 {
   margin: 0;
   font-family: "Cormorant Garamond", serif;
   font-size: clamp(2.4rem, 4vw, 4rem);
   font-weight: 600;
   line-height: 1;
}

.editorial-heading p {
   max-width: 600px;
   margin: 14px auto 0;
   color: #68726e;
   font-size: .82rem;
   line-height: 1.75;
}

.editorial-section--dark .editorial-heading p {
   color: rgba(255, 255, 255, .64);
}

.editable-note {
   color: #94774d;
   font-size: .62rem;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
}

/* Gallery: replace each .gallery-placeholder with an <img>. */
.gallery-container-fluid {
   padding-inline: clamp(22px, 4vw, 68px);
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: clamp(14px, 1.6vw, 24px);
   align-items: stretch;
}

.gallery-card {
   display: flex;
   grid-column: span 1;
   height: 100%;
   flex-direction: column;
   margin: 0;
   background: var(--paper-light);
   border: 1px solid rgba(95, 73, 42, .18);
}

.gallery-card--wide {
   grid-column: span 1;
}

.gallery-placeholder {
   position: relative;
   display: grid;
   width: 100%;
   aspect-ratio: 4 / 3;
   min-height: 0;
   place-items: center;
   overflow: hidden;
   color: rgba(255, 255, 255, .64);
   background: linear-gradient(145deg, #17332a, #081a15);
}

.gallery-card--wide .gallery-placeholder {
   min-height: 0;
   aspect-ratio: 4 / 3;
}

.gallery-card>img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
}

.gallery-card--wide>img {
   aspect-ratio: 4 / 3;
}

.gallery-lightbox-trigger {
   cursor: zoom-in;
   transition: filter .25s ease;
}

.gallery-lightbox-trigger:hover {
   filter: brightness(.88);
}

.gallery-lightbox-trigger:focus-visible {
   outline: 3px solid #b38e59;
   outline-offset: -3px;
}

.gallery-lightbox .modal-content {
   color: #fff;
   background: #071913;
   border: 1px solid rgba(179, 142, 89, .55);
   border-radius: 0;
}

.gallery-lightbox .modal-header {
   border-bottom-color: rgba(179, 142, 89, .3);
}

.gallery-lightbox .modal-title {
   font-family: "Cormorant Garamond", serif;
   font-size: 1.6rem;
}

.gallery-lightbox .modal-body {
   position: relative;
   display: grid;
   padding: 0;
   place-items: center;
}

.gallery-lightbox .modal-body img {
   display: block;
   width: 100%;
   max-height: calc(100vh - 150px);
   object-fit: contain;
}

.gallery-lightbox__nav {
   position: absolute;
   top: 50%;
   z-index: 2;
   display: grid;
   width: 48px;
   height: 48px;
   padding: 0;
   place-items: center;
   color: #fff;
   background: rgba(7, 25, 19, .82);
   border: 1px solid rgba(179, 142, 89, .7);
   border-radius: 50%;
   transform: translateY(-50%);
   transition: color .2s ease, background .2s ease;
}

.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus-visible {
   color: #071913;
   background: #cfaa70;
}

.gallery-lightbox__nav--prev {
   left: 18px;
}

.gallery-lightbox__nav--next {
   right: 18px;
}

@media (max-width: 575.98px) {
   .gallery-lightbox__nav {
      width: 40px;
      height: 40px;
   }

   .gallery-lightbox__nav--prev {
      left: 8px;
   }

   .gallery-lightbox__nav--next {
      right: 8px;
   }
}

.gallery-placeholder::before {
   position: absolute;
   inset: 14px;
   content: "";
   border: 1px solid rgba(179, 142, 89, .25);
}

.gallery-placeholder i {
   margin-bottom: 10px;
   color: #b38e59;
   font-size: 1.5rem;
}

.gallery-placeholder span {
   display: block;
   font-size: .66rem;
   letter-spacing: .14em;
   text-transform: uppercase;
}

.gallery-card figcaption {
   flex: 1;
   padding: 20px 22px 23px;
}

.gallery-card h3 {
   margin: 0 0 5px;
   font-family: "Cormorant Garamond", serif;
   font-size: 1.55rem;
   font-weight: 600;
}

.gallery-card p {
   margin: 0;
   color: #68726e;
   font-size: .72rem;
   line-height: 1.6;
}

.gallery-help {
   margin: 32px 0 0;
   text-align: center;
}

/* Contact */
.contact-layout {
   display: grid;
   grid-template-columns: .88fr 1.12fr;
   gap: clamp(30px, 6vw, 90px);
   align-items: start;
}

.contact-intro h2, .contact-form-card h2 {
   margin: 0 0 14px;
   font-family: "Cormorant Garamond", serif;
   font-size: clamp(2.5rem, 4vw, 3.8rem);
   font-weight: 600;
   line-height: 1;
}

.contact-intro>p {
   color: #68726e;
   font-size: .82rem;
   line-height: 1.8;
}

.contact-details {
   margin-top: 34px;
   border-top: 1px solid rgba(95, 73, 42, .2);
}

.contact-detail {
   display: grid;
   grid-template-columns: 42px 1fr;
   gap: 14px;
   padding: 22px 0;
   border-bottom: 1px solid rgba(95, 73, 42, .2);
}

.contact-detail i {
   color: #a9834d;
   font-size: 1rem;
   padding-top: 3px;
}

.contact-detail span {
   display: block;
   margin-bottom: 5px;
   color: #94774d;
   font-size: .6rem;
   font-weight: 600;
   letter-spacing: .13em;
   text-transform: uppercase;
}

.contact-detail p, .contact-detail a {
   margin: 0;
   color: #24312d;
   font-family: "Cormorant Garamond", serif;
   font-size: 1.2rem;
   line-height: 1.35;
}

.contact-form-card {
   padding: clamp(28px, 4vw, 52px);
   background: var(--paper-light);
   border: 1px solid rgba(95, 73, 42, .2);
   box-shadow: 0 20px 60px rgba(23, 31, 27, .08);
}

.contact-form-card>p {
   margin: 0 0 28px;
   color: #68726e;
   font-size: .78rem;
   line-height: 1.7;
}

.contact-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
}

.contact-field--full {
   grid-column: 1 / -1;
}

.contact-field label {
   display: block;
   margin-bottom: 8px;
   color: #67543a;
   font-size: .62rem;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
}

.contact-field input, .contact-field select, .contact-field textarea {
   width: 100%;
   min-height: 49px;
   padding: 12px 14px;
   color: #14201c;
   background: rgba(255, 255, 255, .48);
   border: 1px solid rgba(95, 73, 42, .25);
   border-radius: 0;
   outline: none;
   font-size: .78rem;
}

.contact-field textarea {
   min-height: 130px;
   resize: vertical;
}

.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus {
   border-color: #a9834d;
   box-shadow: 0 0 0 3px rgba(179, 142, 89, .1);
}

.contact-submit {
   grid-column: 1 / -1;
   min-height: 50px;
   color: #fff;
   background: linear-gradient(135deg, #b98f50, #8e6733);
   border: 1px solid #c9a15f;
   font-size: .69rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.contact-submit:hover {
   background: #b38e59;
}

.contact-map {
   min-height: 390px;
   margin-top: 54px;
   overflow: hidden;
   background: #071913;
   border: 1px solid rgba(179, 142, 89, .35);
}

.contact-map iframe {
   display: block;
   width: 100%;
   min-height: 390px;
   border: 0;
}

.contact-map i {
   margin-bottom: 12px;
   color: #c7a064;
   font-size: 2rem;
}

.contact-map strong, .contact-map span {
   display: block;
}

.contact-map strong {
   font-family: "Cormorant Garamond", serif;
   font-size: 1.6rem;
}

.contact-map span {
   margin-top: 7px;
   font-size: .67rem;
   letter-spacing: .1em;
   text-transform: uppercase;
}

@media (max-width: 991.98px) {
   .gallery-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .gallery-card {
      grid-column: span 1;
   }

   .gallery-card--wide {
      grid-column: span 1;
   }

   .contact-layout {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 767.98px) {
   .editorial-container, .gallery-container-fluid {
      padding-inline: 18px;
   }

   .editorial-hero {
      min-height: 430px;
      /* padding-top: 110px; */
   }

   .editorial-hero::before {
      inset: 10px;
   }

   .gallery-grid {
      grid-template-columns: 1fr;
   }

   .gallery-card, .gallery-card--wide {
      grid-column: auto;
   }

   .gallery-placeholder, .gallery-card--wide .gallery-placeholder, .gallery-card>img, .gallery-card--wide>img {
      min-height: 0;
      aspect-ratio: 4 / 3;
   }

   .contact-form {
      grid-template-columns: 1fr;
   }

   .contact-field--full, .contact-submit {
      grid-column: auto;
   }
}

/* Contact appointment layout */
.contact-page { overflow: hidden; }
.contact-appointment { padding: clamp(22px, 3vw, 48px); background: #081a15; }
.contact-page .contact-layout { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); max-width: 1540px; margin-inline: auto; gap: 0; overflow: hidden; align-items: stretch; border-radius: 14px; background: #f8f3ec; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); }
.contact-page .contact-intro { position: relative; min-height: 940px; padding: clamp(48px, 5vw, 76px) clamp(30px, 4vw, 64px); color: #fff; background: linear-gradient(90deg, rgba(1, 11, 21, .97) 0%, rgba(3, 14, 25, .87) 44%, rgba(3, 14, 25, .18) 100%), url("../img/custom-suits/custom-suits-hero.webp") 52% center / cover no-repeat; }
.contact-intro__content { position: relative; z-index: 1; max-width: 390px; }
.contact-brand { width: min(245px, 72%); height: auto; margin-bottom: 58px; filter: sepia(.18) saturate(.8); }
.contact-kicker { margin: 0 0 12px; color: #c6a46d; font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.contact-page .contact-intro h1 { margin: 0; color: #fff; font-family: "Cormorant Garamond", serif; font-size: clamp(3rem, 4vw, 4.5rem); font-weight: 600; line-height: .98; text-transform: uppercase; }
.contact-ornament, .contact-heading-rule { display: flex; align-items: center; gap: 10px; width: 210px; margin: 27px 0; color: #b99359; }
.contact-ornament::before, .contact-ornament::after, .contact-heading-rule::before, .contact-heading-rule::after { content: ""; flex: 1; height: 1px; background: #b99359; }
.contact-ornament i, .contact-heading-rule i { font-size: .9rem; transform: rotate(-12deg); }
.contact-intro__lead { margin: 0 0 38px; color: rgba(255,255,255,.84); font-size: .78rem; line-height: 1.8; }
.contact-page .contact-details { margin-top: 26px; border: 0; }
.contact-page .contact-detail { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 11px 0; border: 0; }
.contact-page .contact-detail > i { display: grid; width: 43px; height: 43px; padding: 0; place-items: center; color: #c5a168; border: 1px solid #9d7d4f; border-radius: 50%; }
.contact-page .contact-detail span { margin-bottom: 3px; color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .13em; }
.contact-page .contact-detail p, .contact-page .contact-detail a { margin: 0; color: rgba(255,255,255,.8); font-family: "Montserrat", sans-serif; font-size: .68rem; line-height: 1.6; }
.contact-page .contact-form-card { padding: clamp(42px, 5vw, 76px) clamp(30px, 5vw, 72px); background: #f8f3ec; border: 0; box-shadow: none; }
.contact-form-heading { margin-bottom: 32px; text-align: center; }
.contact-form-heading h2 { margin: 0; color: #081a15; font-family: "Cormorant Garamond", serif; font-size: clamp(2.8rem, 4vw, 4.1rem); font-weight: 600; line-height: 1; text-transform: uppercase; }
.contact-heading-rule { width: 330px; max-width: 70%; margin: 18px auto; }
.contact-form-heading h3 { margin: 0 0 12px; color: #aa8350; font-family: "Cormorant Garamond", serif; font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.contact-form-heading p { margin: 0; color: #081a15; font-size: .76rem; line-height: 1.65; }
.contact-page .contact-form { gap: 20px 22px; }
.contact-page .contact-field input, .contact-page .contact-field select, .contact-page .contact-field textarea { border-radius: 4px; background: rgba(255,255,255,.36); }
.contact-page .contact-field textarea { min-height: 92px; }
.contact-control { position: relative; }
.contact-control i { position: absolute; left: 14px; top: 50%; z-index: 1; color: #8b8b87; transform: translateY(-50%); }
.contact-control input { padding-left: 42px !important; }
.contact-page .contact-submit { color: #c9a368; background: #081a15; border: 1px solid #081a15; }
.contact-page .contact-submit:hover { color: #fff; background: #081a15; }
.contact-consent { grid-column: 1 / -1; display: flex; gap: 9px; align-items: center; color: #2c3440; font-size: .68rem; }
.contact-consent input { accent-color: #a9834d; }
.contact-consent a { color: #a17b45; text-decoration: none; }
.contact-signoff { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; margin: -3px 0 0; color: #081a15; font-family: "Cormorant Garamond", serif; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; }
.contact-signoff span { color: #b38e59; }

@media (max-width: 1199.98px) {
   .contact-page .contact-intro { padding-inline: 38px; }
   .contact-page .contact-form-card { padding-inline: 42px; }
}

@media (max-width: 991.98px) {
   .contact-page .contact-layout { grid-template-columns: 1fr; }
   .contact-page .contact-intro { min-height: 620px; background-position: center 36%; }
   .contact-intro__content { max-width: 520px; }
   .contact-brand { margin-bottom: 38px; }
   .contact-page .contact-form-card { min-width: 0; }
   .contact-page .contact-form { grid-template-columns: minmax(0, 1fr); }
   .contact-page .contact-field,
   .contact-page .contact-field--full,
   .contact-page .contact-submit,
   .contact-page .contact-consent,
   .contact-page .contact-signoff { grid-column: auto; min-width: 0; }
   .contact-page .contact-field input,
   .contact-page .contact-field select,
   .contact-page .contact-field textarea { min-width: 0; max-width: 100%; }
}

@media (max-width: 767.98px) {
   .contact-appointment { padding: 12px; }
   .contact-page .contact-layout { border-radius: 8px; }
   .contact-page .contact-intro { min-height: 560px; padding: 38px 26px; background: linear-gradient(90deg, rgba(1, 11, 21, .96), rgba(3, 14, 25, .68)), url("../img/custom-suits/custom-suits-hero.webp") 58% center / cover no-repeat; }
   .contact-brand { width: min(210px, 68%); margin-bottom: 30px; }
   .contact-page .contact-intro h1 { font-size: clamp(2.75rem, 12vw, 3.8rem); }
   .contact-ornament { margin-block: 21px; }
   .contact-intro__lead { margin-bottom: 25px; font-size: .8rem; }
   .contact-page .contact-detail { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; }
   .contact-page .contact-detail > i { width: 39px; height: 39px; }
   .contact-page .contact-detail p, .contact-page .contact-detail a { overflow-wrap: anywhere; font-size: .74rem; }
   .contact-page .contact-form-card { padding: 38px 20px; }
   .contact-form-heading { margin-bottom: 26px; }
   .contact-form-heading h2 { font-size: clamp(2.5rem, 12vw, 3.4rem); }
   .contact-form-heading h3 { font-size: clamp(1.2rem, 6.4vw, 1.65rem); letter-spacing: .05em; overflow-wrap: anywhere; }
   .contact-form-heading p br { display: none; }
   .contact-heading-rule { max-width: 88%; }
   .contact-page .contact-form { grid-template-columns: minmax(0, 1fr); gap: 17px; }
   .contact-consent, .contact-signoff { grid-column: auto; }
   .contact-consent { align-items: flex-start; line-height: 1.5; }
   .contact-consent input { margin-top: 3px; flex: 0 0 auto; }
   .contact-signoff { gap: 8px; font-size: .86rem; letter-spacing: .08em; text-align: center; }
   .contact-map { min-height: 300px; margin-top: 32px; }
   .contact-map iframe { min-height: 300px; }
}

@media (max-width: 479.98px) {
   .contact-appointment { padding: 0; }
   .contact-page .contact-layout { border-radius: 0; }
   .contact-page .contact-intro { min-height: 530px; padding: 34px 20px; }
   .contact-page .contact-form-card { padding-inline: 17px; }
   .contact-page .contact-field input,
   .contact-page .contact-field select,
   .contact-page .contact-field textarea { font-size: 16px; }
}
.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-form-alert { grid-column: 1 / -1; padding: .9rem 1rem; margin-bottom: .35rem; border: 1px solid; font-family: Montserrat, sans-serif; font-size: .9rem; }
.contact-form-alert.is-success { color: #214d32; background: #edf8f0; border-color: #9dcaab; }
.contact-form-alert.is-error { color: #721c24; background: #fff0f1; border-color: #e0a4a9; }
.contact-submit:disabled { opacity: .65; cursor: wait; }