/* Contact page - FINAL (judge pick: draft C "Customer-first", with grafts from A and B; see final.md).
   Every number is from builder/pages-team/contact/SPEC.md (row in [ ]).
   Goes to css/pages/contact.css. All classes prefixed cox-. Tokens come from css/style.css :root. */

.cox{--cox-g:22px;--cox-reveal:cubic-bezier(.42,.46,.45,.99);color:var(--ink);background:var(--white);overflow-x:clip}   /* nav pad 22 [5.1] */
.cox *,.cox *::before,.cox *::after{box-sizing:border-box}
.cox-col{max-width:calc(980px + 2 * var(--cox-g));margin:0 auto;padding:0 var(--cox-g)}                                  /* 980 column [5.1] */
.cox-center{text-align:center}

/* ---------- type ---------- */
.cox-h1{font-size:64px;line-height:68px;font-weight:600;letter-spacing:-.576px;margin:0;text-align:center}               /* [3.1] */
.cox-h2{font-size:40px;line-height:44px;font-weight:600;letter-spacing:normal;margin:0}                                   /* [3.2] */
.cox-body,.cox-lead{font-size:17px;line-height:25px;font-weight:400;letter-spacing:-.374px;margin:0}                       /* [3.4] */
.cox-h2+.cox-body{margin-top:13.6px}                                                                                     /* [3.4] */
.cox-tout,.cox-legend{font-size:19px;line-height:23px;font-weight:600;letter-spacing:.228px;margin:0}                     /* [3.6] */
.cox-tout+.cox-body{margin-top:13.6px}                                                                                   /* [3.6] */
.cox-soft{color:var(--ink-2);font-weight:400}                                                                            /* [1.7] */

/* ---------- links (pink, no underline at rest, underline on hover, no transition) [1.11, 3.9, 7.2] ---------- */
.cox a{color:inherit;text-decoration:none}
.cox .cox-link,.cox .cox-more,.cox .cox-s-link{color:var(--link);font:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
@media (hover:hover){.cox .cox-link:hover,.cox .cox-s-link:hover,.cox-card:hover .cox-more{text-decoration:underline}}   /* [7.2]; no sticky underline on touch (graft A) */
.cox-link::after,.cox-more::after,.cox-s-link::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.3em;   /* 0.3em gap [2.4] */
  background:currentColor;vertical-align:.02em;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat}
.cox-ext::after{                                                                                                         /* external arrow [7.3] */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8l6-6M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8l6-6M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E")}
.cox a:focus-visible,.cox button:focus-visible{outline:2px solid var(--mag);outline-offset:1px}                          /* [1.16] links */
.cox .cox-card:focus-visible,.cox .cox-pill:focus-visible{outline-offset:3px}                                           /* [1.16] boxes; .cox prefix beats .cox a:focus-visible */

/* ---------- pill [7.1, 3.25, 1.12] ---------- */
.cox-pill{display:inline-flex;align-items:center;gap:.3em;min-width:26px;border-radius:980px;padding:11px 21px;border:1px solid transparent;
  background:var(--mag);color:#fff !important;font-size:17px;line-height:20px;font-weight:400;letter-spacing:-.374px;cursor:pointer}
@media (hover:hover){.cox-pill:hover{background:var(--mag-hover);text-decoration:none}}
.cox-pill:active{background:var(--mag-hover)}                                                                            /* [1.12] active (graft A) */
.cox-pill svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}   /* = label line height 20 */

/* ---------- 1. hero [3.1, 3.4, 3.13, 5.11] ---------- */
.cox-hero{padding:80px 0;text-align:center}                                                                             /* 80 top + bottom [3.1] */
.cox-lead{margin:13.6px auto 0;max-width:600px;text-wrap:balance}                                                                         /* [3.4]; 600 = 2 × 300 col [5.11] */
.cox-acts{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 40px}          /* 30 [3.4], 40 [5.11], 14 [7.4] */
.cox-acts .cox-link{font-size:17px;line-height:25px;letter-spacing:-.374px}                                             /* [3.9] */
.cox-facts{margin:30px 0 0;font-size:14px;line-height:20px;letter-spacing:-.224px;color:var(--ink-2)}                  /* [3.13, 1.7] */

/* ---------- 2. "What do you need?" cards on grey [3.18, 3.19, 3.23, 5.14, 7.7] ---------- */
.cox-need{background:var(--gray);padding:52px 0 40px}                                                                    /* H2 margin-top 52 [3.18]; ends on card margin-bottom 40 [5.13] */
.cox-cards{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}                          /* 26 [3.19]; gap 20 [5.14] */
.cox-card{display:flex;flex-direction:column;background:var(--white);border-radius:18px;padding:21px 31px;               /* [5.14, 7.7] */
  box-shadow:rgba(0,0,0,.04) 0 6px 16px -8px;transition:box-shadow .2s}                                                 /* [7.7, 8.7] */
.cox-card svg{width:35px;height:35px;fill:none;stroke:var(--mag);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}   /* icon box 35 [5.10] */
.cox-card-h{margin:13.6px 0 0;font-size:19px;line-height:23px;font-weight:600;letter-spacing:.228px}                    /* [3.23] */
.cox-card-p{margin:3px 0 0;font-size:17px;line-height:21px;letter-spacing:-.374px;flex:1}                                /* desc 17/21 +3 [3.23] */
.cox .cox-more{margin-top:13.6px;font-size:17px;line-height:25px;letter-spacing:-.374px}                                     /* [3.4, 3.9] */

/* ---------- 3. composer [5.4, 3.3, 7.4, 7.5, 7.1] ---------- */
.cox-sec{padding:50px 0}                                                                                                 /* [5.4] */
.cox-form{margin-top:33.6px}                                                                                             /* [3.3] */
.cox-field{border:0;margin:33.6px 0 0;padding:0;min-width:0}                                                             /* [3.3] */
.cox-field:first-child{margin-top:0}
.cox-legend{display:block;padding:0}
.cox-tiles{margin-top:13.6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}                        /* [3.6, 7.4] */
.cox-tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}                                                       /* 8 problems = 4+4, level rows */
.cox-tile{position:relative;display:block;cursor:pointer}
.cox-tile input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cox-tile span{display:block;border:1px solid var(--ink-3);border-radius:12px;background:rgba(255,255,255,.8);padding:15px; /* [7.4, 1.14, 1.15] */
  font-size:17px;line-height:21px;letter-spacing:normal;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none} /* [3.26]; graft A */
.cox-tile input:checked+span{border:2px solid var(--mag);padding:14px}                                                   /* size never jumps [7.4, 1.13] */
.cox-tile input:focus-visible+span{outline:2px solid var(--mag);outline-offset:3px}                                      /* [1.16] */
.cox-input{display:block;width:100%;margin-top:13.6px;height:56px;border:1px solid var(--ink-3);border-radius:12px;     /* [7.5] */
  background:rgba(255,255,255,.8);padding:0 16px;font:inherit;font-size:17px;line-height:21px;letter-spacing:-.374px;color:var(--ink)}
.cox-input::placeholder{color:var(--ink-2)}                                                                              /* [3.24] */
.cox-input:focus{outline:2px solid var(--mag);outline-offset:3px}
.cox-preview{margin-top:33.6px;background:var(--gray);border-radius:18px;padding:21px 31px}                              /* [3.3, 5.14, 7.7] */
.cox-preview-h{display:block;font-size:14px;line-height:18px;font-weight:600;letter-spacing:-.224px}                   /* [3.17] */
#wa-text{display:block;margin-top:13.6px;min-height:75px;white-space:pre-line;font-size:17px;line-height:25px;letter-spacing:-.374px} /* 3 × 25 */
.cox-send{margin-top:30px;text-align:center}                                                                             /* [3.4] */

/* ---------- 4. visit = Apple Store page [5.9, 3.10–3.16, 5.11, 5.12, 5.13, 7.8] ---------- */
.cox-store-head{padding:50px 0 56px;text-align:center;border-top:1px solid var(--line)}                                 /* divider on the 980 block [1.8, 5.4, 7.10]; 50 + 1 + 50 rhythm [5.4]; 56 below [5.9] */
.cox-star{width:35px;height:35px;fill:#800020;display:block;margin:0 auto 8px}                                           /* brand star [1.20]; 35 [5.10]; 8 [3.10] */
.cox-eyebrow{margin:0 0 8px;font-size:19px;line-height:23px;font-weight:600;letter-spacing:.228px}                        /* tout, ink [3.6] */
.cox-store-name{margin:0 0 8px;font-size:40px;line-height:44px;font-weight:600;letter-spacing:normal}                                          /* [3.10] */
.cox-status{margin:0;font-size:19px;line-height:27px;letter-spacing:.228px}                                              /* [3.11] */
.cox-summary{padding:40px 0 68px;display:grid;grid-template-columns:repeat(3,minmax(0,300px));gap:40px;justify-content:center}   /* [5.11] */
.cox-sum{display:flex;flex-direction:column;align-items:flex-start;font-size:14px;line-height:20px;letter-spacing:-.224px}    /* [3.13] */
.cox-sum-h{margin:0 0 20px;font-size:21px;line-height:25px;font-weight:600;letter-spacing:.231px}                        /* [3.12] */
.cox-addr{font-style:normal}
.cox .cox-s-link{font-size:14px;line-height:20px;letter-spacing:-.224px}                                                     /* [3.14] */
.cox-s-first{margin-top:2px}                                                                                             /* Maps link at +42 after a 40px-tall address [3.14] */
.cox-s-next,.cox-copy{margin-top:12px}                                                                                   /* next link at +32 [3.14] */
.cox-hours{margin:0;width:100%}
.cox-row{display:flex;justify-content:space-between;padding-bottom:6px}                                                  /* row 26 tall [5.12] */
.cox-row dt,.cox-row dd{margin:0}
.cox-row dd{text-align:right}                                                                                            /* [5.12] */
.cox-row.today{font-weight:600}                                                                                          /* today bold [3.15]; main.js adds .today */
.cox-foot{margin:10px 0 0;font-size:12px;line-height:16px;letter-spacing:-.12px;color:var(--ink-2)}                     /* [3.16] */
.cox-follow{margin:20px 0 0;display:flex;flex-direction:column;gap:12px}                                                 /* 20 [3.12]; 12 [3.14] */
.cox-map{height:394px;border-radius:18px;overflow:hidden;background:#e8e8ed;margin-bottom:40px}                         /* [5.13, 1.5, 7.8] */
.cox-map iframe{display:block;width:100%;height:100%;border:0}

/* ---------- 5. Good to know = apple.com/contact grey box [5.5, 5.6] ---------- */
.cox-last{padding-top:0;padding-bottom:0}
.cox-box{background:var(--gray);border:1px solid var(--line);border-radius:5px;padding:26px 0 50px;margin-bottom:60px}    /* [5.5] */
.cox-box-h{margin:0;text-align:center;font-size:28px;line-height:32px;font-weight:600;letter-spacing:.196px}           /* block H3 style [3.3] */
.cox-box-in{margin-top:36px;border:1px solid var(--line);padding:19px 36px 50px;                                     /* [5.6, 1.10]; 36 = centred H3 block margin-bottom [5.7] */
  display:grid;grid-template-columns:repeat(3,245.2px);justify-content:center;column-gap:75.66px}
.cox-box-in>div{margin-top:28px}                                                                                         /* [5.6] */

/* ---------- motion: only the site's data-in reveal, Apple store timing [8.2, 8.9] ---------- */
.js .cox [data-in]{transition:opacity .7s var(--cox-reveal),transform .7s var(--cox-reveal)}
@media (prefers-reduced-motion:reduce){
  .js .cox [data-in]{opacity:1;transform:none;transition:none}
  .cox-card{transition:none}
}

/* ---------- tablet ≤833 [breakpoint, 6.1, 6.3] ---------- */
@media (max-width:833px){
  .cox{--cox-g:16px}                                                                                                     /* 16px gutters OVERRIDE [6.1] */
  .cox-cards{grid-template-columns:1fr;gap:20px}                                                                         /* stack [6.3], 20 [6.10] */
  .cox-summary{grid-template-columns:1fr;gap:36px;padding:42px 0 35px}                                                   /* [6.8] */
  .cox-sum-hours{order:-1}                                                                                               /* hours first [6.8] */
  .cox-map{height:auto;aspect-ratio:16/9;margin-bottom:20px}                                                             /* [5.14, 6.10] */
  .cox-box{margin-left:calc(-1 * var(--cox-g));margin-right:calc(-1 * var(--cox-g));border-radius:0;border-left:0;border-right:0;
    padding:10px 0 35px;margin-bottom:40px}                                                                              /* full-bleed [6.5] */
  .cox-box-in{grid-template-columns:1fr;padding:19px 16px 50px;border-left:0;border-right:0}                             /* [6.5]; side borders off so text sits on the 16px gutter, not 17 */
  .cox-need{padding-bottom:20px}                                                                                         /* ends on card margin-bottom 20, same as map [6.10] */
}

/* ---------- phone ≤734 (matches css/style.css + about.css) [4.x] ---------- */
@media (max-width:734px){
  .cox-hero{padding:60px 0;text-align:left}                                                                              /* [4.1] */
  .cox-h1{font-size:36px;line-height:39.6px;letter-spacing:normal;text-align:left}                                      /* [4.1] */
  .cox-lead{margin-left:0}
  .cox-send{text-align:left}                                                                                             /* phone: pill + footnote left, like the hero pill */
  body.contact .ln-title,body.contact .ln-btn{position:relative}                                                         /* 44px tap area, nothing visible changes */
  body.contact .ln-title::before,body.contact .ln-btn::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .cox-center{text-align:left}                                                                                           /* phone section H2 left [4.2]; store head stays centred [4.5] */
  .cox-acts{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:14px}
  .cox-h2{font-size:28px;line-height:32px;letter-spacing:.196px}                                                        /* [4.2] */
  .cox-need{padding-top:38px}                                                                                            /* [4.8]; bottom 20 from ≤833 [6.10] */
  .cox-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cox-field,.cox-form,.cox-preview{margin-top:25.2px}                                                                   /* [4.3] */
  .cox-pill{font-size:14px;line-height:18px;letter-spacing:-.308px;min-height:44px;padding:12px 21px}                    /* 14/18 text, 44 tall tap target */
  .cox .cox-s-link,.cox-acts .cox-link{display:inline-flex;align-items:center;min-height:44px}                           /* 44px tap targets on phone */
  .cox-s-first,.cox-s-next,.cox-copy{margin-top:0}
  .cox-follow{gap:0;margin-top:8px}
  .cox-acts{gap:0}
  .cox-pill svg{width:18px;height:18px}
  .cox-preview{padding:21px 16px}                                                                                        /* 16 sides [6.5] */
  .cox-store-head{padding:50px 0 44px}                                                                                   /* 50 equal to composer bottom [5.4]; 44 [6.6] */
  .cox-store-name{font-size:28px;line-height:36px;margin-bottom:7px}                                                     /* [4.5] */
  .cox-status{font-size:14px;line-height:20px;letter-spacing:-.224px}                                                    /* [4.6] */
  .cox-box-h{font-size:21px;line-height:25px;letter-spacing:.231px}                                                     /* [4.3] */
}

.cox-copy::after{display:none}                                                                                           /* button, not a link: no chevron */