/* VIP Auto Customs · Contact (contact.html). Page rules on top of css/home.css, which is linked first.
   After flatlineagency.com/contact-us, in this site's world: the top half is the page's one light band (warm white
   #F4F3EF, ink #0B0B0B), a huge thin serif headline with the four ways in under it on the left and an underline-only
   message form on the right; the bottom half is the ground with three location photo cards (tile parallax from
   js/home.js), then Back to top and the footer line.
   Contrast on the warm white: labels at 62% ink (5.4:1; 55% measures 4.2:1), body at 74%+, field hairlines at 50% ink
   (3.6:1, the 3:1 a control's edge needs); error text and the invalid edge use --red-ink #CC1B25 (#E3202A measures 4.2:1
   there, fine only for the 120px italic word). Red is spent once per screen: the italic word up top. */

:root{--red-ink:#CC1B25;--paper:#F4F3EF;--ink:#0B0B0B}

/* no JavaScript (or js/home.js never ran): the nav is ink in the markup, so it stays with the light band instead of
   floating over the dark one */
html:not(.js) .e-nav{position:absolute}
/* the menu overlay is dark, so js/contact.js drops e-on-light while it is open (html.menu-open) */

/* ---------------------------------------------------------------- (1) the light band */
.c-talk{--label:rgba(11,11,11,.62);--box:rgba(11,11,11,.5);--hair:rgba(11,11,11,.14);--text:#0B0B0B;--line:rgba(11,11,11,.5);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:56px clamp(48px,7vw,140px);
  padding:calc(var(--nav-h) + clamp(52px,8vh,96px)) max(var(--gutter),calc((100vw - 1440px) / 2)) clamp(88px,11.5vh,132px);
  background:var(--paper);color:var(--ink)}
.c-talk ::selection{background:var(--ink);color:var(--paper)}
.c-talk :focus-visible{outline-color:var(--ink)}
.c-talk .e-btn{color:var(--ink)}
.c-talk .e-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.c-talk__left{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.c-talk__title{font:300 clamp(64px,6.1vw,110px)/.98 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.025em;margin-left:-.04em}
.c-talk__title em{font-style:italic;color:var(--red)}
.c-talk__btn{margin-top:clamp(32px,4.4vh,48px)}

/* the four ways in: a 2×2 grid of tracked labels over their values */
.c-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vh,52px) clamp(32px,4vw,72px);width:100%;max-width:640px;margin-top:clamp(52px,8vh,96px)}
.c-way{min-width:0}
.c-way__label{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--hair);font:600 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}
.c-way dd{margin:0;font:300 16px/1.6 var(--sans);color:rgba(11,11,11,.86)}
.c-way address{font-style:normal}
.c-way a{color:var(--ink);text-decoration:none}
.c-way dd>a:not(.e-link):hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.c-way__tel{font-weight:500;font-size:18px}
.c-way__link{display:inline-block;margin-top:14px}
.c-hours{display:grid;gap:2px}
.c-hours div{display:flex;justify-content:space-between;gap:16px}
.c-hours dt{color:var(--label)}
.c-hours dd{margin:0}
.c-way .c-hours{max-width:250px}

/* the right column: one line, the small serif heading, the form */
.c-talk__right{min-width:0;max-width:620px;padding-top:clamp(8px,1.6vh,20px)}
.c-talk__line{max-width:46ch;font:300 18px/1.6 var(--sans);color:rgba(11,11,11,.8)}
.c-talk__sub{margin:clamp(44px,6.4vh,66px) 0 8px;font:300 clamp(28px,2.05vw,34px)/1.1 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.015em}

/* the form: no boxes; each field is a 1px hairline with its label sitting on the line as a placeholder, which rises
   and shrinks above it on focus or once filled (the placeholder=" " / :placeholder-shown pattern) */
.c-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,2.4vw,40px)}
.c-field{position:relative;padding-top:22px;margin-top:14px}
.c-field__input{display:block;width:100%;min-width:0;margin:0;padding:10px 0 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--ink);font:300 17px/1.45 var(--sans);-webkit-appearance:none;appearance:none;
  transition:border-color .4s var(--ease)}
.c-field__input:hover{border-bottom-color:rgba(11,11,11,.78)}
.c-field__input:focus{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.c-field__input:focus-visible{outline:none}
textarea.c-field__input{min-height:120px;resize:none}
.c-field__label{position:absolute;left:0;top:32px;font:300 17px/1.45 var(--sans);color:rgba(11,11,11,.62);pointer-events:none;
  transform-origin:0 0;transition:transform .5s var(--ease),color .5s var(--ease)}
.c-field__label span{margin-left:1px}
.c-field__input:focus+.c-field__label,.c-field__input:not(:placeholder-shown)+.c-field__label{transform:translateY(-30px) scale(.76);color:var(--label)}
.c-field__input[aria-invalid="true"]{border-bottom-color:var(--red-ink)}
.c-field__input[aria-invalid="true"]:focus{box-shadow:0 1px 0 var(--red-ink)}
.c-field__err{min-height:0;font:400 13px/1.5 var(--sans);color:var(--red-ink)}
.c-field__err:not(:empty){padding-top:8px}
.c-form__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.c-form__foot{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:36px}
.c-form__consent{max-width:34ch;font:300 13px/1.55 var(--sans);color:rgba(11,11,11,.7)}
.c-form__send{flex:none;min-width:148px;cursor:pointer}
.c-form__note{font:300 15px/1.6 var(--sans);color:var(--ink)}
.c-form__note:not(:empty){margin-top:24px;padding:14px 16px;border-left:1px solid var(--ink);background:rgba(11,11,11,.04)}
.c-form__note a{color:var(--ink);font-weight:500;white-space:nowrap}

/* ---------------------------------------------------------------- (2) the dark band: our locations */
.c-locs{padding:clamp(96px,13.5vh,152px) max(var(--gutter),calc((100vw - 1440px) / 2)) 0}
.c-locs__head{display:grid;gap:22px;margin-bottom:clamp(44px,6.4vh,66px)}
.c-locs__title{font:300 clamp(44px,4.05vw,66px)/1.02 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em}
.c-locs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,28px)}
.c-loc{min-width:0}
.c-loc .e-tile__media{aspect-ratio:4/3;background:var(--panel)}
.c-loc__mark{position:absolute;right:16px;bottom:14px;z-index:1;font:500 13px/1 var(--sans);letter-spacing:.02em;text-transform:none;color:rgba(242,241,237,.62)}
.c-loc__tag{margin-top:22px;font:400 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}
.c-loc__title{margin-top:12px;font:300 clamp(28px,2.2vw,37px)/1.08 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--text)}
.c-loc__text{margin-top:14px;max-width:36ch;font:300 15px/1.65 var(--sans);font-style:normal;color:rgba(242,241,237,.8)}
.c-loc__hours{max-width:260px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);font:300 14px/1.7 var(--sans);color:rgba(242,241,237,.8)}
.c-loc__hours dt{color:var(--dim)}
.c-loc__link{display:inline-block;margin-top:20px}
.c-locs__top{margin-top:clamp(88px,12.5vh,136px);padding-bottom:64px;text-align:center}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1199px) and (min-width:768px){
  .c-talk{grid-template-columns:1fr;gap:72px}
  .c-talk__right{max-width:720px;padding-top:0}
  .c-ways{max-width:720px}
  .c-locs__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
}

/* ---------------------------------------------------------------- phone */
@media (max-width:767px){
  .c-talk{grid-template-columns:1fr;gap:72px;padding:calc(var(--nav-h) + 48px) 20px 88px}
  .c-talk__title{font-size:64px}
  .c-ways{grid-template-columns:1fr;gap:28px;margin-top:56px}
  .c-way__label{margin-bottom:10px;padding-bottom:10px}
  .c-way .c-hours{max-width:none}
  .c-talk__right{padding-top:0}
  .c-talk__line{font-size:17px}
  .c-talk__sub{margin-top:44px;font-size:30px}
  .c-form__row{grid-template-columns:1fr}
  .c-form__foot{flex-direction:column;align-items:stretch}
  .c-form__send{width:100%}
  .c-locs{padding:88px 20px 0}
  .c-locs__head{margin-bottom:40px}
  .c-locs__title{font-size:44px}
  .c-locs__grid{grid-template-columns:1fr;gap:56px}
  .c-loc__hours{max-width:none}
  .c-locs__top{margin-top:88px;padding-bottom:56px}
}

@media (prefers-reduced-motion:reduce){
  .c-field__input,.c-field__label{transition:none}
}
@media print{
  .c-talk{padding-top:24px}
  .c-form{display:none}
}