/* Artemis Special Situations Origination.
   ============================================================================
   THE IVORY VERSION OF THE SAME PAGE. Not a second design language.

   Every selector, every measurement, every type step and every piece of spacing
   below is the Operations stylesheet's, unchanged. The only thing inverted is
   which of the two Artemis grounds the page sits on: Operations is ivory type on
   deep navy; this is deep navy type on warm ivory. Artemis blue stays the single
   accent in both.

   If a value here differs from the matching one in operations/index.html, that
   is a bug rather than a decision. The two pages are the same page.

   Shared by index.html and the three intake routes. */

:root{
  --ink:#040912;            /* deep navy    */
  --paper:#f4f2ed;          /* warm ivory   */
  --silver:#9dafcc;         /* artemis blue */

  /* The inverse of Operations' ground/type pair. There, ink is the ground and
     paper is the type; here it is the other way up. */
  --body-on-light:#3a4050;  /* mirrors --body-on-dark */
  --muted:#5c6678;
  --hair:rgba(4,9,18,.16);
  --hair-strong:rgba(4,9,18,.26);

  --radius:18px;

  /* the same five steps plus the display sizes, so both pages read as one system */
  --fs-micro:11.5px;
  --fs-xs:12.5px;
  --fs-sm:13.5px;
  --fs-base:15px;
  --fs-lede:16.5px;
  --fs-brand:17px;
  --fs-brand-lg:19px;

  --serif:'Cormorant',Georgia,serif;
  --serif-caps:'Cormorant SC',Georgia,serif;
  --sans:'Inter Tight',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* the nav is fixed, so anchor targets must stop clear of it */
section[id],footer[id],.service-card[id]{scroll-margin-top:128px}

/* Operations' six radial washes, at the same positions and sizes, with the two
   tints swapped: there they lift a navy ground toward slate, here they settle an
   ivory ground toward the same slate. */
body{font-family:var(--sans);color:var(--body-on-light);-webkit-font-smoothing:antialiased;
     background:
       radial-gradient(80% 75vh at 50% -5%,rgba(157,175,204,.30),transparent 65%),
       radial-gradient(65% 60vh at 92% 15%,rgba(157,175,204,.22),transparent 62%),
       radial-gradient(65% 60vh at 2% 38%,rgba(157,175,204,.20),transparent 62%),
       radial-gradient(55% 48vh at 96% 58%,rgba(52,64,94,.07),transparent 60%),
       radial-gradient(52% 42vh at 50% 76%,rgba(52,64,94,.08),transparent 65%),
       radial-gradient(75% 65vh at 50% 103%,rgba(157,175,204,.26),transparent 65%),
       var(--paper)}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
section{padding:88px 0}
p{line-height:1.7}
img{display:block;max-width:100%}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);
      padding:14px 22px;border-radius:0 0 12px 0;font-size:var(--fs-sm)}
.skip:focus{left:0}

.display{font-family:var(--serif);font-weight:500;line-height:1.15;color:var(--ink)}
h1.display,h2.display{text-transform:uppercase;letter-spacing:.09em}
h1.display{font-size:clamp(34px,4.2vw,56px)}
h2.display{font-size:clamp(24px,2.6vw,34px)}
.display em{font-style:italic;font-weight:400}
.eyebrow{font-family:var(--serif-caps);font-size:var(--fs-base);letter-spacing:.3em;
         text-transform:uppercase;font-weight:600;margin-bottom:20px;color:var(--muted)}
.hero .eyebrow{font-size:25px;letter-spacing:.26em}
.brand{font-family:var(--serif-caps);font-weight:600;letter-spacing:.24em;text-transform:uppercase}

/* nav */
nav{position:fixed;inset:20px 20px auto;z-index:10;display:flex;align-items:center;justify-content:space-between;
    padding:15px 28px;border-radius:999px;background:rgba(4,9,18,.05);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);border:1px solid var(--hair);transition:background .3s}
nav.scrolled{background:rgba(244,242,237,.9)}
/* A LINK IS A TARGET. Same 44px floor as Operations, same reason. */
nav .brand{font-size:var(--fs-brand);color:var(--ink);text-decoration:none;
     display:inline-flex;align-items:center;min-height:44px}
nav ul{display:flex;gap:26px;list-style:none;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em}
nav a{color:var(--muted);text-decoration:none;opacity:.9;
     display:inline-flex;align-items:center;min-height:44px}
nav a:hover{opacity:1;color:var(--ink)}

/* buttons: the inverse fill. Operations puts ink type on a silver pill; here a
   navy pill carries ivory type, which is the same contrast the other way up. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:14px 28px;font-size:var(--fs-xs);
     min-height:44px;
     text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;
     font-weight:500;text-decoration:none;color:var(--paper);background:var(--ink);border:none;cursor:pointer;
     font-family:var(--sans);transition:gap .2s,background .2s}
.btn:hover{gap:18px;background:#101a2e}
.btn.ghost{background:transparent;border:1px solid var(--hair-strong);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink);background:rgba(4,9,18,.05)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[disabled]:hover{gap:12px;background:var(--ink)}
.arrow::after{content:"";width:18px;height:12px;flex:none;background:currentColor;
     -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h21M15.5 2l6.5 6-6.5 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
     mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h21M15.5 2l6.5 6-6.5 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.textlink{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:var(--fs-base);
     min-height:44px;transition:gap .2s}
.textlink:hover{gap:18px}

/* hero — explicit padding rather than a vh min-height, so the space under
   the buttons stays constant instead of growing with the viewport */
.hero{padding:164px 0 72px;display:flex;align-items:center;position:relative;text-align:center}
.hero .wrap{position:relative;width:100%}
.hero .rule{width:64px;height:1px;background:var(--hair-strong);margin:36px auto}
.hero p{max-width:620px;margin:0 auto;font-size:var(--fs-lede);color:var(--body-on-light)}
.hero .cta{margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:16px}

/* editorial split */
.on-paper{background:transparent;color:var(--body-on-light)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--hair)}
.frame img{width:100%;height:100%;object-fit:cover}
.caption{margin-top:14px;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.on-paper p{color:var(--body-on-light)}

/* services */
.services-head{text-align:center;max-width:640px;margin:0 auto 56px}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* Operations' card is a dark gradient lifted off a dark page. This is the same
   card lifted off a light one: the gradient runs the other way, the hairline stays. */
.service-card{background:linear-gradient(165deg,#fdfcfa 0%,#faf9f5 55%,#f6f4ee 100%);color:var(--body-on-light);border-radius:var(--radius);padding:36px 32px;
      display:flex;flex-direction:column;border:1px solid var(--hair)}
.service-card h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.25;
      text-transform:uppercase;letter-spacing:.1em;color:var(--ink)}
.sub{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.service-card .sub{margin-top:5px}
.service-card>p{margin-top:16px;font-size:var(--fs-sm);line-height:1.65;color:var(--body-on-light)}
.hairlines{list-style:none;margin:20px 0 28px}
.hairlines li{padding:9px 0;border-bottom:1px solid var(--hair);font-size:var(--fs-sm);line-height:1.5;color:var(--body-on-light)}
.hairlines li:last-child{border-bottom:none}
.service-card .btn{margin-top:auto;align-self:flex-start}
.service-card .custom-note{margin-top:14px;font-size:.94em;opacity:.78}

/* editorial duo band */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.duo .frame-col:last-child{margin-top:72px}
/* The band carries type, not photography: a rule above each column states the
   pairing the way a framed image used to, without a picture that means nothing.
   Serious work on this page is done by structure, not by styling shots. */
.duo>div:not(.frame-col){padding-top:22px;border-top:1px solid var(--hair-strong)}
.duo>div:not(.frame-col) p{max-width:46ch;font-size:var(--fs-base)}
.pull{max-width:560px;margin:72px auto 0;text-align:center}
.pull .display{font-size:clamp(21px,2.3vw,29px);font-weight:400;font-style:italic;color:var(--ink)}

/* FAQ */
.faq-wrap{max-width:820px}
.faq-head{text-align:center;margin-bottom:36px}
.faq-list{border-top:1px solid var(--hair-strong)}
.faq-list details{border-bottom:1px solid var(--hair-strong)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
     gap:24px;min-height:64px;padding:18px 0;color:var(--ink);font-family:var(--serif);font-size:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;color:var(--muted);font-family:var(--sans);font-size:24px;font-weight:300}
.faq-list details[open] summary::after{content:"\00d7"}
.faq-list p{padding:0 44px 22px 0;color:var(--body-on-light);font-size:var(--fs-base)}

/* footer */
footer{padding:0 0 48px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;font-size:var(--fs-sm);color:var(--body-on-light)}
.socials{display:flex;gap:12px;margin-top:22px}
/* 42px is two short of the floor, and the drawn circle is the target here. */
.socials a{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair-strong);display:inline-flex;
      align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.socials a:hover{border-color:var(--ink);background:rgba(4,9,18,.05)}
.socials svg{width:18px;height:18px;fill:var(--ink)}
.foot-links{list-style:none;text-align:right}
.foot-links li{margin-bottom:12px}
.foot-links a{color:var(--body-on-light);text-decoration:none;font-size:var(--fs-sm);
     display:inline-flex;align-items:center;min-height:44px}
.foot-links a:hover{color:var(--ink)}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:24px;
      border-top:1px solid var(--hair);font-size:var(--fs-sm);color:var(--muted)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}}

@media(max-width:880px){
  /* THE COLUMN MUST NOT BE WIDER THAN WHAT HOLDS IT. Same containment fix
     Operations already learned the hard way: `1fr` floors at min-content, so one
     long unbreakable child widens the column, the column widens the grid, and
     the document scrolls sideways. */
  .split,.service-grid,.duo{grid-template-columns:minmax(0,1fr)}
  nav{inset:12px 12px auto;padding:10px 16px;flex-wrap:wrap}
  nav ul{display:flex;order:3;flex-basis:100%;justify-content:center;gap:18px;
       margin-top:6px;padding-top:6px;border-top:1px solid var(--hair)}
  nav ul a{min-height:36px;font-size:10px}
  nav .brand{font-size:14px}
  nav .btn{padding:9px 16px;font-size:10.5px;letter-spacing:.08em;min-height:44px}
  .service-card{padding:28px 22px}
  /* AND THE BUTTON HAS TO BE ALLOWED TO WRAP. On a phone the label wraps and the
     control goes full width, which is the conventional shape there anyway. */
  .service-card .btn{white-space:normal;align-self:stretch;text-align:center;
      justify-content:center;text-wrap:balance}
  .hero{padding:172px 0 64px}
  h1.display{font-size:clamp(32px,9.5vw,44px)}
  .hero .eyebrow{font-size:17px;letter-spacing:.22em}
  .hero p{font-size:var(--fs-base)}
  /* the mobile nav is shorter, so it needs less clearance */
  section[id],footer[id],.service-card[id]{scroll-margin-top:100px}
  .duo .frame-col:last-child{margin-top:0}
  .foot-grid{flex-direction:column}
  .foot-links{text-align:left}
  section{padding:72px 0}
  .split{gap:28px}
  .pull{margin-top:56px}
  .legal{margin-top:32px}
}
/* ================================================================= INTAKE
   The three routes. Restrained, document-like, one step at a time. Controls
   are 16px because a control below 16px makes iOS Safari zoom the page on
   focus, which on a form this long reads as the page breaking. */

.intake-page{padding:170px 0 90px}
.wrap.narrow{max-width:760px}
.intake-page .lede{margin-bottom:44px}

/* progress: a count and a row of ticks, not a bar and not a long dot parade */
.progress{display:flex;align-items:center;gap:16px;margin-bottom:34px}
.progress-label{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
                color:var(--muted);white-space:nowrap}
.progress-track{display:flex;gap:6px;flex:1}
.tick{height:2px;flex:1;background:var(--hair);border-radius:2px;transition:background .3s}
.tick.on{background:var(--ink)}

.step-head{margin-bottom:30px}
.step-head h2{font-size:clamp(22px,2.4vw,30px)}
.step-head h2:focus{outline:none}
.step-note{margin-top:14px;font-size:var(--fs-sm);color:var(--muted);line-height:1.7;max-width:64ch}

.fields{display:grid;gap:28px}
.field{display:grid;gap:8px}
.label{font-size:var(--fs-sm);letter-spacing:.04em;color:var(--ink);font-weight:500;line-height:1.5}
.help{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:-2px}

/* 16px EXACTLY, and not var(--fs-base). The shared scale's base step is 15px,
   inherited from Operations and correct for body copy. A form control below
   16px makes iOS Safari zoom the page on focus, which on a form this long reads
   as the page breaking. That is a platform constraint, not a type decision, so
   it is pinned here rather than by bending the scale both pages share. */
.control{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
         background:#fdfcfa;border:1px solid var(--hair-strong);border-radius:12px;
         padding:13px 15px;min-height:48px;transition:border-color .2s,background .2s}
.control:hover{border-color:rgba(4,9,18,.38)}
.control:focus{border-color:var(--ink);background:#fff;outline:none;
               box-shadow:0 0 0 3px rgba(157,175,204,.35)}
textarea.control{min-height:132px;line-height:1.65;resize:vertical}
select.control{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235c6678' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px}

/* multi-select and consent: the whole row is the target, 48px tall */
.choices{display:grid;gap:2px}
.choice,.check{display:flex;align-items:flex-start;gap:13px;cursor:pointer;
       padding:12px 14px;min-height:48px;border-radius:10px;border:1px solid transparent;
       font-size:16px;line-height:1.5;color:var(--body-on-light);transition:background .18s,border-color .18s}
.choice:hover,.check:hover{background:rgba(4,9,18,.04)}
.choice input,.check input{appearance:none;flex:none;width:20px;height:20px;margin-top:2px;
       border:1px solid var(--hair-strong);border-radius:5px;background:#fdfcfa;cursor:pointer;
       transition:background .18s,border-color .18s}
.choice input:checked,.check input:checked{background:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5 5 9.5 13 1.5' fill='none' stroke='%23f4f2ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px}
.choice input:focus-visible,.check input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.check{align-items:flex-start;padding:16px 14px;border-color:var(--hair);background:#fdfcfa}

/* errors: stated on the field, never as a single banner at the top */
.err{font-size:var(--fs-sm);color:#8a2b20;line-height:1.5;min-height:0}
.err:empty{display:none}
.field.has-error .control{border-color:#8a2b20;background:#fdf7f6}
.field.has-error .check{border-color:#8a2b20}

.form-nav{display:flex;gap:14px;align-items:center;margin-top:40px;flex-wrap:wrap}
.form-nav .btn{min-width:150px}

/* review */
.review{margin-top:8px;border-top:1px solid var(--hair-strong)}
.review-group{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
              padding:26px 0 10px;border-bottom:1px solid var(--hair)}
.review-group h3{font-family:var(--serif);font-size:19px;text-transform:uppercase;
                 letter-spacing:.1em;color:var(--ink);font-weight:500}
.linkish{background:none;border:none;font-family:var(--sans);font-size:var(--fs-sm);
         color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
         text-decoration-color:var(--silver);padding:10px 4px;min-height:44px}
.linkish:hover{text-decoration-color:var(--ink)}
.review dt{font-size:var(--fs-sm);color:var(--muted);padding:14px 0 0;line-height:1.5}
.review dd{font-size:var(--fs-base);color:var(--ink);padding:4px 0 14px;line-height:1.6;
           border-bottom:1px solid var(--hair);overflow-wrap:anywhere}

.submit-status{margin-top:26px;font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.submit-status:empty{display:none}
.submit-status.is-error{color:#8a2b20}

/* the confirmed state */
.done .ref{margin-top:18px;font-size:var(--fs-lede);color:var(--ink)}
.done .ref strong{font-weight:500;letter-spacing:.08em;font-family:var(--sans)}
.done p{margin-top:16px;font-size:var(--fs-base);max-width:62ch}
.foot-note.small{margin-top:48px;font-size:var(--fs-sm);color:var(--muted);line-height:1.7;max-width:70ch}

@media(max-width:820px){
  .intake-page{padding:172px 0 70px}
  .progress{gap:10px}
  .progress-label{font-size:11px}
  .form-nav{flex-direction:column-reverse;align-items:stretch}
  .form-nav .btn{width:100%;white-space:normal;text-align:center;justify-content:center}
  .review-group{flex-direction:row;align-items:center}
}


/* The two non-acquirer routes. Deliberately quieter than the mandate CTA above
   them: this page is written for people who buy, and a seller or an introducer
   is a smaller door beside the main one rather than a competing entrance. */
.narrow-head{margin-bottom:30px}
.card.compact{padding:26px 24px}
.card.compact h3{font-size:17px}
.card.compact>p{margin-top:12px;margin-bottom:22px}
.card.compact .btn{margin-top:0}
#other-routes{padding:64px 0 72px}
#other-routes .display{font-size:clamp(20px,2.1vw,26px)}

/* The intake's "not open yet" panel. Deliberately not the error treatment: a
   503 is the deployment's state, not the visitor's mistake, and colouring it
   like a failure tells them they did something wrong when they did not. */
.notice{margin-top:40px;padding:30px 28px;border:1px solid var(--hair-strong);
        border-radius:var(--radius);background:#faf9f6}
.notice:focus{outline:none}
.notice h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.3;
           text-transform:uppercase;letter-spacing:.09em;color:var(--ink);margin-top:10px}
.notice p{margin-top:16px;font-size:var(--fs-base);line-height:1.7;max-width:60ch}
.notice .btn{margin-top:6px}
@media(max-width:820px){
  .notice{padding:24px 20px}
  .notice .btn{white-space:normal;text-align:center;justify-content:center;width:100%}
}