/* PROJECT INQUIRIES (#/contact) + Services call to action + footer link
   HYO 2026-11-11 "MASTER FINAL WEBSITE COMPLETION". The inquiry page alone turns dark (html.is-inquiry); the rest of the
   portfolio keeps its light ground. Same typeface (var(--font)), same page gutters, thin rules, no icons, glows or shadows.
   Rollback: backups/PRE-INQUIRY-2026-11-11/. */

:root{--iq-bg:#0f1012;--iq-fg:#eceef0;--iq-mute:#8e949a;--iq-line:rgba(236,238,240,.14);--iq-line-hi:rgba(236,238,240,.42);--iq-err:#f0aaa2}
html.is-inquiry body{background:var(--iq-bg)}
body{transition:background-color .45s var(--ease)}

.iq{color-scheme:dark;color:var(--iq-fg);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--m);
  grid-template-areas:"intro body" "direct body";grid-template-rows:auto 1fr;
  margin-top:clamp(96px,20vh,200px);padding-top:18px;border-top:1px solid var(--iq-line-hi)}
.iq-label,.iq-k,.iq-form label,.iq-done-k{font-size:10.5px;line-height:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--iq-mute);font-weight:400}
.iq-intro{grid-area:intro;padding-right:clamp(24px,6vw,120px)}
.iq-label{display:block}
.iq-title{margin:clamp(28px,5vh,48px) 0 0;max-width:12ch;font:400 clamp(40px,5.1vw,84px)/.98 var(--font);letter-spacing:-.03em;color:var(--iq-fg);text-wrap:balance}
.iq-text{margin:clamp(28px,4.5vh,44px) 0 0;max-width:34ch;font-size:17px;line-height:26px;letter-spacing:-.003em;color:var(--iq-fg)}
.iq-note{margin:12px 0 0;max-width:40ch;font-size:14px;line-height:22px;color:var(--iq-mute)}

/* direct contact: bottom of the left column on desktop, after the form on phones */
.iq-direct{grid-area:direct;align-self:end;padding:clamp(56px,10vh,120px) clamp(24px,6vw,120px) 0 0}
.iq-links{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--iq-line)}
.iq-links a{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:baseline;column-gap:12px;padding:13px 0 14px;border-bottom:1px solid var(--iq-line);color:var(--iq-fg);text-decoration:none}
.iq-v{justify-self:start;font-size:17px;line-height:22px;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .32s ease}
.iq-a{font-size:13px;color:var(--iq-mute);transition:transform .28s ease,color .28s ease}
.iq-links a:hover .iq-v,.iq-links a:focus-visible .iq-v{background-size:100% 1px}
.iq-links a:hover .iq-a,.iq-links a:focus-visible .iq-a{transform:translate(3px,-3px);color:var(--iq-fg)}
.iq-links a:focus-visible,.iq-privacy a:focus-visible,.iq-off a:focus-visible{outline:1px solid var(--iq-fg);outline-offset:4px}
.iq-loc{margin:14px 0 0;font-size:12px;line-height:16px;color:var(--iq-mute)}

/* form */
.iq-body{grid-area:body;min-width:0}
.iq-form fieldset{border:0;margin:0;padding:0;min-width:0}
.iq-form fieldset:disabled{opacity:.5}
.iq-sr,.iq-trap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.iq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,2.6vw,44px);row-gap:clamp(30px,4.6vh,44px)}
.iq-wide{grid-column:1/-1}
.iq-field{min-width:0}
.iq-form label{display:flex;justify-content:space-between;gap:12px;transition:color .2s ease}
.iq-opt{text-transform:none;letter-spacing:.02em;opacity:.75}
.iq-field:focus-within label{color:var(--iq-fg)}
.iq-form input,.iq-form select,.iq-form textarea{display:block;width:100%;box-sizing:border-box;margin:0;padding:12px 0 13px;border:0;border-bottom:1px solid var(--iq-line-hi);border-radius:0;
  background:transparent;color:var(--iq-fg);font:400 18px/24px var(--font);letter-spacing:-.003em;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none}
.iq-form textarea{min-height:156px;resize:vertical;line-height:26px}
.iq-form input:hover,.iq-form select:hover,.iq-form textarea:hover{border-bottom-color:rgba(236,238,240,.7)}
.iq-form input:focus,.iq-form select:focus,.iq-form textarea:focus,
.iq-form input:focus-visible,.iq-form select:focus-visible,.iq-form textarea:focus-visible{outline:0;border-bottom-color:var(--iq-fg);box-shadow:0 1px 0 var(--iq-fg)} /* focus = a heavier white rule and a white label */
.iq-form input,.iq-form textarea{caret-color:var(--iq-fg)}
.iq-form input:-webkit-autofill{-webkit-text-fill-color:var(--iq-fg);box-shadow:inset 0 0 0 100px var(--iq-bg);caret-color:var(--iq-fg)}
.iq-select{position:relative;display:block}
.iq-select::after{content:"";position:absolute;right:3px;top:calc(50% - 6px);width:7px;height:7px;border-right:1px solid var(--iq-mute);border-bottom:1px solid var(--iq-mute);transform:rotate(45deg);pointer-events:none}
.iq-form select{padding-right:28px;cursor:pointer;text-overflow:ellipsis}
.iq-form select:has(option[value=""]:checked){color:var(--iq-mute)}
.iq-form option{color:#101113;background:#f3f4f5}
.iq-field.is-invalid input,.iq-field.is-invalid select,.iq-field.is-invalid textarea{border-bottom-color:var(--iq-err)}
.iq-field.is-invalid label{color:var(--iq-err)}
.iq-err{margin:9px 0 0;font-size:12.5px;line-height:18px;color:var(--iq-err)}

.iq-send{margin-top:clamp(40px,6vh,60px);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,2.6vw,44px);align-items:start}
.iq-submit{display:inline-flex;align-items:center;gap:16px;height:52px;padding:0 26px 0 28px;border:1px solid var(--iq-fg);border-radius:999px;background:var(--iq-fg);color:var(--iq-bg);
  font:500 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .25s ease,color .25s ease,opacity .25s ease}
.iq-submit-a{display:inline-block;font-size:14px;letter-spacing:0;transition:transform .28s ease}
.iq-submit:hover:not(:disabled){background:transparent;color:var(--iq-fg)}
.iq-submit:hover:not(:disabled) .iq-submit-a{transform:translate(3px,-3px)}
.iq-submit:focus-visible{outline:1px solid var(--iq-fg);outline-offset:4px}
.iq-submit:disabled{opacity:.5;cursor:not-allowed}
.iq-form.is-sending .iq-submit{cursor:progress;opacity:.7}
.iq-form.is-sending .iq-submit-a{animation:iq-wait 1.1s ease-in-out infinite}
@keyframes iq-wait{50%{opacity:.25}}
.iq-privacy{margin:0;max-width:46ch;font-size:12px;line-height:18px;color:var(--iq-mute)}
.iq-privacy a,.iq-off a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.iq-status{margin:24px 0 0;padding:14px 16px;border:1px solid rgba(240,170,162,.45);font-size:14px;line-height:21px;color:#f5c9c3}
.iq-demo{margin:0 0 30px;padding:12px 14px;border:1px dashed var(--iq-line-hi);font-size:12.5px;line-height:18px;color:var(--iq-mute)}
.iq-done{padding:4px 0 0;opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease);outline:none}
.iq-done.is-in{opacity:1;transform:none}
.iq-done p{margin:22px 0 0;max-width:22ch;font:400 clamp(26px,2.5vw,38px)/1.16 var(--font);letter-spacing:-.018em;color:var(--iq-fg)}
.iq-off p{margin:0;max-width:30ch;font-size:clamp(20px,1.8vw,26px);line-height:1.3;color:var(--iq-fg)}

/* footer on the dark page keeps its pills; a little space above it */
html.is-inquiry .foot{padding-top:clamp(96px,16vh,180px)}

/* ---------- Services: closing call to action ---------- */
.sv2-cta{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--m);border-top:1px solid var(--ink);padding-top:18px;margin-top:clamp(72px,12vh,140px)}
.sv2-cta .sv2-label{grid-column:1/2;padding-top:0}
.sv2-cta-t{grid-column:2/4;padding-right:clamp(12px,3vw,48px)}
.sv2-cta-t h2{margin:0;font:400 clamp(26px,2.6vw,40px)/1.08 var(--font);letter-spacing:-.022em;color:var(--ink)}
.sv2-cta-t p{margin:14px 0 0;max-width:48ch;font-size:15px;line-height:23px;color:var(--mute)}
.sv2-cta-link{grid-column:4/5;justify-self:start;align-self:start;margin-top:.6em;display:inline-flex;align-items:baseline;gap:12px;padding-bottom:5px;border-bottom:1px solid var(--ink);
  color:var(--ink);text-decoration:none;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.sv2-cta-a{font-size:13px;letter-spacing:0;transition:transform .28s ease}
.sv2-cta-link:hover .sv2-cta-a,.sv2-cta-link:focus-visible .sv2-cta-a{transform:translate(3px,-3px)}
.sv2-cta-link:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* ---------- footer: copyright · Project inquiries · email · Instagram ---------- */
.foot .pill:first-child{grid-column:auto;justify-content:center}
.foot .foot-iq span{color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  body,.iq-v,.iq-a,.iq-submit,.iq-submit-a,.iq-done,.sv2-cta-a{transition:none}
  .iq-form.is-sending .iq-submit-a{animation:none}
}

/* tablet: the form fields go to one column inside the right half */
@media (max-width:1100px){
  .iq-grid{grid-template-columns:minmax(0,1fr)}
  .iq-send{grid-template-columns:minmax(0,1fr);row-gap:20px}
}
/* phones: label, heading, text, form, direct links */
@media (max-width:760px){
  .iq{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "body" "direct";grid-template-rows:auto;margin-top:clamp(64px,12vh,120px)}
  .iq-intro{padding-right:0}
  .iq-title{font-size:clamp(40px,12vw,52px);max-width:none;margin-top:28px}
  .iq-text{margin-top:24px;font-size:16px;line-height:24px}
  .iq-body{margin-top:48px}
  .iq-submit{width:100%;justify-content:space-between}
  .iq-direct{padding:64px 0 0}
  .iq-links a{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .iq-k{grid-column:1/-1}
  .iq-a{grid-column:2;grid-row:2}
  .sv2-cta .sv2-label,.sv2-cta-t,.sv2-cta-link{grid-column:1/-1}
  .sv2-cta .sv2-label{margin-bottom:14px}
  .sv2-cta-t{padding-right:0}
  .sv2-cta-t h2{font-size:28px;line-height:31px}
  .sv2-cta-link{margin-top:26px}
  /* phones: copyright, then the long email on its own row, then Project inquiries | Instagram */
  .foot .pill:first-child{grid-column:1/-1;order:-2}
  .foot .foot-mail{grid-column:1/-1;order:-1}
}