/* PT Mitra Strategis Konsultan Indonesia
   v3: fullpage slides on desktop (one wheel step = one screen), normal scroll on phones/tablets.
   Maroon on cream, Lora headlines, real photography.
   Shape rule: buttons are pills, every block/panel/photo/input is square-cornered. */
:root{
  --maroon:#8A2E2F; --maroon-dark:#6B2324; --maroon-deep:#561B1C; --night:#2B1213;
  --cream:#F9F8F4; --sand:#F1EBE1; --paper:#FFFFFF;
  --ink:#2A2123; --muted:#5E5253; --line:#E2D9CC; --line-soft:#ECE5DA;
  --on-maroon:#FBF3EA; --on-maroon-muted:#EAD6CE; --on-maroon-line:rgba(251,243,234,.24);
  --gutter:clamp(20px,5.2vw,96px);
  --max:1600px;
  --header-h:72px;
  --footer-h:0px;
  --vh:100vh;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.8,.26,1);
}
@supports (height:100dvh){:root{--vh:100dvh}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.nw{white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
main section{scroll-margin-top:var(--header-h)}
:focus-visible{outline:2px solid var(--maroon);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--maroon);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--cream);border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px -14px rgba(86,27,28,.28)}
.nav{height:var(--header-h);display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;min-height:44px;margin-right:auto}
.brand img{height:30px;width:auto;flex-shrink:0}
.brand-name{font-family:var(--serif);font-weight:600;font-size:16.5px;line-height:1.2;color:var(--maroon)}
.menu{display:flex;align-items:center;list-style:none}
.menu a{display:block;padding:10px 9px;font-weight:600;font-size:15.5px;color:var(--ink);
  border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease}
.menu a:hover{color:var(--maroon)}
.menu a[aria-current="true"]{color:var(--maroon);border-bottom-color:var(--maroon)}
.nav-cta{margin-left:4px}
#menuBtn{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
#menuBtn span{display:block;width:22px;height:2px;background:var(--maroon);transition:transform .25s ease,opacity .2s ease}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;
  border-radius:999px;font-family:inherit;font-weight:700;font-size:16px;white-space:nowrap;cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .12s ease,border-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--maroon);color:var(--on-maroon);border:2px solid var(--maroon)}
.btn-solid:hover{background:var(--maroon-dark);border-color:var(--maroon-dark)}
.btn-ghost{border:2px solid var(--maroon);color:var(--maroon);background:transparent}
.btn-ghost:hover{background:var(--maroon);color:var(--on-maroon)}
.btn-sm{min-height:44px;padding:0 22px;font-size:15px}
.btn-lg{min-height:56px;padding:0 34px;font-size:17px}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--maroon);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.tlink:hover{text-decoration-thickness:3px}
.arrow{display:inline-block;transition:transform .2s ease}

/* ---------- shared slide scaffolding ---------- */
.slide{position:relative;overflow:hidden}
.ph{display:block}
.ph img{width:100%;height:100%;object-fit:cover}
.sec-title{font-size:clamp(34px,3.1vw,54px);color:var(--ink);text-wrap:balance}
.sec-lead{font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--muted);max-width:56ch;margin-top:16px;text-wrap:pretty}

/* ---------- 1. hero ---------- */
.s-hero{background:var(--cream)}
.hero-in{position:relative;z-index:1;padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(40px,6vh,72px)}
.s-hero h1{font-size:clamp(40px,4.6vw,80px);line-height:1.07;letter-spacing:-.022em;color:var(--ink)}
.s-hero h1 .l{display:block}
.s-hero h1 em{font-style:italic;color:var(--maroon);font-weight:500}
.hero-sub{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--muted);max-width:40ch;margin-top:clamp(20px,3vh,32px)}
.actions{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;margin-top:clamp(28px,4vh,44px)}

/* ---------- 2. layanan pajak ---------- */
.s-pajak{background:var(--cream)}
.pajak-photo{margin:0}
.pajak-photo .ph{height:100%}
.svc-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vh,36px) clamp(28px,2.6vw,48px);margin-top:clamp(26px,4vh,44px)}
.svc-grid li{padding-top:16px;border-top:2px solid var(--maroon)}
.svc-grid h3,.svc-rows h3{font-size:clamp(19px,1.45vw,23px);line-height:1.25;color:var(--ink);margin-bottom:8px}
.svc-grid p,.svc-rows p{font-size:16px;color:var(--muted);line-height:1.55}
.partner{color:var(--maroon);font-weight:700}

/* ---------- 3. layanan bisnis ---------- */
.s-bisnis{background:var(--sand)}
.svc-rows{list-style:none;margin-top:clamp(22px,3.4vh,40px);border-top:1px solid #D8CCBB}
.svc-rows li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px clamp(20px,2.4vw,40px);
  padding:clamp(14px,2.2vh,22px) 0;border-bottom:1px solid #D8CCBB}
.svc-rows h3{margin-bottom:0;color:var(--maroon)}

/* ---------- 4. tentang ---------- */
.s-tentang{background:var(--night);color:var(--on-maroon)}
.s-tentang .ph{position:absolute;inset:0}
.s-tentang::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(43,18,19,.93) 0%,rgba(43,18,19,.86) 45%,rgba(43,18,19,.74) 100%)}
.tentang-in{position:relative;z-index:1}
.s-tentang .sec-title{color:var(--on-maroon)}
.s-tentang .sec-lead{color:var(--on-maroon-muted);max-width:62ch}
.tentang-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,56px);margin-top:clamp(28px,4.4vh,52px);align-items:stretch}
.quote{margin:0;background:var(--maroon);padding:clamp(28px,3vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.quote blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,2.5vw,44px);line-height:1.24;color:var(--on-maroon)}
.quote figcaption{font-size:15px;color:var(--on-maroon-muted)}
.values h3{font-size:clamp(21px,1.6vw,26px);color:var(--on-maroon);margin-bottom:clamp(14px,2vh,22px)}
.val-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,2.4vw,40px)}
.val-grid > div{padding:clamp(12px,1.8vh,18px) 0;border-top:1px solid var(--on-maroon-line)}
.val-grid dt{font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.35vw,21px);color:var(--on-maroon);margin-bottom:4px}
.val-grid dd{font-size:15.5px;line-height:1.5;color:var(--on-maroon-muted)}
.val-grid .wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px clamp(24px,2.4vw,40px);align-items:baseline}
.val-grid .wide dt{margin-bottom:0}

/* ---------- 5. edukasi ---------- */
.s-edu{background:#F3EFE7}
.edu-list{list-style:none;margin-top:clamp(22px,3.4vh,40px)}
.edu-list li + li{border-top:1px solid #D9CFC0}
.edu-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:end;padding:clamp(14px,2.2vh,22px) 0}
.edu-list .kind{grid-column:1/-1;font-size:14px;font-weight:700;color:var(--maroon)}
.edu-list .t{font-family:var(--serif);font-weight:600;font-size:clamp(19px,1.5vw,24px);line-height:1.28;color:var(--ink)}
.edu-list .arrow{color:var(--maroon);font-size:20px;padding-bottom:2px}
.edu-list a:hover .t{color:var(--maroon)}
.edu-list a:hover .arrow{transform:translateX(5px)}
.edu-all{margin-top:clamp(10px,2vh,20px)}

/* ---------- 6. kontak ---------- */
.s-kontak{background:var(--cream)}
.kontak-cta{margin-top:clamp(18px,3vh,32px)}
.c-list{list-style:none;margin-top:clamp(20px,3.2vh,36px)}
.c-list li{padding:clamp(10px,1.5vh,14px) 0;border-top:1px solid var(--line)}
.c-list small{display:block;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:2px}
.c-list a,.c-list span{font-family:var(--serif);font-size:clamp(19px,1.5vw,24px);color:var(--maroon);font-weight:600;line-height:1.3;word-break:break-word}
.c-list a{display:inline-block;padding:2px 0}
.c-list a:hover{text-decoration:underline;text-underline-offset:5px}
.kontak-form{background:var(--paper);border:1px solid var(--line-soft);padding:clamp(22px,2.2vw,36px)}
.kontak-form h3{font-size:clamp(21px,1.6vw,26px);margin-bottom:clamp(12px,2vh,20px)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:clamp(10px,1.6vh,16px)}
.field label{font-size:15px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;min-height:46px;padding:10px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--cream);border:1.5px solid #B9AB98;border-radius:0}
.field textarea{min-height:84px;height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--maroon);outline-offset:0;border-color:var(--maroon)}
.form-foot{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-top:4px}
.form-note{font-size:14.5px;color:var(--muted)}

/* ---------- footers ---------- */
.site-footer{background:var(--maroon-deep);color:#E8CFC7}
.home-footer .f-row{display:flex;align-items:center;justify-content:space-between;gap:10px 32px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;min-height:64px}
.home-footer p{font-size:14.5px}
.home-footer .f-brand{display:flex;align-items:center;gap:12px;color:var(--on-maroon)}
.home-footer .f-brand img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.home-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 22px;font-size:14.5px}
.home-footer li a{display:inline-flex;align-items:center;min-height:40px}
.home-footer a:hover{color:var(--on-maroon);text-decoration:underline;text-underline-offset:4px}
.home-footer .f-priv{width:100%;text-align:center;font-size:13.5px;color:rgba(232,207,199,.85)}
.home-footer .f-priv a{min-height:36px;display:inline-flex;align-items:center}
.f-priv{width:100%;text-align:center;font-size:13.5px;color:rgba(232,207,199,.85)}
.f-priv a{color:inherit;display:inline-flex;align-items:center;min-height:36px}
.f-priv a:hover{color:var(--on-maroon);text-decoration:underline;text-underline-offset:4px}

/* article-page footer (unchanged from v2) */
.site-footer:not(.home-footer){padding-top:clamp(56px,6vw,88px)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:40px 56px;padding-bottom:48px}
.f-grid .f-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.f-grid .f-brand img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.f-grid .f-brand span{font-family:var(--serif);color:var(--on-maroon);font-size:20px;font-weight:600;line-height:1.25}
.f-grid p{max-width:46ch;font-size:15.5px}
.f-grid h2{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-maroon);margin-bottom:14px}
.f-grid ul{list-style:none;font-size:15.5px}
.f-grid li a,.f-grid li span{display:inline-block;padding:10px 0}
.f-grid a:hover{color:var(--on-maroon);text-decoration:underline}
.f-bottom{border-top:1px solid rgba(255,255,255,.14);padding:20px 0 24px;font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- slide dots (desktop fullpage only, built by site.js) ---------- */
.dots{display:none}
.fp .dots{display:flex;position:fixed;right:clamp(14px,1.6vw,28px);top:50%;transform:translateY(-50%);z-index:90;
  flex-direction:column;align-items:flex-end;gap:4px;list-style:none}
.dots button{position:relative;display:flex;align-items:center;justify-content:flex-end;width:44px;height:26px;background:none;border:0;cursor:pointer;color:var(--maroon)}
.dots button::after{content:"";display:block;width:14px;height:2px;background:currentColor;opacity:.45;transition:width .35s var(--ease),opacity .25s ease}
.dots button[aria-current="true"]::after{width:30px;opacity:1}
.dots button:hover::after{opacity:1}
.dots .lbl{position:absolute;right:52px;white-space:nowrap;font-size:13.5px;font-weight:700;padding:3px 10px;
  background:var(--cream);color:var(--maroon);opacity:0;transform:translateX(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.dots button:hover .lbl,.dots button:focus-visible .lbl{opacity:1;transform:none}
.fp[data-tone="dark"] .dots button{color:var(--on-maroon)}

/* ---------- article pages ---------- */
.post{display:flex;flex-direction:column;background:var(--paper);padding:clamp(26px,2.6vw,40px);
  border:1px solid var(--line-soft);transition:transform .2s ease, box-shadow .2s ease}
.post:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(86,27,28,.45)}
.post:hover .arrow{transform:translateX(4px)}
.post .kind{font-size:14px;font-weight:700;color:var(--maroon);margin-bottom:14px}
.post h3{font-size:clamp(22px,1.8vw,28px);line-height:1.25;color:var(--ink);margin-bottom:12px}
.post p{color:var(--muted);font-size:16px;flex:1}
.post .more{margin-top:24px;font-weight:700;color:var(--maroon);display:flex;align-items:center;gap:8px}
.art-hero{padding:clamp(56px,7vw,112px) 0 clamp(40px,4vw,64px);border-bottom:1px solid var(--line)}
.crumbs{font-size:15px;color:var(--muted);margin-bottom:28px}
.crumbs a{color:var(--maroon);font-weight:600}
.crumbs a:hover{text-decoration:underline}
.art-kind{font-size:15px;font-weight:700;color:var(--maroon);margin-bottom:16px}
.art-hero h1{font-size:clamp(36px,4.6vw,76px);line-height:1.08;max-width:22ch;letter-spacing:-.018em}
.art-sum{font-size:clamp(19px,1.5vw,23px);color:var(--muted);max-width:60ch;margin-top:24px;line-height:1.5}
.art-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(40px,6vw,120px);padding-top:clamp(48px,5vw,88px);padding-bottom:clamp(80px,8vw,128px)}
.prose{max-width:68ch;font-size:18.5px;line-height:1.75}
.prose h2{font-size:clamp(26px,2.2vw,34px);margin:48px 0 16px;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:18px}
.prose ul{margin:0 0 20px 1.2em}
.prose li{margin-bottom:10px;padding-left:4px}
.prose li::marker{color:var(--maroon)}
.prose strong{color:var(--ink)}
.prose ol{margin:0 0 20px 1.4em}
.prose ol>li{margin-bottom:14px}
.prose blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(22px,1.6vw,27px);line-height:1.45;color:var(--maroon);
  border-left:3px solid var(--maroon);padding:6px 0 6px 22px;margin:28px 0}
.prose blockquote p{margin:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.note-box{background:var(--sand);padding:22px 26px;margin:28px 0;font-size:16.5px;border-left:3px solid var(--maroon)}
.aside-box{position:sticky;top:calc(var(--header-h) + 24px);background:var(--maroon);color:var(--on-maroon);padding:32px}
.aside-box h2{font-size:26px;margin-bottom:12px;color:var(--on-maroon)}
.aside-box p{color:var(--on-maroon-muted);font-size:16px;margin-bottom:22px}
.aside-box .btn-solid{background:var(--on-maroon);color:var(--maroon);border-color:var(--on-maroon)}
.aside-box .btn-solid:hover{background:#fff;border-color:#fff}
.aside-box .alt{display:block;margin-top:16px;font-size:15px;color:var(--on-maroon-muted)}
.aside-box .alt a{color:var(--on-maroon);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.more-posts{border-top:1px solid var(--line);padding:clamp(56px,6vw,96px) 0}
.more-posts h2{font-size:clamp(28px,2.6vw,40px);margin-bottom:28px}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.art-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:clamp(40px,4vw,64px) 0 clamp(80px,8vw,128px)}

/* =====================================================================
   DESKTOP SLIDE LAYOUTS (>= 1024px wide). Each section is one screen.
   ===================================================================== */
@media (min-width:1024px){
  .home .site-header{position:fixed;left:0;right:0;top:0}
  .home{--footer-h:64px}
  .home main section{scroll-margin-top:0}
  .slide{min-height:var(--vh);padding-top:var(--header-h);display:flex;flex-direction:column}
  .slide-in{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;
    padding-top:clamp(24px,4.5vh,56px);padding-bottom:clamp(24px,4.5vh,56px)}
  .s-kontak{min-height:calc(var(--vh) - var(--footer-h))}
  .home .home-footer .f-row{height:var(--footer-h);min-height:0;padding-top:0;padding-bottom:0;flex-wrap:nowrap}

  /* hero: full-bleed photo, cream wash on the empty left side */
  .s-hero .ph{position:absolute;inset:0}
  .s-hero .ph img{object-position:62% 60%}
  .s-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(249,248,244,.97) 0%,rgba(249,248,244,.93) 32%,rgba(249,248,244,.66) 50%,rgba(249,248,244,0) 66%)}
  .hero-in{justify-content:center;padding-bottom:clamp(64px,12vh,140px)}
  .hero-in > *{max-width:min(880px,56vw)}

  /* pajak: framed photo left (kept small because the source is only 1280px), services right */
  .pajak-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,96px);align-items:center;padding-right:calc(var(--gutter) + 24px)}
  .pajak-photo{align-self:stretch;max-height:min(640px,calc(var(--vh) - var(--header-h) - 96px));min-height:0;display:flex}
  .pajak-photo .ph{width:100%;height:100%}
  .pajak-photo .ph img{object-position:58% 50%}

  /* bisnis: text left on sand, photo bleeds off the right edge */
  .s-bisnis .bisnis-photo{position:absolute;top:var(--header-h);right:0;bottom:0;width:42%}
  .s-bisnis .bisnis-photo img{object-position:72% 50%}
  .bisnis-body{max-width:calc(58% - 56px);margin-right:auto}
  .bisnis-in{max-width:none;padding-left:max(var(--gutter), calc((100vw - var(--max))/2 + var(--gutter)))}

  /* tentang: full-bleed photo under a deep maroon wash */
  .tentang-in{padding-right:calc(var(--gutter) + 24px)}

  /* edukasi: text sits on the empty linen at the left */
  .s-edu .ph{position:absolute;inset:0}
  .s-edu .ph img{object-position:0% 50%}
  .s-edu::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(243,239,231,.72) 0%,rgba(243,239,231,.5) 36%,rgba(243,239,231,0) 48%)}
  .edu-body{width:calc(max(45vw, 80.5 * var(--vh) / 100) - var(--gutter) - 48px);max-width:680px}

  /* kontak: cropped photo left (seam area removed from the file itself), info + form right */
  .s-kontak{flex-direction:row}
  .s-kontak .kontak-photo{width:34%;flex-shrink:0;align-self:stretch}
  .s-kontak .kontak-photo img{object-position:22% 50%}
  .kontak-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.2vw,64px);align-items:center;
    padding-left:clamp(32px,4vw,80px);padding-right:calc(clamp(32px,4vw,80px) + 24px);min-width:0}
  .kontak-in .sec-title{font-size:clamp(32px,2.7vw,48px)}
}

/* fullpage mode on: set by site.js only when every slide fits its screen */
.fp{scroll-behavior:auto;scrollbar-width:none}
.fp::-webkit-scrollbar{display:none}
.fp .slide{height:var(--vh);min-height:0}
.fp .s-kontak{height:calc(var(--vh) - var(--footer-h))}

/* short laptop screens: tighten type so each slide still fits */
@media (min-width:1024px) and (max-height:820px){
  .sec-title{font-size:clamp(32px,2.8vw,46px)}
  .sec-lead{font-size:17px;margin-top:12px}
  .svc-grid p,.svc-rows p{font-size:15.5px;line-height:1.5}
  .svc-grid h3,.svc-rows h3{font-size:19px;margin-bottom:6px}
  .svc-grid{margin-top:22px;gap:20px 36px}
  .svc-grid li{padding-top:12px}
  .val-grid dd{font-size:15px}
  .quote blockquote{font-size:clamp(26px,2.3vw,36px)}
  .edu-list .t{font-size:20px}
  .field input,.field select{min-height:42px;padding:8px 12px}
  .field textarea{min-height:64px;height:64px}
  .kontak-form{padding:20px 24px}
  .kontak-form h3{margin-bottom:10px}
  .c-list a,.c-list span{font-size:20px}
}

/* narrow desktops (1024-1199px): give text more room */
@media (min-width:1024px) and (max-width:1199px){
  .s-kontak .kontak-photo{width:26%}
  .kontak-in{gap:28px;padding-left:32px}
  .s-bisnis .bisnis-photo{width:36%}
  .bisnis-body{max-width:calc(64% - 40px)}
  .svc-rows li{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .c-list a,.c-list span{font-size:19px}
  .kontak-in .sec-title{font-size:32px}
}

/* entrance motion: only in fullpage mode, only once per slide */
@media (prefers-reduced-motion:no-preference){
  .fp .slide:not(.seen) .rv{opacity:0;transform:translateY(16px)}
  .fp .slide .rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .fp .slide.seen .rv:nth-child(2){transition-delay:.08s}
  .fp .slide.seen .rv:nth-child(3){transition-delay:.16s}
  .fp .slide.seen .rv:nth-child(4){transition-delay:.24s}
}

/* =====================================================================
   TABLET & PHONE (< 1024px): normal scrolling, stacked layouts
   ===================================================================== */
@media (max-width:1180px){
  .brand-name{font-size:15px;max-width:12.5em}
}
@media (max-width:1023px){
  .slide-in{padding-top:clamp(48px,9vw,80px);padding-bottom:clamp(48px,9vw,80px)}
  .ph img{aspect-ratio:3/2}
  .s-hero{display:flex;flex-direction:column}
  .s-hero .ph{order:2}
  .s-hero .ph img{aspect-ratio:4/3;object-position:74% 70%}
  .pajak-in{display:flex;flex-direction:column;gap:32px}
  .pajak-photo{order:2}
  .pajak-photo .ph img{object-position:60% 50%}
  .s-bisnis{display:flex;flex-direction:column}
  .s-bisnis .bisnis-photo{order:2}
  .s-bisnis .bisnis-photo img{object-position:70% 50%}
  .s-tentang .ph{position:absolute;inset:0}
  .s-tentang .ph img{aspect-ratio:auto;height:100%}
  .tentang-grid{grid-template-columns:1fr}
  .s-edu{display:flex;flex-direction:column}
  .s-edu .ph{order:2}
  .s-edu .ph img{aspect-ratio:16/10;object-position:78% 50%}
  .s-kontak{display:flex;flex-direction:column}
  .s-kontak .kontak-photo{order:2}
  .s-kontak .kontak-photo img{aspect-ratio:4/3;object-position:30% 60%}
  .kontak-in{padding-left:var(--gutter);padding-right:var(--gutter);padding-top:clamp(48px,9vw,80px);padding-bottom:clamp(48px,9vw,80px);
    display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .home-footer .f-row{padding-top:20px;padding-bottom:24px}
}
@media (max-width:980px){
  :root{--header-h:64px}
  .nav{gap:12px}
  .brand img{height:26px}
  #menuBtn{display:inline-flex}
  .site-nav{position:absolute;left:0;right:0;top:var(--header-h);background:var(--cream);border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px -20px rgba(86,27,28,.35);display:none}
  .site-header.menu-open .site-nav{display:block}
  .menu{flex-direction:column;align-items:stretch;padding:8px var(--gutter) 16px}
  .menu li{border-bottom:1px solid var(--line-soft)}
  .menu li:last-child{border-bottom:0}
  .menu a{padding:14px 0;font-size:17px;border-bottom:0;min-height:48px}
  .menu a[aria-current="true"]{border-bottom:0}
  .site-header.menu-open #menuBtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.menu-open #menuBtn span:nth-child(2){opacity:0}
  .site-header.menu-open #menuBtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-cta{margin-left:0}
  .art-body{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid > div:first-child{grid-column:1/-1}
  .aside-box{position:static}
}
@media (max-width:720px){
  body{font-size:16.5px}
  .brand{gap:9px}
  .brand img{height:22px}
  .nav{gap:8px}
  .brand-name{font-size:12.5px;max-width:none}
  .brand-name .ln{display:block;white-space:nowrap}
  .nav-cta .btn{padding:0 14px;font-size:14px}
  .s-hero h1{font-size:clamp(36px,10.4vw,52px)}
  .actions .btn{width:100%}
  .btn-lg{padding:0 22px}
  .svc-grid{grid-template-columns:1fr}
  .svc-rows li{grid-template-columns:1fr}
  .val-grid,.val-grid .wide{grid-template-columns:1fr}
  .kontak-in{grid-template-columns:1fr}
  .kontak-info .btn{width:100%}
  .home-footer .f-row{flex-direction:column;align-items:flex-start;gap:6px}
  .more-grid,.art-list{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .prose{font-size:17.5px}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* IG photo gallery (auto-managed by /opt/mski-ig-sync) */
.ig-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 28px}
.ig-gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;border:1px solid rgba(138,46,47,.12)}
@media(min-width:760px){.ig-gallery{grid-template-columns:repeat(3,1fr)}}