/* ============================================================
   ESTATE FRAME — design tokens
   ============================================================ */
:root{
  --ink:      #14213D;   /* deep navy — structure, dark sections   */
  --ink-2:    #1C2B4A;
  --paper:    #FAF7F2;   /* warm white — page background           */
  --panel:    #FFFFFF;
  --amber:    #E2984A;   /* golden hour — accent, CTAs              */
  --amber-dk: #C97C2E;
  --charcoal: #1B1B1F;   /* primary text                            */
  --slate:    #5B6472;   /* secondary text                          */
  --line:     #D7DEE3;   /* hairline / blueprint rule                */
  --line-dk:  #3A4A6B;   /* hairline on dark                         */

  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --max: 1120px;
  --radius: 2px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
  color:var(--ink);
}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ============================================================
   Utility label / eyebrow (timecode-style)
   ============================================================ */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber-dk);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 3px rgba(226,152,74,.18);
}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(250,247,242,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{
  font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);
  text-decoration:none;display:flex;align-items:center;gap:9px;letter-spacing:-.01em;
}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--amber)}
.logo .tc{font-family:var(--mono);font-size:11px;color:var(--slate);font-weight:400;letter-spacing:.05em}
.navlinks{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
.navlinks a{
  text-decoration:none;font-family:var(--display);font-size:14.5px;font-weight:500;
  color:var(--slate);padding:6px 0;border-bottom:1px solid transparent;
}
.navlinks a:hover,.navlinks a.active{color:var(--ink);border-color:var(--amber)}
.navcta{
  font-family:var(--display);font-weight:600;font-size:14px;
  background:var(--ink);color:var(--paper);padding:11px 20px;text-decoration:none;
  border-radius:var(--radius);border:1px solid var(--ink);
}
.navcta:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.navtoggle{display:none;background:none;border:1px solid var(--line);padding:8px 10px;font-size:20px;cursor:pointer}
@media (max-width:860px){
  .navlinks{position:fixed;inset:74px 0 0 0;background:var(--paper);flex-direction:column;
    padding:34px 28px;gap:22px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s;}
  .navlinks.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .navtoggle{display:block}
  .navcta{display:none}
  .navlinks.open .navcta{display:inline-block;margin-top:6px}
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:15px;
  padding:14px 26px;text-decoration:none;border-radius:var(--radius);
  border:1px solid var(--ink);cursor:pointer;
}
.btn-primary{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn-primary:hover{background:var(--amber-dk);border-color:var(--amber-dk)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-on-dark{border-color:var(--line-dk);color:var(--paper)}
.btn-on-dark:hover{background:var(--paper);color:var(--ink)}

/* ============================================================
   Hero / viewfinder frame (signature element)
   ============================================================ */
.hero{padding:76px 0 90px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:920px){.hero .wrap{grid-template-columns:1fr;gap:44px}}
.hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.04;max-width:12ch}
.hero .lede{font-size:19px;color:var(--slate);max-width:44ch;margin-bottom:28px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}

.viewfinder{
  position:relative;
  aspect-ratio:16/10;
  background:var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
}
.viewfinder .grain{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(226,152,74,.28), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(255,255,255,.10), transparent 50%);
}
.corner{position:absolute;width:22px;height:22px;border-color:var(--amber);border-style:solid;opacity:.9}
.corner.tl{top:16px;left:16px;border-width:2px 0 0 2px}
.corner.tr{top:16px;right:16px;border-width:2px 2px 0 0}
.corner.bl{bottom:16px;left:16px;border-width:0 0 2px 2px}
.corner.br{bottom:16px;right:16px;border-width:0 2px 2px 0}
.vf-rec{
  position:absolute;top:16px;left:50px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#fff;
  display:flex;align-items:center;gap:6px;
}
.vf-rec .r{width:7px;height:7px;border-radius:50%;background:#E2554A;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.vf-tc{
  position:absolute;bottom:16px;right:50px;
  font-family:var(--mono);font-size:12px;color:#fff;letter-spacing:.03em;
}
.vf-ratio{
  position:absolute;bottom:44px;left:16px;right:16px;
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.7);letter-spacing:.08em;
}
.vf-crop{
  position:absolute;top:8%;bottom:8%;
  width:23%;left:50%;transform:translateX(-50%);
  border-left:1px dashed rgba(255,255,255,.45);
  border-right:1px dashed rgba(255,255,255,.45);
}
.vf-caption{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--slate);
  display:flex;justify-content:space-between}

/* ============================================================
   Section basics
   ============================================================ */
section{padding:84px 0}
.section-head{max-width:640px;margin-bottom:48px}
.section-head h2{font-size:clamp(26px,3vw,36px)}
.section-head p{color:var(--slate);font-size:17px}
.dark{background:var(--ink);color:var(--paper)}
.dark h2,.dark h3,.dark h4{color:var(--paper)}
.dark .section-head p{color:#AAB6CE}
.dark{border-bottom:1px solid var(--line-dk)}

/* ============================================================
   Process steps
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line-dk)}
.step{padding:30px 22px;border-right:1px solid var(--line-dk)}
.step:last-child{border-right:none}
@media (max-width:920px){.steps{grid-template-columns:repeat(2,1fr)}.step:nth-child(2n){border-right:none}.step{border-bottom:1px solid var(--line-dk)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.step{border-right:none;border-bottom:1px solid var(--line-dk)}}
.step .num{font-family:var(--mono);color:var(--amber);font-size:13px;margin-bottom:14px;display:block}
.step h3{color:var(--paper);font-size:18px;margin-bottom:8px}
.step p{color:#AAB6CE;font-size:15px;margin:0}

/* ============================================================
   Style cards
   ============================================================ */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:860px){.cards3{grid-template-columns:1fr}}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;overflow:hidden;
}
.card .frame{aspect-ratio:16/10;background:var(--ink);position:relative}
.card .frame .corner{width:16px;height:16px}
.card .body{padding:22px 22px 26px}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--slate);font-size:15px;margin:0}
.frame.grade-bright{background:linear-gradient(135deg,#2A3A5C,#5B7091)}
.frame.grade-cinematic{background:linear-gradient(135deg,#0F1626,#2A2130)}
.frame.grade-social{background:linear-gradient(135deg,#3A2A1E,#8A5A2E)}

/* ============================================================
   Pricing tiers (blueprint brackets)
   ============================================================ */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line)}
@media (max-width:920px){.tiers{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tiers{grid-template-columns:1fr}}
.tier{
  padding:30px 24px;border-right:1px solid var(--line);position:relative;background:var(--panel);
}
.tier:last-child{border-right:none}
@media (max-width:920px){.tier:nth-child(2n){border-right:none}.tier{border-bottom:1px solid var(--line)}}
.tier .sqft{font-family:var(--mono);font-size:12px;color:var(--slate);letter-spacing:.05em;margin-bottom:18px}
.tier .plan{
  width:56px;height:40px;border:1.5px solid var(--ink);position:relative;margin-bottom:20px;
}
.tier .plan::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--ink);opacity:.35}
.tier .price{font-family:var(--display);font-size:32px;font-weight:700;color:var(--ink)}
.tier .price sup{font-size:14px;font-weight:500;color:var(--slate)}
.tier .includes{list-style:none;margin:18px 0 0;padding:0;font-size:14px;color:var(--slate)}
.tier .includes li{padding:5px 0;border-top:1px dashed var(--line)}
.tier .includes li:first-child{border-top:none}
.tier.featured{background:var(--ink)}
.tier.featured .sqft{color:#AAB6CE}
.tier.featured .plan{border-color:var(--amber)}
.tier.featured .plan::after{background:var(--amber)}
.tier.featured .price,.tier.featured .price sup{color:var(--paper)}
.tier.featured .includes{color:#AAB6CE}
.tier .badge{
  position:absolute;top:-1px;right:-1px;background:var(--amber);color:var(--ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:4px 8px;
}

/* ============================================================
   Examples grid
   ============================================================ */
.examples-label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--slate);
  margin:0 0 12px;
}
.examples-label:not(:first-child){margin-top:28px}
.examples-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:560px){.examples-row{grid-template-columns:1fr}}
.ex-frame{background:var(--ink);position:relative;border-radius:var(--radius);overflow:hidden}
.ex-frame.ex-reel{aspect-ratio:9/16;max-width:320px}
.ex-frame.ex-full{aspect-ratio:16/9}
.ex-frame .lab{position:absolute;bottom:12px;left:12px;right:12px;font-family:var(--mono);font-size:10.5px;color:#fff;letter-spacing:.04em}
.ex-frame .corner{width:14px;height:14px}
.ex-tag{
  position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9.5px;color:var(--amber);
  border:1px solid rgba(226,152,74,.5);padding:2px 6px;letter-spacing:.06em;
}

/* ============================================================
   CTA banner
   ============================================================ */
.cta-band{
  background:var(--amber);padding:56px 0;text-align:center;
}
.cta-band h2{color:var(--ink);font-size:clamp(24px,3vw,32px);margin-bottom:8px}
.cta-band p{color:var(--ink);opacity:.75;margin-bottom:26px}

/* ============================================================
   Footer
   ============================================================ */
footer{background:var(--ink);color:#AAB6CE;padding:52px 0 34px;border-top:1px solid var(--line-dk)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
footer .logo{color:var(--paper)}
footer nav{display:flex;gap:26px;flex-wrap:wrap}
footer nav a{text-decoration:none;color:#AAB6CE;font-family:var(--display);font-size:14px}
footer nav a:hover{color:var(--paper)}
.footer-bottom{
  max-width:var(--max);margin:34px auto 0;padding:22px 28px 0;border-top:1px solid var(--line-dk);
  font-family:var(--mono);font-size:11.5px;color:#7F8CA8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ============================================================
   Page header (About / Contact / Submit)
   ============================================================ */
.pagehead{padding:56px 0 46px;border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(30px,4vw,44px)}
.pagehead p{color:var(--slate);font-size:18px;max-width:56ch}

/* ============================================================
   About page specifics
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.valuelist{list-style:none;margin:0;padding:0}

/* ============================================================
   Blog list
   ============================================================ */
.blog-list{list-style:none;margin:0;padding:0;max-width:760px}
.blog-post{
  display:grid;grid-template-columns:90px 1fr;gap:24px;
  padding:34px 0;border-top:1px solid var(--line);
}
.blog-list li:last-child{border-bottom:1px solid var(--line)}
@media (max-width:600px){.blog-post{grid-template-columns:1fr;gap:8px}}
.blog-date{font-family:var(--mono);font-size:12px;color:var(--amber-dk);letter-spacing:.06em;padding-top:3px}
.blog-post h2{font-size:20px;margin-bottom:10px}
.blog-post p{color:var(--slate);font-size:15.5px}
.blog-post p:last-child{margin-bottom:0}
.valuelist li{
  padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:70px 1fr;gap:18px;
}
.valuelist li:last-child{border-bottom:1px solid var(--line)}
.valuelist .tc{font-family:var(--mono);font-size:12px;color:var(--amber-dk);padding-top:2px}
.valuelist h4{margin-bottom:4px;font-size:17px}
.valuelist p{margin:0;color:var(--slate);font-size:15px}

/* ============================================================
   Forms
   ============================================================ */
.form-card{background:var(--panel);border:1px solid var(--line);padding:36px;border-radius:var(--radius)}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);margin-bottom:8px;
}
.field input,.field textarea,.field select{
  width:100%;padding:13px 14px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--body);font-size:15.5px;color:var(--charcoal);border-radius:var(--radius);
}
.field textarea{resize:vertical;min-height:110px;font-family:var(--body)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:13px;color:var(--slate);margin-top:16px}
.form-success{
  display:none;background:#EAF4EC;border:1px solid #B9DCC1;color:#215B31;
  padding:16px 18px;border-radius:var(--radius);font-size:14.5px;margin-top:18px;
}
.form-success.show{display:block}

/* ============================================================
   Chat intake (Submit a Project)
   ============================================================ */
.chat-shell{
  background:var(--ink);border-radius:var(--radius);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto;height:640px;
}
.chat-top{
  padding:16px 22px;border-bottom:1px solid var(--line-dk);
  display:flex;align-items:center;justify-content:space-between;
}
.chat-top .who{display:flex;align-items:center;gap:10px;font-family:var(--display);color:var(--paper);font-weight:600;font-size:15px}
.chat-top .who .dot{width:8px;height:8px;border-radius:50%;background:#3FCB6E}
.chat-top .tc{font-family:var(--mono);font-size:11px;color:#7F8CA8}
.chat-log{padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.bubble{max-width:78%;padding:12px 15px;border-radius:var(--radius);font-size:14.5px;line-height:1.5}
.bubble.bot{background:#1F2E4E;color:#E7ECF6;align-self:flex-start;border:1px solid var(--line-dk)}
.bubble.user{background:var(--amber);color:var(--ink);align-self:flex-end;font-weight:500}
.choice-row{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:86%}
.choice-btn{
  font-family:var(--display);font-size:13.5px;font-weight:500;
  background:transparent;border:1px solid var(--line-dk);color:var(--paper);
  padding:9px 14px;border-radius:var(--radius);cursor:pointer;
}
.choice-btn:hover{border-color:var(--amber);color:var(--amber)}
.chat-inputrow{
  border-top:1px solid var(--line-dk);padding:14px 16px;display:flex;gap:10px;background:#101B33;
}
.chat-inputrow input{
  flex:1;background:#1B2A4A;border:1px solid var(--line-dk);color:var(--paper);
  padding:12px 14px;border-radius:var(--radius);font-family:var(--body);font-size:14.5px;
}
.chat-inputrow input::placeholder{color:#6D7A99}
.chat-inputrow button{
  background:var(--amber);border:none;color:var(--ink);font-family:var(--display);font-weight:700;
  padding:0 20px;border-radius:var(--radius);cursor:pointer;
}
.chat-inputrow button:disabled{opacity:.4;cursor:not-allowed}
.chat-side .eyebrow{margin-bottom:12px}
.summary-card{background:var(--panel);border:1px solid var(--line);padding:20px;margin-bottom:16px}
.summary-card h4{font-size:14px;margin-bottom:10px}
.summary-list{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--slate)}
.summary-list li{padding:6px 0;border-top:1px dashed var(--line);display:flex;justify-content:space-between;gap:10px}
.summary-list li:first-child{border-top:none}
.summary-list b{color:var(--charcoal);font-weight:600;text-align:right}

/* Photo upload block inside chat */
.upload-block{
  background:#1F2E4E;border:1px dashed var(--line-dk);border-radius:var(--radius);
  padding:16px;align-self:flex-start;max-width:86%;width:100%;
}
.upload-dropzone{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;
  font-family:var(--display);color:var(--paper);font-size:14px;font-weight:600;
}
.upload-dropzone small{font-family:var(--mono);font-weight:400;font-size:11px;color:#7F8CA8}
.upload-filelist{list-style:none;margin:12px 0 0;padding:0;font-family:var(--mono);font-size:12px;color:#AAB6CE;display:flex;flex-direction:column;gap:4px}
.upload-filelist li.upload-error{color:#E2857A}
.upload-continue{margin-top:14px}