@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Archivo:wght@500;600&display=swap');

  :root{
    --ink:#000000;
    --paper:#ffffff;
    --grey-line:#e4e4e2;
    --grey-text:#5c5c58;
    --grey-mute:#8c8c87;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter', sans-serif;
    color:var(--ink);
    background:#f4f4f2;
  }

  /* intro */
  #intro{
    position:fixed; inset:0; background:var(--ink);
    display:flex; align-items:center; justify-content:center;
    z-index:50;
  }
  #logo-wrap{ text-align:center; opacity:0; transform:translateY(-300px);}
  #logo-wrap .logo-svg{ width:225px; height:225px; display:block; margin:0 auto 16px; color:#fff; }
  #logo-wrap .word{ font-family:'Archivo', sans-serif; font-weight:600; font-size:20px; letter-spacing:6px; color:#fff;}
  #logo-wrap .sub{ font-size:10px; letter-spacing:3px; color:#999; margin-top:6px;}

  #site{ opacity:0; }

  header{
    background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 48px;
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand a{ display:flex; }
  .brand .logo-svg{ width:195px; height:195px; color:#fff; display:block; }
  .brand span{ font-family:'Archivo', sans-serif; font-weight:600; font-size:14px; letter-spacing:3px; }
  .nav-group{ display:flex; align-items:center; gap:36px; }
  nav{ display:flex; gap:56px; font-size:18px; color:#ccc; }
  nav a{ color:inherit; text-decoration:none; }
  nav a:hover{ color:#fff; }
  .social{ display:flex; align-items:center; gap:14px; }
  .social a{ color:#ccc; display:flex; }
  .social a:hover{ color:#fff; }
  .social svg{ width:27px; height:27px; }
  .cta-btn{
    background:#fff; color:var(--ink); border:none;
    padding:9px 20px; font-size:12px; letter-spacing:0.5px;
    border-radius:2px; font-weight:600; cursor:pointer;
  }

  .hero{
    background:var(--paper);
    text-align:center;
    padding:80px 32px 56px;
  }
  .eyebrow{ font-size:11px; letter-spacing:3px; color:var(--grey-mute); margin-bottom:18px; }
  h1{
    font-family:'Archivo', sans-serif; font-weight:600;
    font-size:42px; line-height:1.15; letter-spacing:-0.5px;
    max-width:680px; margin:0 auto 18px;
  }
  .hero p{ font-size:15px; color:var(--grey-text); max-width:460px; margin:0 auto 30px; line-height:1.7;}
  .hero-actions{ display:flex; gap:12px; justify-content:center; }
  .btn-dark{ background:var(--ink); color:#fff; border:none; padding:13px 26px; font-size:13px; border-radius:2px; letter-spacing:0.3px; cursor:pointer;}
  .btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); padding:13px 26px; font-size:13px; border-radius:2px; letter-spacing:0.3px; cursor:pointer;}
  /* stats strip */
  .stats{
    background:#fff; border-top:1px solid var(--grey-line);
    display:grid; grid-template-columns:repeat(5,1fr);
    width:100%; margin:0 auto;
  }
  .stats .stat{
    text-align:center; padding:28px 16px;
    border-right:1px solid var(--grey-line);
  }
  .stats .stat:last-child{ border-right:none; }
  .stats .stat .num{
    font-family:'Archivo', sans-serif; font-weight:600;
    font-size:26px; color:var(--ink); letter-spacing:-0.5px;
  }
  .stats .stat .label{
    font-size:11px; letter-spacing:1.2px; color:var(--grey-text);
    text-transform:uppercase; margin-top:4px;
  }


  .gallery{
    display:grid; grid-template-columns:1fr 1fr 1fr;
    gap:2px; background:var(--ink);
  }
  .gallery .tile{ position:relative; overflow:hidden; height:380px; }
  .gallery .tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 600ms ease; }
  .gallery .tile:hover img{ transform:scale(1.04); }
  .tile .label{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(transparent, rgba(0,0,0,0.75));
    padding:18px; color:#fff;
  }
  .tile .label .tag{ font-size:10px; letter-spacing:2px; color:#bbb; display:block; margin-bottom:3px;}
  .tile .label .title{ font-size:14px; font-weight:600; font-family:'Archivo', sans-serif; }

  .feature-slider{ position:relative; height:380px; background:var(--ink); overflow:hidden; }
  .feature-slider .fs-viewport{ position:relative; width:100%; height:100%; overflow:hidden; touch-action:pan-y; }
  .feature-slider .fs-track{
    display:flex; height:100%;
    width:calc(1300% / 3);
    animation:fs-scroll 26.7s linear infinite;
    will-change:transform;
    cursor:grab;
    user-select:none;
  }
  .feature-slider .fs-track.dragging{
    cursor:grabbing;
  }
  @keyframes fs-scroll{
    from{ transform:translateX(0%); }
    to{ transform:translateX(calc(-1000% / 13)); }
  }
  .feature-slider .fs-slide{
    flex:0 0 calc(100% / 13);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    border-right:1px solid rgba(255,255,255,0.08);
    box-sizing:border-box;
    position:relative; overflow:hidden;
    text-decoration:none;
    -webkit-user-drag:none;
  }
  .feature-slider .fs-slide.has-photo{
    background-size:cover; background-position:center;
  }
  .feature-slider .fs-slide.has-photo::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.8) 100%);
  }
  .feature-slider .fs-slide svg, .feature-slider .fs-title{ position:relative; z-index:1; }
  .feature-slider .fs-slide svg{ width:48px; height:48px; }
  .feature-slider .fs-title{
    color:#fff; font-family:'Archivo', sans-serif; font-weight:600;
    font-size:17px; letter-spacing:0.3px; text-align:center; padding:0 20px;
  }

  .sectors{
    background:var(--paper);
    display:grid; grid-template-columns:repeat(3,1fr);
    padding:56px 48px;
  }
  .sectors .col{ text-align:center; padding:0 20px; }
  .sectors .col:not(:last-child){ border-right:1px solid var(--grey-line); }
  .sectors .col svg{ width:26px; height:26px; margin-bottom:14px; }
  .sectors .col .t{ font-family:'Archivo', sans-serif; font-weight:600; font-size:14px; margin-bottom:6px; }
  .sectors .col .d{ font-size:12.5px; color:var(--grey-text); line-height:1.6; }

  .services-strip{
    background:#f0efe9; padding:56px 48px;
  }
  .services-strip .head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:32px; max-width:1200px; margin-left:auto; margin-right:auto;}
  .services-strip h2{ font-family:'Archivo', sans-serif; font-weight:600; font-size:22px; }
  .services-strip .sub{ font-size:13px; color:var(--grey-text); margin-top:6px; max-width:420px; }
  .services-strip .more{ font-size:12px; color:var(--grey-text); text-decoration:none; }
  .services-strip .more:hover{ color:var(--ink); }
  .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--grey-line); max-width:1100px; margin:0 auto; }
  .service-grid .item{
    display:block; text-decoration:none; position:relative;
    background:#fff; padding:24px 22px; font-size:14px; font-weight:600;
    font-family:'Archivo', sans-serif; color:var(--ink); line-height:1.4;
    transition:background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  }
  .service-grid .item:hover{
    background:#fafaf8; transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.08); z-index:1;
  }
  .service-grid .item span{
    display:block; font-size:12.5px; font-weight:400; color:var(--grey-text);
    font-family:'Inter', sans-serif; margin-top:8px; line-height:1.6;
  }

  /* trust / credentials */
  .trust{ background:var(--paper); padding:40px 48px; border-top:1px solid var(--grey-line); }
  .trust-inner{ max-width:900px; margin:0 auto; }
  .trust-list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
  .trust-list li{
    position:relative; padding-left:22px; font-size:13.5px; color:var(--grey-text); line-height:1.6;
  }
  .trust-list li::before{
    content:''; position:absolute; left:0; top:7px; width:6px; height:6px;
    border-radius:50%; background:var(--ink);
  }
  /* accreditation badges */
  .badge-strip{
    background:var(--paper); border-top:1px solid var(--grey-line);
    padding:40px 32px;
    display:flex; align-items:center; justify-content:center;
    gap:25vw;
  }
  .badge-strip.badge-strip-right{ justify-content:flex-end; gap:0; }
  .badge-chip{
    background:var(--ink); border-radius:6px;
    padding:18px 26px;
    display:flex; align-items:center; justify-content:center;
  }
  .badge-chip img{ display:block; height:88px; width:auto; }
  .badge-plain{ display:block; height:120px; width:auto; }

  .service-tile{ position:relative; background:#fff; aspect-ratio:1/0.85; overflow:hidden; }
  .service-tile.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .service-tile .overlay{ position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(0,0,0,0.78)); display:flex; flex-direction:column; justify-content:flex-end; padding:14px; }
  .service-tile.icon .overlay{ background:none; position:static; inset:auto; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:14px; }
  .service-tile.icon{ background:#fff; }
  .service-tile.icon svg{ width:26px; height:26px; margin-bottom:10px; }
  .service-tile .t{ color:#fff; font-size:12.5px; font-weight:600; font-family:'Archivo', sans-serif; }
  .service-tile.icon .t{ color:#0a0a0a; text-align:center; }

  /* sliding banner */
  .slider{ position:relative; overflow:hidden; height:460px; background:var(--ink); }
  .slider .slides{ display:flex; height:100%; width:300%; transition:transform 800ms cubic-bezier(.65,0,.35,1); }
  .slider .slide{ width:33.3333%; height:100%; position:relative; flex-shrink:0; }
  .slider .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
  .slider .slide .label{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(transparent, rgba(0,0,0,0.75));
    padding:24px 32px; color:#fff;
  }
  .slider .slide .label .tag{ font-size:10px; letter-spacing:2px; color:#bbb; display:block; margin-bottom:4px;}
  .slider .slide .label .title{ font-size:18px; font-weight:600; font-family:'Archivo', sans-serif; }
  .slider .dots{ position:absolute; bottom:18px; right:32px; display:flex; gap:8px; z-index:5; }
  .slider .dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.35); transition:background 400ms ease; }
  .slider .dot.active{ background:#fff; }

  footer{
    background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:30px 48px;
  }
  footer .l1{ font-family:'Archivo', sans-serif; font-weight:600; font-size:15px; margin-bottom:4px;}
  footer .l2{ font-size:12.5px; color:#999; }

  /* interior pages */
  .page-hero{
    background:var(--paper); text-align:center; padding:64px 32px 48px;
  }
  .page-hero h1{ font-size:34px; }
  .page-hero p{ font-size:15px; color:var(--grey-text); max-width:560px; margin:0 auto; line-height:1.7; }

  .service-hero{
    position:relative; height:280px; background:var(--ink); overflow:hidden;
    display:flex; align-items:flex-end;
  }
  .service-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .service-hero::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.75) 100%);
  }
  .service-hero h1{
    position:relative; z-index:1; color:#fff; font-size:30px;
    padding:28px 48px; max-width:none; margin:0;
  }

  .prose{ background:var(--paper); padding:56px 48px; }
  .prose-inner{ max-width:720px; margin:0 auto; }
  .prose-inner h2{ font-family:'Archivo', sans-serif; font-weight:600; font-size:20px; margin:32px 0 12px; }
  .prose-inner h2:first-child{ margin-top:0; }
  .prose-inner p{ font-size:14.5px; color:var(--grey-text); line-height:1.8; margin-bottom:16px; }
  .prose-inner ul{ padding-left:20px; margin-bottom:16px; }
  .prose-inner li{ font-size:14.5px; color:var(--grey-text); line-height:1.8; }
  .prose-inner a{ color:var(--ink); }

  .portfolio{ background:var(--paper); padding:0 0 56px; }
  .portfolio-list{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; }
  .portfolio-item{
    display:flex; align-items:stretch;
    border-bottom:1px solid var(--grey-line);
  }
  .portfolio-item:first-child{ border-top:1px solid var(--grey-line); }
  .portfolio-item:nth-child(even){ flex-direction:row-reverse; }
  .portfolio-media{ flex:0 0 50%; aspect-ratio:4/3; overflow:hidden; }
  .portfolio-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 600ms ease; }
  .portfolio-item:hover .portfolio-media img{ transform:scale(1.04); }
  .portfolio-text{ flex:0 0 50%; display:flex; flex-direction:column; justify-content:center; padding:48px 56px; }
  .portfolio-text h2{ font-family:'Archivo', sans-serif; font-weight:600; font-size:22px; margin-bottom:14px; letter-spacing:-0.2px; }
  .portfolio-text p{ font-size:14.5px; color:var(--grey-text); line-height:1.8; }

  .contact-methods{ display:flex; flex-wrap:wrap; justify-content:center; gap:32px; margin:0 auto 32px; padding-top:32px; border-top:1px solid var(--grey-line); text-align:center; }
  .contact-methods .method .k{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--grey-mute); margin-bottom:6px; }
  .contact-methods .method .v{ font-size:18px; font-family:'Archivo', sans-serif; font-weight:600; }
  .contact-methods .method .v a{ color:var(--ink); text-decoration:none; }
  .contact-methods .method .v a:hover{ text-decoration:underline; }

  .contact-form{ max-width:480px; margin:0 auto 40px; }
  .contact-form label{
    display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase;
    color:var(--grey-text); margin-bottom:6px; margin-top:16px;
  }
  .contact-form label:first-of-type{ margin-top:0; }
  .contact-form input, .contact-form textarea, .contact-form select{
    width:100%; border:1px solid var(--grey-line); border-radius:2px;
    padding:11px 12px; font-size:14px; font-family:'Inter', sans-serif;
    background:#fafaf8; color:var(--ink);
  }
  .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
    outline:none; border-color:var(--ink); background:#fff;
  }
  .contact-form textarea{ resize:vertical; min-height:70px; }
  .contact-form .field-error{ font-size:11px; color:#b3261e; margin-top:4px; display:none; }
  .contact-form .field-error.show{ display:block; }
  .contact-form input.invalid, .contact-form textarea.invalid{ border-color:#b3261e; }

  .site-footer-links{ background:var(--ink); border-top:1px solid #222; padding:16px 48px 26px; }
  .site-footer-links .sfl-inner{
    display:flex; justify-content:space-between; align-items:center;
    color:#888; font-size:11.5px; max-width:1200px; margin:0 auto;
  }
  .sfl-nav{ display:flex; gap:20px; }
  .sfl-nav a{ color:#888; text-decoration:none; }
  .sfl-nav a:hover{ color:#fff; }
  /* contact modal */
  #modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.6);
    display:none; align-items:center; justify-content:center;
    z-index:100; padding:20px;
  }
  #modal-overlay.open{ display:flex; }
  .modal{
    background:#fff; width:100%; max-width:420px;
    border-radius:2px; position:relative;
    padding:36px 32px 32px;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
  }
  .modal-close{
    position:absolute; top:14px; right:16px;
    background:none; border:none; font-size:20px; color:var(--grey-mute);
    cursor:pointer; line-height:1; padding:4px;
  }
  .modal-close:hover{ color:var(--ink); }
  .modal .eyebrow{ margin-bottom:8px; }
  .modal h3{
    font-family:'Archivo', sans-serif; font-weight:600; font-size:22px;
    margin-bottom:6px; letter-spacing:-0.3px;
  }
  .modal .sub{ font-size:13px; color:var(--grey-text); margin-bottom:24px; line-height:1.6; }
  .modal label{
    display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase;
    color:var(--grey-text); margin-bottom:6px; margin-top:16px;
  }
  .modal label:first-of-type{ margin-top:0; }
  .modal input, .modal textarea, .modal select{
    width:100%; border:1px solid var(--grey-line); border-radius:2px;
    padding:11px 12px; font-size:14px; font-family:'Inter', sans-serif;
    background:#fafaf8; color:var(--ink);
  }
  .modal input:focus, .modal textarea:focus, .modal select:focus{
    outline:none; border-color:var(--ink); background:#fff;
  }
  .modal textarea{ resize:vertical; min-height:70px; }
  .modal .field-error{ font-size:11px; color:#b3261e; margin-top:4px; display:none; }
  .modal .field-error.show{ display:block; }
  .modal input.invalid, .modal textarea.invalid{ border-color:#b3261e; }
  .modal-submit{
    width:100%; background:var(--ink); color:#fff; border:none;
    padding:14px; font-size:13px; letter-spacing:0.3px; border-radius:2px;
    cursor:pointer; margin-top:24px; font-weight:600;
  }
  .modal-submit:hover{ background:#222; }
  .modal-success{ text-align:center; padding:12px 0 4px; }
  .modal-success svg{ width:42px; height:42px; margin-bottom:16px; }
  .modal-success h3{ margin-bottom:8px; }
  .modal-success p{ font-size:13px; color:var(--grey-text); line-height:1.6; }

/* ===== mobile ===== */
@media (max-width: 760px){
  header{ padding:14px 18px; flex-wrap:wrap; gap:10px; }
  .brand .logo-svg{ width:150px; height:150px; }
  nav{ display:none; }
  .cta-btn{ padding:9px 16px; font-size:11px; }

  .hero{ padding:56px 20px 40px; }
  .eyebrow{ font-size:10px; letter-spacing:2px; }
  h1{ font-size:28px; line-height:1.2; }
  .hero p{ font-size:14px; padding:0 4px; }
  .hero-actions{ flex-direction:column; gap:10px; }
  .hero-actions button{ width:100%; }

  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats .stat{ padding:20px 10px; border-bottom:1px solid var(--grey-line); }
  .stats .stat:nth-child(2n){ border-right:none; }
  .stats .stat:nth-child(5){ grid-column:1 / -1; border-right:none; }
  .stats .stat .num{ font-size:22px; }
  .stats .stat .label{ font-size:10px; }

  .feature-slider{ height:260px; }
  .feature-slider .fs-slide{ flex:0 0 calc(100% / 13 * 1.8); }
  .feature-slider .fs-slide svg{ width:36px; height:36px; }
  .feature-slider .fs-title{ font-size:14px; padding:0 12px; }

  .sectors{ grid-template-columns:1fr; padding:36px 24px; gap:28px; }
  .sectors .col{ padding:0; border-right:none !important; border-bottom:1px solid var(--grey-line); padding-bottom:24px; }
  .sectors .col:last-child{ border-bottom:none; padding-bottom:0; }

  .services-strip{ padding:36px 20px; }
  .services-strip .head{ flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:20px; }
  .service-grid{ grid-template-columns:1fr; }

  .slider{ height:300px; }

  footer{ flex-direction:column; align-items:flex-start; gap:16px; padding:28px 20px; }
  footer .cta-btn{ width:100%; }

  .modal{ max-width:100%; padding:28px 20px 24px; }
  .modal input, .modal textarea, .modal select{ font-size:16px; }
  .contact-form input, .contact-form textarea, .contact-form select{ font-size:16px; }

  .page-hero{ padding:44px 20px 32px; }
  .page-hero h1{ font-size:26px; }

  .service-hero{ height:200px; }
  .service-hero h1{ font-size:22px; padding:20px 20px; }

  .prose{ padding:36px 20px; }
  .trust{ padding:32px 20px; }

  .portfolio-item, .portfolio-item:nth-child(even){ flex-direction:column; }
  .portfolio-media{ flex:none; width:100%; aspect-ratio:16/10; }
  .portfolio-text{ padding:28px 20px; }
  .portfolio-text h2{ font-size:19px; }

  .contact-methods{ flex-direction:column; gap:20px; }

  .badge-strip{ gap:24px; padding:32px 20px; flex-wrap:wrap; }
  .badge-strip.badge-strip-right{ justify-content:center; }
  .badge-chip img{ height:64px; }
  .badge-plain{ height:88px; }

  .site-footer-links{ padding:14px 20px 20px; }
  .site-footer-links .sfl-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
}