/* ============================================================
   Amanecer AI
   Palette from the "concept 02" brand board; logo artwork from the
   supplied orange-and-navy logo and banner. Four brand values only.
   Every other tone below is mixed from them, and the mix is written
   next to it. See DESIGN.md.
   ============================================================ */
:root{
  --navy:#0a1930;              /* Midnight Navy   */
  --copper:#b87333;            /* Brushed Copper  */
  --ivory:#fff8f0;             /* Ivory Cream     */
  --slate:#4a4e53;             /* Slate Gray      */

  --rule:#ddd9d5;              /* navy 14% on ivory   — hairline on light */
  --sand:#f3e2d1;              /* copper 17% on ivory — tinted panel      */
  --navy-rule:#313d4f;         /* ivory 16% on navy   — hairline on dark  */
  --navy-lift:#1b293d;         /* ivory  7% on navy   — raised surface    */
  --copper-lit:#cd9b6c;        /* copper 70% + ivory  — copper on dark    */
  --ivory-dim:#c9c5c0;         /* ivory 72% on navy   — body copy on dark */

  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:'Hanken Grotesk','Segoe UI',Helvetica,Arial,sans-serif;

  --gutter:64px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--ivory);color:var(--navy);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400}
em{font-style:italic;font-weight:400}
p{line-height:1.7}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{display:block}
img{max-width:100%}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--copper);outline-offset:6px}
.dark-section a:focus-visible,.dark-section button:focus-visible,.dark-section summary:focus-visible,.intro a:focus-visible{outline-color:var(--copper-lit)}

.wrap{max-width:1480px;margin-inline:auto;padding-inline:var(--gutter)}
.section-space{padding-block:124px}
.skip-link{position:fixed;top:12px;left:12px;z-index:20;background:var(--navy);color:var(--ivory);padding:15px;transform:translateY(-150%)}
.skip-link:focus{transform:none}

/* ---------- brand artwork ----------
   The supplied orange-and-navy logo and banner, cut out of their navy plates
   with the metallic rendering intact. These are the artwork's own pixels, so
   they are NOT tintable: there is one colourway and it is the file's. Edge
   pixels were un-mixed against the plate, so there is no navy fringe on light
   grounds. .mark is the emblem alone, .wordmark the "Amanecer AI" type alone,
   .lockup the horizontal pairing exactly as the banner sets it. Size each by
   height; aspect-ratio supplies the width. Never set width and height both. */
.mark,.wordmark,.lockup{
  display:block;flex:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.mark{width:44px;height:44px;background-image:url(assets/mark.png)}
.wordmark{height:46px;aspect-ratio:800/107;background-image:url(assets/wordmark.png)}
.lockup{height:46px;aspect-ratio:700/173;background-image:url(assets/lockup.png)}

/* ---------- typography scale ---------- */
h1{font-size:clamp(58px,6.5vw,102px);line-height:1;letter-spacing:-.032em}
h1 em{color:var(--copper)}
h2{font-size:clamp(42px,4vw,60px);line-height:1.06;letter-spacing:-.022em}
h2 em{color:var(--slate)}
.dark-section h2 em{color:var(--copper-lit)}
.section-label{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--slate);line-height:1.6}

/* ---------- controls ---------- */
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;min-height:52px;padding:18px 23px;background:var(--navy);color:var(--ivory);border:1px solid transparent;font-size:14px;font-weight:500;transition:background .2s,transform .2s}
.button:hover{background:#20334b}                       /* navy, one step lifted */
.button:active{transform:translateY(2px)}
.button>span{font-size:20px;font-weight:400;transition:transform .2s}
.button:hover>span{transform:translate(2px,-2px)}
.button-small{min-height:46px;padding:13px 20px}
.button-light{background:var(--ivory);color:var(--navy)}
.button-light:hover{background:var(--sand)}

.text-link{display:inline-flex;align-items:center;gap:25px;padding-bottom:6px;border-bottom:1px solid var(--copper);font-size:14px;line-height:1.5}
.text-link>span{font-size:19px;transition:transform .2s}
.text-link:hover>span{transform:translate(3px,-2px)}
.text-link:active>span{transform:translate(1px,0)}

/* ---------- header ---------- */
.header{position:relative;z-index:3;max-width:1600px;margin-inline:auto;padding:26px var(--gutter);display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;transition:opacity .2s}
.brand:hover{opacity:.72}
.header .lockup{height:52px}
.desktop-nav{margin-left:auto;display:flex;gap:32px;font-size:14px}
.desktop-nav a{position:relative;padding-block:10px}
.desktop-nav a::after{content:'';position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.desktop-nav a:hover::after{transform:scaleX(1)}
.menu-toggle{display:none}

/* ---------- intro: the sunrise ----------
   The one orchestrated moment on the page. The mark rises from behind a
   copper horizon, the way the name reads. */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--navy);text-align:center;transition:opacity .28s ease}
.intro:focus{outline:none}
.intro.is-leaving{opacity:0;pointer-events:none}
.intro-horizon{position:relative;width:150px;height:150px;margin:0 auto 26px;overflow:hidden}
.intro-mark{width:150px;height:150px;animation:sunrise 1.5s .15s var(--ease) both}
.intro-horizon::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--copper-lit);transform:scaleX(0);animation:horizon .9s .1s var(--ease) forwards}
.intro-word{height:52px;margin:0 auto;animation:rise .8s 1.25s both}
.intro-tagline{margin-top:20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim);animation:rise .8s 1.55s both}
@keyframes sunrise{from{transform:translateY(78%);opacity:0}60%{opacity:1}to{transform:translateY(0);opacity:1}}
@keyframes horizon{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- hero ---------- */
.hero{padding-top:80px}
.hero-heading{display:grid;grid-template-columns:1.78fr 1fr;gap:72px;align-items:center}
.hero-copy{max-width:370px;padding-top:14px}
.hero-copy>p{font-size:18px;line-height:1.65;margin-bottom:26px;color:var(--slate)}
.hero-copy>.text-link{margin-top:20px;gap:15px;font-size:13px;border-bottom:0}

/* ---------- connection scene ---------- */
.connection-scene{position:relative;isolation:isolate;overflow:hidden;margin-top:68px;padding:26px 34px 22px;background:var(--navy);color:var(--ivory);border:1px solid var(--navy-rule);box-shadow:0 20px 48px #0a193014}
.connection-scene::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 55%,#b8733319,transparent 46%)}
.scene-topline,.scene-bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.035em;color:var(--ivory-dim)}
.scene-note{color:var(--ivory)}
.connection-field{position:relative;height:294px;display:flex;align-items:center;justify-content:space-between}
.source-stack,.destination-stack{position:relative;z-index:1;display:flex;flex-direction:column;gap:15px}
.source-stack{width:200px}
.destination-stack{width:235px;gap:30px}
.source-stack>span,.destination-stack>span{display:flex;align-items:center;gap:15px;min-height:52px;padding:14px 16px;background:var(--navy-lift);border:1px solid var(--navy-rule);font-size:13px}
.destination-stack>span{justify-content:space-between;gap:16px}
.small-icon{width:25px;font-size:25px;font-style:normal;line-height:1;text-align:center;color:var(--copper-lit)}
.destination-stack i{font-size:21px;font-style:normal;color:var(--copper-lit)}
.connection-lines{position:absolute;top:61px;left:198px;width:calc(100% - 428px);height:170px;overflow:visible}
.connection-lines path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.base-lines{stroke:var(--copper);opacity:.42}
.signal-lines{stroke:var(--copper-lit);opacity:0}
.connection-hub{position:absolute;left:50%;transform:translateX(-50%);width:158px;height:158px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 35% 20%,#26374b,var(--navy) 70%);border:1px solid #b8733380;box-shadow:0 18px 35px #00000055,inset 0 1px 2px #fff8f026}
.connection-hub::before,.connection-hub::after{content:'';position:absolute;border-radius:50%;border:1px solid var(--copper)}
.connection-hub::before{inset:-15px;opacity:.22}
.connection-hub::after{inset:-28px;opacity:.11}
.connection-hub .mark{width:72px;height:72px}
.hub-label{margin-top:11px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--copper-lit)}
.motion-toggle{border:0;background:none;padding:10px 0 10px 14px;font-size:11px;color:var(--ivory-dim)}
.motion-toggle:hover{color:var(--ivory)}
.motion-toggle:active{transform:translateY(1px)}

/* ---------- approach ---------- */
.approach{display:grid;grid-template-columns:1fr 2.35fr;gap:45px}
.approach>.section-label{padding-top:14px}
.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:38px 0 29px}
.two-columns p{font-size:15.5px;color:var(--slate)}

/* ---------- capabilities (dark) ---------- */
.dark-section{background:var(--navy);color:var(--ivory)}
.capabilities{padding-block:104px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:50px}
.section-heading>p{flex-shrink:0;padding-bottom:5px;font-size:14px;color:var(--slate)}
.dark-section .section-heading>p{color:var(--ivory-dim)}
.capability-list{margin-top:60px;border-top:1px solid var(--navy-rule)}
.capability-list details{border-bottom:1px solid var(--navy-rule)}
.capability-list summary{display:flex;align-items:center;gap:30px;padding:28px 0;list-style:none;cursor:pointer}
.capability-list summary::-webkit-details-marker{display:none}
.capability-list summary:hover h3{color:var(--copper-lit)}
.capability-list summary:active{opacity:.8}
.capability-list h3{font-size:36px;letter-spacing:-.015em;transition:color .2s}
.capability-number{width:60px;font-size:11px;letter-spacing:.08em;color:var(--copper-lit)}
.details-sign{margin-left:auto;font-size:25px;transition:transform .25s}
.capability-list details[open] .details-sign{transform:rotate(45deg)}
.capability-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-left:90px;padding-bottom:36px;animation:rise .35s both}
.capability-content p{max-width:480px;font-size:15.5px;color:var(--ivory-dim)}
.service-tags{display:flex;flex-wrap:wrap;align-content:start;justify-content:flex-end;gap:10px}
.service-tags span{padding:10px 13px;border:1px solid var(--navy-rule);font-size:11px;color:var(--ivory-dim)}

/* ---------- work ---------- */
.work-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:76px;align-items:center}
.work-art{position:relative;display:flex;align-items:center;justify-content:center;height:460px;overflow:hidden;background:var(--sand);border:1px solid var(--rule);perspective:1000px}
.architecture{position:relative;width:300px;height:270px;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(-9deg);transition:transform .35s ease-out}
.architecture-layer{position:absolute;width:280px;height:155px;padding:20px 23px;background:var(--ivory);border:1px solid var(--rule);box-shadow:0 3px 5px #0a193012,12px 20px 35px #0a19301f;transition:transform 1s var(--ease),opacity .8s ease}
.architecture-layer>span{display:block;font-size:12px;font-weight:500}
.layer-one{top:-16px;left:-12px}
.layer-two{top:65px;left:20px}
.layer-three{top:146px;left:52px;background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.layer-one i{display:inline-block;width:19px;height:19px;margin:14px 5px 0 0;border:1px solid var(--rule);border-radius:50%}
.mini-workflow{display:flex;gap:32px;margin-top:22px}
.mini-workflow b{position:relative;width:36px;height:22px;border:1px solid var(--copper)}
.mini-workflow b:not(:last-child)::after{content:'';position:absolute;left:35px;top:9px;width:32px;height:1px;background:var(--copper)}
.mini-platform{display:flex;gap:12px;margin-top:20px}
.mini-platform i{width:59px;height:48px;background:var(--navy-lift);border:1px solid var(--navy-rule)}
.mini-platform i:first-child{border-top:2px solid var(--copper-lit)}
.art-caption{position:absolute;bottom:25px;font-size:11px;color:var(--slate)}
.work-copy h3{margin:22px 0;font-size:47px;line-height:1.07;letter-spacing:-.02em}
.work-copy p{max-width:400px;margin-bottom:16px;font-size:15.5px;color:var(--slate)}
.work-copy .text-link{margin-top:12px}
.work-copy small{display:block;margin-top:22px;font-size:10px;color:var(--slate)}

/* ---------- process ---------- */
.process{padding-top:0}
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin:0;padding:32px 0 0;list-style:none;border-top:1px solid var(--rule)}
.process-steps li>span{font-size:11px;letter-spacing:.06em;color:var(--slate)}
.process-steps h3{margin:25px 0 15px;font-size:29px}
.process-steps p{max-width:310px;font-size:14.5px;color:var(--slate)}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:1fr 2.35fr;gap:45px;padding-top:65px;padding-bottom:100px;border-top:1px solid var(--rule)}
.team>div>p{max-width:610px;margin-top:28px;font-size:15.5px;color:var(--slate)}

/* ---------- contact (dark) ---------- */
.contact{padding-block:86px 80px;text-align:center}
.contact-inner{max-width:1000px}
.contact-mark{width:68px;height:68px;margin:0 auto 28px}
.contact h2{font-size:clamp(52px,5.8vw,80px)}
.contact p{margin-top:26px;font-size:15.5px;color:var(--ivory-dim)}
.contact .button{margin-top:30px}

/* ---------- footer ---------- */
.footer{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:42px}
.footer .lockup{height:36px}
.footer>p{font-size:12px;color:var(--slate)}
.footer>div{font-size:11px;text-align:right;color:var(--slate)}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.process-steps li:nth-child(2){transition-delay:.1s}
.process-steps li:nth-child(3){transition-delay:.2s}
.work-art.reveal:not(.in-view) .layer-one{transform:translate3d(-12px,-35px,-30px);opacity:0}
.work-art.reveal:not(.in-view) .layer-two{opacity:0}
.work-art.reveal:not(.in-view) .layer-three{transform:translate3d(12px,35px,30px);opacity:0}
.work-art.in-view .layer-one{transform:translateZ(-24px)}
.work-art.in-view .layer-three{transform:translateZ(24px)}
.flow-active .signal-lines{opacity:1}
.flow-active .signal-lines path{stroke-width:2;stroke-dasharray:65 1100;filter:drop-shadow(0 0 3px var(--copper));animation:connection-loop 4s linear infinite}
.flow-active .signal-lines path:nth-child(2){animation-delay:.45s}
.flow-active .signal-lines path:nth-child(3){animation-delay:.9s}
.flow-active .signal-lines path:nth-child(n+4){animation-delay:1.6s}
@keyframes connection-loop{0%{stroke-dashoffset:1100;opacity:0}10%,85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.motion-paused *,.offscreen *{animation-play-state:paused!important}

/* ---------- responsive ---------- */
@media(min-width:1550px){
  .hero-heading{grid-template-columns:1.8fr 1fr}
  h1{font-size:108px}
}
@media(max-width:1100px){
  :root{--gutter:40px}
  .header{gap:25px}
  .desktop-nav{gap:20px}
  .hero{padding-top:60px}
  .hero-heading{grid-template-columns:1.4fr 1fr;gap:35px}
  h1{font-size:76px}
  .hero-copy>p{font-size:16px}
  .connection-scene{padding-inline:24px}
  .source-stack{width:170px}
  .destination-stack{width:190px}
  .destination-stack>span{padding-inline:10px;font-size:11px}
  .connection-lines{left:165px;width:calc(100% - 350px)}
  .connection-hub{width:130px;height:130px}
  .connection-hub .mark{width:58px;height:58px}
  .capability-content{gap:25px}
  .section-heading>p{flex-shrink:1}
  .work-feature{gap:40px}
  .footer>p{display:none}
}
@media(max-width:760px){
  :root{--gutter:24px}
  html{scroll-padding-top:25px}
  .section-space{padding-block:73px}
  .header{padding-block:22px;gap:20px}
  .header .lockup{height:36px}
  .desktop-nav,.header-cta{display:none}
  .menu-toggle{display:flex;align-items:center;gap:14px;margin-left:auto;padding:12px 0 12px 12px;background:none;border:0;font-size:13px}
  .menu-toggle>span{font-size:22px}
  .menu-toggle:hover{color:var(--copper)}
  .menu-toggle:active{transform:translateY(1px)}
  #mobile-nav{position:absolute;top:76px;left:0;right:0;display:flex;flex-direction:column;gap:5px;padding:18px var(--gutter) 25px;background:var(--ivory);border-bottom:1px solid var(--rule)}
  #mobile-nav a{padding:14px 0;font-size:18px}

  .hero{padding-top:40px}
  .hero-heading{display:block}
  h1{font-size:clamp(58px,12.4vw,92px);line-height:1.02;letter-spacing:-.028em}
  .hero-copy{max-width:480px;padding-top:28px}
  .hero-copy>p{margin-bottom:22px}
  .hero-copy>.text-link{display:flex;width:max-content;margin-top:15px}

  .connection-scene{margin:42px -8px 0;padding:20px 17px 12px}
  .scene-topline{font-size:9px}
  .scene-note{display:none}
  .connection-field{display:block;height:380px}
  .connection-field::before,.connection-field::after{content:'';position:absolute;left:50%;width:1px;height:37px;background:var(--copper);transform-origin:top}
  .connection-field::before{top:108px}
  .connection-field::after{top:280px}
  .flow-active .connection-field::before,.flow-active .connection-field::after{animation:mobile-connect 2.4s ease-in-out infinite}
  .flow-active .connection-field::after{animation-delay:1.2s}
  .source-stack{flex-direction:row;width:100%;gap:8px;padding-top:27px}
  .source-stack>span{flex:1;min-width:0;flex-direction:column;gap:7px;padding:10px 4px;font-size:9px}
  .small-icon{font-size:22px}
  .destination-stack{position:absolute;bottom:20px;left:0;flex-direction:row;width:100%;gap:8px}
  .destination-stack>span{flex:1;gap:5px;min-height:46px;padding:11px 7px;font-size:9px}
  .destination-stack i{font-size:15px}
  .connection-lines{display:none}
  .connection-hub{top:154px;width:118px;height:118px}
  .connection-hub .mark{width:56px;height:56px}
  .connection-hub::before{inset:-12px}
  .connection-hub::after{inset:-23px}
  .hub-label{margin-top:8px;font-size:8px}
  .scene-bottom{font-size:8px}
  .motion-toggle{font-size:9px}

  .approach{display:block}
  .approach>.section-label{padding:0;margin-bottom:26px}
  h2{font-size:41px;line-height:1.1}
  .two-columns{grid-template-columns:1fr;gap:17px;margin-top:27px}
  .capabilities{padding-block:70px}
  .section-heading{display:block;margin-bottom:34px}
  .section-heading>p{margin-top:24px}
  .capability-list{margin-top:35px}
  .capability-list summary{gap:15px;padding:25px 0}
  .capability-list h3{font-size:26px}
  .capability-number{width:22px}
  .details-sign{font-size:22px}
  .capability-content{grid-template-columns:1fr;gap:22px;margin-left:37px;padding-bottom:26px}
  .service-tags{justify-content:flex-start;gap:7px}
  .service-tags span{padding:8px;font-size:10px}

  .work-feature{grid-template-columns:1fr;gap:32px}
  .work-art{height:372px}
  .architecture{transform:translateY(-18px) rotate(-9deg) scale(.8)}
  .art-caption{bottom:18px;font-size:10px}
  .work-copy h3{margin:15px 0 22px;font-size:37px}
  .work-copy p{max-width:100%}
  .process-steps{grid-template-columns:1fr;gap:32px;padding-top:27px}
  .process-steps h3{margin:13px 0 10px;font-size:28px}
  .process-steps p{max-width:100%}
  .team{grid-template-columns:1fr;gap:25px;padding-top:35px;padding-bottom:70px}
  .team h2{font-size:37px}

  .contact{padding-block:60px}
  .contact h2{font-size:clamp(40px,10.4vw,52px)}
  .contact p br{display:none}
  .contact-mark{width:56px;height:56px}
  .footer{flex-wrap:wrap;gap:24px;padding-block:29px}
  .footer .lockup{height:32px}
  .footer>div{width:auto;text-align:left}

  .intro-horizon,.intro-mark{width:118px;height:118px}
  .intro-word{height:40px}
  .intro-tagline{font-size:11px}
}
@keyframes mobile-connect{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro{display:none!important}
  .reveal{opacity:1;transform:none}
  .architecture-layer{transform:none!important;opacity:1!important}
  .architecture{--tilt-x:0deg;--tilt-y:0deg}
  .signal-lines{display:none}
  .motion-toggle{display:none}
}