/* ============================================================
     CONTENT BY ELISE
     Built to match Elise's own design. Copy is hers, verbatim.
     Photos: each .photo block is a slot for one of her originals;
     the label says which. Drop an <img> inside the slot or set
     background-image on it and the texture disappears behind it.
     The CONFIG block at the bottom holds the links and the few
     things that change (email, handles, login URL).
     ============================================================ */
  :root{
    --paper:#F6F2EC;
    --sand:#EEE8DF;
    --sand-deep:#E2D9CC;
    --rule:#D2C7B9;
    --brown:#4A3B31;
    --brown-deep:#3A2E26;
    --ink:#2F2620;
    --muted:#6E5F54;
    --night:#2A211D;
    --paper-ink:#F6F2EC;
    --display:'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, Georgia, serif;
    --script:'Allison', 'Snell Roundhand', 'Brush Script MT', cursive;
    --sans:'Montserrat', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
    --gutter:clamp(22px, 5.5vw, 76px);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-weight:300; font-size:15.5px; line-height:1.72;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  a:focus-visible, button:focus-visible{outline:2px solid var(--brown); outline-offset:4px}
  h1,h2,h3{font-family:var(--display); font-weight:500; color:var(--ink); margin:0; text-wrap:balance; line-height:1.1}
  em{font-style:italic; font-weight:500}
  p{margin:0}
  .caps{font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink)}
  .script{font-family:var(--script); font-weight:400; line-height:1}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:16px;
    font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
    padding:18px 28px; border-radius:2px; text-decoration:none; border:1px solid transparent;
    transition:background .25s ease, color .25s ease;
  }
  .btn .arrow{display:inline-block; font-size:13px; transition:transform .25s ease}
  .btn:hover .arrow{transform:translateX(5px)}
  .btn-solid{background:var(--brown); color:var(--paper-ink)}
  .btn-solid:hover{background:var(--brown-deep)}
  .btn-outline{background:transparent; color:var(--ink); border-color:var(--ink)}
  .btn-outline:hover{background:var(--ink); color:var(--paper-ink)}
  .btn-light{background:var(--paper); color:var(--ink)}
  .btn-light:hover{background:#fff}

  /* ---------- nav ---------- */
  .nav{
    position:relative; display:grid; grid-template-columns:1fr auto; align-items:center;
    padding:30px var(--gutter) 26px; background:var(--paper); gap:32px;
  }
  .wordmark{text-decoration:none; display:block}
  .wordmark .name{font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); line-height:1; white-space:nowrap}
  .wordmark .name .by{font-family:var(--script); text-transform:none; letter-spacing:0; font-size:46px; margin:0 .02em 0 .1em; position:relative; top:.1em}
  .wordmark .sub{display:block; margin-top:8px; font-family:var(--sans); font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink); font-weight:400}
  .menu{display:flex; align-items:center; gap:36px; list-style:none; margin:0; padding:0}
  .menu a{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; font-weight:500; padding-bottom:6px; border-bottom:1px solid transparent}
  .menu a:hover, .menu a[aria-current="page"]{border-bottom-color:var(--ink)}
  .menu .login{color:var(--muted)}
  .menu .login:hover{color:var(--ink)}
  .menu-toggle{display:none}

  /* ---------- photo slots ---------- */
  .photo{position:relative; overflow:hidden; background:var(--sand-deep); min-height:260px}
  .photo canvas, .photo img{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover}
  .photo .tag{position:absolute; left:18px; bottom:16px; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink); opacity:.5; font-weight:500}
  .photo.has-img canvas, .photo.has-img .tag{display:none}

  /* ---------- hero ---------- */
  .hero{display:grid; grid-template-columns:minmax(0, 44fr) minmax(0, 56fr); background:var(--sand); min-height:540px}
  .hero-copy{padding:clamp(52px,7vw,100px) var(--gutter); display:flex; flex-direction:column; justify-content:center; gap:30px; max-width:620px}
  .hero h1{font-size:clamp(40px, 5vw, 64px); letter-spacing:-.005em; line-height:1.06}
  .hero .lede{max-width:44ch; font-size:15.5px; line-height:1.8}
  .hero .meta{font-family:var(--sans); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; line-height:2; color:var(--ink); font-weight:400; max-width:44ch}
  .hero .photo{min-height:540px}
  .hero .pillars{position:absolute; right:clamp(18px,3vw,42px); bottom:clamp(18px,3vw,38px); z-index:2;
    display:flex; flex-direction:column; gap:3px; text-align:right;
    font-family:var(--sans); font-weight:500; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
    color:#fff; text-shadow:0 1px 10px rgba(42,33,29,.5); pointer-events:none}
  @media (max-width:720px){ .hero .pillars{font-size:9px; letter-spacing:.24em} }

  /* ---------- split ---------- */
  .split{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px,5vw,84px);
    padding:clamp(60px,8vw,112px) var(--gutter); background:var(--paper); align-items:center;
  }
  .split .photo{min-height:440px}
  .split-copy{display:flex; flex-direction:column; gap:22px; max-width:60ch}
  .split h2{font-size:clamp(32px, 3.6vw, 46px)}
  .split p{max-width:52ch; font-size:14.5px}

  /* ---------- services ---------- */
  .services{background:var(--sand); padding:clamp(60px,8vw,104px) var(--gutter); text-align:center}
  .services h2{font-size:clamp(32px, 3.8vw, 48px); margin:14px auto 12px}
  .services .intro{max-width:58ch; margin:0 auto 56px; font-size:14.5px}
  .svc-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); max-width:1120px; margin:0 auto 52px}
  .svc{padding:8px 36px 0; display:flex; flex-direction:column; align-items:center; gap:18px}
  .svc + .svc{border-left:1px solid var(--rule)}
  .svc .icon{width:32px; height:32px; stroke:var(--ink); fill:none; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round}
  .svc h3{font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink)}
  .svc p{font-size:14px; line-height:1.75; max-width:31ch}

  /* ---------- manifesto ---------- */
  .manifesto{
    display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .95fr);
    gap:clamp(28px,4vw,60px); align-items:center;
    padding:clamp(60px,7vw,100px) var(--gutter); background:var(--paper);
  }
  .manifesto .lead{position:relative; padding-top:40px}
  .manifesto .lead .script{position:absolute; top:-14px; left:-14px; font-size:clamp(54px,5.4vw,78px); color:var(--ink); transform:rotate(-5deg); transform-origin:left bottom; white-space:nowrap}
  .manifesto h2{font-size:clamp(30px, 3.3vw, 42px); padding-left:14px; border-left:1px solid var(--rule)}
  .manifesto .side{font-size:14px; line-height:1.8; max-width:36ch}
  .manifesto .photo{min-height:230px}

  /* ---------- night CTA ---------- */
  .night{position:relative; background:var(--night); color:var(--paper-ink); overflow:hidden; padding:clamp(76px,10vw,150px) var(--gutter)}
  .night canvas, .night > img{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover}
  .night.has-img canvas, .night.has-img .tag{display:none}
  .night .shade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(42,33,29,.78) 0%, rgba(42,33,29,.45) 55%, rgba(42,33,29,.15) 100%)}
  .night .inner{position:relative; max-width:560px; display:flex; flex-direction:column; gap:22px}
  .night .caps{color:var(--paper-ink)}
  .night h2{color:var(--paper-ink); font-size:clamp(34px,4vw,52px)}
  .night p{max-width:48ch; font-size:14.5px}
  .night .tag{position:absolute; right:22px; bottom:18px; font-size:9px; letter-spacing:.3em; text-transform:uppercase; opacity:.5; font-weight:500}

  /* ---------- footer ---------- */
  .footer{background:var(--paper); padding:52px var(--gutter) 40px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; border-top:1px solid var(--rule)}
  .footer .wordmark .name{font-size:22px}
  .footer .wordmark .name .by{font-size:34px}
  .footer .links{display:flex; gap:28px; flex-wrap:wrap; justify-content:flex-end}
  .footer .links a{font-size:10px; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; font-weight:500}
  .footer .links a:hover{color:var(--muted)}
  .footer .fine{grid-column:1 / -1; font-size:11px; letter-spacing:.06em; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}

  /* ---------- responsive ---------- */
  @media (max-width: 980px){
    .hero{grid-template-columns:1fr}
    .hero .photo{min-height:380px; order:-1}
    .split{grid-template-columns:1fr}
    .split .photo{min-height:340px}
    .svc-grid{grid-template-columns:1fr; gap:36px}
    .svc + .svc{border-left:0; border-top:1px solid var(--rule); padding-top:36px}
    .manifesto{grid-template-columns:1fr}
    .manifesto .lead{padding-top:52px}
    .menu{display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); flex-direction:column; align-items:flex-start; gap:0; padding:8px var(--gutter) 22px; border-bottom:1px solid var(--rule); z-index:5}
    .menu.open{display:flex}
    .menu li{width:100%} .menu a{display:block; padding:14px 0}
    .menu-toggle{display:inline-flex; background:none; border:1px solid var(--rule); border-radius:2px; padding:10px 12px; font-family:var(--sans); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); cursor:pointer}
    .footer{grid-template-columns:1fr} .footer .links{justify-content:flex-start}
  }
  @media (max-width: 560px){
    .wordmark .name{font-size:22px; letter-spacing:.2em}
    .wordmark .name .by{font-size:34px}
    .wordmark .sub{font-size:8px; letter-spacing:.26em}
  }

/* Inner pages extend the exact home foundation. */
[hidden]{display:none!important}
.page-hero{padding:clamp(52px,7vw,100px) var(--gutter);background:var(--sand);display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px}
.page-hero h1{font-size:clamp(40px,5vw,64px);line-height:1.06;max-width:24ch}
.page-hero p:not(.caps){max-width:58ch;font-size:14.5px}
.service-group{padding:clamp(60px,8vw,104px) var(--gutter)}
.service-group>.caps{margin-bottom:14px}
.service-group>h2{font-size:clamp(32px,3.8vw,48px);margin-bottom:36px}
.service-group>p:not(.caps){max-width:58ch;font-size:14.5px}
.service-group>.btn{margin-top:36px}
.sand{background:var(--sand)}
.service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:52px auto 0;max-width:1120px;text-align:center}
.service-list .svc h2{font-family:var(--sans);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;line-height:1.5}
.client-types,.process-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;margin:36px 0 0;padding:0;list-style:none}
.client-types li{font:500 28px/1.2 var(--display);border-top:1px solid var(--rule);padding-top:24px}
.client-types span{display:block;font:300 14px/1.75 var(--sans);margin-top:16px}
.process-list h3{font-size:28px;margin:20px 0}
.process-list p{font-size:14px}
.faq details{border-top:1px solid var(--rule);padding:24px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-size:14.5px;font-weight:500}
.faq details p{max-width:70ch;margin-top:20px;font-size:14px}
.end-link{padding:0 var(--gutter) clamp(60px,8vw,104px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8vw;padding:clamp(60px,8vw,104px) var(--gutter)}
address{font-style:normal;display:flex;flex-direction:column;gap:10px;font-size:14px;overflow-wrap:anywhere}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#required-hint{font-size:14px;margin-bottom:24px;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
label,legend{font-size:14px;font-weight:500}
input,textarea,select{font:400 16px/1.5 var(--sans);color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:0;padding:14px;width:100%;min-height:48px}
textarea{resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brown);outline-offset:2px}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--brown)}
fieldset{border:0;margin:10px 0 32px;padding:0;min-width:0}
legend{margin-bottom:8px}
.hint{font-size:14px;color:var(--muted)}
.check{display:flex;align-items:center;gap:14px;margin:10px 0;min-height:40px;font-weight:400}
.check input{width:20px;height:20px;min-height:20px;accent-color:var(--brown);flex-shrink:0}
.field-error{font-size:14px;font-weight:500}
.honeypot,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#inquiry-status{margin:24px 0;font-size:14px}
#inquiry-status p:empty{display:none}
button{cursor:pointer}
button:disabled{cursor:wait}
.direct-contact{border-left:1px solid var(--rule);padding-left:4vw;align-self:start}
.direct-contact h2{font-size:42px;margin:24px 0 32px}
.direct-contact .btn{margin-top:24px}
.recovery-links{display:flex;gap:32px;flex-wrap:wrap;justify-content:center}

.direct-contact h2{font-size:clamp(32px,3.6vw,46px)}
@media(max-width:980px){.service-list{grid-template-columns:1fr;gap:36px}.client-types,.process-list{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-grid{grid-template-columns:1fr;gap:60px}.direct-contact{padding:40px 0 0;border-left:0;border-top:1px solid var(--rule)}}
@media(max-width:560px){.form-grid,.client-types,.process-list{grid-template-columns:1fr}.form-grid{gap:0}}