/* Contact page — extracted for smaller HTML parse / FCP */
/* CONSULTATION JOURNEY */
.consult{ padding:0 var(--gut) var(--s7); }
.consult-shell{ position:relative; border:1px solid var(--line); background:var(--bg-1); display:grid; grid-template-columns:0.85fr 1.15fr; min-height:560px; overflow:hidden; }
@media (max-width:880px){ .consult-shell{ grid-template-columns:1fr; } }
.consult-aside{ position:relative; padding:clamp(32px,4vw,60px); border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.consult-aside .ph{ position:absolute; inset:0; z-index:0; opacity:.4; }
.consult-aside-in{ position:relative; z-index:2; }
@media (max-width:880px){ .consult-aside{ border-right:none; border-bottom:1px solid var(--line); min-height:200px; } }
.ca-steps{ display:flex; flex-direction:column; gap:14px; margin-top:var(--s4); }
.ca-step{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); transition:color .4s; }
.ca-step .dot{ width:7px; height:7px; border-radius:50%; border:1px solid var(--ink-faint); transition:.4s; flex-shrink:0; }
.ca-step.active{ color:var(--ink); }
.ca-step.active .dot{ background:var(--azure); border-color:var(--azure); box-shadow:0 0 0 4px var(--azure-glow); }
.ca-step.done{ color:var(--ink-soft); cursor:pointer; }
.ca-step.done:hover{ color:var(--azure-bright); }
.ca-step.done .dot{ background:var(--ink-soft); border-color:var(--ink-soft); }
.ca-steps-hint{ display:none; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-top:12px; }

.consult-main{ position:relative; padding:clamp(32px,4vw,64px); display:flex; flex-direction:column; }
.consult-hint{ display:none; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--azure); margin-bottom:var(--s3); }
.consult-hint-icon{ width:22px; height:22px; border:1px solid var(--azure); display:inline-flex; align-items:center; justify-content:center; font-size:12px; line-height:1; flex-shrink:0; animation:consultHintPulse 2.4s ease-in-out infinite; }
.consult-hint.is-dismissed{ display:none !important; }
@keyframes consultHintPulse{ 0%,100%{ opacity:.65; box-shadow:0 0 0 0 rgba(44,154,212,0); } 50%{ opacity:1; box-shadow:0 0 0 4px rgba(44,154,212,0.12); } }
.consult-top{ display:flex; align-items:center; gap:16px; margin-bottom:var(--s4); }
.consult-track{ flex:1; height:1px; background:var(--line); position:relative; }
.consult-fill{ position:absolute; left:0; top:0; height:1px; background:var(--azure); transition:width .7s var(--e-out); }
.consult-ix{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); }
.consult-ix b{ color:var(--azure); font-weight:400; }

.cstage{ position:relative; flex:1; min-height:300px; }
.cstep{ position:absolute; inset:0; opacity:0; transform:translateY(22px); pointer-events:none; transition:opacity .55s var(--e-out), transform .55s var(--e-out); }
.cstep.on{ position:relative; opacity:1; transform:none; pointer-events:auto; }
.cstep .cq{ font-family:var(--serif); font-weight:300; font-size:clamp(28px,3.4vw,46px); line-height:1.04; letter-spacing:-0.01em; }
.cstep .cq em{ font-style:italic; color:var(--azure-bright); }
.cstep .chint{ font-family:var(--serif); font-size:16px; color:var(--ink-soft); margin-top:10px; max-width:40ch; }

.cfield{ position:relative; margin-top:var(--s4); }
.cfield label{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); transition:color .4s; }
.cfield input{ width:100%; font-family:var(--serif); font-size:24px; color:var(--ink); padding:10px 0 12px; border-bottom:1px solid var(--line-strong); }
.cfield input::placeholder{ color:var(--ink-faint); font-style:italic; }
.cfield .ul{ position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--azure); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e-out); }
.cfield.focus .ul{ transform:scaleX(1); }
.cfield.focus label{ color:var(--azure); }
.cfield-phone .phone-row{ display:flex; align-items:baseline; gap:10px; border-bottom:1px solid var(--line-strong); }
.cfield-phone .phone-row input{ border-bottom:none; padding-bottom:12px; }
.cfield-phone .phone-prefix{ flex:0 0 auto; font-family:var(--serif); font-size:24px; color:var(--ink-dim); padding:10px 0 12px; letter-spacing:.04em; user-select:none; }
.cfield-phone .ul{ bottom:0; }

.copts{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:var(--s3); }
@media (max-width:520px){ .copts{ grid-template-columns:1fr; } }
.copt{ position:relative; text-align:left; padding:16px 18px; border:1px solid var(--line); transition:border-color .4s, background .4s; overflow:hidden; }
.copt .on-name{ font-family:var(--serif); font-size:19px; color:var(--ink); display:block; }
.copt .on-d{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-top:5px; display:block; }
.copt:hover{ border-color:var(--line-strong); background:var(--bg-2); }
.copt.sel{ border-color:var(--azure); background:var(--azure-glow); }
.copt.sel .on-name{ color:var(--azure-bright); }
.copt-hint{ display:none; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--azure); margin-top:14px; }
.copt-hint.is-dismissed{ display:none !important; }

.cerr{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-top:12px; min-height:14px; opacity:0; transition:opacity .3s; }
.cerr.show{ opacity:.9; }

.cnav{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line-soft); }
.cback{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); display:inline-flex; align-items:center; gap:8px; transition:color .3s, gap .4s; }
.cback:hover{ color:var(--ink); gap:13px; }
.cback[hidden]{ visibility:hidden; }

.cdone{ text-align:left; }
.cdone .seal{ width:56px; height:56px; margin-bottom:var(--s3); }

/* LOCATIONS */
.locs{ padding:var(--s7) var(--gut); border-top:1px solid var(--line-soft); }
.locs-intro{ max-width:52ch; margin-top:14px; font-size:14px; line-height:1.65; color:var(--ink-soft); }
.locs-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,20px); margin-top:var(--s4);
  align-items:stretch;
}
@media (max-width:880px){ .locs-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .locs-grid{ grid-template-columns:1fr; } }
.loc{
  position:relative; background:var(--bg-1); border:1px solid var(--line);
  padding:clamp(22px,2.4vw,32px); height:100%;
  display:flex; flex-direction:column; gap:0;
  transition:background .45s var(--e-out), border-color .45s var(--e-out), transform .45s var(--e-out), box-shadow .45s var(--e-out);
  overflow:hidden;
}
.loc::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%, rgba(44,154,212,0.07), transparent 55%);
  opacity:0; transition:opacity .45s var(--e-out);
}
.loc:hover{ background:var(--bg-2); border-color:var(--line-strong); transform:translateY(-4px); box-shadow:0 24px 48px rgba(0,0,0,0.35); }
.loc:hover::before{ opacity:1; }
.loc-top{
  display:flex; align-items:baseline; gap:10px 14px;
  padding-bottom:18px; border-bottom:1px solid var(--line-soft); margin-bottom:18px;
  flex-shrink:0;
}
.loc .lno{
  font-family:var(--mono); font-size:10px; color:var(--azure); letter-spacing:.14em;
  flex-shrink:0; line-height:1; padding-top:0.35em;
}
.loc-city{
  font-family:var(--serif); font-weight:300; font-size:clamp(26px,2.8vw,34px);
  line-height:1.08; color:var(--ink); margin:0; flex:1; transition:color .4s;
}
.loc:hover .loc-city{ color:var(--brass-bright); }
.loc-body{
  flex:1 1 auto; display:flex; flex-direction:column; min-height:0;
}
.loc-brand{
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 12px; flex-shrink:0;
}
.loc-addr{
  font-size:13px; line-height:1.55; color:var(--ink-soft); margin:0; flex-shrink:0;
  min-height:calc(1.55em * 3);
}
.loc-meta{
  display:flex; flex-direction:column; gap:12px; margin:16px 0 0; padding:0; list-style:none;
  flex-shrink:0;
}
.loc-meta li{ display:grid; grid-template-columns:1fr; gap:4px; }
.loc-meta .lm-k{
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); line-height:1.2;
}
.loc-meta .lm-v{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; min-height:1.45em; }
.loc-actions{
  display:flex; flex-direction:column; gap:8px;
  margin-top:auto; padding-top:20px; flex-shrink:0;
}
.loc-btn{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:10px; row-gap:2px; align-items:center; width:100%;
  padding:12px 14px; border:1px solid var(--line); border-radius:2px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,0.02);
  transition:background .35s var(--e-out), border-color .35s var(--e-out), color .35s var(--e-out), transform .35s var(--e-out);
  min-height:44px;
}
.loc-btn svg{ width:16px; height:16px; grid-row:1 / -1; fill:currentColor; opacity:.85; }
.loc-btn:hover{ transform:translateY(-1px); }
.loc-btn--maps{
  min-height:58px;
  background:linear-gradient(135deg, rgba(44,154,212,0.14), rgba(44,154,212,0.06));
  border-color:rgba(44,154,212,0.35); color:var(--azure-bright);
}
.loc-btn--maps:hover{ background:var(--azure); border-color:var(--azure); color:#04222f; }
.loc-btn--maps:hover svg{ opacity:1; }
.loc-btn--maps .loc-btn-label{ grid-column:2; grid-row:1; align-self:end; }
.loc-btn-hint{
  grid-column:2; grid-row:2; font-size:9px; letter-spacing:.08em; text-transform:none;
  color:var(--ink-dim); font-family:var(--sans); font-weight:300; line-height:1.35;
}
.loc-btn--maps:hover .loc-btn-hint{ color:rgba(4,34,47,0.75); }
.loc-btn--call{ grid-template-rows:1fr; min-height:44px; }
.loc-btn--call .loc-btn-label{ grid-column:2; }
.loc-btn--call:hover{ border-color:var(--brass); color:var(--brass-bright); background:rgba(194,162,105,0.08); }

/* DIRECT CONTACT */
.direct{ padding:var(--s6) var(--gut) var(--s7); border-top:1px solid var(--line-soft); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:880px){ .direct{ grid-template-columns:1fr; gap:var(--s3); } }
.direct .dlabel{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:12px; }
.direct .dval{ font-family:var(--serif); font-size:clamp(22px,2.2vw,32px); color:var(--ink); }
.direct .dval a:hover{ color:var(--azure-bright); }

/* ============================================================
   CONSULTATION JOURNEY — EACH STEP FEELS LIKE A ROOM
   ============================================================ */

/* Step container transitions */
.cstep { transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }

/* Step 0 — Reception: formal, welcoming, brass tone */
.cstep[data-step="0"] .cq { color: var(--ink); }
.cstep[data-step="0"] .cq em { color: var(--brass-bright); }
.cstep[data-step="0"] .cfield .ul { background: var(--brass); }
.cstep[data-step="0"] .cfield.focus label { color: var(--brass); }

/* Step 1 — Studio entrance: professional, azure tone */
.cstep[data-step="1"] .cq em { color: var(--azure-bright); }
.cstep[data-step="1"] .cfield .ul { background: var(--azure); }
.cstep[data-step="1"] .cfield.focus label { color: var(--azure-bright); }

/* Step 2 — city type-in with auto region detect */
.city-detect{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:var(--azure-bright); margin-top:10px; min-height:14px;
}
.city-detect.is-unknown{ color:var(--brass); }
.cstep[data-step="2"] .cfield .ul { background: var(--azure); }
.cstep[data-step="2"] .cfield.focus label { color: var(--azure-bright); }

/* Step 3 — Material library: tactile, warm brass */
.cstep[data-step="3"] .cq em { color: var(--brass-bright); }
.cstep[data-step="3"] .copt { border-color: rgba(194,162,105,0.15); }
.cstep[data-step="3"] .copt:hover { border-color: rgba(194,162,105,0.4); background: rgba(194,162,105,0.05); }
.cstep[data-step="3"] .copt.sel { border-color: var(--brass); background: rgba(194,162,105,0.12); }
.cstep[data-step="3"] .copt.sel .on-name { color: var(--brass-bright); }

/* Step 4 — Sitting across the designer: intimate, warm */
.cstep[data-step="4"] .cq em { color: var(--brass-bright); }
.cstep[data-step="4"] .cfield .ul { background: var(--brass); }
.cstep[data-step="4"] .cfield.focus label { color: var(--brass); }
.cstep[data-step="4"] .chint { font-style: italic; color: var(--ink-soft); }

/* Step 5 — Confirmation: sealed, complete */
.cstep[data-step="5"] .kicker { color: var(--brass); }
.cstep[data-step="5"] .cq em { color: var(--brass-bright); }

/* Progress fill changes color per step */
.consult-fill { transition: width 0.7s cubic-bezier(0.16,1,0.3,1), background 0.7s; }

/* Consultation shell atmosphere */
.consult-shell { background: var(--bg-1); box-shadow: 0 40px 120px rgba(0,0,0,0.5); }
.consult-aside { background: linear-gradient(180deg, rgba(16,13,8,0.95), rgba(10,8,5,0.98)); }
.consult-main { background: linear-gradient(135deg, #0a0c10, #0c0e14); }

/* Step indicator dots */
.ca-step.active .dot { background: var(--brass); border-color: var(--brass); box-shadow: 0 0 0 4px rgba(194,162,105,0.2); }
.ca-step.done .dot { background: var(--azure); border-color: var(--azure); }

/* Cinematic step transition */
.cstage { perspective: 800px; }
.cstep.on { animation: stepEnter 0.65s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes stepEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Location cards — hover lift only (actions are explicit buttons) */
.loc { transition: background 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s, border-color 0.45s, box-shadow 0.45s; }

/* Darken consultation aside so sidebar text is readable */
.consult-aside .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8,10,14,0.78) 0%,
    rgba(8,10,14,0.76) 50%,
    rgba(8,10,14,0.80) 100%
  );
  z-index: 1;
}
.consult-aside-in { z-index: 2; position: relative; }

/* ============================================================
   MOBILE & TABLET RESPONSIVE — Contact.html
   ============================================================ */
@media (max-width: 880px) {
  .phead { padding: 120px var(--gut) var(--s4); }
  .phead h1 { font-size: clamp(36px,8vw,72px); }
  .consult-shell { grid-template-columns: 1fr; }
  .consult-aside { min-height: auto; padding: 24px 20px; border-right: none; border-bottom: 1px solid var(--line); }
  .consult-aside .ph-tag { display: none; }
  .ca-steps { gap: 10px; margin-top: var(--s3); }
  .ca-step { font-size: 10px; }
  .ca-steps-hint { display: block; }
  .consult-aside .cap { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid rgba(255,255,255,0.08); font-size: 9px; line-height: 1.5; }
  .consult-main { padding: 28px 20px 40px; }
  .consult-hint { display: flex; }
  .copt-hint { display: block; }
  .copts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .copt { cursor: pointer; min-height: 56px; }
  .cstage { flex: 0 1 auto; min-height: 150px; }
  .cnav { flex-direction: row; justify-content: space-between; gap: 12px; margin-top: var(--s2); padding-top: var(--s2); }
  .cnav .btn { flex: 1; justify-content: center; min-height: 48px; }
  .consult { padding-bottom: 84px; }
  .locs { padding: 84px var(--gut); }
  .locs-grid { grid-template-columns: repeat(2,1fr); margin-top: var(--s3); align-items: stretch; }
  .loc-addr { min-height: calc(1.55em * 4); }
  .follow { padding: 38px var(--gut); }
  .direct { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3) var(--gut); }
}
@media (max-width: 520px) {
  .copts { grid-template-columns: 1fr; }
  .locs-grid { grid-template-columns: 1fr; }
  .loc-addr { min-height: 0; }
  .loc-btn { min-height: 48px; padding: 14px 16px; }
  .loc-btn--maps { min-height: 62px; }
  .copt { padding: 14px 16px; }
  .cstep .cq { font-size: clamp(24px,6vw,36px); }
}