/* ==========================================================================
   Cloud Atlanta — site styles
   Palette taken from the existing site: base #F8F7F5, contrast #191919,
   muted #5F5F5F, rule #d7d7d7, panel #F1EEE9, brand red #990000 (the logo).
   ========================================================================== */

:root{
  --paper:#F8F7F5;
  --panel:#F1EEE9;
  --ink:#191919;
  --muted:#5F5F5F;
  --rule:#d7d7d7;
  --brand:#990000;
  --brand-deep:#6E0000;
  --brand-wash:rgba(153,0,0,.06);
  --white:#fff;
  --ok:#0F7A3D;
  --err:#B3261E;

  --sans:'Anek Malayalam',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Fira Code',ui-monospace,'SF Mono',Menlo,monospace;

  --gutter:clamp(20px,5vw,72px);
  --measure:1180px;
  --radius:10px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--muted);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .2vw,1.09rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}

a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(153,0,0,.28)}
a:hover{border-bottom-color:var(--brand)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:.7em 1.2em;border:0}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}

h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.08;letter-spacing:-.02em}

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand);
  display:block;
  font-weight:500;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(248,247,245,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.site-head__in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:.85rem;
}
.site-head a{border:0}
.site-head__logo{width:clamp(150px,20vw,196px)}
.site-head__cta{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--rule);border-radius:999px;
  padding:.55em 1.2em;transition:background .18s,color .18s,border-color .18s;
  white-space:nowrap;
}
.site-head__cta:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding-block:clamp(40px,7vw,84px) clamp(36px,5vw,64px)}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px);
  align-items:center;
}
.hero h1{
  font-size:clamp(2.1rem,1.25rem + 3.6vw,3.9rem);
  margin-top:1.1rem;
}
.hero__lede{
  margin-top:1.3rem;
  font-size:clamp(1.08rem,1rem + .5vw,1.35rem);
  line-height:1.5;
  max-width:34ch;
}
.hero__rule{
  width:56px;height:3px;background:var(--brand);
  margin-top:1.8rem;border-radius:2px;
}
.hero__figure{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(25,25,25,.5),0 0 0 1px var(--rule);
}
.hero__figure img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* address / meta strip under the hero */
.strip{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--panel);
}
.strip__in{
  display:flex;flex-wrap:wrap;gap:1rem 3rem;
  padding-block:1.1rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.strip__in span{display:inline-flex;align-items:center;gap:.6em}
.strip__in b{color:var(--ink);font-weight:500}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{padding-block:clamp(52px,8vw,104px)}
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.contact h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.7rem);margin-top:.9rem}
.contact__note{margin-top:1.1rem;max-width:38ch}

.addr{
  margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--rule);
  font-style:normal;
}
.addr dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem;
}
.addr dd{color:var(--ink);line-height:1.5}
.addr dd + dt{margin-top:1.3rem}

/* ---------- the form ---------- */
.form-card{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:clamp(20px,3.2vw,38px);
  box-shadow:0 24px 50px -38px rgba(25,25,25,.45);
}
.field + .field{margin-top:1.15rem}
.field label{
  display:block;
  font-size:.82rem;font-weight:500;color:var(--ink);
  letter-spacing:.01em;margin-bottom:.4rem;
}
.field .req{color:var(--brand);margin-left:.15em}
.field input,
.field textarea{
  width:100%;
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:.72em .85em;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.field textarea{min-height:9.5em;resize:vertical;line-height:1.55}
.field input:hover,.field textarea:hover{border-color:#bcbcbc}
.field input:focus,.field textarea:focus{
  outline:0;background:var(--white);
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-wash);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px rgba(179,38,30,.08)}

.field__err{
  display:none;
  margin-top:.35rem;font-size:.8rem;color:var(--err);
}
.field__err.is-shown{display:block}

.counter{
  float:right;font-family:var(--mono);font-size:.68rem;color:var(--muted);
  letter-spacing:.06em;font-weight:400;
}
.counter.is-near{color:var(--err)}

/* Spam trap — hidden from people, still submitted with the form.
   display:none (rather than the clipped visually-hidden pattern) is skipped by
   browser autofill and password managers far more reliably. */
.trap{display:none}

.turnstile-slot{margin-top:1.3rem;min-height:65px}

.form-actions{
  margin-top:1.4rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
}
.btn{
  font-family:var(--sans);font-size:.95rem;font-weight:500;letter-spacing:.02em;
  background:var(--brand);color:#fff;
  border:1px solid var(--brand);border-radius:6px;
  padding:.75em 1.9em;cursor:pointer;
  transition:background .18s,border-color .18s,transform .1s;
}
.btn:hover:not(:disabled){background:var(--brand-deep);border-color:var(--brand-deep)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn__spin{
  display:none;width:.85em;height:.85em;margin-right:.55em;vertical-align:-.05em;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
.is-sending .btn__spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.form-status{
  font-size:.9rem;line-height:1.45;
}
.form-status:empty{display:none}
.form-status.is-err{color:var(--err)}
.form-status.is-ok{color:var(--ok)}

.form-priv{
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--rule);
  font-size:.78rem;color:var(--muted);line-height:1.5;
}

/* success panel swapped in after a send */
.sent{
  display:none;
  text-align:center;padding:clamp(28px,4vw,52px) 1rem;
}
.sent.is-shown{display:block}
.sent__mark{
  width:52px;height:52px;margin:0 auto 1.2rem;border-radius:50%;
  background:var(--brand-wash);color:var(--brand);
  display:grid;place-items:center;
}
.sent h3{font-size:1.35rem;margin-bottom:.6rem}
.sent p{max-width:40ch;margin-inline:auto}
.sent button{
  margin-top:1.6rem;background:none;border:1px solid var(--rule);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border-radius:999px;padding:.6em 1.3em;cursor:pointer;
}
.sent button:hover{border-color:var(--brand);color:var(--brand)}
.form-card.is-sent .form-live{display:none}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{
  border-top:1px solid var(--rule);
  background:var(--panel);
  padding-block:clamp(38px,5vw,64px) clamp(24px,3vw,36px);
}
.site-foot__grid{
  display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start;
}
.site-foot__logo{width:172px}
.site-foot address{font-style:normal;margin-top:1.2rem;color:var(--muted);line-height:1.55}
.site-foot__legal{
  margin-top:clamp(28px,4vw,48px);padding-top:1.2rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:.8rem;color:var(--muted);
}

/* ==========================================================================
   404
   ========================================================================== */
.notfound{min-height:78svh;display:grid;place-items:center;text-align:center}
.notfound__code{
  font-family:var(--mono);font-size:clamp(3.4rem,9vw,7rem);line-height:1;
  color:var(--brand);letter-spacing:-.04em;
}
.notfound h1{font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);margin-top:1rem}
.notfound p{margin:1rem auto 0;max-width:42ch}
.notfound .backlink{
  display:inline-block;margin-top:2rem;border:1px solid var(--rule);border-radius:999px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);padding:.7em 1.5em;
}
.notfound .backlink:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:880px){
  .hero__grid,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .hero__figure{order:-1}
  .site-head__cta{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* the header is sticky, so anchor targets need room above them */
[id]{scroll-margin-top:5.5rem}