/* =========================================================
   Maison SaintGermain Ventures
   styles.css
   ========================================================= */

/* ---------- 1. tokens ---------- */
:root{
  --paper:#F4F0E5;          /* cream, sampled from the crest ground */
  --ink:#3A1117;            /* deep oxblood, body text */
  --burgundy:#5E1523;       /* the shield */
  --azure:#A8863A;          /* gold — accent rules only, never body text */
  --slate:#6E4C52;
  --rule:#D3C6AC;
  --rule-soft:#E4DBC6;
  --alert:#8F2A2A;

  --on-dark:#F6F2E8;
  --on-dark-soft:#DCC9A6;
  --on-dark-gold:#C4A660;
  --on-dark-rule:rgba(246,242,232,.24);

  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter:clamp(1.5rem, 6vw, 6rem);
  --section-y:clamp(5rem, 10vw, 8.5rem);
  --measure:62ch;
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,li,figure,fieldset{margin:0;padding:0}
fieldset{border:0}
ul{list-style:none}
img{max-width:100%;display:block}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit}
:focus-visible{outline:2px solid var(--azure);outline-offset:4px}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--burgundy);color:var(--on-dark);
  padding:.75rem 1.25rem;z-index:10;
  font-size:.875rem;letter-spacing:.02em;
}
.skip:focus{left:0}

.shell{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- 3. masthead ---------- */
.masthead{
  padding-block:clamp(1.5rem,3.5vw,2.25rem);
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
}
.masthead__mark{
  display:flex;align-items:center;gap:.7rem;
  font-size:.75rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
  white-space:nowrap;
}
.masthead__mark img{width:26px;height:auto;flex:none}
.masthead__nav{display:flex;gap:clamp(1.25rem,3vw,2.5rem)}
.masthead__nav a{
  font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);text-decoration:none;
  padding-bottom:.2rem;
  border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease;
}
.masthead__nav a:hover{color:var(--ink);border-bottom-color:var(--azure)}

@media (max-width:600px){
  .masthead{display:block}
  .masthead__nav{margin-top:1rem;justify-content:space-between;gap:1rem}
}

/* ---------- 4. hero ---------- */
.hero{
  position:relative;
  min-height:clamp(28rem, 72vh, 42rem);
  display:grid;place-items:center;
  text-align:center;
  padding:clamp(4rem,10vw,7rem) clamp(1.25rem,5vw,4rem);
  margin-bottom:clamp(3rem,7vw,5rem);
}
/* double engraved rule — the one ornamental gesture on the page */
.hero::before{
  content:"";
  position:absolute;inset:0;
  border:1px solid var(--rule);
  animation:frame 1.3s cubic-bezier(.22,.61,.36,1) both;
}
.hero::after{
  content:"";
  position:absolute;
  inset:clamp(5px,0.7vw,8px);
  border:1px solid var(--rule-soft);
  animation:frame 1.3s cubic-bezier(.22,.61,.36,1) .1s both;
}
.hero__inner{position:relative;max-width:56rem}

.wordmark{animation:rise 1s cubic-bezier(.22,.61,.36,1) .25s both}
.wordmark__crest{
  width:clamp(6.5rem, 12vw, 9.5rem);
  height:auto;
  margin:0 auto clamp(1.5rem,3.2vw,2.25rem);
}
.wordmark__name{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem, 6.2vw, 4.25rem);
  line-height:1.06;
  letter-spacing:-0.022em;
}
.wordmark__name span{display:block}

.hero__rule{
  width:56px;height:2px;
  background:var(--azure);
  margin:clamp(2rem,4.5vw,3rem) auto;
  animation:widen .9s cubic-bezier(.22,.61,.36,1) .6s both;
}

.hero__line{
  font-size:clamp(1.0625rem,1.6vw,1.25rem);
  line-height:1.6;
  max-width:34ch;margin-inline:auto;
  animation:rise .95s cubic-bezier(.22,.61,.36,1) .68s both;
}

@keyframes frame{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes widen{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.wordmark,.hero__rule,.hero__line{animation:none}
}

/* ---------- 5. section frame ---------- */
.band{padding-block:var(--section-y)}
.band + .band{border-top:1px solid var(--rule)}

.band__grid{
  display:grid;
  grid-template-columns:minmax(8rem,13rem) minmax(0,1fr);
  gap:clamp(2.25rem,5vw,4.5rem);
  align-items:start;
}

.band__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  line-height:1.15;
  letter-spacing:-0.015em;
}
.band__title::before{
  content:"";
  display:block;
  width:30px;height:2px;
  background:var(--azure);
  margin-bottom:clamp(1rem,2vw,1.5rem);
}

@media (max-width:860px){
  .band__grid{grid-template-columns:1fr;gap:2.25rem}
}

/* ---------- 6. thesis ---------- */
.prose{max-width:var(--measure)}
.prose p + p{margin-top:1.6em;color:var(--slate)}
.prose .lead{
  font-size:clamp(1.1875rem,2vw,1.5rem);
  line-height:1.55;
  letter-spacing:-0.006em;
}

/* ---------- 7. focus areas ---------- */
.sectors{border-top:1px solid var(--rule)}
.sector{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  align-items:baseline;
  padding-block:clamp(1.75rem,3.6vw,2.5rem);
  border-bottom:1px solid var(--rule);
}
.sector__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.625rem);
  line-height:1.25;
  letter-spacing:-0.012em;
}
.sector__note{color:var(--slate);max-width:46ch}

@media (max-width:700px){
  .sector{grid-template-columns:1fr;gap:.6rem}
}

/* ---------- 8. intake — inverted navy block ---------- */
.intake{
  background:var(--burgundy);
  color:var(--on-dark);
  padding-block:var(--section-y);
}
.intake .band__grid{grid-template-columns:minmax(0,21rem) minmax(0,1fr)}
@media (max-width:860px){.intake .band__grid{grid-template-columns:1fr}}

.intake .band__title{color:var(--on-dark)}
.intake .band__title::before{background:var(--on-dark-gold);width:38px}

.contact__label{margin-top:clamp(1.5rem,3vw,2rem);color:var(--on-dark-soft)}
.contact__mail{
  display:inline-block;margin-top:.5rem;
  font-family:var(--serif);
  font-size:clamp(1.125rem,2vw,1.375rem);
  letter-spacing:-0.012em;
  color:var(--on-dark);
  text-decoration:none;
  padding-bottom:.15em;
  border-bottom:1px solid var(--on-dark-rule);
  transition:border-color .3s ease;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}
.contact__mail:hover{border-bottom-color:var(--on-dark)}
.contact__note{margin-top:1.75rem;color:var(--on-dark-soft);font-size:.9375rem;line-height:1.7;max-width:38ch}

/* ---------- 9. form ---------- */
.form{max-width:38rem}

.field{margin-bottom:clamp(1.75rem,3.4vw,2.25rem)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2rem)}

.field label{
  display:block;
  font-size:.75rem;font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-dark-gold);
  margin-bottom:.6rem;
}

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--on-dark);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--on-dark-rule);
  border-radius:0;
  padding:.5rem 0;
  transition:border-color .25s ease;
  -webkit-appearance:none;
  appearance:none;
}
.field textarea{resize:vertical;min-height:7rem}

.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23C4A660' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .25rem center;
  padding-right:2rem;
  cursor:pointer;
}
.field select:invalid{color:var(--on-dark-soft)}
.field select option{color:#3A1117;background:#F4F0E5}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--on-dark);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:2px solid var(--on-dark);
  outline-offset:3px;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-bottom-color:#F0A6A6}

.field__hint{margin-top:.5rem;font-size:.8125rem;color:var(--on-dark-soft)}
.field__error{margin-top:.5rem;font-size:.8125rem;color:#F0A6A6}

/* spam trap — off-screen but not display:none, which bots skip */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.submit{
  font-family:var(--sans);
  font-size:.75rem;font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--burgundy);
  background:var(--on-dark-gold);
  border:1px solid var(--on-dark-gold);
  border-radius:0;
  padding:1rem 2.5rem;
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease;
}
.submit:hover{background:transparent;color:var(--on-dark-gold)}
.submit[disabled]{background:var(--on-dark-soft);border-color:var(--on-dark-soft);color:var(--ink);cursor:progress}

.form__status{margin-top:1.25rem;font-size:.9375rem;line-height:1.6}
.form__status[data-state="error"]{color:#F0A6A6}
.form__status[data-state="success"]{color:var(--on-dark)}

.form__consent{margin-top:1.5rem;font-size:.75rem;line-height:1.7;color:var(--on-dark-soft);max-width:46ch}

@media (max-width:560px){
  .field-row{grid-template-columns:1fr;gap:0}
  .submit{width:100%}
}

/* ---------- 10. footer — continues the navy block ---------- */
.footer{
  background:var(--burgundy);
  color:var(--on-dark-soft);
  padding-block:clamp(2rem,5vw,3rem);
}
.footer .shell{border-top:1px solid var(--on-dark-rule);padding-top:clamp(2rem,4vw,2.5rem)}
.footer__row{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:baseline;justify-content:space-between;
  font-size:.8125rem;
}
.footer__links{display:flex;gap:1.75rem}
.footer__links a{color:var(--on-dark-soft);text-decoration:none;transition:color .25s ease}
.footer__links a:hover{color:var(--on-dark)}
.footer__legal{margin-top:1.5rem;font-size:.75rem;line-height:1.7;max-width:70ch}

/* ---------- 11. legal pages ---------- */
.legal{padding-block:clamp(3.5rem,8vw,6rem)}
.legal__head{max-width:var(--measure);margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.legal__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,5vw,3.25rem);
  line-height:1.1;
  letter-spacing:-0.02em;
}
.legal__title::before{
  content:"";display:block;
  width:30px;height:2px;background:var(--azure);
  margin-bottom:clamp(1rem,2vw,1.5rem);
}
.legal__meta{margin-top:1.25rem;font-size:.8125rem;color:var(--slate)}
.legal__body{max-width:var(--measure)}
.legal__body h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.625rem);
  line-height:1.25;
  letter-spacing:-0.012em;
  margin:clamp(2.5rem,5vw,3.25rem) 0 .85rem;
  padding-top:clamp(2rem,4vw,2.5rem);
  border-top:1px solid var(--rule);
}
.legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__body p{margin-bottom:1.15em;color:var(--slate)}
.legal__body p.lead{color:var(--ink);font-size:1.0625rem}
.legal__body ul{margin:0 0 1.15em;padding:0}
.legal__body li{
  position:relative;
  padding-left:1.35rem;
  margin-bottom:.55em;
  color:var(--slate);
}
.legal__body li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:5px;height:1px;background:var(--azure);
}
.legal__body a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .25s ease}
.legal__body a:hover{border-bottom-color:var(--azure)}
.legal__body strong{color:var(--ink);font-weight:500}
.legal__note{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:1.5rem 1.75rem;
  border:1px solid var(--rule);
  font-size:.875rem;line-height:1.7;color:var(--slate);
}