/*
 * Contact page (Phase G) — breadcrumbs (.breadcrumbs), Hero (.page-hero,
 * .category-hero-art) and .actions/.button/.text-link are reused from
 * product-pages.css/components.css — nothing here duplicates those
 * selectors. The Hero reverted to that same shared dark .page-hero pattern
 * (matching About/History/Foundation) after a brief light-Hero redesign;
 * since .page-hero/.category-hero-art already live in product-pages.css,
 * which this page already loads, reusing them directly needed no CSS here
 * at all — unlike the page-scoped-duplication precedent used for .contact/
 * .contact-channels in about-page.css/foundation-page.css (that precedent
 * exists only because .contact is *also* reused with a different, lighter
 * treatment on the product-template pages; .page-hero has no such
 * conflicting reuse anywhere, so straight reuse is the correct approach here).
 *
 * Card treatment: the site has no single dedicated ".card" component.
 * The bordered-box style used here for the three info cards mirrors the
 * existing pattern already used for small content cards elsewhere
 * (.expertise-grid article / .pillars-grid article in about-page.css /
 * foundation-page.css: padding + 1px var(--color-line) border, no shadow).
 * The form card additionally uses the existing --shadow-soft token (already
 * defined in variables.css, currently used for decorative machine mockups
 * in pages.css) to read as the visually "elevated" primary action on the
 * page, exactly as the approved reference calls for — no new shadow value
 * was invented.
 */

.contact-columns{
display:grid;
grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:clamp(3rem,7vw,8rem);
background:#fff
}

.contact-info{
display:grid;
align-content:start
}
.contact-detail{
display:grid;
grid-template-columns:2.5rem minmax(0,1fr);
column-gap:1rem;
padding:1.35rem 0;
border-top:1px solid var(--color-line)
}
.contact-detail:last-child{
border-bottom:1px solid var(--color-line)
}
.info-icon{
grid-column:1;
grid-row:1;
display:flex;
align-items:flex-start;
justify-content:center;
padding-top:.1rem;
color:var(--color-teal-dark)
}
.contact-detail h3,
.contact-detail p{
grid-column:2
}
.contact-detail h3{
margin:0;
font-size:1rem
}
.contact-detail p{
margin:.35rem 0 0;
color:var(--color-muted);
font-size:.9rem;
line-height:1.55
}
.contact-detail p a{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--color-text)
}
.contact-detail p a:hover,
.contact-detail p a:focus-visible{
color:var(--color-teal-dark)
}
.info-icon-sm{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 1rem;
width:1rem;
height:1rem;
color:var(--color-teal-dark)
}
.info-icon-sm svg{
display:block;
width:1rem;
height:1rem
}

.contact-form-panel{
padding-left:clamp(2rem,5vw,5rem);
border-left:1px solid var(--color-line)
}
.contact-form-panel h2{
margin:0;
font-size:clamp(1.8rem,2.6vw,2.7rem)
}
.contact-form{
display:grid;
margin-top:var(--space-4);
gap:1.15rem
}
.field{
display:flex;
flex-direction:column;
gap:.45rem
}
.field label{
color:var(--color-primary);
font:500 13px/1.35 var(--font-sans);
letter-spacing:.01em;
text-transform:uppercase
}
.field-optional{
color:var(--color-muted);
text-transform:none;
letter-spacing:0;
font-weight:500
}
.form-input{
width:100%;
padding:.9rem 1rem;
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:var(--color-paper);
color:var(--color-text);
font:var(--text-base) var(--font-sans);
transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)
}
.form-textarea{
min-height:8.5rem;
resize:vertical
}
.form-input:hover{
border-color:color-mix(in srgb,var(--color-teal-dark) 45%,var(--color-line))
}
.form-input:focus-visible{
outline:0;
border-color:var(--color-teal-dark);
background:#fff;
box-shadow:0 0 0 3px color-mix(in srgb,var(--color-teal) 22%,transparent)
}
.form-privacy-note{
margin:.35rem 0 0;
max-width:42rem;
color:var(--color-muted);
font-size:.78rem;
line-height:1.6
}
.form-privacy-note a{
color:var(--color-teal-dark);
font-weight:700;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px
}
.form-privacy-note a:hover,
.form-privacy-note a:focus-visible{
color:var(--color-primary)
}
.contact-submit{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
margin-top:.35rem;
padding:1rem 1.15rem;
border:1px solid var(--color-primary);
border-radius:var(--radius-sm);
background:var(--color-primary);
color:#fff;
font:700 .9rem var(--font-sans);
cursor:pointer;
transition:background var(--transition),border-color var(--transition),transform var(--transition)
}
.contact-submit:hover{
background:var(--color-teal-dark);
border-color:var(--color-teal-dark);
transform:translateY(-2px)
}
.contact-submit:focus-visible{
outline:3px solid var(--color-teal-dark);
outline-offset:3px
}
.form-status{
margin:0;
padding:var(--space-2) var(--space-3);
border:1px solid var(--color-line);
background:var(--color-mist);
color:var(--color-primary);
font:var(--text-sm) var(--font-sans);
line-height:1.5
}
.form-status[data-state="error"]{
background:var(--color-paper)
}
.hp-field{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
left:-9999px
}

/* Location feature — reuses the homepage facility photography as a strong
   closing visual, with the live Google Maps embed taking the place of the
   homepage CTA copy. */
.contact-location-visual{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr);
align-items:center;
min-height:34rem;
overflow:hidden;
background:var(--color-primary)
}
.contact-location-image{
position:absolute;
inset:0;
z-index:0
}
.contact-location-image::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 86%,transparent),color-mix(in srgb,var(--color-primary) 56%,transparent))
}
.contact-location-image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center
}
.contact-location-map{
position:relative;
z-index:1;
width:min(34rem,calc(100% - (2 * var(--page-padding))));
margin-left:4.5vw;
padding:clamp(3rem,6vw,6rem) 0
}
.contact-location-map h2{
margin:0 0 var(--space-3);
color:#fff;
font-size:clamp(2rem,3.2vw,3.4rem);
line-height:1.05
}
.map-embed{
width:100%;
height:280px;
overflow:hidden;
border:1px solid rgba(255,255,255,.28);
border-radius:var(--radius-lg);
background:var(--color-paper);
box-shadow:0 1.5rem 4rem rgba(0,0,0,.24)
}
.map-embed iframe{
display:block;
width:100%;
height:100%;
border:0
}
.contact-location-link{
display:inline-flex;
align-items:center;
gap:.4rem;
margin-top:var(--space-3);
color:#fff;
font-weight:700;
text-decoration:none
}
.contact-location-link:hover,
.contact-location-link:focus-visible{
text-decoration:underline;
text-underline-offset:4px
}

@media (max-width:780px){
.contact-columns{
grid-template-columns:1fr;
gap:var(--space-5)
}
.contact-form-panel{
padding-left:0;
border-left:0
}
.contact-location-map{
width:calc(100% - 9vw);
margin-left:4.5vw;
padding:var(--space-5) 0
}
.map-embed{
height:260px
}
}

/* Contact hero: full photograph and HTML text card, matching Products/Documents.
   The source image is 1710 x 920; no gradients or text embedded in the image. */
.contact-hero.page-hero{
  position:relative;
  display:block;
  width:min(calc(100% - 2 * var(--page-padding)),1280px,calc((100svh - 112px) * 1.8587));
  aspect-ratio:1710 / 920;
  min-height:0;
  margin:clamp(12px,2vh,20px) auto;
  overflow:hidden;
  background:#f1f6f5;
}
.contact-hero-media img{
  display:block;
  width:100%;
  height:auto;
}
.contact-hero.page-hero>div:first-child{
  position:absolute;
  top:clamp(16px,2.5vw,34px);
  left:clamp(16px,2.5vw,34px);
  z-index:1;
  width:min(470px,calc(100% - 2 * clamp(16px,2.5vw,34px)));
  max-width:none;
  margin:0;
  padding:clamp(12px,1.4vw,17px);
  border-radius:14px;
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 38px rgba(13,48,48,.10);
  color:var(--color-primary);
}
.contact-hero.page-hero h1{
  margin:0 0 8px;
  font-size:clamp(1.75rem,2.2vw,2.2rem);
  line-height:1.12;
  letter-spacing:-.025em;
  font-weight:750;
  color:#103d37;
}
.contact-hero.page-hero p:not(.eyebrow){
  margin:0;
  max-width:none;
  color:#294b4a;
  font-size:clamp(.82rem,1vw,.95rem);
  line-height:1.5;
}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
  .contact-hero.page-hero{
    display:flex;
    flex-direction:column;
    width:100%;
    aspect-ratio:auto;
    margin:0;
  }
  .contact-hero-media{order:0}
  .contact-hero.page-hero>div:first-child{
    position:static;
    order:1;
    width:100%;
    max-width:none;
    padding:28px var(--page-padding) 36px;
    border-radius:0;
    background:#f1f6f5;
    box-shadow:none;
    text-align:center;
  }
  .contact-hero.page-hero h1{font-size:clamp(1.65rem,5.5vw,2.3rem)}
  .contact-hero.page-hero p:not(.eyebrow){max-width:33rem;margin-inline:auto;font-size:.95rem}
}

/* A warmer, editorial two-line headline aligned with the About page's
   bold + italic hierarchy; scoped to Contact EN/PT only. */
.contact-hero.page-hero>div:first-child{
  width:min(510px,calc(100% - 2 * clamp(16px,2.5vw,34px)));
  padding:clamp(18px,2vw,26px);
}
.contact-hero.page-hero h1{
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.1;
  letter-spacing:-.035em;
}
.contact-hero.page-hero h1 em{
  display:block;
  margin-top:.14em;
  font-weight:400;
  letter-spacing:-.03em;
}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
  .contact-hero.page-hero>div:first-child{
    width:100%;
    padding:28px var(--page-padding) 36px;
  }
  .contact-hero.page-hero h1{
    font-size:clamp(1.85rem,6vw,2.5rem);
  }
}