/* Best regards, studio/s
   Warm stone paper, carried over from the placeholder. Minimal surface,
   room for a lot of words. */

:root{
  --paper:      #e9e7e2;
  --paper-lift: #f2f0ec;
  --ink:        #35342f;
  --ink-soft:   #54524d;
  --muted:      #93918b;
  --line:       #c4c2bb;
  --line-soft:  #d9d7d1;

  --display: 'DM Serif Display', Georgia, serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --frame: clamp(20px, 5vw, 64px);
  --ease:  cubic-bezier(.4,0,.2,1);
  --maxw:  1160px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* ios draws its own blue over anything it thinks is a control: the tap flash, the
   button fill, the text colour. none of that is ours. */
button, input, textarea, select, a{ -webkit-tap-highlight-color:transparent; }
button{ -webkit-appearance:none; appearance:none; color:inherit; font:inherit; }
input, textarea{ -webkit-appearance:none; appearance:none; border-radius:0; }
:focus-visible{ outline:1px solid var(--ink-soft); outline-offset:2px; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* keep the scrollbar's lane reserved at all times. locking the page for a popup
     then removes nothing, so the centred layout cannot slide sideways. */
  scrollbar-gutter:stable;
}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--frame); top:12px; background:var(--ink); color:var(--paper); padding:8px 14px; z-index:99; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  padding:18px 0;                       /* the bar spans the window... */
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
/* ...while its contents sit on the same column as the page and the footer, so the
   wordmark, the headline and the footer all start on one edge. */
.navin{
  width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--frame);
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
}
.nav.stuck{ border-bottom-color:var(--line-soft); }
.mark{
  font-family:var(--display); font-size:19px; letter-spacing:.01em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.nav nav{ display:flex; align-items:baseline; gap:clamp(14px,2.4vw,30px); margin-left:auto; }
.nav nav a{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:lowercase; color:var(--muted); text-decoration:none;
  padding:4px 0; position:relative; transition:color .3s var(--ease);
}
.nav nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ink); transition:right .4s var(--ease);
}
.nav nav a:hover{ color:var(--ink); }
.nav nav a:hover::after, .nav nav a.on::after{ right:0; }
.nav nav a.on{ color:var(--ink); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--frame); }
section{ padding:clamp(48px,8vh,96px) 0; }
.hr{ height:1px; background:var(--line-soft); border:0; }

/* ---------- type ---------- */
h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,5.6vw,64px); line-height:1.08; letter-spacing:-.01em;
  max-width:18ch;
}
h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(24px,3.2vw,38px); line-height:1.2; margin-bottom:18px;
  max-width:22ch;
}
h3{ font-family:var(--display); font-weight:400; font-size:21px; line-height:1.3; margin-bottom:8px; }
p{ max-width:68ch; }
p + p{ margin-top:16px; }
.lead{ font-size:clamp(18px,2vw,22px); line-height:1.6; color:var(--ink-soft); max-width:56ch; }
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px;
}
.prose p{ color:var(--ink-soft); }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(40px,9vh,90px); padding-bottom:clamp(36px,6vh,64px); }
.hero .lead{ margin-top:22px; }

/* the studio mark, drawn once on the home page */
.rule-anim{ margin-top:38px; height:1px; background:var(--line); transform-origin:left; animation:draw 1.2s var(--ease) both; }
@keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---------- grids ---------- */
.grid{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
.cell{ background:var(--paper); padding:clamp(22px,3vw,34px); transition:background .4s var(--ease); }
.cell:hover{ background:var(--paper-lift); }
.cell a.blk{ text-decoration:none; display:block; }
.cell .arrow{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  margin-top:14px; display:inline-block; transition:transform .35s var(--ease), color .35s var(--ease);
}
.cell:hover .arrow{ transform:translateX(5px); color:var(--ink); }
.cell p{ color:var(--ink-soft); font-size:15.5px; }

/* ---------- icons (line, drawn) ---------- */
.ico{ width:30px; height:30px; margin-bottom:16px; stroke:var(--ink); fill:none; stroke-width:1; }
.cell:hover .ico path, .cell:hover .ico circle, .cell:hover .ico rect{
  stroke-dasharray:120; stroke-dashoffset:0; animation:trace 1.1s var(--ease);
}
@keyframes trace{ from{ stroke-dashoffset:120; } to{ stroke-dashoffset:0; } }

/* ---------- lists ---------- */
.does{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:26px; }
.does li{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft);
  padding:11px 0; border-top:1px solid var(--line-soft);
}
.does li::before{ content:"—"; color:var(--muted); margin-right:10px; }

/* ---------- clients ---------- */
.clients{ list-style:none; margin-top:8px; }
.clients li{ border-top:1px solid var(--line-soft); }
.clients li:last-child{ border-bottom:1px solid var(--line-soft); }
.crow{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:16px 0; transition:padding-left .35s var(--ease);
}
.clients li:hover .crow{ padding-left:10px; }
.cname{ font-family:var(--display); font-size:20px; }
.cwhat{ font-family:var(--body); font-size:14.5px; color:var(--muted); text-align:right; }
.ctag{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* ---------- cta ---------- */
.cta{ border-top:1px solid var(--line-soft); }
.btn{
  -webkit-appearance:none; appearance:none;
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-indent:.12em;              /* the trailing letter space, given back, so the
                                     label sits optically centred and not a hair left */
  text-align:center;
  text-transform:lowercase; text-decoration:none;
  padding:13px 22px; border:1px solid var(--ink); border-radius:4px;
  color:var(--ink); background:transparent;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.ghost{ border-color:var(--line); color:var(--ink-soft); }
.btn.ghost:hover{ border-color:var(--ink); background:none; color:var(--ink); }
.btn.sm{ font-size:10px; letter-spacing:.1em; padding:7px 12px; }
.btn.ghost.fill:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btnrow{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* ---------- reveal ----------
   content is visible by default. it only starts hidden once the inline
   snippet in <head> has proven javascript is running, so a failed observer,
   a script error, or js switched off can never leave the page blank. */
html.js .rev{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.js .rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js .rev{ opacity:1; transform:none; transition:none; }
  .rule-anim{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line-soft); margin-top:clamp(40px,8vh,80px); }
.fwrap{
  width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(34px,5vh,54px) var(--frame);
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px;
}
.fcol{ display:flex; flex-direction:column; gap:7px; }
.fmark{ font-family:var(--display); font-size:19px; }
.fline{ font-size:14px; color:var(--muted); max-width:34ch; }
.flabel{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.fcol a{ font-size:14px; color:var(--ink-soft); text-decoration:none; transition:color .3s var(--ease); }
.fcol a:hover{ color:var(--ink); }
.fbase{
  border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--maxw); margin:0 auto; padding:16px var(--frame);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
}
.legal{ background:none; border:0; cursor:pointer; font:inherit; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.legal:hover{ color:var(--ink); }

/* ---------- legal popup ---------- */
.pop{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:var(--frame); background:rgba(53,52,47,.4);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.pop.open{ opacity:1; visibility:visible; }
.popcard{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:12px;
  width:min(720px,100%); max-height:84vh; overflow-y:auto;
  padding:clamp(26px,4vw,44px);
  /* firefox + modern engines: hairline scrollbar in the studio's own greys */
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
/* webkit/blink: the same scrollbar, drawn by hand.
   the thumb carries a paper coloured border and clips to its padding box, which
   insets it off the edge so it never touches the card's rounded corner. */
.popcard::-webkit-scrollbar{ width:10px; }
.popcard::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
.popcard::-webkit-scrollbar-thumb{
  background:var(--line);
  border:3px solid var(--paper);
  background-clip:padding-box;
  border-radius:99px;
  transition:background .3s var(--ease);
}
.popcard::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
.popcard::-webkit-scrollbar-corner{ background:transparent; }
.popcard h2{ font-size:22px; margin:26px 0 10px; }
.popcard h2:first-of-type{ margin-top:0; }
.popcard p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.popx{
  position:absolute; top:12px; right:14px; background:none; border:0; cursor:pointer;
  font-size:24px; line-height:1; color:var(--muted);
}
.popx:hover{ color:var(--ink); }

/* ---------- mobile ---------- */
@media (max-width:820px){
  .g3, .g2{ grid-template-columns:1fr; }
  .fwrap{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .nav{ padding-top:12px; padding-bottom:10px; }
  /* top line: the wordmark, and the action. second line: the links, centred. */
  .navin{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    row-gap:9px; column-gap:12px;
  }
  .mark{ grid-column:1; grid-row:1; font-size:15px; }
  .nav .navcta{ grid-column:2; grid-row:1; margin-left:0; justify-self:end; }
  .nav nav.navlinks{
    grid-column:1 / -1; grid-row:2;
    justify-content:center; gap:18px; margin-left:0;
  }
  .nav nav{ gap:16px; flex-wrap:wrap; }
  .does{ grid-template-columns:1fr; }
  .fwrap{ grid-template-columns:1fr; gap:26px; }
  .crow{ flex-direction:column; gap:3px; }
  .cwhat{ text-align:left; }
  .fbase{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ---------- contact lightbox ----------
   rectangles only, room to breathe inside every control. */
.cform{ width:min(660px,100%); }
.cintro{ font-size:14.5px; color:var(--muted); max-width:52ch; margin-bottom:24px; }
.cform form{ display:block; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.cform label{
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.cform label span{ color:var(--ink-soft); }
.cform input, .cform textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--paper-lift); border:1px solid var(--line);
  border-radius:4px; padding:12px 14px; outline:none;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.cform textarea{ resize:vertical; min-height:84px; line-height:1.6; }
.cform input:focus, .cform textarea:focus{ border-color:var(--ink-soft); background:var(--paper); }
.cform input::placeholder, .cform textarea::placeholder{ color:var(--muted); opacity:.8; }
.fnote{ margin-top:12px; }
.flabel2{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:22px 0 10px;
}

/* toggles: small rectangles, fill on select */
.toggles{ display:flex; flex-wrap:wrap; gap:8px; }
.toggles button{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--ink-soft); background:none; cursor:pointer;
  border:1px solid var(--line); border-radius:4px;
  padding:9px 14px; line-height:1;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.toggles button:hover{ border-color:var(--ink-soft); }
.toggles button.on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cerr{ font-size:13.5px; color:#8a3a30; margin-top:14px; min-height:0; }
.cerr:empty{ display:none; }
.cor{ font-family:var(--mono); font-size:11.5px; color:var(--muted); align-self:center; }
.plain{ color:var(--ink-soft); text-underline-offset:3px; }
#csend[disabled]{ opacity:.5; cursor:default; }
.cdone{ padding:8px 0; }

@media (max-width:600px){
  .frow{ grid-template-columns:1fr; }
  .toggles button{ padding:10px 12px; font-size:11px; }
}

/* label caption and its required mark must sit on one line, not stack */
.cform label .lt{ display:block; }
.cform label .lt i{ font-style:normal; color:var(--ink-soft); }

/* Both phone rows share one grid, so the numbers start on the same edge whatever
   the city is called. The links go display:contents, which drops their own boxes
   and lets .fcity / .fnum become items of the shared grid: one column for the
   longest label, one for the numbers. Sizing each link separately would not work,
   as each would measure only its own label. */
.ftels{ display:grid; grid-template-columns:max-content 1fr; column-gap:10px; row-gap:7px; align-items:baseline; }
.ftel{ display:contents; }
.fcity{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.fnum{ font-variant-numeric:tabular-nums; white-space:nowrap;
  font-size:14px; color:var(--ink-soft); transition:color .3s var(--ease); }
.ftel:hover .fnum{ color:var(--ink); }
.ccity{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); }

/* the two studio lines, shoulder to shoulder and sharing a baseline */
.tels{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; align-items:start; }
.tel h3{ margin:0 0 4px; font-size:clamp(17px,1.7vw,21px); white-space:nowrap; }
.tel h3 a{ text-decoration:none; }
@media (max-width:400px){
  .tels{ gap:10px 12px; }
  .tel h3{ font-size:16px; }
}

/* ---------- the wordmark reveal ----------
   Lifted from the placeholder: "Best regards, " types, "studio" types, the slash
   scales and rotates into place, then "s". The spans hold their text in the html,
   so with js off (or if it errors) the wordmark simply reads as normal. */
.mark .reveal{ white-space:nowrap; }
.mark .w1, .mark .w2, .mark .w3{ white-space:pre; }
html.js .mark .sl{
  display:inline-block; margin:0 .03em;
  transition:opacity .5s var(--ease), margin .5s var(--ease),
             transform .55s cubic-bezier(.34,1.56,.64,1);
}
/* only while the reveal is actually running */
html.js .mark .reveal.typing .sl{ opacity:0; margin:0; transform:scale(.3) rotate(-55deg); color:var(--muted); }
html.js .mark .reveal.typing.slon .sl{ opacity:1; margin:0 .03em; transform:scale(1) rotate(0); }
@media (prefers-reduced-motion:reduce){
  html.js .mark .reveal.typing .sl{ opacity:1; margin:0 .03em; transform:none; }
}

/* ---------- footer swaps ----------
   One line that changes on hover. Both states are stacked in the same grid cell so
   the footer never reflows when they trade places. */
.swap{
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-grid; text-align:left;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
}
.swap .s1, .swap .s2{
  grid-area:1/1; white-space:nowrap;
  transition:opacity .3s var(--ease);
}
.swap .s2{ opacity:0; color:var(--ink); }
.swap:hover .s1, .swap:focus-visible .s1{ opacity:0; }
.swap:hover .s2, .swap:focus-visible .s2{ opacity:1; }
/* Both states share a centre, so the logo appears where the words were instead of
   sliding to the right edge. The grid cell is as wide as the longer state. */
.sright{ justify-items:center; text-align:center; justify-self:end; }
.swap .s1, .swap .s2{ place-self:center; }
/* the real onlinex wordmark, sized to sit on the footer's line */
.onxlogo{ height:10.8px; width:auto; display:block; }
.onxw{ font-family:var(--body); font-weight:500; letter-spacing:.06em; }

/* ---------- the onlinex browser window ---------- */
.onxpop .win{
  width:80vw; height:84vh; max-width:1400px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 80px rgba(53,52,47,.28);
}
.winbar{
  flex:none; display:flex; align-items:center; gap:14px;
  padding:10px 12px; border-bottom:1px solid var(--line-soft);
  background:var(--paper-lift);
}
.lights{ display:flex; gap:6px; }
.lights i{ width:10px; height:10px; border-radius:50%; background:var(--line); display:block; }
.addr{
  flex:1; text-align:center; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--muted);
  background:var(--paper); border:1px solid var(--line-soft); border-radius:6px;
  padding:5px 12px; max-width:320px; margin:0 auto;
}
.winx{
  flex:none; background:none; border:0; cursor:pointer;
  font-size:20px; line-height:1; color:var(--muted); padding:0 4px;
}
.winx:hover{ color:var(--ink); }
.winbody{ position:relative; flex:1; min-height:0; background:#2a2e2d; }
.winbody iframe{ width:100%; height:100%; border:0; display:block; position:relative; z-index:1; }
/* shown underneath: if the frame is ever refused, this is what remains */
.winfall{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:#e9e7e2; text-align:center; padding:20px;
}
.winfall .big{ font-size:clamp(24px,3vw,38px); }
.winfall p{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:#93918b; }
.winnote{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:9px 16px; border-top:1px solid var(--line-soft); background:var(--paper);
}
/* one line: the sentence must not wrap, so it shrinks and truncates rather than
   pushing the band taller. the logo sits on the text baseline inside it. */
.winnote p{
  font-size:12px; line-height:1.5; color:var(--ink-soft);
  max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:6px; min-width:0;
}
.onxlogo.note{ height:10px; flex:none; }
.winnote .btn{ flex:none; }

@media (max-width:820px){
  .onxpop .win{ width:94vw; height:86vh; }
  .winnote{ flex-direction:column; align-items:flex-start; gap:12px; }
  .winnote p{ font-size:13px; }
  .addr{ max-width:none; }
}
@media (max-width:600px){
  .fbase{ flex-direction:row; justify-content:space-between; align-items:center; }
  .swap{ font-size:10px; }
}

/* ---------- nav cta ----------
   The links read the site; this one starts the conversation. It gets a border so
   it is read as an action rather than a fifth destination. */
.nav .navcta{
  font-family:var(--mono); font-size:7px; letter-spacing:.1em;
  text-transform:lowercase; text-decoration:none;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:4px;
  padding:3.5px 6px;
  margin-left:12px;
  white-space:nowrap;
  /* Centring it on the bar left it riding above the links. Sit it on their
     baseline instead, so the whole row reads as one line. */
  align-self:baseline;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav .navcta::after{ display:none; }               /* no underline sweep on a button */
.nav .navcta:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }



/* ---------- contact lightbox: fit, do not scroll ----------
   The card was 829px of content in 756px of room, so it grew a scrollbar. Every
   value below is trimmed to buy back that 75px rather than hiding the bar and
   leaving people to guess there is more underneath. */
.cform{ padding:26px 30px 24px; }
.cform .cintro{ margin-bottom:16px; }
.cform h2{ font-size:26px; }
.cform .frow{ margin-bottom:9px; }
.cform label{ gap:4px; }
.cform input{ padding:9px 12px; }
.cform textarea{ min-height:62px; padding:9px 12px; }
.cform .flabel2{ margin:14px 0 8px; }
.cform .toggles{ gap:6px; }
.cform .toggles button{ padding:7px 11px; }
.cform .fnote{ margin-top:9px; }
.cform .btnrow{ margin-top:14px !important; }
@media (max-height:720px){
  .cform .cintro{ display:none; }        /* short screens: the form is the point */
}


/* The send button is a real <button>, which is where ios was painting blue. State it
   outright: our ink, our paper, our border, no system chrome. */
#csend{
  -webkit-appearance:none; appearance:none;
  background:transparent; color:var(--ink);
  border:1px solid var(--ink); border-radius:4px;
}
#csend:hover, #csend:active{ background:var(--ink); color:var(--paper); }
#csend[disabled]{ opacity:.5; background:transparent; color:var(--ink); }
/* same for the toggles and the close crosses */
.toggles button, .popx, .winx, .legal, .swap{ -webkit-appearance:none; appearance:none; }

/* ---------- contact form: final spacing ----------
   The verify widget arrived with no styling from our side, so it sat hard against
   the message field. It gets the same air above and below, and the send button
   sits on the right on its own line. */
/* The check is a flex row that stretched to the full form width while its contents
   need about half that. Shrink the box to its contents; height is left alone. */
/* Both run the full width of the message field above them: the button, then the
   check beneath it, one column edge to edge. */
.cform #br-oxc, .cform .onlinex-check{
  margin:12px 0 0; width:100%;
  height:39px; padding-top:0; padding-bottom:0;
}
.cform .cerr{ margin-top:10px; }
.cform .btnrow{ margin-top:14px !important; }
.cform .btnrow #csend{ width:100%; }
/* twenty percent smaller than the standard button */
#csend{ font-size:10px; padding:10px 17px; }

/* ---------- fit any screen, never scroll ----------
   The card is sized off the viewport rather than a fixed max, and everything inside
   steps down as the window gets shorter. Scrolling a six field form is a failure
   state, not a feature. */
.cform{ max-height:none; overflow:visible; }
#cpop.pop{ align-items:center; }
@media (max-height:900px){
  .cform{ padding:20px 26px 18px; }
  .cform h2{ font-size:22px; }
  .cform .cintro{ margin-bottom:12px; font-size:13px; }
  .cform .frow{ margin-bottom:8px; }
  .cform input{ padding:8px 11px; font-size:16px; }
  .cform textarea{ min-height:52px; padding:8px 11px; }
  .cform .flabel2{ margin:12px 0 7px; }
  .cform .toggles button{ padding:6px 9px; font-size:10.5px; }
  .cform #br-oxc, .cform .onlinex-check{ margin:11px 0 0; }
  .cform .btnrow{ margin-top:11px !important; }
}
@media (max-height:760px){
  .cform{ padding:16px 22px 14px; }
  .cform .cintro{ display:none; }
  .cform h2{ font-size:19px; margin-bottom:8px; }
  .cform .eyebrow{ margin-bottom:8px; }
  .cform textarea{ min-height:44px; }
  .cform .toggles{ gap:5px; }
  .cform .toggles button{ padding:5px 8px; font-size:10px; }
}