/* Simples — contact page
   Converted 1:1 from the Claude Design handoff (design_handoff_simples_site/html/).
   Values are final: do not re-tune colours, sizes, spacing or motion timings. */

.ct{padding-bottom:var(--pad-y);display:flex;flex-direction:column;gap:40px}
.cform{display:flex;flex-direction:column;gap:28px}
.cform .full{grid-column:span 2}
.cform .foot{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding-top:4px}
.cform .foot .cta-signal{font-size:18px}
.cform .foot .note{font-size:13px;color:var(--grey-60)}
.cta-signal.btn{all:unset;cursor:pointer;font-size:20px;font-weight:400;letter-spacing:0.02em;display:inline-flex;align-items:center;gap:12px;border-bottom:1px solid var(--black);padding-bottom:4px;transition:border-color var(--t-fast)}
.cta-signal.btn::before{content:"";width:8px;height:8px;background:var(--signal);display:inline-block}
.cta-signal.btn:hover{border-color:var(--signal)}
.aside{display:flex;flex-direction:column;gap:20px;border-top:1px solid var(--hairline);padding-top:24px}
.how{display:flex;flex-direction:column}
.how div{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0}
.how .no{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--grey-60)}
.how .t{font-size:16px;letter-spacing:0.02em;display:block}.how .d{font-size:13px;line-height:1.7;color:var(--grey-60);display:block}
.info{display:flex;flex-direction:column;gap:6px;color:var(--grey-60)}
.info a{color:var(--black);align-self:flex-start;border-bottom:1px solid var(--black);padding-bottom:2px}.info a:hover{border-color:var(--signal)}
@media (min-width:768px){.ct{gap:56px}.cform{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;max-width:640px}.cform .foot{grid-column:span 2;flex-direction:row;justify-content:space-between;align-items:baseline;gap:24px}.cform .foot .cta-signal{font-size:20px}.aside{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:32px}.how div{grid-template-columns:40px 1fr;padding:14px 0}.info{padding-top:14px}}
@media (min-width:1200px){.ct{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.aside{grid-column:span 4;order:-1;display:flex;flex-direction:column;gap:48px;border:0;padding:0;align-self:start;position:sticky;top:120px}.how{border-bottom:1px solid var(--hairline)}.how div{border-top:1px solid var(--hairline);padding:20px 0;gap:16px}.how .t{font-size:17px}.how .d{margin-top:6px}.info{padding-top:0}.cform{grid-column:6/span 7;max-width:none;gap:40px 32px}}

/* SENT response panel (design file: 1440 / 834 / 390 variants).
   Replaces the form in place after submit. [hidden] must beat the flex display. */
.sent{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--black);padding-top:24px;animation:fadeUp 400ms ease both}
.cform[hidden],.sent[hidden]{display:none}
.sent .label{color:var(--signal)}
.sent h2{font-size:24px;font-weight:300;line-height:1.4;letter-spacing:0.03em}
.sent h2 br{display:none}
.sent p{display:none;color:var(--grey-60);max-width:480px}
.sent p a{border-bottom:1px solid var(--grey-30)}
.sent .again{all:unset;cursor:pointer;font-size:13px;color:var(--grey-60);align-self:flex-start;transition:color var(--t-fast)}
.sent .again:hover{color:var(--signal)}
@media (min-width:768px){.sent{gap:20px;padding-top:28px;max-width:640px}.sent h2{font-size:28px}}
@media (min-width:1200px){.sent{grid-column:6/span 7;gap:24px;padding-top:32px;max-width:none}.sent h2{font-size:32px}.sent h2 br{display:inline}.sent p{display:block}}