/* =====================================================================
   SB Development | 1 Oak — Contact page (v2)
   Loads after home.css. Hero with channels, form + office map, direct lines.
   ===================================================================== */

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.ch{position:relative;background:var(--ink);color:var(--bone);overflow:hidden;isolation:isolate}
.ch-media{position:absolute;inset:0;z-index:-2}
.ch-media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;opacity:.55;transform:scale(1.08);animation:chSettle 3s var(--ease) forwards;filter:saturate(.85)}
@keyframes chSettle{to{transform:scale(1.02)}}
.ch-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,18,.72) 0%,rgba(13,15,18,.35) 40%,rgba(13,15,18,.9) 100%),linear-gradient(90deg,rgba(13,15,18,.65),rgba(13,15,18,.1) 55%)}
.ch-grain{position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ch .wrap{position:relative;padding-top:calc(var(--hdr-h) + 30px);padding-bottom:clamp(44px,6vw,80px)}
.ch-top{font-family:var(--bebas);display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:rgba(244,241,234,.6);opacity:0;animation:fade 1s var(--ease) .2s forwards}
.ch-crumb{display:inline-flex;align-items:center;gap:12px}
.ch-crumb a{color:rgba(244,241,234,.6);transition:color .3s}
.ch-crumb a:hover{color:var(--bone)}
.ch-crumb i{width:22px;height:1px;background:var(--bronze);display:inline-block}
.ch-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:end;padding-top:clamp(56px,8vw,120px)}
.ch-eyebrow{font-family:var(--bebas);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:16px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:rgba(244,241,234,.78);opacity:0;animation:fade 1s var(--ease) .3s forwards}
.ch-eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--bronze)}
.ch-title{font-family:var(--serif);font-weight:400;font-size:clamp(84px,14vw,220px);line-height:.88;letter-spacing:.01em;margin:18px 0 0}
.ch-title em{font-style:normal;color:inherit}
.ch-title .line{display:block;overflow:hidden;padding:0 .1em .14em .1em;margin:0 -.1em -.14em -.1em}
.ch-title .line > span{display:block;transform:translateY(130%);animation:rise 1.1s var(--ease) .25s forwards}
.ch-title .line:nth-child(2) > span{animation-delay:.38s}
.ch-sub{max-width:46ch;margin-top:clamp(22px,3vw,34px);color:rgba(244,241,234,.82);font-size:clamp(15px,1.25vw,18px);line-height:1.65;opacity:0;animation:fade 1.1s var(--ease) .7s forwards}
.ch-channels{display:grid;gap:6px;max-width:440px;justify-self:end;width:100%;opacity:0;animation:fade 1.1s var(--ease) .85s forwards}
.ch-chan{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:12px;padding:8px 12px 8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(13,15,18,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--bone);
  transition:transform .5s var(--ease),border-color .4s,background .4s}
.ch-chan:hover{transform:translateX(6px);border-color:rgba(160,160,157,.6);background:rgba(13,15,18,.6)}
.ch-chan .ico{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);color:var(--bronze)}
.ch-chan .ico svg{width:15px;height:15px}
.ch-chan .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ch-chan small{font-family:var(--bebas);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.55)}
.ch-chan b{font-family:var(--sans);font-size:15.5px;font-weight:400;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-chan .go{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:inline-flex;align-items:center;justify-content:center;transition:background .4s,color .4s,transform .5s var(--ease)}
.ch-chan .go svg{width:12px;height:12px}
.ch-chan:hover .go{background:var(--bronze);color:var(--ink);border-color:var(--bronze);transform:rotate(45deg)}
@media(max-width:900px){.ch-grid{grid-template-columns:1fr;gap:34px}.ch-side{display:none}.ch-title{font-size:clamp(84px,22vw,160px)}}

/* ---------------------------------------------------------------
   Form + offices
   --------------------------------------------------------------- */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.ct-intro .h2{margin-top:18px;max-width:12ch}
.ct-intro .muted{margin-top:22px;max-width:46ch;font-size:16.5px;line-height:1.7}
.ct-intro-lines{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:15px}
.ct-intro-lines a{display:inline-flex;align-items:center;gap:10px;color:var(--text);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s}
.ct-intro-lines a:hover{border-color:var(--bronze)}
.ct-intro-lines svg{width:15px;height:15px;color:var(--bronze)}

/* map */
.ct-map{position:relative;height:clamp(420px,58vh,620px);border-radius:22px;overflow:hidden;background:var(--ink);color:var(--bone);border:1px solid rgba(255,255,255,.08);box-shadow:0 50px 90px -50px rgba(13,15,18,.7);isolation:isolate}
.ct-map-head{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(180deg,rgba(13,15,18,.85),rgba(13,15,18,0));pointer-events:none}
.ct-map-head > *{pointer-events:auto}
.ct-map-head .eyebrow{color:var(--bronze);font-size:13px}
.ct-map-fit{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(13,15,18,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)}
.ct-map-fit button{font-family:var(--bebas);height:30px;padding:0 12px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,234,.7);transition:background .3s,color .3s}
.ct-map-fit button:hover{color:var(--bone)}
.ct-map-fit button.active{background:var(--bronze);color:var(--ink)}
.ct-map-canvas{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .9s var(--ease)}
.ct-map.is-ready .ct-map-canvas{opacity:1}
.ct-map-canvas .gm-style .gm-style-cc,.ct-map-canvas .gmnoprint a,.ct-map-canvas .gm-style a img{filter:grayscale(1) opacity(.6)}
.ct-map-fallback{position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center}
.ct-map.is-failed .ct-map-fallback{display:flex}
.ct-map.is-failed .ct-map-canvas{display:none}
.ct-pin{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%) scale(0);transition:transform .6s var(--ease)}
.ct-pin.in{transform:translate(-50%,-50%) scale(1)}
.ct-pin i{position:absolute;left:50%;top:50%;width:13px;height:13px;border-radius:50%;background:var(--bronze);border:2px solid var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.3);transform:translate(-50%,-50%)}
.ct-pin span{position:absolute;left:50%;top:50%;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--bronze);transform:translate(-50%,-50%) scale(2.6);opacity:.4}

/* office cards */
.ct-offices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(26px,3vw,36px)}
.ct-office{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--text);transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.ct-office:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(21,23,27,.45);border-color:rgba(160,160,157,.55)}
.ct-office.active{border-color:var(--bronze);box-shadow:0 0 0 3px rgba(160,160,157,.22)}
.ct-office .k{font-family:var(--bebas);display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.ct-office .k i{width:6px;height:6px;border-radius:50%;background:var(--bronze);opacity:0;transition:opacity .3s}
.ct-office.active .k i{opacity:1}
.ct-office .addr{font-family:var(--sans);font-size:clamp(16px,1.25vw,18px);line-height:1.2}
.ct-office .addr small{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:3px}
.ct-office .dir{font-family:var(--bebas);display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.ct-office .dir svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.ct-office:hover .dir svg{transform:translate(2px,-2px)}
@media(max-width:1000px){.ct-grid{grid-template-columns:1fr}.ct-intro .h2{max-width:none}}
@media(max-width:640px){.ct-offices{grid-template-columns:1fr}.ct-map{height:min(52vh,420px)}}

/* ---------------------------------------------------------------
   Direct lines
   --------------------------------------------------------------- */
.ct-lines{padding-block:clamp(56px,7vw,96px)}
.ct-desks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.ct-desk{position:relative;display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2vw,26px);border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.55);color:var(--text);isolation:isolate;overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s,background .5s}
.ct-desk::before{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--bronze-soft),transparent);opacity:0;transition:opacity .6s;z-index:-1}
.ct-desk:hover{transform:translateY(-6px);box-shadow:0 40px 70px -44px rgba(21,23,27,.5);border-color:rgba(160,160,157,.55);background:#fff}
.ct-desk:hover::before{opacity:1}
.ct-desk .n{font-family:var(--bebas);font-size:15px;letter-spacing:.3em;color:var(--bronze)}
.ct-desk h3{font-family:var(--serif);font-size:clamp(20px,1.6vw,24px);font-weight:400;line-height:1.1;margin-top:4px;max-width:12ch}
.ct-desk p{font-size:14px;line-height:1.6;color:var(--muted)}
.ct-desk .who{display:block;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--text);word-break:break-word}
.ct-desk .who small{display:block;margin-top:4px;font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.ct-desk .go{position:absolute;right:18px;top:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.ct-desk .go svg{width:14px;height:14px}
.ct-desk:hover .go{background:var(--ink);color:var(--bone);border-color:var(--ink);transform:rotate(45deg)}
@media(max-width:900px){.ct-desks{grid-template-columns:1fr}}