/* Vanity Ink v2: Contact (after pages.css and v2.css).
   Reach a person (left): the shared details table (Phone, Email), the copy's two notes, then Instagram and Facebook as the
   house's glyph links, stacked. Finding our tattoo shop on Kipling Street (right): under the map, as before; its heading
   is longer now, so it steps down a little. The hero's "Get directions" button shows at every width (it is not the
   booking button the bar replaces on phones). Elementor: as the old Contact (spec 6.8); the social links an Icon List. */
.reach .visit-details{margin-top:4px}
.reach .contact-table{margin-top:20px}
.reach-note{margin-top:28px}
.reach p{text-wrap:pretty;max-width:520px}
.social-links{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px}
.contact-finding h2{font-size:var(--h2-sm);line-height:1.2}
.contact-finding .link-row{margin-top:18px}

/* 10-07: the left column carries Phone, hours and Instagram (the details table with the day-by-day hours) and, under it,
   Send us a message (Book's form in its glass box); the right keeps the map and Finding our tattoo shop. The map no
   longer stretches to the taller left column: a fixed shape, and the right column sticks while the form scrolls past.
   Elementor: 2-column container; left a Heading + Text + table + Icon List, then a Pro Form; right Google Maps + Text. */
.contact{align-items:start}
.contact-main{display:flex;flex-direction:column;gap:72px;min-width:0}
.contact-side .map-frame{flex:none;min-height:0;aspect-ratio:4/3}
@media (min-width:1024px){.contact-side{position:sticky;top:120px}}
.msg-form h2{font-size:var(--h2-sm);margin-bottom:10px}
.msg-form .lead{margin-bottom:28px;text-wrap:pretty}
.msg-form .lead a{color:var(--text);border-bottom:1px solid var(--purple)}
.reach .contact-table .hours{margin:0}
@media (max-width:767px){.contact-main{gap:48px}}

/* 10-13 copy: the details row reads "Call or text" (wider label column, so it stays on one line), and Parking is a
   fact now: one row of the same details table under Finding our tattoo shop's two paragraphs.
   Elementor: the same table recipe as the visit details (an Icon List or a two-column inner container). */
@media (min-width:768px){.reach .contact-table>tbody>tr>th{width:140px}}
.park-table{margin-top:22px}
@media (min-width:768px){.park-table th{width:110px}}
/* 10-13: the longer H1 wraps before the chair panel instead of running into its armrest (same type size as every hero) */
@media (min-width:1024px){.page-hero h1{max-width:760px}}

/* ===== Layout 3 (Tannis 10-13): the message form 60% left; the details as icon blocks 40% right (call or text, visit us,
   hours, follow us); the map across the container under them, Finding our shop on a glass card over its left side.
   Elementor: a 2-column container (60 / 40: Pro Form | Icon Box x4); Google Maps with an absolutely positioned inner
   container. ===== */
.c-top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:64px;align-items:start}
.c-form{margin:0}
.c-side p{text-wrap:pretty}
.contact-finding h2{margin-bottom:14px}
.contact-finding p{text-wrap:pretty}
.c-ico{display:block;flex:none;width:32px;height:32px}

/* Layout 3: the details as icon blocks with hairlines between; the map across the page, Finding on a card over it */
.c-blocks{display:flex;flex-direction:column}
.c-blk{display:flex;gap:18px;padding:26px 0;border-top:1px solid rgba(200,200,204,.16)}
.c-blk:first-child{border-top:0;padding-top:4px}
.c-blk h3{font-size:var(--h3-sm);margin:4px 0 10px}
.c-blk p{margin:0 0 8px}
.c-blk .hours{margin:0}
.c-big{font:500 20px/1.3 var(--sans);letter-spacing:.04em}
.c-big a,.c-blk p a{color:var(--text)}
.c-blk .social-links{margin-top:4px}
.c3-map-sec{padding-top:24px}
.c3-map{position:relative}
.c3-map .map-frame{aspect-ratio:21/9;min-height:420px}
.c3-card{position:absolute;left:56px;top:50%;translate:0 -50%;z-index:3;width:min(420px,40%);padding:36px 32px}

@media (max-width:1023px){
  .c-top{grid-template-columns:minmax(0,1fr);gap:48px}
  .c3-map .map-frame{aspect-ratio:4/3;min-height:0}
  .c3-card{position:static;translate:none;width:auto;margin-top:16px}
}