/* ========================================================================
   Freight World — contact page-scoped styles
   Inherits the LOCKED system (assets/styles.css). Adds only what this page
   needs, all under body.page-contact so nothing leaks to other inner pages.
   Consumes shared tokens; never re-derives them. Mobile-first (375).
   This is the WORKING-SLICE page: it carries the route + quote configurator
   (shared .c-route / #quoteForm contract, driven by the shared app.js) plus
   the full enquiry form and the real office directory.
   ======================================================================== */

/* ---- HERO VARIANT (secondary to home: label + tight 2-line title + wide
        plate; deliberately NOT the home's full slogan h1) ---- */
body.page-contact .c-chero{position:relative;min-height:auto;
  padding:7rem var(--pad) 2.5rem;display:grid;gap:1.6rem}
body.page-contact .c-chero__label{font-family:var(--sub);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
body.page-contact .c-chero__title{font-size:clamp(2.9rem,15vw,6rem);color:var(--ink)}
body.page-contact .c-chero__title span{display:block}
body.page-contact .c-chero__media img{width:100%;aspect-ratio:16/13;object-fit:cover}
body.page-contact .c-chero__intro{font-size:.96rem;color:var(--ink-soft);max-width:42ch;line-height:1.6}

/* ---- QUICK CONTACT LINES (hairline-divided rows) ---- */
body.page-contact .c-quick{padding-block:clamp(2rem,6vw,3.5rem);display:grid;gap:0}
body.page-contact .c-quick__item{display:grid;gap:.45rem;padding-block:1.5rem;
  border-top:1px solid var(--line);transition:color .2s}
body.page-contact .c-quick__item:last-child{border-bottom:1px solid var(--line)}
body.page-contact a.c-quick__v:hover{color:var(--accent)}
body.page-contact .c-quick__k{font-family:var(--sub);font-weight:700;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
body.page-contact .c-quick__v{font-size:clamp(1.3rem,5.5vw,2rem);color:var(--ink);transition:color .2s;
  display:inline-block;word-break:break-word}

/* ---- ENQUIRY FORM (real enquiry types from the client contact page) ---- */
body.page-contact .c-enquiry{padding-block:clamp(3rem,9vw,6rem)}
body.page-contact .c-enquiry__head{margin-bottom:2.4rem}
body.page-contact .c-enquiry__intro{font-size:clamp(1.4rem,6vw,2.4rem);max-width:24ch;margin-top:1.1rem}

body.page-contact .c-form{display:grid;gap:1.8rem}
body.page-contact .c-form__demo{font-family:var(--sub);font-weight:700;font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
body.page-contact .c-form__grid{display:grid;gap:1.4rem}
body.page-contact .c-field--text{display:grid;gap:.5rem}
body.page-contact .c-field--text label{font-family:var(--sub);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
body.page-contact .c-field--text label span{color:var(--accent)}
body.page-contact .c-form input,
body.page-contact .c-form textarea,
body.page-contact .c-form__select{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-flat);
  padding:.9em 1em;width:100%;transition:border-color .2s}
body.page-contact .c-form textarea{resize:vertical;min-height:7.5em;line-height:1.5}
body.page-contact .c-form input::placeholder,
body.page-contact .c-form textarea::placeholder{color:#6a6a6a}
body.page-contact .c-form input:focus,
body.page-contact .c-form textarea:focus,
body.page-contact .c-form__select:focus{outline:none;border-color:var(--accent)}
body.page-contact .c-form__select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FEFEFE' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;padding-right:2.4em}
body.page-contact .c-form__count{font-size:.78rem;color:var(--ink-soft)}
body.page-contact .c-form__status{font-family:var(--sub);font-weight:700;font-size:.95rem;
  color:var(--accent);padding:.9em 1em;border:1px solid var(--accent);border-radius:var(--r-flat)}
body.page-contact .c-form .c-btn{justify-self:start}

/* ---- OFFICE DIRECTORY (real addresses; flat photo-less editorial cards) ---- */
body.page-contact .c-offices{padding-block:clamp(3rem,9vw,6rem)}
body.page-contact .c-offices__head{margin-bottom:2.6rem}
body.page-contact .c-offices__intro{font-size:clamp(1.4rem,6vw,2.4rem);max-width:30ch;margin-top:1.1rem}
body.page-contact .c-offices__group{margin-bottom:2.8rem}
body.page-contact .c-offices__cat{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.6rem,7vw,2.6rem);color:var(--ink);line-height:1;
  padding-bottom:1.1rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem}
body.page-contact .c-office-grid{display:grid;gap:0}
body.page-contact .c-office{display:grid;gap:.4rem;padding-block:1.5rem;border-top:1px solid var(--line)}
body.page-contact .c-office:first-child{border-top:0}
body.page-contact .c-office__name{font-size:clamp(1.3rem,5.5vw,1.9rem);color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em}
body.page-contact .c-office--hq .c-office__name,
body.page-contact .c-office--regional .c-office__name,
body.page-contact .c-office--global .c-office__name{color:var(--ink)}
body.page-contact .c-office__tag{font-family:var(--sub);font-weight:600;font-size:.62em;
  letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}
body.page-contact .c-office__addr{color:var(--ink-soft);font-size:.94rem;line-height:1.55;max-width:46ch}
body.page-contact .c-office__lines{font-size:.92rem;color:var(--ink-soft)}
body.page-contact .c-office__lines a{transition:color .2s}
body.page-contact .c-office__lines a:hover{color:var(--accent)}
body.page-contact .c-offices__note{margin-top:1.6rem;color:var(--ink-soft);font-size:.92rem;
  line-height:1.6;max-width:60ch}

/* ---- HOURS + CTA STRIP ---- */
body.page-contact .c-hours{padding-block:clamp(3rem,9vw,6rem);display:grid;gap:2rem;
  border-top:1px solid var(--line)}
body.page-contact .c-hours__k{font-family:var(--sub);font-weight:700;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:.8rem}
body.page-contact .c-hours__v{font-size:clamp(2rem,9vw,3.4rem);color:var(--ink);margin-bottom:1rem}
body.page-contact .c-hours__note{color:var(--ink-soft);font-size:.96rem;line-height:1.6;max-width:46ch}
body.page-contact .c-hours__cta{justify-self:start}

/* page-local route formlead (matches the network page's lead treatment) */
body.page-contact .c-route__formlead{font-size:clamp(1.4rem,6vw,2rem);color:var(--ink-inverse);
  margin-bottom:.4rem}

/* ---- DESKTOP ---- */
@media (min-width:760px){
  body.page-contact .c-chero{grid-template-columns:1.05fr .95fr;align-items:center;
    column-gap:3.5rem;row-gap:2rem;padding-top:8rem;padding-bottom:4rem}
  body.page-contact .c-chero__head{grid-column:1;grid-row:1}
  body.page-contact .c-chero__media{grid-column:2;grid-row:1/3}
  body.page-contact .c-chero__media img{aspect-ratio:4/5}
  body.page-contact .c-chero__intro{grid-column:1;grid-row:2;max-width:40ch;align-self:start}

  body.page-contact .c-quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  body.page-contact .c-quick__item{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    border-right:1px solid var(--line);padding:1.6rem 1.4rem}
  body.page-contact .c-quick__item:first-child{padding-left:0}
  body.page-contact .c-quick__item:last-child{border-right:0;padding-right:0}

  body.page-contact .c-form__grid{grid-template-columns:1fr 1fr;gap:1.6rem}
  body.page-contact .c-field--full{grid-column:1/-1}

  body.page-contact .c-office-grid{grid-template-columns:1fr 1fr;column-gap:3rem;row-gap:0}
  body.page-contact .c-office{border-top:1px solid var(--line)}
  body.page-contact .c-office:nth-child(2){border-top:1px solid var(--line)}

  body.page-contact .c-hours{grid-template-columns:1fr auto;align-items:center;gap:3rem}
  body.page-contact .c-hours__cta{justify-self:end}
}

@media (min-width:1100px){
  body.page-contact .c-office-grid{grid-template-columns:repeat(3,1fr);gap:0 3rem}
}