/* ---------- Grow With Me ----------
   Page-scoped styles. Loaded only by grow-with-me.html, so bare element
   selectors here are safe. Everything pulls from the tokens in styles.css:
   the only colour declared below is the alert tone, taken from the warm end
   of --gradient-wash and lightened until it reads on the near-black canvas. */
/* display rules below would otherwise beat the hidden attribute */
[hidden]{ display: none !important; }

:root{
  --gwm-alert: #f08a6e;
  --gwm-field-bg: rgba(255,255,255,.02);
  --gwm-field-hover: rgba(255,255,255,.28);
}

/* ---------- hero ---------- */
.gwm-hero{ padding: var(--s6) var(--s4) var(--s4); }
.gwm-title{
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 6.4vw, 76px); line-height: 1.04; letter-spacing: -0.025em;
  max-width: 14ch;
}
.gwm-lede{
  font-family: var(--body-sans); font-size: 20px; line-height: 1.6;
  color: var(--ash); max-width: 56ch; margin-top: var(--s3);
}

/* ---------- layout ---------- */
.gwm-section{ padding: var(--s4) var(--s4) var(--s6); }
.gwm-panel{ position: relative; }
.gwm-form{
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  column-gap: var(--s5); row-gap: var(--s3); align-items: start;
}
/* Explicit placement so the DOM can run fields, checklist, then submit.
   That order matters on one column: the optional checklist has to be seen
   before the button, not after it. */
.gwm-fields{
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; gap: var(--s3); min-width: 0;
}
.gwm-actions{
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column; gap: var(--s3); min-width: 0;
}

/* The aside is secondary, so it sits behind a hairline rather than in a box. */
.gwm-aside{
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  border-left: 1px solid var(--hairline); padding-left: var(--s4);
  display: flex; flex-direction: column; gap: var(--s4); min-width: 0;
}

/* ---------- labels and helper text ---------- */
.gwm-label{
  display: block; font-size: 13px; letter-spacing: .02em;
  color: var(--white); font-weight: 500; margin-bottom: 9px; padding: 0;
}
.gwm-opt{ color: var(--ash); font-weight: 400; letter-spacing: 0; }
.gwm-opt::before{ content: '('; }
.gwm-opt::after{ content: ')'; }
.gwm-hint{
  font-size: 13px; line-height: 1.55; color: var(--ash);
  margin: -4px 0 10px; max-width: 52ch;
}
.gwm-label-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); flex-wrap: wrap; margin-bottom: 9px;
}
.gwm-label-row .gwm-label{ margin-bottom: 0; }

/* ---------- inputs ---------- */
.gwm-input{
  width: 100%; display: block;
  font-family: var(--body-sans); font-size: 16px; line-height: 1.5; color: var(--white);
  background: var(--gwm-field-bg);
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 15px 17px; caret-color: var(--white);
  transition: border-color .22s var(--ease-glide), background .22s var(--ease-glide), box-shadow .22s var(--ease-glide);
}
.gwm-input::placeholder{ color: #7d7d7d; }
.gwm-input:hover{ border-color: var(--gwm-field-hover); }
.gwm-input:focus{
  outline: none; border-color: var(--white);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}
.gwm-input[aria-invalid="true"]{ border-color: var(--gwm-alert); }
.gwm-input[aria-invalid="true"]:focus{ box-shadow: 0 0 0 3px rgba(240,138,110,.18); }

.gwm-textarea{
  resize: vertical; min-height: 116px;
  scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
.gwm-textarea::-webkit-scrollbar{ width: 11px; }
.gwm-textarea::-webkit-scrollbar-track{ background: transparent; }
.gwm-textarea::-webkit-scrollbar-thumb{
  background: #3d3e41; border-radius: 20px; border: 3px solid var(--void);
}
.gwm-textarea::-webkit-scrollbar-thumb:hover{ background: #565759; }

.gwm-count-row{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); min-height: 18px; }
.gwm-count{ font-size: 12px; color: var(--ash); margin-left: auto; font-variant-numeric: tabular-nums; }
.gwm-count.is-close{ color: var(--gwm-alert); }

/* ---------- contact type toggle ---------- */
.gwm-toggle{
  position: relative; display: flex; width: 168px; padding: 3px; flex-shrink: 0;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: var(--gwm-field-bg);
}
.gwm-toggle-thumb{
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: var(--radius-pill); background: var(--white);
  transition: transform .34s var(--ease-glide);
}
.gwm-toggle[data-mode="email"] .gwm-toggle-thumb{ transform: translateX(100%); }
.gwm-toggle-opt{
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--ash); padding: 8px 6px; border-radius: var(--radius-pill);
  transition: color .3s var(--ease-glide);
}
.gwm-toggle-opt:hover{ color: var(--white); }
.gwm-toggle-opt.is-on, .gwm-toggle-opt.is-on:hover{ color: var(--void); }
.gwm-toggle-opt:focus-visible{ outline: 1px solid var(--white); outline-offset: 3px; }

/* ---------- optional checklist ---------- */
.gwm-checklist{ border: 0; margin: 0; padding: 0; min-width: 0; }
.gwm-checklist .gwm-label{ margin-bottom: 9px; }
.gwm-checks{ display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.gwm-check{
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  font-size: 15px; color: var(--white); padding: 9px 10px 9px 0;
  border-radius: 6px; transition: color .2s;
}
.gwm-check input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.gwm-box{
  width: 19px; height: 19px; flex-shrink: 0; border-radius: 4px;
  border: 1px solid var(--hairline); background: var(--gwm-field-bg);
  transition: background .18s var(--ease-glide), border-color .18s var(--ease-glide);
}
.gwm-check:hover .gwm-box{ border-color: var(--gwm-field-hover); }
.gwm-check input:checked + .gwm-box{
  background-color: var(--white); border-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.4' fill='none' stroke='%23020202' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 15px 15px; background-position: center; background-repeat: no-repeat;
}
.gwm-check input:focus-visible + .gwm-box{ outline: 1px solid var(--white); outline-offset: 3px; }

/* ---------- what happens next ---------- */
.gwm-next{ border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.gwm-steps{
  counter-reset: gwmstep; list-style: none;
  display: flex; flex-direction: column; gap: 13px; margin-top: var(--s2);
}
.gwm-steps li{
  position: relative; padding-left: 26px;
  font-size: 14px; line-height: 1.55; color: var(--ash);
}
/* The order is the information here: send, then read, then reply. */
.gwm-steps li::before{
  counter-increment: gwmstep; content: counter(gwmstep);
  position: absolute; left: 0; top: 0;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--hairline); color: var(--white);
  font-size: 10px; line-height: 15px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- submit ---------- */
.gwm-submit-row{
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s2);
}
.gwm-submit{ min-width: 176px; }
.gwm-submit[disabled]{ cursor: progress; opacity: .55; transform: none; }
.gwm-submit[disabled]:hover{ background: var(--white); color: var(--void); transform: none; }
.gwm-fineprint{ font-size: 13px; line-height: 1.5; color: var(--ash); max-width: 34ch; }

/* ---------- messages ---------- */
.gwm-err{ font-size: 13px; line-height: 1.5; color: var(--gwm-alert); margin-top: 8px; }
.gwm-alert{
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid rgba(240,138,110,.38); border-radius: 8px;
  background: rgba(240,138,110,.07);
  padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--gwm-alert);
}
.gwm-alert svg{ width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }
.gwm-alert a{ color: var(--gwm-alert); text-decoration: underline; text-underline-offset: 3px; }

/* off-screen rather than display:none, so bots still fill it in */
.gwm-trap{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- confirmation ----------
   The one authored moment on this page: the spiral that opens the site
   draws itself again, in the only colour the page ever shows. */
.gwm-done{
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s4); align-items: center;
  padding: var(--s4) 0;
}
.gwm-done-mark{ width: 232px; height: 232px; justify-self: start; }
.gwm-done-mark svg{ width: 100%; height: 100%; display: block; overflow: visible; }
/* the dash values are measured from the path in grow.js, then this class runs it */
#gwmSpiral.is-drawing{ animation: gwmDraw 2.4s cubic-bezier(.32,0,.18,1) .1s forwards; }
@keyframes gwmDraw{ to{ stroke-dashoffset: 0; } }

.gwm-done-copy{ opacity: 0; animation: gwmRise .9s var(--ease-glide) .55s forwards; }
.gwm-done-copy:focus{ outline: none; }
.gwm-done-copy:focus-visible{ outline: 1px solid var(--white); outline-offset: 12px; border-radius: 4px; }
@keyframes gwmRise{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }

.gwm-done-head{
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
}
.gwm-done-line{ font-size: 19px; line-height: 1.6; color: var(--white); margin-top: var(--s2); max-width: 44ch; }
.gwm-done-sub{ font-size: 14px; line-height: 1.6; color: var(--ash); margin-top: var(--s2); }
.gwm-done-sub a{ color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.gwm-done-sub a:hover{ color: var(--ash); }
.gwm-done-link{ margin-top: var(--s3); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .gwm-form{ grid-template-columns: 1fr; row-gap: var(--s4); }
  .gwm-fields, .gwm-aside, .gwm-actions{ grid-column: 1; grid-row: auto; }
  .gwm-aside{
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--hairline); padding-top: var(--s4);
  }
  .gwm-done{ grid-template-columns: 1fr; gap: var(--s3); justify-items: start; }
  .gwm-done-mark{ width: 148px; height: 148px; }
}
@media (max-width: 760px){
  .gwm-hero{ padding: var(--s5) var(--s4) var(--s3); }
  .gwm-hero > .section-wrap,
  .gwm-section > .section-wrap{ padding-left: 0; padding-right: 0; }
  .gwm-title{ font-size: clamp(32px, 9.6vw, 50px); max-width: 100%; }
  .gwm-lede{ font-size: 17px; line-height: 1.62; }
  /* 16px keeps iOS from zooming the viewport on focus */
  .gwm-input{ font-size: 16px; padding: 14px 15px; }
  .gwm-textarea{ min-height: 96px; }
  .gwm-label-row{ align-items: flex-start; }
  .gwm-submit-row{ gap: var(--s2); }
  .gwm-submit{ width: 100%; }
  .gwm-fineprint{ max-width: none; }
  .gwm-check{ padding: 11px 10px 11px 0; }
  .gwm-done-line{ font-size: 17px; }
}

@media (prefers-reduced-motion: reduce){
  #gwmSpiral{ animation: none; stroke-dashoffset: 0; }
  .gwm-done-copy{ animation: none; opacity: 1; }
  .gwm-toggle-thumb{ transition: none; }
}