/* ---------- Contact page: the "Concierge" look ---------- */
.ct{color:#1B1417; overflow-x:clip}
.ct h1,.ct h2,.ct h3{font-family:'Outfit','Plus Jakarta Sans',sans-serif; margin:0; color:#1B1417}
.ct p{margin:0}
:where(.ct) p{color:inherit}
.ct a{transition:transform .3s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .3s var(--ease)}
.ct a:focus-visible,.ct button:focus-visible{outline:3px solid #B91C1C; outline-offset:3px}
.ct-kick{display:inline-block; font:600 .7rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.2em; text-transform:uppercase; color:#B91C1C}

.ct-ico{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#B91C1C; color:#fff}
.ct-ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* hero: headline and paragraphs beside the "Get in Touch" card */
.ct-hero{position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center; padding-top:56px; padding-bottom:48px}
.ct-hero::before{content:""; position:absolute; z-index:-1; width:560px; aspect-ratio:1; right:-120px; top:-200px; border-radius:50%; background:radial-gradient(circle,rgba(220,38,38,.2),transparent 65%); pointer-events:none}
.ct-hero h1{margin:16px 0 18px; font-size:clamp(2.4rem,6vw,5rem); font-weight:800; line-height:.96; letter-spacing:-.045em}
.ct-p1,.ct-p2{max-width:56ch; font-size:1.04rem; line-height:1.7}
.ct-p1{color:#3A3034}
.ct-p2{margin-top:12px !important; color:#5B5054}

.ct-touch{background:#17110F; color:#fff; border-radius:26px; padding:30px; box-shadow:0 40px 60px -36px rgba(23,17,15,.8)}
.ct-touch h2{color:#fff; font-size:1.3rem; font-weight:800; letter-spacing:-.02em; margin-bottom:18px}
.ct-it{display:flex; align-items:center; gap:14px; padding:16px 0; border-top:1px solid rgba(255,255,255,.12); color:#fff}
.ct-it .ct-ico{background:#2A2024; transition:background .25s}
.ct-it:hover .ct-ico{background:#DC2626}
.ct-tx{display:grid; gap:2px; min-width:0}
.ct-lbl{font:600 .62rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; opacity:.7}
.ct-val{font-weight:800; font-size:1.02rem; word-break:break-word}
.ct-arr{margin-left:auto; flex:none; opacity:.6; transition:transform .3s var(--ease), opacity .25s}
.ct-it:hover .ct-arr{transform:translateX(4px); opacity:1}

/* How can we help */
.ct-help{padding-top:24px; padding-bottom:56px}
.ct-help h2,.ct-commit h2{font-size:clamp(1.7rem,3.8vw,2.8rem); font-weight:800; line-height:1; letter-spacing:-.035em}
.ct-help h2{margin-bottom:26px}
.ct-hgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.ct-hc{display:grid; grid-template-rows:auto 1fr; background:#fff; border:1px solid #E7DFDA; border-radius:22px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .4s var(--ease)}
.ct-hc:hover{transform:translateY(-4px); box-shadow:0 30px 44px -30px rgba(153,27,27,.5)}
.ct-im{position:relative; aspect-ratio:16/10; overflow:hidden; background:#EADFDA}
.ct-im img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease)}
.ct-hc:hover .ct-im img{transform:scale(1.05)}
.ct-bd{position:relative; padding:34px 24px 26px; color:#5B5054; line-height:1.65}
.ct-bd .ct-ico{position:absolute; top:-23px; left:22px; box-shadow:0 12px 20px -10px rgba(185,28,28,.8)}
.ct-bd h3{font-size:1.12rem; font-weight:800; letter-spacing:-.01em; margin-bottom:8px}

/* the message form */
.ct-formwrap{scroll-margin-top:90px}
.ct-form{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); background:#fff; border:1px solid #E7DFDA; border-radius:28px; overflow:hidden; box-shadow:0 40px 60px -46px rgba(27,20,23,.5)}
.ct-side{position:relative; isolation:isolate; color:#fff; padding:40px; display:grid; align-content:end; min-height:420px}
.ct-side>img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 30%}
.ct-side::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(18,8,10,.25),rgba(18,8,10,.9))}
.ct-side h2{color:#fff; font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:800; line-height:1; letter-spacing:-.035em}
.ct-side p{margin-top:12px; color:#F0E6E8; line-height:1.65}
.ct-fm{padding:40px}
.ct-fm .alert{margin-bottom:16px}
.ct-fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ct-full{grid-column:1 / -1}
.ct-fld label{display:block; margin-bottom:6px; font-size:.78rem; font-weight:700; color:#3A3034}
.ct-fld input,.ct-fld select,.ct-fld textarea{width:100%; height:52px; padding:0 16px; border:1.5px solid #DCD3CE; border-radius:12px; background:#fff; color:#1B1417; font:500 .96rem 'Plus Jakarta Sans',system-ui,sans-serif; transition:border-color .2s, box-shadow .2s}
.ct-fld textarea{height:140px; padding:14px 16px; resize:vertical}
.ct-fld input::placeholder{color:#A99FA3}
.ct-fld input:focus,.ct-fld select:focus,.ct-fld textarea:focus{outline:0; border-color:#B91C1C; box-shadow:0 0 0 4px rgba(220,38,38,.14)}
.ct-send{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:56px; margin-top:18px; border:0; border-radius:13px; background:#B91C1C; color:#fff; font:800 .94rem 'Plus Jakarta Sans',sans-serif; letter-spacing:.1em; cursor:pointer; box-shadow:0 18px 30px -20px rgba(185,28,28,.9); transition:transform .3s var(--ease), background .25s}
.ct-send:hover{background:#991B1B; transform:translateY(-2px)}
.ct-send svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ct-note{margin-top:12px !important; text-align:center; font-size:.82rem; color:#8A7F83 !important}

/* Our Commitment */
.ct-commit{padding-top:64px; padding-bottom:72px; text-align:center}
.ct-commit h2{margin-bottom:14px}
.ct-commit>p{max-width:60ch; margin:0 auto; color:#5B5054; font-size:1.06rem; line-height:1.75}

/* closing line: one wide photograph with thin type over it, no box around anything */
.ct-plate{position:relative; isolation:isolate; display:grid; align-content:end; min-height:520px; overflow:hidden; color:#fff; background:#17110F}
.ct-plate-img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 38%; transform-origin:30% 60%}
.ct-plate::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(18,10,8,.15) 0%,rgba(18,10,8,.38) 40%,rgba(18,10,8,.84) 100%)}
.ct-plate-in{padding-top:56px; padding-bottom:52px}
.ct-plate-br{display:block; margin-bottom:20px; font:500 .66rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.38em; text-transform:uppercase; color:rgba(255,255,255,.8)}
.ct-hair{display:block; height:1px; margin-bottom:26px; background:#fff; opacity:.8; transform-origin:left}
.ct-plate-row{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr); gap:32px; align-items:end}
.ct .ct-plate h2{margin:0; color:#fff; font-family:'Outfit','Plus Jakarta Sans',sans-serif; font-weight:200; font-size:clamp(2.4rem,7.4vw,6.4rem); line-height:.98; letter-spacing:-.035em; text-transform:uppercase}
.ct-w{display:inline-block}
.ct-w{margin-right:.28em}
.ct-w:last-child{margin-right:0}
.ct-sub{padding-bottom:6px; font:italic 500 clamp(1.2rem,2.2vw,1.8rem)/1.25 'Cormorant Garamond',Georgia,'Times New Roman',serif; color:#F6EDEA}

/* slow entrance, played once when the plate scrolls into view (contact.js adds .play) */
.ct-plate.play .ct-plate-img{animation:ctSettle 5s var(--slow,cubic-bezier(.16,.7,.2,1)) both}
.ct-plate.play .ct-plate-br{animation:ctFade 1.2s .4s var(--slow,cubic-bezier(.16,.7,.2,1)) both}
.ct-plate.play .ct-hair{animation:ctGrow 1.8s .5s var(--slow,cubic-bezier(.16,.7,.2,1)) both}
.ct-plate.play .ct-w{animation:ctRise 1.4s var(--slow,cubic-bezier(.16,.7,.2,1)) both}
.ct-plate.play .ct-w:nth-child(1){animation-delay:.9s}
.ct-plate.play .ct-w:nth-child(2){animation-delay:1.1s}
.ct-plate.play .ct-w:nth-child(3){animation-delay:1.3s}
.ct-plate.play .ct-sub{animation:ctFade 1.4s 1.8s var(--slow,cubic-bezier(.16,.7,.2,1)) both}
.ct-plate.armed .ct-plate-br,.ct-plate.armed .ct-w,.ct-plate.armed .ct-sub{opacity:0}
.ct-plate.armed .ct-hair{transform:scaleX(0)}
@keyframes ctFade{from{opacity:0}to{opacity:1}}
@keyframes ctRise{from{opacity:0; transform:translateY(40%)}to{opacity:1; transform:none}}
@keyframes ctGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ctSettle{from{transform:scale(1.12)}to{transform:scale(1)}}
@media (max-width:820px){
  .ct-plate-row{grid-template-columns:minmax(0,1fr); gap:20px}
}
@media (max-width:980px){
  .ct-hero{grid-template-columns:minmax(0,1fr); gap:32px; padding-top:36px}
  .ct-hgrid{grid-template-columns:minmax(0,1fr)}
  .ct-im{aspect-ratio:3/2}
  .ct-form{grid-template-columns:minmax(0,1fr)}
  .ct-side{min-height:260px; padding:28px 24px}
  .ct-fm{padding:28px 22px}
}
@media (max-width:560px){
  .ct-touch{padding:22px 20px}
  .ct-fgrid{grid-template-columns:minmax(0,1fr)}
  .ct-commit{padding-top:48px; padding-bottom:48px}
  .ct-plate{min-height:440px}
  .ct-plate-in{padding-top:36px; padding-bottom:34px}
  .ct-plate-row{grid-template-columns:minmax(0,1fr); gap:20px}
  .ct-w{display:block}
  .ct-w{margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  .ct a,.ct-send,.ct-im img,.ct-hc{transition:none}
  .ct-hc:hover,.ct-send:hover{transform:none}
  .ct-plate *,.ct-plate-img{animation:none !important}
}