/* circlesco.tech · Contact only (title, the form panel + field styles, thank-you state, look around) */

/* ============ TITLE ============ */
.ct-hero{background:var(--white)}
.ct-hero-in{padding:calc(var(--nav-h) + clamp(84px,19vh,240px)) var(--gut) clamp(56px,8vh,110px)}
.ct-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(18px,3vh,40px)}
.ct-meta-l{display:inline-flex;align-items:center;gap:12px}
.ct-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 64px}
.ct-title{font-weight:900;font-size:clamp(60px,12.5vw,240px);line-height:.86;letter-spacing:-.045em;margin-left:-.04em}
.ct-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ct-title .w{display:inline-block;will-change:transform,filter}
.ct-title em{color:var(--blue)}
.ct-side{margin-left:auto;max-width:480px;display:flex;flex-direction:column;gap:14px}
.ct-statement{font-size:clamp(17px,1.4vw,22px);font-weight:500;line-height:1.3;letter-spacing:-.01em}

/* ============ BODY: aside + panel ============ */
.ct-body{padding:0 0 clamp(80px,10vw,150px);background:var(--white);scroll-margin-top:var(--nav-h)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:clamp(32px,6vw,120px);align-items:start}
.ct-aside{display:flex;flex-direction:column;gap:clamp(36px,4vw,56px);position:sticky;top:calc(var(--nav-h) + 32px)}
.ct-block .eyebrow{display:block;color:var(--ink);padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.ct-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:10px 0}
.ct-steps .mono{color:var(--g3);padding-top:3px}
.ct-steps p,.ct-aside-text{font-size:17px;line-height:1.4;max-width:28em}

/* the panel (shared component for this page: a rounded gray sheet holding the form, then the thank-you) */
.ct-panel{position:relative;background:var(--g1);border-radius:28px;padding:clamp(28px,3.6vw,56px);min-height:520px}
.ct-form-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin-bottom:clamp(24px,3vw,40px)}
.ct-form-title{font-weight:800;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.035em;line-height:1}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.ct-field label,.ct-choice legend{font-weight:700;font-size:15px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px}
.ct-field input,.ct-field textarea{font:inherit;font-weight:500;font-size:16px;color:var(--ink);background:#fff;border:0;border-radius:var(--r);height:52px;padding:0 16px;width:100%;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.ct-field textarea{height:auto;padding:14px 16px;resize:vertical;min-height:140px;line-height:1.4}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:rgba(11,11,15,.38)}
.ct-field input:hover,.ct-field textarea:hover{box-shadow:inset 0 0 0 1px rgba(11,11,15,.24)}
.ct-field input:focus,.ct-field textarea:focus,.ct-field input:focus-visible,.ct-field textarea:focus-visible{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.ct-field.is-bad input,.ct-field.is-bad textarea{background:#FDECEC;box-shadow:inset 0 0 0 1px rgba(229,72,77,.35)}
.ct-err{color:#E5484D;min-height:0;display:none}
.ct-field.is-bad .ct-err{display:block}

/* segmented choices: radios drawn as quiet buttons, selected = ink fill */
.ct-choice{border:0;padding:0;margin:4px 0 22px}
.ct-choice legend{margin-bottom:12px;padding:0}
.ct-seg{display:flex;flex-wrap:wrap;gap:8px}
.ct-seg label{position:relative;cursor:pointer}
.ct-seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ct-seg span{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:14px;transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.ct-seg label:hover span{box-shadow:inset 0 0 0 1px rgba(11,11,15,.24)}
.ct-seg input:checked + span{background:var(--ink);color:#fff;box-shadow:none}
.ct-seg input:focus-visible + span{background:var(--g2)}
.ct-seg input:focus-visible:checked + span{background:var(--blue)}
.ct-submit{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:8px}
.ct-submit .btn-xl{height:64px;padding:0 34px;font-size:18px;border-radius:var(--r)}
.ct-submit p{max-width:24em;line-height:1.5}

/* thank-you state */
.ct-thanks[hidden],.ct-form[hidden]{display:none}
.ct-thanks{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(12px,2vw,24px) 0}
.ct-thanks-mark{position:relative;width:56px;height:56px;display:block;margin-bottom:10px}
.ct-thanks-mark .ring{position:absolute;inset:0;border:3px solid var(--ink);border-radius:50%;display:block;transform:scale(.6);opacity:0}
.ct-thanks-mark .plus{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%) rotate(-90deg);opacity:0}
.ct-thanks-mark .plus::before,.ct-thanks-mark .plus::after{content:"";position:absolute;background:var(--blue);left:50%;top:50%;transform:translate(-50%,-50%)}
.ct-thanks-mark .plus::before{width:22px;height:4px}
.ct-thanks-mark .plus::after{width:4px;height:22px}
.ct-thanks.is-in .ct-thanks-mark .ring{transform:none;opacity:1;transition:transform .9s var(--ease),opacity .6s var(--ease)}
.ct-thanks.is-in .ct-thanks-mark .plus{transform:translate(-50%,-50%) rotate(0);opacity:1;transition:transform 1s var(--ease) .25s,opacity .5s var(--ease) .25s}
.ct-thanks-title{font-weight:900;font-size:clamp(36px,4.6vw,76px);letter-spacing:-.045em;line-height:.95}
.ct-thanks-text{font-size:var(--t-lead);line-height:1.35;max-width:26em}
.ct-thanks-text b{font-weight:700;word-break:break-all}
.ct-thanks-links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:10px}

/* ============ LOOK AROUND ============ */
.ct-more{padding:clamp(56px,7vw,110px) 0;background:var(--white);border-top:1px solid var(--line)}
.ct-more-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:20px 48px}
.ct-more-big{font-weight:800;font-size:var(--t-h2);letter-spacing:-.035em;line-height:1}
.ct-more-links{display:flex;flex-wrap:wrap;gap:14px 32px}

/* ============ Responsive ============ */
@media (max-width:1100px){
  .ct-grid{grid-template-columns:1fr;gap:40px}
  .ct-aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
  .ct-aside .ct-block:first-child{grid-column:1 / -1}
}
@media (max-width:900px){
  .ct-hero-in{padding-top:calc(var(--nav-h) + 12vh)}
  .ct-meta{flex-direction:column;align-items:flex-start;gap:8px}
  .ct-title{font-size:clamp(60px,17.5vw,90px)}
  .ct-side{margin-left:0;max-width:none}
  .ct-grid{display:flex;flex-direction:column-reverse}
  .ct-aside{grid-template-columns:1fr}
  .ct-panel{border-radius:22px;min-height:0}
  .ct-seg span{height:44px}
  .ct-submit .btn-xl{width:100%;height:60px}
  .ct-more-row{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .ct-hero-in{padding-top:calc(var(--nav-h) + 13vh)}
  .ct-row{grid-template-columns:1fr;gap:0}
  .ct-panel{padding:24px 20px 28px}
  .ct-seg{gap:8px}
  .ct-seg span{padding:0 14px}
  .ct-field input,.ct-field textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .ct-title .w,.ct-form>*{transform:none!important;filter:none!important;opacity:1!important}
  .ct-thanks-mark .ring,.ct-thanks-mark .plus{transition:none!important}
}