/* ===========================================================================
   OHM DESIGN INTERIOR · BLOG
   Același limbaj ca pagina principală și pagina „Design interior București”
   (docs/sdlc/landing-redesign/reference-design-system.md): alb galerie + negru,
   grotesk bold foarte mare peste text de corp subțire, fotografii așezate
   asimetric, mult spațiu gol, un singur semn grafic: „+”.
   Token-urile, antetul, meniul și subsolul sunt copiate din
   servicii-design-interior.html; schimbați-le în ambele locuri.
   Plan: docs/sdlc/blog/plan.md
   =========================================================================== */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/familjen-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/familjen-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/figtree-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ------------------------------ tokens ------------------------------ */
:root{
  --ink:#000; --paper:#fff;
  --bg:var(--paper); --fg:var(--ink);
  --display:"Familjen Grotesk",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --fs-xl:clamp(40px,7.57vw,109px);
  --fs-l:clamp(28px,4.03vw,58px);
  --fs-m:clamp(22px,2.2vw,32px);
  --fs-b:18px; --fs-s:14px;
  --gut:12px; --hdr:64px;
  --sec:clamp(120px,16vw,260px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:768px){:root{--gut:30px}}
@media (min-width:992px){:root{--hdr:90px}}
html.is-dark{--bg:var(--ink);--fg:var(--paper)}

/* ------------------------------ base ------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;
  font-size:var(--fs-b);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background-color .8s var(--ease),color .8s var(--ease)}
html.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
strong,b{font-weight:600}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--fg);color:var(--bg)}
.gtm-ns{display:none;visibility:hidden}
.skip{position:fixed;left:var(--gut);top:-60px;z-index:200;background:#000;color:#fff;padding:10px 16px;
  font-family:var(--display);font-weight:700;text-decoration:none;border-radius:12px}
.skip:focus{top:12px}

/* ------------------------------ type ------------------------------ */
.xl,.l,.m,.lbl{font-family:var(--display);font-weight:700}
.xl{font-size:var(--fs-xl);line-height:.9;letter-spacing:-.01em}
.l{font-size:var(--fs-l);line-height:1;letter-spacing:-.005em}
.m{font-size:var(--fs-m);line-height:1.1}
.lbl{font-size:var(--fs-b);line-height:1.1;text-transform:uppercase;letter-spacing:.01em;display:block}
.sup{font-family:var(--display);font-weight:700;font-size:12px;line-height:1;letter-spacing:.04em;vertical-align:top}
.measure{max-width:31em}

/* ------------------------------ layout ------------------------------ */
.wrap{padding-inline:var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.grid>*{grid-column:1/-1}
.sec{padding-top:var(--sec)}

/* ------------------------------ the "+" ------------------------------ */
.pl{--pl:14px;display:inline-block;flex:none;width:var(--pl);height:var(--pl);position:relative}
.pl::before,.pl::after{content:"";position:absolute;background:currentColor}
.pl::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.pl::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.plink{font-family:var(--display);font-weight:700;font-size:var(--fs-b);line-height:1;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;position:relative;padding-bottom:8px;cursor:pointer;
  background:none;border:0;padding-inline:0}
.plink::after{content:"";position:absolute;left:0;bottom:0;width:100%;border-bottom:1px solid currentColor;
  transition:width .4s var(--ease)}
.plink:hover::after{width:0}
.btn{font-family:var(--display);font-weight:700;font-size:var(--fs-b);line-height:1.5;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;padding:.405rem 1.2rem .405rem .95rem;border:1px solid currentColor;
  border-radius:12px;background:transparent;cursor:pointer;transition:letter-spacing .4s var(--ease),background-color .3s,color .3s}
.btn--fill{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.dark .btn--fill{background:#fff;color:#000;border-color:#fff}
.btn--lg{padding:.8rem 1.5rem .8rem 1.2rem}
.btn:hover{letter-spacing:-.04em}
@media (prefers-reduced-motion:no-preference){.btn:hover{animation:gel .4s ease}}
@keyframes gel{25%{padding-inline:1.05rem .82rem}50%{padding-inline:1.2rem .95rem}75%{padding-inline:1.05rem .82rem}}
.dark{background:#000;color:#fff}
.dark ::selection{background:#fff;color:#000}

/* ------------------------------ header ------------------------------ */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hdr);padding-inline:var(--gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--fg);
  transition:transform .5s var(--ease),background-color .4s,color .4s}
.hdr.is-solid{background:var(--bg)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr.on-image{color:#fff;background:transparent}
.hdr-tel{font-family:var(--display);font-weight:700;font-size:var(--fs-b);text-decoration:none;text-transform:uppercase;justify-self:start}
.hdr-logo{justify-self:center;display:block}
.hdr-logo img{width:56px;height:56px;transition:filter .4s}
@media (min-width:992px){.hdr-logo img{width:76px;height:76px}}
html.is-dark .hdr-logo img,.hdr.on-image .hdr-logo img{filter:invert(1)}
html.menu-open .hdr{color:#000;background:#fff;transform:none}
html.menu-open .hdr-logo img{filter:none}
.hdr-right{justify-self:end;display:flex;align-items:center;gap:28px}
.hdr-cta{display:none}
@media (min-width:768px){.hdr-cta{display:inline-flex}}
@media (max-width:520px){.hdr-tel{font-size:15px}}
.burger{width:44px;height:44px;margin-right:-7px;border:0;background:none;cursor:pointer;position:relative;padding:0}
.burger span{position:absolute;left:7px;right:7px;height:1px;background:currentColor;
  transition:transform 1s cubic-bezier(.8,.5,.2,1.4),opacity .3s,top .4s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:30px}
.burger:not([aria-expanded=true]):hover span:nth-child(1){transform:rotate(-3deg)}
.burger:not([aria-expanded=true]):hover span:nth-child(2){transform:rotate(3deg)}
.burger:not([aria-expanded=true]):hover span:nth-child(3){transform:rotate(-4deg)}
.burger[aria-expanded=true] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* ------------------------------ menu overlay ------------------------------ */
.menu{position:fixed;inset:0;z-index:90;background:#fff;color:#000;display:flex;flex-direction:column;
  padding:calc(var(--hdr) + 24px) var(--gut) 0;visibility:hidden;opacity:0;
  transition:opacity .45s var(--ease),visibility 0s .45s;overflow-y:auto}
.menu.is-open{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
.menu-main{flex:1;align-items:center;row-gap:40px;padding-bottom:40px}
.menu-nav a{font-family:var(--display);font-weight:700;font-size:var(--fs-l);line-height:1.12;text-transform:lowercase;
  text-decoration:none;display:inline-flex;align-items:center;gap:20px;transition:letter-spacing .4s var(--ease)}
.menu-nav a .pl{--pl:20px;opacity:0;transition:opacity .3s}
.menu-nav a:hover,.menu-nav a[aria-current]{letter-spacing:.06em}
.menu-nav a:hover .pl,.menu-nav a[aria-current] .pl{opacity:1}
@media (min-width:992px){.menu-nav{grid-column:1/7;padding-left:calc(var(--gut) + 12px)}}
.menu-side{display:none}
@media (min-width:992px){.menu-side{display:flex;flex-direction:column;gap:28px;grid-column:8/13;align-self:center;max-width:30em}}
.menu-bar{border-top:1px solid #000;margin-inline:calc(var(--gut) * -1);padding:22px var(--gut) 26px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.menu-bar .btn{margin-left:auto}
@media (max-width:767px){.menu-bar .btn{margin-left:0}}
.menu-nav li{transform:translateY(24px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.menu.is-open .menu-nav li{transform:none;opacity:1}
.menu.is-open .menu-nav li:nth-child(2){transition-delay:.04s}
.menu.is-open .menu-nav li:nth-child(3){transition-delay:.08s}
.menu.is-open .menu-nav li:nth-child(4){transition-delay:.12s}
.menu.is-open .menu-nav li:nth-child(5){transition-delay:.16s}
.menu.is-open .menu-nav li:nth-child(6){transition-delay:.2s}

/* ------------------------------ footer ------------------------------ */
.foot{background:#fff;color:#000;padding-top:clamp(64px,7vw,100px);overflow:hidden}
.foot-grid{row-gap:40px}
.foot-logo{width:76px;height:76px;margin-bottom:20px}
.foot-c1 p{max-width:26em;font-size:var(--fs-s)}
.foot-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:var(--fs-s);letter-spacing:.04em;margin-bottom:14px}
.foot-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot a{font-family:var(--display);font-weight:700;text-decoration:none;position:relative}
.foot a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;border-bottom:1px solid currentColor;transition:width .4s var(--ease)}
.foot a:hover::after{width:100%}
.foot-c2 p+p{margin-top:8px}
.foot-social{display:flex;gap:22px;margin-top:20px}
@media (min-width:768px){.foot-c1{grid-column:1/7}.foot-c2{grid-column:7/13}.foot-c3{grid-column:1/7}.foot-c4{grid-column:7/13}}
@media (min-width:1200px){.foot-c1{grid-column:1/4}.foot-c2{grid-column:4/7}.foot-c3{grid-column:7/10}.foot-c4{grid-column:10/13}}
.foot-bottom{margin-top:clamp(56px,6vw,90px);padding-block:20px;border-top:1px solid #000;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px 28px;font-size:var(--fs-s)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-mark{font-family:var(--display);font-weight:700;font-size:13.6vw;line-height:.78;letter-spacing:-.045em;
  white-space:nowrap;margin:clamp(16px,2vw,30px) 0 -.06em calc(var(--gut) - .04em)}

/* ------------------------------ WhatsApp ------------------------------ */
.wa{position:fixed;right:var(--gut);bottom:var(--gut);z-index:80;width:52px;height:52px;border-radius:12px;
  background:#000;color:#fff;border:1px solid #fff;display:grid;place-items:center;transition:transform .3s var(--ease)}
.wa svg{width:26px;height:26px}
.wa:hover{transform:translateY(-3px)}
html.menu-open .wa{display:none}

/* ------------------------------ motion: reveal on enter ------------------------------ */
.js-motion [data-reveal]{opacity:0;transform:translateY(50px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-motion [data-reveal].is-in{opacity:1;transform:none}

/* ===========================================================================
   BLOG - componente noi
   =========================================================================== */

/* ------------------------------ breadcrumb + meta ------------------------------ */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-family:var(--display);font-weight:700;font-size:var(--fs-s);
  text-transform:uppercase;letter-spacing:.04em}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.5}
.meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:var(--fs-s)}

/* ------------------------------ article hero ------------------------------ */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;color:#fff;overflow:hidden;background:#1a1a1a}
.hero-media,.hero-media img{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-fit:cover;object-position:50% 55%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.32) 42%,rgba(0,0,0,0) 66%),
             linear-gradient(to bottom,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%)}
.hero-cap{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(28px,5vw,60px)}
.hero-cap .lbl{margin-bottom:16px}
.hero-h1{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.hero-h1 .t{display:block;font-size:clamp(40px,7vw,108px);line-height:.92;max-width:11em}
.hero-h1 .s{display:block;margin-top:clamp(14px,1.6vw,24px);font-size:var(--fs-m);line-height:1.15;max-width:22em}
@media (min-width:992px){.hero-cap{right:22%}}

/* ------------------------------ intro (statement + two photos) ------------------------------ */
.intro{padding-top:clamp(28px,3vw,40px)}
.intro-top{row-gap:20px;align-items:center}
@media (min-width:992px){.intro-top .crumbs{grid-column:1/7}.intro-top .meta{grid-column:7/13;justify-content:flex-end}}
.duo{margin-top:clamp(64px,8vw,130px);row-gap:clamp(40px,6vw,0px);align-items:start}
.duo a:nth-child(1){grid-column:1/9}
.duo a:nth-child(2){grid-column:5/13}
@media (min-width:768px){
  .duo a:nth-child(1){grid-column:1/6;margin-top:clamp(80px,14vw,240px)}
  .duo a:nth-child(2){grid-column:8/12}
}
.lede{margin-top:clamp(72px,9vw,150px);row-gap:28px}
.lede .l{max-width:20em}
.lede-body p+p{margin-top:18px}
@media (min-width:992px){.lede .l{grid-column:1/8}.lede-body{grid-column:8/12;padding-top:12px}}

/* ------------------------------ table of contents ------------------------------ */
.toc{border-bottom:1px solid currentColor}
.toc li{border-top:1px solid currentColor}
.toc a{display:grid;grid-template-columns:3.2em 1fr auto;align-items:baseline;gap:14px;padding:16px 0;text-decoration:none}
.toc .t{font-family:var(--display);font-weight:700;font-size:var(--fs-m);line-height:1.1;transition:letter-spacing .4s var(--ease)}
.toc .pl{--pl:18px;align-self:center}
@media (hover:hover){.toc a:hover .t{letter-spacing:.02em}}
.toc-head{row-gap:24px;margin-bottom:clamp(40px,5vw,72px);align-items:end}
@media (min-width:992px){.toc-head .l{grid-column:1/8}.toc-head p{grid-column:9/13}}

/* ------------------------------ stage ------------------------------ */
.stage{scroll-margin-top:var(--hdr)}
.stage-head{border-top:1px solid currentColor;padding-top:18px;row-gap:24px;align-items:start}
.stage-no{display:flex;align-items:flex-start;gap:14px}
.stage-no .xl{font-size:clamp(72px,11vw,170px);line-height:.8;letter-spacing:-.04em}
.stage-no .sup{padding-top:.6em}
.stage-head h2{max-width:16em}
.stage-body{margin-top:clamp(36px,4vw,64px);row-gap:18px}
.stage-body p+p{margin-top:18px}
@media (min-width:992px){
  .stage-no{grid-column:1/4}
  .stage-head h2{grid-column:4/12}
  .stage-body>div{grid-column:7/12}
}

/* stage photo grid: portraits span 4 columns, landscapes 8; every other row shifts down */
.sg{margin-top:clamp(56px,7vw,110px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,48px) var(--gut);align-items:start}
.sg .ph.ls{grid-column:1/-1}
@media (min-width:992px){
  .sg{grid-template-columns:repeat(12,minmax(0,1fr))}
  .sg .ph{grid-column:span 4}
  .sg .ph.ls{grid-column:span 8}
  .sg .ph:nth-child(3n+2){margin-top:clamp(60px,8vw,140px)}
  .sg.one .ph{grid-column:3/span 8}
  .sg.two .ph:nth-child(1){grid-column:2/span 4}
  .sg.two .ph:nth-child(2){grid-column:8/span 4}
}
.ph{position:relative;display:block;overflow:hidden;cursor:zoom-in;background:#eee}
html.is-dark .ph{background:#111}
.ph img{width:100%;transition:transform .6s var(--ease)}
@media (hover:hover){.ph:hover img{transform:scale(1.04)}}
.ph .pl{position:absolute;right:12px;bottom:12px;--pl:18px;color:#fff;mix-blend-mode:difference}

/* ------------------------------ result list ------------------------------ */
.res-head{row-gap:28px}
.res-head p+p{margin-top:18px}
@media (min-width:992px){.res-head .l{grid-column:1/8}.res-head>div{grid-column:8/12;padding-top:12px}}
.res-list{margin-top:clamp(56px,7vw,110px);display:grid;grid-template-columns:1fr;column-gap:var(--gut);row-gap:0;counter-reset:r}
@media (min-width:768px){.res-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.res-list li{counter-increment:r;display:grid;grid-template-columns:3em 1fr;gap:14px;padding:16px 0;border-top:1px solid currentColor}
.res-list li::before{content:counter(r,decimal-leading-zero);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em;padding-top:6px}
.res-close{margin-top:clamp(56px,7vw,110px)}
@media (min-width:992px){.res-close p{grid-column:7/12}}

/* ------------------------------ why it matters ------------------------------ */
.why-row{row-gap:28px}
.why-row p+p{margin-top:18px}
@media (min-width:992px){.why-row .l{grid-column:1/8}.why-row>div{grid-column:8/12;padding-top:12px}}

/* ------------------------------ closing call (inverted) ------------------------------ */
.cta{margin-top:var(--sec);padding-block:clamp(80px,11vw,180px)}
.cta .xl{max-width:11em;margin-top:24px}
.cta-row{margin-top:clamp(48px,6vw,90px);row-gap:36px;align-items:end}
.cta-row p+p{margin-top:18px}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
@media (min-width:992px){.cta-row>div:first-child{grid-column:1/6}.cta-actions{grid-column:7/13;justify-content:flex-end}}
.cta-tel{font-family:var(--display);font-weight:700;font-size:var(--fs-l);line-height:1;text-decoration:none;white-space:nowrap}
.cta-tel:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}

/* ------------------------------ blog index ------------------------------ */
.bi-head{padding-top:calc(var(--hdr) + clamp(48px,7vw,110px))}
.bi-head .xl{margin-top:20px}
.bi-head p{margin-top:clamp(28px,4vw,56px)}
@media (min-width:992px){.bi-head p{grid-column:7/12}}
.post{margin-top:clamp(72px,9vw,150px);border-top:1px solid currentColor;padding-top:16px;row-gap:28px;align-items:start}
.post-pic{display:block;overflow:hidden;aspect-ratio:3/2}
.post-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post:hover .post-pic img{transform:scale(1.03)}
.post-txt{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.post-txt h2 a{text-decoration:none}
@media (min-width:992px){.post-pic{grid-column:1/8}.post-txt{grid-column:9/13}}

/* ------------------------------ lightbox ------------------------------ */
.lb{border:0;padding:0;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;background:rgba(0,0,0,.94);color:#fff}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:transparent}
.lb img{max-width:min(92vw,1400px);max-height:80vh;width:auto;height:auto}
.lb-x,.lb-nav{position:absolute;width:48px;height:48px;border:0;background:none;cursor:pointer;color:#fff;display:grid;place-items:center}
.lb-x{top:var(--gut);right:var(--gut)}
.lb-x .pl{--pl:22px;transform:rotate(45deg)}
.lb-nav{top:50%;margin-top:-24px;font-family:var(--display);font-weight:700;font-size:28px}
.lb-prev{left:var(--gut)}.lb-next{right:var(--gut)}
.lb-cap{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);display:flex;justify-content:space-between;gap:20px;font-size:var(--fs-s)}
.lb-cap b{font-family:var(--display);font-weight:700;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}