/*
Theme Name: Mosh Mallorca
Theme URI: https://moshmallorca.com
Author: Mosh Mallorca
Description: Custom theme for Mosh Mallorca — development land & investment opportunities. Self-hosted Span / Neue Haas Display / IBM Plex Mono. Light editorial design with refined motion.
Version: 1.1.0
License: All rights reserved
Text Domain: mosh-mallorca
*/

/* ===========================================================
   Mosh Mallorca — rebuild prototype
   Captured from moshmallorca.net (Wix) on 2026-05-20
   Fonts: DM Serif Display (headlines), Inter (body),
          IBM Plex Mono (labels) — free Google Font substitutes
   =========================================================== */

/* === Self-hosted brand fonts === */
@font-face{font-family:'Span';src:url('assets/fonts/Span-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Span';src:url('assets/fonts/Span-300i.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
/* Cormorant kept as fallback if Span fails to load (demo license) */
@font-face{font-family:'Cormorant';src:url('assets/fonts/Cormorant-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('assets/fonts/Cormorant-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('assets/fonts/NeueHaas-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('assets/fonts/NeueHaas-300i.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('assets/fonts/NeueHaas-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('assets/fonts/NeueHaas-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('assets/fonts/NeueHaas-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('assets/fonts/NeueHaas-500i.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('assets/fonts/NeueHaas-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('assets/fonts/NeueHaas-700i.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --peach:#FEB264;
  --peach-dark:#f0a04b;
  --peach-deep:#d97f2e;
  --ink:#111111;
  --cream:#ffffff;
  --muted:#6b6b6b;
  --line:#e7e3da;
  --serif:'Span', 'Cormorant', Georgia, serif;
  --sans:'Neue Haas Grotesk', system-ui, Arial, Helvetica, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --cond:'Neue Haas Grotesk', system-ui, Arial, sans-serif;
  --dark:#1c1a17;
  --maxw:1280px;
  --pad:clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-weight:300;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Header / nav ---------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:34px var(--pad) 0;
}
.nav{display:flex;gap:40px}
.nav a{
  font-family:var(--sans);
  color:var(--peach);
  font-size:18px;font-weight:400;
  letter-spacing:.2px;
  position:relative;
  transition:color .35s ease;
}
.nav a:hover{color:var(--peach-deep)}
.nav a::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--peach-deep);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.logo{
  width:84px;height:84px;display:block;line-height:0;
}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
.logo .mark,.logo .sub{display:none}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) 8vh;
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0;background:#9aa7a0;overflow:hidden}
.hero__media video,.hero__media img{
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 22s ease-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28))}
.hero__inner{position:relative;z-index:2;max-width:1100px}
.hero__eyebrow{
  display:flex;align-items:center;gap:16px;margin-bottom:24px;
  font-family:var(--cond);font-size:14px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.hero__eyebrow::before{content:"";width:46px;height:1px;background:var(--peach)}
.hero h1{
  font-family:var(--serif);
  color:var(--peach);
  font-weight:400;
  font-size:clamp(40px, 6.2vw, 92px);
  line-height:1.02;
  letter-spacing:.5px;
  text-shadow:0 2px 18px rgba(0,0,0,.18);
}
.hero h1 em{font-style:italic}
.btn{
  display:inline-block;margin-top:34px;
  background:var(--peach);color:#fff;
  font-family:var(--cond);font-size:16px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  padding:16px 34px;border-radius:2px;
  transition:background-color .4s ease, transform .4s ease;
}
.btn:hover{background:var(--peach-deep);transform:translateY(-1px)}
.scroll-cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--cond);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.scroll-cue .line{width:1px;height:48px;background:rgba(255,255,255,.55);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--peach);animation:scrolldown 2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes scrolldown{0%{top:-50%}60%,100%{top:100%}}

/* placeholder badge so you know where assets go */
.asset-note{
  position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.55);color:#fff;font-family:var(--mono);
  font-size:13px;padding:8px 14px;border-radius:4px;pointer-events:none;
}

/* ---------- Section shell ---------- */
.section{padding:clamp(64px,9vw,130px) var(--pad)}
.wrap{max-width:var(--maxw);margin:0 auto}

/* ---------- Services / about ---------- */
.services{display:grid;grid-template-columns:0.9fr 1.4fr;gap:clamp(30px,6vw,90px)}
.eyebrow{font-family:var(--mono);font-size:14px;letter-spacing:.5px;color:var(--muted);margin-bottom:18px}
.services__title{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1.05}
.services__list{border-top:1px solid var(--peach)}
.service{
  display:grid;grid-template-columns:60px 130px 1fr;gap:18px;
  padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
}
.service .num{font-family:var(--mono);font-size:15px;color:var(--ink)}
.service .name{font-family:var(--mono);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;padding-top:1px}
.service .desc{font-size:16px;color:#2b2b2b;line-height:1.6;max-width:60ch}

/* ---------- Services (card style) ---------- */
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:clamp(36px,5vw,56px);flex-wrap:wrap}
.svc-head__title{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,60px);line-height:1.04;margin-top:12px}
.svc-head__title em{font-style:italic;color:var(--peach)}
.svc-head__note{font-size:14px;color:var(--muted);max-width:34ch;text-align:right;line-height:1.6}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{
  position:relative;background:#fff;border:1px solid var(--line);
  padding:34px 30px 30px;display:flex;flex-direction:column;overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.svc-card:hover{transform:translateY(-6px)}
.svc-card::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--peach);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.svc-card:hover::after,.svc-card.is-active::after{transform:scaleX(1)}
.svc-card__num{position:absolute;top:22px;right:26px;font-family:var(--serif);font-size:54px;line-height:1;color:rgba(0,0,0,.06)}
.svc-card__icon{width:48px;height:48px;border:1px solid var(--peach);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--peach)}
.svc-card__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5}
.svc-card__title{font-family:var(--serif);font-size:26px;margin:24px 0 14px}
.svc-card__body{font-size:14.5px;line-height:1.62;color:#3a3a3a;margin-bottom:26px}
.svc-card__cta{margin-top:auto;font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--peach);display:inline-flex;align-items:center;gap:9px;transition:color .35s ease}
.svc-card__cta:hover{color:var(--peach-deep)}
.svc-card__cta .arr,.listing__cta .arr{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.svc-card__cta:hover .arr,.listing__cta:hover .arr{transform:translateX(5px)}

/* ---------- Current Listings (rich cards) ---------- */
.listings__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(30px,4vw,46px);flex-wrap:wrap}
.listings__head h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,46px)}
.listings__head a{font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:color .35s ease}
.listings__head a:hover{color:var(--peach-deep)}
.listings__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:30px}
.listing{display:flex;flex-direction:column}
.listing__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#cdd6cf,#9fb0a6)}
.listing__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.listing:hover .listing__media img{transform:scale(1.05)}
.listing__tag{position:absolute;top:16px;left:16px;background:var(--peach);color:#fff;font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:6px 12px}
.listing__cat{position:absolute;bottom:14px;left:16px;color:#fff;font-family:var(--cond);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.listing__media .ph-note{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.4);padding:5px 9px}
.listing__loc{font-family:var(--cond);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;display:flex;align-items:center;gap:6px}
.listing__loc svg{width:13px;height:13px;stroke:var(--peach);fill:none;stroke-width:1.5}
.listing__name{font-family:var(--serif);font-size:25px;margin-bottom:18px;line-height:1.1}
.listing__stats{display:flex;gap:28px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.listing__stats .k{font-family:var(--cond);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.listing__stats .v{font-family:var(--serif);font-size:19px;margin-top:3px}
.listing__foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:14px}
.listing__price{font-family:var(--serif);font-size:22px}
.listing__cta{font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--peach);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color .35s ease}
.listing__cta:hover{color:var(--peach-deep)}

/* ---------- Contact ---------- */
.contact{background:#faf7f1}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.contact__title{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,54px);line-height:1.05;margin:14px 0 18px}
.contact__title em{font-style:italic;color:var(--peach)}
.contact__lead{font-size:16px;line-height:1.7;color:#3a3a3a;max-width:42ch;margin-bottom:32px}
.contact__points{list-style:none;display:flex;flex-direction:column;gap:14px}
.contact__points a{font-family:var(--cond);font-size:17px;letter-spacing:.4px;color:var(--ink);display:inline-flex;align-items:center;gap:11px;transition:color .35s ease}
.contact__points a:hover{color:var(--peach-deep)}
.contact__points svg{width:16px;height:16px;stroke:var(--peach);fill:none;stroke-width:1.5}
.contact__form{display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--cond);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid #d8d2c6;
  padding:10px 2px;transition:border-color .35s ease;border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--peach)}
.field textarea{resize:vertical;min-height:96px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form-btn{
  align-self:flex-start;margin-top:6px;cursor:pointer;
  background:var(--peach);color:#fff;border:none;
  font-family:var(--cond);font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  padding:15px 36px;border-radius:2px;transition:background-color .4s ease, transform .4s ease;
}
.form-btn:hover{background:var(--peach-deep);transform:translateY(-1px)}
.form-success{font-family:var(--serif);font-size:22px;line-height:1.5;color:var(--ink)}
.form-success strong{color:var(--peach-deep);font-style:italic}

/* ---------- About + framed photo ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.about__title{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,56px);line-height:1.05;margin:14px 0 22px}
.about__body{font-size:16px;color:#2b2b2b;line-height:1.7;max-width:48ch}
.stats{display:flex;gap:clamp(24px,4vw,56px);margin-top:38px;flex-wrap:wrap}
.stat .num{font-family:var(--serif);font-size:clamp(34px,4vw,52px);line-height:1;color:var(--ink)}
.stat .num em{color:var(--peach);font-style:normal}
.stat .lab{font-family:var(--cond);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-top:8px}
.framed{position:relative;padding:18px 18px 0 0}
.framed::before{content:"";position:absolute;top:0;right:0;width:72%;height:78%;border:1px solid var(--peach);z-index:0}
.framed__img{position:relative;z-index:1;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,#cdd6cf,#9fb0a6)}
.framed__img img{width:100%;height:100%;object-fit:cover}
.framed__img .ph-note{position:absolute;bottom:12px;left:12px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.4);padding:5px 9px}
.framed__badge{
  position:absolute;z-index:2;left:0;bottom:34px;
  background:var(--peach);color:#fff;padding:16px 22px;
}
.framed__badge .big{font-family:var(--serif);font-size:24px;line-height:1}
.framed__badge .small{font-family:var(--cond);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-top:5px}

/* ---------- Featured spotlight (dark) ---------- */
.featured{background:var(--dark);color:#f4f1ea}
.featured .eyebrow{color:var(--peach)}
.feat{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch}
.feat__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#3a4742,#222a26)}
.feat__media img{width:100%;height:100%;object-fit:cover}
.feat__media .ph-note{position:absolute;bottom:12px;left:12px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.5);padding:5px 9px}
.feat__panel{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.feat__tag{display:inline-block;align-self:flex-start;font-family:var(--cond);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--dark);background:var(--peach);padding:6px 12px;margin-bottom:20px}
.feat__loc{font-family:var(--cond);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#c8c2b6}
.feat__name{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,50px);line-height:1.05;margin:10px 0 18px;color:#fff}
.feat__desc{font-size:15px;line-height:1.7;color:#ded9cf;max-width:46ch}
.feat__row{display:flex;gap:34px;margin:26px 0 30px;flex-wrap:wrap}
.feat__row .k{font-family:var(--cond);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#9b958a}
.feat__row .v{font-family:var(--serif);font-size:22px;color:#fff;margin-top:4px}
.btn-light{
  display:inline-block;align-self:flex-start;
  background:var(--peach);color:#fff;font-family:var(--cond);font-size:15px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;padding:14px 26px;border-radius:2px;
  transition:background .2s, transform .2s;
}
.btn-light:hover{background:var(--peach-dark);transform:translateY(-1px)}

/* ---------- Marquee ribbon ---------- */
.marquee{
  overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;margin:clamp(20px,4vw,40px) 0 clamp(40px,6vw,70px);
}
.marquee__track{display:inline-flex;align-items:center;animation:marquee 38s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--serif);font-size:clamp(22px,3vw,38px);color:var(--ink);
  padding:0 6px;
}
.marquee__track .sep{color:var(--peach);font-family:var(--serif);padding:0 26px;font-size:clamp(16px,2vw,24px)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Editorial statement ---------- */
.statement{padding:clamp(70px,11vw,150px) var(--pad);text-align:center}
.statement .mark{display:inline-block;width:30px;height:1px;background:var(--peach);margin:0 auto 30px}
.statement p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.6vw,48px);line-height:1.28;
  max-width:18ch;margin:0 auto;color:var(--ink);
}
.statement p em{font-style:italic;color:var(--peach)}

/* ---------- Portfolio highlights ---------- */
.ph__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:38px;flex-wrap:wrap;gap:14px}
.ph__head h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,46px)}
.ph__head a{font-family:var(--mono);font-size:14px;color:var(--ink);border-bottom:1px solid var(--peach);padding-bottom:2px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.card:hover{transform:translateY(-6px)}
.card .thumb{aspect-ratio:3/4;background:linear-gradient(135deg,#c9d3cd,#aeb9b2);overflow:hidden;position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.card:hover .thumb img{transform:scale(1.06)}
.ph__head a{transition:color .2s}
.ph__head a:hover{color:var(--peach)}
.card .thumb .ph-note{position:absolute;bottom:10px;left:10px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:4px 8px;border-radius:3px}
.card .loc{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
.card .pname{font-family:var(--serif);font-size:24px;margin-bottom:8px}
.card .spec{font-size:14px;color:#3a3a3a;line-height:1.5}
.card .price{font-family:var(--mono);font-size:15px;margin-top:10px}

/* ---------- Footer ---------- */
.footer{background:#111;color:#f4f1ea;padding:clamp(56px,8vw,96px) var(--pad)}
.footer .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.footer h4{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--peach);margin-bottom:14px}
.footer p{font-size:15px;line-height:1.7;color:#ded9cf}
.footer a:hover{color:var(--peach)}
.footer .brand{font-family:var(--serif);font-size:22px;color:#fff;margin-top:6px}

/* ---------- Portfolio page ---------- */
.pf-hero{padding:140px var(--pad) 40px}
.pf-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(54px,8vw,110px);line-height:1}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;padding:20px var(--pad) clamp(70px,10vw,120px);max-width:1400px;margin:0 auto}
.tile{position:relative}
.tile .img{aspect-ratio:16/10;background:linear-gradient(135deg,#cdd6cf,#9fb0a6);overflow:hidden;filter:saturate(.9)}
.tile .img img{width:100%;height:100%;object-fit:cover}
.tile .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:14px}
.tile .left .idx{font-family:var(--mono);font-size:13px;color:var(--muted)}
.tile .left .t{font-family:var(--serif);font-size:26px;margin:4px 0 6px}
.tile .left .s{font-size:14px;color:#3a3a3a;line-height:1.5;max-width:46ch}
.tile .price{font-family:var(--mono);font-size:15px;white-space:nowrap;padding-top:22px}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .marquee__track,.hero__media img,.hero__media video,.scroll-cue .line::after{animation:none!important}
}

/* ---------- Immersive portfolio showcase ---------- */
.showcase{display:flex;flex-direction:column;gap:0;padding:10px 0 clamp(70px,10vw,120px)}
.proj{
  position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(24px,5vw,80px);
  padding:clamp(40px,7vw,96px) var(--pad);
}
.proj:nth-child(even){direction:rtl}
.proj:nth-child(even) > *{direction:ltr}
.proj__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;
  background:linear-gradient(135deg,#cdd6cf,#9fb0a6);
}
.proj__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.proj:hover .proj__media img{transform:scale(1.05)}
.proj__media .ph-note{position:absolute;bottom:12px;left:12px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.4);padding:5px 9px}
.proj__idx{font-family:var(--mono);font-size:14px;color:var(--peach);letter-spacing:1px}
.proj__name{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,56px);line-height:1.04;margin:10px 0 18px}
.proj__spec{font-size:15px;color:#3a3a3a;line-height:1.6;max-width:42ch}
.proj__price{font-family:var(--mono);font-size:16px;margin-top:16px;display:inline-block;border-bottom:1px solid var(--peach);padding-bottom:3px}

/* Span Light is the headline face — render all serif headings at weight 300 */
.hero h1,.pf-hero h1,.about__title,.svc-head__title,.svc-card__title,.listings__head h2,.listing__name,.contact__title,.proj__name,.ph__head h2,.services__title,.framed__badge .big,.footer .brand,.form-success{font-weight:300}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .services{grid-template-columns:1fr;gap:36px}
  .service{grid-template-columns:46px 1fr;}
  .service .desc{grid-column:1 / -1}
  .cards{grid-template-columns:1fr;gap:30px}
  .footer .wrap{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .nav{gap:22px}
  .nav a{font-size:15px}
  .site-header{padding-top:22px}
  .logo{width:64px;height:64px}
  .logo .mark{font-size:22px}
  .tile .meta{flex-direction:column}
  .tile .price{padding-top:0}
  .proj{grid-template-columns:1fr;gap:20px;padding-left:var(--pad);padding-right:var(--pad)}
  .proj:nth-child(even){direction:ltr}
  .about{grid-template-columns:1fr;gap:30px}
  .stats{gap:28px}
  .svc-grid{grid-template-columns:1fr;gap:18px}
  .svc-head{align-items:flex-start}
  .svc-head__note{text-align:left}
  .contact__grid{grid-template-columns:1fr;gap:36px}
  .field-row{grid-template-columns:1fr;gap:22px}
}


/* === scroll-speed override (fast reveals) === */
.reveal{transition:opacity .35s ease, transform .35s ease}
.svc-card,.svc-card::after,.btn,.nav a::after,.listing__media img,.svc-card__cta .arr,.listing__cta .arr,.contact__points a,.listings__head a,.framed__img img,.proj__media img,.card .thumb img{transition-duration:.25s !important}
html{scroll-behavior:auto}


/* === smaller hero + mobile polish === */
.hero h1{font-size:clamp(30px,4.4vw,62px) !important;line-height:1.08;letter-spacing:.3px}
.about__title,.svc-head__title,.contact__title{font-size:clamp(28px,3.4vw,48px) !important}
.pf-hero h1{font-size:clamp(48px,7vw,92px) !important}

@media (max-width:760px){
  .hero h1{font-size:clamp(26px,7.5vw,42px) !important}
  .hero__eyebrow{font-size:11px;letter-spacing:2.4px;gap:12px}
  .hero__eyebrow::before{width:30px}
  .btn{padding:13px 26px;font-size:14px;letter-spacing:1.6px}
  .scroll-cue{display:none}
  .pf-hero{padding:120px var(--pad) 24px}
  .pf-hero h1{font-size:clamp(40px,12vw,68px) !important}
  .section{padding:clamp(48px,11vw,80px) var(--pad)}
  .about__title{font-size:clamp(24px,6.4vw,34px) !important;margin:8px 0 14px}
  .about__body{font-size:15px;line-height:1.65}
  .stats{gap:22px 28px;margin-top:28px}
  .stat .num{font-size:32px}
  .stat .lab{font-size:11px;letter-spacing:1.2px}
  .framed__badge{padding:12px 16px;left:0;bottom:24px}
  .framed__badge .big{font-size:20px}
  .framed__badge .small{font-size:11px;letter-spacing:1.5px}
  .svc-head__title{font-size:clamp(28px,7vw,40px) !important}
  .svc-head__note{font-size:13px}
  .svc-card{padding:24px 22px}
  .svc-card__num{font-size:42px;top:16px;right:18px}
  .svc-card__title{font-size:22px;margin:18px 0 12px}
  .svc-card__body{font-size:14px}
  .listings__head h2{font-size:clamp(26px,6.4vw,36px) !important}
  .listings__grid{gap:24px}
  .listing__name{font-size:22px;margin-bottom:14px}
  .listing__stats{gap:18px;flex-wrap:wrap}
  .listing__stats .v{font-size:17px}
  .listing__price{font-size:20px}
  .listing__foot{flex-direction:column;align-items:flex-start;gap:12px}
  .proj{padding:36px var(--pad)}
  .proj__name{font-size:26px;margin:6px 0 12px}
  .proj__spec{font-size:14px}
  .contact__title{font-size:clamp(26px,7vw,40px) !important;margin:8px 0 14px}
  .contact__lead{font-size:15px;margin-bottom:24px}
  .form-btn{width:100%;padding:15px 24px}
  .footer{padding:48px var(--pad) 56px}
  .footer .wrap{gap:24px}
  .footer p,.footer a{font-size:14px}
  .footer .brand{font-size:18px}
  .logo{width:54px;height:54px}
  .nav{gap:18px}
  .nav a{font-size:13px}
  .site-header{padding:18px var(--pad) 0}
}

@media (max-width:420px){
  .hero h1{font-size:30px !important}
  .stats{gap:18px}
}


/* smaller hero button override */
.hero .btn{padding:11px 24px !important;font-size:13px !important;letter-spacing:1.6px !important;margin-top:24px !important}
@media (max-width:760px){.hero .btn{padding:10px 20px !important;font-size:12px !important}}