/* ===== Brand tokens ===== */
:root{
  --ink:#191919;
  --steel:#00364D;
  --ocean:#006B99;
  --sky:#00B3FF;
  --sun:#F5F749;
  --fog:#dcddde;
  --line:#A0A0A0;
  --white:#fff;
  --field-side-pad: 42px;
}

/* Make sure anything with [hidden] truly disappears */
[hidden]{display:none !important}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Kumbh Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--white); line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{
  font-family:"PT Sans",Arial,Helvetica,sans-serif;
  margin:0 0 .5rem 0; color:var(--steel);
}
h1{font-size:clamp(28px,4vw,42px)}
h2{font-size:clamp(22px,3vw,30px)}
p{margin:.4rem 0}
a{color:var(--ocean); text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Layout ===== */
.container{max-width:1120px; margin:0 auto; padding:0 16px}
.section{padding:48px 0}

/* ===== HERO ===== */
header.hero.hero--banner{
  background:#00364D;
  color:#fff;
  padding:64px 0 56px;
}
header.hero.hero--banner .container{display:flex; justify-content:center}
header.hero.hero--banner .hero-copy{text-align:center; margin:0 auto; max-width:720px}
header.hero.hero--banner h1{color:#F5F749}
header.hero.hero--banner .hero-logo{display:block; height:45px; width:auto; margin:0 auto 18px}

/* ===== Grid helpers ===== */
.grid{display:grid; column-gap:14px; row-gap:14px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid .tight{gap:10px}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* Spacing between form rows inside cards */
fieldset.card > .grid { margin-top: 20px; }
fieldset.card > .grid:first-of-type { margin-top: 0; }

/* ===== Card / Form ===== */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 18px 18px;
}

/* Visually hidden */
.visually-hidden{
  position:absolute !important; height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* In-card titles */
.request-title{
  font-family:"PT Sans", Arial, Helvetica, sans-serif;
  font-weight:700;
  font-size:clamp(20px,2.6vw,24px);
  color:var(--steel);
  text-align:center;
  margin:4px 0 14px;
}

/* Labels & Inputs centered */
label{font-weight:400; font-size:.95rem; display:block; text-align:center}

/* Inputs & dropdowns */
input,select,textarea{
  width:100%;
  margin-top:10px;
  padding:12px var(--field-side-pad);
  border:1.5px solid #cfd3d8;
  border-radius:999px;
  font:inherit; background:#fff;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  text-align:center;
}
input::placeholder{text-align:center}
/* Center textarea placeholder to match Quantity field style */
textarea::placeholder{ text-align:center }

/* Prefer a standard rounded rectangle for textareas */
textarea{ border-radius:16px; min-height:140px; resize:vertical }

/* Centering fixes */
input[type="date"],
select{ text-align:center; text-align-last:center; padding-left:var(--field-side-pad); padding-right:var(--field-side-pad) }
@supports (-webkit-appearance: none){ select{ text-indent:0; text-align-last:center } }
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-date-and-time-value{ text-align:center }
input[type="date"]::-webkit-calendar-picker-indicator{ margin-right:12px }
input[type="date"]{ text-align:center; padding-left:0; padding-right:0; position:relative }
input[type="date"]::-webkit-datetime-edit{ text-align:center; width:100% }
input[type="date"]::-webkit-calendar-picker-indicator{ position:absolute; right:20px; transform:translateY(-50%); top:50% }

/* Select chevron */
select{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-origin:content-box;
}
option{text-align:center}

input:focus,select:focus,textarea:focus{
  border-color:var(--ocean);
  outline:3px solid rgba(0,107,153,.18);
}

/* Required note */
.required-note{color:#4a4f55; font-size:.9rem; margin-bottom:10px}
.required-note.centered{text-align:center}

/* Control disclaimer line breaks for desktop vs mobile */
.desktop-break { display: inline; }
.mobile-break { display: none; }

@media (max-width: 768px) {
  .desktop-break { display: none; }
  .mobile-break { display: inline; }
}

/* Combo headings */
.combo > span{display:block; font-weight:700; font-size:.95rem; margin:2px 0; text-align:center}

/* Address blocks */
.address-card{ margin-top:20px }
.address-title{
  font-weight:700; color:var(--steel); text-align:center;
  margin:6px 0 10px; font-size:1rem;
}
.address-grid label input{ text-align:center }

/* Illustration */
.illustration{margin:40px auto; display:flex; justify-content:center}
.illustration-img{width:100%; max-width:1200px; height:auto; border-radius:12px; display:block}

/* Add (+) button */
.add-wrap{display:flex; justify-content:center; margin:20px 0 34px}
.add-circle{
  width:56px; height:56px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#00364D; color:#fff; border:0; cursor:pointer;
  font-size:32px; line-height:1; font-weight:700;
}
.add-circle:hover{ background-color:#F5F749; color:#00364D; transition:background-color .3s ease, color .3s ease }
.add-circle:focus{ outline:3px solid var(--sky); outline-offset:2px }

/* ===== Buttons (shared) ===== */
.btn{
  border:none;
  border-radius:999px;
  padding:.75rem 1.5rem;
  font-weight:bold;
  font-size:1rem;
  cursor:pointer;
  transition:background-color .3s ease, color .3s ease, opacity .2s ease;
}
.btn--primary{ background-color:#00364D; color:#FFFFFF; }
.btn--primary:hover{ background-color:#F5F749; color:#00364D; }
.btn[disabled]{ opacity:.7; cursor:not-allowed }

/* Submit row */
.form-actions{display:flex; justify-content:center; align-items:center; margin-top:20px}

/* Add spacing between Submit button and disclaimer */
.form-actions + .required-note {
  margin-top: 24px; /* increase or decrease as needed */
}

.g-recaptcha {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* Request 2-column layout */
.request-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:20px }
@media (max-width:900px){ .request-grid{ grid-template-columns:1fr } }

/* Spacing between request blocks */
.request-block{ margin-bottom:30px }

/* Request-level action row (centered) */
.request-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ===== Footer ===== */
.site-footer{ background-color:#dcddde; padding:4rem 2rem 2rem; }
.footer-content{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:4rem;
  max-width:1200px;
  margin:0 auto;
  padding:0 0 1rem 0;
}
.footer-left{ flex:1 1 420px; min-width:280px; }
.footer-section{ flex:1 1 320px; min-width:260px; }
.footer-logo{ max-width:200px; margin-bottom:1rem; display:block; height:auto }
.footer-item{ display:flex; align-items:flex-start; gap:.75rem; margin:.4rem 0 }
.footer-item i{ color:#00364D; margin-top:.25rem }
.footer-left a{ color:#00364D; text-decoration:underline }
.footer-section h4{ font-size:1.1rem; color:#006B99; margin:.25rem 0 .5rem; font-family:'Kumbh Sans',sans-serif }
.social-icons{ display:flex; gap:1rem; margin:.25rem 0 1rem }
.social-icons a{ font-size:1.2rem; color:#00364D; transition:color .3s ease }
.social-icons a:hover{ color:#F5F749 }
.btn-link{ text-decoration:underline; color:#00364D }
.footer-bottom{ text-align:center; margin-top:1.25rem; font-size:.92rem; color:#333 }

@media (max-width:900px){
  .footer-content{ flex-direction:column; gap:1.5rem; text-align:center; }
  .footer-item{ justify-content:center }
  .social-icons{ justify-content:center }
}

/* Scroll to top */
#scrollToTop{
  position:fixed; bottom:2rem; right:2rem;
  background-color:#00364D; color:#FFFFFF;
  border:none; border-radius:50%;
  width:50px; height:50px; font-size:1.25rem;
  cursor:pointer; opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
  z-index:999;
}
#scrollToTop.show{ opacity:1; visibility:visible; }
#scrollToTop:hover{ background-color:#F5F749; color:#00364D; }

/* ===== SUCCESS MODAL ===== */
.modal-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); z-index:1000;
}
.modal{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  width:min(92vw,880px); padding:34px 24px 28px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal h2{
  font-family:"PT Sans", Arial, Helvetica, sans-serif;
  color:var(--steel);
  font-size:clamp(28px,4vw,42px);
  margin:4px 0 12px;
}
.modal p{
  font-size:1.15rem;
  margin:6px 0 14px;
}

/* === Global Header & Label Colors === */
.request-title,
.address-title { color: #006b99; }
label { color: #191919; }

/* ==== Normalize spacing inside address sections ==== */
.address-card .grid { row-gap: 14px; }
.address-card .grid + .grid { margin-top: 14px; }
.address-card label { margin-top: 0; }
.address-card input,
.address-card select { margin-top: 10px; }

/* Mobile-only footer fixes (non-destructive) */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;      /* stack cleanly */
    align-items: center;         /* center the blocks */
    gap: 1.25rem;                /* even spacing */
    text-align: center;
  }
  .footer-left, .footer-section {
    flex: 1 1 auto;
    min-width: 0;                /* prevent weird wrapping */
    width: 100%;
  }
  .footer-item {                 /* address lines, phones, emails */
    justify-content: center;
    text-align: center;
  }
  .social-icons {                /* center social row */
    justify-content: center;
  }
  .footer-logo {                 /* keep logo tidy on narrow phones */
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-bottom {               /* copyright line */
    text-align: center;
  }
}

/* Show appropriate illustration per device */
.desktop-img { display: block; }
.mobile-img { display: none; }

@media (max-width: 768px) {
  .desktop-img { display: none; }
  .mobile-img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
}

/* Adjust spacing for Additional Details section inside each request */
.request-title {
  margin-top: 24px !important; /* increase space above header */
  margin-bottom: 0px !important; /* tighten gap below header */
}

.request textarea {
  margin-top: 0 !important;
}