/* BY MAXTRADE — "Age of Sail" version.
     One page in three folios: I About (the warehouse photo), II Logistics (the voyage of one shipment as a film that plays on its own),
     III Consulting (a merchant's counting-house: Prices Current, a ticker of markets, services as bills of exchange).
     The look is a merchant's papers from the age of sail: parchment, iron-gall ink, sea-chart neatlines, an olive wax seal.
     Red appears only in the coffee cherries of the logo and the plantation. */
  :root{
    --paper:#EFE4CC; --paper2:#E6D7B8; --sheet:#F3EAD6; --deep:#E2D1AE;
    --ink:#2A1E14; --ink2:#3A2B1E; --faded:#5A4632; --olive:#55602F; --olive2:#7C8B4A; --seal:#3F4722;
    --fell:'IM Fell English', Georgia, 'Times New Roman', serif;
    --sc:'IM Fell English SC', Georgia, 'Times New Roman', serif;
    --body:'EB Garamond', Georgia, 'Times New Roman', serif;
    --hand:'Pinyon Script', 'Snell Roundhand', cursive;
    color-scheme: light;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
  body{margin:0;background-color:var(--paper);background-image:radial-gradient(ellipse at 10% 22%,rgba(140,106,60,.10),transparent 36%),radial-gradient(ellipse at 90% 64%,rgba(140,106,60,.12),transparent 40%),repeating-linear-gradient(0deg,rgba(42,30,20,.022) 0 1px,transparent 1px 5px);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{max-width:100%}
  a{color:var(--ink)}
  :focus-visible{outline:2px solid var(--olive);outline-offset:3px}
  .sc{font-family:var(--sc);letter-spacing:.14em}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hand{font-family:var(--hand);color:var(--olive);line-height:1.1}
  .wrap{max-width:1280px;margin:0 auto;padding:0 48px}
  h1,h2,h3{font-family:var(--fell);font-weight:400;margin:0;line-height:1.08}
  .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;font-family:var(--sc);font-size:17px;letter-spacing:.1em;text-decoration:none;cursor:pointer;border:1px solid var(--ink);transition:background .25s,color .25s}
  .btn-ink{background:var(--ink);color:var(--paper)} .btn-ink:hover{background:var(--olive);border-color:var(--olive);color:var(--paper)}
  .btn-line{background:transparent;color:var(--ink)} .btn-line:hover{background:var(--ink);color:var(--paper)}

  /* ---------- header */
  .top{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px 36px;padding:14px 40px;color:var(--ink);transition:background .35s,border-color .35s,color .35s;border-bottom:1px solid rgba(42,30,20,.25);background:rgba(239,228,204,.95)}
  .top.over{background:transparent;border-color:rgba(239,228,204,.25);color:var(--paper)}
  .lock{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
  .lock img{display:block;width:auto;transition:filter .35s}
  .lock .m{height:54px} .lock .w{height:40px}
  .top.over .lock{background:rgba(239,228,204,.95);padding:4px 12px 4px 6px;outline:1px solid rgba(239,228,204,.55);outline-offset:3px}
  .menu{display:flex;align-items:center;gap:6px 30px;font-family:var(--sc);font-size:16px;letter-spacing:.1em}
  .menu a{color:inherit;text-decoration:none;padding:10px 0 6px;border-bottom:1px solid transparent;opacity:.82}
  .menu a:hover,.menu a.on{opacity:1;border-bottom-color:currentColor}
  .tools{display:flex;align-items:center;gap:20px;font-family:var(--sc);font-size:14px;letter-spacing:.12em}
  .tools .lang{display:flex;align-items:center;gap:6px}
  .tools .lang a{color:inherit;text-decoration:none;opacity:.8;padding:10px 3px 6px;border-bottom:1px solid transparent}
  .tools .lang a:hover,.tools .lang a.on{opacity:1}
  .tools .lang a.on{border-bottom-color:currentColor}
  .tools .lang i{font-style:normal;opacity:.45}
  .tools .btn{min-height:44px;font-size:15px;padding:0 18px}
  .top.over .tools .btn{border-color:var(--paper);color:var(--paper);background:transparent}
  .top.over .tools .btn:hover{background:var(--paper);color:var(--ink)}
  .burger{display:none;width:44px;height:44px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;padding:0;align-items:center;justify-content:center}
  .burger svg{display:block}

  /* ---------- I · hero */
  .hero{position:relative;min-height:max(680px,100svh);display:flex;align-items:center;overflow:hidden;background:var(--ink);color:var(--ink)}
  .hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:sepia(.65) saturate(.75) contrast(1.06) brightness(.82);transform:scale(1.06);animation:breathe 26s ease-in-out infinite alternate}
  @keyframes breathe{to{transform:scale(1.0)}}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,30,20,.86) 0%,rgba(42,30,20,.55) 42%,rgba(42,30,20,.12) 100%)}
  /* soft hand-over from the warehouse photograph to the parchment of the voyage below (the matching half is .journey::before) */
  .hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(200px,38svh,380px);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(233,223,203,0) 0,rgba(233,223,203,.05) 12%,rgba(233,223,203,.17) 30%,rgba(233,223,203,.42) 52%,rgba(233,223,203,.74) 75%,rgba(233,223,203,.94) 90%,#E9DFCB 100%)}
  .rhumb{position:absolute;inset:0;width:100%;height:100%;opacity:.2;z-index:1}
  .hero .wrap{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:120px;padding-bottom:72px}
  .folio{position:relative;max-width:590px;flex:1 1 440px;background-color:var(--paper);background-image:radial-gradient(ellipse at 90% 10%,rgba(140,106,60,.18),transparent 50%),radial-gradient(ellipse at 5% 95%,rgba(140,106,60,.16),transparent 45%);padding:52px 52px 44px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);outline:1px solid var(--ink);outline-offset:-12px}
  .folio::before{content:"";position:absolute;inset:18px;border:1px solid rgba(42,30,20,.32);pointer-events:none}
  .folio .hand{margin:0 0 4px;font-size:30px}
  .folio .sc{margin:0 0 20px;font-size:15px;color:var(--faded)}
  .folio h1{font-size:clamp(38px,4.4vw,58px);margin-bottom:22px;letter-spacing:-.005em}
  .folio .lede{margin:0 0 30px;font-size:20px;color:var(--ink2)}
  .folio .acts{display:flex;flex-wrap:wrap;gap:14px}
  .folio .coord{margin:30px 0 0;padding-top:14px;border-top:1px solid rgba(42,30,20,.3);font-style:italic;font-size:16px;color:var(--faded)}
  .compass{flex-shrink:0;align-self:flex-end;width:240px;height:240px;opacity:.9;will-change:transform}

  /* ink reveal */
  [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s ease}
  [data-reveal].in{opacity:1;transform:none}
  .rule-draw{transform-origin:left center;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
  .in .rule-draw,.rule-draw.in{transform:scaleX(1)}

  /* ---------- folio sections */
  .head{display:flex;align-items:center;gap:24px;margin-bottom:52px}
  .head .sc{font-size:15px;color:var(--faded);white-space:nowrap}
  .head .line{flex-grow:1;height:1px;background:var(--ink);opacity:.4}
  .head .hand{font-size:26px;white-space:nowrap}
  .about{padding-top:120px;padding-bottom:30px}
  .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px 80px}
  .cols h2{font-size:40px;margin-bottom:18px}
  .cols p{margin:0;font-size:20px}
  .flourish{display:flex;justify-content:center;padding:56px 24px}
  .flourish svg{max-width:100%}
  .principles{padding-bottom:20px}
  .principles .intro{text-align:center;max-width:760px;margin:0 auto 52px}
  .principles .intro h2{font-size:46px;margin-bottom:16px}
  .principles .intro p{margin:0;font-size:20px;color:var(--ink2)}
  .three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  .three > div{padding:40px 32px;text-align:center}
  .three > div + div{border-left:1px solid rgba(42,30,20,.3)}
  .three .num{margin:0 0 8px;font-family:var(--fell);font-style:italic;font-size:64px;line-height:1;color:var(--olive)}
  .three .lbl2{margin:0;font-family:var(--sc);font-size:22px;letter-spacing:.06em}
  .onward{display:flex;justify-content:center;margin-top:72px}
  .onward a{display:inline-flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);text-align:center}
  .onward .sc{font-size:15px;color:var(--faded)}
  .onward .big{font-family:var(--fell);font-style:italic;font-size:30px;line-height:1.2}
  .onward svg{animation:nudge 2.4s ease-in-out infinite}
  @keyframes nudge{50%{transform:translateY(6px)}}

  /* ---------- II · logistics */
  .kfig{margin:8px 0 0}
  .kband{position:relative;height:clamp(300px,46vw,620px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 74%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
  .kband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:sepia(.62) saturate(.78) contrast(1.06) brightness(1.04);mix-blend-mode:multiply}
  .kband::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(42,30,20,.10) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(239,228,204,.55) 100%)}
  .logi{padding:60px 0 0;scroll-margin-top:60px}
  .logi .intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px}
  .logi .intro > div{max-width:780px;flex:1 1 520px}
  .logi .hand{font-size:30px;margin:0 0 4px}
  .logi .intro .sc{margin:0 0 18px;font-size:15px;color:var(--faded)}
  .logi h2.title{font-size:clamp(42px,4.6vw,62px);margin-bottom:22px}
  .logi .intro p.lede{margin:0;font-size:20px;color:var(--ink2)}
  .logi .compass{width:180px;height:180px;align-self:flex-end;opacity:1}

  .chart{max-width:1344px;margin:0 auto;padding:0 32px}
  .neat{position:relative;border:1.5px solid var(--ink);padding:9px;background:var(--paper);box-shadow:0 40px 70px -40px rgba(42,30,20,.55)}
  .neat > .in2{position:relative;border:1px solid var(--ink);padding:7px}
  .tick-h,.tick-v{position:absolute;pointer-events:none}
  .tick-h{left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 28px,transparent 28px 56px)}
  .tick-v{top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,var(--ink) 0 28px,transparent 28px 56px)}
  .film{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--ink);background:#E9DFCB}
  #world{position:absolute;inset:0;width:100%;height:100%;display:block}
  .film .vign{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(90,70,50,.32) 100%)}
  .labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .lbl{position:absolute;left:0;top:0;white-space:nowrap;font:14px/1 var(--sc);letter-spacing:.12em;color:var(--ink);opacity:0;will-change:transform,opacity;text-shadow:0 0 5px rgba(239,228,204,.95),0 0 2px rgba(239,228,204,.95)}
  .lbl.koper{font:italic 24px/1 var(--fell);letter-spacing:0}
  .cartouche{position:absolute;top:24px;left:24px;z-index:3;background:rgba(239,228,204,.94);border:1px solid var(--ink);outline:1px solid rgba(42,30,20,.5);outline-offset:4px;padding:12px 22px 10px;text-align:center;min-width:200px}
  .cartouche .sc{margin:0;font-size:13px;letter-spacing:.18em;color:var(--faded)}
  .cartouche .t{margin:0;font-family:var(--fell);font-style:italic;font-size:30px;line-height:1.15}
  .bigplay{position:absolute;left:50%;top:50%;z-index:3;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:1.5px solid var(--ink);background:rgba(239,228,204,.93);box-shadow:0 0 0 6px rgba(239,228,204,.55),0 0 0 7px rgba(42,30,20,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .4s,transform .4s}
  .bigplay:hover{transform:scale(1.04)}
  .film.playing .bigplay,.film.snap .bigplay{opacity:0;pointer-events:none;transform:scale(.9)}
  .finis{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background-color:var(--paper);background-image:radial-gradient(ellipse at 50% 45%,rgba(255,250,238,.6),transparent 60%),radial-gradient(ellipse at 15% 85%,rgba(140,106,60,.18),transparent 45%),radial-gradient(ellipse at 85% 15%,rgba(140,106,60,.14),transparent 45%)}
  .finis .lg{height:58%;width:auto;max-width:78%;object-fit:contain;transform:scale(.92);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
  .finis.shown .lg{transform:scale(1)}
  .finis .sc{margin:0;font-size:15px;color:var(--faded);letter-spacing:.06em}
  @media (max-width:760px){ .finis .lg{height:52%} .finis .sc{font-size:13px} }
  .film-load{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:var(--paper2);transition:opacity .8s;font-style:italic;color:var(--faded)}
  .film-load.done{opacity:0;pointer-events:none}
  .film-load img{height:110px;width:auto;opacity:.85;animation:sway 3s ease-in-out infinite alternate}
  @keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
  .bar{display:flex;align-items:center;gap:22px;padding:16px 18px 10px;border-top:1px solid var(--ink);margin-top:-1px;background:var(--paper)}
  .pp{flex-shrink:0;width:44px;height:44px;border:1px solid var(--ink);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:var(--ink)}
  .pp .i-pause{display:none} .pp.is-playing .i-pause{display:block} .pp.is-playing .i-play{display:none}
  .trackbox{position:relative;flex-grow:1}
  .track{position:relative;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
  .trackbox::before{content:"";position:absolute;left:6px;right:6px;top:15px;border-top:1.5px dashed rgba(42,30,20,.5)}
  .trackbox .fill{position:absolute;left:6px;right:6px;top:14px;height:3px;background:var(--ink);transform-origin:left center;transform:scaleX(0)}
  .ch{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:0;background:none;border:0;cursor:pointer;font-family:var(--sc);font-size:13px;letter-spacing:.08em;color:var(--faded)}
  .ch .dot{width:12px;height:12px;margin-top:9px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);transition:all .3s}
  .ch.done .dot{background:var(--ink)}
  .ch.on{color:var(--ink)} .ch.on .dot{width:18px;height:18px;margin-top:6px;background:var(--olive);border-color:var(--olive);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink)}
  .ch .nm{position:absolute;top:100%;white-space:nowrap;font-family:var(--body);font-style:italic;font-size:14px;letter-spacing:0;opacity:0;transition:opacity .25s;pointer-events:none}
  .ch:hover .nm,.ch:focus-visible .nm{opacity:1}
  .film-note{margin:22px 0 0;text-align:center;font-style:italic;font-size:16px;color:var(--faded)}

  .log{padding-top:100px;padding-bottom:120px}
  .log .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  .log article{padding:36px 32px 40px}
  .log article + article{border-left:1px solid rgba(42,30,20,.3)}
  .log h3{font-size:28px;line-height:1.15;margin-bottom:14px}
  .log p{margin:0;font-size:18px}


  /* ---------- I–II · the voyage: the world pinned behind folio cards, driven by scroll */
  .journey{position:relative}
  .journey::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(180px,34svh,340px);z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(233,223,203,0) 0,rgba(233,223,203,.05) 12%,rgba(233,223,203,.17) 30%,rgba(233,223,203,.42) 52%,rgba(233,223,203,.74) 75%,rgba(233,223,203,.94) 90%,#E9DFCB 100%)}
  .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#E9DFCB;z-index:0}
  .jpanels{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh}
  .stage #world{position:absolute;inset:0;width:100%;height:100%;display:block}
  .stage .vign{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(90,70,50,.3) 100%)}
  .jphoto{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;background:var(--paper)}
  .jphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:sepia(.62) saturate(.78) contrast(1.06) brightness(1.04);mix-blend-mode:multiply;will-change:transform}
  .jphoto::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(42,30,20,.10) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(239,228,204,.5) 100%)}
  .stage .cartouche{top:96px;left:auto;right:28px}
  .jrail{position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:3}
  .jrail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
  .jrail button{position:relative;display:flex;align-items:center;justify-content:flex-end;width:44px;height:30px;padding:0;border:0;background:none;cursor:pointer}
  .jrail .dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);transition:all .3s}
  .jrail .done .dot{background:var(--ink)}
  .jrail .on .dot{width:16px;height:16px;background:var(--olive);border-color:var(--olive);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink)}
  .jrail .nm{position:absolute;right:30px;white-space:nowrap;font-style:italic;font-size:15px;background:rgba(239,228,204,.95);padding:2px 10px;border:1px solid rgba(42,30,20,.3);opacity:0;transition:opacity .25s;pointer-events:none}
  .jrail button:hover .nm,.jrail button:focus-visible .nm{opacity:1}
  .jp{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:96px 48px 48px;pointer-events:none}
  .jp .card{pointer-events:auto;position:relative;max-width:520px;background-color:rgba(239,228,204,.96);background-image:radial-gradient(ellipse at 90% 10%,rgba(140,106,60,.16),transparent 50%);padding:40px 44px 36px;box-shadow:0 30px 60px -34px rgba(42,30,20,.6);outline:1px solid var(--ink);outline-offset:-10px;will-change:transform,opacity}
  .jp .card::before{content:"";position:absolute;inset:15px;border:1px solid rgba(42,30,20,.28);pointer-events:none}
  .jp .card .sc{margin:0 0 14px;font-size:14px;color:var(--faded)}
  .jp .card .hd{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  .jp .card .hd .sc{margin:0;white-space:nowrap}
  .jp .card .hd .ln{flex-grow:1;height:1px;background:var(--ink);opacity:.4}
  .jp .card .hd .hand{font-size:24px;white-space:nowrap}
  .jp .card h2{font-size:clamp(30px,3vw,40px);margin-bottom:16px}
  .jp .card p{margin:0;font-size:18px;color:var(--ink2)}
  .three3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  .three3 > div{padding:14px 8px;text-align:center}
  .three3 > div + div{border-left:1px solid rgba(42,30,20,.3)}
  .three3 .num{margin:0;font-family:var(--fell);font-style:italic;font-size:34px;line-height:1;color:var(--olive)}
  .three3 .l{margin:6px 0 0;font-family:var(--sc);font-size:14px;letter-spacing:.04em;line-height:1.25}
  @media (max-width: 480px){
    .three3{grid-template-columns:1fr}
    .three3 > div{display:flex;align-items:center;gap:16px;text-align:left;padding:10px 4px}
    .three3 > div + div{border-left:0;border-top:1px solid rgba(42,30,20,.3)}
    .three3 .num{min-width:44px;text-align:center;font-size:30px}
    .three3 .l{margin:0;font-size:15px}
  }
  .onward2{margin:0;padding:72px 0 40px}
  @media (max-width: 760px){
    .jp{align-items:flex-end;padding:90px 12px 20px}
    .jp .card{padding:26px 22px 22px;outline-offset:-7px}
    .jp .card::before{inset:11px}
    .jp .card h2{font-size:26px} .jp .card p{font-size:16px}
    .stage .cartouche{bottom:auto;top:76px;right:auto;left:12px}
    .jrail{right:4px}
    .jrail button{width:30px;height:26px}
  }

  /* ---------- III · consulting */
  .cons{padding:110px 0 0;scroll-margin-top:60px;border-top:1px solid rgba(42,30,20,.3)}
  .cons .hero2{display:flex;flex-wrap:wrap;align-items:center;gap:56px 72px;padding-bottom:84px}
  .cons .hero2 > .txt{flex:1 1 460px;max-width:590px}
  .cons .hand{font-size:30px;margin:0 0 4px}
  .cons .txt > .sc{margin:0 0 18px;font-size:15px;color:var(--faded)}
  .cons h2.title{font-size:clamp(42px,4.6vw,62px);margin-bottom:22px}
  .cons .lede{margin:0 0 30px;font-size:20px;color:var(--ink2)}
  .cons .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
  .cons .acts em{font-size:17px;color:var(--faded)}
  .sheetbox{flex:1 1 480px;max-width:600px;position:relative;padding:24px 0}
  .sheet-under{position:absolute;top:40px;left:36px;right:-12px;bottom:6px;background:var(--deep);border:1px solid rgba(42,30,20,.35);transform:rotate(3deg);box-shadow:0 20px 40px -26px rgba(42,30,20,.5)}
  .sheet{position:relative;background-color:var(--sheet);background-image:radial-gradient(ellipse at 85% 12%,rgba(140,106,60,.16),transparent 45%),radial-gradient(ellipse at 10% 92%,rgba(140,106,60,.14),transparent 40%);border:1px solid var(--ink);outline:1px solid rgba(42,30,20,.4);outline-offset:-10px;padding:34px 38px 30px;transform:rotate(-1.5deg);box-shadow:0 30px 50px -30px rgba(42,30,20,.6)}
  .sheet .t1{margin:0;text-align:center;font-family:var(--sc);font-size:30px;letter-spacing:.14em;line-height:1.1}
  .sheet .t2{margin:4px 0 16px;text-align:center;font-style:italic;font-size:16px;color:var(--faded)}
  .sheet .dbl{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);height:3px;margin-bottom:18px}
  .sheet svg{display:block;width:100%;height:auto}
  .ink-line{stroke-dasharray:1;stroke-dashoffset:1}
  .drawn .ink-line{stroke-dashoffset:0;transition:stroke-dashoffset 3.4s cubic-bezier(.45,.05,.4,1)}
  .drawn .ink-line.b{transition-delay:.9s;transition-duration:3.8s}
  .collage{position:relative;flex:1 1 480px;max-width:620px;height:660px}
  .collage .sl{position:absolute;left:3%;top:24px;width:86%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .7s;cursor:pointer;transform-origin:50% 60%}
  .collage .sl.p0{transform:none;z-index:3;cursor:default}
  .collage .sl.p1{transform:translate(17%,-4%) rotate(5deg) scale(.88);z-index:2;filter:brightness(.95) sepia(.1)}
  .collage .sl.p2{transform:translate(-9%,12%) rotate(-6deg) scale(.84);z-index:1;filter:brightness(.9) sepia(.15)}
  .collage .sheet{transform:rotate(-1.5deg)}
  .print{margin:0;transform:rotate(1deg);background-color:var(--sheet);background-image:radial-gradient(ellipse at 85% 12%,rgba(140,106,60,.14),transparent 45%);border:1px solid var(--ink);outline:1px solid rgba(42,30,20,.4);outline-offset:-9px;padding:18px 18px 14px;box-shadow:0 30px 50px -30px rgba(42,30,20,.6)}
  .print .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper);border:1px solid rgba(42,30,20,.5)}
  .print .ph img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.58) saturate(.8) contrast(1.06) brightness(1.03);transform:scale(1.08);transition:transform 7s ease-out}
  .collage .p0 .print .ph img{transform:scale(1)}
  .print .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(42,30,20,.08) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(90,70,50,.35) 100%)}
  .print figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 4px 2px}
  .print figcaption .hand{font-size:28px}
  .print figcaption .sc{font-size:13px;color:var(--faded)}
  .print.eng .ph{background:#F3EAD6}
  .print.eng .ph img{filter:sepia(.25) contrast(1.04);mix-blend-mode:multiply}
  .cal svg{display:block;width:100%;height:auto}
  .cal .mh{font-family:var(--sc);font-size:13px;fill:var(--faded)}
  .cal .on{font-family:var(--fell);font-style:italic;font-size:16px;fill:var(--ink)}
  .cal .ok{font-family:var(--body);font-size:10px;letter-spacing:.04em;fill:var(--faded)}
  .cal .bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform .9s cubic-bezier(.3,.7,.3,1)}
  .grown .cal .bar{transform:scaleX(1)}
  .cal .lg{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-style:italic;font-size:14px;color:var(--faded)}
  .cal .lg span{display:inline-block;width:30px;height:11px;border-radius:6px}
  .cal .lg .k1{background:repeating-linear-gradient(45deg,#2A1E14 0 1.4px,#E2D1AE 1.4px 3.6px);border:1px solid #2A1E14}
  .cal .lg .k2{border:1.3px dashed #55602F;margin-left:14px}
  .cdots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:10px;z-index:4}
  .cdots button{min-width:44px;height:44px;border:1px solid var(--ink);background:var(--paper);font-family:var(--fell);font-style:italic;font-size:18px;color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
  .cdots button.on{background:var(--ink);color:var(--paper)}
  .quotes{margin-top:18px;font-size:16px}
  .quotes .r{display:flex;gap:12px;padding:7px 0;border-bottom:1px dotted rgba(42,30,20,.35)}
  .quotes .r:last-child{border-bottom:0}
  .quotes .r.h{font-family:var(--sc);letter-spacing:.08em;font-size:14px;color:var(--faded);border-bottom:1px solid rgba(42,30,20,.3);padding:6px 0}
  .quotes span{flex:1 1 0} .quotes span.u{flex:0 0 92px;text-align:right}
  .sheet .illu{margin:12px 0 0;text-align:right;font-style:italic;font-size:14px;color:var(--faded)}

  .ticker{background:var(--ink);color:var(--paper);border-top:4px double var(--paper);border-bottom:4px double var(--paper);overflow:hidden;white-space:nowrap;padding:16px 0}
  .ticker .run{display:inline-flex;animation:run 70s linear infinite;font-family:var(--sc);font-size:20px;letter-spacing:.16em}
  .ticker .run span{padding-right:44px}
  .ticker .run b{font-weight:400;color:var(--olive2);padding-right:44px}
  @keyframes run{to{transform:translateX(-50%)}}

  .scope{display:flex;flex-wrap:wrap;gap:40px 80px;padding:110px 0 60px}
  .scope > div{flex:0 1 320px}
  .scope > div .sc{margin:0 0 12px;font-size:15px;color:var(--faded)}
  .scope h2{font-size:44px}
  .ledger{flex:1 1 560px;margin:0;padding:0;list-style:none;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  .ledger li{display:flex;gap:24px;padding:16px 0}
  .ledger li + li{border-top:1px solid rgba(42,30,20,.28)}
  .ledger .n{flex:0 0 44px;font-family:var(--fell);font-style:italic;font-size:24px;color:var(--olive);line-height:1.3}

  .services{padding:60px 0 40px;overflow-x:clip}   /* the wax seals start enlarged before they stamp; clip them at the screen edge so the page never widens on phones */
  .services .head h2{font-size:44px;white-space:nowrap}
  .bills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:32px}
  .bill{position:relative;background-color:var(--sheet);background-image:repeating-radial-gradient(circle at 50% 120%,rgba(85,96,47,.07) 0 1px,transparent 1px 7px);border:1px solid var(--ink);outline:3px double rgba(42,30,20,.55);outline-offset:-12px;padding:40px 36px 100px;opacity:0;transform:translateY(40px) rotate(-1.2deg);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .bill:nth-child(2){transition-delay:.15s} .bill:nth-child(3){transition-delay:.3s}
  .bills.in .bill{opacity:1;transform:none}
  .bill .meta{display:flex;justify-content:space-between;margin-bottom:18px;font-family:var(--sc);letter-spacing:.12em;font-size:15px;color:var(--faded)}
  .bill h3{font-size:32px;line-height:1.12;margin-bottom:14px}
  .bill p{margin:0;font-size:17px}
  .seal{position:absolute;right:26px;bottom:22px;width:70px;height:70px;border-radius:50%;background:#F7F0E0;box-shadow:0 3px 6px rgba(42,30,20,.3),inset 0 0 0 2px #F7F0E0,inset 0 0 0 4px var(--olive);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(1.9) rotate(-20deg);transition:opacity .25s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
  .seal img{width:50px;height:auto}
  .bills.in .seal{opacity:1;transform:none}
  .bills.in .bill:nth-child(1) .seal{transition-delay:1.1s} .bills.in .bill:nth-child(2) .seal{transition-delay:1.35s} .bills.in .bill:nth-child(3) .seal{transition-delay:1.6s}

  .fine{display:flex;flex-wrap:wrap;gap:8px 32px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:22px 0;margin-top:40px}
  .fine .sc{margin:0;font-size:15px;color:var(--faded)}
  .fine p{margin:0;flex:1 1 600px;font-size:16px;font-style:italic;color:var(--ink2)}
  .discuss{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 28px;padding:72px 0 110px}
  .discuss em{font-family:var(--fell);font-size:30px}

  /* ---------- footer */
  .foot{background:var(--ink);color:var(--paper);padding:60px 0;scroll-margin-top:60px}
  .foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px}
  .foot .brand{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .plaque{display:block;background:var(--paper);padding:10px 14px;outline:1px solid rgba(239,228,204,.5);outline-offset:4px}
  .plaque img{display:block;height:130px;width:auto}
  .foot p{margin:0;font-size:16px;color:rgba(239,228,204,.84)}
  .foot .name{font-family:var(--sc);font-size:22px;letter-spacing:.08em;color:var(--paper)}
  .foot a{color:var(--paper)}
  .foot .legal{margin-top:6px;font-size:15px}
  .foot .legal a{text-underline-offset:3px}

  .chip{position:fixed;right:16px;bottom:16px;z-index:30;background:var(--ink);color:var(--paper);font:13px/1 var(--body);padding:9px 12px;border:1px solid rgba(239,228,204,.4)}

  /* ---------- contact: a letter of enquiry */
  .discuss{padding-bottom:64px}
  .contactF{padding:24px 0 130px;scroll-margin-top:72px}
  .contactF .wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px 72px;align-items:start}
  .contactF .cl .sc{margin:0 0 12px;font-size:15px;color:var(--faded)}
  .contactF .cl h2{font-size:44px;margin-bottom:18px}
  .contactF .cl p{margin:0 0 20px;font-size:19px}
  .contactF .cl .wa{width:100%;max-width:380px}
  .contactF .cl .wa-note{margin:12px 0 28px;font-size:16px;font-style:italic;color:var(--faded)}
  .contactF .cl .mail{font-size:17px;margin:0}
  .wa-ico{width:22px;height:22px;flex-shrink:0;margin-right:10px}
  .letter{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px 26px;background-color:var(--sheet);background-image:repeating-radial-gradient(circle at 50% 120%,rgba(85,96,47,.07) 0 1px,transparent 1px 7px);border:1px solid var(--ink);outline:3px double rgba(42,30,20,.55);outline-offset:-12px;padding:46px 42px 38px}
  .letter .wide{grid-column:1/-1}
  .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
  .fld > span{font-family:var(--sc);letter-spacing:.12em;font-size:15px;color:var(--faded)}
  .fld input,.fld textarea{font:inherit;font-size:18px;line-height:1.4;color:var(--ink);background:rgba(255,255,255,.34);border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:11px 9px;width:100%;transition:background .2s,box-shadow .2s}
  .fld textarea{border:1px solid rgba(42,30,20,.6);min-height:150px;resize:vertical;line-height:1.5}
  .fld input::placeholder,.fld textarea::placeholder{color:rgba(90,70,50,.62);font-style:italic}
  .fld input:focus,.fld textarea:focus{outline:none;background:rgba(255,255,255,.58);box-shadow:0 2px 0 var(--olive)}
  .fld textarea:focus{box-shadow:0 0 0 1px var(--olive);border-color:var(--olive)}
  .fld .err{display:none;margin:0;font-size:16px;font-style:italic;color:var(--ink)}
  .fld.bad .err{display:block}
  .fld.bad input,.fld.bad textarea{border-bottom:2px solid var(--ink);background:rgba(226,209,174,.55)}
  .fld.bad textarea{border:2px solid var(--ink)}
  .fld .count{align-self:flex-end;font-family:var(--sc);letter-spacing:.1em;font-size:14px;color:var(--faded)}
  .fld .count.warn{color:var(--ink);font-weight:700}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .letter .send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
  .letter .send .btn[disabled]{opacity:.55;cursor:wait}
  .letter .status{margin:0;flex:1 1 240px;font-size:17px;font-style:italic;color:var(--ink2)}
  .letter .consent{margin:0;font-size:14.5px;font-style:italic;color:var(--faded)}
  .letter .consent a{color:inherit;text-underline-offset:3px;white-space:nowrap}
  @media (max-width: 900px){
    .contactF .wrap{grid-template-columns:1fr}
    .contactF .cl .wa{max-width:none}
  }
  @media (max-width: 560px){
    .contactF{padding-bottom:90px}
    .contactF .cl h2{font-size:34px}
    .letter{grid-template-columns:1fr;padding:36px 22px 28px;gap:20px}
    .fld input,.fld textarea{font-size:17px}
  }

  /* ---------- small screens */
  @media (max-width: 960px){
    .top{padding:10px 16px}
    .lock .m{height:44px} .lock .w{height:32px}
    .burger{display:flex}
    .tools .btn{display:none}
    .tools{gap:6px}
    .tools .lang{font-size:15px;gap:2px}
    .tools .lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 9px;border-bottom:0;position:relative}
    .tools .lang a.on::after{content:"";position:absolute;left:9px;right:9px;bottom:9px;border-bottom:1px solid currentColor}
    .tools .lang i{display:none}
    .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;background:var(--paper);color:var(--ink);border-bottom:1px solid rgba(42,30,20,.3);display:none}
    .menu a{padding:12px 0;border-bottom:1px solid rgba(42,30,20,.15);opacity:1}
    .top.open .menu{display:flex}
    .top.open{background:var(--paper);color:var(--ink)}
    .top.open .lock img{filter:none}
  }
  @media (max-width: 480px){
    .lock{gap:8px}
    .lock .m{height:38px} .lock .w{height:24px}
    .top.over .lock{padding:3px 8px 3px 4px}
    .tools .lang{font-size:14px;gap:0} .tools .lang a{padding:0 7px}
    .tools .lang a.on::after{left:7px;right:7px}
    .burger{width:40px;height:40px}
  }
  @media (max-width: 360px){
    .top{padding:8px 10px;gap:8px}
    .lock .w{height:20px}
    .tools .lang a{padding:0 5px} .tools .lang a.on::after{left:5px;right:5px}
  }
  @media (max-width: 340px){
    .top{padding:8px 8px;gap:6px}
    .lock .m{height:36px}
    .lock .w{height:17px}
    .tools .lang a{padding:0 3px} .tools .lang a.on::after{left:3px;right:3px}
    .burger{width:40px;height:40px}
  }
  @media (max-width: 760px){
    body{font-size:17px}
    .wrap{padding:0 16px}
    .hero .wrap{flex-direction:column;align-items:stretch;padding-top:90px;padding-bottom:28px;justify-content:flex-end;min-height:max(640px,100svh)}
    .folio{padding:34px 26px 28px;flex:0 0 auto}
    .folio::before{inset:12px}
    .folio .lede{font-size:18px}
    .folio .acts .btn{flex:1 1 100%}
    .compass{display:none}
    .about{padding-top:80px;padding-bottom:20px}
    .cols h2{font-size:32px}
    .cols p{font-size:18px}
    .principles .intro h2{font-size:34px}
    .three > div + div{border-left:0;border-top:1px solid rgba(42,30,20,.3)}
    .logi{padding-top:90px}
    .chart{padding:0 10px}
    .neat{padding:6px} .neat > .in2{padding:5px}
    .film{aspect-ratio:1/1}
    .lbl{font-size:10px;letter-spacing:.08em} .lbl.koper{font-size:17px}
    .cartouche{top:12px;left:12px;padding:8px 14px 6px;min-width:0}
    .cartouche .t{font-size:18px}
    .cartouche .sc{font-size:10px}
    .bigplay{width:88px;height:88px;margin:-44px 0 0 -44px}
    .bar{gap:10px;padding:12px 6px 8px}
    .ch{min-width:30px;font-size:11px}
    .log article + article{border-left:0;border-top:1px solid rgba(42,30,20,.3)}
    .log article{padding:28px 0 30px}
    .head{gap:14px}
    .head .hand{display:none}
    .services .head h2,.scope h2{font-size:34px}
    .sheet{padding:26px 20px 22px}
    .collage{height:auto;min-height:clamp(470px,128vw,600px);flex-basis:100%} .collage .sl{width:90%;left:2%} .collage .sl.p1{transform:translate(9%,-3%) rotate(4deg) scale(.9)} .collage .sl.p2{transform:translate(-4%,7%) rotate(-5deg) scale(.86)}
    .print figcaption .hand{font-size:22px}
    .sheet .t1{font-size:24px}
    .chip{right:8px;bottom:8px;font-size:11px}
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    [data-reveal]{opacity:1;transform:none}
    .rule-draw{transform:none}
    .bill,.seal{opacity:1;transform:none}
    .drawn .ink-line{transition:stroke-dashoffset 3.4s cubic-bezier(.45,.05,.4,1)!important}
    .drawn .ink-line.b{transition-delay:.9s!important}
    .collage .sl{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .7s!important}
    .cal .bar{transition:transform .9s cubic-bezier(.3,.7,.3,1)!important}
    .ticker .run{animation:run 70s linear infinite!important}
    .onward svg{animation:nudge 2.4s ease-in-out infinite!important}
  }