/* ==========================================================================
   Guanxi Sourcing — engraving layer.
   Loads on top of site.css. Adds the paper surfaces, the engraved scenes
   and the scroll-driven motion. Tokens all come from site.css.
   ========================================================================== */

:root{
  --paper:var(--bone);
  --paper-2:var(--bone-2);
  --plate:#16233f;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Surfaces ----------------------------------------------------------- */
.paper,.paper-2{position:relative;isolation:isolate;background:var(--paper);color:var(--ink)}
.paper-2{background:var(--paper-2)}
.paper::after,.paper-2::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  opacity:.07;mix-blend-mode:multiply;background-image:var(--grain);
}
.paper::before,.paper-2::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 90% at 50% 34%,rgba(248,245,239,0) 55%,rgba(126,106,72,.13) 100%);
}
.paper>*,.paper-2>*{position:relative;z-index:4}
.dark::after{z-index:1}

/* Type on paper follows the ink tokens, not the navy ones */
.paper .eyebrow,.paper-2 .eyebrow{color:var(--gold-deep)}
.paper .h2,.paper-2 .h2,.paper .h3,.paper-2 .h3{color:var(--navy-800)}
.paper .lead,.paper-2 .lead{color:var(--ink-2)}
.paper .muted,.paper-2 .muted{color:var(--muted)}

/* --- Hidden plate: hatch patterns every scene draws with ---------------- */
.plate-defs{position:absolute;width:0;height:0;overflow:hidden}

/* --- Hero scene --------------------------------------------------------- */
.hero-eng{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:min(94vh,940px);display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-eng .scene{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-eng .scene svg{width:100%;height:100%;display:block}
.hero-eng__copy{position:relative;z-index:4;padding-block:clamp(96px,13vh,150px) clamp(40px,6vh,72px)}
.hero-eng .h1{color:var(--navy-800);max-width:17ch}
.hero-eng .lead{max-width:46ch;margin-top:clamp(20px,2.6vw,28px)}
.hero-eng__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,38px)}

/* Parallax handles. JS writes the pixel values; CSS owns the rest. */
.layer{transform:translate3d(var(--dx,0px),var(--dy,0px),0)}
.layer--sky{--dx:calc(var(--p,0) * -26px)}
.layer--shore{--dx:calc(var(--p,0) * -58px)}
.layer--sea{--dx:calc(var(--p,0) * -104px)}
.layer--surf{--dx:calc(var(--p,0) * -136px)}
.layer--ship{--dx:calc(var(--p,0) * -104px);--dy:calc(var(--p,0) * 10px)}
.ship-bob{transform-origin:50% 92%;animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.45deg)}50%{transform:translateY(-6px) rotate(.45deg)}}

/* --- Trust row on paper ------------------------------------------------- */
.trust-eng{position:relative;z-index:4;border-top:1px solid rgba(18,25,38,.22)}
.trust-eng__row{display:grid;grid-template-columns:1fr}
@media (min-width:720px){.trust-eng__row{grid-template-columns:repeat(3,1fr)}}
.trust-eng__item{display:flex;align-items:baseline;gap:14px;padding:clamp(20px,2.6vw,28px) 0}
@media (min-width:720px){
  .trust-eng__item+.trust-eng__item{border-left:1px solid rgba(18,25,38,.16);padding-left:clamp(20px,3vw,40px)}
}
@media (max-width:719px){.trust-eng__item+.trust-eng__item{border-top:1px solid rgba(18,25,38,.16)}}
.trust-eng__n{
  font-family:var(--serif);font-size:clamp(2.2rem,5vw,2.9rem);line-height:1;color:var(--gold-deep);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;flex:none;
}
.trust-eng__t{font-size:.94rem;line-height:1.38;color:var(--ink-2)}

/* --- The chop ----------------------------------------------------------- */
.chop{display:block;transform:rotate(-7deg) scale(1.1);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .35s ease}
.chop.is-stamped{transform:rotate(-7deg) scale(1);opacity:1}
.chop--hero{position:absolute;z-index:4;width:clamp(78px,9vw,116px);height:auto}
@media (max-width:760px){.chop--hero{width:74px}}

/* --- Engraved vignettes and the draw-on --------------------------------- */
.vign{display:block;flex:none}
[data-ink] path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.05s cubic-bezier(.3,.7,.3,1)}
[data-ink].is-inked path{stroke-dashoffset:0}
[data-ink] path:nth-child(2){transition-delay:.09s}
[data-ink] path:nth-child(3){transition-delay:.18s}
[data-late]{opacity:0;transition:opacity .4s ease .55s}
[data-late].is-inked{opacity:1}

/* --- Steps with vignettes ----------------------------------------------- */
.step-eng{
  display:grid;grid-template-columns:1fr;gap:14px;
  padding:clamp(24px,3.2vw,34px) 0;border-bottom:1px solid rgba(18,25,38,.16);
}
@media (min-width:700px){
  .step-eng{grid-template-columns:152px 46px minmax(0,1fr);gap:26px;align-items:start}
}
.step-eng:last-child{border-bottom:0}
.step-eng__n{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.step-eng h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.2;color:var(--navy-800)}
.step-eng p{margin-top:10px;font-size:.97rem;line-height:1.6;color:var(--ink-2)}
@media (max-width:699px){
  .step-eng__head{display:flex;align-items:baseline;gap:14px}
  .step-eng .vign{margin-bottom:4px}
}

/* --- Cards with gold engraving on navy ---------------------------------- */
.card-eng{
  border:1px solid rgba(200,160,90,.3);padding:clamp(22px,2.6vw,28px);
  transition:border-color .25s ease,background-color .25s ease;
}
.card-eng:hover{border-color:rgba(200,160,90,.55);background:rgba(200,160,90,.04)}
.card-eng h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.15;color:var(--white);margin-top:20px}
.card-eng p{margin-top:12px;font-size:.94rem;line-height:1.62;color:var(--on-navy)}

/* --- Founder plate ------------------------------------------------------ */
.plateframe{position:relative;width:100%}
.plateframe svg{display:block;width:100%;height:auto}
.plateframe__slot{
  position:absolute;left:7.5%;right:7.5%;top:6.5%;bottom:6.5%;
  display:grid;place-items:center;text-align:center;
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
}

/* --- Pricing on navy ---------------------------------------------------- */
.dark .price thead th{color:var(--on-navy-dim);border-bottom-color:var(--line-dark)}
.dark .price tbody tr{border-bottom-color:var(--line-dark-2)}
.dark .price tbody tr:hover{background:rgba(255,255,255,.03)}
.dark .price__name{color:var(--white)}
.dark .price__fee{color:var(--gold-soft)}
.dark .price__fee em{color:var(--gold)}
.dark .price__what{color:var(--on-navy)}
.dark .price tr.is-free .price__name{color:var(--gold)}
.dark .price__foot{color:var(--on-navy-dim);border-top-color:var(--line-dark-2)}
.dark .price-wrap{border-top-color:var(--line-dark)}
@media (max-width:800px){.dark .price tbody tr{border-bottom-color:var(--line-dark-2)}}

/* --- Closing scene ------------------------------------------------------ */
.final-eng{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-950)}
.final-eng .scene{position:absolute;left:0;right:0;bottom:0;height:clamp(220px,32vh,320px);z-index:1;pointer-events:none}
.final-eng .scene svg{width:100%;height:100%;display:block}
.final-eng .wrap{position:relative;z-index:4}
.final-eng .chop{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(36px,6vh,64px);z-index:4;width:clamp(64px,7vw,92px)}

/* --- Photo placeholders keep the engraved frame language ---------------- */
.paper .photo__frame,.paper-2 .photo__frame{
  background:
    repeating-linear-gradient(135deg,rgba(18,25,38,.05) 0 1px,transparent 1px 9px),
    linear-gradient(160deg,#e7e1d4,#d9d2c2);
  border-color:rgba(18,25,38,.18);
}
.paper .photo__tag,.paper-2 .photo__tag{color:var(--gold-deep)}

/* --- Motion off --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .layer{transform:none!important}
  .ship-bob{animation:none}
  .chop{opacity:1;transform:rotate(-7deg);transition:none}
  [data-ink] path{stroke-dashoffset:0;transition:none}
  [data-late]{opacity:1;transition:none}
}

/* --- Buttons that sit on paper ------------------------------------------ */
.btn--paper{background:var(--paper);border-color:rgba(18,25,38,.3);color:var(--navy-800)}
.btn--paper:hover{border-color:var(--navy-800);background:var(--navy-800);color:var(--paper)}
.paper .btn--ink,.paper-2 .btn--ink{background:var(--navy-800);border-color:var(--navy-800);color:var(--paper)}
.paper .btn--ink:hover,.paper-2 .btn--ink:hover{background:var(--navy-900);border-color:var(--navy-900)}
.paper .btn--ink .btn__arrow,.paper-2 .btn--ink .btn__arrow{color:var(--gold)}

/* Agency cards flip to paper in section 08 */
.card--paper{border-color:rgba(18,25,38,.22);background:transparent}
.card--paper:hover{background:rgba(18,25,38,.03);border-color:rgba(18,25,38,.4);transform:none}
.card--paper::before{background:var(--gold-deep)}
.card--paper h3{color:var(--navy-800)}
.card--paper p{color:var(--ink-2)}
.paper-2 .card__price,.paper .card__price{color:var(--gold-deep)}
.paper-2 .agency__head .lead{color:var(--ink-2)}

/* --- Hero: copy at the top, trust row pinned to the foot ---------------- */
.hero-eng{justify-content:flex-start}
.hero-eng .trust-eng{margin-top:auto}
.chop--hero{right:clamp(18px,6vw,90px);bottom:clamp(132px,18vh,196px)}
@media (max-width:760px){.chop--hero{bottom:auto;top:clamp(70px,11vh,110px)}}

/* --- Steps: hold the measure ------------------------------------------- */
.step-eng p{max-width:62ch}
.step-eng h3{max-width:26ch}

/* --- Sections lifted from the light page, re-inked for navy ------------- */
.dark .rule-note{background:rgba(255,255,255,.05);border-left-color:var(--gold);color:var(--on-navy)}
.dark .btn--ink{background:var(--gold);border-color:var(--gold);color:var(--navy-800)}
.dark .btn--ink:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--navy-800)}
.dark .offer .lead{color:var(--on-navy)}
.dark .offer .body-p{color:var(--on-navy)}

/* --- Closing scene needs room under the copy ---------------------------- */
.final-eng{padding-bottom:clamp(300px,42vh,430px)}
.final-eng .final__note{margin-bottom:0}

/* The ship sits to the right of the copy column, not under it */
.layer--ship{--dx:calc(252px + var(--p,0) * -104px);--dy:calc(56px + var(--p,0) * 14px)}
@media (max-width:900px){.layer--ship{--dx:calc(40px + var(--p,0) * -70px)}}

/* --- Phone: the scene stops being a backdrop and becomes a band --------- */
@media (max-width:760px){
  .hero-eng{min-height:0}
  .hero-eng__copy{order:1;padding-block:clamp(52px,9vh,84px) clamp(28px,4vh,40px)}
  .hero-eng .scene{position:static;order:2;height:clamp(190px,30vh,260px)}
  .hero-eng .trust-eng{order:3;margin-top:0}
  .chop--hero{top:clamp(62px,9vh,96px);right:clamp(16px,5vw,28px)}
}

/* --- Phone: number sits beside the step title, not under the vignette --- */
@media (max-width:699px){
  .step-eng{grid-template-columns:auto minmax(0,1fr);gap:4px 16px}
  .step-eng .vign{grid-column:1 / -1;margin-bottom:12px}
  .step-eng__n{grid-column:1;grid-row:2;font-size:1.7rem}
  .step-eng>div{grid-column:2;grid-row:2}
}

/* Closing band keeps a wide aspect so the slice crop stays shallow */
.final-eng .scene{height:clamp(220px,24vw,400px)}