/* =========================================================
   EDO case study (2026)
   Desktop (>= 992px): the Figma canvas is 1515px wide. --u is one design pixel at the
   current page width, so every --x / --y / --w / --h value below is taken straight from Figma.
   Phone / tablet (< 992px): sections stack in normal flow.
   ========================================================= */

.edo26{
	--edo-brown:#a47764;
	--edo-cream:#f1eade;
	--edo-dark:#4d352d;
	--edo-ink:#151515;
	container-type:inline-size;
	background:var(--edo-brown);
	color:var(--edo-cream);
	overflow:hidden;
}
.edo26 *{--u:calc(100cqw / 1515);}
.edo26 img{display:block;max-width:none;}
.edo26 h1,.edo26 h2,.edo26 p{margin:0;}

/* Layout primitives */
.edo26 .band{position:relative;height:calc(var(--h) * var(--u));margin-top:calc(var(--mt, 0) * var(--u));}
.edo26 .clip{overflow:hidden;}
.edo26 .abs{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));}
.edo26 .abs > img,
.edo26 img.abs{width:100%;height:auto;}
.edo26 img.abs{width:calc(var(--w) * var(--u));}
.edo26 .full{width:100%;height:auto;margin-top:calc(var(--mt, 0) * var(--u));}
.edo26 .cream{background:var(--edo-cream);display:flow-root;}

/* Type */
.edo26 .title{font-size:calc(26 * var(--u));line-height:calc(31.607 * var(--u));font-weight:400;text-transform:uppercase;color:inherit;}
.edo26 .title-lg{font-size:calc(40 * var(--u));line-height:calc(46 * var(--u));color:var(--edo-ink);}
.edo26 .para,
.edo26 .para p{font-size:calc(25 * var(--u));line-height:calc(30 * var(--u));letter-spacing:calc(0.3148 * var(--u));color:#fff;}
.edo26 .para.dark{color:var(--edo-ink);}
.edo26 .logo img{width:100%;height:auto;}

/* Brand pattern + logo card + palette + typography */
.edo26 .pattern{height:calc(var(--h) * var(--u));overflow:hidden;}
.edo26 .pattern img{width:calc(1512 * var(--u));height:auto;}
.edo26 .brand{z-index:1;}
.edo26 .logo-card{height:calc(395.3 * var(--u));background:var(--edo-cream);overflow:hidden;}
.edo26 .logo-card img{position:absolute;left:calc(13.6 * var(--u));top:calc(163.8 * var(--u));width:calc(512.5 * var(--u));height:auto;}
.edo26 .palette{display:flex;height:calc(395.6 * var(--u));margin:0;padding:0;list-style:none;}
.edo26 .palette li{position:relative;flex:1;}
.edo26 .palette span{position:absolute;left:calc(25.37 * var(--u));top:calc(189.44 * var(--u));font-family:"Inter", sans-serif;font-size:calc(9.946 * var(--u));line-height:calc(15.586 * var(--u));letter-spacing:calc(0.151 * var(--u));text-transform:uppercase;}
.edo26 .palette .c1{background:linear-gradient(to bottom, #a47764, #845e4d);color:var(--edo-cream);}
.edo26 .palette .c2{background:linear-gradient(to bottom, #f1eade, #e9dbc4);color:#212529;}
.edo26 .palette .c3{background:linear-gradient(to bottom, #9d9a95 0%, #212529 64.534%);color:var(--edo-cream);}
.edo26 .palette .c4{background:linear-gradient(to bottom, #f0e0d1, #f1bb9d);color:#212529;}
.edo26 .type-grid .vline{position:absolute;left:calc(var(--x) * var(--u));top:calc(264 * var(--u));bottom:0;width:1px;background:var(--edo-cream);}
.edo26 .type-grid .hline{position:absolute;left:0;right:0;top:calc(var(--y) * var(--u));height:1px;background:var(--edo-cream);}
.edo26 .type-label{font-size:calc(24.37 * var(--u));line-height:calc(31.607 * var(--u));font-weight:400;}
.edo26 .type-aa{font-family:"Lexend Deca", sans-serif;font-size:calc(560.937 * var(--u));line-height:calc(879.08 * var(--u));letter-spacing:calc(8.5155 * var(--u));white-space:nowrap;}

/* Instagram mock-up */
.edo26 .ig-card{height:calc(910 * var(--u));}
.edo26 .ig-card .ig-bg{width:100%;height:100%;object-fit:cover;}
.edo26 .ig-card .ig-ui{position:absolute;left:calc(105 * var(--u));top:calc(65 * var(--u));width:calc(457 * var(--u));height:auto;}
.edo26 .ig-card .ig-tabs{position:absolute;left:calc(152 * var(--u));top:calc(388 * var(--u));width:calc(363 * var(--u));height:auto;}

/* Campaign grid */
.edo26 .grid4 .q{height:calc(824 * var(--u));overflow:hidden;}
.edo26 .grid4 .q > img:first-child{width:100%;height:100%;object-fit:cover;}
.edo26 .q-tr{background:var(--edo-brown);text-align:center;}
.edo26 .q-br{background:var(--edo-dark);}
.edo26 .q-tl .love-sm{position:absolute;left:calc(250 * var(--u));top:calc(519.7 * var(--u));width:calc(265 * var(--u));height:auto;}
.edo26 .q-tr .stool{position:absolute;left:calc(149 * var(--u));top:calc(112 * var(--u));width:calc(448 * var(--u)) !important;height:auto !important;}
.edo26 .q-tr p{position:absolute;left:calc(153 * var(--u));top:calc(492 * var(--u));width:calc(447 * var(--u));font-size:calc(20 * var(--u));line-height:calc(25 * var(--u));letter-spacing:calc(0.3148 * var(--u));}
.edo26 .q-tr .logo-sm{position:absolute;left:calc(320 * var(--u));top:calc(659.7 * var(--u));width:calc(113 * var(--u));height:auto;}
.edo26 .q-br .post{position:absolute;left:calc(167 * var(--u));top:calc(117 * var(--u));width:calc(432 * var(--u)) !important;height:auto !important;}
.edo26 .q-br .url{position:absolute;left:calc(263 * var(--u));top:calc(681 * var(--u));width:calc(240 * var(--u));font-size:calc(16 * var(--u));line-height:calc(31.607 * var(--u));text-align:center;color:var(--edo-cream);text-decoration:none;}

/* Scroll animations (edo-2026.js adds .edo26-motion) */
.edo26 .px-frame{overflow:hidden;}
.edo26 .px-frame > img{display:block;width:100%;height:auto;will-change:transform;}
.edo26 .grid4 .q > img:first-child,
.edo26 .pattern img{will-change:transform;}
.edo26.edo26-motion .cream{background:transparent;} /* the page colour fades between brown and cream instead */

/* Closing call to action uses the site's standard .btn-visit-website (pages/portfolio/portfolio.css) */


/* =========================================================
   Phone / tablet: stack everything
   ========================================================= */
@media (max-width: 991.98px){
	.edo26 *{--u:1px;}
	.edo26 .band{height:auto;margin-top:0;padding:40px 16px;display:flex;flex-direction:column;gap:20px;}
	.edo26 .clip{padding:12px 0;}
	.edo26 .abs{position:relative;left:auto;top:auto;width:100% !important;}
	.edo26 .full{margin-top:0;}
	.edo26 .title{font-size:20px;line-height:26px;}
	.edo26 .title-lg{font-size:28px;line-height:32px;}
	.edo26 .para,
	.edo26 .para p{font-size:17px;line-height:24px;letter-spacing:0.2px;}
	.edo26 .logo{width:120px !important;}
	.edo26 .intro{padding-top:110px;} /* clear the fixed site header */

	.edo26 .pattern{height:auto;}
	.edo26 .pattern img{width:100%;}
	.edo26 .brand{padding-top:0;}
	.edo26 .logo-card{height:auto;aspect-ratio:705.6 / 395.3;}
	.edo26 .logo-card img{left:2%;top:41%;width:73%;}
	.edo26 .palette{height:180px;}
	.edo26 .palette span{left:10px;top:80px;font-size:10px;line-height:16px;}
	.edo26 .type-grid{display:none;}
	.edo26 .type-label{font-size:18px;}
	.edo26 .type-aa{font-size:38vw;line-height:1;}
	.edo26 .brand img.abs{width:45% !important;}

	.edo26 .ig-card{height:auto;aspect-ratio:687 / 910;}
	.edo26 .ig-card .ig-ui{left:15.28%;top:7.14%;width:66.5%;}
	.edo26 .ig-card .ig-tabs{left:22.13%;top:42.64%;width:52.84%;}

	.edo26 .grid4{padding:0;gap:0;}
	.edo26 .grid4 .q{height:auto;aspect-ratio:765 / 824;}
	.edo26 .q-tr,
	.edo26 .q-br{aspect-ratio:auto !important;padding:40px 16px;display:flex;flex-direction:column;align-items:center;gap:20px;}
	.edo26 .q-tr .stool,
	.edo26 .q-tr p,
	.edo26 .q-tr .logo-sm,
	.edo26 .q-br .post,
	.edo26 .q-br .url{position:static;}
	.edo26 .q-tr .stool,
	.edo26 .q-br .post{width:80% !important;}
	.edo26 .q-tr p{width:100%;font-size:16px;line-height:22px;}
	.edo26 .q-tr .logo-sm{width:90px;}
	.edo26 .q-tl .love-sm{left:32.7%;top:63.1%;width:34.6%;}
	.edo26 .q-br .url{width:auto;font-size:16px;line-height:24px;}
}