/* ============================================================
   sunlit-os.css — Sunlit Studio OS(TM) service pages
   (/sunlit-studio-os, /buildanalytics, /builddesign).
   Extracted verbatim from the BuildReady(TM) page's section styles
   (hero, solution, CTA band, BuildReady sections) so the three new
   pages match it exactly. Legacy header/nav rules are NOT included;
   the shared site header comes from sunlit-pages.css.
   Hero image is set per page via --hero-img. No embedded images.
   ============================================================ */

/* Tokens live in sunlit-brand.css. Never redeclared here. */
*{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.55;
    overflow-x:hidden;
    width:100%;
    max-width:100%;   /* 100vw includes the scrollbar and protrudes ~15px at narrow widths */
  }

  h1,h2,h3,p{ overflow-wrap:break-word; word-break:break-word; }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  .serif{ font-family:"Cormorant Garamond", Georgia, serif; }

  .dcaps{ text-transform:uppercase; }

  .eyebrow{
    text-transform:uppercase;
    letter-spacing:.22em;
    font-weight:600;
    font-size:.72rem;
    color:var(--brass-d);
  }

  a{ color:inherit; text-decoration:none; }

  .btn{
    display:inline-block;
    font-size:.82rem;
    letter-spacing:.03em;
    padding:13px 26px;
    border:1px solid var(--brass-d);
    cursor:pointer;
    transition:background .3s ease, color .3s ease, transform .2s ease;
    white-space:nowrap;
  }
  .btn-solid{
    background:var(--brass-d);
    color:var(--paper);
  }
  .btn-solid:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-1px); }
  .btn-ghost{
    background:transparent;
    color:var(--brass-d);
  }
  .btn-ghost:hover{ background:var(--brass-d); color:var(--paper); }

  .btn-small{ padding:10px 20px; font-size:.76rem; }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    background-image:
      linear-gradient(100deg, var(--paper) 0%, var(--paper) 28%, rgba(255,255,255,0.88) 42%, rgba(255,255,255,0.55) 56%, rgba(255,255,255,0.15) 70%),
      var(--hero-img);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    padding:140px 24px 100px;
    width:100%;
    overflow:hidden;
  }
  .hero-grid{
    max-width:1360px;
    margin:0 auto;
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
    align-items:center;
  }
  .hero-copy{ max-width:760px; width:100%; }
  .hero-h1, .hero-sub{ overflow-wrap:break-word; word-break:break-word; }

  @media (min-width:900px){
    .hero{ padding:140px 40px 100px; }
    .hero-grid{
      grid-template-columns:1fr 220px;
      gap:60px;
    }
  }
  .hero-copy .eyebrow{ margin-bottom:26px; display:block; }

  .hero-h1{
    font-weight:500;
    font-size:2.1rem;
    line-height:1.14;
    letter-spacing:-0.01em;
  }
  @media (min-width:600px){ .hero-h1{ font-size:2.6rem; line-height:1.1; } }
  @media (min-width:900px){ .hero-h1{ font-size:3.4rem; } }
  @media (min-width:1200px){ .hero-h1{ font-size:4.6rem; line-height:1.06; } }
  .hero-h1 em{
    font-style:italic;
    font-weight:400;
    color:var(--brass-d);
  }
  .hero-h1 .accent{
    color:var(--brass-d);
    font-weight:400;
  }

  .hero-sub{
    margin-top:30px;
    max-width:540px;
    font-size:1.12rem;
    color:var(--greige);
    font-weight:400;
  }

  .hero-ctas{
    margin-top:44px;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
  }

  /* ============ SOLUTION ============ */
  .solution{
    padding:160px 40px;
    background:var(--stone);
    position:relative;
  }
  .solution-inner{
    max-width:1000px;
    margin:0 auto;
    text-align:center;
  }
  .solution-inner .eyebrow{ display:flex; justify-content:center; margin-bottom:24px; }
  .solution-head{
    font-family:"Cormorant Garamond", serif;
    font-weight:500;
    font-size:1.7rem;
    line-height:1.22;
  }
  @media (min-width:600px){ .solution-head{ font-size:2.1rem; } }
  @media (min-width:900px){ .solution-head{ font-size:2.7rem; } }
  @media (min-width:1200px){ .solution-head{ font-size:3.4rem; line-height:1.14; } }
  .solution-head em{
    font-style:italic;
    color:var(--brass-d);
  }
  .solution-sub{
    margin:28px auto 0;
    max-width:640px;
    color:var(--greige);
    font-size:1.08rem;
  }

  .photo-band{
    background:var(--stone-lt);
    padding:0;
  }
  .photo-band img{
    width:100%;
    height:auto;
    display:block;
    max-height:640px;
    object-fit:cover;
  }
  .photo-band-caption{
    max-width:1200px;
    margin:0 auto;
    padding:18px 40px;
    font-size:.85rem;
    color:var(--greige);
  }

  .solution-lead-img{
    max-width:640px;
    margin:44px auto 0;
    width:100%;
  }
  .solution-lead-img img{
    width:100%;
    height:auto;
    display:block;
    border:1px solid var(--stone-line);
  }
  .solution-lead-caption{
    font-size:.85rem;
    color:var(--greige);
    margin-top:14px;
  }

  .solution-answers{
    margin-top:70px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--stone-line);
    border:1px solid var(--stone-line);
  }
  .answer-card{
    background:var(--stone-lt);
    padding:40px 32px;
    text-align:left;
  }
  .answer-num{
    font-family:"Cormorant Garamond", serif;
    color:var(--stone-line);
    font-size:2.2rem;
    margin-bottom:14px;
  }

  .proof-block{
    margin-top:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }
  .proof-block img{
    max-width:420px;
    width:100%;
    height:auto;
    border:1px solid var(--stone-line);
    display:block;
  }
  .proof-caption{
    font-size:.85rem;
    color:var(--greige);
    max-width:420px;
    text-align:center;
  }
  .answer-title{
    font-family:"Cormorant Garamond", serif;
    font-weight:600;
    font-size:1.2rem;
    margin-bottom:10px;
  }
  .answer-body{
    font-size:.92rem;
    color:var(--greige);
    line-height:1.6;
  }

  @media (max-width:800px){
    .solution{ padding:110px 20px; }
    .solution-answers{ grid-template-columns:1fr; }
  }

  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ============ CTA BAND ============ */
  .cta-band{
    background:var(--cream);
    padding:120px 40px;
    text-align:center;
  }
  .cta-inner{ max-width:680px; margin:0 auto; }
  .cta-inner .eyebrow{ justify-content:center; display:flex; margin-bottom:22px; }
  .cta-h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:500;
    font-size:1.6rem;
    line-height:1.22;
  }
  @media (min-width:600px){ .cta-h2{ font-size:2rem; } }
  @media (min-width:900px){ .cta-h2{ font-size:2.4rem; } }
  @media (min-width:1200px){ .cta-h2{ font-size:2.9rem; line-height:1.14; } }
  .cta-tagline{
    margin-top:16px;
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-weight:500;
    font-size:1.1rem;
    color:var(--brass-d);
  }
  .cta-sub{
    margin-top:22px;
    color:var(--greige);
    font-size:1.05rem;
  }
  .cta-band .hero-ctas{ justify-content:center; margin-top:40px; }

  .lead-form{
    margin:36px auto 0;
    max-width:480px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .lead-form-row{
    display:flex;
    gap:12px;
  }
  .lead-form input[type="text"],
  .lead-form input[type="email"]{
    flex:1;
    min-width:0;
    padding:13px 14px;
    border:1px solid var(--stone-line);
    background:var(--paper);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:.92rem;
    color:var(--ink);
  }
  .lead-form input::placeholder{ color:var(--greige); }
  .lead-submit{
    width:100%;
    cursor:pointer;
  }
  .cta-microcopy{
    margin-top:14px;
    font-size:.76rem;
    color:var(--greige);
  }

  @media (max-width:560px){
    .lead-form-row{ flex-direction:column; }
  }

  /* ============ BUILDREADY SECTIONS (2026-09-26) ============ */
  /* Four-card grids reuse .solution-answers / .answer-card; 2x2 on desktop. */
  .solution-answers.four{ grid-template-columns:repeat(2, 1fr); }
  @media (max-width:800px){ .solution-answers.four{ grid-template-columns:1fr; } }
  .br-section{ padding:140px 40px; }
  .br-section.bg-paper{ background:var(--paper); }
  .br-section.bg-stone-lt{ background:var(--stone-lt); }
  .br-section .solution-sub + .solution-sub{ margin-top:18px; }
  .br-close{
    margin:36px auto 0;
    max-width:640px;
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:1.35rem;
    line-height:1.4;
    color:var(--brass-d);
  }
  /* Interconnected decisions: one change, every linked trade */
  .br-web{
    margin:56px auto 0;
    max-width:760px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .br-node{
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--ink);
    border:1px solid var(--stone-line);
    background:var(--stone-lt);
    padding:10px 16px;
    white-space:nowrap;
  }
  .br-node.origin{ background:var(--brass-d); border-color:var(--brass-d); color:var(--paper); }
  .br-stem{ width:1px; height:34px; background:var(--brass); }
  .br-affects{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    padding-top:18px;
    border-top:1px solid var(--brass);
  }
  @media (max-width:800px){
    .br-section{ padding:100px 20px; }
  }
</style>
  /* Sticky site header (not the legacy fixed one): the hero needs less top room. */
  .hero{ min-height:78vh; padding-top:96px; }
  @media (min-width:900px){ .hero{ padding-top:110px; } .hero-grid{ grid-template-columns:1fr; } }
  .os-flow{ display:grid; gap:0; max-width:760px; margin:56px auto 0; text-align:left; }
  .os-step{ display:grid; grid-template-columns:64px 1fr; gap:22px; padding:30px 0; border-top:1px solid var(--stone-line); }
  .os-step:last-child{ border-bottom:1px solid var(--stone-line); }
  .os-step-num{ font-family:"Cormorant Garamond", serif; font-size:2rem; color:var(--brass); line-height:1; }
  .os-step-name{ font-family:"Cormorant Garamond", serif; font-size:1.55rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
  .os-step-line{ font-family:"Cormorant Garamond", serif; font-style:italic; font-size:1.3rem; color:var(--brass-d); margin-top:4px; }
  .os-step-body{ color:var(--greige); margin-top:10px; font-size:.98rem; }
  .os-step-link{ display:inline-block; margin-top:14px; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-d); border-bottom:1px solid var(--brass); padding-bottom:2px; }
  .os-step-link:hover{ color:var(--ink); border-color:var(--ink); }
  .fine-print{ max-width:640px; margin:34px auto 0; font-size:.82rem; color:var(--greige); }
  .next-link{ display:inline-block; margin-top:26px; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-d); }
  .next-link:hover{ color:var(--ink); }
  .reveal{ opacity:1; transform:none; } /* content is visible without JS; the observer only adds polish */

  /* Tablet + phone: the left-to-right fade leaves copy over the photograph.
     Fade top-down instead so the text always sits on paper, and let the long
     CTA wrap rather than overflow its column. */
  @media (max-width:1000px){
    .hero{
      background-image:
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.93) 55%, rgba(255,255,255,0.7) 78%, rgba(255,255,255,0.25) 100%),
        var(--hero-img);
      background-position:center bottom;
    }
  }
  @media (max-width:600px){
    .btn{ white-space:normal; text-align:center; line-height:1.4; }
    .hero-ctas{ flex-direction:column; align-items:stretch; }
  }