/* UniTox Garage — About / Contact / post pages. Phone first; the garage render sits behind everything.
   Section colours: Me = pink, Car = blue, Art = yellow. */
:root{
  --ink:#f3eef7; --muted:#b5abbe; --bg:#0b090d; --card:rgba(13,10,16,.84); --line:rgba(243,238,247,.12);
  --pink:#ff5fa8; --blue:#5fd0e6; --yellow:#f5d547; --red:#ff4b4b; --sec:var(--pink);
  --head:var(--utx-head,"Barlow Condensed","Arial Narrow",system-ui,sans-serif);
  --body:var(--utx-body,"Barlow",system-ui,sans-serif);
  --shade:.3; color-scheme:dark;
}
.utx-sec-car{--sec:var(--blue)} .utx-sec-art{--sec:var(--yellow)} .utx-sec-me{--sec:var(--pink)}
.utx-v-contact{--sec:var(--yellow)}
html{background:var(--bg)}
body.utx-page{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
body.utx-page *,body.utx-page *::before,body.utx-page *::after{box-sizing:border-box}
.utx-page a{color:inherit}
.utx-page img{max-width:100%;height:auto}

/* ---------- backdrop ---------- */
.utx-bg{position:fixed;inset:0;z-index:0;background:#000 var(--bg-land) center/cover no-repeat}
@media (orientation:portrait){.utx-bg{background-image:var(--bg-port)}}
.utx-shade{position:fixed;inset:0;z-index:0;pointer-events:none;background:#08060a;opacity:var(--shade)}
.utx-v-single .utx-bg{filter:blur(16px) saturate(1.15);transform:scale(1.08)}

/* ---------- top title ---------- */
.utx-hud{position:fixed;top:0;left:0;right:0;z-index:20;pointer-events:none;
  padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 26px max(18px,env(safe-area-inset-left));
  background:linear-gradient(rgba(8,6,10,.82),rgba(8,6,10,.45) 60%,rgba(8,6,10,0))}
.admin-bar .utx-hud{top:32px}
@media (max-width:782px){.admin-bar .utx-hud{top:46px}}
.utx-brand{pointer-events:auto;display:inline-block;color:var(--ink);text-decoration:none;line-height:1}
.utx-brand small{display:block;font:700 12px/1 var(--head);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.utx-brand small::before{content:"\2039 ";letter-spacing:0}
.utx-brand strong{display:block;margin-top:5px;font:800 clamp(26px,6vw,40px)/1 var(--head);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.utx-brand strong span{color:var(--sec)}

/* ---------- bottom site bar (spray paint, same as the menus) ---------- */
.utx-main{position:relative;z-index:1;padding-bottom:calc(132px + env(safe-area-inset-bottom))}
nav.utx-nav{position:fixed;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100vw - 16px);bottom:max(14px,env(safe-area-inset-bottom));z-index:30;
  display:flex;gap:2px;padding:15px 22px 17px;background:url("../ui/bg_big.webp") center/100% 100% no-repeat;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
nav.utx-nav a{position:relative;isolation:isolate;padding:9px 12px 7px;color:#cfc6d8;text-decoration:none;font:700 15px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap}
nav.utx-nav a::before{content:"";position:absolute;left:4%;right:4%;bottom:0;height:52%;z-index:-1;opacity:0;transition:opacity .2s;background:center/100% 100% no-repeat}
nav.utx-nav a.sec-home::before,nav.utx-nav a.sec-me::before{background-image:url("../ui/hl_pink_small.webp")}
nav.utx-nav a.sec-car::before{background-image:url("../ui/hl_blue_small.webp")}
nav.utx-nav a.sec-art::before{background-image:url("../ui/hl_yellow_small.webp")}
nav.utx-nav a:hover::before,nav.utx-nav a:focus-visible::before{opacity:.75}
nav.utx-nav a.on{color:#fff}
nav.utx-nav a.on::before{opacity:1;height:60%}
nav.utx-nav a:focus-visible{outline:none}
@media (max-width:400px){nav.utx-nav{padding:13px 14px 15px}nav.utx-nav a{padding:9px 9px 7px;font-size:14px;letter-spacing:.1em}}

/* ---------- shared bits ---------- */
.spray-h{position:relative;display:inline-block;isolation:isolate;margin:0 0 18px;padding:6px 16px 4px;font:800 clamp(24px,5vw,34px)/1 var(--head);text-transform:uppercase;letter-spacing:.04em}
.spray-h::before{content:"";position:absolute;inset:-12% -6% -18%;z-index:-1;opacity:.9;background:url("../ui/hl_pink_big.webp") center/100% 100% no-repeat}
.utx-sec-car .spray-h::before{background-image:url("../ui/hl_blue_big.webp")}
.utx-sec-art .spray-h::before,.utx-v-contact .spray-h::before{background-image:url("../ui/hl_yellow_big.webp")}
.sbtn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px 12px;border:0;cursor:pointer;color:var(--ink);text-decoration:none;
  background:url("../ui/bg_medium.webp") center/100% 100% no-repeat;font:700 15px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;filter:drop-shadow(0 5px 10px rgba(0,0,0,.4))}
.sbtn:hover{filter:drop-shadow(0 5px 10px rgba(0,0,0,.4)) brightness(1.25)}
.sbtn:focus-visible{outline:2px solid var(--sec);outline-offset:3px}

/* page text written in WordPress (paragraphs, headings, images, buttons, embeds…) */
.utx-content{font:400 17px/1.7 var(--body);overflow-wrap:anywhere}
.utx-content > *{margin-top:0;margin-bottom:1.05em}
.utx-content h1,.utx-content h2,.utx-content h3,.utx-content h4{font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;line-height:1.05;margin:1.4em 0 .5em;text-wrap:balance}
.utx-content h2{font-size:clamp(26px,5.4vw,34px);font-weight:800}
.utx-content h3{font-size:clamp(21px,4.4vw,26px);font-weight:700}
.utx-content h4{font-size:19px;font-weight:700;letter-spacing:.08em}
.utx-content a{color:var(--sec);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.utx-content a:hover{color:#fff}
.utx-content strong{color:#fff}
.utx-content ul,.utx-content ol{padding-left:1.3em}
.utx-content li{margin:.3em 0}
.utx-content li::marker{color:var(--sec)}
.utx-content blockquote,.utx-content .wp-block-quote{margin:1.4em 0;padding:14px 18px 12px 20px;border-left:4px solid var(--sec);background:rgba(243,238,247,.05);font:500 1.08em/1.55 var(--body);border-radius:0 6px 6px 0}
.utx-content blockquote cite,.utx-content .wp-block-quote cite{display:block;margin-top:6px;font:700 13px/1.3 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-style:normal}
.utx-content .wp-block-pullquote{border:0;border-top:3px solid var(--sec);border-bottom:3px solid var(--sec);padding:18px 0;text-align:center}
.utx-content img,.utx-content video{border-radius:8px;display:block}
.utx-content figure{margin:1.4em 0}
.utx-content figcaption,.utx-content .wp-element-caption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}
.utx-content .alignwide,.utx-content .alignfull{margin-left:0;margin-right:0;width:100%}
.utx-content iframe{max-width:100%;border:0;border-radius:8px}
.utx-content .wp-block-embed__wrapper{position:relative}
.utx-content .wp-has-aspect-ratio .wp-block-embed__wrapper::before{content:"";display:block;padding-top:56.25%}
.utx-content .wp-has-aspect-ratio iframe{position:absolute;inset:0;width:100%;height:100%}
.utx-content hr,.utx-content .wp-block-separator{border:0;height:3px;margin:2em 0;background:url("../ui/hl_pink_small.webp") center/100% 100% no-repeat;opacity:.8}
.utx-sec-car .utx-content hr,.utx-sec-car .utx-content .wp-block-separator{background-image:url("../ui/hl_blue_small.webp")}
.utx-sec-art .utx-content hr,.utx-sec-art .utx-content .wp-block-separator{background-image:url("../ui/hl_yellow_small.webp")}
.utx-content code{font:500 .9em/1.4 ui-monospace,Menlo,Consolas,monospace;background:rgba(243,238,247,.08);padding:2px 6px;border-radius:4px}
.utx-content pre{overflow-x:auto;padding:14px;background:#120f15;border-radius:8px}
.utx-content table{width:100%;border-collapse:collapse;font-size:15px}
.utx-content .wp-block-table{overflow-x:auto}
.utx-content th,.utx-content td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.utx-content .wp-block-button__link,.utx-content .wp-element-button{display:inline-block;padding:13px 22px 12px;border:0;border-radius:0;color:var(--ink);text-decoration:none;
  background:url("../ui/bg_medium.webp") center/100% 100% no-repeat;font:700 15px/1 var(--head);letter-spacing:.14em;text-transform:uppercase}
.utx-content .wp-block-gallery{gap:10px}
.utx-content .wp-block-social-links{gap:10px}

/* forms anywhere on these pages (Ninja Forms, Mailchimp for WP, comments, search) */
.utx-page input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
.utx-page textarea,.utx-page select{width:100%;max-width:100%;padding:12px 14px;border:1.5px solid #3b3341;border-radius:6px;background:#0b090d;color:var(--ink);
  font:400 16px/1.4 var(--body);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.utx-page textarea{min-height:140px;resize:vertical}
.utx-page input:focus,.utx-page textarea:focus,.utx-page select:focus{outline:none;border-color:var(--sec);box-shadow:0 0 0 3px color-mix(in srgb,var(--sec) 30%,transparent)}
.utx-page input::placeholder,.utx-page textarea::placeholder{color:#7d7386}
.utx-page input[type=checkbox],.utx-page input[type=radio]{width:20px;height:20px;accent-color:var(--sec);vertical-align:-4px;margin-right:8px}
.utx-page label{font:700 13px/1.3 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--sec)}
.utx-page input[type=submit],.utx-page button[type=submit],.utx-page .nf-form-content input[type=button]{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 26px 12px;border:0;border-radius:6px;cursor:pointer;
  background:var(--red);color:#fff;font:700 16px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 6px 16px rgba(255,75,75,.25);transition:transform .1s,filter .15s;-webkit-appearance:none;appearance:none;width:auto}
.utx-page input[type=submit]:hover,.utx-page button[type=submit]:hover{filter:brightness(1.1)}
.utx-page input[type=submit]:active,.utx-page button[type=submit]:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.utx-page input[type=submit]:focus-visible,.utx-page button[type=submit]:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* Ninja Forms */
.utx-page .nf-form-cont{margin:0}
.utx-page .nf-form-fields-required{margin-bottom:14px;font:500 14px/1.4 var(--body);color:var(--muted)}
.utx-page .nf-field-container{margin-bottom:18px}
.utx-page .nf-field-label{margin-bottom:7px}
.utx-page .nf-field-label label{display:block}
.utx-page .ninja-forms-req-symbol{color:var(--pink)}
.utx-page .nf-error .ninja-forms-field{border-color:#ff6b6b !important}
.utx-page .nf-error-msg,.utx-page .nf-error-required-error{margin-top:6px;font:600 14px/1.3 var(--body);color:#ff8f8f}
.utx-page .nf-form-errors .nf-error-msg{padding:10px 12px;border-radius:6px;background:rgba(255,75,75,.12)}
.utx-page .nf-response-msg{padding:16px 18px;border-radius:8px;background:#163222;color:#c4f5d1;font:600 16px/1.5 var(--body)}
.utx-page .nf-field-element input[type=button],.utx-page .submit-wrap .nf-field-element{width:100%}
.utx-page .submit-container .nf-field-element input{width:100%}
.utx-page .nf-input-limit{font-size:12px;color:var(--muted)}
.utx-page .list-checkbox-wrap ul,.utx-page .list-radio-wrap ul{list-style:none;margin:0;padding:0}
.utx-page .list-checkbox-wrap label,.utx-page .listcheckbox-wrap label,.utx-page .checkbox-wrap label{text-transform:none;letter-spacing:.02em;font:500 15px/1.4 var(--body);color:var(--ink)}

/* Mailchimp for WordPress */
.utx-page .mc4wp-form{margin:0}
.utx-page .mc4wp-form-fields p{margin:0 0 14px}
.utx-page .mc4wp-form label{display:block;margin-bottom:7px}
.utx-page .mc4wp-form input[type=submit]{width:100%;background:var(--yellow);color:#141114;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),0 6px 16px rgba(245,213,71,.2)}
.utx-page .mc4wp-alert{margin-top:12px;padding:12px 14px;border-radius:6px;font:600 15px/1.4 var(--body)}
.utx-page .mc4wp-success{background:#163222;color:#c4f5d1}
.utx-page .mc4wp-error,.utx-page .mc4wp-notice{background:rgba(255,75,75,.12);color:#ffb0b0}

/* ===================== About (On the hood) ===================== */
.about-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 max(20px,env(safe-area-inset-right)) calc(150px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.about-name{margin:0;font:800 clamp(64px,17vw,140px)/.84 var(--head);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 4px 24px rgba(0,0,0,.65)}
.about-name small{display:block;margin-top:10px;font:600 clamp(14px,3.6vw,18px)/1.3 var(--body);letter-spacing:.05em;text-transform:none;color:rgba(243,238,247,.86);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.about-cue{margin-top:16px;font:700 12px/1 var(--head);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);animation:cue 2.2s ease-in-out infinite}
.about-cue::after{content:" \2193"}
@keyframes cue{0%,100%{transform:none}50%{transform:translateY(5px)}}
.about-body,.about-latest{width:min(720px,calc(100% - 24px));margin:0 auto}
.about-card{position:relative;margin:0 0 18px;padding:24px 22px 8px;background:var(--card);border-radius:4px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.about-card::before{content:"";position:absolute;left:-6px;right:-6px;top:-10px;height:22px;background:url("../ui/bg_small.webp") center/100% 100% no-repeat;opacity:.9;pointer-events:none}
.about-card > h2:first-child,.about-card > h3:first-child{margin-top:0;display:inline-block;position:relative;isolation:isolate;padding:4px 12px 2px}
.about-card > h2:first-child::before,.about-card > h3:first-child::before{content:"";position:absolute;inset:-14% -6% -20%;z-index:-1;opacity:.92;background:url("../ui/hl_pink_big.webp") center/100% 100% no-repeat}
.about-latest{margin-top:34px;padding:22px 18px 26px;background:var(--card);border-radius:4px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.latest-list{display:grid;gap:12px;margin-bottom:18px}
.latest-card{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 14px;border-radius:8px;background:rgba(243,238,247,.05);text-decoration:none;transition:background .2s}
.latest-card:has(.lc-img){grid-template-columns:104px minmax(0,1fr);column-gap:14px}
.latest-card:hover{background:rgba(243,238,247,.1)}
.latest-card:focus-visible{outline:2px solid var(--sec);outline-offset:2px}
.lc-img{grid-row:span 3;aspect-ratio:4/3;border-radius:6px;overflow:hidden;align-self:start}
.lc-img img{width:100%;height:100%;object-fit:cover;border-radius:0}
.lc-meta{font:600 12px/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lc-title{font:700 20px/1.15 var(--head);letter-spacing:.02em}
.lc-text{font-size:14.5px;line-height:1.45;color:rgba(243,238,247,.78)}
.latest-empty{margin:0 0 16px;color:var(--muted)}
@media (min-width:900px) and (orientation:landscape){
  .about-hero{padding-left:max(48px,6vw)}
  .about-body,.about-latest{margin-left:max(40px,6vw);margin-right:auto;width:min(640px,48vw)}
}

/* ===================== Contact (call box) ===================== */
.contact-scene{height:52vh;height:52svh}
.callbox{position:relative;width:min(560px,calc(100% - 24px));margin:0 auto;padding:12px 12px 14px;border-radius:14px;
  background:linear-gradient(#f2cd2c,#d9b114);box-shadow:inset 0 -8px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.35),0 22px 50px rgba(0,0,0,.6);color:#141114}
.cb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cb-lbl{flex:1;padding:8px 12px 6px;border-radius:4px;background:#141114;color:#f2cd2c;font:800 15px/1 var(--head);letter-spacing:.2em;text-transform:uppercase;text-align:center}
.cb-light{width:16px;height:16px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 3px #141114,0 0 12px #ff3b3b;animation:blink 2.4s steps(1) infinite}
@keyframes blink{0%,80%{opacity:1}81%,100%{opacity:.35}}
.cb-grill{height:34px;margin-bottom:12px;border-radius:6px;background:repeating-radial-gradient(circle at 50% 50%,#2b2417 0 2px,#c9a51e 2px 6px)}
.cb-face{padding:24px 20px 22px;border-radius:10px;background:#141114;color:var(--ink);box-shadow:inset 0 2px 10px rgba(0,0,0,.6)}
.cb-face h1{margin:0 0 14px;font:800 clamp(30px,7vw,44px)/1 var(--head);text-transform:uppercase;letter-spacing:.03em}
.cb-face .utx-content > h2{display:inline-block;position:relative;isolation:isolate;padding:4px 12px 2px;margin-top:1.6em}
.cb-face .utx-content > h2::before{content:"";position:absolute;inset:-14% -6% -20%;z-index:-1;opacity:.92;background:url("../ui/hl_yellow_big.webp") center/100% 100% no-repeat}
.cb-face .utx-content > h2{color:#fff}
@media (min-width:900px) and (orientation:landscape){
  .utx-v-contact .utx-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,540px);align-items:start;padding-top:110px;gap:24px;
    padding-right:max(40px,4vw)}
  .contact-scene{height:auto}
  .callbox{width:100%;margin:0}
}

/* ===================== Post pages ===================== */
.post-card{width:min(760px,100%);margin:0 auto;padding:118px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.admin-bar .post-card{padding-top:150px}
.post-back{display:inline-block;margin-bottom:22px;font:700 14px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.post-back:hover,.post-back:focus-visible{color:var(--sec)}
.post-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{display:inline-block;padding:5px 10px 3px;border-radius:4px;border:1px solid var(--line);font:700 12px/1.2 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.chip.sec{border-color:transparent;background:var(--sec);color:#120f14}
a.chip:hover{color:var(--ink);border-color:var(--sec)}
.post-title{margin:0 0 10px;font:800 clamp(36px,8.4vw,64px)/.98 var(--head);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.post-meta{margin:0 0 26px;font:600 14px/1.3 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.post-hero{margin:0 0 28px}
.post-hero img{width:100%;border-radius:10px;display:block;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.post-tags{display:flex;flex-wrap:wrap;gap:6px 12px;margin:28px 0 0;font:600 14px/1.3 var(--head);letter-spacing:.1em;color:var(--sec)}
.post-pn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin-top:36px}
.pn{display:block;padding:14px 16px;border-radius:8px;background:var(--card);text-decoration:none;font:700 19px/1.2 var(--head);letter-spacing:.02em;border:1px solid var(--line)}
.pn small{display:block;margin-bottom:6px;font:700 12px/1 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--sec)}
.pn.next{text-align:right}
.pn:hover{border-color:var(--sec)}
.post-comments{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.comment-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.comment-list .children{list-style:none;margin:12px 0 0 18px;padding:0}
.comment-body{padding:14px 16px;border-radius:8px;background:var(--card)}
.comment-author{display:flex;align-items:center;gap:10px;font:700 16px/1.2 var(--head);letter-spacing:.04em}
.comment-author img{border-radius:50%}
.comment-metadata{font-size:13px;color:var(--muted)}
.comment-metadata a{text-decoration:none}
.comment-respond{padding:18px;border-radius:8px;background:var(--card)}
.comment-reply-title{margin:0 0 12px;font:800 24px/1 var(--head);text-transform:uppercase}
.comment-form p{margin:0 0 14px}
.comment-form label{display:block;margin-bottom:6px}
.comment-notes,.logged-in-as{font-size:14px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){.about-cue,.cb-light{animation:none}}
/* Ninja Forms extras: honeypot stays hidden, the form's own title repeats the page title */
.utx-page .nf-form-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.utx-v-contact .cb-face .nf-form-title{display:none}
/* once the page scrolls, the title gets a solid backing so text never runs under it */
.utx-hud{transition:background .25s}
html.utx-scrolled .utx-hud{background:linear-gradient(rgba(8,6,10,.96) 72%,rgba(8,6,10,0))}
/* soft fade behind the bottom bar so floating buttons don't sit on text */
body.utx-page::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(120px + env(safe-area-inset-bottom));z-index:15;pointer-events:none;
  background:linear-gradient(rgba(8,6,10,0),rgba(8,6,10,.88) 70%)}
.utx-page .nf-response-msg:empty,.utx-page .nf-debug-msg:empty{display:none}
/* Contact: keep Uni + the payphone in view */
.utx-v-contact .contact-scene{height:64vh;height:64svh}
@media (min-width:900px) and (orientation:landscape){
  .utx-v-contact .utx-bg{right:min(600px,42vw)}
  .utx-v-contact .utx-bg::after{content:"";position:absolute;top:0;bottom:0;right:0;width:18%;background:linear-gradient(90deg,rgba(11,9,13,0),#0b090d)}
  .utx-v-contact .contact-scene{height:auto}
}
/* Contact intro: dark, the light flickers on, then the call box rises */
.cs-intro .utx-v-contact .utx-bg{opacity:0;transition:none}
.cs-intro.cs-on .utx-v-contact .utx-bg{opacity:1;transition:opacity .2s}
.cs-intro .utx-v-contact .callbox,.cs-intro .utx-v-contact .utx-hud{opacity:0;transform:translateY(24px)}
.cs-intro.cs-on .utx-v-contact .callbox,.cs-intro.cs-on .utx-v-contact .utx-hud{opacity:1;transform:none;transition:opacity .6s .25s,transform .6s .25s cubic-bezier(.2,.9,.25,1)}
.utx-v-contact{background:#000}
@media (prefers-reduced-motion:reduce){.cs-intro .utx-v-contact .callbox,.cs-intro .utx-v-contact .utx-hud{transform:none}}

