/* Law Promo (demo8) — layout modelled on giantsoft.co.kr, palette from lawpromo.com. */

:root{
  --ink:#141414; --ink-2:#4a4a4a; --muted:#7c7c7c;
  --line:#e5e2de; --line-2:#efedea;
  --bg:#fff; --bg-soft:#f5f3f0; --black:#0a0a0a;
  --accent:#a36b4f; --accent-lt:#c08a68;
  --wrap:1660px; --topbar-h:84px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --display:'Manrope',var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1.2rem;line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.2;letter-spacing:-.02em;margin:0 0 .6em}
p{margin:0 0 1.1em}

.lp-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.lp-section{padding:96px 0}
.lp-section.is-soft{background:var(--bg-soft)}
.lp-section.is-dark{background:var(--black);color:#fff}

/* ---------- section title (giantsoft: "Giantsoft Works") ---------- */
.lp-tit{text-align:center;margin:0 0 56px}
.lp-tit h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:0}
.lp-tit h2 em{font-style:normal;color:var(--accent)}
.lp-tit p{margin:.8rem 0 0;color:var(--muted);font-size:1.18rem}
.is-dark .lp-tit p{color:#a9a9a9}

/* ---------- buttons ---------- */
.lp-btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-weight:700;
  font-size:1.02rem;letter-spacing:.12em;text-transform:uppercase;padding:.95rem 1.9rem;border:1px solid var(--ink);
  background:var(--ink);color:#fff;border-radius:999px;transition:background .32s ease,color .32s ease,border-color .32s ease}
.lp-btn:hover{background:var(--accent);border-color:var(--accent)}
.lp-btn.is-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.lp-btn.is-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.lp-btn.is-line{background:transparent;color:var(--ink);border-color:var(--line)}
.lp-btn.is-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- header ---------- */
/* Fixed only over the home hero, where it has to float on the photograph.
   Interior pages get a normal header in the flow. */
.lp-header{position:fixed;inset:0 0 auto;z-index:60;height:var(--topbar-h);background:transparent}
body.lp-interior .lp-header{position:relative;inset:auto}
/* The white bar, its hairline and its shadow live on one pseudo-element and fade
   together. Transitioning border-color separately left the hairline hanging on
   after the background had already gone. */
.lp-header::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 14px rgba(0,0,0,.05);
  opacity:0;transition:opacity .32s ease}
.lp-header.is-solid::after{opacity:1}
/* logo left, nav centred in the viewport, quote button right — a grid, so the
   nav stays centred no matter how wide the logo or the button get */
.lp-header-row{height:var(--topbar-h);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:24px}
/* the two logos are stacked and cross-faded — display:none cannot transition */
.lp-logo{position:relative;display:block;line-height:0;grid-column:1}
.lp-logo img{height:35px;width:auto;transition:opacity .32s ease}
.lp-logo .lp-logo-dark{position:absolute;top:0;left:0;opacity:0}
.lp-header.is-solid .lp-logo-dark{opacity:1}
.lp-header.is-solid .lp-logo-light{opacity:0}

.lp-nav{grid-column:2;display:flex;align-items:center;justify-content:center;gap:6px}
.lp-nav-item{position:relative}
.lp-navlink{display:flex;align-items:center;gap:.35em;padding:.7rem 1rem;font-family:var(--display);
  font-weight:700;font-size:0.98rem;letter-spacing:.11em;text-transform:uppercase;color:#fff;white-space:nowrap;
  transition:color .32s ease}
.lp-header.is-solid .lp-navlink,body.lp-interior .lp-navlink{color:var(--ink)}
.lp-navlink:hover{color:var(--accent-lt)}
.lp-header.is-solid .lp-navlink:hover,body.lp-interior .lp-navlink:hover{color:var(--accent)}
.lp-caret{width:9px;height:9px;flex:none;opacity:.7}
.lp-drop{position:absolute;top:100%;left:0;min-width:262px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.12);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.lp-nav-item:hover .lp-drop,.lp-nav-item:focus-within .lp-drop{opacity:1;visibility:visible;transform:none}
/* the gap between link and panel would drop the hover */
.lp-drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.lp-drop a{display:block;padding:.6rem .85rem;font-size:1.1rem;color:var(--ink-2);border-radius:6px}
.lp-drop a:hover{background:var(--bg-soft);color:var(--accent)}

.lp-util{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:14px}
.lp-util .lp-btn{padding:.7rem 1.35rem;font-size:0.93rem;border-radius:0}
.lp-burger{display:none;background:none;border:0;padding:8px;color:#fff;cursor:pointer;
  transition:color .32s ease}
.lp-header.is-solid .lp-burger,body.lp-interior .lp-burger{color:var(--ink)}

/* mobile drawer — slides in from the right */
.lp-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.25s;z-index:70}
.lp-scrim.is-open{opacity:1;visibility:visible}
.lp-drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);background:#fff;z-index:71;
  transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;padding:64px 20px 60px}
.lp-drawer.is-open{transform:none}
.lp-drawer-close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:2.2rem;line-height:1;color:var(--ink);cursor:pointer}
.lp-drawer-link,.lp-drawer-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:.85rem .25rem;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--line-2);text-align:left;cursor:pointer}
.lp-drawer-sub{display:none;padding:.3rem 0 .7rem .9rem}
.lp-drawer-sub.is-open{display:block}
.lp-drawer-sub a{display:block;padding:.5rem 0;font-size:1.1rem;color:var(--ink-2)}
/* below the nav breakpoint the quote button lives in the drawer instead */
.lp-drawer-cta{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.lp-drawer-cta .lp-btn{justify-content:center;border-radius:0}

/* ---------- home hero ---------- */
/* One slide = one background plus its own copy, cross-faded as a set. JS owns the
   cycle from the first frame — the earlier CSS-animation-plus-JS-takeover version
   jumped whenever a dot was clicked, because killing the animation snapped every
   slide back to its base opacity before the transition could start. */
.lp-hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#000}
.lp-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;
  will-change:opacity;backface-visibility:hidden;pointer-events:none}
.lp-hero-slide.is-live{opacity:1;pointer-events:auto}
/* no JS: show the first slide rather than a black box */
.lp-hero:not(.is-js) .lp-hero-slide.is-first{opacity:1;pointer-events:auto}
/* the photograph fades up once it has actually decoded, so the hero does not
   snap from black to image mid-paint */
.lp-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .9s ease}
.lp-hero-bg.is-ready{opacity:1}
.lp-hero:not(.is-js) .lp-hero-bg{opacity:1}
.lp-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.66) 55%,rgba(0,0,0,.3) 100%)}
.lp-hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.lp-hero-kicker{font-family:var(--display);font-weight:700;font-size:0.98rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-lt);margin:0 0 1.1rem}
/* 20ch forced the headlines to break mid-phrase; balance evens the lines out */
.lp-hero h1{font-size:clamp(2rem,4.6vw,3.7rem);margin:0;max-width:26ch;font-weight:700;
  letter-spacing:-.025em;text-wrap:balance}
.lp-hero h1 strong{display:block;font-weight:800;color:#fff}
.lp-hero h1 span{color:rgba(255,255,255,.72);font-weight:600}
.lp-hero-body{max-width:60ch;margin:1.6rem 0 0;color:rgba(255,255,255,.82);font-size:1.22rem}
.lp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.4rem}

/* the copy rises in behind the fade, staggered */
.lp-hero.is-js:not(.is-ready) .lp-hero-slide{opacity:0}
.lp-hero.is-js .lp-hero-kicker,.lp-hero.is-js .lp-hero-inner h1,
.lp-hero.is-js .lp-hero-body,.lp-hero.is-js .lp-hero-actions{
  opacity:0;transform:translateY(38px);transition:opacity .7s ease,transform .7s ease}
.lp-hero.is-js .is-live .lp-hero-kicker,.lp-hero.is-js .is-live h1,
.lp-hero.is-js .is-live .lp-hero-body,.lp-hero.is-js .is-live .lp-hero-actions{opacity:1;transform:none}
.lp-hero.is-js .is-live h1{transition-delay:.12s}
.lp-hero.is-js .is-live .lp-hero-body{transition-delay:.24s}
.lp-hero.is-js .is-live .lp-hero-actions{transition-delay:.34s}

.lp-hero-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:rgba(255,255,255,.18)}
.lp-hero-bar i{display:block;height:100%;width:0;background:var(--accent);
  animation:lp-bar var(--hold,7s) linear infinite}
.lp-hero.is-paused .lp-hero-bar i{animation:none}
@keyframes lp-bar{from{width:0}to{width:100%}}

/* hero slide indicator — bottom centre */
.lp-hero-dots{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:14px}
.lp-hero-dot{position:relative;width:14px;height:14px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.4);transition:background .3s ease,width .3s ease}
/* the dot itself stays small; this gives it a finger-sized hit area */
.lp-hero-dot::after{content:"";position:absolute;top:-16px;bottom:-16px;left:-7px;right:-7px}
.lp-hero-dot:hover{background:rgba(255,255,255,.9)}
.lp-hero-dot.is-on{width:44px;background:var(--accent-lt)}
@media (max-width:640px){.lp-hero-dots{bottom:24px}}
@media (prefers-reduced-motion:reduce){
  .lp-hero-slide,.lp-hero.is-js:not(.is-ready) .lp-hero-slide{opacity:0}
.lp-hero.is-js .lp-hero-kicker,.lp-hero.is-js .lp-hero-inner h1,
  .lp-hero.is-js .lp-hero-body,.lp-hero.is-js .lp-hero-actions{transition:none}
  .lp-hero-bar{display:none}
}

/* ---------- intro (SEO & internet marketing) ---------- */
.lp-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start}
.lp-intro-kicker{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.2rem}
.lp-intro h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.lp-intro p{color:var(--ink-2)}
.lp-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.lp-tile{position:relative;display:flex;align-items:flex-end;aspect-ratio:1/1;overflow:hidden;border-radius:10px;
  background:#1a1a1a;color:#fff}
.lp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .5s,opacity .3s}
.lp-tile:hover img{transform:scale(1.07);opacity:.42}
.lp-tile span{position:relative;z-index:2;padding:1rem;font-family:var(--display);font-weight:700;
  font-size:1.05rem;line-height:1.35}
.lp-tile span small{display:block;font-weight:600;font-size:0.95rem;opacity:.8}

/* ---------- works grid (3 per row) ---------- */
.lp-works{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 30px}
.lp-work-shot{position:relative;overflow:hidden;background:#fff}
.lp-work-shot img{aspect-ratio:16/9;object-fit:cover;object-position:top center;width:100%;
  transition:transform .6s ease,filter .35s ease}
.lp-work-shot::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.42);
  opacity:0;transition:opacity .35s ease}
.lp-work:hover .lp-work-shot img{transform:scale(1.06)}
.lp-work:hover .lp-work-shot::after{opacity:1}
/* the "+" is drawn, not a glyph, so it stays optically centred at any size */
.lp-work-plus{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;z-index:2;
  opacity:0;transform:scale(.8);transition:opacity .35s ease,transform .35s ease}
.lp-work-plus::before,.lp-work-plus::after{content:"";position:absolute;top:50%;left:50%;background:#fff}
.lp-work-plus::before{width:2px;height:54px;margin:-27px 0 0 -1px}
.lp-work-plus::after{width:54px;height:2px;margin:-1px 0 0 -27px}
.lp-work:hover .lp-work-plus{opacity:1;transform:scale(1)}
.lp-work h3{font-size:1.22rem;text-align:center;margin:1.3rem 0 0;font-weight:700}
.lp-work:hover h3{color:var(--accent)}
.lp-more{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:56px}

/* ---------- story / news cards ---------- */
.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.lp-card{display:flex;flex-direction:column;background:#fff;padding:30px 28px 26px;text-align:center;
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .28s ease,transform .28s ease}
/* the frame is an inset shadow, not a border: a 9px border on hover would
   re-lay-out the whole card */
.lp-card:hover{box-shadow:inset 0 0 0 9px var(--ink);transform:translateY(-3px)}
.lp-card-shot{aspect-ratio:16/10;background:var(--bg-soft);overflow:hidden;margin:0 0 22px}
.lp-card-shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.lp-card:hover .lp-card-shot img{transform:scale(1.05)}
.lp-card-body{display:flex;flex-direction:column;flex:1}
.lp-card h3{font-size:1.24rem;margin:0 0 .7rem;line-height:1.45}
.lp-card p{font-size:1.08rem;color:var(--muted);margin:0 0 1.8rem;line-height:1.7}
.lp-card time{margin-top:auto;font-size:0.98rem;letter-spacing:.06em;color:var(--muted)}

/* ---------- footer consulting band ---------- */
.lp-fcta{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
  padding:34px 0 54px;border-bottom:1px solid rgba(255,255,255,.14)}
.lp-fcta h2{font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.35;margin:0;color:#fff}
.lp-fcta-link{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,4vw,3.3rem);color:#fff;white-space:nowrap;letter-spacing:-.02em}
.lp-fcta-link svg{width:clamp(28px,3vw,42px);height:auto;flex:none;transition:transform .25s ease}
.lp-fcta-link:hover{color:var(--accent-lt)}
.lp-fcta-link:hover svg{transform:translateX(6px)}

/* ---------- interior page hero ---------- */
.lp-phero{position:relative;padding:86px 0 54px;background:var(--bg-soft);overflow:hidden;
  border-bottom:1px solid var(--line)}
.lp-phero-ghost{position:absolute;right:-2vw;top:50%;transform:translateY(-46%);font-family:var(--display);
  font-weight:800;font-size:clamp(4rem,11vw,9rem);letter-spacing:-.04em;color:rgba(20,20,20,.05);
  white-space:nowrap;pointer-events:none;user-select:none}
.lp-phero-inner{position:relative;z-index:2}

/* big variant — white ground so the grey ghost word actually reads */
.lp-phero.is-lg{background:#fff;border-bottom:0;padding:calc(var(--topbar-h) + 96px) 0 76px;min-height:400px;display:flex;align-items:center}
body.lp-interior .lp-phero.is-lg{padding-top:86px;min-height:340px}
.lp-phero.is-lg .lp-phero-ghost{right:24px;left:auto;top:50%;transform:translateY(-50%);
  color:#f3f1ee;line-height:1}
.lp-phero.is-lg h1{font-size:clamp(2.4rem,5.4vw,4rem);margin:0}
.lp-phero-sub{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,2.1vw,1.55rem);
  line-height:1.5;color:var(--ink);margin:1.6rem 0 0;max-width:34ch}
.lp-phero.is-lg .lp-tabs{margin-top:2.4rem}
.lp-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--bg-soft);border-radius:999px;padding:5px}
.lp-tab{display:inline-flex;align-items:center;padding:.7rem 1.4rem;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink-2);white-space:nowrap}
/* The filled state follows the pointer and stays on the last pill hovered, so it
   does not snap back the moment the mouse leaves the row. JS moves .is-on. */
.lp-tab.is-on{background:var(--ink);color:#fff}
.lp-crumb{font-size:0.98rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.lp-crumb a:hover{color:var(--accent)}
.lp-phero h1{font-size:clamp(1.9rem,4vw,3rem);margin:0}

/* ---------- prose ---------- */
.lp-prose{font-size:1.2rem;color:var(--ink-2)}
.lp-prose h2{font-size:1.7rem;color:var(--ink);margin:2.4rem 0 .9rem}
.lp-prose h3{font-size:1.38rem;color:var(--ink);margin:2rem 0 .7rem}
.lp-prose h4{font-size:1.22rem;color:var(--ink);margin:1.6rem 0 .5rem}
.lp-prose h2:first-child,.lp-prose h3:first-child{margin-top:0}
.lp-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.lp-prose .lp-work,.lp-prose .lp-btn,.lp-prose .lp-cell a,.lp-prose .lp-tab{text-decoration:none}
.lp-prose .lp-work{color:inherit}
.lp-prose ul,.lp-prose ol{margin:0 0 1.2em;padding-left:1.3em}
.lp-prose li{margin:.35em 0}
.lp-prose img{border-radius:8px;margin:1.2em 0}
.lp-prose blockquote{margin:1.6em 0;padding:0 0 0 1.2em;border-left:1px solid var(--line);color:var(--muted);font-style:italic}
.lp-prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.lp-prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:1.12rem}
.lp-prose th,.lp-prose td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
.lp-scroll-x{overflow-x:auto}

.lp-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.lp-side{position:sticky;top:24px}
.lp-side h3{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.lp-side ul{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--line)}
.lp-side li a{display:block;padding:.72rem 0;font-size:1.12rem;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.lp-side li a:hover,.lp-side li.is-current a{color:var(--accent)}

/* ---------- contact ---------- */
.lp-contact{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:start}
.lp-contact-facts{list-style:none;margin:0;padding:0}
.lp-contact-facts li{padding:1.05rem 0;border-bottom:1px solid var(--line-2)}
.lp-contact-facts strong{display:block;font-family:var(--display);font-size:0.94rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.lp-contact-facts a:hover{color:var(--accent)}
.lp-form-note{font-size:1.02rem;color:var(--muted);text-align:right;margin:0 0 1rem}
.lp-form-note b{color:var(--accent)}

/* ---------- footer ---------- */
.lp-footer{background:var(--black);color:#8f8f8f;padding:0 0 70px;font-size:1.06rem;line-height:1.85}
.lp-footer a{color:inherit}
.lp-footer a:hover{color:#fff}
.lp-footer-cols{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) auto;gap:40px;padding:52px 0 0}
.lp-fbrand img{height:22px;width:auto}
.lp-fbrand-rule{display:block;width:22px;height:1px;background:#4a4a4a;margin:22px 0 14px}
.lp-fbrand strong{display:block;color:#fff;font-family:var(--display);font-size:1.12rem}
.lp-fbrand span{display:block;font-size:1rem;color:#6f6f6f}
.lp-fcol p{margin:0 0 1.5em}
.lp-fcol p:last-child{margin:0}
.lp-fcopy{color:#5c5c5c;font-size:1rem}
.lp-fboxes{display:flex;gap:10px}
.lp-fbox{display:flex;flex-direction:column;gap:.15rem;min-width:158px;padding:18px 20px 20px;
  background:#131313;border:1px solid #242424;text-align:right;transition:border-color .25s,background .25s}
.lp-fbox:hover{border-color:#3a3a3a;background:#171717}
.lp-fbox strong{font-family:var(--display);font-size:1.04rem;color:#fff;margin-bottom:.9rem}
.lp-fbox.is-accent strong{color:var(--accent-lt)}
.lp-fbox span{font-size:0.98rem;color:#7b7b7b}
.lp-fbox:hover span{color:#a5a5a5}

/* ---------- news listing ---------- */
.lp-pager{display:flex;gap:8px;justify-content:center;margin-top:56px;flex-wrap:wrap}
.lp-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 .7rem;border:1px solid var(--line);border-radius:8px;font-size:1.08rem;color:var(--ink-2)}
.lp-pager .page-numbers:hover,.lp-pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.lp-postmeta{font-size:1rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 1.6rem}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .lp-nav{display:none}
  .lp-burger{display:block}
  .lp-util .lp-btn{display:none}
  .lp-tiles{grid-template-columns:repeat(3,1fr)}
  .lp-layout{grid-template-columns:1fr;gap:44px}
  .lp-side{position:static}
  .lp-works{grid-template-columns:repeat(2,1fr)}
  .lp-cards{grid-template-columns:repeat(2,1fr)}
  .lp-contact{grid-template-columns:1fr;gap:44px}
  .lp-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-fboxes{grid-column:1 / -1}
}
@media (max-width:640px){
  .lp-section{padding:64px 0}
  .lp-tabs{display:flex;width:100%;border-radius:14px}
  .lp-tab{flex:1 1 auto;justify-content:center;font-size:0.96rem;padding:.65rem .8rem}
  .lp-wrap{padding:0 18px}
  .lp-works{grid-template-columns:1fr}
  .lp-cards{grid-template-columns:1fr}
  .lp-tiles{grid-template-columns:repeat(2,1fr)}
  .lp-footer-cols{grid-template-columns:1fr;gap:30px}
  .lp-fboxes{flex-direction:column}
  .lp-fbox{text-align:left}
  .lp-fcta{flex-direction:column;align-items:flex-start;gap:20px}
}

/* embedded maps / videos inside page bodies */
.lp-prose iframe{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:0;border-radius:10px;margin:1.4em 0}
.lp-prose iframe[src*="google.com/maps"]{aspect-ratio:auto;height:380px}

.lp-post-lead{width:100%;border:1px solid var(--line);border-radius:10px;margin:0 0 2.4rem}

/* 6-across service tiles: the caption has to stay readable at ~230px */
.lp-tile span{font-size:1.02rem}
.lp-tile span small{font-size:0.92rem}


/* ---------- editorial blocks used inside page bodies ---------- */
.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0 2.4rem;margin:3rem 0;
  border-top:1px solid var(--line)}
.lp-stat{padding:1.9rem 0}
.lp-stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.lp-stat span{display:block;margin-top:.5rem;font-size:1.06rem;color:var(--muted);line-height:1.5}

/* internal dividers only — an outer box on top of the section rule reads as clutter */
.lp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 2.6rem;margin:2.6rem 0}
.lp-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem 2.6rem;margin:2.6rem 0}
.lp-cell{padding:0}
/* no box and no rule — the heading weight and the gap separate the cells. A
   coloured edge here would be exactly the card style flagged as too AI-looking. */
.lp-cell h3{font-size:1.22rem;margin:0 0 .7rem}
.lp-cell p{font-size:1.1rem;color:var(--muted);margin:0 0 .9rem;line-height:1.7}
.lp-cell p:last-child{margin:0}
.lp-cell a{font-family:var(--display);font-weight:700;font-size:0.98rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);text-decoration:none}
.lp-cell a:hover{color:var(--ink)}

.lp-steps{counter-reset:lpstep;list-style:none;margin:2.6rem 0;padding:0}
.lp-steps li{counter-increment:lpstep;position:relative;padding:1.1rem 0 1.1rem 4.4rem}
.lp-steps li::before{content:counter(lpstep,decimal-leading-zero);position:absolute;left:0;top:1.1rem;
  font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--accent);letter-spacing:.02em}
.lp-steps strong{display:block;font-family:var(--display);font-size:1.2rem;color:var(--ink);margin-bottom:.35rem}
.lp-steps span{font-size:1.12rem;color:var(--muted);line-height:1.7}

.lp-checks{list-style:none;margin:2.2rem 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem 2.4rem}
.lp-checks li{position:relative;padding:.45rem 0 .45rem 1.5rem;font-size:1.14rem;color:var(--ink-2)}
.lp-checks li::before{content:"";position:absolute;left:0;top:1.05rem;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}

.lp-lead{font-size:1.32rem;line-height:1.8;color:var(--ink)}
.lp-pull{margin:2.8rem 0;padding:2rem 0 0;border-top:1px solid var(--line);
  font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.5;color:var(--ink)}
.lp-actions{display:flex;flex-wrap:wrap;gap:12px;margin:2.6rem 0 0}

.lp-reason{padding:2.6rem 0;border-top:1px solid var(--line)}
.lp-reason:first-of-type{border-top:0;padding-top:0}
.lp-reason-n{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.16em;
  color:var(--accent);margin:0 0 .7rem}
.lp-reason h2{margin:0 0 1rem}

@media (max-width:900px){
  .lp-stats{grid-template-columns:repeat(2,1fr);gap:0 1.8rem}
  .lp-grid-3,.lp-grid-2{grid-template-columns:1fr}
  .lp-checks{grid-template-columns:1fr}
}

/* ---------- company-page blocks (giantsoft /company/overview) ---------- */
.lp-band{position:relative;background:var(--black);color:#fff;padding:60px 48px;margin:3rem 0;overflow:hidden}
.lp-band-mark{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;color:#fff;margin:0 0 1.4rem}
.lp-band p{max-width:46ch;margin:0;color:#c9c9c9;font-size:1.22rem;line-height:1.75}
.lp-band::after{content:"";position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:260px;height:260px;border-radius:50%;background:rgba(163,107,79,.16)}

.lp-sec{display:grid;grid-template-columns:230px minmax(0,1fr);gap:44px;
  padding:3.4rem 0;border-top:1px solid var(--line)}
.lp-sec-label h2{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.85rem);
  letter-spacing:-.01em;margin:0 0 .6rem;line-height:1.15}
.lp-sec-label p{font-size:1.05rem;color:var(--muted);margin:0;line-height:1.6}
.lp-sec-body > p:first-child{margin-top:0}

.lp-hist{list-style:none;margin:0;padding:0}
.lp-hist li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding:1.1rem 0;
  border-bottom:1px solid var(--line-2)}
.lp-hist b{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--accent)}
.lp-hist span{font-size:1.15rem;color:var(--ink-2);line-height:1.7}


@media (max-width:900px){
  .lp-sec{grid-template-columns:1fr;gap:20px;padding:2.6rem 0}
  .lp-band{padding:42px 26px}
  .lp-band::after{display:none}
}

/* ---------- contact banner statement + full-width map ---------- */
.lp-phero-note{max-width:62ch;margin:1.2rem 0 0;color:var(--muted);font-size:1.02rem;line-height:1.8}
.lp-phero.is-contact{padding-bottom:64px}
.lp-contact-h{font-size:1.18rem;margin:0 0 1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.lp-map{line-height:0}
.lp-map iframe{display:block;width:100%;height:440px;border:0;filter:grayscale(1) contrast(.92)}
.lp-map:hover iframe{filter:none}
@media (max-width:640px){.lp-map iframe{height:320px}}

/* Over the hero the header is transparent, so the solid dark "Get a Quote" pill
   disappears into the photograph. Give it a glassy fill until the page scrolls. */
.lp-header:not(.is-solid) .lp-util .lp-btn{background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(6px)}
.lp-header:not(.is-solid) .lp-util .lp-btn:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* ---------- generated section artwork ---------- */
.lp-figure{margin:3rem 0;background:var(--black);overflow:hidden}
.lp-figure img{display:block;width:100%;height:auto}
.lp-figure figcaption{padding:1rem 1.4rem;font-family:var(--display);font-weight:700;font-size:0.94rem;
  letter-spacing:.06em;color:#9a9a9a;border-top:1px solid rgba(255,255,255,.1)}
.lp-figure figcaption b{color:var(--accent-lt);font-weight:700}

/* compact works cards for use inside a page body */
.lp-works.is-compact{gap:34px 22px}
.lp-works.is-compact h3{font-size:0.96rem;margin-top:1rem}

/* small fact stack that fills the section label column */
.lp-sec-note{margin:1.8rem 0 0;border-top:1px solid var(--line)}
.lp-sec-note span{display:block;padding:.85rem 0;border-bottom:1px solid var(--line-2);
  font-size:0.86rem;color:var(--muted);line-height:1.4}
.lp-sec-note b{display:block;font-family:var(--display);font-weight:800;font-size:1.32rem;
  color:var(--ink);letter-spacing:-.01em;margin-bottom:.15rem}

/* client collage sits flush, no caption rule above it */
.lp-figure.is-collage{margin-top:0}
.lp-figure.is-collage figcaption{font-size:0.86rem;line-height:1.6}

/* the banner's first pill jumps down to the form */
#inquiry{scroll-margin-top:28px}

/* icon cell variant for the logo-design service grid */
.lp-cell-icon img{width:44px;height:auto;margin:0 0 1rem;opacity:.85}

/* logo portfolio grid — small marks on white, uniform cells */
.lp-logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:0 0 2.6rem}
.lp-logo-tile{display:flex;align-items:center;justify-content:center;background:#fff;
  min-height:130px;padding:1.2rem;transition:background .25s}
.lp-logo-tile:hover{background:var(--bg-soft)}
.lp-logo-tile img{max-width:100%;max-height:86px;width:auto;height:auto}
@media (max-width:900px){.lp-logo-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.lp-logo-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- header logo + home hero on smaller screens (2026-09-28) ---------- */
/* the copy is centred in the space under the fixed header, not under the whole
   viewport, so a short screen can no longer push the kicker up behind the bar */
.lp-hero-inner{padding-top:var(--topbar-h)}
@media (max-width:1100px){
  /* the centred nav is hidden here, so the logo gets its natural width instead of
     half the bar (max-width:100% was squeezing it sideways at a fixed height) */
  .lp-header-row{grid-template-columns:auto 1fr}
  .lp-logo img{max-width:none}
}
@media (max-width:640px){
  /* slides stack in one grid cell so the hero grows with its copy instead of
     clipping it at 100svh */
  .lp-hero{display:grid;height:auto;min-height:100svh}
  .lp-hero-slide{position:relative;grid-area:1 / 1}
  .lp-hero-inner{height:auto;min-height:100svh;padding-top:calc(var(--topbar-h) + 28px);padding-bottom:88px}
  .lp-hero-kicker{font-size:.78rem;letter-spacing:.16em;margin-bottom:.8rem}
  .lp-hero h1{font-size:clamp(1.7rem,7.4vw,2.15rem);line-height:1.18}
  .lp-hero-body{font-size:1rem;line-height:1.65;margin-top:1.1rem}
  .lp-hero-actions{margin-top:1.6rem;gap:10px}
  .lp-hero-actions .lp-btn{font-size:.76rem;letter-spacing:.1em;padding:.7rem 1.25rem}
}
/* phone logo 25px */
@media (max-width:640px){.lp-logo img{height:25px}}
/* phone header 60px */
@media (max-width:640px){:root{--topbar-h:60px}}
/* portrait screens (phones, tablets upright) show only a slice of each 1920x1000 hero photo;
   each slide sets --pos-m in its style so the subject stays in that slice */
@media (max-aspect-ratio:1/1){.lp-hero-bg{background-position:var(--pos-m,center)}}
/* phone footer: the two link boxes sit side by side, compact, above the copyright line */
@media (max-width:640px){
  .lp-footer-cols > .lp-fcol:nth-of-type(3){display:contents}
  .lp-footer-cols > .lp-fcol:nth-of-type(3) > p{margin:0}
  .lp-footer-cols .lp-fcopy{order:1;font-size:.86rem}
  .lp-fboxes{flex-direction:row;gap:8px}
  .lp-fbox{flex:1 1 0;min-width:0;padding:12px 14px}
  .lp-fbox strong{font-size:.9rem;margin-bottom:.2rem}
  .lp-fbox span{font-size:.8rem}
}
/* narrow phones: footer boxes stay on one line each */
@media (max-width:360px){.lp-fbox{padding:11px 10px}.lp-fbox strong{font-size:.84rem;white-space:nowrap}}
/* contact: the inquiry form sits on a dark panel so it stands apart from the white page */
#inquiry{background:var(--ink);color:#fff;border-radius:16px;padding:44px 48px 48px}
#inquiry .lp-contact-h{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
#inquiry .lp-form-note{color:rgba(255,255,255,.55)}
#inquiry .lp-form-note b,#inquiry .wpforms-required-label{color:var(--accent-lt)}
#inquiry .wpforms-container .wpforms-field-label{color:rgba(255,255,255,.62)}
#inquiry .wpforms-container .wpforms-field-checkbox label,
#inquiry .wpforms-container .wpforms-field-radio label{color:rgba(255,255,255,.88)}
#inquiry .wpforms-container input[type=text],#inquiry .wpforms-container input[type=email],
#inquiry .wpforms-container input[type=tel],#inquiry .wpforms-container input[type=url],
#inquiry .wpforms-container select,#inquiry .wpforms-container textarea{background:#fff;border-color:#fff;color:var(--ink)}
#inquiry .wpforms-container input:focus,#inquiry .wpforms-container select:focus,
#inquiry .wpforms-container textarea:focus{border-color:var(--accent-lt);box-shadow:0 0 0 3px rgba(192,138,104,.35)}
#inquiry .wpforms-container input[type=checkbox]{accent-color:var(--accent-lt)}
#inquiry .wpforms-container button.wpforms-submit{background:var(--accent);border-color:var(--accent);color:#fff}
#inquiry .wpforms-container button.wpforms-submit:hover{background:#fff;border-color:#fff;color:var(--ink)}
#inquiry .wpforms-container .wpforms-error{color:#ffb4a8}
#inquiry .wpforms-container input.wpforms-error,#inquiry .wpforms-container textarea.wpforms-error,
#inquiry .wpforms-container select.wpforms-error{border-color:#ffb4a8}
#inquiry .wpforms-confirmation-container,#inquiry .wpforms-confirmation-container-full{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);color:#fff}
@media (max-width:640px){#inquiry{border-radius:12px;padding:28px 18px 32px}}
/* phone footer text size: address / contact lines match the link boxes (.9rem) */
@media (max-width:640px){.lp-footer .lp-fcol p{font-size:.9rem;line-height:1.65;margin:0 0 1.1em}.lp-footer .lp-fcol p:last-child{margin:0}.lp-footer .lp-fcol p.lp-fcopy{font-size:.8rem}}