:root{
  --bg:#f3f4f6;
  --surface:#fafafa;
  --text:#262626;
  --muted:#525252;
  --line:#d4d4d4;
  --accent:#f5b91e;
  --accent-soft:#fff7d6;
  --dark:#171717;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
}

body{
  overflow:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

.site{
  height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ------------------------------
   Shared page width
------------------------------ */
.container,
.page-inner{
  width:calc(100% - 300px);
  max-width:none;
  margin-left:150px;
  margin-right:150px;
}

/* ------------------------------
   Header / navigation
------------------------------ */
.nav{
  flex:0 0 76px;
  height:76px;
  margin-top:18px;
  padding:0 22px;
  border:1px solid rgba(245,185,30,.35);
  background:rgba(255,251,235,.72);
  backdrop-filter:blur(14px);
  border-radius:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.brand{
  display:flex;
  align-items:center;
}

.brand img{
  display:block;
  width:190px;
  height:auto;
  object-fit:contain;
}

.links{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:15px;
  font-weight:650;
  letter-spacing:-.018em;
}

.links a{
  position:relative;
  padding:8px 0 6px;
  color:#747981;
  transition:color .2s ease;
}

.links a:hover{
  color:#d6a43b;
}

.links a.active{
  color:#747981;
}

.links a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:#d6a43b;
}

.links a.active:hover{
  color:#d6a43b;
}

/* ------------------------------
   Main layout
------------------------------ */
.main{
  flex:1 1 auto;
  min-height:0;
  display:flex;
}

.hero,
.page{
  flex:1 1 auto;
  min-height:0;
}

.hero{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  align-items:center;
  gap:50px;
  padding:30px 0 42px;
}

.hero-copy{
  max-width:690px;
}

.eyebrow,
.kicker{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:700;
  color:#737373;
  margin-bottom:20px;
}

.hero h1{
  font-size:clamp(42px,5vw,76px);
  line-height:1.02;
  letter-spacing:-.055em;
  margin:0 0 24px;
  font-weight:750;
}

.hero h1 .accent{
  color:#d99b00;
}

.hero p{
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
  max-width:610px;
  margin:0;
}

.actions{
  display:flex;
  gap:12px;
  margin-top:30px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  padding:12px 19px;
  border:1px solid #bdbdbd;
  font-size:14px;
  font-weight:600;
  background:transparent;
}

.btn.primary{
  background:var(--dark);
  border-color:var(--dark);
  color:#fff;
}

/* ------------------------------
   Hero business cards
------------------------------ */
.hero-cards{
  position:relative;
  width:100%;
  height:450px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.business-card{
  position:absolute;
  width:330px;
  height:185px;
  border:1px solid #d7dce4;
  border-radius:15px;
  background:#fff;
  box-shadow:0 20px 48px rgba(17,31,54,.10);
  padding:24px 25px;
  overflow:hidden;
}

.business-card::after{
  content:"";
  position:absolute;
  width:155px;
  height:155px;
  border:1px solid #c8d8f5;
  border-radius:50%;
  right:-78px;
  bottom:-83px;
  opacity:.9;
}

.business-card .mini-logo{
  position:absolute;
  left:25px;
  top:24px;
  width:38px;
  height:28px;
}

.business-card .domain{
  position:absolute;
  left:25px;
  top:68px;
  font-size:24px;
  font-weight:600;
  letter-spacing:-.045em;
  color:#17243b;
  white-space:nowrap;
}

.business-card .domain-first{
  font-weight:600;
}

.business-card .domain-second{
  font-weight:600;
  margin-left:4px;
}

.business-card .domain-tld{
  font-weight:500;
  margin-left:1px;
  opacity:.72;
}

.business-card .tagline{
  position:absolute;
  left:25px;
  top:101px;
  font-size:10px;
  color:#6e7785;
}

.business-card .details{
  position:absolute;
  right:22px;
  top:27px;
  border-left:1px solid #d9dee7;
  padding-left:17px;
  font-size:8px;
  line-height:2.1;
  color:#5f6875;
  max-width:110px;
}

.business-card .details span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.business-card .line{
  position:absolute;
  left:25px;
  right:25px;
  bottom:22px;
  border-top:1px solid #edf0f4;
}

.mini-logo.logo-one{
  display:flex;
  gap:4px;
  align-items:center;
}

.logo-one i{
  display:block;
  width:13px;
  height:23px;
  background:#4168e8;
  transform:skew(-28deg);
}

.logo-one i+i{
  margin-left:2px;
}

.mini-logo.logo-two{
  width:34px;
  height:34px;
}

.logo-two i{
  display:block;
  width:24px;
  height:24px;
  border:2px solid #43c9b2;
  transform:rotate(45deg);
  border-radius:3px;
  margin:2px 0 0 3px;
  box-shadow:6px -6px 0 -4px #43c9b2;
}

.mini-logo.logo-three{
  color:#d6a43b;
  font-family:Georgia,serif;
  font-weight:800;
  font-size:30px;
  line-height:28px;
}

.mini-logo.logo-four{
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-four i{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#6b7fe7;
}

.logo-four i:nth-child(1){
  transform:translate(-7px,0);
  background:#34bfd0;
}

.logo-four i:nth-child(2){
  transform:translate(7px,0);
  background:#5d6fe0;
}

.logo-four i:nth-child(3){
  transform:translate(0,8px);
  background:#7a55c7;
}

.business-card.c1{
  transform:translate(38px,-105px) rotate(5deg);
  z-index:4;
}

.business-card.c2{
  transform:translate(115px,58px) rotate(-3deg);
  z-index:3;
  background:#182b45;
  color:#fff;
  border-color:#203c5e;
}

.business-card.c3{
  transform:translate(-100px,83px) rotate(4deg);
  z-index:2;
  background:#fbfaf6;
}

.business-card.c4{
  transform:translate(-125px,-83px) rotate(-6deg);
  z-index:1;
  background:#f8fafc;
}

.business-card.c1 .domain-second{color:#4168e8}
.business-card.c2 .domain-second{color:#43c9b2}
.business-card.c3 .domain-second{color:#d6a43b}
.business-card.c4 .domain-second{color:#7a55c7}

.business-card.c2 .domain,
.business-card.c2 .domain-first{
  color:#fff;
}

.business-card.c2 .domain-tld,
.business-card.c2 .tagline,
.business-card.c2 .details{
  color:#d4dce8;
}

.business-card.c2 .details{
  border-color:#66768b;
}

.business-card.c2 .line{
  border-color:#34485f;
}

.business-card.c2::after{
  border-color:#43c9b2;
}

.business-card.c3::after{
  border-color:#e4c878;
}

.business-card.c4::after{
  border-color:#c7d5ef;
}

/* ------------------------------
   Inner pages
------------------------------ */
.page{
  display:flex;
  align-items:center;
}

.page-inner{
  padding:20px 0;
}

.page-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:end;
  margin-bottom:35px;
}

.page h1{
  font-size:clamp(42px,5vw,68px);
  line-height:1.03;
  letter-spacing:-.055em;
  margin:0;
  font-weight:750;
}

.intro{
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
  max-width:560px;
}

.about-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
}

.lead{
  font-size:21px;
  line-height:1.65;
  margin:0 0 25px;
  max-width:680px;
}

.small{
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
}

.stats{
  display:flex;
  gap:45px;
  margin-top:28px;
}

.stat b{
  display:block;
  font-size:27px;
  letter-spacing:-.04em;
}

.stat span{
  display:block;
  color:#737373;
  font-size:11px;
  margin-top:4px;
}

.principles{
  border-left:1px solid #cfcfcf;
  padding-left:30px;
}

.principle{
  padding:0 0 22px;
  margin-bottom:22px;
  border-bottom:1px solid #ddd;
}

.principle:last-child{
  border-bottom:0;
}

.principle b{
  font-size:14px;
}

.principle p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin:6px 0 0;
}

/* ------------------------------
   References
------------------------------ */
.reference-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.reference{
  min-height:180px;
  border:1px solid #d4d4d4;
  background:rgba(250,250,250,.75);
  border-radius:14px;
  padding:25px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.reference .num{
  font-size:11px;
  color:#999;
}

.reference h3{
  font-size:24px;
  letter-spacing:-.035em;
  margin:15px 0 7px;
}

.reference p{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  margin:0;
}

.reference .type{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#888;
  margin-top:15px;
}

/* ------------------------------
   Contact
------------------------------ */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.contact-title{
  font-size:clamp(50px,6vw,82px);
  line-height:.98;
  letter-spacing:-.06em;
  margin:0 0 25px;
}

.contact-copy{
  font-size:17px;
  line-height:1.65;
  color:var(--muted);
  max-width:520px;
}

.email{
  display:inline-block;
  margin-top:25px;
  font-size:20px;
  font-weight:650;
  border-bottom:1px solid #777;
  padding-bottom:4px;
}

.address{
  border-left:1px solid #ccc;
  padding-left:30px;
}

.address .label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#888;
  margin-bottom:10px;
}

.address p{
  font-size:15px;
  line-height:1.65;
  margin:0;
  color:#404040;
}

/* ------------------------------
   Footer
------------------------------ */
.footer{
  flex:0 0 50px;
  height:50px;
  min-height:50px;
  border-top:1px solid #d0d0d0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0;
  color:#737373;
  font-size:11px;
}

.footer > span{
  display:flex;
  align-items:center;
  height:100%;
  margin:0;
  padding:0;
  line-height:1;
}

.social{
  height:100%;
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:0;
}

.social a{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#737373;
  transition:color .2s ease,transform .2s ease;
}

.social a:hover{
  color:#d6a43b;
  transform:translateY(-1px);
}

.social svg{
  width:17px;
  height:17px;
  display:block;
  fill:currentColor;
}

/* ------------------------------
   Tablet
------------------------------ */
@media (max-width:1000px) and (min-width:701px){
  .container,
  .page-inner{
    width:calc(100% - 96px);
    margin-left:48px;
    margin-right:48px;
  }

  .hero{
    gap:30px;
  }
}

/* ------------------------------
   Mobile
------------------------------ */
@media (max-width:700px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    overflow-y:auto;
  }

  .site{
    width:100%;
    min-height:100svh;
    height:auto;
    overflow:hidden;
  }

  .container,
  .page-inner{
    width:calc(100% - 32px);
    margin-left:16px;
    margin-right:16px;
  }

  /* Mobile header: logo above, navigation below */
  .nav{
    width:calc(100% - 32px);
    height:auto;
    min-height:108px;
    margin:12px 16px 0;
    padding:15px 18px 13px;
    border-radius:30px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:11px;
  }

  .brand{
    width:100%;
    justify-content:center;
  }

  .brand img{
    width:168px;
    max-width:52vw;
  }

  .links{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    font-size:12px;
    line-height:1;
    text-align:center;
  }

  .links a{
    min-width:0;
    padding:8px 2px 7px;
    white-space:nowrap;
  }

  .links a.active::after{
    left:18%;
    right:18%;
  }

  .main{
    display:block;
    width:100%;
  }

  .page{
    width:100%;
    height:auto;
    min-height:0;
  }

  /* .hero already has the .container class.
     Do not override its mobile width to 100%, otherwise
     16px + 100% + 16px creates horizontal overflow. */
  .hero{
    width:calc(100% - 32px);
    margin-left:16px;
    margin-right:16px;
    height:auto;
    min-height:0;
    display:block;
    padding:46px 0 34px;
  }

  .hero-copy{
    max-width:none;
  }

  .eyebrow,
  .kicker{
    font-size:10px;
    letter-spacing:.16em;
    margin-bottom:17px;
  }

  .hero h1{
    font-size:clamp(40px,11.2vw,48px);
    line-height:1.01;
    letter-spacing:-.055em;
    margin-bottom:24px;
  }

  .hero p{
    font-size:17px;
    line-height:1.62;
    max-width:none;
  }

  .actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:28px;
  }

  .btn{
    width:100%;
    min-width:0;
    padding:13px 10px;
    font-size:14px;
    white-space:nowrap;
  }

  /* Keep artwork inside the viewport */
  .hero-cards{
    position:relative;
    width:100%;
    height:385px;
    margin-top:42px;
    transform:none;
    overflow:visible;
  }

  .business-card{
    width:min(292px,78vw);
    height:164px;
    padding:20px 21px;
  }

  .business-card .mini-logo{
    left:21px;
    top:20px;
    transform:scale(.9);
    transform-origin:left top;
  }

  .business-card .domain{
    left:21px;
    top:61px;
    font-size:21px;
  }

  .business-card .tagline{
    left:21px;
    top:90px;
    font-size:9px;
  }

  .business-card .details{
    right:18px;
    top:23px;
    padding-left:13px;
    font-size:7px;
    max-width:96px;
  }

  .business-card .line{
    left:21px;
    right:21px;
    bottom:19px;
  }

  .business-card.c1{
    transform:translate(20px,-48px) rotate(4deg);
  }

  .business-card.c2{
    transform:translate(35px,100px) rotate(-2deg);
  }

  .business-card.c3{
    transform:translate(-42px,120px) rotate(3deg);
  }

  .business-card.c4{
    transform:translate(-48px,-20px) rotate(-4deg);
  }

  .page{
    display:block;
  }

  .page-inner{
    padding:42px 0 36px;
  }

  .page-head,
  .about-layout,
  .contact-layout{
    grid-template-columns:1fr;
    gap:26px;
  }

  .page-head{
    margin-bottom:30px;
  }

  .page h1{
    font-size:clamp(40px,11vw,48px);
  }

  .intro{
    font-size:16px;
    line-height:1.6;
  }

  .lead{
    font-size:18px;
  }

  .reference-grid{
    grid-template-columns:1fr;
  }

  .stats{
    gap:24px;
    flex-wrap:wrap;
  }

  .contact-title{
    font-size:clamp(44px,12vw,56px);
  }

  .address,
  .principles{
    border-left:0;
    padding-left:0;
    border-top:1px solid #ccc;
    padding-top:24px;
  }

  .footer{
    width:calc(100% - 32px);
    margin-left:16px;
    margin-right:16px;
    flex:0 0 54px;
    height:54px;
    min-height:54px;
  }
}