/* ==========================================================
   Lamps & Lighting — 2026
   Direction: a lit gallery after hours. Tonal greys off the
   logo, one cyan accent, photography shown like exhibits.
   Type: Syne (display) / Manrope (text).
   ========================================================== */

:root{
  --void:#1C1E21;
  --panel:#24272B;
  --panel-2:#2C3035;
  --line:#383D43;
  --line-2:#454B52;

  --white:#F3F5F6;
  --mute:#AFB6BC;
  --dim:#8C949B;

  --cyan:#7CD0E6;
  --cyan-dk:#276F8D;

  --lite:#EDEFF0;          /* inverted section ground */
  --lite-ink:#212427;
  --lite-mute:#585D60;
  --lite-line:#CDD3D6;

  --wa:#25D366;
  --wa-ink:#0C2A17;

  --maxw:1480px;
  --gut:clamp(1.15rem, 3.6vw, 4rem);
  --pad:clamp(4.5rem, 9vw, 8.5rem);

  --f-d:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-t:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-m:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --e:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--void);
  color:var(--mute);
  font-family:var(--f-t);
  font-size:clamp(1rem, .95rem + .22vw, 1.1rem);
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

h1,h2,h3{
  font-family:var(--f-d);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--white);
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.45rem, 7.6vw, 6.4rem); letter-spacing:-.042em; text-wrap:normal; }
h2{ font-size:clamp(1.95rem, 4.4vw, 3.6rem); }
h3{ font-size:clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing:-.028em; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--cyan); color:var(--void); padding:.9rem 1.3rem; font-weight:700; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* ---------- shared ---------- */

.tag{
  font-family:var(--f-m);
  font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); margin:0 0 1.3rem;
}

.sec{ padding-block:var(--pad); position:relative; }

.sec-h{ max-width:36rem; margin-bottom:clamp(2.75rem,5.5vw,4.5rem); }
.sec-l{ color:var(--mute); margin-top:1.5rem; font-size:1.05em; font-weight:300; }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--f-t); font-size:.95rem; font-weight:700;
  padding:.85rem 1.5rem; border-radius:100px;
  border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:background-color .2s var(--e), color .2s var(--e), border-color .2s var(--e), transform .2s var(--e);
}
.btn-lg{ padding:1.05rem 1.9rem; font-size:1rem; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:none; }

.btn-wa{ background:var(--wa); color:var(--wa-ink); }
.btn-wa:hover{ background:#38E27A; }

.btn-quiet{ background:transparent; color:var(--white); border-color:var(--line-2); }
.btn-quiet:hover{ border-color:var(--cyan); color:var(--cyan); }

.ico{ width:1.2em; height:1.2em; fill:currentColor; flex:none; }

/* ---------- header ---------- */

.head{
  position:sticky; top:0; z-index:100;
  background:rgba(28,30,33,.82);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--e), border-color .3s var(--e);
}
.head.pinned{ background:rgba(28,30,33,.96); border-bottom-color:var(--line); }

.head-in{ display:flex; align-items:center; gap:1.5rem; min-height:104px; }

.brand{ display:block; flex:none; line-height:0; }
.logo{ height:68px; width:auto; display:block; transition:height .3s var(--e); }
.head.pinned .logo{ height:58px; }

.nav{ display:flex; gap:1.6rem; margin-left:auto; }
.nav a{
  font-size:.89rem; font-weight:500; text-decoration:none; color:var(--mute);
  position:relative; padding:.35rem 0; transition:color .2s var(--e);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--e);
}
.nav a:hover{ color:var(--white); }
.nav a:hover::after{ transform:scaleX(1); }

.head-cta{ flex:none; padding:.62rem 1.2rem; font-size:.88rem; }

.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; margin-left:auto; }
.burger span{ display:block; width:24px; height:2px; background:var(--white); margin:5px 0; transition:transform .25s var(--e), opacity .25s var(--e); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mnav{ display:none; flex-direction:column; border-top:1px solid var(--line); }
.mnav a{
  padding:1rem var(--gut); text-decoration:none; color:var(--white);
  font-family:var(--f-d); font-weight:600; font-size:1.3rem;
  border-bottom:1px solid var(--line);
}
.mnav.open{ display:flex; }

/* ---------- hero ---------- */

.hero{ position:relative; padding-block:clamp(3.5rem,7vw,6rem) clamp(3.5rem,7vw,5.5rem); overflow:hidden; }

.wash{ position:absolute; inset:-14% -5% auto 20%; height:120%; pointer-events:none; z-index:0; opacity:.85; }
.wash svg{ width:100%; height:100%; display:block; }

.hero-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}

.hl{ color:var(--cyan); }

.lede{
  color:var(--mute); font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.28rem);
  max-width:37rem; margin-top:2rem;
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.5rem; }

/* ---------- facts ---------- */

.facts{ border-block:1px solid var(--line); }
.facts-in{ display:grid; grid-template-columns:repeat(4,1fr); }
.fact{ padding:2.1rem 1.5rem 2.1rem 0; border-left:1px solid var(--line); padding-left:1.75rem; }
.fact:first-child{ border-left:0; padding-left:0; }
.fact b{
  display:block; font-family:var(--f-d); font-weight:600;
  font-size:clamp(1.55rem,2.8vw,2.2rem); color:var(--white);
  letter-spacing:-.03em; line-height:1;
}
.fact span{ display:block; margin-top:.6rem; font-size:.82rem; color:var(--dim); font-weight:500; }

/* ---------- shade profile cards ---------- */

.profiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.75rem); }

.pcard{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:clamp(1.4rem,2.2vw,1.85rem);
  transition:border-color .3s var(--e), background-color .3s var(--e);
}
.pcard:hover{ border-color:var(--cyan-dk); background:var(--panel-2); }
.pcard h3{ margin-bottom:.6rem; }
.pcard > p{ font-size:.96rem; font-weight:300; }
.kind{ font-family:var(--f-m); font-size:.68rem; font-weight:400; letter-spacing:.09em; text-transform:uppercase; color:var(--cyan); margin-bottom:.9rem; }
.range{
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:.85rem; font-weight:500; color:var(--white);
}

/* ---------- inverted build section ---------- */

.invert{ background:var(--lite); color:var(--lite-mute); }
.invert h2{ color:var(--lite-ink); }
.invert .tag{ color:var(--cyan-dk); }

.build-in{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.build-copy h2{ margin-bottom:1.7rem; }
.pull{
  margin-top:1.5rem; padding-left:1.15rem; border-left:2px solid var(--cyan-dk);
  color:var(--lite-ink); font-weight:500;
}

.specs{ margin:0; border-top:1px solid var(--lite-line); }
.specs > div{ display:grid; grid-template-columns:10.5rem 1fr; gap:1.25rem; padding:1.1rem 0; border-bottom:1px solid var(--lite-line); }
.specs dt{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-dk); padding-top:.22rem; }
.specs dd{ margin:0; color:var(--lite-ink); font-weight:400; }

/* ---------- services ---------- */

.svcs{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4.5rem); border-top:1px solid var(--line); }
.svc{ padding:2.4rem 0; border-bottom:1px solid var(--line); }
.svc h3{ margin-bottom:.9rem; }
.svc p{ max-width:33rem; font-weight:300; }

/* ---------- work: mosaic gallery ---------- */

.work{ padding-block:0 var(--pad); }

.mosaic{
  columns:3; column-gap:clamp(.7rem,1.4vw,1.15rem);
}
.mtile{ margin:0 0 clamp(.7rem,1.4vw,1.15rem); break-inside:avoid; }
.mtile.extra{ display:none; }
.mosaic.all .mtile.extra{ display:block; }

.mtile button{
  display:block; width:100%; padding:0; border:0;
  background:var(--panel); border-radius:5px; overflow:hidden; cursor:zoom-in;
}
.mtile img{
  width:100%; height:auto; display:block;
  filter:brightness(.84) saturate(.95);
  transition:filter .45s var(--e), transform .8s var(--e);
}
.mtile button:hover img, .mtile button:focus-visible img{ filter:none; transform:scale(1.04); }

.more{ margin-top:clamp(1.75rem,3vw,2.5rem); text-align:center; }
.more[hidden]{ display:none; }

.lb{ border:0; padding:0; background:transparent; max-width:min(94vw,1100px); max-height:92vh; }
.lb::backdrop{ background:rgba(20,22,24,.95); }
.lb img{ width:100%; height:auto; max-height:80vh; object-fit:contain; border-radius:4px; }
.lb-x{ position:absolute; top:-2.8rem; right:0; background:none; border:0; color:var(--white); font-size:2.3rem; line-height:1; cursor:pointer; padding:.2rem .5rem; }

.lb-bar{ display:flex; align-items:center; justify-content:center; gap:1.25rem; margin-top:1rem; }
.lb-cap{
  margin:0; min-width:min(60vw,22rem); text-align:center;
  font-family:var(--f-m); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute);
}
.lb-nav{
  width:44px; height:44px; flex:none; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--line-2); border-radius:50%; color:var(--white);
  transition:background-color .2s var(--e), color .2s var(--e), border-color .2s var(--e);
}
.lb-nav svg{ width:18px; height:18px; fill:currentColor; }
#lb-prev svg{ transform:rotate(180deg); }
.lb-nav:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--void); }

/* ---------- about ---------- */

.about{ padding-block:clamp(2.75rem,5vw,4.25rem); }
.about-in{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(1.75rem,3.5vw,3rem); align-items:center; }
.about-img{ margin:0; overflow:hidden; border-radius:4px; background:var(--panel); }
.about-img img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:brightness(.9); transition:filter .5s var(--e); }
.about-in:hover .about-img img{ filter:none; }
.about-big{
  font-family:var(--f-d); font-weight:500;
  font-size:clamp(1.2rem,1.9vw,1.65rem);
  line-height:1.36; letter-spacing:-.02em; color:var(--white);
}
.about-sig{
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.82rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--cyan);
}

/* ---------- contact ---------- */

.contact{ background:var(--panel); }

.c-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }

.f-row{ margin-bottom:1.4rem; }
.f-row label{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:.6rem; }
.opt{ text-transform:none; letter-spacing:0; font-weight:400; }

.f-row input, .f-row select, .f-row textarea{
  width:100%; font-family:var(--f-t); font-size:1rem; color:var(--white);
  background:var(--void); border:1px solid var(--line-2); border-radius:4px;
  padding:.85rem 1rem; transition:border-color .2s var(--e);
}
.f-row textarea{ resize:vertical; min-height:8.5rem; line-height:1.6; }
.f-row input::placeholder, .f-row textarea::placeholder{ color:var(--dim); opacity:1; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus{ outline:none; border-color:var(--cyan); }
.f-row input.bad, .f-row textarea.bad{ border-color:#FF7A66; }

.f-err{ font-size:.9rem; font-weight:600; color:#FF9C8C; margin:0 0 1.1rem; }
.f-actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.f-note{ font-size:.85rem; color:var(--dim); margin-top:1.6rem; max-width:33rem; font-weight:300; }

.c-info{ background:var(--void); border:1px solid var(--line); border-radius:6px; padding:clamp(1.75rem,3vw,2.25rem); }
.c-list{ list-style:none; margin:0 0 1.75rem; padding:0; }
.c-list li{ padding:1rem 0; border-top:1px solid var(--line); }
.c-list li:first-child{ border-top:0; padding-top:0; }
.c-lab{ display:flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); margin-bottom:.4rem; }
.c-ico{ width:14px; height:14px; flex:none; fill:var(--cyan); }
.c-ico-wa{ fill:var(--wa); }
.c-list a{ color:var(--cyan); text-decoration:none; font-weight:500; border-bottom:1px solid rgba(124,208,230,.28); }
.c-list a:hover{ border-bottom-color:var(--cyan); }
.c-val{ color:var(--mute); line-height:1.55; }

.socials{ display:flex; gap:.6rem; margin-top:.2rem; }
.soc{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%; color:var(--white); text-decoration:none;
  transition:background-color .2s var(--e), color .2s var(--e), border-color .2s var(--e), transform .2s var(--e);
}
.soc svg{ width:18px; height:18px; fill:currentColor; }
.soc:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--void); transform:translateY(-2px); }

.c-dir{ width:100%; }

.map{ margin-top:clamp(2rem,4vw,3rem); border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--void); }
.map iframe{ display:block; width:100%; height:clamp(300px,42vh,440px); border:0; filter:grayscale(.5) invert(.92) hue-rotate(180deg) contrast(.9); }

/* ---------- footer ---------- */

.foot{ background:var(--void); border-top:1px solid var(--line); padding-top:clamp(3rem,6vw,4.5rem); }
.foot-in{ display:grid; grid-template-columns:1.5fr .7fr 1fr; gap:2.5rem; padding-bottom:3rem; }
.foot-logo{ height:52px; width:auto; display:block; margin-bottom:1.3rem; }
.foot-a p{ max-width:24rem; font-size:.94rem; font-weight:300; margin-bottom:1.4rem; }

.foot-nav{ display:flex; flex-direction:column; gap:.65rem; }
.foot-nav a{ text-decoration:none; font-size:.92rem; color:var(--mute); transition:color .2s var(--e); }
.foot-nav a:hover{ color:var(--cyan); }

.foot-c{ display:flex; flex-direction:column; gap:.65rem; font-size:.92rem; }
.foot-c a{ color:var(--cyan); text-decoration:none; }
.foot-c a:hover{ text-decoration:underline; }

.foot-base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-block:1.6rem;
  font-size:.78rem; letter-spacing:.08em; color:var(--dim);
}

/* ---------- floating whatsapp ---------- */

.fab{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--wa); color:var(--wa-ink); text-decoration:none;
  padding:.9rem 1.2rem; border-radius:100px; font-weight:700; font-size:.92rem;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s var(--e), transform .3s var(--e), visibility .3s, background-color .2s var(--e);
}
.fab.show{ opacity:1; visibility:visible; transform:none; }
.fab:hover{ background:#38E27A; }
.fab svg{ width:1.35rem; height:1.35rem; fill:currentColor; flex:none; }

/* ---------- reveal ---------- */

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--e), transform .8s var(--e); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */

@media (max-width:1040px){
  .nav{ display:none; }
  .head-cta{ display:none; }
  .burger{ display:block; }
  .head-in{ min-height:86px; }
  .foot-in{ grid-template-columns:1fr 1fr; }
  .foot-a{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .profiles{ grid-template-columns:1fr 1fr; }
  .build-in{ grid-template-columns:1fr; }
  .c-grid{ grid-template-columns:1fr; }
  .svcs{ grid-template-columns:1fr; }
  .mosaic{ columns:2; }
  .about-in{ grid-template-columns:1fr; gap:1.75rem; }
  .facts-in{ grid-template-columns:1fr 1fr; }
  .fact{ padding:1.6rem 1rem 1.6rem 1.5rem; border-top:1px solid var(--line); }
  .fact:nth-child(odd){ border-left:0; padding-left:0; }
  .fact:nth-child(-n+2){ border-top:0; }
}

@media (max-width:640px){
  .logo{ height:50px; }
  .head.pinned .logo{ height:46px; }
  .foot-logo{ height:46px; }
  .profiles{ grid-template-columns:1fr; }
  .lb-cap{ min-width:0; font-size:.65rem; }
  .specs > div{ grid-template-columns:1fr; gap:.3rem; }
  .foot-in{ grid-template-columns:1fr; gap:2rem; }
  .fab-t{ display:none; }
  .fab{ padding:1rem; }
  .btn{ width:100%; }
  .lb-x{ top:auto; bottom:-3.2rem; right:50%; transform:translateX(50%); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .head,.fab,.map,.f-actions,.burger,.wash{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ---------- 404 ---------- */

.err{ min-height:100vh; display:grid; align-items:center; }
.err-in{ position:relative; z-index:1; max-width:44rem; padding-block:clamp(3rem,10vw,6rem); }
.err-logo{ height:58px; width:auto; display:block; margin-bottom:2.5rem; }
.err-cta{ margin-top:2.5rem; }
@media (max-width:640px){ .err-logo{ height:44px; } }


/* ==========================================================
   Technical elevation — the shade as its three dimensions
   ========================================================== */

.dwg-wrap{ position:relative; }
.dwg{ width:100%; height:auto; display:block; overflow:visible; }

.d-shade path, .d-cons path, .d-dim path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }

.d-shade path{ stroke:var(--cyan); stroke-width:2; filter:url(#bloom); }
.d-cons  path{ stroke:rgba(124,208,230,.24); stroke-width:1; }
.d-cons  path:first-child{ stroke-dasharray:14 5 2 5; }
.d-dim   path{ stroke:var(--cyan); stroke-width:1; }

.d-txt text{
  font-family:var(--f-m); font-size:13px; font-weight:500;
  fill:var(--cyan); letter-spacing:.06em;
}
.d-txt .d-note{ font-size:9.5px; fill:rgba(243,245,246,.42); letter-spacing:.18em; }

/* switch-on sequence */
.d-shade path, .d-cons path, .d-dim path{ stroke-dasharray:100; stroke-dashoffset:100; }
.d-dim, .d-txt, .d-light{ opacity:0; }

.dwg-on .d-cons  path{ animation:draw .8s var(--e) forwards; }
.dwg-on .d-shade path{ animation:draw 1.1s var(--e) .35s forwards; }
.dwg-on .d-dim   path{ animation:draw .5s var(--e) 1.25s forwards; }
.dwg-on .d-dim   { animation:fade .3s linear 1.25s forwards; }
.dwg-on .d-txt   { animation:fade .5s var(--e) 1.55s forwards; }
.dwg-on .d-light { animation:lamp 1.6s var(--e) 1.35s forwards; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade{ to{ opacity:1; } }
@keyframes lamp{ 0%{opacity:0} 18%{opacity:.55} 30%{opacity:.15} 48%{opacity:.8} 100%{opacity:1} }

/* small profile marks on each shade row */
.profile{ width:64px; height:52px; display:block; margin-bottom:1rem; overflow:visible; }
.profile path{ fill:none; stroke:var(--cyan); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; }
.reveal.in .profile path{ animation:draw .9s var(--e) .15s forwards; }

@media (max-width:900px){
  .hero-in{ grid-template-columns:1fr; }
  .dwg-wrap{ max-width:320px; margin:1rem auto 0; }
  .wash{ inset:-14% -5% auto -5%; }
}

@media (prefers-reduced-motion:reduce){
  .d-shade path, .d-cons path, .d-dim path, .profile path{ stroke-dashoffset:0; }
  .d-dim, .d-txt, .d-light{ opacity:1; }
}


/* ---------- FAQ ---------- */

.faq-in{ display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.faq-in .sec-h{ margin-bottom:0; }

.faq-list{ border-top:1px solid var(--line); }
.faq-list details{ border-bottom:1px solid var(--line); }
.faq-list summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.35rem 2.75rem 1.35rem 0;
  font-family:var(--f-d); font-size:1.06rem; font-weight:500;
  letter-spacing:-.018em; color:var(--white);
  transition:color .2s var(--e);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary:hover{ color:var(--cyan); }
.faq-list summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1.5px solid var(--cyan); border-bottom:1.5px solid var(--cyan);
  transform:rotate(45deg); transition:transform .25s var(--e);
}
.faq-list details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-list details p{ margin:0 0 1.45rem; padding-right:2.5rem; font-weight:300; }

@media (max-width:900px){
  .faq-in{ grid-template-columns:1fr; }
}


/* ---------- wide screens ---------- */

@media (min-width:1500px){
  .mosaic{ columns:4; }
  .sec-h{ max-width:42rem; }
  .lede{ max-width:42rem; }
}

/* ---------- narrow screens ---------- */

@media (max-width:1040px){
  .cta-t{ display:none; }
  .head-cta{ display:inline-flex; width:46px; height:46px; padding:0; border-radius:50%; margin-left:auto; }
  .head-cta .ico{ width:1.35rem; height:1.35rem; }
  .burger{ margin-left:.35rem; }
}

@media (max-width:640px){
  .head-in{ gap:.75rem; }
  .about-in{ grid-template-columns:1fr; gap:1.5rem; }
  .about-img{ max-width:none; }
  .about-img img{ aspect-ratio:3/2; }
  .faq-list summary{ font-size:1rem; padding-right:2.25rem; }
  .faq-list details p{ padding-right:0; }
  .sec-h{ margin-bottom:2rem; }
  .c-info{ padding:1.4rem; }
  .soc{ width:46px; height:46px; }
  .foot-base{ font-size:.72rem; }
}

@media (max-width:400px){
  .head-cta{ width:42px; height:42px; }
  .logo{ height:42px; }
  .head.pinned .logo{ height:40px; }
}