/* Kōr’s Fab Café landing page
   Reference design: 1440px desktop mockup. Values below were tuned against it,
   then made fluid so the layout adapts rather than scales as a screenshot.

   The three script lines (headline, form heading, credibility line) are SVG outlines of
   SignPainter HouseScript, the exact font in the approved mockup, drawn from the copy installed
   with macOS. They are images with real alt text, not an embedded web font. See README. */

:root {
  --chocolate: #472a1a;
  --cream: #F6F1E7;
  --forest: #193E38;
  --caramel: #d1a777;   /* accent only, not used for text (fails contrast) */
  --brown: #91613E;     /* supporting text, 4.68:1 on cream */
  --rule: #e2d6bd;
  --card-border: #e4dac8;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--forest);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
p, h1, h2 { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
}

/* ---------- Header ---------- */
.site-header { background: var(--chocolate); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: clamp(4px, 0.9vw, 14px);   /* ~13px at 1440 wide; phones set their own below */
}
.header-logo {
  width: clamp(150px, 20.1vw, 290px);   /* ~290px at 1440 */
  flex: none;
  margin-left: clamp(0px, 1.4vw, 20px);
}
.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: clamp(0px, 6vw, 88px);
}
.attribution {
  color: var(--cream);
  font-size: clamp(12px, 1.945vw, 28px); /* 28px at 1440 */
  line-height: 1.15;
  text-align: right;
  letter-spacing: 0.01em;
}
.header-phone {
  color: var(--cream);
  font-size: clamp(16px, 1.53vw, 22px);
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* comfortable thumb target */
  border-bottom: 1px solid transparent;
}
.header-phone:hover { border-bottom-color: var(--caramel); }
.header-phone:focus-visible { outline-color: var(--cream); }

/* ---------- Main layout ---------- */
.page {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 86px);
  align-items: start;
  padding-top: clamp(14px, 1.8vw, 26px);   /* halved: the label sits about half as far below the bar */
  padding-bottom: clamp(32px, 3.3vw, 47px);
}
.intro-col { padding-top: clamp(0px, 0.63vw, 9px); }

.brand-label {
  color: var(--brown);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.headline {
  --fs: clamp(44px, 4.03vw, 58px);       /* drawn at 58px in the mockup (1440 wide) */
  margin-top: 12px;   /* was 23px: closer to the KŌR’S FAB CAFÉ label */
}
.headline img { width: calc(var(--fs) * 6.9); height: auto; max-width: 100%; }

.supporting {
  text-wrap: balance;
  color: var(--brown);
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.3;
  margin-top: -4px;    /* the headline image carries its own descender space */
}
.intro {
  color: var(--forest);
  font-size: clamp(17px, 1.32vw, 19px);
  line-height: 1.53;
  max-width: 26.5em;
  margin-top: 24px;
}

/* ---------- Form card ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: clamp(20px, 2vw, 26px);
  padding-bottom: 20px;
  overflow: hidden;
  margin-top: 32px;
  scroll-margin-top: 20px;
}
.form-heading {
  --fs: clamp(26px, 2.15vw, 31px);       /* 31px in the mockup */
  margin: -8px 0 0;
  position: relative;   /* keep the heading above the form frame, which is pulled up behind it */
  z-index: 1;
}
.form-heading img { width: calc(var(--fs) * 8.57); height: auto; max-width: 100%; }
.form-slot { min-height: 250px; }
/* HubSpot adds ~30px of empty white around the form inside its frame; trim it so the form
   sits closer to the heading and the card has less dead space under the button. */
.form-slot { margin-top: -26px; margin-bottom: -35px; }   /* HubSpot adds ~30px of empty white inside its frame; trim it (the card clips the overhang) */
.form-slot iframe { display: block; }
.form-status {
  font-size: 15px;
  line-height: 1.5;
  color: var(--forest);
  background: #faf6ee;
  border: 1px dashed var(--caramel);
  border-radius: 10px;
  padding: 14px 16px;
}
.form-slot:not(:empty) + .form-status { margin-top: 12px; }

/* ---------- Artwork ---------- */
.art-col { display: flex; justify-content: flex-start; }
.art {
  width: min(100%, 494px);
  height: auto;
  /* artwork has built-in transparent margin; pull it up so its visible top aligns with the headline */
  margin-top: clamp(-20px, -1.4vw, 0px);
}

/* ---------- Footer ---------- */
.site-footer { padding-bottom: clamp(24px, 3vw, 40px); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}
.footer-text { min-width: 0; }
.credibility { --fs: clamp(19px, 1.8vw, 26px); }   /* 26px in the mockup */
.credibility img { width: calc(var(--fs) * 24.7); height: auto; max-width: 100%; }
@media (max-width: 760px) {
  .credibility { --fs: 22px; }
  .credibility img { width: calc(var(--fs) * 13.2); }   /* two-line version */
}
.contact {
  font-size: 17px;
  margin-top: 10px;
  color: var(--forest);
}
.footer-logo { width: clamp(104px, 10.4vw, 150px); flex: none; }

/* ---------- Mid-size desktops/landscape tablets: give the artwork more room ---------- */
@media (min-width: 960px) and (max-width: 1199px) {
  .page { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ---------- Tablet / mobile: single column, form stays high on the page ---------- */
@media (max-width: 959px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .intro-col { padding-top: 0; }
  .art-col { justify-content: center; margin-top: 8px; }
  .art { width: min(82%, 420px); margin-top: 0; }
  .form-card { max-width: 640px; }
  .headline { --fs: clamp(48px, 7vw, 58px); }
}

@media (max-width: 599px) {
  .page { padding-top: 28px; }
  .header-inner { padding-block: 10px; }
  .header-logo { margin-left: 0; width: 150px; }
  .header-right { margin-right: 0; padding-top: 6px; }
  .attribution { max-width: 11em; font-size: 11px; letter-spacing: 0.04em; }
  .header-phone { font-size: 17px; }
  .brand-label { font-size: 14px; }
  .headline { --fs: clamp(40px, 11.6vw, 46px); margin-top: 14px; }
  /* keep the supporting line on one line: size it from the screen width (text is ~21.4x its font size wide) */
  .supporting { margin-top: -2px; white-space: nowrap; font-size: min(17px, calc((100vw - 40px) / 21.4)); }
  .intro { margin-top: 18px; }
  .form-card { margin-top: 26px; border-radius: 16px; }
  .footer-inner { flex-direction: column-reverse; align-items: center; gap: 18px; text-align: center; }
  .footer-text { width: 100%; }
  .credibility img { margin-inline: auto; }
  .footer-logo { width: 125px; }   /* +20% from the 104px minimum */
  .contact { font-size: 16px; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}