:root{
  --bg:#eef3f6;--bg-2:#e3ebf0;--card:#ffffff;--line:#d6dfe5;
  --ink:#1c3a4b;--ink-2:#24485c;--ink-3:#2a6a78;--text:#1f2f3a;--muted:#5f6b72;
  --accent:#2f8f9d;--accent-d:#247a86;--wa:#25d366;--wa-d:#1ebe5b;
  --radius:18px;--shadow:0 12px 40px rgba(28,58,75,.07);
  --head:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--body);color:var(--text);background:linear-gradient(180deg,#f4f7f9 0%,var(--bg) 40%,#e9f0f4 100%);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--accent-d)}
h1,h2,h3,h4{font-family:var(--head);font-weight:500;line-height:1.1;margin:0 0 .45em;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2.4rem,5.2vw,4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h3{font-size:1.35rem}
h1 em,h2 em{font-style:italic;color:var(--accent)}.hero h1 em,.dark h2 em{color:#8fd6e0}
p{margin:0 0 1em}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}

/* header: floating pill */
header.top{position:sticky;top:.9rem;z-index:50;pointer-events:none}
header.top .wrap{pointer-events:auto;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(240,247,250,.95));backdrop-filter:blur(10px);border:1px solid rgba(28,58,75,.08);border-radius:999px;display:flex;align-items:center;gap:1rem;padding:.55rem .6rem .55rem 1rem;box-shadow:0 8px 30px rgba(28,58,75,.10)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-family:var(--head);font-size:1.25rem;font-weight:600}
.brand img{height:34px;width:34px;border-radius:9px}
.brand span{line-height:1.05}
.brand small{display:block;font-family:var(--body);font-weight:600;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:.15rem}
footer .brand img{height:28px;width:28px}
nav.links{margin-left:auto;display:flex;gap:1.3rem;align-items:center}
nav.links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.92rem}
nav.links a:hover{color:var(--accent)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:.75rem;font-weight:600}
.lang a,.lang span{padding:.25rem .6rem;color:var(--muted);text-decoration:none}
.lang span{background:linear-gradient(135deg,var(--ink),var(--ink-3));color:#fff}
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--ink) 0%,var(--ink-3) 100%);color:#fff;text-decoration:none;font-weight:600;padding:.8rem 1.4rem;border-radius:999px;border:0;cursor:pointer;font-size:.95rem}
.btn:hover{background:linear-gradient(135deg,var(--ink-2) 0%,var(--accent) 100%)}
.btn svg{width:18px;height:18px}
.btn.wa{background:linear-gradient(135deg,#2ee27a 0%,var(--wa) 100%);color:#08351a}.btn.wa:hover{background:linear-gradient(135deg,var(--wa) 0%,var(--wa-d) 100%)}
.btn.ghost{background:transparent;border:1.5px solid currentColor;color:inherit}
.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{background:#e6f2f5}
.menu-btn{display:none;background:none;border:0;color:var(--ink);font-size:1.6rem;margin-left:auto;cursor:pointer;line-height:1}
@media (max-width:900px){
  .menu-btn{display:block}
  header.top .wrap{position:relative}
  nav.links{position:absolute;left:0;right:0;top:calc(100% + .5rem);background:#fff;border:1px solid var(--line);border-radius:18px;flex-direction:column;align-items:flex-start;padding:1rem 1.2rem;gap:.8rem;display:none;box-shadow:var(--shadow)}
  nav.links.open{display:flex}
  header.top .wrap>.btn{display:none}
}

/* hero */
.hero{position:relative;margin-top:-4.6rem;min-height:82vh;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(28,58,75,.25) 0%,rgba(28,58,75,.55) 50%,rgba(20,70,85,.9) 100%);z-index:-1}
.hero .wrap{padding:9rem 0 3.5rem}
.hero .kicker{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#c7dbe3;margin-bottom:1rem}
.hero h1{color:#fff;max-width:14ch}
.hero .lead{max-width:56ch;font-size:1.1rem;color:#e2ecf1}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.stats{display:flex;gap:3rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.2);margin-top:2.5rem;padding-top:1.5rem}
.stats div b{display:block;font-family:var(--head);font-size:2rem;font-weight:500;line-height:1;color:#fff}
.stats div span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#c7dbe3}

/* sections */
section{padding:5rem 0}
section.tint{background:linear-gradient(180deg,var(--bg-2) 0%,#dce6ec 100%)}
section.dark{background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 60%,var(--ink-3) 100%);color:#fff}
.dark h2,.dark h3{color:#fff}
.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:.9rem}
.dark .eyebrow{color:#9ab4c0}
.intro{max-width:62ch;color:var(--muted);font-size:1.05rem}
.dark .intro{color:#c1d3dc}
.sec-head{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:end;margin-bottom:2.2rem}
.sec-head h2{max-width:16ch;margin:0}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}}

/* service cards (image backgrounds) */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media (max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}
.svc{position:relative;border-radius:var(--radius);overflow:hidden;min-height:400px;display:flex;align-items:flex-end;text-decoration:none;color:#fff;isolation:isolate}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,58,75,0) 30%,rgba(28,58,75,.9) 100%);z-index:-1}
.svc .body{padding:1.5rem}
.svc h3{color:#fff;margin-bottom:.3rem}
.svc p{color:#c7dbe3;font-size:.92rem;margin:0}
.svc .go{display:inline-block;margin-top:.7rem;font-weight:600;font-size:.9rem;color:#fff}

/* feature panel */
.panel{background:linear-gradient(135deg,#ffffff 0%,#f3f8fa 100%);border-radius:24px;box-shadow:var(--shadow);padding:3rem;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.panel .btn{margin-top:.5rem}
.checklist{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.6rem}
.checklist .hd{display:flex;gap:.9rem;align-items:center;margin-bottom:.8rem}
.checklist .hd i{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--ink),var(--accent));display:grid;place-items:center;color:#fff;flex:none}
.checklist .hd i svg{width:22px;height:22px}
.checklist .hd b{display:block}.checklist .hd small{color:var(--muted)}
.checklist ul{list-style:none;margin:0;padding:0}
.checklist li{padding:.6rem 0;border-top:1px solid var(--line);font-size:.93rem;display:flex;gap:.6rem}
.checklist li::before{content:"\2713";color:var(--accent);font-weight:700}
@media (max-width:900px){.panel{grid-template-columns:1fr;padding:2rem}}

/* gallery */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.tabs button{background:#fff;border:1px solid var(--line);padding:.55rem 1rem;border-radius:999px;font-weight:600;cursor:pointer;color:var(--ink);font-family:inherit;font-size:.9rem}
.tabs button.on{background:linear-gradient(135deg,var(--ink),var(--ink-3));color:#fff;border-color:var(--ink)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.gal figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;cursor:zoom-in;background:#000}
.gal img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;font-size:.82rem;color:#fff;background:linear-gradient(transparent,rgba(28,58,75,.8))}
.gal figure[hidden]{display:none}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gal{grid-template-columns:1fr}}
.lightbox{position:fixed;inset:0;background:rgba(28,58,75,.94);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.lightbox img{max-height:90vh;max-width:95vw;border-radius:8px}
.lightbox button{position:absolute;top:1rem;right:1rem;background:#fff;border:0;border-radius:50%;width:42px;height:42px;font-size:1.4rem;cursor:pointer}

/* steps */
.step{background:linear-gradient(180deg,#ffffff,#f5f9fb);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
.step .n{font-family:var(--head);color:var(--accent);font-size:.9rem;margin-bottom:.6rem}
.step h3{margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.93rem;margin:0}

/* faq */
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:.6rem;padding:0 1.3rem}
.faq summary{cursor:pointer;font-weight:600;padding:1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1;font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:1rem;color:var(--muted)}

/* CTA panel */
.cta-panel{background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 55%,var(--ink-3) 100%);color:#fff;border-radius:28px;padding:3rem;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.cta-panel h2{color:#fff;margin-bottom:.5rem}
.cta-panel p{color:#c1d3dc}
.cta-panel .checklist{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.cta-panel .checklist .hd i{background:var(--wa);color:#08351a}
.cta-panel .checklist .hd small{color:#9ab4c0}
.cta-panel .checklist li{border-color:rgba(255,255,255,.12)}
.cta-panel .checklist li::before{color:var(--wa)}
@media (max-width:900px){.cta-panel{grid-template-columns:1fr;padding:2rem}}

/* tools (services pages only) */
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.dark .tool{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.tool label{display:block;font-weight:600;font-size:.9rem;margin:.8rem 0 .3rem}
.tool select,.tool input{width:100%;padding:.65rem .8rem;border-radius:10px;border:1px solid var(--line);font:inherit;background:#fff;color:var(--text)}
.dark .tool select,.dark .tool input{background:#16303e;border-color:rgba(255,255,255,.2);color:#fff}
.tool output{display:block;margin-top:1rem;padding:1rem;border-radius:12px;background:rgba(47,143,157,.12);border-left:3px solid var(--accent)}
.tool output b{font-family:var(--head);font-size:1.8rem;font-weight:500;color:var(--accent)}
.dark .tool output b{color:#8fd6e0}
.tool .note{font-size:.78rem;color:var(--muted);margin-top:.6rem}
.dark .tool .note{color:#9ab4c0}
.gauge{height:10px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin-top:.6rem}
.dark .gauge{background:rgba(255,255,255,.1)}
.gauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#8fd6e0)}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{position:relative;padding:.9rem 1rem .9rem 3.2rem;border:1px solid rgba(255,255,255,.14);border-radius:12px;margin-bottom:.6rem;background:rgba(255,255,255,.06);cursor:pointer;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:.9rem;top:.85rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.85rem}
.steps li.done{opacity:.55;text-decoration:line-through}
.steps li.done::before{content:"\2713";background:var(--wa);color:#08351a}
.steps li p{margin:.2rem 0 0;font-size:.9rem;color:#c1d3dc}

/* inner pages */
.page-hero{background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 60%,var(--ink-3) 100%);color:#fff;padding:8.5rem 0 3.5rem;margin-top:-4.6rem}
.page-hero h1{color:#fff;margin:0 0 .3em}
.page-hero p{color:#c1d3dc;max-width:65ch;font-size:1.1rem;margin:0}
.crumbs{font-size:.78rem;color:#9ab4c0;margin-bottom:.8rem}
.crumbs a{color:#c7dbe3;text-decoration:none}
.prose{max-width:72ch}
.prose h2{font-size:1.7rem;margin-top:1.8em}
.prose ul{padding-left:1.2rem;color:var(--muted)}
.prose>img{aspect-ratio:16/10;height:auto;width:100%;object-fit:cover;border-radius:var(--radius);margin-bottom:1.6rem}
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.side{position:sticky;top:6rem}
.quote-box{background:linear-gradient(135deg,#ffffff,#f3f8fa);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
.quote-box .btn{width:100%;justify-content:center;margin-top:.6rem}
.chips{display:flex;gap:.6rem;flex-wrap:wrap}
.chips a{background:#fff;border:1px solid var(--line);padding:.5rem .9rem;border-radius:999px;text-decoration:none;font-weight:500;color:var(--ink);font-size:.9rem}
.chips a:hover{border-color:var(--accent);color:var(--accent)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);font-size:.95rem}
.card .more{font-weight:600;text-decoration:none}

/* contact */
form.contact{display:grid;gap:.8rem}
form.contact input,form.contact select,form.contact textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}
.contact-cards{display:grid;gap:.9rem}
.contact-cards a{display:flex;gap:1rem;align-items:center;background:#fff;border-radius:14px;padding:1rem 1.2rem;text-decoration:none;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.contact-cards a svg{width:26px;height:26px;color:var(--accent)}

/* footer */
footer{padding:2.5rem 0 6rem;font-size:.88rem;color:var(--muted)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:2rem}
footer .brand{font-size:1.1rem}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
footer nav a{color:var(--ink);text-decoration:none}
footer nav a:hover{color:var(--accent)}

/* sticky mobile bar */
.sticky-call{display:none}
@media (max-width:900px){
  .sticky-call{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70}
  .sticky-call a{flex:1;text-align:center;padding:.95rem;font-weight:700;text-decoration:none;font-size:1rem}
  .sticky-call a.call{background:linear-gradient(135deg,var(--ink),var(--ink-3));color:#fff}
  .sticky-call a.wa{background:var(--wa);color:#08351a}
}
@media (max-width:520px){.hero .wrap{padding-top:7.5rem}.stats{gap:1.5rem}}

/* ===== Interaction layer: plumbing and construction themed ===== */
/* Buttons: simple lift on hover */
.btn{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,58,75,.22);filter:brightness(1.06)}
.btn:active{transform:translateY(0);box-shadow:0 3px 10px rgba(28,58,75,.2)}

/* Service cards: image tightens in, a copper-free "pipe" line draws under the title with a joint at the end */
.svc{transition:transform .35s ease,box-shadow .35s ease}
.svc img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.svc:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(28,58,75,.25)}
.svc:hover img{transform:scale(1.06)}
.svc h3{position:relative;display:inline-block;padding-bottom:.35rem}
.svc h3::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#8fd6e0,var(--accent));border-radius:2px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.svc h3::before{content:"";position:absolute;bottom:-3px;left:0;width:9px;height:9px;border-radius:50%;background:#8fd6e0;box-shadow:0 0 0 3px rgba(143,214,224,.35);opacity:0;transition:left .5s cubic-bezier(.2,.8,.2,1),opacity .2s}
.svc:hover h3::after{width:100%}
.svc:hover h3::before{opacity:1;left:calc(100% - 9px)}
.svc .go{transition:transform .3s ease,color .3s}
.svc:hover .go{transform:translateX(6px);color:#8fd6e0}

/* Step cards: lift on hover, number spins */
.step{transition:transform .3s ease,box-shadow .3s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,58,75,.16)}
.step .n{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:2px solid var(--line);color:var(--accent);font-weight:600;transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease}
.step:hover .n{transform:rotate(360deg);border-color:var(--accent)}

/* Checklist rows: tick tightens like a nut being turned */
.checklist li{transition:padding-left .25s ease,color .25s}
.checklist li::before{display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.checklist li:hover{padding-left:.4rem}
.checklist li:hover::before{transform:rotate(-20deg) scale(1.25)}

/* Panels and cards lift slightly, like a tile being set */
.panel,.card,.quote-box,.tool{transition:transform .3s ease,box-shadow .3s ease}
.panel:hover,.card:hover,.quote-box:hover,.tool:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(28,58,75,.14)}
.cta-panel{transition:box-shadow .3s ease}
.cta-panel:hover{box-shadow:0 26px 60px rgba(28,58,75,.3)}

/* Gallery tiles: caption rises like a water level, image tightens */
.gal img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.gal figcaption{transform:translateY(30%);opacity:.85;transition:transform .4s ease,opacity .4s ease,background .4s}
.gal figure:hover img{transform:scale(1.06)}
.gal figure:hover figcaption{transform:none;opacity:1;background:linear-gradient(transparent,rgba(28,58,75,.92))}
.gal figure::after{content:"";position:absolute;inset:0;border-radius:var(--radius);box-shadow:inset 0 0 0 0 rgba(143,214,224,0);transition:box-shadow .3s}
.gal figure:hover::after{box-shadow:inset 0 0 0 3px rgba(143,214,224,.9)}

/* FAQ: the plus turns like a tap handle when opened, row highlights */
.faq details{transition:border-color .25s,box-shadow .25s,transform .25s}
.faq details:hover{border-color:var(--accent);transform:translateX(3px)}
.faq summary::after{transition:transform .35s ease,color .25s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details[open]{border-color:var(--accent);box-shadow:0 10px 30px rgba(28,58,75,.1)}

/* Chips and tabs: fill with teal like a pipe filling */
.chips a,.tabs button{position:relative;overflow:hidden;transition:color .3s,border-color .3s,transform .2s}
.chips a::before,.tabs button:not(.on)::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--ink),var(--accent));transform:translateX(-101%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:-1}
.chips a,.tabs button{z-index:0}
.chips a:hover,.tabs button:not(.on):hover{color:#fff;border-color:transparent;transform:translateY(-2px)}
.chips a:hover::before,.tabs button:not(.on):hover::before{transform:none}

/* Nav links: pipe underline */
nav.links a{position:relative;padding-bottom:2px}
nav.links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);border-radius:2px;transition:width .3s ease}
nav.links a:hover::after{width:100%}

/* Contact cards and stats */
.contact-cards a{transition:transform .25s ease,box-shadow .25s ease}
.contact-cards a:hover{transform:translateX(6px);box-shadow:0 16px 36px rgba(28,58,75,.16)}
.contact-cards a svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.contact-cards a:hover svg{transform:rotate(-15deg) scale(1.15)}
.stats div{transition:transform .25s ease}
.stats div:hover{transform:translateY(-3px)}
.stats div b{transition:color .25s}
.stats div:hover b{color:#8fd6e0}

/* Form fields: teal focus ring */
form.contact input:focus,form.contact select:focus,form.contact textarea:focus,.tool select:focus,.tool input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(47,143,157,.18)}

/* Emergency steps: tick gets a satisfying press */
.steps li{transition:transform .2s ease,background .3s,border-color .3s}
.steps li:hover{transform:translateX(4px);border-color:rgba(143,214,224,.5)}
.steps li:active{transform:scale(.99)}
.steps li.done{transition:opacity .4s,transform .3s}

@media (prefers-reduced-motion:reduce){
  .btn,.step,.svc,.svc img,.svc h3::after,.svc h3::before,.step .n,.gal img,.gal figcaption,.chips a::before,.tabs button::before,.panel,.card,.quote-box,.tool,.faq details,.contact-cards a,.stats div{transition:none!important;animation:none!important}
}
.svc,.gal figure{-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}