:root{
    --night:#15120E; --night-2:#1D1812; --night-soft:#F0E9DB;
    --clay:#B5622C; --clay-deep:#8F4A20; --gold:#C8955A;
    --line:rgba(240,233,219,0.16);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;overflow:hidden;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--night);
    color:var(--night-soft);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
    height:100svh;
  }
  .serif{font-family:'Fraunces',serif;}
  .mono{font-family:'Space Mono',monospace;}

  /* BACKGROUND PHOTO + SCRIM */
  .bg-wrap{position:fixed;inset:0;z-index:0;overflow:hidden;}
  .bg-photo{position:absolute;inset:-6%;background-image:url('../assets/images/developingnys-bg.jpg');
    background-size:cover;background-position:center;background-repeat:no-repeat;
    filter:grayscale(55%) saturate(0.8) brightness(0.72) contrast(1.05);
    animation:kenburns 34s ease-in-out infinite alternate;}
  @keyframes kenburns{0%{transform:scale(1.04) translate(0,0);}100%{transform:scale(1.14) translate(-1.2%,-1%);}}
  .bg-scrim{position:absolute;inset:0;
    background:
      radial-gradient(ellipse 62% 60% at 50% 44%, rgba(21,18,14,0.8) 0%, rgba(21,18,14,0.55) 46%, rgba(21,18,14,0.26) 74%, rgba(21,18,14,0.08) 100%),
      linear-gradient(180deg, rgba(21,18,14,0.52) 0%, rgba(21,18,14,0.12) 18%, rgba(21,18,14,0.12) 78%, rgba(21,18,14,0.6) 100%);}
  .grain{position:absolute;inset:0;opacity:0.05;pointer-events:none;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  /* LAYOUT */
  .stage{position:relative;z-index:1;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:32px 24px 20px;text-align:center;}

  /* SIGNATURE: hand-drafted skyline that draws itself in, then breathes */
  .skyline{width:190px;height:64px;margin-bottom:18px;overflow:visible;}
  .skyline path,.skyline line{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
  .skyline .draw{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.6s cubic-bezier(.3,.6,.2,1) 0.3s forwards;}
  .skyline .crane-cable{stroke-dasharray:40;stroke-dashoffset:0;opacity:0;animation:draw 0.6s ease 2.5s forwards, sway 3.6s ease-in-out 3.2s infinite;}
  .skyline .crane-hook{opacity:0;animation:fadein 0.6s ease 3s forwards;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  @keyframes fadein{to{opacity:1;}}
  @keyframes sway{0%,100%{transform:translateX(0);}50%{transform:translateX(2.5px);}}

  .mark{width:152px;margin-bottom:16px;opacity:0;animation:riseIn 0.9s ease 0.15s forwards;}
  .mark-svg{width:100%;height:auto;display:block;}

  .ornament{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;
    opacity:0;animation:riseIn 0.9s ease 0.35s forwards;}
  .ornament .ln{width:52px;height:1px;background:linear-gradient(90deg, transparent, var(--line));}
  .ornament .ln.r{background:linear-gradient(90deg, var(--line), transparent);}
  .ornament .dot{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex-shrink:0;}

  .eyebrow{font-size:11px;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold);font-weight:700;
    margin-bottom:14px;opacity:0;animation:riseIn 0.9s ease 0.5s forwards;
    text-shadow:0 2px 16px rgba(10,8,6,0.7);}

  h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(30px,5.6vw,54px);line-height:1.1;
    letter-spacing:-0.5px;max-width:16ch;margin-bottom:16px;
    opacity:0;animation:riseIn 1s ease 0.65s forwards;
    text-shadow:0 4px 24px rgba(10,8,6,0.55);}
  h1 em{font-style:italic;color:var(--gold);font-weight:400;}

  .sub{font-size:14.5px;line-height:1.65;color:rgba(240,233,219,0.85);max-width:420px;margin-bottom:26px;
    opacity:0;animation:riseIn 1s ease 0.85s forwards;
    text-shadow:0 2px 14px rgba(10,8,6,0.6);}

  .contact-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;
    opacity:0;animation:riseIn 1s ease 1.05s forwards;}
  .contact-link{display:inline-flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:12px;
    letter-spacing:1px;color:var(--night-soft);text-decoration:none;padding-bottom:5px;
    border-bottom:1px solid rgba(240,233,219,0.45);transition:border-color .3s ease, color .3s ease;
    text-shadow:0 2px 12px rgba(10,8,6,0.6);}
  .contact-link:hover{color:var(--gold);border-color:var(--gold);}
  .contact-link svg{width:13px;height:13px;flex-shrink:0;opacity:0.85;}
  .contact-divider{width:1px;height:14px;background:rgba(240,233,219,0.32);}

  @keyframes riseIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

  footer{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px 24px;text-align:center;
    font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
    color:rgba(240,233,219,0.55);text-shadow:0 2px 10px rgba(10,8,6,0.6);}
  footer .credit{margin-top:5px;font-size:9px;letter-spacing:1.2px;color:rgba(240,233,219,0.38);}
  footer a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(240,233,219,0.3);
    transition:color .3s ease,border-color .3s ease;}
  footer a:hover{color:var(--gold);border-color:var(--gold);}

  @media(max-width:480px){
    .contact-row{gap:16px;flex-direction:column;}
    .contact-divider{display:none;}
    .skyline{width:150px;height:50px;margin-bottom:14px;}
    .eyebrow{letter-spacing:2px;font-size:10px;padding:0 8px;}
  }

  /* SHORT VIEWPORTS: compact rhythm further so nothing clips or scrolls */
  @media(max-height:760px){
    .stage{padding:24px 24px 18px;}
    .skyline{margin-bottom:14px;}
    .mark{width:132px;margin-bottom:14px;}
    .ornament{margin-bottom:14px;}
    .eyebrow{margin-bottom:12px;}
    h1{margin-bottom:12px;}
    .sub{margin-bottom:20px;}
  }
  @media(max-height:620px){
    .skyline{display:none;}
    .mark{width:112px;margin-bottom:12px;}
    .sub{display:none;}
    footer{padding:10px 24px;}
  }

  @media(prefers-reduced-motion:reduce){
    .bg-photo{animation:none;}
    .skyline .draw,.skyline .crane-cable,.skyline .crane-hook,.mark,.ornament,.eyebrow,h1,.sub,.contact-row{
      animation:none !important;opacity:1 !important;transform:none !important;}
  }