/* ==========================================================================
   House360 — apagency.ca/house360
   Palette: drafting ink, cool concrete, chalk-line blue, survey yellow.
   Type: Archivo (variable width — set expanded for display), Newsreader (prose).
   ========================================================================== */

:root{
  --ink:        #16233c;
  --ink-2:      #0d1729;
  --ink-3:      #223257;
  --paper:      #e8e9e4;
  --paper-2:    #f4f4f1;
  --card:       #fdfdfc;
  --rule:       #c6c8c0;
  --rule-soft:  #d8d9d3;
  --mark:       #d9a521;   /* survey yellow — used sparingly, on purpose */
  --chalk:      #3a6ea5;
  --text:       #16233c;
  --text-mute:  #59627a;
  --text-inv:   #e8e9e4;
  --text-inv-mute:#9aa4bb;

  --shell: 1280px;
  --gut: clamp(1.25rem, 4vw, 4rem);

  --f-disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-prose:'Newsreader', Georgia, 'Times New Roman', serif;

  --step-6: clamp(2.35rem, 1.5rem + 2.9vw, 3.6rem);
  --step-5: clamp(2.15rem, 1.3rem + 3.6vw, 4rem);
  --step-4: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --step-3: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  --step-2: 1.2rem;
  --step-1: 1.0625rem;
  --step-0: 0.9375rem;
  --step--1:0.8125rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--f-prose); font-size:var(--step-1); line-height:1.65;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--f-disp); font-weight:700; line-height:1.02;
  letter-spacing:-.022em; margin:0;
  font-variation-settings:'wdth' 112;
}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}

:focus-visible{outline:3px solid var(--chalk); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--ink); color:var(--text-inv); padding:.6rem 1rem}

.shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}

/* --- masthead ----------------------------------------------------------- */
.mast{position:sticky; top:0; z-index:50; background:var(--ink); color:var(--text-inv)}
.mast__in{
  max-width:var(--shell); margin-inline:auto; padding:0 var(--gut);
  display:flex; align-items:center; gap:2rem; height:var(--mast-h);
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:none}
.brand__mark{width:30px; height:30px; color:var(--text-inv)}
/* The client's own logo (tools/house360/build_logo.py). Sized to be read, not implied. */
:root{--mast-h:104px}
.brand__logo{display:block; height:84px; width:auto}
.foot__logo{display:block; height:170px; width:auto; margin-bottom:1rem}
.hero__logo{display:block; height:clamp(120px,14vw,180px); width:auto; margin-bottom:1.75rem}
.brand__word{
  font-family:var(--f-disp); font-weight:700; font-size:1.28rem;
  letter-spacing:-.03em; font-variation-settings:'wdth' 118;
}
.brand__num{color:var(--mark)}

.nav{display:flex; align-items:center; gap:.35rem; margin-right:auto}
.nav__item{position:relative}
.nav__link{
  display:inline-block; background:none; border:0; cursor:pointer;
  font-family:var(--f-disp); font-size:var(--step-0); font-weight:500;
  color:var(--text-inv); text-decoration:none; padding:.55rem .8rem; border-radius:2px;
}
.nav__link:hover{color:var(--mark)}

.mast__act{display:flex; align-items:center; gap:1rem; flex:none}
.tel{font-family:var(--f-disp); font-weight:600; font-size:var(--step-0); text-decoration:none; font-variant-numeric:tabular-nums}
.tel:hover{color:var(--mark)}

.btn{
  display:inline-block; font-family:var(--f-disp); font-weight:600;
  font-size:var(--step-0); letter-spacing:.005em; text-decoration:none;
  padding:.7rem 1.15rem; border:1.5px solid transparent; border-radius:2px; cursor:pointer;
}
.btn--mark{background:var(--mark); color:var(--ink-2); border-color:var(--mark)}
.btn--mark:hover{background:#e8b839; border-color:#e8b839}
.btn--ink{background:var(--ink); color:var(--text-inv); border-color:var(--ink)}
.btn--ink:hover{background:var(--ink-3); border-color:var(--ink-3)}
.btn--ghost{background:none; color:inherit; border-color:currentColor}
.btn--ghost:hover{background:rgba(232,233,228,.12)}
.btn--lg{padding:.95rem 1.6rem; font-size:var(--step-1)}

/* --- mega menu ---------------------------------------------------------- */
.mega{
  position:absolute; top:calc(100% + 12px); left:-1rem; z-index:60;
  background:var(--card); color:var(--ink);
  border:1px solid var(--rule); box-shadow:0 24px 60px -24px rgba(13,23,41,.45);
  width:min(78vw, 880px);
}
.mega__in{display:grid; grid-template-columns:repeat(3,1fr)}
.mega__col{padding:1.6rem 1.5rem; border-right:1px solid var(--rule-soft)}
.mega__col:last-child{border-right:0}
.mega__head{font-family:var(--f-disp); font-weight:700; font-size:var(--step-2); margin:0 0 .35rem; font-variation-settings:'wdth' 112}
.mega__blurb{font-size:var(--step--1); color:var(--text-mute); line-height:1.5; margin:0 0 1rem}
.mega__col li{border-top:1px solid var(--rule-soft)}
.mega__col a{
  display:block; padding:.6rem 0; text-decoration:none;
  font-family:var(--f-disp); font-size:var(--step-0); font-weight:500;
}
.mega__col a:hover{color:var(--chalk)}

/* --- mobile drawer ------------------------------------------------------ */
.burger{display:none; background:none; border:0; padding:.5rem; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:currentColor; margin:5px 0}
.drawer{position:fixed; inset:var(--mast-h) 0 0; z-index:45; background:var(--ink); color:var(--text-inv); overflow-y:auto; padding:1.5rem var(--gut) 4rem}
.drawer a{display:block; padding:.65rem 0; text-decoration:none; font-family:var(--f-disp); font-size:1.1rem; border-bottom:1px solid rgba(232,233,228,.12)}
.drawer__head{font-family:var(--f-disp); font-weight:700; font-size:var(--step--1); color:var(--mark); margin:1.6rem 0 .3rem}
.drawer__tel{color:var(--mark); font-weight:700; margin-top:1.5rem; border:0}

/* --- hero: the cross-section ------------------------------------------- */
.hero{background:var(--ink); color:var(--text-inv); overflow:hidden}
.hero__in{
  max-width:var(--shell); margin-inline:auto; padding:clamp(3rem,6vw,5.5rem) var(--gut) clamp(2.5rem,5vw,4rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero h1{
  font-size:var(--step-6); font-variation-settings:'wdth' 108;
  letter-spacing:-.032em; margin:0 0 1.3rem; max-width:17ch;
}
.hero__lede{font-size:var(--step-2); line-height:1.6; color:var(--text-inv); max-width:44ch; margin-bottom:1.1rem}
.hero__sub{font-size:var(--step-0); color:var(--text-inv-mute); max-width:46ch; font-family:var(--f-disp); line-height:1.6}
.hero__act{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}

.hero__figure{position:relative}

/* hero on a real site photograph: the photo fills the band, a left-weighted ink
   wash keeps the headline at full contrast over any part of the image */
.hero--photo{position:relative; isolation:isolate}
.hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 45%; z-index:-2}
.hero--photo::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(21,34,62,.94) 0%, rgba(21,34,62,.82) 38%, rgba(21,34,62,.35) 70%, rgba(21,34,62,.15) 100%)}
.hero--photo .hero__in{grid-template-columns:minmax(0,1fr); min-height:clamp(30rem,72vh,44rem); align-content:center}
.hero--photo .hero__in > div{max-width:40rem}
.tradebody--solo{grid-template-columns:minmax(0,1fr)}
.tradebody--solo .prose{max-width:68ch}
.hero__figure svg{width:100%; height:auto}

/* diagram parts */
.dg-sky{fill:#101b30}
.dg-earth{fill:#0a1323}
.dg-line{stroke:#4a5a7d; stroke-width:1.6; fill:none}
.dg-fill{fill:#1c2a48}
.dg-fill-2{fill:#243553}
.dg-grade{stroke:var(--paper); stroke-width:2.2}
.dg-hatch line{stroke:#2c3d60; stroke-width:1.4}
.dg-snow{fill:#5b6d92}
.dg-lead{stroke:#3d4f73; stroke-width:1.2; fill:none}
.dg-label{
  font-family:var(--f-disp); font-size:19px; font-weight:500;
  fill:var(--text-inv-mute); letter-spacing:-.01em;
}
.dg-depth{font-family:var(--f-disp); font-size:14px; fill:#4f5f80; font-variant-numeric:tabular-nums}

.dg-g{cursor:pointer}
.dg-g:hover .dg-label,
.dg-g:focus-visible .dg-label,
.dg-g.is-on .dg-label{fill:var(--mark); font-weight:700}
.dg-g:hover .dg-lead,
.dg-g.is-on .dg-lead{stroke:var(--mark)}
.dg-g:hover .dg-dot,
.dg-g.is-on .dg-dot{fill:var(--mark)}
.dg-dot{fill:#4a5a7d; transition:fill .18s}
.dg-hit{fill:transparent}

.dg-zone{fill:var(--mark); opacity:0; transition:opacity .22s ease}
.dg-zone.is-on{opacity:.17}

/* --- generic sections --------------------------------------------------- */
.sec{padding:clamp(3.5rem,7vw,6.5rem) 0}
.sec--tight{padding:clamp(2.5rem,5vw,4rem) 0}
.sec--paper2{background:var(--paper-2)}
.sec--ink{background:var(--ink); color:var(--text-inv)}
.sec--ink .lede{color:var(--text-inv-mute)}

.sec__head{max-width:60ch; margin-bottom:clamp(2rem,4vw,3.25rem)}
.sec__head h2{font-size:var(--step-5); margin-bottom:.9rem}
.lede{font-size:var(--step-2); color:var(--text-mute); line-height:1.6; max-width:58ch}

.rule-top{border-top:1px solid var(--rule)}

/* --- the three domains -------------------------------------------------- */
.domains{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2.25rem)}
.domain{display:flex; flex-direction:column}
.domain h3{font-size:var(--step-4); margin:1.25rem 0 .6rem}
.domain p{color:var(--text-mute); font-size:var(--step-0)}
.domain ul{margin-top:.5rem; border-top:1px solid var(--rule)}
.domain li{border-bottom:1px solid var(--rule-soft)}
.domain li a{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0; text-decoration:none; font-family:var(--f-disp);
  font-size:var(--step-1); font-weight:500;
}
.domain li a:hover{color:var(--chalk)}
.domain li a span{font-size:var(--step--1); color:var(--text-mute); font-variant-numeric:tabular-nums; flex:none}

/* --- media slots -------------------------------------------------------- */
.media{margin:0; position:relative}
.media img{width:100%; height:100%; object-fit:cover; aspect-ratio:var(--ratio)}
.media figcaption{
  font-family:var(--f-disp); font-size:var(--step--1); color:var(--text-mute);
  padding-top:.6rem; line-height:1.45;
}
.media--empty{background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(22,35,60,.045) 9px 10px),
    var(--paper-2);
  border:1px solid var(--rule);
}
.media--empty .media__spec{
  aspect-ratio:var(--ratio); display:flex; flex-direction:column;
  justify-content:flex-end; gap:.4rem; padding:1.1rem;
}
.media__slot{font-family:var(--f-disp); font-weight:700; font-size:var(--step-0); color:var(--ink)}
.media__ratio{font-family:var(--f-disp); font-size:var(--step--1); color:var(--chalk); font-variant-numeric:tabular-nums}
.media__note{font-size:var(--step--1); color:var(--text-mute); line-height:1.45; margin:0; max-width:42ch}
.sec--ink .media--empty{background:repeating-linear-gradient(135deg, transparent 0 9px, rgba(232,233,228,.05) 9px 10px), var(--ink-2); border-color:#2b3a5c}
.sec--ink .media__slot{color:var(--text-inv)}
.sec--ink .media__note{color:var(--text-inv-mute)}

/* --- process (a real sequence, so it is numbered) ----------------------- */
.steps{list-style:none; padding-left:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--rule)}
.step{padding:1.6rem 1.4rem 1.8rem 0; border-right:1px solid var(--rule-soft)}
.step:last-child{border-right:0}
.step__n{
  font-family:var(--f-disp); font-weight:700; font-size:var(--step--1);
  color:var(--mark); display:block; margin-bottom:.9rem; font-variant-numeric:tabular-nums;
}
.sec--ink .step__n{color:var(--mark)}
.step h3{font-size:var(--step-2); margin-bottom:.5rem}
.step p{font-size:var(--step-0); color:var(--text-mute); margin:0}
.sec--ink .step p{color:var(--text-inv-mute)}
.sec--ink .steps{border-top-color:#33445f}
.sec--ink .step{border-right-color:#2a3a58}

/* --- credentials -------------------------------------------------------- */
.creds{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.25rem,3vw,2.5rem)}
.cred{border-top:2px solid var(--ink)}
.cred h3{font-size:var(--step-2); margin:.9rem 0 .5rem}
.cred p{font-size:var(--step-0); color:var(--text-mute); margin:0}

/* --- stats -------------------------------------------------------------- */
.stats{display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,4.5rem)}
.stat__v{font-family:var(--f-disp); font-weight:700; font-size:var(--step-5); font-variation-settings:'wdth' 105; letter-spacing:-.04em; line-height:1}
.stat__k{font-family:var(--f-disp); font-size:var(--step-0); color:var(--text-mute); margin-top:.35rem; max-width:22ch; line-height:1.4}
.sec--ink .stat__k{color:var(--text-inv-mute)}

/* --- projects ----------------------------------------------------------- */
.grid-work{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2.2vw,2rem)}
.work{grid-column:span 4}
.work--wide{grid-column:span 8}
.work--half{grid-column:span 6}
.work h3{font-size:var(--step-2); margin:.9rem 0 .25rem}
.work__meta{font-family:var(--f-disp); font-size:var(--step--1); color:var(--text-mute); line-height:1.5}
.work__meta b{font-weight:600; color:var(--ink)}

/* --- trade page --------------------------------------------------------- */
.crumbs{font-family:var(--f-disp); font-size:var(--step--1); color:var(--text-inv-mute); padding-top:1.5rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--mark)}
.tradehead{background:var(--ink); color:var(--text-inv)}
.tradehead__in{
  max-width:var(--shell); margin-inline:auto; padding:0 var(--gut) clamp(3rem,5vw,4.5rem);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,4vw,4rem); align-items:end;
}
.tradehead h1{font-size:var(--step-5); margin:1.2rem 0 1.1rem; max-width:16ch}
.tradehead__lede{font-family:var(--f-prose); font-size:var(--step-3); line-height:1.45; color:var(--text-inv); max-width:34ch}
.tradehead__depth{font-family:var(--f-disp); font-size:var(--step--1); color:var(--mark); font-variant-numeric:tabular-nums}

.tradebody{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.prose{font-size:var(--step-2); line-height:1.7; max-width:62ch}
.prose p{margin-bottom:1.1em}
.scope{border-top:1px solid var(--rule)}
.scope li{border-bottom:1px solid var(--rule-soft); padding:.72rem 0; font-family:var(--f-disp); font-size:var(--step-0)}
.scope__head{font-family:var(--f-disp); font-weight:700; font-size:var(--step-2); margin:0 0 .9rem}
.note{
  background:var(--ink); color:var(--text-inv); padding:1.5rem 1.6rem;
  border-left:4px solid var(--mark); margin-top:2rem;
}
.note p{margin:0; font-size:var(--step-1); line-height:1.6}
.note b{font-family:var(--f-disp); font-weight:700; display:block; font-size:var(--step--1); color:var(--mark); margin-bottom:.4rem}

.alsolist{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.alsolist a{
  padding:1.1rem 1.2rem; text-decoration:none;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:var(--f-disp); font-weight:500; font-size:var(--step-0);
}
.alsolist a:hover{background:var(--card); color:var(--chalk)}

/* --- forms -------------------------------------------------------------- */
.formwrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.field{margin-bottom:1.1rem}
.field label{display:block; font-family:var(--f-disp); font-weight:600; font-size:var(--step-0); margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-family:var(--f-disp); font-size:var(--step-1);
  padding:.7rem .85rem; background:var(--card);
  border:1.5px solid var(--rule); border-radius:2px; color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--chalk); outline:none}
.field textarea{min-height:130px; resize:vertical}
.field__hint{font-size:var(--step--1); color:var(--text-mute); margin:.3rem 0 0}
.checks{display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem 1.25rem}
.check{display:flex; align-items:flex-start; gap:.55rem; font-family:var(--f-disp); font-size:var(--step-0); cursor:pointer}
.check input{width:auto; margin-top:.25rem; accent-color:var(--chalk)}
.formaside{background:var(--card); border:1px solid var(--rule); padding:1.75rem}
.formaside h3{font-size:var(--step-3); margin-bottom:.7rem}
.formaside p{font-size:var(--step-0); color:var(--text-mute)}
.formaside dl{margin:1.25rem 0 0; border-top:1px solid var(--rule-soft)}
.formaside dt{font-family:var(--f-disp); font-weight:600; font-size:var(--step--1); color:var(--text-mute); padding-top:.85rem}
.formaside dd{margin:0 0 .85rem; font-family:var(--f-disp); font-size:var(--step-1)}
.formaside dd a{text-decoration:none}
.alert{padding:1rem 1.2rem; border-left:4px solid var(--chalk); background:var(--card); margin-bottom:1.75rem; font-size:var(--step-0)}
.alert--ok{border-left-color:#2f7a4f}
.alert--bad{border-left-color:#a8342c}

/* --- footer ------------------------------------------------------------- */
.foot{background:var(--ink); color:var(--text-inv)}
.foot__cta{background:var(--ink-2); border-bottom:1px solid #2a3a58}
.foot__cta-in{max-width:var(--shell); margin-inline:auto; padding:clamp(3rem,6vw,5rem) var(--gut)}
.foot__cta h2{font-size:var(--step-5); margin-bottom:.8rem; max-width:18ch}
.foot__cta p{color:var(--text-inv-mute); max-width:52ch; font-size:var(--step-2)}
.foot__cta-act{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.75rem}

.foot__in{
  max-width:var(--shell); margin-inline:auto; padding:clamp(2.5rem,5vw,4rem) var(--gut) 2rem;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.6fr); gap:clamp(2rem,5vw,4rem);
}
.foot__brand p{color:var(--text-inv-mute); font-size:var(--step-0); margin:.7rem 0 0; max-width:30ch}
.foot__meta{font-family:var(--f-disp)}
.foot__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem}
.foot__head{font-family:var(--f-disp); font-weight:700; font-size:var(--step--1); color:var(--mark); margin:0 0 .7rem}
.foot__cols a{text-decoration:none; font-family:var(--f-disp); font-size:var(--step-0); color:var(--text-inv-mute); display:block; padding:.24rem 0}
.foot__cols a:hover{color:var(--text-inv)}
.foot__areas{max-width:var(--shell); margin-inline:auto; padding:1.75rem var(--gut); border-top:1px solid #2a3a58}
.foot__areas p{font-family:var(--f-disp); font-size:var(--step--1); color:var(--text-inv-mute); margin:0; line-height:1.9}
.foot__legal{
  max-width:var(--shell); margin-inline:auto; padding:1.25rem var(--gut) 2.5rem;
  border-top:1px solid #2a3a58; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
}
.foot__legal p{font-family:var(--f-disp); font-size:var(--step--1); color:var(--text-inv-mute); margin:0}
.foot__legal a{color:var(--text-inv)}

/* --- responsive --------------------------------------------------------- */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-bottom:1px solid var(--rule-soft)}
  .creds{grid-template-columns:repeat(2,1fr)}
  .alsolist{grid-template-columns:repeat(2,1fr)}
  .foot__cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--mast-h:88px}
  .brand__logo{height:64px}
  .nav{display:none}
  .mast__act{margin-left:auto}
  .burger{display:block}
  .hero__in{grid-template-columns:1fr; padding-top:2.5rem}
  .hero h1{max-width:18ch}
  .hero--photo::before{background:linear-gradient(180deg, rgba(21,34,62,.55) 0%, rgba(21,34,62,.8) 45%, rgba(21,34,62,.9) 100%)}
  .tradehead__in,.tradebody,.formwrap{grid-template-columns:1fr}
  .domains{grid-template-columns:1fr}
  .checks{grid-template-columns:repeat(2,1fr)}
  .work,.work--wide,.work--half{grid-column:span 12}
  .foot__in{grid-template-columns:1fr}
}
@media (max-width:680px){
  .mast__act .btn{display:none}
}
@media (max-width:560px){
  :root{--mast-h:72px}
  .mast__in{gap:.75rem}
  .mast__act{gap:.5rem}
  .brand__logo{height:50px}
  .tel{font-size:.92rem}
  .foot__logo{height:140px}
}
@media (max-width:380px){
  .brand__logo{height:44px}
  .tel{font-size:.85rem}
  .steps,.creds,.checks,.alsolist{grid-template-columns:1fr}
  .step{padding-right:0}
  .dg-label{font-size:27px}
  .dg-depth{font-size:21px}
  .dg-vlabel{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

/* diagram hover wiring */
.dg-g:hover .dg-zone,
.dg-g:focus-visible .dg-zone{opacity:.17}
.dg-zone{pointer-events:none}
.dg-g a{text-decoration:none}
.dg-bracket{stroke:#3d4f73; stroke-width:1.4; fill:none}
.dg-g:hover .dg-bracket{stroke:var(--mark)}
.dg-vlabel{font-family:var(--f-disp); font-size:15px; fill:var(--text-inv-mute); letter-spacing:.02em}
.dg-g:hover .dg-vlabel{fill:var(--mark)}
@media (max-width:340px){
  .mast .tel{display:none}
}