/* /contact-us/ : section styles ported from the batch-2 master contact-us.html.
   Globals (reset/body/.wrap/.eyebrow/tokens + .reveal) come from style.css. The
   master's bespoke .hero is renamed .contact-hero here so it does NOT collide with
   the global full-viewport homepage .hero; it stays the master's COMPACT invitation
   band (not 100svh). Flat theme vocabulary: hairline --line borders, no shadow/radius.
   The request form is CF7 14546 rendered inside .form-card; its fields use the .field
   wrappers below, so the CF7 markup inherits the master form styling. */

  .eyebrow{font-family:'Archivo';font-weight:500;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);}

  /* hero: lighter than service heroes, an invitation not a statement (compact, NOT full-viewport) */
  .contact-hero{padding:190px 0 70px;background:radial-gradient(90% 90% at 85% 0%, rgba(201,166,115,.10), rgba(201,166,115,0) 55%);}
  .contact-hero .eyebrow{margin-bottom:22px;display:block;}
  .contact-hero h1{font-size:clamp(2.6rem,6vw,5rem);max-width:15ch;margin-bottom:24px;}
  .contact-hero h1 em{font-family:'Fraunces';font-style:italic;color:var(--accent);font-size:1.02em;}
  .contact-hero .sub{color:var(--ink-soft);font-size:1.22rem;max-width:54ch;}
  .contact-hero .sub em{font-family:'Fraunces';font-style:italic;color:var(--accent);}

  /* main two-column: channels + form */
  .contact{padding:60px 0 110px;}
  .cgrid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;}
  @media(max-width:880px){.cgrid{grid-template-columns:1fr;gap:50px;}}

  .channels .ch{padding:26px 0;border-top:1px solid var(--line);}
  .channels .ch:first-of-type{border-top:none;padding-top:0;}
  .channels .lbl{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
  .channels .big{font-family:'Archivo';font-weight:400;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;display:inline-block;}
  .channels a.big:hover{color:var(--accent);}
  .channels .big.addr{font-size:1.2rem;line-height:1.5;}
  .channels .small{font-size:.95rem;color:var(--ink-soft);margin-top:4px;}
  .channels .small.work{font-size:1rem;}
  .channels .hours{margin-top:6px;font-family:'Fraunces';font-style:italic;color:var(--ink-soft);font-size:1rem;}

  /* form (CF7 14546 inside .form-card) */
  .form-card{background:var(--paper-deep);border:1px solid var(--line);padding:46px 44px;}
  .form-card h3{font-size:1.5rem;margin-bottom:8px;}
  .form-card h3 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .form-card .fnote{color:var(--ink-soft);font-size:.96rem;margin-bottom:28px;}
  .field{margin-bottom:18px;}
  .field label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;}
  .field .wpcf7-form-control-wrap{display:block;}
  .field input,.field select,.field textarea{width:100%;background:var(--paper);border:1px solid var(--line);padding:13px 15px;font-family:'Archivo';font-weight:300;font-size:1rem;color:var(--ink);transition:border-color .3s;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
  /* Chrome anchors the native select chevron to the control edge (padding does not move it),
     so suppress it (appearance:none, incl. -webkit/-moz) and draw a custom chevron. Stroke is
     the theme --ink literal #16191c (data URIs cannot use var()); border/height/font untouched. */
  .field select{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    padding-right:44px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2316191c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:14px;
  }
  .field textarea{resize:vertical;min-height:96px;}
  .submit{width:100%;font-family:'Archivo';font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:none;padding:17px;cursor:pointer;transition:background .4s;margin-top:8px;}
  .submit:hover{background:var(--accent);}
  .form-card .priv{margin-top:18px;font-size:.82rem;color:var(--ink-soft);line-height:1.5;}
  /* CF7 feedback (flat, theme-toned) */
  .form-card .wpcf7-not-valid-tip{color:#a3301d;font-size:.78rem;margin-top:6px;}
  .form-card input.wpcf7-not-valid,.form-card select.wpcf7-not-valid,.form-card textarea.wpcf7-not-valid{border-color:#a3301d;}
  .form-card .wpcf7-response-output{margin:18px 0 0;padding:12px 15px;border:1px solid var(--line);font-size:.88rem;color:var(--ink-soft);}
  /* mobile: trim the form-card's 46px 44px so its fields aren't double-inset (40px global .wrap +
     44px card = 84px each side on a phone, far tighter than the page's other sections at the 40px
     wrap). 32px 24px matches the card-padding scale used elsewhere on the page (.feature 40/32,
     .specialist 36/30). Side padding only matters; .wrap (global) is untouched. */
  @media(max-width:560px){ .form-card{ padding:32px 24px; } }

  /* what happens next */
  .next{background:var(--night);color:var(--night-text);padding:110px 0;}
  .next .eyebrow{color:#c79a5e;}
  .next h2{color:#efe4d2;font-size:clamp(2rem,4vw,3rem);margin:18px 0 50px;max-width:24ch;}
  .next h2 em{font-family:'Fraunces';font-style:italic;color:#d9b783;}
  .next .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
  .nstep .i{font-family:'Fraunces';font-style:italic;color:#c9a673;font-size:1.4rem;margin-bottom:14px;}
  .nstep h3{color:#efe4d2;font-size:1.3rem;margin-bottom:10px;}
  .nstep p{color:#a89c84;font-size:.98rem;}
  @media(max-width:820px){.next .steps{grid-template-columns:1fr;gap:30px;}}

  /* beyond Dubai */
  .reach{padding:110px 0;}
  .reach .inner{max-width:760px;border-left:2px solid var(--accent);padding-left:34px;}
  .reach .eyebrow{margin-bottom:18px;display:block;}
  .reach h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-bottom:22px;}
  .reach h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .reach p{color:var(--ink-soft);font-size:1.1rem;margin-bottom:18px;}
  .reach p strong{color:var(--ink);font-weight:400;}