/* ============================================================
   Palsaniya Ventures LLP — website styles
   Built from Figma: "Website" frame (1512 px wide reference)

   HOW SCALING WORKS
   -----------------
   Every desktop size below is written in `rem`, where
   1 rem = (design px) / 16.  The root font-size is tied to the
   viewport width above 1000px, so the whole desktop composition
   scales perfectly from 1000px up to 1760px, then locks.
   Below 1000px the layout switches to a normal stacked flow.
   ============================================================ */

/* ---------- Optional: real Nohemi -----------------------------
   Nohemi (by Rajesh Rajput) is free for personal AND commercial
   use. Drop these 5 files into assets/fonts/ and the site picks
   them up automatically. Until then it falls back to "Onest",
   which is a very close geometric grotesque from Google Fonts.
   -------------------------------------------------------------- */
@font-face{font-family:'Nohemi';src:url('assets/fonts/Nohemi-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url('assets/fonts/Nohemi-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url('assets/fonts/Nohemi-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url('assets/fonts/Nohemi-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url('assets/fonts/Nohemi-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* ---------- Optional: real Thelion (logo wordmark) ------------
   Thelion is free for personal use only — a commercial licence
   must be bought from the designer before using it live.
   If you buy it, drop Thelion-Regular.woff2 in assets/fonts/.
   -------------------------------------------------------------- */
@font-face{font-family:'Thelion';src:url('assets/fonts/Thelion-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --cream:      #f0e7d8;
  --cream-lite: #fff6e8;
  --green:      #011d04;
  --green-ink:  #0f2411;
  --sage:       #8ca375;
  --teal:       #00544a;
  --ink:        #161211;
  --ink-2:      #221f1b;
  --muted:      #444444;
  --white:      #ffffff;
  --black:      #000000;

  --f-display: 'Nohemi', 'Onest', system-ui, -apple-system, sans-serif;
  --f-grot:    'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-logo:    'Thelion', 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-pixel:   'Doto', monospace;

  --pad: 6.25rem;          /* 100px page gutter on the 1512 grid */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.4;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p,figure{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,textarea{font:inherit;color:inherit}

:focus-visible{outline:3px solid var(--sage);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--green);color:var(--cream);
  padding:.75rem 1.25rem;border-radius:0 0 .5rem 0;
  font-size:1rem;text-decoration:none;
}
.skip-link:focus{left:0}

/* fluid desktop scale ---------------------------------------- */
@media (min-width:1000px){
  html{font-size:1.0582vw}          /* 16 / 1512 * 100 */
}
@media (min-width:1653px){
  html{font-size:17.5px}            /* lock so it stops growing on big monitors */
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Everything that starts hidden lives under ".js" (set by an inline script in
   <head>). No JavaScript => no hiding => the page is fully readable. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero__art img{animation:none;-webkit-mask-image:none;mask-image:none}
  .card,.card__num,.card__title,.card__body p,.vcard,.vcard__icon .ic{transition:none}
}

/* ============================================================
   LOGO
   ============================================================ */
.logo{
  display:flex;align-items:baseline;gap:1rem;
  text-decoration:none;color:var(--green-ink);
  font-family:var(--f-logo);font-weight:400;
  white-space:nowrap;
}
.logo__name{font-size:2.25rem;letter-spacing:.04em;line-height:1}
.logo__llp{font-size:1.5rem;letter-spacing:.16em;line-height:1}
.logo--light{color:var(--cream)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--cream);
  border-bottom:1px solid var(--black);
}
.nav__inner{
  height:6.25rem;
  padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.btn-talk{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:8.5625rem;height:3.375rem;
  padding:0 1.5rem;
  background:var(--ink);color:var(--cream);
  border-radius:1rem;
  font-size:1.25rem;font-weight:400;letter-spacing:.01em;
  text-decoration:none;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.btn-talk:hover{background:var(--green);transform:translateY(-2px)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:47.5rem;overflow:hidden;background:var(--cream)}
.hero__title{
  position:absolute;left:7.0625rem;top:4.5rem;width:66rem;
  margin:0;
  font-size:4.25rem;font-weight:700;line-height:1.32;letter-spacing:.04em;
  color:var(--ink);
  z-index:2;
}
.hl{
  background:var(--green);color:var(--cream);
  padding:.13em .3em .17em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero__art{position:absolute;left:23.8125rem;top:22rem;width:64.375rem;z-index:1}

/* The line art draws itself on, left to right, the way the Figma prototype does.
   The artwork is filled paths (not strokes), so a stroke-dash draw isn't possible —
   a soft-edged mask sweeping across reproduces it, and works straight on the <img>. */
.hero__art img{width:100%;height:auto}
.js .hero__art img{
  -webkit-mask-image:linear-gradient(90deg,#000 0 46%,transparent 55%);
          mask-image:linear-gradient(90deg,#000 0 46%,transparent 55%);
  -webkit-mask-size:220% 100%;         mask-size:220% 100%;
  -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
  animation:hero-draw 1.3s cubic-bezier(.36,.06,.32,.99) .35s both;
}
@keyframes hero-draw{
  from{-webkit-mask-position:100% 0; mask-position:100% 0}
  to  {-webkit-mask-position:0 0;    mask-position:0 0}
}

/* ============================================================
   STORY  (dark green)
   ============================================================ */
.story{background:var(--green);color:var(--cream)}
/* Figma clips this frame's contents, and two illustrations are drawn
   right up to the 1512px edge — clipping here reproduces that exactly
   and stops them poking out when a scrollbar narrows the viewport. */
.story__stage{position:relative;height:386.625rem;overflow:hidden}

.story__stage > *{position:absolute}

/* paint order, matching the Figma layer stack:
   decorative paths at the back, illustrations above them, cards on top */
.deco{z-index:0}
.art{z-index:1}
.card{z-index:2}
.story__kicker,.story__intro,.tag{z-index:3}

.story__kicker{
  left:var(--pad);top:5.625rem;
  font-family:var(--f-grot);font-size:2.5rem;font-weight:500;
  letter-spacing:.04em;line-height:1.15;color:var(--cream);
}
.underlined{
  background:url('assets/art/brush-underline.svg') no-repeat bottom center;
  background-size:100% auto;
  padding-bottom:.34em;
}

.art{margin:0}
.art img{width:100%;height:auto}

.art--ramesh{left:0;top:12.375rem;width:52.6875rem}

.story__intro{left:54.6875rem;top:19.4375rem;width:32.3125rem}
.story__lede{
  font-family:var(--f-grot);font-size:3.25rem;font-weight:500;
  line-height:1.05;letter-spacing:.02em;color:var(--cream);
  margin-bottom:1.6rem;
}
.story__lede span{font-size:.923em}
.story__intro p{
  font-size:1.5rem;font-weight:500;line-height:1.15;letter-spacing:.04em;
  color:var(--cream);margin:0 0 1.1em;
}
.story__intro p:last-child{margin-bottom:0}

.deco--path{left:6.625rem;top:41.5625rem;width:77.3125rem}
.deco--path img{width:100%;height:auto}
.deco--doto{
  left:39.875rem;top:57rem;
  font-family:var(--f-pixel);font-size:12.5rem;font-weight:900;
  line-height:1.15;color:var(--cream);
}

/* --- sage tags along the dashed path --- */
.tags{display:contents}
.tag{
  position:absolute;
  background:var(--sage);color:var(--white);
  font-size:2.25rem;font-weight:500;letter-spacing:.04em;line-height:1.15;
  padding:.12em .18em;
  transform-origin:50% 50%;
}
.tag--here   {left:75.9375rem;top:52.219rem; transform:translate(-50%,-50%) rotate(-6deg)}
.tag--are    {left:57.125rem; top:59.031rem; transform:translate(-50%,-50%) rotate(2deg)}
.tag--things {left:24.6875rem;top:67.1875rem;transform:translate(-50%,-50%) rotate(5deg)}
.tag--he     {left:6.625rem;  top:73.4375rem;transform:translate(-50%,-50%)}
.tag--noticed{left:16.094rem; top:88.8125rem;transform:translate(-50%,-50%) rotate(21deg)}

/* --- numbered problem cards --- */
.card{
  display:flex;align-items:center;
  padding:2.6875rem;
  background:transparent;
  border:2px solid var(--cream-lite);
  border-radius:4.125rem;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.card__num,.card__title,.card__body p{transition:color .3s var(--ease)}

/* Hover inverts the card — cream fill, dark green type — as in the prototype. */
@media (hover:hover){
  .card:hover{background:var(--cream);border-color:var(--cream)}
  .card:hover .card__num,
  .card:hover .card__title,
  .card:hover .card__body p{color:var(--green)}
}
/* Same state, driven by a class. script.js only adds it on touch screens,
   where the card lights up as it reaches the middle of the screen. */
.card.is-lit{background:var(--cream);border-color:var(--cream)}
.card.is-lit .card__num,
.card.is-lit .card__title,
.card.is-lit .card__body p{color:var(--green)}
.card__num{
  flex:0 0 12.4375rem;
  text-align:center;
  font-size:21.25rem;font-weight:700;line-height:.72;
  letter-spacing:.04em;color:var(--white);
  margin:0;
}
.card__body{flex:1;min-width:0}
.card__title{
  font-size:3.125rem;font-weight:700;line-height:1.1;letter-spacing:.04em;
  color:var(--white);margin:0 0 .55em;
}
.card__body p{
  font-size:1.8125rem;font-weight:500;line-height:1.25;letter-spacing:.02em;
  color:var(--cream);margin:0 0 .55em;
}
.card__body p:last-child{margin-bottom:0}

.card--1{left:5.875rem; top:101.5rem;   width:53.3125rem;min-height:28.9375rem}
.card--2{left:38rem;    top:144.9375rem;width:50.6875rem;min-height:31.25rem}
.card--3{left:6.125rem; top:195.9375rem;width:52.5rem;   min-height:28.5625rem}
.card--4{left:39.0625rem;top:243.1875rem;width:49.5625rem;min-height:31.1875rem}
.card--5{left:5.75rem;  top:293.0625rem;width:50.3125rem;min-height:28.1875rem}
.card--6{left:37.5625rem;top:339.9375rem;width:50.4375rem;min-height:28.125rem}

.art--1{left:61.25rem; top:101.4375rem;width:27.4375rem}
.art--2{left:0;        top:138.3125rem;width:63.9375rem}
.art--3{left:47.4375rem;top:186rem;    width:47.0625rem}
.art--4{left:0;        top:244.1875rem;width:54.75rem}
.art--5{left:52rem;    top:293.5625rem;width:40.4375rem}
.art--6{left:0;        top:338.375rem; width:43.375rem}

.deco--conn img{width:100%;height:auto}
.conn--1{left:20.6875rem;top:130.375rem;width:17.75rem}
.conn--2{left:29.0625rem;top:176.125rem;width:39.0625rem}
.conn--3{left:16.625rem; top:224.4375rem;width:27rem}
.conn--4{left:53.6875rem;top:274.4375rem;width:17.8125rem}
.conn--5{left:31.3125rem;top:321.1875rem;width:18.25rem}

.deco--arrow{left:36.25rem;top:368.125rem;width:34.5625rem}
.deco--arrow img{width:100%;height:auto}

/* ============================================================
   TALK  (cream) — the "Your Experience" panel
   ============================================================ */
/* Height is content-driven (no fixed height) so text can never spill
   into the dark band below; min-height keeps room for the absolutely
   positioned "Your Experience" panel on the right. */
.talk{background:var(--cream);padding:6rem var(--pad) 5.5rem}
.talk__inner{position:relative;min-height:33.5rem}

.talk__copy{width:42.25rem}
.talk__kicker{
  font-family:var(--f-grot);font-size:2.25rem;font-weight:500;
  line-height:1.167;letter-spacing:.02em;color:var(--ink-2);
  margin-bottom:1.05em;
}
.talk__intro{
  font-size:1.75rem;font-weight:400;line-height:1.5;letter-spacing:.02em;
  color:var(--ink-2);max-width:42.25rem;
}
.talk__title{
  font-family:var(--f-grot);font-size:4.5rem;font-weight:900;
  line-height:.889;letter-spacing:.01em;color:var(--black);
  margin:.95em 0 .6em;max-width:45.1875rem;
}
.talk__copy .talk__intro:last-child{max-width:38.9375rem}

.xp{
  position:absolute;right:0;top:1.6875rem;
  width:31.8125rem;
  background:var(--cream);
  border:2px solid var(--black);
  border-radius:1rem;
  box-shadow:-8px 8px 0 0 var(--black);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.xp__head{padding:1.625rem;border-bottom:2px solid var(--black)}
.xp__label{
  display:block;
  font-family:var(--f-grot);font-size:1.75rem;font-weight:500;
  letter-spacing:.02em;color:var(--black);line-height:1;
}
.xp__field{padding:1.625rem;height:20.125rem}
.xp__field textarea{
  width:100%;height:100%;
  border:0;background:transparent;resize:none;
  font-family:var(--f-display);font-size:1rem;font-weight:400;
  line-height:1.5;letter-spacing:.02em;color:var(--ink);
}
.xp__field textarea::placeholder{color:var(--muted);opacity:1}
.xp__field textarea:focus{outline:none}
.xp__field:focus-within{box-shadow:inset 0 0 0 2px var(--sage)}
.xp__foot{
  padding:1.25rem 1.625rem;
  border-top:2px solid var(--black);
  display:flex;justify-content:center;
}
.btn-wa{
  width:23.9375rem;height:3.375rem;
  background:var(--teal);color:var(--white);
  border:0;border-radius:.75rem;cursor:pointer;
  font-family:var(--f-grot);font-size:1.25rem;font-weight:500;letter-spacing:.02em;
  transition:transform .25s var(--ease),filter .25s var(--ease);
}
.btn-wa:hover{transform:translateY(-2px);filter:brightness(1.15)}
.btn-wa:active{transform:translateY(0)}
.xp__hint{
  margin:0;padding:0 1.625rem 1rem;
  font-size:.875rem;color:var(--muted);text-align:center;min-height:1.2em;
}

/* ============================================================
   BAND
   ============================================================ */
.band{background:var(--green);min-height:17.875rem;display:flex;align-items:flex-start;padding-bottom:2rem}
.band__text{
  margin:3.5rem auto 0;width:66rem;max-width:calc(100% - 2 * var(--pad));
  font-size:2.625rem;font-weight:900;line-height:1.524;letter-spacing:.04em;
  color:var(--white);text-align:center;
}
.band__u{
  background:url('assets/art/brush-underline.svg') no-repeat bottom center;
  background-size:100% auto;
  padding-bottom:.28em;
}

/* ============================================================
   STUDIO
   ============================================================ */
.studio{background:var(--cream);padding:7.8125rem var(--pad) 7.75rem}
.studio__title{
  font-family:var(--f-grot);font-size:4.5rem;font-weight:900;
  line-height:1;letter-spacing:.01em;color:var(--black);
  max-width:60.125rem;margin-bottom:5rem;
}
.studio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem}
.vcard{
  background:var(--sage);
  border:2px solid var(--black);
  border-radius:1.5rem;
  /* min-height, not height: longer card copy grows the whole row
     (grid stretches all three equally) instead of overflowing */
  min-height:34.75rem;
  padding:4.75rem 1.5rem 4.25rem;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.vcard:hover{transform:translateY(-6px);box-shadow:-6px 10px 0 0 var(--black)}
/* Both icon states sit in the same grid cell and cross-fade on hover,
   outline → filled, matching the prototype. */
/* Fixed icon-block height, not flex:1 — that keeps the divider rule at the
   same y in all three cards even though the icons and copy differ in size. */
.vcard__icon{flex:0 0 auto;height:11.5rem;display:grid;place-items:center;padding-bottom:1.8125rem}
.vcard__icon .ic{grid-area:1/1;max-height:8rem;width:auto;transition:opacity .28s var(--ease)}
.vcard__icon .ic--hot{opacity:0}
@media (hover:hover){
  .vcard:hover .ic--rest{opacity:0}
  .vcard:hover .ic--hot{opacity:1}
}
.vcard.is-lit .ic--rest{opacity:0}
.vcard.is-lit .ic--hot{opacity:1}
.vcard__text{border-top:2px solid var(--black);padding-top:1.6875rem}
.vcard__text h3{
  font-family:var(--f-grot);font-size:2.625rem;font-weight:900;
  line-height:.952;letter-spacing:.01em;color:var(--black);
  margin-bottom:.62em;
}
.vcard__text p{
  font-size:1.5rem;font-weight:500;line-height:1.333;letter-spacing:.04em;
  color:var(--black);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--green);color:var(--cream);min-height:19.875rem;padding:5rem var(--pad) 3rem}
.foot__inner{display:grid;grid-template-columns:37.5625rem 32.5625rem 1fr;align-items:start}
.foot__brand .logo{margin-bottom:1.25rem}
.foot__tag{
  font-size:1rem;font-weight:400;line-height:1.25;letter-spacing:.04em;
  color:var(--cream);max-width:22.875rem;
}
.foot__copy{
  margin-top:5rem;
  font-size:.5rem;font-weight:400;letter-spacing:.04em;color:var(--cream);
}
.foot__label{
  font-family:var(--f-grot);font-size:1.5rem;font-weight:400;
  letter-spacing:.04em;color:var(--cream);margin-bottom:1.35rem;
  white-space:nowrap;
}
.foot__val{font-size:1rem;font-weight:600;letter-spacing:.04em}
.foot__val a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.foot__val a:hover{border-bottom-color:var(--cream)}

/* ============================================================
   ═══════════════  RESPONSIVE  ═══════════════
   Below 1000px everything unwinds into a single column.
   ============================================================ */
@media (max-width:999.98px){
  :root{--pad:1.5rem}

  .br-lg{display:none}

  /* --- nav --- */
  .nav__inner{height:4.5rem;padding:0 var(--pad);gap:.75rem}
  .logo{gap:.4rem;min-width:0;overflow:hidden}
  .logo__name{font-size:1.25rem}
  .logo__llp{font-size:.8125rem;letter-spacing:.14em}
  .btn-talk{min-width:auto;height:2.5rem;padding:0 .875rem;font-size:.9375rem;border-radius:.75rem;white-space:nowrap}

  /* --- hero --- */
  .hero{height:auto;padding:3rem 0 0}
  .hero__title{
    position:static;width:auto;
    padding:0 var(--pad);
    font-size:clamp(2rem,8.2vw,3.25rem);
    line-height:1.24;letter-spacing:.01em;
  }
  .hl{padding:.1em .22em .14em}
  .hero__art{position:static;width:100%;margin-top:2rem;padding:0 .5rem}

  /* --- story: absolute grid collapses to flow --- */
  .story{padding:3.5rem 0 4rem}
  .story__stage{height:auto;display:flex;flex-direction:column;gap:2.5rem}
  .story__stage > *{position:static}

  .story__kicker{order:1;padding:0 var(--pad);font-size:1.875rem}
  .art--ramesh{order:2;width:100%;padding:0 .5rem}
  .story__intro{order:3;width:auto;padding:0 var(--pad)}
  .story__lede{font-size:1.75rem;margin-bottom:1rem}
  .story__intro p{font-size:1.0625rem;line-height:1.5;letter-spacing:.01em}

  /* decorative-only bits have no meaning in a stack */
  .deco--path,.deco--doto,.deco--conn{display:none}

  .tags{
    order:4;display:flex;flex-wrap:wrap;gap:.5rem;
    padding:0 var(--pad);margin:0;
  }
  .tag{position:static;transform:none!important;font-size:1.25rem;padding:.15em .3em}

  /* card + its illustration, six times */
  .card{
    /* min-height must be cleared too — the desktop rules set one per card,
       and without this the card keeps that height and shows a big empty gap */
    width:auto!important;height:auto!important;min-height:0!important;
    margin:0 var(--pad);
    flex-direction:column;align-items:flex-start;gap:.5rem;
    padding:1.75rem 1.5rem 2rem;
    border-radius:1.75rem;
  }
  .card__num{
    flex:none;font-size:5.5rem;line-height:1;text-align:left;
    margin-bottom:.1em;
  }
  .card__title{font-size:1.5rem;line-height:1.2;letter-spacing:.01em;margin-bottom:.7em}
  .card__title br{display:none}
  .card__body p{font-size:1.0625rem;line-height:1.45;margin-bottom:.7em}

  .art{width:100%!important;padding:0 .5rem}

  .card--1{order:5}  .art--1{order:6}
  .card--2{order:7}  .art--2{order:8}
  .card--3{order:9}  .art--3{order:10}
  .card--4{order:11} .art--4{order:12}
  .card--5{order:13} .art--5{order:14}
  .card--6{order:15} .art--6{order:16}
  .deco--arrow{order:17;width:60%!important;margin:0 auto;padding:0}

  /* --- talk --- */
  .talk{height:auto;padding:3.5rem var(--pad) 4rem}
  .talk__inner{height:auto}
  .talk__copy{width:auto}
  .talk__kicker{font-size:1.375rem;margin-bottom:.9em}
  .talk__intro{font-size:1.0625rem;line-height:1.6;max-width:none!important}
  .talk__title{font-size:clamp(1.875rem,7.4vw,2.75rem);line-height:1.02;margin:1.4em 0 .55em;max-width:none}

  .xp{position:static;width:auto;margin-top:2.5rem;box-shadow:-5px 5px 0 0 var(--black)}
  .xp__head{padding:1rem 1.125rem}
  .xp__label{font-size:1.125rem}
  .xp__field{padding:1.125rem;height:11rem}
  .xp__field textarea{font-size:1rem}
  .xp__foot{padding:1rem 1.125rem}
  .btn-wa{width:100%;height:3rem;font-size:1rem}

  /* --- band --- */
  .band{height:auto;padding:2.75rem 0}
  .band__text{width:auto;margin:0;font-size:clamp(1.125rem,4.6vw,1.625rem);line-height:1.45}
  .band__u{padding-bottom:.22em}

  /* --- studio --- */
  .studio{padding:3.5rem var(--pad) 4rem}
  .studio__title{font-size:clamp(1.875rem,7.4vw,2.75rem);line-height:1.06;margin-bottom:2rem;max-width:none}
  .studio__grid{grid-template-columns:1fr;gap:1.5rem}
  .vcard{height:auto;min-height:0;padding:2.5rem 1.5rem 2rem;border-radius:1.25rem}
  .vcard__icon{height:8rem;padding-bottom:1.5rem}
  .vcard__icon img{max-height:5.5rem}
  .vcard__text{padding-top:1.25rem}
  .vcard__text h3{font-size:1.5rem;line-height:1.05;margin-bottom:.55em}
  .vcard__text p{font-size:1.0625rem;line-height:1.45;letter-spacing:.01em}

  /* --- footer --- */
  .foot{height:auto;padding:3rem var(--pad)}
  .foot__inner{grid-template-columns:1fr;gap:2rem}
  .foot__tag{font-size:.9375rem;max-width:26rem}
  .foot__copy{margin-top:1.5rem;font-size:.6875rem}
  .foot__label{font-size:1.125rem;margin-bottom:.5rem}
  .foot__val{font-size:.9375rem;word-break:break-word}
}

/* --- tablet: two-up value cards --- */
@media (min-width:640px) and (max-width:999.98px){
  .studio__grid{grid-template-columns:repeat(2,1fr)}
  .card{margin:0 var(--pad)}
  .card__num{font-size:7rem}
  .card__title{font-size:1.875rem}
  .card__body p{font-size:1.1875rem}
  .foot__inner{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}

/* --- very small phones --- */
@media (max-width:380px){
  .logo__name{font-size:1.1875rem}
  .logo__llp{font-size:.8125rem}
  .btn-talk{font-size:.875rem;padding:0 .75rem}
  .card{margin:0 1rem}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .nav,.deco,.xp__foot{display:none}
  body{background:#fff;color:#000}
  .story,.band,.foot{background:#fff;color:#000}
}