/* tajawal-arabic-400-normal */
@font-face  {
  
  font-family: 'Tajawal';
  
  font-style: normal;
  
  font-display: swap;
  
  font-weight: 400;
  
  src: url(assets/fonts/tajawal-arabic-400-normal.woff2) format('woff2');
  
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
  
}


/* tajawal-latin-400-normal */
@font-face  {
  
  font-family: 'Tajawal';
  
  font-style: normal;
  
  font-display: swap;
  
  font-weight: 400;
  
  src: url(assets/fonts/tajawal-latin-400-normal.woff2) format('woff2');
  
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  
}

/* tajawal-arabic-500-normal */
@font-face  {
  
  font-family: 'Tajawal';
  
  font-style: normal;
  
  font-display: swap;
  
  font-weight: 500;
  
  src: url(assets/fonts/tajawal-arabic-500-normal.woff2) format('woff2');
  
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
  
}


/* tajawal-latin-500-normal */
@font-face  {
  
  font-family: 'Tajawal';
  
  font-style: normal;
  
  font-display: swap;
  
  font-weight: 500;
  
  src: url(assets/fonts/tajawal-latin-500-normal.woff2) format('woff2');
  
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  
}

/* tajawal-arabic-700-normal */
@font-face  {
  
  font-family: 'Tajawal';
  
  font-style: normal;
  
  font-display: swap;
  
  font-weight: 700;
  
  src: url(assets/fonts/tajawal-arabic-700-normal.woff2) format('woff2');
  
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
  
}


/* tajawal-latin-700-normal */
@font-face  {
  
  font-family: 'Tajawal';
  
  font-style: normal;
  
  font-display: swap;
  
  font-weight: 700;
  
  src: url(assets/fonts/tajawal-latin-700-normal.woff2) format('woff2');
  
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  
}

/* tajawal-arabic-800-normal */
@font-face  {
  
  font-family: 'Tajawal';
  
  font-style: normal;
  
  font-display: swap;
  
  font-weight: 800;
  
  src: url(assets/fonts/tajawal-arabic-800-normal.woff2) format('woff2');
  
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
  
}


/* tajawal-latin-800-normal */
@font-face  {
  
  font-family: 'Tajawal';
  
  font-style: normal;
  
  font-display: swap;
  
  font-weight: 800;
  
  src: url(assets/fonts/tajawal-latin-800-normal.woff2) format('woff2');
  
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  
}

/* 01. Design tokens */
:root {
  
 --color-primary-950:#072e35;
  --color-primary-900:#0c4149;
  --color-primary-800:#135863;
  --color-primary-700:#166d78;
  
 --color-accent-600:#087e89;
  --color-accent-500:#1695a0;
  --color-accent-400:#73c3c7;
  
 --color-gold-500:#be985c;
  --color-gold-400:#dfbf85;
  --color-surface:#f9faf8;
  --color-surface-soft:#edf2ef;
  --color-border:#d2dedb;
  --color-text:#123c43;
  --color-text-muted:#536e72;
  
 --shadow-sm:0 6px 20px #072e3508;
  --shadow-md:0 16px 40px #072e3510;
  --shadow-lg:0 25px 65px #072e351c;
  --shadow-premium:15px 25px 60px #072e3520;
  
 --radius-sm:4px;
  --radius-md:14px;
  --radius-lg:16px;
  --radius-xl:32px;
  --container:1260px;
  
 --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:80px;
  --space-10:112px;
  --space-11:144px;
  
 --section-space:clamp(64px,6vw,88px);
  --ease:cubic-bezier(.22,1,.36,1);
  
;
  --type-hero:clamp(2.5rem,3.9vw,3.6rem);
  --type-section:clamp(1.85rem,2.6vw,2.5rem);
  --type-body:clamp(1rem,1.1vw,1.125rem);
  --type-small:.875rem;
  }

/* 02. Base and shared editorial primitives */
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:105px}
body {
  margin:0;
  background:var(--color-surface);
  color:var(--color-text);
  font:400 var(--type-body)/1.85 'Tajawal',Arial,sans-serif;
  }
button,a {
  -webkit-tap-highlight-color:transparent}
button {
  font:inherit}
a {
  color:inherit;
  text-decoration:none}
button {
  cursor:pointer}
img {
  max-width:100%;
  height:auto;
  display:block}
h1,h2,h3,p,figure {
  margin:0}
h1,h2,h3 {
  line-height:1.4}
h2 {
  font-size:var(--type-section);
  font-weight:700}
h3 {
  font-size:1.4rem;
  font-weight:700}
p+p {
  margin-top:20px}
p,h1,h2,h3 {
  overflow-wrap:anywhere}
.wrap>* {
  min-width:0}
.hero-grid>*,.about-grid>*,.service-grid>*,.quality-grid>*,.why-grid>*,.profile-grid>* {
  min-width:0}
svg {
  display:block}
button:focus-visible,a:focus-visible {
  outline:3px solid #b78130;
  outline-offset:6px}
button[hidden],[hidden] {
  display:none!important}
.wrap {
  width:min(calc(100% - 80px),var(--container));
  margin-inline:auto}
.section {
  padding-block:var(--section-space);
  position:relative}
.section>.wrap {
  position:relative;
  z-index:1}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:34px;
  }
.section-heading h2 {
  max-width:680px}
.section-note,.field-intro {
  font-size:1rem;
  max-width:290px;
  color:var(--color-text-muted)}
.kicker,.section-label>span,.eyebrow {
  font-size:.95rem;
  font-weight:500;
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:22px;
  color:var(--color-accent-600)}
.kicker:before,.section-label>span:before {
  content:"";
  height:2px;
  width:30px;
  background:var(--color-gold-500);
  flex-shrink:0}
.actions {
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:30px}
.button {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:10px 21px;
  font-size:.98rem;
  font-weight:500;
  border:1px solid transparent;
  transition:background .25s,border-color .25s,transform .3s var(--ease);
  border-radius:2px}
.button span {
  font-family:Arial,sans-serif;
  font-size:1.3rem;
  transition:transform .3s var(--ease)}
.primary {
  background:var(--color-gold-400);
  color:var(--color-primary-950)}
.primary:hover {
  background:#e9cc99}
.outline {
  border-color:#aac2c280;
  color:#fff;
  background:transparent}
.outline:hover {
  background:#ffffff0b;
  border-color:var(--color-gold-400)}
.text-link {
  display:inline-flex;
  gap:18px;
  align-items:center;
  border-bottom:1px solid var(--color-gold-500);
  padding-block:8px;
  font-size:1rem;
  min-height:44px}
.text-link:hover {
  color:var(--color-accent-600)}
.skip {
  position:fixed;
  top:-100px;
  inset-inline-start:20px;
  z-index:100;
  background:#fff;
  padding:12px 22px}
.skip:focus {
  top:10px}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)}

/* 03. Header and drawer */
.header {
  position:sticky;
  top:0;
  z-index:50;
  background:#f9faf8f5;
  border-bottom:1px solid var(--color-border);
  backdrop-filter:blur(12px);
  transition:box-shadow .3s}
.header-inner {
  padding-block:10px;
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  transition:min-height .3s}
.header.is-scrolled {
  box-shadow:var(--shadow-sm)}
.header.is-scrolled .header-inner {
  min-height:80px}
.brand {
  display:flex;
  align-items:center;
  gap:13px;
  flex-shrink:1;
  min-width:0}
.brand>span:last-child {
  min-width:0}
.brand-mark {
  flex-shrink:0}
.brand-mark {
  background:var(--color-accent-600);
  padding:7px 10px;
  clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%)}
.brand-mark img {
  height:59px;
  width:38px;
  object-fit:contain}
.brand strong {
  display:block;
  font-size:1.12rem}
.brand small {
  display:block;
  font-size:.85rem;
  line-height:1.6;
  color:var(--color-text-muted)}
nav {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px 22px;
  min-width:0}
nav>a {
  position:relative;
  font-size:1rem;
  padding-block:12px;
  white-space:normal}
nav>a:after {
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:5px;
  height:2px;
  background:var(--color-gold-500);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s}
nav>a:hover:after,nav>a[aria-current]:after {
  transform:scaleX(1)}
nav>a[aria-current] {
  color:var(--color-accent-600)}
nav .nav-contact {
  background:var(--color-primary-950);
  color:white;
  padding:10px 20px}
nav .nav-contact[aria-current] {
  color:var(--color-gold-400)}
nav .nav-contact:after {
  inset-inline:20px}
.menu-toggle,.drawer-close {
  display:none}
.drawer-backdrop {
  display:none}

/* 04. Hero — split planes, nested photography, architectural frame */
.hero {
  position:relative;
  isolation:isolate;
  background:var(--color-primary-950);
  color:white;
  overflow:hidden;
  padding-bottom:25px;
  min-height:0;
  }
.hero:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(118deg,transparent 58%,#174f5620 58.1%,#174f5620 81%,transparent 81.1%);
  }
.hero:after {
  content:"";
  position:absolute;
  width:780px;
  height:780px;
  border:1px solid #d6b47a21;
  border-radius:50%;
  inset-inline-end:-510px;
  top:-360px;
  z-index:-1;
  display:none;
  }
.hero-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:55px;
  align-items:center;
  min-height:560px;
  padding-block:50px 60px;
  }
.hero-copy {
  position:relative;
  z-index:3;
  padding-block:20px}
.eyebrow {
  font-size:1rem;
  color:#c0d7d9;
  max-width:530px}
.eyebrow>span {
  width:26px;
  height:1px;
  background:var(--color-gold-400);
  flex-shrink:0}
.hero h1 {
  font-weight:700;
  font-size:var(--type-hero);
  line-height:1.38;
  margin-block:20px 22px;
  }
.hero h1 em {
  font-style:normal;
  color:var(--color-gold-400)}
.intro {
  max-width:490px;
  color:#c4d6d8;
  line-height:1.9;
  font-size:1.125rem;
  }
.hero-art {
  display:grid;
  grid-template-columns:1fr 2.3fr .4fr;
  grid-template-rows:28px 225px 130px 25px;
  position:relative;
  direction:ltr;
  align-items:stretch;
  margin-inline-start:-15px;
  max-width:460px;
  width:100%;
  justify-self:end;
  }
.hero-offset {
  grid-column:2/4;
  grid-row:1/5;
  background:linear-gradient(150deg,#20848d,#105963);
  clip-path:polygon(0 0,100% 0,100% 89%,83% 100%,0 100%);
  transform:translate(20px,12px)}
.photo-frame {
  grid-column:2/3;
  grid-row:1/5;
  position:relative;
  z-index:1}
.photo-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 65%;
  clip-path:polygon(0 0,100% 0,100% 90%,83% 100%,0 100%)}
.photo-frame:before {
  content:"";
  position:absolute;
  inset:-16px 20px 22px -16px;
  border:1px solid #dfbf8580;
  z-index:2;
  pointer-events:none}
.hero-inset {
  grid-column:1/3;
  grid-row:3/5;
  width:47%;
  z-index:3;
  align-self:end;
  background:var(--color-primary-950);
  padding:8px;
  transform:translateY(15px)}
.hero-inset img {
  width:100%;
  height:155px;
  object-fit:cover;
  object-position:center 45%}
.photo-caption {
  grid-column:2/4;
  grid-row:4/5;
  z-index:4;
  align-self:end;
  justify-self:end;
  transform:translate(12px,37px);
  display:flex;
  align-items:center;
  gap:15px;
  padding:13px 18px;
  background:#f3efe5;
  color:var(--color-primary-950);
  font-size:.9rem;
  direction:rtl;
  box-shadow:none;
  border-inline-start:3px solid var(--color-gold-500)}
.photo-caption strong {
  font-size:1.15rem}
.caption-line {
  display:none}
.technical-label {
  position:absolute;
  top:-30px;
  inset-inline-start:0;
  font:10px/1.2 Arial,sans-serif;
  letter-spacing:2px;
  color:#adcbd0}
.hero-baseline {
  display:flex;
  gap:25px;
  align-items:center;
  font-size:.82rem;
  color:#b4cdcf}
.hero-baseline>span:last-child {
  font:12px Arial;
  letter-spacing:2px}
.baseline-rule {
  height:1px;
  background:#8cb3b333;
  flex:1}

/* 05. About — twelve-column editorial composition */
.about {
  overflow:hidden;
  padding-top:82px;
  padding-bottom:92px;
  background:var(--color-surface);
  clip-path:none;
  margin-bottom:0;
  z-index:2}
.about-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:28px;
  align-items:start}
.section-label {
  grid-column:1/8;
  grid-row:1;
  padding-inline-start:35px;
  border-inline-start:1px solid var(--color-gold-500)}
.section-label h2 {
  max-width:600px;
  font-size:var(--type-section);
  }
.gold-rule {
  display:none}
.about-content {
  grid-column:1/8;
  grid-row:2;
  padding-inline:35px 38px;
  }
.about-content p {
  font-size:1.07rem;
  color:var(--color-text-muted)}
.about-content .about-lead {
  color:var(--color-text);
  font-size:1.125rem;
  }
.about-visual {
  grid-column:9/13;
  grid-row:1/3;
  position:relative;
  padding:20px 20px 0 0;
  align-self:center}
.about-photo {
  width:100%;
  height:310px;
  object-fit:cover;
  border-radius:12px 0 0 0;
  }
.about-outline {
  position:absolute;
  inset:0 0 20px 20px;
  border:1px solid var(--color-gold-500);
  border-radius:12px 0 0 0;
  pointer-events:none}

/* 06. Vision — open split plus value rail */
.vision {
  background:var(--color-primary-900);
  color:white;
  padding-top:72px;
  padding-bottom:65px;
  overflow:hidden}
.vision:before {
  content:"";
  position:absolute;
  width:650px;
  height:650px;
  inset-inline-end:-250px;
  top:80px;
  border:1px solid #dfbf8526;
  border-radius:50%;
  box-shadow:0 0 0 65px #ffffff02,0 0 0 130px #ffffff02;
  display:none;
  }
.vision .section-heading {
  max-width:none;
  margin-bottom:0;
  grid-column:1/5;
  align-self:start;
  }
.vision .kicker {
  color:var(--color-gold-400)}
.vision-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  grid-column:5/13;
  }
.vision-grid article {
  position:relative;
  padding-top:0;
  border-top:0;
  }
.vision-grid article+article {
  border-top-color:#dfbf8580;
  padding-inline-start:28px;
  border-inline-start:1px solid #aec4c744;
  margin-top:0px;
  }
.vision-word {
  font-size:1rem;
  color:var(--color-gold-400);
  display:block;
  margin-bottom:15px}
.vision-grid h3 {
  max-width:430px;
  font-size:1.4rem;
  line-height:1.5;
  margin-bottom:16px;
  }
.vision-grid p {
  max-width:490px;
  color:#c0d4d6;
  font-size:1.05rem}
.values {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #afcbca38;
  margin-top:38px;
  padding-top:25px;
  gap:30px;
  grid-column:1/13;
  }
.values>span {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:1.07rem;
  transition:transform .3s}
.values b {
  font:12px Arial;
  color:var(--color-gold-400);
  padding-bottom:10px;
  border-bottom:2px solid var(--color-gold-400)}

.vision>.wrap {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 40px}
.vision .section-heading h2 {
  font-size:1.5rem;
  max-width:330px}

/* 07. Services — asymmetric image-led bento */
.services {
  padding-top:75px;
  }
.services .section-heading {
  margin-top:0;
  }
.service-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:20px}
.service {
  position:relative;
  isolation:isolate;
  overflow:hidden}
.service-content {
  padding:26px;
  position:relative;
  z-index:2}
.service-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  gap:20px}
.service-top svg {
  width:34px;
  height:36px;
  color:var(--color-accent-600)}
.service-top>span {
  font:32px/1 Arial;
  color:#88a5a9;
  font-size:23px;
  }
.service h3 {
  font-size:1.28rem;
  max-width:360px}
.service p {
  font-size:1rem;
  color:var(--color-text-muted);
  margin-top:15px;
  max-width:420px}
.s1 {
  grid-column:1/6;
  grid-row:1/3;
  background:var(--color-primary-950);
  min-height:510px;
  color:white;
  display:flex;
  align-items:end;
  clip-path:polygon(0 0,100% 0,100% 100%,45px 100%,0 calc(100% - 45px))}
.s1 .service-content {
  padding:28px;
  }
.service-image {
  position:absolute;
  inset:0;
  z-index:-1}
.service-image:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#052f36 4%,#052f36de 30%,#052f3620 80%)}
.service-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 64%}
.s1 p {
  color:#d2e2e3}
.s1 .service-top svg {
  color:var(--color-gold-400)}
.s1 .service-top>span {
  color:var(--color-gold-400);
  font-size:2.7rem;
  font-weight:400}
.s1 h3 {
  font-size:1.55rem;
  }
.s2 {
  grid-column:6/13;
  background:var(--color-primary-800);
  color:white}
.s2 .service-content {
  max-width:580px}
.s2 p {
  color:#d0e3e5}
.s2 .service-top svg,.s2 .service-top>span {
  color:var(--color-gold-400)}
.s2 .service-accent {
  position:absolute;
  inset-inline-end:-90px;
  bottom:-150px;
  width:330px;
  height:330px;
  border:1px solid #dfbf8540;
  border-radius:50%;
  box-shadow:0 0 0 35px #ffffff03;
  display:none;
  }
.s3 {
  grid-column:6/13;
  background:#e8efec;
  border:1px solid #d0dcda}
.s3 .service-content {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  column-gap:28px}
.s3 .service-top {
  grid-column:1/3;
  margin-bottom:20px}
.s3 p {
  margin:0}
.s4,.s5 {
  grid-column:span 6;
  border-bottom:1px solid #a5bebd;
  background:#f1f4f1}
.s4 .service-content,.s5 .service-content {
  display:grid;
  grid-template-columns:65px 1fr;
  column-gap:25px}
.s4 .service-top,.s5 .service-top {
  grid-row:1/3;
  flex-direction:column;
  align-items:start;
  justify-content:start;
  gap:20px;
  margin:0}
.s4 h3,.s5 h3 {
  grid-column:2}
.s4 p,.s5 p {
  grid-column:2;
  margin-top:12px}
.service-accent {
  pointer-events:none}

/* 08. Sectors — diagonal plane and numbered line rhythm */
.sectors {
  background:#eef2ef;
  isolation:isolate;
  overflow:hidden}
.sectors:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:#dce7e380;
  clip-path:polygon(0 0,45% 0,30% 100%,0 100%);
  display:none;
  }
.sectors-grid {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:75px;
  align-items:center}
.sectors-grid>div:first-child>p:last-child {
  max-width:480px;
  color:var(--color-text-muted);
  margin-top:24px}
.sector-list article {
  display:flex;
  align-items:center;
  gap:25px;
  border-bottom:1px solid #bbcfc9;
  padding:18px 0;
  }
.sector-list article:first-child {
  border-top:1px solid #bbcfc9}
.sector-list span {
  font:12px Arial;
  color:var(--color-accent-600)}
.sector-list h3 {
  font-size:1.2rem;
  font-weight:500;
  }
.sector-list article:after {
  content:"";
  height:7px;
  width:7px;
  margin-inline-start:auto;
  transform:rotate(45deg);
  border:1px solid var(--color-gold-500);
  flex-shrink:0}

/* 09. Field imagery — staggered gallery, no invented project names */
.fieldwork {
  padding-bottom:95px;
  }
.fieldwork .section-heading {
  margin-bottom:42px;
  }
.field-grid {
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr;
  grid-template-rows:auto auto;
  gap:32px;
  align-items:start}
.field-item {
  position:relative}
.field-item img {
  width:100%;
  object-fit:cover;
  transition:transform .65s var(--ease);
  border-radius:2px}
.field-number {
  display:block;
  font:12px Arial;
  color:var(--color-text-muted);
  padding-bottom:12px}
.field-item figcaption {
  padding-block:20px;
  border-bottom:1px solid #c8d7d2}
.field-item h3 {
  font-size:1.2rem}
.field-item figcaption>span {
  color:var(--color-accent-600);
  font-size:.9rem;
  display:block;
  margin-bottom:5px}
.field-item p {
  font-size:.95rem;
  color:var(--color-text-muted);
  margin-top:8px}
.field-tall {
  grid-row:1/3;
  grid-column:1;
  position:relative}
.field-tall img {
  height:500px;
  clip-path:polygon(0 0,100% 0,100% 93%,85% 100%,0 100%)}
.field-tall:before {
  content:"";
  position:absolute;
  inset:40px -12px 110px 20px;
  border:1px solid var(--color-gold-500);
  z-index:1;
  pointer-events:none}
.field-item--2 {
  margin-top:0px;
  }
.field-item--2 img,.field-item--3 img {
  height:225px;
  }
.field-item--3 {
  margin-top:0}
.field-wide {
  grid-column:2/4;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:25px;
  align-items:center;
  margin-top:-102px}
.field-wide .field-number {
  position:absolute;
  top:0;
  inset-inline-end:0}
.field-wide img {
  height:175px;
  }
.field-wide figcaption {
  padding-top:25px;
  border-top:1px solid var(--color-gold-500)}

/* 10. Equipment — offset technical showcases */
.equipment {
  background:var(--color-primary-950);
  color:white;
  padding-bottom:72px;
  position:relative}
.equipment:before {
  content:"";
  position:absolute;
  inset:-40px 0 auto;
  height:70px;
  background:var(--color-primary-950);
  clip-path:polygon(0 58%,100% 0,100% 100%,0 100%)}
.equipment .kicker {
  color:var(--color-gold-400)}
.equipment .field-intro {
  color:#b6ced1}
.equipment-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px;
  align-items:start}
.equipment-grid article {
  position:relative;
  padding-top:20px;
  border-top:1px solid #a4c1c24d}
.equipment-grid article:nth-child(2) {
  margin-top:20px;
  }
.equipment-grid article:nth-child(3) {
  margin-top:40px;
  }
.equipment-number {
  font:12px Arial;
  color:var(--color-gold-400);
  display:block;
  margin-bottom:20px}
.equipment-photo {
  background:#f5f6f7;
  position:relative;
  padding:25px;
  clip-path:polygon(0 0,100% 0,100% 90%,88% 100%,0 100%)}
.equipment-photo img {
  width:100%;
  height:215px;
  object-fit:contain}
.equipment-copy {
  padding:20px 0;
  }
.equipment-copy>span {
  font-size:.9rem;
  color:var(--color-gold-400)}
.equipment-copy h3 {
  font-size:1.3rem;
  margin-block:8px 12px;
  }
.equipment-copy p {
  color:#bcd3d5;
  font-size:1.04rem;
  max-width:350px}

/* 11. Quality — open timeline and quiet surveying geometry */
.quality {
  background:#eaf0ed;
  overflow:hidden}
.quality-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center}
.quality-grid>div:first-child>p:not(.kicker) {
  color:var(--color-text-muted);
  max-width:480px;
  margin-top:25px}
.quality .text-link {
  margin-top:25px}
.quality-points {
  border-inline-start:1px solid #9db9b6;
  padding-inline-start:40px}
.quality-points article {
  display:flex;
  align-items:start;
  gap:25px;
  padding-block:22px;
  border-bottom:1px solid var(--color-border);
  position:relative}
.quality-points article:before {
  content:"";
  position:absolute;
  inset-inline-start:-45px;
  top:35px;
  width:9px;
  height:9px;
  background:var(--color-gold-500);
  transform:rotate(45deg)}
.quality-points article:last-child {
  border-bottom:0}
.quality-points article>span {
  font:12px/2 Arial;
  color:var(--color-accent-600)}
.quality-points p {
  font-size:1.04rem;
  color:var(--color-text-muted);
  margin-top:10px}

/* 12. Why — three-column interlocking layout */
.why-grid {
  display:grid;
  grid-template-columns:1.1fr .8fr 1.2fr;
  column-gap:40px;
  align-items:center}
.why-title {
  align-self:start;
  padding-top:30px}
.why-title h2 {
  font-size:var(--type-section);
  }
.why-visual {
  align-self:center;
  margin-top:35px;
  position:relative}
.why-visual:before {
  content:"";
  position:absolute;
  inset:-20px 20px 20px -20px;
  border:1px solid var(--color-gold-500);
  border-radius:12px 0 0 0;
  }
.why-visual img {
  width:100%;
  height:290px;
  object-fit:cover;
  border-radius:12px 0 0 0;
  }
.reasons article {
  display:flex;
  gap:18px;
  padding-block:24px;
  border-top:1px solid var(--color-border)}
.reasons article>span {
  font:11px/2 Arial;
  color:var(--color-accent-600)}
.reasons h3 {
  font-size:1.25rem}
.reasons p {
  font-size:1rem;
  color:var(--color-text-muted);
  margin-top:9px}

/* 13. Profile — a full-width sculpted document CTA */
.profile-section {
  position:relative;
  background:var(--color-primary-800);
  color:white;
  padding-block:70px 78px;
  overflow:hidden;
  border-radius:0 24px 0 0;
  margin-top:0;
  }
.profile-section:before {
  content:"";
  position:absolute;
  width:630px;
  height:630px;
  border:1px solid #d3b47d30;
  border-radius:50%;
  inset-inline-end:-140px;
  top:-170px;
  pointer-events:none;
  display:none;
  }
.profile-grid {
  display:grid;
  grid-template-columns:.9fr 1.3fr;
  gap:75px;
  align-items:center;
  position:relative;
  z-index:1}
.cover {
  padding:12px;
  background:#f1f0e8;
  box-shadow:var(--shadow-sm);
  position:relative;
  transform:none;
  margin:10px 15px 25px 0}
.cover:before,.cover:after {
  content:"";
  position:absolute;
  inset:0;
  background:#e4e6df;
  z-index:-1;
  border:1px solid #c8d4cc;
  display:none;
  }
.cover:before {
  transform:translate(-5px,6px);
  }
.cover:after {
  transform:translate(-13px,17px);
  z-index:-2}
.cover img {
  width:100%;
  height:auto}
.document-spine {
  position:absolute;
  bottom:-47px;
  inset-inline-start:0;
  font:12px Arial;
  letter-spacing:2px;
  color:#c1d8dc}
.profile-section .kicker {
  color:var(--color-gold-400)}
.profile-grid h2 {
  max-width:540px}
.profile-grid p:not(.kicker) {
  max-width:540px;
  margin-top:22px;
  color:#cce0e1}
.file-meta {
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  align-items:center;
  font-size:.875rem}
.file-meta span {
  border-inline-start:1px solid #b7cccc60;
  padding-inline-start:13px}
.profile-section .text-link {
  color:white}
.profile-section .actions {
  gap:25px}

/* 14. Contact and footer */
footer {
  background:var(--color-primary-950);
  color:white;
  padding-top:70px;
  position:relative;
  overflow:hidden}
footer:after {
  content:"";
  position:absolute;
  width:290px;
  height:380px;
  background:url('assets/images/logo.png') center/contain no-repeat;
  opacity:.035;
  bottom:0;
  inset-inline-end:-40px;
  pointer-events:none}
.contact-panel {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  border-bottom:1px solid #cfb17860;
  padding-bottom:60px;
  margin-bottom:65px;
  position:relative;
  z-index:1}
.contact-details {
  display:grid;
  grid-template-columns:auto auto;
  gap:0 40px;
  align-items:center}
.contact-details h3 {
  grid-column:1/3;
  font-size:clamp(2rem,3.7vw,3.5rem);
  margin-bottom:10px}
.contact-details p {
  grid-column:1/3;
  color:#b8d0d1;
  margin-bottom:20px}
.phone {
  font-size:1.75rem;
  line-height:1.7;
  color:var(--color-gold-400);
  font-weight:500;
  display:block;
  text-align:start;
  direction:ltr;
  white-space:nowrap;
  padding-block:5px}
.contact-call {
  width:125px;
  height:125px;
  border:1px solid #d3b47d90;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-shrink:0;
  transition:background .25s}
.contact-call>span:first-child {
  font:35px Arial;
  color:var(--color-gold-400)}
.contact-call>span:last-child {
  font-size:1rem}
.contact-call:hover {
  background:#ffffff08}
.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:100px;
  padding-bottom:50px}
.footer-brand>img {
  width:50px;
  height:78px;
  object-fit:contain;
  margin-bottom:20px}
.footer-brand h2 {
  font-size:1.5rem;
  margin-bottom:8px}
.footer-brand p {
  font-size:1rem;
  color:#b6cdce}
.footer-desc {
  max-width:350px;
  margin-top:20px}
.footer-grid h3 {
  font-size:1.2rem;
  margin-bottom:20px}
.footer-grid a {
  display:block;
  font-size:1rem;
  padding-block:5px;
  color:#c7dcdd;
  min-height:36px}
.footer-grid>div>p {
  color:#b6cdce}
.footer-grid a:hover {
  color:var(--color-gold-400)}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  padding-block:23px;
  border-top:1px solid #9abdbc30;
  position:relative;
  z-index:1}
.footer-bottom p,.footer-bottom a {
  font-size:.875rem;
  color:#b6cdce}
.footer-bottom a {
  padding-block:8px}

/* 15. Motion enhancements — visible content is the default */
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .button:hover {
  transform:translateY(-3px)}
.button:hover span {
  transform:translate(-3px,-2px)}
.values>span:hover {
  transform:translateY(-4px)}
.service-top svg {
  transition:transform .35s}
.service:hover .service-top svg {
  transform:scale(1.08)}
.s4:hover,.s5:hover {
  background:#e6efeb}
.field-item:hover img {
  transform:scale(1.025)}
}

/* 16. Responsive recomposition */
@media(min-width:1600px) {
  .hero-grid {
  min-height:580px}
.hero-art {
  grid-template-rows:28px 250px 145px 25px}
.hero h1 {
  font-size:var(--type-hero)}
}

@media(max-width:1150px) {
  .wrap {
  width:calc(100% - 64px)}
nav {
  gap:13px}
nav>a {
  font-size:.94rem}
.brand strong {
  font-size:1rem}
.brand small {
  font-size:.78rem}
.hero-grid {
  grid-template-columns:1.1fr 1fr;
  gap:20px}
.hero h1 {
  font-size:3.1rem}
.hero-art {
  grid-template-rows:35px 235px 150px 30px}
.hero .button {
  padding:12px 18px;
  gap:15px}
.hero-inset img {
  height:180px}
.photo-caption {
  padding:14px 18px}
.about-content {
  padding-inline-end:15px}
.about-visual {
  grid-column:8/13}
.about-content,.section-label {
  grid-column:1/8}
.vision-grid {
  gap:65px}
.sectors-grid,.quality-grid {
  gap:65px}
.why-grid {
  column-gap:35px}
.equipment-grid {
  gap:25px}
.equipment-photo {
  padding:15px}
.equipment-photo img {
  height:230px}
.profile-grid {
  gap:60px}
.footer-grid {
  gap:60px}
}

@media(max-width:980px) {
  .vision>.wrap {
  display:block}
.vision .section-heading {
  margin-bottom:35px}
.vision .section-heading h2 {
  max-width:600px}
.vision-grid {
  display:grid}
.header-inner,.header.is-scrolled .header-inner {
  min-height:84px}
.brand-mark img {
  height:50px;
  width:33px}
.menu-toggle {
  flex-shrink:0;
  display:block;
  background:transparent;
  color:var(--color-text);
  border:1px solid var(--color-border);
  padding:8px 17px;
  min-height:44px}
.menu-toggle span {
  margin-inline-start:12px}
.js nav {
  display:flex;
  position:fixed;
  inset-block-start:0;
  inset-inline-start:0;
  width:min(360px,88vw);
  height:100dvh;
  background:var(--color-surface);
  z-index:55;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  padding:26px;
  gap:5px;
  overflow:auto;
  visibility:hidden;
  transform:translateX(105%);
  transition:transform .38s var(--ease),visibility .38s;
  box-shadow:-20px 0 60px #0002}
.js nav.open {
  visibility:visible;
  transform:translateX(0)}
.js nav>a {
  font-size:1.15rem;
  padding:15px 8px;
  border-bottom:1px solid var(--color-border);
  white-space:normal}
.js nav .nav-contact {
  padding-inline:20px;
  margin-top:15px}
.drawer-close {
  display:flex;
  background:transparent;
  border:0;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  margin-bottom:20px;
  color:var(--color-text)}
.drawer-close span {
  font-size:30px}
.drawer-backdrop:not([hidden]) {
  display:block;
  position:fixed;
  inset:0;
  min-height:100dvh;
  background:#032b3580;
  z-index:52}
.menu-open {
  overflow:hidden}
.header:has(nav.open) {
  backdrop-filter:none}
html:not(.js) .header-inner {
  flex-wrap:wrap;
  padding-block:12px}
html:not(.js) nav {
  flex-wrap:wrap;
  gap:18px}
.hero-grid {
  min-height:0;
  padding-block:60px 65px}
.hero h1 {
  font-size:2.9rem}
.hero .intro {
  font-size:1.05rem}
.eyebrow {
  font-size:.9rem}
.hero-art {
  grid-template-columns:.7fr 2.3fr .3fr;
  grid-template-rows:30px 225px 130px 30px}
.photo-caption {
  font-size:.8rem;
  transform:translate(8px,25px)}
.photo-caption strong {
  font-size:1rem}
.hero-inset {
  width:50%}
.hero-inset img {
  height:160px}
.hero .actions {
  flex-direction:column;
  align-items:stretch;
  max-width:320px;
  gap:12px}
.about {
  padding-block:72px 82px}
.about-grid {
  gap:25px}
.about-photo {
  height:350px}
.section-label {
  padding-inline-start:20px}
.about-content {
  padding-inline:20px}
.about-content .about-lead {
  font-size:1.13rem}
.vision-grid {
  gap:40px}
.values {
  grid-template-columns:1fr 1fr;
  gap:25px}
.service-content {
  padding:25px}
.s1 {
  grid-column:1/7}
.s2,.s3 {
  grid-column:7/13}
.s3 .service-content {
  display:block}
.s3 p {
  margin-top:15px}
.s1 .service-content {
  padding:28px}
.service h3 {
  font-size:1.3rem}
.s1 h3 {
  font-size:1.7rem}
.sectors-grid,.quality-grid {
  gap:40px}
.field-grid {
  gap:23px;
  grid-template-columns:1fr 1fr}
.field-tall {
  grid-row:1/3}
.field-item--2 {
  margin-top:50px}
.field-item--3 {
  grid-column:2}
.field-item--2 img,.field-item--3 img {
  height:230px}
.field-wide {
  grid-column:1/3;
  max-width:600px;
  margin-top:20px;
  grid-template-columns:180px 1fr}
.equipment-grid {
  gap:25px}
.equipment-photo img {
  height:175px}
.equipment-photo {
  padding:12px}
.equipment-copy h3 {
  font-size:1.25rem}
.why-grid {
  grid-template-columns:1fr 1.25fr;
  gap:35px}
.why-title {
  grid-column:1;
  grid-row:1;
  padding:0}
.why-visual {
  grid-column:1;
  grid-row:2;
  margin-top:0;
  width:80%}
.why-visual img {
  height:250px}
.reasons {
  grid-column:2;
  grid-row:1/3}
.profile-grid {
  grid-template-columns:.85fr 1fr;
  gap:45px}
.profile-section {
  border-top-right-radius:24px}
.profile-grid h2 {
  font-size:2rem}
.footer-grid {
  gap:45px}
.contact-details {
  gap:0 25px}
.phone {
  font-size:1.55rem}
}

@media(max-width:700px) {
  .vision-grid article+article {
  margin-top:0;
  padding-inline-start:0;
  border-inline-start:0;
  border-top:1px solid #aec4c744;
  padding-top:25px}
.hero .actions {
  gap:12px}
.hero h1 br {
  display:initial}
.hero h1 {
  max-width:360px;
  text-wrap:wrap}
body {
  font-size:17px}
.wrap {
  width:calc(100% - 40px)}
h2 {
  font-size:2.0rem}
.section {
  padding-block:62px}
.section-heading {
  display:block;
  margin-bottom:32px}
.section-heading>.field-intro,.section-note {
  display:block;
  margin-top:18px;
  max-width:100%}
.kicker,.section-label>span {
  font-size:.9rem;
  margin-bottom:18px}
.hero {
  min-height:0}
.hero-grid {
  grid-template-columns:1fr;
  gap:35px;
  padding-block:28px 42px}
.hero-copy {
  padding:0}
.hero h1 {
  font-size:clamp(2.3rem,7.7vw,2.9rem);
  max-width:550px;
  margin-block:20px}
.hero .intro {
  font-size:1.09rem;
  max-width:520px}
.eyebrow {
  font-size:.9rem;
  max-width:400px;
  line-height:1.6}
.hero .actions {
  flex-direction:row;
  align-items:center;
  max-width:none;
  gap:12px;
  margin-top:26px}
.hero .button {
  font-size:.95rem;
  padding:12px 16px;
  gap:15px}
.hero-art {
  width:min(95%,430px);
  margin-inline:auto;
  grid-template-columns:1fr 2.4fr .3fr;
  grid-template-rows:25px 200px 130px 25px}
.hero-inset img {
  height:150px}
.hero-offset {
  transform:translate(12px,10px)}
.photo-frame:before {
  inset:-12px 13px 16px -12px}
.photo-caption {
  transform:translate(0,24px);
  padding:14px 18px}
.technical-label {
  font-size:11px;
  letter-spacing:1.5px;
  top:-24px}
.hero-baseline {
  gap:14px;
  font-size:.75rem}
.hero-baseline>span:last-child {
  font-size:11px;
  letter-spacing:1px;
  max-width:115px;
  line-height:1.5}
.about {
  clip-path:polygon(0 0,100% 0,100% 98%,0 100%);
  padding-block:65px 75px;
  margin-bottom:0}
.about-grid {
  grid-template-columns:1fr;
  gap:30px}
.section-label,.about-content,.about-visual {
  grid-column:auto;
  grid-row:auto}
.section-label {
  border:0;
  padding:0}
.section-label h2 {
  font-size:2.05rem}
.about-content {
  padding:0;
  grid-row:2}
.about-content p {
  font-size:1.04rem}
.about-content .about-lead {
  font-size:1.16rem}
.about-visual {
  width:80%;
  max-width:340px;
  justify-self:end;
  margin-top:15px}
.about-photo {
  height:300px;
  border-top-left-radius:12px}
.about-outline {
  border-top-left-radius:12px}
.vision {
  padding-block:65px}
.vision-grid {
  grid-template-columns:1fr;
  gap:35px}
.vision .section-heading {
  margin-bottom:30px}
.vision-grid h3 {
  font-size:1.4rem;
  max-width:450px}
.vision-grid p {
  max-width:none}
.vision-grid article {
  padding-top:25px}
.values {
  grid-template-columns:1fr;
  margin-top:38px;
  gap:0;
  padding-top:10px}
.values>span {
  border-bottom:1px solid #aec6c324;
  padding-block:17px;
  gap:20px}
.services .section-heading {
  margin-top:0}
.service-grid {
  grid-template-columns:1fr;
  gap:18px}
.service {
  grid-column:auto;
  grid-row:auto}
.s1 {
  min-height:430px}
.s1 .service-content {
  padding:30px}
.s1 .service-top>span {
  font-size:2.6rem}
.s1 h3 {
  font-size:1.55rem}
.s2 .service-content,.s3 .service-content {
  padding:28px}
.s3 .service-content {
  display:block}
.s3 p {
  margin-top:15px}
.s4 .service-content,.s5 .service-content {
  grid-template-columns:45px 1fr;
  gap:0 20px;
  padding:25px}
.service h3 {
  font-size:1.3rem}
.service p {
  font-size:1.04rem}
.service-top {
  margin-bottom:20px}
.sectors-grid {
  grid-template-columns:1fr;
  gap:35px}
.sector-list article {
  padding-block:20px}
.sector-list h3 {
  font-size:1.25rem}
.fieldwork {
  padding-bottom:100px}
.fieldwork .section-heading {
  margin-bottom:35px}
.field-grid {
  grid-template-columns:1fr 1fr;
  gap:25px 18px}
.field-tall {
  grid-column:1/3;
  grid-row:auto;
  max-width:80%;
  margin-inline-start:0}
.field-tall img {
  height:430px}
.field-tall:before {
  inset:40px -10px 95px 15px}
.field-item--2 {
  margin-top:0;
  grid-column:1}
.field-item--3 {
  margin-top:55px;
  grid-column:2}
.field-item--2 img,.field-item--3 img {
  height:220px}
.field-item h3 {
  font-size:1.1rem}
.field-item figcaption {
  padding-block:15px}
.field-wide {
  grid-column:1/3;
  grid-template-columns:140px 1fr;
  gap:20px;
  margin-top:0}
.field-wide img {
  height:180px}
.field-wide figcaption {
  padding-top:22px}
.equipment {
  padding-bottom:75px}
.equipment-grid {
  grid-template-columns:1fr;
  gap:40px}
.equipment-grid article:nth-child(n) {
  margin-top:0;
  display:grid;
  grid-template-columns:1fr;
  gap:0}
.equipment-number {
  font-size:.8rem}
.equipment-photo {
  max-width:370px;
  width:100%;
  padding:24px}
.equipment-photo img {
  height:225px}
.equipment-copy {
  padding-bottom:0}
.equipment-copy h3 {
  font-size:1.3rem}
.equipment-copy p {
  max-width:none}
.quality-grid {
  grid-template-columns:1fr;
  gap:38px}
.quality-points {
  padding-inline-start:25px}
.quality-points article {
  gap:20px}
.quality-points article:before {
  inset-inline-start:-30px}
.why-grid {
  grid-template-columns:1fr;
  gap:30px}
.why-title,.why-visual,.reasons {
  grid-column:auto;
  grid-row:auto}
.why-visual {
  grid-row:3;
  width:70%;
  max-width:300px;
  justify-self:end;
  margin-top:15px}
.why-visual img {
  height:270px}
.reasons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 25px}
.reasons article {
  gap:12px}
.reasons p {
  font-size:1rem}
.profile-section {
  padding-block:70px 80px;
  margin-top:0;
  border-top-right-radius:16px}
.profile-grid {
  grid-template-columns:1fr;
  gap:55px}
.profile-grid>div:last-child {
  grid-row:1}
.cover {
  width:min(85%,340px);
  justify-self:center;
  margin:0 10px 25px 0}
.profile-grid h2 {
  font-size:2rem}
.profile-grid .actions {
  gap:18px}
.contact-panel {
  gap:25px;
  align-items:start;
  margin-bottom:45px;
  padding-bottom:40px}
.contact-details {
  grid-template-columns:1fr;
  gap:0}
.contact-details h3,.contact-details p {
  grid-column:auto}
.contact-details h3 {
  font-size:2.4rem}
.contact-details p {
  font-size:1rem;
  margin-bottom:16px}
.phone {
  font-size:1.65rem}
.contact-call {
  width:85px;
  height:85px;
  align-self:end}
.contact-call>span:first-child {
  font-size:25px}
.contact-call>span:last-child {
  font-size:.85rem}
.footer-grid {
  grid-template-columns:1fr 1fr;
  gap:40px 30px}
.footer-brand {
  grid-column:1/3}
.footer-brand .footer-desc {
  max-width:430px}
.footer-grid h3 {
  font-size:1.15rem}
.footer-grid>div>p,.footer-grid a {
  font-size:1rem}
.footer-bottom {
  flex-direction:column;
  align-items:start;
  gap:12px;
  padding-block:22px}
.footer-bottom p {
  font-size:.8rem}
.header-inner {
  gap:15px}
.brand strong {
  font-size:1rem}
.brand small {
  font-size:.78rem}
.brand {
  gap:9px}
.brand-mark {
  padding:6px 8px}
.menu-toggle {
  font-size:.9rem;
  padding:8px 12px}
}

@media(max-width:390px) {
  .hero .actions {
  display:grid;
  grid-template-columns:1fr;
  width:100%}
.hero .button {
  width:100%;
  justify-content:space-between;
  padding-inline:23px}
.hero h1 {
  font-size:2.35rem}
.hero-art {
  width:94%;
  grid-template-rows:25px 180px 115px 25px}
.hero-inset img {
  height:130px}
.photo-caption {
  font-size:.75rem;
  padding:11px 14px}
.photo-caption strong {
  font-size:.95rem}
.hero-baseline>span:last-child {
  display:none}
.hero-baseline {
  max-width:calc(100% - 40px)}
.brand small {
  font-size:.73rem}
.brand strong {
  font-size:.93rem}
.menu-toggle span {
  margin-inline-start:5px}
.menu-toggle {
  padding-inline:10px}
.field-item--2 img,.field-item--3 img {
  height:190px}
.field-wide {
  grid-template-columns:120px 1fr;
  gap:15px}
.field-wide img {
  height:185px}
.field-wide h3 {
  font-size:1.08rem}
.reasons {
  grid-template-columns:1fr;
  gap:0}
.contact-call {
  width:68px;
  height:68px}
.contact-call>span:last-child {
  font-size:.75rem}
.phone {
  font-size:1.4rem}
.footer-grid {
  grid-template-columns:1fr}
.footer-brand {
  grid-column:auto}
.profile-grid .actions {
  align-items:stretch;
  flex-direction:column}
.profile-grid .text-link {
  align-self:start}
.eyebrow {
  font-size:.82rem}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
}

@media print {
  .header {
  position:static;
  backdrop-filter:none}
.drawer-backdrop,.menu-toggle,.drawer-close {
  display:none!important}
.js nav {
  display:none}
.hero,.section,.profile-section,footer {
  clip-path:none;
  border-radius:0}
a {
  overflow-wrap:anywhere}
.reveal {
  opacity:1!important;
  transform:none!important;
  clip-path:none!important}
}

/* 17. Dedicated contact page */
.contact-hero {
  position:relative;
  isolation:isolate;
  background:var(--color-primary-950);
  color:white;
  padding-block:40px 90px;
  overflow:hidden}
.contact-hero:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(125deg,transparent 62%,#155b6320 62.1%);
  }
.contact-hero-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  align-items:center;
  gap:65px}
.contact-breadcrumb {
  font-size:.9rem;
  color:#b7d0d1;
  display:inline-flex;
  gap:20px;
  margin-bottom:35px;
  min-height:35px}
.contact-hero .kicker {
  color:var(--color-gold-400)}
.contact-hero h1 {
  font-size:clamp(2.5rem,4vw,3.6rem);
  line-height:1.3;
  font-weight:700;
  margin-bottom:25px}
.contact-hero h1 em {
  color:var(--color-gold-400);
  font-style:normal}
.contact-intro {
  font-size:1.15rem;
  max-width:630px;
  color:#c7dcdd;
  line-height:1.95}
.contact-emblem {
  position:relative;
  display:grid;
  place-items:center;
  min-height:280px;
  }
.contact-emblem>img {
  width:92px;
  height:143px;
  object-fit:contain;
  opacity:.95}
.contact-orbit {
  position:absolute;
  inset:20px;
  border:1px solid #d3af7460;
  border-radius:16px;
  transform:none;
  }
.contact-orbit:after {
  content:"";
  position:absolute;
  inset:24px;
  border:1px solid #93babb33;
  border-radius:120px 4px 120px 4px;
  display:none;
  }
.emblem-label {
  position:absolute;
  bottom:22px;
  font:12px Arial;
  letter-spacing:2px;
  color:#b7d0d1}
.contact-channels {
  position:relative;
  padding-block:0 85px;
  margin-top:-45px;
  z-index:2}
.contact-section-title {
  background:var(--color-surface);
  padding:35px 40px 25px;
  border-top:3px solid var(--color-gold-500);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px}
.contact-section-title .kicker {
  margin-bottom:12px}
.contact-section-title h2 {
  font-size:2.15rem}
.preview-badge {
  display:block;
  font-size:.85rem;
  color:#685327;
  background:#eee6d5;
  border:1px solid #daceb5;
  padding:7px 14px;
  max-width:260px}
.contact-channel-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr .9fr;
  gap:22px}
.channel-card {
  position:relative;
  background:#edf2ef;
  border:1px solid var(--color-border);
  padding:35px;
  display:flex;
  flex-direction:column;
  align-items:start;
  min-width:0}
.channel-card--phone {
  background:var(--color-primary-800);
  color:white;
  border-color:var(--color-primary-800)}
.channel-icon {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:var(--color-accent-600);
  border:1px solid #a8c1ba;
  padding:11px;
  margin-bottom:27px}
.channel-icon svg {
  width:25px;
  height:25px}
.channel-card--phone .channel-icon {
  color:var(--color-gold-400);
  border-color:#d3af7460}
.channel-index {
  position:absolute;
  inset-inline-end:30px;
  top:32px;
  font:12px Arial;
  color:#6d888a}
.channel-card--phone .channel-index {
  color:#bdd5d7}
.channel-card h3 {
  font-size:1.55rem;
  margin-bottom:15px}
.channel-card>p {
  font-size:1.05rem;
  color:var(--color-text-muted);
  margin-bottom:20px}
.channel-card--phone>p {
  color:#c8dbdd}
.channel-phone {
  font-size:1.85rem;
  font-weight:500;
  color:var(--color-gold-400);
  line-height:1.65;
  white-space:nowrap;
  padding-block:5px;
  max-width:100%}
.channel-email {
  font-size:clamp(1.15rem,1.7vw,1.6rem);
  font-weight:500;
  border-bottom:1px solid var(--color-gold-500);
  padding-block:10px;
  overflow-wrap:anywhere;
  max-width:100%}
.channel-caption {
  font-size:.8rem;
  line-height:1.7;
  display:block;
  color:var(--color-text-muted);
  margin-top:auto;
  padding-top:28px}
.channel-card--phone .channel-caption {
  color:#c4d8d9}
.channel-card .address-placeholder {
  font-size:1rem;
  color:var(--color-text);
  padding-block:12px;
  border-top:1px solid var(--color-border);
  margin-top:5px}
.contact-social-section {
  padding-block:85px;
  background:#e7eeea;
  position:relative;
  overflow:hidden}
.contact-social-section:before {
  content:"";
  position:absolute;
  width:540px;
  height:540px;
  inset-inline-start:-300px;
  top:20px;
  border:1px solid #aac3b95c;
  border-radius:50%;
  box-shadow:0 0 0 60px #ffffff10;
  pointer-events:none;
  display:none;
  }
.contact-social-layout {
  position:relative;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px;
  align-items:start}
.social-intro>p:not(.kicker) {
  color:var(--color-text-muted);
  margin-top:20px}
.social-note {
  border-inline-start:2px solid var(--color-gold-500);
  padding-inline-start:17px;
  font-size:.95rem;
  max-width:330px;
  margin-top:30px;
  color:var(--color-text-muted)}
.contact-social-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px}
.social-account {
  display:flex;
  align-items:center;
  gap:17px;
  padding:23px 20px;
  border:1px solid #bccfc8;
  background:#f8faf8;
  min-width:0;
  transition:background .25s,border-color .25s,transform .35s var(--ease)}
.social-account-icon {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:30px;
  color:var(--color-accent-600)}
.social-account-icon svg {
  width:27px;
  height:27px}
.social-account-copy {
  min-width:0}
.social-account-copy strong {
  display:block;
  font-size:1.15rem}
.social-account-copy>span {
  display:block;
  font-size:.82rem;
  color:var(--color-text-muted);
  overflow-wrap:anywhere}
.social-account-arrow {
  margin-inline-start:auto;
  color:#897046;
  font:19px Arial}
.social-account:hover {
  background:white;
  border-color:var(--color-gold-500)}
.social-status {
  grid-column:1/-1;
  min-height:30px;
  font-size:.9rem;
  color:var(--color-text-muted);
  margin:0;
  padding-top:5px}
.contact-profile-strip {
  padding-block:65px;
  background:var(--color-surface)}
.contact-profile-strip>.wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px}
.contact-profile-strip .kicker {
  margin-bottom:12px}
.contact-profile-strip h2 {
  font-size:2rem}
.contact-page footer {
  border-top:1px solid #d3af7470}
.contact-page .footer-grid {
  padding-top:10px}

@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .social-account:hover {
  transform:translateY(-4px)}
}

@media(max-width:1100px) {
  .contact-hero-grid {
  gap:40px}
.contact-channel-grid {
  gap:16px}
.channel-card {
  padding:27px}
.channel-phone {
  font-size:1.6rem}
.contact-social-layout {
  gap:45px}
.social-account {
  padding:20px 16px;
  gap:12px}
}

@media(max-width:850px) {
  .contact-hero-grid {
  grid-template-columns:1.5fr .8fr;
  gap:30px}
.contact-emblem {
  min-height:300px}
.contact-emblem>img {
  width:85px;
  height:132px}
.contact-orbit {
  inset:30px 0}
.emblem-label {
  font-size:11px;
  letter-spacing:1px;
  bottom:35px}
.contact-channel-grid {
  grid-template-columns:1fr 1fr}
.channel-card--phone {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:25px}
.channel-card--phone .channel-icon {
  grid-column:1;
  grid-row:1}
.channel-card--phone h3 {
  grid-column:1;
  grid-row:2}
.channel-card--phone>p {
  grid-column:1;
  grid-row:3}
.channel-card--phone .channel-phone {
  grid-column:2;
  align-self:center;
  grid-row:2}
.channel-card--phone .channel-phone+.channel-phone {
  grid-row:3}
.channel-card--phone .channel-caption {
  grid-column:1/-1;
  padding-top:10px}
.contact-social-layout {
  grid-template-columns:1fr;
  gap:35px}
.social-note {
  max-width:500px}
.contact-profile-strip h2 {
  font-size:1.75rem}
.contact-profile-strip .button {
  flex-shrink:0;
  gap:15px}
}

@media(max-width:600px) {
  .contact-hero {
  padding-block:35px 100px}
.contact-hero-grid {
  grid-template-columns:1fr;
  gap:25px}
.contact-breadcrumb {
  margin-bottom:20px}
.contact-hero h1 {
  font-size:2.5rem}
.contact-intro {
  font-size:1.05rem}
.contact-emblem {
  min-height:170px;
  width:210px;
  justify-self:end;
  margin-top:10px}
.contact-emblem>img {
  width:62px;
  height:97px}
.contact-orbit {
  inset:0;
  border-radius:12px}
.contact-orbit:after {
  inset:15px;
  border-radius:50px 3px 50px 3px}
.emblem-label {
  font-size:10px;
  letter-spacing:1px;
  bottom:8px}
.contact-section-title {
  padding:28px 23px;
  flex-direction:column;
  align-items:start;
  gap:20px}
.contact-section-title h2 {
  font-size:1.9rem}
.preview-badge {
  font-size:.8rem;
  max-width:100%}
.contact-channel-grid {
  grid-template-columns:1fr;
  gap:17px}
.channel-card--phone {
  display:flex;
  grid-column:auto}
.channel-card {
  padding:28px}
.channel-phone {
  font-size:1.8rem}
.channel-card--phone .channel-caption {
  padding-top:28px}
.channel-email {
  font-size:1.45rem}
.channel-icon {
  margin-bottom:23px}
.channel-card>p {
  font-size:1rem}
.contact-channels {
  padding-bottom:60px}
.contact-social-section {
  padding-block:60px}
.contact-social-grid {
  grid-template-columns:1fr;
  gap:14px}
.social-account {
  padding:20px 23px;
  gap:20px}
.social-account-copy strong {
  font-size:1.2rem}
.social-account-copy>span {
  font-size:.9rem}
.contact-profile-strip {
  padding-block:50px}
.contact-profile-strip>.wrap {
  flex-direction:column;
  align-items:start;
  gap:25px}
.contact-profile-strip .button {
  width:100%;
  justify-content:space-between}
.contact-profile-strip h2 {
  font-size:1.8rem}
.contact-social-layout h2 {
  font-size:2.2rem}
}

/* 18. Homepage contact hub and editable Google Maps embed */
.contact-hub {
  position:relative;
  z-index:1;
  padding-block:5px 55px;
  margin-bottom:45px;
  border-bottom:1px solid #b99b6260}
.contact-hub-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  margin-bottom:30px;
  }
.contact-hub-heading .kicker {
  color:var(--color-gold-400);
  margin-bottom:18px}
.contact-hub-heading h2 {
  font-size:clamp(2.1rem,3vw,2.85rem);
  line-height:1.3}
.contact-hub-heading h2 br {
  display:none}
.contact-hub-heading h2 em {
  font-style:normal;
  color:var(--color-gold-400)}
.contact-hub-heading p:not(.kicker) {
  color:#bfd6d8;
  margin-top:17px;
  font-size:1.1rem}
.contact-hub-layout {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:65px;
  align-items:start}
.hub-information {
  border-top:1px solid #abc4c63d}
.hub-detail {
  display:flex;
  gap:22px;
  padding-block:25px;
  border-bottom:1px solid #abc4c62b}
.hub-icon {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:44px;
  height:44px;
  border:1px solid #d5b78350;
  color:var(--color-gold-400);
  border-radius:2px}
.hub-icon svg {
  width:23px;
  height:23px}
.hub-detail>div {
  min-width:0}
.hub-detail h3 {
  font-size:1rem;
  font-weight:500;
  color:#bdd3d5;
  margin-bottom:9px}
.hub-phones {
  display:flex;
  flex-wrap:wrap;
  gap:4px 28px}
.hub-phones a {
  font-size:1.65rem;
  line-height:1.8;
  color:white;
  font-weight:500;
  white-space:nowrap}
.hub-email {
  display:inline-block;
  font-size:1.4rem;
  font-weight:500;
  color:white;
  overflow-wrap:anywhere;
  max-width:100%;
  padding-block:3px}
.hub-detail p {
  font-size:1.15rem;
  color:white}
.hub-detail small {
  font-size:.82rem;
  display:block;
  color:#a5c2c5;
  margin-top:5px}
.hub-social {
  padding-top:28px}
.hub-social h3 {
  font-size:1rem;
  font-weight:500;
  color:#c2d8d9;
  margin-bottom:17px}
.hub-social-links {
  display:flex;
  flex-wrap:wrap;
  gap:11px}
.hub-social-link {
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  border:1px solid #a6c1c347;
  color:#deeeee;
  background:#ffffff03;
  transition:background .25s,border-color .25s,color .25s}
.hub-social-link svg {
  width:22px;
  height:22px}
.hub-social-link:hover {
  background:#d6b78018;
  border-color:var(--color-gold-400);
  color:var(--color-gold-400)}
.hub-social-status {
  color:#a5c2c5;
  font-size:.8rem;
  min-height:24px;
  margin-top:12px}
.hub-contact-link {
  color:var(--color-gold-400);
  font-size:.95rem;
  margin-top:13px}
.hub-map-card {
  background:#113f47;
  border:1px solid #b7c9c541;
  position:relative;
  padding:12px;
  min-width:0;
  box-shadow:none;
  }
.hub-map-card:before {
  content:"";
  position:absolute;
  width:55px;
  height:55px;
  border-top:2px solid var(--color-gold-500);
  border-inline-end:2px solid var(--color-gold-500);
  inset-block-start:-9px;
  inset-inline-end:-9px;
  pointer-events:none}
.hub-map-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:12px 10px 20px;
  font-size:1.1rem}
.hub-map-badge {
  font-size:.75rem;
  color:var(--color-gold-400);
  border:1px solid #d5b78345;
  padding:3px 10px}
.hub-map-frame {
  position:relative;
  min-height:390px;
  background:#dfe8e3}
.hub-map-frame iframe {
  display:block;
  border:0;
  width:100%;
  height:390px}
.hub-map-offline {
  min-height:390px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:30px;
  gap:15px;
  color:var(--color-primary-950);
  background:linear-gradient(140deg,#eff3ee,#d9e5df)}
.hub-map-offline svg {
  width:45px;
  height:45px;
  color:var(--color-accent-600);
  margin-bottom:5px}
.hub-map-offline strong {
  font-size:1.2rem;
  max-width:270px}
.hub-map-offline p {
  font-size:1rem;
  color:var(--color-text-muted);
  max-width:300px}
.hub-map-bottom {
  padding:23px 10px 13px;
  display:flex;
  gap:25px;
  align-items:center;
  justify-content:space-between}
.hub-map-bottom strong {
  font-size:1.05rem;
  font-weight:500}
.hub-map-bottom p {
  font-size:.8rem;
  color:#b2cdcf;
  margin-top:5px}
.hub-map-bottom a {
  display:flex;
  gap:12px;
  align-items:center;
  white-space:nowrap;
  color:var(--color-gold-400);
  font-size:.95rem;
  min-height:44px}
.hub-map-bottom a:hover {
  color:white}

@media(max-width:1050px) {
  .contact-hub-layout {
  gap:35px;
  grid-template-columns:1fr 1.1fr}
.hub-phones {
  flex-direction:column}
.hub-map-frame,.hub-map-offline {
  min-height:420px}
.hub-map-frame iframe {
  height:420px}
.hub-map-bottom {
  align-items:start;
  flex-direction:column;
  gap:10px}
}

@media(max-width:700px) {
  .contact-hub {
  padding-bottom:45px;
  margin-bottom:45px}
.contact-hub-heading {
  margin-bottom:30px;
  gap:20px}
.contact-hub-heading h2 {
  font-size:2.2rem}
.contact-hub-heading h2 br {
  display:block}
.contact-hub-heading p:not(.kicker) {
  font-size:1rem}
.contact-hub-layout {
  grid-template-columns:1fr;
  gap:40px}
.hub-phones {
  flex-direction:row;
  gap:0 22px}
.hub-phones a {
  font-size:1.5rem}
.hub-detail {
  gap:17px;
  padding-block:22px}
.hub-email {
  font-size:1.3rem}
.hub-map-frame,.hub-map-offline {
  min-height:320px}
.hub-map-frame iframe {
  height:320px}
.hub-map-heading {
  font-size:1rem}
.hub-map-card {
  padding:10px}
.hub-map-bottom {
  padding-inline:7px}
.hub-social-links {
  gap:10px}
.hub-social-link {
  width:43px;
  height:43px}
.hub-detail small {
  font-size:.8rem}
}