:root{--navy:#34363a;--navy2:#46494e;--gold:#ffd100;--ink:#1c2a35;--muted:#8a97a1;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost','Helvetica Neue',Arial,sans-serif}
  *{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;font-weight:300}
  a{text-decoration:none;color:inherit}.serif-h{font-family:var(--serif);font-weight:500;line-height:1.1}
  .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#b99400;margin-bottom:16px}

  /* NAV */
  header{position:fixed;top:0;left:0;right:0;z-index:60;transition:.4s;background:linear-gradient(180deg,rgba(52,54,58,.92),rgba(52,54,58,.5) 45%,rgba(52,54,58,0))}
  .nav{display:flex;align-items:center;justify-content:center;gap:40px;padding:22px 44px;position:relative}
  .nav .left,.nav .right{display:flex;align-items:center;gap:34px;flex:1 1 0;min-width:0}
  /* Os dois lados ocupam metade cada, e o conteúdo de cada um encosta na
     logo: é o que deixa os links agrupados no meio E a logo no centro
     exato. Só centralizar o conjunto (justify-content:center no .nav)
     empurrava a logo 85px para o lado do bloco menor. */
  .nav .left{justify-content:flex-end}
  .nav .right{justify-content:flex-start}
  .nav a.link{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:400;position:relative;padding:6px 0}
  .nav a.link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:.35s}
  .nav a.link:hover::after,.nav a.link.active::after{width:100%}
  .nav .logo img{height:60px;display:block;transition:.4s}
  .nav .search{position:absolute;right:44px;top:50%;transform:translateY(-50%);color:#fff;font-size:19px;opacity:.85}
  header.scrolled{background:var(--navy);box-shadow:0 6px 30px rgba(0,0,0,.28)}
  header.scrolled .nav{padding:12px 44px}header.scrolled .nav .logo img{height:44px}

  /* TÍTULO */
  .pagehead{background:var(--navy);color:#fff;padding:170px 44px 60px;text-align:center}
  .pagehead h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5vw,64px)}
  .pagehead .rule{width:56px;height:2px;background:var(--gold);margin:20px auto 0}

  /* CONTEÚDO */
  .work{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;max-width:1180px;margin:0 auto;padding:100px 44px}
  .winfo h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:18px}
  .winfo p{color:#42505c;font-size:16px;line-height:1.85;margin-bottom:20px}
  .wvalue{border-left:2px solid var(--gold);padding:6px 0 6px 18px;margin:26px 0}
  .wvalue b{display:block;font-family:var(--serif);font-size:20px;color:var(--ink)}
  .wvalue span{font-size:14.5px;color:#5a6672}
  .wnote{background:#f7f8f9;border:1px solid #eef1f3;padding:22px 24px;margin-top:30px;font-size:14.5px;line-height:1.7;color:#42505c}
  .wnote b{color:var(--ink);font-weight:500}
  .wnote a{color:var(--navy);border-bottom:1px solid var(--gold)}

  .wform{background:#f7f8f9;padding:44px 40px;align-self:start}
  .wform h3{font-family:var(--serif);font-size:26px;font-weight:500;margin-bottom:24px}
  .wform .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .wform .full{grid-column:1 / -1}
  .wform input,.wform textarea,.wform select{width:100%;border:1px solid #dde3e7;background:#fff;padding:15px 16px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;transition:.3s}
  .wform input:focus,.wform textarea:focus{border-color:var(--navy)}
  .wform textarea{min-height:120px;resize:vertical}
  .wform button{grid-column:1 / -1;background:var(--navy);color:#fff;border:0;padding:16px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:.3s}
  .wform button:hover{background:var(--gold);color:var(--navy)}

  /* NEWSLETTER / FOOTER / CALLBAR */
  .newsletter{background:var(--navy2);color:#fff;text-align:center;padding:72px 44px}
  .newsletter h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);font-weight:600;margin-bottom:10px}
  .newsletter p{font-size:15px;margin-bottom:28px;color:rgba(255,255,255,.72)}
  .newsletter form{display:inline-flex;max-width:520px;width:100%;border:1px solid rgba(255,255,255,.4)}
  .newsletter input{flex:1;border:0;background:transparent;padding:16px 20px;font-size:15px;font-family:var(--sans);color:#fff;outline:none}
  .newsletter input::placeholder{color:rgba(255,255,255,.5)}
  .newsletter button{background:var(--gold);color:var(--navy);border:0;padding:0 34px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(52,54,58,.92);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);text-align:center;padding:15px 20px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
  .callbar b{color:#fff;font-weight:500}.callbar a{color:var(--gold)}
  footer{background:#26282b;color:rgba(255,255,255,.6);padding:60px 44px 100px;font-size:13px}
  .foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:26px;margin-bottom:22px}
  .foot-top img{height:56px}.foot-top nav a{margin-left:26px;color:rgba(255,255,255,.72);letter-spacing:.12em;text-transform:uppercase;font-size:12px}
  footer .copy{text-align:center}

  @media(max-width:860px){
    .nav{gap:0}   /* a logo fica centralizada pelo justify-content:center da regra base */.nav .left,.nav .right{display:none}
    .work{grid-template-columns:1fr;gap:44px;padding:60px 22px}.wform .grid{grid-template-columns:1fr}
    .pagehead{padding:150px 22px 48px}
  }