/* Crystal Point Consulting: styles. Layout inspired by the Kassa template; all code, copy and images are our own. */
:root{
  --navy:#393E41;--navy-d:#2B2F32;--navy-dd:#1E2123;--ink:#22282A;--muted:#555D66;--line:#DDE4E0;
  --bg:#FFFFFF;--soft:#F6F8F5;--warm:#EEF2EF;--red:#4D6E5F;--red-d:#3B5649;--leaf:#9DBBAB;--leaf-d:#2C541D;--sage:#6F9283;
  --on-dark:#FFFFFF;--on-dark-2:rgba(255,255,255,.8);--r:6px;--r-s:4px;--gut:clamp(20px,4vw,48px);--hdr:84px;
  --ease:cubic-bezier(.23,1,.32,1);
  --spring:linear(0,0.034,0.114,0.214,0.319,0.421,0.514,0.597,0.669,0.73,0.781,0.824,0.859,0.887,0.91,0.929,0.944,0.956,0.965,0.973,0.979,0.983,0.987,0.99,0.992,0.994,0.995,0.996,0.997,0.998,0.998,0.999,1);
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--slab:'Cormorant Garamond','Playfair Display',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 20px)}
body{margin:0;font:400 1.125rem/1.65 var(--sans);letter-spacing:.003em;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--navy);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--slab);color:var(--ink);margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.8vw,4.8rem);line-height:1.06;letter-spacing:-.025em;font-weight:600}
h2{font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.12;letter-spacing:-.01em;font-weight:600}
h3{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.25;letter-spacing:0;font-weight:600}
h4{font-size:1.2rem;line-height:1.3;font-weight:600}
p{margin:0;text-wrap:pretty}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(64px,9vw,120px)}
.sec.soft{background:var(--soft)}.sec.warm{background:var(--warm)}
.sec.dark{background:var(--navy-d);color:var(--on-dark)}.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff}.sec.dark p{color:var(--on-dark-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--sage);outline-offset:3px;border-radius:6px}

/* header (glass) */
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr);background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(57,62,65,.1)}
.hdr .wrap{height:100%;max-width:1440px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.brand svg,.brand img{width:44px;height:auto;flex-shrink:0}
.brand b{font:600 1.35rem/1 var(--slab);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.brand b i{font-style:normal;color:var(--red)}
.nav{display:flex;align-items:center;gap:0}
.nav>a,.nav>.dd>button{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;background:transparent;border-radius:3px;color:var(--ink);font:600 .93rem var(--sans);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .2s ease,color .2s ease,scale .16s var(--ease)}
.nav a[aria-current="page"],.nav .dd.cur>button{background:rgba(57,62,65,.09);color:var(--navy)}
.nav a:active,.nav button:active{scale:.96}
.dd{position:relative}
.dd>button svg{transition:rotate .25s var(--ease)}
.dd.open>button svg{rotate:180deg}
.dd-m{position:absolute;left:50%;top:calc(100% + 10px);min-width:260px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -16px rgba(30,33,35,.28);opacity:0;visibility:hidden;translate:-50% -6px;scale:.98;transform-origin:top center;transition:opacity .18s ease,translate .25s var(--ease),scale .25s var(--ease),visibility 0s .18s}
.dd.open .dd-m{opacity:1;visibility:visible;translate:-50% 0;scale:1;transition:opacity .18s ease,translate .3s var(--ease),scale .3s var(--ease),visibility 0s}
.dd-m a{display:block;padding:12px 14px;border-radius:10px;color:var(--ink);font-weight:600;font-size:.97rem;text-decoration:none}
.dd-m a small{display:block;font-weight:400;color:var(--muted);font-size:.85rem}
.hdr-cta{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.nav>a:hover,.nav>.dd>button:hover{background:rgba(57,62,65,.07)}.dd-m a:hover{background:var(--soft)}}

/* buttons, tags */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:6px 6px 6px 24px;border-radius:4px;border:0;background:var(--navy);color:#fff;font:700 1rem var(--sans);text-decoration:none;cursor:pointer;transition:background-color .2s ease,scale .16s var(--ease)}
.btn i{width:42px;height:42px;border-radius:10px;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;font-style:normal;transition:translate .3s var(--ease)}
.btn:active{scale:.96}
.btn.red{background:var(--red)}.btn.red i{color:var(--red)}
.btn.light{background:#fff;color:var(--navy)}.btn.light i{background:var(--navy);color:#fff}
.btn.sm{min-height:46px;padding-left:18px;font-size:.93rem}.btn.sm i{width:34px;height:34px}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}.btn.ghost i{background:var(--navy);color:#fff}
.sec.dark .btn.ghost,.hero .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}.sec.dark .btn.ghost i,.hero .btn.ghost i{background:#fff;color:var(--navy)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--navy-d)}.btn.red:hover{background:var(--red-d)}.btn.light:hover{background:var(--soft)}.btn:hover i{translate:3px 0}}
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:3px;background:rgba(57,62,65,.08);color:var(--navy);font:700 .8rem var(--sans);letter-spacing:.06em;text-transform:uppercase}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.dark .tag,.hero .tag{background:rgba(255,255,255,.14);color:#fff}
.tag.plain::before{display:none}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--muted);max-width:60ch}
.dark .lead,.hero .lead{color:var(--on-dark-2)}
.head{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.head.c{margin-inline:auto;text-align:center;align-items:center}.head.c .tag{align-self:center}

/* hero */
.hero-w{padding:14px var(--gut) 0}
.hero{position:relative;max-width:1440px;margin:0 auto;border-radius:8px;overflow:hidden;color:#fff;isolation:isolate;min-height:min(780px,calc(100svh - var(--hdr) - 28px));display:flex;align-items:flex-end;background:var(--navy-d)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(30,33,35,.92) 0%,rgba(30,33,35,.7) 42%,rgba(30,33,35,.15) 100%),linear-gradient(0deg,rgba(30,33,35,.65),transparent 45%)}
.hero .in{width:100%;max-width:1240px;margin:0 auto;padding:clamp(120px,16vh,200px) var(--gut) clamp(32px,5vw,56px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.hero .txt{display:flex;flex-direction:column;gap:26px;max-width:720px}
.hero h1{color:#fff}
.hero .acts,.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .card{flex-shrink:0;width:300px;padding:20px;border-radius:20px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.28);display:flex;flex-direction:column;gap:6px}
.hero .card small{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-2);font-weight:700}
.hero .card a{color:#fff;font:700 1.45rem/1.2 var(--sans);text-decoration:none}
.hero .card p{font-size:.92rem;color:var(--on-dark-2);line-height:1.45}
.page-hero{padding:clamp(40px,6vw,80px) 0 clamp(36px,5vw,64px);background:var(--soft)}
.page-hero .wrap{display:flex;flex-direction:column;gap:20px}
.crumbs{font-size:.88rem;color:var(--muted)}.crumbs a{color:var(--muted)}.crumbs span{margin-inline:8px;opacity:.6}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-top:-34px;position:relative;z-index:3;box-shadow:0 18px 40px -22px rgba(30,33,35,.3)}
.trust div{padding:22px 24px;display:flex;gap:14px;align-items:center;font-weight:600;font-size:.98rem;line-height:1.35}
.trust div+div{border-left:1px solid var(--line)}
.trust svg{flex-shrink:0;color:var(--red)}
@media (max-width:899px){.trust{grid-template-columns:1fr 1fr}.trust div:nth-child(3){border-left:0}.trust div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.trust{grid-template-columns:1fr;margin-top:-24px}.trust div+div{border-left:0;border-top:1px solid var(--line)}}

/* intro / split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.split.top{align-items:start}
.split .copy{display:flex;flex-direction:column;gap:22px}
.pic{border-radius:var(--r);overflow:hidden;position:relative;background:var(--soft)}
.pic img{width:100%;height:100%;object-fit:cover}
.pic.tall{aspect-ratio:4/5}.pic.wide{aspect-ratio:3/2}.pic.sq{aspect-ratio:1}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.ticks li::before{content:"";flex-shrink:0;width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2123' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:899px){.split{grid-template-columns:1fr}.split .pic{order:-1}}

/* photo cards with caption */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1099px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:699px){.g2,.g3,.g4{grid-template-columns:1fr}}
.pcard{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;color:var(--ink);isolation:isolate}
.pcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:scale .8s var(--ease)}
.pcard .cap{position:absolute;left:12px;right:12px;bottom:12px;padding:20px;border-radius:14px;background:rgba(255,255,255,.96);display:flex;flex-direction:column;gap:8px}
.pcard .cap b{font:700 1.15rem/1.25 var(--sans);letter-spacing:-.01em}.pcard .cap p{font-size:.95rem;line-height:1.5;color:var(--muted)}
.pcard .cap em{font:700 .8rem var(--sans);font-style:normal;color:var(--red);letter-spacing:.06em}
@media (hover:hover) and (pointer:fine){.pcard:hover>img{scale:1.05}}

/* service cards */
.scard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .2s ease,translate .3s var(--ease),box-shadow .3s ease}
.scard .pic{border-radius:0;aspect-ratio:3/2}.scard .pic img{transition:scale .8s var(--ease)}
.scard .b{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.scard p{color:var(--muted);font-size:1rem;line-height:1.6}
.scard .more{margin-top:auto;padding-top:6px;font-weight:700;color:var(--navy);display:flex;gap:8px;align-items:center}
.scard.plain .b{padding:28px}
.ic{width:52px;height:52px;border-radius:14px;background:rgba(57,62,65,.09);color:var(--navy);display:flex;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.scard:hover{border-color:var(--navy);translate:0 -4px;box-shadow:0 22px 44px -26px rgba(30,33,35,.45)}.scard:hover .pic img{scale:1.05}}
.scard:active{scale:.985}

/* process */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{padding:28px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:12px}
.step::before{counter-increment:s;content:"Step " counter(s);align-self:flex-start;padding:5px 12px;border-radius:3px;background:rgba(157,187,171,.18);color:var(--leaf);font:700 .78rem var(--sans);letter-spacing:.06em;text-transform:uppercase}
.step b{font:700 1.2rem/1.3 var(--sans);color:#fff}
.light-steps .step{background:#fff;border-color:var(--line)}.light-steps .step b{color:var(--ink)}.light-steps .step::before{background:rgba(57,62,65,.09);color:var(--navy)}
@media (max-width:999px){.steps{grid-template-columns:1fr 1fr}}@media (max-width:620px){.steps{grid-template-columns:1fr}}

/* values / principles */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.val{padding:28px 24px 32px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.val b{font:700 1.15rem var(--sans);text-transform:uppercase;letter-spacing:.04em;color:var(--navy)}
.val span{font:700 .85rem var(--sans);color:var(--red)}
.val p{font-size:1rem;color:var(--muted);line-height:1.6}
@media (max-width:1099px){.vals{grid-template-columns:repeat(2,1fr)}}@media (max-width:620px){.vals{grid-template-columns:1fr}}

/* area cards */
.acard{position:relative;border-radius:var(--r);overflow:hidden;min-height:440px;color:#fff;isolation:isolate;display:flex;align-items:flex-end;text-decoration:none}
.acard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:scale .8s var(--ease)}
.acard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(30,33,35,.92),rgba(30,33,35,.15) 70%)}
.acard .b{padding:28px;display:flex;flex-direction:column;gap:12px}.acard h3{color:#fff}.acard p{color:var(--on-dark-2);font-size:1rem;line-height:1.55}
.acard .more{font-weight:700;display:flex;gap:8px;align-items:center}
@media (hover:hover) and (pointer:fine){.acard:hover>img{scale:1.06}}

/* band, cta */
.cta{border-radius:8px;background:var(--navy);color:#fff;padding:clamp(36px,6vw,72px);display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-80px;top:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(closest-side,rgba(157,187,171,.28),transparent)}
.cta .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}.cta .btn.ghost i{background:#fff;color:var(--navy)}.cta h2{color:#fff}.cta p{color:var(--on-dark-2)}.cta .acts{justify-content:flex-end;position:relative}
@media (max-width:899px){.cta{grid-template-columns:1fr}.cta .acts{justify-content:flex-start}}
.notice{display:flex;gap:16px;padding:24px;border-radius:var(--r);background:#EEF2EF;border:1px solid #CFDCD5}
.notice svg{flex-shrink:0;color:var(--red)}

/* contact + form */
.contact-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr}}
.cinfo{display:grid;gap:14px}
.cinfo a,.cinfo div.ci{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);text-decoration:none}
.cinfo .ic{width:46px;height:46px;border-radius:12px;flex-shrink:0}.cinfo b{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cinfo span{font-weight:700;font-size:1.1rem;line-height:1.4}
@media (hover:hover) and (pointer:fine){.cinfo a:hover{border-color:var(--navy)}}
.form{display:grid;gap:16px;padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 18px 44px -30px rgba(30,33,35,.4)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:8px}.fld label{font-weight:700;font-size:.95rem}
.fld input,.fld select,.fld textarea{width:100%;min-height:54px;padding:12px 16px;border:1.5px solid #A9B8B0;border-radius:12px;background:#fff;color:var(--ink);font:400 1.05rem var(--sans)}
.fld textarea{min-height:140px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid rgba(57,62,65,.3);border-color:var(--navy)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fmsg{min-height:1.5em;font-weight:600}.fmsg.ok{color:#1B6B2E}.fmsg.err{color:var(--red-d)}
.small{font-size:.9rem;color:var(--muted)}

/* long text (policies, compliance) */
.prose{max-width:820px;display:flex;flex-direction:column;gap:18px}
.prose h2{margin-top:28px;font-size:clamp(1.5rem,2.4vw,2rem)}.prose h3{margin-top:14px}.prose h4{margin-top:8px}
.prose ul,.prose ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
.prose li::marker{color:var(--red)}
.prose .todo,.todo{background:#FFF3B0;border-radius:6px;padding:1px 8px;font-weight:700;color:#5A4500}
.toc-l{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.toc{position:sticky;top:calc(var(--hdr) + 24px);display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.toc b{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 12px}
.toc a{padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.35;transition:background-color .2s ease,color .2s ease}
.toc a.on{background:rgba(57,62,65,.09);color:var(--navy)}
@media (hover:hover) and (pointer:fine){.toc a:hover{background:var(--soft)}}
@media (max-width:999px){.toc-l{grid-template-columns:1fr}.toc{position:static}}
.acc{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;overflow:hidden}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;font:700 1.2rem/1.3 var(--sans);letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;transition:rotate .35s var(--ease),background-color .2s ease;font-style:normal}
.acc[open] summary i{rotate:45deg;background:var(--navy);color:#fff}
.acc .bd{padding:0 26px 28px}
.tbl{width:100%;border-collapse:collapse;font-size:1rem}.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}.tbl th{background:var(--soft)}
.soon{display:flex;flex-direction:column;gap:22px;align-items:flex-start;padding:clamp(28px,4vw,48px);border:1.5px dashed #9DB0A6;border-radius:var(--r);background:var(--soft)}

/* footer */
.ftr{background:var(--navy-dd);color:var(--on-dark-2);padding:clamp(56px,7vw,96px) 0 0;position:relative;overflow:hidden}
.ftr a{color:var(--on-dark-2);text-decoration:none}.ftr h4{color:#fff;margin-bottom:14px;font-size:1rem}
.ftr .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:36px}
.ftr .cols>div{display:flex;flex-direction:column;gap:10px;font-size:.98rem}
.ftr .brand b{color:#fff}.ftr .brand svg{filter:none}
.ftr .bot{margin-top:clamp(40px,6vw,72px);padding:22px 0;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.9rem}
@media (hover:hover) and (pointer:fine){.ftr a:hover{color:#fff;text-decoration:underline}}
@media (max-width:1099px){.ftr .cols{grid-template-columns:1fr 1fr}.ftr .cols>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.ftr .cols{grid-template-columns:1fr}}

/* mobile menu and bottom bar */
.mnav{position:fixed;inset:var(--hdr) 0 0 0;z-index:49;background:#fff;padding:20px var(--gut) 120px;overflow:auto;display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;translate:0 -10px;transition:opacity .2s ease,translate .35s var(--ease),visibility 0s .2s}
.mnav.open{opacity:1;visibility:visible;translate:0 0;transition:opacity .2s ease,translate .4s var(--ease),visibility 0s}
.mnav a{padding:14px 12px;border-radius:12px;font:700 1.15rem var(--sans);color:var(--ink);text-decoration:none}
.mnav a[aria-current="page"]{background:rgba(57,62,65,.09);color:var(--navy)}
.mnav .sub{padding-left:16px;display:flex;flex-direction:column}.mnav .sub a{font-weight:600;font-size:1.02rem;color:var(--muted)}
.mnav h5{margin:16px 12px 4px;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mbar{display:none}
@media (max-width:1199px){.nav,.hdr-cta .btn{display:none}.menu-btn{display:flex}.hdr-cta a.call{display:flex}}
.call{display:none;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:12px;background:var(--navy);color:#fff;font:700 .95rem var(--sans);text-decoration:none}
@media (max-width:1199px){.call{display:flex}}
@media (max-width:699px){.brand b{font-size:1.05rem}.brand svg,.brand img{width:38px}.call span{display:none}.call{width:48px;padding:0;justify-content:center}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:48;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .mbar a{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:12px;font:700 1rem var(--sans);text-decoration:none;background:var(--navy);color:#fff}.mbar a+a{background:var(--red)}
  body{padding-bottom:72px}
  .hero .card{display:none}.hero .in{padding-top:110px}}

/* motion */
.js .rv{opacity:0;translate:0 18px;transition:opacity .6s ease,translate .8s var(--ease)}
.js .rv.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}.js .rv{opacity:1;translate:none}}
@media (prefers-reduced-transparency:reduce){.hdr{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.hero .card{background:rgba(30,33,35,.85);-webkit-backdrop-filter:none;backdrop-filter:none}.mbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){:root{--muted:#2A3B4A;--line:#8AA0B2}.pcard .cap p,.scard p{color:var(--ink)}}
@media print{.hdr,.mbar,.ftr,.mnav{display:none}body{font-size:12pt}}
@media (max-width:699px){.hero::after{background:linear-gradient(0deg,rgba(30,33,35,.94) 0%,rgba(30,33,35,.78) 55%,rgba(30,33,35,.5) 100%)}}

/* Crystal Point additions */
.brand img{width:auto;height:56px}.brand img.wide{height:58px}
.ftr .brand img{height:64px}
.btn i{border-radius:3px}
.hero-w{padding:0}.hero{max-width:none;border-radius:0}
.hero::after{background:linear-gradient(90deg,rgba(30,33,35,.9) 0%,rgba(30,33,35,.62) 48%,rgba(30,33,35,.12) 100%),linear-gradient(0deg,rgba(30,33,35,.55),transparent 45%)}
.tag{background:transparent;padding:0;border-radius:0;color:var(--red);letter-spacing:.14em;font-weight:600}
.tag::before{width:28px;height:1px;border-radius:0;background:currentColor}
.dark .tag,.hero .tag{background:transparent;color:var(--leaf)}
.nlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:n}
.nlist li,.nrow{display:grid;grid-template-columns:90px 1fr 1.4fr;gap:24px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line);counter-increment:n}
.nlist li::before{content:counter(n,decimal-leading-zero);font:600 1.1rem var(--sans);letter-spacing:.1em;color:var(--red);padding-top:8px}
.nlist h3{font-size:clamp(1.5rem,2.4vw,2rem)}.nlist p{color:var(--muted)}
.dark .nlist,.dark .nlist li{border-color:rgba(255,255,255,.18)}.dark .nlist li::before{color:var(--leaf)}.dark .nlist p{color:var(--on-dark-2)}
.nlist a.row{display:contents;text-decoration:none;color:inherit}
@media (max-width:760px){.nlist li{grid-template-columns:56px 1fr}.nlist li p{grid-column:2}}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-list a{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:padding .3s var(--ease),color .2s ease}
.svc-list em{font:600 1rem var(--sans);font-style:normal;color:var(--red);letter-spacing:.1em}
.svc-list b{font:600 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--slab)}
.svc-list svg{color:var(--red)}
@media (hover:hover) and (pointer:fine){.svc-list a:hover{padding-left:14px;color:var(--red-d)}}
.big-word{font:600 clamp(3.2rem,12vw,10rem)/.9 var(--slab);color:rgba(111,146,131,.18);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;margin:0 0 -.1em;user-select:none}
.svc-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,72px);align-items:start}
.svc-page .prose{max-width:none}
.svc-page .prose h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.svc-page .prose li{padding-left:4px}
.aside{position:sticky;top:calc(var(--hdr) + 24px);display:flex;flex-direction:column;gap:18px}
.aside .box{padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--soft);display:flex;flex-direction:column;gap:12px}
.aside .box.d{background:var(--navy);border-color:var(--navy);color:#fff}.aside .box.d h3{color:#fff}.aside .box.d p{color:var(--on-dark-2)}.aside .box.d a:not(.btn){color:#fff}
.aside .box a.l{text-decoration:none;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--line);font-weight:500}
.aside .box a.l[aria-current]{color:var(--red);font-weight:600}
@media (max-width:999px){.svc-page{grid-template-columns:1fr}.aside{position:static}}
.cta{background:var(--navy);background-size:cover;background-position:center}
.cta.img{background-image:linear-gradient(90deg,rgba(30,33,35,.9),rgba(30,33,35,.6)),var(--bg-img)}
.cta::before{display:none}
.pic{border-radius:var(--r)}
.scard,.pcard,.form,.step,.val{border-radius:var(--r)}
.cinfo .ic{background:rgba(111,146,131,.18);color:var(--red-d)}
.mbar a+a{background:var(--red)}
.form .btn,.aside .box .btn{justify-self:start;align-self:flex-start}
.fld input,.fld select,.fld textarea{border-radius:4px}
.ftr .cols{grid-template-columns:1.6fr 1fr 1.3fr 1.3fr}
@media (max-width:1099px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr .cols{grid-template-columns:1fr}}
.nlist a.more{display:inline-flex;gap:8px;align-items:center;margin-top:10px;font-weight:600;color:inherit;text-underline-offset:4px}
.ftr .brand img{margin-bottom:6px}

/* ===== Polish pass (better-ui + apple-design) ===== */
:root{--out:cubic-bezier(.2,0,0,1);--edge:oklch(0 0 0 / .1)}
/* typography: tracking follows size (tight when large, neutral for body, open for small caps) */
body{letter-spacing:0}
h1{letter-spacing:-.02em;line-height:1.04}h2{letter-spacing:-.015em;line-height:1.1}h3{letter-spacing:-.005em;line-height:1.2}
.small,.crumbs{letter-spacing:.01em}
/* instant press feedback on touch/pointer down, no tap delay */
a,button,summary{touch-action:manipulation}
.btn:active,.menu-btn:active,.call:active,.mbar a:active{scale:.96;transition-duration:.1s}
.svc-list a:active{scale:.99}
/* concentric radius: outer = inner + padding (button pad 6px) */
.btn{border-radius:8px}.btn i{border-radius:2px}
.btn.sm i{border-radius:2px}
.cinfo .ic,.ic{border-radius:4px}
/* spring-feel on the arrow nudge (named properties only) */
.btn i{transition-property:translate;transition-duration:.5s;transition-timing-function:var(--spring)}
.btn{transition-property:background-color,scale}
/* depth from soft layered shadow instead of a border where the border is only decoration */
.form,.cinfo a,.aside .box:not(.d){border-color:transparent;box-shadow:0 0 0 1px rgba(30,33,35,.06),0 1px 2px rgba(30,33,35,.05),0 6px 16px -6px rgba(30,33,35,.1)}
.aside .box:not(.d){background:#fff}
@media (hover:hover) and (pointer:fine){.cinfo a:hover{box-shadow:0 0 0 1px rgba(30,33,35,.12),0 2px 4px rgba(30,33,35,.06),0 10px 24px -8px rgba(30,33,35,.16)}}
.cinfo a{transition:box-shadow .25s var(--out)}
/* photos get a hairline outline for consistent depth (pure black at 10%, never tinted) */
.pic img{position:relative}
.pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--edge);pointer-events:none}
/* services list: slide with transform (not padding) so it is smooth and interruptible */
.svc-list a,.svc-list a:hover{padding-left:0}
.svc-list b{transition:translate .5s var(--spring)}
.svc-list svg{transition:translate .5s var(--spring)}
@media (hover:hover) and (pointer:fine){.svc-list a:hover b{translate:14px 0}.svc-list a:hover svg{translate:6px 0}}
.nlist a.more svg{transition:translate .5s var(--spring)}
@media (hover:hover) and (pointer:fine){.nlist a.more:hover svg{translate:4px 0}}
/* header: translucent material, soft blurred scroll edge instead of a 1px divider */
.hdr{border-bottom:0;box-shadow:none;background:rgba(255,255,255,.72)}
.hdr::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;pointer-events:none;opacity:0;transition:opacity .3s var(--out);
  background:linear-gradient(rgba(255,255,255,.55),transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.hdr.scrolled::after{opacity:1}
/* menu button: the two icons cross-fade with scale .25 -> 1 and blur 4px -> 0 */
.menu-btn{position:relative}
.menu-btn .ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition-property:opacity,scale,filter;transition-duration:.25s;transition-timing-function:var(--out)}
.menu-btn .ico.b{opacity:0;scale:.25;filter:blur(4px)}
.menu-btn[aria-expanded="true"] .ico.a{opacity:0;scale:.25;filter:blur(4px)}
.menu-btn[aria-expanded="true"] .ico.b{opacity:1;scale:1;filter:blur(0)}
/* mobile menu: arrives as a material (blur + slight scale), leaves softly along the same path */
.mnav{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  scale:.98;transform-origin:top center;translate:0 -8px;transition:opacity .2s var(--out),translate .3s var(--out),scale .3s var(--out),visibility 0s .2s}
.mnav.open{scale:1;translate:0 0;transition:opacity .2s var(--out),translate .45s var(--spring),scale .45s var(--spring),visibility 0s}
/* dropdown: same easing both ways, small fixed offset on exit */
.dd-m{transition:opacity .18s var(--out),translate .2s var(--out),scale .2s var(--out),visibility 0s .18s}
/* accessibility fallbacks for the new materials */
@media (prefers-reduced-transparency:reduce){.hdr{background:#fff}.hdr::after{display:none}.mnav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.hdr{box-shadow:0 1px 0 #000}.form,.cinfo a,.aside .box:not(.d){box-shadow:0 0 0 1.5px #000}.pic::after{box-shadow:inset 0 0 0 1px #000}}
@media (prefers-reduced-motion:reduce){.menu-btn .ico,.svc-list b,.svc-list svg,.mnav{transition-duration:.01ms!important}.svc-list a:hover b,.svc-list a:hover svg{translate:none}.mnav{scale:1}}
@media (max-width:699px){.mbar{border-top:0;box-shadow:0 -12px 24px -12px rgba(30,33,35,.18)}}

/* ===== Kassa-style section layouts ===== */
:root{--tint:#E3EAE6;--tint2:#F3F6F4;--panel:#D5E0D9;--deep:#2B2F32}
.band-tint{background:var(--tint)}.band-soft{background:var(--tint2)}.band-deep{background:var(--deep);position:relative;overflow:hidden}
.page-hero{background:var(--tint)}
.page-hero h1{border-left:1px solid var(--sage);padding-left:clamp(18px,2.4vw,32px)}
/* hero: ruled heading and a bottom bar with an Explore tile */
.hero .in{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:clamp(40px,9vh,110px)}
.txt.rule{border-left:1px solid rgba(255,255,255,.5);padding-left:clamp(20px,3vw,40px)}
.hbar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.explore{display:flex;align-items:center;gap:26px;min-width:270px;padding:6px 22px 6px 6px;border:1px solid rgba(255,255,255,.5);border-radius:4px;background:rgba(30,33,35,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;text-decoration:none;font:600 .82rem var(--sans);letter-spacing:.14em;text-transform:uppercase;transition-property:background-color,scale;transition-duration:.25s;transition-timing-function:var(--out)}
.explore .th{width:88px;height:56px;border-radius:2px;overflow:hidden;flex-shrink:0}.explore .th img{width:100%;height:100%;object-fit:cover}
.explore span:nth-child(2){flex:1}.explore i{display:flex;transition:translate .5s var(--spring)}
.explore:active{scale:.97}
.hlinks{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.hlinks a{display:flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font:600 .82rem var(--sans);letter-spacing:.14em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){.explore:hover{background:rgba(30,33,35,.6)}.explore:hover i{translate:0 4px}.hlinks a:hover{text-decoration:underline;text-underline-offset:6px}}
@media (max-width:699px){.hlinks{display:none}.explore{width:100%}}
/* tinted intro band: label + big heading left, paragraph + text link right */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,8vw,120px);align-items:end}
.intro h2{font-size:clamp(2.5rem,5.2vw,4.4rem);margin-top:18px;max-width:15ch}
.intro p{font-size:1.15rem;color:var(--muted);max-width:46ch}
.tlink{display:inline-flex;align-items:center;gap:12px;margin-top:28px;min-height:44px;color:var(--red-d);text-decoration:none;font:600 .82rem var(--sans);letter-spacing:.14em;text-transform:uppercase}
.tlink .pl{width:26px;height:26px;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:rotate .5s var(--spring)}
@media (hover:hover) and (pointer:fine){.tlink:hover .pl{rotate:90deg}.tlink:hover{text-decoration:underline;text-underline-offset:6px}}
@media (max-width:899px){.intro{grid-template-columns:1fr;align-items:start}.intro h2{max-width:none}}
/* full-bleed split: photo with a giant faded word, tinted panel with a framed image */
.fullsplit{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(480px,58vw,760px)}
.fs-photo{position:relative;overflow:hidden;background:var(--deep)}
.fs-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bigword{position:absolute;left:5%;bottom:5%;font:600 clamp(4.5rem,12vw,10.5rem)/.85 var(--slab);letter-spacing:-.02em;color:rgba(255,255,255,.4);white-space:nowrap;pointer-events:none;user-select:none}
.fs-panel{background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:clamp(40px,6vw,88px) var(--gut)}
.fs-panel .cap{font:600 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red-d);text-align:center}
.frame{width:min(100%,380px);aspect-ratio:3/4;padding:10px;border:1px solid rgba(30,33,35,.3)}
.frame img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.fullsplit{grid-template-columns:1fr}.fs-photo{min-height:360px}}
/* six-up numbered grid */
.grid6{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,5vw,72px) clamp(24px,4vw,56px)}
.grid6 li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:10px;align-content:start}
.grid6 .n{font:600 .9rem var(--sans);letter-spacing:.1em;color:var(--red)}
.grid6 small{align-self:center;font:600 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.grid6 h3{grid-column:1/-1;font-size:clamp(1.8rem,2.7vw,2.3rem);margin-top:6px}
.grid6 p{grid-column:1/-1;color:var(--muted);font-size:1rem;max-width:38ch}
@media (max-width:1099px){.grid6{grid-template-columns:repeat(2,1fr)}}@media (max-width:659px){.grid6{grid-template-columns:1fr}}
/* dark band with tall portrait cards and a glass caption bar */
.bigword2{position:absolute;left:-1%;top:44%;font:600 clamp(9rem,26vw,24rem)/.8 var(--slab);letter-spacing:-.03em;color:rgba(157,187,171,.07);white-space:nowrap;pointer-events:none;user-select:none}
.band-deep .wrap{position:relative}
.pcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.pc{display:block;position:relative;aspect-ratio:3/4.3;overflow:hidden;border-radius:4px;color:#fff;text-decoration:none;isolation:isolate}
.pimg{position:absolute;inset:0;z-index:-1}.pimg img{width:100%;height:100%;object-fit:cover;transition:scale .8s var(--ease)}
.pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,33,35,.55),transparent 55%)}
.pbar{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-radius:3px;background:rgba(43,47,50,.55);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.2);font:600 .76rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.pbar svg{flex-shrink:0;transition:translate .5s var(--spring)}
.pcards p{margin-top:16px;font-size:.95rem;line-height:1.6}
.pc:active{scale:.98}
@media (hover:hover) and (pointer:fine){.pc:hover .pimg img{scale:1.05}.pc:hover .pbar svg{translate:4px 0}}
@media (max-width:1199px){.pcards{grid-template-columns:repeat(3,1fr)}}@media (max-width:759px){.pcards{grid-template-columns:repeat(2,1fr)}}@media (max-width:479px){.pcards{grid-template-columns:1fr}.pc{aspect-ratio:4/3}}
@media (prefers-reduced-transparency:reduce){.pbar,.explore{background:#2B2F32;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* bordered numbered rows with badge squares */
.brows{list-style:none;margin:0;padding:0;border-top:1px solid rgba(59,86,73,.4)}
.brows a{display:grid;grid-template-columns:84px 1fr auto 64px;align-items:center;min-height:88px;border-bottom:1px solid rgba(59,86,73,.4);color:var(--ink);text-decoration:none;transition:background-color .25s var(--out)}
.brows .bd{justify-self:center;width:44px;height:44px;display:grid;place-items:center;background:var(--red-d);color:#fff;font:600 .85rem var(--sans);letter-spacing:.04em}
.brows .tt{align-self:stretch;display:flex;align-items:center;padding-left:clamp(20px,3vw,40px);border-left:1px solid rgba(59,86,73,.4);font:600 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--slab)}
.brows .ct{padding-right:24px;font:600 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brows svg{justify-self:center;color:var(--red-d);transition:translate .5s var(--spring)}
.brows a:active{scale:.995}
@media (hover:hover) and (pointer:fine){.brows a:hover{background:rgba(255,255,255,.5)}.brows a:hover svg{translate:6px 0}}
@media (max-width:759px){.brows a{grid-template-columns:64px 1fr 44px}.brows .ct{display:none}.brows .tt{font-size:1.3rem}}
@media (prefers-reduced-motion:reduce){.explore i,.tlink .pl,.pbar svg,.brows svg{transition-duration:.01ms!important}}

/* ===== Footer: four balanced columns, services split in two so every column ends at about the same height ===== */
.ftr .cols{grid-template-columns:1.35fr .8fr 2.1fr 1.25fr;gap:clamp(28px,4vw,56px);align-items:start}
.ftr .cols>div{gap:12px}
.ftr .svc .links{display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(20px,3vw,40px);align-content:start}
.ftr .cols>div:not(:first-child) h4{font-size:1.15rem;letter-spacing:.01em;margin-bottom:6px}
.ftr .bot{margin-top:clamp(36px,5vw,64px)}
@media (max-width:1099px){.ftr .cols{grid-template-columns:1fr 1fr}.ftr .cols>div:first-child,.ftr .svc{grid-column:1/-1}}
@media (max-width:560px){.ftr .cols{grid-template-columns:1fr}.ftr .svc .links{grid-template-columns:1fr}}
/* footer links: underline draws in from the left (hover effect, pointer devices only) */
@media (hover:hover) and (pointer:fine){
  .ftr .cols>div:not(:first-child) a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition-property:background-size,color;transition-duration:.35s,.2s;transition-timing-function:var(--ease),ease;width:fit-content}
  .ftr .cols>div:not(:first-child) a:hover{background-size:100% 1px;text-decoration:none;color:#fff}
}

/* ===== Motion pass ===== */
@keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes settle{from{scale:1.05}to{scale:1}}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:0 4px}}
@keyframes slide-word{from{translate:-14% 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes drift{from{translate:-4% 0}to{translate:4% 0}}
/* first load: hero pieces rise in one after another (stagger, enter) and the photo settles (scale in); runs once */
.hero>img{animation:settle 1.6s var(--ease) both}
.hero .txt>*{animation:rise .7s var(--ease) both}
.hero .txt>*:nth-child(1){animation-delay:.05s}.hero .txt>*:nth-child(2){animation-delay:.13s}
.hero .txt>*:nth-child(3){animation-delay:.21s}.hero .txt>*:nth-child(4){animation-delay:.29s}
.hero .hbar{animation:rise .7s var(--ease) .45s both}
.page-hero .wrap>*{animation:rise .6s var(--ease) both}
.page-hero .wrap>*:nth-child(2){animation-delay:.07s}.page-hero .wrap>*:nth-child(3){animation-delay:.14s}.page-hero .wrap>*:nth-child(4){animation-delay:.21s}
/* the Explore chevron nudges three times to invite a scroll, then stops */
.explore i svg{animation:nudge 1.8s cubic-bezier(.77,0,.175,1) 1.4s 3}
/* giant words slide into view / drift with the scroll (progressive enhancement, no JS) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bigword{animation:slide-word linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    .bigword2{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
/* services rows: the badge darkens as the row is hovered */
.brows .bd{transition:background-color .25s ease}
@media (hover:hover) and (pointer:fine){.brows a:hover .bd{background:var(--navy)}}
/* forms: focus colour eases in, the reply message rises in, sending state is visible */
.fld input,.fld select,.fld textarea{transition-property:border-color,outline-color;transition-duration:.15s;transition-timing-function:ease}
.fmsg.ok,.fmsg.err{animation:rise .35s var(--ease) both}
.btn:disabled{opacity:.6;cursor:progress}
.btn{transition-property:background-color,scale,opacity}
/* phone menu: items arrive one after another (30ms apart); leaving is instant so closing never feels slow */
.mnav>*,.mnav .sub a{opacity:0;translate:0 8px;transition:opacity .15s ease,translate .15s ease}
.mnav.open>*,.mnav.open .sub a{opacity:1;translate:0 0;transition:opacity .3s var(--out),translate .45s var(--out)}
.mnav.open>*:nth-child(1){transition-delay:.04s}.mnav.open>*:nth-child(2){transition-delay:.07s}.mnav.open>*:nth-child(3){transition-delay:.10s}
.mnav.open>*:nth-child(4){transition-delay:.13s}.mnav.open>*:nth-child(5){transition-delay:.16s}
.mnav.open .sub a:nth-child(1){transition-delay:.19s}.mnav.open .sub a:nth-child(2){transition-delay:.22s}.mnav.open .sub a:nth-child(3){transition-delay:.25s}
.mnav.open .sub a:nth-child(4){transition-delay:.28s}.mnav.open .sub a:nth-child(5){transition-delay:.31s}.mnav.open .sub a:nth-child(6){transition-delay:.34s}
.mnav.open .sub a:nth-child(7){transition-delay:.37s}.mnav.open .sub a:nth-child(8){transition-delay:.40s}
/* reduced motion: keep a short fade, drop travel and loops */
@media (prefers-reduced-motion:reduce){
  .hero>img,.explore i svg{animation:none}
  .hero .txt>*,.hero .hbar,.page-hero .wrap>*,.fmsg.ok,.fmsg.err{animation:fade .3s ease both;animation-delay:0s}
  .mnav>*,.mnav .sub a{translate:none;transition-duration:.01ms!important;transition-delay:0s!important;opacity:1}
  .ftr .cols>div:not(:first-child) a{transition-duration:.01ms}
}

/* footer services: fill down each column (4 + 4) so rows never leave gaps */
.ftr .svc .links{display:block;columns:2;column-gap:clamp(20px,3vw,40px)}
.ftr .svc .links a{display:block;break-inside:avoid;margin-bottom:12px}
@media (max-width:560px){.ftr .svc .links{columns:1}}
/* contact page: let grid children shrink so a long email address wraps instead of widening the page */
.contact-grid>*,.split>*,.svc-page>*,.intro>*{min-width:0}
.cinfo a>div,.cinfo span{min-width:0;overflow-wrap:anywhere}
.ftr .svc .links a:nth-child(5){break-before:column}
@media (max-width:560px){.ftr .svc .links a:nth-child(5){break-before:auto}}
.aside .box a,.ftr a{overflow-wrap:anywhere}

/* ===== Premium motion layer ===== */
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");--io:cubic-bezier(.77,0,.175,1)}

/* page transitions: the old page lifts away, the new one rises in; the header stays put (browsers without support just navigate) */
@view-transition{navigation:auto}
.hdr{view-transition-name:site-hdr}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.2,0,0,1) both}
::view-transition-new(root){animation:vt-in .55s cubic-bezier(.23,1,.32,1) both}
@keyframes vt-out{to{opacity:0;translate:0 -10px}}
@keyframes vt-in{from{opacity:0;translate:0 18px}}

/* scroll progress line along the very top */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:var(--sage);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* header slides away while reading down, returns on scroll up */
.hdr{transition:translate .5s cubic-bezier(.23,1,.32,1)}
.hdr.hide{translate:0 -100%}

/* split headings: each word rises from behind a mask */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .02em .16em;margin:-.06em -.02em -.16em}
.js [data-split="1"] .wi{display:inline-block;translate:0 115%;transition:translate 1s cubic-bezier(.23,1,.32,1)}
.js [data-split="1"].go .wi{translate:0 0}
.js .hero h1:not([data-split]),.js .page-hero h1:not([data-split]){opacity:0;animation:cp-show 0s linear 2.5s forwards}
@keyframes cp-show{to{opacity:1}}
.hero .txt>h1,.page-hero .wrap>h1{animation:none}

/* photo wipes: the image uncovers upward while easing out of a slight zoom (the clip sits on the image, so the box stays observable) */
.js .rvi img{clip-path:inset(100% 0 0 0);transform:scale(1.16);transition:clip-path 1.25s var(--io) var(--rd,0ms),transform 1.8s cubic-bezier(.23,1,.32,1) var(--rd,0ms),scale .8s cubic-bezier(.23,1,.32,1)}
.js .rvi.in img{clip-path:inset(0 0 0 0);transform:none}

/* lines that draw themselves */
.txt.rule{border-left-color:transparent;position:relative}
.txt.rule::before,.page-hero h1::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;transform-origin:top;animation:rule-in 1.2s cubic-bezier(.23,1,.32,1) .1s both}
.txt.rule::before{background:rgba(255,255,255,.5)}
.page-hero h1{border-left-color:transparent;position:relative}.page-hero h1::before{background:var(--sage)}
@keyframes rule-in{from{transform:scaleY(0)}}
.tag::before{transform-origin:left}
.hero .tag::before{animation:line-in .9s cubic-bezier(.23,1,.32,1) .3s both}
@keyframes line-in{from{transform:scaleX(0)}}
.js .rv .tag::before{transform:scaleX(0);transition:transform .9s cubic-bezier(.23,1,.32,1) .2s}
.js .rv.in .tag::before{transform:none}
.grid6 li{position:relative;padding-top:24px}
.grid6 li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(59,86,73,.3);transform-origin:left}
.js .grid6 li.rv::before{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.23,1,.32,1) .1s}
.js .grid6 li.rv.in::before{transform:none}
.brows li{position:relative}
.js .brows a{border-bottom-color:transparent}
.js .brows li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(59,86,73,.4);transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.23,1,.32,1) .15s;pointer-events:none}
.js .brows li.in::after{transform:none}

/* service rows: a soft fill sweeps in from the left on hover */
.brows a{position:relative;isolation:isolate}
.brows a::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.6);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.brows a:hover{background:transparent}.brows a:hover::before{transform:none}}

/* buttons: magnetic pull (mouse only) and an arrow that slides out and back in */
.btn{transition:background-color .2s ease,scale .16s cubic-bezier(.23,1,.32,1),opacity .2s ease,translate .7s var(--spring)}
.btn.mag{transition:background-color .2s ease,scale .16s cubic-bezier(.23,1,.32,1),opacity .2s ease,translate .15s linear}
.explore{transition:background-color .25s var(--out),scale .25s var(--out),translate .7s var(--spring)}
.explore.mag{transition:background-color .25s var(--out),scale .25s var(--out),translate .15s linear}
.btn i{position:relative;overflow:hidden}
.btn i svg{transition:translate .5s cubic-bezier(.23,1,.32,1)}
.btn i::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;background:currentColor;-webkit-mask:var(--arrow) center/18px no-repeat;mask:var(--arrow) center/18px no-repeat;translate:-220% 0;transition:translate .5s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.btn:hover i{translate:none}.btn:hover i svg{translate:220% 0}.btn:hover i::after{translate:0 0}}

/* portrait cards lift on hover */
.pc{transition:translate .6s var(--spring),box-shadow .6s cubic-bezier(.23,1,.32,1),scale .16s ease}
@media (hover:hover) and (pointer:fine){.pc:hover{translate:0 -6px;box-shadow:0 30px 50px -28px rgba(0,0,0,.75)}}

/* giant footer wordmark */
.ft-word{margin-top:clamp(48px,7vw,96px);font:600 clamp(3.2rem,13vw,12rem)/.84 var(--slab);letter-spacing:-.035em;color:rgba(255,255,255,.07);white-space:nowrap;text-align:center;overflow:hidden;user-select:none;pointer-events:none}

/* scroll-linked motion: progress line, hero and split-photo parallax, footer wordmark (progressive enhancement) */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress{animation:prog linear both;animation-timeline:scroll(root)}
    .hero>img{animation:settle 1.6s cubic-bezier(.23,1,.32,1) both,hero-par linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 100vh}
    .fs-photo img{top:-10%;height:120%;animation:fs-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .ft-word{animation:ft-rise linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  }
}
@keyframes prog{to{transform:scaleX(1)}}
@keyframes hero-par{to{translate:0 16%}}
@keyframes fs-par{from{translate:0 -7%}to{translate:0 7%}}
@keyframes ft-rise{from{opacity:0;translate:0 35%}}

/* reduced motion: no travel, loops, wipes or page slides */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .txt.rule::before,.page-hero h1::before,.hero .tag::before{animation:none}
  .hdr,.btn,.explore,.pc,.brows a::before{transition-duration:.01ms}
}

/* footer: give the contact column room so the email address stays on one line */
.ftr .cols{grid-template-columns:1.25fr .75fr 2fr 1.45fr}
.ftr a{overflow-wrap:normal}
@media (max-width:1099px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr .cols{grid-template-columns:1fr}.ftr a{overflow-wrap:anywhere}}

/* ===== Ambient background: sage and forest light drifting behind the dark sections (40% opacity) ===== */
.band-deep,.ftr,.cta{position:relative;isolation:isolate;overflow:hidden}
.band-deep::before,.ftr::before,.cta::before,.band-deep::after,.ftr::after,.cta::after{content:"";display:block;position:absolute;z-index:-1;pointer-events:none;border-radius:50%;aspect-ratio:1}
.band-deep::before,.ftr::before,.cta::before{width:min(62vmax,980px);left:-14%;top:-38%;background:radial-gradient(closest-side,rgba(111,146,131,.4),rgba(111,146,131,0));animation:amb-a 22s ease-in-out infinite alternate}
.band-deep::after,.ftr::after,.cta::after{width:min(56vmax,900px);right:-16%;bottom:-42%;background:radial-gradient(closest-side,rgba(44,84,29,.4),rgba(44,84,29,0));animation:amb-b 28s ease-in-out infinite alternate}
.cta::before{width:min(48vmax,720px);top:-60%}.cta::after{width:min(44vmax,660px);bottom:-70%}
@keyframes amb-a{0%{translate:0 0;scale:1}50%{translate:42% 18%;scale:1.2}100%{translate:78% 34%;scale:.95}}
@keyframes amb-b{0%{translate:0 0;scale:1}50%{translate:-36% -14%;scale:1.15}100%{translate:-70% -30%;scale:.9}}
/* labels on dark sections a shade lighter, so they stay readable when the glow passes behind them */
.dark .tag,.band-deep .tag{color:#C8DCD1}
@media (prefers-reduced-motion:reduce){.band-deep::before,.ftr::before,.cta::before,.band-deep::after,.ftr::after,.cta::after{animation:none}}

/* ===== Image hover: photos tilt toward the pointer, zoom and come up to full colour ===== */
/* tilt toward the cursor (vars set by site.js), springing back flat when the pointer leaves */
.pc{transition:translate .6s var(--spring),box-shadow .6s cubic-bezier(.23,1,.32,1),scale .16s ease,transform .7s var(--spring)}
.pc.tilting{transition:translate .6s var(--spring),box-shadow .6s cubic-bezier(.23,1,.32,1),scale .16s ease,transform .12s linear}
.js .frame.rv{transition:opacity .6s ease,translate .8s var(--ease),transform .7s var(--spring)}
.js .frame.rv.tilting{transition:opacity .6s ease,translate .8s var(--ease),transform .12s linear}
.pic{transition:transform .7s var(--spring)}.pic.tilting{transition:transform .12s linear}
.pc,.frame,.pic{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.frame{position:relative}
/* photos sit slightly muted, then come up to full colour and ease in closer */
.pimg img,.frame img,.pic img,.fs-photo img{filter:saturate(.86) brightness(.97)}
.js .rvi img{transition:clip-path 1.25s var(--io) var(--rd,0ms),transform 1.8s cubic-bezier(.23,1,.32,1) var(--rd,0ms),scale .9s cubic-bezier(.23,1,.32,1),filter .6s ease}
.explore .th img{transition:scale .6s cubic-bezier(.23,1,.32,1),filter .6s ease;filter:saturate(.8)}
/* the giant word on the split photo drifts against the pointer, for depth */
.fs-photo .bigword{transform:translate(var(--px,0px),var(--py,0px));transition:transform .9s var(--spring)}
.fs-photo.tilting .bigword{transition:transform .2s linear}
@media (hover:hover) and (pointer:fine){
  .pc:hover .pimg img{scale:1.08;filter:saturate(1.08) brightness(1.03)}
  .frame:hover img,.pic:hover img{scale:1.06;filter:saturate(1.08) brightness(1.03)}
  .fs-photo:hover img{scale:1.04;filter:saturate(1.08) brightness(1.03)}
  .explore:hover .th img{scale:1.14;filter:saturate(1.1)}
}
@media (prefers-reduced-motion:reduce){
  .pc,.frame,.pic{transform:none}
  .pc:hover .pimg img,.frame:hover img,.pic:hover img,.fs-photo:hover img,.explore:hover .th img{scale:none}
}

/* ===== Signature motion ===== */
/* smooth momentum scrolling (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* first-visit intro: logo and line rise on dark, then the curtain lifts to reveal the page */
.curtain{display:none}
.intro-on .curtain{display:flex;position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;background:var(--deep);clip-path:inset(0 0 0 0);animation:intro-lift 1s var(--io) 1.15s forwards}
.curtain-in{display:flex;flex-direction:column;align-items:center;gap:18px;animation:intro-fade .45s ease 1.05s forwards}
.curtain img{width:min(200px,46vw);height:auto;animation:intro-rise .9s cubic-bezier(.23,1,.32,1) .1s both}
.curtain i{display:block;width:120px;height:1px;background:var(--leaf);transform-origin:left;animation:line-in .9s cubic-bezier(.23,1,.32,1) .35s both}
.curtain span{font:600 .78rem var(--sans);letter-spacing:.32em;text-transform:uppercase;color:#C8DCD1;animation:intro-rise .9s cubic-bezier(.23,1,.32,1) .5s both}
@keyframes intro-rise{from{opacity:0;translate:0 14px}}
@keyframes intro-fade{to{opacity:0;translate:0 -18px}}
@keyframes intro-lift{to{clip-path:inset(0 0 100% 0)}}
/* while the intro plays, the hero waits its turn */
.intro-on .hero>img{animation-delay:1.1s,0s}
.intro-on .hero .txt>*:nth-child(1){animation-delay:1.4s}.intro-on .hero .txt>*:nth-child(3){animation-delay:1.56s}.intro-on .hero .txt>*:nth-child(4){animation-delay:1.64s}
.intro-on .hero .hbar{animation-delay:1.8s}
.intro-on .txt.rule::before{animation-delay:1.35s}.intro-on .hero .tag::before{animation-delay:1.6s}
.intro-on .explore i svg{animation-delay:2.9s}

/* custom cursor: a ring that trails the mouse (inverts against the page), grows on links, says "View" on photo cards */
.cursor{position:fixed;left:0;top:0;z-index:250;pointer-events:none;opacity:0;transition:opacity .3s ease;mix-blend-mode:difference}
.cursor.on{opacity:1}
.cursor::before{content:"";position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1.5px solid #fff;transition:scale .4s cubic-bezier(.23,1,.32,1),background-color .3s ease,border-color .3s ease}
.cursor.link::before{scale:1.6}
.cursor.down::before{scale:.8}
.cursor.view{mix-blend-mode:normal}
.cursor.view::before{scale:2.6;background:rgba(59,86,73,.94);border-color:transparent}
.cursor span{position:absolute;left:0;top:0;translate:-50% -50%;font:600 .68rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:0;scale:.5;transition:opacity .25s ease,scale .4s cubic-bezier(.23,1,.32,1)}
.cursor.view span{opacity:1;scale:1}

/* text roll on menu links */
.roll{display:inline-grid;overflow:hidden;line-height:1.3;vertical-align:middle}
.roll>span{grid-area:1/1;transition:translate .5s cubic-bezier(.23,1,.32,1)}
.roll>.r2{translate:0 105%}
@media (hover:hover) and (pointer:fine){
  a:hover>.roll>span,button:hover>.roll>span,.dd.open>button>.roll>span{translate:0 -105%}
  a:hover>.roll>.r2,button:hover>.roll>.r2,.dd.open>button>.roll>.r2{translate:0 0}
}

/* footer reveal: on large screens the page slides up off the footer like a curtain */
@media (min-width:1000px) and (min-height:860px){
  main{position:relative;z-index:1;background:#fff}
  .ftr{position:sticky;bottom:0;z-index:0}
  @supports (animation-timeline: scroll()){@media (prefers-reduced-motion:no-preference){.ft-word{animation-timeline:scroll(root);animation-range:82% 100%}}}
}