@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Space+Grotesk:wght@300..600&display=swap');

:root{
  --white:#FFFFFF;
  --paper:#F7F5F1;
  --ink:#0B0B0A;
  --red:#C81E3A;
  --taupe:#A79F8E;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--white); color:var(--ink); font-family:'Space Grotesk', sans-serif; font-weight:300; overflow-x:hidden;}
a{color:inherit;}
.serif{font-family:'Bodoni Moda', serif;}
.accent{font-family:'Bodoni Moda', serif; font-style:italic; color:var(--red);}

/* cursor */
@media (pointer:fine){
  body{cursor:none;}
  .cursor-dot{
    position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%; background:var(--red);
    pointer-events:none; z-index:999; transform:translate(-50%,-50%); transition:transform 0.08s linear;
  }
}

/* side tag */
.side-tag{
  position:fixed; left:18px; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--red); z-index:6;
}
@media (max-width:900px){.side-tag{display:none;}}

/* nav */
nav{
  display:flex; justify-content:space-between; align-items:center; padding:32px 56px 32px 90px;
  border-bottom:0.5px solid var(--ink); position:relative; z-index:20; background:var(--white);
}
nav .mark{font-family:'Bodoni Moda', serif; font-style:italic; font-size:19px; text-decoration:none;}
nav ul{list-style:none; display:flex; gap:40px;}
nav li{position:relative;}
nav a{color:var(--ink); text-decoration:none; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;}
nav li:after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s var(--ease);
}
nav li:hover:after{transform:scaleX(1);}
nav li.current a{color:var(--red);}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:21;}
.nav-toggle span{width:22px; height:1px; background:var(--ink);}

@media (max-width:900px){
  nav{padding:26px 24px;}
  nav ul{
    position:fixed; inset:0; top:0; background:var(--white); flex-direction:column; justify-content:center;
    align-items:center; gap:34px; transform:translateY(-100%); transition:transform 0.4s var(--ease); z-index:19;
  }
  nav ul.open{transform:translateY(0);}
  nav ul a{font-size:14px;}
  .nav-toggle{display:flex;}
}

/* page header (inner pages) */
.page-header{padding:64px 56px 46px 90px; border-bottom:0.5px solid var(--ink);}
.page-header .eyebrow{font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--red); margin-bottom:18px;}
.page-header h1{font-family:'Bodoni Moda', serif; font-weight:500; font-size:clamp(46px,7vw,96px); line-height:1;}
.page-header .dek{font-size:15.5px; opacity:0.65; max-width:480px; margin-top:20px; font-weight:300; line-height:1.6;}
@media (max-width:900px){.page-header{padding-left:24px; padding-right:24px;}}

/* buttons */
.cta{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  width:fit-content; padding:16px 28px; border:1px solid var(--ink);
  color:var(--ink); text-decoration:none; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; z-index:1;
  background:none; cursor:pointer; font-family:'Space Grotesk', sans-serif;
}
.cta:before{
  content:""; position:absolute; inset:0; background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform 0.45s var(--ease); z-index:-1;
}
.cta:hover{color:var(--white);}
.cta:hover:before{transform:scaleX(1);}
.cta:after{content:"→"; font-size:14px;}

/* ticker */
.ticker-wrap{
  border-top:0.5px solid var(--ink); border-bottom:0.5px solid var(--ink); overflow:hidden; padding:20px 0;
  white-space:nowrap; position:relative; z-index:2; background:var(--white);
}
.ticker{display:inline-block; font-family:'Bodoni Moda', serif; font-style:italic; font-size:26px; animation:scroll 24s linear infinite;}
.ticker span.hi{color:var(--red);}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* fit / process cards (read, build, finish) */
.fit{max-width:1180px; margin:0 auto; padding:100px 56px 60px 90px; position:relative;}
.fit-heading{font-family:'Bodoni Moda', serif; font-style:italic; font-size:15px; color:var(--taupe); margin-bottom:44px;}
.fit-row{display:flex; gap:0; align-items:flex-start;}
.fit-card{flex:1; position:relative; padding:0 36px; overflow:hidden;}
.fit-card:first-child{padding-left:0;}
.fit-card.mid{margin-top:70px;}
.fit-card.low{margin-top:24px;}
.fit-card.tall{margin-top:40px;}
.fit-word{
  position:absolute; top:-20px; left:-10px; font-family:'Bodoni Moda', serif; font-weight:600; font-size:64px;
  color:transparent; -webkit-text-stroke:1px rgba(11,11,10,0.07); z-index:0; white-space:nowrap;
}
.fit-icon{width:46px; height:46px; margin-bottom:22px; position:relative; z-index:1; transition:transform 0.5s var(--ease);}
.fit-card:hover .fit-icon{transform:rotate(-6deg) scale(1.08);}
.fit-card .label{font-family:'Bodoni Moda', serif; font-style:italic; font-size:22px; margin-bottom:10px; position:relative; z-index:1;}
.fit-card p{font-size:13.5px; line-height:1.7; opacity:0.7; position:relative; z-index:1;}
@media (max-width:900px){
  .fit{padding-left:24px; padding-right:24px;}
  .fit-row{flex-direction:column;}
  .fit-card{padding:30px 0 !important; margin-top:0 !important; border-top:0.5px solid var(--ink);}
  .fit-card:first-child{border-top:none;}
}

/* pull quote */
.quote{position:relative; padding:120px 90px 120px 90px; max-width:1100px; margin:0 auto;}
.quote-mark{font-family:'Bodoni Moda', serif; font-size:220px; color:var(--red); opacity:0.16; position:absolute; top:20px; left:60px; line-height:1;}
.quote-body{position:relative; z-index:1; max-width:760px; margin-left:80px;}
.quote-body p{font-family:'Bodoni Moda', serif; font-style:italic; font-weight:500; font-size:clamp(24px,3.3vw,40px); line-height:1.35;}
.quote-body p span{color:var(--red);}
.quote-body .who{margin-top:26px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--taupe); text-align:right;}
@media (max-width:900px){
  .quote{padding:70px 24px;}
  .quote-body{margin-left:0;}
  .quote-mark{left:10px; font-size:120px;}
}

/* framed box + corner badge (reused: hero cover photo, about portrait, etc.) */
.framed-box{
  position:relative; border:0.5px solid var(--ink); background:var(--paper);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.badge{
  position:absolute; top:-24px; right:-24px; width:76px; height:76px; border-radius:50%;
  background:var(--red); color:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(8deg); text-align:center;
}
.badge .num{font-family:'Bodoni Moda', serif; font-style:italic; font-weight:600; font-size:22px; line-height:1;}
.badge .cap{font-size:7px; letter-spacing:0.1em; text-transform:uppercase; margin-top:2px;}

/* simple content sections */
.section{max-width:1180px; margin:0 auto; padding:90px 56px 90px 90px;}
.section.tight{padding-top:50px;}
.section h2{font-family:'Bodoni Moda', serif; font-weight:500; font-size:clamp(28px,3.4vw,44px); line-height:1.15; max-width:640px;}
.section .lede{font-size:15.5px; line-height:1.7; opacity:0.7; max-width:560px; margin-top:22px;}
.rule{border-top:0.5px solid var(--ink); max-width:1180px; margin:0 auto;}
@media (max-width:900px){.section{padding-left:24px; padding-right:24px;}}

/* two column layout */
.two-col{display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:start;}
@media (max-width:900px){.two-col{grid-template-columns:1fr;}}

/* tag list */
.tag-list{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.tag-list span{
  border:0.5px solid var(--ink); padding:8px 16px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
}

/* price comparison table */
.price-table-wrap{max-width:1180px; margin:0 auto; padding:10px 56px 20px 90px; overflow-x:auto;}
.price-table{width:100%; border-collapse:collapse; min-width:520px;}
.price-table th{
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:400; color:var(--taupe);
  text-align:center; padding:0 12px 16px; vertical-align:bottom;
}
.price-table th .soon{display:block; font-size:9px; opacity:0.8; margin-top:3px; text-transform:none; letter-spacing:0.02em;}
.price-table th:first-child{text-align:left; padding-left:0;}
.price-table td{padding:22px 12px; text-align:center; border-top:0.5px solid var(--ink);}
.price-table td.level{text-align:left; padding-left:0; font-size:14.5px;}
.price-table td.price{font-family:'Bodoni Moda', serif; font-style:italic; font-size:23px; color:var(--red);}
.price-table tbody tr:last-child td{border-bottom:0.5px solid var(--ink);}
.price-note{max-width:640px; padding:0 56px 90px 90px;}
@media (max-width:900px){
  .price-table-wrap{padding-left:24px; padding-right:24px;}
  .price-note{padding-left:24px; padding-right:24px;}
}

/* rate table (pricing) */
.rate-table{max-width:1180px; margin:0 auto; padding:6px 56px 6px 90px;}
.rate-row{display:grid; grid-template-columns:1fr auto; align-items:center; padding:22px 0; border-top:0.5px solid var(--ink); gap:20px;}
.rate-row:last-child{border-bottom:0.5px solid var(--ink);}
.rate-row .level{font-size:15px;}
.rate-row .price{font-family:'Bodoni Moda', serif; font-style:italic; font-size:24px; color:var(--red); white-space:nowrap;}
.rate-row .price sup{font-size:11px; font-family:'Space Grotesk', sans-serif; font-style:normal; opacity:0.55; color:var(--ink); margin-left:4px;}
@media (max-width:900px){.rate-table{padding-left:24px; padding-right:24px;}}

/* highlight box */
.highlight-box{
  max-width:1180px; margin:0 auto; padding:44px 56px 44px 90px;
  border-top:0.5px solid var(--ink); border-bottom:0.5px solid var(--ink);
}
.highlight-box h3{font-family:'Bodoni Moda', serif; font-style:italic; font-size:22px; margin-bottom:14px;}
.highlight-box p{font-size:14px; line-height:1.75; opacity:0.75; max-width:560px;}
@media (max-width:900px){.highlight-box{padding-left:24px; padding-right:24px;}}

/* feature list */
.feature-list{list-style:none; max-width:640px; margin-top:24px;}
.feature-list li{font-size:14px; line-height:1.8; opacity:0.8; padding-left:20px; position:relative; margin-bottom:10px;}
.feature-list li:before{content:"—"; position:absolute; left:0; color:var(--red);}

/* pricing */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:1180px; margin:0 auto; padding:0 56px 100px 90px;}
.price-card{border-left:0.5px solid var(--ink); padding:50px 40px; position:relative;}
.price-card:first-child{border-left:none; padding-left:0;}
.price-card .plan{font-family:'Bodoni Moda', serif; font-style:italic; font-size:20px; margin-bottom:18px;}
.price-card .amount{font-family:'Bodoni Moda', serif; font-weight:500; font-size:44px; margin-bottom:6px;}
.price-card .amount sup{font-size:14px; font-family:'Space Grotesk', sans-serif; font-weight:400; opacity:0.6;}
.price-card .note{font-size:11px; letter-spacing:0.05em; opacity:0.55; margin-bottom:26px;}
.price-card ul{list-style:none; margin-bottom:30px;}
.price-card li{font-size:13.5px; line-height:2; opacity:0.75; padding-left:16px; position:relative;}
.price-card li:before{content:"—"; position:absolute; left:0; color:var(--red);}
.price-flag{
  position:absolute; top:0; right:0; background:var(--red); color:var(--white); font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase; padding:6px 12px;
}
@media (max-width:900px){
  .price-grid{grid-template-columns:1fr; padding-left:24px; padding-right:24px;}
  .price-card{border-left:none; border-top:0.5px solid var(--ink); padding-left:0;}
  .price-card:first-child{border-top:none;}
}

/* placeholder callout */
.placeholder-note{
  max-width:1180px; margin:0 auto; padding:0 56px 40px 90px; font-size:12px; color:var(--red); opacity:0.85;
}
@media (max-width:900px){.placeholder-note{padding-left:24px; padding-right:24px;}}

/* blog skeleton */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:44px; max-width:1180px; margin:0 auto; padding:0 56px 100px 90px;}
.blog-card{border:0.5px solid var(--ink);}
.blog-card .thumb{aspect-ratio:4/3; background:var(--paper); border-bottom:0.5px solid var(--ink); display:flex; align-items:center; justify-content:center;}
.blog-card .thumb span{font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--taupe);}
.blog-card .body{padding:24px;}
.blog-card .meta{font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--taupe); margin-bottom:10px;}
.blog-card .title{font-family:'Bodoni Moda', serif; font-style:italic; font-size:19px; line-height:1.3;}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr; padding-left:24px; padding-right:24px;}}

/* contact form */
.form-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:80px; max-width:1180px; margin:0 auto; padding:60px 56px 110px 90px;}
.field{margin-bottom:30px;}
.field label{display:block; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--taupe); margin-bottom:10px;}
.field input, .field textarea{
  width:100%; border:none; border-bottom:0.5px solid var(--ink); background:none; padding:10px 0;
  font-family:'Space Grotesk', sans-serif; font-size:15px; color:var(--ink); font-weight:300;
}
.field input:focus, .field textarea:focus{outline:none; border-bottom-color:var(--red);}
.contact-info .item{margin-bottom:26px;}
.contact-info .item .k{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--taupe); margin-bottom:6px;}
.contact-info .item .v{font-family:'Bodoni Moda', serif; font-style:italic; font-size:19px;}
@media (max-width:900px){.form-grid{grid-template-columns:1fr; gap:50px; padding-left:24px; padding-right:24px;}}

/* resources */
.resource-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:1180px; margin:0 auto; padding:0 56px 90px 90px;}
.resource-card{border-left:0.5px solid var(--ink); padding:40px 36px; position:relative;}
.resource-card:first-child{border-left:none; padding-left:0;}
.resource-card .type{font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); margin-bottom:14px;}
.resource-card h3{font-family:'Bodoni Moda', serif; font-style:italic; font-size:19px; margin-bottom:12px; line-height:1.3;}
.resource-card p{font-size:13px; line-height:1.7; opacity:0.7; margin-bottom:22px;}
.resource-card a.dl{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase; border-bottom:1px solid var(--ink);
  padding-bottom:4px; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:8px;
}
.resource-card .dl-soon{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--taupe);
}
@media (max-width:900px){
  .resource-grid{grid-template-columns:1fr; padding-left:24px; padding-right:24px;}
  .resource-card{border-left:none; border-top:0.5px solid var(--ink); padding-left:0;}
  .resource-card:first-child{border-top:none;}
}

/* footer */
footer{
  border-top:0.5px solid var(--ink); padding:34px 56px 34px 90px; font-size:11px; letter-spacing:0.05em; opacity:0.6;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
}
footer span:nth-child(2){text-align:center;}
footer span:last-child{text-align:right;}
@media (max-width:900px){
  footer{padding-left:24px; padding-right:24px; grid-template-columns:1fr; text-align:center; gap:6px;}
  footer span{text-align:center !important;}
}