/* ==========================================================================
   Xperience — Shared Styles
   ========================================================================== */

:root{
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --ink:#1a1a18;
  --ground:#f6f4f0;
  --ground-2:#eeeae3;
  --accent:#8a6d3b;
  --line:#ddd8cf;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background:var(--ground);
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
img{ max-width:100%; display:block; }

.wrap{ max-width:1120px; margin:0 auto; padding-inline:32px; }

.sans{ font-family:'Helvetica Neue',Arial,sans-serif; }

/* Header / nav: see css/mobile-nav.css */

/* ---------- Buttons ---------- */
.btn{
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase;
  text-decoration:none; padding:16px 34px; display:inline-block;
  border:1px solid var(--ink); cursor:pointer;
}
.btn-primary{ background:var(--ink); color:var(--ground); }
.btn-secondary{ background:transparent; color:var(--ink); }
.btn-inverse{ background:var(--ground); color:var(--ink); border-color:var(--ground); }
.btn-inverse-outline{ background:transparent; color:var(--ground); border-color:var(--ground); }

/* ---------- Eyebrow / section labels ---------- */
.eyebrow{
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.75rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:24px;
}

/* ---------- Hero (home) ---------- */
.hero{ min-height:620px; padding-block:140px 120px; text-align:center; display:flex; align-items:center; position:relative; isolation:isolate; overflow:hidden; background:#25231f; color:var(--ground); }
.hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:0.72; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,19,16,0.38),rgba(20,19,16,0.7)); z-index:-1; }
.hero .wrap{ width:100%; }
.hero h1{
  font-size:clamp(2.4rem, 5vw, 4rem);
  font-weight:400; letter-spacing:0.01em;
  max-width:820px; margin-inline:auto;
}
.hero p{
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:1.05rem; color:#ebe6dc; margin-top:26px;
}
.hero .ctas{ margin-top:48px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.hero .eyebrow{ color:#d4b77e; }
.hero .btn-secondary{ color:var(--ground); border-color:var(--ground); }

/* ---------- Page intro (non-home pages) ---------- */
.page-intro{ padding-block:110px 70px; text-align:center; }
.page-intro h1{ font-size:clamp(2rem,3.6vw,2.8rem); font-weight:400; max-width:700px; margin-inline:auto; margin-bottom:20px; }
.page-intro p{ font-family:'Helvetica Neue',Arial,sans-serif; color:#4a4a45; max-width:56ch; margin-inline:auto; }

/* ---------- Service pillars ---------- */
.pillars{ padding-block:100px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ground-2); }
.pillars .grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:56px; }
.pillars .num, .how .num{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.75rem; letter-spacing:0.15em; color:var(--accent); margin-bottom:18px; }
.pillars h3{ font-size:1.3rem; font-weight:400; margin-bottom:14px; }
.pillars p{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.92rem; color:#4a4a45; }

/* ---------- Proof / testimonial ---------- */
.proof{ padding-block:110px 120px; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,0.25), rgba(236,232,224,0.9)); border-block:1px solid var(--line); }
.proof .wrap{ max-width:920px; }
.proof .eyebrow{ margin-bottom:18px; color:var(--accent); }
.proof blockquote{
  position:relative; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2rem, 3vw, 3.1rem);
  line-height:1.16; font-weight:400; max-width:760px; margin:0 auto; color:#201f1d; letter-spacing:-0.04em;
}
.proof blockquote::before{
  content:"“"; display:block; font-family:'Helvetica Neue',Arial,sans-serif; font-size:4rem; line-height:0.8; color:var(--accent); margin-bottom:14px;
}
.proof cite{
  display:block; font-family:'Helvetica Neue',Arial,sans-serif; font-style:normal;
  font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-top:24px;
}
.proof cite::before{ content:"— "; }

/* ---------- Work / portfolio grid (home teaser) ---------- */
.work{ padding-block:120px; border-top:1px solid var(--line); }
.work .head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:56px; flex-wrap:wrap; gap:16px; }
.work h2{ font-size:2rem; font-weight:400; }
.work .head a{
  font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.8rem; letter-spacing:0.1em;
  text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:3px;
}
.work .grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:40px; }

.card{ display:block; text-decoration:none; color:inherit; }
.card .panel{ aspect-ratio:4/3; display:flex; align-items:flex-end; justify-content:flex-start; padding:24px; position:relative; overflow:hidden; background-size:cover; background-position:center; }
.project-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.card .panel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(20,18,15,0.72)); }
.card .panel span{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:#5a5548; }
.card .panel span{ position:relative; z-index:1; color:#f6f4f0; }
.card .meta{ padding-top:20px; }
.card .cat{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.card h3{ font-size:1.2rem; font-weight:400; }

/* portfolio panel tints — swap for real photography */
.p1{ background-color:#2b2320; }
.p2{ background-color:#d8d2c4; }
.p3{ background-color:#e2e6e2; }
.p4{ background-color:#ded6c8; }
.p5{ background-color:#0b0e14; background-image:radial-gradient(circle at 30% 40%,rgba(255,179,64,0.55) 0 6px,transparent 7px),radial-gradient(circle at 62% 58%,rgba(255,92,138,0.5) 0 10px,transparent 11px),radial-gradient(circle at 74% 30%,rgba(111,91,240,0.55) 0 5px,transparent 6px),radial-gradient(circle at 50% 50%,#26314a 0,#0b0e14 75%); }

/* ---------- Full case studies (portfolio page) ---------- */
.cases{ padding-block:60px 120px; }
.case{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding-block:70px; border-bottom:1px solid var(--line); }
.case:last-child{ border-bottom:none; }
.case:nth-child(even) .panel{ order:2; }
.case .panel{ aspect-ratio:4/3; position:relative; overflow:hidden; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:24px; }
.case .panel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(20,18,15,0.72)); }
.case .panel span{ position:relative; z-index:1; font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:#f6f4f0; }
.case h2{ font-size:1.6rem; font-weight:400; margin-bottom:20px; }
.case h3{
  font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; color:#8a8578; margin-top:18px; margin-bottom:6px;
}
.case p{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.92rem; color:#4a4a45; }
.case p.case-note{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-top:-4px; }

/* ---------- About page ---------- */
.intro-split{ padding-block:110px 80px; }
.intro-split .grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:64px; align-items:center; }
.portrait{ aspect-ratio:4/5; background-image:linear-gradient(180deg,rgba(20,18,15,0.02),rgba(20,18,15,0.42)),url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1000&q=85'); background-size:cover; background-position:center; display:flex; align-items:flex-end; justify-content:flex-start; padding:22px; }
.portrait span{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:#f6f4f0; }
.intro-split h1{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); font-weight:400; margin-bottom:24px; }
.intro-split p{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:1rem; color:#4a4a45; margin-bottom:18px; max-width:52ch; }

.story{ padding-block:80px; border-top:1px solid var(--line); }
.story .wrap{ max-width:760px; }
.story p{ font-size:1.15rem; margin-bottom:26px; }
.story .brand-line{ font-style:italic; }

.how{ padding-block:100px; border-top:1px solid var(--line); background:var(--ground-2); }
.how h2{ font-size:1.8rem; font-weight:400; margin-bottom:56px; text-align:center; }
.how .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.how h3{ font-size:1.1rem; font-weight:400; margin-bottom:10px; }
.how p{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.88rem; color:#4a4a45; }

/* ---------- Services / Pricing ---------- */
.tiers{ padding-block:60px 100px; }
.tiers .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); }
.tier{ padding:48px 36px; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.tier:last-child{ border-right:none; }
.tier.featured{ background:var(--ink); color:var(--ground); }
.tier .name{ font-size:1.4rem; font-weight:400; margin-bottom:10px; }
.tier .tagline{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.85rem; color:#6b6b64; margin-bottom:28px; min-height:44px; }
.tier.featured .tagline{ color:#c9c4b8; }
.tier .price{ font-size:2.1rem; font-weight:400; margin-bottom:6px; }
.tier .price-note{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.75rem; color:#6b6b64; margin-bottom:32px; font-style:italic; }
.tier.featured .price-note{ color:#c9c4b8; }
.tier .optional{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.82rem; color:#6b6b64; margin-bottom:28px; font-style:italic; }
.tier.featured .optional{ color:#c9c4b8; }
.tier ul{ list-style:none; margin-bottom:36px; flex:1; }
.tier li{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.88rem; padding-block:9px; border-top:1px solid var(--line); }
.tier.featured li{ border-top:1px solid #3a3a36; }
.tier li:last-child{ border-bottom:1px solid var(--line); }
.tier.featured li:last-child{ border-bottom:1px solid #3a3a36; }
.tier .btn{ font-size:0.78rem; padding:14px 0; display:block; text-align:center; width:100%; margin-top:auto; }
.tier.featured .btn{ border-color:var(--ground); }

.addons{ padding-block:70px; border-top:1px solid var(--line); text-align:center; }
.addons p{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.9rem; color:#4a4a45; font-style:italic; max-width:60ch; margin-inline:auto; }

.ai{ padding-block:80px; border-top:1px solid var(--line); }
.ai h2{ font-size:1.8rem; font-weight:400; text-align:center; margin-bottom:48px; }
.ai-grid{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:64px; }
.ai-grid>div{ padding-block:26px; border-top:1px solid var(--line); }
.ai h3{ font-size:1.25rem; font-weight:400; margin-bottom:10px; }
.ai p{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.92rem; color:#4a4a45; margin-bottom:12px; max-width:36rem; }
.ai .where{ color:var(--accent); font-weight:600; margin-bottom:0; }

/* ---------- Closing CTA band ---------- */
.cta-close{ padding-block:110px; text-align:center; background:var(--ink); color:var(--ground); }
.cta-close.light{ background:var(--ground-2); color:var(--ink); border-top:1px solid var(--line); }
.cta-close h2{ font-size:2rem; font-weight:400; max-width:560px; margin-inline:auto; }
.cta-close .btn{ margin-top:36px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:72px; padding-block:110px 120px; }
.contact-grid .intro-text{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.98rem; color:#4a4a45; margin-bottom:44px; max-width:44ch; }
.alt{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.88rem; color:#4a4a45; padding-top:32px; border-top:1px solid var(--line); }
.alt a{ display:inline-block; margin-top:14px; border-bottom:1px solid var(--ink); padding-bottom:2px; text-decoration:none; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; }

form{ display:flex; flex-direction:column; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
label{ font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:#6b6b64; }
input, select, textarea{
  font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.95rem;
  padding:14px 4px; border:none; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink);
}
textarea{ resize:vertical; min-height:100px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.submit{
  margin-top:14px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.8rem;
  letter-spacing:0.1em; text-transform:uppercase; padding:16px 34px;
  background:var(--ink); color:var(--ground); border:none; cursor:pointer; align-self:flex-start;
}
.form-status{
  font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.85rem;
  margin-top:8px; display:none;
}
.form-status.visible{ display:block; }
.form-status.success{ color:#4a6b45; }
.form-status.error{ color:#a04a3a; }
.submit:disabled{ opacity:0.6; cursor:wait; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ---------- Footer ---------- */
footer{ padding-block:48px; border-top:1px solid var(--line); }
footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.75rem; color:#6b6b64; letter-spacing:0.04em;
}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .pillars .grid{ grid-template-columns:1fr; gap:48px; }
  .work .grid{ grid-template-columns:1fr; }
  .hero{ min-height:560px; padding-block:90px 80px; }
  .intro-split .grid{ grid-template-columns:1fr; }
  .how .grid{ grid-template-columns:1fr 1fr; }
  .tiers .grid{ grid-template-columns:1fr; }
  .tier{ border-right:none; border-bottom:1px solid var(--line); }
  .ai-grid{ grid-template-columns:1fr; }
  .case{ grid-template-columns:1fr; }
  .case:nth-child(even) .panel{ order:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
}