/* MASONTECTURE — site styles
   Layout concept: a drawing sheet. Generous white field, hairline grid, section
   labels set like drawing title blocks, and the tan band from the letterhead
   carried into the contact section. The diagonal lines of the logo's "M" are the
   only ornament. */

:root {
  /* Colour — taken from the logo and letterhead */
  --paper: #ffffff;          /* sheet */
  --paper-2: #f6f3ee;        /* alternate section ground */
  --ink: #3d3112;            /* logo wordmark, deepened for body text contrast */
  --ink-soft: #5f5640;       /* secondary text */
  --bronze: #8a6236;         /* logo line colour, darkened to pass contrast as text/links */
  --tan: #c99d6c;            /* letterhead band */
  --tan-ink: #2b220c;        /* text set on the tan band */
  --rule: #e4ddd1;           /* hairlines */
  --placeholder: #f1ece4;    /* photo placeholders */
  --footer: #241d0b;         /* footer ground */
  --footer-fg: #efe7d8;
  --focus: #8a6236;
  --ok: #2f6b3a;
  --err: #a1361f;

  /* Type */
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "IBM Plex Sans Tamil", "Noto Sans Tamil", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.5rem + 4vw, 4.1rem);

  --measure: 64ch;
  --wrap: 1180px;
  --radius: 2px;
  --header-h: 76px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16130d; --paper-2: #1d1911; --ink: #efe7d8; --ink-soft: #c2b8a4;
    --bronze: #d4aa78; --tan: #c99d6c; --tan-ink: #22190a; --rule: #3a3326;
    --placeholder: #241f16; --footer: #0f0d08; --footer-fg: #efe7d8; --focus: #d4aa78;
    --ok: #7fc48b; --err: #f08b72;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .logo-on-light { display: none; }
  :root:not([data-theme="light"]) .logo-on-dark { display: block; }
}
:root[data-theme="dark"] {
  --paper: #16130d; --paper-2: #1d1911; --ink: #efe7d8; --ink-soft: #c2b8a4;
  --bronze: #d4aa78; --tan: #c99d6c; --tan-ink: #22190a; --rule: #3a3326;
  --placeholder: #241f16; --footer: #0f0d08; --footer-fg: #efe7d8; --focus: #d4aa78;
  --ok: #7fc48b; --err: #f08b72;
  color-scheme: dark;
}
:root[data-theme="dark"] .logo-on-light { display: none; }
:root[data-theme="dark"] .logo-on-dark { display: block; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bronze); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); font-weight: 750; font-stretch: 110%; }
h3 { font-size: var(--step-1); font-weight: 700; font-stretch: 105%; line-height: 1.25; }
p { margin: 0; max-width: var(--measure); }

.skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 100; }
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * 32px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}

/* Drawing-sheet label used above each section heading */
.sheet-label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bronze);
}
.sheet-label::after { content: ""; height: 1px; flex: 1; max-width: 120px; background: var(--rule); }

/* The logo's diagonal lines, used as a divider */
.m-lines {
  height: 14px;
  background: repeating-linear-gradient(115deg, transparent 0 9px, var(--tan) 9px 10px);
  opacity: 0.8;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--rule);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.brand { display: block; flex: none; }
.brand img { height: 56px; width: auto; }
.logo-on-dark { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.95rem var(--body); color: var(--ink);
  background: transparent; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 10px 14px; cursor: pointer;
}
.nav-toggle-bars { width: 18px; height: 12px; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after, .nav-toggle-bars span { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
.nav-toggle-bars::before { top: 0; } .nav-toggle-bars span { top: 5px; } .nav-toggle-bars::after { bottom: 0; }

.site-nav { display: none; }
.site-nav.open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding-block: 8px 20px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-nav a { display: block; padding: 12px 4px; color: var(--ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--rule); }
.site-nav a:hover, .site-nav a[aria-current="true"] { color: var(--bronze); }
.site-nav .nav-cta { margin-top: 12px; border: 0; }

@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.open { display: block; position: static; padding: 0; border: 0; background: none; }
  .site-nav ul { display: flex; align-items: center; gap: 22px; }
  .site-nav a { border: 0; padding: 8px 0; font-size: 0.95rem; }
  .site-nav .nav-cta { margin: 0 0 0 6px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 1rem/1.2 var(--body); text-decoration: none; cursor: pointer;
  padding: 14px 22px; border-radius: var(--radius); border: 1.5px solid var(--ink);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--bronze); border-color: var(--bronze); color: var(--paper); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-wa { background: #1f7a45; border-color: #1f7a45; color: #fff; }
.btn-wa:hover { background: #17633a; border-color: #17633a; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.site-nav .btn { padding: 10px 16px; color: var(--paper); }
.site-nav .btn:hover { color: var(--paper); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero::before { /* faint drafting grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .45;
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.hero-grid { position: relative; display: grid; gap: 40px; padding-block: 56px 64px; align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-copy .lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.55; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); letter-spacing: .04em; }
.hero-meta span::before { content: "— "; color: var(--tan); }

.hero-figure { margin: 0; min-width: 0; }
.hero-figure svg { width: 100%; height: auto; display: block; }
.hero-figure figcaption { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; text-align: right; }
.draw { stroke: var(--ink); fill: none; stroke-linecap: square; }
.draw-thin { stroke: var(--bronze); stroke-width: 1; }
.draw-med { stroke-width: 1.6; }
.draw-heavy { stroke-width: 2.4; }
.draw-dim { stroke: var(--tan); stroke-width: 1; }
.draw-text { fill: var(--ink-soft); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
.draw-hatch { stroke: var(--tan); stroke-width: .8; }
@media (prefers-reduced-motion: no-preference) {
  .js .draw-anim { stroke-dasharray: var(--len, 900); stroke-dashoffset: 0; animation: draw 1.6s cubic-bezier(.6,.05,.3,1) both; animation-delay: var(--d, 0s); }
  @keyframes draw { from { stroke-dashoffset: var(--len, 900); } to { stroke-dashoffset: 0; } }
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; padding-block: 88px 96px; }
}

/* ---------- Sections ---------- */
.section { padding-block: 72px; }
.section-alt { background: var(--paper-2); }
.section-head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.55; }
@media (min-width: 900px) { .section { padding-block: 104px; } }

/* About */
.about-grid { display: grid; gap: 40px; }
.principles { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.principle { display: grid; gap: 8px; padding-block: 24px; border-bottom: 1px solid var(--rule); }
.principle p { color: var(--ink-soft); }
.coverage {
  align-self: start; display: grid; gap: 14px; padding: 28px;
  border: 1px solid var(--rule); background: var(--paper);
}
.coverage h3 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: .08em; }
.coverage ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.coverage li { font-family: var(--display); font-weight: 750; font-stretch: 112%; font-size: var(--step-2); line-height: 1.2; }
.coverage p { color: var(--ink-soft); font-size: var(--step--1); }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.6fr 1fr; gap: 64px; } .principle { grid-template-columns: 220px 1fr; gap: 24px; } }

/* Services */
.services { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.service { background: var(--paper); padding: 28px 24px 30px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.section-alt .service { background: var(--paper-2); }
.service-code { font-family: var(--mono); font-size: 0.75rem; color: var(--bronze); letter-spacing: .1em; }
.service p { color: var(--ink-soft); }
.service ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-soft); display: grid; gap: 4px; font-size: 0.97rem; }
.service-feature { background: var(--ink) !important; }
.service-feature h3, .service-feature p, .service-feature .service-code { color: var(--paper); }
.service-feature a { color: var(--tan); }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }


/* Projects */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  font: 500 0.92rem var(--body); color: var(--ink); background: transparent;
  border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.project-grid { display: grid; gap: 28px; }
@media (min-width: 640px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
.project-card { display: grid; gap: 14px; min-width: 0; }
.project-open {
  all: unset; cursor: pointer; display: grid; gap: 14px;
}
.project-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.project-media { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; background: var(--placeholder); }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.project-open:hover .project-media img { transform: scale(1.03); }
.project-info { display: grid; gap: 6px; }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.status { color: var(--bronze); }
.project-open h3 { transition: color .18s ease; }
.project-open:hover h3 { color: var(--bronze); }
.project-more { font-size: 0.92rem; color: var(--bronze); font-weight: 600; }
.projects-note { margin-top: 32px; font-size: var(--step--1); color: var(--ink-soft); }

/* Placeholder artwork for missing photos — deliberately not a picture of a building */
.ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 18px;
  background:
    repeating-linear-gradient(115deg, transparent 0 13px, color-mix(in srgb, var(--tan) 45%, transparent) 13px 14px),
    var(--placeholder);
  border: 1px dashed var(--tan);
}
.ph span {
  background: var(--paper); color: var(--ink); padding: 8px 12px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
  border: 1px solid var(--rule);
}
.ph-badge {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border: 1px dashed var(--bronze); color: var(--bronze); width: fit-content;
}

/* Project dialog */
.project-dialog {
  width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); overflow: auto;
}
.project-dialog::backdrop { background: rgba(20, 16, 6, .62); }
.dialog-bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--rule); z-index: 1; }
.dialog-close { font: 600 0.95rem var(--body); background: transparent; color: var(--ink); border: 1px solid var(--rule); padding: 8px 14px; border-radius: var(--radius); cursor: pointer; }
.dialog-body { display: grid; gap: 24px; padding: 20px 16px 28px; }
@media (min-width: 720px) { .dialog-body { padding: 28px 32px 36px; } }
.gallery-main { position: relative; aspect-ratio: 3 / 2; max-width: 100%; background: var(--placeholder); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; background: var(--placeholder); }
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumbs button { all: unset; cursor: pointer; flex: none; width: 88px; aspect-ratio: 4/3; background: var(--placeholder); outline: 2px solid transparent; outline-offset: 2px; }
.gallery-thumbs button[aria-current="true"] { outline-color: var(--bronze); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.spec { display: grid; grid-template-columns: minmax(0, 140px) 1fr; border-top: 1px solid var(--rule); margin: 0; }
.spec dt, .spec dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font-family: var(--mono); font-size: 0.76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding-top: 15px; }
.spec dd { min-width: 0; }

/* Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--rule); }
.step { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: 6px 20px; padding-block: 26px; border-bottom: 1px solid var(--rule); }
.step::before {
  content: counter(step, decimal-leading-zero); grid-row: span 2;
  font-family: var(--display); font-weight: 800; font-stretch: 115%; font-size: 1.6rem; color: var(--tan); line-height: 1;
}
.step p { color: var(--ink-soft); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, 1fr); border-top: 0; border-left: 1px solid var(--rule); }
  .step { grid-template-columns: 1fr; padding: 4px 22px 8px; border-bottom: 0; border-right: 1px solid var(--rule); align-content: start; gap: 14px; }
  .step::before { grid-row: auto; font-size: 2.2rem; }
}

/* Contact band */
.contact { background: var(--tan); color: var(--tan-ink); }
.contact h2, .contact h3, .contact .sheet-label { color: var(--tan-ink); }
.contact .sheet-label::after { background: color-mix(in srgb, var(--tan-ink) 30%, transparent); }
.contact .section-head p { color: var(--tan-ink); }
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid color-mix(in srgb, var(--tan-ink) 25%, transparent); }
.contact-item { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid color-mix(in srgb, var(--tan-ink) 25%, transparent); }
.contact-item .k { font-family: var(--mono); font-size: 0.74rem; letter-spacing: .1em; text-transform: uppercase; }
.contact-item .v { font-size: var(--step-1); font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; overflow-wrap: anywhere; }
.contact-item a { color: var(--tan-ink); }
.contact-item address { font-style: normal; font-size: var(--step-0); font-weight: 500; }
.copy-btn { font: 500 0.8rem var(--body); color: var(--tan-ink); background: transparent; border: 1px solid color-mix(in srgb, var(--tan-ink) 40%, transparent); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.copy-btn:hover { background: color-mix(in srgb, var(--tan-ink) 10%, transparent); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contact .btn-line { border-color: var(--tan-ink); color: var(--tan-ink); }
.contact .btn-line:hover { background: var(--tan-ink); color: var(--tan); }

.form-card { background: var(--paper); color: var(--ink); padding: 28px 22px; border-radius: var(--radius); display: grid; gap: 18px; }
@media (min-width: 720px) { .form-card { padding: 36px 34px; } }
.form-card h3 { color: var(--ink); }
.form-intro { color: var(--ink-soft); font-size: var(--step--1); }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .field-full { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: 0.93rem; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem var(--body); color: var(--ink); background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: var(--radius); padding: 12px 12px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field-error { color: var(--err); font-size: 0.85rem; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-status { font-size: 0.95rem; padding: 14px 16px; border: 1px solid var(--rule); border-left-width: 3px; display: grid; gap: 10px; }
.form-status.is-ok { border-left-color: var(--ok); }
.form-status.is-err { border-left-color: var(--err); }
.form-status.is-info { border-left-color: var(--bronze); }
.form-status .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.privacy-note { font-size: 0.82rem; color: var(--ink-soft); }

/* Footer */
.site-footer { background: var(--footer); color: var(--footer-fg); padding-block: 56px 32px; }
.site-footer a { color: var(--footer-fg); }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: auto 1fr 1fr; gap: 56px; } }
.footer-logo { height: 96px; width: auto; }
.footer-col { display: grid; gap: 8px; align-content: start; font-size: 0.95rem; }
.footer-col h2 { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tan); font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--footer-fg) 18%, transparent); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 0.85rem; opacity: .85; }

/* Floating WhatsApp button on phones */
.wa-float {
  position: fixed; z-index: 40;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #1f7a45; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.wa-float svg { width: 28px; height: 28px; }
@media (min-width: 1000px) { .wa-float { display: none; } }