:root{
    --paper:#f2f0e8;
    --paper-2:#e8e4d6;
    --header-bg:#ffffff;
    --ink:#141b20;
    --steel:#0b384d;
    --steel-2:#082c3d;
    --yellow:#f37409;
    --yellow-deep:#b85a06;
    --yellow-ink:#0a1620;
    --line: rgba(11,56,77,0.16);
    --line-soft: rgba(11,56,77,0.09);
    --on-steel: #eef4f6;
    --on-steel-dim: rgba(238,244,246,0.68);
    --shadow: 0 18px 40px -20px rgba(6,20,28,0.4);
    --radius: 2px;
    --focus: #1c8fd1;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#12181c;
      --paper-2:#182025;
      --header-bg:#0c1216;
      --ink:#eef4f6;
      --steel:#081b25;
      --steel-2:#0c222d;
      --yellow:#f37409;
      --yellow-deep:#ff9a45;
      --yellow-ink:#0a1620;
      --line: rgba(238,244,246,0.16);
      --line-soft: rgba(238,244,246,0.09);
      --on-steel: #eef4f6;
      --on-steel-dim: rgba(238,244,246,0.62);
      --shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    --paper:#12181c;
    --paper-2:#182025;
    --header-bg:#0c1216;
    --ink:#eef4f6;
    --steel:#081b25;
    --steel-2:#0c222d;
    --yellow:#f37409;
    --yellow-deep:#ff9a45;
    --yellow-ink:#0a1620;
    --line: rgba(238,244,246,0.16);
    --line-soft: rgba(238,244,246,0.09);
    --on-steel: #eef4f6;
    --on-steel-dim: rgba(238,244,246,0.62);
    --shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .skip-link{
    position:absolute; left:8px; top:-48px;
    background:var(--yellow); color:var(--yellow-ink);
    padding:10px 16px; font-weight:700; z-index:200;
    transition:top .15s ease;
    border-radius:var(--radius);
  }
  .skip-link:focus{top:8px;}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px;}

  h1,h2,h3,h4{
    font-family:'Oswald',ui-sans-serif,system-ui,sans-serif;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:1.08;
    margin:0;
    text-wrap:balance;
  }
  .eyebrow{
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--yellow-deep);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px;
    background:var(--yellow-deep);
    display:inline-block;
  }
  .wrap{
    max-width:1180px;
    margin-inline:auto;
    padding-inline:24px;
  }
  section{padding-block: clamp(56px, 9vw, 108px);}

  /* ---------- Header ---------- */
  header.site{
    position:sticky; top:0; z-index:100;
    background:var(--header-bg);
    border-bottom:1px solid var(--line);
    color:var(--ink);
    box-shadow:0 2px 16px -8px rgba(11,56,77,0.12);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-block:10px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    text-decoration:none;
    color:var(--ink);
  }
  .brand-mark{
    background:#fff;
    border-radius:4px;
    padding:8px 12px;
    display:flex; align-items:center;
    line-height:0;
  }
  .brand-mark img{ height:46px; width:auto; display:block; }
  .nav-right{
    display:flex; align-items:center; gap:18px;
  }
  nav.links{
    display:flex; align-items:center; gap:32px;
  }
  nav.links a{
    text-decoration:none;
    font-size:0.92rem;
    font-weight:600;
    color:color-mix(in srgb, var(--ink) 68%, transparent);
    transition:color .15s ease;
    white-space:nowrap;
  }
  nav.links a:hover{color:var(--ink);}
  .cta-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--yellow);
    color:var(--yellow-ink) !important;
    font-weight:700;
    font-size:0.88rem;
    padding:11px 20px;
    border-radius:var(--radius);
    text-decoration:none;
    border:none;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow:0 0 0 1px rgba(0,0,0,0.05) inset;
  }
  .cta-btn:hover{ transform:translateY(-1px); background:var(--yellow-deep); }
  .cta-ghost{
    background:transparent;
    color:var(--on-steel) !important;
    border:1.5px solid rgba(236,231,218,0.4);
  }
  .cta-ghost:hover{ background:rgba(236,231,218,0.08); border-color:rgba(236,231,218,0.7); }

  .menu-toggle{
    display:none;
    background:none; border:1px solid var(--line);
    border-radius:var(--radius);
    width:42px; height:38px;
    align-items:center; justify-content:center;
    cursor:pointer;
    color:var(--ink);
  }
  .menu-toggle svg{width:20px; height:20px;}

  /* ---------- Hero ---------- */
  .hero{
    background:var(--steel);
    color:var(--on-steel);
    position:relative;
    border-bottom:6px solid var(--yellow);
  }
  .hero-photo-band{
    position:relative;
    overflow:hidden;
  }
  .hero-media{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center 62%;
    background-repeat:no-repeat;
  }
  .hero-media::after{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(100deg, rgba(8,27,37,0.97) 0%, rgba(8,27,37,0.88) 30%, rgba(9,42,58,0.55) 58%, rgba(11,56,77,0.28) 85%);
  }
  .hero-inner{
    position:relative;
    padding-block: clamp(76px, 13vw, 148px);
  }
  .hero-copy{ max-width:640px; }
  .hero .eyebrow{ color:var(--yellow); }
  .hero .eyebrow::before{ background:var(--yellow); }
  .hero h1{
    font-size:clamp(2.3rem, 4.6vw, 3.6rem);
    margin-top:16px;
    color:var(--on-steel);
    text-shadow:0 2px 24px rgba(4,12,17,0.35);
  }
  .hero h1 em{ font-style:normal; color:var(--yellow); }
  .hero p.lead{
    margin-top:20px;
    max-width:56ch;
    font-size:1.08rem;
    color:var(--on-steel-dim);
  }
  .hero-ctas{
    display:flex; flex-wrap:wrap; gap:14px;
    margin-top:32px;
  }
  .trust-strip{
    position:relative;
    border-top:1px solid rgba(236,231,218,0.14);
    background:var(--steel-2);
  }
  .trust-strip .wrap{
    display:flex; flex-wrap:wrap; gap:28px;
    padding-block:20px;
    justify-content:space-between;
  }
  .trust-item{
    display:flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono',monospace;
    font-size:0.76rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--on-steel-dim);
  }
  .trust-item svg{ width:18px; height:18px; color:var(--yellow); flex:none; }

  /* ---------- Section headers ---------- */
  .sec-head{
    max-width:62ch;
    margin-bottom:44px;
  }
  .sec-head h2{
    font-size:clamp(1.7rem, 3vw, 2.4rem);
    margin-top:14px;
  }
  .sec-head p{
    margin-top:16px;
    color:color-mix(in srgb, var(--ink) 68%, transparent);
    font-size:1.02rem;
  }

  /* ---------- About ---------- */
  .about{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:56px;
    align-items:center;
  }
  .about-copy p{ margin:0 0 16px; color:color-mix(in srgb, var(--ink) 75%, transparent); }
  .about-copy p:last-child{margin-bottom:0;}
  .about-figure{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .about-figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
  .stat-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:32px;
  }
  .stat{
    border-top:3px solid var(--yellow);
    padding-top:12px;
  }
  .stat b{
    display:block;
    font-family:'Oswald',sans-serif;
    font-size:1.5rem;
    text-transform:uppercase;
  }
  .stat span{
    font-size:0.82rem;
    color:color-mix(in srgb, var(--ink) 62%, transparent);
  }

  /* ---------- Services ---------- */
  .services{ background:var(--paper-2); border-block:1px solid var(--line-soft); }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background:var(--paper-2);
    padding:32px 28px;
    display:flex; flex-direction:column; gap:14px;
  }
  .service-card .icon{
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    background:var(--steel);
    color:var(--yellow);
    border-radius:var(--radius);
  }
  .service-card .icon svg{width:24px; height:24px;}
  .service-card h3{
    font-size:1.05rem;
    letter-spacing:0.01em;
  }
  .service-card p{
    margin:0;
    font-size:0.94rem;
    color:color-mix(in srgb, var(--ink) 66%, transparent);
  }
  .service-card .tag{
    margin-top:auto;
    font-family:'JetBrains Mono',monospace;
    font-size:0.68rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--yellow-deep);
  }

  /* ---------- Differentials ---------- */
  .diff-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 40px;
    margin-top:8px;
  }
  .diff-item{
    display:flex; gap:16px;
    padding-block:18px;
    border-top:1px solid var(--line);
  }
  .diff-item .num{
    font-family:'JetBrains Mono',monospace;
    font-size:0.85rem;
    color:var(--yellow-deep);
    font-weight:600;
    padding-top:2px;
  }
  .diff-item h4{
    font-size:1rem;
    text-transform:none;
    letter-spacing:0;
    font-family:'Inter',sans-serif;
    font-weight:700;
  }
  .diff-item p{
    margin:6px 0 0;
    font-size:0.93rem;
    color:color-mix(in srgb, var(--ink) 65%, transparent);
  }

  /* ---------- Gallery ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }
  .gallery-item{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:var(--radius);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    aspect-ratio: 4 / 3;
  }
  .gallery-item img{
    width:100%; height:100%; display:block;
    object-fit:cover;
    transition:transform .5s ease;
  }
  .gallery-item:hover img{ transform:scale(1.04); }
  .gallery-item figcaption{
    position:absolute; inset:auto 0 0 0;
    background:linear-gradient(0deg, rgba(8,20,28,0.9), transparent);
    color:#f2efe6;
    padding:30px 14px 12px;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.01em;
  }

  /* ---------- Contact ---------- */
  .contact{
    background:var(--steel);
    color:var(--on-steel);
  }
  .contact .eyebrow{ color:var(--yellow); }
  .contact .eyebrow::before{ background:var(--yellow); }
  .contact .sec-head p{ color:var(--on-steel-dim); }
  .contact-grid{
    display:grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap:56px;
  }
  .contact-info{ display:flex; flex-direction:column; gap:22px; }
  .info-row{
    display:flex; gap:14px; align-items:flex-start;
    padding-block:16px;
    border-top:1px solid rgba(236,231,218,0.14);
  }
  .info-row svg{ width:20px; height:20px; color:var(--yellow); flex:none; margin-top:2px; }
  .info-row h4{
    font-family:'Inter',sans-serif;
    font-size:0.95rem;
    font-weight:700;
    text-transform:none;
    letter-spacing:0;
    margin:0 0 4px;
  }
  .info-row p, .info-row a{
    margin:0; font-size:0.92rem;
    color:var(--on-steel-dim);
    text-decoration:none;
  }
  .info-row a:hover{ color:var(--on-steel); text-decoration:underline; }
  .info-note{
    font-size:0.82rem;
    color:color-mix(in srgb, var(--on-steel-dim) 80%, transparent);
    border:1px dashed rgba(236,231,218,0.3);
    padding:14px 16px;
    border-radius:var(--radius);
  }

  form.contact-form{
    background:var(--steel-2);
    border:1px solid rgba(236,231,218,0.14);
    border-radius:var(--radius);
    padding:32px;
    display:flex; flex-direction:column; gap:18px;
  }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field label{
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--on-steel-dim);
  }
  .field input, .field textarea{
    background:rgba(236,231,218,0.06);
    border:1px solid rgba(236,231,218,0.22);
    color:var(--on-steel);
    padding:12px 14px;
    border-radius:var(--radius);
    font-family:'Inter',sans-serif;
    font-size:0.96rem;
  }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(236,231,218,0.4); }
  .field input:focus, .field textarea:focus{
    border-color:var(--yellow);
    background:rgba(236,231,218,0.1);
  }
  .field textarea{ resize:vertical; min-height:110px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .field .error{
    font-size:0.78rem;
    color:#ff9a8a;
    min-height:1em;
  }
  .submit-row{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .form-status{
    font-size:0.86rem;
    font-weight:600;
  }
  .form-status[data-state="ok"]{ color:#8fe6a8; }
  .form-status[data-state="err"]{ color:#ff9a8a; }

  /* ---------- Footer ---------- */
  footer.site{
    background:var(--ink);
    color:var(--paper);
    padding-block:36px;
  }
  :root:not([data-theme="light"]) footer.site{ background:#0a0b0c; }
  :root[data-theme="dark"] footer.site{ background:#0a0b0c; }
  .footer-inner{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:16px;
    font-size:0.82rem;
    color:rgba(243,239,230,0.6);
  }
  .footer-inner strong{ color:var(--paper); }
  .footer-brand{ display:flex; align-items:center; gap:12px; }
  .footer-brand .brand-mark img{ height:34px; }
  .back-top{
    text-decoration:none;
    color:rgba(243,239,230,0.6);
    display:inline-flex; align-items:center; gap:6px;
    font-weight:600;
  }
  .back-top:hover{ color:var(--paper); }

  /* ---------- Social buttons ---------- */
  .social-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px;
    border-radius:50%;
    flex:none;
    transition:transform .18s ease, box-shadow .18s ease;
    box-shadow:0 0 0 1px rgba(0,0,0,0.04) inset;
  }
  .social-btn svg{ width:19px; height:19px; }
  .social-btn:hover{ transform:translateY(-1px); }
  .social-btn.instagram{
    background:radial-gradient(circle at 30% 110%, #ffdb73 0%, #fd5949 45%, #d6249f 75%, #285AEB 100%);
    color:#fff;
  }
  .social-btn.instagram svg{ fill:#fff; }

  /* WhatsApp floating button */
  .whatsapp-float{
    position:fixed;
    right:20px; bottom:20px;
    z-index:150;
    width:60px; height:60px;
    border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 28px -8px rgba(6,20,14,0.5), 0 2px 10px rgba(6,20,14,0.25);
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .whatsapp-float:hover{ transform:scale(1.07); box-shadow:0 16px 32px -8px rgba(6,20,14,0.55); }
  .whatsapp-float svg{ width:32px; height:32px; position:relative; z-index:2; fill:#fff; }
  .whatsapp-float .wa-ping{
    position:absolute; inset:0;
    border-radius:50%;
    background:#25D366;
    opacity:0.6;
    animation: wa-pulse 2.4s cubic-bezier(.36,.11,.35,1) infinite;
  }
  .whatsapp-float .wa-ping.wa-ping-2{ animation-delay:.8s; }
  @keyframes wa-pulse{
    0%{ transform:scale(1); opacity:0.55; }
    100%{ transform:scale(2); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .wa-ping{ animation:none; display:none; }
    .whatsapp-float:hover{ transform:none; }
  }
  @media (max-width:640px){
    .whatsapp-float{ right:14px; bottom:14px; width:54px; height:54px; }
    .whatsapp-float svg{ width:28px; height:28px; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 920px){
    .about{ grid-template-columns:1fr; }
    .service-grid{ grid-template-columns:repeat(2,1fr); }
    .diff-list{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width: 640px){
    nav.links{
      position:fixed; inset: 66px 0 auto 0;
      background:var(--paper);
      flex-direction:column;
      align-items:flex-start;
      padding:20px 24px 26px;
      gap:18px;
      border-bottom:1px solid var(--line);
      box-shadow:0 12px 24px -16px rgba(11,56,77,0.2);
      transform:translateY(-8px);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease, transform .18s ease;
    }
    nav.links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
    .menu-toggle{ display:flex; }
    .nav .cta-btn.desktop-only{ display:none; }
    .service-grid{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
    .stat-row{ grid-template-columns:repeat(3,1fr); gap:10px; }
    .stat b{ font-size:1.15rem; }
    .gallery-grid{ grid-template-columns:1fr; }
    .gallery-item{ aspect-ratio:16 / 10; }
    .trust-strip .wrap{ justify-content:flex-start; gap:18px 26px; }
    .hero-media{ background-position:center 70%; }
    .hero-media::after{
      background-image:
        linear-gradient(190deg, rgba(8,27,37,0.97) 0%, rgba(8,27,37,0.9) 50%, rgba(9,42,58,0.45) 100%);
    }
  }