/* Shared foundations. Desktop reference: Figma Home, 1440 × 4631. */
@font-face {
  font-family:Lora;
  src:url('../fonts/lora-latin-variable.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Montserrat;
  src:url('../fonts/montserrat-latin-variable.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap
}

:root {
  --background:#0b141f;
  --foreground:#fff;
  --accent:#fe3604;
  --font-body:Montserrat,Arial,sans-serif;
  --font-heading:Lora,Georgia,serif;
  --page-width:1440px;
  --gutter:78px
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-body);
  font-size:17.5px;
  line-height:1.22
}

h1,h2,p {
  margin:0
}

h1,h2 {
  font-family:var(--font-heading);
  font-weight:400
}

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

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  border:0;
  background:none;
  padding:0
}

img {
  display:block;
  max-width:100%
}

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

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:10;
  padding:12px;
  background:var(--background);
  transform:translateY(-200%)
}

.skip-link:focus {
  transform:none
}

.site {
  display:flow-root;
  position:relative;
  isolation:isolate;
  max-width:var(--page-width);
  min-width:1100px;
  min-height:4631px;
  margin-inline:auto;
  overflow:clip
}

/* The three decorative backgrounds retain the approved Figma overlap and crop. */
.page-background {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url('../images/home/background-top-cityscape.webp'),url('../images/home/background-projects-cityscape-midd.webp'),url('../images/home/background-footer-sunset.webp');
  background-position:center top,center 807px,center 3172px;
  background-size:1440px 1041px,1440px 2304px,1492px 1514px;
  background-repeat:no-repeat
}

.site-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin:43px 101px 0 75px;
  height:47px
}

.brand {
  display:flex;
  gap:17px;
  align-items:flex-start
}

.brand strong {
  font:700 20px/1.3 var(--font-heading);
  white-space:nowrap
}

.brand__subtitle {
  display:block;
  margin-top:0;
  font-size:14px;
  font-weight:300;
  letter-spacing:4.2px;
  text-transform:uppercase
}

.site-header nav {
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:9px;
  font-size:14px;
  font-weight:300;
  letter-spacing:4.2px;
  text-transform:uppercase
}

.site-header nav button {
  text-transform:inherit;
  letter-spacing:inherit
}

.site-header nav>span {
  color:var(--accent)
}

.hero {
  height:680px;
  padding-top:80px;
  margin-left:68px;
  width:490px
}

.hero h1 {
  font-size:78.395px;
  line-height:1.28
}

.hero>p {
  min-height:98px;
  width:457px;
  margin:19px 0 0 10px;
  line-height:1.22
}

.hero .project-link {
  margin:13px 0 0 12px
}

.project-link {
  display:inline-flex;
  gap:13px;
  align-items:center;
  font-size:14px;
  font-weight:300;
  letter-spacing:4.2px;
  text-transform:uppercase;
  text-align:left;
  white-space:nowrap;
  min-height:55px
}

.circle {
  display:grid;
  place-items:center;
  flex:0 0 55px;
  width:55px;
  height:55px;
  border:1px solid var(--accent);
  border-radius:50%
}

.projects {
  position:relative
}

.project {
  position:relative;
  display:grid;
  grid-template-columns:417px 1fr;
  column-gap:53px;
  margin-inline:var(--gutter);
  isolation:isolate
}

.project__copy {
  position:relative;
  z-index:1
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:16px;
  font:300 14px/17px var(--font-body);
  letter-spacing:4.2px;
  text-transform:uppercase;
  padding-left:22px;
  white-space:nowrap
}

.eyebrow::before {
  content:'';
  width:20px;
  height:1px;
  background:var(--accent);
  flex:none
}

.project h2 {
  font-size:48px;
  line-height:1.28;
  margin-top:23px
}

.project__description {
  font-size:17.5px;
  line-height:1.22;
  width:399px;
  margin:12px 0 0 6px
}

.project .project-link {
  margin:28px 0 0 2px
}

.project__visual {
  position:absolute;
  max-width:none;
  object-fit:contain;
  z-index:0
}

.project--britanica {
  height:493px;
  padding-top:83px
}

.project--britanica .project__visual {
  width:815px;
  height:483px;
  left:470px;
  top:0
}

.project--britanica .project__description {
  margin-top:11px
}

.project--britanica .project-link {
  margin-top:28px
}

.project--logiforce {
  height:597px;
  padding-top:162px;
  grid-template-columns:1fr 417px;
  margin-right:116px
}

.project--logiforce .project__copy {
  grid-column:2
}

.project--logiforce h2 {
  margin-top:23px
}

.project--logiforce .project__description {
  margin-top:20px
}

.project--logiforce .project-link {
  margin-top:29px
}

.project--logiforce .project__visual {
  width:632px;
  height:477px;
  left:57px;
  top:78px
}

.street-scene {
  position:absolute;
  left:-336px;
  top:0;
  width:1253px;
  height:597px;
  overflow:hidden;
  opacity:.4;
  z-index:-1
}

.street-scene img {
  position:absolute;
  max-width:none;
  width:100%;
  height:125.93%;
  left:7.68%;
  top:-21.78%
}

.project--kanarata {
  height:602px;
  padding-top:136px
}

.project--kanarata .project__visual {
  width:746px;
  height:1018px;
  left:616px;
  top:-238px;
  opacity:.8
}

.project--kanarata .project-link {
  margin-top:29px
}

.project--platform {
  height:655px;
  padding-top:140px;
  grid-template-columns:1fr 417px;
  margin-right:116px
}

.project--platform .project__copy {
  grid-column:2
}

.project--platform .project__visual {
  width:873px;
  height:655px;
  left:-13px;
  top:0
}

.project--platform .project__description {
  margin-top:12px
}

.project--platform .project-link {
  margin-top:48px
}

.project--teachitright {
  height:565px;
  padding-top:76px
}

.project--teachitright .project__visual {
  width:717px;
  height:485px;
  left:593px;
  top:12px
}

.project--teachitright .project__description {
  margin-top:13px
}

.project--teachitright .project-link {
  margin-top:41px
}

.selected-work {
  margin-inline:80px 81px;
  height:440px;
  padding-top:0
}

.selected-work .eyebrow {
  padding-left:20px
}

.selected-work__grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:35px
}

.selected-work__grid>div {
  height:195px;
  background:#d9d9d9
}

.selected-work .project-link {
  margin-top:28px;
  margin-left:-2px
}

.site-footer {
  margin-left:146px;
  margin-right:118px;
  text-align:center;
  height:509px
}

.contact-panel {
  height:281px;
  background:rgb(0 0 0 / .7);
  padding-top:34px
}

.contact-panel h2 {
  font-size:48px;
  line-height:1.28
}

.contact-panel p {
  font-size:17.5px;
  line-height:1.22;
  margin-top:9px
}

.contact-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  height:47px;
  padding:0 23px 0 21px;
  border-radius:12px;
  background:var(--accent);
  font-size:26px;
  font-weight:300;
  text-transform:uppercase;
  margin-top:45px
}

.contact-button img {
  max-width:none
}

.social-links {
  display:flex;
  justify-content:center;
  gap:15px;
  margin-top:88px
}

.social-links a {
  width:24px;
  height:24px
}

.copyright {
  font-size:17.5px;
  margin-top:16px
}

.notice {
  max-width:460px;
  padding:32px;
  background:var(--background);
  color:var(--foreground);
  border:1px solid var(--accent)
}

.notice::backdrop {
  background:rgb(0 0 0 / .75)
}

.notice h2 {
  font-size:30px
}

.notice p {
  margin-block:20px;
  line-height:1.5
}

.notice__close {
  background:var(--accent);
  padding:10px 24px;
  border-radius:6px
}

/* Mobile composition will be added after its separate Figma approval. */