/* Iconic Mahi editorial refresh · Nov 2026. Existing studio behavior preserved. */
:root{--paper:#f8f5eb;--cream:#efece1;--green:#103e31;--green2:#285746;--gold:#b68a44;--ink:#1d2e26;--muted:#596e61;--border:#dacebd;--white:#fffdf7}
body{background:var(--paper)}
.shell{max-width:1420px}
.nav{height:84px;background:#faf8f0;border-bottom:1px solid #e2dbc9}
.brand-title{font-family:'Playfair Display',Georgia,serif;font-size:1.85rem}
.nav-links{gap:clamp(12px,1.8vw,25px)}
.btn{border-radius:999px;padding:13px 25px;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{box-shadow:0 10px 26px #163e3025}
.eyebrow{letter-spacing:.2em;color:#9b7138}
.section{padding:clamp(65px,8vw,115px) 0}
.card,.price-card,.info-panel,.service-detail{border-radius:18px;box-shadow:0 6px 22px #283c2710}
.hero-editorial{background:radial-gradient(circle at 82% 32%,#f4ead9,transparent 46%),linear-gradient(120deg,#faf7f0,#f5f1e7);position:relative;overflow:hidden}
.hero-editorial .hero-grid{min-height:700px;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:24px;padding-top:80px;padding-bottom:85px}
.hero-editorial h1{font-size:clamp(3.4rem,6vw,6.7rem);line-height:1.04;max-width:760px;letter-spacing:-.055em}
.hero-editorial h1 em{font-style:normal;color:#a97e40}
.hero-editorial .lead{max-width:560px;color:#506458}
.hero-editorial .signed{margin-top:42px;font-size:.7rem}
.hero-editorial .hero-art{height:580px;position:relative}
.hero-editorial .hero-art:before,.hero-editorial .hero-art:after{content:none}
.editing-scene{position:absolute;inset:3% 0 5% 1%;display:flex;align-items:center;justify-content:center}
.editing-scene::before{content:'';position:absolute;width:85%;height:79%;border-radius:50%;background:linear-gradient(160deg,#dfe5d9,#e8d9c4);filter:blur(1px);top:2%;right:0}
.editor-laptop{position:relative;width:min(100%,605px);transform:rotate(-2deg);z-index:3}
.editor-laptop-screen{border:11px solid #313734;border-radius:17px 17px 6px 6px;background:#fffef9;box-shadow:0 30px 75px #2a302a37;overflow:hidden;aspect-ratio:1.45}
.editor-topbar{height:34px;background:#f5f1e9;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #e6decf;color:#567063;font-size:.65rem}
.editor-topbar i{background:#d7aa65;width:7px;height:7px;border-radius:50%;box-shadow:12px 0 #b4cbb4,24px 0 #e3c8bb}
.editor-inside{display:grid;grid-template-columns:28% 72%;height:calc(100% - 34px)}
.editor-sidebar{background:#f3f2ec;padding:22px 12px}
.editor-sidebar b{display:block;font:700 .73rem 'DM Sans',sans-serif;margin-bottom:14px;color:#264936}
.editor-sidebar span{display:block;height:11px;background:#d5dcd1;border-radius:4px;margin:13px 0}
.editor-sidebar span:nth-child(3){width:80%}.editor-sidebar span:nth-child(4){width:65%}
.editor-website{padding:22px;background:#fffdfa}
.editor-website nav{font-size:.68rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#2f5943}
.editor-website nav b{font-family:Georgia,serif;font-size:1.06rem}
.editor-website figure{background:linear-gradient(110deg,#d8e4d7,#ebe1d3);height:62%;margin:0;padding:25px 18px;border-radius:7px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.editor-website figure small{color:#568168;font-size:.57rem;letter-spacing:.1em}
.editor-website figure strong{font:400 clamp(1.4rem,2.9vw,2.7rem)/1.08 Georgia,serif;max-width:270px;color:#183f32;margin:10px 0 16px}
.editor-website figure span{background:#23503c;color:white;padding:8px 14px;font-size:.63rem;border-radius:3px}
.editor-laptop-base{height:16px;background:linear-gradient(#adb3ae,#d4d8d4 45%,#787e77);margin:0 -5%;border-radius:0 0 60% 60%;box-shadow:0 13px 24px #2d332e30}
.editing-note{position:absolute;z-index:4;right:-1%;bottom:3%;background:#fffefa;padding:18px 23px;border-radius:15px;box-shadow:0 18px 38px #1836282a;border:1px solid #e5dac9;font-size:.85rem;transform:rotate(3deg)}
.editing-note strong{display:block;font-family:Georgia,serif;font-size:1.2rem;color:#194937}
.hero-vase{position:absolute;z-index:5;width:200px;height:auto;left:-12%;bottom:0;filter:drop-shadow(0 17px 13px #26302124);pointer-events:none}
.intro-strip{background:#173f31;color:#fdf8eb;padding:18px 0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.intro-strip .shell{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.intro-strip span{opacity:.86}
.home-portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.real-project{display:flex;flex-direction:column;background:#fffefa;border:1px solid #e1d7c9;border-radius:16px;overflow:hidden;transition:transform .2s}
.real-project:hover{transform:translateY(-4px);box-shadow:0 14px 28px #283a2c22}
.real-project .screenshot{background:#e9e5dd;aspect-ratio:1.45;overflow:hidden;position:relative}
.real-project img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.real-project .portfolio-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(140deg,#254c3c,#0f312b);color:white;font-family:Georgia,serif;font-size:1.7rem}
.real-project img+.portfolio-fallback{display:none}
.real-project .project-body{padding:25px}
.real-project h3{font-size:1.55rem;margin:12px 0}
.real-project p{color:#607268;font-size:.92rem}
.real-project .textlink{margin-top:8px;color:#20533e}
.real-project .tag{color:#936d37;text-transform:uppercase;font-size:.7rem;letter-spacing:.12em}
.case-visual.screenshot-case{padding:0;background:#e8e7e0;display:block}
.screenshot-case img{width:100%;height:100%;min-height:350px;object-fit:cover;object-position:top;display:block}
.template-grid.six{grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
.template-card.rich{overflow:hidden;border-radius:16px;background:#fffefa;border:1px solid #e1d7c9;box-shadow:0 5px 20px #24362a10}
.template-card .template-visual{padding:9px;background:#e6e3d8;height:295px;overflow:hidden}
.template-card .template-visual iframe{display:block;width:160%;height:440px;transform:scale(.625);transform-origin:top left;border:0;pointer-events:none;background:#fff}
.template-card .template-info{padding:23px;min-height:220px}
.template-card .template-info .actions{margin:15px 0 0;gap:8px}
.template-card .template-info .btn{padding:9px 14px;min-height:40px;font-size:.83rem}
.price-card.featured{border-color:#af8f4b}
.price-card .price{font-size:clamp(2.2rem,3vw,2.9rem)}
.page-top{background:linear-gradient(130deg,#f9f5eb,#eae9dc)}
.case-card{border-radius:18px}
@media(max-width:1050px){.hero-editorial .hero-grid{grid-template-columns:1fr 1fr}.hero-vase{width:145px;left:-5%}.home-portfolio-grid{gap:12px}.template-grid.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.hero-editorial .hero-grid{grid-template-columns:1fr;min-height:auto;padding:70px 20px 30px}.hero-editorial h1{font-size:clamp(3rem,11vw,4.9rem)}.hero-editorial .hero-art{height:390px;margin-top:12px}.hero-vase{width:120px;left:0;bottom:0}.editing-note{right:2%;bottom:0}.home-portfolio-grid{grid-template-columns:1fr}.home-portfolio-grid .screenshot{aspect-ratio:1.9}.intro-strip .shell{justify-content:center;text-align:center}.template-grid.six{grid-template-columns:1fr}.template-card .template-visual{height:300px}}
@media(max-width:390px){.hero-editorial .hero-art{height:330px}.hero-editorial h1{font-size:2.75rem}.editing-note{font-size:.7rem}.editor-laptop-screen{border-width:7px}.hero-vase{width:100px}}

@media(max-width:980px){.nav{position:relative;z-index:99}.nav-links{max-height:min(74dvh,620px);overflow-y:auto;overscroll-behavior:contain;padding:18px 22px}.nav-links a{min-height:43px;display:flex;align-items:center}.nav-links .btn{justify-content:center}.menu-toggle{min-height:44px;min-width:88px}}

/* Mobile and tablet navigation guard (including narrow 320px phones). */
@media(max-width:1100px){
 .nav{position:relative;z-index:210;gap:12px;min-height:72px;height:auto;padding-top:10px;padding-bottom:10px}
 .nav .brand{min-width:0;flex:0 1 auto;gap:8px}
 .nav .brand-title{font-size:clamp(1.15rem,3.6vw,1.65rem)}
 .nav .menu-toggle{display:block;flex:none;min-height:44px;margin-left:auto}
 .nav .nav-links{display:none;position:absolute;z-index:220;left:0;right:0;top:100%;max-height:min(76dvh,630px);overflow-y:auto;background:#fffdf8;padding:14px 20px;flex-direction:column;gap:4px;align-items:stretch;border:1px solid #e2dbc9;box-shadow:0 18px 32px #132a1c30}
 .nav .nav-links.open{display:flex}
 .nav .nav-links a{min-height:44px;padding:9px 11px;display:flex;align-items:center}
 .nav .nav-links a.btn{justify-content:center;margin-top:4px}
}
@media(max-width:420px){
 .nav.shell{padding-left:12px;padding-right:12px}
 .nav .brand-logo{width:35px;height:35px}
 .nav .brand-title{font-size:1.16rem}
 .nav .menu-toggle{font-size:.8rem;min-width:64px;padding:8px}
 .hero-editorial .hero-grid{padding-left:12px;padding-right:12px}
}
html,body{max-width:100%}