/* ==========================================================================
   SUCCESS - Servicos de Apoio a Empresas Ltda.
   Folha de estilo unica do site institucional.
   Tipografia da marca: Playfair Display (equivalente web da Century).
   ========================================================================== */
:root {
    --ink:      #0B1B2B;
    --slate:    #44546A;
    --slate-dp: #2E3B4E;
    --steel:    #6F7F98;
    --mist:     #E4E9F0;
    --paper:    #F5F6F8;
    --surface:  #FFFFFF;
    --ember:    #B85E27;

    --fg:        var(--ink);
    --fg-soft:   #4C5B6E;
    --fg-mute:   #78889C;
    --ground:    var(--paper);
    --card:      var(--surface);
    --line:      #D3DAE4;
    --card-line: #E1E7EF;
    --shadow-1:  rgba(11,27,43,.07);
    --shadow-2:  rgba(11,27,43,.26);
    --shadow-3:  rgba(11,27,43,.36);
    --accent:    var(--ember);
    --geo-op:    1;
    --geo-blend: normal;

    /* marca — equivalente web da Century usada na apresentação */
    --f-brand:   "Playfair Display", "Century Schoolbook", Century, Georgia, "Times New Roman", serif;
    --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --f-body:    "Newsreader", Georgia, "Times New Roman", serif;

    --edge: clamp(1.5rem, 6vw, 7rem);

    /* imagens (caminhos relativos a assets/css/) */
    --city: url("../img/hero-cidade.jpg");
    --geo:  url("../img/formas-1.jpg");
    --geo2: url("../img/formas-2.jpg");
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fg:        #E7ECF3;
      --fg-soft:   #B4C0D0;
      --fg-mute:   #8494A8;
      --ground:    #0A1622;
      --card:      #10202F;
      --line:      #24384C;
      --card-line: #22384C;
      --shadow-1:  rgba(0,0,0,.35);
      --shadow-2:  rgba(0,0,0,.55);
      --shadow-3:  rgba(0,0,0,.7);
      --accent:    #E9873F;
      --geo-op:    .3;
      --geo-blend: luminosity;
    }
  }

  :root[data-theme="dark"] {
    --fg:        #E7ECF3;
    --fg-soft:   #B4C0D0;
    --fg-mute:   #8494A8;
    --ground:    #0A1622;
    --card:      #10202F;
    --line:      #24384C;
    --card-line: #22384C;
    --shadow-1:  rgba(0,0,0,.35);
    --shadow-2:  rgba(0,0,0,.55);
    --shadow-3:  rgba(0,0,0,.7);
    --accent:    #E9873F;
    --geo-op:    .3;
    --geo-blend: luminosity;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--fg);
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  a { color: inherit; }

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

  .label {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  /* ---------- HERO ---------- */

  .hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #08131E;
    isolation: isolate;
  }

  .hero__photo {
    position: absolute;
    inset: 0;
    background-image: var(--city);
    background-size: cover;
    background-position: 62% 50%;
    z-index: -3;
    transform: scale(1.04);
    animation: drift 26s ease-in-out infinite alternate;
  }

  @keyframes drift {
    from { transform: scale(1.04) translate3d(0,0,0); }
    to   { transform: scale(1.10) translate3d(-1.2%, -0.8%, 0); }
  }

  /* the diagonal panel — the deck's signature cut */
  .hero__panel {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(105deg, var(--slate-dp) 0%, var(--slate) 68%, #4E5F78 100%);
    clip-path: polygon(0 0, 74% 0, 30% 100%, 0 100%);
  }

  /* softening scrim so the date + photo edge never fight the type */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, rgba(6,15,24,.72) 0%, rgba(6,15,24,0) 42%),
      linear-gradient(to right, rgba(6,15,24,.35) 0%, rgba(6,15,24,0) 45%);
  }

  .hero__inner {
    position: relative;
    width: 100%;
    padding: clamp(5rem, 12vh, 9rem) var(--edge) clamp(6.5rem, 14vh, 9rem);
    max-width: 1500px;
    margin-inline: auto;
  }

  .hero__block { max-width: 30ch; }

  .wordmark {
    font-family: var(--f-brand);
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    font-size: clamp(3rem, 8vw, 6.6rem);
    line-height: 1;
    letter-spacing: .015em;
    margin: 0 -0.015em 0 0;   /* claw back the trailing tracked space */
    text-wrap: nowrap;
  }

  .hero__rule {
    width: 68px;
    height: 3px;
    background: var(--ember);
    margin: clamp(1.6rem, 4vh, 2.6rem) 0 clamp(1.2rem, 3vh, 1.8rem);
    transform-origin: left center;
  }

  .hero__tagline {
    font-family: var(--f-body);
    font-weight: 300;
    color: #E9EDF3;
    font-size: clamp(1.08rem, 2.15vw, 1.62rem);
    line-height: 1.42;
    max-width: 30ch;
    margin: 0;
    text-wrap: balance;
  }

  .hero__foot {
    position: absolute;
    left: var(--edge);
    right: var(--edge);
    bottom: clamp(1.75rem, 4.5vh, 3rem);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1500px;
    margin-inline: auto;
  }

  .cue {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    transition: color .25s ease;
  }
  .cue:hover { color: var(--ember); }
  .cue__arrow {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    animation: nudge 2.6s ease-in-out infinite;
  }
  .cue:hover .cue__arrow { border-color: var(--ember); }
  @keyframes nudge {
    0%, 62%, 100% { transform: translateY(0); }
    76%           { transform: translateY(4px); }
  }

  /* ---------- CONTACT ---------- */

  .contact {
    position: relative;
    background: var(--ground);
    padding: clamp(4.5rem, 12vh, 9rem) var(--edge) clamp(3rem, 7vh, 5rem);
    overflow: hidden;
  }

  .contact__geo {
    position: absolute;
    top: 0;
    right: 0;
    width: min(42%, 580px);
    height: 100%;
    background-image: var(--geo);
    background-size: cover;
    background-position: center;
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
    opacity: var(--geo-op);
    mix-blend-mode: var(--geo-blend);
    -webkit-mask-image: linear-gradient(100deg, transparent 4%, #000 46%);
    mask-image: linear-gradient(100deg, transparent 4%, #000 46%);
    pointer-events: none;
  }

  /* second geometric plate, mirrored low-left, quiet */
  .contact__geo2 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(24%, 300px);
    aspect-ratio: 1;
    background-image: var(--geo2);
    background-size: cover;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    opacity: calc(var(--geo-op) * .55);
    mix-blend-mode: var(--geo-blend);
    pointer-events: none;
  }

  .contact__inner {
    position: relative;
    max-width: 1500px;
    margin-inline: auto;
  }

  .contact__head { max-width: 46ch; }

  .eyebrow {
    color: var(--fg-mute);
    margin: 0 0 1.1rem;
  }

  .contact__title {
    font-family: var(--f-brand);
    font-weight: 600;
    font-size: clamp(2.5rem, 6.8vw, 4.8rem);
    line-height: 1;
    letter-spacing: -.005em;
    margin: 0;
    color: var(--fg);
  }

  .contact__lede {
    margin: 1.4rem 0 0;
    color: var(--fg-soft);
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    max-width: 38ch;
  }

  .primary-mail {
    display: inline-block;
    margin-top: clamp(2rem, 5vh, 3rem);
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(.95rem, 2.1vw, 1.5rem);
    letter-spacing: -.01em;
    color: var(--fg);
    text-decoration: none;
    border-bottom: 2px solid var(--accent);
    padding-bottom: .18em;
    transition: color .22s ease;
    white-space: nowrap;
  }
  .primary-mail:hover { color: var(--accent); }

  .people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: clamp(2.75rem, 7vh, 4.5rem);
    max-width: 860px;
  }

  .person {
    background: var(--card);
    padding: clamp(1.4rem, 3vw, 1.9rem);
    /* the deck's cut corner, echoed small */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    box-shadow: inset 0 0 0 1px var(--card-line), 0 1px 2px var(--shadow-1), 0 10px 30px -14px var(--shadow-2);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  }
  .person:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--card-line), 0 1px 2px var(--shadow-1), 0 18px 42px -16px var(--shadow-3);
  }

  .person__name {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.16rem;
    letter-spacing: -.01em;
    margin: 0 0 .2rem;
    color: var(--fg);
  }

  .person__role {
    color: var(--fg-mute);
    margin: 0 0 1.15rem;
  }

  .person__links {
    display: flex;
    flex-direction: column;
    gap: .55rem;
  }

  .person__links a {
    font-family: var(--f-display);
    font-size: .93rem;
    font-weight: 400;
    color: var(--fg-soft);
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    overflow-wrap: anywhere;
    transition: color .2s ease;
  }
  .person__links a:hover { color: var(--accent); }
  .person__links .k {
    flex: none;
    width: 1.1em;
    color: var(--fg-mute);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .tel { font-variant-numeric: tabular-nums; }

  footer {
    position: relative;
    max-width: 1500px;
    margin: clamp(3.5rem, 9vh, 6rem) auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2rem;
    justify-content: space-between;
    color: var(--fg-mute);
    font-size: .92rem;
  }

  /* ---------- responsive ---------- */

  @media (max-width: 860px) {
    .hero__panel {
      clip-path: polygon(0 34%, 100% 12%, 100% 100%, 0 100%);
      background: linear-gradient(172deg, rgba(40,52,70,.22) 0%, rgba(52,66,86,.80) 52%, #333F55 100%);
    }
    .hero { align-items: flex-end; }
    .hero__inner { padding-bottom: clamp(7.5rem, 20vh, 10rem); }
    .hero__block { max-width: none; }
    .wordmark { text-wrap: wrap; }
    .contact__geo {
      width: 100%;
      height: 38%;
      top: auto;
      bottom: 0;
      clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 100%);
      opacity: calc(var(--geo-op) * .3);
    }
    .contact__geo2 { display: none; }
    .contact { padding-bottom: clamp(4rem, 12vh, 7rem); }
  }

  @media (max-width: 400px) {
    .wordmark { letter-spacing: .08em; margin-right: -0.08em; }
  }

  /* ---------- reveal ---------- */

  .r { opacity: 0; transform: translateY(18px); }
  .in { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
  .hero__rule.r { transform: scaleX(0); }
  .hero__rule.in { transform: scaleX(1); transition: transform .8s cubic-bezier(.2,.7,.3,1); }

  @media (prefers-reduced-motion: reduce) {
    .r { opacity: 1; transform: none; }
    .hero__rule.r { transform: none; }
    .hero__photo, .cue__arrow { animation: none; }
    * { transition-duration: .01ms !important; }
  }