/* ==========================================================================
   CASANIDO — Website stylesheet
   Built strictly on the official palette (V1.0 · 2026) and Typography Guide.
   Colors and type sizes below are the brand values. Change nothing here
   without checking the brand guides first.
   ========================================================================== */

:root{
  /* ---- Official palette ---- */
  --carbon:      #1B1916;   /* logo, primary text, contrast backgrounds      */
  --ivory:       #F7F4EE;   /* primary background                            */
  --white:       #FFFFFF;   /* working paper: documents, tables, content     */
  --sand:        #EFEBE2;   /* alternate background for blocks + quiet notes */
  --stone:       #DDD8CE;   /* rules, dividers, borders                      */
  --taupe:       #8A8272;   /* secondary text, labels, footnotes             */
  --olive:       #4C4A36;   /* the single accent                             */

  /* ---- Type ---- */
  --display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --utility: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Lato', -apple-system, 'Segoe UI', Arial, sans-serif;

  /* ---- Rhythm ---- */
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --measure: 62ch;
  --section-y: clamp(5rem, 11vw, 10.5rem);
  --rule: 1px solid var(--stone);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

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

body{
  margin: 0;
  background: var(--ivory);
  color: var(--carbon);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

/* --------------------------------------------------------------------------
   TYPE ROLES
   Marcellus speaks · Jost organizes · Lato explains. Never italic.
   -------------------------------------------------------------------------- */

.display{
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  line-height: 1.18;
  letter-spacing: .005em;
}

.eyebrow{
  font-family: var(--utility);
  font-weight: 300;
  font-size: clamp(.625rem, .9vw, .8125rem);
  text-transform: uppercase;
  letter-spacing: .30em;
  color: var(--taupe);
  margin: 0 0 1.75rem;
  display: block;
}

.eyebrow--accent{ color: var(--olive); }

.lede{
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  letter-spacing: .005em;
  max-width: 34ch;
  margin: 0;
}

.prose{
  max-width: var(--measure);
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.75;
}

.prose p{ margin: 0 0 1.4em; }
.prose p:last-child{ margin-bottom: 0; }

.footnote{
  font-family: var(--body);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--taupe);
}

/* --------------------------------------------------------------------------
   THE WORDMARK
   Placeholder rendering only. The real logo is a vector master (SVG/PDF/PNG)
   with letters converted to outlines. Kerning below reproduces the guide's
   per-pair values so the placeholder is faithful until the SVG is dropped in.
   -------------------------------------------------------------------------- */

.wordmark{
  font-family: var(--display);
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
  color: inherit;
  font-weight: 400;
}

.wordmark span{ display: inline-block; }

.wordmark .k-ca{ letter-spacing: .250em; }  /* C→A */
.wordmark .k-as{ letter-spacing: .200em; }  /* A→S */
.wordmark .k-sa{ letter-spacing: .215em; }  /* S→A */
.wordmark .k-an{ letter-spacing: .205em; }  /* A→N */
.wordmark .k-ni{ letter-spacing: .250em; }  /* N→I */
.wordmark .k-id{ letter-spacing: .255em; }  /* I→D */
.wordmark .k-do{ letter-spacing: .230em; }  /* D→O */

/* --------------------------------------------------------------------------
   LAYOUT
   Structured with thin stone lines and air. Never with colored boxes.
   -------------------------------------------------------------------------- */

.wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.band{
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  border-top: var(--rule);
}

.band--sand{ background: var(--sand); }
.band--paper{ background: var(--white); }

.band--carbon{
  background: var(--carbon);
  color: var(--ivory);
  border-top-color: var(--carbon);
}

.band--carbon .eyebrow{ color: var(--stone); }
.band--carbon .footnote{ color: var(--stone); }

.split{
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.split__aside{ position: sticky; top: 6.5rem; }

@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; gap: 2rem; }
  .split__aside{ position: static; }
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.masthead{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 244, 238, .93);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: var(--rule);
}

.masthead__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 4.75rem;
}

.masthead .wordmark{ font-size: clamp(.95rem, 1.5vw, 1.1rem); }

.masthead__brand{ text-decoration: none; color: var(--carbon); }

.nav{
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.nav a{
  font-family: var(--utility);
  font-weight: 300;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--taupe);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.nav a:hover,
.nav a:focus-visible{ color: var(--carbon); border-bottom-color: var(--olive); }

@media (max-width: 820px){
  .nav a:not(.nav__cta){ display: none; }
}

.nav__cta{ color: var(--carbon) !important; border-bottom-color: var(--stone) !important; }
.nav__cta:hover,
.nav__cta:focus-visible{ border-bottom-color: var(--olive) !important; }

/* --------------------------------------------------------------------------
   HERO — the wordmark sets itself. One orchestrated moment, then stillness.
   -------------------------------------------------------------------------- */

.hero{
  padding-top: clamp(4.5rem, 12vw, 9.5rem);
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
}

.hero__mark{
  font-size: clamp(2.4rem, 11.4vw, 10rem);
  line-height: 1;
  display: block;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

/* Marcellus glyphs are wider than the fallback serif. Ease off on narrow
   screens so the wordmark never breaks the gutter. */
@media (max-width: 560px){
  .hero__mark{ font-size: clamp(1.75rem, 10vw, 3rem); }
}

.hero__mark span{
  animation: set-type 1500ms cubic-bezier(.16, 1, .3, 1) both;
}

.hero__mark .k-ca{ --k: .250em; animation-delay:  60ms; }
.hero__mark .k-as{ --k: .200em; animation-delay: 120ms; }
.hero__mark .k-sa{ --k: .215em; animation-delay: 180ms; }
.hero__mark .k-an{ --k: .205em; animation-delay: 240ms; }
.hero__mark .k-ni{ --k: .250em; animation-delay: 300ms; }
.hero__mark .k-id{ --k: .255em; animation-delay: 360ms; }
.hero__mark .k-do{ --k: .230em; animation-delay: 420ms; }
.hero__mark .k-end{ --k: 0em;   animation-delay: 480ms; }

@keyframes set-type{
  from{ letter-spacing: .01em; opacity: 0; }
  to  { letter-spacing: var(--k); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .hero__mark span{ animation: none; opacity: 1; }
}

.hero__rule{
  border: 0;
  border-top: var(--rule);
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: .55em 1.4em;
  font-family: var(--utility);
  font-weight: 300;
  font-size: clamp(.625rem, .95vw, .8125rem);
  text-transform: uppercase;
  letter-spacing: .30em;
  color: var(--taupe);
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}

.hero__statement{
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.4vw, 3.1rem);
  line-height: 1.3;
  letter-spacing: .005em;
  max-width: 22ch;
  margin: 0 0 2.5rem;
}

.hero__sub{
  max-width: 48ch;
  color: var(--taupe);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  margin: 0 0 3rem;
}

.hero__actions{ display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }

/* --------------------------------------------------------------------------
   BUTTONS + LINKS
   -------------------------------------------------------------------------- */

.btn{
  display: inline-block;
  font-family: var(--utility);
  font-weight: 400;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  text-decoration: none;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--carbon);
  background: var(--carbon);
  color: var(--ivory);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.btn:hover,
.btn:focus-visible{ background: var(--olive); border-color: var(--olive); color: var(--ivory); }

.btn--ghost{ background: transparent; color: var(--carbon); border-color: var(--stone); }
.btn--ghost:hover,
.btn--ghost:focus-visible{ background: transparent; color: var(--olive); border-color: var(--olive); }

.link-quiet{
  font-family: var(--utility);
  font-weight: 300;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--carbon);
  text-decoration: none;
  border-bottom: 1px solid var(--stone);
  padding-bottom: .3rem;
  transition: border-color .25s ease, color .25s ease;
}

.link-quiet:hover,
.link-quiet:focus-visible{ color: var(--olive); border-bottom-color: var(--olive); }

.prose a{ color: var(--olive); text-decoration: underline; text-underline-offset: .18em; }
.prose a:hover{ color: var(--carbon); }

:focus-visible{ outline: 2px solid var(--olive); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   RULED ROWS — the core structural device
   -------------------------------------------------------------------------- */

.rows{ border-top: var(--rule); margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.row{
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(1.75rem, 3.6vw, 2.9rem) 0;
  border-bottom: var(--rule);
  align-items: baseline;
}

.row__title{
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  line-height: 1.25;
  margin: 0;
  font-weight: 400;
}

.row__body{
  margin: 0;
  color: var(--taupe);
  max-width: 58ch;
  font-size: clamp(.95rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
}

@media (max-width: 760px){
  .row{ grid-template-columns: 1fr; gap: .75rem; }
}

/* --------------------------------------------------------------------------
   THE TWELVE — signature element.
   Numerals are used here and nowhere else on the site, because these
   principles are genuinely referenced by number in the Founder Blueprint.
   -------------------------------------------------------------------------- */

.canon{ border-top: 1px solid rgba(221, 216, 206, .28); margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.canon__group{
  font-family: var(--utility);
  font-weight: 300;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .32em;
  color: var(--olive);
  padding: clamp(2.25rem, 4vw, 3rem) 0 1.25rem;
}

.canon__group--first{ padding-top: clamp(1.5rem, 3vw, 2rem); }

.canon__item{
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(.75rem, 3vw, 2.5rem);
  padding: clamp(1.15rem, 2.4vw, 1.7rem) 0;
  border-bottom: 1px solid rgba(221, 216, 206, .28);
  align-items: baseline;
}

.canon__num{
  font-family: var(--utility);
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: .05em;
  color: var(--olive);
  line-height: 1.2;
}

.canon__text{
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.45;
  letter-spacing: .005em;
  margin: 0;
}

@media (max-width: 640px){
  .canon__item{ grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
}

/* --------------------------------------------------------------------------
   VALUES — compact utility grid
   -------------------------------------------------------------------------- */

.values{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: var(--rule);
}

.value{
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: var(--rule);
}

.value h3{
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  margin: 0 0 .7rem;
}

.value p{ margin: 0; color: var(--taupe); font-size: .95rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   FOUNDERS
   -------------------------------------------------------------------------- */

.founders{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: var(--rule);
}

.founder{
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 3.5vw, 3rem) 0;
  border-bottom: var(--rule);
}

.founder__portrait{
  aspect-ratio: 4 / 5;
  background: var(--sand);
  border: var(--rule);
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--utility);
  font-weight: 300;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--taupe);
  text-align: center;
  padding: 1rem;
}

.founder__name{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin: 0 0 .55rem;
}

.founder__role{
  font-family: var(--utility);
  font-weight: 300;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--taupe);
  margin: 0 0 1.4rem;
}

.founder p{ margin: 0; color: var(--taupe); font-size: .95rem; line-height: 1.75; }

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */

.form{ margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 46rem; }

.field{ margin-bottom: 1.9rem; }

.field label{
  display: block;
  font-family: var(--utility);
  font-weight: 400;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--taupe);
  margin-bottom: .7rem;
}

.field input,
.field select,
.field textarea{
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--carbon);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stone);
  padding: .7rem 0;
  border-radius: 0;
  transition: border-color .25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea{ resize: vertical; min-height: 7rem; }

.field select{
  background-image: linear-gradient(45deg, transparent 50%, var(--taupe) 50%),
                    linear-gradient(135deg, var(--taupe) 50%, transparent 50%);
  background-position: calc(100% - 12px) 1.25rem, calc(100% - 7px) 1.25rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus{ outline: none; border-bottom-color: var(--olive); }

.field-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0 2.5rem;
}

/* SMS consent — must stay unchecked by default and never be pre-ticked. */
.consent{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.6rem 0 0;
  border-top: var(--rule);
  margin-bottom: 2rem;
}

.consent input[type="checkbox"]{
  width: 1.1rem;
  height: 1.1rem;
  margin: .3rem 0 0;
  accent-color: var(--olive);
  flex: none;
}

.consent label{
  font-family: var(--body);
  font-size: .875rem;
  line-height: 1.7;
  color: var(--carbon);
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}

.consent a{ color: var(--olive); text-decoration: underline; text-underline-offset: .18em; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.foot{ background: var(--carbon); color: var(--ivory); padding: clamp(4rem, 8vw, 6rem) 0 2.5rem; }

.foot__top{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid rgba(221, 216, 206, .22);
}

.foot .wordmark{ font-size: clamp(1.1rem, 2vw, 1.4rem); }

.foot h4{
  font-family: var(--utility);
  font-weight: 300;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--stone);
  margin: 0 0 1.3rem;
}

.foot ul{ list-style: none; margin: 0; padding: 0; }
.foot li{ margin-bottom: .85rem; }

.foot a{
  color: var(--ivory);
  text-decoration: none;
  font-size: .9375rem;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}

.foot a:hover,
.foot a:focus-visible{ border-bottom-color: var(--stone); }

.foot address{ font-style: normal; color: var(--stone); font-size: .9375rem; line-height: 1.8; }

.foot__bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2.25rem;
  font-family: var(--utility);
  font-weight: 300;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--stone);
}

/* --------------------------------------------------------------------------
   LEGAL PAGES
   -------------------------------------------------------------------------- */

.legal{ padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(5rem, 10vw, 8rem); }

.legal__head{ border-bottom: var(--rule); padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.legal__title{
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  font-weight: 400;
}

.legal__body{ max-width: 68ch; }

.legal__body h2{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  margin: 3.2rem 0 1rem;
  padding-top: 1.6rem;
  border-top: var(--rule);
}

.legal__body h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }

.legal__body h3{
  font-family: var(--utility);
  font-weight: 400;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--olive);
  margin: 2.2rem 0 .9rem;
}

.legal__body p,
.legal__body li{ font-size: 1rem; line-height: 1.8; }

.legal__body p{ margin: 0 0 1.3em; }
.legal__body ul{ margin: 0 0 1.5em; padding-left: 1.15rem; }
.legal__body li{ margin-bottom: .65em; }
.legal__body strong{ font-weight: 700; }

.legal__body a{ color: var(--olive); text-decoration: underline; text-underline-offset: .18em; }

.callout{
  background: var(--sand);
  border-left: 2px solid var(--olive);
  padding: 1.6rem 1.9rem;
  margin: 0 0 2rem;
}

.callout p{ margin: 0 0 1em; }
.callout p:last-child{ margin-bottom: 0; }

.toc{ margin: 0 0 3rem; padding: 0; list-style: none; }
.toc li{ margin-bottom: .5em; }

.toc a{
  font-family: var(--utility);
  font-weight: 300;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--taupe);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.toc a:hover{ color: var(--olive); border-bottom-color: var(--olive); }

/* Editor note — visible only while building. Delete before launch. */
.todo{
  background: #FFF6D6;
  border: 1px dashed #B58B00;
  color: #5C4600;
  font-family: var(--utility);
  font-size: .8125rem;
  letter-spacing: .04em;
  padding: .9rem 1.1rem;
  margin: 1.25rem 0;
  line-height: 1.6;
}