/* ═══════════════════════════════════════════════════════════
   STEKLARSTVO BREG d.o.o. — koncept · Agencija Vela
   Direction: optical. Light, cool, precise. Float-glass edge green.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0B1014;
  --slate:#151E24;
  --paper:#FFFFFF;
  --mist:#F4F6F7;
  --mist2:#E6EBEE;
  --line:#DDE3E7;
  --line-d:rgba(255,255,255,.15);
  /* accent taken from the blue of their own wordmark, deepened to
     something that can carry a whole page without shouting */
  --acc:#0E4F73;
  --acc2:#1A6F9C;
  --acc3:#4E9CC4;
  /* the exact blue of the wordmark, for type that should read as the brand */
  --logo:#026EB7;
  --logo-l:#6DB8EC;
  --mut:#5B6A72;
  --mut2:#8C989E;
  --mut-l:rgba(238,244,247,.64);

  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --w:1280px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(78px,10vw,150px);
  --e:cubic-bezier(.22,1,.36,1);
  --navh:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;letter-spacing:0;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}

/* one branded focus ring, light and dark */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.brk :focus-visible,.cta :focus-visible,.ft :focus-visible,.lb :focus-visible{outline-color:var(--acc2)}
h1,h2{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.08}
h3{margin:0;font-weight:600;letter-spacing:-.018em;line-height:1.24}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
/* headline emphasis is the logo blue, not a second typeface */
em{font-style:normal}
h1 em,h2 em,h3 em{color:var(--logo)}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:999}
.skip:focus{left:12px;top:12px}

/* ── shared ─────────────────────────────────────────────── */
.eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin:0 0 22px;
}
.eyebrow--l{color:var(--mut-l)}
.lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.68;color:var(--mut)}

.sechead{max-width:800px;margin:0 0 clamp(46px,6vw,78px)}
.sechead h2{font-size:clamp(2.1rem,4.7vw,3.8rem)}
.sechead__lead{font-size:clamp(16.5px,1.3vw,18.5px);color:var(--mut);line-height:1.7;max-width:480px}
.sechead:not(.sechead--split):not(.sechead--row) .sechead__lead{margin-top:26px;max-width:580px}
.sechead--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:end;max-width:none}
.sechead--row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;max-width:none;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border:1px solid transparent;border-radius:1px;
  font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:.32s var(--e);
}
.btn--acc{background:var(--acc);color:#F2FAFA}
.btn--acc:hover{background:var(--acc2);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(14,79,115,.85)}
.btn--ln{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ln:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--gh{background:transparent;color:#EEF5F6;border-color:rgba(238,245,246,.3)}
.btn--gh:hover{border-color:#EEF5F6;background:rgba(238,245,246,.08);transform:translateY(-2px)}
.btn--sm{padding:11px 20px;font-size:13.5px}
.btn--wide{width:100%;padding:19px 30px}

/* ── NAV ────────────────────────────────────────────────── */
/* the header keeps one height at every scroll position, so --navh is exact
   and the sticky index on the subpages can sit flush under it */
/* the bar stays opaque rather than fading over the hero: the right half of
   the first screen is a dark photograph, and ink-coloured nav text over it
   would be unreadable */
.nav{
  position:fixed;inset:0 0 auto;z-index:200;height:var(--navh);
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  transition:box-shadow .4s var(--e);
}
.nav__in{max-width:var(--w);margin:0 auto;height:100%;padding:0 var(--pad);display:flex;align-items:center;gap:28px}
.nav.is-stuck{box-shadow:0 1px 0 var(--line)}

/* their own wordmark, used as drawn — the site is built around it
   rather than replacing it */
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;margin-right:auto;min-width:0}
.brand__logo{height:46px;width:auto;flex:none;display:block}
.brand__sep{width:1px;height:32px;background:var(--line);flex:none}
.brand__tag{
  font-style:normal;font-size:10px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mut);line-height:1.55;white-space:nowrap;
}

.nav__links{display:flex;gap:30px}
.nav__links a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--mut);position:relative;padding:4px 0;transition:color .25s}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--acc);transition:width .35s var(--e)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__links a[aria-current="page"]{color:var(--logo)}
.nav__links a[aria-current="page"]::after{width:100%;background:var(--logo)}
.nav__mob{display:none}
/* telefon v odprtem meniju: na telefonu je .nav__tel skrit, zato bi bila
   v meniju edina odsotna stvar prav tista, ki jo palec išče */
.nav__mtel{display:none}

.nav__act{display:flex;align-items:center;gap:16px}
.nav__tel{text-decoration:none;display:flex;flex-direction:column;text-align:right;line-height:1.2}
.nav__tel span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.nav__tel b{font-size:15px;font-weight:600;margin-top:2px}
.nav__tel:hover b{color:var(--acc)}

.burger{display:none;background:none;border:0;width:40px;height:40px;padding:9px;cursor:pointer}
.burger span{display:block;height:1.5px;background:var(--ink);margin:5px 0;transition:.35s var(--e)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── HERO ───────────────────────────────────────────────── */
.hero{position:relative;background:var(--paper);container-type:inline-size;overflow:hidden}
.hero__in{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  min-height:min(100svh,940px);
}
.hero__copy{
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;
  /* plain value first, so a browser without container-query units still gets
     a sane gutter instead of dropping the whole declaration */
  padding:calc(var(--navh) + clamp(38px,5.5vw,70px)) clamp(30px,4vw,66px) clamp(44px,6vw,72px) var(--pad);
  /* then align the copy to the same left edge as every .wrap below */
  padding-left:max(var(--pad), calc((100cqw - var(--w)) / 2 + var(--pad)));
}
/* eyebrow carries a rule, so the copy column starts on a drawn line
   rather than on a line of text */
.hero__eb{
  display:flex;align-items:center;gap:14px;margin:0 0 clamp(20px,2.4vw,28px);
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
}
.hero__eb::before{content:'';flex:none;width:clamp(26px,3.6vw,54px);height:1px;background:currentColor;opacity:.5}
.hero h1{font-size:clamp(2.45rem,4.35vw,4rem);letter-spacing:-.034em;line-height:1.04;margin:0 0 clamp(20px,2.2vw,28px)}
.hero__lead{max-width:46ch;font-size:clamp(16.5px,1.22vw,18.5px);line-height:1.7;color:var(--mut);margin:0 0 clamp(26px,3.2vw,36px)}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap}

.hero__meta{
  margin:clamp(34px,4vw,50px) 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:0 clamp(18px,2vw,30px);
}
.hero__meta>div{padding:17px 0 0}
.hero__meta dt{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:6px}
.hero__meta dd{margin:0;font-size:14px;line-height:1.5;color:var(--mut)}
.hero__meta dd a{text-decoration:none;color:var(--ink);font-weight:600}
.hero__meta dd a:hover{color:var(--acc)}

/* ── hero photograph ────────────────────────────────────
   One of their own installations, full-bleed to the right edge and the
   full height of the first screen. The photograph is the argument; there
   is nothing drawn on top of it except its own caption. */
.hero__vis{position:relative;margin:0;overflow:hidden;background:var(--ink);min-height:clamp(400px,62svh,940px)}
.hero__vis img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 44%;
  animation:heroIn 2.4s var(--e) both;
}
@keyframes heroIn{from{transform:scale(1.075)}to{transform:scale(1)}}

/* a soft seam on the left so the photograph meets the white column
   instead of butting against it, and a foot gradient the caption sits on */
.hero__vis::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,16,20,.16), rgba(11,16,20,0) 24%),
    linear-gradient(0deg, rgba(11,16,20,.46), rgba(11,16,20,0) 38%);
}
.hero__cap{
  position:absolute;z-index:2;margin:0;text-align:right;
  right:clamp(18px,2.2vw,32px);bottom:clamp(16px,2vw,28px);
  max-width:min(74%,320px);
}
.hero__cap b{display:block;font-size:13px;font-weight:600;letter-spacing:-.015em;color:#fff}
.hero__cap span{
  display:block;margin-top:5px;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
@media (prefers-reduced-motion:reduce){
  .hero__vis img{animation:none}
}

/* the strip of chapters under the hero. It is a menu, not decoration, so it
   stays a row of plain lines of type — the interest comes from the numbering
   being in the brand blue and from the hover, not from boxing each item in */
.rail{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  max-width:var(--w);margin:0 auto;border-top:1px solid var(--line);
}
.rail li{position:relative;flex:1;min-width:168px;border-right:1px solid var(--line)}
.rail li:last-child{border-right:0}

/* the same gesture as the nav underline, moved to the top edge: a hairline
   that wipes in from the left and sits on the rail's own border */
.rail li::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e);
}
.rail li:hover::before,.rail li:focus-within::before{transform:scaleX(1)}

.rail a{
  position:relative;display:flex;align-items:baseline;gap:10px;
  padding:24px 40px 26px 22px;text-decoration:none;
  font-size:14.5px;font-weight:500;color:var(--mut);
  transition:color .32s var(--e),background .32s var(--e);
}
.rail li:first-child a{padding-left:var(--pad)}
.rail li:last-child a{padding-right:max(40px,var(--pad))}

/* the arrow lives in padding the row already had, so nothing shifts when it
   arrives — the label itself never moves */
.rail a::after{
  content:'\2192';position:absolute;right:20px;top:50%;
  font-size:14px;line-height:1;color:var(--acc);
  opacity:0;transform:translate(-7px,-50%);
  transition:opacity .3s var(--e),transform .42s var(--e);
}
.rail a:hover::after,.rail a:focus-visible::after{opacity:1;transform:translate(0,-50%)}

/* the index number carries the brand blue at rest — one small piece of colour
   in a row that would otherwise be five identical greys */
.rail a i{
  font-style:normal;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--acc3);font-variant-numeric:tabular-nums;transition:color .32s var(--e);
}
.rail a:hover{color:var(--ink);background:var(--mist)}
.rail a:hover i{color:var(--acc)}
@media (prefers-reduced-motion:reduce){
  .rail li::before,.rail a::after{transition-duration:.01ms}
}

/* ── O NAS ──────────────────────────────────────────────── */
.abt{padding:var(--sec) 0;background:var(--paper)}
.abt__grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(40px,5vw,72px);align-items:start}
.abt h2{font-size:clamp(2rem,4.2vw,3.4rem);margin-bottom:28px}
.abt__copy .lead{margin-bottom:1.15em}
.abt__copy>p:not(.lead):not(.eyebrow){font-size:16px;line-height:1.74;color:var(--mut)}

.abt__facts{
  list-style:none;margin:clamp(34px,4vw,50px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);
}
.abt__facts li{padding:18px 22px 20px 0;border-bottom:1px solid var(--line)}
.abt__facts li:nth-child(2n){padding-left:22px;padding-right:0;border-left:1px solid var(--line)}
.abt__facts b{display:block;font-size:clamp(16.5px,1.5vw,20px);font-weight:600;letter-spacing:-.03em}
.abt__facts span{display:block;margin-top:7px;font-size:12.5px;line-height:1.56;color:var(--mut)}

/* two equal full-width frames. The second used to be set at 62% width and
   pushed right, which read as an afterthought rather than as a photograph. */
.abt__vis{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.abt__fig{margin:0;overflow:hidden;border-radius:1px;background:var(--mist2)}
.abt__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--e)}
.abt__fig:hover img{transform:scale(1.04)}
.abt__fig--a img{object-position:center 58%}
.abt__fig--b img{object-position:center 50%}

/* ── POSTOPEK ───────────────────────────────────────────── */
.proc{padding:var(--sec) 0;background:var(--mist)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.steps li{padding:32px 30px 38px 0;border-right:1px solid var(--line)}
.steps li:last-child{border-right:0;padding-right:0}
.steps li:not(:first-child){padding-left:30px}
.steps__n{
  display:block;font-size:13px;font-weight:500;line-height:1;letter-spacing:.04em;
  color:var(--mut2);font-variant-numeric:tabular-nums;margin-bottom:26px;
}
.steps h3{font-size:19px;font-weight:600;letter-spacing:-.03em;margin-bottom:11px}
.steps p{font-size:14.8px;line-height:1.66;color:var(--mut)}

.sechead__more{margin-top:20px;font-size:14.5px;font-weight:600}
.sechead__more a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.28s var(--e);display:inline-block}
.sechead__more a:hover{border-color:var(--ink);transform:translateX(3px)}

/* ── STORITVE ───────────────────────────────────────────── */
.srv{padding:var(--sec) 0;background:var(--paper)}
.srv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
/* the whole card is the link through to its section on the services page */
.sc{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.4s var(--e)}
.sc:focus-visible{outline:2px solid var(--acc);outline-offset:6px}
.sc__fig{margin:0 0 22px;overflow:hidden;background:var(--mist2);border-radius:1px}
/* 1:1 is the only frame that is fair to both halves of their library
   (roughly 3:4 portrait and 4:3 landscape) — max 25% crop either way.
   At 4:3 the four portrait card photos were losing 44%. */
.sc__fig img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 42%;transition:transform 1.1s var(--e),filter .5s}
.sc:hover .sc__fig img{transform:scale(1.05)}
.sc__b{position:relative;padding-left:44px}
.sc__n{
  position:absolute;left:0;top:3px;font-size:12px;font-weight:500;
  letter-spacing:.04em;color:var(--mut2);font-variant-numeric:tabular-nums;
}
.sc h3{
  display:flex;align-items:baseline;gap:9px;
  font-size:clamp(18px,1.55vw,21px);font-weight:600;letter-spacing:-.032em;margin-bottom:11px;
}
.sc h3::after{
  content:'→';font-size:.82em;color:var(--ink);
  opacity:0;transform:translateX(-7px);transition:.38s var(--e);
}
.sc:hover h3::after,.sc:focus-visible h3::after{opacity:1;transform:none}
.sc p{font-size:15px;line-height:1.65;color:var(--mut)}

/* the three lead services carry the hardware standard, because that is the
   question every buyer of a shower or a door actually asks */
.sc__note{
  display:flex;align-items:flex-start;gap:10px;margin-top:15px;padding-top:14px;
  border-top:1px solid var(--line);font-size:13px;line-height:1.5;
  font-weight:500;color:var(--mut);
}
.sc__note svg{flex:none;width:15px;height:15px;margin-top:1px;stroke:currentColor;fill:none;stroke-width:1.6}
/* on the subpage the note follows a ruled list, which already ends on a
   line — a second rule 28px below it would just be noise */
.svc__pts+.sc__note{margin-top:0;padding-top:0;border-top:0}

/* ── DODATNI PROGRAM ────────────────────────────────────── */
/* one feature tile for framing, then eight equal tiles on a 4-column grid:
   feature 2×2 + four tiles beside it + four beneath = three level rows */
.adds{padding:0 0 var(--sec);background:var(--paper)}
.adds__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px);margin-bottom:clamp(26px,3vw,40px);
}
.adds__head .eyebrow{margin-bottom:14px}
.adds__head h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.034em}
.xg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.xg__feat{
  grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;
  background:var(--acc);color:#EEF6FA;padding:clamp(26px,3vw,40px);border-radius:2px;
}
.xg__feat .eyebrow{color:rgba(238,246,250,.7);margin-bottom:16px}
.xg__feat h3{font-size:clamp(1.45rem,2.3vw,1.95rem);letter-spacing:-.034em;margin-bottom:14px;color:#fff}
.xg__feat p{font-size:15.5px;line-height:1.7;color:rgba(238,246,250,.8);max-width:44ch}
.xg__feat a{
  margin-top:auto;padding-top:22px;align-self:flex-start;
  font-size:14.5px;font-weight:600;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .25s;
}
.xg__feat a:hover{border-color:#fff}
.xg__it{
  display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;
  background:var(--mist);border:1px solid transparent;border-radius:2px;
  transition:border-color .3s var(--e),background .3s var(--e);
}
.xg__it:hover{background:var(--paper);border-color:var(--line)}
.xg__it svg{width:22px;height:22px;margin-bottom:10px;fill:none;stroke:var(--logo);stroke-width:1.6}
.xg__it b{font-size:15.5px;font-weight:600;letter-spacing:-.018em;line-height:1.35}
.xg__it i{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--mut)}

.adds__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.6vw,38px)}
.adds__list li{
  position:relative;padding:14px 0 15px 26px;border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.5;
}
.adds__list li::before{
  content:'';position:absolute;left:0;top:23px;width:12px;height:1px;
  background:var(--mut2);transition:.3s var(--e);
}
.adds__list li:hover::before{width:19px}
.adds__list li b{font-weight:600}
.adds__list li i{display:block;font-style:normal;font-size:12.5px;color:var(--mut);margin-top:3px}

/* ── RAZBITO STEKLO ─────────────────────────────────────── */
.brk{background:var(--slate);color:#EEF5F6}
.brk__in{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(52px,6vw,78px);padding-bottom:clamp(52px,6vw,78px)}
.brk h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:18px}
.brk p{font-size:16px;line-height:1.68;color:var(--mut-l);max-width:58ch}
.brk__cta{
  display:flex;flex-direction:column;text-decoration:none;text-align:right;
  border:1px solid var(--line-d);padding:22px 30px;border-radius:1px;
  transition:.35s var(--e);white-space:nowrap;
}
.brk__cta span{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-l)}
.brk__cta b{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.035em;margin-top:7px}
.brk__cta:hover{background:var(--acc);border-color:var(--acc);transform:translateY(-3px)}
.brk__cta:hover span{color:rgba(255,255,255,.75)}

/* light variant — used on the services subpage so the page foot
   is not three dark bands in a row */
.brk--lt{background:var(--mist);color:var(--ink);border-top:1px solid var(--line)}
.brk--lt .eyebrow--l{color:var(--mut)}
.brk--lt p{color:var(--mut)}
.brk--lt .brk__cta{border-color:var(--line);background:var(--paper)}
.brk--lt .brk__cta span{color:var(--mut)}
.brk--lt .brk__cta:hover{background:var(--acc);border-color:var(--acc);color:#F2FAFA}
.brk--lt .brk__cta:hover span{color:rgba(255,255,255,.8)}

/* ── GALERIJA ───────────────────────────────────────────── */
.gal{padding:var(--sec) 0;background:var(--paper)}
.gal h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.gal__f{display:flex;gap:7px;flex-wrap:wrap}
.fil{
  background:transparent;border:1px solid var(--line);border-radius:1px;
  padding:9px 17px;font-size:13.5px;font-weight:500;color:var(--mut);cursor:pointer;transition:.3s var(--e);
}
.fil:hover{border-color:var(--ink);color:var(--ink)}
.fil.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

/* Portrait shots keep 3:4 and are never cropped; landscape shots take a
   double-wide cell instead of being squeezed into portrait (which cost them
   44% of their width). 1.53 is the ratio a 2-column cell resolves to at every
   breakpoint below, so rows stay level to within ~2px. */
.gal__grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  grid-auto-flow:dense;margin-top:clamp(34px,4vw,50px);
}
.gi{
  border:0;padding:0;background:var(--mist2);cursor:zoom-in;overflow:hidden;
  border-radius:1px;position:relative;aspect-ratio:3/4;
  /* aspect-ratio sizes the row; height:100% then levels every tile in it */
  height:100%;
}
.gi--w{grid-column:span 2;aspect-ratio:1.53}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.gi::after{content:'';position:absolute;inset:0;background:rgba(14,20,23,0);transition:.4s}
.gi:hover img{transform:scale(1.06)}
.gi:hover::after{background:rgba(14,20,23,.14)}
.gi.is-hid{display:none}

/* ── GALERIJA — podstran ────────────────────────────────
   Multi-column rather than a fixed grid: their library is mixed portrait
   and landscape, and here nothing is cropped at all. */
.mas{columns:4;column-gap:clamp(10px,1.1vw,14px);margin-top:clamp(30px,3.6vw,46px)}
.mas .gi{
  display:block;width:100%;height:auto;aspect-ratio:auto;
  margin:0 0 clamp(10px,1.1vw,14px);break-inside:avoid;
}
.mas .gi img{width:100%;height:auto}
.mas .gi.is-hid{display:none}

.galbar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.galbar__n{font-size:13px;font-weight:500;color:var(--mut);white-space:nowrap}
.galbar__n b{color:var(--ink);font-weight:600}

/* ── MATERIALI ──────────────────────────────────────────── */
/* a spec sheet, not a catalogue: four ruled lines beside the heading.
   The services already sit above — this only says what the glass can be. */
.mat{padding:var(--sec) 0;background:var(--paper);border-top:1px solid var(--line)}
.mat__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.mat h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.mat__note{margin-top:24px;font-size:15px;color:var(--mut)}
.spec{margin:0;border-bottom:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--line)}
.spec dt{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.spec dd{margin:0;font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.012em;line-height:1.4;color:var(--ink)}


/* ── KONTAKT ────────────────────────────────────────────── */
.ct{padding:var(--sec) 0;background:var(--mist)}
.ct__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,88px);align-items:start}
.ct h1,.ct h2{font-size:clamp(2rem,4.2vw,3.4rem);margin-bottom:24px}
.ct .lead{margin-bottom:42px;max-width:44ch}

.info{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.info__b{padding:22px 22px 24px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.info__b:nth-child(2n){border-right:0;padding-left:22px;padding-right:0}
.info__l{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:9px}
.info__b p{font-size:15px;line-height:1.62;color:var(--mut);margin:0}
.info__b b{color:var(--ink);font-weight:600}
.info__b a{text-decoration:none;color:var(--ink);font-weight:500}
.info__b a:hover{color:var(--acc)}
.info__b span{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--mut)}
.info__fax{color:var(--mut)!important;letter-spacing:0!important;font-size:13.5px!important;font-weight:400!important}

/* Contact page. Everything a caller needs sits in one ruled band across the
   full width, read at a glance — it used to run down one half of a two-column
   split beside a tall form, which stretched the page out. */
.ct--pg{background:var(--paper);padding-top:calc(var(--navh) + clamp(46px,6vw,72px))}
.ctg{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
}
.ctg li{
  display:flex;flex-direction:column;gap:8px;
  padding:22px 26px 24px 0;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
}
.ctg li:nth-child(3n){border-right:0;padding-right:0}
.ctg li:not(:nth-child(3n+1)){padding-left:26px}
.ctg em{
  font-style:normal;font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut2);
}
.ctg a,.ctg span{
  font-size:clamp(16px,1.45vw,19px);font-weight:600;letter-spacing:-.028em;
  text-decoration:none;color:var(--ink);transition:color .25s;
}
.ctg a:hover{color:var(--acc)}
.ctg i{font-style:normal;font-size:13px;font-weight:400;letter-spacing:0;color:var(--mut)}
.ctg__map{font-size:13px!important;font-weight:600!important;color:var(--acc)!important;letter-spacing:0!important}
.ctg__map:hover{text-decoration:underline}

.ctmap{margin-top:40px;border:1px solid var(--line);border-radius:1px;overflow:hidden;background:var(--mist)}
.ctmap iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.15) contrast(1.02)}
/* pred privolitvijo: ploskev z gumbom namesto iframa */
.ctmap__go{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  width:100%;height:340px;justify-content:center;padding:0 clamp(22px,4vw,40px);
  background:none;border:0;cursor:pointer;text-align:left;
}
.ctmap--off{background:var(--mist2)}
.ctmap__go b{font-size:16px;font-weight:600;color:var(--acc)}
.ctmap__go span{font-size:14px;color:var(--mut)}
.ctmap__go i{font-style:normal;font-size:12px;line-height:1.5;color:var(--mut2);max-width:34ch;margin-top:5px}
.ctmap__go:hover b{text-decoration:underline}
@media (max-width:600px){.ctmap iframe,.ctmap__go{height:260px}}

/* the form then gets the page to itself, at a readable measure */
.ctform{padding:var(--sec) 0;background:var(--mist);border-top:1px solid var(--line)}
.ctform__in{max-width:830px;margin:0 auto;padding:0 var(--pad)}
.ctform .sechead{margin-bottom:clamp(30px,3.4vw,42px);max-width:none;text-align:center}
.ctform .sechead h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.ctform .sechead__lead{margin:18px auto 0;max-width:52ch}

/* on the homepage the details stay in view while the form is filled in */
@media (min-width:901px){
  .ct__stick{position:sticky;top:calc(var(--navh) + 30px)}
}

/* form */
.frm{background:var(--paper);border:1px solid var(--line);border-radius:1px;padding:clamp(24px,3vw,38px)}
.frm__row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fld{display:block;margin-bottom:15px}
.fld>span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.fld input,.fld select,.fld textarea{
  width:100%;background:var(--mist);border:1px solid var(--line);border-radius:1px;
  padding:13px 14px;color:var(--ink);font-family:var(--sans);font-size:15px;transition:.28s var(--e);
}
.fld input::placeholder,.fld textarea::placeholder{color:#6E7C82}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--acc);background:var(--paper);box-shadow:0 0 0 3px rgba(14,79,115,.10)}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat}
.fld textarea{resize:vertical;min-height:96px}
/* the form is grouped, because a glazier cannot quote from "how much is a
   shower" — object, stage and timing are what make the first call useful */
.frm__sec{
  display:block;margin:28px 0 16px;padding-top:22px;border-top:1px solid var(--line);
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.frm__sec:first-child{margin-top:0;padding-top:0;border-top:0}

.fset{border:0;margin:0 0 17px;padding:0;min-width:0}
.fset>legend{padding:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:block}
.chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.chip span{
  display:block;padding:10px 15px;border:1px solid var(--line);border-radius:1px;
  background:var(--mist);font-size:13.5px;font-weight:500;color:var(--mut);
  transition:.26s var(--e);
}
.chip span:hover{border-color:var(--ink);color:var(--ink)}
.chip input:checked+span{background:var(--acc);border-color:var(--acc);color:#F2F8FB}
.chip input:checked+span:hover{border-color:var(--acc);color:#F2F8FB}
.chip input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}

.cons{display:flex;align-items:flex-start;gap:11px;margin:2px 0 20px;font-size:13px;line-height:1.56;color:var(--mut)}
.cons input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--acc)}
.cons a{color:var(--acc)}

.frm__note{margin-top:17px;font-size:13px;line-height:1.6;color:var(--mut)}
.frm__note a{color:var(--acc)}
.frm__note.is-ok{color:var(--acc);font-weight:500}
.frm__note.is-err{color:#9E2A2A;font-weight:500}
.frm__note.is-err a{color:#9E2A2A}
/* past za robote — nikoli vidna in nikoli v tab vrstnem redu */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}

/* ── FOOTER ─────────────────────────────────────────────── */
.ft{background:var(--ink);color:#EEF5F6}
.ft__in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;padding-top:56px;padding-bottom:44px;align-items:start}
/* the wordmark keeps its own white field on the dark footer, the way a
   brand sheet would specify it — recolouring it would break the mark */
.ft__brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ft__logo{display:block;background:#fff;padding:13px 17px;border-radius:2px;width:fit-content}
.ft__logo img{height:42px;width:auto;display:block}
.ft__brand p{font-size:14.5px;line-height:1.62;color:var(--mut-l);margin:0}
.ft__brand b{display:block;color:#EEF5F6;font-size:15.5px;font-weight:600;letter-spacing:-.025em;margin-bottom:5px}
.ft__soc{display:flex;gap:12px}
.ft__soc a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line-d);border-radius:50%;color:var(--mut-l);transition:color .25s,border-color .25s}
.ft__soc a:hover{color:#EEF5F6;border-color:var(--acc2)}
.ft__soc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.ft__nav{display:flex;flex-direction:column;gap:9px}
.ft__nav a{text-decoration:none;font-size:14.5px;color:var(--mut-l);transition:color .25s;width:fit-content}
.ft__nav a:hover{color:var(--acc2)}
.ft__c p{font-size:14.5px;color:var(--mut-l);margin-bottom:6px}
.ft__c a{color:#EEF5F6;text-decoration:none}
.ft__c a:hover{color:var(--acc2)}
.ft__btm{border-top:1px solid var(--line-d)}
.ft__btm .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:22px}
.ft__btm span{font-size:11.5px;letter-spacing:.06em;color:rgba(238,245,246,.58)}
.ft__legal a{color:rgba(238,245,246,.82);text-decoration:none;border-bottom:1px solid rgba(238,245,246,.28)}
.ft__legal a:hover{color:#fff;border-bottom-color:#fff}

/* ── besedilne strani (politika zasebnosti) ─────────────
   Ena ozka kolona: to je stran, ki se bere, ne gleda. */
.doc{padding:clamp(56px,7vw,86px) 0 var(--sec)}
/* ostane na istem levem robu kot naslov strani nad njim, ne na sredini */
.doc__in{max-width:760px;margin-left:0}
.doc h2{font-size:clamp(1.28rem,2.1vw,1.62rem);margin:clamp(34px,4vw,48px) 0 14px}
.doc h2:first-child{margin-top:0}
.doc p{color:var(--mut);font-size:16.5px;line-height:1.72}
.doc a{color:var(--acc)}
.doc b{color:var(--ink);font-weight:600}
.doc__upd{margin-top:clamp(34px,4vw,48px);padding-top:18px;border-top:1px solid var(--line);font-size:13px}

/* ── kratke sporočilne strani (hvala, 404) ────────────── */
.msg{padding:clamp(150px,17vw,210px) 0 var(--sec);border-bottom:1px solid var(--line)}
.msg__in{max-width:680px}
.msg h1{font-size:clamp(2.2rem,4.6vw,3.6rem);margin:0 0 clamp(20px,2.4vw,30px)}
.msg .lead{margin-bottom:1.05em}
.msg__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,40px)}

/* ═══ STORITVE — subpage ════════════════════════════════ */
.phead{background:var(--mist);padding:clamp(140px,16vw,190px) 0 clamp(46px,6vw,72px);border-bottom:1px solid var(--line)}
.phead__in{display:grid;grid-template-columns:1fr .82fr;gap:clamp(32px,5vw,72px);align-items:end}
.phead h1{font-size:clamp(2.4rem,5vw,4.2rem);letter-spacing:-.034em}
.phead__lead{font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.7;color:var(--mut);max-width:52ch}
.crumb{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 20px}
.crumb a{text-decoration:none;color:var(--ink)}
.crumb a:hover{text-decoration:underline}

/* sticky index — the "pregledno" part */
.sidx{position:sticky;top:var(--navh);z-index:120;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.sidx__in{max-width:var(--w);margin:0 auto;padding:0 var(--pad);display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.sidx__in::-webkit-scrollbar{display:none}
.sidx a{
  flex:1 0 auto;display:flex;align-items:baseline;gap:9px;padding:16px 20px 15px 0;margin-right:20px;
  text-decoration:none;font-size:13.5px;font-weight:500;color:var(--mut);
  border-bottom:2px solid transparent;transition:.28s var(--e);white-space:nowrap;
}
.sidx a:last-child{margin-right:0}
.sidx a i{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--mut2);font-variant-numeric:tabular-nums}
.sidx a:hover{color:var(--ink);border-bottom-color:var(--line)}
.sidx a.is-on{color:var(--ink);border-bottom-color:var(--ink)}

/* service blocks */
.svc{padding:clamp(58px,7vw,104px) 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--navh) + 62px)}
.svc:nth-child(even){background:var(--mist)}
.svc__in{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,5vw,76px);align-items:start}
.svc:nth-child(even) .svc__in{grid-template-columns:1.18fr .82fr}
.svc:nth-child(even) .svc__body{order:2}
.svc:nth-child(even) .svc__gal{order:1}

.svc__n{
  display:block;font-size:13px;font-weight:500;line-height:1;letter-spacing:.04em;
  color:var(--mut2);font-variant-numeric:tabular-nums;margin-bottom:20px;
}
.svc h2{font-size:clamp(1.7rem,2.9vw,2.4rem);letter-spacing:-.038em;margin-bottom:18px}
.svc__lead{font-size:16px;line-height:1.72;color:var(--mut);margin-bottom:26px}
.svc__pts{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line)}
.svc:nth-child(even) .svc__pts{border-top-color:var(--mist2)}
.svc__pts li{
  position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);
  font-size:14.8px;line-height:1.55;color:var(--ink);
}
.svc:nth-child(even) .svc__pts li{border-bottom-color:var(--mist2)}
.svc__pts li::before{content:'';position:absolute;left:0;top:20px;width:12px;height:1px;background:var(--mut2)}

/* One large lead across the full width of the column, then a matched pair
   beneath it. The old layout put the lead in a 2/3-width square with two
   1/3-width thumbnails beside it — the pair was too small to read.
   Every service now leads with one of its landscape photographs, so the
   biggest picture on the page is also the one cropped by nothing. */
.svc__gal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px);align-content:start}
.svc__gal figure{margin:0;overflow:hidden;border-radius:1px;background:var(--mist2)}
.svc__gal img{width:100%;height:100%;object-fit:cover;object-position:center 46%;transition:transform 1s var(--e)}
.svc__gal figure:hover img{transform:scale(1.05)}
.svc__gal figure:first-child{grid-column:1 / -1;aspect-ratio:4/3}
.svc__gal figure:not(:first-child){aspect-ratio:1/1}

/* Nadstreški is the one service whose photographs are all portrait. Its lead
   is square rather than 4:3 — a 25% crop instead of 44%, and it keeps the
   same full-width presence as every other service. */
.svc__gal--p figure:first-child{aspect-ratio:1/1}

/* A service with no photographs of its own runs full width instead of being
   squeezed into the two-column frame the photographed ones use — a heading
   over a ruled grid, on the same rules as the materials band. */
.svc--txt .svc__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,50px);
}
.svc--txt .svc__head h2{margin-bottom:0}
.svc--txt .svc__lead{margin:0;max-width:54ch}
.svc--txt .svc__act{margin:clamp(28px,3.4vw,42px) 0 0}

.adds__list--4{grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.adds__list--4 li{padding:18px 22px 20px 34px;border-right:1px solid var(--line)}
.adds__list--4 li::before{left:8px;top:27px}
.adds__list--4 li:nth-child(4n){border-right:0}

/* closing CTA */
.cta{background:var(--ink);color:#EEF5F6;padding:clamp(60px,7vw,96px) 0}
.cta__in{display:grid;grid-template-columns:1fr auto;gap:clamp(30px,5vw,64px);align-items:center}
.cta h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.cta h2 em{color:var(--logo-l)}
.cta p{margin-top:16px;font-size:16px;line-height:1.68;color:var(--mut-l);max-width:52ch}
.cta__act{display:flex;flex-direction:column;gap:12px}

/* ── LIGHTBOX ───────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:500;background:rgba(9,13,15,.96);display:none;align-items:center;justify-content:center;padding:5vh 6vw}
.lb.is-on{display:flex;animation:fade .3s var(--e)}
@keyframes fade{from{opacity:0}}
.lb img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:1px}
.lb__c{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.06em;color:rgba(238,245,246,.5)}
.lb button{background:none;border:0;color:rgba(238,245,246,.72);cursor:pointer;transition:.25s;line-height:1}
.lb button:hover{color:#fff}
.lb__x{position:absolute;top:20px;right:26px;font-size:38px}
.lb__p,.lb__n{position:absolute;top:50%;transform:translateY(-50%);font-size:54px;padding:20px}
.lb__p{left:8px}.lb__n{right:8px}

/* ── REVEAL ─────────────────────────────────────────────── */
.js .rev{opacity:0;transform:translateY(20px);transition:opacity .85s var(--e),transform .85s var(--e)}
.js .rev.in{opacity:1;transform:none}
.js .rev[data-d="1"]{transition-delay:.09s}
.js .rev[data-d="2"]{transition-delay:.18s}
.js .rev[data-d="3"]{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1080px){
  .mas{columns:3}
  .adds__list--4{grid-template-columns:repeat(2,1fr)}
  .adds__list--4 li:nth-child(4n){border-right:1px solid var(--line)}
  .adds__list--4 li:nth-child(2n){border-right:0}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li{border-bottom:1px solid var(--line);padding-right:30px}
  .steps li:nth-child(2n){border-right:0;padding-right:0}
  .steps li:nth-child(odd){padding-left:0}
  .steps li:nth-child(even){padding-left:30px}
  .srv__grid{grid-template-columns:repeat(2,1fr)}
  .gal__grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  /* "O nas" kept its two columns all the way down, so on a phone the whole
     section was set in a 185px measure beside a 101px one. */
  .abt__grid{grid-template-columns:1fr;gap:clamp(30px,5vw,46px)}
  /* storitve subpage */
  .phead__in{grid-template-columns:1fr;align-items:start;gap:22px}
  .svc__in,.svc:nth-child(even) .svc__in{grid-template-columns:1fr;gap:30px}
  .svc__body,.svc:nth-child(even) .svc__body{order:2}
  .svc__gal,.svc:nth-child(even) .svc__gal{order:1}
  /* the text-only service has no photographs to lead with, so its heading
     must stay above its list */
  .svc--txt .svc__body,.svc--txt.svc:nth-child(even) .svc__body{order:0}
  .cta__in{grid-template-columns:1fr;gap:28px}
  .cta__act{flex-direction:row;flex-wrap:wrap}

  .hero__in{grid-template-columns:1fr;min-height:0}
  .hero__copy{padding:calc(var(--navh) + 44px) var(--pad) 40px}
  .hero__vis{min-height:0;height:clamp(360px,58svh,620px)}
  .sechead--split{grid-template-columns:1fr;align-items:start}
  .sechead--split .sechead__lead{max-width:600px}
  .xg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xg__feat{grid-row:auto}
  .ctg{grid-template-columns:repeat(2,1fr)}
  .ctg li:nth-child(3n){border-right:1px solid var(--line);padding-right:26px}
  .ctg li:not(:nth-child(3n+1)){padding-left:0}
  .ctg li:nth-child(2n){border-right:0;padding-right:0}
  .ctg li:nth-child(2n){padding-left:26px}
  .ct__grid{grid-template-columns:1fr}
  .mat__in{grid-template-columns:1fr;gap:clamp(30px,5vw,46px)}
}
/* ── the header between phone and desktop ───────────────
   The bar is one fixed 76px line, so nothing in it may wrap. Below 1180px
   the brand tag no longer fits beside five links, and below 1000px neither
   does the telephone block; both step out before anything starts wrapping. */
.nav__links a,.nav__tel b,.nav__tel span{white-space:nowrap}
@media (max-width:1180px){
  .brand__sep,.brand__tag{display:none}
}
@media (max-width:1000px){
  .nav__tel{display:none}
  .nav__in{gap:20px}
  .nav__links{gap:22px}
}

@media (max-width:820px){
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;padding:100px var(--pad) 40px;
    /* opaque, not translucent: nested inside .nav's own backdrop-filter the
       page behind stayed legible through a .985 white and the headline read
       straight through the menu */
    background:var(--paper);
    flex-direction:column;gap:0;transform:translateY(-101%);
    /* visibility keeps the closed menu out of the tab order — a transform
       alone leaves six invisible links focusable */
    visibility:hidden;transition:transform .5s var(--e),visibility .5s var(--e);
    box-shadow:0 20px 40px -30px rgba(14,20,23,.4);
  }
  .nav__links.is-open{transform:none;visibility:visible}
  .nav__links a{font-size:24px;font-weight:600;letter-spacing:-.03em;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .nav__links a::after{display:none}
  .nav__mtel{display:block;font-size:17px!important;color:var(--acc)!important;border-bottom:0!important;padding-top:24px!important}
  .nav__mob{display:block}
  .burger,.brand{position:relative;z-index:2}
  .burger{display:block}
  .nav__tel{display:none}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .brand__sep,.brand__tag{display:none}
  .brand__logo{height:37px}
  .adds__list{grid-template-columns:1fr}
  .xg{gap:8px}
  .xg__it{padding:16px 15px 18px}
  .xg__it svg{margin-bottom:6px}
  .xg__it b{font-size:14.5px}
  .xg__it i{font-size:12.5px}
  .adds__list--4{grid-template-columns:1fr}
  .adds__list--4 li{border-right:0!important;padding-right:0}
  .svc--txt .svc__head{grid-template-columns:1fr;align-items:start;gap:18px}
  .nav__in{gap:14px}
  .sidx a{padding:14px 16px 13px 0;margin-right:14px;font-size:13px}
  .svc__gal figure:first-child{aspect-ratio:4/3}
  .svc__gal--p figure:first-child{aspect-ratio:1/1}
  .cta__act .btn{flex:1;min-width:170px}
  .hero h1{font-size:clamp(2.25rem,9.2vw,3.2rem)}
  .hero__cta .btn{flex:1;min-width:180px}
  .hero__meta{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
  .hero__meta>div{border-right:0;margin-right:0;padding:14px 0 0}
  .hero__vis{height:clamp(320px,52svh,480px)}
  .rail li{min-width:50%;border-bottom:1px solid var(--line)}
  .rail li:nth-child(2n){border-right:0}
  .rail a,.rail li:first-child a{padding:18px var(--pad) 19px}
  .steps{grid-template-columns:1fr}
  .steps li{border-right:0;padding:26px 0 30px!important}
  .srv__grid{grid-template-columns:1fr}
  .gal__grid{grid-template-columns:repeat(2,1fr);gap:7px}
  .mas{columns:2;column-gap:7px}
  .mas .gi{margin-bottom:7px}
  .spec>div{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .brk__in{grid-template-columns:1fr;gap:28px}
  .brk__cta{text-align:left;align-items:flex-start}
  .info{grid-template-columns:1fr}
  .info__b{border-right:0!important;padding-left:0!important;padding-right:0}
  .ctg{grid-template-columns:1fr}
  .ctg li{border-right:0!important;padding-left:0!important;padding-right:0}
  .frm__row{grid-template-columns:1fr;gap:0}
  .ft__in{grid-template-columns:1fr;gap:30px}
  .lb__p,.lb__n{font-size:38px;padding:12px}
  .sechead--row{align-items:flex-start}
}

/* ── MOBILE — the homepage re-set ───────────────────────
   Below 680px the page had been the desktop layout poured into one narrow
   column: 18,300px of scroll, six service cards each taller than the
   screen, and the gallery fifteen rows deep. Three blocks are re-set
   rather than merely stacked, and the form stops zooming iOS. */
@media (max-width:680px){

  /* the three hero facts sat one per row. Two columns fit at 335px, and the
     telephone — the one a thumb actually goes for — keeps a line of its own */
  .hero__meta{grid-template-columns:1fr 1fr;gap:0 22px}
  .hero__meta>div:last-child{grid-column:1 / -1;border-top:1px solid var(--line);margin-top:2px}

  /* the service rail ran two per row over three rows. One swipeable row
     reads as a strip of chapters and costs a third of the height */
  .rail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail::-webkit-scrollbar{display:none}
  .rail li{flex:0 0 auto;min-width:0;border-bottom:0;border-right:1px solid var(--line)}
  .rail li:last-child{border-right:0}
  .rail a,.rail li:first-child a{padding:17px 20px 18px;white-space:nowrap}
  .rail li:first-child a{padding-left:var(--pad)}
  .rail li:last-child a{padding-right:var(--pad)}
  /* no hover on a swipeable strip, and the arrow would only steal width */
  .rail a::after{display:none}

  /* six cards, each a full-width square photograph above its text, came to
     3,400px — four and a half screens for what is really a menu. The card
     turns on its side: the photograph keeps its 1:1 frame at thumbnail size
     and the text sits beside it, so nothing is dropped */
  .srv__grid{gap:24px}
  .sc{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:start}
  .sc__fig{margin:0}
  .sc__b{padding-left:0}
  .sc__n{position:static;display:block;margin-bottom:5px}
  /* the heading is a flex row on the desktop, which strands the arrow at the
     far right once the title wraps to two lines in a narrow column */
  .sc h3{display:block;font-size:18px;margin-bottom:7px}
  .sc p{font-size:14.6px;line-height:1.6}
  .sc p.sc__note{margin-top:12px;padding-top:11px;font-size:12.6px}
  /* there is no hover on a touch screen, so the arrow that tells you the
     whole card is a link has to be there from the start */
  .sc h3::after{content:'\00a0→';opacity:1;transform:none}

  /* the homepage gallery is a taste of the work and the whole archive is one
     tap away, so it becomes a swipe strip: one row instead of fifteen, every
     photograph still uncropped, landscapes simply running wider than
     portraits. It bleeds to both screen edges so the next frame shows */
  .gal__grid{
    display:flex;align-items:flex-start;gap:8px;
    overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
    padding:0 var(--pad) 2px;
  }
  .gal__grid::-webkit-scrollbar{display:none}
  .gal__grid .gi{flex:0 0 auto;width:auto;height:222px;scroll-snap-align:center}

  /* 16px is the threshold under which iOS zooms the page on focus, and the
     zoom does not come back out on its own */
  .fld input,.fld select,.fld textarea{font-size:16px}
  .fld select{background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px}
}