/* Contact page */
.contact{--sec-y:clamp(56px,7vw,104px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact-left{display:grid;gap:clamp(36px,4vw,56px)}
.ways-in{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--rule)}
.way{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--rule);color:inherit;position:relative;transition:padding-left .4s var(--ease-out)}
.way .caps{grid-row:1/3;padding-top:.3em}
a.way:hover{padding-left:8px}
a.way::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .6s var(--ease-out)}
a.way:hover::after{width:100%}
.way__big{font-family:var(--sans);font-weight:500;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.3;color:var(--fg-strong);font-variant-numeric:tabular-nums;letter-spacing:.005em;overflow-wrap:anywhere}
.way__sub{font-size:.88rem;line-height:1.5;color:var(--fg-muted)}
@media (max-width:560px){.way{grid-template-columns:minmax(0,1fr)}.way .caps{grid-row:auto}}
.next{display:grid;gap:16px}
.next-steps{display:grid;gap:0;counter-reset:n}
.next-steps li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:4px 12px;padding:14px 0;border-top:1px solid var(--rule);counter-increment:n}
.next-steps li::before{content:counter(n,decimal-leading-zero);grid-row:1/3;font-family:var(--display);font-style:italic;color:var(--accent);font-size:1.2rem;line-height:1.3}
.next-steps b{font-family:var(--display);font-weight:500;font-size:1.2rem;line-height:1.25;color:var(--fg-strong)}
.next-steps span{font-size:.92rem;color:var(--fg-muted)}
/* the form: a graphite panel, the same object as the engagement panel on service pages */
.contact-form{--fg:var(--bone);--fg-strong:var(--bone);--fg-muted:rgba(247,242,232,.6);--rule:rgba(245,237,225,.16);--rule-strong:rgba(245,237,225,.26);
  position:relative;overflow:hidden;padding:clamp(28px,3.4vw,44px) clamp(22px,3vw,40px) clamp(26px,3vw,36px);background:var(--graphite);color:rgba(247,242,232,.94)}
.contact-form::before{content:"";position:absolute;right:-80px;bottom:-100px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(222,199,161,.14),transparent 68%);pointer-events:none}
.contact-form>*{position:relative;z-index:1}
.contact-form .form{gap:18px}
.form-head{display:grid;gap:10px;margin-bottom:10px}
.form-head .caps{color:var(--gold-deep)}
.form-head h2{font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:1.1;color:var(--bone)}
.form-head p{color:var(--fg-muted);font-size:.98rem}
.contact-form .form-row{gap:16px}
.contact-form .field{gap:7px}
.contact-form .field label,.contact-form .field--choice legend{font-size:.875rem;letter-spacing:.08em;color:rgba(247,242,232,.78)}
.field label small{text-transform:none;letter-spacing:0;font-size:.95em;color:rgba(247,242,232,.62)}
.contact-form .field input,.contact-form .field textarea,.contact-form .field select{
  padding:13px 14px;font-family:var(--sans);font-size:1rem;line-height:1.4;color:var(--ink);
  background:var(--paper);border:1px solid var(--paper);border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.25),0 10px 24px -18px rgba(0,0,0,.6);transition:border-color .25s,background .25s,box-shadow .25s}
.contact-form .field input:hover,.contact-form .field textarea:hover,.contact-form .field select:hover{background:var(--bone);border-color:var(--bone)}
.contact-form .field input:focus,.contact-form .field textarea:focus,.contact-form .field select:focus{outline:none;background:var(--bone);border-color:var(--gold);box-shadow:0 0 0 3px rgba(222,199,161,.35),0 10px 24px -18px rgba(0,0,0,.6)}
.contact-form .field textarea{min-height:132px;resize:vertical}
.field textarea::placeholder,.field input::placeholder{color:var(--muted);opacity:1;font-style:normal}
.field select{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.field select option{color:var(--ink);background:var(--bone)}
.field select:invalid,.field select option[value=""]{color:var(--muted)}
/* browser autofill on a dark panel */
.contact-form input:-webkit-autofill,.contact-form input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #F5EDE1 inset;caret-color:var(--ink);transition:background-color 9999s ease-out}
.contact-form .field--error input,.contact-form .field--error textarea{border-color:#B8563F;box-shadow:0 0 0 3px rgba(184,86,63,.25)}
.contact-form .field__error{color:#E8A994;font-size:.84rem}
.field--choice{border:0;padding:0;margin:0;min-width:0}
.field--choice legend{font-family:var(--sans);text-transform:uppercase;padding:0;margin-bottom:8px}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.seg label{position:relative;cursor:pointer;display:flex}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg label{font-size:.92rem;letter-spacing:0;text-transform:none}
.seg span{display:flex;flex:1;align-items:center;justify-content:center;text-align:center;padding:12px 10px;font-size:.92rem;letter-spacing:0;text-transform:none;font-family:var(--sans);color:var(--bone);background:rgba(247,242,232,.12);border:1px solid rgba(245,237,225,.28);border-radius:2px;transition:background .25s,color .25s,border-color .25s}
.seg label:hover span{background:rgba(247,242,232,.2);border-color:rgba(245,237,225,.5)}
.seg input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:0 10px 24px -18px rgba(0,0,0,.6)}
.seg input:focus-visible+span{outline:2px solid var(--gold-deep);outline-offset:2px}
.form-foot{display:grid;gap:14px;padding-top:6px}
.contact-form .btn{--btn-bg:var(--gold);--btn-fg:var(--ink);--btn-bd:var(--gold);--btn-hover:var(--bone);width:100%;justify-content:center;padding:1.05em 1.4em;font-weight:500;box-shadow:0 14px 30px -18px rgba(222,199,161,.55)}
.contact-form .btn:hover{color:var(--ink)}
.form-foot .small{max-width:none;font-size:.82rem;line-height:1.55;color:rgba(247,242,232,.55)}
.form-foot .small a{color:rgba(247,242,232,.8);text-decoration:underline;text-underline-offset:3px}
.contact-form .form-msg{border-color:rgba(245,237,225,.3);color:var(--bone)}
.contact-form .form-msg--ok{border-color:var(--gold-deep)}
.contact-form .form-msg--error{border-color:#D9917B;color:#E8A994}
.contact-foot{display:grid;gap:12px;text-align:center;justify-items:center}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

/* handbooks */
.hb-list{display:grid;gap:clamp(28px,4vw,44px)}
.hb{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start;padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--rule)}
.hb__cover{overflow:hidden;background:var(--surface-2);box-shadow:0 24px 44px -28px rgba(26,25,22,.45);transform:rotate(-1.2deg);transition:transform .6s var(--ease-out)}
.hb:hover .hb__cover{transform:rotate(0)}
.hb__cover img{width:100%;height:auto;display:block}
.hb__body{display:grid;gap:12px}
.hb__body h2{font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:1.1}
.hb__sub{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--accent)}
.hb__body p{color:var(--fg-muted);line-height:1.65}
.hb__body .small{font-size:.86rem}
@media (max-width:640px){.hb{grid-template-columns:minmax(0,1fr)}.hb__cover{max-width:220px}}

/* look inside: a scrolling strip of page images, enlarged in a dialog */
.hb__look{grid-column:1/-1;display:grid;gap:12px;padding-top:6px}
.pv{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 14px;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent;margin:0}
.pv li{flex:0 0 auto;scroll-snap-align:start}
.pv a{display:block;width:124px;border:1px solid var(--rule);background:var(--bone);box-shadow:0 10px 24px -18px rgba(26,25,22,.5);transition:transform .4s var(--ease-out),border-color .3s}
.pv a:hover{transform:translateY(-3px);border-color:var(--accent)}
.pv img{display:block;width:100%;height:auto}
.pv-dialog{border:0;padding:0;background:transparent;max-width:min(92vw,760px);width:100%;max-height:100vh;overflow:visible}
.pv-dialog::backdrop{background:rgba(15,15,14,.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pv-dialog img{display:block;width:auto;max-width:100%;height:auto;max-height:82vh;margin:0 auto;background:var(--bone);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.pv-dialog__cap{margin-top:12px;font-family:var(--sans);font-size:.85rem;color:rgba(247,242,232,.7);text-align:center}
.pv-dialog__nav{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:8px;color:rgba(247,242,232,.8);font-family:var(--sans);font-size:.9rem}
.pv-dialog__nav button,.pv-dialog__close{background:none;border:1px solid rgba(245,237,225,.3);border-radius:50%;width:42px;height:42px;color:var(--bone);cursor:pointer;font-size:1.1rem;display:grid;place-items:center}
.pv-dialog__nav button:hover,.pv-dialog__close:hover{border-color:var(--gold)}
.pv-dialog__close{position:absolute;top:-52px;right:0}
@media (max-width:640px){.pv a{width:104px}.pv-dialog__close{top:auto;bottom:-56px;right:auto;left:50%;transform:translateX(-50%)}}

/* trust line and perks inside the form head */
.form-trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:6px;font-family:var(--sans);font-size:.84rem;color:rgba(247,242,232,.72)}
.form-trust b{color:var(--bone);font-weight:500}
.form-trust__stars{color:var(--gold);letter-spacing:.1em;font-size:.8rem}
.form-trust__dot{width:3px;height:3px;border-radius:50%;background:rgba(247,242,232,.4)}
.form-perks{display:grid;gap:6px;margin:4px 0 2px;padding:0;list-style:none}
.form-perks li{position:relative;padding-left:22px;font-family:var(--sans);font-size:.92rem;color:rgba(247,242,232,.86)}
.form-perks li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:7px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}

/* handbooks: on phones the request form comes straight after the hero, before the previews */
@media (max-width:860px){.hb-page .contact-form{order:-1}}
.hb__body .arrow-link{margin-top:6px}
/* review page: "what a second look can reveal" */
.finds{display:grid;gap:18px}
.finds b{color:var(--gold);font-weight:500}
.form-msg__links{margin:10px 0 0;padding-left:18px}.form-msg__links a{color:var(--gold);text-decoration:underline}