/* Studio pages (About, Contact, FAQ) in the shared style from tv.css. */

/* Hero tweaks for the older hero classes these pages still carry */
.tv-page .tv-hero.about-hero, .tv-page .tv-hero.faq-hero, .tv-page .tv-hero.contact-intro {
  min-height:0; margin:0; border:0; align-items:start;
}
.tv-page .tv-hero .tv-h1 { max-width:9em; }
.tv-page .tv-hero > div > .tv-lead, .tv-page .tv-hero > .tv-lead { margin:0; font-size:1.125rem; max-width:46ch; }
.tv-page .about-hero.tv-hero-solo .tv-h1 { max-width:10em; }
.tv-page .faq-hero > .tv-lead { align-self:end; }

/* About */
.tv-page .about-block.tv-section { margin:0; display:grid; grid-template-columns:var(--tv-split-mirror); gap:var(--tv-split-gap); align-items:start; }
.tv-page .about-block .tv-h2 { font-size:var(--tv-h2-section); max-width:10ch; }
.tv-page .about-block p { margin:0 0 18px; font-size:1.0625rem; line-height:1.65; color:var(--tv-soft); max-width:56ch; }
.tv-page .about-block p:last-child { margin-bottom:0; }
.tv-page .about-block strong { color:var(--tv-ink); font-weight:650; }
.tv-page .about-block a { color:var(--tv-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.tv-page .about-block a:hover { color:var(--tv-blue); text-decoration-thickness:2px; }

.tv-page .studio-designer { grid-template-columns:var(--tv-split-mirror); gap:var(--tv-split-gap); align-items:center; }
.studio-portrait { margin:0; max-width:540px; }
.studio-portrait img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; border-radius:0; background:#dfe7f4; }
.tv-page .studio-designer .tv-h2 { margin-bottom:clamp(28px,3vw,40px); max-width:12ch; font-size:var(--tv-h2-section); }
.tv-page .studio-designer .founder-card { display:block; margin:0 0 22px; }
.tv-page .studio-designer .founder-card p.studio-name { margin:0; font-size:.875rem; font-weight:500; line-height:1.5; color:var(--tv-soft); }
.tv-page .studio-designer .studio-name strong { display:block; font-size:1.0625rem; font-weight:650; color:var(--tv-ink); }
.tv-page .studio-designer .studio-name br { display:none; }

.tv-page .studio-block > div p { padding-left:0; }

/* Contact */
.tv-page .studio-main { display:block; padding:0; }
.studio-contact {
  display:grid; grid-template-columns:var(--tv-split-mirror); gap:var(--tv-split-gap); align-items:start;
  padding-top:clamp(56px,6vw,88px);
}
.tv-page .contact-ways { margin:0; max-width:none; }
.tv-page .contact-ways li { border-top:1px solid var(--tv-line); }
.tv-page .contact-ways li:last-child { border-bottom:1px solid var(--tv-line); }
.tv-page .contact-ways a { padding:22px 0; row-gap:4px; }
.tv-page .contact-ways a span { font-size:.9375rem; color:var(--tv-soft); margin:0; }
.tv-page .contact-ways a b { font-size:1.3125rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; overflow-wrap:anywhere; }
.tv-page .contact-ways a:focus-visible, .tv-page .tv-prose a:focus-visible { outline:2px solid var(--tv-blue); outline-offset:3px; }

.tv-page .contact-card {
  border:1px solid var(--tv-line); border-radius:0; box-shadow:none;
  background:var(--tv-card); padding:clamp(24px,4vw,48px);
}
.tv-page .contact-form { gap:24px; }
.tv-page .contact-form label { font-size:.9375rem; font-weight:650; color:var(--tv-ink); }
.tv-page .contact-form .optional { color:var(--tv-soft); }
body.tv-page .contact-form input:not([type=checkbox]):not([type=radio]), body.tv-page .contact-form textarea {
  border:1px solid var(--tv-field-line); border-radius:0; box-shadow:none;
  background:var(--tv-card); color:var(--tv-ink);
}
.tv-page .contact-form input:not([type=checkbox]):hover, .tv-page .contact-form textarea:hover { border-color:var(--tv-soft); }
.tv-page .contact-form input:focus-visible, .tv-page .contact-form textarea:focus-visible,
.tv-page .contact-form input:focus, .tv-page .contact-form textarea:focus {
  outline:2px solid var(--tv-blue); outline-offset:1px; border-color:var(--tv-blue);
}
.tv-page .contact-form [aria-invalid=true] { border-color:var(--tv-error)!important; box-shadow:none; }
.tv-page .contact-form [aria-invalid=true]:focus { outline-color:var(--tv-blue); }
.tv-page .contact-form ::placeholder { color:var(--tv-soft); opacity:.7; }
.tv-page .field-meta { color:var(--tv-soft); }
.tv-page .error-summary { background:var(--tv-card); border:1px solid var(--tv-error); border-radius:0; }
.tv-page .error-summary:focus { outline:2px solid var(--tv-blue); }
.tv-page .contact-note { border-top:1px solid var(--tv-line); color:var(--tv-soft); }
.tv-page .contact-note a { color:var(--tv-ink); }
.tv-page .contact-form .tv-go { border:0; font:inherit; font-size:1.0625rem; font-weight:650; }
.tv-page .contact-form .tv-go[aria-busy=true] { opacity:.72; cursor:progress; }
.tv-page .contact-form .tv-go:focus-visible, .tv-page .contact-sent .text-button:focus-visible { outline:2px solid var(--tv-blue); outline-offset:3px; }
.tv-page .contact-sent h2 { font-weight:500; letter-spacing:-.04em; }
.tv-page .contact-sent p { color:var(--tv-soft); }
.tv-page .sent-mark { stroke:var(--tv-blue); stroke-linecap:square; stroke-linejoin:miter; }
.tv-page .sent-email, .tv-page .contact-sent .text-button { color:var(--tv-ink); }

/* FAQ */
.tv-page .faq-layout { padding:clamp(56px,6vw,88px) var(--g) clamp(80px,9vw,128px); gap:clamp(40px,6vw,96px); grid-template-columns:260px minmax(0,1fr); }
.tv-page .faq-index nav { display:block; border-top:1px solid var(--tv-line); gap:0; }
.tv-page .faq-index nav a {
  display:block; min-height:0; padding:17px 0; border:0; border-bottom:1px solid var(--tv-line); border-radius:0;
  background:none; color:var(--tv-ink); font-size:.9375rem; font-weight:600;
}
.tv-page .faq-index nav a:hover { background:none; color:var(--tv-blue); }
.tv-page .faq-index nav a:focus-visible, .tv-page .faq-help .ap-link:focus-visible { outline:2px solid var(--tv-blue); outline-offset:3px; }
.tv-page .faq-help { margin-top:36px; padding:0; background:none; border-radius:0; }
.tv-page .faq-help h2 { font-size:1.4375rem; font-weight:600; letter-spacing:-.025em; margin:0 0 10px; }
.tv-page .faq-help p { font-size:.9688rem; line-height:1.55; color:var(--tv-soft); margin:0 0 14px; }
.tv-page .faq-help .ap-link { padding:0; color:var(--tv-ink); font-size:.9375rem; font-weight:650; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.tv-page .faq-help .ap-link:hover { color:var(--tv-blue); }

.tv-page .faq-group { margin-bottom:clamp(56px,6vw,88px); }
.tv-page .faq-group:last-child { margin-bottom:0; }
.tv-page .faq-group h2 { font-size:var(--tv-h2-section); line-height:1; font-weight:500; letter-spacing:-.05em; margin:0 0 clamp(28px,3vw,40px); }
.tv-page .faq-questions { display:block; border-top:1px solid var(--tv-line); }
.tv-page .faq-questions details { border:0; border-bottom:1px solid var(--tv-line); border-radius:0; background:none; overflow:visible; }
.tv-page .faq-questions details[open] { border-color:var(--tv-line); }
.tv-page .faq-questions summary {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:0; padding:24px 0; list-style:none; cursor:pointer;
  font-size:1.3125rem; font-weight:600; letter-spacing:-.02em; line-height:1.3; color:var(--tv-ink);
}
.tv-page .faq-questions summary::-webkit-details-marker { display:none; }
.tv-page .faq-questions summary::after {
  content:"+"; flex:none; width:24px; text-align:center;
  font-size:1.75rem; font-weight:400; line-height:1; color:var(--tv-blue);
}
.tv-page .faq-questions details[open] > summary::after { content:"\2212"; }
.tv-page .faq-questions summary:hover { color:var(--tv-blue); }
.tv-page .faq-questions summary:focus-visible { outline:2px solid var(--tv-blue); outline-offset:2px; }
.tv-page .faq-questions details > p, .tv-page .faq-questions .faq-answer p {
  margin:0 0 24px; padding:0; max-width:64ch;
  font-size:1.0625rem; line-height:1.65; color:var(--tv-soft);
}
.tv-page .faq-questions .faq-answer { padding:0; }
.tv-page .faq-questions details a { color:var(--tv-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.tv-page .faq-questions details a:hover { color:var(--tv-blue); text-decoration-thickness:2px; }

/* Tablet */
@media (max-width:1000px) {
  .tv-page .about-block.tv-section, .tv-page .studio-designer, .studio-contact { grid-template-columns:1fr; gap:40px; }
  .studio-portrait { max-width:420px; }
  .tv-page .about-block .tv-h2 { max-width:14ch; }
  .tv-page .faq-layout { grid-template-columns:1fr; display:grid; }
  .tv-page .faq-index { position:static; margin-bottom:0; }
  .tv-page .faq-index nav { display:grid; grid-template-columns:1fr 1fr; column-gap:32px; }
  .tv-page .faq-help { display:none; }
}

/* Phone */
@media (max-width:640px) {
  .tv-page .tv-hero.about-hero, .tv-page .tv-hero.faq-hero, .tv-page .tv-hero.contact-intro { padding:24px 16px var(--tv-hero-end); display:grid; }
  .tv-page .studio-main { padding:0; }
  .studio-contact { padding-left:16px; padding-right:16px; }
  .tv-page .contact-card { padding:24px 20px; }
  .tv-page .faq-layout { padding-left:16px; padding-right:16px; display:grid; }
  .tv-page .faq-index nav { grid-template-columns:1fr 1fr; column-gap:16px; }
  .tv-page .faq-index nav a { font-size:.875rem; }
  .tv-page .faq-questions summary { font-size:1.125rem; padding:20px 0; }
  .tv-page .faq-questions details > p, .tv-page .faq-questions .faq-answer p { font-size:1rem; }
  .tv-page .contact-form .tv-go { width:100%; justify-content:space-between; }
}

/* The captcha slot only takes room once the widget has drawn into it. */
.tv-page .contact-form .h-captcha:empty { display:none; }

/* Contact: the side column stays in view beside the long form, and each way in carries the site's arrow box as its link cue. */
@media (min-width:1001px) {
  .tv-page .studio-contact .contact-aside { position:sticky; top:32px; align-self:start; }
}
.tv-page .contact-ways a { grid-template-columns:minmax(0,1fr) auto; column-gap:20px; color:var(--tv-ink); text-decoration:none; }
.tv-page .contact-ways a::after {
  content:""; grid-column:2; grid-row:1 / 3; width:30px; height:30px; border-radius:2px;
  background:var(--tv-ink) no-repeat center / 12px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h8.5M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E");
  transition:background-color var(--sc-d-fast,160ms) ease, transform var(--sc-d-fast,160ms) ease;
}
.tv-page .contact-ways a:hover::after { background-color:#164de5; transform:translateX(2px); }
.tv-page .contact-ways a:hover b { color:var(--tv-blue); }
@media screen and (prefers-color-scheme:dark) {
  .tv-page .contact-ways a::after { background-color:#eef3fc; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h8.5M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='%23142744' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E"); }
  .tv-page .contact-ways a:hover::after { background-color:#8eafff; }
}
@media (prefers-reduced-motion:reduce) { .tv-page .contact-ways a::after { transition:none; } }