/* ==========================================================================
   Deskman Studio — Contact (redesign)

   Loaded ONLY on the Contact page, after main.css. Every selector is scoped
   under .ctc-redesign so nothing here can reach any other page — the same
   pattern services.css / pricing.css / studio.css already use.

   Tokens (colour, spacing, mono font) are inherited from main.css :root, so
   this file introduces no new palette. It does NOT load a font either: the
   display face here is Onest, which nav.css already enqueues on every request
   for the wordmark, so using it costs nothing and matches the reference far
   more closely than Bricolage does at these very large sizes.

   Layout: a two-part page. An asymmetric hero (copy left, a layered product
   composition right) over the paper tone, then a recessed band holding the
   enquiry panel at ~65% and the information column at ~35%. Everything is
   contained by overflow-x:clip on the root so the composition can overlap
   without ever producing a horizontal scrollbar.
   ========================================================================== */

.ctc-redesign{
  /* surfaces — warm off-white, one step down for the recessed band */
  --ct-paper:#F5F4F2;
  --ct-paper-2:#EFEEEB;
  --ct-white:#FFFFFF;
  --ct-ink:#131211;
  --ct-black:#0B0B0B;
  --ct-black-2:#181817;
  --ct-line:#E4E2DE;
  --ct-line-2:#D6D3CE;
  --ct-muted:#6B6764;
  --ct-muted-2:#9A948F;
  /* accents, borrowed from the frozen global palette */
  --ct-lime:var(--electric);
  --ct-violet:var(--violet);
  --ct-violet-soft:#EEE9FF;
  /* geometry */
  --ct-r:20px;         /* large panels                     */
  --ct-r-md:14px;      /* cards, inputs on desktop         */
  --ct-r-sm:10px;
  --ct-ease:cubic-bezier(.62,.05,0,1);
  /* vertical rhythm — one knob for the whole page */
  --ct-band:clamp(64px,7vw,108px);
  /* the display face; see the file header for why it is free to use */
  --ct-display:"Onest","Bricolage Grotesque",Arial,sans-serif;

  background:var(--ct-paper);
  color:var(--ct-ink);
  overflow-x:clip;
  padding-top:0;       /* the hero owns its own nav offset */
}
.ctc-redesign *{ box-sizing:border-box; }
.ctc-redesign .wrap{ position:relative; max-width:1320px; }

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */
.ctc-redesign .ctc-eyebrow{
  display:inline-flex; align-items:center; gap:.65em; margin:0 0 var(--sp-24);
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--ct-ink);
}
.ctc-redesign .ctc-eyebrow .d{
  width:9px; height:9px; border-radius:50%; background:var(--ct-lime);
  display:inline-block; flex:0 0 auto;
}
.ctc-redesign .ctc-mono{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ct-muted);
}
.ctc-redesign .ctc-mono--ink{ color:var(--ct-ink); }

/* The small eyebrow that sits above a panel heading. It is an <h2> inside the
   "What happens next?" card — that card's steps are <h3>s and need a parent —
   so this has to reset heading margin and family, not just colour. */
.ctc-redesign .ctc-panel__k{
  display:block; margin:0 0 12px; font-family:var(--font-mono); font-size:11px;
  font-weight:500; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ct-ink);
}
.ctc-redesign .ctc-next .ctc-panel__k{ margin-bottom:0; }

/* main.css resets <ul> but not <ol>, and this page uses an ordered list for
   the process steps because the order is the meaning. */
.ctc-redesign ol,
.ctc-redesign ul{ margin:0; padding:0; list-style:none; }

/* Panel titles sit at the same optical size across every card on the page. */
.ctc-redesign .ctc-panel-h{
  font-family:var(--ct-display); font-weight:700;
  font-size:clamp(1.9rem,2.6vw,2.45rem); line-height:1.02;
  letter-spacing:-.035em; color:var(--ct-ink); margin:0;
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.ctc-redesign .ctc-hero{
  position:relative;
  padding:calc(var(--nav-top) + var(--nav-h) + var(--ticker-h) + var(--sp-56))
          0 var(--ct-band);
}

/* Edge micro-labels — the studio note top-left, the locale top-right.
   Absolutely placed against the hero so they read as page furniture beside
   the fixed nav; they are the first thing to go at tablet width. */
.ctc-redesign .ctc-edge{
  position:absolute; top:calc(var(--nav-top) + 6px);
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  line-height:1.7; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ct-muted); pointer-events:none;
}
.ctc-redesign .ctc-edge--l{ left:var(--sp-24); max-width:11ch; }
.ctc-redesign .ctc-edge--r{ right:var(--sp-24); text-align:right; }
.ctc-redesign .ctc-edge--l .dot{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--ct-violet); margin-top:10px;
}
.ctc-redesign .ctc-edge--r .pin{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ct-lime); margin-right:8px; vertical-align:1px;
}

.ctc-redesign .ctc-hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(32px,4vw,64px); align-items:start;
}

/* --- headline ------------------------------------------------------------ */
.ctc-redesign .ctc-h1{
  font-family:var(--ct-display); font-weight:700;
  font-size:clamp(2.9rem,5.4vw,4.95rem); line-height:.95; letter-spacing:-.045em;
  color:var(--ct-ink); margin:0; text-wrap:balance;
}
/* The violet asterisk trails the last word and must never wrap alone onto a
   line of its own, so it is inline-flex inside the heading with a nbsp-sized
   left margin rather than a separate block. */
.ctc-redesign .ctc-h1 .ctc-star{
  display:inline-block; width:.62em; height:.62em; margin-left:.16em;
  vertical-align:-.02em; color:var(--ct-violet);
}
.ctc-redesign .ctc-h1 .ctc-star svg{ width:100%; height:100%; display:block; }

.ctc-redesign .ctc-lead{
  max-width:46ch; margin:var(--sp-32) 0 0;
  font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.62; color:var(--ct-muted);
}

/* --- service pills ------------------------------------------------------- */
.ctc-redesign .ctc-pills{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--sp-32);
}
.ctc-redesign .ctc-pill{
  display:inline-flex; align-items:center; height:30px; padding-inline:14px;
  border:1px solid var(--ct-line-2); border-radius:999px; background:transparent;
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ct-ink);
  transition:border-color .25s var(--ct-ease), background .25s var(--ct-ease);
}
@media (hover:hover){
  .ctc-redesign .ctc-pill:hover{ border-color:var(--ct-ink); background:var(--ct-white); }
}

/* --- "let's build together" rule ----------------------------------------- */
.ctc-redesign .ctc-kicker{
  display:flex; align-items:center; gap:var(--sp-24);
  margin-top:clamp(40px,5vw,72px);
}
.ctc-redesign .ctc-kicker__t{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ct-muted);
  line-height:1.8; flex:0 0 auto;
  /* pre-wrap, not pre-line: the second line is deliberately indented under
     the em dash and pre-line would collapse that run of spaces away. */
  white-space:pre-wrap;
}
.ctc-redesign .ctc-kicker__rule{
  flex:1 1 auto; height:1px; background:var(--ct-line-2); position:relative;
  max-width:280px;
}
/* The arrowhead is drawn from two rotated hairlines so it stays perfectly
   aligned to the rule at any width. */
.ctc-redesign .ctc-kicker__rule::before,
.ctc-redesign .ctc-kicker__rule::after{
  content:""; position:absolute; right:0; width:9px; height:1px;
  background:var(--ct-line-2); transform-origin:100% 50%;
}
.ctc-redesign .ctc-kicker__rule::before{ transform:rotate(38deg); }
.ctc-redesign .ctc-kicker__rule::after{ transform:rotate(-38deg); }

/* ==========================================================================
   1b · HERO ART — the layered product composition
   Absolutely positioned against a fixed aspect box at desktop, then flattened
   into a controlled two-column grid below 980px. Percentages throughout so
   the overlap holds at every width in between.
   ========================================================================== */
.ctc-redesign .ctc-art{
  position:relative; aspect-ratio:1/.9; min-height:420px;
  /* the vertical BUILT TO SHIP rail hangs off the right edge */
  padding-right:56px;
}
/* Depth order, back to front: the dark card is the backdrop, the shot leans
   on its bottom-right corner, the New Project card sits in front of both and
   the annotation is nearest the reader. Stated once here rather than as a
   z-index on each rule, so the whole composition can be re-read in four
   lines instead of hunted for. */
.ctc-redesign .ctc-art > *{ position:absolute; }
.ctc-redesign .ctc-dark{ z-index:1; }
.ctc-redesign .ctc-shot{ z-index:2; }
.ctc-redesign .ctc-np{ z-index:3; }
.ctc-redesign .ctc-note{ z-index:4; }
.ctc-redesign .ctc-rail{ z-index:0; }

/* --- the dark statement card --------------------------------------------- */
.ctc-redesign .ctc-dark{
  top:0; left:4%; right:56px; height:58%;
  background:var(--ct-black); color:#F2F2F0; border-radius:var(--ct-r);
  padding:clamp(20px,2.4vw,30px);
  display:flex; gap:var(--sp-24); overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(12,12,12,.5);
}
/* A single soft lime bloom in the top-left corner. This is the one glow on
   the page: it is what makes the card read as a screen rather than a swatch,
   and it is masked to the card by overflow:hidden above. */
.ctc-redesign .ctc-dark::before{
  content:""; position:absolute; top:-38%; left:-18%; width:62%; height:110%;
  background:radial-gradient(closest-side, rgba(161,255,98,.28), transparent 72%);
  pointer-events:none;
}
/* The faint technical grid, drawn with two repeating gradients and faded out
   toward the bottom-right so it never competes with the type. */
.ctc-redesign .ctc-dark::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.055) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0 1px, transparent 1px 44px);
  -webkit-mask-image:linear-gradient(150deg, #000 0%, transparent 68%);
          mask-image:linear-gradient(150deg, #000 0%, transparent 68%);
}
.ctc-redesign .ctc-dark__body{
  position:relative; z-index:1; display:flex; flex-direction:column;
  justify-content:flex-end; flex:1 1 auto; min-width:0;
}
.ctc-redesign .ctc-dark__h{
  font-family:var(--ct-display); font-weight:400;
  font-size:clamp(1.35rem,2.25vw,2.05rem); line-height:1.12; letter-spacing:-.035em;
  color:#F4F3F1; margin:0;
}
.ctc-redesign .ctc-dark__side{
  position:relative; z-index:1; display:flex; flex-direction:column;
  justify-content:flex-start; align-items:flex-end; gap:var(--sp-40);
  flex:0 0 auto; text-align:right;
}
.ctc-redesign .ctc-dark__mark{
  font-family:var(--ct-display); font-weight:700; font-size:1.5rem;
  letter-spacing:-.04em; color:#FFF; line-height:1;
}
.ctc-redesign .ctc-dark__mark sup{ font-size:.5em; top:-.7em; opacity:.75; }
.ctc-redesign .ctc-dark__list{
  display:flex; flex-direction:column; gap:.42em; margin:0; text-align:right;
}
.ctc-redesign .ctc-dark__list li{
  font-size:clamp(.85rem,1.05vw,.98rem); color:#DAD8D4; letter-spacing:-.01em;
}

/* --- the floating "New Project" card ------------------------------------- */
.ctc-redesign .ctc-np{
  left:0; bottom:0; width:52%;
  background:var(--ct-white); border:1px solid var(--ct-line);
  border-radius:var(--ct-r); padding:clamp(18px,1.9vw,24px);
  box-shadow:0 24px 54px -26px rgba(19,18,17,.28);
}
.ctc-redesign .ctc-np__h{
  font-family:var(--ct-display); font-weight:600; font-size:1.12rem;
  letter-spacing:-.03em; margin:0 0 var(--sp-16); color:var(--ct-ink);
}
.ctc-redesign .ctc-np__list{ display:flex; flex-direction:column; gap:.72em; }
.ctc-redesign .ctc-np__row{
  display:flex; align-items:center; gap:.7em;
  font-size:.92rem; color:var(--ct-muted); letter-spacing:-.01em;
}
.ctc-redesign .ctc-np__row .rd{
  width:13px; height:13px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid var(--ct-line-2); background:var(--ct-white);
}
.ctc-redesign .ctc-np__row.is-on{ color:var(--ct-ink); }
.ctc-redesign .ctc-np__row.is-on .rd{
  border-color:var(--ct-violet);
  box-shadow:inset 0 0 0 3px var(--ct-white), inset 0 0 0 8px var(--ct-violet);
}
/* The black round action sits half outside the card's bottom-right corner. */
.ctc-redesign .ctc-np__go{
  position:absolute; right:-22px; bottom:-22px;
  width:52px; height:52px; border-radius:50%;
  background:var(--ct-black); color:#FFF; display:grid; place-items:center;
  box-shadow:0 12px 30px -12px rgba(11,11,11,.6);
}
.ctc-redesign .ctc-np__go svg{ width:20px; height:20px; }

/* --- the monochrome architectural card -----------------------------------
   The frame and the mask are two elements on purpose. The badge has to hang
   over the top-left corner, so the element that clips the artwork cannot be
   the same one the badge is positioned against — .ctc-shot stays unclipped
   and .ctc-shot__m does the rounding. That also means the badge keeps its
   relationship to the card at every breakpoint without a single hand-tuned
   offset. */
.ctc-redesign .ctc-shot{
  right:56px; bottom:7%; width:41%; aspect-ratio:1/1.04; margin:0;
}
.ctc-redesign .ctc-shot__m{
  position:absolute; inset:0; display:block; overflow:hidden;
  border-radius:var(--ct-r); background:var(--ct-paper-2);
  border:1px solid var(--ct-line);
  box-shadow:0 24px 54px -30px rgba(19,18,17,.35);
}
.ctc-redesign .ctc-shot__m img,
.ctc-redesign .ctc-shot__m svg{
  width:100%; height:100%; display:block; object-fit:cover;
}
/* The violet badge overlaps the top-left corner of the shot. */
.ctc-redesign .ctc-badge{
  position:absolute; top:-20px; left:-20px;
  width:46px; height:46px; border-radius:12px;
  background:var(--ct-violet); color:#FFF; display:grid; place-items:center;
  box-shadow:0 12px 26px -12px rgba(104,64,255,.75);
}
.ctc-redesign .ctc-badge svg{ width:22px; height:22px; }

/* --- the small annotation card ------------------------------------------- */
.ctc-redesign .ctc-note{
  right:16px; bottom:0; width:46%; max-width:246px;
  background:var(--ct-white); border:1px solid var(--ct-line);
  border-radius:var(--ct-r-md); padding:14px 16px;
  display:flex; gap:.65em; align-items:flex-start;
  box-shadow:0 18px 40px -22px rgba(19,18,17,.3);
}
.ctc-redesign .ctc-note .d{
  width:8px; height:8px; border-radius:50%; background:var(--ct-lime);
  flex:0 0 auto; margin-top:.42em;
}
.ctc-redesign .ctc-note p{
  margin:0; font-size:.88rem; line-height:1.4; letter-spacing:-.015em;
  color:var(--ct-ink);
}

/* --- the vertical rail --------------------------------------------------- */
.ctc-redesign .ctc-rail{
  top:8%; right:0; width:56px; height:52%;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-16);
}
.ctc-redesign .ctc-rail__t{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ct-muted);
  text-align:center; line-height:1.7; white-space:pre-line;
}
.ctc-redesign .ctc-rail__line{
  flex:1 1 auto; width:1px; background:var(--ct-line-2);
}
.ctc-redesign .ctc-rail__dot{
  width:6px; height:6px; border-radius:50%; background:var(--ct-line-2);
}

/* ==========================================================================
   2 · THE ENQUIRY BAND
   A recessed tone with hairlines top and bottom, holding the form panel and
   the information column.
   ========================================================================== */
.ctc-redesign .ctc-band{
  background:var(--ct-paper-2);
  border-top:1px solid var(--ct-line);
  border-bottom:1px solid var(--ct-line);
  padding:var(--ct-band) 0;
}
.ctc-redesign .ctc-grid{
  display:grid; grid-template-columns:minmax(0,1.86fr) minmax(0,1fr);
  gap:clamp(16px,1.8vw,26px); align-items:start;
}
.ctc-redesign .ctc-side{
  display:flex; flex-direction:column; gap:clamp(16px,1.8vw,26px);
}

/* The one card shell every panel on this band shares. */
.ctc-redesign .ctc-panel{
  background:var(--ct-white); border:1px solid var(--ct-line);
  border-radius:var(--ct-r); padding:clamp(24px,3vw,42px);
}

/* --- panel headers ------------------------------------------------------- */
.ctc-redesign .ctc-panel__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-24); margin-bottom:clamp(24px,2.6vw,36px);
}
.ctc-redesign .ctc-panel__req{
  font-size:.82rem; color:var(--ct-muted-2); letter-spacing:-.01em;
  flex:0 0 auto; padding-top:.5em;
}

/* ==========================================================================
   2a · THE FORM
   The controls keep their native identity — every rule below is presentation
   only, and no name, id, required flag or label association is touched.
   ========================================================================== */
.ctc-redesign .ctc-form{ display:flex; flex-direction:column; gap:var(--sp-24); }
.ctc-redesign .ctc-f2{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-24);
}
.ctc-redesign .ctc-field{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ctc-redesign .ctc-field label{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.13em; color:var(--ct-muted);
}
/* The required marker is coloured rather than bolded so the label row keeps
   an even weight; it is decorative, the input carries the real `required`. */
.ctc-redesign .ctc-field label .rq{ color:var(--ct-violet); }

.ctc-redesign .ctc-form input,
.ctc-redesign .ctc-form select,
.ctc-redesign .ctc-form textarea{
  width:100%; font-family:var(--font-body); font-size:.98rem;
  letter-spacing:-.01em; color:var(--ct-ink);
  background:var(--ct-white); border:1px solid var(--ct-line-2);
  border-radius:var(--ct-r-sm); padding:0 16px;
  transition:border-color .2s var(--ct-ease), box-shadow .2s var(--ct-ease),
             background .2s var(--ct-ease);
  -webkit-appearance:none; appearance:none;
}
.ctc-redesign .ctc-form input,
.ctc-redesign .ctc-form select{ height:52px; }
.ctc-redesign .ctc-form textarea{
  min-height:168px; padding:14px 16px; line-height:1.6; resize:vertical;
}
.ctc-redesign .ctc-form ::placeholder{ color:#B4AFAA; opacity:1; }

/* The native select arrow is replaced with a chevron drawn as a background
   image so the control matches the text inputs exactly. */
.ctc-redesign .ctc-form select{
  padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%23131211' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.ctc-redesign .ctc-form select:invalid{ color:var(--ct-muted-2); }

.ctc-redesign .ctc-form input:hover,
.ctc-redesign .ctc-form select:hover,
.ctc-redesign .ctc-form textarea:hover{ border-color:#BFBAB4; }
.ctc-redesign .ctc-form input:focus,
.ctc-redesign .ctc-form select:focus,
.ctc-redesign .ctc-form textarea:focus{
  outline:none; border-color:var(--ct-ink);
  box-shadow:0 0 0 3px rgba(19,18,17,.07);
}
/* Keyboard users still get the global violet ring; pointer users get the
   quieter treatment above. */
.ctc-redesign .ctc-form input:focus-visible,
.ctc-redesign .ctc-form select:focus-visible,
.ctc-redesign .ctc-form textarea:focus-visible{
  outline:2px solid var(--ct-violet); outline-offset:2px;
}

/* --- submit -------------------------------------------------------------- */
.ctc-redesign .ctc-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  width:100%; min-height:56px; margin-top:var(--sp-8);
  background:var(--ct-lime); color:var(--ct-ink);
  border:1px solid var(--ct-lime); border-radius:var(--ct-r-sm);
  font-family:var(--font-body); font-size:1rem; font-weight:500;
  letter-spacing:-.015em; cursor:pointer;
  transition:transform .22s var(--ct-ease), box-shadow .22s var(--ct-ease),
             background .22s var(--ct-ease);
}
.ctc-redesign .ctc-submit .ar{ transition:transform .22s var(--ct-ease); }
@media (hover:hover){
  .ctc-redesign .ctc-submit:hover{
    transform:translateY(-2px); background:#B2FF7C;
    box-shadow:0 14px 28px -14px rgba(19,18,17,.45);
  }
  .ctc-redesign .ctc-submit:hover .ar{ transform:translateX(4px); }
}
.ctc-redesign .ctc-submit:active{ transform:translateY(0); }

/* --- validation states ---------------------------------------------------
   Colour is never the only cue: an invalid field also gets a message beneath
   it and aria-invalid, so the state survives a colour-blind reader, a
   greyscale screen and a screen reader alike. */
.ctc-redesign .ctc-field__hint{
  margin:0; font-size:.78rem; line-height:1.45; color:var(--ct-muted-2);
  letter-spacing:-.005em;
}
.ctc-redesign .ctc-field__err{
  margin:0; font-size:.82rem; line-height:1.45; color:var(--coral);
  letter-spacing:-.005em;
}
/* Empty message elements must not add a gap to the field's flex column. */
.ctc-redesign .ctc-field__err:empty{ display:none; }

.ctc-redesign .ctc-field.is-bad input,
.ctc-redesign .ctc-field.is-bad select,
.ctc-redesign .ctc-field.is-bad textarea{
  border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(248,65,49,.09);
}
.ctc-redesign .ctc-field.is-bad label{ color:var(--coral); }
.ctc-redesign .ctc-field.is-bad label .rq{ color:var(--coral); }

/* A likely typo is a warning, not an error — the value may well be right. */
.ctc-redesign .ctc-field.is-warn input{
  border-color:#D9A21B; box-shadow:0 0 0 3px rgba(217,162,27,.1);
}

.ctc-redesign .ctc-field label .opt{
  color:var(--ct-muted-2); text-transform:none; letter-spacing:0;
  font-size:10px;
}

/* The one-tap email correction, inline and in the server-rendered notice. */
.ctc-redesign .ctc-fix{
  display:inline-flex; align-items:center; margin-top:6px;
  padding:6px 12px; border:1px solid var(--ct-line-2); border-radius:999px;
  background:var(--ct-white); cursor:pointer;
  font-family:var(--font-body); font-size:.82rem; color:var(--ct-ink);
  letter-spacing:-.01em;
  transition:background .2s var(--ct-ease), border-color .2s var(--ct-ease);
}
.ctc-redesign .ctc-fix:hover{ background:var(--ct-ink); border-color:var(--ct-ink); color:#FFF; }
.ctc-redesign .ctc-notice__fix{ margin:6px 0 0; }

/* Honeypots. Off-screen rather than display:none, because a meaningful share
   of bots skip fields that are hidden the obvious way — and because a field
   removed from the layout is also removed from the accessibility tree, which
   is what the aria-hidden and tabindex on the inputs are for. */
.ctc-redesign .ctc-hp{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden;
}

/* Submit, mid-flight. */
.ctc-redesign .ctc-submit.is-busy{
  opacity:.72; cursor:progress; transform:none;
}
.ctc-redesign .ctc-submit:disabled{ pointer-events:none; }

/* --- success / error notices --------------------------------------------- */
.ctc-redesign .ctc-notice{
  display:flex; gap:.85em; align-items:flex-start;
  border-radius:var(--ct-r-md); padding:18px 20px; margin:0 0 var(--sp-24);
  font-size:.98rem; line-height:1.55; letter-spacing:-.01em; color:var(--ct-ink);
  border:1px solid var(--ct-line-2); background:var(--ct-paper);
}
.ctc-redesign .ctc-notice .d{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:.5em;
  background:var(--ct-lime);
}
.ctc-redesign .ctc-notice--ok{
  background:#F1FFE6; border-color:#CBEDAC;
}
.ctc-redesign .ctc-notice--err{ background:#FFF3F1; border-color:#F3CFC9; }
.ctc-redesign .ctc-notice--err .d{ background:var(--coral); }
.ctc-redesign .ctc-notice--ok p,
.ctc-redesign .ctc-notice--err p{ margin:0; }
/* After a successful send the panel holds a single confirmation, so it does
   not need the full form's height. */
.ctc-redesign .ctc-sent__back{
  display:inline-flex; align-items:center; gap:.5em; margin-top:var(--sp-24);
  font-size:.95rem; color:var(--ct-ink);
  border-bottom:1px solid var(--ct-line-2); padding-bottom:2px;
  transition:border-color .2s var(--ct-ease);
}
.ctc-redesign .ctc-sent__back:hover{ border-color:var(--ct-ink); }

/* ==========================================================================
   2b · GET IN TOUCH
   ========================================================================== */
.ctc-redesign .ctc-touch__copy{
  margin:var(--sp-16) 0 var(--sp-32); font-size:.98rem; line-height:1.6;
  color:var(--ct-muted); max-width:36ch;
}
.ctc-redesign .ctc-touch__list{ display:flex; flex-direction:column; gap:var(--sp-16); }
.ctc-redesign .ctc-touch__row{ display:flex; align-items:center; gap:14px; }
.ctc-redesign .ctc-touch__ic{
  width:34px; height:34px; border-radius:var(--ct-r-sm); flex:0 0 auto;
  display:grid; place-items:center; color:var(--ct-ink);
  border:1px solid var(--ct-line); background:var(--ct-paper);
}
.ctc-redesign .ctc-touch__ic svg{ width:17px; height:17px; }
.ctc-redesign .ctc-touch__row a,
.ctc-redesign .ctc-touch__row span{
  font-size:.98rem; letter-spacing:-.01em; color:var(--ct-ink); min-width:0;
  overflow-wrap:anywhere;
}
.ctc-redesign .ctc-touch__row a{
  border-bottom:1px solid transparent; transition:border-color .2s var(--ct-ease);
}
.ctc-redesign .ctc-touch__row a:hover{ border-bottom-color:currentColor; }
.ctc-redesign .ctc-touch__social a{ color:var(--ct-violet); }
.ctc-redesign .ctc-touch__social .sep{ color:var(--ct-muted-2); margin:0 .4em; }

/* ==========================================================================
   2c · WHAT HAPPENS NEXT
   ========================================================================== */
.ctc-redesign .ctc-next__list{
  display:flex; flex-direction:column; gap:var(--sp-24);
  margin-top:clamp(20px,2.2vw,28px);
}
.ctc-redesign .ctc-step{
  position:relative; display:flex; gap:16px; align-items:flex-start;
}
/* The connector runs from under one badge to the next. It is drawn on the
   step rather than between them so the last one can simply switch it off. */
.ctc-redesign .ctc-step::before{
  content:""; position:absolute; left:22px; top:48px; bottom:calc(-1 * var(--sp-24));
  width:1px; background:var(--ct-line-2);
}
.ctc-redesign .ctc-step:last-child::before{ display:none; }
.ctc-redesign .ctc-step__n{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; background:var(--ct-violet-soft);
  color:var(--ct-violet); font-family:var(--font-mono); font-size:13px;
  font-weight:500; letter-spacing:.04em; position:relative; z-index:1;
}
.ctc-redesign .ctc-step__b{ min-width:0; padding-top:2px; }
.ctc-redesign .ctc-step__t{
  font-family:var(--ct-display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.025em; color:var(--ct-ink); margin:0 0 4px;
}
.ctc-redesign .ctc-step__d{
  margin:0; font-size:.92rem; line-height:1.55; color:var(--ct-muted);
}

/* --- response-time box --------------------------------------------------- */
.ctc-redesign .ctc-resp{
  display:flex; align-items:center; gap:14px; position:relative;
  margin-top:clamp(24px,2.6vw,32px); padding:18px 20px;
  background:var(--ct-violet-soft); border:1px solid #DFD5FF;
  border-radius:var(--ct-r-md);
}
.ctc-redesign .ctc-resp__ic{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; background:#FFF; color:var(--ct-violet);
}
.ctc-redesign .ctc-resp__ic svg{ width:17px; height:17px; }
.ctc-redesign .ctc-resp__l{
  display:block; font-size:.82rem; color:var(--ct-muted); letter-spacing:-.01em;
}
.ctc-redesign .ctc-resp__v{
  display:block; font-family:var(--ct-display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.025em; color:var(--ct-ink); margin-top:2px;
}
.ctc-redesign .ctc-resp__dot{
  position:absolute; top:16px; right:16px;
  width:8px; height:8px; border-radius:50%; background:var(--ct-lime);
}

/* ==========================================================================
   3 · SUPPORTING INFORMATION STRIP
   Borders and whitespace only — no cards.
   ========================================================================== */
.ctc-redesign .ctc-strip{ padding:clamp(40px,4.4vw,64px) 0; }
.ctc-redesign .ctc-strip__grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px); align-items:center;
}
.ctc-redesign .ctc-strip__col{
  display:flex; align-items:center; gap:var(--sp-24); min-width:0;
}
.ctc-redesign .ctc-strip__col + .ctc-strip__col{
  padding-left:clamp(24px,3vw,48px); border-left:1px solid var(--ct-line);
}
.ctc-redesign .ctc-strip__h{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.13em; line-height:1.85;
  color:var(--ct-ink); margin:0; white-space:pre-line;
}
.ctc-redesign .ctc-strip__rule{
  flex:1 1 auto; height:1px; background:var(--ct-line-2); max-width:90px;
}
.ctc-redesign .ctc-strip__k{
  display:block; font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.13em; color:var(--ct-muted);
  margin-bottom:6px;
}
.ctc-redesign .ctc-strip__v{
  margin:0; font-size:.98rem; letter-spacing:-.01em; color:var(--ct-ink);
  overflow-wrap:anywhere;
}
.ctc-redesign .ctc-strip__v a{
  border-bottom:1px solid var(--ct-line-2);
  transition:border-color .2s var(--ct-ease);
}
.ctc-redesign .ctc-strip__v a:hover{ border-bottom-color:var(--ct-ink); }
.ctc-redesign .ctc-strip__arrow{
  margin-left:auto; width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; border:1px solid var(--ct-line-2);
  color:var(--ct-ink); transition:background .22s var(--ct-ease),
    color .22s var(--ct-ease), border-color .22s var(--ct-ease);
}
.ctc-redesign .ctc-strip__arrow svg{ width:14px; height:14px; }
.ctc-redesign .ctc-strip__arrow:hover{
  background:var(--ct-ink); border-color:var(--ct-ink); color:#FFF;
}

/* --------------------------------------------------------------------------
   The page's own editable body content (deskman_page_body) sits between the
   hero and the band. It is styled by main.css's .pagey; these two rules only
   keep it on the band's rhythm instead of main.css's interior one.
   -------------------------------------------------------------------------- */
.ctc-redesign > .section{ padding:0 0 var(--ct-band); }
.ctc-redesign > .section + .ctc-band{ margin-top:0; }

/* ==========================================================================
   MOTION
   Restrained: a lift on the two floating hero cards, nothing that loops.
   main.js's .fade reveal already handles entrances and is gated on
   prefers-reduced-motion at the root, so nothing here needs to repeat that.
   ========================================================================== */
@media (hover:hover){
  .ctc-redesign .ctc-np,
  .ctc-redesign .ctc-note,
  .ctc-redesign .ctc-shot{
    transition:transform .5s var(--ct-ease), box-shadow .5s var(--ct-ease);
  }
  .ctc-redesign .ctc-art:hover .ctc-np{ transform:translateY(-6px); }
  .ctc-redesign .ctc-art:hover .ctc-note{ transform:translateY(-4px); }
  .ctc-redesign .ctc-art:hover .ctc-shot{ transform:translateY(-3px); }
  .ctc-redesign .ctc-panel{
    transition:border-color .3s var(--ct-ease), box-shadow .3s var(--ct-ease);
  }
  .ctc-redesign .ctc-touch:hover,
  .ctc-redesign .ctc-next:hover{
    border-color:var(--ct-line-2);
    box-shadow:0 18px 40px -32px rgba(19,18,17,.4);
  }
}
@media (prefers-reduced-motion:reduce){
  .ctc-redesign *,
  .ctc-redesign *::before,
  .ctc-redesign *::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .ctc-redesign .ctc-art:hover .ctc-np,
  .ctc-redesign .ctc-art:hover .ctc-note,
  .ctc-redesign .ctc-art:hover .ctc-shot{ transform:none; }
}

/* ==========================================================================
   RESPONSIVE
   Four deliberate compositions rather than one stack: 1180 tightens the
   grid, 980 rebuilds the hero art as a flat grid and drops the aside under
   the form, 720 goes single column, 480 is the phone.
   ========================================================================== */

/* --- 1180 and down -------------------------------------------------------- */
@media (max-width:1180px){
  .ctc-redesign .ctc-edge{ display:none; }
  .ctc-redesign .ctc-hero__grid{ gap:clamp(28px,3.4vw,44px); }
  .ctc-redesign .ctc-art{ padding-right:44px; min-height:380px; }
  .ctc-redesign .ctc-dark{ right:44px; }
  .ctc-redesign .ctc-shot{ right:44px; width:44%; }
  .ctc-redesign .ctc-rail{ width:44px; }
  .ctc-redesign .ctc-grid{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
}

/* --- 980 and down: the hero art flattens, the aside moves below ----------- */
@media (max-width:980px){
  .ctc-redesign .ctc-hero{
    padding-top:calc(var(--nav-top) + var(--nav-h) + var(--ticker-h) + var(--sp-40));
  }
  .ctc-redesign .ctc-hero__grid{ grid-template-columns:1fr; gap:clamp(40px,6vw,56px); }
  .ctc-redesign .ctc-lead{ max-width:56ch; }
  .ctc-redesign .ctc-kicker{ margin-top:var(--sp-40); }
  .ctc-redesign .ctc-kicker__rule{ max-width:none; }

  /* Every piece becomes a normal grid item. The overlap, the absolute
     offsets and the rail are all switched off in one place so there is no
     stray transform left behind to clip something. */
  .ctc-redesign .ctc-art{
    position:static; aspect-ratio:auto; min-height:0; padding-right:0;
    display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16);
  }
  .ctc-redesign .ctc-art > *{ position:static; }
  .ctc-redesign .ctc-dark{
    grid-column:1 / -1; width:auto; height:auto; min-height:230px;
    left:auto; right:auto;
  }
  .ctc-redesign .ctc-np{
    grid-column:1; width:auto; display:flex; flex-direction:column;
  }
  .ctc-redesign .ctc-np__go{
    position:static; margin:auto 0 0 auto; width:46px; height:46px;
  }
  /* the shot keeps its own positioning context so the badge stays on its
     corner — the blanket `> * { position:static }` above would otherwise
     hand the badge to the nearest positioned ancestor */
  .ctc-redesign .ctc-shot{
    position:relative; grid-column:2; width:auto; aspect-ratio:1/1.02;
    right:auto; align-self:end;
  }
  .ctc-redesign .ctc-badge{ top:-16px; left:-16px; }
  .ctc-redesign .ctc-note{
    grid-column:1 / -1; width:auto; max-width:none; right:auto;
  }
  .ctc-redesign .ctc-rail{ display:none; }

  /* form band */
  .ctc-redesign .ctc-grid{ grid-template-columns:1fr; }
  .ctc-redesign .ctc-side{
    display:grid; grid-template-columns:1fr 1fr; align-items:start;
  }
}

/* --- 860 and down --------------------------------------------------------- */
@media (max-width:860px){
  .ctc-redesign .ctc-side{ grid-template-columns:1fr; }
  .ctc-redesign .ctc-touch__copy{ max-width:52ch; }
  .ctc-redesign .ctc-strip__grid{ grid-template-columns:1fr; gap:0; }
  .ctc-redesign .ctc-strip__col{ padding:var(--sp-24) 0; }
  .ctc-redesign .ctc-strip__col + .ctc-strip__col{
    padding-left:0; border-left:0; border-top:1px solid var(--ct-line);
  }
  .ctc-redesign .ctc-strip__rule{ display:none; }
}

/* --- 720 and down: one column everywhere ---------------------------------- */
@media (max-width:720px){
  .ctc-redesign{ --ct-band:clamp(52px,10vw,72px); }
  .ctc-redesign .ctc-f2{ grid-template-columns:1fr; }
  .ctc-redesign .ctc-panel__head{
    flex-direction:column; align-items:flex-start; gap:var(--sp-8);
  }
  .ctc-redesign .ctc-panel__req{ padding-top:0; }
}

/* --- 560 and down: the phone composition ---------------------------------- */
@media (max-width:560px){
  .ctc-redesign .ctc-h1{ font-size:clamp(2.6rem,12.4vw,3.6rem); letter-spacing:-.04em; }
  .ctc-redesign .ctc-lead{ font-size:1rem; margin-top:var(--sp-24); }
  .ctc-redesign .ctc-pills{ gap:6px; }
  .ctc-redesign .ctc-pill{ height:28px; padding-inline:11px; font-size:9px; letter-spacing:.1em; }

  /* the art becomes a single controlled column; the shot keeps a landscape
     crop so it stays a composition rather than a thumbnail */
  .ctc-redesign .ctc-art{ grid-template-columns:1fr; }
  .ctc-redesign .ctc-dark{
    grid-column:1; flex-direction:column; gap:var(--sp-24); min-height:0;
  }
  .ctc-redesign .ctc-dark__side{
    flex-direction:row; align-items:flex-start; justify-content:space-between;
    width:100%; text-align:left; gap:var(--sp-24);
  }
  .ctc-redesign .ctc-dark__list{ text-align:left; }
  .ctc-redesign .ctc-dark__body{ order:2; }
  .ctc-redesign .ctc-np,
  .ctc-redesign .ctc-shot,
  .ctc-redesign .ctc-note{ grid-column:1; }
  .ctc-redesign .ctc-shot{ aspect-ratio:16/10; }
  .ctc-redesign .ctc-badge{
    top:-14px; left:-6px; width:40px; height:40px; border-radius:11px;
  }
  .ctc-redesign .ctc-badge svg{ width:19px; height:19px; }

  .ctc-redesign .ctc-panel{ padding:var(--sp-24) 20px; }
  .ctc-redesign .ctc-panel-h{ font-size:1.75rem; }
  .ctc-redesign .ctc-form textarea{ min-height:150px; }
  .ctc-redesign .ctc-step{ gap:14px; }
  .ctc-redesign .ctc-step__n{ width:40px; height:40px; font-size:12px; }
  .ctc-redesign .ctc-step::before{ left:20px; top:44px; }
}

/* --- 380 and down: the narrowest supported width -------------------------- */
@media (max-width:380px){
  .ctc-redesign .ctc-h1{ font-size:2.4rem; }
  .ctc-redesign .ctc-kicker{ flex-direction:column; align-items:flex-start; gap:var(--sp-16); }
  .ctc-redesign .ctc-kicker__rule{ width:100%; }
  .ctc-redesign .ctc-touch__row{ gap:12px; }
  .ctc-redesign .ctc-resp{ padding:16px; }
}

/* --------------------------------------------------------------------------
   Touch targets. main.css already guarantees 44px for .btn on coarse
   pointers; the redesign uses its own class names, so it states the same
   guarantee for its own controls.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .ctc-redesign .ctc-submit,
  .ctc-redesign .ctc-form input,
  .ctc-redesign .ctc-form select{ min-height:48px; }
  .ctc-redesign .ctc-pill,
  .ctc-redesign .ctc-touch__row a,
  .ctc-redesign .ctc-strip__arrow{ min-height:44px; }
  .ctc-redesign .ctc-pill{ height:auto; padding-block:8px; }
  .ctc-redesign .ctc-touch__row a{ display:inline-flex; align-items:center; }
  .ctc-redesign .ctc-strip__arrow{ width:44px; }
}

/* Print: drop the decoration, keep the information. */
@media print{
  .ctc-redesign .ctc-art,
  .ctc-redesign .ctc-edge,
  .ctc-redesign .ctc-submit{ display:none; }
  .ctc-redesign .ctc-panel{ border:1px solid #999; box-shadow:none; }
}