/*
Theme Name: Szepesi Teri 2026
Theme URI: https://szepesiteri.com
Description: Szepesi Teri weboldalának új megjelenése (Kadence gyermektéma). Egyedi főoldal, blog és cikkoldal; a többi oldal a Kadence sablonját használja.
Author: Szepesi Teri
Template: kadence
Version: 1.3.5
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: szepesi-teri-2026
*/

/* WordPress compatibility */
body.st-custom{margin:0}
body.st-custom .wp-block-image img{height:auto}
.prose img{height:auto; border-radius:var(--r-md)}
.prose a{color:var(--ink); text-decoration-color:var(--coral); text-underline-offset:3px}
.form-status.ok svg{color:#2E8B57}
.form-status.err{background:#FDF3F1; color:#7d241a}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.blog-list{padding-block:clamp(56px, 8vw, 104px)}
.pagination{display:flex; gap:10px; justify-content:center; margin-top:40px}
.pagination a, .pagination span{padding:10px 16px; border-radius:999px; background:var(--white); border:1px solid var(--line); text-decoration:none; font-weight:600}
.pagination .current{background:var(--navy); color:var(--paper)}

/* Layout: navy/paper bands alternate like a workshop drawing; a millimetre ruler motif ties sections together; one coral accent per screen. */
:root{
  color-scheme: light;
  --navy:#15243A; --navy-2:#1D3150; --navy-deep:#0E1929;
  --paper:#F1EEE8; --paper-2:#E8E3DA; --white:#FFFFFF;
  --coral:#E98A55; --coral-soft:#F6D3BE; --coral-ink:#A44E1E;
  --ink:#15243A; --muted:#4B5A70; --on-navy:#F1EEE8; --on-navy-muted:#B9C2D0;
  --line:rgba(21,36,58,.12); --line-navy:rgba(241,238,232,.14);
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r-lg:28px; --r-md:20px; --r-sm:12px;
  --shadow:0 1px 2px rgba(21,36,58,.06), 0 12px 32px -12px rgba(21,36,58,.18);
  --shadow-lg:0 2px 4px rgba(14,25,41,.12), 0 40px 80px -24px rgba(14,25,41,.45);
  --max:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); font-weight:600; line-height:1.08; letter-spacing:-.02em; margin:0; text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--coral); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--max); margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px))}
.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--coral); color:var(--navy); padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none}
.skip:focus{left:16px}
.eyebrow{font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--coral-ink); display:inline-flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor}
.on-navy .eyebrow{color:var(--coral)}
.section{padding-block:clamp(72px, 10vw, 136px)}
.section-head{display:grid; gap:18px; max-width:720px; margin-bottom:clamp(40px, 6vw, 64px)}
.section-head h2{font-size:clamp(34px, 4.6vw, 56px)}
.section-head p{color:var(--muted); font-size:clamp(17px, 1.6vw, 19px); max-width:60ch}
.on-navy{background:var(--navy); color:var(--on-navy)}
.on-navy .section-head p{color:var(--on-navy-muted)}

/* Buttons */
.btn{--bg:var(--coral); --fg:var(--navy); display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 24px; border-radius:999px; background:var(--bg); color:var(--fg); font-weight:700; font-size:16px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:var(--f-body); transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(233,138,85,.7)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{--bg:transparent; --fg:currentColor; border-color:currentColor}
.btn-ghost:hover{box-shadow:none; background:rgba(241,238,232,.08)}
.btn-dark{--bg:var(--navy); --fg:var(--paper)}
.btn-dark:hover{box-shadow:0 12px 24px -10px rgba(21,36,58,.6)}


/* Header */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--navy)}
.header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:var(--navy); color:var(--on-navy); transition:background .3s, box-shadow .3s}
.header.scrolled{background:rgba(21,36,58,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-navy)}
.header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.mark{width:40px; height:40px; border-radius:12px; background:var(--paper); color:var(--navy); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:17px; letter-spacing:-.04em; position:relative; flex:none}
.mark::after{content:""; position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border-radius:4px; background:var(--coral)}
.logo-text{display:grid; line-height:1.15}
.logo-text b{font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:-.01em}
.logo-text small{font-size:12px; color:var(--on-navy-muted)}
.nav{display:flex; align-items:center; gap:4px}
.nav a{text-decoration:none; font-size:15px; font-weight:500; padding:10px 14px; border-radius:999px; color:var(--on-navy-muted); transition:color .2s, background .2s}
.nav .btn{display:none}
.nav a{white-space:nowrap}
.nav a:hover, .nav a.active{color:var(--on-navy); background:rgba(241,238,232,.08)}
.header-cta{display:flex; align-items:center; gap:16px}
.tel{font-family:var(--f-mono); font-size:14px; text-decoration:none; color:var(--on-navy); white-space:nowrap}
.header .btn{min-height:44px; padding:10px 20px; font-size:15px}
.burger{display:none; width:46px; height:46px; border-radius:14px; border:1px solid var(--line-navy); background:transparent; color:var(--on-navy); cursor:pointer; place-items:center}
.burger span{display:block; width:20px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:transform .3s var(--ease), background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform .3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* Hero */
.hero{background:var(--navy); color:var(--on-navy); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line-navy) 1px, transparent 1px), linear-gradient(90deg, var(--line-navy) 1px, transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 70% 80% at 75% 40%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 40%, #000 20%, transparent 75%); opacity:.55; pointer-events:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px, 5vw, 72px); align-items:center; padding-block:clamp(56px, 8vw, 104px) clamp(88px, 10vw, 128px)}
.hero-copy{display:grid; gap:28px; min-width:0}
.hero .eyebrow{color:var(--coral)}
.hero h1{font-size:clamp(42px, 5.4vw, 74px); font-weight:600; letter-spacing:-.035em; line-height:1.02}
.hero h1 em{font-style:normal; color:var(--coral); position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:.02em; height:.09em; background:repeating-linear-gradient(90deg, var(--coral) 0 2px, transparent 2px 9px); opacity:.7}
.hero-sub{font-size:clamp(18px, 1.8vw, 21px); color:var(--on-navy-muted); max-width:34ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.promises{display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; padding:0; margin:4px 0 0; font-size:15px; color:var(--on-navy-muted)}
.promises li{display:flex; align-items:center; gap:8px}
.promises svg{color:var(--coral); flex:none}

.stage{position:relative; min-width:0; aspect-ratio:1/0.92; max-width:100%}
.browser{position:absolute; right:0; top:4%; width:88%; border-radius:18px; background:var(--white); box-shadow:var(--shadow-lg); overflow:hidden; color:#2a2119}
.browser-bar{height:34px; background:#EEEAE3; display:flex; align-items:center; gap:6px; padding:0 14px}
.browser-bar i{width:9px; height:9px; border-radius:50%; background:#d6cfc4}
.browser-bar .url{margin-left:12px; flex:1; height:20px; border-radius:6px; background:var(--white); font-family:var(--f-mono); font-size:10px; color:#7a7166; display:flex; align-items:center; padding:0 10px; white-space:nowrap; overflow:hidden}
.viewport{height:clamp(260px, 30vw, 370px); overflow:hidden; position:relative}
.scroller{animation:pagescroll 16s var(--ease) 1.2s infinite alternate}
@keyframes pagescroll{0%,12%{transform:translateY(0)} 88%,100%{transform:translateY(calc(-100% + clamp(260px, 30vw, 370px)))}}
.photo{position:absolute; left:0; bottom:0; width:38%; aspect-ratio:4/5; border-radius:120px 120px 24px 24px; background:var(--navy-2); border:6px solid var(--navy); box-shadow:var(--shadow-lg); overflow:hidden; z-index:2}
.photo .ph{display:grid; justify-items:center; gap:8px; text-align:center; color:var(--on-navy-muted); font-size:12px; padding:12px}
.photo .ph svg{opacity:.7}
.nametag{position:absolute; left:6%; bottom:-14px; z-index:3; background:var(--paper); color:var(--navy); border-radius:999px; padding:8px 16px 8px 10px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow)}
.nametag i{width:8px; height:8px; border-radius:50%; background:#3BB273; box-shadow:0 0 0 4px rgba(59,178,115,.2)}
.phone{position:absolute; right:-2%; bottom:-2%; width:27%; aspect-ratio:9/18.5; border-radius:28px; background:#0b1422; padding:7px; box-shadow:var(--shadow-lg); z-index:2}
.phone-screen{width:100%; height:100%; border-radius:22px; background:#FBF8F3; overflow:hidden; display:flex; flex-direction:column}
.ruler{position:absolute; left:0; right:0; bottom:0; height:34px; background-image:repeating-linear-gradient(90deg, rgba(241,238,232,.35) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(241,238,232,.5) 0 1px, transparent 1px 50px); background-size:auto 10px, auto 18px; background-repeat:repeat-x; background-position:bottom left, bottom left; pointer-events:none}
.ruler-labels{position:absolute; left:0; right:0; bottom:20px; display:flex; font-family:var(--f-mono); font-size:10px; color:rgba(241,238,232,.45); overflow:hidden; white-space:nowrap; pointer-events:none}
.ruler-labels span{flex:none; width:100px}

/* Mini demo sites (shared) */
.mini{font-family:var(--f-body); font-size:10px; line-height:1.4}
.mini-nav{display:flex; justify-content:space-between; align-items:center; padding:12px 16px}
.mini-logo{font-family:var(--f-display); font-weight:700; font-size:13px; letter-spacing:-.02em}
.mini-links{display:flex; gap:10px; opacity:.7}
.mini-hero{margin:0 12px; border-radius:12px; padding:30px 18px 22px; color:#fff; position:relative; overflow:hidden}
.mini-hero b{display:block; font-family:var(--f-display); font-size:20px; line-height:1.05; letter-spacing:-.02em; max-width:15ch; margin-bottom:8px}
.mini-btn{display:inline-block; margin-top:10px; padding:5px 10px; border-radius:999px; font-weight:700; font-size:9px}
.mini-sec{padding:16px}
.mini-sec h4{margin:0 0 8px; font-family:var(--f-display); font-size:12px}
.mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.mini-grid span{aspect-ratio:1; border-radius:6px}
.mini-row{display:flex; gap:6px}
.mini-row div{flex:1; border-radius:8px; padding:8px; background:rgba(0,0,0,.04)}
.mini-row div i{display:block; width:14px; height:14px; border-radius:4px; margin-bottom:6px}
.mini-foot{margin:6px 12px 14px; border-radius:10px; padding:12px; color:#fff; display:flex; justify-content:space-between; align-items:center}
.wood{background:linear-gradient(115deg, rgba(42,26,14,.82), rgba(42,26,14,.25)), repeating-linear-gradient(97deg, #8C5B36 0 7px, #9A6941 7px 12px, #7E4F2D 12px 17px, #A0714A 17px 20px)}
.wood-tile{background:repeating-linear-gradient(97deg, #8C5B36 0 5px, #9A6941 5px 9px, #7E4F2D 9px 12px)}
.wood-tile.b{background:repeating-linear-gradient(8deg, #C7A27A 0 5px, #B98F65 5px 9px, #D2B08A 9px 12px)}
.wood-tile.c{background:linear-gradient(#5E3D24,#5E3D24) 50% 50%/40% 70% no-repeat, repeating-linear-gradient(90deg, #A0714A 0 4px, #8C5B36 4px 8px)}
.steel{background:linear-gradient(120deg, rgba(20,24,30,.85), rgba(20,24,30,.35)), repeating-linear-gradient(45deg, #3A424D 0 2px, #2C333C 2px 6px)}
.steel-tile{background:linear-gradient(90deg, transparent 46%, #E07A3F 46% 54%, transparent 54%), repeating-linear-gradient(90deg, #2E3640 0 3px, #48515D 3px 10px)}
.steel-tile.b{background:radial-gradient(circle at 50% 50%, transparent 30%, #2E3640 31% 40%, transparent 41%), repeating-linear-gradient(0deg, #48515D 0 2px, #5A6470 2px 8px)}
.steel-tile.c{background:repeating-linear-gradient(135deg, #2E3640 0 6px, #6A7480 6px 8px)}
.volt{background:linear-gradient(120deg, rgba(14,25,41,.92), rgba(14,25,41,.55)), radial-gradient(circle at 80% 30%, #F2C14E 0 8%, transparent 9%), linear-gradient(#1D3150,#1D3150)}
.volt-tile{background:linear-gradient(135deg, #1D3150 50%, #F2C14E 50%)}
.volt-tile.b{background:radial-gradient(circle, #F2C14E 0 22%, #1D3150 23%)}
.volt-tile.c{background:repeating-linear-gradient(90deg, #1D3150 0 8px, #2B4468 8px 16px)}

/* Problems */
.cards-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.problem{background:var(--white); border-radius:var(--r-lg); padding:32px 28px 28px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s var(--ease); min-width:0}
.problem:hover{transform:translateY(-4px); box-shadow:0 2px 4px rgba(21,36,58,.06), 0 24px 48px -16px rgba(21,36,58,.25)}
.icon{width:56px; height:56px; border-radius:16px; background:var(--paper); display:grid; place-items:center; color:var(--navy)}
.icon svg{width:28px; height:28px}
.problem h3{font-size:24px}
.problem p{color:var(--muted)}
.fix{margin-top:auto; padding-top:18px; border-top:1px dashed var(--line); display:grid; gap:6px}
.fix b{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--coral-ink); font-weight:500}
.fix span{font-size:15.5px; color:var(--ink)}

/* Services */
.services{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.service{background:var(--navy-2); border:1px solid var(--line-navy); border-radius:var(--r-lg); padding:clamp(28px, 4vw, 44px); display:flex; flex-direction:column; gap:22px; position:relative; overflow:hidden; min-width:0}
.service.featured{background:var(--paper); color:var(--ink); border-color:transparent}
.service .tag{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-navy-muted)}
.service.featured .tag{color:var(--muted)}
.service h3{font-size:clamp(28px, 3vw, 36px)}
.price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.price strong{font-family:var(--f-display); font-size:clamp(40px, 4.4vw, 54px); font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.price span{color:var(--on-navy-muted); font-weight:500}
.service.featured .price span{color:var(--muted)}
.service > p{color:var(--on-navy-muted)}
.service.featured > p{color:var(--muted)}
.tiers{display:grid; gap:8px}
.tier{display:flex; justify-content:space-between; gap:16px; padding:14px 16px; border-radius:var(--r-sm); background:var(--white); border:1px solid var(--line); font-size:15px}
.tier b{display:block}
.tier small{color:var(--muted); font-size:13.5px}
.tier .t-price{font-family:var(--f-mono); font-size:13px; white-space:nowrap; align-self:center; color:var(--ink)}
.checks{list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:15.5px}
.checks li{display:flex; gap:10px; align-items:flex-start}
.checks svg{flex:none; margin-top:3px; color:var(--coral)}
.service.featured .checks svg{color:var(--coral-ink)}
.service .btn{margin-top:auto; align-self:flex-start}
.service:not(.featured) .btn{--bg:transparent; --fg:var(--on-navy); border-color:var(--on-navy)}
.service:not(.featured) .btn:hover{background:var(--on-navy); --fg:var(--navy); box-shadow:none}
.price-note{margin-top:28px; display:flex; gap:14px; align-items:flex-start; color:var(--on-navy-muted); font-size:15.5px; max-width:70ch}
.price-note svg{flex:none; color:var(--coral); margin-top:2px}
.price-note a{color:var(--on-navy)}

/* Portfolio */
.portfolio-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px, 6vw, 64px)}
.portfolio-head .section-head{margin-bottom:0}
.demo-note{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--muted); background:var(--white); border:1px solid var(--line); border-radius:999px; padding:10px 18px 10px 12px; max-width:100%}
.badge-done{background:#D7EBDD !important; color:#1F5A33 !important}
.badge{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; font-weight:500; background:var(--coral-soft); color:#7A3812; padding:4px 9px; border-radius:999px; white-space:nowrap}
.project{background:var(--white); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column; text-decoration:none; transition:transform .4s var(--ease), box-shadow .4s var(--ease); min-width:0}
.project:hover{transform:translateY(-6px); box-shadow:0 2px 4px rgba(21,36,58,.06), 0 32px 56px -20px rgba(21,36,58,.32)}
.project-shot{position:relative; aspect-ratio:4/3.3; background:var(--paper-2); padding:22px 22px 0; overflow:hidden}
.project-shot .mini{background:#FBF8F3; border-radius:12px 12px 0 0; height:100%; overflow:hidden; box-shadow:0 10px 30px -10px rgba(21,36,58,.35); transition:transform .6s var(--ease)}
.project:hover .project-shot .mini{transform:translateY(-6%)}
.project-shot .mini-links{display:none}
.project-shot .badge{position:absolute; top:34px; right:34px; z-index:2; box-shadow:var(--shadow)}
.project-body{padding:24px 26px 26px; display:grid; gap:12px}
.project-body h3{font-size:22px}
.project-body p{color:var(--muted); font-size:15.5px}
.chips{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:4px 0 0}
.chips li{font-size:12.5px; padding:5px 10px; border-radius:999px; background:var(--paper); color:var(--muted)}
.project-link{margin-top:6px; font-weight:700; font-size:15px; display:inline-flex; gap:8px; align-items:center; color:var(--ink)}
.project-link .arr{transition:transform .3s var(--ease)}
.project:hover .project-link .arr{transform:translateX(5px)}

/* Why */
.why{background:var(--white)}
.why-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.why-item{border-radius:var(--r-md); padding:30px 28px; background:var(--paper); display:grid; gap:12px; align-content:start; min-width:0}
.why-item h3{font-size:21px; letter-spacing:-.01em}
.why-item p{color:var(--muted); font-size:15.5px}
.why-item .icon{background:var(--white); width:48px; height:48px; border-radius:14px}
.why-item .icon svg{width:24px; height:24px}
.why-item.cta{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; padding:26px 32px}
.why-item.cta p{flex:1 1 280px}
.why-item.lead{grid-row:span 2; background:var(--navy); color:var(--on-navy); align-content:space-between; gap:28px; padding:36px 32px}
.why-item.lead h3{font-size:clamp(26px, 2.6vw, 32px); letter-spacing:-.02em}
.why-item.lead p{color:var(--on-navy-muted); font-size:16.5px}
.why-item.lead .icon{background:var(--navy-2); color:var(--coral)}
.why-item.cta{background:var(--coral); color:var(--navy)}
.why-item.cta p{color:var(--navy); opacity:.85}
.why-item.cta a{font-weight:700; font-family:var(--f-mono); font-size:18px; text-decoration:none; border-bottom:2px solid currentColor; justify-self:start}
.quote-mark{font-family:var(--f-display); font-size:15px; color:var(--on-navy-muted); border-left:2px solid var(--coral); padding-left:14px}

/* Process */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; position:relative; counter-reset:step}
.steps::before{content:""; position:absolute; left:0; right:0; top:27px; height:14px; background-image:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(21,36,58,.28) 0 1px, transparent 1px 40px); background-size:auto 7px, auto 14px; background-repeat:repeat-x; background-position:top left}
.step{position:relative; display:grid; gap:12px; align-content:start; min-width:0}
.step-num{width:56px; height:56px; border-radius:50%; background:var(--navy); color:var(--paper); display:grid; place-items:center; font-family:var(--f-mono); font-size:15px; position:relative; z-index:1; box-shadow:0 0 0 8px var(--paper)}
.step:first-child .step-num{background:var(--coral); color:var(--navy)}
.step h3{font-size:21px; margin-top:10px}
.step p{color:var(--muted); font-size:15.5px}

/* About */
.about{background:var(--white)}
.about .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px, 6vw, 88px); align-items:center}
.portrait{position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); background:var(--paper); max-width:460px; width:100%; box-shadow:var(--shadow)}
.portrait img{border-radius:var(--r-lg)}
.portrait .ph{display:grid; gap:10px; justify-items:center; padding:24px}
.portrait .ph b{font-family:var(--f-display); color:var(--ink); font-size:18px; font-weight:600}
.portrait::after{content:""; position:absolute; right:-18px; bottom:-18px; width:42%; height:38%; border-radius:var(--r-md); background:var(--coral); z-index:-1}
.about-media{position:relative; z-index:0; min-width:0}
.about-copy{display:grid; gap:22px; min-width:0}
.about-copy h2{font-size:clamp(34px, 4.6vw, 56px)}
.about-copy p{color:var(--muted); font-size:18px; max-width:58ch}
.about-copy p.big{color:var(--ink); font-size:clamp(20px, 2vw, 23px); line-height:1.5}
.sign{font-family:var(--f-display); font-size:30px; font-weight:500; color:var(--coral-ink); letter-spacing:-.02em; transform:rotate(-3deg); transform-origin:left; display:inline-block}
.about-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.text-link{font-weight:700; text-decoration:none; border-bottom:2px solid var(--coral); padding-bottom:2px}

/* Contact */
.contact .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px, 6vw, 80px); align-items:start}
.contact-info{display:grid; gap:26px; min-width:0}
.contact-info h2{font-size:clamp(36px, 5vw, 60px)}
.contact-info > p{color:var(--on-navy-muted); font-size:18px; max-width:44ch}
.phone-card{background:var(--navy-2); border:1px solid var(--line-navy); border-radius:var(--r-md); padding:24px; display:grid; gap:10px}
.phone-card small{font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--on-navy-muted)}
.phone-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.phone-row a{font-family:var(--f-display); font-size:clamp(26px, 3vw, 34px); font-weight:600; letter-spacing:-.01em; text-decoration:none; color:var(--on-navy); user-select:all}
.copy{background:transparent; border:1px solid var(--line-navy); color:var(--on-navy); border-radius:999px; padding:8px 14px; font:600 13px var(--f-body); cursor:pointer}
.copy:hover{background:rgba(241,238,232,.08)}
.mail-line{color:var(--on-navy-muted); font-size:16px}
.mail-line a{color:var(--on-navy); font-weight:600}
.mini-list{list-style:none; padding:0; margin:0; display:grid; gap:12px; color:var(--on-navy-muted); font-size:15.5px}
.mini-list li{display:flex; gap:10px}
.mini-list svg{flex:none; color:var(--coral); margin-top:3px}

.form{background:var(--white); color:var(--ink); border-radius:var(--r-lg); padding:clamp(24px, 4vw, 40px); display:grid; gap:20px; box-shadow:var(--shadow-lg); min-width:0}
.form h3{font-size:26px}
.form-intro{color:var(--muted); font-size:15px; margin-top:-10px}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:grid; gap:7px; min-width:0}
.field label, .field legend{font-weight:600; font-size:14.5px}
.field .opt{font-weight:400; color:var(--muted)}
.field input, .field select, .field textarea{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1.5px solid transparent; border-radius:14px; padding:13px 16px; transition:border-color .2s, background .2s}
.field textarea{min-height:110px; resize:vertical}
.field input:hover, .field select:hover, .field textarea:hover{border-color:var(--line)}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--navy); background:var(--white)}
.field[data-invalid] input, .field[data-invalid] select{border-color:#C0392B; background:#FDF3F1}
.err{color:#B03224; font-size:13.5px; display:none}
.field[data-invalid] .err{display:block}
fieldset.field{border:0; padding:0; margin:0}
.choices{display:flex; flex-wrap:wrap; gap:8px}
.choice{position:relative}
.choice input{position:absolute; inset:0; opacity:0; pointer-events:none}
.choice span{display:inline-flex; padding:10px 16px; border-radius:999px; background:var(--paper); border:1.5px solid transparent; font-size:15px; cursor:pointer; transition:all .2s}
.choice input:checked + span{background:var(--navy); color:var(--paper)}
.choice input:focus-visible + span{outline:3px solid var(--coral); outline-offset:2px}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--muted)}
.consent input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--navy); flex:none}
.consent a{color:var(--ink)}
.consent-wrap[data-invalid] .consent{color:#B03224}
.form .btn{width:100%}
.form-status{border-radius:14px; padding:16px 18px; background:var(--paper); font-size:15px; display:flex; gap:12px; align-items:flex-start}
.form-status svg{flex:none; color:var(--coral-ink); margin-top:2px}

/* Footer */
.footer{background:var(--navy-deep); color:var(--on-navy-muted); font-size:14.5px; padding-block:48px calc(40px + env(safe-area-inset-bottom, 0px))}
.footer .wrap{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:center}
.footer nav{display:flex; gap:6px 20px; flex-wrap:wrap}
.footer a{text-decoration:none}
.footer a:hover{color:var(--on-navy)}
.footer .logo{color:var(--on-navy)}

/* Photos */
.ph-img{width:100%; height:100%; object-fit:cover; display:block}
.mini-hero.photo-bg{background-size:cover; background-position:center}
.mini-grid img{aspect-ratio:1; width:100%; object-fit:cover; border-radius:6px; display:block}
.call-line{display:flex; align-items:center; gap:10px; font-size:16px; color:var(--on-navy-muted); margin-top:-6px}
.call-line a{font-family:var(--f-mono); font-size:17px; font-weight:500; color:var(--on-navy); text-decoration:none; border-bottom:1.5px solid var(--coral); padding-bottom:1px}
.call-line svg{color:var(--coral)}
.tel-icon{display:none; width:46px; height:46px; border-radius:14px; background:var(--coral); color:var(--navy); place-items:center}
.shot-browser{position:absolute; inset:22px 22px 0; border-radius:12px 12px 0 0; overflow:hidden; background:#fff; box-shadow:0 10px 30px -10px rgba(21,36,58,.35)}
.shot-browser .browser-bar{height:22px}
.shot-browser img{width:100%; display:block; transition:transform .6s var(--ease)}
.project:hover .shot-browser img{transform:translateY(-4%)}
.ext{font-size:13px; color:var(--muted); font-weight:500}

/* Blog band */
.blog{background:var(--paper)}
.blog-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px, 6vw, 64px)}
.blog-head .section-head{margin-bottom:0}
.posts{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:20px}
.posts .post.featured{grid-row:span 2}
.posts .post:last-child{grid-column:span 2}
.post{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; display:flex; flex-direction:column; gap:14px; text-decoration:none; min-width:0; transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
a.post:hover{transform:translateY(-4px); box-shadow:0 2px 4px rgba(21,36,58,.06), 0 24px 48px -16px rgba(21,36,58,.25)}
.post.featured{background:var(--navy); color:var(--on-navy); border-color:transparent; padding:36px 32px}
.post-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.post.featured .post-meta{color:var(--on-navy-muted)}
.post-meta .cat{color:var(--coral-ink)}
.post.featured .post-meta .cat{color:var(--coral)}
.post h3{font-size:22px; line-height:1.18}
.post.featured h3{font-size:clamp(26px, 2.6vw, 34px)}
.post p{color:var(--muted); font-size:15.5px}
.post.featured p{color:var(--on-navy-muted)}
.post .more{margin-top:auto; font-weight:700; font-size:15px; display:inline-flex; gap:8px}
.post.soon{background:transparent; border-style:dashed}
.soon-tag{align-self:flex-start; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--paper-2); color:var(--muted)}
.eye{width:64px; height:64px; border-radius:18px; background:var(--navy-2); display:grid; place-items:center; color:var(--coral)}

/* Article view */
.article-hero{background:var(--navy); color:var(--on-navy); padding-block:clamp(48px, 7vw, 96px) clamp(48px, 6vw, 80px)}
.article-hero .wrap{max-width:860px; display:grid; gap:22px}
.back{color:var(--on-navy-muted); text-decoration:none; font-size:15px; font-weight:600; display:inline-flex; gap:8px; align-items:center}
.back:hover{color:var(--on-navy)}
.article-hero h1{font-size:clamp(36px, 5vw, 60px); letter-spacing:-.03em}
.article-hero .lead{font-size:clamp(18px, 1.8vw, 21px); color:var(--on-navy-muted); max-width:60ch}
.byline{display:flex; align-items:center; gap:14px; font-size:14.5px; color:var(--on-navy-muted)}
.byline img{width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:50% 35%}
.byline b{color:var(--on-navy); display:block; font-weight:600}
.article-body{background:var(--white); padding-block:clamp(48px, 7vw, 96px)}
.prose{max-width:720px; margin:0 auto; font-size:18.5px; line-height:1.75; color:#26344A}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(26px, 3vw, 34px); margin-top:2em; color:var(--ink)}
.prose h3{font-size:21px; margin-top:1.6em; color:var(--ink)}
.prose strong{color:var(--ink)}
.prose ul, .prose ol{padding-left:1.2em}
.prose li + li{margin-top:.5em}
.prose blockquote{margin:1.8em 0; padding:22px 26px; border-left:3px solid var(--coral); background:var(--paper); border-radius:0 var(--r-sm) var(--r-sm) 0; font-family:var(--f-display); font-size:22px; line-height:1.4; color:var(--ink)}
.q-list{list-style:none; padding:0 !important; counter-reset:q; display:grid; gap:14px}
.q-list li{counter-increment:q; background:var(--paper); border-radius:var(--r-md); padding:20px 22px 20px 70px; position:relative; margin:0 !important}
.q-list li::before{content:counter(q); position:absolute; left:20px; top:20px; width:34px; height:34px; border-radius:50%; background:var(--navy); color:var(--paper); display:grid; place-items:center; font-family:var(--f-mono); font-size:14px}
.q-list b{display:block; font-family:var(--f-display); font-size:20px; color:var(--ink); margin-bottom:4px}
.checklist{list-style:none; padding:0 !important; display:grid; gap:10px}
.checklist li{display:flex; gap:12px; align-items:flex-start; margin:0 !important}
.checklist li::before{content:""; flex:none; width:20px; height:20px; margin-top:5px; border:2px solid var(--navy); border-radius:6px}
.sources{font-size:14.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:20px; margin-top:2.4em}
.sources a{color:var(--muted)}
.article-cta{max-width:720px; margin:56px auto 0; background:var(--navy); color:var(--on-navy); border-radius:var(--r-lg); padding:clamp(28px, 4vw, 40px); display:grid; gap:16px}
.article-cta h2{font-size:clamp(24px, 2.6vw, 30px)}
.article-cta p{color:var(--on-navy-muted)}
.article-cta .row{display:flex; flex-wrap:wrap; gap:12px}

.more-reads{margin-top:2.4em; padding:22px 24px; border-radius:var(--r-md); background:var(--paper)}
.more-reads b{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--coral-ink); font-weight:500}
.more-reads ul{list-style:none; padding:0 !important; margin:10px 0 0; display:grid; gap:8px}
.more-reads a{font-family:var(--f-display); font-size:19px; font-weight:600; color:var(--ink); text-decoration:none}
.more-reads a:hover{text-decoration:underline; text-decoration-color:var(--coral)}
.table-wrap{overflow-x:auto}
.price-table{width:100%; border-collapse:collapse; font-size:16.5px}
.price-table th{text-align:left; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:10px 12px; border-bottom:2px solid var(--navy)}
.price-table td{padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.price-table td:last-child{white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600}

/* Mobile action bar */
.actionbar{display:none}

/* Motion */
@media (prefers-reduced-motion: no-preference){
  .hero-copy > *{animation:rise .9s var(--ease) both}
  .hero-copy > *:nth-child(2){animation-delay:.08s}
  .hero-copy > *:nth-child(3){animation-delay:.16s}
  .hero-copy > *:nth-child(4){animation-delay:.24s}
  .hero-copy > *:nth-child(5){animation-delay:.32s}
  .browser{animation:rise 1s var(--ease) .2s both}
  .photo{animation:rise 1s var(--ease) .38s both}
  .phone{animation:rise 1s var(--ease) .5s both}
  .nametag{animation:rise .8s var(--ease) .7s both}
  .reveal.in{animation:rise .8s var(--ease) both; animation-delay:var(--d, 0s)}
  .float{animation:float 7s ease-in-out infinite}
}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes float{0%,100%{translate:0 0} 50%{translate:0 -8px}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .scroller{animation:none}
  *{transition:none !important}
}

/* Responsive */
@media (max-width: 1320px){
  .tel{display:none}
}
@media (max-width: 1080px){
  .nav a{padding:10px 9px; font-size:14.5px}
}
@media (max-width: 960px){
  .nav, .header-cta .btn{display:none}
  .burger{display:grid}
  .tel-icon{display:grid}
  .nav.open{display:flex; position:absolute; top:76px; left:0; right:0; flex-direction:column; align-items:stretch; gap:4px; background:var(--navy); padding:12px max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px)); border-top:1px solid var(--line-navy); box-shadow:0 24px 40px -12px rgba(0,0,0,.4)}
  .nav.open a{font-size:18px; padding:14px 16px}
  .nav.open .btn{display:inline-flex; margin-top:10px; color:var(--navy); background:var(--coral); font-size:16px}
  .hero .wrap{grid-template-columns:1fr}
  .stage{max-width:620px; width:100%; justify-self:center}
  .cards-3{grid-template-columns:1fr; max-width:620px}
  .services{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:1fr 1fr}
  .posts .post.featured{grid-column:1 / -1; grid-row:auto}
  .why-item.lead{grid-row:auto; grid-column:1 / -1}
  .steps{grid-template-columns:1fr 1fr; row-gap:40px}
  .steps::before{display:none}
  .about .wrap, .contact .wrap{grid-template-columns:1fr}
  .portrait{max-width:380px}
  #munkaim .cards-3{max-width:none; grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  body{font-size:16.5px; padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
  .logo-text small{display:none}
  .stage{aspect-ratio:1/1.05}
  .browser{width:100%; top:0}
  .photo{width:36%; bottom:2%}
  .phone{width:30%; right:0; bottom:0}
  .why-grid{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .posts .post:last-child{grid-column:auto}
  .prose{font-size:17.5px}
  .price-table{font-size:15px}
  .price-table td, .price-table th{padding-left:6px; padding-right:6px}
  .price-table td:last-child{white-space:normal}
  .steps{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  #munkaim .cards-3{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .actionbar{display:grid; grid-template-columns:1fr 1.3fr; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(241,238,232,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
  .actionbar .btn{min-height:50px; padding:10px 14px; font-size:15px}
  .footer{padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px))}
}