:root{
  --ink:#0F2C35;
  --ink-2:#17404C;
  --copper:#B45A1C;
  --copper-hi:#E8913F;
  --paper:#FFFFFF;
  --mist:#F1F5F5;
  --text:#1E2B30;
  --radius:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:'Public Sans',system-ui,sans-serif;color:var(--text);background:var(--paper);line-height:1.65;font-size:1.0625rem}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;line-height:1.1;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--copper-hi);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* buttons */
.btn{display:inline-block;background:linear-gradient(135deg,var(--copper),var(--copper-hi));color:#fff;font-weight:600;text-decoration:none;padding:14px 26px;border:0;border-radius:var(--radius);cursor:pointer;font:600 1rem 'Public Sans',sans-serif;transition:filter .2s}
.btn:hover{filter:brightness(1.08)}
.btn-sm{padding:9px 18px;font-size:.95rem}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;filter:none}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:8px 24px;background:rgba(255,255,255,.96);border-bottom:1px solid #e3e9ea;backdrop-filter:blur(6px)}
.nav-logo img{height:56px;width:auto}
.nav nav{display:flex;align-items:center;gap:28px}
.nav nav a:not(.btn){text-decoration:none;font-weight:500}
.nav nav a:not(.btn):hover{color:var(--copper)}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.nav-toggle span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .2s}
.nav-toggle span:first-child{top:16px}.nav-toggle span:last-child{top:26px}
.nav-toggle[aria-expanded=true] span:first-child{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:last-child{transform:translateY(-5px) rotate(-45deg)}

/* hero */
.hero{padding:120px 24px 72px;background:var(--paper)}
.hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.hero-logo{width:100%;animation:shine 1.2s ease-out both}
@keyframes shine{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:800;color:var(--ink);margin-bottom:18px}
.hero p{max-width:34em;margin-bottom:28px;color:#3b4b50}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

/* sections */
section h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;color:var(--ink);margin-bottom:12px}
.lead{max-width:36em;color:#4a5a5f;margin-bottom:36px}
.services{background:var(--mist);padding:88px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;padding:26px;border-radius:var(--radius);border-top:3px solid var(--copper-hi)}
.card h3{font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:8px}
.card p{font-size:.98rem;color:#4a5a5f}
.card-feature{grid-column:span 3;background:var(--ink);border-top-color:var(--copper-hi);display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:center}
.card-feature h3{color:#fff;font-size:1.6rem}
.card-feature p{color:#d5e1e3;font-size:1.05rem}

.why{background:var(--ink);color:#fff;padding:88px 0}
.why h2{color:#fff;margin-bottom:36px}
.why-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.why-list h3{font-size:1.2rem;color:var(--copper-hi);margin-bottom:8px}
.why-list p{color:#d5e1e3;font-size:.98rem}

.contact{padding:88px 0;background:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.details{line-height:2}
.details a{text-decoration:none;font-weight:500}
.details a:hover{color:var(--copper)}
form{display:grid;gap:16px;background:var(--mist);padding:28px;border-radius:var(--radius)}
label{display:grid;gap:6px;font-weight:500;font-size:.95rem}
input,select,textarea{font:inherit;padding:12px 14px;border:1.5px solid #c5d1d3;border-radius:var(--radius);background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--copper);outline:none;box-shadow:0 0 0 3px rgba(232,145,63,.3)}
.form-status{min-height:1.4em;font-weight:500}
.form-status.ok{color:#1b6b3a}.form-status.err{color:#b3261e}

footer{background:#fff;border-top:1px solid #e3e9ea;text-align:center;padding:32px 24px;font-size:.9rem;color:#5a6a6f}
footer img{width:200px;margin:0 auto 10px}

@media (max-width:900px){
  .hero-inner,.contact-grid{grid-template-columns:1fr;gap:32px}
  .grid{grid-template-columns:1fr 1fr}
  .card-feature{grid-column:span 2;grid-template-columns:1fr}
  .why-list{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .nav-toggle{display:block}
  .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#fff;padding:8px 24px 20px;border-bottom:1px solid #e3e9ea;display:none}
  .nav nav.open{display:flex}
  .nav nav a{padding:12px 0}
  .grid,.why-list{grid-template-columns:1fr}
  .card-feature{grid-column:auto}
  .hero{padding-top:100px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- sparkle & motion ---------- */
.spark{position:absolute;pointer-events:none;background:linear-gradient(135deg,var(--copper),var(--copper-hi) 60%,#ffd9a8);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.hero{position:relative;overflow:hidden;background:#fff}
.hero-logo-wrap{position:relative;overflow:visible}
.hero-logo-wrap .spark{animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.hero-logo-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);mix-blend-mode:plus-lighter;transform:translateX(-120%);animation:glint 6s 1.4s ease-in-out infinite;pointer-events:none}
@keyframes glint{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}

/* headline lines rise once on load */
.hero h1,.hero p,.hero-cta{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero p{animation-delay:.15s}.hero-cta{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* buttons: shine sweep */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)}
.btn:hover::after{left:130%;transition:left .7s ease}
.btn-ghost::after{display:none}
.burst{position:fixed;z-index:50;width:14px;height:14px;pointer-events:none;background:linear-gradient(135deg,var(--copper-hi),#ffe2b8);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:burst .8s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.2) rotate(180deg);opacity:0}}

/* scroll reveal: a wipe, like a squeegee pass */
.js .reveal{clip-path:inset(0 100% 0 0);opacity:.2;transition:clip-path .7s cubic-bezier(.6,0,.2,1),opacity .7s}
.js .reveal.in{clip-path:inset(0 0 0 0);opacity:1}


/* cards: copper edge grows + sparkle on hover */
.card{position:relative;transition:transform .25s,box-shadow .25s}
.card:not(.card-feature):hover{transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(15,44,53,.35)}
.card:not(.card-feature)::before{content:"";position:absolute;right:16px;top:16px;width:16px;height:16px;background:var(--copper-hi);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);transform:scale(0) rotate(-90deg);transition:transform .35s}
.card:not(.card-feature):hover::before{transform:scale(1) rotate(0)}

/* dark section: slow drifting sparkles */
.why{position:relative;overflow:hidden}
.why .wrap{position:relative;z-index:1}
.why .spark{background:rgba(232,145,63,.55);animation:drift 9s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0) scale(.6);opacity:.2}50%{transform:translateY(-24px) scale(1);opacity:.9}}

/* ---------- mobile overflow fix ---------- */
.hero-inner>*,.contact-grid>*{min-width:0}
input,select,textarea{width:100%;min-width:0;max-width:100%}
.details{overflow-wrap:anywhere}
@media (max-width:900px){
  .hero-inner,.contact-grid{grid-template-columns:minmax(0,1fr)}
}
body{overflow-x:clip}
@media (max-width:700px){.nav nav a.btn{padding:11px 22px;margin-top:10px}}

/* founder */
.founder{display:flex;align-items:center;gap:18px;margin-top:32px}
.founder img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center 20%;border:3px solid #fff;box-shadow:0 0 0 3px var(--copper-hi),0 8px 20px -8px rgba(15,44,53,.4);flex:none}
.founder strong{display:block;font:800 1.3rem/1.2 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.founder span{display:inline-block;margin-top:4px;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}

/* larger founder photo */
.founder{flex-direction:column;align-items:flex-start;gap:16px;margin-top:36px}
.founder img{width:220px;height:220px}
.founder strong{font-size:1.5rem}
@media (max-width:700px){.founder img{width:180px;height:180px}}

/* ---------- gallery page ---------- */
.nav nav a.current{color:var(--copper);font-weight:600}
.gallery-head{padding:130px 0 8px;background:#fff}
.gallery-head h1{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;color:var(--ink);margin-bottom:12px}
.gallery{padding:24px 0 72px;background:#fff}
.gallery-grid{columns:3 280px;column-gap:16px}
.gallery-grid figure{break-inside:avoid;margin:0 0 16px}
.gallery-grid button{display:block;width:100%;padding:0;border:0;background:var(--mist);border-radius:var(--radius);overflow:hidden;cursor:zoom-in;position:relative;min-height:120px}
.gallery-grid img{width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gallery-grid button:hover img{transform:scale(1.04)}
.gallery-grid button::after{content:"";position:absolute;inset:0;border-radius:var(--radius);box-shadow:inset 0 0 0 0 var(--copper-hi);transition:box-shadow .25s;pointer-events:none}
.gallery-grid button:hover::after,.gallery-grid button:focus-visible::after{box-shadow:inset 0 0 0 4px var(--copper-hi)}
.gallery-cta{background:var(--ink);color:#fff;text-align:center;padding:64px 0}
.gallery-cta h2{color:#fff;margin-bottom:22px}
footer a{color:var(--copper);font-weight:600}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(15,44,53,.94);display:flex;align-items:center;justify-content:center;padding:56px 64px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.lb-btn{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer;transition:background .2s}
.lb-btn:hover{background:var(--copper)}
.lb-close{top:14px;right:14px}.lb-prev{left:12px;top:50%;transform:translateY(-50%)}.lb-next{right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:700px){.lightbox{padding:64px 12px}.gallery-head{padding-top:104px}.gallery-grid{columns:2 140px;column-gap:10px}.gallery-grid figure{margin-bottom:10px}}

/* estates */
.estates{padding:72px 0;background:#fff}
.estates .lead{margin-bottom:28px}
.estate-list{list-style:none;display:flex;flex-wrap:wrap;gap:14px}
.estate-list li{display:flex;align-items:center;gap:12px;padding:14px 22px;border:1.5px solid #d9e2e4;border-radius:999px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink);transition:border-color .25s,transform .25s,box-shadow .25s}
.estate-list li::before{content:"";flex:none;width:16px;height:16px;background:linear-gradient(135deg,var(--copper),var(--copper-hi));clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.estate-list li:hover{border-color:var(--copper-hi);transform:translateY(-3px);box-shadow:0 10px 22px -12px rgba(15,44,53,.35)}
.estate-list li:hover::before{animation:twinkle 1s ease-in-out}
@media (max-width:700px){.estates{padding:56px 0}.estate-list li{width:100%;border-radius:var(--radius)}}